@nxds/claude-design 0.0.0-stage → 0.6.0

package/project/README.md

@@ -0,0 +1,97 @@
+nxds is a calm, dense product UI system: neutral surfaces, one brand colour, and state carried by tokens rather than decoration. Build every screen from the `Nxds` components and the tokens below.
+
+## Content fundamentals
+
+- Write in plain, direct sentences. Address the reader as "you".
+- Use sentence case for every label, title, button and menu item: "Save changes", not "Save Changes".
+- Name the action on a button with a verb: "Create project", "Delete", "Invite people".
+- Keep labels short. Put explanation in a description or helper text, never in the label.
+- Write errors as what happened and what to do: "Enter an email address."
+- No emoji in product copy, and no exclamation marks.
+
+## Colour
+
+nxds is neutral-first. Surfaces are near-white in Light and near-black in Dark. Colour marks meaning, not decoration.
+
+| Surface               | Fill                      | Text on it                      |
+| --------------------- | ------------------------- | ------------------------------- |
+| Page                  | `nx-color-background`     | `nx-color-foreground`           |
+| Card, panel           | `nx-color-container`      | `nx-color-container-foreground` |
+| Menu, popover, dialog | `nx-color-popover`        | `nx-color-popover-foreground`   |
+| Sidebar               | `nx-color-nav-background` | `nx-color-nav-foreground`       |
+| Quiet well            | `nx-color-muted`          | `nx-color-muted-foreground`     |
+
+- Use `nx-color-primary-background` with `nx-color-primary-foreground` for the one main action in a view. Use `secondary` for the actions beside it.
+- Show state with its family: `success`, `warning`, `error` and `information`. Use the solid `-background` fill for strong emphasis, and `-subtle` with `-subtle-foreground` for alerts, badges and banners.
+- Pair every fill with the foreground its usage note names. Don't put `nx-color-muted-foreground` on a coloured fill.
+- Hover and press use their own tokens, such as `nx-color-background-hover` and `nx-color-background-active`. Never fade a colour with opacity.
+- Separate regions with `nx-color-border-default`. Use `nx-color-border-hairline` between rows.
+- Show focus with `nx-color-focus-default`, and `nx-color-focus-error` on an invalid control.
+- Plot chart series with `nx-color-chart-categorical-1` to `nx-color-chart-categorical-5`, in order.
+- Use the raw palette (`nx-color-blue-500` and its neighbours) only for one-off illustration. Components read semantic tokens only.
+
+Status is never colour alone. Every alert, badge and toast carries a word or an icon too.
+
+## Type
+
+nxds sets text in the system UI face and code in the system monospace face.
+
+| Use                         | Style                                             |
+| --------------------------- | ------------------------------------------------- |
+| Page title                  | `typography-heading-large`                        |
+| Section title               | `typography-heading-medium`                       |
+| Card title                  | `typography-heading-small`                        |
+| Body copy                   | `typography-body-default`                         |
+| Secondary copy, table cells | `typography-body-small`                           |
+| Form labels                 | `typography-label-default`                        |
+| Overlines, small caps       | `typography-label-caps`                           |
+| Code                        | `typography-code-block`, `typography-code-inline` |
+
+Body copy is 14px. Keep one heading level per region, and step down one size at a time.
+
+## Spacing and layout
+
+- Space with the 4px scale: `nx-spacing-1` is 4px, `nx-spacing-2` 8px, `nx-spacing-4` 16px, `nx-spacing-6` 24px.
+- Pad cards and panels with `nx-container-p`. Gap their contents with `nx-container-gap`.
+- Separate page sections with `nx-layout-section-gap`, and stack form rows with `nx-layout-stack-gap`.
+- Lay out screens with flex or grid gaps from the scale. Don't hard-code pixel values.
+
+## Shape and elevation
+
+- Round controls, inputs and cards with `nx-radius-md`. Buttons use `nx-radius-base`. Pills and avatars use `nx-radius-full`.
+- Draw every border at `nx-borderwidth-default`. Use `nx-borderwidth-thin` for hairlines.
+- Prefer borders to shadows. Cards sit at `nx-shadow-sm`. Popovers, menus, dialogs and sheets lift with `nx-shadow-lg` on a frosted `nx-color-popover-alpha` surface. Flat content takes no shadow.
+- Stack layers with the z-index tokens: `nx-z-index-sticky`, `nx-z-index-modal`, `nx-z-index-popover`, `nx-z-index-toast`.
+
+## Motion
+
+Motion answers input and then gets out of the way. Popovers, menus and routine state changes take 200ms, small fades and indicators 150ms, and pressed states 100ms. Nothing bounces. The tokens file has no motion family, so motion lives in the components.
+
+## Iconography
+
+- nxds uses Tabler icons, outline style, at 16px beside text. They are `Nxds.Icons.IconName`, such as `Nxds.Icons.IconPlus`.
+- An icon takes the colour of its text. Don't tint icons on their own.
+- An icon-only button needs an `aria-label`.
+- No emoji as icons.
+
+## Using the components
+
+- Mount components from `Nxds`, such as `Nxds.Button` and `Nxds.DialogContent`. Each component's card lists its parts and props.
+- Compose a component from its parts, as its README shows: `Nxds.Card` holds `Nxds.CardHeader`, `Nxds.CardTitle` and `Nxds.CardContent`.
+- Overlays (`Dialog`, `Popover`, `DropdownMenu`, `Select`, `Tooltip`) open from a trigger part, such as `Nxds.DialogTrigger`.
+- Wrap a sidebar layout in `Nxds.SidebarProvider`, and mount `Nxds.Toaster` once to show toasts.
+- Draw charts with `Nxds.ChartContainer` around `Nxds.Recharts` parts.
+
+## Themes
+
+The system has a Light and a Dark theme. Set `data-theme="dark"` on `<html>` to switch, or add the `dark` class the way nxds apps do. Both switch every token and component.
+
+## Appearance
+
+This system shows the default nxds appearance: a near-black brand colour on zinc surfaces, default density, subtle corners, quiet shadows and normal strokes. nxds apps can change these at runtime. Brand colour, surface tone, contrast, density, corners, elevation and stroke are appearance settings, not tokens, so they aren't editable here.
+
+## Canvas rules
+
+- Mount a component with `<x-import component-from-global-scope="Nxds.Button">`. Attributes set props, kebab-case to camelCase, and element content becomes `children`.
+- An attribute holds text only. A prop that takes an element, a function or an object has no attribute.
+- Lay out artboards with the spacing tokens, not raw pixel values.

package/project/components/Accordion/README.md

@@ -0,0 +1,84 @@
+# Accordion
+
+Accordion shows and hides stacked sections of content. Use it when readers need only some sections of a long page. For a single section, use Collapsible.
+
+## On the canvas
+
+```html
+<x-import component-from-global-scope="Nxds.Accordion" type="single" collapsible variant="stacked" class-name="nx:w-full nx:max-w-md">
+  <x-import component-from-global-scope="Nxds.AccordionItem" value="item-1">
+    <x-import component-from-global-scope="Nxds.AccordionTrigger">Is it accessible?</x-import>
+    <x-import component-from-global-scope="Nxds.AccordionContent">Yes. It adheres to the WAI-ARIA design pattern.</x-import>
+  </x-import>
+  <x-import component-from-global-scope="Nxds.AccordionItem" value="item-2">
+    <x-import component-from-global-scope="Nxds.AccordionTrigger">Is it styled?</x-import>
+    <x-import component-from-global-scope="Nxds.AccordionContent">Yes. It comes with default styles that match the nxds design system.</x-import>
+  </x-import>
+  <x-import component-from-global-scope="Nxds.AccordionItem" value="item-3">
+    <x-import component-from-global-scope="Nxds.AccordionTrigger">Is it animated?</x-import>
+    <x-import component-from-global-scope="Nxds.AccordionContent">Yes. It has smooth open/close animations built-in.</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.Accordion` — Stacks sections that expand and collapse.
+- `Nxds.AccordionContent`
+- `Nxds.AccordionItem`
+- `Nxds.AccordionTrigger`
+
+## Props
+
+### Accordion
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `type` | `"single" \| "multiple"` |  | dropdown |
+| `value` | `string \| string[]` |  | none (object) |
+| `defaultValue` | `string \| string[]` |  | none (object) |
+| `onValueChange` | `((value: string) => void) \| ((value: string[]) => void)` |  | none (function) |
+| `disabled` | `boolean` |  | toggle |
+| `orientation` | `"horizontal" \| "vertical"` |  | dropdown |
+| `dir` | `"ltr" \| "rtl"` |  | dropdown |
+| `children` | `React.ReactNode` |  | content |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `asChild` | `boolean` |  | toggle |
+| `variant` | `"stacked" \| "floating"` | `"stacked"` | dropdown |
+
+### AccordionContent
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `children` | `React.ReactNode` |  | content |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `asChild` | `boolean` |  | toggle |
+| `forceMount` | `true` |  | toggle |
+
+### AccordionItem
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `disabled` | `boolean` |  | toggle |
+| `value` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `asChild` | `boolean` |  | toggle |
+
+### AccordionTrigger
+
+| 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/Accordion/preview.html

@@ -0,0 +1,16 @@
+<!-- @dsCard group="Data display" height=120 -->
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Accordion</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 E=Object.create;var u=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var T=Object.getOwnPropertyNames;var K=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty;var m=(t,e)=>()=>{try{return e||t((e={exports:{}}).exports,e),e.exports}catch(n){throw e=0,n}};var v=(t,e,n,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of T(e))!P.call(t,r)&&r!==n&&u(t,r,{get:()=>e[r],enumerable:!(s=R(e,r))||s.enumerable});return t};var d=(t,e,n)=>(n=t!=null?E(K(t)):{},v(e||!t||!t.__esModule?u(n,"default",{value:t,enumerable:!0}):n,t));var y=m((b,A)=>{A.exports=window.Nxds});var l=m((D,f)=>{f.exports=window.React});var I=m((N,x)=>{x.exports={createRoot:window.ReactDOM.createRoot}});var o=d(y());var a=d(l());function g(t,e){return e===void 0?t:{...t,key:e}}function c(t,e,n){return(0,a.createElement)(t,g(e,n))}function i(t,e,n){let{children:s,...r}=e;return(0,a.createElement)(t,g(r,n),...s)}function p(){return i(o.Accordion,{type:"single",collapsible:!0,variant:"stacked",className:"nx:w-full nx:max-w-md",children:[i(o.AccordionItem,{value:"item-1",children:[c(o.AccordionTrigger,{children:"Is it accessible?"}),c(o.AccordionContent,{children:"Yes. It adheres to the WAI-ARIA design pattern."})]}),i(o.AccordionItem,{value:"item-2",children:[c(o.AccordionTrigger,{children:"Is it styled?"}),c(o.AccordionContent,{children:"Yes. It comes with default styles that match the nxds design system."})]}),i(o.AccordionItem,{value:"item-3",children:[c(o.AccordionTrigger,{children:"Is it animated?"}),c(o.AccordionContent,{children:"Yes. It has smooth open/close animations built-in."})]})]})}var w=d(l()),h=d(I());(0,h.createRoot)(document.getElementById("root")).render((0,w.createElement)(p));})();</script>
+</body>
+</html>

package/project/components/Alert/README.md

@@ -0,0 +1,97 @@
+# Alert
+
+Alert shows a status message inside the page. Use it for information, success, warning and error messages. Compose the icon, text, actions and close button as children.
+
+- Stack layout: use no actions, or one or two Button actions. Leave out AlertClose.
+- Inline layout: use AlertClose alone, one or two Button actions, or Buttons plus AlertClose.
+- AlertClose doesn't remove the alert. Remove it in your own `onClick` handler.
+
+## On the canvas
+
+```html
+<x-import component-from-global-scope="Nxds.Alert" layout="stack" presentation="card" variant="default" class-name="nx:max-w-md">
+  <x-import component-from-global-scope="Nxds.AlertIcon">
+    <x-import component-from-global-scope="Nxds.Icons.IconInfoCircle"></x-import>
+  </x-import>
+  <x-import component-from-global-scope="Nxds.AlertTitle">Information</x-import>
+  <x-import component-from-global-scope="Nxds.AlertDescription">This is an informational alert with an icon.</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.Alert` — Shows a status message inside the page.
+- `Nxds.AlertActions` — Holds one or two `Button` actions.
+- `Nxds.AlertClose` — Close button, labelled "Dismiss alert" by default.
+- `Nxds.AlertContent` — Wraps the title and description.
+- `Nxds.AlertDescription` — Body text of an alert.
+- `Nxds.AlertIcon` — Leading icon.
+- `Nxds.AlertTitle` — Alert heading.
+
+## Props
+
+### Alert
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+| `layout` | `"inline" \| "stack"` | `"stack"` | dropdown |
+| `variant` | `"default" \| "destructive" \| "success" \| "information" \| "warning"` | `"default"` | dropdown |
+| `presentation` | `"banner" \| "card"` | `"card"` | dropdown |
+
+### AlertActions
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+
+### AlertClose
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `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 |
+
+### AlertContent
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+
+### AlertDescription
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+
+### AlertIcon
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+
+### AlertTitle
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `asChild` | `boolean` | `false` | toggle |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |

package/project/components/Alert/preview.html

@@ -0,0 +1,16 @@
+<!-- @dsCard group="Feedback" height=120 -->
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Alert</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 P=Object.create;var d=Object.defineProperty;var D=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var N=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var l=(t,e)=>()=>{try{return e||t((e={exports:{}}).exports,e),e.exports}catch(r){throw e=0,r}};var k=(t,e,r,c)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of g(e))!j.call(t,n)&&n!==r&&d(t,n,{get:()=>e[n],enumerable:!(c=D(e,n))||c.enumerable});return t};var i=(t,e,r)=>(r=t!=null?P(N(t)):{},k(e||!t||!t.__esModule?d(r,"default",{value:t,enumerable:!0}):r,t));var u=l((B,f)=>{f.exports=window.Nxds.Icons});var y=l((C,x)=>{x.exports=window.Nxds});var m=l((F,w)=>{w.exports=window.React});var R=l((V,h)=>{h.exports={createRoot:window.ReactDOM.createRoot}});var I=i(u()),o=i(y());var s=i(m());function A(t,e){return e===void 0?t:{...t,key:e}}function a(t,e,r){return(0,s.createElement)(t,A(e,r))}function E(t,e,r){let{children:c,...n}=e;return(0,s.createElement)(t,A(n,r),...c)}function p(){return E(o.Alert,{layout:"stack",presentation:"card",variant:"default",className:"nx:max-w-md",children:[a(o.AlertIcon,{children:a(I.IconInfoCircle,{})}),a(o.AlertTitle,{children:"Information"}),a(o.AlertDescription,{children:"This is an informational alert with an icon."})]})}var T=i(m()),K=i(R());(0,K.createRoot)(document.getElementById("root")).render((0,T.createElement)(p));})();</script>
+</body>
+</html>

package/project/components/AlertDialog/README.md

@@ -0,0 +1,170 @@
+# AlertDialog
+
+AlertDialog makes the user confirm or cancel before an action with serious results, such as deleting data. For lower-stakes modal tasks, use Dialog. For edge panels, use Sheet, or Drawer for drag-to-dismiss.
+
+## On the canvas
+
+```html
+<x-import component-from-global-scope="Nxds.AlertDialog">
+  <x-import component-from-global-scope="Nxds.AlertDialogTrigger" as-child>
+    <x-import component-from-global-scope="Nxds.Button" variant="outline">Show dialog</x-import>
+  </x-import>
+  <x-import component-from-global-scope="Nxds.AlertDialogContent">
+    <x-import component-from-global-scope="Nxds.AlertDialogHeader">
+      <x-import component-from-global-scope="Nxds.AlertDialogTitle">Are you absolutely sure?</x-import>
+      <x-import component-from-global-scope="Nxds.AlertDialogDescription">This action cannot be undone. This will permanently update your account settings.</x-import>
+    </x-import>
+    <x-import component-from-global-scope="Nxds.AlertDialogFooter">
+      <x-import component-from-global-scope="Nxds.AlertDialogCancel">Cancel</x-import>
+      <x-import component-from-global-scope="Nxds.AlertDialogAction">Continue</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.AlertDialog` — Modal that makes the user confirm or cancel before continuing.
+- `Nxds.AlertDialogAction` — Confirm button.
+- `Nxds.AlertDialogBody` — Holds the main content, aligned with the header and footer.
+- `Nxds.AlertDialogCancel` — Cancel button, styled as an `outline` Button.
+- `Nxds.AlertDialogContent` — Dialog panel, rendered in a portal over the overlay.
+- `Nxds.AlertDialogDescription` — Explains the result of the action.
+- `Nxds.AlertDialogFooter` — Holds the action buttons.
+- `Nxds.AlertDialogHeader` — Holds the title and description.
+- `Nxds.AlertDialogOverlay` — Dimmed backdrop behind the alert dialog.
+- `Nxds.AlertDialogPortal` — Renders the alert dialog into `document.body`.
+- `Nxds.AlertDialogTitle` — Dialog title.
+- `Nxds.AlertDialogTrigger` — Opens the alert dialog.
+
+## Props
+
+### AlertDialog
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `children` | `React.ReactNode` |  | content |
+| `defaultOpen` | `boolean` |  | toggle |
+| `open` | `boolean` |  | toggle |
+| `onOpenChange` | `(open: boolean) => void` |  | none (function) |
+
+### AlertDialogAction
+
+| 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) |
+| `variant` | `"link" \| "default" \| "destructive" \| "error" \| "outline" \| "dashed" \| "secondary" \| "ghost"` | `"default"` | dropdown |
+| `size` | `"default" \| "sm" \| "lg" \| "icon-sm" \| "icon" \| "icon-lg"` | `"default"` | dropdown |
+
+### AlertDialogBody
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+
+### AlertDialogCancel
+
+| 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) |
+| `variant` | `"link" \| "default" \| "destructive" \| "error" \| "outline" \| "dashed" \| "secondary" \| "ghost"` | `"outline"` | dropdown |
+| `size` | `"default" \| "sm" \| "lg" \| "icon-sm" \| "icon" \| "icon-lg"` | `"default"` | dropdown |
+
+### AlertDialogContent
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `variant` | `"center" \| "default"` | `"default"` | dropdown |
+| `children` | `React.ReactNode` |  | content |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `asChild` | `boolean` |  | toggle |
+| `forceMount` | `true` |  | toggle |
+| `onEscapeKeyDown` | `(event: KeyboardEvent) => void` |  | none (function) |
+| `onFocusOutside` | `(event: FocusOutsideEvent) => void` |  | none (function) |
+| `onOpenAutoFocus` | `(event: Event) => void` |  | none (function) |
+| `onCloseAutoFocus` | `(event: Event) => void` |  | none (function) |
+
+### AlertDialogDescription
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `children` | `React.ReactNode` |  | content |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `asChild` | `boolean` |  | toggle |
+
+### AlertDialogFooter
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+
+### AlertDialogHeader
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+| `variant` | `"center" \| "default"` | `"default"` | dropdown |
+
+### AlertDialogOverlay
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `children` | `React.ReactNode` |  | content |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `asChild` | `boolean` |  | toggle |
+| `forceMount` | `true` |  | toggle |
+
+### AlertDialogPortal
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `children` | `React.ReactNode` |  | content |
+| `container` | `Element \| DocumentFragment` |  | none (object) |
+| `forceMount` | `true` |  | toggle |
+
+### AlertDialogTitle
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `children` | `React.ReactNode` |  | content |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `asChild` | `boolean` |  | toggle |
+
+### AlertDialogTrigger
+
+| 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/AlertDialog/preview.html

@@ -0,0 +1,16 @@
+<!-- @dsCard group="Overlays" height=120 -->
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>AlertDialog</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 h=Object.create;var m=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var K=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty;var p=(t,e)=>()=>{try{return e||t((e={exports:{}}).exports,e),e.exports}catch(r){throw e=0,r}};var B=(t,e,r,c)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of R(e))!P.call(t,n)&&n!==r&&m(t,n,{get:()=>e[n],enumerable:!(c=C(e,n))||c.enumerable});return t};var i=(t,e,r)=>(r=t!=null?h(K(t)):{},B(e||!t||!t.__esModule?m(r,"default",{value:t,enumerable:!0}):r,t));var s=p((b,A)=>{A.exports=window.Nxds});var u=p((j,d)=>{d.exports=window.React});var x=p((v,w)=>{w.exports={createRoot:window.ReactDOM.createRoot}});var o=i(s()),f=i(s());var g=i(u());function y(t,e){return e===void 0?t:{...t,key:e}}function l(t,e,r){return(0,g.createElement)(t,y(e,r))}function a(t,e,r){let{children:c,...n}=e;return(0,g.createElement)(t,y(n,r),...c)}function D(){return a(o.AlertDialog,{children:[l(o.AlertDialogTrigger,{asChild:!0,children:l(f.Button,{variant:"outline",children:"Show dialog"})}),a(o.AlertDialogContent,{children:[a(o.AlertDialogHeader,{children:[l(o.AlertDialogTitle,{children:"Are you absolutely sure?"}),l(o.AlertDialogDescription,{children:"This action cannot be undone. This will permanently update your account settings."})]}),a(o.AlertDialogFooter,{children:[l(o.AlertDialogCancel,{children:"Cancel"}),l(o.AlertDialogAction,{children:"Continue"})]})]})]})}var T=i(u()),E=i(x());(0,E.createRoot)(document.getElementById("root")).render((0,T.createElement)(D));})();</script>
+</body>
+</html>

package/project/components/AspectRatio/README.md

@@ -0,0 +1,23 @@
+# AspectRatio
+
+AspectRatio keeps its content at a fixed width-to-height ratio. Use it for images, video, embeds and maps. AspectRatio fills its parent width, so place it in a sized container.
+
+## On the canvas
+
+```html
+<x-import component-from-global-scope="Nxds.AspectRatio">AspectRatio</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
+
+### AspectRatio
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `ratio` | `number` |  | number |
+| `children` | `React.ReactNode` |  | content |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `asChild` | `boolean` |  | toggle |

package/project/components/AspectRatio/preview.html

@@ -0,0 +1,16 @@
+<!-- @dsCard group="Layout" height=120 -->
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>AspectRatio</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 g=Object.create;var m=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var K=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var s=(e,t)=>()=>{try{return t||e((t={exports:{}}).exports,t),t.exports}catch(n){throw t=0,n}};var v=(e,t,n,d)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of h(t))!b.call(e,r)&&r!==n&&m(e,r,{get:()=>t[r],enumerable:!(d=P(t,r))||d.enumerable});return e};var i=(e,t,n)=>(n=e!=null?g(K(e)):{},v(t||!e||!e.__esModule?m(n,"default",{value:e,enumerable:!0}):n,e));var u=s((N,p)=>{p.exports=window.Nxds});var a=s((T,x)=>{x.exports=window.React});var w=s((F,y)=>{y.exports={createRoot:window.ReactDOM.createRoot}});var f=i(u());var l=i(a());function j(e,t){return t===void 0?e:{...e,key:t}}function o(e,t,n){return(0,l.createElement)(e,j(t,n))}function A({label:e}){return o("div",{className:"nx:flex nx:size-full nx:items-center nx:justify-center nx:rounded-md nx:bg-muted nx:text-muted-foreground nx:typography-label-small",children:e})}function c(){return o("div",{className:"nx:w-80",children:o(f.AspectRatio,{ratio:16/9,children:o(A,{label:"16 / 9"})})})}var R=i(a()),E=i(w());(0,E.createRoot)(document.getElementById("root")).render((0,R.createElement)(c));})();</script>
+</body>
+</html>