@moduix/react 2.5.0 → 2.6.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 (200) hide show
  1. package/README.md +65 -86
  2. package/THIRD_PARTY_NOTICES.md +49 -0
  3. package/dist/components/accordion/Accordion.js +7 -8
  4. package/dist/components/alert/Alert.js +6 -7
  5. package/dist/components/alert/Alert_module.css +3 -16
  6. package/dist/components/angle-slider/AngleSlider.d.ts +5 -11
  7. package/dist/components/angle-slider/AngleSlider.js +17 -59
  8. package/dist/components/aspect-ratio/AspectRatio.js +1 -2
  9. package/dist/components/aspect-ratio/AspectRatio_module.css +0 -13
  10. package/dist/components/avatar/Avatar.d.ts +3 -6
  11. package/dist/components/avatar/Avatar.js +7 -50
  12. package/dist/components/avatar/Avatar.module.js +1 -2
  13. package/dist/components/avatar/Avatar_module.css +0 -6
  14. package/dist/components/badge/Badge.d.ts +2 -2
  15. package/dist/components/badge/Badge.js +5 -10
  16. package/dist/components/badge/Badge_module.css +7 -14
  17. package/dist/components/bleed/Bleed.js +1 -2
  18. package/dist/components/breadcrumbs/Breadcrumbs.d.ts +1 -1
  19. package/dist/components/breadcrumbs/Breadcrumbs.js +16 -32
  20. package/dist/components/breadcrumbs/Breadcrumbs_module.css +12 -14
  21. package/dist/components/button/Button.d.ts +4 -4
  22. package/dist/components/button/Button.js +1 -2
  23. package/dist/components/button/Button_module.css +2 -7
  24. package/dist/components/card/Card.d.ts +15 -15
  25. package/dist/components/card/Card.js +10 -11
  26. package/dist/components/card/Card_module.css +1 -17
  27. package/dist/components/carousel/Carousel.js +12 -13
  28. package/dist/components/carousel/Carousel_module.css +10 -3
  29. package/dist/components/chart/Chart.d.ts +9 -8
  30. package/dist/components/chart/Chart.js +7 -8
  31. package/dist/components/chart/Chart_module.css +0 -2
  32. package/dist/components/checkbox/Checkbox.d.ts +3 -2
  33. package/dist/components/checkbox/Checkbox.js +12 -35
  34. package/dist/components/clipboard/Clipboard.js +8 -9
  35. package/dist/components/close-button/CloseButton.js +1 -2
  36. package/dist/components/close-button/CloseButton_module.css +1 -10
  37. package/dist/components/collapsible/Collapsible.js +6 -9
  38. package/dist/components/collapsible/Collapsible_module.css +2 -4
  39. package/dist/components/color-picker/ColorPicker.d.ts +4 -3
  40. package/dist/components/color-picker/ColorPicker.js +32 -45
  41. package/dist/components/color-picker/ColorPicker_module.css +0 -1
  42. package/dist/components/combobox/Combobox.d.ts +5 -5
  43. package/dist/components/combobox/Combobox.js +20 -29
  44. package/dist/components/combobox/Combobox_module.css +0 -1
  45. package/dist/components/command-palette/CommandPalette.d.ts +7 -18
  46. package/dist/components/command-palette/CommandPalette.js +51 -78
  47. package/dist/components/command-palette/CommandPalette_module.css +11 -18
  48. package/dist/components/container/Container.js +1 -2
  49. package/dist/components/date-input/DateInput.d.ts +7 -9
  50. package/dist/components/date-input/DateInput.js +14 -44
  51. package/dist/components/date-input/DateInput_module.css +0 -1
  52. package/dist/components/date-picker/DatePicker.d.ts +1 -1
  53. package/dist/components/date-picker/DatePicker.js +34 -43
  54. package/dist/components/date-picker/DatePicker.module.js +1 -1
  55. package/dist/components/date-picker/DatePicker_module.css +14 -4
  56. package/dist/components/dialog/Dialog.d.ts +1 -1
  57. package/dist/components/dialog/Dialog.js +11 -12
  58. package/dist/components/drawer/Drawer.d.ts +6 -3
  59. package/dist/components/drawer/Drawer.js +33 -24
  60. package/dist/components/editable/Editable.d.ts +1 -1
  61. package/dist/components/editable/Editable.js +10 -11
  62. package/dist/components/empty/Empty.js +6 -7
  63. package/dist/components/field/Field.js +10 -11
  64. package/dist/components/fieldset/Fieldset.js +5 -6
  65. package/dist/components/file-upload/FileUpload.d.ts +3 -2
  66. package/dist/components/file-upload/FileUpload.js +28 -55
  67. package/dist/components/file-upload/FileUpload_module.css +4 -13
  68. package/dist/components/floating-panel/FloatingPanel.d.ts +2 -2
  69. package/dist/components/floating-panel/FloatingPanel.js +14 -15
  70. package/dist/components/floating-panel/FloatingPanel_module.css +4 -17
  71. package/dist/components/heading/Heading.js +1 -2
  72. package/dist/components/highlight/Highlight.js +1 -2
  73. package/dist/components/hover-card/HoverCard.d.ts +2 -1
  74. package/dist/components/hover-card/HoverCard.js +15 -6
  75. package/dist/components/hover-card/HoverCard.module.js +1 -0
  76. package/dist/components/hover-card/HoverCard_module.css +18 -3
  77. package/dist/components/image/Image.js +1 -2
  78. package/dist/components/image-cropper/ImageCropper.d.ts +1 -1
  79. package/dist/components/image-cropper/ImageCropper.js +7 -8
  80. package/dist/components/input/Input.d.ts +4 -4
  81. package/dist/components/input/Input.js +1 -2
  82. package/dist/components/input-group/InputGroup.d.ts +5 -5
  83. package/dist/components/input-group/InputGroup.js +5 -6
  84. package/dist/components/json-tree-view/JsonTreeView.js +3 -4
  85. package/dist/components/json-tree-view/JsonTreeView_module.css +26 -10
  86. package/dist/components/kbd/Kbd.js +2 -3
  87. package/dist/components/lightbox/Lightbox.d.ts +1 -1
  88. package/dist/components/lightbox/Lightbox.js +13 -14
  89. package/dist/components/lightbox/Lightbox_module.css +0 -3
  90. package/dist/components/list/List.js +2 -3
  91. package/dist/components/listbox/Listbox.d.ts +5 -5
  92. package/dist/components/listbox/Listbox.js +19 -25
  93. package/dist/components/listbox/Listbox.module.js +2 -2
  94. package/dist/components/listbox/Listbox_module.css +3 -13
  95. package/dist/components/marquee/Marquee.js +6 -7
  96. package/dist/components/menu/Menu.d.ts +2 -1
  97. package/dist/components/menu/Menu.js +34 -41
  98. package/dist/components/menu/Menu.module.js +1 -1
  99. package/dist/components/menu/Menu_module.css +8 -8
  100. package/dist/components/native-select/NativeSelect.js +2 -3
  101. package/dist/components/native-select/NativeSelect_module.css +0 -1
  102. package/dist/components/navigation-menu/NavigationMenu.js +17 -36
  103. package/dist/components/navigation-menu/NavigationMenu.module.js +2 -3
  104. package/dist/components/navigation-menu/NavigationMenu_module.css +15 -32
  105. package/dist/components/number-input/NumberInput.js +9 -10
  106. package/dist/components/pagination/Pagination.js +17 -20
  107. package/dist/components/pagination/Pagination_module.css +1 -5
  108. package/dist/components/password-input/PasswordInput.js +7 -8
  109. package/dist/components/pin-input/PinInput.d.ts +3 -2
  110. package/dist/components/pin-input/PinInput.js +13 -54
  111. package/dist/components/popover/Popover.d.ts +5 -3
  112. package/dist/components/popover/Popover.js +16 -17
  113. package/dist/components/progress-circular/ProgressCircular.js +8 -9
  114. package/dist/components/progress-circular/ProgressCircular.module.js +1 -3
  115. package/dist/components/progress-circular/ProgressCircular_module.css +0 -10
  116. package/dist/components/progress-linear/ProgressLinear.js +7 -8
  117. package/dist/components/progress-linear/ProgressLinear.module.js +1 -5
  118. package/dist/components/progress-linear/ProgressLinear_module.css +0 -20
  119. package/dist/components/qr-code/QrCode.js +6 -7
  120. package/dist/components/radio-group/RadioGroup.d.ts +1 -0
  121. package/dist/components/radio-group/RadioGroup.js +13 -27
  122. package/dist/components/radio-group/RadioGroup_module.css +0 -1
  123. package/dist/components/rating-group/RatingGroup.d.ts +1 -0
  124. package/dist/components/rating-group/RatingGroup.js +12 -29
  125. package/dist/components/rating-group/RatingGroup_module.css +1 -1
  126. package/dist/components/scroll-area/ScrollArea.js +7 -8
  127. package/dist/components/segment-group/SegmentGroup.d.ts +1 -0
  128. package/dist/components/segment-group/SegmentGroup.js +16 -30
  129. package/dist/components/segment-group/SegmentGroup_module.css +4 -0
  130. package/dist/components/select/Select.d.ts +4 -7
  131. package/dist/components/select/Select.js +36 -86
  132. package/dist/components/select/Select.module.js +1 -1
  133. package/dist/components/select/Select_module.css +4 -31
  134. package/dist/components/separator/Separator.d.ts +6 -6
  135. package/dist/components/separator/Separator.js +1 -2
  136. package/dist/components/sidebar/Sidebar.d.ts +24 -22
  137. package/dist/components/sidebar/Sidebar.js +88 -75
  138. package/dist/components/sidebar/Sidebar.module.js +2 -3
  139. package/dist/components/sidebar/Sidebar_module.css +112 -178
  140. package/dist/components/signature-pad/SignaturePad.d.ts +5 -8
  141. package/dist/components/signature-pad/SignaturePad.js +17 -46
  142. package/dist/components/signature-pad/SignaturePad_module.css +0 -1
  143. package/dist/components/simple-grid/SimpleGrid.js +13 -8
  144. package/dist/components/skeleton/Skeleton.d.ts +2 -2
  145. package/dist/components/skeleton/Skeleton.js +1 -2
  146. package/dist/components/slider/Slider.d.ts +2 -2
  147. package/dist/components/slider/Slider.js +18 -32
  148. package/dist/components/spinner/Spinner.d.ts +2 -2
  149. package/dist/components/spinner/Spinner.js +1 -2
  150. package/dist/components/split-button/SplitButton.d.ts +4 -4
  151. package/dist/components/split-button/SplitButton.js +11 -8
  152. package/dist/components/splitter/Splitter.js +5 -6
  153. package/dist/components/splitter/Splitter_module.css +2 -10
  154. package/dist/components/stack/Stack.d.ts +6 -6
  155. package/dist/components/stack/Stack.js +4 -5
  156. package/dist/components/stack/Stack_module.css +1 -1
  157. package/dist/components/steps/Steps.js +12 -13
  158. package/dist/components/steps/Steps_module.css +2 -3
  159. package/dist/components/swap/Swap.js +3 -4
  160. package/dist/components/switch/Switch.d.ts +3 -2
  161. package/dist/components/switch/Switch.js +12 -35
  162. package/dist/components/switch/Switch_module.css +0 -1
  163. package/dist/components/table/Table.d.ts +5 -5
  164. package/dist/components/table/Table.js +12 -13
  165. package/dist/components/tabs/Tabs.js +6 -7
  166. package/dist/components/tabs/Tabs_module.css +5 -10
  167. package/dist/components/tag/Tag.js +5 -6
  168. package/dist/components/tag/Tag_module.css +2 -4
  169. package/dist/components/tags-input/TagsInput.d.ts +3 -3
  170. package/dist/components/tags-input/TagsInput.js +21 -75
  171. package/dist/components/tags-input/TagsInput_module.css +0 -1
  172. package/dist/components/text/Text.js +1 -2
  173. package/dist/components/textarea/Textarea.js +1 -2
  174. package/dist/components/timer/Timer.js +7 -8
  175. package/dist/components/toast/Toast.d.ts +1 -1
  176. package/dist/components/toast/Toast.js +7 -8
  177. package/dist/components/toast/Toast_module.css +1 -2
  178. package/dist/components/toc/Toc.js +10 -11
  179. package/dist/components/toc/Toc_module.css +2 -2
  180. package/dist/components/toggle/Toggle.js +2 -3
  181. package/dist/components/toggle-group/ToggleGroup.d.ts +1 -1
  182. package/dist/components/toggle-group/ToggleGroup.js +3 -4
  183. package/dist/components/tooltip/Tooltip.d.ts +1 -1
  184. package/dist/components/tooltip/Tooltip.js +6 -7
  185. package/dist/components/tooltip/Tooltip_module.css +1 -1
  186. package/dist/components/tour/Tour.d.ts +1 -1
  187. package/dist/components/tour/Tour.js +14 -15
  188. package/dist/components/tree-view/TreeView.d.ts +4 -4
  189. package/dist/components/tree-view/TreeView.js +17 -18
  190. package/dist/components/tree-view/TreeView_module.css +39 -12
  191. package/dist/components/typeset/Typeset.js +2 -3
  192. package/dist/components/typeset/Typeset_module.css +300 -159
  193. package/dist/internal/icons/ui/Icons.d.ts +9 -30
  194. package/dist/internal/icons/ui/Icons.js +67 -807
  195. package/dist/internal/icons/ui/index.d.ts +1 -1
  196. package/dist/styles/animations.css +310 -0
  197. package/dist/styles/style.css +168 -2
  198. package/package.json +25 -25
  199. package/dist/internal/normalizeClassName.d.ts +0 -1
  200. package/dist/internal/normalizeClassName.js +0 -2
@@ -77,7 +77,7 @@
77
77
  border-radius: var(--moduix-tooltip-radius, var(--moduix-radius-md));
78
78
  background-color: var(--moduix-tooltip-bg, var(--moduix-color-popover));
79
79
  color: var(--moduix-tooltip-color, var(--moduix-color-popover-foreground));
80
- box-shadow: var(--moduix-tooltip-shadow, var(--moduix-shadow-lg));
80
+ box-shadow: var(--moduix-tooltip-shadow, var(--moduix-shadow-md));
81
81
  font-size: var(--moduix-tooltip-font-size, var(--moduix-text-sm));
82
82
  line-height: var(--moduix-tooltip-line-height, var(--moduix-line-height-text-sm));
83
83
  text-align: center;
@@ -1,6 +1,6 @@
1
1
  import { Tour as TourPrimitive, useTour, useTourContext, waitForElement, waitForElementValue, waitForEvent, waitForPromise } from '@ark-ui/react/tour';
2
2
  import type { ComponentProps } from 'react';
3
- import { type OverlayPortalProps } from '../../internal/overlayPortal';
3
+ import { type OverlayPortalProps } from '../../internal/overlayPortal.js';
4
4
  type TourRootProps = ComponentProps<typeof TourPrimitive.Root> & OverlayPortalProps;
5
5
  declare function TourRoot({ lazyMount, portalled, portalRef, unmountOnExit, ...props }: TourRootProps): import("react").JSX.Element;
6
6
  declare function TourActionList({ className }: {
@@ -4,7 +4,6 @@ import { ark } from "@ark-ui/react/factory";
4
4
  import { Tour, useTour, useTourContext, waitForElement, waitForElementValue, waitForEvent, waitForPromise } from "@ark-ui/react/tour";
5
5
  import { clsx } from "clsx";
6
6
  import { forwardRef } from "react";
7
- import { normalizeClassName } from "../../internal/normalizeClassName.js";
8
7
  import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.js";
9
8
  import { CloseButton } from "../close-button/index.js";
10
9
  import Tour_module from "./Tour.module.js";
@@ -25,7 +24,7 @@ const Tour_TourBackdrop = /*#__PURE__*/ forwardRef(function({ className, ...prop
25
24
  children: /*#__PURE__*/ jsx(Tour.Backdrop, {
26
25
  ref: ref,
27
26
  "data-slot": "tour-backdrop",
28
- className: clsx(Tour_module.backdrop, normalizeClassName(className)),
27
+ className: clsx(Tour_module.backdrop, className),
29
28
  ...props
30
29
  })
31
30
  });
@@ -35,7 +34,7 @@ const Tour_TourSpotlight = /*#__PURE__*/ forwardRef(function({ className, ...pro
35
34
  children: /*#__PURE__*/ jsx(Tour.Spotlight, {
36
35
  ref: ref,
37
36
  "data-slot": "tour-spotlight",
38
- className: clsx(Tour_module.spotlight, normalizeClassName(className)),
37
+ className: clsx(Tour_module.spotlight, className),
39
38
  ...props
40
39
  })
41
40
  });
@@ -45,7 +44,7 @@ const Tour_TourPositioner = /*#__PURE__*/ forwardRef(function({ className, ...pr
45
44
  children: /*#__PURE__*/ jsx(Tour.Positioner, {
46
45
  ref: ref,
47
46
  "data-slot": "tour-positioner",
48
- className: clsx(Tour_module.positioner, normalizeClassName(className)),
47
+ className: clsx(Tour_module.positioner, className),
49
48
  ...props
50
49
  })
51
50
  });
@@ -54,7 +53,7 @@ const Tour_TourContent = /*#__PURE__*/ forwardRef(function({ className, ...props
54
53
  return /*#__PURE__*/ jsx(Tour.Content, {
55
54
  ref: ref,
56
55
  "data-slot": "tour-content",
57
- className: clsx(Tour_module.content, normalizeClassName(className)),
56
+ className: clsx(Tour_module.content, className),
58
57
  ...props
59
58
  });
60
59
  });
@@ -62,7 +61,7 @@ const Tour_TourArrow = /*#__PURE__*/ forwardRef(function({ className, children,
62
61
  return /*#__PURE__*/ jsx(Tour.Arrow, {
63
62
  ref: ref,
64
63
  "data-slot": "tour-arrow",
65
- className: clsx(Tour_module.arrow, normalizeClassName(className)),
64
+ className: clsx(Tour_module.arrow, className),
66
65
  ...props,
67
66
  children: children ?? /*#__PURE__*/ jsx(Tour_TourArrowTip, {})
68
67
  });
@@ -71,7 +70,7 @@ const Tour_TourArrowTip = /*#__PURE__*/ forwardRef(function({ className, ...prop
71
70
  return /*#__PURE__*/ jsx(Tour.ArrowTip, {
72
71
  ref: ref,
73
72
  "data-slot": "tour-arrow-tip",
74
- className: clsx(Tour_module.arrowTip, normalizeClassName(className)),
73
+ className: clsx(Tour_module.arrowTip, className),
75
74
  ...props
76
75
  });
77
76
  });
@@ -79,7 +78,7 @@ const Tour_TourTitle = /*#__PURE__*/ forwardRef(function({ className, ...props }
79
78
  return /*#__PURE__*/ jsx(Tour.Title, {
80
79
  ref: ref,
81
80
  "data-slot": "tour-title",
82
- className: clsx(Tour_module.title, normalizeClassName(className)),
81
+ className: clsx(Tour_module.title, className),
83
82
  ...props
84
83
  });
85
84
  });
@@ -87,7 +86,7 @@ const Tour_TourDescription = /*#__PURE__*/ forwardRef(function({ className, ...p
87
86
  return /*#__PURE__*/ jsx(Tour.Description, {
88
87
  ref: ref,
89
88
  "data-slot": "tour-description",
90
- className: clsx(Tour_module.description, normalizeClassName(className)),
89
+ className: clsx(Tour_module.description, className),
91
90
  ...props
92
91
  });
93
92
  });
@@ -95,7 +94,7 @@ const Tour_TourProgressText = /*#__PURE__*/ forwardRef(function({ className, ...
95
94
  return /*#__PURE__*/ jsx(Tour.ProgressText, {
96
95
  ref: ref,
97
96
  "data-slot": "tour-progress-text",
98
- className: clsx(Tour_module.progressText, normalizeClassName(className)),
97
+ className: clsx(Tour_module.progressText, className),
99
98
  ...props
100
99
  });
101
100
  });
@@ -103,7 +102,7 @@ const Tour_TourBody = /*#__PURE__*/ forwardRef(function({ className, ...props },
103
102
  return /*#__PURE__*/ jsx(ark.div, {
104
103
  ref: ref,
105
104
  "data-slot": "tour-body",
106
- className: clsx(Tour_module.body, normalizeClassName(className)),
105
+ className: clsx(Tour_module.body, className),
107
106
  ...props
108
107
  });
109
108
  });
@@ -112,7 +111,7 @@ const Tour_TourCloseTrigger = /*#__PURE__*/ forwardRef(function({ asChild, class
112
111
  ref: ref,
113
112
  asChild: asChild,
114
113
  "data-slot": "tour-close-trigger",
115
- className: clsx(!asChild && Tour_module.closeTrigger, normalizeClassName(className)),
114
+ className: clsx(!asChild && Tour_module.closeTrigger, className),
116
115
  ...props
117
116
  });
118
117
  });
@@ -124,7 +123,7 @@ const Tour_TourCloseIcon = /*#__PURE__*/ forwardRef(function({ className, childr
124
123
  ref: ref,
125
124
  "data-slot": "tour-close-icon",
126
125
  "aria-label": ariaLabel,
127
- className: clsx(Tour_module.closeIcon, normalizeClassName(className)),
126
+ className: clsx(Tour_module.closeIcon, className),
128
127
  children: children
129
128
  })
130
129
  });
@@ -133,7 +132,7 @@ const Tour_TourControl = /*#__PURE__*/ forwardRef(function({ className, ...props
133
132
  return /*#__PURE__*/ jsx(Tour.Control, {
134
133
  ref: ref,
135
134
  "data-slot": "tour-control",
136
- className: clsx(Tour_module.control, normalizeClassName(className)),
135
+ className: clsx(Tour_module.control, className),
137
136
  ...props
138
137
  });
139
138
  });
@@ -142,7 +141,7 @@ const Tour_TourActionTrigger = /*#__PURE__*/ forwardRef(function({ asChild, clas
142
141
  ref: ref,
143
142
  asChild: asChild,
144
143
  "data-slot": "tour-action-trigger",
145
- className: clsx(!asChild && Tour_module.actionTrigger, normalizeClassName(className)),
144
+ className: clsx(!asChild && Tour_module.actionTrigger, className),
146
145
  ...props
147
146
  });
148
147
  });
@@ -1,4 +1,4 @@
1
- import { TreeView as TreeViewPrimitive, createFileTreeCollection, createTreeCollection, type TreeNode, type TreeViewLoadChildrenDetails, type TreeViewNodeProviderProps, type TreeViewNodeState, useTreeView, useTreeViewContext, useTreeViewNodeContext } from '@ark-ui/react/tree-view';
1
+ import { TreeView as TreeViewPrimitive, createFileTreeCollection, createTreeCollection, type TreeNode, type TreeViewLoadChildrenDetails, type TreeViewNodeProviderProps, type TreeViewNodeState, type TreeViewRootComponent, type TreeViewRootProviderComponent, useTreeView, useTreeViewContext, useTreeViewNodeContext } from '@ark-ui/react/tree-view';
2
2
  import type { ComponentProps, ReactNode } from 'react';
3
3
  declare function TreeViewNodeCheckboxIndicator({ className, children, indeterminate, ...props }: ComponentProps<typeof TreeViewPrimitive.NodeCheckboxIndicator>): import("react").JSX.Element;
4
4
  type TreeViewNodeRenderProps<T extends TreeNode> = {
@@ -12,9 +12,9 @@ type TreeViewNodeProps<T extends TreeNode> = {
12
12
  node: T;
13
13
  };
14
14
  declare function TreeViewNode<T extends TreeNode>({ children, indexPath, node }: TreeViewNodeProps<T>): import("react").JSX.Element;
15
- declare const TreeView: TreeViewPrimitive.RootComponent & {
16
- Root: TreeViewPrimitive.RootComponent;
17
- RootProvider: TreeViewPrimitive.RootProviderComponent;
15
+ declare const TreeView: TreeViewRootComponent & {
16
+ Root: TreeViewRootComponent;
17
+ RootProvider: TreeViewRootProviderComponent;
18
18
  Context: <T extends unknown>(props: TreeViewPrimitive.ContextProps<T>) => ReactNode;
19
19
  NodeContext: (props: TreeViewPrimitive.NodeContextProps) => ReactNode;
20
20
  Label: import("react").ForwardRefExoticComponent<Omit<TreeViewPrimitive.LabelProps & import("react").RefAttributes<HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
@@ -4,13 +4,12 @@ import { TreeView, createFileTreeCollection, createTreeCollection, useTreeView,
4
4
  import { clsx } from "clsx";
5
5
  import { forwardRef } from "react";
6
6
  import { CheckIcon, ChevronRightIcon, IndeterminateIcon } from "../../internal/icons/ui/index.js";
7
- import { normalizeClassName } from "../../internal/normalizeClassName.js";
8
7
  import TreeView_module from "./TreeView.module.js";
9
8
  const TreeView_TreeViewRoot = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
10
9
  return /*#__PURE__*/ jsx(TreeView.Root, {
11
10
  ref: ref,
12
11
  "data-slot": "tree-view-root",
13
- className: clsx(TreeView_module.root, normalizeClassName(className)),
12
+ className: clsx(TreeView_module.root, className),
14
13
  ...props
15
14
  });
16
15
  });
@@ -18,7 +17,7 @@ const TreeView_TreeViewRootProvider = /*#__PURE__*/ forwardRef(function({ classN
18
17
  return /*#__PURE__*/ jsx(TreeView.RootProvider, {
19
18
  ref: ref,
20
19
  "data-slot": "tree-view-root-provider",
21
- className: clsx(TreeView_module.root, normalizeClassName(className)),
20
+ className: clsx(TreeView_module.root, className),
22
21
  ...props
23
22
  });
24
23
  });
@@ -26,7 +25,7 @@ const TreeView_TreeViewLabel = /*#__PURE__*/ forwardRef(function({ className, ..
26
25
  return /*#__PURE__*/ jsx(TreeView.Label, {
27
26
  ref: ref,
28
27
  "data-slot": "tree-view-label",
29
- className: clsx(TreeView_module.label, normalizeClassName(className)),
28
+ className: clsx(TreeView_module.label, className),
30
29
  ...props
31
30
  });
32
31
  });
@@ -34,7 +33,7 @@ const TreeView_TreeViewTree = /*#__PURE__*/ forwardRef(function({ className, ...
34
33
  return /*#__PURE__*/ jsx(TreeView.Tree, {
35
34
  ref: ref,
36
35
  "data-slot": "tree-view-tree",
37
- className: clsx(TreeView_module.tree, normalizeClassName(className)),
36
+ className: clsx(TreeView_module.tree, className),
38
37
  ...props
39
38
  });
40
39
  });
@@ -42,7 +41,7 @@ const TreeView_TreeViewBranch = /*#__PURE__*/ forwardRef(function({ className, .
42
41
  return /*#__PURE__*/ jsx(TreeView.Branch, {
43
42
  ref: ref,
44
43
  "data-slot": "tree-view-branch",
45
- className: clsx(TreeView_module.branch, normalizeClassName(className)),
44
+ className: clsx(TreeView_module.branch, className),
46
45
  ...props
47
46
  });
48
47
  });
@@ -50,7 +49,7 @@ const TreeView_TreeViewBranchControl = /*#__PURE__*/ forwardRef(function({ class
50
49
  return /*#__PURE__*/ jsx(TreeView.BranchControl, {
51
50
  ref: ref,
52
51
  "data-slot": "tree-view-branch-control",
53
- className: clsx(TreeView_module.branchControl, normalizeClassName(className)),
52
+ className: clsx(TreeView_module.branchControl, className),
54
53
  ...props
55
54
  });
56
55
  });
@@ -58,7 +57,7 @@ const TreeView_TreeViewBranchTrigger = /*#__PURE__*/ forwardRef(function({ class
58
57
  return /*#__PURE__*/ jsx(TreeView.BranchTrigger, {
59
58
  ref: ref,
60
59
  "data-slot": "tree-view-branch-trigger",
61
- className: clsx(TreeView_module.branchTrigger, normalizeClassName(className)),
60
+ className: clsx(TreeView_module.branchTrigger, className),
62
61
  ...props,
63
62
  children: children ?? /*#__PURE__*/ jsx(ChevronRightIcon, {})
64
63
  });
@@ -67,7 +66,7 @@ const TreeView_TreeViewBranchIndicator = /*#__PURE__*/ forwardRef(function({ cla
67
66
  return /*#__PURE__*/ jsx(TreeView.BranchIndicator, {
68
67
  ref: ref,
69
68
  "data-slot": "tree-view-branch-indicator",
70
- className: clsx(TreeView_module.branchIndicator, normalizeClassName(className)),
69
+ className: clsx(TreeView_module.branchIndicator, className),
71
70
  ...props,
72
71
  children: children ?? /*#__PURE__*/ jsx(ChevronRightIcon, {})
73
72
  });
@@ -76,7 +75,7 @@ const TreeView_TreeViewBranchText = /*#__PURE__*/ forwardRef(function({ classNam
76
75
  return /*#__PURE__*/ jsx(TreeView.BranchText, {
77
76
  ref: ref,
78
77
  "data-slot": "tree-view-branch-text",
79
- className: clsx(TreeView_module.branchText, normalizeClassName(className)),
78
+ className: clsx(TreeView_module.branchText, className),
80
79
  ...props
81
80
  });
82
81
  });
@@ -84,7 +83,7 @@ const TreeView_TreeViewBranchContent = /*#__PURE__*/ forwardRef(function({ class
84
83
  return /*#__PURE__*/ jsx(TreeView.BranchContent, {
85
84
  ref: ref,
86
85
  "data-slot": "tree-view-branch-content",
87
- className: clsx(TreeView_module.branchContent, normalizeClassName(className)),
86
+ className: clsx(TreeView_module.branchContent, className),
88
87
  ...props
89
88
  });
90
89
  });
@@ -92,7 +91,7 @@ const TreeView_TreeViewBranchIndentGuide = /*#__PURE__*/ forwardRef(function({ c
92
91
  return /*#__PURE__*/ jsx(TreeView.BranchIndentGuide, {
93
92
  ref: ref,
94
93
  "data-slot": "tree-view-branch-indent-guide",
95
- className: clsx(TreeView_module.branchIndentGuide, normalizeClassName(className)),
94
+ className: clsx(TreeView_module.branchIndentGuide, className),
96
95
  ...props
97
96
  });
98
97
  });
@@ -100,7 +99,7 @@ const TreeView_TreeViewItem = /*#__PURE__*/ forwardRef(function({ className, ...
100
99
  return /*#__PURE__*/ jsx(TreeView.Item, {
101
100
  ref: ref,
102
101
  "data-slot": "tree-view-item",
103
- className: clsx(TreeView_module.item, normalizeClassName(className)),
102
+ className: clsx(TreeView_module.item, className),
104
103
  ...props
105
104
  });
106
105
  });
@@ -108,7 +107,7 @@ const TreeView_TreeViewItemText = /*#__PURE__*/ forwardRef(function({ className,
108
107
  return /*#__PURE__*/ jsx(TreeView.ItemText, {
109
108
  ref: ref,
110
109
  "data-slot": "tree-view-item-text",
111
- className: clsx(TreeView_module.itemText, normalizeClassName(className)),
110
+ className: clsx(TreeView_module.itemText, className),
112
111
  ...props
113
112
  });
114
113
  });
@@ -116,7 +115,7 @@ const TreeView_TreeViewItemIndicator = /*#__PURE__*/ forwardRef(function({ class
116
115
  return /*#__PURE__*/ jsx(TreeView.ItemIndicator, {
117
116
  ref: ref,
118
117
  "data-slot": "tree-view-item-indicator",
119
- className: clsx(TreeView_module.itemIndicator, normalizeClassName(className)),
118
+ className: clsx(TreeView_module.itemIndicator, className),
120
119
  ...props,
121
120
  children: children ?? /*#__PURE__*/ jsx(CheckIcon, {})
122
121
  });
@@ -125,14 +124,14 @@ const TreeView_TreeViewNodeCheckbox = /*#__PURE__*/ forwardRef(function({ classN
125
124
  return /*#__PURE__*/ jsx(TreeView.NodeCheckbox, {
126
125
  ref: ref,
127
126
  "data-slot": "tree-view-node-checkbox",
128
- className: clsx(TreeView_module.nodeCheckbox, normalizeClassName(className)),
127
+ className: clsx(TreeView_module.nodeCheckbox, className),
129
128
  ...props
130
129
  });
131
130
  });
132
131
  function TreeViewNodeCheckboxIndicator({ className, children, indeterminate, ...props }) {
133
132
  return /*#__PURE__*/ jsx(TreeView.NodeCheckboxIndicator, {
134
133
  "data-slot": "tree-view-node-checkbox-indicator",
135
- className: clsx(TreeView_module.nodeCheckboxIndicator, normalizeClassName(className)),
134
+ className: clsx(TreeView_module.nodeCheckboxIndicator, className),
136
135
  indeterminate: indeterminate ?? /*#__PURE__*/ jsx(IndeterminateIcon, {}),
137
136
  ...props,
138
137
  children: children ?? /*#__PURE__*/ jsx(CheckIcon, {})
@@ -142,7 +141,7 @@ const TreeView_TreeViewNodeRenameInput = /*#__PURE__*/ forwardRef(function({ cla
142
141
  return /*#__PURE__*/ jsx(TreeView.NodeRenameInput, {
143
142
  ref: ref,
144
143
  "data-slot": "tree-view-node-rename-input",
145
- className: clsx(TreeView_module.nodeRenameInput, normalizeClassName(className)),
144
+ className: clsx(TreeView_module.nodeRenameInput, className),
146
145
  ...props
147
146
  });
148
147
  });
@@ -42,6 +42,7 @@
42
42
  }
43
43
 
44
44
  .branchControl-ositpp, .item-D7JZg4 {
45
+ z-index: 0;
45
46
  box-sizing: border-box;
46
47
  width: 100%;
47
48
  min-width: 0;
@@ -52,48 +53,74 @@
52
53
  var(--moduix-tree-view-item-border-color, transparent);
53
54
  border-radius: var(--moduix-tree-view-item-radius, var(--moduix-radius-sm));
54
55
  padding-block: var(--moduix-tree-view-item-padding-y, var(--moduix-spacing-1));
55
- background-color: var(--moduix-tree-view-item-bg, transparent);
56
56
  color: var(--moduix-tree-view-item-color, var(--moduix-tree-view-color, var(--moduix-color-foreground)));
57
57
  cursor: pointer;
58
58
  font: inherit;
59
- outline: var(--moduix-tree-view-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
60
- solid transparent;
61
- outline-offset: calc(var(--moduix-tree-view-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))) *
62
- -1);
63
59
  text-align: start;
64
- transition: background-color var(--moduix-tree-view-transition, var(--moduix-transition-default)),
65
- color var(--moduix-tree-view-transition, var(--moduix-transition-default)),
66
- outline-color var(--moduix-tree-view-transition, var(--moduix-transition-default)),
60
+ transition: color var(--moduix-tree-view-transition, var(--moduix-transition-default)),
67
61
  opacity var(--moduix-tree-view-transition, var(--moduix-transition-default));
68
62
  -webkit-user-select: none;
69
63
  user-select: none;
64
+ outline: none;
70
65
  padding-inline-start: calc(var(--moduix-tree-view-item-padding-x, var(--moduix-spacing-2)) +
71
66
  ((var(--depth, 1) - 1) * var(--moduix-tree-view-indent, 1rem)));
72
67
  padding-inline-end: var(--moduix-tree-view-item-padding-x, var(--moduix-spacing-2));
73
68
  text-decoration: none;
74
69
  display: flex;
70
+ position: relative;
71
+ }
72
+
73
+ :is(.branchControl-ositpp, .item-D7JZg4):before {
74
+ z-index: -1;
75
+ border-radius: inherit;
76
+ background-color: var(--moduix-tree-view-item-bg, transparent);
77
+ content: "";
78
+ box-shadow: inset 0 0 0
79
+ var(--moduix-tree-view-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
80
+ transparent;
81
+ pointer-events: none;
82
+ transition: background-color var(--moduix-tree-view-transition, var(--moduix-transition-default)),
83
+ box-shadow var(--moduix-tree-view-transition, var(--moduix-transition-default));
84
+ position: absolute;
85
+ inset-block: 0;
86
+ inset-inline-start: calc(var(--moduix-tree-view-item-padding-x, var(--moduix-spacing-2)) +
87
+ ((var(--depth, 1) - 1) * var(--moduix-tree-view-indent, 1rem)));
88
+ inset-inline-end: 0;
75
89
  }
76
90
 
77
91
  :is(.branchControl-ositpp, .item-D7JZg4):not([data-disabled]):hover {
78
- background-color: var(--moduix-tree-view-item-hover-bg, var(--moduix-color-accent));
79
92
  color: var(--moduix-tree-view-item-hover-color, var(--moduix-color-accent-foreground));
80
93
  }
81
94
 
82
- :is(.branchControl-ositpp, .item-D7JZg4):focus-visible, :is(.branchControl-ositpp, .item-D7JZg4)[data-focus] {
83
- outline-color: var(--moduix-tree-view-focus-ring-color, var(--moduix-color-ring));
95
+ :is(.branchControl-ositpp, .item-D7JZg4):not([data-disabled]):hover:before {
96
+ background-color: var(--moduix-tree-view-item-hover-bg, var(--moduix-color-accent));
97
+ }
98
+
99
+ :is(:is(.branchControl-ositpp, .item-D7JZg4):focus-visible, :is(.branchControl-ositpp, .item-D7JZg4)[data-focus]):before {
100
+ box-shadow: inset 0 0 0
101
+ var(--moduix-tree-view-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
102
+ var(--moduix-tree-view-focus-ring-color, var(--moduix-color-ring));
84
103
  }
85
104
 
86
105
  :is(.branchControl-ositpp, .item-D7JZg4)[data-selected] {
87
- background-color: var(--moduix-tree-view-item-selected-bg, var(--moduix-color-accent));
88
106
  color: var(--moduix-tree-view-item-selected-color, var(--moduix-color-accent-foreground));
89
107
  }
90
108
 
109
+ :is(.branchControl-ositpp, .item-D7JZg4)[data-selected]:before {
110
+ background-color: var(--moduix-tree-view-item-selected-bg, var(--moduix-color-accent));
111
+ }
112
+
91
113
  :is(.branchControl-ositpp, .item-D7JZg4)[data-disabled] {
92
114
  color: var(--moduix-tree-view-item-disabled-color, var(--moduix-color-muted-foreground));
93
115
  cursor: default;
94
116
  opacity: var(--moduix-tree-view-disabled-opacity, var(--moduix-opacity-disabled));
95
117
  }
96
118
 
119
+ .item-D7JZg4 {
120
+ padding-inline-start: calc(var(--moduix-tree-view-item-padding-x, var(--moduix-spacing-2)) + var(--moduix-spacing-1) +
121
+ var(--moduix-spacing-1) + ((var(--depth, 1) - 1) * var(--moduix-tree-view-indent, 1rem)));
122
+ }
123
+
97
124
  .branchTrigger-_j6AJ6, .branchIndicator-f3bjVW, .itemIndicator-jfNuks {
98
125
  width: var(--moduix-tree-view-indicator-size, var(--moduix-spacing-4));
99
126
  height: var(--moduix-tree-view-indicator-size, var(--moduix-spacing-4));
@@ -2,7 +2,6 @@ import { jsx } from "react/jsx-runtime";
2
2
  import { ark } from "@ark-ui/react/factory";
3
3
  import { clsx } from "clsx";
4
4
  import { forwardRef } from "react";
5
- import { normalizeClassName } from "../../internal/normalizeClassName.js";
6
5
  import Typeset_module from "./Typeset.module.js";
7
6
  const Typeset_TypesetRoot = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
8
7
  return /*#__PURE__*/ jsx(ark.div, {
@@ -11,7 +10,7 @@ const Typeset_TypesetRoot = /*#__PURE__*/ forwardRef(function({ className, ...pr
11
10
  "data-scope": "typeset",
12
11
  "data-part": "root",
13
12
  "data-slot": "typeset",
14
- className: clsx(Typeset_module.root, normalizeClassName(className))
13
+ className: clsx(Typeset_module.root, className)
15
14
  });
16
15
  });
17
16
  const Typeset_TypesetScroll = /*#__PURE__*/ forwardRef(function({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, className, role, tabIndex = 0, ...props }, ref) {
@@ -23,7 +22,7 @@ const Typeset_TypesetScroll = /*#__PURE__*/ forwardRef(function({ 'aria-label':
23
22
  "data-scope": "typeset",
24
23
  "data-part": "scroll",
25
24
  "data-slot": "typeset-scroll",
26
- className: clsx(Typeset_module.scroll, normalizeClassName(className)),
25
+ className: clsx(Typeset_module.scroll, className),
27
26
  role: role ?? (ariaLabel || ariaLabelledBy ? 'region' : void 0),
28
27
  tabIndex: tabIndex
29
28
  });