@veracity/vui/dist/core/styled.js

Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.

import system from "../system/system.js";
import { createX } from "@xstyled/styled-components";
import scStyled, { createGlobalStyle, css } from "styled-components";
import { transform } from "@xstyled/core";
import { flattenStrings } from "@xstyled/util";

//#region src/core/styled.ts
/** Creates enhanced 'styled' function with optional style generators and prop-forwarding safeguard. */
function createBaseStyled(css, generator) {
	const config = generator ? forwardPropConfig(generator) : {};
	return ((component) => {
		return getCreateStyle(config ? scStyled(component).withConfig(config) : scStyled(component), css, generator);
	});
}
/** Enhances createGlobalStyle function with custom 'css' helper. */
function createCreateGlobalStyle() {
	const css = createCssFunction();
	return ((...args) => createGlobalStyle([css(...args)]));
}
/** Enhances styled-components' 'css' function with automatic theming. */
function createCssFunction() {
	return ((...args) => {
		const scCssArgs = css(...args);
		return flattenStrings(scCssArgs).map(transform);
	});
}
/**
* Creates full 'styled' function with properties for components.
* Includes base version and system version using 'Box' postfix.
*/
function createStyled(generator) {
	const css = createCssFunction();
	const styled = createBaseStyled(css);
	const vstyled = createBaseStyled(css, generator);
	Object.keys(scStyled).forEach((key) => {
		styled[key] = styled(key);
		styled[`${key}Box`] = vstyled(key);
	});
	return styled;
}
/** Provides configuration to the 'styled' function, which filters out xstyled system props. */
function forwardPropConfig(generator) {
	return { shouldForwardProp: (prop, defaultValidatorFn) => {
		if (typeof prop === "string" && generator.meta.props.includes(prop)) return false;
		return defaultValidatorFn(prop);
	} };
}
/** Extends styled component with a given styles generator (system). */
function getCreateStyle(baseCreateStyle, css, generator) {
	const createStyle = (...args) => baseCreateStyle`${css(...args)}${generator}`;
	createStyle.attrs = (attrs) => getCreateStyle(baseCreateStyle.attrs(attrs), css, generator);
	createStyle.withConfig = (config) => getCreateStyle(baseCreateStyle.withConfig(config), css, generator);
	return createStyle;
}
const createGlobalStyle$1 = createCreateGlobalStyle();
const css$1 = createCssFunction();
const v = createX(system);
const styled = createStyled(system);

//#endregion
export { createGlobalStyle$1 as createGlobalStyle, css$1 as css, styled as default, styled, v };
globalThis.__vuiVersion__ = "5.3.1"
//# sourceMappingURL=styled.js.map