@just-web/toolkits 1.0.0

package/dist/index.d.cts

@@ -0,0 +1,26 @@
+import { DataAttribute } from "./attributes/data-attribute.cjs";
+import { getAttribute } from "./attributes/get-attribute.cjs";
+import { getDataAttribute } from "./attributes/get-data-attribute.cjs";
+import { observeAttributes } from "./attributes/observe-attribute.cjs";
+import { observeDataAttributes } from "./attributes/observe-data-attribute.cjs";
+import { JustChildren, JustChildrenFnProps, JustChildrenProps } from "./children/just-children.cjs";
+import { resolveChildren } from "./children/resolve-children.cjs";
+import { ClassNameProps } from "./class-name/class-name-props.cjs";
+import { clsx } from "./class-name/clsx.cjs";
+import { JustClassName, JustClassNameFnProps, JustClassNameProps } from "./class-name/just-class-name.cjs";
+import { resolveClassName } from "./class-name/resolve-class-name.cjs";
+import { getPrefersColorScheme } from "./color-scheme/get-prefers-color-scheme.cjs";
+import { observePrefersColorScheme } from "./color-scheme/observe-prefers-color-scheme.cjs";
+import { CSSProperties } from "./style/css-properties.cjs";
+import { defineCSSProperties } from "./style/define-css-properties.cjs";
+import { getCSSVariableValue } from "./style/get-css-variable-value.cjs";
+import { JustStyle, JustStyleFnProps, JustStyleProps } from "./style/just-style.cjs";
+import { resolveStyle } from "./style/resolve-style.cjs";
+import { StyleProps } from "./style/style-props.cjs";
+import { toDomStyle } from "./style/to-dom-style.cjs";
+import { getRemToPxScale } from "./units/get-rem-to-px-scale.cjs";
+import { px2num } from "./units/px-2-num.cjs";
+import { px2rem } from "./units/px-2-rem.cjs";
+import { rem2px } from "./units/rem-2-px.cjs";
+import { appendId } from "./utils/append-id.cjs";
+export { CSSProperties, ClassNameProps, DataAttribute, JustChildren, JustChildrenFnProps, JustChildrenProps, JustClassName, JustClassNameFnProps, JustClassNameProps, JustStyle, JustStyleFnProps, JustStyleProps, StyleProps, appendId, clsx, defineCSSProperties, getAttribute, getCSSVariableValue, getDataAttribute, getPrefersColorScheme, getRemToPxScale, observeAttributes, observeDataAttributes, observePrefersColorScheme, px2num, px2rem, rem2px, resolveChildren, resolveClassName, resolveStyle, toDomStyle };

package/dist/index.d.mts

@@ -0,0 +1,26 @@
+import { DataAttribute } from "./attributes/data-attribute.mjs";
+import { getAttribute } from "./attributes/get-attribute.mjs";
+import { getDataAttribute } from "./attributes/get-data-attribute.mjs";
+import { observeAttributes } from "./attributes/observe-attribute.mjs";
+import { observeDataAttributes } from "./attributes/observe-data-attribute.mjs";
+import { JustChildren, JustChildrenFnProps, JustChildrenProps } from "./children/just-children.mjs";
+import { resolveChildren } from "./children/resolve-children.mjs";
+import { ClassNameProps } from "./class-name/class-name-props.mjs";
+import { clsx } from "./class-name/clsx.mjs";
+import { JustClassName, JustClassNameFnProps, JustClassNameProps } from "./class-name/just-class-name.mjs";
+import { resolveClassName } from "./class-name/resolve-class-name.mjs";
+import { getPrefersColorScheme } from "./color-scheme/get-prefers-color-scheme.mjs";
+import { observePrefersColorScheme } from "./color-scheme/observe-prefers-color-scheme.mjs";
+import { CSSProperties } from "./style/css-properties.mjs";
+import { defineCSSProperties } from "./style/define-css-properties.mjs";
+import { getCSSVariableValue } from "./style/get-css-variable-value.mjs";
+import { JustStyle, JustStyleFnProps, JustStyleProps } from "./style/just-style.mjs";
+import { resolveStyle } from "./style/resolve-style.mjs";
+import { StyleProps } from "./style/style-props.mjs";
+import { toDomStyle } from "./style/to-dom-style.mjs";
+import { getRemToPxScale } from "./units/get-rem-to-px-scale.mjs";
+import { px2num } from "./units/px-2-num.mjs";
+import { px2rem } from "./units/px-2-rem.mjs";
+import { rem2px } from "./units/rem-2-px.mjs";
+import { appendId } from "./utils/append-id.mjs";
+export { CSSProperties, ClassNameProps, DataAttribute, JustChildren, JustChildrenFnProps, JustChildrenProps, JustClassName, JustClassNameFnProps, JustClassNameProps, JustStyle, JustStyleFnProps, JustStyleProps, StyleProps, appendId, clsx, defineCSSProperties, getAttribute, getCSSVariableValue, getDataAttribute, getPrefersColorScheme, getRemToPxScale, observeAttributes, observeDataAttributes, observePrefersColorScheme, px2num, px2rem, rem2px, resolveChildren, resolveClassName, resolveStyle, toDomStyle };

package/dist/index.mjs

@@ -0,0 +1,20 @@
+import { getAttribute } from "./attributes/get-attribute.mjs";
+import { getDataAttribute } from "./attributes/get-data-attribute.mjs";
+import { observeAttributes } from "./attributes/observe-attribute.mjs";
+import { observeDataAttributes } from "./attributes/observe-data-attribute.mjs";
+import { resolveChildren } from "./children/resolve-children.mjs";
+import { clsx } from "./class-name/clsx.mjs";
+import { resolveClassName } from "./class-name/resolve-class-name.mjs";
+import { getPrefersColorScheme } from "./color-scheme/get-prefers-color-scheme.mjs";
+import { observePrefersColorScheme } from "./color-scheme/observe-prefers-color-scheme.mjs";
+import { defineCSSProperties } from "./style/define-css-properties.mjs";
+import { getCSSVariableValue } from "./style/get-css-variable-value.mjs";
+import { resolveStyle } from "./style/resolve-style.mjs";
+import { toDomStyle } from "./style/to-dom-style.mjs";
+import { getRemToPxScale } from "./units/get-rem-to-px-scale.mjs";
+import { px2num } from "./units/px-2-num.mjs";
+import { px2rem } from "./units/px-2-rem.mjs";
+import { rem2px } from "./units/rem-2-px.mjs";
+import { appendId } from "./utils/append-id.mjs";
+
+export { appendId, clsx, defineCSSProperties, getAttribute, getCSSVariableValue, getDataAttribute, getPrefersColorScheme, getRemToPxScale, observeAttributes, observeDataAttributes, observePrefersColorScheme, px2num, px2rem, rem2px, resolveChildren, resolveClassName, resolveStyle, toDomStyle };

package/dist/react/hooks/use-attribute.cjs

@@ -0,0 +1,41 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_observe_attribute = require('../../attributes/observe-attribute.cjs');
+let react = require("react");
+
+//#region src/react/hooks/use-attribute.ts
+/**
+* React hook that returns the current value of an attribute on a target element
+* and a setter to update it. Stays in sync when the attribute changes (e.g. from elsewhere).
+*
+* @param attributeName - The attribute to observe (e.g. `'class'`, `'data-theme'`).
+* @param element - The element to observe. Defaults to `document.documentElement` when omitted.
+* @returns Tuple of [value, setValue]. Pass null to setValue to remove the attribute.
+*
+* @example
+* ```tsx
+* const [className, setClassName] = useAttribute('class')
+* const [theme, setTheme] = useAttribute('data-theme', myElement)
+* setTheme('dark')
+* setClassName(null) // removes class attribute
+* ```
+*/
+function useAttribute(attributeName, element = typeof document !== "undefined" ? document.documentElement : void 0) {
+	const [value, setValueState] = (0, react.useState)(() => element?.getAttribute(attributeName) ?? null);
+	(0, react.useEffect)(() => {
+		if (!element) return;
+		setValueState(element.getAttribute(attributeName));
+		const observer = require_observe_attribute.observeAttributes({ [attributeName]: (next) => {
+			setValueState(next);
+		} }, element);
+		return () => observer.disconnect();
+	}, [element, attributeName]);
+	return [value, (0, react.useCallback)((next) => {
+		if (!element) return;
+		if (next === null) element.removeAttribute(attributeName);
+		else element.setAttribute(attributeName, next);
+	}, [element, attributeName])];
+}
+
+//#endregion
+exports.useAttribute = useAttribute;
+//# sourceMappingURL=use-attribute.cjs.map

package/dist/react/hooks/use-attribute.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-attribute.cjs","names":["observeAttributes"],"sources":["../../../src/react/hooks/use-attribute.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react'\nimport { observeAttributes } from '../../attributes/observe-attribute.ts'\n\n/**\n * React hook that returns the current value of an attribute on a target element\n * and a setter to update it. Stays in sync when the attribute changes (e.g. from elsewhere).\n *\n * @param attributeName - The attribute to observe (e.g. `'class'`, `'data-theme'`).\n * @param element - The element to observe. Defaults to `document.documentElement` when omitted.\n * @returns Tuple of [value, setValue]. Pass null to setValue to remove the attribute.\n *\n * @example\n * ```tsx\n * const [className, setClassName] = useAttribute('class')\n * const [theme, setTheme] = useAttribute('data-theme', myElement)\n * setTheme('dark')\n * setClassName(null) // removes class attribute\n * ```\n */\nexport function useAttribute(\n\tattributeName: string,\n\telement: Element | undefined = typeof document !== 'undefined'\n\t\t? document.documentElement\n\t\t: undefined\n): [string | null, (value: string | null) => void] {\n\tconst [value, setValueState] = useState<string | null>(\n\t\t() => element?.getAttribute(attributeName) ?? null\n\t)\n\n\tuseEffect(() => {\n\t\tif (!element) return\n\n\t\tsetValueState(element.getAttribute(attributeName))\n\n\t\tconst observer = observeAttributes(\n\t\t\t{\n\t\t\t\t[attributeName]: (next) => {\n\t\t\t\t\tsetValueState(next)\n\t\t\t\t}\n\t\t\t},\n\t\t\telement\n\t\t)\n\t\treturn () => observer.disconnect()\n\t}, [element, attributeName])\n\n\tconst setValue = useCallback(\n\t\t(next: string | null) => {\n\t\t\tif (!element) return\n\t\t\tif (next === null) {\n\t\t\t\telement.removeAttribute(attributeName)\n\t\t\t} else {\n\t\t\t\telement.setAttribute(attributeName, next)\n\t\t\t}\n\t\t},\n\t\t[element, attributeName]\n\t)\n\n\treturn [value, setValue]\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAmBA,SAAgB,aACf,eACA,UAA+B,OAAO,aAAa,cAChD,SAAS,kBACT,QAC+C;CAClD,MAAM,CAAC,OAAO,2CACP,SAAS,aAAa,cAAc,IAAI,KAC9C;AAED,4BAAgB;AACf,MAAI,CAAC,QAAS;AAEd,gBAAc,QAAQ,aAAa,cAAc,CAAC;EAElD,MAAM,WAAWA,4CAChB,GACE,iBAAiB,SAAS;AAC1B,iBAAc,KAAK;KAEpB,EACD,QACA;AACD,eAAa,SAAS,YAAY;IAChC,CAAC,SAAS,cAAc,CAAC;AAc5B,QAAO,CAAC,+BAXN,SAAwB;AACxB,MAAI,CAAC,QAAS;AACd,MAAI,SAAS,KACZ,SAAQ,gBAAgB,cAAc;MAEtC,SAAQ,aAAa,eAAe,KAAK;IAG3C,CAAC,SAAS,cAAc,CACxB,CAEuB"}

package/dist/react/hooks/use-attribute.d.cts

@@ -0,0 +1,21 @@
+//#region src/react/hooks/use-attribute.d.ts
+/**
+ * React hook that returns the current value of an attribute on a target element
+ * and a setter to update it. Stays in sync when the attribute changes (e.g. from elsewhere).
+ *
+ * @param attributeName - The attribute to observe (e.g. `'class'`, `'data-theme'`).
+ * @param element - The element to observe. Defaults to `document.documentElement` when omitted.
+ * @returns Tuple of [value, setValue]. Pass null to setValue to remove the attribute.
+ *
+ * @example
+ * ```tsx
+ * const [className, setClassName] = useAttribute('class')
+ * const [theme, setTheme] = useAttribute('data-theme', myElement)
+ * setTheme('dark')
+ * setClassName(null) // removes class attribute
+ * ```
+ */
+declare function useAttribute(attributeName: string, element?: Element | undefined): [string | null, (value: string | null) => void];
+//#endregion
+export { useAttribute };
+//# sourceMappingURL=use-attribute.d.cts.map

package/dist/react/hooks/use-attribute.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-attribute.d.cts","names":[],"sources":["../../../src/react/hooks/use-attribute.ts"],"sourcesContent":[],"mappings":";;AAmBA;;;;;;;;;;;;;;;iBAAgB,YAAA,kCAEN"}

package/dist/react/hooks/use-attribute.d.mts

@@ -0,0 +1,21 @@
+//#region src/react/hooks/use-attribute.d.ts
+/**
+ * React hook that returns the current value of an attribute on a target element
+ * and a setter to update it. Stays in sync when the attribute changes (e.g. from elsewhere).
+ *
+ * @param attributeName - The attribute to observe (e.g. `'class'`, `'data-theme'`).
+ * @param element - The element to observe. Defaults to `document.documentElement` when omitted.
+ * @returns Tuple of [value, setValue]. Pass null to setValue to remove the attribute.
+ *
+ * @example
+ * ```tsx
+ * const [className, setClassName] = useAttribute('class')
+ * const [theme, setTheme] = useAttribute('data-theme', myElement)
+ * setTheme('dark')
+ * setClassName(null) // removes class attribute
+ * ```
+ */
+declare function useAttribute(attributeName: string, element?: Element | undefined): [string | null, (value: string | null) => void];
+//#endregion
+export { useAttribute };
+//# sourceMappingURL=use-attribute.d.mts.map

package/dist/react/hooks/use-attribute.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-attribute.d.mts","names":[],"sources":["../../../src/react/hooks/use-attribute.ts"],"sourcesContent":[],"mappings":";;AAmBA;;;;;;;;;;;;;;;iBAAgB,YAAA,kCAEN"}

package/dist/react/hooks/use-attribute.mjs

@@ -0,0 +1,40 @@
+import { observeAttributes } from "../../attributes/observe-attribute.mjs";
+import { useCallback, useEffect, useState } from "react";
+
+//#region src/react/hooks/use-attribute.ts
+/**
+* React hook that returns the current value of an attribute on a target element
+* and a setter to update it. Stays in sync when the attribute changes (e.g. from elsewhere).
+*
+* @param attributeName - The attribute to observe (e.g. `'class'`, `'data-theme'`).
+* @param element - The element to observe. Defaults to `document.documentElement` when omitted.
+* @returns Tuple of [value, setValue]. Pass null to setValue to remove the attribute.
+*
+* @example
+* ```tsx
+* const [className, setClassName] = useAttribute('class')
+* const [theme, setTheme] = useAttribute('data-theme', myElement)
+* setTheme('dark')
+* setClassName(null) // removes class attribute
+* ```
+*/
+function useAttribute(attributeName, element = typeof document !== "undefined" ? document.documentElement : void 0) {
+	const [value, setValueState] = useState(() => element?.getAttribute(attributeName) ?? null);
+	useEffect(() => {
+		if (!element) return;
+		setValueState(element.getAttribute(attributeName));
+		const observer = observeAttributes({ [attributeName]: (next) => {
+			setValueState(next);
+		} }, element);
+		return () => observer.disconnect();
+	}, [element, attributeName]);
+	return [value, useCallback((next) => {
+		if (!element) return;
+		if (next === null) element.removeAttribute(attributeName);
+		else element.setAttribute(attributeName, next);
+	}, [element, attributeName])];
+}
+
+//#endregion
+export { useAttribute };
+//# sourceMappingURL=use-attribute.mjs.map

package/dist/react/hooks/use-attribute.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-attribute.mjs","names":[],"sources":["../../../src/react/hooks/use-attribute.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react'\nimport { observeAttributes } from '../../attributes/observe-attribute.ts'\n\n/**\n * React hook that returns the current value of an attribute on a target element\n * and a setter to update it. Stays in sync when the attribute changes (e.g. from elsewhere).\n *\n * @param attributeName - The attribute to observe (e.g. `'class'`, `'data-theme'`).\n * @param element - The element to observe. Defaults to `document.documentElement` when omitted.\n * @returns Tuple of [value, setValue]. Pass null to setValue to remove the attribute.\n *\n * @example\n * ```tsx\n * const [className, setClassName] = useAttribute('class')\n * const [theme, setTheme] = useAttribute('data-theme', myElement)\n * setTheme('dark')\n * setClassName(null) // removes class attribute\n * ```\n */\nexport function useAttribute(\n\tattributeName: string,\n\telement: Element | undefined = typeof document !== 'undefined'\n\t\t? document.documentElement\n\t\t: undefined\n): [string | null, (value: string | null) => void] {\n\tconst [value, setValueState] = useState<string | null>(\n\t\t() => element?.getAttribute(attributeName) ?? null\n\t)\n\n\tuseEffect(() => {\n\t\tif (!element) return\n\n\t\tsetValueState(element.getAttribute(attributeName))\n\n\t\tconst observer = observeAttributes(\n\t\t\t{\n\t\t\t\t[attributeName]: (next) => {\n\t\t\t\t\tsetValueState(next)\n\t\t\t\t}\n\t\t\t},\n\t\t\telement\n\t\t)\n\t\treturn () => observer.disconnect()\n\t}, [element, attributeName])\n\n\tconst setValue = useCallback(\n\t\t(next: string | null) => {\n\t\t\tif (!element) return\n\t\t\tif (next === null) {\n\t\t\t\telement.removeAttribute(attributeName)\n\t\t\t} else {\n\t\t\t\telement.setAttribute(attributeName, next)\n\t\t\t}\n\t\t},\n\t\t[element, attributeName]\n\t)\n\n\treturn [value, setValue]\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAmBA,SAAgB,aACf,eACA,UAA+B,OAAO,aAAa,cAChD,SAAS,kBACT,QAC+C;CAClD,MAAM,CAAC,OAAO,iBAAiB,eACxB,SAAS,aAAa,cAAc,IAAI,KAC9C;AAED,iBAAgB;AACf,MAAI,CAAC,QAAS;AAEd,gBAAc,QAAQ,aAAa,cAAc,CAAC;EAElD,MAAM,WAAW,kBAChB,GACE,iBAAiB,SAAS;AAC1B,iBAAc,KAAK;KAEpB,EACD,QACA;AACD,eAAa,SAAS,YAAY;IAChC,CAAC,SAAS,cAAc,CAAC;AAc5B,QAAO,CAAC,OAZS,aACf,SAAwB;AACxB,MAAI,CAAC,QAAS;AACd,MAAI,SAAS,KACZ,SAAQ,gBAAgB,cAAc;MAEtC,SAAQ,aAAa,eAAe,KAAK;IAG3C,CAAC,SAAS,cAAc,CACxB,CAEuB"}

package/dist/react/hooks/use-prefers-color-scheme.cjs

@@ -0,0 +1,42 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_get_prefers_color_scheme = require('../../color-scheme/get-prefers-color-scheme.cjs');
+const require_observe_prefers_color_scheme = require('../../color-scheme/observe-prefers-color-scheme.cjs');
+let react = require("react");
+
+//#region src/react/hooks/use-prefers-color-scheme.ts
+/**
+* React hook that returns the current system color scheme preference and re-renders when it changes.
+*
+* Uses `prefers-color-scheme` media query. Returns `'light'` or `'dark'`; re-renders when the user
+* changes their OS or browser light/dark setting.
+*
+* For SSR, uses `defaultColorScheme` when `matchMedia` is unavailable. On client, reads the real
+* value immediately (no flicker); `useEffect` syncs and subscribes to changes.
+*
+* @param defaultColorScheme - Fallback when `matchMedia` is unavailable (default: `'light'`)
+* @returns Current system color scheme: `'light'` or `'dark'`
+*
+* @example
+* ```tsx
+* const scheme = usePrefersColorScheme()
+* return <div>System prefers: {scheme}</div>
+* ```
+*
+* @example
+* ```tsx
+* const scheme = usePrefersColorScheme('dark')
+* return <div>System prefers: {scheme}</div>
+* ```
+*/
+function usePrefersColorScheme(defaultColorScheme = "light") {
+	const [scheme, setScheme] = (0, react.useState)(() => require_get_prefers_color_scheme.getPrefersColorScheme(defaultColorScheme));
+	(0, react.useEffect)(() => {
+		setScheme(require_get_prefers_color_scheme.getPrefersColorScheme());
+		return require_observe_prefers_color_scheme.observePrefersColorScheme(setScheme);
+	}, []);
+	return scheme;
+}
+
+//#endregion
+exports.usePrefersColorScheme = usePrefersColorScheme;
+//# sourceMappingURL=use-prefers-color-scheme.cjs.map

package/dist/react/hooks/use-prefers-color-scheme.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-prefers-color-scheme.cjs","names":["getPrefersColorScheme","observePrefersColorScheme"],"sources":["../../../src/react/hooks/use-prefers-color-scheme.ts"],"sourcesContent":["import { useEffect, useState } from 'react'\nimport { getPrefersColorScheme } from '../../color-scheme/get-prefers-color-scheme.ts'\nimport { observePrefersColorScheme } from '../../color-scheme/observe-prefers-color-scheme.ts'\n\n/**\n * React hook that returns the current system color scheme preference and re-renders when it changes.\n *\n * Uses `prefers-color-scheme` media query. Returns `'light'` or `'dark'`; re-renders when the user\n * changes their OS or browser light/dark setting.\n *\n * For SSR, uses `defaultColorScheme` when `matchMedia` is unavailable. On client, reads the real\n * value immediately (no flicker); `useEffect` syncs and subscribes to changes.\n *\n * @param defaultColorScheme - Fallback when `matchMedia` is unavailable (default: `'light'`)\n * @returns Current system color scheme: `'light'` or `'dark'`\n *\n * @example\n * ```tsx\n * const scheme = usePrefersColorScheme()\n * return <div>System prefers: {scheme}</div>\n * ```\n *\n * @example\n * ```tsx\n * const scheme = usePrefersColorScheme('dark')\n * return <div>System prefers: {scheme}</div>\n * ```\n */\nexport function usePrefersColorScheme(\n\tdefaultColorScheme: 'light' | 'dark' = 'light'\n): 'light' | 'dark' {\n\tconst [scheme, setScheme] = useState<'light' | 'dark'>(() =>\n\t\tgetPrefersColorScheme(defaultColorScheme)\n\t)\n\n\tuseEffect(() => {\n\t\tsetScheme(getPrefersColorScheme())\n\t\treturn observePrefersColorScheme(setScheme)\n\t}, [])\n\n\treturn scheme\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA,SAAgB,sBACf,qBAAuC,SACpB;CACnB,MAAM,CAAC,QAAQ,uCACdA,uDAAsB,mBAAmB,CACzC;AAED,4BAAgB;AACf,YAAUA,wDAAuB,CAAC;AAClC,SAAOC,+DAA0B,UAAU;IACzC,EAAE,CAAC;AAEN,QAAO"}

package/dist/react/hooks/use-prefers-color-scheme.d.cts

@@ -0,0 +1,29 @@
+//#region src/react/hooks/use-prefers-color-scheme.d.ts
+/**
+ * React hook that returns the current system color scheme preference and re-renders when it changes.
+ *
+ * Uses `prefers-color-scheme` media query. Returns `'light'` or `'dark'`; re-renders when the user
+ * changes their OS or browser light/dark setting.
+ *
+ * For SSR, uses `defaultColorScheme` when `matchMedia` is unavailable. On client, reads the real
+ * value immediately (no flicker); `useEffect` syncs and subscribes to changes.
+ *
+ * @param defaultColorScheme - Fallback when `matchMedia` is unavailable (default: `'light'`)
+ * @returns Current system color scheme: `'light'` or `'dark'`
+ *
+ * @example
+ * ```tsx
+ * const scheme = usePrefersColorScheme()
+ * return <div>System prefers: {scheme}</div>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * const scheme = usePrefersColorScheme('dark')
+ * return <div>System prefers: {scheme}</div>
+ * ```
+ */
+declare function usePrefersColorScheme(defaultColorScheme?: 'light' | 'dark'): 'light' | 'dark';
+//#endregion
+export { usePrefersColorScheme };
+//# sourceMappingURL=use-prefers-color-scheme.d.cts.map

package/dist/react/hooks/use-prefers-color-scheme.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-prefers-color-scheme.d.cts","names":[],"sources":["../../../src/react/hooks/use-prefers-color-scheme.ts"],"sourcesContent":[],"mappings":";;AA4BA;;;;;;;;;;;;;;;;;;;;;;;iBAAgB,qBAAA"}

package/dist/react/hooks/use-prefers-color-scheme.d.mts

@@ -0,0 +1,29 @@
+//#region src/react/hooks/use-prefers-color-scheme.d.ts
+/**
+ * React hook that returns the current system color scheme preference and re-renders when it changes.
+ *
+ * Uses `prefers-color-scheme` media query. Returns `'light'` or `'dark'`; re-renders when the user
+ * changes their OS or browser light/dark setting.
+ *
+ * For SSR, uses `defaultColorScheme` when `matchMedia` is unavailable. On client, reads the real
+ * value immediately (no flicker); `useEffect` syncs and subscribes to changes.
+ *
+ * @param defaultColorScheme - Fallback when `matchMedia` is unavailable (default: `'light'`)
+ * @returns Current system color scheme: `'light'` or `'dark'`
+ *
+ * @example
+ * ```tsx
+ * const scheme = usePrefersColorScheme()
+ * return <div>System prefers: {scheme}</div>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * const scheme = usePrefersColorScheme('dark')
+ * return <div>System prefers: {scheme}</div>
+ * ```
+ */
+declare function usePrefersColorScheme(defaultColorScheme?: 'light' | 'dark'): 'light' | 'dark';
+//#endregion
+export { usePrefersColorScheme };
+//# sourceMappingURL=use-prefers-color-scheme.d.mts.map

package/dist/react/hooks/use-prefers-color-scheme.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-prefers-color-scheme.d.mts","names":[],"sources":["../../../src/react/hooks/use-prefers-color-scheme.ts"],"sourcesContent":[],"mappings":";;AA4BA;;;;;;;;;;;;;;;;;;;;;;;iBAAgB,qBAAA"}

package/dist/react/hooks/use-prefers-color-scheme.mjs

@@ -0,0 +1,41 @@
+import { getPrefersColorScheme } from "../../color-scheme/get-prefers-color-scheme.mjs";
+import { observePrefersColorScheme } from "../../color-scheme/observe-prefers-color-scheme.mjs";
+import { useEffect, useState } from "react";
+
+//#region src/react/hooks/use-prefers-color-scheme.ts
+/**
+* React hook that returns the current system color scheme preference and re-renders when it changes.
+*
+* Uses `prefers-color-scheme` media query. Returns `'light'` or `'dark'`; re-renders when the user
+* changes their OS or browser light/dark setting.
+*
+* For SSR, uses `defaultColorScheme` when `matchMedia` is unavailable. On client, reads the real
+* value immediately (no flicker); `useEffect` syncs and subscribes to changes.
+*
+* @param defaultColorScheme - Fallback when `matchMedia` is unavailable (default: `'light'`)
+* @returns Current system color scheme: `'light'` or `'dark'`
+*
+* @example
+* ```tsx
+* const scheme = usePrefersColorScheme()
+* return <div>System prefers: {scheme}</div>
+* ```
+*
+* @example
+* ```tsx
+* const scheme = usePrefersColorScheme('dark')
+* return <div>System prefers: {scheme}</div>
+* ```
+*/
+function usePrefersColorScheme(defaultColorScheme = "light") {
+	const [scheme, setScheme] = useState(() => getPrefersColorScheme(defaultColorScheme));
+	useEffect(() => {
+		setScheme(getPrefersColorScheme());
+		return observePrefersColorScheme(setScheme);
+	}, []);
+	return scheme;
+}
+
+//#endregion
+export { usePrefersColorScheme };
+//# sourceMappingURL=use-prefers-color-scheme.mjs.map

package/dist/react/hooks/use-prefers-color-scheme.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-prefers-color-scheme.mjs","names":[],"sources":["../../../src/react/hooks/use-prefers-color-scheme.ts"],"sourcesContent":["import { useEffect, useState } from 'react'\nimport { getPrefersColorScheme } from '../../color-scheme/get-prefers-color-scheme.ts'\nimport { observePrefersColorScheme } from '../../color-scheme/observe-prefers-color-scheme.ts'\n\n/**\n * React hook that returns the current system color scheme preference and re-renders when it changes.\n *\n * Uses `prefers-color-scheme` media query. Returns `'light'` or `'dark'`; re-renders when the user\n * changes their OS or browser light/dark setting.\n *\n * For SSR, uses `defaultColorScheme` when `matchMedia` is unavailable. On client, reads the real\n * value immediately (no flicker); `useEffect` syncs and subscribes to changes.\n *\n * @param defaultColorScheme - Fallback when `matchMedia` is unavailable (default: `'light'`)\n * @returns Current system color scheme: `'light'` or `'dark'`\n *\n * @example\n * ```tsx\n * const scheme = usePrefersColorScheme()\n * return <div>System prefers: {scheme}</div>\n * ```\n *\n * @example\n * ```tsx\n * const scheme = usePrefersColorScheme('dark')\n * return <div>System prefers: {scheme}</div>\n * ```\n */\nexport function usePrefersColorScheme(\n\tdefaultColorScheme: 'light' | 'dark' = 'light'\n): 'light' | 'dark' {\n\tconst [scheme, setScheme] = useState<'light' | 'dark'>(() =>\n\t\tgetPrefersColorScheme(defaultColorScheme)\n\t)\n\n\tuseEffect(() => {\n\t\tsetScheme(getPrefersColorScheme())\n\t\treturn observePrefersColorScheme(setScheme)\n\t}, [])\n\n\treturn scheme\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA,SAAgB,sBACf,qBAAuC,SACpB;CACnB,MAAM,CAAC,QAAQ,aAAa,eAC3B,sBAAsB,mBAAmB,CACzC;AAED,iBAAgB;AACf,YAAU,uBAAuB,CAAC;AAClC,SAAO,0BAA0B,UAAU;IACzC,EAAE,CAAC;AAEN,QAAO"}

package/dist/react/hooks/use-theme-by-class-name.cjs

@@ -0,0 +1,60 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_observe_theme_from_stores = require('../../theme/_utils/observe-theme-from-stores.cjs');
+const require_set_theme_to_stores = require('../../theme/_utils/set-theme-to-stores.cjs');
+const require_resolve_theme_from_class_name = require('../../theme/class-name/resolve-theme-from-class-name.cjs');
+const require_theme_entry = require('../../theme/theme-entry.cjs');
+const require_class_name_theme_store = require('../../theme/theme-store/class-name-theme-store/class-name-theme-store.cjs');
+let react = require("react");
+
+//#region src/react/hooks/use-theme-by-class-name.ts
+/**
+* React hook that returns the current theme (from element class) and a setter.
+* Subscribes to class changes on the element so the returned theme stays in sync.
+*
+* @param themes - Record mapping theme keys to their class name values
+* @param options.theme - Fallback theme key when no matching class is found
+* @param options.element - Element to read/set theme on (defaults to document.documentElement)
+* @returns Tuple of [currentTheme, setTheme]
+*
+* @example
+* ```tsx
+* const themes = { light: 'theme-light', dark: 'theme-dark' }
+* const [theme, setTheme] = useThemeByClassName(themes, { theme: 'light' })
+*
+* return (
+*   <>
+*     <span>Current: {theme}</span>
+*     <button onClick={() => setTheme('dark')}>Dark</button>
+*     <button onClick={() => setTheme('light')}>Light</button>
+*   </>
+* )
+* ```
+*/
+function useThemeByClassName(themes, options) {
+	const element = options?.element ?? (typeof document !== "undefined" ? document.documentElement : void 0);
+	const defaultTheme = options?.defaultTheme;
+	const store = (0, react.useMemo)(() => require_class_name_theme_store.classNameThemeStore(themes, { element }), [element, themes]);
+	const [theme, setThemeState] = (0, react.useState)(() => {
+		if (element) return require_resolve_theme_from_class_name.resolveThemeFromClassName(themes, element.className) ?? defaultTheme;
+		return defaultTheme;
+	});
+	(0, react.useEffect)(() => {
+		if (!element) return;
+		return require_observe_theme_from_stores.observeThemeFromStores([store], defaultTheme, setThemeState);
+	}, [
+		element,
+		store,
+		defaultTheme
+	]);
+	return [theme, (0, react.useCallback)((themeKey) => {
+		if (element) require_set_theme_to_stores.setThemeToStores([store], require_theme_entry.themeEntry(themes, themeKey));
+	}, [
+		element,
+		store,
+		themes
+	])];
+}
+
+//#endregion
+exports.useThemeByClassName = useThemeByClassName;
+//# sourceMappingURL=use-theme-by-class-name.cjs.map

package/dist/react/hooks/use-theme-by-class-name.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-theme-by-class-name.cjs","names":["classNameThemeStore","resolveThemeFromClassName","observeThemeFromStores","themeEntry"],"sources":["../../../src/react/hooks/use-theme-by-class-name.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from 'react'\nimport { observeThemeFromStores } from '../../theme/_utils/observe-theme-from-stores.ts'\nimport { setThemeToStores } from '../../theme/_utils/set-theme-to-stores.ts'\nimport { resolveThemeFromClassName } from '../../theme/class-name/resolve-theme-from-class-name.ts'\nimport { themeEntry } from '../../theme/theme-entry.ts'\nimport type { ThemeMap } from '../../theme/theme-map.types.ts'\nimport { classNameThemeStore } from '../../theme/theme-store/class-name-theme-store/class-name-theme-store.ts'\n\n/**\n * React hook that returns the current theme (from element class) and a setter.\n * Subscribes to class changes on the element so the returned theme stays in sync.\n *\n * @param themes - Record mapping theme keys to their class name values\n * @param options.theme - Fallback theme key when no matching class is found\n * @param options.element - Element to read/set theme on (defaults to document.documentElement)\n * @returns Tuple of [currentTheme, setTheme]\n *\n * @example\n * ```tsx\n * const themes = { light: 'theme-light', dark: 'theme-dark' }\n * const [theme, setTheme] = useThemeByClassName(themes, { theme: 'light' })\n *\n * return (\n *   <>\n *     <span>Current: {theme}</span>\n *     <button onClick={() => setTheme('dark')}>Dark</button>\n *     <button onClick={() => setTheme('light')}>Light</button>\n *   </>\n * )\n * ```\n */\nexport function useThemeByClassName<Themes extends ThemeMap>(\n\tthemes: Themes,\n\toptions?: {\n\t\tdefaultTheme?: keyof Themes | undefined\n\t\telement?: Element | undefined\n\t}\n): [keyof Themes | undefined, (theme: keyof Themes) => void] {\n\tconst element =\n\t\toptions?.element ?? (typeof document !== 'undefined' ? document.documentElement : undefined)\n\tconst defaultTheme = options?.defaultTheme\n\n\tconst store = useMemo(() => classNameThemeStore(themes, { element }), [element, themes])\n\n\tconst [theme, setThemeState] = useState<keyof Themes | undefined>(() => {\n\t\tif (element) {\n\t\t\tconst resolved = resolveThemeFromClassName(themes, element.className)\n\t\t\treturn resolved ?? defaultTheme\n\t\t}\n\t\treturn defaultTheme\n\t})\n\n\tuseEffect(() => {\n\t\tif (!element) return\n\t\tconst unobserve = observeThemeFromStores([store], defaultTheme, setThemeState)\n\t\treturn unobserve\n\t}, [element, store, defaultTheme])\n\n\tconst setTheme = useCallback(\n\t\t(themeKey: keyof Themes) => {\n\t\t\tif (element) {\n\t\t\t\tsetThemeToStores([store], themeEntry(themes, themeKey))\n\t\t\t}\n\t\t},\n\t\t[element, store, themes]\n\t)\n\n\treturn [theme, setTheme]\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,SAAgB,oBACf,QACA,SAI4D;CAC5D,MAAM,UACL,SAAS,YAAY,OAAO,aAAa,cAAc,SAAS,kBAAkB;CACnF,MAAM,eAAe,SAAS;CAE9B,MAAM,iCAAsBA,mDAAoB,QAAQ,EAAE,SAAS,CAAC,EAAE,CAAC,SAAS,OAAO,CAAC;CAExF,MAAM,CAAC,OAAO,2CAA0D;AACvE,MAAI,QAEH,QADiBC,gEAA0B,QAAQ,QAAQ,UAAU,IAClD;AAEpB,SAAO;GACN;AAEF,4BAAgB;AACf,MAAI,CAAC,QAAS;AAEd,SADkBC,yDAAuB,CAAC,MAAM,EAAE,cAAc,cAAc;IAE5E;EAAC;EAAS;EAAO;EAAa,CAAC;AAWlC,QAAO,CAAC,+BARN,aAA2B;AAC3B,MAAI,QACH,8CAAiB,CAAC,MAAM,EAAEC,+BAAW,QAAQ,SAAS,CAAC;IAGzD;EAAC;EAAS;EAAO;EAAO,CACxB,CAEuB"}

package/dist/react/hooks/use-theme-by-class-name.d.cts

@@ -0,0 +1,34 @@
+import { ThemeMap } from "../../theme/theme-map.types.cjs";
+
+//#region src/react/hooks/use-theme-by-class-name.d.ts
+
+/**
+ * React hook that returns the current theme (from element class) and a setter.
+ * Subscribes to class changes on the element so the returned theme stays in sync.
+ *
+ * @param themes - Record mapping theme keys to their class name values
+ * @param options.theme - Fallback theme key when no matching class is found
+ * @param options.element - Element to read/set theme on (defaults to document.documentElement)
+ * @returns Tuple of [currentTheme, setTheme]
+ *
+ * @example
+ * ```tsx
+ * const themes = { light: 'theme-light', dark: 'theme-dark' }
+ * const [theme, setTheme] = useThemeByClassName(themes, { theme: 'light' })
+ *
+ * return (
+ *   <>
+ *     <span>Current: {theme}</span>
+ *     <button onClick={() => setTheme('dark')}>Dark</button>
+ *     <button onClick={() => setTheme('light')}>Light</button>
+ *   </>
+ * )
+ * ```
+ */
+declare function useThemeByClassName<Themes extends ThemeMap>(themes: Themes, options?: {
+  defaultTheme?: keyof Themes | undefined;
+  element?: Element | undefined;
+}): [keyof Themes | undefined, (theme: keyof Themes) => void];
+//#endregion
+export { useThemeByClassName };
+//# sourceMappingURL=use-theme-by-class-name.d.cts.map

package/dist/react/hooks/use-theme-by-class-name.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-theme-by-class-name.d.cts","names":[],"sources":["../../../src/react/hooks/use-theme-by-class-name.ts"],"sourcesContent":[],"mappings":";;;;;;AA+BA;;;;;;;;;;;;;;;;;;;;;iBAAgB,mCAAmC,kBAC1C;uBAEc;YACX;WAEF,kCAAkC"}

package/dist/react/hooks/use-theme-by-class-name.d.mts

@@ -0,0 +1,34 @@
+import { ThemeMap } from "../../theme/theme-map.types.mjs";
+
+//#region src/react/hooks/use-theme-by-class-name.d.ts
+
+/**
+ * React hook that returns the current theme (from element class) and a setter.
+ * Subscribes to class changes on the element so the returned theme stays in sync.
+ *
+ * @param themes - Record mapping theme keys to their class name values
+ * @param options.theme - Fallback theme key when no matching class is found
+ * @param options.element - Element to read/set theme on (defaults to document.documentElement)
+ * @returns Tuple of [currentTheme, setTheme]
+ *
+ * @example
+ * ```tsx
+ * const themes = { light: 'theme-light', dark: 'theme-dark' }
+ * const [theme, setTheme] = useThemeByClassName(themes, { theme: 'light' })
+ *
+ * return (
+ *   <>
+ *     <span>Current: {theme}</span>
+ *     <button onClick={() => setTheme('dark')}>Dark</button>
+ *     <button onClick={() => setTheme('light')}>Light</button>
+ *   </>
+ * )
+ * ```
+ */
+declare function useThemeByClassName<Themes extends ThemeMap>(themes: Themes, options?: {
+  defaultTheme?: keyof Themes | undefined;
+  element?: Element | undefined;
+}): [keyof Themes | undefined, (theme: keyof Themes) => void];
+//#endregion
+export { useThemeByClassName };
+//# sourceMappingURL=use-theme-by-class-name.d.mts.map

package/dist/react/hooks/use-theme-by-class-name.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-theme-by-class-name.d.mts","names":[],"sources":["../../../src/react/hooks/use-theme-by-class-name.ts"],"sourcesContent":[],"mappings":";;;;;;AA+BA;;;;;;;;;;;;;;;;;;;;;iBAAgB,mCAAmC,kBAC1C;uBAEc;YACX;WAEF,kCAAkC"}

package/dist/react/hooks/use-theme-by-class-name.mjs

@@ -0,0 +1,59 @@
+import { observeThemeFromStores } from "../../theme/_utils/observe-theme-from-stores.mjs";
+import { setThemeToStores } from "../../theme/_utils/set-theme-to-stores.mjs";
+import { resolveThemeFromClassName } from "../../theme/class-name/resolve-theme-from-class-name.mjs";
+import { themeEntry } from "../../theme/theme-entry.mjs";
+import { classNameThemeStore } from "../../theme/theme-store/class-name-theme-store/class-name-theme-store.mjs";
+import { useCallback, useEffect, useMemo, useState } from "react";
+
+//#region src/react/hooks/use-theme-by-class-name.ts
+/**
+* React hook that returns the current theme (from element class) and a setter.
+* Subscribes to class changes on the element so the returned theme stays in sync.
+*
+* @param themes - Record mapping theme keys to their class name values
+* @param options.theme - Fallback theme key when no matching class is found
+* @param options.element - Element to read/set theme on (defaults to document.documentElement)
+* @returns Tuple of [currentTheme, setTheme]
+*
+* @example
+* ```tsx
+* const themes = { light: 'theme-light', dark: 'theme-dark' }
+* const [theme, setTheme] = useThemeByClassName(themes, { theme: 'light' })
+*
+* return (
+*   <>
+*     <span>Current: {theme}</span>
+*     <button onClick={() => setTheme('dark')}>Dark</button>
+*     <button onClick={() => setTheme('light')}>Light</button>
+*   </>
+* )
+* ```
+*/
+function useThemeByClassName(themes, options) {
+	const element = options?.element ?? (typeof document !== "undefined" ? document.documentElement : void 0);
+	const defaultTheme = options?.defaultTheme;
+	const store = useMemo(() => classNameThemeStore(themes, { element }), [element, themes]);
+	const [theme, setThemeState] = useState(() => {
+		if (element) return resolveThemeFromClassName(themes, element.className) ?? defaultTheme;
+		return defaultTheme;
+	});
+	useEffect(() => {
+		if (!element) return;
+		return observeThemeFromStores([store], defaultTheme, setThemeState);
+	}, [
+		element,
+		store,
+		defaultTheme
+	]);
+	return [theme, useCallback((themeKey) => {
+		if (element) setThemeToStores([store], themeEntry(themes, themeKey));
+	}, [
+		element,
+		store,
+		themes
+	])];
+}
+
+//#endregion
+export { useThemeByClassName };
+//# sourceMappingURL=use-theme-by-class-name.mjs.map

package/dist/react/hooks/use-theme-by-class-name.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-theme-by-class-name.mjs","names":[],"sources":["../../../src/react/hooks/use-theme-by-class-name.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from 'react'\nimport { observeThemeFromStores } from '../../theme/_utils/observe-theme-from-stores.ts'\nimport { setThemeToStores } from '../../theme/_utils/set-theme-to-stores.ts'\nimport { resolveThemeFromClassName } from '../../theme/class-name/resolve-theme-from-class-name.ts'\nimport { themeEntry } from '../../theme/theme-entry.ts'\nimport type { ThemeMap } from '../../theme/theme-map.types.ts'\nimport { classNameThemeStore } from '../../theme/theme-store/class-name-theme-store/class-name-theme-store.ts'\n\n/**\n * React hook that returns the current theme (from element class) and a setter.\n * Subscribes to class changes on the element so the returned theme stays in sync.\n *\n * @param themes - Record mapping theme keys to their class name values\n * @param options.theme - Fallback theme key when no matching class is found\n * @param options.element - Element to read/set theme on (defaults to document.documentElement)\n * @returns Tuple of [currentTheme, setTheme]\n *\n * @example\n * ```tsx\n * const themes = { light: 'theme-light', dark: 'theme-dark' }\n * const [theme, setTheme] = useThemeByClassName(themes, { theme: 'light' })\n *\n * return (\n *   <>\n *     <span>Current: {theme}</span>\n *     <button onClick={() => setTheme('dark')}>Dark</button>\n *     <button onClick={() => setTheme('light')}>Light</button>\n *   </>\n * )\n * ```\n */\nexport function useThemeByClassName<Themes extends ThemeMap>(\n\tthemes: Themes,\n\toptions?: {\n\t\tdefaultTheme?: keyof Themes | undefined\n\t\telement?: Element | undefined\n\t}\n): [keyof Themes | undefined, (theme: keyof Themes) => void] {\n\tconst element =\n\t\toptions?.element ?? (typeof document !== 'undefined' ? document.documentElement : undefined)\n\tconst defaultTheme = options?.defaultTheme\n\n\tconst store = useMemo(() => classNameThemeStore(themes, { element }), [element, themes])\n\n\tconst [theme, setThemeState] = useState<keyof Themes | undefined>(() => {\n\t\tif (element) {\n\t\t\tconst resolved = resolveThemeFromClassName(themes, element.className)\n\t\t\treturn resolved ?? defaultTheme\n\t\t}\n\t\treturn defaultTheme\n\t})\n\n\tuseEffect(() => {\n\t\tif (!element) return\n\t\tconst unobserve = observeThemeFromStores([store], defaultTheme, setThemeState)\n\t\treturn unobserve\n\t}, [element, store, defaultTheme])\n\n\tconst setTheme = useCallback(\n\t\t(themeKey: keyof Themes) => {\n\t\t\tif (element) {\n\t\t\t\tsetThemeToStores([store], themeEntry(themes, themeKey))\n\t\t\t}\n\t\t},\n\t\t[element, store, themes]\n\t)\n\n\treturn [theme, setTheme]\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,SAAgB,oBACf,QACA,SAI4D;CAC5D,MAAM,UACL,SAAS,YAAY,OAAO,aAAa,cAAc,SAAS,kBAAkB;CACnF,MAAM,eAAe,SAAS;CAE9B,MAAM,QAAQ,cAAc,oBAAoB,QAAQ,EAAE,SAAS,CAAC,EAAE,CAAC,SAAS,OAAO,CAAC;CAExF,MAAM,CAAC,OAAO,iBAAiB,eAAyC;AACvE,MAAI,QAEH,QADiB,0BAA0B,QAAQ,QAAQ,UAAU,IAClD;AAEpB,SAAO;GACN;AAEF,iBAAgB;AACf,MAAI,CAAC,QAAS;AAEd,SADkB,uBAAuB,CAAC,MAAM,EAAE,cAAc,cAAc;IAE5E;EAAC;EAAS;EAAO;EAAa,CAAC;AAWlC,QAAO,CAAC,OATS,aACf,aAA2B;AAC3B,MAAI,QACH,kBAAiB,CAAC,MAAM,EAAE,WAAW,QAAQ,SAAS,CAAC;IAGzD;EAAC;EAAS;EAAO;EAAO,CACxB,CAEuB"}