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

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

@@ -0,0 +1,12 @@
+var e={vD(e,t,r){let i,n;/**
+ * 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 l,a,o=Object.create,s=Object.defineProperty,c=Object.getOwnPropertyDescriptor,h=Object.getOwnPropertyNames,u=Object.getPrototypeOf,d=Object.prototype.hasOwnProperty,m=(e,t,r,i)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let n of h(t))d.call(e,n)||n===r||s(e,n,{get:()=>t[n],enumerable:!(i=c(t,n))||i.enumerable});return e},f={},p={$dispatcherGuard:()=>R,$makeReadOnly:()=>N,$reset:()=>O,$structuralCheck:()=>V,c:()=>C,clearRenderCounterRegistry:()=>M,renderCounterRegistry:()=>$,useRenderCounter:()=>T};for(var y in p)s(f,y,{get:p[y],enumerable:!0});e.exports=m(s({},"__esModule",{value:!0}),f);var g=(n=null!=(i=r("C"))?o(u(i)):{},m(i&&i.__esModule?n:s(n,"default",{value:i,enumerable:!0}),i)),{useRef:b,useEffect:S,isValidElement:w}=g,_=null!=(l=g.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?l:g.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,v=Symbol.for("react.memo_cache_sentinel"),C="function"==typeof(null==(a=g.__COMPILER_RUNTIME)?void 0:a.c)?g.__COMPILER_RUNTIME.c:function(e){return g.useMemo(()=>{let t=Array(e);for(let r=0;r<e;r++)t[r]=v;return t[v]=!0,t},[])},I={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{I[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 D=null;function E(e){return _.ReactCurrentDispatcher.current=e,_.ReactCurrentDispatcher.current}I.useMemoCache=e=>{if(null!=D)return D.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var x=[];function R(e){let t=_.ReactCurrentDispatcher.current;if(0===e){if(x.push(t),1===x.length&&(D=t),t===I)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.");E(I)}else if(1===e){let e=x.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===x.length&&(D=null),E(e)}else if(2===e)x.push(t),E(D);else if(3===e){let e=x.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");E(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 N(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var $=new Map;function M(){for(let e of $.values())e.forEach(e=>{e.count=0})}function T(e){let t=b(null);null!=t.current&&(t.current.count+=1),S(()=>{if(null==t.current){let r,i={count:0};null==(r=$.get(e))&&(r=new Set,$.set(e,r)),r.add(i),t.current=i}return()=>{var r;let i;null!==t.current&&(r=t.current,null!=(i=$.get(e))&&i.delete(r))}})}var k=new Set;function V(e,t,r,i,n,l){function a(e,t,a,o){let s=`${i}:${l} [${n}] ${r}${a} changed from ${e} to ${t} at depth ${o}`;k.has(s)||(k.add(s),console.error(s))}!function e(t,r,i,n){if(!(n>2)){if(t!==r)if(typeof t!=typeof r)a(`type ${typeof t}`,`type ${typeof r}`,i,n);else if("object"==typeof t){let l=Array.isArray(t),o=Array.isArray(r);if(null===t&&null!==r)a("null",`type ${typeof r}`,i,n);else if(null===r)a(`type ${typeof t}`,"null",i,n);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}`,i,n);else for(let[l,o]of t)r.has(l)?e(o,r.get(l),`${i}.get(${l})`,n+1):a(`Map instance with key ${l}`,`Map instance without key ${l}`,i,n);else a("Map instance","other value",i,n);else if(r instanceof Map)a("other value","Map instance",i,n);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}`,i,n);else for(let e of r)t.has(e)||a(`Set instance without element ${e}`,`Set instance with element ${e}`,i,n);else a("Set instance","other value",i,n);else if(r instanceof Set)a("other value","Set instance",i,n);else if(l||o)if(l!==o)a(`type ${l?"array":"object"}`,`type ${o?"array":"object"}`,i,n);else if(t.length!==r.length)a(`array with length ${t.length}`,`array with length ${r.length}`,i,n);else for(let l=0;l<t.length;l++)e(t[l],r[l],`${i}[${l}]`,n+1);else if(w(t)||w(r))w(t)!==w(r)?a(`type ${w(t)?"React element":"object"}`,`type ${w(r)?"React element":"object"}`,i,n):t.type!==r.type?a(`React element of type ${t.type}`,`React element of type ${r.type}`,i,n):e(t.props,r.props,`[props of ${i}]`,n+1);else{for(let e in r)e in t||a(`object without key ${e}`,`object with key ${e}`,i,n);for(let l in t)l in r?e(t[l],r[l],`${i}.${l}`,n+1):a(`object with key ${l}`,`object without key ${l}`,i,n)}}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"}`,i,n):t!==r&&a(t,r,i,n)}}}(e,t,"",0)}},p(e,t,r){let i=new WeakMap,n=new WeakMap;function l(e,t,r){let l=t,a=r;if("object"==typeof l&&null!==l&&"$$typeof"in l&&l.$$typeof===Symbol.for("react.context")&&"Provider"in l&&(l=l.Provider),"function"==typeof l&&null!=a.ref&&!l.prototype?.isReactComponent){let t=l,r=i.get(e);r||(r=new WeakMap,i.set(e,r));let n=r.get(t);n||((n=e.forwardRef((e,r)=>t({...e,ref:r}))).displayName=t.displayName??t.name,r.set(t,n)),l=n}if("string"==typeof l&&"boolean"==typeof a.inert&&((a={...a}).inert?a.inert="":delete a.inert),"string"==typeof l)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 l&&null!=a.ref&&(l=function(e,t){let r=n.get(e);r||(r=new Map,n.set(e,r));let i=r.get(t);if(i)return i;let l=e.forwardRef((r,i)=>{let n=e.useRef(null);if(!n.current||n.current.original!==i){let e;n.current={original:i,callback:t=>{if(null==t&&e){let t=e;e=void 0,t();return}if("function"==typeof i){let r=i(t);e="function"==typeof r?r:void 0}else i&&(i.current=t)}}}return e.createElement(t,{...r,ref:n.current.callback})});return l.displayName=`CanvasHost(${t})`,r.set(t,l),l}(e,l)),{type:l,props:a}}function a(e){let t=(t,r,i)=>{let n=l(e,t,r??{});return e.createElement(n.type,void 0===i?n.props:{...n.props,key:i})};return{jsx:t,jsxs:(t,r,i)=>{let n=l(e,t,r??{}),{children:a,...o}=n.props;return e.createElement(n.type,void 0===i?o:{...o,key:i},...Array.isArray(a)?a:[a])},jsxDEV:t,Fragment:e.Fragment}}function o(e){return{...e,createElement:(t,r,...i)=>{let n=l(e,t,r??{});return e.createElement(n.type,n.props,...i)},cloneElement:(t,r,...i)=>{let n=e.cloneElement(t,r??void 0,...i),a=n.ref,o=l(e,n.type,{...n.props,ref:a});return o.type===n.type&&"string"!=typeof n.type?n:e.createElement(o.type,{...o.props,key:n.key})}}}r.d(t,{MA:()=>a,YJ:()=>o})},C(e,t,r){r.r(t);let i=(0,r("p").YJ)(window.React),{Children:n,Component:l,Fragment:a,Profiler:o,PureComponent:s,StrictMode:c,Suspense:h,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:u,act:d,cloneElement:m,createContext:f,createElement:p,createFactory:y,createRef:g,forwardRef:b,isValidElement:S,lazy:w,memo:_,startTransition:v,unstable_act:C,useCallback:I,useContext:D,useDebugValue:E,useDeferredValue:x,useEffect:R,useId:O,useImperativeHandle:N,useInsertionEffect:$,useLayoutEffect:M,useMemo:T,useReducer:k,useRef:V,useState:W,useSyncExternalStore:j,useTransition:A,version:z,use:P}=i;r.d(t,{},{Children:n,Component:l,Fragment:a,Profiler:o,PureComponent:s,StrictMode:c,Suspense:h,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:u,act:d,cloneElement:m,createContext:f,createElement:p,createFactory:y,createRef:g,default:i,forwardRef:b,isValidElement:S,lazy:w,memo:_,startTransition:v,unstable_act:C,use:P,useCallback:I,useContext:D,useDebugValue:E,useDeferredValue:x,useEffect:R,useId:O,useImperativeHandle:N,useInsertionEffect:$,useLayoutEffect:M,useMemo:T,useReducer:k,useRef:V,useState:W,useSyncExternalStore:j,useTransition:A,version:z})}},t={};function r(i){var n=t[i];if(void 0!==n)return n.exports;var l=t[i]={exports:{}};return e[i](l,l.exports,r),l.exports}r.d=(e,t,i)=>{var n=(t,i)=>{for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,[i]:t[n]})};n(t,"get"),n(i,"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:i,Fragment:n}=(0,r("p").MA)(window.React);var l=r("vD"),a=Object.defineProperty,o=(e,t,r)=>{let i;return(i="symbol"!=typeof t?t+"":t)in e?a(e,i,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[i]=r},s=e=>null!=e&&"object"==typeof e&&!Array.isArray(e),c=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);Function.prototype.toString.call(Object);var h=e=>e?.constructor.name==="Array",u=(e,t)=>{if(Object.is(e,t))return!0;if(null==e&&null!=t||null!=e&&null==t)return!1;if("function"==typeof e?.isEqual&&"function"==typeof t?.isEqual)return e.isEqual(t);if("function"==typeof e&&"function"==typeof t)return e.toString()===t.toString();if(h(e)&&h(t))return((e,t)=>{if(e.length!==t.length)return!1;for(let r=0;r<e.length;r++)if(!u(e[r],t[r]))return!1;return!0})(Array.from(e),Array.from(t));if("object"!=typeof e||"object"!=typeof t)return!1;let r=Object.keys(t??Object.create(null)),i=r.length;for(let t=0;t<i;t++)if(!Reflect.has(e,r[t]))return!1;for(let n=0;n<i;n++){let i=r[n];if(!u(e[i],t[i]))return!1}return!0},d={itemToValue:e=>"string"==typeof e?e:s(e)&&c(e,"value")?e.value:"",itemToString:e=>"string"==typeof e?e:s(e)&&c(e,"label")?e.label:d.itemToValue(e),isItemDisabled:e=>!!(s(e)&&c(e,"disabled"))&&!!e.disabled},m=class e{constructor(t){o(this,"options",t),o(this,"items"),o(this,"indexMap",null),o(this,"copy",t=>new e({...this.options,items:t??[...this.items]})),o(this,"isEqual",e=>u(this.items,e.items)),o(this,"setItems",e=>this.copy(e)),o(this,"getValues",(e=this.items)=>{let t=[];for(let r of e){let e=this.getItemValue(r);null!=e&&t.push(e)}return t}),o(this,"find",e=>{if(null==e)return null;let t=this.indexOf(e);return -1!==t?this.at(t):null}),o(this,"findMany",e=>{let t=[];for(let r of e){let e=this.find(r);null!=e&&t.push(e)}return t}),o(this,"at",e=>{if(!this.options.groupBy&&!this.options.groupSort)return this.items[e]??null;let t=0;for(let[,r]of this.group())for(let i of r){if(t===e)return i;t++}return null}),o(this,"sortFn",(e,t)=>(this.indexOf(e)??0)-(this.indexOf(t)??0)),o(this,"sort",e=>[...e].sort(this.sortFn.bind(this))),o(this,"getItemValue",e=>null==e?null:this.options.itemToValue?.(e)??d.itemToValue(e)),o(this,"getItemDisabled",e=>null!=e&&(this.options.isItemDisabled?.(e)??d.isItemDisabled(e))),o(this,"stringifyItem",e=>null==e?null:this.options.itemToString?.(e)??d.itemToString(e)),o(this,"stringify",e=>null==e?null:this.stringifyItem(this.find(e))),o(this,"stringifyItems",(e,t=", ")=>{let r=[];for(let t of e){let e=this.stringifyItem(t);null!=e&&r.push(e)}return r.join(t)}),o(this,"stringifyMany",(e,t)=>this.stringifyItems(this.findMany(e),t)),o(this,"has",e=>-1!==this.indexOf(e)),o(this,"hasItem",e=>null!=e&&this.has(this.getItemValue(e))),o(this,"group",()=>{let{groupBy:e,groupSort:t}=this.options;if(!e)return[["",[...this.items]]];let r=new Map;this.items.forEach((t,i)=>{let n=e(t,i);r.has(n)||r.set(n,[]),r.get(n).push(t)});let i=Array.from(r.entries());return t&&i.sort(([e],[r])=>{if("function"==typeof t)return t(e,r);if(Array.isArray(t)){let i=t.indexOf(e),n=t.indexOf(r);return -1===i?1:-1===n?-1:i-n}return"asc"===t?e.localeCompare(r):"desc"===t?r.localeCompare(e):0}),i}),o(this,"getNextValue",(e,t=1,r=!1)=>{let i=this.indexOf(e);if(-1===i)return null;for(i=r?Math.min(i+t,this.size-1):i+t;i<=this.size&&this.getItemDisabled(this.at(i));)i++;return this.getItemValue(this.at(i))}),o(this,"getPreviousValue",(e,t=1,r=!1)=>{let i=this.indexOf(e);if(-1===i)return null;for(i=r?Math.max(i-t,0):i-t;i>=0&&this.getItemDisabled(this.at(i));)i--;return this.getItemValue(this.at(i))}),o(this,"indexOf",e=>{if(null==e)return -1;if(!this.options.groupBy&&!this.options.groupSort)return this.items.findIndex(t=>this.getItemValue(t)===e);if(!this.indexMap){this.indexMap=new Map;let e=0;for(let[,t]of this.group())for(let r of t){let t=this.getItemValue(r);null!=t&&this.indexMap.set(t,e),e++}}return this.indexMap.get(e)??-1}),o(this,"getByText",(e,t)=>{let r=null!=t?this.indexOf(t):-1,i=1===e.length;for(let n=0;n<this.items.length;n++){let l=this.items[(r+n+1)%this.items.length];if((!i||this.getItemValue(l)!==t)&&!this.getItemDisabled(l)&&f(this.stringifyItem(l),e))return l}}),o(this,"search",(e,t)=>{let{state:r,currentValue:i,timeout:n=350}=t,l=r.keysSoFar+e,a=l.length>1&&Array.from(l).every(e=>e===l[0])?l[0]:l,o=this.getByText(a,i),s=this.getItemValue(o);function c(){clearTimeout(r.timer),r.timer=-1}return!function e(t){r.keysSoFar=t,c(),""!==t&&(r.timer=+setTimeout(()=>{e(""),c()},n))}(l),s}),o(this,"update",(e,t)=>{let r=this.indexOf(e);return -1===r?this:this.copy([...this.items.slice(0,r),t,...this.items.slice(r+1)])}),o(this,"upsert",(e,t,r="append")=>{let i=this.indexOf(e);return -1===i?("append"===r?this.append:this.prepend)(t):this.copy([...this.items.slice(0,i),t,...this.items.slice(i+1)])}),o(this,"insert",(e,...t)=>this.copy(p(this.items,e,...t))),o(this,"insertBefore",(e,...t)=>{let r=this.indexOf(e);if(-1===r)if(0!==this.items.length)return this;else r=0;return this.copy(p(this.items,r,...t))}),o(this,"insertAfter",(e,...t)=>{let r=this.indexOf(e);if(-1===r)if(0!==this.items.length)return this;else r=0;return this.copy(p(this.items,r+1,...t))}),o(this,"prepend",(...e)=>this.copy(p(this.items,0,...e))),o(this,"append",(...e)=>this.copy(p(this.items,this.items.length,...e))),o(this,"filter",e=>{let t=this.items.filter((t,r)=>e(this.stringifyItem(t),r,t));return this.copy(t)}),o(this,"remove",(...e)=>{let t=e.map(e=>"string"==typeof e?e:this.getItemValue(e));return this.copy(this.items.filter(e=>{let r=this.getItemValue(e);return null!=r&&!t.includes(r)}))}),o(this,"move",(e,t)=>{let r=this.indexOf(e);return -1===r?this:this.copy(y(this.items,[r],t))}),o(this,"moveBefore",(e,...t)=>{let r=this.items.findIndex(t=>this.getItemValue(t)===e);if(-1===r)return this;let i=t.map(e=>this.items.findIndex(t=>this.getItemValue(t)===e)).sort((e,t)=>e-t);return this.copy(y(this.items,i,r))}),o(this,"moveAfter",(e,...t)=>{let r=this.items.findIndex(t=>this.getItemValue(t)===e);if(-1===r)return this;let i=t.map(e=>this.items.findIndex(t=>this.getItemValue(t)===e)).sort((e,t)=>e-t);return this.copy(y(this.items,i,r+1))}),o(this,"reorder",(e,t)=>this.copy(y(this.items,[e],t))),o(this,"compareValue",(e,t)=>{let r=this.indexOf(e),i=this.indexOf(t);return r<i?-1:+(r>i)}),o(this,"range",(e,t)=>{let r=[],i=e;for(;null!=i;){if(this.find(i)&&r.push(i),i===t)return r;i=this.getNextValue(i)}return[]}),o(this,"getValueRange",(e,t)=>e&&t?0>=this.compareValue(e,t)?this.range(e,t):this.range(t,e):[]),o(this,"toString",()=>{let e="";for(let t of this.items)e+=[this.getItemValue(t),this.stringifyItem(t),this.getItemDisabled(t)].filter(Boolean).join(":")+",";return e}),o(this,"toJSON",()=>({size:this.size,first:this.firstValue,last:this.lastValue})),this.items=[...t.items]}get size(){return this.items.length}get firstValue(){let e=0;for(;this.getItemDisabled(this.at(e));)e++;return this.getItemValue(this.at(e))}get lastValue(){let e=this.size-1;for(;this.getItemDisabled(this.at(e));)e--;return this.getItemValue(this.at(e))}*[Symbol.iterator](){yield*this.items}},f=(e,t)=>!!e?.toLowerCase().startsWith(t.toLowerCase());function p(e,t,...r){return[...e.slice(0,t),...r,...e.slice(t)]}function y(e,t,r){let i=(t=[...t].sort((e,t)=>e-t)).map(t=>e[t]);for(let r=t.length-1;r>=0;r--)e=[...e.slice(0,t[r]),...e.slice(t[r]+1)];return r=Math.max(0,r-t.filter(e=>e<r).length),[...e.slice(0,r),...i,...e.slice(r)]}var g=e=>new m(e);let b=window.WallarmDS.Icons.Info,S=window.WallarmDS.Button,w=window.WallarmDS.Checkbox,_=window.WallarmDS.CheckboxDescription,v=window.WallarmDS.CheckboxIndicator,C=window.WallarmDS.CheckboxLabel,I=window.WallarmDS.Input,D=window.WallarmDS.NumberInput,E=window.WallarmDS.Radio,x=window.WallarmDS.RadioGroup,R=window.WallarmDS.RadioIndicator,O=window.WallarmDS.RadioLabel,N=window.WallarmDS.Select,$=window.WallarmDS.SelectButton,M=window.WallarmDS.SelectContent,T=window.WallarmDS.SelectOption,k=window.WallarmDS.SelectOptionText,V=window.WallarmDS.SelectPositioner,W=window.WallarmDS.HStack,j=window.WallarmDS.Switch,A=window.WallarmDS.SwitchControl,z=window.WallarmDS.SwitchDescription,P=window.WallarmDS.SwitchLabel,F=window.WallarmDS.Textarea,L=window.WallarmDS.Tooltip,U=window.WallarmDS.TooltipContent,B=window.WallarmDS.TooltipTrigger,Y=window.WallarmDS.Field,q=window.WallarmDS.FieldAction,G=window.WallarmDS.FieldDescription,J=window.WallarmDS.FieldError,H=window.WallarmDS.FieldGroup,Z=window.WallarmDS.FieldIndicator,K=window.WallarmDS.FieldLabel,Q=window.WallarmDS.FieldLegend,X=window.WallarmDS.FieldSeparator,ee=window.WallarmDS.FieldSet,et={title:"Inputs/Field",component:Y,subcomponents:{FieldAction:q,FieldDescription:G,FieldError:J,FieldGroup:H,FieldIndicator:Z,FieldLabel:K,FieldLegend:Q,FieldSeparator:X,FieldSet:ee},parameters:{layout:"centered",docs:{description:{component:"The scaffolding around a control — label, description, error and the required marker — so the control itself only has to be the control. Only `Input`, `Textarea` and `Slider` read this context automatically; wrap anything else and you get the layout, but the labelling still has to be wired by hand."}}}};function er(t){return e(T,{item:t,children:e(k,{children:t})},t)}function ei(t){return e(T,{item:t,children:e(k,{children:t})},t)}function en(t){return e(T,{item:t,children:e(k,{children:t.label})},t.value)}function el(t){return e(T,{item:t,children:e(k,{children:t.label})},t.value)}function ea(t){return e(T,{item:t,children:e(k,{children:t.label})},t.value)}var eo=r("C");let es=[{name:"Basic",story:()=>{let r,i,n,a,o,s,c,h,u,d,m,f,p,y,b,_,T,k,z,L,U,B,q,J,Z,et,en,el=(0,l.c)(27);if(el[0]===Symbol.for("react.memo_cache_sentinel")){let l=g({items:["01","02","03","04","05","06","07","08","09","10","11","12"]}),f=g({items:["2025","2026","2027","2028","2029"]});d="min-w-320",a=H,n=ee,h=e(Q,{children:"Payment Method"}),u=e(G,{children:"All transactions are secure and encrypted"}),i=H,s=t(Y,{children:[e(K,{children:"Name on Card"}),e(I,{placeholder:"Evil Rabbit"})]}),c=t(Y,{children:[e(K,{htmlFor:"checkout-7j9-card-number-uw1",children:"Card Number"}),e(I,{id:"checkout-7j9-card-number-uw1",placeholder:"1234 5678 9012 3456",required:!0}),e(G,{children:"Enter your 16-digit card number"})]}),r=W,o=t(Y,{children:[e(K,{children:"Month"}),t(N,{collection:l,children:[e($,{placeholder:"Month"}),e(V,{children:e(M,{children:l.items.map(er)})})]})]}),m=t(Y,{children:[e(K,{children:"Year"}),t(N,{collection:f,children:[e($,{placeholder:"Year"}),e(V,{children:e(M,{children:f.items.map(ei)})})]})]}),el[0]=r,el[1]=i,el[2]=n,el[3]=a,el[4]=o,el[5]=s,el[6]=c,el[7]=h,el[8]=u,el[9]=d,el[10]=m}else r=el[0],i=el[1],n=el[2],a=el[3],o=el[4],s=el[5],c=el[6],h=el[7],u=el[8],d=el[9],m=el[10];return el[11]===Symbol.for("react.memo_cache_sentinel")?(f=t(r,{children:[o,m,t(Y,{children:[e(K,{children:"CVV"}),e(I,{placeholder:"123",required:!0})]})]}),el[11]=f):f=el[11],el[12]===Symbol.for("react.memo_cache_sentinel")?(p=t(n,{children:[h,u,t(i,{children:[s,c,f,t(Y,{children:[e(K,{children:"Amount"}),e(D,{defaultValue:"1000"})]})]})]}),y=e(X,{}),el[12]=p,el[13]=y):(p=el[12],y=el[13]),el[14]===Symbol.for("react.memo_cache_sentinel")?(b=e(Q,{children:"Billing Address"}),_=e(G,{children:"The billing address associated with your payment method"}),el[14]=b,el[15]=_):(b=el[14],_=el[15]),el[16]===Symbol.for("react.memo_cache_sentinel")?(T=t(ee,{children:[b,_,e(H,{children:e(Y,{orientation:"horizontal",children:t(w,{defaultChecked:!0,children:[e(v,{}),e(C,{children:"Same as shipping address"})]})})})]}),k=e(X,{}),el[16]=T,el[17]=k):(T=el[16],k=el[17]),el[18]===Symbol.for("react.memo_cache_sentinel")?(z=e(Q,{children:"Subscription Plan"}),L=e(G,{children:"Yearly and lifetime plans offer significant savings."}),el[18]=z,el[19]=L):(z=el[18],L=el[19]),el[20]===Symbol.for("react.memo_cache_sentinel")?(U=t(E,{value:"monthly",children:[e(R,{}),e(O,{children:"Monthly ($9.99/month)"})]}),el[20]=U):U=el[20],el[21]===Symbol.for("react.memo_cache_sentinel")?(B=t(E,{value:"yearly",children:[e(R,{}),e(O,{children:"Yearly ($99.99/year)"})]}),el[21]=B):B=el[21],el[22]===Symbol.for("react.memo_cache_sentinel")?(q=t(ee,{children:[z,L,e(Y,{children:t(x,{defaultValue:"monthly",children:[U,B,t(E,{value:"lifetime",children:[e(R,{}),e(O,{children:"Lifetime ($299.99)"})]})]})})]}),J=e(X,{}),el[22]=q,el[23]=J):(q=el[22],J=el[23]),el[24]===Symbol.for("react.memo_cache_sentinel")?(Z=e(ee,{children:e(H,{children:e(Y,{orientation:"horizontal",children:t(j,{children:[e(A,{}),e(P,{children:"Notice when delivered"})]})})})}),el[24]=Z):Z=el[24],el[25]===Symbol.for("react.memo_cache_sentinel")?(et=e(ee,{children:e(H,{children:t(Y,{children:[e(K,{children:"Comments"}),e(F,{placeholder:"Add any additional comments"})]})})}),el[25]=et):et=el[25],el[26]===Symbol.for("react.memo_cache_sentinel")?(en=e("div",{className:d,children:e("form",{children:t(a,{children:[p,y,T,k,q,J,Z,et,t(Y,{orientation:"horizontal",children:[e(S,{type:"submit",children:"Submit"}),e(S,{variant:"outline",color:"neutral",type:"button",children:"Cancel"})]})]})})}),el[26]=en):en=el[26],en},meta:et},{name:"Inputs",story:()=>{let r,i,n=(0,l.c)(2);return n[0]===Symbol.for("react.memo_cache_sentinel")?(r=t(Y,{children:[e(K,{children:"Username"}),e(I,{type:"text",placeholder:"Max Leiter"}),e(G,{children:"Choose a unique username for your account."})]}),n[0]=r):r=n[0],n[1]===Symbol.for("react.memo_cache_sentinel")?(i=e("div",{className:"min-w-320",children:e(ee,{children:t(H,{children:[r,t(Y,{children:[e(K,{children:"Password"}),e(G,{children:"Must be at least 8 characters long."}),e(I,{type:"password",placeholder:"********"})]})]})})}),n[1]=i):i=n[1],i},meta:et},{name:"Textareas",story:()=>{let r,i=(0,l.c)(1);return i[0]===Symbol.for("react.memo_cache_sentinel")?(r=e("div",{className:"min-w-320",children:e(ee,{children:e(H,{children:t(Y,{children:[e(K,{children:"Feedback"}),e(F,{placeholder:"Your feedback helps us improve...",rows:4}),e(G,{children:"Share your thoughts about our service."})]})})})}),i[0]=r):r=i[0],r},meta:et},{name:"Fieldset",story:()=>{let r,i,n,a,o,s=(0,l.c)(5);return s[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(Q,{children:"Profile"}),i=e(G,{children:"This appears on invoices and emails."}),s[0]=r,s[1]=i):(r=s[0],i=s[1]),s[2]===Symbol.for("react.memo_cache_sentinel")?(n=t(Y,{children:[t(K,{children:["Full name",e(q,{children:"Generate new"})]}),e(I,{autoComplete:"off",placeholder:"Evil Rabbit"}),e(G,{children:"This appears on invoices and emails."})]}),s[2]=n):n=s[2],s[3]===Symbol.for("react.memo_cache_sentinel")?(a=t(Y,{required:!0,children:[t(K,{children:["Username",e(Z,{})]}),e(I,{placeholder:"@paveldurov",autoComplete:"off",error:!0}),e(J,{children:"Choose another username."})]}),s[3]=a):a=s[3],s[4]===Symbol.for("react.memo_cache_sentinel")?(o=e("div",{className:"min-w-320",children:t(ee,{children:[r,i,t(H,{children:[n,a,t(Y,{children:[t(K,{children:["Message",t(L,{children:[e(B,{children:e(b,{})}),e(U,{children:"Additional information"})]})]}),e(F,{placeholder:"Your message..."}),e(G,{children:"Enter your message."})]})]})]})}),s[4]=o):o=s[4],o},meta:et},{name:"Switches",story:()=>{let r,i,n,a,o,s=(0,l.c)(5);return s[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(Q,{children:"Notification Settings"}),i=e(G,{children:"Manage your notification preferences."}),s[0]=r,s[1]=i):(r=s[0],i=s[1]),s[2]===Symbol.for("react.memo_cache_sentinel")?(n=e(Y,{orientation:"horizontal",children:t(j,{defaultChecked:!0,children:[e(A,{}),e(P,{children:"Email notifications"}),e(z,{children:"Receive email alerts for important updates."})]})}),s[2]=n):n=s[2],s[3]===Symbol.for("react.memo_cache_sentinel")?(a=e(Y,{orientation:"horizontal",children:t(j,{children:[e(A,{}),e(P,{children:"Push notifications"}),e(z,{children:"Get push notifications on your device."})]})}),s[3]=a):a=s[3],s[4]===Symbol.for("react.memo_cache_sentinel")?(o=e("div",{className:"min-w-320",children:t(ee,{children:[r,i,t(H,{children:[n,a,e(Y,{orientation:"horizontal",children:t(j,{defaultChecked:!0,children:[e(A,{}),e(P,{children:"SMS notifications"}),e(z,{children:"Receive text messages for critical alerts."})]})})]})]})}),s[4]=o):o=s[4],o},meta:et},{name:"Radios",story:()=>{let r,i,n,a,o,s,c=(0,l.c)(6);return c[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(Q,{children:"Delivery Method"}),i=e(G,{children:"Choose how you want to receive your order."}),c[0]=r,c[1]=i):(r=c[0],i=c[1]),c[2]===Symbol.for("react.memo_cache_sentinel")?(n=t(E,{value:"standard",children:[e(R,{}),e(O,{children:"Standard Shipping (5-7 days)"})]}),c[2]=n):n=c[2],c[3]===Symbol.for("react.memo_cache_sentinel")?(a=t(E,{value:"express",children:[e(R,{}),e(O,{children:"Express Shipping (2-3 days)"})]}),c[3]=a):a=c[3],c[4]===Symbol.for("react.memo_cache_sentinel")?(o=t(E,{value:"overnight",children:[e(R,{}),e(O,{children:"Overnight Shipping (1 day)"})]}),c[4]=o):o=c[4],c[5]===Symbol.for("react.memo_cache_sentinel")?(s=e("div",{className:"min-w-320",children:t(ee,{children:[r,i,t(Y,{children:[t(x,{defaultValue:"standard",children:[n,a,o,t(E,{value:"pickup",children:[e(R,{}),e(O,{children:"In-store Pickup"})]})]}),e(G,{children:"Shipping costs will be calculated at checkout."})]})]})}),c[5]=s):s=c[5],s},meta:et},{name:"Checkboxes",story:()=>{let r,i,n,a,o,s=(0,l.c)(5);return s[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(Q,{children:"Terms and Preferences"}),i=e(G,{children:"Select which terms you agree to."}),s[0]=r,s[1]=i):(r=s[0],i=s[1]),s[2]===Symbol.for("react.memo_cache_sentinel")?(n=e(Y,{orientation:"horizontal",children:t(w,{defaultChecked:!0,children:[e(v,{}),e(C,{children:"I accept the terms and conditions"}),e(_,{children:"You must agree to our terms to continue."})]})}),s[2]=n):n=s[2],s[3]===Symbol.for("react.memo_cache_sentinel")?(a=e(Y,{orientation:"horizontal",children:t(w,{children:[e(v,{}),e(C,{children:"Subscribe to newsletter"}),e(_,{children:"Get weekly updates and exclusive offers."})]})}),s[3]=a):a=s[3],s[4]===Symbol.for("react.memo_cache_sentinel")?(o=e("div",{className:"min-w-320",children:t(ee,{children:[r,i,t(H,{children:[n,a,e(Y,{orientation:"horizontal",children:t(w,{defaultChecked:!0,children:[e(v,{}),e(C,{children:"Share usage data"}),e(_,{children:"Help us improve our services."})]})})]})]})}),s[4]=o):o=s[4],o},meta:et},{name:"NumberInputs",story:()=>{let r,i,n,a,o,s,c,h=(0,l.c)(7);return h[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(Q,{children:"Product Details"}),i=e(G,{children:"Configure your product quantity and pricing."}),h[0]=r,h[1]=i):(r=h[0],i=h[1]),h[2]===Symbol.for("react.memo_cache_sentinel")?(n=t(Y,{children:[e(K,{children:"Quantity"}),e(D,{defaultValue:"1",min:1,max:100}),e(G,{children:"Choose between 1 and 100 items."})]}),h[2]=n):n=h[2],h[3]===Symbol.for("react.memo_cache_sentinel")?(a=e(K,{children:"Price per unit"}),h[3]=a):a=h[3],h[4]===Symbol.for("react.memo_cache_sentinel")?(o=t(Y,{children:[a,e(D,{defaultValue:"99.99",step:.01,formatOptions:{style:"currency",currency:"USD"}}),e(G,{children:"Set the price for each unit."})]}),h[4]=o):o=h[4],h[5]===Symbol.for("react.memo_cache_sentinel")?(s=e(K,{children:"Discount percentage"}),h[5]=s):s=h[5],h[6]===Symbol.for("react.memo_cache_sentinel")?(c=e("div",{className:"min-w-320",children:t(ee,{children:[r,i,t(H,{children:[n,o,t(Y,{children:[s,e(D,{defaultValue:"10",min:0,max:100,formatOptions:{style:"percent"}}),e(G,{children:"Apply a discount from 0% to 100%."})]})]})]})}),h[6]=c):c=h[6],c},meta:et},{name:"Selects",story:()=>{let r,i=(0,l.c)(1);if(i[0]===Symbol.for("react.memo_cache_sentinel")){let n=g({items:[{value:"us",label:"United States"},{value:"uk",label:"United Kingdom"},{value:"ca",label:"Canada"},{value:"au",label:"Australia"},{value:"fr",label:"France"},{value:"de",label:"Germany"},{value:"jp",label:"Japan"}]}),l=g({items:[{value:"en",label:"English"},{value:"es",label:"Spanish"},{value:"fr",label:"French"},{value:"de",label:"German"},{value:"it",label:"Italian"},{value:"pt",label:"Portuguese"},{value:"ru",label:"Russian"},{value:"zh",label:"Chinese"},{value:"ja",label:"Japanese"}]}),a=g({items:[{value:"utc-8",label:"Pacific Time (UTC-8)"},{value:"utc-5",label:"Eastern Time (UTC-5)"},{value:"utc",label:"UTC"},{value:"utc+1",label:"Central European Time (UTC+1)"},{value:"utc+8",label:"China Standard Time (UTC+8)"},{value:"utc+9",label:"Japan Standard Time (UTC+9)"}]});r=e("div",{className:"min-w-320",children:t(ee,{children:[e(Q,{children:"Regional Settings"}),e(G,{children:"Configure your location and language preferences."}),t(H,{children:[t(Y,{children:[e(K,{children:"Country"}),t(N,{collection:n,children:[e($,{placeholder:"Select a country"}),e(V,{children:e(M,{children:n.items.map(en)})})]}),e(G,{children:"Your country determines available features."})]}),t(Y,{children:[e(K,{children:"Language"}),t(N,{collection:l,children:[e($,{placeholder:"Select a language"}),e(V,{children:e(M,{children:l.items.map(el)})})]}),e(G,{children:"Choose your preferred language."})]}),t(Y,{children:[e(K,{children:"Timezone"}),t(N,{collection:a,children:[e($,{placeholder:"Select a timezone"}),e(V,{children:e(M,{children:a.items.map(ea)})})]}),e(G,{children:"All times will be displayed in this timezone."})]})]})]})}),i[0]=r}else r=i[0];return r},meta:et}];function ec({entry:e}){let{story:t,meta:r}=e,i={...r.args,...t.args},n="function"==typeof t||t.$$typeof?t:t.render||r.render||r.component,l=()=>eo.default.createElement(n,i),a={args:i,globals:{theme:"light"},parameters:{...r.parameters,...t.parameters},viewMode:"story"};for(let e of[...r.decorators||[],...t.decorators||[]].reverse()){let t=l;l=()=>e(t,a)}return eo.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},eo.default.createElement("h2",{className:"text-sm mb-12"},e.name),eo.default.createElement(l))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(eo.default.createElement(window.WallarmDS.Root,null,es.map((e,t)=>eo.default.createElement(ec,{key:t,entry:e})))),t}}})();

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

@@ -0,0 +1,544 @@
+Attaches files to a form and checks their type, size and count before accepting them — the drop Area when attaching is the main task on the screen, the "Select file" button when space is tight. Picking never uploads: files travel with the form when it is saved, and the product marks a row `loading` while it sends one. To pick a photo by clicking an avatar, see Data Display/Avatar → Click To Upload.
+
+## 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 |
+| --- | --- | --- | --- | --- |
+| `value` | `File[] \| undefined` | no | — | Controlled accepted files. |
+| `default-value` | `File[] \| undefined` | no | — | Uncontrolled initial files. |
+| `on-value-change` | `((files: File[]) => void) \| undefined` | no | — | Every change to the accepted list — pick, drop, replace, delete (then `[]`). |
+| `on-file-reject` | `complex` | no | — | Files that failed validation (for consumers that also want a toast). |
+| `accept` | `string \| string[] \| undefined` | no | — | Extensions and/or MIME types: `'.so,.dylib'`, `'image/png'`, `['.lua']`. |
+| `max-files` | `number \| undefined` | no | `1` | Default `1`: a new pick replaces the file, and the picker stays visible, with the chosen file shown below it. |
+| `max-file-size` | `number \| undefined` | no | — | Bytes. Checked on pick, drop and replace. |
+| `min-file-size` | `number \| undefined` | no | — | Bytes. |
+| `validate` | `((file: File) => string[] \| null) \| undefined` | no | — | Custom rules; returned strings are shown verbatim as rejection messages. |
+| `name` | `string \| undefined` | no | — | Hidden input name — the files submit with a native form under it. |
+| `required` | `boolean \| undefined` | no | — |  |
+| `disabled` | `boolean \| undefined` | no | — |  |
+| `read-only` | `boolean \| undefined` | no | — | Hides the picker, Delete and Replace; `FileUploadItemAction` (e.g. Download) stays. |
+| `error` | `boolean \| undefined` | no | `false` | Error state (maps to Ark `invalid`); also read from a wrapping `Field`. |
+| `allow-drop` | `boolean \| undefined` | no | `true` | Default `true`. |
+| `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 | — |  |
+| `on-change` | `ChangeEventHandler<T, Element> \| undefined` | no | — |  |
+| `data-testid` | `string \| undefined` | no | — |  |
+
+## Sub-components
+
+- `WallarmDS.FileUploadDropzone` — `FileUploadDropzoneProps` in the declaration bundle.
+- `WallarmDS.FileUploadError` — `FileUploadErrorProps` in the declaration bundle.
+- `WallarmDS.FileUploadItem` — `FileUploadItemProps` in the declaration bundle.
+- `WallarmDS.FileUploadItemAction` — `FileUploadItemActionProps` in the declaration bundle.
+- `WallarmDS.FileUploadItemDeleteTrigger` — `FileUploadItemDeleteTriggerProps` in the declaration bundle.
+- `WallarmDS.FileUploadItemGroup` — `FileUploadItemGroupProps` in the declaration bundle.
+- `WallarmDS.FileUploadItemReplaceTrigger` — `FileUploadItemReplaceTriggerProps` in the declaration bundle.
+- `WallarmDS.FileUploadTrigger` — `FileUploadTriggerProps` in the declaration bundle.
+
+## Stories
+
+### Basic
+
+The drop Area: click anywhere on it or drop files onto it, and from the keyboard Tab reaches it and Enter opens the file dialog.
+
+Source: FileUpload/FileUpload.stories.tsx#Basic
+
+### ButtonTrigger
+
+The same picking and checks behind a "Select file" button that hugs its label, for when a 96px Area would crowd the form.
+
+Source: FileUpload/FileUpload.stories.tsx#ButtonTrigger
+
+### InField
+
+Inside `Field`: the label names the Area, and the description carries the format and the limit.
+
+Source: FileUpload/FileUpload.stories.tsx#InField
+
+### Multiple
+
+With `maxFiles` above one the picker stays and disables once the limit is reached, while each file stacks below it as its own row.
+
+Source: FileUpload/FileUpload.stories.tsx#Multiple
+
+### SingleFileChosen
+
+One file allowed and chosen: the file shows below the picker, and a new pick, or Replace in the row, swaps it.
+
+Source: FileUpload/FileUpload.stories.tsx#SingleFileChosen
+
+### WithDescription
+
+`description` adds a second line to the row for size or status — here, that the file goes with the form.
+
+Source: FileUpload/FileUpload.stories.tsx#WithDescription
+
+### Uploading
+
+A row marked `loading` dims and shows a spinner, and the picker locks until no row is loading; its X becomes "Cancel upload", and stopping the request is up to the product.
+
+Source: FileUpload/FileUpload.stories.tsx#Uploading
+
+### Validation
+
+Only `.so` / `.dylib` up to 32 KB: anything else is refused inline, naming the file and the rule.
+
+Source: FileUpload/FileUpload.stories.tsx#Validation
+
+### Disabled
+
+Disabled: nothing responds, and the Area and the row actions dim.
+
+Source: FileUpload/FileUpload.stories.tsx#Disabled
+
+### ReadOnly
+
+Read-only removes the picker, Replace and Delete, while a custom `FileUploadItemAction` such as Download stays.
+
+Source: FileUpload/FileUpload.stories.tsx#ReadOnly
+
+### StoredFile
+
+A file already on the server is a row too: `FileUploadItem` works outside `FileUpload` from a name and size, and its actions only run your `onClick`.
+
+Source: FileUpload/FileUpload.stories.tsx#StoredFile
+
+### LongFileName
+
+Long names truncate; hover shows the full name.
+
+Source: FileUpload/FileUpload.stories.tsx#LongFileName
+
+### FormSubmission
+
+Nothing uploads on pick: the file travels in the form's `FormData` under `name`, and an empty submit of a required Field shows its error.
+
+Source: FileUpload/FileUpload.stories.tsx#FormSubmission
+
+## Story sources
+
+### FileUpload/FileUpload.stories.tsx
+
+```tsx
+import { type FormEvent, useState } from 'react';
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { Download } from '../../icons';
+import { Button } from '../Button';
+import { Field, FieldDescription, FieldError, FieldIndicator, FieldLabel } from '../Field';
+import { FileUpload, type FileUploadProps } from './FileUpload';
+import { FileUploadDropzone } from './FileUploadDropzone';
+import { FileUploadError } from './FileUploadError';
+import { FileUploadItem } from './FileUploadItem';
+import { FileUploadItemAction } from './FileUploadItemAction';
+import { FileUploadItemDeleteTrigger } from './FileUploadItemDeleteTrigger';
+import { FileUploadItemGroup } from './FileUploadItemGroup';
+import { FileUploadItemReplaceTrigger } from './FileUploadItemReplaceTrigger';
+import { FileUploadTrigger } from './FileUploadTrigger';
+import { formatFileSize } from './lib';
+
+const DESCRIPTION = [
+  'Attaches files to a form and checks their type, size and count before accepting them — the drop Area when attaching is the main task on the screen, the "Select file" button when space is tight.',
+  'Picking never uploads: files travel with the form when it is saved, and the product marks a row `loading` while it sends one. To pick a photo by clicking an avatar, see Data Display/Avatar → Click To Upload.',
+].join(' ');
+
+const MB = 1024 ** 2;
+const sample = (name: string, size = 48 * 1024) => new File([new Uint8Array(size)], name);
+
+const Rows = () => (
+  <FileUploadItemGroup>
+    {file => (
+      <FileUploadItem file={file}>
+        <FileUploadItemReplaceTrigger />
+        <FileUploadItemDeleteTrigger />
+      </FileUploadItem>
+    )}
+  </FileUploadItemGroup>
+);
+
+const meta = {
+  title: 'Inputs/FileUpload',
+  component: FileUpload,
+  parameters: {
+    layout: 'centered',
+    docs: { description: { component: DESCRIPTION } },
+  },
+  args: { maxFiles: 1, disabled: false, readOnly: false, error: false },
+  argTypes: {
+    value: { control: false },
+    defaultValue: { control: false },
+    onValueChange: { control: false },
+    onFileReject: { control: false },
+    validate: { control: false },
+    ref: { control: false },
+    maxFiles: { control: 'number' },
+    maxFileSize: { control: 'number' },
+    accept: { control: 'text' },
+  },
+  decorators: [
+    Story => (
+      <div style={{ width: 360 }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof FileUpload>;
+
+export default meta;
+
+/** The drop Area: click anywhere on it or drop files onto it, and from the keyboard Tab reaches it and Enter opens the file dialog. */
+export const Basic: StoryFn<FileUploadProps> = args => (
+  <FileUpload data-testid='file-upload' {...args}>
+    <FileUploadDropzone data-analytics-id='FILE_UPLOAD_DROPZONE' />
+    <FileUploadError />
+    <Rows />
+  </FileUpload>
+);
+
+/** The same picking and checks behind a "Select file" button that hugs its label, for when a 96px Area would crowd the form. */
+export const ButtonTrigger: StoryFn<FileUploadProps> = args => (
+  <FileUpload data-testid='file-upload' {...args}>
+    <FileUploadTrigger />
+    <FileUploadError />
+    <Rows />
+  </FileUpload>
+);
+
+/** Inside `Field`: the label names the Area, and the description carries the format and the limit. */
+export const InField: StoryFn<FileUploadProps> = args => (
+  <Field required data-testid='field'>
+    <FieldLabel>
+      WASM module
+      <FieldIndicator />
+    </FieldLabel>
+    <FieldDescription>
+      Exports memory, spe_alloc, spe_free, spe_init, spe_on_phase · up to 32 MB
+    </FieldDescription>
+    <FileUpload data-testid='file-upload' accept='.wasm' maxFileSize={32 * MB} {...args}>
+      <FileUploadDropzone>Choose a .wasm module or drop it here</FileUploadDropzone>
+      <FileUploadError />
+      <Rows />
+    </FileUpload>
+  </Field>
+);
+
+/** With `maxFiles` above one the picker stays and disables once the limit is reached, while each file stacks below it as its own row. */
+export const Multiple: StoryFn<FileUploadProps> = args => (
+  <FileUpload
+    data-testid='file-upload'
+    {...args}
+    maxFiles={5}
+    defaultValue={[sample('rules.lua'), sample('headers.lua')]}
+  >
+    <FileUploadDropzone />
+    <FileUploadError />
+    <Rows />
+  </FileUpload>
+);
+
+/** One file allowed and chosen: the file shows below the picker, and a new pick, or Replace in the row, swaps it. */
+export const SingleFileChosen: StoryFn<FileUploadProps> = args => (
+  <FileUpload data-testid='file-upload' {...args} defaultValue={[sample('policy.wasm')]}>
+    <FileUploadDropzone />
+    <FileUploadError />
+    <Rows />
+  </FileUpload>
+);
+
+/** `description` adds a second line to the row for size or status — here, that the file goes with the form. */
+export const WithDescription: StoryFn<FileUploadProps> = args => (
+  <FileUpload data-testid='file-upload' {...args} defaultValue={[sample('policy.wasm')]}>
+    <FileUploadDropzone />
+    <FileUploadItemGroup>
+      {file => (
+        <FileUploadItem
+          file={file}
+          description={`${formatFileSize(file.size)} · uploads when you save`}
+        >
+          <FileUploadItemReplaceTrigger />
+          <FileUploadItemDeleteTrigger />
+        </FileUploadItem>
+      )}
+    </FileUploadItemGroup>
+  </FileUpload>
+);
+
+/** A row marked `loading` dims and shows a spinner, and the picker locks until no row is loading; its X becomes "Cancel upload", and stopping the request is up to the product. */
+export const Uploading: StoryFn<FileUploadProps> = args => (
+  <FileUpload data-testid='file-upload' {...args} maxFiles={5} defaultValue={[sample('rules.lua')]}>
+    <FileUploadDropzone />
+    <FileUploadItemGroup>
+      {file => (
+        <FileUploadItem file={file}>
+          <FileUploadItemReplaceTrigger />
+          <FileUploadItemDeleteTrigger />
+        </FileUploadItem>
+      )}
+    </FileUploadItemGroup>
+    <FileUploadItemGroup>
+      <FileUploadItem file={{ name: 'headers.lua' }} loading>
+        <FileUploadItemDeleteTrigger />
+      </FileUploadItem>
+    </FileUploadItemGroup>
+  </FileUpload>
+);
+
+/** Only `.so` / `.dylib` up to 32 KB: anything else is refused inline, naming the file and the rule. */
+export const Validation: StoryFn<FileUploadProps> = args => (
+  <FileUpload data-testid='file-upload' {...args} accept='.so,.dylib' maxFileSize={32 * 1024}>
+    <FileUploadDropzone />
+    <FileUploadError />
+    <Rows />
+  </FileUpload>
+);
+
+/** Disabled: nothing responds, and the Area and the row actions dim. */
+export const Disabled: StoryFn<FileUploadProps> = args => (
+  <div className='flex flex-col gap-16'>
+    <FileUpload data-testid='file-upload' {...args} disabled>
+      <FileUploadDropzone />
+    </FileUpload>
+    <FileUpload {...args} disabled defaultValue={[sample('policy.wasm')]}>
+      <Rows />
+    </FileUpload>
+  </div>
+);
+
+/** Read-only removes the picker, Replace and Delete, while a custom `FileUploadItemAction` such as Download stays. */
+export const ReadOnly: StoryFn<FileUploadProps> = args => (
+  <FileUpload data-testid='file-upload' {...args} readOnly defaultValue={[sample('policy.wasm')]}>
+    <FileUploadDropzone />
+    <FileUploadItemGroup>
+      {file => (
+        <FileUploadItem file={file}>
+          <FileUploadItemReplaceTrigger />
+          <FileUploadItemAction aria-label={`Download ${file.name}`}>
+            <Download />
+          </FileUploadItemAction>
+          <FileUploadItemDeleteTrigger />
+        </FileUploadItem>
+      )}
+    </FileUploadItemGroup>
+  </FileUpload>
+);
+
+/** A file already on the server is a row too: `FileUploadItem` works outside `FileUpload` from a name and size, and its actions only run your `onClick`. */
+export const StoredFile: StoryFn<FileUploadProps> = () => (
+  <FileUploadItemGroup data-testid='stored'>
+    <FileUploadItem file={{ name: 'policy.wasm', size: 48 * 1024 }} description='48 KB · attached'>
+      <FileUploadItemAction aria-label='Download policy.wasm'>
+        <Download />
+      </FileUploadItemAction>
+      <FileUploadItemDeleteTrigger aria-label='Detach artifact' />
+    </FileUploadItem>
+  </FileUploadItemGroup>
+);
+
+/** Long names truncate; hover shows the full name. */
+export const LongFileName: StoryFn<FileUploadProps> = args => (
+  <FileUpload
+    data-testid='file-upload'
+    {...args}
+    defaultValue={[
+      sample('flow-policy-artifact-for-the-production-edge-cluster-eu-central-1.wasm'),
+    ]}
+  >
+    <Rows />
+  </FileUpload>
+);
+
+/** Nothing uploads on pick: the file travels in the form's `FormData` under `name`, and an empty submit of a required Field shows its error. */
+export const FormSubmission: StoryFn<FileUploadProps> = args => {
+  const [submitted, setSubmitted] = useState<string>('');
+  const onSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const file = new FormData(event.currentTarget).get('artifact');
+    setSubmitted(
+      file instanceof File && file.name ? `${file.name} (${formatFileSize(file.size)})` : 'nothing',
+    );
+  };
+  return (
+    <form onSubmit={onSubmit} noValidate className='flex flex-col gap-12'>
+      <Field required invalid={submitted === 'nothing'}>
+        <FieldLabel>
+          Artifact
+          <FieldIndicator />
+        </FieldLabel>
+        <FileUpload
+          data-testid='file-upload'
+          name='artifact'
+          {...args}
+          onValueChange={() => setSubmitted('')}
+        >
+          <FileUploadTrigger />
+          <Rows />
+        </FileUpload>
+        {submitted === 'nothing' ? <FieldError>Attach a file</FieldError> : null}
+      </Field>
+      <Button type='submit' variant='outline' color='neutral' data-testid='submit'>
+        Save
+      </Button>
+      {submitted && submitted !== 'nothing' ? (
+        <p className='sb-annotation' data-testid='submitted'>
+          Submitted: {submitted}
+        </p>
+      ) : null}
+    </form>
+  );
+};
+```
+
+### FileUpload/lib/index.ts
+
+```tsx
+export { toAcceptList, toAcceptString } from './accept';
+export { checkFile, type FileCheckRules } from './checkFile';
+export { formatFileSize } from './formatFileSize';
+export { formatRejection } from './formatRejection';
+export { isSameFile, setInputFiles } from './setInputFiles';
+```
+
+### FileUpload/lib/accept.ts
+
+```tsx
+/** `'.so, .dylib'` / `['.lua', 'image/png,image/jpeg']` → `['.so', '.dylib']` / `['.lua', 'image/png', 'image/jpeg']`. */
+export const toAcceptList = (accept?: string | string[]): string[] => {
+  if (accept === undefined) return [];
+  const parts = Array.isArray(accept) ? accept : [accept];
+  return parts
+    .flatMap(part => part.split(','))
+    .map(part => part.trim())
+    .filter(Boolean);
+};
+
+/** The native / Ark `accept` string, or `undefined` when nothing is restricted. */
+export const toAcceptString = (accept?: string | string[]): string | undefined => {
+  const list = toAcceptList(accept);
+  return list.length ? list.join(',') : undefined;
+};
+```
+
+### FileUpload/lib/checkFile.ts
+
+```tsx
+import { isValidFileType } from '@zag-js/file-utils';
+import type { FileUploadErrorCode } from '../types';
+
+export interface FileCheckRules {
+  acceptList: string[];
+  maxFileSize?: number;
+  minFileSize?: number;
+  validate?: (file: File) => string[] | null;
+}
+
+/**
+ * The same rules Ark applies on pick/drop (type → size → custom), for the one path Ark
+ * cannot validate without side effects: replacing a single file in multiple-file mode
+ * (`api.setFiles` re-validates the whole list and would drop the original on failure).
+ */
+export const checkFile = (file: File, rules: FileCheckRules): FileUploadErrorCode[] => {
+  const errors: FileUploadErrorCode[] = [];
+  // zag's own type check: an empty `file.type` falls back to the MIME type guessed from the
+  // extension, and `application/x-moz-file` passes — so Replace agrees with pick and drop.
+  const [typeOk] = isValidFileType(
+    file,
+    rules.acceptList.length ? rules.acceptList.join(',') : undefined,
+  );
+  if (!typeOk) errors.push('FILE_INVALID_TYPE');
+  if (rules.maxFileSize !== undefined && file.size > rules.maxFileSize)
+    errors.push('FILE_TOO_LARGE');
+  if (rules.minFileSize !== undefined && file.size < rules.minFileSize)
+    errors.push('FILE_TOO_SMALL');
+  const custom = rules.validate?.(file);
+  if (custom) errors.push(...custom);
+  return errors;
+};
+```
+
+### FileUpload/lib/formatFileSize.ts
+
+```tsx
+const UNITS = ['B', 'KB', 'MB', 'GB', 'TB'] as const;
+
+/** Binary units, at most one decimal, trailing `.0` dropped: `32 MB`, `40.5 MB`, `512 B`. */
+export const formatFileSize = (bytes: number): string => {
+  let value = bytes;
+  let unit = 0;
+  while (value >= 1024 && unit < UNITS.length - 1) {
+    value /= 1024;
+    unit += 1;
+  }
+  let rounded = unit === 0 ? value : Math.round(value * 10) / 10;
+  // 1023.96 KB rounds to 1024 KB — promote to the next unit instead.
+  if (rounded >= 1024 && unit < UNITS.length - 1) {
+    rounded = Math.round((rounded / 1024) * 10) / 10;
+    unit += 1;
+  }
+  return `${rounded} ${UNITS[unit]}`;
+};
+```
+
+### FileUpload/lib/formatRejection.ts
+
+```tsx
+import type { FileUploadErrorCode, FileUploadLimits } from '../types';
+import { formatFileSize } from './formatFileSize';
+
+const describe = (
+  code: FileUploadErrorCode,
+  limits: FileUploadLimits,
+  fileSize?: number,
+): string => {
+  switch (code) {
+    case 'FILE_INVALID_TYPE':
+      return `Not a ${limits.acceptList.join(' / ')} file`;
+    case 'FILE_TOO_LARGE':
+      return `Too large: ${formatFileSize(fileSize ?? 0)}; the limit is ${formatFileSize(limits.maxFileSize ?? 0)}`;
+    case 'FILE_TOO_SMALL':
+      return `Too small: ${formatFileSize(fileSize ?? 0)}; the minimum is ${formatFileSize(limits.minFileSize ?? 0)}`;
+    case 'TOO_MANY_FILES':
+      return `Too many files; the limit is ${limits.maxFiles}`;
+    case 'FILE_EXISTS':
+      return 'Already added';
+    default:
+      return code;
+  }
+};
+
+/** Default message for one (file, error) pair: `{name} — {message}`. */
+export const formatRejection = (
+  fileName: string,
+  code: FileUploadErrorCode,
+  limits: FileUploadLimits,
+  fileSize?: number,
+): string => `${fileName} — ${describe(code, limits, fileSize)}`;
+```
+
+### FileUpload/lib/setInputFiles.ts
+
+```tsx
+/**
+ * Writes `files` into a file input the way zag does (`DataTransfer` → `input.files`), so the
+ * files go with native form submission. A no-op where `DataTransfer` is missing.
+ */
+export const setInputFiles = (input: HTMLInputElement, files: File[]): void => {
+  const win = input.ownerDocument.defaultView;
+  if (!win || !('DataTransfer' in win)) return;
+  try {
+    const transfer = new win.DataTransfer();
+    for (const file of files) transfer.items.add(file);
+    input.files = transfer.files;
+  } catch {
+    // Old browsers refuse to construct DataTransfer; the input just keeps what it had.
+  }
+};
+
+/** zag's `isFileEqual`: name, size and type — not `lastModified` or content. */
+export const isSameFile = (a: File, b: File): boolean =>
+  a.name === b.name && a.size === b.size && a.type === b.type;
+```

package/dist/project/components/FileUpload/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>