@customafk/lunas-ui 0.0.94 → 0.0.95

package/dist/forms/combobox-field.js

@@ -1,2 +1,2 @@
-"use client";import"../dist-BgkALM7U.js";import"../button-variants-aFWCWUvu.js";import{Button as e}from"../button-CriBqo8S.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};
+"use client";import"../dist-BgkALM7U.js";import"../button-variants-aFWCWUvu.js";import{Button as e}from"../button-CriBqo8S.js";import"../label-CdrxlBJ8.js";import"../separator-D17HxS2f.js";import{FieldContent as t}from"../field-GVRRZiSk.js";import{FormControl as n,FormDescription as r,FormField as i,FormItem as a,FormLabel as o}from"../form-De64-oXe.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(`w-full md:max-w-80`,`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 { 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"}
+{"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                      'w-full md:max-w-80',\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,qBACA,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-CAevLI5t.cjs`),require(`../button-variants-BHDyMRNh.cjs`);const t=require(`../button-BCahPWI8.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-Brdd41FH.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;
+"use client";const e=require(`../chunk-CUT6urMc.cjs`);require(`../dist-CAevLI5t.cjs`),require(`../button-variants-BHDyMRNh.cjs`);const t=require(`../button-BCahPWI8.cjs`);require(`../label-D6mAvVmw.cjs`),require(`../separator-DMMoR-d2.cjs`);const n=require(`../field-DWOm17T1.cjs`),r=require(`../form-rN5ezSn5.cjs`),i=require(`../popover-D6vyPDKA.cjs`),a=require(`../calendar-Brdd41FH.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.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime4 from "react/jsx-runtime";
+import * as react_jsx_runtime3 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_runtime4.JSX.Element;
+}: Props<TFieldValues>) => react_jsx_runtime3.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-BgkALM7U.js";import"../button-variants-aFWCWUvu.js";import{Button as e}from"../button-CriBqo8S.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-Diid0R3S.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};
+"use client";import"../dist-BgkALM7U.js";import"../button-variants-aFWCWUvu.js";import{Button as e}from"../button-CriBqo8S.js";import"../label-CdrxlBJ8.js";import"../separator-D17HxS2f.js";import{FieldContent as t}from"../field-GVRRZiSk.js";import{FormControl as n,FormDescription as r,FormField as i,FormItem as a,FormLabel as o,FormMessage as s}from"../form-De64-oXe.js";import{Popover as c,PopoverContent as l,PopoverTrigger as u}from"../popover-BnzoeyDG.js";import{Calendar as d}from"../calendar-Diid0R3S.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/form-wrapper.cjs

@@ -1 +1 @@
-require(`../button-variants-BHDyMRNh.cjs`),require(`../alert-dialog-sCh-4H6r.cjs`),require(`../error-dialog-COl3CQ1E.cjs`),require(`../label-D6mAvVmw.cjs`),require(`../separator-DMMoR-d2.cjs`),require(`../field-A43YZ5Wj.cjs`),require(`../form-DV9tQbiO.cjs`);const e=require(`../form-wrapper-CXrhlLBL.cjs`);exports.FormWrapper=e.FormWrapper;
+require(`../button-variants-BHDyMRNh.cjs`),require(`../alert-dialog-sCh-4H6r.cjs`),require(`../error-dialog-COl3CQ1E.cjs`),require(`../label-D6mAvVmw.cjs`),require(`../separator-DMMoR-d2.cjs`),require(`../field-DWOm17T1.cjs`),require(`../form-rN5ezSn5.cjs`);const e=require(`../form-wrapper-A1DZnRIF.cjs`);exports.FormWrapper=e.FormWrapper;

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime0 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
@@ -22,7 +22,7 @@ declare const FormWrapper: <TFieldValues extends FieldValues = FieldValues>({
   onError,
   onSubcribe,
   children
-}: React.PropsWithChildren<Props<TFieldValues>>) => react_jsx_runtime0.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.js

@@ -1 +1 @@
-import"../button-variants-aFWCWUvu.js";import"../alert-dialog-CtzD_gfT.js";import"../error-dialog-BLiYMBlh.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-Cw_ARA0-.js";export{e as FormWrapper};
+import"../button-variants-aFWCWUvu.js";import"../alert-dialog-CtzD_gfT.js";import"../error-dialog-BLiYMBlh.js";import"../label-CdrxlBJ8.js";import"../separator-D17HxS2f.js";import"../field-GVRRZiSk.js";import"../form-De64-oXe.js";import{FormWrapper as e}from"../form-wrapper-CSmgFsG0.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-CAevLI5t.cjs`),require(`../button-variants-BHDyMRNh.cjs`),require(`../button-BCahPWI8.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-DFaIxSYQ.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;
+"use client";const e=require(`../chunk-CUT6urMc.cjs`);require(`../dist-CAevLI5t.cjs`),require(`../button-variants-BHDyMRNh.cjs`),require(`../button-BCahPWI8.cjs`),require(`../label-D6mAvVmw.cjs`),require(`../separator-DMMoR-d2.cjs`);const t=require(`../field-DWOm17T1.cjs`),n=require(`../form-rN5ezSn5.cjs`);require(`../dialog-BBODhbxh.cjs`),require(`../command-C13pL2M3.cjs`);const r=require(`../multi-select-DFaIxSYQ.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.jsxs)(`div`,{className:`basis-3/5 flex justify-end`,children:[(0,a.jsx)(n.FormControl,{children:(0,a.jsx)(r.MultipleSelector,{placeholder:l,emptyIndicator:`No options available`,value:h,options:f,className:`w-full md:max-w-80`,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","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"}
+{"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            <div className=\"basis-3/5 flex justify-end\">\n              <FormControl>\n                <MultipleSelector\n                  placeholder={placeholder}\n                  emptyIndicator=\"No options available\"\n                  value={val}\n                  options={options}\n                  className=\"w-full md:max-w-80\"\n                  onChange={handleOnChange}\n                  onAddNewItem={onAdd}\n                />\n              </FormControl>\n              {isShowErrorMsg && <FormMessage />}\n            </div>\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,MAAC,MAAA,CAAI,UAAU,wCACb,EAAA,EAAA,KAACC,EAAAA,YAAAA,CAAAA,UACC,EAAA,EAAA,KAACC,EAAAA,iBAAAA,CACc,cACb,eAAe,uBACf,MAAO,EACE,UACT,UAAU,qBACV,SApBc,GAAoB,CAC1C,IAAM,EAAiBP,EAAM,IAAI,GAAK,EAAE,MAAM,CAC9C,EAAS,EAAe,EAmBhB,aAAc,GACd,CAAA,CACU,CACb,IAAkB,EAAA,EAAA,KAACQ,EAAAA,YAAAA,EAAAA,CAAc,CAAA,EAC9B,CAAA,EACG,GAGf"}

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime5 from "react/jsx-runtime";
+import * as react_jsx_runtime6 from "react/jsx-runtime";
 import { FieldPath, FieldValues } from "react-hook-form";
 
 //#region packages/components/forms/multi-select-field.d.ts
@@ -26,7 +26,7 @@ declare const MultiSelectField: <TFieldValues extends FieldValues = FieldValues>
   className,
   options,
   onAdd
-}: Props<TFieldValues>) => react_jsx_runtime5.JSX.Element;
+}: Props<TFieldValues>) => react_jsx_runtime6.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_runtime6 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { FieldPath, FieldValues } from "react-hook-form";
 
 //#region packages/components/forms/multi-select-field.d.ts
@@ -26,7 +26,7 @@ declare const MultiSelectField: <TFieldValues extends FieldValues = FieldValues>
   className,
   options,
   onAdd
-}: Props<TFieldValues>) => react_jsx_runtime6.JSX.Element;
+}: Props<TFieldValues>) => react_jsx_runtime0.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-BgkALM7U.js";import"../button-variants-aFWCWUvu.js";import"../button-CriBqo8S.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-Bqqk4Tiu.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};
+"use client";import"../dist-BgkALM7U.js";import"../button-variants-aFWCWUvu.js";import"../button-CriBqo8S.js";import"../label-CdrxlBJ8.js";import"../separator-D17HxS2f.js";import{FieldContent as e}from"../field-GVRRZiSk.js";import{FormControl as t,FormDescription as n,FormField as r,FormItem as i,FormLabel as a,FormMessage as o}from"../form-De64-oXe.js";import"../dialog-BAlJ18xi.js";import"../command-UXLmHGja.js";import{MultipleSelector as s}from"../multi-select-Bqqk4Tiu.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})]})}),u(`div`,{className:`basis-3/5 flex justify-end`,children:[l(t,{children:l(s,{placeholder:h,emptyIndicator:`No options available`,value:b,options:v,className:`w-full md:max-w-80`,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 { 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"}
+{"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            <div className=\"basis-3/5 flex justify-end\">\n              <FormControl>\n                <MultipleSelector\n                  placeholder={placeholder}\n                  emptyIndicator=\"No options available\"\n                  value={val}\n                  options={options}\n                  className=\"w-full md:max-w-80\"\n                  onChange={handleOnChange}\n                  onAddNewItem={onAdd}\n                />\n              </FormControl>\n              {isShowErrorMsg && <FormMessage />}\n            </div>\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,MAAA,CAAI,UAAU,uCACb,EAAC,EAAA,CAAA,SACC,EAAC,EAAA,CACc,cACb,eAAe,uBACf,MAAO,EACE,UACT,UAAU,qBACV,SApBc,GAAoB,CAC1C,IAAM,EAAiBA,EAAM,IAAI,GAAK,EAAE,MAAM,CAC9C,EAAS,EAAe,EAmBhB,aAAc,GACd,CAAA,CACU,CACb,GAAkB,EAAC,EAAA,EAAA,CAAc,CAAA,EAC9B,CAAA,EACG,GAGf"}

package/dist/forms/number-field.cjs

@@ -1,2 +1,2 @@
-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;
+const e=require(`../chunk-CUT6urMc.cjs`);require(`../label-D6mAvVmw.cjs`),require(`../separator-DMMoR-d2.cjs`);const t=require(`../field-DWOm17T1.cjs`),n=require(`../form-rN5ezSn5.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,wrapperClassName:g,onChange:_,onValueChange:v,onBlur:y,...b})=>{let x=(0,a.useRef)(null),S=(0,a.useRef)(null),[C,w]=(0,a.useState)(d.toString()),T=p?.[1]??s,E=p&&p[0]-p[1],D=(0,a.useMemo)(()=>c(n),[n]),O=(0,a.useCallback)(e=>{if(!T&&e.includes(`.`))return!1;let t=e.split(`.`)[1];return!t||t.length<=T},[T]),k=(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)<=E},[p,E]),A=(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]),j=(0,a.useCallback)(e=>!s&&e.includes(`.`)||e.split(`.`)[1]?.length>s,[s]),M=(0,a.useCallback)(e=>{if(e===`0`)return`0`;if(!Number(e))return``;let t=parseFloat(e),n=Math.min(T-1,h||0),[r,i=``]=A(t,n).toString().split(`.`),a=l(r);return i?`${a}.${i}`:a},[A,T,h]),N=(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]),P=(0,a.useCallback)(e=>{_?.(e);let{value:t}=e.target;if(!t){v?.(void 0),w(``);return}if(t===`0`||t===`-`&&n){v?.(0),w(t);return}D.test(t)&&k(t)&&(p||O(t))&&(v?.(parseFloat(t)||0),w(t))},[n,p,O,k,_,v,D]),F=(0,a.useCallback)(()=>{t||w(e=>e.replace(/,/g,``))},[t]),I=(0,a.useCallback)(()=>{t||(y?.(),w(e=>M(e)))},[t,y,M]);return(0,a.useEffect)(()=>{let e=document.activeElement===S.current;if(!d||!D.test(d.toString())||!N(d.toString())||!p&&j(d.toString())){w(``);return}w(t=>t===`-`?`-`:t?e?d.toString():M(d.toString()):``)},[p,M,d,j,N,D]),(0,a.useEffect)(()=>{if(!x.current||!S.current||!f)return;let e=x.current.offsetWidth;S.current.style.setProperty(`padding-right`,`${(e+10)/16}rem`)},[f]),(0,o.jsxs)(`div`,{className:(0,i.cn)(`relative`,g),children:[(0,o.jsx)(r.Input,{...b,ref:S,value:C||(t?`0`:``),placeholder:m,disabled:e,readOnly:t,className:(0,i.cn)(`font-number text-end`,t&&`bg-muted text-muted-foreground`),onChange:P,onFocus:F,onBlur:I}),f&&(0,o.jsx)(`span`,{ref:x,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.jsxs)(`div`,{className:`relative basis-3/5 flex justify-end`,children:[(0,o.jsx)(n.FormControl,{children:(0,o.jsx)(u,{...s,placeholder:i,unitText:d,wrapperClassName:`w-full md:max-w-60`,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","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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"}
+{"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';\n\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  wrapperClassName?: string;\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  wrapperClassName,\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 = 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  }, [unitText]);\n\n  return (\n    <div className={cn('relative', wrapperClassName)}>\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          <div className=\"relative basis-3/5 flex justify-end\">\n            <FormControl>\n              <NumberInput\n                {...field}\n                placeholder={placeholder}\n                unitText={unitText}\n                wrapperClassName=\"w-full md:max-w-60\"\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          </div>\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_runtime7 from "react/jsx-runtime";
+import * as react_jsx_runtime9 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_runtime7.JSX.Element;
+}: Props<TFieldValues>) => react_jsx_runtime9.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"../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};
+import"../label-CdrxlBJ8.js";import"../separator-D17HxS2f.js";import{FieldContent as e}from"../field-GVRRZiSk.js";import{FormControl as t,FormDescription as n,FormField as r,FormItem as i,FormLabel as a,FormMessage as o}from"../form-De64-oXe.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,wrapperClassName:x,onChange:S,onValueChange:C,onBlur:w,...T})=>{let E=p(null),D=p(null),[O,k]=m(a.toString()),A=l?.[1]??r,j=l&&l[0]-l[1],M=f(()=>v(n),[n]),N=u(e=>{if(!A&&e.includes(`.`))return!1;let t=e.split(`.`)[1];return!t||t.length<=A},[A]),P=u(e=>{if(!l||e===`-`)return!0;let[t,n=``]=e.split(`.`);return n.length<=l[1]&&(t.startsWith(`-`)?t.length-1:t.length)<=j},[l,j]),F=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]),I=u(e=>!r&&e.includes(`.`)||e.split(`.`)[1]?.length>r,[r]),L=u(e=>{if(e===`0`)return`0`;if(!Number(e))return``;let t=parseFloat(e),n=Math.min(A-1,b||0),[r,i=``]=F(t,n).toString().split(`.`),a=y(r);return i?`${a}.${i}`:a},[F,A,b]),R=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]),z=u(e=>{S?.(e);let{value:t}=e.target;if(!t){C?.(void 0),k(``);return}if(t===`0`||t===`-`&&n){C?.(0),k(t);return}M.test(t)&&P(t)&&(l||N(t))&&(C?.(parseFloat(t)||0),k(t))},[n,l,N,P,S,C,M]),B=u(()=>{t||k(e=>e.replace(/,/g,``))},[t]),V=u(()=>{t||(w?.(),k(e=>L(e)))},[t,w,L]);return d(()=>{let e=document.activeElement===D.current;if(!a||!M.test(a.toString())||!R(a.toString())||!l&&I(a.toString())){k(``);return}k(t=>t===`-`?`-`:t?e?a.toString():L(a.toString()):``)},[l,L,a,I,R,M]),d(()=>{if(!E.current||!D.current||!o)return;let e=E.current.offsetWidth;D.current.style.setProperty(`padding-right`,`${(e+10)/16}rem`)},[o]),g(`div`,{className:c(`relative`,x),children:[h(s,{...T,ref:D,value:O||(t?`0`:``),placeholder:_,disabled:e,readOnly:t,className:c(`font-number text-end`,t&&`bg-muted text-muted-foreground`),onChange:z,onFocus:B,onBlur:V}),o&&h(`span`,{ref:E,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})]})}),g(`div`,{className:`relative basis-3/5 flex justify-end`,children:[h(t,{children:h(b,{...s,placeholder:u,unitText:p,wrapperClassName:`w-full md:max-w-60`,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

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

@@ -1 +1 @@
-{"version":3,"file":"number-field.js","names":["NumberInput: React.FC<IProps>","value","precision","maxIntegerLength"],"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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"}
+{"version":3,"file":"number-field.js","names":["NumberInput: React.FC<IProps>","value","precision","maxIntegerLength"],"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';\n\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  wrapperClassName?: string;\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  wrapperClassName,\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 = 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  }, [unitText]);\n\n  return (\n    <div className={cn('relative', wrapperClassName)}>\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          <div className=\"relative basis-3/5 flex justify-end\">\n            <FormControl>\n              <NumberInput\n                {...field}\n                placeholder={placeholder}\n                unitText={unitText}\n                wrapperClassName=\"w-full md:max-w-60\"\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          </div>\n        </FormItem>\n      )}\n    />\n  );\n};\n"],"mappings":"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"}

package/dist/forms/password-field.cjs

@@ -1,2 +1,2 @@
-"use client";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(`lucide-react`);i=e.__toESM(i);let a=require(`@customafk/react-toolkit/utils`);a=e.__toESM(a);let o=require(`react`);o=e.__toESM(o);let s=require(`react/jsx-runtime`);s=e.__toESM(s);const c=({className:e,...t})=>{let n=(0,o.useId)(),[c,l]=(0,o.useState)(!1),u=(0,o.useCallback)(()=>l(e=>!e),[]);return(0,s.jsxs)(`div`,{className:`relative`,children:[(0,s.jsx)(r.Input,{...t,id:n,placeholder:`Password`,type:c?`text`:`password`,className:(0,a.cn)(`pe-9`,e)}),(0,s.jsx)(`button`,{className:`text-muted-foreground/80 hover:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md transition-[color,box-shadow] outline-none focus:z-10 focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50`,type:`button`,onClick:u,"aria-label":c?`Hide password`:`Show password`,"aria-pressed":c,"aria-controls":`password`,children:c?(0,s.jsx)(i.EyeOffIcon,{size:16,"aria-hidden":`true`}):(0,s.jsx)(i.EyeIcon,{size:16,"aria-hidden":`true`})})]})},l=({name:e,label:r=`Text Field`,placeholder:i=`Enter text here`,isShowErrorMsg:a=!1,description:l,onValueChange:u})=>(0,s.jsx)(n.FormField,{name:e,render:({field:e})=>(0,s.jsxs)(n.FormItem,{className:`w-full`,children:[(0,s.jsx)(o.Activity,{mode:r||l?`visible`:`hidden`,children:(0,s.jsxs)(t.FieldContent,{children:[(0,s.jsx)(n.FormLabel,{children:r}),!!l&&(0,s.jsx)(n.FormDescription,{children:l})]})}),(0,s.jsx)(n.FormControl,{children:(0,s.jsx)(c,{placeholder:i,...e,onValueChange:u})}),a&&(0,s.jsx)(n.FormMessage,{})]})});exports.PasswordField=l;
+"use client";const e=require(`../chunk-CUT6urMc.cjs`);require(`../label-D6mAvVmw.cjs`),require(`../separator-DMMoR-d2.cjs`);const t=require(`../field-DWOm17T1.cjs`),n=require(`../form-rN5ezSn5.cjs`),r=require(`../input-D_tClptL.cjs`);let i=require(`lucide-react`);i=e.__toESM(i);let a=require(`@customafk/react-toolkit/utils`);a=e.__toESM(a);let o=require(`react`);o=e.__toESM(o);let s=require(`react/jsx-runtime`);s=e.__toESM(s);const c=({className:e,...t})=>{let n=(0,o.useId)(),[c,l]=(0,o.useState)(!1),u=(0,o.useCallback)(()=>l(e=>!e),[]);return(0,s.jsxs)(`div`,{className:`relative`,children:[(0,s.jsx)(r.Input,{...t,id:n,placeholder:`Password`,type:c?`text`:`password`,className:(0,a.cn)(`pe-9`,e)}),(0,s.jsx)(`button`,{className:`text-muted-foreground/80 hover:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md transition-[color,box-shadow] outline-none focus:z-10 focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50`,type:`button`,onClick:u,"aria-label":c?`Hide password`:`Show password`,"aria-pressed":c,"aria-controls":`password`,children:c?(0,s.jsx)(i.EyeOffIcon,{size:16,"aria-hidden":`true`}):(0,s.jsx)(i.EyeIcon,{size:16,"aria-hidden":`true`})})]})},l=({name:e,label:r=`Text Field`,placeholder:i=`Enter text here`,isShowErrorMsg:a=!1,description:l,onValueChange:u})=>(0,s.jsx)(n.FormField,{name:e,render:({field:e})=>(0,s.jsxs)(n.FormItem,{className:`w-full`,children:[(0,s.jsx)(o.Activity,{mode:r||l?`visible`:`hidden`,children:(0,s.jsxs)(t.FieldContent,{children:[(0,s.jsx)(n.FormLabel,{children:r}),!!l&&(0,s.jsx)(n.FormDescription,{children:l})]})}),(0,s.jsx)(n.FormControl,{children:(0,s.jsx)(c,{placeholder:i,...e,onValueChange:u})}),a&&(0,s.jsx)(n.FormMessage,{})]})});exports.PasswordField=l;
 //# sourceMappingURL=password-field.cjs.map

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

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

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

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

package/dist/forms/password-field.js

@@ -1,2 +1,2 @@
-"use client";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{EyeIcon as c,EyeOffIcon as l}from"lucide-react";import{cn as u}from"@customafk/react-toolkit/utils";import{Activity as d,useCallback as f,useId as p,useState as m}from"react";import{jsx as h,jsxs as g}from"react/jsx-runtime";const _=({className:e,...t})=>{let n=p(),[r,i]=m(!1),a=f(()=>i(e=>!e),[]);return g(`div`,{className:`relative`,children:[h(s,{...t,id:n,placeholder:`Password`,type:r?`text`:`password`,className:u(`pe-9`,e)}),h(`button`,{className:`text-muted-foreground/80 hover:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md transition-[color,box-shadow] outline-none focus:z-10 focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50`,type:`button`,onClick:a,"aria-label":r?`Hide password`:`Show password`,"aria-pressed":r,"aria-controls":`password`,children:h(r?l:c,{size:16,"aria-hidden":`true`})})]})},v=({name:s,label:c=`Text Field`,placeholder:l=`Enter text here`,isShowErrorMsg:u=!1,description:f,onValueChange:p})=>h(r,{name:s,render:({field:r})=>g(i,{className:`w-full`,children:[h(d,{mode:c||f?`visible`:`hidden`,children:g(e,{children:[h(a,{children:c}),!!f&&h(n,{children:f})]})}),h(t,{children:h(_,{placeholder:l,...r,onValueChange:p})}),u&&h(o,{})]})});export{v as PasswordField};
+"use client";import"../label-CdrxlBJ8.js";import"../separator-D17HxS2f.js";import{FieldContent as e}from"../field-GVRRZiSk.js";import{FormControl as t,FormDescription as n,FormField as r,FormItem as i,FormLabel as a,FormMessage as o}from"../form-De64-oXe.js";import{Input as s}from"../input-BStypTnq.js";import{EyeIcon as c,EyeOffIcon as l}from"lucide-react";import{cn as u}from"@customafk/react-toolkit/utils";import{Activity as d,useCallback as f,useId as p,useState as m}from"react";import{jsx as h,jsxs as g}from"react/jsx-runtime";const _=({className:e,...t})=>{let n=p(),[r,i]=m(!1),a=f(()=>i(e=>!e),[]);return g(`div`,{className:`relative`,children:[h(s,{...t,id:n,placeholder:`Password`,type:r?`text`:`password`,className:u(`pe-9`,e)}),h(`button`,{className:`text-muted-foreground/80 hover:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md transition-[color,box-shadow] outline-none focus:z-10 focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50`,type:`button`,onClick:a,"aria-label":r?`Hide password`:`Show password`,"aria-pressed":r,"aria-controls":`password`,children:h(r?l:c,{size:16,"aria-hidden":`true`})})]})},v=({name:s,label:c=`Text Field`,placeholder:l=`Enter text here`,isShowErrorMsg:u=!1,description:f,onValueChange:p})=>h(r,{name:s,render:({field:r})=>g(i,{className:`w-full`,children:[h(d,{mode:c||f?`visible`:`hidden`,children:g(e,{children:[h(a,{children:c}),!!f&&h(n,{children:f})]})}),h(t,{children:h(_,{placeholder:l,...r,onValueChange:p})}),u&&h(o,{})]})});export{v as PasswordField};
 //# sourceMappingURL=password-field.js.map

package/dist/forms/select-field.cjs

@@ -1,2 +1,2 @@
-"use client";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(`../select-BD7dul2u.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=`Select Field`,placeholder:s=`Select an option`,disabledValues:c=[],options:l=[],isShowLabel:u=!0,isShowErrorMsg:d=!1,description:f=``,className:p=``})=>(0,a.jsx)(n.FormField,{name:e,render:({field:e})=>(0,a.jsxs)(n.FormItem,{className:p,children:[(0,a.jsx)(i.Activity,{mode:o||f?`visible`:`hidden`,children:(0,a.jsxs)(t.FieldContent,{children:[u&&(0,a.jsx)(n.FormLabel,{children:o}),!!f&&(0,a.jsx)(n.FormDescription,{children:f})]})}),(0,a.jsxs)(r.Select,{defaultValue:e.value,onValueChange:e.onChange,children:[(0,a.jsx)(n.FormControl,{children:(0,a.jsx)(r.SelectTrigger,{className:`w-full`,children:(0,a.jsx)(r.SelectValue,{placeholder:s})})}),(0,a.jsx)(r.SelectContent,{children:l.map(e=>(0,a.jsx)(r.SelectItem,{disabled:c.includes(e.value),value:e.value,children:e.label},e.value))})]}),d&&(0,a.jsx)(n.FormMessage,{})]})});exports.SelectField=o;
+"use client";const e=require(`../chunk-CUT6urMc.cjs`);require(`../label-D6mAvVmw.cjs`),require(`../separator-DMMoR-d2.cjs`);const t=require(`../field-DWOm17T1.cjs`),n=require(`../form-rN5ezSn5.cjs`),r=require(`../select-Cf4NpYjl.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=`Select Field`,placeholder:s=`Select an option`,disabledValues:c=[],options:l=[],isShowLabel:u=!0,isShowErrorMsg:d=!1,description:f=``,className:p=``})=>(0,a.jsx)(n.FormField,{name:e,render:({field:e})=>(0,a.jsxs)(n.FormItem,{className:p,children:[(0,a.jsx)(i.Activity,{mode:o||f?`visible`:`hidden`,children:(0,a.jsxs)(t.FieldContent,{children:[u&&(0,a.jsx)(n.FormLabel,{children:o}),!!f&&(0,a.jsx)(n.FormDescription,{children:f})]})}),(0,a.jsxs)(`div`,{className:`basis-3/5 flex justify-end`,children:[(0,a.jsxs)(r.Select,{defaultValue:e.value,onValueChange:e.onChange,children:[(0,a.jsx)(n.FormControl,{children:(0,a.jsx)(r.SelectTrigger,{className:`w-full md:max-w-80`,children:(0,a.jsx)(r.SelectValue,{placeholder:s})})}),(0,a.jsx)(r.SelectContent,{children:l.map(e=>(0,a.jsx)(r.SelectItem,{disabled:c.includes(e.value),value:e.value,children:e.label},e.value))})]}),d&&(0,a.jsx)(n.FormMessage,{})]})]})});exports.SelectField=o;
 //# sourceMappingURL=select-field.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"select-field.cjs","names":["FormField","FormItem","Activity","FieldContent","FormLabel","FormDescription","Select","FormControl","SelectTrigger","SelectValue","SelectContent","SelectItem","FormMessage"],"sources":["../../packages/components/forms/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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  name: FieldPath<TFieldValues>;\n  label?: string;\n  placeholder?: string;\n  disabledValues?: string[];\n  options?: { value: string; label: string }[];\n  isShowLabel?: boolean;\n  isShowErrorMsg?: boolean;\n  modal?: boolean;\n  description?: string;\n  className?: string;\n};\nexport const SelectField = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  label = 'Select Field',\n  placeholder = 'Select an option',\n  disabledValues = [],\n  options = [],\n  isShowLabel = true,\n  isShowErrorMsg = false,\n  description = '',\n  className = '',\n}: Props<TFieldValues>) => {\n  return (\n    <FormField\n      name={name}\n      render={({ field }) => (\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          <Select defaultValue={field.value} onValueChange={field.onChange}>\n            <FormControl>\n              <SelectTrigger className=\"w-full\">\n                <SelectValue placeholder={placeholder} />\n              </SelectTrigger>\n            </FormControl>\n            <SelectContent>\n              {options.map(option => (\n                <SelectItem key={option.value} disabled={disabledValues.includes(option.value)} value={option.value}>\n                  {option.label}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n          {isShowErrorMsg && <FormMessage />}\n        </FormItem>\n      )}\n    />\n  );\n};\n"],"mappings":"mUAoBA,MAAa,GAA+D,CAC1E,OACA,QAAQ,eACR,cAAc,mBACd,iBAAiB,EAAE,CACnB,UAAU,EAAE,CACZ,cAAc,GACd,iBAAiB,GACjB,cAAc,GACd,YAAY,OAGV,EAAA,EAAA,KAACA,EAAAA,UAAAA,CACO,OACN,QAAS,CAAE,YACT,EAAA,EAAA,MAACC,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,MAACC,EAAAA,OAAAA,CAAO,aAAc,EAAM,MAAO,cAAe,EAAM,oBACtD,EAAA,EAAA,KAACC,EAAAA,YAAAA,CAAAA,UACC,EAAA,EAAA,KAACC,EAAAA,cAAAA,CAAc,UAAU,mBACvB,EAAA,EAAA,KAACC,EAAAA,YAAAA,CAAyB,cAAA,CAAe,EAC3B,CAAA,CACJ,EACd,EAAA,EAAA,KAACC,EAAAA,cAAAA,CAAAA,SACE,EAAQ,IAAI,IACX,EAAA,EAAA,KAACC,EAAAA,WAAAA,CAA8B,SAAU,EAAe,SAAS,EAAO,MAAM,CAAE,MAAO,EAAO,eAC3F,EAAO,OADO,EAAO,MAEX,CACb,CAAA,CACY,CAAA,EACT,CACR,IAAkB,EAAA,EAAA,KAACC,EAAAA,YAAAA,EAAAA,CAAc,GACzB,EAEb"}
+{"version":3,"file":"select-field.cjs","names":["FormField","FormItem","Activity","FieldContent","FormLabel","FormDescription","Select","FormControl","SelectTrigger","SelectValue","SelectContent","SelectItem","FormMessage"],"sources":["../../packages/components/forms/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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  name: FieldPath<TFieldValues>;\n  label?: string;\n  placeholder?: string;\n  disabledValues?: string[];\n  options?: { value: string; label: string }[];\n  isShowLabel?: boolean;\n  isShowErrorMsg?: boolean;\n  modal?: boolean;\n  description?: string;\n  className?: string;\n};\nexport const SelectField = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  label = 'Select Field',\n  placeholder = 'Select an option',\n  disabledValues = [],\n  options = [],\n  isShowLabel = true,\n  isShowErrorMsg = false,\n  description = '',\n  className = '',\n}: Props<TFieldValues>) => {\n  return (\n    <FormField\n      name={name}\n      render={({ field }) => (\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          <div className=\"basis-3/5 flex justify-end\">\n            <Select defaultValue={field.value} onValueChange={field.onChange}>\n              <FormControl>\n                <SelectTrigger className=\"w-full md:max-w-80\">\n                  <SelectValue placeholder={placeholder} />\n                </SelectTrigger>\n              </FormControl>\n              <SelectContent>\n                {options.map(option => (\n                  <SelectItem key={option.value} disabled={disabledValues.includes(option.value)} value={option.value}>\n                    {option.label}\n                  </SelectItem>\n                ))}\n              </SelectContent>\n            </Select>\n            {isShowErrorMsg && <FormMessage />}\n          </div>\n        </FormItem>\n      )}\n    />\n  );\n};\n"],"mappings":"mUAoBA,MAAa,GAA+D,CAC1E,OACA,QAAQ,eACR,cAAc,mBACd,iBAAiB,EAAE,CACnB,UAAU,EAAE,CACZ,cAAc,GACd,iBAAiB,GACjB,cAAc,GACd,YAAY,OAGV,EAAA,EAAA,KAACA,EAAAA,UAAAA,CACO,OACN,QAAS,CAAE,YACT,EAAA,EAAA,MAACC,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,MAAC,MAAA,CAAI,UAAU,wCACb,EAAA,EAAA,MAACC,EAAAA,OAAAA,CAAO,aAAc,EAAM,MAAO,cAAe,EAAM,oBACtD,EAAA,EAAA,KAACC,EAAAA,YAAAA,CAAAA,UACC,EAAA,EAAA,KAACC,EAAAA,cAAAA,CAAc,UAAU,+BACvB,EAAA,EAAA,KAACC,EAAAA,YAAAA,CAAyB,cAAA,CAAe,EAC3B,CAAA,CACJ,EACd,EAAA,EAAA,KAACC,EAAAA,cAAAA,CAAAA,SACE,EAAQ,IAAI,IACX,EAAA,EAAA,KAACC,EAAAA,WAAAA,CAA8B,SAAU,EAAe,SAAS,EAAO,MAAM,CAAE,MAAO,EAAO,eAC3F,EAAO,OADO,EAAO,MAEX,CACb,CAAA,CACY,CAAA,EACT,CACR,IAAkB,EAAA,EAAA,KAACC,EAAAA,YAAAA,EAAAA,CAAc,CAAA,EAC9B,CAAA,EACG,EAEb"}

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

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