@nxds/claude-design 0.0.0-stage → 0.6.0

package/project/components/Sheet/README.md

@@ -0,0 +1,160 @@
+# Sheet
+
+Sheet slides a panel in from one edge of the viewport. Use it for settings, filters, navigation or supporting forms. For a centered task use Dialog, for a forced choice use AlertDialog, and for drag-to-dismiss use Drawer.
+
+## On the canvas
+
+```html
+<x-import component-from-global-scope="Nxds.Sheet">
+  <x-import component-from-global-scope="Nxds.SheetTrigger" as-child>
+    <x-import component-from-global-scope="Nxds.Button" variant="outline">Open Sheet</x-import>
+  </x-import>
+  <x-import component-from-global-scope="Nxds.SheetContent">
+    <x-import component-from-global-scope="Nxds.SheetHeader">
+      <x-import component-from-global-scope="Nxds.SheetTitle">Sheet Title</x-import>
+      <x-import component-from-global-scope="Nxds.SheetDescription">This panel slides in from the right edge by default.</x-import>
+    </x-import>
+    <x-import component-from-global-scope="Nxds.SheetBody">
+      <p class="nx:typography-body-default nx:text-foreground">Sheet content goes here. You can add any content you need.</p>
+    </x-import>
+    <x-import component-from-global-scope="Nxds.SheetFooter">
+      <x-import component-from-global-scope="Nxds.SheetClose" as-child>
+        <x-import component-from-global-scope="Nxds.Button" variant="outline">Cancel</x-import>
+      </x-import>
+      <x-import component-from-global-scope="Nxds.Button">Save</x-import>
+    </x-import>
+  </x-import>
+</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.
+
+## Parts
+
+- `Nxds.Sheet` — Root of a panel that slides in from an edge of the viewport.
+- `Nxds.SheetBody` — Main content between the header and footer.
+- `Nxds.SheetClose` — Closes the sheet.
+- `Nxds.SheetContent` — The sliding panel, rendered in a portal with an overlay.
+- `Nxds.SheetDescription` — Supporting text under the title.
+- `Nxds.SheetFooter` — Holds the action buttons, pinned to the bottom of the panel.
+- `Nxds.SheetHeader` — Holds the title and description.
+- `Nxds.SheetOverlay` — Dimmed layer behind the sheet.
+- `Nxds.SheetPortal` — Renders the sheet content into `document.body`.
+- `Nxds.SheetTitle` — Title of the sheet.
+- `Nxds.SheetTrigger` — Opens the sheet.
+
+## Props
+
+### Sheet
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `children` | `React.ReactNode` |  | content |
+| `open` | `boolean` |  | toggle |
+| `defaultOpen` | `boolean` |  | toggle |
+| `onOpenChange` | `(open: boolean) => void` |  | none (function) |
+| `modal` | `boolean` |  | toggle |
+
+### SheetBody
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+
+### SheetClose
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `children` | `React.ReactNode` |  | content |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `name` | `string` |  | text |
+| `type` | `"button" \| "submit" \| "reset"` |  | dropdown |
+| `asChild` | `boolean` |  | toggle |
+| `disabled` | `boolean` |  | toggle |
+| `value` | `string \| number \| readonly string[]` |  | none (object) |
+
+### SheetContent
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `showCloseButton` | `boolean` | `true` | toggle |
+| `forceMount` | `true` |  | toggle |
+| `children` | `React.ReactNode` |  | content |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `asChild` | `boolean` |  | toggle |
+| `onEscapeKeyDown` | `(event: KeyboardEvent) => void` |  | none (function) |
+| `onPointerDownOutside` | `(event: PointerDownOutsideEvent) => void` |  | none (function) |
+| `onFocusOutside` | `(event: FocusOutsideEvent) => void` |  | none (function) |
+| `onInteractOutside` | `(event: FocusOutsideEvent \| PointerDownOutsideEvent) => void` |  | none (function) |
+| `onOpenAutoFocus` | `(event: Event) => void` |  | none (function) |
+| `onCloseAutoFocus` | `(event: Event) => void` |  | none (function) |
+| `side` | `"top" \| "bottom" \| "left" \| "right"` | `"right"` | dropdown |
+
+### SheetDescription
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `children` | `React.ReactNode` |  | content |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `asChild` | `boolean` |  | toggle |
+
+### SheetFooter
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+
+### SheetHeader
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+
+### SheetOverlay
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `forceMount` | `true` |  | toggle |
+| `children` | `React.ReactNode` |  | content |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `asChild` | `boolean` |  | toggle |
+
+### SheetPortal
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `children` | `React.ReactNode` |  | content |
+| `container` | `Element \| DocumentFragment` |  | none (object) |
+| `forceMount` | `true` |  | toggle |
+
+### SheetTitle
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `children` | `React.ReactNode` |  | content |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `asChild` | `boolean` |  | toggle |
+
+### SheetTrigger
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `children` | `React.ReactNode` |  | content |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `name` | `string` |  | text |
+| `type` | `"button" \| "submit" \| "reset"` |  | dropdown |
+| `asChild` | `boolean` |  | toggle |
+| `disabled` | `boolean` |  | toggle |
+| `value` | `string \| number \| readonly string[]` |  | none (object) |

package/project/components/Sheet/preview.html

@@ -0,0 +1,16 @@
+<!-- @dsCard group="Overlays" height=120 -->
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Sheet</title>
+<style>
+  body { margin: 0; background: var(--nx-color-background); color: var(--nx-color-foreground); font-family: var(--font-sans); }
+  #root { padding: var(--nx-spacing-6); }
+</style>
+</head>
+<body>
+<div id="root"></div>
+<script>(()=>{var B=Object.create;var m=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var D=Object.getPrototypeOf,K=Object.prototype.hasOwnProperty;var l=(t,e)=>()=>{try{return e||t((e={exports:{}}).exports,e),e.exports}catch(n){throw e=0,n}};var P=(t,e,n,d)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of R(e))!K.call(t,i)&&i!==n&&m(t,i,{get:()=>e[i],enumerable:!(d=C(e,i))||d.enumerable});return t};var a=(t,e,n)=>(n=t!=null?B(D(t)):{},P(e||!t||!t.__esModule?m(n,"default",{value:t,enumerable:!0}):n,t));var u=l((F,y)=>{y.exports=window.Nxds});var c=l((b,f)=>{f.exports=window.React});var w=l((O,g)=>{g.exports={createRoot:window.ReactDOM.createRoot}});var s=a(u()),o=a(u());var p=a(c());function x(t,e){return e===void 0?t:{...t,key:e}}function r(t,e,n){return(0,p.createElement)(t,x(e,n))}function h(t,e,n){let{children:d,...i}=e;return(0,p.createElement)(t,x(i,n),...d)}function S(){return h(o.Sheet,{children:[r(o.SheetTrigger,{asChild:!0,children:r(s.Button,{variant:"outline",children:"Open Sheet"})}),h(o.SheetContent,{children:[h(o.SheetHeader,{children:[r(o.SheetTitle,{children:"Sheet Title"}),r(o.SheetDescription,{children:"This panel slides in from the right edge by default."})]}),r(o.SheetBody,{children:r("p",{className:"nx:typography-body-default nx:text-foreground",children:"Sheet content goes here. You can add any content you need."})}),h(o.SheetFooter,{children:[r(o.SheetClose,{asChild:!0,children:r(s.Button,{variant:"outline",children:"Cancel"})}),r(s.Button,{children:"Save"})]})]})]})}var T=a(c()),E=a(w());(0,E.createRoot)(document.getElementById("root")).render((0,T.createElement)(S));})();</script>
+</body>
+</html>

package/project/components/Show/README.md

@@ -0,0 +1,26 @@
+# Show
+
+Show displays its children only above or below a viewport or container width. Use it for responsive visibility instead of toggling `nx:hidden` classes. To hide content at a width, use Hide.
+
+## On the canvas
+
+```html
+<x-import component-from-global-scope="Nxds.Show" as="div" above="sm">Show</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.
+
+## Props
+
+### Show
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+| `as` | `"div" \| "span"` | `"span"` | dropdown |
+| `above` | `"sm" \| "lg" \| "md" \| "xl" \| "2xl"` |  | dropdown |
+| `below` | `"sm" \| "lg" \| "md" \| "xl" \| "2xl"` |  | dropdown |
+| `containerAbove` | `"sm" \| "lg" \| "md" \| "xl" \| "2xl"` |  | dropdown |
+| `containerBelow` | `"sm" \| "lg" \| "md" \| "xl" \| "2xl"` |  | dropdown |

package/project/components/Show/preview.html

@@ -0,0 +1,16 @@
+<!-- @dsCard group="Layout" height=120 -->
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Show</title>
+<style>
+  body { margin: 0; background: var(--nx-color-background); color: var(--nx-color-foreground); font-family: var(--font-sans); }
+  #root { padding: var(--nx-spacing-6); }
+</style>
+</head>
+<body>
+<div id="root"></div>
+<script>(()=>{var R=Object.create;var x=Object.defineProperty;var K=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var l=(t,e)=>()=>{try{return e||t((e={exports:{}}).exports,e),e.exports}catch(o){throw e=0,o}};var D=(t,e,o,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of P(e))!N.call(t,r)&&r!==o&&x(t,r,{get:()=>e[r],enumerable:!(i=K(e,r))||i.enumerable});return t};var s=(t,e,o)=>(o=t!=null?R(S(t)):{},D(e||!t||!t.__esModule?x(o,"default",{value:t,enumerable:!0}):o,t));var f=l((V,w)=>{w.exports=window.Nxds});var p=l((j,u)=>{u.exports=window.React});var v=l((I,h)=>{h.exports={createRoot:window.ReactDOM.createRoot}});var m=s(f());var d=s(p());function g(t,e){return e===void 0?t:{...t,key:e}}function n(t,e,o){return(0,d.createElement)(t,g(e,o))}function a(t,e,o){let{children:i,...r}=e;return(0,d.createElement)(t,g(r,o),...i)}var y="nx:rounded-md nx:border-default nx:border-border-default nx:p-3 nx:text-foreground";function c(){return a("div",{className:"nx:flex nx:flex-col nx:gap-2",children:[n(m.Show,{above:"lg",as:"div",children:a("div",{className:y,children:["Visible when the viewport is ",n("strong",{children:"lg"})," (≥ 64rem) or wider."]})}),n(m.Show,{below:"lg",as:"div",children:a("div",{className:y,children:["Visible when the viewport is narrower than ",n("strong",{children:"lg"}),"."]})})]})}var b=s(p()),E=s(v());(0,E.createRoot)(document.getElementById("root")).render((0,b.createElement)(c));})();</script>
+</body>
+</html>

package/project/components/Sidebar/README.md

@@ -0,0 +1,290 @@
+# Sidebar
+
+Sidebar is the app's main navigation panel. It collapses to an icon rail or off screen, and opens as a Sheet on narrow screens. Wrap the app shell in `SidebarProvider` and put the page content in `SidebarInset`.
+
+## On the canvas
+
+```html
+<x-import component-from-global-scope="Nxds.Sidebar" side="right" variant="floating">Sidebar</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.
+
+## Parts
+
+- `Nxds.Sidebar` — The sidebar panel.
+- `Nxds.SidebarContent` — Scrollable `<nav>` landmark that holds the groups and menus.
+- `Nxds.SidebarFooter` — Bottom of the sidebar, for a user menu or sign-out button.
+- `Nxds.SidebarGroup` — Labelled section that groups related menu items.
+- `Nxds.SidebarGroupAction` — Small button at a group's top-right, such as "Add".
+- `Nxds.SidebarGroupContent` — Body of a `SidebarGroup`, usually a `SidebarMenu`.
+- `Nxds.SidebarGroupLabel` — Heading of a `SidebarGroup`.
+- `Nxds.SidebarHeader` — Top of the sidebar, for a logo or a workspace switcher.
+- `Nxds.SidebarInput` — `Input` styled for the sidebar, such as a filter field.
+- `Nxds.SidebarInset` — Main content region beside the sidebar.
+- `Nxds.SidebarMenu` — `<ul>` that holds a group's nav items.
+- `Nxds.SidebarMenuAction` — Secondary button on a menu item's right edge, such as "More".
+- `Nxds.SidebarMenuBadge` — Count or status pill on a menu item's right edge.
+- `Nxds.SidebarMenuButton` — Main clickable nav item.
+- `Nxds.SidebarMenuItem` — One `<li>` in a `SidebarMenu`.
+- `Nxds.SidebarMenuSkeleton` — Placeholder for a menu row while nav data loads.
+- `Nxds.SidebarMenuSub` — `<ul>` for a nested submenu, with a guide line on the left.
+- `Nxds.SidebarMenuSubButton` — Clickable item in a submenu.
+- `Nxds.SidebarMenuSubItem` — One `<li>` in a `SidebarMenuSub`.
+- `Nxds.SidebarProvider` — Holds the open state and the `Ctrl/Cmd+B` shortcut.
+- `Nxds.SidebarRail` — Thin strip on the sidebar's inner edge that toggles the sidebar on click.
+- `Nxds.SidebarSeparator` — `Separator` inset to line up with the sidebar's content.
+- `Nxds.SidebarTrigger` — Icon button that opens and closes the sidebar.
+
+## Props
+
+### Sidebar
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `side` | `"left" \| "right"` | `"left"` | dropdown |
+| `variant` | `"floating" \| "inset" \| "sidebar"` | `"sidebar"` | dropdown |
+| `collapsible` | `"none" \| "icon" \| "offcanvas"` | `"offcanvas"` | dropdown |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+
+### SidebarContent
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+
+### SidebarFooter
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+
+### SidebarGroup
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+
+### SidebarGroupAction
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `asChild` | `boolean` | `false` | toggle |
+| `disabled` | `boolean` |  | toggle |
+| `name` | `string` |  | text |
+| `type` | `"button" \| "submit" \| "reset"` |  | dropdown |
+| `value` | `string \| number \| readonly string[]` |  | none (object) |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+
+### SidebarGroupContent
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+
+### SidebarGroupLabel
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `asChild` | `boolean` | `false` | toggle |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+
+### SidebarHeader
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+
+### SidebarInput
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `children` | `React.ReactNode` |  | content |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `max` | `string \| number` |  | none (object) |
+| `min` | `string \| number` |  | none (object) |
+| `name` | `string` |  | text |
+| `type` | `HTMLInputTypeAttribute` |  | none (object) |
+| `step` | `string \| number` |  | none (object) |
+| `disabled` | `boolean` |  | toggle |
+| `value` | `string \| number \| readonly string[]` |  | none (object) |
+| `checked` | `boolean` |  | toggle |
+| `maxLength` | `number` |  | number |
+| `placeholder` | `string` |  | text |
+| `readOnly` | `boolean` |  | toggle |
+| `required` | `boolean` |  | toggle |
+| `variant` | `"ghost" \| "bordered" \| "borderless"` | `"bordered"` | dropdown |
+| `size` | `"default" \| "sm" \| "lg"` | `"default"` | dropdown |
+
+### SidebarInset
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+
+### SidebarMenu
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+
+### SidebarMenuAction
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `asChild` | `boolean` | `false` | toggle |
+| `showOnHover` | `boolean` | `false` | toggle |
+| `disabled` | `boolean` |  | toggle |
+| `name` | `string` |  | text |
+| `type` | `"button" \| "submit" \| "reset"` |  | dropdown |
+| `value` | `string \| number \| readonly string[]` |  | none (object) |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+
+### SidebarMenuBadge
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+
+### SidebarMenuButton
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `asChild` | `boolean` | `false` | toggle |
+| `isActive` | `boolean` | `false` | toggle |
+| `tooltip` | `string \| (TooltipContentProps & RefAttributes<HTMLDivElement>)` |  | none (object) |
+| `disabled` | `boolean` |  | toggle |
+| `name` | `string` |  | text |
+| `type` | `"button" \| "submit" \| "reset"` |  | dropdown |
+| `value` | `string \| number \| readonly string[]` |  | none (object) |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+| `variant` | `"default" \| "outline"` | `"default"` | dropdown |
+| `size` | `"default" \| "sm" \| "lg"` | `"default"` | dropdown |
+
+### SidebarMenuItem
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `value` | `string \| number \| readonly string[]` |  | none (object) |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+
+### SidebarMenuSkeleton
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `showIcon` | `boolean` | `false` | toggle |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+
+### SidebarMenuSub
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+
+### SidebarMenuSubButton
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `asChild` | `boolean` | `false` | toggle |
+| `size` | `"sm" \| "md"` | `"md"` | dropdown |
+| `isActive` | `boolean` | `false` | toggle |
+| `href` | `string` |  | text |
+| `target` | `HTMLAttributeAnchorTarget` |  | none (object) |
+| `type` | `string` |  | text |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+
+### SidebarMenuSubItem
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `value` | `string \| number \| readonly string[]` |  | none (object) |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+
+### SidebarProvider
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `defaultOpen` | `boolean` | `true` | toggle |
+| `open` | `boolean` |  | toggle |
+| `onOpenChange` | `(open: boolean) => void` |  | none (function) |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+
+### SidebarRail
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `disabled` | `boolean` |  | toggle |
+| `name` | `string` |  | text |
+| `type` | `"button" \| "submit" \| "reset"` |  | dropdown |
+| `value` | `string \| number \| readonly string[]` |  | none (object) |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+
+### SidebarSeparator
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | dropdown |
+| `decorative` | `boolean` | `true` | toggle |
+| `children` | `React.ReactNode` |  | content |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `asChild` | `boolean` |  | toggle |
+
+### SidebarTrigger
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `asChild` | `boolean` | `false` | toggle |
+| `loading` | `boolean` | `false` | toggle |
+| `startIcon` | `React.ReactNode` |  | none (element) |
+| `endIcon` | `React.ReactNode` |  | none (element) |
+| `disabled` | `boolean` |  | toggle |
+| `name` | `string` |  | text |
+| `type` | `"button" \| "submit" \| "reset"` | `"button"` | dropdown |
+| `value` | `string \| number \| readonly string[]` |  | none (object) |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+| `variant` | `"link" \| "default" \| "destructive" \| "error" \| "outline" \| "dashed" \| "secondary" \| "ghost"` | `"ghost"` | dropdown |
+| `size` | `"default" \| "sm" \| "lg" \| "icon-sm" \| "icon" \| "icon-lg"` | `"icon"` | dropdown |

package/project/components/Sidebar/preview.html

@@ -0,0 +1,16 @@
+<!-- @dsCard group="Navigation" height=420 -->
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Sidebar</title>
+<style>
+  body { margin: 0; background: var(--nx-color-background); color: var(--nx-color-foreground); font-family: var(--font-sans); }
+  #root { padding: var(--nx-spacing-6); }
+</style>
+</head>
+<body>
+<div id="root"></div>
+<script>(()=>{var R=Object.create;var c=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var G=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var p=(r,t)=>()=>{try{return t||r((t={exports:{}}).exports,t),t.exports}catch(o){throw t=0,o}};var P=(r,t,o,u)=>{if(t&&typeof t=="object"||typeof t=="function")for(let d of B(t))!N.call(r,d)&&d!==o&&c(r,d,{get:()=>t[d],enumerable:!(u=E(t,d))||u.enumerable});return r};var s=(r,t,o)=>(o=r!=null?R(G(r)):{},P(t||!r||!r.__esModule?c(o,"default",{value:r,enumerable:!0}):o,r));var x=p((K,S)=>{S.exports=window.Nxds.Icons});var h=p((D,f)=>{f.exports=window.Nxds});var b=p((H,y)=>{y.exports=window.React});var g=p((j,M)=>{M.exports={createRoot:window.ReactDOM.createRoot}});var i=s(x()),e=s(h());var l=s(b());function I(r,t){return t===void 0?r:{...r,key:t}}function n(r,t,o){return(0,l.createElement)(r,I(t,o))}function a(r,t,o){let{children:u,...d}=t;return(0,l.createElement)(r,I(d,o),...u)}function C({children:r}){return a(e.SidebarInset,{children:[a("header",{className:"nx:flex nx:h-16 nx:items-center nx:gap-2 nx:border-b-default nx:border-border-default nx:px-4",children:[n(e.SidebarTrigger,{}),n("span",{className:"nx:typography-label-default",children:"Dashboard"})]}),n("div",{className:"nx:min-h-[20rem] nx:p-4 nx:typography-label-default nx:text-muted-foreground",children:r??"Main content area."})]})}function m(){return n("div",{className:"nx:h-96 nx:w-full nx:overflow-hidden nx:rounded-lg nx:border-default nx:border-border-default",children:a(e.SidebarProvider,{style:{minHeight:"unset",height:"100%"},children:[a(e.Sidebar,{collapsible:"none",children:[n(e.SidebarHeader,{children:n(e.SidebarMenu,{children:n(e.SidebarMenuItem,{children:a(e.SidebarMenuButton,{size:"lg",children:[n(i.IconLayoutGrid,{}),n("span",{children:"Acme Inc"})]})})})}),n(e.SidebarContent,{children:a(e.SidebarGroup,{children:[n(e.SidebarGroupLabel,{children:"Variants"}),n(e.SidebarGroupContent,{children:a(e.SidebarMenu,{children:[n(e.SidebarMenuItem,{children:a(e.SidebarMenuButton,{isActive:!0,children:[n(i.IconHome,{}),n("span",{children:"Active"})]})}),n(e.SidebarMenuItem,{children:a(e.SidebarMenuButton,{variant:"outline",children:[n(i.IconInbox,{}),n("span",{children:"Outline"})]})}),n(e.SidebarMenuItem,{children:a(e.SidebarMenuButton,{size:"sm",children:[n(i.IconCalendar,{}),n("span",{children:"Small"})]})}),n(e.SidebarMenuItem,{children:n(e.SidebarMenuButton,{asChild:!0,children:a("a",{href:"https://example.com",children:[n(i.IconSettings,{}),n("span",{children:"As link"})]})})})]})})]})})]}),n(C,{})]})})}var w=s(b()),v=s(g());(0,v.createRoot)(document.getElementById("root")).render((0,w.createElement)(m));})();</script>
+</body>
+</html>

package/project/components/Skeleton/README.md

@@ -0,0 +1,30 @@
+# Skeleton
+
+Skeleton shows a pulsing placeholder where content is still loading. Use it to keep the layout steady until data arrives. For a short wait with no known layout, use Spinner.
+
+## On the canvas
+
+```html
+<div class="nx:flex nx:w-80 nx:flex-col nx:gap-4">
+  <x-import component-from-global-scope="Nxds.Skeleton" class-name="nx:h-40 nx:w-full nx:rounded-lg"></x-import>
+  <div class="nx:flex nx:items-center nx:gap-3">
+    <x-import component-from-global-scope="Nxds.Skeleton" class-name="nx:size-10 nx:rounded-full"></x-import>
+    <div class="nx:flex nx:flex-1 nx:flex-col nx:gap-2">
+      <x-import component-from-global-scope="Nxds.Skeleton" class-name="nx:h-4 nx:w-1/2"></x-import>
+      <x-import component-from-global-scope="Nxds.Skeleton" class-name="nx:h-3 nx:w-3/4"></x-import>
+    </div>
+  </div>
+</div>
+```
+
+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.
+
+## Props
+
+### Skeleton
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |

package/project/components/Skeleton/preview.html

@@ -0,0 +1,16 @@
+<!-- @dsCard group="Feedback" height=120 -->
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Skeleton</title>
+<style>
+  body { margin: 0; background: var(--nx-color-background); color: var(--nx-color-foreground); font-family: var(--font-sans); }
+  #root { padding: var(--nx-spacing-6); }
+</style>
+</head>
+<body>
+<div id="root"></div>
+<script>(()=>{var v=Object.create;var p=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var K=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var m=(n,e)=>()=>{try{return e||n((e={exports:{}}).exports,e),e.exports}catch(t){throw e=0,t}};var S=(n,e,t,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of K(e))!k.call(n,o)&&o!==t&&p(n,o,{get:()=>e[o],enumerable:!(l=R(e,o))||l.enumerable});return n};var s=(n,e,t)=>(t=n!=null?v(P(n)):{},S(e||!n||!n.__esModule?p(t,"default",{value:n,enumerable:!0}):t,n));var u=m((j,f)=>{f.exports=window.Nxds});var d=m((D,w)=>{w.exports=window.React});var N=m((F,E)=>{E.exports={createRoot:window.ReactDOM.createRoot}});var x=s(u());var a=s(d());function y(n,e){return e===void 0?n:{...n,key:e}}function r(n,e,t){return(0,a.createElement)(n,y(e,t))}function c(n,e,t){let{children:l,...o}=e;return(0,a.createElement)(n,y(o,t),...l)}function i(){return c("div",{className:"nx:flex nx:w-80 nx:flex-col nx:gap-4",children:[r(x.Skeleton,{className:"nx:h-40 nx:w-full nx:rounded-lg"}),c("div",{className:"nx:flex nx:items-center nx:gap-3",children:[r(x.Skeleton,{className:"nx:size-10 nx:rounded-full"}),c("div",{className:"nx:flex nx:flex-1 nx:flex-col nx:gap-2",children:[r(x.Skeleton,{className:"nx:h-4 nx:w-1/2"}),r(x.Skeleton,{className:"nx:h-3 nx:w-3/4"})]})]})]})}var g=s(d()),h=s(N());(0,h.createRoot)(document.getElementById("root")).render((0,g.createElement)(i));})();</script>
+</body>
+</html>

package/project/components/Slider/README.md

@@ -0,0 +1,38 @@
+# Slider
+
+Slider sets a number, or a range with two thumbs, by dragging along a track or with the arrow keys. Use it for settings such as volume or brightness. Give each slider an `aria-label` or `aria-labelledby`.
+
+## On the canvas
+
+```html
+<x-import component-from-global-scope="Nxds.Slider" size="comfortable" orientation="vertical">Slider</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.
+
+## Props
+
+### Slider
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `size` | `"standard" \| "comfortable"` | `"standard"` | dropdown |
+| `markers` | `SliderMarkers` |  | none (object) |
+| `name` | `string` |  | text |
+| `disabled` | `boolean` |  | toggle |
+| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | dropdown |
+| `dir` | `"ltr" \| "rtl"` |  | dropdown |
+| `min` | `number` | `0` | number |
+| `max` | `number` | `100` | number |
+| `step` | `number` | `1` | number |
+| `minStepsBetweenThumbs` | `number` |  | number |
+| `value` | `number[]` |  | none (object) |
+| `defaultValue` | `number[]` |  | none (object) |
+| `onValueChange` | `(value: number[]) => void` |  | none (function) |
+| `onValueCommit` | `(value: number[]) => void` |  | none (function) |
+| `inverted` | `boolean` |  | toggle |
+| `form` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `asChild` | `boolean` |  | toggle |

package/project/components/Slider/preview.html

@@ -0,0 +1,16 @@
+<!-- @dsCard group="Forms" height=120 -->
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Slider</title>
+<style>
+  body { margin: 0; background: var(--nx-color-background); color: var(--nx-color-foreground); font-family: var(--font-sans); }
+  #root { padding: var(--nx-spacing-6); }
+</style>
+</head>
+<body>
+<div id="root"></div>
+<script>(()=>{var K=Object.create;var s=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var i=(t,e)=>()=>{try{return e||t((e={exports:{}}).exports,e),e.exports}catch(r){throw e=0,r}};var S=(t,e,r,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of g(e))!D.call(t,o)&&o!==r&&s(t,o,{get:()=>e[o],enumerable:!(l=P(e,o))||l.enumerable});return t};var n=(t,e,r)=>(r=t!=null?K(h(t)):{},S(e||!t||!t.__esModule?s(r,"default",{value:t,enumerable:!0}):r,t));var u=i((j,c)=>{c.exports=window.Nxds});var a=i((v,f)=>{f.exports=window.React});var w=i((B,x)=>{x.exports={createRoot:window.ReactDOM.createRoot}});var y=n(u());var m=n(a());function T(t,e){return e===void 0?t:{...t,key:e}}function p(t,e,r){return(0,m.createElement)(t,T(e,r))}function d(){return p("div",{className:"nx:w-96",children:p(y.Slider,{defaultValue:[50],max:100,step:1,"aria-label":"Volume"})})}var E=n(a()),R=n(w());(0,R.createRoot)(document.getElementById("root")).render((0,E.createElement)(d));})();</script>
+</body>
+</html>