@skybin-tech/nebula-ui 0.0.26 → 0.0.28

package/dist/components/Form/Checkbox.js

@@ -1,146 +1,132 @@
 "use client";
-import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef, useId, useContext, useEffect } from "react";
-import { useFormContext, useController } from "react-hook-form";
-import { cva } from "class-variance-authority";
+"use client";
 import { cn } from "../../utils/cn.js";
 import { FormConfigContext } from "./context.js";
-import { Checkbox as Checkbox$1 } from "../../primitives/checkbox.js";
 import { Label } from "../../primitives/label.js";
-const checkboxSizeVariants = cva(
-  "",
-  {
-    variants: {
-      size: {
-        sm: "h-4 w-4",
-        md: "h-5 w-5",
-        lg: "h-6 w-6"
-      }
-    },
-    defaultVariants: {
-      size: "md"
-    }
-  }
-);
-const labelVariants = cva(
-  "text-sm font-medium cursor-pointer select-none",
-  {
-    variants: {
-      required: {
-        true: "after:content-['*'] after:ml-0.5 after:text-destructive",
-        false: ""
-      },
-      disabled: {
-        true: "cursor-not-allowed opacity-50",
-        false: ""
-      }
-    },
-    defaultVariants: {
-      required: false,
-      disabled: false
-    }
-  }
-);
-function CheckboxInner({
-  name,
-  label,
-  helperText,
-  showError = true,
-  error: customError,
-  size,
-  variant,
-  className,
-  disabled,
-  id: providedId,
-  control: externalControl,
-  // Validation props
-  required,
-  validate,
-  ...props
-}, ref) {
-  const generatedId = useId();
-  const inputId = providedId ?? generatedId;
-  const formConfigContext = useContext(FormConfigContext);
-  const formConfig = formConfigContext ?? {};
-  const rhfContext = useFormContext();
-  const control = externalControl ?? rhfContext?.control;
-  useEffect(() => {
-    if (formConfigContext?.registerFieldValidation) {
-      const rules = {};
-      if (required !== void 0) rules.required = required;
-      if (validate !== void 0) rules.validate = validate;
-      formConfigContext.registerFieldValidation({
-        name,
-        type: "boolean",
-        rules
-      });
-      return () => {
-        formConfigContext.unregisterFieldValidation(name);
-      };
-    }
-  }, [formConfigContext, name, required, validate]);
-  const { field, fieldState } = useController({
-    name,
-    control
-  });
-  const fieldError = fieldState.error?.message;
-  const errorMessage = customError ?? fieldError;
-  const hasError = !!errorMessage;
-  const effectiveSize = size ?? formConfig.size ?? "md";
-  const effectiveDisabled = disabled ?? formConfig.disabled;
-  const effectiveVariant = hasError ? "error" : variant;
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx(
-        Checkbox$1,
-        {
-          ...props,
-          ref,
-          id: inputId,
-          checked: field.value ?? false,
-          onCheckedChange: (checked) => field.onChange(checked === true),
-          onBlur: field.onBlur,
-          disabled: effectiveDisabled,
-          "aria-invalid": hasError,
-          "aria-describedby": hasError ? `${inputId}-error` : helperText ? `${inputId}-helper` : void 0,
-          className: cn(
-            checkboxSizeVariants({ size: effectiveSize }),
-            effectiveVariant === "error" && "border-destructive",
-            className
-          )
-        }
-      ),
-      label && /* @__PURE__ */ jsx(
-        Label,
-        {
-          htmlFor: inputId,
-          className: labelVariants({ required: !!required, disabled: effectiveDisabled }),
-          children: label
-        }
-      )
-    ] }),
-    showError && hasError && /* @__PURE__ */ jsx(
-      "p",
-      {
-        id: `${inputId}-error`,
-        className: "text-sm text-destructive ml-7",
-        role: "alert",
-        children: errorMessage
-      }
-    ),
-    helperText && !hasError && /* @__PURE__ */ jsx(
-      "p",
-      {
-        id: `${inputId}-helper`,
-        className: "text-sm text-muted-foreground ml-7",
-        children: helperText
-      }
-    )
-  ] });
+import { Checkbox as Checkbox$1 } from "../../primitives/checkbox.js";
+import { forwardRef, useContext, useEffect, useId } from "react";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useController, useFormContext } from "react-hook-form";
+//#region src/components/Form/Checkbox.tsx
+var checkboxSizeVariants = cva("", {
+	variants: { size: {
+		sm: "h-4 w-4",
+		md: "h-5 w-5",
+		lg: "h-6 w-6"
+	} },
+	defaultVariants: { size: "md" }
+});
+var labelVariants = cva("text-sm font-medium cursor-pointer select-none", {
+	variants: {
+		required: {
+			true: "after:content-['*'] after:ml-0.5 after:text-destructive",
+			false: ""
+		},
+		disabled: {
+			true: "cursor-not-allowed opacity-50",
+			false: ""
+		}
+	},
+	defaultVariants: {
+		required: false,
+		disabled: false
+	}
+});
+/**
+* Checkbox component with form integration
+* 
+* This is a wrapper around the shadcn/ui Checkbox primitive that adds:
+* - Form integration with react-hook-form
+* - Automatic validation registration
+* - Label, helper text, and error message support
+* 
+* @example
+* ```tsx
+* // Inside a Form component
+* <Checkbox name="terms" label="I agree to the terms and conditions" required />
+* <Checkbox name="newsletter" label="Subscribe to newsletter" />
+* ```
+*/
+function CheckboxInner({ name, label, helperText, showError = true, error: customError, size, variant, className, disabled, id: providedId, control: externalControl, required, validate, ...props }, ref) {
+	const generatedId = useId();
+	const inputId = providedId ?? generatedId;
+	const formConfigContext = useContext(FormConfigContext);
+	const formConfig = formConfigContext ?? {};
+	const rhfContext = useFormContext();
+	const control = externalControl ?? rhfContext?.control;
+	useEffect(() => {
+		if (formConfigContext?.registerFieldValidation) {
+			const rules = {};
+			if (required !== void 0) rules.required = required;
+			if (validate !== void 0) rules.validate = validate;
+			formConfigContext.registerFieldValidation({
+				name,
+				type: "boolean",
+				rules
+			});
+			return () => {
+				formConfigContext.unregisterFieldValidation(name);
+			};
+		}
+	}, [
+		formConfigContext,
+		name,
+		required,
+		validate
+	]);
+	const { field, fieldState } = useController({
+		name,
+		control
+	});
+	const fieldError = fieldState.error?.message;
+	const errorMessage = customError ?? fieldError;
+	const hasError = !!errorMessage;
+	const effectiveSize = size ?? formConfig.size ?? "md";
+	const effectiveDisabled = disabled ?? formConfig.disabled;
+	const effectiveVariant = hasError ? "error" : variant;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-1.5",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx(Checkbox$1, {
+					...props,
+					ref,
+					id: inputId,
+					checked: field.value ?? false,
+					onCheckedChange: (checked) => field.onChange(checked === true),
+					onBlur: field.onBlur,
+					disabled: effectiveDisabled,
+					"aria-invalid": hasError,
+					"aria-describedby": hasError ? `${inputId}-error` : helperText ? `${inputId}-helper` : void 0,
+					className: cn(checkboxSizeVariants({ size: effectiveSize }), effectiveVariant === "error" && "border-destructive", className)
+				}), label && /* @__PURE__ */ jsx(Label, {
+					htmlFor: inputId,
+					className: labelVariants({
+						required: !!required,
+						disabled: effectiveDisabled
+					}),
+					children: label
+				})]
+			}),
+			showError && hasError && /* @__PURE__ */ jsx("p", {
+				id: `${inputId}-error`,
+				className: "text-sm text-destructive ml-7",
+				role: "alert",
+				children: errorMessage
+			}),
+			helperText && !hasError && /* @__PURE__ */ jsx("p", {
+				id: `${inputId}-helper`,
+				className: "text-sm text-muted-foreground ml-7",
+				children: helperText
+			})
+		]
+	});
 }
-const Checkbox = forwardRef(CheckboxInner);
+var Checkbox = forwardRef(CheckboxInner);
 Checkbox.displayName = "Checkbox";
-export {
-  Checkbox
-};
-//# sourceMappingURL=Checkbox.js.map
+//#endregion
+export { Checkbox };
+
+//# sourceMappingURL=Checkbox.js.map

package/dist/components/Form/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Form/Checkbox.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, useId, useContext, useEffect } from \"react\";\nimport type { ReactNode, ComponentPropsWithoutRef } from \"react\";\nimport { useController, useFormContext as useRHFFormContext, type FieldValues, type FieldPath, type Control } from \"react-hook-form\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../utils/cn\";\nimport { FormConfigContext, type FormConfig, type FieldValidationRules } from \"../Form/context\";\nimport { Checkbox as ShadcnCheckbox } from \"../../primitives/checkbox\";\nimport { Label } from \"../../primitives/label\";\nimport type * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\n\nconst checkboxSizeVariants = cva(\n  \"\",\n  {\n    variants: {\n      size: {\n        sm: \"h-4 w-4\",\n        md: \"h-5 w-5\",\n        lg: \"h-6 w-6\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n);\n\nconst labelVariants = cva(\n  \"text-sm font-medium cursor-pointer select-none\",\n  {\n    variants: {\n      required: {\n        true: \"after:content-['*'] after:ml-0.5 after:text-destructive\",\n        false: \"\",\n      },\n      disabled: {\n        true: \"cursor-not-allowed opacity-50\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      required: false,\n      disabled: false,\n    },\n  }\n);\n\nexport interface CheckboxProps<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n> extends Omit<ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, \"name\" | \"checked\" | \"onCheckedChange\" | \"required\">,\n    VariantProps<typeof checkboxSizeVariants> {\n  /** Field name - required for form integration */\n  name: TName;\n  /** Label text for the checkbox */\n  label?: ReactNode;\n  /** Helper text displayed below the checkbox */\n  helperText?: string;\n  /** Whether to show the error message */\n  showError?: boolean;\n  /** Custom error message (overrides form error) */\n  error?: string;\n  /** External control (for use outside Form) */\n  control?: Control<TFieldValues>;\n  /** Variant style */\n  variant?: \"default\" | \"error\";\n  \n  // Validation props\n  /** Field is required (must be checked) */\n  required?: boolean | string;\n  /** Custom validation function */\n  validate?: (value: unknown) => boolean | string | Promise<boolean | string>;\n}\n\n/**\n * Checkbox component with form integration\n * \n * This is a wrapper around the shadcn/ui Checkbox primitive that adds:\n * - Form integration with react-hook-form\n * - Automatic validation registration\n * - Label, helper text, and error message support\n * \n * @example\n * ```tsx\n * // Inside a Form component\n * <Checkbox name=\"terms\" label=\"I agree to the terms and conditions\" required />\n * <Checkbox name=\"newsletter\" label=\"Subscribe to newsletter\" />\n * ```\n */\nfunction CheckboxInner<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>(\n  {\n    name,\n    label,\n    helperText,\n    showError = true,\n    error: customError,\n    size,\n    variant,\n    className,\n    disabled,\n    id: providedId,\n    control: externalControl,\n    // Validation props\n    required,\n    validate,\n    ...props\n  }: CheckboxProps<TFieldValues, TName>,\n  ref: React.ForwardedRef<React.ElementRef<typeof CheckboxPrimitive.Root>>\n) {\n  const generatedId = useId();\n  const inputId = providedId ?? generatedId;\n  \n  // Try to get form context\n  const formConfigContext = useContext(FormConfigContext);\n  const formConfig: FormConfig = formConfigContext ?? {};\n  \n  // Get form context from react-hook-form\n  const rhfContext = useRHFFormContext<TFieldValues>();\n  const control = externalControl ?? rhfContext?.control;\n\n  // Register validation rules with the form\n  useEffect(() => {\n    if (formConfigContext?.registerFieldValidation) {\n      const rules: FieldValidationRules = {};\n      \n      if (required !== undefined) rules.required = required;\n      if (validate !== undefined) rules.validate = validate;\n\n      formConfigContext.registerFieldValidation({\n        name: name as string,\n        type: \"boolean\",\n        rules,\n      });\n\n      return () => {\n        formConfigContext.unregisterFieldValidation(name as string);\n      };\n    }\n  }, [formConfigContext, name, required, validate]);\n\n  // Use controller for form integration\n  const { field, fieldState } = useController<TFieldValues, TName>({\n    name,\n    control,\n  });\n\n  const fieldError = fieldState.error?.message;\n  const errorMessage = customError ?? fieldError;\n  const hasError = !!errorMessage;\n  \n  // Merge sizes - prop takes precedence over form config\n  const effectiveSize = size ?? formConfig.size ?? \"md\";\n  const effectiveDisabled = disabled ?? formConfig.disabled;\n  \n  // Determine variant based on error state\n  const effectiveVariant = hasError ? \"error\" : variant;\n\n  return (\n    <div className=\"space-y-1.5\">\n      <div className=\"flex items-center gap-2\">\n        <ShadcnCheckbox\n          {...props}\n          ref={ref}\n          id={inputId}\n          checked={field.value ?? false}\n          onCheckedChange={(checked) => field.onChange(checked === true)}\n          onBlur={field.onBlur}\n          disabled={effectiveDisabled}\n          aria-invalid={hasError}\n          aria-describedby={\n            hasError\n              ? `${inputId}-error`\n              : helperText\n              ? `${inputId}-helper`\n              : undefined\n          }\n          className={cn(\n            checkboxSizeVariants({ size: effectiveSize }),\n            effectiveVariant === \"error\" && \"border-destructive\",\n            className\n          )}\n        />\n        \n        {label && (\n          <Label\n            htmlFor={inputId}\n            className={labelVariants({ required: !!required, disabled: effectiveDisabled })}\n          >\n            {label}\n          </Label>\n        )}\n      </div>\n\n      {showError && hasError && (\n        <p\n          id={`${inputId}-error`}\n          className=\"text-sm text-destructive ml-7\"\n          role=\"alert\"\n        >\n          {errorMessage}\n        </p>\n      )}\n      \n      {helperText && !hasError && (\n        <p\n          id={`${inputId}-helper`}\n          className=\"text-sm text-muted-foreground ml-7\"\n        >\n          {helperText}\n        </p>\n      )}\n    </div>\n  );\n}\n\n// Use forwardRef with generic support\nexport const Checkbox = forwardRef(CheckboxInner) as <\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>(\n  props: CheckboxProps<TFieldValues, TName> & { ref?: React.ForwardedRef<React.ElementRef<typeof CheckboxPrimitive.Root>> }\n) => React.ReactElement;\n\n(Checkbox as React.FC).displayName = \"Checkbox\";\n"],"names":["useRHFFormContext","ShadcnCheckbox"],"mappings":"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"}
+{"version":3,"file":"Checkbox.js","names":[],"sources":["../../../src/components/Form/Checkbox.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, useId, useContext, useEffect } from \"react\";\nimport type { ReactNode, ComponentPropsWithoutRef } from \"react\";\nimport { useController, useFormContext as useRHFFormContext, type FieldValues, type FieldPath, type Control } from \"react-hook-form\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../utils/cn\";\nimport { FormConfigContext, type FormConfig, type FieldValidationRules } from \"../Form/context\";\nimport { Checkbox as ShadcnCheckbox } from \"../../primitives/checkbox\";\nimport { Label } from \"../../primitives/label\";\nimport type * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\n\nconst checkboxSizeVariants = cva(\n  \"\",\n  {\n    variants: {\n      size: {\n        sm: \"h-4 w-4\",\n        md: \"h-5 w-5\",\n        lg: \"h-6 w-6\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n);\n\nconst labelVariants = cva(\n  \"text-sm font-medium cursor-pointer select-none\",\n  {\n    variants: {\n      required: {\n        true: \"after:content-['*'] after:ml-0.5 after:text-destructive\",\n        false: \"\",\n      },\n      disabled: {\n        true: \"cursor-not-allowed opacity-50\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      required: false,\n      disabled: false,\n    },\n  }\n);\n\nexport interface CheckboxProps<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n> extends Omit<ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, \"name\" | \"checked\" | \"onCheckedChange\" | \"required\">,\n    VariantProps<typeof checkboxSizeVariants> {\n  /** Field name - required for form integration */\n  name: TName;\n  /** Label text for the checkbox */\n  label?: ReactNode;\n  /** Helper text displayed below the checkbox */\n  helperText?: string;\n  /** Whether to show the error message */\n  showError?: boolean;\n  /** Custom error message (overrides form error) */\n  error?: string;\n  /** External control (for use outside Form) */\n  control?: Control<TFieldValues>;\n  /** Variant style */\n  variant?: \"default\" | \"error\";\n  \n  // Validation props\n  /** Field is required (must be checked) */\n  required?: boolean | string;\n  /** Custom validation function */\n  validate?: (value: unknown) => boolean | string | Promise<boolean | string>;\n}\n\n/**\n * Checkbox component with form integration\n * \n * This is a wrapper around the shadcn/ui Checkbox primitive that adds:\n * - Form integration with react-hook-form\n * - Automatic validation registration\n * - Label, helper text, and error message support\n * \n * @example\n * ```tsx\n * // Inside a Form component\n * <Checkbox name=\"terms\" label=\"I agree to the terms and conditions\" required />\n * <Checkbox name=\"newsletter\" label=\"Subscribe to newsletter\" />\n * ```\n */\nfunction CheckboxInner<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>(\n  {\n    name,\n    label,\n    helperText,\n    showError = true,\n    error: customError,\n    size,\n    variant,\n    className,\n    disabled,\n    id: providedId,\n    control: externalControl,\n    // Validation props\n    required,\n    validate,\n    ...props\n  }: CheckboxProps<TFieldValues, TName>,\n  ref: React.ForwardedRef<React.ElementRef<typeof CheckboxPrimitive.Root>>\n) {\n  const generatedId = useId();\n  const inputId = providedId ?? generatedId;\n  \n  // Try to get form context\n  const formConfigContext = useContext(FormConfigContext);\n  const formConfig: FormConfig = formConfigContext ?? {};\n  \n  // Get form context from react-hook-form\n  const rhfContext = useRHFFormContext<TFieldValues>();\n  const control = externalControl ?? rhfContext?.control;\n\n  // Register validation rules with the form\n  useEffect(() => {\n    if (formConfigContext?.registerFieldValidation) {\n      const rules: FieldValidationRules = {};\n      \n      if (required !== undefined) rules.required = required;\n      if (validate !== undefined) rules.validate = validate;\n\n      formConfigContext.registerFieldValidation({\n        name: name as string,\n        type: \"boolean\",\n        rules,\n      });\n\n      return () => {\n        formConfigContext.unregisterFieldValidation(name as string);\n      };\n    }\n  }, [formConfigContext, name, required, validate]);\n\n  // Use controller for form integration\n  const { field, fieldState } = useController<TFieldValues, TName>({\n    name,\n    control,\n  });\n\n  const fieldError = fieldState.error?.message;\n  const errorMessage = customError ?? fieldError;\n  const hasError = !!errorMessage;\n  \n  // Merge sizes - prop takes precedence over form config\n  const effectiveSize = size ?? formConfig.size ?? \"md\";\n  const effectiveDisabled = disabled ?? formConfig.disabled;\n  \n  // Determine variant based on error state\n  const effectiveVariant = hasError ? \"error\" : variant;\n\n  return (\n    <div className=\"space-y-1.5\">\n      <div className=\"flex items-center gap-2\">\n        <ShadcnCheckbox\n          {...props}\n          ref={ref}\n          id={inputId}\n          checked={field.value ?? false}\n          onCheckedChange={(checked) => field.onChange(checked === true)}\n          onBlur={field.onBlur}\n          disabled={effectiveDisabled}\n          aria-invalid={hasError}\n          aria-describedby={\n            hasError\n              ? `${inputId}-error`\n              : helperText\n              ? `${inputId}-helper`\n              : undefined\n          }\n          className={cn(\n            checkboxSizeVariants({ size: effectiveSize }),\n            effectiveVariant === \"error\" && \"border-destructive\",\n            className\n          )}\n        />\n        \n        {label && (\n          <Label\n            htmlFor={inputId}\n            className={labelVariants({ required: !!required, disabled: effectiveDisabled })}\n          >\n            {label}\n          </Label>\n        )}\n      </div>\n\n      {showError && hasError && (\n        <p\n          id={`${inputId}-error`}\n          className=\"text-sm text-destructive ml-7\"\n          role=\"alert\"\n        >\n          {errorMessage}\n        </p>\n      )}\n      \n      {helperText && !hasError && (\n        <p\n          id={`${inputId}-helper`}\n          className=\"text-sm text-muted-foreground ml-7\"\n        >\n          {helperText}\n        </p>\n      )}\n    </div>\n  );\n}\n\n// Use forwardRef with generic support\nexport const Checkbox = forwardRef(CheckboxInner) as <\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>(\n  props: CheckboxProps<TFieldValues, TName> & { ref?: React.ForwardedRef<React.ElementRef<typeof CheckboxPrimitive.Root>> }\n) => React.ReactElement;\n\n(Checkbox as React.FC).displayName = \"Checkbox\";\n"],"mappings":";;;;;;;;;;;AAYA,IAAM,uBAAuB,IAC3B,IACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CACF;AAEA,IAAM,gBAAgB,IACpB,kDACA;CACE,UAAU;EACR,UAAU;GACR,MAAM;GACN,OAAO;EACT;EACA,UAAU;GACR,MAAM;GACN,OAAO;EACT;CACF;CACA,iBAAiB;EACf,UAAU;EACV,UAAU;CACZ;AACF,CACF;;;;;;;;;;;;;;;;AA4CA,SAAS,cAIP,EACE,MACA,OACA,YACA,YAAY,MACZ,OAAO,aACP,MACA,SACA,WACA,UACA,IAAI,YACJ,SAAS,iBAET,UACA,UACA,GAAG,SAEL,KACA;CACA,MAAM,cAAc,MAAM;CAC1B,MAAM,UAAU,cAAc;CAG9B,MAAM,oBAAoB,WAAW,iBAAiB;CACtD,MAAM,aAAyB,qBAAqB,CAAC;CAGrD,MAAM,aAAa,eAAgC;CACnD,MAAM,UAAU,mBAAmB,YAAY;CAG/C,gBAAgB;EACd,IAAI,mBAAmB,yBAAyB;GAC9C,MAAM,QAA8B,CAAC;GAErC,IAAI,aAAa,KAAA,GAAW,MAAM,WAAW;GAC7C,IAAI,aAAa,KAAA,GAAW,MAAM,WAAW;GAE7C,kBAAkB,wBAAwB;IAClC;IACN,MAAM;IACN;GACF,CAAC;GAED,aAAa;IACX,kBAAkB,0BAA0B,IAAc;GAC5D;EACF;CACF,GAAG;EAAC;EAAmB;EAAM;EAAU;CAAQ,CAAC;CAGhD,MAAM,EAAE,OAAO,eAAe,cAAmC;EAC/D;EACA;CACF,CAAC;CAED,MAAM,aAAa,WAAW,OAAO;CACrC,MAAM,eAAe,eAAe;CACpC,MAAM,WAAW,CAAC,CAAC;CAGnB,MAAM,gBAAgB,QAAQ,WAAW,QAAQ;CACjD,MAAM,oBAAoB,YAAY,WAAW;CAGjD,MAAM,mBAAmB,WAAW,UAAU;CAE9C,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,YAAD;KACE,GAAI;KACC;KACL,IAAI;KACJ,SAAS,MAAM,SAAS;KACxB,kBAAkB,YAAY,MAAM,SAAS,YAAY,IAAI;KAC7D,QAAQ,MAAM;KACd,UAAU;KACV,gBAAc;KACd,oBACE,WACI,GAAG,QAAQ,UACX,aACA,GAAG,QAAQ,WACX,KAAA;KAEN,WAAW,GACT,qBAAqB,EAAE,MAAM,cAAc,CAAC,GAC5C,qBAAqB,WAAW,sBAChC,SACF;IACD,CAAA,GAEA,SACC,oBAAC,OAAD;KACE,SAAS;KACT,WAAW,cAAc;MAAE,UAAU,CAAC,CAAC;MAAU,UAAU;KAAkB,CAAC;eAE7E;IACI,CAAA,CAEN;;GAEJ,aAAa,YACZ,oBAAC,KAAD;IACE,IAAI,GAAG,QAAQ;IACf,WAAU;IACV,MAAK;cAEJ;GACA,CAAA;GAGJ,cAAc,CAAC,YACd,oBAAC,KAAD;IACE,IAAI,GAAG,QAAQ;IACf,WAAU;cAET;GACA,CAAA;EAEF;;AAET;AAGA,IAAa,WAAW,WAAW,aAAa;AAOhD,SAAuB,cAAc"}

package/dist/components/Form/Form.d.ts

@@ -55,7 +55,7 @@ export interface FormProps<TFieldValues extends FieldValues = FieldValues, TCont
  * </Form>
  * ```
  */
-export declare function Form<TFieldValues extends FieldValues = FieldValues, TContext = unknown>({ schema: baseSchema, defaultValues, values, onSubmit, onError, config, children, form: externalForm, mode, reValidateMode, resolver: customResolver, ...formProps }: FormProps<TFieldValues, TContext>): import("react/jsx-runtime").JSX.Element;
+export declare function Form<TFieldValues extends FieldValues = FieldValues, TContext = unknown>({ schema: baseSchema, defaultValues, values, onSubmit, onError, config, children, form: externalForm, mode, reValidateMode, resolver: customResolver, ...formProps }: FormProps<TFieldValues, TContext>): import("react").JSX.Element;
 export declare namespace Form {
     var displayName: string;
 }

package/dist/components/Form/Form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../src/components/Form/Form.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAwB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,EAGL,KAAK,aAAa,EAClB,KAAK,WAAW,EAChB,KAAK,YAAY,EACjB,KAAK,aAAa,EAClB,KAAK,kBAAkB,EACvB,KAAK,QAAQ,EAEd,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,EAIL,KAAK,UAAU,EAEhB,MAAM,WAAW,CAAC;AAEnB;;GAEG;AACH,MAAM,WAAW,SAAS,CACxB,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,QAAQ,GAAG,OAAO,CAClB,SAAQ,IAAI,CAAC,KAAK,CAAC,kBAAkB,CAAC,eAAe,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IAC/E,uEAAuE;IAEvE,MAAM,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,YAAY,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;IAC3C,kCAAkC;IAClC,aAAa,CAAC,EAAE,YAAY,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,eAAe,CAAC,CAAC;IACtE,kCAAkC;IAClC,MAAM,CAAC,EAAE,YAAY,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAC;IACxD,qBAAqB;IACrB,QAAQ,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACvC,oBAAoB;IACpB,OAAO,CAAC,EAAE,kBAAkB,CAAC,YAAY,CAAC,CAAC;IAC3C,yBAAyB;IACzB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,eAAe;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,oDAAoD;IACpD,IAAI,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACnC,sBAAsB;IACtB,IAAI,CAAC,EAAE,YAAY,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC;IACpD,wBAAwB;IACxB,cAAc,CAAC,EAAE,YAAY,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,gBAAgB,CAAC,CAAC;IACxE,yCAAyC;IACzC,QAAQ,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC,CAAC;CACnC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,IAAI,CAClB,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,QAAQ,GAAG,OAAO,EAClB,EACA,MAAM,EAAE,UAAU,EAClB,aAAa,EACb,MAAM,EACN,QAAQ,EACR,OAAO,EACP,MAAM,EACN,QAAQ,EACR,IAAI,EAAE,YAAY,EAClB,IAAe,EACf,cAA2B,EAC3B,QAAQ,EAAE,cAAc,EACxB,GAAG,SAAS,EACb,EAAE,SAAS,CAAC,YAAY,EAAE,QAAQ,CAAC,2CAmGnC;yBAnHe,IAAI"}
+{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../src/components/Form/Form.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAwB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,EAGL,KAAK,aAAa,EAClB,KAAK,WAAW,EAChB,KAAK,YAAY,EACjB,KAAK,aAAa,EAClB,KAAK,kBAAkB,EACvB,KAAK,QAAQ,EAEd,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,EAIL,KAAK,UAAU,EAEhB,MAAM,WAAW,CAAC;AAEnB;;GAEG;AACH,MAAM,WAAW,SAAS,CACxB,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,QAAQ,GAAG,OAAO,CAClB,SAAQ,IAAI,CAAC,KAAK,CAAC,kBAAkB,CAAC,eAAe,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IAC/E,uEAAuE;IAEvE,MAAM,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,YAAY,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;IAC3C,kCAAkC;IAClC,aAAa,CAAC,EAAE,YAAY,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,eAAe,CAAC,CAAC;IACtE,kCAAkC;IAClC,MAAM,CAAC,EAAE,YAAY,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAC;IACxD,qBAAqB;IACrB,QAAQ,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACvC,oBAAoB;IACpB,OAAO,CAAC,EAAE,kBAAkB,CAAC,YAAY,CAAC,CAAC;IAC3C,yBAAyB;IACzB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,eAAe;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,oDAAoD;IACpD,IAAI,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACnC,sBAAsB;IACtB,IAAI,CAAC,EAAE,YAAY,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC;IACpD,wBAAwB;IACxB,cAAc,CAAC,EAAE,YAAY,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,gBAAgB,CAAC,CAAC;IACxE,yCAAyC;IACzC,QAAQ,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC,CAAC;CACnC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,IAAI,CAClB,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,QAAQ,GAAG,OAAO,EAClB,EACA,MAAM,EAAE,UAAU,EAClB,aAAa,EACb,MAAM,EACN,QAAQ,EACR,OAAO,EACP,MAAM,EACN,QAAQ,EACR,IAAI,EAAE,YAAY,EAClB,IAAe,EACf,cAA2B,EAC3B,QAAQ,EAAE,cAAc,EACxB,GAAG,SAAS,EACb,EAAE,SAAS,CAAC,YAAY,EAAE,QAAQ,CAAC,+BAmGnC;yBAnHe,IAAI"}

package/dist/components/Form/Form.js

@@ -1,109 +1,110 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+"use client";
+import { FormConfigContext, defaultFormConfig, useFieldValidationRegistry } from "./context.js";
 import { useCallback, useMemo } from "react";
-import { useForm, FormProvider } from "react-hook-form";
+import { jsx } from "react/jsx-runtime";
+import { FormProvider, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
-import { defaultFormConfig, useFieldValidationRegistry, FormConfigContext } from "./context.js";
-function Form({
-  schema: baseSchema,
-  defaultValues,
-  values,
-  onSubmit,
-  onError,
-  config,
-  children,
-  form: externalForm,
-  mode = "onBlur",
-  reValidateMode = "onChange",
-  resolver: customResolver,
-  ...formProps
-}) {
-  const mergedConfig = { ...defaultFormConfig, ...config };
-  const {
-    registerFieldValidation,
-    unregisterFieldValidation,
-    getValidationSchema
-  } = useFieldValidationRegistry();
-  const dynamicResolver = useCallback(
-    async (vals, context, options) => {
-      if (customResolver) {
-        return customResolver(vals, context, options);
-      }
-      const fieldSchema = getValidationSchema();
-      let finalSchema;
-      if (baseSchema instanceof z.ZodObject) {
-        finalSchema = baseSchema.merge(fieldSchema);
-      } else {
-        finalSchema = baseSchema ?? fieldSchema;
-      }
-      return zodResolver(finalSchema)(vals, context, options);
-    },
-    // getValidationSchema reads a ref — always current, intentionally omitted.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [baseSchema, customResolver]
-  );
-  const internalForm = useForm({
-    resolver: dynamicResolver,
-    defaultValues,
-    values,
-    mode,
-    reValidateMode
-  });
-  const form = externalForm ?? internalForm;
-  const triggerValidation = useCallback(async (name) => {
-    return form.trigger(name);
-  }, [form]);
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    if (onSubmit) {
-      form.handleSubmit(onSubmit, onError)(e);
-    }
-  };
-  const contextValue = useMemo(
-    () => ({
-      form,
-      registerFieldValidation,
-      unregisterFieldValidation,
-      getValidationSchema,
-      triggerValidation,
-      showInlineErrors: mergedConfig.showInlineErrors,
-      validateOnBlur: mergedConfig.validateOnBlur,
-      validateOnChange: mergedConfig.validateOnChange,
-      size: mergedConfig.size,
-      layout: mergedConfig.layout,
-      labelWidth: mergedConfig.labelWidth,
-      disabled: mergedConfig.disabled,
-      colon: mergedConfig.colon
-    }),
-    [
-      form,
-      registerFieldValidation,
-      unregisterFieldValidation,
-      getValidationSchema,
-      triggerValidation,
-      mergedConfig.showInlineErrors,
-      mergedConfig.validateOnBlur,
-      mergedConfig.validateOnChange,
-      mergedConfig.size,
-      mergedConfig.layout,
-      mergedConfig.labelWidth,
-      mergedConfig.disabled,
-      mergedConfig.colon
-    ]
-  );
-  return /* @__PURE__ */ jsx(FormConfigContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(FormProvider, { ...form, children: /* @__PURE__ */ jsx(
-    "form",
-    {
-      ...formProps,
-      onSubmit: handleSubmit,
-      noValidate: true,
-      children
-    }
-  ) }) });
+//#region src/components/Form/Form.tsx
+/**
+* Form component that provides form context and validation
+* 
+* Child components like TextBox can register their validation rules automatically.
+* 
+* @example
+* ```tsx
+* // Validation is automatically built from component props
+* <Form onSubmit={handleSubmit} defaultValues={{ username: "", email: "" }}>
+*   <TextBox name="username" label="Username" required minLength={3} maxLength={50} />
+*   <TextBox name="email" label="Email" type="email" required email />
+*   <Button type="submit">Submit</Button>
+* </Form>
+* 
+* // Or with a base schema that gets extended
+* const baseSchema = z.object({
+*   username: z.string(),
+*   email: z.string(),
+* });
+* 
+* <Form schema={baseSchema} onSubmit={handleSubmit}>
+*   <TextBox name="username" required minLength={3} /> // Adds required + minLength
+*   <TextBox name="email" required email /> // Adds required + email validation
+* </Form>
+* ```
+*/
+function Form({ schema: baseSchema, defaultValues, values, onSubmit, onError, config, children, form: externalForm, mode = "onBlur", reValidateMode = "onChange", resolver: customResolver, ...formProps }) {
+	const mergedConfig = {
+		...defaultFormConfig,
+		...config
+	};
+	const { registerFieldValidation, unregisterFieldValidation, getValidationSchema } = useFieldValidationRegistry();
+	const internalForm = useForm({
+		resolver: useCallback(async (vals, context, options) => {
+			if (customResolver) return customResolver(vals, context, options);
+			const fieldSchema = getValidationSchema();
+			let finalSchema;
+			if (baseSchema instanceof z.ZodObject) finalSchema = baseSchema.merge(fieldSchema);
+			else finalSchema = baseSchema ?? fieldSchema;
+			return zodResolver(finalSchema)(vals, context, options);
+		}, [baseSchema, customResolver]),
+		defaultValues,
+		values,
+		mode,
+		reValidateMode
+	});
+	const form = externalForm ?? internalForm;
+	const triggerValidation = useCallback(async (name) => {
+		return form.trigger(name);
+	}, [form]);
+	const handleSubmit = (e) => {
+		e.preventDefault();
+		if (onSubmit) form.handleSubmit(onSubmit, onError)(e);
+	};
+	const contextValue = useMemo(() => ({
+		form,
+		registerFieldValidation,
+		unregisterFieldValidation,
+		getValidationSchema,
+		triggerValidation,
+		showInlineErrors: mergedConfig.showInlineErrors,
+		validateOnBlur: mergedConfig.validateOnBlur,
+		validateOnChange: mergedConfig.validateOnChange,
+		size: mergedConfig.size,
+		layout: mergedConfig.layout,
+		labelWidth: mergedConfig.labelWidth,
+		disabled: mergedConfig.disabled,
+		colon: mergedConfig.colon
+	}), [
+		form,
+		registerFieldValidation,
+		unregisterFieldValidation,
+		getValidationSchema,
+		triggerValidation,
+		mergedConfig.showInlineErrors,
+		mergedConfig.validateOnBlur,
+		mergedConfig.validateOnChange,
+		mergedConfig.size,
+		mergedConfig.layout,
+		mergedConfig.labelWidth,
+		mergedConfig.disabled,
+		mergedConfig.colon
+	]);
+	return /* @__PURE__ */ jsx(FormConfigContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(FormProvider, {
+			...form,
+			children: /* @__PURE__ */ jsx("form", {
+				...formProps,
+				onSubmit: handleSubmit,
+				noValidate: true,
+				children
+			})
+		})
+	});
 }
 Form.displayName = "Form";
-export {
-  Form
-};
-//# sourceMappingURL=Form.js.map
+//#endregion
+export { Form };
+
+//# sourceMappingURL=Form.js.map

package/dist/components/Form/Form.js.map

@@ -1 +1 @@
-{"version":3,"file":"Form.js","sources":["../../../src/components/Form/Form.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useMemo, type ReactNode } from \"react\";\r\nimport {\r\n  useForm,\r\n  FormProvider as RHFFormProvider,\r\n  type UseFormReturn,\r\n  type FieldValues,\r\n  type UseFormProps,\r\n  type SubmitHandler,\r\n  type SubmitErrorHandler,\r\n  type Resolver,\r\n  type Path,\r\n} from \"react-hook-form\";\r\nimport { zodResolver } from \"@hookform/resolvers/zod\";\r\nimport { z } from \"zod\";\r\nimport { \r\n  FormConfigContext, \r\n  defaultFormConfig, \r\n  useFieldValidationRegistry,\r\n  type FormConfig, \r\n  type FormContextValue \r\n} from \"./context\";\r\n\r\n/**\r\n * Props for the Form component\r\n */\r\nexport interface FormProps<\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TContext = unknown\r\n> extends Omit<React.FormHTMLAttributes<HTMLFormElement>, \"onSubmit\" | \"onError\"> {\r\n  /** Base Zod schema for validation (will be extended by field props) */\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  schema?: z.ZodType<TFieldValues, any, any>;\r\n  /** Default values for the form */\r\n  defaultValues?: UseFormProps<TFieldValues, TContext>[\"defaultValues\"];\r\n  /** Values to reset the form to */\r\n  values?: UseFormProps<TFieldValues, TContext>[\"values\"];\r\n  /** Submit handler */\r\n  onSubmit?: SubmitHandler<TFieldValues>;\r\n  /** Error handler */\r\n  onError?: SubmitErrorHandler<TFieldValues>;\r\n  /** Form configuration */\r\n  config?: FormConfig;\r\n  /** Children */\r\n  children?: ReactNode;\r\n  /** External form instance (for controlled forms) */\r\n  form?: UseFormReturn<TFieldValues>;\r\n  /** Validation mode */\r\n  mode?: UseFormProps<TFieldValues, TContext>[\"mode\"];\r\n  /** Revalidation mode */\r\n  reValidateMode?: UseFormProps<TFieldValues, TContext>[\"reValidateMode\"];\r\n  /** Custom resolver (overrides schema) */\r\n  resolver?: Resolver<TFieldValues>;\r\n}\r\n\r\n/**\r\n * Form component that provides form context and validation\r\n * \r\n * Child components like TextBox can register their validation rules automatically.\r\n * \r\n * @example\r\n * ```tsx\r\n * // Validation is automatically built from component props\r\n * <Form onSubmit={handleSubmit} defaultValues={{ username: \"\", email: \"\" }}>\r\n *   <TextBox name=\"username\" label=\"Username\" required minLength={3} maxLength={50} />\r\n *   <TextBox name=\"email\" label=\"Email\" type=\"email\" required email />\r\n *   <Button type=\"submit\">Submit</Button>\r\n * </Form>\r\n * \r\n * // Or with a base schema that gets extended\r\n * const baseSchema = z.object({\r\n *   username: z.string(),\r\n *   email: z.string(),\r\n * });\r\n * \r\n * <Form schema={baseSchema} onSubmit={handleSubmit}>\r\n *   <TextBox name=\"username\" required minLength={3} /> // Adds required + minLength\r\n *   <TextBox name=\"email\" required email /> // Adds required + email validation\r\n * </Form>\r\n * ```\r\n */\r\nexport function Form<\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TContext = unknown\r\n>({\r\n  schema: baseSchema,\r\n  defaultValues,\r\n  values,\r\n  onSubmit,\r\n  onError,\r\n  config,\r\n  children,\r\n  form: externalForm,\r\n  mode = \"onBlur\",\r\n  reValidateMode = \"onChange\",\r\n  resolver: customResolver,\r\n  ...formProps\r\n}: FormProps<TFieldValues, TContext>) {\r\n  const mergedConfig = { ...defaultFormConfig, ...config };\r\n\r\n  const {\r\n    registerFieldValidation,\r\n    unregisterFieldValidation,\r\n    getValidationSchema,\r\n  } = useFieldValidationRegistry();\r\n\r\n  // Stable resolver that reads from fieldsRef at validation time — no re-renders\r\n  // needed on field registration, and no race condition with useEffect timing.\r\n  const dynamicResolver = useCallback<Resolver<TFieldValues>>(\r\n    async (vals, context, options) => {\r\n      if (customResolver) {\r\n        return customResolver(vals, context, options);\r\n      }\r\n      const fieldSchema = getValidationSchema();\r\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n      let finalSchema: z.ZodType<any, any, any>;\r\n      if (baseSchema instanceof z.ZodObject) {\r\n        finalSchema = baseSchema.merge(fieldSchema);\r\n      } else {\r\n        finalSchema = baseSchema ?? fieldSchema;\r\n      }\r\n      return zodResolver(finalSchema)(vals, context, options);\r\n    },\r\n    // getValidationSchema reads a ref — always current, intentionally omitted.\r\n    // eslint-disable-next-line react-hooks/exhaustive-deps\r\n    [baseSchema, customResolver]\r\n  );\r\n\r\n  const internalForm = useForm<TFieldValues>({\r\n    resolver: dynamicResolver,\r\n    defaultValues,\r\n    values,\r\n    mode,\r\n    reValidateMode,\r\n  });\r\n\r\n  const form = externalForm ?? internalForm;\r\n\r\n  // Trigger validation for a specific field\r\n  const triggerValidation = useCallback(async (name: string) => {\r\n    return form.trigger(name as Path<TFieldValues>);\r\n  }, [form]);\r\n\r\n  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {\r\n    e.preventDefault();\r\n    if (onSubmit) {\r\n      form.handleSubmit(onSubmit, onError)(e);\r\n    }\r\n  };\r\n\r\n  const contextValue = useMemo<FormContextValue<TFieldValues>>(\r\n    () => ({\r\n      form,\r\n      registerFieldValidation,\r\n      unregisterFieldValidation,\r\n      getValidationSchema,\r\n      triggerValidation,\r\n      showInlineErrors: mergedConfig.showInlineErrors,\r\n      validateOnBlur: mergedConfig.validateOnBlur,\r\n      validateOnChange: mergedConfig.validateOnChange,\r\n      size: mergedConfig.size,\r\n      layout: mergedConfig.layout,\r\n      labelWidth: mergedConfig.labelWidth,\r\n      disabled: mergedConfig.disabled,\r\n      colon: mergedConfig.colon,\r\n    }),\r\n    [\r\n      form,\r\n      registerFieldValidation,\r\n      unregisterFieldValidation,\r\n      getValidationSchema,\r\n      triggerValidation,\r\n      mergedConfig.showInlineErrors,\r\n      mergedConfig.validateOnBlur,\r\n      mergedConfig.validateOnChange,\r\n      mergedConfig.size,\r\n      mergedConfig.layout,\r\n      mergedConfig.labelWidth,\r\n      mergedConfig.disabled,\r\n      mergedConfig.colon,\r\n    ]\r\n  );\r\n\r\n  return (\r\n    <FormConfigContext.Provider value={contextValue as FormContextValue}>\r\n      <RHFFormProvider {...form}>\r\n        <form\r\n          {...formProps}\r\n          onSubmit={handleSubmit}\r\n          noValidate\r\n        >\r\n          {children}\r\n        </form>\r\n      </RHFFormProvider>\r\n    </FormConfigContext.Provider>\r\n  );\r\n}\r\n\r\nForm.displayName = \"Form\";\r\n"],"names":["RHFFormProvider"],"mappings":";;;;;;;AAkFO,SAAS,KAGd;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN,OAAO;AAAA,EACP,iBAAiB;AAAA,EACjB,UAAU;AAAA,EACV,GAAG;AACL,GAAsC;AACpC,QAAM,eAAe,EAAE,GAAG,mBAAmB,GAAG,OAAA;AAEhD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE,2BAAA;AAIJ,QAAM,kBAAkB;AAAA,IACtB,OAAO,MAAM,SAAS,YAAY;AAChC,UAAI,gBAAgB;AAClB,eAAO,eAAe,MAAM,SAAS,OAAO;AAAA,MAC9C;AACA,YAAM,cAAc,oBAAA;AAEpB,UAAI;AACJ,UAAI,sBAAsB,EAAE,WAAW;AACrC,sBAAc,WAAW,MAAM,WAAW;AAAA,MAC5C,OAAO;AACL,sBAAc,cAAc;AAAA,MAC9B;AACA,aAAO,YAAY,WAAW,EAAE,MAAM,SAAS,OAAO;AAAA,IACxD;AAAA;AAAA;AAAA,IAGA,CAAC,YAAY,cAAc;AAAA,EAAA;AAG7B,QAAM,eAAe,QAAsB;AAAA,IACzC,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAED,QAAM,OAAO,gBAAgB;AAG7B,QAAM,oBAAoB,YAAY,OAAO,SAAiB;AAC5D,WAAO,KAAK,QAAQ,IAA0B;AAAA,EAChD,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,eAAe,CAAC,MAAwC;AAC5D,MAAE,eAAA;AACF,QAAI,UAAU;AACZ,WAAK,aAAa,UAAU,OAAO,EAAE,CAAC;AAAA,IACxC;AAAA,EACF;AAEA,QAAM,eAAe;AAAA,IACnB,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,kBAAkB,aAAa;AAAA,MAC/B,gBAAgB,aAAa;AAAA,MAC7B,kBAAkB,aAAa;AAAA,MAC/B,MAAM,aAAa;AAAA,MACnB,QAAQ,aAAa;AAAA,MACrB,YAAY,aAAa;AAAA,MACzB,UAAU,aAAa;AAAA,MACvB,OAAO,aAAa;AAAA,IAAA;AAAA,IAEtB;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,aAAa;AAAA,MACb,aAAa;AAAA,MACb,aAAa;AAAA,MACb,aAAa;AAAA,MACb,aAAa;AAAA,MACb,aAAa;AAAA,MACb,aAAa;AAAA,MACb,aAAa;AAAA,IAAA;AAAA,EACf;AAGF,SACE,oBAAC,kBAAkB,UAAlB,EAA2B,OAAO,cACjC,UAAA,oBAACA,cAAA,EAAiB,GAAG,MACnB,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,UAAU;AAAA,MACV,YAAU;AAAA,MAET;AAAA,IAAA;AAAA,EAAA,GAEL,EAAA,CACF;AAEJ;AAEA,KAAK,cAAc;"}
+{"version":3,"file":"Form.js","names":[],"sources":["../../../src/components/Form/Form.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useMemo, type ReactNode } from \"react\";\r\nimport {\r\n  useForm,\r\n  FormProvider as RHFFormProvider,\r\n  type UseFormReturn,\r\n  type FieldValues,\r\n  type UseFormProps,\r\n  type SubmitHandler,\r\n  type SubmitErrorHandler,\r\n  type Resolver,\r\n  type Path,\r\n} from \"react-hook-form\";\r\nimport { zodResolver } from \"@hookform/resolvers/zod\";\r\nimport { z } from \"zod\";\r\nimport { \r\n  FormConfigContext, \r\n  defaultFormConfig, \r\n  useFieldValidationRegistry,\r\n  type FormConfig, \r\n  type FormContextValue \r\n} from \"./context\";\r\n\r\n/**\r\n * Props for the Form component\r\n */\r\nexport interface FormProps<\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TContext = unknown\r\n> extends Omit<React.FormHTMLAttributes<HTMLFormElement>, \"onSubmit\" | \"onError\"> {\r\n  /** Base Zod schema for validation (will be extended by field props) */\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  schema?: z.ZodType<TFieldValues, any, any>;\r\n  /** Default values for the form */\r\n  defaultValues?: UseFormProps<TFieldValues, TContext>[\"defaultValues\"];\r\n  /** Values to reset the form to */\r\n  values?: UseFormProps<TFieldValues, TContext>[\"values\"];\r\n  /** Submit handler */\r\n  onSubmit?: SubmitHandler<TFieldValues>;\r\n  /** Error handler */\r\n  onError?: SubmitErrorHandler<TFieldValues>;\r\n  /** Form configuration */\r\n  config?: FormConfig;\r\n  /** Children */\r\n  children?: ReactNode;\r\n  /** External form instance (for controlled forms) */\r\n  form?: UseFormReturn<TFieldValues>;\r\n  /** Validation mode */\r\n  mode?: UseFormProps<TFieldValues, TContext>[\"mode\"];\r\n  /** Revalidation mode */\r\n  reValidateMode?: UseFormProps<TFieldValues, TContext>[\"reValidateMode\"];\r\n  /** Custom resolver (overrides schema) */\r\n  resolver?: Resolver<TFieldValues>;\r\n}\r\n\r\n/**\r\n * Form component that provides form context and validation\r\n * \r\n * Child components like TextBox can register their validation rules automatically.\r\n * \r\n * @example\r\n * ```tsx\r\n * // Validation is automatically built from component props\r\n * <Form onSubmit={handleSubmit} defaultValues={{ username: \"\", email: \"\" }}>\r\n *   <TextBox name=\"username\" label=\"Username\" required minLength={3} maxLength={50} />\r\n *   <TextBox name=\"email\" label=\"Email\" type=\"email\" required email />\r\n *   <Button type=\"submit\">Submit</Button>\r\n * </Form>\r\n * \r\n * // Or with a base schema that gets extended\r\n * const baseSchema = z.object({\r\n *   username: z.string(),\r\n *   email: z.string(),\r\n * });\r\n * \r\n * <Form schema={baseSchema} onSubmit={handleSubmit}>\r\n *   <TextBox name=\"username\" required minLength={3} /> // Adds required + minLength\r\n *   <TextBox name=\"email\" required email /> // Adds required + email validation\r\n * </Form>\r\n * ```\r\n */\r\nexport function Form<\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TContext = unknown\r\n>({\r\n  schema: baseSchema,\r\n  defaultValues,\r\n  values,\r\n  onSubmit,\r\n  onError,\r\n  config,\r\n  children,\r\n  form: externalForm,\r\n  mode = \"onBlur\",\r\n  reValidateMode = \"onChange\",\r\n  resolver: customResolver,\r\n  ...formProps\r\n}: FormProps<TFieldValues, TContext>) {\r\n  const mergedConfig = { ...defaultFormConfig, ...config };\r\n\r\n  const {\r\n    registerFieldValidation,\r\n    unregisterFieldValidation,\r\n    getValidationSchema,\r\n  } = useFieldValidationRegistry();\r\n\r\n  // Stable resolver that reads from fieldsRef at validation time — no re-renders\r\n  // needed on field registration, and no race condition with useEffect timing.\r\n  const dynamicResolver = useCallback<Resolver<TFieldValues>>(\r\n    async (vals, context, options) => {\r\n      if (customResolver) {\r\n        return customResolver(vals, context, options);\r\n      }\r\n      const fieldSchema = getValidationSchema();\r\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n      let finalSchema: z.ZodType<any, any, any>;\r\n      if (baseSchema instanceof z.ZodObject) {\r\n        finalSchema = baseSchema.merge(fieldSchema);\r\n      } else {\r\n        finalSchema = baseSchema ?? fieldSchema;\r\n      }\r\n      return zodResolver(finalSchema)(vals, context, options);\r\n    },\r\n    // getValidationSchema reads a ref — always current, intentionally omitted.\r\n    // eslint-disable-next-line react-hooks/exhaustive-deps\r\n    [baseSchema, customResolver]\r\n  );\r\n\r\n  const internalForm = useForm<TFieldValues>({\r\n    resolver: dynamicResolver,\r\n    defaultValues,\r\n    values,\r\n    mode,\r\n    reValidateMode,\r\n  });\r\n\r\n  const form = externalForm ?? internalForm;\r\n\r\n  // Trigger validation for a specific field\r\n  const triggerValidation = useCallback(async (name: string) => {\r\n    return form.trigger(name as Path<TFieldValues>);\r\n  }, [form]);\r\n\r\n  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {\r\n    e.preventDefault();\r\n    if (onSubmit) {\r\n      form.handleSubmit(onSubmit, onError)(e);\r\n    }\r\n  };\r\n\r\n  const contextValue = useMemo<FormContextValue<TFieldValues>>(\r\n    () => ({\r\n      form,\r\n      registerFieldValidation,\r\n      unregisterFieldValidation,\r\n      getValidationSchema,\r\n      triggerValidation,\r\n      showInlineErrors: mergedConfig.showInlineErrors,\r\n      validateOnBlur: mergedConfig.validateOnBlur,\r\n      validateOnChange: mergedConfig.validateOnChange,\r\n      size: mergedConfig.size,\r\n      layout: mergedConfig.layout,\r\n      labelWidth: mergedConfig.labelWidth,\r\n      disabled: mergedConfig.disabled,\r\n      colon: mergedConfig.colon,\r\n    }),\r\n    [\r\n      form,\r\n      registerFieldValidation,\r\n      unregisterFieldValidation,\r\n      getValidationSchema,\r\n      triggerValidation,\r\n      mergedConfig.showInlineErrors,\r\n      mergedConfig.validateOnBlur,\r\n      mergedConfig.validateOnChange,\r\n      mergedConfig.size,\r\n      mergedConfig.layout,\r\n      mergedConfig.labelWidth,\r\n      mergedConfig.disabled,\r\n      mergedConfig.colon,\r\n    ]\r\n  );\r\n\r\n  return (\r\n    <FormConfigContext.Provider value={contextValue as FormContextValue}>\r\n      <RHFFormProvider {...form}>\r\n        <form\r\n          {...formProps}\r\n          onSubmit={handleSubmit}\r\n          noValidate\r\n        >\r\n          {children}\r\n        </form>\r\n      </RHFFormProvider>\r\n    </FormConfigContext.Provider>\r\n  );\r\n}\r\n\r\nForm.displayName = \"Form\";\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkFA,SAAgB,KAGd,EACA,QAAQ,YACR,eACA,QACA,UACA,SACA,QACA,UACA,MAAM,cACN,OAAO,UACP,iBAAiB,YACjB,UAAU,gBACV,GAAG,aACiC;CACpC,MAAM,eAAe;EAAE,GAAG;EAAmB,GAAG;CAAO;CAEvD,MAAM,EACJ,yBACA,2BACA,wBACE,2BAA2B;CAwB/B,MAAM,eAAe,QAAsB;EACzC,UArBsB,YACtB,OAAO,MAAM,SAAS,YAAY;GAChC,IAAI,gBACF,OAAO,eAAe,MAAM,SAAS,OAAO;GAE9C,MAAM,cAAc,oBAAoB;GAExC,IAAI;GACJ,IAAI,sBAAsB,EAAE,WAC1B,cAAc,WAAW,MAAM,WAAW;QAE1C,cAAc,cAAc;GAE9B,OAAO,YAAY,WAAW,CAAC,CAAC,MAAM,SAAS,OAAO;EACxD,GAGA,CAAC,YAAY,cAAc,CAIjB;EACV;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,OAAO,gBAAgB;CAG7B,MAAM,oBAAoB,YAAY,OAAO,SAAiB;EAC5D,OAAO,KAAK,QAAQ,IAA0B;CAChD,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,gBAAgB,MAAwC;EAC5D,EAAE,eAAe;EACjB,IAAI,UACF,KAAK,aAAa,UAAU,OAAO,CAAC,CAAC,CAAC;CAE1C;CAEA,MAAM,eAAe,eACZ;EACL;EACA;EACA;EACA;EACA;EACA,kBAAkB,aAAa;EAC/B,gBAAgB,aAAa;EAC7B,kBAAkB,aAAa;EAC/B,MAAM,aAAa;EACnB,QAAQ,aAAa;EACrB,YAAY,aAAa;EACzB,UAAU,aAAa;EACvB,OAAO,aAAa;CACtB,IACA;EACE;EACA;EACA;EACA;EACA;EACA,aAAa;EACb,aAAa;EACb,aAAa;EACb,aAAa;EACb,aAAa;EACb,aAAa;EACb,aAAa;EACb,aAAa;CACf,CACF;CAEA,OACE,oBAAC,kBAAkB,UAAnB;EAA4B,OAAO;YACjC,oBAAC,cAAD;GAAiB,GAAI;aACnB,oBAAC,QAAD;IACE,GAAI;IACJ,UAAU;IACV,YAAA;IAEC;GACG,CAAA;EACS,CAAA;CACS,CAAA;AAEhC;AAEA,KAAK,cAAc"}