@nxds/claude-design 0.0.0-stage → 0.5.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 (154) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +21 -2
  3. package/coverage.json +2823 -0
  4. package/coverage.md +174 -0
  5. package/files.json +594 -0
  6. package/package.json +18 -3
  7. package/project/README.md +97 -0
  8. package/project/components/Accordion/README.md +84 -0
  9. package/project/components/Accordion/preview.html +16 -0
  10. package/project/components/Alert/README.md +97 -0
  11. package/project/components/Alert/preview.html +16 -0
  12. package/project/components/AlertDialog/README.md +170 -0
  13. package/project/components/AlertDialog/preview.html +16 -0
  14. package/project/components/AspectRatio/README.md +23 -0
  15. package/project/components/AspectRatio/preview.html +16 -0
  16. package/project/components/Attachment/README.md +127 -0
  17. package/project/components/Attachment/preview.html +16 -0
  18. package/project/components/Avatar/README.md +76 -0
  19. package/project/components/Avatar/preview.html +16 -0
  20. package/project/components/Badge/README.md +27 -0
  21. package/project/components/Badge/preview.html +16 -0
  22. package/project/components/Breadcrumb/README.md +117 -0
  23. package/project/components/Breadcrumb/preview.html +16 -0
  24. package/project/components/Bubble/README.md +57 -0
  25. package/project/components/Bubble/preview.html +16 -0
  26. package/project/components/Button/README.md +35 -0
  27. package/project/components/Button/preview.html +16 -0
  28. package/project/components/ButtonGroup/README.md +54 -0
  29. package/project/components/ButtonGroup/preview.html +16 -0
  30. package/project/components/Card/README.md +92 -0
  31. package/project/components/Card/preview.html +16 -0
  32. package/project/components/Carousel/README.md +85 -0
  33. package/project/components/Carousel/preview.html +16 -0
  34. package/project/components/Chart/README.md +124 -0
  35. package/project/components/Chart/preview.html +16 -0
  36. package/project/components/Checkbox/README.md +30 -0
  37. package/project/components/Checkbox/preview.html +16 -0
  38. package/project/components/ChoiceCard/README.md +61 -0
  39. package/project/components/ChoiceCard/preview.html +16 -0
  40. package/project/components/ChoiceRow/README.md +58 -0
  41. package/project/components/ChoiceRow/preview.html +16 -0
  42. package/project/components/Collapsible/README.md +73 -0
  43. package/project/components/Collapsible/preview.html +16 -0
  44. package/project/components/Combobox/README.md +158 -0
  45. package/project/components/Combobox/preview.html +16 -0
  46. package/project/components/Command/README.md +152 -0
  47. package/project/components/Command/preview.html +16 -0
  48. package/project/components/ContextMenu/README.md +215 -0
  49. package/project/components/ContextMenu/preview.html +16 -0
  50. package/project/components/Cover/preview.html +101 -0
  51. package/project/components/DatePicker/README.md +104 -0
  52. package/project/components/DatePicker/preview.html +16 -0
  53. package/project/components/DescriptionList/README.md +57 -0
  54. package/project/components/DescriptionList/preview.html +16 -0
  55. package/project/components/Dialog/README.md +166 -0
  56. package/project/components/Dialog/preview.html +16 -0
  57. package/project/components/Drawer/README.md +188 -0
  58. package/project/components/Drawer/preview.html +16 -0
  59. package/project/components/DropdownMenu/README.md +250 -0
  60. package/project/components/DropdownMenu/preview.html +16 -0
  61. package/project/components/EmptyState/README.md +84 -0
  62. package/project/components/EmptyState/preview.html +16 -0
  63. package/project/components/Field/README.md +129 -0
  64. package/project/components/Field/preview.html +16 -0
  65. package/project/components/FilterBuilder/README.md +34 -0
  66. package/project/components/FilterBuilder/preview.html +16 -0
  67. package/project/components/FilterChip/README.md +31 -0
  68. package/project/components/FilterChip/preview.html +16 -0
  69. package/project/components/FilterCondition/README.md +66 -0
  70. package/project/components/FilterCondition/preview.html +16 -0
  71. package/project/components/Hide/README.md +26 -0
  72. package/project/components/Hide/preview.html +16 -0
  73. package/project/components/HoverCard/README.md +77 -0
  74. package/project/components/HoverCard/preview.html +16 -0
  75. package/project/components/Input/README.md +37 -0
  76. package/project/components/Input/preview.html +16 -0
  77. package/project/components/InputGroup/README.md +109 -0
  78. package/project/components/InputGroup/preview.html +16 -0
  79. package/project/components/InputOTP/README.md +72 -0
  80. package/project/components/InputOTP/preview.html +16 -0
  81. package/project/components/Item/README.md +124 -0
  82. package/project/components/Item/preview.html +16 -0
  83. package/project/components/Kbd/README.md +40 -0
  84. package/project/components/Kbd/preview.html +16 -0
  85. package/project/components/Label/README.md +25 -0
  86. package/project/components/Label/preview.html +16 -0
  87. package/project/components/Marker/README.md +48 -0
  88. package/project/components/Marker/preview.html +16 -0
  89. package/project/components/Menubar/README.md +266 -0
  90. package/project/components/Menubar/preview.html +16 -0
  91. package/project/components/Message/README.md +78 -0
  92. package/project/components/Message/preview.html +16 -0
  93. package/project/components/MessageScroller/README.md +84 -0
  94. package/project/components/MessageScroller/preview.html +16 -0
  95. package/project/components/MultiSelect/README.md +122 -0
  96. package/project/components/MultiSelect/preview.html +16 -0
  97. package/project/components/NativeSelect/README.md +56 -0
  98. package/project/components/NativeSelect/preview.html +16 -0
  99. package/project/components/NavigationMenu/README.md +153 -0
  100. package/project/components/NavigationMenu/preview.html +16 -0
  101. package/project/components/PageHeader/README.md +86 -0
  102. package/project/components/PageHeader/preview.html +16 -0
  103. package/project/components/Pagination/README.md +123 -0
  104. package/project/components/Pagination/preview.html +16 -0
  105. package/project/components/Popover/README.md +87 -0
  106. package/project/components/Popover/preview.html +16 -0
  107. package/project/components/Progress/README.md +27 -0
  108. package/project/components/Progress/preview.html +16 -0
  109. package/project/components/RadioGroup/README.md +67 -0
  110. package/project/components/RadioGroup/preview.html +16 -0
  111. package/project/components/Resizable/README.md +66 -0
  112. package/project/components/Resizable/preview.html +16 -0
  113. package/project/components/ScrollArea/README.md +42 -0
  114. package/project/components/ScrollArea/preview.html +16 -0
  115. package/project/components/Select/README.md +161 -0
  116. package/project/components/Select/preview.html +16 -0
  117. package/project/components/Separator/README.md +37 -0
  118. package/project/components/Separator/preview.html +16 -0
  119. package/project/components/Sheet/README.md +160 -0
  120. package/project/components/Sheet/preview.html +16 -0
  121. package/project/components/Show/README.md +26 -0
  122. package/project/components/Show/preview.html +16 -0
  123. package/project/components/Sidebar/README.md +290 -0
  124. package/project/components/Sidebar/preview.html +16 -0
  125. package/project/components/Skeleton/README.md +30 -0
  126. package/project/components/Skeleton/preview.html +16 -0
  127. package/project/components/Slider/README.md +38 -0
  128. package/project/components/Slider/preview.html +16 -0
  129. package/project/components/Sonner/README.md +37 -0
  130. package/project/components/Sonner/preview.html +16 -0
  131. package/project/components/Spinner/README.md +27 -0
  132. package/project/components/Spinner/preview.html +16 -0
  133. package/project/components/Switch/README.md +31 -0
  134. package/project/components/Switch/preview.html +16 -0
  135. package/project/components/Table/README.md +120 -0
  136. package/project/components/Table/preview.html +16 -0
  137. package/project/components/Tabs/README.md +81 -0
  138. package/project/components/Tabs/preview.html +16 -0
  139. package/project/components/Textarea/README.md +32 -0
  140. package/project/components/Textarea/preview.html +16 -0
  141. package/project/components/Toggle/README.md +33 -0
  142. package/project/components/Toggle/preview.html +16 -0
  143. package/project/components/ToggleGroup/README.md +64 -0
  144. package/project/components/ToggleGroup/preview.html +16 -0
  145. package/project/components/Toolbar/README.md +123 -0
  146. package/project/components/Toolbar/preview.html +16 -0
  147. package/project/components/Tooltip/README.md +84 -0
  148. package/project/components/Tooltip/preview.html +16 -0
  149. package/project/components/bundle.css +8329 -0
  150. package/project/components/bundle.js +346 -0
  151. package/project/components/index.d.ts +8349 -0
  152. package/project/design-system.json +34 -0
  153. package/project/tokens.css +702 -0
  154. package/project/tokens.json +2998 -0
package/project/components/Card/README.md ADDED
@@ -0,0 +1,92 @@
1
+ # Card
2
+
3
+ Card groups related content and actions in a bordered section. Use it for dashboards, settings sections and forms. For a plain list row, use Item.
4
+
5
+ ## On the canvas
6
+
7
+ ```html
8
+ <x-import component-from-global-scope="Nxds.Card" class-name="nx:w-[350px]">
9
+ <x-import component-from-global-scope="Nxds.CardHeader">
10
+ <x-import component-from-global-scope="Nxds.CardTitle">Card Title</x-import>
11
+ <x-import component-from-global-scope="Nxds.CardDescription">Card description goes here.</x-import>
12
+ </x-import>
13
+ <x-import component-from-global-scope="Nxds.CardContent">
14
+ <p>Card content goes here.</p>
15
+ </x-import>
16
+ <x-import component-from-global-scope="Nxds.CardFooter">
17
+ <x-import component-from-global-scope="Nxds.Button" variant="outline">Cancel</x-import>
18
+ <x-import component-from-global-scope="Nxds.Button">Submit</x-import>
19
+ </x-import>
20
+ </x-import>
21
+ ```
22
+
23
+ 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.
24
+
25
+ ## Parts
26
+
27
+ - `Nxds.Card` — Groups related content and actions in a bordered section.
28
+ - `Nxds.CardAction` — Holds header actions, such as buttons or badges, beside the title.
29
+ - `Nxds.CardContent` — Main content area.
30
+ - `Nxds.CardDescription` — Supporting text under the title.
31
+ - `Nxds.CardFooter` — Holds actions and content at the bottom of the card.
32
+ - `Nxds.CardHeader` — Holds the title, description and `CardAction`.
33
+ - `Nxds.CardTitle` — Card heading.
34
+
35
+ ## Props
36
+
37
+ ### Card
38
+
39
+ | Prop | Type | Default | Control |
40
+ | --- | --- | --- | --- |
41
+ | `className` | `string` | | text |
42
+ | `id` | `string` | | text |
43
+ | `children` | `React.ReactNode` | | content |
44
+
45
+ ### CardAction
46
+
47
+ | Prop | Type | Default | Control |
48
+ | --- | --- | --- | --- |
49
+ | `className` | `string` | | text |
50
+ | `id` | `string` | | text |
51
+ | `children` | `React.ReactNode` | | content |
52
+
53
+ ### CardContent
54
+
55
+ | Prop | Type | Default | Control |
56
+ | --- | --- | --- | --- |
57
+ | `className` | `string` | | text |
58
+ | `id` | `string` | | text |
59
+ | `children` | `React.ReactNode` | | content |
60
+
61
+ ### CardDescription
62
+
63
+ | Prop | Type | Default | Control |
64
+ | --- | --- | --- | --- |
65
+ | `className` | `string` | | text |
66
+ | `id` | `string` | | text |
67
+ | `children` | `React.ReactNode` | | content |
68
+
69
+ ### CardFooter
70
+
71
+ | Prop | Type | Default | Control |
72
+ | --- | --- | --- | --- |
73
+ | `className` | `string` | | text |
74
+ | `id` | `string` | | text |
75
+ | `children` | `React.ReactNode` | | content |
76
+
77
+ ### CardHeader
78
+
79
+ | Prop | Type | Default | Control |
80
+ | --- | --- | --- | --- |
81
+ | `className` | `string` | | text |
82
+ | `id` | `string` | | text |
83
+ | `children` | `React.ReactNode` | | content |
84
+
85
+ ### CardTitle
86
+
87
+ | Prop | Type | Default | Control |
88
+ | --- | --- | --- | --- |
89
+ | `asChild` | `boolean` | `false` | toggle |
90
+ | `className` | `string` | | text |
91
+ | `id` | `string` | | text |
92
+ | `children` | `React.ReactNode` | | content |
package/project/components/Card/preview.html ADDED
@@ -0,0 +1,16 @@
1
+ <!-- @dsCard group="Data display" height=120 -->
2
+ <!doctype html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="utf-8">
6
+ <title>Card</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 f=Object.defineProperty;var D=Object.getOwnPropertyDescriptor;var K=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,B=Object.prototype.hasOwnProperty;var c=(t,e)=>()=>{try{return e||t((e={exports:{}}).exports,e),e.exports}catch(o){throw e=0,o}};var F=(t,e,o,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of K(e))!B.call(t,n)&&n!==o&&f(t,n,{get:()=>e[n],enumerable:!(i=D(e,n))||i.enumerable});return t};var d=(t,e,o)=>(o=t!=null?h(P(t)):{},F(e||!t||!t.__esModule?f(o,"default",{value:t,enumerable:!0}):o,t));var m=c((H,y)=>{y.exports=window.Nxds});var u=c((N,x)=>{x.exports=window.React});var R=c((v,E)=>{E.exports={createRoot:window.ReactDOM.createRoot}});var C=d(m()),r=d(m());var p=d(u());function w(t,e){return e===void 0?t:{...t,key:e}}function a(t,e,o){return(0,p.createElement)(t,w(e,o))}function s(t,e,o){let{children:i,...n}=e;return(0,p.createElement)(t,w(n,o),...i)}function l(){return s(r.Card,{className:"nx:w-[350px]",children:[s(r.CardHeader,{children:[a(r.CardTitle,{children:"Card Title"}),a(r.CardDescription,{children:"Card description goes here."})]}),a(r.CardContent,{children:a("p",{children:"Card content goes here."})}),s(r.CardFooter,{children:[a(C.Button,{variant:"outline",children:"Cancel"}),a(C.Button,{children:"Submit"})]})]})}var T=d(u()),g=d(R());(0,g.createRoot)(document.getElementById("root")).render((0,T.createElement)(l));})();</script>
15
+ </body>
16
+ </html>
package/project/components/Carousel/README.md ADDED
@@ -0,0 +1,85 @@
1
+ # Carousel
2
+
3
+ Carousel shows a set of slides that readers move through one at a time. Use it for galleries and featured content. Install the `embla-carousel-react` peer dependency first.
4
+
5
+ ## On the canvas
6
+
7
+ ```html
8
+ <x-import component-from-global-scope="Nxds.Carousel" orientation="vertical">Carousel</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.Carousel` — Slideshow built on Embla that scrolls horizontally or vertically.
16
+ - `Nxds.CarouselContent`
17
+ - `Nxds.CarouselItem`
18
+ - `Nxds.CarouselNext`
19
+ - `Nxds.CarouselPrevious`
20
+
21
+ ## Props
22
+
23
+ ### Carousel
24
+
25
+ | Prop | Type | Default | Control |
26
+ | --- | --- | --- | --- |
27
+ | `className` | `string` | | text |
28
+ | `id` | `string` | | text |
29
+ | `children` | `React.ReactNode` | | content |
30
+ | `opts` | `Partial<OptionsType>` | | none (object) |
31
+ | `plugins` | `CreatePluginType<LoosePluginType, {}>[]` | | none (object) |
32
+ | `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | dropdown |
33
+ | `setApi` | `(api: EmblaCarouselType \| undefined) => void` | | none (function) |
34
+
35
+ ### CarouselContent
36
+
37
+ | Prop | Type | Default | Control |
38
+ | --- | --- | --- | --- |
39
+ | `className` | `string` | | text |
40
+ | `id` | `string` | | text |
41
+ | `children` | `React.ReactNode` | | content |
42
+
43
+ ### CarouselItem
44
+
45
+ | Prop | Type | Default | Control |
46
+ | --- | --- | --- | --- |
47
+ | `className` | `string` | | text |
48
+ | `id` | `string` | | text |
49
+ | `children` | `React.ReactNode` | | content |
50
+
51
+ ### CarouselNext
52
+
53
+ | Prop | Type | Default | Control |
54
+ | --- | --- | --- | --- |
55
+ | `asChild` | `boolean` | `false` | toggle |
56
+ | `loading` | `boolean` | `false` | toggle |
57
+ | `startIcon` | `React.ReactNode` | | none (element) |
58
+ | `endIcon` | `React.ReactNode` | | none (element) |
59
+ | `disabled` | `boolean` | | toggle |
60
+ | `name` | `string` | | text |
61
+ | `type` | `"button" \| "submit" \| "reset"` | `"button"` | dropdown |
62
+ | `value` | `string \| number \| readonly string[]` | | none (object) |
63
+ | `className` | `string` | | text |
64
+ | `id` | `string` | | text |
65
+ | `children` | `React.ReactNode` | | content |
66
+ | `variant` | `"link" \| "default" \| "destructive" \| "error" \| "outline" \| "dashed" \| "secondary" \| "ghost"` | `"outline"` | dropdown |
67
+ | `size` | `"default" \| "sm" \| "lg" \| "icon-sm" \| "icon" \| "icon-lg"` | `"icon"` | dropdown |
68
+
69
+ ### CarouselPrevious
70
+
71
+ | Prop | Type | Default | Control |
72
+ | --- | --- | --- | --- |
73
+ | `asChild` | `boolean` | `false` | toggle |
74
+ | `loading` | `boolean` | `false` | toggle |
75
+ | `startIcon` | `React.ReactNode` | | none (element) |
76
+ | `endIcon` | `React.ReactNode` | | none (element) |
77
+ | `disabled` | `boolean` | | toggle |
78
+ | `name` | `string` | | text |
79
+ | `type` | `"button" \| "submit" \| "reset"` | `"button"` | dropdown |
80
+ | `value` | `string \| number \| readonly string[]` | | none (object) |
81
+ | `className` | `string` | | text |
82
+ | `id` | `string` | | text |
83
+ | `children` | `React.ReactNode` | | content |
84
+ | `variant` | `"link" \| "default" \| "destructive" \| "error" \| "outline" \| "dashed" \| "secondary" \| "ghost"` | `"outline"` | dropdown |
85
+ | `size` | `"default" \| "sm" \| "lg" \| "icon-sm" \| "icon" \| "icon-lg"` | `"icon"` | dropdown |
package/project/components/Carousel/preview.html ADDED
@@ -0,0 +1,16 @@
1
+ <!-- @dsCard group="Data display" height=320 -->
2
+ <!doctype html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="utf-8">
6
+ <title>Carousel</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 P=Object.create;var x=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var I=Object.getPrototypeOf,K=Object.prototype.hasOwnProperty;var u=(e,t)=>()=>{try{return t||e((t={exports:{}}).exports,t),t.exports}catch(r){throw t=0,r}};var g=(e,t,r,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of v(t))!K.call(e,a)&&a!==r&&x(e,a,{get:()=>t[a],enumerable:!(s=R(t,a))||s.enumerable});return e};var l=(e,t,r)=>(r=e!=null?P(I(e)):{},g(t||!e||!e.__esModule?x(r,"default",{value:e,enumerable:!0}):r,e));var p=u((D,c)=>{c.exports=window.Nxds});var d=u((T,f)=>{f.exports=window.React});var E=u((B,C)=>{C.exports={createRoot:window.ReactDOM.createRoot}});var o=l(p());var m=l(d());function y(e,t){return t===void 0?e:{...e,key:t}}function n(e,t,r){return(0,m.createElement)(e,y(t,r))}function w(e,t,r){let{children:s,...a}=t;return(0,m.createElement)(e,y(a,r),...s)}var h=[1,2,3,4,5].map(e=>n(o.CarouselItem,{"aria-label":`Slide ${e} of 5`,children:n("div",{className:"nx:flex nx:aspect-square nx:items-center nx:justify-center nx:rounded-md nx:border-default nx:border-border-default",children:n("span",{className:"nx:text-[2.25rem] nx:font-semibold",children:e})})},e));function i(){return n("div",{className:"nx:mx-auto nx:w-full nx:max-w-xs",children:w(o.Carousel,{className:"nx:w-full","aria-label":"Image carousel",children:[n(o.CarouselContent,{children:h}),n(o.CarouselPrevious,{}),n(o.CarouselNext,{})]})})}var b=l(d()),N=l(E());(0,N.createRoot)(document.getElementById("root")).render((0,b.createElement)(i));})();</script>
15
+ </body>
16
+ </html>
package/project/components/Chart/README.md ADDED
@@ -0,0 +1,124 @@
1
+ # Chart
2
+
3
+ ChartContainer wraps a Recharts chart with nxds colors, tooltips and legends. Use it for bar, area and line charts. Set the label and color of each series in `config`.
4
+
5
+ ## On the canvas
6
+
7
+ ```html
8
+ <x-import component-from-global-scope="Nxds.ChartContainer">ChartContainer</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.ChartContainer`
16
+ - `Nxds.ChartLegend`
17
+ - `Nxds.ChartLegendContent`
18
+ - `Nxds.ChartTooltip`
19
+ - `Nxds.ChartTooltipContent`
20
+
21
+ ## Props
22
+
23
+ ### ChartContainer
24
+
25
+ | Prop | Type | Default | Control |
26
+ | --- | --- | --- | --- |
27
+ | `className` | `string` | | text |
28
+ | `id` | `string` | | text |
29
+ | `children` | `React.ReactNode` | | content |
30
+ | `config` | `ChartConfig` | | none (object) |
31
+
32
+ ### ChartLegend
33
+
34
+ | Prop | Type | Default | Control |
35
+ | --- | --- | --- | --- |
36
+ | `children` | `React.ReactNode` | | content |
37
+ | `dangerouslySetInnerHTML` | `{ __html: string; }` | | none (object) |
38
+ | `onClick` | `(data: LegendPayload, index: number, event: MouseEvent<HTMLElement, MouseEvent>) => void` | | none (function) |
39
+ | `onMouseEnter` | `(data: LegendPayload, index: number, event: MouseEvent<HTMLElement, MouseEvent>) => void` | | none (function) |
40
+ | `onMouseLeave` | `(data: LegendPayload, index: number, event: MouseEvent<HTMLElement, MouseEvent>) => void` | | none (function) |
41
+ | `className` | `string` | | text |
42
+ | `id` | `string` | | text |
43
+ | `max` | `string \| number` | | none (object) |
44
+ | `min` | `string \| number` | | none (object) |
45
+ | `name` | `string` | | text |
46
+ | `target` | `string` | | text |
47
+ | `type` | `string` | | text |
48
+ | `href` | `string` | | text |
49
+ | `iconSize` | `number` | | number |
50
+ | `iconType` | `"none" \| "circle" \| "line" \| "rect" \| "cross" \| "diamond" \| "plainline" \| "square" \| "star" \| "triangle" \| "wye"` | | dropdown |
51
+ | `layout` | `"horizontal" \| "vertical"` | | dropdown |
52
+ | `align` | `"center" \| "left" \| "right"` | | dropdown |
53
+ | `inactiveColor` | `string` | | text |
54
+ | `formatter` | `Formatter` | | none (object) |
55
+ | `labelStyle` | `React.CSSProperties` | | none (object) |
56
+ | `content` | `ContentType` | | none (object) |
57
+ | `wrapperStyle` | `React.CSSProperties` | | none (object) |
58
+ | `payloadUniqBy` | `UniqueOption<LegendPayload>` | | none (object) |
59
+ | `onBBoxUpdate` | `(box: ElementOffset \| null) => void` | | none (function) |
60
+ | `portal` | `HTMLElement` | | none (object) |
61
+ | `itemSorter` | `LegendItemSorter` | | none (object) |
62
+ | `verticalAlign` | `"top" \| "bottom" \| "middle"` | | dropdown |
63
+
64
+ ### ChartLegendContent
65
+
66
+ | Prop | Type | Default | Control |
67
+ | --- | --- | --- | --- |
68
+ | `className` | `string` | | text |
69
+ | `hideIcon` | `boolean` | `false` | toggle |
70
+ | `verticalAlign` | `"top" \| "bottom"` | `"bottom"` | dropdown |
71
+ | `nameKey` | `string` | | text |
72
+ | `payload` | `readonly LegendPayload[]` | | none (object) |
73
+
74
+ ### ChartTooltip
75
+
76
+ | Prop | Type | Default | Control |
77
+ | --- | --- | --- | --- |
78
+ | `formatter` | `Formatter<ValueType, NameType> & ((value: ValueType, name: NameType, item: TooltipPayloadEntry, index: number, payload: TooltipPayload) => React.ReactNode \| [React.ReactNode, React.ReactNode])` | | none (element) |
79
+ | `labelStyle` | `React.CSSProperties` | | none (object) |
80
+ | `separator` | `string` | | text |
81
+ | `wrapperClassName` | `string` | | text |
82
+ | `labelClassName` | `string` | | text |
83
+ | `contentStyle` | `React.CSSProperties` | | none (object) |
84
+ | `itemStyle` | `React.CSSProperties` | | none (object) |
85
+ | `labelFormatter` | `((label: React.ReactNode, payload: readonly Payload<ValueType, NameType>[]) => React.ReactNode) & ((label: any, payload: TooltipPayload) => React.ReactNode)` | | none (element) |
86
+ | `itemSorter` | `TooltipItemSorter<ValueType, NameType> & TooltipItemSorter` | | none (object) |
87
+ | `active` | `boolean` | | toggle |
88
+ | `allowEscapeViewBox` | `AllowInDimension` | | none (object) |
89
+ | `animationDuration` | `number` | | number |
90
+ | `animationEasing` | `"ease" \| "ease-in" \| "ease-out" \| "ease-in-out" \| "linear"` | | dropdown |
91
+ | `axisId` | `AxisId` | | none (object) |
92
+ | `content` | `ContentType<ValueType, NameType>` | | none (object) |
93
+ | `cursor` | `CursorDefinition` | | none (object) |
94
+ | `defaultIndex` | `string \| number` | | none (object) |
95
+ | `filterNull` | `boolean` | | toggle |
96
+ | `includeHidden` | `boolean` | | toggle |
97
+ | `isAnimationActive` | `"auto" \| boolean` | | dropdown |
98
+ | `offset` | `number \| Coordinate` | | none (object) |
99
+ | `payloadUniqBy` | `UniqueOption<TooltipPayloadEntry>` | | none (object) |
100
+ | `portal` | `HTMLElement` | | none (object) |
101
+ | `position` | `Partial<Coordinate>` | | none (object) |
102
+ | `reverseDirection` | `AllowInDimension` | | none (object) |
103
+ | `shared` | `boolean` | | toggle |
104
+ | `trigger` | `"hover" \| "click"` | | dropdown |
105
+ | `useTranslate3d` | `boolean` | | toggle |
106
+ | `wrapperStyle` | `React.CSSProperties` | | none (object) |
107
+
108
+ ### ChartTooltipContent
109
+
110
+ | Prop | Type | Default | Control |
111
+ | --- | --- | --- | --- |
112
+ | `active` | `boolean` | | toggle |
113
+ | `className` | `string` | | text |
114
+ | `indicator` | `"line" \| "dashed" \| "dot"` | `"dot"` | dropdown |
115
+ | `hideLabel` | `boolean` | `false` | toggle |
116
+ | `hideIndicator` | `boolean` | `false` | toggle |
117
+ | `formatter` | `ChartTooltipFormatter` | | none (object) |
118
+ | `color` | `string` | | text |
119
+ | `nameKey` | `string` | | text |
120
+ | `labelKey` | `string` | | text |
121
+ | `payload` | `readonly Payload<ValueType, NameType>[]` | | none (object) |
122
+ | `label` | `React.ReactNode` | | none (element) |
123
+ | `labelClassName` | `string` | | text |
124
+ | `labelFormatter` | `(label: React.ReactNode, payload: readonly Payload<ValueType, NameType>[]) => React.ReactNode` | | none (element) |
package/project/components/Chart/preview.html ADDED
@@ -0,0 +1,16 @@
1
+ <!-- @dsCard group="Data display" height=320 -->
2
+ <!doctype html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="utf-8">
6
+ <title>Chart</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 B=Object.create;var f=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var T=Object.getOwnPropertyNames;var I=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var c=(t,e)=>()=>{try{return e||t((e={exports:{}}).exports,e),e.exports}catch(r){throw e=0,r}};var D=(t,e,r,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of T(e))!N.call(t,i)&&i!==r&&f(t,i,{get:()=>e[i],enumerable:!(l=P(e,i))||l.enumerable});return t};var s=(t,e,r)=>(r=t!=null?B(I(t)):{},D(e||!t||!t.__esModule?f(r,"default",{value:t,enumerable:!0}):r,t));var d=c((O,u)=>{u.exports=window.React});var y=c((U,x)=>{x.exports=window.Nxds.Icons});var w=c((G,C)=>{C.exports=window.Nxds.Recharts});var b=c((V,k)=>{k.exports=window.Nxds});var K=c((q,v)=>{v.exports={createRoot:window.ReactDOM.createRoot}});var E=s(d()),M=s(y()),a=s(w()),n=s(b());var p=s(d());function g(t,e){return e===void 0?t:{...t,key:e}}function o(t,e,r){return(0,p.createElement)(t,g(e,r))}function m(t,e,r){let{children:l,...i}=e;return(0,p.createElement)(t,g(i,r),...l)}var F=[{month:"January",desktop:186,mobile:80},{month:"February",desktop:305,mobile:200},{month:"March",desktop:237,mobile:120},{month:"April",desktop:173,mobile:190},{month:"May",desktop:209,mobile:130},{month:"June",desktop:264,mobile:140}],S={desktop:{label:"Desktop (solid)",color:"var(--nx-color-chart-categorical-1)"},mobile:{label:"Mobile (patterned)",color:"var(--nx-color-chart-categorical-2)",icon:M.IconTexture}},j=t=>t.slice(0,3);function A(){let t=(0,E.useId)();return o(n.ChartContainer,{config:S,children:m(a.BarChart,{accessibilityLayer:!0,data:F,children:[o("defs",{children:m("pattern",{id:t,width:6,height:6,patternUnits:"userSpaceOnUse",children:[o("rect",{width:6,height:6,fill:"var(--color-mobile)"}),o("path",{d:"M0 0L6 6M-3 3L3 9M3 -3L9 3",stroke:"var(--nx-color-container)",strokeWidth:1.5})]})}),o(a.CartesianGrid,{vertical:!1}),o(a.XAxis,{dataKey:"month",tickLine:!1,axisLine:!1,tickMargin:8,tickFormatter:j}),o(n.ChartTooltip,{content:o(n.ChartTooltipContent,{indicator:"dashed"})}),o(n.ChartLegend,{content:o(n.ChartLegendContent,{})}),o(a.Bar,{dataKey:"desktop",fill:"var(--color-desktop)",radius:4}),o(a.Bar,{dataKey:"mobile",fill:`url(#${t})`,radius:4})]})})}function h(){return o("div",{className:"nx:w-[600px] nx:max-w-full",children:o(A,{})})}var L=s(d()),R=s(K());(0,R.createRoot)(document.getElementById("root")).render((0,L.createElement)(h));})();</script>
15
+ </body>
16
+ </html>
package/project/components/Checkbox/README.md ADDED
@@ -0,0 +1,30 @@
1
+ # Checkbox
2
+
3
+ Checkbox selects one or more options, or toggles one setting. Its indeterminate state marks a partly selected group. Pair it with Label, or use ChoiceRow or ChoiceCard for richer option rows.
4
+
5
+ ## On the canvas
6
+
7
+ ```html
8
+ <x-import component-from-global-scope="Nxds.Checkbox" checked="indeterminate" default-checked="indeterminate">Checkbox</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
+ ## Props
14
+
15
+ ### Checkbox
16
+
17
+ | Prop | Type | Default | Control |
18
+ | --- | --- | --- | --- |
19
+ | `checked` | `"indeterminate" \| boolean` | | dropdown |
20
+ | `defaultChecked` | `"indeterminate" \| boolean` | | dropdown |
21
+ | `required` | `boolean` | | toggle |
22
+ | `onCheckedChange` | `(checked: CheckedState) => void` | | none (function) |
23
+ | `children` | `React.ReactNode` | | content |
24
+ | `className` | `string` | | text |
25
+ | `id` | `string` | | text |
26
+ | `name` | `string` | | text |
27
+ | `type` | `"button" \| "submit" \| "reset"` | | dropdown |
28
+ | `asChild` | `boolean` | | toggle |
29
+ | `disabled` | `boolean` | | toggle |
30
+ | `value` | `string \| number \| readonly string[]` | | none (object) |
package/project/components/Checkbox/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>Checkbox</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 l=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var I=Object.getOwnPropertyNames;var L=Object.getPrototypeOf,T=Object.prototype.hasOwnProperty;var s=(e,t)=>()=>{try{return t||e((t={exports:{}}).exports,t),t.exports}catch(o){throw t=0,o}};var j=(e,t,o,m)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of I(t))!T.call(e,r)&&r!==o&&l(e,r,{get:()=>t[r],enumerable:!(m=k(t,r))||m.enumerable});return e};var n=(e,t,o)=>(o=e!=null?g(L(e)):{},j(t||!e||!e.__esModule?l(o,"default",{value:e,enumerable:!0}):o,e));var c=s((C,f)=>{f.exports=window.React});var p=s((D,x)=>{x.exports=window.Nxds});var b=s((B,h)=>{h.exports={createRoot:window.ReactDOM.createRoot}});var w=n(c()),E=n(p()),R=n(p());var i=n(c());function u(e,t){return t===void 0?e:{...e,key:t}}function a(e,t,o){return(0,i.createElement)(e,u(t,o))}function y(e,t,o){let{children:m,...r}=t;return(0,i.createElement)(e,u(r,o),...m)}function d(){let e=w.useId();return y("div",{className:"nx:flex nx:items-center nx:gap-2",children:[a(E.Checkbox,{id:e}),a(R.Label,{htmlFor:e,children:"Accept terms and conditions"})]})}var K=n(c()),P=n(b());(0,P.createRoot)(document.getElementById("root")).render((0,K.createElement)(d));})();</script>
15
+ </body>
16
+ </html>
package/project/components/ChoiceCard/README.md ADDED
@@ -0,0 +1,61 @@
1
+ # ChoiceCard
2
+
3
+ ChoiceCard is a clickable card for a checkbox or radio choice with a title and description. The nested Checkbox or RadioGroupItem stays the only control. For a simple inline label use Label, and for compact options use ChoiceRow.
4
+
5
+ ## On the canvas
6
+
7
+ ```html
8
+ <div class="nx:w-96 nx:max-w-full">
9
+ <x-import component-from-global-scope="Nxds.ChoiceCard" html-for="choice-card-default" variant="bordered">
10
+ <x-import component-from-global-scope="Nxds.Checkbox" id="choice-card-default" aria-labelledby="choice-card-default-title" aria-describedby="choice-card-default-description"></x-import>
11
+ <x-import component-from-global-scope="Nxds.ChoiceCardContent">
12
+ <x-import component-from-global-scope="Nxds.ChoiceCardTitle" id="choice-card-default-title">Product updates</x-import>
13
+ <x-import component-from-global-scope="Nxds.ChoiceCardDescription" id="choice-card-default-description">News about features and improvements.</x-import>
14
+ </x-import>
15
+ </x-import>
16
+ </div>
17
+ ```
18
+
19
+ 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.
20
+
21
+ ## Parts
22
+
23
+ - `Nxds.ChoiceCard` — Label card for a checkbox or radio choice with a title and description.
24
+ - `Nxds.ChoiceCardContent` — Stacks the title and description.
25
+ - `Nxds.ChoiceCardDescription` — Optional helper text.
26
+ - `Nxds.ChoiceCardTitle` — Choice label.
27
+
28
+ ## Props
29
+
30
+ ### ChoiceCard
31
+
32
+ | Prop | Type | Default | Control |
33
+ | --- | --- | --- | --- |
34
+ | `children` | `React.ReactNode` | | content |
35
+ | `className` | `string` | | text |
36
+ | `id` | `string` | | text |
37
+ | `variant` | `"bordered" \| "borderless"` | `"bordered"` | dropdown |
38
+
39
+ ### ChoiceCardContent
40
+
41
+ | Prop | Type | Default | Control |
42
+ | --- | --- | --- | --- |
43
+ | `className` | `string` | | text |
44
+ | `id` | `string` | | text |
45
+ | `children` | `React.ReactNode` | | content |
46
+
47
+ ### ChoiceCardDescription
48
+
49
+ | Prop | Type | Default | Control |
50
+ | --- | --- | --- | --- |
51
+ | `className` | `string` | | text |
52
+ | `id` | `string` | | text |
53
+ | `children` | `React.ReactNode` | | content |
54
+
55
+ ### ChoiceCardTitle
56
+
57
+ | Prop | Type | Default | Control |
58
+ | --- | --- | --- | --- |
59
+ | `className` | `string` | | text |
60
+ | `id` | `string` | | text |
61
+ | `children` | `React.ReactNode` | | content |
package/project/components/ChoiceCard/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>ChoiceCard</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 D=Object.getOwnPropertyDescriptor;var K=Object.getOwnPropertyNames;var T=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var l=(t,e)=>()=>{try{return e||t((e={exports:{}}).exports,e),e.exports}catch(r){throw e=0,r}};var g=(t,e,r,d)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of K(e))!v.call(t,i)&&i!==r&&f(t,i,{get:()=>e[i],enumerable:!(d=D(e,i))||d.enumerable});return t};var c=(t,e,r)=>(r=t!=null?R(T(t)):{},g(e||!t||!t.__esModule?f(r,"default",{value:t,enumerable:!0}):r,t));var p=l((j,C)=>{C.exports=window.Nxds});var s=l((k,h)=>{h.exports=window.React});var E=l((M,w)=>{w.exports={createRoot:window.ReactDOM.createRoot}});var x=c(p()),o=c(p());var a=c(s());function y(t,e){return e===void 0?t:{...t,key:e}}function n(t,e,r){return(0,a.createElement)(t,y(e,r))}function m(t,e,r){let{children:d,...i}=e;return(0,a.createElement)(t,y(i,r),...d)}function u(){return n("div",{className:"nx:w-96 nx:max-w-full",children:m(o.ChoiceCard,{htmlFor:"choice-card-default",variant:"bordered",children:[n(x.Checkbox,{id:"choice-card-default","aria-labelledby":"choice-card-default-title","aria-describedby":"choice-card-default-description"}),m(o.ChoiceCardContent,{children:[n(o.ChoiceCardTitle,{id:"choice-card-default-title",children:"Product updates"}),n(o.ChoiceCardDescription,{id:"choice-card-default-description",children:"News about features and improvements."})]})]})})}var b=c(s()),P=c(E());(0,P.createRoot)(document.getElementById("root")).render((0,b.createElement)(u));})();</script>
15
+ </body>
16
+ </html>
package/project/components/ChoiceRow/README.md ADDED
@@ -0,0 +1,58 @@
1
+ # ChoiceRow
2
+
3
+ ChoiceRow makes a whole row the click target for a checkbox or radio choice. The nested Checkbox or RadioGroupItem stays the real control. For a simple inline label use Label, and for a roomier card use ChoiceCard.
4
+
5
+ ## On the canvas
6
+
7
+ ```html
8
+ <div class="nx:w-80">
9
+ <x-import component-from-global-scope="Nxds.ChoiceRow" html-for="choice-default">
10
+ <x-import component-from-global-scope="Nxds.Checkbox" id="choice-default" aria-labelledby="choice-default-title"></x-import>
11
+ <x-import component-from-global-scope="Nxds.ChoiceRowTitle" id="choice-default-title">Product updates</x-import>
12
+ </x-import>
13
+ </div>
14
+ ```
15
+
16
+ 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.
17
+
18
+ ## Parts
19
+
20
+ - `Nxds.ChoiceRow` — Compact label row for a checkbox or radio choice.
21
+ - `Nxds.ChoiceRowContent` — Optional wrapper that stacks the title and description.
22
+ - `Nxds.ChoiceRowDescription` — Optional helper text.
23
+ - `Nxds.ChoiceRowTitle` — Choice label.
24
+
25
+ ## Props
26
+
27
+ ### ChoiceRow
28
+
29
+ | Prop | Type | Default | Control |
30
+ | --- | --- | --- | --- |
31
+ | `children` | `React.ReactNode` | | content |
32
+ | `className` | `string` | | text |
33
+ | `id` | `string` | | text |
34
+ | `asChild` | `boolean` | | toggle |
35
+
36
+ ### ChoiceRowContent
37
+
38
+ | Prop | Type | Default | Control |
39
+ | --- | --- | --- | --- |
40
+ | `className` | `string` | | text |
41
+ | `id` | `string` | | text |
42
+ | `children` | `React.ReactNode` | | content |
43
+
44
+ ### ChoiceRowDescription
45
+
46
+ | Prop | Type | Default | Control |
47
+ | --- | --- | --- | --- |
48
+ | `className` | `string` | | text |
49
+ | `id` | `string` | | text |
50
+ | `children` | `React.ReactNode` | | content |
51
+
52
+ ### ChoiceRowTitle
53
+
54
+ | Prop | Type | Default | Control |
55
+ | --- | --- | --- | --- |
56
+ | `className` | `string` | | text |
57
+ | `id` | `string` | | text |
58
+ | `children` | `React.ReactNode` | | content |
package/project/components/ChoiceRow/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>ChoiceRow</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 K=Object.create;var s=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var a=(t,e)=>()=>{try{return e||t((e={exports:{}}).exports,e),e.exports}catch(o){throw e=0,o}};var j=(t,e,o,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of b(e))!D.call(t,r)&&r!==o&&s(t,r,{get:()=>e[r],enumerable:!(i=T(e,r))||i.enumerable});return t};var n=(t,e,o)=>(o=t!=null?K(g(t)):{},j(e||!t||!t.__esModule?s(o,"default",{value:t,enumerable:!0}):o,t));var m=a((v,f)=>{f.exports=window.Nxds});var p=a((F,w)=>{w.exports=window.React});var E=a((M,R)=>{R.exports={createRoot:window.ReactDOM.createRoot}});var x=n(m()),l=n(m());var c=n(p());function h(t,e){return e===void 0?t:{...t,key:e}}function d(t,e,o){return(0,c.createElement)(t,h(e,o))}function y(t,e,o){let{children:i,...r}=e;return(0,c.createElement)(t,h(r,o),...i)}function u(){return d("div",{className:"nx:w-80",children:y(l.ChoiceRow,{htmlFor:"choice-default",children:[d(x.Checkbox,{id:"choice-default","aria-labelledby":"choice-default-title"}),d(l.ChoiceRowTitle,{id:"choice-default-title",children:"Product updates"})]})})}var C=n(p()),P=n(E());(0,P.createRoot)(document.getElementById("root")).render((0,C.createElement)(u));})();</script>
15
+ </body>
16
+ </html>
package/project/components/Collapsible/README.md ADDED
@@ -0,0 +1,73 @@
1
+ # Collapsible
2
+
3
+ Collapsible shows and hides one content region. Use it for a single expandable section. For a stacked set of sections, use Accordion.
4
+
5
+ ## On the canvas
6
+
7
+ ```html
8
+ <x-import component-from-global-scope="Nxds.Collapsible" class-name="nx:flex nx:w-72 nx:flex-col">
9
+ <div class="nx:flex nx:flex-col nx:gap-2">
10
+ <div class="nx:flex nx:items-center nx:justify-between nx:gap-4">
11
+ <span class="nx:typography-label-default nx:text-foreground">@nxds starred 3 repositories</span>
12
+ <x-import component-from-global-scope="Nxds.CollapsibleTrigger" as-child>
13
+ <x-import component-from-global-scope="Nxds.Button" variant="ghost" size="sm" aria-label="Toggle repositories">
14
+ <x-import component-from-global-scope="Nxds.Icons.IconSelector"></x-import>
15
+ </x-import>
16
+ </x-import>
17
+ </div>
18
+ <div class="nx:rounded-md nx:border-default nx:border-border-default nx:px-4 nx:py-2 nx:typography-label-default nx:text-foreground">@radix-ui/react-collapsible</div>
19
+ </div>
20
+ <x-import component-from-global-scope="Nxds.CollapsibleContent">
21
+ <div class="nx:mt-2 nx:flex nx:flex-col nx:gap-2">
22
+ <div class="nx:rounded-md nx:border-default nx:border-border-default nx:px-4 nx:py-2 nx:typography-label-default nx:text-foreground">@radix-ui/react-toggle</div>
23
+ <div class="nx:rounded-md nx:border-default nx:border-border-default nx:px-4 nx:py-2 nx:typography-label-default nx:text-foreground">@radix-ui/react-slider</div>
24
+ </div>
25
+ </x-import>
26
+ </x-import>
27
+ ```
28
+
29
+ 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.
30
+
31
+ ## Parts
32
+
33
+ - `Nxds.Collapsible` — Shows and hides one content region.
34
+ - `Nxds.CollapsibleContent` — The region shown while the collapsible is open.
35
+ - `Nxds.CollapsibleTrigger` — Toggles the collapsible.
36
+
37
+ ## Props
38
+
39
+ ### Collapsible
40
+
41
+ | Prop | Type | Default | Control |
42
+ | --- | --- | --- | --- |
43
+ | `defaultOpen` | `boolean` | | toggle |
44
+ | `open` | `boolean` | | toggle |
45
+ | `disabled` | `boolean` | | toggle |
46
+ | `onOpenChange` | `(open: boolean) => void` | | none (function) |
47
+ | `children` | `React.ReactNode` | | content |
48
+ | `className` | `string` | | text |
49
+ | `id` | `string` | | text |
50
+ | `asChild` | `boolean` | | toggle |
51
+
52
+ ### CollapsibleContent
53
+
54
+ | Prop | Type | Default | Control |
55
+ | --- | --- | --- | --- |
56
+ | `forceMount` | `true` | | toggle |
57
+ | `children` | `React.ReactNode` | | content |
58
+ | `className` | `string` | | text |
59
+ | `id` | `string` | | text |
60
+ | `asChild` | `boolean` | | toggle |
61
+
62
+ ### CollapsibleTrigger
63
+
64
+ | Prop | Type | Default | Control |
65
+ | --- | --- | --- | --- |
66
+ | `children` | `React.ReactNode` | | content |
67
+ | `className` | `string` | | text |
68
+ | `id` | `string` | | text |
69
+ | `name` | `string` | | text |
70
+ | `type` | `"button" \| "submit" \| "reset"` | | dropdown |
71
+ | `asChild` | `boolean` | | toggle |
72
+ | `disabled` | `boolean` | | toggle |
73
+ | `value` | `string \| number \| readonly string[]` | | none (object) |