@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/Drawer/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>Drawer</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 C=Object.create;var l=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var K=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty;var D=(r,e)=>()=>{try{return e||r((e={exports:{}}).exports,e),e.exports}catch(o){throw e=0,o}};var v=(r,e,o,w)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of R(e))!P.call(r,a)&&a!==o&&l(r,a,{get:()=>e[a],enumerable:!(w=T(e,a))||w.enumerable});return r};var i=(r,e,o)=>(o=r!=null?C(K(r)):{},v(e||!r||!r.__esModule?l(o,"default",{value:r,enumerable:!0}):o,r));var c=D((F,y)=>{y.exports=window.Nxds});var m=D((O,f)=>{f.exports=window.React});var h=D((N,x)=>{x.exports={createRoot:window.ReactDOM.createRoot}});var p=i(c()),t=i(c());var d=i(m());function g(r,e){return e===void 0?r:{...r,key:e}}function n(r,e,o){return(0,d.createElement)(r,g(e,o))}function s(r,e,o){let{children:w,...a}=e;return(0,d.createElement)(r,g(a,o),...w)}function u(){return s(t.Drawer,{children:[n(t.DrawerTrigger,{asChild:!0,children:n(p.Button,{variant:"outline",children:"Open Drawer"})}),s(t.DrawerContent,{children:[s(t.DrawerHeader,{children:[n(t.DrawerTitle,{children:"Move goal"}),n(t.DrawerDescription,{children:"Drag down or press Escape to dismiss this drawer."})]}),n(t.DrawerBody,{children:n("p",{className:"nx:typography-body-default nx:text-foreground",children:"Drawer content goes here. On touch devices it can be dragged to dismiss."})}),s(t.DrawerFooter,{children:[n(p.Button,{children:"Submit"}),n(t.DrawerClose,{asChild:!0,children:n(p.Button,{variant:"outline",children:"Cancel"})})]})]})]})}var E=i(m()),B=i(h());(0,B.createRoot)(document.getElementById("root")).render((0,E.createElement)(u));})();</script>
15
+ </body>
16
+ </html>
package/project/components/DropdownMenu/README.md ADDED
@@ -0,0 +1,250 @@
1
+ # DropdownMenu
2
+
3
+ DropdownMenu opens a list of actions from a button. Use it for a short list of actions or options. For picking a form value, use Select.
4
+
5
+ ## On the canvas
6
+
7
+ ```html
8
+ <x-import component-from-global-scope="Nxds.DropdownMenu">
9
+ <x-import component-from-global-scope="Nxds.DropdownMenuTrigger" as-child>
10
+ <x-import component-from-global-scope="Nxds.Button" variant="outline">My Account</x-import>
11
+ </x-import>
12
+ <x-import component-from-global-scope="Nxds.DropdownMenuContent" class-name="nx:w-56">
13
+ <x-import component-from-global-scope="Nxds.DropdownMenuLabel">My Account</x-import>
14
+ <x-import component-from-global-scope="Nxds.DropdownMenuSeparator"></x-import>
15
+ <x-import component-from-global-scope="Nxds.DropdownMenuGroup">
16
+ <x-import component-from-global-scope="Nxds.DropdownMenuItem">
17
+ Profile
18
+ <x-import component-from-global-scope="Nxds.DropdownMenuShortcut">⇧⌘P</x-import>
19
+ </x-import>
20
+ <x-import component-from-global-scope="Nxds.DropdownMenuItem">
21
+ Billing
22
+ <x-import component-from-global-scope="Nxds.DropdownMenuShortcut">⌘B</x-import>
23
+ </x-import>
24
+ <x-import component-from-global-scope="Nxds.DropdownMenuItem">
25
+ Settings
26
+ <x-import component-from-global-scope="Nxds.DropdownMenuShortcut">⌘S</x-import>
27
+ </x-import>
28
+ </x-import>
29
+ <x-import component-from-global-scope="Nxds.DropdownMenuSeparator"></x-import>
30
+ <x-import component-from-global-scope="Nxds.DropdownMenuItem">
31
+ Logout
32
+ <x-import component-from-global-scope="Nxds.DropdownMenuShortcut">⇧⌘Q</x-import>
33
+ </x-import>
34
+ </x-import>
35
+ </x-import>
36
+ ```
37
+
38
+ 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.
39
+
40
+ ## Parts
41
+
42
+ - `Nxds.DropdownMenu` — Root component for the dropdown menu.
43
+ - `Nxds.DropdownMenuCheckboxItem` — A menu item that toggles on and off.
44
+ - `Nxds.DropdownMenuContent` — The menu panel.
45
+ - `Nxds.DropdownMenuGroup` — Groups related menu items.
46
+ - `Nxds.DropdownMenuItem` — A single menu action.
47
+ - `Nxds.DropdownMenuLabel` — A heading for a group of menu items.
48
+ - `Nxds.DropdownMenuPortal` — Renders the content into `document.body`.
49
+ - `Nxds.DropdownMenuRadioGroup` — Groups radio items so only one is checked.
50
+ - `Nxds.DropdownMenuRadioItem` — A menu item for picking one option from a DropdownMenuRadioGroup.
51
+ - `Nxds.DropdownMenuSeparator` — A divider between menu items.
52
+ - `Nxds.DropdownMenuShortcut` — A keyboard shortcut hint, right-aligned in a DropdownMenuItem.
53
+ - `Nxds.DropdownMenuSub` — Root of a submenu.
54
+ - `Nxds.DropdownMenuSubContent` — The panel that holds a submenu's items.
55
+ - `Nxds.DropdownMenuSubTrigger` — The item that opens a submenu.
56
+ - `Nxds.DropdownMenuTrigger` — The button that opens and closes the menu.
57
+
58
+ ## Props
59
+
60
+ ### DropdownMenu
61
+
62
+ | Prop | Type | Default | Control |
63
+ | --- | --- | --- | --- |
64
+ | `children` | `React.ReactNode` | | content |
65
+ | `dir` | `"ltr" \| "rtl"` | | dropdown |
66
+ | `open` | `boolean` | | toggle |
67
+ | `defaultOpen` | `boolean` | | toggle |
68
+ | `onOpenChange` | `(open: boolean) => void` | | none (function) |
69
+ | `modal` | `boolean` | | toggle |
70
+
71
+ ### DropdownMenuCheckboxItem
72
+
73
+ | Prop | Type | Default | Control |
74
+ | --- | --- | --- | --- |
75
+ | `children` | `React.ReactNode` | | content |
76
+ | `onSelect` | `(event: Event) => void` | | none (function) |
77
+ | `className` | `string` | | text |
78
+ | `id` | `string` | | text |
79
+ | `asChild` | `boolean` | | toggle |
80
+ | `disabled` | `boolean` | | toggle |
81
+ | `checked` | `"indeterminate" \| boolean` | | dropdown |
82
+ | `textValue` | `string` | | text |
83
+ | `onCheckedChange` | `(checked: boolean) => void` | | none (function) |
84
+
85
+ ### DropdownMenuContent
86
+
87
+ | Prop | Type | Default | Control |
88
+ | --- | --- | --- | --- |
89
+ | `children` | `React.ReactNode` | | content |
90
+ | `className` | `string` | | text |
91
+ | `id` | `string` | | text |
92
+ | `align` | `"end" \| "center" \| "start"` | | dropdown |
93
+ | `asChild` | `boolean` | | toggle |
94
+ | `forceMount` | `true` | | toggle |
95
+ | `onEscapeKeyDown` | `(event: KeyboardEvent) => void` | | none (function) |
96
+ | `onPointerDownOutside` | `(event: PointerDownOutsideEvent) => void` | | none (function) |
97
+ | `onFocusOutside` | `(event: FocusOutsideEvent) => void` | | none (function) |
98
+ | `onInteractOutside` | `(event: FocusOutsideEvent \| PointerDownOutsideEvent) => void` | | none (function) |
99
+ | `onCloseAutoFocus` | `(event: Event) => void` | | none (function) |
100
+ | `loop` | `boolean` | | toggle |
101
+ | `side` | `"top" \| "bottom" \| "left" \| "right"` | | dropdown |
102
+ | `sideOffset` | `number` | `4` | number |
103
+ | `alignOffset` | `number` | | number |
104
+ | `arrowPadding` | `number` | | number |
105
+ | `avoidCollisions` | `boolean` | | toggle |
106
+ | `collisionBoundary` | `Element \| Boundary[]` | | none (object) |
107
+ | `collisionPadding` | `number \| Partial<Record<"top" \| "bottom" \| "left" \| "right", number>>` | | none (object) |
108
+ | `sticky` | `"partial" \| "always"` | | dropdown |
109
+ | `hideWhenDetached` | `boolean` | | toggle |
110
+ | `updatePositionStrategy` | `"always" \| "optimized"` | | dropdown |
111
+
112
+ ### DropdownMenuGroup
113
+
114
+ | Prop | Type | Default | Control |
115
+ | --- | --- | --- | --- |
116
+ | `children` | `React.ReactNode` | | content |
117
+ | `className` | `string` | | text |
118
+ | `id` | `string` | | text |
119
+ | `asChild` | `boolean` | | toggle |
120
+
121
+ ### DropdownMenuItem
122
+
123
+ | Prop | Type | Default | Control |
124
+ | --- | --- | --- | --- |
125
+ | `inset` | `boolean` | | toggle |
126
+ | `children` | `React.ReactNode` | | content |
127
+ | `onSelect` | `(event: Event) => void` | | none (function) |
128
+ | `className` | `string` | | text |
129
+ | `id` | `string` | | text |
130
+ | `asChild` | `boolean` | | toggle |
131
+ | `disabled` | `boolean` | | toggle |
132
+ | `textValue` | `string` | | text |
133
+ | `variant` | `"default" \| "destructive"` | `"default"` | dropdown |
134
+
135
+ ### DropdownMenuLabel
136
+
137
+ | Prop | Type | Default | Control |
138
+ | --- | --- | --- | --- |
139
+ | `inset` | `boolean` | | toggle |
140
+ | `children` | `React.ReactNode` | | content |
141
+ | `className` | `string` | | text |
142
+ | `id` | `string` | | text |
143
+ | `asChild` | `boolean` | | toggle |
144
+
145
+ ### DropdownMenuPortal
146
+
147
+ | Prop | Type | Default | Control |
148
+ | --- | --- | --- | --- |
149
+ | `children` | `React.ReactNode` | | content |
150
+ | `container` | `Element \| DocumentFragment` | | none (object) |
151
+ | `forceMount` | `true` | | toggle |
152
+
153
+ ### DropdownMenuRadioGroup
154
+
155
+ | Prop | Type | Default | Control |
156
+ | --- | --- | --- | --- |
157
+ | `children` | `React.ReactNode` | | content |
158
+ | `className` | `string` | | text |
159
+ | `id` | `string` | | text |
160
+ | `asChild` | `boolean` | | toggle |
161
+ | `value` | `string` | | text |
162
+ | `onValueChange` | `(value: string) => void` | | none (function) |
163
+
164
+ ### DropdownMenuRadioItem
165
+
166
+ | Prop | Type | Default | Control |
167
+ | --- | --- | --- | --- |
168
+ | `children` | `React.ReactNode` | | content |
169
+ | `onSelect` | `(event: Event) => void` | | none (function) |
170
+ | `className` | `string` | | text |
171
+ | `id` | `string` | | text |
172
+ | `asChild` | `boolean` | | toggle |
173
+ | `disabled` | `boolean` | | toggle |
174
+ | `value` | `string` | | text |
175
+ | `textValue` | `string` | | text |
176
+
177
+ ### DropdownMenuSeparator
178
+
179
+ | Prop | Type | Default | Control |
180
+ | --- | --- | --- | --- |
181
+ | `children` | `React.ReactNode` | | content |
182
+ | `className` | `string` | | text |
183
+ | `id` | `string` | | text |
184
+ | `asChild` | `boolean` | | toggle |
185
+
186
+ ### DropdownMenuShortcut
187
+
188
+ | Prop | Type | Default | Control |
189
+ | --- | --- | --- | --- |
190
+ | `className` | `string` | | text |
191
+ | `id` | `string` | | text |
192
+ | `children` | `React.ReactNode` | | content |
193
+
194
+ ### DropdownMenuSub
195
+
196
+ | Prop | Type | Default | Control |
197
+ | --- | --- | --- | --- |
198
+ | `children` | `React.ReactNode` | | content |
199
+ | `open` | `boolean` | | toggle |
200
+ | `defaultOpen` | `boolean` | | toggle |
201
+ | `onOpenChange` | `(open: boolean) => void` | | none (function) |
202
+
203
+ ### DropdownMenuSubContent
204
+
205
+ | Prop | Type | Default | Control |
206
+ | --- | --- | --- | --- |
207
+ | `children` | `React.ReactNode` | | content |
208
+ | `className` | `string` | | text |
209
+ | `id` | `string` | | text |
210
+ | `asChild` | `boolean` | | toggle |
211
+ | `forceMount` | `true` | | toggle |
212
+ | `onEscapeKeyDown` | `(event: KeyboardEvent) => void` | | none (function) |
213
+ | `onPointerDownOutside` | `(event: PointerDownOutsideEvent) => void` | | none (function) |
214
+ | `onFocusOutside` | `(event: FocusOutsideEvent) => void` | | none (function) |
215
+ | `onInteractOutside` | `(event: FocusOutsideEvent \| PointerDownOutsideEvent) => void` | | none (function) |
216
+ | `loop` | `boolean` | | toggle |
217
+ | `sideOffset` | `number` | | number |
218
+ | `alignOffset` | `number` | | number |
219
+ | `arrowPadding` | `number` | | number |
220
+ | `avoidCollisions` | `boolean` | | toggle |
221
+ | `collisionBoundary` | `Element \| Boundary[]` | | none (object) |
222
+ | `collisionPadding` | `number \| Partial<Record<"top" \| "bottom" \| "left" \| "right", number>>` | | none (object) |
223
+ | `sticky` | `"partial" \| "always"` | | dropdown |
224
+ | `hideWhenDetached` | `boolean` | | toggle |
225
+ | `updatePositionStrategy` | `"always" \| "optimized"` | | dropdown |
226
+
227
+ ### DropdownMenuSubTrigger
228
+
229
+ | Prop | Type | Default | Control |
230
+ | --- | --- | --- | --- |
231
+ | `inset` | `boolean` | | toggle |
232
+ | `children` | `React.ReactNode` | | content |
233
+ | `className` | `string` | | text |
234
+ | `id` | `string` | | text |
235
+ | `asChild` | `boolean` | | toggle |
236
+ | `disabled` | `boolean` | | toggle |
237
+ | `textValue` | `string` | | text |
238
+
239
+ ### DropdownMenuTrigger
240
+
241
+ | Prop | Type | Default | Control |
242
+ | --- | --- | --- | --- |
243
+ | `children` | `React.ReactNode` | | content |
244
+ | `className` | `string` | | text |
245
+ | `id` | `string` | | text |
246
+ | `name` | `string` | | text |
247
+ | `type` | `"button" \| "submit" \| "reset"` | | dropdown |
248
+ | `asChild` | `boolean` | | toggle |
249
+ | `disabled` | `boolean` | | toggle |
250
+ | `value` | `string \| number \| readonly string[]` | | none (object) |
package/project/components/DropdownMenu/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>DropdownMenu</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 D=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var I=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,B=Object.prototype.hasOwnProperty;var c=(n,e)=>()=>{try{return e||n((e={exports:{}}).exports,e),e.exports}catch(t){throw e=0,t}};var K=(n,e,t,w)=>{if(e&&typeof e=="object"||typeof e=="function")for(let p of I(e))!B.call(n,p)&&p!==t&&D(n,p,{get:()=>e[p],enumerable:!(w=P(e,p))||w.enumerable});return n};var d=(n,e,t)=>(t=n!=null?E(R(n)):{},K(e||!n||!n.__esModule?D(t,"default",{value:n,enumerable:!0}):t,n));var m=c((L,s)=>{s.exports=window.Nxds});var a=c((b,l)=>{l.exports=window.React});var g=c((G,x)=>{x.exports={createRoot:window.ReactDOM.createRoot}});var y=d(m()),o=d(m());var i=d(a());function f(n,e){return e===void 0?n:{...n,key:e}}function r(n,e,t){return(0,i.createElement)(n,f(e,t))}function u(n,e,t){let{children:w,...p}=e;return(0,i.createElement)(n,f(p,t),...w)}function M(){return u(o.DropdownMenu,{children:[r(o.DropdownMenuTrigger,{asChild:!0,children:r(y.Button,{variant:"outline",children:"My Account"})}),u(o.DropdownMenuContent,{className:"nx:w-56",children:[r(o.DropdownMenuLabel,{children:"My Account"}),r(o.DropdownMenuSeparator,{}),u(o.DropdownMenuGroup,{children:[u(o.DropdownMenuItem,{children:["Profile",r(o.DropdownMenuShortcut,{children:"⇧⌘P"})]}),u(o.DropdownMenuItem,{children:["Billing",r(o.DropdownMenuShortcut,{children:"⌘B"})]}),u(o.DropdownMenuItem,{children:["Settings",r(o.DropdownMenuShortcut,{children:"⌘S"})]})]}),r(o.DropdownMenuSeparator,{}),u(o.DropdownMenuItem,{children:["Logout",r(o.DropdownMenuShortcut,{children:"⇧⌘Q"})]})]})]})}var h=d(a()),S=d(g());(0,S.createRoot)(document.getElementById("root")).render((0,h.createElement)(M));})();</script>
15
+ </body>
16
+ </html>
package/project/components/EmptyState/README.md ADDED
@@ -0,0 +1,84 @@
1
+ # EmptyState
2
+
3
+ EmptyState explains why a list, table or record view has no content yet. Give it an icon, a title, a short description and an optional action.
4
+
5
+ ## On the canvas
6
+
7
+ ```html
8
+ <x-import component-from-global-scope="Nxds.EmptyState">
9
+ <x-import component-from-global-scope="Nxds.EmptyStateHeader">
10
+ <x-import component-from-global-scope="Nxds.EmptyStateMedia" variant="icon">
11
+ <x-import component-from-global-scope="Nxds.Icons.IconUsers" aria-hidden></x-import>
12
+ </x-import>
13
+ <x-import component-from-global-scope="Nxds.EmptyStateTitle">No contacts yet</x-import>
14
+ <x-import component-from-global-scope="Nxds.EmptyStateDescription">Add your first contact to start building your CRM.</x-import>
15
+ </x-import>
16
+ <x-import component-from-global-scope="Nxds.EmptyStateContent">
17
+ <x-import component-from-global-scope="Nxds.Button">Add contact</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.EmptyState` — A centered message for a list, table or record view with no content yet.
27
+ - `Nxds.EmptyStateContent` — The action area under the header, usually one or two buttons.
28
+ - `Nxds.EmptyStateDescription` — Supporting text under the title.
29
+ - `Nxds.EmptyStateHeader` — Groups the media, title and description in a narrow centered column.
30
+ - `Nxds.EmptyStateMedia` — Holds the icon or illustration.
31
+ - `Nxds.EmptyStateTitle` — The headline that says what is missing.
32
+
33
+ ## Props
34
+
35
+ ### EmptyState
36
+
37
+ | Prop | Type | Default | Control |
38
+ | --- | --- | --- | --- |
39
+ | `bordered` | `boolean` | `false` | toggle |
40
+ | `className` | `string` | | text |
41
+ | `id` | `string` | | text |
42
+ | `children` | `React.ReactNode` | | content |
43
+
44
+ ### EmptyStateContent
45
+
46
+ | Prop | Type | Default | Control |
47
+ | --- | --- | --- | --- |
48
+ | `className` | `string` | | text |
49
+ | `id` | `string` | | text |
50
+ | `children` | `React.ReactNode` | | content |
51
+
52
+ ### EmptyStateDescription
53
+
54
+ | Prop | Type | Default | Control |
55
+ | --- | --- | --- | --- |
56
+ | `className` | `string` | | text |
57
+ | `id` | `string` | | text |
58
+ | `children` | `React.ReactNode` | | content |
59
+
60
+ ### EmptyStateHeader
61
+
62
+ | Prop | Type | Default | Control |
63
+ | --- | --- | --- | --- |
64
+ | `className` | `string` | | text |
65
+ | `id` | `string` | | text |
66
+ | `children` | `React.ReactNode` | | content |
67
+
68
+ ### EmptyStateMedia
69
+
70
+ | Prop | Type | Default | Control |
71
+ | --- | --- | --- | --- |
72
+ | `className` | `string` | | text |
73
+ | `id` | `string` | | text |
74
+ | `children` | `React.ReactNode` | | content |
75
+ | `variant` | `"default" \| "icon"` | `"default"` | dropdown |
76
+
77
+ ### EmptyStateTitle
78
+
79
+ | Prop | Type | Default | Control |
80
+ | --- | --- | --- | --- |
81
+ | `asChild` | `boolean` | `false` | toggle |
82
+ | `className` | `string` | | text |
83
+ | `id` | `string` | | text |
84
+ | `children` | `React.ReactNode` | | content |
package/project/components/EmptyState/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>EmptyState</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 u=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var C=Object.getPrototypeOf,I=Object.prototype.hasOwnProperty;var m=(e,t)=>()=>{try{return t||e((t={exports:{}}).exports,t),t.exports}catch(r){throw t=0,r}};var N=(e,t,r,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of B(t))!I.call(e,n)&&n!==r&&u(e,n,{get:()=>t[n],enumerable:!(i=M(t,n))||i.enumerable});return e};var p=(e,t,r)=>(r=e!=null?h(C(e)):{},N(t||!e||!e.__esModule?u(r,"default",{value:e,enumerable:!0}):r,e));var l=m((A,f)=>{f.exports=window.Nxds.Icons});var c=m((H,S)=>{S.exports=window.Nxds});var d=m((b,x)=>{x.exports=window.React});var P=m((O,K)=>{K.exports={createRoot:window.ReactDOM.createRoot}});var R=p(l()),D=p(c()),o=p(c());var y=p(d());function w(e,t){return t===void 0?e:{...e,key:t}}function a(e,t,r){return(0,y.createElement)(e,w(t,r))}function s(e,t,r){let{children:i,...n}=t;return(0,y.createElement)(e,w(n,r),...i)}function E(){return s(o.EmptyState,{children:[s(o.EmptyStateHeader,{children:[a(o.EmptyStateMedia,{variant:"icon",children:a(R.IconUsers,{"aria-hidden":!0})}),a(o.EmptyStateTitle,{children:"No contacts yet"}),a(o.EmptyStateDescription,{children:"Add your first contact to start building your CRM."})]}),a(o.EmptyStateContent,{children:a(D.Button,{children:"Add contact"})})]})}var T=p(d()),g=p(P());(0,g.createRoot)(document.getElementById("root")).render((0,T.createElement)(E));})();</script>
15
+ </body>
16
+ </html>
package/project/components/Field/README.md ADDED
@@ -0,0 +1,129 @@
1
+ # Field
2
+
3
+ Field lays out a label, control, description and error as one form field. Use it for any labeled form control. For a group of related fields, wrap them in FieldSet or FieldGroup.
4
+
5
+ ## On the canvas
6
+
7
+ ```html
8
+ <div class="nx:w-80">
9
+ <x-import component-from-global-scope="Nxds.Field">
10
+ <x-import component-from-global-scope="Nxds.FieldLabel" html-for="field-email">Email</x-import>
11
+ <x-import component-from-global-scope="Nxds.Input" id="field-email" type="email" placeholder="you@example.com"></x-import>
12
+ <x-import component-from-global-scope="Nxds.FieldDescription">We never share it.</x-import>
13
+ </x-import>
14
+ </div>
15
+ ```
16
+
17
+ 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.
18
+
19
+ ## Parts
20
+
21
+ - `Nxds.Field` — Lays out a label, control, description and error as one field.
22
+ - `Nxds.FieldContent` — Wraps a label and description that sit beside the control, as in horizontal
23
+ and checkbox-card layouts.
24
+ - `Nxds.FieldDescription` — Helper text under a field's control.
25
+ - `Nxds.FieldError` — The error message for a field.
26
+ - `Nxds.FieldGroup` — A vertical stack of `Field`s.
27
+ - `Nxds.FieldLabel` — A field's label, built on `Label`.
28
+ - `Nxds.FieldLegend` — The caption for a `FieldSet`.
29
+ - `Nxds.FieldRequiredIndicator` — Marks a field as required with `*`, or as optional with `fallback` text.
30
+ - `Nxds.FieldSeparator` — A divider between fields, with optional centered content such as "OR".
31
+ - `Nxds.FieldSet` — A `<fieldset>` that groups related fields.
32
+ - `Nxds.FieldTitle` — A title for a field group or card that is not tied to one control.
33
+
34
+ ## Props
35
+
36
+ ### Field
37
+
38
+ | Prop | Type | Default | Control |
39
+ | --- | --- | --- | --- |
40
+ | `className` | `string` | | text |
41
+ | `id` | `string` | | text |
42
+ | `children` | `React.ReactNode` | | content |
43
+ | `orientation` | `"horizontal" \| "vertical" \| "responsive"` | `"vertical"` | dropdown |
44
+
45
+ ### FieldContent
46
+
47
+ | Prop | Type | Default | Control |
48
+ | --- | --- | --- | --- |
49
+ | `className` | `string` | | text |
50
+ | `id` | `string` | | text |
51
+ | `children` | `React.ReactNode` | | content |
52
+
53
+ ### FieldDescription
54
+
55
+ | Prop | Type | Default | Control |
56
+ | --- | --- | --- | --- |
57
+ | `className` | `string` | | text |
58
+ | `id` | `string` | | text |
59
+ | `children` | `React.ReactNode` | | content |
60
+
61
+ ### FieldError
62
+
63
+ | Prop | Type | Default | Control |
64
+ | --- | --- | --- | --- |
65
+ | `errors` | `FieldErrors` | | none (object) |
66
+ | `className` | `string` | | text |
67
+ | `id` | `string` | | text |
68
+ | `children` | `React.ReactNode` | | content |
69
+
70
+ ### FieldGroup
71
+
72
+ | Prop | Type | Default | Control |
73
+ | --- | --- | --- | --- |
74
+ | `className` | `string` | | text |
75
+ | `id` | `string` | | text |
76
+ | `children` | `React.ReactNode` | | content |
77
+
78
+ ### FieldLabel
79
+
80
+ | Prop | Type | Default | Control |
81
+ | --- | --- | --- | --- |
82
+ | `children` | `React.ReactNode` | | content |
83
+ | `className` | `string` | | text |
84
+ | `id` | `string` | | text |
85
+ | `asChild` | `boolean` | | toggle |
86
+
87
+ ### FieldLegend
88
+
89
+ | Prop | Type | Default | Control |
90
+ | --- | --- | --- | --- |
91
+ | `variant` | `"label" \| "legend"` | `"legend"` | dropdown |
92
+ | `className` | `string` | | text |
93
+ | `id` | `string` | | text |
94
+ | `children` | `React.ReactNode` | | content |
95
+
96
+ ### FieldRequiredIndicator
97
+
98
+ | Prop | Type | Default | Control |
99
+ | --- | --- | --- | --- |
100
+ | `children` | `React.ReactNode` | | content |
101
+ | `className` | `string` | | text |
102
+ | `id` | `string` | | text |
103
+ | `fallback` | `React.ReactNode` | | none (element) |
104
+
105
+ ### FieldSeparator
106
+
107
+ | Prop | Type | Default | Control |
108
+ | --- | --- | --- | --- |
109
+ | `className` | `string` | | text |
110
+ | `id` | `string` | | text |
111
+ | `children` | `React.ReactNode` | | content |
112
+
113
+ ### FieldSet
114
+
115
+ | Prop | Type | Default | Control |
116
+ | --- | --- | --- | --- |
117
+ | `disabled` | `boolean` | | toggle |
118
+ | `name` | `string` | | text |
119
+ | `className` | `string` | | text |
120
+ | `id` | `string` | | text |
121
+ | `children` | `React.ReactNode` | | content |
122
+
123
+ ### FieldTitle
124
+
125
+ | Prop | Type | Default | Control |
126
+ | --- | --- | --- | --- |
127
+ | `className` | `string` | | text |
128
+ | `id` | `string` | | text |
129
+ | `children` | `React.ReactNode` | | content |
package/project/components/Field/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>Field</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 f=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,T=Object.prototype.hasOwnProperty;var p=(t,e)=>()=>{try{return e||t((e={exports:{}}).exports,e),e.exports}catch(r){throw e=0,r}};var b=(t,e,r,m)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of g(e))!T.call(t,o)&&o!==r&&f(t,o,{get:()=>e[o],enumerable:!(m=P(e,o))||m.enumerable});return t};var i=(t,e,r)=>(r=t!=null?K(v(t)):{},b(e||!t||!t.__esModule?f(r,"default",{value:t,enumerable:!0}):r,t));var a=p((I,u)=>{u.exports=window.Nxds});var c=p((L,y)=>{y.exports=window.React});var h=p((M,F)=>{F.exports={createRoot:window.ReactDOM.createRoot}});var n=i(a()),E=i(a());var d=i(c());function x(t,e){return e===void 0?t:{...t,key:e}}function l(t,e,r){return(0,d.createElement)(t,x(e,r))}function w(t,e,r){let{children:m,...o}=e;return(0,d.createElement)(t,x(o,r),...m)}function s(){return l("div",{className:"nx:w-80",children:w(n.Field,{children:[l(n.FieldLabel,{htmlFor:"field-email",children:"Email"}),l(E.Input,{id:"field-email",type:"email",placeholder:"you@example.com"}),l(n.FieldDescription,{children:"We never share it."})]})})}var R=i(c()),D=i(h());(0,D.createRoot)(document.getElementById("root")).render((0,R.createElement)(s));})();</script>
15
+ </body>
16
+ </html>
package/project/components/FilterBuilder/README.md ADDED
@@ -0,0 +1,34 @@
1
+ # FilterBuilder
2
+
3
+ FilterBuilder edits filter conditions inside nested All and Any groups. Pass the tree as `value` and update it in `onValueChange`. For a row of applied filters, use FilterCondition or FilterChip.
4
+
5
+ - Drafts can be incomplete. Call `getFilterErrors` to validate text, number, date and choice fields.
6
+ - An empty root means no filters. An empty nested group is invalid.
7
+ - The root is depth zero, and `maxDepth` defaults to 3.
8
+ - Dates are `YYYY-MM-DD` strings. Numbers stay as draft strings.
9
+ - Every ID must be unique. Field and option IDs must not be empty.
10
+ - Set `operators` on a field to limit its operators.
11
+ - Your app owns Apply and Cancel, running the query, URLs, permissions and fetching.
12
+ - See the Filtering pattern for grouped conditions and where the app takes over.
13
+
14
+ ## On the canvas
15
+
16
+ ```html
17
+ <x-import component-from-global-scope="Nxds.FilterBuilder"></x-import>
18
+ ```
19
+
20
+ 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.
21
+
22
+ ## Props
23
+
24
+ ### FilterBuilder
25
+
26
+ | Prop | Type | Default | Control |
27
+ | --- | --- | --- | --- |
28
+ | `fields` | `readonly FilterField[]` | | none (object) |
29
+ | `value` | `FilterGroup` | | none (object) |
30
+ | `onValueChange` | `(value: FilterGroup) => void` | | none (function) |
31
+ | `disabled` | `boolean` | `false` | toggle |
32
+ | `maxDepth` | `number` | `3` | number |
33
+ | `className` | `string` | | text |
34
+ | `id` | `string` | | text |
package/project/components/FilterBuilder/preview.html ADDED
@@ -0,0 +1,16 @@
1
+ <!-- @dsCard group="Filtering" height=240 -->
2
+ <!doctype html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="utf-8">
6
+ <title>FilterBuilder</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 g=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var C=Object.getPrototypeOf,B=Object.prototype.hasOwnProperty;var m=(e,t)=>()=>{try{return t||e((t={exports:{}}).exports,t),t.exports}catch(i){throw t=0,i}};var P=(e,t,i,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of S(t))!B.call(e,n)&&n!==i&&g(e,n,{get:()=>t[n],enumerable:!(o=j(t,n))||o.enumerable});return e};var p=(e,t,i)=>(i=e!=null?G(C(e)):{},P(t||!e||!e.__esModule?g(i,"default",{value:e,enumerable:!0}):i,e));var d=m((z,x)=>{x.exports=window.React});var f=m((H,O)=>{O.exports=window.Nxds});var V=m((ee,T)=>{T.exports={createRoot:window.ReactDOM.createRoot}});var N=p(d()),E=p(f()),w=p(f());var I={text:["contains","is","isNot","startsWith","isEmpty","isNotEmpty"],number:["is","isNot","greaterThan","lessThan","between","isEmpty","isNotEmpty"],date:["is","isNot","before","after","between","isEmpty","isNotEmpty"],choice:["is","isNot","isAnyOf","isNoneOf","isEmpty","isNotEmpty"]};function K(e){let t=I[e.type];return e.operators?t.filter(i=>e.operators?.includes(i)):t}function L(e){return e==="isEmpty"||e==="isNotEmpty"}function W(e){return e==="isAnyOf"||e==="isNoneOf"}var $=/^[+-]?(\d+\.?\d*|\.\d+)(e[+-]?\d+)?$/i;function J(e){if(!/^\d{4}-\d{2}-\d{2}$/.test(e)||e.startsWith("0000"))return!1;let t=new Date(`${e}T00:00:00Z`);return!Number.isNaN(t.getTime())&&t.toISOString().slice(0,10)===e}function M(e,t){let i=t.find(r=>r.id===e.field);if(!i)return"unknownField";if(!K(i).includes(e.operator))return"unknownOperator";if(L(e.operator))return e.value===""?void 0:"unexpectedValue";let o=W(e.operator),n=e.operator==="between";if((o||n)!==Array.isArray(e.value))return"valueShape";let a=Array.isArray(e.value)?e.value:[e.value];if(n&&a.length!==2)return"incompleteRange";if(!a.length||a.some(r=>!r.trim()))return"missingValue";if(i.type==="number"&&a.some(r=>!$.test(r.trim())||!Number.isFinite(Number(r))))return"invalidNumber";if(i.type==="date"&&a.some(r=>!J(r)))return"invalidDate";if(i.type==="choice"&&a.some(r=>!i.options.some(s=>s.value===r)))return"unknownOption";if(n){let[r="",s=""]=a;if(i.type==="number"?Number(r)>Number(s):r>s)return"reversedRange"}}function b(e,t,i=3){let o=[],n=new Set;function a(r,s){if((!r.id||n.has(r.id))&&o.push({id:r.id,code:"duplicateId"}),n.add(r.id),r.kind==="rule"){let l=M(r,t);l&&o.push({id:r.id,code:l});return}s>i&&o.push({id:r.id,code:"tooDeep"}),s>0&&!r.children.length&&o.push({id:r.id,code:"emptyGroup"});for(let l of r.children)a(l,l.kind==="group"?s+1:s)}return a(e,0),o}var c=p(d());function v(e,t){return t===void 0?e:{...e,key:t}}function u(e,t,i){return(0,c.createElement)(e,v(t,i))}function h(e,t,i){let{children:o,...n}=t;return(0,c.createElement)(e,v(n,i),...o)}var R=[{id:"status",label:"Status",type:"choice",options:[{value:"active",label:"Active"},{value:"invited",label:"Invited"},{value:"suspended",label:"Suspended"}]},{id:"team",label:"Team",type:"choice",options:[{value:"design",label:"Design"},{value:"engineering",label:"Engineering"},{value:"operations",label:"Operations"}]},{id:"name",label:"Name",type:"text"},{id:"projects",label:"Projects",type:"number"},{id:"joined",label:"Joined",type:"date"}],k={kind:"group",id:"root",conjunction:"all",children:[{kind:"rule",id:"status-rule",field:"status",operator:"is",value:"active"},{kind:"group",id:"team-group",conjunction:"any",children:[{kind:"rule",id:"team-rule",field:"team",operator:"is",value:"design"},{kind:"rule",id:"projects-rule",field:"projects",operator:"greaterThan",value:"3"}]}]};function Z({initial:e=k,disabled:t=!1,fields:i=R,maxDepth:o=3,onValueChange:n}){let[a,r]=N.useState(e),s=b(a,i,o);function l(F){r(F),n?.(F)}return h("div",{className:"nx:grid nx:gap-4",children:[u(w.FilterBuilder,{"data-example":"controlled",fields:i,value:a,onValueChange:l,disabled:t,maxDepth:o}),u("p",{role:"status",className:"nx:typography-body-small nx:text-muted-foreground",children:s.length?`${s.length} incomplete conditions or groups`:"Ready to apply"}),u(E.Button,{variant:"outline",onClick:()=>r(e),children:"Reset example"})]})}function y(){return u("div",{className:"nx:mx-auto nx:w-full nx:max-w-5xl nx:p-4",children:u(Z,{initial:k,fields:R,disabled:!1,maxDepth:3})})}var D=p(d()),A=p(V());(0,A.createRoot)(document.getElementById("root")).render((0,D.createElement)(y));})();</script>
15
+ </body>
16
+ </html>
package/project/components/FilterChip/README.md ADDED
@@ -0,0 +1,31 @@
1
+ # FilterChip
2
+
3
+ FilterChip is a button that removes an applied filter. Use it in a row of applied filters chosen in a menu or panel. For passive metadata use Badge, and for a condition the user edits use FilterCondition.
4
+
5
+ - Clicking the label or × removes the filter. It never opens an editor or toggles a choice.
6
+ - Give it a full `aria-label`, such as "Remove status filter: Paid".
7
+ - Your app owns the filter values. After removal, move focus to the next chip, the previous chip or a stable filter control.
8
+ - Long labels truncate on screen but keep their full accessible name.
9
+ - It has one compact size that follows the density setting.
10
+
11
+ ## On the canvas
12
+
13
+ ```html
14
+ <x-import component-from-global-scope="Nxds.FilterChip" aria-label="Remove status filter: Active">Status: Active</x-import>
15
+ ```
16
+
17
+ 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.
18
+
19
+ ## Props
20
+
21
+ ### FilterChip
22
+
23
+ | Prop | Type | Default | Control |
24
+ | --- | --- | --- | --- |
25
+ | `children` | `string` | | content |
26
+ | `aria-label` | `string` | | text |
27
+ | `className` | `string` | | text |
28
+ | `id` | `string` | | text |
29
+ | `name` | `string` | | text |
30
+ | `disabled` | `boolean` | | toggle |
31
+ | `value` | `string \| number \| readonly string[]` | | none (object) |
package/project/components/FilterChip/preview.html ADDED
@@ -0,0 +1,16 @@
1
+ <!-- @dsCard group="Filtering" height=120 -->
2
+ <!doctype html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="utf-8">
6
+ <title>FilterChip</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 c=Object.defineProperty;var K=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var F=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var i=(t,e)=>()=>{try{return e||t((e={exports:{}}).exports,e),e.exports}catch(r){throw e=0,r}};var v=(t,e,r,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of P(e))!g.call(t,o)&&o!==r&&c(t,o,{get:()=>e[o],enumerable:!(a=K(e,o))||a.enumerable});return t};var n=(t,e,r)=>(r=t!=null?h(F(t)):{},v(e||!t||!t.__esModule?c(r,"default",{value:t,enumerable:!0}):r,t));var u=i((T,l)=>{l.exports=window.Nxds});var p=i((j,d)=>{d.exports=window.React});var w=i((k,x)=>{x.exports={createRoot:window.ReactDOM.createRoot}});var y=n(u());var m=n(p());function C(t,e){return e===void 0?t:{...t,key:e}}function f(t,e,r){return(0,m.createElement)(t,C(e,r))}function s(){return f(y.FilterChip,{"aria-label":"Remove status filter: Active",children:"Status: Active"})}var E=n(p()),R=n(w());(0,R.createRoot)(document.getElementById("root")).render((0,E.createElement)(s));})();</script>
15
+ </body>
16
+ </html>