@nxds/claude-design 0.0.0-stage → 0.6.0

package/project/components/Toolbar/README.md

@@ -0,0 +1,123 @@
+# Toolbar
+
+Toolbar groups related controls behind one Tab stop. Arrow keys move between controls, and Home and End jump to the first and last. For actions that each need their own Tab stop, use a row of Buttons.
+
+- Label the toolbar with `aria-label` or `aria-labelledby`.
+- Build it from ToolbarButton, ToolbarLink, ToolbarToggleGroup and ToolbarToggleItem so every control joins the arrow-key order.
+- ToolbarButton and ToolbarLink take Button `variant` and `size`, but not `loading` or icon slots.
+- Use `asChild` to make a toolbar control a menu trigger.
+- Keep text fields outside the toolbar, because arrow keys would conflict with typing.
+- In narrow containers, controls wrap in DOM order and arrow keys still reach every row.
+- Your app owns the commands, selection, visibility and placement.
+
+## On the canvas
+
+```html
+<x-import component-from-global-scope="Nxds.Toolbar" orientation="horizontal" dir="ltr">Toolbar</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.Toolbar` — Label the toolbar with aria-label or aria-labelledby.
+- `Nxds.ToolbarButton`
+- `Nxds.ToolbarGroup`
+- `Nxds.ToolbarLink`
+- `Nxds.ToolbarSeparator`
+- `Nxds.ToolbarToggleGroup`
+- `Nxds.ToolbarToggleItem`
+
+## Props
+
+### Toolbar
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `orientation` | `"horizontal" \| "vertical"` |  | dropdown |
+| `loop` | `boolean` |  | toggle |
+| `dir` | `"ltr" \| "rtl"` |  | dropdown |
+| `children` | `React.ReactNode` |  | content |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `asChild` | `boolean` |  | toggle |
+
+### ToolbarButton
+
+| 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"` | `"ghost"` | dropdown |
+| `size` | `"default" \| "sm" \| "lg" \| "icon-sm" \| "icon" \| "icon-lg"` | `"sm"` | dropdown |
+
+### ToolbarGroup
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+
+### ToolbarLink
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `children` | `React.ReactNode` |  | content |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `target` | `HTMLAttributeAnchorTarget` |  | none (object) |
+| `type` | `string` |  | text |
+| `href` | `string` |  | text |
+| `asChild` | `boolean` |  | toggle |
+| `variant` | `"link" \| "default" \| "destructive" \| "error" \| "outline" \| "dashed" \| "secondary" \| "ghost"` | `"ghost"` | dropdown |
+| `size` | `"default" \| "sm" \| "lg" \| "icon-sm" \| "icon" \| "icon-lg"` | `"sm"` | dropdown |
+
+### ToolbarSeparator
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `children` | `React.ReactNode` |  | content |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `orientation` | `"horizontal" \| "vertical"` |  | dropdown |
+| `asChild` | `boolean` |  | toggle |
+| `decorative` | `boolean` |  | toggle |
+
+### ToolbarToggleGroup
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `children` | `React.ReactNode` |  | content |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `type` | `"single" \| "multiple"` |  | dropdown |
+| `orientation` | `"horizontal" \| "vertical"` |  | dropdown |
+| `defaultValue` | `string \| string[]` |  | none (object) |
+| `dir` | `"ltr" \| "rtl"` |  | dropdown |
+| `asChild` | `boolean` |  | toggle |
+| `disabled` | `boolean` |  | toggle |
+| `value` | `string \| string[]` |  | none (object) |
+| `loop` | `boolean` |  | toggle |
+| `onValueChange` | `((value: string) => void) \| ((value: string[]) => void)` |  | none (function) |
+| `rovingFocus` | `boolean` |  | toggle |
+
+### ToolbarToggleItem
+
+| 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` |  | text |
+| `size` | `"default" \| "sm" \| "lg" \| "icon-sm" \| "icon" \| "icon-lg"` | `"sm"` | dropdown |

package/project/components/Toolbar/preview.html

@@ -0,0 +1,16 @@
+<!-- @dsCard group="Actions" height=120 -->
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Toolbar</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 x=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,K=Object.prototype.hasOwnProperty;var c=(t,e)=>()=>{try{return e||t((e={exports:{}}).exports,e),e.exports}catch(a){throw e=0,a}};var S=(t,e,a,p)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of P(e))!K.call(t,s)&&s!==a&&x(t,s,{get:()=>e[s],enumerable:!(p=B(e,s))||p.enumerable});return t};var d=(t,e,a)=>(a=t!=null?E(k(t)):{},S(e||!t||!t.__esModule?x(a,"default",{value:t,enumerable:!0}):a,t));var m=c((D,b)=>{b.exports=window.React});var h=c((j,y)=>{y.exports=window.Nxds.Icons});var g=c((F,w)=>{w.exports=window.Nxds});var v=c((A,N)=>{N.exports={createRoot:window.ReactDOM.createRoot}});var T=d(m()),l=d(h()),r=d(g()),n=d(g());var u=d(m());function I(t,e){return e===void 0?t:{...t,key:e}}function o(t,e,a){return(0,u.createElement)(t,I(e,a))}function i(t,e,a){let{children:p,...s}=e;return(0,u.createElement)(t,I(s,a),...p)}function U(){let t=T.useId(),[e,a]=T.useState([]);return i("div",{className:"nx:grid nx:gap-4",children:[i(r.Toolbar,{"aria-label":"Text formatting",children:[i(n.Tooltip,{children:[o(n.TooltipTrigger,{asChild:!0,children:o("span",{className:"nx:inline-flex",children:o(r.ToolbarButton,{size:"icon-sm","aria-label":"Undo formatting",onClick:()=>a([]),className:"nx:text-muted-foreground",children:o(l.IconArrowBackUp,{"aria-hidden":"true"})})})}),o(n.TooltipContent,{children:"Reset formatting"})]}),o(r.ToolbarSeparator,{className:"nx:data-[orientation=vertical]:h-4"}),i(r.ToolbarToggleGroup,{type:"multiple",value:e,onValueChange:a,"aria-label":"Text style",children:[i(n.Tooltip,{children:[o(n.TooltipTrigger,{asChild:!0,children:o("span",{className:"nx:inline-flex",children:o(r.ToolbarToggleItem,{value:"bold","aria-label":"Bold",size:"icon-sm",children:o(l.IconBold,{"aria-hidden":"true"})})})}),o(n.TooltipContent,{children:"Bold"})]}),i(n.Tooltip,{children:[o(n.TooltipTrigger,{asChild:!0,children:o("span",{className:"nx:inline-flex",children:o(r.ToolbarToggleItem,{value:"italic","aria-label":"Italic",size:"icon-sm",children:o(l.IconItalic,{"aria-hidden":"true"})})})}),o(n.TooltipContent,{children:"Italic"})]}),i(n.Tooltip,{children:[o(n.TooltipTrigger,{asChild:!0,children:o("span",{className:"nx:inline-flex",children:o(r.ToolbarToggleItem,{value:"underline","aria-label":"Underline",size:"icon-sm",children:o(l.IconUnderline,{"aria-hidden":"true"})})})}),o(n.TooltipContent,{children:"Underline"})]})]}),o(r.ToolbarSeparator,{className:"nx:data-[orientation=vertical]:h-4"}),o(r.ToolbarLink,{className:"nx:text-muted-foreground",href:`#${t}`,children:"Preview"})]}),o("p",{id:t,className:"nx:typography-body-default nx:text-muted-foreground",style:{fontWeight:e.includes("bold")?700:void 0,fontStyle:e.includes("italic")?"italic":void 0,textDecoration:e.includes("underline")?"underline":void 0},children:"Select formatting to update this preview."})]})}function f(){return o(U,{})}var C=d(m()),R=d(v());(0,R.createRoot)(document.getElementById("root")).render((0,C.createElement)(f));})();</script>
+</body>
+</html>

package/project/components/Tooltip/README.md

@@ -0,0 +1,84 @@
+# Tooltip
+
+Tooltip shows a short hint when users hover over or focus a trigger. Use it for brief labels, such as the name of an icon button. Wrap a group of tooltips in `TooltipProvider` to share one open delay.
+
+## On the canvas
+
+```html
+<x-import component-from-global-scope="Nxds.Tooltip">
+  <x-import component-from-global-scope="Nxds.TooltipTrigger" as-child>
+    <x-import component-from-global-scope="Nxds.Button" variant="outline">Hover me</x-import>
+  </x-import>
+  <x-import component-from-global-scope="Nxds.TooltipContent">
+    <p>This is a tooltip</p>
+  </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.Tooltip` — Root of one tooltip.
+- `Nxds.TooltipContent` — Popup that shows the tooltip text.
+- `Nxds.TooltipProvider` — Optional.
+- `Nxds.TooltipTrigger` — Element that opens the tooltip on hover or focus.
+
+## Props
+
+### Tooltip
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `children` | `React.ReactNode` |  | content |
+| `open` | `boolean` |  | toggle |
+| `defaultOpen` | `boolean` |  | toggle |
+| `onOpenChange` | `(open: boolean) => void` |  | none (function) |
+| `delayDuration` | `number` |  | number |
+| `disableHoverableContent` | `boolean` |  | toggle |
+
+### TooltipContent
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `forceMount` | `true` |  | toggle |
+| `aria-label` | `string` |  | text |
+| `onEscapeKeyDown` | `(event: KeyboardEvent) => void` |  | none (function) |
+| `onPointerDownOutside` | `(event: PointerDownOutsideEvent) => void` |  | none (function) |
+| `children` | `React.ReactNode` |  | content |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `align` | `"end" \| "center" \| "start"` |  | dropdown |
+| `asChild` | `boolean` |  | toggle |
+| `side` | `"top" \| "bottom" \| "left" \| "right"` |  | dropdown |
+| `sideOffset` | `number` | `4` | number |
+| `alignOffset` | `number` |  | number |
+| `arrowPadding` | `number` |  | number |
+| `avoidCollisions` | `boolean` |  | toggle |
+| `collisionBoundary` | `Element \| Boundary[]` |  | none (object) |
+| `collisionPadding` | `number \| Partial<Record<"top" \| "bottom" \| "left" \| "right", number>>` |  | none (object) |
+| `sticky` | `"partial" \| "always"` |  | dropdown |
+| `hideWhenDetached` | `boolean` |  | toggle |
+| `updatePositionStrategy` | `"always" \| "optimized"` |  | dropdown |
+
+### TooltipProvider
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `children` | `React.ReactNode` |  | content |
+| `delayDuration` | `number` |  | number |
+| `skipDelayDuration` | `number` |  | number |
+| `disableHoverableContent` | `boolean` |  | toggle |
+
+### TooltipTrigger
+
+| 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/Tooltip/preview.html

@@ -0,0 +1,16 @@
+<!-- @dsCard group="Overlays" height=120 -->
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Tooltip</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 d=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var C=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var s=(t,e)=>()=>{try{return e||t((e={exports:{}}).exports,e),e.exports}catch(o){throw e=0,o}};var j=(t,e,o,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of B(e))!D.call(t,r)&&r!==o&&d(t,r,{get:()=>e[r],enumerable:!(l=P(e,r))||l.enumerable});return t};var i=(t,e,o)=>(o=t!=null?K(C(t)):{},j(e||!t||!t.__esModule?d(o,"default",{value:t,enumerable:!0}):o,t));var a=s((k,f)=>{f.exports=window.Nxds});var u=s((F,y)=>{y.exports=window.React});var g=s((N,E)=>{E.exports={createRoot:window.ReactDOM.createRoot}});var w=i(a()),n=i(a());var m=i(u());function T(t,e){return e===void 0?t:{...t,key:e}}function p(t,e,o){return(0,m.createElement)(t,T(e,o))}function x(t,e,o){let{children:l,...r}=e;return(0,m.createElement)(t,T(r,o),...l)}function c(){return x(n.Tooltip,{children:[p(n.TooltipTrigger,{asChild:!0,children:p(w.Button,{variant:"outline",children:"Hover me"})}),p(n.TooltipContent,{children:p("p",{children:"This is a tooltip"})})]})}var R=i(u()),h=i(g());(0,h.createRoot)(document.getElementById("root")).render((0,R.createElement)(c));})();</script>
+</body>
+</html>