@choco-vanille/ui 1.1.2 → 1.2.0

package/dist/components/surfaces/card/Card.js

@@ -1,41 +1,45 @@
 import { jsx as C } from "react/jsx-runtime";
-import { memo as x } from "react";
-import c from "../../layout/box/Box.js";
+import { memo as c } from "react";
+import l from "../../layout/box/Box.js";
 import "../../layout/box/styles/Box.css.js";
-import s from "./components/card-body/CardBody.js";
+import x from "./components/card-body/CardBody.js";
 import y from "./components/card-footer/CardFooter.js";
 import B from "./components/card-header/CardHeader.js";
-const r = x(({
-  as: o = "div",
-  backgroundColor: d = "card",
-  color: m = "cardForeground",
+import { CARD_STYLES as F } from "./styles/Card.css.js";
+import { cn as g } from "../../../utils/cn.js";
+const o = c(({
+  as: r = "div",
+  backgroundColor: m = "card",
+  color: d = "cardForeground",
   borderRadius: e = "lg",
-  borderWidth: a = "1px",
-  borderColor: t = "border",
-  boxShadow: i = "none",
-  overflow: p = "hidden",
-  className: f,
-  ...n
+  borderWidth: t = "1px",
+  borderColor: a = "border",
+  borderStyle: i = "solid",
+  boxShadow: p = "none",
+  overflow: f = "hidden",
+  className: n,
+  ...s
 }) => /* @__PURE__ */ C(
-  c,
+  l,
   {
-    as: o,
-    backgroundColor: d,
-    color: m,
+    as: r,
+    backgroundColor: m,
+    color: d,
     borderRadius: e,
-    borderWidth: a,
-    borderColor: t,
-    boxShadow: i,
-    overflow: p,
-    className: f,
-    ...n
+    borderWidth: t,
+    borderColor: a,
+    borderStyle: i,
+    boxShadow: p,
+    overflow: f,
+    className: g(F.root, n),
+    ...s
   }
 ));
-r.displayName = "Card";
-r.Header = B;
-r.Body = s;
-r.Footer = y;
+o.displayName = "Card";
+o.Header = B;
+o.Body = x;
+o.Footer = y;
 export {
-  r as Card
+  o as Card
 };
 //# sourceMappingURL=Card.js.map

package/dist/components/surfaces/card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../../../../src/components/surfaces/card/Card.tsx"],"sourcesContent":["import { memo } from 'react'\r\n\r\nimport { Box } from '@components/layout/box'\r\nimport CardBody from '@components/surfaces/card/components/card-body/CardBody.tsx'\r\nimport CardFooter from '@components/surfaces/card/components/card-footer/CardFooter.tsx'\r\nimport CardHeader from '@components/surfaces/card/components/card-header/CardHeader.tsx'\r\nimport type { CardCompound } from '@components/surfaces/card/types'\r\nimport type { CardProps } from '@components/surfaces/card/types/Card.props.ts'\r\n\r\n/**\r\n  * A surface container with a consistent background, border, shadow and\r\n  * rounded corners. Compose with the named sub-components for a structured\r\n  * layout.\r\n  *\r\n  * @example\r\n  * ```tsx\r\n  * <Card>\r\n  *   <Card.Header\r\n  *     title=\"Account settings\"\r\n  *     description=\"Manage your profile.\"\r\n  *     actions={<IconButton icon=\"lucide:ellipsis-vertical\" aria-label=\"More\" />}\r\n  *   />\r\n  *   <Card.Body>Content goes here</Card.Body>\r\n  *   <Card.Footer>\r\n  *     <Button label=\"Save\" variant=\"contained\" color=\"primary\" />\r\n  *   </Card.Footer>\r\n  * </Card>\r\n  * ```\r\n  */\r\nconst Card = memo<CardProps>(({\r\n    as = 'div',\r\n    backgroundColor = 'card',\r\n    color = 'cardForeground',\r\n    borderRadius = 'lg',\r\n    borderWidth = '1px',\r\n    borderColor = 'border',\r\n    boxShadow = 'none',\r\n    overflow = 'hidden',\r\n    className,\r\n    ...props\r\n}) => (\r\n    <Box\r\n        as={as}\r\n        backgroundColor={backgroundColor}\r\n        color={color}\r\n        borderRadius={borderRadius}\r\n        borderWidth={borderWidth}\r\n        borderColor={borderColor}\r\n        boxShadow={boxShadow}\r\n        overflow={overflow}\r\n        className={className}\r\n        {...props}\r\n    />\r\n)) as unknown as CardCompound\r\n\r\nCard.displayName = 'Card'\r\nCard.Header = CardHeader\r\nCard.Body = CardBody\r\nCard.Footer = CardFooter\r\n\r\nexport { Card }\r\n"],"names":["Card","memo","as","backgroundColor","color","borderRadius","borderWidth","borderColor","boxShadow","overflow","className","props","jsx","Box","CardHeader","CardBody","CardFooter"],"mappings":";;;;;;;AA6BA,MAAMA,IAAOC,EAAgB,CAAC;AAAA,EAC1B,IAAAC,IAAK;AAAA,EACL,iBAAAC,IAAkB;AAAA,EAClB,OAAAC,IAAQ;AAAA,EACR,cAAAC,IAAe;AAAA,EACf,aAAAC,IAAc;AAAA,EACd,aAAAC,IAAc;AAAA,EACd,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,WAAAC;AAAA,EACA,GAAGC;AACP,MACI,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACG,IAAAX;AAAA,IACA,iBAAAC;AAAA,IACA,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,aAAAC;AAAA,IACA,aAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACC,GAAGC;AAAA,EAAA;AACR,CACH;AAEDX,EAAK,cAAc;AACnBA,EAAK,SAASc;AACdd,EAAK,OAAOe;AACZf,EAAK,SAASgB;"}
+{"version":3,"file":"Card.js","sources":["../../../../src/components/surfaces/card/Card.tsx"],"sourcesContent":["import { memo } from 'react'\r\n\r\nimport { Box } from '@components/layout/box'\r\nimport CardBody from '@components/surfaces/card/components/card-body/CardBody.tsx'\r\nimport CardFooter from '@components/surfaces/card/components/card-footer/CardFooter.tsx'\r\nimport CardHeader from '@components/surfaces/card/components/card-header/CardHeader.tsx'\r\nimport { CARD_STYLES } from '@components/surfaces/card/styles/Card.css.ts'\r\nimport type { CardCompound } from '@components/surfaces/card/types'\r\nimport type { CardProps } from '@components/surfaces/card/types/Card.props.ts'\r\nimport { cn } from '@utils/cn.ts'\r\n\r\n/**\r\n  * A surface container with a consistent background, border, shadow and\r\n  * rounded corners. Compose with the named sub-components for a structured\r\n  * layout.\r\n  *\r\n  * @example\r\n  * ```tsx\r\n  * <Card>\r\n  *   <Card.Header\r\n  *     title=\"Account settings\"\r\n  *     description=\"Manage your profile.\"\r\n  *     actions={<IconButton icon=\"lucide:ellipsis-vertical\" aria-label=\"More\" />}\r\n  *   />\r\n  *   <Card.Body>Content goes here</Card.Body>\r\n  *   <Card.Footer>\r\n  *     <Button label=\"Save\" variant=\"contained\" color=\"primary\" />\r\n  *   </Card.Footer>\r\n  * </Card>\r\n  * ```\r\n  */\r\nconst Card = memo<CardProps>(({\r\n    as = 'div',\r\n    backgroundColor = 'card',\r\n    color = 'cardForeground',\r\n    borderRadius = 'lg',\r\n    borderWidth = '1px',\r\n    borderColor = 'border',\r\n    borderStyle = 'solid',\r\n    boxShadow = 'none',\r\n    overflow = 'hidden',\r\n    className,\r\n    ...props\r\n}) => (\r\n    <Box\r\n        as={as}\r\n        backgroundColor={backgroundColor}\r\n        color={color}\r\n        borderRadius={borderRadius}\r\n        borderWidth={borderWidth}\r\n        borderColor={borderColor}\r\n        borderStyle={borderStyle}\r\n        boxShadow={boxShadow}\r\n        overflow={overflow}\r\n        className={cn(CARD_STYLES.root, className)}\r\n        {...props}\r\n    />\r\n)) as unknown as CardCompound\r\n\r\nCard.displayName = 'Card'\r\nCard.Header = CardHeader\r\nCard.Body = CardBody\r\nCard.Footer = CardFooter\r\n\r\nexport { Card }\r\n"],"names":["Card","memo","as","backgroundColor","color","borderRadius","borderWidth","borderColor","borderStyle","boxShadow","overflow","className","props","jsx","Box","cn","CARD_STYLES","CardHeader","CardBody","CardFooter"],"mappings":";;;;;;;;;AA+BA,MAAMA,IAAOC,EAAgB,CAAC;AAAA,EAC1B,IAAAC,IAAK;AAAA,EACL,iBAAAC,IAAkB;AAAA,EAClB,OAAAC,IAAQ;AAAA,EACR,cAAAC,IAAe;AAAA,EACf,aAAAC,IAAc;AAAA,EACd,aAAAC,IAAc;AAAA,EACd,aAAAC,IAAc;AAAA,EACd,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,WAAAC;AAAA,EACA,GAAGC;AACP,MACI,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACG,IAAAZ;AAAA,IACA,iBAAAC;AAAA,IACA,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,aAAAC;AAAA,IACA,aAAAC;AAAA,IACA,aAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAWK,EAAGC,EAAY,MAAML,CAAS;AAAA,IACxC,GAAGC;AAAA,EAAA;AACR,CACH;AAEDZ,EAAK,cAAc;AACnBA,EAAK,SAASiB;AACdjB,EAAK,OAAOkB;AACZlB,EAAK,SAASmB;"}

package/dist/components/surfaces/card/types/Card.props.d.ts

@@ -1,5 +1,5 @@
 import { BoxProps } from '../../../layout/box/types/Box.props.ts';
-export type CardProps = Omit<BoxProps, 'as' | 'backgroundColor' | 'color' | 'borderRadius' | 'borderWidth' | 'borderColor' | 'boxShadow' | 'overflow'> & {
+export type CardProps = Omit<BoxProps, 'as' | 'backgroundColor' | 'color' | 'borderRadius' | 'borderWidth' | 'borderColor' | 'boxShadow' | 'overflow' | 'borderStyle'> & {
     /** The HTML element to render. @default 'div' */
     as?: 'div' | 'section' | 'article' | 'aside';
     /** Background color token. @default 'card' */
@@ -12,6 +12,8 @@ export type CardProps = Omit<BoxProps, 'as' | 'backgroundColor' | 'color' | 'bor
     borderWidth?: BoxProps['borderWidth'];
     /** Border color token. @default 'border' */
     borderColor?: BoxProps['borderColor'];
+    /** Border style. @default 'solid' */
+    borderStyle?: BoxProps['borderStyle'];
     /** Shadow token. @default 'none' */
     boxShadow?: BoxProps['boxShadow'];
     /** Overflow behavior. @default 'hidden' */

package/dist/components/surfaces/collapsible/components/collapsible-panel/CollapsiblePanel.cjs

@@ -1,2 +1,2 @@
-"use strict";const e=require("react/jsx-runtime"),t=require("react"),i=require("@base-ui/react/collapsible"),s=require("./styles/CollapsiblePanel.css.cjs"),L=require("../../../../../theme/contract.css.cjs"),p=require("../../../../../utils/cn.cjs"),l=t.memo(({className:a,padding:c="md",keepMounted:r=!0,children:n,...o})=>e.jsx(i.Collapsible.Panel,{keepMounted:r,className:p.cn(s.COLLAPSIBLE_PANEL_STYLES.root,a),style:{paddingBottom:L.vars.space[c]},...o,children:e.jsx("div",{className:s.COLLAPSIBLE_PANEL_STYLES.inner,children:n})}));l.displayName="Collapsible.Panel";module.exports=l;
+"use strict";const e=require("react/jsx-runtime"),t=require("react"),i=require("@base-ui/react/collapsible"),s=require("./styles/CollapsiblePanel.css.cjs"),L=require("../../../../../theme/contract.css.cjs"),p=require("../../../../../utils/cn.cjs"),l=t.memo(({className:r,padding:a="md",keepMounted:c=!0,children:n,...o})=>e.jsx(i.Collapsible.Panel,{keepMounted:c,className:p.cn(s.COLLAPSIBLE_PANEL_STYLES.root,r),style:{paddingBottom:L.vars.space[a]},...o,children:e.jsx("div",{className:s.COLLAPSIBLE_PANEL_STYLES.inner,children:n})}));l.displayName="Collapsible.Panel";module.exports=l;
 //# sourceMappingURL=CollapsiblePanel.cjs.map

package/dist/components/theme-provider/ThemeProvider.cjs

@@ -1,2 +1,2 @@
-"use strict";const i=require("react/jsx-runtime"),r=require("react");require("../overlay/tooltip/Tooltip.cjs");const S=require("../overlay/tooltip/components/tooltip-provider/TooltipProvider.cjs");;/* empty css                                        */;/* empty css                                                     */const g=require("./ThemeProvider.context.cjs"),p=require("./utils/getSystemTheme.utils.cjs"),P=require("./utils/resolveTheme.utils.cjs"),c=({theme:n,defaultTheme:h="system",onThemeChange:u,tokens:s,style:a,children:d,...l})=>{const[v,T]=r.useState(h),o=n??v,[q,y]=r.useState(p.getSystemTheme);r.useEffect(()=>{const e=window.matchMedia("(prefers-color-scheme: dark)"),t=x=>y(x.matches?"dark":"light");return e.addEventListener("change",t),()=>e.removeEventListener("change",t)},[]);const m=P.resolveTheme(o,q),f=e=>{n===void 0&&T(e),u?.(e)},j=r.useMemo(()=>s?Object.fromEntries(Object.entries(s).map(([e,t])=>[`--color-${e}`,t])):{},[s]);return i.jsx(g.ThemeContext.Provider,{value:{theme:o,resolvedTheme:m,setTheme:f},children:i.jsx("div",{"data-theme":m,style:{...j,...a},...l,children:i.jsx(S,{children:d})})})};c.displayName="ThemeProvider";module.exports=c;
+"use strict";const s=require("react/jsx-runtime"),e=require("react");require("../overlay/tooltip/Tooltip.cjs");const N=require("../overlay/tooltip/components/tooltip-provider/TooltipProvider.cjs");;/* empty css                                        */;/* empty css                                                     */const R=require("./ThemeProvider.context.cjs"),y=require("./hooks/use-theme-provider/useThemeProvider.hook.cjs"),h=require("../../constants/theme.cjs"),d=({theme:v,defaultTheme:a="system",scope:l="document",themeTransitionDuration:t=100,onThemeChange:q,tokens:x,style:i,children:n,...M})=>{const{activeTheme:c,resolvedTheme:r,setTheme:m,tokenStyles:u,isTransitioning:o}=y.useThemeProvider({controlledTheme:v,defaultTheme:a,onThemeChange:q,scope:l,tokens:x,themeTransitionDuration:t}),T=e.useMemo(()=>o?{[h.THEME_TRANSITION_DURATION_VAR]:`${Math.max(0,t)}ms`}:{},[o,t]),P=e.useMemo(()=>({...u,...i,...T}),[i,u,T]),_=e.useMemo(()=>({theme:c,resolvedTheme:r,setTheme:m}),[c,r,m]),I=e.useMemo(()=>s.jsx(N,{children:n}),[n]);return s.jsx(R.ThemeContext.Provider,{value:_,children:s.jsx("div",{"data-theme":r,...o?{[h.THEME_TRANSITION_ATTRIBUTE]:""}:{},style:P,...M,children:I})})};d.displayName="ThemeProvider";module.exports=d;
 //# sourceMappingURL=ThemeProvider.cjs.map

package/dist/components/theme-provider/ThemeProvider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.cjs","sources":["../../../src/components/theme-provider/ThemeProvider.tsx"],"sourcesContent":["import { type FC, useEffect, useMemo, useState } from 'react'\r\nimport { TooltipProvider } from '@components/overlay/tooltip'\r\nimport { ThemeContext } from '@components/theme-provider/ThemeProvider.context.ts'\r\nimport type { ThemeMode, ThemeProviderProps } from '@components/theme-provider/types/ThemeProvider.props.ts'\r\nimport { getSystemTheme } from '@components/theme-provider/utils/getSystemTheme.utils.ts'\r\nimport { resolveTheme } from '@components/theme-provider/utils/resolveTheme.utils.ts'\r\n\r\n/**\r\n * `ThemeProvider` wraps a subtree and manages the active color-scheme.\r\n *\r\n * ### What it does\r\n * - Sets `data-theme=\"light\"` or `data-theme=\"dark\"` on its wrapper `<div>` so\r\n *   the kit's CSS-variable scoping works out of the box.\r\n * - In `'system'` mode it follows `prefers-color-scheme` and reactively updates\r\n *   when the OS preference changes.\r\n * - Accepts a `tokens` map to inject runtime CSS-variable overrides directly\r\n *   on the wrapper element — no `.css.ts` file required.\r\n * - Exposes `{ theme, resolvedTheme, setTheme }` via React context so any child\r\n *   can read or change the active mode with the `useTheme` hook.\r\n *\r\n * ### Controlled vs uncontrolled\r\n * - **Uncontrolled** (default): omit the `theme` prop.  The component manages\r\n *   its own state; use `defaultTheme` to set the initial value.\r\n * - **Controlled**: pass `theme` and handle `onThemeChange` in the parent.\r\n *\r\n * ### Placing in your app\r\n * Wrap your whole application to enable global theming:\r\n * ```tsx\r\n * <ThemeProvider defaultTheme=\"system\">\r\n *   <App />\r\n * </ThemeProvider>\r\n * ```\r\n * Or scope it to a single subtree:\r\n * ```tsx\r\n * <ThemeProvider theme=\"dark\" tokens={{ primary: 'oklch(0.70 0.16 185)' }}>\r\n *   <DarkWidget />\r\n * </ThemeProvider>\r\n * ```\r\n */\r\nconst ThemeProvider: FC<ThemeProviderProps> = ({\r\n    theme: controlledTheme,\r\n    defaultTheme = 'system',\r\n    onThemeChange,\r\n    tokens,\r\n    style,\r\n    children,\r\n    ...divProps\r\n}) => {\r\n\r\n    // 1. Internal state (uncontrolled mode)\r\n\r\n    const [internalTheme, setInternalTheme] = useState<ThemeMode>(defaultTheme)\r\n    const activeTheme = controlledTheme ?? internalTheme\r\n\r\n    // 2. Resolve OS preference and subscribe to changes\r\n\r\n    const [systemTheme, setSystemTheme] = useState<'light' | 'dark'>(getSystemTheme)\r\n\r\n    useEffect(() => {\r\n        const mql = window.matchMedia('(prefers-color-scheme: dark)')\r\n        const handler = (e: MediaQueryListEvent) => setSystemTheme(e.matches ? 'dark' : 'light')\r\n        mql.addEventListener('change', handler)\r\n        return () => mql.removeEventListener('change', handler)\r\n    }, [])\r\n\r\n    const resolvedTheme = resolveTheme(activeTheme, systemTheme)\r\n\r\n    // 3. setTheme — works in both controlled and uncontrolled modes\r\n\r\n    const setTheme = (next: ThemeMode) => {\r\n        if (controlledTheme === undefined) {\r\n            setInternalTheme(next)\r\n        }\r\n        onThemeChange?.(next)\r\n    }\r\n\r\n    // 4. Convert `tokens` → inline CSS custom properties\r\n\r\n    const tokenStyles = useMemo<React.CSSProperties>(() => {\r\n        if (!tokens) { return {} }\r\n        return Object.fromEntries(\r\n            Object.entries(tokens).map(([key, value]) => [`--color-${key}`, value]),\r\n        ) as React.CSSProperties\r\n    }, [tokens])\r\n\r\n    // 5. Render\r\n\r\n    return (\r\n        <ThemeContext.Provider value={{ theme: activeTheme, resolvedTheme, setTheme }}>\r\n            <div\r\n                data-theme={resolvedTheme}\r\n                style={{ ...tokenStyles, ...style }}\r\n                {...divProps}\r\n            >\r\n                <TooltipProvider>\r\n                    {children}\r\n                </TooltipProvider>\r\n            </div>\r\n        </ThemeContext.Provider>\r\n    )\r\n}\r\n\r\nThemeProvider.displayName = 'ThemeProvider'\r\n\r\nexport default ThemeProvider\r\n"],"names":["ThemeProvider","controlledTheme","defaultTheme","onThemeChange","tokens","style","children","divProps","internalTheme","setInternalTheme","useState","activeTheme","systemTheme","setSystemTheme","getSystemTheme","useEffect","mql","handler","e","resolvedTheme","resolveTheme","setTheme","next","tokenStyles","useMemo","key","value","jsx","ThemeContext","TooltipProvider"],"mappings":"ycAuCMA,EAAwC,CAAC,CAC3C,MAAOC,EACP,aAAAC,EAAe,SACf,cAAAC,EACA,OAAAC,EACA,MAAAC,EACA,SAAAC,EACA,GAAGC,CACP,IAAM,CAIF,KAAM,CAACC,EAAeC,CAAgB,EAAIC,EAAAA,SAAoBR,CAAY,EACpES,EAAcV,GAAmBO,EAIjC,CAACI,EAAaC,CAAc,EAAIH,EAAAA,SAA2BI,EAAAA,cAAc,EAE/EC,EAAAA,UAAU,IAAM,CACZ,MAAMC,EAAM,OAAO,WAAW,8BAA8B,EACtDC,EAAWC,GAA2BL,EAAeK,EAAE,QAAU,OAAS,OAAO,EACvF,OAAAF,EAAI,iBAAiB,SAAUC,CAAO,EAC/B,IAAMD,EAAI,oBAAoB,SAAUC,CAAO,CAC1D,EAAG,CAAA,CAAE,EAEL,MAAME,EAAgBC,EAAAA,aAAaT,EAAaC,CAAW,EAIrDS,EAAYC,GAAoB,CAC9BrB,IAAoB,QACpBQ,EAAiBa,CAAI,EAEzBnB,IAAgBmB,CAAI,CACxB,EAIMC,EAAcC,EAAAA,QAA6B,IACxCpB,EACE,OAAO,YACV,OAAO,QAAQA,CAAM,EAAE,IAAI,CAAC,CAACqB,EAAKC,CAAK,IAAM,CAAC,WAAWD,CAAG,GAAIC,CAAK,CAAC,CAAA,EAFpD,CAAA,EAIvB,CAACtB,CAAM,CAAC,EAIX,OACIuB,MAACC,EAAAA,aAAa,SAAb,CAAsB,MAAO,CAAE,MAAOjB,EAAa,cAAAQ,EAAe,SAAAE,CAAA,EAC/D,SAAAM,EAAAA,IAAC,MAAA,CACG,aAAYR,EACZ,MAAO,CAAE,GAAGI,EAAa,GAAGlB,CAAA,EAC3B,GAAGE,EAEJ,SAAAoB,EAAAA,IAACE,GACI,SAAAvB,CAAA,CACL,CAAA,CAAA,EAER,CAER,EAEAN,EAAc,YAAc"}
+{"version":3,"file":"ThemeProvider.cjs","sources":["../../../src/components/theme-provider/ThemeProvider.tsx"],"sourcesContent":["import { type CSSProperties, type FC, useMemo } from 'react'\r\nimport { TooltipProvider } from '@components/overlay/tooltip'\r\nimport { ThemeContext } from '@components/theme-provider/ThemeProvider.context.ts'\r\nimport type { ThemeProviderProps } from '@components/theme-provider/types/ThemeProvider.props.ts'\r\nimport { useThemeProvider } from '@components/theme-provider/hooks/use-theme-provider/useThemeProvider.hook.ts'\r\nimport {\r\n    THEME_TRANSITION_ATTRIBUTE,\r\n    THEME_TRANSITION_DURATION_VAR,\r\n} from '@constants/theme'\r\n\r\n/**\r\n * `ThemeProvider` wraps a subtree and manages the active color-scheme.\r\n *\r\n * ### What it does\r\n * - Manages the active color scheme and runtime token overrides.\r\n * - Applies the theme to `<html>` by default so body-mounted portals inherit it.\r\n * - Applies the theme to its wrapper when `scope=\"subtree\"`.\r\n * - Temporarily forces all transitions to the configured theme duration.\r\n *\r\n * ### Controlled vs uncontrolled\r\n * - **Uncontrolled** (default): omit the `theme` prop.  The component manages\r\n *   its own state; use `defaultTheme` to set the initial value.\r\n * - **Controlled**: pass `theme` and handle `onThemeChange` in the parent.\r\n *\r\n * ### Placing in your app\r\n * Wrap your whole application to enable global theming:\r\n * ```tsx\r\n * <ThemeProvider defaultTheme=\"system\">\r\n *   <App />\r\n * </ThemeProvider>\r\n * ```\r\n * Or scope it to a single subtree:\r\n * ```tsx\r\n * <ThemeProvider scope=\"subtree\" theme=\"dark\" tokens={{ primary: 'oklch(0.70 0.16 185)' }}>\r\n *   <DarkWidget />\r\n * </ThemeProvider>\r\n * ```\r\n */\r\nconst ThemeProvider: FC<ThemeProviderProps> = ({\r\n    theme: controlledTheme,\r\n    defaultTheme = 'system',\r\n    scope = 'document',\r\n    themeTransitionDuration = 100,\r\n    onThemeChange,\r\n    tokens,\r\n    style,\r\n    children,\r\n    ...divProps\r\n}) => {\r\n    const { activeTheme, resolvedTheme, setTheme, tokenStyles, isTransitioning } =\r\n    useThemeProvider({\r\n        controlledTheme,\r\n        defaultTheme,\r\n        onThemeChange,\r\n        scope,\r\n        tokens,\r\n        themeTransitionDuration,\r\n    })\r\n    const transitionStyle = useMemo<CSSProperties>(\r\n        () =>\r\n            isTransitioning\r\n                ? ({\r\n                    [THEME_TRANSITION_DURATION_VAR]: `${Math.max(0, themeTransitionDuration)}ms`,\r\n                } as CSSProperties)\r\n                : {},\r\n        [isTransitioning, themeTransitionDuration],\r\n    )\r\n    const containerStyle = useMemo(\r\n        () => ({ ...tokenStyles, ...style, ...transitionStyle }),\r\n        [style, tokenStyles, transitionStyle],\r\n    )\r\n    const contextValue = useMemo(\r\n        () => ({ theme: activeTheme, resolvedTheme, setTheme }),\r\n        [activeTheme, resolvedTheme, setTheme],\r\n    )\r\n    const content = useMemo(\r\n        () => <TooltipProvider>{children}</TooltipProvider>,\r\n        [children],\r\n    )\r\n\r\n    return (\r\n        <ThemeContext.Provider value={contextValue}>\r\n            <div\r\n                data-theme={resolvedTheme}\r\n                {...(isTransitioning ? { [THEME_TRANSITION_ATTRIBUTE]: '' } : {})}\r\n                style={containerStyle}\r\n                {...divProps}\r\n            >\r\n                {content}\r\n            </div>\r\n        </ThemeContext.Provider>\r\n    )\r\n}\r\n\r\nThemeProvider.displayName = 'ThemeProvider'\r\n\r\nexport default ThemeProvider\r\n"],"names":["ThemeProvider","controlledTheme","defaultTheme","scope","themeTransitionDuration","onThemeChange","tokens","style","children","divProps","activeTheme","resolvedTheme","setTheme","tokenStyles","isTransitioning","useThemeProvider","transitionStyle","useMemo","THEME_TRANSITION_DURATION_VAR","containerStyle","contextValue","content","jsx","TooltipProvider","ThemeContext","THEME_TRANSITION_ATTRIBUTE"],"mappings":"wdAsCMA,EAAwC,CAAC,CAC3C,MAAOC,EACP,aAAAC,EAAe,SACf,MAAAC,EAAQ,WACR,wBAAAC,EAA0B,IAC1B,cAAAC,EACA,OAAAC,EACA,MAAAC,EACA,SAAAC,EACA,GAAGC,CACP,IAAM,CACF,KAAM,CAAE,YAAAC,EAAa,cAAAC,EAAe,SAAAC,EAAU,YAAAC,EAAa,gBAAAC,CAAA,EAC3DC,mBAAiB,CACb,gBAAAd,EACA,aAAAC,EACA,cAAAG,EACA,MAAAF,EACA,OAAAG,EACA,wBAAAF,CAAA,CACH,EACKY,EAAkBC,EAAAA,QACpB,IACIH,EACO,CACC,CAACI,EAAAA,6BAA6B,EAAG,GAAG,KAAK,IAAI,EAAGd,CAAuB,CAAC,IAAA,EAE1E,CAAA,EACV,CAACU,EAAiBV,CAAuB,CAAA,EAEvCe,EAAiBF,EAAAA,QACnB,KAAO,CAAE,GAAGJ,EAAa,GAAGN,EAAO,GAAGS,CAAA,GACtC,CAACT,EAAOM,EAAaG,CAAe,CAAA,EAElCI,EAAeH,EAAAA,QACjB,KAAO,CAAE,MAAOP,EAAa,cAAAC,EAAe,SAAAC,CAAA,GAC5C,CAACF,EAAaC,EAAeC,CAAQ,CAAA,EAEnCS,EAAUJ,EAAAA,QACZ,IAAMK,MAACC,EAAA,CAAiB,SAAAf,EAAS,EACjC,CAACA,CAAQ,CAAA,EAGb,OACIc,EAAAA,IAACE,EAAAA,aAAa,SAAb,CAAsB,MAAOJ,EAC1B,SAAAE,EAAAA,IAAC,MAAA,CACG,aAAYX,EACX,GAAIG,EAAkB,CAAE,CAACW,4BAA0B,EAAG,EAAA,EAAO,CAAA,EAC9D,MAAON,EACN,GAAGV,EAEH,SAAAY,CAAA,CAAA,EAET,CAER,EAEArB,EAAc,YAAc"}

package/dist/components/theme-provider/ThemeProvider.context.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.context.cjs","sources":["../../../src/components/theme-provider/ThemeProvider.context.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\r\nimport type { ThemeMode } from '@components/theme-provider/types/ThemeProvider.props.ts'\r\n\r\nexport interface ThemeContextValue {\r\n    /** Currently active mode. `'system'` means \"follow the OS preference\". */\r\n    theme: ThemeMode\r\n\r\n    /**\r\n     * The concrete resolved mode — always `'light'` or `'dark'`, never\r\n     * `'system'`.  Useful for conditional rendering that depends on the actual\r\n     * visual state (e.g. swapping an icon).\r\n     */\r\n    resolvedTheme: 'light' | 'dark'\r\n\r\n    /**\r\n     * Change the active mode.\r\n     * - In **uncontrolled** mode this updates internal state.\r\n     * - In **controlled** mode (`theme` prop is provided) it only fires\r\n     *   `onThemeChange`; the parent is responsible for updating `theme`.\r\n     */\r\n    setTheme: (theme: ThemeMode) => void\r\n}\r\n\r\n/**\r\n * Default context value used when `useTheme` is called outside a\r\n * `ThemeProvider`.  Falls back to `'system'` / `'light'` so the hook is\r\n * always safe to call.\r\n */\r\nconst defaultContext: ThemeContextValue = {\r\n    theme: 'system',\r\n    resolvedTheme: 'light',\r\n    setTheme: () => undefined,\r\n}\r\n\r\nexport const ThemeContext = createContext<ThemeContextValue>(defaultContext)\r\n\r\n/**\r\n * Returns the nearest `ThemeProvider` context.\r\n *\r\n * Safe to call outside a provider — returns `{ theme: 'system', resolvedTheme:\r\n * 'light', setTheme: noop }` as a fallback.\r\n *\r\n * @example\r\n * const { resolvedTheme, setTheme } = useTheme()\r\n */\r\nexport const useTheme = (): ThemeContextValue => useContext(ThemeContext)\r\n"],"names":["defaultContext","ThemeContext","createContext","useTheme","useContext"],"mappings":"yGA4BMA,EAAoC,CACtC,MAAO,SACP,cAAe,QACf,SAAU,IAAA,EACd,EAEaC,EAAeC,EAAAA,cAAiCF,CAAc,EAW9DG,EAAW,IAAyBC,EAAAA,WAAWH,CAAY"}
+{"version":3,"file":"ThemeProvider.context.cjs","sources":["../../../src/components/theme-provider/ThemeProvider.context.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\r\nimport type { ThemeValue } from '@components/theme-provider/types/ThemeProvider.props.ts'\r\n\r\nexport interface ThemeContextValue {\r\n    /** Currently active theme name. `'system'` follows the OS preference. */\r\n    theme: ThemeValue\r\n\r\n    /**\r\n     * The concrete resolved theme name, never `'system'`. Useful for\r\n     * conditional rendering that depends on the actual visual state.\r\n     */\r\n    resolvedTheme: string\r\n\r\n    /**\r\n     * Change the active theme.\r\n     * - In **uncontrolled** mode this updates internal state.\r\n     * - In **controlled** mode (`theme` prop is provided) it only fires\r\n     *   `onThemeChange`; the parent is responsible for updating `theme`.\r\n     */\r\n    setTheme: (theme: ThemeValue) => void\r\n}\r\n\r\n/**\r\n * Default context value used when `useTheme` is called outside a\r\n * `ThemeProvider`.  Falls back to `'system'` / `'light'` so the hook is\r\n * always safe to call.\r\n */\r\nconst defaultContext: ThemeContextValue = {\r\n    theme: 'system',\r\n    resolvedTheme: 'light',\r\n    setTheme: () => undefined,\r\n}\r\n\r\nexport const ThemeContext = createContext<ThemeContextValue>(defaultContext)\r\n\r\n/**\r\n * Returns the nearest `ThemeProvider` context.\r\n *\r\n * Safe to call outside a provider — returns `{ theme: 'system', resolvedTheme:\r\n * 'light', setTheme: noop }` as a fallback.\r\n *\r\n * @example\r\n * const { resolvedTheme, setTheme } = useTheme()\r\n */\r\nexport const useTheme = (): ThemeContextValue => useContext(ThemeContext)\r\n"],"names":["defaultContext","ThemeContext","createContext","useTheme","useContext"],"mappings":"yGA2BMA,EAAoC,CACtC,MAAO,SACP,cAAe,QACf,SAAU,IAAA,EACd,EAEaC,EAAeC,EAAAA,cAAiCF,CAAc,EAW9DG,EAAW,IAAyBC,EAAAA,WAAWH,CAAY"}

package/dist/components/theme-provider/ThemeProvider.context.d.ts

@@ -1,21 +1,20 @@
-import { ThemeMode } from './types/ThemeProvider.props.ts';
+import { ThemeValue } from './types/ThemeProvider.props.ts';
 import { Context } from 'react';
 export interface ThemeContextValue {
-    /** Currently active mode. `'system'` means "follow the OS preference". */
-    theme: ThemeMode;
+    /** Currently active theme name. `'system'` follows the OS preference. */
+    theme: ThemeValue;
     /**
-     * The concrete resolved mode — always `'light'` or `'dark'`, never
-     * `'system'`.  Useful for conditional rendering that depends on the actual
-     * visual state (e.g. swapping an icon).
+     * The concrete resolved theme name, never `'system'`. Useful for
+     * conditional rendering that depends on the actual visual state.
      */
-    resolvedTheme: 'light' | 'dark';
+    resolvedTheme: string;
     /**
-     * Change the active mode.
+     * Change the active theme.
      * - In **uncontrolled** mode this updates internal state.
      * - In **controlled** mode (`theme` prop is provided) it only fires
      *   `onThemeChange`; the parent is responsible for updating `theme`.
      */
-    setTheme: (theme: ThemeMode) => void;
+    setTheme: (theme: ThemeValue) => void;
 }
 export declare const ThemeContext: Context<ThemeContextValue>;
 /**

package/dist/components/theme-provider/ThemeProvider.context.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.context.js","sources":["../../../src/components/theme-provider/ThemeProvider.context.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\r\nimport type { ThemeMode } from '@components/theme-provider/types/ThemeProvider.props.ts'\r\n\r\nexport interface ThemeContextValue {\r\n    /** Currently active mode. `'system'` means \"follow the OS preference\". */\r\n    theme: ThemeMode\r\n\r\n    /**\r\n     * The concrete resolved mode — always `'light'` or `'dark'`, never\r\n     * `'system'`.  Useful for conditional rendering that depends on the actual\r\n     * visual state (e.g. swapping an icon).\r\n     */\r\n    resolvedTheme: 'light' | 'dark'\r\n\r\n    /**\r\n     * Change the active mode.\r\n     * - In **uncontrolled** mode this updates internal state.\r\n     * - In **controlled** mode (`theme` prop is provided) it only fires\r\n     *   `onThemeChange`; the parent is responsible for updating `theme`.\r\n     */\r\n    setTheme: (theme: ThemeMode) => void\r\n}\r\n\r\n/**\r\n * Default context value used when `useTheme` is called outside a\r\n * `ThemeProvider`.  Falls back to `'system'` / `'light'` so the hook is\r\n * always safe to call.\r\n */\r\nconst defaultContext: ThemeContextValue = {\r\n    theme: 'system',\r\n    resolvedTheme: 'light',\r\n    setTheme: () => undefined,\r\n}\r\n\r\nexport const ThemeContext = createContext<ThemeContextValue>(defaultContext)\r\n\r\n/**\r\n * Returns the nearest `ThemeProvider` context.\r\n *\r\n * Safe to call outside a provider — returns `{ theme: 'system', resolvedTheme:\r\n * 'light', setTheme: noop }` as a fallback.\r\n *\r\n * @example\r\n * const { resolvedTheme, setTheme } = useTheme()\r\n */\r\nexport const useTheme = (): ThemeContextValue => useContext(ThemeContext)\r\n"],"names":["defaultContext","ThemeContext","createContext","useTheme","useContext"],"mappings":";AA4BA,MAAMA,IAAoC;AAAA,EACtC,OAAO;AAAA,EACP,eAAe;AAAA,EACf,UAAU,MAAA;AAAA;AACd,GAEaC,IAAeC,EAAiCF,CAAc,GAW9DG,IAAW,MAAyBC,EAAWH,CAAY;"}
+{"version":3,"file":"ThemeProvider.context.js","sources":["../../../src/components/theme-provider/ThemeProvider.context.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\r\nimport type { ThemeValue } from '@components/theme-provider/types/ThemeProvider.props.ts'\r\n\r\nexport interface ThemeContextValue {\r\n    /** Currently active theme name. `'system'` follows the OS preference. */\r\n    theme: ThemeValue\r\n\r\n    /**\r\n     * The concrete resolved theme name, never `'system'`. Useful for\r\n     * conditional rendering that depends on the actual visual state.\r\n     */\r\n    resolvedTheme: string\r\n\r\n    /**\r\n     * Change the active theme.\r\n     * - In **uncontrolled** mode this updates internal state.\r\n     * - In **controlled** mode (`theme` prop is provided) it only fires\r\n     *   `onThemeChange`; the parent is responsible for updating `theme`.\r\n     */\r\n    setTheme: (theme: ThemeValue) => void\r\n}\r\n\r\n/**\r\n * Default context value used when `useTheme` is called outside a\r\n * `ThemeProvider`.  Falls back to `'system'` / `'light'` so the hook is\r\n * always safe to call.\r\n */\r\nconst defaultContext: ThemeContextValue = {\r\n    theme: 'system',\r\n    resolvedTheme: 'light',\r\n    setTheme: () => undefined,\r\n}\r\n\r\nexport const ThemeContext = createContext<ThemeContextValue>(defaultContext)\r\n\r\n/**\r\n * Returns the nearest `ThemeProvider` context.\r\n *\r\n * Safe to call outside a provider — returns `{ theme: 'system', resolvedTheme:\r\n * 'light', setTheme: noop }` as a fallback.\r\n *\r\n * @example\r\n * const { resolvedTheme, setTheme } = useTheme()\r\n */\r\nexport const useTheme = (): ThemeContextValue => useContext(ThemeContext)\r\n"],"names":["defaultContext","ThemeContext","createContext","useTheme","useContext"],"mappings":";AA2BA,MAAMA,IAAoC;AAAA,EACtC,OAAO;AAAA,EACP,eAAe;AAAA,EACf,UAAU,MAAA;AAAA;AACd,GAEaC,IAAeC,EAAiCF,CAAc,GAW9DG,IAAW,MAAyBC,EAAWH,CAAY;"}

package/dist/components/theme-provider/ThemeProvider.d.ts

@@ -4,14 +4,10 @@ import { ThemeProviderProps } from './types/ThemeProvider.props.ts';
  * `ThemeProvider` wraps a subtree and manages the active color-scheme.
  *
  * ### What it does
- * - Sets `data-theme="light"` or `data-theme="dark"` on its wrapper `<div>` so
- *   the kit's CSS-variable scoping works out of the box.
- * - In `'system'` mode it follows `prefers-color-scheme` and reactively updates
- *   when the OS preference changes.
- * - Accepts a `tokens` map to inject runtime CSS-variable overrides directly
- *   on the wrapper element — no `.css.ts` file required.
- * - Exposes `{ theme, resolvedTheme, setTheme }` via React context so any child
- *   can read or change the active mode with the `useTheme` hook.
+ * - Manages the active color scheme and runtime token overrides.
+ * - Applies the theme to `<html>` by default so body-mounted portals inherit it.
+ * - Applies the theme to its wrapper when `scope="subtree"`.
+ * - Temporarily forces all transitions to the configured theme duration.
  *
  * ### Controlled vs uncontrolled
  * - **Uncontrolled** (default): omit the `theme` prop.  The component manages
@@ -27,7 +23,7 @@ import { ThemeProviderProps } from './types/ThemeProvider.props.ts';
  * ```
  * Or scope it to a single subtree:
  * ```tsx
- * <ThemeProvider theme="dark" tokens={{ primary: 'oklch(0.70 0.16 185)' }}>
+ * <ThemeProvider scope="subtree" theme="dark" tokens={{ primary: 'oklch(0.70 0.16 185)' }}>
  *   <DarkWidget />
  * </ThemeProvider>
  * ```

package/dist/components/theme-provider/ThemeProvider.js

@@ -1,43 +1,58 @@
-import { jsx as m } from "react/jsx-runtime";
-import { useState as n, useEffect as E, useMemo as P } from "react";
+import { jsx as r } from "react/jsx-runtime";
+import { useMemo as e } from "react";
 import "../overlay/tooltip/Tooltip.js";
-import S from "../overlay/tooltip/components/tooltip-provider/TooltipProvider.js";
+import x from "../overlay/tooltip/components/tooltip-provider/TooltipProvider.js";
 /* empty css                                      */
 /* empty css                                                   */
-import { ThemeContext as j } from "./ThemeProvider.context.js";
-import { getSystemTheme as b } from "./utils/getSystemTheme.utils.js";
-import { resolveTheme as w } from "./utils/resolveTheme.utils.js";
-const x = ({
-  theme: o,
-  defaultTheme: h = "system",
-  onThemeChange: a,
-  tokens: r,
-  style: c,
-  children: d,
-  ...l
+import { ThemeContext as y } from "./ThemeProvider.context.js";
+import { useThemeProvider as A } from "./hooks/use-theme-provider/useThemeProvider.hook.js";
+import { THEME_TRANSITION_DURATION_VAR as E, THEME_TRANSITION_ATTRIBUTE as P } from "../../constants/theme.js";
+const R = ({
+  theme: p,
+  defaultTheme: a = "system",
+  scope: h = "document",
+  themeTransitionDuration: t = 100,
+  onThemeChange: l,
+  tokens: v,
+  style: i,
+  children: s,
+  ...f
 }) => {
-  const [p, f] = n(h), s = o ?? p, [v, T] = n(b);
-  E(() => {
-    const e = window.matchMedia("(prefers-color-scheme: dark)"), t = (g) => T(g.matches ? "dark" : "light");
-    return e.addEventListener("change", t), () => e.removeEventListener("change", t);
-  }, []);
-  const i = w(s, v), u = (e) => {
-    o === void 0 && f(e), a?.(e);
-  }, y = P(() => r ? Object.fromEntries(
-    Object.entries(r).map(([e, t]) => [`--color-${e}`, t])
-  ) : {}, [r]);
-  return /* @__PURE__ */ m(j.Provider, { value: { theme: s, resolvedTheme: i, setTheme: u }, children: /* @__PURE__ */ m(
+  const { activeTheme: T, resolvedTheme: o, setTheme: n, tokenStyles: c, isTransitioning: m } = A({
+    controlledTheme: p,
+    defaultTheme: a,
+    onThemeChange: l,
+    scope: h,
+    tokens: v,
+    themeTransitionDuration: t
+  }), d = e(
+    () => m ? {
+      [E]: `${Math.max(0, t)}ms`
+    } : {},
+    [m, t]
+  ), I = e(
+    () => ({ ...c, ...i, ...d }),
+    [i, c, d]
+  ), N = e(
+    () => ({ theme: T, resolvedTheme: o, setTheme: n }),
+    [T, o, n]
+  ), u = e(
+    () => /* @__PURE__ */ r(x, { children: s }),
+    [s]
+  );
+  return /* @__PURE__ */ r(y.Provider, { value: N, children: /* @__PURE__ */ r(
     "div",
     {
-      "data-theme": i,
-      style: { ...y, ...c },
-      ...l,
-      children: /* @__PURE__ */ m(S, { children: d })
+      "data-theme": o,
+      ...m ? { [P]: "" } : {},
+      style: I,
+      ...f,
+      children: u
     }
   ) });
 };
-x.displayName = "ThemeProvider";
+R.displayName = "ThemeProvider";
 export {
-  x as default
+  R as default
 };
 //# sourceMappingURL=ThemeProvider.js.map

package/dist/components/theme-provider/ThemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.js","sources":["../../../src/components/theme-provider/ThemeProvider.tsx"],"sourcesContent":["import { type FC, useEffect, useMemo, useState } from 'react'\r\nimport { TooltipProvider } from '@components/overlay/tooltip'\r\nimport { ThemeContext } from '@components/theme-provider/ThemeProvider.context.ts'\r\nimport type { ThemeMode, ThemeProviderProps } from '@components/theme-provider/types/ThemeProvider.props.ts'\r\nimport { getSystemTheme } from '@components/theme-provider/utils/getSystemTheme.utils.ts'\r\nimport { resolveTheme } from '@components/theme-provider/utils/resolveTheme.utils.ts'\r\n\r\n/**\r\n * `ThemeProvider` wraps a subtree and manages the active color-scheme.\r\n *\r\n * ### What it does\r\n * - Sets `data-theme=\"light\"` or `data-theme=\"dark\"` on its wrapper `<div>` so\r\n *   the kit's CSS-variable scoping works out of the box.\r\n * - In `'system'` mode it follows `prefers-color-scheme` and reactively updates\r\n *   when the OS preference changes.\r\n * - Accepts a `tokens` map to inject runtime CSS-variable overrides directly\r\n *   on the wrapper element — no `.css.ts` file required.\r\n * - Exposes `{ theme, resolvedTheme, setTheme }` via React context so any child\r\n *   can read or change the active mode with the `useTheme` hook.\r\n *\r\n * ### Controlled vs uncontrolled\r\n * - **Uncontrolled** (default): omit the `theme` prop.  The component manages\r\n *   its own state; use `defaultTheme` to set the initial value.\r\n * - **Controlled**: pass `theme` and handle `onThemeChange` in the parent.\r\n *\r\n * ### Placing in your app\r\n * Wrap your whole application to enable global theming:\r\n * ```tsx\r\n * <ThemeProvider defaultTheme=\"system\">\r\n *   <App />\r\n * </ThemeProvider>\r\n * ```\r\n * Or scope it to a single subtree:\r\n * ```tsx\r\n * <ThemeProvider theme=\"dark\" tokens={{ primary: 'oklch(0.70 0.16 185)' }}>\r\n *   <DarkWidget />\r\n * </ThemeProvider>\r\n * ```\r\n */\r\nconst ThemeProvider: FC<ThemeProviderProps> = ({\r\n    theme: controlledTheme,\r\n    defaultTheme = 'system',\r\n    onThemeChange,\r\n    tokens,\r\n    style,\r\n    children,\r\n    ...divProps\r\n}) => {\r\n\r\n    // 1. Internal state (uncontrolled mode)\r\n\r\n    const [internalTheme, setInternalTheme] = useState<ThemeMode>(defaultTheme)\r\n    const activeTheme = controlledTheme ?? internalTheme\r\n\r\n    // 2. Resolve OS preference and subscribe to changes\r\n\r\n    const [systemTheme, setSystemTheme] = useState<'light' | 'dark'>(getSystemTheme)\r\n\r\n    useEffect(() => {\r\n        const mql = window.matchMedia('(prefers-color-scheme: dark)')\r\n        const handler = (e: MediaQueryListEvent) => setSystemTheme(e.matches ? 'dark' : 'light')\r\n        mql.addEventListener('change', handler)\r\n        return () => mql.removeEventListener('change', handler)\r\n    }, [])\r\n\r\n    const resolvedTheme = resolveTheme(activeTheme, systemTheme)\r\n\r\n    // 3. setTheme — works in both controlled and uncontrolled modes\r\n\r\n    const setTheme = (next: ThemeMode) => {\r\n        if (controlledTheme === undefined) {\r\n            setInternalTheme(next)\r\n        }\r\n        onThemeChange?.(next)\r\n    }\r\n\r\n    // 4. Convert `tokens` → inline CSS custom properties\r\n\r\n    const tokenStyles = useMemo<React.CSSProperties>(() => {\r\n        if (!tokens) { return {} }\r\n        return Object.fromEntries(\r\n            Object.entries(tokens).map(([key, value]) => [`--color-${key}`, value]),\r\n        ) as React.CSSProperties\r\n    }, [tokens])\r\n\r\n    // 5. Render\r\n\r\n    return (\r\n        <ThemeContext.Provider value={{ theme: activeTheme, resolvedTheme, setTheme }}>\r\n            <div\r\n                data-theme={resolvedTheme}\r\n                style={{ ...tokenStyles, ...style }}\r\n                {...divProps}\r\n            >\r\n                <TooltipProvider>\r\n                    {children}\r\n                </TooltipProvider>\r\n            </div>\r\n        </ThemeContext.Provider>\r\n    )\r\n}\r\n\r\nThemeProvider.displayName = 'ThemeProvider'\r\n\r\nexport default ThemeProvider\r\n"],"names":["ThemeProvider","controlledTheme","defaultTheme","onThemeChange","tokens","style","children","divProps","internalTheme","setInternalTheme","useState","activeTheme","systemTheme","setSystemTheme","getSystemTheme","useEffect","mql","handler","e","resolvedTheme","resolveTheme","setTheme","next","tokenStyles","useMemo","key","value","jsx","ThemeContext","TooltipProvider"],"mappings":";;;;;;;;;AAuCA,MAAMA,IAAwC,CAAC;AAAA,EAC3C,OAAOC;AAAA,EACP,cAAAC,IAAe;AAAA,EACf,eAAAC;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACP,MAAM;AAIF,QAAM,CAACC,GAAeC,CAAgB,IAAIC,EAAoBR,CAAY,GACpES,IAAcV,KAAmBO,GAIjC,CAACI,GAAaC,CAAc,IAAIH,EAA2BI,CAAc;AAE/E,EAAAC,EAAU,MAAM;AACZ,UAAMC,IAAM,OAAO,WAAW,8BAA8B,GACtDC,IAAU,CAACC,MAA2BL,EAAeK,EAAE,UAAU,SAAS,OAAO;AACvF,WAAAF,EAAI,iBAAiB,UAAUC,CAAO,GAC/B,MAAMD,EAAI,oBAAoB,UAAUC,CAAO;AAAA,EAC1D,GAAG,CAAA,CAAE;AAEL,QAAME,IAAgBC,EAAaT,GAAaC,CAAW,GAIrDS,IAAW,CAACC,MAAoB;AAClC,IAAIrB,MAAoB,UACpBQ,EAAiBa,CAAI,GAEzBnB,IAAgBmB,CAAI;AAAA,EACxB,GAIMC,IAAcC,EAA6B,MACxCpB,IACE,OAAO;AAAA,IACV,OAAO,QAAQA,CAAM,EAAE,IAAI,CAAC,CAACqB,GAAKC,CAAK,MAAM,CAAC,WAAWD,CAAG,IAAIC,CAAK,CAAC;AAAA,EAAA,IAFpD,CAAA,GAIvB,CAACtB,CAAM,CAAC;AAIX,SACI,gBAAAuB,EAACC,EAAa,UAAb,EAAsB,OAAO,EAAE,OAAOjB,GAAa,eAAAQ,GAAe,UAAAE,EAAA,GAC/D,UAAA,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,cAAYR;AAAA,MACZ,OAAO,EAAE,GAAGI,GAAa,GAAGlB,EAAA;AAAA,MAC3B,GAAGE;AAAA,MAEJ,UAAA,gBAAAoB,EAACE,KACI,UAAAvB,EAAA,CACL;AAAA,IAAA;AAAA,EAAA,GAER;AAER;AAEAN,EAAc,cAAc;"}
+{"version":3,"file":"ThemeProvider.js","sources":["../../../src/components/theme-provider/ThemeProvider.tsx"],"sourcesContent":["import { type CSSProperties, type FC, useMemo } from 'react'\r\nimport { TooltipProvider } from '@components/overlay/tooltip'\r\nimport { ThemeContext } from '@components/theme-provider/ThemeProvider.context.ts'\r\nimport type { ThemeProviderProps } from '@components/theme-provider/types/ThemeProvider.props.ts'\r\nimport { useThemeProvider } from '@components/theme-provider/hooks/use-theme-provider/useThemeProvider.hook.ts'\r\nimport {\r\n    THEME_TRANSITION_ATTRIBUTE,\r\n    THEME_TRANSITION_DURATION_VAR,\r\n} from '@constants/theme'\r\n\r\n/**\r\n * `ThemeProvider` wraps a subtree and manages the active color-scheme.\r\n *\r\n * ### What it does\r\n * - Manages the active color scheme and runtime token overrides.\r\n * - Applies the theme to `<html>` by default so body-mounted portals inherit it.\r\n * - Applies the theme to its wrapper when `scope=\"subtree\"`.\r\n * - Temporarily forces all transitions to the configured theme duration.\r\n *\r\n * ### Controlled vs uncontrolled\r\n * - **Uncontrolled** (default): omit the `theme` prop.  The component manages\r\n *   its own state; use `defaultTheme` to set the initial value.\r\n * - **Controlled**: pass `theme` and handle `onThemeChange` in the parent.\r\n *\r\n * ### Placing in your app\r\n * Wrap your whole application to enable global theming:\r\n * ```tsx\r\n * <ThemeProvider defaultTheme=\"system\">\r\n *   <App />\r\n * </ThemeProvider>\r\n * ```\r\n * Or scope it to a single subtree:\r\n * ```tsx\r\n * <ThemeProvider scope=\"subtree\" theme=\"dark\" tokens={{ primary: 'oklch(0.70 0.16 185)' }}>\r\n *   <DarkWidget />\r\n * </ThemeProvider>\r\n * ```\r\n */\r\nconst ThemeProvider: FC<ThemeProviderProps> = ({\r\n    theme: controlledTheme,\r\n    defaultTheme = 'system',\r\n    scope = 'document',\r\n    themeTransitionDuration = 100,\r\n    onThemeChange,\r\n    tokens,\r\n    style,\r\n    children,\r\n    ...divProps\r\n}) => {\r\n    const { activeTheme, resolvedTheme, setTheme, tokenStyles, isTransitioning } =\r\n    useThemeProvider({\r\n        controlledTheme,\r\n        defaultTheme,\r\n        onThemeChange,\r\n        scope,\r\n        tokens,\r\n        themeTransitionDuration,\r\n    })\r\n    const transitionStyle = useMemo<CSSProperties>(\r\n        () =>\r\n            isTransitioning\r\n                ? ({\r\n                    [THEME_TRANSITION_DURATION_VAR]: `${Math.max(0, themeTransitionDuration)}ms`,\r\n                } as CSSProperties)\r\n                : {},\r\n        [isTransitioning, themeTransitionDuration],\r\n    )\r\n    const containerStyle = useMemo(\r\n        () => ({ ...tokenStyles, ...style, ...transitionStyle }),\r\n        [style, tokenStyles, transitionStyle],\r\n    )\r\n    const contextValue = useMemo(\r\n        () => ({ theme: activeTheme, resolvedTheme, setTheme }),\r\n        [activeTheme, resolvedTheme, setTheme],\r\n    )\r\n    const content = useMemo(\r\n        () => <TooltipProvider>{children}</TooltipProvider>,\r\n        [children],\r\n    )\r\n\r\n    return (\r\n        <ThemeContext.Provider value={contextValue}>\r\n            <div\r\n                data-theme={resolvedTheme}\r\n                {...(isTransitioning ? { [THEME_TRANSITION_ATTRIBUTE]: '' } : {})}\r\n                style={containerStyle}\r\n                {...divProps}\r\n            >\r\n                {content}\r\n            </div>\r\n        </ThemeContext.Provider>\r\n    )\r\n}\r\n\r\nThemeProvider.displayName = 'ThemeProvider'\r\n\r\nexport default ThemeProvider\r\n"],"names":["ThemeProvider","controlledTheme","defaultTheme","scope","themeTransitionDuration","onThemeChange","tokens","style","children","divProps","activeTheme","resolvedTheme","setTheme","tokenStyles","isTransitioning","useThemeProvider","transitionStyle","useMemo","THEME_TRANSITION_DURATION_VAR","containerStyle","contextValue","content","jsx","TooltipProvider","ThemeContext","THEME_TRANSITION_ATTRIBUTE"],"mappings":";;;;;;;;;AAsCA,MAAMA,IAAwC,CAAC;AAAA,EAC3C,OAAOC;AAAA,EACP,cAAAC,IAAe;AAAA,EACf,OAAAC,IAAQ;AAAA,EACR,yBAAAC,IAA0B;AAAA,EAC1B,eAAAC;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACP,MAAM;AACF,QAAM,EAAE,aAAAC,GAAa,eAAAC,GAAe,UAAAC,GAAU,aAAAC,GAAa,iBAAAC,EAAA,IAC3DC,EAAiB;AAAA,IACb,iBAAAd;AAAA,IACA,cAAAC;AAAA,IACA,eAAAG;AAAA,IACA,OAAAF;AAAA,IACA,QAAAG;AAAA,IACA,yBAAAF;AAAA,EAAA,CACH,GACKY,IAAkBC;AAAA,IACpB,MACIH,IACO;AAAA,MACC,CAACI,CAA6B,GAAG,GAAG,KAAK,IAAI,GAAGd,CAAuB,CAAC;AAAA,IAAA,IAE1E,CAAA;AAAA,IACV,CAACU,GAAiBV,CAAuB;AAAA,EAAA,GAEvCe,IAAiBF;AAAA,IACnB,OAAO,EAAE,GAAGJ,GAAa,GAAGN,GAAO,GAAGS,EAAA;AAAA,IACtC,CAACT,GAAOM,GAAaG,CAAe;AAAA,EAAA,GAElCI,IAAeH;AAAA,IACjB,OAAO,EAAE,OAAOP,GAAa,eAAAC,GAAe,UAAAC,EAAA;AAAA,IAC5C,CAACF,GAAaC,GAAeC,CAAQ;AAAA,EAAA,GAEnCS,IAAUJ;AAAA,IACZ,MAAM,gBAAAK,EAACC,GAAA,EAAiB,UAAAf,GAAS;AAAA,IACjC,CAACA,CAAQ;AAAA,EAAA;AAGb,SACI,gBAAAc,EAACE,EAAa,UAAb,EAAsB,OAAOJ,GAC1B,UAAA,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,cAAYX;AAAA,MACX,GAAIG,IAAkB,EAAE,CAACW,CAA0B,GAAG,GAAA,IAAO,CAAA;AAAA,MAC9D,OAAON;AAAA,MACN,GAAGV;AAAA,MAEH,UAAAY;AAAA,IAAA;AAAA,EAAA,GAET;AAER;AAEArB,EAAc,cAAc;"}

package/dist/components/theme-provider/hooks/use-theme-provider/helpers/use-theme-document-scope/useThemeDocumentScope.hook.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const A=require("react"),o=require("../../../../../../constants/theme.cjs"),s=typeof window>"u"?A.useEffect:A.useLayoutEffect,d=(u,c,m,i=!1,f=0)=>{s(()=>{if(u!=="document"||typeof document>"u")return;const e=document.documentElement,t=e.getAttribute("data-theme");return e.setAttribute("data-theme",c),()=>{t===null?e.removeAttribute("data-theme"):e.setAttribute("data-theme",t)}},[c,u]),s(()=>{if(u!=="document"||typeof document>"u")return;const e=document.documentElement,t=new Map;for(const[r,n]of Object.entries(m??{})){if(n===void 0)continue;const T=`--color-${r}`;t.set(T,e.style.getPropertyValue(T)),e.style.setProperty(T,n)}return()=>{for(const[r,n]of t)n?e.style.setProperty(r,n):e.style.removeProperty(r)}},[u,m]),s(()=>{if(u!=="document"||typeof document>"u")return;const e=document.documentElement,t=e.getAttribute(o.THEME_TRANSITION_ATTRIBUTE),r=e.style.getPropertyValue(o.THEME_TRANSITION_DURATION_VAR);return i&&(e.setAttribute(o.THEME_TRANSITION_ATTRIBUTE,""),e.style.setProperty(o.THEME_TRANSITION_DURATION_VAR,`${Math.max(0,f)}ms`)),()=>{t===null?e.removeAttribute(o.THEME_TRANSITION_ATTRIBUTE):e.setAttribute(o.THEME_TRANSITION_ATTRIBUTE,t),r?e.style.setProperty(o.THEME_TRANSITION_DURATION_VAR,r):e.style.removeProperty(o.THEME_TRANSITION_DURATION_VAR)}},[i,u,f])};exports.useThemeDocumentScope=d;
+//# sourceMappingURL=useThemeDocumentScope.hook.cjs.map

package/dist/components/theme-provider/hooks/use-theme-provider/helpers/use-theme-document-scope/useThemeDocumentScope.hook.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useThemeDocumentScope.hook.cjs","sources":["../../../../../../../src/components/theme-provider/hooks/use-theme-provider/helpers/use-theme-document-scope/useThemeDocumentScope.hook.ts"],"sourcesContent":["import { useEffect, useLayoutEffect } from 'react'\r\n\r\nimport type { ThemeProviderScope } from '@components/theme-provider/types/ThemeProvider.props.ts'\r\nimport type { ThemeTokens } from '@components/theme-provider/hooks/use-theme-provider/types'\r\nimport {\r\n    THEME_TRANSITION_ATTRIBUTE,\r\n    THEME_TRANSITION_DURATION_VAR,\r\n} from '@constants/theme'\r\n\r\nconst useIsomorphicLayoutEffect =\r\n  typeof window === 'undefined' ? useEffect : useLayoutEffect\r\n\r\n/**\r\n * Synchronizes document-scoped theme values with `<html>` for body-mounted portals.\r\n */\r\nexport const useThemeDocumentScope = (\r\n    scope: ThemeProviderScope,\r\n    resolvedTheme: string,\r\n    tokens?: ThemeTokens,\r\n    isTransitioning = false,\r\n    transitionDuration = 0,\r\n) => {\r\n    useIsomorphicLayoutEffect(() => {\r\n        if (scope !== 'document' || typeof document === 'undefined') {\r\n            return\r\n        }\r\n\r\n        const root = document.documentElement\r\n        const previousTheme = root.getAttribute('data-theme')\r\n        root.setAttribute('data-theme', resolvedTheme)\r\n\r\n        return () => {\r\n            if (previousTheme === null) {\r\n                root.removeAttribute('data-theme')\r\n            } else {\r\n                root.setAttribute('data-theme', previousTheme)\r\n            }\r\n        }\r\n    }, [resolvedTheme, scope])\r\n\r\n    useIsomorphicLayoutEffect(() => {\r\n        if (scope !== 'document' || typeof document === 'undefined') {\r\n            return\r\n        }\r\n\r\n        const root = document.documentElement\r\n        const previousTokens = new Map<string, string>()\r\n\r\n        for (const [key, value] of Object.entries(tokens ?? {})) {\r\n            if (value === undefined) {\r\n                continue\r\n            }\r\n            const property = `--color-${key}`\r\n            previousTokens.set(property, root.style.getPropertyValue(property))\r\n            root.style.setProperty(property, value)\r\n        }\r\n\r\n        return () => {\r\n            for (const [property, value] of previousTokens) {\r\n                if (value) {\r\n                    root.style.setProperty(property, value)\r\n                } else {\r\n                    root.style.removeProperty(property)\r\n                }\r\n            }\r\n        }\r\n    }, [scope, tokens])\r\n\r\n    useIsomorphicLayoutEffect(() => {\r\n        if (scope !== 'document' || typeof document === 'undefined') {\r\n            return\r\n        }\r\n\r\n        const root = document.documentElement\r\n        const previousAttribute = root.getAttribute(THEME_TRANSITION_ATTRIBUTE)\r\n        const previousDuration = root.style.getPropertyValue(\r\n            THEME_TRANSITION_DURATION_VAR,\r\n        )\r\n\r\n        if (isTransitioning) {\r\n            root.setAttribute(THEME_TRANSITION_ATTRIBUTE, '')\r\n            root.style.setProperty(\r\n                THEME_TRANSITION_DURATION_VAR,\r\n                `${Math.max(0, transitionDuration)}ms`,\r\n            )\r\n        }\r\n\r\n        return () => {\r\n            if (previousAttribute === null) {\r\n                root.removeAttribute(THEME_TRANSITION_ATTRIBUTE)\r\n            } else {\r\n                root.setAttribute(THEME_TRANSITION_ATTRIBUTE, previousAttribute)\r\n            }\r\n\r\n            if (previousDuration) {\r\n                root.style.setProperty(THEME_TRANSITION_DURATION_VAR, previousDuration)\r\n            } else {\r\n                root.style.removeProperty(THEME_TRANSITION_DURATION_VAR)\r\n            }\r\n        }\r\n    }, [isTransitioning, scope, transitionDuration])\r\n}\r\n"],"names":["useIsomorphicLayoutEffect","useEffect","useLayoutEffect","useThemeDocumentScope","scope","resolvedTheme","tokens","isTransitioning","transitionDuration","root","previousTheme","previousTokens","key","value","property","previousAttribute","THEME_TRANSITION_ATTRIBUTE","previousDuration","THEME_TRANSITION_DURATION_VAR"],"mappings":"4JASMA,EACJ,OAAO,OAAW,IAAcC,EAAAA,UAAYC,EAAAA,gBAKjCC,EAAwB,CACjCC,EACAC,EACAC,EACAC,EAAkB,GAClBC,EAAqB,IACpB,CACDR,EAA0B,IAAM,CAC5B,GAAII,IAAU,YAAc,OAAO,SAAa,IAC5C,OAGJ,MAAMK,EAAO,SAAS,gBAChBC,EAAgBD,EAAK,aAAa,YAAY,EACpD,OAAAA,EAAK,aAAa,aAAcJ,CAAa,EAEtC,IAAM,CACLK,IAAkB,KAClBD,EAAK,gBAAgB,YAAY,EAEjCA,EAAK,aAAa,aAAcC,CAAa,CAErD,CACJ,EAAG,CAACL,EAAeD,CAAK,CAAC,EAEzBJ,EAA0B,IAAM,CAC5B,GAAII,IAAU,YAAc,OAAO,SAAa,IAC5C,OAGJ,MAAMK,EAAO,SAAS,gBAChBE,MAAqB,IAE3B,SAAW,CAACC,EAAKC,CAAK,IAAK,OAAO,QAAQP,GAAU,CAAA,CAAE,EAAG,CACrD,GAAIO,IAAU,OACV,SAEJ,MAAMC,EAAW,WAAWF,CAAG,GAC/BD,EAAe,IAAIG,EAAUL,EAAK,MAAM,iBAAiBK,CAAQ,CAAC,EAClEL,EAAK,MAAM,YAAYK,EAAUD,CAAK,CAC1C,CAEA,MAAO,IAAM,CACT,SAAW,CAACC,EAAUD,CAAK,IAAKF,EACxBE,EACAJ,EAAK,MAAM,YAAYK,EAAUD,CAAK,EAEtCJ,EAAK,MAAM,eAAeK,CAAQ,CAG9C,CACJ,EAAG,CAACV,EAAOE,CAAM,CAAC,EAElBN,EAA0B,IAAM,CAC5B,GAAII,IAAU,YAAc,OAAO,SAAa,IAC5C,OAGJ,MAAMK,EAAO,SAAS,gBAChBM,EAAoBN,EAAK,aAAaO,4BAA0B,EAChEC,EAAmBR,EAAK,MAAM,iBAChCS,EAAAA,6BAAA,EAGJ,OAAIX,IACAE,EAAK,aAAaO,EAAAA,2BAA4B,EAAE,EAChDP,EAAK,MAAM,YACPS,EAAAA,8BACA,GAAG,KAAK,IAAI,EAAGV,CAAkB,CAAC,IAAA,GAInC,IAAM,CACLO,IAAsB,KACtBN,EAAK,gBAAgBO,4BAA0B,EAE/CP,EAAK,aAAaO,EAAAA,2BAA4BD,CAAiB,EAG/DE,EACAR,EAAK,MAAM,YAAYS,EAAAA,8BAA+BD,CAAgB,EAEtER,EAAK,MAAM,eAAeS,+BAA6B,CAE/D,CACJ,EAAG,CAACX,EAAiBH,EAAOI,CAAkB,CAAC,CACnD"}

package/dist/components/theme-provider/hooks/use-theme-provider/helpers/use-theme-document-scope/useThemeDocumentScope.hook.d.ts

@@ -0,0 +1,6 @@
+import { ThemeProviderScope } from '../../../../types/ThemeProvider.props.ts';
+import { ThemeTokens } from '../../types';
+/**
+ * Synchronizes document-scoped theme values with `<html>` for body-mounted portals.
+ */
+export declare const useThemeDocumentScope: (scope: ThemeProviderScope, resolvedTheme: string, tokens?: ThemeTokens, isTransitioning?: boolean, transitionDuration?: number) => void;

package/dist/components/theme-provider/hooks/use-theme-provider/helpers/use-theme-document-scope/useThemeDocumentScope.hook.js

@@ -0,0 +1,42 @@
+import { useEffect as l, useLayoutEffect as p } from "react";
+import { THEME_TRANSITION_ATTRIBUTE as n, THEME_TRANSITION_DURATION_VAR as s } from "../../../../../../constants/theme.js";
+const f = typeof window > "u" ? l : p, E = (r, c, i, d = !1, y = 0) => {
+  f(() => {
+    if (r !== "document" || typeof document > "u")
+      return;
+    const e = document.documentElement, t = e.getAttribute("data-theme");
+    return e.setAttribute("data-theme", c), () => {
+      t === null ? e.removeAttribute("data-theme") : e.setAttribute("data-theme", t);
+    };
+  }, [c, r]), f(() => {
+    if (r !== "document" || typeof document > "u")
+      return;
+    const e = document.documentElement, t = /* @__PURE__ */ new Map();
+    for (const [o, u] of Object.entries(i ?? {})) {
+      if (u === void 0)
+        continue;
+      const m = `--color-${o}`;
+      t.set(m, e.style.getPropertyValue(m)), e.style.setProperty(m, u);
+    }
+    return () => {
+      for (const [o, u] of t)
+        u ? e.style.setProperty(o, u) : e.style.removeProperty(o);
+    };
+  }, [r, i]), f(() => {
+    if (r !== "document" || typeof document > "u")
+      return;
+    const e = document.documentElement, t = e.getAttribute(n), o = e.style.getPropertyValue(
+      s
+    );
+    return d && (e.setAttribute(n, ""), e.style.setProperty(
+      s,
+      `${Math.max(0, y)}ms`
+    )), () => {
+      t === null ? e.removeAttribute(n) : e.setAttribute(n, t), o ? e.style.setProperty(s, o) : e.style.removeProperty(s);
+    };
+  }, [d, r, y]);
+};
+export {
+  E as useThemeDocumentScope
+};
+//# sourceMappingURL=useThemeDocumentScope.hook.js.map

package/dist/components/theme-provider/hooks/use-theme-provider/helpers/use-theme-document-scope/useThemeDocumentScope.hook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useThemeDocumentScope.hook.js","sources":["../../../../../../../src/components/theme-provider/hooks/use-theme-provider/helpers/use-theme-document-scope/useThemeDocumentScope.hook.ts"],"sourcesContent":["import { useEffect, useLayoutEffect } from 'react'\r\n\r\nimport type { ThemeProviderScope } from '@components/theme-provider/types/ThemeProvider.props.ts'\r\nimport type { ThemeTokens } from '@components/theme-provider/hooks/use-theme-provider/types'\r\nimport {\r\n    THEME_TRANSITION_ATTRIBUTE,\r\n    THEME_TRANSITION_DURATION_VAR,\r\n} from '@constants/theme'\r\n\r\nconst useIsomorphicLayoutEffect =\r\n  typeof window === 'undefined' ? useEffect : useLayoutEffect\r\n\r\n/**\r\n * Synchronizes document-scoped theme values with `<html>` for body-mounted portals.\r\n */\r\nexport const useThemeDocumentScope = (\r\n    scope: ThemeProviderScope,\r\n    resolvedTheme: string,\r\n    tokens?: ThemeTokens,\r\n    isTransitioning = false,\r\n    transitionDuration = 0,\r\n) => {\r\n    useIsomorphicLayoutEffect(() => {\r\n        if (scope !== 'document' || typeof document === 'undefined') {\r\n            return\r\n        }\r\n\r\n        const root = document.documentElement\r\n        const previousTheme = root.getAttribute('data-theme')\r\n        root.setAttribute('data-theme', resolvedTheme)\r\n\r\n        return () => {\r\n            if (previousTheme === null) {\r\n                root.removeAttribute('data-theme')\r\n            } else {\r\n                root.setAttribute('data-theme', previousTheme)\r\n            }\r\n        }\r\n    }, [resolvedTheme, scope])\r\n\r\n    useIsomorphicLayoutEffect(() => {\r\n        if (scope !== 'document' || typeof document === 'undefined') {\r\n            return\r\n        }\r\n\r\n        const root = document.documentElement\r\n        const previousTokens = new Map<string, string>()\r\n\r\n        for (const [key, value] of Object.entries(tokens ?? {})) {\r\n            if (value === undefined) {\r\n                continue\r\n            }\r\n            const property = `--color-${key}`\r\n            previousTokens.set(property, root.style.getPropertyValue(property))\r\n            root.style.setProperty(property, value)\r\n        }\r\n\r\n        return () => {\r\n            for (const [property, value] of previousTokens) {\r\n                if (value) {\r\n                    root.style.setProperty(property, value)\r\n                } else {\r\n                    root.style.removeProperty(property)\r\n                }\r\n            }\r\n        }\r\n    }, [scope, tokens])\r\n\r\n    useIsomorphicLayoutEffect(() => {\r\n        if (scope !== 'document' || typeof document === 'undefined') {\r\n            return\r\n        }\r\n\r\n        const root = document.documentElement\r\n        const previousAttribute = root.getAttribute(THEME_TRANSITION_ATTRIBUTE)\r\n        const previousDuration = root.style.getPropertyValue(\r\n            THEME_TRANSITION_DURATION_VAR,\r\n        )\r\n\r\n        if (isTransitioning) {\r\n            root.setAttribute(THEME_TRANSITION_ATTRIBUTE, '')\r\n            root.style.setProperty(\r\n                THEME_TRANSITION_DURATION_VAR,\r\n                `${Math.max(0, transitionDuration)}ms`,\r\n            )\r\n        }\r\n\r\n        return () => {\r\n            if (previousAttribute === null) {\r\n                root.removeAttribute(THEME_TRANSITION_ATTRIBUTE)\r\n            } else {\r\n                root.setAttribute(THEME_TRANSITION_ATTRIBUTE, previousAttribute)\r\n            }\r\n\r\n            if (previousDuration) {\r\n                root.style.setProperty(THEME_TRANSITION_DURATION_VAR, previousDuration)\r\n            } else {\r\n                root.style.removeProperty(THEME_TRANSITION_DURATION_VAR)\r\n            }\r\n        }\r\n    }, [isTransitioning, scope, transitionDuration])\r\n}\r\n"],"names":["useIsomorphicLayoutEffect","useEffect","useLayoutEffect","useThemeDocumentScope","scope","resolvedTheme","tokens","isTransitioning","transitionDuration","root","previousTheme","previousTokens","key","value","property","previousAttribute","THEME_TRANSITION_ATTRIBUTE","previousDuration","THEME_TRANSITION_DURATION_VAR"],"mappings":";;AASA,MAAMA,IACJ,OAAO,SAAW,MAAcC,IAAYC,GAKjCC,IAAwB,CACjCC,GACAC,GACAC,GACAC,IAAkB,IAClBC,IAAqB,MACpB;AACD,EAAAR,EAA0B,MAAM;AAC5B,QAAII,MAAU,cAAc,OAAO,WAAa;AAC5C;AAGJ,UAAMK,IAAO,SAAS,iBAChBC,IAAgBD,EAAK,aAAa,YAAY;AACpD,WAAAA,EAAK,aAAa,cAAcJ,CAAa,GAEtC,MAAM;AACT,MAAIK,MAAkB,OAClBD,EAAK,gBAAgB,YAAY,IAEjCA,EAAK,aAAa,cAAcC,CAAa;AAAA,IAErD;AAAA,EACJ,GAAG,CAACL,GAAeD,CAAK,CAAC,GAEzBJ,EAA0B,MAAM;AAC5B,QAAII,MAAU,cAAc,OAAO,WAAa;AAC5C;AAGJ,UAAMK,IAAO,SAAS,iBAChBE,wBAAqB,IAAA;AAE3B,eAAW,CAACC,GAAKC,CAAK,KAAK,OAAO,QAAQP,KAAU,CAAA,CAAE,GAAG;AACrD,UAAIO,MAAU;AACV;AAEJ,YAAMC,IAAW,WAAWF,CAAG;AAC/B,MAAAD,EAAe,IAAIG,GAAUL,EAAK,MAAM,iBAAiBK,CAAQ,CAAC,GAClEL,EAAK,MAAM,YAAYK,GAAUD,CAAK;AAAA,IAC1C;AAEA,WAAO,MAAM;AACT,iBAAW,CAACC,GAAUD,CAAK,KAAKF;AAC5B,QAAIE,IACAJ,EAAK,MAAM,YAAYK,GAAUD,CAAK,IAEtCJ,EAAK,MAAM,eAAeK,CAAQ;AAAA,IAG9C;AAAA,EACJ,GAAG,CAACV,GAAOE,CAAM,CAAC,GAElBN,EAA0B,MAAM;AAC5B,QAAII,MAAU,cAAc,OAAO,WAAa;AAC5C;AAGJ,UAAMK,IAAO,SAAS,iBAChBM,IAAoBN,EAAK,aAAaO,CAA0B,GAChEC,IAAmBR,EAAK,MAAM;AAAA,MAChCS;AAAA,IAAA;AAGJ,WAAIX,MACAE,EAAK,aAAaO,GAA4B,EAAE,GAChDP,EAAK,MAAM;AAAA,MACPS;AAAA,MACA,GAAG,KAAK,IAAI,GAAGV,CAAkB,CAAC;AAAA,IAAA,IAInC,MAAM;AACT,MAAIO,MAAsB,OACtBN,EAAK,gBAAgBO,CAA0B,IAE/CP,EAAK,aAAaO,GAA4BD,CAAiB,GAG/DE,IACAR,EAAK,MAAM,YAAYS,GAA+BD,CAAgB,IAEtER,EAAK,MAAM,eAAeS,CAA6B;AAAA,IAE/D;AAAA,EACJ,GAAG,CAACX,GAAiBH,GAAOI,CAAkB,CAAC;AACnD;"}

package/dist/components/theme-provider/hooks/use-theme-provider/helpers/use-theme-state/types/index.d.ts

@@ -0,0 +1,6 @@
+import { ThemeValue } from '../../../../../types/ThemeProvider.props.ts';
+export type UseThemeStateOptions = {
+    controlledTheme?: ThemeValue;
+    defaultTheme: ThemeValue;
+    onThemeChange?: (theme: ThemeValue) => void;
+};

package/dist/components/theme-provider/hooks/use-theme-provider/helpers/use-theme-state/useThemeState.hook.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),d=require("../../../../utils/getSystemTheme.utils.cjs"),T=require("../../../../utils/resolveTheme.utils.cjs"),v=({controlledTheme:s,defaultTheme:c,onThemeChange:r})=>{const[m,i]=t.useState(c),a=s??m,[o,u]=t.useState(d.getSystemTheme);t.useEffect(()=>{const e=window.matchMedia("(prefers-color-scheme: dark)"),n=l=>{u(l.matches?"dark":"light")};return e.addEventListener("change",n),()=>e.removeEventListener("change",n)},[]);const h=t.useCallback(e=>{s===void 0&&i(e),r?.(e)},[s,r]);return{activeTheme:a,resolvedTheme:T.resolveTheme(a,o),setTheme:h}};exports.useThemeState=v;
+//# sourceMappingURL=useThemeState.hook.cjs.map

package/dist/components/theme-provider/hooks/use-theme-provider/helpers/use-theme-state/useThemeState.hook.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useThemeState.hook.cjs","sources":["../../../../../../../src/components/theme-provider/hooks/use-theme-provider/helpers/use-theme-state/useThemeState.hook.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react'\r\n\r\nimport type { ThemeValue } from '@components/theme-provider/types/ThemeProvider.props.ts'\r\nimport { getSystemTheme } from '@components/theme-provider/utils/getSystemTheme.utils.ts'\r\nimport { resolveTheme } from '@components/theme-provider/utils/resolveTheme.utils.ts'\r\nimport type {\r\n    UseThemeStateOptions\r\n} from '@components/theme-provider/hooks/use-theme-provider/helpers/use-theme-state/types'\r\n\r\n/**\r\n * Resolves the controlled or uncontrolled mode and tracks the system preference.\r\n */\r\nexport const useThemeState = ({\r\n    controlledTheme,\r\n    defaultTheme,\r\n    onThemeChange,\r\n}: UseThemeStateOptions) => {\r\n    const [internalTheme, setInternalTheme] = useState<ThemeValue>(defaultTheme)\r\n    const activeTheme = controlledTheme ?? internalTheme\r\n    const [systemTheme, setSystemTheme] = useState<'light' | 'dark'>(getSystemTheme)\r\n\r\n    useEffect(() => {\r\n        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')\r\n        const handleChange = (event: MediaQueryListEvent) => {\r\n            setSystemTheme(event.matches ? 'dark' : 'light')\r\n        }\r\n\r\n        mediaQuery.addEventListener('change', handleChange)\r\n        return () => mediaQuery.removeEventListener('change', handleChange)\r\n    }, [])\r\n\r\n    const setTheme = useCallback((nextTheme: ThemeValue) => {\r\n        if (controlledTheme === undefined) {\r\n            setInternalTheme(nextTheme)\r\n        }\r\n        onThemeChange?.(nextTheme)\r\n    }, [controlledTheme, onThemeChange])\r\n\r\n    return {\r\n        activeTheme,\r\n        resolvedTheme: resolveTheme(activeTheme, systemTheme),\r\n        setTheme,\r\n    }\r\n}\r\n"],"names":["useThemeState","controlledTheme","defaultTheme","onThemeChange","internalTheme","setInternalTheme","useState","activeTheme","systemTheme","setSystemTheme","getSystemTheme","useEffect","mediaQuery","handleChange","event","setTheme","useCallback","nextTheme","resolveTheme"],"mappings":"uNAYaA,EAAgB,CAAC,CAC1B,gBAAAC,EACA,aAAAC,EACA,cAAAC,CACJ,IAA4B,CACxB,KAAM,CAACC,EAAeC,CAAgB,EAAIC,EAAAA,SAAqBJ,CAAY,EACrEK,EAAcN,GAAmBG,EACjC,CAACI,EAAaC,CAAc,EAAIH,EAAAA,SAA2BI,EAAAA,cAAc,EAE/EC,EAAAA,UAAU,IAAM,CACZ,MAAMC,EAAa,OAAO,WAAW,8BAA8B,EAC7DC,EAAgBC,GAA+B,CACjDL,EAAeK,EAAM,QAAU,OAAS,OAAO,CACnD,EAEA,OAAAF,EAAW,iBAAiB,SAAUC,CAAY,EAC3C,IAAMD,EAAW,oBAAoB,SAAUC,CAAY,CACtE,EAAG,CAAA,CAAE,EAEL,MAAME,EAAWC,cAAaC,GAA0B,CAChDhB,IAAoB,QACpBI,EAAiBY,CAAS,EAE9Bd,IAAgBc,CAAS,CAC7B,EAAG,CAAChB,EAAiBE,CAAa,CAAC,EAEnC,MAAO,CACH,YAAAI,EACA,cAAeW,EAAAA,aAAaX,EAAaC,CAAW,EACpD,SAAAO,CAAA,CAER"}

package/dist/components/theme-provider/hooks/use-theme-provider/helpers/use-theme-state/useThemeState.hook.d.ts

@@ -0,0 +1,10 @@
+import { ThemeValue } from '../../../../types/ThemeProvider.props.ts';
+import { UseThemeStateOptions } from './types';
+/**
+ * Resolves the controlled or uncontrolled mode and tracks the system preference.
+ */
+export declare const useThemeState: ({ controlledTheme, defaultTheme, onThemeChange, }: UseThemeStateOptions) => {
+    activeTheme: string;
+    resolvedTheme: string;
+    setTheme: (nextTheme: ThemeValue) => void;
+};

package/dist/components/theme-provider/hooks/use-theme-provider/helpers/use-theme-state/useThemeState.hook.js

@@ -0,0 +1,28 @@
+import { useState as a, useEffect as u, useCallback as v } from "react";
+import { getSystemTheme as T } from "../../../../utils/getSystemTheme.utils.js";
+import { resolveTheme as l } from "../../../../utils/resolveTheme.utils.js";
+const S = ({
+  controlledTheme: t,
+  defaultTheme: n,
+  onThemeChange: s
+}) => {
+  const [o, c] = a(n), r = t ?? o, [h, i] = a(T);
+  u(() => {
+    const e = window.matchMedia("(prefers-color-scheme: dark)"), m = (f) => {
+      i(f.matches ? "dark" : "light");
+    };
+    return e.addEventListener("change", m), () => e.removeEventListener("change", m);
+  }, []);
+  const d = v((e) => {
+    t === void 0 && c(e), s?.(e);
+  }, [t, s]);
+  return {
+    activeTheme: r,
+    resolvedTheme: l(r, h),
+    setTheme: d
+  };
+};
+export {
+  S as useThemeState
+};
+//# sourceMappingURL=useThemeState.hook.js.map

package/dist/components/theme-provider/hooks/use-theme-provider/helpers/use-theme-state/useThemeState.hook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useThemeState.hook.js","sources":["../../../../../../../src/components/theme-provider/hooks/use-theme-provider/helpers/use-theme-state/useThemeState.hook.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react'\r\n\r\nimport type { ThemeValue } from '@components/theme-provider/types/ThemeProvider.props.ts'\r\nimport { getSystemTheme } from '@components/theme-provider/utils/getSystemTheme.utils.ts'\r\nimport { resolveTheme } from '@components/theme-provider/utils/resolveTheme.utils.ts'\r\nimport type {\r\n    UseThemeStateOptions\r\n} from '@components/theme-provider/hooks/use-theme-provider/helpers/use-theme-state/types'\r\n\r\n/**\r\n * Resolves the controlled or uncontrolled mode and tracks the system preference.\r\n */\r\nexport const useThemeState = ({\r\n    controlledTheme,\r\n    defaultTheme,\r\n    onThemeChange,\r\n}: UseThemeStateOptions) => {\r\n    const [internalTheme, setInternalTheme] = useState<ThemeValue>(defaultTheme)\r\n    const activeTheme = controlledTheme ?? internalTheme\r\n    const [systemTheme, setSystemTheme] = useState<'light' | 'dark'>(getSystemTheme)\r\n\r\n    useEffect(() => {\r\n        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')\r\n        const handleChange = (event: MediaQueryListEvent) => {\r\n            setSystemTheme(event.matches ? 'dark' : 'light')\r\n        }\r\n\r\n        mediaQuery.addEventListener('change', handleChange)\r\n        return () => mediaQuery.removeEventListener('change', handleChange)\r\n    }, [])\r\n\r\n    const setTheme = useCallback((nextTheme: ThemeValue) => {\r\n        if (controlledTheme === undefined) {\r\n            setInternalTheme(nextTheme)\r\n        }\r\n        onThemeChange?.(nextTheme)\r\n    }, [controlledTheme, onThemeChange])\r\n\r\n    return {\r\n        activeTheme,\r\n        resolvedTheme: resolveTheme(activeTheme, systemTheme),\r\n        setTheme,\r\n    }\r\n}\r\n"],"names":["useThemeState","controlledTheme","defaultTheme","onThemeChange","internalTheme","setInternalTheme","useState","activeTheme","systemTheme","setSystemTheme","getSystemTheme","useEffect","mediaQuery","handleChange","event","setTheme","useCallback","nextTheme","resolveTheme"],"mappings":";;;AAYO,MAAMA,IAAgB,CAAC;AAAA,EAC1B,iBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,eAAAC;AACJ,MAA4B;AACxB,QAAM,CAACC,GAAeC,CAAgB,IAAIC,EAAqBJ,CAAY,GACrEK,IAAcN,KAAmBG,GACjC,CAACI,GAAaC,CAAc,IAAIH,EAA2BI,CAAc;AAE/E,EAAAC,EAAU,MAAM;AACZ,UAAMC,IAAa,OAAO,WAAW,8BAA8B,GAC7DC,IAAe,CAACC,MAA+B;AACjD,MAAAL,EAAeK,EAAM,UAAU,SAAS,OAAO;AAAA,IACnD;AAEA,WAAAF,EAAW,iBAAiB,UAAUC,CAAY,GAC3C,MAAMD,EAAW,oBAAoB,UAAUC,CAAY;AAAA,EACtE,GAAG,CAAA,CAAE;AAEL,QAAME,IAAWC,EAAY,CAACC,MAA0B;AACpD,IAAIhB,MAAoB,UACpBI,EAAiBY,CAAS,GAE9Bd,IAAgBc,CAAS;AAAA,EAC7B,GAAG,CAAChB,GAAiBE,CAAa,CAAC;AAEnC,SAAO;AAAA,IACH,aAAAI;AAAA,IACA,eAAeW,EAAaX,GAAaC,CAAW;AAAA,IACpD,UAAAO;AAAA,EAAA;AAER;"}

package/dist/components/theme-provider/hooks/use-theme-provider/helpers/use-theme-token-styles/useThemeTokenStyles.hook.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react"),c=e=>u.useMemo(()=>e?Object.entries(e).reduce((r,[o,t])=>(t!==void 0&&(r[`--color-${o}`]=t),r),{}):{},[e]);exports.useThemeTokenStyles=c;
+//# sourceMappingURL=useThemeTokenStyles.hook.cjs.map

package/dist/components/theme-provider/hooks/use-theme-provider/helpers/use-theme-token-styles/useThemeTokenStyles.hook.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useThemeTokenStyles.hook.cjs","sources":["../../../../../../../src/components/theme-provider/hooks/use-theme-provider/helpers/use-theme-token-styles/useThemeTokenStyles.hook.ts"],"sourcesContent":["import { useMemo, type CSSProperties } from 'react'\r\nimport type { ThemeTokens } from '@components/theme-provider/hooks/use-theme-provider/types'\r\n\r\n/**\r\n * Converts semantic color tokens into inline CSS custom properties.\r\n */\r\nexport const useThemeTokenStyles = (tokens?: ThemeTokens) => useMemo<CSSProperties>(() => {\r\n    if (!tokens) {\r\n        return {}\r\n    }\r\n\r\n    return Object.entries(tokens).reduce<Record<string, string>>(\r\n        (styles, [key, value]) => {\r\n            if (value !== undefined) {\r\n                styles[`--color-${key}`] = value\r\n            }\r\n            return styles\r\n        },\r\n        {},\r\n    ) as CSSProperties\r\n}, [tokens])\r\n"],"names":["useThemeTokenStyles","tokens","useMemo","styles","key","value"],"mappings":"yGAMaA,EAAuBC,GAAyBC,EAAAA,QAAuB,IAC3ED,EAIE,OAAO,QAAQA,CAAM,EAAE,OAC1B,CAACE,EAAQ,CAACC,EAAKC,CAAK,KACZA,IAAU,SACVF,EAAO,WAAWC,CAAG,EAAE,EAAIC,GAExBF,GAEX,CAAA,CAAC,EAVM,CAAA,EAYZ,CAACF,CAAM,CAAC"}

package/dist/components/theme-provider/hooks/use-theme-provider/helpers/use-theme-token-styles/useThemeTokenStyles.hook.d.ts

@@ -0,0 +1,6 @@
+import { CSSProperties } from 'react';
+import { ThemeTokens } from '../../types';
+/**
+ * Converts semantic color tokens into inline CSS custom properties.
+ */
+export declare const useThemeTokenStyles: (tokens?: ThemeTokens) => CSSProperties;

package/dist/components/theme-provider/hooks/use-theme-provider/helpers/use-theme-token-styles/useThemeTokenStyles.hook.js

@@ -0,0 +1,9 @@
+import { useMemo as i } from "react";
+const c = (e) => i(() => e ? Object.entries(e).reduce(
+  (r, [t, o]) => (o !== void 0 && (r[`--color-${t}`] = o), r),
+  {}
+) : {}, [e]);
+export {
+  c as useThemeTokenStyles
+};
+//# sourceMappingURL=useThemeTokenStyles.hook.js.map