@intlayer/design-system 6.1.6 → 7.0.0-canary.0

package/dist/esm/components/Footer/index.mjs

@@ -0,0 +1,124 @@
+import { LogoWithTextBelow } from "../Logo/LogoWithTextBelow.mjs";
+import { SocialNetworks } from "../SocialNetworks/index.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/Footer/index.tsx
+/**
+* Footer Component
+*
+* A comprehensive footer component that displays the Intlayer logo, copyright information,
+* social networks, and organized groups of navigation links. Designed for responsive
+* layouts and optimal user experience across all devices.
+*
+* @component
+* @example
+* Basic usage without links:
+* ```tsx
+* <Footer />
+* ```
+*
+* @example
+* With organized link groups:
+* ```tsx
+* const footerLinks = [
+*   {
+*     title: 'Product',
+*     links: [
+*       { href: '/features', text: 'Features', label: 'Product features' },
+*       { href: '/pricing', text: 'Pricing', label: 'Pricing information' },
+*       { href: '/docs', text: 'Documentation', label: 'Product documentation' }
+*     ]
+*   },
+*   {
+*     title: 'Company',
+*     links: [
+*       { href: '/about', text: 'About Us', label: 'About the company' },
+*       { href: '/careers', text: 'Careers', label: 'Job opportunities' },
+*       { href: '/contact', text: 'Contact', label: 'Contact information' }
+*     ]
+*   }
+* ];
+*
+* <Footer links={footerLinks} />
+* ```
+*
+* @example
+* With custom click handlers:
+* ```tsx
+* const footerLinks = [
+*   {
+*     title: 'Actions',
+*     links: [
+*       {
+*         href: '#',
+*         text: 'Newsletter',
+*         label: 'Subscribe to newsletter',
+*         onClick: () => openNewsletterModal()
+*       }
+*     ]
+*   }
+* ];
+*
+* <Footer links={footerLinks} />
+* ```
+*
+* Features:
+* - Responsive design that adapts to different screen sizes
+* - Intlayer branding with logo and copyright notice
+* - Integrated social network links
+* - Flexible link organization with titled groups
+* - Accessibility-compliant with proper ARIA labels
+* - Support for custom click handlers alongside href navigation
+* - Clean, modern design with proper spacing and typography
+*
+* Layout Structure:
+* - Left side (or top on mobile): Logo, copyright, and social links
+* - Right side (or bottom on mobile): Organized link groups
+* - Responsive breakpoints for optimal mobile experience
+*
+* Accessibility:
+* - Semantic HTML structure using <footer> tag
+* - All links include required aria-label attributes
+* - Proper heading hierarchy and keyboard navigation
+* - Screen reader friendly content organization
+* - Focus management for interactive elements
+*
+* @param props - Component properties
+* @param props.links - Optional array of link groups to display
+*
+* @returns A rendered footer with branding, social links, and optional navigation links
+*/
+const Footer = ({ links }) => /* @__PURE__ */ jsxs("footer", {
+	className: "flex flex-auto flex-row flex-wrap items-center justify-around gap-10 p-6",
+	children: [/* @__PURE__ */ jsxs("aside", {
+		className: "flex flex-col items-center justify-between gap-3 md:w-1/4",
+		children: [
+			/* @__PURE__ */ jsx(LogoWithTextBelow, { className: "size-full max-w-[120px]" }),
+			/* @__PURE__ */ jsx("span", {
+				className: "text-center text-neutral text-xs",
+				children: "© 2025 Intlayer, Inc."
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex flex-row gap-3",
+				children: /* @__PURE__ */ jsx(SocialNetworks, {})
+			})
+		]
+	}), /* @__PURE__ */ jsx("div", {
+		className: "m-auto flex w-full flex-row flex-wrap justify-around gap-x-3 gap-y-6 md:w-2/3",
+		children: (links ?? []).map(({ title, links: links$1 }) => /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-2",
+			children: [/* @__PURE__ */ jsx("strong", { children: title }), /* @__PURE__ */ jsx("div", {
+				className: "flex flex-col gap-3 text-sm",
+				children: links$1.map((link) => /* @__PURE__ */ jsx("a", {
+					href: link.href,
+					"aria-label": link.label,
+					children: link.text
+				}, link.href))
+			})]
+		}, links$1.map((link) => link.href).join(",")))
+	})]
+});
+
+//#endregion
+export { Footer };
+//# sourceMappingURL=index.mjs.map

package/dist/esm/components/Footer/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["Footer: FC<FooterProps>","links"],"sources":["../../../../src/components/Footer/index.tsx"],"sourcesContent":["import type { FC, ReactNode } from 'react';\nimport { LogoWithTextBelow } from '../Logo';\nimport { SocialNetworks } from '../SocialNetworks';\n\n/**\n * Represents a single footer link with all necessary attributes\n */\nexport type FooterLink = {\n  /** URL or path for the link */\n  href: string;\n  /** Display text or JSX element for the link */\n  text: ReactNode;\n  /** Optional click handler for custom link behavior */\n  onClick?: () => void;\n  /** Accessible label for screen readers (required for accessibility) */\n  label: string;\n};\n\n/**\n * Represents a group of related links with a title\n */\nexport type LinkGroup = {\n  /** Title for the group of links */\n  title: ReactNode;\n  /** Array of footer links in this group */\n  links: FooterLink[];\n};\n\n/**\n * Props for the Footer component\n */\ntype FooterProps = {\n  /** Optional array of link groups to display in the footer */\n  links?: LinkGroup[];\n};\n\n/**\n * Footer Component\n *\n * A comprehensive footer component that displays the Intlayer logo, copyright information,\n * social networks, and organized groups of navigation links. Designed for responsive\n * layouts and optimal user experience across all devices.\n *\n * @component\n * @example\n * Basic usage without links:\n * ```tsx\n * <Footer />\n * ```\n *\n * @example\n * With organized link groups:\n * ```tsx\n * const footerLinks = [\n *   {\n *     title: 'Product',\n *     links: [\n *       { href: '/features', text: 'Features', label: 'Product features' },\n *       { href: '/pricing', text: 'Pricing', label: 'Pricing information' },\n *       { href: '/docs', text: 'Documentation', label: 'Product documentation' }\n *     ]\n *   },\n *   {\n *     title: 'Company',\n *     links: [\n *       { href: '/about', text: 'About Us', label: 'About the company' },\n *       { href: '/careers', text: 'Careers', label: 'Job opportunities' },\n *       { href: '/contact', text: 'Contact', label: 'Contact information' }\n *     ]\n *   }\n * ];\n *\n * <Footer links={footerLinks} />\n * ```\n *\n * @example\n * With custom click handlers:\n * ```tsx\n * const footerLinks = [\n *   {\n *     title: 'Actions',\n *     links: [\n *       {\n *         href: '#',\n *         text: 'Newsletter',\n *         label: 'Subscribe to newsletter',\n *         onClick: () => openNewsletterModal()\n *       }\n *     ]\n *   }\n * ];\n *\n * <Footer links={footerLinks} />\n * ```\n *\n * Features:\n * - Responsive design that adapts to different screen sizes\n * - Intlayer branding with logo and copyright notice\n * - Integrated social network links\n * - Flexible link organization with titled groups\n * - Accessibility-compliant with proper ARIA labels\n * - Support for custom click handlers alongside href navigation\n * - Clean, modern design with proper spacing and typography\n *\n * Layout Structure:\n * - Left side (or top on mobile): Logo, copyright, and social links\n * - Right side (or bottom on mobile): Organized link groups\n * - Responsive breakpoints for optimal mobile experience\n *\n * Accessibility:\n * - Semantic HTML structure using <footer> tag\n * - All links include required aria-label attributes\n * - Proper heading hierarchy and keyboard navigation\n * - Screen reader friendly content organization\n * - Focus management for interactive elements\n *\n * @param props - Component properties\n * @param props.links - Optional array of link groups to display\n *\n * @returns A rendered footer with branding, social links, and optional navigation links\n */\nexport const Footer: FC<FooterProps> = ({ links }) => (\n  <footer className=\"flex flex-auto flex-row flex-wrap items-center justify-around gap-10 p-6\">\n    <aside className=\"flex flex-col items-center justify-between gap-3 md:w-1/4\">\n      <LogoWithTextBelow className=\"size-full max-w-[120px]\" />\n      <span className=\"text-center text-neutral text-xs\">\n        © 2025 Intlayer, Inc.\n      </span>\n      <div className=\"flex flex-row gap-3\">\n        <SocialNetworks />\n      </div>\n    </aside>\n    <div className=\"m-auto flex w-full flex-row flex-wrap justify-around gap-x-3 gap-y-6 md:w-2/3\">\n      {(links ?? []).map(({ title, links }) => (\n        <div\n          className=\"flex flex-col gap-2\"\n          key={links.map((link) => link.href).join(',')}\n        >\n          <strong>{title}</strong>\n          <div className=\"flex flex-col gap-3 text-sm\">\n            {links.map((link) => (\n              <a key={link.href} href={link.href} aria-label={link.label}>\n                {link.text}\n              </a>\n            ))}\n          </div>\n        </div>\n      ))}\n    </div>\n  </footer>\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyHA,MAAaA,UAA2B,EAAE,YACxC,qBAAC;CAAO,WAAU;YAChB,qBAAC;EAAM,WAAU;;GACf,oBAAC,qBAAkB,WAAU,4BAA4B;GACzD,oBAAC;IAAK,WAAU;cAAmC;KAE5C;GACP,oBAAC;IAAI,WAAU;cACb,oBAAC,mBAAiB;KACd;;GACA,EACR,oBAAC;EAAI,WAAU;aACX,SAAS,EAAE,EAAE,KAAK,EAAE,OAAO,qBAC3B,qBAAC;GACC,WAAU;cAGV,oBAAC,sBAAQ,QAAe,EACxB,oBAAC;IAAI,WAAU;cACZC,QAAM,KAAK,SACV,oBAAC;KAAkB,MAAM,KAAK;KAAM,cAAY,KAAK;eAClD,KAAK;OADA,KAAK,KAET,CACJ;KACE;KATDA,QAAM,KAAK,SAAS,KAAK,KAAK,CAAC,KAAK,IAAI,CAUzC,CACN;GACE;EACC"}

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

@@ -0,0 +1,62 @@
+import { Button } from "../Button/Button.mjs";
+import { FormItem } from "./FormItem.mjs";
+import { FormField } from "./FormField.mjs";
+import { FormLabelLayout } from "./layout/FormLabelLayout.mjs";
+import { FormElement } from "./elements/FormElement.mjs";
+import { EditableFieldInputElement } from "./elements/EditableFieldInputElement.mjs";
+import { EditableFieldTextAreaElement } from "./elements/EditableFieldTextAreaElement.mjs";
+import { InputElement } from "./elements/InputElement.mjs";
+import { InputPasswordElement } from "./elements/InputPasswordElement.mjs";
+import { TextAreaElement } from "./elements/TextAreaElement.mjs";
+import { AutoSizedTextAreaElement } from "./elements/AutoSizeTextAreaElement.mjs";
+import { CheckboxElement } from "./elements/CheckboxElement.mjs";
+import { MultiSelectElement } from "./elements/MultiselectElement.mjs";
+import { SelectElement } from "./elements/SelectElement.mjs";
+import { SwitchSelectorElement } from "./elements/SwitchSelectorElement.mjs";
+import { Form as Form$1 } from "./FormBase.mjs";
+import { FormControl } from "./FormControl.mjs";
+import { FormDescription } from "./FormDescription.mjs";
+import { FormMessage } from "./FormMessage.mjs";
+
+//#region src/components/Form/Form.tsx
+/**
+* Form components
+*
+* Example of usage:
+* ```jsx
+* <Form
+*  schema={ZodSchema}
+*  onSubmitSuccess={onSubmitSuccess}
+*  onSubmitError={onSubmitError}
+*  autoComplete
+* >
+*   <Form.Input name="name" label="Name" />
+*   <Form.Button type="submit" label="Click to submit">
+*      Submit
+*   </Form.Button>
+* </Form>
+* ```
+*/
+const Form = Form$1;
+Form.Description = FormDescription;
+Form.Control = FormControl;
+Form.Field = FormField;
+Form.Item = FormItem;
+Form.Label = FormLabelLayout;
+Form.Message = FormMessage;
+Form.Element = FormElement;
+Form.Input = InputElement;
+Form.InputPassword = InputPasswordElement;
+Form.Checkbox = CheckboxElement;
+Form.TextArea = TextAreaElement;
+Form.AutoSizedTextArea = AutoSizedTextAreaElement;
+Form.Button = Button;
+Form.Select = SelectElement;
+Form.MultiSelect = MultiSelectElement;
+Form.EditableFieldInput = EditableFieldInputElement;
+Form.EditableFieldTextArea = EditableFieldTextAreaElement;
+Form.SwitchSelector = SwitchSelectorElement;
+
+//#endregion
+export { Form };
+//# sourceMappingURL=Form.mjs.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,51 @@
+'use client';
+
+
+import { cn } from "../../utils/cn.mjs";
+import { jsx } from "react/jsx-runtime";
+import { FormProvider, useForm as useForm$1 } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+
+//#region src/components/Form/FormBase.tsx
+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 onSubmit = async (values) => {
+		const parsedValues = schema?.safeParse(values) ?? {
+			success: true,
+			data: void 0
+		};
+		await awaitFunction(onSubmitProp?.(values));
+		if (parsedValues.success) await awaitFunction(onSubmitSuccessProp?.(parsedValues.data));
+		else await awaitFunction(onSubmitErrorProp?.(new Error(parsedValues.error.issues.map((error) => error.message).join(", "))));
+	};
+	return /* @__PURE__ */ jsx(FormProvider, {
+		...props,
+		children: /* @__PURE__ */ jsx("form", {
+			className: cn("flex size-full flex-col gap-y-6", className),
+			onSubmit: props.handleSubmit(onSubmit),
+			autoComplete: autoComplete ? "on" : "off",
+			noValidate: true,
+			children
+		})
+	});
+};
+const useForm = (schema, props) => {
+	const form = useForm$1({
+		resolver: zodResolver(schema),
+		...props
+	});
+	return {
+		form,
+		isSubmitting: form.formState.isSubmitting,
+		isSubmitted: form.formState.isSubmitted,
+		isLoading: form.formState.isLoading,
+		isValid: form.formState.isValid
+	};
+};
+
+//#endregion
+export { Form, useForm };
+//# sourceMappingURL=FormBase.mjs.map

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

@@ -0,0 +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} 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 = form.formState.isSubmitting;\n  const isSubmitted = form.formState.isSubmitted;\n  const isLoading = form.formState.isLoading;\n  const isValid = form.formState.isValid;\n\n  return {\n    form,\n    isSubmitting,\n    isSubmitted,\n    isLoading,\n    isValid,\n  };\n};\n"],"mappings":";;;;;;;;;AAsBA,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;AAOF,QAAO;EACL;EACA,cAPmB,KAAK,UAAU;EAQlC,aAPkB,KAAK,UAAU;EAQjC,WAPgB,KAAK,UAAU;EAQ/B,SAPc,KAAK,UAAU;EAQ9B"}

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

@@ -0,0 +1,21 @@
+'use client';
+
+
+import { useFormField } from "./FormField.mjs";
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+
+//#region src/components/Form/FormControl.tsx
+const FormControl = (props) => {
+	const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+	return /* @__PURE__ */ jsx(Slot, {
+		id: formItemId,
+		"aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
+		"aria-invalid": !!error,
+		...props
+	});
+};
+
+//#endregion
+export { FormControl };
+//# sourceMappingURL=FormControl.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormControl.mjs","names":["FormControl: FC<ComponentProps<typeof Slot>>"],"sources":["../../../../src/components/Form/FormControl.tsx"],"sourcesContent":["'use client';\n\nimport { Slot } from '@radix-ui/react-slot';\nimport type { ComponentProps, FC } from 'react';\nimport { useFormField } from './FormField';\n\nexport const FormControl: FC<ComponentProps<typeof Slot>> = (props) => {\n  const { error, formItemId, formDescriptionId, formMessageId } =\n    useFormField();\n\n  return (\n    <Slot\n      id={formItemId}\n      aria-describedby={\n        !error\n          ? `${formDescriptionId}`\n          : `${formDescriptionId} ${formMessageId}`\n      }\n      aria-invalid={!!error}\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;;;;;;AAMA,MAAaA,eAAgD,UAAU;CACrE,MAAM,EAAE,OAAO,YAAY,mBAAmB,kBAC5C,cAAc;AAEhB,QACE,oBAAC;EACC,IAAI;EACJ,oBACE,CAAC,QACG,GAAG,sBACH,GAAG,kBAAkB,GAAG;EAE9B,gBAAc,CAAC,CAAC;EAChB,GAAI;GACJ"}

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

@@ -0,0 +1,19 @@
+'use client';
+
+
+import { useFormField } from "./FormField.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Form/FormDescription.tsx
+const FormDescription = (props) => {
+	const { formDescriptionId } = useFormField();
+	return /* @__PURE__ */ jsx("p", {
+		className: "text-neutral text-sm",
+		id: formDescriptionId,
+		...props
+	});
+};
+
+//#endregion
+export { FormDescription };
+//# sourceMappingURL=FormDescription.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormDescription.mjs","names":["FormDescription: FC<HTMLAttributes<HTMLParagraphElement>>"],"sources":["../../../../src/components/Form/FormDescription.tsx"],"sourcesContent":["'use client';\n\nimport type { FC, HTMLAttributes } from 'react';\nimport { useFormField } from './FormField';\n\nexport const FormDescription: FC<HTMLAttributes<HTMLParagraphElement>> = (\n  props\n) => {\n  const { formDescriptionId } = useFormField();\n\n  return (\n    <p className=\"text-neutral text-sm\" id={formDescriptionId} {...props} />\n  );\n};\n"],"mappings":";;;;;;;AAKA,MAAaA,mBACX,UACG;CACH,MAAM,EAAE,sBAAsB,cAAc;AAE5C,QACE,oBAAC;EAAE,WAAU;EAAuB,IAAI;EAAmB,GAAI;GAAS"}

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

@@ -0,0 +1,36 @@
+'use client';
+
+
+import { FormItemContext } from "./FormItem.mjs";
+import { createContext, useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Controller, useFormContext } from "react-hook-form";
+
+//#region src/components/Form/FormField.tsx
+const FormFieldContext = createContext({});
+const FormField = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(FormFieldContext, {
+		value: useMemo(() => ({ name: props.name }), [props.name]),
+		children: /* @__PURE__ */ jsx(Controller, { ...props })
+	});
+};
+const useFormField = () => {
+	const fieldContext = useContext(FormFieldContext);
+	const itemContext = useContext(FormItemContext);
+	const { getFieldState, formState } = useFormContext();
+	const fieldState = getFieldState(fieldContext.name, formState);
+	if (!fieldContext) throw new Error("useFormField should be used within <FormField>");
+	const { id } = itemContext;
+	return {
+		id,
+		name: fieldContext.name,
+		formItemId: `${id}-form-item`,
+		formDescriptionId: `${id}-form-item-description`,
+		formMessageId: `${id}-form-item-message`,
+		...fieldState
+	};
+};
+
+//#endregion
+export { FormField, useFormField };
+//# sourceMappingURL=FormField.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormField.mjs","names":[],"sources":["../../../../src/components/Form/FormField.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, useContext, useMemo } from 'react';\nimport {\n  Controller,\n  type ControllerProps,\n  type FieldPath,\n  type FieldValues,\n  useFormContext,\n} from 'react-hook-form';\nimport { FormItemContext } from './FormItem';\n\ntype FormFieldContextValue<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = {\n  name: TName;\n};\n\nconst FormFieldContext = createContext<FormFieldContextValue>(\n  {} as FormFieldContextValue\n);\n\nexport const FormField = <\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({\n  ...props\n}: ControllerProps<TFieldValues, TName>) => {\n  const memoValue = useMemo(\n    () => ({\n      name: props.name,\n    }),\n    [props.name]\n  );\n\n  return (\n    <FormFieldContext value={memoValue}>\n      <Controller {...props} />\n    </FormFieldContext>\n  );\n};\n\nexport const useFormField = () => {\n  const fieldContext = useContext(FormFieldContext);\n  const itemContext = useContext(FormItemContext);\n  const { getFieldState, formState } = useFormContext();\n\n  const fieldState = getFieldState(fieldContext.name, formState);\n\n  if (!fieldContext) {\n    throw new Error('useFormField should be used within <FormField>');\n  }\n\n  const { id } = itemContext;\n\n  return {\n    id,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  };\n};\n"],"mappings":";;;;;;;;;AAmBA,MAAM,mBAAmB,cACvB,EAAE,CACH;AAED,MAAa,aAGX,EACA,GAAG,YACuC;AAQ1C,QACE,oBAAC;EAAiB,OARF,eACT,EACL,MAAM,MAAM,MACb,GACD,CAAC,MAAM,KAAK,CACb;YAIG,oBAAC,cAAW,GAAI,QAAS;GACR;;AAIvB,MAAa,qBAAqB;CAChC,MAAM,eAAe,WAAW,iBAAiB;CACjD,MAAM,cAAc,WAAW,gBAAgB;CAC/C,MAAM,EAAE,eAAe,cAAc,gBAAgB;CAErD,MAAM,aAAa,cAAc,aAAa,MAAM,UAAU;AAE9D,KAAI,CAAC,aACH,OAAM,IAAI,MAAM,iDAAiD;CAGnE,MAAM,EAAE,OAAO;AAEf,QAAO;EACL;EACA,MAAM,aAAa;EACnB,YAAY,GAAG,GAAG;EAClB,mBAAmB,GAAG,GAAG;EACzB,eAAe,GAAG,GAAG;EACrB,GAAG;EACJ"}

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

@@ -0,0 +1,24 @@
+'use client';
+
+
+import { createContext, useId, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Form/FormItem.tsx
+const FormItem = ({ id: idProp,...props }) => {
+	const generatedId = useId();
+	const stableId = idProp ?? generatedId;
+	return /* @__PURE__ */ jsx(FormItemContext, {
+		value: useMemo(() => ({ id: stableId }), [stableId]),
+		children: /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col gap-2 p-2",
+			id: stableId,
+			...props
+		})
+	});
+};
+const FormItemContext = createContext({});
+
+//#endregion
+export { FormItem, FormItemContext };
+//# sourceMappingURL=FormItem.mjs.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,21 @@
+'use client';
+
+
+import { cn } from "../../utils/cn.mjs";
+import { useFormField } from "./FormField.mjs";
+import { Label } from "../Label/index.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Form/FormLabel.tsx
+const FormLabel = ({ className,...props }) => {
+	const { error, formItemId } = useFormField();
+	return /* @__PURE__ */ jsx(Label, {
+		className: cn("mb-2", error && "text-error", className),
+		htmlFor: formItemId,
+		...props
+	});
+};
+
+//#endregion
+export { FormLabel };
+//# sourceMappingURL=FormLabel.mjs.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,23 @@
+'use client';
+
+
+import { useFormField } from "./FormField.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Form/FormMessage.tsx
+const FormMessage = ({ children,...props }) => {
+	const { error, formMessageId } = useFormField();
+	const body = error ? String(error?.message ?? "") : children;
+	if (!body) return null;
+	return /* @__PURE__ */ jsx("p", {
+		className: "font-medium text-error text-xs",
+		role: "alert",
+		id: formMessageId,
+		...props,
+		children: body
+	});
+};
+
+//#endregion
+export { FormMessage };
+//# sourceMappingURL=FormMessage.mjs.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,15 @@
+import { FormElement } from "./FormElement.mjs";
+import { AutoSizedTextArea } from "../../TextArea/AutoSizeTextArea.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Form/elements/AutoSizeTextAreaElement.tsx
+const AutoSizedTextAreaElement = (props) => /* @__PURE__ */ jsx(FormElement, {
+	Element: AutoSizedTextArea,
+	id: props.name,
+	"data-testid": props.name,
+	...props
+});
+
+//#endregion
+export { AutoSizedTextAreaElement };
+//# sourceMappingURL=AutoSizeTextAreaElement.mjs.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,22 @@
+import { Checkbox } from "../../Input/Checkbox.mjs";
+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, {
+	...props,
+	label: inputLabel
+});
+const CheckboxElement = ({ autoComplete,...props }) => /* @__PURE__ */ jsx(FormElement, {
+	Element: CheckboxComponent,
+	id: props.name,
+	"data-testid": props.name,
+	autoComplete,
+	minLength: 6,
+	maxLength: 255,
+	...props
+});
+
+//#endregion
+export { CheckboxElement };
+//# sourceMappingURL=CheckboxElement.mjs.map

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

@@ -0,0 +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"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"EditableFieldInputElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/EditableFieldInputElement.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from 'react';\nimport { EditableFieldInput } from '../../EditableField/EditableFieldInput';\nimport { FormElement, type FormElementProps } from './FormElement';\n\ntype EditableFieldInputElementProps = Omit<\n  FormElementProps<typeof EditableFieldInput>,\n  'Element'\n> &\n  Omit<\n    ComponentProps<typeof EditableFieldInput> & {\n      name: string;\n      description?: ReactNode;\n      placeholder?: string;\n      className?: string;\n      children?: ReactNode;\n    },\n    'aria-label' | 'aria-labelledby'\n  >;\n\nexport const EditableFieldInputElement = (\n  props: EditableFieldInputElementProps\n) => (\n  <FormElement\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    Element={EditableFieldInput}\n    {...props}\n  />\n);\n"],"mappings":";;;;;AAmBA,MAAa,6BACX,UAEA,oBAAC;CACC,IAAI,MAAM;CACV,eAAa,MAAM;CACnB,mBAAiB,MAAM,QAAQ,GAAG,MAAM,KAAK,UAAU;CACvD,cAAY,MAAM,QAAQ,SAAY,MAAM;CAC5C,SAAS;CACT,GAAI;EACJ"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"EditableFieldTextAreaElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/EditableFieldTextAreaElement.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from 'react';\nimport { EditableFieldTextArea } from '../../EditableField/EditableFieldTextArea';\nimport { FormElement, type FormElementProps } from './FormElement';\n\ntype EditableFieldTextAreaElementProps = Omit<\n  FormElementProps<typeof EditableFieldTextArea>,\n  'Element'\n> &\n  Omit<\n    ComponentProps<typeof EditableFieldTextArea> & {\n      name: string;\n      description?: ReactNode;\n      placeholder?: string;\n      className?: string;\n      children?: ReactNode;\n    },\n    'aria-label' | 'aria-labelledby'\n  >;\n\nexport const EditableFieldTextAreaElement = (\n  props: EditableFieldTextAreaElementProps\n) => (\n  <FormElement\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    Element={EditableFieldTextArea}\n    {...props}\n  />\n);\n"],"mappings":";;;;;AAmBA,MAAa,gCACX,UAEA,oBAAC;CACC,IAAI,MAAM;CACV,eAAa,MAAM;CACnB,mBAAiB,MAAM,QAAQ,GAAG,MAAM,KAAK,UAAU;CACvD,cAAY,MAAM,QAAQ,SAAY,MAAM;CAC5C,SAAS;CACT,GAAI;EACJ"}

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

@@ -0,0 +1,60 @@
+'use client';
+
+
+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/FormElement.tsx
+const FormFieldElement = ({ field, name, label, Element, isRequired = false, info, description, showErrorMessage = true,...props }) => {
+	const { error } = useFormField();
+	const { value: fieldValue, onChange: fieldOnChange,...fieldRest } = field ?? {};
+	const propsAny = props;
+	const mergedValue = propsAny.value !== void 0 ? propsAny.value : fieldValue ?? "";
+	const mergedOnChange = (...args) => {
+		if (typeof fieldOnChange === "function") fieldOnChange(...args);
+		if (typeof propsAny.onChange === "function") propsAny.onChange(...args);
+	};
+	return /* @__PURE__ */ jsx(FormItemLayout, {
+		htmlFor: name,
+		label,
+		description,
+		isRequired,
+		info,
+		showErrorMessage,
+		"aria-invalid": !!error,
+		children: /* @__PURE__ */ jsx(Element, {
+			"data-testid": "element",
+			id: name,
+			...fieldRest,
+			...props,
+			value: mergedValue,
+			onChange: mergedOnChange,
+			children: props.children
+		})
+	});
+};
+/**
+* FormElement is a component that allows you to create a form element with a label, description, error message, and validation.
+*
+* The Element prop is the type of the element that will be rendered.
+* This element will interact with the FormContext and will be controlled by the FormControl component.
+* The props used to control the element will be `value` and `onChange`.
+*/
+const FormElement = (props) => {
+	const { control } = useFormContext();
+	return /* @__PURE__ */ jsx(Form.Field, {
+		control,
+		name: props.name,
+		render: ({ field }) => /* @__PURE__ */ jsx(FormFieldElement, {
+			...props,
+			field
+		})
+	});
+};
+
+//#endregion
+export { FormElement };
+//# sourceMappingURL=FormElement.mjs.map

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

@@ -0,0 +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"}