@skybin-tech/nebula-ui 0.0.6 → 0.0.9

package/dist/cjs/components/Button/Button.cjs

@@ -1,8 +1,36 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
+const classVarianceAuthority = require("class-variance-authority");
 const cn = require("../../utils/cn.cjs");
-;/* empty css             */
+const buttonVariants = classVarianceAuthority.cva(
+  "inline-flex items-center justify-center gap-2 font-medium rounded-md border transition-all cursor-pointer relative disabled:opacity-60 disabled:cursor-not-allowed focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
+  {
+    variants: {
+      variant: {
+        primary: "bg-primary text-primary-foreground border-primary hover:bg-primary/90 disabled:hover:bg-primary",
+        secondary: "bg-secondary text-secondary-foreground border-secondary hover:bg-secondary/80 disabled:hover:bg-secondary",
+        outline: "bg-transparent text-primary border-primary hover:bg-primary hover:text-primary-foreground disabled:hover:bg-transparent disabled:hover:text-primary",
+        ghost: "bg-transparent text-foreground border-transparent hover:bg-accent hover:text-accent-foreground disabled:hover:bg-transparent",
+        danger: "bg-destructive text-destructive-foreground border-destructive hover:bg-destructive/90 disabled:hover:bg-destructive"
+      },
+      size: {
+        sm: "h-8 px-3 text-sm",
+        md: "h-10 px-4 text-sm",
+        lg: "h-12 px-6 text-base"
+      },
+      fullWidth: {
+        true: "w-full flex",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md",
+      fullWidth: false
+    }
+  }
+);
 function Button({
   children,
   variant = "primary",
@@ -16,19 +44,12 @@ function Button({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "button",
     {
-      className: cn.cn(
-        "skybin-button",
-        `skybin-button--${variant}`,
-        `skybin-button--${size}`,
-        fullWidth && "skybin-button--full-width",
-        loading && "skybin-button--loading",
-        className
-      ),
+      className: cn.cn(buttonVariants({ variant, size, fullWidth }), className),
       disabled: disabled || loading,
       ...props,
       children: [
-        loading && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "skybin-button__spinner" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn.cn("skybin-button__content", loading && "skybin-button__content--hidden"), children })
+        loading && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-4 border-2 border-current border-r-transparent rounded-full animate-spin" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn.cn(loading && "invisible"), children })
       ]
     }
   );

package/dist/cjs/components/Button/Button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.cjs","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactNode } from \"react\";\r\nimport { cn } from \"../../utils/cn\";\r\nimport \"./Button.css\";\r\n\r\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\r\n  /** The content of the button */\r\n  children: ReactNode;\r\n  /** The visual style variant of the button */\r\n  variant?: \"primary\" | \"secondary\" | \"outline\" | \"ghost\" | \"danger\";\r\n  /** The size of the button */\r\n  size?: \"sm\" | \"md\" | \"lg\";\r\n  /** Whether the button should take full width */\r\n  fullWidth?: boolean;\r\n  /** Whether the button is in a loading state */\r\n  loading?: boolean;\r\n}\r\n\r\n/**\r\n * A customizable button component with multiple variants and sizes\r\n */\r\nexport function Button({\r\n  children,\r\n  variant = \"primary\",\r\n  size = \"md\",\r\n  fullWidth = false,\r\n  loading = false,\r\n  disabled,\r\n  className,\r\n  ...props\r\n}: ButtonProps) {\r\n  return (\r\n    <button\r\n      className={cn(\r\n        \"skybin-button\",\r\n        `skybin-button--${variant}`,\r\n        `skybin-button--${size}`,\r\n        fullWidth && \"skybin-button--full-width\",\r\n        loading && \"skybin-button--loading\",\r\n        className\r\n      )}\r\n      disabled={disabled || loading}\r\n      {...props}\r\n    >\r\n      {loading && <span className=\"skybin-button__spinner\" />}\r\n      <span className={cn(\"skybin-button__content\", loading && \"skybin-button__content--hidden\")}>\r\n        {children}\r\n      </span>\r\n    </button>\r\n  );\r\n}\r\n"],"names":["jsxs","cn","jsx"],"mappings":";;;;;AAoBO,SAAS,OAAO;AAAA,EACrB;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAgB;AACd,SACEA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,GAAAA;AAAAA,QACT;AAAA,QACA,kBAAkB,OAAO;AAAA,QACzB,kBAAkB,IAAI;AAAA,QACtB,aAAa;AAAA,QACb,WAAW;AAAA,QACX;AAAA,MAAA;AAAA,MAEF,UAAU,YAAY;AAAA,MACrB,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,WAAWC,2BAAAA,IAAC,QAAA,EAAK,WAAU,yBAAA,CAAyB;AAAA,QACrDA,+BAAC,UAAK,WAAWD,GAAAA,GAAG,0BAA0B,WAAW,gCAAgC,GACtF,SAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;;"}
+{"version":3,"file":"Button.cjs","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactNode } from \"react\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { cn } from \"../../utils/cn\";\r\n\r\nconst buttonVariants = cva(\r\n  \"inline-flex items-center justify-center gap-2 font-medium rounded-md border transition-all cursor-pointer relative disabled:opacity-60 disabled:cursor-not-allowed focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\",\r\n  {\r\n    variants: {\r\n      variant: {\r\n        primary:\r\n          \"bg-primary text-primary-foreground border-primary hover:bg-primary/90 disabled:hover:bg-primary\",\r\n        secondary:\r\n          \"bg-secondary text-secondary-foreground border-secondary hover:bg-secondary/80 disabled:hover:bg-secondary\",\r\n        outline:\r\n          \"bg-transparent text-primary border-primary hover:bg-primary hover:text-primary-foreground disabled:hover:bg-transparent disabled:hover:text-primary\",\r\n        ghost:\r\n          \"bg-transparent text-foreground border-transparent hover:bg-accent hover:text-accent-foreground disabled:hover:bg-transparent\",\r\n        danger:\r\n          \"bg-destructive text-destructive-foreground border-destructive hover:bg-destructive/90 disabled:hover:bg-destructive\",\r\n      },\r\n      size: {\r\n        sm: \"h-8 px-3 text-sm\",\r\n        md: \"h-10 px-4 text-sm\",\r\n        lg: \"h-12 px-6 text-base\",\r\n      },\r\n      fullWidth: {\r\n        true: \"w-full flex\",\r\n        false: \"\",\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      variant: \"primary\",\r\n      size: \"md\",\r\n      fullWidth: false,\r\n    },\r\n  }\r\n);\r\n\r\nexport interface ButtonProps\r\n  extends ButtonHTMLAttributes<HTMLButtonElement>,\r\n    VariantProps<typeof buttonVariants> {\r\n  /** The content of the button */\r\n  children: ReactNode;\r\n  /** Whether the button is in a loading state */\r\n  loading?: boolean;\r\n}\r\n\r\n/**\r\n * A customizable button component with multiple variants and sizes\r\n */\r\nexport function Button({\r\n  children,\r\n  variant = \"primary\",\r\n  size = \"md\",\r\n  fullWidth = false,\r\n  loading = false,\r\n  disabled,\r\n  className,\r\n  ...props\r\n}: ButtonProps) {\r\n  return (\r\n    <button\r\n      className={cn(buttonVariants({ variant, size, fullWidth }), className)}\r\n      disabled={disabled || loading}\r\n      {...props}\r\n    >\r\n      {loading && (\r\n        <span className=\"size-4 border-2 border-current border-r-transparent rounded-full animate-spin\" />\r\n      )}\r\n      <span className={cn(loading && \"invisible\")}>{children}</span>\r\n    </button>\r\n  );\r\n}\r\n"],"names":["cva","jsxs","cn","jsx"],"mappings":";;;;;AAIA,MAAM,iBAAiBA,uBAAAA;AAAAA,EACrB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SACE;AAAA,QACF,WACE;AAAA,QACF,SACE;AAAA,QACF,OACE;AAAA,QACF,QACE;AAAA,MAAA;AAAA,MAEJ,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,MAEN,WAAW;AAAA,QACT,MAAM;AAAA,QACN,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,MACN,WAAW;AAAA,IAAA;AAAA,EACb;AAEJ;AAcO,SAAS,OAAO;AAAA,EACrB;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAgB;AACd,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,GAAAA,GAAG,eAAe,EAAE,SAAS,MAAM,UAAA,CAAW,GAAG,SAAS;AAAA,MACrE,UAAU,YAAY;AAAA,MACrB,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,WACCC,2BAAAA,IAAC,QAAA,EAAK,WAAU,gFAAA,CAAgF;AAAA,uCAEjG,QAAA,EAAK,WAAWD,GAAAA,GAAG,WAAW,WAAW,GAAI,SAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG7D;;"}

package/dist/cjs/components/Form/Checkbox.cjs

@@ -6,8 +6,8 @@ const reactHookForm = require("react-hook-form");
 const classVarianceAuthority = require("class-variance-authority");
 const cn = require("../../utils/cn.cjs");
 const context = require("./context.cjs");
-const checkbox = require("../ui/checkbox.cjs");
-const label = require("../ui/label.cjs");
+const checkbox = require("../../primitives/checkbox.cjs");
+const label = require("../../primitives/label.cjs");
 const checkboxSizeVariants = classVarianceAuthority.cva(
   "",
   {

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.cjs","sources":["../../../../src/components/Form/Checkbox.tsx"],"sourcesContent":["import { forwardRef, useId, useContext, useEffect } from \"react\";\r\nimport type { ReactNode, ComponentPropsWithoutRef } from \"react\";\r\nimport { useController, useFormContext as useRHFFormContext, type FieldValues, type FieldPath, type Control } from \"react-hook-form\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { cn } from \"../../utils/cn\";\r\nimport { FormConfigContext, type FormConfig, type FieldValidationRules } from \"../Form/context\";\r\nimport { Checkbox as ShadcnCheckbox } from \"../ui/checkbox\";\r\nimport { Label } from \"../ui/label\";\r\nimport type * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\r\n\r\nconst checkboxSizeVariants = cva(\r\n  \"\",\r\n  {\r\n    variants: {\r\n      size: {\r\n        sm: \"h-4 w-4\",\r\n        md: \"h-5 w-5\",\r\n        lg: \"h-6 w-6\",\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      size: \"md\",\r\n    },\r\n  }\r\n);\r\n\r\nconst labelVariants = cva(\r\n  \"text-sm font-medium cursor-pointer select-none\",\r\n  {\r\n    variants: {\r\n      required: {\r\n        true: \"after:content-['*'] after:ml-0.5 after:text-destructive\",\r\n        false: \"\",\r\n      },\r\n      disabled: {\r\n        true: \"cursor-not-allowed opacity-50\",\r\n        false: \"\",\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      required: false,\r\n      disabled: false,\r\n    },\r\n  }\r\n);\r\n\r\nexport interface CheckboxProps<\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n> extends Omit<ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, \"name\" | \"checked\" | \"onCheckedChange\" | \"required\">,\r\n    VariantProps<typeof checkboxSizeVariants> {\r\n  /** Field name - required for form integration */\r\n  name: TName;\r\n  /** Label text for the checkbox */\r\n  label?: ReactNode;\r\n  /** Helper text displayed below the checkbox */\r\n  helperText?: string;\r\n  /** Whether to show the error message */\r\n  showError?: boolean;\r\n  /** Custom error message (overrides form error) */\r\n  error?: string;\r\n  /** External control (for use outside Form) */\r\n  control?: Control<TFieldValues>;\r\n  /** Variant style */\r\n  variant?: \"default\" | \"error\";\r\n  \r\n  // Validation props\r\n  /** Field is required (must be checked) */\r\n  required?: boolean | string;\r\n  /** Custom validation function */\r\n  validate?: (value: unknown) => boolean | string | Promise<boolean | string>;\r\n}\r\n\r\n/**\r\n * Checkbox component with form integration\r\n * \r\n * This is a wrapper around the shadcn/ui Checkbox primitive that adds:\r\n * - Form integration with react-hook-form\r\n * - Automatic validation registration\r\n * - Label, helper text, and error message support\r\n * \r\n * @example\r\n * ```tsx\r\n * // Inside a Form component\r\n * <Checkbox name=\"terms\" label=\"I agree to the terms and conditions\" required />\r\n * <Checkbox name=\"newsletter\" label=\"Subscribe to newsletter\" />\r\n * ```\r\n */\r\nfunction CheckboxInner<\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n>(\r\n  {\r\n    name,\r\n    label,\r\n    helperText,\r\n    showError = true,\r\n    error: customError,\r\n    size,\r\n    variant,\r\n    className,\r\n    disabled,\r\n    id: providedId,\r\n    control: externalControl,\r\n    // Validation props\r\n    required,\r\n    validate,\r\n    ...props\r\n  }: CheckboxProps<TFieldValues, TName>,\r\n  ref: React.ForwardedRef<React.ElementRef<typeof CheckboxPrimitive.Root>>\r\n) {\r\n  const generatedId = useId();\r\n  const inputId = providedId ?? generatedId;\r\n  \r\n  // Try to get form context\r\n  const formConfigContext = useContext(FormConfigContext);\r\n  const formConfig: FormConfig = formConfigContext ?? {};\r\n  \r\n  // Get form context from react-hook-form\r\n  const rhfContext = useRHFFormContext<TFieldValues>();\r\n  const control = externalControl ?? rhfContext?.control;\r\n\r\n  // Register validation rules with the form\r\n  useEffect(() => {\r\n    if (formConfigContext?.registerFieldValidation) {\r\n      const rules: FieldValidationRules = {};\r\n      \r\n      if (required !== undefined) rules.required = required;\r\n      if (validate !== undefined) rules.validate = validate;\r\n\r\n      formConfigContext.registerFieldValidation({\r\n        name: name as string,\r\n        type: \"boolean\",\r\n        rules,\r\n      });\r\n\r\n      return () => {\r\n        formConfigContext.unregisterFieldValidation(name as string);\r\n      };\r\n    }\r\n  }, [formConfigContext, name, required, validate]);\r\n\r\n  // Use controller for form integration\r\n  const { field, fieldState } = useController<TFieldValues, TName>({\r\n    name,\r\n    control,\r\n  });\r\n\r\n  const fieldError = fieldState.error?.message;\r\n  const errorMessage = customError ?? fieldError;\r\n  const hasError = !!errorMessage;\r\n  \r\n  // Merge sizes - prop takes precedence over form config\r\n  const effectiveSize = size ?? formConfig.size ?? \"md\";\r\n  const effectiveDisabled = disabled ?? formConfig.disabled;\r\n  \r\n  // Determine variant based on error state\r\n  const effectiveVariant = hasError ? \"error\" : variant;\r\n\r\n  return (\r\n    <div className=\"space-y-1.5\">\r\n      <div className=\"flex items-center gap-2\">\r\n        <ShadcnCheckbox\r\n          {...props}\r\n          ref={ref}\r\n          id={inputId}\r\n          checked={field.value ?? false}\r\n          onCheckedChange={(checked) => field.onChange(checked === true)}\r\n          onBlur={field.onBlur}\r\n          disabled={effectiveDisabled}\r\n          aria-invalid={hasError}\r\n          aria-describedby={\r\n            hasError\r\n              ? `${inputId}-error`\r\n              : helperText\r\n              ? `${inputId}-helper`\r\n              : undefined\r\n          }\r\n          className={cn(\r\n            checkboxSizeVariants({ size: effectiveSize }),\r\n            effectiveVariant === \"error\" && \"border-destructive\",\r\n            className\r\n          )}\r\n        />\r\n        \r\n        {label && (\r\n          <Label\r\n            htmlFor={inputId}\r\n            className={labelVariants({ required: !!required, disabled: effectiveDisabled })}\r\n          >\r\n            {label}\r\n          </Label>\r\n        )}\r\n      </div>\r\n\r\n      {showError && hasError && (\r\n        <p\r\n          id={`${inputId}-error`}\r\n          className=\"text-sm text-destructive ml-7\"\r\n          role=\"alert\"\r\n        >\r\n          {errorMessage}\r\n        </p>\r\n      )}\r\n      \r\n      {helperText && !hasError && (\r\n        <p\r\n          id={`${inputId}-helper`}\r\n          className=\"text-sm text-muted-foreground ml-7\"\r\n        >\r\n          {helperText}\r\n        </p>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n\r\n// Use forwardRef with generic support\r\nexport const Checkbox = forwardRef(CheckboxInner) as <\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n>(\r\n  props: CheckboxProps<TFieldValues, TName> & { ref?: React.ForwardedRef<React.ElementRef<typeof CheckboxPrimitive.Root>> }\r\n) => React.ReactElement;\r\n\r\n(Checkbox as React.FC).displayName = \"Checkbox\";\r\n"],"names":["cva","label","useId","useContext","FormConfigContext","useRHFFormContext","useEffect","useController","jsxs","jsx","ShadcnCheckbox","cn","Label","forwardRef"],"mappings":"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"}
+{"version":3,"file":"Checkbox.cjs","sources":["../../../../src/components/Form/Checkbox.tsx"],"sourcesContent":["import { 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":["cva","label","useId","useContext","FormConfigContext","useRHFFormContext","useEffect","useController","jsxs","jsx","ShadcnCheckbox","cn","Label","forwardRef"],"mappings":"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"}

package/dist/cjs/components/Form/Form.cjs

@@ -22,38 +22,30 @@ function Form({
 }) {
   const mergedConfig = { ...context.defaultFormConfig, ...config };
   const {
-    registerFieldValidation: baseRegister,
-    unregisterFieldValidation: baseUnregister,
+    registerFieldValidation,
+    unregisterFieldValidation,
     getValidationSchema
   } = context.useFieldValidationRegistry();
-  const [schemaVersion, setSchemaVersion] = React.useState(0);
-  const registerFieldValidation = React.useCallback((field) => {
-    baseRegister(field);
-    setSchemaVersion((v) => v + 1);
-  }, [baseRegister]);
-  const unregisterFieldValidation = React.useCallback((name) => {
-    baseUnregister(name);
-    setSchemaVersion((v) => v + 1);
-  }, [baseUnregister]);
-  const buildResolver = React.useCallback(() => {
-    if (customResolver) {
-      return customResolver;
-    }
-    const fieldSchema = getValidationSchema();
-    let finalSchema;
-    if (baseSchema) {
+  const dynamicResolver = React.useCallback(
+    async (vals, context2, options) => {
+      if (customResolver) {
+        return customResolver(vals, context2, options);
+      }
+      const fieldSchema = getValidationSchema();
+      let finalSchema;
       if (baseSchema instanceof zod.z.ZodObject) {
         finalSchema = baseSchema.merge(fieldSchema);
       } else {
-        finalSchema = fieldSchema;
+        finalSchema = baseSchema ?? fieldSchema;
       }
-    } else {
-      finalSchema = fieldSchema;
-    }
-    return zod$1.zodResolver(finalSchema);
-  }, [baseSchema, customResolver, getValidationSchema, schemaVersion]);
+      return zod$1.zodResolver(finalSchema)(vals, context2, options);
+    },
+    // getValidationSchema reads a ref — always current, intentionally omitted.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [baseSchema, customResolver]
+  );
   const internalForm = reactHookForm.useForm({
-    resolver: buildResolver(),
+    resolver: dynamicResolver,
     defaultValues,
     values,
     mode,
@@ -69,20 +61,43 @@ function Form({
       form.handleSubmit(onSubmit, onError)(e);
     }
   };
-  const contextValue = {
-    form,
-    registerFieldValidation,
-    unregisterFieldValidation,
-    getValidationSchema,
-    triggerValidation,
-    ...mergedConfig
-  };
+  const contextValue = React.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__ */ jsxRuntime.jsx(context.FormConfigContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(reactHookForm.FormProvider, { ...form, children: /* @__PURE__ */ jsxRuntime.jsx(
     "form",
     {
       ...formProps,
       onSubmit: handleSubmit,
-      className: formProps.className,
       noValidate: true,
       children
     }

package/dist/cjs/components/Form/Form.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Form.cjs","sources":["../../../../src/components/Form/Form.tsx"],"sourcesContent":["import { useCallback, useState, 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  // Field validation registry\r\n  const {\r\n    registerFieldValidation: baseRegister,\r\n    unregisterFieldValidation: baseUnregister,\r\n    getValidationSchema,\r\n  } = useFieldValidationRegistry();\r\n\r\n  // Track schema version for re-renders\r\n  const [schemaVersion, setSchemaVersion] = useState(0);\r\n\r\n  // Wrap register to trigger re-render\r\n  const registerFieldValidation = useCallback((field: Parameters<typeof baseRegister>[0]) => {\r\n    baseRegister(field);\r\n    setSchemaVersion(v => v + 1);\r\n  }, [baseRegister]);\r\n\r\n  // Wrap unregister to trigger re-render\r\n  const unregisterFieldValidation = useCallback((name: string) => {\r\n    baseUnregister(name);\r\n    setSchemaVersion(v => v + 1);\r\n  }, [baseUnregister]);\r\n\r\n  // Build dynamic resolver that combines base schema with field validations\r\n  const buildResolver = useCallback((): Resolver<TFieldValues> | undefined => {\r\n    if (customResolver) {\r\n      return customResolver;\r\n    }\r\n\r\n    // Get field-based schema\r\n    const fieldSchema = getValidationSchema();\r\n    \r\n    // Merge with base schema if provided\r\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n    let finalSchema: z.ZodType<any, any, any>;\r\n    \r\n    if (baseSchema) {\r\n      // Merge base schema with field schema\r\n      // Field schema takes precedence for overlapping fields\r\n      if (baseSchema instanceof z.ZodObject) {\r\n        finalSchema = baseSchema.merge(fieldSchema);\r\n      } else {\r\n        finalSchema = fieldSchema;\r\n      }\r\n    } else {\r\n      finalSchema = fieldSchema;\r\n    }\r\n\r\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n    return zodResolver(finalSchema) as any;\r\n  // eslint-disable-next-line react-hooks/exhaustive-deps\r\n  }, [baseSchema, customResolver, getValidationSchema, schemaVersion]);\r\n\r\n  // Create internal form\r\n  const internalForm = useForm<TFieldValues>({\r\n    resolver: buildResolver(),\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: FormContextValue<TFieldValues> = {\r\n    form,\r\n    registerFieldValidation,\r\n    unregisterFieldValidation,\r\n    getValidationSchema,\r\n    triggerValidation,\r\n    ...mergedConfig,\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          className={formProps.className}\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":["defaultFormConfig","useFieldValidationRegistry","useState","useCallback","z","zodResolver","useForm","jsx","FormConfigContext","RHFFormProvider"],"mappings":";;;;;;;;AAgFO,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,GAAGA,QAAAA,mBAAmB,GAAG,OAAA;AAGhD,QAAM;AAAA,IACJ,yBAAyB;AAAA,IACzB,2BAA2B;AAAA,IAC3B;AAAA,EAAA,IACEC,mCAAA;AAGJ,QAAM,CAAC,eAAe,gBAAgB,IAAIC,MAAAA,SAAS,CAAC;AAGpD,QAAM,0BAA0BC,kBAAY,CAAC,UAA8C;AACzF,iBAAa,KAAK;AAClB,qBAAiB,CAAA,MAAK,IAAI,CAAC;AAAA,EAC7B,GAAG,CAAC,YAAY,CAAC;AAGjB,QAAM,4BAA4BA,kBAAY,CAAC,SAAiB;AAC9D,mBAAe,IAAI;AACnB,qBAAiB,CAAA,MAAK,IAAI,CAAC;AAAA,EAC7B,GAAG,CAAC,cAAc,CAAC;AAGnB,QAAM,gBAAgBA,MAAAA,YAAY,MAA0C;AAC1E,QAAI,gBAAgB;AAClB,aAAO;AAAA,IACT;AAGA,UAAM,cAAc,oBAAA;AAIpB,QAAI;AAEJ,QAAI,YAAY;AAGd,UAAI,sBAAsBC,IAAAA,EAAE,WAAW;AACrC,sBAAc,WAAW,MAAM,WAAW;AAAA,MAC5C,OAAO;AACL,sBAAc;AAAA,MAChB;AAAA,IACF,OAAO;AACL,oBAAc;AAAA,IAChB;AAGA,WAAOC,MAAAA,YAAY,WAAW;AAAA,EAEhC,GAAG,CAAC,YAAY,gBAAgB,qBAAqB,aAAa,CAAC;AAGnE,QAAM,eAAeC,cAAAA,QAAsB;AAAA,IACzC,UAAU,cAAA;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAED,QAAM,OAAO,gBAAgB;AAG7B,QAAM,oBAAoBH,kBAAY,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,eAA+C;AAAA,IACnD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA;AAGL,SACEI,2BAAAA,IAACC,QAAAA,kBAAkB,UAAlB,EAA2B,OAAO,cACjC,UAAAD,2BAAAA,IAACE,cAAAA,cAAA,EAAiB,GAAG,MACnB,UAAAF,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,UAAU;AAAA,MACV,WAAW,UAAU;AAAA,MACrB,YAAU;AAAA,MAET;AAAA,IAAA;AAAA,EAAA,GAEL,EAAA,CACF;AAEJ;AAEA,KAAK,cAAc;;"}
+{"version":3,"file":"Form.cjs","sources":["../../../../src/components/Form/Form.tsx"],"sourcesContent":["import { 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":["defaultFormConfig","useFieldValidationRegistry","useCallback","context","z","zodResolver","useForm","useMemo","jsx","FormConfigContext","RHFFormProvider"],"mappings":";;;;;;;;AAgFO,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,GAAGA,QAAAA,mBAAmB,GAAG,OAAA;AAEhD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACEC,mCAAA;AAIJ,QAAM,kBAAkBC,MAAAA;AAAAA,IACtB,OAAO,MAAMC,UAAS,YAAY;AAChC,UAAI,gBAAgB;AAClB,eAAO,eAAe,MAAMA,UAAS,OAAO;AAAA,MAC9C;AACA,YAAM,cAAc,oBAAA;AAEpB,UAAI;AACJ,UAAI,sBAAsBC,IAAAA,EAAE,WAAW;AACrC,sBAAc,WAAW,MAAM,WAAW;AAAA,MAC5C,OAAO;AACL,sBAAc,cAAc;AAAA,MAC9B;AACA,aAAOC,MAAAA,YAAY,WAAW,EAAE,MAAMF,UAAS,OAAO;AAAA,IACxD;AAAA;AAAA;AAAA,IAGA,CAAC,YAAY,cAAc;AAAA,EAAA;AAG7B,QAAM,eAAeG,cAAAA,QAAsB;AAAA,IACzC,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAED,QAAM,OAAO,gBAAgB;AAG7B,QAAM,oBAAoBJ,kBAAY,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,eAAeK,MAAAA;AAAAA,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,SACEC,2BAAAA,IAACC,QAAAA,kBAAkB,UAAlB,EAA2B,OAAO,cACjC,UAAAD,2BAAAA,IAACE,cAAAA,cAAA,EAAiB,GAAG,MACnB,UAAAF,2BAAAA;AAAAA,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;;"}

package/dist/cjs/components/Form/Radio.cjs

@@ -6,8 +6,8 @@ const reactHookForm = require("react-hook-form");
 const classVarianceAuthority = require("class-variance-authority");
 const cn = require("../../utils/cn.cjs");
 const context = require("./context.cjs");
-const radioGroup = require("../ui/radio-group.cjs");
-const label = require("../ui/label.cjs");
+const radioGroup = require("../../primitives/radio-group.cjs");
+const label = require("../../primitives/label.cjs");
 const radioSizeVariants = classVarianceAuthority.cva(
   "",
   {

package/dist/cjs/components/Form/Radio.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.cjs","sources":["../../../../src/components/Form/Radio.tsx"],"sourcesContent":["import { forwardRef, useId, useContext, createContext, useEffect } from \"react\";\r\nimport type { ReactNode, ComponentPropsWithoutRef } from \"react\";\r\nimport { useController, useFormContext as useRHFFormContext, type FieldValues, type FieldPath, type Control } from \"react-hook-form\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { cn } from \"../../utils/cn\";\r\nimport { FormConfigContext, type FormConfig, type FieldValidationRules } from \"../Form/context\";\r\nimport { RadioGroup as ShadcnRadioGroup, RadioGroupItem as ShadcnRadioGroupItem } from \"../ui/radio-group\";\r\nimport { Label } from \"../ui/label\";\r\nimport type * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\";\r\n\r\nconst radioSizeVariants = cva(\r\n  \"\",\r\n  {\r\n    variants: {\r\n      size: {\r\n        sm: \"h-4 w-4\",\r\n        md: \"h-5 w-5\",\r\n        lg: \"h-6 w-6\",\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      size: \"md\",\r\n    },\r\n  }\r\n);\r\n\r\nconst labelVariants = cva(\r\n  \"text-sm font-medium cursor-pointer select-none\",\r\n  {\r\n    variants: {\r\n      disabled: {\r\n        true: \"cursor-not-allowed opacity-50\",\r\n        false: \"\",\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      disabled: false,\r\n    },\r\n  }\r\n);\r\n\r\n// Radio Group Context\r\ninterface RadioGroupContextValue {\r\n  name: string;\r\n  value: string | number | undefined;\r\n  onChange: (value: string | number) => void;\r\n  disabled?: boolean;\r\n  size?: \"sm\" | \"md\" | \"lg\";\r\n}\r\n\r\nconst RadioGroupContext = createContext<RadioGroupContextValue | null>(null);\r\n\r\nexport interface RadioOption {\r\n  label: ReactNode;\r\n  value: string | number;\r\n  disabled?: boolean;\r\n}\r\n\r\nexport interface RadioGroupProps<\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n> extends VariantProps<typeof radioSizeVariants> {\r\n  /** Field name - required for form integration */\r\n  name: TName;\r\n  /** Label text for the radio group */\r\n  label?: string;\r\n  /** Helper text displayed below the radio group */\r\n  helperText?: string;\r\n  /** Whether to show the error message */\r\n  showError?: boolean;\r\n  /** Custom error message (overrides form error) */\r\n  error?: string;\r\n  /** Options for the radio group */\r\n  options?: RadioOption[];\r\n  /** Layout direction */\r\n  direction?: \"horizontal\" | \"vertical\";\r\n  /** External control (for use outside Form) */\r\n  control?: Control<TFieldValues>;\r\n  /** Children (alternative to options prop) */\r\n  children?: ReactNode;\r\n  /** Disabled state */\r\n  disabled?: boolean;\r\n  /** Additional class name */\r\n  className?: string;\r\n  /** Variant style */\r\n  variant?: \"default\" | \"error\";\r\n  \r\n  // Validation props\r\n  /** Field is required */\r\n  required?: boolean | string;\r\n  /** Custom validation function */\r\n  validate?: (value: unknown) => boolean | string | Promise<boolean | string>;\r\n}\r\n\r\n/**\r\n * RadioGroup component with form integration\r\n * \r\n * This is a wrapper around the shadcn/ui RadioGroup primitive that adds:\r\n * - Form integration with react-hook-form\r\n * - Automatic validation registration\r\n * - Label, helper text, and error message support\r\n * \r\n * @example\r\n * ```tsx\r\n * // Inside a Form component\r\n * <RadioGroup \r\n *   name=\"gender\" \r\n *   label=\"Gender\"\r\n *   required\r\n *   options={[\r\n *     { label: \"Male\", value: \"male\" },\r\n *     { label: \"Female\", value: \"female\" },\r\n *     { label: \"Other\", value: \"other\" },\r\n *   ]} \r\n * />\r\n * ```\r\n */\r\nexport function RadioGroup<\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n>({\r\n  name,\r\n  label,\r\n  helperText,\r\n  showError = true,\r\n  error: customError,\r\n  size,\r\n  variant,\r\n  options = [],\r\n  direction = \"vertical\",\r\n  control: externalControl,\r\n  children,\r\n  disabled,\r\n  className,\r\n  // Validation props\r\n  required,\r\n  validate,\r\n}: RadioGroupProps<TFieldValues, TName>) {\r\n  const generatedId = useId();\r\n  \r\n  // Try to get form context\r\n  const formConfigContext = useContext(FormConfigContext);\r\n  const formConfig: FormConfig = formConfigContext ?? {};\r\n  \r\n  // Get form context from react-hook-form\r\n  const rhfContext = useRHFFormContext<TFieldValues>();\r\n  const control = externalControl ?? rhfContext?.control;\r\n\r\n  // Register validation rules with the form\r\n  useEffect(() => {\r\n    if (formConfigContext?.registerFieldValidation) {\r\n      const rules: FieldValidationRules = {};\r\n      \r\n      if (required !== undefined) rules.required = required;\r\n      if (validate !== undefined) rules.validate = validate;\r\n\r\n      formConfigContext.registerFieldValidation({\r\n        name: name as string,\r\n        type: \"string\",\r\n        rules,\r\n      });\r\n\r\n      return () => {\r\n        formConfigContext.unregisterFieldValidation(name as string);\r\n      };\r\n    }\r\n  }, [formConfigContext, name, required, validate]);\r\n\r\n  // Use controller for form integration\r\n  const { field, fieldState } = useController<TFieldValues, TName>({\r\n    name,\r\n    control,\r\n  });\r\n\r\n  const fieldError = fieldState.error?.message;\r\n  const errorMessage = customError ?? fieldError;\r\n  const hasError = !!errorMessage;\r\n  \r\n  // Merge sizes - prop takes precedence over form config\r\n  const effectiveSize = size ?? formConfig.size ?? \"md\";\r\n  const effectiveDisabled = disabled ?? formConfig.disabled;\r\n  const effectiveVariant = hasError ? \"error\" : variant;\r\n\r\n  const contextValue: RadioGroupContextValue = {\r\n    name: name as string,\r\n    value: field.value,\r\n    onChange: field.onChange,\r\n    disabled: effectiveDisabled,\r\n    size: effectiveSize,\r\n  };\r\n\r\n  return (\r\n    <div className={cn(\"space-y-2\", className)}>\r\n      {label && (\r\n        <Label className={cn(\r\n          \"block\",\r\n          required && \"after:content-['*'] after:ml-0.5 after:text-destructive\"\r\n        )}>\r\n          {label}\r\n          {formConfig.colon && \":\"}\r\n        </Label>\r\n      )}\r\n      \r\n      <RadioGroupContext.Provider value={contextValue}>\r\n        <ShadcnRadioGroup\r\n          value={field.value?.toString()}\r\n          onValueChange={(value) => field.onChange(value)}\r\n          disabled={effectiveDisabled}\r\n          aria-labelledby={label ? `${generatedId}-label` : undefined}\r\n          className={cn(\r\n            direction === \"horizontal\" && \"flex flex-row gap-4\",\r\n            direction === \"vertical\" && \"flex flex-col gap-2\"\r\n          )}\r\n        >\r\n          {children ?? options.map((option) => (\r\n            <RadioItem\r\n              key={option.value}\r\n              value={option.value}\r\n              disabled={option.disabled}\r\n              size={effectiveSize}\r\n              variant={effectiveVariant}\r\n            >\r\n              {option.label}\r\n            </RadioItem>\r\n          ))}\r\n        </ShadcnRadioGroup>\r\n      </RadioGroupContext.Provider>\r\n\r\n      {showError && hasError && (\r\n        <p className=\"text-sm text-destructive\" role=\"alert\">\r\n          {errorMessage}\r\n        </p>\r\n      )}\r\n      \r\n      {helperText && !hasError && (\r\n        <p className=\"text-sm text-muted-foreground\">\r\n          {helperText}\r\n        </p>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n\r\nRadioGroup.displayName = \"RadioGroup\";\r\n\r\nexport interface RadioItemProps extends Omit<ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>, \"value\">,\r\n    VariantProps<typeof radioSizeVariants> {\r\n  /** Value for this radio option */\r\n  value: string | number;\r\n  /** Label for this radio option */\r\n  children?: ReactNode;\r\n  /** Variant style */\r\n  variant?: \"default\" | \"error\";\r\n}\r\n\r\n/**\r\n * RadioItem component - must be used within RadioGroup\r\n * \r\n * This is a wrapper around the shadcn/ui RadioGroupItem primitive\r\n */\r\nfunction RadioItemInner(\r\n  {\r\n    value,\r\n    children,\r\n    size,\r\n    variant,\r\n    className,\r\n    disabled,\r\n    id: providedId,\r\n    ...props\r\n  }: RadioItemProps,\r\n  ref: React.ForwardedRef<React.ElementRef<typeof RadioGroupPrimitive.Item>>\r\n) {\r\n  const generatedId = useId();\r\n  const inputId = providedId ?? generatedId;\r\n  \r\n  const groupContext = useContext(RadioGroupContext);\r\n  \r\n  const effectiveSize = size ?? groupContext?.size ?? \"md\";\r\n  const effectiveDisabled = disabled ?? groupContext?.disabled;\r\n\r\n  return (\r\n    <div className=\"flex items-center gap-2\">\r\n      <ShadcnRadioGroupItem\r\n        {...props}\r\n        ref={ref}\r\n        id={inputId}\r\n        value={value.toString()}\r\n        disabled={effectiveDisabled}\r\n        className={cn(\r\n          radioSizeVariants({ size: effectiveSize }),\r\n          variant === \"error\" && \"border-destructive\",\r\n          className\r\n        )}\r\n      />\r\n      \r\n      {children && (\r\n        <Label\r\n          htmlFor={inputId}\r\n          className={labelVariants({ disabled: effectiveDisabled })}\r\n        >\r\n          {children}\r\n        </Label>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n\r\nexport const RadioItem = forwardRef(RadioItemInner);\r\nRadioItem.displayName = \"RadioItem\";\r\n"],"names":["cva","createContext","label","useId","useContext","FormConfigContext","useRHFFormContext","useEffect","useController","cn","jsxs","Label","jsx","ShadcnRadioGroup","ShadcnRadioGroupItem","forwardRef"],"mappings":"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"}
+{"version":3,"file":"Radio.cjs","sources":["../../../../src/components/Form/Radio.tsx"],"sourcesContent":["import { forwardRef, useId, useContext, createContext, 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 { RadioGroup as ShadcnRadioGroup, RadioGroupItem as ShadcnRadioGroupItem } from \"../../primitives/radio-group\";\nimport { Label } from \"../../primitives/label\";\nimport type * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\";\n\nconst radioSizeVariants = 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      disabled: {\n        true: \"cursor-not-allowed opacity-50\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      disabled: false,\n    },\n  }\n);\n\n// Radio Group Context\ninterface RadioGroupContextValue {\n  name: string;\n  value: string | number | undefined;\n  onChange: (value: string | number) => void;\n  disabled?: boolean;\n  size?: \"sm\" | \"md\" | \"lg\";\n}\n\nconst RadioGroupContext = createContext<RadioGroupContextValue | null>(null);\n\nexport interface RadioOption {\n  label: ReactNode;\n  value: string | number;\n  disabled?: boolean;\n}\n\nexport interface RadioGroupProps<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n> extends VariantProps<typeof radioSizeVariants> {\n  /** Field name - required for form integration */\n  name: TName;\n  /** Label text for the radio group */\n  label?: string;\n  /** Helper text displayed below the radio group */\n  helperText?: string;\n  /** Whether to show the error message */\n  showError?: boolean;\n  /** Custom error message (overrides form error) */\n  error?: string;\n  /** Options for the radio group */\n  options?: RadioOption[];\n  /** Layout direction */\n  direction?: \"horizontal\" | \"vertical\";\n  /** External control (for use outside Form) */\n  control?: Control<TFieldValues>;\n  /** Children (alternative to options prop) */\n  children?: ReactNode;\n  /** Disabled state */\n  disabled?: boolean;\n  /** Additional class name */\n  className?: string;\n  /** Variant style */\n  variant?: \"default\" | \"error\";\n  \n  // Validation props\n  /** Field is required */\n  required?: boolean | string;\n  /** Custom validation function */\n  validate?: (value: unknown) => boolean | string | Promise<boolean | string>;\n}\n\n/**\n * RadioGroup component with form integration\n * \n * This is a wrapper around the shadcn/ui RadioGroup 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 * <RadioGroup \n *   name=\"gender\" \n *   label=\"Gender\"\n *   required\n *   options={[\n *     { label: \"Male\", value: \"male\" },\n *     { label: \"Female\", value: \"female\" },\n *     { label: \"Other\", value: \"other\" },\n *   ]} \n * />\n * ```\n */\nexport function RadioGroup<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>({\n  name,\n  label,\n  helperText,\n  showError = true,\n  error: customError,\n  size,\n  variant,\n  options = [],\n  direction = \"vertical\",\n  control: externalControl,\n  children,\n  disabled,\n  className,\n  // Validation props\n  required,\n  validate,\n}: RadioGroupProps<TFieldValues, TName>) {\n  const generatedId = useId();\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: \"string\",\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  const effectiveVariant = hasError ? \"error\" : variant;\n\n  const contextValue: RadioGroupContextValue = {\n    name: name as string,\n    value: field.value,\n    onChange: field.onChange,\n    disabled: effectiveDisabled,\n    size: effectiveSize,\n  };\n\n  return (\n    <div className={cn(\"space-y-2\", className)}>\n      {label && (\n        <Label className={cn(\n          \"block\",\n          required && \"after:content-['*'] after:ml-0.5 after:text-destructive\"\n        )}>\n          {label}\n          {formConfig.colon && \":\"}\n        </Label>\n      )}\n      \n      <RadioGroupContext.Provider value={contextValue}>\n        <ShadcnRadioGroup\n          value={field.value?.toString()}\n          onValueChange={(value) => field.onChange(value)}\n          disabled={effectiveDisabled}\n          aria-labelledby={label ? `${generatedId}-label` : undefined}\n          className={cn(\n            direction === \"horizontal\" && \"flex flex-row gap-4\",\n            direction === \"vertical\" && \"flex flex-col gap-2\"\n          )}\n        >\n          {children ?? options.map((option) => (\n            <RadioItem\n              key={option.value}\n              value={option.value}\n              disabled={option.disabled}\n              size={effectiveSize}\n              variant={effectiveVariant}\n            >\n              {option.label}\n            </RadioItem>\n          ))}\n        </ShadcnRadioGroup>\n      </RadioGroupContext.Provider>\n\n      {showError && hasError && (\n        <p className=\"text-sm text-destructive\" role=\"alert\">\n          {errorMessage}\n        </p>\n      )}\n      \n      {helperText && !hasError && (\n        <p className=\"text-sm text-muted-foreground\">\n          {helperText}\n        </p>\n      )}\n    </div>\n  );\n}\n\nRadioGroup.displayName = \"RadioGroup\";\n\nexport interface RadioItemProps extends Omit<ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>, \"value\">,\n    VariantProps<typeof radioSizeVariants> {\n  /** Value for this radio option */\n  value: string | number;\n  /** Label for this radio option */\n  children?: ReactNode;\n  /** Variant style */\n  variant?: \"default\" | \"error\";\n}\n\n/**\n * RadioItem component - must be used within RadioGroup\n * \n * This is a wrapper around the shadcn/ui RadioGroupItem primitive\n */\nfunction RadioItemInner(\n  {\n    value,\n    children,\n    size,\n    variant,\n    className,\n    disabled,\n    id: providedId,\n    ...props\n  }: RadioItemProps,\n  ref: React.ForwardedRef<React.ElementRef<typeof RadioGroupPrimitive.Item>>\n) {\n  const generatedId = useId();\n  const inputId = providedId ?? generatedId;\n  \n  const groupContext = useContext(RadioGroupContext);\n  \n  const effectiveSize = size ?? groupContext?.size ?? \"md\";\n  const effectiveDisabled = disabled ?? groupContext?.disabled;\n\n  return (\n    <div className=\"flex items-center gap-2\">\n      <ShadcnRadioGroupItem\n        {...props}\n        ref={ref}\n        id={inputId}\n        value={value.toString()}\n        disabled={effectiveDisabled}\n        className={cn(\n          radioSizeVariants({ size: effectiveSize }),\n          variant === \"error\" && \"border-destructive\",\n          className\n        )}\n      />\n      \n      {children && (\n        <Label\n          htmlFor={inputId}\n          className={labelVariants({ disabled: effectiveDisabled })}\n        >\n          {children}\n        </Label>\n      )}\n    </div>\n  );\n}\n\nexport const RadioItem = forwardRef(RadioItemInner);\nRadioItem.displayName = \"RadioItem\";\n"],"names":["cva","createContext","label","useId","useContext","FormConfigContext","useRHFFormContext","useEffect","useController","cn","jsxs","Label","jsx","ShadcnRadioGroup","ShadcnRadioGroupItem","forwardRef"],"mappings":";;;;;;;;;;AAUA,MAAM,oBAAoBA,uBAAAA;AAAAA,EACxB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,IACN;AAAA,IAEF,iBAAiB;AAAA,MACf,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ;AAEA,MAAM,gBAAgBA,uBAAAA;AAAAA,EACpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,UAAU;AAAA,QACR,MAAM;AAAA,QACN,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF,iBAAiB;AAAA,MACf,UAAU;AAAA,IAAA;AAAA,EACZ;AAEJ;AAWA,MAAM,oBAAoBC,MAAAA,cAA6C,IAAI;AAmEpE,SAAS,WAGd;AAAA,EACA;AAAA,EAAA,OACAC;AAAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,UAAU,CAAA;AAAA,EACV,YAAY;AAAA,EACZ,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AACF,GAAyC;AACvC,QAAM,cAAcC,MAAAA,MAAA;AAGpB,QAAM,oBAAoBC,MAAAA,WAAWC,yBAAiB;AACtD,QAAM,aAAyB,qBAAqB,CAAA;AAGpD,QAAM,aAAaC,cAAAA,eAAA;AACnB,QAAM,UAAU,mBAAmB,YAAY;AAG/CC,QAAAA,UAAU,MAAM;AACd,QAAI,mBAAmB,yBAAyB;AAC9C,YAAM,QAA8B,CAAA;AAEpC,UAAI,aAAa,OAAW,OAAM,WAAW;AAC7C,UAAI,aAAa,OAAW,OAAM,WAAW;AAE7C,wBAAkB,wBAAwB;AAAA,QACxC;AAAA,QACA,MAAM;AAAA,QACN;AAAA,MAAA,CACD;AAED,aAAO,MAAM;AACX,0BAAkB,0BAA0B,IAAc;AAAA,MAC5D;AAAA,IACF;AAAA,EACF,GAAG,CAAC,mBAAmB,MAAM,UAAU,QAAQ,CAAC;AAGhD,QAAM,EAAE,OAAO,WAAA,IAAeC,4BAAmC;AAAA,IAC/D;AAAA,IACA;AAAA,EAAA,CACD;AAED,QAAM,aAAa,WAAW,OAAO;AACrC,QAAM,eAAe,eAAe;AACpC,QAAM,WAAW,CAAC,CAAC;AAGnB,QAAM,gBAAgB,QAAQ,WAAW,QAAQ;AACjD,QAAM,oBAAoB,YAAY,WAAW;AACjD,QAAM,mBAAmB,WAAW,UAAU;AAE9C,QAAM,eAAuC;AAAA,IAC3C;AAAA,IACA,OAAO,MAAM;AAAA,IACb,UAAU,MAAM;AAAA,IAChB,UAAU;AAAA,IACV,MAAM;AAAA,EAAA;AAGR,yCACG,OAAA,EAAI,WAAWC,GAAAA,GAAG,aAAa,SAAS,GACtC,UAAA;AAAA,IAAAP,WACCQ,2BAAAA,KAACC,eAAM,WAAWF,GAAAA;AAAAA,MAChB;AAAA,MACA,YAAY;AAAA,IAAA,GAEX,UAAA;AAAA,MAAAP;AAAAA,MACA,WAAW,SAAS;AAAA,IAAA,GACvB;AAAA,IAGFU,2BAAAA,IAAC,kBAAkB,UAAlB,EAA2B,OAAO,cACjC,UAAAA,2BAAAA;AAAAA,MAACC,WAAAA;AAAAA,MAAA;AAAA,QACC,OAAO,MAAM,OAAO,SAAA;AAAA,QACpB,eAAe,CAAC,UAAU,MAAM,SAAS,KAAK;AAAA,QAC9C,UAAU;AAAA,QACV,mBAAiBX,UAAQ,GAAG,WAAW,WAAW;AAAA,QAClD,WAAWO,GAAAA;AAAAA,UACT,cAAc,gBAAgB;AAAA,UAC9B,cAAc,cAAc;AAAA,QAAA;AAAA,QAG7B,UAAA,YAAY,QAAQ,IAAI,CAAC,WACxBG,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YAEC,OAAO,OAAO;AAAA,YACd,UAAU,OAAO;AAAA,YACjB,MAAM;AAAA,YACN,SAAS;AAAA,YAER,UAAA,OAAO;AAAA,UAAA;AAAA,UANH,OAAO;AAAA,QAAA,CAQf;AAAA,MAAA;AAAA,IAAA,GAEL;AAAA,IAEC,aAAa,YACZA,+BAAC,KAAA,EAAE,WAAU,4BAA2B,MAAK,SAC1C,UAAA,aAAA,CACH;AAAA,IAGD,cAAc,CAAC,2CACb,KAAA,EAAE,WAAU,iCACV,UAAA,WAAA,CACH;AAAA,EAAA,GAEJ;AAEJ;AAEA,WAAW,cAAc;AAiBzB,SAAS,eACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,IAAI;AAAA,EACJ,GAAG;AACL,GACA,KACA;AACA,QAAM,cAAcT,MAAAA,MAAA;AACpB,QAAM,UAAU,cAAc;AAE9B,QAAM,eAAeC,MAAAA,WAAW,iBAAiB;AAEjD,QAAM,gBAAgB,QAAQ,cAAc,QAAQ;AACpD,QAAM,oBAAoB,YAAY,cAAc;AAEpD,SACEM,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,IAAAE,2BAAAA;AAAAA,MAACE,WAAAA;AAAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA,IAAI;AAAA,QACJ,OAAO,MAAM,SAAA;AAAA,QACb,UAAU;AAAA,QACV,WAAWL,GAAAA;AAAAA,UACT,kBAAkB,EAAE,MAAM,eAAe;AAAA,UACzC,YAAY,WAAW;AAAA,UACvB;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,IAGD,YACCG,2BAAAA;AAAAA,MAACD,MAAAA;AAAAA,MAAA;AAAA,QACC,SAAS;AAAA,QACT,WAAW,cAAc,EAAE,UAAU,mBAAmB;AAAA,QAEvD;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GAEJ;AAEJ;AAEO,MAAM,YAAYI,MAAAA,WAAW,cAAc;AAClD,UAAU,cAAc;;;"}

package/dist/cjs/components/Form/Select.cjs

@@ -5,9 +5,10 @@ const React = require("react");
 const reactHookForm = require("react-hook-form");
 const classVarianceAuthority = require("class-variance-authority");
 const cn = require("../../utils/cn.cjs");
+const variants = require("./variants.cjs");
 const context = require("./context.cjs");
-const select = require("../ui/select.cjs");
-const label = require("../ui/label.cjs");
+const select = require("../../primitives/select.cjs");
+const label = require("../../primitives/label.cjs");
 const selectSizeVariants = classVarianceAuthority.cva(
   "",
   {
@@ -23,20 +24,6 @@ const selectSizeVariants = classVarianceAuthority.cva(
     }
   }
 );
-const labelVariants = classVarianceAuthority.cva(
-  "block text-sm font-medium mb-1.5",
-  {
-    variants: {
-      required: {
-        true: "after:content-['*'] after:ml-0.5 after:text-destructive",
-        false: ""
-      }
-    },
-    defaultVariants: {
-      required: false
-    }
-  }
-);
 function Select({
   name,
   label: label$1,
@@ -94,7 +81,7 @@ function Select({
       label.Label,
       {
         htmlFor: inputId,
-        className: labelVariants({ required: !!required }),
+        className: variants.labelVariants({ required: !!required }),
         children: [
           label$1,
           formConfig.colon && ":"

package/dist/cjs/components/Form/Select.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Select.cjs","sources":["../../../../src/components/Form/Select.tsx"],"sourcesContent":["import { useId, useContext, useEffect } from \"react\";\r\nimport type { ReactNode } from \"react\";\r\nimport { useController, useFormContext as useRHFFormContext, type FieldValues, type FieldPath, type Control } from \"react-hook-form\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { cn } from \"../../utils/cn\";\r\nimport { FormConfigContext, type FormConfig, type FieldValidationRules } from \"../Form/context\";\r\nimport {\r\n  Select as ShadcnSelect,\r\n  SelectContent,\r\n  SelectItem,\r\n  SelectTrigger,\r\n  SelectValue,\r\n} from \"../ui/select\";\r\nimport { Label } from \"../ui/label\";\r\n\r\nconst selectSizeVariants = cva(\r\n  \"\",\r\n  {\r\n    variants: {\r\n      size: {\r\n        sm: \"h-8 text-xs\",\r\n        md: \"h-10 text-sm\",\r\n        lg: \"h-12 text-base\",\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      size: \"md\",\r\n    },\r\n  }\r\n);\r\n\r\nconst labelVariants = cva(\r\n  \"block text-sm font-medium mb-1.5\",\r\n  {\r\n    variants: {\r\n      required: {\r\n        true: \"after:content-['*'] after:ml-0.5 after:text-destructive\",\r\n        false: \"\",\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      required: false,\r\n    },\r\n  }\r\n);\r\n\r\nexport interface SelectOption {\r\n  label: string;\r\n  value: string | number;\r\n  disabled?: boolean;\r\n}\r\n\r\nexport interface SelectProps<\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n> extends VariantProps<typeof selectSizeVariants> {\r\n  /** Field name - required for form integration */\r\n  name: TName;\r\n  /** Label text for the select */\r\n  label?: string;\r\n  /** Helper text displayed below the select */\r\n  helperText?: string;\r\n  /** Whether to show the error message */\r\n  showError?: boolean;\r\n  /** Custom error message (overrides form error) */\r\n  error?: string;\r\n  /** Whether the select should take full width */\r\n  fullWidth?: boolean;\r\n  /** Options for the select */\r\n  options?: SelectOption[];\r\n  /** Placeholder text */\r\n  placeholder?: string;\r\n  /** Allow clear selection */\r\n  allowClear?: boolean;\r\n  /** External control (for use outside Form) */\r\n  control?: Control<TFieldValues>;\r\n  /** Children (alternative to options prop) */\r\n  children?: ReactNode;\r\n  /** Disabled state */\r\n  disabled?: boolean;\r\n  /** Additional class name */\r\n  className?: string;\r\n  /** ID for the select */\r\n  id?: string;\r\n  /** Variant style */\r\n  variant?: \"default\" | \"error\" | \"success\";\r\n  \r\n  // Validation props\r\n  /** Field is required */\r\n  required?: boolean | string;\r\n  /** Custom validation function */\r\n  validate?: (value: unknown) => boolean | string | Promise<boolean | string>;\r\n}\r\n\r\n/**\r\n * Select component with form integration\r\n * \r\n * This is a wrapper around the shadcn/ui Select primitive that adds:\r\n * - Form integration with react-hook-form\r\n * - Automatic validation registration\r\n * - Label, helper text, and error message support\r\n * \r\n * @example\r\n * ```tsx\r\n * // Inside a Form component\r\n * <Select \r\n *   name=\"country\" \r\n *   label=\"Country\" \r\n *   required\r\n *   options={[\r\n *     { label: \"USA\", value: \"us\" },\r\n *     { label: \"Canada\", value: \"ca\" },\r\n *   ]} \r\n * />\r\n * ```\r\n */\r\nexport function Select<\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n>({\r\n  name,\r\n  label,\r\n  helperText,\r\n  showError = true,\r\n  error: customError,\r\n  size,\r\n  variant,\r\n  fullWidth = true,\r\n  className,\r\n  disabled,\r\n  options = [],\r\n  placeholder,\r\n  allowClear,\r\n  id: providedId,\r\n  control: externalControl,\r\n  children,\r\n  // Validation props\r\n  required,\r\n  validate,\r\n}: SelectProps<TFieldValues, TName>) {\r\n  const generatedId = useId();\r\n  const inputId = providedId ?? generatedId;\r\n  \r\n  // Try to get form context\r\n  const formConfigContext = useContext(FormConfigContext);\r\n  const formConfig: FormConfig = formConfigContext ?? {};\r\n  \r\n  // Get form context from react-hook-form\r\n  const rhfContext = useRHFFormContext<TFieldValues>();\r\n  const control = externalControl ?? rhfContext?.control;\r\n\r\n  // Register validation rules with the form\r\n  useEffect(() => {\r\n    if (formConfigContext?.registerFieldValidation) {\r\n      const rules: FieldValidationRules = {};\r\n      \r\n      if (required !== undefined) rules.required = required;\r\n      if (validate !== undefined) rules.validate = validate;\r\n\r\n      formConfigContext.registerFieldValidation({\r\n        name: name as string,\r\n        type: \"string\",\r\n        rules,\r\n      });\r\n\r\n      return () => {\r\n        formConfigContext.unregisterFieldValidation(name as string);\r\n      };\r\n    }\r\n  }, [formConfigContext, name, required, validate]);\r\n\r\n  // Use controller for form integration\r\n  const { field, fieldState } = useController<TFieldValues, TName>({\r\n    name,\r\n    control,\r\n  });\r\n\r\n  const fieldError = fieldState.error?.message;\r\n  const errorMessage = customError ?? fieldError;\r\n  const hasError = !!errorMessage;\r\n  \r\n  // Merge sizes - prop takes precedence over form config\r\n  const effectiveSize = size ?? formConfig.size ?? \"md\";\r\n  const effectiveDisabled = disabled ?? formConfig.disabled;\r\n  \r\n  // Determine variant based on error state\r\n  const effectiveVariant = hasError ? \"error\" : variant;\r\n\r\n  return (\r\n    <div className={cn(\"space-y-1.5\", fullWidth && \"w-full\")}>\r\n      {label && (\r\n        <Label\r\n          htmlFor={inputId}\r\n          className={labelVariants({ required: !!required })}\r\n        >\r\n          {label}\r\n          {formConfig.colon && \":\"}\r\n        </Label>\r\n      )}\r\n      \r\n      <ShadcnSelect\r\n        value={field.value?.toString() ?? \"\"}\r\n        onValueChange={(value) => {\r\n          // Handle clear selection\r\n          if (value === \"\" && allowClear) {\r\n            field.onChange(\"\");\r\n          } else {\r\n            field.onChange(value);\r\n          }\r\n        }}\r\n        disabled={effectiveDisabled}\r\n      >\r\n        <SelectTrigger\r\n          id={inputId}\r\n          aria-invalid={hasError}\r\n          aria-describedby={\r\n            hasError\r\n              ? `${inputId}-error`\r\n              : helperText\r\n              ? `${inputId}-helper`\r\n              : undefined\r\n          }\r\n          className={cn(\r\n            selectSizeVariants({ size: effectiveSize }),\r\n            effectiveVariant === \"error\" && \"border-destructive focus:ring-destructive\",\r\n            effectiveVariant === \"success\" && \"border-green-500 focus:ring-green-500\",\r\n            className\r\n          )}\r\n        >\r\n          <SelectValue placeholder={placeholder} />\r\n        </SelectTrigger>\r\n        <SelectContent>\r\n          {allowClear && field.value && (\r\n            <SelectItem value=\"\">\r\n              <span className=\"text-muted-foreground\">Clear selection</span>\r\n            </SelectItem>\r\n          )}\r\n          {children ?? options.map((option) => (\r\n            <SelectItem\r\n              key={option.value}\r\n              value={option.value.toString()}\r\n              disabled={option.disabled}\r\n            >\r\n              {option.label}\r\n            </SelectItem>\r\n          ))}\r\n        </SelectContent>\r\n      </ShadcnSelect>\r\n\r\n      {showError && hasError && (\r\n        <p\r\n          id={`${inputId}-error`}\r\n          className=\"text-sm text-destructive\"\r\n          role=\"alert\"\r\n        >\r\n          {errorMessage}\r\n        </p>\r\n      )}\r\n      \r\n      {helperText && !hasError && (\r\n        <p\r\n          id={`${inputId}-helper`}\r\n          className=\"text-sm text-muted-foreground\"\r\n        >\r\n          {helperText}\r\n        </p>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n\r\nSelect.displayName = \"Select\";\r\n"],"names":["cva","label","useId","useContext","FormConfigContext","useRHFFormContext","useEffect","useController","cn","jsxs","Label","ShadcnSelect","jsx","SelectTrigger","SelectValue","SelectContent","SelectItem"],"mappings":"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"}
+{"version":3,"file":"Select.cjs","sources":["../../../../src/components/Form/Select.tsx"],"sourcesContent":["import { useId, useContext, useEffect } from \"react\";\nimport type { ReactNode } 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 { labelVariants } from \"./variants\";\nimport { FormConfigContext, type FormConfig, type FieldValidationRules } from \"../Form/context\";\nimport {\n  Select as ShadcnSelect,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"../../primitives/select\";\nimport { Label } from \"../../primitives/label\";\n\nconst selectSizeVariants = cva(\n  \"\",\n  {\n    variants: {\n      size: {\n        sm: \"h-8 text-xs\",\n        md: \"h-10 text-sm\",\n        lg: \"h-12 text-base\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n);\n\nexport interface SelectOption {\n  label: string;\n  value: string | number;\n  disabled?: boolean;\n}\n\nexport interface SelectProps<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n> extends VariantProps<typeof selectSizeVariants> {\n  /** Field name - required for form integration */\n  name: TName;\n  /** Label text for the select */\n  label?: string;\n  /** Helper text displayed below the select */\n  helperText?: string;\n  /** Whether to show the error message */\n  showError?: boolean;\n  /** Custom error message (overrides form error) */\n  error?: string;\n  /** Whether the select should take full width */\n  fullWidth?: boolean;\n  /** Options for the select */\n  options?: SelectOption[];\n  /** Placeholder text */\n  placeholder?: string;\n  /** Allow clear selection */\n  allowClear?: boolean;\n  /** External control (for use outside Form) */\n  control?: Control<TFieldValues>;\n  /** Children (alternative to options prop) */\n  children?: ReactNode;\n  /** Disabled state */\n  disabled?: boolean;\n  /** Additional class name */\n  className?: string;\n  /** ID for the select */\n  id?: string;\n  /** Variant style */\n  variant?: \"default\" | \"error\" | \"success\";\n  \n  // Validation props\n  /** Field is required */\n  required?: boolean | string;\n  /** Custom validation function */\n  validate?: (value: unknown) => boolean | string | Promise<boolean | string>;\n}\n\n/**\n * Select component with form integration\n * \n * This is a wrapper around the shadcn/ui Select 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 * <Select \n *   name=\"country\" \n *   label=\"Country\" \n *   required\n *   options={[\n *     { label: \"USA\", value: \"us\" },\n *     { label: \"Canada\", value: \"ca\" },\n *   ]} \n * />\n * ```\n */\nexport function Select<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>({\n  name,\n  label,\n  helperText,\n  showError = true,\n  error: customError,\n  size,\n  variant,\n  fullWidth = true,\n  className,\n  disabled,\n  options = [],\n  placeholder,\n  allowClear,\n  id: providedId,\n  control: externalControl,\n  children,\n  // Validation props\n  required,\n  validate,\n}: SelectProps<TFieldValues, TName>) {\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: \"string\",\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={cn(\"space-y-1.5\", fullWidth && \"w-full\")}>\n      {label && (\n        <Label\n          htmlFor={inputId}\n          className={labelVariants({ required: !!required })}\n        >\n          {label}\n          {formConfig.colon && \":\"}\n        </Label>\n      )}\n      \n      <ShadcnSelect\n        value={field.value?.toString() ?? \"\"}\n        onValueChange={(value) => {\n          // Handle clear selection\n          if (value === \"\" && allowClear) {\n            field.onChange(\"\");\n          } else {\n            field.onChange(value);\n          }\n        }}\n        disabled={effectiveDisabled}\n      >\n        <SelectTrigger\n          id={inputId}\n          aria-invalid={hasError}\n          aria-describedby={\n            hasError\n              ? `${inputId}-error`\n              : helperText\n              ? `${inputId}-helper`\n              : undefined\n          }\n          className={cn(\n            selectSizeVariants({ size: effectiveSize }),\n            effectiveVariant === \"error\" && \"border-destructive focus:ring-destructive\",\n            effectiveVariant === \"success\" && \"border-green-500 focus:ring-green-500\",\n            className\n          )}\n        >\n          <SelectValue placeholder={placeholder} />\n        </SelectTrigger>\n        <SelectContent>\n          {allowClear && field.value && (\n            <SelectItem value=\"\">\n              <span className=\"text-muted-foreground\">Clear selection</span>\n            </SelectItem>\n          )}\n          {children ?? options.map((option) => (\n            <SelectItem\n              key={option.value}\n              value={option.value.toString()}\n              disabled={option.disabled}\n            >\n              {option.label}\n            </SelectItem>\n          ))}\n        </SelectContent>\n      </ShadcnSelect>\n\n      {showError && hasError && (\n        <p\n          id={`${inputId}-error`}\n          className=\"text-sm text-destructive\"\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\"\n        >\n          {helperText}\n        </p>\n      )}\n    </div>\n  );\n}\n\nSelect.displayName = \"Select\";\n"],"names":["cva","label","useId","useContext","FormConfigContext","useRHFFormContext","useEffect","useController","cn","jsxs","Label","labelVariants","ShadcnSelect","jsx","SelectTrigger","SelectValue","SelectContent","SelectItem"],"mappings":"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"}

package/dist/cjs/components/Form/Switch.cjs

@@ -6,8 +6,8 @@ const reactHookForm = require("react-hook-form");
 const classVarianceAuthority = require("class-variance-authority");
 const cn = require("../../utils/cn.cjs");
 const context = require("./context.cjs");
-const _switch = require("../ui/switch.cjs");
-const label = require("../ui/label.cjs");
+const _switch = require("../../primitives/switch.cjs");
+const label = require("../../primitives/label.cjs");
 const switchSizeVariants = classVarianceAuthority.cva(
   "",
   {

package/dist/cjs/components/Form/Switch.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.cjs","sources":["../../../../src/components/Form/Switch.tsx"],"sourcesContent":["import { forwardRef, useId, useContext, useEffect } from \"react\";\r\nimport type { ReactNode, ComponentPropsWithoutRef } from \"react\";\r\nimport { useController, useFormContext as useRHFFormContext, type FieldValues, type FieldPath, type Control } from \"react-hook-form\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { cn } from \"../../utils/cn\";\r\nimport { FormConfigContext, type FormConfig, type FieldValidationRules } from \"../Form/context\";\r\nimport { Switch as ShadcnSwitch } from \"../ui/switch\";\r\nimport { Label } from \"../ui/label\";\r\nimport type * as SwitchPrimitives from \"@radix-ui/react-switch\";\r\n\r\nconst switchSizeVariants = cva(\r\n  \"\",\r\n  {\r\n    variants: {\r\n      size: {\r\n        sm: \"h-5 w-9\",\r\n        md: \"h-6 w-11\",\r\n        lg: \"h-7 w-14\",\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      size: \"md\",\r\n    },\r\n  }\r\n);\r\n\r\nconst labelVariants = cva(\r\n  \"text-sm font-medium cursor-pointer select-none\",\r\n  {\r\n    variants: {\r\n      disabled: {\r\n        true: \"cursor-not-allowed opacity-50\",\r\n        false: \"\",\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      disabled: false,\r\n    },\r\n  }\r\n);\r\n\r\nexport interface SwitchProps<\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n> extends Omit<ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>, \"name\" | \"checked\" | \"onCheckedChange\" | \"required\">,\r\n    VariantProps<typeof switchSizeVariants> {\r\n  /** Field name - required for form integration */\r\n  name: TName;\r\n  /** Label text for the switch */\r\n  label?: ReactNode;\r\n  /** Helper text displayed below the switch */\r\n  helperText?: string;\r\n  /** Whether to show the error message */\r\n  showError?: boolean;\r\n  /** Custom error message (overrides form error) */\r\n  error?: string;\r\n  /** External control (for use outside Form) */\r\n  control?: Control<TFieldValues>;\r\n  /** Text to show when checked */\r\n  checkedText?: ReactNode;\r\n  /** Text to show when unchecked */\r\n  uncheckedText?: ReactNode;\r\n  \r\n  // Validation props\r\n  /** Field is required (must be on) */\r\n  required?: boolean | string;\r\n  /** Custom validation function */\r\n  validate?: (value: unknown) => boolean | string | Promise<boolean | string>;\r\n}\r\n\r\n/**\r\n * Switch component with form integration\r\n * \r\n * This is a wrapper around the shadcn/ui Switch primitive that adds:\r\n * - Form integration with react-hook-form\r\n * - Automatic validation registration\r\n * - Label, helper text, and error message support\r\n * - Checked/unchecked text display\r\n * \r\n * @example\r\n * ```tsx\r\n * // Inside a Form component\r\n * <Switch name=\"notifications\" label=\"Enable notifications\" />\r\n * <Switch name=\"terms\" label=\"Accept terms\" required=\"You must accept the terms\" />\r\n * <Switch name=\"darkMode\" label=\"Dark mode\" checkedText=\"On\" uncheckedText=\"Off\" />\r\n * ```\r\n */\r\nfunction SwitchInner<\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n>(\r\n  {\r\n    name,\r\n    label,\r\n    helperText,\r\n    showError = true,\r\n    error: customError,\r\n    size,\r\n    className,\r\n    disabled,\r\n    id: providedId,\r\n    control: externalControl,\r\n    checkedText,\r\n    uncheckedText,\r\n    // Validation props\r\n    required,\r\n    validate,\r\n    ...props\r\n  }: SwitchProps<TFieldValues, TName>,\r\n  ref: React.ForwardedRef<React.ElementRef<typeof SwitchPrimitives.Root>>\r\n) {\r\n  const generatedId = useId();\r\n  const inputId = providedId ?? generatedId;\r\n  \r\n  // Try to get form context\r\n  const formConfigContext = useContext(FormConfigContext);\r\n  const formConfig: FormConfig = formConfigContext ?? {};\r\n  \r\n  // Get form context from react-hook-form\r\n  const rhfContext = useRHFFormContext<TFieldValues>();\r\n  const control = externalControl ?? rhfContext?.control;\r\n\r\n  // Register validation rules with the form\r\n  useEffect(() => {\r\n    if (formConfigContext?.registerFieldValidation) {\r\n      const rules: FieldValidationRules = {};\r\n      \r\n      if (required !== undefined) rules.required = required;\r\n      if (validate !== undefined) rules.validate = validate;\r\n\r\n      formConfigContext.registerFieldValidation({\r\n        name: name as string,\r\n        type: \"boolean\",\r\n        rules,\r\n      });\r\n\r\n      return () => {\r\n        formConfigContext.unregisterFieldValidation(name as string);\r\n      };\r\n    }\r\n  }, [formConfigContext, name, required, validate]);\r\n\r\n  // Use controller for form integration\r\n  const { field, fieldState } = useController<TFieldValues, TName>({\r\n    name,\r\n    control,\r\n  });\r\n\r\n  const fieldError = fieldState.error?.message;\r\n  const errorMessage = customError ?? fieldError;\r\n  const hasError = !!errorMessage;\r\n  \r\n  // Merge sizes - prop takes precedence over form config\r\n  const effectiveSize = size ?? formConfig.size ?? \"md\";\r\n  const effectiveDisabled = disabled ?? formConfig.disabled;\r\n  const isChecked = field.value ?? false;\r\n\r\n  return (\r\n    <div className=\"space-y-1.5\">\r\n      <div className=\"flex items-center gap-3\">\r\n        <ShadcnSwitch\r\n          {...props}\r\n          ref={ref}\r\n          id={inputId}\r\n          checked={isChecked}\r\n          onCheckedChange={(checked) => field.onChange(checked)}\r\n          disabled={effectiveDisabled}\r\n          aria-labelledby={label ? `${inputId}-label` : undefined}\r\n          className={cn(\r\n            switchSizeVariants({ size: effectiveSize }),\r\n            className\r\n          )}\r\n        />\r\n        \r\n        {(checkedText || uncheckedText) && (\r\n          <span className=\"text-sm text-muted-foreground\">\r\n            {isChecked ? checkedText : uncheckedText}\r\n          </span>\r\n        )}\r\n        \r\n        {label && (\r\n          <Label\r\n            id={`${inputId}-label`}\r\n            htmlFor={inputId}\r\n            className={labelVariants({ disabled: effectiveDisabled })}\r\n          >\r\n            {label}\r\n          </Label>\r\n        )}\r\n      </div>\r\n\r\n      {showError && hasError && (\r\n        <p className=\"text-sm text-destructive\" role=\"alert\">\r\n          {errorMessage}\r\n        </p>\r\n      )}\r\n      \r\n      {helperText && !hasError && (\r\n        <p className=\"text-sm text-muted-foreground\">\r\n          {helperText}\r\n        </p>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n\r\n// Use forwardRef with generic support\r\nexport const Switch = forwardRef(SwitchInner) as <\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n>(\r\n  props: SwitchProps<TFieldValues, TName> & { ref?: React.ForwardedRef<React.ElementRef<typeof SwitchPrimitives.Root>> }\r\n) => React.ReactElement;\r\n\r\n(Switch as React.FC).displayName = \"Switch\";\r\n"],"names":["cva","label","useId","useContext","FormConfigContext","useRHFFormContext","useEffect","useController","jsxs","jsx","ShadcnSwitch","cn","Label","forwardRef"],"mappings":"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"}
+{"version":3,"file":"Switch.cjs","sources":["../../../../src/components/Form/Switch.tsx"],"sourcesContent":["import { 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 { Switch as ShadcnSwitch } from \"../../primitives/switch\";\nimport { Label } from \"../../primitives/label\";\nimport type * as SwitchPrimitives from \"@radix-ui/react-switch\";\n\nconst switchSizeVariants = cva(\n  \"\",\n  {\n    variants: {\n      size: {\n        sm: \"h-5 w-9\",\n        md: \"h-6 w-11\",\n        lg: \"h-7 w-14\",\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      disabled: {\n        true: \"cursor-not-allowed opacity-50\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      disabled: false,\n    },\n  }\n);\n\nexport interface SwitchProps<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n> extends Omit<ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>, \"name\" | \"checked\" | \"onCheckedChange\" | \"required\">,\n    VariantProps<typeof switchSizeVariants> {\n  /** Field name - required for form integration */\n  name: TName;\n  /** Label text for the switch */\n  label?: ReactNode;\n  /** Helper text displayed below the switch */\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  /** Text to show when checked */\n  checkedText?: ReactNode;\n  /** Text to show when unchecked */\n  uncheckedText?: ReactNode;\n  \n  // Validation props\n  /** Field is required (must be on) */\n  required?: boolean | string;\n  /** Custom validation function */\n  validate?: (value: unknown) => boolean | string | Promise<boolean | string>;\n}\n\n/**\n * Switch component with form integration\n * \n * This is a wrapper around the shadcn/ui Switch primitive that adds:\n * - Form integration with react-hook-form\n * - Automatic validation registration\n * - Label, helper text, and error message support\n * - Checked/unchecked text display\n * \n * @example\n * ```tsx\n * // Inside a Form component\n * <Switch name=\"notifications\" label=\"Enable notifications\" />\n * <Switch name=\"terms\" label=\"Accept terms\" required=\"You must accept the terms\" />\n * <Switch name=\"darkMode\" label=\"Dark mode\" checkedText=\"On\" uncheckedText=\"Off\" />\n * ```\n */\nfunction SwitchInner<\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    className,\n    disabled,\n    id: providedId,\n    control: externalControl,\n    checkedText,\n    uncheckedText,\n    // Validation props\n    required,\n    validate,\n    ...props\n  }: SwitchProps<TFieldValues, TName>,\n  ref: React.ForwardedRef<React.ElementRef<typeof SwitchPrimitives.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  const isChecked = field.value ?? false;\n\n  return (\n    <div className=\"space-y-1.5\">\n      <div className=\"flex items-center gap-3\">\n        <ShadcnSwitch\n          {...props}\n          ref={ref}\n          id={inputId}\n          checked={isChecked}\n          onCheckedChange={(checked) => field.onChange(checked)}\n          disabled={effectiveDisabled}\n          aria-labelledby={label ? `${inputId}-label` : undefined}\n          className={cn(\n            switchSizeVariants({ size: effectiveSize }),\n            className\n          )}\n        />\n        \n        {(checkedText || uncheckedText) && (\n          <span className=\"text-sm text-muted-foreground\">\n            {isChecked ? checkedText : uncheckedText}\n          </span>\n        )}\n        \n        {label && (\n          <Label\n            id={`${inputId}-label`}\n            htmlFor={inputId}\n            className={labelVariants({ disabled: effectiveDisabled })}\n          >\n            {label}\n          </Label>\n        )}\n      </div>\n\n      {showError && hasError && (\n        <p className=\"text-sm text-destructive\" role=\"alert\">\n          {errorMessage}\n        </p>\n      )}\n      \n      {helperText && !hasError && (\n        <p className=\"text-sm text-muted-foreground\">\n          {helperText}\n        </p>\n      )}\n    </div>\n  );\n}\n\n// Use forwardRef with generic support\nexport const Switch = forwardRef(SwitchInner) as <\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>(\n  props: SwitchProps<TFieldValues, TName> & { ref?: React.ForwardedRef<React.ElementRef<typeof SwitchPrimitives.Root>> }\n) => React.ReactElement;\n\n(Switch as React.FC).displayName = \"Switch\";\n"],"names":["cva","label","useId","useContext","FormConfigContext","useRHFFormContext","useEffect","useController","jsxs","jsx","ShadcnSwitch","cn","Label","forwardRef"],"mappings":"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"}

package/dist/cjs/components/Form/TextArea.cjs

@@ -6,8 +6,9 @@ const reactHookForm = require("react-hook-form");
 const classVarianceAuthority = require("class-variance-authority");
 const cn = require("../../utils/cn.cjs");
 const context = require("./context.cjs");
-const textarea = require("../ui/textarea.cjs");
-const label = require("../ui/label.cjs");
+const variants = require("./variants.cjs");
+const textarea = require("../../primitives/textarea.cjs");
+const label = require("../../primitives/label.cjs");
 const textAreaSizeVariants = classVarianceAuthority.cva(
   "",
   {
@@ -29,20 +30,6 @@ const textAreaSizeVariants = classVarianceAuthority.cva(
     }
   }
 );
-const labelVariants = classVarianceAuthority.cva(
-  "block text-sm font-medium mb-1.5",
-  {
-    variants: {
-      required: {
-        true: "after:content-['*'] after:ml-0.5 after:text-destructive",
-        false: ""
-      }
-    },
-    defaultVariants: {
-      required: false
-    }
-  }
-);
 function TextAreaInner({
   name,
   label: label$1,
@@ -105,7 +92,7 @@ function TextAreaInner({
       label.Label,
       {
         htmlFor: inputId,
-        className: labelVariants({ required: !!required }),
+        className: variants.labelVariants({ required: !!required }),
         children: [
           label$1,
           formConfig.colon && ":"