@nxds/claude-design 0.5.0 → 0.7.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 (12) hide show
  1. package/coverage.md +8 -8
  2. package/files.json +8 -8
  3. package/package.json +1 -1
  4. package/project/components/Avatar/README.md +1 -4
  5. package/project/components/DatePicker/README.md +16 -16
  6. package/project/components/FilterBuilder/README.md +1 -0
  7. package/project/components/Resizable/README.md +11 -12
  8. package/project/components/bundle.js +54 -54
  9. package/project/components/index.d.ts +727 -1168
  10. package/project/design-system.json +4 -4
  11. package/project/tokens.json +25 -25
  12. package/coverage.json +0 -2823
package/coverage.md CHANGED
@@ -4,14 +4,14 @@
4
4
 
5
5
  | Control | Props |
6
6
  | --- | --- |
7
- | dropdown | 257 |
7
+ | dropdown | 258 |
8
8
  | toggle | 506 |
9
- | number | 80 |
10
- | text | 856 |
9
+ | number | 84 |
10
+ | text | 857 |
11
11
  | content | 358 |
12
12
  | none: takes a React element; an attribute holds text only | 34 |
13
- | none: takes a function | 158 |
14
- | none: takes an object, array or class instance | 212 |
13
+ | none: takes a function | 157 |
14
+ | none: takes an object, array or class instance | 207 |
15
15
 
16
16
  ## Props with no control
17
17
 
@@ -66,7 +66,7 @@
66
66
  - **ContextMenuRadioItem**: `onSelect` (function)
67
67
  - **ContextMenuSub**: `onOpenChange` (function)
68
68
  - **ContextMenuSubContent**: `onEscapeKeyDown` (function), `onPointerDownOutside` (function), `onFocusOutside` (function), `onInteractOutside` (function), `collisionBoundary` (object), `collisionPadding` (object)
69
- - **DatePicker**: `classNames` (object), `modifiersClassNames` (object), `style` (object), `styles` (object), `modifiersStyles` (object), `defaultMonth` (object), `month` (object), `startMonth` (object), `fromDate` (object), `fromMonth` (object), `endMonth` (object), `toDate` (object), `toMonth` (object), `components` (object), `footer` (element), `disabled` (object), `hidden` (object), `today` (object), `modifiers` (object), `labels` (object), `formatters` (object), `locale` (object), `onMonthChange` (object), `onNextClick` (object), `onPrevClick` (object), `onWeekNumberClick` (object), `dateLib` (object), `renderDayContent` (element)
69
+ - **DatePicker**: `style` (object), `footer` (element), `hidden` (object), `disabled` (object), `classNames` (object), `modifiersClassNames` (object), `styles` (object), `modifiersStyles` (object), `defaultMonth` (object), `month` (object), `startMonth` (object), `fromDate` (object), `fromMonth` (object), `endMonth` (object), `toDate` (object), `toMonth` (object), `components` (object), `today` (object), `modifiers` (object), `labels` (object), `formatters` (object), `locale` (object), `onMonthChange` (object), `onNextClick` (object), `onPrevClick` (object), `onWeekNumberClick` (object), `dateLib` (object), `renderDayContent` (element)
70
70
  - **DatePickerDayButton**: `day` (object), `modifiers` (object), `value` (object)
71
71
  - **Dialog**: `onOpenChange` (function)
72
72
  - **DialogClose**: `value` (object)
@@ -137,8 +137,8 @@
137
137
  - **Progress**: `getValueLabel` (function)
138
138
  - **RadioGroup**: `onValueChange` (function)
139
139
  - **ResizableHandle**: `elementRef` (function)
140
- - **ResizablePanel**: `collapsedSize` (object), `defaultSize` (object), `elementRef` (function), `maxSize` (object), `minSize` (object), `onResize` (function), `panelRef` (function)
141
- - **ResizablePanelGroup**: `defaultLayout` (object), `elementRef` (function), `groupRef` (function), `onLayoutChange` (function), `onLayoutChanged` (function), `resizeTargetMinimumSize` (object)
140
+ - **ResizablePanel**: `onResize` (function), `elementRef` (function), `panelRef` (function)
141
+ - **ResizablePanelGroup**: `onLayoutChange` (function), `elementRef` (function), `groupRef` (function), `resizeTargetMinimumSize` (object)
142
142
  - **Select**: `onOpenChange` (function), `onValueChange` (function)
143
143
  - **SelectContent**: `onCloseAutoFocus` (function), `onEscapeKeyDown` (function), `onPointerDownOutside` (function), `collisionBoundary` (object), `collisionPadding` (object)
144
144
  - **SelectTrigger**: `value` (object)
package/files.json CHANGED
@@ -45,7 +45,7 @@
45
45
  },
46
46
  {
47
47
  "path": "components/Avatar/README.md",
48
- "sha256": "4eba2752316b4237d4da9a48441b25179fa377b91a2f7f7272ad31634348b944"
48
+ "sha256": "858b00d1559272d4c7bf6b211b9dd96efbe39377f4128f524df96b56a423f586"
49
49
  },
50
50
  {
51
51
  "path": "components/Avatar/preview.html",
@@ -177,7 +177,7 @@
177
177
  },
178
178
  {
179
179
  "path": "components/DatePicker/README.md",
180
- "sha256": "1e8a8be3be3367099b43ec41a01940ad609780b6371259b1e35a285ccfa60adb"
180
+ "sha256": "25c8dac18c789be9512c996025df936279881c6eee7ad346a5df392099e05110"
181
181
  },
182
182
  {
183
183
  "path": "components/DatePicker/preview.html",
@@ -233,7 +233,7 @@
233
233
  },
234
234
  {
235
235
  "path": "components/FilterBuilder/README.md",
236
- "sha256": "f30d98f4186a4db4056f51a85789af04a673d4b0f3d4cfb548345bc3d02abd3e"
236
+ "sha256": "dd65d7529d8d05e169c00a95e19fe80fd010e73ab6eea0703fd088aacc4e4fa3"
237
237
  },
238
238
  {
239
239
  "path": "components/FilterBuilder/preview.html",
@@ -417,7 +417,7 @@
417
417
  },
418
418
  {
419
419
  "path": "components/Resizable/README.md",
420
- "sha256": "a9110bd3c09ec3e1c153344140742187114e78f5e7e533647a7892e327d67fd9"
420
+ "sha256": "d00d153a27acd8ae942427d68d4592e0f1939a7e46ae0b7df4c6a5ac20136737"
421
421
  },
422
422
  {
423
423
  "path": "components/Resizable/preview.html",
@@ -573,15 +573,15 @@
573
573
  },
574
574
  {
575
575
  "path": "components/bundle.js",
576
- "sha256": "920b14097a57106ea1eb7d23ab01410b2e806ce94ae96a4734710f054e1483c3"
576
+ "sha256": "8d29bcf83e59d7aa499f6ca16fbd18b39cd0e33dcadf58ddd2c7805d58d7bfb7"
577
577
  },
578
578
  {
579
579
  "path": "components/index.d.ts",
580
- "sha256": "d636c27a057e8512e94360a29c8c32c0ad4b314fad8ad62e6d2af7891096d958"
580
+ "sha256": "35cb3a2bc069dd75fc575330aac54f7a52ab4c529d0ba3fa01ed3b2e3be2e9ec"
581
581
  },
582
582
  {
583
583
  "path": "design-system.json",
584
- "sha256": "b6246be3637df07ee29ff816d29d346dbc9e5e5bfaf57e43dbcbc05de71076b9"
584
+ "sha256": "953993668118d3116bae7c1304e396c404e8d42bbd0c13a293733dcc01df3c49"
585
585
  },
586
586
  {
587
587
  "path": "tokens.css",
@@ -589,6 +589,6 @@
589
589
  },
590
590
  {
591
591
  "path": "tokens.json",
592
- "sha256": "3d4360cab921b77ccaad897f43a58ad4db95f14ef0e2b38aa344e0a69797ea4b"
592
+ "sha256": "06b18a9438782c0ad85af05392f848fb60b17343be227de3a1f436152e114e8d"
593
593
  }
594
594
  ]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nxds/claude-design",
3
- "version": "0.5.0",
3
+ "version": "0.7.0",
4
4
  "description": "nxds as a Claude Design System: tokens, a live React 18 component bundle, prop types and previews, ready to publish.",
5
5
  "keywords": [
6
6
  "nxds",
package/project/components/Avatar/README.md CHANGED
@@ -5,10 +5,7 @@ Avatar shows a person's profile image, with initials as the fallback. Use Avatar
5
5
  ## On the canvas
6
6
 
7
7
  ```html
8
- <x-import component-from-global-scope="Nxds.Avatar" size="md" shape="circle" ring="false">
9
- <x-import component-from-global-scope="Nxds.AvatarImage" src="/avatars/ada.svg" alt="Ada Lovelace"></x-import>
10
- <x-import component-from-global-scope="Nxds.AvatarFallback">AL</x-import>
11
- </x-import>
8
+ <x-import component-from-global-scope="Nxds.Avatar" size="sm" shape="rounded">Avatar</x-import>
12
9
  ```
13
10
 
14
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.
package/project/components/DatePicker/README.md CHANGED
@@ -5,7 +5,7 @@ DatePicker shows a calendar grid for picking one date, a range or several dates.
5
5
  ## On the canvas
6
6
 
7
7
  ```html
8
- <x-import component-from-global-scope="Nxds.DatePicker" mode="single" caption-layout="dropdown"></x-import>
8
+ <x-import component-from-global-scope="Nxds.DatePicker" role="dialog" mode="single"></x-import>
9
9
  ```
10
10
 
11
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.
@@ -21,15 +21,27 @@ Attributes set props, kebab-case to camelCase. Element content becomes `children
21
21
 
22
22
  | Prop | Type | Default | Control |
23
23
  | --- | --- | --- | --- |
24
+ | `className` | `string` | | text |
25
+ | `id` | `string` | | text |
26
+ | `lang` | `string` | | text |
27
+ | `nonce` | `string` | | text |
28
+ | `style` | `React.CSSProperties` | | none (object) |
29
+ | `role` | `"dialog" \| "application"` | | dropdown |
24
30
  | `mode` | `"single" \| "multiple" \| "range"` | | dropdown |
31
+ | `aria-label` | `string` | | text |
32
+ | `aria-labelledby` | `string` | | text |
33
+ | `footer` | `React.ReactNode` | | none (element) |
34
+ | `title` | `string` | | text |
35
+ | `animate` | `boolean` | | toggle |
36
+ | `autoFocus` | `boolean` | | toggle |
37
+ | `dir` | `string` | | text |
38
+ | `hidden` | `Matcher \| Matcher[]` | | none (object) |
39
+ | `disabled` | `Matcher \| Matcher[]` | | none (object) |
25
40
  | `required` | `boolean` | | toggle |
26
- | `className` | `string` | | text |
27
41
  | `classNames` | `Partial<ClassNames> & Partial<DeprecatedUI<string>>` | | none (object) |
28
42
  | `modifiersClassNames` | `ModifiersClassNames` | | none (object) |
29
- | `style` | `React.CSSProperties` | | none (object) |
30
43
  | `styles` | `Partial<Styles> & Partial<DeprecatedUI<React.CSSProperties>>` | | none (object) |
31
44
  | `modifiersStyles` | `ModifiersStyles` | | none (object) |
32
- | `id` | `string` | | text |
33
45
  | `defaultMonth` | `Date` | | none (object) |
34
46
  | `month` | `Date` | | none (object) |
35
47
  | `numberOfMonths` | `number` | | number |
@@ -52,28 +64,16 @@ Attributes set props, kebab-case to camelCase. Element content becomes `children
52
64
  | `hideWeekdays` | `boolean` | | toggle |
53
65
  | `showOutsideDays` | `boolean` | `true` | toggle |
54
66
  | `showWeekNumber` | `boolean` | | toggle |
55
- | `animate` | `boolean` | | toggle |
56
67
  | `broadcastCalendar` | `boolean` | | toggle |
57
68
  | `ISOWeek` | `boolean` | | toggle |
58
69
  | `timeZone` | `string` | | text |
59
70
  | `noonSafe` | `boolean` | | toggle |
60
71
  | `components` | `Partial<CustomComponents>` | | none (object) |
61
- | `footer` | `React.ReactNode` | | none (element) |
62
- | `autoFocus` | `boolean` | | toggle |
63
72
  | `initialFocus` | `boolean` | | toggle |
64
- | `disabled` | `Matcher \| Matcher[]` | | none (object) |
65
- | `hidden` | `Matcher \| Matcher[]` | | none (object) |
66
73
  | `today` | `Date` | | none (object) |
67
74
  | `modifiers` | `Record<string, Matcher \| Matcher[] \| undefined>` | | none (object) |
68
75
  | `labels` | `Partial<Labels>` | | none (object) |
69
76
  | `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
77
  | `locale` | `Partial<DayPickerLocale>` | | none (object) |
78
78
  | `numerals` | `"latn" \| "arab" \| "arabext" \| "deva" \| "geez" \| "beng" \| "guru" \| "gujr" \| "orya" \| "tamldec" \| "telu" \| "knda" \| "mlym" \| "thai" \| "mymr" \| "khmr" \| "laoo" \| "tibt"` | | dropdown |
79
79
  | `weekStartsOn` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6` | | dropdown |
package/project/components/FilterBuilder/README.md CHANGED
@@ -30,5 +30,6 @@ Attributes set props, kebab-case to camelCase. Element content becomes `children
30
30
  | `onValueChange` | `(value: FilterGroup) => void` | | none (function) |
31
31
  | `disabled` | `boolean` | `false` | toggle |
32
32
  | `maxDepth` | `number` | `3` | number |
33
+ | `aria-label` | `string` | `"Filters"` | text |
33
34
  | `className` | `string` | | text |
34
35
  | `id` | `string` | | text |
package/project/components/Resizable/README.md CHANGED
@@ -5,7 +5,7 @@ Resizable splits an area into panels that users resize by dragging or with the k
5
5
  ## On the canvas
6
6
 
7
7
  ```html
8
- <x-import component-from-global-scope="Nxds.ResizablePanelGroup" orientation="horizontal">ResizablePanelGroup</x-import>
8
+ <x-import component-from-global-scope="Nxds.ResizablePanelGroup" orientation="vertical">ResizablePanelGroup</x-import>
9
9
  ```
10
10
 
11
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.
@@ -34,33 +34,32 @@ Attributes set props, kebab-case to camelCase. Element content becomes `children
34
34
 
35
35
  | Prop | Type | Default | Control |
36
36
  | --- | --- | --- | --- |
37
+ | `defaultSize` | `number` | | number |
38
+ | `minSize` | `number` | `0` | number |
39
+ | `maxSize` | `number` | | number |
40
+ | `collapsedSize` | `number` | | number |
41
+ | `sizeUnit` | `"%" \| "px"` | `"%"` | dropdown |
37
42
  | `children` | `React.ReactNode` | | content |
38
43
  | `className` | `string` | | text |
39
44
  | `id` | `string` | | text |
40
- | `collapsedSize` | `string \| number` | | none (object) |
41
45
  | `collapsible` | `boolean` | | toggle |
42
- | `defaultSize` | `string \| number` | | none (object) |
43
46
  | `disabled` | `boolean` | | toggle |
47
+ | `onResize` | `(panelSize: PanelSize, id: string \| number \| undefined, prevPanelSize: PanelSize \| undefined) => void` | | none (function) |
44
48
  | `elementRef` | `RefObject<HTMLDivElement \| null> \| ((instance: HTMLDivElement \| null) => void \| (() => VoidOrUndefinedOnly))` | | none (function) |
45
49
  | `groupResizeBehavior` | `"preserve-relative-size" \| "preserve-pixel-size"` | | dropdown |
46
- | `maxSize` | `string \| number` | | none (object) |
47
- | `minSize` | `string \| number` | | none (object) |
48
- | `onResize` | `(panelSize: PanelSize, id: string \| number \| undefined, prevPanelSize: PanelSize \| undefined) => void` | | none (function) |
49
50
  | `panelRef` | `((instance: PanelImperativeHandle \| null) => void \| (() => VoidOrUndefinedOnly)) \| RefObject<PanelImperativeHandle \| null>` | | none (function) |
50
51
 
51
52
  ### ResizablePanelGroup
52
53
 
53
54
  | Prop | Type | Default | Control |
54
55
  | --- | --- | --- | --- |
56
+ | `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | dropdown |
57
+ | `onLayoutChange` | `(layout: number[]) => void` | | none (function) |
58
+ | `children` | `React.ReactNode` | | content |
55
59
  | `className` | `string` | | text |
56
60
  | `id` | `string` | | text |
57
- | `children` | `React.ReactNode` | | content |
58
- | `defaultLayout` | `Layout` | | none (object) |
59
- | `disableCursor` | `boolean` | | toggle |
60
61
  | `disabled` | `boolean` | | toggle |
61
62
  | `elementRef` | `RefObject<HTMLDivElement \| null> \| ((instance: HTMLDivElement \| null) => void \| (() => VoidOrUndefinedOnly))` | | none (function) |
63
+ | `disableCursor` | `boolean` | | toggle |
62
64
  | `groupRef` | `((instance: GroupImperativeHandle \| null) => void \| (() => VoidOrUndefinedOnly)) \| RefObject<GroupImperativeHandle \| null>` | | none (function) |
63
- | `onLayoutChange` | `(layout: Layout) => void \| undefined` | | none (function) |
64
- | `onLayoutChanged` | `(layout: Layout) => void \| undefined` | | none (function) |
65
65
  | `resizeTargetMinimumSize` | `{ coarse: number; fine: number; }` | | none (object) |
66
- | `orientation` | `"horizontal" \| "vertical"` | | dropdown |