@jbpark/ui-kit 9.1.1 → 10.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (112) hide show
  1. package/README.ko.md +18 -17
  2. package/README.md +18 -17
  3. package/dist/Button.d.mts +1 -1
  4. package/dist/Button.d.mts.map +1 -1
  5. package/dist/Button.mjs +4 -5
  6. package/dist/Button.mjs.map +1 -1
  7. package/dist/Tag.d.mts.map +1 -1
  8. package/dist/Tag.mjs.map +1 -1
  9. package/dist/components/atoms/checkbox/checkbox.mjs.map +1 -1
  10. package/dist/components/atoms/option-group.mjs.map +1 -1
  11. package/dist/components/atoms/popover.d.mts +3 -1
  12. package/dist/components/atoms/popover.d.mts.map +1 -1
  13. package/dist/components/atoms/popover.mjs +10 -111
  14. package/dist/components/atoms/popover.mjs.map +1 -1
  15. package/dist/components/atoms/progress.mjs +3 -4
  16. package/dist/components/atoms/progress.mjs.map +1 -1
  17. package/dist/components/atoms/radio/context.mjs +2 -2
  18. package/dist/components/atoms/radio/context.mjs.map +1 -1
  19. package/dist/components/atoms/radio/group.mjs +6 -6
  20. package/dist/components/atoms/radio/group.mjs.map +1 -1
  21. package/dist/components/atoms/radio/radio.d.mts +2 -5
  22. package/dist/components/atoms/radio/radio.d.mts.map +1 -1
  23. package/dist/components/atoms/radio/radio.mjs +0 -1
  24. package/dist/components/atoms/radio/radio.mjs.map +1 -1
  25. package/dist/components/atoms/rich-text-editor/content-classes.mjs +1 -1
  26. package/dist/components/atoms/rich-text-editor/content-classes.mjs.map +1 -1
  27. package/dist/components/atoms/rich-text-editor/rich-text-editor.mjs +1 -1
  28. package/dist/components/atoms/rich-text-editor/rich-text-editor.mjs.map +1 -1
  29. package/dist/components/atoms/rich-text-editor/toolbar-button.mjs.map +1 -1
  30. package/dist/components/atoms/rich-text-editor/toolbar-presets.mjs.map +1 -1
  31. package/dist/components/atoms/rich-text-editor/toolbar.mjs +1 -1
  32. package/dist/components/atoms/rich-text-editor/toolbar.mjs.map +1 -1
  33. package/dist/components/atoms/select.mjs +5 -1
  34. package/dist/components/atoms/select.mjs.map +1 -1
  35. package/dist/components/atoms/slider/slider.mjs.map +1 -1
  36. package/dist/components/atoms/switch.d.mts +1 -1
  37. package/dist/components/atoms/switch.d.mts.map +1 -1
  38. package/dist/components/atoms/switch.mjs +3 -3
  39. package/dist/components/atoms/switch.mjs.map +1 -1
  40. package/dist/components/molecules/collapse.mjs +3 -10
  41. package/dist/components/molecules/collapse.mjs.map +1 -1
  42. package/dist/components/organisms/drawer.d.mts +1 -2
  43. package/dist/components/organisms/drawer.d.mts.map +1 -1
  44. package/dist/components/organisms/drawer.mjs +5 -7
  45. package/dist/components/organisms/drawer.mjs.map +1 -1
  46. package/dist/components/organisms/modal.d.mts.map +1 -1
  47. package/dist/components/organisms/modal.mjs +1 -3
  48. package/dist/components/organisms/modal.mjs.map +1 -1
  49. package/dist/components/templates/container.d.mts +4 -3
  50. package/dist/components/templates/container.d.mts.map +1 -1
  51. package/dist/components/templates/container.mjs +10 -6
  52. package/dist/components/templates/container.mjs.map +1 -1
  53. package/dist/components/templates/index.d.mts +13 -0
  54. package/dist/components/templates/layout/content.d.mts +4 -3
  55. package/dist/components/templates/layout/content.d.mts.map +1 -1
  56. package/dist/components/templates/layout/content.mjs +14 -9
  57. package/dist/components/templates/layout/content.mjs.map +1 -1
  58. package/dist/core/accordion.d.mts +1 -1
  59. package/dist/core/accordion.mjs +12 -12
  60. package/dist/core/accordion.mjs.map +1 -1
  61. package/dist/core/badge.d.mts +5 -17
  62. package/dist/core/badge.d.mts.map +1 -1
  63. package/dist/core/badge.mjs +12 -21
  64. package/dist/core/badge.mjs.map +1 -1
  65. package/dist/core/button.d.mts +7 -6
  66. package/dist/core/button.d.mts.map +1 -1
  67. package/dist/core/button.mjs +4 -4
  68. package/dist/core/button.mjs.map +1 -1
  69. package/dist/core/calendar.mjs +2 -1
  70. package/dist/core/calendar.mjs.map +1 -1
  71. package/dist/core/checkbox.d.mts +1 -1
  72. package/dist/core/checkbox.mjs +14 -14
  73. package/dist/core/checkbox.mjs.map +1 -1
  74. package/dist/core/dialog.d.mts +1 -1
  75. package/dist/core/dialog.mjs +25 -33
  76. package/dist/core/dialog.mjs.map +1 -1
  77. package/dist/core/drawer.d.mts +1 -1
  78. package/dist/core/drawer.mjs +45 -46
  79. package/dist/core/drawer.mjs.map +1 -1
  80. package/dist/core/label.d.mts +1 -2
  81. package/dist/core/label.mjs +1 -3
  82. package/dist/core/label.mjs.map +1 -1
  83. package/dist/core/popover.d.mts +1 -1
  84. package/dist/core/popover.mjs +42 -37
  85. package/dist/core/popover.mjs.map +1 -1
  86. package/dist/core/progress.d.mts +1 -1
  87. package/dist/core/progress.mjs +7 -10
  88. package/dist/core/progress.mjs.map +1 -1
  89. package/dist/core/radio-group.d.mts +3 -7
  90. package/dist/core/radio-group.mjs +14 -13
  91. package/dist/core/radio-group.mjs.map +1 -1
  92. package/dist/core/select.d.mts +7 -3
  93. package/dist/core/select.d.mts.map +1 -1
  94. package/dist/core/select.mjs +60 -56
  95. package/dist/core/select.mjs.map +1 -1
  96. package/dist/core/separator.d.mts +1 -1
  97. package/dist/core/separator.mjs +6 -5
  98. package/dist/core/separator.mjs.map +1 -1
  99. package/dist/core/slider.d.mts +1 -1
  100. package/dist/core/slider.mjs +38 -27
  101. package/dist/core/slider.mjs.map +1 -1
  102. package/dist/core/switch.d.mts +1 -1
  103. package/dist/core/switch.mjs +15 -15
  104. package/dist/core/switch.mjs.map +1 -1
  105. package/dist/index.d.mts +1 -0
  106. package/dist/lib/z-layers.mjs +4 -6
  107. package/dist/lib/z-layers.mjs.map +1 -1
  108. package/dist/providers/config/config.mjs +2 -2
  109. package/dist/providers/config/config.mjs.map +1 -1
  110. package/dist/style.css +327 -462
  111. package/package.json +7 -20
  112. package/dist/core/radio-group.d.mts.map +0 -1
@@ -3,10 +3,10 @@ import { __exportAll } from "../_virtual/_rolldown/runtime.mjs";
3
3
  import { cn } from "../utils.mjs";
4
4
  import * as React$1 from "react";
5
5
  import { jsx, jsxs } from "react/jsx-runtime";
6
- import * as SliderPrimitive from "@radix-ui/react-slider";
6
+ import { Slider } from "@base-ui/react/slider";
7
7
  //#region src/core/slider.tsx
8
- var slider_exports = /* @__PURE__ */ __exportAll({ Slider: () => Slider });
9
- function Slider({ className, defaultValue, value, min = 0, max = 100, ...props }) {
8
+ var slider_exports = /* @__PURE__ */ __exportAll({ Slider: () => Slider$1 });
9
+ function Slider$1({ className, defaultValue, value, min = 0, max = 100, ...props }) {
10
10
  const thumbs = React$1.useMemo(() => {
11
11
  if (Array.isArray(value)) return value;
12
12
  if (Array.isArray(defaultValue)) return defaultValue;
@@ -17,38 +17,49 @@ function Slider({ className, defaultValue, value, min = 0, max = 100, ...props }
17
17
  min,
18
18
  max
19
19
  ]);
20
- return /* @__PURE__ */ jsxs(SliderPrimitive.Root, {
20
+ return /* @__PURE__ */ jsx(Slider.Root, {
21
+ render: /* @__PURE__ */ jsx("span", {}),
21
22
  "data-slot": "slider",
22
23
  defaultValue,
23
24
  value,
24
25
  min,
25
26
  max,
26
- className: cn(`relative flex w-full touch-none items-center select-none
27
- data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50
28
- data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44
29
- data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col`, className),
27
+ className: cn(`relative flex w-full items-center data-[disabled]:cursor-not-allowed
28
+ data-[disabled]:opacity-50 data-[orientation=vertical]:h-full
29
+ data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto
30
+ data-[orientation=vertical]:flex-col`, className),
30
31
  ...props,
31
- children: [/* @__PURE__ */ jsx(SliderPrimitive.Track, {
32
- "data-slot": "slider-track",
33
- className: cn(`bg-input relative grow overflow-hidden rounded-full
34
- data-[orientation=horizontal]:h-1.5
35
- data-[orientation=horizontal]:w-full
36
- data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5`),
37
- children: /* @__PURE__ */ jsx(SliderPrimitive.Range, {
38
- "data-slot": "slider-range",
39
- className: cn(`bg-primary absolute data-[orientation=horizontal]:h-full
40
- data-[orientation=vertical]:w-full`)
41
- })
42
- }), Array.from({ length: thumbs.length }, (_, index) => /* @__PURE__ */ jsx(SliderPrimitive.Thumb, {
43
- "data-slot": "slider-thumb",
44
- className: cn(`border-primary bg-background ring-ring/50 block size-4 shrink-0
45
- rounded-full border shadow-sm transition-[color,box-shadow]
46
- hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden
47
- disabled:pointer-events-none disabled:opacity-50`)
48
- }, index))]
32
+ children: /* @__PURE__ */ jsxs(Slider.Control, {
33
+ className: cn(`relative flex w-full touch-none items-center select-none
34
+ data-[orientation=vertical]:h-full
35
+ data-[orientation=vertical]:min-h-44
36
+ data-[orientation=vertical]:w-auto
37
+ data-[orientation=vertical]:flex-col`),
38
+ children: [/* @__PURE__ */ jsx(Slider.Track, {
39
+ "data-slot": "slider-track",
40
+ className: cn(`bg-input relative grow overflow-hidden rounded-full
41
+ data-[orientation=horizontal]:h-1.5
42
+ data-[orientation=horizontal]:w-full
43
+ data-[orientation=vertical]:h-full
44
+ data-[orientation=vertical]:w-1.5`),
45
+ children: /* @__PURE__ */ jsx(Slider.Indicator, {
46
+ "data-slot": "slider-range",
47
+ className: cn(`bg-primary data-[orientation=horizontal]:h-full
48
+ data-[orientation=vertical]:w-full`)
49
+ })
50
+ }), Array.from({ length: thumbs.length }, (_, index) => /* @__PURE__ */ jsx(Slider.Thumb, {
51
+ "data-slot": "slider-thumb",
52
+ index,
53
+ className: cn(`border-primary bg-background ring-ring/50 block size-4 shrink-0
54
+ rounded-full border shadow-sm transition-[color,box-shadow]
55
+ hover:ring-4 has-[:focus-visible]:ring-4
56
+ has-[:focus-visible]:outline-hidden
57
+ data-disabled:pointer-events-none data-disabled:opacity-50`)
58
+ }, index))]
59
+ })
49
60
  });
50
61
  }
51
62
  //#endregion
52
- export { Slider, slider_exports };
63
+ export { Slider$1 as Slider, slider_exports };
53
64
 
54
65
  //# sourceMappingURL=slider.mjs.map
@@ -1 +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"}
1
+ {"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"}
@@ -1,2 +1,2 @@
1
1
  import "react";
2
- import "@radix-ui/react-switch";
2
+ import { Switch } from "@base-ui/react/switch";
@@ -3,35 +3,35 @@ import { __exportAll } from "../_virtual/_rolldown/runtime.mjs";
3
3
  import { cn } from "../utils.mjs";
4
4
  import "react";
5
5
  import { jsx, jsxs } from "react/jsx-runtime";
6
- import * as SwitchPrimitive from "@radix-ui/react-switch";
6
+ import { Switch } from "@base-ui/react/switch";
7
7
  //#region src/core/switch.tsx
8
- var switch_exports = /* @__PURE__ */ __exportAll({ Switch: () => Switch });
9
- function Switch({ className, size = "default", handleClassName, children, ...props }) {
10
- return /* @__PURE__ */ jsxs(SwitchPrimitive.Root, {
8
+ var switch_exports = /* @__PURE__ */ __exportAll({ Switch: () => Switch$1 });
9
+ function Switch$1({ className, size = "default", handleClassName, children, ...props }) {
10
+ return /* @__PURE__ */ jsxs(Switch.Root, {
11
11
  "data-slot": "switch",
12
12
  "data-size": size,
13
- className: cn(`peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input
13
+ className: cn(`peer data-checked:bg-primary data-unchecked:bg-input
14
14
  focus-visible:border-ring focus-visible:ring-ring/50
15
- dark:data-[state=unchecked]:bg-input/80 group/switch inline-flex
16
- shrink-0 items-center rounded-full border border-transparent shadow-xs
15
+ dark:data-unchecked:bg-input/80 group/switch inline-flex shrink-0
16
+ items-center rounded-full border border-transparent shadow-xs
17
17
  transition-all outline-none focus-visible:ring-[3px]
18
- disabled:cursor-not-allowed disabled:opacity-50
18
+ data-disabled:cursor-not-allowed data-disabled:opacity-50
19
19
  data-[size=default]:h-[1.15rem] data-[size=default]:w-8
20
20
  data-[size=sm]:h-3.5 data-[size=sm]:w-6`, className),
21
21
  ...props,
22
- children: [/* @__PURE__ */ jsx(SwitchPrimitive.Thumb, {
22
+ children: [/* @__PURE__ */ jsx(Switch.Thumb, {
23
23
  "data-slot": "switch-thumb",
24
- className: cn(`bg-background dark:data-[state=unchecked]:bg-foreground
25
- dark:data-[state=checked]:bg-primary-foreground pointer-events-none
26
- block rounded-full ring-0 transition-transform
24
+ className: cn(`bg-background dark:data-unchecked:bg-foreground
25
+ dark:data-checked:bg-primary-foreground pointer-events-none block
26
+ rounded-full ring-0 transition-transform
27
27
  group-data-[size=default]/switch:size-4
28
28
  group-data-[size=sm]/switch:size-3
29
- data-[state=checked]:translate-x-[calc(100%-2px)]
30
- data-[state=unchecked]:translate-x-0`, handleClassName)
29
+ data-checked:translate-x-[calc(100%-2px)]
30
+ data-unchecked:translate-x-0`, handleClassName)
31
31
  }), children]
32
32
  });
33
33
  }
34
34
  //#endregion
35
- export { Switch, switch_exports };
35
+ export { Switch$1 as Switch, switch_exports };
36
36
 
37
37
  //# sourceMappingURL=switch.mjs.map
@@ -1 +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\n/*\n * Vendored from shadcn's `new-york-v4` switch registry entry.\n *\n * Local patches — re-apply these after any `shadcn add switch`:\n * 1. Import `cn` from `@repo/ui/utils` (upstream uses its `cn` alias) and\n * `SwitchPrimitive` from `@radix-ui/react-switch` (upstream uses the unified\n * `radix-ui` package, which this repo doesn't install).\n * 2. `CustomProps` adds `handleClassName` (merged onto `SwitchPrimitive.Thumb`)\n * and `children` (rendered inside the Root, after the Thumb).\n *\n * Why this stays a local patch rather than moving to `atoms/switch` (#361):\n * both reach *into* the primitive's sub-tree. `atoms/switch` is an antd-style\n * switch whose public `classNames.handle` is a runtime string that has to land\n * on the Thumb, and whose `checkedChildren`/`unCheckedChildren` labels render\n * inside the track (the Root) — neither is expressible through a verbatim\n * primitive + `className` composition, so this one is irreducibly structural\n * (like the four in #363). The rest of `shadcn add switch --diff` is class\n * ordering / prettier wrapping, not a patch.\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":";;;;;;;;AAgCA,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"}
1
+ {"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 CHANGED
@@ -53,4 +53,5 @@ import Result, { Props as Props$17 } from "./components/templates/result.mjs";
53
53
  import PageHeader, { Props as Props$16 } from "./components/templates/page-header.mjs";
54
54
  import Row, { Props as Props$19 } from "./components/templates/grid/row.mjs";
55
55
  import Col, { Props as Props$1 } from "./components/templates/grid/col.mjs";
56
+ import "./components/templates/index.mjs";
56
57
  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 };
@@ -6,8 +6,8 @@
6
6
  *
7
7
  * **They are all deliberately equal.** Nothing here ranks against anything else
8
8
  * here by z-index; relative order falls out of DOM order, which is what puts a
9
- * Select popup above the Drawer it was opened from (Radix appends each portal to
10
- * `body` as it opens) and a Drawer above `Layout.Header`. Give one of them a
9
+ * Select popup above the Drawer it was opened from (Base UI appends each portal
10
+ * to `body` as it opens) and a Drawer above `Layout.Header`. Give one of them a
11
11
  * different value and those pairs silently invert. `Modal.confirm` and the
12
12
  * imperative `Toast`/`Modal` stack roots sit above this on purpose (`z-10000` /
13
13
  * `zIndex = '10000'`), so an imperative confirm opened from inside a declarative
@@ -18,10 +18,8 @@
18
18
  * that assumption: Infima (Docusaurus) puts its navbar at `--ifm-z-index-fixed: 200`
19
19
  * and its own overlay at 400, so on this repo's own docs site a right-anchored
20
20
  * Drawer had its top 60px — the entire header, title and close button — painted
21
- * under the navbar. It still hit-tested fine, because vaul/Radix mark outside
22
- * content `pointer-events: none` while a modal is open, so the close button was
23
- * clickable but invisible. 1000 clears Infima's whole scale and sits in the band
24
- * every major library reserves for modals (antd 1000, Bootstrap 1055, MUI 1300).
21
+ * under the navbar. 1000 clears Infima's whole scale and sits in the band every
22
+ * major library reserves for modals (antd 1000, Bootstrap 1055, MUI 1300).
25
23
  *
26
24
  * Retune per call site with `className` / `classNames.mask` — both land after
27
25
  * this in `cn()`, so `tailwind-merge` lets them win.
@@ -1 +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"}
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 (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"}
@@ -4,7 +4,7 @@ import { Context, DEFAULT_LOCALE, useConfig } from "./context.mjs";
4
4
  import { resolveDark, useSystemPrefersDark } from "./dark-mode.mjs";
5
5
  import { registerRootConfig } from "./registry.mjs";
6
6
  import { useCallback, useEffect, useMemo, useState } from "react";
7
- import { DirectionProvider } from "@radix-ui/react-direction";
7
+ import { DirectionProvider } from "@base-ui/react/direction-provider";
8
8
  import { jsx } from "react/jsx-runtime";
9
9
  //#region src/providers/config/config.tsx
10
10
  const tokenToCssVar = {
@@ -130,7 +130,7 @@ const Config = ({ theme = {}, locale = {}, getContainer, componentSize, directio
130
130
  }) : children
131
131
  });
132
132
  return direction ? /* @__PURE__ */ jsx(DirectionProvider, {
133
- dir: direction,
133
+ direction,
134
134
  children: content
135
135
  }) : content;
136
136
  };
@@ -1 +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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"}
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 '@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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"}