@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/Kbd/README.md ADDED
@@ -0,0 +1,40 @@
1
+ # Kbd
2
+
3
+ Kbd shows a keyboard key, such as `Esc` or `⌘`. Use it to document shortcuts. For a key combination, wrap several Kbd elements in KbdGroup.
4
+
5
+ ## On the canvas
6
+
7
+ ```html
8
+ <div class="nx:flex nx:items-center nx:gap-4">
9
+ <x-import component-from-global-scope="Nxds.Kbd">⌘</x-import>
10
+ <x-import component-from-global-scope="Nxds.KbdGroup">
11
+ <x-import component-from-global-scope="Nxds.Kbd">⌘</x-import>
12
+ <x-import component-from-global-scope="Nxds.Kbd">K</x-import>
13
+ </x-import>
14
+ </div>
15
+ ```
16
+
17
+ Attributes set props, kebab-case to camelCase. Element content becomes `children`. An attribute holds text, so a prop that takes an element, a function or an object has no attribute.
18
+
19
+ ## Parts
20
+
21
+ - `Nxds.Kbd` — Key cap for one key of a shortcut, such as `⌘` or `Esc`.
22
+ - `Nxds.KbdGroup` — Row of `Kbd` key caps shown as one combination, such as `⌘ K`.
23
+
24
+ ## Props
25
+
26
+ ### Kbd
27
+
28
+ | Prop | Type | Default | Control |
29
+ | --- | --- | --- | --- |
30
+ | `className` | `string` | | text |
31
+ | `id` | `string` | | text |
32
+ | `children` | `React.ReactNode` | | content |
33
+
34
+ ### KbdGroup
35
+
36
+ | Prop | Type | Default | Control |
37
+ | --- | --- | --- | --- |
38
+ | `className` | `string` | | text |
39
+ | `id` | `string` | | text |
40
+ | `children` | `React.ReactNode` | | content |
package/project/components/Kbd/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>Kbd</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 f=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var D=Object.getPrototypeOf,T=Object.prototype.hasOwnProperty;var s=(t,e)=>()=>{try{return e||t((e={exports:{}}).exports,e),e.exports}catch(r){throw e=0,r}};var j=(t,e,r,d)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of h(e))!T.call(t,o)&&o!==r&&f(t,o,{get:()=>e[o],enumerable:!(d=g(e,o))||d.enumerable});return t};var p=(t,e,r)=>(r=t!=null?P(D(t)):{},j(e||!t||!t.__esModule?f(r,"default",{value:t,enumerable:!0}):r,t));var x=s((G,l)=>{l.exports=window.Nxds});var c=s((N,y)=>{y.exports=window.React});var E=s((I,w)=>{w.exports={createRoot:window.ReactDOM.createRoot}});var n=p(x());var i=p(c());function K(t,e){return e===void 0?t:{...t,key:e}}function m(t,e,r){return(0,i.createElement)(t,K(e,r))}function a(t,e,r){let{children:d,...o}=e;return(0,i.createElement)(t,K(o,r),...d)}function u(){return a("div",{className:"nx:flex nx:items-center nx:gap-4",children:[m(n.Kbd,{children:"⌘"}),a(n.KbdGroup,{children:[m(n.Kbd,{children:"⌘"}),m(n.Kbd,{children:"K"})]})]})}var b=p(c()),R=p(E());(0,R.createRoot)(document.getElementById("root")).render((0,b.createElement)(u));})();</script>
15
+ </body>
16
+ </html>
package/project/components/Label/README.md ADDED
@@ -0,0 +1,25 @@
1
+ # Label
2
+
3
+ Label names a form control. Set `htmlFor` to the control's `id` so a click on the label focuses or toggles the control. Inside a Field, use FieldLabel.
4
+
5
+ ## On the canvas
6
+
7
+ ```html
8
+ <div class="nx:flex nx:flex-col nx:gap-2">
9
+ <x-import component-from-global-scope="Nxds.Label" html-for="email">Email</x-import>
10
+ <x-import component-from-global-scope="Nxds.Input" id="email" type="email" placeholder="you@example.com"></x-import>
11
+ </div>
12
+ ```
13
+
14
+ 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.
15
+
16
+ ## Props
17
+
18
+ ### Label
19
+
20
+ | Prop | Type | Default | Control |
21
+ | --- | --- | --- | --- |
22
+ | `children` | `React.ReactNode` | | content |
23
+ | `className` | `string` | | text |
24
+ | `id` | `string` | | text |
25
+ | `asChild` | `boolean` | | toggle |
package/project/components/Label/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>Label</title>
7
+ <style>
8
+ body { margin: 0; background: var(--nx-color-background); color: var(--nx-color-foreground); font-family: var(--font-sans); }
9
+ #root { padding: var(--nx-spacing-6); }
10
+ </style>
11
+ </head>
12
+ <body>
13
+ <div id="root"></div>
14
+ <script>(()=>{var g=Object.create;var s=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var I=Object.getOwnPropertyNames;var L=Object.getPrototypeOf,T=Object.prototype.hasOwnProperty;var i=(t,e)=>()=>{try{return e||t((e={exports:{}}).exports,e),e.exports}catch(o){throw e=0,o}};var j=(t,e,o,m)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of I(e))!T.call(t,r)&&r!==o&&s(t,r,{get:()=>e[r],enumerable:!(m=b(e,r))||m.enumerable});return t};var n=(t,e,o)=>(o=t!=null?g(L(t)):{},j(e||!t||!t.__esModule?s(o,"default",{value:t,enumerable:!0}):o,t));var l=i((D,u)=>{u.exports=window.Nxds});var a=i((F,f)=>{f.exports=window.React});var R=i((M,h)=>{h.exports={createRoot:window.ReactDOM.createRoot}});var w=n(l()),E=n(l());var p=n(a());function x(t,e){return e===void 0?t:{...t,key:e}}function c(t,e,o){return(0,p.createElement)(t,x(e,o))}function y(t,e,o){let{children:m,...r}=e;return(0,p.createElement)(t,x(r,o),...m)}function d(){return y("div",{className:"nx:flex nx:flex-col nx:gap-2",children:[c(E.Label,{htmlFor:"email",children:"Email"}),c(w.Input,{id:"email",type:"email",placeholder:"you@example.com"})]})}var K=n(a()),P=n(R());(0,P.createRoot)(document.getElementById("root")).render((0,K.createElement)(d));})();</script>
15
+ </body>
16
+ </html>
package/project/components/Marker/README.md ADDED
@@ -0,0 +1,48 @@
1
+ # Marker
2
+
3
+ Marker labels a point in a list, feed or message stream with muted text and an optional icon. Use it for dates, edit notes and progress updates. For a rule with no label, use Separator.
4
+
5
+ ## On the canvas
6
+
7
+ ```html
8
+ <x-import component-from-global-scope="Nxds.Marker">
9
+ <x-import component-from-global-scope="Nxds.MarkerContent">Edited 2 minutes ago</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
+ ## Parts
16
+
17
+ - `Nxds.Marker` — Quiet annotation row with an optional icon, for lists, feeds and message
18
+ streams.
19
+ - `Nxds.MarkerContent` — Label text of the Marker.
20
+ - `Nxds.MarkerIcon` — Decorative leading icon.
21
+
22
+ ## Props
23
+
24
+ ### Marker
25
+
26
+ | Prop | Type | Default | Control |
27
+ | --- | --- | --- | --- |
28
+ | `asChild` | `boolean` | `false` | toggle |
29
+ | `className` | `string` | | text |
30
+ | `id` | `string` | | text |
31
+ | `children` | `React.ReactNode` | | content |
32
+ | `variant` | `"separator" \| "default" \| "border"` | `"default"` | dropdown |
33
+
34
+ ### MarkerContent
35
+
36
+ | Prop | Type | Default | Control |
37
+ | --- | --- | --- | --- |
38
+ | `className` | `string` | | text |
39
+ | `id` | `string` | | text |
40
+ | `children` | `React.ReactNode` | | content |
41
+
42
+ ### MarkerIcon
43
+
44
+ | Prop | Type | Default | Control |
45
+ | --- | --- | --- | --- |
46
+ | `className` | `string` | | text |
47
+ | `id` | `string` | | text |
48
+ | `children` | `React.ReactNode` | | content |
package/project/components/Marker/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>Marker</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 M=Object.create;var u=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var K=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var a=(t,e)=>()=>{try{return e||t((e={exports:{}}).exports,e),e.exports}catch(r){throw e=0,r}};var h=(t,e,r,d)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of K(e))!g.call(t,o)&&o!==r&&u(t,o,{get:()=>e[o],enumerable:!(d=R(e,o))||d.enumerable});return t};var n=(t,e,r)=>(r=t!=null?M(P(t)):{},h(e||!t||!t.__esModule?u(r,"default",{value:t,enumerable:!0}):r,t));var y=a((j,f)=>{f.exports=window.Nxds});var i=a((C,l)=>{l.exports=window.React});var w=a((N,x)=>{x.exports={createRoot:window.ReactDOM.createRoot}});var p=n(y());var m=n(i());function D(t,e){return e===void 0?t:{...t,key:e}}function s(t,e,r){return(0,m.createElement)(t,D(e,r))}function c(){return s(p.Marker,{children:s(p.MarkerContent,{children:"Edited 2 minutes ago"})})}var E=n(i()),k=n(w());(0,k.createRoot)(document.getElementById("root")).render((0,E.createElement)(c));})();</script>
15
+ </body>
16
+ </html>
package/project/components/Menubar/README.md ADDED
@@ -0,0 +1,266 @@
1
+ # Menubar
2
+
3
+ Menubar shows a row of menus that stays on screen, like a desktop app. Use it for app-level commands grouped under File, Edit and View. For one menu on a button, use DropdownMenu.
4
+
5
+ ## On the canvas
6
+
7
+ ```html
8
+ <x-import component-from-global-scope="Nxds.Menubar">
9
+ <x-import component-from-global-scope="Nxds.MenubarMenu">
10
+ <x-import component-from-global-scope="Nxds.MenubarTrigger">File</x-import>
11
+ <x-import component-from-global-scope="Nxds.MenubarContent">
12
+ <x-import component-from-global-scope="Nxds.MenubarItem">
13
+ New Tab
14
+ <x-import component-from-global-scope="Nxds.MenubarShortcut">⌘T</x-import>
15
+ </x-import>
16
+ <x-import component-from-global-scope="Nxds.MenubarItem">
17
+ New Window
18
+ <x-import component-from-global-scope="Nxds.MenubarShortcut">⌘N</x-import>
19
+ </x-import>
20
+ <x-import component-from-global-scope="Nxds.MenubarItem">New Incognito Window</x-import>
21
+ <x-import component-from-global-scope="Nxds.MenubarSeparator"></x-import>
22
+ <x-import component-from-global-scope="Nxds.MenubarItem">Print</x-import>
23
+ </x-import>
24
+ </x-import>
25
+ <x-import component-from-global-scope="Nxds.MenubarMenu">
26
+ <x-import component-from-global-scope="Nxds.MenubarTrigger">Edit</x-import>
27
+ <x-import component-from-global-scope="Nxds.MenubarContent">
28
+ <x-import component-from-global-scope="Nxds.MenubarItem">Undo</x-import>
29
+ <x-import component-from-global-scope="Nxds.MenubarItem">Redo</x-import>
30
+ </x-import>
31
+ </x-import>
32
+ <x-import component-from-global-scope="Nxds.MenubarMenu">
33
+ <x-import component-from-global-scope="Nxds.MenubarTrigger">View</x-import>
34
+ <x-import component-from-global-scope="Nxds.MenubarContent">
35
+ <x-import component-from-global-scope="Nxds.MenubarItem">Reload</x-import>
36
+ <x-import component-from-global-scope="Nxds.MenubarItem">Toggle Fullscreen</x-import>
37
+ </x-import>
38
+ </x-import>
39
+ </x-import>
40
+ ```
41
+
42
+ 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.
43
+
44
+ ## Parts
45
+
46
+ - `Nxds.Menubar` — Horizontal bar of menus, like the menu bar in a desktop app.
47
+ - `Nxds.MenubarCheckboxItem` — Menu item that toggles on and off.
48
+ - `Nxds.MenubarContent` — Container for the items of a menu.
49
+ - `Nxds.MenubarGroup` — Groups related menu items together.
50
+ - `Nxds.MenubarItem` — Single action in a menu.
51
+ - `Nxds.MenubarLabel` — Heading for a group of menu items.
52
+ - `Nxds.MenubarMenu` — Groups a trigger with its content.
53
+ - `Nxds.MenubarPortal` — Renders menu content in a portal on `document.body`.
54
+ - `Nxds.MenubarRadioGroup` — Groups radio items together.
55
+ - `Nxds.MenubarRadioItem` — Menu item for picking one option from a `MenubarRadioGroup`.
56
+ - `Nxds.MenubarSeparator` — Divider between menu items.
57
+ - `Nxds.MenubarShortcut` — Keyboard shortcut hint at the end of an item.
58
+ - `Nxds.MenubarSub` — Contains a submenu.
59
+ - `Nxds.MenubarSubContent` — Container for the items of a submenu.
60
+ - `Nxds.MenubarSubTrigger` — Item that opens a submenu.
61
+ - `Nxds.MenubarTrigger` — Top-level button in the bar.
62
+
63
+ ## Props
64
+
65
+ ### Menubar
66
+
67
+ | Prop | Type | Default | Control |
68
+ | --- | --- | --- | --- |
69
+ | `value` | `string` | | text |
70
+ | `defaultValue` | `string` | | text |
71
+ | `onValueChange` | `(value: string) => void` | | none (function) |
72
+ | `loop` | `boolean` | | toggle |
73
+ | `dir` | `"ltr" \| "rtl"` | | dropdown |
74
+ | `children` | `React.ReactNode` | | content |
75
+ | `className` | `string` | | text |
76
+ | `id` | `string` | | text |
77
+ | `asChild` | `boolean` | | toggle |
78
+
79
+ ### MenubarCheckboxItem
80
+
81
+ | Prop | Type | Default | Control |
82
+ | --- | --- | --- | --- |
83
+ | `children` | `React.ReactNode` | | content |
84
+ | `onSelect` | `(event: Event) => void` | | none (function) |
85
+ | `className` | `string` | | text |
86
+ | `id` | `string` | | text |
87
+ | `asChild` | `boolean` | | toggle |
88
+ | `disabled` | `boolean` | | toggle |
89
+ | `checked` | `"indeterminate" \| boolean` | | dropdown |
90
+ | `textValue` | `string` | | text |
91
+ | `onCheckedChange` | `(checked: boolean) => void` | | none (function) |
92
+
93
+ ### MenubarContent
94
+
95
+ | Prop | Type | Default | Control |
96
+ | --- | --- | --- | --- |
97
+ | `children` | `React.ReactNode` | | content |
98
+ | `className` | `string` | | text |
99
+ | `id` | `string` | | text |
100
+ | `align` | `"end" \| "center" \| "start"` | `"start"` | dropdown |
101
+ | `asChild` | `boolean` | | toggle |
102
+ | `forceMount` | `true` | | toggle |
103
+ | `onEscapeKeyDown` | `(event: KeyboardEvent) => void` | | none (function) |
104
+ | `onPointerDownOutside` | `(event: PointerDownOutsideEvent) => void` | | none (function) |
105
+ | `onFocusOutside` | `(event: FocusOutsideEvent) => void` | | none (function) |
106
+ | `onInteractOutside` | `(event: FocusOutsideEvent \| PointerDownOutsideEvent) => void` | | none (function) |
107
+ | `onCloseAutoFocus` | `(event: Event) => void` | | none (function) |
108
+ | `loop` | `boolean` | | toggle |
109
+ | `side` | `"top" \| "bottom" \| "left" \| "right"` | | dropdown |
110
+ | `sideOffset` | `number` | `8` | number |
111
+ | `alignOffset` | `number` | `-4` | number |
112
+ | `arrowPadding` | `number` | | number |
113
+ | `avoidCollisions` | `boolean` | | toggle |
114
+ | `collisionBoundary` | `Element \| Boundary[]` | | none (object) |
115
+ | `collisionPadding` | `number \| Partial<Record<"top" \| "bottom" \| "left" \| "right", number>>` | | none (object) |
116
+ | `sticky` | `"partial" \| "always"` | | dropdown |
117
+ | `hideWhenDetached` | `boolean` | | toggle |
118
+ | `updatePositionStrategy` | `"always" \| "optimized"` | | dropdown |
119
+
120
+ ### MenubarGroup
121
+
122
+ | Prop | Type | Default | Control |
123
+ | --- | --- | --- | --- |
124
+ | `children` | `React.ReactNode` | | content |
125
+ | `className` | `string` | | text |
126
+ | `id` | `string` | | text |
127
+ | `asChild` | `boolean` | | toggle |
128
+
129
+ ### MenubarItem
130
+
131
+ | Prop | Type | Default | Control |
132
+ | --- | --- | --- | --- |
133
+ | `inset` | `boolean` | | toggle |
134
+ | `children` | `React.ReactNode` | | content |
135
+ | `onSelect` | `(event: Event) => void` | | none (function) |
136
+ | `className` | `string` | | text |
137
+ | `id` | `string` | | text |
138
+ | `asChild` | `boolean` | | toggle |
139
+ | `disabled` | `boolean` | | toggle |
140
+ | `textValue` | `string` | | text |
141
+ | `variant` | `"default" \| "destructive"` | `"default"` | dropdown |
142
+
143
+ ### MenubarLabel
144
+
145
+ | Prop | Type | Default | Control |
146
+ | --- | --- | --- | --- |
147
+ | `inset` | `boolean` | | toggle |
148
+ | `children` | `React.ReactNode` | | content |
149
+ | `className` | `string` | | text |
150
+ | `id` | `string` | | text |
151
+ | `asChild` | `boolean` | | toggle |
152
+
153
+ ### MenubarMenu
154
+
155
+ | Prop | Type | Default | Control |
156
+ | --- | --- | --- | --- |
157
+ | `value` | `string` | | text |
158
+ | `children` | `React.ReactNode` | | content |
159
+ | `__scopeMenubar` | `{ [scopeName: string]: Context<any>[]; }` | | none (object) |
160
+
161
+ ### MenubarPortal
162
+
163
+ | Prop | Type | Default | Control |
164
+ | --- | --- | --- | --- |
165
+ | `children` | `React.ReactNode` | | content |
166
+ | `container` | `Element \| DocumentFragment` | | none (object) |
167
+ | `forceMount` | `true` | | toggle |
168
+
169
+ ### MenubarRadioGroup
170
+
171
+ | Prop | Type | Default | Control |
172
+ | --- | --- | --- | --- |
173
+ | `children` | `React.ReactNode` | | content |
174
+ | `className` | `string` | | text |
175
+ | `id` | `string` | | text |
176
+ | `asChild` | `boolean` | | toggle |
177
+ | `value` | `string` | | text |
178
+ | `onValueChange` | `(value: string) => void` | | none (function) |
179
+
180
+ ### MenubarRadioItem
181
+
182
+ | Prop | Type | Default | Control |
183
+ | --- | --- | --- | --- |
184
+ | `children` | `React.ReactNode` | | content |
185
+ | `onSelect` | `(event: Event) => void` | | none (function) |
186
+ | `className` | `string` | | text |
187
+ | `id` | `string` | | text |
188
+ | `asChild` | `boolean` | | toggle |
189
+ | `disabled` | `boolean` | | toggle |
190
+ | `value` | `string` | | text |
191
+ | `textValue` | `string` | | text |
192
+
193
+ ### MenubarSeparator
194
+
195
+ | Prop | Type | Default | Control |
196
+ | --- | --- | --- | --- |
197
+ | `children` | `React.ReactNode` | | content |
198
+ | `className` | `string` | | text |
199
+ | `id` | `string` | | text |
200
+ | `asChild` | `boolean` | | toggle |
201
+
202
+ ### MenubarShortcut
203
+
204
+ | Prop | Type | Default | Control |
205
+ | --- | --- | --- | --- |
206
+ | `className` | `string` | | text |
207
+ | `id` | `string` | | text |
208
+ | `children` | `React.ReactNode` | | content |
209
+
210
+ ### MenubarSub
211
+
212
+ | Prop | Type | Default | Control |
213
+ | --- | --- | --- | --- |
214
+ | `children` | `React.ReactNode` | | content |
215
+ | `open` | `boolean` | | toggle |
216
+ | `defaultOpen` | `boolean` | | toggle |
217
+ | `onOpenChange` | `(open: boolean) => void` | | none (function) |
218
+
219
+ ### MenubarSubContent
220
+
221
+ | Prop | Type | Default | Control |
222
+ | --- | --- | --- | --- |
223
+ | `children` | `React.ReactNode` | | content |
224
+ | `className` | `string` | | text |
225
+ | `id` | `string` | | text |
226
+ | `asChild` | `boolean` | | toggle |
227
+ | `forceMount` | `true` | | toggle |
228
+ | `onEscapeKeyDown` | `(event: KeyboardEvent) => void` | | none (function) |
229
+ | `onPointerDownOutside` | `(event: PointerDownOutsideEvent) => void` | | none (function) |
230
+ | `onFocusOutside` | `(event: FocusOutsideEvent) => void` | | none (function) |
231
+ | `onInteractOutside` | `(event: FocusOutsideEvent \| PointerDownOutsideEvent) => void` | | none (function) |
232
+ | `loop` | `boolean` | | toggle |
233
+ | `sideOffset` | `number` | | number |
234
+ | `alignOffset` | `number` | | number |
235
+ | `arrowPadding` | `number` | | number |
236
+ | `avoidCollisions` | `boolean` | | toggle |
237
+ | `collisionBoundary` | `Element \| Boundary[]` | | none (object) |
238
+ | `collisionPadding` | `number \| Partial<Record<"top" \| "bottom" \| "left" \| "right", number>>` | | none (object) |
239
+ | `sticky` | `"partial" \| "always"` | | dropdown |
240
+ | `hideWhenDetached` | `boolean` | | toggle |
241
+ | `updatePositionStrategy` | `"always" \| "optimized"` | | dropdown |
242
+
243
+ ### MenubarSubTrigger
244
+
245
+ | Prop | Type | Default | Control |
246
+ | --- | --- | --- | --- |
247
+ | `inset` | `boolean` | | toggle |
248
+ | `children` | `React.ReactNode` | | content |
249
+ | `className` | `string` | | text |
250
+ | `id` | `string` | | text |
251
+ | `asChild` | `boolean` | | toggle |
252
+ | `disabled` | `boolean` | | toggle |
253
+ | `textValue` | `string` | | text |
254
+
255
+ ### MenubarTrigger
256
+
257
+ | Prop | Type | Default | Control |
258
+ | --- | --- | --- | --- |
259
+ | `children` | `React.ReactNode` | | content |
260
+ | `className` | `string` | | text |
261
+ | `id` | `string` | | text |
262
+ | `name` | `string` | | text |
263
+ | `type` | `"button" \| "submit" \| "reset"` | | dropdown |
264
+ | `asChild` | `boolean` | | toggle |
265
+ | `disabled` | `boolean` | | toggle |
266
+ | `value` | `string \| number \| readonly string[]` | | none (object) |
package/project/components/Menubar/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>Menubar</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 E=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty;var m=(n,r)=>()=>{try{return r||n((r={exports:{}}).exports,r),r.exports}catch(o){throw r=0,o}};var K=(n,r,o,M)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of R(r))!P.call(n,a)&&a!==o&&d(n,a,{get:()=>r[a],enumerable:!(M=E(r,a))||M.enumerable});return n};var b=(n,r,o)=>(o=n!=null?T(h(n)):{},K(r||!n||!n.__esModule?d(o,"default",{value:n,enumerable:!0}):o,n));var l=m((S,s)=>{s.exports=window.Nxds});var c=m((C,w)=>{w.exports=window.React});var y=m((V,g)=>{g.exports={createRoot:window.ReactDOM.createRoot}});var e=b(l());var i=b(c());function f(n,r){return r===void 0?n:{...n,key:r}}function t(n,r,o){return(0,i.createElement)(n,f(r,o))}function u(n,r,o){let{children:M,...a}=r;return(0,i.createElement)(n,f(a,o),...M)}function p(){return u(e.Menubar,{children:[u(e.MenubarMenu,{children:[t(e.MenubarTrigger,{children:"File"}),u(e.MenubarContent,{children:[u(e.MenubarItem,{children:["New Tab",t(e.MenubarShortcut,{children:"⌘T"})]}),u(e.MenubarItem,{children:["New Window",t(e.MenubarShortcut,{children:"⌘N"})]}),t(e.MenubarItem,{children:"New Incognito Window"}),t(e.MenubarSeparator,{}),t(e.MenubarItem,{children:"Print"})]})]}),u(e.MenubarMenu,{children:[t(e.MenubarTrigger,{children:"Edit"}),u(e.MenubarContent,{children:[t(e.MenubarItem,{children:"Undo"}),t(e.MenubarItem,{children:"Redo"})]})]}),u(e.MenubarMenu,{children:[t(e.MenubarTrigger,{children:"View"}),u(e.MenubarContent,{children:[t(e.MenubarItem,{children:"Reload"}),t(e.MenubarItem,{children:"Toggle Fullscreen"})]})]})]})}var I=b(c()),x=b(y());(0,x.createRoot)(document.getElementById("root")).render((0,I.createElement)(p));})();</script>
15
+ </body>
16
+ </html>
package/project/components/Message/README.md ADDED
@@ -0,0 +1,78 @@
1
+ # Message
2
+
3
+ Message lays out one conversation turn, with an avatar, a header, a body and a footer. Use it for chat and assistant threads, with Bubble or Attachment as the body. Message holds no chat state, so your app owns the messages and MessageScroller handles scrolling.
4
+
5
+ ## On the canvas
6
+
7
+ ```html
8
+ <x-import component-from-global-scope="Nxds.Message" align="end">Message</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.Message` — Layout for one conversation turn, with an avatar beside the header, body
16
+ and footer.
17
+ - `Nxds.MessageAvatar` — Avatar of the speaker, pinned to the top of the turn.
18
+ - `Nxds.MessageContent` — Column beside the avatar for the header, body and footer of the turn.
19
+ - `Nxds.MessageFooter` — Line below the turn for delivery status, time or actions.
20
+ - `Nxds.MessageGroup` — Vertical stack of conversation turns.
21
+ - `Nxds.MessageHeader` — Line above the turn for the speaker name, time or role.
22
+
23
+ ## Props
24
+
25
+ ### Message
26
+
27
+ | Prop | Type | Default | Control |
28
+ | --- | --- | --- | --- |
29
+ | `align` | `"end" \| "start"` | `"start"` | dropdown |
30
+ | `className` | `string` | | text |
31
+ | `id` | `string` | | text |
32
+ | `children` | `React.ReactNode` | | content |
33
+
34
+ ### MessageAvatar
35
+
36
+ | Prop | Type | Default | Control |
37
+ | --- | --- | --- | --- |
38
+ | `placeholder` | `boolean` | `false` | toggle |
39
+ | `ring` | `boolean` | `false` | toggle |
40
+ | `children` | `React.ReactNode` | | content |
41
+ | `className` | `string` | | text |
42
+ | `id` | `string` | | text |
43
+ | `asChild` | `boolean` | | toggle |
44
+ | `size` | `"sm" \| "lg" \| "2xs" \| "xs" \| "md" \| "xl" \| "2xl" \| "3xl" \| "4xl"` | `"sm"` | dropdown |
45
+ | `shape` | `"circle" \| "rounded"` | `"circle"` | dropdown |
46
+
47
+ ### MessageContent
48
+
49
+ | Prop | Type | Default | Control |
50
+ | --- | --- | --- | --- |
51
+ | `className` | `string` | | text |
52
+ | `id` | `string` | | text |
53
+ | `children` | `React.ReactNode` | | content |
54
+
55
+ ### MessageFooter
56
+
57
+ | Prop | Type | Default | Control |
58
+ | --- | --- | --- | --- |
59
+ | `className` | `string` | | text |
60
+ | `id` | `string` | | text |
61
+ | `children` | `React.ReactNode` | | content |
62
+
63
+ ### MessageGroup
64
+
65
+ | Prop | Type | Default | Control |
66
+ | --- | --- | --- | --- |
67
+ | `announce` | `boolean` | `false` | toggle |
68
+ | `className` | `string` | | text |
69
+ | `id` | `string` | | text |
70
+ | `children` | `React.ReactNode` | | content |
71
+
72
+ ### MessageHeader
73
+
74
+ | Prop | Type | Default | Control |
75
+ | --- | --- | --- | --- |
76
+ | `className` | `string` | | text |
77
+ | `id` | `string` | | text |
78
+ | `children` | `React.ReactNode` | | content |
package/project/components/Message/preview.html ADDED
@@ -0,0 +1,16 @@
1
+ <!-- @dsCard group="Messaging" height=120 -->
2
+ <!doctype html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="utf-8">
6
+ <title>Message</title>
7
+ <style>
8
+ body { margin: 0; background: var(--nx-color-background); color: var(--nx-color-foreground); font-family: var(--font-sans); }
9
+ #root { padding: var(--nx-spacing-6); }
10
+ </style>
11
+ </head>
12
+ <body>
13
+ <div id="root"></div>
14
+ <script>(()=>{var R=Object.create;var d=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var C=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var i=(t,e)=>()=>{try{return e||t((e={exports:{}}).exports,e),e.exports}catch(r){throw e=0,r}};var K=(t,e,r,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of k(e))!F.call(t,a)&&a!==r&&d(t,a,{get:()=>e[a],enumerable:!(l=h(e,a))||l.enumerable});return t};var s=(t,e,r)=>(r=t!=null?R(C(t)):{},K(e||!t||!t.__esModule?d(r,"default",{value:t,enumerable:!0}):r,t));var m=i((D,y)=>{y.exports=window.Nxds});var c=i((T,M)=>{M.exports=window.React});var E=i((N,b)=>{b.exports={createRoot:window.ReactDOM.createRoot}});var w=s(m()),u=s(m()),o=s(m());var p=s(c());function x(t,e){return e===void 0?t:{...t,key:e}}function n(t,e,r){return(0,p.createElement)(t,x(e,r))}function f(t,e,r){let{children:l,...a}=e;return(0,p.createElement)(t,x(a,r),...l)}var P="nx:w-full nx:max-w-lg";function g(){return n(o.MessageGroup,{className:P,children:f(o.Message,{children:[n(o.MessageAvatar,{children:n(w.AvatarFallback,{children:"AB"})}),f(o.MessageContent,{children:[n(o.MessageHeader,{children:"Ana Bianchi"}),n(u.Bubble,{children:n(u.BubbleContent,{children:"Can you take a look at the failing run?"})}),n(o.MessageFooter,{children:"09:14"})]})]})})}var B=s(c()),A=s(E());(0,A.createRoot)(document.getElementById("root")).render((0,B.createElement)(g));})();</script>
15
+ </body>
16
+ </html>
package/project/components/MessageScroller/README.md ADDED
@@ -0,0 +1,84 @@
1
+ # MessageScroller
2
+
3
+ MessageScroller scrolls a message stream and keeps the latest turn in view. Use it for chat and assistant threads that grow as new turns arrive. For other scrolling content, use ScrollArea.
4
+
5
+ ## On the canvas
6
+
7
+ ```html
8
+ <x-import component-from-global-scope="Nxds.MessageScroller" type="auto" dir="ltr">MessageScroller</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.MessageScroller` — Scroll container that keeps the latest turn in view until the reader
16
+ scrolls up.
17
+ - `Nxds.MessageScrollerButton` — Button that jumps to the latest turn, or the oldest with `direction="start"`.
18
+ - `Nxds.MessageScrollerContent` — Column of turns inside the viewport.
19
+ - `Nxds.MessageScrollerItem` — One entry in the stream.
20
+ - `Nxds.MessageScrollerProvider` — Holds the scroll state of the stream.
21
+ - `Nxds.MessageScrollerViewport` — Scrolling region of the stream, focusable so keyboard users can scroll it.
22
+
23
+ ## Props
24
+
25
+ ### MessageScroller
26
+
27
+ | Prop | Type | Default | Control |
28
+ | --- | --- | --- | --- |
29
+ | `type` | `"auto" \| "hover" \| "always" \| "scroll"` | | dropdown |
30
+ | `dir` | `"ltr" \| "rtl"` | | dropdown |
31
+ | `scrollHideDelay` | `number` | | number |
32
+ | `children` | `React.ReactNode` | | content |
33
+ | `className` | `string` | | text |
34
+ | `id` | `string` | | text |
35
+ | `asChild` | `boolean` | | toggle |
36
+
37
+ ### MessageScrollerButton
38
+
39
+ | Prop | Type | Default | Control |
40
+ | --- | --- | --- | --- |
41
+ | `className` | `string` | | text |
42
+ | `id` | `string` | | text |
43
+ | `name` | `string` | | text |
44
+ | `type` | `"button" \| "submit" \| "reset"` | `"button"` | dropdown |
45
+ | `variant` | `"link" \| "default" \| "destructive" \| "error" \| "outline" \| "dashed" \| "secondary" \| "ghost"` | `"outline"` | dropdown |
46
+ | `disabled` | `boolean` | | toggle |
47
+ | `value` | `string \| number \| readonly string[]` | | none (object) |
48
+ | `size` | `"default" \| "sm" \| "lg" \| "icon-sm" \| "icon" \| "icon-lg"` | `"icon-sm"` | dropdown |
49
+ | `loading` | `boolean` | `false` | toggle |
50
+ | `startIcon` | `React.ReactNode` | | none (element) |
51
+ | `endIcon` | `React.ReactNode` | | none (element) |
52
+ | `direction` | `"end" \| "start"` | `"end"` | dropdown |
53
+
54
+ ### MessageScrollerContent
55
+
56
+ | Prop | Type | Default | Control |
57
+ | --- | --- | --- | --- |
58
+ | `className` | `string` | | text |
59
+ | `id` | `string` | | text |
60
+ | `children` | `React.ReactNode` | | content |
61
+
62
+ ### MessageScrollerItem
63
+
64
+ | Prop | Type | Default | Control |
65
+ | --- | --- | --- | --- |
66
+ | `className` | `string` | | text |
67
+ | `id` | `string` | | text |
68
+ | `children` | `React.ReactNode` | | content |
69
+
70
+ ### MessageScrollerProvider
71
+
72
+ | Prop | Type | Default | Control |
73
+ | --- | --- | --- | --- |
74
+ | `children` | `React.ReactNode` | | content |
75
+
76
+ ### MessageScrollerViewport
77
+
78
+ | Prop | Type | Default | Control |
79
+ | --- | --- | --- | --- |
80
+ | `nonce` | `string` | | text |
81
+ | `children` | `React.ReactNode` | | content |
82
+ | `className` | `string` | | text |
83
+ | `id` | `string` | | text |
84
+ | `asChild` | `boolean` | | toggle |
package/project/components/MessageScroller/preview.html ADDED
@@ -0,0 +1,16 @@
1
+ <!-- @dsCard group="Messaging" height=360 -->
2
+ <!doctype html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="utf-8">
6
+ <title>MessageScroller</title>
7
+ <style>
8
+ body { margin: 0; background: var(--nx-color-background); color: var(--nx-color-foreground); font-family: var(--font-sans); }
9
+ #root { padding: var(--nx-spacing-6); }
10
+ </style>
11
+ </head>
12
+ <body>
13
+ <div id="root"></div>
14
+ <script>(()=>{var B=Object.create;var f=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var C=Object.getPrototypeOf,R=Object.prototype.hasOwnProperty;var g=(r,e)=>()=>{try{return e||r((e={exports:{}}).exports,e),e.exports}catch(n){throw e=0,n}};var k=(r,e,n,m)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of h(e))!R.call(r,a)&&a!==n&&f(r,a,{get:()=>e[a],enumerable:!(m=P(e,a))||m.enumerable});return r};var l=(r,e,n)=>(n=r!=null?B(C(r)):{},k(e||!r||!r.__esModule?f(n,"default",{value:r,enumerable:!0}):n,r));var i=g((V,x)=>{x.exports=window.Nxds});var p=g((I,b)=>{b.exports=window.React});var E=g((N,w)=>{w.exports={createRoot:window.ReactDOM.createRoot}});var S=l(i()),d=l(i()),t=l(i()),s=l(i());var u=l(p());function y(r,e){return e===void 0?r:{...r,key:e}}function o(r,e,n){return(0,u.createElement)(r,y(e,n))}function c(r,e,n){let{children:m,...a}=e;return(0,u.createElement)(r,y(a,n),...m)}var F="nx:h-80 nx:w-full nx:max-w-lg nx:rounded-md nx:border-default nx:border-border-default nx:bg-background";function K({index:r}){let e=r%2===1;return o(s.MessageGroup,{children:c(s.Message,{align:e?"end":"start",children:[o(s.MessageAvatar,{children:o(S.AvatarFallback,{children:e?"YOU":"AB"})}),c(s.MessageContent,{children:[o(d.Bubble,{variant:e?"primary":"muted",children:c(d.BubbleContent,{children:["Turn ",r+1," in the transcript."]})}),c(s.MessageFooter,{children:["09:",String(10+r).padStart(2,"0")]})]})]})})}function M(){return o(t.MessageScrollerProvider,{children:c(t.MessageScroller,{className:F,children:[o(t.MessageScrollerViewport,{children:o(t.MessageScrollerContent,{children:Array.from({length:14},(r,e)=>o(t.MessageScrollerItem,{children:o(K,{index:e})},e))})}),o(t.MessageScrollerButton,{direction:"start"}),o(t.MessageScrollerButton,{direction:"end"})]})})}var v=l(p()),A=l(E());(0,A.createRoot)(document.getElementById("root")).render((0,v.createElement)(M));})();</script>
15
+ </body>
16
+ </html>