@nxds/claude-design 0.5.0 → 0.6.0

package/coverage.md

@@ -1,17 +1,17 @@
 # Canvas prop coverage
 
-368 component parts, 2461 props.
+368 component parts, 2460 props.
 
 | Control | Props |
 | --- | --- |
-| dropdown | 257 |
+| dropdown | 258 |
 | toggle | 506 |
-| number | 80 |
+| number | 84 |
 | text | 856 |
 | content | 358 |
 | none: takes a React element; an attribute holds text only | 34 |
-| none: takes a function | 158 |
-| none: takes an object, array or class instance | 212 |
+| none: takes a function | 157 |
+| none: takes an object, array or class instance | 207 |
 
 ## Props with no control
 
@@ -137,8 +137,8 @@
 - **Progress**: `getValueLabel` (function)
 - **RadioGroup**: `onValueChange` (function)
 - **ResizableHandle**: `elementRef` (function)
-- **ResizablePanel**: `collapsedSize` (object), `defaultSize` (object), `elementRef` (function), `maxSize` (object), `minSize` (object), `onResize` (function), `panelRef` (function)
-- **ResizablePanelGroup**: `defaultLayout` (object), `elementRef` (function), `groupRef` (function), `onLayoutChange` (function), `onLayoutChanged` (function), `resizeTargetMinimumSize` (object)
+- **ResizablePanel**: `onResize` (function), `elementRef` (function), `panelRef` (function)
+- **ResizablePanelGroup**: `onLayoutChange` (function), `elementRef` (function), `groupRef` (function), `resizeTargetMinimumSize` (object)
 - **Select**: `onOpenChange` (function), `onValueChange` (function)
 - **SelectContent**: `onCloseAutoFocus` (function), `onEscapeKeyDown` (function), `onPointerDownOutside` (function), `collisionBoundary` (object), `collisionPadding` (object)
 - **SelectTrigger**: `value` (object)

package/files.json

@@ -45,7 +45,7 @@
   },
   {
     "path": "components/Avatar/README.md",
-    "sha256": "4eba2752316b4237d4da9a48441b25179fa377b91a2f7f7272ad31634348b944"
+    "sha256": "858b00d1559272d4c7bf6b211b9dd96efbe39377f4128f524df96b56a423f586"
   },
   {
     "path": "components/Avatar/preview.html",
@@ -417,7 +417,7 @@
   },
   {
     "path": "components/Resizable/README.md",
-    "sha256": "a9110bd3c09ec3e1c153344140742187114e78f5e7e533647a7892e327d67fd9"
+    "sha256": "d00d153a27acd8ae942427d68d4592e0f1939a7e46ae0b7df4c6a5ac20136737"
   },
   {
     "path": "components/Resizable/preview.html",
@@ -573,15 +573,15 @@
   },
   {
     "path": "components/bundle.js",
-    "sha256": "920b14097a57106ea1eb7d23ab01410b2e806ce94ae96a4734710f054e1483c3"
+    "sha256": "358ef8ea58770e19a5bf63da886bbb1ad66c91aba67f548c397417012c082e06"
   },
   {
     "path": "components/index.d.ts",
-    "sha256": "d636c27a057e8512e94360a29c8c32c0ad4b314fad8ad62e6d2af7891096d958"
+    "sha256": "7e3817ca51f39d8321a25262201bc53df9dabe5e0aaf703bd4f0eea80e8d9bdb"
   },
   {
     "path": "design-system.json",
-    "sha256": "b6246be3637df07ee29ff816d29d346dbc9e5e5bfaf57e43dbcbc05de71076b9"
+    "sha256": "b580314d97e4b9fea69baa73a5973e96a2474e41ded1798244bd050e90ef7a34"
   },
   {
     "path": "tokens.css",
@@ -589,6 +589,6 @@
   },
   {
     "path": "tokens.json",
-    "sha256": "3d4360cab921b77ccaad897f43a58ad4db95f14ef0e2b38aa344e0a69797ea4b"
+    "sha256": "1c6b2c0b9d18bcf3260d35745d9328d32f60f178c1c36462c3bca5f01e002325"
   }
 ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nxds/claude-design",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "nxds as a Claude Design System: tokens, a live React 18 component bundle, prop types and previews, ready to publish.",
   "keywords": [
     "nxds",

package/project/components/Avatar/README.md

@@ -5,10 +5,7 @@ Avatar shows a person's profile image, with initials as the fallback. Use Avatar
 ## On the canvas
 
 ```html
-<x-import component-from-global-scope="Nxds.Avatar" size="md" shape="circle" ring="false">
-  <x-import component-from-global-scope="Nxds.AvatarImage" src="/avatars/ada.svg" alt="Ada Lovelace"></x-import>
-  <x-import component-from-global-scope="Nxds.AvatarFallback">AL</x-import>
-</x-import>
+<x-import component-from-global-scope="Nxds.Avatar" size="sm" shape="rounded">Avatar</x-import>
 ```
 
 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/Resizable/README.md

@@ -5,7 +5,7 @@ Resizable splits an area into panels that users resize by dragging or with the k
 ## On the canvas
 
 ```html
-<x-import component-from-global-scope="Nxds.ResizablePanelGroup" orientation="horizontal">ResizablePanelGroup</x-import>
+<x-import component-from-global-scope="Nxds.ResizablePanelGroup" orientation="vertical">ResizablePanelGroup</x-import>
 ```
 
 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
 
 | Prop | Type | Default | Control |
 | --- | --- | --- | --- |
+| `defaultSize` | `number` |  | number |
+| `minSize` | `number` | `0` | number |
+| `maxSize` | `number` |  | number |
+| `collapsedSize` | `number` |  | number |
+| `sizeUnit` | `"%" \| "px"` | `"%"` | dropdown |
 | `children` | `React.ReactNode` |  | content |
 | `className` | `string` |  | text |
 | `id` | `string` |  | text |
-| `collapsedSize` | `string \| number` |  | none (object) |
 | `collapsible` | `boolean` |  | toggle |
-| `defaultSize` | `string \| number` |  | none (object) |
 | `disabled` | `boolean` |  | toggle |
+| `onResize` | `(panelSize: PanelSize, id: string \| number \| undefined, prevPanelSize: PanelSize \| undefined) => void` |  | none (function) |
 | `elementRef` | `RefObject<HTMLDivElement \| null> \| ((instance: HTMLDivElement \| null) => void \| (() => VoidOrUndefinedOnly))` |  | none (function) |
 | `groupResizeBehavior` | `"preserve-relative-size" \| "preserve-pixel-size"` |  | dropdown |
-| `maxSize` | `string \| number` |  | none (object) |
-| `minSize` | `string \| number` |  | none (object) |
-| `onResize` | `(panelSize: PanelSize, id: string \| number \| undefined, prevPanelSize: PanelSize \| undefined) => void` |  | none (function) |
 | `panelRef` | `((instance: PanelImperativeHandle \| null) => void \| (() => VoidOrUndefinedOnly)) \| RefObject<PanelImperativeHandle \| null>` |  | none (function) |
 
 ### ResizablePanelGroup
 
 | Prop | Type | Default | Control |
 | --- | --- | --- | --- |
+| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | dropdown |
+| `onLayoutChange` | `(layout: number[]) => void` |  | none (function) |
+| `children` | `React.ReactNode` |  | content |
 | `className` | `string` |  | text |
 | `id` | `string` |  | text |
-| `children` | `React.ReactNode` |  | content |
-| `defaultLayout` | `Layout` |  | none (object) |
-| `disableCursor` | `boolean` |  | toggle |
 | `disabled` | `boolean` |  | toggle |
 | `elementRef` | `RefObject<HTMLDivElement \| null> \| ((instance: HTMLDivElement \| null) => void \| (() => VoidOrUndefinedOnly))` |  | none (function) |
+| `disableCursor` | `boolean` |  | toggle |
 | `groupRef` | `((instance: GroupImperativeHandle \| null) => void \| (() => VoidOrUndefinedOnly)) \| RefObject<GroupImperativeHandle \| null>` |  | none (function) |
-| `onLayoutChange` | `(layout: Layout) => void \| undefined` |  | none (function) |
-| `onLayoutChanged` | `(layout: Layout) => void \| undefined` |  | none (function) |
 | `resizeTargetMinimumSize` | `{ coarse: number; fine: number; }` |  | none (object) |
-| `orientation` | `"horizontal" \| "vertical"` |  | dropdown |