@customafk/lunas-ui 0.0.62 → 0.0.64

package/dist/form-D-gDMD-J.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-D-gDMD-J.js","names":["Label","SlotPrimitive"],"sources":["../packages/components/ui/form.tsx"],"sourcesContent":["'use client'\nimport { createContext, useContext, useId } from 'react'\nimport { Controller, type ControllerProps, type FieldPath, type FieldValues, FormProvider, useFormContext, useFormState } from 'react-hook-form'\nimport { cn } from '@customafk/react-toolkit/utils'\n\nimport { Label } from '@/components/ui/label'\n\nimport { Label as LabelPrimitive, Slot as SlotPrimitive } from 'radix-ui'\n\nconst Form = FormProvider\n\ntype FormFieldContextValue<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {\n  name: TName\n}\n\nconst FormFieldContext = createContext<FormFieldContextValue>({} as FormFieldContextValue)\n\nconst FormField = <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({\n  ...props\n}: ControllerProps<TFieldValues, TName>) => {\n  return (\n    <FormFieldContext.Provider value={{ name: props.name }}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  )\n}\n\nconst useFormField = () => {\n  const fieldContext = useContext(FormFieldContext)\n  const itemContext = useContext(FormItemContext)\n  const { getFieldState, control, resetField } = useFormContext()\n  const formState = useFormState({ name: fieldContext.name })\n  const fieldState = getFieldState(fieldContext.name, formState)\n\n  if (!fieldContext) {\n    throw new Error('useFormField should be used within <FormField>')\n  }\n\n  const { id } = itemContext\n\n  return {\n    id,\n    control,\n    resetField,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  }\n}\n\ntype FormItemContextValue = {\n  id: string\n}\n\nconst FormItemContext = createContext<FormItemContextValue>({} as FormItemContextValue)\n\nfunction FormItem({ className, ...props }: React.ComponentProps<'div'>) {\n  const id = useId()\n\n  return (\n    <FormItemContext.Provider value={{ id }}>\n      <div data-slot=\"form-item\" className={cn('grid gap-1', className)} {...props} />\n    </FormItemContext.Provider>\n  )\n}\n\nfunction FormLabel({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {\n  const { formItemId } = useFormField()\n  return <Label data-slot=\"form-label\" className={cn('text-xs', className)} htmlFor={formItemId} {...props} />\n}\n\nfunction FormControl({ ...props }: React.ComponentProps<typeof SlotPrimitive.Slot>) {\n  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n\n  return (\n    <SlotPrimitive.Slot\n      data-slot=\"form-control\"\n      id={formItemId}\n      aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}\n      aria-invalid={!!error}\n      {...props}\n    />\n  )\n}\n\nfunction FormDescription({ className, ...props }: React.ComponentProps<'p'>) {\n  const { formDescriptionId } = useFormField()\n\n  return <p data-slot=\"form-description\" id={formDescriptionId} className={cn('text-text-positive-weak text-sm', className)} {...props} />\n}\n\nfunction FormMessage({ className, children, ...props }: React.ComponentProps<'p'>) {\n  const { error, formMessageId } = useFormField()\n\n  return (\n    <span data-slot=\"form-message\" id={formMessageId} className={cn('text-danger text-xs', className)} {...props}>\n      {error ? String(error?.message ?? '') : children}\n    </span>\n  )\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField }\n"],"mappings":"yVASA,MAAM,EAAO,EAMP,EAAmB,EAAqC,IAExD,GAA8H,CAClI,GAAG,KAGD,EAAC,EAAiB,SAAA,CAAS,MAAO,CAAE,KAAM,EAAM,eAC9C,EAAC,EAAA,CAAW,GAAI,MAKhB,MAAqB,CACzB,IAAM,EAAe,EAAW,GAC1B,EAAc,EAAW,GACzB,CAAE,gBAAe,UAAS,cAAe,IACzC,EAAY,EAAa,CAAE,KAAM,EAAa,OAC9C,EAAa,EAAc,EAAa,KAAM,GAEpD,GAAI,CAAC,EACH,MAAU,MAAM,kDAGlB,GAAM,CAAE,MAAO,EAEf,MAAO,CACL,KACA,UACA,aACA,KAAM,EAAa,KACnB,WAAY,GAAG,EAAG,YAClB,kBAAmB,GAAG,EAAG,wBACzB,cAAe,GAAG,EAAG,oBACrB,GAAG,IAQD,EAAkB,EAAoC,IAE5D,SAAS,EAAS,CAAE,YAAW,GAAG,GAAsC,CACtE,IAAM,EAAK,IAEX,OACE,EAAC,EAAgB,SAAA,CAAS,MAAO,CAAE,eACjC,EAAC,MAAA,CAAI,YAAU,YAAY,UAAW,EAAG,aAAc,GAAY,GAAI,MAK7E,SAAS,EAAU,CAAE,YAAW,GAAG,GAA2D,CAC5F,GAAM,CAAE,cAAe,IACvB,OAAO,EAACA,EAAAA,CAAM,YAAU,aAAa,UAAW,EAAG,UAAW,GAAY,QAAS,EAAY,GAAI,IAGrG,SAAS,EAAY,CAAE,GAAG,GAA0D,CAClF,GAAM,CAAE,QAAO,aAAY,oBAAmB,iBAAkB,IAEhE,OACE,EAACC,EAAc,KAAA,CACb,YAAU,eACV,GAAI,EACJ,mBAAmB,EAAiC,GAAG,EAAkB,GAAG,IAAjD,GAAG,IAC9B,eAAc,CAAC,CAAC,EAChB,GAAI,IAKV,SAAS,EAAgB,CAAE,YAAW,GAAG,GAAoC,CAC3E,GAAM,CAAE,qBAAsB,IAE9B,OAAO,EAAC,IAAA,CAAE,YAAU,mBAAmB,GAAI,EAAmB,UAAW,EAAG,kCAAmC,GAAY,GAAI,IAGjI,SAAS,EAAY,CAAE,YAAW,WAAU,GAAG,GAAoC,CACjF,GAAM,CAAE,QAAO,iBAAkB,IAEjC,OACE,EAAC,OAAA,CAAK,YAAU,eAAe,GAAI,EAAe,UAAW,EAAG,sBAAuB,GAAY,GAAI,WACpG,EAAQ,OAAO,GAAO,SAAW,IAAM"}

package/dist/{form-wrapper-D0-p7R15.cjs → form-wrapper-BUkoh-c7.cjs}

@@ -1,2 +1,2 @@
-const e=require(`./chunk-CUT6urMc.cjs`),t=require(`./error-dialog-COyyui94.cjs`),n=require(`./form-DAwCSzSe.cjs`),r=e.__toESM(require(`lucide-react`)),i=e.__toESM(require(`react/jsx-runtime`)),a=e.__toESM(require(`react`)),o=e.__toESM(require(`react-hook-form`)),s=e.__toESM(require(`@hookform/error-message`)),c=({form:e,isResetAfterSubmit:c=!0,className:l,onSubmit:u,onError:d,onSubcribe:f,children:p})=>{let m=(0,o.useForm)({...e,criteriaMode:`all`}),{formState:h,reset:g,handleSubmit:_,subscribe:v}=m,{dirtyFields:y}=h,[b,x]=(0,a.useState)(!1),S=(0,a.useCallback)(e=>{u(e,h,y),c&&g()},[y,h,c,u,g]),C=(0,a.useCallback)(e=>{let t=Object.keys(e);t.length!==0&&(d?.(e),x(!0))},[d]);return(0,a.useEffect)(()=>{if(!f)return;let e=v({formState:{values:!0},callback:({values:e})=>{f(e)}});return()=>e()},[f,v]),(0,i.jsxs)(n.Form,{...m,children:[(0,i.jsx)(`form`,{className:l,onSubmit:_(S,C),children:p}),(0,i.jsx)(t.ErrorDialog,{open:b,title:`Lỗi nhập dữ liệu`,description:`An unexpected error has occurred. Please check the errors below and try again.`,onOpenChange:x,children:b&&(0,i.jsx)(i.Fragment,{children:Object.keys(h.errors).length>0?(0,i.jsxs)(`div`,{className:`flex max-w-100 flex-col gap-2 px-4`,children:[(0,i.jsx)(`p`,{className:`text-muted-foreground text-sm font-semibold`,children:`Cảnh báo: Vui lòng kiểm tra các lỗi sau:`}),(0,i.jsx)(`div`,{className:`flex flex-col space-y-1`,children:Object.entries(h.errors).map(([e])=>(0,i.jsx)(s.ErrorMessage,{errors:h.errors,name:e,render:({messages:e})=>(0,i.jsx)(i.Fragment,{children:e?Object.entries(e).map(([e,t])=>(0,i.jsxs)(`div`,{className:`text-accent-foreground flex items-start gap-x-1 truncate text-sm font-normal`,children:[(0,i.jsx)(r.AlertCircleIcon,{size:16,className:`text-destructive mt-0.5 min-w-4 flex-0`}),(0,i.jsx)(`p`,{className:`line-clamp-2 flex-1 text-wrap`,children:t})]},e)):null})},e))})]}):(0,i.jsx)(`p`,{className:`text-muted-foreground text-sm`,children:`No errors found.`})})})]})};Object.defineProperty(exports,`FormWrapper`,{enumerable:!0,get:function(){return c}});
-//# sourceMappingURL=form-wrapper-D0-p7R15.cjs.map
+const e=require(`./chunk-CUT6urMc.cjs`),t=require(`./error-dialog-BkCaUR7F.cjs`),n=require(`./form-CaxhlWxK.cjs`),r=e.__toESM(require(`lucide-react`)),i=e.__toESM(require(`react/jsx-runtime`)),a=e.__toESM(require(`react`)),o=e.__toESM(require(`react-hook-form`)),s=e.__toESM(require(`@hookform/error-message`)),c=({form:e,isResetAfterSubmit:c=!0,className:l,onSubmit:u,onError:d,onSubcribe:f,children:p})=>{let m=(0,o.useForm)({...e,criteriaMode:`all`}),{formState:h,reset:g,handleSubmit:_,subscribe:v}=m,{dirtyFields:y}=h,[b,x]=(0,a.useState)(!1),S=(0,a.useCallback)(e=>{u(e,h,y),c&&g()},[y,h,c,u,g]),C=(0,a.useCallback)(e=>{let t=Object.keys(e);t.length!==0&&(d?.(e),x(!0))},[d]);return(0,a.useEffect)(()=>{if(!f)return;let e=v({formState:{values:!0},callback:({values:e})=>{f(e)}});return()=>e()},[f,v]),(0,i.jsxs)(n.Form,{...m,children:[(0,i.jsx)(`form`,{className:l,onSubmit:_(S,C),children:p}),(0,i.jsx)(t.ErrorDialog,{open:b,title:`Lỗi nhập dữ liệu`,description:`An unexpected error has occurred. Please check the errors below and try again.`,onOpenChange:x,children:b&&(0,i.jsx)(i.Fragment,{children:Object.keys(h.errors).length>0?(0,i.jsxs)(`div`,{className:`flex max-w-100 flex-col gap-2 px-4`,children:[(0,i.jsx)(`p`,{className:`text-muted-foreground text-sm font-semibold`,children:`Cảnh báo: Vui lòng kiểm tra các lỗi sau:`}),(0,i.jsx)(`div`,{className:`flex flex-col space-y-1`,children:Object.entries(h.errors).map(([e])=>(0,i.jsx)(s.ErrorMessage,{errors:h.errors,name:e,render:({messages:e})=>(0,i.jsx)(i.Fragment,{children:e?Object.entries(e).map(([e,t])=>(0,i.jsxs)(`div`,{className:`text-accent-foreground flex items-start gap-x-1 truncate text-sm font-normal`,children:[(0,i.jsx)(r.AlertCircleIcon,{size:16,className:`text-destructive mt-0.5 min-w-4 flex-0`}),(0,i.jsx)(`p`,{className:`line-clamp-2 flex-1 text-wrap`,children:t})]},e)):null})},e))})]}):(0,i.jsx)(`p`,{className:`text-muted-foreground text-sm`,children:`No errors found.`})})})]})};Object.defineProperty(exports,`FormWrapper`,{enumerable:!0,get:function(){return c}});
+//# sourceMappingURL=form-wrapper-BUkoh-c7.cjs.map

package/dist/{form-wrapper-D0-p7R15.cjs.map → form-wrapper-BUkoh-c7.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"form-wrapper-D0-p7R15.cjs","names":["Form","ErrorDialog","ErrorMessage","AlertCircleIcon"],"sources":["../packages/components/forms/form-wrapper.tsx"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react'\nimport { type FieldValues, type FormState, type SubmitErrorHandler, type SubmitHandler, useForm, type UseFormProps } from 'react-hook-form'\n\nimport { AlertCircleIcon } from 'lucide-react'\n\nimport type { AnyEntity } from '@/types'\nimport { ErrorMessage } from '@hookform/error-message'\n\nimport { ErrorDialog } from '../dialogs/error-dialog'\nimport { Form } from '../ui/form'\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  form: UseFormProps<TFieldValues>\n  isResetAfterSubmit?: boolean\n  className?: string\n  onSubmit: (data: TFieldValues, formState: FormState<FieldValues>, dirtyFields: FormState<FieldValues>['dirtyFields']) => void | Promise<void>\n  onError?: SubmitErrorHandler<TFieldValues>\n  onSubcribe?: (values: TFieldValues) => void\n}\n\nexport const FormWrapper = <TFieldValues extends FieldValues = FieldValues>({\n  form: FormConfig,\n  isResetAfterSubmit = true,\n  className,\n  onSubmit,\n  onError,\n  onSubcribe,\n  children,\n}: React.PropsWithChildren<Props<TFieldValues>>) => {\n  const form = useForm({\n    ...FormConfig,\n    criteriaMode: 'all',\n  })\n\n  const { formState, reset, handleSubmit, subscribe } = form\n  const { dirtyFields } = formState\n\n  const [errorOpen, setErrorOpen] = useState<boolean>(false)\n\n  const handleFormSubmit = useCallback<SubmitHandler<TFieldValues>>(\n    (data) => {\n      onSubmit(data, formState, dirtyFields)\n      if (isResetAfterSubmit) {\n        reset()\n      }\n    },\n    [dirtyFields, formState, isResetAfterSubmit, onSubmit, reset],\n  )\n\n  const handleFormError = useCallback<SubmitErrorHandler<TFieldValues>>(\n    (errors) => {\n      const errorKeys = Object.keys(errors)\n      if (errorKeys.length === 0) return\n      onError?.(errors)\n      setErrorOpen(true)\n    },\n    [onError],\n  )\n\n  useEffect(() => {\n    if (!onSubcribe) return\n    const callback = subscribe({\n      formState: { values: true },\n      callback: ({ values }) => {\n        onSubcribe(values)\n      },\n    })\n    return () => callback()\n  }, [onSubcribe, subscribe])\n\n  return (\n    <Form {...form}>\n      <form className={className} onSubmit={handleSubmit(handleFormSubmit, handleFormError)}>\n        {children}\n      </form>\n      <ErrorDialog\n        open={errorOpen}\n        title=\"Lỗi nhập dữ liệu\"\n        description=\"An unexpected error has occurred. Please check the errors below and try again.\"\n        onOpenChange={setErrorOpen}\n      >\n        {errorOpen && (\n          <>\n            {Object.keys(formState.errors).length > 0 ? (\n              <div className=\"flex max-w-100 flex-col gap-2 px-4\">\n                <p className=\"text-muted-foreground text-sm font-semibold\">Cảnh báo: Vui lòng kiểm tra các lỗi sau:</p>\n                <div className=\"flex flex-col space-y-1\">\n                  {Object.entries(formState.errors).map(([key]) => (\n                    <ErrorMessage\n                      key={key}\n                      errors={formState.errors}\n                      name={key as AnyEntity}\n                      render={({ messages }) => {\n                        return (\n                          <>\n                            {messages\n                              ? Object.entries(messages).map(([type, message]) => {\n                                  return (\n                                    <div key={type} className=\"text-accent-foreground flex items-start gap-x-1 truncate text-sm font-normal\">\n                                      <AlertCircleIcon size={16} className=\"text-destructive mt-0.5 min-w-4 flex-0\" />\n                                      <p className=\"line-clamp-2 flex-1 text-wrap\">{message}</p>\n                                    </div>\n                                  )\n                                })\n                              : null}\n                          </>\n                        )\n                      }}\n                    />\n                  ))}\n                </div>\n              </div>\n            ) : (\n              <p className=\"text-muted-foreground text-sm\">No errors found.</p>\n            )}\n          </>\n        )}\n      </ErrorDialog>\n    </Form>\n  )\n}\n"],"mappings":"uTAoBa,GAA+D,CAC1E,KAAM,EACN,qBAAqB,GACrB,YACA,WACA,UACA,aACA,cACkD,CAClD,IAAM,GAAA,EAAA,EAAA,SAAe,CACnB,GAAG,EACH,aAAc,QAGV,CAAE,YAAW,QAAO,eAAc,aAAc,EAChD,CAAE,eAAgB,EAElB,CAAC,EAAW,IAAA,EAAA,EAAA,UAAkC,IAE9C,GAAA,EAAA,EAAA,aACH,GAAS,CACR,EAAS,EAAM,EAAW,GACtB,GACF,KAGJ,CAAC,EAAa,EAAW,EAAoB,EAAU,IAGnD,GAAA,EAAA,EAAA,aACH,GAAW,CACV,IAAM,EAAY,OAAO,KAAK,GAC1B,EAAU,SAAW,IACzB,IAAU,GACV,EAAa,MAEf,CAAC,IAcH,OAXA,EAAA,EAAA,eAAgB,CACd,GAAI,CAAC,EAAY,OACjB,IAAM,EAAW,EAAU,CACzB,UAAW,CAAE,OAAQ,IACrB,UAAW,CAAE,YAAa,CACxB,EAAW,MAGf,UAAa,KACZ,CAAC,EAAY,KAGd,EAAA,EAAA,MAACA,EAAAA,KAAAA,CAAK,GAAI,aACR,EAAA,EAAA,KAAC,OAAA,CAAgB,YAAW,SAAU,EAAa,EAAkB,GAClE,cAEH,EAAA,EAAA,KAACC,EAAAA,YAAAA,CACC,KAAM,EACN,MAAM,mBACN,YAAY,iFACZ,aAAc,WAEb,IACC,EAAA,EAAA,KAAA,EAAA,SAAA,CAAA,SACG,OAAO,KAAK,EAAU,QAAQ,OAAS,GACtC,EAAA,EAAA,MAAC,MAAA,CAAI,UAAU,gDACb,EAAA,EAAA,KAAC,IAAA,CAAE,UAAU,uDAA8C,8CAC3D,EAAA,EAAA,KAAC,MAAA,CAAI,UAAU,mCACZ,OAAO,QAAQ,EAAU,QAAQ,KAAK,CAAC,MACtC,EAAA,EAAA,KAACC,EAAAA,aAAAA,CAEC,OAAQ,EAAU,OAClB,KAAM,EACN,QAAS,CAAE,eAEP,EAAA,EAAA,KAAA,EAAA,SAAA,CAAA,SACG,EACG,OAAO,QAAQ,GAAU,KAAK,CAAC,EAAM,MAEjC,EAAA,EAAA,MAAC,MAAA,CAAe,UAAU,0FACxB,EAAA,EAAA,KAACC,EAAAA,gBAAAA,CAAgB,KAAM,GAAI,UAAU,4CACrC,EAAA,EAAA,KAAC,IAAA,CAAE,UAAU,yCAAiC,MAFtC,IAMd,QAfL,UAwBb,EAAA,EAAA,KAAC,IAAA,CAAE,UAAU,yCAAgC"}
+{"version":3,"file":"form-wrapper-BUkoh-c7.cjs","names":["Form","ErrorDialog","ErrorMessage","AlertCircleIcon"],"sources":["../packages/components/forms/form-wrapper.tsx"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react'\nimport { type FieldValues, type FormState, type SubmitErrorHandler, type SubmitHandler, useForm, type UseFormProps } from 'react-hook-form'\n\nimport { AlertCircleIcon } from 'lucide-react'\n\nimport type { AnyEntity } from '@/types'\nimport { ErrorMessage } from '@hookform/error-message'\n\nimport { ErrorDialog } from '../dialogs/error-dialog'\nimport { Form } from '../ui/form'\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  form: UseFormProps<TFieldValues>\n  isResetAfterSubmit?: boolean\n  className?: string\n  onSubmit: (data: TFieldValues, formState: FormState<FieldValues>, dirtyFields: FormState<FieldValues>['dirtyFields']) => void | Promise<void>\n  onError?: SubmitErrorHandler<TFieldValues>\n  onSubcribe?: (values: TFieldValues) => void\n}\n\nexport const FormWrapper = <TFieldValues extends FieldValues = FieldValues>({\n  form: FormConfig,\n  isResetAfterSubmit = true,\n  className,\n  onSubmit,\n  onError,\n  onSubcribe,\n  children,\n}: React.PropsWithChildren<Props<TFieldValues>>) => {\n  const form = useForm({\n    ...FormConfig,\n    criteriaMode: 'all',\n  })\n\n  const { formState, reset, handleSubmit, subscribe } = form\n  const { dirtyFields } = formState\n\n  const [errorOpen, setErrorOpen] = useState<boolean>(false)\n\n  const handleFormSubmit = useCallback<SubmitHandler<TFieldValues>>(\n    (data) => {\n      onSubmit(data, formState, dirtyFields)\n      if (isResetAfterSubmit) {\n        reset()\n      }\n    },\n    [dirtyFields, formState, isResetAfterSubmit, onSubmit, reset],\n  )\n\n  const handleFormError = useCallback<SubmitErrorHandler<TFieldValues>>(\n    (errors) => {\n      const errorKeys = Object.keys(errors)\n      if (errorKeys.length === 0) return\n      onError?.(errors)\n      setErrorOpen(true)\n    },\n    [onError],\n  )\n\n  useEffect(() => {\n    if (!onSubcribe) return\n    const callback = subscribe({\n      formState: { values: true },\n      callback: ({ values }) => {\n        onSubcribe(values)\n      },\n    })\n    return () => callback()\n  }, [onSubcribe, subscribe])\n\n  return (\n    <Form {...form}>\n      <form className={className} onSubmit={handleSubmit(handleFormSubmit, handleFormError)}>\n        {children}\n      </form>\n      <ErrorDialog\n        open={errorOpen}\n        title=\"Lỗi nhập dữ liệu\"\n        description=\"An unexpected error has occurred. Please check the errors below and try again.\"\n        onOpenChange={setErrorOpen}\n      >\n        {errorOpen && (\n          <>\n            {Object.keys(formState.errors).length > 0 ? (\n              <div className=\"flex max-w-100 flex-col gap-2 px-4\">\n                <p className=\"text-muted-foreground text-sm font-semibold\">Cảnh báo: Vui lòng kiểm tra các lỗi sau:</p>\n                <div className=\"flex flex-col space-y-1\">\n                  {Object.entries(formState.errors).map(([key]) => (\n                    <ErrorMessage\n                      key={key}\n                      errors={formState.errors}\n                      name={key as AnyEntity}\n                      render={({ messages }) => {\n                        return (\n                          <>\n                            {messages\n                              ? Object.entries(messages).map(([type, message]) => {\n                                  return (\n                                    <div key={type} className=\"text-accent-foreground flex items-start gap-x-1 truncate text-sm font-normal\">\n                                      <AlertCircleIcon size={16} className=\"text-destructive mt-0.5 min-w-4 flex-0\" />\n                                      <p className=\"line-clamp-2 flex-1 text-wrap\">{message}</p>\n                                    </div>\n                                  )\n                                })\n                              : null}\n                          </>\n                        )\n                      }}\n                    />\n                  ))}\n                </div>\n              </div>\n            ) : (\n              <p className=\"text-muted-foreground text-sm\">No errors found.</p>\n            )}\n          </>\n        )}\n      </ErrorDialog>\n    </Form>\n  )\n}\n"],"mappings":"uTAoBa,GAA+D,CAC1E,KAAM,EACN,qBAAqB,GACrB,YACA,WACA,UACA,aACA,cACkD,CAClD,IAAM,GAAA,EAAA,EAAA,SAAe,CACnB,GAAG,EACH,aAAc,QAGV,CAAE,YAAW,QAAO,eAAc,aAAc,EAChD,CAAE,eAAgB,EAElB,CAAC,EAAW,IAAA,EAAA,EAAA,UAAkC,IAE9C,GAAA,EAAA,EAAA,aACH,GAAS,CACR,EAAS,EAAM,EAAW,GACtB,GACF,KAGJ,CAAC,EAAa,EAAW,EAAoB,EAAU,IAGnD,GAAA,EAAA,EAAA,aACH,GAAW,CACV,IAAM,EAAY,OAAO,KAAK,GAC1B,EAAU,SAAW,IACzB,IAAU,GACV,EAAa,MAEf,CAAC,IAcH,OAXA,EAAA,EAAA,eAAgB,CACd,GAAI,CAAC,EAAY,OACjB,IAAM,EAAW,EAAU,CACzB,UAAW,CAAE,OAAQ,IACrB,UAAW,CAAE,YAAa,CACxB,EAAW,MAGf,UAAa,KACZ,CAAC,EAAY,KAGd,EAAA,EAAA,MAACA,EAAAA,KAAAA,CAAK,GAAI,aACR,EAAA,EAAA,KAAC,OAAA,CAAgB,YAAW,SAAU,EAAa,EAAkB,GAClE,cAEH,EAAA,EAAA,KAACC,EAAAA,YAAAA,CACC,KAAM,EACN,MAAM,mBACN,YAAY,iFACZ,aAAc,WAEb,IACC,EAAA,EAAA,KAAA,EAAA,SAAA,CAAA,SACG,OAAO,KAAK,EAAU,QAAQ,OAAS,GACtC,EAAA,EAAA,MAAC,MAAA,CAAI,UAAU,gDACb,EAAA,EAAA,KAAC,IAAA,CAAE,UAAU,uDAA8C,8CAC3D,EAAA,EAAA,KAAC,MAAA,CAAI,UAAU,mCACZ,OAAO,QAAQ,EAAU,QAAQ,KAAK,CAAC,MACtC,EAAA,EAAA,KAACC,EAAAA,aAAAA,CAEC,OAAQ,EAAU,OAClB,KAAM,EACN,QAAS,CAAE,eAEP,EAAA,EAAA,KAAA,EAAA,SAAA,CAAA,SACG,EACG,OAAO,QAAQ,GAAU,KAAK,CAAC,EAAM,MAEjC,EAAA,EAAA,MAAC,MAAA,CAAe,UAAU,0FACxB,EAAA,EAAA,KAACC,EAAAA,gBAAAA,CAAgB,KAAM,GAAI,UAAU,4CACrC,EAAA,EAAA,KAAC,IAAA,CAAE,UAAU,yCAAiC,MAFtC,IAMd,QAfL,UAwBb,EAAA,EAAA,KAAC,IAAA,CAAE,UAAU,yCAAgC"}

package/dist/{form-wrapper-C4OO_eLu.js → form-wrapper-BbScjpBv.js}

@@ -1,2 +1,2 @@
-import{ErrorDialog as e}from"./error-dialog-YlSsQqiT.js";import{Form as t}from"./form-B0fOiANW.js";import{AlertCircleIcon as n}from"lucide-react";import{Fragment as r,jsx as i,jsxs as a}from"react/jsx-runtime";import{useCallback as o,useEffect as s,useState as c}from"react";import{useForm as l}from"react-hook-form";import{ErrorMessage as u}from"@hookform/error-message";const d=({form:d,isResetAfterSubmit:f=!0,className:p,onSubmit:m,onError:h,onSubcribe:g,children:_})=>{let v=l({...d,criteriaMode:`all`}),{formState:y,reset:b,handleSubmit:x,subscribe:S}=v,{dirtyFields:C}=y,[w,T]=c(!1),E=o(e=>{m(e,y,C),f&&b()},[C,y,f,m,b]),D=o(e=>{let t=Object.keys(e);t.length!==0&&(h?.(e),T(!0))},[h]);return s(()=>{if(!g)return;let e=S({formState:{values:!0},callback:({values:e})=>{g(e)}});return()=>e()},[g,S]),a(t,{...v,children:[i(`form`,{className:p,onSubmit:x(E,D),children:_}),i(e,{open:w,title:`Lỗi nhập dữ liệu`,description:`An unexpected error has occurred. Please check the errors below and try again.`,onOpenChange:T,children:w&&i(r,{children:Object.keys(y.errors).length>0?a(`div`,{className:`flex max-w-100 flex-col gap-2 px-4`,children:[i(`p`,{className:`text-muted-foreground text-sm font-semibold`,children:`Cảnh báo: Vui lòng kiểm tra các lỗi sau:`}),i(`div`,{className:`flex flex-col space-y-1`,children:Object.entries(y.errors).map(([e])=>i(u,{errors:y.errors,name:e,render:({messages:e})=>i(r,{children:e?Object.entries(e).map(([e,t])=>a(`div`,{className:`text-accent-foreground flex items-start gap-x-1 truncate text-sm font-normal`,children:[i(n,{size:16,className:`text-destructive mt-0.5 min-w-4 flex-0`}),i(`p`,{className:`line-clamp-2 flex-1 text-wrap`,children:t})]},e)):null})},e))})]}):i(`p`,{className:`text-muted-foreground text-sm`,children:`No errors found.`})})})]})};export{d as FormWrapper};
-//# sourceMappingURL=form-wrapper-C4OO_eLu.js.map
+import{ErrorDialog as e}from"./error-dialog-D3tnycqF.js";import{Form as t}from"./form-D-gDMD-J.js";import{AlertCircleIcon as n}from"lucide-react";import{Fragment as r,jsx as i,jsxs as a}from"react/jsx-runtime";import{useCallback as o,useEffect as s,useState as c}from"react";import{useForm as l}from"react-hook-form";import{ErrorMessage as u}from"@hookform/error-message";const d=({form:d,isResetAfterSubmit:f=!0,className:p,onSubmit:m,onError:h,onSubcribe:g,children:_})=>{let v=l({...d,criteriaMode:`all`}),{formState:y,reset:b,handleSubmit:x,subscribe:S}=v,{dirtyFields:C}=y,[w,T]=c(!1),E=o(e=>{m(e,y,C),f&&b()},[C,y,f,m,b]),D=o(e=>{let t=Object.keys(e);t.length!==0&&(h?.(e),T(!0))},[h]);return s(()=>{if(!g)return;let e=S({formState:{values:!0},callback:({values:e})=>{g(e)}});return()=>e()},[g,S]),a(t,{...v,children:[i(`form`,{className:p,onSubmit:x(E,D),children:_}),i(e,{open:w,title:`Lỗi nhập dữ liệu`,description:`An unexpected error has occurred. Please check the errors below and try again.`,onOpenChange:T,children:w&&i(r,{children:Object.keys(y.errors).length>0?a(`div`,{className:`flex max-w-100 flex-col gap-2 px-4`,children:[i(`p`,{className:`text-muted-foreground text-sm font-semibold`,children:`Cảnh báo: Vui lòng kiểm tra các lỗi sau:`}),i(`div`,{className:`flex flex-col space-y-1`,children:Object.entries(y.errors).map(([e])=>i(u,{errors:y.errors,name:e,render:({messages:e})=>i(r,{children:e?Object.entries(e).map(([e,t])=>a(`div`,{className:`text-accent-foreground flex items-start gap-x-1 truncate text-sm font-normal`,children:[i(n,{size:16,className:`text-destructive mt-0.5 min-w-4 flex-0`}),i(`p`,{className:`line-clamp-2 flex-1 text-wrap`,children:t})]},e)):null})},e))})]}):i(`p`,{className:`text-muted-foreground text-sm`,children:`No errors found.`})})})]})};export{d as FormWrapper};
+//# sourceMappingURL=form-wrapper-BbScjpBv.js.map

package/dist/{form-wrapper-C4OO_eLu.js.map → form-wrapper-BbScjpBv.js.map}

@@ -1 +1 @@
-{"version":3,"file":"form-wrapper-C4OO_eLu.js","names":[],"sources":["../packages/components/forms/form-wrapper.tsx"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react'\nimport { type FieldValues, type FormState, type SubmitErrorHandler, type SubmitHandler, useForm, type UseFormProps } from 'react-hook-form'\n\nimport { AlertCircleIcon } from 'lucide-react'\n\nimport type { AnyEntity } from '@/types'\nimport { ErrorMessage } from '@hookform/error-message'\n\nimport { ErrorDialog } from '../dialogs/error-dialog'\nimport { Form } from '../ui/form'\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  form: UseFormProps<TFieldValues>\n  isResetAfterSubmit?: boolean\n  className?: string\n  onSubmit: (data: TFieldValues, formState: FormState<FieldValues>, dirtyFields: FormState<FieldValues>['dirtyFields']) => void | Promise<void>\n  onError?: SubmitErrorHandler<TFieldValues>\n  onSubcribe?: (values: TFieldValues) => void\n}\n\nexport const FormWrapper = <TFieldValues extends FieldValues = FieldValues>({\n  form: FormConfig,\n  isResetAfterSubmit = true,\n  className,\n  onSubmit,\n  onError,\n  onSubcribe,\n  children,\n}: React.PropsWithChildren<Props<TFieldValues>>) => {\n  const form = useForm({\n    ...FormConfig,\n    criteriaMode: 'all',\n  })\n\n  const { formState, reset, handleSubmit, subscribe } = form\n  const { dirtyFields } = formState\n\n  const [errorOpen, setErrorOpen] = useState<boolean>(false)\n\n  const handleFormSubmit = useCallback<SubmitHandler<TFieldValues>>(\n    (data) => {\n      onSubmit(data, formState, dirtyFields)\n      if (isResetAfterSubmit) {\n        reset()\n      }\n    },\n    [dirtyFields, formState, isResetAfterSubmit, onSubmit, reset],\n  )\n\n  const handleFormError = useCallback<SubmitErrorHandler<TFieldValues>>(\n    (errors) => {\n      const errorKeys = Object.keys(errors)\n      if (errorKeys.length === 0) return\n      onError?.(errors)\n      setErrorOpen(true)\n    },\n    [onError],\n  )\n\n  useEffect(() => {\n    if (!onSubcribe) return\n    const callback = subscribe({\n      formState: { values: true },\n      callback: ({ values }) => {\n        onSubcribe(values)\n      },\n    })\n    return () => callback()\n  }, [onSubcribe, subscribe])\n\n  return (\n    <Form {...form}>\n      <form className={className} onSubmit={handleSubmit(handleFormSubmit, handleFormError)}>\n        {children}\n      </form>\n      <ErrorDialog\n        open={errorOpen}\n        title=\"Lỗi nhập dữ liệu\"\n        description=\"An unexpected error has occurred. Please check the errors below and try again.\"\n        onOpenChange={setErrorOpen}\n      >\n        {errorOpen && (\n          <>\n            {Object.keys(formState.errors).length > 0 ? (\n              <div className=\"flex max-w-100 flex-col gap-2 px-4\">\n                <p className=\"text-muted-foreground text-sm font-semibold\">Cảnh báo: Vui lòng kiểm tra các lỗi sau:</p>\n                <div className=\"flex flex-col space-y-1\">\n                  {Object.entries(formState.errors).map(([key]) => (\n                    <ErrorMessage\n                      key={key}\n                      errors={formState.errors}\n                      name={key as AnyEntity}\n                      render={({ messages }) => {\n                        return (\n                          <>\n                            {messages\n                              ? Object.entries(messages).map(([type, message]) => {\n                                  return (\n                                    <div key={type} className=\"text-accent-foreground flex items-start gap-x-1 truncate text-sm font-normal\">\n                                      <AlertCircleIcon size={16} className=\"text-destructive mt-0.5 min-w-4 flex-0\" />\n                                      <p className=\"line-clamp-2 flex-1 text-wrap\">{message}</p>\n                                    </div>\n                                  )\n                                })\n                              : null}\n                          </>\n                        )\n                      }}\n                    />\n                  ))}\n                </div>\n              </div>\n            ) : (\n              <p className=\"text-muted-foreground text-sm\">No errors found.</p>\n            )}\n          </>\n        )}\n      </ErrorDialog>\n    </Form>\n  )\n}\n"],"mappings":"oXAoBA,MAAa,GAA+D,CAC1E,KAAM,EACN,qBAAqB,GACrB,YACA,WACA,UACA,aACA,cACkD,CAClD,IAAM,EAAO,EAAQ,CACnB,GAAG,EACH,aAAc,QAGV,CAAE,YAAW,QAAO,eAAc,aAAc,EAChD,CAAE,eAAgB,EAElB,CAAC,EAAW,GAAgB,EAAkB,IAE9C,EAAmB,EACtB,GAAS,CACR,EAAS,EAAM,EAAW,GACtB,GACF,KAGJ,CAAC,EAAa,EAAW,EAAoB,EAAU,IAGnD,EAAkB,EACrB,GAAW,CACV,IAAM,EAAY,OAAO,KAAK,GAC1B,EAAU,SAAW,IACzB,IAAU,GACV,EAAa,MAEf,CAAC,IAcH,OAXA,MAAgB,CACd,GAAI,CAAC,EAAY,OACjB,IAAM,EAAW,EAAU,CACzB,UAAW,CAAE,OAAQ,IACrB,UAAW,CAAE,YAAa,CACxB,EAAW,MAGf,UAAa,KACZ,CAAC,EAAY,IAGd,EAAC,EAAA,CAAK,GAAI,YACR,EAAC,OAAA,CAAgB,YAAW,SAAU,EAAa,EAAkB,GAClE,aAEH,EAAC,EAAA,CACC,KAAM,EACN,MAAM,mBACN,YAAY,iFACZ,aAAc,WAEb,GACC,EAAA,EAAA,CAAA,SACG,OAAO,KAAK,EAAU,QAAQ,OAAS,EACtC,EAAC,MAAA,CAAI,UAAU,+CACb,EAAC,IAAA,CAAE,UAAU,uDAA8C,6CAC3D,EAAC,MAAA,CAAI,UAAU,mCACZ,OAAO,QAAQ,EAAU,QAAQ,KAAK,CAAC,KACtC,EAAC,EAAA,CAEC,OAAQ,EAAU,OAClB,KAAM,EACN,QAAS,CAAE,cAEP,EAAA,EAAA,CAAA,SACG,EACG,OAAO,QAAQ,GAAU,KAAK,CAAC,EAAM,KAEjC,EAAC,MAAA,CAAe,UAAU,yFACxB,EAAC,EAAA,CAAgB,KAAM,GAAI,UAAU,2CACrC,EAAC,IAAA,CAAE,UAAU,yCAAiC,MAFtC,IAMd,QAfL,SAwBb,EAAC,IAAA,CAAE,UAAU,yCAAgC"}
+{"version":3,"file":"form-wrapper-BbScjpBv.js","names":[],"sources":["../packages/components/forms/form-wrapper.tsx"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react'\nimport { type FieldValues, type FormState, type SubmitErrorHandler, type SubmitHandler, useForm, type UseFormProps } from 'react-hook-form'\n\nimport { AlertCircleIcon } from 'lucide-react'\n\nimport type { AnyEntity } from '@/types'\nimport { ErrorMessage } from '@hookform/error-message'\n\nimport { ErrorDialog } from '../dialogs/error-dialog'\nimport { Form } from '../ui/form'\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  form: UseFormProps<TFieldValues>\n  isResetAfterSubmit?: boolean\n  className?: string\n  onSubmit: (data: TFieldValues, formState: FormState<FieldValues>, dirtyFields: FormState<FieldValues>['dirtyFields']) => void | Promise<void>\n  onError?: SubmitErrorHandler<TFieldValues>\n  onSubcribe?: (values: TFieldValues) => void\n}\n\nexport const FormWrapper = <TFieldValues extends FieldValues = FieldValues>({\n  form: FormConfig,\n  isResetAfterSubmit = true,\n  className,\n  onSubmit,\n  onError,\n  onSubcribe,\n  children,\n}: React.PropsWithChildren<Props<TFieldValues>>) => {\n  const form = useForm({\n    ...FormConfig,\n    criteriaMode: 'all',\n  })\n\n  const { formState, reset, handleSubmit, subscribe } = form\n  const { dirtyFields } = formState\n\n  const [errorOpen, setErrorOpen] = useState<boolean>(false)\n\n  const handleFormSubmit = useCallback<SubmitHandler<TFieldValues>>(\n    (data) => {\n      onSubmit(data, formState, dirtyFields)\n      if (isResetAfterSubmit) {\n        reset()\n      }\n    },\n    [dirtyFields, formState, isResetAfterSubmit, onSubmit, reset],\n  )\n\n  const handleFormError = useCallback<SubmitErrorHandler<TFieldValues>>(\n    (errors) => {\n      const errorKeys = Object.keys(errors)\n      if (errorKeys.length === 0) return\n      onError?.(errors)\n      setErrorOpen(true)\n    },\n    [onError],\n  )\n\n  useEffect(() => {\n    if (!onSubcribe) return\n    const callback = subscribe({\n      formState: { values: true },\n      callback: ({ values }) => {\n        onSubcribe(values)\n      },\n    })\n    return () => callback()\n  }, [onSubcribe, subscribe])\n\n  return (\n    <Form {...form}>\n      <form className={className} onSubmit={handleSubmit(handleFormSubmit, handleFormError)}>\n        {children}\n      </form>\n      <ErrorDialog\n        open={errorOpen}\n        title=\"Lỗi nhập dữ liệu\"\n        description=\"An unexpected error has occurred. Please check the errors below and try again.\"\n        onOpenChange={setErrorOpen}\n      >\n        {errorOpen && (\n          <>\n            {Object.keys(formState.errors).length > 0 ? (\n              <div className=\"flex max-w-100 flex-col gap-2 px-4\">\n                <p className=\"text-muted-foreground text-sm font-semibold\">Cảnh báo: Vui lòng kiểm tra các lỗi sau:</p>\n                <div className=\"flex flex-col space-y-1\">\n                  {Object.entries(formState.errors).map(([key]) => (\n                    <ErrorMessage\n                      key={key}\n                      errors={formState.errors}\n                      name={key as AnyEntity}\n                      render={({ messages }) => {\n                        return (\n                          <>\n                            {messages\n                              ? Object.entries(messages).map(([type, message]) => {\n                                  return (\n                                    <div key={type} className=\"text-accent-foreground flex items-start gap-x-1 truncate text-sm font-normal\">\n                                      <AlertCircleIcon size={16} className=\"text-destructive mt-0.5 min-w-4 flex-0\" />\n                                      <p className=\"line-clamp-2 flex-1 text-wrap\">{message}</p>\n                                    </div>\n                                  )\n                                })\n                              : null}\n                          </>\n                        )\n                      }}\n                    />\n                  ))}\n                </div>\n              </div>\n            ) : (\n              <p className=\"text-muted-foreground text-sm\">No errors found.</p>\n            )}\n          </>\n        )}\n      </ErrorDialog>\n    </Form>\n  )\n}\n"],"mappings":"oXAoBA,MAAa,GAA+D,CAC1E,KAAM,EACN,qBAAqB,GACrB,YACA,WACA,UACA,aACA,cACkD,CAClD,IAAM,EAAO,EAAQ,CACnB,GAAG,EACH,aAAc,QAGV,CAAE,YAAW,QAAO,eAAc,aAAc,EAChD,CAAE,eAAgB,EAElB,CAAC,EAAW,GAAgB,EAAkB,IAE9C,EAAmB,EACtB,GAAS,CACR,EAAS,EAAM,EAAW,GACtB,GACF,KAGJ,CAAC,EAAa,EAAW,EAAoB,EAAU,IAGnD,EAAkB,EACrB,GAAW,CACV,IAAM,EAAY,OAAO,KAAK,GAC1B,EAAU,SAAW,IACzB,IAAU,GACV,EAAa,MAEf,CAAC,IAcH,OAXA,MAAgB,CACd,GAAI,CAAC,EAAY,OACjB,IAAM,EAAW,EAAU,CACzB,UAAW,CAAE,OAAQ,IACrB,UAAW,CAAE,YAAa,CACxB,EAAW,MAGf,UAAa,KACZ,CAAC,EAAY,IAGd,EAAC,EAAA,CAAK,GAAI,YACR,EAAC,OAAA,CAAgB,YAAW,SAAU,EAAa,EAAkB,GAClE,aAEH,EAAC,EAAA,CACC,KAAM,EACN,MAAM,mBACN,YAAY,iFACZ,aAAc,WAEb,GACC,EAAA,EAAA,CAAA,SACG,OAAO,KAAK,EAAU,QAAQ,OAAS,EACtC,EAAC,MAAA,CAAI,UAAU,+CACb,EAAC,IAAA,CAAE,UAAU,uDAA8C,6CAC3D,EAAC,MAAA,CAAI,UAAU,mCACZ,OAAO,QAAQ,EAAU,QAAQ,KAAK,CAAC,KACtC,EAAC,EAAA,CAEC,OAAQ,EAAU,OAClB,KAAM,EACN,QAAS,CAAE,cAEP,EAAA,EAAA,CAAA,SACG,EACG,OAAO,QAAQ,GAAU,KAAK,CAAC,EAAM,KAEjC,EAAC,MAAA,CAAe,UAAU,yFACxB,EAAC,EAAA,CAAgB,KAAM,GAAI,UAAU,2CACrC,EAAC,IAAA,CAAE,UAAU,yCAAiC,MAFtC,IAMd,QAfL,SAwBb,EAAC,IAAA,CAAE,UAAU,yCAAgC"}

package/dist/forms/combobox-field.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require(`../chunk-CUT6urMc.cjs`),t=require(`../button-119IIVCy.cjs`);require(`../label-BbuMrcie.cjs`);const n=require(`../form-DAwCSzSe.cjs`);require(`../dialog-CGrbU7PO.cjs`);const r=require(`../command-COUM-XfY.cjs`),i=require(`../popover-BsF6vWTX.cjs`),a=e.__toESM(require(`lucide-react`)),o=e.__toESM(require(`@customafk/react-toolkit/utils`)),s=e.__toESM(require(`react/jsx-runtime`)),c=({name:e,label:c=`Combobox`,placeholder:l=`Chọn một mục`,description:u,options:d,onAddNewItem:f})=>(0,s.jsx)(n.FormField,{name:e,render:({field:e})=>(0,s.jsxs)(n.FormItem,{className:`w-full`,children:[(0,s.jsx)(n.FormLabel,{children:c}),(0,s.jsxs)(i.Popover,{modal:!0,children:[(0,s.jsx)(i.PopoverTrigger,{asChild:!0,children:(0,s.jsx)(n.FormControl,{children:(0,s.jsxs)(t.Button,{type:`button`,variant:`outline`,role:`combobox`,color:`muted`,className:(0,o.cn)(`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:[e.value?(0,s.jsx)(`span`,{className:`flex min-w-0 items-center gap-2`,children:d?.find(({value:t})=>t===e.value)?.label}):(0,s.jsx)(`span`,{className:`text-text-positive-muted`,children:l}),(0,s.jsx)(a.ChevronDownIcon,{size:16,className:`text-text-positive-weak shrink-0`,"aria-hidden":`true`})]})})}),(0,s.jsx)(i.PopoverContent,{className:`w-[var(--radix-popover-trigger-width)] p-0`,children:(0,s.jsxs)(r.Command,{className:`border-none`,children:[(0,s.jsx)(r.CommandInput,{placeholder:l??`Tìm kiếm`}),(0,s.jsxs)(r.CommandList,{children:[(0,s.jsx)(r.CommandGroup,{className:`max-h-40 overflow-y-auto`,children:d?.map(({value:t,label:n})=>(0,s.jsx)(r.CommandItem,{value:n,onSelect:()=>e.onChange(t),children:n},t))}),f&&(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(r.CommandSeparator,{}),(0,s.jsx)(r.CommandGroup,{children:(0,s.jsxs)(t.Button,{type:`button`,variant:`ghost`,className:`w-full justify-start font-normal`,children:[(0,s.jsx)(a.PlusIcon,{size:14,className:`-ms-2 opacity-60`,"aria-hidden":`true`}),`Thêm mới`]})})]})]}),(0,s.jsx)(r.CommandEmpty,{children:`Không có kết quả`})]})})]}),!!u&&(0,s.jsx)(n.FormDescription,{children:u})]})});exports.ComboboxField=c;
+"use client";const e=require(`../chunk-CUT6urMc.cjs`),t=require(`../button-119IIVCy.cjs`);require(`../label-BBPPT0-L.cjs`);const n=require(`../form-CaxhlWxK.cjs`);require(`../dialog-CGrbU7PO.cjs`);const r=require(`../command-B9nlrxXh.cjs`),i=require(`../popover-ByL6Igxn.cjs`),a=e.__toESM(require(`lucide-react`)),o=e.__toESM(require(`@customafk/react-toolkit/utils`)),s=e.__toESM(require(`react/jsx-runtime`)),c=({name:e,label:c=`Combobox`,placeholder:l=`Chọn một mục`,description:u,options:d,onAddNewItem:f})=>(0,s.jsx)(n.FormField,{name:e,render:({field:e})=>(0,s.jsxs)(n.FormItem,{className:`w-full`,children:[(0,s.jsx)(n.FormLabel,{children:c}),(0,s.jsxs)(i.Popover,{modal:!0,children:[(0,s.jsx)(i.PopoverTrigger,{asChild:!0,children:(0,s.jsx)(n.FormControl,{children:(0,s.jsxs)(t.Button,{type:`button`,variant:`outline`,role:`combobox`,color:`muted`,className:(0,o.cn)(`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:[e.value?(0,s.jsx)(`span`,{className:`flex min-w-0 items-center gap-2`,children:d?.find(({value:t})=>t===e.value)?.label}):(0,s.jsx)(`span`,{className:`text-text-positive-muted`,children:l}),(0,s.jsx)(a.ChevronDownIcon,{size:16,className:`text-text-positive-weak shrink-0`,"aria-hidden":`true`})]})})}),(0,s.jsx)(i.PopoverContent,{className:`w-[var(--radix-popover-trigger-width)] p-0`,children:(0,s.jsxs)(r.Command,{className:`border-none`,children:[(0,s.jsx)(r.CommandInput,{placeholder:l??`Tìm kiếm`}),(0,s.jsxs)(r.CommandList,{children:[(0,s.jsx)(r.CommandGroup,{className:`max-h-40 overflow-y-auto`,children:d?.map(({value:t,label:n})=>(0,s.jsx)(r.CommandItem,{value:n,onSelect:()=>e.onChange(t),children:n},t))}),f&&(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(r.CommandSeparator,{}),(0,s.jsx)(r.CommandGroup,{children:(0,s.jsxs)(t.Button,{type:`button`,variant:`ghost`,className:`w-full justify-start font-normal`,children:[(0,s.jsx)(a.PlusIcon,{size:14,className:`-ms-2 opacity-60`,"aria-hidden":`true`}),`Thêm mới`]})})]})]}),(0,s.jsx)(r.CommandEmpty,{children:`Không có kết quả`})]})})]}),!!u&&(0,s.jsx)(n.FormDescription,{children:u})]})});exports.ComboboxField=c;
 //# sourceMappingURL=combobox-field.cjs.map

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

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

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

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

package/dist/forms/combobox-field.js

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

package/dist/forms/date-field.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require(`../chunk-CUT6urMc.cjs`),t=require(`../button-119IIVCy.cjs`);require(`../label-BbuMrcie.cjs`);const n=require(`../form-DAwCSzSe.cjs`),r=require(`../popover-BsF6vWTX.cjs`),i=require(`../calendar-CrtbhiDy.cjs`),a=e.__toESM(require(`lucide-react`)),o=e.__toESM(require(`@customafk/react-toolkit/utils`)),s=e.__toESM(require(`react/jsx-runtime`)),c=e.__toESM(require(`@customafk/react-toolkit/date-fns`)),l=({name:e,label:l=`Date Field`,placeholder:u=`Select a date`,description:d=``,isShowErrorMsg:f=!1})=>(0,s.jsx)(n.FormField,{name:e,render:({field:e})=>(0,s.jsxs)(n.FormItem,{className:`w-full`,children:[(0,s.jsx)(n.FormLabel,{children:l}),(0,s.jsxs)(r.Popover,{modal:!0,children:[(0,s.jsx)(r.PopoverTrigger,{asChild:!0,children:(0,s.jsx)(n.FormControl,{children:(0,s.jsxs)(t.Button,{variant:`outline`,color:`muted`,className:(0,o.cn)(`w-full pl-3 text-left font-normal`,`outline-border-weak font-normal`,`hover:outline-border`,`data-[state=open]:text-text-positive-muted`,`data-[state=open]:outline-1`,`data-[state=open]:outline-primary-strong`,`data-[state=open]:ring-primary-weak`,`data-[state=open]:ring-4`,`focus:border-primary-strong`,`focus:ring-4`,`focus:ring-primary-weak`,`focus:outline-1`,`focus:outline-primary-strong`,!e.value&&`text-text-positive-muted`),children:[e.value?(0,c.format)(e.value,`PPP`):(0,s.jsxs)(`span`,{children:[` `,u||`Pick a date`]}),(0,s.jsx)(a.CalendarIcon,{className:`text-text-positive-weak ml-auto size-4`})]})})}),(0,s.jsx)(r.PopoverContent,{className:`w-auto p-0`,align:`start`,children:(0,s.jsx)(i.Calendar,{mode:`single`,selected:e.value,onSelect:t=>{e.onChange(t?.toISOString())},captionLayout:`dropdown`,disabled:e=>e<new Date(`2022-01-01`)})})]}),!!d&&(0,s.jsx)(n.FormDescription,{children:d}),f&&(0,s.jsx)(n.FormMessage,{})]})});exports.DateField=l;
+"use client";const e=require(`../chunk-CUT6urMc.cjs`),t=require(`../button-119IIVCy.cjs`);require(`../label-BBPPT0-L.cjs`);const n=require(`../form-CaxhlWxK.cjs`),r=require(`../popover-ByL6Igxn.cjs`),i=require(`../calendar-CUDdTiC-.cjs`),a=e.__toESM(require(`lucide-react`)),o=e.__toESM(require(`@customafk/react-toolkit/utils`)),s=e.__toESM(require(`react/jsx-runtime`)),c=e.__toESM(require(`@customafk/react-toolkit/date-fns`)),l=({name:e,label:l=`Date Field`,placeholder:u=`Select a date`,description:d=``,isShowErrorMsg:f=!1})=>(0,s.jsx)(n.FormField,{name:e,render:({field:e})=>(0,s.jsxs)(n.FormItem,{className:`w-full`,children:[(0,s.jsx)(n.FormLabel,{children:l}),(0,s.jsxs)(r.Popover,{modal:!0,children:[(0,s.jsx)(r.PopoverTrigger,{asChild:!0,children:(0,s.jsx)(n.FormControl,{children:(0,s.jsxs)(t.Button,{variant:`outline`,color:`muted`,className:(0,o.cn)(`w-full pl-3 text-left font-normal`,`outline-border-weak font-normal`,`hover:outline-border`,`data-[state=open]:text-text-positive-muted`,`data-[state=open]:outline-1`,`data-[state=open]:outline-primary-strong`,`data-[state=open]:ring-primary-weak`,`data-[state=open]:ring-4`,`focus:border-primary-strong`,`focus:ring-4`,`focus:ring-primary-weak`,`focus:outline-1`,`focus:outline-primary-strong`,!e.value&&`text-text-positive-muted`),children:[e.value?(0,c.format)(e.value,`PPP`):(0,s.jsxs)(`span`,{children:[` `,u||`Pick a date`]}),(0,s.jsx)(a.CalendarIcon,{className:`text-text-positive-weak ml-auto size-4`})]})})}),(0,s.jsx)(r.PopoverContent,{className:`w-auto p-0`,align:`start`,children:(0,s.jsx)(i.Calendar,{mode:`single`,selected:e.value,onSelect:t=>{e.onChange(t?.toISOString())},captionLayout:`dropdown`,disabled:e=>e<new Date(`2022-01-01`)})})]}),!!d&&(0,s.jsx)(n.FormDescription,{children:d}),f&&(0,s.jsx)(n.FormMessage,{})]})});exports.DateField=l;
 //# sourceMappingURL=date-field.cjs.map

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime9 from "react/jsx-runtime";
+import * as react_jsx_runtime2 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_runtime9.JSX.Element;
+}: Props<TFieldValues>) => react_jsx_runtime2.JSX.Element;
 //#endregion
 export { DateField };
 //# sourceMappingURL=date-field.d.cts.map

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime5 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_runtime5.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{Button as e}from"../button-CvQQTSka.js";import"../label-CyaoUND0.js";import{FormControl as t,FormDescription as n,FormField as r,FormItem as i,FormLabel as a,FormMessage as o}from"../form-B0fOiANW.js";import{Popover as s,PopoverContent as c,PopoverTrigger as l}from"../popover-CT9ZjjNA.js";import{Calendar as u}from"../calendar-BgoGbit6.js";import{CalendarIcon as d}from"lucide-react";import{cn as f}from"@customafk/react-toolkit/utils";import{jsx as p,jsxs as m}from"react/jsx-runtime";import{format as h}from"@customafk/react-toolkit/date-fns";const g=({name:g,label:_=`Date Field`,placeholder:v=`Select a date`,description:y=``,isShowErrorMsg:b=!1})=>p(r,{name:g,render:({field:r})=>m(i,{className:`w-full`,children:[p(a,{children:_}),m(s,{modal:!0,children:[p(l,{asChild:!0,children:p(t,{children:m(e,{variant:`outline`,color:`muted`,className:f(`w-full pl-3 text-left font-normal`,`outline-border-weak font-normal`,`hover:outline-border`,`data-[state=open]:text-text-positive-muted`,`data-[state=open]:outline-1`,`data-[state=open]:outline-primary-strong`,`data-[state=open]:ring-primary-weak`,`data-[state=open]:ring-4`,`focus:border-primary-strong`,`focus:ring-4`,`focus:ring-primary-weak`,`focus:outline-1`,`focus:outline-primary-strong`,!r.value&&`text-text-positive-muted`),children:[r.value?h(r.value,`PPP`):m(`span`,{children:[` `,v||`Pick a date`]}),p(d,{className:`text-text-positive-weak ml-auto size-4`})]})})}),p(c,{className:`w-auto p-0`,align:`start`,children:p(u,{mode:`single`,selected:r.value,onSelect:e=>{r.onChange(e?.toISOString())},captionLayout:`dropdown`,disabled:e=>e<new Date(`2022-01-01`)})})]}),!!y&&p(n,{children:y}),b&&p(o,{})]})});export{g as DateField};
+"use client";import{Button as e}from"../button-CvQQTSka.js";import"../label-DdpIoRiG.js";import{FormControl as t,FormDescription as n,FormField as r,FormItem as i,FormLabel as a,FormMessage as o}from"../form-D-gDMD-J.js";import{Popover as s,PopoverContent as c,PopoverTrigger as l}from"../popover-DMt7GPSm.js";import{Calendar as u}from"../calendar-BZRNZdsJ.js";import{CalendarIcon as d}from"lucide-react";import{cn as f}from"@customafk/react-toolkit/utils";import{jsx as p,jsxs as m}from"react/jsx-runtime";import{format as h}from"@customafk/react-toolkit/date-fns";const g=({name:g,label:_=`Date Field`,placeholder:v=`Select a date`,description:y=``,isShowErrorMsg:b=!1})=>p(r,{name:g,render:({field:r})=>m(i,{className:`w-full`,children:[p(a,{children:_}),m(s,{modal:!0,children:[p(l,{asChild:!0,children:p(t,{children:m(e,{variant:`outline`,color:`muted`,className:f(`w-full pl-3 text-left font-normal`,`outline-border-weak font-normal`,`hover:outline-border`,`data-[state=open]:text-text-positive-muted`,`data-[state=open]:outline-1`,`data-[state=open]:outline-primary-strong`,`data-[state=open]:ring-primary-weak`,`data-[state=open]:ring-4`,`focus:border-primary-strong`,`focus:ring-4`,`focus:ring-primary-weak`,`focus:outline-1`,`focus:outline-primary-strong`,!r.value&&`text-text-positive-muted`),children:[r.value?h(r.value,`PPP`):m(`span`,{children:[` `,v||`Pick a date`]}),p(d,{className:`text-text-positive-weak ml-auto size-4`})]})})}),p(c,{className:`w-auto p-0`,align:`start`,children:p(u,{mode:`single`,selected:r.value,onSelect:e=>{r.onChange(e?.toISOString())},captionLayout:`dropdown`,disabled:e=>e<new Date(`2022-01-01`)})})]}),!!y&&p(n,{children:y}),b&&p(o,{})]})});export{g as DateField};
 //# sourceMappingURL=date-field.js.map

package/dist/forms/form-wrapper.cjs

@@ -1 +1 @@
-require(`../button-119IIVCy.cjs`),require(`../alert-dialog-7AEaiJxA.cjs`),require(`../error-dialog-COyyui94.cjs`),require(`../label-BbuMrcie.cjs`),require(`../form-DAwCSzSe.cjs`);const e=require(`../form-wrapper-D0-p7R15.cjs`);exports.FormWrapper=e.FormWrapper;
+require(`../button-119IIVCy.cjs`),require(`../alert-dialog-lwTxSl-r.cjs`),require(`../error-dialog-BkCaUR7F.cjs`),require(`../label-BBPPT0-L.cjs`),require(`../form-CaxhlWxK.cjs`);const e=require(`../form-wrapper-BUkoh-c7.cjs`);exports.FormWrapper=e.FormWrapper;

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime8 from "react/jsx-runtime";
+import * as react_jsx_runtime63 from "react/jsx-runtime";
 import { FieldValues, FormState, SubmitErrorHandler, UseFormProps } from "react-hook-form";
 
 //#region packages/components/forms/form-wrapper.d.ts
@@ -18,7 +18,7 @@ declare const FormWrapper: <TFieldValues extends FieldValues = FieldValues>({
   onError,
   onSubcribe,
   children
-}: React.PropsWithChildren<Props<TFieldValues>>) => react_jsx_runtime8.JSX.Element;
+}: React.PropsWithChildren<Props<TFieldValues>>) => react_jsx_runtime63.JSX.Element;
 //#endregion
 export { FormWrapper };
 //# sourceMappingURL=form-wrapper.d.cts.map

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime4 from "react/jsx-runtime";
+import * as react_jsx_runtime7 from "react/jsx-runtime";
 import { FieldValues, FormState, SubmitErrorHandler, UseFormProps } from "react-hook-form";
 
 //#region packages/components/forms/form-wrapper.d.ts
@@ -18,7 +18,7 @@ declare const FormWrapper: <TFieldValues extends FieldValues = FieldValues>({
   onError,
   onSubcribe,
   children
-}: React.PropsWithChildren<Props<TFieldValues>>) => react_jsx_runtime4.JSX.Element;
+}: React.PropsWithChildren<Props<TFieldValues>>) => react_jsx_runtime7.JSX.Element;
 //#endregion
 export { FormWrapper };
 //# sourceMappingURL=form-wrapper.d.ts.map

package/dist/forms/form-wrapper.js

@@ -1 +1 @@
-import"../button-CvQQTSka.js";import"../alert-dialog-B8Whrlfq.js";import"../error-dialog-YlSsQqiT.js";import"../label-CyaoUND0.js";import"../form-B0fOiANW.js";import{FormWrapper as e}from"../form-wrapper-C4OO_eLu.js";export{e as FormWrapper};
+import"../button-CvQQTSka.js";import"../alert-dialog-BOMy-TmT.js";import"../error-dialog-D3tnycqF.js";import"../label-DdpIoRiG.js";import"../form-D-gDMD-J.js";import{FormWrapper as e}from"../form-wrapper-BbScjpBv.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(`../button-119IIVCy.cjs`),require(`../label-BbuMrcie.cjs`);const t=require(`../form-DAwCSzSe.cjs`);require(`../dialog-CGrbU7PO.cjs`),require(`../command-COUM-XfY.cjs`);const n=require(`../multi-select-C8kzA628.cjs`),r=e.__toESM(require(`react/jsx-runtime`)),i=({name:e,label:i=`Multi Select Field`,isShowLabel:a=!0,isShowErrorMsg:o,placeholder:s=`Select options`,description:c=``,options:l=[],onAdd:u})=>(0,r.jsx)(t.FormField,{name:e,render:({field:{value:e,onChange:d}})=>{let f=l.filter(t=>e?.includes(t.value)),p=e=>{let t=e.map(e=>e.value);d(t)};return(0,r.jsxs)(t.FormItem,{className:`w-full gap-0`,children:[a&&(0,r.jsx)(t.FormLabel,{children:i}),(0,r.jsx)(t.FormControl,{children:(0,r.jsx)(n.MultipleSelector,{placeholder:s,emptyIndicator:`No options available`,value:f,options:l,onChange:p,onAddNewItem:u})}),!!c&&(0,r.jsx)(t.FormDescription,{children:c}),o&&(0,r.jsx)(t.FormMessage,{})]})}});exports.MultiSelectField=i;
+"use client";const e=require(`../chunk-CUT6urMc.cjs`);require(`../button-119IIVCy.cjs`),require(`../label-BBPPT0-L.cjs`);const t=require(`../form-CaxhlWxK.cjs`);require(`../dialog-CGrbU7PO.cjs`),require(`../command-B9nlrxXh.cjs`);const n=require(`../multi-select-BAXHYtlU.cjs`),r=e.__toESM(require(`react/jsx-runtime`)),i=({name:e,label:i=`Multi Select Field`,isShowLabel:a=!0,isShowErrorMsg:o,placeholder:s=`Select options`,description:c=``,options:l=[],onAdd:u})=>(0,r.jsx)(t.FormField,{name:e,render:({field:{value:e,onChange:d}})=>{let f=l.filter(t=>e?.includes(t.value)),p=e=>{let t=e.map(e=>e.value);d(t)};return(0,r.jsxs)(t.FormItem,{className:`w-full gap-0`,children:[a&&(0,r.jsx)(t.FormLabel,{children:i}),(0,r.jsx)(t.FormControl,{children:(0,r.jsx)(n.MultipleSelector,{placeholder:s,emptyIndicator:`No options available`,value:f,options:l,onChange:p,onAddNewItem:u})}),!!c&&(0,r.jsx)(t.FormDescription,{children:c}),o&&(0,r.jsx)(t.FormMessage,{})]})}});exports.MultiSelectField=i;
 //# sourceMappingURL=multi-select-field.cjs.map

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime15 from "react/jsx-runtime";
+import * as react_jsx_runtime5 from "react/jsx-runtime";
 import { FieldPath, FieldValues } from "react-hook-form";
 
 //#region packages/components/forms/multi-select-field.d.ts
@@ -24,7 +24,7 @@ declare const MultiSelectField: <TFieldValues extends FieldValues = FieldValues>
   description,
   options,
   onAdd
-}: Props<TFieldValues>) => react_jsx_runtime15.JSX.Element;
+}: Props<TFieldValues>) => react_jsx_runtime5.JSX.Element;
 //#endregion
 export { MultiSelectField };
 //# sourceMappingURL=multi-select-field.d.cts.map

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime7 from "react/jsx-runtime";
+import * as react_jsx_runtime8 from "react/jsx-runtime";
 import { FieldPath, FieldValues } from "react-hook-form";
 
 //#region packages/components/forms/multi-select-field.d.ts
@@ -24,7 +24,7 @@ declare const MultiSelectField: <TFieldValues extends FieldValues = FieldValues>
   description,
   options,
   onAdd
-}: Props<TFieldValues>) => react_jsx_runtime7.JSX.Element;
+}: Props<TFieldValues>) => react_jsx_runtime8.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"../button-CvQQTSka.js";import"../label-CyaoUND0.js";import{FormControl as e,FormDescription as t,FormField as n,FormItem as r,FormLabel as i,FormMessage as a}from"../form-B0fOiANW.js";import"../dialog-DbI18XF9.js";import"../command-DNfCX3KZ.js";import{MultipleSelector as o}from"../multi-select-CaBcDGi6.js";import{jsx as s,jsxs as c}from"react/jsx-runtime";const l=({name:l,label:u=`Multi Select Field`,isShowLabel:d=!0,isShowErrorMsg:f,placeholder:p=`Select options`,description:m=``,options:h=[],onAdd:g})=>s(n,{name:l,render:({field:{value:n,onChange:l}})=>{let _=h.filter(e=>n?.includes(e.value)),v=e=>{let t=e.map(e=>e.value);l(t)};return c(r,{className:`w-full gap-0`,children:[d&&s(i,{children:u}),s(e,{children:s(o,{placeholder:p,emptyIndicator:`No options available`,value:_,options:h,onChange:v,onAddNewItem:g})}),!!m&&s(t,{children:m}),f&&s(a,{})]})}});export{l as MultiSelectField};
+"use client";import"../button-CvQQTSka.js";import"../label-DdpIoRiG.js";import{FormControl as e,FormDescription as t,FormField as n,FormItem as r,FormLabel as i,FormMessage as a}from"../form-D-gDMD-J.js";import"../dialog-DbI18XF9.js";import"../command-DKD5gHi_.js";import{MultipleSelector as o}from"../multi-select-oXuLHx0A.js";import{jsx as s,jsxs as c}from"react/jsx-runtime";const l=({name:l,label:u=`Multi Select Field`,isShowLabel:d=!0,isShowErrorMsg:f,placeholder:p=`Select options`,description:m=``,options:h=[],onAdd:g})=>s(n,{name:l,render:({field:{value:n,onChange:l}})=>{let _=h.filter(e=>n?.includes(e.value)),v=e=>{let t=e.map(e=>e.value);l(t)};return c(r,{className:`w-full gap-0`,children:[d&&s(i,{children:u}),s(e,{children:s(o,{placeholder:p,emptyIndicator:`No options available`,value:_,options:h,onChange:v,onAddNewItem:g})}),!!m&&s(t,{children:m}),f&&s(a,{})]})}});export{l as MultiSelectField};
 //# sourceMappingURL=multi-select-field.js.map

package/dist/forms/number-field.cjs

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

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime17 from "react/jsx-runtime";
+import * as react_jsx_runtime1 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_runtime17.JSX.Element;
+}: Props<TFieldValues>) => react_jsx_runtime1.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_runtime13 from "react/jsx-runtime";
+import * as react_jsx_runtime5 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_runtime13.JSX.Element;
+}: Props<TFieldValues>) => react_jsx_runtime5.JSX.Element;
 //#endregion
 export { NumberField };
 //# sourceMappingURL=number-field.d.ts.map

package/dist/forms/number-field.js

@@ -1,2 +1,2 @@
-import"../label-CyaoUND0.js";import{FormControl as e,FormDescription as t,FormField as n,FormItem as r,FormLabel as i,FormMessage as a}from"../form-B0fOiANW.js";import{Input as o}from"../input-i5Nm0R1X.js";import{cn as s}from"@customafk/react-toolkit/utils";import{jsx as c,jsxs as l}from"react/jsx-runtime";import u from"react";import{useWatch as d}from"react-hook-form";const f=e=>e?/^-?\d*\.?\d*$/:/^\d*\.?\d*$/,p=e=>Number(e).toLocaleString(),m=({disabled:e=!1,readonly:t=!1,allowNegative:n=!1,numberAfterDecimalPoint:r=2,roundingRule:i=`none`,value:a=``,unitText:d,decimal:m,placeholder:h,precision:g,onChange:_,onValueChange:v,onBlur:y,...b})=>{let x=u.useRef(null),S=u.useRef(null),[C,w]=u.useState(a.toString()),T=m?.[1]??r,E=m&&m[0]-m[1],D=u.useMemo(()=>f(n),[n]),O=u.useCallback(e=>{if(!T&&e.includes(`.`))return!1;let t=e.split(`.`)[1];return!t||t.length<=T},[T]),k=u.useCallback(e=>{if(!m||e===`-`)return!0;let[t,n=``]=e.split(`.`);return n.length<=m[1]&&(t.startsWith(`-`)?t.length-1:t.length)<=E},[m,E]),A=u.useCallback((e,t)=>{if(i===`none`)return e;let n=Math.pow(10,t),r=e*n;switch(i){case`up`:return Math.ceil(r)/n;case`down`:return Math.floor(r)/n;case`nearest`:return r%1<.1?Math.floor(r)/n:r%1>=.59?Math.ceil(r)/n:(Math.floor(r)+.5)/n;default:return e}},[i]),j=u.useCallback(e=>!r&&e.includes(`.`)||e.split(`.`)[1]?.length>r,[r]),M=u.useCallback(e=>{if(e===`0`)return`0`;if(!Number(e))return``;let t=parseFloat(e),n=Math.min(T-1,g||0),r=A(t,n).toString(),[i,a=``]=r.split(`.`),o=p(i);return a?`${o}.${a}`:o},[A,T,g]),N=u.useCallback(e=>{if(!m||e===`-`)return!0;let[t,n=``]=e.split(`.`),r=t.startsWith(`-`)?t.length-1:t.length,i=m[0]-m[1];return n.length<=m[1]&&r<=i},[m]),P=u.useCallback(e=>{_?.(e);let{value:t}=e.target;if(!t){v?.(void 0),w(``);return}let r=t===`0`,i=t===`-`&&n;if(r||i){v?.(0),w(t);return}let a=D.test(t)&&k(t)&&(m||O(t));if(!a)return;let o=parseFloat(t)||0;v?.(o),w(t)},[n,m,O,k,_,v,D]),F=u.useCallback(()=>{t||w(e=>e.replace(/,/g,``))},[t]),I=u.useCallback(()=>{t||(y?.(),w(e=>M(e)))},[t,y,M]);return u.useEffect(()=>{let e=document.activeElement===S.current;if(!a||!D.test(a.toString())||!N(a.toString())||!m&&j(a.toString())){w(``);return}w(t=>t===`-`?`-`:t?e?a.toString():M(a.toString()):``)},[m,M,a,j,N,D]),u.useEffect(()=>{if(!x.current||!S.current||!d)return;let e=x.current.offsetWidth;S.current.style.setProperty(`padding-right`,`${(e+10)/16}rem`)},[e,d]),l(`div`,{className:`relative`,children:[c(o,{...b,ref:S,value:C||(t?`0`:``),placeholder:h,disabled:e,readOnly:t,className:s(`font-number text-end`,t&&`bg-muted text-muted-foreground`),onChange:P,onFocus:F,onBlur:I}),d&&c(`span`,{ref:x,className:`text-muted-foreground pointer-events-none absolute top-1/2 right-2 -translate-y-1/2 text-sm`,children:d})]})},h=({name:o,label:s=`Number Field`,placeholder:u=`0`,isShowErrorMsg:f=!1,isShowCount:p=!1,unitText:h=``,description:g=``,onValueChange:_})=>{let v=d({name:o});return c(n,{name:o,render:({field:{onChange:n,...o}})=>l(r,{className:`w-full gap-0`,children:[c(i,{children:s}),c(e,{children:c(m,{...o,placeholder:u,className:`w-full`,unitText:h,onValueChange:e=>{n(e),_?.(e)}})}),p&&l(`div`,{className:`text-muted-foreground text-end text-xs`,children:[v?.length??0,` characters`]}),!!g&&c(t,{children:g}),f&&c(a,{})]})})};export{h as NumberField};
+import"../label-DdpIoRiG.js";import{FormControl as e,FormDescription as t,FormField as n,FormItem as r,FormLabel as i,FormMessage as a}from"../form-D-gDMD-J.js";import{Input as o}from"../input-BFZuwsER.js";import{cn as s}from"@customafk/react-toolkit/utils";import{jsx as c,jsxs as l}from"react/jsx-runtime";import{useCallback as u,useEffect as d,useMemo as f,useRef as p,useState as m}from"react";import{useWatch as h}from"react-hook-form";const g=e=>e?/^-?\d*\.?\d*$/:/^\d*\.?\d*$/,_=e=>Number(e).toLocaleString(),v=({disabled:e=!1,readonly:t=!1,allowNegative:n=!1,numberAfterDecimalPoint:r=2,roundingRule:i=`none`,value:a=``,unitText:h,decimal:v,placeholder:y,precision:b,onChange:x,onValueChange:S,onBlur:C,...w})=>{let T=p(null),E=p(null),[D,O]=m(a.toString()),k=v?.[1]??r,A=v&&v[0]-v[1],j=f(()=>g(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(!v||e===`-`)return!0;let[t,n=``]=e.split(`.`);return n.length<=v[1]&&(t.startsWith(`-`)?t.length-1:t.length)<=A},[v,A]),P=u((e,t)=>{if(i===`none`)return e;let n=Math.pow(10,t),r=e*n;switch(i){case`up`:return Math.ceil(r)/n;case`down`:return Math.floor(r)/n;case`nearest`:return r%1<.1?Math.floor(r)/n:r%1>=.59?Math.ceil(r)/n:(Math.floor(r)+.5)/n;default:return e}},[i]),F=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=P(t,n).toString(),[i,a=``]=r.split(`.`),o=_(i);return a?`${o}.${a}`:o},[P,k,b]),L=u(e=>{if(!v||e===`-`)return!0;let[t,n=``]=e.split(`.`),r=t.startsWith(`-`)?t.length-1:t.length,i=v[0]-v[1];return n.length<=v[1]&&r<=i},[v]),R=u(e=>{x?.(e);let{value:t}=e.target;if(!t){S?.(void 0),O(``);return}let r=t===`0`,i=t===`-`&&n;if(r||i){S?.(0),O(t);return}let a=j.test(t)&&N(t)&&(v||M(t));if(!a)return;let o=parseFloat(t)||0;S?.(o),O(t)},[n,v,M,N,x,S,j]),z=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())||!v&&F(a.toString())){O(``);return}O(t=>t===`-`?`-`:t?e?a.toString():I(a.toString()):``)},[v,I,a,F,L,j]),d(()=>{if(!T.current||!E.current||!h)return;let e=T.current.offsetWidth;E.current.style.setProperty(`padding-right`,`${(e+10)/16}rem`)},[e,h]),l(`div`,{className:`relative`,children:[c(o,{...w,ref:E,value:D||(t?`0`:``),placeholder:y,disabled:e,readOnly:t,className:s(`font-number text-end`,t&&`bg-muted text-muted-foreground`),onChange:R,onFocus:z,onBlur:B}),h&&c(`span`,{ref:T,className:`text-muted-foreground pointer-events-none absolute top-1/2 right-2 -translate-y-1/2 text-sm`,children:h})]})},y=({name:o,label:s=`Number Field`,placeholder:u=`0`,isShowErrorMsg:d=!1,isShowCount:f=!1,unitText:p=``,description:m=``,onValueChange:g})=>{let _=h({name:o});return c(n,{name:o,render:({field:{onChange:n,...o}})=>l(r,{className:`w-full gap-0`,children:[c(i,{children:s}),c(e,{children:c(v,{...o,placeholder:u,className:`w-full`,unitText:p,onValueChange:e=>{n(e),g?.(e)}})}),f&&l(`div`,{className:`text-muted-foreground text-end text-xs`,children:[_?.length??0,` characters`]}),!!m&&c(t,{children:m}),d&&c(a,{})]})})};export{y 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 React 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 = React.useRef<HTMLSpanElement>(null)\n  const _inputRef = React.useRef<HTMLInputElement>(null)\n\n  const [value, setValue] = React.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 = React.useMemo(() => createValidationRegex(allowNegative), [allowNegative])\n\n  // Validation functions\n  const isValidDecimalLength = React.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 = React.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 = React.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 = React.useCallback(\n    (value: string) => (!numberAfterDecimalPoint && value.includes('.')) || value.split('.')[1]?.length > numberAfterDecimalPoint,\n    [numberAfterDecimalPoint],\n  )\n  const formattedValue = React.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 = React.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 = React.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 = React.useCallback(() => {\n    if (readonly) return\n    setValue((prev) => prev.replace(/,/g, '')) // Remove commas for easier editing\n  }, [readonly])\n\n  const handleBlur = React.useCallback(() => {\n    if (readonly) return\n    onBlur?.()\n    setValue((prev) => formattedValue(prev))\n  }, [readonly, onBlur, formattedValue])\n\n  // Set initial value\n  React.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  React.useEffect(() => {\n    if (!_unitRef.current || !_inputRef.current || !unitText) return\n    const unitWidth = _unitRef.current.offsetWidth\n    _inputRef.current.style.setProperty('padding-right', `${(unitWidth + 10) / 16}rem`)\n  }, [disabled, unitText])\n\n  return (\n    <div className=\"relative\">\n      <Input\n        {...props}\n        ref={_inputRef}\n        value={value || (readonly ? '0' : '')}\n        placeholder={placeholder}\n        disabled={disabled}\n        readOnly={readonly}\n        className={cn('font-number text-end', readonly && 'bg-muted text-muted-foreground')}\n        onChange={handleChange}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n      />\n      {unitText && (\n        <span ref={_unitRef} className=\"text-muted-foreground pointer-events-none absolute top-1/2 right-2 -translate-y-1/2 text-sm\">\n          {unitText}\n        </span>\n      )}\n    </div>\n  )\n}\n","import { type FieldPath, type FieldValues, useWatch } from 'react-hook-form'\n\nimport { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../ui/form'\nimport { NumberInput } from '../ui/inputs/number-input'\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  name: FieldPath<TFieldValues>\n  label?: string\n  description?: string\n  placeholder?: string\n  unitText?: string\n  isShowClearButton?: boolean\n  isShowErrorMsg?: boolean\n  isShowCount?: boolean\n  onValueChange?: (value?: number) => void\n}\nexport const NumberField = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  label = 'Number Field',\n  placeholder = '0',\n  isShowErrorMsg = false,\n  isShowCount = false,\n  unitText = '',\n  description = '',\n  onValueChange,\n}: Props<TFieldValues>) => {\n  const valueWatch = useWatch({ name })\n\n  return (\n    <FormField\n      name={name}\n      render={({ field: { onChange, ...field } }) => (\n        <FormItem className=\"w-full gap-0\">\n          <FormLabel>{label}</FormLabel>\n          <FormControl>\n            <NumberInput\n              {...field}\n              placeholder={placeholder}\n              className=\"w-full\"\n              unitText={unitText}\n              onValueChange={(value) => {\n                onChange(value)\n                onValueChange?.(value)\n              }}\n            />\n          </FormControl>\n          {isShowCount && <div className=\"text-muted-foreground text-end text-xs\">{valueWatch?.length ?? 0} characters</div>}\n          {!!description && <FormDescription>{description}</FormDescription>}\n          {isShowErrorMsg && <FormMessage />}\n        </FormItem>\n      )}\n    />\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"number-field.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 { type FieldPath, type FieldValues, useWatch } from 'react-hook-form'\n\nimport { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../ui/form'\nimport { NumberInput } from '../ui/inputs/number-input'\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  name: FieldPath<TFieldValues>\n  label?: string\n  description?: string\n  placeholder?: string\n  unitText?: string\n  isShowClearButton?: boolean\n  isShowErrorMsg?: boolean\n  isShowCount?: boolean\n  onValueChange?: (value?: number) => void\n}\nexport const NumberField = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  label = 'Number Field',\n  placeholder = '0',\n  isShowErrorMsg = false,\n  isShowCount = false,\n  unitText = '',\n  description = '',\n  onValueChange,\n}: Props<TFieldValues>) => {\n  const valueWatch = useWatch({ name })\n\n  return (\n    <FormField\n      name={name}\n      render={({ field: { onChange, ...field } }) => (\n        <FormItem className=\"w-full gap-0\">\n          <FormLabel>{label}</FormLabel>\n          <FormControl>\n            <NumberInput\n              {...field}\n              placeholder={placeholder}\n              className=\"w-full\"\n              unitText={unitText}\n              onValueChange={(value) => {\n                onChange(value)\n                onValueChange?.(value)\n              }}\n            />\n          </FormControl>\n          {isShowCount && <div className=\"text-muted-foreground text-end text-xs\">{valueWatch?.length ?? 0} characters</div>}\n          {!!description && <FormDescription>{description}</FormDescription>}\n          {isShowErrorMsg && <FormMessage />}\n        </FormItem>\n      )}\n    />\n  )\n}\n"],"mappings":"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"}

package/dist/forms/password-field.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require(`../chunk-CUT6urMc.cjs`);require(`../label-BbuMrcie.cjs`);const t=require(`../form-DAwCSzSe.cjs`),n=require(`../input-Bt7b3-NW.cjs`),r=e.__toESM(require(`lucide-react`)),i=e.__toESM(require(`@customafk/react-toolkit/utils`)),a=e.__toESM(require(`react/jsx-runtime`)),o=e.__toESM(require(`react`)),s=({className:e,...t})=>{let s=o.default.useId(),[c,l]=o.default.useState(!1),u=o.default.useCallback(()=>l(e=>!e),[]);return(0,a.jsxs)(`div`,{className:`relative`,children:[(0,a.jsx)(n.Input,{...t,id:s,placeholder:`Password`,type:c?`text`:`password`,className:(0,i.cn)(`pe-9`,e)}),(0,a.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,a.jsx)(r.EyeOffIcon,{size:16,"aria-hidden":`true`}):(0,a.jsx)(r.EyeIcon,{size:16,"aria-hidden":`true`})})]})},c=({name:e,label:n=`Text Field`,placeholder:r=`Enter text here`,isShowErrorMsg:i=!1,description:o,onValueChange:c})=>(0,a.jsx)(t.FormField,{name:e,render:({field:e})=>(0,a.jsxs)(t.FormItem,{className:`w-full`,children:[(0,a.jsx)(t.FormLabel,{children:n}),(0,a.jsx)(t.FormControl,{children:(0,a.jsx)(s,{placeholder:r,...e,onValueChange:c})}),!!o&&(0,a.jsx)(t.FormDescription,{children:o}),i&&(0,a.jsx)(t.FormMessage,{})]})});exports.PasswordField=c;
+"use client";const e=require(`../chunk-CUT6urMc.cjs`);require(`../label-BBPPT0-L.cjs`);const t=require(`../form-CaxhlWxK.cjs`),n=require(`../input-ERPHY3v4.cjs`),r=e.__toESM(require(`lucide-react`)),i=e.__toESM(require(`@customafk/react-toolkit/utils`)),a=e.__toESM(require(`react/jsx-runtime`)),o=({className:e,...t})=>{let o=React.useId(),[s,c]=React.useState(!1),l=React.useCallback(()=>c(e=>!e),[]);return(0,a.jsxs)(`div`,{className:`relative`,children:[(0,a.jsx)(n.Input,{...t,id:o,placeholder:`Password`,type:s?`text`:`password`,className:(0,i.cn)(`pe-9`,e)}),(0,a.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:l,"aria-label":s?`Hide password`:`Show password`,"aria-pressed":s,"aria-controls":`password`,children:s?(0,a.jsx)(r.EyeOffIcon,{size:16,"aria-hidden":`true`}):(0,a.jsx)(r.EyeIcon,{size:16,"aria-hidden":`true`})})]})},s=({name:e,label:n=`Text Field`,placeholder:r=`Enter text here`,isShowErrorMsg:i=!1,description:s,onValueChange:c})=>(0,a.jsx)(t.FormField,{name:e,render:({field:e})=>(0,a.jsxs)(t.FormItem,{className:`w-full`,children:[(0,a.jsx)(t.FormLabel,{children:n}),(0,a.jsx)(t.FormControl,{children:(0,a.jsx)(o,{placeholder:r,...e,onValueChange:c})}),!!s&&(0,a.jsx)(t.FormDescription,{children:s}),i&&(0,a.jsx)(t.FormMessage,{})]})});exports.PasswordField=s;
 //# sourceMappingURL=password-field.cjs.map