@yamada-ui/react/dist/esm/core/system/styled.js

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

"use client";


import { createContext as createContext$1 } from "../../utils/context.js";
import { utils_exports } from "../../utils/index.js";
import { useSystem } from "./system-provider.js";
import { useTheme } from "./theme-provider.js";
import { Slot } from "../../components/slot/slot.js";
import { css } from "../css/css.js";
import { createShouldForwardProp } from "../components/props.js";
import { useComponentStyle } from "../components/use-component-style.js";
import { getDisplayName } from "../components/utils.js";
import { useMemo, useRef } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { withEmotionCache } from "@emotion/react";
import { serializeStyles } from "@emotion/serialize";
import { useInsertionEffectAlwaysWithSyncFallback } from "@emotion/use-insertion-effect-with-fallbacks";
import { getRegisteredStyles, insertStyles, registerStyles } from "@emotion/utils";
import isEqual from "react-fast-compare";

//#region src/core/system/styled.tsx
const Insertion = ({ cache, htmlTag, serialized }) => {
	registerStyles(cache, serialized, htmlTag);
	const style = useInsertionEffectAlwaysWithSyncFallback(() => insertStyles(cache, serialized, htmlTag));
	if (!(0, utils_exports.createdDom)() && !(0, utils_exports.isUndefined)(style)) {
		let className = serialized.name;
		let next = serialized.next;
		while (next !== void 0) {
			className = (0, utils_exports.cx)(className, next.name);
			next = next.next;
		}
		return /* @__PURE__ */ jsx("style", {
			"data-emotion": (0, utils_exports.cx)(cache.key, className),
			dangerouslySetInnerHTML: { __html: style },
			nonce: cache.sheet.nonce
		});
	} else return null;
};
const useSplitProps = (props, shouldForwardProp) => {
	const propsRef = useRef(props);
	if (!isEqual(propsRef.current, props)) propsRef.current = props;
	const computedProps = propsRef.current;
	return useMemo(() => (0, utils_exports.splitObject)(computedProps, shouldForwardProp), [computedProps, shouldForwardProp]);
};
const [ColorSchemeContext, useColorSchemeContext] = createContext$1({
	name: "ColorSchemeContext",
	strict: false
});
function createStyled(el, { base, compounds, props, sizes, variants, defaultProps, transferProps,...options } = {}) {
	const displayName = options.displayName ?? getDisplayName(options.name, "");
	const shouldForwardProp = !options.shouldForwardProp ? createShouldForwardProp(options.forwardProps) : void 0;
	const style = (0, utils_exports.filterUndefined)({
		base,
		compounds,
		props,
		sizes,
		variants,
		defaultProps
	});
	const StyledComponent = withEmotionCache(function({ as: Component = el, asChild, children,...props$1 }, cache, ref) {
		let className = "";
		const system = useSystem();
		const { theme } = useTheme();
		const componentStyleOptions = {
			className: system.utils.getClassName((0, utils_exports.runIfFn)(options.className, system) ?? (0, utils_exports.toKebabCase)(options.name ?? "")),
			style,
			transferProps
		};
		const registered = useRef([]);
		const htmlTag = (0, utils_exports.isString)(Component);
		const forwardAsChild = options.forwardAsChild || options.forwardProps?.includes("asChild");
		const [omittedProps, styleProps] = useSplitProps(props$1, shouldForwardProp);
		const [, rest] = useComponentStyle(omittedProps, componentStyleOptions);
		const [cssArray, colorScheme, forwardProps] = useMemo(() => {
			const { css: css$1, colorScheme: colorScheme$1,...forwardProps$1 } = rest;
			return [
				(0, utils_exports.toArray)(css$1),
				colorScheme$1,
				forwardProps$1
			];
		}, [rest]);
		styleProps.colorScheme ??= colorScheme;
		if (forwardProps.className) className = getRegisteredStyles(cache.registered, registered.current, forwardProps.className).trim();
		const interpolations = useMemo(() => [...registered.current, ...(0, utils_exports.filterEmpty)([...cssArray, styleProps].map(css(system, theme)))], [
			cssArray,
			system,
			styleProps,
			theme
		]);
		const serialized = useMemo(() => serializeStyles(interpolations, cache.registered), [interpolations, cache.registered]);
		className = (0, utils_exports.cx)(className, !!serialized.styles ? `${cache.key}-${serialized.name}` : void 0);
		className = (0, utils_exports.cx)(className, options.target);
		if (!className) className = void 0;
		const mergedProps = {
			...forwardProps,
			className,
			children
		};
		return /* @__PURE__ */ jsxs(ColorSchemeContext, {
			value: styleProps.colorScheme,
			children: [/* @__PURE__ */ jsx(Insertion, {
				cache,
				htmlTag,
				serialized
			}), asChild && !forwardAsChild ? /* @__PURE__ */ jsx(Slot, {
				ref,
				...mergedProps
			}) : /* @__PURE__ */ jsx(Component, {
				ref,
				...mergedProps
			})]
		});
	});
	StyledComponent.displayName = displayName || "StyledComponent";
	return StyledComponent;
}

//#endregion
export { ColorSchemeContext, createStyled, useColorSchemeContext };
//# sourceMappingURL=styled.js.map