@customafk/lunas-ui 0.0.80 → 0.0.81

package/dist/forms/combobox-field.js

@@ -1,2 +1,2 @@
-"use client";import"../dist-CkzytVha.js";import"../button-variants-Y1GTBayz.js";import{Button as e}from"../button-DhQJ9Ey8.js";import"../dialog-B2LS2JLb.js";import{Command as t,CommandEmpty as n,CommandGroup as r,CommandInput as i,CommandItem as a,CommandList as o,CommandSeparator as s}from"../command-DhSE6UaR.js";import"../label-CdrxlBJ8.js";import{FormControl as c,FormDescription as l,FormField as u,FormItem as d,FormLabel as f}from"../form-BT1TbgK6.js";import{Popover as p,PopoverContent as m,PopoverTrigger as h}from"../popover-BJWOgxQ5.js";import{ChevronDownIcon as g,PlusIcon as _}from"lucide-react";import{cn as v}from"@customafk/react-toolkit/utils";import{Fragment as y,jsx as b,jsxs as x}from"react/jsx-runtime";const S=({name:S,label:C=`Combobox`,placeholder:w=`Chọn một mục`,description:T,options:E,onAddNewItem:D})=>b(u,{name:S,render:({field:u})=>x(d,{className:`w-full`,children:[b(f,{children:C}),x(p,{modal:!0,children:[b(h,{asChild:!0,children:b(c,{children:x(e,{type:`button`,variant:`outline`,role:`combobox`,color:`muted`,className:v(`shadow-input flex justify-between rounded-md px-3`,`outline-border-weak font-normal`,`[&_div]:w-full`,`[&_div]:justify-between`,`hover:outline-border`,`data-[state=open]:text-text-positive-muted`,`data-[state=open]:outline-1`,`data-[state=open]:outline-primary-strong`,`data-[state=open]:ring-primary-weak`,`data-[state=open]:ring-4`,`focus:border-primary-strong`,`focus:ring-4`,`focus:ring-primary-weak`,`focus:outline-1`,`focus:outline-primary-strong`),children:[u.value?b(`span`,{className:`flex min-w-0 items-center gap-2`,children:E?.find(({value:e})=>e===u.value)?.label}):b(`span`,{className:`text-text-positive-muted`,children:w}),b(g,{size:16,className:`text-text-positive-weak shrink-0`,"aria-hidden":`true`})]})})}),b(m,{className:`w-[var(--radix-popover-trigger-width)] p-0`,children:x(t,{className:`border-none`,children:[b(i,{placeholder:w??`Tìm kiếm`}),x(o,{children:[b(r,{className:`max-h-40 overflow-y-auto`,children:E?.map(({value:e,label:t})=>b(a,{value:t,onSelect:()=>u.onChange(e),children:t},e))}),D&&x(y,{children:[b(s,{}),b(r,{children:x(e,{type:`button`,variant:`ghost`,className:`w-full justify-start font-normal`,children:[b(_,{size:14,className:`-ms-2 opacity-60`,"aria-hidden":`true`}),`Thêm mới`]})})]})]}),b(n,{children:`Không có kết quả`})]})})]}),!!T&&b(l,{children:T})]})});export{S as ComboboxField};
+"use client";import"../dist-BgkALM7U.js";import"../button-variants-Y1GTBayz.js";import{Button as e}from"../button-CYsnwc1-.js";import"../label-CdrxlBJ8.js";import"../separator-D17HxS2f.js";import{FieldContent as t}from"../field-CGacT8J3.js";import{FormControl as n,FormDescription as r,FormField as i,FormItem as a,FormLabel as o}from"../form-B_tL9lO4.js";import"../dialog-BAlJ18xi.js";import{Command as s,CommandEmpty as c,CommandGroup as l,CommandInput as u,CommandItem as d,CommandList as f,CommandSeparator as p}from"../command-UXLmHGja.js";import{Popover as m,PopoverContent as h,PopoverTrigger as g}from"../popover-BnzoeyDG.js";import{ChevronDownIcon as _,PlusIcon as v}from"lucide-react";import{cn as y}from"@customafk/react-toolkit/utils";import{Activity as b}from"react";import{Fragment as x,jsx as S,jsxs as C}from"react/jsx-runtime";const w=({name:w,label:T=`Combobox`,placeholder:E=`Chọn một mục`,description:D,options:O,onAddNewItem:k})=>S(i,{name:w,render:({field:i})=>C(a,{className:`w-full`,children:[S(b,{mode:T||D?`visible`:`hidden`,children:C(t,{children:[S(o,{children:T}),!!D&&S(r,{children:D})]})}),C(m,{modal:!0,children:[S(g,{asChild:!0,children:S(n,{children:C(e,{type:`button`,variant:`outline`,role:`combobox`,color:`muted`,className:y(`shadow-input flex justify-between rounded-md px-3`,`outline-border-weak font-normal`,`[&_div]:w-full`,`[&_div]:justify-between`,`hover:outline-border`,`data-[state=open]:text-text-positive-muted`,`data-[state=open]:outline-1`,`data-[state=open]:outline-primary-strong`,`data-[state=open]:ring-primary-weak`,`data-[state=open]:ring-4`,`focus:border-primary-strong`,`focus:ring-4`,`focus:ring-primary-weak`,`focus:outline-1`,`focus:outline-primary-strong`),children:[i.value?S(`span`,{className:`flex min-w-0 items-center gap-2`,children:O?.find(({value:e})=>e===i.value)?.label}):S(`span`,{className:`text-text-positive-muted`,children:E}),S(_,{size:16,className:`text-text-positive-weak shrink-0`,"aria-hidden":`true`})]})})}),S(h,{className:`w-[var(--radix-popover-trigger-width)] p-0`,children:C(s,{className:`border-none`,children:[S(u,{placeholder:E??`Tìm kiếm`}),C(f,{children:[S(l,{className:`max-h-40 overflow-y-auto`,children:O?.map(({value:e,label:t})=>S(d,{value:t,onSelect:()=>i.onChange(e),children:t},e))}),k&&C(x,{children:[S(p,{}),S(l,{children:C(e,{type:`button`,variant:`ghost`,className:`w-full justify-start font-normal`,children:[S(v,{size:14,className:`-ms-2 opacity-60`,"aria-hidden":`true`}),`Thêm mới`]})})]})]}),S(c,{children:`Không có kết quả`})]})})]})]})});export{w as ComboboxField};
 //# sourceMappingURL=combobox-field.js.map

package/dist/forms/combobox-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-field.js","names":["label"],"sources":["../../packages/components/forms/combobox-field.tsx"],"sourcesContent":["'use client'\nimport type { FieldPath, FieldValues } from 'react-hook-form'\nimport { cn } from '@customafk/react-toolkit/utils'\n\nimport { ChevronDownIcon, PlusIcon } from 'lucide-react'\n\nimport { Button } from '@/components/ui/button'\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from '@/components/ui/command'\nimport { FormControl, FormDescription, FormField, FormItem, FormLabel } from '@/components/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  name: FieldPath<TFieldValues>\n  label?: string\n  placeholder?: string\n  options?: { value: string | number; label: string }[]\n  isShowErrorMsg?: boolean\n  modal?: boolean\n  description?: string\n  onAddNewItem?: () => void\n}\n\nexport const ComboboxField = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  label = 'Combobox',\n  placeholder = 'Chọn một mục',\n  description,\n  options,\n  onAddNewItem,\n}: Props<TFieldValues>) => {\n  return (\n    <FormField\n      name={name}\n      render={({ field }) => {\n        return (\n          <FormItem className=\"w-full\">\n            <FormLabel>{label}</FormLabel>\n            <Popover modal={true}>\n              <PopoverTrigger asChild>\n                <FormControl>\n                  <Button\n                    type=\"button\"\n                    variant=\"outline\"\n                    role=\"combobox\"\n                    color=\"muted\"\n                    className={cn(\n                      'shadow-input flex justify-between rounded-md px-3',\n                      'outline-border-weak font-normal',\n                      '[&_div]:w-full',\n                      '[&_div]:justify-between',\n                      'hover:outline-border',\n                      'data-[state=open]:text-text-positive-muted',\n                      'data-[state=open]:outline-1',\n                      'data-[state=open]:outline-primary-strong',\n                      'data-[state=open]:ring-primary-weak',\n                      'data-[state=open]:ring-4',\n                      'focus:border-primary-strong',\n                      'focus:ring-4',\n                      'focus:ring-primary-weak',\n                      'focus:outline-1',\n                      'focus:outline-primary-strong',\n                    )}\n                  >\n                    {field.value ? (\n                      <span className=\"flex min-w-0 items-center gap-2\">{options?.find(({ value }) => value === field.value)?.label}</span>\n                    ) : (\n                      <span className=\"text-text-positive-muted\">{placeholder}</span>\n                    )}\n                    <ChevronDownIcon size={16} className=\"text-text-positive-weak shrink-0\" aria-hidden=\"true\" />\n                  </Button>\n                </FormControl>\n              </PopoverTrigger>\n              <PopoverContent className=\"w-[var(--radix-popover-trigger-width)] p-0\">\n                <Command className=\"border-none\">\n                  <CommandInput placeholder={placeholder ?? 'Tìm kiếm'} />\n                  <CommandList>\n                    <CommandGroup className=\"max-h-40 overflow-y-auto\">\n                      {options?.map(({ value, label }) => (\n                        <CommandItem key={value} value={label} onSelect={() => field.onChange(value)}>\n                          {label}\n                        </CommandItem>\n                      ))}\n                    </CommandGroup>\n                    {onAddNewItem && (\n                      <>\n                        <CommandSeparator />\n                        <CommandGroup>\n                          <Button type=\"button\" variant=\"ghost\" className=\"w-full justify-start font-normal\">\n                            <PlusIcon size={14} className=\"-ms-2 opacity-60\" aria-hidden=\"true\" />\n                            Thêm mới\n                          </Button>\n                        </CommandGroup>\n                      </>\n                    )}\n                  </CommandList>\n                  <CommandEmpty>Không có kết quả</CommandEmpty>\n                </Command>\n              </PopoverContent>\n            </Popover>\n            {!!description && <FormDescription>{description}</FormDescription>}\n          </FormItem>\n        )\n      }}\n    />\n  )\n}\n"],"mappings":"stBAsBA,MAAa,GAAiE,CAC5E,OACA,QAAQ,WACR,cAAc,eACd,cACA,UACA,kBAGE,EAAC,EAAA,CACO,OACN,QAAS,CAAE,WAEP,EAAC,EAAA,CAAS,UAAU,mBAClB,EAAC,EAAA,CAAA,SAAW,IACZ,EAAC,EAAA,CAAQ,MAAO,aACd,EAAC,EAAA,CAAe,QAAA,YACd,EAAC,EAAA,CAAA,SACC,EAAC,EAAA,CACC,KAAK,SACL,QAAQ,UACR,KAAK,WACL,MAAM,QACN,UAAW,EACT,oDACA,kCACA,iBACA,0BACA,uBACA,6CACA,8BACA,2CACA,sCACA,2BACA,8BACA,eACA,0BACA,kBACA,0CAGD,EAAM,MACL,EAAC,OAAA,CAAK,UAAU,2CAAmC,GAAS,MAAM,CAAE,WAAY,IAAU,EAAM,QAAQ,QAExG,EAAC,OAAA,CAAK,UAAU,oCAA4B,IAE9C,EAAC,EAAA,CAAgB,KAAM,GAAI,UAAU,mCAAmC,cAAY,gBAI1F,EAAC,EAAA,CAAe,UAAU,sDACxB,EAAC,EAAA,CAAQ,UAAU,wBACjB,EAAC,EAAA,CAAa,YAAa,GAAe,aAC1C,EAAC,EAAA,CAAA,SAAA,CACC,EAAC,EAAA,CAAa,UAAU,oCACrB,GAAS,KAAK,CAAE,QAAO,MAAA,KACtB,EAAC,EAAA,CAAwB,MAAOA,EAAO,aAAgB,EAAM,SAAS,YACnEA,GADe,MAKrB,GACC,EAAA,EAAA,CAAA,SAAA,CACE,EAAC,EAAA,IACD,EAAC,EAAA,CAAA,SACC,EAAC,EAAA,CAAO,KAAK,SAAS,QAAQ,QAAQ,UAAU,6CAC9C,EAAC,EAAA,CAAS,KAAM,GAAI,UAAU,mBAAmB,cAAY,SAAS,sBAOhF,EAAC,EAAA,CAAA,SAAa,6BAInB,CAAC,CAAC,GAAe,EAAC,EAAA,CAAA,SAAiB"}
+{"version":3,"file":"combobox-field.js","names":["label"],"sources":["../../packages/components/forms/combobox-field.tsx"],"sourcesContent":["'use client';\nimport { Activity } from 'react';\nimport type { FieldPath, FieldValues } from 'react-hook-form';\n\nimport { ChevronDownIcon, PlusIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from '@/components/ui/command';\nimport { FormControl, FormDescription, FormField, FormItem, FormLabel } from '@/components/ui/form';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';\nimport { FieldContent } from '../ui/field';\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  name: FieldPath<TFieldValues>;\n  label?: string;\n  placeholder?: string;\n  options?: { value: string | number; label: string }[];\n  isShowErrorMsg?: boolean;\n  modal?: boolean;\n  description?: string;\n  onAddNewItem?: () => void;\n};\n\nexport const ComboboxField = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  label = 'Combobox',\n  placeholder = 'Chọn một mục',\n  description,\n  options,\n  onAddNewItem,\n}: Props<TFieldValues>) => {\n  return (\n    <FormField\n      name={name}\n      render={({ field }) => {\n        return (\n          <FormItem className=\"w-full\">\n            <Activity mode={label || description ? 'visible' : 'hidden'}>\n              <FieldContent>\n                <FormLabel>{label}</FormLabel>\n                {!!description && <FormDescription>{description}</FormDescription>}\n              </FieldContent>\n            </Activity>\n            <Popover modal={true}>\n              <PopoverTrigger asChild>\n                <FormControl>\n                  <Button\n                    type=\"button\"\n                    variant=\"outline\"\n                    role=\"combobox\"\n                    color=\"muted\"\n                    className={cn(\n                      'shadow-input flex justify-between rounded-md px-3',\n                      'outline-border-weak font-normal',\n                      '[&_div]:w-full',\n                      '[&_div]:justify-between',\n                      'hover:outline-border',\n                      'data-[state=open]:text-text-positive-muted',\n                      'data-[state=open]:outline-1',\n                      'data-[state=open]:outline-primary-strong',\n                      'data-[state=open]:ring-primary-weak',\n                      'data-[state=open]:ring-4',\n                      'focus:border-primary-strong',\n                      'focus:ring-4',\n                      'focus:ring-primary-weak',\n                      'focus:outline-1',\n                      'focus:outline-primary-strong'\n                    )}\n                  >\n                    {field.value ? (\n                      <span className=\"flex min-w-0 items-center gap-2\">{options?.find(({ value }) => value === field.value)?.label}</span>\n                    ) : (\n                      <span className=\"text-text-positive-muted\">{placeholder}</span>\n                    )}\n                    <ChevronDownIcon size={16} className=\"text-text-positive-weak shrink-0\" aria-hidden=\"true\" />\n                  </Button>\n                </FormControl>\n              </PopoverTrigger>\n              <PopoverContent className=\"w-[var(--radix-popover-trigger-width)] p-0\">\n                <Command className=\"border-none\">\n                  <CommandInput placeholder={placeholder ?? 'Tìm kiếm'} />\n                  <CommandList>\n                    <CommandGroup className=\"max-h-40 overflow-y-auto\">\n                      {options?.map(({ value, label }) => (\n                        <CommandItem key={value} value={label} onSelect={() => field.onChange(value)}>\n                          {label}\n                        </CommandItem>\n                      ))}\n                    </CommandGroup>\n                    {onAddNewItem && (\n                      <>\n                        <CommandSeparator />\n                        <CommandGroup>\n                          <Button type=\"button\" variant=\"ghost\" className=\"w-full justify-start font-normal\">\n                            <PlusIcon size={14} className=\"-ms-2 opacity-60\" aria-hidden=\"true\" />\n                            Thêm mới\n                          </Button>\n                        </CommandGroup>\n                      </>\n                    )}\n                  </CommandList>\n                  <CommandEmpty>Không có kết quả</CommandEmpty>\n                </Command>\n              </PopoverContent>\n            </Popover>\n          </FormItem>\n        );\n      }}\n    />\n  );\n};\n"],"mappings":"40BAyBA,MAAa,GAAiE,CAC5E,OACA,QAAQ,WACR,cAAc,eACd,cACA,UACA,kBAGE,EAAC,EAAA,CACO,OACN,QAAS,CAAE,WAEP,EAAC,EAAA,CAAS,UAAU,mBAClB,EAAC,EAAA,CAAS,KAAM,GAAS,EAAc,UAAY,kBACjD,EAAC,EAAA,CAAA,SAAA,CACC,EAAC,EAAA,CAAA,SAAW,EAAA,CAAkB,CAC7B,CAAC,CAAC,GAAe,EAAC,EAAA,CAAA,SAAiB,EAAA,CAA8B,CAAA,CAAA,CACrD,EACN,CACX,EAAC,EAAA,CAAQ,MAAO,aACd,EAAC,EAAA,CAAe,QAAA,YACd,EAAC,EAAA,CAAA,SACC,EAAC,EAAA,CACC,KAAK,SACL,QAAQ,UACR,KAAK,WACL,MAAM,QACN,UAAW,EACT,oDACA,kCACA,iBACA,0BACA,uBACA,6CACA,8BACA,2CACA,sCACA,2BACA,8BACA,eACA,0BACA,kBACA,+BACD,WAEA,EAAM,MACL,EAAC,OAAA,CAAK,UAAU,2CAAmC,GAAS,MAAM,CAAE,WAAY,IAAU,EAAM,MAAM,EAAE,OAAa,CAErH,EAAC,OAAA,CAAK,UAAU,oCAA4B,GAAmB,CAEjE,EAAC,EAAA,CAAgB,KAAM,GAAI,UAAU,mCAAmC,cAAY,QAAS,CAAA,EACtF,CAAA,CACG,EACC,CACjB,EAAC,EAAA,CAAe,UAAU,sDACxB,EAAC,EAAA,CAAQ,UAAU,wBACjB,EAAC,EAAA,CAAa,YAAa,GAAe,WAAA,CAAc,CACxD,EAAC,EAAA,CAAA,SAAA,CACC,EAAC,EAAA,CAAa,UAAU,oCACrB,GAAS,KAAK,CAAE,QAAO,MAAA,KACtB,EAAC,EAAA,CAAwB,MAAOA,EAAO,aAAgB,EAAM,SAAS,EAAM,UACzEA,GADe,EAEJ,CACd,EACW,CACd,GACC,EAAA,EAAA,CAAA,SAAA,CACE,EAAC,EAAA,EAAA,CAAmB,CACpB,EAAC,EAAA,CAAA,SACC,EAAC,EAAA,CAAO,KAAK,SAAS,QAAQ,QAAQ,UAAU,6CAC9C,EAAC,EAAA,CAAS,KAAM,GAAI,UAAU,mBAAmB,cAAY,QAAS,CAAA,WAAA,EAE/D,CAAA,CACI,CAAA,CAAA,CACd,CAAA,CAAA,CAEO,CACd,EAAC,EAAA,CAAA,SAAa,mBAAA,CAA+B,GACrC,EACK,CAAA,EACT,CAAA,EACD,EAGf"}

package/dist/forms/date-field.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require(`../chunk-CUT6urMc.cjs`);require(`../dist-D0uO1qIz.cjs`),require(`../button-variants-CCiseNSC.cjs`);const t=require(`../button-CuV2l4ge.cjs`);require(`../label-CHNSlaoz.cjs`);const n=require(`../form-DyH5iWq7.cjs`),r=require(`../popover-BrDe5Jb8.cjs`),i=require(`../calendar-Fjm1d0mU.cjs`),a=e.__toESM(require(`lucide-react`)),o=e.__toESM(require(`@customafk/react-toolkit/utils`)),s=e.__toESM(require(`react/jsx-runtime`)),c=e.__toESM(require(`@customafk/react-toolkit/date-fns`)),l=({name:e,label:l=`Date Field`,placeholder:u=`Select a date`,description:d=``,isShowErrorMsg:f=!1})=>(0,s.jsx)(n.FormField,{name:e,render:({field:e})=>(0,s.jsxs)(n.FormItem,{className:`w-full`,children:[(0,s.jsx)(n.FormLabel,{children:l}),(0,s.jsxs)(r.Popover,{modal:!0,children:[(0,s.jsx)(r.PopoverTrigger,{asChild:!0,children:(0,s.jsx)(n.FormControl,{children:(0,s.jsxs)(t.Button,{variant:`outline`,color:`muted`,className:(0,o.cn)(`w-full pl-3 text-left font-normal`,`outline-border-weak font-normal`,`hover:outline-border`,`data-[state=open]:text-text-positive-muted`,`data-[state=open]:outline-1`,`data-[state=open]:outline-primary-strong`,`data-[state=open]:ring-primary-weak`,`data-[state=open]:ring-4`,`focus:border-primary-strong`,`focus:ring-4`,`focus:ring-primary-weak`,`focus:outline-1`,`focus:outline-primary-strong`,!e.value&&`text-text-positive-muted`),children:[e.value?(0,c.format)(e.value,`PPP`):(0,s.jsxs)(`span`,{children:[` `,u||`Pick a date`]}),(0,s.jsx)(a.CalendarIcon,{className:`text-text-positive-weak ml-auto size-4`})]})})}),(0,s.jsx)(r.PopoverContent,{className:`w-auto p-0`,align:`start`,children:(0,s.jsx)(i.Calendar,{mode:`single`,selected:e.value,onSelect:t=>{e.onChange(t?.toISOString())},captionLayout:`dropdown`,disabled:e=>e<new Date(`2022-01-01`)})})]}),!!d&&(0,s.jsx)(n.FormDescription,{children:d}),f&&(0,s.jsx)(n.FormMessage,{})]})});exports.DateField=l;
+"use client";const e=require(`../chunk-CUT6urMc.cjs`);require(`../dist-CAevLI5t.cjs`),require(`../button-variants-DdVxfrSx.cjs`);const t=require(`../button-BaLuKPtr.cjs`);require(`../label-D6mAvVmw.cjs`),require(`../separator-DMMoR-d2.cjs`);const n=require(`../field-A43YZ5Wj.cjs`),r=require(`../form-DV9tQbiO.cjs`),i=require(`../popover-D6vyPDKA.cjs`),a=require(`../calendar-C4zLgISS.cjs`);let o=require(`lucide-react`);o=e.__toESM(o);let s=require(`@customafk/react-toolkit/utils`);s=e.__toESM(s);let c=require(`react`);c=e.__toESM(c);let l=require(`react/jsx-runtime`);l=e.__toESM(l);let u=require(`@customafk/react-toolkit/date-fns`);u=e.__toESM(u);const d=({name:e,label:d=`Date Field`,placeholder:f=`Select a date`,description:p=``,isShowErrorMsg:m=!1})=>(0,l.jsx)(r.FormField,{name:e,render:({field:e})=>(0,l.jsxs)(r.FormItem,{children:[(0,l.jsx)(c.Activity,{mode:d||p?`visible`:`hidden`,children:(0,l.jsxs)(n.FieldContent,{children:[(0,l.jsx)(r.FormLabel,{children:d}),!!p&&(0,l.jsx)(r.FormDescription,{children:p})]})}),(0,l.jsxs)(i.Popover,{modal:!0,children:[(0,l.jsx)(i.PopoverTrigger,{asChild:!0,children:(0,l.jsx)(r.FormControl,{children:(0,l.jsxs)(t.Button,{variant:`outline`,color:`muted`,className:(0,s.cn)(`w-full pl-3 text-left font-normal`,`outline-border-weak font-normal`,`hover:outline-border`,`data-[state=open]:text-text-positive-muted`,`data-[state=open]:outline-1`,`data-[state=open]:outline-primary-strong`,`data-[state=open]:ring-primary-weak`,`data-[state=open]:ring-4`,`focus:border-primary-strong`,`focus:ring-4`,`focus:ring-primary-weak`,`focus:outline-1`,`focus:outline-primary-strong`,!e.value&&`text-text-positive-muted`),children:[e.value?(0,u.format)(e.value,`PPP`):(0,l.jsxs)(`span`,{children:[` `,f||`Pick a date`]}),(0,l.jsx)(o.CalendarIcon,{className:`text-text-positive-weak ml-auto size-4`})]})})}),(0,l.jsx)(i.PopoverContent,{className:`w-auto p-0`,align:`start`,children:(0,l.jsx)(a.Calendar,{mode:`single`,selected:e.value,onSelect:t=>{e.onChange(t?.toISOString())},captionLayout:`dropdown`,disabled:e=>e<new Date(`2022-01-01`)})})]}),m&&(0,l.jsx)(r.FormMessage,{})]})});exports.DateField=d;
 //# sourceMappingURL=date-field.cjs.map

package/dist/forms/date-field.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"date-field.cjs","names":["FormField","FormItem","FormLabel","Popover","PopoverTrigger","FormControl","Button","CalendarIcon","PopoverContent","Calendar","FormDescription","FormMessage"],"sources":["../../packages/components/forms/date-field.tsx"],"sourcesContent":["'use client'\nimport type { FieldPath, FieldValues } from 'react-hook-form'\nimport { format } from '@customafk/react-toolkit/date-fns'\nimport { cn } from '@customafk/react-toolkit/utils'\n\nimport { CalendarIcon } from 'lucide-react'\n\nimport { Button } from '../ui/button'\nimport { Calendar } from '../ui/calendar'\nimport { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '../ui/popover'\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  name: FieldPath<TFieldValues>\n  label?: string\n  placeholder?: string\n  description?: string\n  isShowErrorMsg?: boolean\n  modal?: boolean\n}\n\nexport const DateField = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  label = 'Date Field',\n  placeholder = 'Select a date',\n  description = '',\n  isShowErrorMsg = false,\n}: Props<TFieldValues>) => {\n  return (\n    <FormField\n      name={name}\n      render={({ field }) => (\n        <FormItem className=\"w-full\">\n          <FormLabel>{label}</FormLabel>\n          <Popover modal>\n            <PopoverTrigger asChild>\n              <FormControl>\n                <Button\n                  variant=\"outline\"\n                  color=\"muted\"\n                  className={cn(\n                    'w-full pl-3 text-left font-normal',\n                    'outline-border-weak font-normal',\n                    'hover:outline-border',\n                    'data-[state=open]:text-text-positive-muted',\n                    'data-[state=open]:outline-1',\n                    'data-[state=open]:outline-primary-strong',\n                    'data-[state=open]:ring-primary-weak',\n                    'data-[state=open]:ring-4',\n                    'focus:border-primary-strong',\n                    'focus:ring-4',\n                    'focus:ring-primary-weak',\n                    'focus:outline-1',\n                    'focus:outline-primary-strong',\n                    !field.value && 'text-text-positive-muted',\n                  )}\n                >\n                  {field.value ? format(field.value, 'PPP') : <span> {placeholder || 'Pick a date'}</span>}\n                  <CalendarIcon className=\"text-text-positive-weak ml-auto size-4\" />\n                </Button>\n              </FormControl>\n            </PopoverTrigger>\n            <PopoverContent className=\"w-auto p-0\" align=\"start\">\n              <Calendar\n                mode=\"single\"\n                selected={field.value}\n                onSelect={(date) => {\n                  field.onChange(date?.toISOString())\n                }}\n                captionLayout=\"dropdown\"\n                disabled={(date) => date < new Date('2022-01-01')}\n              />\n            </PopoverContent>\n          </Popover>\n          {!!description && <FormDescription>{description}</FormDescription>}\n          {isShowErrorMsg && <FormMessage />}\n        </FormItem>\n      )}\n    />\n  )\n}\n"],"mappings":"+fAqBa,GAA6D,CACxE,OACA,QAAQ,aACR,cAAc,gBACd,cAAc,GACd,iBAAiB,OAGf,EAAA,EAAA,KAACA,EAAAA,UAAAA,CACO,OACN,QAAS,CAAE,YACT,EAAA,EAAA,MAACC,EAAAA,SAAAA,CAAS,UAAU,oBAClB,EAAA,EAAA,KAACC,EAAAA,UAAAA,CAAAA,SAAW,KACZ,EAAA,EAAA,MAACC,EAAAA,QAAAA,CAAQ,MAAA,cACP,EAAA,EAAA,KAACC,EAAAA,eAAAA,CAAe,QAAA,aACd,EAAA,EAAA,KAACC,EAAAA,YAAAA,CAAAA,UACC,EAAA,EAAA,MAACC,EAAAA,OAAAA,CACC,QAAQ,UACR,MAAM,QACN,WAAA,EAAA,EAAA,IACE,oCACA,kCACA,uBACA,6CACA,8BACA,2CACA,sCACA,2BACA,8BACA,eACA,0BACA,kBACA,+BACA,CAAC,EAAM,OAAS,sCAGjB,EAAM,OAAA,EAAA,EAAA,QAAe,EAAM,MAAO,QAAS,EAAA,EAAA,MAAC,OAAA,CAAA,SAAA,CAAK,IAAE,GAAe,kBACnE,EAAA,EAAA,KAACC,EAAAA,aAAAA,CAAa,UAAU,mDAI9B,EAAA,EAAA,KAACC,EAAAA,eAAAA,CAAe,UAAU,aAAa,MAAM,kBAC3C,EAAA,EAAA,KAACC,EAAAA,SAAAA,CACC,KAAK,SACL,SAAU,EAAM,MAChB,SAAW,GAAS,CAClB,EAAM,SAAS,GAAM,gBAEvB,cAAc,WACd,SAAW,GAAS,EAAO,IAAI,KAAK,qBAIzC,CAAC,CAAC,IAAe,EAAA,EAAA,KAACC,EAAAA,gBAAAA,CAAAA,SAAiB,IACnC,IAAkB,EAAA,EAAA,KAACC,EAAAA,YAAAA"}
+{"version":3,"file":"date-field.cjs","names":["FormField","FormItem","Activity","FieldContent","FormLabel","FormDescription","Popover","PopoverTrigger","FormControl","Button","CalendarIcon","PopoverContent","Calendar","FormMessage"],"sources":["../../packages/components/forms/date-field.tsx"],"sourcesContent":["'use client';\nimport { Activity } from 'react';\nimport type { FieldPath, FieldValues } from 'react-hook-form';\n\nimport { CalendarIcon } from 'lucide-react';\n\nimport { format } from '@customafk/react-toolkit/date-fns';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '../ui/button';\nimport { Calendar } from '../ui/calendar';\nimport { FieldContent } from '../ui/field';\nimport { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../ui/form';\nimport { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  name: FieldPath<TFieldValues>;\n  label?: string;\n  placeholder?: string;\n  description?: string;\n  isShowErrorMsg?: boolean;\n  modal?: boolean;\n};\n\nexport const DateField = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  label = 'Date Field',\n  placeholder = 'Select a date',\n  description = '',\n  isShowErrorMsg = false,\n}: Props<TFieldValues>) => {\n  return (\n    <FormField\n      name={name}\n      render={({ field }) => (\n        <FormItem>\n          <Activity mode={label || description ? 'visible' : 'hidden'}>\n            <FieldContent>\n              <FormLabel>{label}</FormLabel>\n              {!!description && <FormDescription>{description}</FormDescription>}\n            </FieldContent>\n          </Activity>\n          <Popover modal>\n            <PopoverTrigger asChild>\n              <FormControl>\n                <Button\n                  variant=\"outline\"\n                  color=\"muted\"\n                  className={cn(\n                    'w-full pl-3 text-left font-normal',\n                    'outline-border-weak font-normal',\n                    'hover:outline-border',\n                    'data-[state=open]:text-text-positive-muted',\n                    'data-[state=open]:outline-1',\n                    'data-[state=open]:outline-primary-strong',\n                    'data-[state=open]:ring-primary-weak',\n                    'data-[state=open]:ring-4',\n                    'focus:border-primary-strong',\n                    'focus:ring-4',\n                    'focus:ring-primary-weak',\n                    'focus:outline-1',\n                    'focus:outline-primary-strong',\n                    !field.value && 'text-text-positive-muted'\n                  )}\n                >\n                  {field.value ? format(field.value, 'PPP') : <span> {placeholder || 'Pick a date'}</span>}\n                  <CalendarIcon className=\"text-text-positive-weak ml-auto size-4\" />\n                </Button>\n              </FormControl>\n            </PopoverTrigger>\n            <PopoverContent className=\"w-auto p-0\" align=\"start\">\n              <Calendar\n                mode=\"single\"\n                selected={field.value}\n                onSelect={date => {\n                  field.onChange(date?.toISOString());\n                }}\n                captionLayout=\"dropdown\"\n                disabled={date => date < new Date('2022-01-01')}\n              />\n            </PopoverContent>\n          </Popover>\n          {isShowErrorMsg && <FormMessage />}\n        </FormItem>\n      )}\n    />\n  );\n};\n"],"mappings":"6oBAwBA,MAAa,GAA6D,CACxE,OACA,QAAQ,aACR,cAAc,gBACd,cAAc,GACd,iBAAiB,OAGf,EAAA,EAAA,KAACA,EAAAA,UAAAA,CACO,OACN,QAAS,CAAE,YACT,EAAA,EAAA,MAACC,EAAAA,SAAAA,CAAAA,SAAAA,EACC,EAAA,EAAA,KAACC,EAAAA,SAAAA,CAAS,KAAM,GAAS,EAAc,UAAY,mBACjD,EAAA,EAAA,MAACC,EAAAA,aAAAA,CAAAA,SAAAA,EACC,EAAA,EAAA,KAACC,EAAAA,UAAAA,CAAAA,SAAW,EAAA,CAAkB,CAC7B,CAAC,CAAC,IAAe,EAAA,EAAA,KAACC,EAAAA,gBAAAA,CAAAA,SAAiB,EAAA,CAA8B,CAAA,CAAA,CACrD,EACN,EACX,EAAA,EAAA,MAACC,EAAAA,QAAAA,CAAQ,MAAA,cACP,EAAA,EAAA,KAACC,EAAAA,eAAAA,CAAe,QAAA,aACd,EAAA,EAAA,KAACC,EAAAA,YAAAA,CAAAA,UACC,EAAA,EAAA,MAACC,EAAAA,OAAAA,CACC,QAAQ,UACR,MAAM,QACN,WAAA,EAAA,EAAA,IACE,oCACA,kCACA,uBACA,6CACA,8BACA,2CACA,sCACA,2BACA,8BACA,eACA,0BACA,kBACA,+BACA,CAAC,EAAM,OAAS,2BACjB,WAEA,EAAM,OAAA,EAAA,EAAA,QAAe,EAAM,MAAO,MAAM,EAAG,EAAA,EAAA,MAAC,OAAA,CAAA,SAAA,CAAK,IAAE,GAAe,cAAA,CAAA,CAAqB,EACxF,EAAA,EAAA,KAACC,EAAAA,aAAAA,CAAa,UAAU,yCAAA,CAA2C,CAAA,EAC5D,CAAA,CACG,EACC,EACjB,EAAA,EAAA,KAACC,EAAAA,eAAAA,CAAe,UAAU,aAAa,MAAM,kBAC3C,EAAA,EAAA,KAACC,EAAAA,SAAAA,CACC,KAAK,SACL,SAAU,EAAM,MAChB,SAAU,GAAQ,CAChB,EAAM,SAAS,GAAM,aAAa,CAAC,EAErC,cAAc,WACd,SAAU,GAAQ,EAAO,IAAI,KAAK,aAAa,EAC/C,EACa,CAAA,EACT,CACT,IAAkB,EAAA,EAAA,KAACC,EAAAA,YAAAA,EAAAA,CAAc,GACzB,EAEb"}

package/dist/forms/date-field.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime31 from "react/jsx-runtime";
+import * as react_jsx_runtime6 from "react/jsx-runtime";
 import { FieldPath, FieldValues } from "react-hook-form";
 
 //#region packages/components/forms/date-field.d.ts
@@ -16,7 +16,7 @@ declare const DateField: <TFieldValues extends FieldValues = FieldValues>({
   placeholder,
   description,
   isShowErrorMsg
-}: Props<TFieldValues>) => react_jsx_runtime31.JSX.Element;
+}: Props<TFieldValues>) => react_jsx_runtime6.JSX.Element;
 //#endregion
 export { DateField };
 //# sourceMappingURL=date-field.d.cts.map

package/dist/forms/date-field.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime6 from "react/jsx-runtime";
+import * as react_jsx_runtime7 from "react/jsx-runtime";
 import { FieldPath, FieldValues } from "react-hook-form";
 
 //#region packages/components/forms/date-field.d.ts
@@ -16,7 +16,7 @@ declare const DateField: <TFieldValues extends FieldValues = FieldValues>({
   placeholder,
   description,
   isShowErrorMsg
-}: Props<TFieldValues>) => react_jsx_runtime6.JSX.Element;
+}: Props<TFieldValues>) => react_jsx_runtime7.JSX.Element;
 //#endregion
 export { DateField };
 //# sourceMappingURL=date-field.d.ts.map

package/dist/forms/date-field.js

@@ -1,2 +1,2 @@
-"use client";import"../dist-CkzytVha.js";import"../button-variants-Y1GTBayz.js";import{Button as e}from"../button-DhQJ9Ey8.js";import"../label-CdrxlBJ8.js";import{FormControl as t,FormDescription as n,FormField as r,FormItem as i,FormLabel as a,FormMessage as o}from"../form-BT1TbgK6.js";import{Popover as s,PopoverContent as c,PopoverTrigger as l}from"../popover-BJWOgxQ5.js";import{Calendar as u}from"../calendar-C2yGJ9AV.js";import{CalendarIcon as d}from"lucide-react";import{cn as f}from"@customafk/react-toolkit/utils";import{jsx as p,jsxs as m}from"react/jsx-runtime";import{format as h}from"@customafk/react-toolkit/date-fns";const g=({name:g,label:_=`Date Field`,placeholder:v=`Select a date`,description:y=``,isShowErrorMsg:b=!1})=>p(r,{name:g,render:({field:r})=>m(i,{className:`w-full`,children:[p(a,{children:_}),m(s,{modal:!0,children:[p(l,{asChild:!0,children:p(t,{children:m(e,{variant:`outline`,color:`muted`,className:f(`w-full pl-3 text-left font-normal`,`outline-border-weak font-normal`,`hover:outline-border`,`data-[state=open]:text-text-positive-muted`,`data-[state=open]:outline-1`,`data-[state=open]:outline-primary-strong`,`data-[state=open]:ring-primary-weak`,`data-[state=open]:ring-4`,`focus:border-primary-strong`,`focus:ring-4`,`focus:ring-primary-weak`,`focus:outline-1`,`focus:outline-primary-strong`,!r.value&&`text-text-positive-muted`),children:[r.value?h(r.value,`PPP`):m(`span`,{children:[` `,v||`Pick a date`]}),p(d,{className:`text-text-positive-weak ml-auto size-4`})]})})}),p(c,{className:`w-auto p-0`,align:`start`,children:p(u,{mode:`single`,selected:r.value,onSelect:e=>{r.onChange(e?.toISOString())},captionLayout:`dropdown`,disabled:e=>e<new Date(`2022-01-01`)})})]}),!!y&&p(n,{children:y}),b&&p(o,{})]})});export{g as DateField};
+"use client";import"../dist-BgkALM7U.js";import"../button-variants-Y1GTBayz.js";import{Button as e}from"../button-CYsnwc1-.js";import"../label-CdrxlBJ8.js";import"../separator-D17HxS2f.js";import{FieldContent as t}from"../field-CGacT8J3.js";import{FormControl as n,FormDescription as r,FormField as i,FormItem as a,FormLabel as o,FormMessage as s}from"../form-B_tL9lO4.js";import{Popover as c,PopoverContent as l,PopoverTrigger as u}from"../popover-BnzoeyDG.js";import{Calendar as d}from"../calendar-Dmq8I1ey.js";import{CalendarIcon as f}from"lucide-react";import{cn as p}from"@customafk/react-toolkit/utils";import{Activity as m}from"react";import{jsx as h,jsxs as g}from"react/jsx-runtime";import{format as _}from"@customafk/react-toolkit/date-fns";const v=({name:v,label:y=`Date Field`,placeholder:b=`Select a date`,description:x=``,isShowErrorMsg:S=!1})=>h(i,{name:v,render:({field:i})=>g(a,{children:[h(m,{mode:y||x?`visible`:`hidden`,children:g(t,{children:[h(o,{children:y}),!!x&&h(r,{children:x})]})}),g(c,{modal:!0,children:[h(u,{asChild:!0,children:h(n,{children:g(e,{variant:`outline`,color:`muted`,className:p(`w-full pl-3 text-left font-normal`,`outline-border-weak font-normal`,`hover:outline-border`,`data-[state=open]:text-text-positive-muted`,`data-[state=open]:outline-1`,`data-[state=open]:outline-primary-strong`,`data-[state=open]:ring-primary-weak`,`data-[state=open]:ring-4`,`focus:border-primary-strong`,`focus:ring-4`,`focus:ring-primary-weak`,`focus:outline-1`,`focus:outline-primary-strong`,!i.value&&`text-text-positive-muted`),children:[i.value?_(i.value,`PPP`):g(`span`,{children:[` `,b||`Pick a date`]}),h(f,{className:`text-text-positive-weak ml-auto size-4`})]})})}),h(l,{className:`w-auto p-0`,align:`start`,children:h(d,{mode:`single`,selected:i.value,onSelect:e=>{i.onChange(e?.toISOString())},captionLayout:`dropdown`,disabled:e=>e<new Date(`2022-01-01`)})})]}),S&&h(s,{})]})});export{v as DateField};
 //# sourceMappingURL=date-field.js.map

package/dist/forms/date-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-field.js","names":[],"sources":["../../packages/components/forms/date-field.tsx"],"sourcesContent":["'use client'\nimport type { FieldPath, FieldValues } from 'react-hook-form'\nimport { format } from '@customafk/react-toolkit/date-fns'\nimport { cn } from '@customafk/react-toolkit/utils'\n\nimport { CalendarIcon } from 'lucide-react'\n\nimport { Button } from '../ui/button'\nimport { Calendar } from '../ui/calendar'\nimport { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '../ui/popover'\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  name: FieldPath<TFieldValues>\n  label?: string\n  placeholder?: string\n  description?: string\n  isShowErrorMsg?: boolean\n  modal?: boolean\n}\n\nexport const DateField = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  label = 'Date Field',\n  placeholder = 'Select a date',\n  description = '',\n  isShowErrorMsg = false,\n}: Props<TFieldValues>) => {\n  return (\n    <FormField\n      name={name}\n      render={({ field }) => (\n        <FormItem className=\"w-full\">\n          <FormLabel>{label}</FormLabel>\n          <Popover modal>\n            <PopoverTrigger asChild>\n              <FormControl>\n                <Button\n                  variant=\"outline\"\n                  color=\"muted\"\n                  className={cn(\n                    'w-full pl-3 text-left font-normal',\n                    'outline-border-weak font-normal',\n                    'hover:outline-border',\n                    'data-[state=open]:text-text-positive-muted',\n                    'data-[state=open]:outline-1',\n                    'data-[state=open]:outline-primary-strong',\n                    'data-[state=open]:ring-primary-weak',\n                    'data-[state=open]:ring-4',\n                    'focus:border-primary-strong',\n                    'focus:ring-4',\n                    'focus:ring-primary-weak',\n                    'focus:outline-1',\n                    'focus:outline-primary-strong',\n                    !field.value && 'text-text-positive-muted',\n                  )}\n                >\n                  {field.value ? format(field.value, 'PPP') : <span> {placeholder || 'Pick a date'}</span>}\n                  <CalendarIcon className=\"text-text-positive-weak ml-auto size-4\" />\n                </Button>\n              </FormControl>\n            </PopoverTrigger>\n            <PopoverContent className=\"w-auto p-0\" align=\"start\">\n              <Calendar\n                mode=\"single\"\n                selected={field.value}\n                onSelect={(date) => {\n                  field.onChange(date?.toISOString())\n                }}\n                captionLayout=\"dropdown\"\n                disabled={(date) => date < new Date('2022-01-01')}\n              />\n            </PopoverContent>\n          </Popover>\n          {!!description && <FormDescription>{description}</FormDescription>}\n          {isShowErrorMsg && <FormMessage />}\n        </FormItem>\n      )}\n    />\n  )\n}\n"],"mappings":"ynBAqBA,MAAa,GAA6D,CACxE,OACA,QAAQ,aACR,cAAc,gBACd,cAAc,GACd,iBAAiB,MAGf,EAAC,EAAA,CACO,OACN,QAAS,CAAE,WACT,EAAC,EAAA,CAAS,UAAU,mBAClB,EAAC,EAAA,CAAA,SAAW,IACZ,EAAC,EAAA,CAAQ,MAAA,aACP,EAAC,EAAA,CAAe,QAAA,YACd,EAAC,EAAA,CAAA,SACC,EAAC,EAAA,CACC,QAAQ,UACR,MAAM,QACN,UAAW,EACT,oCACA,kCACA,uBACA,6CACA,8BACA,2CACA,sCACA,2BACA,8BACA,eACA,0BACA,kBACA,+BACA,CAAC,EAAM,OAAS,sCAGjB,EAAM,MAAQ,EAAO,EAAM,MAAO,OAAS,EAAC,OAAA,CAAA,SAAA,CAAK,IAAE,GAAe,iBACnE,EAAC,EAAA,CAAa,UAAU,kDAI9B,EAAC,EAAA,CAAe,UAAU,aAAa,MAAM,iBAC3C,EAAC,EAAA,CACC,KAAK,SACL,SAAU,EAAM,MAChB,SAAW,GAAS,CAClB,EAAM,SAAS,GAAM,gBAEvB,cAAc,WACd,SAAW,GAAS,EAAO,IAAI,KAAK,qBAIzC,CAAC,CAAC,GAAe,EAAC,EAAA,CAAA,SAAiB,IACnC,GAAkB,EAAC,EAAA"}
+{"version":3,"file":"date-field.js","names":[],"sources":["../../packages/components/forms/date-field.tsx"],"sourcesContent":["'use client';\nimport { Activity } from 'react';\nimport type { FieldPath, FieldValues } from 'react-hook-form';\n\nimport { CalendarIcon } from 'lucide-react';\n\nimport { format } from '@customafk/react-toolkit/date-fns';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '../ui/button';\nimport { Calendar } from '../ui/calendar';\nimport { FieldContent } from '../ui/field';\nimport { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../ui/form';\nimport { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  name: FieldPath<TFieldValues>;\n  label?: string;\n  placeholder?: string;\n  description?: string;\n  isShowErrorMsg?: boolean;\n  modal?: boolean;\n};\n\nexport const DateField = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  label = 'Date Field',\n  placeholder = 'Select a date',\n  description = '',\n  isShowErrorMsg = false,\n}: Props<TFieldValues>) => {\n  return (\n    <FormField\n      name={name}\n      render={({ field }) => (\n        <FormItem>\n          <Activity mode={label || description ? 'visible' : 'hidden'}>\n            <FieldContent>\n              <FormLabel>{label}</FormLabel>\n              {!!description && <FormDescription>{description}</FormDescription>}\n            </FieldContent>\n          </Activity>\n          <Popover modal>\n            <PopoverTrigger asChild>\n              <FormControl>\n                <Button\n                  variant=\"outline\"\n                  color=\"muted\"\n                  className={cn(\n                    'w-full pl-3 text-left font-normal',\n                    'outline-border-weak font-normal',\n                    'hover:outline-border',\n                    'data-[state=open]:text-text-positive-muted',\n                    'data-[state=open]:outline-1',\n                    'data-[state=open]:outline-primary-strong',\n                    'data-[state=open]:ring-primary-weak',\n                    'data-[state=open]:ring-4',\n                    'focus:border-primary-strong',\n                    'focus:ring-4',\n                    'focus:ring-primary-weak',\n                    'focus:outline-1',\n                    'focus:outline-primary-strong',\n                    !field.value && 'text-text-positive-muted'\n                  )}\n                >\n                  {field.value ? format(field.value, 'PPP') : <span> {placeholder || 'Pick a date'}</span>}\n                  <CalendarIcon className=\"text-text-positive-weak ml-auto size-4\" />\n                </Button>\n              </FormControl>\n            </PopoverTrigger>\n            <PopoverContent className=\"w-auto p-0\" align=\"start\">\n              <Calendar\n                mode=\"single\"\n                selected={field.value}\n                onSelect={date => {\n                  field.onChange(date?.toISOString());\n                }}\n                captionLayout=\"dropdown\"\n                disabled={date => date < new Date('2022-01-01')}\n              />\n            </PopoverContent>\n          </Popover>\n          {isShowErrorMsg && <FormMessage />}\n        </FormItem>\n      )}\n    />\n  );\n};\n"],"mappings":"+uBAwBA,MAAa,GAA6D,CACxE,OACA,QAAQ,aACR,cAAc,gBACd,cAAc,GACd,iBAAiB,MAGf,EAAC,EAAA,CACO,OACN,QAAS,CAAE,WACT,EAAC,EAAA,CAAA,SAAA,CACC,EAAC,EAAA,CAAS,KAAM,GAAS,EAAc,UAAY,kBACjD,EAAC,EAAA,CAAA,SAAA,CACC,EAAC,EAAA,CAAA,SAAW,EAAA,CAAkB,CAC7B,CAAC,CAAC,GAAe,EAAC,EAAA,CAAA,SAAiB,EAAA,CAA8B,CAAA,CAAA,CACrD,EACN,CACX,EAAC,EAAA,CAAQ,MAAA,aACP,EAAC,EAAA,CAAe,QAAA,YACd,EAAC,EAAA,CAAA,SACC,EAAC,EAAA,CACC,QAAQ,UACR,MAAM,QACN,UAAW,EACT,oCACA,kCACA,uBACA,6CACA,8BACA,2CACA,sCACA,2BACA,8BACA,eACA,0BACA,kBACA,+BACA,CAAC,EAAM,OAAS,2BACjB,WAEA,EAAM,MAAQ,EAAO,EAAM,MAAO,MAAM,CAAG,EAAC,OAAA,CAAA,SAAA,CAAK,IAAE,GAAe,cAAA,CAAA,CAAqB,CACxF,EAAC,EAAA,CAAa,UAAU,yCAAA,CAA2C,CAAA,EAC5D,CAAA,CACG,EACC,CACjB,EAAC,EAAA,CAAe,UAAU,aAAa,MAAM,iBAC3C,EAAC,EAAA,CACC,KAAK,SACL,SAAU,EAAM,MAChB,SAAU,GAAQ,CAChB,EAAM,SAAS,GAAM,aAAa,CAAC,EAErC,cAAc,WACd,SAAU,GAAQ,EAAO,IAAI,KAAK,aAAa,EAC/C,EACa,CAAA,EACT,CACT,GAAkB,EAAC,EAAA,EAAA,CAAc,GACzB,EAEb"}

package/dist/forms/form-wrapper.cjs

@@ -1 +1 @@
-require(`../button-variants-CCiseNSC.cjs`),require(`../label-CHNSlaoz.cjs`),require(`../form-DyH5iWq7.cjs`),require(`../alert-dialog-BgEaBYoh.cjs`),require(`../error-dialog-C3b4fqAI.cjs`);const e=require(`../form-wrapper-CI2iMUNJ.cjs`);exports.FormWrapper=e.FormWrapper;
+require(`../button-variants-DdVxfrSx.cjs`),require(`../alert-dialog-B-m2RVMu.cjs`),require(`../error-dialog-bra3vccX.cjs`),require(`../label-D6mAvVmw.cjs`),require(`../separator-DMMoR-d2.cjs`),require(`../field-A43YZ5Wj.cjs`),require(`../form-DV9tQbiO.cjs`);const e=require(`../form-wrapper-vue82rfg.cjs`);exports.FormWrapper=e.FormWrapper;

package/dist/forms/form-wrapper.d.cts

@@ -1,10 +1,12 @@
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime4 from "react/jsx-runtime";
 import { FieldValues, FormState, SubmitErrorHandler, UseFormProps } from "react-hook-form";
 
 //#region packages/components/forms/form-wrapper.d.ts
 type Props<TFieldValues extends FieldValues = FieldValues> = {
   form: UseFormProps<TFieldValues>;
   isResetAfterSubmit?: boolean;
+  title?: string;
+  description?: string;
   className?: string;
   onSubmit: (data: TFieldValues, formState: FormState<FieldValues>, dirtyFields: FormState<FieldValues>['dirtyFields']) => void | Promise<void>;
   onError?: SubmitErrorHandler<TFieldValues>;
@@ -13,12 +15,14 @@ type Props<TFieldValues extends FieldValues = FieldValues> = {
 declare const FormWrapper: <TFieldValues extends FieldValues = FieldValues>({
   form: FormConfig,
   isResetAfterSubmit,
+  title,
+  description,
   className,
   onSubmit,
   onError,
   onSubcribe,
   children
-}: React.PropsWithChildren<Props<TFieldValues>>) => react_jsx_runtime2.JSX.Element;
+}: React.PropsWithChildren<Props<TFieldValues>>) => react_jsx_runtime4.JSX.Element;
 //#endregion
 export { FormWrapper };
 //# sourceMappingURL=form-wrapper.d.cts.map

package/dist/forms/form-wrapper.d.ts

@@ -1,10 +1,12 @@
-import * as react_jsx_runtime4 from "react/jsx-runtime";
+import * as react_jsx_runtime3 from "react/jsx-runtime";
 import { FieldValues, FormState, SubmitErrorHandler, UseFormProps } from "react-hook-form";
 
 //#region packages/components/forms/form-wrapper.d.ts
 type Props<TFieldValues extends FieldValues = FieldValues> = {
   form: UseFormProps<TFieldValues>;
   isResetAfterSubmit?: boolean;
+  title?: string;
+  description?: string;
   className?: string;
   onSubmit: (data: TFieldValues, formState: FormState<FieldValues>, dirtyFields: FormState<FieldValues>['dirtyFields']) => void | Promise<void>;
   onError?: SubmitErrorHandler<TFieldValues>;
@@ -13,12 +15,14 @@ type Props<TFieldValues extends FieldValues = FieldValues> = {
 declare const FormWrapper: <TFieldValues extends FieldValues = FieldValues>({
   form: FormConfig,
   isResetAfterSubmit,
+  title,
+  description,
   className,
   onSubmit,
   onError,
   onSubcribe,
   children
-}: React.PropsWithChildren<Props<TFieldValues>>) => react_jsx_runtime4.JSX.Element;
+}: React.PropsWithChildren<Props<TFieldValues>>) => react_jsx_runtime3.JSX.Element;
 //#endregion
 export { FormWrapper };
 //# sourceMappingURL=form-wrapper.d.ts.map

package/dist/forms/form-wrapper.js

@@ -1 +1 @@
-import"../button-variants-Y1GTBayz.js";import"../label-CdrxlBJ8.js";import"../form-BT1TbgK6.js";import"../alert-dialog-UwGNuTYk.js";import"../error-dialog-BF1VNZXk.js";import{FormWrapper as e}from"../form-wrapper-DaguHv9W.js";export{e as FormWrapper};
+import"../button-variants-Y1GTBayz.js";import"../alert-dialog-DcQKEgVC.js";import"../error-dialog-BeYJOtSH.js";import"../label-CdrxlBJ8.js";import"../separator-D17HxS2f.js";import"../field-CGacT8J3.js";import"../form-B_tL9lO4.js";import{FormWrapper as e}from"../form-wrapper-BKTvSrZY.js";export{e as FormWrapper};

package/dist/forms/multi-select-field.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require(`../chunk-CUT6urMc.cjs`);require(`../dist-D0uO1qIz.cjs`),require(`../button-variants-CCiseNSC.cjs`),require(`../button-CuV2l4ge.cjs`),require(`../dialog-BSdn3QaW.cjs`),require(`../command-DHGZlBKd.cjs`),require(`../label-CHNSlaoz.cjs`);const t=require(`../form-DyH5iWq7.cjs`),n=require(`../multi-select-C0dFenI-.cjs`),r=e.__toESM(require(`react/jsx-runtime`)),i=({name:e,label:i=`Multi Select Field`,isShowLabel:a=!0,isShowErrorMsg:o,placeholder:s=`Select options`,description:c=``,options:l=[],onAdd:u})=>(0,r.jsx)(t.FormField,{name:e,render:({field:{value:e,onChange:d}})=>{let f=l.filter(t=>e?.includes(t.value)),p=e=>{let t=e.map(e=>e.value);d(t)};return(0,r.jsxs)(t.FormItem,{className:`w-full gap-0`,children:[a&&(0,r.jsx)(t.FormLabel,{children:i}),(0,r.jsx)(t.FormControl,{children:(0,r.jsx)(n.MultipleSelector,{placeholder:s,emptyIndicator:`No options available`,value:f,options:l,onChange:p,onAddNewItem:u})}),!!c&&(0,r.jsx)(t.FormDescription,{children:c}),o&&(0,r.jsx)(t.FormMessage,{})]})}});exports.MultiSelectField=i;
+"use client";const e=require(`../chunk-CUT6urMc.cjs`);require(`../dist-CAevLI5t.cjs`),require(`../button-variants-DdVxfrSx.cjs`),require(`../button-BaLuKPtr.cjs`),require(`../label-D6mAvVmw.cjs`),require(`../separator-DMMoR-d2.cjs`);const t=require(`../field-A43YZ5Wj.cjs`),n=require(`../form-DV9tQbiO.cjs`);require(`../dialog-BBODhbxh.cjs`),require(`../command-C13pL2M3.cjs`);const r=require(`../multi-select-D38JwSYL.cjs`);let i=require(`react`);i=e.__toESM(i);let a=require(`react/jsx-runtime`);a=e.__toESM(a);const o=({name:e,label:o=`Multi Select Field`,isShowLabel:s=!0,isShowErrorMsg:c,placeholder:l=`Select options`,description:u=``,className:d=``,options:f=[],onAdd:p})=>(0,a.jsx)(n.FormField,{name:e,render:({field:{value:e,onChange:m}})=>{let h=f.filter(t=>e?.includes(t.value));return(0,a.jsxs)(n.FormItem,{className:d,children:[(0,a.jsx)(i.Activity,{mode:o||u?`visible`:`hidden`,children:(0,a.jsxs)(t.FieldContent,{children:[s&&(0,a.jsx)(n.FormLabel,{children:o}),!!u&&(0,a.jsx)(n.FormDescription,{children:u})]})}),(0,a.jsx)(n.FormControl,{children:(0,a.jsx)(r.MultipleSelector,{placeholder:l,emptyIndicator:`No options available`,value:h,options:f,onChange:e=>{let t=e.map(e=>e.value);m(t)},onAddNewItem:p})}),c&&(0,a.jsx)(n.FormMessage,{})]})}});exports.MultiSelectField=o;
 //# sourceMappingURL=multi-select-field.cjs.map

package/dist/forms/multi-select-field.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"multi-select-field.cjs","names":["FormField","value","FormItem","FormLabel","FormControl","MultipleSelector","FormDescription","FormMessage"],"sources":["../../packages/components/forms/multi-select-field.tsx"],"sourcesContent":["'use client'\nimport type { FieldPath, FieldValues } from 'react-hook-form'\n\nimport { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../ui/form'\nimport { MultipleSelector, type Option } from '../ui/multi-select'\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  name: FieldPath<TFieldValues>\n  isShowLabel?: boolean\n  isShowErrorMsg?: boolean\n  label?: string\n  description?: string\n  placeholder?: string\n  options?: { value: string; label: string }[]\n  onAdd?: () => void\n}\nexport const MultiSelectField = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  label = 'Multi Select Field',\n  isShowLabel = true,\n  isShowErrorMsg,\n  placeholder = 'Select options',\n  description = '',\n  options = [],\n  onAdd,\n}: Props<TFieldValues>) => {\n  return (\n    <FormField\n      name={name}\n      render={({ field: { value, onChange } }) => {\n        const val = options.filter((option) => value?.includes(option.value))\n        const handleOnChange = (value: Option[]) => {\n          const selectedValues = value.map((v) => v.value)\n          onChange(selectedValues)\n        }\n        return (\n          <FormItem className=\"w-full gap-0\">\n            {isShowLabel && <FormLabel>{label}</FormLabel>}\n            <FormControl>\n              <MultipleSelector\n                placeholder={placeholder}\n                emptyIndicator=\"No options available\"\n                value={val}\n                options={options}\n                onChange={handleOnChange}\n                onAddNewItem={onAdd}\n              />\n            </FormControl>\n            {!!description && <FormDescription>{description}</FormDescription>}\n            {isShowErrorMsg && <FormMessage />}\n          </FormItem>\n        )\n      }}\n    />\n  )\n}\n"],"mappings":"qYAgBa,GAAoE,CAC/E,OACA,QAAQ,qBACR,cAAc,GACd,iBACA,cAAc,iBACd,cAAc,GACd,UAAU,GACV,YAGE,EAAA,EAAA,KAACA,EAAAA,UAAAA,CACO,OACN,QAAS,CAAE,MAAO,CAAE,QAAO,eAAiB,CAC1C,IAAM,EAAM,EAAQ,OAAQ,GAAW,GAAO,SAAS,EAAO,QACxD,EAAkB,GAAoB,CAC1C,IAAM,EAAiBC,EAAM,IAAK,GAAM,EAAE,OAC1C,EAAS,IAEX,OACE,EAAA,EAAA,MAACC,EAAAA,SAAAA,CAAS,UAAU,yBACjB,IAAe,EAAA,EAAA,KAACC,EAAAA,UAAAA,CAAAA,SAAW,KAC5B,EAAA,EAAA,KAACC,EAAAA,YAAAA,CAAAA,UACC,EAAA,EAAA,KAACC,EAAAA,iBAAAA,CACc,cACb,eAAe,uBACf,MAAO,EACE,UACT,SAAU,EACV,aAAc,MAGjB,CAAC,CAAC,IAAe,EAAA,EAAA,KAACC,EAAAA,gBAAAA,CAAAA,SAAiB,IACnC,IAAkB,EAAA,EAAA,KAACC,EAAAA,YAAAA"}
+{"version":3,"file":"multi-select-field.cjs","names":["FormField","value","FormItem","Activity","FieldContent","FormLabel","FormDescription","FormControl","MultipleSelector","FormMessage"],"sources":["../../packages/components/forms/multi-select-field.tsx"],"sourcesContent":["'use client';\nimport { Activity } from 'react';\nimport type { FieldPath, FieldValues } from 'react-hook-form';\n\nimport { FieldContent } from '../ui/field';\nimport { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../ui/form';\nimport { MultipleSelector, type Option } from '../ui/multi-select';\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  name: FieldPath<TFieldValues>;\n  isShowLabel?: boolean;\n  isShowErrorMsg?: boolean;\n  className?: string;\n  label?: string;\n  description?: string;\n  placeholder?: string;\n  options?: { value: string; label: string }[];\n  onAdd?: () => void;\n};\nexport const MultiSelectField = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  label = 'Multi Select Field',\n  isShowLabel = true,\n  isShowErrorMsg,\n  placeholder = 'Select options',\n  description = '',\n  className = '',\n  options = [],\n  onAdd,\n}: Props<TFieldValues>) => {\n  return (\n    <FormField\n      name={name}\n      render={({ field: { value, onChange } }) => {\n        const val = options.filter(option => value?.includes(option.value));\n        const handleOnChange = (value: Option[]) => {\n          const selectedValues = value.map(v => v.value);\n          onChange(selectedValues);\n        };\n        return (\n          <FormItem className={className}>\n            <Activity mode={label || description ? 'visible' : 'hidden'}>\n              <FieldContent>\n                {isShowLabel && <FormLabel>{label}</FormLabel>}\n                {!!description && <FormDescription>{description}</FormDescription>}\n              </FieldContent>\n            </Activity>\n            <FormControl>\n              <MultipleSelector\n                placeholder={placeholder}\n                emptyIndicator=\"No options available\"\n                value={val}\n                options={options}\n                onChange={handleOnChange}\n                onAddNewItem={onAdd}\n              />\n            </FormControl>\n            {isShowErrorMsg && <FormMessage />}\n          </FormItem>\n        );\n      }}\n    />\n  );\n};\n"],"mappings":"igBAmBA,MAAa,GAAoE,CAC/E,OACA,QAAQ,qBACR,cAAc,GACd,iBACA,cAAc,iBACd,cAAc,GACd,YAAY,GACZ,UAAU,EAAE,CACZ,YAGE,EAAA,EAAA,KAACA,EAAAA,UAAAA,CACO,OACN,QAAS,CAAE,MAAO,CAAE,QAAO,eAAiB,CAC1C,IAAM,EAAM,EAAQ,OAAO,GAAU,GAAO,SAAS,EAAO,MAAM,CAAC,CAKnE,OACE,EAAA,EAAA,MAACE,EAAAA,SAAAA,CAAoB,uBACnB,EAAA,EAAA,KAACC,EAAAA,SAAAA,CAAS,KAAM,GAAS,EAAc,UAAY,mBACjD,EAAA,EAAA,MAACC,EAAAA,aAAAA,CAAAA,SAAAA,CACE,IAAe,EAAA,EAAA,KAACC,EAAAA,UAAAA,CAAAA,SAAW,EAAA,CAAkB,CAC7C,CAAC,CAAC,IAAe,EAAA,EAAA,KAACC,EAAAA,gBAAAA,CAAAA,SAAiB,EAAA,CAA8B,CAAA,CAAA,CACrD,EACN,EACX,EAAA,EAAA,KAACC,EAAAA,YAAAA,CAAAA,UACC,EAAA,EAAA,KAACC,EAAAA,iBAAAA,CACc,cACb,eAAe,uBACf,MAAO,EACE,UACT,SAlBgB,GAAoB,CAC1C,IAAM,EAAiBP,EAAM,IAAI,GAAK,EAAE,MAAM,CAC9C,EAAS,EAAe,EAiBlB,aAAc,GACd,CAAA,CACU,CACb,IAAkB,EAAA,EAAA,KAACQ,EAAAA,YAAAA,EAAAA,CAAc,GACzB,GAGf"}

package/dist/forms/multi-select-field.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime5 from "react/jsx-runtime";
 import { FieldPath, FieldValues } from "react-hook-form";
 
 //#region packages/components/forms/multi-select-field.d.ts
@@ -6,6 +6,7 @@ type Props<TFieldValues extends FieldValues = FieldValues> = {
   name: FieldPath<TFieldValues>;
   isShowLabel?: boolean;
   isShowErrorMsg?: boolean;
+  className?: string;
   label?: string;
   description?: string;
   placeholder?: string;
@@ -22,9 +23,10 @@ declare const MultiSelectField: <TFieldValues extends FieldValues = FieldValues>
   isShowErrorMsg,
   placeholder,
   description,
+  className,
   options,
   onAdd
-}: Props<TFieldValues>) => react_jsx_runtime0.JSX.Element;
+}: Props<TFieldValues>) => react_jsx_runtime5.JSX.Element;
 //#endregion
 export { MultiSelectField };
 //# sourceMappingURL=multi-select-field.d.cts.map

package/dist/forms/multi-select-field.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime3 from "react/jsx-runtime";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
 import { FieldPath, FieldValues } from "react-hook-form";
 
 //#region packages/components/forms/multi-select-field.d.ts
@@ -6,6 +6,7 @@ type Props<TFieldValues extends FieldValues = FieldValues> = {
   name: FieldPath<TFieldValues>;
   isShowLabel?: boolean;
   isShowErrorMsg?: boolean;
+  className?: string;
   label?: string;
   description?: string;
   placeholder?: string;
@@ -22,9 +23,10 @@ declare const MultiSelectField: <TFieldValues extends FieldValues = FieldValues>
   isShowErrorMsg,
   placeholder,
   description,
+  className,
   options,
   onAdd
-}: Props<TFieldValues>) => react_jsx_runtime3.JSX.Element;
+}: Props<TFieldValues>) => react_jsx_runtime2.JSX.Element;
 //#endregion
 export { MultiSelectField };
 //# sourceMappingURL=multi-select-field.d.ts.map

package/dist/forms/multi-select-field.js

@@ -1,2 +1,2 @@
-"use client";import"../dist-CkzytVha.js";import"../button-variants-Y1GTBayz.js";import"../button-DhQJ9Ey8.js";import"../dialog-B2LS2JLb.js";import"../command-DhSE6UaR.js";import"../label-CdrxlBJ8.js";import{FormControl as e,FormDescription as t,FormField as n,FormItem as r,FormLabel as i,FormMessage as a}from"../form-BT1TbgK6.js";import{MultipleSelector as o}from"../multi-select-l0HITJuv.js";import{jsx as s,jsxs as c}from"react/jsx-runtime";const l=({name:l,label:u=`Multi Select Field`,isShowLabel:d=!0,isShowErrorMsg:f,placeholder:p=`Select options`,description:m=``,options:h=[],onAdd:g})=>s(n,{name:l,render:({field:{value:n,onChange:l}})=>{let _=h.filter(e=>n?.includes(e.value)),v=e=>{let t=e.map(e=>e.value);l(t)};return c(r,{className:`w-full gap-0`,children:[d&&s(i,{children:u}),s(e,{children:s(o,{placeholder:p,emptyIndicator:`No options available`,value:_,options:h,onChange:v,onAddNewItem:g})}),!!m&&s(t,{children:m}),f&&s(a,{})]})}});export{l as MultiSelectField};
+"use client";import"../dist-BgkALM7U.js";import"../button-variants-Y1GTBayz.js";import"../button-CYsnwc1-.js";import"../label-CdrxlBJ8.js";import"../separator-D17HxS2f.js";import{FieldContent as e}from"../field-CGacT8J3.js";import{FormControl as t,FormDescription as n,FormField as r,FormItem as i,FormLabel as a,FormMessage as o}from"../form-B_tL9lO4.js";import"../dialog-BAlJ18xi.js";import"../command-UXLmHGja.js";import{MultipleSelector as s}from"../multi-select-C66U77ON.js";import{Activity as c}from"react";import{jsx as l,jsxs as u}from"react/jsx-runtime";const d=({name:d,label:f=`Multi Select Field`,isShowLabel:p=!0,isShowErrorMsg:m,placeholder:h=`Select options`,description:g=``,className:_=``,options:v=[],onAdd:y})=>l(r,{name:d,render:({field:{value:r,onChange:d}})=>{let b=v.filter(e=>r?.includes(e.value));return u(i,{className:_,children:[l(c,{mode:f||g?`visible`:`hidden`,children:u(e,{children:[p&&l(a,{children:f}),!!g&&l(n,{children:g})]})}),l(t,{children:l(s,{placeholder:h,emptyIndicator:`No options available`,value:b,options:v,onChange:e=>{let t=e.map(e=>e.value);d(t)},onAddNewItem:y})}),m&&l(o,{})]})}});export{d as MultiSelectField};
 //# sourceMappingURL=multi-select-field.js.map

package/dist/forms/multi-select-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"multi-select-field.js","names":["value"],"sources":["../../packages/components/forms/multi-select-field.tsx"],"sourcesContent":["'use client'\nimport type { FieldPath, FieldValues } from 'react-hook-form'\n\nimport { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../ui/form'\nimport { MultipleSelector, type Option } from '../ui/multi-select'\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  name: FieldPath<TFieldValues>\n  isShowLabel?: boolean\n  isShowErrorMsg?: boolean\n  label?: string\n  description?: string\n  placeholder?: string\n  options?: { value: string; label: string }[]\n  onAdd?: () => void\n}\nexport const MultiSelectField = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  label = 'Multi Select Field',\n  isShowLabel = true,\n  isShowErrorMsg,\n  placeholder = 'Select options',\n  description = '',\n  options = [],\n  onAdd,\n}: Props<TFieldValues>) => {\n  return (\n    <FormField\n      name={name}\n      render={({ field: { value, onChange } }) => {\n        const val = options.filter((option) => value?.includes(option.value))\n        const handleOnChange = (value: Option[]) => {\n          const selectedValues = value.map((v) => v.value)\n          onChange(selectedValues)\n        }\n        return (\n          <FormItem className=\"w-full gap-0\">\n            {isShowLabel && <FormLabel>{label}</FormLabel>}\n            <FormControl>\n              <MultipleSelector\n                placeholder={placeholder}\n                emptyIndicator=\"No options available\"\n                value={val}\n                options={options}\n                onChange={handleOnChange}\n                onAddNewItem={onAdd}\n              />\n            </FormControl>\n            {!!description && <FormDescription>{description}</FormDescription>}\n            {isShowErrorMsg && <FormMessage />}\n          </FormItem>\n        )\n      }}\n    />\n  )\n}\n"],"mappings":"6bAgBA,MAAa,GAAoE,CAC/E,OACA,QAAQ,qBACR,cAAc,GACd,iBACA,cAAc,iBACd,cAAc,GACd,UAAU,GACV,WAGE,EAAC,EAAA,CACO,OACN,QAAS,CAAE,MAAO,CAAE,QAAO,eAAiB,CAC1C,IAAM,EAAM,EAAQ,OAAQ,GAAW,GAAO,SAAS,EAAO,QACxD,EAAkB,GAAoB,CAC1C,IAAM,EAAiBA,EAAM,IAAK,GAAM,EAAE,OAC1C,EAAS,IAEX,OACE,EAAC,EAAA,CAAS,UAAU,yBACjB,GAAe,EAAC,EAAA,CAAA,SAAW,IAC5B,EAAC,EAAA,CAAA,SACC,EAAC,EAAA,CACc,cACb,eAAe,uBACf,MAAO,EACE,UACT,SAAU,EACV,aAAc,MAGjB,CAAC,CAAC,GAAe,EAAC,EAAA,CAAA,SAAiB,IACnC,GAAkB,EAAC,EAAA"}
+{"version":3,"file":"multi-select-field.js","names":["value"],"sources":["../../packages/components/forms/multi-select-field.tsx"],"sourcesContent":["'use client';\nimport { Activity } from 'react';\nimport type { FieldPath, FieldValues } from 'react-hook-form';\n\nimport { FieldContent } from '../ui/field';\nimport { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../ui/form';\nimport { MultipleSelector, type Option } from '../ui/multi-select';\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  name: FieldPath<TFieldValues>;\n  isShowLabel?: boolean;\n  isShowErrorMsg?: boolean;\n  className?: string;\n  label?: string;\n  description?: string;\n  placeholder?: string;\n  options?: { value: string; label: string }[];\n  onAdd?: () => void;\n};\nexport const MultiSelectField = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  label = 'Multi Select Field',\n  isShowLabel = true,\n  isShowErrorMsg,\n  placeholder = 'Select options',\n  description = '',\n  className = '',\n  options = [],\n  onAdd,\n}: Props<TFieldValues>) => {\n  return (\n    <FormField\n      name={name}\n      render={({ field: { value, onChange } }) => {\n        const val = options.filter(option => value?.includes(option.value));\n        const handleOnChange = (value: Option[]) => {\n          const selectedValues = value.map(v => v.value);\n          onChange(selectedValues);\n        };\n        return (\n          <FormItem className={className}>\n            <Activity mode={label || description ? 'visible' : 'hidden'}>\n              <FieldContent>\n                {isShowLabel && <FormLabel>{label}</FormLabel>}\n                {!!description && <FormDescription>{description}</FormDescription>}\n              </FieldContent>\n            </Activity>\n            <FormControl>\n              <MultipleSelector\n                placeholder={placeholder}\n                emptyIndicator=\"No options available\"\n                value={val}\n                options={options}\n                onChange={handleOnChange}\n                onAddNewItem={onAdd}\n              />\n            </FormControl>\n            {isShowErrorMsg && <FormMessage />}\n          </FormItem>\n        );\n      }}\n    />\n  );\n};\n"],"mappings":"mjBAmBA,MAAa,GAAoE,CAC/E,OACA,QAAQ,qBACR,cAAc,GACd,iBACA,cAAc,iBACd,cAAc,GACd,YAAY,GACZ,UAAU,EAAE,CACZ,WAGE,EAAC,EAAA,CACO,OACN,QAAS,CAAE,MAAO,CAAE,QAAO,eAAiB,CAC1C,IAAM,EAAM,EAAQ,OAAO,GAAU,GAAO,SAAS,EAAO,MAAM,CAAC,CAKnE,OACE,EAAC,EAAA,CAAoB,sBACnB,EAAC,EAAA,CAAS,KAAM,GAAS,EAAc,UAAY,kBACjD,EAAC,EAAA,CAAA,SAAA,CACE,GAAe,EAAC,EAAA,CAAA,SAAW,EAAA,CAAkB,CAC7C,CAAC,CAAC,GAAe,EAAC,EAAA,CAAA,SAAiB,EAAA,CAA8B,CAAA,CAAA,CACrD,EACN,CACX,EAAC,EAAA,CAAA,SACC,EAAC,EAAA,CACc,cACb,eAAe,uBACf,MAAO,EACE,UACT,SAlBgB,GAAoB,CAC1C,IAAM,EAAiBA,EAAM,IAAI,GAAK,EAAE,MAAM,CAC9C,EAAS,EAAe,EAiBlB,aAAc,GACd,CAAA,CACU,CACb,GAAkB,EAAC,EAAA,EAAA,CAAc,GACzB,GAGf"}

package/dist/forms/number-field.cjs

@@ -1,2 +1,2 @@
-const e=require(`../chunk-CUT6urMc.cjs`);require(`../label-CHNSlaoz.cjs`);const t=require(`../form-DyH5iWq7.cjs`),n=require(`../input-DfGojpRF.cjs`),r=e.__toESM(require(`@customafk/react-toolkit/utils`)),i=e.__toESM(require(`react`)),a=e.__toESM(require(`react/jsx-runtime`)),o=e.__toESM(require(`react-hook-form`)),s=e=>e?/^-?\d*\.?\d*$/:/^\d*\.?\d*$/,c=e=>Number(e).toLocaleString(),l=({disabled:e=!1,readonly:t=!1,allowNegative:o=!1,numberAfterDecimalPoint:l=2,roundingRule:u=`none`,value:d=``,unitText:f,decimal:p,placeholder:m,precision:h,onChange:g,onValueChange:_,onBlur:v,...y})=>{let b=(0,i.useRef)(null),x=(0,i.useRef)(null),[S,C]=(0,i.useState)(d.toString()),w=p?.[1]??l,T=p&&p[0]-p[1],E=(0,i.useMemo)(()=>s(o),[o]),D=(0,i.useCallback)(e=>{if(!w&&e.includes(`.`))return!1;let t=e.split(`.`)[1];return!t||t.length<=w},[w]),O=(0,i.useCallback)(e=>{if(!p||e===`-`)return!0;let[t,n=``]=e.split(`.`);return n.length<=p[1]&&(t.startsWith(`-`)?t.length-1:t.length)<=T},[p,T]),k=(0,i.useCallback)((e,t)=>{if(u===`none`)return e;let n=Math.pow(10,t),r=e*n;switch(u){case`up`:return Math.ceil(r)/n;case`down`:return Math.floor(r)/n;case`nearest`:return r%1<.1?Math.floor(r)/n:r%1>=.59?Math.ceil(r)/n:(Math.floor(r)+.5)/n;default:return e}},[u]),A=(0,i.useCallback)(e=>!l&&e.includes(`.`)||e.split(`.`)[1]?.length>l,[l]),j=(0,i.useCallback)(e=>{if(e===`0`)return`0`;if(!Number(e))return``;let t=parseFloat(e),n=Math.min(w-1,h||0),r=k(t,n).toString(),[i,a=``]=r.split(`.`),o=c(i);return a?`${o}.${a}`:o},[k,w,h]),M=(0,i.useCallback)(e=>{if(!p||e===`-`)return!0;let[t,n=``]=e.split(`.`),r=t.startsWith(`-`)?t.length-1:t.length,i=p[0]-p[1];return n.length<=p[1]&&r<=i},[p]),N=(0,i.useCallback)(e=>{g?.(e);let{value:t}=e.target;if(!t){_?.(void 0),C(``);return}let n=t===`0`,r=t===`-`&&o;if(n||r){_?.(0),C(t);return}let i=E.test(t)&&O(t)&&(p||D(t));if(!i)return;let a=parseFloat(t)||0;_?.(a),C(t)},[o,p,D,O,g,_,E]),P=(0,i.useCallback)(()=>{t||C(e=>e.replace(/,/g,``))},[t]),F=(0,i.useCallback)(()=>{t||(v?.(),C(e=>j(e)))},[t,v,j]);return(0,i.useEffect)(()=>{let e=document.activeElement===x.current;if(!d||!E.test(d.toString())||!M(d.toString())||!p&&A(d.toString())){C(``);return}C(t=>t===`-`?`-`:t?e?d.toString():j(d.toString()):``)},[p,j,d,A,M,E]),(0,i.useEffect)(()=>{if(!b.current||!x.current||!f)return;let e=b.current.offsetWidth;x.current.style.setProperty(`padding-right`,`${(e+10)/16}rem`)},[e,f]),(0,a.jsxs)(`div`,{className:`relative`,children:[(0,a.jsx)(n.Input,{...y,ref:x,value:S||(t?`0`:``),placeholder:m,disabled:e,readOnly:t,className:(0,r.cn)(`font-number text-end`,t&&`bg-muted text-muted-foreground`),onChange:N,onFocus:P,onBlur:F}),f&&(0,a.jsx)(`span`,{ref:b,className:`text-muted-foreground pointer-events-none absolute top-1/2 right-2 -translate-y-1/2 text-sm`,children:f})]})},u=({name:e,label:n=`Number Field`,placeholder:r=`0`,isShowErrorMsg:i=!1,isShowCount:s=!1,unitText:c=``,description:u=``,onValueChange:d})=>{let f=(0,o.useWatch)({name:e});return(0,a.jsx)(t.FormField,{name:e,render:({field:{onChange:e,...o}})=>(0,a.jsxs)(t.FormItem,{className:`w-full gap-0`,children:[(0,a.jsx)(t.FormLabel,{children:n}),(0,a.jsx)(t.FormControl,{children:(0,a.jsx)(l,{...o,placeholder:r,className:`w-full`,unitText:c,onValueChange:t=>{e(t),d?.(t)}})}),s&&(0,a.jsxs)(`div`,{className:`text-muted-foreground text-end text-xs`,children:[f?.length??0,` characters`]}),!!u&&(0,a.jsx)(t.FormDescription,{children:u}),i&&(0,a.jsx)(t.FormMessage,{})]})})};exports.NumberField=u;
+const e=require(`../chunk-CUT6urMc.cjs`);require(`../label-D6mAvVmw.cjs`),require(`../separator-DMMoR-d2.cjs`);const t=require(`../field-A43YZ5Wj.cjs`),n=require(`../form-DV9tQbiO.cjs`),r=require(`../input-D_tClptL.cjs`);let i=require(`@customafk/react-toolkit/utils`);i=e.__toESM(i);let a=require(`react`);a=e.__toESM(a);let o=require(`react/jsx-runtime`);o=e.__toESM(o);let s=require(`react-hook-form`);s=e.__toESM(s);const c=e=>e?/^-?\d*\.?\d*$/:/^\d*\.?\d*$/,l=e=>Number(e).toLocaleString(),u=({disabled:e=!1,readonly:t=!1,allowNegative:n=!1,numberAfterDecimalPoint:s=2,roundingRule:u=`none`,value:d=``,unitText:f,decimal:p,placeholder:m,precision:h,onChange:g,onValueChange:_,onBlur:v,...y})=>{let b=(0,a.useRef)(null),x=(0,a.useRef)(null),[S,C]=(0,a.useState)(d.toString()),w=p?.[1]??s,T=p&&p[0]-p[1],E=(0,a.useMemo)(()=>c(n),[n]),D=(0,a.useCallback)(e=>{if(!w&&e.includes(`.`))return!1;let t=e.split(`.`)[1];return!t||t.length<=w},[w]),O=(0,a.useCallback)(e=>{if(!p||e===`-`)return!0;let[t,n=``]=e.split(`.`);return n.length<=p[1]&&(t.startsWith(`-`)?t.length-1:t.length)<=T},[p,T]),k=(0,a.useCallback)((e,t)=>{if(u===`none`)return e;let n=10**t,r=e*n;switch(u){case`up`:return Math.ceil(r)/n;case`down`:return Math.floor(r)/n;case`nearest`:return r%1<.1?Math.floor(r)/n:r%1>=.59?Math.ceil(r)/n:(Math.floor(r)+.5)/n;default:return e}},[u]),A=(0,a.useCallback)(e=>!s&&e.includes(`.`)||e.split(`.`)[1]?.length>s,[s]),j=(0,a.useCallback)(e=>{if(e===`0`)return`0`;if(!Number(e))return``;let t=parseFloat(e),n=Math.min(w-1,h||0),[r,i=``]=k(t,n).toString().split(`.`),a=l(r);return i?`${a}.${i}`:a},[k,w,h]),M=(0,a.useCallback)(e=>{if(!p||e===`-`)return!0;let[t,n=``]=e.split(`.`),r=t.startsWith(`-`)?t.length-1:t.length,i=p[0]-p[1];return n.length<=p[1]&&r<=i},[p]),N=(0,a.useCallback)(e=>{g?.(e);let{value:t}=e.target;if(!t){_?.(void 0),C(``);return}if(t===`0`||t===`-`&&n){_?.(0),C(t);return}E.test(t)&&O(t)&&(p||D(t))&&(_?.(parseFloat(t)||0),C(t))},[n,p,D,O,g,_,E]),P=(0,a.useCallback)(()=>{t||C(e=>e.replace(/,/g,``))},[t]),F=(0,a.useCallback)(()=>{t||(v?.(),C(e=>j(e)))},[t,v,j]);return(0,a.useEffect)(()=>{let e=document.activeElement===x.current;if(!d||!E.test(d.toString())||!M(d.toString())||!p&&A(d.toString())){C(``);return}C(t=>t===`-`?`-`:t?e?d.toString():j(d.toString()):``)},[p,j,d,A,M,E]),(0,a.useEffect)(()=>{if(!b.current||!x.current||!f)return;let e=b.current.offsetWidth;x.current.style.setProperty(`padding-right`,`${(e+10)/16}rem`)},[e,f]),(0,o.jsxs)(`div`,{className:`relative`,children:[(0,o.jsx)(r.Input,{...y,ref:x,value:S||(t?`0`:``),placeholder:m,disabled:e,readOnly:t,className:(0,i.cn)(`font-number text-end`,t&&`bg-muted text-muted-foreground`),onChange:N,onFocus:P,onBlur:F}),f&&(0,o.jsx)(`span`,{ref:b,className:`text-muted-foreground pointer-events-none absolute top-1/2 right-2 -translate-y-1/2 text-sm`,children:f})]})},d=({name:e,label:r=`Number Field`,placeholder:i=`0`,isShowErrorMsg:c=!1,isShowCount:l=!1,unitText:d=``,description:f=``,onValueChange:p})=>{let m=(0,s.useWatch)({name:e});return(0,o.jsx)(n.FormField,{name:e,render:({field:{onChange:e,...s}})=>(0,o.jsxs)(n.FormItem,{children:[(0,o.jsx)(a.Activity,{mode:r||f?`visible`:`hidden`,children:(0,o.jsxs)(t.FieldContent,{children:[(0,o.jsx)(n.FormLabel,{children:r}),!!f&&(0,o.jsx)(n.FormDescription,{children:f})]})}),(0,o.jsx)(n.FormControl,{children:(0,o.jsx)(u,{...s,placeholder:i,className:`w-full`,unitText:d,onValueChange:t=>{e(t),p?.(t)}})}),l&&(0,o.jsxs)(`div`,{className:`text-muted-foreground text-end text-xs`,children:[m?.length??0,` characters`]}),c&&(0,o.jsx)(n.FormMessage,{})]})})};exports.NumberField=d;
 //# sourceMappingURL=number-field.cjs.map

package/dist/forms/number-field.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"number-field.cjs","names":["NumberInput: React.FC<IProps>","value","precision","maxIntegerLength","Input","FormField","FormItem","FormLabel","FormControl","FormDescription","FormMessage"],"sources":["../../packages/components/ui/inputs/number-input.tsx","../../packages/components/forms/number-field.tsx"],"sourcesContent":["'use client'\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { cn } from '@customafk/react-toolkit/utils'\n\nimport { Input } from '../input'\n\nconst createValidationRegex = (allowNegative: boolean): RegExp => {\n  return allowNegative ? /^-?\\d*\\.?\\d*$/ : /^\\d*\\.?\\d*$/\n}\n\nconst formatNumberWithCommas = (num: number | string): string => {\n  return Number(num).toLocaleString()\n}\n\ninterface IProps extends React.HTMLAttributes<HTMLInputElement> {\n  /**\n   * Description: Value for the text field\n   *\n   * Default: ''\n   *\n   * Usage: Value for the text field\n   */\n  value?: string | number\n  /**\n   * Description: Disabled state of the text field\n   *\n   * Default: `false`\n   *\n   * Usage: Disabled state of the text field\n   *\n   * Note: If true, the text field will be disabled\n   */\n  disabled?: boolean\n  /**\n   * Description: Readonly state of the text field\n   *\n   * Default: `false`\n   *\n   * Usage: Readonly state of the text field\n   */\n  readonly?: boolean\n  /**\n   * Description: Allow negative value for the text field\n   *\n   * Default: `false`\n   *\n   * Usage: Allow negative value for the text field\n   */\n  allowNegative?: boolean\n  /**\n   * Description: Decimal point for the text field\n   *\n   * Default: `undefined`\n   *\n   * Usage: Ex: [12,3] => console.log(2323.23) // True\n   *\n   * Note: IF use this prop, `numberAfterDecimalPoint` will be ignored\n   */\n  decimal?: [number, number]\n  /**\n   * Description: Rounding rule for the text field\n   *\n   * Default: `nearest`\n   *\n   * Usage: Rounding rule for the text field\n   */\n  roundingRule?: 'up' | 'down' | 'nearest' | 'none'\n  /**\n   * Description: Number of digits after the decimal point\n   *\n   * Default: `2`\n   *\n   * Usage: Number of digits after the decimal point\n   */\n  numberAfterDecimalPoint?: number\n  /**\n   * Description: Placeholder for the text field\n   *\n   * Default: ''\n   *\n   * Usage: Placeholder for the text field\n   */\n  placeholder?: string\n  /**\n   * Description: Unit text for the text field\n   *\n   * Default: ''\n   *\n   * E.g. 'kg', 'm', 'USD'...\n   */\n  unitText?: string\n  /**\n   * Description: Invalid state of the text field\n   *\n   * Default: `false`\n   *\n   * Usage: Invalid state of the text field\n   */\n  invalid?: boolean\n  /**\n   * Description: Precision for the text field\n   *\n   * Default: `undefined`\n   * E.g.\n   * - 2.13 => 2.1 when precision is 1\n   * - 2.134 => 2.13 when precision is 2\n   */\n  precision?: number\n  /**\n   * Description: Callback function for the value change\n   * Usage: Callback function for the value change\n   */\n  onValueChange?: (value?: number) => void\n  onBlur?: () => void\n}\n/**\n * ## Unit Text Field Component\n *\n * **Description**: This component is to display common text field with unit\n *\n * **Usage**: Text field with unit example: 1000 (kg), 100 (m), 1000 (USD)...\n */\nexport const NumberInput: React.FC<IProps> = ({\n  disabled = false,\n  readonly = false,\n  allowNegative = false,\n  numberAfterDecimalPoint = 2,\n  roundingRule = 'none',\n  value: initialValue = '',\n  unitText,\n  decimal,\n  placeholder,\n  precision,\n  onChange,\n  onValueChange,\n  onBlur,\n  ...props\n}) => {\n  const _unitRef = useRef<HTMLSpanElement>(null)\n  const _inputRef = useRef<HTMLInputElement>(null)\n\n  const [value, setValue] = useState<string>(initialValue.toString())\n\n  // Memoized values for validation and formatting\n  const maxDecimalPlaces = decimal?.[1] ?? numberAfterDecimalPoint\n  const maxIntegerLength = decimal && decimal[0] - decimal[1]\n  const validationRegex = useMemo(() => createValidationRegex(allowNegative), [allowNegative])\n\n  // Validation functions\n  const isValidDecimalLength = useCallback(\n    (value: string): boolean => {\n      if (!maxDecimalPlaces && value.includes('.')) return false\n      const decimalPart = value.split('.')[1]\n      return !decimalPart || decimalPart.length <= maxDecimalPlaces\n    },\n    [maxDecimalPlaces],\n  )\n  const isValidFormat = useCallback(\n    (value: string): boolean => {\n      if (!decimal || value === '-') return true\n      const [integerPart, decimalPart = ''] = value.split('.')\n\n      return decimalPart.length <= decimal[1] && (integerPart.startsWith('-') ? integerPart.length - 1 : integerPart.length) <= maxIntegerLength!\n    },\n    [decimal, maxIntegerLength],\n  )\n  const customRoundedValue = useCallback(\n    (value: number, precision: number) => {\n      if (roundingRule === 'none') return value\n\n      const factor = Math.pow(10, precision)\n      const scaledValue = value * factor\n\n      switch (roundingRule) {\n        case 'up':\n          return Math.ceil(scaledValue) / factor\n        case 'down':\n          return Math.floor(scaledValue) / factor\n        case 'nearest': {\n          if (scaledValue % 1 < 0.1) return Math.floor(scaledValue) / factor\n          if (scaledValue % 1 >= 0.59) return Math.ceil(scaledValue) / factor\n          return (Math.floor(scaledValue) + 0.5) / factor\n        }\n        default:\n          return value\n      }\n    },\n    [roundingRule],\n  )\n  const isDecimalPointGreaterThanLimit = useCallback(\n    (value: string) => (!numberAfterDecimalPoint && value.includes('.')) || value.split('.')[1]?.length > numberAfterDecimalPoint,\n    [numberAfterDecimalPoint],\n  )\n  const formattedValue = useCallback(\n    (val: string) => {\n      if (val === '0') return '0'\n      if (!Number(val)) return ''\n\n      const numValue = parseFloat(val)\n      const effectivePrecision = Math.min(maxDecimalPlaces - 1, precision || 0)\n      const roundedValue = customRoundedValue(numValue, effectivePrecision).toString()\n      const [integerPart, decimalPart = ''] = roundedValue.split('.')\n      const formattedInteger = formatNumberWithCommas(integerPart)\n      return decimalPart ? `${formattedInteger}.${decimalPart}` : formattedInteger\n    },\n    [customRoundedValue, maxDecimalPlaces, precision],\n  )\n  // Validate decimal point is less than or equal to the limit\n  const validateDecimalPoint = useCallback(\n    (value: string) => {\n      if (!decimal || value === '-') return true\n\n      const [integerPart, decimalPart = ''] = value.split('.')\n      const integerLength = integerPart.startsWith('-') ? integerPart.length - 1 : integerPart.length\n      const maxIntegerLength = decimal[0] - decimal[1]\n\n      return decimalPart.length <= decimal[1] && integerLength <= maxIntegerLength\n    },\n    [decimal],\n  )\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      // Don't prevent default behavior of input change\n      onChange?.(e)\n\n      // Custom event handler for value change\n      const { value: inputValue } = e.target\n\n      // Handle empty input\n      if (!inputValue) {\n        onValueChange?.(undefined)\n        setValue('')\n        return\n      }\n\n      // Handle zero and negative zero\n      const isZero = inputValue === '0'\n      const isNegativeZero = inputValue === '-' && allowNegative\n      if (isZero || isNegativeZero) {\n        onValueChange?.(0)\n        setValue(inputValue)\n        return\n      }\n\n      // Validate input format\n      const isValid = validationRegex.test(inputValue) && isValidFormat(inputValue) && (decimal || isValidDecimalLength(inputValue))\n      if (!isValid) return\n\n      const numericValue = parseFloat(inputValue) || 0\n      onValueChange?.(numericValue)\n      setValue(inputValue)\n    },\n    [allowNegative, decimal, isValidDecimalLength, isValidFormat, onChange, onValueChange, validationRegex],\n  )\n\n  const handleFocus = useCallback(() => {\n    if (readonly) return\n    setValue((prev) => prev.replace(/,/g, '')) // Remove commas for easier editing\n  }, [readonly])\n\n  const handleBlur = useCallback(() => {\n    if (readonly) return\n    onBlur?.()\n    setValue((prev) => formattedValue(prev))\n  }, [readonly, onBlur, formattedValue])\n\n  // Set initial value\n  useEffect(() => {\n    const isFocused = document.activeElement === _inputRef.current\n\n    if (\n      !initialValue ||\n      !validationRegex.test(initialValue.toString()) ||\n      !validateDecimalPoint(initialValue.toString()) ||\n      (!decimal && isDecimalPointGreaterThanLimit(initialValue.toString()))\n    ) {\n      setValue('')\n      return\n    }\n\n    setValue((prev) => {\n      if (prev === '-') return '-'\n      if (!prev) return ''\n      return isFocused ? initialValue.toString() : formattedValue(initialValue.toString())\n    })\n  }, [decimal, formattedValue, initialValue, isDecimalPointGreaterThanLimit, validateDecimalPoint, validationRegex])\n\n  // Set padding right for the input field\n  useEffect(() => {\n    if (!_unitRef.current || !_inputRef.current || !unitText) return\n    const unitWidth = _unitRef.current.offsetWidth\n    _inputRef.current.style.setProperty('padding-right', `${(unitWidth + 10) / 16}rem`)\n  }, [disabled, unitText])\n\n  return (\n    <div className=\"relative\">\n      <Input\n        {...props}\n        ref={_inputRef}\n        value={value || (readonly ? '0' : '')}\n        placeholder={placeholder}\n        disabled={disabled}\n        readOnly={readonly}\n        className={cn('font-number text-end', readonly && 'bg-muted text-muted-foreground')}\n        onChange={handleChange}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n      />\n      {unitText && (\n        <span ref={_unitRef} className=\"text-muted-foreground pointer-events-none absolute top-1/2 right-2 -translate-y-1/2 text-sm\">\n          {unitText}\n        </span>\n      )}\n    </div>\n  )\n}\n","import { type FieldPath, type FieldValues, useWatch } from 'react-hook-form'\n\nimport { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../ui/form'\nimport { NumberInput } from '../ui/inputs/number-input'\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  name: FieldPath<TFieldValues>\n  label?: string\n  description?: string\n  placeholder?: string\n  unitText?: string\n  isShowClearButton?: boolean\n  isShowErrorMsg?: boolean\n  isShowCount?: boolean\n  onValueChange?: (value?: number) => void\n}\nexport const NumberField = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  label = 'Number Field',\n  placeholder = '0',\n  isShowErrorMsg = false,\n  isShowCount = false,\n  unitText = '',\n  description = '',\n  onValueChange,\n}: Props<TFieldValues>) => {\n  const valueWatch = useWatch({ name })\n\n  return (\n    <FormField\n      name={name}\n      render={({ field: { onChange, ...field } }) => (\n        <FormItem className=\"w-full gap-0\">\n          <FormLabel>{label}</FormLabel>\n          <FormControl>\n            <NumberInput\n              {...field}\n              placeholder={placeholder}\n              className=\"w-full\"\n              unitText={unitText}\n              onValueChange={(value) => {\n                onChange(value)\n                onValueChange?.(value)\n              }}\n            />\n          </FormControl>\n          {isShowCount && <div className=\"text-muted-foreground text-end text-xs\">{valueWatch?.length ?? 0} characters</div>}\n          {!!description && <FormDescription>{description}</FormDescription>}\n          {isShowErrorMsg && <FormMessage />}\n        </FormItem>\n      )}\n    />\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"number-field.cjs","names":["NumberInput: React.FC<IProps>","value","precision","maxIntegerLength","Input","FormField","FormItem","Activity","FieldContent","FormLabel","FormDescription","FormControl","FormMessage"],"sources":["../../packages/components/ui/inputs/number-input.tsx","../../packages/components/forms/number-field.tsx"],"sourcesContent":["'use client';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Input } from '../input';\n\nconst createValidationRegex = (allowNegative: boolean): RegExp => {\n  return allowNegative ? /^-?\\d*\\.?\\d*$/ : /^\\d*\\.?\\d*$/;\n};\n\nconst formatNumberWithCommas = (num: number | string): string => {\n  return Number(num).toLocaleString();\n};\n\ninterface IProps extends React.HTMLAttributes<HTMLInputElement> {\n  /**\n   * Description: Value for the text field\n   *\n   * Default: ''\n   *\n   * Usage: Value for the text field\n   */\n  value?: string | number;\n  /**\n   * Description: Disabled state of the text field\n   *\n   * Default: `false`\n   *\n   * Usage: Disabled state of the text field\n   *\n   * Note: If true, the text field will be disabled\n   */\n  disabled?: boolean;\n  /**\n   * Description: Readonly state of the text field\n   *\n   * Default: `false`\n   *\n   * Usage: Readonly state of the text field\n   */\n  readonly?: boolean;\n  /**\n   * Description: Allow negative value for the text field\n   *\n   * Default: `false`\n   *\n   * Usage: Allow negative value for the text field\n   */\n  allowNegative?: boolean;\n  /**\n   * Description: Decimal point for the text field\n   *\n   * Default: `undefined`\n   *\n   * Usage: Ex: [12,3] => console.log(2323.23) // True\n   *\n   * Note: IF use this prop, `numberAfterDecimalPoint` will be ignored\n   */\n  decimal?: [number, number];\n  /**\n   * Description: Rounding rule for the text field\n   *\n   * Default: `nearest`\n   *\n   * Usage: Rounding rule for the text field\n   */\n  roundingRule?: 'up' | 'down' | 'nearest' | 'none';\n  /**\n   * Description: Number of digits after the decimal point\n   *\n   * Default: `2`\n   *\n   * Usage: Number of digits after the decimal point\n   */\n  numberAfterDecimalPoint?: number;\n  /**\n   * Description: Placeholder for the text field\n   *\n   * Default: ''\n   *\n   * Usage: Placeholder for the text field\n   */\n  placeholder?: string;\n  /**\n   * Description: Unit text for the text field\n   *\n   * Default: ''\n   *\n   * E.g. 'kg', 'm', 'USD'...\n   */\n  unitText?: string;\n  /**\n   * Description: Invalid state of the text field\n   *\n   * Default: `false`\n   *\n   * Usage: Invalid state of the text field\n   */\n  invalid?: boolean;\n  /**\n   * Description: Precision for the text field\n   *\n   * Default: `undefined`\n   * E.g.\n   * - 2.13 => 2.1 when precision is 1\n   * - 2.134 => 2.13 when precision is 2\n   */\n  precision?: number;\n  /**\n   * Description: Callback function for the value change\n   * Usage: Callback function for the value change\n   */\n  onValueChange?: (value?: number) => void;\n  onBlur?: () => void;\n}\n/**\n * ## Unit Text Field Component\n *\n * **Description**: This component is to display common text field with unit\n *\n * **Usage**: Text field with unit example: 1000 (kg), 100 (m), 1000 (USD)...\n */\nexport const NumberInput: React.FC<IProps> = ({\n  disabled = false,\n  readonly = false,\n  allowNegative = false,\n  numberAfterDecimalPoint = 2,\n  roundingRule = 'none',\n  value: initialValue = '',\n  unitText,\n  decimal,\n  placeholder,\n  precision,\n  onChange,\n  onValueChange,\n  onBlur,\n  ...props\n}) => {\n  const _unitRef = useRef<HTMLSpanElement>(null);\n  const _inputRef = useRef<HTMLInputElement>(null);\n\n  const [value, setValue] = useState<string>(initialValue.toString());\n\n  // Memoized values for validation and formatting\n  const maxDecimalPlaces = decimal?.[1] ?? numberAfterDecimalPoint;\n  const maxIntegerLength = decimal && decimal[0] - decimal[1];\n  const validationRegex = useMemo(() => createValidationRegex(allowNegative), [allowNegative]);\n\n  // Validation functions\n  const isValidDecimalLength = useCallback(\n    (value: string): boolean => {\n      if (!maxDecimalPlaces && value.includes('.')) return false;\n      const decimalPart = value.split('.')[1];\n      return !decimalPart || decimalPart.length <= maxDecimalPlaces;\n    },\n    [maxDecimalPlaces]\n  );\n  const isValidFormat = useCallback(\n    (value: string): boolean => {\n      if (!decimal || value === '-') return true;\n      const [integerPart, decimalPart = ''] = value.split('.');\n\n      return decimalPart.length <= decimal[1] && (integerPart.startsWith('-') ? integerPart.length - 1 : integerPart.length) <= maxIntegerLength!;\n    },\n    [decimal, maxIntegerLength]\n  );\n  const customRoundedValue = useCallback(\n    (value: number, precision: number) => {\n      if (roundingRule === 'none') return value;\n\n      const factor = Math.pow(10, precision);\n      const scaledValue = value * factor;\n\n      switch (roundingRule) {\n        case 'up':\n          return Math.ceil(scaledValue) / factor;\n        case 'down':\n          return Math.floor(scaledValue) / factor;\n        case 'nearest': {\n          if (scaledValue % 1 < 0.1) return Math.floor(scaledValue) / factor;\n          if (scaledValue % 1 >= 0.59) return Math.ceil(scaledValue) / factor;\n          return (Math.floor(scaledValue) + 0.5) / factor;\n        }\n        default:\n          return value;\n      }\n    },\n    [roundingRule]\n  );\n  const isDecimalPointGreaterThanLimit = useCallback(\n    (value: string) => (!numberAfterDecimalPoint && value.includes('.')) || value.split('.')[1]?.length > numberAfterDecimalPoint,\n    [numberAfterDecimalPoint]\n  );\n  const formattedValue = useCallback(\n    (val: string) => {\n      if (val === '0') return '0';\n      if (!Number(val)) return '';\n\n      const numValue = parseFloat(val);\n      const effectivePrecision = Math.min(maxDecimalPlaces - 1, precision || 0);\n      const roundedValue = customRoundedValue(numValue, effectivePrecision).toString();\n      const [integerPart, decimalPart = ''] = roundedValue.split('.');\n      const formattedInteger = formatNumberWithCommas(integerPart);\n      return decimalPart ? `${formattedInteger}.${decimalPart}` : formattedInteger;\n    },\n    [customRoundedValue, maxDecimalPlaces, precision]\n  );\n  // Validate decimal point is less than or equal to the limit\n  const validateDecimalPoint = useCallback(\n    (value: string) => {\n      if (!decimal || value === '-') return true;\n\n      const [integerPart, decimalPart = ''] = value.split('.');\n      const integerLength = integerPart.startsWith('-') ? integerPart.length - 1 : integerPart.length;\n      const maxIntegerLength = decimal[0] - decimal[1];\n\n      return decimalPart.length <= decimal[1] && integerLength <= maxIntegerLength;\n    },\n    [decimal]\n  );\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      // Don't prevent default behavior of input change\n      onChange?.(e);\n\n      // Custom event handler for value change\n      const { value: inputValue } = e.target;\n\n      // Handle empty input\n      if (!inputValue) {\n        onValueChange?.(undefined);\n        setValue('');\n        return;\n      }\n\n      // Handle zero and negative zero\n      const isZero = inputValue === '0';\n      const isNegativeZero = inputValue === '-' && allowNegative;\n      if (isZero || isNegativeZero) {\n        onValueChange?.(0);\n        setValue(inputValue);\n        return;\n      }\n\n      // Validate input format\n      const isValid = validationRegex.test(inputValue) && isValidFormat(inputValue) && (decimal || isValidDecimalLength(inputValue));\n      if (!isValid) return;\n\n      const numericValue = parseFloat(inputValue) || 0;\n      onValueChange?.(numericValue);\n      setValue(inputValue);\n    },\n    [allowNegative, decimal, isValidDecimalLength, isValidFormat, onChange, onValueChange, validationRegex]\n  );\n\n  const handleFocus = useCallback(() => {\n    if (readonly) return;\n    setValue(prev => prev.replace(/,/g, '')); // Remove commas for easier editing\n  }, [readonly]);\n\n  const handleBlur = useCallback(() => {\n    if (readonly) return;\n    onBlur?.();\n    setValue(prev => formattedValue(prev));\n  }, [readonly, onBlur, formattedValue]);\n\n  // Set initial value\n  useEffect(() => {\n    const isFocused = document.activeElement === _inputRef.current;\n\n    if (\n      !initialValue ||\n      !validationRegex.test(initialValue.toString()) ||\n      !validateDecimalPoint(initialValue.toString()) ||\n      (!decimal && isDecimalPointGreaterThanLimit(initialValue.toString()))\n    ) {\n      setValue('');\n      return;\n    }\n\n    setValue(prev => {\n      if (prev === '-') return '-';\n      if (!prev) return '';\n      return isFocused ? initialValue.toString() : formattedValue(initialValue.toString());\n    });\n  }, [decimal, formattedValue, initialValue, isDecimalPointGreaterThanLimit, validateDecimalPoint, validationRegex]);\n\n  // Set padding right for the input field\n  useEffect(() => {\n    if (!_unitRef.current || !_inputRef.current || !unitText) return;\n    const unitWidth = _unitRef.current.offsetWidth;\n    _inputRef.current.style.setProperty('padding-right', `${(unitWidth + 10) / 16}rem`);\n  }, [disabled, unitText]);\n\n  return (\n    <div className=\"relative\">\n      <Input\n        {...props}\n        ref={_inputRef}\n        value={value || (readonly ? '0' : '')}\n        placeholder={placeholder}\n        disabled={disabled}\n        readOnly={readonly}\n        className={cn('font-number text-end', readonly && 'bg-muted text-muted-foreground')}\n        onChange={handleChange}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n      />\n      {unitText && (\n        <span ref={_unitRef} className=\"text-muted-foreground pointer-events-none absolute top-1/2 right-2 -translate-y-1/2 text-sm\">\n          {unitText}\n        </span>\n      )}\n    </div>\n  );\n};\n","import { Activity } from 'react';\nimport { type FieldPath, type FieldValues, useWatch } from 'react-hook-form';\n\nimport { FieldContent } from '../ui/field';\nimport { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../ui/form';\nimport { NumberInput } from '../ui/inputs/number-input';\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  name: FieldPath<TFieldValues>;\n  label?: string;\n  description?: string;\n  placeholder?: string;\n  unitText?: string;\n  isShowClearButton?: boolean;\n  isShowErrorMsg?: boolean;\n  isShowCount?: boolean;\n  onValueChange?: (value?: number) => void;\n};\nexport const NumberField = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  label = 'Number Field',\n  placeholder = '0',\n  isShowErrorMsg = false,\n  isShowCount = false,\n  unitText = '',\n  description = '',\n  onValueChange,\n}: Props<TFieldValues>) => {\n  const valueWatch = useWatch({ name });\n\n  return (\n    <FormField\n      name={name}\n      render={({ field: { onChange, ...field } }) => (\n        <FormItem>\n          <Activity mode={label || description ? 'visible' : 'hidden'}>\n            <FieldContent>\n              <FormLabel>{label}</FormLabel>\n              {!!description && <FormDescription>{description}</FormDescription>}\n            </FieldContent>\n          </Activity>\n          <FormControl>\n            <NumberInput\n              {...field}\n              placeholder={placeholder}\n              className=\"w-full\"\n              unitText={unitText}\n              onValueChange={value => {\n                onChange(value);\n                onValueChange?.(value);\n              }}\n            />\n          </FormControl>\n          {isShowCount && <div className=\"text-muted-foreground text-end text-xs\">{valueWatch?.length ?? 0} characters</div>}\n          {isShowErrorMsg && <FormMessage />}\n        </FormItem>\n      )}\n    />\n  );\n};\n"],"mappings":"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"}

package/dist/forms/number-field.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime8 from "react/jsx-runtime";
+import * as react_jsx_runtime7 from "react/jsx-runtime";
 import { FieldPath, FieldValues } from "react-hook-form";
 
 //#region packages/components/forms/number-field.d.ts
@@ -22,7 +22,7 @@ declare const NumberField: <TFieldValues extends FieldValues = FieldValues>({
   unitText,
   description,
   onValueChange
-}: Props<TFieldValues>) => react_jsx_runtime8.JSX.Element;
+}: Props<TFieldValues>) => react_jsx_runtime7.JSX.Element;
 //#endregion
 export { NumberField };
 //# sourceMappingURL=number-field.d.cts.map

package/dist/forms/number-field.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime5 from "react/jsx-runtime";
+import * as react_jsx_runtime4 from "react/jsx-runtime";
 import { FieldPath, FieldValues } from "react-hook-form";
 
 //#region packages/components/forms/number-field.d.ts
@@ -22,7 +22,7 @@ declare const NumberField: <TFieldValues extends FieldValues = FieldValues>({
   unitText,
   description,
   onValueChange
-}: Props<TFieldValues>) => react_jsx_runtime5.JSX.Element;
+}: Props<TFieldValues>) => react_jsx_runtime4.JSX.Element;
 //#endregion
 export { NumberField };
 //# sourceMappingURL=number-field.d.ts.map

package/dist/forms/number-field.js

@@ -1,2 +1,2 @@
-import"../label-CdrxlBJ8.js";import{FormControl as e,FormDescription as t,FormField as n,FormItem as r,FormLabel as i,FormMessage as a}from"../form-BT1TbgK6.js";import{Input as o}from"../input-BtT8HfYE.js";import{cn as s}from"@customafk/react-toolkit/utils";import{useCallback as c,useEffect as l,useMemo as u,useRef as d,useState as f}from"react";import{jsx as p,jsxs as m}from"react/jsx-runtime";import{useWatch as h}from"react-hook-form";const g=e=>e?/^-?\d*\.?\d*$/:/^\d*\.?\d*$/,_=e=>Number(e).toLocaleString(),v=({disabled:e=!1,readonly:t=!1,allowNegative:n=!1,numberAfterDecimalPoint:r=2,roundingRule:i=`none`,value:a=``,unitText:h,decimal:v,placeholder:y,precision:b,onChange:x,onValueChange:S,onBlur:C,...w})=>{let T=d(null),E=d(null),[D,O]=f(a.toString()),k=v?.[1]??r,A=v&&v[0]-v[1],j=u(()=>g(n),[n]),M=c(e=>{if(!k&&e.includes(`.`))return!1;let t=e.split(`.`)[1];return!t||t.length<=k},[k]),N=c(e=>{if(!v||e===`-`)return!0;let[t,n=``]=e.split(`.`);return n.length<=v[1]&&(t.startsWith(`-`)?t.length-1:t.length)<=A},[v,A]),P=c((e,t)=>{if(i===`none`)return e;let n=Math.pow(10,t),r=e*n;switch(i){case`up`:return Math.ceil(r)/n;case`down`:return Math.floor(r)/n;case`nearest`:return r%1<.1?Math.floor(r)/n:r%1>=.59?Math.ceil(r)/n:(Math.floor(r)+.5)/n;default:return e}},[i]),F=c(e=>!r&&e.includes(`.`)||e.split(`.`)[1]?.length>r,[r]),I=c(e=>{if(e===`0`)return`0`;if(!Number(e))return``;let t=parseFloat(e),n=Math.min(k-1,b||0),r=P(t,n).toString(),[i,a=``]=r.split(`.`),o=_(i);return a?`${o}.${a}`:o},[P,k,b]),L=c(e=>{if(!v||e===`-`)return!0;let[t,n=``]=e.split(`.`),r=t.startsWith(`-`)?t.length-1:t.length,i=v[0]-v[1];return n.length<=v[1]&&r<=i},[v]),R=c(e=>{x?.(e);let{value:t}=e.target;if(!t){S?.(void 0),O(``);return}let r=t===`0`,i=t===`-`&&n;if(r||i){S?.(0),O(t);return}let a=j.test(t)&&N(t)&&(v||M(t));if(!a)return;let o=parseFloat(t)||0;S?.(o),O(t)},[n,v,M,N,x,S,j]),z=c(()=>{t||O(e=>e.replace(/,/g,``))},[t]),B=c(()=>{t||(C?.(),O(e=>I(e)))},[t,C,I]);return l(()=>{let e=document.activeElement===E.current;if(!a||!j.test(a.toString())||!L(a.toString())||!v&&F(a.toString())){O(``);return}O(t=>t===`-`?`-`:t?e?a.toString():I(a.toString()):``)},[v,I,a,F,L,j]),l(()=>{if(!T.current||!E.current||!h)return;let e=T.current.offsetWidth;E.current.style.setProperty(`padding-right`,`${(e+10)/16}rem`)},[e,h]),m(`div`,{className:`relative`,children:[p(o,{...w,ref:E,value:D||(t?`0`:``),placeholder:y,disabled:e,readOnly:t,className:s(`font-number text-end`,t&&`bg-muted text-muted-foreground`),onChange:R,onFocus:z,onBlur:B}),h&&p(`span`,{ref:T,className:`text-muted-foreground pointer-events-none absolute top-1/2 right-2 -translate-y-1/2 text-sm`,children:h})]})},y=({name:o,label:s=`Number Field`,placeholder:c=`0`,isShowErrorMsg:l=!1,isShowCount:u=!1,unitText:d=``,description:f=``,onValueChange:g})=>{let _=h({name:o});return p(n,{name:o,render:({field:{onChange:n,...o}})=>m(r,{className:`w-full gap-0`,children:[p(i,{children:s}),p(e,{children:p(v,{...o,placeholder:c,className:`w-full`,unitText:d,onValueChange:e=>{n(e),g?.(e)}})}),u&&m(`div`,{className:`text-muted-foreground text-end text-xs`,children:[_?.length??0,` characters`]}),!!f&&p(t,{children:f}),l&&p(a,{})]})})};export{y as NumberField};
+import"../label-CdrxlBJ8.js";import"../separator-D17HxS2f.js";import{FieldContent as e}from"../field-CGacT8J3.js";import{FormControl as t,FormDescription as n,FormField as r,FormItem as i,FormLabel as a,FormMessage as o}from"../form-B_tL9lO4.js";import{Input as s}from"../input-BStypTnq.js";import{cn as c}from"@customafk/react-toolkit/utils";import{Activity as l,useCallback as u,useEffect as d,useMemo as f,useRef as p,useState as m}from"react";import{jsx as h,jsxs as g}from"react/jsx-runtime";import{useWatch as _}from"react-hook-form";const v=e=>e?/^-?\d*\.?\d*$/:/^\d*\.?\d*$/,y=e=>Number(e).toLocaleString(),b=({disabled:e=!1,readonly:t=!1,allowNegative:n=!1,numberAfterDecimalPoint:r=2,roundingRule:i=`none`,value:a=``,unitText:o,decimal:l,placeholder:_,precision:b,onChange:x,onValueChange:S,onBlur:C,...w})=>{let T=p(null),E=p(null),[D,O]=m(a.toString()),k=l?.[1]??r,A=l&&l[0]-l[1],j=f(()=>v(n),[n]),M=u(e=>{if(!k&&e.includes(`.`))return!1;let t=e.split(`.`)[1];return!t||t.length<=k},[k]),N=u(e=>{if(!l||e===`-`)return!0;let[t,n=``]=e.split(`.`);return n.length<=l[1]&&(t.startsWith(`-`)?t.length-1:t.length)<=A},[l,A]),P=u((e,t)=>{if(i===`none`)return e;let n=10**t,r=e*n;switch(i){case`up`:return Math.ceil(r)/n;case`down`:return Math.floor(r)/n;case`nearest`:return r%1<.1?Math.floor(r)/n:r%1>=.59?Math.ceil(r)/n:(Math.floor(r)+.5)/n;default:return e}},[i]),F=u(e=>!r&&e.includes(`.`)||e.split(`.`)[1]?.length>r,[r]),I=u(e=>{if(e===`0`)return`0`;if(!Number(e))return``;let t=parseFloat(e),n=Math.min(k-1,b||0),[r,i=``]=P(t,n).toString().split(`.`),a=y(r);return i?`${a}.${i}`:a},[P,k,b]),L=u(e=>{if(!l||e===`-`)return!0;let[t,n=``]=e.split(`.`),r=t.startsWith(`-`)?t.length-1:t.length,i=l[0]-l[1];return n.length<=l[1]&&r<=i},[l]),R=u(e=>{x?.(e);let{value:t}=e.target;if(!t){S?.(void 0),O(``);return}if(t===`0`||t===`-`&&n){S?.(0),O(t);return}j.test(t)&&N(t)&&(l||M(t))&&(S?.(parseFloat(t)||0),O(t))},[n,l,M,N,x,S,j]),z=u(()=>{t||O(e=>e.replace(/,/g,``))},[t]),B=u(()=>{t||(C?.(),O(e=>I(e)))},[t,C,I]);return d(()=>{let e=document.activeElement===E.current;if(!a||!j.test(a.toString())||!L(a.toString())||!l&&F(a.toString())){O(``);return}O(t=>t===`-`?`-`:t?e?a.toString():I(a.toString()):``)},[l,I,a,F,L,j]),d(()=>{if(!T.current||!E.current||!o)return;let e=T.current.offsetWidth;E.current.style.setProperty(`padding-right`,`${(e+10)/16}rem`)},[e,o]),g(`div`,{className:`relative`,children:[h(s,{...w,ref:E,value:D||(t?`0`:``),placeholder:_,disabled:e,readOnly:t,className:c(`font-number text-end`,t&&`bg-muted text-muted-foreground`),onChange:R,onFocus:z,onBlur:B}),o&&h(`span`,{ref:T,className:`text-muted-foreground pointer-events-none absolute top-1/2 right-2 -translate-y-1/2 text-sm`,children:o})]})},x=({name:s,label:c=`Number Field`,placeholder:u=`0`,isShowErrorMsg:d=!1,isShowCount:f=!1,unitText:p=``,description:m=``,onValueChange:v})=>{let y=_({name:s});return h(r,{name:s,render:({field:{onChange:r,...s}})=>g(i,{children:[h(l,{mode:c||m?`visible`:`hidden`,children:g(e,{children:[h(a,{children:c}),!!m&&h(n,{children:m})]})}),h(t,{children:h(b,{...s,placeholder:u,className:`w-full`,unitText:p,onValueChange:e=>{r(e),v?.(e)}})}),f&&g(`div`,{className:`text-muted-foreground text-end text-xs`,children:[y?.length??0,` characters`]}),d&&h(o,{})]})})};export{x as NumberField};
 //# sourceMappingURL=number-field.js.map