admin-ui-starter-kit 0.4.5 → 0.5.0

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

@@ -0,0 +1,911 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{n}from"./react-dom-Bz4cALsF.js";import{Dr as r,Er as i,Rr as a,Yr as o,r as s,t as c}from"./example-CbMg22fx.js";import{t as l}from"./box-xRYm3qua.js";import{t as u}from"./camera-CyHnOpqm.js";import{t as d}from"./circle-DswWOvJq.js";import{t as f}from"./clock-BBX3LCxu.js";import{t as p}from"./dropzone-MajEhAfA.js";import{t as m}from"./password-input-CLxvZdDC.js";import{t as h}from"./globe-B_Lqx3uz.js";import{a as g,c as _,d as v,f as y,i as b,l as x,m as S,n as C,p as w,r as T,s as E,t as D}from"./sortable.esm-COtQXiwU.js";import{t as O}from"./lock-DTD3z5Vh.js";import{t as k}from"./mail-DAa8myka.js";import{t as A}from"./plus-PKSdX45c.js";import{t as j}from"./shield-D084AWSl.js";import{t as M}from"./star-0BUJBDj_.js";import{t as N}from"./trash-2-xwHdvAn6.js";import{t as P}from"./x-BpAEmld2.js";import{t as ee}from"./zap-E8G3kjwh.js";import{i as te,k as F,n as I,s as ne}from"./index-DNH0y0r-.js";import{a as re,i as ie,n as ae,o as oe,r as se,t as ce}from"./select-BQWY3ndy.js";import{t as L}from"./props-table-DSdjPLVr.js";import{t as R}from"./label-BE1d_Rxi.js";import{t as le}from"./text-link-CSzy09hn.js";import{i as ue,n as de,r as fe,t as pe}from"./alert-BUcCtIUZ.js";import{t as me}from"./smart-card-DpvRHqI9.js";import{a as z,i as B,n as V,r as he}from"./index.esm-Ducg7a0P.js";import{t as ge}from"./checkbox-Bu3lf4gm.js";import{i as _e,n as ve,t as ye}from"./form-sizing-DHUDpiPA.js";import{t as H}from"./input-DcQuALxy.js";import{t as U}from"./textarea-DnvQVkFU.js";import{t as be}from"./select-x02n3iNp.js";import{i as W,n as xe,r as Se,t as Ce}from"./tags-input-jtEAac1b.js";import{t as we}from"./switch-C0QtKm5H.js";import{t as Te}from"./slider-DL--Jsf0.js";import{i as Ee,n as De,r as Oe,t as ke}from"./card-radio-group-CEX1QGZc.js";import{n as Ae,r as je,t as Me}from"./RadioGroup-Bd_Zncc1.js";import{i as Ne,t as Pe}from"./popover-DoEhmJ7G.js";import{t as Fe}from"./popover-BWbBoxN0.js";import{n as Ie,t as Le}from"./date-picker-BrBCLxZ8.js";import{n as G,t as Re}from"./form-field-Dtn_NArM.js";var K=t(n(),1),q=ne();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=K.forwardRef(function({value:e,slugify:t,separator:n=`-`,lowercase:r=!0,trim:i=!0,wrapperClassName:a,className:o,...s},c){let l=K.useMemo(()=>t?.(e)??ze(e,{separator:n,lowercase:r,trim:i}),[r,n,t,i,e]);return(0,q.jsx)(`div`,{className:I(`slug-field--component`,a),children:(0,q.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:i,prefixes:s=Ue,onPrefixChange:c,disablePrefixSelector:l=!1,prefixPlaceholder:u,prefixWidth:d=`w-[120px]`,showCountryName:f=!0,showPrefixInDropdown:p=!0,invalid:m,disabled:h,className:g,size:_,strings:v,...y},b){let{defaultControlSize:x}=o(),S=_e(_,x),C=F(Ve,v),w=(0,K.useMemo)(()=>Ge(s),[s]),[T,E]=(0,K.useState)((0,K.useMemo)(()=>qe(i,w),[i,w])),D=r!==void 0,O=D?qe(r,w):T,k=(0,K.useMemo)(()=>w.find(e=>e.value===O),[w,O]),A=(0,K.useCallback)(e=>{e!==null&&(D||E(e),c?.(e))},[D,c]),j=(0,K.useCallback)(e=>{if(!n)return;let t=e.target.value;if(O&&t.startsWith(O)){let r=t.slice(O.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,O]),M=(0,K.useCallback)(r=>{if(e&&typeof n==`function`){let e=Ke(r.target.value,O);e!==r.target.value&&n({...r,target:{...r.target,value:e},currentTarget:{...r.currentTarget,value:e}})}t?.(r)},[e,n,t,O]);if(w.length===0||l){let e=O||i;return e?(0,q.jsxs)(`div`,{className:`flex items-start gap-2`,children:[(0,q.jsx)(`div`,{"aria-invalid":m||void 0,className:I(`flex items-center justify-center rounded-md border border-input bg-muted px-3`,ve[S],h&&`opacity-50`,`aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20`),children:(0,q.jsx)(a,{tag:`span`,type:`secondary`,weight:`medium`,children:e})}),(0,q.jsx)(`div`,{className:`flex-1`,children:(0,q.jsx)(H,{ref:b,size:S,type:`tel`,autoComplete:`tel`,inputMode:`tel`,onChange:j,onBlur:M,invalid:m,disabled:h,className:g,...y})})]}):(0,q.jsx)(H,{ref:b,size:S,type:`tel`,autoComplete:`tel`,inputMode:`tel`,onChange:j,onBlur:M,invalid:m,disabled:h,className:I(`phone-input--component`,g),...y})}return(0,q.jsxs)(`div`,{className:`flex items-start gap-2`,children:[(0,q.jsxs)(ce,{value:O,onValueChange:e=>A(e),disabled:h,children:[(0,q.jsx)(re,{"aria-invalid":m||void 0,className:I(`border-input bg-transparent shrink-0 !shadow-none`,ve[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,q.jsx)(oe,{placeholder:u??C.prefixPlaceholder,children:!!k&&(0,q.jsx)(a,{tag:`span`,children:k.value})})}),(0,q.jsx)(ae,{children:(0,q.jsx)(se,{children:w.map(e=>(0,q.jsx)(ie,{value:e.value,children:(0,q.jsxs)(`div`,{className:`flex items-center gap-2`,children:[!!p&&(0,q.jsx)(a,{tag:`span`,weight:`medium`,className:`min-w-[50px]`,children:e.value}),!!f&&(0,q.jsx)(a,{tag:`span`,type:`secondary`,lineHeight:`tight`,children:e.label})]})},e.value))})})]}),(0,q.jsx)(`div`,{className:`flex-1`,children:(0,q.jsx)(H,{ref:b,size:S,type:`tel`,autoComplete:`tel`,inputMode:`tel`,onChange:j,onBlur:M,invalid:m,disabled:h,className:g,...y})})]})}var Ye=(0,K.memo)(K.forwardRef(Je));Ye.displayName=`PhoneInput`;var Xe=(0,K.forwardRef)(function({decimalPlaces:e=2,min:t=0,max:n=100,step:r,...i},a){return(0,q.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:i=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,K.useId)(),b=t??`slider-${y}`,x=e??b,S=(0,K.useCallback)(e=>{let t=Array.isArray(e)?e[0]:e;d?.(t),u?.({target:{name:x,value:t}})},[x,u,d]),C=(0,K.useCallback)(e=>{let t=Array.isArray(e)?e[0]:e;f?.(t)},[f]),w=(0,K.useMemo)(()=>{if(!p)return null;let e=n??r??i;return m?m(e):h?`${e}${h}`:String(e)},[p,n,r,i,m,h]),T=n===void 0?void 0:[n],E=r===void 0?[i]:[r];return(0,q.jsxs)(`div`,{className:I(`slider--component`,`flex items-center gap-3`,g),children:[(0,q.jsx)(Te,{ref:v,id:b,value:T,defaultValue:E,min:i,max:o,step:s,disabled:c,orientation:_,onValueChange:S,onValueCommitted:C,"aria-invalid":l||void 0,className:I(`min-w-0 flex-1`,l&&`[&_[data-slot=slider-range]]:bg-destructive [&_[data-slot=slider-thumb]]:border-destructive`)}),!!p&&w!==null&&(0,q.jsx)(a,{tag:`span`,type:l?`error`:`secondary`,className:`min-w-[3ch] shrink-0 text-right tabular-nums`,children:w})]})}var Qe=K.forwardRef(Ze);Qe.displayName=`SliderField`;function $e({options:e,value:t,defaultValue:n,onChange:r,name:i,invalid:s,disabled:c,size:l,className:u}){let{defaultControlSize:f}=o(),p=Oe[_e(l,f)];return(0,q.jsx)(Me,{value:t,defaultValue:n,onValueChange:e=>e&&r?.(e),name:i,disabled:c,"aria-invalid":s||void 0,className:I(`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,q.jsxs)(je,{value:e.value,disabled:c||e.disabled,className:I(`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,q.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,q.jsx)(Ae,{render:(0,q.jsx)(d,{className:`h-2.5 w-2.5 fill-primary text-primary`})})}),(0,q.jsxs)(`div`,{className:`flex-1 min-w-0`,children:[(0,q.jsx)(a,{tag:`span`,weight:`medium`,lineHeight:`tight`,className:`block`,children:e.label}),!!e.description&&(0,q.jsx)(a,{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(),_=_e(p,g),v=(0,K.useMemo)(()=>tt(n),[n]),[y,b]=(0,K.useState)(t??v[0]?.value??``),x=e!==void 0,S=x?e:y;(0,K.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,K.useCallback)(e=>{e!==null&&(x||b(e),r?.(e))},[x,r]),w=(0,K.useMemo)(()=>I(`border-input bg-transparent !shadow-none`,ve[_],`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,q.jsxs)(`div`,{className:`space-y-2`,children:[!!l&&(0,q.jsx)(R,{className:`leading-6`,children:l}),(0,q.jsxs)(ce,{value:S,onValueChange:e=>C(e),disabled:d||a,children:[(0,q.jsx)(re,{"aria-invalid":u||void 0,className:w,children:(0,q.jsx)(oe,{placeholder:s??``})}),(0,q.jsx)(ae,{children:(0,q.jsx)(se,{children:v.map(e=>(0,q.jsx)(ie,{value:e.value,children:e.label},e.value))})})]})]});return(0,q.jsxs)(`div`,{className:I(`currency-input--component`,`flex items-start gap-2`),children:[i===`start`&&T,(0,q.jsx)(`div`,{className:`flex-1`,children:(0,q.jsx)(W,{ref:h,size:_,decimalPlaces:2,allowNegative:!1,disabled:d,invalid:u,...m})}),i===`end`&&T]})}var rt=(0,K.memo)((0,K.forwardRef)(nt));rt.displayName=`CurrencyInput`;var it=[`USD`,`EUR`],at=(0,K.forwardRef)(function({currencies:e=it,onCurrencyChange:t,currency:n,defaultCurrency:r,...i},a){return(0,q.jsx)(rt,{className:`money-input--component`,ref:a,currencies:e,currency:n,defaultCurrency:r,onCurrencyChange:(0,K.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,q.jsx)(be,{className:`rounding-mode-select--component`,options:(0,K.useMemo)(()=>ot.map(e=>({value:e,label:n?.[e]??e})),[n]),value:e,onChange:(0,K.useCallback)(e=>{t?.(e)},[t]),placeholder:r,...i})}st.displayName=`RoundingModeSelect`;var ct={placeholder:`Select an item`},lt=`__rich_select_empty__`,ut=(0,K.forwardRef)(({options:e,placeholder:t,strings:n,onChange:r,className:i,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=_e(_,y),x=F(ct,n),S=t??x.placeholder,C=(0,K.useCallback)(e=>{if(e!==lt)return e===``||e==null?h?lt:void 0:e},[h]),w=(0,K.useCallback)(e=>{if(e!==lt)return e},[]),T=(0,K.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]),E=(0,K.useMemo)(()=>C(p??void 0),[p,C]),D=(0,K.useMemo)(()=>C(m??void 0),[m,C]),O=p!==void 0,[k,A]=(0,K.useState)(D),j=O?E:k,M=(0,K.useMemo)(()=>T.find(e=>e.value===j),[j,T]),N=(0,K.useCallback)(e=>{e!=null&&(O||A(e),r?.(w(e)))},[O,r,w]),P=I(`border-input bg-transparent w-full rounded-radius border outline-none transition-[color,box-shadow] !shadow-none`,ve[b],ye[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`,i),ee=O?{value:E}:{};return(0,q.jsxs)(ce,{onValueChange:e=>N(e),disabled:s,defaultOpen:c,open:l,onOpenChange:u,name:d,required:f,defaultValue:D,...ee,children:[(0,q.jsx)(re,{ref:v,className:I(`rich-select--component`,P),"aria-invalid":g,children:M?(0,q.jsx)(a,{tag:`span`,className:`text-left break-words whitespace-normal`,children:M.label}):(0,q.jsx)(oe,{placeholder:S})}),(0,q.jsx)(ae,{children:(0,q.jsx)(se,{children:T.map(e=>(0,q.jsx)(ie,{value:e.value,disabled:e.disabled,children:(0,q.jsxs)(`div`,{className:`flex w-full items-center gap-2`,children:[!!e.icon&&(0,q.jsx)(`span`,{className:`w-4 h-4 shrink-0 flex items-center justify-center self-start mt-0.5`,children:e.icon}),(0,q.jsxs)(`div`,{className:`flex flex-col min-w-0 text-left flex-1`,children:[(0,q.jsx)(a,{tag:`span`,weight:`medium`,children:e.label}),!!e.description&&(0,q.jsx)(a,{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:i=`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:T,size:E,strings:D}){let{defaultControlSize:O}=o(),k=_e(E,O),A=F(dt,D),j=s??A.width,M=c??A.height,N=l??A.depth,P=d??A.unit,ee=f??A.widthPlaceholder,te=p??A.heightPlaceholder,ne=m??A.depthPlaceholder,L=S===`horizontal`,le=S===`vertical`,ue=b===!0,de=(u??``).length>0,fe=le?j:``,pe=le?M:``,me=le?N:``,z=e!==void 0,B=r!==void 0,V=pt(z?e:t,n),[he,ge]=(0,K.useState)(V.width),[ye,H]=(0,K.useState)(V.height),[U,be]=(0,K.useState)(V.depth),[xe,Se]=(0,K.useState)(r||i),Ce=pt(e,n),we=z?Ce.width:he,Te=z?Ce.height:ye,Ee=z?Ce.depth:U,De=B?r:xe;(0,K.useEffect)(()=>{if(z){let t=pt(e,n);ge(t.width),H(t.height),be(t.depth)}},[e,n,z]);let Oe=(0,K.useCallback)((e,t)=>{let r=we,i=Te,a=Ee;e===`width`&&(r=t),e===`height`&&(i=t),e===`depth`&&(a=t),z||(ge(r),H(i),be(a));let o=mt(r,i,a,n);h?.({target:{value:o}})},[we,Te,Ee,z,n,h]),ke=(0,K.useCallback)(e=>{if(e===null)return;let t=e;B||Se(t),g?.(t)},[B,g]),Ae=(0,q.jsxs)(`div`,{className:`space-y-2`,children:[!!de&&(0,q.jsx)(R,{className:`leading-6`,children:u}),(0,q.jsxs)(ce,{value:De,onValueChange:e=>ke(e),disabled:w||x,children:[(0,q.jsx)(re,{"aria-invalid":C||void 0,className:I(`border-input bg-transparent !shadow-none`,ve[k],`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,q.jsx)(oe,{placeholder:P})}),(0,q.jsx)(ae,{children:(0,q.jsx)(se,{children:ft.map(e=>(0,q.jsx)(ie,{value:e.value,children:e.label},e.value))})})]})]});return(0,q.jsx)(`div`,{className:I(`dimensions-input--component`,`space-y-2`,T),children:(0,q.jsxs)(`div`,{className:I(`flex gap-2`,S===`vertical`?`flex-col`:`flex-row items-start`),children:[(0,q.jsxs)(`div`,{className:`flex-1 space-y-1`,children:[!!le&&!!fe&&(0,q.jsx)(R,{children:fe}),(0,q.jsx)(W,{size:k,value:we,onChange:e=>Oe(`width`,e.target.value),placeholder:ee,decimalPlaces:_,min:v,max:y,disabled:w,invalid:C,"aria-label":j}),!!L&&(0,q.jsx)(a,{size:`xs`,type:`secondary`,className:`text-center`,children:j})]}),S===`horizontal`&&(0,q.jsx)(`div`,{className:`flex items-center pt-2`,children:(0,q.jsx)(a,{tag:`span`,type:`secondary`,children:`×`})}),(0,q.jsxs)(`div`,{className:`flex-1 space-y-1`,children:[!!le&&!!pe&&(0,q.jsx)(R,{children:pe}),(0,q.jsx)(W,{size:k,value:Te,onChange:e=>Oe(`height`,e.target.value),placeholder:te,decimalPlaces:_,min:v,max:y,disabled:w,invalid:C,"aria-label":M}),!!L&&(0,q.jsx)(a,{size:`xs`,type:`secondary`,className:`text-center`,children:M})]}),S===`horizontal`&&(0,q.jsx)(`div`,{className:`flex items-center pt-2`,children:(0,q.jsx)(a,{tag:`span`,type:`secondary`,children:`×`})}),(0,q.jsxs)(`div`,{className:`flex-1 space-y-1`,children:[!!le&&!!me&&(0,q.jsx)(R,{children:me}),(0,q.jsx)(W,{size:k,value:Ee,onChange:e=>Oe(`depth`,e.target.value),placeholder:ne,decimalPlaces:_,min:v,max:y,disabled:w,invalid:C,"aria-label":N}),!!L&&(0,q.jsx)(a,{size:`xs`,type:`secondary`,className:`text-center`,children:N})]}),!!ue&&(0,q.jsxs)(`div`,{className:I(S===`vertical`?`w-full`:`w-32 pt-0`),children:[Ae,!!L&&!de&&(0,q.jsx)(a,{size:`xs`,type:`secondary`,className:`mt-1 text-center`,children:P})]})]})})}ht.displayName=`DimensionsInput`;var gt={unitLabel:``,unitPlaceholder:``},_t=[{value:`g`,label:`g`},{value:`kg`,label:`kg`},{value:`lb`,label:`lb`},{value:`oz`,label:`oz`}];function vt({value:e,defaultValue:t,unit:n,defaultUnit:r=`g`,onChange:i,onUnitChange:a,decimalPlaces:s=2,min:c=0,max:l,showUnitSelector:u=!0,disableUnitSelector:d=!1,unitLabel:f,unitPlaceholder:p,unitWidth:m=`w-24`,strings:h,invalid:g,disabled:_=!1,size:v,className:y}){let{defaultControlSize:b}=o(),x=_e(v,b),S=F(gt,{...f===void 0?{}:{unitLabel:f},...p===void 0?{}:{unitPlaceholder:p},...h}),C=e!==void 0,w=n!==void 0,[T,E]=(0,K.useState)(t??``),[D,O]=(0,K.useState)(n??r),k=C?e??``:T,A=w?n??r:D,j=(0,K.useCallback)(e=>{C||E(e.target.value),i?.({target:{value:e.target.value}})},[C,i]),M=(0,K.useCallback)(e=>{if(e===null)return;let t=e;w||O(t),a?.(t)},[w,a]),N=(0,K.useMemo)(()=>_t,[]),P=S.unitLabel!==``;return(0,q.jsxs)(`div`,{className:I(`weight-input--component`,`flex items-start gap-2`,y),children:[(0,q.jsx)(`div`,{className:`flex-1`,children:(0,q.jsx)(W,{size:x,value:k,onChange:j,decimalPlaces:s,allowNegative:!1,min:c,max:l,disabled:_,invalid:g})}),!!u&&(0,q.jsxs)(`div`,{className:`space-y-2`,children:[!!P&&(0,q.jsx)(R,{className:`leading-6`,children:S.unitLabel}),(0,q.jsxs)(ce,{value:A,onValueChange:e=>M(e),disabled:_||d,children:[(0,q.jsx)(re,{"aria-invalid":g||void 0,className:I(`border-input bg-transparent !shadow-none`,ve[x],`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)&&`opacity-50 cursor-not-allowed`,m),children:(0,q.jsx)(oe,{placeholder:S.unitPlaceholder||void 0})}),(0,q.jsx)(ae,{children:(0,q.jsx)(se,{children:N.map(e=>(0,q.jsx)(ie,{value:e.value,children:e.label},e.value))})})]})]})]})}vt.displayName=`WeightInput`;var yt={latLabel:``,lngLabel:``,latPlaceholder:``,lngPlaceholder:``,previewLinkLabel:``},bt=(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:``}},xt=(e,t,n)=>n===`string`?`${e},${t}`:{lat:e,lng:t},St=(e,t,n)=>{if(!e)return!1;let r=Number(e);return Number.isFinite(r)&&r>=t&&r<=n};function Ct({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=F(yt,{...i===void 0?{}:{latLabel:i},...a===void 0?{}:{lngLabel:a},...o===void 0?{}:{latPlaceholder:o},...s===void 0?{}:{lngPlaceholder:s},...u===void 0?{}:{previewLinkLabel:u},...d}),g=e!==void 0,_=bt(g?e:t,n),[v,y]=(0,K.useState)(_.lat),[b,x]=(0,K.useState)(_.lng),S=bt(e,n),C=g?S.lat:v,w=g?S.lng:b;(0,K.useEffect)(()=>{g&&(y(S.lat),x(S.lng))},[g,S.lat,S.lng]);let T=(0,K.useCallback)((e,t)=>{g||(y(e),x(t)),r?.({target:{value:xt(e,t,n)}})},[g,r,n]),E=(0,K.useMemo)(()=>{let e=St(C,-90,90),t=St(w,-180,180);return!e||!t?null:`https://www.google.com/maps?q=${encodeURIComponent(`${C},${w}`)}`},[C,w]);return(0,q.jsxs)(`div`,{className:I(`coordinates-input--component`,`space-y-3`,p),children:[(0,q.jsxs)(`div`,{className:`grid grid-cols-1 gap-3 md:grid-cols-2`,children:[(0,q.jsxs)(`div`,{className:`space-y-2`,children:[!!h.latLabel&&(0,q.jsx)(R,{children:h.latLabel}),(0,q.jsx)(W,{placeholder:h.latPlaceholder||void 0,value:C,onChange:e=>T(e.target.value,w),decimalPlaces:c,allowNegative:!0,min:-90,max:90,invalid:f,disabled:m})]}),(0,q.jsxs)(`div`,{className:`space-y-2`,children:[!!h.lngLabel&&(0,q.jsx)(R,{children:h.lngLabel}),(0,q.jsx)(W,{placeholder:h.lngPlaceholder||void 0,value:w,onChange:e=>T(C,e.target.value),decimalPlaces:c,allowNegative:!0,min:-180,max:180,invalid:f,disabled:m})]})]}),!!l&&!!E&&!!h.previewLinkLabel&&(0,q.jsx)(le,{href:E,type:`secondary`,underline:!1,children:h.previewLinkLabel})]})}Ct.displayName=`CoordinatesInput`;function wt({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,q.jsx)(Le,{className:`date-time-input--component`,mode:`single`,disabled:s,error:o?` `:void 0,placeholder:n,value:c,onChange:(0,K.useCallback)(e=>{t?.(e.date?e.date.toISOString():void 0)},[t]),readableFormat:r,withTime:{enabled:!0,format:`24`,step:i},modal:a})}wt.displayName=`DateTimeInput`;var Tt={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`},J=e=>String(e).padStart(2,`0`),Y=e=>{let t=e.trim();if(t===``)return null;let n=Number.parseInt(t,10);return Number.isFinite(n)?n:null},X=(e,t,n)=>Math.min(Math.max(e,t),n),Et=e=>(e??``).replace(/\D/g,``).slice(0,2),Dt=(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 Ot({className:e,value:t=`00:00:00`,onChange:n,invalid:r,disabled:i,placeholder:o,dialogTitle:c,hoursLabel:l,minutesLabel:u,secondsLabel:d,nowLabel:p,doneLabel:m,format:h=`24`,minuteStep:g=5,showSeconds:_=!0,strings:v}){let y=(0,K.useId)(),b=F(Tt,{...o===void 0?{}:{placeholder:o},...c===void 0?{}:{dialogTitle:c},...l===void 0?{}:{hours:l},...u===void 0?{}:{minutes:u},...d===void 0?{}:{seconds:d},...p===void 0?{}:{now:p},...m===void 0?{}:{done:m},...v??{}}),x=(0,K.useCallback)((e,t)=>{let n=Y(e??``)??0;return h===`12`?{hours:J(n>12?12:X(n===0?12:n,1,12)),meridiem:t}:{hours:J(n>24?24:X(n,0,24)),meridiem:t}},[h]),S=(0,K.useCallback)(e=>{let t=Y(e??``)??0;return t>59&&(t=0),t=Dt(X(t,0,59),g),J(t)},[g]),C=(0,K.useCallback)(e=>{let t=Y(e??``)??0;return t>59&&(t=0),t=X(t,0,59),J(t)},[]),w=(0,K.useCallback)((e,t,n,r)=>{let i=Y(e)??0,a=Y(t)??0;a>59&&(a=0),a=Dt(X(a,0,59),g);let o=_?Y(n)??0:0;if(o>59&&(o=0),o=_?X(o,0,59):0,h===`12`){let e=i>12?12:X(i===0?12:i,1,12);return`${J(r===`AM`?e===12?0:e:e===12?12:e+12)}:${J(a)}:${J(o)}`}return`${J(i>24?24:X(i,0,24))}:${J(a)}:${J(o)}`},[h,g,_]),T=(0,K.useCallback)(e=>{let[t=`00`,n=`00`,r=`00`]=(e??``).split(`:`),i=_?r:`00`;return{hours:Et(t),minutes:Et(n),seconds:Et(i)}},[_]),[E,D]=(0,K.useState)(!1),[O,k]=(0,K.useState)(()=>T(t)),[A,j]=(0,K.useState)(()=>{let[e=`00`]=(t??``).split(`:`);return(Y(e)??0)>=12?`PM`:`AM`}),M=(0,K.useRef)({});(0,K.useEffect)(()=>{if(E)return;k(T(t));let[e=`00`]=(t??``).split(`:`);j((Y(e)??0)>=12?`PM`:`AM`)},[E,T,t]);let N=(e,t)=>{let r=Et(t);k(t=>({...t,[e]:r})),M.current[e]&&window.clearTimeout(M.current[e]),M.current[e]=window.setTimeout(()=>{k(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,A).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,A);n?.(i);let[a=`00`,o=`00`,s=`00`]=i.split(`:`);return h===`12`?r.hours=J((Y(a)??0)%12||12):r.hours=a,r.minutes=o,r.seconds=s,r})},400)},P=e=>{M.current[e]&&window.clearTimeout(M.current[e]),k(e=>{let t={...e};t.hours=x(t.hours,A).hours,t.minutes=S(t.minutes),t.seconds=C(t.seconds);let r=w(t.hours,t.minutes,t.seconds,A);n?.(r);let[i=`00`,a=`00`,o=`00`]=r.split(`:`);return{hours:h===`12`?Et(String((Y(i)??0)%12||12)):i,minutes:a,seconds:o}})},ee=(0,K.useMemo)(()=>{let e=w(O.hours,O.minutes,O.seconds,A);if(!_){let[t=`00`,n=`00`]=e.split(`:`);return`${t}:${n}`}return e},[A,w,_,O.hours,O.minutes,O.seconds]);return(0,q.jsxs)(Pe,{open:E,onOpenChange:D,children:[(0,q.jsx)(Ne,{render:n=>(0,q.jsx)(s,{...n,id:y,variant:`secondary`,buttonStyle:`outline`,"aria-expanded":E,"aria-invalid":r,disabled:i,className:I(`time-picker--component`,Ie,`w-full justify-between text-left`,!t&&`!text-muted-foreground`,n.className,e),children:n.children}),children:(0,q.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,q.jsx)(f,{className:`h-4 w-4`}),(0,q.jsx)(`span`,{children:ee||b.placeholder})]})}),(0,q.jsx)(Fe,{className:`w-auto p-4`,align:`start`,children:(0,q.jsxs)(`div`,{className:`space-y-4`,children:[(0,q.jsx)(a,{tag:`div`,weight:`medium`,align:`center`,children:b.dialogTitle}),(0,q.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,q.jsxs)(`div`,{className:`text-center`,children:[(0,q.jsx)(R,{size:`xs`,className:`text-muted-foreground`,children:b.hours}),(0,q.jsx)(H,{inputMode:`numeric`,value:O.hours,onChange:e=>N(`hours`,e.target.value),onFocus:e=>e.currentTarget.select(),onClick:e=>e.currentTarget.select(),onBlur:()=>P(`hours`),placeholder:b.hoursPlaceholder,className:`w-16 text-center`})]}),(0,q.jsx)(a,{tag:`div`,className:`text-2xl`,children:`:`}),(0,q.jsxs)(`div`,{className:`text-center`,children:[(0,q.jsx)(R,{size:`xs`,className:`text-muted-foreground`,children:b.minutes}),(0,q.jsx)(H,{inputMode:`numeric`,value:O.minutes,onChange:e=>N(`minutes`,e.target.value),onFocus:e=>e.currentTarget.select(),onClick:e=>e.currentTarget.select(),onBlur:()=>P(`minutes`),placeholder:b.minutesPlaceholder,className:`w-16 text-center`})]}),!!_&&(0,q.jsxs)(q.Fragment,{children:[(0,q.jsx)(a,{tag:`div`,className:`text-2xl`,children:`:`}),(0,q.jsxs)(`div`,{className:`text-center`,children:[(0,q.jsx)(R,{size:`xs`,className:`text-muted-foreground`,children:b.seconds}),(0,q.jsx)(H,{inputMode:`numeric`,value:O.seconds,onChange:e=>N(`seconds`,e.target.value),onFocus:e=>e.currentTarget.select(),onClick:e=>e.currentTarget.select(),onBlur:()=>P(`seconds`),placeholder:b.secondsPlaceholder,className:`w-16 text-center`})]})]}),h===`12`&&(0,q.jsxs)(`div`,{className:`flex items-end gap-1 pb-0.5`,children:[(0,q.jsx)(s,{type:`button`,variant:A===`AM`?`primary`:`secondary`,buttonStyle:A===`AM`?`solid`:`outline`,onClick:()=>j(`AM`),children:b.am}),(0,q.jsx)(s,{type:`button`,variant:A===`PM`?`primary`:`secondary`,buttonStyle:A===`PM`?`solid`:`outline`,onClick:()=>j(`PM`),children:b.pm})]})]}),(0,q.jsxs)(`div`,{className:`flex gap-2`,children:[(0,q.jsx)(s,{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:``};k(t),j(e.getHours()>=12?`PM`:`AM`),n?.(w(t.hours,t.minutes,t.seconds,e.getHours()>=12?`PM`:`AM`))},children:b.now}),(0,q.jsx)(s,{variant:`primary`,buttonStyle:`solid`,className:`flex-1`,onClick:()=>{n?.(w(O.hours,O.minutes,O.seconds,A)),D(!1)},children:b.done})]})]})})]})}Ot.displayName=`TimePicker`;var kt=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]}`},At=0,jt=()=>`${Date.now().toString(36)}-${(At++).toString(36)}`,Mt=e=>{let[t,n]=(0,K.useState)([]),[r,i]=(0,K.useState)({}),a=(0,K.useCallback)(kt,[]),o=(0,K.useCallback)(t=>{if(e?.minSize!==void 0&&t.size<e.minSize)return`Size (${kt(t.size)}) is smaller than minimum (${kt(e.minSize)}).`;if(e?.maxSize!==void 0&&t.size>e.maxSize)return`Size (${kt(t.size)}) exceeds maximum (${kt(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,K.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:jt(),file:t,name:t.name,size:t.size,formattedSize:kt(t.size),type:t.type,extension:r,lastModified:t.lastModified};n.push(a)}),n}),i(s)},[e?.maxFiles,o]);return{files:t,addFiles:(0,K.useCallback)(e=>s(e,!1),[s]),setFiles:(0,K.useCallback)(e=>s(e,!0),[s]),remove:(0,K.useCallback)(e=>{n(t=>t.filter(t=>t.id!==e))},[]),removeAll:(0,K.useCallback)(()=>{n(e=>e.length===0?e:[]),i({})},[]),formatSize:a,validationErrors:r}},Nt={change:`Change photo`,remove:`Remove photo`,hint:`Click or drop an image`,dragOver:`Drop image to upload`},Pt={sm:{box:`size-16`,icon:`size-4`,remove:`size-5`},base:{box:`size-24`,icon:`size-5`,remove:`size-6`},lg:{box:`size-32`,icon:`size-6`,remove:`size-7`}};function Ft({value:e,onChange:t,defaultPreviewUrl:n,accept:r=`.png,.jpg,.jpeg,.gif,.webp`,disabled:i=!1,invalid:o=!1,size:s=`base`,className:c,strings:l,initials:d},f){let p=F(Nt,l),m=(0,K.useId)(),h=(0,K.useRef)(null),[g,_]=(0,K.useState)(!1),v=Pt[s],{files:y,setFiles:b,removeAll:x}=Mt({maxFiles:1,allowedExtensions:(0,K.useMemo)(()=>r.split(`,`).map(e=>e.trim().replace(/^\./,``).toLowerCase()).filter(Boolean),[r])});(0,K.useEffect)(()=>{e?b([e]):x()},[e]);let S=y[0],[C,w]=(0,K.useState)(void 0);(0,K.useEffect)(()=>{let t=S?.file??e;if(!t){w(void 0);return}let n=URL.createObjectURL(t);return w(n),()=>URL.revokeObjectURL(n)},[S,e]);let T=C??n,E=!!T,D=(0,K.useCallback)(e=>{let n=e.target.files;!n||n.length===0||(b(n),t?.(n[0]),h.current&&(h.current.value=``))},[t,b]),O=(0,K.useCallback)(()=>{i||h.current?.click()},[i]),k=(0,K.useCallback)(()=>{x(),t?.(void 0),h.current&&(h.current.value=``)},[t,x]),A=e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),O())},j=(0,K.useCallback)(e=>{e.preventDefault(),e.stopPropagation(),i||_(!0)},[i]),M=(0,K.useCallback)(e=>{e.preventDefault(),e.stopPropagation(),_(!1)},[]),N=(0,K.useCallback)(e=>{if(e.preventDefault(),e.stopPropagation(),_(!1),i)return;let n=e.dataTransfer?.files;!n||n.length===0||(b(n),t?.(n[0]))},[i,t,b]);return(0,q.jsxs)(`div`,{className:I(`avatar-upload--component`,`inline-flex flex-col items-center gap-2`,c),children:[(0,q.jsxs)(`div`,{role:`button`,tabIndex:i?-1:0,"aria-label":p.change,"aria-disabled":i||void 0,"aria-invalid":o||void 0,onClick:O,onKeyDown:A,onDragEnter:j,onDragOver:j,onDragLeave:M,onDrop:N,className:I(`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`,E?`border-border/60 bg-muted/20`:I(`bg-muted/30 hover:border-primary hover:bg-primary/5`,o?`border-destructive`:`border-muted-foreground/40`),i&&`cursor-not-allowed opacity-50`,!i&&g&&`border-primary bg-primary/10`,v.box),children:[(0,q.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:i,onChange:D}),E&&T?(0,q.jsx)(`img`,{src:T,alt:p.change,className:`absolute inset-0 size-full object-cover`}):d?(0,q.jsx)(a,{size:s===`lg`?`lg`:`base`,weight:`bold`,className:`leading-none`,children:d}):(0,q.jsx)(u,{className:I(v.icon,`text-muted-foreground`),"aria-hidden":`true`}),!i&&E&&(0,q.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,q.jsx)(u,{className:v.icon})}),!i&&E&&(0,q.jsx)(`button`,{type:`button`,"aria-label":p.remove,onClick:e=>{e.stopPropagation(),k()},className:I(`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`,v.remove),children:(0,q.jsx)(P,{className:`size-3`})}),!i&&!E&&g&&(0,q.jsx)(a,{size:`xxs`,weight:`medium`,className:`absolute inset-x-0 bottom-1.5 text-center text-primary`,children:p.dragOver})]}),!E&&(0,q.jsx)(a,{size:`xs`,type:`secondary`,children:p.hint})]})}var It=K.forwardRef(Ft);It.displayName=`AvatarUpload`;var Z={emptyState:`No items added yet.`,addItem:`Add item`,removeAriaLabel:`Remove item`},Lt={emptyState:Z.emptyState,addButton:Z.addItem,removeAriaLabel:Z.removeAriaLabel,dragHandleAriaLabel:`Drag to reorder`};function Rt({item:e,index:t,sortable:n,rowVariant:r,removeVariant:i,hideRemove:a,disabled:o,strings:c,onRemove:l,renderRow:u}){let d=T({id:e.id,disabled:o||!n}),f=n?d.isDragging:!1,p=n?{transform:w.Transform.toString(d.transform),transition:d.transition,opacity:f?.6:1}:void 0,m=n?d.setNodeRef:void 0,h=n?d.attributes:{},g=n?d.listeners:void 0,_=n?(0,q.jsx)(`button`,{type:`button`,"aria-label":c.dragHandleAriaLabel,className:I(`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,...g,children:(0,q.jsx)(S,{className:`size-4`,"aria-hidden":`true`})}):null,v=a?null:i===`icon-button`?(0,q.jsx)(s,{type:`button`,variant:`secondary`,buttonStyle:`outline`,size:`sm`,"aria-label":c.removeAriaLabel,disabled:o,onClick:()=>l(t),className:`shrink-0`,children:(0,q.jsx)(N,{className:`size-4`,"aria-hidden":`true`})}):(0,q.jsx)(`button`,{type:`button`,"aria-label":c.removeAriaLabel,disabled:o,onClick:()=>l(t),className:I(`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,q.jsx)(P,{className:`size-4`,"aria-hidden":`true`})});return r===`card`?(0,q.jsx)(`div`,{ref:m,style:p,className:I(`repeater--component`,`relative rounded-md border border-input bg-card p-4`,n&&`pl-2`),children:(0,q.jsxs)(`div`,{className:`flex items-start gap-2`,children:[_,(0,q.jsx)(`div`,{className:`min-w-0 flex-1`,children:u(e,{index:t,isDragging:f})}),v]})}):(0,q.jsxs)(`div`,{ref:m,style:p,className:`flex items-start gap-2`,children:[_,(0,q.jsx)(`div`,{className:`min-w-0 flex-1`,children:u(e,{index:t,isDragging:f})}),v]})}function zt({items:e,renderRow:t,onAdd:n,onRemove:r,onMove:i,sortable:o=!1,rowVariant:c=`inline`,removeVariant:l=`ghost`,hideRemove:u=!1,hideAdd:d=!1,disabled:f=!1,strings:p,className:m}){let h=F(Lt,p),S=y(v(_,{activationConstraint:{distance:4}}),v(E,{coordinateGetter:C})),w=(0,K.useCallback)(t=>{let{active:n,over:r}=t;if(!r||n.id===r.id)return;let a=e.findIndex(e=>e.id===n.id),o=e.findIndex(e=>e.id===r.id);a<0||o<0||i?.(a,o)},[e,i]),T=(0,K.useMemo)(()=>e.map(e=>e.id),[e]),O=(0,q.jsx)(`div`,{className:`space-y-2`,children:e.map((e,n)=>(0,q.jsx)(Rt,{item:e,index:n,sortable:o,rowVariant:c,removeVariant:l,hideRemove:u,disabled:f,strings:h,onRemove:r,renderRow:t},e.id))});return(0,q.jsxs)(`div`,{className:I(`space-y-3`,m),children:[e.length===0?(0,q.jsx)(`div`,{className:`rounded-md border border-dashed border-input p-4`,children:(0,q.jsx)(a,{type:`secondary`,children:h.emptyState})}):o?(0,q.jsx)(g,{sensors:S,collisionDetection:x,onDragEnd:w,children:(0,q.jsx)(D,{items:T,strategy:b,children:O})}):O,!d&&(0,q.jsxs)(s,{type:`button`,variant:`secondary`,buttonStyle:`outline`,size:`sm`,disabled:f,onClick:n,children:[(0,q.jsx)(A,{className:`size-4 mr-1.5`}),h.addButton]})]})}zt.displayName=`Repeater`;var Bt={keyLabel:`Key`,valueLabel:`Value`,keyPlaceholder:`key`,valuePlaceholder:`value`,addButton:`Add row`,removeRowAriaLabel:`Remove row`,emptyState:`No rows yet.`},Vt=()=>typeof crypto<`u`&&`randomUUID`in crypto?crypto.randomUUID():Math.random().toString(36).slice(2,10),Ht=(0,K.memo)(function({row:e,keyPlaceholder:t,valuePlaceholder:n,invalid:r,onKeyChange:i,onValueChange:a}){let{id:o,key:s,value:c}=e;return(0,q.jsxs)(`div`,{className:I(`key-value-editor--component`,`grid grid-cols-1 md:grid-cols-2 gap-2`),children:[(0,q.jsx)(H,{value:s??``,placeholder:t,onChange:e=>i(o,e.target.value),invalid:r}),(0,q.jsx)(H,{value:c??``,placeholder:n,onChange:e=>a(o,e.target.value),invalid:r})]})});function Ut({value:e,onChange:t,invalid:n,sortable:r=!1,keyPlaceholder:i,valuePlaceholder:a,keyLabel:o,valueLabel:s,addButtonText:c,strings:l}){let u=F(Bt,{...i===void 0?{}:{keyPlaceholder:i},...a===void 0?{}:{valuePlaceholder:a},...o===void 0?{}:{keyLabel:o},...s===void 0?{}:{valueLabel:s},...c===void 0?{}:{addButton:c},...l}),d=(0,K.useRef)(!1),[f,p]=(0,K.useState)(()=>e&&Object.keys(e).length>0?Object.entries(e).map(([e,t])=>({id:Vt(),key:e,value:String(t??``)})):[{id:Vt(),key:``,value:``}]),m=(0,K.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,K.useCallback)((e,t)=>{p(n=>{let r=n.map(n=>n.id===e?{...n,key:t}:n);return m(r),r})},[m]),g=(0,K.useCallback)((e,t)=>{p(n=>{let r=n.map(n=>n.id===e?{...n,value:t}:n);return m(r),r})},[m]),_=(0,K.useCallback)(()=>{p(e=>{let t=[...e,{id:Vt(),key:``,value:``}];return m(t),t})},[m]),v=(0,K.useCallback)(e=>{p(t=>{let n=t.filter((t,n)=>n!==e),r=n.length?n:[{id:Vt(),key:``,value:``}];return m(r),r})},[m]),y=(0,K.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,q.jsxs)(`div`,{className:`space-y-2`,children:[(!!u.keyLabel||!!u.valueLabel)&&(0,q.jsxs)(`div`,{className:I(`grid grid-cols-1 md:grid-cols-2 gap-2`,r?`pl-11`:``,`pr-11`),children:[!!u.keyLabel&&(0,q.jsx)(R,{className:`flex items-center`,children:u.keyLabel}),!!u.valueLabel&&(0,q.jsx)(R,{className:`flex items-center`,children:u.valueLabel})]}),(0,q.jsx)(zt,{items:f,sortable:r,onAdd:_,onRemove:v,onMove:y,strings:{emptyState:u.emptyState,addButton:u.addButton,removeAriaLabel:u.removeRowAriaLabel},renderRow:e=>(0,q.jsx)(Ht,{row:e,keyPlaceholder:u.keyPlaceholder,valuePlaceholder:u.valuePlaceholder,invalid:n,onKeyChange:h,onValueChange:g})})]})}Ut.displayName=`KeyValueEditor`;var Wt={placeholder:`Enter value`,addButton:`Add item`,...Z};function Gt({name:e,placeholder:t,addButtonText:n,emptyMessage:r,invalid:i,sortable:a=!1,strings:o}){let s=F(Wt,{...t===void 0?{}:{placeholder:t},...n===void 0?{}:{addButton:n},...r===void 0?{}:{emptyState:r},...o}),{control:c,register:l}=z(),{fields:u,append:d,remove:f,move:p}=he({control:c,name:e});return(0,q.jsx)(zt,{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,q.jsx)(H,{...l(`${e}.${n}`),placeholder:s.placeholder,invalid:i})})}Gt.displayName=`StringRepeater`;var Kt={addButton:`Add item`,...Z};function qt({name:e,fields:t,addButtonText:n,emptyMessage:r,invalid:i,sortable:a=!1,strings:o}){let s=F(Kt,{...n===void 0?{}:{addButton:n},...r===void 0?{}:{emptyState:r},...o}),{control:c,register:l}=z(),{fields:u,append:d,remove:f,move:p}=he({control:c,name:e}),m=(0,K.useCallback)(()=>t.reduce((e,t)=>(e[t.name]=``,e),{}),[t]);return(0,q.jsx)(zt,{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,q.jsx)(`div`,{className:I(`object-repeater--component`,`space-y-3`),children:t.map(t=>{let n=`${e}.${r}.${t.name}`;return(0,q.jsx)(G,{label:t.label,required:t.required,hint:t.hint,htmlFor:n,children:t.type===`textarea`?(0,q.jsx)(U,{...l(n),id:n,placeholder:t.placeholder,minRows:3,invalid:i}):(0,q.jsx)(H,{...l(n),id:n,type:t.type||`text`,placeholder:t.placeholder,invalid:i})},t.name)})})})}qt.displayName=`ObjectRepeater`;var Jt={addButton:`Add item`,emptyState:Z.emptyState,dragHandle:`Drag to reorder`,removeAriaLabel:Z.removeAriaLabel};function Yt({name:e,placeholder:t,addButtonText:n,emptyMessage:r,disableSort:i=!1,invalid:a,strings:o}){let s=F(Jt,{...n===void 0?{}:{addButton:n},...r===void 0?{}:{emptyState:r},...o??{}}),{control:c,register:l}=z(),{fields:u,append:d,remove:f,move:p}=he({control:c,name:e});return(0,q.jsx)(zt,{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,q.jsx)(H,{...l(`${e}.${r}`),placeholder:t,invalid:a})})}Yt.displayName=`List`;function Xt({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=_e(a,d),p=K.useCallback(e=>{e===t?i&&r(null):r(e)},[i,r,t]);return(0,q.jsx)(`div`,{"data-name":e,role:`radiogroup`,"aria-invalid":l||void 0,className:I(`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,q.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:I(`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`,Ee[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,q.jsx)(i,{className:I(`size-3.5`,e.label&&`mr-1.5`)}),e.label]},e.value)})})}Xt.displayName=`PillRadioGroup`;function Zt({name:e,type:t=`text`,placeholder:n,primaryLocale:r,secondaryLocale:i,activeLocale:a,invalid:o,className:s}){let{register:c}=z(),l=`${e}.${a===`primary`?r:i}`;return t===`textarea`?(0,q.jsx)(U,{...c(l),placeholder:n,minRows:3,invalid:o,className:I(`localized-string-field--component`,s)}):(0,q.jsx)(H,{...c(l),type:t===`number`?`number`:`text`,placeholder:n,invalid:o,className:s})}Zt.displayName=`LocalizedStringField`;function Qt({name:e,fields:t,primaryLocale:n,secondaryLocale:r,activeLocale:i,invalid:a,className:o}){let{register:s}=z(),c=i===`primary`?n:r;return(0,q.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,q.jsxs)(`div`,{className:`w-full space-y-1.5`,children:[(0,q.jsxs)(R,{htmlFor:n,children:[t.label,!!t.required&&(0,q.jsx)(`span`,{className:`text-destructive ml-1`,children:`*`})]}),t.type===`textarea`?(0,q.jsx)(U,{...s(n),id:n,placeholder:t.placeholder,minRows:3,invalid:a}):(0,q.jsx)(H,{...s(n),id:n,type:t.type===`number`?`number`:`text`,placeholder:t.placeholder,invalid:a})]},t.name)})})}Qt.displayName=`LocalizedObjectField`;var $t={placeholder:`Enter value`,addButton:Z.addItem,emptyState:Z.emptyState,removeAriaLabel:Z.removeAriaLabel};function en({name:e,placeholder:t,addButtonText:n,emptyMessage:r,primaryLocale:i,secondaryLocale:a,activeLocale:o,invalid:s,sortable:c=!1,strings:l}){let u=F($t,{...t===void 0?{}:{placeholder:t},...n===void 0?{}:{addButton:n},...r===void 0?{}:{emptyState:r},...l??{}}),{control:d,register:f}=z(),p=`${e}.${o===`primary`?i:a}`,{fields:m,append:h,remove:g,move:_}=he({control:d,name:p});return(0,q.jsx)(zt,{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,q.jsx)(U,{...f(`${p}.${t}`),placeholder:u.placeholder,minRows:2,invalid:s})})}en.displayName=`LocalizedStringRepeater`;function tn({title:e,description:t,actions:n,children:r,footer:i,padding:a=`sm`,surface:o=`card`,className:s,contentClassName:c}){return(0,q.jsx)(me,{"data-component":`form-section`,"data-slot":`form-section`,title:e,description:t,headerAction:n,footerSlot:i,padding:a,surface:o,className:I(`form-section--component`,s),contentClassName:I(`form-section--content grid gap-4`,c),children:r})}function nn({children:e,leading:t,trailing:n,sticky:r=!1,className:i}){return(0,q.jsxs)(`div`,{"data-component":`form-actions-bar`,"data-slot":`form-actions-bar`,className:I(`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,q.jsx)(`div`,{"data-slot":`form-actions-leading`,className:`form-actions-bar--leading min-w-0 flex-1`,children:t}),(0,q.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 rn({title:e,description:t,errors:n=[],action:r,className:i}){return(0,q.jsxs)(pe,{"data-component":`error-summary`,"data-slot":`error-summary`,variant:`destructive`,className:I(`error-summary--component`,i),children:[(0,q.jsx)(ue,{children:e}),!!t&&(0,q.jsx)(fe,{children:t}),n.length>0&&(0,q.jsx)(`ul`,{"data-slot":`error-summary-list`,className:`error-summary--list col-start-2 m-0 list-disc space-y-1 pl-4 text-xs text-muted-foreground`,children:n.map((e,t)=>(0,q.jsx)(`li`,{children:e},t))}),!!r&&(0,q.jsx)(de,{children:r})]})}function an({title:e,description:t,actions:n,variant:r=`warning`,className:i}){return(0,q.jsxs)(pe,{"data-component":`dirty-state-banner`,"data-slot":`dirty-state-banner`,variant:r,className:I(`dirty-state-banner--component`,i),children:[(0,q.jsx)(ue,{children:e}),!!t&&(0,q.jsx)(fe,{children:t}),!!n&&(0,q.jsx)(de,{children:n})]})}function on({isSubmitting:e=!1,isDirty:t=!0,disableWhenPristine:n=!1,disabled:r,children:i,...a}){return(0,q.jsx)(s,{...a,"data-component":`submit-state-button`,"data-slot":`submit-state-button`,type:a.type??`submit`,loading:e,disabled:r||n&&!t,className:I(`submit-state-button--component`,a.className),children:i})}var sn=e({AvatarUploadExample:()=>Xn,BasicField:()=>cn,CardCheckboxGroupExample:()=>In,CardRadioGroupExample:()=>Fn,CheckboxExample:()=>An,CoordinatesInputExample:()=>Hn,CurrencyInputExample:()=>Sn,DateTimeInputExample:()=>Ln,DecimalInputExample:()=>bn,DimensionsInputExample:()=>Tn,DropzoneExample:()=>Zn,InputBasic:()=>fn,InputCharacterCount:()=>vn,InputClearableLoading:()=>_n,InputWithAddons:()=>gn,InputWithIcons:()=>pn,KeyValueEditorExample:()=>Gn,ListExample:()=>Kn,ListRadioGroupExample:()=>Pn,LocalizedObjectFieldExample:()=>Jn,LocalizedStringFieldExample:()=>qn,LocalizedStringRepeaterExample:()=>Yn,MoneyInputExample:()=>Cn,ObjectRepeaterExample:()=>Wn,PasswordInputExample:()=>mn,PercentageInputExample:()=>xn,PhoneInputExample:()=>Vn,PillRadioGroupExample:()=>Nn,RichSelectExample:()=>Dn,RoundingModeSelectExample:()=>On,SelectExample:()=>En,SliderExample:()=>zn,SlugFieldExample:()=>hn,StringRepeaterExample:()=>Un,SwitchCardExample:()=>Mn,SwitchExample:()=>kn,TagsInputExample:()=>Bn,TextareaExample:()=>yn,TimePickerExample:()=>Rn,ToggleFieldExample:()=>jn,WeightInputExample:()=>wn,WholeForm:()=>Qn,WithError:()=>ln,WithHelperText:()=>un,WorkflowChrome:()=>dn});function cn(){let[e,t]=(0,K.useState)(``);return(0,q.jsx)(G,{label:`Full name`,hint:`As it appears on your ID`,required:!0,children:(0,q.jsx)(H,{value:e,onChange:e=>t(e.target.value),placeholder:`Sarah Smitha`})})}function ln(){return(0,q.jsx)(G,{label:`Email`,error:`That doesn't look like a valid email.`,required:!0,children:(0,q.jsx)(H,{defaultValue:`not-an-email`,invalid:!0})})}function un(){return(0,q.jsx)(G,{label:`API token`,helperText:`Stored encrypted at rest. Rotate every 90 days.`,children:(0,q.jsx)(H,{defaultValue:`sk_live_••••••••••••`})})}function dn(){return(0,q.jsxs)(`div`,{className:`grid gap-3`,children:[(0,q.jsx)(tn,{title:`Publishing`,description:`Section chrome, validation summary, dirty state, and submit state stay reusable across form libraries.`,actions:(0,q.jsx)(s,{variant:`secondary`,size:`sm`,children:`Reset`}),children:(0,q.jsxs)(`div`,{className:`grid gap-3 sm:grid-cols-2`,children:[(0,q.jsx)(G,{label:`Display title`,required:!0,children:(0,q.jsx)(H,{defaultValue:`Summer collection`})}),(0,q.jsx)(G,{label:`Status`,children:(0,q.jsx)(be,{defaultValue:`draft`,options:[{value:`draft`,label:`Draft`},{value:`published`,label:`Published`}]})})]})}),(0,q.jsx)(rn,{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,q.jsx)(an,{title:`Unsaved changes`,description:`Save or discard before leaving this workflow.`,actions:(0,q.jsx)(s,{variant:`secondary`,size:`sm`,children:`Discard`})}),(0,q.jsx)(nn,{leading:(0,q.jsx)(`span`,{className:`text-xs text-muted-foreground`,children:`Last saved 2 minutes ago`}),trailing:(0,q.jsx)(on,{isDirty:!0,children:`Save changes`})})]})}function fn(){return(0,q.jsxs)(`div`,{className:`flex w-full max-w-sm flex-col gap-3`,children:[(0,q.jsx)(H,{placeholder:`Type something…`}),(0,q.jsx)(H,{"aria-label":`Pre-filled value`,defaultValue:`Pre-filled value`}),(0,q.jsx)(H,{"aria-label":`Disabled example`,disabled:!0,defaultValue:`Disabled`})]})}function pn(){return(0,q.jsxs)(`div`,{className:`flex w-full max-w-sm flex-col gap-3`,children:[(0,q.jsx)(H,{startIcon:te,placeholder:`Search orders…`}),(0,q.jsx)(H,{endIcon:k,placeholder:`you@example.com`}),(0,q.jsx)(m,{"aria-label":`Password`,startIcon:O,defaultValue:`hunter2`})]})}function mn(){return(0,q.jsx)(`div`,{className:`w-full max-w-sm`,children:(0,q.jsx)(G,{label:`Password`,hint:`The reveal button is keyboard and screen-reader accessible.`,children:(0,q.jsx)(m,{placeholder:`Enter password`,autoComplete:`current-password`})})})}function hn(){let[e,t]=(0,K.useState)(`Summer Collection: Salt & Pepper Set`);return(0,q.jsxs)(`div`,{className:`grid w-full max-w-sm gap-3`,children:[(0,q.jsx)(G,{label:`Title`,hint:`The slug below updates from this value.`,children:(0,q.jsx)(H,{value:e,onChange:e=>t(e.target.value)})}),(0,q.jsx)(G,{label:`Slug`,hint:`Read-only value submitted with the form.`,children:(0,q.jsx)(Be,{name:`slug`,value:e,startAddon:`/`,"aria-label":`Generated slug`})})]})}function gn(){return(0,q.jsxs)(`div`,{className:`flex w-full max-w-sm flex-col gap-3`,children:[(0,q.jsx)(H,{startAddon:`$`,placeholder:`0.00`}),(0,q.jsx)(H,{"aria-label":`Weight in kilograms`,endAddon:`kg`,defaultValue:`2.4`}),(0,q.jsx)(H,{"aria-label":`Amount in USD`,startAddon:`$`,endAddon:`USD`,defaultValue:`49.00`})]})}function _n(){let[e,t]=(0,K.useState)(`Click the × to clear`);return(0,q.jsxs)(`div`,{className:`flex w-full max-w-sm flex-col gap-3`,children:[(0,q.jsx)(H,{clearable:!0,"aria-label":`Clearable value`,value:e,onChange:e=>t(e.target.value),onClear:()=>t(``)}),(0,q.jsx)(H,{"aria-label":`Loading value`,isLoading:!0,defaultValue:`Loading…`}),(0,q.jsx)(H,{"aria-label":`Invalid value`,invalid:!0,defaultValue:`Invalid value`})]})}function vn(){let[e,t]=(0,K.useState)(`A short bio`);return(0,q.jsx)(`div`,{className:`w-full max-w-sm`,children:(0,q.jsx)(H,{value:e,"aria-label":`Biography`,onChange:e=>t(e.target.value),maxLength:60,showCharacterCount:!0})})}function yn(){let[e,t]=(0,K.useState)(``);return(0,q.jsxs)(`div`,{className:`flex w-full max-w-md flex-col gap-3`,children:[(0,q.jsx)(G,{label:`Description`,hint:`Up to 200 characters.`,children:(0,q.jsx)(U,{value:e,onChange:e=>t(e.target.value),placeholder:`Write a description…`,maxLength:200,showCharacterCount:!0})}),(0,q.jsx)(G,{label:`Read-only field`,children:(0,q.jsx)(U,{defaultValue:`Read-only content the user cannot edit.`,disabled:!0,rows:2})}),(0,q.jsx)(G,{label:`Bio`,error:`Bio cannot be empty.`,required:!0,children:(0,q.jsx)(U,{invalid:!0,placeholder:`Tell us about yourself…`,rows:2})})]})}function bn(){return(0,q.jsxs)(`div`,{className:`flex w-full max-w-sm flex-col gap-3`,children:[(0,q.jsx)(G,{label:`Free-form decimal`,children:(0,q.jsx)(W,{defaultValue:`1234.56`,decimalPlaces:2})}),(0,q.jsx)(G,{label:`With steppers (1–100)`,children:(0,q.jsx)(`div`,{className:`w-44`,children:(0,q.jsx)(W,{defaultValue:`10`,step:1,min:0,max:100})})}),(0,q.jsx)(G,{label:`Allows negative`,children:(0,q.jsx)(W,{placeholder:`0.00`,decimalPlaces:2,allowNegative:!0})})]})}function xn(){return(0,q.jsxs)(`div`,{className:`flex w-full max-w-sm flex-col gap-3`,children:[(0,q.jsx)(G,{label:`Discount`,children:(0,q.jsx)(Xe,{defaultValue:`12.5`})}),(0,q.jsx)(G,{label:`Tax rate (whole-number steppers)`,children:(0,q.jsx)(`div`,{className:`w-44`,children:(0,q.jsx)(Xe,{defaultValue:`20`,decimalPlaces:0,step:5})})})]})}function Sn(){return(0,q.jsx)(`div`,{className:`w-full max-w-sm`,children:(0,q.jsx)(rt,{defaultValue:`2450.00`,defaultCurrency:`USD`,currencies:[`USD`,`EUR`,`GBP`]})})}function Cn(){return(0,q.jsx)(`div`,{className:`w-full max-w-sm`,children:(0,q.jsx)(at,{defaultValue:`49.99`,defaultCurrency:`USD`})})}function wn(){return(0,q.jsx)(`div`,{className:`w-full max-w-sm`,children:(0,q.jsx)(vt,{defaultValue:`2.4`,defaultUnit:`kg`})})}function Tn(){return(0,q.jsx)(`div`,{className:`w-full max-w-md`,children:(0,q.jsx)(ht,{defaultValue:{width:`30`,height:`20`,depth:`10`},format:`object`,unit:`g`})})}function En(){return(0,q.jsx)(`div`,{className:`w-full max-w-sm`,children:(0,q.jsx)(be,{options:[{value:`paid`,label:`Paid`},{value:`pending`,label:`Pending`},{value:`overdue`,label:`Overdue`}],placeholder:`Pick a status…`,allowClear:!0})})}function Dn(){return(0,q.jsx)(`div`,{className:`w-full max-w-md`,children:(0,q.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 On(){return(0,q.jsx)(`div`,{className:`w-full max-w-sm`,children:(0,q.jsx)(G,{label:`Rounding mode`,children:(0,q.jsx)(st,{defaultValue:`half_up`,labels:{floor:`Round down (floor)`,half_up:`Round half up`,ceil:`Round up (ceil)`}})})})}function kn(){let[e,t]=(0,K.useState)(!0);return(0,q.jsxs)(`div`,{className:`flex flex-col gap-3`,children:[(0,q.jsxs)(`label`,{className:`flex items-center gap-2 text-sm`,children:[(0,q.jsx)(we,{checked:e,onCheckedChange:e=>t(!!e.target.value)}),`Enable notifications`]}),(0,q.jsxs)(`label`,{className:`flex items-center gap-2 text-sm`,children:[(0,q.jsx)(we,{defaultChecked:!0,disabled:!0}),`Disabled (on)`]}),(0,q.jsxs)(`label`,{className:`flex items-center gap-2 text-sm`,children:[(0,q.jsx)(we,{invalid:!0}),`Invalid state`]})]})}function An(){return(0,q.jsxs)(`div`,{className:`flex flex-col gap-3`,children:[(0,q.jsxs)(`label`,{className:`flex items-center gap-2 text-sm`,children:[(0,q.jsx)(ge,{defaultChecked:!0}),`I agree to the terms`]}),(0,q.jsxs)(`label`,{className:`flex items-center gap-2 text-sm`,children:[(0,q.jsx)(ge,{}),`Subscribe to the newsletter`]}),(0,q.jsxs)(`label`,{className:`flex items-center gap-2 text-sm`,children:[(0,q.jsx)(ge,{disabled:!0,defaultChecked:!0}),`Disabled (checked)`]})]})}function jn(){return(0,q.jsxs)(`div`,{className:`flex w-full max-w-md flex-col gap-3`,children:[(0,q.jsx)(xe,{label:`Email digest`,description:`Receive a weekly summary every Monday.`,defaultValue:!0}),(0,q.jsx)(xe,{kind:`checkbox`,label:`Beta features`,description:`Opt in to in-progress experiments. May be unstable.`}),(0,q.jsx)(xe,{label:`Leading control`,controlPosition:`leading`,defaultValue:!0})]})}function Mn(){return(0,q.jsxs)(`div`,{className:`flex w-full max-w-md flex-col gap-3`,children:[(0,q.jsx)(Se,{icon:j,label:`Two-factor authentication`,description:`Require a one-time code on every sign-in.`,defaultValue:!0}),(0,q.jsx)(Se,{icon:ee,label:`Auto-deploy`,description:`Push to production on every merge to main.`})]})}function Nn(){let[e,t]=(0,K.useState)(`week`);return(0,q.jsx)(Xt,{name:`range`,value:e,onChange:t,options:[{value:`day`,label:`Day`},{value:`week`,label:`Week`},{value:`month`,label:`Month`},{value:`year`,label:`Year`}]})}function Pn(){return(0,q.jsx)(`div`,{className:`w-full max-w-md`,children:(0,q.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 Fn(){return(0,q.jsx)(`div`,{className:`w-full max-w-2xl`,children:(0,q.jsx)(ke,{name:`plan`,defaultValue:`pro`,columns:3,options:[{value:`free`,label:`Free`,description:`3 projects`,icon:M},{value:`pro`,label:`Pro`,description:`Unlimited`,icon:ee},{value:`team`,label:`Team`,description:`Workspaces`,icon:h}]})})}function In(){return(0,q.jsx)(`div`,{className:`w-full max-w-2xl`,children:(0,q.jsx)(De,{name:`features`,defaultValue:[`analytics`],columns:3,options:[{value:`analytics`,label:`Analytics`,description:`Realtime dashboards`,icon:M},{value:`webhooks`,label:`Webhooks`,description:`Outbound events`,icon:ee},{value:`sso`,label:`SSO`,description:`SAML & SCIM`,icon:j}]})})}function Ln(){let[e,t]=(0,K.useState)(void 0);return(0,q.jsxs)(`div`,{className:`flex w-full max-w-sm flex-col gap-2`,children:[(0,q.jsx)(wt,{value:e,onChange:t,placeholder:`Pick a date…`}),(0,q.jsxs)(`div`,{className:`text-xs text-muted-foreground`,children:[`value: `,e??`—`]})]})}function Rn(){let[e,t]=(0,K.useState)(`09:30:00`);return(0,q.jsxs)(`div`,{className:`flex w-full max-w-sm flex-col gap-2`,children:[(0,q.jsx)(Ot,{value:e,onChange:t}),(0,q.jsxs)(`div`,{className:`text-xs text-muted-foreground`,children:[`value: `,e]})]})}function zn(){let[e,t]=(0,K.useState)(40);return(0,q.jsxs)(`div`,{className:`flex w-full max-w-md flex-col gap-2`,children:[(0,q.jsx)(Qe,{value:e,onValueChange:t,min:0,max:100,step:5}),(0,q.jsxs)(`div`,{className:`text-xs text-muted-foreground`,children:[`value: `,e]})]})}function Bn(){let[e,t]=(0,K.useState)([`design`,`systems`]);return(0,q.jsx)(`div`,{className:`w-full max-w-md`,children:(0,q.jsx)(Ce,{value:e,onChange:t,placeholder:`Add a tag…`,recommendations:[`typography`,`tokens`,`figma`,`a11y`]})})}function Vn(){let[e,t]=(0,K.useState)(`555 0100`);return(0,q.jsx)(`div`,{className:`w-full max-w-sm`,children:(0,q.jsx)(Ye,{"aria-label":`Phone number`,value:e,onChange:e=>t(e.target.value),defaultPrefix:`US`})})}function Hn(){return(0,q.jsx)(`div`,{className:`w-full max-w-md`,children:(0,q.jsx)(Ct,{defaultValue:{lat:`37.7749`,lng:`-122.4194`},format:`object`})})}function Un(){return(0,q.jsx)(V,{...B({defaultValues:{tags:[`alpha`,`beta`]}}),children:(0,q.jsx)(`form`,{className:`w-full max-w-md`,children:(0,q.jsx)(Gt,{name:`tags`,placeholder:`Tag name`,addButtonText:`Add tag`})})})}function Wn(){return(0,q.jsx)(V,{...B({defaultValues:{contacts:[{name:`Sarah Smitha`,email:`sarah@example.com`}]}}),children:(0,q.jsx)(`form`,{className:`w-full max-w-2xl`,children:(0,q.jsx)(qt,{name:`contacts`,fields:[{name:`name`,label:`Name`,placeholder:`Full name`},{name:`email`,label:`Email`,placeholder:`name@example.com`}]})})})}function Gn(){let[e,t]=(0,K.useState)({env:`production`,region:`eu-west-1`});return(0,q.jsx)(`div`,{className:`w-full max-w-2xl`,children:(0,q.jsx)(Ut,{value:e,onChange:t})})}function Kn(){return(0,q.jsx)(V,{...B({defaultValues:{aliases:[`acme`,`acme-corp`]}}),children:(0,q.jsx)(`form`,{className:`w-full max-w-md`,children:(0,q.jsx)(Yt,{name:`aliases`,placeholder:`Add an alias…`})})})}function qn(){return(0,q.jsx)(V,{...B({defaultValues:{title:{en:`Welcome`,bg:`Добре дошли`}}}),children:(0,q.jsx)(`form`,{className:`w-full max-w-md`,children:(0,q.jsx)(Zt,{name:`title`,primaryLocale:`en`,secondaryLocale:`bg`,activeLocale:`primary`,placeholder:`Page title`})})})}function Jn(){return(0,q.jsx)(V,{...B({defaultValues:{seo:{en:{title:`About`,description:`About our company.`},bg:{title:`За нас`,description:`За нашата компания.`}}}}),children:(0,q.jsx)(`form`,{className:`w-full max-w-2xl`,children:(0,q.jsx)(Qt,{name:`seo`,primaryLocale:`en`,secondaryLocale:`bg`,activeLocale:`primary`,fields:[{name:`title`,label:`Title`},{name:`description`,label:`Description`,type:`textarea`}]})})})}function Yn(){return(0,q.jsx)(V,{...B({defaultValues:{tags:{en:[`systems`,`design`],bg:[`системи`,`дизайн`]}}}),children:(0,q.jsx)(`form`,{className:`w-full max-w-md`,children:(0,q.jsx)(en,{name:`tags`,primaryLocale:`en`,secondaryLocale:`bg`,activeLocale:`primary`,placeholder:`Tag`})})})}function Xn(){return(0,q.jsx)(It,{defaultPreviewUrl:`https://api.dicebear.com/7.x/avataaars/svg?seed=sarah`})}function Zn(){return(0,q.jsx)(`div`,{className:`w-full max-w-md`,children:(0,q.jsx)(p,{accept:`image/*`,onDrop:()=>{}})})}function Qn(){let e=B({defaultValues:{name:``,sku:``,price:``,currency:`USD`,description:``,category:``,published:!1}});return(0,q.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,q.jsx)(Re,{control:e.control,name:`name`,label:`Product name`,required:!0,rules:{required:!0},children:e=>(0,q.jsx)(H,{...e,placeholder:`Vintage leather wallet`})}),(0,q.jsxs)(`div`,{className:`grid grid-cols-1 gap-4 md:grid-cols-2`,children:[(0,q.jsx)(Re,{control:e.control,name:`sku`,label:`SKU`,hint:`Inventory keeping unit.`,children:e=>(0,q.jsx)(H,{...e,placeholder:`LW-0021`,startIcon:l})}),(0,q.jsx)(Re,{control:e.control,name:`price`,label:`Price`,required:!0,rules:{required:!0},children:e=>(0,q.jsx)(at,{value:e.value,onChange:t=>e.onChange(t.target.value),defaultCurrency:`USD`})})]}),(0,q.jsx)(Re,{control:e.control,name:`category`,label:`Category`,children:e=>(0,q.jsx)(be,{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,q.jsx)(Re,{control:e.control,name:`description`,label:`Description`,children:e=>(0,q.jsx)(U,{...e,rows:3,placeholder:`What makes it special?`})}),(0,q.jsx)(Re,{control:e.control,name:`published`,label:`Visibility`,children:e=>(0,q.jsx)(xe,{label:`Published`,description:`Visible in the storefront.`,value:!!e.value,onChange:e.onChange})}),(0,q.jsxs)(`div`,{className:`flex justify-end gap-2 pt-2`,children:[(0,q.jsx)(s,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,children:`Cancel`}),(0,q.jsx)(s,{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" size="sm">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" size="sm">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 $n(e){let t={a:`a`,code:`code`,h4:`h4`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...e.components};return sn||$(`Examples`,!1),Xn||$(`Examples.AvatarUploadExample`,!0),cn||$(`Examples.BasicField`,!0),In||$(`Examples.CardCheckboxGroupExample`,!0),Fn||$(`Examples.CardRadioGroupExample`,!0),An||$(`Examples.CheckboxExample`,!0),Hn||$(`Examples.CoordinatesInputExample`,!0),Sn||$(`Examples.CurrencyInputExample`,!0),Ln||$(`Examples.DateTimeInputExample`,!0),bn||$(`Examples.DecimalInputExample`,!0),Tn||$(`Examples.DimensionsInputExample`,!0),Zn||$(`Examples.DropzoneExample`,!0),fn||$(`Examples.InputBasic`,!0),vn||$(`Examples.InputCharacterCount`,!0),_n||$(`Examples.InputClearableLoading`,!0),gn||$(`Examples.InputWithAddons`,!0),pn||$(`Examples.InputWithIcons`,!0),Gn||$(`Examples.KeyValueEditorExample`,!0),Kn||$(`Examples.ListExample`,!0),Pn||$(`Examples.ListRadioGroupExample`,!0),Jn||$(`Examples.LocalizedObjectFieldExample`,!0),qn||$(`Examples.LocalizedStringFieldExample`,!0),Yn||$(`Examples.LocalizedStringRepeaterExample`,!0),Cn||$(`Examples.MoneyInputExample`,!0),Wn||$(`Examples.ObjectRepeaterExample`,!0),mn||$(`Examples.PasswordInputExample`,!0),xn||$(`Examples.PercentageInputExample`,!0),Vn||$(`Examples.PhoneInputExample`,!0),Nn||$(`Examples.PillRadioGroupExample`,!0),Dn||$(`Examples.RichSelectExample`,!0),On||$(`Examples.RoundingModeSelectExample`,!0),En||$(`Examples.SelectExample`,!0),zn||$(`Examples.SliderExample`,!0),hn||$(`Examples.SlugFieldExample`,!0),Un||$(`Examples.StringRepeaterExample`,!0),Mn||$(`Examples.SwitchCardExample`,!0),kn||$(`Examples.SwitchExample`,!0),Bn||$(`Examples.TagsInputExample`,!0),yn||$(`Examples.TextareaExample`,!0),Rn||$(`Examples.TimePickerExample`,!0),jn||$(`Examples.ToggleFieldExample`,!0),wn||$(`Examples.WeightInputExample`,!0),Qn||$(`Examples.WholeForm`,!0),ln||$(`Examples.WithError`,!0),un||$(`Examples.WithHelperText`,!0),dn||$(`Examples.WorkflowChrome`,!0),(0,q.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,q.jsxs)(i,{title:`Overview`,id:`overview`,children:[(0,q.jsxs)(t.p,{children:[`The `,(0,q.jsx)(t.code,{children:`forms/`}),` folder ships the canonical form-row wrapper (`,(0,q.jsx)(t.code,{children:`FormField`}),` /
+`,(0,q.jsx)(t.code,{children:`ControlledFormField`}),`) plus every input primitive — `,(0,q.jsx)(t.code,{children:`Input`}),`, `,(0,q.jsx)(t.code,{children:`Textarea`}),`,
+`,(0,q.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,q.jsx)(t.code,{children:`react-hook-form`}),` — that coupling is intentional and contained to those files.`]}),(0,q.jsxs)(t.p,{children:[`Pair any field with `,(0,q.jsx)(t.code,{children:`FormField`}),` (or `,(0,q.jsx)(t.code,{children:`ControlledFormField`}),` for RHF) to inherit
+the standard label / required asterisk / error / hint rhythm. Pass `,(0,q.jsx)(t.code,{children:`invalid`}),`
+to the inner field to flip the destructive border + ring.`]})]}),(0,q.jsxs)(i,{title:`FormField wrapper`,id:`form-field`,children:[(0,q.jsx)(c,{name:`BasicField`,source:Q,children:(0,q.jsx)(cn,{})}),(0,q.jsx)(c,{name:`WithError`,source:Q,children:(0,q.jsx)(ln,{})}),(0,q.jsx)(c,{name:`WithHelperText`,source:Q,children:(0,q.jsx)(un,{})}),(0,q.jsx)(c,{name:`WorkflowChrome`,source:Q,children:(0,q.jsx)(dn,{})})]}),(0,q.jsxs)(i,{title:`Consumer usage`,id:`usage`,children:[(0,q.jsx)(t.p,{children:`Consumers import the form row wrappers and field primitives from the exact
+package entrypoint:`}),(0,q.jsx)(t.pre,{children:(0,q.jsx)(t.code,{className:`language-tsx`,children:`import {
+	ControlledFormField,
+	FormField,
+	Input,
+	MoneyInput,
+	Select,
+	Textarea,
+	ToggleField,
+} from 'admin-ui-starter-kit/base/forms';
+`})}),(0,q.jsxs)(t.p,{children:[`Use `,(0,q.jsx)(t.code,{children:`FormField`}),` for presentational rows and custom controlled widgets. Use
+`,(0,q.jsx)(t.code,{children:`ControlledFormField`}),` when a field is bound to `,(0,q.jsx)(t.code,{children:`react-hook-form`}),`; its children
+render-prop receives `,(0,q.jsx)(t.code,{children:`(field, error, invalid, fieldState)`}),`. The wrapper already
+renders the merged backend / validation error message, so pass
+`,(0,q.jsx)(t.code,{children:`invalid={invalid}`}),` to the inner field and avoid duplicating error text inside
+the control.`]}),(0,q.jsxs)(t.p,{children:[`Searchable selects live in `,(0,q.jsx)(t.code,{children:`admin-ui-starter-kit/base/combobox`}),`, but they still
+belong inside `,(0,q.jsx)(t.code,{children:`ControlledFormField`}),` when used in forms.`]})]}),(0,q.jsxs)(i,{title:`Choosing field primitives`,id:`choosing`,children:[(0,q.jsxs)(t.ul,{children:[`
+`,(0,q.jsxs)(t.li,{children:[`Use `,(0,q.jsx)(t.code,{children:`Input`}),` and `,(0,q.jsx)(t.code,{children:`Textarea`}),` for ordinary text entry.`]}),`
+`,(0,q.jsxs)(t.li,{children:[`Use `,(0,q.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,q.jsxs)(t.li,{children:[`Use `,(0,q.jsx)(t.code,{children:`SlugField`}),` for generated read-only slugs derived from another form
+value. It renders the package `,(0,q.jsx)(t.code,{children:`Input`}),` as read-only and submits the slug value
+when a `,(0,q.jsx)(t.code,{children:`name`}),` is provided.`]}),`
+`,(0,q.jsxs)(t.li,{children:[`Use `,(0,q.jsx)(t.code,{children:`DecimalInput`}),`, `,(0,q.jsx)(t.code,{children:`PercentageInput`}),`, `,(0,q.jsx)(t.code,{children:`MoneyInput`}),`, `,(0,q.jsx)(t.code,{children:`CurrencyInput`}),`,
+`,(0,q.jsx)(t.code,{children:`WeightInput`}),`, and `,(0,q.jsx)(t.code,{children:`DimensionsInput`}),` when the value has numeric semantics.`]}),`
+`,(0,q.jsxs)(t.li,{children:[`Use `,(0,q.jsx)(t.code,{children:`Select`}),` or `,(0,q.jsx)(t.code,{children:`RichSelect`}),` for finite option sets; use
+`,(0,q.jsx)(t.code,{children:`EnhancedCombobox`}),` when options are searchable, async, grouped, or creatable.`]}),`
+`,(0,q.jsxs)(t.li,{children:[`Use `,(0,q.jsx)(t.code,{children:`Switch`}),`, `,(0,q.jsx)(t.code,{children:`Checkbox`}),`, `,(0,q.jsx)(t.code,{children:`ToggleField`}),`, and `,(0,q.jsx)(t.code,{children:`SwitchCard`}),` for boolean state.`]}),`
+`,(0,q.jsxs)(t.li,{children:[`Use `,(0,q.jsx)(t.code,{children:`PillRadioGroup`}),`, `,(0,q.jsx)(t.code,{children:`ListRadioGroup`}),`, `,(0,q.jsx)(t.code,{children:`CardRadioGroup`}),`, and
+`,(0,q.jsx)(t.code,{children:`CardCheckboxGroup`}),` when options need richer scanning affordances.`]}),`
+`,(0,q.jsxs)(t.li,{children:[`Use `,(0,q.jsx)(t.code,{children:`DateTimeInput`}),`, `,(0,q.jsx)(t.code,{children:`TimePicker`}),`, `,(0,q.jsx)(t.code,{children:`TagsInput`}),`, `,(0,q.jsx)(t.code,{children:`PhoneInput`}),`, and
+`,(0,q.jsx)(t.code,{children:`CoordinatesInput`}),` for domain-specific values instead of reassembling those
+behaviours from generic inputs.`]}),`
+`,(0,q.jsxs)(t.li,{children:[`Use the repeater and localized-field families only when the form already uses
+`,(0,q.jsx)(t.code,{children:`react-hook-form`}),`; they intentionally bind to RHF because they manage nested
+arrays and locale-keyed objects.`]}),`
+`]}),(0,q.jsxs)(t.p,{children:[`Do not use `,(0,q.jsx)(t.code,{children:`Item`}),` for form controls. `,(0,q.jsx)(t.code,{children:`Item`}),` is for display/action rows;
+`,(0,q.jsx)(t.code,{children:`FormField`}),` is the canonical label + control + hint/error row.`]})]}),(0,q.jsxs)(i,{title:`Text inputs`,id:`text-inputs`,children:[(0,q.jsx)(c,{name:`InputBasic`,source:Q,children:(0,q.jsx)(fn,{})}),(0,q.jsx)(c,{name:`InputWithIcons`,source:Q,children:(0,q.jsx)(pn,{})}),(0,q.jsx)(c,{name:`PasswordInputExample`,source:Q,children:(0,q.jsx)(mn,{})}),(0,q.jsx)(c,{name:`SlugFieldExample`,source:Q,children:(0,q.jsx)(hn,{})}),(0,q.jsx)(c,{name:`InputWithAddons`,source:Q,children:(0,q.jsx)(gn,{})}),(0,q.jsx)(c,{name:`InputClearableLoading`,source:Q,children:(0,q.jsx)(_n,{})}),(0,q.jsx)(c,{name:`InputCharacterCount`,source:Q,children:(0,q.jsx)(vn,{})}),(0,q.jsx)(c,{name:`TextareaExample`,source:Q,children:(0,q.jsx)(yn,{})})]}),(0,q.jsxs)(i,{title:`Numeric inputs`,id:`numeric`,children:[(0,q.jsx)(c,{name:`DecimalInputExample`,source:Q,children:(0,q.jsx)(bn,{})}),(0,q.jsx)(c,{name:`PercentageInputExample`,source:Q,children:(0,q.jsx)(xn,{})}),(0,q.jsx)(c,{name:`CurrencyInputExample`,source:Q,children:(0,q.jsx)(Sn,{})}),(0,q.jsx)(c,{name:`MoneyInputExample`,source:Q,children:(0,q.jsx)(Cn,{})}),(0,q.jsx)(c,{name:`WeightInputExample`,source:Q,children:(0,q.jsx)(wn,{})}),(0,q.jsx)(c,{name:`DimensionsInputExample`,source:Q,children:(0,q.jsx)(Tn,{})})]}),(0,q.jsxs)(i,{title:`Selects`,id:`selects`,children:[(0,q.jsx)(c,{name:`SelectExample`,source:Q,children:(0,q.jsx)(En,{})}),(0,q.jsx)(c,{name:`RichSelectExample`,source:Q,children:(0,q.jsx)(Dn,{})}),(0,q.jsx)(c,{name:`RoundingModeSelectExample`,source:Q,children:(0,q.jsx)(On,{})})]}),(0,q.jsxs)(i,{title:`Toggles & checkboxes`,id:`toggles`,children:[(0,q.jsx)(c,{name:`SwitchExample`,source:Q,children:(0,q.jsx)(kn,{})}),(0,q.jsx)(c,{name:`CheckboxExample`,source:Q,children:(0,q.jsx)(An,{})}),(0,q.jsx)(c,{name:`ToggleFieldExample`,source:Q,children:(0,q.jsx)(jn,{})}),(0,q.jsx)(c,{name:`SwitchCardExample`,source:Q,children:(0,q.jsx)(Mn,{})})]}),(0,q.jsxs)(i,{title:`Choice groups`,id:`choice-groups`,children:[(0,q.jsx)(c,{name:`PillRadioGroupExample`,source:Q,children:(0,q.jsx)(Nn,{})}),(0,q.jsx)(c,{name:`ListRadioGroupExample`,source:Q,children:(0,q.jsx)(Pn,{})}),(0,q.jsx)(c,{name:`CardRadioGroupExample`,source:Q,children:(0,q.jsx)(Fn,{})}),(0,q.jsx)(c,{name:`CardCheckboxGroupExample`,source:Q,children:(0,q.jsx)(In,{})})]}),(0,q.jsxs)(i,{title:`Date & time`,id:`date-time`,children:[(0,q.jsx)(c,{name:`DateTimeInputExample`,source:Q,children:(0,q.jsx)(Ln,{})}),(0,q.jsx)(c,{name:`TimePickerExample`,source:Q,children:(0,q.jsx)(Rn,{})})]}),(0,q.jsxs)(i,{title:`Other inputs`,id:`other`,children:[(0,q.jsx)(c,{name:`SliderExample`,source:Q,children:(0,q.jsx)(zn,{})}),(0,q.jsx)(c,{name:`TagsInputExample`,source:Q,children:(0,q.jsx)(Bn,{})}),(0,q.jsx)(c,{name:`PhoneInputExample`,source:Q,children:(0,q.jsx)(Vn,{})}),(0,q.jsx)(c,{name:`CoordinatesInputExample`,source:Q,children:(0,q.jsx)(Hn,{})})]}),(0,q.jsxs)(i,{title:`Repeaters`,id:`repeaters`,children:[(0,q.jsxs)(t.p,{children:[`These four primitives — `,(0,q.jsx)(t.code,{children:`StringRepeater`}),`, `,(0,q.jsx)(t.code,{children:`ObjectRepeater`}),`, `,(0,q.jsx)(t.code,{children:`KeyValueEditor`}),`,
+and `,(0,q.jsx)(t.code,{children:`List`}),` — share the underlying `,(0,q.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,q.jsx)(c,{name:`StringRepeaterExample`,source:Q,children:(0,q.jsx)(Un,{})}),(0,q.jsx)(c,{name:`ObjectRepeaterExample`,source:Q,children:(0,q.jsx)(Wn,{})}),(0,q.jsx)(c,{name:`KeyValueEditorExample`,source:Q,children:(0,q.jsx)(Gn,{})}),(0,q.jsx)(c,{name:`ListExample`,source:Q,children:(0,q.jsx)(Kn,{})})]}),(0,q.jsxs)(i,{title:`Localized fields`,id:`localized`,children:[(0,q.jsxs)(t.p,{children:[`The localized field family edits per-locale objects (e.g. `,(0,q.jsx)(t.code,{children:`{ en: '…', bg: '…' }`}),`)
+with a single field surface. Pass `,(0,q.jsx)(t.code,{children:`primaryLocale`}),` / `,(0,q.jsx)(t.code,{children:`secondaryLocale`}),` and the
+currently `,(0,q.jsx)(t.code,{children:`activeLocale`}),`. RHF-coupled.`]}),(0,q.jsx)(c,{name:`LocalizedStringFieldExample`,source:Q,children:(0,q.jsx)(qn,{})}),(0,q.jsx)(c,{name:`LocalizedObjectFieldExample`,source:Q,children:(0,q.jsx)(Jn,{})}),(0,q.jsx)(c,{name:`LocalizedStringRepeaterExample`,source:Q,children:(0,q.jsx)(Yn,{})})]}),(0,q.jsxs)(i,{title:`Uploads`,id:`uploads`,children:[(0,q.jsxs)(t.p,{children:[`The full upload subsystem (`,(0,q.jsx)(t.code,{children:`UploadTray`}),`, `,(0,q.jsx)(t.code,{children:`MediaGallery`}),`, `,(0,q.jsx)(t.code,{children:`FileUpload`}),`,
+`,(0,q.jsx)(t.code,{children:`ImageUpload`}),`, `,(0,q.jsx)(t.code,{children:`UploadProgressList`}),`) lives on the dedicated
+`,(0,q.jsx)(t.a,{href:`/base/upload-tray`,children:(0,q.jsx)(t.code,{children:`base/upload-tray`})}),` page. The two field-shaped
+upload primitives appear here for completeness.`]}),(0,q.jsx)(c,{name:`AvatarUploadExample`,source:Q,children:(0,q.jsx)(Xn,{})}),(0,q.jsx)(c,{name:`DropzoneExample`,source:Q,children:(0,q.jsx)(Zn,{})})]}),(0,q.jsxs)(i,{title:`Whole form`,id:`whole-form`,children:[(0,q.jsxs)(t.p,{children:[`A realistic product form combining `,(0,q.jsx)(t.code,{children:`Input`}),`, `,(0,q.jsx)(t.code,{children:`MoneyInput`}),`, `,(0,q.jsx)(t.code,{children:`Select`}),`,
+`,(0,q.jsx)(t.code,{children:`Textarea`}),`, and `,(0,q.jsx)(t.code,{children:`ToggleField`}),` behind `,(0,q.jsx)(t.code,{children:`ControlledFormField`}),` and
+`,(0,q.jsx)(t.code,{children:`react-hook-form`}),`.`]}),(0,q.jsx)(c,{name:`WholeForm`,source:Q,children:(0,q.jsx)(Qn,{})})]}),(0,q.jsxs)(i,{title:`API`,id:`api`,children:[(0,q.jsx)(t.h4,{children:`FormField`}),(0,q.jsx)(L,{component:`FormField`}),(0,q.jsx)(t.h4,{children:`ControlledFormField`}),(0,q.jsx)(L,{component:`ControlledFormField`}),(0,q.jsx)(t.h4,{children:`Workflow chrome`}),(0,q.jsx)(L,{component:`FormSection`}),(0,q.jsx)(L,{component:`FormActionsBar`}),(0,q.jsx)(L,{component:`ErrorSummary`}),(0,q.jsx)(L,{component:`DirtyStateBanner`}),(0,q.jsx)(L,{component:`SubmitStateButton`}),(0,q.jsx)(t.h4,{children:`Text fields`}),(0,q.jsx)(L,{component:`Input`}),(0,q.jsx)(L,{component:`PasswordInput`}),(0,q.jsx)(L,{component:`SlugField`}),(0,q.jsx)(L,{component:`Textarea`}),(0,q.jsx)(t.h4,{children:`Select fields`}),(0,q.jsx)(L,{component:`Select`}),(0,q.jsx)(L,{component:`RichSelect`}),(0,q.jsx)(t.h4,{children:`Numeric fields`}),(0,q.jsx)(L,{component:`DecimalInput`}),(0,q.jsx)(L,{component:`PercentageInput`}),(0,q.jsx)(L,{component:`MoneyInput`}),(0,q.jsx)(L,{component:`CurrencyInput`}),(0,q.jsx)(t.h4,{children:`Boolean fields`}),(0,q.jsx)(L,{component:`Switch`}),(0,q.jsx)(L,{component:`Checkbox`}),(0,q.jsx)(L,{component:`ToggleField`}),(0,q.jsx)(t.h4,{children:`Choice groups`}),(0,q.jsx)(L,{component:`PillRadioGroup`}),(0,q.jsx)(L,{component:`ListRadioGroup`}),(0,q.jsx)(L,{component:`CardRadioGroup`}),(0,q.jsx)(L,{component:`CardCheckboxGroup`}),(0,q.jsx)(t.h4,{children:`Domain fields`}),(0,q.jsx)(L,{component:`DateTimeInput`}),(0,q.jsx)(L,{component:`TagsInput`}),(0,q.jsx)(L,{component:`PhoneInput`})]})]})}function er(e={}){let{wrapper:t}=e.components||{};return t?(0,q.jsx)(t,{...e,children:(0,q.jsx)($n,{...e})}):$n(e)}function $(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{er as default};