admin-ui-starter-kit 0.6.9 → 0.7.1

package/dist/showcase/assets/forms-Ck6hPzLP.js

@@ -0,0 +1,915 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{t as n}from"./react-sKtkuLrH.js";import{n as r,p as i,t as a,x as o}from"./section-C_rLy6Zn.js";import{t as s}from"./box-BoFEAPr6.js";import{t as c}from"./camera-DxWfctRe.js";import{r as l,t as u}from"./example-BsDQngs7.js";import{t as d}from"./circle-OmLq29jq.js";import{t as f}from"./clock-CZYS08d1.js";import{t as p}from"./dropzone-CJHqIcHB.js";import{t as m}from"./password-input-C5MrNrHm.js";import{t as h}from"./globe-RF5bwiar.js";import{t as g}from"./grip-vertical-qqe2NqfZ.js";import{t as _}from"./lock-BwI_fNQW.js";import{t as v}from"./mail-BlH-8y33.js";import{t as y}from"./plus-Dp_nZNjk.js";import{t as b}from"./shield-Cebk5nXH.js";import{t as x}from"./star-BzQGhFDT.js";import{t as S}from"./trash-2-C-6T17-B.js";import{t as C}from"./x-C5_SzMQM.js";import{t as w}from"./zap-DdInHaAD.js";import{N as T,a as E,d as D,n as O}from"./index-B4sKWDcN.js";import{a as k,i as A,n as j,o as M,r as N,t as P}from"./select-BRC14Sd3.js";import{t as F}from"./props-table-aynAz90t.js";import{t as I}from"./label-BZzl85ev.js";import{t as L}from"./text-link-BFYPeXTq.js";import{i as R,n as z,r as B,t as ee}from"./alert--MONSwFW.js";import{t as te}from"./smart-card-CwDYx0xj.js";import{a as V,i as ne,n as re,r as ie}from"./index.esm-BXmcbSs7.js";import{t as ae}from"./checkbox-BBxn_hxI.js";import{c as oe,f as se,u as ce}from"./form-sizing-Bv0A0Oi0.js";import{t as H}from"./input-CLQIEOQ4.js";import{t as U}from"./textarea-DcCHHuP-.js";import{t as le}from"./select-J0hPSc5B.js";import{n as ue,r as W,t as de}from"./tags-input-BOemEMZS.js";import{t as G}from"./switch-BOlIXIn9.js";import{t as fe}from"./switch-card-CCJ-MaRI.js";import{t as pe}from"./slider-DMLIlQeO.js";import{i as me,r as he,t as ge}from"./card-radio-group-EjPkSg-w.js";import{t as _e}from"./card-checkbox-group-DtK7aVPU.js";import{n as ve,r as ye,t as be}from"./RadioGroup-Qaf-akL1.js";import{t as xe}from"./weight-input-_wl5mPGA.js";import{i as Se,t as Ce}from"./popover-BP4R2w67.js";import{t as we}from"./popover-DfGXC2pN.js";import{n as Te,t as Ee}from"./date-picker-CskCoiwf.js";import{a as De,c as Oe,d as ke,f as Ae,i as je,l as Me,n as Ne,p as Pe,r as Fe,s as Ie,t as Le}from"./sortable.esm-BSC2lHxr.js";import{n as K,t as Re}from"./form-field-D5kwgD4P.js";var q=t(n(),1),J=D();function ze(e,{separator:t=`-`,lowercase:n=!0,trim:r=!0}={}){let i=t||`-`,a=i.replace(/[.*+?^${}()|[\]\\]/g,`\\$&`),o=String(e??``).normalize(`NFKD`).replace(/[\u0300-\u036f]/g,``).replace(/&/g,` and `).replace(/['’]/g,``);return n&&(o=o.toLowerCase()),o=o.replace(/[^\p{Letter}\p{Number}]+/gu,i).replace(RegExp(`${a}{2,}`,`g`),i),r&&(o=o.replace(RegExp(`^${a}|${a}$`,`g`),``)),o}var Be=q.forwardRef(function({value:e,slugify:t,separator:n=`-`,lowercase:r=!0,trim:i=!0,wrapperClassName:a,className:o,...s},c){let l=q.useMemo(()=>t?.(e)??ze(e,{separator:n,lowercase:r,trim:i}),[r,n,t,i,e]);return(0,J.jsx)(`div`,{className:O(`slug-field--component`,a),children:(0,J.jsx)(H,{ref:c,...s,type:`text`,value:l,readOnly:!0,className:o})})});Be.displayName=`SlugField`;var Ve={prefixPlaceholder:`Prefix`},He={US:{value:`+1`,label:`United States`,iso:`US`},CA:{value:`+1`,label:`Canada`,iso:`CA`},AU:{value:`+61`,label:`Australia`,iso:`AU`},BG:{value:`+359`,label:`Bulgaria`,iso:`BG`},GR:{value:`+30`,label:`Greece`,iso:`GR`},GB:{value:`+44`,label:`United Kingdom`,iso:`GB`},DE:{value:`+49`,label:`Germany`,iso:`DE`},FR:{value:`+33`,label:`France`,iso:`FR`},IT:{value:`+39`,label:`Italy`,iso:`IT`},ES:{value:`+34`,label:`Spain`,iso:`ES`},NL:{value:`+31`,label:`Netherlands`,iso:`NL`},BE:{value:`+32`,label:`Belgium`,iso:`BE`},AT:{value:`+43`,label:`Austria`,iso:`AT`},CH:{value:`+41`,label:`Switzerland`,iso:`CH`},PL:{value:`+48`,label:`Poland`,iso:`PL`},RO:{value:`+40`,label:`Romania`,iso:`RO`},RS:{value:`+381`,label:`Serbia`,iso:`RS`},HR:{value:`+385`,label:`Croatia`,iso:`HR`},SI:{value:`+386`,label:`Slovenia`,iso:`SI`},MK:{value:`+389`,label:`North Macedonia`,iso:`MK`},TR:{value:`+90`,label:`Turkey`,iso:`TR`},RU:{value:`+7`,label:`Russia`,iso:`RU`},UA:{value:`+380`,label:`Ukraine`,iso:`UA`},SK:{value:`+421`,label:`Slovakia`,iso:`SK`},CZ:{value:`+420`,label:`Czech Republic`,iso:`CZ`},HU:{value:`+36`,label:`Hungary`,iso:`HU`},PT:{value:`+351`,label:`Portugal`,iso:`PT`},IE:{value:`+353`,label:`Ireland`,iso:`IE`},SE:{value:`+46`,label:`Sweden`,iso:`SE`},NO:{value:`+47`,label:`Norway`,iso:`NO`},DK:{value:`+45`,label:`Denmark`,iso:`DK`},FI:{value:`+358`,label:`Finland`,iso:`FI`},CY:{value:`+357`,label:`Cyprus`,iso:`CY`},AL:{value:`+355`,label:`Albania`,iso:`AL`},ME:{value:`+382`,label:`Montenegro`,iso:`ME`},BA:{value:`+387`,label:`Bosnia and Herzegovina`,iso:`BA`},XK:{value:`+383`,label:`Kosovo`,iso:`XK`},MD:{value:`+373`,label:`Moldova`,iso:`MD`},BY:{value:`+375`,label:`Belarus`,iso:`BY`},LT:{value:`+370`,label:`Lithuania`,iso:`LT`},LV:{value:`+371`,label:`Latvia`,iso:`LV`},EE:{value:`+372`,label:`Estonia`,iso:`EE`}},Ue=[`US`,`CA`,`GB`,`DE`,`FR`,`IT`,`ES`,`AU`],We=e=>typeof e==`string`?He[e.toUpperCase()]??null:e,Ge=e=>e.map(We).filter(e=>e!==null),Ke=(e,t)=>{let n=e.trim().replace(/\s+/g,` `).replace(/[^\d ()+-]/g,``);return t&&n.startsWith(t)&&(n=n.slice(t.length).replace(/^[\s-]+/,``)),t&&n.startsWith(`0`)&&(n=n.slice(1)),n},qe=(e,t)=>e?e.startsWith(`+`)?e:He[e.toUpperCase()]?.value??e:t[0]?.value??``;function Je({normalizeOnBlur:e=!0,onBlur:t,onChange:n,prefix:r,defaultPrefix:a,prefixes:s=Ue,onPrefixChange:c,disablePrefixSelector:l=!1,prefixPlaceholder:u,prefixWidth:d=`w-30`,showCountryName:f=!0,showPrefixInDropdown:p=!0,invalid:m,disabled:h,className:g,size:_,strings:v,...y},b){let{defaultControlSize:x}=o(),S=se(_,x),C=T(Ve,v),w=(0,q.useMemo)(()=>Ge(s),[s]),[E,D]=(0,q.useState)((0,q.useMemo)(()=>qe(a,w),[a,w])),F=r!==void 0,I=F?qe(r,w):E,L=(0,q.useMemo)(()=>w.find(e=>e.value===I),[w,I]),R=(0,q.useCallback)(e=>{e!==null&&(F||D(e),c?.(e))},[F,c]),z=(0,q.useCallback)(e=>{if(!n)return;let t=e.target.value;if(I&&t.startsWith(I)){let r=t.slice(I.length).replace(/^[\s-]+/,``),i=r.startsWith(`0`)?r.slice(1):r;if(i!==t){n({...e,target:{...e.target,value:i},currentTarget:{...e.currentTarget,value:i}});return}}n(e)},[n,I]),B=(0,q.useCallback)(r=>{if(e&&typeof n==`function`){let e=Ke(r.target.value,I);e!==r.target.value&&n({...r,target:{...r.target,value:e},currentTarget:{...r.currentTarget,value:e}})}t?.(r)},[e,n,t,I]);if(w.length===0||l){let e=I||a;return e?(0,J.jsxs)(`div`,{className:`flex items-start gap-2`,children:[(0,J.jsx)(`div`,{"aria-invalid":m||void 0,className:O(`flex items-center justify-center rounded-md border border-input bg-muted px-3`,ce[S],h&&`opacity-50`,`aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20`),children:(0,J.jsx)(i,{tag:`span`,type:`secondary`,weight:`medium`,children:e})}),(0,J.jsx)(`div`,{className:`flex-1`,children:(0,J.jsx)(H,{ref:b,size:S,type:`tel`,autoComplete:`tel`,inputMode:`tel`,onChange:z,onBlur:B,invalid:m,disabled:h,className:g,...y})})]}):(0,J.jsx)(H,{ref:b,size:S,type:`tel`,autoComplete:`tel`,inputMode:`tel`,onChange:z,onBlur:B,invalid:m,disabled:h,className:O(`phone-input--component`,g),...y})}return(0,J.jsxs)(`div`,{className:`flex items-start gap-2`,children:[(0,J.jsxs)(P,{value:I,onValueChange:e=>R(e),disabled:h,children:[(0,J.jsx)(k,{"aria-invalid":m||void 0,className:O(`border-input bg-transparent shrink-0 !shadow-none`,ce[S],`focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]`,`aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive`,d,h&&`opacity-50 cursor-not-allowed`),children:(0,J.jsx)(M,{placeholder:u??C.prefixPlaceholder,children:!!L&&(0,J.jsx)(i,{tag:`span`,children:L.value})})}),(0,J.jsx)(j,{children:(0,J.jsx)(N,{children:w.map(e=>(0,J.jsx)(A,{value:e.value,children:(0,J.jsxs)(`div`,{className:`flex items-center gap-2`,children:[!!p&&(0,J.jsx)(i,{tag:`span`,weight:`medium`,className:`min-w-13`,children:e.value}),!!f&&(0,J.jsx)(i,{tag:`span`,type:`secondary`,lineHeight:`tight`,children:e.label})]})},e.value))})})]}),(0,J.jsx)(`div`,{className:`flex-1`,children:(0,J.jsx)(H,{ref:b,size:S,type:`tel`,autoComplete:`tel`,inputMode:`tel`,onChange:z,onBlur:B,invalid:m,disabled:h,className:g,...y})})]})}var Ye=(0,q.memo)(q.forwardRef(Je));Ye.displayName=`PhoneInput`;var Xe=(0,q.forwardRef)(function({decimalPlaces:e=2,min:t=0,max:n=100,step:r,...i},a){return(0,J.jsx)(W,{className:`percentage-input--component`,ref:a,decimalPlaces:e,allowNegative:!1,min:t,max:n,step:r,endAddon:`%`,...i})});Xe.displayName=`PercentageInput`;function Ze({name:e,id:t,value:n,defaultValue:r,min:a=0,max:o=100,step:s=1,disabled:c=!1,invalid:l=!1,onChange:u,onValueChange:d,onValueCommitted:f,showValue:p=!1,formatValue:m,unit:h,className:g,orientation:_=`horizontal`},v){let y=(0,q.useId)(),b=t??`slider-${y}`,x=e??b,S=(0,q.useCallback)(e=>{let t=Array.isArray(e)?e[0]:e;d?.(t),u?.({target:{name:x,value:t}})},[x,u,d]),C=(0,q.useCallback)(e=>{let t=Array.isArray(e)?e[0]:e;f?.(t)},[f]),w=(0,q.useMemo)(()=>{if(!p)return null;let e=n??r??a;return m?m(e):h?`${e}${h}`:String(e)},[p,n,r,a,m,h]),T=n===void 0?void 0:[n],E=r===void 0?[a]:[r];return(0,J.jsxs)(`div`,{className:O(`slider--component`,`flex items-center gap-3`,g),children:[(0,J.jsx)(pe,{ref:v,id:b,value:T,defaultValue:E,min:a,max:o,step:s,disabled:c,orientation:_,onValueChange:S,onValueCommitted:C,"aria-invalid":l||void 0,className:O(`min-w-0 flex-1`,l&&`[&_[data-slot=slider-range]]:bg-destructive [&_[data-slot=slider-thumb]]:border-destructive`)}),!!p&&w!==null&&(0,J.jsx)(i,{tag:`span`,type:l?`error`:`secondary`,className:`min-w-8 shrink-0 text-right tabular-nums`,children:w})]})}var Qe=q.forwardRef(Ze);Qe.displayName=`SliderField`;function $e({options:e,value:t,defaultValue:n,onChange:r,name:a,invalid:s,disabled:c,size:l,className:u}){let{defaultControlSize:f}=o(),p=he[se(l,f)];return(0,J.jsx)(be,{value:t,defaultValue:n,onValueChange:e=>e&&r?.(e),name:a,disabled:c,"aria-invalid":s||void 0,className:O(`list-radio-group--component`,`overflow-hidden rounded-md border [&>[role=radio]~[role=radio]]:border-t`,`aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20`,c&&`pointer-events-none opacity-50`,u),children:e.map(e=>(0,J.jsxs)(ye,{value:e.value,disabled:c||e.disabled,className:O(`group flex w-full items-start gap-3 text-start outline-none cursor-pointer`,`transition-colors hover:bg-muted/40 focus-visible:bg-muted/40`,`data-[checked]:bg-primary/10`,`disabled:cursor-not-allowed disabled:opacity-50`,p),children:[(0,J.jsx)(`div`,{className:`mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-primary group-data-[checked]:border-primary group-not-data-[checked]:border-muted-foreground/50`,children:(0,J.jsx)(ve,{render:(0,J.jsx)(d,{className:`h-2.5 w-2.5 fill-primary text-primary`})})}),(0,J.jsxs)(`div`,{className:`flex-1 min-w-0`,children:[(0,J.jsx)(i,{tag:`span`,weight:`medium`,lineHeight:`tight`,className:`block`,children:e.label}),!!e.description&&(0,J.jsx)(i,{tag:`span`,size:`xs`,type:`secondary`,className:`block mt-0.5`,children:e.description})]})]},e.value))})}$e.displayName=`ListRadioGroup`;var et={USD:`$`,EUR:`€`,GBP:`£`,BGN:`лв`,JPY:`¥`,CNY:`¥`,CHF:`CHF`,CAD:`C$`,AUD:`A$`},tt=e=>!e||e.length===0?[]:e.map(e=>typeof e==`string`?{value:e,label:`${et[e]||e} ${e}`}:e);function nt({currency:e,defaultCurrency:t,currencies:n,onCurrencyChange:r,currencyPosition:i=`start`,disableCurrencySelector:a=!1,currencyPlaceholder:s,currencyWidth:c=`w-28`,currencyLabel:l,invalid:u,disabled:d,onConfigError:f,size:p,...m},h){let{defaultControlSize:g}=o(),_=se(p,g),v=(0,q.useMemo)(()=>tt(n),[n]),[y,b]=(0,q.useState)(t??v[0]?.value??``),x=e!==void 0,S=x?e:y;(0,q.useEffect)(()=>{let n={currency:e,defaultCurrency:t,disableCurrencySelector:a};a&&typeof e==`string`&&typeof t==`string`&&e.trim()!==``&&t.trim()!==``&&e!==t&&f?.(`[CurrencyInput] currency/defaultCurrency mismatch while selector is disabled.`,n),a&&(typeof S!=`string`||S.trim().length===0)&&f?.(`[CurrencyInput] disableCurrencySelector is enabled but no currency is provided.`,n)},[e,t,a,f,S]);let C=(0,q.useCallback)(e=>{e!==null&&(x||b(e),r?.(e))},[x,r]),w=(0,q.useMemo)(()=>O(`border-input bg-transparent !shadow-none`,ce[_],`focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]`,`aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive`,c,d&&`opacity-50 cursor-not-allowed`),[_,c,d]),T=(0,J.jsxs)(`div`,{className:`space-y-2`,children:[!!l&&(0,J.jsx)(I,{className:`leading-6`,children:l}),(0,J.jsxs)(P,{value:S,onValueChange:e=>C(e),disabled:d||a,children:[(0,J.jsx)(k,{"aria-invalid":u||void 0,className:w,children:(0,J.jsx)(M,{placeholder:s??``})}),(0,J.jsx)(j,{children:(0,J.jsx)(N,{children:v.map(e=>(0,J.jsx)(A,{value:e.value,children:e.label},e.value))})})]})]});return(0,J.jsxs)(`div`,{className:O(`currency-input--component`,`flex items-start gap-2`),children:[i===`start`&&T,(0,J.jsx)(`div`,{className:`flex-1`,children:(0,J.jsx)(W,{ref:h,size:_,decimalPlaces:2,allowNegative:!1,disabled:d,invalid:u,...m})}),i===`end`&&T]})}var rt=(0,q.memo)((0,q.forwardRef)(nt));rt.displayName=`CurrencyInput`;var it=[`USD`,`EUR`],at=(0,q.forwardRef)(function({currencies:e=it,onCurrencyChange:t,currency:n,defaultCurrency:r,...i},a){return(0,J.jsx)(rt,{className:`money-input--component`,ref:a,currencies:e,currency:n,defaultCurrency:r,onCurrencyChange:(0,q.useCallback)(e=>{t?.(e)},[t]),...i})});at.displayName=`MoneyInput`;var ot=[`floor`,`half_up`,`ceil`];function st({value:e,onChange:t,labels:n,placeholder:r,...i}){return(0,J.jsx)(le,{className:`rounding-mode-select--component`,options:(0,q.useMemo)(()=>ot.map(e=>({value:e,label:n?.[e]??e})),[n]),value:e,onChange:(0,q.useCallback)(e=>{t?.(e)},[t]),placeholder:r,...i})}st.displayName=`RoundingModeSelect`;var ct={placeholder:`Select an item`},lt=`__rich_select_empty__`,ut=(0,q.forwardRef)(({options:e,placeholder:t,strings:n,onChange:r,className:a,disabled:s,defaultOpen:c,open:l,onOpenChange:u,name:d,required:f,value:p,defaultValue:m,allowClear:h=!1,invalid:g,size:_},v)=>{let{defaultControlSize:y}=o(),b=se(_,y),x=T(ct,n),S=t??x.placeholder,C=(0,q.useCallback)(e=>{if(e!==lt)return e===``||e==null?h?lt:void 0:e},[h]),w=(0,q.useCallback)(e=>{if(e!==lt)return e},[]),E=(0,q.useMemo)(()=>{let t=e.map(e=>({...e,value:C(e.value)??``}));return h&&(t.some(e=>e.label===S)||t.unshift({label:S,value:lt})),t},[e,h,S,C]),D=(0,q.useMemo)(()=>C(p??void 0),[p,C]),F=(0,q.useMemo)(()=>C(m??void 0),[m,C]),I=p!==void 0,[L,R]=(0,q.useState)(F),z=I?D:L,B=(0,q.useMemo)(()=>E.find(e=>e.value===z),[z,E]),ee=(0,q.useCallback)(e=>{e!=null&&(I||R(e),r?.(w(e)))},[I,r,w]),te=O(`border-input bg-transparent w-full rounded-radius border outline-none transition-[color,box-shadow] !shadow-none`,ce[b],oe[b],`h-auto py-2`,`focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]`,`aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive aria-invalid:text-destructive`,`disabled:cursor-not-allowed disabled:opacity-50`,a),V=I?{value:D}:{};return(0,J.jsxs)(P,{onValueChange:e=>ee(e),disabled:s,defaultOpen:c,open:l,onOpenChange:u,name:d,required:f,defaultValue:F,...V,children:[(0,J.jsx)(k,{ref:v,className:O(`rich-select--component`,te),"aria-invalid":g,children:B?(0,J.jsx)(i,{tag:`span`,className:`text-left break-words whitespace-normal`,children:B.label}):(0,J.jsx)(M,{placeholder:S})}),(0,J.jsx)(j,{children:(0,J.jsx)(N,{children:E.map(e=>(0,J.jsx)(A,{value:e.value,disabled:e.disabled,children:(0,J.jsxs)(`div`,{className:`flex w-full items-center gap-2`,children:[!!e.icon&&(0,J.jsx)(`span`,{className:`w-4 h-4 shrink-0 flex items-center justify-center self-start mt-0.5`,children:e.icon}),(0,J.jsxs)(`div`,{className:`flex flex-col min-w-0 text-left flex-1`,children:[(0,J.jsx)(i,{tag:`span`,weight:`medium`,children:e.label}),!!e.description&&(0,J.jsx)(i,{tag:`span`,size:`xs`,type:`secondary`,lineHeight:`tight`,className:`mt-0.5 line-clamp-2`,children:e.description})]})]})},e.value))})})]})});ut.displayName=`RichSelect`;var dt={width:`Width`,height:`Height`,depth:`Depth`,unit:`Unit`,widthPlaceholder:`0.00`,heightPlaceholder:`0.00`,depthPlaceholder:`0.00`},ft=[{value:`g`,label:`g (grams)`},{value:`kg`,label:`kg (kilograms)`}],pt=(e,t)=>{if(!e)return{width:``,height:``,depth:``};if(t===`string`&&typeof e==`string`){let t=e.split(`x`).map(e=>e.trim());return{width:t[0]||``,height:t[1]||``,depth:t[2]||``}}return t===`object`&&typeof e==`object`?{width:e.width||``,height:e.height||``,depth:e.depth||``}:{width:``,height:``,depth:``}},mt=(e,t,n,r)=>r===`string`?`${e}x${t}x${n}`:{width:e,height:t,depth:n};function ht({value:e,defaultValue:t,format:n=`string`,unit:r,defaultUnit:a=`g`,widthLabel:s,heightLabel:c,depthLabel:l,unitLabel:u,unitPlaceholder:d,widthPlaceholder:f,heightPlaceholder:p,depthPlaceholder:m,onChange:h,onUnitChange:g,decimalPlaces:_=2,min:v=0,max:y,showUnitSelector:b=!0,disableUnitSelector:x=!1,layout:S=`horizontal`,invalid:C,disabled:w=!1,className:E,size:D,strings:F}){let{defaultControlSize:L}=o(),R=se(D,L),z=T(dt,F),B=s??z.width,ee=c??z.height,te=l??z.depth,V=d??z.unit,ne=f??z.widthPlaceholder,re=p??z.heightPlaceholder,ie=m??z.depthPlaceholder,ae=S===`horizontal`,oe=S===`vertical`,H=b===!0,U=(u??``).length>0,le=oe?B:``,ue=oe?ee:``,de=oe?te:``,G=e!==void 0,fe=r!==void 0,pe=pt(G?e:t,n),[me,he]=(0,q.useState)(pe.width),[ge,_e]=(0,q.useState)(pe.height),[ve,ye]=(0,q.useState)(pe.depth),[be,xe]=(0,q.useState)(r||a),Se=pt(e,n),Ce=G?Se.width:me,we=G?Se.height:ge,Te=G?Se.depth:ve,Ee=fe?r:be;(0,q.useEffect)(()=>{if(G){let t=pt(e,n);he(t.width),_e(t.height),ye(t.depth)}},[e,n,G]);let De=(0,q.useCallback)((e,t)=>{let r=Ce,i=we,a=Te;e===`width`&&(r=t),e===`height`&&(i=t),e===`depth`&&(a=t),G||(he(r),_e(i),ye(a));let o=mt(r,i,a,n);h?.({target:{value:o}})},[Ce,we,Te,G,n,h]),Oe=(0,q.useCallback)(e=>{if(e===null)return;let t=e;fe||xe(t),g?.(t)},[fe,g]),ke=(0,J.jsxs)(`div`,{className:`space-y-2`,children:[!!U&&(0,J.jsx)(I,{className:`leading-6`,children:u}),(0,J.jsxs)(P,{value:Ee,onValueChange:e=>Oe(e),disabled:w||x,children:[(0,J.jsx)(k,{"aria-invalid":C||void 0,className:O(`border-input bg-transparent !shadow-none`,ce[R],`focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]`,`aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive`,`w-32`,w&&`opacity-50 cursor-not-allowed`),children:(0,J.jsx)(M,{placeholder:V})}),(0,J.jsx)(j,{children:(0,J.jsx)(N,{children:ft.map(e=>(0,J.jsx)(A,{value:e.value,children:e.label},e.value))})})]})]});return(0,J.jsx)(`div`,{className:O(`dimensions-input--component`,`space-y-2`,E),children:(0,J.jsxs)(`div`,{className:O(`flex gap-2`,S===`vertical`?`flex-col`:`flex-row items-start`),children:[(0,J.jsxs)(`div`,{className:`flex-1 space-y-1`,children:[!!oe&&!!le&&(0,J.jsx)(I,{children:le}),(0,J.jsx)(W,{size:R,value:Ce,onChange:e=>De(`width`,e.target.value),placeholder:ne,decimalPlaces:_,min:v,max:y,disabled:w,invalid:C,"aria-label":B}),!!ae&&(0,J.jsx)(i,{size:`xs`,type:`secondary`,className:`text-center`,children:B})]}),S===`horizontal`&&(0,J.jsx)(`div`,{className:`flex items-center pt-2`,children:(0,J.jsx)(i,{tag:`span`,type:`secondary`,children:`×`})}),(0,J.jsxs)(`div`,{className:`flex-1 space-y-1`,children:[!!oe&&!!ue&&(0,J.jsx)(I,{children:ue}),(0,J.jsx)(W,{size:R,value:we,onChange:e=>De(`height`,e.target.value),placeholder:re,decimalPlaces:_,min:v,max:y,disabled:w,invalid:C,"aria-label":ee}),!!ae&&(0,J.jsx)(i,{size:`xs`,type:`secondary`,className:`text-center`,children:ee})]}),S===`horizontal`&&(0,J.jsx)(`div`,{className:`flex items-center pt-2`,children:(0,J.jsx)(i,{tag:`span`,type:`secondary`,children:`×`})}),(0,J.jsxs)(`div`,{className:`flex-1 space-y-1`,children:[!!oe&&!!de&&(0,J.jsx)(I,{children:de}),(0,J.jsx)(W,{size:R,value:Te,onChange:e=>De(`depth`,e.target.value),placeholder:ie,decimalPlaces:_,min:v,max:y,disabled:w,invalid:C,"aria-label":te}),!!ae&&(0,J.jsx)(i,{size:`xs`,type:`secondary`,className:`text-center`,children:te})]}),!!H&&(0,J.jsxs)(`div`,{className:O(S===`vertical`?`w-full`:`w-32 pt-0`),children:[ke,!!ae&&!U&&(0,J.jsx)(i,{size:`xs`,type:`secondary`,className:`mt-1 text-center`,children:V})]})]})})}ht.displayName=`DimensionsInput`;var gt={latLabel:``,lngLabel:``,latPlaceholder:``,lngPlaceholder:``,previewLinkLabel:``},_t=(e,t)=>{if(!e)return{lat:``,lng:``};if(t===`string`&&typeof e==`string`){let[t,n]=e.split(`,`).map(e=>e.trim());return{lat:t??``,lng:n??``}}return t===`object`&&typeof e==`object`?{lat:e.lat??``,lng:e.lng??``}:{lat:``,lng:``}},vt=(e,t,n)=>n===`string`?`${e},${t}`:{lat:e,lng:t},yt=(e,t,n)=>{if(!e)return!1;let r=Number(e);return Number.isFinite(r)&&r>=t&&r<=n};function bt({value:e,defaultValue:t,format:n=`object`,onChange:r,latLabel:i,lngLabel:a,latPlaceholder:o,lngPlaceholder:s,decimalPlaces:c=6,showPreviewLink:l=!0,previewLinkLabel:u,strings:d,invalid:f,className:p,disabled:m}){let h=T(T(gt,i!==void 0||a!==void 0||o!==void 0||s!==void 0||u!==void 0?{latLabel:i,lngLabel:a,latPlaceholder:o,lngPlaceholder:s,previewLinkLabel:u}:void 0),d),g=e!==void 0,_=_t(g?e:t,n),[v,y]=(0,q.useState)(_.lat),[b,x]=(0,q.useState)(_.lng),S=_t(e,n),C=g?S.lat:v,w=g?S.lng:b;(0,q.useEffect)(()=>{g&&(y(S.lat),x(S.lng))},[g,S.lat,S.lng]);let E=(0,q.useCallback)((e,t)=>{g||(y(e),x(t)),r?.({target:{value:vt(e,t,n)}})},[g,r,n]),D=(0,q.useMemo)(()=>{let e=yt(C,-90,90),t=yt(w,-180,180);return!e||!t?null:`https://www.google.com/maps?q=${encodeURIComponent(`${C},${w}`)}`},[C,w]);return(0,J.jsxs)(`div`,{className:O(`coordinates-input--component`,`space-y-3`,p),children:[(0,J.jsxs)(`div`,{className:`grid grid-cols-1 gap-3 md:grid-cols-2`,children:[(0,J.jsxs)(`div`,{className:`space-y-2`,children:[!!h.latLabel&&(0,J.jsx)(I,{children:h.latLabel}),(0,J.jsx)(W,{placeholder:h.latPlaceholder||void 0,value:C,onChange:e=>E(e.target.value,w),decimalPlaces:c,allowNegative:!0,min:-90,max:90,invalid:f,disabled:m})]}),(0,J.jsxs)(`div`,{className:`space-y-2`,children:[!!h.lngLabel&&(0,J.jsx)(I,{children:h.lngLabel}),(0,J.jsx)(W,{placeholder:h.lngPlaceholder||void 0,value:w,onChange:e=>E(C,e.target.value),decimalPlaces:c,allowNegative:!0,min:-180,max:180,invalid:f,disabled:m})]})]}),!!l&&!!D&&!!h.previewLinkLabel&&(0,J.jsx)(L,{href:D,type:`secondary`,underline:!1,children:h.previewLinkLabel})]})}bt.displayName=`CoordinatesInput`;function xt({value:e,onChange:t,placeholder:n,readableFormat:r=`dd-MM-yyyy HH:mm`,stepMinutes:i=30,modal:a=!0,invalid:o,disabled:s}){let c=e?new Date(e):void 0;return(0,J.jsx)(Ee,{className:`date-time-input--component`,mode:`single`,disabled:s,error:o?` `:void 0,placeholder:n,value:c,onChange:(0,q.useCallback)(e=>{t?.(e.date?e.date.toISOString():void 0)},[t]),readableFormat:r,withTime:{enabled:!0,format:`24`,step:i},modal:a})}xt.displayName=`DateTimeInput`;var St={placeholder:`Select time`,dialogTitle:`Select Time`,hours:`Hours`,minutes:`Minutes`,seconds:`Seconds`,now:`Now`,done:`Done`,hoursPlaceholder:`HH`,minutesPlaceholder:`MM`,secondsPlaceholder:`SS`,am:`AM`,pm:`PM`},Y=e=>String(e).padStart(2,`0`),X=e=>{let t=e.trim();if(t===``)return null;let n=Number.parseInt(t,10);return Number.isFinite(n)?n:null},Ct=(e,t,n)=>Math.min(Math.max(e,t),n),wt=e=>(e??``).replace(/\D/g,``).slice(0,2),Tt=(e,t)=>{if(!Number.isFinite(t)||t<=0||t===1)return e;let n=e%t,r=n>=Math.max(1,Math.floor(t*.8)),i=e-n,a=r?i+t:i;return a>=60?0:a};function Et({className:e,value:t=`00:00:00`,onChange:n,invalid:r,disabled:a,placeholder:o,dialogTitle:s,hoursLabel:c,minutesLabel:u,secondsLabel:d,nowLabel:p,doneLabel:m,format:h=`24`,minuteStep:g=5,showSeconds:_=!0,strings:v}){let y=(0,q.useId)(),b=T(T(St,o!==void 0||s!==void 0||c!==void 0||u!==void 0||d!==void 0||p!==void 0||m!==void 0?{placeholder:o,dialogTitle:s,hours:c,minutes:u,seconds:d,now:p,done:m}:void 0),v),x=(0,q.useCallback)((e,t)=>{let n=X(e??``)??0;return h===`12`?{hours:Y(n>12?12:Ct(n===0?12:n,1,12)),meridiem:t}:{hours:Y(n>24?24:Ct(n,0,24)),meridiem:t}},[h]),S=(0,q.useCallback)(e=>{let t=X(e??``)??0;return t>59&&(t=0),t=Tt(Ct(t,0,59),g),Y(t)},[g]),C=(0,q.useCallback)(e=>{let t=X(e??``)??0;return t>59&&(t=0),t=Ct(t,0,59),Y(t)},[]),w=(0,q.useCallback)((e,t,n,r)=>{let i=X(e)??0,a=X(t)??0;a>59&&(a=0),a=Tt(Ct(a,0,59),g);let o=_?X(n)??0:0;if(o>59&&(o=0),o=_?Ct(o,0,59):0,h===`12`){let e=i>12?12:Ct(i===0?12:i,1,12);return`${Y(r===`AM`?e===12?0:e:e===12?12:e+12)}:${Y(a)}:${Y(o)}`}return`${Y(i>24?24:Ct(i,0,24))}:${Y(a)}:${Y(o)}`},[h,g,_]),E=(0,q.useCallback)(e=>{let[t=`00`,n=`00`,r=`00`]=(e??``).split(`:`),i=_?r:`00`;return{hours:wt(t),minutes:wt(n),seconds:wt(i)}},[_]),[D,k]=(0,q.useState)(!1),[A,j]=(0,q.useState)(()=>E(t)),[M,N]=(0,q.useState)(()=>{let[e=`00`]=(t??``).split(`:`);return(X(e)??0)>=12?`PM`:`AM`}),P=(0,q.useRef)({});(0,q.useEffect)(()=>{if(D)return;j(E(t));let[e=`00`]=(t??``).split(`:`);N((X(e)??0)>=12?`PM`:`AM`)},[D,E,t]);let F=(e,t)=>{let r=wt(t);j(t=>({...t,[e]:r})),P.current[e]&&window.clearTimeout(P.current[e]),P.current[e]=window.setTimeout(()=>{j(t=>{let r={...t};if(e===`hours`){let e=(r.hours??``).trim();e.length===1&&(r.hours=`0${e}`),(r.hours??``).trim().length===2&&(r.hours=x(r.hours,M).hours)}if(e===`minutes`){let e=(r.minutes??``).trim();e.length===1&&(r.minutes=`0${e}`),(r.minutes??``).trim().length===2&&(r.minutes=S(r.minutes))}if(e===`seconds`){let e=(r.seconds??``).trim();e.length===1&&(r.seconds=`0${e}`),(r.seconds??``).trim().length===2&&(r.seconds=C(r.seconds))}let i=w(r.hours,r.minutes,r.seconds,M);n?.(i);let[a=`00`,o=`00`,s=`00`]=i.split(`:`);return h===`12`?r.hours=Y((X(a)??0)%12||12):r.hours=a,r.minutes=o,r.seconds=s,r})},400)},L=e=>{P.current[e]&&window.clearTimeout(P.current[e]),j(e=>{let t={...e};t.hours=x(t.hours,M).hours,t.minutes=S(t.minutes),t.seconds=C(t.seconds);let r=w(t.hours,t.minutes,t.seconds,M);n?.(r);let[i=`00`,a=`00`,o=`00`]=r.split(`:`);return{hours:h===`12`?wt(String((X(i)??0)%12||12)):i,minutes:a,seconds:o}})},R=(0,q.useMemo)(()=>{let e=w(A.hours,A.minutes,A.seconds,M);if(!_){let[t=`00`,n=`00`]=e.split(`:`);return`${t}:${n}`}return e},[M,w,_,A.hours,A.minutes,A.seconds]);return(0,J.jsxs)(Ce,{open:D,onOpenChange:k,children:[(0,J.jsx)(Se,{render:n=>(0,J.jsx)(l,{...n,id:y,variant:`secondary`,buttonStyle:`outline`,"aria-expanded":D,"aria-invalid":r,disabled:a,className:O(`time-picker--component`,Te,`w-full justify-between text-left`,!t&&`!text-muted-foreground`,n.className,e),children:n.children}),children:(0,J.jsxs)(`div`,{className:`flex items-center gap-space-md`,children:[(0,J.jsx)(f,{className:`size-icon`}),(0,J.jsx)(`span`,{children:R||b.placeholder})]})}),(0,J.jsx)(we,{className:`w-auto p-4`,align:`start`,children:(0,J.jsxs)(`div`,{className:`space-y-4`,children:[(0,J.jsx)(i,{tag:`div`,weight:`medium`,align:`center`,children:b.dialogTitle}),(0,J.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,J.jsxs)(`div`,{className:`text-center`,children:[(0,J.jsx)(I,{size:`small`,className:`text-muted-foreground`,children:b.hours}),(0,J.jsx)(H,{inputMode:`numeric`,value:A.hours,onChange:e=>F(`hours`,e.target.value),onFocus:e=>e.currentTarget.select(),onClick:e=>e.currentTarget.select(),onBlur:()=>L(`hours`),placeholder:b.hoursPlaceholder,className:`w-16 text-center`})]}),(0,J.jsx)(i,{tag:`div`,className:`text-base`,children:`:`}),(0,J.jsxs)(`div`,{className:`text-center`,children:[(0,J.jsx)(I,{size:`small`,className:`text-muted-foreground`,children:b.minutes}),(0,J.jsx)(H,{inputMode:`numeric`,value:A.minutes,onChange:e=>F(`minutes`,e.target.value),onFocus:e=>e.currentTarget.select(),onClick:e=>e.currentTarget.select(),onBlur:()=>L(`minutes`),placeholder:b.minutesPlaceholder,className:`w-16 text-center`})]}),!!_&&(0,J.jsxs)(J.Fragment,{children:[(0,J.jsx)(i,{tag:`div`,className:`text-base`,children:`:`}),(0,J.jsxs)(`div`,{className:`text-center`,children:[(0,J.jsx)(I,{size:`small`,className:`text-muted-foreground`,children:b.seconds}),(0,J.jsx)(H,{inputMode:`numeric`,value:A.seconds,onChange:e=>F(`seconds`,e.target.value),onFocus:e=>e.currentTarget.select(),onClick:e=>e.currentTarget.select(),onBlur:()=>L(`seconds`),placeholder:b.secondsPlaceholder,className:`w-16 text-center`})]})]}),h===`12`&&(0,J.jsxs)(`div`,{className:`flex items-end gap-1 pb-0.5`,children:[(0,J.jsx)(l,{type:`button`,variant:M===`AM`?`primary`:`secondary`,buttonStyle:M===`AM`?`solid`:`outline`,onClick:()=>N(`AM`),children:b.am}),(0,J.jsx)(l,{type:`button`,variant:M===`PM`?`primary`:`secondary`,buttonStyle:M===`PM`?`solid`:`outline`,onClick:()=>N(`PM`),children:b.pm})]})]}),(0,J.jsxs)(`div`,{className:`flex gap-2`,children:[(0,J.jsx)(l,{variant:`secondary`,buttonStyle:`outline`,className:`flex-1`,onClick:()=>{let e=new Date,t={hours:String(h===`12`?e.getHours()%12||12:e.getHours()),minutes:String(e.getMinutes()),seconds:``};j(t),N(e.getHours()>=12?`PM`:`AM`),n?.(w(t.hours,t.minutes,t.seconds,e.getHours()>=12?`PM`:`AM`))},children:b.now}),(0,J.jsx)(l,{variant:`primary`,buttonStyle:`solid`,className:`flex-1`,onClick:()=>{n?.(w(A.hours,A.minutes,A.seconds,M)),k(!1)},children:b.done})]})]})})]})}Et.displayName=`TimePicker`;var Dt=e=>{if(e===0)return`0 Bytes`;let t=1024,n=[`Bytes`,`KB`,`MB`,`GB`,`TB`],r=Math.floor(Math.log(e)/Math.log(t));return`${(e/t**r).toFixed(2)} ${n[r]}`},Ot=0,kt=()=>`${Date.now().toString(36)}-${(Ot++).toString(36)}`,At=e=>{let[t,n]=(0,q.useState)([]),[r,i]=(0,q.useState)({}),a=(0,q.useCallback)(Dt,[]),o=(0,q.useCallback)(t=>{if(e?.minSize!==void 0&&t.size<e.minSize)return`Size (${Dt(t.size)}) is smaller than minimum (${Dt(e.minSize)}).`;if(e?.maxSize!==void 0&&t.size>e.maxSize)return`Size (${Dt(t.size)}) exceeds maximum (${Dt(e.maxSize)}).`;let n=t.name.split(`.`).pop()?.toLowerCase()||``;if(e?.allowedExtensions&&!e.allowedExtensions.map(e=>e.toLowerCase()).includes(n))return`Extension (.${n}) is not allowed.`;if(e?.customValidator){let n=e.customValidator(t);if(n!==!0)return typeof n==`string`?n:`Custom validation failed.`}return null},[e]),s=(0,q.useCallback)((t,r=!1)=>{let a=Array.isArray(t)?t:Array.from(t),s={};n(t=>{let n=r?[]:[...t];return a.forEach(t=>{let r=t.name.split(`.`).pop()?.toLowerCase()||``;if(n.some(e=>e.name===t.name&&e.size===t.size&&e.extension===r))return;let i=o(t);if(i){s[t.name]=i;return}if(e?.maxFiles!==void 0&&n.length+1>e.maxFiles){s[t.name]=`Cannot exceed max files limit of ${e.maxFiles}.`;return}let a={id:kt(),file:t,name:t.name,size:t.size,formattedSize:Dt(t.size),type:t.type,extension:r,lastModified:t.lastModified};n.push(a)}),n}),i(s)},[e?.maxFiles,o]);return{files:t,addFiles:(0,q.useCallback)(e=>s(e,!1),[s]),setFiles:(0,q.useCallback)(e=>s(e,!0),[s]),remove:(0,q.useCallback)(e=>{n(t=>t.filter(t=>t.id!==e))},[]),removeAll:(0,q.useCallback)(()=>{n(e=>e.length===0?e:[]),i({})},[]),formatSize:a,validationErrors:r}},jt={change:`Change photo`,remove:`Remove photo`,hint:`Click or drop an image`,dragOver:`Drop image to upload`},Mt={small:{box:`size-upload-avatar-small`,icon:`size-icon`,remove:`size-control-clear`},default:{box:`size-upload-avatar`,icon:`size-icon-lg`,remove:`size-control`}},Nt=e=>e===`small`||e==="default"?e:e===`sm`?`small`:`default`;function Pt({value:e,onChange:t,defaultPreviewUrl:n,accept:r=`.png,.jpg,.jpeg,.gif,.webp`,disabled:a=!1,invalid:o=!1,size:s=`default`,className:l,strings:u,initials:d},f){let p=T(jt,u),m=(0,q.useId)(),h=(0,q.useRef)(null),[g,_]=(0,q.useState)(!1),v=Nt(s),y=Mt[v],{files:b,setFiles:x,removeAll:S}=At({maxFiles:1,allowedExtensions:(0,q.useMemo)(()=>r.split(`,`).map(e=>e.trim().replace(/^\./,``).toLowerCase()).filter(Boolean),[r])});(0,q.useEffect)(()=>{e?x([e]):S()},[e]);let w=b[0],[E,D]=(0,q.useState)(void 0);(0,q.useEffect)(()=>{let t=w?.file??e;if(!t){D(void 0);return}let n=URL.createObjectURL(t);return D(n),()=>URL.revokeObjectURL(n)},[w,e]);let k=E??n,A=!!k,j=(0,q.useCallback)(e=>{let n=e.target.files;!n||n.length===0||(x(n),t?.(n[0]),h.current&&(h.current.value=``))},[t,x]),M=(0,q.useCallback)(()=>{a||h.current?.click()},[a]),N=(0,q.useCallback)(()=>{S(),t?.(void 0),h.current&&(h.current.value=``)},[t,S]),P=e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),M())},F=(0,q.useCallback)(e=>{e.preventDefault(),e.stopPropagation(),a||_(!0)},[a]),I=(0,q.useCallback)(e=>{e.preventDefault(),e.stopPropagation(),_(!1)},[]),L=(0,q.useCallback)(e=>{if(e.preventDefault(),e.stopPropagation(),_(!1),a)return;let n=e.dataTransfer?.files;!n||n.length===0||(x(n),t?.(n[0]))},[a,t,x]);return(0,J.jsxs)(`div`,{className:O(`avatar-upload--component`,`inline-flex flex-col items-center gap-2`,l),children:[(0,J.jsxs)(`div`,{role:`button`,tabIndex:a?-1:0,"aria-label":p.change,"aria-disabled":a||void 0,"aria-invalid":o||void 0,onClick:M,onKeyDown:P,onDragEnter:F,onDragOver:F,onDragLeave:I,onDrop:L,className:O(`group relative flex shrink-0 items-center justify-center overflow-hidden rounded-full`,`border border-dashed transition-colors duration-150 outline-none`,`focus-visible:ring-2 focus-visible:ring-ring/50`,A?`border-border/60 bg-muted/20`:O(`bg-muted/30 hover:border-primary hover:bg-primary/5`,o?`border-destructive`:`border-muted-foreground/40`),a&&`cursor-not-allowed opacity-50`,!a&&g&&`border-primary bg-primary/10`,y.box),children:[(0,J.jsx)(`input`,{id:m,ref:e=>{h.current=e,typeof f==`function`?f(e):f&&(f.current=e)},type:`file`,className:`sr-only`,"aria-label":p.change,accept:r,disabled:a,onChange:j}),A&&k?(0,J.jsx)(`img`,{src:k,alt:p.change,className:`absolute inset-0 size-full object-cover`}):d?(0,J.jsx)(i,{size:v===`small`?`sm`:`base`,weight:`bold`,className:`leading-none`,children:d}):(0,J.jsx)(c,{className:O(y.icon,`text-muted-foreground`),"aria-hidden":`true`}),!a&&A&&(0,J.jsx)(`div`,{className:`pointer-events-none absolute inset-0 hidden items-center justify-center bg-foreground/50 text-background backdrop-blur-[1px] group-hover:flex`,"aria-hidden":`true`,children:(0,J.jsx)(c,{className:y.icon})}),!a&&A&&(0,J.jsx)(`button`,{type:`button`,"aria-label":p.remove,onClick:e=>{e.stopPropagation(),N()},className:O(`absolute right-0.5 top-0.5 inline-flex items-center justify-center rounded-full bg-card text-foreground shadow ring-1 ring-border`,`opacity-0 transition-opacity group-hover:opacity-100 focus-visible:opacity-100`,y.remove),children:(0,J.jsx)(C,{className:`size-3`})}),!a&&!A&&g&&(0,J.jsx)(i,{size:`xs`,weight:`medium`,className:`absolute inset-x-0 bottom-1.5 text-center text-primary`,children:p.dragOver})]}),!A&&(0,J.jsx)(i,{size:`xs`,type:`secondary`,children:p.hint})]})}var Ft=q.forwardRef(Pt);Ft.displayName=`AvatarUpload`;var Z={emptyState:`No items added yet.`,addItem:`Add item`,removeAriaLabel:`Remove item`},It={emptyState:Z.emptyState,addButton:Z.addItem,removeAriaLabel:Z.removeAriaLabel,dragHandleAriaLabel:`Drag to reorder`};function Lt({item:e,index:t,sortable:n,rowVariant:r,removeVariant:i,hideRemove:a,disabled:o,strings:s,onRemove:c,renderRow:u}){let d=Fe({id:e.id,disabled:o||!n}),f=n?d.isDragging:!1,p=n?{transform:Pe.Transform.toString(d.transform),transition:d.transition,opacity:f?.6:1}:void 0,m=n?d.setNodeRef:void 0,h=n?d.attributes:{},_=n?d.listeners:void 0,v=n?(0,J.jsx)(`button`,{type:`button`,"aria-label":s.dragHandleAriaLabel,className:O(`inline-flex size-9 shrink-0 items-center justify-center rounded-md`,`text-muted-foreground/50 hover:text-foreground hover:bg-muted`,`cursor-grab active:cursor-grabbing`,`outline-none focus-visible:ring-2 focus-visible:ring-ring/50`,`transition-colors`,o&&`pointer-events-none opacity-50`),...h,..._,children:(0,J.jsx)(g,{className:`size-4`,"aria-hidden":`true`})}):null,y=a?null:i===`icon-button`?(0,J.jsx)(l,{type:`button`,variant:`secondary`,buttonStyle:`outline`,size:`default`,"aria-label":s.removeAriaLabel,disabled:o,onClick:()=>c(t),className:`shrink-0`,children:(0,J.jsx)(S,{className:`size-4`,"aria-hidden":`true`})}):(0,J.jsx)(`button`,{type:`button`,"aria-label":s.removeAriaLabel,disabled:o,onClick:()=>c(t),className:O(`inline-flex size-9 shrink-0 items-center justify-center rounded-md`,`text-muted-foreground/70 hover:bg-destructive/10 hover:text-destructive`,`outline-none focus-visible:ring-2 focus-visible:ring-ring/50`,`transition-colors`,`disabled:pointer-events-none disabled:opacity-50`),children:(0,J.jsx)(C,{className:`size-4`,"aria-hidden":`true`})});return r===`card`?(0,J.jsx)(`div`,{ref:m,style:p,className:O(`repeater--component`,`relative rounded-md border border-input bg-card p-4`,n&&`pl-2`),children:(0,J.jsxs)(`div`,{className:`flex items-start gap-2`,children:[v,(0,J.jsx)(`div`,{className:`min-w-0 flex-1`,children:u(e,{index:t,isDragging:f})}),y]})}):(0,J.jsxs)(`div`,{ref:m,style:p,className:`flex items-start gap-2`,children:[v,(0,J.jsx)(`div`,{className:`min-w-0 flex-1`,children:u(e,{index:t,isDragging:f})}),y]})}function Rt({items:e,renderRow:t,onAdd:n,onRemove:r,onMove:a,sortable:o=!1,rowVariant:s=`inline`,removeVariant:c=`ghost`,hideRemove:u=!1,hideAdd:d=!1,disabled:f=!1,strings:p,className:m}){let h=T(It,p),g=Ae(ke(Oe,{activationConstraint:{distance:4}}),ke(Ie,{coordinateGetter:Ne})),_=(0,q.useCallback)(t=>{let{active:n,over:r}=t;if(!r||n.id===r.id)return;let i=e.findIndex(e=>e.id===n.id),o=e.findIndex(e=>e.id===r.id);i<0||o<0||a?.(i,o)},[e,a]),v=(0,q.useMemo)(()=>e.map(e=>e.id),[e]),b=(0,J.jsx)(`div`,{className:`space-y-2`,children:e.map((e,n)=>(0,J.jsx)(Lt,{item:e,index:n,sortable:o,rowVariant:s,removeVariant:c,hideRemove:u,disabled:f,strings:h,onRemove:r,renderRow:t},e.id))});return(0,J.jsxs)(`div`,{className:O(`space-y-3`,m),children:[e.length===0?(0,J.jsx)(`div`,{className:`rounded-md border border-dashed border-input p-4`,children:(0,J.jsx)(i,{type:`secondary`,children:h.emptyState})}):o?(0,J.jsx)(De,{sensors:g,collisionDetection:Me,onDragEnd:_,children:(0,J.jsx)(Le,{items:v,strategy:je,children:b})}):b,!d&&(0,J.jsxs)(l,{type:`button`,variant:`secondary`,buttonStyle:`outline`,size:`default`,disabled:f,onClick:n,children:[(0,J.jsx)(y,{className:`size-4 mr-1.5`}),h.addButton]})]})}Rt.displayName=`Repeater`;var zt={keyLabel:`Key`,valueLabel:`Value`,keyPlaceholder:`key`,valuePlaceholder:`value`,addButton:`Add row`,removeRowAriaLabel:`Remove row`,emptyState:`No rows yet.`},Bt=()=>typeof crypto<`u`&&`randomUUID`in crypto?crypto.randomUUID():Math.random().toString(36).slice(2,10),Vt=(0,q.memo)(function({row:e,keyPlaceholder:t,valuePlaceholder:n,invalid:r,onKeyChange:i,onValueChange:a}){let{id:o,key:s,value:c}=e;return(0,J.jsxs)(`div`,{className:O(`key-value-editor--component`,`grid grid-cols-1 md:grid-cols-2 gap-2`),children:[(0,J.jsx)(H,{value:s??``,placeholder:t,onChange:e=>i(o,e.target.value),invalid:r}),(0,J.jsx)(H,{value:c??``,placeholder:n,onChange:e=>a(o,e.target.value),invalid:r})]})});function Ht({value:e,onChange:t,invalid:n,sortable:r=!1,keyPlaceholder:i,valuePlaceholder:a,keyLabel:o,valueLabel:s,addButtonText:c,strings:l}){let u=T(T(zt,i!==void 0||a!==void 0||o!==void 0||s!==void 0||c!==void 0?{keyPlaceholder:i,valuePlaceholder:a,keyLabel:o,valueLabel:s,addButton:c}:void 0),l),d=(0,q.useRef)(!1),[f,p]=(0,q.useState)(()=>e&&Object.keys(e).length>0?Object.entries(e).map(([e,t])=>({id:Bt(),key:e,value:String(t??``)})):[{id:Bt(),key:``,value:``}]),m=(0,q.useCallback)(e=>{let n={};e.forEach(({key:e,value:t})=>{e.trim()!==``&&(n[e]=t??``)}),d.current=!0,t?.(n),queueMicrotask(()=>{d.current=!1})},[t]),h=(0,q.useCallback)((e,t)=>{p(n=>{let r=n.map(n=>n.id===e?{...n,key:t}:n);return m(r),r})},[m]),g=(0,q.useCallback)((e,t)=>{p(n=>{let r=n.map(n=>n.id===e?{...n,value:t}:n);return m(r),r})},[m]),_=(0,q.useCallback)(()=>{p(e=>{let t=[...e,{id:Bt(),key:``,value:``}];return m(t),t})},[m]),v=(0,q.useCallback)(e=>{p(t=>{let n=t.filter((t,n)=>n!==e),r=n.length?n:[{id:Bt(),key:``,value:``}];return m(r),r})},[m]),y=(0,q.useCallback)((e,t)=>{p(n=>{let r=[...n],[i]=r.splice(e,1);return r.splice(t,0,i),m(r),r})},[m]);return(0,J.jsxs)(`div`,{className:`space-y-2`,children:[(!!u.keyLabel||!!u.valueLabel)&&(0,J.jsxs)(`div`,{className:O(`grid grid-cols-1 md:grid-cols-2 gap-2`,r?`pl-11`:``,`pr-11`),children:[!!u.keyLabel&&(0,J.jsx)(I,{className:`flex items-center`,children:u.keyLabel}),!!u.valueLabel&&(0,J.jsx)(I,{className:`flex items-center`,children:u.valueLabel})]}),(0,J.jsx)(Rt,{items:f,sortable:r,onAdd:_,onRemove:v,onMove:y,strings:{emptyState:u.emptyState,addButton:u.addButton,removeAriaLabel:u.removeRowAriaLabel},renderRow:e=>(0,J.jsx)(Vt,{row:e,keyPlaceholder:u.keyPlaceholder,valuePlaceholder:u.valuePlaceholder,invalid:n,onKeyChange:h,onValueChange:g})})]})}Ht.displayName=`KeyValueEditor`;var Ut={placeholder:`Enter value`,addButton:`Add item`,...Z};function Wt({name:e,placeholder:t,addButtonText:n,emptyMessage:r,invalid:i,sortable:a=!1,strings:o}){let s=T(T(Ut,t!==void 0||n!==void 0||r!==void 0?{placeholder:t,addButton:n,emptyState:r}:void 0),o),{control:c,register:l}=V(),{fields:u,append:d,remove:f,move:p}=ie({control:c,name:e});return(0,J.jsx)(Rt,{className:`string-repeater--component`,items:u,sortable:a,onAdd:()=>d(``),onRemove:e=>f(e),onMove:(e,t)=>p(e,t),strings:{emptyState:s.emptyState,addButton:s.addButton,removeAriaLabel:s.removeAriaLabel},renderRow:(t,{index:n})=>(0,J.jsx)(H,{...l(`${e}.${n}`),placeholder:s.placeholder,invalid:i})})}Wt.displayName=`StringRepeater`;var Gt={addButton:`Add item`,...Z};function Kt({name:e,fields:t,addButtonText:n,emptyMessage:r,invalid:i,sortable:a=!1,strings:o}){let s=T(T(Gt,n!==void 0||r!==void 0?{addButton:n,emptyState:r}:void 0),o),{control:c,register:l}=V(),{fields:u,append:d,remove:f,move:p}=ie({control:c,name:e}),m=(0,q.useCallback)(()=>t.reduce((e,t)=>(e[t.name]=``,e),{}),[t]);return(0,J.jsx)(Rt,{items:u,sortable:a,rowVariant:`card`,removeVariant:`ghost`,onAdd:()=>d(m()),onRemove:e=>f(e),onMove:(e,t)=>p(e,t),strings:{emptyState:s.emptyState,addButton:s.addButton,removeAriaLabel:s.removeAriaLabel},renderRow:(n,{index:r})=>(0,J.jsx)(`div`,{className:O(`object-repeater--component`,`space-y-3`),children:t.map(t=>{let n=`${e}.${r}.${t.name}`;return(0,J.jsx)(K,{label:t.label,required:t.required,hint:t.hint,htmlFor:n,children:t.type===`textarea`?(0,J.jsx)(U,{...l(n),id:n,placeholder:t.placeholder,minRows:3,invalid:i}):(0,J.jsx)(H,{...l(n),id:n,type:t.type||`text`,placeholder:t.placeholder,invalid:i})},t.name)})})})}Kt.displayName=`ObjectRepeater`;var qt={addButton:`Add item`,emptyState:Z.emptyState,dragHandle:`Drag to reorder`,removeAriaLabel:Z.removeAriaLabel};function Jt({name:e,placeholder:t,addButtonText:n,emptyMessage:r,disableSort:i=!1,invalid:a,strings:o}){let s=T(T(qt,n!==void 0||r!==void 0?{addButton:n,emptyState:r}:void 0),o),{control:c,register:l}=V(),{fields:u,append:d,remove:f,move:p}=ie({control:c,name:e});return(0,J.jsx)(Rt,{className:`list--component`,items:u,sortable:!i,onAdd:()=>d(``),onRemove:e=>f(e),onMove:(e,t)=>p(e,t),strings:{emptyState:s.emptyState,addButton:s.addButton,removeAriaLabel:s.removeAriaLabel,dragHandleAriaLabel:s.dragHandle},renderRow:(n,{index:r})=>(0,J.jsx)(H,{...l(`${e}.${r}`),placeholder:t,invalid:a})})}Jt.displayName=`List`;function Yt({name:e,value:t,options:n,onChange:r,allowClear:i=!1,size:a,fullWidth:s=!1,disabled:c=!1,invalid:l=!1,className:u}){let{defaultControlSize:d}=o(),f=se(a,d),p=q.useCallback(e=>{e===t?i&&r(null):r(e)},[i,r,t]);return(0,J.jsx)(`div`,{"data-name":e,role:`radiogroup`,"aria-invalid":l||void 0,className:O(`pill-radio-group--component`,`border-input inline-flex items-center overflow-hidden rounded-lg border`,s&&`w-full`,`aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20`,c&&`pointer-events-none opacity-50`,u),children:n.map((e,n)=>{let r=e.value===t,i=e.icon;return(0,J.jsxs)(`button`,{type:`button`,role:`radio`,"aria-checked":r,"aria-label":(typeof e.label==`string`?e.label:void 0)||e.value,disabled:c||e.disabled,onClick:()=>p(e.value),className:O(`inline-flex select-none items-center justify-center font-medium transition-colors`,`focus-visible:ring-ring/50 outline-none focus-visible:z-10 focus-visible:ring-2`,`disabled:pointer-events-none disabled:opacity-50`,me[f],s&&`flex-1`,n>0&&`border-input border-l`,r?`bg-primary text-primary-foreground`:`bg-background text-foreground hover:bg-muted`),children:[!!i&&(0,J.jsx)(i,{className:O(f===`small`?`size-icon-sm`:`size-icon`,e.label&&`mr-space-sm`)}),e.label]},e.value)})})}Yt.displayName=`PillRadioGroup`;function Xt({name:e,type:t=`text`,placeholder:n,primaryLocale:r,secondaryLocale:i,activeLocale:a,invalid:o,className:s}){let{register:c}=V(),l=`${e}.${a===`primary`?r:i}`;return t===`textarea`?(0,J.jsx)(U,{...c(l),placeholder:n,minRows:3,invalid:o,className:O(`localized-string-field--component`,s)}):(0,J.jsx)(H,{...c(l),type:t===`number`?`number`:`text`,placeholder:n,invalid:o,className:s})}Xt.displayName=`LocalizedStringField`;function Zt({name:e,fields:t,primaryLocale:n,secondaryLocale:r,activeLocale:i,invalid:a,className:o}){let{register:s}=V(),c=i===`primary`?n:r;return(0,J.jsx)(`div`,{className:`w-full space-y-3 rounded-md border p-4 ${o??``}`,children:t.map(t=>{let n=`${e}.${c}.${t.name}`;return(0,J.jsxs)(`div`,{className:`w-full space-y-1.5`,children:[(0,J.jsxs)(I,{htmlFor:n,children:[t.label,!!t.required&&(0,J.jsx)(`span`,{className:`text-destructive ml-1`,children:`*`})]}),t.type===`textarea`?(0,J.jsx)(U,{...s(n),id:n,placeholder:t.placeholder,minRows:3,invalid:a}):(0,J.jsx)(H,{...s(n),id:n,type:t.type===`number`?`number`:`text`,placeholder:t.placeholder,invalid:a})]},t.name)})})}Zt.displayName=`LocalizedObjectField`;var Qt={placeholder:`Enter value`,addButton:Z.addItem,emptyState:Z.emptyState,removeAriaLabel:Z.removeAriaLabel};function $t({name:e,placeholder:t,addButtonText:n,emptyMessage:r,primaryLocale:i,secondaryLocale:a,activeLocale:o,invalid:s,sortable:c=!1,strings:l}){let u=T(T(Qt,t!==void 0||n!==void 0||r!==void 0?{placeholder:t,addButton:n,emptyState:r}:void 0),l),{control:d,register:f}=V(),p=`${e}.${o===`primary`?i:a}`,{fields:m,append:h,remove:g,move:_}=ie({control:d,name:p});return(0,J.jsx)(Rt,{className:`localized-string-repeater--component`,items:m,sortable:c,onAdd:()=>h(``),onRemove:e=>g(e),onMove:(e,t)=>_(e,t),strings:{emptyState:u.emptyState,addButton:u.addButton,removeAriaLabel:u.removeAriaLabel},renderRow:(e,{index:t})=>(0,J.jsx)(U,{...f(`${p}.${t}`),placeholder:u.placeholder,minRows:2,invalid:s})})}$t.displayName=`LocalizedStringRepeater`;function en({title:e,description:t,actions:n,children:r,footer:i,padding:a=`default`,surface:o=`card`,className:s,contentClassName:c}){return(0,J.jsx)(te,{"data-component":`form-section`,"data-slot":`form-section`,title:e,description:t,headerAction:n,footerSlot:i,padding:a,surface:o,className:O(`form-section--component`,s),contentClassName:O(`form-section--content grid gap-4`,c),children:r})}function tn({children:e,leading:t,trailing:n,sticky:r=!1,className:i}){return(0,J.jsxs)(`div`,{"data-component":`form-actions-bar`,"data-slot":`form-actions-bar`,className:O(`form-actions-bar--component flex min-w-0 flex-col gap-3 border-t border-border bg-background/95 px-4 py-3 backdrop-blur sm:flex-row sm:items-center sm:justify-between`,r&&`sticky bottom-0 z-30`,i),children:[(0,J.jsx)(`div`,{"data-slot":`form-actions-leading`,className:`form-actions-bar--leading min-w-0 flex-1`,children:t}),(0,J.jsx)(`div`,{"data-slot":`form-actions-trailing`,className:`form-actions-bar--trailing flex shrink-0 flex-wrap items-center gap-2`,children:n??e})]})}function nn({title:e,description:t,errors:n=[],action:r,className:i}){return(0,J.jsxs)(ee,{"data-component":`error-summary`,"data-slot":`error-summary`,variant:`destructive`,className:O(`error-summary--component`,i),children:[(0,J.jsx)(R,{children:e}),!!t&&(0,J.jsx)(B,{children:t}),n.length>0&&(0,J.jsx)(`ul`,{"data-slot":`error-summary-list`,className:`error-summary--list col-start-2 m-0 list-disc space-y-1 pl-4 text-sm text-muted-foreground`,children:n.map((e,t)=>(0,J.jsx)(`li`,{children:e},t))}),!!r&&(0,J.jsx)(z,{children:r})]})}function rn({title:e,description:t,actions:n,variant:r=`warning`,className:i}){return(0,J.jsxs)(ee,{"data-component":`dirty-state-banner`,"data-slot":`dirty-state-banner`,variant:r,className:O(`dirty-state-banner--component`,i),children:[(0,J.jsx)(R,{children:e}),!!t&&(0,J.jsx)(B,{children:t}),!!n&&(0,J.jsx)(z,{children:n})]})}function an({isSubmitting:e=!1,isDirty:t=!0,disableWhenPristine:n=!1,disabled:r,children:i,...a}){return(0,J.jsx)(l,{...a,"data-component":`submit-state-button`,"data-slot":`submit-state-button`,type:a.type??`submit`,loading:e,disabled:r||n&&!t,className:O(`submit-state-button--component`,a.className),children:i})}var on=e({AvatarUploadExample:()=>Yn,BasicField:()=>sn,CardCheckboxGroupExample:()=>Fn,CardRadioGroupExample:()=>Pn,CheckboxExample:()=>kn,CoordinatesInputExample:()=>Vn,CurrencyInputExample:()=>xn,DateTimeInputExample:()=>In,DecimalInputExample:()=>yn,DimensionsInputExample:()=>wn,DropzoneExample:()=>Xn,InputBasic:()=>dn,InputCharacterCount:()=>_n,InputClearableLoading:()=>gn,InputWithAddons:()=>hn,InputWithIcons:()=>fn,KeyValueEditorExample:()=>Wn,ListExample:()=>Gn,ListRadioGroupExample:()=>Nn,LocalizedObjectFieldExample:()=>qn,LocalizedStringFieldExample:()=>Kn,LocalizedStringRepeaterExample:()=>Jn,MoneyInputExample:()=>Sn,ObjectRepeaterExample:()=>Un,PasswordInputExample:()=>pn,PercentageInputExample:()=>bn,PhoneInputExample:()=>Bn,PillRadioGroupExample:()=>Mn,RichSelectExample:()=>En,RoundingModeSelectExample:()=>Dn,SelectExample:()=>Tn,SliderExample:()=>Rn,SlugFieldExample:()=>mn,StringRepeaterExample:()=>Hn,SwitchCardExample:()=>jn,SwitchExample:()=>On,TagsInputExample:()=>zn,TextareaExample:()=>vn,TimePickerExample:()=>Ln,ToggleFieldExample:()=>An,WeightInputExample:()=>Cn,WholeForm:()=>Zn,WithError:()=>cn,WithHelperText:()=>ln,WorkflowChrome:()=>un});function sn(){let[e,t]=(0,q.useState)(``);return(0,J.jsx)(K,{label:`Full name`,hint:`As it appears on your ID`,required:!0,children:(0,J.jsx)(H,{value:e,onChange:e=>t(e.target.value),placeholder:`Sarah Smitha`})})}function cn(){return(0,J.jsx)(K,{label:`Email`,error:`That doesn't look like a valid email.`,required:!0,children:(0,J.jsx)(H,{defaultValue:`not-an-email`,invalid:!0})})}function ln(){return(0,J.jsx)(K,{label:`API token`,helperText:`Stored encrypted at rest. Rotate every 90 days.`,children:(0,J.jsx)(H,{defaultValue:`sk_live_••••••••••••`})})}function un(){return(0,J.jsxs)(`div`,{className:`grid gap-3`,children:[(0,J.jsx)(en,{title:`Publishing`,description:`Section chrome, validation summary, dirty state, and submit state stay reusable across form libraries.`,actions:(0,J.jsx)(l,{variant:`secondary`,children:`Reset`}),children:(0,J.jsxs)(`div`,{className:`grid gap-3 sm:grid-cols-2`,children:[(0,J.jsx)(K,{label:`Display title`,required:!0,children:(0,J.jsx)(H,{defaultValue:`Summer collection`})}),(0,J.jsx)(K,{label:`Status`,children:(0,J.jsx)(le,{defaultValue:`draft`,options:[{value:`draft`,label:`Draft`},{value:`published`,label:`Published`}]})})]})}),(0,J.jsx)(nn,{title:`Fix publishing errors`,description:`Two fields need attention before this can publish.`,errors:[`Display title is required`,`Publish date must be in the future`]}),(0,J.jsx)(rn,{title:`Unsaved changes`,description:`Save or discard before leaving this workflow.`,actions:(0,J.jsx)(l,{variant:`secondary`,children:`Discard`})}),(0,J.jsx)(tn,{leading:(0,J.jsx)(`span`,{className:`text-xs text-muted-foreground`,children:`Last saved 2 minutes ago`}),trailing:(0,J.jsx)(an,{isDirty:!0,children:`Save changes`})})]})}function dn(){return(0,J.jsxs)(`div`,{className:`flex w-full max-w-sm flex-col gap-3`,children:[(0,J.jsx)(H,{placeholder:`Type something…`}),(0,J.jsx)(H,{"aria-label":`Pre-filled value`,defaultValue:`Pre-filled value`}),(0,J.jsx)(H,{"aria-label":`Disabled example`,disabled:!0,defaultValue:`Disabled`})]})}function fn(){return(0,J.jsxs)(`div`,{className:`flex w-full max-w-sm flex-col gap-3`,children:[(0,J.jsx)(H,{startIcon:E,placeholder:`Search orders…`}),(0,J.jsx)(H,{endIcon:v,placeholder:`you@example.com`}),(0,J.jsx)(m,{"aria-label":`Password`,startIcon:_,defaultValue:`hunter2`})]})}function pn(){return(0,J.jsx)(`div`,{className:`w-full max-w-sm`,children:(0,J.jsx)(K,{label:`Password`,hint:`The reveal button is keyboard and screen-reader accessible.`,children:(0,J.jsx)(m,{placeholder:`Enter password`,autoComplete:`current-password`})})})}function mn(){let[e,t]=(0,q.useState)(`Summer Collection: Salt & Pepper Set`);return(0,J.jsxs)(`div`,{className:`grid w-full max-w-sm gap-3`,children:[(0,J.jsx)(K,{label:`Title`,hint:`The slug below updates from this value.`,children:(0,J.jsx)(H,{value:e,onChange:e=>t(e.target.value)})}),(0,J.jsx)(K,{label:`Slug`,hint:`Read-only value submitted with the form.`,children:(0,J.jsx)(Be,{name:`slug`,value:e,startAddon:`/`,"aria-label":`Generated slug`})})]})}function hn(){return(0,J.jsxs)(`div`,{className:`flex w-full max-w-sm flex-col gap-3`,children:[(0,J.jsx)(H,{startAddon:`$`,placeholder:`0.00`}),(0,J.jsx)(H,{"aria-label":`Weight in kilograms`,endAddon:`kg`,defaultValue:`2.4`}),(0,J.jsx)(H,{"aria-label":`Amount in USD`,startAddon:`$`,endAddon:`USD`,defaultValue:`49.00`})]})}function gn(){let[e,t]=(0,q.useState)(`Click the × to clear`);return(0,J.jsxs)(`div`,{className:`flex w-full max-w-sm flex-col gap-3`,children:[(0,J.jsx)(H,{clearable:!0,"aria-label":`Clearable value`,value:e,onChange:e=>t(e.target.value),onClear:()=>t(``)}),(0,J.jsx)(H,{"aria-label":`Loading value`,isLoading:!0,defaultValue:`Loading…`}),(0,J.jsx)(H,{"aria-label":`Invalid value`,invalid:!0,defaultValue:`Invalid value`})]})}function _n(){let[e,t]=(0,q.useState)(`A short bio`);return(0,J.jsx)(`div`,{className:`w-full max-w-sm`,children:(0,J.jsx)(H,{value:e,"aria-label":`Biography`,onChange:e=>t(e.target.value),maxLength:60,showCharacterCount:!0})})}function vn(){let[e,t]=(0,q.useState)(``);return(0,J.jsxs)(`div`,{className:`flex w-full max-w-md flex-col gap-3`,children:[(0,J.jsx)(K,{label:`Description`,hint:`Up to 200 characters.`,children:(0,J.jsx)(U,{value:e,onChange:e=>t(e.target.value),placeholder:`Write a description…`,maxLength:200,showCharacterCount:!0})}),(0,J.jsx)(K,{label:`Read-only field`,children:(0,J.jsx)(U,{defaultValue:`Read-only content the user cannot edit.`,disabled:!0,rows:2})}),(0,J.jsx)(K,{label:`Bio`,error:`Bio cannot be empty.`,required:!0,children:(0,J.jsx)(U,{invalid:!0,placeholder:`Tell us about yourself…`,rows:2})})]})}function yn(){return(0,J.jsxs)(`div`,{className:`flex w-full max-w-sm flex-col gap-3`,children:[(0,J.jsx)(K,{label:`Free-form decimal`,children:(0,J.jsx)(W,{defaultValue:`1234.56`,decimalPlaces:2})}),(0,J.jsx)(K,{label:`With steppers (1–100)`,children:(0,J.jsx)(`div`,{className:`w-44`,children:(0,J.jsx)(W,{defaultValue:`10`,step:1,min:0,max:100})})}),(0,J.jsx)(K,{label:`Allows negative`,children:(0,J.jsx)(W,{placeholder:`0.00`,decimalPlaces:2,allowNegative:!0})})]})}function bn(){return(0,J.jsxs)(`div`,{className:`flex w-full max-w-sm flex-col gap-3`,children:[(0,J.jsx)(K,{label:`Discount`,children:(0,J.jsx)(Xe,{defaultValue:`12.5`})}),(0,J.jsx)(K,{label:`Tax rate (whole-number steppers)`,children:(0,J.jsx)(`div`,{className:`w-44`,children:(0,J.jsx)(Xe,{defaultValue:`20`,decimalPlaces:0,step:5})})})]})}function xn(){return(0,J.jsx)(`div`,{className:`w-full max-w-sm`,children:(0,J.jsx)(rt,{defaultValue:`2450.00`,defaultCurrency:`USD`,currencies:[`USD`,`EUR`,`GBP`]})})}function Sn(){return(0,J.jsx)(`div`,{className:`w-full max-w-sm`,children:(0,J.jsx)(at,{defaultValue:`49.99`,defaultCurrency:`USD`})})}function Cn(){return(0,J.jsx)(`div`,{className:`w-full max-w-sm`,children:(0,J.jsx)(xe,{defaultValue:`2.4`,defaultUnit:`kg`})})}function wn(){return(0,J.jsx)(`div`,{className:`w-full max-w-md`,children:(0,J.jsx)(ht,{defaultValue:{width:`30`,height:`20`,depth:`10`},format:`object`,unit:`g`})})}function Tn(){return(0,J.jsx)(`div`,{className:`w-full max-w-sm`,children:(0,J.jsx)(le,{options:[{value:`paid`,label:`Paid`},{value:`pending`,label:`Pending`},{value:`overdue`,label:`Overdue`}],placeholder:`Pick a status…`,allowClear:!0})})}function En(){return(0,J.jsx)(`div`,{className:`w-full max-w-md`,children:(0,J.jsx)(ut,{options:[{value:`free`,label:`Free`,description:`Up to 3 projects, community support.`},{value:`pro`,label:`Pro`,description:`$12/mo — unlimited projects, email support.`},{value:`enterprise`,label:`Enterprise`,description:`Custom pricing, SAML SSO.`}],placeholder:`Choose a plan…`})})}function Dn(){return(0,J.jsx)(`div`,{className:`w-full max-w-sm`,children:(0,J.jsx)(K,{label:`Rounding mode`,children:(0,J.jsx)(st,{defaultValue:`half_up`,labels:{floor:`Round down (floor)`,half_up:`Round half up`,ceil:`Round up (ceil)`}})})})}function On(){let[e,t]=(0,q.useState)(!0);return(0,J.jsxs)(`div`,{className:`flex flex-col gap-3`,children:[(0,J.jsxs)(`label`,{className:`flex items-center gap-2 text-sm`,children:[(0,J.jsx)(G,{checked:e,onCheckedChange:e=>t(!!e.target.value)}),`Enable notifications`]}),(0,J.jsxs)(`label`,{className:`flex items-center gap-2 text-sm`,children:[(0,J.jsx)(G,{defaultChecked:!0,disabled:!0}),`Disabled (on)`]}),(0,J.jsxs)(`label`,{className:`flex items-center gap-2 text-sm`,children:[(0,J.jsx)(G,{invalid:!0}),`Invalid state`]})]})}function kn(){return(0,J.jsxs)(`div`,{className:`flex flex-col gap-3`,children:[(0,J.jsxs)(`label`,{className:`flex items-center gap-2 text-sm`,children:[(0,J.jsx)(ae,{defaultChecked:!0}),`I agree to the terms`]}),(0,J.jsxs)(`label`,{className:`flex items-center gap-2 text-sm`,children:[(0,J.jsx)(ae,{}),`Subscribe to the newsletter`]}),(0,J.jsxs)(`label`,{className:`flex items-center gap-2 text-sm`,children:[(0,J.jsx)(ae,{disabled:!0,defaultChecked:!0}),`Disabled (checked)`]})]})}function An(){return(0,J.jsxs)(`div`,{className:`flex w-full max-w-md flex-col gap-3`,children:[(0,J.jsx)(ue,{label:`Email digest`,description:`Receive a weekly summary every Monday.`,defaultValue:!0}),(0,J.jsx)(ue,{kind:`checkbox`,label:`Beta features`,description:`Opt in to in-progress experiments. May be unstable.`}),(0,J.jsx)(ue,{label:`Leading control`,controlPosition:`leading`,defaultValue:!0})]})}function jn(){return(0,J.jsxs)(`div`,{className:`flex w-full max-w-md flex-col gap-3`,children:[(0,J.jsx)(fe,{icon:b,label:`Two-factor authentication`,description:`Require a one-time code on every sign-in.`,defaultValue:!0}),(0,J.jsx)(fe,{icon:w,label:`Auto-deploy`,description:`Push to production on every merge to main.`})]})}function Mn(){let[e,t]=(0,q.useState)(`week`);return(0,J.jsx)(Yt,{name:`range`,value:e,onChange:t,options:[{value:`day`,label:`Day`},{value:`week`,label:`Week`},{value:`month`,label:`Month`},{value:`year`,label:`Year`}]})}function Nn(){return(0,J.jsx)(`div`,{className:`w-full max-w-md`,children:(0,J.jsx)($e,{name:`delivery`,defaultValue:`standard`,options:[{value:`standard`,label:`Standard`,description:`5–7 business days · Free`},{value:`express`,label:`Express`,description:`2–3 business days · $9.99`},{value:`overnight`,label:`Overnight`,description:`Next business day · $24.99`}]})})}function Pn(){return(0,J.jsx)(`div`,{className:`w-full max-w-2xl`,children:(0,J.jsx)(ge,{name:`plan`,defaultValue:`pro`,columns:3,options:[{value:`free`,label:`Free`,description:`3 projects`,icon:x},{value:`pro`,label:`Pro`,description:`Unlimited`,icon:w},{value:`team`,label:`Team`,description:`Workspaces`,icon:h}]})})}function Fn(){return(0,J.jsx)(`div`,{className:`w-full max-w-2xl`,children:(0,J.jsx)(_e,{name:`features`,defaultValue:[`analytics`],columns:3,options:[{value:`analytics`,label:`Analytics`,description:`Realtime dashboards`,icon:x},{value:`webhooks`,label:`Webhooks`,description:`Outbound events`,icon:w},{value:`sso`,label:`SSO`,description:`SAML & SCIM`,icon:b}]})})}function In(){let[e,t]=(0,q.useState)(void 0);return(0,J.jsxs)(`div`,{className:`flex w-full max-w-sm flex-col gap-2`,children:[(0,J.jsx)(xt,{value:e,onChange:t,placeholder:`Pick a date…`}),(0,J.jsxs)(`div`,{className:`text-xs text-muted-foreground`,children:[`value: `,e??`—`]})]})}function Ln(){let[e,t]=(0,q.useState)(`09:30:00`);return(0,J.jsxs)(`div`,{className:`flex w-full max-w-sm flex-col gap-2`,children:[(0,J.jsx)(Et,{value:e,onChange:t}),(0,J.jsxs)(`div`,{className:`text-xs text-muted-foreground`,children:[`value: `,e]})]})}function Rn(){let[e,t]=(0,q.useState)(40);return(0,J.jsxs)(`div`,{className:`flex w-full max-w-md flex-col gap-2`,children:[(0,J.jsx)(Qe,{value:e,onValueChange:t,min:0,max:100,step:5}),(0,J.jsxs)(`div`,{className:`text-xs text-muted-foreground`,children:[`value: `,e]})]})}function zn(){let[e,t]=(0,q.useState)([`design`,`systems`]);return(0,J.jsx)(`div`,{className:`w-full max-w-md`,children:(0,J.jsx)(de,{value:e,onChange:t,placeholder:`Add a tag…`,recommendations:[`typography`,`tokens`,`figma`,`a11y`]})})}function Bn(){let[e,t]=(0,q.useState)(`555 0100`);return(0,J.jsx)(`div`,{className:`w-full max-w-sm`,children:(0,J.jsx)(Ye,{"aria-label":`Phone number`,value:e,onChange:e=>t(e.target.value),defaultPrefix:`US`})})}function Vn(){return(0,J.jsx)(`div`,{className:`w-full max-w-md`,children:(0,J.jsx)(bt,{defaultValue:{lat:`37.7749`,lng:`-122.4194`},format:`object`})})}function Hn(){return(0,J.jsx)(re,{...ne({defaultValues:{tags:[`alpha`,`beta`]}}),children:(0,J.jsx)(`form`,{className:`w-full max-w-md`,children:(0,J.jsx)(Wt,{name:`tags`,placeholder:`Tag name`,addButtonText:`Add tag`})})})}function Un(){return(0,J.jsx)(re,{...ne({defaultValues:{contacts:[{name:`Sarah Smitha`,email:`sarah@example.com`}]}}),children:(0,J.jsx)(`form`,{className:`w-full max-w-2xl`,children:(0,J.jsx)(Kt,{name:`contacts`,fields:[{name:`name`,label:`Name`,placeholder:`Full name`},{name:`email`,label:`Email`,placeholder:`name@example.com`}]})})})}function Wn(){let[e,t]=(0,q.useState)({env:`production`,region:`eu-west-1`});return(0,J.jsx)(`div`,{className:`w-full max-w-2xl`,children:(0,J.jsx)(Ht,{value:e,onChange:t})})}function Gn(){return(0,J.jsx)(re,{...ne({defaultValues:{aliases:[`acme`,`acme-corp`]}}),children:(0,J.jsx)(`form`,{className:`w-full max-w-md`,children:(0,J.jsx)(Jt,{name:`aliases`,placeholder:`Add an alias…`})})})}function Kn(){return(0,J.jsx)(re,{...ne({defaultValues:{title:{en:`Welcome`,bg:`Добре дошли`}}}),children:(0,J.jsx)(`form`,{className:`w-full max-w-md`,children:(0,J.jsx)(Xt,{name:`title`,primaryLocale:`en`,secondaryLocale:`bg`,activeLocale:`primary`,placeholder:`Page title`})})})}function qn(){return(0,J.jsx)(re,{...ne({defaultValues:{seo:{en:{title:`About`,description:`About our company.`},bg:{title:`За нас`,description:`За нашата компания.`}}}}),children:(0,J.jsx)(`form`,{className:`w-full max-w-2xl`,children:(0,J.jsx)(Zt,{name:`seo`,primaryLocale:`en`,secondaryLocale:`bg`,activeLocale:`primary`,fields:[{name:`title`,label:`Title`},{name:`description`,label:`Description`,type:`textarea`}]})})})}function Jn(){return(0,J.jsx)(re,{...ne({defaultValues:{tags:{en:[`systems`,`design`],bg:[`системи`,`дизайн`]}}}),children:(0,J.jsx)(`form`,{className:`w-full max-w-md`,children:(0,J.jsx)($t,{name:`tags`,primaryLocale:`en`,secondaryLocale:`bg`,activeLocale:`primary`,placeholder:`Tag`})})})}function Yn(){return(0,J.jsx)(Ft,{defaultPreviewUrl:`https://api.dicebear.com/7.x/avataaars/svg?seed=sarah`})}function Xn(){return(0,J.jsx)(`div`,{className:`w-full max-w-md`,children:(0,J.jsx)(p,{accept:`image/*`,onDrop:()=>{}})})}function Zn(){let e=ne({defaultValues:{name:``,sku:``,price:``,currency:`USD`,description:``,category:``,published:!1}});return(0,J.jsxs)(`form`,{onSubmit:e.handleSubmit(()=>{}),className:`flex w-full max-w-xl flex-col gap-4 rounded-lg border border-border bg-card p-5`,children:[(0,J.jsx)(Re,{control:e.control,name:`name`,label:`Product name`,required:!0,rules:{required:!0},children:e=>(0,J.jsx)(H,{...e,placeholder:`Vintage leather wallet`})}),(0,J.jsxs)(`div`,{className:`grid grid-cols-1 gap-4 md:grid-cols-2`,children:[(0,J.jsx)(Re,{control:e.control,name:`sku`,label:`SKU`,hint:`Inventory keeping unit.`,children:e=>(0,J.jsx)(H,{...e,placeholder:`LW-0021`,startIcon:s})}),(0,J.jsx)(Re,{control:e.control,name:`price`,label:`Price`,required:!0,rules:{required:!0},children:e=>(0,J.jsx)(at,{value:e.value,onChange:t=>e.onChange(t.target.value),defaultCurrency:`USD`})})]}),(0,J.jsx)(Re,{control:e.control,name:`category`,label:`Category`,children:e=>(0,J.jsx)(le,{options:[{value:`apparel`,label:`Apparel`},{value:`accessories`,label:`Accessories`},{value:`home`,label:`Home & living`}],value:e.value,onChange:e.onChange,placeholder:`Choose a category…`})}),(0,J.jsx)(Re,{control:e.control,name:`description`,label:`Description`,children:e=>(0,J.jsx)(U,{...e,rows:3,placeholder:`What makes it special?`})}),(0,J.jsx)(Re,{control:e.control,name:`published`,label:`Visibility`,children:e=>(0,J.jsx)(ue,{label:`Published`,description:`Visible in the storefront.`,value:!!e.value,onChange:e.onChange})}),(0,J.jsxs)(`div`,{className:`flex justify-end gap-2 pt-2`,children:[(0,J.jsx)(l,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,children:`Cancel`}),(0,J.jsx)(l,{type:`submit`,variant:`primary`,children:`Save product`})]})]})}var Q=`import { useState } from 'react';
+import { useForm, FormProvider } from 'react-hook-form';
+import { Mail, Search, Lock, Star, Zap, Box, Globe, Shield } from 'lucide-react';
+
+import {
+	ControlledFormField,
+	DirtyStateBanner,
+	ErrorSummary,
+	FormActionsBar,
+	FormField,
+	FormSection,
+	SubmitStateButton,
+} from '@/components/base/forms';
+import {
+	Input,
+	Textarea,
+	Select,
+	Checkbox,
+	PasswordInput,
+	SlugField,
+	Switch,
+	SwitchCard,
+	ToggleField,
+	TagsInput,
+	PhoneInput,
+	PercentageInput,
+	SliderField,
+	CardCheckboxGroup,
+	CardRadioGroup,
+	ListRadioGroup,
+	PillRadioGroup,
+	CurrencyInput,
+	MoneyInput,
+	RoundingModeSelect,
+	RichSelect,
+	DimensionsInput,
+	WeightInput,
+	CoordinatesInput,
+	DateTimeInput,
+	TimePicker,
+	DecimalInput,
+	StringRepeater,
+	ObjectRepeater,
+	KeyValueEditor,
+	LocalizedStringField,
+	LocalizedObjectField,
+	LocalizedStringRepeater,
+	List,
+	AvatarUpload,
+	Dropzone,
+} from '@/components/base/forms/fields';
+import { Button } from '@/components/base/buttons';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// FormField wrapper
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function BasicField() {
+	const [value, setValue] = useState('');
+	return (
+		<FormField label="Full name" hint="As it appears on your ID" required>
+			<Input
+				value={value}
+				onChange={(e) => setValue(e.target.value)}
+				placeholder="Sarah Smitha"
+			/>
+		</FormField>
+	);
+}
+
+export function WithError() {
+	return (
+		<FormField label="Email" error="That doesn't look like a valid email." required>
+			<Input defaultValue="not-an-email" invalid />
+		</FormField>
+	);
+}
+
+export function WithHelperText() {
+	return (
+		<FormField label="API token" helperText="Stored encrypted at rest. Rotate every 90 days.">
+			<Input defaultValue="sk_live_••••••••••••" />
+		</FormField>
+	);
+}
+
+export function WorkflowChrome() {
+	return (
+		<div className="grid gap-3">
+			<FormSection
+				title="Publishing"
+				description="Section chrome, validation summary, dirty state, and submit state stay reusable across form libraries."
+				actions={<Button variant="secondary">Reset</Button>}
+			>
+				<div className="grid gap-3 sm:grid-cols-2">
+					<FormField label="Display title" required>
+						<Input defaultValue="Summer collection" />
+					</FormField>
+					<FormField label="Status">
+						<Select
+							defaultValue="draft"
+							options={[
+								{ value: 'draft', label: 'Draft' },
+								{ value: 'published', label: 'Published' },
+							]}
+						/>
+					</FormField>
+				</div>
+			</FormSection>
+			<ErrorSummary
+				title="Fix publishing errors"
+				description="Two fields need attention before this can publish."
+				errors={['Display title is required', 'Publish date must be in the future']}
+			/>
+			<DirtyStateBanner
+				title="Unsaved changes"
+				description="Save or discard before leaving this workflow."
+				actions={<Button variant="secondary">Discard</Button>}
+			/>
+			<FormActionsBar
+				leading={<span className="text-xs text-muted-foreground">Last saved 2 minutes ago</span>}
+				trailing={<SubmitStateButton isDirty>Save changes</SubmitStateButton>}
+			/>
+		</div>
+	);
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Text inputs
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function InputBasic() {
+	return (
+		<div className="flex w-full max-w-sm flex-col gap-3">
+			<Input placeholder="Type something…" />
+			<Input aria-label="Pre-filled value" defaultValue="Pre-filled value" />
+			<Input aria-label="Disabled example" disabled defaultValue="Disabled" />
+		</div>
+	);
+}
+
+export function InputWithIcons() {
+	return (
+		<div className="flex w-full max-w-sm flex-col gap-3">
+			<Input startIcon={Search} placeholder="Search orders…" />
+			<Input endIcon={Mail} placeholder="you@example.com" />
+			<PasswordInput aria-label="Password" startIcon={Lock} defaultValue="hunter2" />
+		</div>
+	);
+}
+
+export function PasswordInputExample() {
+	return (
+		<div className="w-full max-w-sm">
+			<FormField label="Password" hint="The reveal button is keyboard and screen-reader accessible.">
+				<PasswordInput placeholder="Enter password" autoComplete="current-password" />
+			</FormField>
+		</div>
+	);
+}
+
+export function SlugFieldExample() {
+	const [title, setTitle] = useState('Summer Collection: Salt & Pepper Set');
+
+	return (
+		<div className="grid w-full max-w-sm gap-3">
+			<FormField label="Title" hint="The slug below updates from this value.">
+				<Input value={title} onChange={(event) => setTitle(event.target.value)} />
+			</FormField>
+			<FormField label="Slug" hint="Read-only value submitted with the form.">
+				<SlugField
+					name="slug"
+					value={title}
+					startAddon="/"
+					aria-label="Generated slug"
+				/>
+			</FormField>
+		</div>
+	);
+}
+
+export function InputWithAddons() {
+	return (
+		<div className="flex w-full max-w-sm flex-col gap-3">
+			<Input startAddon="$" placeholder="0.00" />
+			<Input aria-label="Weight in kilograms" endAddon="kg" defaultValue="2.4" />
+			<Input aria-label="Amount in USD" startAddon="$" endAddon="USD" defaultValue="49.00" />
+		</div>
+	);
+}
+
+export function InputClearableLoading() {
+	const [val, setVal] = useState('Click the × to clear');
+	return (
+		<div className="flex w-full max-w-sm flex-col gap-3">
+			<Input
+				clearable
+				aria-label="Clearable value"
+				value={val}
+				onChange={(e) => setVal(e.target.value)}
+				onClear={() => setVal('')}
+			/>
+			<Input aria-label="Loading value" isLoading defaultValue="Loading…" />
+			<Input aria-label="Invalid value" invalid defaultValue="Invalid value" />
+		</div>
+	);
+}
+
+export function InputCharacterCount() {
+	const [val, setVal] = useState('A short bio');
+	return (
+		<div className="w-full max-w-sm">
+			<Input
+				value={val}
+				aria-label="Biography"
+				onChange={(e) => setVal(e.target.value)}
+				maxLength={60}
+				showCharacterCount
+			/>
+		</div>
+	);
+}
+
+export function TextareaExample() {
+	const [val, setVal] = useState('');
+	return (
+		<div className="flex w-full max-w-md flex-col gap-3">
+			<FormField label="Description" hint="Up to 200 characters.">
+				<Textarea
+					value={val}
+					onChange={(e) => setVal(e.target.value)}
+					placeholder="Write a description…"
+					maxLength={200}
+					showCharacterCount
+				/>
+			</FormField>
+			<FormField label="Read-only field">
+				<Textarea defaultValue="Read-only content the user cannot edit." disabled rows={2} />
+			</FormField>
+			<FormField label="Bio" error="Bio cannot be empty." required>
+				<Textarea invalid placeholder="Tell us about yourself…" rows={2} />
+			</FormField>
+		</div>
+	);
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Numeric inputs
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function DecimalInputExample() {
+	return (
+		<div className="flex w-full max-w-sm flex-col gap-3">
+			<FormField label="Free-form decimal">
+				<DecimalInput defaultValue="1234.56" decimalPlaces={2} />
+			</FormField>
+			<FormField label="With steppers (1–100)">
+				<div className="w-44">
+					<DecimalInput defaultValue="10" step={1} min={0} max={100} />
+				</div>
+			</FormField>
+			<FormField label="Allows negative">
+				<DecimalInput placeholder="0.00" decimalPlaces={2} allowNegative />
+			</FormField>
+		</div>
+	);
+}
+
+export function PercentageInputExample() {
+	return (
+		<div className="flex w-full max-w-sm flex-col gap-3">
+			<FormField label="Discount">
+				<PercentageInput defaultValue="12.5" />
+			</FormField>
+			<FormField label="Tax rate (whole-number steppers)">
+				<div className="w-44">
+					<PercentageInput defaultValue="20" decimalPlaces={0} step={5} />
+				</div>
+			</FormField>
+		</div>
+	);
+}
+
+export function CurrencyInputExample() {
+	return (
+		<div className="w-full max-w-sm">
+			<CurrencyInput
+				defaultValue="2450.00"
+				defaultCurrency="USD"
+				currencies={['USD', 'EUR', 'GBP']}
+			/>
+		</div>
+	);
+}
+
+export function MoneyInputExample() {
+	return (
+		<div className="w-full max-w-sm">
+			<MoneyInput defaultValue="49.99" defaultCurrency="USD" />
+		</div>
+	);
+}
+
+export function WeightInputExample() {
+	return (
+		<div className="w-full max-w-sm">
+			<WeightInput defaultValue="2.4" defaultUnit="kg" />
+		</div>
+	);
+}
+
+export function DimensionsInputExample() {
+	return (
+		<div className="w-full max-w-md">
+			<DimensionsInput defaultValue={{ width: '30', height: '20', depth: '10' }} format="object" unit="g" />
+		</div>
+	);
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Selects
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function SelectExample() {
+	return (
+		<div className="w-full max-w-sm">
+			<Select
+				options={[
+					{ value: 'paid', label: 'Paid' },
+					{ value: 'pending', label: 'Pending' },
+					{ value: 'overdue', label: 'Overdue' },
+				]}
+				placeholder="Pick a status…"
+				allowClear
+			/>
+		</div>
+	);
+}
+
+export function RichSelectExample() {
+	return (
+		<div className="w-full max-w-md">
+			<RichSelect
+				options={[
+					{ value: 'free', label: 'Free', description: 'Up to 3 projects, community support.' },
+					{ value: 'pro', label: 'Pro', description: '$12/mo — unlimited projects, email support.' },
+					{ value: 'enterprise', label: 'Enterprise', description: 'Custom pricing, SAML SSO.' },
+				]}
+				placeholder="Choose a plan…"
+			/>
+		</div>
+	);
+}
+
+export function RoundingModeSelectExample() {
+	return (
+		<div className="w-full max-w-sm">
+			<FormField label="Rounding mode">
+				<RoundingModeSelect
+					defaultValue="half_up"
+					labels={{ floor: 'Round down (floor)', half_up: 'Round half up', ceil: 'Round up (ceil)' }}
+				/>
+			</FormField>
+		</div>
+	);
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Toggles & checkboxes
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function SwitchExample() {
+	const [on, setOn] = useState(true);
+	return (
+		<div className="flex flex-col gap-3">
+			<label className="flex items-center gap-2 text-sm">
+				<Switch checked={on} onCheckedChange={(e) => setOn(Boolean(e.target.value))} />
+				Enable notifications
+			</label>
+			<label className="flex items-center gap-2 text-sm">
+				<Switch defaultChecked disabled />
+				Disabled (on)
+			</label>
+			<label className="flex items-center gap-2 text-sm">
+				<Switch invalid />
+				Invalid state
+			</label>
+		</div>
+	);
+}
+
+export function CheckboxExample() {
+	return (
+		<div className="flex flex-col gap-3">
+			<label className="flex items-center gap-2 text-sm">
+				<Checkbox defaultChecked />
+				I agree to the terms
+			</label>
+			<label className="flex items-center gap-2 text-sm">
+				<Checkbox />
+				Subscribe to the newsletter
+			</label>
+			<label className="flex items-center gap-2 text-sm">
+				<Checkbox disabled defaultChecked />
+				Disabled (checked)
+			</label>
+		</div>
+	);
+}
+
+export function ToggleFieldExample() {
+	return (
+		<div className="flex w-full max-w-md flex-col gap-3">
+			<ToggleField label="Email digest" description="Receive a weekly summary every Monday." defaultValue />
+			<ToggleField
+				kind="checkbox"
+				label="Beta features"
+				description="Opt in to in-progress experiments. May be unstable."
+			/>
+			<ToggleField label="Leading control" controlPosition="leading" defaultValue />
+		</div>
+	);
+}
+
+export function SwitchCardExample() {
+	return (
+		<div className="flex w-full max-w-md flex-col gap-3">
+			<SwitchCard
+				icon={Shield}
+				label="Two-factor authentication"
+				description="Require a one-time code on every sign-in."
+				defaultValue
+			/>
+			<SwitchCard
+				icon={Zap}
+				label="Auto-deploy"
+				description="Push to production on every merge to main."
+			/>
+		</div>
+	);
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Choice groups
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function PillRadioGroupExample() {
+	const [val, setVal] = useState<string | null>('week');
+	return (
+		<PillRadioGroup
+			name="range"
+			value={val}
+			onChange={setVal}
+			options={[
+				{ value: 'day', label: 'Day' },
+				{ value: 'week', label: 'Week' },
+				{ value: 'month', label: 'Month' },
+				{ value: 'year', label: 'Year' },
+			]}
+		/>
+	);
+}
+
+export function ListRadioGroupExample() {
+	return (
+		<div className="w-full max-w-md">
+			<ListRadioGroup
+				name="delivery"
+				defaultValue="standard"
+				options={[
+					{ value: 'standard', label: 'Standard', description: '5–7 business days · Free' },
+					{ value: 'express', label: 'Express', description: '2–3 business days · $9.99' },
+					{ value: 'overnight', label: 'Overnight', description: 'Next business day · $24.99' },
+				]}
+			/>
+		</div>
+	);
+}
+
+export function CardRadioGroupExample() {
+	return (
+		<div className="w-full max-w-2xl">
+			<CardRadioGroup
+				name="plan"
+				defaultValue="pro"
+				columns={3}
+				options={[
+					{ value: 'free', label: 'Free', description: '3 projects', icon: Star },
+					{ value: 'pro', label: 'Pro', description: 'Unlimited', icon: Zap },
+					{ value: 'team', label: 'Team', description: 'Workspaces', icon: Globe },
+				]}
+			/>
+		</div>
+	);
+}
+
+export function CardCheckboxGroupExample() {
+	return (
+		<div className="w-full max-w-2xl">
+			<CardCheckboxGroup
+				name="features"
+				defaultValue={['analytics']}
+				columns={3}
+				options={[
+					{ value: 'analytics', label: 'Analytics', description: 'Realtime dashboards', icon: Star },
+					{ value: 'webhooks', label: 'Webhooks', description: 'Outbound events', icon: Zap },
+					{ value: 'sso', label: 'SSO', description: 'SAML & SCIM', icon: Shield },
+				]}
+			/>
+		</div>
+	);
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Date & time
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function DateTimeInputExample() {
+	const [val, setVal] = useState<string | undefined>(undefined);
+	return (
+		<div className="flex w-full max-w-sm flex-col gap-2">
+			<DateTimeInput value={val} onChange={setVal} placeholder="Pick a date…" />
+			<div className="text-xs text-muted-foreground">value: {val ?? '—'}</div>
+		</div>
+	);
+}
+
+export function TimePickerExample() {
+	const [val, setVal] = useState('09:30:00');
+	return (
+		<div className="flex w-full max-w-sm flex-col gap-2">
+			<TimePicker value={val} onChange={setVal} />
+			<div className="text-xs text-muted-foreground">value: {val}</div>
+		</div>
+	);
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Other inputs
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function SliderExample() {
+	const [val, setVal] = useState(40);
+	return (
+		<div className="flex w-full max-w-md flex-col gap-2">
+			<SliderField value={val} onValueChange={setVal} min={0} max={100} step={5} />
+			<div className="text-xs text-muted-foreground">value: {val}</div>
+		</div>
+	);
+}
+
+export function TagsInputExample() {
+	const [tags, setTags] = useState<string[]>(['design', 'systems']);
+	return (
+		<div className="w-full max-w-md">
+			<TagsInput
+				value={tags}
+				onChange={setTags}
+				placeholder="Add a tag…"
+				recommendations={['typography', 'tokens', 'figma', 'a11y']}
+			/>
+		</div>
+	);
+}
+
+export function PhoneInputExample() {
+	const [val, setVal] = useState('555 0100');
+	return (
+		<div className="w-full max-w-sm">
+			<PhoneInput
+				aria-label="Phone number"
+				value={val}
+				onChange={(e) => setVal(e.target.value)}
+				defaultPrefix="US"
+			/>
+		</div>
+	);
+}
+
+export function CoordinatesInputExample() {
+	return (
+		<div className="w-full max-w-md">
+			<CoordinatesInput
+				defaultValue={{ lat: '37.7749', lng: '-122.4194' }}
+				format="object"
+			/>
+		</div>
+	);
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Repeaters (RHF-coupled)
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function StringRepeaterExample() {
+	const form = useForm({ defaultValues: { tags: ['alpha', 'beta'] } });
+	return (
+		<FormProvider {...form}>
+			<form className="w-full max-w-md">
+				<StringRepeater name="tags" placeholder="Tag name" addButtonText="Add tag" />
+			</form>
+		</FormProvider>
+	);
+}
+
+export function ObjectRepeaterExample() {
+	const form = useForm({
+		defaultValues: {
+			contacts: [
+				{ name: 'Sarah Smitha', email: 'sarah@example.com' },
+			],
+		},
+	});
+	return (
+		<FormProvider {...form}>
+			<form className="w-full max-w-2xl">
+				<ObjectRepeater
+					name="contacts"
+					fields={[
+						{ name: 'name', label: 'Name', placeholder: 'Full name' },
+						{ name: 'email', label: 'Email', placeholder: 'name@example.com' },
+					]}
+				/>
+			</form>
+		</FormProvider>
+	);
+}
+
+export function KeyValueEditorExample() {
+	const [val, setVal] = useState<Record<string, string>>({ env: 'production', region: 'eu-west-1' });
+	return (
+		<div className="w-full max-w-2xl">
+			<KeyValueEditor value={val} onChange={setVal} />
+		</div>
+	);
+}
+
+export function ListExample() {
+	const form = useForm({ defaultValues: { aliases: ['acme', 'acme-corp'] } });
+	return (
+		<FormProvider {...form}>
+			<form className="w-full max-w-md">
+				<List name="aliases" placeholder="Add an alias…" />
+			</form>
+		</FormProvider>
+	);
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Localized fields (RHF-coupled)
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function LocalizedStringFieldExample() {
+	const form = useForm({ defaultValues: { title: { en: 'Welcome', bg: 'Добре дошли' } } });
+	return (
+		<FormProvider {...form}>
+			<form className="w-full max-w-md">
+				<LocalizedStringField
+					name="title"
+					primaryLocale="en"
+					secondaryLocale="bg"
+					activeLocale="primary"
+					placeholder="Page title"
+				/>
+			</form>
+		</FormProvider>
+	);
+}
+
+export function LocalizedObjectFieldExample() {
+	const form = useForm({
+		defaultValues: {
+			seo: {
+				en: { title: 'About', description: 'About our company.' },
+				bg: { title: 'За нас', description: 'За нашата компания.' },
+			},
+		},
+	});
+	return (
+		<FormProvider {...form}>
+			<form className="w-full max-w-2xl">
+				<LocalizedObjectField
+					name="seo"
+					primaryLocale="en"
+					secondaryLocale="bg"
+					activeLocale="primary"
+					fields={[
+						{ name: 'title', label: 'Title' },
+						{ name: 'description', label: 'Description', type: 'textarea' },
+					]}
+				/>
+			</form>
+		</FormProvider>
+	);
+}
+
+export function LocalizedStringRepeaterExample() {
+	const form = useForm({
+		defaultValues: { tags: { en: ['systems', 'design'], bg: ['системи', 'дизайн'] } },
+	});
+	return (
+		<FormProvider {...form}>
+			<form className="w-full max-w-md">
+				<LocalizedStringRepeater
+					name="tags"
+					primaryLocale="en"
+					secondaryLocale="bg"
+					activeLocale="primary"
+					placeholder="Tag"
+				/>
+			</form>
+		</FormProvider>
+	);
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Uploads (focused field-shapes — full upload subsystem lives in \`base/upload-tray\`)
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function AvatarUploadExample() {
+	return (
+		<AvatarUpload defaultPreviewUrl="https://api.dicebear.com/7.x/avataaars/svg?seed=sarah" />
+	);
+}
+
+export function DropzoneExample() {
+	return (
+		<div className="w-full max-w-md">
+			<Dropzone accept="image/*" onDrop={() => {}} />
+		</div>
+	);
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Whole form — react-hook-form + ControlledFormField
+// ─────────────────────────────────────────────────────────────────────────────
+
+type ProductFormValues = {
+	name: string;
+	sku: string;
+	price: string;
+	currency: string;
+	description: string;
+	category: string;
+	published: boolean;
+};
+
+export function WholeForm() {
+	const form = useForm<ProductFormValues>({
+		defaultValues: {
+			name: '',
+			sku: '',
+			price: '',
+			currency: 'USD',
+			description: '',
+			category: '',
+			published: false,
+		},
+	});
+
+	const onSubmit = form.handleSubmit(() => {
+		// no-op for showcase
+	});
+
+	return (
+		<form
+			onSubmit={onSubmit}
+			className="flex w-full max-w-xl flex-col gap-4 rounded-lg border border-border bg-card p-5"
+		>
+			<ControlledFormField
+				control={form.control}
+				name="name"
+				label="Product name"
+				required
+				rules={{ required: true }}
+			>
+				{(field) => <Input {...field} placeholder="Vintage leather wallet" />}
+			</ControlledFormField>
+
+			<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+				<ControlledFormField
+					control={form.control}
+					name="sku"
+					label="SKU"
+					hint="Inventory keeping unit."
+				>
+					{(field) => <Input {...field} placeholder="LW-0021" startIcon={Box} />}
+				</ControlledFormField>
+
+				<ControlledFormField
+					control={form.control}
+					name="price"
+					label="Price"
+					required
+					rules={{ required: true }}
+				>
+					{(field) => (
+						<MoneyInput
+							value={field.value}
+							onChange={(e) => field.onChange(e.target.value)}
+							defaultCurrency="USD"
+						/>
+					)}
+				</ControlledFormField>
+			</div>
+
+			<ControlledFormField
+				control={form.control}
+				name="category"
+				label="Category"
+			>
+				{(field) => (
+					<Select
+						options={[
+							{ value: 'apparel', label: 'Apparel' },
+							{ value: 'accessories', label: 'Accessories' },
+							{ value: 'home', label: 'Home & living' },
+						]}
+						value={field.value}
+						onChange={field.onChange}
+						placeholder="Choose a category…"
+					/>
+				)}
+			</ControlledFormField>
+
+			<ControlledFormField
+				control={form.control}
+				name="description"
+				label="Description"
+			>
+				{(field) => <Textarea {...field} rows={3} placeholder="What makes it special?" />}
+			</ControlledFormField>
+
+			<ControlledFormField
+				control={form.control}
+				name="published"
+				label="Visibility"
+			>
+				{(field) => (
+					<ToggleField
+						label="Published"
+						description="Visible in the storefront."
+						value={Boolean(field.value)}
+						onChange={field.onChange}
+					/>
+				)}
+			</ControlledFormField>
+
+			<div className="flex justify-end gap-2 pt-2">
+				<Button type="button" variant="secondary" buttonStyle="ghost">Cancel</Button>
+				<Button type="submit" variant="primary">Save product</Button>
+			</div>
+		</form>
+	);
+}
+`;function Qn(e){let t={a:`a`,code:`code`,h4:`h4`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...e.components};return on||$(`Examples`,!1),Yn||$(`Examples.AvatarUploadExample`,!0),sn||$(`Examples.BasicField`,!0),Fn||$(`Examples.CardCheckboxGroupExample`,!0),Pn||$(`Examples.CardRadioGroupExample`,!0),kn||$(`Examples.CheckboxExample`,!0),Vn||$(`Examples.CoordinatesInputExample`,!0),xn||$(`Examples.CurrencyInputExample`,!0),In||$(`Examples.DateTimeInputExample`,!0),yn||$(`Examples.DecimalInputExample`,!0),wn||$(`Examples.DimensionsInputExample`,!0),Xn||$(`Examples.DropzoneExample`,!0),dn||$(`Examples.InputBasic`,!0),_n||$(`Examples.InputCharacterCount`,!0),gn||$(`Examples.InputClearableLoading`,!0),hn||$(`Examples.InputWithAddons`,!0),fn||$(`Examples.InputWithIcons`,!0),Wn||$(`Examples.KeyValueEditorExample`,!0),Gn||$(`Examples.ListExample`,!0),Nn||$(`Examples.ListRadioGroupExample`,!0),qn||$(`Examples.LocalizedObjectFieldExample`,!0),Kn||$(`Examples.LocalizedStringFieldExample`,!0),Jn||$(`Examples.LocalizedStringRepeaterExample`,!0),Sn||$(`Examples.MoneyInputExample`,!0),Un||$(`Examples.ObjectRepeaterExample`,!0),pn||$(`Examples.PasswordInputExample`,!0),bn||$(`Examples.PercentageInputExample`,!0),Bn||$(`Examples.PhoneInputExample`,!0),Mn||$(`Examples.PillRadioGroupExample`,!0),En||$(`Examples.RichSelectExample`,!0),Dn||$(`Examples.RoundingModeSelectExample`,!0),Tn||$(`Examples.SelectExample`,!0),Rn||$(`Examples.SliderExample`,!0),mn||$(`Examples.SlugFieldExample`,!0),Hn||$(`Examples.StringRepeaterExample`,!0),jn||$(`Examples.SwitchCardExample`,!0),On||$(`Examples.SwitchExample`,!0),zn||$(`Examples.TagsInputExample`,!0),vn||$(`Examples.TextareaExample`,!0),Ln||$(`Examples.TimePickerExample`,!0),An||$(`Examples.ToggleFieldExample`,!0),Cn||$(`Examples.WeightInputExample`,!0),Zn||$(`Examples.WholeForm`,!0),cn||$(`Examples.WithError`,!0),ln||$(`Examples.WithHelperText`,!0),un||$(`Examples.WorkflowChrome`,!0),(0,J.jsxs)(r,{title:`Forms`,description:`The full form scope — FormField wrapper plus every field component exported from base/forms/fields: text inputs, numeric, selects, toggles, choice groups, date/time, repeaters, localized fields, and uploads.`,layer:`base`,status:`ready`,sourcePath:`src/components/base/forms`,children:[(0,J.jsxs)(a,{title:`Overview`,id:`overview`,children:[(0,J.jsxs)(t.p,{children:[`The `,(0,J.jsx)(t.code,{children:`forms/`}),` folder ships the canonical form-row wrapper (`,(0,J.jsx)(t.code,{children:`FormField`}),` /
+`,(0,J.jsx)(t.code,{children:`ControlledFormField`}),`) plus every input primitive — `,(0,J.jsx)(t.code,{children:`Input`}),`, `,(0,J.jsx)(t.code,{children:`Textarea`}),`,
+`,(0,J.jsx)(t.code,{children:`Select`}),`, numeric/money/dimension/weight inputs, choice groups, date & time
+pickers, sliders, tag/phone/coordinates inputs, three repeater families, and
+the localized field set. Most fields are framework-free and accept
+value/onChange directly. The repeater and localized-* families opt into
+`,(0,J.jsx)(t.code,{children:`react-hook-form`}),` — that coupling is intentional and contained to those files.`]}),(0,J.jsxs)(t.p,{children:[`Pair any field with `,(0,J.jsx)(t.code,{children:`FormField`}),` (or `,(0,J.jsx)(t.code,{children:`ControlledFormField`}),` for RHF) to inherit
+the standard label / required asterisk / error / hint rhythm. Pass `,(0,J.jsx)(t.code,{children:`invalid`}),`
+to the inner field to flip the destructive border + ring.`]}),(0,J.jsxs)(t.p,{children:[`Control height, padding, icon offsets, clear-button size, textarea minimums,
+and action-bar rhythm are tokenized through `,(0,J.jsx)(t.code,{children:`--control-*`}),`, `,(0,J.jsx)(t.code,{children:`--row-*`}),`,
+`,(0,J.jsx)(t.code,{children:`--surface-*`}),`, and the shared `,(0,J.jsx)(t.code,{children:`--space-*`}),` scale. Prefer CSS variables or
+`,(0,J.jsx)(t.code,{children:`UIProvider.forms.defaultControlSize`}),` for global density changes instead of
+pinning `,(0,J.jsx)(t.code,{children:`size`}),` props at every form field.`]})]}),(0,J.jsxs)(a,{title:`FormField wrapper`,id:`form-field`,children:[(0,J.jsx)(u,{name:`BasicField`,source:Q,children:(0,J.jsx)(sn,{})}),(0,J.jsx)(u,{name:`WithError`,source:Q,children:(0,J.jsx)(cn,{})}),(0,J.jsx)(u,{name:`WithHelperText`,source:Q,children:(0,J.jsx)(ln,{})}),(0,J.jsx)(u,{name:`WorkflowChrome`,source:Q,children:(0,J.jsx)(un,{})})]}),(0,J.jsxs)(a,{title:`Consumer usage`,id:`usage`,children:[(0,J.jsx)(t.p,{children:`Consumers import the form row wrappers and field primitives from the exact
+package entrypoint:`}),(0,J.jsx)(t.pre,{children:(0,J.jsx)(t.code,{className:`language-tsx`,children:`import {
+	ControlledFormField,
+	FormField,
+	Input,
+	MoneyInput,
+	Select,
+	Textarea,
+	ToggleField,
+} from 'admin-ui-starter-kit/base/forms';
+`})}),(0,J.jsxs)(t.p,{children:[`Use `,(0,J.jsx)(t.code,{children:`FormField`}),` for presentational rows and custom controlled widgets. Use
+`,(0,J.jsx)(t.code,{children:`ControlledFormField`}),` when a field is bound to `,(0,J.jsx)(t.code,{children:`react-hook-form`}),`; its children
+render-prop receives `,(0,J.jsx)(t.code,{children:`(field, error, invalid, fieldState)`}),`. The wrapper already
+renders the merged backend / validation error message, so pass
+`,(0,J.jsx)(t.code,{children:`invalid={invalid}`}),` to the inner field and avoid duplicating error text inside
+the control.`]}),(0,J.jsxs)(t.p,{children:[`Searchable selects live in `,(0,J.jsx)(t.code,{children:`admin-ui-starter-kit/base/combobox`}),`, but they still
+belong inside `,(0,J.jsx)(t.code,{children:`ControlledFormField`}),` when used in forms.`]})]}),(0,J.jsxs)(a,{title:`Choosing field primitives`,id:`choosing`,children:[(0,J.jsxs)(t.ul,{children:[`
+`,(0,J.jsxs)(t.li,{children:[`Use `,(0,J.jsx)(t.code,{children:`Input`}),` and `,(0,J.jsx)(t.code,{children:`Textarea`}),` for ordinary text entry.`]}),`
+`,(0,J.jsxs)(t.li,{children:[`Use `,(0,J.jsx)(t.code,{children:`PasswordInput`}),` for password fields that need a show/hide visibility
+control; it keeps the icon button, aria labels, and input sizing consistent.`]}),`
+`,(0,J.jsxs)(t.li,{children:[`Use `,(0,J.jsx)(t.code,{children:`SlugField`}),` for generated read-only slugs derived from another form
+value. It renders the package `,(0,J.jsx)(t.code,{children:`Input`}),` as read-only and submits the slug value
+when a `,(0,J.jsx)(t.code,{children:`name`}),` is provided.`]}),`
+`,(0,J.jsxs)(t.li,{children:[`Use `,(0,J.jsx)(t.code,{children:`DecimalInput`}),`, `,(0,J.jsx)(t.code,{children:`PercentageInput`}),`, `,(0,J.jsx)(t.code,{children:`MoneyInput`}),`, `,(0,J.jsx)(t.code,{children:`CurrencyInput`}),`,
+`,(0,J.jsx)(t.code,{children:`WeightInput`}),`, and `,(0,J.jsx)(t.code,{children:`DimensionsInput`}),` when the value has numeric semantics.`]}),`
+`,(0,J.jsxs)(t.li,{children:[`Use `,(0,J.jsx)(t.code,{children:`Select`}),` or `,(0,J.jsx)(t.code,{children:`RichSelect`}),` for finite option sets; use
+`,(0,J.jsx)(t.code,{children:`EnhancedCombobox`}),` when options are searchable, async, grouped, or creatable.`]}),`
+`,(0,J.jsxs)(t.li,{children:[`Use `,(0,J.jsx)(t.code,{children:`Switch`}),`, `,(0,J.jsx)(t.code,{children:`Checkbox`}),`, `,(0,J.jsx)(t.code,{children:`ToggleField`}),`, and `,(0,J.jsx)(t.code,{children:`SwitchCard`}),` for boolean state.`]}),`
+`,(0,J.jsxs)(t.li,{children:[`Use `,(0,J.jsx)(t.code,{children:`PillRadioGroup`}),`, `,(0,J.jsx)(t.code,{children:`ListRadioGroup`}),`, `,(0,J.jsx)(t.code,{children:`CardRadioGroup`}),`, and
+`,(0,J.jsx)(t.code,{children:`CardCheckboxGroup`}),` when options need richer scanning affordances.`]}),`
+`,(0,J.jsxs)(t.li,{children:[`Use `,(0,J.jsx)(t.code,{children:`DateTimeInput`}),`, `,(0,J.jsx)(t.code,{children:`TimePicker`}),`, `,(0,J.jsx)(t.code,{children:`TagsInput`}),`, `,(0,J.jsx)(t.code,{children:`PhoneInput`}),`, and
+`,(0,J.jsx)(t.code,{children:`CoordinatesInput`}),` for domain-specific values instead of reassembling those
+behaviours from generic inputs.`]}),`
+`,(0,J.jsxs)(t.li,{children:[`Use the repeater and localized-field families only when the form already uses
+`,(0,J.jsx)(t.code,{children:`react-hook-form`}),`; they intentionally bind to RHF because they manage nested
+arrays and locale-keyed objects.`]}),`
+`]}),(0,J.jsxs)(t.p,{children:[`Do not use `,(0,J.jsx)(t.code,{children:`Item`}),` for form controls. `,(0,J.jsx)(t.code,{children:`Item`}),` is for display/action rows;
+`,(0,J.jsx)(t.code,{children:`FormField`}),` is the canonical label + control + hint/error row.`]})]}),(0,J.jsxs)(a,{title:`Text inputs`,id:`text-inputs`,children:[(0,J.jsx)(u,{name:`InputBasic`,source:Q,children:(0,J.jsx)(dn,{})}),(0,J.jsx)(u,{name:`InputWithIcons`,source:Q,children:(0,J.jsx)(fn,{})}),(0,J.jsx)(u,{name:`PasswordInputExample`,source:Q,children:(0,J.jsx)(pn,{})}),(0,J.jsx)(u,{name:`SlugFieldExample`,source:Q,children:(0,J.jsx)(mn,{})}),(0,J.jsx)(u,{name:`InputWithAddons`,source:Q,children:(0,J.jsx)(hn,{})}),(0,J.jsx)(u,{name:`InputClearableLoading`,source:Q,children:(0,J.jsx)(gn,{})}),(0,J.jsx)(u,{name:`InputCharacterCount`,source:Q,children:(0,J.jsx)(_n,{})}),(0,J.jsx)(u,{name:`TextareaExample`,source:Q,children:(0,J.jsx)(vn,{})})]}),(0,J.jsxs)(a,{title:`Numeric inputs`,id:`numeric`,children:[(0,J.jsx)(u,{name:`DecimalInputExample`,source:Q,children:(0,J.jsx)(yn,{})}),(0,J.jsx)(u,{name:`PercentageInputExample`,source:Q,children:(0,J.jsx)(bn,{})}),(0,J.jsx)(u,{name:`CurrencyInputExample`,source:Q,children:(0,J.jsx)(xn,{})}),(0,J.jsx)(u,{name:`MoneyInputExample`,source:Q,children:(0,J.jsx)(Sn,{})}),(0,J.jsx)(u,{name:`WeightInputExample`,source:Q,children:(0,J.jsx)(Cn,{})}),(0,J.jsx)(u,{name:`DimensionsInputExample`,source:Q,children:(0,J.jsx)(wn,{})})]}),(0,J.jsxs)(a,{title:`Selects`,id:`selects`,children:[(0,J.jsx)(u,{name:`SelectExample`,source:Q,children:(0,J.jsx)(Tn,{})}),(0,J.jsx)(u,{name:`RichSelectExample`,source:Q,children:(0,J.jsx)(En,{})}),(0,J.jsx)(u,{name:`RoundingModeSelectExample`,source:Q,children:(0,J.jsx)(Dn,{})})]}),(0,J.jsxs)(a,{title:`Toggles & checkboxes`,id:`toggles`,children:[(0,J.jsx)(u,{name:`SwitchExample`,source:Q,children:(0,J.jsx)(On,{})}),(0,J.jsx)(u,{name:`CheckboxExample`,source:Q,children:(0,J.jsx)(kn,{})}),(0,J.jsx)(u,{name:`ToggleFieldExample`,source:Q,children:(0,J.jsx)(An,{})}),(0,J.jsx)(u,{name:`SwitchCardExample`,source:Q,children:(0,J.jsx)(jn,{})})]}),(0,J.jsxs)(a,{title:`Choice groups`,id:`choice-groups`,children:[(0,J.jsx)(u,{name:`PillRadioGroupExample`,source:Q,children:(0,J.jsx)(Mn,{})}),(0,J.jsx)(u,{name:`ListRadioGroupExample`,source:Q,children:(0,J.jsx)(Nn,{})}),(0,J.jsx)(u,{name:`CardRadioGroupExample`,source:Q,children:(0,J.jsx)(Pn,{})}),(0,J.jsx)(u,{name:`CardCheckboxGroupExample`,source:Q,children:(0,J.jsx)(Fn,{})})]}),(0,J.jsxs)(a,{title:`Date & time`,id:`date-time`,children:[(0,J.jsx)(u,{name:`DateTimeInputExample`,source:Q,children:(0,J.jsx)(In,{})}),(0,J.jsx)(u,{name:`TimePickerExample`,source:Q,children:(0,J.jsx)(Ln,{})})]}),(0,J.jsxs)(a,{title:`Other inputs`,id:`other`,children:[(0,J.jsx)(u,{name:`SliderExample`,source:Q,children:(0,J.jsx)(Rn,{})}),(0,J.jsx)(u,{name:`TagsInputExample`,source:Q,children:(0,J.jsx)(zn,{})}),(0,J.jsx)(u,{name:`PhoneInputExample`,source:Q,children:(0,J.jsx)(Bn,{})}),(0,J.jsx)(u,{name:`CoordinatesInputExample`,source:Q,children:(0,J.jsx)(Vn,{})})]}),(0,J.jsxs)(a,{title:`Repeaters`,id:`repeaters`,children:[(0,J.jsxs)(t.p,{children:[`These four primitives — `,(0,J.jsx)(t.code,{children:`StringRepeater`}),`, `,(0,J.jsx)(t.code,{children:`ObjectRepeater`}),`, `,(0,J.jsx)(t.code,{children:`KeyValueEditor`}),`,
+and `,(0,J.jsx)(t.code,{children:`List`}),` — share the underlying `,(0,J.jsx)(t.code,{children:`<Repeater>`}),` primitive (drag-to-reorder,
+add/remove, empty state). They are the only fields here that hard-couple to
+react-hook-form.`]}),(0,J.jsx)(u,{name:`StringRepeaterExample`,source:Q,children:(0,J.jsx)(Hn,{})}),(0,J.jsx)(u,{name:`ObjectRepeaterExample`,source:Q,children:(0,J.jsx)(Un,{})}),(0,J.jsx)(u,{name:`KeyValueEditorExample`,source:Q,children:(0,J.jsx)(Wn,{})}),(0,J.jsx)(u,{name:`ListExample`,source:Q,children:(0,J.jsx)(Gn,{})})]}),(0,J.jsxs)(a,{title:`Localized fields`,id:`localized`,children:[(0,J.jsxs)(t.p,{children:[`The localized field family edits per-locale objects (e.g. `,(0,J.jsx)(t.code,{children:`{ en: '…', bg: '…' }`}),`)
+with a single field surface. Pass `,(0,J.jsx)(t.code,{children:`primaryLocale`}),` / `,(0,J.jsx)(t.code,{children:`secondaryLocale`}),` and the
+currently `,(0,J.jsx)(t.code,{children:`activeLocale`}),`. RHF-coupled.`]}),(0,J.jsx)(u,{name:`LocalizedStringFieldExample`,source:Q,children:(0,J.jsx)(Kn,{})}),(0,J.jsx)(u,{name:`LocalizedObjectFieldExample`,source:Q,children:(0,J.jsx)(qn,{})}),(0,J.jsx)(u,{name:`LocalizedStringRepeaterExample`,source:Q,children:(0,J.jsx)(Jn,{})})]}),(0,J.jsxs)(a,{title:`Uploads`,id:`uploads`,children:[(0,J.jsxs)(t.p,{children:[`The full upload subsystem (`,(0,J.jsx)(t.code,{children:`UploadTray`}),`, `,(0,J.jsx)(t.code,{children:`MediaGallery`}),`, `,(0,J.jsx)(t.code,{children:`FileUpload`}),`,
+`,(0,J.jsx)(t.code,{children:`ImageUpload`}),`, `,(0,J.jsx)(t.code,{children:`UploadProgressList`}),`) lives on the dedicated
+`,(0,J.jsx)(t.a,{href:`/base/upload-tray`,children:(0,J.jsx)(t.code,{children:`base/upload-tray`})}),` page. The two field-shaped
+upload primitives appear here for completeness.`]}),(0,J.jsx)(u,{name:`AvatarUploadExample`,source:Q,children:(0,J.jsx)(Yn,{})}),(0,J.jsx)(u,{name:`DropzoneExample`,source:Q,children:(0,J.jsx)(Xn,{})})]}),(0,J.jsxs)(a,{title:`Whole form`,id:`whole-form`,children:[(0,J.jsxs)(t.p,{children:[`A realistic product form combining `,(0,J.jsx)(t.code,{children:`Input`}),`, `,(0,J.jsx)(t.code,{children:`MoneyInput`}),`, `,(0,J.jsx)(t.code,{children:`Select`}),`,
+`,(0,J.jsx)(t.code,{children:`Textarea`}),`, and `,(0,J.jsx)(t.code,{children:`ToggleField`}),` behind `,(0,J.jsx)(t.code,{children:`ControlledFormField`}),` and
+`,(0,J.jsx)(t.code,{children:`react-hook-form`}),`.`]}),(0,J.jsx)(u,{name:`WholeForm`,source:Q,children:(0,J.jsx)(Zn,{})})]}),(0,J.jsxs)(a,{title:`API`,id:`api`,children:[(0,J.jsx)(t.h4,{children:`FormField`}),(0,J.jsx)(F,{component:`FormField`}),(0,J.jsx)(t.h4,{children:`ControlledFormField`}),(0,J.jsx)(F,{component:`ControlledFormField`}),(0,J.jsx)(t.h4,{children:`Workflow chrome`}),(0,J.jsx)(F,{component:`FormSection`}),(0,J.jsx)(F,{component:`FormActionsBar`}),(0,J.jsx)(F,{component:`ErrorSummary`}),(0,J.jsx)(F,{component:`DirtyStateBanner`}),(0,J.jsx)(F,{component:`SubmitStateButton`}),(0,J.jsx)(t.h4,{children:`Text fields`}),(0,J.jsx)(F,{component:`Input`}),(0,J.jsx)(F,{component:`PasswordInput`}),(0,J.jsx)(F,{component:`SlugField`}),(0,J.jsx)(F,{component:`Textarea`}),(0,J.jsx)(t.h4,{children:`Select fields`}),(0,J.jsx)(F,{component:`Select`}),(0,J.jsx)(F,{component:`RichSelect`}),(0,J.jsx)(t.h4,{children:`Numeric fields`}),(0,J.jsx)(F,{component:`DecimalInput`}),(0,J.jsx)(F,{component:`PercentageInput`}),(0,J.jsx)(F,{component:`MoneyInput`}),(0,J.jsx)(F,{component:`CurrencyInput`}),(0,J.jsx)(t.h4,{children:`Boolean fields`}),(0,J.jsx)(F,{component:`Switch`}),(0,J.jsx)(F,{component:`Checkbox`}),(0,J.jsx)(F,{component:`ToggleField`}),(0,J.jsx)(t.h4,{children:`Choice groups`}),(0,J.jsx)(F,{component:`PillRadioGroup`}),(0,J.jsx)(F,{component:`ListRadioGroup`}),(0,J.jsx)(F,{component:`CardRadioGroup`}),(0,J.jsx)(F,{component:`CardCheckboxGroup`}),(0,J.jsx)(t.h4,{children:`Domain fields`}),(0,J.jsx)(F,{component:`DateTimeInput`}),(0,J.jsx)(F,{component:`TagsInput`}),(0,J.jsx)(F,{component:`PhoneInput`})]})]})}function $n(e={}){let{wrapper:t}=e.components||{};return t?(0,J.jsx)(t,{...e,children:(0,J.jsx)(Qn,{...e})}):Qn(e)}function $(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{$n as default};