@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/FilterCondition/README.md ADDED
@@ -0,0 +1,66 @@
1
+ # FilterCondition
2
+
3
+ FilterCondition shows one filter as separate field, operator, value and remove parts. Use it when the user edits a filter from its summary. For a chip that only removes, use FilterChip.
4
+
5
+ - Wrap each FilterConditionSegment in a PopoverTrigger or DropdownMenuTrigger with `asChild`.
6
+ - Your app owns open state, draft values, when changes apply and focus after removal.
7
+ - All parts share one compact height that follows density. There is no `size` prop.
8
+ - Editor inputs set their own size.
9
+ - Segments are native buttons, so Enter and Space activate them.
10
+ - The full summary stays accessible when it truncates on screen.
11
+ - See Patterns/Filtering for recipes that apply changes at once or on Apply.
12
+
13
+ ## On the canvas
14
+
15
+ ```html
16
+ <x-import component-from-global-scope="Nxds.FilterCondition">FilterCondition</x-import>
17
+ ```
18
+
19
+ Attributes set props, kebab-case to camelCase. Element content becomes `children`. An attribute holds text, so a prop that takes an element, a function or an object has no attribute.
20
+
21
+ ## Parts
22
+
23
+ - `Nxds.FilterCondition`
24
+ - `Nxds.FilterConditionField`
25
+ - `Nxds.FilterConditionRemove`
26
+ - `Nxds.FilterConditionSegment` — One clickable part of a condition, such as its operator or value.
27
+
28
+ ## Props
29
+
30
+ ### FilterCondition
31
+
32
+ | Prop | Type | Default | Control |
33
+ | --- | --- | --- | --- |
34
+ | `className` | `string` | | text |
35
+ | `id` | `string` | | text |
36
+ | `children` | `React.ReactNode` | | content |
37
+
38
+ ### FilterConditionField
39
+
40
+ | Prop | Type | Default | Control |
41
+ | --- | --- | --- | --- |
42
+ | `className` | `string` | | text |
43
+ | `id` | `string` | | text |
44
+ | `children` | `React.ReactNode` | | content |
45
+
46
+ ### FilterConditionRemove
47
+
48
+ | Prop | Type | Default | Control |
49
+ | --- | --- | --- | --- |
50
+ | `aria-label` | `string` | | text |
51
+ | `className` | `string` | | text |
52
+ | `id` | `string` | | text |
53
+ | `name` | `string` | | text |
54
+ | `disabled` | `boolean` | | toggle |
55
+ | `value` | `string \| number \| readonly string[]` | | none (object) |
56
+
57
+ ### FilterConditionSegment
58
+
59
+ | Prop | Type | Default | Control |
60
+ | --- | --- | --- | --- |
61
+ | `children` | `React.ReactNode` | | content |
62
+ | `className` | `string` | | text |
63
+ | `id` | `string` | | text |
64
+ | `name` | `string` | | text |
65
+ | `disabled` | `boolean` | | toggle |
66
+ | `value` | `string \| number \| readonly string[]` | | none (object) |
package/project/components/FilterCondition/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>FilterCondition</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 c=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,K=Object.prototype.hasOwnProperty;var s=(e,t)=>()=>{try{return t||e((t={exports:{}}).exports,t),t.exports}catch(o){throw t=0,o}};var h=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of P(t))!K.call(e,n)&&n!==o&&c(e,n,{get:()=>t[n],enumerable:!(r=k(t,n))||r.enumerable});return e};var a=(e,t,o)=>(o=e!=null?b(S(e)):{},h(t||!e||!e.__esModule?c(o,"default",{value:e,enumerable:!0}):o,e));var f=s((T,u)=>{u.exports=window.Nxds});var m=s((j,C)=>{C.exports=window.React});var E=s((B,F)=>{F.exports={createRoot:window.ReactDOM.createRoot}});var i=a(f());var d=a(m());function x(e,t){return t===void 0?e:{...e,key:t}}function l(e,t,o){return(0,d.createElement)(e,x(t,o))}function y(e,t,o){let{children:r,...n}=t;return(0,d.createElement)(e,x(n,o),...r)}function $({field:e="Status",operator:t="is",value:o="Paid",disabled:r=!1,onOperatorClick:n,onValueClick:R,onRemove:v}){return y(i.FilterCondition,{children:[l(i.FilterConditionField,{children:e}),l(i.FilterConditionSegment,{"aria-label":`Edit ${e} operator`,className:"nx:shrink-0 nx:text-muted-foreground",disabled:r,onClick:n,children:t}),l(i.FilterConditionSegment,{"aria-label":`Edit ${e} value: ${o}`,disabled:r,onClick:R,children:o}),l(i.FilterConditionRemove,{"aria-label":`Remove ${e} filter`,disabled:r,onClick:v})]})}function p(){return l($,{field:"Status",operator:"is",value:"Paid",disabled:!1})}var g=a(m()),w=a(E());(0,w.createRoot)(document.getElementById("root")).render((0,g.createElement)(p));})();</script>
15
+ </body>
16
+ </html>
package/project/components/Hide/README.md ADDED
@@ -0,0 +1,26 @@
1
+ # Hide
2
+
3
+ Hide removes its children from view above or below a viewport or container width. Use it for responsive visibility instead of toggling `nx:hidden` classes. To show content only at a width, use Show.
4
+
5
+ ## On the canvas
6
+
7
+ ```html
8
+ <x-import component-from-global-scope="Nxds.Hide" as="div" above="sm">Hide</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
+ ### Hide
16
+
17
+ | Prop | Type | Default | Control |
18
+ | --- | --- | --- | --- |
19
+ | `className` | `string` | | text |
20
+ | `id` | `string` | | text |
21
+ | `children` | `React.ReactNode` | | content |
22
+ | `as` | `"div" \| "span"` | `"span"` | dropdown |
23
+ | `above` | `"sm" \| "lg" \| "md" \| "xl" \| "2xl"` | | dropdown |
24
+ | `below` | `"sm" \| "lg" \| "md" \| "xl" \| "2xl"` | | dropdown |
25
+ | `containerAbove` | `"sm" \| "lg" \| "md" \| "xl" \| "2xl"` | | dropdown |
26
+ | `containerBelow` | `"sm" \| "lg" \| "md" \| "xl" \| "2xl"` | | dropdown |
package/project/components/Hide/preview.html ADDED
@@ -0,0 +1,16 @@
1
+ <!-- @dsCard group="Layout" height=120 -->
2
+ <!doctype html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="utf-8">
6
+ <title>Hide</title>
7
+ <style>
8
+ body { margin: 0; background: var(--nx-color-background); color: var(--nx-color-foreground); font-family: var(--font-sans); }
9
+ #root { padding: var(--nx-spacing-6); }
10
+ </style>
11
+ </head>
12
+ <body>
13
+ <div id="root"></div>
14
+ <script>(()=>{var H=Object.create;var x=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var K=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var l=(t,e)=>()=>{try{return e||t((e={exports:{}}).exports,e),e.exports}catch(r){throw e=0,r}};var D=(t,e,r,d)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of K(e))!N.call(t,o)&&o!==r&&x(t,o,{get:()=>e[o],enumerable:!(d=R(e,o))||d.enumerable});return t};var i=(t,e,r)=>(r=t!=null?H(P(t)):{},D(e||!t||!t.__esModule?x(r,"default",{value:t,enumerable:!0}):r,t));var u=l((j,f)=>{f.exports=window.Nxds});var p=l((k,w)=>{w.exports=window.React});var h=l((M,v)=>{v.exports={createRoot:window.ReactDOM.createRoot}});var m=i(u());var s=i(p());function g(t,e){return e===void 0?t:{...t,key:e}}function n(t,e,r){return(0,s.createElement)(t,g(e,r))}function a(t,e,r){let{children:d,...o}=e;return(0,s.createElement)(t,g(o,r),...d)}var y="nx:rounded-md nx:border-default nx:border-border-default nx:p-3 nx:text-foreground";function c(){return a("div",{className:"nx:flex nx:flex-col nx:gap-2",children:[n(m.Hide,{above:"lg",as:"div",children:a("div",{className:y,children:["Hidden when the viewport is ",n("strong",{children:"lg"})," (≥ 64rem) or wider."]})}),n(m.Hide,{below:"lg",as:"div",children:a("div",{className:y,children:["Hidden when the viewport is narrower than ",n("strong",{children:"lg"}),"."]})})]})}var E=i(p()),b=i(h());(0,b.createRoot)(document.getElementById("root")).render((0,E.createElement)(c));})();</script>
15
+ </body>
16
+ </html>
package/project/components/HoverCard/README.md ADDED
@@ -0,0 +1,77 @@
1
+ # HoverCard
2
+
3
+ HoverCard shows a preview card when the user hovers or focuses a trigger. Use it for profile and link previews. For content opened by a click, use Popover.
4
+
5
+ ## On the canvas
6
+
7
+ ```html
8
+ <x-import component-from-global-scope="Nxds.HoverCard">
9
+ <x-import component-from-global-scope="Nxds.HoverCardTrigger" as-child>
10
+ <x-import component-from-global-scope="Nxds.Button" variant="link">@nxds</x-import>
11
+ </x-import>
12
+ <x-import component-from-global-scope="Nxds.HoverCardContent">
13
+ <div class="nx:flex nx:flex-col nx:gap-1">
14
+ <p class="nx:typography-label-default nx:font-semibold nx:text-foreground">@nxds</p>
15
+ <p class="nx:typography-body-default nx:text-muted-foreground">The AI-native design system. Joined March 2026.</p>
16
+ </div>
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.HoverCard` — A card that opens when the user hovers or focuses the trigger.
26
+ - `Nxds.HoverCardContent` — The floating card.
27
+ - `Nxds.HoverCardTrigger` — The element that opens the card on hover or focus.
28
+
29
+ ## Props
30
+
31
+ ### HoverCard
32
+
33
+ | Prop | Type | Default | Control |
34
+ | --- | --- | --- | --- |
35
+ | `children` | `React.ReactNode` | | content |
36
+ | `open` | `boolean` | | toggle |
37
+ | `defaultOpen` | `boolean` | | toggle |
38
+ | `onOpenChange` | `(open: boolean) => void` | | none (function) |
39
+ | `openDelay` | `number` | | number |
40
+ | `closeDelay` | `number` | | number |
41
+
42
+ ### HoverCardContent
43
+
44
+ | Prop | Type | Default | Control |
45
+ | --- | --- | --- | --- |
46
+ | `forceMount` | `true` | | toggle |
47
+ | `onEscapeKeyDown` | `(event: KeyboardEvent) => void` | | none (function) |
48
+ | `onPointerDownOutside` | `(event: PointerDownOutsideEvent) => void` | | none (function) |
49
+ | `onFocusOutside` | `(event: FocusOutsideEvent) => void` | | none (function) |
50
+ | `onInteractOutside` | `(event: FocusOutsideEvent \| PointerDownOutsideEvent) => void` | | none (function) |
51
+ | `children` | `React.ReactNode` | | content |
52
+ | `className` | `string` | | text |
53
+ | `id` | `string` | | text |
54
+ | `align` | `"end" \| "center" \| "start"` | `"center"` | dropdown |
55
+ | `asChild` | `boolean` | | toggle |
56
+ | `side` | `"top" \| "bottom" \| "left" \| "right"` | | dropdown |
57
+ | `sideOffset` | `number` | `4` | number |
58
+ | `alignOffset` | `number` | | number |
59
+ | `arrowPadding` | `number` | | number |
60
+ | `avoidCollisions` | `boolean` | | toggle |
61
+ | `collisionBoundary` | `Element \| Boundary[]` | | none (object) |
62
+ | `collisionPadding` | `number \| Partial<Record<"top" \| "bottom" \| "left" \| "right", number>>` | | none (object) |
63
+ | `sticky` | `"partial" \| "always"` | | dropdown |
64
+ | `hideWhenDetached` | `boolean` | | toggle |
65
+ | `updatePositionStrategy` | `"always" \| "optimized"` | | dropdown |
66
+
67
+ ### HoverCardTrigger
68
+
69
+ | Prop | Type | Default | Control |
70
+ | --- | --- | --- | --- |
71
+ | `children` | `React.ReactNode` | | content |
72
+ | `className` | `string` | | text |
73
+ | `id` | `string` | | text |
74
+ | `target` | `HTMLAttributeAnchorTarget` | | none (object) |
75
+ | `type` | `string` | | text |
76
+ | `href` | `string` | | text |
77
+ | `asChild` | `boolean` | | toggle |
package/project/components/HoverCard/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>HoverCard</title>
7
+ <style>
8
+ body { margin: 0; background: var(--nx-color-background); color: var(--nx-color-foreground); font-family: var(--font-sans); }
9
+ #root { padding: var(--nx-spacing-6); }
10
+ </style>
11
+ </head>
12
+ <body>
13
+ <div id="root"></div>
14
+ <script>(()=>{var H=Object.create;var f=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var T=Object.getOwnPropertyNames;var K=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty;var s=(t,e)=>()=>{try{return e||t((e={exports:{}}).exports,e),e.exports}catch(r){throw e=0,r}};var N=(t,e,r,p)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of T(e))!P.call(t,o)&&o!==r&&f(t,o,{get:()=>e[o],enumerable:!(p=R(e,o))||p.enumerable});return t};var d=(t,e,r)=>(r=t!=null?H(K(t)):{},N(e||!t||!t.__esModule?f(r,"default",{value:t,enumerable:!0}):r,t));var m=s((B,u)=>{u.exports=window.Nxds});var l=s((D,y)=>{y.exports=window.React});var w=s((M,C)=>{C.exports={createRoot:window.ReactDOM.createRoot}});var v=d(m()),a=d(m());var i=d(l());function g(t,e){return e===void 0?t:{...t,key:e}}function n(t,e,r){return(0,i.createElement)(t,g(e,r))}function x(t,e,r){let{children:p,...o}=e;return(0,i.createElement)(t,g(o,r),...p)}function c(){return x(a.HoverCard,{children:[n(a.HoverCardTrigger,{asChild:!0,children:n(v.Button,{variant:"link",children:"@nxds"})}),n(a.HoverCardContent,{children:x("div",{className:"nx:flex nx:flex-col nx:gap-1",children:[n("p",{className:"nx:typography-label-default nx:font-semibold nx:text-foreground",children:"@nxds"}),n("p",{className:"nx:typography-body-default nx:text-muted-foreground",children:"The AI-native design system. Joined March 2026."})]})})]})}var h=d(l()),E=d(w());(0,E.createRoot)(document.getElementById("root")).render((0,h.createElement)(c));})();</script>
15
+ </body>
16
+ </html>
package/project/components/Input/README.md ADDED
@@ -0,0 +1,37 @@
1
+ # Input
2
+
3
+ Input collects one line of text. Give every input a visible label or an `aria-label`. For several lines of text, use Textarea.
4
+
5
+ ## On the canvas
6
+
7
+ ```html
8
+ <div class="nx:w-[400px]">
9
+ <x-import component-from-global-scope="Nxds.Input" type="email" placeholder="email@example.com"></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
+ ### Input
18
+
19
+ | Prop | Type | Default | Control |
20
+ | --- | --- | --- | --- |
21
+ | `children` | `React.ReactNode` | | content |
22
+ | `className` | `string` | | text |
23
+ | `id` | `string` | | text |
24
+ | `max` | `string \| number` | | none (object) |
25
+ | `min` | `string \| number` | | none (object) |
26
+ | `name` | `string` | | text |
27
+ | `type` | `HTMLInputTypeAttribute` | | none (object) |
28
+ | `step` | `string \| number` | | none (object) |
29
+ | `disabled` | `boolean` | | toggle |
30
+ | `value` | `string \| number \| readonly string[]` | | none (object) |
31
+ | `checked` | `boolean` | | toggle |
32
+ | `maxLength` | `number` | | number |
33
+ | `placeholder` | `string` | | text |
34
+ | `readOnly` | `boolean` | | toggle |
35
+ | `required` | `boolean` | | toggle |
36
+ | `variant` | `"ghost" \| "bordered" \| "borderless"` | `"bordered"` | dropdown |
37
+ | `size` | `"default" \| "sm" \| "lg"` | `"default"` | dropdown |
package/project/components/Input/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>Input</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 h=Object.getOwnPropertyNames;var T=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 I=(t,e,r,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of h(e))!g.call(t,o)&&o!==r&&d(t,o,{get:()=>e[o],enumerable:!(s=P(e,o))||s.enumerable});return t};var n=(t,e,r)=>(r=t!=null?K(T(t)):{},I(e||!t||!t.__esModule?d(r,"default",{value:t,enumerable:!0}):r,t));var u=p((D,l)=>{l.exports=window.Nxds});var m=p((N,y)=>{y.exports=window.React});var w=p((M,x)=>{x.exports={createRoot:window.ReactDOM.createRoot}});var f=n(u());var i=n(m());function j(t,e){return e===void 0?t:{...t,key:e}}function a(t,e,r){return(0,i.createElement)(t,j(e,r))}function c(){return a("div",{className:"nx:w-[400px]",children:a(f.Input,{type:"email",placeholder:"email@example.com"})})}var E=n(m()),R=n(w());(0,R.createRoot)(document.getElementById("root")).render((0,E.createElement)(c));})();</script>
15
+ </body>
16
+ </html>
package/project/components/InputGroup/README.md ADDED
@@ -0,0 +1,109 @@
1
+ # InputGroup
2
+
3
+ InputGroup frames an input or textarea with icons, text, buttons or key hints in one field. Use it for search boxes, URL prefixes and inline actions. For a plain field, use Input.
4
+
5
+ ## On the canvas
6
+
7
+ ```html
8
+ <x-import component-from-global-scope="Nxds.InputGroup" class-name="nx:w-80">
9
+ <x-import component-from-global-scope="Nxds.InputGroupAddon">
10
+ <x-import component-from-global-scope="Nxds.Icons.IconSearch" aria-hidden></x-import>
11
+ </x-import>
12
+ <x-import component-from-global-scope="Nxds.InputGroupInput" aria-label="Search" placeholder="Search…"></x-import>
13
+ </x-import>
14
+ ```
15
+
16
+ Attributes set props, kebab-case to camelCase. Element content becomes `children`. An attribute holds text, so a prop that takes an element, a function or an object has no attribute.
17
+
18
+ ## Parts
19
+
20
+ - `Nxds.InputGroup` — Frames an `InputGroupInput` or `InputGroupTextarea` with `InputGroupAddon`s
21
+ for icons, text, buttons or key hints.
22
+ - `Nxds.InputGroupAddon` — Slot for icons, text, buttons or key hints beside or above the control.
23
+ - `Nxds.InputGroupButton` — Compact button sized to fit inside an `InputGroupAddon`.
24
+ - `Nxds.InputGroupInput` — Text input for an `InputGroup`.
25
+ - `Nxds.InputGroupText` — Addon text, such as a unit, label or prefix.
26
+ - `Nxds.InputGroupTextarea` — Textarea for an `InputGroup`.
27
+
28
+ ## Props
29
+
30
+ ### InputGroup
31
+
32
+ | Prop | Type | Default | Control |
33
+ | --- | --- | --- | --- |
34
+ | `className` | `string` | | text |
35
+ | `id` | `string` | | text |
36
+ | `children` | `React.ReactNode` | | content |
37
+ | `variant` | `"bordered" \| "borderless"` | `"bordered"` | dropdown |
38
+
39
+ ### InputGroupAddon
40
+
41
+ | Prop | Type | Default | Control |
42
+ | --- | --- | --- | --- |
43
+ | `className` | `string` | | text |
44
+ | `id` | `string` | | text |
45
+ | `children` | `React.ReactNode` | | content |
46
+ | `align` | `"inline-start" \| "inline-end" \| "block-start" \| "block-end"` | `"inline-start"` | dropdown |
47
+
48
+ ### InputGroupButton
49
+
50
+ | Prop | Type | Default | Control |
51
+ | --- | --- | --- | --- |
52
+ | `children` | `React.ReactNode` | | content |
53
+ | `className` | `string` | | text |
54
+ | `id` | `string` | | text |
55
+ | `name` | `string` | | text |
56
+ | `type` | `"button" \| "submit" \| "reset"` | `"button"` | dropdown |
57
+ | `variant` | `"link" \| "default" \| "destructive" \| "error" \| "outline" \| "dashed" \| "secondary" \| "ghost"` | `"ghost"` | dropdown |
58
+ | `asChild` | `boolean` | `false` | toggle |
59
+ | `disabled` | `boolean` | | toggle |
60
+ | `value` | `string \| number \| readonly string[]` | | none (object) |
61
+ | `loading` | `boolean` | `false` | toggle |
62
+ | `startIcon` | `React.ReactNode` | | none (element) |
63
+ | `endIcon` | `React.ReactNode` | | none (element) |
64
+ | `size` | `"sm" \| "icon-sm" \| "xs" \| "icon-xs"` | `"xs"` | dropdown |
65
+
66
+ ### InputGroupInput
67
+
68
+ | Prop | Type | Default | Control |
69
+ | --- | --- | --- | --- |
70
+ | `children` | `React.ReactNode` | | content |
71
+ | `className` | `string` | | text |
72
+ | `id` | `string` | | text |
73
+ | `max` | `string \| number` | | none (object) |
74
+ | `min` | `string \| number` | | none (object) |
75
+ | `name` | `string` | | text |
76
+ | `type` | `HTMLInputTypeAttribute` | | none (object) |
77
+ | `step` | `string \| number` | | none (object) |
78
+ | `disabled` | `boolean` | | toggle |
79
+ | `value` | `string \| number \| readonly string[]` | | none (object) |
80
+ | `size` | `"default" \| "sm" \| "lg"` | `"default"` | dropdown |
81
+ | `checked` | `boolean` | | toggle |
82
+ | `maxLength` | `number` | | number |
83
+ | `placeholder` | `string` | | text |
84
+ | `readOnly` | `boolean` | | toggle |
85
+ | `required` | `boolean` | | toggle |
86
+
87
+ ### InputGroupText
88
+
89
+ | Prop | Type | Default | Control |
90
+ | --- | --- | --- | --- |
91
+ | `className` | `string` | | text |
92
+ | `id` | `string` | | text |
93
+ | `children` | `React.ReactNode` | | content |
94
+
95
+ ### InputGroupTextarea
96
+
97
+ | Prop | Type | Default | Control |
98
+ | --- | --- | --- | --- |
99
+ | `children` | `React.ReactNode` | | content |
100
+ | `className` | `string` | | text |
101
+ | `id` | `string` | | text |
102
+ | `name` | `string` | | text |
103
+ | `disabled` | `boolean` | | toggle |
104
+ | `value` | `string \| number \| readonly string[]` | | none (object) |
105
+ | `maxLength` | `number` | | number |
106
+ | `placeholder` | `string` | | text |
107
+ | `readOnly` | `boolean` | | toggle |
108
+ | `required` | `boolean` | | toggle |
109
+ | `rows` | `number` | | number |
package/project/components/InputGroup/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>InputGroup</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 S=Object.create;var s=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var D=Object.getOwnPropertyNames;var N=Object.getPrototypeOf,T=Object.prototype.hasOwnProperty;var a=(t,e)=>()=>{try{return e||t((e={exports:{}}).exports,e),e.exports}catch(r){throw e=0,r}};var j=(t,e,r,u)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of D(e))!T.call(t,o)&&o!==r&&s(t,o,{get:()=>e[o],enumerable:!(u=g(e,o))||u.enumerable});return t};var p=(t,e,r)=>(r=t!=null?S(N(t)):{},j(e||!t||!t.__esModule?s(r,"default",{value:t,enumerable:!0}):r,t));var f=a((b,l)=>{l.exports=window.Nxds.Icons});var y=a((k,x)=>{x.exports=window.Nxds});var i=a((B,w)=>{w.exports=window.React});var R=a((V,G)=>{G.exports={createRoot:window.ReactDOM.createRoot}});var E=p(f()),n=p(y());var c=p(i());function I(t,e){return e===void 0?t:{...t,key:e}}function d(t,e,r){return(0,c.createElement)(t,I(e,r))}function h(t,e,r){let{children:u,...o}=e;return(0,c.createElement)(t,I(o,r),...u)}function m(){return h(n.InputGroup,{className:"nx:w-80",children:[d(n.InputGroupAddon,{children:d(E.IconSearch,{"aria-hidden":!0})}),d(n.InputGroupInput,{"aria-label":"Search",placeholder:"Search…"})]})}var K=p(i()),P=p(R());(0,P.createRoot)(document.getElementById("root")).render((0,K.createElement)(m));})();</script>
15
+ </body>
16
+ </html>
package/project/components/InputOTP/README.md ADDED
@@ -0,0 +1,72 @@
1
+ # InputOTP
2
+
3
+ InputOTP collects a one-time code, with one slot per character. Use it for verification and sign-in codes. For other short text, use Input.
4
+
5
+ ## On the canvas
6
+
7
+ ```html
8
+ <x-import component-from-global-scope="Nxds.InputOTP" text-align="center" push-password-manager-strategy="none">InputOTP</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.InputOTP` — One-time code field that shows each character in its own slot.
16
+ - `Nxds.InputOTPGroup` — Row of adjacent slots.
17
+ - `Nxds.InputOTPSeparator` — Decorative dot between two `InputOTPGroup`s.
18
+ - `Nxds.InputOTPSlot` — One character cell.
19
+
20
+ ## Props
21
+
22
+ ### InputOTP
23
+
24
+ | Prop | Type | Default | Control |
25
+ | --- | --- | --- | --- |
26
+ | `onChange` | `(newValue: string) => unknown` | | none (function) |
27
+ | `className` | `string` | | text |
28
+ | `id` | `string` | | text |
29
+ | `max` | `string \| number` | | none (object) |
30
+ | `min` | `string \| number` | | none (object) |
31
+ | `name` | `string` | | text |
32
+ | `type` | `HTMLInputTypeAttribute` | | none (object) |
33
+ | `step` | `string \| number` | | none (object) |
34
+ | `disabled` | `boolean` | | toggle |
35
+ | `value` | `string` | | text |
36
+ | `checked` | `boolean` | | toggle |
37
+ | `maxLength` | `number` | | number |
38
+ | `placeholder` | `string` | | text |
39
+ | `readOnly` | `boolean` | | toggle |
40
+ | `required` | `boolean` | | toggle |
41
+ | `textAlign` | `"center" \| "left" \| "right"` | | dropdown |
42
+ | `onComplete` | `(...args: any[]) => unknown` | | none (function) |
43
+ | `pushPasswordManagerStrategy` | `"none" \| "increase-width"` | | dropdown |
44
+ | `pasteTransformer` | `(pasted: string) => string` | | none (function) |
45
+ | `containerClassName` | `string` | | text |
46
+ | `noScriptCSSFallback` | `string` | | text |
47
+ | `children` | `React.ReactNode` | | content |
48
+
49
+ ### InputOTPGroup
50
+
51
+ | Prop | Type | Default | Control |
52
+ | --- | --- | --- | --- |
53
+ | `className` | `string` | | text |
54
+ | `id` | `string` | | text |
55
+ | `children` | `React.ReactNode` | | content |
56
+
57
+ ### InputOTPSeparator
58
+
59
+ | Prop | Type | Default | Control |
60
+ | --- | --- | --- | --- |
61
+ | `className` | `string` | | text |
62
+ | `id` | `string` | | text |
63
+ | `children` | `React.ReactNode` | | content |
64
+
65
+ ### InputOTPSlot
66
+
67
+ | Prop | Type | Default | Control |
68
+ | --- | --- | --- | --- |
69
+ | `index` | `number` | | number |
70
+ | `className` | `string` | | text |
71
+ | `id` | `string` | | text |
72
+ | `children` | `React.ReactNode` | | content |
package/project/components/InputOTP/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>InputOTP</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 O=Object.create;var d=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var I=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,R=Object.prototype.hasOwnProperty;var i=(t,e)=>()=>{try{return e||t((e={exports:{}}).exports,e),e.exports}catch(r){throw e=0,r}};var h=(t,e,r,c)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of I(e))!R.call(t,o)&&o!==r&&d(t,o,{get:()=>e[o],enumerable:!(c=T(e,o))||c.enumerable});return t};var u=(t,e,r)=>(r=t!=null?O(g(t)):{},h(e||!t||!t.__esModule?d(r,"default",{value:t,enumerable:!0}):r,t));var f=i((j,l)=>{l.exports=window.Nxds});var m=i((k,y)=>{y.exports=window.React});var w=i((B,x)=>{x.exports={createRoot:window.ReactDOM.createRoot}});var n=u(f());var a=u(m());function K(t,e){return e===void 0?t:{...t,key:e}}function p(t,e,r){return(0,a.createElement)(t,K(e,r))}function D(){return p(n.InputOTPGroup,{children:Array.from({length:6},(t,e)=>p(n.InputOTPSlot,{index:e},e))})}function s(){return p(n.InputOTP,{maxLength:6,"aria-label":"One-time password",children:p(D,{})})}var P=u(m()),E=u(w());(0,E.createRoot)(document.getElementById("root")).render((0,P.createElement)(s));})();</script>
15
+ </body>
16
+ </html>
package/project/components/Item/README.md ADDED
@@ -0,0 +1,124 @@
1
+ # Item
2
+
3
+ Item lays out a row with media, a title, a description and actions. Use it for file lists, settings rows and search results. For tabular data, use Table.
4
+
5
+ ## On the canvas
6
+
7
+ ```html
8
+ <x-import component-from-global-scope="Nxds.Item" variant="outline" class-name="nx:w-96">
9
+ <x-import component-from-global-scope="Nxds.ItemMedia" variant="icon">
10
+ <x-import component-from-global-scope="Nxds.Icons.IconFile"></x-import>
11
+ </x-import>
12
+ <x-import component-from-global-scope="Nxds.ItemContent">
13
+ <x-import component-from-global-scope="Nxds.ItemTitle">Report.pdf</x-import>
14
+ <x-import component-from-global-scope="Nxds.ItemDescription">2.4 MB · edited 3 days ago</x-import>
15
+ </x-import>
16
+ <x-import component-from-global-scope="Nxds.ItemActions">
17
+ <x-import component-from-global-scope="Nxds.Button" variant="outline" size="sm">Open</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.Item` — Row with media, a title, a description and actions.
27
+ - `Nxds.ItemActions` — Trailing controls of the row, usually one or two buttons.
28
+ - `Nxds.ItemContent` — Column for the title and description.
29
+ - `Nxds.ItemDescription` — Supporting text under the title.
30
+ - `Nxds.ItemFooter` — Full-width row below the media and content.
31
+ - `Nxds.ItemGroup` — Vertical stack of related `Item`s, divided by `ItemSeparator`.
32
+ - `Nxds.ItemHeader` — Full-width row above the media and content, such as a label and a value.
33
+ - `Nxds.ItemMedia` — Leading visual of an item.
34
+ - `Nxds.ItemSeparator` — Horizontal rule between items in an `ItemGroup`.
35
+ - `Nxds.ItemTitle` — Primary label of the item.
36
+
37
+ ## Props
38
+
39
+ ### Item
40
+
41
+ | Prop | Type | Default | Control |
42
+ | --- | --- | --- | --- |
43
+ | `asChild` | `boolean` | `false` | toggle |
44
+ | `className` | `string` | | text |
45
+ | `id` | `string` | | text |
46
+ | `children` | `React.ReactNode` | | content |
47
+ | `variant` | `"default" \| "outline" \| "muted"` | `"default"` | dropdown |
48
+ | `size` | `"default" \| "sm"` | `"default"` | dropdown |
49
+
50
+ ### ItemActions
51
+
52
+ | Prop | Type | Default | Control |
53
+ | --- | --- | --- | --- |
54
+ | `className` | `string` | | text |
55
+ | `id` | `string` | | text |
56
+ | `children` | `React.ReactNode` | | content |
57
+
58
+ ### ItemContent
59
+
60
+ | Prop | Type | Default | Control |
61
+ | --- | --- | --- | --- |
62
+ | `className` | `string` | | text |
63
+ | `id` | `string` | | text |
64
+ | `children` | `React.ReactNode` | | content |
65
+
66
+ ### ItemDescription
67
+
68
+ | Prop | Type | Default | Control |
69
+ | --- | --- | --- | --- |
70
+ | `className` | `string` | | text |
71
+ | `id` | `string` | | text |
72
+ | `children` | `React.ReactNode` | | content |
73
+
74
+ ### ItemFooter
75
+
76
+ | Prop | Type | Default | Control |
77
+ | --- | --- | --- | --- |
78
+ | `className` | `string` | | text |
79
+ | `id` | `string` | | text |
80
+ | `children` | `React.ReactNode` | | content |
81
+
82
+ ### ItemGroup
83
+
84
+ | Prop | Type | Default | Control |
85
+ | --- | --- | --- | --- |
86
+ | `className` | `string` | | text |
87
+ | `id` | `string` | | text |
88
+ | `children` | `React.ReactNode` | | content |
89
+
90
+ ### ItemHeader
91
+
92
+ | Prop | Type | Default | Control |
93
+ | --- | --- | --- | --- |
94
+ | `className` | `string` | | text |
95
+ | `id` | `string` | | text |
96
+ | `children` | `React.ReactNode` | | content |
97
+
98
+ ### ItemMedia
99
+
100
+ | Prop | Type | Default | Control |
101
+ | --- | --- | --- | --- |
102
+ | `className` | `string` | | text |
103
+ | `id` | `string` | | text |
104
+ | `children` | `React.ReactNode` | | content |
105
+ | `variant` | `"image" \| "default" \| "icon"` | `"default"` | dropdown |
106
+
107
+ ### ItemSeparator
108
+
109
+ | Prop | Type | Default | Control |
110
+ | --- | --- | --- | --- |
111
+ | `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | dropdown |
112
+ | `decorative` | `boolean` | `true` | toggle |
113
+ | `children` | `React.ReactNode` | | content |
114
+ | `className` | `string` | | text |
115
+ | `id` | `string` | | text |
116
+ | `asChild` | `boolean` | | toggle |
117
+
118
+ ### ItemTitle
119
+
120
+ | Prop | Type | Default | Control |
121
+ | --- | --- | --- | --- |
122
+ | `className` | `string` | | text |
123
+ | `id` | `string` | | text |
124
+ | `children` | `React.ReactNode` | | content |
package/project/components/Item/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>Item</title>
7
+ <style>
8
+ body { margin: 0; background: var(--nx-color-background); color: var(--nx-color-foreground); font-family: var(--font-sans); }
9
+ #root { padding: var(--nx-spacing-6); }
10
+ </style>
11
+ </head>
12
+ <body>
13
+ <div id="root"></div>
14
+ <script>(()=>{var B=Object.create;var f=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var s=(t,e)=>()=>{try{return e||t((e={exports:{}}).exports,e),e.exports}catch(n){throw e=0,n}};var j=(t,e,n,p)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of h(e))!N.call(t,r)&&r!==n&&f(t,r,{get:()=>e[r],enumerable:!(p=M(e,r))||p.enumerable});return t};var m=(t,e,n)=>(n=t!=null?B(v(t)):{},j(e||!t||!t.__esModule?f(n,"default",{value:t,enumerable:!0}):n,t));var y=s((C,I)=>{I.exports=window.Nxds.Icons});var c=s((F,x)=>{x.exports=window.Nxds});var d=s((O,w)=>{w.exports=window.React});var P=s((V,K)=>{K.exports={createRoot:window.ReactDOM.createRoot}});var R=m(y()),D=m(c()),o=m(c());var a=m(d());function E(t,e){return e===void 0?t:{...t,key:e}}function i(t,e,n){return(0,a.createElement)(t,E(e,n))}function u(t,e,n){let{children:p,...r}=e;return(0,a.createElement)(t,E(r,n),...p)}function l(){return u(o.Item,{variant:"outline",className:"nx:w-96",children:[i(o.ItemMedia,{variant:"icon",children:i(R.IconFile,{})}),u(o.ItemContent,{children:[i(o.ItemTitle,{children:"Report.pdf"}),i(o.ItemDescription,{children:"2.4 MB · edited 3 days ago"})]}),i(o.ItemActions,{children:i(D.Button,{variant:"outline",size:"sm",children:"Open"})})]})}var T=m(d()),g=m(P());(0,g.createRoot)(document.getElementById("root")).render((0,T.createElement)(l));})();</script>
15
+ </body>
16
+ </html>