@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/Sonner/README.md ADDED
@@ -0,0 +1,37 @@
1
+ # Sonner
2
+
3
+ Toaster shows short, temporary notifications. Mount it once near your app root, then call `toast()` from anywhere. For a message that stays on the page, use Alert.
4
+
5
+ ## On the canvas
6
+
7
+ ```html
8
+ <x-import component-from-global-scope="Nxds.Toaster" dir="auto" position="top-left"></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
+ ### Toaster
16
+
17
+ | Prop | Type | Default | Control |
18
+ | --- | --- | --- | --- |
19
+ | `className` | `string` | | text |
20
+ | `style` | `React.CSSProperties` | | none (object) |
21
+ | `offset` | `Offset` | | none (object) |
22
+ | `dir` | `"auto" \| "ltr" \| "rtl"` | | dropdown |
23
+ | `duration` | `number` | | number |
24
+ | `gap` | `number` | | number |
25
+ | `invert` | `boolean` | | toggle |
26
+ | `position` | `"top-left" \| "top-right" \| "bottom-left" \| "bottom-right" \| "top-center" \| "bottom-center"` | | dropdown |
27
+ | `theme` | `"light" \| "dark" \| "system"` | | dropdown |
28
+ | `hotkey` | `string[]` | | none (object) |
29
+ | `richColors` | `boolean` | | toggle |
30
+ | `expand` | `boolean` | | toggle |
31
+ | `visibleToasts` | `number` | | number |
32
+ | `closeButton` | `boolean` | | toggle |
33
+ | `toastOptions` | `ToastOptions` | | none (object) |
34
+ | `mobileOffset` | `Offset` | | none (object) |
35
+ | `swipeDirections` | `SwipeDirection[]` | | none (object) |
36
+ | `icons` | `ToastIcons` | | none (object) |
37
+ | `containerAriaLabel` | `string` | | text |
package/project/components/Sonner/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>Sonner</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 w=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var T=Object.getPrototypeOf,R=Object.prototype.hasOwnProperty;var u=(o,e)=>()=>{try{return e||o((e={exports:{}}).exports,e),e.exports}catch(t){throw e=0,t}};var S=(o,e,t,c)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of P(e))!R.call(o,s)&&s!==t&&w(o,s,{get:()=>e[s],enumerable:!(c=B(e,s))||c.enumerable});return o};var l=(o,e,t)=>(t=o!=null?k(T(o)):{},S(e||!o||!o.__esModule?w(t,"default",{value:o,enumerable:!0}):t,o));var d=u((b,v)=>{v.exports=window.Nxds});var m=u((D,x)=>{x.exports=window.React});var h=u((I,g)=>{g.exports={createRoot:window.ReactDOM.createRoot}});var i=l(d()),n=l(d());var a=l(m());function y(o,e){return e===void 0?o:{...o,key:e}}function r(o,e,t){return(0,a.createElement)(o,y(e,t))}function p(o,e,t){let{children:c,...s}=e;return(0,a.createElement)(o,y(s,t),...c)}function f(){return p(a.Fragment,{children:[p("div",{className:"nx:flex nx:flex-wrap nx:gap-2",children:[r(i.Button,{variant:"outline",onClick:()=>(0,n.toast)("Event has been created"),children:"Default"}),r(i.Button,{variant:"outline",onClick:()=>n.toast.success("Changes saved"),children:"Success"}),r(i.Button,{variant:"outline",onClick:()=>n.toast.error("Something went wrong"),children:"Error"}),r(i.Button,{variant:"outline",onClick:()=>n.toast.warning("Your session is about to expire"),children:"Warning"}),r(i.Button,{variant:"outline",onClick:()=>n.toast.info("A new version is available"),children:"Info"}),r(i.Button,{variant:"outline",onClick:()=>(0,n.toast)("File deleted",{action:{label:"Undo",onClick:()=>(0,n.toast)("File restored")}}),children:"With action"}),r(i.Button,{variant:"outline",onClick:()=>n.toast.promise(new Promise(t=>{setTimeout(t,1500)}),{loading:"Saving…",success:"Settings saved",error:"Could not save"}),children:"Promise"})]}),r(n.Toaster,{richColors:!0})]})}var C=l(m()),E=l(h());(0,E.createRoot)(document.getElementById("root")).render((0,C.createElement)(f));})();</script>
15
+ </body>
16
+ </html>
package/project/components/Spinner/README.md ADDED
@@ -0,0 +1,27 @@
1
+ # Spinner
2
+
3
+ Spinner shows that something is loading. Use it for page loads, "loading more" rows and Suspense fallbacks. For a loading Button, use its `loading` prop.
4
+
5
+ ## On the canvas
6
+
7
+ ```html
8
+ <x-import component-from-global-scope="Nxds.Spinner"></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
+ ### Spinner
16
+
17
+ | Prop | Type | Default | Control |
18
+ | --- | --- | --- | --- |
19
+ | `className` | `string` | | text |
20
+ | `id` | `string` | | text |
21
+ | `max` | `string \| number` | | none (object) |
22
+ | `min` | `string \| number` | | none (object) |
23
+ | `name` | `string` | | text |
24
+ | `target` | `string` | | text |
25
+ | `type` | `string` | | text |
26
+ | `href` | `string` | | text |
27
+ | `children` | `React.ReactNode` | | content |
package/project/components/Spinner/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>Spinner</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 d=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var p=(t,e)=>()=>{try{return e||t((e={exports:{}}).exports,e),e.exports}catch(r){throw e=0,r}};var S=(t,e,r,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of g(e))!D.call(t,n)&&n!==r&&d(t,n,{get:()=>e[n],enumerable:!(s=P(e,n))||s.enumerable});return t};var o=(t,e,r)=>(r=t!=null?K(h(t)):{},S(e||!t||!t.__esModule?d(r,"default",{value:t,enumerable:!0}):r,t));var a=p((k,u)=>{u.exports=window.Nxds});var i=p((B,f)=>{f.exports=window.React});var w=p((N,x)=>{x.exports={createRoot:window.ReactDOM.createRoot}});var l=o(a());var m=o(i());function T(t,e){return e===void 0?t:{...t,key:e}}function y(t,e,r){return(0,m.createElement)(t,T(e,r))}function c(){return y(l.Spinner,{})}var E=o(i()),R=o(w());(0,R.createRoot)(document.getElementById("root")).render((0,E.createElement)(c));})();</script>
15
+ </body>
16
+ </html>
package/project/components/Switch/README.md ADDED
@@ -0,0 +1,31 @@
1
+ # Switch
2
+
3
+ Switch turns a setting on or off right away, with no save step. Pair it with a Label so the label text is clickable too. For a choice that waits for a Save button, use Checkbox.
4
+
5
+ ## On the canvas
6
+
7
+ ```html
8
+ <x-import component-from-global-scope="Nxds.Switch" type="button" size="sm">Switch</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
+ ### Switch
16
+
17
+ | Prop | Type | Default | Control |
18
+ | --- | --- | --- | --- |
19
+ | `checked` | `boolean` | | toggle |
20
+ | `defaultChecked` | `boolean` | | toggle |
21
+ | `required` | `boolean` | | toggle |
22
+ | `onCheckedChange` | `(checked: boolean) => 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) |
31
+ | `size` | `"default" \| "sm"` | `"default"` | dropdown |
package/project/components/Switch/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>Switch</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 l=Object.defineProperty;var I=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,T=Object.prototype.hasOwnProperty;var p=(e,t)=>()=>{try{return t||e((t={exports:{}}).exports,t),t.exports}catch(r){throw t=0,r}};var j=(e,t,r,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of L(t))!T.call(e,o)&&o!==r&&l(e,o,{get:()=>t[o],enumerable:!(i=I(t,o))||i.enumerable});return e};var n=(e,t,r)=>(r=e!=null?b(S(e)):{},j(t||!e||!e.__esModule?l(r,"default",{value:e,enumerable:!0}):r,e));var m=p((D,f)=>{f.exports=window.React});var s=p((F,u)=>{u.exports=window.Nxds});var K=p((B,R)=>{R.exports={createRoot:window.ReactDOM.createRoot}});var w=n(m()),h=n(s()),E=n(s());var c=n(m());function x(e,t){return t===void 0?e:{...e,key:t}}function a(e,t,r){return(0,c.createElement)(e,x(t,r))}function y(e,t,r){let{children:i,...o}=t;return(0,c.createElement)(e,x(o,r),...i)}function d(){let e=w.useId();return y("div",{className:"nx:flex nx:items-center nx:gap-2",children:[a(E.Switch,{id:e}),a(h.Label,{htmlFor:e,children:"Airplane mode"})]})}var P=n(m()),g=n(K());(0,g.createRoot)(document.getElementById("root")).render((0,P.createElement)(d));})();</script>
15
+ </body>
16
+ </html>
package/project/components/Table/README.md ADDED
@@ -0,0 +1,120 @@
1
+ # Table
2
+
3
+ Table shows rows of data in columns. Use it for records users scan and compare, such as invoices. Sorting, selection and pagination logic stay in your app.
4
+
5
+ ## On the canvas
6
+
7
+ ```html
8
+ <x-import component-from-global-scope="Nxds.Table" variant="grid" density="compact">Table</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.Table` — Data table with a header, body and optional footer.
16
+ - `Nxds.TableBody` — `<tbody>` that holds the data rows.
17
+ - `Nxds.TableCaption` — Caption that describes the table, shown below it.
18
+ - `Nxds.TableCell` — Data cell (`<td>`).
19
+ - `Nxds.TableFooter` — `<tfoot>` for a summary or totals row, on a muted fill.
20
+ - `Nxds.TableHead` — Column-header cell (`<th>`) in muted text.
21
+ - `Nxds.TableHeader` — `<thead>` that holds the column-header rows.
22
+ - `Nxds.TableRow` — Table row that highlights on hover.
23
+ - `Nxds.TableRowHeader` — Cell that names its row, such as an invoice number (`<th scope="row">`).
24
+ - `Nxds.TableSelectionCell` — Cell for your row Checkbox.
25
+ - `Nxds.TableSelectionHead` — First header cell, for your select-all Checkbox.
26
+
27
+ ## Props
28
+
29
+ ### Table
30
+
31
+ | Prop | Type | Default | Control |
32
+ | --- | --- | --- | --- |
33
+ | `variant` | `"grid" \| "default" \| "borderless"` | `"default"` | dropdown |
34
+ | `density` | `"comfortable" \| "compact"` | `"comfortable"` | dropdown |
35
+ | `stickyHeader` | `boolean` | `false` | toggle |
36
+ | `striped` | `boolean` | `false` | toggle |
37
+ | `containerClassName` | `string` | | text |
38
+ | `className` | `string` | | text |
39
+ | `id` | `string` | | text |
40
+ | `children` | `React.ReactNode` | | content |
41
+
42
+ ### TableBody
43
+
44
+ | Prop | Type | Default | Control |
45
+ | --- | --- | --- | --- |
46
+ | `className` | `string` | | text |
47
+ | `id` | `string` | | text |
48
+ | `children` | `React.ReactNode` | | content |
49
+
50
+ ### TableCaption
51
+
52
+ | Prop | Type | Default | Control |
53
+ | --- | --- | --- | --- |
54
+ | `className` | `string` | | text |
55
+ | `id` | `string` | | text |
56
+ | `children` | `React.ReactNode` | | content |
57
+
58
+ ### TableCell
59
+
60
+ | Prop | Type | Default | Control |
61
+ | --- | --- | --- | --- |
62
+ | `className` | `string` | | text |
63
+ | `id` | `string` | | text |
64
+ | `children` | `React.ReactNode` | | content |
65
+
66
+ ### TableFooter
67
+
68
+ | Prop | Type | Default | Control |
69
+ | --- | --- | --- | --- |
70
+ | `className` | `string` | | text |
71
+ | `id` | `string` | | text |
72
+ | `children` | `React.ReactNode` | | content |
73
+
74
+ ### TableHead
75
+
76
+ | Prop | Type | Default | Control |
77
+ | --- | --- | --- | --- |
78
+ | `className` | `string` | | text |
79
+ | `id` | `string` | | text |
80
+ | `children` | `React.ReactNode` | | content |
81
+
82
+ ### TableHeader
83
+
84
+ | Prop | Type | Default | Control |
85
+ | --- | --- | --- | --- |
86
+ | `className` | `string` | | text |
87
+ | `id` | `string` | | text |
88
+ | `children` | `React.ReactNode` | | content |
89
+
90
+ ### TableRow
91
+
92
+ | Prop | Type | Default | Control |
93
+ | --- | --- | --- | --- |
94
+ | `className` | `string` | | text |
95
+ | `id` | `string` | | text |
96
+ | `children` | `React.ReactNode` | | content |
97
+
98
+ ### TableRowHeader
99
+
100
+ | Prop | Type | Default | Control |
101
+ | --- | --- | --- | --- |
102
+ | `className` | `string` | | text |
103
+ | `id` | `string` | | text |
104
+ | `children` | `React.ReactNode` | | content |
105
+
106
+ ### TableSelectionCell
107
+
108
+ | Prop | Type | Default | Control |
109
+ | --- | --- | --- | --- |
110
+ | `className` | `string` | | text |
111
+ | `id` | `string` | | text |
112
+ | `children` | `React.ReactNode` | | content |
113
+
114
+ ### TableSelectionHead
115
+
116
+ | Prop | Type | Default | Control |
117
+ | --- | --- | --- | --- |
118
+ | `className` | `string` | | text |
119
+ | `id` | `string` | | text |
120
+ | `children` | `React.ReactNode` | | content |
package/project/components/Table/preview.html ADDED
@@ -0,0 +1,16 @@
1
+ <!-- @dsCard group="Data display" height=280 -->
2
+ <!doctype html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="utf-8">
6
+ <title>Table</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 v=Object.create;var T=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,E=Object.prototype.hasOwnProperty;var m=(e,t)=>()=>{try{return t||e((t={exports:{}}).exports,t),t.exports}catch(n){throw t=0,n}};var H=(e,t,n,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of R(t))!E.call(e,r)&&r!==n&&T(e,r,{get:()=>t[r],enumerable:!(i=N(t,r))||i.enumerable});return e};var l=(e,t,n)=>(n=e!=null?v(w(e)):{},H(t||!e||!e.__esModule?T(n,"default",{value:e,enumerable:!0}):n,e));var b=m((V,p)=>{p.exports=window.Nxds});var c=m((K,y)=>{y.exports=window.React});var P=m((D,x)=>{x.exports={createRoot:window.ReactDOM.createRoot}});var a=l(b());var d=l(c());function f(e,t){return t===void 0?e:{...e,key:t}}function o(e,t,n){return(0,d.createElement)(e,f(t,n))}function s(e,t,n){let{children:i,...r}=t;return(0,d.createElement)(e,f(r,n),...i)}var I=[{invoice:"INV001",status:"Paid",method:"Credit Card",amount:"$250.00"},{invoice:"INV002",status:"Pending",method:"PayPal",amount:"$150.00"},{invoice:"INV003",status:"Unpaid",method:"Bank Transfer",amount:"$350.00"},{invoice:"INV004",status:"Paid",method:"Credit Card",amount:"$450.00"},{invoice:"INV005",status:"Paid",method:"PayPal",amount:"$550.00"}];function u(){return s(a.Table,{children:[o(a.TableCaption,{children:"A list of your recent invoices."}),o(a.TableHeader,{children:s(a.TableRow,{children:[o(a.TableHead,{children:"Invoice"}),o(a.TableHead,{children:"Status"}),o(a.TableHead,{children:"Method"}),o(a.TableHead,{className:"nx:text-right",children:"Amount"})]})}),o(a.TableBody,{children:I.map(e=>s(a.TableRow,{children:[o(a.TableCell,{className:"nx:font-medium",children:e.invoice}),o(a.TableCell,{children:e.status}),o(a.TableCell,{children:e.method}),o(a.TableCell,{className:"nx:text-right",children:e.amount})]},e.invoice))})]})}var h=l(c()),C=l(P());(0,C.createRoot)(document.getElementById("root")).render((0,h.createElement)(u));})();</script>
15
+ </body>
16
+ </html>
package/project/components/Tabs/README.md ADDED
@@ -0,0 +1,81 @@
1
+ # Tabs
2
+
3
+ Tabs switch between panels of related content in one place. Use them to split a view into sections that users visit one at a time.
4
+
5
+ ## On the canvas
6
+
7
+ ```html
8
+ <x-import component-from-global-scope="Nxds.Tabs" default-value="account" class-name="nx:w-[400px]">
9
+ <x-import component-from-global-scope="Nxds.TabsList">
10
+ <x-import component-from-global-scope="Nxds.TabsTrigger" value="account">Account</x-import>
11
+ <x-import component-from-global-scope="Nxds.TabsTrigger" value="password">Password</x-import>
12
+ </x-import>
13
+ <x-import component-from-global-scope="Nxds.TabsContent" value="account">
14
+ <p class="nx:typography-body-default nx:text-muted-foreground">Make changes to your account here. Click save when you're done.</p>
15
+ </x-import>
16
+ <x-import component-from-global-scope="Nxds.TabsContent" value="password">
17
+ <p class="nx:typography-body-default nx:text-muted-foreground">Change your password here. After saving, you'll be logged out.</p>
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.Tabs` — Root of the tabs.
27
+ - `Nxds.TabsContent` — Panel for one tab, shown only while that tab is active.
28
+ - `Nxds.TabsList` — Row of tab triggers.
29
+ - `Nxds.TabsTrigger` — Tab button that shows its panel.
30
+
31
+ ## Props
32
+
33
+ ### Tabs
34
+
35
+ | Prop | Type | Default | Control |
36
+ | --- | --- | --- | --- |
37
+ | `value` | `string` | | text |
38
+ | `defaultValue` | `string` | | text |
39
+ | `onValueChange` | `(value: string) => void` | | none (function) |
40
+ | `orientation` | `"horizontal" \| "vertical"` | | dropdown |
41
+ | `dir` | `"ltr" \| "rtl"` | | dropdown |
42
+ | `activationMode` | `"manual" \| "automatic"` | | dropdown |
43
+ | `children` | `React.ReactNode` | | content |
44
+ | `className` | `string` | | text |
45
+ | `id` | `string` | | text |
46
+ | `asChild` | `boolean` | | toggle |
47
+
48
+ ### TabsContent
49
+
50
+ | Prop | Type | Default | Control |
51
+ | --- | --- | --- | --- |
52
+ | `value` | `string` | | text |
53
+ | `forceMount` | `true` | | toggle |
54
+ | `children` | `React.ReactNode` | | content |
55
+ | `className` | `string` | | text |
56
+ | `id` | `string` | | text |
57
+ | `asChild` | `boolean` | | toggle |
58
+
59
+ ### TabsList
60
+
61
+ | Prop | Type | Default | Control |
62
+ | --- | --- | --- | --- |
63
+ | `variant` | `"default" \| "underline"` | `"default"` | dropdown |
64
+ | `size` | `"default" \| "sm" \| "lg"` | `"default"` | dropdown |
65
+ | `children` | `React.ReactNode` | | content |
66
+ | `className` | `string` | | text |
67
+ | `id` | `string` | | text |
68
+ | `loop` | `boolean` | | toggle |
69
+
70
+ ### TabsTrigger
71
+
72
+ | Prop | Type | Default | Control |
73
+ | --- | --- | --- | --- |
74
+ | `value` | `string` | | text |
75
+ | `children` | `React.ReactNode` | | content |
76
+ | `className` | `string` | | text |
77
+ | `id` | `string` | | text |
78
+ | `name` | `string` | | text |
79
+ | `type` | `"button" \| "submit" \| "reset"` | | dropdown |
80
+ | `asChild` | `boolean` | | toggle |
81
+ | `disabled` | `boolean` | | toggle |
package/project/components/Tabs/preview.html ADDED
@@ -0,0 +1,16 @@
1
+ <!-- @dsCard group="Navigation" height=120 -->
2
+ <!doctype html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="utf-8">
6
+ <title>Tabs</title>
7
+ <style>
8
+ body { margin: 0; background: var(--nx-color-background); color: var(--nx-color-foreground); font-family: var(--font-sans); }
9
+ #root { padding: var(--nx-spacing-6); }
10
+ </style>
11
+ </head>
12
+ <body>
13
+ <div id="root"></div>
14
+ <script>(()=>{var E=Object.create;var m=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var c=(t,e)=>()=>{try{return e||t((e={exports:{}}).exports,e),e.exports}catch(o){throw e=0,o}};var K=(t,e,o,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of P(e))!C.call(t,n)&&n!==o&&m(t,n,{get:()=>e[n],enumerable:!(s=v(e,n))||s.enumerable});return t};var u=(t,e,o)=>(o=t!=null?E(R(t)):{},K(e||!t||!t.__esModule?m(o,"default",{value:t,enumerable:!0}):o,t));var f=c((k,y)=>{y.exports=window.Nxds});var d=c((D,g)=>{g.exports=window.React});var w=c((M,T)=>{T.exports={createRoot:window.ReactDOM.createRoot}});var r=u(f());var p=u(d());function x(t,e){return e===void 0?t:{...t,key:e}}function a(t,e,o){return(0,p.createElement)(t,x(e,o))}function l(t,e,o){let{children:s,...n}=e;return(0,p.createElement)(t,x(n,o),...s)}function i(){return l(r.Tabs,{defaultValue:"account",className:"nx:w-[400px]",children:[l(r.TabsList,{children:[a(r.TabsTrigger,{value:"account",children:"Account"}),a(r.TabsTrigger,{value:"password",children:"Password"})]}),a(r.TabsContent,{value:"account",children:a("p",{className:"nx:typography-body-default nx:text-muted-foreground",children:"Make changes to your account here. Click save when you're done."})}),a(r.TabsContent,{value:"password",children:a("p",{className:"nx:typography-body-default nx:text-muted-foreground",children:"Change your password here. After saving, you'll be logged out."})})]})}var b=u(d()),h=u(w());(0,h.createRoot)(document.getElementById("root")).render((0,b.createElement)(i));})();</script>
15
+ </body>
16
+ </html>
package/project/components/Textarea/README.md ADDED
@@ -0,0 +1,32 @@
1
+ # Textarea
2
+
3
+ Textarea takes multi-line text, such as notes or a bio. It accepts every native textarea attribute. For a single line, use Input.
4
+
5
+ ## On the canvas
6
+
7
+ ```html
8
+ <div class="nx:w-[400px]">
9
+ <x-import component-from-global-scope="Nxds.Textarea" placeholder="Tell us about yourself..."></x-import>
10
+ </div>
11
+ ```
12
+
13
+ Attributes set props, kebab-case to camelCase. Element content becomes `children`. An attribute holds text, so a prop that takes an element, a function or an object has no attribute.
14
+
15
+ ## Props
16
+
17
+ ### Textarea
18
+
19
+ | Prop | Type | Default | Control |
20
+ | --- | --- | --- | --- |
21
+ | `disabled` | `boolean` | | toggle |
22
+ | `maxLength` | `number` | | number |
23
+ | `name` | `string` | | text |
24
+ | `placeholder` | `string` | | text |
25
+ | `readOnly` | `boolean` | | toggle |
26
+ | `required` | `boolean` | | toggle |
27
+ | `rows` | `number` | | number |
28
+ | `value` | `string \| number \| readonly string[]` | | none (object) |
29
+ | `className` | `string` | | text |
30
+ | `id` | `string` | | text |
31
+ | `children` | `React.ReactNode` | | content |
32
+ | `variant` | `"bordered" \| "borderless"` | `"bordered"` | dropdown |
package/project/components/Textarea/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>Textarea</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 d=Object.defineProperty;var K=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var p=(t,e)=>()=>{try{return e||t((e={exports:{}}).exports,e),e.exports}catch(r){throw e=0,r}};var D=(t,e,r,c)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of P(e))!g.call(t,o)&&o!==r&&d(t,o,{get:()=>e[o],enumerable:!(c=K(e,o))||c.enumerable});return t};var n=(t,e,r)=>(r=t!=null?T(h(t)):{},D(e||!t||!t.__esModule?d(r,"default",{value:t,enumerable:!0}):r,t));var u=p((N,l)=>{l.exports=window.Nxds});var a=p((b,f)=>{f.exports=window.React});var w=p((I,y)=>{y.exports={createRoot:window.ReactDOM.createRoot}});var x=n(u());var s=n(a());function j(t,e){return e===void 0?t:{...t,key:e}}function i(t,e,r){return(0,s.createElement)(t,j(e,r))}function m(){return i("div",{className:"nx:w-[400px]",children:i(x.Textarea,{placeholder:"Tell us about yourself..."})})}var E=n(a()),R=n(w());(0,R.createRoot)(document.getElementById("root")).render((0,E.createElement)(m));})();</script>
15
+ </body>
16
+ </html>
package/project/components/Toggle/README.md ADDED
@@ -0,0 +1,33 @@
1
+ # Toggle
2
+
3
+ Toggle is a button that stays pressed until clicked again, such as Bold. Icon-only toggles need an `aria-label`. For a set of related toggles, use ToggleGroup.
4
+
5
+ ## On the canvas
6
+
7
+ ```html
8
+ <x-import component-from-global-scope="Nxds.Toggle" aria-label="Bold">
9
+ <x-import component-from-global-scope="Nxds.Icons.IconBold"></x-import>
10
+ </x-import>
11
+ ```
12
+
13
+ Attributes set props, kebab-case to camelCase. Element content becomes `children`. An attribute holds text, so a prop that takes an element, a function or an object has no attribute.
14
+
15
+ ## Props
16
+
17
+ ### Toggle
18
+
19
+ | Prop | Type | Default | Control |
20
+ | --- | --- | --- | --- |
21
+ | `pressed` | `boolean` | | toggle |
22
+ | `defaultPressed` | `boolean` | | toggle |
23
+ | `onPressedChange` | `(pressed: boolean) => void` | | none (function) |
24
+ | `children` | `React.ReactNode` | | content |
25
+ | `className` | `string` | | text |
26
+ | `id` | `string` | | text |
27
+ | `name` | `string` | | text |
28
+ | `type` | `"button" \| "submit" \| "reset"` | | dropdown |
29
+ | `asChild` | `boolean` | | toggle |
30
+ | `disabled` | `boolean` | | toggle |
31
+ | `value` | `string \| number \| readonly string[]` | | none (object) |
32
+ | `variant` | `"default" \| "outline" \| "outline-primary"` | `"default"` | dropdown |
33
+ | `size` | `"default" \| "sm" \| "lg"` | `"default"` | dropdown |
package/project/components/Toggle/preview.html ADDED
@@ -0,0 +1,16 @@
1
+ <!-- @dsCard group="Actions" height=120 -->
2
+ <!doctype html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="utf-8">
6
+ <title>Toggle</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 l=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var D=Object.getPrototypeOf,I=Object.prototype.hasOwnProperty;var p=(t,e)=>()=>{try{return e||t((e={exports:{}}).exports,e),e.exports}catch(o){throw e=0,o}};var j=(t,e,o,d)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of B(e))!I.call(t,r)&&r!==o&&l(t,r,{get:()=>e[r],enumerable:!(d=h(e,r))||d.enumerable});return t};var n=(t,e,o)=>(o=t!=null?P(D(t)):{},j(e||!t||!t.__esModule?l(o,"default",{value:t,enumerable:!0}):o,t));var f=p((k,a)=>{a.exports=window.Nxds.Icons});var y=p((F,u)=>{u.exports=window.Nxds});var i=p((M,x)=>{x.exports=window.React});var R=p((q,E)=>{E.exports={createRoot:window.ReactDOM.createRoot}});var w=n(f()),g=n(y());var m=n(i());function N(t,e){return e===void 0?t:{...t,key:e}}function s(t,e,o){return(0,m.createElement)(t,N(e,o))}function c(){return s(g.Toggle,{"aria-label":"Bold",children:s(w.IconBold,{})})}var T=n(i()),K=n(R());(0,K.createRoot)(document.getElementById("root")).render((0,T.createElement)(c));})();</script>
15
+ </body>
16
+ </html>
package/project/components/ToggleGroup/README.md ADDED
@@ -0,0 +1,64 @@
1
+ # ToggleGroup
2
+
3
+ ToggleGroup is a set of related toggles, such as text alignment or Bold, Italic and Underline. Use `type="single"` for one choice or `type="multiple"` for several. Icon-only items need an `aria-label`.
4
+
5
+ ## On the canvas
6
+
7
+ ```html
8
+ <x-import component-from-global-scope="Nxds.ToggleGroup" type="single" default-value="left">
9
+ <x-import component-from-global-scope="Nxds.ToggleGroupItem" value="left" aria-label="Align left">
10
+ <x-import component-from-global-scope="Nxds.Icons.IconAlignLeft"></x-import>
11
+ </x-import>
12
+ <x-import component-from-global-scope="Nxds.ToggleGroupItem" value="center" aria-label="Align center">
13
+ <x-import component-from-global-scope="Nxds.Icons.IconAlignCenter"></x-import>
14
+ </x-import>
15
+ <x-import component-from-global-scope="Nxds.ToggleGroupItem" value="right" aria-label="Align right">
16
+ <x-import component-from-global-scope="Nxds.Icons.IconAlignRight"></x-import>
17
+ </x-import>
18
+ </x-import>
19
+ ```
20
+
21
+ 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.
22
+
23
+ ## Parts
24
+
25
+ - `Nxds.ToggleGroup` — Set of related toggles that share `variant` and `size`.
26
+ - `Nxds.ToggleGroupItem` — One toggle in a `ToggleGroup`.
27
+
28
+ ## Props
29
+
30
+ ### ToggleGroup
31
+
32
+ | Prop | Type | Default | Control |
33
+ | --- | --- | --- | --- |
34
+ | `type` | `"single" \| "multiple"` | | dropdown |
35
+ | `value` | `string \| string[]` | | none (object) |
36
+ | `defaultValue` | `string \| string[]` | | none (object) |
37
+ | `onValueChange` | `((value: string) => void) \| ((value: string[]) => void)` | | none (function) |
38
+ | `disabled` | `boolean` | | toggle |
39
+ | `rovingFocus` | `boolean` | | toggle |
40
+ | `loop` | `boolean` | | toggle |
41
+ | `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | dropdown |
42
+ | `dir` | `"ltr" \| "rtl"` | | dropdown |
43
+ | `children` | `React.ReactNode` | | content |
44
+ | `className` | `string` | | text |
45
+ | `id` | `string` | | text |
46
+ | `asChild` | `boolean` | | toggle |
47
+ | `variant` | `"default" \| "outline" \| "outline-primary"` | `"default"` | dropdown |
48
+ | `size` | `"default" \| "sm" \| "lg"` | `"default"` | dropdown |
49
+ | `spacing` | `number` | `0` | number |
50
+
51
+ ### ToggleGroupItem
52
+
53
+ | Prop | Type | Default | Control |
54
+ | --- | --- | --- | --- |
55
+ | `children` | `React.ReactNode` | | content |
56
+ | `className` | `string` | | text |
57
+ | `id` | `string` | | text |
58
+ | `name` | `string` | | text |
59
+ | `type` | `"button" \| "submit" \| "reset"` | | dropdown |
60
+ | `asChild` | `boolean` | | toggle |
61
+ | `disabled` | `boolean` | | toggle |
62
+ | `value` | `string` | | text |
63
+ | `variant` | `"default" \| "outline" \| "outline-primary"` | `"default"` | dropdown |
64
+ | `size` | `"default" \| "sm" \| "lg"` | `"default"` | dropdown |
package/project/components/ToggleGroup/preview.html ADDED
@@ -0,0 +1,16 @@
1
+ <!-- @dsCard group="Actions" height=120 -->
2
+ <!doctype html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="utf-8">
6
+ <title>ToggleGroup</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 A=Object.create;var s=Object.defineProperty;var K=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>{try{return e||t((e={exports:{}}).exports,e),e.exports}catch(o){throw e=0,o}};var D=(t,e,o,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of P(e))!v.call(t,r)&&r!==o&&s(t,r,{get:()=>e[r],enumerable:!(a=K(e,r))||a.enumerable});return t};var p=(t,e,o)=>(o=t!=null?A(b(t)):{},D(e||!t||!t.__esModule?s(o,"default",{value:t,enumerable:!0}):o,t));var d=g((N,f)=>{f.exports=window.Nxds.Icons});var x=g((V,y)=>{y.exports=window.Nxds});var m=g((k,w)=>{w.exports=window.React});var G=g((L,E)=>{E.exports={createRoot:window.ReactDOM.createRoot}});var i=p(d()),l=p(x());var u=p(m());function T(t,e){return e===void 0?t:{...t,key:e}}function n(t,e,o){return(0,u.createElement)(t,T(e,o))}function I(t,e,o){let{children:a,...r}=e;return(0,u.createElement)(t,T(r,o),...a)}function c(){return I(l.ToggleGroup,{type:"single",defaultValue:"left",children:[n(l.ToggleGroupItem,{value:"left","aria-label":"Align left",children:n(i.IconAlignLeft,{})}),n(l.ToggleGroupItem,{value:"center","aria-label":"Align center",children:n(i.IconAlignCenter,{})}),n(l.ToggleGroupItem,{value:"right","aria-label":"Align right",children:n(i.IconAlignRight,{})})]})}var R=p(m()),h=p(G());(0,h.createRoot)(document.getElementById("root")).render((0,R.createElement)(c));})();</script>
15
+ </body>
16
+ </html>