@customafk/lunas-ui 0.1.0 → 0.1.1

package/dist/forms/number-field.js

@@ -1,2 +1,2 @@
-"use client";import"../label-DeTp9ffC.js";import"../separator-aMl6UNM2.js";import{n as e}from"../field-QnC1I0hN.js";import{a as t,i as n,n as r,o as i,r as a,s as o}from"../form-CoqTElrC.js";import"../input-C2puAk5o.js";import{t as s}from"../number-input-DtqX-30b.js";import{Activity as c}from"react";import{jsx as l,jsxs as u}from"react/jsx-runtime";import{useWatch as d}from"react-hook-form";const f=({name:f,label:p=`Number Field`,placeholder:m=`0`,isShowErrorMsg:h=!1,isShowCount:g=!1,isNested:_=!1,unitText:v=``,description:y=``,onValueChange:b})=>{let x=d({name:f});return _?l(n,{name:f,render:({field:{onChange:n,...d}})=>u(t,{orientation:`vertical`,className:`gap-1`,children:[l(c,{mode:p||y?`visible`:`hidden`,children:u(e,{children:[l(i,{className:`text-xs`,children:p}),!!y&&l(a,{children:y})]})}),u(`div`,{className:`flex flex-col w-full justify-start`,children:[l(r,{children:l(s,{...d,placeholder:m,unitText:v,wrapperClassName:`w-full`,onValueChange:e=>{n(e),b?.(e)}})}),g&&u(`div`,{className:`text-muted-foreground text-end text-xs`,children:[x?.length??0,` characters`]}),h&&l(o,{})]})]})}):l(n,{name:f,render:({field:{onChange:n,...d}})=>u(t,{children:[l(c,{mode:p||y?`visible`:`hidden`,children:u(e,{children:[l(i,{children:p}),!!y&&l(a,{children:y})]})}),u(`div`,{className:`relative basis-3/5 flex justify-end`,children:[l(r,{children:l(s,{...d,placeholder:m,unitText:v,wrapperClassName:`w-full md:max-w-60`,onValueChange:e=>{n(e),b?.(e)}})}),g&&u(`div`,{className:`text-muted-foreground text-end text-xs`,children:[x?.length??0,` characters`]}),h&&l(o,{})]})]})})};export{f as NumberField};
+"use client";import"../label-pQFhmWzJ.js";import"../separator-udZphpLE.js";import{n as e}from"../field-CBs15wFj.js";import{a as t,i as n,n as r,o as i,r as a,s as o}from"../form-aAvu-cMF.js";import"../input-C_Q32lFA.js";import{t as s}from"../number-input-DcqwSq0c.js";import{Activity as c}from"react";import{jsx as l,jsxs as u}from"react/jsx-runtime";import{useWatch as d}from"react-hook-form";const f=({name:f,label:p=`Number Field`,placeholder:m=`0`,isShowErrorMsg:h=!1,isShowCount:g=!1,isNested:_=!1,unitText:v=``,description:y=``,onValueChange:b})=>{let x=d({name:f});return _?l(n,{name:f,render:({field:{onChange:n,...d}})=>u(t,{orientation:`vertical`,className:`gap-1`,children:[l(c,{mode:p||y?`visible`:`hidden`,children:u(e,{children:[l(i,{className:`text-xs`,children:p}),!!y&&l(a,{children:y})]})}),u(`div`,{className:`flex flex-col w-full justify-start`,children:[l(r,{children:l(s,{...d,placeholder:m,unitText:v,wrapperClassName:`w-full`,onValueChange:e=>{n(e),b?.(e)}})}),g&&u(`div`,{className:`text-muted-foreground text-end text-xs`,children:[x?.length??0,` characters`]}),h&&l(o,{})]})]})}):l(n,{name:f,render:({field:{onChange:n,...d}})=>u(t,{children:[l(c,{mode:p||y?`visible`:`hidden`,children:u(e,{children:[l(i,{children:p}),!!y&&l(a,{children:y})]})}),u(`div`,{className:`relative basis-3/5 flex justify-end`,children:[l(r,{children:l(s,{...d,placeholder:m,unitText:v,wrapperClassName:`w-full md:max-w-60`,onValueChange:e=>{n(e),b?.(e)}})}),g&&u(`div`,{className:`text-muted-foreground text-end text-xs`,children:[x?.length??0,` characters`]}),h&&l(o,{})]})]})})};export{f as NumberField};
 //# sourceMappingURL=number-field.js.map

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

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

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

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

package/dist/forms/password-field.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require(`../chunk-DjWAcSYV.cjs`);require(`../label-C81VuIr1.cjs`),require(`../separator-DSfwqts2.cjs`);const t=require(`../field-fedFAcLt.cjs`),n=require(`../form-CQcAxI-L.cjs`),r=require(`../input-DFwfYrJY.cjs`);let i=require(`lucide-react`);i=e.t(i);let a=require(`@customafk/react-toolkit/utils`);a=e.t(a);let o=require(`react`);o=e.t(o);let s=require(`react/jsx-runtime`);s=e.t(s);const c=({className:e,...t})=>{let n=(0,o.useId)(),[c,l]=(0,o.useState)(!1),u=(0,o.useCallback)(()=>l(e=>!e),[]);return(0,s.jsxs)(`div`,{className:`relative`,children:[(0,s.jsx)(r.t,{...t,id:n,placeholder:`Password`,type:c?`text`:`password`,className:(0,a.cn)(`pe-9`,e)}),(0,s.jsx)(`button`,{className:`text-muted-foreground/80 hover:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md transition-[color,box-shadow] outline-none focus:z-10 focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50`,type:`button`,onClick:u,"aria-label":c?`Hide password`:`Show password`,"aria-pressed":c,"aria-controls":`password`,children:c?(0,s.jsx)(i.EyeOffIcon,{size:16,"aria-hidden":`true`}):(0,s.jsx)(i.EyeIcon,{size:16,"aria-hidden":`true`})})]})},l=({name:e,label:r=`Text Field`,placeholder:i=`Enter text here`,isShowErrorMsg:a=!1,description:l,onValueChange:u})=>(0,s.jsx)(n.i,{name:e,render:({field:e})=>(0,s.jsxs)(n.a,{className:`w-full`,children:[(0,s.jsx)(o.Activity,{mode:r||l?`visible`:`hidden`,children:(0,s.jsxs)(t.n,{children:[(0,s.jsx)(n.o,{children:r}),!!l&&(0,s.jsx)(n.r,{children:l})]})}),(0,s.jsx)(n.n,{children:(0,s.jsx)(c,{placeholder:i,...e,onValueChange:u})}),a&&(0,s.jsx)(n.s,{})]})});exports.PasswordField=l;
+"use client";const e=require(`../chunk-Bmb41Sf3.cjs`);require(`../label-D2Kl-Q_-.cjs`),require(`../separator-D3CGKwyf.cjs`);const t=require(`../field-Cjpwx_6d.cjs`),n=require(`../form-D1gfOYhk.cjs`),r=require(`../input-D2bPk-nW.cjs`);let i=require(`lucide-react`),a=require(`react`),o=require(`@customafk/react-toolkit/utils`),s=require(`react/jsx-runtime`);const c=({className:e,...t})=>{let n=(0,a.useId)(),[c,l]=(0,a.useState)(!1),u=(0,a.useCallback)(()=>l(e=>!e),[]);return(0,s.jsxs)(`div`,{className:`relative`,children:[(0,s.jsx)(r.t,{...t,id:n,placeholder:`Password`,type:c?`text`:`password`,className:(0,o.cn)(`pe-9`,e)}),(0,s.jsx)(`button`,{className:`absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md text-muted-foreground/80 outline-none transition-[color,box-shadow] hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50`,type:`button`,onClick:u,"aria-label":c?`Hide password`:`Show password`,"aria-pressed":c,"aria-controls":`password`,children:c?(0,s.jsx)(i.EyeOffIcon,{size:16,"aria-hidden":`true`}):(0,s.jsx)(i.EyeIcon,{size:16,"aria-hidden":`true`})})]})},l=({name:e,label:r=`Text Field`,placeholder:i=`Enter text here`,isShowErrorMsg:o=!1,description:l,onValueChange:u})=>(0,s.jsx)(n.i,{name:e,render:({field:e})=>(0,s.jsxs)(n.a,{className:`w-full`,children:[(0,s.jsx)(a.Activity,{mode:r||l?`visible`:`hidden`,children:(0,s.jsxs)(t.n,{children:[(0,s.jsx)(n.o,{children:r}),!!l&&(0,s.jsx)(n.r,{children:l})]})}),(0,s.jsx)(n.n,{children:(0,s.jsx)(c,{placeholder:i,...e,onValueChange:u})}),o&&(0,s.jsx)(n.s,{})]})});exports.PasswordField=l;
 //# sourceMappingURL=password-field.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"password-field.cjs","names":["PasswordInput: React.FC<Props>","Input","EyeOffIcon","EyeIcon","FormField","FormItem","Activity","FieldContent","FormLabel","FormDescription","FormControl","FormMessage"],"sources":["../../packages/components/ui/inputs/password-input.tsx","../../packages/components/forms/password-field.tsx"],"sourcesContent":["'use client';\nimport { cn } from '@customafk/react-toolkit/utils';\nimport { EyeIcon, EyeOffIcon } from 'lucide-react';\nimport { useCallback, useId, useState } from 'react';\n\nimport { Input } from '../input';\n\ntype Props = React.ComponentPropsWithoutRef<typeof Input>;\nexport const PasswordInput: React.FC<Props> = ({ className, ...rest }) => {\n  const id = useId();\n  const [isVisible, setIsVisible] = useState<boolean>(false);\n  const toggleVisibility = useCallback(() => setIsVisible(prevState => !prevState), []);\n  return (\n    <div className=\"relative\">\n      <Input {...rest} id={id} placeholder=\"Password\" type={isVisible ? 'text' : 'password'} className={cn('pe-9', className)} />\n      <button\n        className=\"text-muted-foreground/80 hover:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md transition-[color,box-shadow] outline-none focus:z-10 focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n        type=\"button\"\n        onClick={toggleVisibility}\n        aria-label={isVisible ? 'Hide password' : 'Show password'}\n        aria-pressed={isVisible}\n        aria-controls=\"password\"\n      >\n        {isVisible ? <EyeOffIcon size={16} aria-hidden=\"true\" /> : <EyeIcon size={16} aria-hidden=\"true\" />}\n      </button>\n    </div>\n  );\n};\n","'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 { PasswordInput } from '../ui/inputs/password-input';\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  name: FieldPath<TFieldValues>;\n  label?: string;\n  description?: string;\n  placeholder?: string;\n  isShowErrorMsg?: boolean;\n  onValueChange?: (value: string) => void;\n};\nexport const PasswordField = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  label = 'Text Field',\n  placeholder = 'Enter text here',\n  isShowErrorMsg = false,\n  description,\n  onValueChange,\n}: Props<TFieldValues>) => {\n  return (\n    <FormField\n      name={name}\n      render={({ field }) => (\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          <FormControl>\n            <PasswordInput placeholder={placeholder} {...field} onValueChange={onValueChange} />\n          </FormControl>\n          {isShowErrorMsg && <FormMessage />}\n        </FormItem>\n      )}\n    />\n  );\n};\n"],"mappings":"sZAQA,MAAaA,GAAkC,CAAE,YAAW,GAAG,KAAW,CACxE,IAAM,GAAA,EAAA,EAAA,QAAY,CACZ,CAAC,EAAW,IAAA,EAAA,EAAA,UAAkC,GAAM,CACpD,GAAA,EAAA,EAAA,iBAAqC,EAAa,GAAa,CAAC,EAAU,CAAE,EAAE,CAAC,CACrF,OACE,EAAA,EAAA,MAAC,MAAA,CAAI,UAAU,sBACb,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAM,GAAI,EAAU,KAAI,YAAY,WAAW,KAAM,EAAY,OAAS,WAAY,WAAA,EAAA,EAAA,IAAc,OAAQ,EAAU,EAAI,EAC3H,EAAA,EAAA,KAAC,SAAA,CACC,UAAU,oVACV,KAAK,SACL,QAAS,EACT,aAAY,EAAY,gBAAkB,gBAC1C,eAAc,EACd,gBAAc,oBAEb,GAAY,EAAA,EAAA,KAACC,EAAAA,WAAAA,CAAW,KAAM,GAAI,cAAY,QAAS,EAAG,EAAA,EAAA,KAACC,EAAAA,QAAAA,CAAQ,KAAM,GAAI,cAAY,QAAS,EAC5F,CAAA,EACL,ECTG,GAAiE,CAC5E,OACA,QAAQ,aACR,cAAc,kBACd,iBAAiB,GACjB,cACA,oBAGE,EAAA,EAAA,KAACC,EAAAA,EAAAA,CACO,OACN,QAAS,CAAE,YACT,EAAA,EAAA,MAACC,EAAAA,EAAAA,CAAS,UAAU,oBAClB,EAAA,EAAA,KAACC,EAAAA,SAAAA,CAAS,KAAM,GAAS,EAAc,UAAY,mBACjD,EAAA,EAAA,MAACC,EAAAA,EAAAA,CAAAA,SAAAA,EACC,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAAA,SAAW,EAAA,CAAkB,CAC7B,CAAC,CAAC,IAAe,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAAA,SAAiB,EAAA,CAA8B,CAAA,CAAA,CACrD,EACN,EACX,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAAA,UACC,EAAA,EAAA,KAAC,EAAA,CAA2B,cAAa,GAAI,EAAsB,iBAAiB,CAAA,CACxE,CACb,IAAkB,EAAA,EAAA,KAACC,EAAAA,EAAAA,EAAAA,CAAc,GACzB,EAEb"}
+{"version":3,"file":"password-field.cjs","names":["PasswordInput: React.FC<Props>","Input","EyeOffIcon","EyeIcon","FormField","FormItem","Activity","FieldContent","FormLabel","FormDescription","FormControl","FormMessage"],"sources":["../../packages/components/ui/inputs/password-input.tsx","../../packages/components/forms/password-field.tsx"],"sourcesContent":["'use client';\nimport { cn } from '@customafk/react-toolkit/utils';\nimport { EyeIcon, EyeOffIcon } from 'lucide-react';\nimport { useCallback, useId, useState } from 'react';\n\nimport { Input } from '../input';\n\ntype Props = React.ComponentPropsWithoutRef<typeof Input>;\nexport const PasswordInput: React.FC<Props> = ({ className, ...rest }) => {\n  const id = useId();\n  const [isVisible, setIsVisible] = useState<boolean>(false);\n  const toggleVisibility = useCallback(() => setIsVisible(prevState => !prevState), []);\n  return (\n    <div className=\"relative\">\n      <Input {...rest} id={id} placeholder=\"Password\" type={isVisible ? 'text' : 'password'} className={cn('pe-9', className)} />\n      <button\n        className=\"absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md text-muted-foreground/80 outline-none transition-[color,box-shadow] hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n        type=\"button\"\n        onClick={toggleVisibility}\n        aria-label={isVisible ? 'Hide password' : 'Show password'}\n        aria-pressed={isVisible}\n        aria-controls=\"password\"\n      >\n        {isVisible ? <EyeOffIcon size={16} aria-hidden=\"true\" /> : <EyeIcon size={16} aria-hidden=\"true\" />}\n      </button>\n    </div>\n  );\n};\n","'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 { PasswordInput } from '../ui/inputs/password-input';\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  name: FieldPath<TFieldValues>;\n  label?: string;\n  description?: string;\n  placeholder?: string;\n  isShowErrorMsg?: boolean;\n  onValueChange?: (value: string) => void;\n};\nexport const PasswordField = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  label = 'Text Field',\n  placeholder = 'Enter text here',\n  isShowErrorMsg = false,\n  description,\n  onValueChange,\n}: Props<TFieldValues>) => {\n  return (\n    <FormField\n      name={name}\n      render={({ field }) => (\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          <FormControl>\n            <PasswordInput placeholder={placeholder} {...field} onValueChange={onValueChange} />\n          </FormControl>\n          {isShowErrorMsg && <FormMessage />}\n        </FormItem>\n      )}\n    />\n  );\n};\n"],"mappings":"sWAQA,MAAaA,GAAkC,CAAE,YAAW,GAAG,KAAW,CACxE,IAAM,GAAA,EAAA,EAAA,QAAY,CACZ,CAAC,EAAW,IAAA,EAAA,EAAA,UAAkC,GAAM,CACpD,GAAA,EAAA,EAAA,iBAAqC,EAAa,GAAa,CAAC,EAAU,CAAE,EAAE,CAAC,CACrF,OACE,EAAA,EAAA,MAAC,MAAA,CAAI,UAAU,sBACb,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAM,GAAI,EAAU,KAAI,YAAY,WAAW,KAAM,EAAY,OAAS,WAAY,WAAA,EAAA,EAAA,IAAc,OAAQ,EAAU,EAAI,EAC3H,EAAA,EAAA,KAAC,SAAA,CACC,UAAU,oVACV,KAAK,SACL,QAAS,EACT,aAAY,EAAY,gBAAkB,gBAC1C,eAAc,EACd,gBAAc,oBAEb,GAAY,EAAA,EAAA,KAACC,EAAAA,WAAAA,CAAW,KAAM,GAAI,cAAY,QAAS,EAAG,EAAA,EAAA,KAACC,EAAAA,QAAAA,CAAQ,KAAM,GAAI,cAAY,QAAS,EAC5F,CAAA,EACL,ECTG,GAAiE,CAC5E,OACA,QAAQ,aACR,cAAc,kBACd,iBAAiB,GACjB,cACA,oBAGE,EAAA,EAAA,KAACC,EAAAA,EAAAA,CACO,OACN,QAAS,CAAE,YACT,EAAA,EAAA,MAACC,EAAAA,EAAAA,CAAS,UAAU,oBAClB,EAAA,EAAA,KAACC,EAAAA,SAAAA,CAAS,KAAM,GAAS,EAAc,UAAY,mBACjD,EAAA,EAAA,MAACC,EAAAA,EAAAA,CAAAA,SAAAA,EACC,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAAA,SAAW,EAAA,CAAkB,CAC7B,CAAC,CAAC,IAAe,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAAA,SAAiB,EAAA,CAA8B,CAAA,CAAA,CACrD,EACN,EACX,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAAA,UACC,EAAA,EAAA,KAAC,EAAA,CAA2B,cAAa,GAAI,EAAsB,iBAAiB,CAAA,CACxE,CACb,IAAkB,EAAA,EAAA,KAACC,EAAAA,EAAAA,EAAAA,CAAc,GACzB,EAEb"}

package/dist/forms/password-field.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"password-field.js","names":["PasswordInput: React.FC<Props>"],"sources":["../../packages/components/ui/inputs/password-input.tsx","../../packages/components/forms/password-field.tsx"],"sourcesContent":["'use client';\nimport { cn } from '@customafk/react-toolkit/utils';\nimport { EyeIcon, EyeOffIcon } from 'lucide-react';\nimport { useCallback, useId, useState } from 'react';\n\nimport { Input } from '../input';\n\ntype Props = React.ComponentPropsWithoutRef<typeof Input>;\nexport const PasswordInput: React.FC<Props> = ({ className, ...rest }) => {\n  const id = useId();\n  const [isVisible, setIsVisible] = useState<boolean>(false);\n  const toggleVisibility = useCallback(() => setIsVisible(prevState => !prevState), []);\n  return (\n    <div className=\"relative\">\n      <Input {...rest} id={id} placeholder=\"Password\" type={isVisible ? 'text' : 'password'} className={cn('pe-9', className)} />\n      <button\n        className=\"text-muted-foreground/80 hover:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md transition-[color,box-shadow] outline-none focus:z-10 focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n        type=\"button\"\n        onClick={toggleVisibility}\n        aria-label={isVisible ? 'Hide password' : 'Show password'}\n        aria-pressed={isVisible}\n        aria-controls=\"password\"\n      >\n        {isVisible ? <EyeOffIcon size={16} aria-hidden=\"true\" /> : <EyeIcon size={16} aria-hidden=\"true\" />}\n      </button>\n    </div>\n  );\n};\n","'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 { PasswordInput } from '../ui/inputs/password-input';\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  name: FieldPath<TFieldValues>;\n  label?: string;\n  description?: string;\n  placeholder?: string;\n  isShowErrorMsg?: boolean;\n  onValueChange?: (value: string) => void;\n};\nexport const PasswordField = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  label = 'Text Field',\n  placeholder = 'Enter text here',\n  isShowErrorMsg = false,\n  description,\n  onValueChange,\n}: Props<TFieldValues>) => {\n  return (\n    <FormField\n      name={name}\n      render={({ field }) => (\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          <FormControl>\n            <PasswordInput placeholder={placeholder} {...field} onValueChange={onValueChange} />\n          </FormControl>\n          {isShowErrorMsg && <FormMessage />}\n        </FormItem>\n      )}\n    />\n  );\n};\n"],"mappings":"gdAQA,MAAaA,GAAkC,CAAE,YAAW,GAAG,KAAW,CACxE,IAAM,EAAK,GAAO,CACZ,CAAC,EAAW,GAAgB,EAAkB,GAAM,CACpD,EAAmB,MAAkB,EAAa,GAAa,CAAC,EAAU,CAAE,EAAE,CAAC,CACrF,OACE,EAAC,MAAA,CAAI,UAAU,qBACb,EAAC,EAAA,CAAM,GAAI,EAAU,KAAI,YAAY,WAAW,KAAM,EAAY,OAAS,WAAY,UAAW,EAAG,OAAQ,EAAU,EAAI,CAC3H,EAAC,SAAA,CACC,UAAU,oVACV,KAAK,SACL,QAAS,EACT,aAAY,EAAY,gBAAkB,gBAC1C,eAAc,EACd,gBAAc,oBAED,EAAZ,EAAa,EAA8C,EAA9C,CAAW,KAAM,GAAI,cAAY,QAAoD,EAC5F,CAAA,EACL,ECTG,GAAiE,CAC5E,OACA,QAAQ,aACR,cAAc,kBACd,iBAAiB,GACjB,cACA,mBAGE,EAAC,EAAA,CACO,OACN,QAAS,CAAE,WACT,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,CAAA,SACC,EAAC,EAAA,CAA2B,cAAa,GAAI,EAAsB,iBAAiB,CAAA,CACxE,CACb,GAAkB,EAAC,EAAA,EAAA,CAAc,GACzB,EAEb"}
+{"version":3,"file":"password-field.js","names":["PasswordInput: React.FC<Props>"],"sources":["../../packages/components/ui/inputs/password-input.tsx","../../packages/components/forms/password-field.tsx"],"sourcesContent":["'use client';\nimport { cn } from '@customafk/react-toolkit/utils';\nimport { EyeIcon, EyeOffIcon } from 'lucide-react';\nimport { useCallback, useId, useState } from 'react';\n\nimport { Input } from '../input';\n\ntype Props = React.ComponentPropsWithoutRef<typeof Input>;\nexport const PasswordInput: React.FC<Props> = ({ className, ...rest }) => {\n  const id = useId();\n  const [isVisible, setIsVisible] = useState<boolean>(false);\n  const toggleVisibility = useCallback(() => setIsVisible(prevState => !prevState), []);\n  return (\n    <div className=\"relative\">\n      <Input {...rest} id={id} placeholder=\"Password\" type={isVisible ? 'text' : 'password'} className={cn('pe-9', className)} />\n      <button\n        className=\"absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md text-muted-foreground/80 outline-none transition-[color,box-shadow] hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n        type=\"button\"\n        onClick={toggleVisibility}\n        aria-label={isVisible ? 'Hide password' : 'Show password'}\n        aria-pressed={isVisible}\n        aria-controls=\"password\"\n      >\n        {isVisible ? <EyeOffIcon size={16} aria-hidden=\"true\" /> : <EyeIcon size={16} aria-hidden=\"true\" />}\n      </button>\n    </div>\n  );\n};\n","'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 { PasswordInput } from '../ui/inputs/password-input';\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  name: FieldPath<TFieldValues>;\n  label?: string;\n  description?: string;\n  placeholder?: string;\n  isShowErrorMsg?: boolean;\n  onValueChange?: (value: string) => void;\n};\nexport const PasswordField = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  label = 'Text Field',\n  placeholder = 'Enter text here',\n  isShowErrorMsg = false,\n  description,\n  onValueChange,\n}: Props<TFieldValues>) => {\n  return (\n    <FormField\n      name={name}\n      render={({ field }) => (\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          <FormControl>\n            <PasswordInput placeholder={placeholder} {...field} onValueChange={onValueChange} />\n          </FormControl>\n          {isShowErrorMsg && <FormMessage />}\n        </FormItem>\n      )}\n    />\n  );\n};\n"],"mappings":"gdAQA,MAAaA,GAAkC,CAAE,YAAW,GAAG,KAAW,CACxE,IAAM,EAAK,GAAO,CACZ,CAAC,EAAW,GAAgB,EAAkB,GAAM,CACpD,EAAmB,MAAkB,EAAa,GAAa,CAAC,EAAU,CAAE,EAAE,CAAC,CACrF,OACE,EAAC,MAAA,CAAI,UAAU,qBACb,EAAC,EAAA,CAAM,GAAI,EAAU,KAAI,YAAY,WAAW,KAAM,EAAY,OAAS,WAAY,UAAW,EAAG,OAAQ,EAAU,EAAI,CAC3H,EAAC,SAAA,CACC,UAAU,oVACV,KAAK,SACL,QAAS,EACT,aAAY,EAAY,gBAAkB,gBAC1C,eAAc,EACd,gBAAc,oBAED,EAAZ,EAAa,EAA8C,EAA9C,CAAW,KAAM,GAAI,cAAY,QAAoD,EAC5F,CAAA,EACL,ECTG,GAAiE,CAC5E,OACA,QAAQ,aACR,cAAc,kBACd,iBAAiB,GACjB,cACA,mBAGE,EAAC,EAAA,CACO,OACN,QAAS,CAAE,WACT,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,CAAA,SACC,EAAC,EAAA,CAA2B,cAAa,GAAI,EAAsB,iBAAiB,CAAA,CACxE,CACb,GAAkB,EAAC,EAAA,EAAA,CAAc,GACzB,EAEb"}

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

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

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

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

package/dist/forms/select-field.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require(`../chunk-DjWAcSYV.cjs`);require(`../label-C81VuIr1.cjs`),require(`../separator-DSfwqts2.cjs`);const t=require(`../field-fedFAcLt.cjs`),n=require(`../form-CQcAxI-L.cjs`),r=require(`../select-DJvNdB9Q.cjs`);let i=require(`react`);i=e.t(i);let a=require(`react/jsx-runtime`);a=e.t(a);const o=({name:e,label:o=`Select Field`,placeholder:s=`Select an option`,disabledValues:c=[],options:l=[],isShowLabel:u=!0,isShowErrorMsg:d=!1,description:f=``,className:p=``})=>(0,a.jsx)(n.i,{name:e,render:({field:e})=>(0,a.jsxs)(n.a,{className:p,children:[(0,a.jsx)(i.Activity,{mode:o||f?`visible`:`hidden`,children:(0,a.jsxs)(t.n,{children:[u&&(0,a.jsx)(n.o,{children:o}),!!f&&(0,a.jsx)(n.r,{children:f})]})}),(0,a.jsxs)(`div`,{className:`basis-3/5 flex justify-end`,children:[(0,a.jsxs)(r.t,{defaultValue:e.value,onValueChange:e.onChange,children:[(0,a.jsx)(n.n,{children:(0,a.jsx)(r.l,{className:`w-full md:max-w-80`,children:(0,a.jsx)(r.u,{placeholder:s})})}),(0,a.jsx)(r.n,{children:l.map(e=>(0,a.jsx)(r.i,{disabled:c.includes(e.value),value:e.value,children:e.label},e.value))})]}),d&&(0,a.jsx)(n.s,{})]})]})});exports.SelectField=o;
+"use client";const e=require(`../chunk-Bmb41Sf3.cjs`);require(`../label-D2Kl-Q_-.cjs`),require(`../separator-D3CGKwyf.cjs`);const t=require(`../field-Cjpwx_6d.cjs`),n=require(`../form-D1gfOYhk.cjs`),r=require(`../select-ZQ1jEKyy.cjs`);let i=require(`react`),a=require(`react/jsx-runtime`);const o=({name:e,label:o=`Select Field`,placeholder:s=`Select an option`,disabledValues:c=[],options:l=[],isShowLabel:u=!0,isShowErrorMsg:d=!1,description:f=``,className:p=``})=>(0,a.jsx)(n.i,{name:e,render:({field:e})=>(0,a.jsxs)(n.a,{className:p,children:[(0,a.jsx)(i.Activity,{mode:o||f?`visible`:`hidden`,children:(0,a.jsxs)(t.n,{children:[u&&(0,a.jsx)(n.o,{children:o}),!!f&&(0,a.jsx)(n.r,{children:f})]})}),(0,a.jsxs)(`div`,{className:`flex basis-3/5 justify-end`,children:[(0,a.jsxs)(r.t,{defaultValue:e.value,onValueChange:e.onChange,children:[(0,a.jsx)(n.n,{children:(0,a.jsx)(r.l,{className:`w-full md:max-w-80`,children:(0,a.jsx)(r.u,{placeholder:s})})}),(0,a.jsx)(r.n,{children:l.map(e=>(0,a.jsx)(r.i,{disabled:c.includes(e.value),value:e.value,children:e.label},e.value))})]}),d&&(0,a.jsx)(n.s,{})]})]})});exports.SelectField=o;
 //# sourceMappingURL=select-field.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"select-field.cjs","names":["FormField","FormItem","Activity","FieldContent","FormLabel","FormDescription","Select","FormControl","SelectTrigger","SelectValue","SelectContent","SelectItem","FormMessage"],"sources":["../../packages/components/forms/select-field.tsx"],"sourcesContent":["'use client';\nimport { Activity } from 'react';\nimport type { FieldPath, FieldValues } from 'react-hook-form';\n\nimport { FieldContent } from '../ui/field';\nimport { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../ui/form';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  name: FieldPath<TFieldValues>;\n  label?: string;\n  placeholder?: string;\n  disabledValues?: string[];\n  options?: { value: string; label: string }[];\n  isShowLabel?: boolean;\n  isShowErrorMsg?: boolean;\n  modal?: boolean;\n  description?: string;\n  className?: string;\n};\nexport const SelectField = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  label = 'Select Field',\n  placeholder = 'Select an option',\n  disabledValues = [],\n  options = [],\n  isShowLabel = true,\n  isShowErrorMsg = false,\n  description = '',\n  className = '',\n}: Props<TFieldValues>) => {\n  return (\n    <FormField\n      name={name}\n      render={({ field }) => (\n        <FormItem className={className}>\n          <Activity mode={label || description ? 'visible' : 'hidden'}>\n            <FieldContent>\n              {isShowLabel && <FormLabel>{label}</FormLabel>}\n              {!!description && <FormDescription>{description}</FormDescription>}\n            </FieldContent>\n          </Activity>\n          <div className=\"basis-3/5 flex justify-end\">\n            <Select defaultValue={field.value} onValueChange={field.onChange}>\n              <FormControl>\n                <SelectTrigger className=\"w-full md:max-w-80\">\n                  <SelectValue placeholder={placeholder} />\n                </SelectTrigger>\n              </FormControl>\n              <SelectContent>\n                {options.map(option => (\n                  <SelectItem key={option.value} disabled={disabledValues.includes(option.value)} value={option.value}>\n                    {option.label}\n                  </SelectItem>\n                ))}\n              </SelectContent>\n            </Select>\n            {isShowErrorMsg && <FormMessage />}\n          </div>\n        </FormItem>\n      )}\n    />\n  );\n};\n"],"mappings":"uTAoBA,MAAa,GAA+D,CAC1E,OACA,QAAQ,eACR,cAAc,mBACd,iBAAiB,EAAE,CACnB,UAAU,EAAE,CACZ,cAAc,GACd,iBAAiB,GACjB,cAAc,GACd,YAAY,OAGV,EAAA,EAAA,KAACA,EAAAA,EAAAA,CACO,OACN,QAAS,CAAE,YACT,EAAA,EAAA,MAACC,EAAAA,EAAAA,CAAoB,uBACnB,EAAA,EAAA,KAACC,EAAAA,SAAAA,CAAS,KAAM,GAAS,EAAc,UAAY,mBACjD,EAAA,EAAA,MAACC,EAAAA,EAAAA,CAAAA,SAAAA,CACE,IAAe,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAAA,SAAW,EAAA,CAAkB,CAC7C,CAAC,CAAC,IAAe,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAAA,SAAiB,EAAA,CAA8B,CAAA,CAAA,CACrD,EACN,EACX,EAAA,EAAA,MAAC,MAAA,CAAI,UAAU,wCACb,EAAA,EAAA,MAACC,EAAAA,EAAAA,CAAO,aAAc,EAAM,MAAO,cAAe,EAAM,oBACtD,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAAA,UACC,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAc,UAAU,+BACvB,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAyB,cAAA,CAAe,EAC3B,CAAA,CACJ,EACd,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAAA,SACE,EAAQ,IAAI,IACX,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAA8B,SAAU,EAAe,SAAS,EAAO,MAAM,CAAE,MAAO,EAAO,eAC3F,EAAO,OADO,EAAO,MAEX,CACb,CAAA,CACY,CAAA,EACT,CACR,IAAkB,EAAA,EAAA,KAACC,EAAAA,EAAAA,EAAAA,CAAc,CAAA,EAC9B,CAAA,EACG,EAEb"}
+{"version":3,"file":"select-field.cjs","names":["FormField","FormItem","Activity","FieldContent","FormLabel","FormDescription","Select","FormControl","SelectTrigger","SelectValue","SelectContent","SelectItem","FormMessage"],"sources":["../../packages/components/forms/select-field.tsx"],"sourcesContent":["'use client';\nimport { Activity } from 'react';\nimport type { FieldPath, FieldValues } from 'react-hook-form';\n\nimport { FieldContent } from '../ui/field';\nimport { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../ui/form';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  name: FieldPath<TFieldValues>;\n  label?: string;\n  placeholder?: string;\n  disabledValues?: string[];\n  options?: { value: string; label: string }[];\n  isShowLabel?: boolean;\n  isShowErrorMsg?: boolean;\n  modal?: boolean;\n  description?: string;\n  className?: string;\n};\nexport const SelectField = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  label = 'Select Field',\n  placeholder = 'Select an option',\n  disabledValues = [],\n  options = [],\n  isShowLabel = true,\n  isShowErrorMsg = false,\n  description = '',\n  className = '',\n}: Props<TFieldValues>) => {\n  return (\n    <FormField\n      name={name}\n      render={({ field }) => (\n        <FormItem className={className}>\n          <Activity mode={label || description ? 'visible' : 'hidden'}>\n            <FieldContent>\n              {isShowLabel && <FormLabel>{label}</FormLabel>}\n              {!!description && <FormDescription>{description}</FormDescription>}\n            </FieldContent>\n          </Activity>\n          <div className=\"flex basis-3/5 justify-end\">\n            <Select defaultValue={field.value} onValueChange={field.onChange}>\n              <FormControl>\n                <SelectTrigger className=\"w-full md:max-w-80\">\n                  <SelectValue placeholder={placeholder} />\n                </SelectTrigger>\n              </FormControl>\n              <SelectContent>\n                {options.map(option => (\n                  <SelectItem key={option.value} disabled={disabledValues.includes(option.value)} value={option.value}>\n                    {option.label}\n                  </SelectItem>\n                ))}\n              </SelectContent>\n            </Select>\n            {isShowErrorMsg && <FormMessage />}\n          </div>\n        </FormItem>\n      )}\n    />\n  );\n};\n"],"mappings":"iSAoBA,MAAa,GAA+D,CAC1E,OACA,QAAQ,eACR,cAAc,mBACd,iBAAiB,EAAE,CACnB,UAAU,EAAE,CACZ,cAAc,GACd,iBAAiB,GACjB,cAAc,GACd,YAAY,OAGV,EAAA,EAAA,KAACA,EAAAA,EAAAA,CACO,OACN,QAAS,CAAE,YACT,EAAA,EAAA,MAACC,EAAAA,EAAAA,CAAoB,uBACnB,EAAA,EAAA,KAACC,EAAAA,SAAAA,CAAS,KAAM,GAAS,EAAc,UAAY,mBACjD,EAAA,EAAA,MAACC,EAAAA,EAAAA,CAAAA,SAAAA,CACE,IAAe,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAAA,SAAW,EAAA,CAAkB,CAC7C,CAAC,CAAC,IAAe,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAAA,SAAiB,EAAA,CAA8B,CAAA,CAAA,CACrD,EACN,EACX,EAAA,EAAA,MAAC,MAAA,CAAI,UAAU,wCACb,EAAA,EAAA,MAACC,EAAAA,EAAAA,CAAO,aAAc,EAAM,MAAO,cAAe,EAAM,oBACtD,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAAA,UACC,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAc,UAAU,+BACvB,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAyB,cAAA,CAAe,EAC3B,CAAA,CACJ,EACd,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAAA,SACE,EAAQ,IAAI,IACX,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAA8B,SAAU,EAAe,SAAS,EAAO,MAAM,CAAE,MAAO,EAAO,eAC3F,EAAO,OADO,EAAO,MAEX,CACb,CAAA,CACY,CAAA,EACT,CACR,IAAkB,EAAA,EAAA,KAACC,EAAAA,EAAAA,EAAAA,CAAc,CAAA,EAC9B,CAAA,EACG,EAEb"}

package/dist/forms/select-field.js

@@ -1,2 +1,2 @@
-"use client";import"../label-DeTp9ffC.js";import"../separator-aMl6UNM2.js";import{n as e}from"../field-QnC1I0hN.js";import{a as t,i as n,n as r,o as i,r as a,s as o}from"../form-CoqTElrC.js";import{i as s,l as c,n as l,t as u,u as d}from"../select-DjTMDfuU.js";import{Activity as f}from"react";import{jsx as p,jsxs as m}from"react/jsx-runtime";const h=({name:h,label:g=`Select Field`,placeholder:_=`Select an option`,disabledValues:v=[],options:y=[],isShowLabel:b=!0,isShowErrorMsg:x=!1,description:S=``,className:C=``})=>p(n,{name:h,render:({field:n})=>m(t,{className:C,children:[p(f,{mode:g||S?`visible`:`hidden`,children:m(e,{children:[b&&p(i,{children:g}),!!S&&p(a,{children:S})]})}),m(`div`,{className:`basis-3/5 flex justify-end`,children:[m(u,{defaultValue:n.value,onValueChange:n.onChange,children:[p(r,{children:p(c,{className:`w-full md:max-w-80`,children:p(d,{placeholder:_})})}),p(l,{children:y.map(e=>p(s,{disabled:v.includes(e.value),value:e.value,children:e.label},e.value))})]}),x&&p(o,{})]})]})});export{h as SelectField};
+"use client";import"../label-pQFhmWzJ.js";import"../separator-udZphpLE.js";import{n as e}from"../field-CBs15wFj.js";import{a as t,i as n,n as r,o as i,r as a,s as o}from"../form-aAvu-cMF.js";import{i as s,l as c,n as l,t as u,u as d}from"../select-C3ZceYuJ.js";import{Activity as f}from"react";import{jsx as p,jsxs as m}from"react/jsx-runtime";const h=({name:h,label:g=`Select Field`,placeholder:_=`Select an option`,disabledValues:v=[],options:y=[],isShowLabel:b=!0,isShowErrorMsg:x=!1,description:S=``,className:C=``})=>p(n,{name:h,render:({field:n})=>m(t,{className:C,children:[p(f,{mode:g||S?`visible`:`hidden`,children:m(e,{children:[b&&p(i,{children:g}),!!S&&p(a,{children:S})]})}),m(`div`,{className:`flex basis-3/5 justify-end`,children:[m(u,{defaultValue:n.value,onValueChange:n.onChange,children:[p(r,{children:p(c,{className:`w-full md:max-w-80`,children:p(d,{placeholder:_})})}),p(l,{children:y.map(e=>p(s,{disabled:v.includes(e.value),value:e.value,children:e.label},e.value))})]}),x&&p(o,{})]})]})});export{h as SelectField};
 //# sourceMappingURL=select-field.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"select-field.js","names":[],"sources":["../../packages/components/forms/select-field.tsx"],"sourcesContent":["'use client';\nimport { Activity } from 'react';\nimport type { FieldPath, FieldValues } from 'react-hook-form';\n\nimport { FieldContent } from '../ui/field';\nimport { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../ui/form';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  name: FieldPath<TFieldValues>;\n  label?: string;\n  placeholder?: string;\n  disabledValues?: string[];\n  options?: { value: string; label: string }[];\n  isShowLabel?: boolean;\n  isShowErrorMsg?: boolean;\n  modal?: boolean;\n  description?: string;\n  className?: string;\n};\nexport const SelectField = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  label = 'Select Field',\n  placeholder = 'Select an option',\n  disabledValues = [],\n  options = [],\n  isShowLabel = true,\n  isShowErrorMsg = false,\n  description = '',\n  className = '',\n}: Props<TFieldValues>) => {\n  return (\n    <FormField\n      name={name}\n      render={({ field }) => (\n        <FormItem className={className}>\n          <Activity mode={label || description ? 'visible' : 'hidden'}>\n            <FieldContent>\n              {isShowLabel && <FormLabel>{label}</FormLabel>}\n              {!!description && <FormDescription>{description}</FormDescription>}\n            </FieldContent>\n          </Activity>\n          <div className=\"basis-3/5 flex justify-end\">\n            <Select defaultValue={field.value} onValueChange={field.onChange}>\n              <FormControl>\n                <SelectTrigger className=\"w-full md:max-w-80\">\n                  <SelectValue placeholder={placeholder} />\n                </SelectTrigger>\n              </FormControl>\n              <SelectContent>\n                {options.map(option => (\n                  <SelectItem key={option.value} disabled={disabledValues.includes(option.value)} value={option.value}>\n                    {option.label}\n                  </SelectItem>\n                ))}\n              </SelectContent>\n            </Select>\n            {isShowErrorMsg && <FormMessage />}\n          </div>\n        </FormItem>\n      )}\n    />\n  );\n};\n"],"mappings":"wVAoBA,MAAa,GAA+D,CAC1E,OACA,QAAQ,eACR,cAAc,mBACd,iBAAiB,EAAE,CACnB,UAAU,EAAE,CACZ,cAAc,GACd,iBAAiB,GACjB,cAAc,GACd,YAAY,MAGV,EAAC,EAAA,CACO,OACN,QAAS,CAAE,WACT,EAAC,EAAA,CAAoB,sBACnB,EAAC,EAAA,CAAS,KAAM,GAAS,EAAc,UAAY,kBACjD,EAAC,EAAA,CAAA,SAAA,CACE,GAAe,EAAC,EAAA,CAAA,SAAW,EAAA,CAAkB,CAC7C,CAAC,CAAC,GAAe,EAAC,EAAA,CAAA,SAAiB,EAAA,CAA8B,CAAA,CAAA,CACrD,EACN,CACX,EAAC,MAAA,CAAI,UAAU,uCACb,EAAC,EAAA,CAAO,aAAc,EAAM,MAAO,cAAe,EAAM,mBACtD,EAAC,EAAA,CAAA,SACC,EAAC,EAAA,CAAc,UAAU,8BACvB,EAAC,EAAA,CAAyB,cAAA,CAAe,EAC3B,CAAA,CACJ,CACd,EAAC,EAAA,CAAA,SACE,EAAQ,IAAI,GACX,EAAC,EAAA,CAA8B,SAAU,EAAe,SAAS,EAAO,MAAM,CAAE,MAAO,EAAO,eAC3F,EAAO,OADO,EAAO,MAEX,CACb,CAAA,CACY,CAAA,EACT,CACR,GAAkB,EAAC,EAAA,EAAA,CAAc,CAAA,EAC9B,CAAA,EACG,EAEb"}
+{"version":3,"file":"select-field.js","names":[],"sources":["../../packages/components/forms/select-field.tsx"],"sourcesContent":["'use client';\nimport { Activity } from 'react';\nimport type { FieldPath, FieldValues } from 'react-hook-form';\n\nimport { FieldContent } from '../ui/field';\nimport { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../ui/form';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  name: FieldPath<TFieldValues>;\n  label?: string;\n  placeholder?: string;\n  disabledValues?: string[];\n  options?: { value: string; label: string }[];\n  isShowLabel?: boolean;\n  isShowErrorMsg?: boolean;\n  modal?: boolean;\n  description?: string;\n  className?: string;\n};\nexport const SelectField = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  label = 'Select Field',\n  placeholder = 'Select an option',\n  disabledValues = [],\n  options = [],\n  isShowLabel = true,\n  isShowErrorMsg = false,\n  description = '',\n  className = '',\n}: Props<TFieldValues>) => {\n  return (\n    <FormField\n      name={name}\n      render={({ field }) => (\n        <FormItem className={className}>\n          <Activity mode={label || description ? 'visible' : 'hidden'}>\n            <FieldContent>\n              {isShowLabel && <FormLabel>{label}</FormLabel>}\n              {!!description && <FormDescription>{description}</FormDescription>}\n            </FieldContent>\n          </Activity>\n          <div className=\"flex basis-3/5 justify-end\">\n            <Select defaultValue={field.value} onValueChange={field.onChange}>\n              <FormControl>\n                <SelectTrigger className=\"w-full md:max-w-80\">\n                  <SelectValue placeholder={placeholder} />\n                </SelectTrigger>\n              </FormControl>\n              <SelectContent>\n                {options.map(option => (\n                  <SelectItem key={option.value} disabled={disabledValues.includes(option.value)} value={option.value}>\n                    {option.label}\n                  </SelectItem>\n                ))}\n              </SelectContent>\n            </Select>\n            {isShowErrorMsg && <FormMessage />}\n          </div>\n        </FormItem>\n      )}\n    />\n  );\n};\n"],"mappings":"wVAoBA,MAAa,GAA+D,CAC1E,OACA,QAAQ,eACR,cAAc,mBACd,iBAAiB,EAAE,CACnB,UAAU,EAAE,CACZ,cAAc,GACd,iBAAiB,GACjB,cAAc,GACd,YAAY,MAGV,EAAC,EAAA,CACO,OACN,QAAS,CAAE,WACT,EAAC,EAAA,CAAoB,sBACnB,EAAC,EAAA,CAAS,KAAM,GAAS,EAAc,UAAY,kBACjD,EAAC,EAAA,CAAA,SAAA,CACE,GAAe,EAAC,EAAA,CAAA,SAAW,EAAA,CAAkB,CAC7C,CAAC,CAAC,GAAe,EAAC,EAAA,CAAA,SAAiB,EAAA,CAA8B,CAAA,CAAA,CACrD,EACN,CACX,EAAC,MAAA,CAAI,UAAU,uCACb,EAAC,EAAA,CAAO,aAAc,EAAM,MAAO,cAAe,EAAM,mBACtD,EAAC,EAAA,CAAA,SACC,EAAC,EAAA,CAAc,UAAU,8BACvB,EAAC,EAAA,CAAyB,cAAA,CAAe,EAC3B,CAAA,CACJ,CACd,EAAC,EAAA,CAAA,SACE,EAAQ,IAAI,GACX,EAAC,EAAA,CAA8B,SAAU,EAAe,SAAS,EAAO,MAAM,CAAE,MAAO,EAAO,eAC3F,EAAO,OADO,EAAO,MAEX,CACb,CAAA,CACY,CAAA,EACT,CACR,GAAkB,EAAC,EAAA,EAAA,CAAc,CAAA,EAC9B,CAAA,EACG,EAEb"}

package/dist/forms/switch-field-Bh2u8Nik.d.ts

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

package/dist/forms/switch-field-DI0hFw7z.d.cts

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

package/dist/forms/switch-field.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require(`../chunk-DjWAcSYV.cjs`);require(`../label-C81VuIr1.cjs`),require(`../separator-DSfwqts2.cjs`);const t=require(`../field-fedFAcLt.cjs`),n=require(`../form-CQcAxI-L.cjs`),r=require(`../switch-BRuGLl7r.cjs`);let i=require(`react`);i=e.t(i);let a=require(`react/jsx-runtime`);a=e.t(a);const o=({name:e,label:o=`Switch Field`,className:s=``,description:c,isShowErrorMsg:l=!1})=>(0,a.jsx)(n.i,{name:e,render:({field:e})=>(0,a.jsxs)(n.a,{className:s,children:[(0,a.jsx)(t.n,{children:(0,a.jsxs)(i.Activity,{mode:o||c?`visible`:`hidden`,children:[(0,a.jsx)(n.o,{children:o}),c&&(0,a.jsx)(n.r,{className:`text-xs`,children:c})]})}),(0,a.jsxs)(`div`,{className:`basis-3/5`,children:[(0,a.jsx)(n.n,{children:(0,a.jsx)(r.t,{checked:e.value,className:`!w-8`,onCheckedChange:e.onChange})}),l&&(0,a.jsx)(n.s,{})]})]})});exports.SwitchField=o;
+"use client";const e=require(`../chunk-Bmb41Sf3.cjs`);require(`../label-D2Kl-Q_-.cjs`),require(`../separator-D3CGKwyf.cjs`);const t=require(`../field-Cjpwx_6d.cjs`),n=require(`../form-D1gfOYhk.cjs`),r=require(`../switch-CF9mKsGi.cjs`);let i=require(`react`),a=require(`react/jsx-runtime`);const o=({name:e,label:o=`Switch Field`,className:s=``,description:c,isShowErrorMsg:l=!1})=>(0,a.jsx)(n.i,{name:e,render:({field:e})=>(0,a.jsxs)(n.a,{className:s,children:[(0,a.jsx)(t.n,{children:(0,a.jsxs)(i.Activity,{mode:o||c?`visible`:`hidden`,children:[(0,a.jsx)(n.o,{children:o}),c&&(0,a.jsx)(n.r,{className:`text-xs`,children:c})]})}),(0,a.jsxs)(`div`,{className:`basis-3/5`,children:[(0,a.jsx)(n.n,{children:(0,a.jsx)(r.t,{checked:e.value,className:`!w-8`,onCheckedChange:e.onChange})}),l&&(0,a.jsx)(n.s,{})]})]})});exports.SwitchField=o;
 //# sourceMappingURL=switch-field.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"switch-field.cjs","names":["FormField","FormItem","FieldContent","Activity","FormLabel","FormDescription","FormControl","Switch","FormMessage"],"sources":["../../packages/components/forms/switch-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 { Switch } from '../ui/switch';\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  name: FieldPath<TFieldValues>;\n  label?: string;\n  className?: string;\n  description?: string;\n  isShowErrorMsg?: boolean;\n};\nexport const SwitchField = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  label = 'Switch Field',\n  className = '',\n  description,\n  isShowErrorMsg = false,\n}: Props<TFieldValues>) => {\n  return (\n    <FormField\n      name={name}\n      render={({ field }) => (\n        <FormItem className={className}>\n          <FieldContent>\n            <Activity mode={label || description ? 'visible' : 'hidden'}>\n              <FormLabel>{label}</FormLabel>\n              {description && <FormDescription className=\"text-xs\">{description}</FormDescription>}\n            </Activity>\n          </FieldContent>\n          <div className=\"basis-3/5\">\n            <FormControl>\n              <Switch checked={field.value} className=\"!w-8\" onCheckedChange={field.onChange} />\n            </FormControl>\n            {isShowErrorMsg && <FormMessage />}\n          </div>\n        </FormItem>\n      )}\n    />\n  );\n};\n"],"mappings":"uTAeA,MAAa,GAA+D,CAC1E,OACA,QAAQ,eACR,YAAY,GACZ,cACA,iBAAiB,OAGf,EAAA,EAAA,KAACA,EAAAA,EAAAA,CACO,OACN,QAAS,CAAE,YACT,EAAA,EAAA,MAACC,EAAAA,EAAAA,CAAoB,uBACnB,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAAA,UACC,EAAA,EAAA,MAACC,EAAAA,SAAAA,CAAS,KAAM,GAAS,EAAc,UAAY,oBACjD,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAAA,SAAW,EAAA,CAAkB,CAC7B,IAAe,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAgB,UAAU,mBAAW,GAA8B,CAAA,EAC3E,CAAA,CACE,EACf,EAAA,EAAA,MAAC,MAAA,CAAI,UAAU,uBACb,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAAA,UACC,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAO,QAAS,EAAM,MAAO,UAAU,OAAO,gBAAiB,EAAM,UAAY,CAAA,CACtE,CACb,IAAkB,EAAA,EAAA,KAACC,EAAAA,EAAAA,EAAAA,CAAc,CAAA,EAC9B,CAAA,EACG,EAEb"}
+{"version":3,"file":"switch-field.cjs","names":["FormField","FormItem","FieldContent","Activity","FormLabel","FormDescription","FormControl","Switch","FormMessage"],"sources":["../../packages/components/forms/switch-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 { Switch } from '../ui/switch';\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  name: FieldPath<TFieldValues>;\n  label?: string;\n  className?: string;\n  description?: string;\n  isShowErrorMsg?: boolean;\n};\nexport const SwitchField = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  label = 'Switch Field',\n  className = '',\n  description,\n  isShowErrorMsg = false,\n}: Props<TFieldValues>) => {\n  return (\n    <FormField\n      name={name}\n      render={({ field }) => (\n        <FormItem className={className}>\n          <FieldContent>\n            <Activity mode={label || description ? 'visible' : 'hidden'}>\n              <FormLabel>{label}</FormLabel>\n              {description && <FormDescription className=\"text-xs\">{description}</FormDescription>}\n            </Activity>\n          </FieldContent>\n          <div className=\"basis-3/5\">\n            <FormControl>\n              <Switch checked={field.value} className=\"!w-8\" onCheckedChange={field.onChange} />\n            </FormControl>\n            {isShowErrorMsg && <FormMessage />}\n          </div>\n        </FormItem>\n      )}\n    />\n  );\n};\n"],"mappings":"iSAeA,MAAa,GAA+D,CAC1E,OACA,QAAQ,eACR,YAAY,GACZ,cACA,iBAAiB,OAGf,EAAA,EAAA,KAACA,EAAAA,EAAAA,CACO,OACN,QAAS,CAAE,YACT,EAAA,EAAA,MAACC,EAAAA,EAAAA,CAAoB,uBACnB,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAAA,UACC,EAAA,EAAA,MAACC,EAAAA,SAAAA,CAAS,KAAM,GAAS,EAAc,UAAY,oBACjD,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAAA,SAAW,EAAA,CAAkB,CAC7B,IAAe,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAgB,UAAU,mBAAW,GAA8B,CAAA,EAC3E,CAAA,CACE,EACf,EAAA,EAAA,MAAC,MAAA,CAAI,UAAU,uBACb,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAAA,UACC,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAO,QAAS,EAAM,MAAO,UAAU,OAAO,gBAAiB,EAAM,UAAY,CAAA,CACtE,CACb,IAAkB,EAAA,EAAA,KAACC,EAAAA,EAAAA,EAAAA,CAAc,CAAA,EAC9B,CAAA,EACG,EAEb"}

package/dist/forms/switch-field.js

@@ -1,2 +1,2 @@
-"use client";import"../label-DeTp9ffC.js";import"../separator-aMl6UNM2.js";import{n as e}from"../field-QnC1I0hN.js";import{a as t,i as n,n as r,o as i,r as a,s as o}from"../form-CoqTElrC.js";import{t as s}from"../switch-CAoADrTz.js";import{Activity as c}from"react";import{jsx as l,jsxs as u}from"react/jsx-runtime";const d=({name:d,label:f=`Switch Field`,className:p=``,description:m,isShowErrorMsg:h=!1})=>l(n,{name:d,render:({field:n})=>u(t,{className:p,children:[l(e,{children:u(c,{mode:f||m?`visible`:`hidden`,children:[l(i,{children:f}),m&&l(a,{className:`text-xs`,children:m})]})}),u(`div`,{className:`basis-3/5`,children:[l(r,{children:l(s,{checked:n.value,className:`!w-8`,onCheckedChange:n.onChange})}),h&&l(o,{})]})]})});export{d as SwitchField};
+"use client";import"../label-pQFhmWzJ.js";import"../separator-udZphpLE.js";import{n as e}from"../field-CBs15wFj.js";import{a as t,i as n,n as r,o as i,r as a,s as o}from"../form-aAvu-cMF.js";import{t as s}from"../switch-DY634XAU.js";import{Activity as c}from"react";import{jsx as l,jsxs as u}from"react/jsx-runtime";const d=({name:d,label:f=`Switch Field`,className:p=``,description:m,isShowErrorMsg:h=!1})=>l(n,{name:d,render:({field:n})=>u(t,{className:p,children:[l(e,{children:u(c,{mode:f||m?`visible`:`hidden`,children:[l(i,{children:f}),m&&l(a,{className:`text-xs`,children:m})]})}),u(`div`,{className:`basis-3/5`,children:[l(r,{children:l(s,{checked:n.value,className:`!w-8`,onCheckedChange:n.onChange})}),h&&l(o,{})]})]})});export{d as SwitchField};
 //# sourceMappingURL=switch-field.js.map

package/dist/forms/text-field-CVNbUPh7.d.cts

@@ -0,0 +1,33 @@
+import * as react_jsx_runtime11 from "react/jsx-runtime";
+import { FieldPath, FieldValues } from "react-hook-form";
+
+//#region packages/components/forms/text-field.d.ts
+type Props<TFieldValues extends FieldValues = FieldValues> = {
+  name: FieldPath<TFieldValues>;
+  label?: string;
+  description?: string;
+  placeholder?: string;
+  isNested?: boolean;
+  isShowLabel?: boolean;
+  isShowClearButton?: boolean;
+  isShowErrorMsg?: boolean;
+  isShowCount?: boolean;
+  className?: string;
+  onValueChange?: (value: string) => void;
+};
+declare const TextField: <TFieldValues extends FieldValues = FieldValues>({
+  name,
+  label,
+  placeholder,
+  isNested,
+  isShowLabel,
+  isShowClearButton,
+  isShowErrorMsg,
+  isShowCount,
+  description,
+  className,
+  onValueChange
+}: Props<TFieldValues>) => react_jsx_runtime11.JSX.Element;
+//#endregion
+export { TextField };
+//# sourceMappingURL=text-field-CVNbUPh7.d.cts.map

package/dist/forms/text-field-hpJxKUAP.d.ts

@@ -0,0 +1,33 @@
+import * as react_jsx_runtime13 from "react/jsx-runtime";
+import { FieldPath, FieldValues } from "react-hook-form";
+
+//#region packages/components/forms/text-field.d.ts
+type Props<TFieldValues extends FieldValues = FieldValues> = {
+  name: FieldPath<TFieldValues>;
+  label?: string;
+  description?: string;
+  placeholder?: string;
+  isNested?: boolean;
+  isShowLabel?: boolean;
+  isShowClearButton?: boolean;
+  isShowErrorMsg?: boolean;
+  isShowCount?: boolean;
+  className?: string;
+  onValueChange?: (value: string) => void;
+};
+declare const TextField: <TFieldValues extends FieldValues = FieldValues>({
+  name,
+  label,
+  placeholder,
+  isNested,
+  isShowLabel,
+  isShowClearButton,
+  isShowErrorMsg,
+  isShowCount,
+  description,
+  className,
+  onValueChange
+}: Props<TFieldValues>) => react_jsx_runtime13.JSX.Element;
+//#endregion
+export { TextField };
+//# sourceMappingURL=text-field-hpJxKUAP.d.ts.map

package/dist/forms/text-field.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require(`../chunk-DjWAcSYV.cjs`),t=require(`../flex-CARSrVMd.cjs`);require(`../label-C81VuIr1.cjs`),require(`../separator-DSfwqts2.cjs`);const n=require(`../field-fedFAcLt.cjs`),r=require(`../form-CQcAxI-L.cjs`),i=require(`../input-DFwfYrJY.cjs`);let a=require(`lucide-react`);a=e.t(a);let o=require(`@customafk/react-toolkit/utils`);o=e.t(o);let s=require(`react`);s=e.t(s);let c=require(`react/jsx-runtime`);c=e.t(c);let l=require(`class-variance-authority`);l=e.t(l);let u=require(`react-hook-form`);u=e.t(u);const d=(0,l.cva)([`text-text-positive-weak hover:text-text-positive focus-visible:ring-border absolute inset-y-0 top-3 end-0 flex h-fit w-8 cursor-pointer items-center justify-center rounded-e-md transition-[color,box-shadow] outline-none focus:z-10 focus-visible:ring-2`]),f=(0,s.memo)(({name:e,isShowClearButton:n,isShowCount:i,isShowErrorMsg:o,onClear:l})=>{let f=(0,u.useWatch)({name:e}),p=(0,s.useCallback)(()=>{l(e)},[l,e]);return(0,c.jsxs)(c.Fragment,{children:[n&&f&&(0,c.jsx)(`button`,{type:`button`,className:d(),"aria-label":`Clear input`,onClick:p,children:(0,c.jsx)(a.XIcon,{size:14,"aria-hidden":`true`})}),(0,c.jsxs)(t.t,{width:`full`,padding:`none`,justify:`end`,children:[o&&(0,c.jsx)(r.s,{className:`grow`}),i&&(0,c.jsxs)(`div`,{className:`text-text-positive-weak text-end text-xs`,children:[f?.length??0,` characters`]})]})]})});f.displayName=`CountCharacters`;const p=({name:e,label:t=`Text Field`,placeholder:a=`Enter text here`,isNested:l=!1,isShowLabel:d=!0,isShowClearButton:p=!1,isShowErrorMsg:m=!1,isShowCount:h=!1,description:g,className:_=``,onValueChange:v})=>{let{resetField:y}=(0,u.useFormContext)();return l?(0,c.jsx)(r.i,{name:e,render:({field:{onChange:l,...u}})=>(0,c.jsxs)(r.a,{orientation:`vertical`,className:`gap-1`,children:[(0,c.jsx)(s.Activity,{mode:t||g?`visible`:`hidden`,children:(0,c.jsxs)(n.n,{children:[(0,c.jsx)(r.o,{className:`text-xs`,children:t}),!!g&&(0,c.jsx)(r.r,{children:g})]})}),(0,c.jsxs)(`div`,{className:`flex flex-col w-full justify-start`,children:[(0,c.jsx)(r.n,{children:(0,c.jsx)(i.t,{...u,placeholder:a,className:(0,o.cn)(`w-full`,p&&`pr-9`),onValueChange:v})}),(0,c.jsx)(f,{name:e,isShowClearButton:p,isShowCount:h,isShowErrorMsg:m,onClear:y})]})]})}):(0,c.jsx)(r.i,{name:e,render:({field:l})=>(0,c.jsxs)(r.a,{className:_,children:[(0,c.jsx)(n.n,{children:(0,c.jsxs)(s.Activity,{mode:t||g?`visible`:`hidden`,children:[d&&(0,c.jsx)(r.o,{children:t}),!!g&&(0,c.jsx)(r.r,{children:g})]})}),(0,c.jsxs)(`div`,{className:`relative basis-3/5`,children:[(0,c.jsx)(r.n,{children:(0,c.jsx)(i.t,{ref:l.ref,value:l.value,disabled:l.disabled,onChange:l.onChange,onBlur:l.onBlur,placeholder:a,className:(0,o.cn)(`w-full`,p&&`pr-9`),onValueChange:v})}),(0,c.jsx)(f,{name:e,isShowClearButton:p,isShowCount:h,isShowErrorMsg:m,onClear:y})]})]})})};exports.TextField=p;
+"use client";const e=require(`../chunk-Bmb41Sf3.cjs`),t=require(`../flex-CKdTJVZS.cjs`);require(`../label-D2Kl-Q_-.cjs`),require(`../separator-D3CGKwyf.cjs`);const n=require(`../field-Cjpwx_6d.cjs`),r=require(`../form-D1gfOYhk.cjs`),i=require(`../input-D2bPk-nW.cjs`);let a=require(`lucide-react`),o=require(`react`),s=require(`@customafk/react-toolkit/utils`),c=require(`react/jsx-runtime`),l=require(`class-variance-authority`),u=require(`react-hook-form`);const d=(0,l.cva)([`absolute inset-y-0 end-0 top-3 flex h-fit w-8 cursor-pointer items-center justify-center rounded-e-md text-text-positive-weak outline-none transition-[color,box-shadow] hover:text-text-positive focus:z-10 focus-visible:ring-2 focus-visible:ring-border`]),f=(0,o.memo)(({name:e,isShowClearButton:n,isShowCount:i,isShowErrorMsg:s,onClear:l})=>{let f=(0,u.useWatch)({name:e}),p=(0,o.useCallback)(()=>{l(e)},[l,e]);return(0,c.jsxs)(c.Fragment,{children:[n&&f&&(0,c.jsx)(`button`,{type:`button`,className:d(),"aria-label":`Clear input`,onClick:p,children:(0,c.jsx)(a.XIcon,{size:14,"aria-hidden":`true`})}),(0,c.jsxs)(t.t,{width:`full`,padding:`none`,justify:`end`,children:[s&&(0,c.jsx)(r.s,{className:`grow`}),i&&(0,c.jsxs)(`div`,{className:`text-end text-text-positive-weak text-xs`,children:[f?.length??0,` characters`]})]})]})});f.displayName=`CountCharacters`;const p=({name:e,label:t=`Text Field`,placeholder:a=`Enter text here`,isNested:l=!1,isShowLabel:d=!0,isShowClearButton:p=!1,isShowErrorMsg:m=!1,isShowCount:h=!1,description:g,className:_=``,onValueChange:v})=>{let{resetField:y}=(0,u.useFormContext)();return l?(0,c.jsx)(r.i,{name:e,render:({field:{onChange:l,...u}})=>(0,c.jsxs)(r.a,{orientation:`vertical`,className:`gap-1`,children:[(0,c.jsx)(o.Activity,{mode:t||g?`visible`:`hidden`,children:(0,c.jsxs)(n.n,{children:[(0,c.jsx)(r.o,{className:`text-xs`,children:t}),!!g&&(0,c.jsx)(r.r,{children:g})]})}),(0,c.jsxs)(`div`,{className:`flex w-full flex-col justify-start`,children:[(0,c.jsx)(r.n,{children:(0,c.jsx)(i.t,{...u,placeholder:a,className:(0,s.cn)(`w-full`,p&&`pr-9`),onValueChange:v})}),(0,c.jsx)(f,{name:e,isShowClearButton:p,isShowCount:h,isShowErrorMsg:m,onClear:y})]})]})}):(0,c.jsx)(r.i,{name:e,render:({field:l})=>(0,c.jsxs)(r.a,{className:_,children:[(0,c.jsx)(n.n,{children:(0,c.jsxs)(o.Activity,{mode:t||g?`visible`:`hidden`,children:[d&&(0,c.jsx)(r.o,{children:t}),!!g&&(0,c.jsx)(r.r,{children:g})]})}),(0,c.jsxs)(`div`,{className:`relative basis-3/5`,children:[(0,c.jsx)(r.n,{children:(0,c.jsx)(i.t,{ref:l.ref,value:l.value,disabled:l.disabled,onChange:l.onChange,onBlur:l.onBlur,placeholder:a,className:(0,s.cn)(`w-full`,p&&`pr-9`),onValueChange:v})}),(0,c.jsx)(f,{name:e,isShowClearButton:p,isShowCount:h,isShowErrorMsg:m,onClear:y})]})]})})};exports.TextField=p;
 //# sourceMappingURL=text-field.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"text-field.cjs","names":["XIcon","Flex","FormMessage","FormField","FormItem","Activity","FieldContent","FormLabel","FormDescription","FormControl","Input"],"sources":["../../packages/components/forms/text-field.tsx"],"sourcesContent":["'use client';\n\nimport { Activity, memo, useCallback } from 'react';\nimport { type FieldPath, type FieldValues, useFormContext, useWatch } from 'react-hook-form';\n\nimport { XIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { cva } from 'class-variance-authority';\nimport { Flex } from '../layouts/flex';\nimport { FieldContent } from '../ui/field';\nimport { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../ui/form';\nimport { Input } from '../ui/input';\n\nconst clearBtnVariant = cva([\n  'text-text-positive-weak hover:text-text-positive focus-visible:ring-border absolute inset-y-0 top-3 end-0 flex h-fit w-8 cursor-pointer items-center justify-center rounded-e-md transition-[color,box-shadow] outline-none focus:z-10 focus-visible:ring-2',\n]);\n\ntype CountCharactersProps = {\n  name: string;\n  isShowClearButton: boolean;\n  isShowErrorMsg?: boolean;\n  isShowCount?: boolean;\n  onClear: (name: string) => void;\n};\nconst CountCharacters = memo(({ name, isShowClearButton, isShowCount, isShowErrorMsg, onClear }: CountCharactersProps) => {\n  const valueWatch = useWatch({ name });\n\n  const handleClearInput = useCallback(() => {\n    onClear(name);\n  }, [onClear, name]);\n  return (\n    <>\n      {isShowClearButton && valueWatch && (\n        <button type=\"button\" className={clearBtnVariant()} aria-label=\"Clear input\" onClick={handleClearInput}>\n          <XIcon size={14} aria-hidden=\"true\" />\n        </button>\n      )}\n      <Flex width=\"full\" padding=\"none\" justify=\"end\">\n        {isShowErrorMsg && <FormMessage className=\"grow\" />}\n        {isShowCount && <div className=\"text-text-positive-weak text-end text-xs\">{valueWatch?.length ?? 0} characters</div>}\n      </Flex>\n    </>\n  );\n});\nCountCharacters.displayName = 'CountCharacters';\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  name: FieldPath<TFieldValues>;\n  label?: string;\n  description?: string;\n  placeholder?: string;\n  isNested?: boolean;\n  isShowLabel?: boolean;\n  isShowClearButton?: boolean;\n  isShowErrorMsg?: boolean;\n  isShowCount?: boolean;\n  className?: string;\n  onValueChange?: (value: string) => void;\n};\nexport const TextField = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  label = 'Text Field',\n  placeholder = 'Enter text here',\n  isNested = false,\n  isShowLabel = true,\n  isShowClearButton = false,\n  isShowErrorMsg = false,\n  isShowCount = false,\n  description,\n  className = '',\n  onValueChange,\n}: Props<TFieldValues>) => {\n  const { resetField } = useFormContext();\n\n  if (isNested) {\n    return (\n      <FormField\n        name={name}\n        render={({ field: { onChange, ...field } }) => (\n          <FormItem orientation=\"vertical\" className=\"gap-1\">\n            <Activity mode={label || description ? 'visible' : 'hidden'}>\n              <FieldContent>\n                <FormLabel className=\"text-xs\">{label}</FormLabel>\n                {!!description && <FormDescription>{description}</FormDescription>}\n              </FieldContent>\n            </Activity>\n            <div className=\"flex flex-col w-full justify-start\">\n              <FormControl>\n                <Input {...field} placeholder={placeholder} className={cn('w-full', isShowClearButton && 'pr-9')} onValueChange={onValueChange} />\n              </FormControl>\n              <CountCharacters\n                name={name}\n                isShowClearButton={isShowClearButton}\n                isShowCount={isShowCount}\n                isShowErrorMsg={isShowErrorMsg}\n                onClear={resetField}\n              />\n            </div>\n          </FormItem>\n        )}\n      ></FormField>\n    );\n  }\n\n  return (\n    <FormField\n      name={name}\n      render={({ field }) => (\n        <FormItem className={className}>\n          <FieldContent>\n            <Activity mode={label || description ? 'visible' : 'hidden'}>\n              {isShowLabel && <FormLabel>{label}</FormLabel>}\n              {!!description && <FormDescription>{description}</FormDescription>}\n            </Activity>\n          </FieldContent>\n          <div className=\"relative basis-3/5\">\n            <FormControl>\n              <Input\n                ref={field.ref}\n                value={field.value}\n                disabled={field.disabled}\n                onChange={field.onChange}\n                onBlur={field.onBlur}\n                placeholder={placeholder}\n                className={cn('w-full', isShowClearButton && 'pr-9')}\n                onValueChange={onValueChange}\n              />\n            </FormControl>\n            <CountCharacters name={name} isShowClearButton={isShowClearButton} isShowCount={isShowCount} isShowErrorMsg={isShowErrorMsg} onClear={resetField} />\n          </div>\n        </FormItem>\n      )}\n    />\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"text-field.cjs","names":["XIcon","Flex","FormMessage","FormField","FormItem","Activity","FieldContent","FormLabel","FormDescription","FormControl","Input"],"sources":["../../packages/components/forms/text-field.tsx"],"sourcesContent":["'use client';\n\nimport { Activity, memo, useCallback } from 'react';\nimport { type FieldPath, type FieldValues, useFormContext, useWatch } from 'react-hook-form';\n\nimport { XIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { cva } from 'class-variance-authority';\nimport { Flex } from '../layouts/flex';\nimport { FieldContent } from '../ui/field';\nimport { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../ui/form';\nimport { Input } from '../ui/input';\n\nconst clearBtnVariant = cva([\n  'absolute inset-y-0 end-0 top-3 flex h-fit w-8 cursor-pointer items-center justify-center rounded-e-md text-text-positive-weak outline-none transition-[color,box-shadow] hover:text-text-positive focus:z-10 focus-visible:ring-2 focus-visible:ring-border',\n]);\n\ntype CountCharactersProps = {\n  name: string;\n  isShowClearButton: boolean;\n  isShowErrorMsg?: boolean;\n  isShowCount?: boolean;\n  onClear: (name: string) => void;\n};\nconst CountCharacters = memo(({ name, isShowClearButton, isShowCount, isShowErrorMsg, onClear }: CountCharactersProps) => {\n  const valueWatch = useWatch({ name });\n\n  const handleClearInput = useCallback(() => {\n    onClear(name);\n  }, [onClear, name]);\n  return (\n    <>\n      {isShowClearButton && valueWatch && (\n        <button type=\"button\" className={clearBtnVariant()} aria-label=\"Clear input\" onClick={handleClearInput}>\n          <XIcon size={14} aria-hidden=\"true\" />\n        </button>\n      )}\n      <Flex width=\"full\" padding=\"none\" justify=\"end\">\n        {isShowErrorMsg && <FormMessage className=\"grow\" />}\n        {isShowCount && <div className=\"text-end text-text-positive-weak text-xs\">{valueWatch?.length ?? 0} characters</div>}\n      </Flex>\n    </>\n  );\n});\nCountCharacters.displayName = 'CountCharacters';\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  name: FieldPath<TFieldValues>;\n  label?: string;\n  description?: string;\n  placeholder?: string;\n  isNested?: boolean;\n  isShowLabel?: boolean;\n  isShowClearButton?: boolean;\n  isShowErrorMsg?: boolean;\n  isShowCount?: boolean;\n  className?: string;\n  onValueChange?: (value: string) => void;\n};\nexport const TextField = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  label = 'Text Field',\n  placeholder = 'Enter text here',\n  isNested = false,\n  isShowLabel = true,\n  isShowClearButton = false,\n  isShowErrorMsg = false,\n  isShowCount = false,\n  description,\n  className = '',\n  onValueChange,\n}: Props<TFieldValues>) => {\n  const { resetField } = useFormContext();\n\n  if (isNested) {\n    return (\n      <FormField\n        name={name}\n        render={({ field: { onChange, ...field } }) => (\n          <FormItem orientation=\"vertical\" className=\"gap-1\">\n            <Activity mode={label || description ? 'visible' : 'hidden'}>\n              <FieldContent>\n                <FormLabel className=\"text-xs\">{label}</FormLabel>\n                {!!description && <FormDescription>{description}</FormDescription>}\n              </FieldContent>\n            </Activity>\n            <div className=\"flex w-full flex-col justify-start\">\n              <FormControl>\n                <Input {...field} placeholder={placeholder} className={cn('w-full', isShowClearButton && 'pr-9')} onValueChange={onValueChange} />\n              </FormControl>\n              <CountCharacters\n                name={name}\n                isShowClearButton={isShowClearButton}\n                isShowCount={isShowCount}\n                isShowErrorMsg={isShowErrorMsg}\n                onClear={resetField}\n              />\n            </div>\n          </FormItem>\n        )}\n      ></FormField>\n    );\n  }\n\n  return (\n    <FormField\n      name={name}\n      render={({ field }) => (\n        <FormItem className={className}>\n          <FieldContent>\n            <Activity mode={label || description ? 'visible' : 'hidden'}>\n              {isShowLabel && <FormLabel>{label}</FormLabel>}\n              {!!description && <FormDescription>{description}</FormDescription>}\n            </Activity>\n          </FieldContent>\n          <div className=\"relative basis-3/5\">\n            <FormControl>\n              <Input\n                ref={field.ref}\n                value={field.value}\n                disabled={field.disabled}\n                onChange={field.onChange}\n                onBlur={field.onBlur}\n                placeholder={placeholder}\n                className={cn('w-full', isShowClearButton && 'pr-9')}\n                onValueChange={onValueChange}\n              />\n            </FormControl>\n            <CountCharacters name={name} isShowClearButton={isShowClearButton} isShowCount={isShowCount} isShowErrorMsg={isShowErrorMsg} onClear={resetField} />\n          </div>\n        </FormItem>\n      )}\n    />\n  );\n};\n"],"mappings":"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"}

package/dist/forms/text-field.js

@@ -1,2 +1,2 @@
-"use client";import{t as e}from"../flex-D5a9wval.js";import"../label-DeTp9ffC.js";import"../separator-aMl6UNM2.js";import{n as t}from"../field-QnC1I0hN.js";import{a as n,i as r,n as i,o as a,r as o,s}from"../form-CoqTElrC.js";import{t as c}from"../input-C2puAk5o.js";import{XIcon as l}from"lucide-react";import{cn as u}from"@customafk/react-toolkit/utils";import{Activity as d,memo as f,useCallback as p}from"react";import{Fragment as m,jsx as h,jsxs as g}from"react/jsx-runtime";import{cva as _}from"class-variance-authority";import{useFormContext as v,useWatch as y}from"react-hook-form";const b=_([`text-text-positive-weak hover:text-text-positive focus-visible:ring-border absolute inset-y-0 top-3 end-0 flex h-fit w-8 cursor-pointer items-center justify-center rounded-e-md transition-[color,box-shadow] outline-none focus:z-10 focus-visible:ring-2`]),x=f(({name:t,isShowClearButton:n,isShowCount:r,isShowErrorMsg:i,onClear:a})=>{let o=y({name:t}),c=p(()=>{a(t)},[a,t]);return g(m,{children:[n&&o&&h(`button`,{type:`button`,className:b(),"aria-label":`Clear input`,onClick:c,children:h(l,{size:14,"aria-hidden":`true`})}),g(e,{width:`full`,padding:`none`,justify:`end`,children:[i&&h(s,{className:`grow`}),r&&g(`div`,{className:`text-text-positive-weak text-end text-xs`,children:[o?.length??0,` characters`]})]})]})});x.displayName=`CountCharacters`;const S=({name:e,label:s=`Text Field`,placeholder:l=`Enter text here`,isNested:f=!1,isShowLabel:p=!0,isShowClearButton:m=!1,isShowErrorMsg:_=!1,isShowCount:y=!1,description:b,className:S=``,onValueChange:C})=>{let{resetField:w}=v();return f?h(r,{name:e,render:({field:{onChange:r,...f}})=>g(n,{orientation:`vertical`,className:`gap-1`,children:[h(d,{mode:s||b?`visible`:`hidden`,children:g(t,{children:[h(a,{className:`text-xs`,children:s}),!!b&&h(o,{children:b})]})}),g(`div`,{className:`flex flex-col w-full justify-start`,children:[h(i,{children:h(c,{...f,placeholder:l,className:u(`w-full`,m&&`pr-9`),onValueChange:C})}),h(x,{name:e,isShowClearButton:m,isShowCount:y,isShowErrorMsg:_,onClear:w})]})]})}):h(r,{name:e,render:({field:r})=>g(n,{className:S,children:[h(t,{children:g(d,{mode:s||b?`visible`:`hidden`,children:[p&&h(a,{children:s}),!!b&&h(o,{children:b})]})}),g(`div`,{className:`relative basis-3/5`,children:[h(i,{children:h(c,{ref:r.ref,value:r.value,disabled:r.disabled,onChange:r.onChange,onBlur:r.onBlur,placeholder:l,className:u(`w-full`,m&&`pr-9`),onValueChange:C})}),h(x,{name:e,isShowClearButton:m,isShowCount:y,isShowErrorMsg:_,onClear:w})]})]})})};export{S as TextField};
+"use client";import{t as e}from"../flex-R1TY6P_u.js";import"../label-pQFhmWzJ.js";import"../separator-udZphpLE.js";import{n as t}from"../field-CBs15wFj.js";import{a as n,i as r,n as i,o as a,r as o,s}from"../form-aAvu-cMF.js";import{t as c}from"../input-C_Q32lFA.js";import{XIcon as l}from"lucide-react";import{Activity as u,memo as d,useCallback as f}from"react";import{cn as p}from"@customafk/react-toolkit/utils";import{Fragment as m,jsx as h,jsxs as g}from"react/jsx-runtime";import{cva as _}from"class-variance-authority";import{useFormContext as v,useWatch as y}from"react-hook-form";const b=_([`absolute inset-y-0 end-0 top-3 flex h-fit w-8 cursor-pointer items-center justify-center rounded-e-md text-text-positive-weak outline-none transition-[color,box-shadow] hover:text-text-positive focus:z-10 focus-visible:ring-2 focus-visible:ring-border`]),x=d(({name:t,isShowClearButton:n,isShowCount:r,isShowErrorMsg:i,onClear:a})=>{let o=y({name:t}),c=f(()=>{a(t)},[a,t]);return g(m,{children:[n&&o&&h(`button`,{type:`button`,className:b(),"aria-label":`Clear input`,onClick:c,children:h(l,{size:14,"aria-hidden":`true`})}),g(e,{width:`full`,padding:`none`,justify:`end`,children:[i&&h(s,{className:`grow`}),r&&g(`div`,{className:`text-end text-text-positive-weak text-xs`,children:[o?.length??0,` characters`]})]})]})});x.displayName=`CountCharacters`;const S=({name:e,label:s=`Text Field`,placeholder:l=`Enter text here`,isNested:d=!1,isShowLabel:f=!0,isShowClearButton:m=!1,isShowErrorMsg:_=!1,isShowCount:y=!1,description:b,className:S=``,onValueChange:C})=>{let{resetField:w}=v();return d?h(r,{name:e,render:({field:{onChange:r,...d}})=>g(n,{orientation:`vertical`,className:`gap-1`,children:[h(u,{mode:s||b?`visible`:`hidden`,children:g(t,{children:[h(a,{className:`text-xs`,children:s}),!!b&&h(o,{children:b})]})}),g(`div`,{className:`flex w-full flex-col justify-start`,children:[h(i,{children:h(c,{...d,placeholder:l,className:p(`w-full`,m&&`pr-9`),onValueChange:C})}),h(x,{name:e,isShowClearButton:m,isShowCount:y,isShowErrorMsg:_,onClear:w})]})]})}):h(r,{name:e,render:({field:r})=>g(n,{className:S,children:[h(t,{children:g(u,{mode:s||b?`visible`:`hidden`,children:[f&&h(a,{children:s}),!!b&&h(o,{children:b})]})}),g(`div`,{className:`relative basis-3/5`,children:[h(i,{children:h(c,{ref:r.ref,value:r.value,disabled:r.disabled,onChange:r.onChange,onBlur:r.onBlur,placeholder:l,className:p(`w-full`,m&&`pr-9`),onValueChange:C})}),h(x,{name:e,isShowClearButton:m,isShowCount:y,isShowErrorMsg:_,onClear:w})]})]})})};export{S as TextField};
 //# sourceMappingURL=text-field.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"text-field.js","names":[],"sources":["../../packages/components/forms/text-field.tsx"],"sourcesContent":["'use client';\n\nimport { Activity, memo, useCallback } from 'react';\nimport { type FieldPath, type FieldValues, useFormContext, useWatch } from 'react-hook-form';\n\nimport { XIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { cva } from 'class-variance-authority';\nimport { Flex } from '../layouts/flex';\nimport { FieldContent } from '../ui/field';\nimport { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../ui/form';\nimport { Input } from '../ui/input';\n\nconst clearBtnVariant = cva([\n  'text-text-positive-weak hover:text-text-positive focus-visible:ring-border absolute inset-y-0 top-3 end-0 flex h-fit w-8 cursor-pointer items-center justify-center rounded-e-md transition-[color,box-shadow] outline-none focus:z-10 focus-visible:ring-2',\n]);\n\ntype CountCharactersProps = {\n  name: string;\n  isShowClearButton: boolean;\n  isShowErrorMsg?: boolean;\n  isShowCount?: boolean;\n  onClear: (name: string) => void;\n};\nconst CountCharacters = memo(({ name, isShowClearButton, isShowCount, isShowErrorMsg, onClear }: CountCharactersProps) => {\n  const valueWatch = useWatch({ name });\n\n  const handleClearInput = useCallback(() => {\n    onClear(name);\n  }, [onClear, name]);\n  return (\n    <>\n      {isShowClearButton && valueWatch && (\n        <button type=\"button\" className={clearBtnVariant()} aria-label=\"Clear input\" onClick={handleClearInput}>\n          <XIcon size={14} aria-hidden=\"true\" />\n        </button>\n      )}\n      <Flex width=\"full\" padding=\"none\" justify=\"end\">\n        {isShowErrorMsg && <FormMessage className=\"grow\" />}\n        {isShowCount && <div className=\"text-text-positive-weak text-end text-xs\">{valueWatch?.length ?? 0} characters</div>}\n      </Flex>\n    </>\n  );\n});\nCountCharacters.displayName = 'CountCharacters';\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  name: FieldPath<TFieldValues>;\n  label?: string;\n  description?: string;\n  placeholder?: string;\n  isNested?: boolean;\n  isShowLabel?: boolean;\n  isShowClearButton?: boolean;\n  isShowErrorMsg?: boolean;\n  isShowCount?: boolean;\n  className?: string;\n  onValueChange?: (value: string) => void;\n};\nexport const TextField = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  label = 'Text Field',\n  placeholder = 'Enter text here',\n  isNested = false,\n  isShowLabel = true,\n  isShowClearButton = false,\n  isShowErrorMsg = false,\n  isShowCount = false,\n  description,\n  className = '',\n  onValueChange,\n}: Props<TFieldValues>) => {\n  const { resetField } = useFormContext();\n\n  if (isNested) {\n    return (\n      <FormField\n        name={name}\n        render={({ field: { onChange, ...field } }) => (\n          <FormItem orientation=\"vertical\" className=\"gap-1\">\n            <Activity mode={label || description ? 'visible' : 'hidden'}>\n              <FieldContent>\n                <FormLabel className=\"text-xs\">{label}</FormLabel>\n                {!!description && <FormDescription>{description}</FormDescription>}\n              </FieldContent>\n            </Activity>\n            <div className=\"flex flex-col w-full justify-start\">\n              <FormControl>\n                <Input {...field} placeholder={placeholder} className={cn('w-full', isShowClearButton && 'pr-9')} onValueChange={onValueChange} />\n              </FormControl>\n              <CountCharacters\n                name={name}\n                isShowClearButton={isShowClearButton}\n                isShowCount={isShowCount}\n                isShowErrorMsg={isShowErrorMsg}\n                onClear={resetField}\n              />\n            </div>\n          </FormItem>\n        )}\n      ></FormField>\n    );\n  }\n\n  return (\n    <FormField\n      name={name}\n      render={({ field }) => (\n        <FormItem className={className}>\n          <FieldContent>\n            <Activity mode={label || description ? 'visible' : 'hidden'}>\n              {isShowLabel && <FormLabel>{label}</FormLabel>}\n              {!!description && <FormDescription>{description}</FormDescription>}\n            </Activity>\n          </FieldContent>\n          <div className=\"relative basis-3/5\">\n            <FormControl>\n              <Input\n                ref={field.ref}\n                value={field.value}\n                disabled={field.disabled}\n                onChange={field.onChange}\n                onBlur={field.onBlur}\n                placeholder={placeholder}\n                className={cn('w-full', isShowClearButton && 'pr-9')}\n                onValueChange={onValueChange}\n              />\n            </FormControl>\n            <CountCharacters name={name} isShowClearButton={isShowClearButton} isShowCount={isShowCount} isShowErrorMsg={isShowErrorMsg} onClear={resetField} />\n          </div>\n        </FormItem>\n      )}\n    />\n  );\n};\n"],"mappings":"8kBAeA,MAAM,EAAkB,EAAI,CAC1B,8PACD,CAAC,CASI,EAAkB,GAAM,CAAE,OAAM,oBAAmB,cAAa,iBAAgB,aAAoC,CACxH,IAAM,EAAa,EAAS,CAAE,OAAM,CAAC,CAE/B,EAAmB,MAAkB,CACzC,EAAQ,EAAK,EACZ,CAAC,EAAS,EAAK,CAAC,CACnB,OACE,EAAA,EAAA,CAAA,SAAA,CACG,GAAqB,GACpB,EAAC,SAAA,CAAO,KAAK,SAAS,UAAW,GAAiB,CAAE,aAAW,cAAc,QAAS,WACpF,EAAC,EAAA,CAAM,KAAM,GAAI,cAAY,QAAS,EAC/B,CAEX,EAAC,EAAA,CAAK,MAAM,OAAO,QAAQ,OAAO,QAAQ,gBACvC,GAAkB,EAAC,EAAA,CAAY,UAAU,OAAA,CAAS,CAClD,GAAe,EAAC,MAAA,CAAI,UAAU,qDAA4C,GAAY,QAAU,EAAE,cAAA,EAAiB,CAAA,EAC/G,CAAA,CAAA,CACN,EAEL,CACF,EAAgB,YAAc,kBAe9B,MAAa,GAA6D,CACxE,OACA,QAAQ,aACR,cAAc,kBACd,WAAW,GACX,cAAc,GACd,oBAAoB,GACpB,iBAAiB,GACjB,cAAc,GACd,cACA,YAAY,GACZ,mBACyB,CACzB,GAAM,CAAE,cAAe,GAAgB,CAgCvC,OA9BI,EAEA,EAAC,EAAA,CACO,OACN,QAAS,CAAE,MAAO,CAAE,WAAU,GAAG,MAC/B,EAAC,EAAA,CAAS,YAAY,WAAW,UAAU,kBACzC,EAAC,EAAA,CAAS,KAAM,GAAS,EAAc,UAAY,kBACjD,EAAC,EAAA,CAAA,SAAA,CACC,EAAC,EAAA,CAAU,UAAU,mBAAW,GAAkB,CACjD,CAAC,CAAC,GAAe,EAAC,EAAA,CAAA,SAAiB,EAAA,CAA8B,CAAA,CAAA,CACrD,EACN,CACX,EAAC,MAAA,CAAI,UAAU,+CACb,EAAC,EAAA,CAAA,SACC,EAAC,EAAA,CAAM,GAAI,EAAoB,cAAa,UAAW,EAAG,SAAU,GAAqB,OAAO,CAAiB,iBAAiB,CAAA,CACtH,CACd,EAAC,EAAA,CACO,OACa,oBACN,cACG,iBAChB,QAAS,GACT,CAAA,EACE,CAAA,EACG,EAEF,CAKf,EAAC,EAAA,CACO,OACN,QAAS,CAAE,WACT,EAAC,EAAA,CAAoB,sBACnB,EAAC,EAAA,CAAA,SACC,EAAC,EAAA,CAAS,KAAM,GAAS,EAAc,UAAY,mBAChD,GAAe,EAAC,EAAA,CAAA,SAAW,EAAA,CAAkB,CAC7C,CAAC,CAAC,GAAe,EAAC,EAAA,CAAA,SAAiB,EAAA,CAA8B,CAAA,EACzD,CAAA,CACE,CACf,EAAC,MAAA,CAAI,UAAU,+BACb,EAAC,EAAA,CAAA,SACC,EAAC,EAAA,CACC,IAAK,EAAM,IACX,MAAO,EAAM,MACb,SAAU,EAAM,SAChB,SAAU,EAAM,SAChB,OAAQ,EAAM,OACD,cACb,UAAW,EAAG,SAAU,GAAqB,OAAO,CACrC,iBACf,CAAA,CACU,CACd,EAAC,EAAA,CAAsB,OAAyB,oBAAgC,cAA6B,iBAAgB,QAAS,GAAc,CAAA,EAChJ,CAAA,EACG,EAEb"}
+{"version":3,"file":"text-field.js","names":[],"sources":["../../packages/components/forms/text-field.tsx"],"sourcesContent":["'use client';\n\nimport { Activity, memo, useCallback } from 'react';\nimport { type FieldPath, type FieldValues, useFormContext, useWatch } from 'react-hook-form';\n\nimport { XIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { cva } from 'class-variance-authority';\nimport { Flex } from '../layouts/flex';\nimport { FieldContent } from '../ui/field';\nimport { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../ui/form';\nimport { Input } from '../ui/input';\n\nconst clearBtnVariant = cva([\n  'absolute inset-y-0 end-0 top-3 flex h-fit w-8 cursor-pointer items-center justify-center rounded-e-md text-text-positive-weak outline-none transition-[color,box-shadow] hover:text-text-positive focus:z-10 focus-visible:ring-2 focus-visible:ring-border',\n]);\n\ntype CountCharactersProps = {\n  name: string;\n  isShowClearButton: boolean;\n  isShowErrorMsg?: boolean;\n  isShowCount?: boolean;\n  onClear: (name: string) => void;\n};\nconst CountCharacters = memo(({ name, isShowClearButton, isShowCount, isShowErrorMsg, onClear }: CountCharactersProps) => {\n  const valueWatch = useWatch({ name });\n\n  const handleClearInput = useCallback(() => {\n    onClear(name);\n  }, [onClear, name]);\n  return (\n    <>\n      {isShowClearButton && valueWatch && (\n        <button type=\"button\" className={clearBtnVariant()} aria-label=\"Clear input\" onClick={handleClearInput}>\n          <XIcon size={14} aria-hidden=\"true\" />\n        </button>\n      )}\n      <Flex width=\"full\" padding=\"none\" justify=\"end\">\n        {isShowErrorMsg && <FormMessage className=\"grow\" />}\n        {isShowCount && <div className=\"text-end text-text-positive-weak text-xs\">{valueWatch?.length ?? 0} characters</div>}\n      </Flex>\n    </>\n  );\n});\nCountCharacters.displayName = 'CountCharacters';\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  name: FieldPath<TFieldValues>;\n  label?: string;\n  description?: string;\n  placeholder?: string;\n  isNested?: boolean;\n  isShowLabel?: boolean;\n  isShowClearButton?: boolean;\n  isShowErrorMsg?: boolean;\n  isShowCount?: boolean;\n  className?: string;\n  onValueChange?: (value: string) => void;\n};\nexport const TextField = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  label = 'Text Field',\n  placeholder = 'Enter text here',\n  isNested = false,\n  isShowLabel = true,\n  isShowClearButton = false,\n  isShowErrorMsg = false,\n  isShowCount = false,\n  description,\n  className = '',\n  onValueChange,\n}: Props<TFieldValues>) => {\n  const { resetField } = useFormContext();\n\n  if (isNested) {\n    return (\n      <FormField\n        name={name}\n        render={({ field: { onChange, ...field } }) => (\n          <FormItem orientation=\"vertical\" className=\"gap-1\">\n            <Activity mode={label || description ? 'visible' : 'hidden'}>\n              <FieldContent>\n                <FormLabel className=\"text-xs\">{label}</FormLabel>\n                {!!description && <FormDescription>{description}</FormDescription>}\n              </FieldContent>\n            </Activity>\n            <div className=\"flex w-full flex-col justify-start\">\n              <FormControl>\n                <Input {...field} placeholder={placeholder} className={cn('w-full', isShowClearButton && 'pr-9')} onValueChange={onValueChange} />\n              </FormControl>\n              <CountCharacters\n                name={name}\n                isShowClearButton={isShowClearButton}\n                isShowCount={isShowCount}\n                isShowErrorMsg={isShowErrorMsg}\n                onClear={resetField}\n              />\n            </div>\n          </FormItem>\n        )}\n      ></FormField>\n    );\n  }\n\n  return (\n    <FormField\n      name={name}\n      render={({ field }) => (\n        <FormItem className={className}>\n          <FieldContent>\n            <Activity mode={label || description ? 'visible' : 'hidden'}>\n              {isShowLabel && <FormLabel>{label}</FormLabel>}\n              {!!description && <FormDescription>{description}</FormDescription>}\n            </Activity>\n          </FieldContent>\n          <div className=\"relative basis-3/5\">\n            <FormControl>\n              <Input\n                ref={field.ref}\n                value={field.value}\n                disabled={field.disabled}\n                onChange={field.onChange}\n                onBlur={field.onBlur}\n                placeholder={placeholder}\n                className={cn('w-full', isShowClearButton && 'pr-9')}\n                onValueChange={onValueChange}\n              />\n            </FormControl>\n            <CountCharacters name={name} isShowClearButton={isShowClearButton} isShowCount={isShowCount} isShowErrorMsg={isShowErrorMsg} onClear={resetField} />\n          </div>\n        </FormItem>\n      )}\n    />\n  );\n};\n"],"mappings":"8kBAeA,MAAM,EAAkB,EAAI,CAC1B,8PACD,CAAC,CASI,EAAkB,GAAM,CAAE,OAAM,oBAAmB,cAAa,iBAAgB,aAAoC,CACxH,IAAM,EAAa,EAAS,CAAE,OAAM,CAAC,CAE/B,EAAmB,MAAkB,CACzC,EAAQ,EAAK,EACZ,CAAC,EAAS,EAAK,CAAC,CACnB,OACE,EAAA,EAAA,CAAA,SAAA,CACG,GAAqB,GACpB,EAAC,SAAA,CAAO,KAAK,SAAS,UAAW,GAAiB,CAAE,aAAW,cAAc,QAAS,WACpF,EAAC,EAAA,CAAM,KAAM,GAAI,cAAY,QAAS,EAC/B,CAEX,EAAC,EAAA,CAAK,MAAM,OAAO,QAAQ,OAAO,QAAQ,gBACvC,GAAkB,EAAC,EAAA,CAAY,UAAU,OAAA,CAAS,CAClD,GAAe,EAAC,MAAA,CAAI,UAAU,qDAA4C,GAAY,QAAU,EAAE,cAAA,EAAiB,CAAA,EAC/G,CAAA,CAAA,CACN,EAEL,CACF,EAAgB,YAAc,kBAe9B,MAAa,GAA6D,CACxE,OACA,QAAQ,aACR,cAAc,kBACd,WAAW,GACX,cAAc,GACd,oBAAoB,GACpB,iBAAiB,GACjB,cAAc,GACd,cACA,YAAY,GACZ,mBACyB,CACzB,GAAM,CAAE,cAAe,GAAgB,CAgCvC,OA9BI,EAEA,EAAC,EAAA,CACO,OACN,QAAS,CAAE,MAAO,CAAE,WAAU,GAAG,MAC/B,EAAC,EAAA,CAAS,YAAY,WAAW,UAAU,kBACzC,EAAC,EAAA,CAAS,KAAM,GAAS,EAAc,UAAY,kBACjD,EAAC,EAAA,CAAA,SAAA,CACC,EAAC,EAAA,CAAU,UAAU,mBAAW,GAAkB,CACjD,CAAC,CAAC,GAAe,EAAC,EAAA,CAAA,SAAiB,EAAA,CAA8B,CAAA,CAAA,CACrD,EACN,CACX,EAAC,MAAA,CAAI,UAAU,+CACb,EAAC,EAAA,CAAA,SACC,EAAC,EAAA,CAAM,GAAI,EAAoB,cAAa,UAAW,EAAG,SAAU,GAAqB,OAAO,CAAiB,iBAAiB,CAAA,CACtH,CACd,EAAC,EAAA,CACO,OACa,oBACN,cACG,iBAChB,QAAS,GACT,CAAA,EACE,CAAA,EACG,EAEF,CAKf,EAAC,EAAA,CACO,OACN,QAAS,CAAE,WACT,EAAC,EAAA,CAAoB,sBACnB,EAAC,EAAA,CAAA,SACC,EAAC,EAAA,CAAS,KAAM,GAAS,EAAc,UAAY,mBAChD,GAAe,EAAC,EAAA,CAAA,SAAW,EAAA,CAAkB,CAC7C,CAAC,CAAC,GAAe,EAAC,EAAA,CAAA,SAAiB,EAAA,CAA8B,CAAA,EACzD,CAAA,CACE,CACf,EAAC,MAAA,CAAI,UAAU,+BACb,EAAC,EAAA,CAAA,SACC,EAAC,EAAA,CACC,IAAK,EAAM,IACX,MAAO,EAAM,MACb,SAAU,EAAM,SAChB,SAAU,EAAM,SAChB,OAAQ,EAAM,OACD,cACb,UAAW,EAAG,SAAU,GAAqB,OAAO,CACrC,iBACf,CAAA,CACU,CACd,EAAC,EAAA,CAAsB,OAAyB,oBAAgC,cAA6B,iBAAgB,QAAS,GAAc,CAAA,EAChJ,CAAA,EACG,EAEb"}

package/dist/forms/textarea-field-CybxNS3T.d.ts

@@ -0,0 +1,27 @@
+import * as react_jsx_runtime43 from "react/jsx-runtime";
+import { FieldPath, FieldValues } from "react-hook-form";
+
+//#region packages/components/forms/textarea-field.d.ts
+type Props<TFieldValues extends FieldValues = FieldValues> = {
+  name: FieldPath<TFieldValues>;
+  label?: string;
+  description?: string;
+  placeholder?: string;
+  isShowErrorMsg?: boolean;
+  isShowCount?: boolean;
+  rows?: number;
+  onValueChange?: (value: string) => void;
+};
+declare const TextareaField: <TFieldValues extends FieldValues = FieldValues>({
+  name,
+  label,
+  placeholder,
+  isShowErrorMsg,
+  isShowCount,
+  description,
+  rows,
+  onValueChange
+}: Props<TFieldValues>) => react_jsx_runtime43.JSX.Element;
+//#endregion
+export { TextareaField };
+//# sourceMappingURL=textarea-field-CybxNS3T.d.ts.map

package/dist/forms/textarea-field-RD8o07Um.d.cts

@@ -0,0 +1,27 @@
+import * as react_jsx_runtime2 from "react/jsx-runtime";
+import { FieldPath, FieldValues } from "react-hook-form";
+
+//#region packages/components/forms/textarea-field.d.ts
+type Props<TFieldValues extends FieldValues = FieldValues> = {
+  name: FieldPath<TFieldValues>;
+  label?: string;
+  description?: string;
+  placeholder?: string;
+  isShowErrorMsg?: boolean;
+  isShowCount?: boolean;
+  rows?: number;
+  onValueChange?: (value: string) => void;
+};
+declare const TextareaField: <TFieldValues extends FieldValues = FieldValues>({
+  name,
+  label,
+  placeholder,
+  isShowErrorMsg,
+  isShowCount,
+  description,
+  rows,
+  onValueChange
+}: Props<TFieldValues>) => react_jsx_runtime2.JSX.Element;
+//#endregion
+export { TextareaField };
+//# sourceMappingURL=textarea-field-RD8o07Um.d.cts.map

package/dist/forms/textarea-field.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require(`../chunk-DjWAcSYV.cjs`),t=require(`../flex-CARSrVMd.cjs`);require(`../label-C81VuIr1.cjs`),require(`../separator-DSfwqts2.cjs`);const n=require(`../field-fedFAcLt.cjs`),r=require(`../form-CQcAxI-L.cjs`),i=require(`../textarea-BAMdq0nK.cjs`);let a=require(`react`);a=e.t(a);let o=require(`react/jsx-runtime`);o=e.t(o);let s=require(`react-hook-form`);s=e.t(s);const c=({name:e,label:c=`Textarea Field`,placeholder:l=`Enter text here`,isShowErrorMsg:u=!1,isShowCount:d=!1,description:f,rows:p=3,onValueChange:m})=>{let h=(0,s.useWatch)({name:e});return(0,o.jsx)(r.i,{name:e,render:({field:e})=>(0,o.jsxs)(r.a,{className:`w-full`,children:[(0,o.jsx)(a.Activity,{mode:c||f?`visible`:`hidden`,children:(0,o.jsxs)(n.n,{children:[(0,o.jsx)(r.o,{children:c}),!!f&&(0,o.jsx)(r.r,{children:f})]})}),(0,o.jsxs)(`div`,{className:`relative basis-3/5`,children:[(0,o.jsx)(r.n,{children:(0,o.jsx)(i.t,{...e,placeholder:l,className:`w-full`,rows:p,onValueChange:m})}),(0,o.jsxs)(t.t,{width:`full`,padding:`none`,justify:`end`,children:[d&&(0,o.jsxs)(`div`,{className:`text-muted-foreground text-end text-xs`,children:[h?.length??0,` characters`]}),u&&(0,o.jsx)(r.s,{})]})]})]})})};exports.TextareaField=c;
+"use client";const e=require(`../chunk-Bmb41Sf3.cjs`),t=require(`../flex-CKdTJVZS.cjs`);require(`../label-D2Kl-Q_-.cjs`),require(`../separator-D3CGKwyf.cjs`);const n=require(`../field-Cjpwx_6d.cjs`),r=require(`../form-D1gfOYhk.cjs`),i=require(`../textarea-isVIS6NP.cjs`);let a=require(`react`),o=require(`react/jsx-runtime`),s=require(`react-hook-form`);const c=({name:e,label:c=`Textarea Field`,placeholder:l=`Enter text here`,isShowErrorMsg:u=!1,isShowCount:d=!1,description:f,rows:p=3,onValueChange:m})=>{let h=(0,s.useWatch)({name:e});return(0,o.jsx)(r.i,{name:e,render:({field:e})=>(0,o.jsxs)(r.a,{className:`w-full`,children:[(0,o.jsx)(a.Activity,{mode:c||f?`visible`:`hidden`,children:(0,o.jsxs)(n.n,{children:[(0,o.jsx)(r.o,{children:c}),!!f&&(0,o.jsx)(r.r,{children:f})]})}),(0,o.jsxs)(`div`,{className:`relative basis-3/5`,children:[(0,o.jsx)(r.n,{children:(0,o.jsx)(i.t,{...e,placeholder:l,className:`w-full`,rows:p,onValueChange:m})}),(0,o.jsxs)(t.t,{width:`full`,padding:`none`,justify:`end`,children:[d&&(0,o.jsxs)(`div`,{className:`text-muted-foreground text-end text-xs`,children:[h?.length??0,` characters`]}),u&&(0,o.jsx)(r.s,{})]})]})]})})};exports.TextareaField=c;
 //# sourceMappingURL=textarea-field.cjs.map