@nxds/claude-design 0.0.0-stage → 0.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 (153) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +21 -2
  3. package/coverage.md +174 -0
  4. package/files.json +594 -0
  5. package/package.json +18 -3
  6. package/project/README.md +97 -0
  7. package/project/components/Accordion/README.md +84 -0
  8. package/project/components/Accordion/preview.html +16 -0
  9. package/project/components/Alert/README.md +97 -0
  10. package/project/components/Alert/preview.html +16 -0
  11. package/project/components/AlertDialog/README.md +170 -0
  12. package/project/components/AlertDialog/preview.html +16 -0
  13. package/project/components/AspectRatio/README.md +23 -0
  14. package/project/components/AspectRatio/preview.html +16 -0
  15. package/project/components/Attachment/README.md +127 -0
  16. package/project/components/Attachment/preview.html +16 -0
  17. package/project/components/Avatar/README.md +73 -0
  18. package/project/components/Avatar/preview.html +16 -0
  19. package/project/components/Badge/README.md +27 -0
  20. package/project/components/Badge/preview.html +16 -0
  21. package/project/components/Breadcrumb/README.md +117 -0
  22. package/project/components/Breadcrumb/preview.html +16 -0
  23. package/project/components/Bubble/README.md +57 -0
  24. package/project/components/Bubble/preview.html +16 -0
  25. package/project/components/Button/README.md +35 -0
  26. package/project/components/Button/preview.html +16 -0
  27. package/project/components/ButtonGroup/README.md +54 -0
  28. package/project/components/ButtonGroup/preview.html +16 -0
  29. package/project/components/Card/README.md +92 -0
  30. package/project/components/Card/preview.html +16 -0
  31. package/project/components/Carousel/README.md +85 -0
  32. package/project/components/Carousel/preview.html +16 -0
  33. package/project/components/Chart/README.md +124 -0
  34. package/project/components/Chart/preview.html +16 -0
  35. package/project/components/Checkbox/README.md +30 -0
  36. package/project/components/Checkbox/preview.html +16 -0
  37. package/project/components/ChoiceCard/README.md +61 -0
  38. package/project/components/ChoiceCard/preview.html +16 -0
  39. package/project/components/ChoiceRow/README.md +58 -0
  40. package/project/components/ChoiceRow/preview.html +16 -0
  41. package/project/components/Collapsible/README.md +73 -0
  42. package/project/components/Collapsible/preview.html +16 -0
  43. package/project/components/Combobox/README.md +158 -0
  44. package/project/components/Combobox/preview.html +16 -0
  45. package/project/components/Command/README.md +152 -0
  46. package/project/components/Command/preview.html +16 -0
  47. package/project/components/ContextMenu/README.md +215 -0
  48. package/project/components/ContextMenu/preview.html +16 -0
  49. package/project/components/Cover/preview.html +101 -0
  50. package/project/components/DatePicker/README.md +104 -0
  51. package/project/components/DatePicker/preview.html +16 -0
  52. package/project/components/DescriptionList/README.md +57 -0
  53. package/project/components/DescriptionList/preview.html +16 -0
  54. package/project/components/Dialog/README.md +166 -0
  55. package/project/components/Dialog/preview.html +16 -0
  56. package/project/components/Drawer/README.md +188 -0
  57. package/project/components/Drawer/preview.html +16 -0
  58. package/project/components/DropdownMenu/README.md +250 -0
  59. package/project/components/DropdownMenu/preview.html +16 -0
  60. package/project/components/EmptyState/README.md +84 -0
  61. package/project/components/EmptyState/preview.html +16 -0
  62. package/project/components/Field/README.md +129 -0
  63. package/project/components/Field/preview.html +16 -0
  64. package/project/components/FilterBuilder/README.md +34 -0
  65. package/project/components/FilterBuilder/preview.html +16 -0
  66. package/project/components/FilterChip/README.md +31 -0
  67. package/project/components/FilterChip/preview.html +16 -0
  68. package/project/components/FilterCondition/README.md +66 -0
  69. package/project/components/FilterCondition/preview.html +16 -0
  70. package/project/components/Hide/README.md +26 -0
  71. package/project/components/Hide/preview.html +16 -0
  72. package/project/components/HoverCard/README.md +77 -0
  73. package/project/components/HoverCard/preview.html +16 -0
  74. package/project/components/Input/README.md +37 -0
  75. package/project/components/Input/preview.html +16 -0
  76. package/project/components/InputGroup/README.md +109 -0
  77. package/project/components/InputGroup/preview.html +16 -0
  78. package/project/components/InputOTP/README.md +72 -0
  79. package/project/components/InputOTP/preview.html +16 -0
  80. package/project/components/Item/README.md +124 -0
  81. package/project/components/Item/preview.html +16 -0
  82. package/project/components/Kbd/README.md +40 -0
  83. package/project/components/Kbd/preview.html +16 -0
  84. package/project/components/Label/README.md +25 -0
  85. package/project/components/Label/preview.html +16 -0
  86. package/project/components/Marker/README.md +48 -0
  87. package/project/components/Marker/preview.html +16 -0
  88. package/project/components/Menubar/README.md +266 -0
  89. package/project/components/Menubar/preview.html +16 -0
  90. package/project/components/Message/README.md +78 -0
  91. package/project/components/Message/preview.html +16 -0
  92. package/project/components/MessageScroller/README.md +84 -0
  93. package/project/components/MessageScroller/preview.html +16 -0
  94. package/project/components/MultiSelect/README.md +122 -0
  95. package/project/components/MultiSelect/preview.html +16 -0
  96. package/project/components/NativeSelect/README.md +56 -0
  97. package/project/components/NativeSelect/preview.html +16 -0
  98. package/project/components/NavigationMenu/README.md +153 -0
  99. package/project/components/NavigationMenu/preview.html +16 -0
  100. package/project/components/PageHeader/README.md +86 -0
  101. package/project/components/PageHeader/preview.html +16 -0
  102. package/project/components/Pagination/README.md +123 -0
  103. package/project/components/Pagination/preview.html +16 -0
  104. package/project/components/Popover/README.md +87 -0
  105. package/project/components/Popover/preview.html +16 -0
  106. package/project/components/Progress/README.md +27 -0
  107. package/project/components/Progress/preview.html +16 -0
  108. package/project/components/RadioGroup/README.md +67 -0
  109. package/project/components/RadioGroup/preview.html +16 -0
  110. package/project/components/Resizable/README.md +65 -0
  111. package/project/components/Resizable/preview.html +16 -0
  112. package/project/components/ScrollArea/README.md +42 -0
  113. package/project/components/ScrollArea/preview.html +16 -0
  114. package/project/components/Select/README.md +161 -0
  115. package/project/components/Select/preview.html +16 -0
  116. package/project/components/Separator/README.md +37 -0
  117. package/project/components/Separator/preview.html +16 -0
  118. package/project/components/Sheet/README.md +160 -0
  119. package/project/components/Sheet/preview.html +16 -0
  120. package/project/components/Show/README.md +26 -0
  121. package/project/components/Show/preview.html +16 -0
  122. package/project/components/Sidebar/README.md +290 -0
  123. package/project/components/Sidebar/preview.html +16 -0
  124. package/project/components/Skeleton/README.md +30 -0
  125. package/project/components/Skeleton/preview.html +16 -0
  126. package/project/components/Slider/README.md +38 -0
  127. package/project/components/Slider/preview.html +16 -0
  128. package/project/components/Sonner/README.md +37 -0
  129. package/project/components/Sonner/preview.html +16 -0
  130. package/project/components/Spinner/README.md +27 -0
  131. package/project/components/Spinner/preview.html +16 -0
  132. package/project/components/Switch/README.md +31 -0
  133. package/project/components/Switch/preview.html +16 -0
  134. package/project/components/Table/README.md +120 -0
  135. package/project/components/Table/preview.html +16 -0
  136. package/project/components/Tabs/README.md +81 -0
  137. package/project/components/Tabs/preview.html +16 -0
  138. package/project/components/Textarea/README.md +32 -0
  139. package/project/components/Textarea/preview.html +16 -0
  140. package/project/components/Toggle/README.md +33 -0
  141. package/project/components/Toggle/preview.html +16 -0
  142. package/project/components/ToggleGroup/README.md +64 -0
  143. package/project/components/ToggleGroup/preview.html +16 -0
  144. package/project/components/Toolbar/README.md +123 -0
  145. package/project/components/Toolbar/preview.html +16 -0
  146. package/project/components/Tooltip/README.md +84 -0
  147. package/project/components/Tooltip/preview.html +16 -0
  148. package/project/components/bundle.css +8329 -0
  149. package/project/components/bundle.js +346 -0
  150. package/project/components/index.d.ts +7902 -0
  151. package/project/design-system.json +34 -0
  152. package/project/tokens.css +702 -0
  153. package/project/tokens.json +2998 -0
package/project/components/Popover/README.md ADDED
@@ -0,0 +1,87 @@
1
+ # Popover
2
+
3
+ Popover opens a floating panel next to a trigger. Use it for short forms and extra controls. For a hover hint, use Tooltip, and for a list of actions, use DropdownMenu.
4
+
5
+ ## On the canvas
6
+
7
+ ```html
8
+ <x-import component-from-global-scope="Nxds.Popover">
9
+ <x-import component-from-global-scope="Nxds.PopoverTrigger" as-child>
10
+ <x-import component-from-global-scope="Nxds.Button" variant="outline">Open popover</x-import>
11
+ </x-import>
12
+ <x-import component-from-global-scope="Nxds.PopoverContent">
13
+ <p class="nx:typography-body-default nx:text-muted-foreground">Place content for the popover here.</p>
14
+ </x-import>
15
+ </x-import>
16
+ ```
17
+
18
+ Attributes set props, kebab-case to camelCase. Element content becomes `children`. An attribute holds text, so a prop that takes an element, a function or an object has no attribute.
19
+
20
+ ## Parts
21
+
22
+ - `Nxds.Popover` — Root of the popover.
23
+ - `Nxds.PopoverAnchor` — Element to position the popover against instead of the trigger.
24
+ - `Nxds.PopoverContent` — Floating panel next to the trigger, rendered in a portal on `document.body`.
25
+ - `Nxds.PopoverTrigger` — Button that opens and closes the popover.
26
+
27
+ ## Props
28
+
29
+ ### Popover
30
+
31
+ | Prop | Type | Default | Control |
32
+ | --- | --- | --- | --- |
33
+ | `children` | `React.ReactNode` | | content |
34
+ | `open` | `boolean` | | toggle |
35
+ | `defaultOpen` | `boolean` | | toggle |
36
+ | `onOpenChange` | `(open: boolean) => void` | | none (function) |
37
+ | `modal` | `boolean` | | toggle |
38
+
39
+ ### PopoverAnchor
40
+
41
+ | Prop | Type | Default | Control |
42
+ | --- | --- | --- | --- |
43
+ | `children` | `React.ReactNode` | | content |
44
+ | `className` | `string` | | text |
45
+ | `id` | `string` | | text |
46
+ | `asChild` | `boolean` | | toggle |
47
+ | `virtualRef` | `RefObject<Measurable>` | | none (object) |
48
+
49
+ ### PopoverContent
50
+
51
+ | Prop | Type | Default | Control |
52
+ | --- | --- | --- | --- |
53
+ | `forceMount` | `true` | | toggle |
54
+ | `children` | `React.ReactNode` | | content |
55
+ | `className` | `string` | | text |
56
+ | `id` | `string` | | text |
57
+ | `align` | `"end" \| "center" \| "start"` | `"center"` | dropdown |
58
+ | `asChild` | `boolean` | | toggle |
59
+ | `onEscapeKeyDown` | `(event: KeyboardEvent) => void` | | none (function) |
60
+ | `onPointerDownOutside` | `(event: PointerDownOutsideEvent) => void` | | none (function) |
61
+ | `onFocusOutside` | `(event: FocusOutsideEvent) => void` | | none (function) |
62
+ | `onInteractOutside` | `(event: FocusOutsideEvent \| PointerDownOutsideEvent) => void` | | none (function) |
63
+ | `onOpenAutoFocus` | `(event: Event) => void` | | none (function) |
64
+ | `onCloseAutoFocus` | `(event: Event) => void` | | none (function) |
65
+ | `side` | `"top" \| "bottom" \| "left" \| "right"` | | dropdown |
66
+ | `sideOffset` | `number` | `4` | number |
67
+ | `alignOffset` | `number` | | number |
68
+ | `arrowPadding` | `number` | | number |
69
+ | `avoidCollisions` | `boolean` | | toggle |
70
+ | `collisionBoundary` | `Element \| Boundary[]` | | none (object) |
71
+ | `collisionPadding` | `number \| Partial<Record<"top" \| "bottom" \| "left" \| "right", number>>` | | none (object) |
72
+ | `sticky` | `"partial" \| "always"` | | dropdown |
73
+ | `hideWhenDetached` | `boolean` | | toggle |
74
+ | `updatePositionStrategy` | `"always" \| "optimized"` | | dropdown |
75
+
76
+ ### PopoverTrigger
77
+
78
+ | Prop | Type | Default | Control |
79
+ | --- | --- | --- | --- |
80
+ | `children` | `React.ReactNode` | | content |
81
+ | `className` | `string` | | text |
82
+ | `id` | `string` | | text |
83
+ | `name` | `string` | | text |
84
+ | `type` | `"button" \| "submit" \| "reset"` | | dropdown |
85
+ | `asChild` | `boolean` | | toggle |
86
+ | `disabled` | `boolean` | | toggle |
87
+ | `value` | `string \| number \| readonly string[]` | | none (object) |
package/project/components/Popover/preview.html ADDED
@@ -0,0 +1,16 @@
1
+ <!-- @dsCard group="Overlays" height=120 -->
2
+ <!doctype html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="utf-8">
6
+ <title>Popover</title>
7
+ <style>
8
+ body { margin: 0; background: var(--nx-color-background); color: var(--nx-color-foreground); font-family: var(--font-sans); }
9
+ #root { padding: var(--nx-spacing-6); }
10
+ </style>
11
+ </head>
12
+ <body>
13
+ <div id="root"></div>
14
+ <script>(()=>{var R=Object.create;var f=Object.defineProperty;var K=Object.getOwnPropertyDescriptor;var T=Object.getOwnPropertyNames;var B=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var u=(o,e)=>()=>{try{return e||o((e={exports:{}}).exports,e),e.exports}catch(t){throw e=0,t}};var D=(o,e,t,m)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of T(e))!C.call(o,r)&&r!==t&&f(o,r,{get:()=>e[r],enumerable:!(m=K(e,r))||m.enumerable});return o};var p=(o,e,t)=>(t=o!=null?R(B(o)):{},D(e||!o||!o.__esModule?f(t,"default",{value:o,enumerable:!0}):t,o));var c=u((N,l)=>{l.exports=window.Nxds});var d=u((O,y)=>{y.exports=window.React});var w=u((I,g)=>{g.exports={createRoot:window.ReactDOM.createRoot}});var v=p(c()),n=p(c());var a=p(d());function x(o,e){return e===void 0?o:{...o,key:e}}function i(o,e,t){return(0,a.createElement)(o,x(e,t))}function P(o,e,t){let{children:m,...r}=e;return(0,a.createElement)(o,x(r,t),...m)}function s(){return P(n.Popover,{children:[i(n.PopoverTrigger,{asChild:!0,children:i(v.Button,{variant:"outline",children:"Open popover"})}),i(n.PopoverContent,{children:i("p",{className:"nx:typography-body-default nx:text-muted-foreground",children:"Place content for the popover here."})})]})}var E=p(d()),h=p(w());(0,h.createRoot)(document.getElementById("root")).render((0,E.createElement)(s));})();</script>
15
+ </body>
16
+ </html>
package/project/components/Progress/README.md ADDED
@@ -0,0 +1,27 @@
1
+ # Progress
2
+
3
+ Progress shows how far along a task is, such as an upload or a multi-step form. Leave out `value` for an animated bar while the total is unknown. Always give it an `aria-label` or `aria-labelledby`.
4
+
5
+ ## On the canvas
6
+
7
+ ```html
8
+ <div class="nx:w-80">
9
+ <x-import component-from-global-scope="Nxds.Progress" aria-label="Progress" value="60"></x-import>
10
+ </div>
11
+ ```
12
+
13
+ Attributes set props, kebab-case to camelCase. Element content becomes `children`. An attribute holds text, so a prop that takes an element, a function or an object has no attribute.
14
+
15
+ ## Props
16
+
17
+ ### Progress
18
+
19
+ | Prop | Type | Default | Control |
20
+ | --- | --- | --- | --- |
21
+ | `value` | `number` | | number |
22
+ | `max` | `number` | | number |
23
+ | `getValueLabel` | `(value: number, max: number) => string` | | none (function) |
24
+ | `children` | `React.ReactNode` | | content |
25
+ | `className` | `string` | | text |
26
+ | `id` | `string` | | text |
27
+ | `asChild` | `boolean` | | toggle |
package/project/components/Progress/preview.html ADDED
@@ -0,0 +1,16 @@
1
+ <!-- @dsCard group="Feedback" height=120 -->
2
+ <!doctype html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="utf-8">
6
+ <title>Progress</title>
7
+ <style>
8
+ body { margin: 0; background: var(--nx-color-background); color: var(--nx-color-foreground); font-family: var(--font-sans); }
9
+ #root { padding: var(--nx-spacing-6); }
10
+ </style>
11
+ </head>
12
+ <body>
13
+ <div id="root"></div>
14
+ <script>(()=>{var g=Object.create;var d=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var K=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var s=(t,e)=>()=>{try{return e||t((e={exports:{}}).exports,e),e.exports}catch(r){throw e=0,r}};var D=(t,e,r,c)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of K(e))!v.call(t,o)&&o!==r&&d(t,o,{get:()=>e[o],enumerable:!(c=R(e,o))||c.enumerable});return t};var n=(t,e,r)=>(r=t!=null?g(h(t)):{},D(e||!t||!t.__esModule?d(r,"default",{value:t,enumerable:!0}):r,t));var u=s((N,l)=>{l.exports=window.Nxds});var i=s((b,f)=>{f.exports=window.React});var w=s((I,x)=>{x.exports={createRoot:window.ReactDOM.createRoot}});var y=n(u());var p=n(i());function T(t,e){return e===void 0?t:{...t,key:e}}function a(t,e,r){return(0,p.createElement)(t,T(e,r))}function m(){return a("div",{className:"nx:w-80",children:a(y.Progress,{"aria-label":"Progress",value:60})})}var E=n(i()),P=n(w());(0,P.createRoot)(document.getElementById("root")).render((0,E.createElement)(m));})();</script>
15
+ </body>
16
+ </html>
package/project/components/RadioGroup/README.md ADDED
@@ -0,0 +1,67 @@
1
+ # RadioGroup
2
+
3
+ RadioGroup lets the user pick one option from a short, visible list. For a long list, use Select.
4
+
5
+ - For a plain text label, pair each RadioGroupItem with Label.
6
+ - For a compact clickable row, wrap each item in ChoiceRow.
7
+ - For a card with a title and description, wrap each item in ChoiceCard.
8
+
9
+ ## On the canvas
10
+
11
+ ```html
12
+ <x-import component-from-global-scope="Nxds.RadioGroup" default-value="comfortable" aria-label="Density">
13
+ <div class="nx:flex nx:items-center nx:gap-2">
14
+ <x-import component-from-global-scope="Nxds.RadioGroupItem" value="default" id="default-default"></x-import>
15
+ <x-import component-from-global-scope="Nxds.Label" html-for="default-default">Default</x-import>
16
+ </div>
17
+ <div class="nx:flex nx:items-center nx:gap-2">
18
+ <x-import component-from-global-scope="Nxds.RadioGroupItem" value="comfortable" id="default-comfortable"></x-import>
19
+ <x-import component-from-global-scope="Nxds.Label" html-for="default-comfortable">Comfortable</x-import>
20
+ </div>
21
+ <div class="nx:flex nx:items-center nx:gap-2">
22
+ <x-import component-from-global-scope="Nxds.RadioGroupItem" value="compact" id="default-compact"></x-import>
23
+ <x-import component-from-global-scope="Nxds.Label" html-for="default-compact">Compact</x-import>
24
+ </div>
25
+ </x-import>
26
+ ```
27
+
28
+ Attributes set props, kebab-case to camelCase. Element content becomes `children`. An attribute holds text, so a prop that takes an element, a function or an object has no attribute.
29
+
30
+ ## Parts
31
+
32
+ - `Nxds.RadioGroup` — Set of options where only one can be selected.
33
+ - `Nxds.RadioGroupItem` — One option in a `RadioGroup`.
34
+
35
+ ## Props
36
+
37
+ ### RadioGroup
38
+
39
+ | Prop | Type | Default | Control |
40
+ | --- | --- | --- | --- |
41
+ | `name` | `string` | | text |
42
+ | `required` | `boolean` | | toggle |
43
+ | `disabled` | `boolean` | | toggle |
44
+ | `dir` | `"ltr" \| "rtl"` | | dropdown |
45
+ | `orientation` | `"horizontal" \| "vertical"` | | dropdown |
46
+ | `loop` | `boolean` | | toggle |
47
+ | `defaultValue` | `string` | | text |
48
+ | `value` | `string` | | text |
49
+ | `onValueChange` | `(value: string) => void` | | none (function) |
50
+ | `children` | `React.ReactNode` | | content |
51
+ | `className` | `string` | | text |
52
+ | `id` | `string` | | text |
53
+ | `asChild` | `boolean` | | toggle |
54
+
55
+ ### RadioGroupItem
56
+
57
+ | Prop | Type | Default | Control |
58
+ | --- | --- | --- | --- |
59
+ | `value` | `string` | | text |
60
+ | `children` | `React.ReactNode` | | content |
61
+ | `className` | `string` | | text |
62
+ | `id` | `string` | | text |
63
+ | `type` | `"button" \| "submit" \| "reset"` | | dropdown |
64
+ | `asChild` | `boolean` | | toggle |
65
+ | `disabled` | `boolean` | | toggle |
66
+ | `checked` | `boolean` | | toggle |
67
+ | `required` | `boolean` | | toggle |
package/project/components/RadioGroup/preview.html ADDED
@@ -0,0 +1,16 @@
1
+ <!-- @dsCard group="Forms" height=120 -->
2
+ <!doctype html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="utf-8">
6
+ <title>RadioGroup</title>
7
+ <style>
8
+ body { margin: 0; background: var(--nx-color-background); color: var(--nx-color-foreground); font-family: var(--font-sans); }
9
+ #root { padding: var(--nx-spacing-6); }
10
+ </style>
11
+ </head>
12
+ <body>
13
+ <div id="root"></div>
14
+ <script>(()=>{var h=Object.create;var x=Object.defineProperty;var D=Object.getOwnPropertyDescriptor;var K=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var f=(t,e)=>()=>{try{return e||t((e={exports:{}}).exports,e),e.exports}catch(o){throw e=0,o}};var G=(t,e,o,d)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of K(e))!F.call(t,r)&&r!==o&&x(t,r,{get:()=>e[r],enumerable:!(d=D(e,r))||d.enumerable});return t};var l=(t,e,o)=>(o=t!=null?h(P(t)):{},G(e||!t||!t.__esModule?x(o,"default",{value:t,enumerable:!0}):o,t));var u=f((N,y)=>{y.exports=window.Nxds});var p=f((T,b)=>{b.exports=window.React});var w=f((V,v)=>{v.exports={createRoot:window.ReactDOM.createRoot}});var c=l(u()),n=l(u());var i=l(p());function R(t,e){return e===void 0?t:{...t,key:e}}function a(t,e,o){return(0,i.createElement)(t,R(e,o))}function m(t,e,o){let{children:d,...r}=e;return(0,i.createElement)(t,R(r,o),...d)}function s(){return m(n.RadioGroup,{defaultValue:"comfortable","aria-label":"Density",children:[m("div",{className:"nx:flex nx:items-center nx:gap-2",children:[a(n.RadioGroupItem,{value:"default",id:"default-default"}),a(c.Label,{htmlFor:"default-default",children:"Default"})]}),m("div",{className:"nx:flex nx:items-center nx:gap-2",children:[a(n.RadioGroupItem,{value:"comfortable",id:"default-comfortable"}),a(c.Label,{htmlFor:"default-comfortable",children:"Comfortable"})]}),m("div",{className:"nx:flex nx:items-center nx:gap-2",children:[a(n.RadioGroupItem,{value:"compact",id:"default-compact"}),a(c.Label,{htmlFor:"default-compact",children:"Compact"})]})]})}var E=l(p()),g=l(w());(0,g.createRoot)(document.getElementById("root")).render((0,E.createElement)(s));})();</script>
15
+ </body>
16
+ </html>
package/project/components/Resizable/README.md ADDED
@@ -0,0 +1,65 @@
1
+ # Resizable
2
+
3
+ Resizable splits an area into panels that users resize by dragging or with the keyboard. Use it for layouts like a sidebar beside an editor. Give every `ResizableHandle` an `aria-label`.
4
+
5
+ ## On the canvas
6
+
7
+ ```html
8
+ <x-import component-from-global-scope="Nxds.ResizablePanelGroup" orientation="vertical">ResizablePanelGroup</x-import>
9
+ ```
10
+
11
+ Attributes set props, kebab-case to camelCase. Element content becomes `children`. An attribute holds text, so a prop that takes an element, a function or an object has no attribute.
12
+
13
+ ## Parts
14
+
15
+ - `Nxds.ResizableHandle` — Divider between two panels, resized by drag or keyboard.
16
+ - `Nxds.ResizablePanel` — One panel inside a `ResizablePanelGroup`.
17
+ - `Nxds.ResizablePanelGroup` — Holds a set of resizable panels.
18
+
19
+ ## Props
20
+
21
+ ### ResizableHandle
22
+
23
+ | Prop | Type | Default | Control |
24
+ | --- | --- | --- | --- |
25
+ | `children` | `React.ReactNode` | | content |
26
+ | `className` | `string` | | text |
27
+ | `id` | `string` | | text |
28
+ | `disabled` | `boolean` | | toggle |
29
+ | `disableDoubleClick` | `boolean` | | toggle |
30
+ | `elementRef` | `((instance: HTMLDivElement \| null) => void \| (() => VoidOrUndefinedOnly)) \| RefObject<HTMLDivElement \| null>` | | none (function) |
31
+ | `withHandle` | `boolean` | | toggle |
32
+
33
+ ### ResizablePanel
34
+
35
+ | Prop | Type | Default | Control |
36
+ | --- | --- | --- | --- |
37
+ | `defaultSize` | `number` | | number |
38
+ | `minSize` | `number` | `0` | number |
39
+ | `maxSize` | `number` | | number |
40
+ | `collapsedSize` | `number` | | number |
41
+ | `sizeUnit` | `"%" \| "px"` | `"%"` | dropdown |
42
+ | `children` | `React.ReactNode` | | content |
43
+ | `className` | `string` | | text |
44
+ | `id` | `string` | | text |
45
+ | `collapsible` | `boolean` | | toggle |
46
+ | `disabled` | `boolean` | | toggle |
47
+ | `onResize` | `(panelSize: PanelSize, id: string \| number \| undefined, prevPanelSize: PanelSize \| undefined) => void` | | none (function) |
48
+ | `elementRef` | `RefObject<HTMLDivElement \| null> \| ((instance: HTMLDivElement \| null) => void \| (() => VoidOrUndefinedOnly))` | | none (function) |
49
+ | `groupResizeBehavior` | `"preserve-relative-size" \| "preserve-pixel-size"` | | dropdown |
50
+ | `panelRef` | `((instance: PanelImperativeHandle \| null) => void \| (() => VoidOrUndefinedOnly)) \| RefObject<PanelImperativeHandle \| null>` | | none (function) |
51
+
52
+ ### ResizablePanelGroup
53
+
54
+ | Prop | Type | Default | Control |
55
+ | --- | --- | --- | --- |
56
+ | `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | dropdown |
57
+ | `onLayoutChange` | `(layout: number[]) => void` | | none (function) |
58
+ | `children` | `React.ReactNode` | | content |
59
+ | `className` | `string` | | text |
60
+ | `id` | `string` | | text |
61
+ | `disabled` | `boolean` | | toggle |
62
+ | `elementRef` | `RefObject<HTMLDivElement \| null> \| ((instance: HTMLDivElement \| null) => void \| (() => VoidOrUndefinedOnly))` | | none (function) |
63
+ | `disableCursor` | `boolean` | | toggle |
64
+ | `groupRef` | `((instance: GroupImperativeHandle \| null) => void \| (() => VoidOrUndefinedOnly)) \| RefObject<GroupImperativeHandle \| null>` | | none (function) |
65
+ | `resizeTargetMinimumSize` | `{ coarse: number; fine: number; }` | | none (object) |
package/project/components/Resizable/preview.html ADDED
@@ -0,0 +1,16 @@
1
+ <!-- @dsCard group="Layout" height=240 -->
2
+ <!doctype html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="utf-8">
6
+ <title>Resizable</title>
7
+ <style>
8
+ body { margin: 0; background: var(--nx-color-background); color: var(--nx-color-foreground); font-family: var(--font-sans); }
9
+ #root { padding: var(--nx-spacing-6); }
10
+ </style>
11
+ </head>
12
+ <body>
13
+ <div id="root"></div>
14
+ <script>(()=>{var E=Object.create;var u=Object.defineProperty;var K=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,T=Object.prototype.hasOwnProperty;var d=(e,t)=>()=>{try{return t||e((t={exports:{}}).exports,t),t.exports}catch(n){throw t=0,n}};var D=(e,t,n,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of S(t))!T.call(e,o)&&o!==n&&u(e,o,{get:()=>t[o],enumerable:!(a=K(t,o))||a.enumerable});return e};var s=(e,t,n)=>(n=e!=null?E(v(e)):{},D(t||!e||!e.__esModule?u(n,"default",{value:e,enumerable:!0}):n,e));var f=d((G,m)=>{m.exports=window.Nxds});var p=d((H,x)=>{x.exports=window.React});var P=d((F,z)=>{z.exports={createRoot:window.ReactDOM.createRoot}});var l=s(f());var i=s(p());function y(e,t){return t===void 0?e:{...e,key:t}}function r(e,t,n){return(0,i.createElement)(e,y(t,n))}function b(e,t,n){let{children:a,...o}=t;return(0,i.createElement)(e,y(o,n),...a)}var N="nx:max-w-md nx:overflow-hidden nx:rounded-lg nx:border-default nx:border-border-default",j={height:220},w={overflow:"hidden"};function R({label:e}){return r("div",{className:"nx:p-6 nx:text-center nx:font-semibold",children:e})}function c(){return b(l.ResizablePanelGroup,{orientation:"horizontal",className:N,style:j,children:[r(l.ResizablePanel,{defaultSize:50,style:w,children:r(R,{label:"One"})}),r(l.ResizableHandle,{withHandle:!0,"aria-label":"Resize panels"}),r(l.ResizablePanel,{defaultSize:50,style:w,children:r(R,{label:"Two"})})]})}var h=s(p()),g=s(P());(0,g.createRoot)(document.getElementById("root")).render((0,h.createElement)(c));})();</script>
15
+ </body>
16
+ </html>
package/project/components/ScrollArea/README.md ADDED
@@ -0,0 +1,42 @@
1
+ # ScrollArea
2
+
3
+ ScrollArea gives a fixed-size region custom scrollbars that look the same on every platform. Use it for panels, lists and drawers with overflowing content. For a full page, let the browser scroll the page.
4
+
5
+ ## On the canvas
6
+
7
+ ```html
8
+ <x-import component-from-global-scope="Nxds.ScrollArea" type="auto" dir="ltr">ScrollArea</x-import>
9
+ ```
10
+
11
+ Attributes set props, kebab-case to camelCase. Element content becomes `children`. An attribute holds text, so a prop that takes an element, a function or an object has no attribute.
12
+
13
+ ## Parts
14
+
15
+ - `Nxds.ScrollArea` — Scrollable region with custom scrollbars that look the same on every
16
+ platform.
17
+ - `Nxds.ScrollBar` — Scrollbar track and thumb for one axis.
18
+
19
+ ## Props
20
+
21
+ ### ScrollArea
22
+
23
+ | Prop | Type | Default | Control |
24
+ | --- | --- | --- | --- |
25
+ | `type` | `"auto" \| "hover" \| "always" \| "scroll"` | | dropdown |
26
+ | `dir` | `"ltr" \| "rtl"` | | dropdown |
27
+ | `scrollHideDelay` | `number` | | number |
28
+ | `children` | `React.ReactNode` | | content |
29
+ | `className` | `string` | | text |
30
+ | `id` | `string` | | text |
31
+ | `asChild` | `boolean` | | toggle |
32
+
33
+ ### ScrollBar
34
+
35
+ | Prop | Type | Default | Control |
36
+ | --- | --- | --- | --- |
37
+ | `forceMount` | `true` | | toggle |
38
+ | `orientation` | `"horizontal" \| "vertical"` | `"vertical"` | dropdown |
39
+ | `children` | `React.ReactNode` | | content |
40
+ | `className` | `string` | | text |
41
+ | `id` | `string` | | text |
42
+ | `asChild` | `boolean` | | toggle |
package/project/components/ScrollArea/preview.html ADDED
@@ -0,0 +1,16 @@
1
+ <!-- @dsCard group="Layout" height=120 -->
2
+ <!doctype html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="utf-8">
6
+ <title>ScrollArea</title>
7
+ <style>
8
+ body { margin: 0; background: var(--nx-color-background); color: var(--nx-color-foreground); font-family: var(--font-sans); }
9
+ #root { padding: var(--nx-spacing-6); }
10
+ </style>
11
+ </head>
12
+ <body>
13
+ <div id="root"></div>
14
+ <script>(()=>{var E=Object.create;var m=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var K=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var i=(o,e)=>()=>{try{return e||o((e={exports:{}}).exports,e),e.exports}catch(t){throw e=0,t}};var P=(o,e,t,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of S(e))!N.call(o,r)&&r!==t&&m(o,r,{get:()=>e[r],enumerable:!(n=R(e,r))||n.enumerable});return o};var a=(o,e,t)=>(t=o!=null?E(K(o)):{},P(e||!o||!o.__esModule?m(t,"default",{value:o,enumerable:!0}):t,o));var h=i((A,p)=>{p.exports=window.Nxds});var c=i((D,u)=>{u.exports=window.React});var w=i((B,b)=>{b.exports={createRoot:window.ReactDOM.createRoot}});var y=a(h());var s=a(c());function f(o,e){return e===void 0?o:{...o,key:e}}function l(o,e,t){return(0,s.createElement)(o,f(e,t))}function x(o,e,t){let{children:n,...r}=e;return(0,s.createElement)(o,f(r,t),...n)}var k=["Scroll areas render a consistent custom scrollbar across Chrome, Safari, and Firefox, replacing the platform scrollbar so the chrome looks the same everywhere.","The viewport measures its content and only surfaces a scrollbar on the axis that actually overflows — a wide-but-short block gets a horizontal bar and no vertical one.",'Scrollbars fade in on hover by default. Pass type="always" to keep them pinned, or type="scroll" to show them only while the content is moving.',"The thumb is sized in proportion to the visible fraction of the content, so a long document gets a short thumb and a barely-overflowing one gets a long thumb.","Keyboard focus can move into the viewport with a visible focus ring, so the scrollable region stays reachable without a pointer."];function d(){return l(y.ScrollArea,{className:"nx:h-48 nx:w-72 nx:rounded-md nx:border-default nx:border-border-default",children:x("div",{className:"nx:flex nx:flex-col nx:gap-3 nx:p-4 nx:typography-label-default nx:text-foreground",children:[l("h4",{className:"nx:font-medium nx:leading-none",children:"Release notes"}),k.map((o,e)=>l("p",{className:"nx:text-muted-foreground",children:o},e))]})})}var g=a(c()),v=a(w());(0,v.createRoot)(document.getElementById("root")).render((0,g.createElement)(d));})();</script>
15
+ </body>
16
+ </html>
package/project/components/Select/README.md ADDED
@@ -0,0 +1,161 @@
1
+ # Select
2
+
3
+ Select lets users pick one option from a styled dropdown. Use it when the list needs a styled trigger and menu that match the rest of the UI. For native form submission and OS pickers with plain text options, use NativeSelect.
4
+
5
+ ## On the canvas
6
+
7
+ ```html
8
+ <x-import component-from-global-scope="Nxds.Select">
9
+ <x-import component-from-global-scope="Nxds.SelectTrigger" class-name="nx:w-[180px]" aria-label="Select a fruit">
10
+ <x-import component-from-global-scope="Nxds.SelectValue" placeholder="Select a fruit"></x-import>
11
+ </x-import>
12
+ <x-import component-from-global-scope="Nxds.SelectContent">
13
+ <x-import component-from-global-scope="Nxds.SelectItem" value="apple">Apple</x-import>
14
+ <x-import component-from-global-scope="Nxds.SelectItem" value="banana">Banana</x-import>
15
+ <x-import component-from-global-scope="Nxds.SelectItem" value="orange">Orange</x-import>
16
+ <x-import component-from-global-scope="Nxds.SelectItem" value="grape">Grape</x-import>
17
+ <x-import component-from-global-scope="Nxds.SelectItem" value="mango">Mango</x-import>
18
+ </x-import>
19
+ </x-import>
20
+ ```
21
+
22
+ Attributes set props, kebab-case to camelCase. Element content becomes `children`. An attribute holds text, so a prop that takes an element, a function or an object has no attribute.
23
+
24
+ ## Parts
25
+
26
+ - `Nxds.Select` — Root of the select.
27
+ - `Nxds.SelectContent` — Dropdown that holds the items.
28
+ - `Nxds.SelectGroup` — Groups related items.
29
+ - `Nxds.SelectItem` — One option in the dropdown.
30
+ - `Nxds.SelectLabel` — Label for a group of items.
31
+ - `Nxds.SelectScrollDownButton` — Scrolls the list down.
32
+ - `Nxds.SelectScrollUpButton` — Scrolls the list up.
33
+ - `Nxds.SelectSeparator` — Divider between items or groups.
34
+ - `Nxds.SelectTrigger` — Button that opens the dropdown.
35
+ - `Nxds.SelectValue` — Shows the selected value.
36
+
37
+ ## Props
38
+
39
+ ### Select
40
+
41
+ | Prop | Type | Default | Control |
42
+ | --- | --- | --- | --- |
43
+ | `children` | `React.ReactNode` | | content |
44
+ | `open` | `boolean` | | toggle |
45
+ | `defaultOpen` | `boolean` | | toggle |
46
+ | `onOpenChange` | `(open: boolean) => void` | | none (function) |
47
+ | `dir` | `"ltr" \| "rtl"` | | dropdown |
48
+ | `name` | `string` | | text |
49
+ | `autoComplete` | `string` | | text |
50
+ | `disabled` | `boolean` | | toggle |
51
+ | `required` | `boolean` | | toggle |
52
+ | `form` | `string` | | text |
53
+ | `value` | `string` | | text |
54
+ | `defaultValue` | `string` | | text |
55
+ | `onValueChange` | `(value: string) => void` | | none (function) |
56
+
57
+ ### SelectContent
58
+
59
+ | Prop | Type | Default | Control |
60
+ | --- | --- | --- | --- |
61
+ | `onCloseAutoFocus` | `(event: Event) => void` | | none (function) |
62
+ | `onEscapeKeyDown` | `(event: KeyboardEvent) => void` | | none (function) |
63
+ | `onPointerDownOutside` | `(event: PointerDownOutsideEvent) => void` | | none (function) |
64
+ | `position` | `"item-aligned" \| "popper"` | `"popper"` | dropdown |
65
+ | `children` | `React.ReactNode` | | content |
66
+ | `className` | `string` | | text |
67
+ | `id` | `string` | | text |
68
+ | `align` | `"end" \| "center" \| "start"` | | dropdown |
69
+ | `asChild` | `boolean` | | toggle |
70
+ | `side` | `"top" \| "bottom" \| "left" \| "right"` | | dropdown |
71
+ | `sideOffset` | `number` | | number |
72
+ | `alignOffset` | `number` | | number |
73
+ | `arrowPadding` | `number` | | number |
74
+ | `avoidCollisions` | `boolean` | | toggle |
75
+ | `collisionBoundary` | `Element \| Boundary[]` | | none (object) |
76
+ | `collisionPadding` | `number \| Partial<Record<"top" \| "bottom" \| "left" \| "right", number>>` | | none (object) |
77
+ | `sticky` | `"partial" \| "always"` | | dropdown |
78
+ | `hideWhenDetached` | `boolean` | | toggle |
79
+ | `updatePositionStrategy` | `"always" \| "optimized"` | | dropdown |
80
+
81
+ ### SelectGroup
82
+
83
+ | Prop | Type | Default | Control |
84
+ | --- | --- | --- | --- |
85
+ | `children` | `React.ReactNode` | | content |
86
+ | `className` | `string` | | text |
87
+ | `id` | `string` | | text |
88
+ | `asChild` | `boolean` | | toggle |
89
+
90
+ ### SelectItem
91
+
92
+ | Prop | Type | Default | Control |
93
+ | --- | --- | --- | --- |
94
+ | `value` | `string` | | text |
95
+ | `disabled` | `boolean` | | toggle |
96
+ | `textValue` | `string` | | text |
97
+ | `children` | `React.ReactNode` | | content |
98
+ | `className` | `string` | | text |
99
+ | `id` | `string` | | text |
100
+ | `asChild` | `boolean` | | toggle |
101
+
102
+ ### SelectLabel
103
+
104
+ | Prop | Type | Default | Control |
105
+ | --- | --- | --- | --- |
106
+ | `children` | `React.ReactNode` | | content |
107
+ | `className` | `string` | | text |
108
+ | `id` | `string` | | text |
109
+ | `asChild` | `boolean` | | toggle |
110
+
111
+ ### SelectScrollDownButton
112
+
113
+ | Prop | Type | Default | Control |
114
+ | --- | --- | --- | --- |
115
+ | `children` | `React.ReactNode` | | content |
116
+ | `className` | `string` | | text |
117
+ | `id` | `string` | | text |
118
+ | `asChild` | `boolean` | | toggle |
119
+
120
+ ### SelectScrollUpButton
121
+
122
+ | Prop | Type | Default | Control |
123
+ | --- | --- | --- | --- |
124
+ | `children` | `React.ReactNode` | | content |
125
+ | `className` | `string` | | text |
126
+ | `id` | `string` | | text |
127
+ | `asChild` | `boolean` | | toggle |
128
+
129
+ ### SelectSeparator
130
+
131
+ | Prop | Type | Default | Control |
132
+ | --- | --- | --- | --- |
133
+ | `children` | `React.ReactNode` | | content |
134
+ | `className` | `string` | | text |
135
+ | `id` | `string` | | text |
136
+ | `asChild` | `boolean` | | toggle |
137
+
138
+ ### SelectTrigger
139
+
140
+ | Prop | Type | Default | Control |
141
+ | --- | --- | --- | --- |
142
+ | `children` | `React.ReactNode` | | content |
143
+ | `className` | `string` | | text |
144
+ | `id` | `string` | | text |
145
+ | `name` | `string` | | text |
146
+ | `type` | `"button" \| "submit" \| "reset"` | | dropdown |
147
+ | `asChild` | `boolean` | | toggle |
148
+ | `disabled` | `boolean` | | toggle |
149
+ | `value` | `string \| number \| readonly string[]` | | none (object) |
150
+ | `variant` | `"bordered" \| "borderless"` | `"bordered"` | dropdown |
151
+ | `size` | `"default" \| "sm" \| "lg"` | `"default"` | dropdown |
152
+
153
+ ### SelectValue
154
+
155
+ | Prop | Type | Default | Control |
156
+ | --- | --- | --- | --- |
157
+ | `placeholder` | `React.ReactNode` | | none (element) |
158
+ | `children` | `React.ReactNode` | | content |
159
+ | `className` | `string` | | text |
160
+ | `id` | `string` | | text |
161
+ | `asChild` | `boolean` | | toggle |
package/project/components/Select/preview.html ADDED
@@ -0,0 +1,16 @@
1
+ <!-- @dsCard group="Forms" height=120 -->
2
+ <!doctype html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="utf-8">
6
+ <title>Select</title>
7
+ <style>
8
+ body { margin: 0; background: var(--nx-color-background); color: var(--nx-color-foreground); font-family: var(--font-sans); }
9
+ #root { padding: var(--nx-spacing-6); }
10
+ </style>
11
+ </head>
12
+ <body>
13
+ <div id="root"></div>
14
+ <script>(()=>{var R=Object.create;var S=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var K=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,T=Object.prototype.hasOwnProperty;var m=(t,e)=>()=>{try{return e||t((e={exports:{}}).exports,e),e.exports}catch(n){throw e=0,n}};var h=(t,e,n,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of K(e))!T.call(t,a)&&a!==n&&S(t,a,{get:()=>e[a],enumerable:!(l=v(e,a))||l.enumerable});return t};var c=(t,e,n)=>(n=t!=null?R(P(t)):{},h(e||!t||!t.__esModule?S(n,"default",{value:t,enumerable:!0}):n,t));var f=m((b,d)=>{d.exports=window.Nxds});var i=m((j,y)=>{y.exports=window.React});var w=m((N,x)=>{x.exports={createRoot:window.ReactDOM.createRoot}});var r=c(f());var p=c(i());function g(t,e){return e===void 0?t:{...t,key:e}}function o(t,e,n){return(0,p.createElement)(t,g(e,n))}function u(t,e,n){let{children:l,...a}=e;return(0,p.createElement)(t,g(a,n),...l)}function s(){return u(r.Select,{children:[o(r.SelectTrigger,{className:"nx:w-[180px]","aria-label":"Select a fruit",children:o(r.SelectValue,{placeholder:"Select a fruit"})}),u(r.SelectContent,{children:[o(r.SelectItem,{value:"apple",children:"Apple"}),o(r.SelectItem,{value:"banana",children:"Banana"}),o(r.SelectItem,{value:"orange",children:"Orange"}),o(r.SelectItem,{value:"grape",children:"Grape"}),o(r.SelectItem,{value:"mango",children:"Mango"})]})]})}var E=c(i()),I=c(w());(0,I.createRoot)(document.getElementById("root")).render((0,E.createElement)(s));})();</script>
15
+ </body>
16
+ </html>
package/project/components/Separator/README.md ADDED
@@ -0,0 +1,37 @@
1
+ # Separator
2
+
3
+ Separator draws a thin rule between groups of content. Use `orientation="vertical"` inside a flex row with a set height. Set `decorative={false}` when the rule marks a real boundary that screen readers should announce.
4
+
5
+ ## On the canvas
6
+
7
+ ```html
8
+ <div class="nx:max-w-xs nx:rounded-lg nx:border-default nx:border-border-default nx:bg-container nx:p-4">
9
+ <div class="nx:flex nx:flex-col nx:gap-1">
10
+ <span class="nx:typography-label-default nx:text-container-foreground">Radix Primitives</span>
11
+ <span class="nx:typography-label-default nx:text-muted-foreground">An open-source UI component library.</span>
12
+ </div>
13
+ <x-import component-from-global-scope="Nxds.Separator" class-name="nx:my-4"></x-import>
14
+ <div class="nx:flex nx:h-5 nx:items-center nx:gap-3 nx:typography-label-default nx:text-muted-foreground">
15
+ <span>Blog</span>
16
+ <x-import component-from-global-scope="Nxds.Separator" orientation="vertical"></x-import>
17
+ <span>Docs</span>
18
+ <x-import component-from-global-scope="Nxds.Separator" orientation="vertical"></x-import>
19
+ <span>Source</span>
20
+ </div>
21
+ </div>
22
+ ```
23
+
24
+ Attributes set props, kebab-case to camelCase. Element content becomes `children`. An attribute holds text, so a prop that takes an element, a function or an object has no attribute.
25
+
26
+ ## Props
27
+
28
+ ### Separator
29
+
30
+ | Prop | Type | Default | Control |
31
+ | --- | --- | --- | --- |
32
+ | `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | dropdown |
33
+ | `decorative` | `boolean` | `true` | toggle |
34
+ | `children` | `React.ReactNode` | | content |
35
+ | `className` | `string` | | text |
36
+ | `id` | `string` | | text |
37
+ | `asChild` | `boolean` | | toggle |
package/project/components/Separator/preview.html ADDED
@@ -0,0 +1,16 @@
1
+ <!-- @dsCard group="Layout" height=120 -->
2
+ <!doctype html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="utf-8">
6
+ <title>Separator</title>
7
+ <style>
8
+ body { margin: 0; background: var(--nx-color-background); color: var(--nx-color-foreground); font-family: var(--font-sans); }
9
+ #root { padding: var(--nx-spacing-6); }
10
+ </style>
11
+ </head>
12
+ <body>
13
+ <div id="root"></div>
14
+ <script>(()=>{var h=Object.create;var m=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,K=Object.prototype.hasOwnProperty;var d=(n,e)=>()=>{try{return e||n((e={exports:{}}).exports,e),e.exports}catch(t){throw e=0,t}};var S=(n,e,t,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of R(e))!K.call(n,o)&&o!==t&&m(n,o,{get:()=>e[o],enumerable:!(a=N(e,o))||a.enumerable});return n};var p=(n,e,t)=>(t=n!=null?h(P(n)):{},S(e||!n||!n.__esModule?m(t,"default",{value:n,enumerable:!0}):t,n));var f=d((I,u)=>{u.exports=window.Nxds});var l=d((T,y)=>{y.exports=window.React});var v=d((A,w)=>{w.exports={createRoot:window.ReactDOM.createRoot}});var i=p(f());var s=p(l());function g(n,e){return e===void 0?n:{...n,key:e}}function r(n,e,t){return(0,s.createElement)(n,g(e,t))}function x(n,e,t){let{children:a,...o}=e;return(0,s.createElement)(n,g(o,t),...a)}function c(){return x("div",{className:"nx:max-w-xs nx:rounded-lg nx:border-default nx:border-border-default nx:bg-container nx:p-4",children:[x("div",{className:"nx:flex nx:flex-col nx:gap-1",children:[r("span",{className:"nx:typography-label-default nx:text-container-foreground",children:"Radix Primitives"}),r("span",{className:"nx:typography-label-default nx:text-muted-foreground",children:"An open-source UI component library."})]}),r(i.Separator,{className:"nx:my-4"}),x("div",{className:"nx:flex nx:h-5 nx:items-center nx:gap-3 nx:typography-label-default nx:text-muted-foreground",children:[r("span",{children:"Blog"}),r(i.Separator,{orientation:"vertical"}),r("span",{children:"Docs"}),r(i.Separator,{orientation:"vertical"}),r("span",{children:"Source"})]})]})}var b=p(l()),E=p(v());(0,E.createRoot)(document.getElementById("root")).render((0,b.createElement)(c));})();</script>
15
+ </body>
16
+ </html>