@choco-vanille/ui 1.1.2 → 1.3.0

package/dist/components/overlay/tooltip/hooks/use-tooltip/useTooltip.hook.d.ts

@@ -6,4 +6,4 @@ import { UseTooltipOptions, UseTooltipReturn } from './types';
  * When `disabled` becomes true the internal state is reset, so the tooltip
  * never appears stale when `disabled` goes back to false.
  */
-export declare const useTooltip: ({ disabled, open, onOpenChange }: UseTooltipOptions) => UseTooltipReturn;
+export declare const useTooltip: ({ disabled, open, defaultOpen, onOpenChange }: UseTooltipOptions) => UseTooltipReturn;

package/dist/components/overlay/tooltip/hooks/use-tooltip/useTooltip.hook.js

@@ -1,18 +1,18 @@
-import { useState as a, useEffect as l, useCallback as r } from "react";
-const i = ({ disabled: e, open: t, onOpenChange: f }) => {
-  const [c, n] = a(!1);
-  l(() => {
+import { useState as l, useEffect as r, useCallback as p } from "react";
+const v = ({ disabled: e, open: t, defaultOpen: c, onOpenChange: f }) => {
+  const [o, n] = l(c ?? !1);
+  r(() => {
     e && n(!1);
   }, [e]);
-  const o = r(
+  const a = p(
     (s) => {
       n(s), f?.(s);
     },
     [f]
   );
-  return { effectiveOpen: e ? !1 : t !== void 0 ? t : c, handleOpenChange: o };
+  return { effectiveOpen: e ? !1 : t !== void 0 ? t : o, handleOpenChange: a };
 };
 export {
-  i as useTooltip
+  v as useTooltip
 };
 //# sourceMappingURL=useTooltip.hook.js.map

package/dist/components/overlay/tooltip/hooks/use-tooltip/useTooltip.hook.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTooltip.hook.js","sources":["../../../../../../src/components/overlay/tooltip/hooks/use-tooltip/useTooltip.hook.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react'\r\nimport type { UseTooltipOptions, UseTooltipReturn } from '@components/overlay/tooltip/hooks/use-tooltip/types'\r\n\r\n/**\r\n * Manages tooltip open state so that `BaseTooltip.Root` stays always controlled,\r\n * avoiding the controlled→uncontrolled transition bug in Base UI when `disabled` toggles.\r\n *\r\n * When `disabled` becomes true the internal state is reset, so the tooltip\r\n * never appears stale when `disabled` goes back to false.\r\n */\r\nexport const useTooltip = ({ disabled, open, onOpenChange }: UseTooltipOptions): UseTooltipReturn => {\r\n    const [internalOpen, setInternalOpen] = useState(false)\r\n\r\n    useEffect(() => {\r\n        if (disabled) {setInternalOpen(false)}\r\n    }, [disabled])\r\n\r\n    const handleOpenChange = useCallback(\r\n        (isOpen: boolean) => {\r\n            setInternalOpen(isOpen)\r\n            onOpenChange?.(isOpen)\r\n        },\r\n        [onOpenChange],\r\n    )\r\n\r\n    const effectiveOpen = disabled ? false : (open !== undefined ? open : internalOpen)\r\n\r\n    return { effectiveOpen, handleOpenChange }\r\n}\r\n"],"names":["useTooltip","disabled","open","onOpenChange","internalOpen","setInternalOpen","useState","useEffect","handleOpenChange","useCallback","isOpen"],"mappings":";AAUO,MAAMA,IAAa,CAAC,EAAE,UAAAC,GAAU,MAAAC,GAAM,cAAAC,QAAwD;AACjG,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAAS,EAAK;AAEtD,EAAAC,EAAU,MAAM;AACZ,IAAIN,KAAWI,EAAgB,EAAK;AAAA,EACxC,GAAG,CAACJ,CAAQ,CAAC;AAEb,QAAMO,IAAmBC;AAAA,IACrB,CAACC,MAAoB;AACjB,MAAAL,EAAgBK,CAAM,GACtBP,IAAeO,CAAM;AAAA,IACzB;AAAA,IACA,CAACP,CAAY;AAAA,EAAA;AAKjB,SAAO,EAAE,eAFaF,IAAW,KAASC,MAAS,SAAYA,IAAOE,GAE9C,kBAAAI,EAAA;AAC5B;"}
+{"version":3,"file":"useTooltip.hook.js","sources":["../../../../../../src/components/overlay/tooltip/hooks/use-tooltip/useTooltip.hook.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react'\r\nimport type { UseTooltipOptions, UseTooltipReturn } from '@components/overlay/tooltip/hooks/use-tooltip/types'\r\n\r\n/**\r\n * Manages tooltip open state so that `BaseTooltip.Root` stays always controlled,\r\n * avoiding the controlled→uncontrolled transition bug in Base UI when `disabled` toggles.\r\n *\r\n * When `disabled` becomes true the internal state is reset, so the tooltip\r\n * never appears stale when `disabled` goes back to false.\r\n */\r\nexport const useTooltip = ({ disabled, open, defaultOpen, onOpenChange }: UseTooltipOptions): UseTooltipReturn => {\r\n    const [internalOpen, setInternalOpen] = useState(defaultOpen ?? false)\r\n\r\n    useEffect(() => {\r\n        if (disabled) {setInternalOpen(false)}\r\n    }, [disabled])\r\n\r\n    const handleOpenChange = useCallback(\r\n        (isOpen: boolean) => {\r\n            setInternalOpen(isOpen)\r\n            onOpenChange?.(isOpen)\r\n        },\r\n        [onOpenChange],\r\n    )\r\n\r\n    const effectiveOpen = disabled ? false : (open !== undefined ? open : internalOpen)\r\n\r\n    return { effectiveOpen, handleOpenChange }\r\n}\r\n"],"names":["useTooltip","disabled","open","defaultOpen","onOpenChange","internalOpen","setInternalOpen","useState","useEffect","handleOpenChange","useCallback","isOpen"],"mappings":";AAUO,MAAMA,IAAa,CAAC,EAAE,UAAAC,GAAU,MAAAC,GAAM,aAAAC,GAAa,cAAAC,QAAwD;AAC9G,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAASJ,KAAe,EAAK;AAErE,EAAAK,EAAU,MAAM;AACZ,IAAIP,KAAWK,EAAgB,EAAK;AAAA,EACxC,GAAG,CAACL,CAAQ,CAAC;AAEb,QAAMQ,IAAmBC;AAAA,IACrB,CAACC,MAAoB;AACjB,MAAAL,EAAgBK,CAAM,GACtBP,IAAeO,CAAM;AAAA,IACzB;AAAA,IACA,CAACP,CAAY;AAAA,EAAA;AAKjB,SAAO,EAAE,eAFaH,IAAW,KAASC,MAAS,SAAYA,IAAOG,GAE9C,kBAAAI,EAAA;AAC5B;"}

package/dist/components/overlay/tooltip/styles/Tooltip.css.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css                                              */;/* empty css                             */var e={content:"_1ciafjz2"};exports.TOOLTIP_STYLES=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css                                              */;/* empty css                             */var e={content:"_1ciafjz2",arrow:"_1ciafjz3"};exports.TOOLTIP_STYLES=e;
 //# sourceMappingURL=Tooltip.css.cjs.map

package/dist/components/overlay/tooltip/styles/Tooltip.css.d.ts

@@ -1,3 +1,4 @@
 export declare const TOOLTIP_STYLES: {
     content: string;
+    arrow: string;
 };

package/dist/components/overlay/tooltip/styles/Tooltip.css.js

@@ -1,7 +1,7 @@
 /* empty css                                            */
 /* empty css                           */
-var r = { content: "_1ciafjz2" };
+var t = { content: "_1ciafjz2", arrow: "_1ciafjz3" };
 export {
-  r as TOOLTIP_STYLES
+  t as TOOLTIP_STYLES
 };
 //# sourceMappingURL=Tooltip.css.js.map

package/dist/components/overlay/tooltip/types/Tooltip.props.d.ts

@@ -19,10 +19,18 @@ export type TooltipProps = {
     delayDuration?: number;
     /** Whether the tooltip is disabled. */
     disabled?: boolean;
+    /** Whether the tooltip opens when its trigger receives focus. Defaults to `true`. */
+    openOnFocus?: boolean;
+    /** Whether to render the tooltip arrow. @default false */
+    arrow?: boolean;
+    /** Whether clicking the trigger closes the tooltip. @default true */
+    closeOnClick?: boolean;
     /** Additional class names to apply to the tooltip content. */
     className?: string;
     /** Controls the open state when used as a controlled component. */
     open?: boolean;
+    /** Initial open state when used as an uncontrolled component. */
+    defaultOpen?: boolean;
     /** Callback called when the open state changes. */
     onOpenChange?: (open: boolean) => void;
 };

package/dist/components/surfaces/accordion/components/accordion-content/types/AccordionContent.props.d.ts

@@ -1,2 +1,3 @@
 import { Accordion } from '@base-ui/react/accordion';
-export type AccordionContentProps = Accordion.Panel.Props;
+import { DataAttributes } from '../../../../../../types/DataAttributes.ts';
+export type AccordionContentProps = Accordion.Panel.Props & DataAttributes;

package/dist/components/surfaces/accordion/components/accordion-trigger/types/AccordionTrigger.props.d.ts

@@ -1,4 +1,5 @@
 import { Accordion } from '@base-ui/react/accordion';
+import { DataAttributes } from '../../../../../../types/DataAttributes.ts';
 export type AccordionTriggerProps = Omit<Accordion.Trigger.Props, 'children' | 'render'> & {
     /** The text content rendered inside the trigger via the Typography component. */
     label?: string;
@@ -8,4 +9,4 @@ export type AccordionTriggerProps = Omit<Accordion.Trigger.Props, 'children' | '
     endIcon?: string;
     /** Custom trigger content. Takes precedence over `label`. */
     children?: Accordion.Trigger.Props['children'];
-};
+} & DataAttributes;

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const q=require("react/jsx-runtime"),C=require("react"),l=require("../../layout/box/Box.cjs");require("../../layout/box/styles/Box.css.cjs");const m=require("./components/card-body/CardBody.cjs"),y=require("./components/card-footer/CardFooter.cjs"),g=require("./components/card-header/CardHeader.cjs"),e=C.memo(({as:r="div",backgroundColor:o="card",color:d="cardForeground",borderRadius:t="lg",borderWidth:a="1px",borderColor:i="border",boxShadow:n="none",overflow:c="hidden",className:s,...u})=>q.jsx(l,{as:r,backgroundColor:o,color:d,borderRadius:t,borderWidth:a,borderColor:i,boxShadow:n,overflow:c,className:s,...u}));e.displayName="Card";e.Header=g;e.Body=m;e.Footer=y;exports.Card=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const C=require("react/jsx-runtime"),l=require("react"),m=require("../../layout/box/Box.cjs");require("../../layout/box/styles/Box.css.cjs");const y=require("./components/card-body/CardBody.cjs"),g=require("./components/card-footer/CardFooter.cjs"),x=require("./components/card-header/CardHeader.cjs"),S=require("./styles/Card.css.cjs"),b=require("../../../utils/cn.cjs"),r=l.memo(({as:e="div",backgroundColor:o="card",color:d="cardForeground",borderRadius:t="lg",borderWidth:s="1px",borderColor:a="border",borderStyle:c="solid",boxShadow:n="none",overflow:i="hidden",className:u,...q})=>C.jsx(m,{as:e,backgroundColor:o,color:d,borderRadius:t,borderWidth:s,borderColor:a,borderStyle:c,boxShadow:n,overflow:i,className:b.cn(S.CARD_STYLES.root,u),...q}));r.displayName="Card";r.Header=x;r.Body=y;r.Footer=g;exports.Card=r;
 //# sourceMappingURL=Card.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Card.cjs","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":"8XA6BMA,EAAOC,EAAAA,KAAgB,CAAC,CAC1B,GAAAC,EAAK,MACL,gBAAAC,EAAkB,OAClB,MAAAC,EAAQ,iBACR,aAAAC,EAAe,KACf,YAAAC,EAAc,MACd,YAAAC,EAAc,SACd,UAAAC,EAAY,OACZ,SAAAC,EAAW,SACX,UAAAC,EACA,GAAGC,CACP,IACIC,EAAAA,IAACC,EAAA,CACG,GAAAX,EACA,gBAAAC,EACA,MAAAC,EACA,aAAAC,EACA,YAAAC,EACA,YAAAC,EACA,UAAAC,EACA,SAAAC,EACA,UAAAC,EACC,GAAGC,CAAA,CACR,CACH,EAEDX,EAAK,YAAc,OACnBA,EAAK,OAASc,EACdd,EAAK,KAAOe,EACZf,EAAK,OAASgB"}
+{"version":3,"file":"Card.cjs","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":"ocA+BMA,EAAOC,EAAAA,KAAgB,CAAC,CAC1B,GAAAC,EAAK,MACL,gBAAAC,EAAkB,OAClB,MAAAC,EAAQ,iBACR,aAAAC,EAAe,KACf,YAAAC,EAAc,MACd,YAAAC,EAAc,SACd,YAAAC,EAAc,QACd,UAAAC,EAAY,OACZ,SAAAC,EAAW,SACX,UAAAC,EACA,GAAGC,CACP,IACIC,EAAAA,IAACC,EAAA,CACG,GAAAZ,EACA,gBAAAC,EACA,MAAAC,EACA,aAAAC,EACA,YAAAC,EACA,YAAAC,EACA,YAAAC,EACA,UAAAC,EACA,SAAAC,EACA,UAAWK,EAAAA,GAAGC,cAAY,KAAML,CAAS,EACxC,GAAGC,CAAA,CACR,CACH,EAEDZ,EAAK,YAAc,OACnBA,EAAK,OAASiB,EACdjB,EAAK,KAAOkB,EACZlB,EAAK,OAASmB"}

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/surfaces/collapsible/components/collapsible-panel/types/CollapsiblePanel.props.d.ts

@@ -1,5 +1,6 @@
 import { Collapsible } from '@base-ui/react/collapsible';
 import { Space } from '../../../../../../theme/tokens/spacing.ts';
+import { DataAttributes } from '../../../../../../types/DataAttributes.ts';
 export type CollapsiblePanelProps = Collapsible.Panel.Props & {
     padding?: keyof Space;
-};
+} & DataAttributes;

package/dist/components/surfaces/collapsible/components/collapsible-trigger/types/CollapsibleTrigger.props.d.ts

@@ -1,7 +1,8 @@
 import { Collapsible } from '@base-ui/react/collapsible';
+import { DataAttributes } from '../../../../../../types/DataAttributes.ts';
 export type CollapsibleTriggerProps = Omit<Collapsible.Trigger.Props, 'children' | 'render'> & {
     label?: string;
     startIcon?: string;
     endIcon?: string;
     children?: Collapsible.Trigger.Props['children'];
-};
+} & DataAttributes;

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;