@customafk/lunas-ui 0.2.5 → 0.2.7

package/dist/features/tanstack-form/index.mjs

@@ -1,2 +1 @@
-import"../../heading-CrF1CFWS.mjs";import"../../paragraph-DmiXlAnE.mjs";import"../../button.variants-B_dFX3i2.mjs";import{t as e}from"../../button-D8BUqpI2.mjs";import{t}from"../../separator-Bf0gymN4.mjs";import{t as n}from"../../close-DfuHB7kq.mjs";import{c as r,l as i,r as a,s as o,t as s}from"../../dialog-B50k7HnL.mjs";import{t as c}from"../../checkbox-Bg2FiuQw.mjs";import{t as l}from"../../input-DMjPBcJO.mjs";import{a as u,i as d,t as f}from"../../popover-BckwBuuD.mjs";import{t as p}from"../../calendar-B-PDpHK5.mjs";import{n as m,t as h}from"../../radio-group-Cem8O6BK.mjs";import{c as g,i as _,n as v,s as y,t as b}from"../../select-CivtMKTM.mjs";import{t as x}from"../../textarea-RjL2DtNf.mjs";import{cn as S}from"@customafk/react-toolkit/utils";import{cva as C}from"class-variance-authority";import{jsx as w,jsxs as T}from"react/jsx-runtime";import{ArrowDownToLine as E,AtSignIcon as D,BanIcon as O,CalendarDaysIcon as k,EyeIcon as A,EyeOffIcon as j,Loader2 as ee,Loader2Icon as M,PackagePlusIcon as te,PlusIcon as ne,Trash2Icon as re,XIcon as ie}from"lucide-react";import{memo as N,useCallback as P,useEffect as F,useId as ae,useMemo as I,useRef as L,useState as oe}from"react";import{endOfToday as R,endOfTomorrow as se,endOfYesterday as ce,format as le,lastDayOfMonth as ue,startOfMonth as de,subDays as z}from"@customafk/react-toolkit/date-fns";import{Dialog as B,Label as fe,Separator as pe,Switch as me}from"radix-ui";import{createFormHook as he,createFormHookContexts as ge,useStore as V}from"@tanstack/react-form";const _e=C([`flex w-fit items-center justify-center rounded-full font-bold text-text-negative-strong`],{variants:{color:{default:`bg-primary-strong`,secondary:`bg-secondary-strong`,success:`bg-success-strong`,info:`bg-info-strong`,warning:`bg-warning-strong`,danger:`border border-danger-strong bg-linear-to-b from-danger-strong/90 via-danger-strong to-danger-strong/90`},size:{xs:`px-1.5 py-0.5 text-xs`,sm:`px-2 py-0.75 text-xs`,md:`px-2.5 py-0.75 text-sm`,lg:`px-3 py-1 text-sm`}},defaultVariants:{color:`default`,size:`sm`}}),ve=({label:e,color:t,size:n,className:r,children:i})=>w(`div`,{"data-slot":`required-indicator`,className:_e({color:t,size:n,className:r}),children:e||i});function ye({className:e,children:t,...n}){return T(fe.Root,{"data-slot":`label`,className:S(`text-text-positive`,`flex w-full items-center justify-between`,`select-none font-medium text-sm/6 leading-none`,`group-data-[disabled=true]:pointer-events-none`,`group-data-[disabled=true]:opacity-50`,`peer-disabled:cursor-not-allowed`,`peer-disabled:opacity-50`,`aria-required:*:data-[slot=required-indicator]:inline-block`,e),...n,children:[t,w(ve,{label:`Required`,color:`danger`,size:`sm`,className:`hidden`})]})}const be=C(`group/field flex w-full gap-2 data-[invalid=true]:text-danger *:data-[slot=field-content]:gap-0`,{variants:{orientation:{vertical:[`flex-col *:w-full [&>.sr-only]:w-auto`],horizontal:[`flex-row items-center`,`*:data-[slot=field-label]:flex-auto`,`has-[>[data-slot=field-content]]:items-start`,`has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px`],responsive:[`flex-col *:w-full [&>.sr-only]:w-auto`,`@md/field-group:flex-row`,`@md/field-group:items-center`,`@md/field-group:gap-4`,`@md/field-group:*:w-auto`,`@md/field-group:*:data-[slot=field-content]:basis-1/2`,`@md/field-group:*:data-[slot=field-content-main]:basis-1/2`,`@md/field-group:*:data-[slot=field-label]:flex-auto`,`@md/field-group:has-[>[data-slot=field-content]]:items-start`,`@md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px`]}},defaultVariants:{orientation:`vertical`}}),xe=N(({className:e,...t})=>w(`fieldset`,{"data-slot":`field-set`,className:S(`flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3`,e),...t}));xe.displayName=`FieldSet`;const Se=N(({className:e,variant:t=`legend`,...n})=>w(`legend`,{"data-slot":`field-legend`,"data-variant":t,className:S(`mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base`,e),...n}));Se.displayName=`FieldLegend`;const H=N(({className:e,...t})=>w(`div`,{"data-slot":`field-group`,className:S(`group/field-group @container/field-group`,`flex flex-col gap-7`,`data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4`,e),...t}));H.displayName=`FieldGroup`;const U=N(({className:e,orientation:t=`vertical`,...n})=>w(`div`,{"data-slot":`field`,"data-orientation":t,className:S(be({orientation:t}),e),...n}));U.displayName=`Field`;const W=N(({className:e,...t})=>w(`div`,{"data-slot":`field-content`,className:S(`group/field-content flex flex-col gap-1.5 leading-snug`,e),...t}));W.displayName=`FieldContent`;const G=N(({className:e,...t})=>w(`div`,{"data-slot":`field-content-main`,className:S(`relative`,e),...t})),K=N(({className:e,...t})=>w(ye,{"data-slot":`field-label`,className:S(`group/field-label peer/field-label flex h-6 gap-1 font-medium leading-snug`,`has-[>[data-slot=field]]:w-full`,`has-[>[data-slot=field]]:flex-col`,`has-[>[data-slot=field]]:rounded-md`,`has-[>[data-slot=field]]:border`,`has-[>[data-slot=field]]:border-border`,`has-data-[state=checked]:border-primary`,`*:data-[slot=field]:p-4 group-data-[disabled=true]/field:opacity-50`,e),...t}));K.displayName=`FieldLabel`;const q=N(({className:e,...t})=>w(`div`,{"data-slot":`field-label`,className:S(`flex w-fit items-center gap-2 font-medium text-sm leading-snug group-data-[disabled=true]/field:opacity-50`,e),...t}));q.displayName=`FieldTitle`;const J=N(({className:e,...t})=>w(`p`,{"data-slot":`field-description`,className:S(`nth-last-2:-mt-1 font-normal text-text-positive-weak text-xs leading-normal last:mt-0 [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4 [[data-variant=legend]+&]:-mt-1.5`,e),...t}));J.displayName=`FieldDescription`;const Y=N(({isShow:e=!0,className:t,...n})=>e===!1?null:w(`div`,{"data-slot":`field-note`,className:S(`text-wrap rounded border border-primary-muted bg-primary-bg-subtle p-2 text-text-positive-weak text-xs`,t),...n}));Y.displayName=`FieldNote`;const X=N(({children:e,className:n,...r})=>T(`div`,{"data-slot":`field-separator`,"data-content":!!e,className:S(`relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2`,n),...r,children:[w(t,{className:`absolute inset-0 top-1/2`}),e&&w(`span`,{className:`relative mx-auto block w-fit bg-background px-2 text-text-positive-weak`,"data-slot":`field-separator-content`,children:e})]}));X.displayName=`FieldSeparator`;const Z=N(({className:e,children:t,errors:n,...r})=>{let i=I(()=>t||(n?n?.length===1&&n[0]?.message?w(`div`,{className:`flex flex-row items-center justify-start gap-x-0.5`,children:w(`p`,{children:n[0]?.code===`invalid_type`?`Không đúng định dạng`:n[0].message})}):w(`ul`,{className:`flex list-none flex-col`,children:n.map(e=>typeof e==`string`?w(`li`,{children:e},e):e?.message?w(`li`,{children:e.message},e.message):null)}):null),[t,n]);return i?w(`div`,{role:`alert`,"data-slot":`field-error`,className:S(`w-full font-semibold text-danger-strong text-xs`,e),...r,children:i}):null});Z.displayName=`FieldError`;const Ce=({label:e,description:t,options:n,helperText:r,orientation:i})=>{let a=Q(),o=V(a.form.store,({isSubmitting:e})=>e);return T(H,{className:`gap-y-4 px-4`,children:[T(U,{orientation:i,children:[T(W,{children:[w(K,{children:e}),w(J,{children:t}),w(Y,{isShow:!!r,children:r})]}),w(G,{children:w(H,{className:`flex flex-col gap-y-2`,children:n.map(e=>T(U,{orientation:`horizontal`,children:[w(c,{id:`${a.name}-${e.value}`,name:a.name,checked:a.state.value?.includes(e.value)??!1,disabled:o,onCheckedChange:t=>{if(t&&a.state.value!==null)a.pushValue(e.value);else if(t&&a.state.value===null)a.setValue([e.value]);else if(!t&&a.state.value!==null){let t=a.state.value.indexOf(e.value);t>-1&&a.removeValue(t)}else !t&&a.state.value===null&&a.setValue(null)}}),w(K,{htmlFor:`${a.name}-${e.value}`,className:`text-text-positive`,children:e.label})]},e.value))})})]}),w(X,{})]})},we=({label:t,description:n,placeholder:r,orientation:i=`responsive`,helperText:a,minDate:o,maxDate:s,required:c})=>{let l=Q(),m=I(()=>c?l.state.value===null:!1,[c,l.state.value]),h=I(()=>l.state.meta.isTouched&&!l.state.meta.isValid,[l.state.meta.isTouched,l.state.meta.isValid]);return T(H,{className:`px-4`,children:[T(U,{orientation:i,"data-invalid":h,children:[T(W,{children:[w(K,{htmlFor:l.name,"aria-required":m,children:t}),w(J,{children:n})]}),T(G,{className:`flex flex-col space-y-1`,children:[w(`div`,{className:`flex w-full flex-col`,children:T(f,{children:[w(u,{asChild:!0,children:T(e,{variant:`outline`,color:`muted`,size:`lg`,className:S(`flex items-center justify-between rounded font-normal outline-border`,`hover:bg-transparent`,`focus:outline-1 focus:outline-primary-strong focus:ring-4 focus:ring-primary-weak`,`data-[state=open]:text-text-positive-muted`,`data-[state=open]:outline-1`,`data-[state=open]:outline-primary-strong`,`data-[state=open]:ring-4`,`data-[state=open]:ring-primary-weak`,l.state.value===null&&`text-text-positive-muted`),children:[w(`p`,{children:l.state.value===null?r||`Select date`:le(l.state.value,`PPPP`)}),w(k,{strokeWidth:1})]})}),T(d,{align:`start`,side:`bottom`,className:`flex w-fit min-w-0 overflow-y-auto rounded p-0`,onBlur:l.handleBlur,children:[T(`div`,{className:`flex h-full flex-col space-y-2 border-r border-r-border p-2 [&>button]:justify-start [&>button]:text-sm`,children:[w(e,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>{l.handleChange(R())},children:`Today`}),w(e,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>{l.handleChange(se())},children:`Tomorrow`}),w(e,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>{l.handleChange(ce())},children:`Yesterday`}),w(e,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>{l.handleChange(z(R(),3))},children:`Last 3 Days`}),w(e,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>{l.handleChange(z(R(),7))},children:`Last 7 Days`}),w(e,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>{l.handleChange(z(R(),30))},children:`Last 30 Days`}),w(e,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>{l.handleChange(de(R()))},children:`This Month`}),w(e,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>{l.handleChange(ue(R()))},children:`Last Month`})]}),w(`div`,{className:`flex flex-1 flex-col`,children:w(`div`,{className:`min-w-73 border-b border-b-border p-2`,children:w(p,{mode:`single`,selected:l.state.value??void 0,hidden:{before:o??new Date(1900,0,1),after:s??new Date(2100,11,31)},onSelect:e=>{e&&l.handleChange(e)}})})})]})]})}),w(Y,{isShow:!!a,children:a})]})]}),w(X,{})]})},Te=({label:e,description:t,placeholder:n,helperText:r,orientation:i=`responsive`,showErrorMessage:a=!0,maxLength:o})=>{let{form:s,name:c,state:u,handleBlur:d,handleChange:f}=Q(),p=V(s.store,({isSubmitting:e})=>e),m=I(()=>u.meta.isDirty&&u.meta.isTouched&&!u.meta.isValid,[u.meta.isDirty,u.meta.isTouched,u.meta.isValid]),h=P(({target:{value:e}})=>{p||o&&e.length>o||f(e||null)},[p,o,f]),g=P(()=>{p||f(null)},[p,f]);return T(H,{className:`gap-y-4 px-4`,children:[T(U,{"data-invalid":m,orientation:i,children:[T(W,{children:[w(K,{htmlFor:c,children:e}),w(J,{children:t})]}),T(G,{children:[w(l,{id:c,name:c,value:u.value===null?``:u.value,"aria-invalid":m,autoComplete:`email`,placeholder:n,className:S(`pl-9`,p&&`pointer-events-none bg-muted-muted opacity-60`),onBlur:d,onChange:h}),w(`div`,{className:`absolute top-0 left-0 flex size-9 items-center justify-center text-muted`,children:w(D,{size:14})}),w(`button`,{type:`button`,"aria-label":`Clear`,className:`absolute inset-e-0 inset-y-0 top-3 flex h-fit w-8 cursor-pointer items-center justify-center rounded-e-md text-text-positive-weak outline-none transition-[color,box-shadow] hover:text-text-positive focus:text-text-positive-strong`,onClick:g,children:w(ie,{size:14,"aria-hidden":`true`})}),w(`div`,{className:`mt-1 flex w-full items-start justify-start`,children:a&&u.meta.isDirty&&w(Z,{errors:u.meta.errors})}),w(Y,{isShow:!!r,children:r})]})]}),w(X,{})]})},Ee=e=>e?/^-?\d*\.?\d*$/:/^\d*\.?\d*$/,De=e=>Number(e).toLocaleString(),Oe=(e,t,n)=>{if(n===`none`)return e;let r=10**t,i=e*r;switch(n){case`up`:return Math.ceil(i)/r;case`down`:return Math.floor(i)/r;case`nearest`:return i%1<.1?Math.floor(i)/r:i%1>=.59?Math.ceil(i)/r:(Math.floor(i)+.5)/r;default:return e}},ke=({disabled:e=!1,readOnly:t=!1,allowNegative:n=!1,numberAfterDecimalPoint:r=2,roundingRule:i=`none`,value:a=null,unitText:o,decimal:s,placeholder:c,precision:u,wrapperClassName:d,className:f,onChange:p,onValueChange:m,onFocus:h,onBlur:g,..._})=>{let v=L(null),y=L(null),[b,x]=oe(a?.toString()??null),C=I(()=>s?.[1]??r,[s,r]),E=I(()=>s&&s[0]-s[1],[s]),D=I(()=>Ee(n),[n]),O=P(e=>{if(!C||e===`-`)return!0;let[t,n=``]=e.split(`.`),r=t.startsWith(`-`)?t.length-1:t.length;return n.length<=C&&r<=(E??1/0)},[C,E]),k=P(e=>{if(e===`0`)return`0`;if(!Number(e))return null;let[t,n=``]=Oe(parseFloat(e),Math.min(C-1,u||0),i).toString().split(`.`),r=De(t);return n?`${r}.${n}`:r},[C,u,i]),A=P(e=>{let t=e===`0`,n=e===`-`||/^-0+(\.0+)?$/.test(e)||/^-0*\.$/.test(e);if(t){m?.(0),x(e);return}if(n){x(()=>(m?.(0),e));return}},[m]),j=P(e=>{p?.(e);let{value:t}=e.target;if(t===``||t===void 0){m?.(null),x(null);return}A(t),!(!D.test(t)||!O(t))&&(m?.(parseFloat(t)||0),x(t))},[O,p,m,A,D]),ee=P(e=>{t||(h?.(e),x(e=>typeof e==`string`?e.replace(/,/g,``):null))},[t,h]),M=P(e=>{t||(g?.(e),x(e=>e===null?null:e===`0`||e===`-`||/^-0+(\.0+)?$/.test(e)||/^-0*\.$/.test(e)?`0`:typeof e==`string`?k(e):null))},[t,k,g]);return F(()=>{let e=document.activeElement===y.current;if(a==null||!D.test(a.toString())||!O(a.toString())){x(null);return}x(t=>e?t:k(a.toString()))},[k,a,O,D]),F(()=>{if(!v.current||!y.current||!o)return;let e=v.current.offsetWidth;y.current.style.setProperty(`padding-right`,`${(e+10)/16}rem`)},[o]),T(`div`,{className:S(`relative`,d),children:[w(l,{..._,ref:y,value:b||(t?`0`:``),placeholder:c,disabled:e,readOnly:t,className:S(`text-end font-number text-sm slashed-zero lining-nums tabular-nums`,t&&`bg-muted text-muted-foreground`,f),onChange:j,onFocus:ee,onBlur:M}),o&&w(`span`,{ref:v,className:`-translate-y-1/2 pointer-events-none absolute top-1/2 right-2 text-muted-foreground text-sm`,children:o})]})},Ae=({label:e,description:t,placeholder:n,helperText:r,orientation:i=`responsive`,showErrorMessage:a=!0,rounding:o,decimalPlaces:s,percision:c,unit:l,required:u,allowNegative:d})=>{let f=Q(),p=V(f.form.store,({isSubmitting:e})=>e),m=I(()=>f.state.meta.errors,[f.state.meta.errors]),h=I(()=>u?f.state.value===null:!1,[u,f.state.value]),g=P(e=>{p||f.handleChange(e)},[p,f.handleChange]);return T(H,{className:`gap-y-4 px-4`,children:[T(U,{orientation:i,"data-invalid":f.state.meta.isTouched&&!f.state.meta.isValid,children:[T(W,{children:[w(K,{htmlFor:f.name,"aria-required":h,children:e}),w(J,{children:t})]}),T(G,{children:[T(`div`,{className:`relative w-full`,children:[w(ke,{id:f.name,value:f.state.value,"aria-invalid":f.state.meta.isTouched&&!f.state.meta.isValid&&f.state.meta.isDirty,placeholder:n,roundingRule:o,numberAfterDecimalPoint:s,precision:c,unitText:l,allowNegative:d,className:S(p&&`pointer-events-none bg-muted-muted opacity-60`),onBlur:f.handleBlur,onValueChange:g}),p&&w(`div`,{className:`absolute inset-s-2 inset-y-0 top-2.5 text-muted-weak [&>svg]:size-3.5`,children:w(M,{className:`animate-spin text-primary-strong`})}),f.state.meta.isDirty&&a&&!!m.length&&w(`div`,{className:`absolute inset-s-2 inset-y-0 top-2.75 text-danger-strong [&>svg]:size-3.5`,children:w(O,{})}),w(`div`,{className:`mt-1 flex w-full flex-col items-end justify-end`,children:f.state.meta.isDirty&&a&&w(Z,{errors:m})})]}),w(Y,{isShow:!!r,children:r})]})]}),w(X,{})]})},je=({label:e,description:t,placeholder:n,orientation:r=`responsive`,helperText:i,showErrorMessage:a=!0})=>{let{form:o,name:s,state:c,handleBlur:u,handleChange:d}=Q(),f=V(o.store,({isSubmitting:e})=>e),[p,m]=oe(!1),h=I(()=>c.meta.isDirty&&c.meta.isTouched&&!c.meta.isValid,[c.meta.isDirty,c.meta.isTouched,c.meta.isValid]),g=P(()=>m(e=>!e),[]),_=P(({target:{value:e}})=>{f||d(e||null)},[f,d]);return w(H,{className:`gap-y-4 px-4`,children:T(U,{"data-invalid":h,orientation:r,children:[T(W,{children:[w(K,{htmlFor:s,children:e}),w(J,{children:t})]}),T(G,{children:[w(l,{id:s,type:p?`text`:`password`,placeholder:n,value:c.value??``,"aria-invalid":h,autoComplete:`new-password`,onBlur:u,onChange:_}),w(`button`,{className:`absolute inset-e-0 inset-y-0 flex size-9 items-center justify-center rounded-e-md text-muted outline-none transition-[color,box-shadow] focus:z-10 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50`,type:`button`,onClick:g,"aria-label":p?`Hide password`:`Show password`,"aria-pressed":p,"aria-controls":`password`,children:w(p?j:A,{size:16,"aria-hidden":`true`})}),w(`div`,{className:`mt-1 flex w-full items-start justify-start`,children:a&&c.meta.isDirty&&w(Z,{errors:c.meta.errors})}),w(Y,{isShow:!!i,children:i})]})]})})},Me=({label:e,description:t,orientation:n,options:r,helperText:i})=>{let a=Q(),o=V(a.form.store,({isSubmitting:e})=>e);return T(H,{className:`px-4`,children:[T(U,{orientation:n,className:`flex-col gap-2`,children:[T(W,{children:[w(K,{children:e}),w(J,{children:t}),w(Y,{isShow:!!i,children:i})]}),w(G,{children:w(h,{defaultValue:a.state.value??void 0,className:`w-full`,onValueChange:a.handleChange,children:r.map(e=>w(K,{className:S(`h-fit`,a.state.value===e.value&&`border-primary-weak! bg-primary-bg-subtle`,o&&`pointer-events-none bg-muted-muted opacity-60`,a.state.value===e.value&&o&&`border-border-strong!`),children:T(U,{orientation:`horizontal`,className:`justify-between rounded p-2!`,children:[T(W,{className:`gap-1!`,children:[w(q,{children:e.label}),w(J,{className:`text-xs`,children:e.description})]}),w(m,{value:e.value})]})},e.value))})})]}),w(X,{})]})},Ne=({label:e,description:t,placeholder:n,orientation:r=`responsive`,options:i,helperText:a,required:o=!1})=>{let s=Q(),c=I(()=>s.state.meta.isTouched&&!s.state.meta.isValid,[s.state.meta.isTouched,s.state.meta.isValid]),l=I(()=>o?s.state.value===null:!1,[o,s.state.value]),u=I(()=>s.state.meta.errors,[s.state.meta.errors]);return T(H,{className:`gap-y-4 px-4`,children:[T(U,{orientation:r,"data-invalid":s.state.meta.isTouched&&!s.state.meta.isValid,children:[T(W,{children:[w(K,{htmlFor:s.name,"aria-required":l,children:e}),w(J,{children:t})]}),T(G,{className:`flex flex-col`,children:[T(b,{defaultValue:s.state.value||void 0,onValueChange:s.handleChange,children:[w(y,{"aria-invalid":c?`true`:void 0,onBlur:s.handleBlur,children:w(g,{placeholder:n})}),T(v,{children:[!!i.length&&i.map(e=>w(_,{value:e.value,children:e.label},e.value)),!i.length&&T(`div`,{className:`flex items-center justify-center gap-x-2 rounded border border-border bg-muted-muted px-4 py-6.5 text-center text-sm text-text-positive-weak`,children:[w(te,{strokeWidth:1}),`No options available`]})]})]}),w(`div`,{className:`mt-1 flex w-full flex-col items-end justify-end`,children:w(Z,{errors:u})}),w(Y,{isShow:!!a,children:a})]})]}),w(X,{})]})};function Pe({className:e,...t}){return w(me.Root,{"data-slot":`switch`,className:S(`peer`,`w-8 shrink-0 cursor-pointer items-center rounded-full shadow-xs transition-all`,`inline-flex h-5`,`focus-visible:border-primary-strong`,`focus-visible:ring-primary-weak`,`focus-visible:ring-4`,`disabled:cursor-not-allowed`,`disabled:opacity-50`,`-outline-offset-1 inset-shadow-2xs outline-1`,`data-[state=checked]:bg-primary`,`data-[state=checked]:outline-primary-strong`,`data-[state=unchecked]:bg-muted-weak`,`data-[state=unchecked]:outline-border`,`data-[state=unchecked]:[&_span]:size-4`,`data-[state=unchecked]:[&_span]:translate-x-0.5`,`data-[state=unchecked]:[&_span]:rtl:-translate-x-0.5`,e),...t,children:w(me.Thumb,{"data-slot":`switch-thumb`,className:S(`block size-4 bg-card shadow-xs`,`pointer-events-none rounded-full ring-0 transition-transform`,`data-[state=checked]:translate-x-[calc(100%-3px)]`,`data-[state=unchecked]:translate-x-0`)})})}const Fe=({label:e,description:t,helperText:n})=>{let r=Q();return T(H,{className:`gap-y-4 px-4`,children:[T(U,{orientation:`vertical`,className:`relative justify-between gap-y-1`,children:[T(W,{children:[w(q,{className:`cursor-pointer`,children:w(`label`,{htmlFor:r.name,children:e})}),w(J,{children:t}),w(Pe,{id:r.name,checked:r.state.value??!1,className:`absolute top-1 right-1`,onBlur:r.handleBlur,onCheckedChange:r.handleChange})]}),w(Y,{isShow:!!n,children:n})]}),w(X,{})]})},Ie=({label:e,description:t,placeholder:n,helperText:r,counter:i=!1,orientation:a=`responsive`,showClearButton:o=!1,showErrorMessage:s=!0,required:c=!1,maxLength:u})=>{let d=ae(),f=L(null),{form:p,name:m,state:h,handleBlur:g,handleChange:_}=Q(),v=V(p.store,({isSubmitting:e})=>e),y=o&&!v&&!!h.value&&!h.meta.errors.length,b=h.value?h.value.length:0,x=I(()=>{if(!i)return``;let e=`character${[0,1].includes(b)?``:`s`}`;return i&&u?`${b} / ${u} character${b?`s`:``}`:`${b} ${e}`},[b,i,u]),C=h.meta.isDirty&&h.meta.isTouched&&!h.meta.isValid,E=c?h.value===null:!1,D=u&&b>=u*.8,k=u&&b>=u,A=P(({target:{value:e}})=>{v||i&&u&&e.length>u||_(e||null)},[v,i,u,_]),j=P(()=>{v||(_(null),f.current?.focus())},[v,_]);return T(H,{className:`gap-y-4 px-4`,children:[T(U,{orientation:a,"data-invalid":C,children:[T(W,{children:[w(K,{"aria-required":E,htmlFor:d,children:T(`p`,{children:[e,c&&w(`span`,{className:`text-danger-strong`,children:` *`})]})}),w(J,{children:t})]}),T(G,{children:[w(l,{ref:f,id:d,name:m,value:h.value??``,"aria-invalid":C,autoComplete:`off`,placeholder:n,autoCapitalize:`none`,autoCorrect:`off`,className:S(`pr-6`,v&&`pointer-events-none bg-muted-muted opacity-60`),onBlur:g,onChange:A}),y&&w(`button`,{type:`button`,"aria-label":`Clear`,className:`absolute inset-e-0 inset-y-0 top-3 flex h-fit w-8 cursor-pointer items-center justify-center rounded-e-md text-text-positive-weak outline-none transition-[color,box-shadow] hover:text-text-positive focus:text-text-positive-intense [&>svg]:size-3.5`,onClick:j,children:w(ie,{"aria-hidden":`true`})}),v&&w(`div`,{className:`absolute inset-e-2 inset-y-0 top-2.5 text-muted-weak`,children:w(M,{size:14,className:`animate-spin text-primary-strong`})}),h.meta.isDirty&&s&&!!h.meta.errors.length&&w(`div`,{className:`absolute inset-e-2 inset-y-0 top-2.5 text-danger-strong`,children:w(O,{"aria-hidden":`true`,size:14})}),T(`div`,{className:`my-1 flex w-full items-start justify-between gap-x-2`,children:[h.meta.isDirty&&s?w(Z,{className:`flex-1`,errors:h.meta.errors}):w(`div`,{}),!!i&&w(`p`,{className:S(`h-4 flex-0 text-nowrap text-end text-xs tabular-nums transition-colors`,k?`font-medium text-danger-strong`:D?`text-warning-strong`:`text-text-positive-weak`),children:x})]}),w(Y,{isShow:!!r,children:r})]})]}),w(X,{})]})},Le=N(({label:e,description:t,placeholder:n,helperText:r,counter:i=!1,orientation:a=`responsive`,showErrorMessage:o=!0,required:s=!1,maxLength:c})=>{let l=ae(),{form:u,state:d,name:f,handleBlur:p,handleChange:m}=Q(),h=V(u.store,({isSubmitting:e})=>e),g=d.value?d.value.length:0,_=I(()=>{if(!i)return``;let e=`character${[0,1].includes(g)?``:`s`}`;return i&&c?`${g} / ${c} character${g?`s`:``}`:`${g} ${e}`},[g,i,c]),v=d.meta.isDirty&&d.meta.isTouched&&!d.meta.isValid,y=s?d.value===null:!1,b=d.meta.errors,C=c&&g>=c*.8,E=c&&g>=c,D=P(({target:{value:e}})=>{h||i&&c&&e.length>c||m(e||null)},[h,i,c,m]);return T(H,{className:`gap-y-4 px-4`,children:[T(U,{orientation:a,"data-invalid":v,children:[T(W,{children:[w(K,{"aria-required":y,htmlFor:l,children:T(`p`,{children:[e,s&&w(`span`,{className:`text-danger-strong`,children:` *`})]})}),w(J,{children:t})]}),T(G,{children:[w(x,{id:l,name:f,value:d.value===null?``:d.value,"aria-invalid":v,autoCapitalize:`none`,autoComplete:`off`,placeholder:n,className:S(h&&`pointer-events-none bg-muted-muted opacity-60`),onChange:D,onBlur:p}),h&&w(`div`,{className:`absolute inset-e-2 inset-y-0 top-2.5 text-muted-weak`,children:w(M,{size:14,className:`animate-spin text-primary-strong`})}),d.meta.isDirty&&o&&!!b.length&&w(`div`,{className:`absolute inset-e-2 inset-y-0 top-2.5 text-danger-strong`,children:w(O,{size:14})}),T(`div`,{className:`my-1 flex w-full items-start justify-between gap-x-2`,children:[d.meta.isDirty&&o?w(Z,{className:`flex-1`,errors:d.meta.errors}):w(`div`,{}),!!i&&w(`p`,{className:S(`h-4 flex-0 text-nowrap text-end text-xs tabular-nums transition-colors`,E?`font-medium text-danger-strong`:C?`text-warning-strong`:`text-text-positive-weak`),children:_})]}),w(Y,{isShow:!!r,children:r})]})]}),w(X,{})]})}),Re=({label:t,className:n})=>{let r=$(),i=P(async()=>{await r.handleSubmit({submitAction:`submit`}),r.state.isSubmitSuccessful&&r.reset()},[r]);return w(r.Subscribe,{selector:e=>({disabled:e.isPristine||!e.isValid||e.isValidating||e.isSubmitting||!e.canSubmit||e.isDefaultValue,isSubmitting:e.isSubmitting}),children:({disabled:r,isSubmitting:a})=>w(e,{type:`button`,size:`md`,disabled:r,isLoading:a,className:S(`min-h-8 min-w-32`,n),onClick:i,children:t??`Submit`})})},ze=({type:t=`create`})=>{let n=$();return T(`div`,{className:`flex h-8 items-center justify-between`,children:[w(n.Subscribe,{selector:e=>({disabled:e.isPristine||e.isSubmitting}),children:({disabled:t})=>w(e,{color:`muted`,variant:`outline`,type:`button`,size:`md`,disabled:t,className:`h-full min-w-32`,onClick:()=>n.reset(),children:`Cancel`})}),t===`create`&&w(n.Subscribe,{selector:e=>({disabled:e.isPristine||!e.isValid||e.isValidating||e.isSubmitting||!e.canSubmit||e.isDefaultValue,isSubmitting:e.isSubmitting}),children:({disabled:t,isSubmitting:r})=>T(e,{type:`submit`,size:`md`,disabled:t,isLoading:r,className:`h-full min-w-32`,onClick:async()=>{await n.handleSubmit({submitAction:`create`}),n.state.isSubmitSuccessful&&n.reset()},children:[w(ne,{}),`Add New`]})}),t===`update`&&w(n.Subscribe,{selector:e=>({disabled:e.isPristine||!e.isValid||e.isValidating||e.isSubmitting||!e.canSubmit||e.isDefaultValue,isSubmitting:e.isSubmitting}),children:({disabled:t,isSubmitting:r})=>T(e,{type:`submit`,size:`md`,disabled:t,isLoading:r,className:`h-full min-w-32`,onClick:async()=>{await n.handleSubmit({submitAction:`update`}),n.state.isSubmitSuccessful&&n.reset()},children:[w(E,{}),`Update`]})})]})};function Be({className:e,orientation:t=`horizontal`,decorative:n=!0,...r}){return w(pe.Root,{"data-slot":`separator`,decorative:n,orientation:t,className:S(`shrink-0 bg-border-weak`,`data-[orientation=horizontal]:h-px`,`data-[orientation=horizontal]:w-full`,`data-[orientation=vertical]:h-full`,`data-[orientation=vertical]:w-px`,e),...r})}const Ve=({title:t,description:n,onDelete:r,children:i})=>T(`section`,{"data-slot":`card-form`,className:`relative flex flex-col rounded-md bg-card pb-4 shadow-card ring-4 ring-border-weak`,children:[T(`div`,{"data-slot":`card-form-header`,className:`flex flex-col space-y-1 p-4`,children:[w(`p`,{className:`font-semibold text-lg`,children:t}),!!n&&w(`p`,{className:`text-muted text-sm`,children:n})]}),w(Be,{}),w(`div`,{"data-slot":`card-form-main`,className:`flex flex-col space-y-4 py-4`,children:i}),!!r&&T(e,{color:`danger`,variant:`outline`,size:`sm`,className:`absolute top-2 right-2`,onClick:e=>{r?.(),e.preventDefault(),e.stopPropagation()},children:[w(re,{}),`Remove`]})]}),He=({children:e})=>w(`div`,{"data-slot":`section-form`,className:`flex flex-col space-y-4`,children:e}),Ue=({...e})=>w(`button`,{...e,type:`button`,className:`min-w-40 cursor-pointer rounded-sm border border-border bg-card px-4 py-2 font-semibold text-sm text-text-positive shadow-xs outline-none transition-all hover:opacity-90 focus:border-border focus:ring-3 focus:ring-border/80 focus:ring-offset-2 focus:drop-shadow-none disabled:pointer-events-none disabled:opacity-60 disabled:drop-shadow-none`,children:`Hủy`}),We=({isSubmitting:e,submitText:t=`Submit`,...n})=>w(`button`,{...n,type:`button`,"data-loading":e?`true`:void 0,className:`relative min-h-9.5 min-w-40 cursor-pointer rounded-sm border border-primary-strong bg-primary px-4 py-2 font-semibold text-sm text-text-negative shadow-card outline-none transition-all hover:opacity-90 focus:border-transparent focus:ring-3 focus:ring-primary/80 focus:ring-offset-2 focus:drop-shadow-none disabled:pointer-events-none disabled:opacity-60 disabled:drop-shadow-none data-[loading=true]:pointer-events-none data-[loading=true]:opacity-80`,children:e?w(ee,{size:16,strokeWidth:3,className:`absolute top-1/2 left-1/2 z-10 -translate-x-1/2 -translate-y-1/2 animate-spin`}):t}),Ge=({title:e,submitText:n,open:c,onOpenChange:l,children:u})=>{let d=$(),f=P(e=>{e||d.reset(),l?.(e)},[d.reset,l]);return w(s,{open:c,onOpenChange:f,children:T(r,{"data-slot":`dialog-portal`,children:[w(o,{}),T(a,{className:`flex size-full max-h-dvh max-w-dvw flex-col gap-0 overflow-y-auto p-0 shadow-dialog sm:h-auto sm:max-h-[85dvh] sm:max-w-2xl sm:rounded-sm`,children:[w(`div`,{"data-slot":`dialog-header`,className:`flex flex-col items-center justify-center gap-2 px-4 py-6 text-center shadow-sm sm:text-left`,children:w(i,{"data-slot":`dialog-title`,children:e})}),w(t,{}),w(`div`,{"data-slot":`dialog-content`,className:`relative flex flex-col space-y-4 overflow-y-auto p-0 pt-6 max-sm:flex-1 sm:p-4`,children:u}),w(t,{}),T(`div`,{"data-slot":`dialog-footer`,className:`flex flex-col-reverse items-center justify-between gap-2 px-6 py-4 shadow-sm sm:flex-row sm:justify-end max-sm:[&>button]:w-full`,children:[w(d.Subscribe,{selector:e=>({disabled:e.isSubmitting}),children:({disabled:e})=>w(Ue,{disabled:e,onClick:()=>{d.reset(),f(!1)}})}),w(d.Subscribe,{selector:e=>({isSubmitting:e.isSubmitting,disabled:e.isPristine||!e.isValid||e.isValidating||e.isSubmitting||!e.canSubmit}),children:({isSubmitting:e,disabled:t})=>w(We,{isSubmitting:e,disabled:t,submitText:n,onClick:()=>d.handleSubmit()})})]})]})]})})},Ke=({label:e,description:t,helperText:n,orientation:r=`responsive`,children:i})=>T(H,{className:`gap-y-4 px-4`,children:[T(U,{orientation:r,children:[T(W,{children:[w(K,{children:e}),w(J,{children:t})]}),T(G,{children:[i,w(Y,{isShow:!!n,children:n})]})]}),w(X,{})]}),qe=({title:e,open:t,contentClassName:r,onOpenChange:i,children:a})=>{let o=$();return w(B.Root,{"data-slot":`dialog`,open:t,onOpenChange:i,children:T(B.Portal,{"data-slot":`dialog-portal`,children:[w(B.Overlay,{"data-slot":`dialog-overlay`,className:S(`fixed inset-0 z-40 bg-black/50 backdrop-blur-sm`,`data-[state=open]:animate-in`,`data-[state=open]:fade-in`,`data-[state=closed]:animate-out`,`data-[state=closed]:fade-out`)}),w(B.Content,{"data-slot":`dialog-content`,className:S(`fixed top-4 right-4 z-50 h-[calc(100dvh-2rem)] min-w-sm max-w-xl rounded-md bg-background drop-shadow-lg`,`duration-300`,`data-[state=open]:animate-in`,`data-[state=open]:slide-in-from-right`,`data-[state=open]:fade-in`,`data-[state=closed]:animate-out`,`data-[state=closed]:slide-out-to-right`,`data-[state=closed]:fade-out`),children:T(`section`,{className:`relative flex size-full flex-col`,children:[w(`header`,{className:`flex h-14 items-center border-border border-b px-4`,children:w(`h2`,{className:`font-semibold text-lg text-primary-strong`,children:e})}),w(`div`,{className:S(`flex flex-1 flex-col overflow-y-auto py-4`,r),children:a}),T(`div`,{className:`flex flex-col space-y-4 border-border border-t px-4 py-2`,children:[w(o.Subscribe,{selector:e=>({isSubmitting:e.isSubmitting,disabled:e.isPristine||!e.isValid||e.isValidating||e.isSubmitting||!e.canSubmit}),children:({isSubmitting:e,disabled:t})=>w(We,{isSubmitting:e,disabled:t,className:`w-full`,onClick:()=>o.handleSubmit()})}),w(o.Subscribe,{selector:e=>({disabled:e.isPristine||e.isSubmitting}),children:({disabled:e})=>w(Ue,{disabled:e,className:`w-full`,onClick:()=>{o.reset(),i?.(!1)}})})]}),w(B.Close,{asChild:!0,children:w(n,{className:`absolute top-2 right-2`})})]})})]})})},Je=({children:e})=>w(`header`,{"data-slot":`section-header`,className:`px-4 pt-2.5 pb-2 font-medium text-base text-text-positive`,children:e}),Ye=({children:e})=>w(`main`,{"data-slot":`section-main`,className:`relative flex flex-col space-y-4 py-4`,children:e}),Xe=({title:e,children:t})=>T(`section`,{"data-slot":`section-form`,className:`flex flex-col rounded-md bg-background shadow-card ring-4 ring-border-weak`,children:[w(Je,{children:e}),w(Be,{}),w(Ye,{children:t})]}),Ze=({title:e,description:t,helperText:n})=>T(H,{className:`gap-y-4 px-4`,children:[T(U,{className:`gap-0`,children:[T(W,{children:[w(Se,{className:`mb-1`,children:e}),w(J,{children:t})]}),w(Y,{isShow:!!n,children:n})]}),w(X,{})]}),{fieldContext:Qe,formContext:$e,useFieldContext:Q,useFormContext:$}=ge(),{useAppForm:et,withForm:tt,withFieldGroup:nt}=he({fieldContext:Qe,formContext:$e,fieldComponents:{TextField:Ie,TextareaField:Le,NumberField:Ae,EmailField:Te,PasswordField:je,SelectField:Ne,DateField:we,SwitchField:Fe,RadioGroupField:Me,CheckboxField:Ce,FieldGroup:H,Field:U,FieldContent:W,FieldLabel:K,FieldContentMain:G,FieldSeparator:X,FieldError:Z},formComponents:{TanStackDialogForm:Ge,TanStackPopoverForm:qe,TanStackContainerForm:He,TanStackSectionForm:Xe,TanStackCardForm:Ve,TanStackFieldGroup:Ke,TanStackTitleField:Ze,TanStackActionsForm:ze,TanStackActionSubmit:Re}});export{U as Field,W as FieldContent,G as FieldContentMain,Z as FieldError,H as FieldGroup,K as FieldLabel,X as FieldSeparator,Q as useTanStackFieldContext,et as useTanStackForm,$ as useTanStackFormContext,nt as withTanStackFieldGroup,tt as withTanStackForm};
-//# sourceMappingURL=index.mjs.map
+import"../../button.variants-DeCyas1F.mjs";import"../../button-C6ybzxxj.mjs";import"../../heading-DN67djxs.mjs";import"../../paragraph-Ch5TvEqL.mjs";import"../../tooltip-Bj0iOG4s.mjs";import"../../separator-BMsbHAVt.mjs";import"../../close-BU0kWRVo.mjs";import"../../dialog-BchwY6-N.mjs";import"../../command-bpcnKEbR.mjs";import"../../checkbox-DJEdYOjA.mjs";import"../../input-Cd0G5y-9.mjs";import{a as e,c as t,d as n,f as r,i,l as a,n as o,o as s,r as c,s as l,t as u,u as d}from"../../tanstack-form-CJ43hVb_.mjs";import"../../popover-OJXFbqJi.mjs";import"../../calendar-JKxWM6AF.mjs";import"../../radio-group-CAgfOr7-.mjs";import"../../select-Ze8Fq88G.mjs";import"../../textarea-CdGSEkZB.mjs";export{s as Field,l as FieldContent,t as FieldContentMain,a as FieldError,d as FieldGroup,n as FieldLabel,r as FieldSeparator,u as useTanStackFieldContext,o as useTanStackForm,c as useTanStackFormContext,i as withTanStackFieldGroup,e as withTanStackForm};

package/dist/field-CXVnw75a.mjs

@@ -0,0 +1,2 @@
+import{t as e}from"./separator-BMsbHAVt.mjs";import{t}from"./label-OmlGaZ5h.mjs";import{BanIcon as n}from"lucide-react";import{memo as r,useMemo as i}from"react";import{jsx as a,jsxs as o}from"react/jsx-runtime";import{cn as s}from"@customafk/react-toolkit/utils";import{cva as c}from"class-variance-authority";const l=r(({className:e,...t})=>a(`fieldset`,{"data-slot":`field-set`,className:s(`flex flex-col gap-6`,`has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3`,e),...t}));l.displayName=`FieldSet`;const u=r(({className:e,variant:t=`legend`,...n})=>a(`legend`,{"data-slot":`field-legend`,"data-variant":t,className:s(`mb-3 font-medium`,`data-[variant=legend]:text-base`,`data-[variant=label]:text-sm`,e),...n}));u.displayName=`FieldLegend`;const d=r(({className:e,...t})=>a(`div`,{"data-slot":`field-group`,className:s(`group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4`,e),...t}));d.displayName=`FieldGroup`;const f=c(`group/field flex w-full gap-3 data-[invalid=true]:text-destructive`,{variants:{orientation:{vertical:[`flex-col *:w-full [&>.sr-only]:w-auto`],horizontal:[`flex-row items-center`,`*:data-[slot=field-label]:flex-auto`,`has-[>[data-slot=field-content]]:items-start`,`has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px`],responsive:[`flex-col *:w-full [&>.sr-only]:w-auto`,`@md/field-group:flex-row`,`@md/field-group:items-center`,`@md/field-group:*:w-auto`,`@md/field-group:*:data-[slot=field-label]:flex-auto`,`@md/field-group:has-[>[data-slot=field-content]]:items-start`,`@md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px`]}},defaultVariants:{orientation:`vertical`}}),p=r(({className:e,orientation:t=`vertical`,...n})=>a(`div`,{"data-slot":`field`,"data-orientation":t,className:s(f({orientation:t}),e),...n}));p.displayName=`Field`;const m=r(({className:e,...t})=>a(`div`,{"data-slot":`field-content`,className:s(`group/field-content flex basis-2/5 flex-col gap-1.5 leading-snug`,e),...t}));m.displayName=`FieldContent`;const h=r(({className:e,...n})=>a(t,{"data-slot":`field-label`,className:s(`group/field-label peer/field-label flex w-fit gap-2 leading-snug`,`group-data-[disabled=true]/field:opacity-50`,`has-[>[data-slot=field]]:w-full`,`has-[>[data-slot=field]]:flex-col`,`has-[>[data-slot=field]]:rounded-md`,`has-[>[data-slot=field]]:border`,`*:data-[slot=field]:p-4`,`has-data-[state=checked]:bg-primary/5`,`has-data-[state=checked]:border-primary`,e),...n}));h.displayName=`FieldLabel`;const g=r(({className:e,...t})=>a(`div`,{"data-slot":`field-label`,className:s(`flex w-fit items-center gap-2 font-medium text-sm leading-snug group-data-[disabled=true]/field:opacity-50`,e),...t}));g.displayName=`FieldTitle`;const _=r(({className:e,...t})=>a(`p`,{"data-slot":`field-description`,className:s(`text-text-positive-weak text-sm leading-normal font-normal group-has-data-[orientation=horizontal]/field:text-balance`,`last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5`,`[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4`,e),...t}));_.displayName=`FieldDescription`;const v=r(({children:t,className:n,...r})=>o(`div`,{"data-slot":`field-separator`,"data-content":!!t,className:s(`relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2`,n),...r,children:[a(e,{className:`absolute inset-0 top-1/2`}),t&&a(`span`,{className:`relative mx-auto block w-fit bg-background px-2 text-text-positive-weak`,"data-slot":`field-separator-content`,children:t})]}));v.displayName=`FieldSeparator`;const y=r(({className:e,children:t,errors:r,...c})=>{let l=i(()=>t||(r?r?.length===1&&r[0]?.message?o(`div`,{className:`flex flex-row items-center justify-start gap-x-0.5`,children:[a(n,{size:14}),a(`p`,{children:r[0].message})]}):a(`ul`,{className:`ml-4 flex list-disc flex-col gap-1`,children:r.map(e=>typeof e==`string`?a(`li`,{children:e},e):e?.message?a(`li`,{children:e.message},e.message):null)}):null),[t,r]);return l?a(`div`,{role:`alert`,"data-slot":`field-error`,className:s(`w-full font-normal text-danger text-xs`,e),...c,children:l}):null});y.displayName=`FieldError`;export{d as a,v as c,y as i,l,m as n,h as o,_ as r,u as s,p as t,g as u};
+//# sourceMappingURL=field-CXVnw75a.mjs.map

package/dist/field-CXVnw75a.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-CXVnw75a.mjs","names":[],"sources":["../packages/components/ui/field.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useMemo } from 'react';\n\nimport { BanIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { Label } from '@/components/ui/label';\nimport { Separator } from '@/components/ui/separator';\n\nconst FieldSet = memo(({ className, ...props }: React.ComponentProps<'fieldset'>) => {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn('flex flex-col gap-6', 'has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3', className)}\n      {...props}\n    />\n  );\n});\nFieldSet.displayName = 'FieldSet';\n\nconst FieldLegend = memo(({ className, variant = 'legend', ...props }: React.ComponentProps<'legend'> & { variant?: 'legend' | 'label' }) => {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn('mb-3 font-medium', 'data-[variant=legend]:text-base', 'data-[variant=label]:text-sm', className)}\n      {...props}\n    />\n  );\n});\nFieldLegend.displayName = 'FieldLegend';\n\nconst FieldGroup = memo(({ className, ...props }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        'group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4',\n        className\n      )}\n      {...props}\n    />\n  );\n});\nFieldGroup.displayName = 'FieldGroup';\n\nconst fieldVariants = cva('group/field flex w-full gap-3 data-[invalid=true]:text-destructive', {\n  variants: {\n    orientation: {\n      vertical: ['flex-col *:w-full [&>.sr-only]:w-auto'],\n      horizontal: [\n        'flex-row items-center',\n        '*:data-[slot=field-label]:flex-auto',\n        'has-[>[data-slot=field-content]]:items-start',\n        'has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',\n      ],\n      responsive: [\n        'flex-col *:w-full [&>.sr-only]:w-auto',\n        '@md/field-group:flex-row',\n        '@md/field-group:items-center',\n        '@md/field-group:*:w-auto',\n        '@md/field-group:*:data-[slot=field-label]:flex-auto',\n        '@md/field-group:has-[>[data-slot=field-content]]:items-start',\n        '@md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',\n      ],\n    },\n  },\n  defaultVariants: {\n    orientation: 'vertical',\n  },\n});\n\nconst Field = memo(({ className, orientation = 'vertical', ...props }: React.ComponentProps<'div'> & VariantProps<typeof fieldVariants>) => {\n  return <div data-slot=\"field\" data-orientation={orientation} className={cn(fieldVariants({ orientation }), className)} {...props} />;\n});\nField.displayName = 'Field';\n\nconst FieldContent = memo(({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"field-content\" className={cn('group/field-content flex basis-2/5 flex-col gap-1.5 leading-snug', className)} {...props} />;\n});\nFieldContent.displayName = 'FieldContent';\n\nconst FieldLabel = memo(({ className, ...props }: React.ComponentProps<typeof Label>) => {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        'group/field-label peer/field-label flex w-fit gap-2 leading-snug',\n        'group-data-[disabled=true]/field:opacity-50',\n        'has-[>[data-slot=field]]:w-full',\n        'has-[>[data-slot=field]]:flex-col',\n        'has-[>[data-slot=field]]:rounded-md',\n        'has-[>[data-slot=field]]:border',\n        '*:data-[slot=field]:p-4',\n        'has-data-[state=checked]:bg-primary/5',\n        'has-data-[state=checked]:border-primary',\n        className\n      )}\n      {...props}\n    />\n  );\n});\nFieldLabel.displayName = 'FieldLabel';\n\nconst FieldTitle = memo(({ className, ...props }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn('flex w-fit items-center gap-2 font-medium text-sm leading-snug group-data-[disabled=true]/field:opacity-50', className)}\n      {...props}\n    />\n  );\n});\nFieldTitle.displayName = 'FieldTitle';\n\nconst FieldDescription = memo(({ className, ...props }: React.ComponentProps<'p'>) => {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        'text-text-positive-weak text-sm leading-normal font-normal group-has-data-[orientation=horizontal]/field:text-balance',\n        'last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5',\n        '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',\n        className\n      )}\n      {...props}\n    />\n  );\n});\nFieldDescription.displayName = 'FieldDescription';\n\nconst FieldSeparator = memo(\n  ({\n    children,\n    className,\n    ...props\n  }: React.ComponentProps<'div'> & {\n    children?: React.ReactNode;\n  }) => {\n    return (\n      <div\n        data-slot=\"field-separator\"\n        data-content={!!children}\n        className={cn('relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2', className)}\n        {...props}\n      >\n        <Separator className=\"absolute inset-0 top-1/2\" />\n        {children && (\n          <span className=\"relative mx-auto block w-fit bg-background px-2 text-text-positive-weak\" data-slot=\"field-separator-content\">\n            {children}\n          </span>\n        )}\n      </div>\n    );\n  }\n);\nFieldSeparator.displayName = 'FieldSeparator';\n\nconst FieldError = memo(\n  ({\n    className,\n    children,\n    errors,\n    ...props\n  }: React.ComponentProps<'div'> & {\n    errors?: Array<{ message?: string } | undefined>;\n  }) => {\n    const content = useMemo(() => {\n      if (children) {\n        return children;\n      }\n\n      if (!errors) {\n        return null;\n      }\n\n      if (errors?.length === 1 && errors[0]?.message) {\n        return (\n          <div className=\"flex flex-row items-center justify-start gap-x-0.5\">\n            <BanIcon size={14} />\n            <p>{errors[0].message}</p>\n          </div>\n        );\n      }\n\n      return (\n        <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n          {errors.map(error => {\n            if (typeof error === 'string') return <li key={error}>{error}</li>;\n            if (!error?.message) return null;\n            return <li key={error.message}>{error.message}</li>;\n          })}\n        </ul>\n      );\n    }, [children, errors]);\n\n    if (!content) {\n      return null;\n    }\n\n    return (\n      <div role=\"alert\" data-slot=\"field-error\" className={cn('w-full font-normal text-danger text-xs', className)} {...props}>\n        {content}\n      </div>\n    );\n  }\n);\nFieldError.displayName = 'FieldError';\n\nexport { Field, FieldLabel, FieldDescription, FieldError, FieldGroup, FieldLegend, FieldSeparator, FieldSet, FieldContent, FieldTitle };\n"],"mappings":"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"}

package/dist/field-CppNvoxV.cjs

@@ -0,0 +1,2 @@
+const e=require(`./chunk-Bmb41Sf3.cjs`),t=require(`./separator-BwZb12bh.cjs`),n=require(`./label-DkMTQ3Ch.cjs`);let r=require(`lucide-react`),i=require(`react`),a=require(`react/jsx-runtime`),o=require(`@customafk/react-toolkit/utils`),s=require(`class-variance-authority`);const c=(0,i.memo)(({className:e,...t})=>(0,a.jsx)(`fieldset`,{"data-slot":`field-set`,className:(0,o.cn)(`flex flex-col gap-6`,`has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3`,e),...t}));c.displayName=`FieldSet`;const l=(0,i.memo)(({className:e,variant:t=`legend`,...n})=>(0,a.jsx)(`legend`,{"data-slot":`field-legend`,"data-variant":t,className:(0,o.cn)(`mb-3 font-medium`,`data-[variant=legend]:text-base`,`data-[variant=label]:text-sm`,e),...n}));l.displayName=`FieldLegend`;const u=(0,i.memo)(({className:e,...t})=>(0,a.jsx)(`div`,{"data-slot":`field-group`,className:(0,o.cn)(`group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4`,e),...t}));u.displayName=`FieldGroup`;const d=(0,s.cva)(`group/field flex w-full gap-3 data-[invalid=true]:text-destructive`,{variants:{orientation:{vertical:[`flex-col *:w-full [&>.sr-only]:w-auto`],horizontal:[`flex-row items-center`,`*:data-[slot=field-label]:flex-auto`,`has-[>[data-slot=field-content]]:items-start`,`has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px`],responsive:[`flex-col *:w-full [&>.sr-only]:w-auto`,`@md/field-group:flex-row`,`@md/field-group:items-center`,`@md/field-group:*:w-auto`,`@md/field-group:*:data-[slot=field-label]:flex-auto`,`@md/field-group:has-[>[data-slot=field-content]]:items-start`,`@md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px`]}},defaultVariants:{orientation:`vertical`}}),f=(0,i.memo)(({className:e,orientation:t=`vertical`,...n})=>(0,a.jsx)(`div`,{"data-slot":`field`,"data-orientation":t,className:(0,o.cn)(d({orientation:t}),e),...n}));f.displayName=`Field`;const p=(0,i.memo)(({className:e,...t})=>(0,a.jsx)(`div`,{"data-slot":`field-content`,className:(0,o.cn)(`group/field-content flex basis-2/5 flex-col gap-1.5 leading-snug`,e),...t}));p.displayName=`FieldContent`;const m=(0,i.memo)(({className:e,...t})=>(0,a.jsx)(n.t,{"data-slot":`field-label`,className:(0,o.cn)(`group/field-label peer/field-label flex w-fit gap-2 leading-snug`,`group-data-[disabled=true]/field:opacity-50`,`has-[>[data-slot=field]]:w-full`,`has-[>[data-slot=field]]:flex-col`,`has-[>[data-slot=field]]:rounded-md`,`has-[>[data-slot=field]]:border`,`*:data-[slot=field]:p-4`,`has-data-[state=checked]:bg-primary/5`,`has-data-[state=checked]:border-primary`,e),...t}));m.displayName=`FieldLabel`;const h=(0,i.memo)(({className:e,...t})=>(0,a.jsx)(`div`,{"data-slot":`field-label`,className:(0,o.cn)(`flex w-fit items-center gap-2 font-medium text-sm leading-snug group-data-[disabled=true]/field:opacity-50`,e),...t}));h.displayName=`FieldTitle`;const g=(0,i.memo)(({className:e,...t})=>(0,a.jsx)(`p`,{"data-slot":`field-description`,className:(0,o.cn)(`text-text-positive-weak text-sm leading-normal font-normal group-has-data-[orientation=horizontal]/field:text-balance`,`last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5`,`[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4`,e),...t}));g.displayName=`FieldDescription`;const _=(0,i.memo)(({children:e,className:n,...r})=>(0,a.jsxs)(`div`,{"data-slot":`field-separator`,"data-content":!!e,className:(0,o.cn)(`relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2`,n),...r,children:[(0,a.jsx)(t.t,{className:`absolute inset-0 top-1/2`}),e&&(0,a.jsx)(`span`,{className:`relative mx-auto block w-fit bg-background px-2 text-text-positive-weak`,"data-slot":`field-separator-content`,children:e})]}));_.displayName=`FieldSeparator`;const v=(0,i.memo)(({className:e,children:t,errors:n,...s})=>{let c=(0,i.useMemo)(()=>t||(n?n?.length===1&&n[0]?.message?(0,a.jsxs)(`div`,{className:`flex flex-row items-center justify-start gap-x-0.5`,children:[(0,a.jsx)(r.BanIcon,{size:14}),(0,a.jsx)(`p`,{children:n[0].message})]}):(0,a.jsx)(`ul`,{className:`ml-4 flex list-disc flex-col gap-1`,children:n.map(e=>typeof e==`string`?(0,a.jsx)(`li`,{children:e},e):e?.message?(0,a.jsx)(`li`,{children:e.message},e.message):null)}):null),[t,n]);return c?(0,a.jsx)(`div`,{role:`alert`,"data-slot":`field-error`,className:(0,o.cn)(`w-full font-normal text-danger text-xs`,e),...s,children:c}):null});v.displayName=`FieldError`,Object.defineProperty(exports,`a`,{enumerable:!0,get:function(){return u}}),Object.defineProperty(exports,`c`,{enumerable:!0,get:function(){return _}}),Object.defineProperty(exports,`i`,{enumerable:!0,get:function(){return v}}),Object.defineProperty(exports,`l`,{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,`o`,{enumerable:!0,get:function(){return m}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return g}}),Object.defineProperty(exports,`s`,{enumerable:!0,get:function(){return l}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return f}}),Object.defineProperty(exports,`u`,{enumerable:!0,get:function(){return h}});
+//# sourceMappingURL=field-CppNvoxV.cjs.map

package/dist/field-CppNvoxV.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-CppNvoxV.cjs","names":["Label","Separator","BanIcon"],"sources":["../packages/components/ui/field.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useMemo } from 'react';\n\nimport { BanIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { Label } from '@/components/ui/label';\nimport { Separator } from '@/components/ui/separator';\n\nconst FieldSet = memo(({ className, ...props }: React.ComponentProps<'fieldset'>) => {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn('flex flex-col gap-6', 'has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3', className)}\n      {...props}\n    />\n  );\n});\nFieldSet.displayName = 'FieldSet';\n\nconst FieldLegend = memo(({ className, variant = 'legend', ...props }: React.ComponentProps<'legend'> & { variant?: 'legend' | 'label' }) => {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn('mb-3 font-medium', 'data-[variant=legend]:text-base', 'data-[variant=label]:text-sm', className)}\n      {...props}\n    />\n  );\n});\nFieldLegend.displayName = 'FieldLegend';\n\nconst FieldGroup = memo(({ className, ...props }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        'group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4',\n        className\n      )}\n      {...props}\n    />\n  );\n});\nFieldGroup.displayName = 'FieldGroup';\n\nconst fieldVariants = cva('group/field flex w-full gap-3 data-[invalid=true]:text-destructive', {\n  variants: {\n    orientation: {\n      vertical: ['flex-col *:w-full [&>.sr-only]:w-auto'],\n      horizontal: [\n        'flex-row items-center',\n        '*:data-[slot=field-label]:flex-auto',\n        'has-[>[data-slot=field-content]]:items-start',\n        'has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',\n      ],\n      responsive: [\n        'flex-col *:w-full [&>.sr-only]:w-auto',\n        '@md/field-group:flex-row',\n        '@md/field-group:items-center',\n        '@md/field-group:*:w-auto',\n        '@md/field-group:*:data-[slot=field-label]:flex-auto',\n        '@md/field-group:has-[>[data-slot=field-content]]:items-start',\n        '@md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',\n      ],\n    },\n  },\n  defaultVariants: {\n    orientation: 'vertical',\n  },\n});\n\nconst Field = memo(({ className, orientation = 'vertical', ...props }: React.ComponentProps<'div'> & VariantProps<typeof fieldVariants>) => {\n  return <div data-slot=\"field\" data-orientation={orientation} className={cn(fieldVariants({ orientation }), className)} {...props} />;\n});\nField.displayName = 'Field';\n\nconst FieldContent = memo(({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"field-content\" className={cn('group/field-content flex basis-2/5 flex-col gap-1.5 leading-snug', className)} {...props} />;\n});\nFieldContent.displayName = 'FieldContent';\n\nconst FieldLabel = memo(({ className, ...props }: React.ComponentProps<typeof Label>) => {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        'group/field-label peer/field-label flex w-fit gap-2 leading-snug',\n        'group-data-[disabled=true]/field:opacity-50',\n        'has-[>[data-slot=field]]:w-full',\n        'has-[>[data-slot=field]]:flex-col',\n        'has-[>[data-slot=field]]:rounded-md',\n        'has-[>[data-slot=field]]:border',\n        '*:data-[slot=field]:p-4',\n        'has-data-[state=checked]:bg-primary/5',\n        'has-data-[state=checked]:border-primary',\n        className\n      )}\n      {...props}\n    />\n  );\n});\nFieldLabel.displayName = 'FieldLabel';\n\nconst FieldTitle = memo(({ className, ...props }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn('flex w-fit items-center gap-2 font-medium text-sm leading-snug group-data-[disabled=true]/field:opacity-50', className)}\n      {...props}\n    />\n  );\n});\nFieldTitle.displayName = 'FieldTitle';\n\nconst FieldDescription = memo(({ className, ...props }: React.ComponentProps<'p'>) => {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        'text-text-positive-weak text-sm leading-normal font-normal group-has-data-[orientation=horizontal]/field:text-balance',\n        'last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5',\n        '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',\n        className\n      )}\n      {...props}\n    />\n  );\n});\nFieldDescription.displayName = 'FieldDescription';\n\nconst FieldSeparator = memo(\n  ({\n    children,\n    className,\n    ...props\n  }: React.ComponentProps<'div'> & {\n    children?: React.ReactNode;\n  }) => {\n    return (\n      <div\n        data-slot=\"field-separator\"\n        data-content={!!children}\n        className={cn('relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2', className)}\n        {...props}\n      >\n        <Separator className=\"absolute inset-0 top-1/2\" />\n        {children && (\n          <span className=\"relative mx-auto block w-fit bg-background px-2 text-text-positive-weak\" data-slot=\"field-separator-content\">\n            {children}\n          </span>\n        )}\n      </div>\n    );\n  }\n);\nFieldSeparator.displayName = 'FieldSeparator';\n\nconst FieldError = memo(\n  ({\n    className,\n    children,\n    errors,\n    ...props\n  }: React.ComponentProps<'div'> & {\n    errors?: Array<{ message?: string } | undefined>;\n  }) => {\n    const content = useMemo(() => {\n      if (children) {\n        return children;\n      }\n\n      if (!errors) {\n        return null;\n      }\n\n      if (errors?.length === 1 && errors[0]?.message) {\n        return (\n          <div className=\"flex flex-row items-center justify-start gap-x-0.5\">\n            <BanIcon size={14} />\n            <p>{errors[0].message}</p>\n          </div>\n        );\n      }\n\n      return (\n        <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n          {errors.map(error => {\n            if (typeof error === 'string') return <li key={error}>{error}</li>;\n            if (!error?.message) return null;\n            return <li key={error.message}>{error.message}</li>;\n          })}\n        </ul>\n      );\n    }, [children, errors]);\n\n    if (!content) {\n      return null;\n    }\n\n    return (\n      <div role=\"alert\" data-slot=\"field-error\" className={cn('w-full font-normal text-danger text-xs', className)} {...props}>\n        {content}\n      </div>\n    );\n  }\n);\nFieldError.displayName = 'FieldError';\n\nexport { Field, FieldLabel, FieldDescription, FieldError, FieldGroup, FieldLegend, FieldSeparator, FieldSet, FieldContent, FieldTitle };\n"],"mappings":"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"}

package/dist/{flex-CeizYtXs.mjs → flex-BLMTj7Ev.mjs}

@@ -1,2 +1,2 @@
-import{cn as e}from"@customafk/react-toolkit/utils";import{cva as t}from"class-variance-authority";import{jsx as n}from"react/jsx-runtime";import{memo as r}from"react";const i=t([`relative flex`,`text-sm`],{variants:{vertical:{true:`flex-col`,false:`flex-row`},width:{full:`w-full`,auto:`w-auto`,fit:`w-fit`,screen:`w-screen`,min:`w-min`,max:`w-max`,null:``},wrap:{true:`flex-wrap`,false:`flex-nowrap`},margin:{sm:`m-2`,md:`m-4`,lg:`m-6`,xl:`m-8`,none:`m-0`},padding:{sm:`p-2`,md:`p-4`,lg:`p-6`,xl:`p-8`,none:`p-0`},gap:{xs:`gap-1`,sm:`gap-2`,md:`gap-4`,lg:`gap-6`,xl:`gap-8`,none:`gap-0`},justify:{start:`justify-start`,center:`justify-center`,end:`justify-end`,between:`justify-between`,around:`justify-around`,evenly:`justify-evenly`,stretch:`justify-stretch`},align:{start:`items-start`,center:`items-center`,end:`items-end`,baseline:`items-baseline`,stretch:`items-stretch`}},defaultVariants:{vertical:!1,wrap:!0,width:`fit`,margin:`none`,padding:`sm`,gap:`xs`,justify:`start`,align:`center`}}),a=r(({vertical:t,wrap:r,width:a,margin:o,padding:s,gap:c,justify:l,align:u,className:d,children:f})=>n(`div`,{className:e(i({vertical:t,width:a,wrap:r,margin:o,padding:s,gap:c,justify:l,align:u,className:d})),children:f}));a.displayName=`Flex`;export{a as t};
-//# sourceMappingURL=flex-CeizYtXs.mjs.map
+import{memo as e}from"react";import{jsx as t}from"react/jsx-runtime";import{cn as n}from"@customafk/react-toolkit/utils";import{cva as r}from"class-variance-authority";const i=r([`relative flex`,`text-sm`],{variants:{vertical:{true:`flex-col`,false:`flex-row`},width:{full:`w-full`,auto:`w-auto`,fit:`w-fit`,screen:`w-screen`,min:`w-min`,max:`w-max`,null:``},wrap:{true:`flex-wrap`,false:`flex-nowrap`},margin:{sm:`m-2`,md:`m-4`,lg:`m-6`,xl:`m-8`,none:`m-0`},padding:{sm:`p-2`,md:`p-4`,lg:`p-6`,xl:`p-8`,none:`p-0`},gap:{xs:`gap-1`,sm:`gap-2`,md:`gap-4`,lg:`gap-6`,xl:`gap-8`,none:`gap-0`},justify:{start:`justify-start`,center:`justify-center`,end:`justify-end`,between:`justify-between`,around:`justify-around`,evenly:`justify-evenly`,stretch:`justify-stretch`},align:{start:`items-start`,center:`items-center`,end:`items-end`,baseline:`items-baseline`,stretch:`items-stretch`}},defaultVariants:{vertical:!1,wrap:!0,width:`fit`,margin:`none`,padding:`sm`,gap:`xs`,justify:`start`,align:`center`}}),a=e(({vertical:e,wrap:r,width:a,margin:o,padding:s,gap:c,justify:l,align:u,className:d,children:f})=>t(`div`,{className:n(i({vertical:e,width:a,wrap:r,margin:o,padding:s,gap:c,justify:l,align:u,className:d})),children:f}));a.displayName=`Flex`;export{a as t};
+//# sourceMappingURL=flex-BLMTj7Ev.mjs.map

package/dist/flex-BLMTj7Ev.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"flex-BLMTj7Ev.mjs","names":[],"sources":["../packages/components/layouts/flex.tsx"],"sourcesContent":["'use client';\nimport { memo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nconst flexVariants = cva(['relative flex', 'text-sm'], {\n  variants: {\n    vertical: {\n      true: 'flex-col',\n      false: 'flex-row',\n    },\n    width: {\n      full: 'w-full',\n      auto: 'w-auto',\n      fit: 'w-fit',\n      screen: 'w-screen',\n      min: 'w-min',\n      max: 'w-max',\n      null: '',\n    },\n    wrap: {\n      true: 'flex-wrap',\n      false: 'flex-nowrap',\n    },\n    margin: {\n      sm: 'm-2',\n      md: 'm-4',\n      lg: 'm-6',\n      xl: 'm-8',\n      none: 'm-0',\n    },\n    padding: {\n      sm: 'p-2',\n      md: 'p-4',\n      lg: 'p-6',\n      xl: 'p-8',\n      none: 'p-0',\n    },\n    gap: {\n      xs: 'gap-1',\n      sm: 'gap-2',\n      md: 'gap-4',\n      lg: 'gap-6',\n      xl: 'gap-8',\n      none: 'gap-0',\n    },\n    justify: {\n      start: 'justify-start',\n      center: 'justify-center',\n      end: 'justify-end',\n      between: 'justify-between',\n      around: 'justify-around',\n      evenly: 'justify-evenly',\n      stretch: 'justify-stretch',\n    },\n    align: {\n      start: 'items-start',\n      center: 'items-center',\n      end: 'items-end',\n      baseline: 'items-baseline',\n      stretch: 'items-stretch',\n    },\n  },\n  defaultVariants: {\n    vertical: false,\n    wrap: true,\n    width: 'fit',\n    margin: 'none',\n    padding: 'sm',\n    gap: 'xs',\n    justify: 'start',\n    align: 'center',\n  },\n});\n\ntype Props = {\n  /** Additional Tailwind classes merged on top of the variant-generated classes. */\n  className?: string;\n  /**\n   * Stacks children vertically (`flex-col`) when `true`, horizontally (`flex-row`) when `false`.\n   * @default false\n   */\n  vertical?: boolean;\n  /**\n   * Controls the width of the flex container.\n   * - `'full'` — `w-full`\n   * - `'auto'` — `w-auto`\n   * - `'fit'`  — `w-fit` (default)\n   * - `'screen'` — `w-screen`\n   * - `'min'` — `w-min`\n   * - `'max'` — `w-max`\n   * - `'null'` — no width utility applied\n   * @default 'fit'\n   */\n  width?: 'full' | 'auto' | 'fit' | 'screen' | 'min' | 'max' | 'null';\n  /**\n   * Allows children to wrap onto multiple lines when `true`.\n   * @default true\n   */\n  wrap?: boolean;\n  /**\n   * Uniform margin applied to the container.\n   * - `'none'` — `m-0` (default)\n   * - `'sm'` — `m-2`\n   * - `'md'` — `m-4`\n   * - `'lg'` — `m-6`\n   * - `'xl'` — `m-8`\n   * @default 'none'\n   */\n  margin?: 'sm' | 'md' | 'lg' | 'xl' | 'none';\n  /**\n   * Uniform padding applied to the container.\n   * - `'none'` — `p-0`\n   * - `'sm'`  — `p-2` (default)\n   * - `'md'`  — `p-4`\n   * - `'lg'`  — `p-6`\n   * - `'xl'`  — `p-8`\n   * @default 'sm'\n   */\n  padding?: 'sm' | 'md' | 'lg' | 'xl' | 'none';\n  /**\n   * Gap between child elements.\n   * - `'none'` — `gap-0`\n   * - `'xs'`  — `gap-1` (default)\n   * - `'sm'`  — `gap-2`\n   * - `'md'`  — `gap-4`\n   * - `'lg'`  — `gap-6`\n   * - `'xl'`  — `gap-8`\n   * @default 'xs'\n   */\n  gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'none';\n  /**\n   * Justification of children along the main axis (`justify-content`).\n   * @default 'start'\n   */\n  justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly' | 'stretch';\n  /**\n   * Alignment of children along the cross axis (`align-items`).\n   * @default 'center'\n   */\n  align?: 'start' | 'center' | 'end' | 'baseline' | 'stretch';\n} & VariantProps<typeof flexVariants>;\n\n/**\n * A flexible, variant-driven flex container built on CVA and TailwindCSS.\n *\n * @example\n * ```tsx\n * import { Flex } from '@customafk/lunas-ui/layouts/flex';\n *\n * // Horizontal row with centered children and a medium gap\n * <Flex gap=\"md\" justify=\"between\" align=\"center\">\n *   <span>Left</span>\n *   <span>Right</span>\n * </Flex>\n *\n * // Vertical stack that fills parent width\n * <Flex vertical width=\"full\" gap=\"sm\" padding=\"md\">\n *   <p>First item</p>\n *   <p>Second item</p>\n * </Flex>\n * ```\n */\nexport const Flex = memo(({ vertical, wrap, width, margin, padding, gap, justify, align, className, children }: React.PropsWithChildren<Props>) => {\n  return (\n    <div\n      className={cn(\n        flexVariants({\n          vertical,\n          width,\n          wrap,\n          margin,\n          padding,\n          gap,\n          justify,\n          align,\n          className,\n        })\n      )}\n    >\n      {children}\n    </div>\n  );\n});\nFlex.displayName = 'Flex';\n"],"mappings":"wKAOA,MAAM,EAAe,EAAI,CAAC,gBAAiB,UAAU,CAAE,CACrD,SAAU,CACR,SAAU,CACR,KAAM,WACN,MAAO,WACR,CACD,MAAO,CACL,KAAM,SACN,KAAM,SACN,IAAK,QACL,OAAQ,WACR,IAAK,QACL,IAAK,QACL,KAAM,GACP,CACD,KAAM,CACJ,KAAM,YACN,MAAO,cACR,CACD,OAAQ,CACN,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,KAAM,MACP,CACD,QAAS,CACP,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,KAAM,MACP,CACD,IAAK,CACH,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,KAAM,QACP,CACD,QAAS,CACP,MAAO,gBACP,OAAQ,iBACR,IAAK,cACL,QAAS,kBACT,OAAQ,iBACR,OAAQ,iBACR,QAAS,kBACV,CACD,MAAO,CACL,MAAO,cACP,OAAQ,eACR,IAAK,YACL,SAAU,iBACV,QAAS,gBACV,CACF,CACD,gBAAiB,CACf,SAAU,GACV,KAAM,GACN,MAAO,MACP,OAAQ,OACR,QAAS,KACT,IAAK,KACL,QAAS,QACT,MAAO,SACR,CACF,CAAC,CA0FW,EAAO,GAAM,CAAE,WAAU,OAAM,QAAO,SAAQ,UAAS,MAAK,UAAS,QAAO,YAAW,cAEhG,EAAC,MAAA,CACC,UAAW,EACT,EAAa,CACX,WACA,QACA,OACA,SACA,UACA,MACA,UACA,QACA,YACD,CAAC,CACH,CAEA,YACG,CAER,CACF,EAAK,YAAc"}

package/dist/{flex-BsoSgWFN.cjs → flex-BbbogTsZ.cjs}

@@ -1,2 +1,2 @@
-const e=require(`./chunk-Bmb41Sf3.cjs`);let t=require(`@customafk/react-toolkit/utils`),n=require(`class-variance-authority`),r=require(`react/jsx-runtime`),i=require(`react`);const a=(0,n.cva)([`relative flex`,`text-sm`],{variants:{vertical:{true:`flex-col`,false:`flex-row`},width:{full:`w-full`,auto:`w-auto`,fit:`w-fit`,screen:`w-screen`,min:`w-min`,max:`w-max`,null:``},wrap:{true:`flex-wrap`,false:`flex-nowrap`},margin:{sm:`m-2`,md:`m-4`,lg:`m-6`,xl:`m-8`,none:`m-0`},padding:{sm:`p-2`,md:`p-4`,lg:`p-6`,xl:`p-8`,none:`p-0`},gap:{xs:`gap-1`,sm:`gap-2`,md:`gap-4`,lg:`gap-6`,xl:`gap-8`,none:`gap-0`},justify:{start:`justify-start`,center:`justify-center`,end:`justify-end`,between:`justify-between`,around:`justify-around`,evenly:`justify-evenly`,stretch:`justify-stretch`},align:{start:`items-start`,center:`items-center`,end:`items-end`,baseline:`items-baseline`,stretch:`items-stretch`}},defaultVariants:{vertical:!1,wrap:!0,width:`fit`,margin:`none`,padding:`sm`,gap:`xs`,justify:`start`,align:`center`}}),o=(0,i.memo)(({vertical:e,wrap:n,width:i,margin:o,padding:s,gap:c,justify:l,align:u,className:d,children:f})=>(0,r.jsx)(`div`,{className:(0,t.cn)(a({vertical:e,width:i,wrap:n,margin:o,padding:s,gap:c,justify:l,align:u,className:d})),children:f}));o.displayName=`Flex`,Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return o}});
-//# sourceMappingURL=flex-BsoSgWFN.cjs.map
+const e=require(`./chunk-Bmb41Sf3.cjs`);let t=require(`react`),n=require(`react/jsx-runtime`),r=require(`@customafk/react-toolkit/utils`),i=require(`class-variance-authority`);const a=(0,i.cva)([`relative flex`,`text-sm`],{variants:{vertical:{true:`flex-col`,false:`flex-row`},width:{full:`w-full`,auto:`w-auto`,fit:`w-fit`,screen:`w-screen`,min:`w-min`,max:`w-max`,null:``},wrap:{true:`flex-wrap`,false:`flex-nowrap`},margin:{sm:`m-2`,md:`m-4`,lg:`m-6`,xl:`m-8`,none:`m-0`},padding:{sm:`p-2`,md:`p-4`,lg:`p-6`,xl:`p-8`,none:`p-0`},gap:{xs:`gap-1`,sm:`gap-2`,md:`gap-4`,lg:`gap-6`,xl:`gap-8`,none:`gap-0`},justify:{start:`justify-start`,center:`justify-center`,end:`justify-end`,between:`justify-between`,around:`justify-around`,evenly:`justify-evenly`,stretch:`justify-stretch`},align:{start:`items-start`,center:`items-center`,end:`items-end`,baseline:`items-baseline`,stretch:`items-stretch`}},defaultVariants:{vertical:!1,wrap:!0,width:`fit`,margin:`none`,padding:`sm`,gap:`xs`,justify:`start`,align:`center`}}),o=(0,t.memo)(({vertical:e,wrap:t,width:i,margin:o,padding:s,gap:c,justify:l,align:u,className:d,children:f})=>(0,n.jsx)(`div`,{className:(0,r.cn)(a({vertical:e,width:i,wrap:t,margin:o,padding:s,gap:c,justify:l,align:u,className:d})),children:f}));o.displayName=`Flex`,Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return o}});
+//# sourceMappingURL=flex-BbbogTsZ.cjs.map

package/dist/flex-BbbogTsZ.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"flex-BbbogTsZ.cjs","names":[],"sources":["../packages/components/layouts/flex.tsx"],"sourcesContent":["'use client';\nimport { memo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nconst flexVariants = cva(['relative flex', 'text-sm'], {\n  variants: {\n    vertical: {\n      true: 'flex-col',\n      false: 'flex-row',\n    },\n    width: {\n      full: 'w-full',\n      auto: 'w-auto',\n      fit: 'w-fit',\n      screen: 'w-screen',\n      min: 'w-min',\n      max: 'w-max',\n      null: '',\n    },\n    wrap: {\n      true: 'flex-wrap',\n      false: 'flex-nowrap',\n    },\n    margin: {\n      sm: 'm-2',\n      md: 'm-4',\n      lg: 'm-6',\n      xl: 'm-8',\n      none: 'm-0',\n    },\n    padding: {\n      sm: 'p-2',\n      md: 'p-4',\n      lg: 'p-6',\n      xl: 'p-8',\n      none: 'p-0',\n    },\n    gap: {\n      xs: 'gap-1',\n      sm: 'gap-2',\n      md: 'gap-4',\n      lg: 'gap-6',\n      xl: 'gap-8',\n      none: 'gap-0',\n    },\n    justify: {\n      start: 'justify-start',\n      center: 'justify-center',\n      end: 'justify-end',\n      between: 'justify-between',\n      around: 'justify-around',\n      evenly: 'justify-evenly',\n      stretch: 'justify-stretch',\n    },\n    align: {\n      start: 'items-start',\n      center: 'items-center',\n      end: 'items-end',\n      baseline: 'items-baseline',\n      stretch: 'items-stretch',\n    },\n  },\n  defaultVariants: {\n    vertical: false,\n    wrap: true,\n    width: 'fit',\n    margin: 'none',\n    padding: 'sm',\n    gap: 'xs',\n    justify: 'start',\n    align: 'center',\n  },\n});\n\ntype Props = {\n  /** Additional Tailwind classes merged on top of the variant-generated classes. */\n  className?: string;\n  /**\n   * Stacks children vertically (`flex-col`) when `true`, horizontally (`flex-row`) when `false`.\n   * @default false\n   */\n  vertical?: boolean;\n  /**\n   * Controls the width of the flex container.\n   * - `'full'` — `w-full`\n   * - `'auto'` — `w-auto`\n   * - `'fit'`  — `w-fit` (default)\n   * - `'screen'` — `w-screen`\n   * - `'min'` — `w-min`\n   * - `'max'` — `w-max`\n   * - `'null'` — no width utility applied\n   * @default 'fit'\n   */\n  width?: 'full' | 'auto' | 'fit' | 'screen' | 'min' | 'max' | 'null';\n  /**\n   * Allows children to wrap onto multiple lines when `true`.\n   * @default true\n   */\n  wrap?: boolean;\n  /**\n   * Uniform margin applied to the container.\n   * - `'none'` — `m-0` (default)\n   * - `'sm'` — `m-2`\n   * - `'md'` — `m-4`\n   * - `'lg'` — `m-6`\n   * - `'xl'` — `m-8`\n   * @default 'none'\n   */\n  margin?: 'sm' | 'md' | 'lg' | 'xl' | 'none';\n  /**\n   * Uniform padding applied to the container.\n   * - `'none'` — `p-0`\n   * - `'sm'`  — `p-2` (default)\n   * - `'md'`  — `p-4`\n   * - `'lg'`  — `p-6`\n   * - `'xl'`  — `p-8`\n   * @default 'sm'\n   */\n  padding?: 'sm' | 'md' | 'lg' | 'xl' | 'none';\n  /**\n   * Gap between child elements.\n   * - `'none'` — `gap-0`\n   * - `'xs'`  — `gap-1` (default)\n   * - `'sm'`  — `gap-2`\n   * - `'md'`  — `gap-4`\n   * - `'lg'`  — `gap-6`\n   * - `'xl'`  — `gap-8`\n   * @default 'xs'\n   */\n  gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'none';\n  /**\n   * Justification of children along the main axis (`justify-content`).\n   * @default 'start'\n   */\n  justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly' | 'stretch';\n  /**\n   * Alignment of children along the cross axis (`align-items`).\n   * @default 'center'\n   */\n  align?: 'start' | 'center' | 'end' | 'baseline' | 'stretch';\n} & VariantProps<typeof flexVariants>;\n\n/**\n * A flexible, variant-driven flex container built on CVA and TailwindCSS.\n *\n * @example\n * ```tsx\n * import { Flex } from '@customafk/lunas-ui/layouts/flex';\n *\n * // Horizontal row with centered children and a medium gap\n * <Flex gap=\"md\" justify=\"between\" align=\"center\">\n *   <span>Left</span>\n *   <span>Right</span>\n * </Flex>\n *\n * // Vertical stack that fills parent width\n * <Flex vertical width=\"full\" gap=\"sm\" padding=\"md\">\n *   <p>First item</p>\n *   <p>Second item</p>\n * </Flex>\n * ```\n */\nexport const Flex = memo(({ vertical, wrap, width, margin, padding, gap, justify, align, className, children }: React.PropsWithChildren<Props>) => {\n  return (\n    <div\n      className={cn(\n        flexVariants({\n          vertical,\n          width,\n          wrap,\n          margin,\n          padding,\n          gap,\n          justify,\n          align,\n          className,\n        })\n      )}\n    >\n      {children}\n    </div>\n  );\n});\nFlex.displayName = 'Flex';\n"],"mappings":"gLAOA,MAAM,GAAA,EAAA,EAAA,KAAmB,CAAC,gBAAiB,UAAU,CAAE,CACrD,SAAU,CACR,SAAU,CACR,KAAM,WACN,MAAO,WACR,CACD,MAAO,CACL,KAAM,SACN,KAAM,SACN,IAAK,QACL,OAAQ,WACR,IAAK,QACL,IAAK,QACL,KAAM,GACP,CACD,KAAM,CACJ,KAAM,YACN,MAAO,cACR,CACD,OAAQ,CACN,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,KAAM,MACP,CACD,QAAS,CACP,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,KAAM,MACP,CACD,IAAK,CACH,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,KAAM,QACP,CACD,QAAS,CACP,MAAO,gBACP,OAAQ,iBACR,IAAK,cACL,QAAS,kBACT,OAAQ,iBACR,OAAQ,iBACR,QAAS,kBACV,CACD,MAAO,CACL,MAAO,cACP,OAAQ,eACR,IAAK,YACL,SAAU,iBACV,QAAS,gBACV,CACF,CACD,gBAAiB,CACf,SAAU,GACV,KAAM,GACN,MAAO,MACP,OAAQ,OACR,QAAS,KACT,IAAK,KACL,QAAS,QACT,MAAO,SACR,CACF,CAAC,CA0FW,GAAA,EAAA,EAAA,OAAa,CAAE,WAAU,OAAM,QAAO,SAAQ,UAAS,MAAK,UAAS,QAAO,YAAW,eAEhG,EAAA,EAAA,KAAC,MAAA,CACC,WAAA,EAAA,EAAA,IACE,EAAa,CACX,WACA,QACA,OACA,SACA,UACA,MACA,UACA,QACA,YACD,CAAC,CACH,CAEA,YACG,CAER,CACF,EAAK,YAAc"}

package/dist/heading-AKz5ewy-.cjs

@@ -0,0 +1,2 @@
+const e=require(`./chunk-Bmb41Sf3.cjs`);let t=require(`react/jsx-runtime`),n=require(`@customafk/react-toolkit/utils`),r=require(`class-variance-authority`);const i=(0,r.cva)(`scroll-m-20 text-start text-balance text-text-positive-strong tracking-tight transition-colors`,{variants:{level:{h1:`text-3xl leading-tight font-bold md:text-4xl`,h2:`text-2xl leading-tight font-semibold md:text-3xl`,h3:`text-xl leading-snug font-semibold md:text-2xl`,h4:`text-lg leading-snug font-semibold md:text-xl`,h5:`text-base leading-normal font-semibold md:text-lg`}},defaultVariants:{level:`h2`}});Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return i}});
+//# sourceMappingURL=heading-AKz5ewy-.cjs.map

package/dist/heading-AKz5ewy-.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"heading-AKz5ewy-.cjs","names":[],"sources":["../packages/components/typography/heading.tsx"],"sourcesContent":["'use client';\n\nimport type { ElementType, ReactNode } from 'react';\nimport { cn } from '@customafk/react-toolkit/utils';\nimport { cva } from 'class-variance-authority';\n\ntype HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5';\n\nexport type HeadingProps = {\n  level?: HeadingLevel;\n  className?: string;\n  children?: ReactNode;\n  as?: ElementType;\n};\n\nexport const headingVariants = cva('scroll-m-20 text-start text-balance text-text-positive-strong tracking-tight transition-colors', {\n  variants: {\n    level: {\n      h1: 'text-3xl leading-tight font-bold md:text-4xl',\n      h2: 'text-2xl leading-tight font-semibold md:text-3xl',\n      h3: 'text-xl leading-snug font-semibold md:text-2xl',\n      h4: 'text-lg leading-snug font-semibold md:text-xl',\n      h5: 'text-base leading-normal font-semibold md:text-lg',\n    },\n  },\n  defaultVariants: {\n    level: 'h2',\n  },\n});\n\nexport const Heading = ({ level = 'h3', className, as, children }: HeadingProps) => {\n  const Component = as || level;\n\n  return (\n    <Component data-slot=\"heading\" className={cn(headingVariants({ level }), className)}>\n      {children}\n    </Component>\n  );\n};\n"],"mappings":"6JAeA,MAAa,GAAA,EAAA,EAAA,KAAsB,iGAAkG,CACnI,SAAU,CACR,MAAO,CACL,GAAI,+CACJ,GAAI,mDACJ,GAAI,iDACJ,GAAI,gDACJ,GAAI,oDACL,CACF,CACD,gBAAiB,CACf,MAAO,KACR,CACF,CAAC"}

package/dist/heading-DN67djxs.mjs

@@ -0,0 +1,2 @@
+import{jsx as e}from"react/jsx-runtime";import{cn as t}from"@customafk/react-toolkit/utils";import{cva as n}from"class-variance-authority";const r=n(`scroll-m-20 text-start text-balance text-text-positive-strong tracking-tight transition-colors`,{variants:{level:{h1:`text-3xl leading-tight font-bold md:text-4xl`,h2:`text-2xl leading-tight font-semibold md:text-3xl`,h3:`text-xl leading-snug font-semibold md:text-2xl`,h4:`text-lg leading-snug font-semibold md:text-xl`,h5:`text-base leading-normal font-semibold md:text-lg`}},defaultVariants:{level:`h2`}});export{r as t};
+//# sourceMappingURL=heading-DN67djxs.mjs.map

package/dist/heading-DN67djxs.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"heading-DN67djxs.mjs","names":[],"sources":["../packages/components/typography/heading.tsx"],"sourcesContent":["'use client';\n\nimport type { ElementType, ReactNode } from 'react';\nimport { cn } from '@customafk/react-toolkit/utils';\nimport { cva } from 'class-variance-authority';\n\ntype HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5';\n\nexport type HeadingProps = {\n  level?: HeadingLevel;\n  className?: string;\n  children?: ReactNode;\n  as?: ElementType;\n};\n\nexport const headingVariants = cva('scroll-m-20 text-start text-balance text-text-positive-strong tracking-tight transition-colors', {\n  variants: {\n    level: {\n      h1: 'text-3xl leading-tight font-bold md:text-4xl',\n      h2: 'text-2xl leading-tight font-semibold md:text-3xl',\n      h3: 'text-xl leading-snug font-semibold md:text-2xl',\n      h4: 'text-lg leading-snug font-semibold md:text-xl',\n      h5: 'text-base leading-normal font-semibold md:text-lg',\n    },\n  },\n  defaultVariants: {\n    level: 'h2',\n  },\n});\n\nexport const Heading = ({ level = 'h3', className, as, children }: HeadingProps) => {\n  const Component = as || level;\n\n  return (\n    <Component data-slot=\"heading\" className={cn(headingVariants({ level }), className)}>\n      {children}\n    </Component>\n  );\n};\n"],"mappings":"2IAeA,MAAa,EAAkB,EAAI,iGAAkG,CACnI,SAAU,CACR,MAAO,CACL,GAAI,+CACJ,GAAI,mDACJ,GAAI,iDACJ,GAAI,gDACJ,GAAI,oDACL,CACF,CACD,gBAAiB,CACf,MAAO,KACR,CACF,CAAC"}

package/dist/image-B1Dm5LWk.cjs

@@ -0,0 +1,2 @@
+const e=require(`./chunk-Bmb41Sf3.cjs`),t=require(`./skeleton-BfMCjXYM.cjs`);let n=require(`lucide-react`),r=require(`react`),i=require(`react/jsx-runtime`),a=require(`@customafk/react-toolkit/utils`);const o=({src:e,alt:o,width:s,height:c,maxRetries:l=3,retryDelay:u=500,className:d,imageClassName:f,onClick:p})=>{let m=(0,r.useRef)(null),[h,g]=(0,r.useState)(e),[_,v]=(0,r.useState)(0),[y,b]=(0,r.useState)(!1),[x,S]=(0,r.useState)(!1),C=(0,r.useCallback)(()=>{b(!0)},[]),w=(0,r.useCallback)(()=>{if(_<l){S(!1);let t=_+1;v(t),setTimeout(()=>{g(e+`?retry=${Date.now()}&attempt=${t}`)},u*t);return}S(!0),b(!0),g(e)},[l,_,u,e]);return x?(0,i.jsx)(`div`,{style:{width:s,height:c},className:(0,a.cn)(`@container relative inline-block`,d),children:(0,i.jsxs)(`div`,{className:`flex size-full flex-col items-center justify-center gap-y-2 rounded-md bg-danger-muted shadow-card`,children:[(0,i.jsx)(n.AlertCircleIcon,{className:`@max-[52px]:size-6 size-8 text-danger`}),(0,i.jsx)(`span`,{className:`@max-[96px]:sr-only text-center text-danger-weak text-xs`,children:`Image failed to load`})]})}):(0,i.jsxs)(`div`,{style:{width:s,height:c},className:(0,a.cn)(`relative flex items-center justify-center overflow-hidden rounded-md`,d),onClick:p,children:[!y&&(0,i.jsx)(t.t,{className:`absolute inset-0 flex size-full animate-pulse items-center justify-center`}),(0,i.jsx)(`img`,{src:h,className:`absolute inset-0 z-0 size-full scale-110 object-cover blur-xl brightness-60`}),(0,i.jsx)(`img`,{id:h,ref:m,src:h,alt:o,loading:`lazy`,className:(0,a.cn)(`relative h-6/5 w-auto object-cover shadow-card transition-opacity duration-300`,y&&`opacity-100`,!y&&`pointer-events-none opacity-0`,f),onLoad:C,onError:w})]})};Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return o}});
+//# sourceMappingURL=image-B1Dm5LWk.cjs.map

package/dist/image-B1Dm5LWk.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-B1Dm5LWk.cjs","names":["Image: React.FC<Props>","AlertCircleIcon","Skeleton"],"sources":["../packages/components/ui/image.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\n\nimport { AlertCircleIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Skeleton } from './skeleton';\n\n/** Props for the Image component. */\ntype Props = {\n  /** URL of the image to display. */\n  src?: string;\n  /** Accessible alt text for the image. */\n  alt?: string;\n  /** Width of the image container (number treated as pixels). */\n  width?: number | string;\n  /** Height of the image container (number treated as pixels). */\n  height?: number | string;\n  /** Maximum number of retry attempts on load failure before showing an error state. @default 3 */\n  maxRetries?: number;\n  /** Base delay in milliseconds between retry attempts (multiplied by the attempt count). @default 500 */\n  retryDelay?: number;\n  /** Class name applied to the outer container div. */\n  className?: string;\n  /** Class name applied to the `<img>` element. */\n  imageClassName?: string;\n  /** Click handler for the image container. */\n  onClick?: () => void;\n};\n\n/**\n * A lazy-loading image with an automatic retry mechanism, a blurred background placeholder, a skeleton loader, and an error fallback.\n *\n * @example\n * ```tsx\n * import { Image } from '@customafk/lunas-ui/ui/image';\n *\n * <Image src=\"/hero.jpg\" alt=\"Hero\" width={400} height={300} maxRetries={3} />\n * ```\n */\nexport const Image: React.FC<Props> = ({ src, alt, width, height, maxRetries = 3, retryDelay = 500, className, imageClassName, onClick }) => {\n  const imageRef = useRef<HTMLImageElement>(null);\n  const [currentSrc, setCurrentSrc] = useState<string | undefined>(src);\n  const [retryCount, setRetryCount] = useState<number>(0);\n  const [isLoaded, setIsLoaded] = useState<boolean>(false);\n  const [hasError, setHasError] = useState<boolean>(false);\n\n  const handleLoad = useCallback(() => {\n    setIsLoaded(true);\n  }, []);\n\n  const handleError = useCallback(() => {\n    if (retryCount < maxRetries) {\n      // imageRef.current?.style.setProperty('display', 'none')\n      setHasError(false);\n      const newRetryCount = retryCount + 1;\n      setRetryCount(newRetryCount);\n\n      // Retry with exponential backoff and cache busting\n      setTimeout(() => {\n        const cacheBuster = `?retry=${Date.now()}&attempt=${newRetryCount}`;\n        setCurrentSrc(src + cacheBuster);\n      }, retryDelay * newRetryCount);\n      return;\n    }\n\n    setHasError(true);\n    setIsLoaded(true);\n    setCurrentSrc(src);\n  }, [maxRetries, retryCount, retryDelay, src]);\n\n  if (hasError) {\n    return (\n      <div style={{ width, height }} className={cn('@container relative inline-block', className)}>\n        <div className=\"flex size-full flex-col items-center justify-center gap-y-2 rounded-md bg-danger-muted shadow-card\">\n          <AlertCircleIcon className=\"@max-[52px]:size-6 size-8 text-danger\" />\n          <span className=\"@max-[96px]:sr-only text-center text-danger-weak text-xs\">Image failed to load</span>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div style={{ width, height }} className={cn('relative flex items-center justify-center overflow-hidden rounded-md', className)} onClick={onClick}>\n      {!isLoaded && <Skeleton className=\"absolute inset-0 flex size-full animate-pulse items-center justify-center\" />}\n      <img src={currentSrc} className=\"absolute inset-0 z-0 size-full scale-110 object-cover blur-xl brightness-60\" />\n      <img\n        id={currentSrc}\n        ref={imageRef}\n        src={currentSrc}\n        alt={alt}\n        loading=\"lazy\"\n        className={cn(\n          'relative h-6/5 w-auto object-cover shadow-card transition-opacity duration-300',\n          isLoaded && 'opacity-100',\n          !isLoaded && 'pointer-events-none opacity-0',\n          imageClassName\n        )}\n        onLoad={handleLoad}\n        onError={handleError}\n      />\n    </div>\n  );\n};\n"],"mappings":"yMAwCA,MAAaA,GAA0B,CAAE,MAAK,MAAK,QAAO,SAAQ,aAAa,EAAG,aAAa,IAAK,YAAW,iBAAgB,aAAc,CAC3I,IAAM,GAAA,EAAA,EAAA,QAAoC,KAAK,CACzC,CAAC,EAAY,IAAA,EAAA,EAAA,UAA8C,EAAI,CAC/D,CAAC,EAAY,IAAA,EAAA,EAAA,UAAkC,EAAE,CACjD,CAAC,EAAU,IAAA,EAAA,EAAA,UAAiC,GAAM,CAClD,CAAC,EAAU,IAAA,EAAA,EAAA,UAAiC,GAAM,CAElD,GAAA,EAAA,EAAA,iBAA+B,CACnC,EAAY,GAAK,EAChB,EAAE,CAAC,CAEA,GAAA,EAAA,EAAA,iBAAgC,CACpC,GAAI,EAAa,EAAY,CAE3B,EAAY,GAAM,CAClB,IAAM,EAAgB,EAAa,EACnC,EAAc,EAAc,CAG5B,eAAiB,CAEf,EAAc,EADM,UAAU,KAAK,KAAK,CAAC,WAAW,IACpB,EAC/B,EAAa,EAAc,CAC9B,OAGF,EAAY,GAAK,CACjB,EAAY,GAAK,CACjB,EAAc,EAAI,EACjB,CAAC,EAAY,EAAY,EAAY,EAAI,CAAC,CAa7C,OAXI,GAEA,EAAA,EAAA,KAAC,MAAA,CAAI,MAAO,CAAE,QAAO,SAAQ,CAAE,WAAA,EAAA,EAAA,IAAc,mCAAoC,EAAU,WACzF,EAAA,EAAA,MAAC,MAAA,CAAI,UAAU,gHACb,EAAA,EAAA,KAACC,EAAAA,gBAAAA,CAAgB,UAAU,wCAAA,CAA0C,EACrE,EAAA,EAAA,KAAC,OAAA,CAAK,UAAU,oEAA2D,wBAA2B,CAAA,EAClG,EACF,EAKR,EAAA,EAAA,MAAC,MAAA,CAAI,MAAO,CAAE,QAAO,SAAQ,CAAE,WAAA,EAAA,EAAA,IAAc,uEAAwE,EAAU,CAAW,oBACvI,CAAC,IAAY,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAS,UAAU,4EAAA,CAA8E,EAChH,EAAA,EAAA,KAAC,MAAA,CAAI,IAAK,EAAY,UAAU,+EAAgF,EAChH,EAAA,EAAA,KAAC,MAAA,CACC,GAAI,EACJ,IAAK,EACL,IAAK,EACA,MACL,QAAQ,OACR,WAAA,EAAA,EAAA,IACE,iFACA,GAAY,cACZ,CAAC,GAAY,gCACb,EACD,CACD,OAAQ,EACR,QAAS,GACT,GACE"}

package/dist/image-BlzrSaoE.mjs

@@ -0,0 +1,2 @@
+import{t as e}from"./skeleton-BPxcW2yu.mjs";import{AlertCircleIcon as t}from"lucide-react";import{useCallback as n,useRef as r,useState as i}from"react";import{jsx as a,jsxs as o}from"react/jsx-runtime";import{cn as s}from"@customafk/react-toolkit/utils";const c=({src:c,alt:l,width:u,height:d,maxRetries:f=3,retryDelay:p=500,className:m,imageClassName:h,onClick:g})=>{let _=r(null),[v,y]=i(c),[b,x]=i(0),[S,C]=i(!1),[w,T]=i(!1),E=n(()=>{C(!0)},[]),D=n(()=>{if(b<f){T(!1);let e=b+1;x(e),setTimeout(()=>{y(c+`?retry=${Date.now()}&attempt=${e}`)},p*e);return}T(!0),C(!0),y(c)},[f,b,p,c]);return w?a(`div`,{style:{width:u,height:d},className:s(`@container relative inline-block`,m),children:o(`div`,{className:`flex size-full flex-col items-center justify-center gap-y-2 rounded-md bg-danger-muted shadow-card`,children:[a(t,{className:`@max-[52px]:size-6 size-8 text-danger`}),a(`span`,{className:`@max-[96px]:sr-only text-center text-danger-weak text-xs`,children:`Image failed to load`})]})}):o(`div`,{style:{width:u,height:d},className:s(`relative flex items-center justify-center overflow-hidden rounded-md`,m),onClick:g,children:[!S&&a(e,{className:`absolute inset-0 flex size-full animate-pulse items-center justify-center`}),a(`img`,{src:v,className:`absolute inset-0 z-0 size-full scale-110 object-cover blur-xl brightness-60`}),a(`img`,{id:v,ref:_,src:v,alt:l,loading:`lazy`,className:s(`relative h-6/5 w-auto object-cover shadow-card transition-opacity duration-300`,S&&`opacity-100`,!S&&`pointer-events-none opacity-0`,h),onLoad:E,onError:D})]})};export{c as t};
+//# sourceMappingURL=image-BlzrSaoE.mjs.map

package/dist/image-BlzrSaoE.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-BlzrSaoE.mjs","names":["Image: React.FC<Props>"],"sources":["../packages/components/ui/image.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\n\nimport { AlertCircleIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Skeleton } from './skeleton';\n\n/** Props for the Image component. */\ntype Props = {\n  /** URL of the image to display. */\n  src?: string;\n  /** Accessible alt text for the image. */\n  alt?: string;\n  /** Width of the image container (number treated as pixels). */\n  width?: number | string;\n  /** Height of the image container (number treated as pixels). */\n  height?: number | string;\n  /** Maximum number of retry attempts on load failure before showing an error state. @default 3 */\n  maxRetries?: number;\n  /** Base delay in milliseconds between retry attempts (multiplied by the attempt count). @default 500 */\n  retryDelay?: number;\n  /** Class name applied to the outer container div. */\n  className?: string;\n  /** Class name applied to the `<img>` element. */\n  imageClassName?: string;\n  /** Click handler for the image container. */\n  onClick?: () => void;\n};\n\n/**\n * A lazy-loading image with an automatic retry mechanism, a blurred background placeholder, a skeleton loader, and an error fallback.\n *\n * @example\n * ```tsx\n * import { Image } from '@customafk/lunas-ui/ui/image';\n *\n * <Image src=\"/hero.jpg\" alt=\"Hero\" width={400} height={300} maxRetries={3} />\n * ```\n */\nexport const Image: React.FC<Props> = ({ src, alt, width, height, maxRetries = 3, retryDelay = 500, className, imageClassName, onClick }) => {\n  const imageRef = useRef<HTMLImageElement>(null);\n  const [currentSrc, setCurrentSrc] = useState<string | undefined>(src);\n  const [retryCount, setRetryCount] = useState<number>(0);\n  const [isLoaded, setIsLoaded] = useState<boolean>(false);\n  const [hasError, setHasError] = useState<boolean>(false);\n\n  const handleLoad = useCallback(() => {\n    setIsLoaded(true);\n  }, []);\n\n  const handleError = useCallback(() => {\n    if (retryCount < maxRetries) {\n      // imageRef.current?.style.setProperty('display', 'none')\n      setHasError(false);\n      const newRetryCount = retryCount + 1;\n      setRetryCount(newRetryCount);\n\n      // Retry with exponential backoff and cache busting\n      setTimeout(() => {\n        const cacheBuster = `?retry=${Date.now()}&attempt=${newRetryCount}`;\n        setCurrentSrc(src + cacheBuster);\n      }, retryDelay * newRetryCount);\n      return;\n    }\n\n    setHasError(true);\n    setIsLoaded(true);\n    setCurrentSrc(src);\n  }, [maxRetries, retryCount, retryDelay, src]);\n\n  if (hasError) {\n    return (\n      <div style={{ width, height }} className={cn('@container relative inline-block', className)}>\n        <div className=\"flex size-full flex-col items-center justify-center gap-y-2 rounded-md bg-danger-muted shadow-card\">\n          <AlertCircleIcon className=\"@max-[52px]:size-6 size-8 text-danger\" />\n          <span className=\"@max-[96px]:sr-only text-center text-danger-weak text-xs\">Image failed to load</span>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div style={{ width, height }} className={cn('relative flex items-center justify-center overflow-hidden rounded-md', className)} onClick={onClick}>\n      {!isLoaded && <Skeleton className=\"absolute inset-0 flex size-full animate-pulse items-center justify-center\" />}\n      <img src={currentSrc} className=\"absolute inset-0 z-0 size-full scale-110 object-cover blur-xl brightness-60\" />\n      <img\n        id={currentSrc}\n        ref={imageRef}\n        src={currentSrc}\n        alt={alt}\n        loading=\"lazy\"\n        className={cn(\n          'relative h-6/5 w-auto object-cover shadow-card transition-opacity duration-300',\n          isLoaded && 'opacity-100',\n          !isLoaded && 'pointer-events-none opacity-0',\n          imageClassName\n        )}\n        onLoad={handleLoad}\n        onError={handleError}\n      />\n    </div>\n  );\n};\n"],"mappings":"+PAwCA,MAAaA,GAA0B,CAAE,MAAK,MAAK,QAAO,SAAQ,aAAa,EAAG,aAAa,IAAK,YAAW,iBAAgB,aAAc,CAC3I,IAAM,EAAW,EAAyB,KAAK,CACzC,CAAC,EAAY,GAAiB,EAA6B,EAAI,CAC/D,CAAC,EAAY,GAAiB,EAAiB,EAAE,CACjD,CAAC,EAAU,GAAe,EAAkB,GAAM,CAClD,CAAC,EAAU,GAAe,EAAkB,GAAM,CAElD,EAAa,MAAkB,CACnC,EAAY,GAAK,EAChB,EAAE,CAAC,CAEA,EAAc,MAAkB,CACpC,GAAI,EAAa,EAAY,CAE3B,EAAY,GAAM,CAClB,IAAM,EAAgB,EAAa,EACnC,EAAc,EAAc,CAG5B,eAAiB,CAEf,EAAc,EADM,UAAU,KAAK,KAAK,CAAC,WAAW,IACpB,EAC/B,EAAa,EAAc,CAC9B,OAGF,EAAY,GAAK,CACjB,EAAY,GAAK,CACjB,EAAc,EAAI,EACjB,CAAC,EAAY,EAAY,EAAY,EAAI,CAAC,CAa7C,OAXI,EAEA,EAAC,MAAA,CAAI,MAAO,CAAE,QAAO,SAAQ,CAAE,UAAW,EAAG,mCAAoC,EAAU,UACzF,EAAC,MAAA,CAAI,UAAU,+GACb,EAAC,EAAA,CAAgB,UAAU,wCAAA,CAA0C,CACrE,EAAC,OAAA,CAAK,UAAU,oEAA2D,wBAA2B,CAAA,EAClG,EACF,CAKR,EAAC,MAAA,CAAI,MAAO,CAAE,QAAO,SAAQ,CAAE,UAAW,EAAG,uEAAwE,EAAU,CAAW,oBACvI,CAAC,GAAY,EAAC,EAAA,CAAS,UAAU,4EAAA,CAA8E,CAChH,EAAC,MAAA,CAAI,IAAK,EAAY,UAAU,+EAAgF,CAChH,EAAC,MAAA,CACC,GAAI,EACJ,IAAK,EACL,IAAK,EACA,MACL,QAAQ,OACR,UAAW,EACT,iFACA,GAAY,cACZ,CAAC,GAAY,gCACb,EACD,CACD,OAAQ,EACR,QAAS,GACT,GACE"}