@skybin-tech/nebula-ui 0.0.28 → 0.0.30

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

@@ -1 +1 @@
-{"version":3,"file":"Form.js","names":[],"sources":["../../../src/components/Form/Form.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useMemo, type ReactNode } from \"react\";\r\nimport {\r\n  useForm,\r\n  FormProvider as RHFFormProvider,\r\n  type UseFormReturn,\r\n  type FieldValues,\r\n  type UseFormProps,\r\n  type SubmitHandler,\r\n  type SubmitErrorHandler,\r\n  type Resolver,\r\n  type Path,\r\n} from \"react-hook-form\";\r\nimport { zodResolver } from \"@hookform/resolvers/zod\";\r\nimport { z } from \"zod\";\r\nimport { \r\n  FormConfigContext, \r\n  defaultFormConfig, \r\n  useFieldValidationRegistry,\r\n  type FormConfig, \r\n  type FormContextValue \r\n} from \"./context\";\r\n\r\n/**\r\n * Props for the Form component\r\n */\r\nexport interface FormProps<\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TContext = unknown\r\n> extends Omit<React.FormHTMLAttributes<HTMLFormElement>, \"onSubmit\" | \"onError\"> {\r\n  /** Base Zod schema for validation (will be extended by field props) */\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  schema?: z.ZodType<TFieldValues, any, any>;\r\n  /** Default values for the form */\r\n  defaultValues?: UseFormProps<TFieldValues, TContext>[\"defaultValues\"];\r\n  /** Values to reset the form to */\r\n  values?: UseFormProps<TFieldValues, TContext>[\"values\"];\r\n  /** Submit handler */\r\n  onSubmit?: SubmitHandler<TFieldValues>;\r\n  /** Error handler */\r\n  onError?: SubmitErrorHandler<TFieldValues>;\r\n  /** Form configuration */\r\n  config?: FormConfig;\r\n  /** Children */\r\n  children?: ReactNode;\r\n  /** External form instance (for controlled forms) */\r\n  form?: UseFormReturn<TFieldValues>;\r\n  /** Validation mode */\r\n  mode?: UseFormProps<TFieldValues, TContext>[\"mode\"];\r\n  /** Revalidation mode */\r\n  reValidateMode?: UseFormProps<TFieldValues, TContext>[\"reValidateMode\"];\r\n  /** Custom resolver (overrides schema) */\r\n  resolver?: Resolver<TFieldValues>;\r\n}\r\n\r\n/**\r\n * Form component that provides form context and validation\r\n * \r\n * Child components like TextBox can register their validation rules automatically.\r\n * \r\n * @example\r\n * ```tsx\r\n * // Validation is automatically built from component props\r\n * <Form onSubmit={handleSubmit} defaultValues={{ username: \"\", email: \"\" }}>\r\n *   <TextBox name=\"username\" label=\"Username\" required minLength={3} maxLength={50} />\r\n *   <TextBox name=\"email\" label=\"Email\" type=\"email\" required email />\r\n *   <Button type=\"submit\">Submit</Button>\r\n * </Form>\r\n * \r\n * // Or with a base schema that gets extended\r\n * const baseSchema = z.object({\r\n *   username: z.string(),\r\n *   email: z.string(),\r\n * });\r\n * \r\n * <Form schema={baseSchema} onSubmit={handleSubmit}>\r\n *   <TextBox name=\"username\" required minLength={3} /> // Adds required + minLength\r\n *   <TextBox name=\"email\" required email /> // Adds required + email validation\r\n * </Form>\r\n * ```\r\n */\r\nexport function Form<\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TContext = unknown\r\n>({\r\n  schema: baseSchema,\r\n  defaultValues,\r\n  values,\r\n  onSubmit,\r\n  onError,\r\n  config,\r\n  children,\r\n  form: externalForm,\r\n  mode = \"onBlur\",\r\n  reValidateMode = \"onChange\",\r\n  resolver: customResolver,\r\n  ...formProps\r\n}: FormProps<TFieldValues, TContext>) {\r\n  const mergedConfig = { ...defaultFormConfig, ...config };\r\n\r\n  const {\r\n    registerFieldValidation,\r\n    unregisterFieldValidation,\r\n    getValidationSchema,\r\n  } = useFieldValidationRegistry();\r\n\r\n  // Stable resolver that reads from fieldsRef at validation time — no re-renders\r\n  // needed on field registration, and no race condition with useEffect timing.\r\n  const dynamicResolver = useCallback<Resolver<TFieldValues>>(\r\n    async (vals, context, options) => {\r\n      if (customResolver) {\r\n        return customResolver(vals, context, options);\r\n      }\r\n      const fieldSchema = getValidationSchema();\r\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n      let finalSchema: z.ZodType<any, any, any>;\r\n      if (baseSchema instanceof z.ZodObject) {\r\n        finalSchema = baseSchema.merge(fieldSchema);\r\n      } else {\r\n        finalSchema = baseSchema ?? fieldSchema;\r\n      }\r\n      return zodResolver(finalSchema)(vals, context, options);\r\n    },\r\n    // getValidationSchema reads a ref — always current, intentionally omitted.\r\n    // eslint-disable-next-line react-hooks/exhaustive-deps\r\n    [baseSchema, customResolver]\r\n  );\r\n\r\n  const internalForm = useForm<TFieldValues>({\r\n    resolver: dynamicResolver,\r\n    defaultValues,\r\n    values,\r\n    mode,\r\n    reValidateMode,\r\n  });\r\n\r\n  const form = externalForm ?? internalForm;\r\n\r\n  // Trigger validation for a specific field\r\n  const triggerValidation = useCallback(async (name: string) => {\r\n    return form.trigger(name as Path<TFieldValues>);\r\n  }, [form]);\r\n\r\n  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {\r\n    e.preventDefault();\r\n    if (onSubmit) {\r\n      form.handleSubmit(onSubmit, onError)(e);\r\n    }\r\n  };\r\n\r\n  const contextValue = useMemo<FormContextValue<TFieldValues>>(\r\n    () => ({\r\n      form,\r\n      registerFieldValidation,\r\n      unregisterFieldValidation,\r\n      getValidationSchema,\r\n      triggerValidation,\r\n      showInlineErrors: mergedConfig.showInlineErrors,\r\n      validateOnBlur: mergedConfig.validateOnBlur,\r\n      validateOnChange: mergedConfig.validateOnChange,\r\n      size: mergedConfig.size,\r\n      layout: mergedConfig.layout,\r\n      labelWidth: mergedConfig.labelWidth,\r\n      disabled: mergedConfig.disabled,\r\n      colon: mergedConfig.colon,\r\n    }),\r\n    [\r\n      form,\r\n      registerFieldValidation,\r\n      unregisterFieldValidation,\r\n      getValidationSchema,\r\n      triggerValidation,\r\n      mergedConfig.showInlineErrors,\r\n      mergedConfig.validateOnBlur,\r\n      mergedConfig.validateOnChange,\r\n      mergedConfig.size,\r\n      mergedConfig.layout,\r\n      mergedConfig.labelWidth,\r\n      mergedConfig.disabled,\r\n      mergedConfig.colon,\r\n    ]\r\n  );\r\n\r\n  return (\r\n    <FormConfigContext.Provider value={contextValue as FormContextValue}>\r\n      <RHFFormProvider {...form}>\r\n        <form\r\n          {...formProps}\r\n          onSubmit={handleSubmit}\r\n          noValidate\r\n        >\r\n          {children}\r\n        </form>\r\n      </RHFFormProvider>\r\n    </FormConfigContext.Provider>\r\n  );\r\n}\r\n\r\nForm.displayName = \"Form\";\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkFA,SAAgB,KAGd,EACA,QAAQ,YACR,eACA,QACA,UACA,SACA,QACA,UACA,MAAM,cACN,OAAO,UACP,iBAAiB,YACjB,UAAU,gBACV,GAAG,aACiC;CACpC,MAAM,eAAe;EAAE,GAAG;EAAmB,GAAG;CAAO;CAEvD,MAAM,EACJ,yBACA,2BACA,wBACE,2BAA2B;CAwB/B,MAAM,eAAe,QAAsB;EACzC,UArBsB,YACtB,OAAO,MAAM,SAAS,YAAY;GAChC,IAAI,gBACF,OAAO,eAAe,MAAM,SAAS,OAAO;GAE9C,MAAM,cAAc,oBAAoB;GAExC,IAAI;GACJ,IAAI,sBAAsB,EAAE,WAC1B,cAAc,WAAW,MAAM,WAAW;QAE1C,cAAc,cAAc;GAE9B,OAAO,YAAY,WAAW,CAAC,CAAC,MAAM,SAAS,OAAO;EACxD,GAGA,CAAC,YAAY,cAAc,CAIjB;EACV;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,OAAO,gBAAgB;CAG7B,MAAM,oBAAoB,YAAY,OAAO,SAAiB;EAC5D,OAAO,KAAK,QAAQ,IAA0B;CAChD,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,gBAAgB,MAAwC;EAC5D,EAAE,eAAe;EACjB,IAAI,UACF,KAAK,aAAa,UAAU,OAAO,CAAC,CAAC,CAAC;CAE1C;CAEA,MAAM,eAAe,eACZ;EACL;EACA;EACA;EACA;EACA;EACA,kBAAkB,aAAa;EAC/B,gBAAgB,aAAa;EAC7B,kBAAkB,aAAa;EAC/B,MAAM,aAAa;EACnB,QAAQ,aAAa;EACrB,YAAY,aAAa;EACzB,UAAU,aAAa;EACvB,OAAO,aAAa;CACtB,IACA;EACE;EACA;EACA;EACA;EACA;EACA,aAAa;EACb,aAAa;EACb,aAAa;EACb,aAAa;EACb,aAAa;EACb,aAAa;EACb,aAAa;EACb,aAAa;CACf,CACF;CAEA,OACE,oBAAC,kBAAkB,UAAnB;EAA4B,OAAO;YACjC,oBAAC,cAAD;GAAiB,GAAI;aACnB,oBAAC,QAAD;IACE,GAAI;IACJ,UAAU;IACV,YAAA;IAEC;GACG,CAAA;EACS,CAAA;CACS,CAAA;AAEhC;AAEA,KAAK,cAAc"}
+{"version":3,"file":"Form.js","names":[],"sources":["../../../src/components/Form/Form.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { useCallback, useMemo, type ReactNode } from \"react\";\r\nimport {\r\n  useForm,\r\n  FormProvider as RHFFormProvider,\r\n  type UseFormReturn,\r\n  type FieldValues,\r\n  type UseFormProps,\r\n  type SubmitHandler,\r\n  type SubmitErrorHandler,\r\n  type Resolver,\r\n  type Path,\r\n} from \"react-hook-form\";\r\nimport { zodResolver } from \"@hookform/resolvers/zod\";\r\nimport { z } from \"zod\";\r\nimport { \r\n  FormConfigContext, \r\n  defaultFormConfig, \r\n  useFieldValidationRegistry,\r\n  type FormConfig, \r\n  type FormContextValue \r\n} from \"./context\";\r\n\r\n/**\r\n * Props for the Form component\r\n */\r\nexport interface FormProps<\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TContext = unknown\r\n> extends Omit<React.FormHTMLAttributes<HTMLFormElement>, \"onSubmit\" | \"onError\"> {\r\n  /** Base Zod schema for validation (will be extended by field props) */\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  schema?: z.ZodType<TFieldValues, any, any>;\r\n  /** Default values for the form */\r\n  defaultValues?: UseFormProps<TFieldValues, TContext>[\"defaultValues\"];\r\n  /** Values to reset the form to */\r\n  values?: UseFormProps<TFieldValues, TContext>[\"values\"];\r\n  /** Submit handler */\r\n  onSubmit?: SubmitHandler<TFieldValues>;\r\n  /** Error handler */\r\n  onError?: SubmitErrorHandler<TFieldValues>;\r\n  /** Form configuration */\r\n  config?: FormConfig;\r\n  /** Children */\r\n  children?: ReactNode;\r\n  /** External form instance (for controlled forms) */\r\n  form?: UseFormReturn<TFieldValues>;\r\n  /** Validation mode */\r\n  mode?: UseFormProps<TFieldValues, TContext>[\"mode\"];\r\n  /** Revalidation mode */\r\n  reValidateMode?: UseFormProps<TFieldValues, TContext>[\"reValidateMode\"];\r\n  /** Custom resolver (overrides schema) */\r\n  resolver?: Resolver<TFieldValues>;\r\n}\r\n\r\n/**\r\n * Form component that provides form context and validation\r\n * \r\n * Child components like TextBox can register their validation rules automatically.\r\n * \r\n * @example\r\n * ```tsx\r\n * // Validation is automatically built from component props\r\n * <Form onSubmit={handleSubmit} defaultValues={{ username: \"\", email: \"\" }}>\r\n *   <TextBox name=\"username\" label=\"Username\" required minLength={3} maxLength={50} />\r\n *   <TextBox name=\"email\" label=\"Email\" type=\"email\" required email />\r\n *   <Button type=\"submit\">Submit</Button>\r\n * </Form>\r\n * \r\n * // Or with a base schema that gets extended\r\n * const baseSchema = z.object({\r\n *   username: z.string(),\r\n *   email: z.string(),\r\n * });\r\n * \r\n * <Form schema={baseSchema} onSubmit={handleSubmit}>\r\n *   <TextBox name=\"username\" required minLength={3} /> // Adds required + minLength\r\n *   <TextBox name=\"email\" required email /> // Adds required + email validation\r\n * </Form>\r\n * ```\r\n */\r\nexport function Form<\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TContext = unknown\r\n>({\r\n  schema: baseSchema,\r\n  defaultValues,\r\n  values,\r\n  onSubmit,\r\n  onError,\r\n  config,\r\n  children,\r\n  form: externalForm,\r\n  mode: modeProp,\r\n  reValidateMode: reValidateModeProp,\r\n  resolver: customResolver,\r\n  ...formProps\r\n}: FormProps<TFieldValues, TContext>) {\r\n  const mergedConfig = { ...defaultFormConfig, ...config };\r\n\r\n  const mode =\r\n    modeProp ??\r\n    (mergedConfig.validateOnChange\r\n      ? \"onChange\"\r\n      : mergedConfig.validateOnBlur !== false\r\n        ? \"onBlur\"\r\n        : \"onSubmit\");\r\n\r\n  const reValidateMode =\r\n    reValidateModeProp ??\r\n    (mergedConfig.validateOnChange ? \"onChange\" : \"onBlur\");\r\n\r\n  const {\r\n    registerFieldValidation,\r\n    unregisterFieldValidation,\r\n    getValidationSchema,\r\n  } = useFieldValidationRegistry();\r\n\r\n  // Stable resolver that reads from fieldsRef at validation time — no re-renders\r\n  // needed on field registration, and no race condition with useEffect timing.\r\n  const dynamicResolver = useCallback<Resolver<TFieldValues>>(\r\n    async (vals, context, options) => {\r\n      if (customResolver) {\r\n        return customResolver(vals, context, options);\r\n      }\r\n      const fieldSchema = getValidationSchema();\r\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n      let finalSchema: z.ZodType<any, any, any>;\r\n      if (baseSchema instanceof z.ZodObject) {\r\n        finalSchema = baseSchema.merge(fieldSchema);\r\n      } else {\r\n        finalSchema = baseSchema ?? fieldSchema;\r\n      }\r\n      return zodResolver(finalSchema)(vals, context, options);\r\n    },\r\n    // getValidationSchema reads a ref — always current, intentionally omitted.\r\n    // eslint-disable-next-line react-hooks/exhaustive-deps\r\n    [baseSchema, customResolver]\r\n  );\r\n\r\n  const internalForm = useForm<TFieldValues>({\r\n    resolver: dynamicResolver,\r\n    defaultValues,\r\n    values,\r\n    mode,\r\n    reValidateMode,\r\n  });\r\n\r\n  const form = externalForm ?? internalForm;\r\n\r\n  // Trigger validation for a specific field\r\n  const triggerValidation = useCallback(async (name: string) => {\r\n    return form.trigger(name as Path<TFieldValues>);\r\n  }, [form]);\r\n\r\n  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {\r\n    e.preventDefault();\r\n    if (onSubmit) {\r\n      form.handleSubmit(onSubmit, onError)(e);\r\n    }\r\n  };\r\n\r\n  const contextValue = useMemo<FormContextValue<TFieldValues>>(\r\n    () => ({\r\n      form,\r\n      registerFieldValidation,\r\n      unregisterFieldValidation,\r\n      getValidationSchema,\r\n      triggerValidation,\r\n      showInlineErrors: mergedConfig.showInlineErrors,\r\n      validateOnBlur: mergedConfig.validateOnBlur,\r\n      validateOnChange: mergedConfig.validateOnChange,\r\n      size: mergedConfig.size,\r\n      layout: mergedConfig.layout,\r\n      labelWidth: mergedConfig.labelWidth,\r\n      disabled: mergedConfig.disabled,\r\n      colon: mergedConfig.colon,\r\n    }),\r\n    [\r\n      form,\r\n      registerFieldValidation,\r\n      unregisterFieldValidation,\r\n      getValidationSchema,\r\n      triggerValidation,\r\n      mergedConfig.showInlineErrors,\r\n      mergedConfig.validateOnBlur,\r\n      mergedConfig.validateOnChange,\r\n      mergedConfig.size,\r\n      mergedConfig.layout,\r\n      mergedConfig.labelWidth,\r\n      mergedConfig.disabled,\r\n      mergedConfig.colon,\r\n    ]\r\n  );\r\n\r\n  return (\r\n    <FormConfigContext.Provider value={contextValue as FormContextValue}>\r\n      <RHFFormProvider {...form}>\r\n        <form\r\n          {...formProps}\r\n          onSubmit={handleSubmit}\r\n          noValidate\r\n        >\r\n          {children}\r\n        </form>\r\n      </RHFFormProvider>\r\n    </FormConfigContext.Provider>\r\n  );\r\n}\r\n\r\nForm.displayName = \"Form\";\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkFA,SAAgB,KAGd,EACA,QAAQ,YACR,eACA,QACA,UACA,SACA,QACA,UACA,MAAM,cACN,MAAM,UACN,gBAAgB,oBAChB,UAAU,gBACV,GAAG,aACiC;CACpC,MAAM,eAAe;EAAE,GAAG;EAAmB,GAAG;CAAO;CAEvD,MAAM,OACJ,aACC,aAAa,mBACV,aACA,aAAa,mBAAmB,QAC9B,WACA;CAER,MAAM,iBACJ,uBACC,aAAa,mBAAmB,aAAa;CAEhD,MAAM,EACJ,yBACA,2BACA,wBACE,2BAA2B;CAI/B,MAAM,kBAAkB,YACtB,OAAO,MAAM,SAAS,YAAY;EAChC,IAAI,gBACF,OAAO,eAAe,MAAM,SAAS,OAAO;EAE9C,MAAM,cAAc,oBAAoB;EAExC,IAAI;EACJ,IAAI,sBAAsB,EAAE,WAC1B,cAAc,WAAW,MAAM,WAAW;OAE1C,cAAc,cAAc;EAE9B,OAAO,YAAY,WAAW,CAAC,CAAC,MAAM,SAAS,OAAO;CACxD,GAGA,CAAC,YAAY,cAAc,CAC7B;CAEA,MAAM,eAAe,QAAsB;EACzC,UAAU;EACV;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,OAAO,gBAAgB;CAG7B,MAAM,oBAAoB,YAAY,OAAO,SAAiB;EAC5D,OAAO,KAAK,QAAQ,IAA0B;CAChD,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,gBAAgB,MAAwC;EAC5D,EAAE,eAAe;EACjB,IAAI,UACF,KAAK,aAAa,UAAU,OAAO,CAAC,CAAC,CAAC;CAE1C;CAEA,MAAM,eAAe,eACZ;EACL;EACA;EACA;EACA;EACA;EACA,kBAAkB,aAAa;EAC/B,gBAAgB,aAAa;EAC7B,kBAAkB,aAAa;EAC/B,MAAM,aAAa;EACnB,QAAQ,aAAa;EACrB,YAAY,aAAa;EACzB,UAAU,aAAa;EACvB,OAAO,aAAa;CACtB,IACA;EACE;EACA;EACA;EACA;EACA;EACA,aAAa;EACb,aAAa;EACb,aAAa;EACb,aAAa;EACb,aAAa;EACb,aAAa;EACb,aAAa;EACb,aAAa;CACf,CACF;CAEA,OACE,oBAAC,kBAAkB,UAAnB;EAA4B,OAAO;EACjC,UAAA,oBAAC,cAAD;GAAiB,GAAI;GACnB,UAAA,oBAAC,QAAD;IACE,GAAI;IACJ,UAAU;IACV,YAAA;IAEC;GACG,CAAA;EACS,CAAA;CACS,CAAA;AAEhC;AAEA,KAAK,cAAc"}

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

@@ -1 +1 @@
-{"version":3,"file":"FormSwitch.js","names":[],"sources":["../../../src/components/Form/FormSwitch.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { 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 \"../../primitives/switch\";\r\nimport { Label } from \"../../primitives/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 FormSwitchProps<\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 * <FormSwitch name=\"notifications\" label=\"Enable notifications\" />\r\n * <FormSwitch name=\"terms\" label=\"Accept terms\" required=\"You must accept the terms\" />\r\n * <FormSwitch name=\"darkMode\" label=\"Dark mode\" checkedText=\"On\" uncheckedText=\"Off\" />\r\n * ```\r\n */\r\nfunction FormSwitchInner<\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  }: FormSwitchProps<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\nexport const FormSwitch = forwardRef(FormSwitchInner) as <\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n>(\r\n  props: FormSwitchProps<TFieldValues, TName> & { ref?: React.ForwardedRef<React.ElementRef<typeof SwitchPrimitives.Root>> }\r\n) => React.ReactElement;\r\n\r\n(FormSwitch as React.FC).displayName = \"FormSwitch\";\r\n"],"mappings":";;;;;;;;;;;AAYA,IAAM,qBAAqB,IACzB,IACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CACF;AAEA,IAAM,gBAAgB,IACpB,kDACA;CACE,UAAU,EACR,UAAU;EACR,MAAM;EACN,OAAO;CACT,EACF;CACA,iBAAiB,EACf,UAAU,MACZ;AACF,CACF;;;;;;;;;;;;;;;;;;AAgDA,SAAS,gBAIP,EACE,MACA,OACA,YACA,YAAY,MACZ,OAAO,aACP,MACA,WACA,UACA,IAAI,YACJ,SAAS,iBACT,aACA,eAEA,UACA,UACA,GAAG,SAEL,KACA;CACA,MAAM,cAAc,MAAM;CAC1B,MAAM,UAAU,cAAc;CAG9B,MAAM,oBAAoB,WAAW,iBAAiB;CACtD,MAAM,aAAyB,qBAAqB,CAAC;CAGrD,MAAM,aAAa,eAAgC;CACnD,MAAM,UAAU,mBAAmB,YAAY;CAG/C,gBAAgB;EACd,IAAI,mBAAmB,yBAAyB;GAC9C,MAAM,QAA8B,CAAC;GAErC,IAAI,aAAa,KAAA,GAAW,MAAM,WAAW;GAC7C,IAAI,aAAa,KAAA,GAAW,MAAM,WAAW;GAE7C,kBAAkB,wBAAwB;IAClC;IACN,MAAM;IACN;GACF,CAAC;GAED,aAAa;IACX,kBAAkB,0BAA0B,IAAc;GAC5D;EACF;CACF,GAAG;EAAC;EAAmB;EAAM;EAAU;CAAQ,CAAC;CAGhD,MAAM,EAAE,OAAO,eAAe,cAAmC;EAC/D;EACA;CACF,CAAC;CAED,MAAM,aAAa,WAAW,OAAO;CACrC,MAAM,eAAe,eAAe;CACpC,MAAM,WAAW,CAAC,CAAC;CAGnB,MAAM,gBAAgB,QAAQ,WAAW,QAAQ;CACjD,MAAM,oBAAoB,YAAY,WAAW;CACjD,MAAM,YAAY,MAAM,SAAS;CAEjC,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,qBAAC,OAAD;IAAK,WAAU;cAAf;KACE,oBAAC,QAAD;MACE,GAAI;MACC;MACL,IAAI;MACJ,SAAS;MACT,kBAAkB,YAAY,MAAM,SAAS,OAAO;MACpD,UAAU;MACV,mBAAiB,QAAQ,GAAG,QAAQ,UAAU,KAAA;MAC9C,WAAW,GACT,mBAAmB,EAAE,MAAM,cAAc,CAAC,GAC1C,SACF;KACD,CAAA;MAEC,eAAe,kBACf,oBAAC,QAAD;MAAM,WAAU;gBACb,YAAY,cAAc;KACvB,CAAA;KAGP,SACC,oBAAC,OAAD;MACE,IAAI,GAAG,QAAQ;MACf,SAAS;MACT,WAAW,cAAc,EAAE,UAAU,kBAAkB,CAAC;gBAEvD;KACI,CAAA;IAEN;;GAEJ,aAAa,YACZ,oBAAC,KAAD;IAAG,WAAU;IAA2B,MAAK;cAC1C;GACA,CAAA;GAGJ,cAAc,CAAC,YACd,oBAAC,KAAD;IAAG,WAAU;cACV;GACA,CAAA;EAEF;;AAET;AAEA,IAAa,aAAa,WAAW,eAAe;AAOpD,WAAyB,cAAc"}
+{"version":3,"file":"FormSwitch.js","names":[],"sources":["../../../src/components/Form/FormSwitch.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { 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 \"../../primitives/switch\";\r\nimport { Label } from \"../../primitives/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 FormSwitchProps<\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 * <FormSwitch name=\"notifications\" label=\"Enable notifications\" />\r\n * <FormSwitch name=\"terms\" label=\"Accept terms\" required=\"You must accept the terms\" />\r\n * <FormSwitch name=\"darkMode\" label=\"Dark mode\" checkedText=\"On\" uncheckedText=\"Off\" />\r\n * ```\r\n */\r\nfunction FormSwitchInner<\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  }: FormSwitchProps<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\nexport const FormSwitch = forwardRef(FormSwitchInner) as <\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n>(\r\n  props: FormSwitchProps<TFieldValues, TName> & { ref?: React.ForwardedRef<React.ElementRef<typeof SwitchPrimitives.Root>> }\r\n) => React.ReactElement;\r\n\r\n(FormSwitch as React.FC).displayName = \"FormSwitch\";\r\n"],"mappings":";;;;;;;;;;;AAYA,IAAM,qBAAqB,IACzB,IACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CACF;AAEA,IAAM,gBAAgB,IACpB,kDACA;CACE,UAAU,EACR,UAAU;EACR,MAAM;EACN,OAAO;CACT,EACF;CACA,iBAAiB,EACf,UAAU,MACZ;AACF,CACF;;;;;;;;;;;;;;;;;;AAgDA,SAAS,gBAIP,EACE,MACA,OACA,YACA,YAAY,MACZ,OAAO,aACP,MACA,WACA,UACA,IAAI,YACJ,SAAS,iBACT,aACA,eAEA,UACA,UACA,GAAG,SAEL,KACA;CACA,MAAM,cAAc,MAAM;CAC1B,MAAM,UAAU,cAAc;CAG9B,MAAM,oBAAoB,WAAW,iBAAiB;CACtD,MAAM,aAAyB,qBAAqB,CAAC;CAGrD,MAAM,aAAa,eAAgC;CACnD,MAAM,UAAU,mBAAmB,YAAY;CAG/C,gBAAgB;EACd,IAAI,mBAAmB,yBAAyB;GAC9C,MAAM,QAA8B,CAAC;GAErC,IAAI,aAAa,KAAA,GAAW,MAAM,WAAW;GAC7C,IAAI,aAAa,KAAA,GAAW,MAAM,WAAW;GAE7C,kBAAkB,wBAAwB;IAClC;IACN,MAAM;IACN;GACF,CAAC;GAED,aAAa;IACX,kBAAkB,0BAA0B,IAAc;GAC5D;EACF;CACF,GAAG;EAAC;EAAmB;EAAM;EAAU;CAAQ,CAAC;CAGhD,MAAM,EAAE,OAAO,eAAe,cAAmC;EAC/D;EACA;CACF,CAAC;CAED,MAAM,aAAa,WAAW,OAAO;CACrC,MAAM,eAAe,eAAe;CACpC,MAAM,WAAW,CAAC,CAAC;CAGnB,MAAM,gBAAgB,QAAQ,WAAW,QAAQ;CACjD,MAAM,oBAAoB,YAAY,WAAW;CACjD,MAAM,YAAY,MAAM,SAAS;CAEjC,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA;GACE,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,oBAAC,QAAD;MACE,GAAI;MACC;MACL,IAAI;MACJ,SAAS;MACT,kBAAkB,YAAY,MAAM,SAAS,OAAO;MACpD,UAAU;MACV,mBAAiB,QAAQ,GAAG,QAAQ,UAAU,KAAA;MAC9C,WAAW,GACT,mBAAmB,EAAE,MAAM,cAAc,CAAC,GAC1C,SACF;KACD,CAAA;MAEC,eAAe,kBACf,oBAAC,QAAD;MAAM,WAAU;MACb,UAAA,YAAY,cAAc;KACvB,CAAA;KAGP,SACC,oBAAC,OAAD;MACE,IAAI,GAAG,QAAQ;MACf,SAAS;MACT,WAAW,cAAc,EAAE,UAAU,kBAAkB,CAAC;MAEvD,UAAA;KACI,CAAA;IAEN;;GAEJ,aAAa,YACZ,oBAAC,KAAD;IAAG,WAAU;IAA2B,MAAK;IAC1C,UAAA;GACA,CAAA;GAGJ,cAAc,CAAC,YACd,oBAAC,KAAD;IAAG,WAAU;IACV,UAAA;GACA,CAAA;EAEF;;AAET;AAEA,IAAa,aAAa,WAAW,eAAe;AAOpD,WAAyB,cAAc"}

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

@@ -0,0 +1,38 @@
+import { Control, FieldPath, FieldValues } from 'react-hook-form';
+import { VariantProps } from 'class-variance-authority';
+declare const phoneInputVariants: (props?: ({
+    size?: "sm" | "lg" | "md" | null | undefined;
+    variant?: "default" | "error" | "success" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type ValidationRule<T> = T | {
+    value: T;
+    message: string;
+};
+export interface PhoneInputProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends VariantProps<typeof phoneInputVariants> {
+    name: TName;
+    label?: string;
+    helperText?: string;
+    showError?: boolean;
+    error?: string;
+    fullWidth?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    className?: string;
+    id?: string;
+    control?: Control<TFieldValues>;
+    defaultCountry?: string;
+    priorityCountries?: string[];
+    /** Field is required (`true` or custom error message string) */
+    required?: boolean | string;
+    /** Minimum national number length */
+    minLength?: ValidationRule<number>;
+    /** Maximum national number length */
+    maxLength?: ValidationRule<number>;
+    validate?: (value: unknown) => boolean | string | Promise<boolean | string>;
+}
+export declare function PhoneInput<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, label, helperText, showError, error: customError, size, variant, fullWidth, placeholder, disabled, className, id: providedId, control: externalControl, defaultCountry, priorityCountries, required, minLength, maxLength, validate, }: PhoneInputProps<TFieldValues, TName>): import("react").JSX.Element;
+export declare namespace PhoneInput {
+    var displayName: string;
+}
+export {};
+//# sourceMappingURL=PhoneInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../src/components/Form/PhoneInput.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAsD,KAAK,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACrI,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAYlE,QAAA,MAAM,kBAAkB;;;8EAiBtB,CAAC;AAEH,KAAK,cAAc,CAAC,CAAC,IAAI,CAAC,GAAG;IAAE,KAAK,EAAE,CAAC,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,CAAC;AAE3D,MAAM,WAAW,eAAe,CAC9B,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,CAC/D,SAAQ,YAAY,CAAC,OAAO,kBAAkB,CAAC;IAC/C,IAAI,EAAE,KAAK,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAChC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B,gEAAgE;IAChE,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC5B,qCAAqC;IACrC,SAAS,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;IACnC,qCAAqC;IACrC,SAAS,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;IACnC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,OAAO,GAAG,MAAM,CAAC,CAAC;CAC7E;AA0DD,wBAAgB,UAAU,CACxB,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,EAC/D,EACA,IAAI,EACJ,KAAK,EACL,UAAU,EACV,SAAgB,EAChB,KAAK,EAAE,WAAW,EAClB,IAAI,EACJ,OAAO,EACP,SAAgB,EAChB,WAA6B,EAC7B,QAAQ,EACR,SAAS,EACT,EAAE,EAAE,UAAU,EACd,OAAO,EAAE,eAAe,EACxB,cAAqB,EACrB,iBAAiB,EACjB,QAAQ,EACR,SAAS,EACT,SAAS,EACT,QAAQ,GACT,EAAE,eAAe,CAAC,YAAY,EAAE,KAAK,CAAC,+BAuJtC;yBA9Ke,UAAU"}

package/dist/components/Form/PhoneInput.js

@@ -0,0 +1,170 @@
+"use client";
+"use client";
+import { cn } from "../../utils/cn.js";
+import { FormConfigContext } from "./context.js";
+import { FieldLayout } from "./FieldLayout.js";
+import { TextBoxPrimitive } from "../../primitives/textbox.js";
+import { formatE164, getCountryDialCode, parseE164 } from "../../data/countries.js";
+import { CountryPicker } from "./CountryPicker.js";
+import { useContext, useEffect, useId, useMemo, useState } from "react";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useController, useFormContext } from "react-hook-form";
+//#region src/components/Form/PhoneInput.tsx
+var phoneInputVariants = cva("", {
+	variants: {
+		size: {
+			sm: "h-8 text-xs",
+			md: "h-10 text-sm",
+			lg: "h-12 text-base"
+		},
+		variant: {
+			default: "border-input focus-within:ring-ring",
+			error: "border-destructive focus-within:ring-destructive",
+			success: "border-green-500 focus-within:ring-green-500"
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		variant: "default"
+	}
+});
+function getValidationRuleValue(rule, defaultMessage) {
+	if (rule === void 0) return null;
+	if (typeof rule === "object" && rule !== null && "value" in rule) return rule;
+	return {
+		value: rule,
+		message: defaultMessage
+	};
+}
+function buildPhoneValidate(required, minLength, maxLength, validate) {
+	const requiredMessage = typeof required === "string" ? required : "This field is required";
+	return async (value) => {
+		const nationalNumber = parseE164(String(value ?? ""))?.nationalNumber ?? "";
+		if (required !== void 0 && !nationalNumber) return requiredMessage;
+		const minLengthRule = getValidationRuleValue(minLength, `Minimum ${typeof minLength === "number" ? minLength : minLength?.value} digits required`);
+		if (minLengthRule && nationalNumber.length < minLengthRule.value) return minLengthRule.message;
+		const maxLengthRule = getValidationRuleValue(maxLength, `Maximum ${typeof maxLength === "number" ? maxLength : maxLength?.value} digits allowed`);
+		if (maxLengthRule && nationalNumber.length > maxLengthRule.value) return maxLengthRule.message;
+		if (validate) return validate(value);
+		return true;
+	};
+}
+function PhoneInput({ name, label, helperText, showError = true, error: customError, size, variant, fullWidth = true, placeholder = "Mobile number", disabled, className, id: providedId, control: externalControl, defaultCountry = "IN", priorityCountries, required, minLength, maxLength, validate }) {
+	const generatedId = useId();
+	const inputId = providedId ?? generatedId;
+	const formConfigContext = useContext(FormConfigContext);
+	const formConfig = formConfigContext ?? {};
+	const rhfContext = useFormContext();
+	const control = externalControl ?? rhfContext?.control;
+	const registerFieldValidation = formConfigContext?.registerFieldValidation;
+	const unregisterFieldValidation = formConfigContext?.unregisterFieldValidation;
+	useEffect(() => {
+		if (registerFieldValidation) {
+			const rules = {};
+			if (required !== void 0) rules.required = required;
+			if (required !== void 0 || minLength !== void 0 || maxLength !== void 0 || validate !== void 0) rules.validate = buildPhoneValidate(required, minLength, maxLength, validate);
+			registerFieldValidation({
+				name,
+				type: "string",
+				rules
+			});
+			return () => {
+				unregisterFieldValidation?.(name);
+			};
+		}
+	}, [
+		registerFieldValidation,
+		unregisterFieldValidation,
+		name,
+		required,
+		minLength,
+		maxLength,
+		validate
+	]);
+	const { field, fieldState } = useController({
+		name,
+		control
+	});
+	const parsedValue = useMemo(() => parseE164(field.value ?? ""), [field.value]);
+	const [countryCode, setCountryCode] = useState(parsedValue?.countryCode ?? defaultCountry);
+	const [nationalNumber, setNationalNumber] = useState(parsedValue?.nationalNumber ?? "");
+	useEffect(() => {
+		const parsed = parseE164(field.value ?? "");
+		if (parsed) {
+			setCountryCode(parsed.countryCode);
+			setNationalNumber(parsed.nationalNumber);
+			return;
+		}
+		if (!field.value) {
+			setCountryCode(defaultCountry);
+			setNationalNumber("");
+		}
+	}, [field.value, defaultCountry]);
+	const fieldError = fieldState.error?.message;
+	const errorMessage = customError ?? fieldError;
+	const hasError = !!errorMessage;
+	const effectiveSize = size ?? formConfig.size ?? "md";
+	const effectiveDisabled = disabled ?? formConfig.disabled;
+	const effectiveVariant = hasError ? "error" : variant;
+	const dialCode = getCountryDialCode(countryCode);
+	const updateValue = (nextCountryCode, nextNationalNumber) => {
+		setCountryCode(nextCountryCode);
+		setNationalNumber(nextNationalNumber);
+		field.onChange(formatE164(nextCountryCode, nextNationalNumber));
+	};
+	return /* @__PURE__ */ jsx(FieldLayout, {
+		inputId,
+		label,
+		required: !!required,
+		helperText,
+		errorMessage: showError ? errorMessage : void 0,
+		showError,
+		fullWidth,
+		formConfig,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cn("flex items-stretch overflow-hidden rounded-md border bg-background focus-within:ring-2 focus-within:ring-offset-2", phoneInputVariants({
+				size: effectiveSize,
+				variant: effectiveVariant
+			}), className),
+			children: [
+				/* @__PURE__ */ jsx(CountryPicker, {
+					compact: true,
+					value: countryCode,
+					onValueChange: (value) => updateValue(value, nationalNumber),
+					disabled: effectiveDisabled,
+					priorityCountries,
+					required: !!required,
+					"aria-invalid": hasError,
+					"aria-describedby": hasError ? `${inputId}-error` : helperText ? `${inputId}-helper` : void 0
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "flex items-center border-l px-3 text-sm text-muted-foreground",
+					children: dialCode
+				}),
+				/* @__PURE__ */ jsx(TextBoxPrimitive, {
+					id: inputId,
+					type: "tel",
+					inputMode: "numeric",
+					autoComplete: "tel-national",
+					value: nationalNumber,
+					onChange: (event) => {
+						const digits = event.target.value.replace(/\D/g, "");
+						updateValue(countryCode, digits);
+					},
+					placeholder,
+					disabled: effectiveDisabled,
+					"aria-required": !!required,
+					"aria-invalid": hasError,
+					"aria-describedby": hasError ? `${inputId}-error` : helperText ? `${inputId}-helper` : void 0,
+					className: cn("h-full min-w-0 flex-1 border-0 bg-transparent px-3 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0")
+				})
+			]
+		})
+	});
+}
+PhoneInput.displayName = "PhoneInput";
+//#endregion
+export { PhoneInput };
+
+//# sourceMappingURL=PhoneInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PhoneInput.js","names":[],"sources":["../../../src/components/Form/PhoneInput.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { useContext, useEffect, useId, useMemo, useState } from \"react\";\r\nimport { useController, useFormContext as useRHFFormContext, type Control, type FieldPath, type FieldValues } from \"react-hook-form\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { cn } from \"../../utils/cn\";\r\nimport {\r\n  formatE164,\r\n  getCountryDialCode,\r\n  parseE164,\r\n} from \"../../data/countries\";\r\nimport { TextBoxPrimitive } from \"../../primitives/textbox\";\r\nimport { FormConfigContext, type FieldValidationRules, type FormConfig } from \"./context\";\r\nimport { FieldLayout } from \"./FieldLayout\";\r\nimport { CountryPicker } from \"./CountryPicker\";\r\n\r\nconst phoneInputVariants = cva(\"\", {\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    variant: {\r\n      default: \"border-input focus-within:ring-ring\",\r\n      error: \"border-destructive focus-within:ring-destructive\",\r\n      success: \"border-green-500 focus-within:ring-green-500\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    size: \"md\",\r\n    variant: \"default\",\r\n  },\r\n});\r\n\r\ntype ValidationRule<T> = T | { value: T; message: string };\r\n\r\nexport interface PhoneInputProps<\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n> extends VariantProps<typeof phoneInputVariants> {\r\n  name: TName;\r\n  label?: string;\r\n  helperText?: string;\r\n  showError?: boolean;\r\n  error?: string;\r\n  fullWidth?: boolean;\r\n  placeholder?: string;\r\n  disabled?: boolean;\r\n  className?: string;\r\n  id?: string;\r\n  control?: Control<TFieldValues>;\r\n  defaultCountry?: string;\r\n  priorityCountries?: string[];\r\n  /** Field is required (`true` or custom error message string) */\r\n  required?: boolean | string;\r\n  /** Minimum national number length */\r\n  minLength?: ValidationRule<number>;\r\n  /** Maximum national number length */\r\n  maxLength?: ValidationRule<number>;\r\n  validate?: (value: unknown) => boolean | string | Promise<boolean | string>;\r\n}\r\n\r\nfunction getValidationRuleValue<T>(\r\n  rule: ValidationRule<T> | undefined,\r\n  defaultMessage: string\r\n): { value: T; message: string } | null {\r\n  if (rule === undefined) {\r\n    return null;\r\n  }\r\n\r\n  if (typeof rule === \"object\" && rule !== null && \"value\" in rule) {\r\n    return rule as { value: T; message: string };\r\n  }\r\n\r\n  return { value: rule as T, message: defaultMessage };\r\n}\r\n\r\nfunction buildPhoneValidate(\r\n  required: boolean | string | undefined,\r\n  minLength: ValidationRule<number> | undefined,\r\n  maxLength: ValidationRule<number> | undefined,\r\n  validate: PhoneInputProps[\"validate\"]\r\n) {\r\n  const requiredMessage =\r\n    typeof required === \"string\" ? required : \"This field is required\";\r\n\r\n  return async (value: unknown) => {\r\n    const parsed = parseE164(String(value ?? \"\"));\r\n    const nationalNumber = parsed?.nationalNumber ?? \"\";\r\n\r\n    if (required !== undefined && !nationalNumber) {\r\n      return requiredMessage;\r\n    }\r\n\r\n    const minLengthRule = getValidationRuleValue(\r\n      minLength,\r\n      `Minimum ${typeof minLength === \"number\" ? minLength : minLength?.value} digits required`\r\n    );\r\n    if (minLengthRule && nationalNumber.length < minLengthRule.value) {\r\n      return minLengthRule.message;\r\n    }\r\n\r\n    const maxLengthRule = getValidationRuleValue(\r\n      maxLength,\r\n      `Maximum ${typeof maxLength === \"number\" ? maxLength : maxLength?.value} digits allowed`\r\n    );\r\n    if (maxLengthRule && nationalNumber.length > maxLengthRule.value) {\r\n      return maxLengthRule.message;\r\n    }\r\n\r\n    if (validate) {\r\n      return validate(value);\r\n    }\r\n\r\n    return true;\r\n  };\r\n}\r\n\r\nexport function PhoneInput<\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  placeholder = \"Mobile number\",\r\n  disabled,\r\n  className,\r\n  id: providedId,\r\n  control: externalControl,\r\n  defaultCountry = \"IN\",\r\n  priorityCountries,\r\n  required,\r\n  minLength,\r\n  maxLength,\r\n  validate,\r\n}: PhoneInputProps<TFieldValues, TName>) {\r\n  const generatedId = useId();\r\n  const inputId = providedId ?? generatedId;\r\n  const formConfigContext = useContext(FormConfigContext);\r\n  const formConfig: FormConfig = formConfigContext ?? {};\r\n  const rhfContext = useRHFFormContext<TFieldValues>();\r\n  const control = externalControl ?? rhfContext?.control;\r\n\r\n  const registerFieldValidation = formConfigContext?.registerFieldValidation;\r\n  const unregisterFieldValidation = formConfigContext?.unregisterFieldValidation;\r\n\r\n  useEffect(() => {\r\n    if (registerFieldValidation) {\r\n      const rules: FieldValidationRules = {};\r\n      if (required !== undefined) rules.required = required;\r\n\r\n      if (\r\n        required !== undefined ||\r\n        minLength !== undefined ||\r\n        maxLength !== undefined ||\r\n        validate !== undefined\r\n      ) {\r\n        rules.validate = buildPhoneValidate(required, minLength, maxLength, validate);\r\n      }\r\n\r\n      registerFieldValidation({\r\n        name: name as string,\r\n        type: \"string\",\r\n        rules,\r\n      });\r\n\r\n      return () => {\r\n        unregisterFieldValidation?.(name as string);\r\n      };\r\n    }\r\n  }, [\r\n    registerFieldValidation,\r\n    unregisterFieldValidation,\r\n    name,\r\n    required,\r\n    minLength,\r\n    maxLength,\r\n    validate,\r\n  ]);\r\n\r\n  const { field, fieldState } = useController<TFieldValues, TName>({\r\n    name,\r\n    control,\r\n  });\r\n\r\n  const parsedValue = useMemo(() => parseE164(field.value ?? \"\"), [field.value]);\r\n  const [countryCode, setCountryCode] = useState(\r\n    parsedValue?.countryCode ?? defaultCountry\r\n  );\r\n  const [nationalNumber, setNationalNumber] = useState(parsedValue?.nationalNumber ?? \"\");\r\n\r\n  useEffect(() => {\r\n    const parsed = parseE164(field.value ?? \"\");\r\n    if (parsed) {\r\n      setCountryCode(parsed.countryCode);\r\n      setNationalNumber(parsed.nationalNumber);\r\n      return;\r\n    }\r\n\r\n    if (!field.value) {\r\n      setCountryCode(defaultCountry);\r\n      setNationalNumber(\"\");\r\n    }\r\n  }, [field.value, defaultCountry]);\r\n\r\n  const fieldError = fieldState.error?.message;\r\n  const errorMessage = customError ?? fieldError;\r\n  const hasError = !!errorMessage;\r\n  const effectiveSize = size ?? formConfig.size ?? \"md\";\r\n  const effectiveDisabled = disabled ?? formConfig.disabled;\r\n  const effectiveVariant = hasError ? \"error\" : variant;\r\n  const dialCode = getCountryDialCode(countryCode);\r\n\r\n  const updateValue = (nextCountryCode: string, nextNationalNumber: string) => {\r\n    setCountryCode(nextCountryCode);\r\n    setNationalNumber(nextNationalNumber);\r\n    field.onChange(formatE164(nextCountryCode, nextNationalNumber));\r\n  };\r\n\r\n  return (\r\n    <FieldLayout\r\n      inputId={inputId}\r\n      label={label}\r\n      required={!!required}\r\n      helperText={helperText}\r\n      errorMessage={showError ? errorMessage : undefined}\r\n      showError={showError}\r\n      fullWidth={fullWidth}\r\n      formConfig={formConfig}\r\n    >\r\n      <div\r\n        className={cn(\r\n          \"flex items-stretch overflow-hidden rounded-md border bg-background focus-within:ring-2 focus-within:ring-offset-2\",\r\n          phoneInputVariants({ size: effectiveSize, variant: effectiveVariant }),\r\n          className\r\n        )}\r\n      >\r\n        <CountryPicker\r\n          compact\r\n          value={countryCode}\r\n          onValueChange={(value) => updateValue(value, nationalNumber)}\r\n          disabled={effectiveDisabled}\r\n          priorityCountries={priorityCountries}\r\n          required={!!required}\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        />\r\n\r\n        <div className=\"flex items-center border-l px-3 text-sm text-muted-foreground\">\r\n          {dialCode}\r\n        </div>\r\n\r\n        <TextBoxPrimitive\r\n          id={inputId}\r\n          type=\"tel\"\r\n          inputMode=\"numeric\"\r\n          autoComplete=\"tel-national\"\r\n          value={nationalNumber}\r\n          onChange={(event) => {\r\n            const digits = event.target.value.replace(/\\D/g, \"\");\r\n            updateValue(countryCode, digits);\r\n          }}\r\n          placeholder={placeholder}\r\n          disabled={effectiveDisabled}\r\n          aria-required={!!required}\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            \"h-full min-w-0 flex-1 border-0 bg-transparent px-3 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0\"\r\n          )}\r\n        />\r\n      </div>\r\n    </FieldLayout>\r\n  );\r\n}\r\n\r\nPhoneInput.displayName = \"PhoneInput\";\r\n"],"mappings":";;;;;;;;;;;;;AAgBA,IAAM,qBAAqB,IAAI,IAAI;CACjC,UAAU;EACR,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EACA,SAAS;GACP,SAAS;GACT,OAAO;GACP,SAAS;EACX;CACF;CACA,iBAAiB;EACf,MAAM;EACN,SAAS;CACX;AACF,CAAC;AA8BD,SAAS,uBACP,MACA,gBACsC;CACtC,IAAI,SAAS,KAAA,GACX,OAAO;CAGT,IAAI,OAAO,SAAS,YAAY,SAAS,QAAQ,WAAW,MAC1D,OAAO;CAGT,OAAO;EAAE,OAAO;EAAW,SAAS;CAAe;AACrD;AAEA,SAAS,mBACP,UACA,WACA,WACA,UACA;CACA,MAAM,kBACJ,OAAO,aAAa,WAAW,WAAW;CAE5C,OAAO,OAAO,UAAmB;EAE/B,MAAM,iBADS,UAAU,OAAO,SAAS,EAAE,CACpB,CAAA,EAAQ,kBAAkB;EAEjD,IAAI,aAAa,KAAA,KAAa,CAAC,gBAC7B,OAAO;EAGT,MAAM,gBAAgB,uBACpB,WACA,WAAW,OAAO,cAAc,WAAW,YAAY,WAAW,MAAM,iBAC1E;EACA,IAAI,iBAAiB,eAAe,SAAS,cAAc,OACzD,OAAO,cAAc;EAGvB,MAAM,gBAAgB,uBACpB,WACA,WAAW,OAAO,cAAc,WAAW,YAAY,WAAW,MAAM,gBAC1E;EACA,IAAI,iBAAiB,eAAe,SAAS,cAAc,OACzD,OAAO,cAAc;EAGvB,IAAI,UACF,OAAO,SAAS,KAAK;EAGvB,OAAO;CACT;AACF;AAEA,SAAgB,WAGd,EACA,MACA,OACA,YACA,YAAY,MACZ,OAAO,aACP,MACA,SACA,YAAY,MACZ,cAAc,iBACd,UACA,WACA,IAAI,YACJ,SAAS,iBACT,iBAAiB,MACjB,mBACA,UACA,WACA,WACA,YACuC;CACvC,MAAM,cAAc,MAAM;CAC1B,MAAM,UAAU,cAAc;CAC9B,MAAM,oBAAoB,WAAW,iBAAiB;CACtD,MAAM,aAAyB,qBAAqB,CAAC;CACrD,MAAM,aAAa,eAAgC;CACnD,MAAM,UAAU,mBAAmB,YAAY;CAE/C,MAAM,0BAA0B,mBAAmB;CACnD,MAAM,4BAA4B,mBAAmB;CAErD,gBAAgB;EACd,IAAI,yBAAyB;GAC3B,MAAM,QAA8B,CAAC;GACrC,IAAI,aAAa,KAAA,GAAW,MAAM,WAAW;GAE7C,IACE,aAAa,KAAA,KACb,cAAc,KAAA,KACd,cAAc,KAAA,KACd,aAAa,KAAA,GAEb,MAAM,WAAW,mBAAmB,UAAU,WAAW,WAAW,QAAQ;GAG9E,wBAAwB;IAChB;IACN,MAAM;IACN;GACF,CAAC;GAED,aAAa;IACX,4BAA4B,IAAc;GAC5C;EACF;CACF,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,EAAE,OAAO,eAAe,cAAmC;EAC/D;EACA;CACF,CAAC;CAED,MAAM,cAAc,cAAc,UAAU,MAAM,SAAS,EAAE,GAAG,CAAC,MAAM,KAAK,CAAC;CAC7E,MAAM,CAAC,aAAa,kBAAkB,SACpC,aAAa,eAAe,cAC9B;CACA,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,aAAa,kBAAkB,EAAE;CAEtF,gBAAgB;EACd,MAAM,SAAS,UAAU,MAAM,SAAS,EAAE;EAC1C,IAAI,QAAQ;GACV,eAAe,OAAO,WAAW;GACjC,kBAAkB,OAAO,cAAc;GACvC;EACF;EAEA,IAAI,CAAC,MAAM,OAAO;GAChB,eAAe,cAAc;GAC7B,kBAAkB,EAAE;EACtB;CACF,GAAG,CAAC,MAAM,OAAO,cAAc,CAAC;CAEhC,MAAM,aAAa,WAAW,OAAO;CACrC,MAAM,eAAe,eAAe;CACpC,MAAM,WAAW,CAAC,CAAC;CACnB,MAAM,gBAAgB,QAAQ,WAAW,QAAQ;CACjD,MAAM,oBAAoB,YAAY,WAAW;CACjD,MAAM,mBAAmB,WAAW,UAAU;CAC9C,MAAM,WAAW,mBAAmB,WAAW;CAE/C,MAAM,eAAe,iBAAyB,uBAA+B;EAC3E,eAAe,eAAe;EAC9B,kBAAkB,kBAAkB;EACpC,MAAM,SAAS,WAAW,iBAAiB,kBAAkB,CAAC;CAChE;CAEA,OACE,oBAAC,aAAD;EACW;EACF;EACP,UAAU,CAAC,CAAC;EACA;EACZ,cAAc,YAAY,eAAe,KAAA;EAC9B;EACA;EACC;EAEZ,UAAA,qBAAC,OAAD;GACE,WAAW,GACT,qHACA,mBAAmB;IAAE,MAAM;IAAe,SAAS;GAAiB,CAAC,GACrE,SACF;GALF,UAAA;IAOE,oBAAC,eAAD;KACE,SAAA;KACA,OAAO;KACP,gBAAgB,UAAU,YAAY,OAAO,cAAc;KAC3D,UAAU;KACS;KACnB,UAAU,CAAC,CAAC;KACZ,gBAAc;KACd,oBACE,WACI,GAAG,QAAQ,UACX,aACE,GAAG,QAAQ,WACX,KAAA;IAET,CAAA;IAED,oBAAC,OAAD;KAAK,WAAU;KACZ,UAAA;IACE,CAAA;IAEL,oBAAC,kBAAD;KACE,IAAI;KACJ,MAAK;KACL,WAAU;KACV,cAAa;KACb,OAAO;KACP,WAAW,UAAU;MACnB,MAAM,SAAS,MAAM,OAAO,MAAM,QAAQ,OAAO,EAAE;MACnD,YAAY,aAAa,MAAM;KACjC;KACa;KACb,UAAU;KACV,iBAAe,CAAC,CAAC;KACjB,gBAAc;KACd,oBACE,WACI,GAAG,QAAQ,UACX,aACE,GAAG,QAAQ,WACX,KAAA;KAER,WAAW,GACT,iHACF;IACD,CAAA;GACE;;CACM,CAAA;AAEjB;AAEA,WAAW,cAAc"}

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

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","names":[],"sources":["../../../src/components/Form/Radio.tsx"],"sourcesContent":["'use client';\n\nimport { 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"],"mappings":"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"}
+{"version":3,"file":"Radio.js","names":[],"sources":["../../../src/components/Form/Radio.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { 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 \"../../primitives/radio-group\";\r\nimport { Label } from \"../../primitives/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"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Form/Select.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAsD,KAAK,WAAW,EAAE,KAAK,SAAS,EAAE,KAAK,OAAO,EAAE,MAAM,iBAAiB,CAAC;AACrI,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAalE,QAAA,MAAM,kBAAkB;;8EAcvB,CAAC;AAEF,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,WAAW,CAC1B,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,CAC/D,SAAQ,YAAY,CAAC,OAAO,kBAAkB,CAAC;IAC/C,iDAAiD;IACjD,IAAI,EAAE,KAAK,CAAC;IACZ,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wCAAwC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4BAA4B;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAChC,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wBAAwB;IACxB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,oBAAoB;IACpB,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IAG1C,wBAAwB;IACxB,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC5B,iCAAiC;IACjC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,OAAO,GAAG,MAAM,CAAC,CAAC;CAC7E;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,MAAM,CACpB,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,EAC/D,EACA,IAAI,EACJ,KAAK,EACL,UAAU,EACV,SAAgB,EAChB,KAAK,EAAE,WAAW,EAClB,IAAI,EACJ,OAAO,EACP,SAAgB,EAChB,SAAS,EACT,QAAQ,EACR,OAAY,EACZ,WAAW,EACX,UAAU,EACV,EAAE,EAAE,UAAU,EACd,OAAO,EAAE,eAAe,EACxB,QAAQ,EAER,QAAQ,EACR,QAAQ,GACT,EAAE,WAAW,CAAC,YAAY,EAAE,KAAK,CAAC,+BAkIlC;yBAzJe,MAAM"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Form/Select.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAsD,KAAK,WAAW,EAAE,KAAK,SAAS,EAAE,KAAK,OAAO,EAAE,MAAM,iBAAiB,CAAC;AACrI,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAYlE,QAAA,MAAM,kBAAkB;;8EAcvB,CAAC;AAEF,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,WAAW,CAC1B,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,CAC/D,SAAQ,YAAY,CAAC,OAAO,kBAAkB,CAAC;IAC/C,iDAAiD;IACjD,IAAI,EAAE,KAAK,CAAC;IACZ,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wCAAwC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4BAA4B;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAChC,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wBAAwB;IACxB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,oBAAoB;IACpB,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IAG1C,wBAAwB;IACxB,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC5B,iCAAiC;IACjC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,OAAO,GAAG,MAAM,CAAC,CAAC;CAC7E;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,MAAM,CACpB,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,EAC/D,EACA,IAAI,EACJ,KAAK,EACL,UAAU,EACV,SAAgB,EAChB,KAAK,EAAE,WAAW,EAClB,IAAI,EACJ,OAAO,EACP,SAAgB,EAChB,SAAS,EACT,QAAQ,EACR,OAAY,EACZ,WAAW,EACX,UAAU,EACV,EAAE,EAAE,UAAU,EACd,OAAO,EAAE,eAAe,EACxB,QAAQ,EAER,QAAQ,EACR,QAAQ,GACT,EAAE,WAAW,CAAC,YAAY,EAAE,KAAK,CAAC,+BA6GlC;yBApIe,MAAM"}

package/dist/components/Form/Select.js

@@ -2,8 +2,7 @@
 "use client";
 import { cn } from "../../utils/cn.js";
 import { FormConfigContext } from "./context.js";
-import { labelVariants } from "./variants.js";
-import { Label } from "../../primitives/label.js";
+import { FieldLayout } from "./FieldLayout.js";
 import { Select as Select$1, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../primitives/select.js";
 import { useContext, useEffect, useId } from "react";
 import { cva } from "class-variance-authority";
@@ -77,51 +76,40 @@ function Select({ name, label, helperText, showError = true, error: customError,
 	const effectiveSize = size ?? formConfig.size ?? "md";
 	const effectiveDisabled = disabled ?? formConfig.disabled;
 	const effectiveVariant = hasError ? "error" : variant;
-	return /* @__PURE__ */ jsxs("div", {
-		className: cn("space-y-1.5", fullWidth && "w-full"),
-		children: [
-			label && /* @__PURE__ */ jsxs(Label, {
-				htmlFor: inputId,
-				className: labelVariants({ required: !!required }),
-				children: [label, formConfig.colon && ":"]
-			}),
-			/* @__PURE__ */ jsxs(Select$1, {
-				value: field.value?.toString() ?? "",
-				onValueChange: (value) => {
-					if (value === "" && allowClear) field.onChange("");
-					else field.onChange(value);
-				},
-				disabled: effectiveDisabled,
-				children: [/* @__PURE__ */ jsx(SelectTrigger, {
-					id: inputId,
-					"aria-invalid": hasError,
-					"aria-describedby": hasError ? `${inputId}-error` : helperText ? `${inputId}-helper` : void 0,
-					className: cn(selectSizeVariants({ size: effectiveSize }), effectiveVariant === "error" && "border-destructive focus:ring-destructive", effectiveVariant === "success" && "border-green-500 focus:ring-green-500", className),
-					children: /* @__PURE__ */ jsx(SelectValue, { placeholder })
-				}), /* @__PURE__ */ jsxs(SelectContent, { children: [allowClear && field.value && /* @__PURE__ */ jsx(SelectItem, {
-					value: "",
-					children: /* @__PURE__ */ jsx("span", {
-						className: "text-muted-foreground",
-						children: "Clear selection"
-					})
-				}), children ?? options.map((option) => /* @__PURE__ */ jsx(SelectItem, {
-					value: option.value.toString(),
-					disabled: option.disabled,
-					children: option.label
-				}, option.value))] })]
-			}),
-			showError && hasError && /* @__PURE__ */ jsx("p", {
-				id: `${inputId}-error`,
-				className: "text-sm text-destructive",
-				role: "alert",
-				children: errorMessage
-			}),
-			helperText && !hasError && /* @__PURE__ */ jsx("p", {
-				id: `${inputId}-helper`,
-				className: "text-sm text-muted-foreground",
-				children: helperText
-			})
-		]
+	return /* @__PURE__ */ jsx(FieldLayout, {
+		inputId,
+		label,
+		required: !!required,
+		helperText,
+		errorMessage: showError ? errorMessage : void 0,
+		showError,
+		fullWidth,
+		formConfig,
+		children: /* @__PURE__ */ jsxs(Select$1, {
+			value: field.value?.toString() ?? "",
+			onValueChange: (value) => {
+				if (value === "" && allowClear) field.onChange("");
+				else field.onChange(value);
+			},
+			disabled: effectiveDisabled,
+			children: [/* @__PURE__ */ jsx(SelectTrigger, {
+				id: inputId,
+				"aria-invalid": hasError,
+				"aria-describedby": hasError ? `${inputId}-error` : helperText ? `${inputId}-helper` : void 0,
+				className: cn(selectSizeVariants({ size: effectiveSize }), effectiveVariant === "error" && "border-destructive focus:ring-destructive", effectiveVariant === "success" && "border-green-500 focus:ring-green-500", className),
+				children: /* @__PURE__ */ jsx(SelectValue, { placeholder })
+			}), /* @__PURE__ */ jsxs(SelectContent, { children: [allowClear && field.value && /* @__PURE__ */ jsx(SelectItem, {
+				value: "",
+				children: /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground",
+					children: "Clear selection"
+				})
+			}), children ?? options.map((option) => /* @__PURE__ */ jsx(SelectItem, {
+				value: option.value.toString(),
+				disabled: option.disabled,
+				children: option.label
+			}, option.value))] })]
+		})
 	});
 }
 Select.displayName = "Select";

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

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":[],"sources":["../../../src/components/Form/Select.tsx"],"sourcesContent":["'use client';\n\nimport { 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"],"mappings":";;;;;;;;;;;;AAkBA,IAAM,qBAAqB,IACzB,IACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CACF;;;;;;;;;;;;;;;;;;;;;;;AAwEA,SAAgB,OAGd,EACA,MACA,OACA,YACA,YAAY,MACZ,OAAO,aACP,MACA,SACA,YAAY,MACZ,WACA,UACA,UAAU,CAAC,GACX,aACA,YACA,IAAI,YACJ,SAAS,iBACT,UAEA,UACA,YACmC;CACnC,MAAM,cAAc,MAAM;CAC1B,MAAM,UAAU,cAAc;CAG9B,MAAM,oBAAoB,WAAW,iBAAiB;CACtD,MAAM,aAAyB,qBAAqB,CAAC;CAGrD,MAAM,aAAa,eAAgC;CACnD,MAAM,UAAU,mBAAmB,YAAY;CAG/C,gBAAgB;EACd,IAAI,mBAAmB,yBAAyB;GAC9C,MAAM,QAA8B,CAAC;GAErC,IAAI,aAAa,KAAA,GAAW,MAAM,WAAW;GAC7C,IAAI,aAAa,KAAA,GAAW,MAAM,WAAW;GAE7C,kBAAkB,wBAAwB;IAClC;IACN,MAAM;IACN;GACF,CAAC;GAED,aAAa;IACX,kBAAkB,0BAA0B,IAAc;GAC5D;EACF;CACF,GAAG;EAAC;EAAmB;EAAM;EAAU;CAAQ,CAAC;CAGhD,MAAM,EAAE,OAAO,eAAe,cAAmC;EAC/D;EACA;CACF,CAAC;CAED,MAAM,aAAa,WAAW,OAAO;CACrC,MAAM,eAAe,eAAe;CACpC,MAAM,WAAW,CAAC,CAAC;CAGnB,MAAM,gBAAgB,QAAQ,WAAW,QAAQ;CACjD,MAAM,oBAAoB,YAAY,WAAW;CAGjD,MAAM,mBAAmB,WAAW,UAAU;CAE9C,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,eAAe,aAAa,QAAQ;YAAvD;GACG,SACC,qBAAC,OAAD;IACE,SAAS;IACT,WAAW,cAAc,EAAE,UAAU,CAAC,CAAC,SAAS,CAAC;cAFnD,CAIG,OACA,WAAW,SAAS,GAChB;;GAGT,qBAAC,UAAD;IACE,OAAO,MAAM,OAAO,SAAS,KAAK;IAClC,gBAAgB,UAAU;KAExB,IAAI,UAAU,MAAM,YAClB,MAAM,SAAS,EAAE;UAEjB,MAAM,SAAS,KAAK;IAExB;IACA,UAAU;cAVZ,CAYE,oBAAC,eAAD;KACE,IAAI;KACJ,gBAAc;KACd,oBACE,WACI,GAAG,QAAQ,UACX,aACA,GAAG,QAAQ,WACX,KAAA;KAEN,WAAW,GACT,mBAAmB,EAAE,MAAM,cAAc,CAAC,GAC1C,qBAAqB,WAAW,6CAChC,qBAAqB,aAAa,yCAClC,SACF;eAEA,oBAAC,aAAD,EAA0B,YAAc,CAAA;IAC3B,CAAA,GACf,qBAAC,eAAD,EAAA,UAAA,CACG,cAAc,MAAM,SACnB,oBAAC,YAAD;KAAY,OAAM;eAChB,oBAAC,QAAD;MAAM,WAAU;gBAAwB;KAAqB,CAAA;IACnD,CAAA,GAEb,YAAY,QAAQ,KAAK,WACxB,oBAAC,YAAD;KAEE,OAAO,OAAO,MAAM,SAAS;KAC7B,UAAU,OAAO;eAEhB,OAAO;IACE,GALL,OAAO,KAKF,CACb,CACY,EAAA,CAAA,CACH;;GAEb,aAAa,YACZ,oBAAC,KAAD;IACE,IAAI,GAAG,QAAQ;IACf,WAAU;IACV,MAAK;cAEJ;GACA,CAAA;GAGJ,cAAc,CAAC,YACd,oBAAC,KAAD;IACE,IAAI,GAAG,QAAQ;IACf,WAAU;cAET;GACA,CAAA;EAEF;;AAET;AAEA,OAAO,cAAc"}
+{"version":3,"file":"Select.js","names":[],"sources":["../../../src/components/Form/Select.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { 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 { FieldLayout } from \"./FieldLayout\";\r\nimport {\r\n  Select as ShadcnSelect,\r\n  SelectContent,\r\n  SelectItem,\r\n  SelectTrigger,\r\n  SelectValue,\r\n} from \"../../primitives/select\";\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\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    <FieldLayout\r\n      inputId={inputId}\r\n      label={label}\r\n      required={!!required}\r\n      helperText={helperText}\r\n      errorMessage={showError ? errorMessage : undefined}\r\n      showError={showError}\r\n      fullWidth={fullWidth}\r\n      formConfig={formConfig}\r\n    >\r\n      <ShadcnSelect\r\n        value={field.value?.toString() ?? \"\"}\r\n        onValueChange={(value) => {\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    </FieldLayout>\r\n  );\r\n}\r\n\r\nSelect.displayName = \"Select\";\r\n"],"mappings":";;;;;;;;;;;AAiBA,IAAM,qBAAqB,IACzB,IACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CACF;;;;;;;;;;;;;;;;;;;;;;;AAwEA,SAAgB,OAGd,EACA,MACA,OACA,YACA,YAAY,MACZ,OAAO,aACP,MACA,SACA,YAAY,MACZ,WACA,UACA,UAAU,CAAC,GACX,aACA,YACA,IAAI,YACJ,SAAS,iBACT,UAEA,UACA,YACmC;CACnC,MAAM,cAAc,MAAM;CAC1B,MAAM,UAAU,cAAc;CAG9B,MAAM,oBAAoB,WAAW,iBAAiB;CACtD,MAAM,aAAyB,qBAAqB,CAAC;CAGrD,MAAM,aAAa,eAAgC;CACnD,MAAM,UAAU,mBAAmB,YAAY;CAG/C,gBAAgB;EACd,IAAI,mBAAmB,yBAAyB;GAC9C,MAAM,QAA8B,CAAC;GAErC,IAAI,aAAa,KAAA,GAAW,MAAM,WAAW;GAC7C,IAAI,aAAa,KAAA,GAAW,MAAM,WAAW;GAE7C,kBAAkB,wBAAwB;IAClC;IACN,MAAM;IACN;GACF,CAAC;GAED,aAAa;IACX,kBAAkB,0BAA0B,IAAc;GAC5D;EACF;CACF,GAAG;EAAC;EAAmB;EAAM;EAAU;CAAQ,CAAC;CAGhD,MAAM,EAAE,OAAO,eAAe,cAAmC;EAC/D;EACA;CACF,CAAC;CAED,MAAM,aAAa,WAAW,OAAO;CACrC,MAAM,eAAe,eAAe;CACpC,MAAM,WAAW,CAAC,CAAC;CAGnB,MAAM,gBAAgB,QAAQ,WAAW,QAAQ;CACjD,MAAM,oBAAoB,YAAY,WAAW;CAGjD,MAAM,mBAAmB,WAAW,UAAU;CAE9C,OACE,oBAAC,aAAD;EACW;EACF;EACP,UAAU,CAAC,CAAC;EACA;EACZ,cAAc,YAAY,eAAe,KAAA;EAC9B;EACA;EACC;EAEZ,UAAA,qBAAC,UAAD;GACE,OAAO,MAAM,OAAO,SAAS,KAAK;GAClC,gBAAgB,UAAU;IACxB,IAAI,UAAU,MAAM,YAClB,MAAM,SAAS,EAAE;SAEjB,MAAM,SAAS,KAAK;GAExB;GACA,UAAU;GATZ,UAAA,CAWE,oBAAC,eAAD;IACE,IAAI;IACJ,gBAAc;IACd,oBACE,WACI,GAAG,QAAQ,UACX,aACE,GAAG,QAAQ,WACX,KAAA;IAER,WAAW,GACT,mBAAmB,EAAE,MAAM,cAAc,CAAC,GAC1C,qBAAqB,WAAW,6CAChC,qBAAqB,aAAa,yCAClC,SACF;IAEA,UAAA,oBAAC,aAAD,EAA0B,YAAc,CAAA;GAC3B,CAAA,GACf,qBAAC,eAAD,EAAA,UAAA,CACG,cAAc,MAAM,SACnB,oBAAC,YAAD;IAAY,OAAM;IAChB,UAAA,oBAAC,QAAD;KAAM,WAAU;KAAwB,UAAA;IAAqB,CAAA;GACnD,CAAA,GAEb,YAAY,QAAQ,KAAK,WACxB,oBAAC,YAAD;IAEE,OAAO,OAAO,MAAM,SAAS;IAC7B,UAAU,OAAO;IAEhB,UAAA,OAAO;GACE,GALL,OAAO,KAKF,CACb,CACY,EAAA,CAAA,CACH;;CACH,CAAA;AAEjB;AAEA,OAAO,cAAc"}

package/dist/components/Form/TextArea.js

@@ -2,8 +2,8 @@
 "use client";
 import { cn } from "../../utils/cn.js";
 import { FormConfigContext } from "./context.js";
-import { labelVariants } from "./variants.js";
 import { Label } from "../../primitives/label.js";
+import { labelVariants } from "./variants.js";
 import { Textarea } from "../../primitives/textarea.js";
 import { forwardRef, useContext, useEffect, useId } from "react";
 import { cva } from "class-variance-authority";