@wallarm-org/claude-design 0.0.0-stage → 4.9.0

package/dist/project/components/Textarea/README.md

@@ -0,0 +1,273 @@
+Multi-line free text, for answers that run to sentences — reach for `Input` when one line will do, since a tall box tells the reader to write more than you want. Like `Input`, it reads `Field` context for its label, description and error state.
+
+## Props as canvas attributes
+
+Use kebab-case attribute names. Pass non-string values through renderVals holes, including booleans. The full emitted API is in `components/index.d.ts`.
+
+| Attribute | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `min-rows` | `number \| undefined` | no | — |  |
+| `max-rows` | `number \| undefined` | no | — |  |
+| `title` | `string \| undefined` | no | — |  |
+| `default-checked` | `boolean \| undefined` | no | — |  |
+| `default-value` | `string \| number \| readonly string[] \| undefined` | no | — |  |
+| `auto-focus` | `boolean \| undefined` | no | — |  |
+| `id` | `string \| undefined` | no | — |  |
+| `tab-index` | `number \| undefined` | no | — |  |
+| `rel` | `string \| undefined` | no | — |  |
+| `on-change` | `ChangeEventHandler<T, HTMLTextAreaElement> \| undefined` | no | — |  |
+| `disabled` | `boolean \| undefined` | no | `false` |  |
+| `name` | `string \| undefined` | no | — |  |
+| `value` | `string \| number \| readonly string[] \| undefined` | no | — |  |
+| `auto-complete` | `string \| undefined` | no | — |  |
+| `max-length` | `number \| undefined` | no | — |  |
+| `min-length` | `number \| undefined` | no | — |  |
+| `placeholder` | `string \| undefined` | no | — |  |
+| `read-only` | `boolean \| undefined` | no | — |  |
+| `required` | `boolean \| undefined` | no | — |  |
+| `size` | `"small" \| "medium" \| "default" \| "inline-edit"` | no | `default` |  |
+| `error` | `boolean` | no | `false` |  |
+| `data-testid` | `string \| undefined` | no | — |  |
+
+## Stories
+
+### Basic
+
+The bare control at its default height. Size the box to the answer you expect — it is the
+clearest signal the reader gets about how much to write.
+
+Source: Textarea/Textarea.stories.tsx#Basic
+
+### Sizes
+
+The same 36 / 32 / 24px scale as `Input`, applied to the single-row height, so a textarea
+lines up with the fields around it before it grows.
+
+Source: Textarea/Textarea.stories.tsx#Sizes
+
+### Focused
+
+Focus is a ring outside the border, as on every other field, so the box doesn't shift when
+the reader tabs into it.
+
+Source: Textarea/Textarea.stories.tsx#Focused
+
+### Disabled
+
+Dimmed and not focusable. Say elsewhere what would enable it.
+
+Source: Textarea/Textarea.stories.tsx#Disabled
+
+### WithValue
+
+A filled box. Text starts at the top rather than centring, which is why the height you
+choose reads as an invitation.
+
+Source: Textarea/Textarea.stories.tsx#WithValue
+
+### WithError
+
+`error` reddens the border and sets `aria-invalid`; the message is `FieldError`'s job.
+
+Source: Textarea/Textarea.stories.tsx#WithError
+
+### AutoResize
+
+Passing `maxRows` turns auto-resize on: the box starts at `minRows` and grows with the
+text until it hits the cap, then scrolls. Without `maxRows` the height is fixed.
+
+Source: Textarea/Textarea.stories.tsx#AutoResize
+
+### WithFooter
+
+Inside an `InputGroup` with a `block-end` addon, which is how the composer pattern is
+built — auto-resize plus a toolbar that stays attached as the box grows.
+
+Source: Textarea/Textarea.stories.tsx#WithFooter
+
+## Story sources
+
+### Textarea/Textarea.stories.tsx
+
+```tsx
+import { fn } from 'storybook/test';
+import type { Meta, StoryFn, StoryObj } from 'storybook-react-rsbuild';
+import { ArrowUp, Settings2 } from '../../icons';
+import { Button } from '../Button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuItemContent,
+  DropdownMenuItemText,
+  DropdownMenuLabel,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from '../DropdownMenu';
+import { InputGroup } from '../InputGroup/InputGroup';
+import { InputGroupAddon } from '../InputGroup/InputGroupAddon';
+import { HStack } from '../Stack';
+import { Switch, SwitchControl } from '../Switch';
+import { Text } from '../Text';
+import { Textarea } from './Textarea';
+
+const DESCRIPTION = [
+  'Multi-line free text, for answers that run to sentences — reach for `Input` when one line will do, since a tall box tells the reader to write more than you want.',
+  'Like `Input`, it reads `Field` context for its label, description and error state.',
+].join(' ');
+
+const meta = {
+  title: 'Inputs/Textarea',
+  component: Textarea,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: DESCRIPTION,
+      },
+    },
+  },
+  args: {
+    onChange: fn(),
+    placeholder: 'Placeholder',
+  },
+  argTypes: {
+    error: {
+      control: 'boolean',
+    },
+    disabled: {
+      control: 'boolean',
+    },
+  },
+} satisfies Meta<typeof Textarea>;
+
+export default meta;
+
+/**
+ * The bare control at its default height. Size the box to the answer you expect — it is the
+ * clearest signal the reader gets about how much to write.
+ */
+export const Basic: StoryObj<typeof meta> = {
+  args: {
+    'data-testid': 'textarea',
+  },
+};
+
+/**
+ * The same 36 / 32 / 24px scale as `Input`, applied to the single-row height, so a textarea
+ * lines up with the fields around it before it grows.
+ */
+export const Sizes: StoryFn<typeof meta> = ({ ...args }) => (
+  <HStack gap={16} align='start'>
+    <Textarea {...args} size='default' />
+    <Textarea {...args} size='medium' />
+    <Textarea {...args} size='small' />
+  </HStack>
+);
+
+/**
+ * Focus is a ring outside the border, as on every other field, so the box doesn't shift when
+ * the reader tabs into it.
+ */
+export const Focused: StoryObj<typeof meta> = {
+  parameters: { pseudo: { focusVisible: true } },
+};
+
+/**
+ * Dimmed and not focusable. Say elsewhere what would enable it.
+ */
+export const Disabled: StoryObj<typeof meta> = {
+  args: {
+    disabled: true,
+  },
+};
+
+/**
+ * A filled box. Text starts at the top rather than centring, which is why the height you
+ * choose reads as an invitation.
+ */
+export const WithValue: StoryObj<typeof meta> = {
+  args: {
+    value: 'Some value...',
+  },
+};
+
+/**
+ * `error` reddens the border and sets `aria-invalid`; the message is `FieldError`'s job.
+ */
+export const WithError: StoryObj<typeof meta> = {
+  args: {
+    error: true,
+  },
+};
+
+/**
+ * Passing `maxRows` turns auto-resize on: the box starts at `minRows` and grows with the
+ * text until it hits the cap, then scrolls. Without `maxRows` the height is fixed.
+ */
+export const AutoResize: StoryFn<typeof meta> = args => (
+  <div style={{ width: 280 }}>
+    <Textarea {...args} minRows={1} maxRows={5} placeholder='Auto-resize: 1 to 5 rows' />
+  </div>
+);
+
+/**
+ * Inside an `InputGroup` with a `block-end` addon, which is how the composer pattern is
+ * built — auto-resize plus a toolbar that stays attached as the box grows.
+ */
+export const WithFooter: StoryFn<typeof meta> = args => {
+  const toolItems = Array.from({ length: 6 }, (_, i) => ({
+    id: String(i + 1),
+    tool: '{tool-name}',
+    desc: 'Description',
+    enabled: true,
+  }));
+
+  return (
+    <div style={{ width: 480 }}>
+      <InputGroup>
+        <Textarea {...args} minRows={1} maxRows={3} placeholder='Ask Wally...' />
+
+        <InputGroupAddon align='block-end'>
+          <HStack fullWidth align='center' justify='between'>
+            <DropdownMenu closeOnSelect={false}>
+              <DropdownMenuTrigger>
+                <Button variant='secondary' size='small' color='neutral'>
+                  <Settings2 />
+                </Button>
+              </DropdownMenuTrigger>
+
+              <DropdownMenuContent className='w-304 h-290 overscroll-none'>
+                <DropdownMenuLabel className='sticky top-0 z-50 bg-bg-surface-2'>
+                  Always allowed in this conversation
+                </DropdownMenuLabel>
+
+                {toolItems.map(item => (
+                  <DropdownMenuItem key={`${item.id}`} className='w-full'>
+                    <DropdownMenuItemContent>
+                      <DropdownMenuItemText>{item.tool}</DropdownMenuItemText>
+                      <Text size='xs' color='secondary'>
+                        {item.desc}
+                      </Text>
+                    </DropdownMenuItemContent>
+
+                    <DropdownMenuShortcut>
+                      <Switch checked={item.enabled}>
+                        <SwitchControl />
+                      </Switch>
+                    </DropdownMenuShortcut>
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+
+            <Button variant='primary' color='brand' size='small'>
+              <ArrowUp />
+            </Button>
+          </HStack>
+        </InputGroupAddon>
+      </InputGroup>
+    </div>
+  );
+};
+```

package/dist/project/components/Textarea/preview.html

@@ -0,0 +1,2 @@
+<!-- @dsCard group="Inputs" height=480 -->
+<!doctype html><html><head><meta charset="utf-8"></head><body><div id="preview"></div><script src="./stories.js"></script><script>window.WallarmPreview.mount(document.getElementById('preview'));</script></body></html>

package/dist/project/components/Textarea/stories.js

@@ -0,0 +1,12 @@
+var e={vD(e,t,r){let n,o;/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @lightSyntaxTransform
+ * @noflow
+ * @nolint
+ * @preventMunge
+ * @preserve-invariant-messages
+ */var a,l,i=Object.create,c=Object.defineProperty,s=Object.getOwnPropertyDescriptor,u=Object.getOwnPropertyNames,f=Object.getPrototypeOf,d=Object.prototype.hasOwnProperty,p=(e,t,r,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let o of u(t))d.call(e,o)||o===r||c(e,o,{get:()=>t[o],enumerable:!(n=s(t,o))||n.enumerable});return e},m={},y={$dispatcherGuard:()=>k,$makeReadOnly:()=>M,$reset:()=>C,$structuralCheck:()=>T,c:()=>_,clearRenderCounterRegistry:()=>x,renderCounterRegistry:()=>O,useRenderCounter:()=>W};for(var h in y)c(m,h,{get:y[h],enumerable:!0});e.exports=p(c({},"__esModule",{value:!0}),m);var w=(o=null!=(n=r("C"))?i(f(n)):{},p(n&&n.__esModule?o:c(o,"default",{value:n,enumerable:!0}),n)),{useRef:S,useEffect:g,isValidElement:b}=w,R=null!=(a=w.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?a:w.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,v=Symbol.for("react.memo_cache_sentinel"),_="function"==typeof(null==(l=w.__COMPILER_RUNTIME)?void 0:l.c)?w.__COMPILER_RUNTIME.c:function(e){return w.useMemo(()=>{let t=Array(e);for(let r=0;r<e;r++)t[r]=v;return t[v]=!0,t},[])},E={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{E[e]=()=>{throw Error(`[React] Unexpected React hook call (${e}) from a React compiled function. Check that all hooks are called directly and named according to convention ('use[A-Z]') `)}});var $=null;function D(e){return R.ReactCurrentDispatcher.current=e,R.ReactCurrentDispatcher.current}E.useMemoCache=e=>{if(null!=$)return $.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var N=[];function k(e){let t=R.ReactCurrentDispatcher.current;if(0===e){if(N.push(t),1===N.length&&($=t),t===E)throw Error("[React] Unexpected call to custom hook or component from a React compiled function. Check that (1) all hooks are called directly and named according to convention ('use[A-Z]') and (2) components are returned as JSX instead of being directly invoked.");D(E)}else if(1===e){let e=N.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===N.length&&($=null),D(e)}else if(2===e)N.push(t),D($);else if(3===e){let e=N.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");D(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function C(e){for(let t=0;t<e.length;t++)e[t]=v}function M(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var O=new Map;function x(){for(let e of O.values())e.forEach(e=>{e.count=0})}function W(e){let t=S(null);null!=t.current&&(t.current.count+=1),g(()=>{if(null==t.current){let r,n={count:0};null==(r=O.get(e))&&(r=new Set,O.set(e,r)),r.add(n),t.current=n}return()=>{var r;let n;null!==t.current&&(r=t.current,null!=(n=O.get(e))&&n.delete(r))}})}var I=new Set;function T(e,t,r,n,o,a){function l(e,t,l,i){let c=`${n}:${a} [${o}] ${r}${l} changed from ${e} to ${t} at depth ${i}`;I.has(c)||(I.add(c),console.error(c))}!function e(t,r,n,o){if(!(o>2)){if(t!==r)if(typeof t!=typeof r)l(`type ${typeof t}`,`type ${typeof r}`,n,o);else if("object"==typeof t){let a=Array.isArray(t),i=Array.isArray(r);if(null===t&&null!==r)l("null",`type ${typeof r}`,n,o);else if(null===r)l(`type ${typeof t}`,"null",n,o);else if(t instanceof Map)if(r instanceof Map)if(t.size!==r.size)l(`Map instance with size ${t.size}`,`Map instance with size ${r.size}`,n,o);else for(let[a,i]of t)r.has(a)?e(i,r.get(a),`${n}.get(${a})`,o+1):l(`Map instance with key ${a}`,`Map instance without key ${a}`,n,o);else l("Map instance","other value",n,o);else if(r instanceof Map)l("other value","Map instance",n,o);else if(t instanceof Set)if(r instanceof Set)if(t.size!==r.size)l(`Set instance with size ${t.size}`,`Set instance with size ${r.size}`,n,o);else for(let e of r)t.has(e)||l(`Set instance without element ${e}`,`Set instance with element ${e}`,n,o);else l("Set instance","other value",n,o);else if(r instanceof Set)l("other value","Set instance",n,o);else if(a||i)if(a!==i)l(`type ${a?"array":"object"}`,`type ${i?"array":"object"}`,n,o);else if(t.length!==r.length)l(`array with length ${t.length}`,`array with length ${r.length}`,n,o);else for(let a=0;a<t.length;a++)e(t[a],r[a],`${n}[${a}]`,o+1);else if(b(t)||b(r))b(t)!==b(r)?l(`type ${b(t)?"React element":"object"}`,`type ${b(r)?"React element":"object"}`,n,o):t.type!==r.type?l(`React element of type ${t.type}`,`React element of type ${r.type}`,n,o):e(t.props,r.props,`[props of ${n}]`,o+1);else{for(let e in r)e in t||l(`object without key ${e}`,`object with key ${e}`,n,o);for(let a in t)a in r?e(t[a],r[a],`${n}.${a}`,o+1):l(`object with key ${a}`,`object without key ${a}`,n,o)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(r)?isNaN(t)!==isNaN(r)&&l(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(r)?"NaN":"non-NaN value"}`,n,o):t!==r&&l(t,r,n,o)}}}(e,t,"",0)}},p(e,t,r){let n=new WeakMap,o=new WeakMap;function a(e,t,r){let a=t,l=r;if("object"==typeof a&&null!==a&&"$$typeof"in a&&a.$$typeof===Symbol.for("react.context")&&"Provider"in a&&(a=a.Provider),"function"==typeof a&&null!=l.ref&&!a.prototype?.isReactComponent){let t=a,r=n.get(e);r||(r=new WeakMap,n.set(e,r));let o=r.get(t);o||((o=e.forwardRef((e,r)=>t({...e,ref:r}))).displayName=t.displayName??t.name,r.set(t,o)),a=o}if("string"==typeof a&&"boolean"==typeof l.inert&&((l={...l}).inert?l.inert="":delete l.inert),"string"==typeof a)for(let[e,t]of[["fill-rule","fillRule"],["clip-rule","clipRule"]])e in l&&(l={...l,[t]:l[e]},delete l[e]);return"string"==typeof a&&null!=l.ref&&(a=function(e,t){let r=o.get(e);r||(r=new Map,o.set(e,r));let n=r.get(t);if(n)return n;let a=e.forwardRef((r,n)=>{let o=e.useRef(null);if(!o.current||o.current.original!==n){let e;o.current={original:n,callback:t=>{if(null==t&&e){let t=e;e=void 0,t();return}if("function"==typeof n){let r=n(t);e="function"==typeof r?r:void 0}else n&&(n.current=t)}}}return e.createElement(t,{...r,ref:o.current.callback})});return a.displayName=`CanvasHost(${t})`,r.set(t,a),a}(e,a)),{type:a,props:l}}function l(e){let t=(t,r,n)=>{let o=a(e,t,r??{});return e.createElement(o.type,void 0===n?o.props:{...o.props,key:n})};return{jsx:t,jsxs:(t,r,n)=>{let o=a(e,t,r??{}),{children:l,...i}=o.props;return e.createElement(o.type,void 0===n?i:{...i,key:n},...Array.isArray(l)?l:[l])},jsxDEV:t,Fragment:e.Fragment}}function i(e){return{...e,createElement:(t,r,...n)=>{let o=a(e,t,r??{});return e.createElement(o.type,o.props,...n)},cloneElement:(t,r,...n)=>{let o=e.cloneElement(t,r??void 0,...n),l=o.ref,i=a(e,o.type,{...o.props,ref:l});return i.type===o.type&&"string"!=typeof o.type?o:e.createElement(i.type,{...i.props,key:o.key})}}}r.d(t,{MA:()=>l,YJ:()=>i})},C(e,t,r){r.r(t);let n=(0,r("p").YJ)(window.React),{Children:o,Component:a,Fragment:l,Profiler:i,PureComponent:c,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:f,act:d,cloneElement:p,createContext:m,createElement:y,createFactory:h,createRef:w,forwardRef:S,isValidElement:g,lazy:b,memo:R,startTransition:v,unstable_act:_,useCallback:E,useContext:$,useDebugValue:D,useDeferredValue:N,useEffect:k,useId:C,useImperativeHandle:M,useInsertionEffect:O,useLayoutEffect:x,useMemo:W,useReducer:I,useRef:T,useState:j,useSyncExternalStore:A,useTransition:z,version:P,use:L}=n;r.d(t,{},{Children:o,Component:a,Fragment:l,Profiler:i,PureComponent:c,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:f,act:d,cloneElement:p,createContext:m,createElement:y,createFactory:h,createRef:w,default:n,forwardRef:S,isValidElement:g,lazy:b,memo:R,startTransition:v,unstable_act:_,use:L,useCallback:E,useContext:$,useDebugValue:D,useDeferredValue:N,useEffect:k,useId:C,useImperativeHandle:M,useInsertionEffect:O,useLayoutEffect:x,useMemo:W,useReducer:I,useRef:T,useState:j,useSyncExternalStore:A,useTransition:z,version:P})}},t={};function r(n){var o=t[n];if(void 0!==o)return o.exports;var a=t[n]={exports:{}};return e[n](a,a.exports,r),a.exports}r.d=(e,t,n)=>{var o=(t,n)=>{for(var o in t)r.o(t,o)&&!r.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,[n]:t[o]})};o(t,"get"),o(n,"value")},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.r=e=>{"u">typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{let{jsx:e,jsxs:t,jsxDEV:n,Fragment:o}=(0,r("p").MA)(window.React);var a=r("vD");let l=window.WallarmDS.Icons.ArrowUp,i=window.WallarmDS.Icons.Settings2,c=window.WallarmDS.Button,s=window.WallarmDS.DropdownMenu,u=window.WallarmDS.DropdownMenuContent,f=window.WallarmDS.DropdownMenuItem,d=window.WallarmDS.DropdownMenuItemContent,p=window.WallarmDS.DropdownMenuItemText,m=window.WallarmDS.DropdownMenuLabel,y=window.WallarmDS.DropdownMenuShortcut,h=window.WallarmDS.DropdownMenuTrigger,w=window.WallarmDS.InputGroup,S=window.WallarmDS.InputGroupAddon,g=window.WallarmDS.HStack,b=window.WallarmDS.Switch,R=window.WallarmDS.SwitchControl,v=window.WallarmDS.Text,_=window.WallarmDS.Textarea,E={title:"Inputs/Textarea",component:_,parameters:{layout:"centered",docs:{description:{component:"Multi-line free text, for answers that run to sentences — reach for `Input` when one line will do, since a tall box tells the reader to write more than you want. Like `Input`, it reads `Field` context for its label, description and error state."}}},args:{onChange:function(e=()=>{}){let t=(...t)=>e(...t);for(let r of["mockName","mockReturnValue","mockResolvedValue","mockImplementation"])t[r]=n=>("mockImplementation"===r?e=n:"mockReturnValue"===r?e=()=>n:"mockResolvedValue"===r&&(e=()=>Promise.resolve(n)),t);return t}(),placeholder:"Placeholder"},argTypes:{error:{control:"boolean"},disabled:{control:"boolean"}}};function $(e,t){return{id:String(t+1),tool:"{tool-name}",desc:"Description",enabled:!0}}function D(r){return t(f,{className:"w-full",children:[t(d,{children:[e(p,{children:r.tool}),e(v,{size:"xs",color:"secondary",children:r.desc})]}),e(y,{children:e(b,{checked:r.enabled,children:e(R,{})})})]},`${r.id}`)}var N=r("C");let k=[{name:"Basic",story:{args:{"data-testid":"textarea"}},meta:E},{name:"Sizes",story:r=>{let n,o,l=(0,a.c)(4);return l[0]!==r?({...n}=r,l[0]=r,l[1]=n):n=l[1],l[2]!==n?(o=t(g,{gap:16,align:"start",children:[e(_,{...n,size:"default"}),e(_,{...n,size:"medium"}),e(_,{...n,size:"small"})]}),l[2]=n,l[3]=o):o=l[3],o},meta:E},{name:"Focused",story:{parameters:{pseudo:{focusVisible:!0}}},meta:E},{name:"Disabled",story:{args:{disabled:!0}},meta:E},{name:"WithValue",story:{args:{value:"Some value..."}},meta:E},{name:"WithError",story:{args:{error:!0}},meta:E},{name:"AutoResize",story:t=>{let r,n,o=(0,a.c)(3);return o[0]===Symbol.for("react.memo_cache_sentinel")?(r={width:280},o[0]=r):r=o[0],o[1]!==t?(n=e("div",{style:r,children:e(_,{...t,minRows:1,maxRows:5,placeholder:"Auto-resize: 1 to 5 rows"})}),o[1]=t,o[2]=n):n=o[2],n},meta:E},{name:"WithFooter",story:r=>{let n,o,f,d,p,y,b,R=(0,a.c)(9);R[0]===Symbol.for("react.memo_cache_sentinel")?(n=Array.from({length:6},$),R[0]=n):n=R[0];let v=n;return R[1]===Symbol.for("react.memo_cache_sentinel")?(o={width:480},R[1]=o):o=R[1],R[2]!==r?(f=e(_,{...r,minRows:1,maxRows:3,placeholder:"Ask Wally..."}),R[2]=r,R[3]=f):f=R[3],R[4]===Symbol.for("react.memo_cache_sentinel")?(d=e(h,{children:e(c,{variant:"secondary",size:"small",color:"neutral",children:e(i,{})})}),R[4]=d):d=R[4],R[5]===Symbol.for("react.memo_cache_sentinel")?(p=t(s,{closeOnSelect:!1,children:[d,t(u,{className:"w-304 h-290 overscroll-none",children:[e(m,{className:"sticky top-0 z-50 bg-bg-surface-2",children:"Always allowed in this conversation"}),v.map(D)]})]}),R[5]=p):p=R[5],R[6]===Symbol.for("react.memo_cache_sentinel")?(y=e(S,{align:"block-end",children:t(g,{fullWidth:!0,align:"center",justify:"between",children:[p,e(c,{variant:"primary",color:"brand",size:"small",children:e(l,{})})]})}),R[6]=y):y=R[6],R[7]!==f?(b=e("div",{style:o,children:t(w,{children:[f,y]})}),R[7]=f,R[8]=b):b=R[8],b},meta:E}];function C({entry:e}){let{story:t,meta:r}=e,n={...r.args,...t.args},o="function"==typeof t||t.$$typeof?t:t.render||r.render||r.component,a=()=>N.default.createElement(o,n),l={args:n,globals:{theme:"light"},parameters:{...r.parameters,...t.parameters},viewMode:"story"};for(let e of[...r.decorators||[],...t.decorators||[]].reverse()){let t=a;a=()=>e(t,l)}return N.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},N.default.createElement("h2",{className:"text-sm mb-12"},e.name),N.default.createElement(a))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(N.default.createElement(window.WallarmDS.Root,null,k.map((e,t)=>N.default.createElement(C,{key:t,entry:e})))),t}}})();

package/dist/project/components/TimeInput/README.md

@@ -0,0 +1,359 @@
+A time typed segment by segment, the companion to `DateInput` — `showTimeDropdown` adds a list of times for when the reader would rather pick than type. It takes React Aria time objects, and hour cycle comes from `DateFormatProvider` app-wide rather than per input.
+
+## Props as canvas attributes
+
+Use kebab-case attribute names. Pass non-string values through renderVals holes, including booleans. The full emitted API is in `components/index.d.ts`.
+
+| Attribute | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `show-icon` | `boolean \| undefined` | no | `true` | Whether to show the leading icon. Default: true. |
+| `error` | `boolean \| undefined` | no | `false` | Whether the input has an error state. Sets `aria-invalid` and error styling. |
+| `disabled` | `boolean \| undefined` | no | `false` | Whether the input is disabled. Prevents user interaction. |
+| `read-only` | `boolean \| undefined` | no | `false` | Whether the input is read-only. Segments are focusable but not editable. |
+| `placeholder` | `string \| undefined` | no | — | Placeholder shown when no value is selected. |
+| `size` | `TemporalInputSize \| undefined` | no | `default` | Visual size. Default: 'default' (36px). |
+| `title` | `string \| undefined` | no | — |  |
+| `default-checked` | `boolean \| undefined` | no | — |  |
+| `auto-focus` | `boolean \| undefined` | no | — |  |
+| `id` | `string \| undefined` | no | — |  |
+| `tab-index` | `number \| undefined` | no | — |  |
+| `rel` | `string \| undefined` | no | — |  |
+| `data-testid` | `string \| undefined` | no | — |  |
+| `value` | `TimeValue \| null \| undefined` | no | — |  |
+| `default-value` | `TimeValue \| null \| undefined` | no | — |  |
+| `on-change` | `complex` | no | — |  |
+| `min-value` | `TimeValue \| undefined` | no | — |  |
+| `max-value` | `TimeValue \| undefined` | no | — |  |
+| `placeholder-value` | `TimeValue \| undefined` | no | — |  |
+| `name` | `string \| undefined` | no | — |  |
+| `is-required` | `boolean \| undefined` | no | — | Marks the field as required in assistive tech and HTML form validation. |
+| `show-time-dropdown` | `boolean \| undefined` | no | — | Show dropdown for time selection with arrow navigation. |
+| `time-step` | `number \| undefined` | no | `30` | Time interval in minutes for dropdown options. Default: 30. |
+| `granularity` | `TimeInputGranularity \| undefined` | no | `minute` | Smallest editable unit. - 'hour': hours only - 'minute': hours and minutes (default) - 'second': hours, minutes, and seconds |
+
+## Stories
+
+### Basic
+
+The bare field, behaving exactly like `DateInput`: arrows step a segment, typing fills it and
+advances.
+
+Source: TimeInput/TimeInput.stories.tsx#Basic
+
+### States
+
+Default, disabled and error, matching `DateInput` so a form containing both stays consistent.
+
+Source: TimeInput/TimeInput.stories.tsx#States
+
+### Icon
+
+A clock icon as decoration. It opens nothing on its own — the dropdown is a separate opt-in.
+
+Source: TimeInput/TimeInput.stories.tsx#Icon
+
+### Sizes
+
+The shared height scale, so a time field lines up beside a date field.
+
+Source: TimeInput/TimeInput.stories.tsx#Sizes
+
+### Filled
+
+A held value beside a placeholder, with the clear affordance appearing only once there is a
+value.
+
+Source: TimeInput/TimeInput.stories.tsx#Filled
+
+### Granularity
+
+Hour, minute or second. Drop to `hour` where minutes would imply a precision the system does
+not honour.
+
+Source: TimeInput/TimeInput.stories.tsx#Granularity
+
+### TimeDropdownSteps
+
+`timeStep` sets the spacing of the offered times — fifteen, thirty or sixty minutes. Coarser
+steps make the list scannable; the reader can still type an exact time.
+
+Source: TimeInput/TimeInput.stories.tsx#TimeDropdownSteps
+
+### ReadOnly
+
+Value legible, every edit affordance gone, as on `DateInput`.
+
+Source: TimeInput/TimeInput.stories.tsx#ReadOnly
+
+## Story sources
+
+### TimeInput/TimeInput.stories.tsx
+
+```tsx
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { Time } from '../../index';
+import { DateFormatProvider } from '../DateFormatProvider';
+import { HStack, VStack } from '../Stack';
+import { TimeInput } from './TimeInput';
+
+const DESCRIPTION = [
+  'A time typed segment by segment, the companion to `DateInput` — `showTimeDropdown` adds a list of times for when the reader would rather pick than type.',
+  'It takes React Aria time objects, and hour cycle comes from `DateFormatProvider` app-wide rather than per input.',
+].join(' ');
+
+const meta: Meta<typeof TimeInput> = {
+  title: 'Inputs Date/TimeInput',
+  component: TimeInput,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: DESCRIPTION,
+      },
+    },
+  },
+  argTypes: {
+    granularity: {
+      control: 'select',
+      options: ['hour', 'minute', 'second'],
+      description: 'Determines the smallest unit of time that can be edited.',
+    },
+    error: {
+      control: 'boolean',
+      description: 'Whether the input has an error state.',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the input is disabled.',
+    },
+    readOnly: {
+      control: 'boolean',
+      description: 'Whether the input is read-only. Displays value but prevents editing.',
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Placeholder text shown when no value is selected.',
+    },
+    showIcon: {
+      control: 'boolean',
+      description: 'Whether to show the leading clock icon. Default: true.',
+    },
+    showTimeDropdown: {
+      control: 'boolean',
+      description: 'Show dropdown for time selection with arrow navigation.',
+    },
+    timeStep: {
+      control: 'number',
+      description: 'Time interval in minutes for dropdown options.',
+    },
+    size: {
+      control: 'select',
+      options: ['default', 'medium', 'small'],
+      description: 'Visual size: default (36px), medium (32px), small (24px).',
+    },
+  },
+  args: {
+    granularity: 'minute',
+    error: false,
+    disabled: false,
+    readOnly: false,
+    showIcon: true,
+    size: 'default',
+  },
+};
+
+export default meta;
+
+const dropdownRoom: StoryFn<typeof meta>['decorators'] = [
+  Story => (
+    <div style={{ minHeight: 360, paddingBottom: 280 }}>
+      <Story />
+    </div>
+  ),
+];
+
+/**
+ * The bare field, behaving exactly like `DateInput`: arrows step a segment, typing fills it and
+ * advances.
+ */
+export const Basic: StoryFn<typeof meta> = ({ ...args }) => {
+  return <TimeInput {...args} />;
+};
+Basic.decorators = dropdownRoom;
+Basic.parameters = { layout: 'padded' };
+
+/**
+ * Default, disabled and error, matching `DateInput` so a form containing both stays consistent.
+ */
+export const States: StoryFn<typeof meta> = () => (
+  <HStack gap={24}>
+    <VStack gap={12}>
+      <span className='sb-annotation'>Default</span>
+      <TimeInput />
+      <TimeInput defaultValue={new Time(22, 0)} />
+    </VStack>
+    <VStack gap={12}>
+      <span className='sb-annotation'>Disabled</span>
+      <TimeInput disabled />
+      <TimeInput disabled defaultValue={new Time(14, 30)} />
+    </VStack>
+    <VStack gap={12}>
+      <span className='sb-annotation'>Error</span>
+      <TimeInput error />
+      <TimeInput error defaultValue={new Time(14, 30)} />
+    </VStack>
+  </HStack>
+);
+
+/**
+ * A clock icon as decoration. It opens nothing on its own — the dropdown is a separate opt-in.
+ */
+export const Icon: StoryFn<typeof meta> = () => (
+  <HStack gap={24}>
+    <VStack gap={12}>
+      <span className='sb-annotation'>With icon</span>
+      <TimeInput showIcon />
+      <TimeInput showIcon defaultValue={new Time(22, 0)} />
+    </VStack>
+    <VStack gap={12}>
+      <span className='sb-annotation'>Without icon</span>
+      <TimeInput showIcon={false} />
+      <TimeInput showIcon={false} defaultValue={new Time(22, 0)} />
+    </VStack>
+  </HStack>
+);
+
+/**
+ * The shared height scale, so a time field lines up beside a date field.
+ */
+export const Sizes: StoryFn<typeof meta> = () => (
+  <HStack gap={24}>
+    <VStack gap={16}>
+      <VStack gap={4}>
+        <span className='sb-annotation'>Default (36px)</span>
+        <TimeInput size='default' />
+      </VStack>
+      <VStack gap={4}>
+        <span className='sb-annotation'>Medium (32px)</span>
+        <TimeInput size='medium' />
+      </VStack>
+      <VStack gap={4}>
+        <span className='sb-annotation'>Small (24px)</span>
+        <TimeInput size='small' />
+      </VStack>
+    </VStack>
+    <VStack gap={16}>
+      <VStack gap={4}>
+        <span className='sb-annotation'>Default filled</span>
+        <TimeInput size='default' defaultValue={new Time(22, 0)} />
+      </VStack>
+      <VStack gap={4}>
+        <span className='sb-annotation'>Medium filled</span>
+        <TimeInput size='medium' defaultValue={new Time(22, 0)} />
+      </VStack>
+      <VStack gap={4}>
+        <span className='sb-annotation'>Small filled</span>
+        <TimeInput size='small' defaultValue={new Time(22, 0)} />
+      </VStack>
+    </VStack>
+  </HStack>
+);
+
+/**
+ * A held value beside a placeholder, with the clear affordance appearing only once there is a
+ * value.
+ */
+export const Filled: StoryFn<typeof meta> = () => (
+  <VStack gap={16}>
+    <DateFormatProvider order='day-first' hourCycle={24}>
+      <VStack gap={4}>
+        <span className='sb-annotation'>24-hour</span>
+        <TimeInput defaultValue={new Time(22, 0)} />
+      </VStack>
+    </DateFormatProvider>
+    <DateFormatProvider order='day-first' hourCycle={12}>
+      <VStack gap={4}>
+        <span className='sb-annotation'>12-hour</span>
+        <TimeInput defaultValue={new Time(22, 0)} />
+      </VStack>
+    </DateFormatProvider>
+  </VStack>
+);
+
+/**
+ * Hour, minute or second. Drop to `hour` where minutes would imply a precision the system does
+ * not honour.
+ */
+export const Granularity: StoryFn<typeof meta> = () => (
+  <HStack gap={24}>
+    <DateFormatProvider order='day-first' hourCycle={12}>
+      <VStack gap={12}>
+        <span className='sb-annotation'>12-hour format</span>
+        <TimeInput placeholder='hour' granularity='hour' />
+        <TimeInput placeholder='hour:min' granularity='minute' />
+        <TimeInput placeholder='hour:min:sec' granularity='second' />
+      </VStack>
+    </DateFormatProvider>
+    <DateFormatProvider order='day-first' hourCycle={24}>
+      <VStack gap={12}>
+        <span className='sb-annotation'>24-hour format</span>
+        <TimeInput placeholder='hour' granularity='hour' />
+        <TimeInput placeholder='hour:min' granularity='minute' />
+        <TimeInput placeholder='hour:min:sec' granularity='second' />
+      </VStack>
+    </DateFormatProvider>
+  </HStack>
+);
+
+/**
+ * `timeStep` sets the spacing of the offered times — fifteen, thirty or sixty minutes. Coarser
+ * steps make the list scannable; the reader can still type an exact time.
+ */
+export const TimeDropdownSteps: StoryFn<typeof meta> = () => (
+  <HStack gap={24}>
+    <DateFormatProvider order='day-first' hourCycle={12}>
+      <VStack gap={12}>
+        <span className='sb-annotation'>12-hour format</span>
+        <TimeInput placeholder='Every 15 min' showTimeDropdown timeStep={15} />
+        <TimeInput placeholder='Every 30 min' showTimeDropdown timeStep={30} />
+        <TimeInput placeholder='Every 60 min' showTimeDropdown timeStep={60} />
+      </VStack>
+    </DateFormatProvider>
+    <DateFormatProvider order='day-first' hourCycle={24}>
+      <VStack gap={12}>
+        <span className='sb-annotation'>24-hour format</span>
+        <TimeInput placeholder='Every 15 min' showTimeDropdown timeStep={15} />
+        <TimeInput placeholder='Every 30 min' showTimeDropdown timeStep={30} />
+        <TimeInput placeholder='Every 60 min' showTimeDropdown timeStep={60} />
+      </VStack>
+    </DateFormatProvider>
+  </HStack>
+);
+TimeDropdownSteps.decorators = dropdownRoom;
+TimeDropdownSteps.parameters = { layout: 'padded' };
+
+/**
+ * Value legible, every edit affordance gone, as on `DateInput`.
+ */
+export const ReadOnly: StoryFn<typeof meta> = () => (
+  <HStack gap={24}>
+    <VStack gap={12}>
+      <span className='sb-annotation'>Locale</span>
+      <TimeInput readOnly defaultValue={new Time(22, 0)} data-testid='time-input-read-only' />
+    </VStack>
+    <DateFormatProvider order='day-first' hourCycle={12}>
+      <VStack gap={12}>
+        <span className='sb-annotation'>12-hour</span>
+        <TimeInput readOnly defaultValue={new Time(22, 0)} data-testid='time-input-read-only-12h' />
+      </VStack>
+    </DateFormatProvider>
+    <DateFormatProvider order='day-first' hourCycle={24}>
+      <VStack gap={12}>
+        <span className='sb-annotation'>24-hour</span>
+        <TimeInput readOnly defaultValue={new Time(22, 0)} data-testid='time-input-read-only-24h' />
+      </VStack>
+    </DateFormatProvider>
+  </HStack>
+);
+ReadOnly.parameters = { layout: 'padded' };
+```

package/dist/project/components/TimeInput/preview.html

@@ -0,0 +1,2 @@
+<!-- @dsCard group="Inputs Date" height=480 -->
+<!doctype html><html><head><meta charset="utf-8"></head><body><div id="preview"></div><script src="./stories.js"></script><script>window.WallarmPreview.mount(document.getElementById('preview'));</script></body></html>