@yamada-ui/react 1.7.7 → 2.0.0-dev-20250626070331

package/dist/esm/core/system/styled.js

@@ -0,0 +1,119 @@
+"use client";
+
+
+import { createContext } from "../../utils/context.js";
+import { utils_exports } from "../../utils/index.js";
+import { css } from "../css/css.js";
+import { useSystem } from "./system-provider.js";
+import { useTheme } from "./theme-provider.js";
+import { Slot } from "../../components/slot/slot.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({
+	name: "ColorSchemeContext",
+	strict: false
+});
+function createStyled(el, { base, compounds, props, sizes, variants, defaultProps, transferProps,...styledOptions } = {}) {
+	const displayName = styledOptions.displayName ?? getDisplayName(styledOptions.name, "");
+	const shouldForwardProp = !styledOptions.shouldForwardProp ? createShouldForwardProp(styledOptions.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)(styledOptions.className, system) ?? (0, utils_exports.toKebabCase)(styledOptions.name ?? "")),
+			style,
+			transferProps
+		};
+		const registered = useRef([]);
+		const htmlTag = (0, utils_exports.isString)(Component);
+		const forwardAsChild = styledOptions.forwardAsChild || styledOptions.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, `${cache.key}-${serialized.name}`);
+		className = (0, utils_exports.cx)(className, styledOptions.target);
+		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

package/dist/esm/core/system/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","names":["Insertion: FC<InsertionProps>","props: Dict","shouldForwardProp?: ShouldForwardProp","el: Y","props","forwardProps","css","colorScheme"],"sources":["../../../../src/core/system/styled.tsx"],"sourcesContent":["\"use client\"\n\nimport type { EmotionCache, SerializedStyles } from \"@emotion/utils\"\nimport type { FC } from \"react\"\nimport type { Dict } from \"../../utils\"\nimport type { As, ShouldForwardProp, StyledComponent } from \"../components\"\nimport type { CSSModifierObject, CSSPropObject } from \"../css\"\nimport type {\n  ColorScheme,\n  ComponentStyle,\n  System,\n  UsageTheme,\n} from \"./index.types\"\nimport { withEmotionCache } from \"@emotion/react\"\nimport { serializeStyles } from \"@emotion/serialize\"\nimport { useInsertionEffectAlwaysWithSyncFallback } from \"@emotion/use-insertion-effect-with-fallbacks\"\nimport {\n  getRegisteredStyles,\n  insertStyles,\n  registerStyles,\n} from \"@emotion/utils\"\nimport { useMemo, useRef } from \"react\"\nimport isEqual from \"react-fast-compare\"\nimport { Slot } from \"../../components/slot\"\nimport {\n  createContext,\n  createdDom,\n  cx,\n  filterEmpty,\n  filterUndefined,\n  isString,\n  isUndefined,\n  runIfFn,\n  splitObject,\n  toArray,\n  toKebabCase,\n} from \"../../utils\"\nimport {\n  createShouldForwardProp,\n  getDisplayName,\n  useComponentStyle,\n} from \"../components\"\nimport { css } from \"../css\"\nimport { useSystem } from \"./system-provider\"\nimport { useTheme } from \"./theme-provider\"\n\ninterface InsertionProps {\n  cache: EmotionCache\n  htmlTag: boolean\n  serialized: SerializedStyles\n}\n\nconst Insertion: FC<InsertionProps> = ({ cache, htmlTag, serialized }) => {\n  registerStyles(cache, serialized, htmlTag)\n\n  const style = useInsertionEffectAlwaysWithSyncFallback(() =>\n    insertStyles(cache, serialized, htmlTag),\n  )\n\n  if (!createdDom() && !isUndefined(style)) {\n    let className = serialized.name\n    let next = serialized.next\n\n    while (next !== undefined) {\n      className = cx(className, next.name)\n      next = next.next\n    }\n\n    return (\n      <style\n        data-emotion={cx(cache.key, className)}\n        dangerouslySetInnerHTML={{ __html: style }}\n        nonce={cache.sheet.nonce}\n      />\n    )\n  } else {\n    return null\n  }\n}\n\nconst useSplitProps = <Y extends Dict, M extends Dict>(\n  props: Dict,\n  shouldForwardProp?: ShouldForwardProp,\n) => {\n  const propsRef = useRef(props)\n\n  if (!isEqual(propsRef.current, props)) propsRef.current = props\n\n  const computedProps = propsRef.current\n\n  return useMemo(\n    () => splitObject<Y, M>(computedProps, shouldForwardProp),\n    [computedProps, shouldForwardProp],\n  )\n}\n\nexport const [ColorSchemeContext, useColorSchemeContext] =\n  createContext<ColorScheme>({\n    name: \"ColorSchemeContext\",\n    strict: false,\n  })\n\nexport interface StyledOptions<\n  Y extends CSSPropObject = CSSPropObject,\n  M extends CSSModifierObject = CSSModifierObject,\n  D extends CSSModifierObject = CSSModifierObject,\n  H extends number | string | symbol = string,\n> extends Omit<ComponentStyle<Y, M, D>, \"className\"> {\n  name?: string\n  target?: string\n  className?: ((system: System) => string) | string\n  displayName?: string\n  forwardAsChild?: boolean\n  shouldForwardProp?: boolean | ShouldForwardProp\n  forwardProps?: string[]\n  transferProps?: H[]\n}\n\nexport function createStyled<\n  Y extends As,\n  M extends object = {},\n  D extends CSSPropObject = CSSPropObject,\n  H extends CSSModifierObject = CSSModifierObject,\n  R extends CSSModifierObject = CSSModifierObject,\n>(\n  el: Y,\n  {\n    base,\n    compounds,\n    props,\n    sizes,\n    variants,\n    defaultProps,\n    transferProps,\n    ...styledOptions\n  }: StyledOptions<D, H, R, keyof M> = {},\n): StyledComponent<Y, M> {\n  const displayName =\n    styledOptions.displayName ?? getDisplayName(styledOptions.name, \"\")\n  const shouldForwardProp = !styledOptions.shouldForwardProp\n    ? createShouldForwardProp(styledOptions.forwardProps)\n    : undefined\n  const style = filterUndefined({\n    base,\n    compounds,\n    props,\n    sizes,\n    variants,\n    defaultProps,\n  })\n\n  const StyledComponent = withEmotionCache<Dict>(function (\n    { as: Component = el, asChild, children, ...props },\n    cache,\n    ref,\n  ) {\n    let className = \"\"\n\n    const system = useSystem()\n    const { theme } = useTheme<UsageTheme>()\n    const componentStyleOptions = {\n      className: system.utils.getClassName(\n        runIfFn(styledOptions.className, system) ??\n          toKebabCase(styledOptions.name ?? \"\"),\n      ),\n      style,\n      transferProps,\n    }\n    const registered = useRef<string[]>([])\n    const htmlTag = isString(Component)\n    const forwardAsChild =\n      styledOptions.forwardAsChild ||\n      styledOptions.forwardProps?.includes(\"asChild\")\n    const [omittedProps, styleProps] = useSplitProps(props, shouldForwardProp)\n    const [, rest] = useComponentStyle<any, {}>(\n      omittedProps,\n      componentStyleOptions,\n    )\n    const [cssArray, colorScheme, forwardProps] = useMemo(() => {\n      const { css, colorScheme, ...forwardProps } = rest\n\n      return [toArray(css), colorScheme, forwardProps]\n    }, [rest])\n\n    styleProps.colorScheme ??= colorScheme\n\n    if (forwardProps.className)\n      className = getRegisteredStyles(\n        cache.registered,\n        registered.current,\n        forwardProps.className,\n      ).trim()\n\n    const interpolations = useMemo(\n      () => [\n        ...registered.current,\n        ...filterEmpty([...cssArray, styleProps].map(css(system, theme))),\n      ],\n      [cssArray, system, styleProps, theme],\n    )\n\n    const serialized = useMemo(\n      () => serializeStyles(interpolations, cache.registered),\n      [interpolations, cache.registered],\n    )\n\n    className = cx(className, `${cache.key}-${serialized.name}`)\n    className = cx(className, styledOptions.target)\n\n    const mergedProps = { ...forwardProps, className, children }\n\n    return (\n      <ColorSchemeContext value={styleProps.colorScheme}>\n        <Insertion cache={cache} htmlTag={htmlTag} serialized={serialized} />\n\n        {asChild && !forwardAsChild ? (\n          <Slot ref={ref} {...mergedProps} />\n        ) : (\n          <Component ref={ref} {...mergedProps} />\n        )}\n      </ColorSchemeContext>\n    )\n  }) as StyledComponent<Y, M>\n\n  StyledComponent.displayName = displayName || \"StyledComponent\"\n\n  return StyledComponent\n}\n"],"mappings":"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"}

package/dist/esm/core/system/system-provider.js

@@ -0,0 +1,24 @@
+"use client";
+
+
+import { createSystem, defaultSystem } from "./create-system.js";
+import { createContext, use, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/core/system/system-provider.tsx
+const SystemContext = createContext(defaultSystem);
+const SystemProvider = ({ children, config, theme = {} }) => {
+	const system = useMemo(() => createSystem(theme, config), [theme, config]);
+	return /* @__PURE__ */ jsx(SystemContext, {
+		value: system,
+		children
+	});
+};
+const useSystem = () => {
+	const system = use(SystemContext);
+	return system;
+};
+
+//#endregion
+export { SystemProvider, useSystem };
+//# sourceMappingURL=system-provider.js.map

package/dist/esm/core/system/system-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"system-provider.js","names":["SystemProvider: FC<SystemProviderProps>"],"sources":["../../../../src/core/system/system-provider.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren } from \"react\"\nimport type { System, ThemeConfig, UsageTheme } from \"./index.types\"\nimport { createContext, use, useMemo } from \"react\"\nimport { createSystem, defaultSystem } from \"./create-system\"\n\ninterface SystemContext extends System {}\n\nconst SystemContext = createContext<SystemContext>(defaultSystem)\n\nexport interface SystemProviderProps extends PropsWithChildren {\n  /**\n   * The config of the yamada ui.\n   */\n  config?: ThemeConfig\n  /**\n   * The theme of the yamada ui.\n   */\n  theme?: UsageTheme\n}\n\nexport const SystemProvider: FC<SystemProviderProps> = ({\n  children,\n  config,\n  theme = {},\n}) => {\n  const system = useMemo(() => createSystem(theme, config), [theme, config])\n\n  return <SystemContext value={system}>{children}</SystemContext>\n}\n\nexport const useSystem = () => {\n  const system = use(SystemContext)\n\n  return system\n}\n"],"mappings":";;;;;;;;AASA,MAAM,gBAAgB,cAA6B,cAAc;AAajE,MAAaA,iBAA0C,CAAC,EACtD,UACA,QACA,QAAQ,CAAE,GACX,KAAK;CACJ,MAAM,SAAS,QAAQ,MAAM,aAAa,OAAO,OAAO,EAAE,CAAC,OAAO,MAAO,EAAC;AAE1E,wBAAO,IAAC;EAAc,OAAO;EAAS;GAAyB;AAChE;AAED,MAAa,YAAY,MAAM;CAC7B,MAAM,SAAS,IAAI,cAAc;AAEjC,QAAO;AACR"}

package/dist/esm/core/system/theme-manager.js

@@ -0,0 +1,59 @@
+"use client";
+
+
+import { THEME_SCHEME_STORAGE_KEY } from "./theme-script.js";
+
+//#region src/core/system/theme-manager.ts
+const hasSupport = !!globalThis.document;
+const createLocalStorage = (defaultStorageKey) => ({
+	type: "localStorage",
+	get: (initThemeScheme = "base") => (storageKey = defaultStorageKey) => {
+		if (!hasSupport) return initThemeScheme;
+		try {
+			const themeScheme = localStorage.getItem(storageKey);
+			return themeScheme || initThemeScheme;
+		} catch {
+			return initThemeScheme;
+		}
+	},
+	set: (themeScheme) => (storageKey = defaultStorageKey) => {
+		try {
+			localStorage.setItem(storageKey, String(themeScheme));
+		} catch {}
+	},
+	ssr: false
+});
+const parseCookie = (cookie, key) => {
+	const match = cookie.match(/* @__PURE__ */ new RegExp(`(^| )${key}=([^;]+)`));
+	return match?.[2];
+};
+const createCookieStorage = (defaultStorageKey, cookie) => ({
+	type: "cookie",
+	get: (initThemeScheme = "base") => (storageKey = defaultStorageKey) => {
+		if (cookie) return parseCookie(cookie, storageKey) || initThemeScheme;
+		if (!hasSupport) return initThemeScheme;
+		return parseCookie(document.cookie, storageKey) || initThemeScheme;
+	},
+	set: (themeScheme) => (storageKey = defaultStorageKey) => {
+		document.cookie = `${storageKey}=${themeScheme}; max-age=31536000; path=/`;
+	},
+	ssr: !!cookie
+});
+const createThemeSchemeManager = (type = "local", cookie) => {
+	switch (type) {
+		case "cookie":
+		case "ssr": return createCookieStorage(THEME_SCHEME_STORAGE_KEY, typeof cookie === "string" ? cookie : void 0);
+		default: return createLocalStorage(THEME_SCHEME_STORAGE_KEY);
+	}
+};
+const themeSchemeManager = {
+	cookieStorage: createCookieStorage(THEME_SCHEME_STORAGE_KEY),
+	createCookieStorage,
+	createLocalStorage,
+	localStorage: createLocalStorage(THEME_SCHEME_STORAGE_KEY),
+	ssr: (cookie) => createCookieStorage(THEME_SCHEME_STORAGE_KEY, cookie)
+};
+
+//#endregion
+export { createThemeSchemeManager, themeSchemeManager };
+//# sourceMappingURL=theme-manager.js.map

package/dist/esm/core/system/theme-manager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-manager.js","names":["defaultStorageKey: string","cookie: string","key: string","cookie?: string","type: \"cookie\" | \"local\" | \"ssr\""],"sources":["../../../../src/core/system/theme-manager.ts"],"sourcesContent":["\"use client\"\n\nimport type { ThemeScheme } from \"./index.types\"\nimport { THEME_SCHEME_STORAGE_KEY } from \"./theme-script\"\n\nconst hasSupport = !!(globalThis.document as Document | undefined)\n\nexport interface ThemeSchemeManager {\n  type: \"cookie\" | \"localStorage\"\n  get: (\n    initialThemeScheme?: ThemeScheme,\n  ) => (storageKey?: string) => ThemeScheme\n  set: (themeScheme: ThemeScheme) => (storageKey?: string) => void\n  ssr?: boolean\n}\n\nconst createLocalStorage = (defaultStorageKey: string): ThemeSchemeManager => ({\n  type: \"localStorage\",\n  get:\n    (initThemeScheme = \"base\") =>\n    (storageKey = defaultStorageKey) => {\n      if (!hasSupport) return initThemeScheme\n\n      try {\n        const themeScheme = localStorage.getItem(\n          storageKey,\n        ) as null | ThemeScheme\n\n        return themeScheme || initThemeScheme\n      } catch {\n        return initThemeScheme\n      }\n    },\n  set:\n    (themeScheme) =>\n    (storageKey = defaultStorageKey) => {\n      try {\n        localStorage.setItem(storageKey, String(themeScheme))\n      } catch {}\n    },\n\n  ssr: false,\n})\n\nconst parseCookie = (cookie: string, key: string): ThemeScheme | undefined => {\n  const match = cookie.match(new RegExp(`(^| )${key}=([^;]+)`))\n\n  return match?.[2] as ThemeScheme | undefined\n}\n\nconst createCookieStorage = (\n  defaultStorageKey: string,\n  cookie?: string,\n): ThemeSchemeManager => ({\n  type: \"cookie\",\n  get:\n    (initThemeScheme = \"base\") =>\n    (storageKey = defaultStorageKey) => {\n      if (cookie) return parseCookie(cookie, storageKey) || initThemeScheme\n\n      if (!hasSupport) return initThemeScheme\n\n      return parseCookie(document.cookie, storageKey) || initThemeScheme\n    },\n  set:\n    (themeScheme) =>\n    (storageKey = defaultStorageKey) => {\n      document.cookie = `${storageKey}=${themeScheme}; max-age=31536000; path=/`\n    },\n\n  ssr: !!cookie,\n})\n\nexport const createThemeSchemeManager = (\n  type: \"cookie\" | \"local\" | \"ssr\" = \"local\",\n  cookie?: string,\n) => {\n  switch (type) {\n    case \"cookie\":\n    case \"ssr\":\n      return createCookieStorage(\n        THEME_SCHEME_STORAGE_KEY,\n        typeof cookie === \"string\" ? cookie : undefined,\n      )\n\n    default:\n      return createLocalStorage(THEME_SCHEME_STORAGE_KEY)\n  }\n}\n\nexport const themeSchemeManager = {\n  cookieStorage: createCookieStorage(THEME_SCHEME_STORAGE_KEY),\n  createCookieStorage,\n  createLocalStorage,\n  localStorage: createLocalStorage(THEME_SCHEME_STORAGE_KEY),\n  ssr: (cookie?: string) =>\n    createCookieStorage(THEME_SCHEME_STORAGE_KEY, cookie),\n}\n"],"mappings":";;;;;;AAKA,MAAM,eAAgB,WAAW;AAWjC,MAAM,qBAAqB,CAACA,uBAAmD;CAC7E,MAAM;CACN,KACE,CAAC,kBAAkB,WACnB,CAAC,aAAa,sBAAsB;AAClC,OAAK,WAAY,QAAO;AAExB,MAAI;GACF,MAAM,cAAc,aAAa,QAC/B,WACD;AAED,UAAO,eAAe;EACvB,QAAO;AACN,UAAO;EACR;CACF;CACH,KACE,CAAC,gBACD,CAAC,aAAa,sBAAsB;AAClC,MAAI;AACF,gBAAa,QAAQ,YAAY,OAAO,YAAY,CAAC;EACtD,QAAO,CAAE;CACX;CAEH,KAAK;AACN;AAED,MAAM,cAAc,CAACC,QAAgBC,QAAyC;CAC5E,MAAM,QAAQ,OAAO,sBAAM,IAAI,QAAQ,OAAO,IAAI,WAAW;AAE7D,QAAO,QAAQ;AAChB;AAED,MAAM,sBAAsB,CAC1BF,mBACAG,YACwB;CACxB,MAAM;CACN,KACE,CAAC,kBAAkB,WACnB,CAAC,aAAa,sBAAsB;AAClC,MAAI,OAAQ,QAAO,YAAY,QAAQ,WAAW,IAAI;AAEtD,OAAK,WAAY,QAAO;AAExB,SAAO,YAAY,SAAS,QAAQ,WAAW,IAAI;CACpD;CACH,KACE,CAAC,gBACD,CAAC,aAAa,sBAAsB;AAClC,WAAS,YAAY,WAAW,GAAG,YAAY;CAChD;CAEH,OAAO;AACR;AAED,MAAa,2BAA2B,CACtCC,OAAmC,SACnCD,WACG;AACH,SAAQ,MAAR;EACE,KAAK;EACL,KAAK,MACH,QAAO,oBACL,iCACO,WAAW,WAAW,gBAC9B;EAEH,QACE,QAAO,mBAAmB,yBAAyB;CACtD;AACF;AAED,MAAa,qBAAqB;CAChC,eAAe,oBAAoB,yBAAyB;CAC5D;CACA;CACA,cAAc,mBAAmB,yBAAyB;CAC1D,KAAK,CAACA,WACJ,oBAAoB,0BAA0B,OAAO;AACxD"}

package/dist/esm/core/system/theme-provider.js

@@ -0,0 +1,122 @@
+"use client";
+
+
+import { utils_exports } from "../../utils/index.js";
+import { useEnvironment } from "./environment-provider.js";
+import { css } from "../css/css.js";
+import { useSystem } from "./system-provider.js";
+import { themeSchemeManager } from "./theme-manager.js";
+import { use, useCallback, useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Global, ThemeContext, ThemeProvider as ThemeProvider$1 } from "@emotion/react";
+
+//#region src/core/system/theme-provider.tsx
+const { localStorage } = themeSchemeManager;
+const getPreventTransition = (environment) => {
+	const { getDocument, getWindow } = environment;
+	const win = getWindow();
+	const doc = getDocument();
+	if (!win || !doc) return;
+	const css$1 = doc.createElement("style");
+	const node = doc.createTextNode(`*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`);
+	css$1.appendChild(node);
+	doc.head.appendChild(css$1);
+	return () => {
+		const forceReflow = () => win.getComputedStyle(doc.body);
+		forceReflow();
+		requestAnimationFrame(() => {
+			requestAnimationFrame(() => {
+				document.head.removeChild(css$1);
+			});
+		});
+	};
+};
+const ThemeProvider = ({ children, config, storageKey, theme = {}, themeSchemeManager: themeSchemeManager$1 = localStorage }) => {
+	const { defaultThemeScheme, disableTransitionOnChange } = config ?? {};
+	const environment = useEnvironment();
+	const [themeScheme, setThemeScheme] = useState(themeSchemeManager$1.get(defaultThemeScheme)(storageKey));
+	const changeThemeScheme = useCallback((themeScheme$1) => {
+		const { getDocument } = environment;
+		const doc = getDocument();
+		const cleanup = disableTransitionOnChange ? getPreventTransition(environment) : void 0;
+		if (doc) doc.documentElement.dataset.theme = themeScheme$1;
+		cleanup?.();
+		setThemeScheme(themeScheme$1);
+		themeSchemeManager$1.set(themeScheme$1)(storageKey);
+	}, [
+		disableTransitionOnChange,
+		environment,
+		themeSchemeManager$1,
+		storageKey
+	]);
+	useEffect(() => {
+		const themeScheme$1 = themeSchemeManager$1.get(defaultThemeScheme)(storageKey);
+		changeThemeScheme(themeScheme$1);
+	}, [
+		changeThemeScheme,
+		themeSchemeManager$1,
+		storageKey,
+		defaultThemeScheme
+	]);
+	return /* @__PURE__ */ jsxs(ThemeProvider$1, {
+		theme: {
+			changeThemeScheme,
+			themeScheme,
+			...theme
+		},
+		children: [/* @__PURE__ */ jsx(GlobalStyles, {}), children]
+	});
+};
+const GlobalStyles = () => {
+	const system = useSystem();
+	const { theme } = useTheme();
+	const { atRule, wrap } = system.layers;
+	const resetStyle = useMemo(() => {
+		const style = theme.styles?.resetStyle;
+		if (!style || (0, utils_exports.isEmptyObject)(style)) return void 0;
+		return css(system, theme)(style);
+	}, [system, theme]);
+	const globalStyle = useMemo(() => {
+		const style = theme.styles?.globalStyle;
+		if (!style || (0, utils_exports.isEmptyObject)(style)) return void 0;
+		return css(system, theme)(style);
+	}, [system, theme]);
+	const cssVars = useMemo(() => {
+		return { ":host, :root, [data-mode]": system.cssVars };
+	}, [system]);
+	return /* @__PURE__ */ jsx(Global, { styles: [
+		atRule,
+		wrap("tokens", cssVars),
+		wrap("reset", resetStyle),
+		wrap("global", globalStyle)
+	] });
+};
+/**
+* `useTheme` is a custom hook that returns a function for retrieving and switching themes.
+*
+* @see https://yamada-ui.com/hooks/use-theme
+*/
+const useTheme = () => {
+	const internalTheme = use(ThemeContext);
+	const theme = useMemo(() => {
+		const { themeScheme } = internalTheme;
+		if ((0, utils_exports.isUndefined)(themeScheme) || themeScheme === "base") return internalTheme;
+		const nestedTheme = "themeSchemes" in internalTheme && (0, utils_exports.isObject)(internalTheme.themeSchemes) ? internalTheme.themeSchemes[themeScheme] : void 0;
+		if (!nestedTheme) return internalTheme;
+		return (0, utils_exports.merge)(internalTheme, nestedTheme);
+	}, [internalTheme]);
+	const value = useMemo(() => {
+		const { changeThemeScheme, themeScheme } = internalTheme;
+		return {
+			changeThemeScheme,
+			internalTheme,
+			theme,
+			themeScheme
+		};
+	}, [theme, internalTheme]);
+	return value;
+};
+
+//#endregion
+export { GlobalStyles, ThemeProvider, getPreventTransition, useTheme };
+//# sourceMappingURL=theme-provider.js.map

package/dist/esm/core/system/theme-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-provider.js","names":["environment: Environment","css","ThemeProvider: FC<ThemeProviderProps>","changeThemeScheme: ChangeThemeScheme","themeScheme","themeSchemeManager","EmotionThemeProvider","GlobalStyles: FC"],"sources":["../../../../src/core/system/theme-provider.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ThemeProviderProps as EmotionThemeProviderProps } from \"@emotion/react\"\nimport type { FC, PropsWithChildren } from \"react\"\nimport type { Environment } from \"./environment-provider\"\nimport type {\n  ChangeThemeScheme,\n  StyledTheme,\n  Theme,\n  ThemeConfig,\n  ThemeScheme,\n  UsageTheme,\n} from \"./index.types\"\nimport type { ThemeSchemeManager } from \"./theme-manager\"\nimport { ThemeProvider as EmotionThemeProvider, Global } from \"@emotion/react\"\nimport { ThemeContext } from \"@emotion/react\"\nimport { use, useCallback, useEffect, useMemo, useState } from \"react\"\nimport { isEmptyObject, isObject, isUndefined, merge } from \"../../utils\"\nimport { css } from \"../css\"\nimport { useEnvironment } from \"./environment-provider\"\nimport { useSystem } from \"./system-provider\"\nimport { themeSchemeManager } from \"./theme-manager\"\n\nconst { localStorage } = themeSchemeManager\n\nexport const getPreventTransition = (environment: Environment) => {\n  const { getDocument, getWindow } = environment\n  const win = getWindow()\n  const doc = getDocument()\n\n  if (!win || !doc) return\n\n  const css = doc.createElement(\"style\")\n\n  const node = doc.createTextNode(\n    `*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`,\n  )\n\n  css.appendChild(node)\n\n  doc.head.appendChild(css)\n\n  return () => {\n    const forceReflow = () => win.getComputedStyle(doc.body)\n\n    forceReflow()\n\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        document.head.removeChild(css)\n      })\n    })\n  }\n}\n\nexport interface ThemeProviderProps\n  extends PropsWithChildren,\n    Omit<EmotionThemeProviderProps, \"children\" | \"theme\"> {\n  /**\n   * The config of the yamada ui.\n   */\n  config?: ThemeConfig\n  /**\n   * If `true`, will not mount the global styles defined in the theme.\n   *\n   * @default true\n   */\n  disableGlobalStyle?: boolean\n  /**\n   * If `true`, `ResetStyle` component will be mounted to help reset browser styles.\n   *\n   * @default true\n   */\n  disableResetStyle?: boolean\n  /**\n   * Key of value saved in storage.\n   * By default, it is saved to `local storage`.\n   */\n  storageKey?: string\n  /**\n   * The theme of the yamada ui.\n   */\n  theme?: UsageTheme\n  /**\n   * Manager to persist a user's theme scheme preference.\n   *\n   * Omit if you don't render server-side.\n   * For SSR, choose `themeSchemeManager.ssr`.\n   *\n   * @default 'themeSchemeManager.localStorage'\n   */\n  themeSchemeManager?: ThemeSchemeManager\n}\n\nexport const ThemeProvider: FC<ThemeProviderProps> = ({\n  children,\n  config,\n  storageKey,\n  theme = {},\n  themeSchemeManager = localStorage,\n}) => {\n  const { defaultThemeScheme, disableTransitionOnChange } = config ?? {}\n  const environment = useEnvironment()\n  const [themeScheme, setThemeScheme] = useState<ThemeScheme>(\n    themeSchemeManager.get(defaultThemeScheme)(storageKey),\n  )\n\n  const changeThemeScheme: ChangeThemeScheme = useCallback(\n    (themeScheme) => {\n      const { getDocument } = environment\n      const doc = getDocument()\n\n      const cleanup = disableTransitionOnChange\n        ? getPreventTransition(environment)\n        : undefined\n\n      if (doc) doc.documentElement.dataset.theme = themeScheme\n\n      cleanup?.()\n\n      setThemeScheme(themeScheme)\n\n      themeSchemeManager.set(themeScheme)(storageKey)\n    },\n    [disableTransitionOnChange, environment, themeSchemeManager, storageKey],\n  )\n\n  useEffect(() => {\n    const themeScheme = themeSchemeManager.get(defaultThemeScheme)(storageKey)\n\n    changeThemeScheme(themeScheme)\n  }, [changeThemeScheme, themeSchemeManager, storageKey, defaultThemeScheme])\n\n  return (\n    <EmotionThemeProvider theme={{ changeThemeScheme, themeScheme, ...theme }}>\n      <GlobalStyles />\n\n      {children}\n    </EmotionThemeProvider>\n  )\n}\n\nexport const GlobalStyles: FC = () => {\n  const system = useSystem()\n  const { theme } = useTheme<UsageTheme>()\n  const { atRule, wrap } = system.layers\n\n  const resetStyle = useMemo(() => {\n    const style = theme.styles?.resetStyle\n\n    if (!style || isEmptyObject(style)) return undefined\n\n    return css(system, theme)(style)\n  }, [system, theme])\n\n  const globalStyle = useMemo(() => {\n    const style = theme.styles?.globalStyle\n\n    if (!style || isEmptyObject(style)) return undefined\n\n    return css(system, theme)(style)\n  }, [system, theme])\n\n  const cssVars = useMemo(() => {\n    return { \":host, :root, [data-mode]\": system.cssVars }\n  }, [system])\n\n  return (\n    <Global\n      styles={[\n        atRule,\n        wrap(\"tokens\", cssVars),\n        wrap(\"reset\", resetStyle),\n        wrap(\"global\", globalStyle),\n      ]}\n    />\n  )\n}\n\n/**\n * `useTheme` is a custom hook that returns a function for retrieving and switching themes.\n *\n * @see https://yamada-ui.com/hooks/use-theme\n */\nexport const useTheme = <Y extends UsageTheme = Theme>() => {\n  const internalTheme = use(ThemeContext) as StyledTheme<Y>\n\n  const theme = useMemo(() => {\n    const { themeScheme } = internalTheme\n\n    if (isUndefined(themeScheme) || themeScheme === \"base\") return internalTheme\n\n    const nestedTheme =\n      \"themeSchemes\" in internalTheme && isObject(internalTheme.themeSchemes)\n        ? internalTheme.themeSchemes[themeScheme as string]\n        : undefined\n\n    if (!nestedTheme) return internalTheme\n\n    return merge<StyledTheme<Y>>(internalTheme, nestedTheme)\n  }, [internalTheme])\n\n  const value = useMemo(() => {\n    const { changeThemeScheme, themeScheme } = internalTheme\n\n    return {\n      changeThemeScheme,\n      internalTheme,\n      theme,\n      themeScheme,\n    }\n  }, [theme, internalTheme])\n\n  return value\n}\n"],"mappings":"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"}

package/dist/esm/core/system/theme-script.js

@@ -0,0 +1,25 @@
+"use client";
+
+
+import { jsx } from "react/jsx-runtime";
+
+//#region src/core/system/theme-script.tsx
+const THEME_SCHEME_STORAGE_KEY = "theme-scheme";
+const getThemeSchemeScript = ({ type = "localStorage", initialThemeScheme: init = "base", storageKey = THEME_SCHEME_STORAGE_KEY } = {}) => {
+	const isCookie = type === "cookie";
+	const cookieScript = `(function(){try{var a=function(c){var o=document.documentElement;return o.dataset.theme=c,c},h='${init}',r='${storageKey}',t=document.cookie.match(new RegExp('(^| )'.concat(r,'=([^;]+)'))),c=t?t[2]:null;c?a(c):(document.cookie=''.concat(r,'=').concat(a(h),'; max-age=31536000; path=/'))}catch(a){}})();`;
+	const localStorageScript = `(function(){try{var a=function(c){var o=document.documentElement;return o.dataset.theme=c,c},m='${init}',e='${storageKey}',t=localStorage.getItem(e);t?a(t):localStorage.setItem(e, a(m))}catch(a){}})();`;
+	const fn = isCookie ? cookieScript : localStorageScript;
+	return `!${fn}`.trim();
+};
+const ThemeSchemeScript = ({ nonce,...rest }) => {
+	const html = getThemeSchemeScript(rest);
+	return /* @__PURE__ */ jsx("script", {
+		dangerouslySetInnerHTML: { __html: html },
+		nonce
+	});
+};
+
+//#endregion
+export { THEME_SCHEME_STORAGE_KEY, ThemeSchemeScript, getThemeSchemeScript };
+//# sourceMappingURL=theme-script.js.map

package/dist/esm/core/system/theme-script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-script.js","names":[],"sources":["../../../../src/core/system/theme-script.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ThemeScheme } from \"./index.types\"\n\nexport interface ThemeSchemeScriptProps {\n  type?: \"cookie\" | \"localStorage\"\n  initialThemeScheme?: ThemeScheme\n  nonce?: string\n  storageKey?: string\n}\n\nexport const THEME_SCHEME_STORAGE_KEY = \"theme-scheme\"\n\nexport const getThemeSchemeScript = ({\n  type = \"localStorage\",\n  initialThemeScheme: init = \"base\",\n  storageKey = THEME_SCHEME_STORAGE_KEY,\n}: Omit<ThemeSchemeScriptProps, \"nonce\"> = {}) => {\n  const isCookie = type === \"cookie\"\n\n  const cookieScript = `(function(){try{var a=function(c){var o=document.documentElement;return o.dataset.theme=c,c},h='${init}',r='${storageKey}',t=document.cookie.match(new RegExp('(^| )'.concat(r,'=([^;]+)'))),c=t?t[2]:null;c?a(c):(document.cookie=''.concat(r,'=').concat(a(h),'; max-age=31536000; path=/'))}catch(a){}})();`\n\n  const localStorageScript = `(function(){try{var a=function(c){var o=document.documentElement;return o.dataset.theme=c,c},m='${init}',e='${storageKey}',t=localStorage.getItem(e);t?a(t):localStorage.setItem(e, a(m))}catch(a){}})();`\n\n  const fn = isCookie ? cookieScript : localStorageScript\n\n  return `!${fn}`.trim()\n}\n\nexport const ThemeSchemeScript = ({\n  nonce,\n  ...rest\n}: ThemeSchemeScriptProps) => {\n  const html = getThemeSchemeScript(rest)\n\n  return <script dangerouslySetInnerHTML={{ __html: html }} nonce={nonce} />\n}\n"],"mappings":";;;;;;AAWA,MAAa,2BAA2B;AAExC,MAAa,uBAAuB,CAAC,EACnC,OAAO,gBACP,oBAAoB,OAAO,QAC3B,aAAa,0BACyB,GAAG,CAAE,MAAK;CAChD,MAAM,WAAW,SAAS;CAE1B,MAAM,gBAAgB,kGAAkG,KAAK,OAAO,WAAW;CAE/I,MAAM,sBAAsB,kGAAkG,KAAK,OAAO,WAAW;CAErJ,MAAM,KAAK,WAAW,eAAe;AAErC,QAAO,CAAC,GAAG,KAAK,MAAM;AACvB;AAED,MAAa,oBAAoB,CAAC,EAChC,MACA,GAAG,MACoB,KAAK;CAC5B,MAAM,OAAO,qBAAqB,KAAK;AAEvC,wBAAO,IAAC;EAAO,yBAAyB,EAAE,QAAQ,KAAM;EAAS;GAAS;AAC3E"}

package/dist/esm/core/system/use-color-mode-value.js

@@ -0,0 +1,19 @@
+import { useColorMode } from "./color-mode-provider.js";
+
+//#region src/core/system/use-color-mode-value.ts
+/**
+* `useColorModeValue` is a custom hook that returns the value of the current color mode from the provided values.
+*
+* @see https://yamada-ui.com/hooks/use-color-mode-value
+*/
+const useColorModeValue = (light, dark) => {
+	const { colorMode } = useColorMode();
+	return getColorModeValue(light, dark)(colorMode);
+};
+const getColorModeValue = (light, dark) => (colorMode) => {
+	return colorMode === "light" ? light : dark;
+};
+
+//#endregion
+export { getColorModeValue, useColorModeValue };
+//# sourceMappingURL=use-color-mode-value.js.map

package/dist/esm/core/system/use-color-mode-value.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-color-mode-value.js","names":["light: L","dark: D","colorMode: ColorMode"],"sources":["../../../../src/core/system/use-color-mode-value.ts"],"sourcesContent":["import type { ColorMode } from \"./index.types\"\nimport { useColorMode } from \"./color-mode-provider\"\n\n/**\n * `useColorModeValue` is a custom hook that returns the value of the current color mode from the provided values.\n *\n * @see https://yamada-ui.com/hooks/use-color-mode-value\n */\nexport const useColorModeValue = <L, D>(light: L, dark: D): D | L => {\n  const { colorMode } = useColorMode()\n\n  return getColorModeValue<L, D>(light, dark)(colorMode)\n}\n\nexport const getColorModeValue =\n  <L, D>(light: L, dark: D) =>\n  (colorMode: ColorMode): D | L => {\n    return colorMode === \"light\" ? light : dark\n  }\n"],"mappings":";;;;;;;;AAQA,MAAa,oBAAoB,CAAOA,OAAUC,SAAmB;CACnE,MAAM,EAAE,WAAW,GAAG,cAAc;AAEpC,QAAO,kBAAwB,OAAO,KAAK,CAAC,UAAU;AACvD;AAED,MAAa,oBACX,CAAOD,OAAUC,SACjB,CAACC,cAAgC;AAC/B,QAAO,cAAc,UAAU,QAAQ;AACxC"}

package/dist/esm/core/system/use-system-color-mode.js

@@ -0,0 +1,35 @@
+"use client";
+
+
+import { useSafeLayoutEffect } from "../../utils/effect.js";
+import { useCallbackRef } from "../../utils/ref.js";
+import { utils_exports } from "../../utils/index.js";
+import { useEnvironment } from "./environment-provider.js";
+import { getColorModeUtils } from "./color-mode-utils.js";
+import { useEffect, useMemo, useState } from "react";
+
+//#region src/core/system/use-system-color-mode.ts
+/**
+* `useSystemColorMode` is a custom hook that returns the current system color mode.
+*/
+const useSystemColorMode = ({ callback, initialColorMode } = {}) => {
+	const environment = useEnvironment();
+	const callbackRef = useCallbackRef(callback);
+	const [colorMode, setColorMode] = useState(initialColorMode);
+	const { getSystemColorMode, systemColorModeObserver } = useMemo(() => getColorModeUtils({ environment }), [environment]);
+	useSafeLayoutEffect(() => {
+		setColorMode(getSystemColorMode());
+	}, [getSystemColorMode]);
+	useEffect(() => {
+		return systemColorModeObserver((0, utils_exports.fnAll)(setColorMode, callbackRef));
+	}, [
+		systemColorModeObserver,
+		getSystemColorMode,
+		callbackRef
+	]);
+	return colorMode;
+};
+
+//#endregion
+export { useSystemColorMode };
+//# sourceMappingURL=use-system-color-mode.js.map

package/dist/esm/core/system/use-system-color-mode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-system-color-mode.js","names":[],"sources":["../../../../src/core/system/use-system-color-mode.ts"],"sourcesContent":["\"use client\"\n\nimport type { ColorMode } from \"./index.types\"\nimport { useEffect, useMemo, useState } from \"react\"\nimport { fnAll, useCallbackRef, useSafeLayoutEffect } from \"../../utils\"\nimport { getColorModeUtils } from \"./color-mode-utils\"\nimport { useEnvironment } from \"./environment-provider\"\n\nexport interface UseSystemColorModeProps {\n  callback?: (colorMode: ColorMode) => void\n  initialColorMode?: ColorMode\n}\n\n/**\n * `useSystemColorMode` is a custom hook that returns the current system color mode.\n */\nexport const useSystemColorMode = ({\n  callback,\n  initialColorMode,\n}: UseSystemColorModeProps = {}) => {\n  const environment = useEnvironment()\n  const callbackRef = useCallbackRef(callback)\n  const [colorMode, setColorMode] = useState<ColorMode | undefined>(\n    initialColorMode,\n  )\n\n  const { getSystemColorMode, systemColorModeObserver } = useMemo(\n    () => getColorModeUtils({ environment }),\n    [environment],\n  )\n\n  useSafeLayoutEffect(() => {\n    setColorMode(getSystemColorMode())\n  }, [getSystemColorMode])\n\n  useEffect(() => {\n    return systemColorModeObserver(fnAll(setColorMode, callbackRef))\n  }, [systemColorModeObserver, getSystemColorMode, callbackRef])\n\n  return colorMode\n}\n"],"mappings":";;;;;;;;;;;;;;AAgBA,MAAa,qBAAqB,CAAC,EACjC,UACA,kBACwB,GAAG,CAAE,MAAK;CAClC,MAAM,cAAc,gBAAgB;CACpC,MAAM,cAAc,eAAe,SAAS;CAC5C,MAAM,CAAC,WAAW,aAAa,GAAG,SAChC,iBACD;CAED,MAAM,EAAE,oBAAoB,yBAAyB,GAAG,QACtD,MAAM,kBAAkB,EAAE,YAAa,EAAC,EACxC,CAAC,WAAY,EACd;AAED,qBAAoB,MAAM;AACxB,eAAa,oBAAoB,CAAC;CACnC,GAAE,CAAC,kBAAmB,EAAC;AAExB,WAAU,MAAM;AACd,SAAO,wBAAwB,yBAAM,cAAc,YAAY,CAAC;CACjE,GAAE;EAAC;EAAyB;EAAoB;CAAY,EAAC;AAE9D,QAAO;AACR"}