@customafk/lunas-ui 0.0.94 → 0.0.96

package/dist/dialogs/form-dialog.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
 import { FieldValues, FormState, SubmitErrorHandler, UseFormProps } from "react-hook-form";
 
 //#region packages/components/dialogs/form-dialog.d.ts
@@ -30,7 +30,7 @@ declare const FormDialog: <TFieldValues extends FieldValues = FieldValues>({
   onError,
   onReset,
   children
-}: React.PropsWithChildren<Props<TFieldValues>>) => react_jsx_runtime2.JSX.Element;
+}: React.PropsWithChildren<Props<TFieldValues>>) => react_jsx_runtime1.JSX.Element;
 //#endregion
 export { FormDialog };
 //# sourceMappingURL=form-dialog.d.ts.map

package/dist/dialogs/form-dialog.js

@@ -1,2 +1,2 @@
-import"../dist-BgkALM7U.js";import"../button-variants-aFWCWUvu.js";import{Button as e}from"../button-CriBqo8S.js";import"../alert-dialog-CtzD_gfT.js";import"../error-dialog-BLiYMBlh.js";import"../label-CdrxlBJ8.js";import"../separator-D17HxS2f.js";import"../field-CGacT8J3.js";import"../form-B_tL9lO4.js";import{FormWrapper as t}from"../form-wrapper-Cw_ARA0-.js";import{Dialog as n,DialogContent as r,DialogDescription as i,DialogFooter as a,DialogHeader as o,DialogTitle as s}from"../dialog-BAlJ18xi.js";import{Drawer as c,DrawerContent as l,DrawerDescription as u,DrawerFooter as d,DrawerHeader as f,DrawerTitle as p}from"../drawer-BT0osH1O.js";import{cn as m}from"@customafk/react-toolkit/utils";import{jsx as h,jsxs as g}from"react/jsx-runtime";import{useMediaQuery as _}from"@customafk/react-toolkit/hooks/useMediaQuery";const v=({form:v,open:y,isSubmitting:b=!1,isResetAfterSubmit:x=!0,disableSubmit:S=!1,title:C,description:w,className:T,onOpenChange:E,onSubmit:D,onError:O,onReset:k,children:A})=>_(`(min-width: 768px)`)?h(n,{open:y,onOpenChange:E,children:g(r,{className:m(`flex flex-col gap-0 border-none p-0`,T),onInteractOutside:e=>{e.preventDefault(),e.stopPropagation()},children:[g(o,{className:`border-border-weak flex-0 gap-2 border-b p-6 pb-4`,children:[h(s,{children:C||`Form Dialog`}),h(i,{children:w||`This is a form dialog where you can add your form elements.`})]}),g(t,{form:v,isResetAfterSubmit:x,className:`flex flex-1 flex-col overflow-y-auto`,onSubmit:D,onError:O,children:[h(`div`,{className:`bg-muted-muted size-full p-2 inset-shadow-sm`,children:h(`main`,{className:`bg-card shadow-card size-full flex-1 overflow-y-auto rounded-md p-4`,children:A})}),g(a,{className:`border-border-weak border-t p-6 pt-4`,children:[h(e,{tabIndex:-1,type:`button`,variant:`outline`,color:`muted`,className:`w-30 rounded-full`,onClick:k,children:`Reset`}),h(e,{autoFocus:!0,tabIndex:0,type:`submit`,isLoading:b,disabled:S,className:`w-30 rounded-full`,children:`Submit`})]})]})]})}):h(c,{open:y,onOpenChange:E,children:g(l,{children:[g(f,{className:`text-left`,children:[h(p,{children:C||`Form Dialog`}),h(u,{children:w||`This is a form dialog where you can add your form elements.`})]}),g(t,{form:v,isResetAfterSubmit:x,className:`flex flex-1 flex-col overflow-y-auto`,onSubmit:D,onError:O,children:[h(`main`,{className:`size-full flex-1 overflow-y-auto p-4`,children:A}),g(d,{className:`pt-2`,children:[h(e,{autoFocus:!0,tabIndex:0,type:`submit`,isLoading:b,disabled:S,className:`w-full rounded-full`,children:`Submit`}),h(e,{tabIndex:-1,type:`button`,variant:`outline`,color:`muted`,className:`w-full rounded-full`,onClick:k,children:`Reset`})]})]})]})});export{v as FormDialog};
+import"../dist-BgkALM7U.js";import"../button-variants-aFWCWUvu.js";import{Button as e}from"../button-CriBqo8S.js";import"../alert-dialog-CtzD_gfT.js";import"../error-dialog-BLiYMBlh.js";import"../label-CdrxlBJ8.js";import"../separator-D17HxS2f.js";import"../field-GVRRZiSk.js";import"../form-De64-oXe.js";import{FormWrapper as t}from"../form-wrapper-CSmgFsG0.js";import{Dialog as n,DialogContent as r,DialogDescription as i,DialogFooter as a,DialogHeader as o,DialogTitle as s}from"../dialog-BAlJ18xi.js";import{Drawer as c,DrawerContent as l,DrawerDescription as u,DrawerFooter as d,DrawerHeader as f,DrawerTitle as p}from"../drawer-BT0osH1O.js";import{cn as m}from"@customafk/react-toolkit/utils";import{jsx as h,jsxs as g}from"react/jsx-runtime";import{useMediaQuery as _}from"@customafk/react-toolkit/hooks/useMediaQuery";const v=({form:v,open:y,isSubmitting:b=!1,isResetAfterSubmit:x=!0,disableSubmit:S=!1,title:C,description:w,className:T,onOpenChange:E,onSubmit:D,onError:O,onReset:k,children:A})=>_(`(min-width: 768px)`)?h(n,{open:y,onOpenChange:E,children:g(r,{className:m(`flex flex-col gap-0 border-none p-0`,T),onInteractOutside:e=>{e.preventDefault(),e.stopPropagation()},children:[g(o,{className:`border-border-weak flex-0 gap-2 border-b p-6 pb-4`,children:[h(s,{children:C||`Form Dialog`}),h(i,{children:w||`This is a form dialog where you can add your form elements.`})]}),g(t,{form:v,isResetAfterSubmit:x,className:`flex flex-1 flex-col overflow-y-auto`,onSubmit:D,onError:O,children:[h(`div`,{className:`bg-muted-muted size-full p-2 inset-shadow-sm`,children:h(`main`,{className:`bg-card shadow-card size-full flex-1 overflow-y-auto rounded-md p-4`,children:A})}),g(a,{className:`border-border-weak border-t p-6 pt-4`,children:[h(e,{tabIndex:-1,type:`button`,variant:`outline`,color:`muted`,className:`w-30 rounded-full`,onClick:k,children:`Reset`}),h(e,{autoFocus:!0,tabIndex:0,type:`submit`,isLoading:b,disabled:S,className:`w-30 rounded-full`,children:`Submit`})]})]})]})}):h(c,{open:y,onOpenChange:E,children:g(l,{children:[g(f,{className:`text-left`,children:[h(p,{children:C||`Form Dialog`}),h(u,{children:w||`This is a form dialog where you can add your form elements.`})]}),g(t,{form:v,isResetAfterSubmit:x,className:`flex flex-1 flex-col overflow-y-auto`,onSubmit:D,onError:O,children:[h(`main`,{className:`size-full flex-1 overflow-y-auto p-4`,children:A}),g(d,{className:`pt-2`,children:[h(e,{autoFocus:!0,tabIndex:0,type:`submit`,isLoading:b,disabled:S,className:`w-full rounded-full`,children:`Submit`}),h(e,{tabIndex:-1,type:`button`,variant:`outline`,color:`muted`,className:`w-full rounded-full`,onClick:k,children:`Reset`})]})]})]})});export{v as FormDialog};
 //# sourceMappingURL=form-dialog.js.map

package/dist/field-DWOm17T1.cjs

@@ -0,0 +1,2 @@
+const e=require(`./chunk-CUT6urMc.cjs`),t=require(`./label-D6mAvVmw.cjs`),n=require(`./separator-DMMoR-d2.cjs`);let r=require(`@customafk/react-toolkit/utils`);r=e.__toESM(r);let i=require(`react`);i=e.__toESM(i);let a=require(`react/jsx-runtime`);a=e.__toESM(a);let o=require(`class-variance-authority`);o=e.__toESM(o);function s({className:e,...t}){return(0,a.jsx)(`fieldset`,{"data-slot":`field-set`,className:(0,r.cn)(`flex flex-col gap-6`,`has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3`,e),...t})}function c({className:e,variant:t=`legend`,...n}){return(0,a.jsx)(`legend`,{"data-slot":`field-legend`,"data-variant":t,className:(0,r.cn)(`mb-3 font-medium`,`data-[variant=legend]:text-base`,`data-[variant=label]:text-sm`,e),...n})}function l({className:e,...t}){return(0,a.jsx)(`div`,{"data-slot":`field-group`,className:(0,r.cn)(`group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4`,e),...t})}const u=(0,o.cva)(`group/field flex w-full gap-3 data-[invalid=true]:text-destructive`,{variants:{orientation:{vertical:[`flex-col [&>*]:w-full [&>.sr-only]:w-auto`],horizontal:[`flex-row items-center`,`[&>[data-slot=field-label]]:flex-auto`,`has-[>[data-slot=field-content]]:items-start`,`has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px`],responsive:[`flex-col [&>*]:w-full [&>.sr-only]:w-auto`,`@md/field-group:flex-row`,`@md/field-group:items-center`,`@md/field-group:[&>*]:w-auto`,`@md/field-group:[&>[data-slot=field-label]]:flex-auto`,`@md/field-group:has-[>[data-slot=field-content]]:items-start`,`@md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px`]}},defaultVariants:{orientation:`vertical`}});function d({className:e,orientation:t=`vertical`,...n}){return(0,a.jsx)(`div`,{"data-slot":`field`,"data-orientation":t,className:(0,r.cn)(u({orientation:t}),e),...n})}function f({className:e,...t}){return(0,a.jsx)(`div`,{"data-slot":`field-content`,className:(0,r.cn)(`group/field-content flex basis-2/5 flex-col gap-1.5 leading-snug`,e),...t})}function p({className:e,...n}){return(0,a.jsx)(t.Label,{"data-slot":`field-label`,className:(0,r.cn)(`group/field-label peer/field-label flex w-fit gap-2 leading-snug`,`group-data-[disabled=true]/field:opacity-50`,`has-[>[data-slot=field]]:w-full`,`has-[>[data-slot=field]]:flex-col`,`has-[>[data-slot=field]]:rounded-md`,`has-[>[data-slot=field]]:border`,`[&>*]:data-[slot=field]:p-4`,`has-data-[state=checked]:bg-primary/5`,`has-data-[state=checked]:border-primary`,e),...n})}function m({className:e,...t}){return(0,a.jsx)(`div`,{"data-slot":`field-label`,className:(0,r.cn)(`flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50`,e),...t})}function h({className:e,...t}){return(0,a.jsx)(`p`,{"data-slot":`field-description`,className:(0,r.cn)(`text-text-positive-weak text-sm 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),...t})}function g({children:e,className:t,...i}){return(0,a.jsxs)(`div`,{"data-slot":`field-separator`,"data-content":!!e,className:(0,r.cn)(`relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2`,t),...i,children:[(0,a.jsx)(n.Separator,{className:`absolute inset-0 top-1/2`}),e&&(0,a.jsx)(`span`,{className:`bg-background text-text-positive-weak relative mx-auto block w-fit px-2`,"data-slot":`field-separator-content`,children:e})]})}function _({className:e,children:t,errors:n,...o}){let s=(0,i.useMemo)(()=>t||(n?n?.length===1&&n[0]?.message?n[0].message:(0,a.jsx)(`ul`,{className:`ml-4 flex list-disc flex-col gap-1`,children:n.map(e=>e?.message&&(0,a.jsx)(`li`,{children:e.message},e.message))}):null),[t,n]);return s?(0,a.jsx)(`div`,{role:`alert`,"data-slot":`field-error`,className:(0,r.cn)(`text-danger text-sm font-normal`,e),...o,children:s}):null}Object.defineProperty(exports,`Field`,{enumerable:!0,get:function(){return d}}),Object.defineProperty(exports,`FieldContent`,{enumerable:!0,get:function(){return f}}),Object.defineProperty(exports,`FieldDescription`,{enumerable:!0,get:function(){return h}}),Object.defineProperty(exports,`FieldError`,{enumerable:!0,get:function(){return _}}),Object.defineProperty(exports,`FieldGroup`,{enumerable:!0,get:function(){return l}}),Object.defineProperty(exports,`FieldLabel`,{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,`FieldLegend`,{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,`FieldSeparator`,{enumerable:!0,get:function(){return g}}),Object.defineProperty(exports,`FieldSet`,{enumerable:!0,get:function(){return s}}),Object.defineProperty(exports,`FieldTitle`,{enumerable:!0,get:function(){return m}});
+//# sourceMappingURL=field-DWOm17T1.cjs.map

package/dist/field-DWOm17T1.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-DWOm17T1.cjs","names":["Label","Separator"],"sources":["../packages/components/ui/field.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { Label } from '@/components/ui/label';\nimport { Separator } from '@/components/ui/separator';\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<'fieldset'>) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn('flex flex-col gap-6', 'has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3', className)}\n      {...props}\n    />\n  );\n}\n\nfunction FieldLegend({ className, variant = 'legend', ...props }: React.ComponentProps<'legend'> & { variant?: 'legend' | 'label' }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn('mb-3 font-medium', 'data-[variant=legend]:text-base', 'data-[variant=label]:text-sm', className)}\n      {...props}\n    />\n  );\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        'group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nconst fieldVariants = cva('group/field flex w-full gap-3 data-[invalid=true]:text-destructive', {\n  variants: {\n    orientation: {\n      vertical: ['flex-col [&>*]:w-full [&>.sr-only]:w-auto'],\n      horizontal: [\n        'flex-row items-center',\n        '[&>[data-slot=field-label]]:flex-auto',\n        'has-[>[data-slot=field-content]]:items-start',\n        'has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',\n      ],\n      responsive: [\n        'flex-col [&>*]:w-full [&>.sr-only]:w-auto',\n        '@md/field-group:flex-row',\n        '@md/field-group:items-center',\n        '@md/field-group:[&>*]:w-auto',\n        '@md/field-group:[&>[data-slot=field-label]]:flex-auto',\n        '@md/field-group:has-[>[data-slot=field-content]]:items-start',\n        '@md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',\n      ],\n    },\n  },\n  defaultVariants: {\n    orientation: 'vertical',\n  },\n});\n\nfunction Field({ className, orientation = 'vertical', ...props }: React.ComponentProps<'div'> & VariantProps<typeof fieldVariants>) {\n  return <div data-slot=\"field\" data-orientation={orientation} className={cn(fieldVariants({ orientation }), className)} {...props} />;\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<'div'>) {\n  return <div data-slot=\"field-content\" className={cn('group/field-content flex basis-2/5 flex-col gap-1.5 leading-snug', className)} {...props} />;\n}\n\nfunction FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        'group/field-label peer/field-label flex w-fit gap-2 leading-snug',\n        'group-data-[disabled=true]/field:opacity-50',\n        'has-[>[data-slot=field]]:w-full',\n        'has-[>[data-slot=field]]:flex-col',\n        'has-[>[data-slot=field]]:rounded-md',\n        'has-[>[data-slot=field]]:border',\n        '[&>*]:data-[slot=field]:p-4',\n        'has-data-[state=checked]:bg-primary/5',\n        'has-data-[state=checked]:border-primary',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn('flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50', className)}\n      {...props}\n    />\n  );\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<'p'>) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        'text-text-positive-weak text-sm leading-normal font-normal 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 FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<'div'> & {\n  children?: React.ReactNode;\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn('relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2', className)}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span className=\"bg-background text-text-positive-weak relative mx-auto block w-fit px-2\" data-slot=\"field-separator-content\">\n          {children}\n        </span>\n      )}\n    </div>\n  );\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<'div'> & {\n  errors?: Array<{ message?: string } | undefined>;\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children;\n    }\n\n    if (!errors) {\n      return null;\n    }\n\n    if (errors?.length === 1 && errors[0]?.message) {\n      return errors[0].message;\n    }\n\n    return <ul className=\"ml-4 flex list-disc flex-col gap-1\">{errors.map(error => error?.message && <li key={error.message}>{error.message}</li>)}</ul>;\n  }, [children, errors]);\n\n  if (!content) {\n    return null;\n  }\n\n  return (\n    <div role=\"alert\" data-slot=\"field-error\" className={cn('text-danger text-sm font-normal', className)} {...props}>\n      {content}\n    </div>\n  );\n}\n\nexport { Field, FieldLabel, FieldDescription, FieldError, FieldGroup, FieldLegend, FieldSeparator, FieldSet, FieldContent, FieldTitle };\n"],"mappings":"gUAUA,SAAS,EAAS,CAAE,YAAW,GAAG,GAA2C,CAC3E,OACE,EAAA,EAAA,KAAC,WAAA,CACC,YAAU,YACV,WAAA,EAAA,EAAA,IAAc,sBAAuB,+EAAgF,EAAU,CAC/H,GAAI,GACJ,CAIN,SAAS,EAAY,CAAE,YAAW,UAAU,SAAU,GAAG,GAA4E,CACnI,OACE,EAAA,EAAA,KAAC,SAAA,CACC,YAAU,eACV,eAAc,EACd,WAAA,EAAA,EAAA,IAAc,mBAAoB,kCAAmC,+BAAgC,EAAU,CAC/G,GAAI,GACJ,CAIN,SAAS,EAAW,CAAE,YAAW,GAAG,GAAsC,CACxE,OACE,EAAA,EAAA,KAAC,MAAA,CACC,YAAU,cACV,WAAA,EAAA,EAAA,IACE,yIACA,EACD,CACD,GAAI,GACJ,CAIN,MAAM,GAAA,EAAA,EAAA,KAAoB,qEAAsE,CAC9F,SAAU,CACR,YAAa,CACX,SAAU,CAAC,4CAA4C,CACvD,WAAY,CACV,wBACA,wCACA,+CACA,0EACD,CACD,WAAY,CACV,4CACA,2BACA,+BACA,+BACA,wDACA,+DACA,0FACD,CACF,CACF,CACD,gBAAiB,CACf,YAAa,WACd,CACF,CAAC,CAEF,SAAS,EAAM,CAAE,YAAW,cAAc,WAAY,GAAG,GAA2E,CAClI,OAAO,EAAA,EAAA,KAAC,MAAA,CAAI,YAAU,QAAQ,mBAAkB,EAAa,WAAA,EAAA,EAAA,IAAc,EAAc,CAAE,cAAa,CAAC,CAAE,EAAU,CAAE,GAAI,GAAS,CAGtI,SAAS,EAAa,CAAE,YAAW,GAAG,GAAsC,CAC1E,OAAO,EAAA,EAAA,KAAC,MAAA,CAAI,YAAU,gBAAgB,WAAA,EAAA,EAAA,IAAc,mEAAoE,EAAU,CAAE,GAAI,GAAS,CAGnJ,SAAS,EAAW,CAAE,YAAW,GAAG,GAA6C,CAC/E,OACE,EAAA,EAAA,KAACA,EAAAA,MAAAA,CACC,YAAU,cACV,WAAA,EAAA,EAAA,IACE,mEACA,8CACA,kCACA,oCACA,sCACA,kCACA,8BACA,wCACA,0CACA,EACD,CACD,GAAI,GACJ,CAIN,SAAS,EAAW,CAAE,YAAW,GAAG,GAAsC,CACxE,OACE,EAAA,EAAA,KAAC,MAAA,CACC,YAAU,cACV,WAAA,EAAA,EAAA,IAAc,6GAA8G,EAAU,CACtI,GAAI,GACJ,CAIN,SAAS,EAAiB,CAAE,YAAW,GAAG,GAAoC,CAC5E,OACE,EAAA,EAAA,KAAC,IAAA,CACC,YAAU,oBACV,WAAA,EAAA,EAAA,IACE,0HACA,+DACA,oEACA,EACD,CACD,GAAI,GACJ,CAIN,SAAS,EAAe,CACtB,WACA,YACA,GAAG,GAGF,CACD,OACE,EAAA,EAAA,MAAC,MAAA,CACC,YAAU,kBACV,eAAc,CAAC,CAAC,EAChB,WAAA,EAAA,EAAA,IAAc,4EAA6E,EAAU,CACrG,GAAI,aAEJ,EAAA,EAAA,KAACC,EAAAA,UAAAA,CAAU,UAAU,2BAAA,CAA6B,CACjD,IACC,EAAA,EAAA,KAAC,OAAA,CAAK,UAAU,0EAA0E,YAAU,0BACjG,YACI,CAAA,EAEL,CAIV,SAAS,EAAW,CAClB,YACA,WACA,SACA,GAAG,GAGF,CACD,IAAM,GAAA,EAAA,EAAA,aACA,IAIC,EAID,GAAQ,SAAW,GAAK,EAAO,IAAI,QAC9B,EAAO,GAAG,SAGZ,EAAA,EAAA,KAAC,KAAA,CAAG,UAAU,8CAAsC,EAAO,IAAI,GAAS,GAAO,UAAW,EAAA,EAAA,KAAC,KAAA,CAAA,SAAwB,EAAM,QAAA,CAAtB,EAAM,QAA6B,CAAC,EAAM,CAP3I,MAQR,CAAC,EAAU,EAAO,CAAC,CAMtB,OAJK,GAKH,EAAA,EAAA,KAAC,MAAA,CAAI,KAAK,QAAQ,YAAU,cAAc,WAAA,EAAA,EAAA,IAAc,kCAAmC,EAAU,CAAE,GAAI,WACxG,GACG,CANC"}

package/dist/field-GVRRZiSk.js

@@ -0,0 +1,2 @@
+import{Label as e}from"./label-CdrxlBJ8.js";import{Separator as t}from"./separator-D17HxS2f.js";import{cn as n}from"@customafk/react-toolkit/utils";import{useMemo as r}from"react";import{jsx as i,jsxs as a}from"react/jsx-runtime";import{cva as o}from"class-variance-authority";function s({className:e,...t}){return i(`fieldset`,{"data-slot":`field-set`,className:n(`flex flex-col gap-6`,`has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3`,e),...t})}function c({className:e,variant:t=`legend`,...r}){return i(`legend`,{"data-slot":`field-legend`,"data-variant":t,className:n(`mb-3 font-medium`,`data-[variant=legend]:text-base`,`data-[variant=label]:text-sm`,e),...r})}function l({className:e,...t}){return i(`div`,{"data-slot":`field-group`,className:n(`group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4`,e),...t})}const u=o(`group/field flex w-full gap-3 data-[invalid=true]:text-destructive`,{variants:{orientation:{vertical:[`flex-col [&>*]:w-full [&>.sr-only]:w-auto`],horizontal:[`flex-row items-center`,`[&>[data-slot=field-label]]:flex-auto`,`has-[>[data-slot=field-content]]:items-start`,`has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px`],responsive:[`flex-col [&>*]:w-full [&>.sr-only]:w-auto`,`@md/field-group:flex-row`,`@md/field-group:items-center`,`@md/field-group:[&>*]:w-auto`,`@md/field-group:[&>[data-slot=field-label]]:flex-auto`,`@md/field-group:has-[>[data-slot=field-content]]:items-start`,`@md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px`]}},defaultVariants:{orientation:`vertical`}});function d({className:e,orientation:t=`vertical`,...r}){return i(`div`,{"data-slot":`field`,"data-orientation":t,className:n(u({orientation:t}),e),...r})}function f({className:e,...t}){return i(`div`,{"data-slot":`field-content`,className:n(`group/field-content flex basis-2/5 flex-col gap-1.5 leading-snug`,e),...t})}function p({className:t,...r}){return i(e,{"data-slot":`field-label`,className:n(`group/field-label peer/field-label flex w-fit gap-2 leading-snug`,`group-data-[disabled=true]/field:opacity-50`,`has-[>[data-slot=field]]:w-full`,`has-[>[data-slot=field]]:flex-col`,`has-[>[data-slot=field]]:rounded-md`,`has-[>[data-slot=field]]:border`,`[&>*]:data-[slot=field]:p-4`,`has-data-[state=checked]:bg-primary/5`,`has-data-[state=checked]:border-primary`,t),...r})}function m({className:e,...t}){return i(`div`,{"data-slot":`field-label`,className:n(`flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50`,e),...t})}function h({className:e,...t}){return i(`p`,{"data-slot":`field-description`,className:n(`text-text-positive-weak text-sm 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),...t})}function g({children:e,className:r,...o}){return a(`div`,{"data-slot":`field-separator`,"data-content":!!e,className:n(`relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2`,r),...o,children:[i(t,{className:`absolute inset-0 top-1/2`}),e&&i(`span`,{className:`bg-background text-text-positive-weak relative mx-auto block w-fit px-2`,"data-slot":`field-separator-content`,children:e})]})}function _({className:e,children:t,errors:a,...o}){let s=r(()=>t||(a?a?.length===1&&a[0]?.message?a[0].message:i(`ul`,{className:`ml-4 flex list-disc flex-col gap-1`,children:a.map(e=>e?.message&&i(`li`,{children:e.message},e.message))}):null),[t,a]);return s?i(`div`,{role:`alert`,"data-slot":`field-error`,className:n(`text-danger text-sm font-normal`,e),...o,children:s}):null}export{d as Field,f as FieldContent,h as FieldDescription,_ as FieldError,l as FieldGroup,p as FieldLabel,c as FieldLegend,g as FieldSeparator,s as FieldSet,m as FieldTitle};
+//# sourceMappingURL=field-GVRRZiSk.js.map

package/dist/field-GVRRZiSk.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-GVRRZiSk.js","names":[],"sources":["../packages/components/ui/field.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { Label } from '@/components/ui/label';\nimport { Separator } from '@/components/ui/separator';\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<'fieldset'>) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn('flex flex-col gap-6', 'has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3', className)}\n      {...props}\n    />\n  );\n}\n\nfunction FieldLegend({ className, variant = 'legend', ...props }: React.ComponentProps<'legend'> & { variant?: 'legend' | 'label' }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn('mb-3 font-medium', 'data-[variant=legend]:text-base', 'data-[variant=label]:text-sm', className)}\n      {...props}\n    />\n  );\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        'group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nconst fieldVariants = cva('group/field flex w-full gap-3 data-[invalid=true]:text-destructive', {\n  variants: {\n    orientation: {\n      vertical: ['flex-col [&>*]:w-full [&>.sr-only]:w-auto'],\n      horizontal: [\n        'flex-row items-center',\n        '[&>[data-slot=field-label]]:flex-auto',\n        'has-[>[data-slot=field-content]]:items-start',\n        'has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',\n      ],\n      responsive: [\n        'flex-col [&>*]:w-full [&>.sr-only]:w-auto',\n        '@md/field-group:flex-row',\n        '@md/field-group:items-center',\n        '@md/field-group:[&>*]:w-auto',\n        '@md/field-group:[&>[data-slot=field-label]]:flex-auto',\n        '@md/field-group:has-[>[data-slot=field-content]]:items-start',\n        '@md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',\n      ],\n    },\n  },\n  defaultVariants: {\n    orientation: 'vertical',\n  },\n});\n\nfunction Field({ className, orientation = 'vertical', ...props }: React.ComponentProps<'div'> & VariantProps<typeof fieldVariants>) {\n  return <div data-slot=\"field\" data-orientation={orientation} className={cn(fieldVariants({ orientation }), className)} {...props} />;\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<'div'>) {\n  return <div data-slot=\"field-content\" className={cn('group/field-content flex basis-2/5 flex-col gap-1.5 leading-snug', className)} {...props} />;\n}\n\nfunction FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        'group/field-label peer/field-label flex w-fit gap-2 leading-snug',\n        'group-data-[disabled=true]/field:opacity-50',\n        'has-[>[data-slot=field]]:w-full',\n        'has-[>[data-slot=field]]:flex-col',\n        'has-[>[data-slot=field]]:rounded-md',\n        'has-[>[data-slot=field]]:border',\n        '[&>*]:data-[slot=field]:p-4',\n        'has-data-[state=checked]:bg-primary/5',\n        'has-data-[state=checked]:border-primary',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn('flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50', className)}\n      {...props}\n    />\n  );\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<'p'>) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        'text-text-positive-weak text-sm leading-normal font-normal 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 FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<'div'> & {\n  children?: React.ReactNode;\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn('relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2', className)}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span className=\"bg-background text-text-positive-weak relative mx-auto block w-fit px-2\" data-slot=\"field-separator-content\">\n          {children}\n        </span>\n      )}\n    </div>\n  );\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<'div'> & {\n  errors?: Array<{ message?: string } | undefined>;\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children;\n    }\n\n    if (!errors) {\n      return null;\n    }\n\n    if (errors?.length === 1 && errors[0]?.message) {\n      return errors[0].message;\n    }\n\n    return <ul className=\"ml-4 flex list-disc flex-col gap-1\">{errors.map(error => error?.message && <li key={error.message}>{error.message}</li>)}</ul>;\n  }, [children, errors]);\n\n  if (!content) {\n    return null;\n  }\n\n  return (\n    <div role=\"alert\" data-slot=\"field-error\" className={cn('text-danger text-sm font-normal', className)} {...props}>\n      {content}\n    </div>\n  );\n}\n\nexport { Field, FieldLabel, FieldDescription, FieldError, FieldGroup, FieldLegend, FieldSeparator, FieldSet, FieldContent, FieldTitle };\n"],"mappings":"qRAUA,SAAS,EAAS,CAAE,YAAW,GAAG,GAA2C,CAC3E,OACE,EAAC,WAAA,CACC,YAAU,YACV,UAAW,EAAG,sBAAuB,+EAAgF,EAAU,CAC/H,GAAI,GACJ,CAIN,SAAS,EAAY,CAAE,YAAW,UAAU,SAAU,GAAG,GAA4E,CACnI,OACE,EAAC,SAAA,CACC,YAAU,eACV,eAAc,EACd,UAAW,EAAG,mBAAoB,kCAAmC,+BAAgC,EAAU,CAC/G,GAAI,GACJ,CAIN,SAAS,EAAW,CAAE,YAAW,GAAG,GAAsC,CACxE,OACE,EAAC,MAAA,CACC,YAAU,cACV,UAAW,EACT,yIACA,EACD,CACD,GAAI,GACJ,CAIN,MAAM,EAAgB,EAAI,qEAAsE,CAC9F,SAAU,CACR,YAAa,CACX,SAAU,CAAC,4CAA4C,CACvD,WAAY,CACV,wBACA,wCACA,+CACA,0EACD,CACD,WAAY,CACV,4CACA,2BACA,+BACA,+BACA,wDACA,+DACA,0FACD,CACF,CACF,CACD,gBAAiB,CACf,YAAa,WACd,CACF,CAAC,CAEF,SAAS,EAAM,CAAE,YAAW,cAAc,WAAY,GAAG,GAA2E,CAClI,OAAO,EAAC,MAAA,CAAI,YAAU,QAAQ,mBAAkB,EAAa,UAAW,EAAG,EAAc,CAAE,cAAa,CAAC,CAAE,EAAU,CAAE,GAAI,GAAS,CAGtI,SAAS,EAAa,CAAE,YAAW,GAAG,GAAsC,CAC1E,OAAO,EAAC,MAAA,CAAI,YAAU,gBAAgB,UAAW,EAAG,mEAAoE,EAAU,CAAE,GAAI,GAAS,CAGnJ,SAAS,EAAW,CAAE,YAAW,GAAG,GAA6C,CAC/E,OACE,EAAC,EAAA,CACC,YAAU,cACV,UAAW,EACT,mEACA,8CACA,kCACA,oCACA,sCACA,kCACA,8BACA,wCACA,0CACA,EACD,CACD,GAAI,GACJ,CAIN,SAAS,EAAW,CAAE,YAAW,GAAG,GAAsC,CACxE,OACE,EAAC,MAAA,CACC,YAAU,cACV,UAAW,EAAG,6GAA8G,EAAU,CACtI,GAAI,GACJ,CAIN,SAAS,EAAiB,CAAE,YAAW,GAAG,GAAoC,CAC5E,OACE,EAAC,IAAA,CACC,YAAU,oBACV,UAAW,EACT,0HACA,+DACA,oEACA,EACD,CACD,GAAI,GACJ,CAIN,SAAS,EAAe,CACtB,WACA,YACA,GAAG,GAGF,CACD,OACE,EAAC,MAAA,CACC,YAAU,kBACV,eAAc,CAAC,CAAC,EAChB,UAAW,EAAG,4EAA6E,EAAU,CACrG,GAAI,YAEJ,EAAC,EAAA,CAAU,UAAU,2BAAA,CAA6B,CACjD,GACC,EAAC,OAAA,CAAK,UAAU,0EAA0E,YAAU,0BACjG,YACI,CAAA,EAEL,CAIV,SAAS,EAAW,CAClB,YACA,WACA,SACA,GAAG,GAGF,CACD,IAAM,EAAU,MACV,IAIC,EAID,GAAQ,SAAW,GAAK,EAAO,IAAI,QAC9B,EAAO,GAAG,QAGZ,EAAC,KAAA,CAAG,UAAU,8CAAsC,EAAO,IAAI,GAAS,GAAO,SAAW,EAAC,KAAA,CAAA,SAAwB,EAAM,QAAA,CAAtB,EAAM,QAA6B,CAAC,EAAM,CAP3I,MAQR,CAAC,EAAU,EAAO,CAAC,CAMtB,OAJK,EAKH,EAAC,MAAA,CAAI,KAAK,QAAQ,YAAU,cAAc,UAAW,EAAG,kCAAmC,EAAU,CAAE,GAAI,WACxG,GACG,CANC"}

package/dist/{form-B_tL9lO4.js → form-De64-oXe.js}

@@ -1,2 +1,2 @@
-import{Field as e,FieldDescription as t,FieldLabel as n}from"./field-CGacT8J3.js";import{cn as r}from"@customafk/react-toolkit/utils";import{createContext as i,useContext as a,useId as o}from"react";import{jsx as s}from"react/jsx-runtime";import{Slot as c}from"radix-ui";import{Controller as l,FormProvider as u,useFormContext as d,useFormState as f}from"react-hook-form";const p=u,m=i({}),h=({...e})=>s(m.Provider,{value:{name:e.name},children:s(l,{...e})}),g=()=>{let e=a(m),t=a(_),{getFieldState:n,control:r,resetField:i}=d(),o=f({name:e.name}),s=n(e.name,o);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`,...s}},_=i({});function v({className:t,...n}){let r=o();return s(_.Provider,{value:{id:r},children:s(e,{orientation:`responsive`,...n})})}function y({...e}){let{formItemId:t}=g();return s(n,{htmlFor:t,...e})}function b({...e}){let{error:t,formItemId:n,formDescriptionId:r,formMessageId:i}=g();return s(c.Slot,{"data-slot":`form-control`,id:n,"aria-describedby":t?`${r} ${i}`:`${r}`,"aria-invalid":!!t,...e})}function x({className:e,...n}){let{formDescriptionId:i}=g();return s(t,{id:i,className:r(`text-text-positive-weak text-sm 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 S({className:e,children:t,...n}){let{error:i,formMessageId:a}=g();return s(`span`,{"data-slot":`form-message`,id:a,className:r(`text-danger text-xs`,e),...n,children:i?String(i?.message??``):t})}export{p as Form,b as FormControl,x as FormDescription,h as FormField,v as FormItem,y as FormLabel,S as FormMessage,g as useFormField};
-//# sourceMappingURL=form-B_tL9lO4.js.map
+import{Field as e,FieldDescription as t,FieldLabel as n}from"./field-GVRRZiSk.js";import{cn as r}from"@customafk/react-toolkit/utils";import{createContext as i,useContext as a,useId as o}from"react";import{jsx as s}from"react/jsx-runtime";import{Slot as c}from"radix-ui";import{Controller as l,FormProvider as u,useFormContext as d,useFormState as f}from"react-hook-form";const p=u,m=i({}),h=({...e})=>s(m.Provider,{value:{name:e.name},children:s(l,{...e})}),g=()=>{let e=a(m),t=a(_),{getFieldState:n,control:r,resetField:i}=d(),o=f({name:e.name}),s=n(e.name,o);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`,...s}},_=i({});function v({className:t,...n}){let r=o();return s(_.Provider,{value:{id:r},children:s(e,{orientation:`responsive`,...n})})}function y({...e}){let{formItemId:t}=g();return s(n,{htmlFor:t,...e})}function b({...e}){let{error:t,formItemId:n,formDescriptionId:r,formMessageId:i}=g();return s(c.Slot,{"data-slot":`form-control`,id:n,"aria-describedby":t?`${r} ${i}`:`${r}`,"aria-invalid":!!t,...e})}function x({className:e,...n}){let{formDescriptionId:i}=g();return s(t,{id:i,className:r(`text-text-positive-weak text-sm 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 S({className:e,children:t,...n}){let{error:i,formMessageId:a}=g();return s(`span`,{"data-slot":`form-message`,id:a,className:r(`text-danger text-xs`,e),...n,children:i?String(i?.message??``):t})}export{p as Form,b as FormControl,x as FormDescription,h as FormField,v as FormItem,y as FormLabel,S as FormMessage,g as useFormField};
+//# sourceMappingURL=form-De64-oXe.js.map

package/dist/{form-B_tL9lO4.js.map → form-De64-oXe.js.map}

@@ -1 +1 @@
-{"version":3,"file":"form-B_tL9lO4.js","names":["SlotPrimitive"],"sources":["../packages/components/ui/form.tsx"],"sourcesContent":["'use client';\nimport { createContext, useContext, useId } from 'react';\nimport type { ControllerProps, FieldPath, FieldValues } from 'react-hook-form';\nimport { Controller, FormProvider, useFormContext, useFormState } from 'react-hook-form';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { type Label as LabelPrimitive, Slot as SlotPrimitive } from 'radix-ui';\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 = useContext(FormFieldContext);\n  const itemContext = useContext(FormItemContext);\n  const { getFieldState, control, resetField } = useFormContext();\n  const formState = useFormState({ name: fieldContext.name });\n  const fieldState = getFieldState(fieldContext.name, formState);\n\n  if (!fieldContext) {\n    throw new Error('useFormField should be used within <FormField>');\n  }\n\n  const { id } = itemContext;\n\n  return {\n    id,\n    control,\n    resetField,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  };\n};\n\ntype FormItemContextValue = {\n  id: string;\n};\n\nconst FormItemContext = createContext<FormItemContextValue>({} as FormItemContextValue);\n\nfunction FormItem({ className, ...props }: React.ComponentProps<'div'>) {\n  const id = useId();\n\n  return (\n    <FormItemContext.Provider value={{ id }}>\n      <Field orientation=\"responsive\" {...props} />\n    </FormItemContext.Provider>\n  );\n}\n\nfunction FormLabel({ ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {\n  const { formItemId } = useFormField();\n  return <FieldLabel htmlFor={formItemId} {...props} />;\n}\n\nfunction FormControl({ ...props }: React.ComponentProps<typeof SlotPrimitive.Slot>) {\n  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();\n\n  return (\n    <SlotPrimitive.Slot\n      data-slot=\"form-control\"\n      id={formItemId}\n      aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}\n      aria-invalid={!!error}\n      {...props}\n    />\n  );\n}\n\nfunction FormDescription({ className, ...props }: React.ComponentProps<'p'>) {\n  const { formDescriptionId } = useFormField();\n\n  return (\n    <FieldDescription\n      id={formDescriptionId}\n      className={cn(\n        'text-text-positive-weak text-sm 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":"oXAUA,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,EAAW,EAAiB,CAC3C,EAAc,EAAW,EAAgB,CACzC,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,CAEvF,SAAS,EAAS,CAAE,YAAW,GAAG,GAAsC,CACtE,IAAM,EAAK,GAAO,CAElB,OACE,EAAC,EAAgB,SAAA,CAAS,MAAO,CAAE,KAAI,UACrC,EAAC,EAAA,CAAM,YAAY,aAAa,GAAI,GAAS,EACpB,CAI/B,SAAS,EAAU,CAAE,GAAG,GAA2D,CACjF,GAAM,CAAE,cAAe,GAAc,CACrC,OAAO,EAAC,EAAA,CAAW,QAAS,EAAY,GAAI,GAAS,CAGvD,SAAS,EAAY,CAAE,GAAG,GAA0D,CAClF,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,CAIN,SAAS,EAAgB,CAAE,YAAW,GAAG,GAAoC,CAC3E,GAAM,CAAE,qBAAsB,GAAc,CAE5C,OACE,EAAC,EAAA,CACC,GAAI,EACJ,UAAW,EACT,6DACA,+DACA,+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"}
+{"version":3,"file":"form-De64-oXe.js","names":["SlotPrimitive"],"sources":["../packages/components/ui/form.tsx"],"sourcesContent":["'use client';\nimport { createContext, useContext, useId } from 'react';\nimport type { ControllerProps, FieldPath, FieldValues } from 'react-hook-form';\nimport { Controller, FormProvider, useFormContext, useFormState } from 'react-hook-form';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { type Label as LabelPrimitive, Slot as SlotPrimitive } from 'radix-ui';\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 = useContext(FormFieldContext);\n  const itemContext = useContext(FormItemContext);\n  const { getFieldState, control, resetField } = useFormContext();\n  const formState = useFormState({ name: fieldContext.name });\n  const fieldState = getFieldState(fieldContext.name, formState);\n\n  if (!fieldContext) {\n    throw new Error('useFormField should be used within <FormField>');\n  }\n\n  const { id } = itemContext;\n\n  return {\n    id,\n    control,\n    resetField,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  };\n};\n\ntype FormItemContextValue = {\n  id: string;\n};\n\nconst FormItemContext = createContext<FormItemContextValue>({} as FormItemContextValue);\n\nfunction FormItem({ className, ...props }: React.ComponentProps<'div'>) {\n  const id = useId();\n\n  return (\n    <FormItemContext.Provider value={{ id }}>\n      <Field orientation=\"responsive\" {...props} />\n    </FormItemContext.Provider>\n  );\n}\n\nfunction FormLabel({ ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {\n  const { formItemId } = useFormField();\n  return <FieldLabel htmlFor={formItemId} {...props} />;\n}\n\nfunction FormControl({ ...props }: React.ComponentProps<typeof SlotPrimitive.Slot>) {\n  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();\n\n  return (\n    <SlotPrimitive.Slot\n      data-slot=\"form-control\"\n      id={formItemId}\n      aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}\n      aria-invalid={!!error}\n      {...props}\n    />\n  );\n}\n\nfunction FormDescription({ className, ...props }: React.ComponentProps<'p'>) {\n  const { formDescriptionId } = useFormField();\n\n  return (\n    <FieldDescription\n      id={formDescriptionId}\n      className={cn(\n        'text-text-positive-weak text-sm 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":"oXAUA,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,EAAW,EAAiB,CAC3C,EAAc,EAAW,EAAgB,CACzC,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,CAEvF,SAAS,EAAS,CAAE,YAAW,GAAG,GAAsC,CACtE,IAAM,EAAK,GAAO,CAElB,OACE,EAAC,EAAgB,SAAA,CAAS,MAAO,CAAE,KAAI,UACrC,EAAC,EAAA,CAAM,YAAY,aAAa,GAAI,GAAS,EACpB,CAI/B,SAAS,EAAU,CAAE,GAAG,GAA2D,CACjF,GAAM,CAAE,cAAe,GAAc,CACrC,OAAO,EAAC,EAAA,CAAW,QAAS,EAAY,GAAI,GAAS,CAGvD,SAAS,EAAY,CAAE,GAAG,GAA0D,CAClF,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,CAIN,SAAS,EAAgB,CAAE,YAAW,GAAG,GAAoC,CAC3E,GAAM,CAAE,qBAAsB,GAAc,CAE5C,OACE,EAAC,EAAA,CACC,GAAI,EACJ,UAAW,EACT,6DACA,+DACA,+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-DV9tQbiO.cjs → form-rN5ezSn5.cjs}

@@ -1,2 +1,2 @@
-const e=require(`./chunk-CUT6urMc.cjs`),t=require(`./field-A43YZ5Wj.cjs`);let n=require(`@customafk/react-toolkit/utils`);n=e.__toESM(n);let r=require(`react`);r=e.__toESM(r);let i=require(`react/jsx-runtime`);i=e.__toESM(i);let a=require(`radix-ui`);a=e.__toESM(a);let o=require(`react-hook-form`);o=e.__toESM(o);const s=o.FormProvider,c=(0,r.createContext)({}),l=({...e})=>(0,i.jsx)(c.Provider,{value:{name:e.name},children:(0,i.jsx)(o.Controller,{...e})}),u=()=>{let e=(0,r.useContext)(c),t=(0,r.useContext)(d),{getFieldState:n,control:i,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:i,resetField:a,name:e.name,formItemId:`${u}-form-item`,formDescriptionId:`${u}-form-item-description`,formMessageId:`${u}-form-item-message`,...l}},d=(0,r.createContext)({});function f({className:e,...n}){let a=(0,r.useId)();return(0,i.jsx)(d.Provider,{value:{id:a},children:(0,i.jsx)(t.Field,{orientation:`responsive`,...n})})}function p({...e}){let{formItemId:n}=u();return(0,i.jsx)(t.FieldLabel,{htmlFor:n,...e})}function m({...e}){let{error:t,formItemId:n,formDescriptionId:r,formMessageId:o}=u();return(0,i.jsx)(a.Slot.Slot,{"data-slot":`form-control`,id:n,"aria-describedby":t?`${r} ${o}`:`${r}`,"aria-invalid":!!t,...e})}function h({className:e,...r}){let{formDescriptionId:a}=u();return(0,i.jsx)(t.FieldDescription,{id:a,className:(0,n.cn)(`text-text-positive-weak text-sm 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),...r})}function g({className:e,children:t,...r}){let{error:a,formMessageId:o}=u();return(0,i.jsx)(`span`,{"data-slot":`form-message`,id:o,className:(0,n.cn)(`text-danger text-xs`,e),...r,children:a?String(a?.message??``):t})}Object.defineProperty(exports,`Form`,{enumerable:!0,get:function(){return s}}),Object.defineProperty(exports,`FormControl`,{enumerable:!0,get:function(){return m}}),Object.defineProperty(exports,`FormDescription`,{enumerable:!0,get:function(){return h}}),Object.defineProperty(exports,`FormField`,{enumerable:!0,get:function(){return l}}),Object.defineProperty(exports,`FormItem`,{enumerable:!0,get:function(){return f}}),Object.defineProperty(exports,`FormLabel`,{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,`FormMessage`,{enumerable:!0,get:function(){return g}}),Object.defineProperty(exports,`useFormField`,{enumerable:!0,get:function(){return u}});
-//# sourceMappingURL=form-DV9tQbiO.cjs.map
+const e=require(`./chunk-CUT6urMc.cjs`),t=require(`./field-DWOm17T1.cjs`);let n=require(`@customafk/react-toolkit/utils`);n=e.__toESM(n);let r=require(`react`);r=e.__toESM(r);let i=require(`react/jsx-runtime`);i=e.__toESM(i);let a=require(`radix-ui`);a=e.__toESM(a);let o=require(`react-hook-form`);o=e.__toESM(o);const s=o.FormProvider,c=(0,r.createContext)({}),l=({...e})=>(0,i.jsx)(c.Provider,{value:{name:e.name},children:(0,i.jsx)(o.Controller,{...e})}),u=()=>{let e=(0,r.useContext)(c),t=(0,r.useContext)(d),{getFieldState:n,control:i,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:i,resetField:a,name:e.name,formItemId:`${u}-form-item`,formDescriptionId:`${u}-form-item-description`,formMessageId:`${u}-form-item-message`,...l}},d=(0,r.createContext)({});function f({className:e,...n}){let a=(0,r.useId)();return(0,i.jsx)(d.Provider,{value:{id:a},children:(0,i.jsx)(t.Field,{orientation:`responsive`,...n})})}function p({...e}){let{formItemId:n}=u();return(0,i.jsx)(t.FieldLabel,{htmlFor:n,...e})}function m({...e}){let{error:t,formItemId:n,formDescriptionId:r,formMessageId:o}=u();return(0,i.jsx)(a.Slot.Slot,{"data-slot":`form-control`,id:n,"aria-describedby":t?`${r} ${o}`:`${r}`,"aria-invalid":!!t,...e})}function h({className:e,...r}){let{formDescriptionId:a}=u();return(0,i.jsx)(t.FieldDescription,{id:a,className:(0,n.cn)(`text-text-positive-weak text-sm 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),...r})}function g({className:e,children:t,...r}){let{error:a,formMessageId:o}=u();return(0,i.jsx)(`span`,{"data-slot":`form-message`,id:o,className:(0,n.cn)(`text-danger text-xs`,e),...r,children:a?String(a?.message??``):t})}Object.defineProperty(exports,`Form`,{enumerable:!0,get:function(){return s}}),Object.defineProperty(exports,`FormControl`,{enumerable:!0,get:function(){return m}}),Object.defineProperty(exports,`FormDescription`,{enumerable:!0,get:function(){return h}}),Object.defineProperty(exports,`FormField`,{enumerable:!0,get:function(){return l}}),Object.defineProperty(exports,`FormItem`,{enumerable:!0,get:function(){return f}}),Object.defineProperty(exports,`FormLabel`,{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,`FormMessage`,{enumerable:!0,get:function(){return g}}),Object.defineProperty(exports,`useFormField`,{enumerable:!0,get:function(){return u}});
+//# sourceMappingURL=form-rN5ezSn5.cjs.map

package/dist/{form-DV9tQbiO.cjs.map → form-rN5ezSn5.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"form-DV9tQbiO.cjs","names":["FormProvider","Controller","Field","FieldLabel","SlotPrimitive","FieldDescription"],"sources":["../packages/components/ui/form.tsx"],"sourcesContent":["'use client';\nimport { createContext, useContext, useId } from 'react';\nimport type { ControllerProps, FieldPath, FieldValues } from 'react-hook-form';\nimport { Controller, FormProvider, useFormContext, useFormState } from 'react-hook-form';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { type Label as LabelPrimitive, Slot as SlotPrimitive } from 'radix-ui';\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 = useContext(FormFieldContext);\n  const itemContext = useContext(FormItemContext);\n  const { getFieldState, control, resetField } = useFormContext();\n  const formState = useFormState({ name: fieldContext.name });\n  const fieldState = getFieldState(fieldContext.name, formState);\n\n  if (!fieldContext) {\n    throw new Error('useFormField should be used within <FormField>');\n  }\n\n  const { id } = itemContext;\n\n  return {\n    id,\n    control,\n    resetField,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  };\n};\n\ntype FormItemContextValue = {\n  id: string;\n};\n\nconst FormItemContext = createContext<FormItemContextValue>({} as FormItemContextValue);\n\nfunction FormItem({ className, ...props }: React.ComponentProps<'div'>) {\n  const id = useId();\n\n  return (\n    <FormItemContext.Provider value={{ id }}>\n      <Field orientation=\"responsive\" {...props} />\n    </FormItemContext.Provider>\n  );\n}\n\nfunction FormLabel({ ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {\n  const { formItemId } = useFormField();\n  return <FieldLabel htmlFor={formItemId} {...props} />;\n}\n\nfunction FormControl({ ...props }: React.ComponentProps<typeof SlotPrimitive.Slot>) {\n  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();\n\n  return (\n    <SlotPrimitive.Slot\n      data-slot=\"form-control\"\n      id={formItemId}\n      aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}\n      aria-invalid={!!error}\n      {...props}\n    />\n  );\n}\n\nfunction FormDescription({ className, ...props }: React.ComponentProps<'p'>) {\n  const { formDescriptionId } = useFormField();\n\n  return (\n    <FieldDescription\n      id={formDescriptionId}\n      className={cn(\n        'text-text-positive-weak text-sm 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":"0TAUA,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,YAA0B,EAAiB,CAC3C,GAAA,EAAA,EAAA,YAAyB,EAAgB,CACzC,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,CAEvF,SAAS,EAAS,CAAE,YAAW,GAAG,GAAsC,CACtE,IAAM,GAAA,EAAA,EAAA,QAAY,CAElB,OACE,EAAA,EAAA,KAAC,EAAgB,SAAA,CAAS,MAAO,CAAE,KAAI,WACrC,EAAA,EAAA,KAACC,EAAAA,MAAAA,CAAM,YAAY,aAAa,GAAI,GAAS,EACpB,CAI/B,SAAS,EAAU,CAAE,GAAG,GAA2D,CACjF,GAAM,CAAE,cAAe,GAAc,CACrC,OAAO,EAAA,EAAA,KAACC,EAAAA,WAAAA,CAAW,QAAS,EAAY,GAAI,GAAS,CAGvD,SAAS,EAAY,CAAE,GAAG,GAA0D,CAClF,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,CAIN,SAAS,EAAgB,CAAE,YAAW,GAAG,GAAoC,CAC3E,GAAM,CAAE,qBAAsB,GAAc,CAE5C,OACE,EAAA,EAAA,KAACC,EAAAA,iBAAAA,CACC,GAAI,EACJ,WAAA,EAAA,EAAA,IACE,6DACA,+DACA,+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"}
+{"version":3,"file":"form-rN5ezSn5.cjs","names":["FormProvider","Controller","Field","FieldLabel","SlotPrimitive","FieldDescription"],"sources":["../packages/components/ui/form.tsx"],"sourcesContent":["'use client';\nimport { createContext, useContext, useId } from 'react';\nimport type { ControllerProps, FieldPath, FieldValues } from 'react-hook-form';\nimport { Controller, FormProvider, useFormContext, useFormState } from 'react-hook-form';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { type Label as LabelPrimitive, Slot as SlotPrimitive } from 'radix-ui';\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 = useContext(FormFieldContext);\n  const itemContext = useContext(FormItemContext);\n  const { getFieldState, control, resetField } = useFormContext();\n  const formState = useFormState({ name: fieldContext.name });\n  const fieldState = getFieldState(fieldContext.name, formState);\n\n  if (!fieldContext) {\n    throw new Error('useFormField should be used within <FormField>');\n  }\n\n  const { id } = itemContext;\n\n  return {\n    id,\n    control,\n    resetField,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  };\n};\n\ntype FormItemContextValue = {\n  id: string;\n};\n\nconst FormItemContext = createContext<FormItemContextValue>({} as FormItemContextValue);\n\nfunction FormItem({ className, ...props }: React.ComponentProps<'div'>) {\n  const id = useId();\n\n  return (\n    <FormItemContext.Provider value={{ id }}>\n      <Field orientation=\"responsive\" {...props} />\n    </FormItemContext.Provider>\n  );\n}\n\nfunction FormLabel({ ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {\n  const { formItemId } = useFormField();\n  return <FieldLabel htmlFor={formItemId} {...props} />;\n}\n\nfunction FormControl({ ...props }: React.ComponentProps<typeof SlotPrimitive.Slot>) {\n  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();\n\n  return (\n    <SlotPrimitive.Slot\n      data-slot=\"form-control\"\n      id={formItemId}\n      aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}\n      aria-invalid={!!error}\n      {...props}\n    />\n  );\n}\n\nfunction FormDescription({ className, ...props }: React.ComponentProps<'p'>) {\n  const { formDescriptionId } = useFormField();\n\n  return (\n    <FieldDescription\n      id={formDescriptionId}\n      className={cn(\n        'text-text-positive-weak text-sm 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":"0TAUA,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,YAA0B,EAAiB,CAC3C,GAAA,EAAA,EAAA,YAAyB,EAAgB,CACzC,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,CAEvF,SAAS,EAAS,CAAE,YAAW,GAAG,GAAsC,CACtE,IAAM,GAAA,EAAA,EAAA,QAAY,CAElB,OACE,EAAA,EAAA,KAAC,EAAgB,SAAA,CAAS,MAAO,CAAE,KAAI,WACrC,EAAA,EAAA,KAACC,EAAAA,MAAAA,CAAM,YAAY,aAAa,GAAI,GAAS,EACpB,CAI/B,SAAS,EAAU,CAAE,GAAG,GAA2D,CACjF,GAAM,CAAE,cAAe,GAAc,CACrC,OAAO,EAAA,EAAA,KAACC,EAAAA,WAAAA,CAAW,QAAS,EAAY,GAAI,GAAS,CAGvD,SAAS,EAAY,CAAE,GAAG,GAA0D,CAClF,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,CAIN,SAAS,EAAgB,CAAE,YAAW,GAAG,GAAoC,CAC3E,GAAM,CAAE,qBAAsB,GAAc,CAE5C,OACE,EAAA,EAAA,KAACC,EAAAA,iBAAAA,CACC,GAAI,EACJ,WAAA,EAAA,EAAA,IACE,6DACA,+DACA,+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/{form-wrapper-CXrhlLBL.cjs → form-wrapper-A1DZnRIF.cjs}

@@ -1,2 +1,2 @@
-const e=require(`./chunk-CUT6urMc.cjs`),t=require(`./error-dialog-COl3CQ1E.cjs`),n=require(`./field-A43YZ5Wj.cjs`),r=require(`./form-DV9tQbiO.cjs`);let i=require(`lucide-react`);i=e.__toESM(i);let a=require(`react`);a=e.__toESM(a);let o=require(`react/jsx-runtime`);o=e.__toESM(o);let s=require(`react-hook-form`);s=e.__toESM(s);let c=require(`@hookform/error-message`);c=e.__toESM(c);const l=({form:e,isResetAfterSubmit:l=!0,title:u,description:d,className:f,onSubmit:p,onError:m,onSubcribe:h,children:g})=>{let _=(0,s.useForm)({...e,criteriaMode:`all`}),{formState:v,reset:y,handleSubmit:b,subscribe:x}=_,{dirtyFields:S}=v,[C,w]=(0,a.useState)(!1),T=(0,a.useCallback)(e=>{p(e,v,S),l&&y()},[S,v,l,p,y]),E=(0,a.useCallback)(e=>{Object.keys(e).length!==0&&(m?.(e),w(!0))},[m]);return(0,a.useEffect)(()=>{if(!h)return;let e=x({formState:{values:!0},callback:({values:e})=>{h(e)}});return()=>e()},[h,x]),(0,o.jsxs)(r.Form,{..._,children:[(0,o.jsx)(`form`,{className:f,onSubmit:b(T,E),children:(0,o.jsxs)(n.FieldSet,{children:[(0,o.jsxs)(a.Activity,{mode:u||d?`visible`:`hidden`,children:[(0,o.jsx)(n.FieldLegend,{children:u}),(0,o.jsx)(n.FieldDescription,{children:d}),(0,o.jsx)(n.FieldSeparator,{})]}),(0,o.jsx)(n.FieldGroup,{children:g})]})}),(0,o.jsx)(t.ErrorDialog,{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,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(a.Activity,{mode:Object.keys(v.errors).length>0?`visible`:`hidden`,children:(0,o.jsxs)(`div`,{className:`flex max-w-100 flex-col gap-2 px-4`,children:[(0,o.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,o.jsx)(`div`,{className:`flex flex-col space-y-1`,children:Object.entries(v.errors).map(([e])=>(0,o.jsx)(c.ErrorMessage,{errors:v.errors,name:e,render:({messages:e})=>e?(0,o.jsx)(o.Fragment,{children:Object.entries(e).map(([e,t])=>(0,o.jsxs)(`div`,{className:`text-accent-foreground flex items-start gap-x-1 truncate text-sm font-normal`,children:[(0,o.jsx)(i.AlertCircleIcon,{size:16,className:`text-destructive mt-0.5 min-w-4 flex-0`}),(0,o.jsx)(`p`,{className:`line-clamp-2 flex-1 text-wrap`,children:t})]},e))}):null},e))})]})}),(0,o.jsx)(a.Activity,{mode:Object.keys(v.errors).length===0?`visible`:`hidden`,children:(0,o.jsx)(`p`,{className:`text-muted-foreground text-sm`,children:`No errors found.`})})]})})]})};Object.defineProperty(exports,`FormWrapper`,{enumerable:!0,get:function(){return l}});
-//# sourceMappingURL=form-wrapper-CXrhlLBL.cjs.map
+const e=require(`./chunk-CUT6urMc.cjs`),t=require(`./error-dialog-COl3CQ1E.cjs`),n=require(`./field-DWOm17T1.cjs`),r=require(`./form-rN5ezSn5.cjs`);let i=require(`lucide-react`);i=e.__toESM(i);let a=require(`react`);a=e.__toESM(a);let o=require(`react/jsx-runtime`);o=e.__toESM(o);let s=require(`react-hook-form`);s=e.__toESM(s);let c=require(`@hookform/error-message`);c=e.__toESM(c);const l=({form:e,isResetAfterSubmit:l=!0,title:u,description:d,className:f,onSubmit:p,onError:m,onSubcribe:h,children:g})=>{let _=(0,s.useForm)({...e,criteriaMode:`all`}),{formState:v,reset:y,handleSubmit:b,subscribe:x}=_,{dirtyFields:S}=v,[C,w]=(0,a.useState)(!1),T=(0,a.useCallback)(e=>{p(e,v,S),l&&y()},[S,v,l,p,y]),E=(0,a.useCallback)(e=>{Object.keys(e).length!==0&&(m?.(e),w(!0))},[m]);return(0,a.useEffect)(()=>{if(!h)return;let e=x({formState:{values:!0},callback:({values:e})=>{h(e)}});return()=>e()},[h,x]),(0,o.jsxs)(r.Form,{..._,children:[(0,o.jsx)(`form`,{className:f,onSubmit:b(T,E),children:(0,o.jsxs)(n.FieldSet,{children:[(0,o.jsxs)(a.Activity,{mode:u||d?`visible`:`hidden`,children:[(0,o.jsx)(n.FieldLegend,{children:u}),(0,o.jsx)(n.FieldDescription,{children:d}),(0,o.jsx)(n.FieldSeparator,{})]}),(0,o.jsx)(n.FieldGroup,{children:g})]})}),(0,o.jsx)(t.ErrorDialog,{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,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(a.Activity,{mode:Object.keys(v.errors).length>0?`visible`:`hidden`,children:(0,o.jsxs)(`div`,{className:`flex max-w-100 flex-col gap-2 px-4`,children:[(0,o.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,o.jsx)(`div`,{className:`flex flex-col space-y-1`,children:Object.entries(v.errors).map(([e])=>(0,o.jsx)(c.ErrorMessage,{errors:v.errors,name:e,render:({messages:e})=>e?(0,o.jsx)(o.Fragment,{children:Object.entries(e).map(([e,t])=>(0,o.jsxs)(`div`,{className:`text-accent-foreground flex items-start gap-x-1 truncate text-sm font-normal`,children:[(0,o.jsx)(i.AlertCircleIcon,{size:16,className:`text-destructive mt-0.5 min-w-4 flex-0`}),(0,o.jsx)(`p`,{className:`line-clamp-2 flex-1 text-wrap`,children:t})]},e))}):null},e))})]})}),(0,o.jsx)(a.Activity,{mode:Object.keys(v.errors).length===0?`visible`:`hidden`,children:(0,o.jsx)(`p`,{className:`text-muted-foreground text-sm`,children:`No errors found.`})})]})})]})};Object.defineProperty(exports,`FormWrapper`,{enumerable:!0,get:function(){return l}});
+//# sourceMappingURL=form-wrapper-A1DZnRIF.cjs.map

package/dist/{form-wrapper-CXrhlLBL.cjs.map → form-wrapper-A1DZnRIF.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"form-wrapper-CXrhlLBL.cjs","names":["Form","FieldSet","Activity","FieldLegend","FieldDescription","FieldSeparator","FieldGroup","ErrorDialog","ErrorMessage","AlertCircleIcon"],"sources":["../packages/components/forms/form-wrapper.tsx"],"sourcesContent":["import { Activity, useCallback, useEffect, useState } from 'react';\nimport { type FieldValues, type FormState, type SubmitErrorHandler, type SubmitHandler, type UseFormProps, useForm } from 'react-hook-form';\n\nimport { AlertCircleIcon } from 'lucide-react';\n\nimport { ErrorMessage } from '@hookform/error-message';\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":"iYAsBA,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,KAAAA,CAAK,GAAI,aACR,EAAA,EAAA,KAAC,OAAA,CAAgB,YAAW,SAAU,EAAa,EAAkB,EAAgB,WACnF,EAAA,EAAA,MAACC,EAAAA,SAAAA,CAAAA,SAAAA,EACC,EAAA,EAAA,MAACC,EAAAA,SAAAA,CAAS,KAAM,GAAS,EAAc,UAAY,oBACjD,EAAA,EAAA,KAACC,EAAAA,YAAAA,CAAAA,SAAa,EAAA,CAAoB,EAClC,EAAA,EAAA,KAACC,EAAAA,iBAAAA,CAAAA,SAAkB,EAAA,CAA+B,EAClD,EAAA,EAAA,KAACC,EAAAA,eAAAA,EAAAA,CAAiB,GACT,EACX,EAAA,EAAA,KAACC,EAAAA,WAAAA,CAAY,WAAA,CAAsB,CAAA,CAAA,CAC1B,EACN,EACP,EAAA,EAAA,KAACC,EAAAA,YAAAA,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"}
+{"version":3,"file":"form-wrapper-A1DZnRIF.cjs","names":["Form","FieldSet","Activity","FieldLegend","FieldDescription","FieldSeparator","FieldGroup","ErrorDialog","ErrorMessage","AlertCircleIcon"],"sources":["../packages/components/forms/form-wrapper.tsx"],"sourcesContent":["import { Activity, useCallback, useEffect, useState } from 'react';\nimport { type FieldValues, type FormState, type SubmitErrorHandler, type SubmitHandler, type UseFormProps, useForm } from 'react-hook-form';\n\nimport { AlertCircleIcon } from 'lucide-react';\n\nimport { ErrorMessage } from '@hookform/error-message';\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":"iYAsBA,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,KAAAA,CAAK,GAAI,aACR,EAAA,EAAA,KAAC,OAAA,CAAgB,YAAW,SAAU,EAAa,EAAkB,EAAgB,WACnF,EAAA,EAAA,MAACC,EAAAA,SAAAA,CAAAA,SAAAA,EACC,EAAA,EAAA,MAACC,EAAAA,SAAAA,CAAS,KAAM,GAAS,EAAc,UAAY,oBACjD,EAAA,EAAA,KAACC,EAAAA,YAAAA,CAAAA,SAAa,EAAA,CAAoB,EAClC,EAAA,EAAA,KAACC,EAAAA,iBAAAA,CAAAA,SAAkB,EAAA,CAA+B,EAClD,EAAA,EAAA,KAACC,EAAAA,eAAAA,EAAAA,CAAiB,GACT,EACX,EAAA,EAAA,KAACC,EAAAA,WAAAA,CAAY,WAAA,CAAsB,CAAA,CAAA,CAC1B,EACN,EACP,EAAA,EAAA,KAACC,EAAAA,YAAAA,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/{form-wrapper-Cw_ARA0-.js → form-wrapper-CSmgFsG0.js}

@@ -1,2 +1,2 @@
-import{ErrorDialog as e}from"./error-dialog-BLiYMBlh.js";import{FieldDescription as t,FieldGroup as n,FieldLegend as r,FieldSeparator as i,FieldSet as a}from"./field-CGacT8J3.js";import{Form as o}from"./form-B_tL9lO4.js";import{AlertCircleIcon as s}from"lucide-react";import{Activity as c,useCallback as l,useEffect as u,useState as d}from"react";import{Fragment as f,jsx as p,jsxs as m}from"react/jsx-runtime";import{useForm as h}from"react-hook-form";import{ErrorMessage as g}from"@hookform/error-message";const _=({form:_,isResetAfterSubmit:v=!0,title:y,description:b,className:x,onSubmit:S,onError:C,onSubcribe:w,children:T})=>{let E=h({..._,criteriaMode:`all`}),{formState:D,reset:O,handleSubmit:k,subscribe:A}=E,{dirtyFields:j}=D,[M,N]=d(!1),P=l(e=>{S(e,D,j),v&&O()},[j,D,v,S,O]),F=l(e=>{Object.keys(e).length!==0&&(C?.(e),N(!0))},[C]);return u(()=>{if(!w)return;let e=A({formState:{values:!0},callback:({values:e})=>{w(e)}});return()=>e()},[w,A]),m(o,{...E,children:[p(`form`,{className:x,onSubmit:k(P,F),children:m(a,{children:[m(c,{mode:y||b?`visible`:`hidden`,children:[p(r,{children:y}),p(t,{children:b}),p(i,{})]}),p(n,{children:T})]})}),p(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&&m(f,{children:[p(c,{mode:Object.keys(D.errors).length>0?`visible`:`hidden`,children:m(`div`,{className:`flex max-w-100 flex-col gap-2 px-4`,children:[p(`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:`}),p(`div`,{className:`flex flex-col space-y-1`,children:Object.entries(D.errors).map(([e])=>p(g,{errors:D.errors,name:e,render:({messages:e})=>e?p(f,{children:Object.entries(e).map(([e,t])=>m(`div`,{className:`text-accent-foreground flex items-start gap-x-1 truncate text-sm font-normal`,children:[p(s,{size:16,className:`text-destructive mt-0.5 min-w-4 flex-0`}),p(`p`,{className:`line-clamp-2 flex-1 text-wrap`,children:t})]},e))}):null},e))})]})}),p(c,{mode:Object.keys(D.errors).length===0?`visible`:`hidden`,children:p(`p`,{className:`text-muted-foreground text-sm`,children:`No errors found.`})})]})})]})};export{_ as FormWrapper};
-//# sourceMappingURL=form-wrapper-Cw_ARA0-.js.map
+import{ErrorDialog as e}from"./error-dialog-BLiYMBlh.js";import{FieldDescription as t,FieldGroup as n,FieldLegend as r,FieldSeparator as i,FieldSet as a}from"./field-GVRRZiSk.js";import{Form as o}from"./form-De64-oXe.js";import{AlertCircleIcon as s}from"lucide-react";import{Activity as c,useCallback as l,useEffect as u,useState as d}from"react";import{Fragment as f,jsx as p,jsxs as m}from"react/jsx-runtime";import{useForm as h}from"react-hook-form";import{ErrorMessage as g}from"@hookform/error-message";const _=({form:_,isResetAfterSubmit:v=!0,title:y,description:b,className:x,onSubmit:S,onError:C,onSubcribe:w,children:T})=>{let E=h({..._,criteriaMode:`all`}),{formState:D,reset:O,handleSubmit:k,subscribe:A}=E,{dirtyFields:j}=D,[M,N]=d(!1),P=l(e=>{S(e,D,j),v&&O()},[j,D,v,S,O]),F=l(e=>{Object.keys(e).length!==0&&(C?.(e),N(!0))},[C]);return u(()=>{if(!w)return;let e=A({formState:{values:!0},callback:({values:e})=>{w(e)}});return()=>e()},[w,A]),m(o,{...E,children:[p(`form`,{className:x,onSubmit:k(P,F),children:m(a,{children:[m(c,{mode:y||b?`visible`:`hidden`,children:[p(r,{children:y}),p(t,{children:b}),p(i,{})]}),p(n,{children:T})]})}),p(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&&m(f,{children:[p(c,{mode:Object.keys(D.errors).length>0?`visible`:`hidden`,children:m(`div`,{className:`flex max-w-100 flex-col gap-2 px-4`,children:[p(`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:`}),p(`div`,{className:`flex flex-col space-y-1`,children:Object.entries(D.errors).map(([e])=>p(g,{errors:D.errors,name:e,render:({messages:e})=>e?p(f,{children:Object.entries(e).map(([e,t])=>m(`div`,{className:`text-accent-foreground flex items-start gap-x-1 truncate text-sm font-normal`,children:[p(s,{size:16,className:`text-destructive mt-0.5 min-w-4 flex-0`}),p(`p`,{className:`line-clamp-2 flex-1 text-wrap`,children:t})]},e))}):null},e))})]})}),p(c,{mode:Object.keys(D.errors).length===0?`visible`:`hidden`,children:p(`p`,{className:`text-muted-foreground text-sm`,children:`No errors found.`})})]})})]})};export{_ as FormWrapper};
+//# sourceMappingURL=form-wrapper-CSmgFsG0.js.map

package/dist/{form-wrapper-Cw_ARA0-.js.map → form-wrapper-CSmgFsG0.js.map}

@@ -1 +1 @@
-{"version":3,"file":"form-wrapper-Cw_ARA0-.js","names":[],"sources":["../packages/components/forms/form-wrapper.tsx"],"sourcesContent":["import { Activity, useCallback, useEffect, useState } from 'react';\nimport { type FieldValues, type FormState, type SubmitErrorHandler, type SubmitHandler, type UseFormProps, useForm } from 'react-hook-form';\n\nimport { AlertCircleIcon } from 'lucide-react';\n\nimport { ErrorMessage } from '@hookform/error-message';\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":"4fAsBA,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"}
+{"version":3,"file":"form-wrapper-CSmgFsG0.js","names":[],"sources":["../packages/components/forms/form-wrapper.tsx"],"sourcesContent":["import { Activity, useCallback, useEffect, useState } from 'react';\nimport { type FieldValues, type FormState, type SubmitErrorHandler, type SubmitHandler, type UseFormProps, useForm } from 'react-hook-form';\n\nimport { AlertCircleIcon } from 'lucide-react';\n\nimport { ErrorMessage } from '@hookform/error-message';\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":"4fAsBA,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/combobox-field.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require(`../chunk-CUT6urMc.cjs`);require(`../dist-CAevLI5t.cjs`),require(`../button-variants-BHDyMRNh.cjs`);const t=require(`../button-BCahPWI8.cjs`);require(`../label-D6mAvVmw.cjs`),require(`../separator-DMMoR-d2.cjs`);const n=require(`../field-A43YZ5Wj.cjs`),r=require(`../form-DV9tQbiO.cjs`);require(`../dialog-BBODhbxh.cjs`);const i=require(`../command-C13pL2M3.cjs`),a=require(`../popover-D6vyPDKA.cjs`);let o=require(`lucide-react`);o=e.__toESM(o);let s=require(`@customafk/react-toolkit/utils`);s=e.__toESM(s);let c=require(`react`);c=e.__toESM(c);let l=require(`react/jsx-runtime`);l=e.__toESM(l);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.FormField,{name:e,render:({field:e})=>(0,l.jsxs)(r.FormItem,{className:`w-full`,children:[(0,l.jsx)(c.Activity,{mode:u||f?`visible`:`hidden`,children:(0,l.jsxs)(n.FieldContent,{children:[(0,l.jsx)(r.FormLabel,{children:u}),!!f&&(0,l.jsx)(r.FormDescription,{children:f})]})}),(0,l.jsxs)(a.Popover,{modal:!0,children:[(0,l.jsx)(a.PopoverTrigger,{asChild:!0,children:(0,l.jsx)(r.FormControl,{children:(0,l.jsxs)(t.Button,{type:`button`,variant:`outline`,role:`combobox`,color:`muted`,className:(0,s.cn)(`shadow-input flex justify-between rounded-md px-3`,`outline-border-weak font-normal`,`[&_div]:w-full`,`[&_div]:justify-between`,`hover:outline-border`,`data-[state=open]:text-text-positive-muted`,`data-[state=open]:outline-1`,`data-[state=open]:outline-primary-strong`,`data-[state=open]:ring-primary-weak`,`data-[state=open]:ring-4`,`focus:border-primary-strong`,`focus:ring-4`,`focus:ring-primary-weak`,`focus:outline-1`,`focus:outline-primary-strong`),children:[e.value?(0,l.jsx)(`span`,{className:`flex min-w-0 items-center gap-2`,children:p?.find(({value:t})=>t===e.value)?.label}):(0,l.jsx)(`span`,{className:`text-text-positive-muted`,children:d}),(0,l.jsx)(o.ChevronDownIcon,{size:16,className:`text-text-positive-weak shrink-0`,"aria-hidden":`true`})]})})}),(0,l.jsx)(a.PopoverContent,{className:`w-[var(--radix-popover-trigger-width)] p-0`,children:(0,l.jsxs)(i.Command,{className:`border-none`,children:[(0,l.jsx)(i.CommandInput,{placeholder:d??`Tìm kiếm`}),(0,l.jsxs)(i.CommandList,{children:[(0,l.jsx)(i.CommandGroup,{className:`max-h-40 overflow-y-auto`,children:p?.map(({value:t,label:n})=>(0,l.jsx)(i.CommandItem,{value:n,onSelect:()=>e.onChange(t),children:n},t))}),m&&(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(i.CommandSeparator,{}),(0,l.jsx)(i.CommandGroup,{children:(0,l.jsxs)(t.Button,{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.CommandEmpty,{children:`Không có kết quả`})]})})]})]})});exports.ComboboxField=u;
+"use client";const e=require(`../chunk-CUT6urMc.cjs`);require(`../dist-CAevLI5t.cjs`),require(`../button-variants-BHDyMRNh.cjs`);const t=require(`../button-BCahPWI8.cjs`);require(`../label-D6mAvVmw.cjs`),require(`../separator-DMMoR-d2.cjs`);const n=require(`../field-DWOm17T1.cjs`),r=require(`../form-rN5ezSn5.cjs`);require(`../dialog-BBODhbxh.cjs`);const i=require(`../command-C13pL2M3.cjs`),a=require(`../popover-D6vyPDKA.cjs`);let o=require(`lucide-react`);o=e.__toESM(o);let s=require(`@customafk/react-toolkit/utils`);s=e.__toESM(s);let c=require(`react`);c=e.__toESM(c);let l=require(`react/jsx-runtime`);l=e.__toESM(l);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.FormField,{name:e,render:({field:e})=>(0,l.jsxs)(r.FormItem,{className:`w-full`,children:[(0,l.jsx)(c.Activity,{mode:u||f?`visible`:`hidden`,children:(0,l.jsxs)(n.FieldContent,{children:[(0,l.jsx)(r.FormLabel,{children:u}),!!f&&(0,l.jsx)(r.FormDescription,{children:f})]})}),(0,l.jsx)(`div`,{className:`basis-3/5 flex justify-end`,children:(0,l.jsxs)(a.Popover,{modal:!0,children:[(0,l.jsx)(a.PopoverTrigger,{asChild:!0,children:(0,l.jsx)(r.FormControl,{children:(0,l.jsxs)(t.Button,{type:`button`,variant:`outline`,role:`combobox`,color:`muted`,className:(0,s.cn)(`w-full md:max-w-80`,`shadow-input flex justify-between rounded-md px-3`,`outline-border-weak font-normal`,`[&_div]:w-full`,`[&_div]:justify-between`,`hover:outline-border`,`data-[state=open]:text-text-positive-muted`,`data-[state=open]:outline-1`,`data-[state=open]:outline-primary-strong`,`data-[state=open]:ring-primary-weak`,`data-[state=open]:ring-4`,`focus:border-primary-strong`,`focus:ring-4`,`focus:ring-primary-weak`,`focus:outline-1`,`focus:outline-primary-strong`),children:[e.value?(0,l.jsx)(`span`,{className:`flex min-w-0 items-center gap-2`,children:p?.find(({value:t})=>t===e.value)?.label}):(0,l.jsx)(`span`,{className:`text-text-positive-muted`,children:d}),(0,l.jsx)(o.ChevronDownIcon,{size:16,className:`text-text-positive-weak shrink-0`,"aria-hidden":`true`})]})})}),(0,l.jsx)(a.PopoverContent,{className:`w-[var(--radix-popover-trigger-width)] p-0`,children:(0,l.jsxs)(i.Command,{className:`border-none`,children:[(0,l.jsx)(i.CommandInput,{placeholder:d??`Tìm kiếm`}),(0,l.jsxs)(i.CommandList,{children:[(0,l.jsx)(i.CommandGroup,{className:`max-h-40 overflow-y-auto`,children:p?.map(({value:t,label:n})=>(0,l.jsx)(i.CommandItem,{value:n,onSelect:()=>e.onChange(t),children:n},t))}),m&&(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(i.CommandSeparator,{}),(0,l.jsx)(i.CommandGroup,{children:(0,l.jsxs)(t.Button,{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.CommandEmpty,{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            <Popover modal={true}>\n              <PopoverTrigger asChild>\n                <FormControl>\n                  <Button\n                    type=\"button\"\n                    variant=\"outline\"\n                    role=\"combobox\"\n                    color=\"muted\"\n                    className={cn(\n                      'shadow-input flex justify-between rounded-md px-3',\n                      'outline-border-weak font-normal',\n                      '[&_div]:w-full',\n                      '[&_div]:justify-between',\n                      'hover:outline-border',\n                      'data-[state=open]:text-text-positive-muted',\n                      'data-[state=open]:outline-1',\n                      'data-[state=open]:outline-primary-strong',\n                      'data-[state=open]:ring-primary-weak',\n                      'data-[state=open]:ring-4',\n                      'focus:border-primary-strong',\n                      'focus:ring-4',\n                      'focus:ring-primary-weak',\n                      'focus:outline-1',\n                      'focus:outline-primary-strong'\n                    )}\n                  >\n                    {field.value ? (\n                      <span className=\"flex min-w-0 items-center gap-2\">{options?.find(({ value }) => value === field.value)?.label}</span>\n                    ) : (\n                      <span className=\"text-text-positive-muted\">{placeholder}</span>\n                    )}\n                    <ChevronDownIcon size={16} className=\"text-text-positive-weak shrink-0\" aria-hidden=\"true\" />\n                  </Button>\n                </FormControl>\n              </PopoverTrigger>\n              <PopoverContent className=\"w-[var(--radix-popover-trigger-width)] p-0\">\n                <Command className=\"border-none\">\n                  <CommandInput placeholder={placeholder ?? 'Tìm kiếm'} />\n                  <CommandList>\n                    <CommandGroup className=\"max-h-40 overflow-y-auto\">\n                      {options?.map(({ value, label }) => (\n                        <CommandItem key={value} value={label} onSelect={() => field.onChange(value)}>\n                          {label}\n                        </CommandItem>\n                      ))}\n                    </CommandGroup>\n                    {onAddNewItem && (\n                      <>\n                        <CommandSeparator />\n                        <CommandGroup>\n                          <Button type=\"button\" variant=\"ghost\" className=\"w-full justify-start font-normal\">\n                            <PlusIcon size={14} className=\"-ms-2 opacity-60\" aria-hidden=\"true\" />\n                            Thêm mới\n                          </Button>\n                        </CommandGroup>\n                      </>\n                    )}\n                  </CommandList>\n                  <CommandEmpty>Không có kết quả</CommandEmpty>\n                </Command>\n              </PopoverContent>\n            </Popover>\n          </FormItem>\n        );\n      }}\n    />\n  );\n};\n"],"mappings":"knBAyBA,MAAa,GAAiE,CAC5E,OACA,QAAQ,WACR,cAAc,eACd,cACA,UACA,mBAGE,EAAA,EAAA,KAACA,EAAAA,UAAAA,CACO,OACN,QAAS,CAAE,YAEP,EAAA,EAAA,MAACC,EAAAA,SAAAA,CAAS,UAAU,oBAClB,EAAA,EAAA,KAACC,EAAAA,SAAAA,CAAS,KAAM,GAAS,EAAc,UAAY,mBACjD,EAAA,EAAA,MAACC,EAAAA,aAAAA,CAAAA,SAAAA,EACC,EAAA,EAAA,KAACC,EAAAA,UAAAA,CAAAA,SAAW,EAAA,CAAkB,CAC7B,CAAC,CAAC,IAAe,EAAA,EAAA,KAACC,EAAAA,gBAAAA,CAAAA,SAAiB,EAAA,CAA8B,CAAA,CAAA,CACrD,EACN,EACX,EAAA,EAAA,MAACC,EAAAA,QAAAA,CAAQ,MAAO,cACd,EAAA,EAAA,KAACC,EAAAA,eAAAA,CAAe,QAAA,aACd,EAAA,EAAA,KAACC,EAAAA,YAAAA,CAAAA,UACC,EAAA,EAAA,MAACC,EAAAA,OAAAA,CACC,KAAK,SACL,QAAQ,UACR,KAAK,WACL,MAAM,QACN,WAAA,EAAA,EAAA,IACE,oDACA,kCACA,iBACA,0BACA,uBACA,6CACA,8BACA,2CACA,sCACA,2BACA,8BACA,eACA,0BACA,kBACA,+BACD,WAEA,EAAM,OACL,EAAA,EAAA,KAAC,OAAA,CAAK,UAAU,2CAAmC,GAAS,MAAM,CAAE,WAAY,IAAU,EAAM,MAAM,EAAE,OAAa,EAErH,EAAA,EAAA,KAAC,OAAA,CAAK,UAAU,oCAA4B,GAAmB,EAEjE,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,uDACxB,EAAA,EAAA,MAACC,EAAAA,QAAAA,CAAQ,UAAU,yBACjB,EAAA,EAAA,KAACC,EAAAA,aAAAA,CAAa,YAAa,GAAe,WAAA,CAAc,EACxD,EAAA,EAAA,MAACC,EAAAA,YAAAA,CAAAA,SAAAA,EACC,EAAA,EAAA,KAACC,EAAAA,aAAAA,CAAa,UAAU,oCACrB,GAAS,KAAK,CAAE,QAAO,MAAA,MACtB,EAAA,EAAA,KAACC,EAAAA,YAAAA,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,iBAAAA,EAAAA,CAAmB,EACpB,EAAA,EAAA,KAACH,EAAAA,aAAAA,CAAAA,UACC,EAAA,EAAA,MAACN,EAAAA,OAAAA,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,aAAAA,CAAAA,SAAa,mBAAA,CAA+B,GACrC,EACK,CAAA,EACT,CAAA,EACD,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                        '[&_div]:justify-between',\n                        'hover:outline-border',\n                        'data-[state=open]:text-text-positive-muted',\n                        'data-[state=open]:outline-1',\n                        'data-[state=open]:outline-primary-strong',\n                        'data-[state=open]:ring-primary-weak',\n                        'data-[state=open]:ring-4',\n                        'focus:border-primary-strong',\n                        'focus:ring-4',\n                        'focus:ring-primary-weak',\n                        'focus:outline-1',\n                        'focus:outline-primary-strong'\n                      )}\n                    >\n                      {field.value ? (\n                        <span className=\"flex min-w-0 items-center gap-2\">{options?.find(({ value }) => value === field.value)?.label}</span>\n                      ) : (\n                        <span className=\"text-text-positive-muted\">{placeholder}</span>\n                      )}\n                      <ChevronDownIcon size={16} className=\"text-text-positive-weak shrink-0\" aria-hidden=\"true\" />\n                    </Button>\n                  </FormControl>\n                </PopoverTrigger>\n                <PopoverContent className=\"w-[var(--radix-popover-trigger-width)] p-0\">\n                  <Command className=\"border-none\">\n                    <CommandInput placeholder={placeholder ?? 'Tìm kiếm'} />\n                    <CommandList>\n                      <CommandGroup className=\"max-h-40 overflow-y-auto\">\n                        {options?.map(({ value, label }) => (\n                          <CommandItem key={value} value={label} onSelect={() => field.onChange(value)}>\n                            {label}\n                          </CommandItem>\n                        ))}\n                      </CommandGroup>\n                      {onAddNewItem && (\n                        <>\n                          <CommandSeparator />\n                          <CommandGroup>\n                            <Button type=\"button\" variant=\"ghost\" className=\"w-full justify-start font-normal\">\n                              <PlusIcon size={14} className=\"-ms-2 opacity-60\" aria-hidden=\"true\" />\n                              Thêm mới\n                            </Button>\n                          </CommandGroup>\n                        </>\n                      )}\n                    </CommandList>\n                    <CommandEmpty>Không có kết quả</CommandEmpty>\n                  </Command>\n                </PopoverContent>\n              </Popover>\n            </div>\n          </FormItem>\n        );\n      }}\n    />\n  );\n};\n"],"mappings":"knBAyBA,MAAa,GAAiE,CAC5E,OACA,QAAQ,WACR,cAAc,eACd,cACA,UACA,mBAGE,EAAA,EAAA,KAACA,EAAAA,UAAAA,CACO,OACN,QAAS,CAAE,YAEP,EAAA,EAAA,MAACC,EAAAA,SAAAA,CAAS,UAAU,oBAClB,EAAA,EAAA,KAACC,EAAAA,SAAAA,CAAS,KAAM,GAAS,EAAc,UAAY,mBACjD,EAAA,EAAA,MAACC,EAAAA,aAAAA,CAAAA,SAAAA,EACC,EAAA,EAAA,KAACC,EAAAA,UAAAA,CAAAA,SAAW,EAAA,CAAkB,CAC7B,CAAC,CAAC,IAAe,EAAA,EAAA,KAACC,EAAAA,gBAAAA,CAAAA,SAAiB,EAAA,CAA8B,CAAA,CAAA,CACrD,EACN,EACX,EAAA,EAAA,KAAC,MAAA,CAAI,UAAU,uCACb,EAAA,EAAA,MAACC,EAAAA,QAAAA,CAAQ,MAAO,cACd,EAAA,EAAA,KAACC,EAAAA,eAAAA,CAAe,QAAA,aACd,EAAA,EAAA,KAACC,EAAAA,YAAAA,CAAAA,UACC,EAAA,EAAA,MAACC,EAAAA,OAAAA,CACC,KAAK,SACL,QAAQ,UACR,KAAK,WACL,MAAM,QACN,WAAA,EAAA,EAAA,IACE,qBACA,oDACA,kCACA,iBACA,0BACA,uBACA,6CACA,8BACA,2CACA,sCACA,2BACA,8BACA,eACA,0BACA,kBACA,+BACD,WAEA,EAAM,OACL,EAAA,EAAA,KAAC,OAAA,CAAK,UAAU,2CAAmC,GAAS,MAAM,CAAE,WAAY,IAAU,EAAM,MAAM,EAAE,OAAa,EAErH,EAAA,EAAA,KAAC,OAAA,CAAK,UAAU,oCAA4B,GAAmB,EAEjE,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,uDACxB,EAAA,EAAA,MAACC,EAAAA,QAAAA,CAAQ,UAAU,yBACjB,EAAA,EAAA,KAACC,EAAAA,aAAAA,CAAa,YAAa,GAAe,WAAA,CAAc,EACxD,EAAA,EAAA,MAACC,EAAAA,YAAAA,CAAAA,SAAAA,EACC,EAAA,EAAA,KAACC,EAAAA,aAAAA,CAAa,UAAU,oCACrB,GAAS,KAAK,CAAE,QAAO,MAAA,MACtB,EAAA,EAAA,KAACC,EAAAA,YAAAA,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,iBAAAA,EAAAA,CAAmB,EACpB,EAAA,EAAA,KAACH,EAAAA,aAAAA,CAAAA,UACC,EAAA,EAAA,MAACN,EAAAA,OAAAA,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,aAAAA,CAAAA,SAAa,mBAAA,CAA+B,GACrC,EACK,CAAA,EACT,EACN,CAAA,EACG,EAGf"}

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

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

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

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

package/dist/forms/combobox-field.js

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

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

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

package/dist/forms/date-field.cjs

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

package/dist/forms/date-field.js

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

package/dist/forms/form-wrapper.cjs

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

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

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

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

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

package/dist/forms/form-wrapper.js

@@ -1 +1 @@
-import"../button-variants-aFWCWUvu.js";import"../alert-dialog-CtzD_gfT.js";import"../error-dialog-BLiYMBlh.js";import"../label-CdrxlBJ8.js";import"../separator-D17HxS2f.js";import"../field-CGacT8J3.js";import"../form-B_tL9lO4.js";import{FormWrapper as e}from"../form-wrapper-Cw_ARA0-.js";export{e as FormWrapper};
+import"../button-variants-aFWCWUvu.js";import"../alert-dialog-CtzD_gfT.js";import"../error-dialog-BLiYMBlh.js";import"../label-CdrxlBJ8.js";import"../separator-D17HxS2f.js";import"../field-GVRRZiSk.js";import"../form-De64-oXe.js";import{FormWrapper as e}from"../form-wrapper-CSmgFsG0.js";export{e as FormWrapper};

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

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

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

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