@customafk/lunas-ui 0.2.83 → 0.2.84

package/dist/simple-combobox-field-CR5Q6Nsd.mjs

@@ -0,0 +1,2 @@
+import{Y as e,rt as t}from"./tanstack-form-Do6xL2kv.mjs";import{Button as n}from"./ui/button.mjs";import{Command as r,CommandEmpty as i,CommandGroup as a,CommandInput as o,CommandItem as s,CommandList as c}from"./ui/command.mjs";import{Popover as l,PopoverContent as u,PopoverTrigger as d}from"./ui/popover.mjs";import{Label as f}from"./ui/label.mjs";import{Drawer as p,DrawerContent as m,DrawerHeader as h,DrawerTitle as g}from"./ui/drawer.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{useStore as S}from"@tanstack/react-form";import{useIsMobile as C}from"@customafk/react-toolkit/hooks/useMobile";const w=({label:w,placeholder:T,required:E,disabled:D,options:O})=>{let k=_(),{form:A,state:j,handleBlur:M,handleChange:N}=t(),P=S(A.store,({isSubmitting:e})=>e),F=C(),[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(r,{children:[b(o,{placeholder:T??`Tìm kiếm…`}),x(c,{children:[b(i,{children:`Không tìm thấy kết quả.`}),b(a,{children:O.map(e=>b(s,{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(f,{htmlFor:k,children:[w,E&&b(`span`,{className:`text-danger-strong`,children:`*`})]}),b(n,{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(p,{open:I,onOpenChange:L,direction:`bottom`,children:x(m,{children:[b(h,{children:b(g,{children:w??T??`Tìm kiếm…`})}),b(`div`,{className:`overflow-y-auto pb-safe-bottom`,children:V})]})}),R&&b(e,{errors:j.meta.errors})]}):x(`div`,{className:`flex flex-col gap-1.5`,children:[w&&x(f,{htmlFor:k,children:[w,E&&b(`span`,{className:`text-danger-strong`,children:`*`})]}),x(l,{children:[b(d,{asChild:!0,children:b(n,{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(u,{align:`start`,side:`bottom`,className:`w-[--radix-popover-trigger-width] p-0 rounded`,onBlur:M,children:V})]}),R&&b(e,{errors:j.meta.errors})]})};export{w as SimpleComboboxField};
+//# sourceMappingURL=simple-combobox-field-CR5Q6Nsd.mjs.map

package/dist/{simple-combobox-field-HCB4A33-.mjs.map → simple-combobox-field-CR5Q6Nsd.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"simple-combobox-field-HCB4A33-.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,EAEC,SAAA,EAAO,KACG,EARN,EAAO,KAQD,CACd,CACW,CAAA,CACH,CAAA,CAAA,CACN,CAAA,CAAA,EA4CX,OAzCI,EAEA,EAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,GACC,EAAC,EAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,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,EAEhC,SAAA,GAAiB,EAAC,OAAD,CAAM,UAAU,2BAA4B,SAAA,CAAkB,CAAA,CAC1E,CAAA,EAER,EAAC,EAAD,CAAQ,KAAM,EAAY,aAAc,EAAe,UAAU,SAC/D,SAAA,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAA,SAAc,GAAS,GAAe,WAAyB,CAAA,CACnD,CAAA,EACd,EAAC,MAAD,CAAK,UAAU,iCAAkC,SAAA,CAAiB,CAAA,CACrD,CAAA,CAAA,CACT,CAAA,EAEP,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,IAKP,EAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,GACC,EAAC,EAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,IAET,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAgB,QAAA,GACd,SAAA,EAAC,EAAD,CACM,KACJ,QAAQ,UACR,MAAM,QACN,KAAK,KACL,SAAU,EACV,eAAc,EACd,UAAW,EACT,4EACA,uBACA,oFACA,oIACA,CAAC,EAAM,OAAS,0BAClB,EAEC,SAAA,GAAiB,EAAC,OAAD,CAAM,UAAU,2BAA4B,SAAA,CAAkB,CAAA,CAC1E,CAAA,CACM,CAAA,EAChB,EAAC,EAAD,CAAgB,MAAM,QAAQ,KAAK,SAAS,UAAU,gDAAgD,OAAQ,EAC3G,SAAA,CACa,CAAA,CACT,CAAA,CAAA,EACR,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}
+{"version":3,"file":"simple-combobox-field-CR5Q6Nsd.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":"usBA0BA,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,EAEC,SAAA,EAAO,KACG,EARN,EAAO,KAQD,CACd,CACW,CAAA,CACH,CAAA,CAAA,CACN,CAAA,CAAA,EA4CX,OAzCI,EAEA,EAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,GACC,EAAC,EAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,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,EAEhC,SAAA,GAAiB,EAAC,OAAD,CAAM,UAAU,2BAA4B,SAAA,CAAkB,CAAA,CAC1E,CAAA,EAER,EAAC,EAAD,CAAQ,KAAM,EAAY,aAAc,EAAe,UAAU,SAC/D,SAAA,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAA,SAAc,GAAS,GAAe,WAAyB,CAAA,CACnD,CAAA,EACd,EAAC,MAAD,CAAK,UAAU,iCAAkC,SAAA,CAAiB,CAAA,CACrD,CAAA,CAAA,CACT,CAAA,EAEP,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,IAKP,EAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,GACC,EAAC,EAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,IAET,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAgB,QAAA,GACd,SAAA,EAAC,EAAD,CACM,KACJ,QAAQ,UACR,MAAM,QACN,KAAK,KACL,SAAU,EACV,eAAc,EACd,UAAW,EACT,4EACA,uBACA,oFACA,oIACA,CAAC,EAAM,OAAS,0BAClB,EAEC,SAAA,GAAiB,EAAC,OAAD,CAAM,UAAU,2BAA4B,SAAA,CAAkB,CAAA,CAC1E,CAAA,CACM,CAAA,EAChB,EAAC,EAAD,CAAgB,MAAM,QAAQ,KAAK,SAAS,UAAU,gDAAgD,OAAQ,EAC3G,SAAA,CACa,CAAA,CACT,CAAA,CAAA,EACR,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}

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

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

package/dist/{simple-date-field-DtxEpEZj.cjs.map → simple-date-field-DUPnGa5d.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"simple-date-field-DtxEpEZj.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,wBAAf,SAAA,CACG,IACC,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,KAET,EAAA,EAAA,KAAA,CAACC,EAAAA,QAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,QAAA,GACd,UAAA,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,EAbF,SAAA,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,EAChF,UAAA,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"}
+{"version":3,"file":"simple-date-field-DUPnGa5d.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":"mXA2BA,MAAa,GAAoC,CAAE,QAAO,cAAa,WAAU,WAAU,UAAS,aAAc,CAChH,IAAM,GAAA,EAAA,EAAA,MAAA,CAAW,EACX,CAAE,OAAM,QAAO,aAAY,gBAAiBA,EAAAA,GAAqC,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,wBAAf,SAAA,CACG,IACC,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,KAET,EAAA,EAAA,KAAA,CAACC,EAAAA,QAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,QAAA,GACd,UAAA,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,EAbF,SAAA,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,EAChF,UAAA,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,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}

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

@@ -0,0 +1,2 @@
+import{Y as e,rt as t}from"./tanstack-form-Do6xL2kv.mjs";import{Button as n}from"./ui/button.mjs";import{Popover as r,PopoverContent as i,PopoverTrigger as a}from"./ui/popover.mjs";import{Label as o}from"./ui/label.mjs";import{Calendar as s}from"./ui/calendar.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}=t(),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(o,{htmlFor:x,children:[h,_&&d(`span`,{className:`text-danger-strong`,children:`*`})]}),f(r,{children:[d(a,{asChild:!0,children:f(n,{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(i,{align:`start`,side:`bottom`,className:`w-fit p-0 rounded`,onBlur:w,children:d(s,{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(e,{errors:C.meta.errors})]})};export{h as SimpleDateField};
+//# sourceMappingURL=simple-date-field-DkhG2o7I.mjs.map

package/dist/{simple-date-field-Dj4bJoji.mjs.map → simple-date-field-DkhG2o7I.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"simple-date-field-Dj4bJoji.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,wBAAf,SAAA,CACG,GACC,EAAC,EAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,IAET,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAgB,QAAA,GACd,SAAA,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,EAbF,SAAA,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,EAChF,SAAA,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"}
+{"version":3,"file":"simple-date-field-DkhG2o7I.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":"wiBA2BA,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,wBAAf,SAAA,CACG,GACC,EAAC,EAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,IAET,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAgB,QAAA,GACd,SAAA,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,EAbF,SAAA,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,EAChF,SAAA,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-email-field-BTYqiFp8.cjs

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

package/dist/{simple-email-field-DK9I_Tc_.cjs.map → simple-email-field-BTYqiFp8.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"simple-email-field-DK9I_Tc_.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,wBAAf,SAAA,CACG,IACC,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,KAET,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,WAAf,SAAA,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,mGACb,UAAA,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"}
+{"version":3,"file":"simple-email-field-BTYqiFp8.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":"sQAwBA,MAAa,GAAqC,CAAE,QAAO,cAAa,WAAU,YAAW,cAAe,CAC1G,IAAM,GAAA,EAAA,EAAA,MAAA,CAAW,EACX,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiBA,EAAAA,GAAuC,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,wBAAf,SAAA,CACG,IACC,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,KAET,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,WAAf,SAAA,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,mGACb,UAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,KAAM,EAAK,CAAA,CACpB,CAAA,CACF,IACJ,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}

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

@@ -0,0 +1,2 @@
+import{Y as e,rt as t}from"./tanstack-form-Do6xL2kv.mjs";import{Input as n}from"./ui/input.mjs";import{Label as r}from"./ui/label.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}=t(),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(r,{htmlFor:g,children:[d,p&&c(`span`,{className:`text-danger-strong`,children:`*`})]}),l(`div`,{className:`relative`,children:[c(n,{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(e,{errors:y.meta.errors})]})};export{d as SimpleEmailField};
+//# sourceMappingURL=simple-email-field-CpxklyKr.mjs.map

package/dist/{simple-email-field-BDyhkmHV.mjs.map → simple-email-field-CpxklyKr.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"simple-email-field-BDyhkmHV.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,wBAAf,SAAA,CACG,GACC,EAAC,EAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,IAET,EAAC,MAAD,CAAK,UAAU,WAAf,SAAA,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,mGACb,SAAA,EAAC,EAAD,CAAY,KAAM,EAAK,CAAA,CACpB,CAAA,CACF,IACJ,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}
+{"version":3,"file":"simple-email-field-CpxklyKr.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":"sXAwBA,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,wBAAf,SAAA,CACG,GACC,EAAC,EAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,IAET,EAAC,MAAD,CAAK,UAAU,WAAf,SAAA,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,mGACb,SAAA,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-CTFyTMgw.cjs

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

package/dist/{simple-number-field-BspqWU-3.cjs.map → simple-number-field-CTFyTMgw.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"simple-number-field-BspqWU-3.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,wBAAf,SAAA,CACG,IACC,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,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"}
+{"version":3,"file":"simple-number-field-CTFyTMgw.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":"6MAqBA,MAAa,GAAsC,CAAE,QAAO,cAAa,WAAU,OAAM,gBAAe,cAAe,CACrH,IAAM,GAAA,EAAA,EAAA,MAAA,CAAW,EACX,CAAE,OAAM,QAAO,aAAY,gBAAiBA,EAAAA,GAAuC,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,wBAAf,SAAA,CACG,IACC,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,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,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}

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

@@ -0,0 +1,2 @@
+import{Y as e,rt as t}from"./tanstack-form-Do6xL2kv.mjs";import{Label as n}from"./ui/label.mjs";import{t as r}from"./number-input-CJcEV9Cg.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(n,{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(e,{errors:_.meta.errors})]})};export{l as SimpleNumberField};
+//# sourceMappingURL=simple-number-field-DuCvwUG9.mjs.map

package/dist/{simple-number-field-hneXMhfJ.mjs.map → simple-number-field-DuCvwUG9.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"simple-number-field-hneXMhfJ.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,wBAAf,SAAA,CACG,GACC,EAAC,EAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,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"}
+{"version":3,"file":"simple-number-field-DuCvwUG9.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":"iSAqBA,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,wBAAf,SAAA,CACG,GACC,EAAC,EAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,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-BaeUvVB1.cjs

@@ -0,0 +1,2 @@
+const e=require("./ui/input.cjs"),t=require("./tanstack-form-BiOihtxs.cjs"),n=require("./ui/label.cjs");let r=require("lucide-react"),i=require("react"),a=require("react/jsx-runtime"),o=require("@tanstack/react-form");const s=({label:s,placeholder:c,required:l,disabled:u})=>{let d=(0,i.useId)(),{form:f,name:p,state:m,handleBlur:h,handleChange:g}=t.rt(),_=(0,o.useStore)(f.store,({isSubmitting:e})=>e),[v,y]=(0,i.useState)(!1),b=m.meta.isTouched&&!m.meta.isValid,x=(0,i.useCallback)(()=>y(e=>!e),[]),S=(0,i.useCallback)(({target:{value:e}})=>{_||g(e||null)},[_,g]);return(0,a.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[s&&(0,a.jsxs)(n.Label,{htmlFor:d,children:[s,l&&(0,a.jsx)(`span`,{className:`text-danger-strong`,children:`*`})]}),(0,a.jsxs)(`div`,{className:`relative`,children:[(0,a.jsx)(e.Input,{id:d,name:p,type:v?`text`:`password`,value:m.value??``,"aria-invalid":b,autoComplete:`current-password`,placeholder:c,disabled:u||_,className:`pr-9`,onBlur:h,onChange:S}),(0,a.jsx)(`button`,{type:`button`,tabIndex:-1,"aria-label":v?`Ẩn mật khẩu`:`Hiện mật khẩu`,"aria-pressed":v,"aria-controls":d,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:u||_,onClick:x,children:v?(0,a.jsx)(r.EyeOffIcon,{size:16,"aria-hidden":`true`}):(0,a.jsx)(r.EyeIcon,{size:16,"aria-hidden":`true`})})]}),b&&(0,a.jsx)(t.Y,{errors:m.meta.errors})]})};exports.SimplePasswordField=s;
+//# sourceMappingURL=simple-password-field-BaeUvVB1.cjs.map

package/dist/{simple-password-field-BEEcleom.cjs.map → simple-password-field-BaeUvVB1.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"simple-password-field-BEEcleom.cjs","names":["useTanStackFieldContext","Label","Input","EyeOffIcon","EyeIcon","FieldError"],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-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';\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  disabled?: boolean;\n};\n\nexport const SimplePasswordField: React.FC<Props> = ({ label, placeholder, required, 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 [isVisible, setIsVisible] = useState(false);\n\n  const _invalid = 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    <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={isVisible ? 'text' : 'password'}\n          value={state.value ?? ''}\n          aria-invalid={_invalid}\n          autoComplete=\"current-password\"\n          placeholder={placeholder}\n          disabled={disabled || isSubmitting}\n          className=\"pr-9\"\n          onBlur={handleBlur}\n          onChange={onChange}\n        />\n        <button\n          type=\"button\"\n          tabIndex={-1}\n          aria-label={isVisible ? 'Ẩn mật khẩu' : 'Hiện mật khẩu'}\n          aria-pressed={isVisible}\n          aria-controls={id}\n          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\"\n          disabled={disabled || isSubmitting}\n          onClick={toggleVisibility}\n        >\n          {isVisible ? <EyeOffIcon size={16} aria-hidden=\"true\" /> : <EyeIcon size={16} aria-hidden=\"true\" />}\n        </button>\n      </div>\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"4PAqBA,MAAa,GAAwC,CAAE,QAAO,cAAa,WAAU,cAAe,CAClG,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,CAAC,EAAW,IAAA,EAAA,EAAA,SAAA,CAAyB,EAAK,EAE1C,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAE/C,GAAA,EAAA,EAAA,YAAA,KAAqC,EAAa,GAAQ,CAAC,CAAI,EAAG,CAAC,CAAC,EAEpE,GAAA,EAAA,EAAA,YAAA,EACH,CAAE,OAAQ,CAAE,YAAc,CACrB,GACJ,EAAa,GAAS,IAAI,CAC5B,EACA,CAAC,EAAc,CAAY,CAC7B,EAEA,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,IACC,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,KAET,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,WAAf,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CACM,KACE,OACN,KAAM,EAAY,OAAS,WAC3B,MAAO,EAAM,OAAS,GACtB,eAAc,EACd,aAAa,mBACA,cACb,SAAU,GAAY,EACtB,UAAU,OACV,OAAQ,EACE,UACX,CAAA,GACD,EAAA,EAAA,IAAA,CAAC,SAAD,CACE,KAAK,SACL,SAAU,GACV,aAAY,EAAY,cAAgB,gBACxC,eAAc,EACd,gBAAe,EACf,UAAU,0NACV,SAAU,GAAY,EACtB,QAAS,EAER,SAAA,GAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,KAAM,GAAI,cAAY,MAAQ,CAAA,GAAI,EAAA,EAAA,IAAA,CAACC,EAAAA,QAAD,CAAS,KAAM,GAAI,cAAY,MAAQ,CAAA,CAC5F,CAAA,CACL,IACJ,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}
+{"version":3,"file":"simple-password-field-BaeUvVB1.cjs","names":["useTanStackFieldContext","Label","Input","EyeOffIcon","EyeIcon","FieldError"],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-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';\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  disabled?: boolean;\n};\n\nexport const SimplePasswordField: React.FC<Props> = ({ label, placeholder, required, 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 [isVisible, setIsVisible] = useState(false);\n\n  const _invalid = 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    <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={isVisible ? 'text' : 'password'}\n          value={state.value ?? ''}\n          aria-invalid={_invalid}\n          autoComplete=\"current-password\"\n          placeholder={placeholder}\n          disabled={disabled || isSubmitting}\n          className=\"pr-9\"\n          onBlur={handleBlur}\n          onChange={onChange}\n        />\n        <button\n          type=\"button\"\n          tabIndex={-1}\n          aria-label={isVisible ? 'Ẩn mật khẩu' : 'Hiện mật khẩu'}\n          aria-pressed={isVisible}\n          aria-controls={id}\n          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\"\n          disabled={disabled || isSubmitting}\n          onClick={toggleVisibility}\n        >\n          {isVisible ? <EyeOffIcon size={16} aria-hidden=\"true\" /> : <EyeIcon size={16} aria-hidden=\"true\" />}\n        </button>\n      </div>\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"0NAqBA,MAAa,GAAwC,CAAE,QAAO,cAAa,WAAU,cAAe,CAClG,IAAM,GAAA,EAAA,EAAA,MAAA,CAAW,EACX,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiBA,EAAAA,GAAuC,EAEzF,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,CAAC,EAAW,IAAA,EAAA,EAAA,SAAA,CAAyB,EAAK,EAE1C,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAE/C,GAAA,EAAA,EAAA,YAAA,KAAqC,EAAa,GAAQ,CAAC,CAAI,EAAG,CAAC,CAAC,EAEpE,GAAA,EAAA,EAAA,YAAA,EACH,CAAE,OAAQ,CAAE,YAAc,CACrB,GACJ,EAAa,GAAS,IAAI,CAC5B,EACA,CAAC,EAAc,CAAY,CAC7B,EAEA,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,IACC,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,KAET,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,WAAf,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CACM,KACE,OACN,KAAM,EAAY,OAAS,WAC3B,MAAO,EAAM,OAAS,GACtB,eAAc,EACd,aAAa,mBACA,cACb,SAAU,GAAY,EACtB,UAAU,OACV,OAAQ,EACE,UACX,CAAA,GACD,EAAA,EAAA,IAAA,CAAC,SAAD,CACE,KAAK,SACL,SAAU,GACV,aAAY,EAAY,cAAgB,gBACxC,eAAc,EACd,gBAAe,EACf,UAAU,0NACV,SAAU,GAAY,EACtB,QAAS,EAER,SAAA,GAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,KAAM,GAAI,cAAY,MAAQ,CAAA,GAAI,EAAA,EAAA,IAAA,CAACC,EAAAA,QAAD,CAAS,KAAM,GAAI,cAAY,MAAQ,CAAA,CAC5F,CAAA,CACL,IACJ,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}

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

@@ -0,0 +1,2 @@
+import{Y as e,rt as t}from"./tanstack-form-Do6xL2kv.mjs";import{Input as n}from"./ui/input.mjs";import{Label as r}from"./ui/label.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}=t(),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(r,{htmlFor:g,children:[f,m&&l(`span`,{className:`text-danger-strong`,children:`*`})]}),u(`div`,{className:`relative`,children:[l(n,{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(e,{errors:y.meta.errors})]})};export{f as SimplePasswordField};
+//# sourceMappingURL=simple-password-field-Cu_JvDEE.mjs.map

package/dist/{simple-password-field-vsLRHDk4.mjs.map → simple-password-field-Cu_JvDEE.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"simple-password-field-vsLRHDk4.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-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';\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  disabled?: boolean;\n};\n\nexport const SimplePasswordField: React.FC<Props> = ({ label, placeholder, required, 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 [isVisible, setIsVisible] = useState(false);\n\n  const _invalid = 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    <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={isVisible ? 'text' : 'password'}\n          value={state.value ?? ''}\n          aria-invalid={_invalid}\n          autoComplete=\"current-password\"\n          placeholder={placeholder}\n          disabled={disabled || isSubmitting}\n          className=\"pr-9\"\n          onBlur={handleBlur}\n          onChange={onChange}\n        />\n        <button\n          type=\"button\"\n          tabIndex={-1}\n          aria-label={isVisible ? 'Ẩn mật khẩu' : 'Hiện mật khẩu'}\n          aria-pressed={isVisible}\n          aria-controls={id}\n          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\"\n          disabled={disabled || isSubmitting}\n          onClick={toggleVisibility}\n        >\n          {isVisible ? <EyeOffIcon size={16} aria-hidden=\"true\" /> : <EyeIcon size={16} aria-hidden=\"true\" />}\n        </button>\n      </div>\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"uYAqBA,MAAa,GAAwC,CAAE,QAAO,cAAa,WAAU,cAAe,CAClG,IAAM,EAAK,EAAM,EACX,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiB,EAAuC,EAEzF,EAAe,EAAS,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,CAAC,EAAW,GAAgB,EAAS,EAAK,EAE1C,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAE/C,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,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,GACC,EAAC,EAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,IAET,EAAC,MAAD,CAAK,UAAU,WAAf,SAAA,CACE,EAAC,EAAD,CACM,KACE,OACN,KAAM,EAAY,OAAS,WAC3B,MAAO,EAAM,OAAS,GACtB,eAAc,EACd,aAAa,mBACA,cACb,SAAU,GAAY,EACtB,UAAU,OACV,OAAQ,EACE,UACX,CAAA,EACD,EAAC,SAAD,CACE,KAAK,SACL,SAAU,GACV,aAAY,EAAY,cAAgB,gBACxC,eAAc,EACd,gBAAe,EACf,UAAU,0NACV,SAAU,GAAY,EACtB,QAAS,EAER,SAAY,EAAZ,EAAa,EAA8C,EAA/C,CAAY,KAAM,GAAI,cAAY,MAAQ,CAA2C,CAC5F,CAAA,CACL,IACJ,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}
+{"version":3,"file":"simple-password-field-Cu_JvDEE.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-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';\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  disabled?: boolean;\n};\n\nexport const SimplePasswordField: React.FC<Props> = ({ label, placeholder, required, 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 [isVisible, setIsVisible] = useState(false);\n\n  const _invalid = 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    <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={isVisible ? 'text' : 'password'}\n          value={state.value ?? ''}\n          aria-invalid={_invalid}\n          autoComplete=\"current-password\"\n          placeholder={placeholder}\n          disabled={disabled || isSubmitting}\n          className=\"pr-9\"\n          onBlur={handleBlur}\n          onChange={onChange}\n        />\n        <button\n          type=\"button\"\n          tabIndex={-1}\n          aria-label={isVisible ? 'Ẩn mật khẩu' : 'Hiện mật khẩu'}\n          aria-pressed={isVisible}\n          aria-controls={id}\n          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\"\n          disabled={disabled || isSubmitting}\n          onClick={toggleVisibility}\n        >\n          {isVisible ? <EyeOffIcon size={16} aria-hidden=\"true\" /> : <EyeIcon size={16} aria-hidden=\"true\" />}\n        </button>\n      </div>\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"6VAqBA,MAAa,GAAwC,CAAE,QAAO,cAAa,WAAU,cAAe,CAClG,IAAM,EAAK,EAAM,EACX,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiB,EAAuC,EAEzF,EAAe,EAAS,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,CAAC,EAAW,GAAgB,EAAS,EAAK,EAE1C,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAE/C,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,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,GACC,EAAC,EAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,IAET,EAAC,MAAD,CAAK,UAAU,WAAf,SAAA,CACE,EAAC,EAAD,CACM,KACE,OACN,KAAM,EAAY,OAAS,WAC3B,MAAO,EAAM,OAAS,GACtB,eAAc,EACd,aAAa,mBACA,cACb,SAAU,GAAY,EACtB,UAAU,OACV,OAAQ,EACE,UACX,CAAA,EACD,EAAC,SAAD,CACE,KAAK,SACL,SAAU,GACV,aAAY,EAAY,cAAgB,gBACxC,eAAc,EACd,gBAAe,EACf,UAAU,0NACV,SAAU,GAAY,EACtB,QAAS,EAER,SAAY,EAAZ,EAAa,EAA8C,EAA/C,CAAY,KAAM,GAAI,cAAY,MAAQ,CAA2C,CAC5F,CAAA,CACL,IACJ,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}

package/dist/simple-radio-group-field-DiU4eQ_c.cjs

@@ -0,0 +1,2 @@
+const e=require("./tanstack-form-BiOihtxs.cjs"),t=require("./ui/label.cjs"),n=require("./ui/radio-group.cjs");let r=require("react/jsx-runtime"),i=require("@tanstack/react-form");const a=({label:a,required:o,disabled:s,options:c,orientation:l=`vertical`})=>{let{form:u,name:d,state:f,handleBlur:p,handleChange:m}=e.rt(),h=(0,i.useStore)(u.store,({isSubmitting:e})=>e),g=f.meta.isTouched&&!f.meta.isValid,_=s||h;return(0,r.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[a&&(0,r.jsxs)(t.Label,{children:[a,o&&(0,r.jsx)(`span`,{className:`text-danger-strong`,children:`*`})]}),(0,r.jsx)(n.RadioGroup,{name:d,value:f.value??``,disabled:_,"aria-invalid":g,className:l===`horizontal`?`flex flex-row flex-wrap gap-x-4 gap-y-2`:`flex flex-col gap-2`,onValueChange:m,onBlur:p,children:c.map(e=>(0,r.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,r.jsx)(n.RadioGroupItem,{id:`${d}-${e.value}`,value:e.value}),(0,r.jsx)(t.Label,{htmlFor:`${d}-${e.value}`,className:`cursor-pointer font-normal`,children:e.label})]},e.value))}),g&&(0,r.jsx)(e.Y,{errors:f.meta.errors})]})};exports.SimpleRadioGroupField=a;
+//# sourceMappingURL=simple-radio-group-field-DiU4eQ_c.cjs.map

package/dist/{simple-radio-group-field-Wm8xB0fN.cjs.map → simple-radio-group-field-DiU4eQ_c.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"simple-radio-group-field-Wm8xB0fN.cjs","names":["useTanStackFieldContext","Label","RadioGroup","RadioGroupItem","FieldError"],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-radio-group-field.tsx"],"sourcesContent":["'use client';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { Label } from '@/components/ui/label';\nimport { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  required?: boolean;\n  disabled?: boolean;\n  options: Array<{ value: string; label: string }>;\n  orientation?: 'horizontal' | 'vertical';\n};\n\nexport const SimpleRadioGroupField: React.FC<Props> = ({ label, required, disabled, options, orientation = 'vertical' }) => {\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  const isDisabled = disabled || isSubmitting;\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <RadioGroup\n        name={name}\n        value={state.value ?? ''}\n        disabled={isDisabled}\n        aria-invalid={_invalid}\n        className={orientation === 'horizontal' ? 'flex flex-row flex-wrap gap-x-4 gap-y-2' : 'flex flex-col gap-2'}\n        onValueChange={handleChange}\n        onBlur={handleBlur}\n      >\n        {options.map(option => (\n          <div key={option.value} className=\"flex items-center gap-2\">\n            <RadioGroupItem id={`${name}-${option.value}`} value={option.value} />\n            <Label htmlFor={`${name}-${option.value}`} className=\"cursor-pointer font-normal\">\n              {option.label}\n            </Label>\n          </div>\n        ))}\n      </RadioGroup>\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"qNAkBA,MAAa,GAA0C,CAAE,QAAO,WAAU,WAAU,UAAS,cAAc,cAAiB,CAC1H,GAAM,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,QAC/C,EAAa,GAAY,EAE/B,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,IACC,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAA,SAAA,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,CAAA,CAAA,GAET,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CACQ,OACN,MAAO,EAAM,OAAS,GACtB,SAAU,EACV,eAAc,EACd,UAAW,IAAgB,aAAe,0CAA4C,sBACtF,cAAe,EACf,OAAQ,EAEP,SAAA,EAAQ,IAAI,IACX,EAAA,EAAA,KAAA,CAAC,MAAD,CAAwB,UAAU,0BAAlC,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,GAAI,GAAG,EAAK,GAAG,EAAO,QAAS,MAAO,EAAO,KAAQ,CAAA,GACrE,EAAA,EAAA,IAAA,CAACF,EAAAA,MAAD,CAAO,QAAS,GAAG,EAAK,GAAG,EAAO,QAAS,UAAU,6BAClD,SAAA,EAAO,KACH,CAAA,CACJ,CALK,EAAA,EAAO,KAKZ,CACN,CACS,CAAA,EACX,IAAY,EAAA,EAAA,IAAA,CAACG,EAAAA,WAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}
+{"version":3,"file":"simple-radio-group-field-DiU4eQ_c.cjs","names":["useTanStackFieldContext","Label","RadioGroup","RadioGroupItem","FieldError"],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-radio-group-field.tsx"],"sourcesContent":["'use client';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { Label } from '@/components/ui/label';\nimport { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  required?: boolean;\n  disabled?: boolean;\n  options: Array<{ value: string; label: string }>;\n  orientation?: 'horizontal' | 'vertical';\n};\n\nexport const SimpleRadioGroupField: React.FC<Props> = ({ label, required, disabled, options, orientation = 'vertical' }) => {\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  const isDisabled = disabled || isSubmitting;\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <RadioGroup\n        name={name}\n        value={state.value ?? ''}\n        disabled={isDisabled}\n        aria-invalid={_invalid}\n        className={orientation === 'horizontal' ? 'flex flex-row flex-wrap gap-x-4 gap-y-2' : 'flex flex-col gap-2'}\n        onValueChange={handleChange}\n        onBlur={handleBlur}\n      >\n        {options.map(option => (\n          <div key={option.value} className=\"flex items-center gap-2\">\n            <RadioGroupItem id={`${name}-${option.value}`} value={option.value} />\n            <Label htmlFor={`${name}-${option.value}`} className=\"cursor-pointer font-normal\">\n              {option.label}\n            </Label>\n          </div>\n        ))}\n      </RadioGroup>\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"mLAkBA,MAAa,GAA0C,CAAE,QAAO,WAAU,WAAU,UAAS,cAAc,cAAiB,CAC1H,GAAM,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiBA,EAAAA,GAAuC,EAEzF,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAC/C,EAAa,GAAY,EAE/B,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,IACC,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAA,SAAA,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,CAAA,CAAA,GAET,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CACQ,OACN,MAAO,EAAM,OAAS,GACtB,SAAU,EACV,eAAc,EACd,UAAW,IAAgB,aAAe,0CAA4C,sBACtF,cAAe,EACf,OAAQ,EAEP,SAAA,EAAQ,IAAI,IACX,EAAA,EAAA,KAAA,CAAC,MAAD,CAAwB,UAAU,0BAAlC,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,GAAI,GAAG,EAAK,GAAG,EAAO,QAAS,MAAO,EAAO,KAAQ,CAAA,GACrE,EAAA,EAAA,IAAA,CAACF,EAAAA,MAAD,CAAO,QAAS,GAAG,EAAK,GAAG,EAAO,QAAS,UAAU,6BAClD,SAAA,EAAO,KACH,CAAA,CACJ,CALK,EAAA,EAAO,KAKZ,CACN,CACS,CAAA,EACX,IAAY,EAAA,EAAA,IAAA,CAACG,EAAAA,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}

package/dist/simple-radio-group-field-RJ_cEsxK.mjs

@@ -0,0 +1,2 @@
+import{Y as e,rt as t}from"./tanstack-form-Do6xL2kv.mjs";import{Label as n}from"./ui/label.mjs";import{RadioGroup as r,RadioGroupItem as i}from"./ui/radio-group.mjs";import{jsx as a,jsxs as o}from"react/jsx-runtime";import{useStore as s}from"@tanstack/react-form";const c=({label:c,required:l,disabled:u,options:d,orientation:f=`vertical`})=>{let{form:p,name:m,state:h,handleBlur:g,handleChange:_}=t(),v=s(p.store,({isSubmitting:e})=>e),y=h.meta.isTouched&&!h.meta.isValid,b=u||v;return o(`div`,{className:`flex flex-col gap-1.5`,children:[c&&o(n,{children:[c,l&&a(`span`,{className:`text-danger-strong`,children:`*`})]}),a(r,{name:m,value:h.value??``,disabled:b,"aria-invalid":y,className:f===`horizontal`?`flex flex-row flex-wrap gap-x-4 gap-y-2`:`flex flex-col gap-2`,onValueChange:_,onBlur:g,children:d.map(e=>o(`div`,{className:`flex items-center gap-2`,children:[a(i,{id:`${m}-${e.value}`,value:e.value}),a(n,{htmlFor:`${m}-${e.value}`,className:`cursor-pointer font-normal`,children:e.label})]},e.value))}),y&&a(e,{errors:h.meta.errors})]})};export{c as SimpleRadioGroupField};
+//# sourceMappingURL=simple-radio-group-field-RJ_cEsxK.mjs.map

package/dist/{simple-radio-group-field-BURm_BSA.mjs.map → simple-radio-group-field-RJ_cEsxK.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"simple-radio-group-field-BURm_BSA.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-radio-group-field.tsx"],"sourcesContent":["'use client';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { Label } from '@/components/ui/label';\nimport { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  required?: boolean;\n  disabled?: boolean;\n  options: Array<{ value: string; label: string }>;\n  orientation?: 'horizontal' | 'vertical';\n};\n\nexport const SimpleRadioGroupField: React.FC<Props> = ({ label, required, disabled, options, orientation = 'vertical' }) => {\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  const isDisabled = disabled || isSubmitting;\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <RadioGroup\n        name={name}\n        value={state.value ?? ''}\n        disabled={isDisabled}\n        aria-invalid={_invalid}\n        className={orientation === 'horizontal' ? 'flex flex-row flex-wrap gap-x-4 gap-y-2' : 'flex flex-col gap-2'}\n        onValueChange={handleChange}\n        onBlur={handleBlur}\n      >\n        {options.map(option => (\n          <div key={option.value} className=\"flex items-center gap-2\">\n            <RadioGroupItem id={`${name}-${option.value}`} value={option.value} />\n            <Label htmlFor={`${name}-${option.value}`} className=\"cursor-pointer font-normal\">\n              {option.label}\n            </Label>\n          </div>\n        ))}\n      </RadioGroup>\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"kTAkBA,MAAa,GAA0C,CAAE,QAAO,WAAU,WAAU,UAAS,cAAc,cAAiB,CAC1H,GAAM,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiB,EAAuC,EAEzF,EAAe,EAAS,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAC/C,EAAa,GAAY,EAE/B,OACE,EAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,GACC,EAAC,EAAD,CAAA,SAAA,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,CAAA,CAAA,EAET,EAAC,EAAD,CACQ,OACN,MAAO,EAAM,OAAS,GACtB,SAAU,EACV,eAAc,EACd,UAAW,IAAgB,aAAe,0CAA4C,sBACtF,cAAe,EACf,OAAQ,EAEP,SAAA,EAAQ,IAAI,GACX,EAAC,MAAD,CAAwB,UAAU,0BAAlC,SAAA,CACE,EAAC,EAAD,CAAgB,GAAI,GAAG,EAAK,GAAG,EAAO,QAAS,MAAO,EAAO,KAAQ,CAAA,EACrE,EAAC,EAAD,CAAO,QAAS,GAAG,EAAK,GAAG,EAAO,QAAS,UAAU,6BAClD,SAAA,EAAO,KACH,CAAA,CACJ,CALK,EAAA,EAAO,KAKZ,CACN,CACS,CAAA,EACX,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}
+{"version":3,"file":"simple-radio-group-field-RJ_cEsxK.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-radio-group-field.tsx"],"sourcesContent":["'use client';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { Label } from '@/components/ui/label';\nimport { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  required?: boolean;\n  disabled?: boolean;\n  options: Array<{ value: string; label: string }>;\n  orientation?: 'horizontal' | 'vertical';\n};\n\nexport const SimpleRadioGroupField: React.FC<Props> = ({ label, required, disabled, options, orientation = 'vertical' }) => {\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  const isDisabled = disabled || isSubmitting;\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <RadioGroup\n        name={name}\n        value={state.value ?? ''}\n        disabled={isDisabled}\n        aria-invalid={_invalid}\n        className={orientation === 'horizontal' ? 'flex flex-row flex-wrap gap-x-4 gap-y-2' : 'flex flex-col gap-2'}\n        onValueChange={handleChange}\n        onBlur={handleBlur}\n      >\n        {options.map(option => (\n          <div key={option.value} className=\"flex items-center gap-2\">\n            <RadioGroupItem id={`${name}-${option.value}`} value={option.value} />\n            <Label htmlFor={`${name}-${option.value}`} className=\"cursor-pointer font-normal\">\n              {option.label}\n            </Label>\n          </div>\n        ))}\n      </RadioGroup>\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"wQAkBA,MAAa,GAA0C,CAAE,QAAO,WAAU,WAAU,UAAS,cAAc,cAAiB,CAC1H,GAAM,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiB,EAAuC,EAEzF,EAAe,EAAS,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAC/C,EAAa,GAAY,EAE/B,OACE,EAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,GACC,EAAC,EAAD,CAAA,SAAA,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,CAAA,CAAA,EAET,EAAC,EAAD,CACQ,OACN,MAAO,EAAM,OAAS,GACtB,SAAU,EACV,eAAc,EACd,UAAW,IAAgB,aAAe,0CAA4C,sBACtF,cAAe,EACf,OAAQ,EAEP,SAAA,EAAQ,IAAI,GACX,EAAC,MAAD,CAAwB,UAAU,0BAAlC,SAAA,CACE,EAAC,EAAD,CAAgB,GAAI,GAAG,EAAK,GAAG,EAAO,QAAS,MAAO,EAAO,KAAQ,CAAA,EACrE,EAAC,EAAD,CAAO,QAAS,GAAG,EAAK,GAAG,EAAO,QAAS,UAAU,6BAClD,SAAA,EAAO,KACH,CAAA,CACJ,CALK,EAAA,EAAO,KAKZ,CACN,CACS,CAAA,EACX,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}

package/dist/simple-select-field-B3uEUqvQ.mjs

@@ -0,0 +1,2 @@
+import{Y as e,rt as t}from"./tanstack-form-Do6xL2kv.mjs";import{Button as n}from"./ui/button.mjs";import{Label as r}from"./ui/label.mjs";import{Drawer as i,DrawerClose as a,DrawerContent as o,DrawerHeader as s,DrawerTitle as c}from"./ui/drawer.mjs";import{Select as l,SelectContent as u,SelectItem as d,SelectTrigger as f,SelectValue as p}from"./ui/select.mjs";import{PackagePlusIcon as m}from"lucide-react";import{useId as h,useState as g}from"react";import{cn as _}from"@customafk/react-toolkit/utils";import{jsx as v,jsxs as y}from"react/jsx-runtime";import{useIsMobile as b}from"@customafk/react-toolkit/hooks/useMobile";const x=({label:x,placeholder:S,required:C,options:w})=>{let T=h(),{state:E,handleBlur:D,handleChange:O}=t(),k=b(),[A,j]=g(!1),M=E.meta.isTouched&&!E.meta.isValid,N=w.find(e=>e.value===E.value)?.label;return k?y(`div`,{className:`flex flex-col gap-1.5`,children:[x&&y(r,{htmlFor:T,children:[x,C&&v(`span`,{className:`text-danger-strong`,children:`*`})]}),v(n,{id:T,type:`button`,variant:`outline`,color:`muted`,className:_(`w-full justify-start font-normal outline-1 outline-border -outline-offset-1`,!E.value&&`text-text-positive-muted`,M&&`outline-danger bg-danger-bg-subtle`),"aria-invalid":M,onBlur:D,onClick:()=>j(!0),children:N??v(`span`,{className:`text-text-positive-muted`,children:S})}),v(i,{open:A,onOpenChange:j,direction:`bottom`,children:y(o,{children:[v(s,{children:v(c,{children:x??S??`Select an option`})}),v(`div`,{className:`flex flex-col overflow-y-auto pb-safe-bottom`,children:w.length>0?w.map(e=>v(a,{asChild:!0,children:v(`button`,{type:`button`,className:_(`flex w-full items-center px-4 py-3 text-left text-sm transition-colors`,`hover:bg-muted-muted active:bg-muted-muted`,E.value===e.value&&`bg-primary-bg-subtle font-medium text-primary`),onClick:()=>{O(e.value),j(!1)},children:e.label})},e.value)):y(`div`,{className:`flex items-center justify-center gap-x-2 px-4 py-8 text-center text-sm text-text-positive-weak`,children:[v(m,{strokeWidth:1}),`No options available`]})})]})}),M&&v(e,{errors:E.meta.errors})]}):y(`div`,{className:`flex flex-col gap-1.5`,children:[x&&y(r,{htmlFor:T,children:[x,C&&v(`span`,{className:`text-danger-strong`,children:`*`})]}),y(l,{value:E.value??``,onValueChange:O,children:[v(f,{id:T,"aria-invalid":M?`true`:void 0,onBlur:D,children:v(p,{placeholder:S})}),v(u,{children:w.length>0?w.map(e=>v(d,{value:e.value,children:e.label},e.value)):y(`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:[v(m,{strokeWidth:1}),`No options available`]})})]}),M&&v(e,{errors:E.meta.errors})]})};export{x as SimpleSelectField};
+//# sourceMappingURL=simple-select-field-B3uEUqvQ.mjs.map

package/dist/{simple-select-field-8cY51U4d.mjs.map → simple-select-field-B3uEUqvQ.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"simple-select-field-8cY51U4d.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-select-field.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useState } from 'react';\n\nimport { PackagePlusIcon } from 'lucide-react';\n\nimport { useIsMobile } from '@customafk/react-toolkit/hooks/useMobile';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { Drawer, DrawerClose, DrawerContent, DrawerHeader, DrawerTitle } from '@/components/ui/drawer';\nimport { Label } from '@/components/ui/label';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  placeholder?: string;\n  required?: boolean;\n  options: Array<{ value: string; label: string }>;\n};\n\nexport const SimpleSelectField: React.FC<Props> = ({ label, placeholder, required, options }) => {\n  const id = useId();\n  const { state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n  const isMobile = useIsMobile();\n  const [drawerOpen, setDrawerOpen] = useState(false);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n  const selectedLabel = options.find(o => o.value === state.value)?.label;\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          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          aria-invalid={_invalid}\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 ?? 'Select an option'}</DrawerTitle>\n            </DrawerHeader>\n            <div className=\"flex flex-col overflow-y-auto pb-safe-bottom\">\n              {options.length > 0 ? (\n                options.map(option => (\n                  <DrawerClose 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                        state.value === option.value && 'bg-primary-bg-subtle font-medium text-primary'\n                      )}\n                      onClick={() => {\n                        handleChange(option.value);\n                        setDrawerOpen(false);\n                      }}\n                    >\n                      {option.label}\n                    </button>\n                  </DrawerClose>\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                  No options available\n                </div>\n              )}\n            </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      <Select value={state.value ?? ''} onValueChange={handleChange}>\n        <SelectTrigger id={id} aria-invalid={_invalid ? 'true' : undefined} onBlur={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      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"2pBAwBA,MAAa,GAAsC,CAAE,QAAO,cAAa,WAAU,aAAc,CAC/F,IAAM,EAAK,EAAM,EACX,CAAE,QAAO,aAAY,gBAAiB,EAAuC,EAC7E,EAAW,EAAY,EACvB,CAAC,EAAY,GAAiB,EAAS,EAAK,EAE5C,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAC/C,EAAgB,EAAQ,KAAK,GAAK,EAAE,QAAU,EAAM,KAAK,CAAC,EAAE,MAoElE,OAlEI,EAEA,EAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,GACC,EAAC,EAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,IAET,EAAC,EAAD,CACM,KACJ,KAAK,SACL,QAAQ,UACR,MAAM,QACN,UAAW,EACT,8EACA,CAAC,EAAM,OAAS,2BAChB,GAAY,oCACd,EACA,eAAc,EACd,OAAQ,EACR,YAAe,EAAc,EAAI,EAEhC,SAAA,GAAiB,EAAC,OAAD,CAAM,UAAU,2BAA4B,SAAA,CAAkB,CAAA,CAC1E,CAAA,EAER,EAAC,EAAD,CAAQ,KAAM,EAAY,aAAc,EAAe,UAAU,SAC/D,SAAA,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAA,SAAc,GAAS,GAAe,kBAAgC,CAAA,CAC1D,CAAA,EACd,EAAC,MAAD,CAAK,UAAU,+CACZ,SAAA,EAAQ,OAAS,EAChB,EAAQ,IAAI,GACV,EAAC,EAAD,CAAgC,QAAA,GAC9B,SAAA,EAAC,SAAD,CACE,KAAK,SACL,UAAW,EACT,yEACA,6CACA,EAAM,QAAU,EAAO,OAAS,+CAClC,EACA,YAAe,CACb,EAAa,EAAO,KAAK,EACzB,EAAc,EAAK,CACrB,EAEC,SAAA,EAAO,KACF,CAAA,CACG,EAfK,EAAO,KAeZ,CACd,EAED,EAAC,MAAD,CAAK,UAAU,iGAAf,SAAA,CACE,EAAC,EAAD,CAAiB,YAAa,CAAI,CAAA,EAAC,sBAEhC,GAEJ,CAAA,CACQ,CAAA,CAAA,CACT,CAAA,EAEP,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,IAKP,EAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,GACC,EAAC,EAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,IAET,EAAC,EAAD,CAAQ,MAAO,EAAM,OAAS,GAAI,cAAe,EAAjD,SAAA,CACE,EAAC,EAAD,CAAmB,KAAI,eAAc,EAAW,OAAS,IAAA,GAAW,OAAQ,EAC1E,SAAA,EAAC,EAAD,CAA0B,aAAc,CAAA,CAC3B,CAAA,EACf,EAAC,EAAD,CAAA,SACG,EAAQ,OAAS,EAChB,EAAQ,IAAI,GACV,EAAC,EAAD,CAA+B,MAAO,EAAO,MAC1C,SAAA,EAAO,KACE,EAFK,EAAO,KAEZ,CACb,EAED,EAAC,MAAD,CAAK,UAAU,+IAAf,SAAA,CACE,EAAC,EAAD,CAAiB,YAAa,CAAI,CAAA,EAAC,sBAEhC,CAEM,CAAA,CAAA,CAAA,CACT,IACP,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}
+{"version":3,"file":"simple-select-field-B3uEUqvQ.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-select-field.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useState } from 'react';\n\nimport { PackagePlusIcon } from 'lucide-react';\n\nimport { useIsMobile } from '@customafk/react-toolkit/hooks/useMobile';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { Drawer, DrawerClose, DrawerContent, DrawerHeader, DrawerTitle } from '@/components/ui/drawer';\nimport { Label } from '@/components/ui/label';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  placeholder?: string;\n  required?: boolean;\n  options: Array<{ value: string; label: string }>;\n};\n\nexport const SimpleSelectField: React.FC<Props> = ({ label, placeholder, required, options }) => {\n  const id = useId();\n  const { state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n  const isMobile = useIsMobile();\n  const [drawerOpen, setDrawerOpen] = useState(false);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n  const selectedLabel = options.find(o => o.value === state.value)?.label;\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          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          aria-invalid={_invalid}\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 ?? 'Select an option'}</DrawerTitle>\n            </DrawerHeader>\n            <div className=\"flex flex-col overflow-y-auto pb-safe-bottom\">\n              {options.length > 0 ? (\n                options.map(option => (\n                  <DrawerClose 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                        state.value === option.value && 'bg-primary-bg-subtle font-medium text-primary'\n                      )}\n                      onClick={() => {\n                        handleChange(option.value);\n                        setDrawerOpen(false);\n                      }}\n                    >\n                      {option.label}\n                    </button>\n                  </DrawerClose>\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                  No options available\n                </div>\n              )}\n            </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      <Select value={state.value ?? ''} onValueChange={handleChange}>\n        <SelectTrigger id={id} aria-invalid={_invalid ? 'true' : undefined} onBlur={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      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"inBAwBA,MAAa,GAAsC,CAAE,QAAO,cAAa,WAAU,aAAc,CAC/F,IAAM,EAAK,EAAM,EACX,CAAE,QAAO,aAAY,gBAAiB,EAAuC,EAC7E,EAAW,EAAY,EACvB,CAAC,EAAY,GAAiB,EAAS,EAAK,EAE5C,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAC/C,EAAgB,EAAQ,KAAK,GAAK,EAAE,QAAU,EAAM,KAAK,CAAC,EAAE,MAoElE,OAlEI,EAEA,EAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,GACC,EAAC,EAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,IAET,EAAC,EAAD,CACM,KACJ,KAAK,SACL,QAAQ,UACR,MAAM,QACN,UAAW,EACT,8EACA,CAAC,EAAM,OAAS,2BAChB,GAAY,oCACd,EACA,eAAc,EACd,OAAQ,EACR,YAAe,EAAc,EAAI,EAEhC,SAAA,GAAiB,EAAC,OAAD,CAAM,UAAU,2BAA4B,SAAA,CAAkB,CAAA,CAC1E,CAAA,EAER,EAAC,EAAD,CAAQ,KAAM,EAAY,aAAc,EAAe,UAAU,SAC/D,SAAA,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAA,SAAc,GAAS,GAAe,kBAAgC,CAAA,CAC1D,CAAA,EACd,EAAC,MAAD,CAAK,UAAU,+CACZ,SAAA,EAAQ,OAAS,EAChB,EAAQ,IAAI,GACV,EAAC,EAAD,CAAgC,QAAA,GAC9B,SAAA,EAAC,SAAD,CACE,KAAK,SACL,UAAW,EACT,yEACA,6CACA,EAAM,QAAU,EAAO,OAAS,+CAClC,EACA,YAAe,CACb,EAAa,EAAO,KAAK,EACzB,EAAc,EAAK,CACrB,EAEC,SAAA,EAAO,KACF,CAAA,CACG,EAfK,EAAO,KAeZ,CACd,EAED,EAAC,MAAD,CAAK,UAAU,iGAAf,SAAA,CACE,EAAC,EAAD,CAAiB,YAAa,CAAI,CAAA,EAAC,sBAEhC,GAEJ,CAAA,CACQ,CAAA,CAAA,CACT,CAAA,EAEP,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,IAKP,EAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,GACC,EAAC,EAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,IAET,EAAC,EAAD,CAAQ,MAAO,EAAM,OAAS,GAAI,cAAe,EAAjD,SAAA,CACE,EAAC,EAAD,CAAmB,KAAI,eAAc,EAAW,OAAS,IAAA,GAAW,OAAQ,EAC1E,SAAA,EAAC,EAAD,CAA0B,aAAc,CAAA,CAC3B,CAAA,EACf,EAAC,EAAD,CAAA,SACG,EAAQ,OAAS,EAChB,EAAQ,IAAI,GACV,EAAC,EAAD,CAA+B,MAAO,EAAO,MAC1C,SAAA,EAAO,KACE,EAFK,EAAO,KAEZ,CACb,EAED,EAAC,MAAD,CAAK,UAAU,+IAAf,SAAA,CACE,EAAC,EAAD,CAAiB,YAAa,CAAI,CAAA,EAAC,sBAEhC,CAEM,CAAA,CAAA,CAAA,CACT,IACP,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}

package/dist/simple-select-field-C8vmeHbL.cjs

@@ -0,0 +1,2 @@
+const e=require("./ui/button.cjs"),t=require("./tanstack-form-BiOihtxs.cjs"),n=require("./ui/label.cjs"),r=require("./ui/drawer.cjs"),i=require("./ui/select.cjs");let a=require("lucide-react"),o=require("react"),s=require("@customafk/react-toolkit/utils"),c=require("react/jsx-runtime"),l=require("@customafk/react-toolkit/hooks/useMobile");const u=({label:u,placeholder:d,required:f,options:p})=>{let m=(0,o.useId)(),{state:h,handleBlur:g,handleChange:_}=t.rt(),v=(0,l.useIsMobile)(),[y,b]=(0,o.useState)(!1),x=h.meta.isTouched&&!h.meta.isValid,S=p.find(e=>e.value===h.value)?.label;return v?(0,c.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[u&&(0,c.jsxs)(n.Label,{htmlFor:m,children:[u,f&&(0,c.jsx)(`span`,{className:`text-danger-strong`,children:`*`})]}),(0,c.jsx)(e.Button,{id:m,type:`button`,variant:`outline`,color:`muted`,className:(0,s.cn)(`w-full justify-start font-normal outline-1 outline-border -outline-offset-1`,!h.value&&`text-text-positive-muted`,x&&`outline-danger bg-danger-bg-subtle`),"aria-invalid":x,onBlur:g,onClick:()=>b(!0),children:S??(0,c.jsx)(`span`,{className:`text-text-positive-muted`,children:d})}),(0,c.jsx)(r.Drawer,{open:y,onOpenChange:b,direction:`bottom`,children:(0,c.jsxs)(r.DrawerContent,{children:[(0,c.jsx)(r.DrawerHeader,{children:(0,c.jsx)(r.DrawerTitle,{children:u??d??`Select an option`})}),(0,c.jsx)(`div`,{className:`flex flex-col overflow-y-auto pb-safe-bottom`,children:p.length>0?p.map(e=>(0,c.jsx)(r.DrawerClose,{asChild:!0,children:(0,c.jsx)(`button`,{type:`button`,className:(0,s.cn)(`flex w-full items-center px-4 py-3 text-left text-sm transition-colors`,`hover:bg-muted-muted active:bg-muted-muted`,h.value===e.value&&`bg-primary-bg-subtle font-medium text-primary`),onClick:()=>{_(e.value),b(!1)},children:e.label})},e.value)):(0,c.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,c.jsx)(a.PackagePlusIcon,{strokeWidth:1}),`No options available`]})})]})}),x&&(0,c.jsx)(t.Y,{errors:h.meta.errors})]}):(0,c.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[u&&(0,c.jsxs)(n.Label,{htmlFor:m,children:[u,f&&(0,c.jsx)(`span`,{className:`text-danger-strong`,children:`*`})]}),(0,c.jsxs)(i.Select,{value:h.value??``,onValueChange:_,children:[(0,c.jsx)(i.SelectTrigger,{id:m,"aria-invalid":x?`true`:void 0,onBlur:g,children:(0,c.jsx)(i.SelectValue,{placeholder:d})}),(0,c.jsx)(i.SelectContent,{children:p.length>0?p.map(e=>(0,c.jsx)(i.SelectItem,{value:e.value,children:e.label},e.value)):(0,c.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,c.jsx)(a.PackagePlusIcon,{strokeWidth:1}),`No options available`]})})]}),x&&(0,c.jsx)(t.Y,{errors:h.meta.errors})]})};exports.SimpleSelectField=u;
+//# sourceMappingURL=simple-select-field-C8vmeHbL.cjs.map

package/dist/{simple-select-field-QQ65caBf.cjs.map → simple-select-field-C8vmeHbL.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"simple-select-field-QQ65caBf.cjs","names":["useTanStackFieldContext","Label","Button","Drawer","DrawerContent","DrawerHeader","DrawerTitle","DrawerClose","PackagePlusIcon","FieldError","Select","SelectTrigger","SelectValue","SelectContent","SelectItem"],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-select-field.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useState } from 'react';\n\nimport { PackagePlusIcon } from 'lucide-react';\n\nimport { useIsMobile } from '@customafk/react-toolkit/hooks/useMobile';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { Drawer, DrawerClose, DrawerContent, DrawerHeader, DrawerTitle } from '@/components/ui/drawer';\nimport { Label } from '@/components/ui/label';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  placeholder?: string;\n  required?: boolean;\n  options: Array<{ value: string; label: string }>;\n};\n\nexport const SimpleSelectField: React.FC<Props> = ({ label, placeholder, required, options }) => {\n  const id = useId();\n  const { state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n  const isMobile = useIsMobile();\n  const [drawerOpen, setDrawerOpen] = useState(false);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n  const selectedLabel = options.find(o => o.value === state.value)?.label;\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          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          aria-invalid={_invalid}\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 ?? 'Select an option'}</DrawerTitle>\n            </DrawerHeader>\n            <div className=\"flex flex-col overflow-y-auto pb-safe-bottom\">\n              {options.length > 0 ? (\n                options.map(option => (\n                  <DrawerClose 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                        state.value === option.value && 'bg-primary-bg-subtle font-medium text-primary'\n                      )}\n                      onClick={() => {\n                        handleChange(option.value);\n                        setDrawerOpen(false);\n                      }}\n                    >\n                      {option.label}\n                    </button>\n                  </DrawerClose>\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                  No options available\n                </div>\n              )}\n            </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      <Select value={state.value ?? ''} onValueChange={handleChange}>\n        <SelectTrigger id={id} aria-invalid={_invalid ? 'true' : undefined} onBlur={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      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"uXAwBA,MAAa,GAAsC,CAAE,QAAO,cAAa,WAAU,aAAc,CAC/F,IAAM,GAAA,EAAA,EAAA,MAAA,CAAW,EACX,CAAE,QAAO,aAAY,gBAAiBA,EAAAA,EAAuC,EAC7E,GAAA,EAAA,EAAA,YAAA,CAAuB,EACvB,CAAC,EAAY,IAAA,EAAA,EAAA,SAAA,CAA0B,EAAK,EAE5C,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAC/C,EAAgB,EAAQ,KAAK,GAAK,EAAE,QAAU,EAAM,KAAK,CAAC,EAAE,MAoElE,OAlEI,GAEA,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,IACC,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,KAET,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CACM,KACJ,KAAK,SACL,QAAQ,UACR,MAAM,QACN,WAAA,EAAA,EAAA,GAAA,CACE,8EACA,CAAC,EAAM,OAAS,2BAChB,GAAY,oCACd,EACA,eAAc,EACd,OAAQ,EACR,YAAe,EAAc,EAAI,EAEhC,SAAA,IAAiB,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,2BAA4B,SAAA,CAAkB,CAAA,CAC1E,CAAA,GAER,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CAAQ,KAAM,EAAY,aAAc,EAAe,UAAU,SAC/D,UAAA,EAAA,EAAA,KAAA,CAACC,EAAAA,cAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CAAA,UACE,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAAA,SAAc,GAAS,GAAe,kBAAgC,CAAA,CAC1D,CAAA,GACd,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,+CACZ,SAAA,EAAQ,OAAS,EAChB,EAAQ,IAAI,IACV,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAAgC,QAAA,GAC9B,UAAA,EAAA,EAAA,IAAA,CAAC,SAAD,CACE,KAAK,SACL,WAAA,EAAA,EAAA,GAAA,CACE,yEACA,6CACA,EAAM,QAAU,EAAO,OAAS,+CAClC,EACA,YAAe,CACb,EAAa,EAAO,KAAK,EACzB,EAAc,EAAK,CACrB,EAEC,SAAA,EAAO,KACF,CAAA,CACG,EAfK,EAAO,KAeZ,CACd,GAED,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,iGAAf,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,gBAAD,CAAiB,YAAa,CAAI,CAAA,EAAC,sBAEhC,GAEJ,CAAA,CACQ,CAAA,CAAA,CACT,CAAA,EAEP,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,KAKP,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,IACC,EAAA,EAAA,KAAA,CAACR,EAAAA,MAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,KAET,EAAA,EAAA,KAAA,CAACS,EAAAA,OAAD,CAAQ,MAAO,EAAM,OAAS,GAAI,cAAe,EAAjD,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,cAAD,CAAmB,KAAI,eAAc,EAAW,OAAS,IAAA,GAAW,OAAQ,EAC1E,UAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAA0B,aAAc,CAAA,CAC3B,CAAA,GACf,EAAA,EAAA,IAAA,CAACC,EAAAA,cAAD,CAAA,SACG,EAAQ,OAAS,EAChB,EAAQ,IAAI,IACV,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAA+B,MAAO,EAAO,MAC1C,SAAA,EAAO,KACE,EAFK,EAAO,KAEZ,CACb,GAED,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,+IAAf,SAAA,EACE,EAAA,EAAA,IAAA,CAACN,EAAAA,gBAAD,CAAiB,YAAa,CAAI,CAAA,EAAC,sBAEhC,CAEM,CAAA,CAAA,CAAA,CACT,IACP,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}
+{"version":3,"file":"simple-select-field-C8vmeHbL.cjs","names":["useTanStackFieldContext","Label","Button","Drawer","DrawerContent","DrawerHeader","DrawerTitle","DrawerClose","PackagePlusIcon","FieldError","Select","SelectTrigger","SelectValue","SelectContent","SelectItem"],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-select-field.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useState } from 'react';\n\nimport { PackagePlusIcon } from 'lucide-react';\n\nimport { useIsMobile } from '@customafk/react-toolkit/hooks/useMobile';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { Drawer, DrawerClose, DrawerContent, DrawerHeader, DrawerTitle } from '@/components/ui/drawer';\nimport { Label } from '@/components/ui/label';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  placeholder?: string;\n  required?: boolean;\n  options: Array<{ value: string; label: string }>;\n};\n\nexport const SimpleSelectField: React.FC<Props> = ({ label, placeholder, required, options }) => {\n  const id = useId();\n  const { state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n  const isMobile = useIsMobile();\n  const [drawerOpen, setDrawerOpen] = useState(false);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n  const selectedLabel = options.find(o => o.value === state.value)?.label;\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          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          aria-invalid={_invalid}\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 ?? 'Select an option'}</DrawerTitle>\n            </DrawerHeader>\n            <div className=\"flex flex-col overflow-y-auto pb-safe-bottom\">\n              {options.length > 0 ? (\n                options.map(option => (\n                  <DrawerClose 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                        state.value === option.value && 'bg-primary-bg-subtle font-medium text-primary'\n                      )}\n                      onClick={() => {\n                        handleChange(option.value);\n                        setDrawerOpen(false);\n                      }}\n                    >\n                      {option.label}\n                    </button>\n                  </DrawerClose>\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                  No options available\n                </div>\n              )}\n            </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      <Select value={state.value ?? ''} onValueChange={handleChange}>\n        <SelectTrigger id={id} aria-invalid={_invalid ? 'true' : undefined} onBlur={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      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"qVAwBA,MAAa,GAAsC,CAAE,QAAO,cAAa,WAAU,aAAc,CAC/F,IAAM,GAAA,EAAA,EAAA,MAAA,CAAW,EACX,CAAE,QAAO,aAAY,gBAAiBA,EAAAA,GAAuC,EAC7E,GAAA,EAAA,EAAA,YAAA,CAAuB,EACvB,CAAC,EAAY,IAAA,EAAA,EAAA,SAAA,CAA0B,EAAK,EAE5C,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAC/C,EAAgB,EAAQ,KAAK,GAAK,EAAE,QAAU,EAAM,KAAK,CAAC,EAAE,MAoElE,OAlEI,GAEA,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,IACC,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,KAET,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CACM,KACJ,KAAK,SACL,QAAQ,UACR,MAAM,QACN,WAAA,EAAA,EAAA,GAAA,CACE,8EACA,CAAC,EAAM,OAAS,2BAChB,GAAY,oCACd,EACA,eAAc,EACd,OAAQ,EACR,YAAe,EAAc,EAAI,EAEhC,SAAA,IAAiB,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,2BAA4B,SAAA,CAAkB,CAAA,CAC1E,CAAA,GAER,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CAAQ,KAAM,EAAY,aAAc,EAAe,UAAU,SAC/D,UAAA,EAAA,EAAA,KAAA,CAACC,EAAAA,cAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CAAA,UACE,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAAA,SAAc,GAAS,GAAe,kBAAgC,CAAA,CAC1D,CAAA,GACd,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,+CACZ,SAAA,EAAQ,OAAS,EAChB,EAAQ,IAAI,IACV,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAAgC,QAAA,GAC9B,UAAA,EAAA,EAAA,IAAA,CAAC,SAAD,CACE,KAAK,SACL,WAAA,EAAA,EAAA,GAAA,CACE,yEACA,6CACA,EAAM,QAAU,EAAO,OAAS,+CAClC,EACA,YAAe,CACb,EAAa,EAAO,KAAK,EACzB,EAAc,EAAK,CACrB,EAEC,SAAA,EAAO,KACF,CAAA,CACG,EAfK,EAAO,KAeZ,CACd,GAED,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,iGAAf,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,gBAAD,CAAiB,YAAa,CAAI,CAAA,EAAC,sBAEhC,GAEJ,CAAA,CACQ,CAAA,CAAA,CACT,CAAA,EAEP,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,KAKP,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,IACC,EAAA,EAAA,KAAA,CAACR,EAAAA,MAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,KAET,EAAA,EAAA,KAAA,CAACS,EAAAA,OAAD,CAAQ,MAAO,EAAM,OAAS,GAAI,cAAe,EAAjD,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,cAAD,CAAmB,KAAI,eAAc,EAAW,OAAS,IAAA,GAAW,OAAQ,EAC1E,UAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAA0B,aAAc,CAAA,CAC3B,CAAA,GACf,EAAA,EAAA,IAAA,CAACC,EAAAA,cAAD,CAAA,SACG,EAAQ,OAAS,EAChB,EAAQ,IAAI,IACV,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAA+B,MAAO,EAAO,MAC1C,SAAA,EAAO,KACE,EAFK,EAAO,KAEZ,CACb,GAED,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,+IAAf,SAAA,EACE,EAAA,EAAA,IAAA,CAACN,EAAAA,gBAAD,CAAiB,YAAa,CAAI,CAAA,EAAC,sBAEhC,CAEM,CAAA,CAAA,CAAA,CACT,IACP,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}

package/dist/simple-text-field-BEoQmd1b.mjs

@@ -0,0 +1,2 @@
+import{Y as e,rt as t}from"./tanstack-form-Do6xL2kv.mjs";import{Input as n}from"./ui/input.mjs";import{Label as r}from"./ui/label.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,maxLength:f,disabled:p})=>{let m=a(),{form:h,name:g,state:_,handleBlur:v,handleChange:y}=t(),b=c(h.store,({isSubmitting:e})=>e),x=_.meta.isTouched&&!_.meta.isValid,S=i(({target:{value:e}})=>{b||f&&e.length>f||y(e||null)},[b,f,y]);return s(`div`,{className:`flex flex-col gap-1.5`,children:[l&&s(r,{htmlFor:m,children:[l,d&&o(`span`,{className:`text-danger-strong`,children:`*`})]}),o(n,{id:m,name:g,value:_.value??``,"aria-invalid":x,placeholder:u,autoComplete:`off`,disabled:p||b,onBlur:v,onChange:S}),x&&o(e,{errors:_.meta.errors})]})};export{l as SimpleTextField};
+//# sourceMappingURL=simple-text-field-BEoQmd1b.mjs.map

package/dist/{simple-text-field-DK72_OA_.mjs.map → simple-text-field-BEoQmd1b.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"simple-text-field-DK72_OA_.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-text-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\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\nimport type { SimpleTextFieldProps as Props } from '../../types';\n\nexport const SimpleTextField: 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      <Input\n        id={id}\n        name={name}\n        value={state.value ?? ''}\n        aria-invalid={_invalid}\n        placeholder={placeholder}\n        autoComplete=\"off\"\n        disabled={disabled || isSubmitting}\n        onBlur={handleBlur}\n        onChange={onChange}\n      />\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"kUAcA,MAAa,GAAoC,CAAE,QAAO,cAAa,WAAU,YAAW,cAAe,CACzG,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,wBAAf,SAAA,CACG,GACC,EAAC,EAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,IAET,EAAC,EAAD,CACM,KACE,OACN,MAAO,EAAM,OAAS,GACtB,eAAc,EACD,cACb,aAAa,MACb,SAAU,GAAY,EACtB,OAAQ,EACE,UACX,CAAA,EACA,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}
+{"version":3,"file":"simple-text-field-BEoQmd1b.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-text-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\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\nimport type { SimpleTextFieldProps as Props } from '../../types';\n\nexport const SimpleTextField: 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      <Input\n        id={id}\n        name={name}\n        value={state.value ?? ''}\n        aria-invalid={_invalid}\n        placeholder={placeholder}\n        autoComplete=\"off\"\n        disabled={disabled || isSubmitting}\n        onBlur={handleBlur}\n        onChange={onChange}\n      />\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"wRAcA,MAAa,GAAoC,CAAE,QAAO,cAAa,WAAU,YAAW,cAAe,CACzG,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,wBAAf,SAAA,CACG,GACC,EAAC,EAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,IAET,EAAC,EAAD,CACM,KACE,OACN,MAAO,EAAM,OAAS,GACtB,eAAc,EACD,cACb,aAAa,MACb,SAAU,GAAY,EACtB,OAAQ,EACE,UACX,CAAA,EACA,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}

package/dist/simple-text-field-zFJt_99J.cjs

@@ -0,0 +1,2 @@
+const e=require("./ui/input.cjs"),t=require("./tanstack-form-BiOihtxs.cjs"),n=require("./ui/label.cjs");let r=require("react"),i=require("react/jsx-runtime"),a=require("@tanstack/react-form");const o=({label:o,placeholder:s,required:c,maxLength:l,disabled:u})=>{let d=(0,r.useId)(),{form:f,name:p,state:m,handleBlur:h,handleChange:g}=t.rt(),_=(0,a.useStore)(f.store,({isSubmitting:e})=>e),v=m.meta.isTouched&&!m.meta.isValid,y=(0,r.useCallback)(({target:{value:e}})=>{_||l&&e.length>l||g(e||null)},[_,l,g]);return(0,i.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[o&&(0,i.jsxs)(n.Label,{htmlFor:d,children:[o,c&&(0,i.jsx)(`span`,{className:`text-danger-strong`,children:`*`})]}),(0,i.jsx)(e.Input,{id:d,name:p,value:m.value??``,"aria-invalid":v,placeholder:s,autoComplete:`off`,disabled:u||_,onBlur:h,onChange:y}),v&&(0,i.jsx)(t.Y,{errors:m.meta.errors})]})};exports.SimpleTextField=o;
+//# sourceMappingURL=simple-text-field-zFJt_99J.cjs.map

package/dist/{simple-text-field-BHkCPiE5.cjs.map → simple-text-field-zFJt_99J.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"simple-text-field-BHkCPiE5.cjs","names":["useTanStackFieldContext","Label","Input","FieldError"],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-text-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\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\nimport type { SimpleTextFieldProps as Props } from '../../types';\n\nexport const SimpleTextField: 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      <Input\n        id={id}\n        name={name}\n        value={state.value ?? ''}\n        aria-invalid={_invalid}\n        placeholder={placeholder}\n        autoComplete=\"off\"\n        disabled={disabled || isSubmitting}\n        onBlur={handleBlur}\n        onChange={onChange}\n      />\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"kOAcA,MAAa,GAAoC,CAAE,QAAO,cAAa,WAAU,YAAW,cAAe,CACzG,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,wBAAf,SAAA,CACG,IACC,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,KAET,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CACM,KACE,OACN,MAAO,EAAM,OAAS,GACtB,eAAc,EACD,cACb,aAAa,MACb,SAAU,GAAY,EACtB,OAAQ,EACE,UACX,CAAA,EACA,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}
+{"version":3,"file":"simple-text-field-zFJt_99J.cjs","names":["useTanStackFieldContext","Label","Input","FieldError"],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-text-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\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\nimport type { SimpleTextFieldProps as Props } from '../../types';\n\nexport const SimpleTextField: 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      <Input\n        id={id}\n        name={name}\n        value={state.value ?? ''}\n        aria-invalid={_invalid}\n        placeholder={placeholder}\n        autoComplete=\"off\"\n        disabled={disabled || isSubmitting}\n        onBlur={handleBlur}\n        onChange={onChange}\n      />\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"gMAcA,MAAa,GAAoC,CAAE,QAAO,cAAa,WAAU,YAAW,cAAe,CACzG,IAAM,GAAA,EAAA,EAAA,MAAA,CAAW,EACX,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiBA,EAAAA,GAAuC,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,wBAAf,SAAA,CACG,IACC,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,KAET,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CACM,KACE,OACN,MAAO,EAAM,OAAS,GACtB,eAAc,EACD,cACb,aAAa,MACb,SAAU,GAAY,EACtB,OAAQ,EACE,UACX,CAAA,EACA,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}

package/dist/simple-textarea-field-CzpApMiv.mjs

@@ -0,0 +1,2 @@
+import{Y as e,rt as t}from"./tanstack-form-Do6xL2kv.mjs";import{Label as n}from"./ui/label.mjs";import{Textarea as r}from"./ui/textarea.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,maxLength:f,rows:p,disabled:m})=>{let h=a(),{form:g,name:_,state:v,handleBlur:y,handleChange:b}=t(),x=c(g.store,({isSubmitting:e})=>e),S=v.meta.isTouched&&!v.meta.isValid,C=i(({target:{value:e}})=>{x||f&&e.length>f||b(e||null)},[x,f,b]);return s(`div`,{className:`flex flex-col gap-1.5`,children:[l&&s(n,{htmlFor:h,children:[l,d&&o(`span`,{className:`text-danger-strong`,children:`*`})]}),o(r,{id:h,name:_,value:v.value??``,"aria-invalid":S,placeholder:u,rows:p,disabled:m||x,onBlur:y,onChange:C}),S&&o(e,{errors:v.meta.errors})]})};export{l as SimpleTextareaField};
+//# sourceMappingURL=simple-textarea-field-CzpApMiv.mjs.map

package/dist/{simple-textarea-field-B72nNQHv.mjs.map → simple-textarea-field-CzpApMiv.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"simple-textarea-field-B72nNQHv.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-textarea-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { Textarea } from '@/components/ui/textarea';\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  rows?: number;\n  disabled?: boolean;\n};\n\nexport const SimpleTextareaField: React.FC<Props> = ({ label, placeholder, required, maxLength, rows, 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<HTMLTextAreaElement>>(\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      <Textarea\n        id={id}\n        name={name}\n        value={state.value ?? ''}\n        aria-invalid={_invalid}\n        placeholder={placeholder}\n        rows={rows}\n        disabled={disabled || isSubmitting}\n        onBlur={handleBlur}\n        onChange={onChange}\n      />\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"wUAqBA,MAAa,GAAwC,CAAE,QAAO,cAAa,WAAU,YAAW,OAAM,cAAe,CACnH,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,wBAAf,SAAA,CACG,GACC,EAAC,EAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,IAET,EAAC,EAAD,CACM,KACE,OACN,MAAO,EAAM,OAAS,GACtB,eAAc,EACD,cACP,OACN,SAAU,GAAY,EACtB,OAAQ,EACE,UACX,CAAA,EACA,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}
+{"version":3,"file":"simple-textarea-field-CzpApMiv.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-textarea-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { Textarea } from '@/components/ui/textarea';\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  rows?: number;\n  disabled?: boolean;\n};\n\nexport const SimpleTextareaField: React.FC<Props> = ({ label, placeholder, required, maxLength, rows, 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<HTMLTextAreaElement>>(\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      <Textarea\n        id={id}\n        name={name}\n        value={state.value ?? ''}\n        aria-invalid={_invalid}\n        placeholder={placeholder}\n        rows={rows}\n        disabled={disabled || isSubmitting}\n        onBlur={handleBlur}\n        onChange={onChange}\n      />\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"8RAqBA,MAAa,GAAwC,CAAE,QAAO,cAAa,WAAU,YAAW,OAAM,cAAe,CACnH,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,wBAAf,SAAA,CACG,GACC,EAAC,EAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,IAET,EAAC,EAAD,CACM,KACE,OACN,MAAO,EAAM,OAAS,GACtB,eAAc,EACD,cACP,OACN,SAAU,GAAY,EACtB,OAAQ,EACE,UACX,CAAA,EACA,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}

package/dist/simple-textarea-field-DyQZEDTe.cjs

@@ -0,0 +1,2 @@
+const e=require("./tanstack-form-BiOihtxs.cjs"),t=require("./ui/label.cjs"),n=require("./ui/textarea.cjs");let r=require("react"),i=require("react/jsx-runtime"),a=require("@tanstack/react-form");const o=({label:o,placeholder:s,required:c,maxLength:l,rows:u,disabled:d})=>{let f=(0,r.useId)(),{form:p,name:m,state:h,handleBlur:g,handleChange:_}=e.rt(),v=(0,a.useStore)(p.store,({isSubmitting:e})=>e),y=h.meta.isTouched&&!h.meta.isValid,b=(0,r.useCallback)(({target:{value:e}})=>{v||l&&e.length>l||_(e||null)},[v,l,_]);return(0,i.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[o&&(0,i.jsxs)(t.Label,{htmlFor:f,children:[o,c&&(0,i.jsx)(`span`,{className:`text-danger-strong`,children:`*`})]}),(0,i.jsx)(n.Textarea,{id:f,name:m,value:h.value??``,"aria-invalid":y,placeholder:s,rows:u,disabled:d||v,onBlur:g,onChange:b}),y&&(0,i.jsx)(e.Y,{errors:h.meta.errors})]})};exports.SimpleTextareaField=o;
+//# sourceMappingURL=simple-textarea-field-DyQZEDTe.cjs.map

package/dist/{simple-textarea-field-Bu5h7sfH.cjs.map → simple-textarea-field-DyQZEDTe.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"simple-textarea-field-Bu5h7sfH.cjs","names":["useTanStackFieldContext","Label","Textarea","FieldError"],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-textarea-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { Textarea } from '@/components/ui/textarea';\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  rows?: number;\n  disabled?: boolean;\n};\n\nexport const SimpleTextareaField: React.FC<Props> = ({ label, placeholder, required, maxLength, rows, 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<HTMLTextAreaElement>>(\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      <Textarea\n        id={id}\n        name={name}\n        value={state.value ?? ''}\n        aria-invalid={_invalid}\n        placeholder={placeholder}\n        rows={rows}\n        disabled={disabled || isSubmitting}\n        onBlur={handleBlur}\n        onChange={onChange}\n      />\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"qOAqBA,MAAa,GAAwC,CAAE,QAAO,cAAa,WAAU,YAAW,OAAM,cAAe,CACnH,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,wBAAf,SAAA,CACG,IACC,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,KAET,EAAA,EAAA,IAAA,CAACC,EAAAA,SAAD,CACM,KACE,OACN,MAAO,EAAM,OAAS,GACtB,eAAc,EACD,cACP,OACN,SAAU,GAAY,EACtB,OAAQ,EACE,UACX,CAAA,EACA,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}
+{"version":3,"file":"simple-textarea-field-DyQZEDTe.cjs","names":["useTanStackFieldContext","Label","Textarea","FieldError"],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-textarea-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { Textarea } from '@/components/ui/textarea';\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  rows?: number;\n  disabled?: boolean;\n};\n\nexport const SimpleTextareaField: React.FC<Props> = ({ label, placeholder, required, maxLength, rows, 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<HTMLTextAreaElement>>(\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      <Textarea\n        id={id}\n        name={name}\n        value={state.value ?? ''}\n        aria-invalid={_invalid}\n        placeholder={placeholder}\n        rows={rows}\n        disabled={disabled || isSubmitting}\n        onBlur={handleBlur}\n        onChange={onChange}\n      />\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"mMAqBA,MAAa,GAAwC,CAAE,QAAO,cAAa,WAAU,YAAW,OAAM,cAAe,CACnH,IAAM,GAAA,EAAA,EAAA,MAAA,CAAW,EACX,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiBA,EAAAA,GAAuC,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,wBAAf,SAAA,CACG,IACC,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,KAET,EAAA,EAAA,IAAA,CAACC,EAAAA,SAAD,CACM,KACE,OACN,MAAO,EAAM,OAAS,GACtB,eAAc,EACD,cACP,OACN,SAAU,GAAY,EACtB,OAAQ,EACE,UACX,CAAA,EACA,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}

package/dist/switch-field-CsI6eXJu.cjs

@@ -0,0 +1,2 @@
+const e=require("./tanstack-form-BiOihtxs.cjs");let t=require("@customafk/react-toolkit/utils"),n=require("react/jsx-runtime"),r=require("radix-ui");function i({className:e,...i}){return(0,n.jsx)(r.Switch.Root,{"data-slot":`switch`,className:(0,t.cn)(`peer`,`w-8 shrink-0 cursor-pointer items-center rounded-full shadow-xs transition-all`,`inline-flex h-5`,`focus-visible:border-primary-strong`,`focus-visible:ring-primary-weak`,`focus-visible:ring-4`,`disabled:cursor-not-allowed`,`disabled:opacity-50`,`-outline-offset-1 inset-shadow-2xs outline-1`,`data-[state=checked]:bg-primary`,`data-[state=checked]:outline-primary-strong`,`data-[state=unchecked]:bg-muted-weak`,`data-[state=unchecked]:outline-border`,`data-[state=unchecked]:[&_span]:size-4`,`data-[state=unchecked]:[&_span]:translate-x-0.5`,`data-[state=unchecked]:[&_span]:rtl:-translate-x-0.5`,e),...i,children:(0,n.jsx)(r.Switch.Thumb,{"data-slot":`switch-thumb`,className:(0,t.cn)(`block size-4 bg-card shadow-xs`,`pointer-events-none rounded-full ring-0 transition-transform`,`data-[state=checked]:translate-x-[calc(100%-3px)]`,`data-[state=unchecked]:translate-x-0`)})})}const a=({label:t,description:r,helperText:a})=>{let o=e.rt();return(0,n.jsxs)(e.X,{className:`gap-y-4 px-4`,children:[(0,n.jsxs)(e.G,{orientation:`vertical`,className:`relative justify-between gap-y-1`,children:[(0,n.jsxs)(e.K,{children:[(0,n.jsx)(e.tt,{className:`cursor-pointer`,children:(0,n.jsx)(`label`,{htmlFor:o.name,children:t})}),(0,n.jsx)(e.J,{children:r}),(0,n.jsx)(i,{id:o.name,checked:o.state.value??!1,className:`absolute top-1 right-1`,onBlur:o.handleBlur,onCheckedChange:o.handleChange})]}),(0,n.jsx)(e.$,{isShow:!!a,children:a})]}),(0,n.jsx)(e.et,{})]})};exports.SwitchField=a;
+//# sourceMappingURL=switch-field-CsI6eXJu.cjs.map