@customafk/lunas-ui 0.2.63 → 0.2.65

package/dist/password-field-fzpU42sV.mjs

@@ -0,0 +1,2 @@
+import{Input as e}from"./ui/input.mjs";import{G as t}from"./tanstack-form-CM_Hb3JT.mjs";import{Field as n,FieldContent as r,FieldContentMain as i,FieldDescription as a,FieldError as o,FieldGroup as s,FieldLabel as c,FieldNote as l,FieldSeparator as u,FieldTooltip as d}from"./field-BKyUqvzh.mjs";import{EyeIcon as f,EyeOffIcon as p}from"lucide-react";import{useCallback as m,useId as h,useState as g}from"react";import{jsx as _,jsxs as v}from"react/jsx-runtime";import{useStore as y}from"@tanstack/react-form";const b=({label:b,description:x,placeholder:S,orientation:C=`responsive`,tooltip:w,helperText:T,showErrorMessage:E=!0})=>{let D=h(),{form:O,name:k,state:A,handleBlur:j,handleChange:M}=t(),N=y(O.store,({isSubmitting:e})=>e),[P,F]=g(!1),I=A.meta.isDirty&&A.meta.isTouched&&!A.meta.isValid,L=m(()=>F(e=>!e),[]),R=m(({target:{value:e}})=>{N||M(e||null)},[N,M]);return v(s,{className:`gap-y-4 px-4`,children:[v(n,{"data-invalid":I,orientation:C,children:[v(r,{children:[v(c,{htmlFor:D,children:[b,w&&_(d,{tooltip:w})]}),_(a,{children:x})]}),v(i,{children:[_(e,{id:D,name:k,type:P?`text`:`password`,placeholder:S,value:A.value??``,"aria-invalid":I,autoComplete:`new-password`,onBlur:j,onChange:R}),_(`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:L,"aria-label":P?`Ẩn mật khẩu`:`Hiện mật khẩu`,"aria-pressed":P,"aria-controls":D,children:_(P?p:f,{size:16,"aria-hidden":`true`})}),_(`div`,{className:`mt-1 flex w-full items-start justify-start`,children:E&&A.meta.isDirty&&_(o,{errors:A.meta.errors})}),_(l,{isShow:!!T,children:T})]})]}),_(u,{})]})};export{b as PasswordField};
+//# sourceMappingURL=password-field-fzpU42sV.mjs.map

package/dist/password-field-fzpU42sV.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"password-field-fzpU42sV.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/fields/password-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId, useState } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { EyeIcon, EyeOffIcon } from 'lucide-react';\n\nimport { Input } from '@/components/ui/input';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport {\n  Field,\n  FieldContent,\n  FieldContentMain,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n  FieldNote,\n  FieldSeparator,\n  FieldTooltip,\n} from '../ui/field';\n\nimport type { PasswordFieldProps as Props } from '../../types';\n\n/**\n * A TanStack Form-connected password input field with a show/hide toggle button\n * and inline validation error display.\n *\n * @example\n * import { PasswordField } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <form.Field name=\"password\">\n *   {() => (\n *     <PasswordField\n *       label=\"Password\"\n *       placeholder=\"Enter your password\"\n *       helperText=\"Must be at least 8 characters\"\n *     />\n *   )}\n * </form.Field>\n */\nexport const PasswordField: React.FC<Props> = ({\n  label,\n  description,\n  placeholder,\n  orientation = 'responsive',\n  tooltip,\n  helperText,\n  showErrorMessage = true,\n}) => {\n  const id = useId();\n  const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const [isVisible, setIsVisible] = useState<boolean>(false);\n\n  const _invalid = state.meta.isDirty && state.meta.isTouched && !state.meta.isValid;\n\n  const toggleVisibility = useCallback(() => setIsVisible(prev => !prev), []);\n\n  const onChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n    ({ target: { value } }) => {\n      if (isSubmitting) return;\n      handleChange(value || null);\n    },\n    [isSubmitting, handleChange]\n  );\n\n  return (\n    <FieldGroup className=\"gap-y-4 px-4\">\n      <Field data-invalid={_invalid} orientation={orientation}>\n        <FieldContent>\n          <FieldLabel htmlFor={id}>\n            {label}\n            {tooltip && <FieldTooltip tooltip={tooltip} />}\n          </FieldLabel>\n          <FieldDescription>{description}</FieldDescription>\n        </FieldContent>\n        <FieldContentMain>\n          <Input\n            id={id}\n            name={name}\n            type={isVisible ? 'text' : 'password'}\n            placeholder={placeholder}\n            value={state.value ?? ''}\n            aria-invalid={_invalid}\n            autoComplete=\"new-password\"\n            onBlur={handleBlur}\n            onChange={onChange}\n          />\n\n          <button\n            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\"\n            type=\"button\"\n            onClick={toggleVisibility}\n            aria-label={isVisible ? 'Ẩn mật khẩu' : 'Hiện mật khẩu'}\n            aria-pressed={isVisible}\n            aria-controls={id}\n          >\n            {isVisible ? <EyeOffIcon size={16} aria-hidden=\"true\" /> : <EyeIcon size={16} aria-hidden=\"true\" />}\n          </button>\n\n          <div className=\"mt-1 flex w-full items-start justify-start\">\n            {showErrorMessage && state.meta.isDirty && <FieldError errors={state.meta.errors} />}\n          </div>\n          <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n        </FieldContentMain>\n      </Field>\n      <FieldSeparator />\n    </FieldGroup>\n  );\n};\n"],"mappings":"8fA2CA,MAAa,GAAkC,CAC7C,QACA,cACA,cACA,cAAc,aACd,UACA,aACA,mBAAmB,MACf,CACJ,IAAM,EAAK,EAAM,EACX,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiB,EAAuC,EAEzF,EAAe,EAAS,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,CAAC,EAAW,GAAgB,EAAkB,EAAK,EAEnD,EAAW,EAAM,KAAK,SAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAErE,EAAmB,MAAkB,EAAa,GAAQ,CAAC,CAAI,EAAG,CAAC,CAAC,EAEpE,EAAW,GACd,CAAE,OAAQ,CAAE,YAAc,CACrB,GACJ,EAAa,GAAS,IAAI,CAC5B,EACA,CAAC,EAAc,CAAY,CAC7B,EAEA,OACE,EAAC,EAAD,CAAY,UAAU,wBAAtB,CACE,EAAC,EAAD,CAAO,eAAc,EAAuB,uBAA5C,CACE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAY,QAAS,WAArB,CACG,EACA,GAAW,EAAC,EAAD,CAAuB,SAAU,CAAA,CACnC,IACZ,EAAC,EAAD,CAAA,SAAmB,CAA8B,CAAA,CACrC,CAAA,CAAA,EACd,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CACM,KACE,OACN,KAAM,EAAY,OAAS,WACd,cACb,MAAO,EAAM,OAAS,GACtB,eAAc,EACd,aAAa,eACb,OAAQ,EACE,UACX,CAAA,EAED,EAAC,SAAD,CACE,UAAU,kOACV,KAAK,SACL,QAAS,EACT,aAAY,EAAY,cAAgB,gBACxC,eAAc,EACd,gBAAe,WAEF,EAAZ,EAAa,EAA8C,EAA/C,CAAY,KAAM,GAAI,cAAY,MAAQ,CAA2C,CAC5F,CAAA,EAER,EAAC,MAAD,CAAK,UAAU,sDACZ,GAAoB,EAAM,KAAK,SAAW,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAChF,CAAA,EACL,EAAC,EAAD,CAAW,OAAQ,CAAC,CAAC,WAAa,CAAsB,CAAA,CACxC,CAAA,CAAA,CACb,IACP,EAAC,EAAD,CAAiB,CAAA,CACP,GAEhB"}

package/dist/popover-form-DNbBGWVF.mjs

@@ -0,0 +1,2 @@
+import{t as e}from"./close-DYJZ8fkh.mjs";import{K as t}from"./tanstack-form-CM_Hb3JT.mjs";import{n,t as r}from"./submit-button-CGBaPzE9.mjs";import{cn as i}from"@customafk/react-toolkit/utils";import{jsx as a,jsxs as o}from"react/jsx-runtime";import{Dialog as s}from"radix-ui";const c=({title:c,open:l,contentClassName:u,onOpenChange:d,children:f})=>{let p=t();return a(s.Root,{"data-slot":`dialog`,open:l,onOpenChange:d,children:o(s.Portal,{"data-slot":`dialog-portal`,children:[a(s.Overlay,{"data-slot":`dialog-overlay`,className:i(`fixed inset-0 z-40 bg-black/40 backdrop-blur-sm`,`data-[state=open]:animate-in data-[state=open]:fade-in`,`data-[state=closed]:animate-out data-[state=closed]:fade-out`)}),a(s.Content,{"data-slot":`dialog-content`,className:i(`fixed top-4 right-4 z-50 h-[calc(100dvh-2rem)] min-w-sm max-w-xl rounded-md bg-background shadow-lg ring-1 ring-border`,`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:o(`section`,{className:`relative flex size-full flex-col`,children:[a(`header`,{className:`flex h-14 shrink-0 items-center border-b border-border px-5`,children:a(`h2`,{className:`font-semibold text-base tracking-tight text-text-positive`,children:c})}),a(`div`,{className:i(`flex flex-1 flex-col overflow-y-auto py-4`,u),children:f}),o(`div`,{className:`flex shrink-0 flex-col gap-2 border-t border-border px-4 py-3`,children:[a(p.Subscribe,{selector:e=>({isSubmitting:e.isSubmitting,disabled:e.isPristine||!e.isValid||e.isValidating||e.isSubmitting||!e.canSubmit}),children:({isSubmitting:e,disabled:t})=>a(r,{isSubmitting:e,disabled:t,className:`w-full`,onClick:()=>p.handleSubmit()})}),a(p.Subscribe,{selector:e=>({disabled:e.isPristine||e.isSubmitting}),children:({disabled:e})=>a(n,{disabled:e,className:`w-full`,onClick:()=>{p.reset(),d?.(!1)}})})]}),a(s.Close,{asChild:!0,children:a(e,{className:`absolute top-2.5 right-3`})})]})})]})})};export{c as TanStackPopoverForm};
+//# sourceMappingURL=popover-form-DNbBGWVF.mjs.map

package/dist/popover-form-DNbBGWVF.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-form-DNbBGWVF.mjs","names":["DialogPrimitive"],"sources":["../packages/components/features/tanstack-form/components/forms/popover-form.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { CloseButton } from '@/components/ui/buttons/close';\n\nimport { Dialog as DialogPrimitive } from 'radix-ui';\nimport { useTanStackFormContext } from '../form-context';\nimport { CancelButton } from '../ui/cancel-button';\nimport { SubmitButton } from '../ui/submit-button';\n\n/**\n * Renders a slide-in side-panel dialog that wraps a TanStack form with built-in submit and cancel actions.\n *\n * @example\n * import { TanStackPopoverForm } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <TanStackPopoverForm\n *   title=\"Edit Profile\"\n *   open={isOpen}\n *   onOpenChange={setIsOpen}\n * >\n *   <EmailField />\n * </TanStackPopoverForm>\n */\nexport const TanStackPopoverForm: React.FC<\n  React.PropsWithChildren<{\n    /** Heading text displayed in the panel header. */\n    title: string;\n    /** Controlled open state of the popover dialog. */\n    open?: boolean;\n    /** Additional CSS class names applied to the scrollable content area. */\n    contentClassName?: string;\n    /** Callback fired when the open state changes. */\n    onOpenChange?: (open: boolean) => void;\n  }>\n> = ({ title, open, contentClassName, onOpenChange, children }) => {\n  const form = useTanStackFormContext();\n\n  return (\n    <DialogPrimitive.Root data-slot=\"dialog\" open={open} onOpenChange={onOpenChange}>\n      <DialogPrimitive.Portal data-slot=\"dialog-portal\">\n        <DialogPrimitive.Overlay\n          data-slot=\"dialog-overlay\"\n          className={cn(\n            'fixed inset-0 z-40 bg-black/40 backdrop-blur-sm',\n            'data-[state=open]:animate-in data-[state=open]:fade-in',\n            'data-[state=closed]:animate-out data-[state=closed]:fade-out'\n          )}\n        />\n        <DialogPrimitive.Content\n          data-slot=\"dialog-content\"\n          className={cn(\n            'fixed top-4 right-4 z-50 h-[calc(100dvh-2rem)] min-w-sm max-w-xl rounded-md bg-background shadow-lg ring-1 ring-border',\n            'duration-300',\n            'data-[state=open]:animate-in data-[state=open]:slide-in-from-right data-[state=open]:fade-in',\n            'data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right data-[state=closed]:fade-out'\n          )}\n        >\n          <section className=\"relative flex size-full flex-col\">\n            <header className=\"flex h-14 shrink-0 items-center border-b border-border px-5\">\n              <h2 className=\"font-semibold text-base tracking-tight text-text-positive\">{title}</h2>\n            </header>\n\n            <div className={cn('flex flex-1 flex-col overflow-y-auto py-4', contentClassName)}>{children}</div>\n\n            <div className=\"flex shrink-0 flex-col gap-2 border-t border-border px-4 py-3\">\n              <form.Subscribe\n                selector={state => ({\n                  isSubmitting: state.isSubmitting,\n                  disabled: state.isPristine || !state.isValid || state.isValidating || state.isSubmitting || !state.canSubmit,\n                })}\n                children={({ isSubmitting, disabled }) => (\n                  <SubmitButton isSubmitting={isSubmitting} disabled={disabled} className=\"w-full\" onClick={() => form.handleSubmit()} />\n                )}\n              />\n              <form.Subscribe\n                selector={state => ({ disabled: state.isPristine || state.isSubmitting })}\n                children={({ disabled }) => (\n                  <CancelButton\n                    disabled={disabled}\n                    className=\"w-full\"\n                    onClick={() => {\n                      form.reset();\n                      onOpenChange?.(false);\n                    }}\n                  />\n                )}\n              />\n            </div>\n\n            <DialogPrimitive.Close asChild>\n              <CloseButton className=\"absolute top-2.5 right-3\" />\n            </DialogPrimitive.Close>\n          </section>\n        </DialogPrimitive.Content>\n      </DialogPrimitive.Portal>\n    </DialogPrimitive.Root>\n  );\n};\n"],"mappings":"qRAyBA,MAAa,GAWR,CAAE,QAAO,OAAM,mBAAkB,eAAc,cAAe,CACjE,IAAM,EAAO,EAAuB,EAEpC,OACE,EAACA,EAAgB,KAAjB,CAAsB,YAAU,SAAe,OAAoB,wBACjE,EAACA,EAAgB,OAAjB,CAAwB,YAAU,yBAAlC,CACE,EAACA,EAAgB,QAAjB,CACE,YAAU,iBACV,UAAW,EACT,kDACA,yDACA,8DACF,CACD,CAAA,EACD,EAACA,EAAgB,QAAjB,CACE,YAAU,iBACV,UAAW,EACT,yHACA,eACA,+FACA,qGACF,WAEA,EAAC,UAAD,CAAS,UAAU,4CAAnB,CACE,EAAC,SAAD,CAAQ,UAAU,uEAChB,EAAC,KAAD,CAAI,UAAU,qEAA6D,CAAU,CAAA,CAC/E,CAAA,EAER,EAAC,MAAD,CAAK,UAAW,EAAG,4CAA6C,CAAgB,EAAI,UAAc,CAAA,EAElG,EAAC,MAAD,CAAK,UAAU,yEAAf,CACE,EAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAClB,aAAc,EAAM,aACpB,SAAU,EAAM,YAAc,CAAC,EAAM,SAAW,EAAM,cAAgB,EAAM,cAAgB,CAAC,EAAM,SACrG,GACA,UAAW,CAAE,eAAc,cACzB,EAAC,EAAD,CAA4B,eAAwB,WAAU,UAAU,SAAS,YAAe,EAAK,aAAa,CAAI,CAAA,CAEzH,CAAA,EACD,EAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAAE,SAAU,EAAM,YAAc,EAAM,YAAa,GACvE,UAAW,CAAE,cACX,EAAC,EAAD,CACY,WACV,UAAU,SACV,YAAe,CACb,EAAK,MAAM,EACX,IAAe,EAAK,CACtB,CACD,CAAA,CAEJ,CAAA,CACE,IAEL,EAACA,EAAgB,MAAjB,CAAuB,QAAA,YACrB,EAAC,EAAD,CAAa,UAAU,0BAA4B,CAAA,CAC9B,CAAA,CAChB,GACc,CAAA,CACH,GACJ,CAAA,CAE1B"}

package/dist/popover-form-KLmew1Vd.cjs

@@ -0,0 +1,2 @@
+const e=require("./close-BYHgEZvZ.cjs"),t=require("./tanstack-form-DS_ZvRl8.cjs"),n=require("./submit-button-CvINfld5.cjs");let r=require("@customafk/react-toolkit/utils"),i=require("react/jsx-runtime"),a=require("radix-ui");const o=({title:o,open:s,contentClassName:c,onOpenChange:l,children:u})=>{let d=t.K();return(0,i.jsx)(a.Dialog.Root,{"data-slot":`dialog`,open:s,onOpenChange:l,children:(0,i.jsxs)(a.Dialog.Portal,{"data-slot":`dialog-portal`,children:[(0,i.jsx)(a.Dialog.Overlay,{"data-slot":`dialog-overlay`,className:(0,r.cn)(`fixed inset-0 z-40 bg-black/40 backdrop-blur-sm`,`data-[state=open]:animate-in data-[state=open]:fade-in`,`data-[state=closed]:animate-out data-[state=closed]:fade-out`)}),(0,i.jsx)(a.Dialog.Content,{"data-slot":`dialog-content`,className:(0,r.cn)(`fixed top-4 right-4 z-50 h-[calc(100dvh-2rem)] min-w-sm max-w-xl rounded-md bg-background shadow-lg ring-1 ring-border`,`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:(0,i.jsxs)(`section`,{className:`relative flex size-full flex-col`,children:[(0,i.jsx)(`header`,{className:`flex h-14 shrink-0 items-center border-b border-border px-5`,children:(0,i.jsx)(`h2`,{className:`font-semibold text-base tracking-tight text-text-positive`,children:o})}),(0,i.jsx)(`div`,{className:(0,r.cn)(`flex flex-1 flex-col overflow-y-auto py-4`,c),children:u}),(0,i.jsxs)(`div`,{className:`flex shrink-0 flex-col gap-2 border-t border-border px-4 py-3`,children:[(0,i.jsx)(d.Subscribe,{selector:e=>({isSubmitting:e.isSubmitting,disabled:e.isPristine||!e.isValid||e.isValidating||e.isSubmitting||!e.canSubmit}),children:({isSubmitting:e,disabled:t})=>(0,i.jsx)(n.t,{isSubmitting:e,disabled:t,className:`w-full`,onClick:()=>d.handleSubmit()})}),(0,i.jsx)(d.Subscribe,{selector:e=>({disabled:e.isPristine||e.isSubmitting}),children:({disabled:e})=>(0,i.jsx)(n.n,{disabled:e,className:`w-full`,onClick:()=>{d.reset(),l?.(!1)}})})]}),(0,i.jsx)(a.Dialog.Close,{asChild:!0,children:(0,i.jsx)(e.t,{className:`absolute top-2.5 right-3`})})]})})]})})};exports.TanStackPopoverForm=o;
+//# sourceMappingURL=popover-form-KLmew1Vd.cjs.map

package/dist/popover-form-KLmew1Vd.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-form-KLmew1Vd.cjs","names":["useTanStackFormContext","DialogPrimitive","SubmitButton","CancelButton","CloseButton"],"sources":["../packages/components/features/tanstack-form/components/forms/popover-form.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { CloseButton } from '@/components/ui/buttons/close';\n\nimport { Dialog as DialogPrimitive } from 'radix-ui';\nimport { useTanStackFormContext } from '../form-context';\nimport { CancelButton } from '../ui/cancel-button';\nimport { SubmitButton } from '../ui/submit-button';\n\n/**\n * Renders a slide-in side-panel dialog that wraps a TanStack form with built-in submit and cancel actions.\n *\n * @example\n * import { TanStackPopoverForm } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <TanStackPopoverForm\n *   title=\"Edit Profile\"\n *   open={isOpen}\n *   onOpenChange={setIsOpen}\n * >\n *   <EmailField />\n * </TanStackPopoverForm>\n */\nexport const TanStackPopoverForm: React.FC<\n  React.PropsWithChildren<{\n    /** Heading text displayed in the panel header. */\n    title: string;\n    /** Controlled open state of the popover dialog. */\n    open?: boolean;\n    /** Additional CSS class names applied to the scrollable content area. */\n    contentClassName?: string;\n    /** Callback fired when the open state changes. */\n    onOpenChange?: (open: boolean) => void;\n  }>\n> = ({ title, open, contentClassName, onOpenChange, children }) => {\n  const form = useTanStackFormContext();\n\n  return (\n    <DialogPrimitive.Root data-slot=\"dialog\" open={open} onOpenChange={onOpenChange}>\n      <DialogPrimitive.Portal data-slot=\"dialog-portal\">\n        <DialogPrimitive.Overlay\n          data-slot=\"dialog-overlay\"\n          className={cn(\n            'fixed inset-0 z-40 bg-black/40 backdrop-blur-sm',\n            'data-[state=open]:animate-in data-[state=open]:fade-in',\n            'data-[state=closed]:animate-out data-[state=closed]:fade-out'\n          )}\n        />\n        <DialogPrimitive.Content\n          data-slot=\"dialog-content\"\n          className={cn(\n            'fixed top-4 right-4 z-50 h-[calc(100dvh-2rem)] min-w-sm max-w-xl rounded-md bg-background shadow-lg ring-1 ring-border',\n            'duration-300',\n            'data-[state=open]:animate-in data-[state=open]:slide-in-from-right data-[state=open]:fade-in',\n            'data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right data-[state=closed]:fade-out'\n          )}\n        >\n          <section className=\"relative flex size-full flex-col\">\n            <header className=\"flex h-14 shrink-0 items-center border-b border-border px-5\">\n              <h2 className=\"font-semibold text-base tracking-tight text-text-positive\">{title}</h2>\n            </header>\n\n            <div className={cn('flex flex-1 flex-col overflow-y-auto py-4', contentClassName)}>{children}</div>\n\n            <div className=\"flex shrink-0 flex-col gap-2 border-t border-border px-4 py-3\">\n              <form.Subscribe\n                selector={state => ({\n                  isSubmitting: state.isSubmitting,\n                  disabled: state.isPristine || !state.isValid || state.isValidating || state.isSubmitting || !state.canSubmit,\n                })}\n                children={({ isSubmitting, disabled }) => (\n                  <SubmitButton isSubmitting={isSubmitting} disabled={disabled} className=\"w-full\" onClick={() => form.handleSubmit()} />\n                )}\n              />\n              <form.Subscribe\n                selector={state => ({ disabled: state.isPristine || state.isSubmitting })}\n                children={({ disabled }) => (\n                  <CancelButton\n                    disabled={disabled}\n                    className=\"w-full\"\n                    onClick={() => {\n                      form.reset();\n                      onOpenChange?.(false);\n                    }}\n                  />\n                )}\n              />\n            </div>\n\n            <DialogPrimitive.Close asChild>\n              <CloseButton className=\"absolute top-2.5 right-3\" />\n            </DialogPrimitive.Close>\n          </section>\n        </DialogPrimitive.Content>\n      </DialogPrimitive.Portal>\n    </DialogPrimitive.Root>\n  );\n};\n"],"mappings":"iOAyBA,MAAa,GAWR,CAAE,QAAO,OAAM,mBAAkB,eAAc,cAAe,CACjE,IAAM,EAAOA,EAAAA,EAAuB,EAEpC,OACE,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAgB,KAAjB,CAAsB,YAAU,SAAe,OAAoB,yBACjE,EAAA,EAAA,KAAA,CAACA,EAAAA,OAAgB,OAAjB,CAAwB,YAAU,yBAAlC,EACE,EAAA,EAAA,IAAA,CAACA,EAAAA,OAAgB,QAAjB,CACE,YAAU,iBACV,WAAA,EAAA,EAAA,GAAA,CACE,kDACA,yDACA,8DACF,CACD,CAAA,GACD,EAAA,EAAA,IAAA,CAACA,EAAAA,OAAgB,QAAjB,CACE,YAAU,iBACV,WAAA,EAAA,EAAA,GAAA,CACE,yHACA,eACA,+FACA,qGACF,YAEA,EAAA,EAAA,KAAA,CAAC,UAAD,CAAS,UAAU,4CAAnB,EACE,EAAA,EAAA,IAAA,CAAC,SAAD,CAAQ,UAAU,wEAChB,EAAA,EAAA,IAAA,CAAC,KAAD,CAAI,UAAU,qEAA6D,CAAU,CAAA,CAC/E,CAAA,GAER,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,WAAA,EAAA,EAAA,GAAA,CAAc,4CAA6C,CAAgB,EAAI,UAAc,CAAA,GAElG,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,yEAAf,EACE,EAAA,EAAA,IAAA,CAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAClB,aAAc,EAAM,aACpB,SAAU,EAAM,YAAc,CAAC,EAAM,SAAW,EAAM,cAAgB,EAAM,cAAgB,CAAC,EAAM,SACrG,GACA,UAAW,CAAE,eAAc,eACzB,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CAA4B,eAAwB,WAAU,UAAU,SAAS,YAAe,EAAK,aAAa,CAAI,CAAA,CAEzH,CAAA,GACD,EAAA,EAAA,IAAA,CAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAAE,SAAU,EAAM,YAAc,EAAM,YAAa,GACvE,UAAW,CAAE,eACX,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CACY,WACV,UAAU,SACV,YAAe,CACb,EAAK,MAAM,EACX,IAAe,EAAK,CACtB,CACD,CAAA,CAEJ,CAAA,CACE,KAEL,EAAA,EAAA,IAAA,CAACF,EAAAA,OAAgB,MAAjB,CAAuB,QAAA,aACrB,EAAA,EAAA,IAAA,CAACG,EAAAA,EAAD,CAAa,UAAU,0BAA4B,CAAA,CAC9B,CAAA,CAChB,GACc,CAAA,CACH,GACJ,CAAA,CAE1B"}

package/dist/radio-group-field-DjzD3i-f.cjs

@@ -0,0 +1,2 @@
+const e=require("./tanstack-form-DS_ZvRl8.cjs"),t=require("./ui/radio-group.cjs"),n=require("./field-BV5twmKA.cjs");let r=require("@customafk/react-toolkit/utils"),i=require("react/jsx-runtime"),a=require("@tanstack/react-form");const o=({label:o,description:s,orientation:c,options:l,tooltip:u,helperText:d})=>{let f=e.G(),p=(0,a.useStore)(f.form.store,({isSubmitting:e})=>e);return(0,i.jsxs)(n.FieldGroup,{className:`px-4`,children:[(0,i.jsxs)(n.Field,{orientation:c,className:`flex-col gap-2`,children:[(0,i.jsxs)(n.FieldContent,{children:[(0,i.jsxs)(n.FieldLabel,{children:[o,u&&(0,i.jsx)(n.FieldTooltip,{tooltip:u})]}),(0,i.jsx)(n.FieldDescription,{children:s}),(0,i.jsx)(n.FieldNote,{isShow:!!d,children:d})]}),(0,i.jsx)(n.FieldContentMain,{children:(0,i.jsx)(t.RadioGroup,{value:f.state.value??``,className:`w-full`,onValueChange:f.handleChange,children:l.map(e=>(0,i.jsx)(n.FieldLabel,{className:(0,r.cn)(`h-fit`,f.state.value===e.value&&`border-primary-weak! bg-primary-bg-subtle`,p&&`pointer-events-none bg-muted-muted opacity-60`,f.state.value===e.value&&p&&`border-border-strong!`),children:(0,i.jsxs)(n.Field,{orientation:`horizontal`,className:`items-start gap-3 rounded p-2!`,children:[(0,i.jsx)(t.RadioGroupItem,{value:e.value,className:`mt-0.5 shrink-0`}),(0,i.jsxs)(n.FieldContent,{className:`gap-0.5!`,children:[(0,i.jsx)(n.FieldTitle,{children:e.label}),(0,i.jsx)(n.FieldDescription,{className:`text-xs`,children:e.description})]})]})},e.value))})})]}),(0,i.jsx)(n.FieldSeparator,{})]})};exports.RadioGroupField=o;
+//# sourceMappingURL=radio-group-field-DjzD3i-f.cjs.map

package/dist/radio-group-field-DjzD3i-f.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group-field-DjzD3i-f.cjs","names":["useTanStackFieldContext","FieldGroup","Field","FieldContent","FieldLabel","FieldTooltip","FieldDescription","FieldNote","FieldContentMain","RadioGroup","RadioGroupItem","FieldTitle","FieldSeparator"],"sources":["../packages/components/features/tanstack-form/components/fields/radio-group-field.tsx"],"sourcesContent":["'use client';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport {\n  Field,\n  FieldContent,\n  FieldContentMain,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldNote,\n  FieldSeparator,\n  FieldTitle,\n  FieldTooltip,\n} from '../ui/field';\nimport { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';\n\nimport type { RadioGroupFieldProps as Props } from '../../types';\n\nexport const RadioGroupField: React.FC<Props> = ({ label, description, orientation, options, tooltip, helperText }) => {\n  const field = useTanStackFieldContext<string | null>();\n  const isSubmitting = useStore(field.form.store, ({ isSubmitting }) => isSubmitting);\n\n  return (\n    <FieldGroup className=\"px-4\">\n      <Field orientation={orientation} className=\"flex-col gap-2\">\n        <FieldContent>\n          <FieldLabel>\n            {label}\n            {tooltip && <FieldTooltip tooltip={tooltip} />}\n          </FieldLabel>\n          <FieldDescription>{description}</FieldDescription>\n          <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n        </FieldContent>\n\n        <FieldContentMain>\n          <RadioGroup value={field.state.value ?? ''} className=\"w-full\" onValueChange={field.handleChange}>\n            {options.map(option => (\n              <FieldLabel\n                key={option.value}\n                className={cn(\n                  'h-fit',\n                  field.state.value === option.value && 'border-primary-weak! bg-primary-bg-subtle',\n                  isSubmitting && 'pointer-events-none bg-muted-muted opacity-60',\n                  field.state.value === option.value && isSubmitting && 'border-border-strong!'\n                )}\n              >\n                <Field orientation=\"horizontal\" className=\"items-start gap-3 rounded p-2!\">\n                  <RadioGroupItem value={option.value} className=\"mt-0.5 shrink-0\" />\n                  <FieldContent className=\"gap-0.5!\">\n                    <FieldTitle>{option.label}</FieldTitle>\n                    <FieldDescription className=\"text-xs\">{option.description}</FieldDescription>\n                  </FieldContent>\n                </Field>\n              </FieldLabel>\n            ))}\n          </RadioGroup>\n        </FieldContentMain>\n      </Field>\n      <FieldSeparator />\n    </FieldGroup>\n  );\n};\n"],"mappings":"qOAuBA,MAAa,GAAoC,CAAE,QAAO,cAAa,cAAa,UAAS,UAAS,gBAAiB,CACrH,IAAM,EAAQA,EAAAA,EAAuC,EAC/C,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAM,KAAK,OAAQ,CAAE,kBAAmB,CAAY,EAElF,OACE,EAAA,EAAA,KAAA,CAACC,EAAAA,WAAD,CAAY,UAAU,gBAAtB,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAoB,cAAa,UAAU,0BAA3C,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,aAAD,CAAA,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,WAAD,CAAA,SAAA,CACG,EACA,IAAW,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CAAuB,SAAU,CAAA,CACnC,CAAA,CAAA,GACZ,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAAA,SAAmB,CAA8B,CAAA,GACjD,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,OAAQ,CAAC,CAAC,WAAa,CAAsB,CAAA,CAC5C,CAAA,CAAA,GAEd,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAAA,UACE,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,MAAO,EAAM,MAAM,OAAS,GAAI,UAAU,SAAS,cAAe,EAAM,sBACjF,EAAQ,IAAI,IACX,EAAA,EAAA,IAAA,CAACL,EAAAA,WAAD,CAEE,WAAA,EAAA,EAAA,GAAA,CACE,QACA,EAAM,MAAM,QAAU,EAAO,OAAS,4CACtC,GAAgB,gDAChB,EAAM,MAAM,QAAU,EAAO,OAAS,GAAgB,uBACxD,YAEA,EAAA,EAAA,KAAA,CAACF,EAAAA,MAAD,CAAO,YAAY,aAAa,UAAU,0CAA1C,EACE,EAAA,EAAA,IAAA,CAACQ,EAAAA,eAAD,CAAgB,MAAO,EAAO,MAAO,UAAU,iBAAmB,CAAA,GAClE,EAAA,EAAA,KAAA,CAACP,EAAAA,aAAD,CAAc,UAAU,oBAAxB,EACE,EAAA,EAAA,IAAA,CAACQ,EAAAA,WAAD,CAAA,SAAa,EAAO,KAAkB,CAAA,GACtC,EAAA,EAAA,IAAA,CAACL,EAAAA,iBAAD,CAAkB,UAAU,mBAAW,EAAO,WAA8B,CAAA,CAChE,GACT,GACG,EAfL,EAAO,KAeF,CACb,CACS,CAAA,CACI,CAAA,CACb,KACP,EAAA,EAAA,IAAA,CAACM,EAAAA,eAAD,CAAiB,CAAA,CACP,GAEhB"}

package/dist/radio-group-field-Ps8yHpnH.mjs

@@ -0,0 +1,2 @@
+import{G as e}from"./tanstack-form-CM_Hb3JT.mjs";import{RadioGroup as t,RadioGroupItem as n}from"./ui/radio-group.mjs";import{Field as r,FieldContent as i,FieldContentMain as a,FieldDescription as o,FieldGroup as s,FieldLabel as c,FieldNote as l,FieldSeparator as u,FieldTitle as d,FieldTooltip as f}from"./field-BKyUqvzh.mjs";import{cn as p}from"@customafk/react-toolkit/utils";import{jsx as m,jsxs as h}from"react/jsx-runtime";import{useStore as g}from"@tanstack/react-form";const _=({label:_,description:v,orientation:y,options:b,tooltip:x,helperText:S})=>{let C=e(),w=g(C.form.store,({isSubmitting:e})=>e);return h(s,{className:`px-4`,children:[h(r,{orientation:y,className:`flex-col gap-2`,children:[h(i,{children:[h(c,{children:[_,x&&m(f,{tooltip:x})]}),m(o,{children:v}),m(l,{isShow:!!S,children:S})]}),m(a,{children:m(t,{value:C.state.value??``,className:`w-full`,onValueChange:C.handleChange,children:b.map(e=>m(c,{className:p(`h-fit`,C.state.value===e.value&&`border-primary-weak! bg-primary-bg-subtle`,w&&`pointer-events-none bg-muted-muted opacity-60`,C.state.value===e.value&&w&&`border-border-strong!`),children:h(r,{orientation:`horizontal`,className:`items-start gap-3 rounded p-2!`,children:[m(n,{value:e.value,className:`mt-0.5 shrink-0`}),h(i,{className:`gap-0.5!`,children:[m(d,{children:e.label}),m(o,{className:`text-xs`,children:e.description})]})]})},e.value))})})]}),m(u,{})]})};export{_ as RadioGroupField};
+//# sourceMappingURL=radio-group-field-Ps8yHpnH.mjs.map

package/dist/radio-group-field-Ps8yHpnH.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group-field-Ps8yHpnH.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/fields/radio-group-field.tsx"],"sourcesContent":["'use client';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport {\n  Field,\n  FieldContent,\n  FieldContentMain,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldNote,\n  FieldSeparator,\n  FieldTitle,\n  FieldTooltip,\n} from '../ui/field';\nimport { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';\n\nimport type { RadioGroupFieldProps as Props } from '../../types';\n\nexport const RadioGroupField: React.FC<Props> = ({ label, description, orientation, options, tooltip, helperText }) => {\n  const field = useTanStackFieldContext<string | null>();\n  const isSubmitting = useStore(field.form.store, ({ isSubmitting }) => isSubmitting);\n\n  return (\n    <FieldGroup className=\"px-4\">\n      <Field orientation={orientation} className=\"flex-col gap-2\">\n        <FieldContent>\n          <FieldLabel>\n            {label}\n            {tooltip && <FieldTooltip tooltip={tooltip} />}\n          </FieldLabel>\n          <FieldDescription>{description}</FieldDescription>\n          <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n        </FieldContent>\n\n        <FieldContentMain>\n          <RadioGroup value={field.state.value ?? ''} className=\"w-full\" onValueChange={field.handleChange}>\n            {options.map(option => (\n              <FieldLabel\n                key={option.value}\n                className={cn(\n                  'h-fit',\n                  field.state.value === option.value && 'border-primary-weak! bg-primary-bg-subtle',\n                  isSubmitting && 'pointer-events-none bg-muted-muted opacity-60',\n                  field.state.value === option.value && isSubmitting && 'border-border-strong!'\n                )}\n              >\n                <Field orientation=\"horizontal\" className=\"items-start gap-3 rounded p-2!\">\n                  <RadioGroupItem value={option.value} className=\"mt-0.5 shrink-0\" />\n                  <FieldContent className=\"gap-0.5!\">\n                    <FieldTitle>{option.label}</FieldTitle>\n                    <FieldDescription className=\"text-xs\">{option.description}</FieldDescription>\n                  </FieldContent>\n                </Field>\n              </FieldLabel>\n            ))}\n          </RadioGroup>\n        </FieldContentMain>\n      </Field>\n      <FieldSeparator />\n    </FieldGroup>\n  );\n};\n"],"mappings":"6dAuBA,MAAa,GAAoC,CAAE,QAAO,cAAa,cAAa,UAAS,UAAS,gBAAiB,CACrH,IAAM,EAAQ,EAAuC,EAC/C,EAAe,EAAS,EAAM,KAAK,OAAQ,CAAE,kBAAmB,CAAY,EAElF,OACE,EAAC,EAAD,CAAY,UAAU,gBAAtB,CACE,EAAC,EAAD,CAAoB,cAAa,UAAU,0BAA3C,CACE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAA,SAAA,CACG,EACA,GAAW,EAAC,EAAD,CAAuB,SAAU,CAAA,CACnC,CAAA,CAAA,EACZ,EAAC,EAAD,CAAA,SAAmB,CAA8B,CAAA,EACjD,EAAC,EAAD,CAAW,OAAQ,CAAC,CAAC,WAAa,CAAsB,CAAA,CAC5C,CAAA,CAAA,EAEd,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAY,MAAO,EAAM,MAAM,OAAS,GAAI,UAAU,SAAS,cAAe,EAAM,sBACjF,EAAQ,IAAI,GACX,EAAC,EAAD,CAEE,UAAW,EACT,QACA,EAAM,MAAM,QAAU,EAAO,OAAS,4CACtC,GAAgB,gDAChB,EAAM,MAAM,QAAU,EAAO,OAAS,GAAgB,uBACxD,WAEA,EAAC,EAAD,CAAO,YAAY,aAAa,UAAU,0CAA1C,CACE,EAAC,EAAD,CAAgB,MAAO,EAAO,MAAO,UAAU,iBAAmB,CAAA,EAClE,EAAC,EAAD,CAAc,UAAU,oBAAxB,CACE,EAAC,EAAD,CAAA,SAAa,EAAO,KAAkB,CAAA,EACtC,EAAC,EAAD,CAAkB,UAAU,mBAAW,EAAO,WAA8B,CAAA,CAChE,GACT,GACG,EAfL,EAAO,KAeF,CACb,CACS,CAAA,CACI,CAAA,CACb,IACP,EAAC,EAAD,CAAiB,CAAA,CACP,GAEhB"}

package/dist/section-form-B9iTs2we.cjs

@@ -0,0 +1,2 @@
+const e=require("./separator-sBz__BXC.cjs");let t=require("react/jsx-runtime");const n=({children:e})=>(0,t.jsx)(`header`,{"data-slot":`section-header`,className:`flex items-center px-4 py-3 font-semibold text-base text-text-positive tracking-tight`,children:e}),r=({children:e})=>(0,t.jsx)(`main`,{"data-slot":`section-main`,className:`relative flex flex-col py-4`,children:e}),i=({title:i,children:a})=>(0,t.jsxs)(`section`,{"data-slot":`section-form`,className:`flex flex-col rounded-md bg-background shadow-card ring-1 ring-border`,children:[(0,t.jsx)(n,{children:i}),(0,t.jsx)(e.t,{}),(0,t.jsx)(r,{children:a})]});exports.TanStackSectionForm=i;
+//# sourceMappingURL=section-form-B9iTs2we.cjs.map

package/dist/section-form-B9iTs2we.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"section-form-B9iTs2we.cjs","names":["Separator"],"sources":["../packages/components/features/tanstack-form/components/forms/section-form.tsx"],"sourcesContent":["'use client';\n\nimport { Separator } from '../ui/separator';\n\n/**\n * Internal header sub-component for `TanStackSectionForm` that renders a styled section title.\n */\nconst SectionHeader: React.FC<React.PropsWithChildren> = ({ children }) => {\n  return (\n    <header data-slot=\"section-header\" className=\"flex items-center px-4 py-3 font-semibold text-base text-text-positive tracking-tight\">\n      {children}\n    </header>\n  );\n};\n\n/**\n * Internal body sub-component for `TanStackSectionForm` that wraps field content with vertical padding.\n */\nconst SectionMain: React.FC<React.PropsWithChildren> = ({ children }) => {\n  return (\n    <main data-slot=\"section-main\" className=\"relative flex flex-col py-4\">\n      {children}\n    </main>\n  );\n};\n\n/**\n * Renders a card-like form section with a titled header, separator, and a content area for form fields.\n *\n * @example\n * import { TanStackSectionForm } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <TanStackSectionForm title=\"Account Settings\">\n *   <EmailField />\n *   <PasswordField />\n * </TanStackSectionForm>\n */\nexport const TanStackSectionForm: React.FC<\n  React.PropsWithChildren<{\n    /** Heading text displayed in the section header bar. */\n    title: string;\n  }>\n> = ({ title, children }) => {\n  return (\n    <section data-slot=\"section-form\" className=\"flex flex-col rounded-md bg-background shadow-card ring-1 ring-border\">\n      <SectionHeader>{title}</SectionHeader>\n      <Separator />\n      <SectionMain>{children}</SectionMain>\n    </section>\n  );\n};\n"],"mappings":"+EAOA,MAAM,GAAoD,CAAE,eAExD,EAAA,EAAA,IAAA,CAAC,SAAD,CAAQ,YAAU,iBAAiB,UAAU,wFAC1C,UACK,CAAA,EAON,GAAkD,CAAE,eAEtD,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,YAAU,eAAe,UAAU,8BACtC,UACG,CAAA,EAeG,GAKR,CAAE,QAAO,eAEV,EAAA,EAAA,KAAA,CAAC,UAAD,CAAS,YAAU,eAAe,UAAU,iFAA5C,EACE,EAAA,EAAA,IAAA,CAAC,EAAD,CAAA,SAAgB,CAAqB,CAAA,GACrC,EAAA,EAAA,IAAA,CAACA,EAAAA,EAAD,CAAY,CAAA,GACZ,EAAA,EAAA,IAAA,CAAC,EAAD,CAAc,UAAsB,CAAA,CAC7B"}

package/dist/section-form-B_AZr7jZ.mjs

@@ -0,0 +1,2 @@
+import{t as e}from"./separator-BlNAFSJv.mjs";import{jsx as t,jsxs as n}from"react/jsx-runtime";const r=({children:e})=>t(`header`,{"data-slot":`section-header`,className:`flex items-center px-4 py-3 font-semibold text-base text-text-positive tracking-tight`,children:e}),i=({children:e})=>t(`main`,{"data-slot":`section-main`,className:`relative flex flex-col py-4`,children:e}),a=({title:a,children:o})=>n(`section`,{"data-slot":`section-form`,className:`flex flex-col rounded-md bg-background shadow-card ring-1 ring-border`,children:[t(r,{children:a}),t(e,{}),t(i,{children:o})]});export{a as TanStackSectionForm};
+//# sourceMappingURL=section-form-B_AZr7jZ.mjs.map

package/dist/section-form-B_AZr7jZ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"section-form-B_AZr7jZ.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/forms/section-form.tsx"],"sourcesContent":["'use client';\n\nimport { Separator } from '../ui/separator';\n\n/**\n * Internal header sub-component for `TanStackSectionForm` that renders a styled section title.\n */\nconst SectionHeader: React.FC<React.PropsWithChildren> = ({ children }) => {\n  return (\n    <header data-slot=\"section-header\" className=\"flex items-center px-4 py-3 font-semibold text-base text-text-positive tracking-tight\">\n      {children}\n    </header>\n  );\n};\n\n/**\n * Internal body sub-component for `TanStackSectionForm` that wraps field content with vertical padding.\n */\nconst SectionMain: React.FC<React.PropsWithChildren> = ({ children }) => {\n  return (\n    <main data-slot=\"section-main\" className=\"relative flex flex-col py-4\">\n      {children}\n    </main>\n  );\n};\n\n/**\n * Renders a card-like form section with a titled header, separator, and a content area for form fields.\n *\n * @example\n * import { TanStackSectionForm } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <TanStackSectionForm title=\"Account Settings\">\n *   <EmailField />\n *   <PasswordField />\n * </TanStackSectionForm>\n */\nexport const TanStackSectionForm: React.FC<\n  React.PropsWithChildren<{\n    /** Heading text displayed in the section header bar. */\n    title: string;\n  }>\n> = ({ title, children }) => {\n  return (\n    <section data-slot=\"section-form\" className=\"flex flex-col rounded-md bg-background shadow-card ring-1 ring-border\">\n      <SectionHeader>{title}</SectionHeader>\n      <Separator />\n      <SectionMain>{children}</SectionMain>\n    </section>\n  );\n};\n"],"mappings":"+FAOA,MAAM,GAAoD,CAAE,cAExD,EAAC,SAAD,CAAQ,YAAU,iBAAiB,UAAU,wFAC1C,UACK,CAAA,EAON,GAAkD,CAAE,cAEtD,EAAC,OAAD,CAAM,YAAU,eAAe,UAAU,8BACtC,UACG,CAAA,EAeG,GAKR,CAAE,QAAO,cAEV,EAAC,UAAD,CAAS,YAAU,eAAe,UAAU,iFAA5C,CACE,EAAC,EAAD,CAAA,SAAgB,CAAqB,CAAA,EACrC,EAAC,EAAD,CAAY,CAAA,EACZ,EAAC,EAAD,CAAc,UAAsB,CAAA,CAC7B"}

package/dist/select-field-B4eU65OI.cjs

@@ -0,0 +1,2 @@
+const e=require("./ui/dialog.cjs"),t=require("./ui/select.cjs"),n=require("./tanstack-form-DS_ZvRl8.cjs"),r=require("./field-BV5twmKA.cjs");let i=require("lucide-react"),a=require("react"),o=require("@customafk/react-toolkit/utils"),s=require("react/jsx-runtime"),c=require("radix-ui"),l=require("@customafk/react-toolkit/hooks/useMobile"),u=require("@tanstack/react-form");const d=(0,a.memo)(({label:d,description:f,placeholder:p,orientation:m=`responsive`,tooltip:h,options:g,helperText:_,clearable:v=!1,required:y=!1,disabled:b=!1,showErrorMessage:x=!0})=>{let S=(0,a.useId)(),C=n.G(),w=(0,l.useIsMobile)(),[T,E]=(0,a.useState)(!1),D=(0,u.useStore)(C.form.store,({isSubmitting:e})=>e),O=b||D,k=C.state.meta.isDirty||C.state.meta.isTouched,A=k&&!C.state.meta.isValid,j=y&&C.state.value===null,M=v&&!!C.state.value&&!O,N=g.find(e=>e.value===C.state.value)?.label,P=()=>{C.handleChange(null),C.handleBlur()};return(0,s.jsxs)(r.FieldGroup,{className:`gap-y-4 px-4`,children:[(0,s.jsxs)(r.Field,{orientation:m,"data-invalid":A,children:[(0,s.jsxs)(r.FieldContent,{children:[(0,s.jsxs)(r.FieldLabel,{htmlFor:C.name,"aria-required":j,children:[d,h&&(0,s.jsx)(r.FieldTooltip,{tooltip:h})]}),(0,s.jsx)(r.FieldDescription,{children:f})]}),(0,s.jsxs)(r.FieldContentMain,{className:`flex flex-col`,children:[w?(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(`button`,{id:C.name,type:`button`,disabled:O,"aria-invalid":A?`true`:void 0,"aria-describedby":S,onBlur:C.handleBlur,onClick:()=>E(!0),className:(0,o.cn)(`flex w-full items-center justify-between`,`outline-1 outline-border -outline-offset-1`,`gap-2 rounded bg-transparent px-3 py-2`,`shadow-input transition-all cursor-pointer whitespace-nowrap text-sm`,`focus-visible:outline-primary-strong focus-visible:ring-4 focus-visible:ring-primary-weak`,`disabled:cursor-not-allowed disabled:opacity-50`,A&&`outline-danger bg-danger-bg-subtle ring-danger-weak`,!C.state.value&&`text-text-positive-muted`),children:[(0,s.jsx)(`span`,{className:`line-clamp-1`,children:N??p}),(0,s.jsx)(i.ChevronDownIcon,{size:16,className:`shrink-0 opacity-50`})]}),(0,s.jsx)(e.Dialog,{open:T,onOpenChange:e=>{E(e),e||C.handleBlur()},children:(0,s.jsxs)(e.DialogPortal,{children:[(0,s.jsx)(e.DialogOverlay,{}),(0,s.jsxs)(c.Dialog.Content,{onOpenAutoFocus:e=>e.preventDefault(),className:(0,o.cn)(`fixed inset-x-0 bottom-0 z-50`,`flex flex-col bg-background rounded-t-2xl outline-none`,`max-h-[80dvh] shadow-[0_-4px_24px_rgba(0,0,0,0.08)]`,`data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom data-[state=open]:fade-in-0`,`data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom data-[state=closed]:fade-out-0`,`duration-300`),children:[(0,s.jsxs)(`div`,{className:`flex items-center justify-between px-4 py-3 border-b border-border shrink-0`,children:[(0,s.jsx)(`span`,{className:`font-semibold text-sm text-text-positive`,children:d??p??`Chọn một tùy chọn`}),(0,s.jsx)(e.DialogClose,{asChild:!0,children:(0,s.jsx)(`button`,{type:`button`,"aria-label":`Đóng`,className:`flex size-7 items-center justify-center rounded-md text-text-positive-weak transition-colors hover:bg-muted-muted hover:text-text-positive`,children:(0,s.jsx)(i.XIcon,{size:16})})})]}),(0,s.jsxs)(`div`,{className:`flex flex-col overflow-y-auto`,children:[M&&(0,s.jsx)(e.DialogClose,{asChild:!0,children:(0,s.jsxs)(`button`,{type:`button`,className:`flex w-full items-center gap-x-2 px-4 py-3 text-left text-sm text-danger-strong transition-colors hover:bg-danger-bg-subtle`,onClick:P,children:[(0,s.jsx)(i.XIcon,{size:14}),`Xóa lựa chọn`]})}),g.length>0?g.map(t=>(0,s.jsx)(e.DialogClose,{asChild:!0,children:(0,s.jsx)(`button`,{type:`button`,className:(0,o.cn)(`flex w-full items-center px-4 py-3 text-left text-sm transition-colors`,`hover:bg-muted-muted active:bg-muted-muted`,C.state.value===t.value&&`bg-primary-bg-subtle font-medium text-primary`),onClick:()=>{C.handleChange(t.value),C.handleBlur()},children:t.label})},t.value)):(0,s.jsxs)(`div`,{className:`flex items-center justify-center gap-x-2 px-4 py-8 text-center text-sm text-text-positive-weak`,children:[(0,s.jsx)(i.PackagePlusIcon,{strokeWidth:1}),`Không có tùy chọn`]})]}),(0,s.jsx)(`div`,{className:`shrink-0 h-safe-bottom`})]})]})})]}):(0,s.jsxs)(`div`,{className:`relative`,children:[(0,s.jsxs)(t.Select,{value:C.state.value??``,disabled:O,onValueChange:C.handleChange,children:[(0,s.jsx)(t.SelectTrigger,{"aria-invalid":A?`true`:void 0,"aria-describedby":S,onBlur:C.handleBlur,children:(0,s.jsx)(t.SelectValue,{placeholder:p})}),(0,s.jsx)(t.SelectContent,{children:g.length>0?g.map(e=>(0,s.jsx)(t.SelectItem,{value:e.value,children:e.label},e.value)):(0,s.jsxs)(`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:[(0,s.jsx)(i.PackagePlusIcon,{strokeWidth:1}),`No options available`]})})]}),M&&(0,s.jsx)(`button`,{type:`button`,"aria-label":`Xóa lựa chọn`,className:`absolute right-7 top-1/2 -translate-y-1/2 flex size-4 cursor-pointer items-center justify-center rounded-md text-text-positive-weak outline-none transition-[color,transform] hover:text-text-positive focus-visible:text-primary-strong focus-visible:[&>svg]:scale-125 [&>svg]:size-3.5 [&>svg]:transition-transform`,onClick:P,children:(0,s.jsx)(i.XIcon,{"aria-hidden":`true`})})]}),k&&x&&(0,s.jsx)(r.FieldError,{id:S,className:`mt-1`,errors:C.state.meta.errors}),(0,s.jsx)(r.FieldNote,{isShow:!!_,children:_})]})]}),(0,s.jsx)(r.FieldSeparator,{})]})});d.displayName=`SelectField`,exports.SelectField=d;
+//# sourceMappingURL=select-field-B4eU65OI.cjs.map

package/dist/select-field-B4eU65OI.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-field-B4eU65OI.cjs","names":["useTanStackFieldContext","FieldGroup","Field","FieldContent","FieldLabel","FieldTooltip","FieldDescription","FieldContentMain","ChevronDownIcon","Dialog","DialogPortal","DialogOverlay","RadixDialog","DialogClose","XIcon","PackagePlusIcon","Select","SelectTrigger","SelectValue","SelectContent","SelectItem","FieldError","FieldNote","FieldSeparator"],"sources":["../packages/components/features/tanstack-form/components/fields/select-field.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useId, useState } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { ChevronDownIcon, PackagePlusIcon, XIcon } from 'lucide-react';\n\nimport { useIsMobile } from '@customafk/react-toolkit/hooks/useMobile';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Dialog as RadixDialog } from 'radix-ui';\n\nimport { Dialog, DialogClose, DialogOverlay, DialogPortal } from '@/components/ui/dialog';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport {\n  Field,\n  FieldContent,\n  FieldContentMain,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n  FieldNote,\n  FieldSeparator,\n  FieldTooltip,\n} from '../ui/field';\n\nimport type { SelectFieldProps as Props } from '../../types';\n\nexport const SelectField = memo<Props>(\n  ({\n    label,\n    description,\n    placeholder,\n    orientation = 'responsive',\n    tooltip,\n    options,\n    helperText,\n    clearable = false,\n    required = false,\n    disabled = false,\n    showErrorMessage = true,\n  }) => {\n    const errorId = useId();\n    const field = useTanStackFieldContext<string | null>();\n    const isMobile = useIsMobile();\n    const [dialogOpen, setDialogOpen] = useState(false);\n\n    const isSubmitting = useStore(field.form.store, ({ isSubmitting }) => isSubmitting);\n    const isDisabled = disabled || isSubmitting;\n\n    const _touched = field.state.meta.isDirty || field.state.meta.isTouched;\n    const _invalid = _touched && !field.state.meta.isValid;\n    const _isEmpty = required && field.state.value === null;\n    const _showClear = clearable && !!field.state.value && !isDisabled;\n\n    const selectedLabel = options.find(o => o.value === field.state.value)?.label;\n\n    const onClear = () => {\n      field.handleChange(null);\n      field.handleBlur();\n    };\n\n    return (\n      <FieldGroup className=\"gap-y-4 px-4\">\n        <Field orientation={orientation} data-invalid={_invalid}>\n          <FieldContent>\n            <FieldLabel htmlFor={field.name} aria-required={_isEmpty}>\n              {label}\n              {tooltip && <FieldTooltip tooltip={tooltip} />}\n            </FieldLabel>\n            <FieldDescription>{description}</FieldDescription>\n          </FieldContent>\n\n          <FieldContentMain className=\"flex flex-col\">\n            {isMobile ? (\n              <>\n                <button\n                  id={field.name}\n                  type=\"button\"\n                  disabled={isDisabled}\n                  aria-invalid={_invalid ? 'true' : undefined}\n                  aria-describedby={errorId}\n                  onBlur={field.handleBlur}\n                  onClick={() => setDialogOpen(true)}\n                  className={cn(\n                    'flex w-full items-center justify-between',\n                    'outline-1 outline-border -outline-offset-1',\n                    'gap-2 rounded bg-transparent px-3 py-2',\n                    'shadow-input transition-all cursor-pointer whitespace-nowrap text-sm',\n                    'focus-visible:outline-primary-strong focus-visible:ring-4 focus-visible:ring-primary-weak',\n                    'disabled:cursor-not-allowed disabled:opacity-50',\n                    _invalid && 'outline-danger bg-danger-bg-subtle ring-danger-weak',\n                    !field.state.value && 'text-text-positive-muted'\n                  )}\n                >\n                  <span className=\"line-clamp-1\">{selectedLabel ?? placeholder}</span>\n                  <ChevronDownIcon size={16} className=\"shrink-0 opacity-50\" />\n                </button>\n\n                <Dialog\n                  open={dialogOpen}\n                  onOpenChange={open => {\n                    setDialogOpen(open);\n                    if (!open) field.handleBlur();\n                  }}\n                >\n                  <DialogPortal>\n                    <DialogOverlay />\n                    <RadixDialog.Content\n                      onOpenAutoFocus={e => e.preventDefault()}\n                      className={cn(\n                        'fixed inset-x-0 bottom-0 z-50',\n                        'flex flex-col bg-background rounded-t-2xl outline-none',\n                        'max-h-[80dvh] shadow-[0_-4px_24px_rgba(0,0,0,0.08)]',\n                        'data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom data-[state=open]:fade-in-0',\n                        'data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom data-[state=closed]:fade-out-0',\n                        'duration-300'\n                      )}\n                    >\n                      <div className=\"flex items-center justify-between px-4 py-3 border-b border-border shrink-0\">\n                        <span className=\"font-semibold text-sm text-text-positive\">{label ?? placeholder ?? 'Chọn một tùy chọn'}</span>\n                        <DialogClose asChild>\n                          <button\n                            type=\"button\"\n                            aria-label=\"Đóng\"\n                            className=\"flex size-7 items-center justify-center rounded-md text-text-positive-weak transition-colors hover:bg-muted-muted hover:text-text-positive\"\n                          >\n                            <XIcon size={16} />\n                          </button>\n                        </DialogClose>\n                      </div>\n\n                      <div className=\"flex flex-col overflow-y-auto\">\n                        {_showClear && (\n                          <DialogClose asChild>\n                            <button\n                              type=\"button\"\n                              className=\"flex w-full items-center gap-x-2 px-4 py-3 text-left text-sm text-danger-strong transition-colors hover:bg-danger-bg-subtle\"\n                              onClick={onClear}\n                            >\n                              <XIcon size={14} />\n                              Xóa lựa chọn\n                            </button>\n                          </DialogClose>\n                        )}\n                        {options.length > 0 ? (\n                          options.map(option => (\n                            <DialogClose key={option.value} asChild>\n                              <button\n                                type=\"button\"\n                                className={cn(\n                                  'flex w-full items-center px-4 py-3 text-left text-sm transition-colors',\n                                  'hover:bg-muted-muted active:bg-muted-muted',\n                                  field.state.value === option.value && 'bg-primary-bg-subtle font-medium text-primary'\n                                )}\n                                onClick={() => {\n                                  field.handleChange(option.value);\n                                  field.handleBlur();\n                                }}\n                              >\n                                {option.label}\n                              </button>\n                            </DialogClose>\n                          ))\n                        ) : (\n                          <div className=\"flex items-center justify-center gap-x-2 px-4 py-8 text-center text-sm text-text-positive-weak\">\n                            <PackagePlusIcon strokeWidth={1} />\n                            Không có tùy chọn\n                          </div>\n                        )}\n                      </div>\n\n                      <div className=\"shrink-0 h-safe-bottom\" />\n                    </RadixDialog.Content>\n                  </DialogPortal>\n                </Dialog>\n              </>\n            ) : (\n              <div className=\"relative\">\n                <Select value={field.state.value ?? ''} disabled={isDisabled} onValueChange={field.handleChange}>\n                  <SelectTrigger aria-invalid={_invalid ? 'true' : undefined} aria-describedby={errorId} onBlur={field.handleBlur}>\n                    <SelectValue placeholder={placeholder} />\n                  </SelectTrigger>\n                  <SelectContent>\n                    {options.length > 0 ? (\n                      options.map(option => (\n                        <SelectItem key={option.value} value={option.value}>\n                          {option.label}\n                        </SelectItem>\n                      ))\n                    ) : (\n                      <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\">\n                        <PackagePlusIcon strokeWidth={1} />\n                        No options available\n                      </div>\n                    )}\n                  </SelectContent>\n                </Select>\n\n                {_showClear && (\n                  <button\n                    type=\"button\"\n                    aria-label=\"Xóa lựa chọn\"\n                    className=\"absolute right-7 top-1/2 -translate-y-1/2 flex size-4 cursor-pointer items-center justify-center rounded-md text-text-positive-weak outline-none transition-[color,transform] hover:text-text-positive focus-visible:text-primary-strong focus-visible:[&>svg]:scale-125 [&>svg]:size-3.5 [&>svg]:transition-transform\"\n                    onClick={onClear}\n                  >\n                    <XIcon aria-hidden=\"true\" />\n                  </button>\n                )}\n              </div>\n            )}\n\n            {_touched && showErrorMessage && <FieldError id={errorId} className=\"mt-1\" errors={field.state.meta.errors} />}\n\n            <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n          </FieldContentMain>\n        </Field>\n        <FieldSeparator />\n      </FieldGroup>\n    );\n  }\n);\n\nSelectField.displayName = 'SelectField';\n"],"mappings":"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"}

package/dist/select-field-D6Dw-Jwg.mjs

@@ -0,0 +1,2 @@
+import{Dialog as e,DialogClose as t,DialogOverlay as n,DialogPortal as r}from"./ui/dialog.mjs";import{Select as i,SelectContent as a,SelectItem as o,SelectTrigger as ee,SelectValue as s}from"./ui/select.mjs";import{G as c}from"./tanstack-form-CM_Hb3JT.mjs";import{Field as l,FieldContent as u,FieldContentMain as d,FieldDescription as f,FieldError as te,FieldGroup as p,FieldLabel as m,FieldNote as h,FieldSeparator as g,FieldTooltip as _}from"./field-BKyUqvzh.mjs";import{ChevronDownIcon as v,PackagePlusIcon as y,XIcon as b}from"lucide-react";import{memo as x,useId as S,useState as C}from"react";import{cn as w}from"@customafk/react-toolkit/utils";import{Fragment as T,jsx as E,jsxs as D}from"react/jsx-runtime";import{Dialog as O}from"radix-ui";import{useIsMobile as k}from"@customafk/react-toolkit/hooks/useMobile";import{useStore as A}from"@tanstack/react-form";const j=x(({label:x,description:j,placeholder:M,orientation:N=`responsive`,tooltip:P,options:F,helperText:I,clearable:L=!1,required:R=!1,disabled:z=!1,showErrorMessage:B=!0})=>{let V=S(),H=c(),U=k(),[W,G]=C(!1),K=A(H.form.store,({isSubmitting:e})=>e),q=z||K,J=H.state.meta.isDirty||H.state.meta.isTouched,Y=J&&!H.state.meta.isValid,X=R&&H.state.value===null,Z=L&&!!H.state.value&&!q,Q=F.find(e=>e.value===H.state.value)?.label,$=()=>{H.handleChange(null),H.handleBlur()};return D(p,{className:`gap-y-4 px-4`,children:[D(l,{orientation:N,"data-invalid":Y,children:[D(u,{children:[D(m,{htmlFor:H.name,"aria-required":X,children:[x,P&&E(_,{tooltip:P})]}),E(f,{children:j})]}),D(d,{className:`flex flex-col`,children:[U?D(T,{children:[D(`button`,{id:H.name,type:`button`,disabled:q,"aria-invalid":Y?`true`:void 0,"aria-describedby":V,onBlur:H.handleBlur,onClick:()=>G(!0),className:w(`flex w-full items-center justify-between`,`outline-1 outline-border -outline-offset-1`,`gap-2 rounded bg-transparent px-3 py-2`,`shadow-input transition-all cursor-pointer whitespace-nowrap text-sm`,`focus-visible:outline-primary-strong focus-visible:ring-4 focus-visible:ring-primary-weak`,`disabled:cursor-not-allowed disabled:opacity-50`,Y&&`outline-danger bg-danger-bg-subtle ring-danger-weak`,!H.state.value&&`text-text-positive-muted`),children:[E(`span`,{className:`line-clamp-1`,children:Q??M}),E(v,{size:16,className:`shrink-0 opacity-50`})]}),E(e,{open:W,onOpenChange:e=>{G(e),e||H.handleBlur()},children:D(r,{children:[E(n,{}),D(O.Content,{onOpenAutoFocus:e=>e.preventDefault(),className:w(`fixed inset-x-0 bottom-0 z-50`,`flex flex-col bg-background rounded-t-2xl outline-none`,`max-h-[80dvh] shadow-[0_-4px_24px_rgba(0,0,0,0.08)]`,`data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom data-[state=open]:fade-in-0`,`data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom data-[state=closed]:fade-out-0`,`duration-300`),children:[D(`div`,{className:`flex items-center justify-between px-4 py-3 border-b border-border shrink-0`,children:[E(`span`,{className:`font-semibold text-sm text-text-positive`,children:x??M??`Chọn một tùy chọn`}),E(t,{asChild:!0,children:E(`button`,{type:`button`,"aria-label":`Đóng`,className:`flex size-7 items-center justify-center rounded-md text-text-positive-weak transition-colors hover:bg-muted-muted hover:text-text-positive`,children:E(b,{size:16})})})]}),D(`div`,{className:`flex flex-col overflow-y-auto`,children:[Z&&E(t,{asChild:!0,children:D(`button`,{type:`button`,className:`flex w-full items-center gap-x-2 px-4 py-3 text-left text-sm text-danger-strong transition-colors hover:bg-danger-bg-subtle`,onClick:$,children:[E(b,{size:14}),`Xóa lựa chọn`]})}),F.length>0?F.map(e=>E(t,{asChild:!0,children:E(`button`,{type:`button`,className:w(`flex w-full items-center px-4 py-3 text-left text-sm transition-colors`,`hover:bg-muted-muted active:bg-muted-muted`,H.state.value===e.value&&`bg-primary-bg-subtle font-medium text-primary`),onClick:()=>{H.handleChange(e.value),H.handleBlur()},children:e.label})},e.value)):D(`div`,{className:`flex items-center justify-center gap-x-2 px-4 py-8 text-center text-sm text-text-positive-weak`,children:[E(y,{strokeWidth:1}),`Không có tùy chọn`]})]}),E(`div`,{className:`shrink-0 h-safe-bottom`})]})]})})]}):D(`div`,{className:`relative`,children:[D(i,{value:H.state.value??``,disabled:q,onValueChange:H.handleChange,children:[E(ee,{"aria-invalid":Y?`true`:void 0,"aria-describedby":V,onBlur:H.handleBlur,children:E(s,{placeholder:M})}),E(a,{children:F.length>0?F.map(e=>E(o,{value:e.value,children:e.label},e.value)):D(`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:[E(y,{strokeWidth:1}),`No options available`]})})]}),Z&&E(`button`,{type:`button`,"aria-label":`Xóa lựa chọn`,className:`absolute right-7 top-1/2 -translate-y-1/2 flex size-4 cursor-pointer items-center justify-center rounded-md text-text-positive-weak outline-none transition-[color,transform] hover:text-text-positive focus-visible:text-primary-strong focus-visible:[&>svg]:scale-125 [&>svg]:size-3.5 [&>svg]:transition-transform`,onClick:$,children:E(b,{"aria-hidden":`true`})})]}),J&&B&&E(te,{id:V,className:`mt-1`,errors:H.state.meta.errors}),E(h,{isShow:!!I,children:I})]})]}),E(g,{})]})});j.displayName=`SelectField`;export{j as SelectField};
+//# sourceMappingURL=select-field-D6Dw-Jwg.mjs.map

package/dist/select-field-D6Dw-Jwg.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-field-D6Dw-Jwg.mjs","names":["Dialog","RadixDialog","Select"],"sources":["../packages/components/features/tanstack-form/components/fields/select-field.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useId, useState } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { ChevronDownIcon, PackagePlusIcon, XIcon } from 'lucide-react';\n\nimport { useIsMobile } from '@customafk/react-toolkit/hooks/useMobile';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Dialog as RadixDialog } from 'radix-ui';\n\nimport { Dialog, DialogClose, DialogOverlay, DialogPortal } from '@/components/ui/dialog';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport {\n  Field,\n  FieldContent,\n  FieldContentMain,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n  FieldNote,\n  FieldSeparator,\n  FieldTooltip,\n} from '../ui/field';\n\nimport type { SelectFieldProps as Props } from '../../types';\n\nexport const SelectField = memo<Props>(\n  ({\n    label,\n    description,\n    placeholder,\n    orientation = 'responsive',\n    tooltip,\n    options,\n    helperText,\n    clearable = false,\n    required = false,\n    disabled = false,\n    showErrorMessage = true,\n  }) => {\n    const errorId = useId();\n    const field = useTanStackFieldContext<string | null>();\n    const isMobile = useIsMobile();\n    const [dialogOpen, setDialogOpen] = useState(false);\n\n    const isSubmitting = useStore(field.form.store, ({ isSubmitting }) => isSubmitting);\n    const isDisabled = disabled || isSubmitting;\n\n    const _touched = field.state.meta.isDirty || field.state.meta.isTouched;\n    const _invalid = _touched && !field.state.meta.isValid;\n    const _isEmpty = required && field.state.value === null;\n    const _showClear = clearable && !!field.state.value && !isDisabled;\n\n    const selectedLabel = options.find(o => o.value === field.state.value)?.label;\n\n    const onClear = () => {\n      field.handleChange(null);\n      field.handleBlur();\n    };\n\n    return (\n      <FieldGroup className=\"gap-y-4 px-4\">\n        <Field orientation={orientation} data-invalid={_invalid}>\n          <FieldContent>\n            <FieldLabel htmlFor={field.name} aria-required={_isEmpty}>\n              {label}\n              {tooltip && <FieldTooltip tooltip={tooltip} />}\n            </FieldLabel>\n            <FieldDescription>{description}</FieldDescription>\n          </FieldContent>\n\n          <FieldContentMain className=\"flex flex-col\">\n            {isMobile ? (\n              <>\n                <button\n                  id={field.name}\n                  type=\"button\"\n                  disabled={isDisabled}\n                  aria-invalid={_invalid ? 'true' : undefined}\n                  aria-describedby={errorId}\n                  onBlur={field.handleBlur}\n                  onClick={() => setDialogOpen(true)}\n                  className={cn(\n                    'flex w-full items-center justify-between',\n                    'outline-1 outline-border -outline-offset-1',\n                    'gap-2 rounded bg-transparent px-3 py-2',\n                    'shadow-input transition-all cursor-pointer whitespace-nowrap text-sm',\n                    'focus-visible:outline-primary-strong focus-visible:ring-4 focus-visible:ring-primary-weak',\n                    'disabled:cursor-not-allowed disabled:opacity-50',\n                    _invalid && 'outline-danger bg-danger-bg-subtle ring-danger-weak',\n                    !field.state.value && 'text-text-positive-muted'\n                  )}\n                >\n                  <span className=\"line-clamp-1\">{selectedLabel ?? placeholder}</span>\n                  <ChevronDownIcon size={16} className=\"shrink-0 opacity-50\" />\n                </button>\n\n                <Dialog\n                  open={dialogOpen}\n                  onOpenChange={open => {\n                    setDialogOpen(open);\n                    if (!open) field.handleBlur();\n                  }}\n                >\n                  <DialogPortal>\n                    <DialogOverlay />\n                    <RadixDialog.Content\n                      onOpenAutoFocus={e => e.preventDefault()}\n                      className={cn(\n                        'fixed inset-x-0 bottom-0 z-50',\n                        'flex flex-col bg-background rounded-t-2xl outline-none',\n                        'max-h-[80dvh] shadow-[0_-4px_24px_rgba(0,0,0,0.08)]',\n                        'data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom data-[state=open]:fade-in-0',\n                        'data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom data-[state=closed]:fade-out-0',\n                        'duration-300'\n                      )}\n                    >\n                      <div className=\"flex items-center justify-between px-4 py-3 border-b border-border shrink-0\">\n                        <span className=\"font-semibold text-sm text-text-positive\">{label ?? placeholder ?? 'Chọn một tùy chọn'}</span>\n                        <DialogClose asChild>\n                          <button\n                            type=\"button\"\n                            aria-label=\"Đóng\"\n                            className=\"flex size-7 items-center justify-center rounded-md text-text-positive-weak transition-colors hover:bg-muted-muted hover:text-text-positive\"\n                          >\n                            <XIcon size={16} />\n                          </button>\n                        </DialogClose>\n                      </div>\n\n                      <div className=\"flex flex-col overflow-y-auto\">\n                        {_showClear && (\n                          <DialogClose asChild>\n                            <button\n                              type=\"button\"\n                              className=\"flex w-full items-center gap-x-2 px-4 py-3 text-left text-sm text-danger-strong transition-colors hover:bg-danger-bg-subtle\"\n                              onClick={onClear}\n                            >\n                              <XIcon size={14} />\n                              Xóa lựa chọn\n                            </button>\n                          </DialogClose>\n                        )}\n                        {options.length > 0 ? (\n                          options.map(option => (\n                            <DialogClose key={option.value} asChild>\n                              <button\n                                type=\"button\"\n                                className={cn(\n                                  'flex w-full items-center px-4 py-3 text-left text-sm transition-colors',\n                                  'hover:bg-muted-muted active:bg-muted-muted',\n                                  field.state.value === option.value && 'bg-primary-bg-subtle font-medium text-primary'\n                                )}\n                                onClick={() => {\n                                  field.handleChange(option.value);\n                                  field.handleBlur();\n                                }}\n                              >\n                                {option.label}\n                              </button>\n                            </DialogClose>\n                          ))\n                        ) : (\n                          <div className=\"flex items-center justify-center gap-x-2 px-4 py-8 text-center text-sm text-text-positive-weak\">\n                            <PackagePlusIcon strokeWidth={1} />\n                            Không có tùy chọn\n                          </div>\n                        )}\n                      </div>\n\n                      <div className=\"shrink-0 h-safe-bottom\" />\n                    </RadixDialog.Content>\n                  </DialogPortal>\n                </Dialog>\n              </>\n            ) : (\n              <div className=\"relative\">\n                <Select value={field.state.value ?? ''} disabled={isDisabled} onValueChange={field.handleChange}>\n                  <SelectTrigger aria-invalid={_invalid ? 'true' : undefined} aria-describedby={errorId} onBlur={field.handleBlur}>\n                    <SelectValue placeholder={placeholder} />\n                  </SelectTrigger>\n                  <SelectContent>\n                    {options.length > 0 ? (\n                      options.map(option => (\n                        <SelectItem key={option.value} value={option.value}>\n                          {option.label}\n                        </SelectItem>\n                      ))\n                    ) : (\n                      <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\">\n                        <PackagePlusIcon strokeWidth={1} />\n                        No options available\n                      </div>\n                    )}\n                  </SelectContent>\n                </Select>\n\n                {_showClear && (\n                  <button\n                    type=\"button\"\n                    aria-label=\"Xóa lựa chọn\"\n                    className=\"absolute right-7 top-1/2 -translate-y-1/2 flex size-4 cursor-pointer items-center justify-center rounded-md text-text-positive-weak outline-none transition-[color,transform] hover:text-text-positive focus-visible:text-primary-strong focus-visible:[&>svg]:scale-125 [&>svg]:size-3.5 [&>svg]:transition-transform\"\n                    onClick={onClear}\n                  >\n                    <XIcon aria-hidden=\"true\" />\n                  </button>\n                )}\n              </div>\n            )}\n\n            {_touched && showErrorMessage && <FieldError id={errorId} className=\"mt-1\" errors={field.state.meta.errors} />}\n\n            <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n          </FieldContentMain>\n        </Field>\n        <FieldSeparator />\n      </FieldGroup>\n    );\n  }\n);\n\nSelectField.displayName = 'SelectField';\n"],"mappings":"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"}

package/dist/separator-BlNAFSJv.mjs

@@ -0,0 +1,2 @@
+import{cn as e}from"@customafk/react-toolkit/utils";import{jsx as t}from"react/jsx-runtime";import{Separator as n}from"radix-ui";function r({className:r,orientation:i=`horizontal`,decorative:a=!0,...o}){return t(n.Root,{"data-slot":`separator`,decorative:a,orientation:i,className:e(`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`,r),...o})}export{r as t};
+//# sourceMappingURL=separator-BlNAFSJv.mjs.map

package/dist/separator-BlNAFSJv.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"separator-BlNAFSJv.mjs","names":["Separator","SeparatorPrimitive"],"sources":["../packages/components/features/tanstack-form/components/ui/separator.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Separator as SeparatorPrimitive } from 'radix-ui';\n\n/**\n * Thin decorative divider line that supports horizontal and vertical orientations via Radix UI Separator.\n *\n * @example\n * import { Separator } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <Separator orientation=\"horizontal\" />\n */\nfunction Separator({ className, orientation = 'horizontal', decorative = true, ...props }: React.ComponentProps<typeof SeparatorPrimitive.Root>) {\n  return (\n    <SeparatorPrimitive.Root\n      data-slot=\"separator\"\n      decorative={decorative}\n      orientation={orientation}\n      className={cn(\n        'shrink-0 bg-border-weak',\n        'data-[orientation=horizontal]:h-px',\n        'data-[orientation=horizontal]:w-full',\n        'data-[orientation=vertical]:h-full',\n        'data-[orientation=vertical]:w-px',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Separator };\n"],"mappings":"iIAcA,SAASA,EAAU,CAAE,YAAW,cAAc,aAAc,aAAa,GAAM,GAAG,GAA+D,CAC/I,OACE,EAACC,EAAmB,KAApB,CACE,YAAU,YACE,aACC,cACb,UAAW,EACT,0BACA,qCACA,uCACA,qCACA,mCACA,CACF,EACA,GAAI,CACL,CAAA,CAEL"}

package/dist/separator-sBz__BXC.cjs

@@ -0,0 +1,2 @@
+let e=require("@customafk/react-toolkit/utils"),t=require("react/jsx-runtime"),n=require("radix-ui");function r({className:r,orientation:i=`horizontal`,decorative:a=!0,...o}){return(0,t.jsx)(n.Separator.Root,{"data-slot":`separator`,decorative:a,orientation:i,className:(0,e.cn)(`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`,r),...o})}Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return r}});
+//# sourceMappingURL=separator-sBz__BXC.cjs.map

package/dist/separator-sBz__BXC.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"separator-sBz__BXC.cjs","names":["SeparatorPrimitive"],"sources":["../packages/components/features/tanstack-form/components/ui/separator.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Separator as SeparatorPrimitive } from 'radix-ui';\n\n/**\n * Thin decorative divider line that supports horizontal and vertical orientations via Radix UI Separator.\n *\n * @example\n * import { Separator } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <Separator orientation=\"horizontal\" />\n */\nfunction Separator({ className, orientation = 'horizontal', decorative = true, ...props }: React.ComponentProps<typeof SeparatorPrimitive.Root>) {\n  return (\n    <SeparatorPrimitive.Root\n      data-slot=\"separator\"\n      decorative={decorative}\n      orientation={orientation}\n      className={cn(\n        'shrink-0 bg-border-weak',\n        'data-[orientation=horizontal]:h-px',\n        'data-[orientation=horizontal]:w-full',\n        'data-[orientation=vertical]:h-full',\n        'data-[orientation=vertical]:w-px',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Separator };\n"],"mappings":"qGAcA,SAAS,EAAU,CAAE,YAAW,cAAc,aAAc,aAAa,GAAM,GAAG,GAA+D,CAC/I,OACE,EAAA,EAAA,IAAA,CAACA,EAAAA,UAAmB,KAApB,CACE,YAAU,YACE,aACC,cACb,WAAA,EAAA,EAAA,GAAA,CACE,0BACA,qCACA,uCACA,qCACA,mCACA,CACF,EACA,GAAI,CACL,CAAA,CAEL"}

package/dist/simple-array-field-9oZ-Smzp.mjs

@@ -0,0 +1,2 @@
+import{Button as e}from"./ui/button.mjs";import{G as t}from"./tanstack-form-CM_Hb3JT.mjs";import{PlusIcon as n,Trash2Icon as r}from"lucide-react";import{useCallback as i}from"react";import{cn as a}from"@customafk/react-toolkit/utils";import{jsx as o,jsxs as s}from"react/jsx-runtime";function c({width:e,className:t,children:n}){return o(`div`,{"data-slot":`array-col`,style:e?{width:typeof e==`number`?`${e}px`:e,flexShrink:0}:{flex:1,minWidth:0},className:t,children:n})}function l({className:e,children:t}){return s(`div`,{"data-slot":`array-header-row`,className:a(`mb-1 flex items-center gap-2 px-1 text-xs font-medium text-text-positive-weak`,e),children:[t,o(`div`,{className:`min-w-8 w-8 shrink-0`})]})}function u({defaultRow:c,children:l,addLabel:u=`Thêm hàng`,className:d}){let f=t(),p=f.state.value??[],m=i(()=>{f.pushValue({...c})},[f,c]),h=i(e=>{f.removeValue(e)},[f]);return s(`div`,{"data-slot":`simple-array-field`,className:a(`flex flex-col gap-2`,d),children:[p.map((t,n)=>s(`div`,{className:`flex items-start gap-2`,children:[l(n),o(e,{type:`button`,size:`icon`,variant:`ghost`,color:`danger`,className:`min-w-8`,onClick:()=>h(n),children:o(r,{size:14})})]},n)),o(`div`,{children:s(e,{type:`button`,variant:`outline`,color:`muted`,size:`xs`,onClick:m,children:[o(n,{size:13}),u]})})]})}export{c as ArrayCol,l as ArrayHeaderRow,u as SimpleArrayField};
+//# sourceMappingURL=simple-array-field-9oZ-Smzp.mjs.map

package/dist/simple-array-field-9oZ-Smzp.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"simple-array-field-9oZ-Smzp.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-array-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback } from 'react';\n\nimport { PlusIcon, Trash2Icon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\n\nimport { useTanStackFieldContext } from '../form-context';\n\n// ─── ArrayCol ──────────────────────────────────────────────────────────────\n\ntype ArrayColProps = {\n  /**\n   * Fixed column width as a pixel number (e.g. `96`) or any CSS string\n   * (e.g. `'8rem'`, `'20%'`). Omit to let the column expand and fill the\n   * remaining row space (`flex: 1`).\n   */\n  width?: number | string;\n  className?: string;\n  children: React.ReactNode;\n};\n\n/**\n * Layout helper for columns inside a `SimpleArrayField` row. Controls width\n * without repeating `<div className=\"w-24\">` or `<div className=\"flex-1\">`.\n *\n * @example\n * <SimpleArrayField defaultRow={...}>\n *   {i => (\n *     <>\n *       <ArrayCol>                 // flex-1 — takes remaining space\n *         <AppField name={`items[${i}].name`}>...</AppField>\n *       </ArrayCol>\n *       <ArrayCol width={96}>     // 96 px fixed\n *         <AppField name={`items[${i}].qty`}>...</AppField>\n *       </ArrayCol>\n *       <ArrayCol width=\"8rem\">   // CSS string\n *         <AppField name={`items[${i}].tax`}>...</AppField>\n *       </ArrayCol>\n *     </>\n *   )}\n * </SimpleArrayField>\n */\nexport function ArrayCol({ width, className, children }: ArrayColProps) {\n  const style: React.CSSProperties = width ? { width: typeof width === 'number' ? `${width}px` : width, flexShrink: 0 } : { flex: 1, minWidth: 0 };\n\n  return (\n    <div data-slot=\"array-col\" style={style} className={className}>\n      {children}\n    </div>\n  );\n}\n\n// ─── ArrayHeaderRow ────────────────────────────────────────────────────────\n\ntype ArrayHeaderRowProps = {\n  className?: string;\n  children: React.ReactNode;\n};\n\n/**\n * Styled header row for a `SimpleArrayField` table. Place it directly above\n * `<SimpleArrayField>` and use `<ArrayCol>` children with text labels to align\n * headers with their columns. A spacer matching the delete-button width is\n * appended automatically.\n *\n * @example\n * <ArrayHeaderRow>\n *   <ArrayCol>Name</ArrayCol>\n *   <ArrayCol width={96}>Price</ArrayCol>\n *   <ArrayCol width={80}>Qty</ArrayCol>\n * </ArrayHeaderRow>\n * <SimpleArrayField defaultRow={...}>\n *   {i => (...)}\n * </SimpleArrayField>\n */\nexport function ArrayHeaderRow({ className, children }: ArrayHeaderRowProps) {\n  return (\n    <div data-slot=\"array-header-row\" className={cn('mb-1 flex items-center gap-2 px-1 text-xs font-medium text-text-positive-weak', className)}>\n      {children}\n      {/* spacer matching the delete icon button width */}\n      <div className=\"min-w-8 w-8 shrink-0\" />\n    </div>\n  );\n}\n\n// ─── SimpleArrayField ──────────────────────────────────────────────────────\n\nexport type SimpleArrayFieldProps<T> = {\n  /**\n   * Shape of a brand-new empty row appended when the user clicks \"Add row\".\n   */\n  defaultRow: T;\n  /**\n   * Render function called once per row. Receives the zero-based row `index`\n   * so you can build field paths like `` `items[${index}].name` ``.\n   */\n  children: (index: number) => React.ReactNode;\n  /** Label on the add button. Defaults to `'Add row'`. */\n  addLabel?: string;\n  className?: string;\n};\n\n/**\n * Array field wrapper that manages rows (add / remove) while letting you\n * freely compose any fields inside each row.\n *\n * @example\n * const { AppForm, AppField } = useTanStackForm({ defaultValues: { items: [] } });\n *\n * <AppForm>\n *   <AppField name=\"items\">\n *     {({ SimpleArrayField }) => (\n *       <SimpleArrayField defaultRow={{ name: null, qty: null }}>\n *         {(i) => (\n *           <div className=\"flex gap-2\">\n *             <AppField name={`items[${i}].name`}>\n *               {({ SimpleTextField }) => <SimpleTextField label=\"Name\" />}\n *             </AppField>\n *             <AppField name={`items[${i}].qty`}>\n *               {({ SimpleNumberField }) => <SimpleNumberField label=\"Qty\" />}\n *             </AppField>\n *           </div>\n *         )}\n *       </SimpleArrayField>\n *     )}\n *   </AppField>\n * </AppForm>\n */\nexport function SimpleArrayField<T>({ defaultRow, children, addLabel = 'Thêm hàng', className }: SimpleArrayFieldProps<T>) {\n  const field = useTanStackFieldContext<T[]>();\n  const rows = field.state.value ?? [];\n\n  const addRow = useCallback(() => {\n    field.pushValue({ ...defaultRow } as T);\n  }, [field, defaultRow]);\n\n  const removeRow = useCallback(\n    (index: number) => {\n      field.removeValue(index);\n    },\n    [field]\n  );\n\n  return (\n    <div data-slot=\"simple-array-field\" className={cn('flex flex-col gap-2', className)}>\n      {rows.map((_, i) => (\n        // biome-ignore lint/suspicious/noArrayIndexKey: index is the stable identity for form rows\n        <div key={i} className=\"flex items-start gap-2\">\n          {children(i)}\n          <Button type=\"button\" size=\"icon\" variant=\"ghost\" color=\"danger\" className=\"min-w-8\" onClick={() => removeRow(i)}>\n            <Trash2Icon size={14} />\n          </Button>\n        </div>\n      ))}\n\n      <div>\n        <Button type=\"button\" variant=\"outline\" color=\"muted\" size=\"xs\" onClick={addRow}>\n          <PlusIcon size={13} />\n          {addLabel}\n        </Button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"4RA8CA,SAAgB,EAAS,CAAE,QAAO,YAAW,YAA2B,CAGtE,OACE,EAAC,MAAD,CAAK,YAAU,YAAY,MAHM,EAAQ,CAAE,MAAO,OAAO,GAAU,SAAW,GAAG,EAAM,IAAM,EAAO,WAAY,CAAE,EAAI,CAAE,KAAM,EAAG,SAAU,CAAE,EAGzF,YACjD,UACE,CAAA,CAET,CAyBA,SAAgB,EAAe,CAAE,YAAW,YAAiC,CAC3E,OACE,EAAC,MAAD,CAAK,YAAU,mBAAmB,UAAW,EAAG,gFAAiF,CAAS,WAA1I,CACG,EAED,EAAC,MAAD,CAAK,UAAU,sBAAwB,CAAA,CACpC,GAET,CA6CA,SAAgB,EAAoB,CAAE,aAAY,WAAU,WAAW,YAAa,aAAuC,CACzH,IAAM,EAAQ,EAA6B,EACrC,EAAO,EAAM,MAAM,OAAS,CAAC,EAE7B,EAAS,MAAkB,CAC/B,EAAM,UAAU,CAAE,GAAG,CAAW,CAAM,CACxC,EAAG,CAAC,EAAO,CAAU,CAAC,EAEhB,EAAY,EACf,GAAkB,CACjB,EAAM,YAAY,CAAK,CACzB,EACA,CAAC,CAAK,CACR,EAEA,OACE,EAAC,MAAD,CAAK,YAAU,qBAAqB,UAAW,EAAG,sBAAuB,CAAS,WAAlF,CACG,EAAK,KAAK,EAAG,IAEZ,EAAC,MAAD,CAAa,UAAU,kCAAvB,CACG,EAAS,CAAC,EACX,EAAC,EAAD,CAAQ,KAAK,SAAS,KAAK,OAAO,QAAQ,QAAQ,MAAM,SAAS,UAAU,UAAU,YAAe,EAAU,CAAC,WAC7G,EAAC,EAAD,CAAY,KAAM,EAAK,CAAA,CACjB,CAAA,CACL,GALK,CAKL,CACN,EAED,EAAC,MAAD,CAAA,SACE,EAAC,EAAD,CAAQ,KAAK,SAAS,QAAQ,UAAU,MAAM,QAAQ,KAAK,KAAK,QAAS,WAAzE,CACE,EAAC,EAAD,CAAU,KAAM,EAAK,CAAA,EACpB,CACK,GACL,CAAA,CACF,GAET"}

package/dist/simple-array-field-Bcs2pHdp.cjs

@@ -0,0 +1,2 @@
+const e=require("./ui/button.cjs"),t=require("./tanstack-form-DS_ZvRl8.cjs");let n=require("lucide-react"),r=require("react"),i=require("@customafk/react-toolkit/utils"),a=require("react/jsx-runtime");function o({width:e,className:t,children:n}){return(0,a.jsx)(`div`,{"data-slot":`array-col`,style:e?{width:typeof e==`number`?`${e}px`:e,flexShrink:0}:{flex:1,minWidth:0},className:t,children:n})}function s({className:e,children:t}){return(0,a.jsxs)(`div`,{"data-slot":`array-header-row`,className:(0,i.cn)(`mb-1 flex items-center gap-2 px-1 text-xs font-medium text-text-positive-weak`,e),children:[t,(0,a.jsx)(`div`,{className:`min-w-8 w-8 shrink-0`})]})}function c({defaultRow:o,children:s,addLabel:c=`Thêm hàng`,className:l}){let u=t.G(),d=u.state.value??[],f=(0,r.useCallback)(()=>{u.pushValue({...o})},[u,o]),p=(0,r.useCallback)(e=>{u.removeValue(e)},[u]);return(0,a.jsxs)(`div`,{"data-slot":`simple-array-field`,className:(0,i.cn)(`flex flex-col gap-2`,l),children:[d.map((t,r)=>(0,a.jsxs)(`div`,{className:`flex items-start gap-2`,children:[s(r),(0,a.jsx)(e.Button,{type:`button`,size:`icon`,variant:`ghost`,color:`danger`,className:`min-w-8`,onClick:()=>p(r),children:(0,a.jsx)(n.Trash2Icon,{size:14})})]},r)),(0,a.jsx)(`div`,{children:(0,a.jsxs)(e.Button,{type:`button`,variant:`outline`,color:`muted`,size:`xs`,onClick:f,children:[(0,a.jsx)(n.PlusIcon,{size:13}),c]})})]})}exports.ArrayCol=o,exports.ArrayHeaderRow=s,exports.SimpleArrayField=c;
+//# sourceMappingURL=simple-array-field-Bcs2pHdp.cjs.map

package/dist/simple-array-field-Bcs2pHdp.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"simple-array-field-Bcs2pHdp.cjs","names":["useTanStackFieldContext","Button","Trash2Icon","PlusIcon"],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-array-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback } from 'react';\n\nimport { PlusIcon, Trash2Icon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\n\nimport { useTanStackFieldContext } from '../form-context';\n\n// ─── ArrayCol ──────────────────────────────────────────────────────────────\n\ntype ArrayColProps = {\n  /**\n   * Fixed column width as a pixel number (e.g. `96`) or any CSS string\n   * (e.g. `'8rem'`, `'20%'`). Omit to let the column expand and fill the\n   * remaining row space (`flex: 1`).\n   */\n  width?: number | string;\n  className?: string;\n  children: React.ReactNode;\n};\n\n/**\n * Layout helper for columns inside a `SimpleArrayField` row. Controls width\n * without repeating `<div className=\"w-24\">` or `<div className=\"flex-1\">`.\n *\n * @example\n * <SimpleArrayField defaultRow={...}>\n *   {i => (\n *     <>\n *       <ArrayCol>                 // flex-1 — takes remaining space\n *         <AppField name={`items[${i}].name`}>...</AppField>\n *       </ArrayCol>\n *       <ArrayCol width={96}>     // 96 px fixed\n *         <AppField name={`items[${i}].qty`}>...</AppField>\n *       </ArrayCol>\n *       <ArrayCol width=\"8rem\">   // CSS string\n *         <AppField name={`items[${i}].tax`}>...</AppField>\n *       </ArrayCol>\n *     </>\n *   )}\n * </SimpleArrayField>\n */\nexport function ArrayCol({ width, className, children }: ArrayColProps) {\n  const style: React.CSSProperties = width ? { width: typeof width === 'number' ? `${width}px` : width, flexShrink: 0 } : { flex: 1, minWidth: 0 };\n\n  return (\n    <div data-slot=\"array-col\" style={style} className={className}>\n      {children}\n    </div>\n  );\n}\n\n// ─── ArrayHeaderRow ────────────────────────────────────────────────────────\n\ntype ArrayHeaderRowProps = {\n  className?: string;\n  children: React.ReactNode;\n};\n\n/**\n * Styled header row for a `SimpleArrayField` table. Place it directly above\n * `<SimpleArrayField>` and use `<ArrayCol>` children with text labels to align\n * headers with their columns. A spacer matching the delete-button width is\n * appended automatically.\n *\n * @example\n * <ArrayHeaderRow>\n *   <ArrayCol>Name</ArrayCol>\n *   <ArrayCol width={96}>Price</ArrayCol>\n *   <ArrayCol width={80}>Qty</ArrayCol>\n * </ArrayHeaderRow>\n * <SimpleArrayField defaultRow={...}>\n *   {i => (...)}\n * </SimpleArrayField>\n */\nexport function ArrayHeaderRow({ className, children }: ArrayHeaderRowProps) {\n  return (\n    <div data-slot=\"array-header-row\" className={cn('mb-1 flex items-center gap-2 px-1 text-xs font-medium text-text-positive-weak', className)}>\n      {children}\n      {/* spacer matching the delete icon button width */}\n      <div className=\"min-w-8 w-8 shrink-0\" />\n    </div>\n  );\n}\n\n// ─── SimpleArrayField ──────────────────────────────────────────────────────\n\nexport type SimpleArrayFieldProps<T> = {\n  /**\n   * Shape of a brand-new empty row appended when the user clicks \"Add row\".\n   */\n  defaultRow: T;\n  /**\n   * Render function called once per row. Receives the zero-based row `index`\n   * so you can build field paths like `` `items[${index}].name` ``.\n   */\n  children: (index: number) => React.ReactNode;\n  /** Label on the add button. Defaults to `'Add row'`. */\n  addLabel?: string;\n  className?: string;\n};\n\n/**\n * Array field wrapper that manages rows (add / remove) while letting you\n * freely compose any fields inside each row.\n *\n * @example\n * const { AppForm, AppField } = useTanStackForm({ defaultValues: { items: [] } });\n *\n * <AppForm>\n *   <AppField name=\"items\">\n *     {({ SimpleArrayField }) => (\n *       <SimpleArrayField defaultRow={{ name: null, qty: null }}>\n *         {(i) => (\n *           <div className=\"flex gap-2\">\n *             <AppField name={`items[${i}].name`}>\n *               {({ SimpleTextField }) => <SimpleTextField label=\"Name\" />}\n *             </AppField>\n *             <AppField name={`items[${i}].qty`}>\n *               {({ SimpleNumberField }) => <SimpleNumberField label=\"Qty\" />}\n *             </AppField>\n *           </div>\n *         )}\n *       </SimpleArrayField>\n *     )}\n *   </AppField>\n * </AppForm>\n */\nexport function SimpleArrayField<T>({ defaultRow, children, addLabel = 'Thêm hàng', className }: SimpleArrayFieldProps<T>) {\n  const field = useTanStackFieldContext<T[]>();\n  const rows = field.state.value ?? [];\n\n  const addRow = useCallback(() => {\n    field.pushValue({ ...defaultRow } as T);\n  }, [field, defaultRow]);\n\n  const removeRow = useCallback(\n    (index: number) => {\n      field.removeValue(index);\n    },\n    [field]\n  );\n\n  return (\n    <div data-slot=\"simple-array-field\" className={cn('flex flex-col gap-2', className)}>\n      {rows.map((_, i) => (\n        // biome-ignore lint/suspicious/noArrayIndexKey: index is the stable identity for form rows\n        <div key={i} className=\"flex items-start gap-2\">\n          {children(i)}\n          <Button type=\"button\" size=\"icon\" variant=\"ghost\" color=\"danger\" className=\"min-w-8\" onClick={() => removeRow(i)}>\n            <Trash2Icon size={14} />\n          </Button>\n        </div>\n      ))}\n\n      <div>\n        <Button type=\"button\" variant=\"outline\" color=\"muted\" size=\"xs\" onClick={addRow}>\n          <PlusIcon size={13} />\n          {addLabel}\n        </Button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"yMA8CA,SAAgB,EAAS,CAAE,QAAO,YAAW,YAA2B,CAGtE,OACE,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,YAAU,YAAY,MAHM,EAAQ,CAAE,MAAO,OAAO,GAAU,SAAW,GAAG,EAAM,IAAM,EAAO,WAAY,CAAE,EAAI,CAAE,KAAM,EAAG,SAAU,CAAE,EAGzF,YACjD,UACE,CAAA,CAET,CAyBA,SAAgB,EAAe,CAAE,YAAW,YAAiC,CAC3E,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,YAAU,mBAAmB,WAAA,EAAA,EAAA,GAAA,CAAc,gFAAiF,CAAS,WAA1I,CACG,GAED,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,sBAAwB,CAAA,CACpC,GAET,CA6CA,SAAgB,EAAoB,CAAE,aAAY,WAAU,WAAW,YAAa,aAAuC,CACzH,IAAM,EAAQA,EAAAA,EAA6B,EACrC,EAAO,EAAM,MAAM,OAAS,CAAC,EAE7B,GAAA,EAAA,EAAA,YAAA,KAA2B,CAC/B,EAAM,UAAU,CAAE,GAAG,CAAW,CAAM,CACxC,EAAG,CAAC,EAAO,CAAU,CAAC,EAEhB,GAAA,EAAA,EAAA,YAAA,CACH,GAAkB,CACjB,EAAM,YAAY,CAAK,CACzB,EACA,CAAC,CAAK,CACR,EAEA,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,YAAU,qBAAqB,WAAA,EAAA,EAAA,GAAA,CAAc,sBAAuB,CAAS,WAAlF,CACG,EAAK,KAAK,EAAG,KAEZ,EAAA,EAAA,KAAA,CAAC,MAAD,CAAa,UAAU,kCAAvB,CACG,EAAS,CAAC,GACX,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CAAQ,KAAK,SAAS,KAAK,OAAO,QAAQ,QAAQ,MAAM,SAAS,UAAU,UAAU,YAAe,EAAU,CAAC,YAC7G,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,KAAM,EAAK,CAAA,CACjB,CAAA,CACL,GALK,CAKL,CACN,GAED,EAAA,EAAA,IAAA,CAAC,MAAD,CAAA,UACE,EAAA,EAAA,KAAA,CAACD,EAAAA,OAAD,CAAQ,KAAK,SAAS,QAAQ,UAAU,MAAM,QAAQ,KAAK,KAAK,QAAS,WAAzE,EACE,EAAA,EAAA,IAAA,CAACE,EAAAA,SAAD,CAAU,KAAM,EAAK,CAAA,EACpB,CACK,GACL,CAAA,CACF,GAET"}

package/dist/simple-boolean-field-C-qq6Vlt.cjs

@@ -0,0 +1,2 @@
+const e=require("./ui/switch.cjs"),t=require("./ui/checkbox.cjs"),n=require("./ui/label.cjs"),r=require("./tanstack-form-DS_ZvRl8.cjs"),i=require("./field-BV5twmKA.cjs");let a=require("react"),o=require("react/jsx-runtime"),s=require("@tanstack/react-form");const c=({label:c,required:l,disabled:u,variant:d=`checkbox`})=>{let f=(0,a.useId)(),{form:p,name:m,state:h,handleBlur:g,handleChange:_}=r.G(),v=(0,s.useStore)(p.store,({isSubmitting:e})=>e),y=h.meta.isTouched&&!h.meta.isValid,b=h.value??!1,x=u||v,S=(0,a.useCallback)(e=>{v||_(e)},[v,_]);return(0,o.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[(0,o.jsxs)(`div`,{className:`flex items-center gap-2 h-9`,children:[d===`switch`?(0,o.jsx)(e.Switch,{id:f,name:m,checked:b,disabled:x,"aria-invalid":y,onBlur:g,onCheckedChange:S}):(0,o.jsx)(t.Checkbox,{id:f,name:m,checked:b,disabled:x,"aria-invalid":y,onBlur:g,onCheckedChange:S}),c&&(0,o.jsxs)(n.Label,{htmlFor:f,className:`cursor-pointer`,children:[c,l&&(0,o.jsx)(`span`,{className:`text-danger-strong`,children:`*`})]})]}),y&&(0,o.jsx)(i.FieldError,{errors:h.meta.errors})]})};exports.SimpleBooleanField=c;
+//# sourceMappingURL=simple-boolean-field-C-qq6Vlt.cjs.map

package/dist/simple-boolean-field-C-qq6Vlt.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"simple-boolean-field-C-qq6Vlt.cjs","names":["useTanStackFieldContext","Switch","Checkbox","Label","FieldError"],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-boolean-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { Checkbox } from '@/components/ui/checkbox';\nimport { Label } from '@/components/ui/label';\nimport { Switch } from '@/components/ui/switch';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  required?: boolean;\n  disabled?: boolean;\n  variant?: 'checkbox' | 'switch';\n};\n\nexport const SimpleBooleanField: React.FC<Props> = ({ label, required, disabled, variant = 'checkbox' }) => {\n  const id = useId();\n  const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<boolean | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n  const checked = state.value ?? false;\n  const isDisabled = disabled || isSubmitting;\n\n  const onCheckedChange = useCallback(\n    (value: boolean) => {\n      if (isSubmitting) return;\n      handleChange(value);\n    },\n    [isSubmitting, handleChange]\n  );\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      <div className=\"flex items-center gap-2 h-9\">\n        {variant === 'switch' ? (\n          <Switch id={id} name={name} checked={checked} disabled={isDisabled} aria-invalid={_invalid} onBlur={handleBlur} onCheckedChange={onCheckedChange} />\n        ) : (\n          <Checkbox id={id} name={name} checked={checked} disabled={isDisabled} aria-invalid={_invalid} onBlur={handleBlur} onCheckedChange={onCheckedChange} />\n        )}\n        {label && (\n          <Label htmlFor={id} className=\"cursor-pointer\">\n            {label}\n            {required && <span className=\"text-danger-strong\">*</span>}\n          </Label>\n        )}\n      </div>\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"kQAoBA,MAAa,GAAuC,CAAE,QAAO,WAAU,WAAU,UAAU,cAAiB,CAC1G,IAAM,GAAA,EAAA,EAAA,MAAA,CAAW,EACX,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiBA,EAAAA,EAAwC,EAE1F,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAC/C,EAAU,EAAM,OAAS,GACzB,EAAa,GAAY,EAEzB,GAAA,EAAA,EAAA,YAAA,CACH,GAAmB,CACd,GACJ,EAAa,CAAK,CACpB,EACA,CAAC,EAAc,CAAY,CAC7B,EAEA,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,iCAAf,EACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,uCAAf,CACG,IAAY,UACX,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CAAY,KAAU,OAAe,UAAS,SAAU,EAAY,eAAc,EAAU,OAAQ,EAA6B,iBAAkB,CAAA,GAEnJ,EAAA,EAAA,IAAA,CAACC,EAAAA,SAAD,CAAc,KAAU,OAAe,UAAS,SAAU,EAAY,eAAc,EAAU,OAAQ,EAA6B,iBAAkB,CAAA,EAEtJ,IACC,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,QAAS,EAAI,UAAU,0BAA9B,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,8BAAqB,GAAO,CAAA,CACpD,GAEN,IACJ,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}

package/dist/simple-boolean-field-CkJUMxNU.mjs

@@ -0,0 +1,2 @@
+import{Switch as e}from"./ui/switch.mjs";import{Checkbox as t}from"./ui/checkbox.mjs";import{Label as n}from"./ui/label.mjs";import{G as r}from"./tanstack-form-CM_Hb3JT.mjs";import{FieldError as i}from"./field-BKyUqvzh.mjs";import{useCallback as a,useId as o}from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";import{useStore as l}from"@tanstack/react-form";const u=({label:u,required:d,disabled:f,variant:p=`checkbox`})=>{let m=o(),{form:h,name:g,state:_,handleBlur:v,handleChange:y}=r(),b=l(h.store,({isSubmitting:e})=>e),x=_.meta.isTouched&&!_.meta.isValid,S=_.value??!1,C=f||b,w=a(e=>{b||y(e)},[b,y]);return c(`div`,{className:`flex flex-col gap-1.5`,children:[c(`div`,{className:`flex items-center gap-2 h-9`,children:[s(p===`switch`?e:t,{id:m,name:g,checked:S,disabled:C,"aria-invalid":x,onBlur:v,onCheckedChange:w}),u&&c(n,{htmlFor:m,className:`cursor-pointer`,children:[u,d&&s(`span`,{className:`text-danger-strong`,children:`*`})]})]}),x&&s(i,{errors:_.meta.errors})]})};export{u as SimpleBooleanField};
+//# sourceMappingURL=simple-boolean-field-CkJUMxNU.mjs.map

package/dist/simple-boolean-field-CkJUMxNU.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"simple-boolean-field-CkJUMxNU.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-boolean-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { Checkbox } from '@/components/ui/checkbox';\nimport { Label } from '@/components/ui/label';\nimport { Switch } from '@/components/ui/switch';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  required?: boolean;\n  disabled?: boolean;\n  variant?: 'checkbox' | 'switch';\n};\n\nexport const SimpleBooleanField: React.FC<Props> = ({ label, required, disabled, variant = 'checkbox' }) => {\n  const id = useId();\n  const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<boolean | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n  const checked = state.value ?? false;\n  const isDisabled = disabled || isSubmitting;\n\n  const onCheckedChange = useCallback(\n    (value: boolean) => {\n      if (isSubmitting) return;\n      handleChange(value);\n    },\n    [isSubmitting, handleChange]\n  );\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      <div className=\"flex items-center gap-2 h-9\">\n        {variant === 'switch' ? (\n          <Switch id={id} name={name} checked={checked} disabled={isDisabled} aria-invalid={_invalid} onBlur={handleBlur} onCheckedChange={onCheckedChange} />\n        ) : (\n          <Checkbox id={id} name={name} checked={checked} disabled={isDisabled} aria-invalid={_invalid} onBlur={handleBlur} onCheckedChange={onCheckedChange} />\n        )}\n        {label && (\n          <Label htmlFor={id} className=\"cursor-pointer\">\n            {label}\n            {required && <span className=\"text-danger-strong\">*</span>}\n          </Label>\n        )}\n      </div>\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"iXAoBA,MAAa,GAAuC,CAAE,QAAO,WAAU,WAAU,UAAU,cAAiB,CAC1G,IAAM,EAAK,EAAM,EACX,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiB,EAAwC,EAE1F,EAAe,EAAS,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAC/C,EAAU,EAAM,OAAS,GACzB,EAAa,GAAY,EAEzB,EAAkB,EACrB,GAAmB,CACd,GACJ,EAAa,CAAK,CACpB,EACA,CAAC,EAAc,CAAY,CAC7B,EAEA,OACE,EAAC,MAAD,CAAK,UAAU,iCAAf,CACE,EAAC,MAAD,CAAK,UAAU,uCAAf,CAEI,EADD,IAAY,SACV,EAEA,EAFD,CAAY,KAAU,OAAe,UAAS,SAAU,EAAY,eAAc,EAAU,OAAQ,EAA6B,iBAAkB,CAEE,EAEtJ,GACC,EAAC,EAAD,CAAO,QAAS,EAAI,UAAU,0BAA9B,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,8BAAqB,GAAO,CAAA,CACpD,GAEN,IACJ,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}

package/dist/simple-combobox-field-5dfMd49B.mjs

@@ -0,0 +1,2 @@
+import{Button as e}from"./ui/button.mjs";import{Command as t,CommandEmpty as n,CommandGroup as r,CommandInput as i,CommandItem as a,CommandList as o}from"./ui/command.mjs";import{Label as s}from"./ui/label.mjs";import{Popover as c,PopoverContent as l,PopoverTrigger as u}from"./ui/popover.mjs";import{G as d}from"./tanstack-form-CM_Hb3JT.mjs";import{Drawer as f,DrawerContent as p,DrawerHeader as m,DrawerTitle as h}from"./ui/drawer.mjs";import{FieldError as g}from"./field-BKyUqvzh.mjs";import{useId as _,useState as v}from"react";import{cn as y}from"@customafk/react-toolkit/utils";import{jsx as b,jsxs as x}from"react/jsx-runtime";import{useIsMobile as S}from"@customafk/react-toolkit/hooks/useMobile";import{useStore as C}from"@tanstack/react-form";const w=({label:w,placeholder:T,required:E,disabled:D,options:O})=>{let k=_(),{form:A,state:j,handleBlur:M,handleChange:N}=d(),P=C(A.store,({isSubmitting:e})=>e),F=S(),[I,L]=v(!1),R=j.meta.isTouched&&!j.meta.isValid,z=D||P,B=O.find(({value:e})=>e===j.value)?.label,V=x(t,{children:[b(i,{placeholder:T??`Tìm kiếm…`}),x(o,{children:[b(n,{children:`Không tìm thấy kết quả.`}),b(r,{children:O.map(e=>b(a,{value:e.label,onSelect:()=>{N(e.value===j.value?null:e.value),L(!1)},children:e.label},e.value))})]})]});return F?x(`div`,{className:`flex flex-col gap-1.5`,children:[w&&x(s,{htmlFor:k,children:[w,E&&b(`span`,{className:`text-danger-strong`,children:`*`})]}),b(e,{id:k,type:`button`,variant:`outline`,color:`muted`,disabled:z,"aria-invalid":R,className:y(`w-full justify-start font-normal outline-1 outline-border -outline-offset-1`,!j.value&&`text-text-positive-muted`,R&&`outline-danger bg-danger-bg-subtle`),onBlur:M,onClick:()=>L(!0),children:B??b(`span`,{className:`text-text-positive-muted`,children:T})}),b(f,{open:I,onOpenChange:L,direction:`bottom`,children:x(p,{children:[b(m,{children:b(h,{children:w??T??`Tìm kiếm…`})}),b(`div`,{className:`overflow-y-auto pb-safe-bottom`,children:V})]})}),R&&b(g,{errors:j.meta.errors})]}):x(`div`,{className:`flex flex-col gap-1.5`,children:[w&&x(s,{htmlFor:k,children:[w,E&&b(`span`,{className:`text-danger-strong`,children:`*`})]}),x(c,{children:[b(u,{asChild:!0,children:b(e,{id:k,variant:`outline`,color:`muted`,size:`lg`,disabled:z,"aria-invalid":R,className:y(`flex w-full items-center justify-start rounded outline-border font-normal`,`hover:bg-transparent`,`focus:outline-1 focus:outline-primary-strong focus:ring-4 focus:ring-primary-weak`,`data-[state=open]:outline-1 data-[state=open]:outline-primary-strong data-[state=open]:ring-4 data-[state=open]:ring-primary-weak`,!j.value&&`text-text-positive-muted`),children:B??b(`span`,{className:`text-text-positive-muted`,children:T})})}),b(l,{align:`start`,side:`bottom`,className:`w-[--radix-popover-trigger-width] p-0 rounded`,onBlur:M,children:V})]}),R&&b(g,{errors:j.meta.errors})]})};export{w as SimpleComboboxField};
+//# sourceMappingURL=simple-combobox-field-5dfMd49B.mjs.map

package/dist/simple-combobox-field-5dfMd49B.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"simple-combobox-field-5dfMd49B.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-combobox-field.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useState } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { useIsMobile } from '@customafk/react-toolkit/hooks/useMobile';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command';\nimport { Drawer, DrawerContent, DrawerHeader, DrawerTitle } from '@/components/ui/drawer';\nimport { Label } from '@/components/ui/label';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  placeholder?: string;\n  required?: boolean;\n  disabled?: boolean;\n  options: Array<{ value: string; label: string }>;\n};\n\nexport const SimpleComboboxField: React.FC<Props> = ({ label, placeholder, required, disabled, options }) => {\n  const id = useId();\n  const { form, state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n  const isMobile = useIsMobile();\n  const [drawerOpen, setDrawerOpen] = useState(false);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n  const isDisabled = disabled || isSubmitting;\n\n  const selectedLabel = options.find(({ value }) => value === state.value)?.label;\n\n  const commandList = (\n    <Command>\n      <CommandInput placeholder={placeholder ?? 'Tìm kiếm…'} />\n      <CommandList>\n        <CommandEmpty>Không tìm thấy kết quả.</CommandEmpty>\n        <CommandGroup>\n          {options.map(option => (\n            <CommandItem\n              key={option.value}\n              value={option.label}\n              onSelect={() => {\n                handleChange(option.value === state.value ? null : option.value);\n                setDrawerOpen(false);\n              }}\n            >\n              {option.label}\n            </CommandItem>\n          ))}\n        </CommandGroup>\n      </CommandList>\n    </Command>\n  );\n\n  if (isMobile) {\n    return (\n      <div className=\"flex flex-col gap-1.5\">\n        {label && (\n          <Label htmlFor={id}>\n            {label}\n            {required && <span className=\"text-danger-strong\">*</span>}\n          </Label>\n        )}\n        <Button\n          id={id}\n          type=\"button\"\n          variant=\"outline\"\n          color=\"muted\"\n          disabled={isDisabled}\n          aria-invalid={_invalid}\n          className={cn(\n            'w-full justify-start font-normal outline-1 outline-border -outline-offset-1',\n            !state.value && 'text-text-positive-muted',\n            _invalid && 'outline-danger bg-danger-bg-subtle'\n          )}\n          onBlur={handleBlur}\n          onClick={() => setDrawerOpen(true)}\n        >\n          {selectedLabel ?? <span className=\"text-text-positive-muted\">{placeholder}</span>}\n        </Button>\n\n        <Drawer open={drawerOpen} onOpenChange={setDrawerOpen} direction=\"bottom\">\n          <DrawerContent>\n            <DrawerHeader>\n              <DrawerTitle>{label ?? placeholder ?? 'Tìm kiếm…'}</DrawerTitle>\n            </DrawerHeader>\n            <div className=\"overflow-y-auto pb-safe-bottom\">{commandList}</div>\n          </DrawerContent>\n        </Drawer>\n\n        {_invalid && <FieldError errors={state.meta.errors} />}\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label htmlFor={id}>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button\n            id={id}\n            variant=\"outline\"\n            color=\"muted\"\n            size=\"lg\"\n            disabled={isDisabled}\n            aria-invalid={_invalid}\n            className={cn(\n              'flex w-full items-center justify-start rounded outline-border font-normal',\n              'hover:bg-transparent',\n              'focus:outline-1 focus:outline-primary-strong focus:ring-4 focus:ring-primary-weak',\n              'data-[state=open]:outline-1 data-[state=open]:outline-primary-strong data-[state=open]:ring-4 data-[state=open]:ring-primary-weak',\n              !state.value && 'text-text-positive-muted'\n            )}\n          >\n            {selectedLabel ?? <span className=\"text-text-positive-muted\">{placeholder}</span>}\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent align=\"start\" side=\"bottom\" className=\"w-[--radix-popover-trigger-width] p-0 rounded\" onBlur={handleBlur}>\n          {commandList}\n        </PopoverContent>\n      </Popover>\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"ivBA0BA,MAAa,GAAwC,CAAE,QAAO,cAAa,WAAU,WAAU,aAAc,CAC3G,IAAM,EAAK,EAAM,EACX,CAAE,OAAM,QAAO,aAAY,gBAAiB,EAAuC,EAEnF,EAAe,EAAS,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EACtE,EAAW,EAAY,EACvB,CAAC,EAAY,GAAiB,EAAS,EAAK,EAE5C,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAC/C,EAAa,GAAY,EAEzB,EAAgB,EAAQ,MAAM,CAAE,WAAY,IAAU,EAAM,KAAK,CAAC,EAAE,MAEpE,EACJ,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAc,YAAa,GAAe,WAAc,CAAA,EACxD,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAA,SAAc,yBAAqC,CAAA,EACnD,EAAC,EAAD,CAAA,SACG,EAAQ,IAAI,GACX,EAAC,EAAD,CAEE,MAAO,EAAO,MACd,aAAgB,CACd,EAAa,EAAO,QAAU,EAAM,MAAQ,KAAO,EAAO,KAAK,EAC/D,EAAc,EAAK,CACrB,WAEC,EAAO,KACG,EARN,EAAO,KAQD,CACd,CACW,CAAA,CACH,CAAA,CAAA,CACN,CAAA,CAAA,EA4CX,OAzCI,EAEA,EAAC,MAAD,CAAK,UAAU,iCAAf,CACG,GACC,EAAC,EAAD,CAAO,QAAS,WAAhB,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,8BAAqB,GAAO,CAAA,CACpD,IAET,EAAC,EAAD,CACM,KACJ,KAAK,SACL,QAAQ,UACR,MAAM,QACN,SAAU,EACV,eAAc,EACd,UAAW,EACT,8EACA,CAAC,EAAM,OAAS,2BAChB,GAAY,oCACd,EACA,OAAQ,EACR,YAAe,EAAc,EAAI,WAEhC,GAAiB,EAAC,OAAD,CAAM,UAAU,oCAA4B,CAAkB,CAAA,CAC1E,CAAA,EAER,EAAC,EAAD,CAAQ,KAAM,EAAY,aAAc,EAAe,UAAU,kBAC/D,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAA,SAAc,GAAS,GAAe,WAAyB,CAAA,CACnD,CAAA,EACd,EAAC,MAAD,CAAK,UAAU,0CAAkC,CAAiB,CAAA,CACrD,CAAA,CAAA,CACT,CAAA,EAEP,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,IAKP,EAAC,MAAD,CAAK,UAAU,iCAAf,CACG,GACC,EAAC,EAAD,CAAO,QAAS,WAAhB,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,8BAAqB,GAAO,CAAA,CACpD,IAET,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAgB,QAAA,YACd,EAAC,EAAD,CACM,KACJ,QAAQ,UACR,MAAM,QACN,KAAK,KACL,SAAU,EACV,eAAc,EACd,UAAW,EACT,4EACA,uBACA,oFACA,oIACA,CAAC,EAAM,OAAS,0BAClB,WAEC,GAAiB,EAAC,OAAD,CAAM,UAAU,oCAA4B,CAAkB,CAAA,CAC1E,CAAA,CACM,CAAA,EAChB,EAAC,EAAD,CAAgB,MAAM,QAAQ,KAAK,SAAS,UAAU,gDAAgD,OAAQ,WAC3G,CACa,CAAA,CACT,CAAA,CAAA,EACR,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}

package/dist/simple-combobox-field-BtmQGEo5.cjs

@@ -0,0 +1,2 @@
+const e=require("./ui/button.cjs"),t=require("./ui/command.cjs"),n=require("./ui/label.cjs"),r=require("./ui/popover.cjs"),i=require("./tanstack-form-DS_ZvRl8.cjs"),a=require("./ui/drawer.cjs"),o=require("./field-BV5twmKA.cjs");let s=require("react"),c=require("@customafk/react-toolkit/utils"),l=require("react/jsx-runtime"),u=require("@customafk/react-toolkit/hooks/useMobile"),d=require("@tanstack/react-form");const f=({label:f,placeholder:p,required:m,disabled:h,options:g})=>{let _=(0,s.useId)(),{form:v,state:y,handleBlur:b,handleChange:x}=i.G(),S=(0,d.useStore)(v.store,({isSubmitting:e})=>e),C=(0,u.useIsMobile)(),[w,T]=(0,s.useState)(!1),E=y.meta.isTouched&&!y.meta.isValid,D=h||S,O=g.find(({value:e})=>e===y.value)?.label,k=(0,l.jsxs)(t.Command,{children:[(0,l.jsx)(t.CommandInput,{placeholder:p??`Tìm kiếm…`}),(0,l.jsxs)(t.CommandList,{children:[(0,l.jsx)(t.CommandEmpty,{children:`Không tìm thấy kết quả.`}),(0,l.jsx)(t.CommandGroup,{children:g.map(e=>(0,l.jsx)(t.CommandItem,{value:e.label,onSelect:()=>{x(e.value===y.value?null:e.value),T(!1)},children:e.label},e.value))})]})]});return C?(0,l.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[f&&(0,l.jsxs)(n.Label,{htmlFor:_,children:[f,m&&(0,l.jsx)(`span`,{className:`text-danger-strong`,children:`*`})]}),(0,l.jsx)(e.Button,{id:_,type:`button`,variant:`outline`,color:`muted`,disabled:D,"aria-invalid":E,className:(0,c.cn)(`w-full justify-start font-normal outline-1 outline-border -outline-offset-1`,!y.value&&`text-text-positive-muted`,E&&`outline-danger bg-danger-bg-subtle`),onBlur:b,onClick:()=>T(!0),children:O??(0,l.jsx)(`span`,{className:`text-text-positive-muted`,children:p})}),(0,l.jsx)(a.Drawer,{open:w,onOpenChange:T,direction:`bottom`,children:(0,l.jsxs)(a.DrawerContent,{children:[(0,l.jsx)(a.DrawerHeader,{children:(0,l.jsx)(a.DrawerTitle,{children:f??p??`Tìm kiếm…`})}),(0,l.jsx)(`div`,{className:`overflow-y-auto pb-safe-bottom`,children:k})]})}),E&&(0,l.jsx)(o.FieldError,{errors:y.meta.errors})]}):(0,l.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[f&&(0,l.jsxs)(n.Label,{htmlFor:_,children:[f,m&&(0,l.jsx)(`span`,{className:`text-danger-strong`,children:`*`})]}),(0,l.jsxs)(r.Popover,{children:[(0,l.jsx)(r.PopoverTrigger,{asChild:!0,children:(0,l.jsx)(e.Button,{id:_,variant:`outline`,color:`muted`,size:`lg`,disabled:D,"aria-invalid":E,className:(0,c.cn)(`flex w-full items-center justify-start rounded outline-border font-normal`,`hover:bg-transparent`,`focus:outline-1 focus:outline-primary-strong focus:ring-4 focus:ring-primary-weak`,`data-[state=open]:outline-1 data-[state=open]:outline-primary-strong data-[state=open]:ring-4 data-[state=open]:ring-primary-weak`,!y.value&&`text-text-positive-muted`),children:O??(0,l.jsx)(`span`,{className:`text-text-positive-muted`,children:p})})}),(0,l.jsx)(r.PopoverContent,{align:`start`,side:`bottom`,className:`w-[--radix-popover-trigger-width] p-0 rounded`,onBlur:b,children:k})]}),E&&(0,l.jsx)(o.FieldError,{errors:y.meta.errors})]})};exports.SimpleComboboxField=f;
+//# sourceMappingURL=simple-combobox-field-BtmQGEo5.cjs.map

package/dist/simple-combobox-field-BtmQGEo5.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"simple-combobox-field-BtmQGEo5.cjs","names":["useTanStackFieldContext","Command","CommandInput","CommandList","CommandEmpty","CommandGroup","CommandItem","Label","Button","Drawer","DrawerContent","DrawerHeader","DrawerTitle","FieldError","Popover","PopoverTrigger","PopoverContent"],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-combobox-field.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useState } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { useIsMobile } from '@customafk/react-toolkit/hooks/useMobile';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command';\nimport { Drawer, DrawerContent, DrawerHeader, DrawerTitle } from '@/components/ui/drawer';\nimport { Label } from '@/components/ui/label';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  placeholder?: string;\n  required?: boolean;\n  disabled?: boolean;\n  options: Array<{ value: string; label: string }>;\n};\n\nexport const SimpleComboboxField: React.FC<Props> = ({ label, placeholder, required, disabled, options }) => {\n  const id = useId();\n  const { form, state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n  const isMobile = useIsMobile();\n  const [drawerOpen, setDrawerOpen] = useState(false);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n  const isDisabled = disabled || isSubmitting;\n\n  const selectedLabel = options.find(({ value }) => value === state.value)?.label;\n\n  const commandList = (\n    <Command>\n      <CommandInput placeholder={placeholder ?? 'Tìm kiếm…'} />\n      <CommandList>\n        <CommandEmpty>Không tìm thấy kết quả.</CommandEmpty>\n        <CommandGroup>\n          {options.map(option => (\n            <CommandItem\n              key={option.value}\n              value={option.label}\n              onSelect={() => {\n                handleChange(option.value === state.value ? null : option.value);\n                setDrawerOpen(false);\n              }}\n            >\n              {option.label}\n            </CommandItem>\n          ))}\n        </CommandGroup>\n      </CommandList>\n    </Command>\n  );\n\n  if (isMobile) {\n    return (\n      <div className=\"flex flex-col gap-1.5\">\n        {label && (\n          <Label htmlFor={id}>\n            {label}\n            {required && <span className=\"text-danger-strong\">*</span>}\n          </Label>\n        )}\n        <Button\n          id={id}\n          type=\"button\"\n          variant=\"outline\"\n          color=\"muted\"\n          disabled={isDisabled}\n          aria-invalid={_invalid}\n          className={cn(\n            'w-full justify-start font-normal outline-1 outline-border -outline-offset-1',\n            !state.value && 'text-text-positive-muted',\n            _invalid && 'outline-danger bg-danger-bg-subtle'\n          )}\n          onBlur={handleBlur}\n          onClick={() => setDrawerOpen(true)}\n        >\n          {selectedLabel ?? <span className=\"text-text-positive-muted\">{placeholder}</span>}\n        </Button>\n\n        <Drawer open={drawerOpen} onOpenChange={setDrawerOpen} direction=\"bottom\">\n          <DrawerContent>\n            <DrawerHeader>\n              <DrawerTitle>{label ?? placeholder ?? 'Tìm kiếm…'}</DrawerTitle>\n            </DrawerHeader>\n            <div className=\"overflow-y-auto pb-safe-bottom\">{commandList}</div>\n          </DrawerContent>\n        </Drawer>\n\n        {_invalid && <FieldError errors={state.meta.errors} />}\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label htmlFor={id}>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button\n            id={id}\n            variant=\"outline\"\n            color=\"muted\"\n            size=\"lg\"\n            disabled={isDisabled}\n            aria-invalid={_invalid}\n            className={cn(\n              'flex w-full items-center justify-start rounded outline-border font-normal',\n              'hover:bg-transparent',\n              'focus:outline-1 focus:outline-primary-strong focus:ring-4 focus:ring-primary-weak',\n              'data-[state=open]:outline-1 data-[state=open]:outline-primary-strong data-[state=open]:ring-4 data-[state=open]:ring-primary-weak',\n              !state.value && 'text-text-positive-muted'\n            )}\n          >\n            {selectedLabel ?? <span className=\"text-text-positive-muted\">{placeholder}</span>}\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent align=\"start\" side=\"bottom\" className=\"w-[--radix-popover-trigger-width] p-0 rounded\" onBlur={handleBlur}>\n          {commandList}\n        </PopoverContent>\n      </Popover>\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/simple-date-field-BXoLb496.mjs

@@ -0,0 +1,2 @@
+import{Button as e}from"./ui/button.mjs";import{Label as t}from"./ui/label.mjs";import{Popover as n,PopoverContent as r,PopoverTrigger as i}from"./ui/popover.mjs";import{G as a}from"./tanstack-form-CM_Hb3JT.mjs";import{Calendar as o}from"./ui/calendar.mjs";import{FieldError as s}from"./field-BKyUqvzh.mjs";import{CalendarDaysIcon as c}from"lucide-react";import{useId as l}from"react";import{cn as u}from"@customafk/react-toolkit/utils";import{jsx as d,jsxs as f}from"react/jsx-runtime";import{format as p}from"@customafk/react-toolkit/date-fns";import{useStore as m}from"@tanstack/react-form";const h=({label:h,placeholder:g,required:_,disabled:v,minDate:y,maxDate:b})=>{let x=l(),{form:S,state:C,handleBlur:w,handleChange:T}=a(),E=m(S.store,({isSubmitting:e})=>e),D=C.meta.isTouched&&!C.meta.isValid;return f(`div`,{className:`flex flex-col gap-1.5`,children:[h&&f(t,{htmlFor:x,children:[h,_&&d(`span`,{className:`text-danger-strong`,children:`*`})]}),f(n,{children:[d(i,{asChild:!0,children:f(e,{id:x,variant:`outline`,color:`muted`,size:`lg`,disabled:v||E,"aria-invalid":D,className:u(`flex w-full items-center justify-between rounded outline-border font-normal`,`hover:bg-transparent`,`focus:outline-1 focus:outline-primary-strong focus:ring-4 focus:ring-primary-weak`,`data-[state=open]:outline-1 data-[state=open]:outline-primary-strong data-[state=open]:ring-4 data-[state=open]:ring-primary-weak`,C.value===null&&`text-text-positive-muted`),children:[d(`span`,{children:C.value?p(C.value,`PPP`):g??`Select date`}),d(c,{strokeWidth:1})]})}),d(r,{align:`start`,side:`bottom`,className:`w-fit p-0 rounded`,onBlur:w,children:d(o,{mode:`single`,selected:C.value??void 0,hidden:{before:y??new Date(1900,0,1),after:b??new Date(2100,11,31)},onSelect:e=>{e&&T(e)}})})]}),D&&d(s,{errors:C.meta.errors})]})};export{h as SimpleDateField};
+//# sourceMappingURL=simple-date-field-BXoLb496.mjs.map

package/dist/simple-date-field-BXoLb496.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"simple-date-field-BXoLb496.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-date-field.tsx"],"sourcesContent":["'use client';\n\nimport { useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\nimport { CalendarDaysIcon } from 'lucide-react';\n\nimport { format } from '@customafk/react-toolkit/date-fns';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { Calendar } from '@/components/ui/calendar';\nimport { Label } from '@/components/ui/label';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  placeholder?: string;\n  required?: boolean;\n  disabled?: boolean;\n  minDate?: Date;\n  maxDate?: Date;\n};\n\nexport const SimpleDateField: React.FC<Props> = ({ label, placeholder, required, disabled, minDate, maxDate }) => {\n  const id = useId();\n  const { form, state, handleBlur, handleChange } = useTanStackFieldContext<Date | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n  const isDisabled = disabled || isSubmitting;\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label htmlFor={id}>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button\n            id={id}\n            variant=\"outline\"\n            color=\"muted\"\n            size=\"lg\"\n            disabled={isDisabled}\n            aria-invalid={_invalid}\n            className={cn(\n              'flex w-full items-center justify-between rounded outline-border font-normal',\n              'hover:bg-transparent',\n              'focus:outline-1 focus:outline-primary-strong focus:ring-4 focus:ring-primary-weak',\n              'data-[state=open]:outline-1 data-[state=open]:outline-primary-strong data-[state=open]:ring-4 data-[state=open]:ring-primary-weak',\n              state.value === null && 'text-text-positive-muted'\n            )}\n          >\n            <span>{state.value ? format(state.value, 'PPP') : (placeholder ?? 'Select date')}</span>\n            <CalendarDaysIcon strokeWidth={1} />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent align=\"start\" side=\"bottom\" className=\"w-fit p-0 rounded\" onBlur={handleBlur}>\n          <Calendar\n            mode=\"single\"\n            selected={state.value ?? undefined}\n            hidden={{\n              before: minDate ?? new Date(1900, 0, 1),\n              after: maxDate ?? new Date(2100, 11, 31),\n            }}\n            onSelect={date => {\n              if (!date) return;\n              handleChange(date);\n            }}\n          />\n        </PopoverContent>\n      </Popover>\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"klBA2BA,MAAa,GAAoC,CAAE,QAAO,cAAa,WAAU,WAAU,UAAS,aAAc,CAChH,IAAM,EAAK,EAAM,EACX,CAAE,OAAM,QAAO,aAAY,gBAAiB,EAAqC,EAEjF,EAAe,EAAS,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAGrD,OACE,EAAC,MAAD,CAAK,UAAU,iCAAf,CACG,GACC,EAAC,EAAD,CAAO,QAAS,WAAhB,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,8BAAqB,GAAO,CAAA,CACpD,IAET,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAgB,QAAA,YACd,EAAC,EAAD,CACM,KACJ,QAAQ,UACR,MAAM,QACN,KAAK,KACL,SAjBS,GAAY,EAkBrB,eAAc,EACd,UAAW,EACT,8EACA,uBACA,oFACA,oIACA,EAAM,QAAU,MAAQ,0BAC1B,WAbF,CAeE,EAAC,OAAD,CAAA,SAAO,EAAM,MAAQ,EAAO,EAAM,MAAO,KAAK,EAAK,GAAe,aAAqB,CAAA,EACvF,EAAC,EAAD,CAAkB,YAAa,CAAI,CAAA,CAC7B,GACM,CAAA,EAChB,EAAC,EAAD,CAAgB,MAAM,QAAQ,KAAK,SAAS,UAAU,oBAAoB,OAAQ,WAChF,EAAC,EAAD,CACE,KAAK,SACL,SAAU,EAAM,OAAS,IAAA,GACzB,OAAQ,CACN,OAAQ,GAAW,IAAI,KAAK,KAAM,EAAG,CAAC,EACtC,MAAO,GAAW,IAAI,KAAK,KAAM,GAAI,EAAE,CACzC,EACA,SAAU,GAAQ,CACX,GACL,EAAa,CAAI,CACnB,CACD,CAAA,CACa,CAAA,CACT,CAAA,CAAA,EACR,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}

package/dist/simple-date-field-LVfNhVJi.cjs

@@ -0,0 +1,2 @@
+const e=require("./ui/button.cjs"),t=require("./ui/label.cjs"),n=require("./ui/popover.cjs"),r=require("./tanstack-form-DS_ZvRl8.cjs"),i=require("./ui/calendar.cjs"),a=require("./field-BV5twmKA.cjs");let o=require("lucide-react"),s=require("react"),c=require("@customafk/react-toolkit/utils"),l=require("react/jsx-runtime"),u=require("@customafk/react-toolkit/date-fns"),d=require("@tanstack/react-form");const f=({label:f,placeholder:p,required:m,disabled:h,minDate:g,maxDate:_})=>{let v=(0,s.useId)(),{form:y,state:b,handleBlur:x,handleChange:S}=r.G(),C=(0,d.useStore)(y.store,({isSubmitting:e})=>e),w=b.meta.isTouched&&!b.meta.isValid;return(0,l.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[f&&(0,l.jsxs)(t.Label,{htmlFor:v,children:[f,m&&(0,l.jsx)(`span`,{className:`text-danger-strong`,children:`*`})]}),(0,l.jsxs)(n.Popover,{children:[(0,l.jsx)(n.PopoverTrigger,{asChild:!0,children:(0,l.jsxs)(e.Button,{id:v,variant:`outline`,color:`muted`,size:`lg`,disabled:h||C,"aria-invalid":w,className:(0,c.cn)(`flex w-full items-center justify-between rounded outline-border font-normal`,`hover:bg-transparent`,`focus:outline-1 focus:outline-primary-strong focus:ring-4 focus:ring-primary-weak`,`data-[state=open]:outline-1 data-[state=open]:outline-primary-strong data-[state=open]:ring-4 data-[state=open]:ring-primary-weak`,b.value===null&&`text-text-positive-muted`),children:[(0,l.jsx)(`span`,{children:b.value?(0,u.format)(b.value,`PPP`):p??`Select date`}),(0,l.jsx)(o.CalendarDaysIcon,{strokeWidth:1})]})}),(0,l.jsx)(n.PopoverContent,{align:`start`,side:`bottom`,className:`w-fit p-0 rounded`,onBlur:x,children:(0,l.jsx)(i.Calendar,{mode:`single`,selected:b.value??void 0,hidden:{before:g??new Date(1900,0,1),after:_??new Date(2100,11,31)},onSelect:e=>{e&&S(e)}})})]}),w&&(0,l.jsx)(a.FieldError,{errors:b.meta.errors})]})};exports.SimpleDateField=f;
+//# sourceMappingURL=simple-date-field-LVfNhVJi.cjs.map

package/dist/simple-date-field-LVfNhVJi.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"simple-date-field-LVfNhVJi.cjs","names":["useTanStackFieldContext","Label","Popover","PopoverTrigger","Button","CalendarDaysIcon","PopoverContent","Calendar","FieldError"],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-date-field.tsx"],"sourcesContent":["'use client';\n\nimport { useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\nimport { CalendarDaysIcon } from 'lucide-react';\n\nimport { format } from '@customafk/react-toolkit/date-fns';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { Calendar } from '@/components/ui/calendar';\nimport { Label } from '@/components/ui/label';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  placeholder?: string;\n  required?: boolean;\n  disabled?: boolean;\n  minDate?: Date;\n  maxDate?: Date;\n};\n\nexport const SimpleDateField: React.FC<Props> = ({ label, placeholder, required, disabled, minDate, maxDate }) => {\n  const id = useId();\n  const { form, state, handleBlur, handleChange } = useTanStackFieldContext<Date | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n  const isDisabled = disabled || isSubmitting;\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label htmlFor={id}>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button\n            id={id}\n            variant=\"outline\"\n            color=\"muted\"\n            size=\"lg\"\n            disabled={isDisabled}\n            aria-invalid={_invalid}\n            className={cn(\n              'flex w-full items-center justify-between rounded outline-border font-normal',\n              'hover:bg-transparent',\n              'focus:outline-1 focus:outline-primary-strong focus:ring-4 focus:ring-primary-weak',\n              'data-[state=open]:outline-1 data-[state=open]:outline-primary-strong data-[state=open]:ring-4 data-[state=open]:ring-primary-weak',\n              state.value === null && 'text-text-positive-muted'\n            )}\n          >\n            <span>{state.value ? format(state.value, 'PPP') : (placeholder ?? 'Select date')}</span>\n            <CalendarDaysIcon strokeWidth={1} />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent align=\"start\" side=\"bottom\" className=\"w-fit p-0 rounded\" onBlur={handleBlur}>\n          <Calendar\n            mode=\"single\"\n            selected={state.value ?? undefined}\n            hidden={{\n              before: minDate ?? new Date(1900, 0, 1),\n              after: maxDate ?? new Date(2100, 11, 31),\n            }}\n            onSelect={date => {\n              if (!date) return;\n              handleChange(date);\n            }}\n          />\n        </PopoverContent>\n      </Popover>\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"qZA2BA,MAAa,GAAoC,CAAE,QAAO,cAAa,WAAU,WAAU,UAAS,aAAc,CAChH,IAAM,GAAA,EAAA,EAAA,MAAA,CAAW,EACX,CAAE,OAAM,QAAO,aAAY,gBAAiBA,EAAAA,EAAqC,EAEjF,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAGrD,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,iCAAf,CACG,IACC,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,QAAS,WAAhB,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,8BAAqB,GAAO,CAAA,CACpD,KAET,EAAA,EAAA,KAAA,CAACC,EAAAA,QAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,QAAA,aACd,EAAA,EAAA,KAAA,CAACC,EAAAA,OAAD,CACM,KACJ,QAAQ,UACR,MAAM,QACN,KAAK,KACL,SAjBS,GAAY,EAkBrB,eAAc,EACd,WAAA,EAAA,EAAA,GAAA,CACE,8EACA,uBACA,oFACA,oIACA,EAAM,QAAU,MAAQ,0BAC1B,WAbF,EAeE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAA,SAAO,EAAM,OAAA,EAAA,EAAA,OAAA,CAAe,EAAM,MAAO,KAAK,EAAK,GAAe,aAAqB,CAAA,GACvF,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAAkB,YAAa,CAAI,CAAA,CAC7B,GACM,CAAA,GAChB,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,MAAM,QAAQ,KAAK,SAAS,UAAU,oBAAoB,OAAQ,YAChF,EAAA,EAAA,IAAA,CAACC,EAAAA,SAAD,CACE,KAAK,SACL,SAAU,EAAM,OAAS,IAAA,GACzB,OAAQ,CACN,OAAQ,GAAW,IAAI,KAAK,KAAM,EAAG,CAAC,EACtC,MAAO,GAAW,IAAI,KAAK,KAAM,GAAI,EAAE,CACzC,EACA,SAAU,GAAQ,CACX,GACL,EAAa,CAAI,CACnB,CACD,CAAA,CACa,CAAA,CACT,CAAA,CAAA,EACR,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}

package/dist/simple-email-field-QVUrm8f7.cjs

@@ -0,0 +1,2 @@
+const e=require("./ui/input.cjs"),t=require("./ui/label.cjs"),n=require("./tanstack-form-DS_ZvRl8.cjs"),r=require("./field-BV5twmKA.cjs");let i=require("lucide-react"),a=require("react"),o=require("@customafk/react-toolkit/utils"),s=require("react/jsx-runtime"),c=require("@tanstack/react-form");const l=({label:l,placeholder:u,required:d,maxLength:f,disabled:p})=>{let m=(0,a.useId)(),{form:h,name:g,state:_,handleBlur:v,handleChange:y}=n.G(),b=(0,c.useStore)(h.store,({isSubmitting:e})=>e),x=_.meta.isTouched&&!_.meta.isValid,S=(0,a.useCallback)(({target:{value:e}})=>{b||f&&e.length>f||y(e||null)},[b,f,y]);return(0,s.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[l&&(0,s.jsxs)(t.Label,{htmlFor:m,children:[l,d&&(0,s.jsx)(`span`,{className:`text-danger-strong`,children:`*`})]}),(0,s.jsxs)(`div`,{className:`relative`,children:[(0,s.jsx)(e.Input,{id:m,name:g,type:`email`,value:_.value??``,"aria-invalid":x,autoComplete:`email`,placeholder:u,disabled:p||b,className:(0,o.cn)(`pl-9`),onBlur:v,onChange:S}),(0,s.jsx)(`div`,{className:`pointer-events-none absolute inset-y-0 left-0 flex size-9 items-center justify-center text-muted`,children:(0,s.jsx)(i.AtSignIcon,{size:14})})]}),x&&(0,s.jsx)(r.FieldError,{errors:_.meta.errors})]})};exports.SimpleEmailField=l;
+//# sourceMappingURL=simple-email-field-QVUrm8f7.cjs.map

package/dist/simple-email-field-QVUrm8f7.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"simple-email-field-QVUrm8f7.cjs","names":["useTanStackFieldContext","Label","Input","AtSignIcon","FieldError"],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-email-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { AtSignIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  placeholder?: string;\n  required?: boolean;\n  maxLength?: number;\n  disabled?: boolean;\n};\n\nexport const SimpleEmailField: React.FC<Props> = ({ label, placeholder, required, maxLength, disabled }) => {\n  const id = useId();\n  const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n\n  const onChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n    ({ target: { value } }) => {\n      if (isSubmitting) return;\n      if (maxLength && value.length > maxLength) return;\n      handleChange(value || null);\n    },\n    [isSubmitting, maxLength, handleChange]\n  );\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label htmlFor={id}>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <div className=\"relative\">\n        <Input\n          id={id}\n          name={name}\n          type=\"email\"\n          value={state.value ?? ''}\n          aria-invalid={_invalid}\n          autoComplete=\"email\"\n          placeholder={placeholder}\n          disabled={disabled || isSubmitting}\n          className={cn('pl-9')}\n          onBlur={handleBlur}\n          onChange={onChange}\n        />\n        <div className=\"pointer-events-none absolute inset-y-0 left-0 flex size-9 items-center justify-center text-muted\">\n          <AtSignIcon size={14} />\n        </div>\n      </div>\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"wSAwBA,MAAa,GAAqC,CAAE,QAAO,cAAa,WAAU,YAAW,cAAe,CAC1G,IAAM,GAAA,EAAA,EAAA,MAAA,CAAW,EACX,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiBA,EAAAA,EAAuC,EAEzF,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAE/C,GAAA,EAAA,EAAA,YAAA,EACH,CAAE,OAAQ,CAAE,YAAc,CACrB,GACA,GAAa,EAAM,OAAS,GAChC,EAAa,GAAS,IAAI,CAC5B,EACA,CAAC,EAAc,EAAW,CAAY,CACxC,EAEA,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,iCAAf,CACG,IACC,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,QAAS,WAAhB,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,8BAAqB,GAAO,CAAA,CACpD,KAET,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,oBAAf,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CACM,KACE,OACN,KAAK,QACL,MAAO,EAAM,OAAS,GACtB,eAAc,EACd,aAAa,QACA,cACb,SAAU,GAAY,EACtB,WAAA,EAAA,EAAA,GAAA,CAAc,MAAM,EACpB,OAAQ,EACE,UACX,CAAA,GACD,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,6GACb,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,KAAM,EAAK,CAAA,CACpB,CAAA,CACF,IACJ,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}

package/dist/simple-email-field-rZZIXu7S.mjs

@@ -0,0 +1,2 @@
+import{Input as e}from"./ui/input.mjs";import{Label as t}from"./ui/label.mjs";import{G as n}from"./tanstack-form-CM_Hb3JT.mjs";import{FieldError as r}from"./field-BKyUqvzh.mjs";import{AtSignIcon as i}from"lucide-react";import{useCallback as a,useId as o}from"react";import{cn as s}from"@customafk/react-toolkit/utils";import{jsx as c,jsxs as l}from"react/jsx-runtime";import{useStore as u}from"@tanstack/react-form";const d=({label:d,placeholder:f,required:p,maxLength:m,disabled:h})=>{let g=o(),{form:_,name:v,state:y,handleBlur:b,handleChange:x}=n(),S=u(_.store,({isSubmitting:e})=>e),C=y.meta.isTouched&&!y.meta.isValid,w=a(({target:{value:e}})=>{S||m&&e.length>m||x(e||null)},[S,m,x]);return l(`div`,{className:`flex flex-col gap-1.5`,children:[d&&l(t,{htmlFor:g,children:[d,p&&c(`span`,{className:`text-danger-strong`,children:`*`})]}),l(`div`,{className:`relative`,children:[c(e,{id:g,name:v,type:`email`,value:y.value??``,"aria-invalid":C,autoComplete:`email`,placeholder:f,disabled:h||S,className:s(`pl-9`),onBlur:b,onChange:w}),c(`div`,{className:`pointer-events-none absolute inset-y-0 left-0 flex size-9 items-center justify-center text-muted`,children:c(i,{size:14})})]}),C&&c(r,{errors:y.meta.errors})]})};export{d as SimpleEmailField};
+//# sourceMappingURL=simple-email-field-rZZIXu7S.mjs.map

package/dist/simple-email-field-rZZIXu7S.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"simple-email-field-rZZIXu7S.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-email-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { AtSignIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  placeholder?: string;\n  required?: boolean;\n  maxLength?: number;\n  disabled?: boolean;\n};\n\nexport const SimpleEmailField: React.FC<Props> = ({ label, placeholder, required, maxLength, disabled }) => {\n  const id = useId();\n  const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n\n  const onChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n    ({ target: { value } }) => {\n      if (isSubmitting) return;\n      if (maxLength && value.length > maxLength) return;\n      handleChange(value || null);\n    },\n    [isSubmitting, maxLength, handleChange]\n  );\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label htmlFor={id}>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <div className=\"relative\">\n        <Input\n          id={id}\n          name={name}\n          type=\"email\"\n          value={state.value ?? ''}\n          aria-invalid={_invalid}\n          autoComplete=\"email\"\n          placeholder={placeholder}\n          disabled={disabled || isSubmitting}\n          className={cn('pl-9')}\n          onBlur={handleBlur}\n          onChange={onChange}\n        />\n        <div className=\"pointer-events-none absolute inset-y-0 left-0 flex size-9 items-center justify-center text-muted\">\n          <AtSignIcon size={14} />\n        </div>\n      </div>\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"gaAwBA,MAAa,GAAqC,CAAE,QAAO,cAAa,WAAU,YAAW,cAAe,CAC1G,IAAM,EAAK,EAAM,EACX,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiB,EAAuC,EAEzF,EAAe,EAAS,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAE/C,EAAW,GACd,CAAE,OAAQ,CAAE,YAAc,CACrB,GACA,GAAa,EAAM,OAAS,GAChC,EAAa,GAAS,IAAI,CAC5B,EACA,CAAC,EAAc,EAAW,CAAY,CACxC,EAEA,OACE,EAAC,MAAD,CAAK,UAAU,iCAAf,CACG,GACC,EAAC,EAAD,CAAO,QAAS,WAAhB,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,8BAAqB,GAAO,CAAA,CACpD,IAET,EAAC,MAAD,CAAK,UAAU,oBAAf,CACE,EAAC,EAAD,CACM,KACE,OACN,KAAK,QACL,MAAO,EAAM,OAAS,GACtB,eAAc,EACd,aAAa,QACA,cACb,SAAU,GAAY,EACtB,UAAW,EAAG,MAAM,EACpB,OAAQ,EACE,UACX,CAAA,EACD,EAAC,MAAD,CAAK,UAAU,4GACb,EAAC,EAAD,CAAY,KAAM,EAAK,CAAA,CACpB,CAAA,CACF,IACJ,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}

package/dist/simple-number-field-P9PTwcs4.cjs

@@ -0,0 +1,2 @@
+const e=require("./ui/label.cjs"),t=require("./tanstack-form-DS_ZvRl8.cjs"),n=require("./field-BV5twmKA.cjs"),r=require("./number-input-kTh9zzr7.cjs");let i=require("react"),a=require("react/jsx-runtime"),o=require("@tanstack/react-form");const s=({label:s,placeholder:c,required:l,unit:u,allowNegative:d,disabled:f})=>{let p=(0,i.useId)(),{form:m,state:h,handleBlur:g,handleChange:_}=t.G(),v=(0,o.useStore)(m.store,({isSubmitting:e})=>e),y=h.meta.isTouched&&!h.meta.isValid,b=(0,i.useCallback)(e=>{v||_(e)},[v,_]);return(0,a.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[s&&(0,a.jsxs)(e.Label,{htmlFor:p,children:[s,l&&(0,a.jsx)(`span`,{className:`text-danger-strong`,children:`*`})]}),(0,a.jsx)(r.t,{id:p,value:h.value,placeholder:c,unitText:u,allowNegative:d,disabled:f||v,onBlur:g,onValueChange:b}),y&&(0,a.jsx)(n.FieldError,{errors:h.meta.errors})]})};exports.SimpleNumberField=s;
+//# sourceMappingURL=simple-number-field-P9PTwcs4.cjs.map

package/dist/simple-number-field-P9PTwcs4.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"simple-number-field-P9PTwcs4.cjs","names":["useTanStackFieldContext","Label","NumberInput","FieldError"],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-number-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { Label } from '@/components/ui/label';\nimport { NumberInput } from '@/components/ui/inputs/number-input';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  placeholder?: string;\n  required?: boolean;\n  unit?: string;\n  allowNegative?: boolean;\n  disabled?: boolean;\n};\n\nexport const SimpleNumberField: React.FC<Props> = ({ label, placeholder, required, unit, allowNegative, disabled }) => {\n  const id = useId();\n  const { form, state, handleBlur, handleChange } = useTanStackFieldContext<number | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n\n  const onValueChange = useCallback(\n    (value: number | null) => {\n      if (isSubmitting) return;\n      handleChange(value);\n    },\n    [isSubmitting, handleChange]\n  );\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label htmlFor={id}>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <NumberInput\n        id={id}\n        value={state.value}\n        placeholder={placeholder}\n        unitText={unit}\n        allowNegative={allowNegative}\n        disabled={disabled || isSubmitting}\n        onBlur={handleBlur}\n        onValueChange={onValueChange}\n      />\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"+OAqBA,MAAa,GAAsC,CAAE,QAAO,cAAa,WAAU,OAAM,gBAAe,cAAe,CACrH,IAAM,GAAA,EAAA,EAAA,MAAA,CAAW,EACX,CAAE,OAAM,QAAO,aAAY,gBAAiBA,EAAAA,EAAuC,EAEnF,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAE/C,GAAA,EAAA,EAAA,YAAA,CACH,GAAyB,CACpB,GACJ,EAAa,CAAK,CACpB,EACA,CAAC,EAAc,CAAY,CAC7B,EAEA,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,iCAAf,CACG,IACC,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,QAAS,WAAhB,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,8BAAqB,GAAO,CAAA,CACpD,KAET,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CACM,KACJ,MAAO,EAAM,MACA,cACb,SAAU,EACK,gBACf,SAAU,GAAY,EACtB,OAAQ,EACO,eAChB,CAAA,EACA,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}

package/dist/simple-number-field-PJAyAOMO.mjs

@@ -0,0 +1,2 @@
+import{Label as e}from"./ui/label.mjs";import{G as t}from"./tanstack-form-CM_Hb3JT.mjs";import{FieldError as n}from"./field-BKyUqvzh.mjs";import{t as r}from"./number-input-CqkegUWs.mjs";import{useCallback as i,useId as a}from"react";import{jsx as o,jsxs as s}from"react/jsx-runtime";import{useStore as c}from"@tanstack/react-form";const l=({label:l,placeholder:u,required:d,unit:f,allowNegative:p,disabled:m})=>{let h=a(),{form:g,state:_,handleBlur:v,handleChange:y}=t(),b=c(g.store,({isSubmitting:e})=>e),x=_.meta.isTouched&&!_.meta.isValid,S=i(e=>{b||y(e)},[b,y]);return s(`div`,{className:`flex flex-col gap-1.5`,children:[l&&s(e,{htmlFor:h,children:[l,d&&o(`span`,{className:`text-danger-strong`,children:`*`})]}),o(r,{id:h,value:_.value,placeholder:u,unitText:f,allowNegative:p,disabled:m||b,onBlur:v,onValueChange:S}),x&&o(n,{errors:_.meta.errors})]})};export{l as SimpleNumberField};
+//# sourceMappingURL=simple-number-field-PJAyAOMO.mjs.map

package/dist/simple-number-field-PJAyAOMO.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"simple-number-field-PJAyAOMO.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-number-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { Label } from '@/components/ui/label';\nimport { NumberInput } from '@/components/ui/inputs/number-input';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  placeholder?: string;\n  required?: boolean;\n  unit?: string;\n  allowNegative?: boolean;\n  disabled?: boolean;\n};\n\nexport const SimpleNumberField: React.FC<Props> = ({ label, placeholder, required, unit, allowNegative, disabled }) => {\n  const id = useId();\n  const { form, state, handleBlur, handleChange } = useTanStackFieldContext<number | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n\n  const onValueChange = useCallback(\n    (value: number | null) => {\n      if (isSubmitting) return;\n      handleChange(value);\n    },\n    [isSubmitting, handleChange]\n  );\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label htmlFor={id}>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <NumberInput\n        id={id}\n        value={state.value}\n        placeholder={placeholder}\n        unitText={unit}\n        allowNegative={allowNegative}\n        disabled={disabled || isSubmitting}\n        onBlur={handleBlur}\n        onValueChange={onValueChange}\n      />\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"2UAqBA,MAAa,GAAsC,CAAE,QAAO,cAAa,WAAU,OAAM,gBAAe,cAAe,CACrH,IAAM,EAAK,EAAM,EACX,CAAE,OAAM,QAAO,aAAY,gBAAiB,EAAuC,EAEnF,EAAe,EAAS,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAE/C,EAAgB,EACnB,GAAyB,CACpB,GACJ,EAAa,CAAK,CACpB,EACA,CAAC,EAAc,CAAY,CAC7B,EAEA,OACE,EAAC,MAAD,CAAK,UAAU,iCAAf,CACG,GACC,EAAC,EAAD,CAAO,QAAS,WAAhB,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,8BAAqB,GAAO,CAAA,CACpD,IAET,EAAC,EAAD,CACM,KACJ,MAAO,EAAM,MACA,cACb,SAAU,EACK,gBACf,SAAU,GAAY,EACtB,OAAQ,EACO,eAChB,CAAA,EACA,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}

package/dist/simple-password-field-BEuFXAsk.mjs

@@ -0,0 +1,2 @@
+import{Input as e}from"./ui/input.mjs";import{Label as t}from"./ui/label.mjs";import{G as n}from"./tanstack-form-CM_Hb3JT.mjs";import{FieldError as r}from"./field-BKyUqvzh.mjs";import{EyeIcon as i,EyeOffIcon as a}from"lucide-react";import{useCallback as o,useId as s,useState as c}from"react";import{jsx as l,jsxs as u}from"react/jsx-runtime";import{useStore as d}from"@tanstack/react-form";const f=({label:f,placeholder:p,required:m,disabled:h})=>{let g=s(),{form:_,name:v,state:y,handleBlur:b,handleChange:x}=n(),S=d(_.store,({isSubmitting:e})=>e),[C,w]=c(!1),T=y.meta.isTouched&&!y.meta.isValid,E=o(()=>w(e=>!e),[]),D=o(({target:{value:e}})=>{S||x(e||null)},[S,x]);return u(`div`,{className:`flex flex-col gap-1.5`,children:[f&&u(t,{htmlFor:g,children:[f,m&&l(`span`,{className:`text-danger-strong`,children:`*`})]}),u(`div`,{className:`relative`,children:[l(e,{id:g,name:v,type:C?`text`:`password`,value:y.value??``,"aria-invalid":T,autoComplete:`current-password`,placeholder:p,disabled:h||S,className:`pr-9`,onBlur:b,onChange:D}),l(`button`,{type:`button`,tabIndex:-1,"aria-label":C?`Ẩn mật khẩu`:`Hiện mật khẩu`,"aria-pressed":C,"aria-controls":g,className:`absolute inset-y-0 right-0 flex size-9 items-center justify-center text-muted outline-none transition-colors hover:text-text-positive focus-visible:text-text-positive disabled:pointer-events-none disabled:opacity-50`,disabled:h||S,onClick:E,children:l(C?a:i,{size:16,"aria-hidden":`true`})})]}),T&&l(r,{errors:y.meta.errors})]})};export{f as SimplePasswordField};
+//# sourceMappingURL=simple-password-field-BEuFXAsk.mjs.map