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

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

@@ -0,0 +1,12 @@
+var e={vD(e,t,r){let n,a;/**
+ * 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 o,l,i=Object.create,c=Object.defineProperty,s=Object.getOwnPropertyDescriptor,u=Object.getOwnPropertyNames,m=Object.getPrototypeOf,d=Object.prototype.hasOwnProperty,p=(e,t,r,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let a of u(t))d.call(e,a)||a===r||c(e,a,{get:()=>t[a],enumerable:!(n=s(t,a))||n.enumerable});return e},h={},f={$dispatcherGuard:()=>D,$makeReadOnly:()=>M,$reset:()=>O,$structuralCheck:()=>j,c:()=>E,clearRenderCounterRegistry:()=>T,renderCounterRegistry:()=>k,useRenderCounter:()=>I};for(var y in f)c(h,y,{get:f[y],enumerable:!0});e.exports=p(c({},"__esModule",{value:!0}),h);var _=(a=null!=(n=r("C"))?i(m(n)):{},p(n&&n.__esModule?a:c(a,"default",{value:n,enumerable:!0}),n)),{useRef:b,useEffect:w,isValidElement:g}=_,S=null!=(o=_.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?o:_.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,v=Symbol.for("react.memo_cache_sentinel"),E="function"==typeof(null==(l=_.__COMPILER_RUNTIME)?void 0:l.c)?_.__COMPILER_RUNTIME.c:function(e){return _.useMemo(()=>{let t=Array(e);for(let r=0;r<e;r++)t[r]=v;return t[v]=!0,t},[])},N={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{N[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 R=null;function $(e){return S.ReactCurrentDispatcher.current=e,S.ReactCurrentDispatcher.current}N.useMemoCache=e=>{if(null!=R)return R.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var C=[];function D(e){let t=S.ReactCurrentDispatcher.current;if(0===e){if(C.push(t),1===C.length&&(R=t),t===N)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.");$(N)}else if(1===e){let e=C.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===C.length&&(R=null),$(e)}else if(2===e)C.push(t),$(R);else if(3===e){let e=C.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");$(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function O(e){for(let t=0;t<e.length;t++)e[t]=v}function M(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var k=new Map;function T(){for(let e of k.values())e.forEach(e=>{e.count=0})}function I(e){let t=b(null);null!=t.current&&(t.current.count+=1),w(()=>{if(null==t.current){let r,n={count:0};null==(r=k.get(e))&&(r=new Set,k.set(e,r)),r.add(n),t.current=n}return()=>{var r;let n;null!==t.current&&(r=t.current,null!=(n=k.get(e))&&n.delete(r))}})}var x=new Set;function j(e,t,r,n,a,o){function l(e,t,l,i){let c=`${n}:${o} [${a}] ${r}${l} changed from ${e} to ${t} at depth ${i}`;x.has(c)||(x.add(c),console.error(c))}!function e(t,r,n,a){if(!(a>2)){if(t!==r)if(typeof t!=typeof r)l(`type ${typeof t}`,`type ${typeof r}`,n,a);else if("object"==typeof t){let o=Array.isArray(t),i=Array.isArray(r);if(null===t&&null!==r)l("null",`type ${typeof r}`,n,a);else if(null===r)l(`type ${typeof t}`,"null",n,a);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,a);else for(let[o,i]of t)r.has(o)?e(i,r.get(o),`${n}.get(${o})`,a+1):l(`Map instance with key ${o}`,`Map instance without key ${o}`,n,a);else l("Map instance","other value",n,a);else if(r instanceof Map)l("other value","Map instance",n,a);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,a);else for(let e of r)t.has(e)||l(`Set instance without element ${e}`,`Set instance with element ${e}`,n,a);else l("Set instance","other value",n,a);else if(r instanceof Set)l("other value","Set instance",n,a);else if(o||i)if(o!==i)l(`type ${o?"array":"object"}`,`type ${i?"array":"object"}`,n,a);else if(t.length!==r.length)l(`array with length ${t.length}`,`array with length ${r.length}`,n,a);else for(let o=0;o<t.length;o++)e(t[o],r[o],`${n}[${o}]`,a+1);else if(g(t)||g(r))g(t)!==g(r)?l(`type ${g(t)?"React element":"object"}`,`type ${g(r)?"React element":"object"}`,n,a):t.type!==r.type?l(`React element of type ${t.type}`,`React element of type ${r.type}`,n,a):e(t.props,r.props,`[props of ${n}]`,a+1);else{for(let e in r)e in t||l(`object without key ${e}`,`object with key ${e}`,n,a);for(let o in t)o in r?e(t[o],r[o],`${n}.${o}`,a+1):l(`object with key ${o}`,`object without key ${o}`,n,a)}}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,a):t!==r&&l(t,r,n,a)}}}(e,t,"",0)}},p(e,t,r){let n=new WeakMap,a=new WeakMap;function o(e,t,r){let o=t,l=r;if("object"==typeof o&&null!==o&&"$$typeof"in o&&o.$$typeof===Symbol.for("react.context")&&"Provider"in o&&(o=o.Provider),"function"==typeof o&&null!=l.ref&&!o.prototype?.isReactComponent){let t=o,r=n.get(e);r||(r=new WeakMap,n.set(e,r));let a=r.get(t);a||((a=e.forwardRef((e,r)=>t({...e,ref:r}))).displayName=t.displayName??t.name,r.set(t,a)),o=a}if("string"==typeof o&&"boolean"==typeof l.inert&&((l={...l}).inert?l.inert="":delete l.inert),"string"==typeof o)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 o&&null!=l.ref&&(o=function(e,t){let r=a.get(e);r||(r=new Map,a.set(e,r));let n=r.get(t);if(n)return n;let o=e.forwardRef((r,n)=>{let a=e.useRef(null);if(!a.current||a.current.original!==n){let e;a.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:a.current.callback})});return o.displayName=`CanvasHost(${t})`,r.set(t,o),o}(e,o)),{type:o,props:l}}function l(e){let t=(t,r,n)=>{let a=o(e,t,r??{});return e.createElement(a.type,void 0===n?a.props:{...a.props,key:n})};return{jsx:t,jsxs:(t,r,n)=>{let a=o(e,t,r??{}),{children:l,...i}=a.props;return e.createElement(a.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 a=o(e,t,r??{});return e.createElement(a.type,a.props,...n)},cloneElement:(t,r,...n)=>{let a=e.cloneElement(t,r??void 0,...n),l=a.ref,i=o(e,a.type,{...a.props,ref:l});return i.type===a.type&&"string"!=typeof a.type?a:e.createElement(i.type,{...i.props,key:a.key})}}}r.d(t,{MA:()=>l,YJ:()=>i})},C(e,t,r){r.r(t);let n=(0,r("p").YJ)(window.React),{Children:a,Component:o,Fragment:l,Profiler:i,PureComponent:c,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:m,act:d,cloneElement:p,createContext:h,createElement:f,createFactory:y,createRef:_,forwardRef:b,isValidElement:w,lazy:g,memo:S,startTransition:v,unstable_act:E,useCallback:N,useContext:R,useDebugValue:$,useDeferredValue:C,useEffect:D,useId:O,useImperativeHandle:M,useInsertionEffect:k,useLayoutEffect:T,useMemo:I,useReducer:x,useRef:j,useState:z,useSyncExternalStore:V,useTransition:P,version:A,use:W}=n;r.d(t,{},{Children:a,Component:o,Fragment:l,Profiler:i,PureComponent:c,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:m,act:d,cloneElement:p,createContext:h,createElement:f,createFactory:y,createRef:_,default:n,forwardRef:b,isValidElement:w,lazy:g,memo:S,startTransition:v,unstable_act:E,use:W,useCallback:N,useContext:R,useDebugValue:$,useDeferredValue:C,useEffect:D,useId:O,useImperativeHandle:M,useInsertionEffect:k,useLayoutEffect:T,useMemo:I,useReducer:x,useRef:j,useState:z,useSyncExternalStore:V,useTransition:P,version:A})}},t={};function r(n){var a=t[n];if(void 0!==a)return a.exports;var o=t[n]={exports:{}};return e[n](o,o.exports,r),o.exports}r.d=(e,t,n)=>{var a=(t,n)=>{for(var a in t)r.o(t,a)&&!r.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,[n]:t[a]})};a(t,"get"),a(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:a}=(0,r("p").MA)(window.React);var o=r("vD");let l=window.WallarmDS.Time,i=window.WallarmDS.DateFormatProvider,c=window.WallarmDS.HStack,s=window.WallarmDS.VStack,u=window.WallarmDS.TimeInput,m={title:"Inputs Date/TimeInput",component:u,parameters:{layout:"centered",docs:{description:{component:"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."}}},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:!1,disabled:!1,readOnly:!1,showIcon:!0,size:"default"}},d=[t=>e("div",{style:{minHeight:360,paddingBottom:280},children:e(t,{})})],p=t=>{let r,n,a=(0,o.c)(4);return a[0]!==t?({...r}=t,a[0]=t,a[1]=r):r=a[1],a[2]!==r?(n=e(u,{...r}),a[2]=r,a[3]=n):n=a[3],n};p.decorators=d,p.parameters={layout:"padded"};let h=()=>{let r,n,a=(0,o.c)(2);return a[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(i,{order:"day-first",hourCycle:12,children:t(s,{gap:12,children:[e("span",{className:"sb-annotation",children:"12-hour format"}),e(u,{placeholder:"Every 15 min",showTimeDropdown:!0,timeStep:15}),e(u,{placeholder:"Every 30 min",showTimeDropdown:!0,timeStep:30}),e(u,{placeholder:"Every 60 min",showTimeDropdown:!0,timeStep:60})]})}),a[0]=r):r=a[0],a[1]===Symbol.for("react.memo_cache_sentinel")?(n=t(c,{gap:24,children:[r,e(i,{order:"day-first",hourCycle:24,children:t(s,{gap:12,children:[e("span",{className:"sb-annotation",children:"24-hour format"}),e(u,{placeholder:"Every 15 min",showTimeDropdown:!0,timeStep:15}),e(u,{placeholder:"Every 30 min",showTimeDropdown:!0,timeStep:30}),e(u,{placeholder:"Every 60 min",showTimeDropdown:!0,timeStep:60})]})})]}),a[1]=n):n=a[1],n};h.decorators=d,h.parameters={layout:"padded"};let f=()=>{let r,n,a,m,d,p,h=(0,o.c)(6);return h[0]===Symbol.for("react.memo_cache_sentinel")?(r=e("span",{className:"sb-annotation",children:"Locale"}),h[0]=r):r=h[0],h[1]===Symbol.for("react.memo_cache_sentinel")?(n=t(s,{gap:12,children:[r,e(u,{readOnly:!0,defaultValue:new l(22,0),"data-testid":"time-input-read-only"})]}),h[1]=n):n=h[1],h[2]===Symbol.for("react.memo_cache_sentinel")?(a=e("span",{className:"sb-annotation",children:"12-hour"}),h[2]=a):a=h[2],h[3]===Symbol.for("react.memo_cache_sentinel")?(m=e(i,{order:"day-first",hourCycle:12,children:t(s,{gap:12,children:[a,e(u,{readOnly:!0,defaultValue:new l(22,0),"data-testid":"time-input-read-only-12h"})]})}),h[3]=m):m=h[3],h[4]===Symbol.for("react.memo_cache_sentinel")?(d=e("span",{className:"sb-annotation",children:"24-hour"}),h[4]=d):d=h[4],h[5]===Symbol.for("react.memo_cache_sentinel")?(p=t(c,{gap:24,children:[n,m,e(i,{order:"day-first",hourCycle:24,children:t(s,{gap:12,children:[d,e(u,{readOnly:!0,defaultValue:new l(22,0),"data-testid":"time-input-read-only-24h"})]})})]}),h[5]=p):p=h[5],p};f.parameters={layout:"padded"};var y=r("C");let _=[{name:"Basic",story:p,meta:m},{name:"States",story:()=>{let r,n,a,i,m,d,p,h,f,y=(0,o.c)(9);return y[0]===Symbol.for("react.memo_cache_sentinel")?(r=e("span",{className:"sb-annotation",children:"Default"}),n=e(u,{}),y[0]=r,y[1]=n):(r=y[0],n=y[1]),y[2]===Symbol.for("react.memo_cache_sentinel")?(a=t(s,{gap:12,children:[r,n,e(u,{defaultValue:new l(22,0)})]}),y[2]=a):a=y[2],y[3]===Symbol.for("react.memo_cache_sentinel")?(i=e("span",{className:"sb-annotation",children:"Disabled"}),m=e(u,{disabled:!0}),y[3]=i,y[4]=m):(i=y[3],m=y[4]),y[5]===Symbol.for("react.memo_cache_sentinel")?(d=t(s,{gap:12,children:[i,m,e(u,{disabled:!0,defaultValue:new l(14,30)})]}),y[5]=d):d=y[5],y[6]===Symbol.for("react.memo_cache_sentinel")?(p=e("span",{className:"sb-annotation",children:"Error"}),h=e(u,{error:!0}),y[6]=p,y[7]=h):(p=y[6],h=y[7]),y[8]===Symbol.for("react.memo_cache_sentinel")?(f=t(c,{gap:24,children:[a,d,t(s,{gap:12,children:[p,h,e(u,{error:!0,defaultValue:new l(14,30)})]})]}),y[8]=f):f=y[8],f},meta:m},{name:"Icon",story:()=>{let r,n,a,i,m,d,p=(0,o.c)(6);return p[0]===Symbol.for("react.memo_cache_sentinel")?(r=e("span",{className:"sb-annotation",children:"With icon"}),n=e(u,{showIcon:!0}),p[0]=r,p[1]=n):(r=p[0],n=p[1]),p[2]===Symbol.for("react.memo_cache_sentinel")?(a=t(s,{gap:12,children:[r,n,e(u,{showIcon:!0,defaultValue:new l(22,0)})]}),p[2]=a):a=p[2],p[3]===Symbol.for("react.memo_cache_sentinel")?(i=e("span",{className:"sb-annotation",children:"Without icon"}),m=e(u,{showIcon:!1}),p[3]=i,p[4]=m):(i=p[3],m=p[4]),p[5]===Symbol.for("react.memo_cache_sentinel")?(d=t(c,{gap:24,children:[a,t(s,{gap:12,children:[i,m,e(u,{showIcon:!1,defaultValue:new l(22,0)})]})]}),p[5]=d):d=p[5],d},meta:m},{name:"Sizes",story:()=>{let r,n,a,i,m,d,p,h,f,y=(0,o.c)(9);return y[0]===Symbol.for("react.memo_cache_sentinel")?(r=t(s,{gap:4,children:[e("span",{className:"sb-annotation",children:"Default (36px)"}),e(u,{size:"default"})]}),y[0]=r):r=y[0],y[1]===Symbol.for("react.memo_cache_sentinel")?(n=t(s,{gap:4,children:[e("span",{className:"sb-annotation",children:"Medium (32px)"}),e(u,{size:"medium"})]}),y[1]=n):n=y[1],y[2]===Symbol.for("react.memo_cache_sentinel")?(a=t(s,{gap:16,children:[r,n,t(s,{gap:4,children:[e("span",{className:"sb-annotation",children:"Small (24px)"}),e(u,{size:"small"})]})]}),y[2]=a):a=y[2],y[3]===Symbol.for("react.memo_cache_sentinel")?(i=e("span",{className:"sb-annotation",children:"Default filled"}),y[3]=i):i=y[3],y[4]===Symbol.for("react.memo_cache_sentinel")?(m=t(s,{gap:4,children:[i,e(u,{size:"default",defaultValue:new l(22,0)})]}),y[4]=m):m=y[4],y[5]===Symbol.for("react.memo_cache_sentinel")?(d=e("span",{className:"sb-annotation",children:"Medium filled"}),y[5]=d):d=y[5],y[6]===Symbol.for("react.memo_cache_sentinel")?(p=t(s,{gap:4,children:[d,e(u,{size:"medium",defaultValue:new l(22,0)})]}),y[6]=p):p=y[6],y[7]===Symbol.for("react.memo_cache_sentinel")?(h=e("span",{className:"sb-annotation",children:"Small filled"}),y[7]=h):h=y[7],y[8]===Symbol.for("react.memo_cache_sentinel")?(f=t(c,{gap:24,children:[a,t(s,{gap:16,children:[m,p,t(s,{gap:4,children:[h,e(u,{size:"small",defaultValue:new l(22,0)})]})]})]}),y[8]=f):f=y[8],f},meta:m},{name:"Filled",story:()=>{let r,n,a,c,m=(0,o.c)(4);return m[0]===Symbol.for("react.memo_cache_sentinel")?(r=e("span",{className:"sb-annotation",children:"24-hour"}),m[0]=r):r=m[0],m[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(i,{order:"day-first",hourCycle:24,children:t(s,{gap:4,children:[r,e(u,{defaultValue:new l(22,0)})]})}),m[1]=n):n=m[1],m[2]===Symbol.for("react.memo_cache_sentinel")?(a=e("span",{className:"sb-annotation",children:"12-hour"}),m[2]=a):a=m[2],m[3]===Symbol.for("react.memo_cache_sentinel")?(c=t(s,{gap:16,children:[n,e(i,{order:"day-first",hourCycle:12,children:t(s,{gap:4,children:[a,e(u,{defaultValue:new l(22,0)})]})})]}),m[3]=c):c=m[3],c},meta:m},{name:"Granularity",story:()=>{let r,n,a=(0,o.c)(2);return a[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(i,{order:"day-first",hourCycle:12,children:t(s,{gap:12,children:[e("span",{className:"sb-annotation",children:"12-hour format"}),e(u,{placeholder:"hour",granularity:"hour"}),e(u,{placeholder:"hour:min",granularity:"minute"}),e(u,{placeholder:"hour:min:sec",granularity:"second"})]})}),a[0]=r):r=a[0],a[1]===Symbol.for("react.memo_cache_sentinel")?(n=t(c,{gap:24,children:[r,e(i,{order:"day-first",hourCycle:24,children:t(s,{gap:12,children:[e("span",{className:"sb-annotation",children:"24-hour format"}),e(u,{placeholder:"hour",granularity:"hour"}),e(u,{placeholder:"hour:min",granularity:"minute"}),e(u,{placeholder:"hour:min:sec",granularity:"second"})]})})]}),a[1]=n):n=a[1],n},meta:m},{name:"TimeDropdownSteps",story:h,meta:m},{name:"ReadOnly",story:f,meta:m}];function b({entry:e}){let{story:t,meta:r}=e,n={...r.args,...t.args},a="function"==typeof t||t.$$typeof?t:t.render||r.render||r.component,o=()=>y.default.createElement(a,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=o;o=()=>e(t,l)}return y.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},y.default.createElement("h2",{className:"text-sm mb-12"},e.name),y.default.createElement(o))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(y.default.createElement(window.WallarmDS.Root,null,_.map((e,t)=>y.default.createElement(b,{key:t,entry:e})))),t}}})();

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

@@ -0,0 +1,204 @@
+A vertical run of events in the order they happened — a timeline records what occurred, so reach for `Progress` when the question is how far along something is rather than what has already taken place. `TimelineConnector` and `TimelineContent` are each optional, and the last item looks after itself: its line and its bottom padding go without any special casing.
+
+## 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 |
+| --- | --- | --- | --- | --- |
+| `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 | — |  |
+| `title` | `string \| undefined` | no | — |  |
+| `rel` | `string \| undefined` | no | — |  |
+| `on-change` | `ChangeEventHandler<T, Element> \| undefined` | no | — |  |
+| `data-testid` | `string \| undefined` | no | — |  |
+
+## Sub-components
+
+- `WallarmDS.TimelineConnector` — `TimelineConnectorProps` in the declaration bundle.
+- `WallarmDS.TimelineContent` — `TimelineContentProps` in the declaration bundle.
+- `WallarmDS.TimelineDescription` — `TimelineDescriptionProps` in the declaration bundle.
+- `WallarmDS.TimelineIndicator` — `TimelineIndicatorProps` in the declaration bundle.
+- `WallarmDS.TimelineItem` — `TimelineItemProps` in the declaration bundle.
+- `WallarmDS.TimelineSeparator` — `TimelineSeparatorProps` in the declaration bundle.
+- `WallarmDS.TimelineTitle` — `TimelineTitleProps` in the declaration bundle.
+
+## Stories
+
+### Basic
+
+The rail on its own — numbered indicators with the line between them, and no line trailing
+off the bottom of the last one.
+
+Source: Timeline/Timeline.stories.tsx#Basic
+
+### WithContent
+
+Content beside the rail. The line stretches to whatever height the row turns out to need,
+which is why the third step's long description does not break the rhythm.
+
+Source: Timeline/Timeline.stories.tsx#WithContent
+
+### WithoutConnector
+
+Content with no rail at all — effectively a `List` of titles and descriptions, for when the
+order carries the sequence and a drawn line would only add furniture.
+
+Source: Timeline/Timeline.stories.tsx#WithoutConnector
+
+## Story sources
+
+### Timeline/Timeline.stories.tsx
+
+```tsx
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { Timeline } from './Timeline';
+import { TimelineConnector } from './TimelineConnector';
+import { TimelineContent } from './TimelineContent';
+import { TimelineDescription } from './TimelineDescription';
+import { TimelineIndicator } from './TimelineIndicator';
+import { TimelineItem } from './TimelineItem';
+import { TimelineSeparator } from './TimelineSeparator';
+import { TimelineTitle } from './TimelineTitle';
+
+const DESCRIPTION = [
+  'A vertical run of events in the order they happened — a timeline records what occurred, so reach for `Progress` when the question is how far along something is rather than what has already taken place.',
+  '`TimelineConnector` and `TimelineContent` are each optional, and the last item looks after itself: its line and its bottom padding go without any special casing.',
+].join(' ');
+
+const meta = {
+  title: 'Data Display/Timeline',
+  component: Timeline,
+  subcomponents: {
+    TimelineItem,
+    TimelineConnector,
+    TimelineIndicator,
+    TimelineSeparator,
+    TimelineContent,
+    TimelineTitle,
+    TimelineDescription,
+  },
+  parameters: {
+    layout: 'centered',
+    docs: { description: { component: DESCRIPTION } },
+  },
+} satisfies Meta<typeof Timeline>;
+
+export default meta;
+
+/**
+ * The rail on its own — numbered indicators with the line between them, and no line trailing
+ * off the bottom of the last one.
+ */
+export const Basic: StoryFn<typeof meta> = () => (
+  <Timeline data-testid='timeline'>
+    <TimelineItem>
+      <TimelineConnector>
+        <TimelineIndicator>1</TimelineIndicator>
+        <TimelineSeparator />
+      </TimelineConnector>
+    </TimelineItem>
+    <TimelineItem>
+      <TimelineConnector>
+        <TimelineIndicator>2</TimelineIndicator>
+        <TimelineSeparator />
+      </TimelineConnector>
+    </TimelineItem>
+    <TimelineItem>
+      <TimelineConnector>
+        <TimelineIndicator>3</TimelineIndicator>
+        <TimelineSeparator />
+      </TimelineConnector>
+    </TimelineItem>
+    <TimelineItem>
+      <TimelineConnector>
+        <TimelineIndicator>4</TimelineIndicator>
+        <TimelineSeparator />
+      </TimelineConnector>
+    </TimelineItem>
+    <TimelineItem>
+      <TimelineConnector>
+        <TimelineIndicator>5</TimelineIndicator>
+        <TimelineSeparator />
+      </TimelineConnector>
+    </TimelineItem>
+  </Timeline>
+);
+
+/**
+ * Content beside the rail. The line stretches to whatever height the row turns out to need,
+ * which is why the third step's long description does not break the rhythm.
+ */
+export const WithContent: StoryFn<typeof meta> = () => (
+  <div className='max-w-[360px]'>
+    <Timeline>
+      <TimelineItem>
+        <TimelineConnector>
+          <TimelineIndicator>1</TimelineIndicator>
+          <TimelineSeparator />
+        </TimelineConnector>
+        <TimelineContent>
+          <TimelineTitle>Order placed</TimelineTitle>
+          <TimelineDescription>The order was placed by the customer.</TimelineDescription>
+        </TimelineContent>
+      </TimelineItem>
+      <TimelineItem>
+        <TimelineConnector>
+          <TimelineIndicator>2</TimelineIndicator>
+          <TimelineSeparator />
+        </TimelineConnector>
+        <TimelineContent>
+          <TimelineTitle>Order confirmed</TimelineTitle>
+          <TimelineDescription>Payment received, order confirmed.</TimelineDescription>
+        </TimelineContent>
+      </TimelineItem>
+      <TimelineItem>
+        <TimelineConnector>
+          <TimelineIndicator>3</TimelineIndicator>
+          <TimelineSeparator />
+        </TimelineConnector>
+        <TimelineContent>
+          <TimelineTitle>Order shipped</TimelineTitle>
+          <TimelineDescription>
+            The package left the warehouse and is on its way. This step has the longest description
+            of the three, to show the connecting line stretching to match a taller row.
+          </TimelineDescription>
+        </TimelineContent>
+      </TimelineItem>
+    </Timeline>
+  </div>
+);
+
+/**
+ * Content with no rail at all — effectively a `List` of titles and descriptions, for when the
+ * order carries the sequence and a drawn line would only add furniture.
+ */
+export const WithoutConnector: StoryFn<typeof meta> = () => (
+  <Timeline>
+    <TimelineItem>
+      <TimelineContent>
+        <TimelineTitle>Order placed</TimelineTitle>
+        <TimelineDescription>The order was placed by the customer.</TimelineDescription>
+      </TimelineContent>
+    </TimelineItem>
+    <TimelineItem>
+      <TimelineContent>
+        <TimelineTitle>Order confirmed</TimelineTitle>
+        <TimelineDescription>Payment received, order confirmed.</TimelineDescription>
+      </TimelineContent>
+    </TimelineItem>
+    <TimelineItem>
+      <TimelineContent>
+        <TimelineTitle>Order shipped</TimelineTitle>
+        <TimelineDescription>
+          The package left the warehouse and is on its way. This step has the longest description of
+          the three, to show the connecting line stretching to match a taller row.
+        </TimelineDescription>
+      </TimelineContent>
+    </TimelineItem>
+  </Timeline>
+);
+```

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

@@ -0,0 +1,2 @@
+<!-- @dsCard group="Data Display" 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/Timeline/stories.js

@@ -0,0 +1,12 @@
+var e={vD(e,t,r){let n,l;/**
+ * 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 o,a,i=Object.create,c=Object.defineProperty,s=Object.getOwnPropertyDescriptor,u=Object.getOwnPropertyNames,d=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty,h=(e,t,r,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let l of u(t))f.call(e,l)||l===r||c(e,l,{get:()=>t[l],enumerable:!(n=s(t,l))||n.enumerable});return e},m={},p={$dispatcherGuard:()=>O,$makeReadOnly:()=>k,$reset:()=>T,$structuralCheck:()=>I,c:()=>E,clearRenderCounterRegistry:()=>D,renderCounterRegistry:()=>M,useRenderCounter:()=>j};for(var y in p)c(m,y,{get:p[y],enumerable:!0});e.exports=h(c({},"__esModule",{value:!0}),m);var w=(l=null!=(n=r("C"))?i(d(n)):{},h(n&&n.__esModule?l:c(l,"default",{value:n,enumerable:!0}),n)),{useRef:_,useEffect:g,isValidElement:b}=w,S=null!=(o=w.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?o:w.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,R=Symbol.for("react.memo_cache_sentinel"),E="function"==typeof(null==(a=w.__COMPILER_RUNTIME)?void 0:a.c)?w.__COMPILER_RUNTIME.c:function(e){return w.useMemo(()=>{let t=Array(e);for(let r=0;r<e;r++)t[r]=R;return t[R]=!0,t},[])},v={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{v[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 C(e){return S.ReactCurrentDispatcher.current=e,S.ReactCurrentDispatcher.current}v.useMemoCache=e=>{if(null!=$)return $.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var N=[];function O(e){let t=S.ReactCurrentDispatcher.current;if(0===e){if(N.push(t),1===N.length&&($=t),t===v)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.");C(v)}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),C(e)}else if(2===e)N.push(t),C($);else if(3===e){let e=N.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");C(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function T(e){for(let t=0;t<e.length;t++)e[t]=R}function k(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var M=new Map;function D(){for(let e of M.values())e.forEach(e=>{e.count=0})}function j(e){let t=_(null);null!=t.current&&(t.current.count+=1),g(()=>{if(null==t.current){let r,n={count:0};null==(r=M.get(e))&&(r=new Set,M.set(e,r)),r.add(n),t.current=n}return()=>{var r;let n;null!==t.current&&(r=t.current,null!=(n=M.get(e))&&n.delete(r))}})}var x=new Set;function I(e,t,r,n,l,o){function a(e,t,a,i){let c=`${n}:${o} [${l}] ${r}${a} changed from ${e} to ${t} at depth ${i}`;x.has(c)||(x.add(c),console.error(c))}!function e(t,r,n,l){if(!(l>2)){if(t!==r)if(typeof t!=typeof r)a(`type ${typeof t}`,`type ${typeof r}`,n,l);else if("object"==typeof t){let o=Array.isArray(t),i=Array.isArray(r);if(null===t&&null!==r)a("null",`type ${typeof r}`,n,l);else if(null===r)a(`type ${typeof t}`,"null",n,l);else if(t instanceof Map)if(r instanceof Map)if(t.size!==r.size)a(`Map instance with size ${t.size}`,`Map instance with size ${r.size}`,n,l);else for(let[o,i]of t)r.has(o)?e(i,r.get(o),`${n}.get(${o})`,l+1):a(`Map instance with key ${o}`,`Map instance without key ${o}`,n,l);else a("Map instance","other value",n,l);else if(r instanceof Map)a("other value","Map instance",n,l);else if(t instanceof Set)if(r instanceof Set)if(t.size!==r.size)a(`Set instance with size ${t.size}`,`Set instance with size ${r.size}`,n,l);else for(let e of r)t.has(e)||a(`Set instance without element ${e}`,`Set instance with element ${e}`,n,l);else a("Set instance","other value",n,l);else if(r instanceof Set)a("other value","Set instance",n,l);else if(o||i)if(o!==i)a(`type ${o?"array":"object"}`,`type ${i?"array":"object"}`,n,l);else if(t.length!==r.length)a(`array with length ${t.length}`,`array with length ${r.length}`,n,l);else for(let o=0;o<t.length;o++)e(t[o],r[o],`${n}[${o}]`,l+1);else if(b(t)||b(r))b(t)!==b(r)?a(`type ${b(t)?"React element":"object"}`,`type ${b(r)?"React element":"object"}`,n,l):t.type!==r.type?a(`React element of type ${t.type}`,`React element of type ${r.type}`,n,l):e(t.props,r.props,`[props of ${n}]`,l+1);else{for(let e in r)e in t||a(`object without key ${e}`,`object with key ${e}`,n,l);for(let o in t)o in r?e(t[o],r[o],`${n}.${o}`,l+1):a(`object with key ${o}`,`object without key ${o}`,n,l)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(r)?isNaN(t)!==isNaN(r)&&a(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(r)?"NaN":"non-NaN value"}`,n,l):t!==r&&a(t,r,n,l)}}}(e,t,"",0)}},p(e,t,r){let n=new WeakMap,l=new WeakMap;function o(e,t,r){let o=t,a=r;if("object"==typeof o&&null!==o&&"$$typeof"in o&&o.$$typeof===Symbol.for("react.context")&&"Provider"in o&&(o=o.Provider),"function"==typeof o&&null!=a.ref&&!o.prototype?.isReactComponent){let t=o,r=n.get(e);r||(r=new WeakMap,n.set(e,r));let l=r.get(t);l||((l=e.forwardRef((e,r)=>t({...e,ref:r}))).displayName=t.displayName??t.name,r.set(t,l)),o=l}if("string"==typeof o&&"boolean"==typeof a.inert&&((a={...a}).inert?a.inert="":delete a.inert),"string"==typeof o)for(let[e,t]of[["fill-rule","fillRule"],["clip-rule","clipRule"]])e in a&&(a={...a,[t]:a[e]},delete a[e]);return"string"==typeof o&&null!=a.ref&&(o=function(e,t){let r=l.get(e);r||(r=new Map,l.set(e,r));let n=r.get(t);if(n)return n;let o=e.forwardRef((r,n)=>{let l=e.useRef(null);if(!l.current||l.current.original!==n){let e;l.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:l.current.callback})});return o.displayName=`CanvasHost(${t})`,r.set(t,o),o}(e,o)),{type:o,props:a}}function a(e){let t=(t,r,n)=>{let l=o(e,t,r??{});return e.createElement(l.type,void 0===n?l.props:{...l.props,key:n})};return{jsx:t,jsxs:(t,r,n)=>{let l=o(e,t,r??{}),{children:a,...i}=l.props;return e.createElement(l.type,void 0===n?i:{...i,key:n},...Array.isArray(a)?a:[a])},jsxDEV:t,Fragment:e.Fragment}}function i(e){return{...e,createElement:(t,r,...n)=>{let l=o(e,t,r??{});return e.createElement(l.type,l.props,...n)},cloneElement:(t,r,...n)=>{let l=e.cloneElement(t,r??void 0,...n),a=l.ref,i=o(e,l.type,{...l.props,ref:a});return i.type===l.type&&"string"!=typeof l.type?l:e.createElement(i.type,{...i.props,key:l.key})}}}r.d(t,{MA:()=>a,YJ:()=>i})},C(e,t,r){r.r(t);let n=(0,r("p").YJ)(window.React),{Children:l,Component:o,Fragment:a,Profiler:i,PureComponent:c,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:d,act:f,cloneElement:h,createContext:m,createElement:p,createFactory:y,createRef:w,forwardRef:_,isValidElement:g,lazy:b,memo:S,startTransition:R,unstable_act:E,useCallback:v,useContext:$,useDebugValue:C,useDeferredValue:N,useEffect:O,useId:T,useImperativeHandle:k,useInsertionEffect:M,useLayoutEffect:D,useMemo:j,useReducer:x,useRef:I,useState:P,useSyncExternalStore:A,useTransition:W,version:z,use:L}=n;r.d(t,{},{Children:l,Component:o,Fragment:a,Profiler:i,PureComponent:c,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:d,act:f,cloneElement:h,createContext:m,createElement:p,createFactory:y,createRef:w,default:n,forwardRef:_,isValidElement:g,lazy:b,memo:S,startTransition:R,unstable_act:E,use:L,useCallback:v,useContext:$,useDebugValue:C,useDeferredValue:N,useEffect:O,useId:T,useImperativeHandle:k,useInsertionEffect:M,useLayoutEffect:D,useMemo:j,useReducer:x,useRef:I,useState:P,useSyncExternalStore:A,useTransition:W,version:z})}},t={};function r(n){var l=t[n];if(void 0!==l)return l.exports;var o=t[n]={exports:{}};return e[n](o,o.exports,r),o.exports}r.d=(e,t,n)=>{var l=(t,n)=>{for(var l in t)r.o(t,l)&&!r.o(e,l)&&Object.defineProperty(e,l,{enumerable:!0,[n]:t[l]})};l(t,"get"),l(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:l}=(0,r("p").MA)(window.React);var o=r("vD");let a=window.WallarmDS.Timeline,i=window.WallarmDS.TimelineConnector,c=window.WallarmDS.TimelineContent,s=window.WallarmDS.TimelineDescription,u=window.WallarmDS.TimelineIndicator,d=window.WallarmDS.TimelineItem,f=window.WallarmDS.TimelineSeparator,h=window.WallarmDS.TimelineTitle,m={title:"Data Display/Timeline",component:a,subcomponents:{TimelineItem:d,TimelineConnector:i,TimelineIndicator:u,TimelineSeparator:f,TimelineContent:c,TimelineTitle:h,TimelineDescription:s},parameters:{layout:"centered",docs:{description:{component:"A vertical run of events in the order they happened — a timeline records what occurred, so reach for `Progress` when the question is how far along something is rather than what has already taken place. `TimelineConnector` and `TimelineContent` are each optional, and the last item looks after itself: its line and its bottom padding go without any special casing."}}}};var p=r("C");let y=[{name:"Basic",story:()=>{let r,n,l,c,s,h=(0,o.c)(5);return h[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(d,{children:t(i,{children:[e(u,{children:"1"}),e(f,{})]})}),h[0]=r):r=h[0],h[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(d,{children:t(i,{children:[e(u,{children:"2"}),e(f,{})]})}),h[1]=n):n=h[1],h[2]===Symbol.for("react.memo_cache_sentinel")?(l=e(d,{children:t(i,{children:[e(u,{children:"3"}),e(f,{})]})}),h[2]=l):l=h[2],h[3]===Symbol.for("react.memo_cache_sentinel")?(c=e(d,{children:t(i,{children:[e(u,{children:"4"}),e(f,{})]})}),h[3]=c):c=h[3],h[4]===Symbol.for("react.memo_cache_sentinel")?(s=t(a,{"data-testid":"timeline",children:[r,n,l,c,e(d,{children:t(i,{children:[e(u,{children:"5"}),e(f,{})]})})]}),h[4]=s):s=h[4],s},meta:m},{name:"WithContent",story:()=>{let r,n,l,m,p,y,w=(0,o.c)(6);return w[0]===Symbol.for("react.memo_cache_sentinel")?(r=t(i,{children:[e(u,{children:"1"}),e(f,{})]}),w[0]=r):r=w[0],w[1]===Symbol.for("react.memo_cache_sentinel")?(n=t(d,{children:[r,t(c,{children:[e(h,{children:"Order placed"}),e(s,{children:"The order was placed by the customer."})]})]}),w[1]=n):n=w[1],w[2]===Symbol.for("react.memo_cache_sentinel")?(l=t(i,{children:[e(u,{children:"2"}),e(f,{})]}),w[2]=l):l=w[2],w[3]===Symbol.for("react.memo_cache_sentinel")?(m=t(d,{children:[l,t(c,{children:[e(h,{children:"Order confirmed"}),e(s,{children:"Payment received, order confirmed."})]})]}),w[3]=m):m=w[3],w[4]===Symbol.for("react.memo_cache_sentinel")?(p=t(i,{children:[e(u,{children:"3"}),e(f,{})]}),w[4]=p):p=w[4],w[5]===Symbol.for("react.memo_cache_sentinel")?(y=e("div",{className:"max-w-[360px]",children:t(a,{children:[n,m,t(d,{children:[p,t(c,{children:[e(h,{children:"Order shipped"}),e(s,{children:"The package left the warehouse and is on its way. This step has the longest description of the three, to show the connecting line stretching to match a taller row."})]})]})]})}),w[5]=y):y=w[5],y},meta:m},{name:"WithoutConnector",story:()=>{let r,n,l,i=(0,o.c)(3);return i[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(d,{children:t(c,{children:[e(h,{children:"Order placed"}),e(s,{children:"The order was placed by the customer."})]})}),i[0]=r):r=i[0],i[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(d,{children:t(c,{children:[e(h,{children:"Order confirmed"}),e(s,{children:"Payment received, order confirmed."})]})}),i[1]=n):n=i[1],i[2]===Symbol.for("react.memo_cache_sentinel")?(l=t(a,{children:[r,n,e(d,{children:t(c,{children:[e(h,{children:"Order shipped"}),e(s,{children:"The package left the warehouse and is on its way. This step has the longest description of the three, to show the connecting line stretching to match a taller row."})]})})]}),i[2]=l):l=i[2],l},meta:m}];function w({entry:e}){let{story:t,meta:r}=e,n={...r.args,...t.args},l="function"==typeof t||t.$$typeof?t:t.render||r.render||r.component,o=()=>p.default.createElement(l,n),a={args:n,globals:{theme:"light"},parameters:{...r.parameters,...t.parameters},viewMode:"story"};for(let e of[...r.decorators||[],...t.decorators||[]].reverse()){let t=o;o=()=>e(t,a)}return p.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},p.default.createElement("h2",{className:"text-sm mb-12"},e.name),p.default.createElement(o))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(p.default.createElement(window.WallarmDS.Root,null,y.map((e,t)=>p.default.createElement(w,{key:t,entry:e})))),t}}})();