@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/Cover/preview.html ADDED
@@ -0,0 +1,101 @@
1
+ <!-- @dsCard height=288 -->
2
+ <!doctype html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="utf-8" />
6
+ <title>nxds</title>
7
+ <style>
8
+ body {
9
+ margin: 0;
10
+ background: var(--nx-color-background);
11
+ }
12
+ .cover {
13
+ position: relative;
14
+ width: 960px;
15
+ height: 288px;
16
+ overflow: hidden;
17
+ background: var(--nx-color-background);
18
+ }
19
+ .cover svg {
20
+ position: absolute;
21
+ inset: 0;
22
+ }
23
+ .text {
24
+ position: absolute;
25
+ left: 48px;
26
+ bottom: 40px;
27
+ max-width: 440px;
28
+ }
29
+ .name {
30
+ margin: 0;
31
+ font-family: var(--font-sans);
32
+ font-size: 120px;
33
+ font-weight: 700;
34
+ line-height: 0.92;
35
+ letter-spacing: -0.04em;
36
+ color: var(--nx-color-foreground);
37
+ }
38
+ .tagline {
39
+ margin: 16px 0 0;
40
+ font-family: var(--font-sans);
41
+ font-size: 14px;
42
+ line-height: 20px;
43
+ color: var(--nx-color-muted-foreground);
44
+ }
45
+ .tile {
46
+ rx: var(--nx-radius-md);
47
+ }
48
+ .ink {
49
+ fill: var(--nx-color-primary-background);
50
+ }
51
+ .well {
52
+ fill: var(--nx-color-muted);
53
+ }
54
+ .rail {
55
+ fill: var(--nx-color-control-background);
56
+ }
57
+ .edge {
58
+ fill: var(--nx-color-border-default);
59
+ }
60
+ .signal {
61
+ fill: var(--nx-color-information-background);
62
+ }
63
+ </style>
64
+ </head>
65
+ <body>
66
+ <div class="cover">
67
+ <svg viewBox="0 0 960 288" width="960" height="288" aria-hidden="true">
68
+ <!--
69
+ blocks: nx-color-primary-background 184x120 slab and 120x56 bar; nx-color-information-background 56x120; nx-color-muted, nx-color-control-background and nx-color-border-default 56x56 tiles
70
+ arrangement: a flush modular grid right of x = 496, merged two- and three-wide like the components' grouped controls
71
+ pattern: tiles cut by the radius scale, from "geometric, modular, dense UI": nxds is a dense product UI built from grouped controls
72
+ scales: 56px tiles on a 64px pitch (nx-spacing-14 + nx-spacing-2), corners nx-radius-md
73
+ -->
74
+ <rect class="tile ink" x="496" y="24" width="184" height="120" />
75
+ <rect class="tile well" x="688" y="24" width="56" height="56" />
76
+ <rect class="tile rail" x="752" y="24" width="56" height="56" />
77
+ <rect class="tile well" x="816" y="24" width="56" height="56" />
78
+ <rect class="tile edge" x="880" y="24" width="56" height="56" />
79
+ <rect class="tile rail" x="688" y="88" width="120" height="56" />
80
+ <rect class="tile signal" x="816" y="88" width="56" height="120" />
81
+ <rect class="tile well" x="880" y="88" width="56" height="56" />
82
+ <rect class="tile well" x="496" y="152" width="56" height="56" />
83
+ <rect class="tile edge" x="560" y="152" width="56" height="56" />
84
+ <rect class="tile rail" x="624" y="152" width="56" height="56" />
85
+ <rect class="tile well" x="688" y="152" width="56" height="56" />
86
+ <rect class="tile well" x="752" y="152" width="56" height="56" />
87
+ <rect class="tile rail" x="880" y="152" width="56" height="56" />
88
+ <rect class="tile rail" x="496" y="216" width="56" height="56" />
89
+ <rect class="tile well" x="560" y="216" width="56" height="56" />
90
+ <rect class="tile ink" x="624" y="216" width="120" height="56" />
91
+ <rect class="tile well" x="752" y="216" width="56" height="56" />
92
+ <rect class="tile edge" x="816" y="216" width="56" height="56" />
93
+ <rect class="tile well" x="880" y="216" width="56" height="56" />
94
+ </svg>
95
+ <div class="text">
96
+ <p class="name">nxds</p>
97
+ <p class="tagline">Calm, dense product UI, themed by tokens.</p>
98
+ </div>
99
+ </div>
100
+ </body>
101
+ </html>
package/project/components/DatePicker/README.md ADDED
@@ -0,0 +1,104 @@
1
+ # DatePicker
2
+
3
+ DatePicker shows a calendar grid for picking one date, a range or several dates. Install `react-day-picker` in your app to use it. If your Next.js app uses Cache Components, render DatePicker inside `<Suspense>` so it can read today's date.
4
+
5
+ ## On the canvas
6
+
7
+ ```html
8
+ <x-import component-from-global-scope="Nxds.DatePicker" mode="single" caption-layout="dropdown"></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.DatePicker` — A calendar grid for picking one date, a range or several dates.
16
+ - `Nxds.DatePickerDayButton` — The button for each day.
17
+
18
+ ## Props
19
+
20
+ ### DatePicker
21
+
22
+ | Prop | Type | Default | Control |
23
+ | --- | --- | --- | --- |
24
+ | `mode` | `"single" \| "multiple" \| "range"` | | dropdown |
25
+ | `required` | `boolean` | | toggle |
26
+ | `className` | `string` | | text |
27
+ | `classNames` | `Partial<ClassNames> & Partial<DeprecatedUI<string>>` | | none (object) |
28
+ | `modifiersClassNames` | `ModifiersClassNames` | | none (object) |
29
+ | `style` | `React.CSSProperties` | | none (object) |
30
+ | `styles` | `Partial<Styles> & Partial<DeprecatedUI<React.CSSProperties>>` | | none (object) |
31
+ | `modifiersStyles` | `ModifiersStyles` | | none (object) |
32
+ | `id` | `string` | | text |
33
+ | `defaultMonth` | `Date` | | none (object) |
34
+ | `month` | `Date` | | none (object) |
35
+ | `numberOfMonths` | `number` | | number |
36
+ | `startMonth` | `Date` | | none (object) |
37
+ | `fromDate` | `Date` | | none (object) |
38
+ | `fromMonth` | `Date` | | none (object) |
39
+ | `fromYear` | `number` | | number |
40
+ | `endMonth` | `Date` | | none (object) |
41
+ | `toDate` | `Date` | | none (object) |
42
+ | `toMonth` | `Date` | | none (object) |
43
+ | `toYear` | `number` | | number |
44
+ | `pagedNavigation` | `boolean` | | toggle |
45
+ | `reverseMonths` | `boolean` | | toggle |
46
+ | `hideNavigation` | `boolean` | | toggle |
47
+ | `disableNavigation` | `boolean` | | toggle |
48
+ | `captionLayout` | `"label" \| "dropdown" \| "dropdown-months" \| "dropdown-years"` | `"label"` | dropdown |
49
+ | `reverseYears` | `boolean` | | toggle |
50
+ | `navLayout` | `"around" \| "after"` | | dropdown |
51
+ | `fixedWeeks` | `boolean` | | toggle |
52
+ | `hideWeekdays` | `boolean` | | toggle |
53
+ | `showOutsideDays` | `boolean` | `true` | toggle |
54
+ | `showWeekNumber` | `boolean` | | toggle |
55
+ | `animate` | `boolean` | | toggle |
56
+ | `broadcastCalendar` | `boolean` | | toggle |
57
+ | `ISOWeek` | `boolean` | | toggle |
58
+ | `timeZone` | `string` | | text |
59
+ | `noonSafe` | `boolean` | | toggle |
60
+ | `components` | `Partial<CustomComponents>` | | none (object) |
61
+ | `footer` | `React.ReactNode` | | none (element) |
62
+ | `autoFocus` | `boolean` | | toggle |
63
+ | `initialFocus` | `boolean` | | toggle |
64
+ | `disabled` | `Matcher \| Matcher[]` | | none (object) |
65
+ | `hidden` | `Matcher \| Matcher[]` | | none (object) |
66
+ | `today` | `Date` | | none (object) |
67
+ | `modifiers` | `Record<string, Matcher \| Matcher[] \| undefined>` | | none (object) |
68
+ | `labels` | `Partial<Labels>` | | none (object) |
69
+ | `formatters` | `Partial<Formatters>` | | none (object) |
70
+ | `dir` | `string` | | text |
71
+ | `aria-label` | `string` | | text |
72
+ | `aria-labelledby` | `string` | | text |
73
+ | `role` | `"dialog" \| "application"` | | dropdown |
74
+ | `nonce` | `string` | | text |
75
+ | `title` | `string` | | text |
76
+ | `lang` | `string` | | text |
77
+ | `locale` | `Partial<DayPickerLocale>` | | none (object) |
78
+ | `numerals` | `"latn" \| "arab" \| "arabext" \| "deva" \| "geez" \| "beng" \| "guru" \| "gujr" \| "orya" \| "tamldec" \| "telu" \| "knda" \| "mlym" \| "thai" \| "mymr" \| "khmr" \| "laoo" \| "tibt"` | | dropdown |
79
+ | `weekStartsOn` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6` | | dropdown |
80
+ | `firstWeekContainsDate` | `1 \| 4` | | dropdown |
81
+ | `useAdditionalWeekYearTokens` | `boolean` | | toggle |
82
+ | `useAdditionalDayOfYearTokens` | `boolean` | | toggle |
83
+ | `onMonthChange` | `MonthChangeEventHandler` | | none (object) |
84
+ | `onNextClick` | `MonthChangeEventHandler` | | none (object) |
85
+ | `onPrevClick` | `MonthChangeEventHandler` | | none (object) |
86
+ | `onWeekNumberClick` | `any` | | none (object) |
87
+ | `dateLib` | `Partial<DateLib>` | | none (object) |
88
+ | `buttonVariant` | `"link" \| "default" \| "destructive" \| "error" \| "outline" \| "dashed" \| "secondary" \| "ghost"` | `"ghost"` | dropdown |
89
+ | `cellSize` | `"default" \| "large" \| "xlarge"` | `"default"` | dropdown |
90
+ | `renderDayContent` | `(props: DatePickerDayContentProps) => React.ReactNode` | | none (element) |
91
+
92
+ ### DatePickerDayButton
93
+
94
+ | Prop | Type | Default | Control |
95
+ | --- | --- | --- | --- |
96
+ | `day` | `CalendarDay` | | none (object) |
97
+ | `modifiers` | `Modifiers` | | none (object) |
98
+ | `disabled` | `boolean` | | toggle |
99
+ | `name` | `string` | | text |
100
+ | `type` | `"button" \| "submit" \| "reset"` | | dropdown |
101
+ | `value` | `string \| number \| readonly string[]` | | none (object) |
102
+ | `className` | `string` | | text |
103
+ | `id` | `string` | | text |
104
+ | `children` | `React.ReactNode` | | content |
package/project/components/DatePicker/preview.html ADDED
@@ -0,0 +1,16 @@
1
+ <!-- @dsCard group="Forms" height=360 -->
2
+ <!doctype html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="utf-8">
6
+ <title>DatePicker</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 D=Object.create;var l=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var K=Object.getOwnPropertyNames;var N=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var s=(t,e)=>()=>{try{return e||t((e={exports:{}}).exports,e),e.exports}catch(r){throw e=0,r}};var h=(t,e,r,f)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of K(e))!g.call(t,n)&&n!==r&&l(t,n,{get:()=>e[n],enumerable:!(f=P(e,n))||f.enumerable});return t};var o=(t,e,r)=>(r=t!=null?D(N(t)):{},h(e||!t||!t.__esModule?l(r,"default",{value:t,enumerable:!0}):r,t));var c=s((j,u)=>{u.exports=window.Nxds});var i=s((F,y)=>{y.exports=window.React});var E=s((I,x)=>{x.exports={createRoot:window.ReactDOM.createRoot}});var m=o(c()),w=o(c());var p=o(i());function T(t,e){return e===void 0?t:{...t,key:e}}function a(t,e,r){return(0,p.createElement)(t,T(e,r))}var k=new Date(2025,0,1);function d(){return a(m.Card,{className:"nx:w-fit",children:a(m.CardContent,{className:"nx:p-0",children:a(w.DatePicker,{mode:"single",defaultMonth:k,selected:new Date(2025,0,15)})})})}var R=o(i()),C=o(E());(0,C.createRoot)(document.getElementById("root")).render((0,R.createElement)(d));})();</script>
15
+ </body>
16
+ </html>
package/project/components/DescriptionList/README.md ADDED
@@ -0,0 +1,57 @@
1
+ # DescriptionList
2
+
3
+ DescriptionList shows metadata as term and value pairs.
4
+
5
+ - Wrap each term and its value in a DescriptionListItem.
6
+ - Format values and missing-value text yourself.
7
+ - Put actions inside DescriptionListDescription.
8
+ - Rows stack in narrow containers and form two columns when the list has room.
9
+
10
+ ## On the canvas
11
+
12
+ ```html
13
+ <x-import component-from-global-scope="Nxds.DescriptionList">DescriptionList</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.DescriptionList` — Shows metadata as term and value rows.
21
+ - `Nxds.DescriptionListDescription`
22
+ - `Nxds.DescriptionListItem` — Groups one term and its description.
23
+ - `Nxds.DescriptionListTerm`
24
+
25
+ ## Props
26
+
27
+ ### DescriptionList
28
+
29
+ | Prop | Type | Default | Control |
30
+ | --- | --- | --- | --- |
31
+ | `className` | `string` | | text |
32
+ | `id` | `string` | | text |
33
+ | `children` | `React.ReactNode` | | content |
34
+
35
+ ### DescriptionListDescription
36
+
37
+ | Prop | Type | Default | Control |
38
+ | --- | --- | --- | --- |
39
+ | `className` | `string` | | text |
40
+ | `id` | `string` | | text |
41
+ | `children` | `React.ReactNode` | | content |
42
+
43
+ ### DescriptionListItem
44
+
45
+ | Prop | Type | Default | Control |
46
+ | --- | --- | --- | --- |
47
+ | `className` | `string` | | text |
48
+ | `id` | `string` | | text |
49
+ | `children` | `React.ReactNode` | | content |
50
+
51
+ ### DescriptionListTerm
52
+
53
+ | Prop | Type | Default | Control |
54
+ | --- | --- | --- | --- |
55
+ | `className` | `string` | | text |
56
+ | `id` | `string` | | text |
57
+ | `children` | `React.ReactNode` | | content |
package/project/components/DescriptionList/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>DescriptionList</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 f=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var K=Object.getPrototypeOf,I=Object.prototype.hasOwnProperty;var a=(t,e)=>()=>{try{return e||t((e={exports:{}}).exports,e),e.exports}catch(r){throw e=0,r}};var g=(t,e,r,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of h(e))!I.call(t,o)&&o!==r&&f(t,o,{get:()=>e[o],enumerable:!(s=T(e,o))||s.enumerable});return t};var p=(t,e,r)=>(r=t!=null?R(K(t)):{},g(e||!t||!t.__esModule?f(r,"default",{value:t,enumerable:!0}):r,t));var d=a((S,l)=>{l.exports=window.Nxds});var D=a((k,y)=>{y.exports=window.React});var w=a((O,x)=>{x.exports={createRoot:window.ReactDOM.createRoot}});var i=p(d());var c=p(D());function L(t,e){return e===void 0?t:{...t,key:e}}function n(t,e,r){return(0,c.createElement)(t,L(e,r))}function m(t,e,r){let{children:s,...o}=e;return(0,c.createElement)(t,L(o,r),...s)}function j(){return m(i.DescriptionList,{children:[m(i.DescriptionListItem,{children:[n(i.DescriptionListTerm,{children:"Name"}),n(i.DescriptionListDescription,{children:"Priya Shah"})]}),m(i.DescriptionListItem,{children:[n(i.DescriptionListTerm,{children:"Email"}),n(i.DescriptionListDescription,{children:"priya@example.com"})]})]})}function u(){return n(j,{})}var E=p(D()),P=p(w());(0,P.createRoot)(document.getElementById("root")).render((0,E.createElement)(u));})();</script>
15
+ </body>
16
+ </html>
package/project/components/Dialog/README.md ADDED
@@ -0,0 +1,166 @@
1
+ # Dialog
2
+
3
+ Dialog opens a modal for a task that interrupts the page. The user can dismiss it without making a choice.
4
+
5
+ - If the user must confirm or cancel a consequential action, use AlertDialog.
6
+ - For a panel at the screen edge, such as settings or filters, use Sheet.
7
+ - For a mobile-style panel with drag-to-dismiss, use Drawer.
8
+
9
+ ## On the canvas
10
+
11
+ ```html
12
+ <x-import component-from-global-scope="Nxds.Dialog">
13
+ <x-import component-from-global-scope="Nxds.DialogTrigger" as-child>
14
+ <x-import component-from-global-scope="Nxds.Button" variant="outline">Open Dialog</x-import>
15
+ </x-import>
16
+ <x-import component-from-global-scope="Nxds.DialogContent">
17
+ <x-import component-from-global-scope="Nxds.DialogHeader">
18
+ <x-import component-from-global-scope="Nxds.DialogTitle">Dialog Title</x-import>
19
+ <x-import component-from-global-scope="Nxds.DialogDescription">This is a basic dialog with a title and description.</x-import>
20
+ </x-import>
21
+ <x-import component-from-global-scope="Nxds.DialogBody">
22
+ <p class="nx:typography-body-default nx:text-foreground">Dialog content goes here. You can add any content you need.</p>
23
+ </x-import>
24
+ <x-import component-from-global-scope="Nxds.DialogFooter">
25
+ <x-import component-from-global-scope="Nxds.DialogClose" as-child>
26
+ <x-import component-from-global-scope="Nxds.Button" variant="outline">Cancel</x-import>
27
+ </x-import>
28
+ <x-import component-from-global-scope="Nxds.Button">Save</x-import>
29
+ </x-import>
30
+ </x-import>
31
+ </x-import>
32
+ ```
33
+
34
+ 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.
35
+
36
+ ## Parts
37
+
38
+ - `Nxds.Dialog` — Root component for the dialog.
39
+ - `Nxds.DialogBody` — Holds the dialog's main content.
40
+ - `Nxds.DialogClose` — Closes the dialog.
41
+ - `Nxds.DialogContent` — The dialog panel.
42
+ - `Nxds.DialogDescription` — Supporting text that explains the dialog.
43
+ - `Nxds.DialogFooter` — Holds the dialog's action buttons.
44
+ - `Nxds.DialogHeader` — Holds the dialog title and description.
45
+ - `Nxds.DialogOverlay` — Semi-transparent backdrop behind the dialog.
46
+ - `Nxds.DialogPortal` — Renders the dialog content into `document.body`.
47
+ - `Nxds.DialogTitle` — The dialog's title.
48
+ - `Nxds.DialogTrigger` — Opens the dialog.
49
+
50
+ ## Props
51
+
52
+ ### Dialog
53
+
54
+ | Prop | Type | Default | Control |
55
+ | --- | --- | --- | --- |
56
+ | `children` | `React.ReactNode` | | content |
57
+ | `open` | `boolean` | | toggle |
58
+ | `defaultOpen` | `boolean` | | toggle |
59
+ | `onOpenChange` | `(open: boolean) => void` | | none (function) |
60
+ | `modal` | `boolean` | | toggle |
61
+
62
+ ### DialogBody
63
+
64
+ | Prop | Type | Default | Control |
65
+ | --- | --- | --- | --- |
66
+ | `className` | `string` | | text |
67
+ | `id` | `string` | | text |
68
+ | `children` | `React.ReactNode` | | content |
69
+
70
+ ### DialogClose
71
+
72
+ | Prop | Type | Default | Control |
73
+ | --- | --- | --- | --- |
74
+ | `children` | `React.ReactNode` | | content |
75
+ | `className` | `string` | | text |
76
+ | `id` | `string` | | text |
77
+ | `name` | `string` | | text |
78
+ | `type` | `"button" \| "submit" \| "reset"` | | dropdown |
79
+ | `asChild` | `boolean` | | toggle |
80
+ | `disabled` | `boolean` | | toggle |
81
+ | `value` | `string \| number \| readonly string[]` | | none (object) |
82
+
83
+ ### DialogContent
84
+
85
+ | Prop | Type | Default | Control |
86
+ | --- | --- | --- | --- |
87
+ | `showCloseButton` | `boolean` | `true` | toggle |
88
+ | `title` | `React.ReactNode` | | none (element) |
89
+ | `description` | `React.ReactNode` | | none (element) |
90
+ | `body` | `React.ReactNode` | | none (element) |
91
+ | `children` | `React.ReactNode` | | content |
92
+ | `className` | `string` | | text |
93
+ | `id` | `string` | | text |
94
+ | `asChild` | `boolean` | | toggle |
95
+ | `forceMount` | `true` | | toggle |
96
+ | `onEscapeKeyDown` | `(event: KeyboardEvent) => void` | | none (function) |
97
+ | `onPointerDownOutside` | `(event: PointerDownOutsideEvent) => void` | | none (function) |
98
+ | `onFocusOutside` | `(event: FocusOutsideEvent) => void` | | none (function) |
99
+ | `onInteractOutside` | `(event: FocusOutsideEvent \| PointerDownOutsideEvent) => void` | | none (function) |
100
+ | `onOpenAutoFocus` | `(event: Event) => void` | | none (function) |
101
+ | `onCloseAutoFocus` | `(event: Event) => void` | | none (function) |
102
+
103
+ ### DialogDescription
104
+
105
+ | Prop | Type | Default | Control |
106
+ | --- | --- | --- | --- |
107
+ | `children` | `React.ReactNode` | | content |
108
+ | `className` | `string` | | text |
109
+ | `id` | `string` | | text |
110
+ | `asChild` | `boolean` | | toggle |
111
+
112
+ ### DialogFooter
113
+
114
+ | Prop | Type | Default | Control |
115
+ | --- | --- | --- | --- |
116
+ | `className` | `string` | | text |
117
+ | `id` | `string` | | text |
118
+ | `children` | `React.ReactNode` | | content |
119
+
120
+ ### DialogHeader
121
+
122
+ | Prop | Type | Default | Control |
123
+ | --- | --- | --- | --- |
124
+ | `className` | `string` | | text |
125
+ | `id` | `string` | | text |
126
+ | `children` | `React.ReactNode` | | content |
127
+
128
+ ### DialogOverlay
129
+
130
+ | Prop | Type | Default | Control |
131
+ | --- | --- | --- | --- |
132
+ | `forceMount` | `true` | | toggle |
133
+ | `children` | `React.ReactNode` | | content |
134
+ | `className` | `string` | | text |
135
+ | `id` | `string` | | text |
136
+ | `asChild` | `boolean` | | toggle |
137
+
138
+ ### DialogPortal
139
+
140
+ | Prop | Type | Default | Control |
141
+ | --- | --- | --- | --- |
142
+ | `children` | `React.ReactNode` | | content |
143
+ | `container` | `Element \| DocumentFragment` | | none (object) |
144
+ | `forceMount` | `true` | | toggle |
145
+
146
+ ### DialogTitle
147
+
148
+ | Prop | Type | Default | Control |
149
+ | --- | --- | --- | --- |
150
+ | `children` | `React.ReactNode` | | content |
151
+ | `className` | `string` | | text |
152
+ | `id` | `string` | | text |
153
+ | `asChild` | `boolean` | | toggle |
154
+
155
+ ### DialogTrigger
156
+
157
+ | Prop | Type | Default | Control |
158
+ | --- | --- | --- | --- |
159
+ | `children` | `React.ReactNode` | | content |
160
+ | `className` | `string` | | text |
161
+ | `id` | `string` | | text |
162
+ | `name` | `string` | | text |
163
+ | `type` | `"button" \| "submit" \| "reset"` | | dropdown |
164
+ | `asChild` | `boolean` | | toggle |
165
+ | `disabled` | `boolean` | | toggle |
166
+ | `value` | `string \| number \| readonly string[]` | | none (object) |
package/project/components/Dialog/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>Dialog</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 m=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var K=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty;var s=(o,e)=>()=>{try{return e||o((e={exports:{}}).exports,e),e.exports}catch(n){throw e=0,n}};var v=(o,e,n,g)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of R(e))!P.call(o,r)&&r!==n&&m(o,r,{get:()=>e[r],enumerable:!(g=C(e,r))||g.enumerable});return o};var a=(o,e,n)=>(n=o!=null?B(K(o)):{},v(e||!o||!o.__esModule?m(n,"default",{value:o,enumerable:!0}):n,o));var D=s((b,y)=>{y.exports=window.Nxds});var c=s((j,f)=>{f.exports=window.React});var h=s((S,w)=>{w.exports={createRoot:window.ReactDOM.createRoot}});var p=a(D()),t=a(D());var d=a(c());function x(o,e){return e===void 0?o:{...o,key:e}}function i(o,e,n){return(0,d.createElement)(o,x(e,n))}function l(o,e,n){let{children:g,...r}=e;return(0,d.createElement)(o,x(r,n),...g)}function u(){return l(t.Dialog,{children:[i(t.DialogTrigger,{asChild:!0,children:i(p.Button,{variant:"outline",children:"Open Dialog"})}),l(t.DialogContent,{children:[l(t.DialogHeader,{children:[i(t.DialogTitle,{children:"Dialog Title"}),i(t.DialogDescription,{children:"This is a basic dialog with a title and description."})]}),i(t.DialogBody,{children:i("p",{className:"nx:typography-body-default nx:text-foreground",children:"Dialog content goes here. You can add any content you need."})}),l(t.DialogFooter,{children:[i(t.DialogClose,{asChild:!0,children:i(p.Button,{variant:"outline",children:"Cancel"})}),i(p.Button,{children:"Save"})]})]})]})}var T=a(c()),E=a(h());(0,E.createRoot)(document.getElementById("root")).render((0,T.createElement)(u));})();</script>
15
+ </body>
16
+ </html>
package/project/components/Drawer/README.md ADDED
@@ -0,0 +1,188 @@
1
+ # Drawer
2
+
3
+ Drawer slides in a panel from a screen edge that the user can drag to dismiss. Use it for mobile-style panels, especially bottom drawers. Install `vaul` in your app to use it.
4
+
5
+ - For a side panel without drag gestures, use Sheet.
6
+ - For a centered modal task, use Dialog.
7
+ - For a confirmation that forces a choice, use AlertDialog.
8
+ - Set `showHandle={false}` on DrawerContent to remove the handle and its spacing. Dragging and dismissal stay the same.
9
+
10
+ ## On the canvas
11
+
12
+ ```html
13
+ <x-import component-from-global-scope="Nxds.Drawer">
14
+ <x-import component-from-global-scope="Nxds.DrawerTrigger" as-child>
15
+ <x-import component-from-global-scope="Nxds.Button" variant="outline">Open Drawer</x-import>
16
+ </x-import>
17
+ <x-import component-from-global-scope="Nxds.DrawerContent">
18
+ <x-import component-from-global-scope="Nxds.DrawerHeader">
19
+ <x-import component-from-global-scope="Nxds.DrawerTitle">Move goal</x-import>
20
+ <x-import component-from-global-scope="Nxds.DrawerDescription">Drag down or press Escape to dismiss this drawer.</x-import>
21
+ </x-import>
22
+ <x-import component-from-global-scope="Nxds.DrawerBody">
23
+ <p class="nx:typography-body-default nx:text-foreground">Drawer content goes here. On touch devices it can be dragged to dismiss.</p>
24
+ </x-import>
25
+ <x-import component-from-global-scope="Nxds.DrawerFooter">
26
+ <x-import component-from-global-scope="Nxds.Button">Submit</x-import>
27
+ <x-import component-from-global-scope="Nxds.DrawerClose" as-child>
28
+ <x-import component-from-global-scope="Nxds.Button" variant="outline">Cancel</x-import>
29
+ </x-import>
30
+ </x-import>
31
+ </x-import>
32
+ </x-import>
33
+ ```
34
+
35
+ 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.
36
+
37
+ ## Parts
38
+
39
+ - `Nxds.Drawer` — Root for a drawer that slides in from a screen edge and drags to dismiss.
40
+ - `Nxds.DrawerBody` — Holds the drawer's main content between the header and footer.
41
+ - `Nxds.DrawerClose` — Closes the drawer.
42
+ - `Nxds.DrawerContent` — The sliding panel.
43
+ - `Nxds.DrawerDescription` — Supporting text that explains the drawer.
44
+ - `Nxds.DrawerFooter` — Holds the drawer's action buttons at the bottom of the panel.
45
+ - `Nxds.DrawerHeader` — Holds the drawer title and description.
46
+ - `Nxds.DrawerOverlay` — Semi-transparent backdrop behind the drawer.
47
+ - `Nxds.DrawerPortal` — Renders the drawer content into `document.body`.
48
+ - `Nxds.DrawerTitle` — The drawer's title.
49
+ - `Nxds.DrawerTrigger` — Opens the drawer.
50
+
51
+ ## Props
52
+
53
+ ### Drawer
54
+
55
+ | Prop | Type | Default | Control |
56
+ | --- | --- | --- | --- |
57
+ | `activeSnapPoint` | `string \| number` | | none (object) |
58
+ | `setActiveSnapPoint` | `(snapPoint: string \| number \| null) => void` | | none (function) |
59
+ | `children` | `React.ReactNode` | | content |
60
+ | `open` | `boolean` | | toggle |
61
+ | `closeThreshold` | `number` | | number |
62
+ | `noBodyStyles` | `boolean` | | toggle |
63
+ | `onOpenChange` | `(open: boolean) => void` | | none (function) |
64
+ | `shouldScaleBackground` | `boolean` | | toggle |
65
+ | `setBackgroundColorOnScale` | `boolean` | | toggle |
66
+ | `scrollLockTimeout` | `number` | | number |
67
+ | `fixed` | `boolean` | | toggle |
68
+ | `handleOnly` | `boolean` | | toggle |
69
+ | `dismissible` | `boolean` | | toggle |
70
+ | `onDrag` | `(event: PointerEvent<HTMLDivElement>, percentageDragged: number) => void` | | none (function) |
71
+ | `onRelease` | `(event: PointerEvent<HTMLDivElement>, open: boolean) => void` | | none (function) |
72
+ | `modal` | `boolean` | | toggle |
73
+ | `nested` | `boolean` | | toggle |
74
+ | `onClose` | `() => void` | | none (function) |
75
+ | `direction` | `"top" \| "bottom" \| "left" \| "right"` | | dropdown |
76
+ | `defaultOpen` | `boolean` | | toggle |
77
+ | `disablePreventScroll` | `boolean` | | toggle |
78
+ | `repositionInputs` | `boolean` | | toggle |
79
+ | `snapToSequentialPoint` | `boolean` | | toggle |
80
+ | `container` | `HTMLElement` | | none (object) |
81
+ | `onAnimationEnd` | `(open: boolean) => void` | | none (function) |
82
+ | `preventScrollRestoration` | `boolean` | | toggle |
83
+ | `autoFocus` | `boolean` | | toggle |
84
+ | `snapPoints` | `(string \| number)[]` | | none (object) |
85
+ | `fadeFromIndex` | `number` | | number |
86
+
87
+ ### DrawerBody
88
+
89
+ | Prop | Type | Default | Control |
90
+ | --- | --- | --- | --- |
91
+ | `className` | `string` | | text |
92
+ | `id` | `string` | | text |
93
+ | `children` | `React.ReactNode` | | content |
94
+
95
+ ### DrawerClose
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
+ | `type` | `"button" \| "submit" \| "reset"` | | dropdown |
104
+ | `asChild` | `boolean` | | toggle |
105
+ | `disabled` | `boolean` | | toggle |
106
+ | `value` | `string \| number \| readonly string[]` | | none (object) |
107
+
108
+ ### DrawerContent
109
+
110
+ | Prop | Type | Default | Control |
111
+ | --- | --- | --- | --- |
112
+ | `showHandle` | `boolean` | `true` | toggle |
113
+ | `children` | `React.ReactNode` | | content |
114
+ | `className` | `string` | | text |
115
+ | `id` | `string` | | text |
116
+ | `asChild` | `boolean` | | toggle |
117
+ | `forceMount` | `true` | | toggle |
118
+ | `onEscapeKeyDown` | `(event: KeyboardEvent) => void` | | none (function) |
119
+ | `onPointerDownOutside` | `(event: PointerDownOutsideEvent) => void` | | none (function) |
120
+ | `onFocusOutside` | `(event: FocusOutsideEvent) => void` | | none (function) |
121
+ | `onInteractOutside` | `(event: FocusOutsideEvent \| PointerDownOutsideEvent) => void` | | none (function) |
122
+ | `onOpenAutoFocus` | `(event: Event) => void` | | none (function) |
123
+ | `onCloseAutoFocus` | `(event: Event) => void` | | none (function) |
124
+
125
+ ### DrawerDescription
126
+
127
+ | Prop | Type | Default | Control |
128
+ | --- | --- | --- | --- |
129
+ | `children` | `React.ReactNode` | | content |
130
+ | `className` | `string` | | text |
131
+ | `id` | `string` | | text |
132
+ | `asChild` | `boolean` | | toggle |
133
+
134
+ ### DrawerFooter
135
+
136
+ | Prop | Type | Default | Control |
137
+ | --- | --- | --- | --- |
138
+ | `className` | `string` | | text |
139
+ | `id` | `string` | | text |
140
+ | `children` | `React.ReactNode` | | content |
141
+
142
+ ### DrawerHeader
143
+
144
+ | Prop | Type | Default | Control |
145
+ | --- | --- | --- | --- |
146
+ | `className` | `string` | | text |
147
+ | `id` | `string` | | text |
148
+ | `children` | `React.ReactNode` | | content |
149
+
150
+ ### DrawerOverlay
151
+
152
+ | Prop | Type | Default | Control |
153
+ | --- | --- | --- | --- |
154
+ | `children` | `React.ReactNode` | | content |
155
+ | `className` | `string` | | text |
156
+ | `id` | `string` | | text |
157
+ | `asChild` | `boolean` | | toggle |
158
+ | `forceMount` | `true` | | toggle |
159
+
160
+ ### DrawerPortal
161
+
162
+ | Prop | Type | Default | Control |
163
+ | --- | --- | --- | --- |
164
+ | `children` | `React.ReactNode` | | content |
165
+ | `container` | `Element \| DocumentFragment` | | none (object) |
166
+ | `forceMount` | `true` | | toggle |
167
+
168
+ ### DrawerTitle
169
+
170
+ | Prop | Type | Default | Control |
171
+ | --- | --- | --- | --- |
172
+ | `children` | `React.ReactNode` | | content |
173
+ | `className` | `string` | | text |
174
+ | `id` | `string` | | text |
175
+ | `asChild` | `boolean` | | toggle |
176
+
177
+ ### DrawerTrigger
178
+
179
+ | Prop | Type | Default | Control |
180
+ | --- | --- | --- | --- |
181
+ | `children` | `React.ReactNode` | | content |
182
+ | `className` | `string` | | text |
183
+ | `id` | `string` | | text |
184
+ | `name` | `string` | | text |
185
+ | `type` | `"button" \| "submit" \| "reset"` | | dropdown |
186
+ | `asChild` | `boolean` | | toggle |
187
+ | `disabled` | `boolean` | | toggle |
188
+ | `value` | `string \| number \| readonly string[]` | | none (object) |