@jbpark/ui-kit 9.1.0 → 10.0.0

package/dist/core/separator.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"separator.mjs","names":[],"sources":["../../src/core/separator.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport * as SeparatorPrimitive from '@radix-ui/react-separator';\n\nimport { cn } from '@repo/ui/utils';\n\nfunction Separator({\n  className,\n  orientation = 'horizontal',\n  decorative = true,\n  ...props\n}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {\n  return (\n    <SeparatorPrimitive.Root\n      data-slot=\"separator\"\n      decorative={decorative}\n      orientation={orientation}\n      className={cn(\n        `bg-border shrink-0 data-[orientation=horizontal]:h-px\n        data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full\n        data-[orientation=vertical]:w-px`,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Separator };\n"],"mappings":";;;;;;AAQA,SAAS,UAAU,EACjB,WACA,cAAc,cACd,aAAa,MACb,GAAG,SACoD;CACvD,OACE,oBAAC,mBAAmB,MAApB;EACE,aAAU;EACE;EACC;EACb,WAAW,GACT;;2CAGA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"separator.mjs","names":["Separator","SeparatorPrimitive"],"sources":["../../src/core/separator.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { Separator as SeparatorPrimitive } from '@base-ui/react/separator';\n\nimport { cn } from '@repo/ui/utils';\n\ninterface Props extends Omit<\n  React.ComponentProps<typeof SeparatorPrimitive>,\n  'className'\n> {\n  className?: string;\n  decorative?: boolean;\n}\n\n// Base UI primitive with repo-owned styling; no longer vendored from shadcn.\nfunction Separator({\n  className,\n  orientation = 'horizontal',\n  decorative = true,\n  ...props\n}: Props) {\n  return (\n    <SeparatorPrimitive\n      data-slot=\"separator\"\n      orientation={orientation}\n      role={decorative ? 'none' : 'separator'}\n      aria-orientation={decorative ? undefined : orientation}\n      className={cn(\n        `bg-border shrink-0 data-[orientation=horizontal]:h-px\n        data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full\n        data-[orientation=vertical]:w-px`,\n        className,\n        //\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Separator };\n"],"mappings":";;;;;;AAiBA,SAASA,YAAU,EACjB,WACA,cAAc,cACd,aAAa,MACb,GAAG,SACK;CACR,OACE,oBAACC,WAAD;EACE,aAAU;EACG;EACb,MAAM,aAAa,SAAS;EAC5B,oBAAkB,aAAa,KAAA,IAAY;EAC3C,WAAW,GACT;;2CAGA,SAEF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/core/slider.d.mts

@@ -1,2 +1,2 @@
 import "react";
-import "@radix-ui/react-slider";
+import { Slider } from "@base-ui/react/slider";

package/dist/core/slider.mjs

@@ -3,10 +3,10 @@ import { __exportAll } from "../_virtual/_rolldown/runtime.mjs";
 import { cn } from "../utils.mjs";
 import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as SliderPrimitive from "@radix-ui/react-slider";
+import { Slider } from "@base-ui/react/slider";
 //#region src/core/slider.tsx
-var slider_exports = /* @__PURE__ */ __exportAll({ Slider: () => Slider });
-function Slider({ className, defaultValue, value, min = 0, max = 100, ...props }) {
+var slider_exports = /* @__PURE__ */ __exportAll({ Slider: () => Slider$1 });
+function Slider$1({ className, defaultValue, value, min = 0, max = 100, ...props }) {
 	const thumbs = React$1.useMemo(() => {
 		if (Array.isArray(value)) return value;
 		if (Array.isArray(defaultValue)) return defaultValue;
@@ -17,38 +17,49 @@ function Slider({ className, defaultValue, value, min = 0, max = 100, ...props }
 		min,
 		max
 	]);
-	return /* @__PURE__ */ jsxs(SliderPrimitive.Root, {
+	return /* @__PURE__ */ jsx(Slider.Root, {
+		render: /* @__PURE__ */ jsx("span", {}),
 		"data-slot": "slider",
 		defaultValue,
 		value,
 		min,
 		max,
-		className: cn(`relative flex w-full touch-none items-center select-none
-        data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50
-        data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44
-        data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col`, className),
+		className: cn(`relative flex w-full items-center data-[disabled]:cursor-not-allowed
+        data-[disabled]:opacity-50 data-[orientation=vertical]:h-full
+        data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto
+        data-[orientation=vertical]:flex-col`, className),
 		...props,
-		children: [/* @__PURE__ */ jsx(SliderPrimitive.Track, {
-			"data-slot": "slider-track",
-			className: cn(`bg-input relative grow overflow-hidden rounded-full
-          data-[orientation=horizontal]:h-1.5
-          data-[orientation=horizontal]:w-full
-          data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5`),
-			children: /* @__PURE__ */ jsx(SliderPrimitive.Range, {
-				"data-slot": "slider-range",
-				className: cn(`bg-primary absolute data-[orientation=horizontal]:h-full
-            data-[orientation=vertical]:w-full`)
-			})
-		}), Array.from({ length: thumbs.length }, (_, index) => /* @__PURE__ */ jsx(SliderPrimitive.Thumb, {
-			"data-slot": "slider-thumb",
-			className: cn(`border-primary bg-background ring-ring/50 block size-4 shrink-0
-            rounded-full border shadow-sm transition-[color,box-shadow]
-            hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden
-            disabled:pointer-events-none disabled:opacity-50`)
-		}, index))]
+		children: /* @__PURE__ */ jsxs(Slider.Control, {
+			className: cn(`relative flex w-full touch-none items-center select-none
+          data-[orientation=vertical]:h-full
+          data-[orientation=vertical]:min-h-44
+          data-[orientation=vertical]:w-auto
+          data-[orientation=vertical]:flex-col`),
+			children: [/* @__PURE__ */ jsx(Slider.Track, {
+				"data-slot": "slider-track",
+				className: cn(`bg-input relative grow overflow-hidden rounded-full
+            data-[orientation=horizontal]:h-1.5
+            data-[orientation=horizontal]:w-full
+            data-[orientation=vertical]:h-full
+            data-[orientation=vertical]:w-1.5`),
+				children: /* @__PURE__ */ jsx(Slider.Indicator, {
+					"data-slot": "slider-range",
+					className: cn(`bg-primary data-[orientation=horizontal]:h-full
+              data-[orientation=vertical]:w-full`)
+				})
+			}), Array.from({ length: thumbs.length }, (_, index) => /* @__PURE__ */ jsx(Slider.Thumb, {
+				"data-slot": "slider-thumb",
+				index,
+				className: cn(`border-primary bg-background ring-ring/50 block size-4 shrink-0
+              rounded-full border shadow-sm transition-[color,box-shadow]
+              hover:ring-4 has-[:focus-visible]:ring-4
+              has-[:focus-visible]:outline-hidden
+              data-disabled:pointer-events-none data-disabled:opacity-50`)
+			}, index))]
+		})
 	});
 }
 //#endregion
-export { Slider, slider_exports };
+export { Slider$1 as Slider, slider_exports };
 
 //# sourceMappingURL=slider.mjs.map

package/dist/core/slider.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"slider.mjs","names":["React"],"sources":["../../src/core/slider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport * as SliderPrimitive from '@radix-ui/react-slider';\n\nimport { cn } from '@repo/ui/utils';\n\nfunction Slider({\n  className,\n  defaultValue,\n  value,\n  min = 0,\n  max = 100,\n  ...props\n}: React.ComponentProps<typeof SliderPrimitive.Root>) {\n  const thumbs = React.useMemo(() => {\n    if (Array.isArray(value)) {\n      return value;\n    }\n    if (Array.isArray(defaultValue)) {\n      return defaultValue;\n    }\n    return [min, max];\n  }, [value, defaultValue, min, max]);\n\n  return (\n    <SliderPrimitive.Root\n      data-slot=\"slider\"\n      defaultValue={defaultValue}\n      value={value}\n      min={min}\n      max={max}\n      className={cn(\n        `relative flex w-full touch-none items-center select-none\n        data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50\n        data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44\n        data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col`,\n        className,\n      )}\n      {...props}\n    >\n      <SliderPrimitive.Track\n        data-slot=\"slider-track\"\n        className={cn(\n          `bg-input relative grow overflow-hidden rounded-full\n          data-[orientation=horizontal]:h-1.5\n          data-[orientation=horizontal]:w-full\n          data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5`,\n        )}\n      >\n        <SliderPrimitive.Range\n          data-slot=\"slider-range\"\n          className={cn(\n            `bg-primary absolute data-[orientation=horizontal]:h-full\n            data-[orientation=vertical]:w-full`,\n          )}\n        />\n      </SliderPrimitive.Track>\n      {Array.from({ length: thumbs.length }, (_, index) => (\n        <SliderPrimitive.Thumb\n          data-slot=\"slider-thumb\"\n          key={index}\n          className={cn(\n            `border-primary bg-background ring-ring/50 block size-4 shrink-0\n            rounded-full border shadow-sm transition-[color,box-shadow]\n            hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden\n            disabled:pointer-events-none disabled:opacity-50`,\n          )}\n        />\n      ))}\n    </SliderPrimitive.Root>\n  );\n}\n\nexport { Slider };\n"],"mappings":";;;;;;;;AAQA,SAAS,OAAO,EACd,WACA,cACA,OACA,MAAM,GACN,MAAM,KACN,GAAG,SACiD;CACpD,MAAM,SAASA,QAAM,cAAc;EACjC,IAAI,MAAM,QAAQ,KAAK,GACrB,OAAO;EAET,IAAI,MAAM,QAAQ,YAAY,GAC5B,OAAO;EAET,OAAO,CAAC,KAAK,GAAG;CAClB,GAAG;EAAC;EAAO;EAAc;EAAK;CAAG,CAAC;CAElC,OACE,qBAAC,gBAAgB,MAAjB;EACE,aAAU;EACI;EACP;EACF;EACA;EACL,WAAW,GACT;;;kFAIA,SACF;EACA,GAAI;EAbN,UAAA,CAeE,oBAAC,gBAAgB,OAAjB;GACE,aAAU;GACV,WAAW,GACT;;;+EAIF;GAEA,UAAA,oBAAC,gBAAgB,OAAjB;IACE,aAAU;IACV,WAAW,GACT;+CAEF;GACD,CAAA;EACoB,CAAA,GACtB,MAAM,KAAK,EAAE,QAAQ,OAAO,OAAO,IAAI,GAAG,UACzC,oBAAC,gBAAgB,OAAjB;GACE,aAAU;GAEV,WAAW,GACT;;;6DAIF;EACD,GAPM,KAON,CACF,CACmB;;AAE1B"}
+{"version":3,"file":"slider.mjs","names":["Slider","React","SliderPrimitive"],"sources":["../../src/core/slider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { Slider as SliderPrimitive } from '@base-ui/react/slider';\n\nimport { cn } from '@repo/ui/utils';\n\ntype Props = Omit<\n  SliderPrimitive.Root.Props<number[]>,\n  'className' | 'render'\n> & {\n  className?: string;\n};\n\n// Base UI primitive with repo-owned styling; no longer vendored from shadcn.\nfunction Slider({\n  className,\n  defaultValue,\n  value,\n  min = 0,\n  max = 100,\n  ...props\n}: Props) {\n  const thumbs = React.useMemo(() => {\n    if (Array.isArray(value)) {\n      return value;\n    }\n    if (Array.isArray(defaultValue)) {\n      return defaultValue;\n    }\n    return [min, max];\n  }, [value, defaultValue, min, max]);\n\n  return (\n    <SliderPrimitive.Root\n      render={<span />}\n      data-slot=\"slider\"\n      defaultValue={defaultValue}\n      value={value}\n      min={min}\n      max={max}\n      className={cn(\n        `relative flex w-full items-center data-[disabled]:cursor-not-allowed\n        data-[disabled]:opacity-50 data-[orientation=vertical]:h-full\n        data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto\n        data-[orientation=vertical]:flex-col`,\n        className,\n        //\n      )}\n      {...props}\n    >\n      <SliderPrimitive.Control\n        className={cn(\n          `relative flex w-full touch-none items-center select-none\n          data-[orientation=vertical]:h-full\n          data-[orientation=vertical]:min-h-44\n          data-[orientation=vertical]:w-auto\n          data-[orientation=vertical]:flex-col`,\n        )}\n      >\n        <SliderPrimitive.Track\n          data-slot=\"slider-track\"\n          className={cn(\n            `bg-input relative grow overflow-hidden rounded-full\n            data-[orientation=horizontal]:h-1.5\n            data-[orientation=horizontal]:w-full\n            data-[orientation=vertical]:h-full\n            data-[orientation=vertical]:w-1.5`,\n          )}\n        >\n          <SliderPrimitive.Indicator\n            data-slot=\"slider-range\"\n            className={cn(\n              `bg-primary data-[orientation=horizontal]:h-full\n              data-[orientation=vertical]:w-full`,\n            )}\n          />\n        </SliderPrimitive.Track>\n        {Array.from({ length: thumbs.length }, (_, index) => (\n          <SliderPrimitive.Thumb\n            data-slot=\"slider-thumb\"\n            key={index}\n            index={index}\n            className={cn(\n              `border-primary bg-background ring-ring/50 block size-4 shrink-0\n              rounded-full border shadow-sm transition-[color,box-shadow]\n              hover:ring-4 has-[:focus-visible]:ring-4\n              has-[:focus-visible]:outline-hidden\n              data-disabled:pointer-events-none data-disabled:opacity-50`,\n            )}\n          />\n        ))}\n      </SliderPrimitive.Control>\n    </SliderPrimitive.Root>\n  );\n}\n\nexport { Slider };\n"],"mappings":";;;;;;;;AAgBA,SAASA,SAAO,EACd,WACA,cACA,OACA,MAAM,GACN,MAAM,KACN,GAAG,SACK;CACR,MAAM,SAASC,QAAM,cAAc;EACjC,IAAI,MAAM,QAAQ,KAAK,GACrB,OAAO;EAET,IAAI,MAAM,QAAQ,YAAY,GAC5B,OAAO;EAET,OAAO,CAAC,KAAK,GAAG;CAClB,GAAG;EAAC;EAAO;EAAc;EAAK;CAAG,CAAC;CAElC,OACE,oBAACC,OAAgB,MAAjB;EACE,QAAQ,oBAAC,QAAD,CAAO,CAAA;EACf,aAAU;EACI;EACP;EACF;EACA;EACL,WAAW,GACT;;;+CAIA,SAEF;EACA,GAAI;EAEJ,UAAA,qBAACA,OAAgB,SAAjB;GACE,WAAW,GACT;;;;+CAKF;GAPF,UAAA,CASE,oBAACA,OAAgB,OAAjB;IACE,aAAU;IACV,WAAW,GACT;;;;8CAKF;IAEA,UAAA,oBAACA,OAAgB,WAAjB;KACE,aAAU;KACV,WAAW,GACT;iDAEF;IACD,CAAA;GACoB,CAAA,GACtB,MAAM,KAAK,EAAE,QAAQ,OAAO,OAAO,IAAI,GAAG,UACzC,oBAACA,OAAgB,OAAjB;IACE,aAAU;IAEH;IACP,WAAW,GACT;;;;yEAKF;GACD,GATM,KASN,CACF,CACsB;;CACL,CAAA;AAE1B"}

package/dist/core/switch.d.mts

@@ -1,2 +1,2 @@
 import "react";
-import "@radix-ui/react-switch";
+import { Switch } from "@base-ui/react/switch";

package/dist/core/switch.mjs

@@ -3,35 +3,35 @@ import { __exportAll } from "../_virtual/_rolldown/runtime.mjs";
 import { cn } from "../utils.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as SwitchPrimitive from "@radix-ui/react-switch";
+import { Switch } from "@base-ui/react/switch";
 //#region src/core/switch.tsx
-var switch_exports = /* @__PURE__ */ __exportAll({ Switch: () => Switch });
-function Switch({ className, size = "default", handleClassName, children, ...props }) {
-	return /* @__PURE__ */ jsxs(SwitchPrimitive.Root, {
+var switch_exports = /* @__PURE__ */ __exportAll({ Switch: () => Switch$1 });
+function Switch$1({ className, size = "default", handleClassName, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Switch.Root, {
 		"data-slot": "switch",
 		"data-size": size,
-		className: cn(`peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input
+		className: cn(`peer data-checked:bg-primary data-unchecked:bg-input
         focus-visible:border-ring focus-visible:ring-ring/50
-        dark:data-[state=unchecked]:bg-input/80 group/switch inline-flex
-        shrink-0 items-center rounded-full border border-transparent shadow-xs
+        dark:data-unchecked:bg-input/80 group/switch inline-flex shrink-0
+        items-center rounded-full border border-transparent shadow-xs
         transition-all outline-none focus-visible:ring-[3px]
-        disabled:cursor-not-allowed disabled:opacity-50
+        data-disabled:cursor-not-allowed data-disabled:opacity-50
         data-[size=default]:h-[1.15rem] data-[size=default]:w-8
         data-[size=sm]:h-3.5 data-[size=sm]:w-6`, className),
 		...props,
-		children: [/* @__PURE__ */ jsx(SwitchPrimitive.Thumb, {
+		children: [/* @__PURE__ */ jsx(Switch.Thumb, {
 			"data-slot": "switch-thumb",
-			className: cn(`bg-background dark:data-[state=unchecked]:bg-foreground
-          dark:data-[state=checked]:bg-primary-foreground pointer-events-none
-          block rounded-full ring-0 transition-transform
+			className: cn(`bg-background dark:data-unchecked:bg-foreground
+          dark:data-checked:bg-primary-foreground pointer-events-none block
+          rounded-full ring-0 transition-transform
           group-data-[size=default]/switch:size-4
           group-data-[size=sm]/switch:size-3
-          data-[state=checked]:translate-x-[calc(100%-2px)]
-          data-[state=unchecked]:translate-x-0`, handleClassName)
+          data-checked:translate-x-[calc(100%-2px)]
+          data-unchecked:translate-x-0`, handleClassName)
 		}), children]
 	});
 }
 //#endregion
-export { Switch, switch_exports };
+export { Switch$1 as Switch, switch_exports };
 
 //# sourceMappingURL=switch.mjs.map

package/dist/core/switch.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"switch.mjs","names":[],"sources":["../../src/core/switch.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport * as SwitchPrimitive from '@radix-ui/react-switch';\n\nimport { cn } from '@repo/ui/utils';\n\ninterface CustomProps {\n  handleClassName?: string;\n  children?: React.ReactNode;\n}\n\nfunction Switch({\n  className,\n  size = 'default',\n  handleClassName,\n  children,\n  ...props\n}: React.ComponentProps<typeof SwitchPrimitive.Root> & {\n  size?: 'sm' | 'default';\n} & CustomProps) {\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      data-size={size}\n      className={cn(\n        `peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input\n        focus-visible:border-ring focus-visible:ring-ring/50\n        dark:data-[state=unchecked]:bg-input/80 group/switch inline-flex\n        shrink-0 items-center rounded-full border border-transparent shadow-xs\n        transition-all outline-none focus-visible:ring-[3px]\n        disabled:cursor-not-allowed disabled:opacity-50\n        data-[size=default]:h-[1.15rem] data-[size=default]:w-8\n        data-[size=sm]:h-3.5 data-[size=sm]:w-6`,\n        className,\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className={cn(\n          `bg-background dark:data-[state=unchecked]:bg-foreground\n          dark:data-[state=checked]:bg-primary-foreground pointer-events-none\n          block rounded-full ring-0 transition-transform\n          group-data-[size=default]/switch:size-4\n          group-data-[size=sm]/switch:size-3\n          data-[state=checked]:translate-x-[calc(100%-2px)]\n          data-[state=unchecked]:translate-x-0`,\n          handleClassName,\n        )}\n      />\n      {children}\n    </SwitchPrimitive.Root>\n  );\n}\n\nexport { Switch };\n"],"mappings":";;;;;;;;AAaA,SAAS,OAAO,EACd,WACA,OAAO,WACP,iBACA,UACA,GAAG,SAGY;CACf,OACE,qBAAC,gBAAgB,MAAjB;EACE,aAAU;EACV,aAAW;EACX,WAAW,GACT;;;;;;;kDAQA,SACF;EACA,GAAI;EAdN,UAAA,CAgBE,oBAAC,gBAAgB,OAAjB;GACE,aAAU;GACV,WAAW,GACT;;;;;;iDAOA,eACF;EACD,CAAA,GACA,QACmB;;AAE1B"}
+{"version":3,"file":"switch.mjs","names":["Switch","SwitchPrimitive"],"sources":["../../src/core/switch.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { Switch as SwitchPrimitive } from '@base-ui/react/switch';\n\nimport { cn } from '@repo/ui/utils';\n\n/*\n * Base UI primitive with repo-owned styling; no longer vendored from shadcn.\n *\n * `CustomProps` keeps the two structural extensions the atom relies on:\n * `handleClassName` (merged onto `SwitchPrimitive.Thumb`) and `children`\n * (rendered inside the Root, after the Thumb) — both reach into the primitive's\n * sub-tree, so they can't be expressed through `className` composition alone.\n */\ninterface CustomProps {\n  handleClassName?: string;\n  children?: React.ReactNode;\n}\n\nfunction Switch({\n  className,\n  size = 'default',\n  handleClassName,\n  children,\n  ...props\n}: React.ComponentProps<typeof SwitchPrimitive.Root> & {\n  size?: 'sm' | 'default';\n} & CustomProps) {\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      data-size={size}\n      className={cn(\n        `peer data-checked:bg-primary data-unchecked:bg-input\n        focus-visible:border-ring focus-visible:ring-ring/50\n        dark:data-unchecked:bg-input/80 group/switch inline-flex shrink-0\n        items-center rounded-full border border-transparent shadow-xs\n        transition-all outline-none focus-visible:ring-[3px]\n        data-disabled:cursor-not-allowed data-disabled:opacity-50\n        data-[size=default]:h-[1.15rem] data-[size=default]:w-8\n        data-[size=sm]:h-3.5 data-[size=sm]:w-6`,\n        className,\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className={cn(\n          `bg-background dark:data-unchecked:bg-foreground\n          dark:data-checked:bg-primary-foreground pointer-events-none block\n          rounded-full ring-0 transition-transform\n          group-data-[size=default]/switch:size-4\n          group-data-[size=sm]/switch:size-3\n          data-checked:translate-x-[calc(100%-2px)]\n          data-unchecked:translate-x-0`,\n          handleClassName,\n        )}\n      />\n      {children}\n    </SwitchPrimitive.Root>\n  );\n}\n\nexport { Switch };\n"],"mappings":";;;;;;;;AAqBA,SAASA,SAAO,EACd,WACA,OAAO,WACP,iBACA,UACA,GAAG,SAGY;CACf,OACE,qBAACC,OAAgB,MAAjB;EACE,aAAU;EACV,aAAW;EACX,WAAW,GACT;;;;;;;kDAQA,SACF;EACA,GAAI;EAdN,UAAA,CAgBE,oBAACA,OAAgB,OAAjB;GACE,aAAU;GACV,WAAW,GACT;;;;;;yCAOA,eACF;EACD,CAAA,GACA,QACmB;;AAE1B"}

package/dist/index.d.mts

@@ -53,4 +53,5 @@ import Result, { Props as Props$17 } from "./components/templates/result.mjs";
 import PageHeader, { Props as Props$16 } from "./components/templates/page-header.mjs";
 import Row, { Props as Props$19 } from "./components/templates/grid/row.mjs";
 import Col, { Props as Props$1 } from "./components/templates/grid/col.mjs";
+import "./components/templates/index.mjs";
 export { Button, Card, type Props as CardProps, Checkbox, Col, type Props$1 as ColProps, Collapse, type Props$2 as CollapseProps, ColorPicker, type ComponentSize, Config, type Props$3 as ConfigProps, ConfigSnapshotProvider, Container, type Props$4 as ContainerProps, type Props$5 as ContentProps, DEFAULT_LOCALE, DatePicker, type DefaultProps, Drawer, type Props$6 as DrawerProps, Dropdown, type Props$7 as DropdownProps, Empty, type Props$8 as EmptyProps, FloatButton, type Props$9 as FooterProps, type Props$10 as HeaderProps, Input, Layout, type Props$11 as LayoutProps, List, type Props$12 as ListProps, type Locale, Marquees, type Props$13 as MarqueesProps, Menu, type Props$14 as MenuProps, Modal, type Props$15 as ModalProps, PageHeader, type Props$16 as PageHeaderProps, Popover, Progress, Radio, Result, type Props$17 as ResultProps, Reveals, type Props$18 as RevealsProps, RichTextEditor, Row, type Props$19 as RowProps, Select, type Props$20 as SiderProps, Skeleton, Slider, Space, type Props$21 as SpaceProps, Spin, Splitter, type Props$22 as SplitterProps, Swiper, type Props$23 as SwiperProps, Switch, Tag, type ThemeConfig, type ThemeToken, Toast, type StaticProps as ToastOptions, Typography, Upload, type UploadFile, type Props$24 as UploadProps, getRootConfigValue, useConfig };

package/dist/lib/z-layers.mjs

@@ -6,8 +6,8 @@
 *
 * **They are all deliberately equal.** Nothing here ranks against anything else
 * here by z-index; relative order falls out of DOM order, which is what puts a
-* Select popup above the Drawer it was opened from (Radix appends each portal to
-* `body` as it opens) and a Drawer above `Layout.Header`. Give one of them a
+* Select popup above the Drawer it was opened from (Base UI appends each portal
+* to `body` as it opens) and a Drawer above `Layout.Header`. Give one of them a
 * different value and those pairs silently invert. `Modal.confirm` and the
 * imperative `Toast`/`Modal` stack roots sit above this on purpose (`z-10000` /
 * `zIndex = '10000'`), so an imperative confirm opened from inside a declarative
@@ -18,10 +18,8 @@
 * that assumption: Infima (Docusaurus) puts its navbar at `--ifm-z-index-fixed: 200`
 * and its own overlay at 400, so on this repo's own docs site a right-anchored
 * Drawer had its top 60px — the entire header, title and close button — painted
-* under the navbar. It still hit-tested fine, because vaul/Radix mark outside
-* content `pointer-events: none` while a modal is open, so the close button was
-* clickable but invisible. 1000 clears Infima's whole scale and sits in the band
-* every major library reserves for modals (antd 1000, Bootstrap 1055, MUI 1300).
+* under the navbar. 1000 clears Infima's whole scale and sits in the band every
+* major library reserves for modals (antd 1000, Bootstrap 1055, MUI 1300).
 *
 * Retune per call site with `className` / `classNames.mask` — both land after
 * this in `cn()`, so `tailwind-merge` lets them win.

package/dist/lib/z-layers.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"z-layers.mjs","names":[],"sources":["../../src/lib/z-layers.ts"],"sourcesContent":["/**\n * The single stacking layer every floating/overlay primitive in this library\n * shares — dialog and drawer (mask + content), popover, select, dropdown,\n * float button, and `Layout.Header`.\n *\n * **They are all deliberately equal.** Nothing here ranks against anything else\n * here by z-index; relative order falls out of DOM order, which is what puts a\n * Select popup above the Drawer it was opened from (Radix appends each portal to\n * `body` as it opens) and a Drawer above `Layout.Header`. Give one of them a\n * different value and those pairs silently invert. `Modal.confirm` and the\n * imperative `Toast`/`Modal` stack roots sit above this on purpose (`z-10000` /\n * `zIndex = '10000'`), so an imperative confirm opened from inside a declarative\n * Modal still lands on top.\n *\n * **Why 1000 and not shadcn's default of 50.** 50 assumes you own the whole app\n * and keep its chrome below that. This package is published, so it doesn't get\n * that assumption: Infima (Docusaurus) puts its navbar at `--ifm-z-index-fixed: 200`\n * and its own overlay at 400, so on this repo's own docs site a right-anchored\n * Drawer had its top 60px — the entire header, title and close button — painted\n * under the navbar. It still hit-tested fine, because vaul/Radix mark outside\n * content `pointer-events: none` while a modal is open, so the close button was\n * clickable but invisible. 1000 clears Infima's whole scale and sits in the band\n * every major library reserves for modals (antd 1000, Bootstrap 1055, MUI 1300).\n *\n * Retune per call site with `className` / `classNames.mask` — both land after\n * this in `cn()`, so `tailwind-merge` lets them win.\n */\nexport const OVERLAY_LAYER = 'z-1000';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,MAAa,gBAAgB"}
+{"version":3,"file":"z-layers.mjs","names":[],"sources":["../../src/lib/z-layers.ts"],"sourcesContent":["/**\n * The single stacking layer every floating/overlay primitive in this library\n * shares — dialog and drawer (mask + content), popover, select, dropdown,\n * float button, and `Layout.Header`.\n *\n * **They are all deliberately equal.** Nothing here ranks against anything else\n * here by z-index; relative order falls out of DOM order, which is what puts a\n * Select popup above the Drawer it was opened from (Base UI appends each portal\n * to `body` as it opens) and a Drawer above `Layout.Header`. Give one of them a\n * different value and those pairs silently invert. `Modal.confirm` and the\n * imperative `Toast`/`Modal` stack roots sit above this on purpose (`z-10000` /\n * `zIndex = '10000'`), so an imperative confirm opened from inside a declarative\n * Modal still lands on top.\n *\n * **Why 1000 and not shadcn's default of 50.** 50 assumes you own the whole app\n * and keep its chrome below that. This package is published, so it doesn't get\n * that assumption: Infima (Docusaurus) puts its navbar at `--ifm-z-index-fixed: 200`\n * and its own overlay at 400, so on this repo's own docs site a right-anchored\n * Drawer had its top 60px — the entire header, title and close button — painted\n * under the navbar. 1000 clears Infima's whole scale and sits in the band every\n * major library reserves for modals (antd 1000, Bootstrap 1055, MUI 1300).\n *\n * Retune per call site with `className` / `classNames.mask` — both land after\n * this in `cn()`, so `tailwind-merge` lets them win.\n */\nexport const OVERLAY_LAYER = 'z-1000';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,MAAa,gBAAgB"}

package/dist/providers/config/config.mjs

@@ -4,7 +4,7 @@ import { Context, DEFAULT_LOCALE, useConfig } from "./context.mjs";
 import { resolveDark, useSystemPrefersDark } from "./dark-mode.mjs";
 import { registerRootConfig } from "./registry.mjs";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { DirectionProvider } from "@radix-ui/react-direction";
+import { DirectionProvider } from "@base-ui/react/direction-provider";
 import { jsx } from "react/jsx-runtime";
 //#region src/providers/config/config.tsx
 const tokenToCssVar = {
@@ -130,7 +130,7 @@ const Config = ({ theme = {}, locale = {}, getContainer, componentSize, directio
 		}) : children
 	});
 	return direction ? /* @__PURE__ */ jsx(DirectionProvider, {
-		dir: direction,
+		direction,
 		children: content
 	}) : content;
 };

package/dist/providers/config/config.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"config.mjs","names":[],"sources":["../../../src/providers/config/config.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { DirectionProvider } from '@radix-ui/react-direction';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { Context, DEFAULT_LOCALE, useConfig } from './context';\nimport { resolveDark, useSystemPrefersDark } from './dark-mode';\nimport { registerRootConfig } from './registry';\nimport type {\n  ComponentSize,\n  DefaultProps,\n  Locale,\n  ThemeConfig,\n  ThemeToken,\n} from './types';\n\nconst tokenToCssVar: Record<keyof ThemeToken, string> = {\n  colorPrimary: '--primary',\n  colorPrimaryForeground: '--primary-foreground',\n  colorBackground: '--background',\n  colorForeground: '--foreground',\n  colorCard: '--card',\n  colorCardForeground: '--card-foreground',\n  colorPopover: '--popover',\n  colorPopoverForeground: '--popover-foreground',\n  colorSecondary: '--secondary',\n  colorSecondaryForeground: '--secondary-foreground',\n  colorMuted: '--muted',\n  colorMutedForeground: '--muted-foreground',\n  colorAccent: '--accent',\n  colorAccentForeground: '--accent-foreground',\n  colorDestructive: '--destructive',\n  colorBorder: '--border',\n  colorInput: '--input',\n  colorRing: '--ring',\n  borderRadius: '--radius',\n\n  // Not `--font-sans`/`--font-mono`: those are `@theme inline` entries, so\n  // Tailwind substitutes their value into each utility rather than referencing\n  // them, and a wrapper-level override never applied. `globals.css` reads these\n  // hooks ahead of the app's own font variable instead (#343).\n  fontSans: '--ui-font-sans',\n  fontMono: '--ui-font-mono',\n};\n\nconst buildCssVars = (token?: ThemeToken): React.CSSProperties => {\n  if (!token) {\n    return {};\n  }\n\n  const vars: Record<string, string> = {};\n\n  for (const [key, value] of Object.entries(token)) {\n    if (value === undefined) {\n      continue;\n    }\n    const cssVar = tokenToCssVar[key as keyof ThemeToken];\n    if (cssVar) {\n      vars[cssVar] = value;\n    }\n  }\n\n  return vars as React.CSSProperties;\n};\n\ninterface Props {\n  theme?: ThemeConfig;\n  locale?: Locale;\n  getContainer?: () => HTMLElement;\n  componentSize?: ComponentSize;\n  direction?: 'ltr' | 'rtl';\n  defaultProps?: DefaultProps;\n  className?: string;\n  style?: React.CSSProperties;\n  children: React.ReactNode;\n}\n\nconst Config = ({\n  theme = {},\n  locale = {},\n  getContainer,\n  componentSize,\n  direction,\n  defaultProps,\n  className,\n  style,\n  children,\n}: Props) => {\n  const parent = useConfig();\n  const [wrapperEl, setWrapperEl] = useState<HTMLDivElement | null>(null);\n\n  // Only a Config with no Config ancestor of its own registers for the\n  // imperative stack (Modal.*/Toast.*) to inherit — see registry.tsx.\n  const isRoot = !parent.isConfigured;\n\n  // `theme` is typically a fresh inline object literal at the call site\n  // (and `parent.theme` inherits the same problem from its own Config\n  // ancestor), so depending on them directly meant mergedTheme/contextValue\n  // got a new identity on every render regardless of whether the actual\n  // values changed — every useConfig() consumer in the tree re-rendered on\n  // every render of whatever's above this Config, which for the common\n  // app-root usage is everything. Depend on a serialized key instead so\n  // the memo only invalidates when the content actually changes; these\n  // are small, string/boolean-only objects, so JSON.stringify is cheap.\n  const themeKey = JSON.stringify(theme);\n  const parentThemeKey = JSON.stringify(parent.theme);\n  const localeKey = JSON.stringify(locale);\n  const parentLocaleKey = JSON.stringify(parent.locale);\n\n  const mergedTheme = useMemo<ThemeConfig>(\n    () => ({\n      ...parent.theme,\n      ...theme,\n      token: {\n        ...parent.theme.token,\n        ...theme.token,\n      },\n      darkToken: {\n        ...parent.theme.darkToken,\n        ...theme.darkToken,\n      },\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [parentThemeKey, themeKey],\n  );\n\n  const mergedLocale = useMemo<Locale>(\n    () => ({\n      ...parent.locale,\n      ...locale,\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [parentLocaleKey, localeKey],\n  );\n\n  const systemPrefersDark = useSystemPrefersDark();\n  const isDarkActive = resolveDark(mergedTheme.dark, systemPrefersDark);\n\n  // `darkToken` overrides individual keys of `token` (not a full swap)\n  // only while dark mode is actually active.\n  const cssVars = useMemo(\n    () =>\n      buildCssVars(\n        isDarkActive\n          ? { ...mergedTheme.token, ...mergedTheme.darkToken }\n          : mergedTheme.token,\n      ),\n    [mergedTheme.token, mergedTheme.darkToken, isDarkActive],\n  );\n\n  const hasCssVars = Object.keys(cssVars).length > 0;\n  const hasDarkMode = mergedTheme.dark !== undefined;\n  const needsWrapper =\n    hasCssVars || hasDarkMode || !!className || !!style || !!direction;\n\n  // Resolution order: an explicit `getContainer` prop on this Config wins;\n  // otherwise, if this Config renders its own themed wrapper below, that's\n  // the default (portaled content appended into it still inherits its CSS\n  // custom properties and matches the `.dark` selector — `display:\n  // contents` only removes the element from the layout box tree, not from\n  // the DOM/cascade); otherwise defer to the parent Config's resolution,\n  // so an inner Config that only sets e.g. `locale` doesn't shadow an\n  // outer one's theme container.\n  const resolvedGetContainer = useCallback((): HTMLElement | undefined => {\n    if (getContainer) {\n      return getContainer();\n    }\n    if (needsWrapper && wrapperEl) {\n      return wrapperEl;\n    }\n    return parent.getContainer();\n  }, [getContainer, needsWrapper, wrapperEl, parent]);\n\n  const resolvedComponentSize = componentSize ?? parent.componentSize;\n  const resolvedDirection = direction ?? parent.direction;\n\n  const defaultPropsKey = JSON.stringify(defaultProps);\n  const parentDefaultPropsKey = JSON.stringify(parent.defaultProps);\n\n  const mergedDefaultProps = useMemo<DefaultProps | undefined>(\n    () =>\n      parent.defaultProps || defaultProps\n        ? { ...parent.defaultProps, ...defaultProps }\n        : undefined,\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [parentDefaultPropsKey, defaultPropsKey],\n  );\n\n  const contextValue = useMemo(\n    () => ({\n      theme: mergedTheme,\n      locale: mergedLocale,\n      getContainer: resolvedGetContainer,\n      componentSize: resolvedComponentSize,\n      direction: resolvedDirection,\n      defaultProps: mergedDefaultProps,\n      isConfigured: true,\n    }),\n    [\n      mergedTheme,\n      mergedLocale,\n      resolvedGetContainer,\n      resolvedComponentSize,\n      resolvedDirection,\n      mergedDefaultProps,\n    ],\n  );\n\n  useEffect(() => {\n    if (!isRoot) {\n      return;\n    }\n    return registerRootConfig(contextValue);\n  }, [isRoot, contextValue]);\n\n  const content = (\n    <Context.Provider value={contextValue}>\n      {needsWrapper ? (\n        <div\n          ref={setWrapperEl}\n          dir={direction}\n          className={cn(isDarkActive && 'dark', className)}\n          style={{\n            ...(hasCssVars ? cssVars : undefined),\n            ...style,\n            // Keeps this element out of the layout box tree — so it\n            // doesn't intercept flex/grid child relationships or break\n            // height chains like min-h-screen — while custom properties\n            // and the `dark` class selector still cascade to children\n            // normally (inheritance and box generation are separate\n            // mechanisms in CSS). Note this means className/style\n            // shouldn't be used here for anything that needs a real box\n            // (padding, background, borders); Config's className/style are\n            // meant for theming hooks (the `dark` class, arbitrary\n            // selector hooks, custom properties), not layout — spread\n            // after the caller's `style` so it can't be overridden into\n            // something that reintroduces the layout-breaking wrapper this\n            // was added to fix in the first place.\n            display: 'contents',\n          }}\n        >\n          {children}\n        </div>\n      ) : (\n        children\n      )}\n    </Context.Provider>\n  );\n\n  // DirectionProvider is Radix's own mechanism (@radix-ui/react-direction)\n  // for propagating `dir` to every primitive that calls its useDirection()\n  // internally — Select, Menu (Dropdown/Menu), Accordion (Collapse),\n  // RadioGroup, ScrollArea all pick up RTL automatically this way, no\n  // per-component wiring needed. Only wraps when this Config's own\n  // `direction` prop is set (not the merely-inherited resolved value) —\n  // context already cascades on its own, so re-wrapping at every nested\n  // Config that doesn't override direction would just be redundant.\n  // Components with hardcoded LTR-only layout logic that Radix's Direction\n  // context doesn't reach (Popover placement, Splitter, Sider, Drawer)\n  // aren't covered by this and would need dedicated follow-up work.\n  return direction ? (\n    <DirectionProvider dir={direction}>{content}</DirectionProvider>\n  ) : (\n    content\n  );\n};\n\nexport default Config;\nexport { useConfig, DEFAULT_LOCALE };\nexport type {\n  Props,\n  ComponentSize,\n  DefaultProps,\n  Locale,\n  ThemeConfig,\n  ThemeToken,\n};\n"],"mappings":"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"}
+{"version":3,"file":"config.mjs","names":[],"sources":["../../../src/providers/config/config.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { DirectionProvider } from '@base-ui/react/direction-provider';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { Context, DEFAULT_LOCALE, useConfig } from './context';\nimport { resolveDark, useSystemPrefersDark } from './dark-mode';\nimport { registerRootConfig } from './registry';\nimport type {\n  ComponentSize,\n  DefaultProps,\n  Locale,\n  ThemeConfig,\n  ThemeToken,\n} from './types';\n\nconst tokenToCssVar: Record<keyof ThemeToken, string> = {\n  colorPrimary: '--primary',\n  colorPrimaryForeground: '--primary-foreground',\n  colorBackground: '--background',\n  colorForeground: '--foreground',\n  colorCard: '--card',\n  colorCardForeground: '--card-foreground',\n  colorPopover: '--popover',\n  colorPopoverForeground: '--popover-foreground',\n  colorSecondary: '--secondary',\n  colorSecondaryForeground: '--secondary-foreground',\n  colorMuted: '--muted',\n  colorMutedForeground: '--muted-foreground',\n  colorAccent: '--accent',\n  colorAccentForeground: '--accent-foreground',\n  colorDestructive: '--destructive',\n  colorBorder: '--border',\n  colorInput: '--input',\n  colorRing: '--ring',\n  borderRadius: '--radius',\n\n  // Not `--font-sans`/`--font-mono`: those are `@theme inline` entries, so\n  // Tailwind substitutes their value into each utility rather than referencing\n  // them, and a wrapper-level override never applied. `globals.css` reads these\n  // hooks ahead of the app's own font variable instead (#343).\n  fontSans: '--ui-font-sans',\n  fontMono: '--ui-font-mono',\n};\n\nconst buildCssVars = (token?: ThemeToken): React.CSSProperties => {\n  if (!token) {\n    return {};\n  }\n\n  const vars: Record<string, string> = {};\n\n  for (const [key, value] of Object.entries(token)) {\n    if (value === undefined) {\n      continue;\n    }\n    const cssVar = tokenToCssVar[key as keyof ThemeToken];\n    if (cssVar) {\n      vars[cssVar] = value;\n    }\n  }\n\n  return vars as React.CSSProperties;\n};\n\ninterface Props {\n  theme?: ThemeConfig;\n  locale?: Locale;\n  getContainer?: () => HTMLElement;\n  componentSize?: ComponentSize;\n  direction?: 'ltr' | 'rtl';\n  defaultProps?: DefaultProps;\n  className?: string;\n  style?: React.CSSProperties;\n  children: React.ReactNode;\n}\n\nconst Config = ({\n  theme = {},\n  locale = {},\n  getContainer,\n  componentSize,\n  direction,\n  defaultProps,\n  className,\n  style,\n  children,\n}: Props) => {\n  const parent = useConfig();\n  const [wrapperEl, setWrapperEl] = useState<HTMLDivElement | null>(null);\n\n  // Only a Config with no Config ancestor of its own registers for the\n  // imperative stack (Modal.*/Toast.*) to inherit — see registry.tsx.\n  const isRoot = !parent.isConfigured;\n\n  // `theme` is typically a fresh inline object literal at the call site\n  // (and `parent.theme` inherits the same problem from its own Config\n  // ancestor), so depending on them directly meant mergedTheme/contextValue\n  // got a new identity on every render regardless of whether the actual\n  // values changed — every useConfig() consumer in the tree re-rendered on\n  // every render of whatever's above this Config, which for the common\n  // app-root usage is everything. Depend on a serialized key instead so\n  // the memo only invalidates when the content actually changes; these\n  // are small, string/boolean-only objects, so JSON.stringify is cheap.\n  const themeKey = JSON.stringify(theme);\n  const parentThemeKey = JSON.stringify(parent.theme);\n  const localeKey = JSON.stringify(locale);\n  const parentLocaleKey = JSON.stringify(parent.locale);\n\n  const mergedTheme = useMemo<ThemeConfig>(\n    () => ({\n      ...parent.theme,\n      ...theme,\n      token: {\n        ...parent.theme.token,\n        ...theme.token,\n      },\n      darkToken: {\n        ...parent.theme.darkToken,\n        ...theme.darkToken,\n      },\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [parentThemeKey, themeKey],\n  );\n\n  const mergedLocale = useMemo<Locale>(\n    () => ({\n      ...parent.locale,\n      ...locale,\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [parentLocaleKey, localeKey],\n  );\n\n  const systemPrefersDark = useSystemPrefersDark();\n  const isDarkActive = resolveDark(mergedTheme.dark, systemPrefersDark);\n\n  // `darkToken` overrides individual keys of `token` (not a full swap)\n  // only while dark mode is actually active.\n  const cssVars = useMemo(\n    () =>\n      buildCssVars(\n        isDarkActive\n          ? { ...mergedTheme.token, ...mergedTheme.darkToken }\n          : mergedTheme.token,\n      ),\n    [mergedTheme.token, mergedTheme.darkToken, isDarkActive],\n  );\n\n  const hasCssVars = Object.keys(cssVars).length > 0;\n  const hasDarkMode = mergedTheme.dark !== undefined;\n  const needsWrapper =\n    hasCssVars || hasDarkMode || !!className || !!style || !!direction;\n\n  // Resolution order: an explicit `getContainer` prop on this Config wins;\n  // otherwise, if this Config renders its own themed wrapper below, that's\n  // the default (portaled content appended into it still inherits its CSS\n  // custom properties and matches the `.dark` selector — `display:\n  // contents` only removes the element from the layout box tree, not from\n  // the DOM/cascade); otherwise defer to the parent Config's resolution,\n  // so an inner Config that only sets e.g. `locale` doesn't shadow an\n  // outer one's theme container.\n  const resolvedGetContainer = useCallback((): HTMLElement | undefined => {\n    if (getContainer) {\n      return getContainer();\n    }\n    if (needsWrapper && wrapperEl) {\n      return wrapperEl;\n    }\n    return parent.getContainer();\n  }, [getContainer, needsWrapper, wrapperEl, parent]);\n\n  const resolvedComponentSize = componentSize ?? parent.componentSize;\n  const resolvedDirection = direction ?? parent.direction;\n\n  const defaultPropsKey = JSON.stringify(defaultProps);\n  const parentDefaultPropsKey = JSON.stringify(parent.defaultProps);\n\n  const mergedDefaultProps = useMemo<DefaultProps | undefined>(\n    () =>\n      parent.defaultProps || defaultProps\n        ? { ...parent.defaultProps, ...defaultProps }\n        : undefined,\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [parentDefaultPropsKey, defaultPropsKey],\n  );\n\n  const contextValue = useMemo(\n    () => ({\n      theme: mergedTheme,\n      locale: mergedLocale,\n      getContainer: resolvedGetContainer,\n      componentSize: resolvedComponentSize,\n      direction: resolvedDirection,\n      defaultProps: mergedDefaultProps,\n      isConfigured: true,\n    }),\n    [\n      mergedTheme,\n      mergedLocale,\n      resolvedGetContainer,\n      resolvedComponentSize,\n      resolvedDirection,\n      mergedDefaultProps,\n    ],\n  );\n\n  useEffect(() => {\n    if (!isRoot) {\n      return;\n    }\n    return registerRootConfig(contextValue);\n  }, [isRoot, contextValue]);\n\n  const content = (\n    <Context.Provider value={contextValue}>\n      {needsWrapper ? (\n        <div\n          ref={setWrapperEl}\n          dir={direction}\n          className={cn(isDarkActive && 'dark', className)}\n          style={{\n            ...(hasCssVars ? cssVars : undefined),\n            ...style,\n            // Keeps this element out of the layout box tree — so it\n            // doesn't intercept flex/grid child relationships or break\n            // height chains like min-h-screen — while custom properties\n            // and the `dark` class selector still cascade to children\n            // normally (inheritance and box generation are separate\n            // mechanisms in CSS). Note this means className/style\n            // shouldn't be used here for anything that needs a real box\n            // (padding, background, borders); Config's className/style are\n            // meant for theming hooks (the `dark` class, arbitrary\n            // selector hooks, custom properties), not layout — spread\n            // after the caller's `style` so it can't be overridden into\n            // something that reintroduces the layout-breaking wrapper this\n            // was added to fix in the first place.\n            display: 'contents',\n          }}\n        >\n          {children}\n        </div>\n      ) : (\n        children\n      )}\n    </Context.Provider>\n  );\n\n  // DirectionProvider propagates `direction` to Base UI primitives such as\n  // Select, Accordion, and RadioGroup. Only wraps when this Config's own\n  // `direction` prop is set (not the merely-inherited resolved value) —\n  // context already cascades on its own, so re-wrapping at every nested\n  // Config that doesn't override direction would just be redundant.\n  // Components with hardcoded LTR-only layout logic (Popover placement,\n  // Splitter, Sider, Drawer) still need dedicated handling.\n  return direction ? (\n    <DirectionProvider direction={direction}>{content}</DirectionProvider>\n  ) : (\n    content\n  );\n};\n\nexport default Config;\nexport { useConfig, DEFAULT_LOCALE };\nexport type {\n  Props,\n  ComponentSize,\n  DefaultProps,\n  Locale,\n  ThemeConfig,\n  ThemeToken,\n};\n"],"mappings":"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"}