@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/Collapsible/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>Collapsible</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 T=Object.create;var m=Object.defineProperty;var K=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,B=Object.prototype.hasOwnProperty;var i=(r,e)=>()=>{try{return e||r((e={exports:{}}).exports,e),e.exports}catch(t){throw e=0,t}};var D=(r,e,t,x)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of P(e))!B.call(r,o)&&o!==t&&m(r,o,{get:()=>e[o],enumerable:!(x=K(e,o))||x.enumerable});return r};var l=(r,e,t)=>(t=r!=null?T(j(r)):{},D(e||!r||!r.__esModule?m(t,"default",{value:r,enumerable:!0}):t,r));var y=i((S,c)=>{c.exports=window.Nxds.Icons});var p=i((k,b)=>{b.exports=window.Nxds});var f=i((z,g)=>{g.exports=window.React});var h=i((V,N)=>{N.exports={createRoot:window.ReactDOM.createRoot}});var w=l(y()),C=l(p()),a=l(p());var s=l(f());function v(r,e){return e===void 0?r:{...r,key:e}}function n(r,e,t){return(0,s.createElement)(r,v(e,t))}function d(r,e,t){let{children:x,...o}=e;return(0,s.createElement)(r,v(o,t),...x)}function u(){return d(a.Collapsible,{className:"nx:flex nx:w-72 nx:flex-col",children:[d("div",{className:"nx:flex nx:flex-col nx:gap-2",children:[d("div",{className:"nx:flex nx:items-center nx:justify-between nx:gap-4",children:[n("span",{className:"nx:typography-label-default nx:text-foreground",children:"@nxds starred 3 repositories"}),n(a.CollapsibleTrigger,{asChild:!0,children:n(C.Button,{variant:"ghost",size:"sm","aria-label":"Toggle repositories",children:n(w.IconSelector,{})})})]}),n("div",{className:"nx:rounded-md nx:border-default nx:border-border-default nx:px-4 nx:py-2 nx:typography-label-default nx:text-foreground",children:"@radix-ui/react-collapsible"})]}),n(a.CollapsibleContent,{children:d("div",{className:"nx:mt-2 nx:flex nx:flex-col nx:gap-2",children:[n("div",{className:"nx:rounded-md nx:border-default nx:border-border-default nx:px-4 nx:py-2 nx:typography-label-default nx:text-foreground",children:"@radix-ui/react-toggle"}),n("div",{className:"nx:rounded-md nx:border-default nx:border-border-default nx:px-4 nx:py-2 nx:typography-label-default nx:text-foreground",children:"@radix-ui/react-slider"})]})})]})}var E=l(f()),R=l(h());(0,R.createRoot)(document.getElementById("root")).render((0,E.createElement)(u));})();</script>
15
+ </body>
16
+ </html>
package/project/components/Combobox/README.md ADDED
@@ -0,0 +1,158 @@
1
+ # Combobox
2
+
3
+ Combobox lets the user search a list and pick one option. Use it for lists too long to scan. For a short list without search, use Select.
4
+
5
+ ## On the canvas
6
+
7
+ ```html
8
+ <x-import component-from-global-scope="Nxds.Combobox">Combobox</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.Combobox` — A searchable single-select field built from a Popover and a Command list.
16
+ - `Nxds.ComboboxContent` — The floating panel that holds the search field and options.
17
+ - `Nxds.ComboboxEmpty` — Shown when the search matches no options.
18
+ - `Nxds.ComboboxGroup` — Groups related options under an optional `heading`.
19
+ - `Nxds.ComboboxInput` — The search field.
20
+ - `Nxds.ComboboxItem` — A selectable option.
21
+ - `Nxds.ComboboxList` — The scrollable list that holds options, groups and the empty state.
22
+ - `Nxds.ComboboxSeparator` — A decorative divider between groups or options.
23
+ - `Nxds.ComboboxTrigger` — The button that opens the popover and shows the current selection.
24
+
25
+ ## Props
26
+
27
+ ### Combobox
28
+
29
+ | Prop | Type | Default | Control |
30
+ | --- | --- | --- | --- |
31
+ | `children` | `React.ReactNode` | | content |
32
+ | `open` | `boolean` | | toggle |
33
+ | `defaultOpen` | `boolean` | | toggle |
34
+ | `onOpenChange` | `(open: boolean) => void` | | none (function) |
35
+ | `modal` | `boolean` | | toggle |
36
+
37
+ ### ComboboxContent
38
+
39
+ | Prop | Type | Default | Control |
40
+ | --- | --- | --- | --- |
41
+ | `label` | `string` | `"Options"` | text |
42
+ | `forceMount` | `true` | | toggle |
43
+ | `children` | `React.ReactNode` | | content |
44
+ | `className` | `string` | | text |
45
+ | `id` | `string` | | text |
46
+ | `align` | `"end" \| "center" \| "start"` | `"start"` | dropdown |
47
+ | `asChild` | `boolean` | | toggle |
48
+ | `onEscapeKeyDown` | `(event: KeyboardEvent) => void` | | none (function) |
49
+ | `onPointerDownOutside` | `(event: PointerDownOutsideEvent) => void` | | none (function) |
50
+ | `onFocusOutside` | `(event: FocusOutsideEvent) => void` | | none (function) |
51
+ | `onInteractOutside` | `(event: FocusOutsideEvent \| PointerDownOutsideEvent) => void` | | none (function) |
52
+ | `onOpenAutoFocus` | `(event: Event) => void` | | none (function) |
53
+ | `onCloseAutoFocus` | `(event: Event) => void` | | none (function) |
54
+ | `side` | `"top" \| "bottom" \| "left" \| "right"` | | dropdown |
55
+ | `sideOffset` | `number` | `4` | number |
56
+ | `alignOffset` | `number` | | number |
57
+ | `arrowPadding` | `number` | | number |
58
+ | `avoidCollisions` | `boolean` | | toggle |
59
+ | `collisionBoundary` | `Element \| Boundary[]` | | none (object) |
60
+ | `collisionPadding` | `number \| Partial<Record<"top" \| "bottom" \| "left" \| "right", number>>` | | none (object) |
61
+ | `sticky` | `"partial" \| "always"` | | dropdown |
62
+ | `hideWhenDetached` | `boolean` | | toggle |
63
+ | `updatePositionStrategy` | `"always" \| "optimized"` | | dropdown |
64
+
65
+ ### ComboboxEmpty
66
+
67
+ | Prop | Type | Default | Control |
68
+ | --- | --- | --- | --- |
69
+ | `children` | `React.ReactNode` | | content |
70
+ | `className` | `string` | | text |
71
+ | `id` | `string` | | text |
72
+ | `asChild` | `boolean` | | toggle |
73
+
74
+ ### ComboboxGroup
75
+
76
+ | Prop | Type | Default | Control |
77
+ | --- | --- | --- | --- |
78
+ | `children` | `React.ReactNode` | | content |
79
+ | `className` | `string` | | text |
80
+ | `id` | `string` | | text |
81
+ | `asChild` | `boolean` | | toggle |
82
+ | `heading` | `React.ReactNode` | | none (element) |
83
+ | `value` | `string` | | text |
84
+ | `forceMount` | `boolean` | | toggle |
85
+
86
+ ### ComboboxInput
87
+
88
+ | Prop | Type | Default | Control |
89
+ | --- | --- | --- | --- |
90
+ | `children` | `React.ReactNode` | | content |
91
+ | `className` | `string` | | text |
92
+ | `id` | `string` | | text |
93
+ | `max` | `string \| number` | | none (object) |
94
+ | `min` | `string \| number` | | none (object) |
95
+ | `name` | `string` | | text |
96
+ | `step` | `string \| number` | | none (object) |
97
+ | `asChild` | `boolean` | | toggle |
98
+ | `disabled` | `boolean` | | toggle |
99
+ | `checked` | `boolean` | | toggle |
100
+ | `maxLength` | `number` | | number |
101
+ | `placeholder` | `string` | | text |
102
+ | `readOnly` | `boolean` | | toggle |
103
+ | `required` | `boolean` | | toggle |
104
+ | `value` | `string` | | text |
105
+ | `onValueChange` | `(search: string) => void` | | none (function) |
106
+
107
+ ### ComboboxItem
108
+
109
+ | Prop | Type | Default | Control |
110
+ | --- | --- | --- | --- |
111
+ | `selected` | `boolean` | `false` | toggle |
112
+ | `children` | `React.ReactNode` | | content |
113
+ | `className` | `string` | | text |
114
+ | `id` | `string` | | text |
115
+ | `asChild` | `boolean` | | toggle |
116
+ | `disabled` | `boolean` | | toggle |
117
+ | `onSelect` | `(value: string) => void` | | none (function) |
118
+ | `value` | `string` | | text |
119
+ | `keywords` | `string[]` | | none (object) |
120
+ | `forceMount` | `boolean` | | toggle |
121
+
122
+ ### ComboboxList
123
+
124
+ | Prop | Type | Default | Control |
125
+ | --- | --- | --- | --- |
126
+ | `children` | `React.ReactNode` | | content |
127
+ | `className` | `string` | | text |
128
+ | `id` | `string` | | text |
129
+ | `asChild` | `boolean` | | toggle |
130
+ | `label` | `string` | | text |
131
+
132
+ ### ComboboxSeparator
133
+
134
+ | Prop | Type | Default | Control |
135
+ | --- | --- | --- | --- |
136
+ | `children` | `React.ReactNode` | | content |
137
+ | `className` | `string` | | text |
138
+ | `id` | `string` | | text |
139
+ | `asChild` | `boolean` | | toggle |
140
+ | `alwaysRender` | `boolean` | | toggle |
141
+
142
+ ### ComboboxTrigger
143
+
144
+ | Prop | Type | Default | Control |
145
+ | --- | --- | --- | --- |
146
+ | `asChild` | `boolean` | | toggle |
147
+ | `loading` | `boolean` | | toggle |
148
+ | `startIcon` | `React.ReactNode` | | none (element) |
149
+ | `endIcon` | `React.ReactNode` | | none (element) |
150
+ | `disabled` | `boolean` | | toggle |
151
+ | `name` | `string` | | text |
152
+ | `type` | `"button" \| "submit" \| "reset"` | | dropdown |
153
+ | `value` | `string \| number \| readonly string[]` | | none (object) |
154
+ | `className` | `string` | | text |
155
+ | `id` | `string` | | text |
156
+ | `children` | `React.ReactNode` | | content |
157
+ | `variant` | `"link" \| "default" \| "destructive" \| "error" \| "outline" \| "dashed" \| "secondary" \| "ghost"` | `"outline"` | dropdown |
158
+ | `size` | `"default" \| "sm" \| "lg" \| "icon-sm" \| "icon" \| "icon-lg"` | `"default"` | dropdown |
package/project/components/Combobox/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>Combobox</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 N=Object.create;var d=Object.defineProperty;var I=Object.getOwnPropertyDescriptor;var K=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty;var p=(o,e)=>()=>{try{return e||o((e={exports:{}}).exports,e),e.exports}catch(t){throw e=0,t}};var T=(o,e,t,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let l of K(e))!P.call(o,l)&&l!==t&&d(o,l,{get:()=>e[l],enumerable:!(s=I(e,l))||s.enumerable});return o};var b=(o,e,t)=>(t=o!=null?N(k(o)):{},T(e||!o||!o.__esModule?d(t,"default",{value:o,enumerable:!0}):t,o));var x=p((D,f)=>{f.exports=window.React});var y=p((L,C)=>{C.exports=window.Nxds});var E=p((V,w)=>{w.exports={createRoot:window.ReactDOM.createRoot}});var c=b(x()),n=b(y());var u=b(x());function g(o,e){return e===void 0?o:{...o,key:e}}function r(o,e,t){return(0,u.createElement)(o,g(e,t))}function m(o,e,t){let{children:s,...l}=e;return(0,u.createElement)(o,g(l,t),...s)}var v=[{value:"next",label:"Next.js"},{value:"sveltekit",label:"SvelteKit"},{value:"nuxt",label:"Nuxt.js"},{value:"remix",label:"Remix"},{value:"astro",label:"Astro"}];function i(){let[o,e]=c.useState(!1),[t,s]=c.useState("astro"),l=v.find(a=>a.value===t)?.label,h=a=>{s(a===t?"":a),e(!1)};return m("div",{className:"nx:flex nx:flex-col nx:gap-3",children:[m(n.Combobox,{open:o,onOpenChange:e,children:[r(n.ComboboxTrigger,{className:"nx:w-64",children:r("span",{className:"nx:min-w-0 nx:flex-1 nx:truncate nx:text-left",children:l??"Select framework"})}),m(n.ComboboxContent,{label:"Framework",children:[r(n.ComboboxInput,{placeholder:"Search framework..."}),m(n.ComboboxList,{children:[r(n.ComboboxEmpty,{children:"No framework found."}),r(n.ComboboxGroup,{children:v.map(a=>r(n.ComboboxItem,{value:a.value,keywords:[a.label],selected:t===a.value,onSelect:h,children:a.label},a.value))})]})]})]}),m("output",{className:"nx:typography-body-small nx:text-muted-foreground",children:["Selected: ",t||"none"]})]})}var R=b(x()),S=b(E());(0,S.createRoot)(document.getElementById("root")).render((0,R.createElement)(i));})();</script>
15
+ </body>
16
+ </html>
package/project/components/Command/README.md ADDED
@@ -0,0 +1,152 @@
1
+ # Command
2
+
3
+ Command is a searchable list of actions with keyboard navigation. Use it for command palettes and quick search. For picking a form value, use Combobox.
4
+
5
+ ## On the canvas
6
+
7
+ ```html
8
+ <x-import component-from-global-scope="Nxds.Command">Command</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.Command` — A searchable command palette with keyboard navigation.
16
+ - `Nxds.CommandDialog` — A command palette inside a modal Dialog, often opened with ⌘K.
17
+ - `Nxds.CommandEmpty` — Shown when the search matches no items.
18
+ - `Nxds.CommandGroup` — Groups related items under an optional `heading`.
19
+ - `Nxds.CommandInput` — The search field, with a leading search icon.
20
+ - `Nxds.CommandItem` — A selectable command.
21
+ - `Nxds.CommandList` — Scrollable container for command groups and items.
22
+ - `Nxds.CommandLoading` — Shown while async results load.
23
+ - `Nxds.CommandSeparator` — A decorative divider between groups or items.
24
+ - `Nxds.CommandShortcut` — A keyboard shortcut hint, right-aligned in a CommandItem.
25
+
26
+ ## Props
27
+
28
+ ### Command
29
+
30
+ | Prop | Type | Default | Control |
31
+ | --- | --- | --- | --- |
32
+ | `children` | `React.ReactNode` | | content |
33
+ | `className` | `string` | | text |
34
+ | `id` | `string` | | text |
35
+ | `asChild` | `boolean` | | toggle |
36
+ | `label` | `string` | | text |
37
+ | `shouldFilter` | `boolean` | | toggle |
38
+ | `filter` | `CommandFilter` | | none (object) |
39
+ | `value` | `string` | | text |
40
+ | `onValueChange` | `(value: string) => void` | | none (function) |
41
+ | `loop` | `boolean` | | toggle |
42
+ | `disablePointerSelection` | `boolean` | | toggle |
43
+ | `vimBindings` | `boolean` | | toggle |
44
+
45
+ ### CommandDialog
46
+
47
+ | Prop | Type | Default | Control |
48
+ | --- | --- | --- | --- |
49
+ | `title` | `string` | `"Command Palette"` | text |
50
+ | `description` | `string` | `"Search for a command to run..."` | text |
51
+ | `className` | `string` | | text |
52
+ | `showCloseButton` | `boolean` | `false` | toggle |
53
+ | `children` | `React.ReactNode` | | content |
54
+ | `open` | `boolean` | | toggle |
55
+ | `defaultOpen` | `boolean` | | toggle |
56
+ | `onOpenChange` | `(open: boolean) => void` | | none (function) |
57
+ | `modal` | `boolean` | | toggle |
58
+
59
+ ### CommandEmpty
60
+
61
+ | Prop | Type | Default | Control |
62
+ | --- | --- | --- | --- |
63
+ | `children` | `React.ReactNode` | | content |
64
+ | `className` | `string` | | text |
65
+ | `id` | `string` | | text |
66
+ | `asChild` | `boolean` | | toggle |
67
+
68
+ ### CommandGroup
69
+
70
+ | Prop | Type | Default | Control |
71
+ | --- | --- | --- | --- |
72
+ | `children` | `React.ReactNode` | | content |
73
+ | `className` | `string` | | text |
74
+ | `id` | `string` | | text |
75
+ | `asChild` | `boolean` | | toggle |
76
+ | `heading` | `React.ReactNode` | | none (element) |
77
+ | `value` | `string` | | text |
78
+ | `forceMount` | `boolean` | | toggle |
79
+
80
+ ### CommandInput
81
+
82
+ | Prop | Type | Default | Control |
83
+ | --- | --- | --- | --- |
84
+ | `children` | `React.ReactNode` | | content |
85
+ | `className` | `string` | | text |
86
+ | `id` | `string` | | text |
87
+ | `max` | `string \| number` | | none (object) |
88
+ | `min` | `string \| number` | | none (object) |
89
+ | `name` | `string` | | text |
90
+ | `step` | `string \| number` | | none (object) |
91
+ | `asChild` | `boolean` | | toggle |
92
+ | `disabled` | `boolean` | | toggle |
93
+ | `checked` | `boolean` | | toggle |
94
+ | `maxLength` | `number` | | number |
95
+ | `placeholder` | `string` | | text |
96
+ | `readOnly` | `boolean` | | toggle |
97
+ | `required` | `boolean` | | toggle |
98
+ | `value` | `string` | | text |
99
+ | `onValueChange` | `(search: string) => void` | | none (function) |
100
+
101
+ ### CommandItem
102
+
103
+ | Prop | Type | Default | Control |
104
+ | --- | --- | --- | --- |
105
+ | `children` | `React.ReactNode` | | content |
106
+ | `className` | `string` | | text |
107
+ | `id` | `string` | | text |
108
+ | `asChild` | `boolean` | | toggle |
109
+ | `disabled` | `boolean` | | toggle |
110
+ | `onSelect` | `(value: string) => void` | | none (function) |
111
+ | `value` | `string` | | text |
112
+ | `keywords` | `string[]` | | none (object) |
113
+ | `forceMount` | `boolean` | | toggle |
114
+
115
+ ### CommandList
116
+
117
+ | Prop | Type | Default | Control |
118
+ | --- | --- | --- | --- |
119
+ | `children` | `React.ReactNode` | | content |
120
+ | `className` | `string` | | text |
121
+ | `id` | `string` | | text |
122
+ | `asChild` | `boolean` | | toggle |
123
+ | `label` | `string` | | text |
124
+
125
+ ### CommandLoading
126
+
127
+ | Prop | Type | Default | Control |
128
+ | --- | --- | --- | --- |
129
+ | `children` | `React.ReactNode` | | content |
130
+ | `className` | `string` | | text |
131
+ | `id` | `string` | | text |
132
+ | `asChild` | `boolean` | | toggle |
133
+ | `progress` | `number` | | number |
134
+ | `label` | `string` | | text |
135
+
136
+ ### CommandSeparator
137
+
138
+ | Prop | Type | Default | Control |
139
+ | --- | --- | --- | --- |
140
+ | `children` | `React.ReactNode` | | content |
141
+ | `className` | `string` | | text |
142
+ | `id` | `string` | | text |
143
+ | `asChild` | `boolean` | | toggle |
144
+ | `alwaysRender` | `boolean` | | toggle |
145
+
146
+ ### CommandShortcut
147
+
148
+ | Prop | Type | Default | Control |
149
+ | --- | --- | --- | --- |
150
+ | `className` | `string` | | text |
151
+ | `id` | `string` | | text |
152
+ | `children` | `React.ReactNode` | | content |
package/project/components/Command/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>Command</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 I=Object.create;var i=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var K=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var l=(o,e)=>()=>{try{return e||o((e={exports:{}}).exports,e),e.exports}catch(n){throw e=0,n}};var T=(o,e,n,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let m of K(e))!b.call(o,m)&&m!==n&&i(o,m,{get:()=>e[m],enumerable:!(a=R(e,m))||a.enumerable});return o};var d=(o,e,n)=>(n=o!=null?I(P(o)):{},T(e||!o||!o.__esModule?i(n,"default",{value:o,enumerable:!0}):n,o));var f=l((N,C)=>{C.exports=window.Nxds});var u=l((S,x)=>{x.exports=window.React});var E=l((B,w)=>{w.exports={createRoot:window.ReactDOM.createRoot}});var t=d(f());var p=d(u());function y(o,e){return e===void 0?o:{...o,key:e}}function r(o,e,n){return(0,p.createElement)(o,y(e,n))}function s(o,e,n){let{children:a,...m}=e;return(0,p.createElement)(o,y(m,n),...a)}var j="nx:w-[480px] nx:rounded-lg nx:border-default nx:border-border-default nx:shadow-md";function c(){return s(t.Command,{label:"Command menu",className:j,children:[r(t.CommandInput,{placeholder:"Type a command or search..."}),s(t.CommandList,{children:[r(t.CommandEmpty,{children:"No results found."}),s(t.CommandGroup,{heading:"Suggestions",children:[r(t.CommandItem,{children:"Calendar"}),r(t.CommandItem,{children:"Search Emoji"}),r(t.CommandItem,{children:"Calculator"})]})]})]})}var h=d(u()),g=d(E());(0,g.createRoot)(document.getElementById("root")).render((0,h.createElement)(c));})();</script>
15
+ </body>
16
+ </html>
package/project/components/ContextMenu/README.md ADDED
@@ -0,0 +1,215 @@
1
+ # ContextMenu
2
+
3
+ ContextMenu shows a menu of actions when the user right-clicks an area. Use it for actions on a specific item or region. For a menu opened by a button, use DropdownMenu.
4
+
5
+ ## On the canvas
6
+
7
+ ```html
8
+ <x-import component-from-global-scope="Nxds.ContextMenu" dir="ltr">ContextMenu</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.ContextMenu` — Root component for the context menu.
16
+ - `Nxds.ContextMenuCheckboxItem` — A menu item that toggles on and off.
17
+ - `Nxds.ContextMenuContent` — The menu panel.
18
+ - `Nxds.ContextMenuGroup` — Groups related menu items.
19
+ - `Nxds.ContextMenuItem` — A single menu action.
20
+ - `Nxds.ContextMenuLabel` — A heading for a group of menu items.
21
+ - `Nxds.ContextMenuPortal` — Renders the content into `document.body`.
22
+ - `Nxds.ContextMenuRadioGroup` — Groups radio items so only one is checked.
23
+ - `Nxds.ContextMenuRadioItem` — A menu item for picking one option from a ContextMenuRadioGroup.
24
+ - `Nxds.ContextMenuSeparator` — A divider between menu items.
25
+ - `Nxds.ContextMenuShortcut` — A keyboard shortcut hint, right-aligned in a ContextMenuItem.
26
+ - `Nxds.ContextMenuSub` — Root of a submenu.
27
+ - `Nxds.ContextMenuSubContent` — The panel that holds a submenu's items.
28
+ - `Nxds.ContextMenuSubTrigger` — The item that opens a submenu.
29
+ - `Nxds.ContextMenuTrigger` — The area that opens the menu when right-clicked.
30
+
31
+ ## Props
32
+
33
+ ### ContextMenu
34
+
35
+ | Prop | Type | Default | Control |
36
+ | --- | --- | --- | --- |
37
+ | `children` | `React.ReactNode` | | content |
38
+ | `onOpenChange` | `(open: boolean) => void` | | none (function) |
39
+ | `dir` | `"ltr" \| "rtl"` | | dropdown |
40
+ | `modal` | `boolean` | | toggle |
41
+
42
+ ### ContextMenuCheckboxItem
43
+
44
+ | Prop | Type | Default | Control |
45
+ | --- | --- | --- | --- |
46
+ | `children` | `React.ReactNode` | | content |
47
+ | `onSelect` | `(event: Event) => void` | | none (function) |
48
+ | `className` | `string` | | text |
49
+ | `id` | `string` | | text |
50
+ | `asChild` | `boolean` | | toggle |
51
+ | `disabled` | `boolean` | | toggle |
52
+ | `checked` | `"indeterminate" \| boolean` | | dropdown |
53
+ | `textValue` | `string` | | text |
54
+ | `onCheckedChange` | `(checked: boolean) => void` | | none (function) |
55
+
56
+ ### ContextMenuContent
57
+
58
+ | Prop | Type | Default | Control |
59
+ | --- | --- | --- | --- |
60
+ | `children` | `React.ReactNode` | | content |
61
+ | `className` | `string` | | text |
62
+ | `id` | `string` | | text |
63
+ | `asChild` | `boolean` | | toggle |
64
+ | `forceMount` | `true` | | toggle |
65
+ | `onEscapeKeyDown` | `(event: KeyboardEvent) => void` | | none (function) |
66
+ | `onPointerDownOutside` | `(event: PointerDownOutsideEvent) => void` | | none (function) |
67
+ | `onFocusOutside` | `(event: FocusOutsideEvent) => void` | | none (function) |
68
+ | `onInteractOutside` | `(event: FocusOutsideEvent \| PointerDownOutsideEvent) => void` | | none (function) |
69
+ | `onCloseAutoFocus` | `(event: Event) => void` | | none (function) |
70
+ | `loop` | `boolean` | | toggle |
71
+ | `alignOffset` | `number` | | number |
72
+ | `arrowPadding` | `number` | | number |
73
+ | `avoidCollisions` | `boolean` | | toggle |
74
+ | `collisionBoundary` | `Element \| Boundary[]` | | none (object) |
75
+ | `collisionPadding` | `number \| Partial<Record<"top" \| "bottom" \| "left" \| "right", number>>` | | none (object) |
76
+ | `sticky` | `"partial" \| "always"` | | dropdown |
77
+ | `hideWhenDetached` | `boolean` | | toggle |
78
+ | `updatePositionStrategy` | `"always" \| "optimized"` | | dropdown |
79
+
80
+ ### ContextMenuGroup
81
+
82
+ | Prop | Type | Default | Control |
83
+ | --- | --- | --- | --- |
84
+ | `children` | `React.ReactNode` | | content |
85
+ | `className` | `string` | | text |
86
+ | `id` | `string` | | text |
87
+ | `asChild` | `boolean` | | toggle |
88
+
89
+ ### ContextMenuItem
90
+
91
+ | Prop | Type | Default | Control |
92
+ | --- | --- | --- | --- |
93
+ | `inset` | `boolean` | | toggle |
94
+ | `children` | `React.ReactNode` | | content |
95
+ | `onSelect` | `(event: Event) => void` | | none (function) |
96
+ | `className` | `string` | | text |
97
+ | `id` | `string` | | text |
98
+ | `asChild` | `boolean` | | toggle |
99
+ | `disabled` | `boolean` | | toggle |
100
+ | `textValue` | `string` | | text |
101
+ | `variant` | `"default" \| "destructive"` | `"default"` | dropdown |
102
+
103
+ ### ContextMenuLabel
104
+
105
+ | Prop | Type | Default | Control |
106
+ | --- | --- | --- | --- |
107
+ | `inset` | `boolean` | | toggle |
108
+ | `children` | `React.ReactNode` | | content |
109
+ | `className` | `string` | | text |
110
+ | `id` | `string` | | text |
111
+ | `asChild` | `boolean` | | toggle |
112
+
113
+ ### ContextMenuPortal
114
+
115
+ | Prop | Type | Default | Control |
116
+ | --- | --- | --- | --- |
117
+ | `children` | `React.ReactNode` | | content |
118
+ | `container` | `Element \| DocumentFragment` | | none (object) |
119
+ | `forceMount` | `true` | | toggle |
120
+
121
+ ### ContextMenuRadioGroup
122
+
123
+ | Prop | Type | Default | Control |
124
+ | --- | --- | --- | --- |
125
+ | `children` | `React.ReactNode` | | content |
126
+ | `className` | `string` | | text |
127
+ | `id` | `string` | | text |
128
+ | `asChild` | `boolean` | | toggle |
129
+ | `value` | `string` | | text |
130
+ | `onValueChange` | `(value: string) => void` | | none (function) |
131
+
132
+ ### ContextMenuRadioItem
133
+
134
+ | Prop | Type | Default | Control |
135
+ | --- | --- | --- | --- |
136
+ | `children` | `React.ReactNode` | | content |
137
+ | `onSelect` | `(event: Event) => void` | | none (function) |
138
+ | `className` | `string` | | text |
139
+ | `id` | `string` | | text |
140
+ | `asChild` | `boolean` | | toggle |
141
+ | `disabled` | `boolean` | | toggle |
142
+ | `value` | `string` | | text |
143
+ | `textValue` | `string` | | text |
144
+
145
+ ### ContextMenuSeparator
146
+
147
+ | Prop | Type | Default | Control |
148
+ | --- | --- | --- | --- |
149
+ | `children` | `React.ReactNode` | | content |
150
+ | `className` | `string` | | text |
151
+ | `id` | `string` | | text |
152
+ | `asChild` | `boolean` | | toggle |
153
+
154
+ ### ContextMenuShortcut
155
+
156
+ | Prop | Type | Default | Control |
157
+ | --- | --- | --- | --- |
158
+ | `className` | `string` | | text |
159
+ | `id` | `string` | | text |
160
+ | `children` | `React.ReactNode` | | content |
161
+
162
+ ### ContextMenuSub
163
+
164
+ | Prop | Type | Default | Control |
165
+ | --- | --- | --- | --- |
166
+ | `children` | `React.ReactNode` | | content |
167
+ | `open` | `boolean` | | toggle |
168
+ | `defaultOpen` | `boolean` | | toggle |
169
+ | `onOpenChange` | `(open: boolean) => void` | | none (function) |
170
+
171
+ ### ContextMenuSubContent
172
+
173
+ | Prop | Type | Default | Control |
174
+ | --- | --- | --- | --- |
175
+ | `children` | `React.ReactNode` | | content |
176
+ | `className` | `string` | | text |
177
+ | `id` | `string` | | text |
178
+ | `asChild` | `boolean` | | toggle |
179
+ | `forceMount` | `true` | | toggle |
180
+ | `onEscapeKeyDown` | `(event: KeyboardEvent) => void` | | none (function) |
181
+ | `onPointerDownOutside` | `(event: PointerDownOutsideEvent) => void` | | none (function) |
182
+ | `onFocusOutside` | `(event: FocusOutsideEvent) => void` | | none (function) |
183
+ | `onInteractOutside` | `(event: FocusOutsideEvent \| PointerDownOutsideEvent) => void` | | none (function) |
184
+ | `loop` | `boolean` | | toggle |
185
+ | `sideOffset` | `number` | | number |
186
+ | `alignOffset` | `number` | | number |
187
+ | `arrowPadding` | `number` | | number |
188
+ | `avoidCollisions` | `boolean` | | toggle |
189
+ | `collisionBoundary` | `Element \| Boundary[]` | | none (object) |
190
+ | `collisionPadding` | `number \| Partial<Record<"top" \| "bottom" \| "left" \| "right", number>>` | | none (object) |
191
+ | `sticky` | `"partial" \| "always"` | | dropdown |
192
+ | `hideWhenDetached` | `boolean` | | toggle |
193
+ | `updatePositionStrategy` | `"always" \| "optimized"` | | dropdown |
194
+
195
+ ### ContextMenuSubTrigger
196
+
197
+ | Prop | Type | Default | Control |
198
+ | --- | --- | --- | --- |
199
+ | `inset` | `boolean` | | toggle |
200
+ | `children` | `React.ReactNode` | | content |
201
+ | `className` | `string` | | text |
202
+ | `id` | `string` | | text |
203
+ | `asChild` | `boolean` | | toggle |
204
+ | `disabled` | `boolean` | | toggle |
205
+ | `textValue` | `string` | | text |
206
+
207
+ ### ContextMenuTrigger
208
+
209
+ | Prop | Type | Default | Control |
210
+ | --- | --- | --- | --- |
211
+ | `disabled` | `boolean` | | toggle |
212
+ | `children` | `React.ReactNode` | | content |
213
+ | `className` | `string` | | text |
214
+ | `id` | `string` | | text |
215
+ | `asChild` | `boolean` | | toggle |
package/project/components/ContextMenu/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>ContextMenu</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 p=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var I=Object.getPrototypeOf,K=Object.prototype.hasOwnProperty;var a=(t,e)=>()=>{try{return e||t((e={exports:{}}).exports,e),e.exports}catch(n){throw e=0,n}};var P=(t,e,n,u)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of b(e))!K.call(t,r)&&r!==n&&p(t,r,{get:()=>e[r],enumerable:!(u=R(e,r))||u.enumerable});return t};var d=(t,e,n)=>(n=t!=null?E(I(t)):{},P(e||!t||!t.__esModule?p(n,"default",{value:t,enumerable:!0}):n,t));var f=a((k,l)=>{l.exports=window.Nxds});var s=a((D,y)=>{y.exports=window.React});var w=a((O,g)=>{g.exports={createRoot:window.ReactDOM.createRoot}});var o=d(f());var m=d(s());function C(t,e){return e===void 0?t:{...t,key:e}}function x(t,e,n){return(0,m.createElement)(t,C(e,n))}function c(t,e,n){let{children:u,...r}=e;return(0,m.createElement)(t,C(r,n),...u)}var T="nx:flex nx:h-[96px] nx:w-full nx:max-w-md nx:select-none nx:items-center nx:justify-center nx:rounded-md nx:border-default nx:border-dashed nx:border-border-default nx:typography-body-default nx:text-muted-foreground";function i(){return c(o.ContextMenu,{children:[x(o.ContextMenuTrigger,{className:T,children:"Right click here"}),c(o.ContextMenuContent,{children:[x(o.ContextMenuItem,{children:"Back"}),x(o.ContextMenuItem,{children:"Forward"}),x(o.ContextMenuItem,{children:"Reload"})]})]})}var M=d(s()),h=d(w());(0,h.createRoot)(document.getElementById("root")).render((0,M.createElement)(i));})();</script>
15
+ </body>
16
+ </html>