@customafk/lunas-ui 0.1.2 → 0.1.4

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

@@ -1 +1 @@
-{"version":3,"file":"number-field.cjs","names":["FormField","FormItem","Activity","FieldContent","FormLabel","FormDescription","FormControl","NumberInput","FormMessage"],"sources":["../../packages/components/forms/number-field.tsx"],"sourcesContent":["'use client';\nimport { Activity } from 'react';\nimport { type FieldPath, type FieldValues, useWatch } from 'react-hook-form';\n\nimport { FieldContent } from '../ui/field';\nimport { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../ui/form';\nimport { NumberInput } from '../ui/inputs/number-input';\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  name: FieldPath<TFieldValues>;\n  label?: string;\n  description?: string;\n  placeholder?: string;\n  unitText?: string;\n  isShowClearButton?: boolean;\n  isShowErrorMsg?: boolean;\n  isShowCount?: boolean;\n  isNested?: boolean;\n  onValueChange?: (value?: number) => void;\n};\nexport const NumberField = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  label = 'Number Field',\n  placeholder = '0',\n  isShowErrorMsg = false,\n  isShowCount = false,\n  isNested = false,\n  unitText = '',\n  description = '',\n  onValueChange,\n}: Props<TFieldValues>) => {\n  const valueWatch = useWatch({ name });\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                <NumberInput\n                  {...field}\n                  placeholder={placeholder}\n                  unitText={unitText}\n                  wrapperClassName=\"w-full\"\n                  onValueChange={value => {\n                    onChange(value);\n                    onValueChange?.(value);\n                  }}\n                />\n              </FormControl>\n              {isShowCount && <div className=\"text-muted-foreground text-end text-xs\">{valueWatch?.length ?? 0} characters</div>}\n              {isShowErrorMsg && <FormMessage />}\n            </div>\n          </FormItem>\n        )}\n      />\n    );\n  }\n\n  return (\n    <FormField\n      name={name}\n      render={({ field: { onChange, ...field } }) => (\n        <FormItem>\n          <Activity mode={label || description ? 'visible' : 'hidden'}>\n            <FieldContent>\n              <FormLabel>{label}</FormLabel>\n              {!!description && <FormDescription>{description}</FormDescription>}\n            </FieldContent>\n          </Activity>\n          <div className=\"relative basis-3/5 flex justify-end\">\n            <FormControl>\n              <NumberInput\n                {...field}\n                placeholder={placeholder}\n                unitText={unitText}\n                wrapperClassName=\"w-full md:max-w-60\"\n                onValueChange={value => {\n                  onChange(value);\n                  onValueChange?.(value);\n                }}\n              />\n            </FormControl>\n            {isShowCount && <div className=\"text-muted-foreground text-end text-xs\">{valueWatch?.length ?? 0} characters</div>}\n            {isShowErrorMsg && <FormMessage />}\n          </div>\n        </FormItem>\n      )}\n    />\n  );\n};\n"],"mappings":"2WAoBA,MAAa,GAA+D,CAC1E,OACA,QAAQ,eACR,cAAc,IACd,iBAAiB,GACjB,cAAc,GACd,WAAW,GACX,WAAW,GACX,cAAc,GACd,mBACyB,CACzB,IAAM,GAAA,EAAA,EAAA,UAAsB,CAAE,OAAM,CAAC,CAoCrC,OAlCI,GAEA,EAAA,EAAA,KAACA,EAAAA,EAAAA,CACO,OACN,QAAS,CAAE,MAAO,CAAE,WAAU,GAAG,OAC/B,EAAA,EAAA,MAACC,EAAAA,EAAAA,CAAS,YAAY,WAAW,UAAU,mBACzC,EAAA,EAAA,KAACC,EAAAA,SAAAA,CAAS,KAAM,GAAS,EAAc,UAAY,mBACjD,EAAA,EAAA,MAACC,EAAAA,EAAAA,CAAAA,SAAAA,EACC,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAU,UAAU,mBAAW,GAAkB,CACjD,CAAC,CAAC,IAAe,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAAA,SAAiB,EAAA,CAA8B,CAAA,CAAA,CACrD,EACN,EACX,EAAA,EAAA,MAAC,MAAA,CAAI,UAAU,gDACb,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAAA,UACC,EAAA,EAAA,KAACC,EAAAA,EAAAA,CACC,GAAI,EACS,cACH,WACV,iBAAiB,SACjB,cAAe,GAAS,CACtB,EAAS,EAAM,CACf,IAAgB,EAAM,GAExB,CAAA,CACU,CACb,IAAe,EAAA,EAAA,MAAC,MAAA,CAAI,UAAU,mDAA0C,GAAY,QAAU,EAAE,cAAA,EAAiB,CACjH,IAAkB,EAAA,EAAA,KAACC,EAAAA,EAAAA,EAAAA,CAAc,GAC9B,CAAA,EACG,EAEb,EAKJ,EAAA,EAAA,KAACR,EAAAA,EAAAA,CACO,OACN,QAAS,CAAE,MAAO,CAAE,WAAU,GAAG,OAC/B,EAAA,EAAA,MAACC,EAAAA,EAAAA,CAAAA,SAAAA,EACC,EAAA,EAAA,KAACC,EAAAA,SAAAA,CAAS,KAAM,GAAS,EAAc,UAAY,mBACjD,EAAA,EAAA,MAACC,EAAAA,EAAAA,CAAAA,SAAAA,EACC,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAAA,SAAW,EAAA,CAAkB,CAC7B,CAAC,CAAC,IAAe,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAAA,SAAiB,EAAA,CAA8B,CAAA,CAAA,CACrD,EACN,EACX,EAAA,EAAA,MAAC,MAAA,CAAI,UAAU,iDACb,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAAA,UACC,EAAA,EAAA,KAACC,EAAAA,EAAAA,CACC,GAAI,EACS,cACH,WACV,iBAAiB,qBACjB,cAAe,GAAS,CACtB,EAAS,EAAM,CACf,IAAgB,EAAM,GAExB,CAAA,CACU,CACb,IAAe,EAAA,EAAA,MAAC,MAAA,CAAI,UAAU,mDAA0C,GAAY,QAAU,EAAE,cAAA,EAAiB,CACjH,IAAkB,EAAA,EAAA,KAACC,EAAAA,EAAAA,EAAAA,CAAc,GAC9B,CAAA,CAAA,CACG,EAEb"}
+{"version":3,"file":"number-field.cjs","names":["FormField","FormItem","Activity","FieldContent","FormLabel","FormDescription","FormControl","NumberInput","FormMessage"],"sources":["../../packages/components/forms/number-field.tsx"],"sourcesContent":["'use client';\nimport { Activity } from 'react';\nimport { type FieldPath, type FieldValues, useWatch } from 'react-hook-form';\n\nimport { FieldContent } from '../ui/field';\nimport { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../ui/form';\nimport { NumberInput } from '../ui/inputs/number-input';\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  name: FieldPath<TFieldValues>;\n  label?: string;\n  description?: string;\n  placeholder?: string;\n  unitText?: string;\n  isShowClearButton?: boolean;\n  isShowErrorMsg?: boolean;\n  isShowCount?: boolean;\n  isNested?: boolean;\n  onValueChange?: (value?: number) => void;\n};\nexport const NumberField = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  label = 'Number Field',\n  placeholder = '0',\n  isShowErrorMsg = false,\n  isShowCount = false,\n  isNested = false,\n  unitText = '',\n  description = '',\n  onValueChange,\n}: Props<TFieldValues>) => {\n  const valueWatch = useWatch({ name });\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                <NumberInput\n                  {...field}\n                  placeholder={placeholder}\n                  unitText={unitText}\n                  wrapperClassName=\"w-full\"\n                  onValueChange={value => {\n                    onChange(value);\n                    onValueChange?.(value);\n                  }}\n                />\n              </FormControl>\n              {isShowCount && <div className=\"text-muted-foreground text-end text-xs\">{valueWatch?.length ?? 0} characters</div>}\n              {isShowErrorMsg && <FormMessage />}\n            </div>\n          </FormItem>\n        )}\n      />\n    );\n  }\n\n  return (\n    <FormField\n      name={name}\n      render={({ field: { onChange, ...field } }) => (\n        <FormItem>\n          <Activity mode={label || description ? 'visible' : 'hidden'}>\n            <FieldContent>\n              <FormLabel>{label}</FormLabel>\n              {!!description && <FormDescription>{description}</FormDescription>}\n            </FieldContent>\n          </Activity>\n          <div className=\"relative basis-3/5 flex justify-end\">\n            <FormControl>\n              <NumberInput\n                {...field}\n                placeholder={placeholder}\n                unitText={unitText}\n                wrapperClassName=\"w-full md:max-w-60\"\n                onValueChange={value => {\n                  onChange(value);\n                  onValueChange?.(value);\n                }}\n              />\n            </FormControl>\n            {isShowCount && <div className=\"text-muted-foreground text-end text-xs\">{valueWatch?.length ?? 0} characters</div>}\n            {isShowErrorMsg && <FormMessage />}\n          </div>\n        </FormItem>\n      )}\n    />\n  );\n};\n"],"mappings":"qWAoBA,MAAa,GAA+D,CAC1E,OACA,QAAQ,eACR,cAAc,IACd,iBAAiB,GACjB,cAAc,GACd,WAAW,GACX,WAAW,GACX,cAAc,GACd,mBACyB,CACzB,IAAM,GAAA,EAAA,EAAA,UAAsB,CAAE,OAAM,CAAC,CAoCrC,OAlCI,GAEA,EAAA,EAAA,KAACA,EAAAA,EAAAA,CACO,OACN,QAAS,CAAE,MAAO,CAAE,WAAU,GAAG,OAC/B,EAAA,EAAA,MAACC,EAAAA,EAAAA,CAAS,YAAY,WAAW,UAAU,mBACzC,EAAA,EAAA,KAACC,EAAAA,SAAAA,CAAS,KAAM,GAAS,EAAc,UAAY,mBACjD,EAAA,EAAA,MAACC,EAAAA,EAAAA,CAAAA,SAAAA,EACC,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAU,UAAU,mBAAW,GAAkB,CACjD,CAAC,CAAC,IAAe,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAAA,SAAiB,EAAA,CAA8B,CAAA,CAAA,CACrD,EACN,EACX,EAAA,EAAA,MAAC,MAAA,CAAI,UAAU,gDACb,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAAA,UACC,EAAA,EAAA,KAACC,EAAAA,EAAAA,CACC,GAAI,EACS,cACH,WACV,iBAAiB,SACjB,cAAe,GAAS,CACtB,EAAS,EAAM,CACf,IAAgB,EAAM,GAExB,CAAA,CACU,CACb,IAAe,EAAA,EAAA,MAAC,MAAA,CAAI,UAAU,mDAA0C,GAAY,QAAU,EAAE,cAAA,EAAiB,CACjH,IAAkB,EAAA,EAAA,KAACC,EAAAA,EAAAA,EAAAA,CAAc,GAC9B,CAAA,EACG,EAEb,EAKJ,EAAA,EAAA,KAACR,EAAAA,EAAAA,CACO,OACN,QAAS,CAAE,MAAO,CAAE,WAAU,GAAG,OAC/B,EAAA,EAAA,MAACC,EAAAA,EAAAA,CAAAA,SAAAA,EACC,EAAA,EAAA,KAACC,EAAAA,SAAAA,CAAS,KAAM,GAAS,EAAc,UAAY,mBACjD,EAAA,EAAA,MAACC,EAAAA,EAAAA,CAAAA,SAAAA,EACC,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAAA,SAAW,EAAA,CAAkB,CAC7B,CAAC,CAAC,IAAe,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAAA,SAAiB,EAAA,CAA8B,CAAA,CAAA,CACrD,EACN,EACX,EAAA,EAAA,MAAC,MAAA,CAAI,UAAU,iDACb,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAAA,UACC,EAAA,EAAA,KAACC,EAAAA,EAAAA,CACC,GAAI,EACS,cACH,WACV,iBAAiB,qBACjB,cAAe,GAAS,CACtB,EAAS,EAAM,CACf,IAAgB,EAAM,GAExB,CAAA,CACU,CACb,IAAe,EAAA,EAAA,MAAC,MAAA,CAAI,UAAU,mDAA0C,GAAY,QAAU,EAAE,cAAA,EAAiB,CACjH,IAAkB,EAAA,EAAA,KAACC,EAAAA,EAAAA,EAAAA,CAAc,GAC9B,CAAA,CAAA,CACG,EAEb"}

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

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

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

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

package/dist/forms/number-field.mjs

@@ -0,0 +1,2 @@
+"use client";import"../input-DhoSwu7d.mjs";import"../separator-D1hK3QAo.mjs";import"../label-C6OaewtP.mjs";import{n as e}from"../field-COna_98h.mjs";import{a as t,i as n,n as r,o as i,r as a,s as o}from"../form-Bob0j0XE.mjs";import{t as s}from"../number-input-BV5WVNyt.mjs";import{jsx as c,jsxs as l}from"react/jsx-runtime";import{Activity as u}from"react";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 _?c(n,{name:f,render:({field:{onChange:n,...d}})=>l(t,{orientation:`vertical`,className:`gap-1`,children:[c(u,{mode:p||y?`visible`:`hidden`,children:l(e,{children:[c(i,{className:`text-xs`,children:p}),!!y&&c(a,{children:y})]})}),l(`div`,{className:`flex flex-col w-full justify-start`,children:[c(r,{children:c(s,{...d,placeholder:m,unitText:v,wrapperClassName:`w-full`,onValueChange:e=>{n(e),b?.(e)}})}),g&&l(`div`,{className:`text-muted-foreground text-end text-xs`,children:[x?.length??0,` characters`]}),h&&c(o,{})]})]})}):c(n,{name:f,render:({field:{onChange:n,...d}})=>l(t,{children:[c(u,{mode:p||y?`visible`:`hidden`,children:l(e,{children:[c(i,{children:p}),!!y&&c(a,{children:y})]})}),l(`div`,{className:`relative basis-3/5 flex justify-end`,children:[c(r,{children:c(s,{...d,placeholder:m,unitText:v,wrapperClassName:`w-full md:max-w-60`,onValueChange:e=>{n(e),b?.(e)}})}),g&&l(`div`,{className:`text-muted-foreground text-end text-xs`,children:[x?.length??0,` characters`]}),h&&c(o,{})]})]})})};export{f as NumberField};
+//# sourceMappingURL=number-field.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"number-field.mjs","names":[],"sources":["../../packages/components/forms/number-field.tsx"],"sourcesContent":["'use client';\nimport { Activity } from 'react';\nimport { type FieldPath, type FieldValues, useWatch } from 'react-hook-form';\n\nimport { FieldContent } from '../ui/field';\nimport { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../ui/form';\nimport { NumberInput } from '../ui/inputs/number-input';\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  name: FieldPath<TFieldValues>;\n  label?: string;\n  description?: string;\n  placeholder?: string;\n  unitText?: string;\n  isShowClearButton?: boolean;\n  isShowErrorMsg?: boolean;\n  isShowCount?: boolean;\n  isNested?: boolean;\n  onValueChange?: (value?: number) => void;\n};\nexport const NumberField = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  label = 'Number Field',\n  placeholder = '0',\n  isShowErrorMsg = false,\n  isShowCount = false,\n  isNested = false,\n  unitText = '',\n  description = '',\n  onValueChange,\n}: Props<TFieldValues>) => {\n  const valueWatch = useWatch({ name });\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                <NumberInput\n                  {...field}\n                  placeholder={placeholder}\n                  unitText={unitText}\n                  wrapperClassName=\"w-full\"\n                  onValueChange={value => {\n                    onChange(value);\n                    onValueChange?.(value);\n                  }}\n                />\n              </FormControl>\n              {isShowCount && <div className=\"text-muted-foreground text-end text-xs\">{valueWatch?.length ?? 0} characters</div>}\n              {isShowErrorMsg && <FormMessage />}\n            </div>\n          </FormItem>\n        )}\n      />\n    );\n  }\n\n  return (\n    <FormField\n      name={name}\n      render={({ field: { onChange, ...field } }) => (\n        <FormItem>\n          <Activity mode={label || description ? 'visible' : 'hidden'}>\n            <FieldContent>\n              <FormLabel>{label}</FormLabel>\n              {!!description && <FormDescription>{description}</FormDescription>}\n            </FieldContent>\n          </Activity>\n          <div className=\"relative basis-3/5 flex justify-end\">\n            <FormControl>\n              <NumberInput\n                {...field}\n                placeholder={placeholder}\n                unitText={unitText}\n                wrapperClassName=\"w-full md:max-w-60\"\n                onValueChange={value => {\n                  onChange(value);\n                  onValueChange?.(value);\n                }}\n              />\n            </FormControl>\n            {isShowCount && <div className=\"text-muted-foreground text-end text-xs\">{valueWatch?.length ?? 0} characters</div>}\n            {isShowErrorMsg && <FormMessage />}\n          </div>\n        </FormItem>\n      )}\n    />\n  );\n};\n"],"mappings":"gZAoBA,MAAa,GAA+D,CAC1E,OACA,QAAQ,eACR,cAAc,IACd,iBAAiB,GACjB,cAAc,GACd,WAAW,GACX,WAAW,GACX,cAAc,GACd,mBACyB,CACzB,IAAM,EAAa,EAAS,CAAE,OAAM,CAAC,CAoCrC,OAlCI,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,CACC,GAAI,EACS,cACH,WACV,iBAAiB,SACjB,cAAe,GAAS,CACtB,EAAS,EAAM,CACf,IAAgB,EAAM,GAExB,CAAA,CACU,CACb,GAAe,EAAC,MAAA,CAAI,UAAU,mDAA0C,GAAY,QAAU,EAAE,cAAA,EAAiB,CACjH,GAAkB,EAAC,EAAA,EAAA,CAAc,GAC9B,CAAA,EACG,EAEb,CAKJ,EAAC,EAAA,CACO,OACN,QAAS,CAAE,MAAO,CAAE,WAAU,GAAG,MAC/B,EAAC,EAAA,CAAA,SAAA,CACC,EAAC,EAAA,CAAS,KAAM,GAAS,EAAc,UAAY,kBACjD,EAAC,EAAA,CAAA,SAAA,CACC,EAAC,EAAA,CAAA,SAAW,EAAA,CAAkB,CAC7B,CAAC,CAAC,GAAe,EAAC,EAAA,CAAA,SAAiB,EAAA,CAA8B,CAAA,CAAA,CACrD,EACN,CACX,EAAC,MAAA,CAAI,UAAU,gDACb,EAAC,EAAA,CAAA,SACC,EAAC,EAAA,CACC,GAAI,EACS,cACH,WACV,iBAAiB,qBACjB,cAAe,GAAS,CACtB,EAAS,EAAM,CACf,IAAgB,EAAM,GAExB,CAAA,CACU,CACb,GAAe,EAAC,MAAA,CAAI,UAAU,mDAA0C,GAAY,QAAU,EAAE,cAAA,EAAiB,CACjH,GAAkB,EAAC,EAAA,EAAA,CAAc,GAC9B,CAAA,CAAA,CACG,EAEb"}

package/dist/forms/password-field.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require(`../chunk-Bmb41Sf3.cjs`);require(`../label-D2Kl-Q_-.cjs`),require(`../separator-D3CGKwyf.cjs`);const t=require(`../field-Cjpwx_6d.cjs`),n=require(`../form-D1gfOYhk.cjs`),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;
+"use client";const e=require(`../chunk-Bmb41Sf3.cjs`),t=require(`../input-Df2YPt1V.cjs`);require(`../separator-CBup_ah1.cjs`),require(`../label-C6_Tplyy.cjs`);const n=require(`../field-D8lireRm.cjs`),r=require(`../form-DrtMcMJp.cjs`);let i=require(`@customafk/react-toolkit/utils`),a=require(`react/jsx-runtime`),o=require(`lucide-react`),s=require(`react`);const c=({className:e,...n})=>{let r=(0,s.useId)(),[c,l]=(0,s.useState)(!1),u=(0,s.useCallback)(()=>l(e=>!e),[]);return(0,a.jsxs)(`div`,{className:`relative`,children:[(0,a.jsx)(t.t,{...n,id:r,placeholder:`Password`,type:c?`text`:`password`,className:(0,i.cn)(`pe-9`,e)}),(0,a.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,a.jsx)(o.EyeOffIcon,{size:16,"aria-hidden":`true`}):(0,a.jsx)(o.EyeIcon,{size:16,"aria-hidden":`true`})})]})},l=({name:e,label:t=`Text Field`,placeholder:i=`Enter text here`,isShowErrorMsg:o=!1,description:l,onValueChange:u})=>(0,a.jsx)(r.i,{name:e,render:({field:e})=>(0,a.jsxs)(r.a,{className:`w-full`,children:[(0,a.jsx)(s.Activity,{mode:t||l?`visible`:`hidden`,children:(0,a.jsxs)(n.n,{children:[(0,a.jsx)(r.o,{children:t}),!!l&&(0,a.jsx)(r.r,{children:l})]})}),(0,a.jsx)(r.n,{children:(0,a.jsx)(c,{placeholder:i,...e,onValueChange:u})}),o&&(0,a.jsx)(r.s,{})]})});exports.PasswordField=l;
 //# sourceMappingURL=password-field.cjs.map

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

@@ -0,0 +1,23 @@
+import * as react_jsx_runtime7 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_runtime7.JSX.Element;
+//#endregion
+export { PasswordField };
+//# sourceMappingURL=password-field.d.cts.map

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

@@ -0,0 +1,23 @@
+import * as react_jsx_runtime33 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_runtime33.JSX.Element;
+//#endregion
+export { PasswordField };
+//# sourceMappingURL=password-field.d.mts.map

package/dist/forms/password-field.mjs

@@ -0,0 +1,2 @@
+"use client";import{t as e}from"../input-DhoSwu7d.mjs";import"../separator-D1hK3QAo.mjs";import"../label-C6OaewtP.mjs";import{n as t}from"../field-COna_98h.mjs";import{a as n,i as r,n as i,o as a,r as o,s}from"../form-Bob0j0XE.mjs";import{cn as c}from"@customafk/react-toolkit/utils";import{jsx as l,jsxs as u}from"react/jsx-runtime";import{EyeIcon as d,EyeOffIcon as f}from"lucide-react";import{Activity as p,useCallback as m,useId as h,useState as g}from"react";const _=({className:t,...n})=>{let r=h(),[i,a]=g(!1),o=m(()=>a(e=>!e),[]);return u(`div`,{className:`relative`,children:[l(e,{...n,id:r,placeholder:`Password`,type:i?`text`:`password`,className:c(`pe-9`,t)}),l(`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:o,"aria-label":i?`Hide password`:`Show password`,"aria-pressed":i,"aria-controls":`password`,children:l(i?f:d,{size:16,"aria-hidden":`true`})})]})},v=({name:e,label:c=`Text Field`,placeholder:d=`Enter text here`,isShowErrorMsg:f=!1,description:m,onValueChange:h})=>l(r,{name:e,render:({field:e})=>u(n,{className:`w-full`,children:[l(p,{mode:c||m?`visible`:`hidden`,children:u(t,{children:[l(a,{children:c}),!!m&&l(o,{children:m})]})}),l(i,{children:l(_,{placeholder:d,...e,onValueChange:h})}),f&&l(s,{})]})});export{v as PasswordField};
+//# sourceMappingURL=password-field.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"password-field.mjs","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.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require(`../chunk-Bmb41Sf3.cjs`);require(`../label-D2Kl-Q_-.cjs`),require(`../separator-D3CGKwyf.cjs`);const t=require(`../field-Cjpwx_6d.cjs`),n=require(`../form-D1gfOYhk.cjs`),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;
+"use client";const e=require(`../chunk-Bmb41Sf3.cjs`);require(`../separator-CBup_ah1.cjs`),require(`../label-C6_Tplyy.cjs`);const t=require(`../field-D8lireRm.cjs`),n=require(`../form-DrtMcMJp.cjs`),r=require(`../select-QlGdSogC.cjs`);let i=require(`react/jsx-runtime`),a=require(`react`);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,i.jsx)(n.i,{name:e,render:({field:e})=>(0,i.jsxs)(n.a,{className:p,children:[(0,i.jsx)(a.Activity,{mode:o||f?`visible`:`hidden`,children:(0,i.jsxs)(t.n,{children:[u&&(0,i.jsx)(n.o,{children:o}),!!f&&(0,i.jsx)(n.r,{children:f})]})}),(0,i.jsxs)(`div`,{className:`flex basis-3/5 justify-end`,children:[(0,i.jsxs)(r.t,{defaultValue:e.value,onValueChange:e.onChange,children:[(0,i.jsx)(n.n,{children:(0,i.jsx)(r.l,{className:`w-full md:max-w-80`,children:(0,i.jsx)(r.u,{placeholder:s})})}),(0,i.jsx)(r.n,{children:l.map(e=>(0,i.jsx)(r.i,{disabled:c.includes(e.value),value:e.value,children:e.label},e.value))})]}),d&&(0,i.jsx)(n.s,{})]})]})});exports.SelectField=o;
 //# sourceMappingURL=select-field.cjs.map

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

@@ -0,0 +1,33 @@
+import * as react_jsx_runtime9 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_runtime9.JSX.Element;
+//#endregion
+export { SelectField };
+//# sourceMappingURL=select-field.d.cts.map

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

@@ -0,0 +1,33 @@
+import * as react_jsx_runtime35 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_runtime35.JSX.Element;
+//#endregion
+export { SelectField };
+//# sourceMappingURL=select-field.d.mts.map

package/dist/forms/select-field.mjs

@@ -0,0 +1,2 @@
+"use client";import"../separator-D1hK3QAo.mjs";import"../label-C6OaewtP.mjs";import{n as e}from"../field-COna_98h.mjs";import{a as t,i as n,n as r,o as i,r as a,s as o}from"../form-Bob0j0XE.mjs";import{i as s,l as c,n as l,t as u,u as d}from"../select-CMLtCfqa.mjs";import{jsx as f,jsxs as p}from"react/jsx-runtime";import{Activity as m}from"react";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=``})=>f(n,{name:h,render:({field:n})=>p(t,{className:C,children:[f(m,{mode:g||S?`visible`:`hidden`,children:p(e,{children:[b&&f(i,{children:g}),!!S&&f(a,{children:S})]})}),p(`div`,{className:`flex basis-3/5 justify-end`,children:[p(u,{defaultValue:n.value,onValueChange:n.onChange,children:[f(r,{children:f(c,{className:`w-full md:max-w-80`,children:f(d,{placeholder:_})})}),f(l,{children:y.map(e=>f(s,{disabled:v.includes(e.value),value:e.value,children:e.label},e.value))})]}),x&&f(o,{})]})]})});export{h as SelectField};
+//# sourceMappingURL=select-field.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select-field.mjs","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":"6VAoBA,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.cjs

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

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

@@ -0,0 +1,21 @@
+import * as react_jsx_runtime37 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_runtime37.JSX.Element;
+//#endregion
+export { SwitchField };
+//# sourceMappingURL=switch-field.d.cts.map

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

@@ -0,0 +1,21 @@
+import * as react_jsx_runtime32 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_runtime32.JSX.Element;
+//#endregion
+export { SwitchField };
+//# sourceMappingURL=switch-field.d.mts.map

package/dist/forms/switch-field.mjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"switch-field.mjs","names":[],"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":"iUAeA,MAAa,GAA+D,CAC1E,OACA,QAAQ,eACR,YAAY,GACZ,cACA,iBAAiB,MAGf,EAAC,EAAA,CACO,OACN,QAAS,CAAE,WACT,EAAC,EAAA,CAAoB,sBACnB,EAAC,EAAA,CAAA,SACC,EAAC,EAAA,CAAS,KAAM,GAAS,EAAc,UAAY,mBACjD,EAAC,EAAA,CAAA,SAAW,EAAA,CAAkB,CAC7B,GAAe,EAAC,EAAA,CAAgB,UAAU,mBAAW,GAA8B,CAAA,EAC3E,CAAA,CACE,CACf,EAAC,MAAA,CAAI,UAAU,sBACb,EAAC,EAAA,CAAA,SACC,EAAC,EAAA,CAAO,QAAS,EAAM,MAAO,UAAU,OAAO,gBAAiB,EAAM,UAAY,CAAA,CACtE,CACb,GAAkB,EAAC,EAAA,EAAA,CAAc,CAAA,EAC9B,CAAA,EACG,EAEb"}

package/dist/forms/text-field.cjs

@@ -1,2 +1,2 @@
-"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;
+"use client";const e=require(`../chunk-Bmb41Sf3.cjs`),t=require(`../flex-BYj-xYaw.cjs`),n=require(`../input-Df2YPt1V.cjs`);require(`../separator-CBup_ah1.cjs`),require(`../label-C6_Tplyy.cjs`);const r=require(`../field-D8lireRm.cjs`),i=require(`../form-DrtMcMJp.cjs`);let a=require(`@customafk/react-toolkit/utils`),o=require(`react/jsx-runtime`),s=require(`lucide-react`),c=require(`react`),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,c.memo)(({name:e,isShowClearButton:n,isShowCount:r,isShowErrorMsg:a,onClear:l})=>{let f=(0,u.useWatch)({name:e}),p=(0,c.useCallback)(()=>{l(e)},[l,e]);return(0,o.jsxs)(o.Fragment,{children:[n&&f&&(0,o.jsx)(`button`,{type:`button`,className:d(),"aria-label":`Clear input`,onClick:p,children:(0,o.jsx)(s.XIcon,{size:14,"aria-hidden":`true`})}),(0,o.jsxs)(t.t,{width:`full`,padding:`none`,justify:`end`,children:[a&&(0,o.jsx)(i.s,{className:`grow`}),r&&(0,o.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:s=`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,o.jsx)(i.i,{name:e,render:({field:{onChange:l,...u}})=>(0,o.jsxs)(i.a,{orientation:`vertical`,className:`gap-1`,children:[(0,o.jsx)(c.Activity,{mode:t||g?`visible`:`hidden`,children:(0,o.jsxs)(r.n,{children:[(0,o.jsx)(i.o,{className:`text-xs`,children:t}),!!g&&(0,o.jsx)(i.r,{children:g})]})}),(0,o.jsxs)(`div`,{className:`flex w-full flex-col justify-start`,children:[(0,o.jsx)(i.n,{children:(0,o.jsx)(n.t,{...u,placeholder:s,className:(0,a.cn)(`w-full`,p&&`pr-9`),onValueChange:v})}),(0,o.jsx)(f,{name:e,isShowClearButton:p,isShowCount:h,isShowErrorMsg:m,onClear:y})]})]})}):(0,o.jsx)(i.i,{name:e,render:({field:l})=>(0,o.jsxs)(i.a,{className:_,children:[(0,o.jsx)(r.n,{children:(0,o.jsxs)(c.Activity,{mode:t||g?`visible`:`hidden`,children:[d&&(0,o.jsx)(i.o,{children:t}),!!g&&(0,o.jsx)(i.r,{children:g})]})}),(0,o.jsxs)(`div`,{className:`relative basis-3/5`,children:[(0,o.jsx)(i.n,{children:(0,o.jsx)(n.t,{ref:l.ref,value:l.value,disabled:l.disabled,onChange:l.onChange,onBlur:l.onBlur,placeholder:s,className:(0,a.cn)(`w-full`,p&&`pr-9`),onValueChange:v})}),(0,o.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.d.cts

@@ -0,0 +1,33 @@
+import * as react_jsx_runtime38 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_runtime38.JSX.Element;
+//#endregion
+export { TextField };
+//# sourceMappingURL=text-field.d.cts.map

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

@@ -0,0 +1,33 @@
+import * as react_jsx_runtime34 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_runtime34.JSX.Element;
+//#endregion
+export { TextField };
+//# sourceMappingURL=text-field.d.mts.map

package/dist/forms/text-field.mjs

@@ -0,0 +1,2 @@
+"use client";import{t as e}from"../flex-DVvvRStw.mjs";import{t}from"../input-DhoSwu7d.mjs";import"../separator-D1hK3QAo.mjs";import"../label-C6OaewtP.mjs";import{n}from"../field-COna_98h.mjs";import{a as r,i,n as a,o,r as s,s as c}from"../form-Bob0j0XE.mjs";import{cn as l}from"@customafk/react-toolkit/utils";import{Fragment as u,jsx as d,jsxs as f}from"react/jsx-runtime";import{XIcon as p}from"lucide-react";import{Activity as m,memo as h,useCallback as g}from"react";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=h(({name:t,isShowClearButton:n,isShowCount:r,isShowErrorMsg:i,onClear:a})=>{let o=y({name:t}),s=g(()=>{a(t)},[a,t]);return f(u,{children:[n&&o&&d(`button`,{type:`button`,className:b(),"aria-label":`Clear input`,onClick:s,children:d(p,{size:14,"aria-hidden":`true`})}),f(e,{width:`full`,padding:`none`,justify:`end`,children:[i&&d(c,{className:`grow`}),r&&f(`div`,{className:`text-end text-text-positive-weak text-xs`,children:[o?.length??0,` characters`]})]})]})});x.displayName=`CountCharacters`;const S=({name:e,label:c=`Text Field`,placeholder:u=`Enter text here`,isNested:p=!1,isShowLabel:h=!0,isShowClearButton:g=!1,isShowErrorMsg:_=!1,isShowCount:y=!1,description:b,className:S=``,onValueChange:C})=>{let{resetField:w}=v();return p?d(i,{name:e,render:({field:{onChange:i,...p}})=>f(r,{orientation:`vertical`,className:`gap-1`,children:[d(m,{mode:c||b?`visible`:`hidden`,children:f(n,{children:[d(o,{className:`text-xs`,children:c}),!!b&&d(s,{children:b})]})}),f(`div`,{className:`flex w-full flex-col justify-start`,children:[d(a,{children:d(t,{...p,placeholder:u,className:l(`w-full`,g&&`pr-9`),onValueChange:C})}),d(x,{name:e,isShowClearButton:g,isShowCount:y,isShowErrorMsg:_,onClear:w})]})]})}):d(i,{name:e,render:({field:i})=>f(r,{className:S,children:[d(n,{children:f(m,{mode:c||b?`visible`:`hidden`,children:[h&&d(o,{children:c}),!!b&&d(s,{children:b})]})}),f(`div`,{className:`relative basis-3/5`,children:[d(a,{children:d(t,{ref:i.ref,value:i.value,disabled:i.disabled,onChange:i.onChange,onBlur:i.onBlur,placeholder:u,className:l(`w-full`,g&&`pr-9`),onValueChange:C})}),d(x,{name:e,isShowClearButton:g,isShowCount:y,isShowErrorMsg:_,onClear:w})]})]})})};export{S as TextField};
+//# sourceMappingURL=text-field.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"text-field.mjs","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":"qkBAeA,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.cjs

@@ -1,2 +1,2 @@
-"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;
+"use client";const e=require(`../chunk-Bmb41Sf3.cjs`),t=require(`../flex-BYj-xYaw.cjs`);require(`../separator-CBup_ah1.cjs`),require(`../label-C6_Tplyy.cjs`);const n=require(`../field-D8lireRm.cjs`),r=require(`../form-DrtMcMJp.cjs`),i=require(`../textarea-CQOdZGq1.cjs`);let a=require(`react/jsx-runtime`),o=require(`react`),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,a.jsx)(r.i,{name:e,render:({field:e})=>(0,a.jsxs)(r.a,{className:`w-full`,children:[(0,a.jsx)(o.Activity,{mode:c||f?`visible`:`hidden`,children:(0,a.jsxs)(n.n,{children:[(0,a.jsx)(r.o,{children:c}),!!f&&(0,a.jsx)(r.r,{children:f})]})}),(0,a.jsxs)(`div`,{className:`relative basis-3/5`,children:[(0,a.jsx)(r.n,{children:(0,a.jsx)(i.t,{...e,placeholder:l,className:`w-full`,rows:p,onValueChange:m})}),(0,a.jsxs)(t.t,{width:`full`,padding:`none`,justify:`end`,children:[d&&(0,a.jsxs)(`div`,{className:`text-muted-foreground text-end text-xs`,children:[h?.length??0,` characters`]}),u&&(0,a.jsx)(r.s,{})]})]})]})})};exports.TextareaField=c;
 //# sourceMappingURL=textarea-field.cjs.map

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

@@ -0,0 +1,27 @@
+import * as react_jsx_runtime36 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_runtime36.JSX.Element;
+//#endregion
+export { TextareaField };
+//# sourceMappingURL=textarea-field.d.cts.map

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

@@ -0,0 +1,27 @@
+import * as react_jsx_runtime37 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_runtime37.JSX.Element;
+//#endregion
+export { TextareaField };
+//# sourceMappingURL=textarea-field.d.mts.map

package/dist/forms/textarea-field.mjs

@@ -0,0 +1,2 @@
+"use client";import{t as e}from"../flex-DVvvRStw.mjs";import"../separator-D1hK3QAo.mjs";import"../label-C6OaewtP.mjs";import{n as t}from"../field-COna_98h.mjs";import{a as n,i as r,n as i,o as a,r as o,s}from"../form-Bob0j0XE.mjs";import{t as c}from"../textarea-DJA6gndE.mjs";import{jsx as l,jsxs as u}from"react/jsx-runtime";import{Activity as d}from"react";import{useWatch as f}from"react-hook-form";const p=({name:p,label:m=`Textarea Field`,placeholder:h=`Enter text here`,isShowErrorMsg:g=!1,isShowCount:_=!1,description:v,rows:y=3,onValueChange:b})=>{let x=f({name:p});return l(r,{name:p,render:({field:r})=>u(n,{className:`w-full`,children:[l(d,{mode:m||v?`visible`:`hidden`,children:u(t,{children:[l(a,{children:m}),!!v&&l(o,{children:v})]})}),u(`div`,{className:`relative basis-3/5`,children:[l(i,{children:l(c,{...r,placeholder:h,className:`w-full`,rows:y,onValueChange:b})}),u(e,{width:`full`,padding:`none`,justify:`end`,children:[_&&u(`div`,{className:`text-muted-foreground text-end text-xs`,children:[x?.length??0,` characters`]}),g&&l(s,{})]})]})]})})};export{p as TextareaField};
+//# sourceMappingURL=textarea-field.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"textarea-field.mjs","names":[],"sources":["../../packages/components/forms/textarea-field.tsx"],"sourcesContent":["'use client';\nimport { Activity } from 'react';\nimport { type FieldPath, type FieldValues, useWatch } from 'react-hook-form';\n\nimport { Flex } from '../layouts/flex';\nimport { FieldContent } from '../ui/field';\nimport { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../ui/form';\nimport { Textarea } from '../ui/textarea';\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  name: FieldPath<TFieldValues>;\n  label?: string;\n  description?: string;\n  placeholder?: string;\n  isShowErrorMsg?: boolean;\n  isShowCount?: boolean;\n  rows?: number;\n  onValueChange?: (value: string) => void;\n};\nexport const TextareaField = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  label = 'Textarea Field',\n  placeholder = 'Enter text here',\n  isShowErrorMsg = false,\n  isShowCount = false,\n  description,\n  rows = 3,\n  onValueChange,\n}: Props<TFieldValues>) => {\n  const valueWatch = useWatch({ name });\n\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          <div className=\"relative basis-3/5\">\n            <FormControl>\n              <Textarea {...field} placeholder={placeholder} className=\"w-full\" rows={rows} onValueChange={onValueChange} />\n            </FormControl>\n            <Flex width=\"full\" padding=\"none\" justify=\"end\">\n              {isShowCount && <div className=\"text-muted-foreground text-end text-xs\">{valueWatch?.length ?? 0} characters</div>}\n              {isShowErrorMsg && <FormMessage />}\n            </Flex>\n          </div>\n        </FormItem>\n      )}\n    />\n  );\n};\n"],"mappings":"kZAmBA,MAAa,GAAiE,CAC5E,OACA,QAAQ,iBACR,cAAc,kBACd,iBAAiB,GACjB,cAAc,GACd,cACA,OAAO,EACP,mBACyB,CACzB,IAAM,EAAa,EAAS,CAAE,OAAM,CAAC,CAErC,OACE,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,MAAA,CAAI,UAAU,+BACb,EAAC,EAAA,CAAA,SACC,EAAC,EAAA,CAAS,GAAI,EAAoB,cAAa,UAAU,SAAe,OAAqB,iBAAiB,CAAA,CAClG,CACd,EAAC,EAAA,CAAK,MAAM,OAAO,QAAQ,OAAO,QAAQ,gBACvC,GAAe,EAAC,MAAA,CAAI,UAAU,mDAA0C,GAAY,QAAU,EAAE,cAAA,EAAiB,CACjH,GAAkB,EAAC,EAAA,EAAA,CAAc,CAAA,EAC7B,CAAA,EACH,CAAA,EACG,EAEb"}

package/dist/image-AyuSA-3V.mjs

@@ -0,0 +1,2 @@
+import{t as e}from"./skeleton-BDmuk30q.mjs";import{cn as t}from"@customafk/react-toolkit/utils";import{jsx as n,jsxs as r}from"react/jsx-runtime";import{AlertCircleIcon as i}from"lucide-react";import{useCallback as a,useRef as o,useState as s}from"react";const c=({src:c,alt:l,width:u,height:d,maxRetries:f=3,retryDelay:p=500,className:m,imageClassName:h,onClick:g})=>{let _=o(null),[v,y]=s(c),[b,x]=s(0),[S,C]=s(!1),[w,T]=s(!1),E=a(()=>{C(!0)},[]),D=a(()=>{if(b<f){T(!1);let e=b+1;x(e),setTimeout(()=>{y(c+`?retry=${Date.now()}&attempt=${e}`)},p*e);return}T(!0),C(!0),y(c)},[f,b,p,c]);return w?n(`div`,{style:{width:u,height:d},className:t(`@container relative inline-block`,m),children:r(`div`,{className:`bg-danger-muted shadow-card flex size-full flex-col items-center justify-center gap-y-2 rounded-md`,children:[n(i,{className:`text-danger size-8 @max-[52px]:size-6`}),n(`span`,{className:`text-danger-weak text-center text-xs @max-[96px]:sr-only`,children:`Image failed to load`})]})}):r(`div`,{style:{width:u,height:d},className:t(`relative flex items-center justify-center overflow-hidden rounded-md`,m),onClick:g,children:[!S&&n(e,{className:`absolute inset-0 flex size-full animate-pulse items-center justify-center`}),n(`img`,{src:v,className:`absolute inset-0 z-0 size-full scale-110 object-cover blur-xl brightness-60`}),n(`img`,{id:v,ref:_,src:v,alt:l,loading:`lazy`,className:t(`shadow-card relative h-[120%] w-auto object-cover transition-opacity duration-300`,S&&`opacity-100`,!S&&`pointer-events-none opacity-0`,h),onLoad:E,onError:D})]})};export{c as t};
+//# sourceMappingURL=image-AyuSA-3V.mjs.map

package/dist/image-AyuSA-3V.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-AyuSA-3V.mjs","names":["Image: React.FC<Props>"],"sources":["../packages/components/ui/image.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\n\nimport { AlertCircleIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Skeleton } from './skeleton';\n\ntype Props = {\n  src?: string;\n  alt?: string;\n  width?: number | string;\n  height?: number | string;\n  maxRetries?: number;\n  retryDelay?: number;\n  className?: string;\n  imageClassName?: string;\n  onClick?: () => void;\n};\nexport const Image: React.FC<Props> = ({ src, alt, width, height, maxRetries = 3, retryDelay = 500, className, imageClassName, onClick }) => {\n  const imageRef = useRef<HTMLImageElement>(null);\n  const [currentSrc, setCurrentSrc] = useState<string | undefined>(src);\n  const [retryCount, setRetryCount] = useState<number>(0);\n  const [isLoaded, setIsLoaded] = useState<boolean>(false);\n  const [hasError, setHasError] = useState<boolean>(false);\n\n  const handleLoad = useCallback(() => {\n    setIsLoaded(true);\n  }, []);\n\n  const handleError = useCallback(() => {\n    if (retryCount < maxRetries) {\n      // imageRef.current?.style.setProperty('display', 'none')\n      setHasError(false);\n      const newRetryCount = retryCount + 1;\n      setRetryCount(newRetryCount);\n\n      // Retry with exponential backoff and cache busting\n      setTimeout(() => {\n        const cacheBuster = `?retry=${Date.now()}&attempt=${newRetryCount}`;\n        setCurrentSrc(src + cacheBuster);\n      }, retryDelay * newRetryCount);\n      return;\n    }\n\n    setHasError(true);\n    setIsLoaded(true);\n    setCurrentSrc(src);\n  }, [maxRetries, retryCount, retryDelay, src]);\n\n  if (hasError) {\n    return (\n      <div style={{ width, height }} className={cn('@container relative inline-block', className)}>\n        <div className=\"bg-danger-muted shadow-card flex size-full flex-col items-center justify-center gap-y-2 rounded-md\">\n          <AlertCircleIcon className=\"text-danger size-8 @max-[52px]:size-6\" />\n          <span className=\"text-danger-weak text-center text-xs @max-[96px]:sr-only\">Image failed to load</span>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div style={{ width, height }} className={cn('relative flex items-center justify-center overflow-hidden rounded-md', className)} onClick={onClick}>\n      {!isLoaded && <Skeleton className=\"absolute inset-0 flex size-full animate-pulse items-center justify-center\" />}\n      <img src={currentSrc} className=\"absolute inset-0 z-0 size-full scale-110 object-cover blur-xl brightness-60\" />\n      <img\n        id={currentSrc}\n        ref={imageRef}\n        src={currentSrc}\n        alt={alt}\n        loading=\"lazy\"\n        className={cn(\n          'shadow-card relative h-[120%] w-auto object-cover transition-opacity duration-300',\n          isLoaded && 'opacity-100',\n          !isLoaded && 'pointer-events-none opacity-0',\n          imageClassName\n        )}\n        onLoad={handleLoad}\n        onError={handleError}\n      />\n    </div>\n  );\n};\n"],"mappings":"+PAmBA,MAAaA,GAA0B,CAAE,MAAK,MAAK,QAAO,SAAQ,aAAa,EAAG,aAAa,IAAK,YAAW,iBAAgB,aAAc,CAC3I,IAAM,EAAW,EAAyB,KAAK,CACzC,CAAC,EAAY,GAAiB,EAA6B,EAAI,CAC/D,CAAC,EAAY,GAAiB,EAAiB,EAAE,CACjD,CAAC,EAAU,GAAe,EAAkB,GAAM,CAClD,CAAC,EAAU,GAAe,EAAkB,GAAM,CAElD,EAAa,MAAkB,CACnC,EAAY,GAAK,EAChB,EAAE,CAAC,CAEA,EAAc,MAAkB,CACpC,GAAI,EAAa,EAAY,CAE3B,EAAY,GAAM,CAClB,IAAM,EAAgB,EAAa,EACnC,EAAc,EAAc,CAG5B,eAAiB,CAEf,EAAc,EADM,UAAU,KAAK,KAAK,CAAC,WAAW,IACpB,EAC/B,EAAa,EAAc,CAC9B,OAGF,EAAY,GAAK,CACjB,EAAY,GAAK,CACjB,EAAc,EAAI,EACjB,CAAC,EAAY,EAAY,EAAY,EAAI,CAAC,CAa7C,OAXI,EAEA,EAAC,MAAA,CAAI,MAAO,CAAE,QAAO,SAAQ,CAAE,UAAW,EAAG,mCAAoC,EAAU,UACzF,EAAC,MAAA,CAAI,UAAU,+GACb,EAAC,EAAA,CAAgB,UAAU,wCAAA,CAA0C,CACrE,EAAC,OAAA,CAAK,UAAU,oEAA2D,wBAA2B,CAAA,EAClG,EACF,CAKR,EAAC,MAAA,CAAI,MAAO,CAAE,QAAO,SAAQ,CAAE,UAAW,EAAG,uEAAwE,EAAU,CAAW,oBACvI,CAAC,GAAY,EAAC,EAAA,CAAS,UAAU,4EAAA,CAA8E,CAChH,EAAC,MAAA,CAAI,IAAK,EAAY,UAAU,+EAAgF,CAChH,EAAC,MAAA,CACC,GAAI,EACJ,IAAK,EACL,IAAK,EACA,MACL,QAAQ,OACR,UAAW,EACT,oFACA,GAAY,cACZ,CAAC,GAAY,gCACb,EACD,CACD,OAAQ,EACR,QAAS,GACT,GACE"}

package/dist/image-C-XEJWcw.cjs

@@ -0,0 +1,2 @@
+const e=require(`./chunk-Bmb41Sf3.cjs`),t=require(`./skeleton-C4suljHP.cjs`);let n=require(`@customafk/react-toolkit/utils`),r=require(`react/jsx-runtime`),i=require(`lucide-react`),a=require(`react`);const o=({src:e,alt:o,width:s,height:c,maxRetries:l=3,retryDelay:u=500,className:d,imageClassName:f,onClick:p})=>{let m=(0,a.useRef)(null),[h,g]=(0,a.useState)(e),[_,v]=(0,a.useState)(0),[y,b]=(0,a.useState)(!1),[x,S]=(0,a.useState)(!1),C=(0,a.useCallback)(()=>{b(!0)},[]),w=(0,a.useCallback)(()=>{if(_<l){S(!1);let t=_+1;v(t),setTimeout(()=>{g(e+`?retry=${Date.now()}&attempt=${t}`)},u*t);return}S(!0),b(!0),g(e)},[l,_,u,e]);return x?(0,r.jsx)(`div`,{style:{width:s,height:c},className:(0,n.cn)(`@container relative inline-block`,d),children:(0,r.jsxs)(`div`,{className:`bg-danger-muted shadow-card flex size-full flex-col items-center justify-center gap-y-2 rounded-md`,children:[(0,r.jsx)(i.AlertCircleIcon,{className:`text-danger size-8 @max-[52px]:size-6`}),(0,r.jsx)(`span`,{className:`text-danger-weak text-center text-xs @max-[96px]:sr-only`,children:`Image failed to load`})]})}):(0,r.jsxs)(`div`,{style:{width:s,height:c},className:(0,n.cn)(`relative flex items-center justify-center overflow-hidden rounded-md`,d),onClick:p,children:[!y&&(0,r.jsx)(t.t,{className:`absolute inset-0 flex size-full animate-pulse items-center justify-center`}),(0,r.jsx)(`img`,{src:h,className:`absolute inset-0 z-0 size-full scale-110 object-cover blur-xl brightness-60`}),(0,r.jsx)(`img`,{id:h,ref:m,src:h,alt:o,loading:`lazy`,className:(0,n.cn)(`shadow-card relative h-[120%] w-auto object-cover transition-opacity duration-300`,y&&`opacity-100`,!y&&`pointer-events-none opacity-0`,f),onLoad:C,onError:w})]})};Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return o}});
+//# sourceMappingURL=image-C-XEJWcw.cjs.map

package/dist/image-C-XEJWcw.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-C-XEJWcw.cjs","names":["Image: React.FC<Props>","AlertCircleIcon","Skeleton"],"sources":["../packages/components/ui/image.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\n\nimport { AlertCircleIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Skeleton } from './skeleton';\n\ntype Props = {\n  src?: string;\n  alt?: string;\n  width?: number | string;\n  height?: number | string;\n  maxRetries?: number;\n  retryDelay?: number;\n  className?: string;\n  imageClassName?: string;\n  onClick?: () => void;\n};\nexport const Image: React.FC<Props> = ({ src, alt, width, height, maxRetries = 3, retryDelay = 500, className, imageClassName, onClick }) => {\n  const imageRef = useRef<HTMLImageElement>(null);\n  const [currentSrc, setCurrentSrc] = useState<string | undefined>(src);\n  const [retryCount, setRetryCount] = useState<number>(0);\n  const [isLoaded, setIsLoaded] = useState<boolean>(false);\n  const [hasError, setHasError] = useState<boolean>(false);\n\n  const handleLoad = useCallback(() => {\n    setIsLoaded(true);\n  }, []);\n\n  const handleError = useCallback(() => {\n    if (retryCount < maxRetries) {\n      // imageRef.current?.style.setProperty('display', 'none')\n      setHasError(false);\n      const newRetryCount = retryCount + 1;\n      setRetryCount(newRetryCount);\n\n      // Retry with exponential backoff and cache busting\n      setTimeout(() => {\n        const cacheBuster = `?retry=${Date.now()}&attempt=${newRetryCount}`;\n        setCurrentSrc(src + cacheBuster);\n      }, retryDelay * newRetryCount);\n      return;\n    }\n\n    setHasError(true);\n    setIsLoaded(true);\n    setCurrentSrc(src);\n  }, [maxRetries, retryCount, retryDelay, src]);\n\n  if (hasError) {\n    return (\n      <div style={{ width, height }} className={cn('@container relative inline-block', className)}>\n        <div className=\"bg-danger-muted shadow-card flex size-full flex-col items-center justify-center gap-y-2 rounded-md\">\n          <AlertCircleIcon className=\"text-danger size-8 @max-[52px]:size-6\" />\n          <span className=\"text-danger-weak text-center text-xs @max-[96px]:sr-only\">Image failed to load</span>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div style={{ width, height }} className={cn('relative flex items-center justify-center overflow-hidden rounded-md', className)} onClick={onClick}>\n      {!isLoaded && <Skeleton className=\"absolute inset-0 flex size-full animate-pulse items-center justify-center\" />}\n      <img src={currentSrc} className=\"absolute inset-0 z-0 size-full scale-110 object-cover blur-xl brightness-60\" />\n      <img\n        id={currentSrc}\n        ref={imageRef}\n        src={currentSrc}\n        alt={alt}\n        loading=\"lazy\"\n        className={cn(\n          'shadow-card relative h-[120%] w-auto object-cover transition-opacity duration-300',\n          isLoaded && 'opacity-100',\n          !isLoaded && 'pointer-events-none opacity-0',\n          imageClassName\n        )}\n        onLoad={handleLoad}\n        onError={handleError}\n      />\n    </div>\n  );\n};\n"],"mappings":"yMAmBA,MAAaA,GAA0B,CAAE,MAAK,MAAK,QAAO,SAAQ,aAAa,EAAG,aAAa,IAAK,YAAW,iBAAgB,aAAc,CAC3I,IAAM,GAAA,EAAA,EAAA,QAAoC,KAAK,CACzC,CAAC,EAAY,IAAA,EAAA,EAAA,UAA8C,EAAI,CAC/D,CAAC,EAAY,IAAA,EAAA,EAAA,UAAkC,EAAE,CACjD,CAAC,EAAU,IAAA,EAAA,EAAA,UAAiC,GAAM,CAClD,CAAC,EAAU,IAAA,EAAA,EAAA,UAAiC,GAAM,CAElD,GAAA,EAAA,EAAA,iBAA+B,CACnC,EAAY,GAAK,EAChB,EAAE,CAAC,CAEA,GAAA,EAAA,EAAA,iBAAgC,CACpC,GAAI,EAAa,EAAY,CAE3B,EAAY,GAAM,CAClB,IAAM,EAAgB,EAAa,EACnC,EAAc,EAAc,CAG5B,eAAiB,CAEf,EAAc,EADM,UAAU,KAAK,KAAK,CAAC,WAAW,IACpB,EAC/B,EAAa,EAAc,CAC9B,OAGF,EAAY,GAAK,CACjB,EAAY,GAAK,CACjB,EAAc,EAAI,EACjB,CAAC,EAAY,EAAY,EAAY,EAAI,CAAC,CAa7C,OAXI,GAEA,EAAA,EAAA,KAAC,MAAA,CAAI,MAAO,CAAE,QAAO,SAAQ,CAAE,WAAA,EAAA,EAAA,IAAc,mCAAoC,EAAU,WACzF,EAAA,EAAA,MAAC,MAAA,CAAI,UAAU,gHACb,EAAA,EAAA,KAACC,EAAAA,gBAAAA,CAAgB,UAAU,wCAAA,CAA0C,EACrE,EAAA,EAAA,KAAC,OAAA,CAAK,UAAU,oEAA2D,wBAA2B,CAAA,EAClG,EACF,EAKR,EAAA,EAAA,MAAC,MAAA,CAAI,MAAO,CAAE,QAAO,SAAQ,CAAE,WAAA,EAAA,EAAA,IAAc,uEAAwE,EAAU,CAAW,oBACvI,CAAC,IAAY,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAS,UAAU,4EAAA,CAA8E,EAChH,EAAA,EAAA,KAAC,MAAA,CAAI,IAAK,EAAY,UAAU,+EAAgF,EAChH,EAAA,EAAA,KAAC,MAAA,CACC,GAAI,EACJ,IAAK,EACL,IAAK,EACA,MACL,QAAQ,OACR,WAAA,EAAA,EAAA,IACE,oFACA,GAAY,cACZ,CAAC,GAAY,gCACb,EACD,CACD,OAAQ,EACR,QAAS,GACT,GACE"}

package/dist/input-Df2YPt1V.cjs

@@ -0,0 +1,2 @@
+const e=require(`./chunk-Bmb41Sf3.cjs`);let t=require(`react/jsx-runtime`),n=require(`react`),r=require(`class-variance-authority`);const i=(0,r.cva)(`w-full rounded-sm font-normal text-text-positive caret-primary transition-all duration-200 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50`,{variants:{variant:{outline:`-outline-offset-1 outline-1 outline-border placeholder:text-text-positive-muted focus:outline-primary-strong focus:ring-4 focus:ring-primary-weak aria-invalid:bg-danger-bg-subtle aria-invalid:outline-danger aria-invalid:ring-danger-weak aria-invalid:focus:outline-danger-strong aria-invalid:focus:ring-4`,ghost:``,none:``,soft:``,subtle:``},size:{xs:`px-2 py-1 text-xs leading-4`,sm:`px-2.5 py-1.5 text-xs leading-4`,md:`px-2.5 py-2 text-sm leading-5`,lg:`px-3 py-2 text-sm leading-5`,xl:`px-3 py-2 text-base leading-6`}},defaultVariants:{variant:`outline`,size:`md`}});function a({className:e,variant:r,size:a,onChange:o,onValueChange:s,...c}){let l=(0,n.useCallback)(e=>{o?.(e),s?.(e.target.value)},[o,s]);return(0,t.jsx)(`input`,{"data-slot":`input`,className:i({variant:r,size:a,className:e}),...c,onChange:l})}Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return a}});
+//# sourceMappingURL=input-Df2YPt1V.cjs.map