@intlayer/design-system 7.0.9-canary.0 → 7.0.9-canary.2

package/dist/esm/components/Form/Form.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Form.mjs","names":["FormRoot"],"sources":["../../../../src/components/Form/Form.tsx"],"sourcesContent":["import { Button } from '../Button';\nimport {\n  FormElement,\n  InputElement,\n  InputPasswordElement,\n  TextAreaElement,\n} from './elements';\nimport { AutoSizedTextAreaElement } from './elements/AutoSizeTextAreaElement';\nimport { CheckboxElement } from './elements/CheckboxElement';\nimport { EditableFieldInputElement } from './elements/EditableFieldInputElement';\nimport { EditableFieldTextAreaElement } from './elements/EditableFieldTextAreaElement';\nimport { MultiSelectElement } from './elements/MultiselectElement';\nimport { SelectElement } from './elements/SelectElement';\nimport { SwitchSelectorElement } from './elements/SwitchSelectorElement';\nimport { Form as FormRoot } from './FormBase';\nimport { FormControl } from './FormControl';\nimport { FormDescription } from './FormDescription';\nimport { FormField } from './FormField';\nimport { FormItem } from './FormItem';\nimport { FormMessage } from './FormMessage';\nimport { FormLabelLayout } from './layout';\n\ntype FormType = typeof FormRoot & {\n  Description: typeof FormDescription;\n  Control: typeof FormControl;\n  Field: typeof FormField;\n  Item: typeof FormItem;\n  Label: typeof FormLabelLayout;\n  Message: typeof FormMessage;\n  Element: typeof FormElement;\n  Button: typeof Button;\n  Input: typeof InputElement;\n  InputPassword: typeof InputPasswordElement;\n  Checkbox: typeof CheckboxElement;\n  TextArea: typeof TextAreaElement;\n  AutoSizedTextArea: typeof AutoSizedTextAreaElement;\n  MultiSelect: typeof MultiSelectElement;\n  Select: typeof SelectElement;\n  EditableFieldInput: typeof EditableFieldInputElement;\n  EditableFieldTextArea: typeof EditableFieldTextAreaElement;\n  SwitchSelector: typeof SwitchSelectorElement;\n};\n\n/**\n * Form components\n *\n * Example of usage:\n * ```jsx\n * <Form\n *  schema={ZodSchema}\n *  onSubmitSuccess={onSubmitSuccess}\n *  onSubmitError={onSubmitError}\n *  autoComplete\n * >\n *   <Form.Input name=\"name\" label=\"Name\" />\n *   <Form.Button type=\"submit\" label=\"Click to submit\">\n *      Submit\n *   </Form.Button>\n * </Form>\n * ```\n */\nexport const Form = FormRoot as FormType;\nForm.Description = FormDescription;\nForm.Control = FormControl;\nForm.Field = FormField;\nForm.Item = FormItem;\nForm.Label = FormLabelLayout;\nForm.Message = FormMessage;\nForm.Element = FormElement;\nForm.Input = InputElement;\nForm.InputPassword = InputPasswordElement;\nForm.Checkbox = CheckboxElement;\nForm.TextArea = TextAreaElement;\nForm.AutoSizedTextArea = AutoSizedTextAreaElement;\nForm.Button = Button;\nForm.Select = SelectElement;\nForm.MultiSelect = MultiSelectElement;\nForm.EditableFieldInput = EditableFieldInputElement;\nForm.EditableFieldTextArea = EditableFieldTextAreaElement;\nForm.SwitchSelector = SwitchSelectorElement;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6DA,MAAa,OAAOA;AACpB,KAAK,cAAc;AACnB,KAAK,UAAU;AACf,KAAK,QAAQ;AACb,KAAK,OAAO;AACZ,KAAK,QAAQ;AACb,KAAK,UAAU;AACf,KAAK,UAAU;AACf,KAAK,QAAQ;AACb,KAAK,gBAAgB;AACrB,KAAK,WAAW;AAChB,KAAK,WAAW;AAChB,KAAK,oBAAoB;AACzB,KAAK,SAAS;AACd,KAAK,SAAS;AACd,KAAK,cAAc;AACnB,KAAK,qBAAqB;AAC1B,KAAK,wBAAwB;AAC7B,KAAK,iBAAiB"}
+{"version":3,"file":"Form.mjs","names":["FormRoot"],"sources":["../../../../src/components/Form/Form.tsx"],"sourcesContent":["import { Button } from '../Button';\nimport {\n  FormElement,\n  InputElement,\n  InputPasswordElement,\n  TextAreaElement,\n} from './elements';\nimport { AutoSizedTextAreaElement } from './elements/AutoSizeTextAreaElement';\nimport { CheckboxElement } from './elements/CheckboxElement';\nimport { EditableFieldInputElement } from './elements/EditableFieldInputElement';\nimport { EditableFieldTextAreaElement } from './elements/EditableFieldTextAreaElement';\nimport { MultiSelectElement } from './elements/MultiselectElement';\nimport { OTPElement } from './elements/OTPElement';\nimport { SearchInputElement } from './elements/SearchInputElement';\nimport { SelectElement } from './elements/SelectElement';\nimport { SwitchSelectorElement } from './elements/SwitchSelectorElement';\nimport { Form as FormRoot } from './FormBase';\nimport { FormControl } from './FormControl';\nimport { FormDescription } from './FormDescription';\nimport { FormField } from './FormField';\nimport { FormItem } from './FormItem';\nimport { FormMessage } from './FormMessage';\nimport { FormLabelLayout } from './layout';\n\ntype FormType = typeof FormRoot & {\n  Description: typeof FormDescription;\n  Control: typeof FormControl;\n  Field: typeof FormField;\n  Item: typeof FormItem;\n  Label: typeof FormLabelLayout;\n  Message: typeof FormMessage;\n  Element: typeof FormElement;\n  Button: typeof Button;\n  Input: typeof InputElement;\n  InputPassword: typeof InputPasswordElement;\n  Checkbox: typeof CheckboxElement;\n  TextArea: typeof TextAreaElement;\n  AutoSizedTextArea: typeof AutoSizedTextAreaElement;\n  MultiSelect: typeof MultiSelectElement;\n  Select: typeof SelectElement;\n  EditableFieldInput: typeof EditableFieldInputElement;\n  EditableFieldTextArea: typeof EditableFieldTextAreaElement;\n  SwitchSelector: typeof SwitchSelectorElement;\n  OTP: typeof OTPElement;\n  SearchInput: typeof SearchInputElement;\n};\n\n/**\n * Form components\n *\n * Example of usage:\n * ```jsx\n * <Form\n *  schema={ZodSchema}\n *  onSubmitSuccess={onSubmitSuccess}\n *  onSubmitError={onSubmitError}\n *  autoComplete\n * >\n *   <Form.Input name=\"name\" label=\"Name\" />\n *   <Form.Button type=\"submit\" label=\"Click to submit\">\n *      Submit\n *   </Form.Button>\n * </Form>\n * ```\n */\nexport const Form = FormRoot as FormType;\nForm.Description = FormDescription;\nForm.Control = FormControl;\nForm.Field = FormField;\nForm.Item = FormItem;\nForm.Label = FormLabelLayout;\nForm.Message = FormMessage;\nForm.Element = FormElement;\nForm.Input = InputElement;\nForm.InputPassword = InputPasswordElement;\nForm.Checkbox = CheckboxElement;\nForm.TextArea = TextAreaElement;\nForm.AutoSizedTextArea = AutoSizedTextAreaElement;\nForm.Button = Button;\nForm.Select = SelectElement;\nForm.MultiSelect = MultiSelectElement;\nForm.EditableFieldInput = EditableFieldInputElement;\nForm.EditableFieldTextArea = EditableFieldTextAreaElement;\nForm.SwitchSelector = SwitchSelectorElement;\nForm.OTP = OTPElement;\nForm.SearchInput = SearchInputElement;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiEA,MAAa,OAAOA;AACpB,KAAK,cAAc;AACnB,KAAK,UAAU;AACf,KAAK,QAAQ;AACb,KAAK,OAAO;AACZ,KAAK,QAAQ;AACb,KAAK,UAAU;AACf,KAAK,UAAU;AACf,KAAK,QAAQ;AACb,KAAK,gBAAgB;AACrB,KAAK,WAAW;AAChB,KAAK,WAAW;AAChB,KAAK,oBAAoB;AACzB,KAAK,SAAS;AACd,KAAK,SAAS;AACd,KAAK,cAAc;AACnB,KAAK,qBAAqB;AAC1B,KAAK,wBAAwB;AAC7B,KAAK,iBAAiB;AACtB,KAAK,MAAM;AACX,KAAK,cAAc"}

package/dist/esm/components/Form/FormBase.mjs

@@ -11,7 +11,7 @@ const awaitFunction = async (fn) => {
 	if (fn && typeof fn.then === "function") return await fn;
 	return fn;
 };
-const Form = ({ schema, onSubmit: onSubmitProp, onSubmitSuccess: onSubmitSuccessProp, onSubmitError: onSubmitErrorProp, className, children, autoComplete,...props }) => {
+const Form = ({ schema, onSubmit: onSubmitProp, onSubmitSuccess: onSubmitSuccessProp, onSubmitError: onSubmitErrorProp, className, children, autoComplete, ...props }) => {
 	const onSubmit = async (values) => {
 		const parsedValues = schema?.safeParse(values) ?? {
 			success: true,

package/dist/esm/components/Form/FormBase.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormBase.mjs","names":["useFormReactHookForm"],"sources":["../../../../src/components/Form/FormBase.tsx"],"sourcesContent":["'use client';\n\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport type { HTMLAttributes } from 'react';\nimport {\n  FormProvider,\n  type FormProviderProps,\n  type UseFormProps,\n  useForm as useFormReactHookForm,\n  useFormState,\n} from 'react-hook-form';\nimport type { ZodObject, z } from 'zod/v4';\nimport { cn } from '../../utils/cn';\n\ntype FormProps<T extends ZodObject> = HTMLAttributes<HTMLFormElement> &\n  FormProviderProps<z.infer<T>> & {\n    schema?: T;\n    onSubmit?: (data: z.infer<T>) => void | Promise<void>;\n    onSubmitSuccess?: (data: z.infer<T>) => void | Promise<void>;\n    onSubmitError?: (error: Error) => void | Promise<void>;\n    autoComplete?: boolean;\n  };\n\nconst awaitFunction = async (fn: any) => {\n  // Check if result is a Promise (Thenable)\n\n  if (fn && typeof fn.then === 'function') {\n    // It's a Promise, so wait for it to resolve\n    return await fn;\n  }\n  // If not a Promise, it will just execute without awaiting\n  return fn;\n};\n\nexport const Form = <T extends ZodObject>({\n  schema,\n  onSubmit: onSubmitProp,\n  onSubmitSuccess: onSubmitSuccessProp,\n  onSubmitError: onSubmitErrorProp,\n  className,\n  children,\n  autoComplete,\n  ...props\n}: FormProps<T>) => {\n  const onSubmit = async (values: z.infer<T>) => {\n    const parsedValues = schema?.safeParse(values) ?? {\n      success: true,\n      data: undefined,\n    };\n\n    // onSubmitProp?.(values);\n    await awaitFunction(onSubmitProp?.(values));\n\n    if (parsedValues.success) {\n      await awaitFunction(onSubmitSuccessProp?.(parsedValues.data!));\n    } else {\n      await awaitFunction(\n        onSubmitErrorProp?.(\n          new Error(\n            parsedValues.error.issues.map((error) => error.message).join(', ')\n          )\n        )\n      );\n    }\n  };\n\n  return (\n    <FormProvider {...props}>\n      <form\n        className={cn('flex size-full flex-col gap-y-6', className)}\n        onSubmit={props.handleSubmit(onSubmit)}\n        autoComplete={autoComplete ? 'on' : 'off'}\n        noValidate\n      >\n        {children}\n      </form>\n    </FormProvider>\n  );\n};\n\nexport const useForm = <T extends ZodObject>(\n  schema: T,\n  props?: UseFormProps<z.infer<T>>\n) => {\n  const form = useFormReactHookForm<z.infer<T>>({\n    resolver: zodResolver(schema as any),\n    ...props,\n  });\n\n  const { isSubmitting, isSubmitted, isLoading, isValid } = useFormState({\n    control: form.control,\n  });\n\n  return {\n    form,\n    isSubmitting,\n    isSubmitted,\n    isLoading,\n    isValid,\n  };\n};\n"],"mappings":";;;;;;;;;AAuBA,MAAM,gBAAgB,OAAO,OAAY;AAGvC,KAAI,MAAM,OAAO,GAAG,SAAS,WAE3B,QAAO,MAAM;AAGf,QAAO;;AAGT,MAAa,QAA6B,EACxC,QACA,UAAU,cACV,iBAAiB,qBACjB,eAAe,mBACf,WACA,UACA,aACA,GAAG,YACe;CAClB,MAAM,WAAW,OAAO,WAAuB;EAC7C,MAAM,eAAe,QAAQ,UAAU,OAAO,IAAI;GAChD,SAAS;GACT,MAAM;GACP;AAGD,QAAM,cAAc,eAAe,OAAO,CAAC;AAE3C,MAAI,aAAa,QACf,OAAM,cAAc,sBAAsB,aAAa,KAAM,CAAC;MAE9D,OAAM,cACJ,oBACE,IAAI,MACF,aAAa,MAAM,OAAO,KAAK,UAAU,MAAM,QAAQ,CAAC,KAAK,KAAK,CACnE,CACF,CACF;;AAIL,QACE,oBAAC;EAAa,GAAI;YAChB,oBAAC;GACC,WAAW,GAAG,mCAAmC,UAAU;GAC3D,UAAU,MAAM,aAAa,SAAS;GACtC,cAAc,eAAe,OAAO;GACpC;GAEC;IACI;GACM;;AAInB,MAAa,WACX,QACA,UACG;CACH,MAAM,OAAOA,UAAiC;EAC5C,UAAU,YAAY,OAAc;EACpC,GAAG;EACJ,CAAC;CAEF,MAAM,EAAE,cAAc,aAAa,WAAW,YAAY,aAAa,EACrE,SAAS,KAAK,SACf,CAAC;AAEF,QAAO;EACL;EACA;EACA;EACA;EACA;EACD"}
+{"version":3,"file":"FormBase.mjs","names":["useFormReactHookForm"],"sources":["../../../../src/components/Form/FormBase.tsx"],"sourcesContent":["'use client';\n\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport type { HTMLAttributes } from 'react';\nimport {\n  FormProvider,\n  type FormProviderProps,\n  type UseFormProps,\n  useForm as useFormReactHookForm,\n  useFormState,\n} from 'react-hook-form';\nimport type { ZodObject, z } from 'zod/v4';\nimport { cn } from '../../utils/cn';\n\ntype FormProps<T extends ZodObject> = HTMLAttributes<HTMLFormElement> &\n  FormProviderProps<z.infer<T>> & {\n    schema?: T;\n    onSubmit?: (data: z.infer<T>) => void | Promise<void>;\n    onSubmitSuccess?: (data: z.infer<T>) => void | Promise<void>;\n    onSubmitError?: (error: Error) => void | Promise<void>;\n    autoComplete?: boolean;\n  };\n\nconst awaitFunction = async (fn: any) => {\n  // Check if result is a Promise (Thenable)\n\n  if (fn && typeof fn.then === 'function') {\n    // It's a Promise, so wait for it to resolve\n    return await fn;\n  }\n  // If not a Promise, it will just execute without awaiting\n  return fn;\n};\n\nexport const Form = <T extends ZodObject>({\n  schema,\n  onSubmit: onSubmitProp,\n  onSubmitSuccess: onSubmitSuccessProp,\n  onSubmitError: onSubmitErrorProp,\n  className,\n  children,\n  autoComplete,\n  ...props\n}: FormProps<T>) => {\n  const onSubmit = async (values: z.infer<T>) => {\n    const parsedValues = schema?.safeParse(values) ?? {\n      success: true,\n      data: undefined,\n    };\n\n    // onSubmitProp?.(values);\n    await awaitFunction(onSubmitProp?.(values));\n\n    if (parsedValues.success) {\n      await awaitFunction(onSubmitSuccessProp?.(parsedValues.data!));\n    } else {\n      await awaitFunction(\n        onSubmitErrorProp?.(\n          new Error(\n            parsedValues.error.issues.map((error) => error.message).join(', ')\n          )\n        )\n      );\n    }\n  };\n\n  return (\n    <FormProvider {...props}>\n      <form\n        className={cn('flex size-full flex-col gap-y-6', className)}\n        onSubmit={props.handleSubmit(onSubmit)}\n        autoComplete={autoComplete ? 'on' : 'off'}\n        noValidate\n      >\n        {children}\n      </form>\n    </FormProvider>\n  );\n};\n\nexport const useForm = <T extends ZodObject>(\n  schema: T,\n  props?: UseFormProps<z.infer<T>>\n) => {\n  const form = useFormReactHookForm<z.infer<T>>({\n    resolver: zodResolver(schema as any),\n    ...props,\n  });\n\n  const { isSubmitting, isSubmitted, isLoading, isValid } = useFormState({\n    control: form.control,\n  });\n\n  return {\n    form,\n    isSubmitting,\n    isSubmitted,\n    isLoading,\n    isValid,\n  };\n};\n"],"mappings":";;;;;;;;;AAuBA,MAAM,gBAAgB,OAAO,OAAY;AAGvC,KAAI,MAAM,OAAO,GAAG,SAAS,WAE3B,QAAO,MAAM;AAGf,QAAO;;AAGT,MAAa,QAA6B,EACxC,QACA,UAAU,cACV,iBAAiB,qBACjB,eAAe,mBACf,WACA,UACA,cACA,GAAG,YACe;CAClB,MAAM,WAAW,OAAO,WAAuB;EAC7C,MAAM,eAAe,QAAQ,UAAU,OAAO,IAAI;GAChD,SAAS;GACT,MAAM;GACP;AAGD,QAAM,cAAc,eAAe,OAAO,CAAC;AAE3C,MAAI,aAAa,QACf,OAAM,cAAc,sBAAsB,aAAa,KAAM,CAAC;MAE9D,OAAM,cACJ,oBACE,IAAI,MACF,aAAa,MAAM,OAAO,KAAK,UAAU,MAAM,QAAQ,CAAC,KAAK,KAAK,CACnE,CACF,CACF;;AAIL,QACE,oBAAC;EAAa,GAAI;YAChB,oBAAC;GACC,WAAW,GAAG,mCAAmC,UAAU;GAC3D,UAAU,MAAM,aAAa,SAAS;GACtC,cAAc,eAAe,OAAO;GACpC;GAEC;IACI;GACM;;AAInB,MAAa,WACX,QACA,UACG;CACH,MAAM,OAAOA,UAAiC;EAC5C,UAAU,YAAY,OAAc;EACpC,GAAG;EACJ,CAAC;CAEF,MAAM,EAAE,cAAc,aAAa,WAAW,YAAY,aAAa,EACrE,SAAS,KAAK,SACf,CAAC;AAEF,QAAO;EACL;EACA;EACA;EACA;EACA;EACD"}

package/dist/esm/components/Form/FormItem.mjs

@@ -5,7 +5,7 @@ import { createContext, useId, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/Form/FormItem.tsx
-const FormItem = ({ id: idProp,...props }) => {
+const FormItem = ({ id: idProp, ...props }) => {
 	const generatedId = useId();
 	const stableId = idProp ?? generatedId;
 	return /* @__PURE__ */ jsx(FormItemContext, {

package/dist/esm/components/Form/FormItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormItem.mjs","names":["FormItem: FC<HTMLAttributes<HTMLDivElement>>"],"sources":["../../../../src/components/Form/FormItem.tsx"],"sourcesContent":["'use client';\n\nimport {\n  createContext,\n  type FC,\n  type HTMLAttributes,\n  useId,\n  useMemo,\n} from 'react';\n\nexport const FormItem: FC<HTMLAttributes<HTMLDivElement>> = ({\n  id: idProp,\n  ...props\n}) => {\n  const generatedId = useId();\n  const stableId = idProp ?? generatedId;\n\n  const memoValue = useMemo(\n    () => ({\n      id: stableId,\n    }),\n    [stableId]\n  );\n\n  return (\n    <FormItemContext value={memoValue}>\n      <div className=\"flex flex-col gap-2 p-2\" id={stableId} {...props} />\n    </FormItemContext>\n  );\n};\n\ntype FormItemContextValue = {\n  id: string;\n};\n\nexport const FormItemContext = createContext<FormItemContextValue>(\n  {} as FormItemContextValue\n);\n"],"mappings":";;;;;;;AAUA,MAAaA,YAAgD,EAC3D,IAAI,OACJ,GAAG,YACC;CACJ,MAAM,cAAc,OAAO;CAC3B,MAAM,WAAW,UAAU;AAS3B,QACE,oBAAC;EAAgB,OARD,eACT,EACL,IAAI,UACL,GACD,CAAC,SAAS,CACX;YAIG,oBAAC;GAAI,WAAU;GAA0B,IAAI;GAAU,GAAI;IAAS;GACpD;;AAQtB,MAAa,kBAAkB,cAC7B,EAAE,CACH"}
+{"version":3,"file":"FormItem.mjs","names":["FormItem: FC<HTMLAttributes<HTMLDivElement>>"],"sources":["../../../../src/components/Form/FormItem.tsx"],"sourcesContent":["'use client';\n\nimport {\n  createContext,\n  type FC,\n  type HTMLAttributes,\n  useId,\n  useMemo,\n} from 'react';\n\nexport const FormItem: FC<HTMLAttributes<HTMLDivElement>> = ({\n  id: idProp,\n  ...props\n}) => {\n  const generatedId = useId();\n  const stableId = idProp ?? generatedId;\n\n  const memoValue = useMemo(\n    () => ({\n      id: stableId,\n    }),\n    [stableId]\n  );\n\n  return (\n    <FormItemContext value={memoValue}>\n      <div className=\"flex flex-col gap-2 p-2\" id={stableId} {...props} />\n    </FormItemContext>\n  );\n};\n\ntype FormItemContextValue = {\n  id: string;\n};\n\nexport const FormItemContext = createContext<FormItemContextValue>(\n  {} as FormItemContextValue\n);\n"],"mappings":";;;;;;;AAUA,MAAaA,YAAgD,EAC3D,IAAI,QACJ,GAAG,YACC;CACJ,MAAM,cAAc,OAAO;CAC3B,MAAM,WAAW,UAAU;AAS3B,QACE,oBAAC;EAAgB,OARD,eACT,EACL,IAAI,UACL,GACD,CAAC,SAAS,CACX;YAIG,oBAAC;GAAI,WAAU;GAA0B,IAAI;GAAU,GAAI;IAAS;GACpD;;AAQtB,MAAa,kBAAkB,cAC7B,EAAE,CACH"}

package/dist/esm/components/Form/FormLabel.mjs

@@ -7,7 +7,7 @@ import { Label } from "../Label/index.mjs";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/Form/FormLabel.tsx
-const FormLabel = ({ className,...props }) => {
+const FormLabel = ({ className, ...props }) => {
 	const { error, formItemId } = useFormField();
 	return /* @__PURE__ */ jsx(Label, {
 		className: cn("mb-2", error && "text-error", className),

package/dist/esm/components/Form/FormLabel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormLabel.mjs","names":["FormLabel: FC<ComponentProps<typeof Label>>"],"sources":["../../../../src/components/Form/FormLabel.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentProps, FC } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Label } from '../Label';\nimport { useFormField } from './FormField';\n\nexport const FormLabel: FC<ComponentProps<typeof Label>> = ({\n  className,\n  ...props\n}) => {\n  const { error, formItemId } = useFormField();\n\n  return (\n    <Label\n      className={cn('mb-2', error && 'text-error', className)}\n      htmlFor={formItemId}\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;AAOA,MAAaA,aAA+C,EAC1D,UACA,GAAG,YACC;CACJ,MAAM,EAAE,OAAO,eAAe,cAAc;AAE5C,QACE,oBAAC;EACC,WAAW,GAAG,QAAQ,SAAS,cAAc,UAAU;EACvD,SAAS;EACT,GAAI;GACJ"}
+{"version":3,"file":"FormLabel.mjs","names":["FormLabel: FC<ComponentProps<typeof Label>>"],"sources":["../../../../src/components/Form/FormLabel.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentProps, FC } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Label } from '../Label';\nimport { useFormField } from './FormField';\n\nexport const FormLabel: FC<ComponentProps<typeof Label>> = ({\n  className,\n  ...props\n}) => {\n  const { error, formItemId } = useFormField();\n\n  return (\n    <Label\n      className={cn('mb-2', error && 'text-error', className)}\n      htmlFor={formItemId}\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;AAOA,MAAaA,aAA+C,EAC1D,WACA,GAAG,YACC;CACJ,MAAM,EAAE,OAAO,eAAe,cAAc;AAE5C,QACE,oBAAC;EACC,WAAW,GAAG,QAAQ,SAAS,cAAc,UAAU;EACvD,SAAS;EACT,GAAI;GACJ"}

package/dist/esm/components/Form/FormMessage.mjs

@@ -5,7 +5,7 @@ import { useFormField } from "./FormField.mjs";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/Form/FormMessage.tsx
-const FormMessage = ({ children,...props }) => {
+const FormMessage = ({ children, ...props }) => {
 	const { error, formMessageId } = useFormField();
 	const body = error ? String(error?.message ?? "") : children;
 	if (!body) return null;

package/dist/esm/components/Form/FormMessage.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormMessage.mjs","names":["FormMessage: FC<HTMLAttributes<HTMLParagraphElement>>"],"sources":["../../../../src/components/Form/FormMessage.tsx"],"sourcesContent":["'use client';\n\nimport type { FC, HTMLAttributes } from 'react';\nimport { useFormField } from './FormField';\n\nexport const FormMessage: FC<HTMLAttributes<HTMLParagraphElement>> = ({\n  children,\n  ...props\n}) => {\n  const { error, formMessageId } = useFormField();\n  const body = error ? String(error?.message ?? '') : children;\n\n  if (!body) {\n    return null;\n  }\n\n  return (\n    <p\n      className=\"font-medium text-error text-xs\"\n      role=\"alert\"\n      id={formMessageId}\n      {...props}\n    >\n      {body}\n    </p>\n  );\n};\n"],"mappings":";;;;;;;AAKA,MAAaA,eAAyD,EACpE,SACA,GAAG,YACC;CACJ,MAAM,EAAE,OAAO,kBAAkB,cAAc;CAC/C,MAAM,OAAO,QAAQ,OAAO,OAAO,WAAW,GAAG,GAAG;AAEpD,KAAI,CAAC,KACH,QAAO;AAGT,QACE,oBAAC;EACC,WAAU;EACV,MAAK;EACL,IAAI;EACJ,GAAI;YAEH;GACC"}
+{"version":3,"file":"FormMessage.mjs","names":["FormMessage: FC<HTMLAttributes<HTMLParagraphElement>>"],"sources":["../../../../src/components/Form/FormMessage.tsx"],"sourcesContent":["'use client';\n\nimport type { FC, HTMLAttributes } from 'react';\nimport { useFormField } from './FormField';\n\nexport const FormMessage: FC<HTMLAttributes<HTMLParagraphElement>> = ({\n  children,\n  ...props\n}) => {\n  const { error, formMessageId } = useFormField();\n  const body = error ? String(error?.message ?? '') : children;\n\n  if (!body) {\n    return null;\n  }\n\n  return (\n    <p\n      className=\"font-medium text-error text-xs\"\n      role=\"alert\"\n      id={formMessageId}\n      {...props}\n    >\n      {body}\n    </p>\n  );\n};\n"],"mappings":";;;;;;;AAKA,MAAaA,eAAyD,EACpE,UACA,GAAG,YACC;CACJ,MAAM,EAAE,OAAO,kBAAkB,cAAc;CAC/C,MAAM,OAAO,QAAQ,OAAO,OAAO,WAAW,GAAG,GAAG;AAEpD,KAAI,CAAC,KACH,QAAO;AAGT,QACE,oBAAC;EACC,WAAU;EACV,MAAK;EACL,IAAI;EACJ,GAAI;YAEH;GACC"}

package/dist/esm/components/Form/elements/AutoSizeTextAreaElement.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AutoSizeTextAreaElement.mjs","names":["AutoSizedTextAreaElement: FC<AutoSizedTextAreaElementsProps>"],"sources":["../../../../../src/components/Form/elements/AutoSizeTextAreaElement.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { AutoSizedTextArea } from '../../TextArea/AutoSizeTextArea';\nimport { FormElement, type FormElementProps } from './FormElement';\n\ntype AutoSizedTextAreaElementsProps = Omit<\n  FormElementProps<typeof AutoSizedTextArea>,\n  'Element'\n> &\n  React.ComponentProps<typeof AutoSizedTextArea> & {\n    name: string;\n  };\n\nexport const AutoSizedTextAreaElement: FC<AutoSizedTextAreaElementsProps> = (\n  props\n) => (\n  <FormElement\n    Element={AutoSizedTextArea}\n    id={props.name}\n    data-testid={props.name}\n    {...props}\n  />\n);\n"],"mappings":";;;;;AAYA,MAAaA,4BACX,UAEA,oBAAC;CACC,SAAS;CACT,IAAI,MAAM;CACV,eAAa,MAAM;CACnB,GAAI;EACJ"}
+{"version":3,"file":"AutoSizeTextAreaElement.mjs","names":["AutoSizedTextAreaElement: FC<AutoSizedTextAreaElementsProps>"],"sources":["../../../../../src/components/Form/elements/AutoSizeTextAreaElement.tsx"],"sourcesContent":["import type { ComponentProps, FC } from 'react';\nimport { AutoSizedTextArea } from '../../TextArea/AutoSizeTextArea';\nimport { FormElement, type FormElementProps } from './FormElement';\n\ntype AutoSizedTextAreaElementsProps = Omit<\n  FormElementProps<typeof AutoSizedTextArea>,\n  'Element'\n> &\n  ComponentProps<typeof AutoSizedTextArea> & {\n    name: string;\n  };\n\nexport const AutoSizedTextAreaElement: FC<AutoSizedTextAreaElementsProps> = (\n  props\n) => (\n  <FormElement\n    Element={AutoSizedTextArea}\n    id={props.name}\n    data-testid={props.name}\n    {...props}\n  />\n);\n"],"mappings":";;;;;AAYA,MAAaA,4BACX,UAEA,oBAAC;CACC,SAAS;CACT,IAAI,MAAM;CACV,eAAa,MAAM;CACnB,GAAI;EACJ"}

package/dist/esm/components/Form/elements/CheckboxElement.mjs

@@ -3,11 +3,11 @@ import { FormElement } from "./FormElement.mjs";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/Form/elements/CheckboxElement.tsx
-const CheckboxComponent = ({ inputLabel,...props }) => /* @__PURE__ */ jsx(Checkbox, {
+const CheckboxComponent = ({ inputLabel, ...props }) => /* @__PURE__ */ jsx(Checkbox, {
 	...props,
 	label: inputLabel
 });
-const CheckboxElement = ({ autoComplete,...props }) => /* @__PURE__ */ jsx(FormElement, {
+const CheckboxElement = ({ autoComplete, ...props }) => /* @__PURE__ */ jsx(FormElement, {
 	Element: CheckboxComponent,
 	id: props.name,
 	"data-testid": props.name,

package/dist/esm/components/Form/elements/CheckboxElement.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxElement.mjs","names":["CheckboxComponent: FC<CheckboxComponentProps>","CheckboxElement: FC<CheckboxElementProps>"],"sources":["../../../../../src/components/Form/elements/CheckboxElement.tsx"],"sourcesContent":["import type { ComponentProps, FC, ReactNode } from 'react';\nimport { Checkbox } from '../../Input';\nimport { FormElement, type FormElementProps } from './FormElement';\n\ntype CheckboxElementProps = Omit<FormElementProps<typeof Checkbox>, 'Element'> &\n  ComponentProps<typeof Checkbox> & {\n    name: string;\n    inputLabel?: ReactNode;\n  };\n\ntype CheckboxComponentProps = Omit<ComponentProps<typeof Checkbox>, 'label'> & {\n  name: string;\n  inputLabel?: ComponentProps<typeof Checkbox>['label'];\n};\n\nconst CheckboxComponent: FC<CheckboxComponentProps> = ({\n  inputLabel,\n  ...props\n}) => <Checkbox {...props} label={inputLabel} />;\n\nexport const CheckboxElement: FC<CheckboxElementProps> = ({\n  autoComplete,\n  ...props\n}) => (\n  <FormElement\n    Element={CheckboxComponent}\n    id={props.name}\n    data-testid={props.name}\n    autoComplete={autoComplete}\n    minLength={6}\n    maxLength={255}\n    {...props}\n  />\n);\n"],"mappings":";;;;;AAeA,MAAMA,qBAAiD,EACrD,WACA,GAAG,YACC,oBAAC;CAAS,GAAI;CAAO,OAAO;EAAc;AAEhD,MAAaC,mBAA6C,EACxD,aACA,GAAG,YAEH,oBAAC;CACC,SAAS;CACT,IAAI,MAAM;CACV,eAAa,MAAM;CACL;CACd,WAAW;CACX,WAAW;CACX,GAAI;EACJ"}
+{"version":3,"file":"CheckboxElement.mjs","names":["CheckboxComponent: FC<CheckboxComponentProps>","CheckboxElement: FC<CheckboxElementProps>"],"sources":["../../../../../src/components/Form/elements/CheckboxElement.tsx"],"sourcesContent":["import type { ComponentProps, FC, ReactNode } from 'react';\nimport { Checkbox } from '../../Input';\nimport { FormElement, type FormElementProps } from './FormElement';\n\ntype CheckboxElementProps = Omit<FormElementProps<typeof Checkbox>, 'Element'> &\n  ComponentProps<typeof Checkbox> & {\n    name: string;\n    inputLabel?: ReactNode;\n  };\n\ntype CheckboxComponentProps = Omit<ComponentProps<typeof Checkbox>, 'label'> & {\n  name: string;\n  inputLabel?: ComponentProps<typeof Checkbox>['label'];\n};\n\nconst CheckboxComponent: FC<CheckboxComponentProps> = ({\n  inputLabel,\n  ...props\n}) => <Checkbox {...props} label={inputLabel} />;\n\nexport const CheckboxElement: FC<CheckboxElementProps> = ({\n  autoComplete,\n  ...props\n}) => (\n  <FormElement\n    Element={CheckboxComponent}\n    id={props.name}\n    data-testid={props.name}\n    autoComplete={autoComplete}\n    minLength={6}\n    maxLength={255}\n    {...props}\n  />\n);\n"],"mappings":";;;;;AAeA,MAAMA,qBAAiD,EACrD,YACA,GAAG,YACC,oBAAC;CAAS,GAAI;CAAO,OAAO;EAAc;AAEhD,MAAaC,mBAA6C,EACxD,cACA,GAAG,YAEH,oBAAC;CACC,SAAS;CACT,IAAI,MAAM;CACV,eAAa,MAAM;CACL;CACd,WAAW;CACX,WAAW;CACX,GAAI;EACJ"}

package/dist/esm/components/Form/elements/CodeInputElement.mjs

@@ -0,0 +1,40 @@
+'use client';
+
+
+import { CodeInput } from "../../Input/CodeInput.mjs";
+import { useFormField } from "../FormField.mjs";
+import { FormItemLayout } from "../layout/FormItemLayout.mjs";
+import { Form } from "../Form.mjs";
+import { jsx } from "react/jsx-runtime";
+import { useFormContext } from "react-hook-form";
+
+//#region src/components/Form/elements/CodeInputElement.tsx
+const CodeInputElement = ({ name, description, label, isRequired, info, showErrorMessage, ...props }) => {
+	const { control } = useFormContext();
+	return /* @__PURE__ */ jsx(Form.Field, {
+		control,
+		name,
+		render: ({ field }) => {
+			const { error } = useFormField();
+			return /* @__PURE__ */ jsx(FormItemLayout, {
+				htmlFor: name,
+				label,
+				description,
+				isRequired,
+				info,
+				showErrorMessage,
+				"aria-invalid": !!error,
+				children: /* @__PURE__ */ jsx(CodeInput, {
+					onValueChange: field.onChange,
+					value: field.value,
+					"aria-invalid": !!error,
+					...props
+				})
+			});
+		}
+	});
+};
+
+//#endregion
+export { CodeInputElement };
+//# sourceMappingURL=CodeInputElement.mjs.map

package/dist/esm/components/Form/elements/CodeInputElement.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeInputElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/CodeInputElement.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentProps } from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { CodeInput } from '../../Input/CodeInput';\nimport { Form } from '../Form';\nimport { useFormField } from '../FormField';\nimport { FormItemLayout } from '../layout/FormItemLayout';\nimport type { FormElementProps } from './FormElement';\n\ntype CodeInputElementProps = Omit<\n  FormElementProps<typeof CodeInput>,\n  'Element'\n> &\n  ComponentProps<typeof CodeInput> & {\n    name: string;\n    description?: string;\n    className?: string;\n  };\n\nexport const CodeInputElement = ({\n  name,\n  description,\n  label,\n  isRequired,\n  info,\n  showErrorMessage,\n  ...props\n}: CodeInputElementProps) => {\n  const { control } = useFormContext();\n\n  return (\n    <Form.Field\n      control={control}\n      name={name}\n      render={({ field }) => {\n        const { error } = useFormField();\n\n        return (\n          <FormItemLayout\n            htmlFor={name}\n            label={label}\n            description={description}\n            isRequired={isRequired}\n            info={info}\n            showErrorMessage={showErrorMessage}\n            aria-invalid={!!error}\n          >\n            <CodeInput\n              onValueChange={field.onChange}\n              value={field.value}\n              aria-invalid={!!error}\n              {...props}\n            />\n          </FormItemLayout>\n        );\n      }}\n    />\n  );\n};\n\n"],"mappings":";;;;;;;;;;;AAoBA,MAAa,oBAAoB,EAC/B,MACA,aACA,OACA,YACA,MACA,kBACA,GAAG,YACwB;CAC3B,MAAM,EAAE,YAAY,gBAAgB;AAEpC,QACE,oBAAC,KAAK;EACK;EACH;EACN,SAAS,EAAE,YAAY;GACrB,MAAM,EAAE,UAAU,cAAc;AAEhC,UACE,oBAAC;IACC,SAAS;IACF;IACM;IACD;IACN;IACY;IAClB,gBAAc,CAAC,CAAC;cAEhB,oBAAC;KACC,eAAe,MAAM;KACrB,OAAO,MAAM;KACb,gBAAc,CAAC,CAAC;KAChB,GAAI;MACJ;KACa;;GAGrB"}

package/dist/esm/components/Form/elements/FormElement.mjs

@@ -8,9 +8,9 @@ import { jsx } from "react/jsx-runtime";
 import { useFormContext } from "react-hook-form";
 
 //#region src/components/Form/elements/FormElement.tsx
-const FormFieldElement = ({ field, name, label, Element, isRequired = false, info, description, showErrorMessage = true,...props }) => {
+const FormFieldElement = ({ field, name, label, Element, isRequired = false, info, description, showErrorMessage = true, ...props }) => {
 	const { error } = useFormField();
-	const { value: fieldValue, onChange: fieldOnChange,...fieldRest } = field ?? {};
+	const { value: fieldValue, onChange: fieldOnChange, ...fieldRest } = field ?? {};
 	const propsAny = props;
 	const mergedValue = propsAny.value !== void 0 ? propsAny.value : fieldValue ?? "";
 	const mergedOnChange = (...args) => {

package/dist/esm/components/Form/elements/FormElement.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/FormElement.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentProps, ElementType, ReactNode } from 'react';\nimport {\n  type ControllerRenderProps,\n  type FieldValues,\n  useFormContext,\n} from 'react-hook-form';\nimport { Form } from '../Form';\nimport { useFormField } from '../FormField';\nimport { FormItemLayout, type FormItemLayoutProps } from '../layout';\n\nexport type FormElementProps<T extends ElementType> = {\n  name: string;\n  Element: T;\n  label?: ReactNode;\n  isRequired?: boolean;\n  info?: string;\n  showErrorMessage?: boolean;\n  focus?: boolean;\n} & Omit<FormItemLayoutProps, 'children'>;\n\ntype FormFieldElementProps<T extends ElementType> = FormElementProps<T> &\n  ComponentProps<T> & {\n    field: ControllerRenderProps<FieldValues, string>;\n  };\n\nconst FormFieldElement = <T extends ElementType>({\n  field,\n  name,\n  label,\n  Element,\n  isRequired = false,\n  info,\n  description,\n  showErrorMessage = true,\n  ...props\n}: FormFieldElementProps<T>) => {\n  const { error } = useFormField();\n\n  // Ensure controlled inputs and merge onChange with RHF controller\n  const {\n    value: fieldValue,\n    onChange: fieldOnChange,\n    ...fieldRest\n  } = (field as unknown as {\n    value: unknown;\n    onChange: (...args: unknown[]) => void;\n  }) ?? {};\n\n  const propsAny = props as unknown as {\n    value?: unknown;\n    onChange?: (...args: unknown[]) => void;\n    children?: unknown;\n  };\n\n  const mergedValue =\n    propsAny.value !== undefined ? propsAny.value : (fieldValue ?? '');\n\n  const mergedOnChange = (...args: unknown[]) => {\n    if (typeof fieldOnChange === 'function') fieldOnChange(...args);\n    if (typeof propsAny.onChange === 'function') propsAny.onChange(...args);\n  };\n\n  return (\n    <FormItemLayout\n      htmlFor={name}\n      label={label}\n      description={description}\n      isRequired={isRequired}\n      info={info}\n      showErrorMessage={showErrorMessage}\n      aria-invalid={!!error}\n    >\n      <Element\n        data-testid=\"element\"\n        id={name}\n        {...fieldRest}\n        {...props}\n        // Force controlled value to avoid uncontrolled-to-controlled warnings\n        value={mergedValue as never}\n        // Merge onChange so RHF stays in sync while allowing custom handlers\n        onChange={mergedOnChange as never}\n      >\n        {props.children}\n      </Element>\n    </FormItemLayout>\n  );\n};\n\n/**\n * FormElement is a component that allows you to create a form element with a label, description, error message, and validation.\n *\n * The Element prop is the type of the element that will be rendered.\n * This element will interact with the FormContext and will be controlled by the FormControl component.\n * The props used to control the element will be `value` and `onChange`.\n */\nexport const FormElement = <T extends ElementType>(\n  props: FormElementProps<T> & ComponentProps<T>\n) => {\n  const { control } = useFormContext();\n\n  return (\n    <Form.Field\n      control={control}\n      name={props.name}\n      render={({ field }) => <FormFieldElement {...props} field={field} />}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;AA2BA,MAAM,oBAA2C,EAC/C,OACA,MACA,OACA,SACA,aAAa,OACb,MACA,aACA,mBAAmB,KACnB,GAAG,YAC2B;CAC9B,MAAM,EAAE,UAAU,cAAc;CAGhC,MAAM,EACJ,OAAO,YACP,UAAU,cACV,GAAG,cACA,SAGC,EAAE;CAER,MAAM,WAAW;CAMjB,MAAM,cACJ,SAAS,UAAU,SAAY,SAAS,QAAS,cAAc;CAEjE,MAAM,kBAAkB,GAAG,SAAoB;AAC7C,MAAI,OAAO,kBAAkB,WAAY,eAAc,GAAG,KAAK;AAC/D,MAAI,OAAO,SAAS,aAAa,WAAY,UAAS,SAAS,GAAG,KAAK;;AAGzE,QACE,oBAAC;EACC,SAAS;EACF;EACM;EACD;EACN;EACY;EAClB,gBAAc,CAAC,CAAC;YAEhB,oBAAC;GACC,eAAY;GACZ,IAAI;GACJ,GAAI;GACJ,GAAI;GAEJ,OAAO;GAEP,UAAU;aAET,MAAM;IACC;GACK;;;;;;;;;AAWrB,MAAa,eACX,UACG;CACH,MAAM,EAAE,YAAY,gBAAgB;AAEpC,QACE,oBAAC,KAAK;EACK;EACT,MAAM,MAAM;EACZ,SAAS,EAAE,YAAY,oBAAC;GAAiB,GAAI;GAAc;IAAS;GACpE"}
+{"version":3,"file":"FormElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/FormElement.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentProps, ElementType, ReactNode } from 'react';\nimport {\n  type ControllerRenderProps,\n  type FieldValues,\n  useFormContext,\n} from 'react-hook-form';\nimport { Form } from '../Form';\nimport { useFormField } from '../FormField';\nimport { FormItemLayout, type FormItemLayoutProps } from '../layout';\n\nexport type FormElementProps<T extends ElementType> = {\n  name: string;\n  Element: T;\n  label?: ReactNode;\n  isRequired?: boolean;\n  info?: string;\n  showErrorMessage?: boolean;\n  focus?: boolean;\n} & Omit<FormItemLayoutProps, 'children'>;\n\ntype FormFieldElementProps<T extends ElementType> = FormElementProps<T> &\n  ComponentProps<T> & {\n    field: ControllerRenderProps<FieldValues, string>;\n  };\n\nconst FormFieldElement = <T extends ElementType>({\n  field,\n  name,\n  label,\n  Element,\n  isRequired = false,\n  info,\n  description,\n  showErrorMessage = true,\n  ...props\n}: FormFieldElementProps<T>) => {\n  const { error } = useFormField();\n\n  // Ensure controlled inputs and merge onChange with RHF controller\n  const {\n    value: fieldValue,\n    onChange: fieldOnChange,\n    ...fieldRest\n  } = (field as unknown as {\n    value: unknown;\n    onChange: (...args: unknown[]) => void;\n  }) ?? {};\n\n  const propsAny = props as unknown as {\n    value?: unknown;\n    onChange?: (...args: unknown[]) => void;\n    children?: unknown;\n  };\n\n  const mergedValue =\n    propsAny.value !== undefined ? propsAny.value : (fieldValue ?? '');\n\n  const mergedOnChange = (...args: unknown[]) => {\n    if (typeof fieldOnChange === 'function') fieldOnChange(...args);\n    if (typeof propsAny.onChange === 'function') propsAny.onChange(...args);\n  };\n\n  return (\n    <FormItemLayout\n      htmlFor={name}\n      label={label}\n      description={description}\n      isRequired={isRequired}\n      info={info}\n      showErrorMessage={showErrorMessage}\n      aria-invalid={!!error}\n    >\n      <Element\n        data-testid=\"element\"\n        id={name}\n        {...fieldRest}\n        {...props}\n        // Force controlled value to avoid uncontrolled-to-controlled warnings\n        value={mergedValue as never}\n        // Merge onChange so RHF stays in sync while allowing custom handlers\n        onChange={mergedOnChange as never}\n      >\n        {props.children}\n      </Element>\n    </FormItemLayout>\n  );\n};\n\n/**\n * FormElement is a component that allows you to create a form element with a label, description, error message, and validation.\n *\n * The Element prop is the type of the element that will be rendered.\n * This element will interact with the FormContext and will be controlled by the FormControl component.\n * The props used to control the element will be `value` and `onChange`.\n */\nexport const FormElement = <T extends ElementType>(\n  props: FormElementProps<T> & ComponentProps<T>\n) => {\n  const { control } = useFormContext();\n\n  return (\n    <Form.Field\n      control={control}\n      name={props.name}\n      render={({ field }) => <FormFieldElement {...props} field={field} />}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;AA2BA,MAAM,oBAA2C,EAC/C,OACA,MACA,OACA,SACA,aAAa,OACb,MACA,aACA,mBAAmB,MACnB,GAAG,YAC2B;CAC9B,MAAM,EAAE,UAAU,cAAc;CAGhC,MAAM,EACJ,OAAO,YACP,UAAU,eACV,GAAG,cACA,SAGC,EAAE;CAER,MAAM,WAAW;CAMjB,MAAM,cACJ,SAAS,UAAU,SAAY,SAAS,QAAS,cAAc;CAEjE,MAAM,kBAAkB,GAAG,SAAoB;AAC7C,MAAI,OAAO,kBAAkB,WAAY,eAAc,GAAG,KAAK;AAC/D,MAAI,OAAO,SAAS,aAAa,WAAY,UAAS,SAAS,GAAG,KAAK;;AAGzE,QACE,oBAAC;EACC,SAAS;EACF;EACM;EACD;EACN;EACY;EAClB,gBAAc,CAAC,CAAC;YAEhB,oBAAC;GACC,eAAY;GACZ,IAAI;GACJ,GAAI;GACJ,GAAI;GAEJ,OAAO;GAEP,UAAU;aAET,MAAM;IACC;GACK;;;;;;;;;AAWrB,MAAa,eACX,UACG;CACH,MAAM,EAAE,YAAY,gBAAgB;AAEpC,QACE,oBAAC,KAAK;EACK;EACT,MAAM,MAAM;EACZ,SAAS,EAAE,YAAY,oBAAC;GAAiB,GAAI;GAAc;IAAS;GACpE"}

package/dist/esm/components/Form/elements/FormElementWrapper.mjs

@@ -14,7 +14,7 @@ const FormElementWrapper = (props) => {
 		resolver: zodResolver(objectFormSchema),
 		values: props.values
 	});
-	const { children, onSubmit,...rest } = props;
+	const { children, onSubmit, ...rest } = props;
 	const onSubmitForm = (values, event) => {
 		if (objectFormSchema.safeParse(values).success) onSubmit?.(event);
 	};

package/dist/esm/components/Form/elements/FormElementWrapper.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormElementWrapper.mjs","names":["FormElementWrapper: FC<FormElementWrapperProps>"],"sources":["../../../../../src/components/Form/elements/FormElementWrapper.tsx"],"sourcesContent":["'use client';\n\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport type { FC, FormEvent, HTMLProps } from 'react';\nimport { FormProvider, useForm } from 'react-hook-form';\nimport { z } from 'zod/v4';\n\nconst Schema = z.object({\n  test: z.string().min(3, 'test error'),\n});\n\ntype FormElementWrapperProps = HTMLProps<HTMLFormElement> & {\n  schema?: z.ZodObject;\n  values?: z.infer<z.ZodObject>;\n};\n\nexport const FormElementWrapper: FC<FormElementWrapperProps> = (props) => {\n  const objectFormSchema = props.schema ?? Schema;\n\n  const form = useForm<z.infer<typeof objectFormSchema>>({\n    resolver: zodResolver(objectFormSchema as any),\n    values: props.values,\n  });\n\n  const { children, onSubmit, ...rest } = props;\n\n  const onSubmitForm = (\n    values: z.infer<typeof objectFormSchema>,\n    event: FormEvent<HTMLFormElement>\n  ) => {\n    const parsedValues = objectFormSchema.safeParse(values);\n    if (parsedValues.success) {\n      onSubmit?.(event);\n    }\n  };\n\n  return (\n    <FormProvider {...form}>\n      <form\n        {...rest}\n        onSubmit={(e) => {\n          e.preventDefault();\n          form.handleSubmit((values) => onSubmitForm(values, e));\n        }}\n      >\n        {children}\n      </form>\n    </FormProvider>\n  );\n};\n"],"mappings":";;;;;;;;;AAOA,MAAM,SAAS,EAAE,OAAO,EACtB,MAAM,EAAE,QAAQ,CAAC,IAAI,GAAG,aAAa,EACtC,CAAC;AAOF,MAAaA,sBAAmD,UAAU;CACxE,MAAM,mBAAmB,MAAM,UAAU;CAEzC,MAAM,OAAO,QAA0C;EACrD,UAAU,YAAY,iBAAwB;EAC9C,QAAQ,MAAM;EACf,CAAC;CAEF,MAAM,EAAE,UAAU,SAAU,GAAG,SAAS;CAExC,MAAM,gBACJ,QACA,UACG;AAEH,MADqB,iBAAiB,UAAU,OAAO,CACtC,QACf,YAAW,MAAM;;AAIrB,QACE,oBAAC;EAAa,GAAI;YAChB,oBAAC;GACC,GAAI;GACJ,WAAW,MAAM;AACf,MAAE,gBAAgB;AAClB,SAAK,cAAc,WAAW,aAAa,QAAQ,EAAE,CAAC;;GAGvD;IACI;GACM"}
+{"version":3,"file":"FormElementWrapper.mjs","names":["FormElementWrapper: FC<FormElementWrapperProps>"],"sources":["../../../../../src/components/Form/elements/FormElementWrapper.tsx"],"sourcesContent":["'use client';\n\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport type { FC, FormEvent, HTMLProps } from 'react';\nimport { FormProvider, useForm } from 'react-hook-form';\nimport { z } from 'zod/v4';\n\nconst Schema = z.object({\n  test: z.string().min(3, 'test error'),\n});\n\ntype FormElementWrapperProps = HTMLProps<HTMLFormElement> & {\n  schema?: z.ZodObject;\n  values?: z.infer<z.ZodObject>;\n};\n\nexport const FormElementWrapper: FC<FormElementWrapperProps> = (props) => {\n  const objectFormSchema = props.schema ?? Schema;\n\n  const form = useForm<z.infer<typeof objectFormSchema>>({\n    resolver: zodResolver(objectFormSchema as any),\n    values: props.values,\n  });\n\n  const { children, onSubmit, ...rest } = props;\n\n  const onSubmitForm = (\n    values: z.infer<typeof objectFormSchema>,\n    event: FormEvent<HTMLFormElement>\n  ) => {\n    const parsedValues = objectFormSchema.safeParse(values);\n    if (parsedValues.success) {\n      onSubmit?.(event);\n    }\n  };\n\n  return (\n    <FormProvider {...form}>\n      <form\n        {...rest}\n        onSubmit={(e) => {\n          e.preventDefault();\n          form.handleSubmit((values) => onSubmitForm(values, e));\n        }}\n      >\n        {children}\n      </form>\n    </FormProvider>\n  );\n};\n"],"mappings":";;;;;;;;;AAOA,MAAM,SAAS,EAAE,OAAO,EACtB,MAAM,EAAE,QAAQ,CAAC,IAAI,GAAG,aAAa,EACtC,CAAC;AAOF,MAAaA,sBAAmD,UAAU;CACxE,MAAM,mBAAmB,MAAM,UAAU;CAEzC,MAAM,OAAO,QAA0C;EACrD,UAAU,YAAY,iBAAwB;EAC9C,QAAQ,MAAM;EACf,CAAC;CAEF,MAAM,EAAE,UAAU,UAAU,GAAG,SAAS;CAExC,MAAM,gBACJ,QACA,UACG;AAEH,MADqB,iBAAiB,UAAU,OAAO,CACtC,QACf,YAAW,MAAM;;AAIrB,QACE,oBAAC;EAAa,GAAI;YAChB,oBAAC;GACC,GAAI;GACJ,WAAW,MAAM;AACf,MAAE,gBAAgB;AAClB,SAAK,cAAc,WAAW,aAAa,QAAQ,EAAE,CAAC;;GAGvD;IACI;GACM"}

package/dist/esm/components/Form/elements/InputPasswordElement.mjs

@@ -3,7 +3,7 @@ import { FormElement } from "./FormElement.mjs";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/Form/elements/InputPasswordElement.tsx
-const InputPasswordElement = ({ autoComplete,...props }) => /* @__PURE__ */ jsx(FormElement, {
+const InputPasswordElement = ({ autoComplete, ...props }) => /* @__PURE__ */ jsx(FormElement, {
 	Element: InputPassword,
 	id: props.name,
 	"data-testid": props.name,

package/dist/esm/components/Form/elements/InputPasswordElement.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"InputPasswordElement.mjs","names":["InputPasswordElement: FC<InputPasswordElementProps>"],"sources":["../../../../../src/components/Form/elements/InputPasswordElement.tsx"],"sourcesContent":["import type { ComponentProps, FC } from 'react';\nimport { InputPassword } from '../../Input';\nimport { FormElement, type FormElementProps } from './FormElement';\n\ntype InputPasswordElementProps = Omit<\n  FormElementProps<typeof InputPassword>,\n  'Element'\n> &\n  Omit<\n    ComponentProps<typeof InputPassword> & {\n      name: string;\n      autoComplete: 'current-password' | 'new-password';\n    },\n    'aria-label' | 'aria-labelledby'\n  >;\n\nexport const InputPasswordElement: FC<InputPasswordElementProps> = ({\n  autoComplete,\n  ...props\n}) => (\n  <FormElement\n    Element={InputPassword}\n    id={props.name}\n    data-testid={props.name}\n    aria-labelledby={props.label ? `${props.name}-label` : undefined}\n    aria-label={props.label ? undefined : props.name}\n    autoComplete={autoComplete}\n    minLength={6}\n    maxLength={255}\n    {...props}\n  />\n);\n"],"mappings":";;;;;AAgBA,MAAaA,wBAAuD,EAClE,aACA,GAAG,YAEH,oBAAC;CACC,SAAS;CACT,IAAI,MAAM;CACV,eAAa,MAAM;CACnB,mBAAiB,MAAM,QAAQ,GAAG,MAAM,KAAK,UAAU;CACvD,cAAY,MAAM,QAAQ,SAAY,MAAM;CAC9B;CACd,WAAW;CACX,WAAW;CACX,GAAI;EACJ"}
+{"version":3,"file":"InputPasswordElement.mjs","names":["InputPasswordElement: FC<InputPasswordElementProps>"],"sources":["../../../../../src/components/Form/elements/InputPasswordElement.tsx"],"sourcesContent":["import type { ComponentProps, FC } from 'react';\nimport { InputPassword } from '../../Input';\nimport { FormElement, type FormElementProps } from './FormElement';\n\ntype InputPasswordElementProps = Omit<\n  FormElementProps<typeof InputPassword>,\n  'Element'\n> &\n  Omit<\n    ComponentProps<typeof InputPassword> & {\n      name: string;\n      autoComplete: 'current-password' | 'new-password';\n    },\n    'aria-label' | 'aria-labelledby'\n  >;\n\nexport const InputPasswordElement: FC<InputPasswordElementProps> = ({\n  autoComplete,\n  ...props\n}) => (\n  <FormElement\n    Element={InputPassword}\n    id={props.name}\n    data-testid={props.name}\n    aria-labelledby={props.label ? `${props.name}-label` : undefined}\n    aria-label={props.label ? undefined : props.name}\n    autoComplete={autoComplete}\n    minLength={6}\n    maxLength={255}\n    {...props}\n  />\n);\n"],"mappings":";;;;;AAgBA,MAAaA,wBAAuD,EAClE,cACA,GAAG,YAEH,oBAAC;CACC,SAAS;CACT,IAAI,MAAM;CACV,eAAa,MAAM;CACnB,mBAAiB,MAAM,QAAQ,GAAG,MAAM,KAAK,UAAU;CACvD,cAAY,MAAM,QAAQ,SAAY,MAAM;CAC9B;CACd,WAAW;CACX,WAAW;CACX,GAAI;EACJ"}

package/dist/esm/components/Form/elements/MultiselectElement.mjs

@@ -9,29 +9,40 @@ import { jsx } from "react/jsx-runtime";
 import { useFormContext } from "react-hook-form";
 
 //#region src/components/Form/elements/MultiselectElement.tsx
-const MultiSelectElement = ({ name, description, label, isRequired, info, showErrorMessage, children,...props }) => {
+const MultiSelectFieldContent = ({ field, name, label, description, isRequired, info, showErrorMessage, children, ...props }) => {
+	const { error } = useFormField();
+	return /* @__PURE__ */ jsx(FormItemLayout, {
+		htmlFor: name,
+		label,
+		description,
+		isRequired,
+		info,
+		showErrorMessage,
+		"aria-invalid": !!error,
+		children: /* @__PURE__ */ jsx(MultiSelect, {
+			onValueChange: field.onChange,
+			values: field.value,
+			...props,
+			children
+		})
+	});
+};
+const MultiSelectElement = ({ name, description, label, isRequired, info, showErrorMessage, children, ...props }) => {
 	const { control } = useFormContext();
 	return /* @__PURE__ */ jsx(Form.Field, {
 		control,
 		name,
-		render: ({ field }) => {
-			const { error } = useFormField();
-			return /* @__PURE__ */ jsx(FormItemLayout, {
-				htmlFor: name,
-				label,
-				description,
-				isRequired,
-				info,
-				showErrorMessage,
-				"aria-invalid": !!error,
-				children: /* @__PURE__ */ jsx(MultiSelect, {
-					onValueChange: field.onChange,
-					values: field.value,
-					...props,
-					children
-				})
-			});
-		}
+		render: ({ field }) => /* @__PURE__ */ jsx(MultiSelectFieldContent, {
+			field,
+			name,
+			label,
+			description,
+			isRequired,
+			info,
+			showErrorMessage,
+			...props,
+			children
+		})
 	});
 };
 

package/dist/esm/components/Form/elements/MultiselectElement.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MultiselectElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/MultiselectElement.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentProps, ReactNode } from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { MultiSelect } from '../../Select/Multiselect';\nimport { Form } from '../Form';\nimport { useFormField } from '../FormField';\nimport { FormItemLayout } from '../layout/FormItemLayout';\nimport type { FormElementProps } from './FormElement';\n\ntype SelectElementsProps = Omit<\n  FormElementProps<typeof MultiSelect>,\n  'Element'\n> &\n  ComponentProps<typeof MultiSelect> & {\n    name: string;\n    description?: string;\n    placeholder?: string;\n    className?: string;\n    children?: ReactNode;\n  };\n\nexport const MultiSelectElement = ({\n  name,\n  description,\n  label,\n  isRequired,\n  info,\n  showErrorMessage,\n  children,\n  ...props\n}: SelectElementsProps) => {\n  const { control } = useFormContext();\n\n  return (\n    <Form.Field\n      control={control}\n      name={name}\n      render={({ field }) => {\n        const { error } = useFormField();\n\n        return (\n          <FormItemLayout\n            htmlFor={name}\n            label={label}\n            description={description}\n            isRequired={isRequired}\n            info={info}\n            showErrorMessage={showErrorMessage}\n            aria-invalid={!!error}\n          >\n            <MultiSelect\n              onValueChange={field.onChange}\n              values={field.value}\n              {...props}\n            >\n              {children}\n            </MultiSelect>\n          </FormItemLayout>\n        );\n      }}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;;AAsBA,MAAa,sBAAsB,EACjC,MACA,aACA,OACA,YACA,MACA,kBACA,SACA,GAAG,YACsB;CACzB,MAAM,EAAE,YAAY,gBAAgB;AAEpC,QACE,oBAAC,KAAK;EACK;EACH;EACN,SAAS,EAAE,YAAY;GACrB,MAAM,EAAE,UAAU,cAAc;AAEhC,UACE,oBAAC;IACC,SAAS;IACF;IACM;IACD;IACN;IACY;IAClB,gBAAc,CAAC,CAAC;cAEhB,oBAAC;KACC,eAAe,MAAM;KACrB,QAAQ,MAAM;KACd,GAAI;KAEH;MACW;KACC;;GAGrB"}
+{"version":3,"file":"MultiselectElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/MultiselectElement.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentProps, ReactNode } from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { MultiSelect } from '../../Select/Multiselect';\nimport { Form } from '../Form';\nimport { useFormField } from '../FormField';\nimport { FormItemLayout } from '../layout/FormItemLayout';\nimport type { FormElementProps } from './FormElement';\n\ntype SelectElementsProps = Omit<\n  FormElementProps<typeof MultiSelect>,\n  'Element'\n> &\n  ComponentProps<typeof MultiSelect> & {\n    name: string;\n    description?: string;\n    placeholder?: string;\n    className?: string;\n    children?: ReactNode;\n  };\n\nconst MultiSelectFieldContent = ({\n  field,\n  name,\n  label,\n  description,\n  isRequired,\n  info,\n  showErrorMessage,\n  children,\n  ...props\n}: Omit<SelectElementsProps, 'control'> & { field: any }) => {\n  const { error } = useFormField();\n\n  return (\n    <FormItemLayout\n      htmlFor={name}\n      label={label}\n      description={description}\n      isRequired={isRequired}\n      info={info}\n      showErrorMessage={showErrorMessage}\n      aria-invalid={!!error}\n    >\n      <MultiSelect\n        onValueChange={field.onChange}\n        values={field.value}\n        {...props}\n      >\n        {children}\n      </MultiSelect>\n    </FormItemLayout>\n  );\n};\n\nexport const MultiSelectElement = ({\n  name,\n  description,\n  label,\n  isRequired,\n  info,\n  showErrorMessage,\n  children,\n  ...props\n}: SelectElementsProps) => {\n  const { control } = useFormContext();\n\n  return (\n    <Form.Field\n      control={control}\n      name={name}\n      render={({ field }) => (\n        <MultiSelectFieldContent\n          field={field}\n          name={name}\n          label={label}\n          description={description}\n          isRequired={isRequired}\n          info={info}\n          showErrorMessage={showErrorMessage}\n          {...props}\n        >\n          {children}\n        </MultiSelectFieldContent>\n      )}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;;AAsBA,MAAM,2BAA2B,EAC/B,OACA,MACA,OACA,aACA,YACA,MACA,kBACA,UACA,GAAG,YACwD;CAC3D,MAAM,EAAE,UAAU,cAAc;AAEhC,QACE,oBAAC;EACC,SAAS;EACF;EACM;EACD;EACN;EACY;EAClB,gBAAc,CAAC,CAAC;YAEhB,oBAAC;GACC,eAAe,MAAM;GACrB,QAAQ,MAAM;GACd,GAAI;GAEH;IACW;GACC;;AAIrB,MAAa,sBAAsB,EACjC,MACA,aACA,OACA,YACA,MACA,kBACA,UACA,GAAG,YACsB;CACzB,MAAM,EAAE,YAAY,gBAAgB;AAEpC,QACE,oBAAC,KAAK;EACK;EACH;EACN,SAAS,EAAE,YACT,oBAAC;GACQ;GACD;GACC;GACM;GACD;GACN;GACY;GAClB,GAAI;GAEH;IACuB;GAE5B"}

package/dist/esm/components/Form/elements/OTPElement.mjs

@@ -0,0 +1,114 @@
+'use client';
+
+
+import { useItemSelector } from "../../../hooks/useItemSelector.mjs";
+import { InputIndicator, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from "../../Input/OTPInput.mjs";
+import { useFormField } from "../FormField.mjs";
+import { FormItemLayout } from "../layout/FormItemLayout.mjs";
+import { Form } from "../Form.mjs";
+import { useEffect, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useFormContext } from "react-hook-form";
+
+//#region src/components/Form/elements/OTPElement.tsx
+const selector = (option) => option?.getAttribute("aria-active") === "true";
+const OTPFieldContent = ({ field, name, label, description, isRequired, info, showErrorMessage, children, slots = 6, maxLength = 6, ...props }) => {
+	const { error } = useFormField();
+	const optionsRefs = useRef([]);
+	const indicatorRef = useRef(null);
+	const { choiceIndicatorPosition, calculatePosition } = useItemSelector(optionsRefs, {
+		selector,
+		isHoverable: true
+	});
+	useEffect(() => {
+		calculatePosition();
+	}, []);
+	return /* @__PURE__ */ jsx(FormItemLayout, {
+		htmlFor: name,
+		label,
+		description,
+		isRequired,
+		info,
+		showErrorMessage,
+		"aria-invalid": !!error,
+		children: /* @__PURE__ */ jsx(InputOTP, {
+			onChange: field.onChange,
+			defaultValue: field.value,
+			maxLength,
+			pattern: "^[0-9]+$",
+			onActiveSlotChange: calculatePosition,
+			...props,
+			children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				/* @__PURE__ */ jsxs(InputOTPGroup, { children: [
+					/* @__PURE__ */ jsx(InputOTPSlot, {
+						index: 0,
+						ref: (el) => {
+							optionsRefs.current[0] = el;
+						}
+					}),
+					/* @__PURE__ */ jsx(InputOTPSlot, {
+						index: 1,
+						ref: (el) => {
+							optionsRefs.current[1] = el;
+						}
+					}),
+					/* @__PURE__ */ jsx(InputOTPSlot, {
+						index: 2,
+						ref: (el) => {
+							optionsRefs.current[2] = el;
+						}
+					})
+				] }),
+				/* @__PURE__ */ jsx(InputOTPSeparator, {}),
+				/* @__PURE__ */ jsxs(InputOTPGroup, { children: [
+					/* @__PURE__ */ jsx(InputOTPSlot, {
+						index: 3,
+						ref: (el) => {
+							optionsRefs.current[3] = el;
+						}
+					}),
+					/* @__PURE__ */ jsx(InputOTPSlot, {
+						index: 4,
+						ref: (el) => {
+							optionsRefs.current[4] = el;
+						}
+					}),
+					/* @__PURE__ */ jsx(InputOTPSlot, {
+						index: 5,
+						ref: (el) => {
+							optionsRefs.current[5] = el;
+						}
+					})
+				] }),
+				choiceIndicatorPosition && /* @__PURE__ */ jsx(InputIndicator, {
+					style: choiceIndicatorPosition,
+					ref: indicatorRef
+				})
+			] })
+		})
+	});
+};
+const OTPElement = ({ name, description, label, isRequired, info, showErrorMessage, children, slots = 6, maxLength = 6, ...props }) => {
+	const { control } = useFormContext();
+	return /* @__PURE__ */ jsx(Form.Field, {
+		control,
+		name,
+		render: ({ field }) => /* @__PURE__ */ jsx(OTPFieldContent, {
+			field,
+			name,
+			label,
+			description,
+			isRequired,
+			info,
+			showErrorMessage,
+			slots,
+			maxLength,
+			...props,
+			children
+		})
+	});
+};
+
+//#endregion
+export { OTPElement };
+//# sourceMappingURL=OTPElement.mjs.map

package/dist/esm/components/Form/elements/OTPElement.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"OTPElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/OTPElement.tsx"],"sourcesContent":["'use client';\n\nimport { type ComponentProps, type ReactNode, useEffect, useRef } from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { useItemSelector } from '../../../hooks';\nimport {\n  InputIndicator,\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from '../../Input/OTPInput';\nimport { Form } from '../Form';\nimport { useFormField } from '../FormField';\nimport { FormItemLayout } from '../layout/FormItemLayout';\nimport type { FormElementProps } from './FormElement';\n\ntype OTPElementsProps = Omit<FormElementProps<typeof InputOTP>, 'Element'> &\n  Omit<ComponentProps<typeof InputOTP>, 'children'> & {\n    name: string;\n    description?: string;\n    placeholder?: string;\n    className?: string;\n    children?: ReactNode;\n    /** Number of OTP slots (default: 6) */\n    slots?: number;\n  };\n\nconst selector = (option: HTMLElement) =>\n  option?.getAttribute('aria-active') === 'true';\n\nconst OTPFieldContent = ({\n  field,\n  name,\n  label,\n  description,\n  isRequired,\n  info,\n  showErrorMessage,\n  children,\n  slots = 6,\n  maxLength = 6,\n  ...props\n}: Omit<OTPElementsProps, 'control'> & { field: any }) => {\n  const { error } = useFormField();\n\n  const optionsRefs = useRef<HTMLElement[]>([]);\n  const indicatorRef = useRef<HTMLDivElement | null>(null);\n  const { choiceIndicatorPosition, calculatePosition } = useItemSelector(\n    optionsRefs,\n    {\n      selector,\n      isHoverable: true,\n    }\n  );\n\n  useEffect(() => {\n    calculatePosition();\n  }, []);\n\n  return (\n    <FormItemLayout\n      htmlFor={name}\n      label={label}\n      description={description}\n      isRequired={isRequired}\n      info={info}\n      showErrorMessage={showErrorMessage}\n      aria-invalid={!!error}\n    >\n      <InputOTP\n        onChange={field.onChange}\n        defaultValue={field.value}\n        maxLength={maxLength}\n        pattern=\"^[0-9]+$\"\n        onActiveSlotChange={calculatePosition}\n        {...(props as any)}\n      >\n        {children ?? (\n          <>\n            <InputOTPGroup>\n              <InputOTPSlot\n                index={0}\n                ref={(el) => {\n                  optionsRefs.current[0] = el!;\n                }}\n              />\n              <InputOTPSlot\n                index={1}\n                ref={(el) => {\n                  optionsRefs.current[1] = el!;\n                }}\n              />\n              <InputOTPSlot\n                index={2}\n                ref={(el) => {\n                  optionsRefs.current[2] = el!;\n                }}\n              />\n            </InputOTPGroup>\n            <InputOTPSeparator />\n            <InputOTPGroup>\n              <InputOTPSlot\n                index={3}\n                ref={(el) => {\n                  optionsRefs.current[3] = el!;\n                }}\n              />\n              <InputOTPSlot\n                index={4}\n                ref={(el) => {\n                  optionsRefs.current[4] = el!;\n                }}\n              />\n              <InputOTPSlot\n                index={5}\n                ref={(el) => {\n                  optionsRefs.current[5] = el!;\n                }}\n              />\n            </InputOTPGroup>\n            {choiceIndicatorPosition && (\n              <InputIndicator\n                style={choiceIndicatorPosition}\n                ref={indicatorRef}\n              />\n            )}\n          </>\n        )}\n      </InputOTP>\n    </FormItemLayout>\n  );\n};\n\nexport const OTPElement = ({\n  name,\n  description,\n  label,\n  isRequired,\n  info,\n  showErrorMessage,\n  children,\n  slots = 6,\n  maxLength = 6,\n  ...props\n}: OTPElementsProps) => {\n  const { control } = useFormContext();\n\n  return (\n    <Form.Field\n      control={control}\n      name={name}\n      render={({ field }) => (\n        <OTPFieldContent\n          field={field}\n          name={name}\n          label={label}\n          description={description}\n          isRequired={isRequired}\n          info={info}\n          showErrorMessage={showErrorMessage}\n          slots={slots}\n          maxLength={maxLength}\n          {...props}\n        >\n          {children}\n        </OTPFieldContent>\n      )}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AA4BA,MAAM,YAAY,WAChB,QAAQ,aAAa,cAAc,KAAK;AAE1C,MAAM,mBAAmB,EACvB,OACA,MACA,OACA,aACA,YACA,MACA,kBACA,UACA,QAAQ,GACR,YAAY,GACZ,GAAG,YACqD;CACxD,MAAM,EAAE,UAAU,cAAc;CAEhC,MAAM,cAAc,OAAsB,EAAE,CAAC;CAC7C,MAAM,eAAe,OAA8B,KAAK;CACxD,MAAM,EAAE,yBAAyB,sBAAsB,gBACrD,aACA;EACE;EACA,aAAa;EACd,CACF;AAED,iBAAgB;AACd,qBAAmB;IAClB,EAAE,CAAC;AAEN,QACE,oBAAC;EACC,SAAS;EACF;EACM;EACD;EACN;EACY;EAClB,gBAAc,CAAC,CAAC;YAEhB,oBAAC;GACC,UAAU,MAAM;GAChB,cAAc,MAAM;GACT;GACX,SAAQ;GACR,oBAAoB;GACpB,GAAK;aAEJ,YACC;IACE,qBAAC;KACC,oBAAC;MACC,OAAO;MACP,MAAM,OAAO;AACX,mBAAY,QAAQ,KAAK;;OAE3B;KACF,oBAAC;MACC,OAAO;MACP,MAAM,OAAO;AACX,mBAAY,QAAQ,KAAK;;OAE3B;KACF,oBAAC;MACC,OAAO;MACP,MAAM,OAAO;AACX,mBAAY,QAAQ,KAAK;;OAE3B;QACY;IAChB,oBAAC,sBAAoB;IACrB,qBAAC;KACC,oBAAC;MACC,OAAO;MACP,MAAM,OAAO;AACX,mBAAY,QAAQ,KAAK;;OAE3B;KACF,oBAAC;MACC,OAAO;MACP,MAAM,OAAO;AACX,mBAAY,QAAQ,KAAK;;OAE3B;KACF,oBAAC;MACC,OAAO;MACP,MAAM,OAAO;AACX,mBAAY,QAAQ,KAAK;;OAE3B;QACY;IACf,2BACC,oBAAC;KACC,OAAO;KACP,KAAK;MACL;OAEH;IAEI;GACI;;AAIrB,MAAa,cAAc,EACzB,MACA,aACA,OACA,YACA,MACA,kBACA,UACA,QAAQ,GACR,YAAY,GACZ,GAAG,YACmB;CACtB,MAAM,EAAE,YAAY,gBAAgB;AAEpC,QACE,oBAAC,KAAK;EACK;EACH;EACN,SAAS,EAAE,YACT,oBAAC;GACQ;GACD;GACC;GACM;GACD;GACN;GACY;GACX;GACI;GACX,GAAI;GAEH;IACe;GAEpB"}

package/dist/esm/components/Form/elements/SearchInputElement.mjs

@@ -0,0 +1,17 @@
+import { SearchInput } from "../../Input/SearchInput.mjs";
+import { FormElement } from "./FormElement.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Form/elements/SearchInputElement.tsx
+const SearchInputElement = (props) => /* @__PURE__ */ jsx(FormElement, {
+	id: props.name,
+	"data-testid": props.name,
+	Element: SearchInput,
+	"aria-labelledby": props.label ? `${props.name}-label` : void 0,
+	"aria-label": props.label ? void 0 : props.name,
+	...props
+});
+
+//#endregion
+export { SearchInputElement };
+//# sourceMappingURL=SearchInputElement.mjs.map

package/dist/esm/components/Form/elements/SearchInputElement.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInputElement.mjs","names":["SearchInputElement: FC<SearchInputElementProps>"],"sources":["../../../../../src/components/Form/elements/SearchInputElement.tsx"],"sourcesContent":["import type { ComponentProps, FC } from 'react';\nimport { SearchInput } from '../../../components/Input';\nimport { FormElement, type FormElementProps } from './FormElement';\n\ntype SearchInputElementProps = Omit<\n  FormElementProps<typeof SearchInput>,\n  'Element'\n> &\n  Omit<\n    ComponentProps<typeof SearchInput> & {\n      name: string;\n    },\n    'aria-label' | 'aria-labelledby'\n  >;\n\nexport const SearchInputElement: FC<SearchInputElementProps> = (props) => (\n  <FormElement\n    id={props.name}\n    data-testid={props.name}\n    Element={SearchInput}\n    aria-labelledby={props.label ? `${props.name}-label` : undefined}\n    aria-label={props.label ? undefined : props.name}\n    {...props}\n  />\n);\n"],"mappings":";;;;;AAeA,MAAaA,sBAAmD,UAC9D,oBAAC;CACC,IAAI,MAAM;CACV,eAAa,MAAM;CACnB,SAAS;CACT,mBAAiB,MAAM,QAAQ,GAAG,MAAM,KAAK,UAAU;CACvD,cAAY,MAAM,QAAQ,SAAY,MAAM;CAC5C,GAAI;EACJ"}

package/dist/esm/components/Form/elements/SelectElement.mjs

@@ -9,29 +9,40 @@ import { jsx } from "react/jsx-runtime";
 import { useFormContext } from "react-hook-form";
 
 //#region src/components/Form/elements/SelectElement.tsx
-const SelectElement = ({ name, description, label, isRequired, info, showErrorMessage, children,...props }) => {
+const SelectFieldContent = ({ field, name, label, description, isRequired, info, showErrorMessage, children, ...props }) => {
+	const { error } = useFormField();
+	return /* @__PURE__ */ jsx(FormItemLayout, {
+		htmlFor: name,
+		label,
+		description,
+		isRequired,
+		info,
+		showErrorMessage,
+		"aria-invalid": !!error,
+		children: /* @__PURE__ */ jsx(Select, {
+			onValueChange: field.onChange,
+			defaultValue: field.value,
+			...props,
+			children
+		})
+	});
+};
+const SelectElement = ({ name, description, label, isRequired, info, showErrorMessage, children, ...props }) => {
 	const { control } = useFormContext();
 	return /* @__PURE__ */ jsx(Form.Field, {
 		control,
 		name,
-		render: ({ field }) => {
-			const { error } = useFormField();
-			return /* @__PURE__ */ jsx(FormItemLayout, {
-				htmlFor: name,
-				label,
-				description,
-				isRequired,
-				info,
-				showErrorMessage,
-				"aria-invalid": !!error,
-				children: /* @__PURE__ */ jsx(Select, {
-					onValueChange: field.onChange,
-					defaultValue: field.value,
-					...props,
-					children
-				})
-			});
-		}
+		render: ({ field }) => /* @__PURE__ */ jsx(SelectFieldContent, {
+			field,
+			name,
+			label,
+			description,
+			isRequired,
+			info,
+			showErrorMessage,
+			...props,
+			children
+		})
 	});
 };
 

package/dist/esm/components/Form/elements/SelectElement.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SelectElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/SelectElement.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentProps, ReactNode } from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { Select } from '../../Select/Select';\nimport { Form } from '../Form';\nimport { useFormField } from '../FormField';\nimport { FormItemLayout } from '../layout/FormItemLayout';\nimport type { FormElementProps } from './FormElement';\n\ntype SelectElementsProps = Omit<FormElementProps<typeof Select>, 'Element'> &\n  ComponentProps<typeof Select> & {\n    name: string;\n    description?: string;\n    placeholder?: string;\n    className?: string;\n    children?: ReactNode;\n  };\n\nexport const SelectElement = ({\n  name,\n  description,\n  label,\n  isRequired,\n  info,\n  showErrorMessage,\n  children,\n  ...props\n}: SelectElementsProps) => {\n  const { control } = useFormContext();\n\n  return (\n    <Form.Field\n      control={control}\n      name={name}\n      render={({ field }) => {\n        const { error } = useFormField();\n\n        return (\n          <FormItemLayout\n            htmlFor={name}\n            label={label}\n            description={description}\n            isRequired={isRequired}\n            info={info}\n            showErrorMessage={showErrorMessage}\n            aria-invalid={!!error}\n          >\n            <Select\n              onValueChange={field.onChange}\n              defaultValue={field.value}\n              {...props}\n            >\n              {children}\n            </Select>\n          </FormItemLayout>\n        );\n      }}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;;AAmBA,MAAa,iBAAiB,EAC5B,MACA,aACA,OACA,YACA,MACA,kBACA,SACA,GAAG,YACsB;CACzB,MAAM,EAAE,YAAY,gBAAgB;AAEpC,QACE,oBAAC,KAAK;EACK;EACH;EACN,SAAS,EAAE,YAAY;GACrB,MAAM,EAAE,UAAU,cAAc;AAEhC,UACE,oBAAC;IACC,SAAS;IACF;IACM;IACD;IACN;IACY;IAClB,gBAAc,CAAC,CAAC;cAEhB,oBAAC;KACC,eAAe,MAAM;KACrB,cAAc,MAAM;KACpB,GAAI;KAEH;MACM;KACM;;GAGrB"}
+{"version":3,"file":"SelectElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/SelectElement.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentProps, ReactNode } from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { Select } from '../../Select/Select';\nimport { Form } from '../Form';\nimport { useFormField } from '../FormField';\nimport { FormItemLayout } from '../layout/FormItemLayout';\nimport type { FormElementProps } from './FormElement';\n\ntype SelectElementsProps = Omit<FormElementProps<typeof Select>, 'Element'> &\n  ComponentProps<typeof Select> & {\n    name: string;\n    description?: string;\n    placeholder?: string;\n    className?: string;\n    children?: ReactNode;\n  };\n\nconst SelectFieldContent = ({\n  field,\n  name,\n  label,\n  description,\n  isRequired,\n  info,\n  showErrorMessage,\n  children,\n  ...props\n}: Omit<SelectElementsProps, 'control'> & { field: any }) => {\n  const { error } = useFormField();\n\n  return (\n    <FormItemLayout\n      htmlFor={name}\n      label={label}\n      description={description}\n      isRequired={isRequired}\n      info={info}\n      showErrorMessage={showErrorMessage}\n      aria-invalid={!!error}\n    >\n      <Select\n        onValueChange={field.onChange}\n        defaultValue={field.value}\n        {...props}\n      >\n        {children}\n      </Select>\n    </FormItemLayout>\n  );\n};\n\nexport const SelectElement = ({\n  name,\n  description,\n  label,\n  isRequired,\n  info,\n  showErrorMessage,\n  children,\n  ...props\n}: SelectElementsProps) => {\n  const { control } = useFormContext();\n\n  return (\n    <Form.Field\n      control={control}\n      name={name}\n      render={({ field }) => (\n        <SelectFieldContent\n          field={field}\n          name={name}\n          label={label}\n          description={description}\n          isRequired={isRequired}\n          info={info}\n          showErrorMessage={showErrorMessage}\n          {...props}\n        >\n          {children}\n        </SelectFieldContent>\n      )}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;;AAmBA,MAAM,sBAAsB,EAC1B,OACA,MACA,OACA,aACA,YACA,MACA,kBACA,UACA,GAAG,YACwD;CAC3D,MAAM,EAAE,UAAU,cAAc;AAEhC,QACE,oBAAC;EACC,SAAS;EACF;EACM;EACD;EACN;EACY;EAClB,gBAAc,CAAC,CAAC;YAEhB,oBAAC;GACC,eAAe,MAAM;GACrB,cAAc,MAAM;GACpB,GAAI;GAEH;IACM;GACM;;AAIrB,MAAa,iBAAiB,EAC5B,MACA,aACA,OACA,YACA,MACA,kBACA,UACA,GAAG,YACsB;CACzB,MAAM,EAAE,YAAY,gBAAgB;AAEpC,QACE,oBAAC,KAAK;EACK;EACH;EACN,SAAS,EAAE,YACT,oBAAC;GACQ;GACD;GACC;GACM;GACD;GACN;GACY;GAClB,GAAI;GAEH;IACkB;GAEvB"}