@customafk/lunas-ui 0.1.3 → 0.1.5

package/dist/flex-BYj-xYaw.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"flex-BYj-xYaw.cjs","names":[],"sources":["../packages/components/layouts/flex.tsx"],"sourcesContent":["'use client';\nimport { memo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nconst flexVariants = cva(['relative flex', 'text-sm'], {\n  variants: {\n    vertical: {\n      true: 'flex-col',\n      false: 'flex-row',\n    },\n    width: {\n      full: 'w-full',\n      auto: 'w-auto',\n      fit: 'w-fit',\n      screen: 'w-screen',\n      min: 'w-min',\n      max: 'w-max',\n      null: '',\n    },\n    wrap: {\n      true: 'flex-wrap',\n      false: 'flex-nowrap',\n    },\n    margin: {\n      sm: 'm-2',\n      md: 'm-4',\n      lg: 'm-6',\n      xl: 'm-8',\n      none: 'm-0',\n    },\n    padding: {\n      sm: 'p-2',\n      md: 'p-4',\n      lg: 'p-6',\n      xl: 'p-8',\n      none: 'p-0',\n    },\n    gap: {\n      xs: 'gap-1',\n      sm: 'gap-2',\n      md: 'gap-4',\n      lg: 'gap-6',\n      xl: 'gap-8',\n      none: 'gap-0',\n    },\n    justify: {\n      start: 'justify-start',\n      center: 'justify-center',\n      end: 'justify-end',\n      between: 'justify-between',\n      around: 'justify-around',\n      evenly: 'justify-evenly',\n      stretch: 'justify-stretch',\n    },\n    align: {\n      start: 'items-start',\n      center: 'items-center',\n      end: 'items-end',\n      baseline: 'items-baseline',\n      stretch: 'items-stretch',\n    },\n  },\n  defaultVariants: {\n    vertical: false,\n    wrap: true,\n    width: 'fit',\n    margin: 'none',\n    padding: 'sm',\n    gap: 'xs',\n    justify: 'start',\n    align: 'center',\n  },\n});\n\ntype Props = {\n  className?: string;\n} & VariantProps<typeof flexVariants>;\n\nexport const Flex = memo(({ vertical, wrap, width, margin, padding, gap, justify, align, className, children }: React.PropsWithChildren<Props>) => {\n  return (\n    <div\n      className={cn(\n        flexVariants({\n          vertical,\n          width,\n          wrap,\n          margin,\n          padding,\n          gap,\n          justify,\n          align,\n          className,\n        })\n      )}\n    >\n      {children}\n    </div>\n  );\n});\nFlex.displayName = 'Flex';\n"],"mappings":"gLAOA,MAAM,GAAA,EAAA,EAAA,KAAmB,CAAC,gBAAiB,UAAU,CAAE,CACrD,SAAU,CACR,SAAU,CACR,KAAM,WACN,MAAO,WACR,CACD,MAAO,CACL,KAAM,SACN,KAAM,SACN,IAAK,QACL,OAAQ,WACR,IAAK,QACL,IAAK,QACL,KAAM,GACP,CACD,KAAM,CACJ,KAAM,YACN,MAAO,cACR,CACD,OAAQ,CACN,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,KAAM,MACP,CACD,QAAS,CACP,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,KAAM,MACP,CACD,IAAK,CACH,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,KAAM,QACP,CACD,QAAS,CACP,MAAO,gBACP,OAAQ,iBACR,IAAK,cACL,QAAS,kBACT,OAAQ,iBACR,OAAQ,iBACR,QAAS,kBACV,CACD,MAAO,CACL,MAAO,cACP,OAAQ,eACR,IAAK,YACL,SAAU,iBACV,QAAS,gBACV,CACF,CACD,gBAAiB,CACf,SAAU,GACV,KAAM,GACN,MAAO,MACP,OAAQ,OACR,QAAS,KACT,IAAK,KACL,QAAS,QACT,MAAO,SACR,CACF,CAAC,CAMW,GAAA,EAAA,EAAA,OAAa,CAAE,WAAU,OAAM,QAAO,SAAQ,UAAS,MAAK,UAAS,QAAO,YAAW,eAEhG,EAAA,EAAA,KAAC,MAAA,CACC,WAAA,EAAA,EAAA,IACE,EAAa,CACX,WACA,QACA,OACA,SACA,UACA,MACA,UACA,QACA,YACD,CAAC,CACH,CAEA,YACG,CAER,CACF,EAAK,YAAc"}

package/dist/flex-DVvvRStw.mjs

@@ -0,0 +1,2 @@
+import{cn as e}from"@customafk/react-toolkit/utils";import{jsx as t}from"react/jsx-runtime";import{memo as n}from"react";import{cva as r}from"class-variance-authority";const i=r([`relative flex`,`text-sm`],{variants:{vertical:{true:`flex-col`,false:`flex-row`},width:{full:`w-full`,auto:`w-auto`,fit:`w-fit`,screen:`w-screen`,min:`w-min`,max:`w-max`,null:``},wrap:{true:`flex-wrap`,false:`flex-nowrap`},margin:{sm:`m-2`,md:`m-4`,lg:`m-6`,xl:`m-8`,none:`m-0`},padding:{sm:`p-2`,md:`p-4`,lg:`p-6`,xl:`p-8`,none:`p-0`},gap:{xs:`gap-1`,sm:`gap-2`,md:`gap-4`,lg:`gap-6`,xl:`gap-8`,none:`gap-0`},justify:{start:`justify-start`,center:`justify-center`,end:`justify-end`,between:`justify-between`,around:`justify-around`,evenly:`justify-evenly`,stretch:`justify-stretch`},align:{start:`items-start`,center:`items-center`,end:`items-end`,baseline:`items-baseline`,stretch:`items-stretch`}},defaultVariants:{vertical:!1,wrap:!0,width:`fit`,margin:`none`,padding:`sm`,gap:`xs`,justify:`start`,align:`center`}}),a=n(({vertical:n,wrap:r,width:a,margin:o,padding:s,gap:c,justify:l,align:u,className:d,children:f})=>t(`div`,{className:e(i({vertical:n,width:a,wrap:r,margin:o,padding:s,gap:c,justify:l,align:u,className:d})),children:f}));a.displayName=`Flex`;export{a as t};
+//# sourceMappingURL=flex-DVvvRStw.mjs.map

package/dist/flex-DVvvRStw.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"flex-DVvvRStw.mjs","names":[],"sources":["../packages/components/layouts/flex.tsx"],"sourcesContent":["'use client';\nimport { memo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nconst flexVariants = cva(['relative flex', 'text-sm'], {\n  variants: {\n    vertical: {\n      true: 'flex-col',\n      false: 'flex-row',\n    },\n    width: {\n      full: 'w-full',\n      auto: 'w-auto',\n      fit: 'w-fit',\n      screen: 'w-screen',\n      min: 'w-min',\n      max: 'w-max',\n      null: '',\n    },\n    wrap: {\n      true: 'flex-wrap',\n      false: 'flex-nowrap',\n    },\n    margin: {\n      sm: 'm-2',\n      md: 'm-4',\n      lg: 'm-6',\n      xl: 'm-8',\n      none: 'm-0',\n    },\n    padding: {\n      sm: 'p-2',\n      md: 'p-4',\n      lg: 'p-6',\n      xl: 'p-8',\n      none: 'p-0',\n    },\n    gap: {\n      xs: 'gap-1',\n      sm: 'gap-2',\n      md: 'gap-4',\n      lg: 'gap-6',\n      xl: 'gap-8',\n      none: 'gap-0',\n    },\n    justify: {\n      start: 'justify-start',\n      center: 'justify-center',\n      end: 'justify-end',\n      between: 'justify-between',\n      around: 'justify-around',\n      evenly: 'justify-evenly',\n      stretch: 'justify-stretch',\n    },\n    align: {\n      start: 'items-start',\n      center: 'items-center',\n      end: 'items-end',\n      baseline: 'items-baseline',\n      stretch: 'items-stretch',\n    },\n  },\n  defaultVariants: {\n    vertical: false,\n    wrap: true,\n    width: 'fit',\n    margin: 'none',\n    padding: 'sm',\n    gap: 'xs',\n    justify: 'start',\n    align: 'center',\n  },\n});\n\ntype Props = {\n  className?: string;\n} & VariantProps<typeof flexVariants>;\n\nexport const Flex = memo(({ vertical, wrap, width, margin, padding, gap, justify, align, className, children }: React.PropsWithChildren<Props>) => {\n  return (\n    <div\n      className={cn(\n        flexVariants({\n          vertical,\n          width,\n          wrap,\n          margin,\n          padding,\n          gap,\n          justify,\n          align,\n          className,\n        })\n      )}\n    >\n      {children}\n    </div>\n  );\n});\nFlex.displayName = 'Flex';\n"],"mappings":"wKAOA,MAAM,EAAe,EAAI,CAAC,gBAAiB,UAAU,CAAE,CACrD,SAAU,CACR,SAAU,CACR,KAAM,WACN,MAAO,WACR,CACD,MAAO,CACL,KAAM,SACN,KAAM,SACN,IAAK,QACL,OAAQ,WACR,IAAK,QACL,IAAK,QACL,KAAM,GACP,CACD,KAAM,CACJ,KAAM,YACN,MAAO,cACR,CACD,OAAQ,CACN,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,KAAM,MACP,CACD,QAAS,CACP,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,KAAM,MACP,CACD,IAAK,CACH,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,KAAM,QACP,CACD,QAAS,CACP,MAAO,gBACP,OAAQ,iBACR,IAAK,cACL,QAAS,kBACT,OAAQ,iBACR,OAAQ,iBACR,QAAS,kBACV,CACD,MAAO,CACL,MAAO,cACP,OAAQ,eACR,IAAK,YACL,SAAU,iBACV,QAAS,gBACV,CACF,CACD,gBAAiB,CACf,SAAU,GACV,KAAM,GACN,MAAO,MACP,OAAQ,OACR,QAAS,KACT,IAAK,KACL,QAAS,QACT,MAAO,SACR,CACF,CAAC,CAMW,EAAO,GAAM,CAAE,WAAU,OAAM,QAAO,SAAQ,UAAS,MAAK,UAAS,QAAO,YAAW,cAEhG,EAAC,MAAA,CACC,UAAW,EACT,EAAa,CACX,WACA,QACA,OACA,SACA,UACA,MACA,UACA,QACA,YACD,CAAC,CACH,CAEA,YACG,CAER,CACF,EAAK,YAAc"}

package/dist/form-Bob0j0XE.mjs

@@ -0,0 +1,2 @@
+import{o as e,r as t,t as n}from"./field-COna_98h.mjs";import{cn as r}from"@customafk/react-toolkit/utils";import{jsx as i}from"react/jsx-runtime";import{createContext as a,memo as o,use as s,useId as c}from"react";import{Slot as l}from"radix-ui";import{Controller as u,FormProvider as d,useFormContext as f,useFormState as p}from"react-hook-form";const m=d,h=a({}),g=({...e})=>i(h.Provider,{value:{name:e.name},children:i(u,{...e})}),_=()=>{let e=s(h),t=s(v),{getFieldState:n,control:r,resetField:i}=f(),a=p({name:e.name}),o=n(e.name,a);if(!e)throw Error(`useFormField should be used within <FormField>`);let{id:c}=t;return{id:c,control:r,resetField:i,name:e.name,formItemId:`${c}-form-item`,formDescriptionId:`${c}-form-item-description`,formMessageId:`${c}-form-item-message`,...o}},v=a({}),y=o(({className:e,orientation:t=`responsive`,...r})=>{let a=c();return i(v.Provider,{value:{id:a},children:i(n,{orientation:t,...r,className:e})})});y.displayName=`FormItem`;const b=o(({...t})=>{let{formItemId:n}=_();return i(e,{htmlFor:n,...t})});b.displayName=`FormLabel`;const x=o(({...e})=>{let{error:t,formItemId:n,formDescriptionId:r,formMessageId:a}=_();return i(l.Slot,{"data-slot":`form-control`,id:n,"aria-describedby":t?`${r} ${a}`:`${r}`,"aria-invalid":!!t,...e})});x.displayName=`FormControl`;function S({className:e,...n}){let{formDescriptionId:a}=_();return i(t,{id:a,className:r(`text-text-positive-weak text-sm/6 leading-normal font-normal`,`group-has-data-[orientation=horizontal]/field:text-balance`,`last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5`,`[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4`,e),...n})}function C({className:e,children:t,...n}){let{error:a,formMessageId:o}=_();return i(`span`,{"data-slot":`form-message`,id:o,className:r(`text-danger text-xs`,e),...n,children:a?String(a?.message??``):t})}export{y as a,_ as c,g as i,x as n,b as o,S as r,C as s,m as t};
+//# sourceMappingURL=form-Bob0j0XE.mjs.map

package/dist/form-Bob0j0XE.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-Bob0j0XE.mjs","names":["SlotPrimitive"],"sources":["../packages/components/ui/form.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\nimport { type Label as LabelPrimitive, Slot as SlotPrimitive } from 'radix-ui';\nimport { createContext, memo, use, useId } from 'react';\nimport type { ControllerProps, FieldPath, FieldValues } from 'react-hook-form';\nimport { Controller, FormProvider, useFormContext, useFormState } from 'react-hook-form';\nimport { Field, FieldDescription, FieldLabel } from './field';\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 = use(FormFieldContext);\n  const itemContext = use(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\nconst FormItem = memo(\n  ({\n    className,\n    orientation = 'responsive',\n    ...props\n  }: React.ComponentProps<'div'> & {\n    orientation?: 'vertical' | 'horizontal' | 'responsive';\n  }) => {\n    const id = useId();\n\n    return (\n      <FormItemContext.Provider value={{ id }}>\n        <Field orientation={orientation} {...props} className={className} />\n      </FormItemContext.Provider>\n    );\n  }\n);\nFormItem.displayName = 'FormItem';\n\nconst FormLabel = memo(({ ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) => {\n  const { formItemId } = useFormField();\n  return <FieldLabel htmlFor={formItemId} {...props} />;\n});\nFormLabel.displayName = 'FormLabel';\n\nconst FormControl = memo(({ ...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});\nFormControl.displayName = 'FormControl';\n\nfunction FormDescription({ className, ...props }: React.ComponentProps<'p'>) {\n  const { formDescriptionId } = useFormField();\n\n  return (\n    <FieldDescription\n      id={formDescriptionId}\n      className={cn(\n        'text-text-positive-weak text-sm/6 leading-normal font-normal',\n        'group-has-data-[orientation=horizontal]/field:text-balance',\n        'last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5',\n        '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',\n        className\n      )}\n      {...props}\n    />\n  );\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":"4VASA,MAAM,EAAO,EAMP,EAAmB,EAAqC,EAAE,CAA0B,CAEpF,GAA8H,CAClI,GAAG,KAGD,EAAC,EAAiB,SAAA,CAAS,MAAO,CAAE,KAAM,EAAM,KAAM,UACpD,EAAC,EAAA,CAAW,GAAI,EAAA,CAAS,EACC,CAI1B,MAAqB,CACzB,IAAM,EAAe,EAAI,EAAiB,CACpC,EAAc,EAAI,EAAgB,CAClC,CAAE,gBAAe,UAAS,cAAe,GAAgB,CACzD,EAAY,EAAa,CAAE,KAAM,EAAa,KAAM,CAAC,CACrD,EAAa,EAAc,EAAa,KAAM,EAAU,CAE9D,GAAI,CAAC,EACH,MAAU,MAAM,iDAAiD,CAGnE,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,EACJ,EAOG,EAAkB,EAAoC,EAAE,CAAyB,CAEjF,EAAW,GACd,CACC,YACA,cAAc,aACd,GAAG,KAGC,CACJ,IAAM,EAAK,GAAO,CAElB,OACE,EAAC,EAAgB,SAAA,CAAS,MAAO,CAAE,KAAI,UACrC,EAAC,EAAA,CAAmB,cAAa,GAAI,EAAkB,aAAa,EAC3C,EAGhC,CACD,EAAS,YAAc,WAEvB,MAAM,EAAY,GAAM,CAAE,GAAG,KAA8D,CACzF,GAAM,CAAE,cAAe,GAAc,CACrC,OAAO,EAAC,EAAA,CAAW,QAAS,EAAY,GAAI,GAAS,EACrD,CACF,EAAU,YAAc,YAExB,MAAM,EAAc,GAAM,CAAE,GAAG,KAA6D,CAC1F,GAAM,CAAE,QAAO,aAAY,oBAAmB,iBAAkB,GAAc,CAE9E,OACE,EAACA,EAAc,KAAA,CACb,YAAU,eACV,GAAI,EACJ,mBAAmB,EAAiC,GAAG,EAAkB,GAAG,IAAjD,GAAG,IAC9B,eAAc,CAAC,CAAC,EAChB,GAAI,GACJ,EAEJ,CACF,EAAY,YAAc,cAE1B,SAAS,EAAgB,CAAE,YAAW,GAAG,GAAoC,CAC3E,GAAM,CAAE,qBAAsB,GAAc,CAE5C,OACE,EAAC,EAAA,CACC,GAAI,EACJ,UAAW,EACT,+DACA,6DACA,+DACA,oEACA,EACD,CACD,GAAI,GACJ,CAIN,SAAS,EAAY,CAAE,YAAW,WAAU,GAAG,GAAoC,CACjF,GAAM,CAAE,QAAO,iBAAkB,GAAc,CAE/C,OACE,EAAC,OAAA,CAAK,YAAU,eAAe,GAAI,EAAe,UAAW,EAAG,sBAAuB,EAAU,CAAE,GAAI,WACpG,EAAQ,OAAO,GAAO,SAAW,GAAG,CAAG,GACnC"}

package/dist/form-DrtMcMJp.cjs

@@ -0,0 +1,2 @@
+const e=require(`./chunk-Bmb41Sf3.cjs`),t=require(`./field-D8lireRm.cjs`);let n=require(`@customafk/react-toolkit/utils`),r=require(`react/jsx-runtime`),i=require(`react`),a=require(`radix-ui`),o=require(`react-hook-form`);const s=o.FormProvider,c=(0,i.createContext)({}),l=({...e})=>(0,r.jsx)(c.Provider,{value:{name:e.name},children:(0,r.jsx)(o.Controller,{...e})}),u=()=>{let e=(0,i.use)(c),t=(0,i.use)(d),{getFieldState:n,control:r,resetField:a}=(0,o.useFormContext)(),s=(0,o.useFormState)({name:e.name}),l=n(e.name,s);if(!e)throw Error(`useFormField should be used within <FormField>`);let{id:u}=t;return{id:u,control:r,resetField:a,name:e.name,formItemId:`${u}-form-item`,formDescriptionId:`${u}-form-item-description`,formMessageId:`${u}-form-item-message`,...l}},d=(0,i.createContext)({}),f=(0,i.memo)(({className:e,orientation:n=`responsive`,...a})=>{let o=(0,i.useId)();return(0,r.jsx)(d.Provider,{value:{id:o},children:(0,r.jsx)(t.t,{orientation:n,...a,className:e})})});f.displayName=`FormItem`;const p=(0,i.memo)(({...e})=>{let{formItemId:n}=u();return(0,r.jsx)(t.o,{htmlFor:n,...e})});p.displayName=`FormLabel`;const m=(0,i.memo)(({...e})=>{let{error:t,formItemId:n,formDescriptionId:i,formMessageId:o}=u();return(0,r.jsx)(a.Slot.Slot,{"data-slot":`form-control`,id:n,"aria-describedby":t?`${i} ${o}`:`${i}`,"aria-invalid":!!t,...e})});m.displayName=`FormControl`;function h({className:e,...i}){let{formDescriptionId:a}=u();return(0,r.jsx)(t.r,{id:a,className:(0,n.cn)(`text-text-positive-weak text-sm/6 leading-normal font-normal`,`group-has-data-[orientation=horizontal]/field:text-balance`,`last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5`,`[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4`,e),...i})}function g({className:e,children:t,...i}){let{error:a,formMessageId:o}=u();return(0,r.jsx)(`span`,{"data-slot":`form-message`,id:o,className:(0,n.cn)(`text-danger text-xs`,e),...i,children:a?String(a?.message??``):t})}Object.defineProperty(exports,`a`,{enumerable:!0,get:function(){return f}}),Object.defineProperty(exports,`c`,{enumerable:!0,get:function(){return u}}),Object.defineProperty(exports,`i`,{enumerable:!0,get:function(){return l}}),Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return m}}),Object.defineProperty(exports,`o`,{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return h}}),Object.defineProperty(exports,`s`,{enumerable:!0,get:function(){return g}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return s}});
+//# sourceMappingURL=form-DrtMcMJp.cjs.map

package/dist/form-DrtMcMJp.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-DrtMcMJp.cjs","names":["FormProvider","Controller","Field","FieldLabel","SlotPrimitive","FieldDescription"],"sources":["../packages/components/ui/form.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\nimport { type Label as LabelPrimitive, Slot as SlotPrimitive } from 'radix-ui';\nimport { createContext, memo, use, useId } from 'react';\nimport type { ControllerProps, FieldPath, FieldValues } from 'react-hook-form';\nimport { Controller, FormProvider, useFormContext, useFormState } from 'react-hook-form';\nimport { Field, FieldDescription, FieldLabel } from './field';\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 = use(FormFieldContext);\n  const itemContext = use(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\nconst FormItem = memo(\n  ({\n    className,\n    orientation = 'responsive',\n    ...props\n  }: React.ComponentProps<'div'> & {\n    orientation?: 'vertical' | 'horizontal' | 'responsive';\n  }) => {\n    const id = useId();\n\n    return (\n      <FormItemContext.Provider value={{ id }}>\n        <Field orientation={orientation} {...props} className={className} />\n      </FormItemContext.Provider>\n    );\n  }\n);\nFormItem.displayName = 'FormItem';\n\nconst FormLabel = memo(({ ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) => {\n  const { formItemId } = useFormField();\n  return <FieldLabel htmlFor={formItemId} {...props} />;\n});\nFormLabel.displayName = 'FormLabel';\n\nconst FormControl = memo(({ ...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});\nFormControl.displayName = 'FormControl';\n\nfunction FormDescription({ className, ...props }: React.ComponentProps<'p'>) {\n  const { formDescriptionId } = useFormField();\n\n  return (\n    <FieldDescription\n      id={formDescriptionId}\n      className={cn(\n        'text-text-positive-weak text-sm/6 leading-normal font-normal',\n        'group-has-data-[orientation=horizontal]/field:text-balance',\n        'last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5',\n        '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',\n        className\n      )}\n      {...props}\n    />\n  );\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":"+NASA,MAAM,EAAOA,EAAAA,aAMP,GAAA,EAAA,EAAA,eAAwD,EAAE,CAA0B,CAEpF,GAA8H,CAClI,GAAG,MAGD,EAAA,EAAA,KAAC,EAAiB,SAAA,CAAS,MAAO,CAAE,KAAM,EAAM,KAAM,WACpD,EAAA,EAAA,KAACC,EAAAA,WAAAA,CAAW,GAAI,EAAA,CAAS,EACC,CAI1B,MAAqB,CACzB,IAAM,GAAA,EAAA,EAAA,KAAmB,EAAiB,CACpC,GAAA,EAAA,EAAA,KAAkB,EAAgB,CAClC,CAAE,gBAAe,UAAS,eAAA,EAAA,EAAA,iBAA+B,CACzD,GAAA,EAAA,EAAA,cAAyB,CAAE,KAAM,EAAa,KAAM,CAAC,CACrD,EAAa,EAAc,EAAa,KAAM,EAAU,CAE9D,GAAI,CAAC,EACH,MAAU,MAAM,iDAAiD,CAGnE,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,EACJ,EAOG,GAAA,EAAA,EAAA,eAAsD,EAAE,CAAyB,CAEjF,GAAA,EAAA,EAAA,OACH,CACC,YACA,cAAc,aACd,GAAG,KAGC,CACJ,IAAM,GAAA,EAAA,EAAA,QAAY,CAElB,OACE,EAAA,EAAA,KAAC,EAAgB,SAAA,CAAS,MAAO,CAAE,KAAI,WACrC,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAmB,cAAa,GAAI,EAAkB,aAAa,EAC3C,EAGhC,CACD,EAAS,YAAc,WAEvB,MAAM,GAAA,EAAA,EAAA,OAAkB,CAAE,GAAG,KAA8D,CACzF,GAAM,CAAE,cAAe,GAAc,CACrC,OAAO,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAW,QAAS,EAAY,GAAI,GAAS,EACrD,CACF,EAAU,YAAc,YAExB,MAAM,GAAA,EAAA,EAAA,OAAoB,CAAE,GAAG,KAA6D,CAC1F,GAAM,CAAE,QAAO,aAAY,oBAAmB,iBAAkB,GAAc,CAE9E,OACE,EAAA,EAAA,KAACC,EAAAA,KAAc,KAAA,CACb,YAAU,eACV,GAAI,EACJ,mBAAmB,EAAiC,GAAG,EAAkB,GAAG,IAAjD,GAAG,IAC9B,eAAc,CAAC,CAAC,EAChB,GAAI,GACJ,EAEJ,CACF,EAAY,YAAc,cAE1B,SAAS,EAAgB,CAAE,YAAW,GAAG,GAAoC,CAC3E,GAAM,CAAE,qBAAsB,GAAc,CAE5C,OACE,EAAA,EAAA,KAACC,EAAAA,EAAAA,CACC,GAAI,EACJ,WAAA,EAAA,EAAA,IACE,+DACA,6DACA,+DACA,oEACA,EACD,CACD,GAAI,GACJ,CAIN,SAAS,EAAY,CAAE,YAAW,WAAU,GAAG,GAAoC,CACjF,GAAM,CAAE,QAAO,iBAAkB,GAAc,CAE/C,OACE,EAAA,EAAA,KAAC,OAAA,CAAK,YAAU,eAAe,GAAI,EAAe,WAAA,EAAA,EAAA,IAAc,sBAAuB,EAAU,CAAE,GAAI,WACpG,EAAQ,OAAO,GAAO,SAAW,GAAG,CAAG,GACnC"}

package/dist/forms/combobox-field.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require(`../chunk-Bmb41Sf3.cjs`);require(`../dist-Dh8WwRa8.cjs`),require(`../button.variants-D1vkzrn1.cjs`);const t=require(`../button-BSQjtXgG.cjs`);require(`../label-D2Kl-Q_-.cjs`),require(`../separator-D3CGKwyf.cjs`);const n=require(`../field-Cjpwx_6d.cjs`),r=require(`../form-D1gfOYhk.cjs`);require(`../dialog-BZSD5ydg.cjs`);const i=require(`../command-B2WOEAng.cjs`),a=require(`../popover-Bn3M2SCp.cjs`);let o=require(`lucide-react`),s=require(`react`),c=require(`@customafk/react-toolkit/utils`),l=require(`react/jsx-runtime`);const u=({name:e,label:u=`Combobox`,placeholder:d=`Chọn một mục`,description:f,options:p,onAddNewItem:m})=>(0,l.jsx)(r.i,{name:e,render:({field:e})=>(0,l.jsxs)(r.a,{className:`w-full`,children:[(0,l.jsx)(s.Activity,{mode:u||f?`visible`:`hidden`,children:(0,l.jsxs)(n.n,{children:[(0,l.jsx)(r.o,{children:u}),!!f&&(0,l.jsx)(r.r,{children:f})]})}),(0,l.jsx)(`div`,{className:`basis-3/5 flex justify-end`,children:(0,l.jsxs)(a.t,{modal:!0,children:[(0,l.jsx)(a.i,{asChild:!0,children:(0,l.jsx)(r.n,{children:(0,l.jsxs)(t.t,{type:`button`,variant:`outline`,role:`combobox`,color:`muted`,className:(0,c.cn)(`w-full md:max-w-80`,`shadow-input flex justify-between rounded-md px-3`,`outline-border-weak font-normal`,`[&_div]:w-full`,`[&_span]: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,l.jsx)(`p`,{className:`flex flex-1 min-w-0 text-start items-center gap-2`,children:p?.find(({value:t})=>t===e.value)?.label}):(0,l.jsx)(`p`,{className:`text-text-positive-muted text-start flex-1`,children:d}),(0,l.jsx)(o.ChevronDownIcon,{size:16,className:`text-text-positive-weak shrink-0`,"aria-hidden":`true`})]})})}),(0,l.jsx)(a.r,{className:`w-(--radix-popover-trigger-width) p-0`,children:(0,l.jsxs)(i.t,{className:`border-none`,children:[(0,l.jsx)(i.a,{placeholder:d??`Tìm kiếm`}),(0,l.jsxs)(i.s,{children:[(0,l.jsx)(i.i,{className:`max-h-40 overflow-y-auto`,children:p?.map(({value:t,label:n})=>(0,l.jsx)(i.o,{value:n,onSelect:()=>e.onChange(t),children:n},t))}),m&&(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(i.c,{}),(0,l.jsx)(i.i,{children:(0,l.jsxs)(t.t,{type:`button`,variant:`ghost`,className:`w-full justify-start font-normal`,children:[(0,l.jsx)(o.PlusIcon,{size:14,className:`-ms-2 opacity-60`,"aria-hidden":`true`}),`Thêm mới`]})})]})]}),(0,l.jsx)(i.r,{children:`Không có kết quả`})]})})]})})]})});exports.ComboboxField=u;
+"use client";const e=require(`../chunk-Bmb41Sf3.cjs`);require(`../button.variants-C--cfyfH.cjs`);const t=require(`../button-DtFiUaY7.cjs`);require(`../dialog-VFBezutQ.cjs`),require(`../separator-CBup_ah1.cjs`),require(`../label-C6_Tplyy.cjs`);const n=require(`../field-D8lireRm.cjs`),r=require(`../form-DrtMcMJp.cjs`),i=require(`../command-p7dWcZcY.cjs`),a=require(`../popover-stNXNDSM.cjs`);let o=require(`@customafk/react-toolkit/utils`),s=require(`react/jsx-runtime`),c=require(`lucide-react`),l=require(`react`);const u=({name:e,label:u=`Combobox`,placeholder:d=`Chọn một mục`,description:f,options:p,onAddNewItem:m})=>(0,s.jsx)(r.i,{name:e,render:({field:e})=>(0,s.jsxs)(r.a,{className:`w-full`,children:[(0,s.jsx)(l.Activity,{mode:u||f?`visible`:`hidden`,children:(0,s.jsxs)(n.n,{children:[(0,s.jsx)(r.o,{children:u}),!!f&&(0,s.jsx)(r.r,{children:f})]})}),(0,s.jsx)(`div`,{className:`basis-3/5 flex justify-end`,children:(0,s.jsxs)(a.t,{modal:!0,children:[(0,s.jsx)(a.i,{asChild:!0,children:(0,s.jsx)(r.n,{children:(0,s.jsxs)(t.t,{type:`button`,variant:`outline`,role:`combobox`,color:`muted`,className:(0,o.cn)(`w-full md:max-w-80`,`shadow-input flex justify-between rounded-md px-3`,`outline-border-weak font-normal`,`[&_div]:w-full`,`[&_span]: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)(`p`,{className:`flex flex-1 min-w-0 text-start items-center gap-2`,children:p?.find(({value:t})=>t===e.value)?.label}):(0,s.jsx)(`p`,{className:`text-text-positive-muted text-start flex-1`,children:d}),(0,s.jsx)(c.ChevronDownIcon,{size:16,className:`text-text-positive-weak shrink-0`,"aria-hidden":`true`})]})})}),(0,s.jsx)(a.r,{className:`w-(--radix-popover-trigger-width) p-0`,children:(0,s.jsxs)(i.t,{className:`border-none`,children:[(0,s.jsx)(i.a,{placeholder:d??`Tìm kiếm`}),(0,s.jsxs)(i.s,{children:[(0,s.jsx)(i.i,{className:`max-h-40 overflow-y-auto`,children:p?.map(({value:t,label:n})=>(0,s.jsx)(i.o,{value:n,onSelect:()=>e.onChange(t),children:n},t))}),m&&(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(i.c,{}),(0,s.jsx)(i.i,{children:(0,s.jsxs)(t.t,{type:`button`,variant:`ghost`,className:`w-full justify-start font-normal`,children:[(0,s.jsx)(c.PlusIcon,{size:14,className:`-ms-2 opacity-60`,"aria-hidden":`true`}),`Thêm mới`]})})]})]}),(0,s.jsx)(i.r,{children:`Không có kết quả`})]})})]})})]})});exports.ComboboxField=u;
 //# sourceMappingURL=combobox-field.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"combobox-field.cjs","names":["FormField","FormItem","Activity","FieldContent","FormLabel","FormDescription","Popover","PopoverTrigger","FormControl","Button","ChevronDownIcon","PopoverContent","Command","CommandInput","CommandList","CommandGroup","CommandItem","label","CommandSeparator","PlusIcon","CommandEmpty"],"sources":["../../packages/components/forms/combobox-field.tsx"],"sourcesContent":["'use client';\nimport { Activity } from 'react';\nimport type { FieldPath, FieldValues } from 'react-hook-form';\n\nimport { ChevronDownIcon, PlusIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from '@/components/ui/command';\nimport { FormControl, FormDescription, FormField, FormItem, FormLabel } from '@/components/ui/form';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';\nimport { FieldContent } from '../ui/field';\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  name: FieldPath<TFieldValues>;\n  label?: string;\n  placeholder?: string;\n  options?: { value: string | number; label: string }[];\n  isShowErrorMsg?: boolean;\n  modal?: boolean;\n  description?: string;\n  onAddNewItem?: () => void;\n};\n\nexport const ComboboxField = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  label = 'Combobox',\n  placeholder = 'Chọn một mục',\n  description,\n  options,\n  onAddNewItem,\n}: Props<TFieldValues>) => {\n  return (\n    <FormField\n      name={name}\n      render={({ field }) => {\n        return (\n          <FormItem className=\"w-full\">\n            <Activity mode={label || description ? 'visible' : 'hidden'}>\n              <FieldContent>\n                <FormLabel>{label}</FormLabel>\n                {!!description && <FormDescription>{description}</FormDescription>}\n              </FieldContent>\n            </Activity>\n            <div className=\"basis-3/5 flex justify-end\">\n              <Popover modal={true}>\n                <PopoverTrigger asChild>\n                  <FormControl>\n                    <Button\n                      type=\"button\"\n                      variant=\"outline\"\n                      role=\"combobox\"\n                      color=\"muted\"\n                      className={cn(\n                        'w-full md:max-w-80',\n                        'shadow-input flex justify-between rounded-md px-3',\n                        'outline-border-weak font-normal',\n                        '[&_div]:w-full',\n                        '[&_span]:w-full',\n                        '[&_div]:justify-between',\n                        'hover:outline-border',\n                        'data-[state=open]:text-text-positive-muted',\n                        'data-[state=open]:outline-1',\n                        'data-[state=open]:outline-primary-strong',\n                        'data-[state=open]:ring-primary-weak',\n                        'data-[state=open]:ring-4',\n                        'focus:border-primary-strong',\n                        'focus:ring-4',\n                        'focus:ring-primary-weak',\n                        'focus:outline-1',\n                        'focus:outline-primary-strong'\n                      )}\n                    >\n                      {field.value ? (\n                        <p className=\"flex flex-1 min-w-0 text-start items-center gap-2\">{options?.find(({ value }) => value === field.value)?.label}</p>\n                      ) : (\n                        <p className=\"text-text-positive-muted text-start flex-1\">{placeholder}</p>\n                      )}\n                      <ChevronDownIcon size={16} className=\"text-text-positive-weak shrink-0\" aria-hidden=\"true\" />\n                    </Button>\n                  </FormControl>\n                </PopoverTrigger>\n                <PopoverContent className=\"w-(--radix-popover-trigger-width) p-0\">\n                  <Command className=\"border-none\">\n                    <CommandInput placeholder={placeholder ?? 'Tìm kiếm'} />\n                    <CommandList>\n                      <CommandGroup className=\"max-h-40 overflow-y-auto\">\n                        {options?.map(({ value, label }) => (\n                          <CommandItem key={value} value={label} onSelect={() => field.onChange(value)}>\n                            {label}\n                          </CommandItem>\n                        ))}\n                      </CommandGroup>\n                      {onAddNewItem && (\n                        <>\n                          <CommandSeparator />\n                          <CommandGroup>\n                            <Button type=\"button\" variant=\"ghost\" className=\"w-full justify-start font-normal\">\n                              <PlusIcon size={14} className=\"-ms-2 opacity-60\" aria-hidden=\"true\" />\n                              Thêm mới\n                            </Button>\n                          </CommandGroup>\n                        </>\n                      )}\n                    </CommandList>\n                    <CommandEmpty>Không có kết quả</CommandEmpty>\n                  </Command>\n                </PopoverContent>\n              </Popover>\n            </div>\n          </FormItem>\n        );\n      }}\n    />\n  );\n};\n"],"mappings":"0iBAyBA,MAAa,GAAiE,CAC5E,OACA,QAAQ,WACR,cAAc,eACd,cACA,UACA,mBAGE,EAAA,EAAA,KAACA,EAAAA,EAAAA,CACO,OACN,QAAS,CAAE,YAEP,EAAA,EAAA,MAACC,EAAAA,EAAAA,CAAS,UAAU,oBAClB,EAAA,EAAA,KAACC,EAAAA,SAAAA,CAAS,KAAM,GAAS,EAAc,UAAY,mBACjD,EAAA,EAAA,MAACC,EAAAA,EAAAA,CAAAA,SAAAA,EACC,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAAA,SAAW,EAAA,CAAkB,CAC7B,CAAC,CAAC,IAAe,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAAA,SAAiB,EAAA,CAA8B,CAAA,CAAA,CACrD,EACN,EACX,EAAA,EAAA,KAAC,MAAA,CAAI,UAAU,uCACb,EAAA,EAAA,MAACC,EAAAA,EAAAA,CAAQ,MAAO,cACd,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAe,QAAA,aACd,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAAA,UACC,EAAA,EAAA,MAACC,EAAAA,EAAAA,CACC,KAAK,SACL,QAAQ,UACR,KAAK,WACL,MAAM,QACN,WAAA,EAAA,EAAA,IACE,qBACA,oDACA,kCACA,iBACA,kBACA,0BACA,uBACA,6CACA,8BACA,2CACA,sCACA,2BACA,8BACA,eACA,0BACA,kBACA,+BACD,WAEA,EAAM,OACL,EAAA,EAAA,KAAC,IAAA,CAAE,UAAU,6DAAqD,GAAS,MAAM,CAAE,WAAY,IAAU,EAAM,MAAM,EAAE,OAAU,EAEjI,EAAA,EAAA,KAAC,IAAA,CAAE,UAAU,sDAA8C,GAAgB,EAE7E,EAAA,EAAA,KAACC,EAAAA,gBAAAA,CAAgB,KAAM,GAAI,UAAU,mCAAmC,cAAY,QAAS,CAAA,EACtF,CAAA,CACG,EACC,EACjB,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAe,UAAU,kDACxB,EAAA,EAAA,MAACC,EAAAA,EAAAA,CAAQ,UAAU,yBACjB,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAa,YAAa,GAAe,WAAA,CAAc,EACxD,EAAA,EAAA,MAACC,EAAAA,EAAAA,CAAAA,SAAAA,EACC,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAa,UAAU,oCACrB,GAAS,KAAK,CAAE,QAAO,MAAA,MACtB,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAwB,MAAOC,EAAO,aAAgB,EAAM,SAAS,EAAM,UACzEA,GADe,EAEJ,CACd,EACW,CACd,IACC,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,EACE,EAAA,EAAA,KAACC,EAAAA,EAAAA,EAAAA,CAAmB,EACpB,EAAA,EAAA,KAACH,EAAAA,EAAAA,CAAAA,UACC,EAAA,EAAA,MAACN,EAAAA,EAAAA,CAAO,KAAK,SAAS,QAAQ,QAAQ,UAAU,8CAC9C,EAAA,EAAA,KAACU,EAAAA,SAAAA,CAAS,KAAM,GAAI,UAAU,mBAAmB,cAAY,QAAS,CAAA,WAAA,EAE/D,CAAA,CACI,CAAA,CAAA,CACd,CAAA,CAAA,CAEO,EACd,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAAA,SAAa,mBAAA,CAA+B,GACrC,EACK,CAAA,EACT,EACN,CAAA,EACG,EAGf"}
+{"version":3,"file":"combobox-field.cjs","names":["FormField","FormItem","Activity","FieldContent","FormLabel","FormDescription","Popover","PopoverTrigger","FormControl","Button","ChevronDownIcon","PopoverContent","Command","CommandInput","CommandList","CommandGroup","CommandItem","label","CommandSeparator","PlusIcon","CommandEmpty"],"sources":["../../packages/components/forms/combobox-field.tsx"],"sourcesContent":["'use client';\nimport { Activity } from 'react';\nimport type { FieldPath, FieldValues } from 'react-hook-form';\n\nimport { ChevronDownIcon, PlusIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from '@/components/ui/command';\nimport { FormControl, FormDescription, FormField, FormItem, FormLabel } from '@/components/ui/form';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';\nimport { FieldContent } from '../ui/field';\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  name: FieldPath<TFieldValues>;\n  label?: string;\n  placeholder?: string;\n  options?: { value: string | number; label: string }[];\n  isShowErrorMsg?: boolean;\n  modal?: boolean;\n  description?: string;\n  onAddNewItem?: () => void;\n};\n\nexport const ComboboxField = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  label = 'Combobox',\n  placeholder = 'Chọn một mục',\n  description,\n  options,\n  onAddNewItem,\n}: Props<TFieldValues>) => {\n  return (\n    <FormField\n      name={name}\n      render={({ field }) => {\n        return (\n          <FormItem className=\"w-full\">\n            <Activity mode={label || description ? 'visible' : 'hidden'}>\n              <FieldContent>\n                <FormLabel>{label}</FormLabel>\n                {!!description && <FormDescription>{description}</FormDescription>}\n              </FieldContent>\n            </Activity>\n            <div className=\"basis-3/5 flex justify-end\">\n              <Popover modal={true}>\n                <PopoverTrigger asChild>\n                  <FormControl>\n                    <Button\n                      type=\"button\"\n                      variant=\"outline\"\n                      role=\"combobox\"\n                      color=\"muted\"\n                      className={cn(\n                        'w-full md:max-w-80',\n                        'shadow-input flex justify-between rounded-md px-3',\n                        'outline-border-weak font-normal',\n                        '[&_div]:w-full',\n                        '[&_span]:w-full',\n                        '[&_div]:justify-between',\n                        'hover:outline-border',\n                        'data-[state=open]:text-text-positive-muted',\n                        'data-[state=open]:outline-1',\n                        'data-[state=open]:outline-primary-strong',\n                        'data-[state=open]:ring-primary-weak',\n                        'data-[state=open]:ring-4',\n                        'focus:border-primary-strong',\n                        'focus:ring-4',\n                        'focus:ring-primary-weak',\n                        'focus:outline-1',\n                        'focus:outline-primary-strong'\n                      )}\n                    >\n                      {field.value ? (\n                        <p className=\"flex flex-1 min-w-0 text-start items-center gap-2\">{options?.find(({ value }) => value === field.value)?.label}</p>\n                      ) : (\n                        <p className=\"text-text-positive-muted text-start flex-1\">{placeholder}</p>\n                      )}\n                      <ChevronDownIcon size={16} className=\"text-text-positive-weak shrink-0\" aria-hidden=\"true\" />\n                    </Button>\n                  </FormControl>\n                </PopoverTrigger>\n                <PopoverContent className=\"w-(--radix-popover-trigger-width) p-0\">\n                  <Command className=\"border-none\">\n                    <CommandInput placeholder={placeholder ?? 'Tìm kiếm'} />\n                    <CommandList>\n                      <CommandGroup className=\"max-h-40 overflow-y-auto\">\n                        {options?.map(({ value, label }) => (\n                          <CommandItem key={value} value={label} onSelect={() => field.onChange(value)}>\n                            {label}\n                          </CommandItem>\n                        ))}\n                      </CommandGroup>\n                      {onAddNewItem && (\n                        <>\n                          <CommandSeparator />\n                          <CommandGroup>\n                            <Button type=\"button\" variant=\"ghost\" className=\"w-full justify-start font-normal\">\n                              <PlusIcon size={14} className=\"-ms-2 opacity-60\" aria-hidden=\"true\" />\n                              Thêm mới\n                            </Button>\n                          </CommandGroup>\n                        </>\n                      )}\n                    </CommandList>\n                    <CommandEmpty>Không có kết quả</CommandEmpty>\n                  </Command>\n                </PopoverContent>\n              </Popover>\n            </div>\n          </FormItem>\n        );\n      }}\n    />\n  );\n};\n"],"mappings":"ogBAyBA,MAAa,GAAiE,CAC5E,OACA,QAAQ,WACR,cAAc,eACd,cACA,UACA,mBAGE,EAAA,EAAA,KAACA,EAAAA,EAAAA,CACO,OACN,QAAS,CAAE,YAEP,EAAA,EAAA,MAACC,EAAAA,EAAAA,CAAS,UAAU,oBAClB,EAAA,EAAA,KAACC,EAAAA,SAAAA,CAAS,KAAM,GAAS,EAAc,UAAY,mBACjD,EAAA,EAAA,MAACC,EAAAA,EAAAA,CAAAA,SAAAA,EACC,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAAA,SAAW,EAAA,CAAkB,CAC7B,CAAC,CAAC,IAAe,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAAA,SAAiB,EAAA,CAA8B,CAAA,CAAA,CACrD,EACN,EACX,EAAA,EAAA,KAAC,MAAA,CAAI,UAAU,uCACb,EAAA,EAAA,MAACC,EAAAA,EAAAA,CAAQ,MAAO,cACd,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAe,QAAA,aACd,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAAA,UACC,EAAA,EAAA,MAACC,EAAAA,EAAAA,CACC,KAAK,SACL,QAAQ,UACR,KAAK,WACL,MAAM,QACN,WAAA,EAAA,EAAA,IACE,qBACA,oDACA,kCACA,iBACA,kBACA,0BACA,uBACA,6CACA,8BACA,2CACA,sCACA,2BACA,8BACA,eACA,0BACA,kBACA,+BACD,WAEA,EAAM,OACL,EAAA,EAAA,KAAC,IAAA,CAAE,UAAU,6DAAqD,GAAS,MAAM,CAAE,WAAY,IAAU,EAAM,MAAM,EAAE,OAAU,EAEjI,EAAA,EAAA,KAAC,IAAA,CAAE,UAAU,sDAA8C,GAAgB,EAE7E,EAAA,EAAA,KAACC,EAAAA,gBAAAA,CAAgB,KAAM,GAAI,UAAU,mCAAmC,cAAY,QAAS,CAAA,EACtF,CAAA,CACG,EACC,EACjB,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAe,UAAU,kDACxB,EAAA,EAAA,MAACC,EAAAA,EAAAA,CAAQ,UAAU,yBACjB,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAa,YAAa,GAAe,WAAA,CAAc,EACxD,EAAA,EAAA,MAACC,EAAAA,EAAAA,CAAAA,SAAAA,EACC,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAa,UAAU,oCACrB,GAAS,KAAK,CAAE,QAAO,MAAA,MACtB,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAwB,MAAOC,EAAO,aAAgB,EAAM,SAAS,EAAM,UACzEA,GADe,EAEJ,CACd,EACW,CACd,IACC,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,EACE,EAAA,EAAA,KAACC,EAAAA,EAAAA,EAAAA,CAAmB,EACpB,EAAA,EAAA,KAACH,EAAAA,EAAAA,CAAAA,UACC,EAAA,EAAA,MAACN,EAAAA,EAAAA,CAAO,KAAK,SAAS,QAAQ,QAAQ,UAAU,8CAC9C,EAAA,EAAA,KAACU,EAAAA,SAAAA,CAAS,KAAM,GAAI,UAAU,mBAAmB,cAAY,QAAS,CAAA,WAAA,EAE/D,CAAA,CACI,CAAA,CAAA,CACd,CAAA,CAAA,CAEO,EACd,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAAA,SAAa,mBAAA,CAA+B,GACrC,EACK,CAAA,EACT,EACN,CAAA,EACG,EAGf"}

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

@@ -0,0 +1,28 @@
+import * as react_jsx_runtime285 from "react/jsx-runtime";
+import { FieldPath, FieldValues } from "react-hook-form";
+
+//#region packages/components/forms/combobox-field.d.ts
+type Props<TFieldValues extends FieldValues = FieldValues> = {
+  name: FieldPath<TFieldValues>;
+  label?: string;
+  placeholder?: string;
+  options?: {
+    value: string | number;
+    label: string;
+  }[];
+  isShowErrorMsg?: boolean;
+  modal?: boolean;
+  description?: string;
+  onAddNewItem?: () => void;
+};
+declare const ComboboxField: <TFieldValues extends FieldValues = FieldValues>({
+  name,
+  label,
+  placeholder,
+  description,
+  options,
+  onAddNewItem
+}: Props<TFieldValues>) => react_jsx_runtime285.JSX.Element;
+//#endregion
+export { ComboboxField };
+//# sourceMappingURL=combobox-field.d.cts.map

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

@@ -0,0 +1,28 @@
+import * as react_jsx_runtime297 from "react/jsx-runtime";
+import { FieldPath, FieldValues } from "react-hook-form";
+
+//#region packages/components/forms/combobox-field.d.ts
+type Props<TFieldValues extends FieldValues = FieldValues> = {
+  name: FieldPath<TFieldValues>;
+  label?: string;
+  placeholder?: string;
+  options?: {
+    value: string | number;
+    label: string;
+  }[];
+  isShowErrorMsg?: boolean;
+  modal?: boolean;
+  description?: string;
+  onAddNewItem?: () => void;
+};
+declare const ComboboxField: <TFieldValues extends FieldValues = FieldValues>({
+  name,
+  label,
+  placeholder,
+  description,
+  options,
+  onAddNewItem
+}: Props<TFieldValues>) => react_jsx_runtime297.JSX.Element;
+//#endregion
+export { ComboboxField };
+//# sourceMappingURL=combobox-field.d.mts.map

package/dist/forms/combobox-field.mjs

@@ -0,0 +1,2 @@
+"use client";import"../button.variants-CBzlxtwI.mjs";import{t as e}from"../button-CRqVuIHJ.mjs";import"../dialog-BReokNfo.mjs";import"../separator-D1hK3QAo.mjs";import"../label-C6OaewtP.mjs";import{n as t}from"../field-COna_98h.mjs";import{a as n,i as r,n as i,o as a,r as o}from"../form-Bob0j0XE.mjs";import{a as s,c,i as l,o as u,r as d,s as f,t as p}from"../command-DjfS4EEz.mjs";import{i as m,r as h,t as g}from"../popover-BnPG7N8P.mjs";import{cn as _}from"@customafk/react-toolkit/utils";import{Fragment as v,jsx as y,jsxs as b}from"react/jsx-runtime";import{ChevronDownIcon as x,PlusIcon as S}from"lucide-react";import{Activity as C}from"react";const w=({name:w,label:T=`Combobox`,placeholder:E=`Chọn một mục`,description:D,options:O,onAddNewItem:k})=>y(r,{name:w,render:({field:r})=>b(n,{className:`w-full`,children:[y(C,{mode:T||D?`visible`:`hidden`,children:b(t,{children:[y(a,{children:T}),!!D&&y(o,{children:D})]})}),y(`div`,{className:`basis-3/5 flex justify-end`,children:b(g,{modal:!0,children:[y(m,{asChild:!0,children:y(i,{children:b(e,{type:`button`,variant:`outline`,role:`combobox`,color:`muted`,className:_(`w-full md:max-w-80`,`shadow-input flex justify-between rounded-md px-3`,`outline-border-weak font-normal`,`[&_div]:w-full`,`[&_span]: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?y(`p`,{className:`flex flex-1 min-w-0 text-start items-center gap-2`,children:O?.find(({value:e})=>e===r.value)?.label}):y(`p`,{className:`text-text-positive-muted text-start flex-1`,children:E}),y(x,{size:16,className:`text-text-positive-weak shrink-0`,"aria-hidden":`true`})]})})}),y(h,{className:`w-(--radix-popover-trigger-width) p-0`,children:b(p,{className:`border-none`,children:[y(s,{placeholder:E??`Tìm kiếm`}),b(f,{children:[y(l,{className:`max-h-40 overflow-y-auto`,children:O?.map(({value:e,label:t})=>y(u,{value:t,onSelect:()=>r.onChange(e),children:t},e))}),k&&b(v,{children:[y(c,{}),y(l,{children:b(e,{type:`button`,variant:`ghost`,className:`w-full justify-start font-normal`,children:[y(S,{size:14,className:`-ms-2 opacity-60`,"aria-hidden":`true`}),`Thêm mới`]})})]})]}),y(d,{children:`Không có kết quả`})]})})]})})]})});export{w as ComboboxField};
+//# sourceMappingURL=combobox-field.mjs.map

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

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

package/dist/forms/date-field.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require(`../chunk-Bmb41Sf3.cjs`);require(`../dist-Dh8WwRa8.cjs`),require(`../button.variants-D1vkzrn1.cjs`);const t=require(`../button-BSQjtXgG.cjs`);require(`../label-D2Kl-Q_-.cjs`),require(`../separator-D3CGKwyf.cjs`);const n=require(`../field-Cjpwx_6d.cjs`),r=require(`../form-D1gfOYhk.cjs`),i=require(`../popover-Bn3M2SCp.cjs`),a=require(`../calendar-C24Sq5nU.cjs`);let o=require(`lucide-react`),s=require(`react`),c=require(`@customafk/react-toolkit/utils`),l=require(`react/jsx-runtime`),u=require(`@customafk/react-toolkit/date-fns`);const d=({name:e,label:d=`Date Field`,placeholder:f=`Select a date`,description:p=``,isShowErrorMsg:m=!1})=>(0,l.jsx)(r.i,{name:e,render:({field:e})=>(0,l.jsxs)(r.a,{children:[(0,l.jsx)(s.Activity,{mode:d||p?`visible`:`hidden`,children:(0,l.jsxs)(n.n,{children:[(0,l.jsx)(r.o,{children:d}),!!p&&(0,l.jsx)(r.r,{children:p})]})}),(0,l.jsxs)(i.t,{modal:!0,children:[(0,l.jsx)(i.i,{asChild:!0,children:(0,l.jsx)(r.n,{children:(0,l.jsxs)(t.t,{variant:`outline`,color:`muted`,className:(0,c.cn)(`w-full pl-3 text-left font-normal`,`outline-border-weak font-normal`,`hover:outline-border`,`data-[state=open]:text-text-positive-muted`,`data-[state=open]:outline-1`,`data-[state=open]:outline-primary-strong`,`data-[state=open]:ring-primary-weak`,`data-[state=open]:ring-4`,`focus:border-primary-strong`,`focus:ring-4`,`focus:ring-primary-weak`,`focus:outline-1`,`focus:outline-primary-strong`,!e.value&&`text-text-positive-muted`),children:[e.value?(0,u.format)(e.value,`PPP`):(0,l.jsxs)(`span`,{children:[` `,f||`Pick a date`]}),(0,l.jsx)(o.CalendarIcon,{className:`text-text-positive-weak ml-auto size-4`})]})})}),(0,l.jsx)(i.r,{className:`w-auto p-0`,align:`start`,children:(0,l.jsx)(a.t,{mode:`single`,selected:e.value,onSelect:t=>{e.onChange(t?.toISOString())},captionLayout:`dropdown`,disabled:e=>e<new Date(`2022-01-01`)})})]}),m&&(0,l.jsx)(r.s,{})]})});exports.DateField=d;
+"use client";const e=require(`../chunk-Bmb41Sf3.cjs`);require(`../button.variants-C--cfyfH.cjs`);const t=require(`../button-DtFiUaY7.cjs`);require(`../separator-CBup_ah1.cjs`),require(`../label-C6_Tplyy.cjs`);const n=require(`../field-D8lireRm.cjs`),r=require(`../form-DrtMcMJp.cjs`),i=require(`../popover-stNXNDSM.cjs`),a=require(`../calendar-qj71HPnr.cjs`);let o=require(`@customafk/react-toolkit/utils`),s=require(`react/jsx-runtime`),c=require(`lucide-react`),l=require(`react`),u=require(`@customafk/react-toolkit/date-fns`);const d=({name:e,label:d=`Date Field`,placeholder:f=`Select a date`,description:p=``,isShowErrorMsg:m=!1})=>(0,s.jsx)(r.i,{name:e,render:({field:e})=>(0,s.jsxs)(r.a,{children:[(0,s.jsx)(l.Activity,{mode:d||p?`visible`:`hidden`,children:(0,s.jsxs)(n.n,{children:[(0,s.jsx)(r.o,{children:d}),!!p&&(0,s.jsx)(r.r,{children:p})]})}),(0,s.jsxs)(i.t,{modal:!0,children:[(0,s.jsx)(i.i,{asChild:!0,children:(0,s.jsx)(r.n,{children:(0,s.jsxs)(t.t,{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,u.format)(e.value,`PPP`):(0,s.jsxs)(`span`,{children:[` `,f||`Pick a date`]}),(0,s.jsx)(c.CalendarIcon,{className:`text-text-positive-weak ml-auto size-4`})]})})}),(0,s.jsx)(i.r,{className:`w-auto p-0`,align:`start`,children:(0,s.jsx)(a.t,{mode:`single`,selected:e.value,onSelect:t=>{e.onChange(t?.toISOString())},captionLayout:`dropdown`,disabled:e=>e<new Date(`2022-01-01`)})})]}),m&&(0,s.jsx)(r.s,{})]})});exports.DateField=d;
 //# sourceMappingURL=date-field.cjs.map

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

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

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

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

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

@@ -0,0 +1,22 @@
+import * as react_jsx_runtime2 from "react/jsx-runtime";
+import { FieldPath, FieldValues } from "react-hook-form";
+
+//#region packages/components/forms/date-field.d.ts
+type Props<TFieldValues extends FieldValues = FieldValues> = {
+  name: FieldPath<TFieldValues>;
+  label?: string;
+  placeholder?: string;
+  description?: string;
+  isShowErrorMsg?: boolean;
+  modal?: boolean;
+};
+declare const DateField: <TFieldValues extends FieldValues = FieldValues>({
+  name,
+  label,
+  placeholder,
+  description,
+  isShowErrorMsg
+}: Props<TFieldValues>) => react_jsx_runtime2.JSX.Element;
+//#endregion
+export { DateField };
+//# sourceMappingURL=date-field.d.mts.map

package/dist/forms/date-field.mjs

@@ -0,0 +1,2 @@
+"use client";import"../button.variants-CBzlxtwI.mjs";import{t as e}from"../button-CRqVuIHJ.mjs";import"../separator-D1hK3QAo.mjs";import"../label-C6OaewtP.mjs";import{n as t}from"../field-COna_98h.mjs";import{a as n,i as r,n as i,o as a,r as o,s}from"../form-Bob0j0XE.mjs";import{i as c,r as l,t as u}from"../popover-BnPG7N8P.mjs";import{t as d}from"../calendar-D0BudwCq.mjs";import{cn as f}from"@customafk/react-toolkit/utils";import{jsx as p,jsxs as m}from"react/jsx-runtime";import{CalendarIcon as h}from"lucide-react";import{Activity as g}from"react";import{format as _}from"@customafk/react-toolkit/date-fns";const v=({name:v,label:y=`Date Field`,placeholder:b=`Select a date`,description:x=``,isShowErrorMsg:S=!1})=>p(r,{name:v,render:({field:r})=>m(n,{children:[p(g,{mode:y||x?`visible`:`hidden`,children:m(t,{children:[p(a,{children:y}),!!x&&p(o,{children:x})]})}),m(u,{modal:!0,children:[p(c,{asChild:!0,children:p(i,{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?_(r.value,`PPP`):m(`span`,{children:[` `,b||`Pick a date`]}),p(h,{className:`text-text-positive-weak ml-auto size-4`})]})})}),p(l,{className:`w-auto p-0`,align:`start`,children:p(d,{mode:`single`,selected:r.value,onSelect:e=>{r.onChange(e?.toISOString())},captionLayout:`dropdown`,disabled:e=>e<new Date(`2022-01-01`)})})]}),S&&p(s,{})]})});export{v as DateField};
+//# sourceMappingURL=date-field.mjs.map

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

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

package/dist/forms/form-wrapper.cjs

@@ -1 +1,2 @@
-require(`../button.variants-D1vkzrn1.cjs`),require(`../alert-dialog-BlGvvaB2.cjs`),require(`../error-dialog-BHrA5oTT.cjs`),require(`../label-D2Kl-Q_-.cjs`),require(`../separator-D3CGKwyf.cjs`),require(`../field-Cjpwx_6d.cjs`),require(`../form-D1gfOYhk.cjs`);const e=require(`../form-wrapper-CcH5-e90.cjs`);exports.FormWrapper=e.t;
+const e=require(`../chunk-Bmb41Sf3.cjs`);require(`../button.variants-C--cfyfH.cjs`),require(`../separator-CBup_ah1.cjs`),require(`../alert-dialog-BabEdvPq.cjs`);const t=require(`../error-dialog-BD16H0UC.cjs`);require(`../label-C6_Tplyy.cjs`);const n=require(`../field-D8lireRm.cjs`),r=require(`../form-DrtMcMJp.cjs`);let i=require(`react/jsx-runtime`),a=require(`lucide-react`),o=require(`react`),s=require(`@hookform/error-message`),c=require(`react-hook-form`);const l=({form:e,isResetAfterSubmit:l=!0,title:u,description:d,className:f,onSubmit:p,onError:m,onSubcribe:h,children:g})=>{let _=(0,c.useForm)({...e,criteriaMode:`all`}),{formState:v,reset:y,handleSubmit:b,subscribe:x}=_,{dirtyFields:S}=v,[C,w]=(0,o.useState)(!1),T=(0,o.useCallback)(e=>{p(e,v,S),l&&y()},[S,v,l,p,y]),E=(0,o.useCallback)(e=>{Object.keys(e).length!==0&&(m?.(e),w(!0))},[m]);return(0,o.useEffect)(()=>{if(!h)return;let e=x({formState:{values:!0},callback:({values:e})=>{h(e)}});return()=>e()},[h,x]),(0,i.jsxs)(r.t,{..._,children:[(0,i.jsx)(`form`,{className:f,onSubmit:b(T,E),children:(0,i.jsxs)(n.l,{children:[(0,i.jsxs)(o.Activity,{mode:u||d?`visible`:`hidden`,children:[(0,i.jsx)(n.s,{children:u}),(0,i.jsx)(n.r,{children:d}),(0,i.jsx)(n.c,{})]}),(0,i.jsx)(n.a,{children:g})]})}),(0,i.jsx)(t.t,{open:C,title:`Lỗi nhập dữ liệu`,description:`An unexpected error has occurred. Please check the errors below and try again.`,onOpenChange:w,children:C&&(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(o.Activity,{mode:Object.keys(v.errors).length>0?`visible`:`hidden`,children:(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(v.errors).map(([e])=>(0,i.jsx)(s.ErrorMessage,{errors:v.errors,name:e,render:({messages:e})=>e?(0,i.jsx)(i.Fragment,{children: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)(a.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)(o.Activity,{mode:Object.keys(v.errors).length===0?`visible`:`hidden`,children:(0,i.jsx)(`p`,{className:`text-muted-foreground text-sm`,children:`No errors found.`})})]})})]})};exports.FormWrapper=l;
+//# sourceMappingURL=form-wrapper.cjs.map

package/dist/forms/form-wrapper.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-wrapper.cjs","names":["Form","FieldSet","Activity","FieldLegend","FieldDescription","FieldSeparator","FieldGroup","ErrorDialog","ErrorMessage","AlertCircleIcon"],"sources":["../../packages/components/forms/form-wrapper.tsx"],"sourcesContent":["import { ErrorMessage } from '@hookform/error-message';\nimport { AlertCircleIcon } from 'lucide-react';\nimport { Activity, useCallback, useEffect, useState } from 'react';\nimport { type FieldValues, type FormState, type SubmitErrorHandler, type SubmitHandler, type UseFormProps, useForm } from 'react-hook-form';\nimport type { AnyEntity } from '@/types';\nimport { ErrorDialog } from '../dialogs/error-dialog';\nimport { FieldDescription, FieldGroup, FieldLegend, FieldSeparator, FieldSet } from '../ui/field';\nimport { Form } from '../ui/form';\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  form: UseFormProps<TFieldValues>;\n  isResetAfterSubmit?: boolean;\n  title?: string;\n  description?: string;\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  title,\n  description,\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        <FieldSet>\n          <Activity mode={title || description ? 'visible' : 'hidden'}>\n            <FieldLegend>{title}</FieldLegend>\n            <FieldDescription>{description}</FieldDescription>\n            <FieldSeparator />\n          </Activity>\n          <FieldGroup>{children}</FieldGroup>\n        </FieldSet>\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            <Activity mode={Object.keys(formState.errors).length > 0 ? 'visible' : 'hidden'}>\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                        if (!messages) return null;\n                        return (\n                          <>\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                          </>\n                        );\n                      }}\n                    />\n                  ))}\n                </div>\n              </div>\n            </Activity>\n            <Activity mode={Object.keys(formState.errors).length === 0 ? 'visible' : 'hidden'}>\n              <p className=\"text-muted-foreground text-sm\">No errors found.</p>\n            </Activity>\n          </>\n        )}\n      </ErrorDialog>\n    </Form>\n  );\n};\n"],"mappings":"+cAoBA,MAAa,GAA+D,CAC1E,KAAM,EACN,qBAAqB,GACrB,QACA,cACA,YACA,WACA,UACA,aACA,cACkD,CAClD,IAAM,GAAA,EAAA,EAAA,SAAe,CACnB,GAAG,EACH,aAAc,MACf,CAAC,CAEI,CAAE,YAAW,QAAO,eAAc,aAAc,EAChD,CAAE,eAAgB,EAElB,CAAC,EAAW,IAAA,EAAA,EAAA,UAAkC,GAAM,CAEpD,GAAA,EAAA,EAAA,aACJ,GAAQ,CACN,EAAS,EAAM,EAAW,EAAY,CAClC,GACF,GAAO,EAGX,CAAC,EAAa,EAAW,EAAoB,EAAU,EAAM,CAC9D,CAEK,GAAA,EAAA,EAAA,aACJ,GAAU,CACU,OAAO,KAAK,EAAO,CACvB,SAAW,IACzB,IAAU,EAAO,CACjB,EAAa,GAAK,GAEpB,CAAC,EAAQ,CACV,CAaD,OAXA,EAAA,EAAA,eAAgB,CACd,GAAI,CAAC,EAAY,OACjB,IAAM,EAAW,EAAU,CACzB,UAAW,CAAE,OAAQ,GAAM,CAC3B,UAAW,CAAE,YAAa,CACxB,EAAW,EAAO,EAErB,CAAC,CACF,UAAa,GAAU,EACtB,CAAC,EAAY,EAAU,CAAC,EAGzB,EAAA,EAAA,MAACA,EAAAA,EAAAA,CAAK,GAAI,aACR,EAAA,EAAA,KAAC,OAAA,CAAgB,YAAW,SAAU,EAAa,EAAkB,EAAgB,WACnF,EAAA,EAAA,MAACC,EAAAA,EAAAA,CAAAA,SAAAA,EACC,EAAA,EAAA,MAACC,EAAAA,SAAAA,CAAS,KAAM,GAAS,EAAc,UAAY,oBACjD,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAAA,SAAa,EAAA,CAAoB,EAClC,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAAA,SAAkB,EAAA,CAA+B,EAClD,EAAA,EAAA,KAACC,EAAAA,EAAAA,EAAAA,CAAiB,GACT,EACX,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAY,WAAA,CAAsB,CAAA,CAAA,CAC1B,EACN,EACP,EAAA,EAAA,KAACC,EAAAA,EAAAA,CACC,KAAM,EACN,MAAM,mBACN,YAAY,iFACZ,aAAc,WAEb,IACC,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,EACE,EAAA,EAAA,KAACL,EAAAA,SAAAA,CAAS,KAAM,OAAO,KAAK,EAAU,OAAO,CAAC,OAAS,EAAI,UAAY,mBACrE,EAAA,EAAA,MAAC,MAAA,CAAI,UAAU,gDACb,EAAA,EAAA,KAAC,IAAA,CAAE,UAAU,uDAA8C,4CAA4C,EACvG,EAAA,EAAA,KAAC,MAAA,CAAI,UAAU,mCACZ,OAAO,QAAQ,EAAU,OAAO,CAAC,KAAK,CAAC,MACtC,EAAA,EAAA,KAACM,EAAAA,aAAAA,CAEC,OAAQ,EAAU,OAClB,KAAM,EACN,QAAS,CAAE,cACJ,GAEH,EAAA,EAAA,KAAA,EAAA,SAAA,CAAA,SACG,OAAO,QAAQ,EAAS,CAAC,KAAK,CAAC,EAAM,MAElC,EAAA,EAAA,MAAC,MAAA,CAAe,UAAU,0FACxB,EAAA,EAAA,KAACC,EAAAA,gBAAAA,CAAgB,KAAM,GAAI,UAAU,0CAA2C,EAChF,EAAA,EAAA,KAAC,IAAA,CAAE,UAAU,yCAAiC,GAAY,CAAA,EAFlD,EAGJ,CAER,CAAA,CACD,CAXiB,MAJnB,EAkBL,CACF,EACE,CAAA,EACF,EACG,EACX,EAAA,EAAA,KAACP,EAAAA,SAAAA,CAAS,KAAM,OAAO,KAAK,EAAU,OAAO,CAAC,SAAW,EAAI,UAAY,mBACvE,EAAA,EAAA,KAAC,IAAA,CAAE,UAAU,yCAAgC,oBAAoB,EACxD,CAAA,CAAA,CACV,EAEO,CAAA,EACT"}

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

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

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

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

package/dist/forms/form-wrapper.mjs

@@ -0,0 +1,2 @@
+import"../button.variants-CBzlxtwI.mjs";import"../separator-D1hK3QAo.mjs";import"../alert-dialog-eXJTuREH.mjs";import{t as e}from"../error-dialog-CRlE3Hp9.mjs";import"../label-C6OaewtP.mjs";import{a as t,c as n,l as r,r as i,s as a}from"../field-COna_98h.mjs";import{t as o}from"../form-Bob0j0XE.mjs";import{Fragment as s,jsx as c,jsxs as l}from"react/jsx-runtime";import{AlertCircleIcon as u}from"lucide-react";import{Activity as d,useCallback as f,useEffect as p,useState as m}from"react";import{ErrorMessage as h}from"@hookform/error-message";import{useForm as g}from"react-hook-form";const _=({form:_,isResetAfterSubmit:v=!0,title:y,description:b,className:x,onSubmit:S,onError:C,onSubcribe:w,children:T})=>{let E=g({..._,criteriaMode:`all`}),{formState:D,reset:O,handleSubmit:k,subscribe:A}=E,{dirtyFields:j}=D,[M,N]=m(!1),P=f(e=>{S(e,D,j),v&&O()},[j,D,v,S,O]),F=f(e=>{Object.keys(e).length!==0&&(C?.(e),N(!0))},[C]);return p(()=>{if(!w)return;let e=A({formState:{values:!0},callback:({values:e})=>{w(e)}});return()=>e()},[w,A]),l(o,{...E,children:[c(`form`,{className:x,onSubmit:k(P,F),children:l(r,{children:[l(d,{mode:y||b?`visible`:`hidden`,children:[c(a,{children:y}),c(i,{children:b}),c(n,{})]}),c(t,{children:T})]})}),c(e,{open:M,title:`Lỗi nhập dữ liệu`,description:`An unexpected error has occurred. Please check the errors below and try again.`,onOpenChange:N,children:M&&l(s,{children:[c(d,{mode:Object.keys(D.errors).length>0?`visible`:`hidden`,children:l(`div`,{className:`flex max-w-100 flex-col gap-2 px-4`,children:[c(`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:`}),c(`div`,{className:`flex flex-col space-y-1`,children:Object.entries(D.errors).map(([e])=>c(h,{errors:D.errors,name:e,render:({messages:e})=>e?c(s,{children:Object.entries(e).map(([e,t])=>l(`div`,{className:`text-accent-foreground flex items-start gap-x-1 truncate text-sm font-normal`,children:[c(u,{size:16,className:`text-destructive mt-0.5 min-w-4 flex-0`}),c(`p`,{className:`line-clamp-2 flex-1 text-wrap`,children:t})]},e))}):null},e))})]})}),c(d,{mode:Object.keys(D.errors).length===0?`visible`:`hidden`,children:c(`p`,{className:`text-muted-foreground text-sm`,children:`No errors found.`})})]})})]})};export{_ as FormWrapper};
+//# sourceMappingURL=form-wrapper.mjs.map

package/dist/forms/form-wrapper.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-wrapper.mjs","names":[],"sources":["../../packages/components/forms/form-wrapper.tsx"],"sourcesContent":["import { ErrorMessage } from '@hookform/error-message';\nimport { AlertCircleIcon } from 'lucide-react';\nimport { Activity, useCallback, useEffect, useState } from 'react';\nimport { type FieldValues, type FormState, type SubmitErrorHandler, type SubmitHandler, type UseFormProps, useForm } from 'react-hook-form';\nimport type { AnyEntity } from '@/types';\nimport { ErrorDialog } from '../dialogs/error-dialog';\nimport { FieldDescription, FieldGroup, FieldLegend, FieldSeparator, FieldSet } from '../ui/field';\nimport { Form } from '../ui/form';\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  form: UseFormProps<TFieldValues>;\n  isResetAfterSubmit?: boolean;\n  title?: string;\n  description?: string;\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  title,\n  description,\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        <FieldSet>\n          <Activity mode={title || description ? 'visible' : 'hidden'}>\n            <FieldLegend>{title}</FieldLegend>\n            <FieldDescription>{description}</FieldDescription>\n            <FieldSeparator />\n          </Activity>\n          <FieldGroup>{children}</FieldGroup>\n        </FieldSet>\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            <Activity mode={Object.keys(formState.errors).length > 0 ? 'visible' : 'hidden'}>\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                        if (!messages) return null;\n                        return (\n                          <>\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                          </>\n                        );\n                      }}\n                    />\n                  ))}\n                </div>\n              </div>\n            </Activity>\n            <Activity mode={Object.keys(formState.errors).length === 0 ? 'visible' : 'hidden'}>\n              <p className=\"text-muted-foreground text-sm\">No errors found.</p>\n            </Activity>\n          </>\n        )}\n      </ErrorDialog>\n    </Form>\n  );\n};\n"],"mappings":"4kBAoBA,MAAa,GAA+D,CAC1E,KAAM,EACN,qBAAqB,GACrB,QACA,cACA,YACA,WACA,UACA,aACA,cACkD,CAClD,IAAM,EAAO,EAAQ,CACnB,GAAG,EACH,aAAc,MACf,CAAC,CAEI,CAAE,YAAW,QAAO,eAAc,aAAc,EAChD,CAAE,eAAgB,EAElB,CAAC,EAAW,GAAgB,EAAkB,GAAM,CAEpD,EAAmB,EACvB,GAAQ,CACN,EAAS,EAAM,EAAW,EAAY,CAClC,GACF,GAAO,EAGX,CAAC,EAAa,EAAW,EAAoB,EAAU,EAAM,CAC9D,CAEK,EAAkB,EACtB,GAAU,CACU,OAAO,KAAK,EAAO,CACvB,SAAW,IACzB,IAAU,EAAO,CACjB,EAAa,GAAK,GAEpB,CAAC,EAAQ,CACV,CAaD,OAXA,MAAgB,CACd,GAAI,CAAC,EAAY,OACjB,IAAM,EAAW,EAAU,CACzB,UAAW,CAAE,OAAQ,GAAM,CAC3B,UAAW,CAAE,YAAa,CACxB,EAAW,EAAO,EAErB,CAAC,CACF,UAAa,GAAU,EACtB,CAAC,EAAY,EAAU,CAAC,CAGzB,EAAC,EAAA,CAAK,GAAI,YACR,EAAC,OAAA,CAAgB,YAAW,SAAU,EAAa,EAAkB,EAAgB,UACnF,EAAC,EAAA,CAAA,SAAA,CACC,EAAC,EAAA,CAAS,KAAM,GAAS,EAAc,UAAY,mBACjD,EAAC,EAAA,CAAA,SAAa,EAAA,CAAoB,CAClC,EAAC,EAAA,CAAA,SAAkB,EAAA,CAA+B,CAClD,EAAC,EAAA,EAAA,CAAiB,GACT,CACX,EAAC,EAAA,CAAY,WAAA,CAAsB,CAAA,CAAA,CAC1B,EACN,CACP,EAAC,EAAA,CACC,KAAM,EACN,MAAM,mBACN,YAAY,iFACZ,aAAc,WAEb,GACC,EAAA,EAAA,CAAA,SAAA,CACE,EAAC,EAAA,CAAS,KAAM,OAAO,KAAK,EAAU,OAAO,CAAC,OAAS,EAAI,UAAY,kBACrE,EAAC,MAAA,CAAI,UAAU,+CACb,EAAC,IAAA,CAAE,UAAU,uDAA8C,4CAA4C,CACvG,EAAC,MAAA,CAAI,UAAU,mCACZ,OAAO,QAAQ,EAAU,OAAO,CAAC,KAAK,CAAC,KACtC,EAAC,EAAA,CAEC,OAAQ,EAAU,OAClB,KAAM,EACN,QAAS,CAAE,cACJ,EAEH,EAAA,EAAA,CAAA,SACG,OAAO,QAAQ,EAAS,CAAC,KAAK,CAAC,EAAM,KAElC,EAAC,MAAA,CAAe,UAAU,yFACxB,EAAC,EAAA,CAAgB,KAAM,GAAI,UAAU,0CAA2C,CAChF,EAAC,IAAA,CAAE,UAAU,yCAAiC,GAAY,CAAA,EAFlD,EAGJ,CAER,CAAA,CACD,CAXiB,MAJnB,EAkBL,CACF,EACE,CAAA,EACF,EACG,CACX,EAAC,EAAA,CAAS,KAAM,OAAO,KAAK,EAAU,OAAO,CAAC,SAAW,EAAI,UAAY,kBACvE,EAAC,IAAA,CAAE,UAAU,yCAAgC,oBAAoB,EACxD,CAAA,CAAA,CACV,EAEO,CAAA,EACT"}

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

@@ -1,2 +1,2 @@
-"use client";const e=require(`../chunk-Bmb41Sf3.cjs`);require(`../dist-Dh8WwRa8.cjs`),require(`../button.variants-D1vkzrn1.cjs`),require(`../button-BSQjtXgG.cjs`),require(`../label-D2Kl-Q_-.cjs`),require(`../separator-D3CGKwyf.cjs`);const t=require(`../field-Cjpwx_6d.cjs`),n=require(`../form-D1gfOYhk.cjs`);require(`../dialog-BZSD5ydg.cjs`),require(`../command-B2WOEAng.cjs`);const r=require(`../multi-select-watyeXb-.cjs`);let i=require(`react`),a=require(`react/jsx-runtime`);const o=({name:e,label:o=`Multi Select Field`,isShowLabel:s=!0,isShowErrorMsg:c,placeholder:l=`Select options`,description:u=``,className:d=``,options:f=[],onAdd:p})=>(0,a.jsx)(n.i,{name:e,render:({field:{value:e,onChange:m}})=>{let h=f.filter(t=>e?.includes(t.value));return(0,a.jsxs)(n.a,{className:d,children:[(0,a.jsx)(i.Activity,{mode:o||u?`visible`:`hidden`,children:(0,a.jsxs)(t.n,{children:[s&&(0,a.jsx)(n.o,{children:o}),!!u&&(0,a.jsx)(n.r,{children:u})]})}),(0,a.jsxs)(`div`,{className:`basis-3/5 flex justify-end`,children:[(0,a.jsx)(n.n,{children:(0,a.jsx)(r.t,{placeholder:l,emptyIndicator:`No options available`,value:h,options:f,className:`w-full md:max-w-80`,onChange:e=>{m(e.map(e=>e.value))},onAddNewItem:p})}),c&&(0,a.jsx)(n.s,{})]})]})}});exports.MultiSelectField=o;
+"use client";const e=require(`../chunk-Bmb41Sf3.cjs`);require(`../button.variants-C--cfyfH.cjs`),require(`../button-DtFiUaY7.cjs`),require(`../dialog-VFBezutQ.cjs`),require(`../separator-CBup_ah1.cjs`),require(`../label-C6_Tplyy.cjs`);const t=require(`../field-D8lireRm.cjs`),n=require(`../form-DrtMcMJp.cjs`);require(`../command-p7dWcZcY.cjs`);const r=require(`../ui/multi-select.cjs`);let i=require(`react/jsx-runtime`),a=require(`react`);const o=({name:e,label:o=`Multi Select Field`,isShowLabel:s=!0,isShowErrorMsg:c,placeholder:l=`Select options`,description:u=``,className:d=``,options:f=[],onAdd:p})=>(0,i.jsx)(n.i,{name:e,render:({field:{value:e,onChange:m}})=>{let h=f.filter(t=>e?.includes(t.value));return(0,i.jsxs)(n.a,{className:d,children:[(0,i.jsx)(a.Activity,{mode:o||u?`visible`:`hidden`,children:(0,i.jsxs)(t.n,{children:[s&&(0,i.jsx)(n.o,{children:o}),!!u&&(0,i.jsx)(n.r,{children:u})]})}),(0,i.jsxs)(`div`,{className:`basis-3/5 flex justify-end`,children:[(0,i.jsx)(n.n,{children:(0,i.jsx)(r.MultipleSelector,{placeholder:l,emptyIndicator:`No options available`,value:h,options:f,className:`w-full md:max-w-80`,onChange:e=>{m(e.map(e=>e.value))},onAddNewItem:p})}),c&&(0,i.jsx)(n.s,{})]})]})}});exports.MultiSelectField=o;
 //# sourceMappingURL=multi-select-field.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"multi-select-field.cjs","names":["FormField","value","FormItem","Activity","FieldContent","FormLabel","FormDescription","FormControl","MultipleSelector","FormMessage"],"sources":["../../packages/components/forms/multi-select-field.tsx"],"sourcesContent":["'use client';\nimport { Activity } from 'react';\nimport type { FieldPath, FieldValues } from 'react-hook-form';\n\nimport { FieldContent } from '../ui/field';\nimport { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../ui/form';\nimport { MultipleSelector, type Option } from '../ui/multi-select';\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  name: FieldPath<TFieldValues>;\n  isShowLabel?: boolean;\n  isShowErrorMsg?: boolean;\n  className?: string;\n  label?: string;\n  description?: string;\n  placeholder?: string;\n  options?: { value: string; label: string }[];\n  onAdd?: () => void;\n};\nexport const MultiSelectField = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  label = 'Multi Select Field',\n  isShowLabel = true,\n  isShowErrorMsg,\n  placeholder = 'Select options',\n  description = '',\n  className = '',\n  options = [],\n  onAdd,\n}: Props<TFieldValues>) => {\n  return (\n    <FormField\n      name={name}\n      render={({ field: { value, onChange } }) => {\n        const val = options.filter(option => value?.includes(option.value));\n        const handleOnChange = (value: Option[]) => {\n          const selectedValues = value.map(v => v.value);\n          onChange(selectedValues);\n        };\n        return (\n          <FormItem className={className}>\n            <Activity mode={label || description ? 'visible' : 'hidden'}>\n              <FieldContent>\n                {isShowLabel && <FormLabel>{label}</FormLabel>}\n                {!!description && <FormDescription>{description}</FormDescription>}\n              </FieldContent>\n            </Activity>\n            <div className=\"basis-3/5 flex justify-end\">\n              <FormControl>\n                <MultipleSelector\n                  placeholder={placeholder}\n                  emptyIndicator=\"No options available\"\n                  value={val}\n                  options={options}\n                  className=\"w-full md:max-w-80\"\n                  onChange={handleOnChange}\n                  onAddNewItem={onAdd}\n                />\n              </FormControl>\n              {isShowErrorMsg && <FormMessage />}\n            </div>\n          </FormItem>\n        );\n      }}\n    />\n  );\n};\n"],"mappings":"+dAmBA,MAAa,GAAoE,CAC/E,OACA,QAAQ,qBACR,cAAc,GACd,iBACA,cAAc,iBACd,cAAc,GACd,YAAY,GACZ,UAAU,EAAE,CACZ,YAGE,EAAA,EAAA,KAACA,EAAAA,EAAAA,CACO,OACN,QAAS,CAAE,MAAO,CAAE,QAAO,eAAiB,CAC1C,IAAM,EAAM,EAAQ,OAAO,GAAU,GAAO,SAAS,EAAO,MAAM,CAAC,CAKnE,OACE,EAAA,EAAA,MAACE,EAAAA,EAAAA,CAAoB,uBACnB,EAAA,EAAA,KAACC,EAAAA,SAAAA,CAAS,KAAM,GAAS,EAAc,UAAY,mBACjD,EAAA,EAAA,MAACC,EAAAA,EAAAA,CAAAA,SAAAA,CACE,IAAe,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAAA,SAAW,EAAA,CAAkB,CAC7C,CAAC,CAAC,IAAe,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAAA,SAAiB,EAAA,CAA8B,CAAA,CAAA,CACrD,EACN,EACX,EAAA,EAAA,MAAC,MAAA,CAAI,UAAU,wCACb,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAAA,UACC,EAAA,EAAA,KAACC,EAAAA,EAAAA,CACc,cACb,eAAe,uBACf,MAAO,EACE,UACT,UAAU,qBACV,SApBc,GAAoB,CAE1C,EADuBP,EAAM,IAAI,GAAK,EAAE,MAAM,CACtB,EAmBhB,aAAc,GACd,CAAA,CACU,CACb,IAAkB,EAAA,EAAA,KAACQ,EAAAA,EAAAA,EAAAA,CAAc,CAAA,EAC9B,CAAA,EACG,GAGf"}
+{"version":3,"file":"multi-select-field.cjs","names":["FormField","value","FormItem","Activity","FieldContent","FormLabel","FormDescription","FormControl","MultipleSelector","FormMessage"],"sources":["../../packages/components/forms/multi-select-field.tsx"],"sourcesContent":["'use client';\nimport { Activity } from 'react';\nimport type { FieldPath, FieldValues } from 'react-hook-form';\n\nimport { FieldContent } from '../ui/field';\nimport { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../ui/form';\nimport { MultipleSelector, type Option } from '../ui/multi-select';\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  name: FieldPath<TFieldValues>;\n  isShowLabel?: boolean;\n  isShowErrorMsg?: boolean;\n  className?: string;\n  label?: string;\n  description?: string;\n  placeholder?: string;\n  options?: { value: string; label: string }[];\n  onAdd?: () => void;\n};\nexport const MultiSelectField = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  label = 'Multi Select Field',\n  isShowLabel = true,\n  isShowErrorMsg,\n  placeholder = 'Select options',\n  description = '',\n  className = '',\n  options = [],\n  onAdd,\n}: Props<TFieldValues>) => {\n  return (\n    <FormField\n      name={name}\n      render={({ field: { value, onChange } }) => {\n        const val = options.filter(option => value?.includes(option.value));\n        const handleOnChange = (value: Option[]) => {\n          const selectedValues = value.map(v => v.value);\n          onChange(selectedValues);\n        };\n        return (\n          <FormItem className={className}>\n            <Activity mode={label || description ? 'visible' : 'hidden'}>\n              <FieldContent>\n                {isShowLabel && <FormLabel>{label}</FormLabel>}\n                {!!description && <FormDescription>{description}</FormDescription>}\n              </FieldContent>\n            </Activity>\n            <div className=\"basis-3/5 flex justify-end\">\n              <FormControl>\n                <MultipleSelector\n                  placeholder={placeholder}\n                  emptyIndicator=\"No options available\"\n                  value={val}\n                  options={options}\n                  className=\"w-full md:max-w-80\"\n                  onChange={handleOnChange}\n                  onAddNewItem={onAdd}\n                />\n              </FormControl>\n              {isShowErrorMsg && <FormMessage />}\n            </div>\n          </FormItem>\n        );\n      }}\n    />\n  );\n};\n"],"mappings":"ybAmBA,MAAa,GAAoE,CAC/E,OACA,QAAQ,qBACR,cAAc,GACd,iBACA,cAAc,iBACd,cAAc,GACd,YAAY,GACZ,UAAU,EAAE,CACZ,YAGE,EAAA,EAAA,KAACA,EAAAA,EAAAA,CACO,OACN,QAAS,CAAE,MAAO,CAAE,QAAO,eAAiB,CAC1C,IAAM,EAAM,EAAQ,OAAO,GAAU,GAAO,SAAS,EAAO,MAAM,CAAC,CAKnE,OACE,EAAA,EAAA,MAACE,EAAAA,EAAAA,CAAoB,uBACnB,EAAA,EAAA,KAACC,EAAAA,SAAAA,CAAS,KAAM,GAAS,EAAc,UAAY,mBACjD,EAAA,EAAA,MAACC,EAAAA,EAAAA,CAAAA,SAAAA,CACE,IAAe,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAAA,SAAW,EAAA,CAAkB,CAC7C,CAAC,CAAC,IAAe,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAAA,SAAiB,EAAA,CAA8B,CAAA,CAAA,CACrD,EACN,EACX,EAAA,EAAA,MAAC,MAAA,CAAI,UAAU,wCACb,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAAA,UACC,EAAA,EAAA,KAACC,EAAAA,iBAAAA,CACc,cACb,eAAe,uBACf,MAAO,EACE,UACT,UAAU,qBACV,SApBc,GAAoB,CAE1C,EADuBP,EAAM,IAAI,GAAK,EAAE,MAAM,CACtB,EAmBhB,aAAc,GACd,CAAA,CACU,CACb,IAAkB,EAAA,EAAA,KAACQ,EAAAA,EAAAA,EAAAA,CAAc,CAAA,EAC9B,CAAA,EACG,GAGf"}

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

@@ -0,0 +1,32 @@
+import * as react_jsx_runtime4 from "react/jsx-runtime";
+import { FieldPath, FieldValues } from "react-hook-form";
+
+//#region packages/components/forms/multi-select-field.d.ts
+type Props<TFieldValues extends FieldValues = FieldValues> = {
+  name: FieldPath<TFieldValues>;
+  isShowLabel?: boolean;
+  isShowErrorMsg?: boolean;
+  className?: string;
+  label?: string;
+  description?: string;
+  placeholder?: string;
+  options?: {
+    value: string;
+    label: string;
+  }[];
+  onAdd?: () => void;
+};
+declare const MultiSelectField: <TFieldValues extends FieldValues = FieldValues>({
+  name,
+  label,
+  isShowLabel,
+  isShowErrorMsg,
+  placeholder,
+  description,
+  className,
+  options,
+  onAdd
+}: Props<TFieldValues>) => react_jsx_runtime4.JSX.Element;
+//#endregion
+export { MultiSelectField };
+//# sourceMappingURL=multi-select-field.d.cts.map

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

@@ -0,0 +1,32 @@
+import * as react_jsx_runtime40 from "react/jsx-runtime";
+import { FieldPath, FieldValues } from "react-hook-form";
+
+//#region packages/components/forms/multi-select-field.d.ts
+type Props<TFieldValues extends FieldValues = FieldValues> = {
+  name: FieldPath<TFieldValues>;
+  isShowLabel?: boolean;
+  isShowErrorMsg?: boolean;
+  className?: string;
+  label?: string;
+  description?: string;
+  placeholder?: string;
+  options?: {
+    value: string;
+    label: string;
+  }[];
+  onAdd?: () => void;
+};
+declare const MultiSelectField: <TFieldValues extends FieldValues = FieldValues>({
+  name,
+  label,
+  isShowLabel,
+  isShowErrorMsg,
+  placeholder,
+  description,
+  className,
+  options,
+  onAdd
+}: Props<TFieldValues>) => react_jsx_runtime40.JSX.Element;
+//#endregion
+export { MultiSelectField };
+//# sourceMappingURL=multi-select-field.d.mts.map

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

@@ -0,0 +1,2 @@
+"use client";import"../button.variants-CBzlxtwI.mjs";import"../button-CRqVuIHJ.mjs";import"../dialog-BReokNfo.mjs";import"../separator-D1hK3QAo.mjs";import"../label-C6OaewtP.mjs";import{n as e}from"../field-COna_98h.mjs";import{a as t,i as n,n as r,o as i,r as a,s as o}from"../form-Bob0j0XE.mjs";import"../command-DjfS4EEz.mjs";import{MultipleSelector as s}from"../ui/multi-select.mjs";import{jsx as c,jsxs as l}from"react/jsx-runtime";import{Activity as u}from"react";const d=({name:d,label:f=`Multi Select Field`,isShowLabel:p=!0,isShowErrorMsg:m,placeholder:h=`Select options`,description:g=``,className:_=``,options:v=[],onAdd:y})=>c(n,{name:d,render:({field:{value:n,onChange:d}})=>{let b=v.filter(e=>n?.includes(e.value));return l(t,{className:_,children:[c(u,{mode:f||g?`visible`:`hidden`,children:l(e,{children:[p&&c(i,{children:f}),!!g&&c(a,{children:g})]})}),l(`div`,{className:`basis-3/5 flex justify-end`,children:[c(r,{children:c(s,{placeholder:h,emptyIndicator:`No options available`,value:b,options:v,className:`w-full md:max-w-80`,onChange:e=>{d(e.map(e=>e.value))},onAddNewItem:y})}),m&&c(o,{})]})]})}});export{d as MultiSelectField};
+//# sourceMappingURL=multi-select-field.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"multi-select-field.mjs","names":["value"],"sources":["../../packages/components/forms/multi-select-field.tsx"],"sourcesContent":["'use client';\nimport { Activity } from 'react';\nimport type { FieldPath, FieldValues } from 'react-hook-form';\n\nimport { FieldContent } from '../ui/field';\nimport { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../ui/form';\nimport { MultipleSelector, type Option } from '../ui/multi-select';\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  name: FieldPath<TFieldValues>;\n  isShowLabel?: boolean;\n  isShowErrorMsg?: boolean;\n  className?: string;\n  label?: string;\n  description?: string;\n  placeholder?: string;\n  options?: { value: string; label: string }[];\n  onAdd?: () => void;\n};\nexport const MultiSelectField = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  label = 'Multi Select Field',\n  isShowLabel = true,\n  isShowErrorMsg,\n  placeholder = 'Select options',\n  description = '',\n  className = '',\n  options = [],\n  onAdd,\n}: Props<TFieldValues>) => {\n  return (\n    <FormField\n      name={name}\n      render={({ field: { value, onChange } }) => {\n        const val = options.filter(option => value?.includes(option.value));\n        const handleOnChange = (value: Option[]) => {\n          const selectedValues = value.map(v => v.value);\n          onChange(selectedValues);\n        };\n        return (\n          <FormItem className={className}>\n            <Activity mode={label || description ? 'visible' : 'hidden'}>\n              <FieldContent>\n                {isShowLabel && <FormLabel>{label}</FormLabel>}\n                {!!description && <FormDescription>{description}</FormDescription>}\n              </FieldContent>\n            </Activity>\n            <div className=\"basis-3/5 flex justify-end\">\n              <FormControl>\n                <MultipleSelector\n                  placeholder={placeholder}\n                  emptyIndicator=\"No options available\"\n                  value={val}\n                  options={options}\n                  className=\"w-full md:max-w-80\"\n                  onChange={handleOnChange}\n                  onAddNewItem={onAdd}\n                />\n              </FormControl>\n              {isShowErrorMsg && <FormMessage />}\n            </div>\n          </FormItem>\n        );\n      }}\n    />\n  );\n};\n"],"mappings":"sdAmBA,MAAa,GAAoE,CAC/E,OACA,QAAQ,qBACR,cAAc,GACd,iBACA,cAAc,iBACd,cAAc,GACd,YAAY,GACZ,UAAU,EAAE,CACZ,WAGE,EAAC,EAAA,CACO,OACN,QAAS,CAAE,MAAO,CAAE,QAAO,eAAiB,CAC1C,IAAM,EAAM,EAAQ,OAAO,GAAU,GAAO,SAAS,EAAO,MAAM,CAAC,CAKnE,OACE,EAAC,EAAA,CAAoB,sBACnB,EAAC,EAAA,CAAS,KAAM,GAAS,EAAc,UAAY,kBACjD,EAAC,EAAA,CAAA,SAAA,CACE,GAAe,EAAC,EAAA,CAAA,SAAW,EAAA,CAAkB,CAC7C,CAAC,CAAC,GAAe,EAAC,EAAA,CAAA,SAAiB,EAAA,CAA8B,CAAA,CAAA,CACrD,EACN,CACX,EAAC,MAAA,CAAI,UAAU,uCACb,EAAC,EAAA,CAAA,SACC,EAAC,EAAA,CACc,cACb,eAAe,uBACf,MAAO,EACE,UACT,UAAU,qBACV,SApBc,GAAoB,CAE1C,EADuBA,EAAM,IAAI,GAAK,EAAE,MAAM,CACtB,EAmBhB,aAAc,GACd,CAAA,CACU,CACb,GAAkB,EAAC,EAAA,EAAA,CAAc,CAAA,EAC9B,CAAA,EACG,GAGf"}

package/dist/forms/number-field.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require(`../chunk-Bmb41Sf3.cjs`);require(`../label-D2Kl-Q_-.cjs`),require(`../separator-D3CGKwyf.cjs`);const t=require(`../field-Cjpwx_6d.cjs`),n=require(`../form-D1gfOYhk.cjs`);require(`../input-D2bPk-nW.cjs`);const r=require(`../number-input-DIUM0vxv.cjs`);let i=require(`react`),a=require(`react/jsx-runtime`),o=require(`react-hook-form`);const s=({name:e,label:s=`Number Field`,placeholder:c=`0`,isShowErrorMsg:l=!1,isShowCount:u=!1,isNested:d=!1,unitText:f=``,description:p=``,onValueChange:m})=>{let h=(0,o.useWatch)({name:e});return d?(0,a.jsx)(n.i,{name:e,render:({field:{onChange:e,...o}})=>(0,a.jsxs)(n.a,{orientation:`vertical`,className:`gap-1`,children:[(0,a.jsx)(i.Activity,{mode:s||p?`visible`:`hidden`,children:(0,a.jsxs)(t.n,{children:[(0,a.jsx)(n.o,{className:`text-xs`,children:s}),!!p&&(0,a.jsx)(n.r,{children:p})]})}),(0,a.jsxs)(`div`,{className:`flex flex-col w-full justify-start`,children:[(0,a.jsx)(n.n,{children:(0,a.jsx)(r.t,{...o,placeholder:c,unitText:f,wrapperClassName:`w-full`,onValueChange:t=>{e(t),m?.(t)}})}),u&&(0,a.jsxs)(`div`,{className:`text-muted-foreground text-end text-xs`,children:[h?.length??0,` characters`]}),l&&(0,a.jsx)(n.s,{})]})]})}):(0,a.jsx)(n.i,{name:e,render:({field:{onChange:e,...o}})=>(0,a.jsxs)(n.a,{children:[(0,a.jsx)(i.Activity,{mode:s||p?`visible`:`hidden`,children:(0,a.jsxs)(t.n,{children:[(0,a.jsx)(n.o,{children:s}),!!p&&(0,a.jsx)(n.r,{children:p})]})}),(0,a.jsxs)(`div`,{className:`relative basis-3/5 flex justify-end`,children:[(0,a.jsx)(n.n,{children:(0,a.jsx)(r.t,{...o,placeholder:c,unitText:f,wrapperClassName:`w-full md:max-w-60`,onValueChange:t=>{e(t),m?.(t)}})}),u&&(0,a.jsxs)(`div`,{className:`text-muted-foreground text-end text-xs`,children:[h?.length??0,` characters`]}),l&&(0,a.jsx)(n.s,{})]})]})})};exports.NumberField=s;
+"use client";const e=require(`../chunk-Bmb41Sf3.cjs`);require(`../input-Df2YPt1V.cjs`),require(`../separator-CBup_ah1.cjs`),require(`../label-C6_Tplyy.cjs`);const t=require(`../field-D8lireRm.cjs`),n=require(`../form-DrtMcMJp.cjs`),r=require(`../number-input-JmNakWin.cjs`);let i=require(`react/jsx-runtime`),a=require(`react`),o=require(`react-hook-form`);const s=({name:e,label:s=`Number Field`,placeholder:c=`0`,isShowErrorMsg:l=!1,isShowCount:u=!1,isNested:d=!1,unitText:f=``,description:p=``,onValueChange:m})=>{let h=(0,o.useWatch)({name:e});return d?(0,i.jsx)(n.i,{name:e,render:({field:{onChange:e,...o}})=>(0,i.jsxs)(n.a,{orientation:`vertical`,className:`gap-1`,children:[(0,i.jsx)(a.Activity,{mode:s||p?`visible`:`hidden`,children:(0,i.jsxs)(t.n,{children:[(0,i.jsx)(n.o,{className:`text-xs`,children:s}),!!p&&(0,i.jsx)(n.r,{children:p})]})}),(0,i.jsxs)(`div`,{className:`flex flex-col w-full justify-start`,children:[(0,i.jsx)(n.n,{children:(0,i.jsx)(r.t,{...o,placeholder:c,unitText:f,wrapperClassName:`w-full`,onValueChange:t=>{e(t),m?.(t)}})}),u&&(0,i.jsxs)(`div`,{className:`text-muted-foreground text-end text-xs`,children:[h?.length??0,` characters`]}),l&&(0,i.jsx)(n.s,{})]})]})}):(0,i.jsx)(n.i,{name:e,render:({field:{onChange:e,...o}})=>(0,i.jsxs)(n.a,{children:[(0,i.jsx)(a.Activity,{mode:s||p?`visible`:`hidden`,children:(0,i.jsxs)(t.n,{children:[(0,i.jsx)(n.o,{children:s}),!!p&&(0,i.jsx)(n.r,{children:p})]})}),(0,i.jsxs)(`div`,{className:`relative basis-3/5 flex justify-end`,children:[(0,i.jsx)(n.n,{children:(0,i.jsx)(r.t,{...o,placeholder:c,unitText:f,wrapperClassName:`w-full md:max-w-60`,onValueChange:t=>{e(t),m?.(t)}})}),u&&(0,i.jsxs)(`div`,{className:`text-muted-foreground text-end text-xs`,children:[h?.length??0,` characters`]}),l&&(0,i.jsx)(n.s,{})]})]})})};exports.NumberField=s;
 //# sourceMappingURL=number-field.cjs.map