@skybin-tech/nebula-ui 0.0.18 → 0.0.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (138) hide show
  1. package/dist/cjs/components/Form/Checkbox.cjs.map +1 -1
  2. package/dist/cjs/components/Form/Form.cjs.map +1 -1
  3. package/dist/cjs/components/Form/Radio.cjs.map +1 -1
  4. package/dist/cjs/components/Form/Select.cjs.map +1 -1
  5. package/dist/cjs/components/Form/Switch.cjs.map +1 -1
  6. package/dist/cjs/components/Form/TextArea.cjs.map +1 -1
  7. package/dist/cjs/components/Form/TextBox.cjs.map +1 -1
  8. package/dist/cjs/components/Form/context.cjs.map +1 -1
  9. package/dist/cjs/components/Form/hooks.cjs.map +1 -1
  10. package/dist/cjs/hooks/useDebounce.cjs.map +1 -1
  11. package/dist/cjs/hooks/useToast.cjs +97 -0
  12. package/dist/cjs/hooks/useToast.cjs.map +1 -0
  13. package/dist/cjs/hooks/useToggle.cjs.map +1 -1
  14. package/dist/cjs/index.cjs +56 -0
  15. package/dist/cjs/index.cjs.map +1 -1
  16. package/dist/cjs/primitives/calendar.cjs +48 -0
  17. package/dist/cjs/primitives/calendar.cjs.map +1 -0
  18. package/dist/cjs/primitives/command.cjs +91 -0
  19. package/dist/cjs/primitives/command.cjs.map +1 -0
  20. package/dist/cjs/primitives/dialog.cjs +96 -0
  21. package/dist/cjs/primitives/dialog.cjs.map +1 -0
  22. package/dist/cjs/primitives/popover.cjs +46 -0
  23. package/dist/cjs/primitives/popover.cjs.map +1 -0
  24. package/dist/cjs/primitives/scroll-area.cjs +57 -0
  25. package/dist/cjs/primitives/scroll-area.cjs.map +1 -0
  26. package/dist/cjs/primitives/sonner.cjs +23 -0
  27. package/dist/cjs/primitives/sonner.cjs.map +1 -0
  28. package/dist/cjs/primitives/table.cjs +77 -0
  29. package/dist/cjs/primitives/table.cjs.map +1 -0
  30. package/dist/cjs/primitives/toast.cjs +114 -0
  31. package/dist/cjs/primitives/toast.cjs.map +1 -0
  32. package/dist/cjs/primitives/toggle.cjs +57 -0
  33. package/dist/cjs/primitives/toggle.cjs.map +1 -0
  34. package/dist/components/Calendar/Calendar.d.ts +3 -0
  35. package/dist/components/Calendar/Calendar.d.ts.map +1 -0
  36. package/dist/components/Calendar/index.d.ts +3 -0
  37. package/dist/components/Calendar/index.d.ts.map +1 -0
  38. package/dist/components/Command/Command.d.ts +2 -0
  39. package/dist/components/Command/Command.d.ts.map +1 -0
  40. package/dist/components/Command/index.d.ts +2 -0
  41. package/dist/components/Command/index.d.ts.map +1 -0
  42. package/dist/components/Dialog/Dialog.d.ts +2 -0
  43. package/dist/components/Dialog/Dialog.d.ts.map +1 -0
  44. package/dist/components/Dialog/index.d.ts +2 -0
  45. package/dist/components/Dialog/index.d.ts.map +1 -0
  46. package/dist/components/Form/Checkbox.d.ts.map +1 -1
  47. package/dist/components/Form/Checkbox.js.map +1 -1
  48. package/dist/components/Form/Form.d.ts.map +1 -1
  49. package/dist/components/Form/Form.js.map +1 -1
  50. package/dist/components/Form/Radio.d.ts.map +1 -1
  51. package/dist/components/Form/Radio.js.map +1 -1
  52. package/dist/components/Form/Select.d.ts.map +1 -1
  53. package/dist/components/Form/Select.js.map +1 -1
  54. package/dist/components/Form/Switch.d.ts.map +1 -1
  55. package/dist/components/Form/Switch.js.map +1 -1
  56. package/dist/components/Form/TextArea.d.ts.map +1 -1
  57. package/dist/components/Form/TextArea.js.map +1 -1
  58. package/dist/components/Form/TextBox.d.ts.map +1 -1
  59. package/dist/components/Form/TextBox.js.map +1 -1
  60. package/dist/components/Form/context.d.ts.map +1 -1
  61. package/dist/components/Form/context.js.map +1 -1
  62. package/dist/components/Form/hooks.d.ts.map +1 -1
  63. package/dist/components/Form/hooks.js.map +1 -1
  64. package/dist/components/Popover/Popover.d.ts +2 -0
  65. package/dist/components/Popover/Popover.d.ts.map +1 -0
  66. package/dist/components/Popover/index.d.ts +2 -0
  67. package/dist/components/Popover/index.d.ts.map +1 -0
  68. package/dist/components/ScrollArea/ScrollArea.d.ts +2 -0
  69. package/dist/components/ScrollArea/ScrollArea.d.ts.map +1 -0
  70. package/dist/components/ScrollArea/index.d.ts +2 -0
  71. package/dist/components/ScrollArea/index.d.ts.map +1 -0
  72. package/dist/components/Sonner/Sonner.d.ts +2 -0
  73. package/dist/components/Sonner/Sonner.d.ts.map +1 -0
  74. package/dist/components/Sonner/index.d.ts +2 -0
  75. package/dist/components/Sonner/index.d.ts.map +1 -0
  76. package/dist/components/Table/Table.d.ts +2 -0
  77. package/dist/components/Table/Table.d.ts.map +1 -0
  78. package/dist/components/Table/index.d.ts +2 -0
  79. package/dist/components/Table/index.d.ts.map +1 -0
  80. package/dist/components/Toast/Toast.d.ts +2 -0
  81. package/dist/components/Toast/Toast.d.ts.map +1 -0
  82. package/dist/components/Toast/index.d.ts +2 -0
  83. package/dist/components/Toast/index.d.ts.map +1 -0
  84. package/dist/components/Toggle/Toggle.d.ts +2 -0
  85. package/dist/components/Toggle/Toggle.d.ts.map +1 -0
  86. package/dist/components/Toggle/index.d.ts +2 -0
  87. package/dist/components/Toggle/index.d.ts.map +1 -0
  88. package/dist/hooks/useDebounce.d.ts.map +1 -1
  89. package/dist/hooks/useDebounce.js.map +1 -1
  90. package/dist/hooks/useToast.d.ts +45 -0
  91. package/dist/hooks/useToast.d.ts.map +1 -0
  92. package/dist/hooks/useToast.js +80 -0
  93. package/dist/hooks/useToast.js.map +1 -0
  94. package/dist/hooks/useToggle.d.ts.map +1 -1
  95. package/dist/hooks/useToggle.js.map +1 -1
  96. package/dist/index.d.ts +11 -0
  97. package/dist/index.d.ts.map +1 -1
  98. package/dist/index.js +56 -0
  99. package/dist/index.js.map +1 -1
  100. package/dist/primitives/calendar.d.ts +9 -0
  101. package/dist/primitives/calendar.d.ts.map +1 -0
  102. package/dist/primitives/calendar.js +48 -0
  103. package/dist/primitives/calendar.js.map +1 -0
  104. package/dist/primitives/command.d.ts +81 -0
  105. package/dist/primitives/command.d.ts.map +1 -0
  106. package/dist/primitives/command.js +74 -0
  107. package/dist/primitives/command.js.map +1 -0
  108. package/dist/primitives/dialog.d.ts +20 -0
  109. package/dist/primitives/dialog.d.ts.map +1 -0
  110. package/dist/primitives/dialog.js +78 -0
  111. package/dist/primitives/dialog.js.map +1 -0
  112. package/dist/primitives/index.d.ts +10 -0
  113. package/dist/primitives/index.d.ts.map +1 -1
  114. package/dist/primitives/popover.d.ts +8 -0
  115. package/dist/primitives/popover.d.ts.map +1 -0
  116. package/dist/primitives/popover.js +28 -0
  117. package/dist/primitives/popover.js.map +1 -0
  118. package/dist/primitives/scroll-area.d.ts +6 -0
  119. package/dist/primitives/scroll-area.d.ts.map +1 -0
  120. package/dist/primitives/scroll-area.js +39 -0
  121. package/dist/primitives/scroll-area.js.map +1 -0
  122. package/dist/primitives/sonner.d.ts +4 -0
  123. package/dist/primitives/sonner.d.ts.map +1 -0
  124. package/dist/primitives/sonner.js +23 -0
  125. package/dist/primitives/sonner.js.map +1 -0
  126. package/dist/primitives/table.d.ts +11 -0
  127. package/dist/primitives/table.d.ts.map +1 -0
  128. package/dist/primitives/table.js +60 -0
  129. package/dist/primitives/table.js.map +1 -0
  130. package/dist/primitives/toast.d.ts +16 -0
  131. package/dist/primitives/toast.d.ts.map +1 -0
  132. package/dist/primitives/toast.js +96 -0
  133. package/dist/primitives/toast.js.map +1 -0
  134. package/dist/primitives/toggle.d.ts +13 -0
  135. package/dist/primitives/toggle.d.ts.map +1 -0
  136. package/dist/primitives/toggle.js +39 -0
  137. package/dist/primitives/toggle.js.map +1 -0
  138. package/package.json +151 -3
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox.cjs","sources":["../../../../src/components/Form/Checkbox.tsx"],"sourcesContent":["import { forwardRef, useId, useContext, useEffect } from \"react\";\nimport type { ReactNode, ComponentPropsWithoutRef } from \"react\";\nimport { useController, useFormContext as useRHFFormContext, type FieldValues, type FieldPath, type Control } from \"react-hook-form\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../utils/cn\";\nimport { FormConfigContext, type FormConfig, type FieldValidationRules } from \"../Form/context\";\nimport { Checkbox as ShadcnCheckbox } from \"../../primitives/checkbox\";\nimport { Label } from \"../../primitives/label\";\nimport type * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\n\nconst checkboxSizeVariants = cva(\n \"\",\n {\n variants: {\n size: {\n sm: \"h-4 w-4\",\n md: \"h-5 w-5\",\n lg: \"h-6 w-6\",\n },\n },\n defaultVariants: {\n size: \"md\",\n },\n }\n);\n\nconst labelVariants = cva(\n \"text-sm font-medium cursor-pointer select-none\",\n {\n variants: {\n required: {\n true: \"after:content-['*'] after:ml-0.5 after:text-destructive\",\n false: \"\",\n },\n disabled: {\n true: \"cursor-not-allowed opacity-50\",\n false: \"\",\n },\n },\n defaultVariants: {\n required: false,\n disabled: false,\n },\n }\n);\n\nexport interface CheckboxProps<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n> extends Omit<ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, \"name\" | \"checked\" | \"onCheckedChange\" | \"required\">,\n VariantProps<typeof checkboxSizeVariants> {\n /** Field name - required for form integration */\n name: TName;\n /** Label text for the checkbox */\n label?: ReactNode;\n /** Helper text displayed below the checkbox */\n helperText?: string;\n /** Whether to show the error message */\n showError?: boolean;\n /** Custom error message (overrides form error) */\n error?: string;\n /** External control (for use outside Form) */\n control?: Control<TFieldValues>;\n /** Variant style */\n variant?: \"default\" | \"error\";\n \n // Validation props\n /** Field is required (must be checked) */\n required?: boolean | string;\n /** Custom validation function */\n validate?: (value: unknown) => boolean | string | Promise<boolean | string>;\n}\n\n/**\n * Checkbox component with form integration\n * \n * This is a wrapper around the shadcn/ui Checkbox primitive that adds:\n * - Form integration with react-hook-form\n * - Automatic validation registration\n * - Label, helper text, and error message support\n * \n * @example\n * ```tsx\n * // Inside a Form component\n * <Checkbox name=\"terms\" label=\"I agree to the terms and conditions\" required />\n * <Checkbox name=\"newsletter\" label=\"Subscribe to newsletter\" />\n * ```\n */\nfunction CheckboxInner<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>(\n {\n name,\n label,\n helperText,\n showError = true,\n error: customError,\n size,\n variant,\n className,\n disabled,\n id: providedId,\n control: externalControl,\n // Validation props\n required,\n validate,\n ...props\n }: CheckboxProps<TFieldValues, TName>,\n ref: React.ForwardedRef<React.ElementRef<typeof CheckboxPrimitive.Root>>\n) {\n const generatedId = useId();\n const inputId = providedId ?? generatedId;\n \n // Try to get form context\n const formConfigContext = useContext(FormConfigContext);\n const formConfig: FormConfig = formConfigContext ?? {};\n \n // Get form context from react-hook-form\n const rhfContext = useRHFFormContext<TFieldValues>();\n const control = externalControl ?? rhfContext?.control;\n\n // Register validation rules with the form\n useEffect(() => {\n if (formConfigContext?.registerFieldValidation) {\n const rules: FieldValidationRules = {};\n \n if (required !== undefined) rules.required = required;\n if (validate !== undefined) rules.validate = validate;\n\n formConfigContext.registerFieldValidation({\n name: name as string,\n type: \"boolean\",\n rules,\n });\n\n return () => {\n formConfigContext.unregisterFieldValidation(name as string);\n };\n }\n }, [formConfigContext, name, required, validate]);\n\n // Use controller for form integration\n const { field, fieldState } = useController<TFieldValues, TName>({\n name,\n control,\n });\n\n const fieldError = fieldState.error?.message;\n const errorMessage = customError ?? fieldError;\n const hasError = !!errorMessage;\n \n // Merge sizes - prop takes precedence over form config\n const effectiveSize = size ?? formConfig.size ?? \"md\";\n const effectiveDisabled = disabled ?? formConfig.disabled;\n \n // Determine variant based on error state\n const effectiveVariant = hasError ? \"error\" : variant;\n\n return (\n <div className=\"space-y-1.5\">\n <div className=\"flex items-center gap-2\">\n <ShadcnCheckbox\n {...props}\n ref={ref}\n id={inputId}\n checked={field.value ?? false}\n onCheckedChange={(checked) => field.onChange(checked === true)}\n onBlur={field.onBlur}\n disabled={effectiveDisabled}\n aria-invalid={hasError}\n aria-describedby={\n hasError\n ? `${inputId}-error`\n : helperText\n ? `${inputId}-helper`\n : undefined\n }\n className={cn(\n checkboxSizeVariants({ size: effectiveSize }),\n effectiveVariant === \"error\" && \"border-destructive\",\n className\n )}\n />\n \n {label && (\n <Label\n htmlFor={inputId}\n className={labelVariants({ required: !!required, disabled: effectiveDisabled })}\n >\n {label}\n </Label>\n )}\n </div>\n\n {showError && hasError && (\n <p\n id={`${inputId}-error`}\n className=\"text-sm text-destructive ml-7\"\n role=\"alert\"\n >\n {errorMessage}\n </p>\n )}\n \n {helperText && !hasError && (\n <p\n id={`${inputId}-helper`}\n className=\"text-sm text-muted-foreground ml-7\"\n >\n {helperText}\n </p>\n )}\n </div>\n );\n}\n\n// Use forwardRef with generic support\nexport const Checkbox = forwardRef(CheckboxInner) as <\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>(\n props: CheckboxProps<TFieldValues, TName> & { ref?: React.ForwardedRef<React.ElementRef<typeof CheckboxPrimitive.Root>> }\n) => React.ReactElement;\n\n(Checkbox as React.FC).displayName = \"Checkbox\";\n"],"names":["cva","label","useId","useContext","FormConfigContext","useRHFFormContext","useEffect","useController","jsxs","jsx","ShadcnCheckbox","cn","Label","forwardRef"],"mappings":"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"}
1
+ {"version":3,"file":"Checkbox.cjs","sources":["../../../../src/components/Form/Checkbox.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, useId, useContext, useEffect } from \"react\";\nimport type { ReactNode, ComponentPropsWithoutRef } from \"react\";\nimport { useController, useFormContext as useRHFFormContext, type FieldValues, type FieldPath, type Control } from \"react-hook-form\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../utils/cn\";\nimport { FormConfigContext, type FormConfig, type FieldValidationRules } from \"../Form/context\";\nimport { Checkbox as ShadcnCheckbox } from \"../../primitives/checkbox\";\nimport { Label } from \"../../primitives/label\";\nimport type * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\n\nconst checkboxSizeVariants = cva(\n \"\",\n {\n variants: {\n size: {\n sm: \"h-4 w-4\",\n md: \"h-5 w-5\",\n lg: \"h-6 w-6\",\n },\n },\n defaultVariants: {\n size: \"md\",\n },\n }\n);\n\nconst labelVariants = cva(\n \"text-sm font-medium cursor-pointer select-none\",\n {\n variants: {\n required: {\n true: \"after:content-['*'] after:ml-0.5 after:text-destructive\",\n false: \"\",\n },\n disabled: {\n true: \"cursor-not-allowed opacity-50\",\n false: \"\",\n },\n },\n defaultVariants: {\n required: false,\n disabled: false,\n },\n }\n);\n\nexport interface CheckboxProps<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n> extends Omit<ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, \"name\" | \"checked\" | \"onCheckedChange\" | \"required\">,\n VariantProps<typeof checkboxSizeVariants> {\n /** Field name - required for form integration */\n name: TName;\n /** Label text for the checkbox */\n label?: ReactNode;\n /** Helper text displayed below the checkbox */\n helperText?: string;\n /** Whether to show the error message */\n showError?: boolean;\n /** Custom error message (overrides form error) */\n error?: string;\n /** External control (for use outside Form) */\n control?: Control<TFieldValues>;\n /** Variant style */\n variant?: \"default\" | \"error\";\n \n // Validation props\n /** Field is required (must be checked) */\n required?: boolean | string;\n /** Custom validation function */\n validate?: (value: unknown) => boolean | string | Promise<boolean | string>;\n}\n\n/**\n * Checkbox component with form integration\n * \n * This is a wrapper around the shadcn/ui Checkbox primitive that adds:\n * - Form integration with react-hook-form\n * - Automatic validation registration\n * - Label, helper text, and error message support\n * \n * @example\n * ```tsx\n * // Inside a Form component\n * <Checkbox name=\"terms\" label=\"I agree to the terms and conditions\" required />\n * <Checkbox name=\"newsletter\" label=\"Subscribe to newsletter\" />\n * ```\n */\nfunction CheckboxInner<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>(\n {\n name,\n label,\n helperText,\n showError = true,\n error: customError,\n size,\n variant,\n className,\n disabled,\n id: providedId,\n control: externalControl,\n // Validation props\n required,\n validate,\n ...props\n }: CheckboxProps<TFieldValues, TName>,\n ref: React.ForwardedRef<React.ElementRef<typeof CheckboxPrimitive.Root>>\n) {\n const generatedId = useId();\n const inputId = providedId ?? generatedId;\n \n // Try to get form context\n const formConfigContext = useContext(FormConfigContext);\n const formConfig: FormConfig = formConfigContext ?? {};\n \n // Get form context from react-hook-form\n const rhfContext = useRHFFormContext<TFieldValues>();\n const control = externalControl ?? rhfContext?.control;\n\n // Register validation rules with the form\n useEffect(() => {\n if (formConfigContext?.registerFieldValidation) {\n const rules: FieldValidationRules = {};\n \n if (required !== undefined) rules.required = required;\n if (validate !== undefined) rules.validate = validate;\n\n formConfigContext.registerFieldValidation({\n name: name as string,\n type: \"boolean\",\n rules,\n });\n\n return () => {\n formConfigContext.unregisterFieldValidation(name as string);\n };\n }\n }, [formConfigContext, name, required, validate]);\n\n // Use controller for form integration\n const { field, fieldState } = useController<TFieldValues, TName>({\n name,\n control,\n });\n\n const fieldError = fieldState.error?.message;\n const errorMessage = customError ?? fieldError;\n const hasError = !!errorMessage;\n \n // Merge sizes - prop takes precedence over form config\n const effectiveSize = size ?? formConfig.size ?? \"md\";\n const effectiveDisabled = disabled ?? formConfig.disabled;\n \n // Determine variant based on error state\n const effectiveVariant = hasError ? \"error\" : variant;\n\n return (\n <div className=\"space-y-1.5\">\n <div className=\"flex items-center gap-2\">\n <ShadcnCheckbox\n {...props}\n ref={ref}\n id={inputId}\n checked={field.value ?? false}\n onCheckedChange={(checked) => field.onChange(checked === true)}\n onBlur={field.onBlur}\n disabled={effectiveDisabled}\n aria-invalid={hasError}\n aria-describedby={\n hasError\n ? `${inputId}-error`\n : helperText\n ? `${inputId}-helper`\n : undefined\n }\n className={cn(\n checkboxSizeVariants({ size: effectiveSize }),\n effectiveVariant === \"error\" && \"border-destructive\",\n className\n )}\n />\n \n {label && (\n <Label\n htmlFor={inputId}\n className={labelVariants({ required: !!required, disabled: effectiveDisabled })}\n >\n {label}\n </Label>\n )}\n </div>\n\n {showError && hasError && (\n <p\n id={`${inputId}-error`}\n className=\"text-sm text-destructive ml-7\"\n role=\"alert\"\n >\n {errorMessage}\n </p>\n )}\n \n {helperText && !hasError && (\n <p\n id={`${inputId}-helper`}\n className=\"text-sm text-muted-foreground ml-7\"\n >\n {helperText}\n </p>\n )}\n </div>\n );\n}\n\n// Use forwardRef with generic support\nexport const Checkbox = forwardRef(CheckboxInner) as <\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>(\n props: CheckboxProps<TFieldValues, TName> & { ref?: React.ForwardedRef<React.ElementRef<typeof CheckboxPrimitive.Root>> }\n) => React.ReactElement;\n\n(Checkbox as React.FC).displayName = \"Checkbox\";\n"],"names":["cva","label","useId","useContext","FormConfigContext","useRHFFormContext","useEffect","useController","jsxs","jsx","ShadcnCheckbox","cn","Label","forwardRef"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"Form.cjs","sources":["../../../../src/components/Form/Form.tsx"],"sourcesContent":["import { useCallback, useMemo, type ReactNode } from \"react\";\r\nimport {\r\n useForm,\r\n FormProvider as RHFFormProvider,\r\n type UseFormReturn,\r\n type FieldValues,\r\n type UseFormProps,\r\n type SubmitHandler,\r\n type SubmitErrorHandler,\r\n type Resolver,\r\n type Path,\r\n} from \"react-hook-form\";\r\nimport { zodResolver } from \"@hookform/resolvers/zod\";\r\nimport { z } from \"zod\";\r\nimport { \r\n FormConfigContext, \r\n defaultFormConfig, \r\n useFieldValidationRegistry,\r\n type FormConfig, \r\n type FormContextValue \r\n} from \"./context\";\r\n\r\n/**\r\n * Props for the Form component\r\n */\r\nexport interface FormProps<\r\n TFieldValues extends FieldValues = FieldValues,\r\n TContext = unknown\r\n> extends Omit<React.FormHTMLAttributes<HTMLFormElement>, \"onSubmit\" | \"onError\"> {\r\n /** Base Zod schema for validation (will be extended by field props) */\r\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n schema?: z.ZodType<TFieldValues, any, any>;\r\n /** Default values for the form */\r\n defaultValues?: UseFormProps<TFieldValues, TContext>[\"defaultValues\"];\r\n /** Values to reset the form to */\r\n values?: UseFormProps<TFieldValues, TContext>[\"values\"];\r\n /** Submit handler */\r\n onSubmit?: SubmitHandler<TFieldValues>;\r\n /** Error handler */\r\n onError?: SubmitErrorHandler<TFieldValues>;\r\n /** Form configuration */\r\n config?: FormConfig;\r\n /** Children */\r\n children?: ReactNode;\r\n /** External form instance (for controlled forms) */\r\n form?: UseFormReturn<TFieldValues>;\r\n /** Validation mode */\r\n mode?: UseFormProps<TFieldValues, TContext>[\"mode\"];\r\n /** Revalidation mode */\r\n reValidateMode?: UseFormProps<TFieldValues, TContext>[\"reValidateMode\"];\r\n /** Custom resolver (overrides schema) */\r\n resolver?: Resolver<TFieldValues>;\r\n}\r\n\r\n/**\r\n * Form component that provides form context and validation\r\n * \r\n * Child components like TextBox can register their validation rules automatically.\r\n * \r\n * @example\r\n * ```tsx\r\n * // Validation is automatically built from component props\r\n * <Form onSubmit={handleSubmit} defaultValues={{ username: \"\", email: \"\" }}>\r\n * <TextBox name=\"username\" label=\"Username\" required minLength={3} maxLength={50} />\r\n * <TextBox name=\"email\" label=\"Email\" type=\"email\" required email />\r\n * <Button type=\"submit\">Submit</Button>\r\n * </Form>\r\n * \r\n * // Or with a base schema that gets extended\r\n * const baseSchema = z.object({\r\n * username: z.string(),\r\n * email: z.string(),\r\n * });\r\n * \r\n * <Form schema={baseSchema} onSubmit={handleSubmit}>\r\n * <TextBox name=\"username\" required minLength={3} /> // Adds required + minLength\r\n * <TextBox name=\"email\" required email /> // Adds required + email validation\r\n * </Form>\r\n * ```\r\n */\r\nexport function Form<\r\n TFieldValues extends FieldValues = FieldValues,\r\n TContext = unknown\r\n>({\r\n schema: baseSchema,\r\n defaultValues,\r\n values,\r\n onSubmit,\r\n onError,\r\n config,\r\n children,\r\n form: externalForm,\r\n mode = \"onBlur\",\r\n reValidateMode = \"onChange\",\r\n resolver: customResolver,\r\n ...formProps\r\n}: FormProps<TFieldValues, TContext>) {\r\n const mergedConfig = { ...defaultFormConfig, ...config };\r\n\r\n const {\r\n registerFieldValidation,\r\n unregisterFieldValidation,\r\n getValidationSchema,\r\n } = useFieldValidationRegistry();\r\n\r\n // Stable resolver that reads from fieldsRef at validation time — no re-renders\r\n // needed on field registration, and no race condition with useEffect timing.\r\n const dynamicResolver = useCallback<Resolver<TFieldValues>>(\r\n async (vals, context, options) => {\r\n if (customResolver) {\r\n return customResolver(vals, context, options);\r\n }\r\n const fieldSchema = getValidationSchema();\r\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n let finalSchema: z.ZodType<any, any, any>;\r\n if (baseSchema instanceof z.ZodObject) {\r\n finalSchema = baseSchema.merge(fieldSchema);\r\n } else {\r\n finalSchema = baseSchema ?? fieldSchema;\r\n }\r\n return zodResolver(finalSchema)(vals, context, options);\r\n },\r\n // getValidationSchema reads a ref — always current, intentionally omitted.\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n [baseSchema, customResolver]\r\n );\r\n\r\n const internalForm = useForm<TFieldValues>({\r\n resolver: dynamicResolver,\r\n defaultValues,\r\n values,\r\n mode,\r\n reValidateMode,\r\n });\r\n\r\n const form = externalForm ?? internalForm;\r\n\r\n // Trigger validation for a specific field\r\n const triggerValidation = useCallback(async (name: string) => {\r\n return form.trigger(name as Path<TFieldValues>);\r\n }, [form]);\r\n\r\n const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {\r\n e.preventDefault();\r\n if (onSubmit) {\r\n form.handleSubmit(onSubmit, onError)(e);\r\n }\r\n };\r\n\r\n const contextValue = useMemo<FormContextValue<TFieldValues>>(\r\n () => ({\r\n form,\r\n registerFieldValidation,\r\n unregisterFieldValidation,\r\n getValidationSchema,\r\n triggerValidation,\r\n showInlineErrors: mergedConfig.showInlineErrors,\r\n validateOnBlur: mergedConfig.validateOnBlur,\r\n validateOnChange: mergedConfig.validateOnChange,\r\n size: mergedConfig.size,\r\n layout: mergedConfig.layout,\r\n labelWidth: mergedConfig.labelWidth,\r\n disabled: mergedConfig.disabled,\r\n colon: mergedConfig.colon,\r\n }),\r\n [\r\n form,\r\n registerFieldValidation,\r\n unregisterFieldValidation,\r\n getValidationSchema,\r\n triggerValidation,\r\n mergedConfig.showInlineErrors,\r\n mergedConfig.validateOnBlur,\r\n mergedConfig.validateOnChange,\r\n mergedConfig.size,\r\n mergedConfig.layout,\r\n mergedConfig.labelWidth,\r\n mergedConfig.disabled,\r\n mergedConfig.colon,\r\n ]\r\n );\r\n\r\n return (\r\n <FormConfigContext.Provider value={contextValue as FormContextValue}>\r\n <RHFFormProvider {...form}>\r\n <form\r\n {...formProps}\r\n onSubmit={handleSubmit}\r\n noValidate\r\n >\r\n {children}\r\n </form>\r\n </RHFFormProvider>\r\n </FormConfigContext.Provider>\r\n );\r\n}\r\n\r\nForm.displayName = \"Form\";\r\n"],"names":["defaultFormConfig","useFieldValidationRegistry","useCallback","context","z","zodResolver","useForm","useMemo","jsx","FormConfigContext","RHFFormProvider"],"mappings":";;;;;;;;AAgFO,SAAS,KAGd;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN,OAAO;AAAA,EACP,iBAAiB;AAAA,EACjB,UAAU;AAAA,EACV,GAAG;AACL,GAAsC;AACpC,QAAM,eAAe,EAAE,GAAGA,QAAAA,mBAAmB,GAAG,OAAA;AAEhD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACEC,mCAAA;AAIJ,QAAM,kBAAkBC,MAAAA;AAAAA,IACtB,OAAO,MAAMC,UAAS,YAAY;AAChC,UAAI,gBAAgB;AAClB,eAAO,eAAe,MAAMA,UAAS,OAAO;AAAA,MAC9C;AACA,YAAM,cAAc,oBAAA;AAEpB,UAAI;AACJ,UAAI,sBAAsBC,IAAAA,EAAE,WAAW;AACrC,sBAAc,WAAW,MAAM,WAAW;AAAA,MAC5C,OAAO;AACL,sBAAc,cAAc;AAAA,MAC9B;AACA,aAAOC,MAAAA,YAAY,WAAW,EAAE,MAAMF,UAAS,OAAO;AAAA,IACxD;AAAA;AAAA;AAAA,IAGA,CAAC,YAAY,cAAc;AAAA,EAAA;AAG7B,QAAM,eAAeG,cAAAA,QAAsB;AAAA,IACzC,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAED,QAAM,OAAO,gBAAgB;AAG7B,QAAM,oBAAoBJ,kBAAY,OAAO,SAAiB;AAC5D,WAAO,KAAK,QAAQ,IAA0B;AAAA,EAChD,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,eAAe,CAAC,MAAwC;AAC5D,MAAE,eAAA;AACF,QAAI,UAAU;AACZ,WAAK,aAAa,UAAU,OAAO,EAAE,CAAC;AAAA,IACxC;AAAA,EACF;AAEA,QAAM,eAAeK,MAAAA;AAAAA,IACnB,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,kBAAkB,aAAa;AAAA,MAC/B,gBAAgB,aAAa;AAAA,MAC7B,kBAAkB,aAAa;AAAA,MAC/B,MAAM,aAAa;AAAA,MACnB,QAAQ,aAAa;AAAA,MACrB,YAAY,aAAa;AAAA,MACzB,UAAU,aAAa;AAAA,MACvB,OAAO,aAAa;AAAA,IAAA;AAAA,IAEtB;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,aAAa;AAAA,MACb,aAAa;AAAA,MACb,aAAa;AAAA,MACb,aAAa;AAAA,MACb,aAAa;AAAA,MACb,aAAa;AAAA,MACb,aAAa;AAAA,MACb,aAAa;AAAA,IAAA;AAAA,EACf;AAGF,SACEC,2BAAAA,IAACC,QAAAA,kBAAkB,UAAlB,EAA2B,OAAO,cACjC,UAAAD,2BAAAA,IAACE,cAAAA,cAAA,EAAiB,GAAG,MACnB,UAAAF,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,UAAU;AAAA,MACV,YAAU;AAAA,MAET;AAAA,IAAA;AAAA,EAAA,GAEL,EAAA,CACF;AAEJ;AAEA,KAAK,cAAc;;"}
1
+ {"version":3,"file":"Form.cjs","sources":["../../../../src/components/Form/Form.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useMemo, type ReactNode } from \"react\";\r\nimport {\r\n useForm,\r\n FormProvider as RHFFormProvider,\r\n type UseFormReturn,\r\n type FieldValues,\r\n type UseFormProps,\r\n type SubmitHandler,\r\n type SubmitErrorHandler,\r\n type Resolver,\r\n type Path,\r\n} from \"react-hook-form\";\r\nimport { zodResolver } from \"@hookform/resolvers/zod\";\r\nimport { z } from \"zod\";\r\nimport { \r\n FormConfigContext, \r\n defaultFormConfig, \r\n useFieldValidationRegistry,\r\n type FormConfig, \r\n type FormContextValue \r\n} from \"./context\";\r\n\r\n/**\r\n * Props for the Form component\r\n */\r\nexport interface FormProps<\r\n TFieldValues extends FieldValues = FieldValues,\r\n TContext = unknown\r\n> extends Omit<React.FormHTMLAttributes<HTMLFormElement>, \"onSubmit\" | \"onError\"> {\r\n /** Base Zod schema for validation (will be extended by field props) */\r\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n schema?: z.ZodType<TFieldValues, any, any>;\r\n /** Default values for the form */\r\n defaultValues?: UseFormProps<TFieldValues, TContext>[\"defaultValues\"];\r\n /** Values to reset the form to */\r\n values?: UseFormProps<TFieldValues, TContext>[\"values\"];\r\n /** Submit handler */\r\n onSubmit?: SubmitHandler<TFieldValues>;\r\n /** Error handler */\r\n onError?: SubmitErrorHandler<TFieldValues>;\r\n /** Form configuration */\r\n config?: FormConfig;\r\n /** Children */\r\n children?: ReactNode;\r\n /** External form instance (for controlled forms) */\r\n form?: UseFormReturn<TFieldValues>;\r\n /** Validation mode */\r\n mode?: UseFormProps<TFieldValues, TContext>[\"mode\"];\r\n /** Revalidation mode */\r\n reValidateMode?: UseFormProps<TFieldValues, TContext>[\"reValidateMode\"];\r\n /** Custom resolver (overrides schema) */\r\n resolver?: Resolver<TFieldValues>;\r\n}\r\n\r\n/**\r\n * Form component that provides form context and validation\r\n * \r\n * Child components like TextBox can register their validation rules automatically.\r\n * \r\n * @example\r\n * ```tsx\r\n * // Validation is automatically built from component props\r\n * <Form onSubmit={handleSubmit} defaultValues={{ username: \"\", email: \"\" }}>\r\n * <TextBox name=\"username\" label=\"Username\" required minLength={3} maxLength={50} />\r\n * <TextBox name=\"email\" label=\"Email\" type=\"email\" required email />\r\n * <Button type=\"submit\">Submit</Button>\r\n * </Form>\r\n * \r\n * // Or with a base schema that gets extended\r\n * const baseSchema = z.object({\r\n * username: z.string(),\r\n * email: z.string(),\r\n * });\r\n * \r\n * <Form schema={baseSchema} onSubmit={handleSubmit}>\r\n * <TextBox name=\"username\" required minLength={3} /> // Adds required + minLength\r\n * <TextBox name=\"email\" required email /> // Adds required + email validation\r\n * </Form>\r\n * ```\r\n */\r\nexport function Form<\r\n TFieldValues extends FieldValues = FieldValues,\r\n TContext = unknown\r\n>({\r\n schema: baseSchema,\r\n defaultValues,\r\n values,\r\n onSubmit,\r\n onError,\r\n config,\r\n children,\r\n form: externalForm,\r\n mode = \"onBlur\",\r\n reValidateMode = \"onChange\",\r\n resolver: customResolver,\r\n ...formProps\r\n}: FormProps<TFieldValues, TContext>) {\r\n const mergedConfig = { ...defaultFormConfig, ...config };\r\n\r\n const {\r\n registerFieldValidation,\r\n unregisterFieldValidation,\r\n getValidationSchema,\r\n } = useFieldValidationRegistry();\r\n\r\n // Stable resolver that reads from fieldsRef at validation time — no re-renders\r\n // needed on field registration, and no race condition with useEffect timing.\r\n const dynamicResolver = useCallback<Resolver<TFieldValues>>(\r\n async (vals, context, options) => {\r\n if (customResolver) {\r\n return customResolver(vals, context, options);\r\n }\r\n const fieldSchema = getValidationSchema();\r\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n let finalSchema: z.ZodType<any, any, any>;\r\n if (baseSchema instanceof z.ZodObject) {\r\n finalSchema = baseSchema.merge(fieldSchema);\r\n } else {\r\n finalSchema = baseSchema ?? fieldSchema;\r\n }\r\n return zodResolver(finalSchema)(vals, context, options);\r\n },\r\n // getValidationSchema reads a ref — always current, intentionally omitted.\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n [baseSchema, customResolver]\r\n );\r\n\r\n const internalForm = useForm<TFieldValues>({\r\n resolver: dynamicResolver,\r\n defaultValues,\r\n values,\r\n mode,\r\n reValidateMode,\r\n });\r\n\r\n const form = externalForm ?? internalForm;\r\n\r\n // Trigger validation for a specific field\r\n const triggerValidation = useCallback(async (name: string) => {\r\n return form.trigger(name as Path<TFieldValues>);\r\n }, [form]);\r\n\r\n const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {\r\n e.preventDefault();\r\n if (onSubmit) {\r\n form.handleSubmit(onSubmit, onError)(e);\r\n }\r\n };\r\n\r\n const contextValue = useMemo<FormContextValue<TFieldValues>>(\r\n () => ({\r\n form,\r\n registerFieldValidation,\r\n unregisterFieldValidation,\r\n getValidationSchema,\r\n triggerValidation,\r\n showInlineErrors: mergedConfig.showInlineErrors,\r\n validateOnBlur: mergedConfig.validateOnBlur,\r\n validateOnChange: mergedConfig.validateOnChange,\r\n size: mergedConfig.size,\r\n layout: mergedConfig.layout,\r\n labelWidth: mergedConfig.labelWidth,\r\n disabled: mergedConfig.disabled,\r\n colon: mergedConfig.colon,\r\n }),\r\n [\r\n form,\r\n registerFieldValidation,\r\n unregisterFieldValidation,\r\n getValidationSchema,\r\n triggerValidation,\r\n mergedConfig.showInlineErrors,\r\n mergedConfig.validateOnBlur,\r\n mergedConfig.validateOnChange,\r\n mergedConfig.size,\r\n mergedConfig.layout,\r\n mergedConfig.labelWidth,\r\n mergedConfig.disabled,\r\n mergedConfig.colon,\r\n ]\r\n );\r\n\r\n return (\r\n <FormConfigContext.Provider value={contextValue as FormContextValue}>\r\n <RHFFormProvider {...form}>\r\n <form\r\n {...formProps}\r\n onSubmit={handleSubmit}\r\n noValidate\r\n >\r\n {children}\r\n </form>\r\n </RHFFormProvider>\r\n </FormConfigContext.Provider>\r\n );\r\n}\r\n\r\nForm.displayName = \"Form\";\r\n"],"names":["defaultFormConfig","useFieldValidationRegistry","useCallback","context","z","zodResolver","useForm","useMemo","jsx","FormConfigContext","RHFFormProvider"],"mappings":";;;;;;;;AAkFO,SAAS,KAGd;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN,OAAO;AAAA,EACP,iBAAiB;AAAA,EACjB,UAAU;AAAA,EACV,GAAG;AACL,GAAsC;AACpC,QAAM,eAAe,EAAE,GAAGA,QAAAA,mBAAmB,GAAG,OAAA;AAEhD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACEC,mCAAA;AAIJ,QAAM,kBAAkBC,MAAAA;AAAAA,IACtB,OAAO,MAAMC,UAAS,YAAY;AAChC,UAAI,gBAAgB;AAClB,eAAO,eAAe,MAAMA,UAAS,OAAO;AAAA,MAC9C;AACA,YAAM,cAAc,oBAAA;AAEpB,UAAI;AACJ,UAAI,sBAAsBC,IAAAA,EAAE,WAAW;AACrC,sBAAc,WAAW,MAAM,WAAW;AAAA,MAC5C,OAAO;AACL,sBAAc,cAAc;AAAA,MAC9B;AACA,aAAOC,MAAAA,YAAY,WAAW,EAAE,MAAMF,UAAS,OAAO;AAAA,IACxD;AAAA;AAAA;AAAA,IAGA,CAAC,YAAY,cAAc;AAAA,EAAA;AAG7B,QAAM,eAAeG,cAAAA,QAAsB;AAAA,IACzC,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAED,QAAM,OAAO,gBAAgB;AAG7B,QAAM,oBAAoBJ,kBAAY,OAAO,SAAiB;AAC5D,WAAO,KAAK,QAAQ,IAA0B;AAAA,EAChD,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,eAAe,CAAC,MAAwC;AAC5D,MAAE,eAAA;AACF,QAAI,UAAU;AACZ,WAAK,aAAa,UAAU,OAAO,EAAE,CAAC;AAAA,IACxC;AAAA,EACF;AAEA,QAAM,eAAeK,MAAAA;AAAAA,IACnB,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,kBAAkB,aAAa;AAAA,MAC/B,gBAAgB,aAAa;AAAA,MAC7B,kBAAkB,aAAa;AAAA,MAC/B,MAAM,aAAa;AAAA,MACnB,QAAQ,aAAa;AAAA,MACrB,YAAY,aAAa;AAAA,MACzB,UAAU,aAAa;AAAA,MACvB,OAAO,aAAa;AAAA,IAAA;AAAA,IAEtB;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,aAAa;AAAA,MACb,aAAa;AAAA,MACb,aAAa;AAAA,MACb,aAAa;AAAA,MACb,aAAa;AAAA,MACb,aAAa;AAAA,MACb,aAAa;AAAA,MACb,aAAa;AAAA,IAAA;AAAA,EACf;AAGF,SACEC,2BAAAA,IAACC,QAAAA,kBAAkB,UAAlB,EAA2B,OAAO,cACjC,UAAAD,2BAAAA,IAACE,cAAAA,cAAA,EAAiB,GAAG,MACnB,UAAAF,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,UAAU;AAAA,MACV,YAAU;AAAA,MAET;AAAA,IAAA;AAAA,EAAA,GAEL,EAAA,CACF;AAEJ;AAEA,KAAK,cAAc;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"Radio.cjs","sources":["../../../../src/components/Form/Radio.tsx"],"sourcesContent":["import { forwardRef, useId, useContext, createContext, useEffect } from \"react\";\nimport type { ReactNode, ComponentPropsWithoutRef } from \"react\";\nimport { useController, useFormContext as useRHFFormContext, type FieldValues, type FieldPath, type Control } from \"react-hook-form\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../utils/cn\";\nimport { FormConfigContext, type FormConfig, type FieldValidationRules } from \"../Form/context\";\nimport { RadioGroup as ShadcnRadioGroup, RadioGroupItem as ShadcnRadioGroupItem } from \"../../primitives/radio-group\";\nimport { Label } from \"../../primitives/label\";\nimport type * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\";\n\nconst radioSizeVariants = cva(\n \"\",\n {\n variants: {\n size: {\n sm: \"h-4 w-4\",\n md: \"h-5 w-5\",\n lg: \"h-6 w-6\",\n },\n },\n defaultVariants: {\n size: \"md\",\n },\n }\n);\n\nconst labelVariants = cva(\n \"text-sm font-medium cursor-pointer select-none\",\n {\n variants: {\n disabled: {\n true: \"cursor-not-allowed opacity-50\",\n false: \"\",\n },\n },\n defaultVariants: {\n disabled: false,\n },\n }\n);\n\n// Radio Group Context\ninterface RadioGroupContextValue {\n name: string;\n value: string | number | undefined;\n onChange: (value: string | number) => void;\n disabled?: boolean;\n size?: \"sm\" | \"md\" | \"lg\";\n}\n\nconst RadioGroupContext = createContext<RadioGroupContextValue | null>(null);\n\nexport interface RadioOption {\n label: ReactNode;\n value: string | number;\n disabled?: boolean;\n}\n\nexport interface RadioGroupProps<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n> extends VariantProps<typeof radioSizeVariants> {\n /** Field name - required for form integration */\n name: TName;\n /** Label text for the radio group */\n label?: string;\n /** Helper text displayed below the radio group */\n helperText?: string;\n /** Whether to show the error message */\n showError?: boolean;\n /** Custom error message (overrides form error) */\n error?: string;\n /** Options for the radio group */\n options?: RadioOption[];\n /** Layout direction */\n direction?: \"horizontal\" | \"vertical\";\n /** External control (for use outside Form) */\n control?: Control<TFieldValues>;\n /** Children (alternative to options prop) */\n children?: ReactNode;\n /** Disabled state */\n disabled?: boolean;\n /** Additional class name */\n className?: string;\n /** Variant style */\n variant?: \"default\" | \"error\";\n \n // Validation props\n /** Field is required */\n required?: boolean | string;\n /** Custom validation function */\n validate?: (value: unknown) => boolean | string | Promise<boolean | string>;\n}\n\n/**\n * RadioGroup component with form integration\n * \n * This is a wrapper around the shadcn/ui RadioGroup primitive that adds:\n * - Form integration with react-hook-form\n * - Automatic validation registration\n * - Label, helper text, and error message support\n * \n * @example\n * ```tsx\n * // Inside a Form component\n * <RadioGroup \n * name=\"gender\" \n * label=\"Gender\"\n * required\n * options={[\n * { label: \"Male\", value: \"male\" },\n * { label: \"Female\", value: \"female\" },\n * { label: \"Other\", value: \"other\" },\n * ]} \n * />\n * ```\n */\nexport function RadioGroup<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>({\n name,\n label,\n helperText,\n showError = true,\n error: customError,\n size,\n variant,\n options = [],\n direction = \"vertical\",\n control: externalControl,\n children,\n disabled,\n className,\n // Validation props\n required,\n validate,\n}: RadioGroupProps<TFieldValues, TName>) {\n const generatedId = useId();\n \n // Try to get form context\n const formConfigContext = useContext(FormConfigContext);\n const formConfig: FormConfig = formConfigContext ?? {};\n \n // Get form context from react-hook-form\n const rhfContext = useRHFFormContext<TFieldValues>();\n const control = externalControl ?? rhfContext?.control;\n\n // Register validation rules with the form\n useEffect(() => {\n if (formConfigContext?.registerFieldValidation) {\n const rules: FieldValidationRules = {};\n \n if (required !== undefined) rules.required = required;\n if (validate !== undefined) rules.validate = validate;\n\n formConfigContext.registerFieldValidation({\n name: name as string,\n type: \"string\",\n rules,\n });\n\n return () => {\n formConfigContext.unregisterFieldValidation(name as string);\n };\n }\n }, [formConfigContext, name, required, validate]);\n\n // Use controller for form integration\n const { field, fieldState } = useController<TFieldValues, TName>({\n name,\n control,\n });\n\n const fieldError = fieldState.error?.message;\n const errorMessage = customError ?? fieldError;\n const hasError = !!errorMessage;\n \n // Merge sizes - prop takes precedence over form config\n const effectiveSize = size ?? formConfig.size ?? \"md\";\n const effectiveDisabled = disabled ?? formConfig.disabled;\n const effectiveVariant = hasError ? \"error\" : variant;\n\n const contextValue: RadioGroupContextValue = {\n name: name as string,\n value: field.value,\n onChange: field.onChange,\n disabled: effectiveDisabled,\n size: effectiveSize,\n };\n\n return (\n <div className={cn(\"space-y-2\", className)}>\n {label && (\n <Label className={cn(\n \"block\",\n required && \"after:content-['*'] after:ml-0.5 after:text-destructive\"\n )}>\n {label}\n {formConfig.colon && \":\"}\n </Label>\n )}\n \n <RadioGroupContext.Provider value={contextValue}>\n <ShadcnRadioGroup\n value={field.value?.toString()}\n onValueChange={(value) => field.onChange(value)}\n disabled={effectiveDisabled}\n aria-labelledby={label ? `${generatedId}-label` : undefined}\n className={cn(\n direction === \"horizontal\" && \"flex flex-row gap-4\",\n direction === \"vertical\" && \"flex flex-col gap-2\"\n )}\n >\n {children ?? options.map((option) => (\n <RadioItem\n key={option.value}\n value={option.value}\n disabled={option.disabled}\n size={effectiveSize}\n variant={effectiveVariant}\n >\n {option.label}\n </RadioItem>\n ))}\n </ShadcnRadioGroup>\n </RadioGroupContext.Provider>\n\n {showError && hasError && (\n <p className=\"text-sm text-destructive\" role=\"alert\">\n {errorMessage}\n </p>\n )}\n \n {helperText && !hasError && (\n <p className=\"text-sm text-muted-foreground\">\n {helperText}\n </p>\n )}\n </div>\n );\n}\n\nRadioGroup.displayName = \"RadioGroup\";\n\nexport interface RadioItemProps extends Omit<ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>, \"value\">,\n VariantProps<typeof radioSizeVariants> {\n /** Value for this radio option */\n value: string | number;\n /** Label for this radio option */\n children?: ReactNode;\n /** Variant style */\n variant?: \"default\" | \"error\";\n}\n\n/**\n * RadioItem component - must be used within RadioGroup\n * \n * This is a wrapper around the shadcn/ui RadioGroupItem primitive\n */\nfunction RadioItemInner(\n {\n value,\n children,\n size,\n variant,\n className,\n disabled,\n id: providedId,\n ...props\n }: RadioItemProps,\n ref: React.ForwardedRef<React.ElementRef<typeof RadioGroupPrimitive.Item>>\n) {\n const generatedId = useId();\n const inputId = providedId ?? generatedId;\n \n const groupContext = useContext(RadioGroupContext);\n \n const effectiveSize = size ?? groupContext?.size ?? \"md\";\n const effectiveDisabled = disabled ?? groupContext?.disabled;\n\n return (\n <div className=\"flex items-center gap-2\">\n <ShadcnRadioGroupItem\n {...props}\n ref={ref}\n id={inputId}\n value={value.toString()}\n disabled={effectiveDisabled}\n className={cn(\n radioSizeVariants({ size: effectiveSize }),\n variant === \"error\" && \"border-destructive\",\n className\n )}\n />\n \n {children && (\n <Label\n htmlFor={inputId}\n className={labelVariants({ disabled: effectiveDisabled })}\n >\n {children}\n </Label>\n )}\n </div>\n );\n}\n\nexport const RadioItem = forwardRef(RadioItemInner);\nRadioItem.displayName = \"RadioItem\";\n"],"names":["cva","createContext","label","useId","useContext","FormConfigContext","useRHFFormContext","useEffect","useController","cn","jsxs","Label","jsx","ShadcnRadioGroup","ShadcnRadioGroupItem","forwardRef"],"mappings":"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"}
1
+ {"version":3,"file":"Radio.cjs","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"],"names":["cva","createContext","label","useId","useContext","FormConfigContext","useRHFFormContext","useEffect","useController","cn","jsxs","Label","jsx","ShadcnRadioGroup","ShadcnRadioGroupItem","forwardRef"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"Select.cjs","sources":["../../../../src/components/Form/Select.tsx"],"sourcesContent":["import { useId, useContext, useEffect } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { useController, useFormContext as useRHFFormContext, type FieldValues, type FieldPath, type Control } from \"react-hook-form\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../utils/cn\";\nimport { labelVariants } from \"./variants\";\nimport { FormConfigContext, type FormConfig, type FieldValidationRules } from \"../Form/context\";\nimport {\n Select as ShadcnSelect,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"../../primitives/select\";\nimport { Label } from \"../../primitives/label\";\n\nconst selectSizeVariants = cva(\n \"\",\n {\n variants: {\n size: {\n sm: \"h-8 text-xs\",\n md: \"h-10 text-sm\",\n lg: \"h-12 text-base\",\n },\n },\n defaultVariants: {\n size: \"md\",\n },\n }\n);\n\nexport interface SelectOption {\n label: string;\n value: string | number;\n disabled?: boolean;\n}\n\nexport interface SelectProps<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n> extends VariantProps<typeof selectSizeVariants> {\n /** Field name - required for form integration */\n name: TName;\n /** Label text for the select */\n label?: string;\n /** Helper text displayed below the select */\n helperText?: string;\n /** Whether to show the error message */\n showError?: boolean;\n /** Custom error message (overrides form error) */\n error?: string;\n /** Whether the select should take full width */\n fullWidth?: boolean;\n /** Options for the select */\n options?: SelectOption[];\n /** Placeholder text */\n placeholder?: string;\n /** Allow clear selection */\n allowClear?: boolean;\n /** External control (for use outside Form) */\n control?: Control<TFieldValues>;\n /** Children (alternative to options prop) */\n children?: ReactNode;\n /** Disabled state */\n disabled?: boolean;\n /** Additional class name */\n className?: string;\n /** ID for the select */\n id?: string;\n /** Variant style */\n variant?: \"default\" | \"error\" | \"success\";\n \n // Validation props\n /** Field is required */\n required?: boolean | string;\n /** Custom validation function */\n validate?: (value: unknown) => boolean | string | Promise<boolean | string>;\n}\n\n/**\n * Select component with form integration\n * \n * This is a wrapper around the shadcn/ui Select primitive that adds:\n * - Form integration with react-hook-form\n * - Automatic validation registration\n * - Label, helper text, and error message support\n * \n * @example\n * ```tsx\n * // Inside a Form component\n * <Select \n * name=\"country\" \n * label=\"Country\" \n * required\n * options={[\n * { label: \"USA\", value: \"us\" },\n * { label: \"Canada\", value: \"ca\" },\n * ]} \n * />\n * ```\n */\nexport function Select<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>({\n name,\n label,\n helperText,\n showError = true,\n error: customError,\n size,\n variant,\n fullWidth = true,\n className,\n disabled,\n options = [],\n placeholder,\n allowClear,\n id: providedId,\n control: externalControl,\n children,\n // Validation props\n required,\n validate,\n}: SelectProps<TFieldValues, TName>) {\n const generatedId = useId();\n const inputId = providedId ?? generatedId;\n \n // Try to get form context\n const formConfigContext = useContext(FormConfigContext);\n const formConfig: FormConfig = formConfigContext ?? {};\n \n // Get form context from react-hook-form\n const rhfContext = useRHFFormContext<TFieldValues>();\n const control = externalControl ?? rhfContext?.control;\n\n // Register validation rules with the form\n useEffect(() => {\n if (formConfigContext?.registerFieldValidation) {\n const rules: FieldValidationRules = {};\n \n if (required !== undefined) rules.required = required;\n if (validate !== undefined) rules.validate = validate;\n\n formConfigContext.registerFieldValidation({\n name: name as string,\n type: \"string\",\n rules,\n });\n\n return () => {\n formConfigContext.unregisterFieldValidation(name as string);\n };\n }\n }, [formConfigContext, name, required, validate]);\n\n // Use controller for form integration\n const { field, fieldState } = useController<TFieldValues, TName>({\n name,\n control,\n });\n\n const fieldError = fieldState.error?.message;\n const errorMessage = customError ?? fieldError;\n const hasError = !!errorMessage;\n \n // Merge sizes - prop takes precedence over form config\n const effectiveSize = size ?? formConfig.size ?? \"md\";\n const effectiveDisabled = disabled ?? formConfig.disabled;\n \n // Determine variant based on error state\n const effectiveVariant = hasError ? \"error\" : variant;\n\n return (\n <div className={cn(\"space-y-1.5\", fullWidth && \"w-full\")}>\n {label && (\n <Label\n htmlFor={inputId}\n className={labelVariants({ required: !!required })}\n >\n {label}\n {formConfig.colon && \":\"}\n </Label>\n )}\n \n <ShadcnSelect\n value={field.value?.toString() ?? \"\"}\n onValueChange={(value) => {\n // Handle clear selection\n if (value === \"\" && allowClear) {\n field.onChange(\"\");\n } else {\n field.onChange(value);\n }\n }}\n disabled={effectiveDisabled}\n >\n <SelectTrigger\n id={inputId}\n aria-invalid={hasError}\n aria-describedby={\n hasError\n ? `${inputId}-error`\n : helperText\n ? `${inputId}-helper`\n : undefined\n }\n className={cn(\n selectSizeVariants({ size: effectiveSize }),\n effectiveVariant === \"error\" && \"border-destructive focus:ring-destructive\",\n effectiveVariant === \"success\" && \"border-green-500 focus:ring-green-500\",\n className\n )}\n >\n <SelectValue placeholder={placeholder} />\n </SelectTrigger>\n <SelectContent>\n {allowClear && field.value && (\n <SelectItem value=\"\">\n <span className=\"text-muted-foreground\">Clear selection</span>\n </SelectItem>\n )}\n {children ?? options.map((option) => (\n <SelectItem\n key={option.value}\n value={option.value.toString()}\n disabled={option.disabled}\n >\n {option.label}\n </SelectItem>\n ))}\n </SelectContent>\n </ShadcnSelect>\n\n {showError && hasError && (\n <p\n id={`${inputId}-error`}\n className=\"text-sm text-destructive\"\n role=\"alert\"\n >\n {errorMessage}\n </p>\n )}\n \n {helperText && !hasError && (\n <p\n id={`${inputId}-helper`}\n className=\"text-sm text-muted-foreground\"\n >\n {helperText}\n </p>\n )}\n </div>\n );\n}\n\nSelect.displayName = \"Select\";\n"],"names":["cva","label","useId","useContext","FormConfigContext","useRHFFormContext","useEffect","useController","cn","jsxs","Label","labelVariants","ShadcnSelect","jsx","SelectTrigger","SelectValue","SelectContent","SelectItem"],"mappings":"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"}
1
+ {"version":3,"file":"Select.cjs","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"],"names":["cva","label","useId","useContext","FormConfigContext","useRHFFormContext","useEffect","useController","cn","jsxs","Label","labelVariants","ShadcnSelect","jsx","SelectTrigger","SelectValue","SelectContent","SelectItem"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"Switch.cjs","sources":["../../../../src/components/Form/Switch.tsx"],"sourcesContent":["import { forwardRef, useId, useContext, useEffect } from \"react\";\nimport type { ReactNode, ComponentPropsWithoutRef } from \"react\";\nimport { useController, useFormContext as useRHFFormContext, type FieldValues, type FieldPath, type Control } from \"react-hook-form\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../utils/cn\";\nimport { FormConfigContext, type FormConfig, type FieldValidationRules } from \"../Form/context\";\nimport { Switch as ShadcnSwitch } from \"../../primitives/switch\";\nimport { Label } from \"../../primitives/label\";\nimport type * as SwitchPrimitives from \"@radix-ui/react-switch\";\n\nconst switchSizeVariants = cva(\n \"\",\n {\n variants: {\n size: {\n sm: \"h-5 w-9\",\n md: \"h-6 w-11\",\n lg: \"h-7 w-14\",\n },\n },\n defaultVariants: {\n size: \"md\",\n },\n }\n);\n\nconst labelVariants = cva(\n \"text-sm font-medium cursor-pointer select-none\",\n {\n variants: {\n disabled: {\n true: \"cursor-not-allowed opacity-50\",\n false: \"\",\n },\n },\n defaultVariants: {\n disabled: false,\n },\n }\n);\n\nexport interface SwitchProps<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n> extends Omit<ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>, \"name\" | \"checked\" | \"onCheckedChange\" | \"required\">,\n VariantProps<typeof switchSizeVariants> {\n /** Field name - required for form integration */\n name: TName;\n /** Label text for the switch */\n label?: ReactNode;\n /** Helper text displayed below the switch */\n helperText?: string;\n /** Whether to show the error message */\n showError?: boolean;\n /** Custom error message (overrides form error) */\n error?: string;\n /** External control (for use outside Form) */\n control?: Control<TFieldValues>;\n /** Text to show when checked */\n checkedText?: ReactNode;\n /** Text to show when unchecked */\n uncheckedText?: ReactNode;\n \n // Validation props\n /** Field is required (must be on) */\n required?: boolean | string;\n /** Custom validation function */\n validate?: (value: unknown) => boolean | string | Promise<boolean | string>;\n}\n\n/**\n * Switch component with form integration\n * \n * This is a wrapper around the shadcn/ui Switch primitive that adds:\n * - Form integration with react-hook-form\n * - Automatic validation registration\n * - Label, helper text, and error message support\n * - Checked/unchecked text display\n * \n * @example\n * ```tsx\n * // Inside a Form component\n * <Switch name=\"notifications\" label=\"Enable notifications\" />\n * <Switch name=\"terms\" label=\"Accept terms\" required=\"You must accept the terms\" />\n * <Switch name=\"darkMode\" label=\"Dark mode\" checkedText=\"On\" uncheckedText=\"Off\" />\n * ```\n */\nfunction SwitchInner<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>(\n {\n name,\n label,\n helperText,\n showError = true,\n error: customError,\n size,\n className,\n disabled,\n id: providedId,\n control: externalControl,\n checkedText,\n uncheckedText,\n // Validation props\n required,\n validate,\n ...props\n }: SwitchProps<TFieldValues, TName>,\n ref: React.ForwardedRef<React.ElementRef<typeof SwitchPrimitives.Root>>\n) {\n const generatedId = useId();\n const inputId = providedId ?? generatedId;\n \n // Try to get form context\n const formConfigContext = useContext(FormConfigContext);\n const formConfig: FormConfig = formConfigContext ?? {};\n \n // Get form context from react-hook-form\n const rhfContext = useRHFFormContext<TFieldValues>();\n const control = externalControl ?? rhfContext?.control;\n\n // Register validation rules with the form\n useEffect(() => {\n if (formConfigContext?.registerFieldValidation) {\n const rules: FieldValidationRules = {};\n \n if (required !== undefined) rules.required = required;\n if (validate !== undefined) rules.validate = validate;\n\n formConfigContext.registerFieldValidation({\n name: name as string,\n type: \"boolean\",\n rules,\n });\n\n return () => {\n formConfigContext.unregisterFieldValidation(name as string);\n };\n }\n }, [formConfigContext, name, required, validate]);\n\n // Use controller for form integration\n const { field, fieldState } = useController<TFieldValues, TName>({\n name,\n control,\n });\n\n const fieldError = fieldState.error?.message;\n const errorMessage = customError ?? fieldError;\n const hasError = !!errorMessage;\n \n // Merge sizes - prop takes precedence over form config\n const effectiveSize = size ?? formConfig.size ?? \"md\";\n const effectiveDisabled = disabled ?? formConfig.disabled;\n const isChecked = field.value ?? false;\n\n return (\n <div className=\"space-y-1.5\">\n <div className=\"flex items-center gap-3\">\n <ShadcnSwitch\n {...props}\n ref={ref}\n id={inputId}\n checked={isChecked}\n onCheckedChange={(checked) => field.onChange(checked)}\n disabled={effectiveDisabled}\n aria-labelledby={label ? `${inputId}-label` : undefined}\n className={cn(\n switchSizeVariants({ size: effectiveSize }),\n className\n )}\n />\n \n {(checkedText || uncheckedText) && (\n <span className=\"text-sm text-muted-foreground\">\n {isChecked ? checkedText : uncheckedText}\n </span>\n )}\n \n {label && (\n <Label\n id={`${inputId}-label`}\n htmlFor={inputId}\n className={labelVariants({ disabled: effectiveDisabled })}\n >\n {label}\n </Label>\n )}\n </div>\n\n {showError && hasError && (\n <p className=\"text-sm text-destructive\" role=\"alert\">\n {errorMessage}\n </p>\n )}\n \n {helperText && !hasError && (\n <p className=\"text-sm text-muted-foreground\">\n {helperText}\n </p>\n )}\n </div>\n );\n}\n\n// Use forwardRef with generic support\nexport const Switch = forwardRef(SwitchInner) as <\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>(\n props: SwitchProps<TFieldValues, TName> & { ref?: React.ForwardedRef<React.ElementRef<typeof SwitchPrimitives.Root>> }\n) => React.ReactElement;\n\n(Switch as React.FC).displayName = \"Switch\";\n"],"names":["cva","label","useId","useContext","FormConfigContext","useRHFFormContext","useEffect","useController","jsxs","jsx","ShadcnSwitch","cn","Label","forwardRef"],"mappings":"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"}
1
+ {"version":3,"file":"Switch.cjs","sources":["../../../../src/components/Form/Switch.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, useId, useContext, useEffect } from \"react\";\nimport type { ReactNode, ComponentPropsWithoutRef } from \"react\";\nimport { useController, useFormContext as useRHFFormContext, type FieldValues, type FieldPath, type Control } from \"react-hook-form\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../utils/cn\";\nimport { FormConfigContext, type FormConfig, type FieldValidationRules } from \"../Form/context\";\nimport { Switch as ShadcnSwitch } from \"../../primitives/switch\";\nimport { Label } from \"../../primitives/label\";\nimport type * as SwitchPrimitives from \"@radix-ui/react-switch\";\n\nconst switchSizeVariants = cva(\n \"\",\n {\n variants: {\n size: {\n sm: \"h-5 w-9\",\n md: \"h-6 w-11\",\n lg: \"h-7 w-14\",\n },\n },\n defaultVariants: {\n size: \"md\",\n },\n }\n);\n\nconst labelVariants = cva(\n \"text-sm font-medium cursor-pointer select-none\",\n {\n variants: {\n disabled: {\n true: \"cursor-not-allowed opacity-50\",\n false: \"\",\n },\n },\n defaultVariants: {\n disabled: false,\n },\n }\n);\n\nexport interface SwitchProps<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n> extends Omit<ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>, \"name\" | \"checked\" | \"onCheckedChange\" | \"required\">,\n VariantProps<typeof switchSizeVariants> {\n /** Field name - required for form integration */\n name: TName;\n /** Label text for the switch */\n label?: ReactNode;\n /** Helper text displayed below the switch */\n helperText?: string;\n /** Whether to show the error message */\n showError?: boolean;\n /** Custom error message (overrides form error) */\n error?: string;\n /** External control (for use outside Form) */\n control?: Control<TFieldValues>;\n /** Text to show when checked */\n checkedText?: ReactNode;\n /** Text to show when unchecked */\n uncheckedText?: ReactNode;\n \n // Validation props\n /** Field is required (must be on) */\n required?: boolean | string;\n /** Custom validation function */\n validate?: (value: unknown) => boolean | string | Promise<boolean | string>;\n}\n\n/**\n * Switch component with form integration\n * \n * This is a wrapper around the shadcn/ui Switch primitive that adds:\n * - Form integration with react-hook-form\n * - Automatic validation registration\n * - Label, helper text, and error message support\n * - Checked/unchecked text display\n * \n * @example\n * ```tsx\n * // Inside a Form component\n * <Switch name=\"notifications\" label=\"Enable notifications\" />\n * <Switch name=\"terms\" label=\"Accept terms\" required=\"You must accept the terms\" />\n * <Switch name=\"darkMode\" label=\"Dark mode\" checkedText=\"On\" uncheckedText=\"Off\" />\n * ```\n */\nfunction SwitchInner<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>(\n {\n name,\n label,\n helperText,\n showError = true,\n error: customError,\n size,\n className,\n disabled,\n id: providedId,\n control: externalControl,\n checkedText,\n uncheckedText,\n // Validation props\n required,\n validate,\n ...props\n }: SwitchProps<TFieldValues, TName>,\n ref: React.ForwardedRef<React.ElementRef<typeof SwitchPrimitives.Root>>\n) {\n const generatedId = useId();\n const inputId = providedId ?? generatedId;\n \n // Try to get form context\n const formConfigContext = useContext(FormConfigContext);\n const formConfig: FormConfig = formConfigContext ?? {};\n \n // Get form context from react-hook-form\n const rhfContext = useRHFFormContext<TFieldValues>();\n const control = externalControl ?? rhfContext?.control;\n\n // Register validation rules with the form\n useEffect(() => {\n if (formConfigContext?.registerFieldValidation) {\n const rules: FieldValidationRules = {};\n \n if (required !== undefined) rules.required = required;\n if (validate !== undefined) rules.validate = validate;\n\n formConfigContext.registerFieldValidation({\n name: name as string,\n type: \"boolean\",\n rules,\n });\n\n return () => {\n formConfigContext.unregisterFieldValidation(name as string);\n };\n }\n }, [formConfigContext, name, required, validate]);\n\n // Use controller for form integration\n const { field, fieldState } = useController<TFieldValues, TName>({\n name,\n control,\n });\n\n const fieldError = fieldState.error?.message;\n const errorMessage = customError ?? fieldError;\n const hasError = !!errorMessage;\n \n // Merge sizes - prop takes precedence over form config\n const effectiveSize = size ?? formConfig.size ?? \"md\";\n const effectiveDisabled = disabled ?? formConfig.disabled;\n const isChecked = field.value ?? false;\n\n return (\n <div className=\"space-y-1.5\">\n <div className=\"flex items-center gap-3\">\n <ShadcnSwitch\n {...props}\n ref={ref}\n id={inputId}\n checked={isChecked}\n onCheckedChange={(checked) => field.onChange(checked)}\n disabled={effectiveDisabled}\n aria-labelledby={label ? `${inputId}-label` : undefined}\n className={cn(\n switchSizeVariants({ size: effectiveSize }),\n className\n )}\n />\n \n {(checkedText || uncheckedText) && (\n <span className=\"text-sm text-muted-foreground\">\n {isChecked ? checkedText : uncheckedText}\n </span>\n )}\n \n {label && (\n <Label\n id={`${inputId}-label`}\n htmlFor={inputId}\n className={labelVariants({ disabled: effectiveDisabled })}\n >\n {label}\n </Label>\n )}\n </div>\n\n {showError && hasError && (\n <p className=\"text-sm text-destructive\" role=\"alert\">\n {errorMessage}\n </p>\n )}\n \n {helperText && !hasError && (\n <p className=\"text-sm text-muted-foreground\">\n {helperText}\n </p>\n )}\n </div>\n );\n}\n\n// Use forwardRef with generic support\nexport const Switch = forwardRef(SwitchInner) as <\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>(\n props: SwitchProps<TFieldValues, TName> & { ref?: React.ForwardedRef<React.ElementRef<typeof SwitchPrimitives.Root>> }\n) => React.ReactElement;\n\n(Switch as React.FC).displayName = \"Switch\";\n"],"names":["cva","label","useId","useContext","FormConfigContext","useRHFFormContext","useEffect","useController","jsxs","jsx","ShadcnSwitch","cn","Label","forwardRef"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"TextArea.cjs","sources":["../../../../src/components/Form/TextArea.tsx"],"sourcesContent":["import { forwardRef, useId, useContext, useEffect } from \"react\";\nimport type { TextareaHTMLAttributes } 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 { labelVariants } from \"./variants\";\nimport { Textarea } from \"../../primitives/textarea\";\nimport { Label } from \"../../primitives/label\";\n\nconst textAreaSizeVariants = cva(\n \"\",\n {\n variants: {\n size: {\n sm: \"text-xs px-2 py-1.5 min-h-[60px]\",\n md: \"text-sm px-3 py-2 min-h-[80px]\",\n lg: \"text-base px-4 py-3 min-h-[100px]\",\n },\n variant: {\n default: \"border-input focus-visible:ring-ring\",\n error: \"border-destructive focus-visible:ring-destructive\",\n success: \"border-green-500 focus-visible:ring-green-500\",\n },\n },\n defaultVariants: {\n size: \"md\",\n variant: \"default\",\n },\n }\n);\n\n/**\n * Validation rule with optional custom message\n */\ntype ValidationRule<T> = T | { value: T; message: string };\n\nexport interface TextAreaProps<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n> extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, \"name\" | \"required\" | \"minLength\" | \"maxLength\">,\n VariantProps<typeof textAreaSizeVariants> {\n /** Field name - required for form integration */\n name: TName;\n /** Label text for the textarea */\n label?: string;\n /** Helper text displayed below the textarea */\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 textarea should take full width */\n fullWidth?: boolean;\n /** Show character count */\n showCount?: boolean;\n /** Maximum character count (for display) */\n maxCount?: number;\n /** External control (for use outside Form) */\n control?: Control<TFieldValues>;\n \n // Validation props\n /** Field is required */\n required?: boolean | string;\n /** Minimum length */\n minLength?: ValidationRule<number>;\n /** Maximum length */\n maxLength?: ValidationRule<number>;\n /** Custom validation function */\n validate?: (value: unknown) => boolean | string | Promise<boolean | string>;\n}\n\n/**\n * TextArea component with form integration\n * \n * This is a wrapper around the shadcn/ui Textarea primitive that adds:\n * - Form integration with react-hook-form\n * - Automatic validation registration\n * - Label, helper text, and error message support\n * - Character count display\n * \n * @example\n * ```tsx\n * // Inside a Form component\n * <TextArea name=\"description\" label=\"Description\" required minLength={10} />\n * <TextArea name=\"bio\" label=\"Bio\" showCount maxCount={500} maxLength={500} />\n * ```\n */\nfunction TextAreaInner<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>(\n {\n name,\n label,\n helperText,\n showError = true,\n error: customError,\n size,\n variant,\n fullWidth = true,\n className,\n disabled,\n showCount,\n maxCount,\n id: providedId,\n control: externalControl,\n // Validation props\n required,\n minLength,\n maxLength,\n validate,\n ...props\n }: TextAreaProps<TFieldValues, TName>,\n ref: React.ForwardedRef<HTMLTextAreaElement>\n) {\n const generatedId = useId();\n const inputId = providedId ?? generatedId;\n \n // Try to get form context\n const formConfigContext = useContext(FormConfigContext);\n const formConfig: FormConfig = formConfigContext ?? {};\n \n // Get form context from react-hook-form\n const rhfContext = useRHFFormContext<TFieldValues>();\n const control = externalControl ?? rhfContext?.control;\n\n // Register validation rules with the form\n useEffect(() => {\n if (formConfigContext?.registerFieldValidation) {\n const rules: FieldValidationRules = {};\n \n if (required !== undefined) rules.required = required;\n if (minLength !== undefined) rules.minLength = minLength;\n if (maxLength !== undefined) rules.maxLength = maxLength;\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, minLength, maxLength, 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 const currentLength = typeof field.value === \"string\" ? field.value.length : 0;\n \n // Get maxLength value for HTML attribute\n const maxLengthValue = maxCount ?? (typeof maxLength === \"number\" ? maxLength : (maxLength as { value: number })?.value);\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 <div className=\"relative\">\n <Textarea\n {...props}\n {...field}\n ref={(node) => {\n if (typeof ref === \"function\") {\n ref(node);\n } else if (ref) {\n ref.current = node;\n }\n field.ref(node);\n }}\n id={inputId}\n disabled={effectiveDisabled}\n maxLength={maxLengthValue}\n aria-invalid={hasError}\n aria-describedby={\n hasError\n ? `${inputId}-error`\n : helperText\n ? `${inputId}-helper`\n : undefined\n }\n className={cn(\n textAreaSizeVariants({ size: effectiveSize, variant: effectiveVariant }),\n showCount && \"pb-6\",\n className\n )}\n />\n \n {showCount && (\n <div className=\"absolute bottom-2 right-2 text-xs text-muted-foreground\">\n {currentLength}{maxCount ? `/${maxCount}` : \"\"}\n </div>\n )}\n </div>\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\n// Use forwardRef with generic support\nexport const TextArea = forwardRef(TextAreaInner) as <\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>(\n props: TextAreaProps<TFieldValues, TName> & { ref?: React.ForwardedRef<HTMLTextAreaElement> }\n) => React.ReactElement;\n\n(TextArea as React.FC).displayName = \"TextArea\";\n"],"names":["cva","label","useId","useContext","FormConfigContext","useRHFFormContext","useEffect","useController","cn","jsxs","Label","labelVariants","jsx","Textarea","forwardRef"],"mappings":"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"}
1
+ {"version":3,"file":"TextArea.cjs","sources":["../../../../src/components/Form/TextArea.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, useId, useContext, useEffect } from \"react\";\nimport type { TextareaHTMLAttributes } 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 { labelVariants } from \"./variants\";\nimport { Textarea } from \"../../primitives/textarea\";\nimport { Label } from \"../../primitives/label\";\n\nconst textAreaSizeVariants = cva(\n \"\",\n {\n variants: {\n size: {\n sm: \"text-xs px-2 py-1.5 min-h-[60px]\",\n md: \"text-sm px-3 py-2 min-h-[80px]\",\n lg: \"text-base px-4 py-3 min-h-[100px]\",\n },\n variant: {\n default: \"border-input focus-visible:ring-ring\",\n error: \"border-destructive focus-visible:ring-destructive\",\n success: \"border-green-500 focus-visible:ring-green-500\",\n },\n },\n defaultVariants: {\n size: \"md\",\n variant: \"default\",\n },\n }\n);\n\n/**\n * Validation rule with optional custom message\n */\ntype ValidationRule<T> = T | { value: T; message: string };\n\nexport interface TextAreaProps<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n> extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, \"name\" | \"required\" | \"minLength\" | \"maxLength\">,\n VariantProps<typeof textAreaSizeVariants> {\n /** Field name - required for form integration */\n name: TName;\n /** Label text for the textarea */\n label?: string;\n /** Helper text displayed below the textarea */\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 textarea should take full width */\n fullWidth?: boolean;\n /** Show character count */\n showCount?: boolean;\n /** Maximum character count (for display) */\n maxCount?: number;\n /** External control (for use outside Form) */\n control?: Control<TFieldValues>;\n \n // Validation props\n /** Field is required */\n required?: boolean | string;\n /** Minimum length */\n minLength?: ValidationRule<number>;\n /** Maximum length */\n maxLength?: ValidationRule<number>;\n /** Custom validation function */\n validate?: (value: unknown) => boolean | string | Promise<boolean | string>;\n}\n\n/**\n * TextArea component with form integration\n * \n * This is a wrapper around the shadcn/ui Textarea primitive that adds:\n * - Form integration with react-hook-form\n * - Automatic validation registration\n * - Label, helper text, and error message support\n * - Character count display\n * \n * @example\n * ```tsx\n * // Inside a Form component\n * <TextArea name=\"description\" label=\"Description\" required minLength={10} />\n * <TextArea name=\"bio\" label=\"Bio\" showCount maxCount={500} maxLength={500} />\n * ```\n */\nfunction TextAreaInner<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>(\n {\n name,\n label,\n helperText,\n showError = true,\n error: customError,\n size,\n variant,\n fullWidth = true,\n className,\n disabled,\n showCount,\n maxCount,\n id: providedId,\n control: externalControl,\n // Validation props\n required,\n minLength,\n maxLength,\n validate,\n ...props\n }: TextAreaProps<TFieldValues, TName>,\n ref: React.ForwardedRef<HTMLTextAreaElement>\n) {\n const generatedId = useId();\n const inputId = providedId ?? generatedId;\n \n // Try to get form context\n const formConfigContext = useContext(FormConfigContext);\n const formConfig: FormConfig = formConfigContext ?? {};\n \n // Get form context from react-hook-form\n const rhfContext = useRHFFormContext<TFieldValues>();\n const control = externalControl ?? rhfContext?.control;\n\n // Register validation rules with the form\n useEffect(() => {\n if (formConfigContext?.registerFieldValidation) {\n const rules: FieldValidationRules = {};\n \n if (required !== undefined) rules.required = required;\n if (minLength !== undefined) rules.minLength = minLength;\n if (maxLength !== undefined) rules.maxLength = maxLength;\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, minLength, maxLength, 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 const currentLength = typeof field.value === \"string\" ? field.value.length : 0;\n \n // Get maxLength value for HTML attribute\n const maxLengthValue = maxCount ?? (typeof maxLength === \"number\" ? maxLength : (maxLength as { value: number })?.value);\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 <div className=\"relative\">\n <Textarea\n {...props}\n {...field}\n ref={(node) => {\n if (typeof ref === \"function\") {\n ref(node);\n } else if (ref) {\n ref.current = node;\n }\n field.ref(node);\n }}\n id={inputId}\n disabled={effectiveDisabled}\n maxLength={maxLengthValue}\n aria-invalid={hasError}\n aria-describedby={\n hasError\n ? `${inputId}-error`\n : helperText\n ? `${inputId}-helper`\n : undefined\n }\n className={cn(\n textAreaSizeVariants({ size: effectiveSize, variant: effectiveVariant }),\n showCount && \"pb-6\",\n className\n )}\n />\n \n {showCount && (\n <div className=\"absolute bottom-2 right-2 text-xs text-muted-foreground\">\n {currentLength}{maxCount ? `/${maxCount}` : \"\"}\n </div>\n )}\n </div>\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\n// Use forwardRef with generic support\nexport const TextArea = forwardRef(TextAreaInner) as <\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>(\n props: TextAreaProps<TFieldValues, TName> & { ref?: React.ForwardedRef<HTMLTextAreaElement> }\n) => React.ReactElement;\n\n(TextArea as React.FC).displayName = \"TextArea\";\n"],"names":["cva","label","useId","useContext","FormConfigContext","useRHFFormContext","useEffect","useController","cn","jsxs","Label","labelVariants","jsx","Textarea","forwardRef"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"TextBox.cjs","sources":["../../../../src/components/Form/TextBox.tsx"],"sourcesContent":["import { forwardRef, useId, useContext, useEffect } from \"react\";\nimport type { InputHTMLAttributes, 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 { FormConfigContext, type FormConfig, type FieldValidationRules } from \"../Form/context\";\nimport { labelVariants } from \"./variants\";\nimport { TextBoxPrimitive } from \"../../primitives/textbox\";\nimport { Label } from \"../../primitives/label\";\nimport { X } from \"lucide-react\";\n\nconst textBoxVariants = cva(\n \"\",\n {\n variants: {\n size: {\n sm: \"h-8 text-xs px-2\",\n md: \"h-10 text-sm px-3\",\n lg: \"h-12 text-base px-4\",\n },\n variant: {\n default: \"border-input focus-visible:ring-ring\",\n error: \"border-destructive focus-visible:ring-destructive\",\n success: \"border-green-500 focus-visible:ring-green-500\",\n },\n },\n defaultVariants: {\n size: \"md\",\n variant: \"default\",\n },\n }\n);\n\n/**\n * Validation rule with optional custom message\n */\ntype ValidationRule<T> = T | { value: T; message: string };\n\nexport interface TextBoxProps<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n> extends Omit<InputHTMLAttributes<HTMLInputElement>, \"size\" | \"name\" | \"prefix\" | \"pattern\" | \"required\" | \"minLength\" | \"maxLength\">,\n VariantProps<typeof textBoxVariants> {\n /** Field name - required for form integration */\n name: TName;\n /** Label text for the input */\n label?: string;\n /** Helper text displayed below the input */\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 input should take full width */\n fullWidth?: boolean;\n /** Prefix element */\n prefix?: ReactNode;\n /** Suffix element */\n suffix?: ReactNode;\n /** Allow clear button */\n allowClear?: boolean;\n /** Callback when clear is clicked */\n onClear?: () => void;\n /** External control (for use outside Form) */\n control?: Control<TFieldValues>;\n \n // Validation props\n /** Field is required */\n required?: boolean | string;\n /** Minimum length for strings */\n minLength?: ValidationRule<number>;\n /** Maximum length for strings */\n maxLength?: ValidationRule<number>;\n /** Minimum value for numbers */\n minValue?: ValidationRule<number>;\n /** Maximum value for numbers */\n maxValue?: ValidationRule<number>;\n /** Regex pattern for validation */\n pattern?: ValidationRule<RegExp>;\n /** Email validation */\n email?: boolean | string;\n /** URL validation */\n url?: boolean | string;\n /** Custom validation function */\n validate?: (value: unknown) => boolean | string | Promise<boolean | string>;\n}\n\n/**\n * TextBox component with form integration and automatic validation registration\n * \n * This is a wrapper around the shadcn/ui Input primitive that adds:\n * - Form integration with react-hook-form\n * - Automatic validation registration\n * - Label, helper text, and error message support\n * - Prefix/suffix elements\n * - Clear button functionality\n * \n * @example\n * ```tsx\n * // Inside a Form component - validation is automatically registered\n * <Form onSubmit={handleSubmit} defaultValues={{ username: \"\", email: \"\" }}>\n * <TextBox name=\"username\" label=\"Username\" required minLength={3} maxLength={50} />\n * <TextBox name=\"email\" label=\"Email\" type=\"email\" required email />\n * <TextBox name=\"website\" label=\"Website\" url />\n * <Button type=\"submit\">Submit</Button>\n * </Form>\n * ```\n */\nfunction TextBoxInner<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>(\n {\n name,\n label,\n helperText,\n showError = true,\n error: customError,\n size,\n variant,\n fullWidth = true,\n className,\n disabled,\n prefix,\n suffix,\n allowClear,\n onClear,\n id: providedId,\n control: externalControl,\n // Validation props\n required,\n minLength,\n maxLength,\n minValue,\n maxValue,\n pattern,\n email,\n url,\n validate,\n ...props\n }: TextBoxProps<TFieldValues, TName>,\n ref: React.ForwardedRef<HTMLInputElement>\n) {\n const generatedId = useId();\n const inputId = providedId ?? generatedId;\n \n // Try to get form context\n const formConfigContext = useContext(FormConfigContext);\n const formConfig: FormConfig = formConfigContext ?? {};\n\n // Get form context from react-hook-form\n const rhfContext = useRHFFormContext<TFieldValues>();\n const control = externalControl ?? rhfContext?.control;\n\n // Destructure stable function references so the effect doesn't depend on the\n // context object identity (which changes every render due to inline construction).\n const registerFieldValidation = formConfigContext?.registerFieldValidation;\n const unregisterFieldValidation = formConfigContext?.unregisterFieldValidation;\n\n // Register validation rules with the form\n useEffect(() => {\n if (registerFieldValidation) {\n const rules: FieldValidationRules = {};\n\n if (required !== undefined) rules.required = required;\n if (minLength !== undefined) rules.minLength = minLength;\n if (maxLength !== undefined) rules.maxLength = maxLength;\n if (minValue !== undefined) rules.min = minValue;\n if (maxValue !== undefined) rules.max = maxValue;\n if (pattern !== undefined) rules.pattern = pattern;\n if (email !== undefined) rules.email = email;\n if (url !== undefined) rules.url = url;\n if (validate !== undefined) rules.validate = validate;\n\n // Determine field type and auto-infer rules from input type\n const inputType = props.type ?? \"text\";\n let fieldType: \"string\" | \"number\" | \"date\" = \"string\";\n\n if (inputType === \"number\") {\n fieldType = \"number\";\n } else if (inputType === \"date\") {\n fieldType = \"date\";\n } else if (inputType === \"email\" && rules.email === undefined) {\n rules.email = true;\n } else if (inputType === \"url\" && rules.url === undefined) {\n rules.url = true;\n } else if (inputType === \"tel\" && rules.pattern === undefined) {\n rules.pattern = { value: /^\\+?[\\d\\s\\-().]{7,}$/, message: \"Invalid phone number\" };\n }\n\n registerFieldValidation({\n name: name as string,\n type: fieldType,\n rules,\n });\n\n return () => {\n unregisterFieldValidation?.(name as string);\n };\n }\n }, [\n registerFieldValidation,\n unregisterFieldValidation,\n name,\n required,\n minLength,\n maxLength,\n minValue,\n maxValue,\n pattern,\n email,\n url,\n validate,\n props.type,\n ]);\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 const handleClear = () => {\n field.onChange(\"\");\n onClear?.();\n };\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 <div className=\"relative\">\n {prefix && (\n <div className=\"absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground\">\n {prefix}\n </div>\n )}\n \n <TextBoxPrimitive\n {...props}\n {...field}\n ref={(node) => {\n // Handle both refs\n if (typeof ref === \"function\") {\n ref(node);\n } else if (ref) {\n ref.current = node;\n }\n field.ref(node);\n }}\n id={inputId}\n disabled={effectiveDisabled}\n aria-invalid={hasError}\n aria-describedby={\n hasError\n ? `${inputId}-error`\n : helperText\n ? `${inputId}-helper`\n : undefined\n }\n className={cn(\n textBoxVariants({ size: effectiveSize, variant: effectiveVariant }),\n prefix && \"pl-10\",\n (suffix || allowClear) && \"pr-10\",\n className\n )}\n />\n\n {(suffix || (allowClear && field.value)) && (\n <div className=\"absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-1\">\n {allowClear && field.value && (\n <button\n type=\"button\"\n onClick={handleClear}\n className=\"text-muted-foreground hover:text-foreground transition-colors\"\n tabIndex={-1}\n >\n <X className=\"h-4 w-4\" />\n </button>\n )}\n {suffix && (\n <span className=\"text-muted-foreground\">{suffix}</span>\n )}\n </div>\n )}\n </div>\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\n// Use forwardRef with generic support\nexport const TextBox = forwardRef(TextBoxInner) as <\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>(\n props: TextBoxProps<TFieldValues, TName> & { ref?: React.ForwardedRef<HTMLInputElement> }\n) => React.ReactElement;\n\n(TextBox as React.FC).displayName = \"TextBox\";\n"],"names":["cva","label","useId","useContext","FormConfigContext","useRHFFormContext","useEffect","useController","cn","jsxs","Label","labelVariants","jsx","TextBoxPrimitive","X","forwardRef"],"mappings":";;;;;;;;;;;;AAWA,MAAM,kBAAkBA,uBAAAA;AAAAA,EACtB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,MAEN,SAAS;AAAA,QACP,SAAS;AAAA,QACT,OAAO;AAAA,QACP,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,IAEF,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ;AA6EA,SAAS,aAIP;AAAA,EACE;AAAA,EAAA,OACAC;AAAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,IAAI;AAAA,EACJ,SAAS;AAAA;AAAA,EAET;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,cAAcC,MAAAA,MAAA;AACpB,QAAM,UAAU,cAAc;AAG9B,QAAM,oBAAoBC,MAAAA,WAAWC,yBAAiB;AACtD,QAAM,aAAyB,qBAAqB,CAAA;AAGpD,QAAM,aAAaC,cAAAA,eAAA;AACnB,QAAM,UAAU,mBAAmB,YAAY;AAI/C,QAAM,0BAA0B,mBAAmB;AACnD,QAAM,4BAA4B,mBAAmB;AAGrDC,QAAAA,UAAU,MAAM;AACd,QAAI,yBAAyB;AAC3B,YAAM,QAA8B,CAAA;AAEpC,UAAI,aAAa,OAAW,OAAM,WAAW;AAC7C,UAAI,cAAc,OAAW,OAAM,YAAY;AAC/C,UAAI,cAAc,OAAW,OAAM,YAAY;AAC/C,UAAI,aAAa,OAAW,OAAM,MAAM;AACxC,UAAI,aAAa,OAAW,OAAM,MAAM;AACxC,UAAI,YAAY,OAAW,OAAM,UAAU;AAC3C,UAAI,UAAU,OAAW,OAAM,QAAQ;AACvC,UAAI,QAAQ,OAAW,OAAM,MAAM;AACnC,UAAI,aAAa,OAAW,OAAM,WAAW;AAG7C,YAAM,YAAY,MAAM,QAAQ;AAChC,UAAI,YAA0C;AAE9C,UAAI,cAAc,UAAU;AAC1B,oBAAY;AAAA,MACd,WAAW,cAAc,QAAQ;AAC/B,oBAAY;AAAA,MACd,WAAW,cAAc,WAAW,MAAM,UAAU,QAAW;AAC7D,cAAM,QAAQ;AAAA,MAChB,WAAW,cAAc,SAAS,MAAM,QAAQ,QAAW;AACzD,cAAM,MAAM;AAAA,MACd,WAAW,cAAc,SAAS,MAAM,YAAY,QAAW;AAC7D,cAAM,UAAU,EAAE,OAAO,wBAAwB,SAAS,uBAAA;AAAA,MAC5D;AAEA,8BAAwB;AAAA,QACtB;AAAA,QACA,MAAM;AAAA,QACN;AAAA,MAAA,CACD;AAED,aAAO,MAAM;AACX,oCAA4B,IAAc;AAAA,MAC5C;AAAA,IACF;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,EAAA,CACP;AAGD,QAAM,EAAE,OAAO,WAAA,IAAeC,4BAAmC;AAAA,IAC/D;AAAA,IACA;AAAA,EAAA,CACD;AAED,QAAM,aAAa,WAAW,OAAO;AACrC,QAAM,eAAe,eAAe;AACpC,QAAM,WAAW,CAAC,CAAC;AAGnB,QAAM,gBAAgB,QAAQ,WAAW,QAAQ;AACjD,QAAM,oBAAoB,YAAY,WAAW;AAGjD,QAAM,mBAAmB,WAAW,UAAU;AAE9C,QAAM,cAAc,MAAM;AACxB,UAAM,SAAS,EAAE;AACjB,cAAA;AAAA,EACF;AAEA,yCACG,OAAA,EAAI,WAAWC,GAAAA,GAAG,eAAe,aAAa,QAAQ,GACpD,UAAA;AAAA,IAAAP,WACCQ,2BAAAA;AAAAA,MAACC,MAAAA;AAAAA,MAAA;AAAA,QACC,SAAS;AAAA,QACT,WAAWC,SAAAA,cAAc,EAAE,UAAU,CAAC,CAAC,UAAU;AAAA,QAEhD,UAAA;AAAA,UAAAV;AAAAA,UACA,WAAW,SAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAIzBQ,2BAAAA,KAAC,OAAA,EAAI,WAAU,YACZ,UAAA;AAAA,MAAA,UACCG,2BAAAA,IAAC,OAAA,EAAI,WAAU,kEACZ,UAAA,QACH;AAAA,MAGFA,2BAAAA;AAAAA,QAACC,QAAAA;AAAAA,QAAA;AAAA,UACE,GAAG;AAAA,UACH,GAAG;AAAA,UACJ,KAAK,CAAC,SAAS;AAEb,gBAAI,OAAO,QAAQ,YAAY;AAC7B,kBAAI,IAAI;AAAA,YACV,WAAW,KAAK;AACd,kBAAI,UAAU;AAAA,YAChB;AACA,kBAAM,IAAI,IAAI;AAAA,UAChB;AAAA,UACA,IAAI;AAAA,UACJ,UAAU;AAAA,UACV,gBAAc;AAAA,UACd,oBACE,WACI,GAAG,OAAO,WACV,aACA,GAAG,OAAO,YACV;AAAA,UAEN,WAAWL,GAAAA;AAAAA,YACT,gBAAgB,EAAE,MAAM,eAAe,SAAS,kBAAkB;AAAA,YAClE,UAAU;AAAA,aACT,UAAU,eAAe;AAAA,YAC1B;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,OAGA,UAAW,cAAc,MAAM,UAC/BC,gCAAC,OAAA,EAAI,WAAU,qEACZ,UAAA;AAAA,QAAA,cAAc,MAAM,SACnBG,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS;AAAA,YACT,WAAU;AAAA,YACV,UAAU;AAAA,YAEV,UAAAA,2BAAAA,IAACE,YAAAA,GAAA,EAAE,WAAU,UAAA,CAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAG1B,UACCF,2BAAAA,IAAC,QAAA,EAAK,WAAU,yBAAyB,UAAA,OAAA,CAAO;AAAA,MAAA,EAAA,CAEpD;AAAA,IAAA,GAEJ;AAAA,IAEC,aAAa,YACZA,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,GAAG,OAAO;AAAA,QACd,WAAU;AAAA,QACV,MAAK;AAAA,QAEJ,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAIJ,cAAc,CAAC,YACdA,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,GAAG,OAAO;AAAA,QACd,WAAU;AAAA,QAET,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GAEJ;AAEJ;AAGO,MAAM,UAAUG,MAAAA,WAAW,YAAY;AAO7C,QAAqB,cAAc;;"}
1
+ {"version":3,"file":"TextBox.cjs","sources":["../../../../src/components/Form/TextBox.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, useId, useContext, useEffect } from \"react\";\nimport type { InputHTMLAttributes, 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 { FormConfigContext, type FormConfig, type FieldValidationRules } from \"../Form/context\";\nimport { labelVariants } from \"./variants\";\nimport { TextBoxPrimitive } from \"../../primitives/textbox\";\nimport { Label } from \"../../primitives/label\";\nimport { X } from \"lucide-react\";\n\nconst textBoxVariants = cva(\n \"\",\n {\n variants: {\n size: {\n sm: \"h-8 text-xs px-2\",\n md: \"h-10 text-sm px-3\",\n lg: \"h-12 text-base px-4\",\n },\n variant: {\n default: \"border-input focus-visible:ring-ring\",\n error: \"border-destructive focus-visible:ring-destructive\",\n success: \"border-green-500 focus-visible:ring-green-500\",\n },\n },\n defaultVariants: {\n size: \"md\",\n variant: \"default\",\n },\n }\n);\n\n/**\n * Validation rule with optional custom message\n */\ntype ValidationRule<T> = T | { value: T; message: string };\n\nexport interface TextBoxProps<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n> extends Omit<InputHTMLAttributes<HTMLInputElement>, \"size\" | \"name\" | \"prefix\" | \"pattern\" | \"required\" | \"minLength\" | \"maxLength\">,\n VariantProps<typeof textBoxVariants> {\n /** Field name - required for form integration */\n name: TName;\n /** Label text for the input */\n label?: string;\n /** Helper text displayed below the input */\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 input should take full width */\n fullWidth?: boolean;\n /** Prefix element */\n prefix?: ReactNode;\n /** Suffix element */\n suffix?: ReactNode;\n /** Allow clear button */\n allowClear?: boolean;\n /** Callback when clear is clicked */\n onClear?: () => void;\n /** External control (for use outside Form) */\n control?: Control<TFieldValues>;\n \n // Validation props\n /** Field is required */\n required?: boolean | string;\n /** Minimum length for strings */\n minLength?: ValidationRule<number>;\n /** Maximum length for strings */\n maxLength?: ValidationRule<number>;\n /** Minimum value for numbers */\n minValue?: ValidationRule<number>;\n /** Maximum value for numbers */\n maxValue?: ValidationRule<number>;\n /** Regex pattern for validation */\n pattern?: ValidationRule<RegExp>;\n /** Email validation */\n email?: boolean | string;\n /** URL validation */\n url?: boolean | string;\n /** Custom validation function */\n validate?: (value: unknown) => boolean | string | Promise<boolean | string>;\n}\n\n/**\n * TextBox component with form integration and automatic validation registration\n * \n * This is a wrapper around the shadcn/ui Input primitive that adds:\n * - Form integration with react-hook-form\n * - Automatic validation registration\n * - Label, helper text, and error message support\n * - Prefix/suffix elements\n * - Clear button functionality\n * \n * @example\n * ```tsx\n * // Inside a Form component - validation is automatically registered\n * <Form onSubmit={handleSubmit} defaultValues={{ username: \"\", email: \"\" }}>\n * <TextBox name=\"username\" label=\"Username\" required minLength={3} maxLength={50} />\n * <TextBox name=\"email\" label=\"Email\" type=\"email\" required email />\n * <TextBox name=\"website\" label=\"Website\" url />\n * <Button type=\"submit\">Submit</Button>\n * </Form>\n * ```\n */\nfunction TextBoxInner<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>(\n {\n name,\n label,\n helperText,\n showError = true,\n error: customError,\n size,\n variant,\n fullWidth = true,\n className,\n disabled,\n prefix,\n suffix,\n allowClear,\n onClear,\n id: providedId,\n control: externalControl,\n // Validation props\n required,\n minLength,\n maxLength,\n minValue,\n maxValue,\n pattern,\n email,\n url,\n validate,\n ...props\n }: TextBoxProps<TFieldValues, TName>,\n ref: React.ForwardedRef<HTMLInputElement>\n) {\n const generatedId = useId();\n const inputId = providedId ?? generatedId;\n \n // Try to get form context\n const formConfigContext = useContext(FormConfigContext);\n const formConfig: FormConfig = formConfigContext ?? {};\n\n // Get form context from react-hook-form\n const rhfContext = useRHFFormContext<TFieldValues>();\n const control = externalControl ?? rhfContext?.control;\n\n // Destructure stable function references so the effect doesn't depend on the\n // context object identity (which changes every render due to inline construction).\n const registerFieldValidation = formConfigContext?.registerFieldValidation;\n const unregisterFieldValidation = formConfigContext?.unregisterFieldValidation;\n\n // Register validation rules with the form\n useEffect(() => {\n if (registerFieldValidation) {\n const rules: FieldValidationRules = {};\n\n if (required !== undefined) rules.required = required;\n if (minLength !== undefined) rules.minLength = minLength;\n if (maxLength !== undefined) rules.maxLength = maxLength;\n if (minValue !== undefined) rules.min = minValue;\n if (maxValue !== undefined) rules.max = maxValue;\n if (pattern !== undefined) rules.pattern = pattern;\n if (email !== undefined) rules.email = email;\n if (url !== undefined) rules.url = url;\n if (validate !== undefined) rules.validate = validate;\n\n // Determine field type and auto-infer rules from input type\n const inputType = props.type ?? \"text\";\n let fieldType: \"string\" | \"number\" | \"date\" = \"string\";\n\n if (inputType === \"number\") {\n fieldType = \"number\";\n } else if (inputType === \"date\") {\n fieldType = \"date\";\n } else if (inputType === \"email\" && rules.email === undefined) {\n rules.email = true;\n } else if (inputType === \"url\" && rules.url === undefined) {\n rules.url = true;\n } else if (inputType === \"tel\" && rules.pattern === undefined) {\n rules.pattern = { value: /^\\+?[\\d\\s\\-().]{7,}$/, message: \"Invalid phone number\" };\n }\n\n registerFieldValidation({\n name: name as string,\n type: fieldType,\n rules,\n });\n\n return () => {\n unregisterFieldValidation?.(name as string);\n };\n }\n }, [\n registerFieldValidation,\n unregisterFieldValidation,\n name,\n required,\n minLength,\n maxLength,\n minValue,\n maxValue,\n pattern,\n email,\n url,\n validate,\n props.type,\n ]);\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 const handleClear = () => {\n field.onChange(\"\");\n onClear?.();\n };\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 <div className=\"relative\">\n {prefix && (\n <div className=\"absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground\">\n {prefix}\n </div>\n )}\n \n <TextBoxPrimitive\n {...props}\n {...field}\n ref={(node) => {\n // Handle both refs\n if (typeof ref === \"function\") {\n ref(node);\n } else if (ref) {\n ref.current = node;\n }\n field.ref(node);\n }}\n id={inputId}\n disabled={effectiveDisabled}\n aria-invalid={hasError}\n aria-describedby={\n hasError\n ? `${inputId}-error`\n : helperText\n ? `${inputId}-helper`\n : undefined\n }\n className={cn(\n textBoxVariants({ size: effectiveSize, variant: effectiveVariant }),\n prefix && \"pl-10\",\n (suffix || allowClear) && \"pr-10\",\n className\n )}\n />\n\n {(suffix || (allowClear && field.value)) && (\n <div className=\"absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-1\">\n {allowClear && field.value && (\n <button\n type=\"button\"\n onClick={handleClear}\n className=\"text-muted-foreground hover:text-foreground transition-colors\"\n tabIndex={-1}\n >\n <X className=\"h-4 w-4\" />\n </button>\n )}\n {suffix && (\n <span className=\"text-muted-foreground\">{suffix}</span>\n )}\n </div>\n )}\n </div>\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\n// Use forwardRef with generic support\nexport const TextBox = forwardRef(TextBoxInner) as <\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>(\n props: TextBoxProps<TFieldValues, TName> & { ref?: React.ForwardedRef<HTMLInputElement> }\n) => React.ReactElement;\n\n(TextBox as React.FC).displayName = \"TextBox\";\n"],"names":["cva","label","useId","useContext","FormConfigContext","useRHFFormContext","useEffect","useController","cn","jsxs","Label","labelVariants","jsx","TextBoxPrimitive","X","forwardRef"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"context.cjs","sources":["../../../../src/components/Form/context.ts"],"sourcesContent":["import { createContext, useCallback, useRef } from \"react\";\r\nimport type { UseFormReturn, FieldValues } from \"react-hook-form\";\r\nimport { z } from \"zod\";\r\n\r\n/**\r\n * Validation rule types that can be applied to form fields\r\n */\r\nexport interface FieldValidationRules {\r\n /** Field is required */\r\n required?: boolean | string;\r\n /** Minimum length for strings */\r\n minLength?: number | { value: number; message: string };\r\n /** Maximum length for strings */\r\n maxLength?: number | { value: number; message: string };\r\n /** Minimum value for numbers */\r\n min?: number | { value: number; message: string };\r\n /** Maximum value for numbers */\r\n max?: number | { value: number; message: string };\r\n /** Regex pattern for validation */\r\n pattern?: RegExp | { value: RegExp; message: string };\r\n /** Email validation */\r\n email?: boolean | string;\r\n /** URL validation */\r\n url?: 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 * Form configuration options\r\n */\r\nexport interface FormConfig {\r\n /** Show validation errors inline */\r\n showInlineErrors?: boolean;\r\n /** Validate on blur */\r\n validateOnBlur?: boolean;\r\n /** Validate on change */\r\n validateOnChange?: boolean;\r\n /** Size of form controls */\r\n size?: \"sm\" | \"md\" | \"lg\";\r\n /** Layout direction */\r\n layout?: \"horizontal\" | \"vertical\" | \"inline\";\r\n /** Label width for horizontal layout */\r\n labelWidth?: string | number;\r\n /** Whether form is disabled */\r\n disabled?: boolean;\r\n /** Colon after label */\r\n colon?: boolean;\r\n}\r\n\r\n/**\r\n * Field registration info\r\n */\r\nexport interface FieldRegistration {\r\n name: string;\r\n type: \"string\" | \"number\" | \"boolean\" | \"date\" | \"array\";\r\n rules: FieldValidationRules;\r\n}\r\n\r\n/**\r\n * Form context value\r\n */\r\nexport interface FormContextValue<TFieldValues extends FieldValues = FieldValues>\r\n extends FormConfig {\r\n form: UseFormReturn<TFieldValues>;\r\n /** Register a field's validation rules */\r\n registerFieldValidation: (field: FieldRegistration) => void;\r\n /** Unregister a field's validation rules */\r\n unregisterFieldValidation: (name: string) => void;\r\n /** Get current validation schema */\r\n getValidationSchema: () => z.ZodObject<Record<string, z.ZodTypeAny>>;\r\n /** Trigger validation for a specific field */\r\n triggerValidation: (name: string) => Promise<boolean>;\r\n}\r\n\r\n/**\r\n * Default form configuration\r\n */\r\nexport const defaultFormConfig: FormConfig = {\r\n showInlineErrors: true,\r\n validateOnBlur: true,\r\n validateOnChange: false,\r\n size: \"md\",\r\n layout: \"vertical\",\r\n disabled: false,\r\n colon: true,\r\n};\r\n\r\n/**\r\n * Form context for sharing form state and configuration\r\n */\r\nexport const FormConfigContext = createContext<FormContextValue | null>(null);\r\n\r\n/**\r\n * Build a Zod schema from validation rules\r\n */\r\nexport function buildZodSchemaFromRules(\r\n type: FieldRegistration[\"type\"],\r\n rules: FieldValidationRules\r\n): z.ZodTypeAny {\r\n // Helper to extract value and message\r\n const getValueAndMessage = <T>(\r\n rule: T | { value: T; message: string } | undefined,\r\n defaultMessage: string\r\n ): { value: T; message: string } | null => {\r\n if (rule === undefined) return null;\r\n if (typeof rule === \"object\" && rule !== null && \"value\" in rule) {\r\n return rule as { value: T; message: string };\r\n }\r\n return { value: rule as T, message: defaultMessage };\r\n };\r\n\r\n // Build string schema\r\n if (type === \"string\") {\r\n let schema = z.string();\r\n\r\n const minLengthRule = getValueAndMessage(\r\n rules.minLength,\r\n `Minimum ${typeof rules.minLength === \"number\" ? rules.minLength : (rules.minLength as { value: number })?.value} characters required`\r\n );\r\n if (minLengthRule) {\r\n schema = schema.min(minLengthRule.value as number, minLengthRule.message);\r\n }\r\n\r\n const maxLengthRule = getValueAndMessage(\r\n rules.maxLength,\r\n `Maximum ${typeof rules.maxLength === \"number\" ? rules.maxLength : (rules.maxLength as { value: number })?.value} characters allowed`\r\n );\r\n if (maxLengthRule) {\r\n schema = schema.max(maxLengthRule.value as number, maxLengthRule.message);\r\n }\r\n\r\n if (rules.pattern !== undefined) {\r\n const patternRule = rules.pattern instanceof RegExp\r\n ? { value: rules.pattern, message: \"Invalid format\" }\r\n : rules.pattern;\r\n schema = schema.regex(patternRule.value, patternRule.message);\r\n }\r\n\r\n if (rules.email) {\r\n const message = typeof rules.email === \"string\" ? rules.email : \"Invalid email address\";\r\n schema = schema.email(message);\r\n }\r\n\r\n if (rules.url) {\r\n const message = typeof rules.url === \"string\" ? rules.url : \"Invalid URL\";\r\n schema = schema.url(message);\r\n }\r\n\r\n // Handle required - for strings, require non-empty\r\n if (rules.required) {\r\n const message = typeof rules.required === \"string\" ? rules.required : \"This field is required\";\r\n schema = schema.min(1, message);\r\n return schema;\r\n }\r\n\r\n return schema.optional();\r\n }\r\n\r\n // Build number schema\r\n if (type === \"number\") {\r\n let schema = z.coerce.number();\r\n\r\n const minRule = getValueAndMessage(\r\n rules.min,\r\n `Minimum value is ${typeof rules.min === \"number\" ? rules.min : (rules.min as { value: number })?.value}`\r\n );\r\n if (minRule) {\r\n schema = schema.min(minRule.value as number, minRule.message);\r\n }\r\n\r\n const maxRule = getValueAndMessage(\r\n rules.max,\r\n `Maximum value is ${typeof rules.max === \"number\" ? rules.max : (rules.max as { value: number })?.value}`\r\n );\r\n if (maxRule) {\r\n schema = schema.max(maxRule.value as number, maxRule.message);\r\n }\r\n\r\n if (!rules.required) {\r\n return schema.optional();\r\n }\r\n return schema;\r\n }\r\n\r\n // Build boolean schema\r\n if (type === \"boolean\") {\r\n const schema = z.boolean();\r\n if (rules.required) {\r\n // For required boolean, must be true (like accepting terms)\r\n return schema.refine((val) => val === true, {\r\n message: typeof rules.required === \"string\" ? rules.required : \"This field is required\",\r\n });\r\n }\r\n return schema.optional();\r\n }\r\n\r\n // Build date schema\r\n if (type === \"date\") {\r\n const schema = z.coerce.date();\r\n if (!rules.required) {\r\n return schema.optional();\r\n }\r\n return schema;\r\n }\r\n\r\n // Build array schema\r\n if (type === \"array\") {\r\n let schema = z.array(z.unknown());\r\n if (rules.required) {\r\n const message = typeof rules.required === \"string\" ? rules.required : \"This field is required\";\r\n schema = schema.min(1, message);\r\n }\r\n return schema;\r\n }\r\n\r\n // Default fallback\r\n return z.unknown();\r\n}\r\n\r\n/**\r\n * Hook to manage field validations\r\n */\r\nexport function useFieldValidationRegistry() {\r\n const fieldsRef = useRef<Map<string, FieldRegistration>>(new Map());\r\n\r\n const registerFieldValidation = useCallback((field: FieldRegistration) => {\r\n fieldsRef.current.set(field.name, field);\r\n }, []);\r\n\r\n const unregisterFieldValidation = useCallback((name: string) => {\r\n fieldsRef.current.delete(name);\r\n }, []);\r\n\r\n const getValidationSchema = useCallback(() => {\r\n const shape: Record<string, z.ZodTypeAny> = {};\r\n \r\n fieldsRef.current.forEach((field) => {\r\n shape[field.name] = buildZodSchemaFromRules(field.type, field.rules);\r\n });\r\n\r\n return z.object(shape);\r\n }, []);\r\n\r\n return {\r\n registerFieldValidation,\r\n unregisterFieldValidation,\r\n getValidationSchema,\r\n fieldsRef,\r\n };\r\n}\r\n"],"names":["createContext","z","useRef","useCallback"],"mappings":"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"}
1
+ {"version":3,"file":"context.cjs","sources":["../../../../src/components/Form/context.ts"],"sourcesContent":["'use client';\n\nimport { createContext, useCallback, useRef } from \"react\";\r\nimport type { UseFormReturn, FieldValues } from \"react-hook-form\";\r\nimport { z } from \"zod\";\r\n\r\n/**\r\n * Validation rule types that can be applied to form fields\r\n */\r\nexport interface FieldValidationRules {\r\n /** Field is required */\r\n required?: boolean | string;\r\n /** Minimum length for strings */\r\n minLength?: number | { value: number; message: string };\r\n /** Maximum length for strings */\r\n maxLength?: number | { value: number; message: string };\r\n /** Minimum value for numbers */\r\n min?: number | { value: number; message: string };\r\n /** Maximum value for numbers */\r\n max?: number | { value: number; message: string };\r\n /** Regex pattern for validation */\r\n pattern?: RegExp | { value: RegExp; message: string };\r\n /** Email validation */\r\n email?: boolean | string;\r\n /** URL validation */\r\n url?: 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 * Form configuration options\r\n */\r\nexport interface FormConfig {\r\n /** Show validation errors inline */\r\n showInlineErrors?: boolean;\r\n /** Validate on blur */\r\n validateOnBlur?: boolean;\r\n /** Validate on change */\r\n validateOnChange?: boolean;\r\n /** Size of form controls */\r\n size?: \"sm\" | \"md\" | \"lg\";\r\n /** Layout direction */\r\n layout?: \"horizontal\" | \"vertical\" | \"inline\";\r\n /** Label width for horizontal layout */\r\n labelWidth?: string | number;\r\n /** Whether form is disabled */\r\n disabled?: boolean;\r\n /** Colon after label */\r\n colon?: boolean;\r\n}\r\n\r\n/**\r\n * Field registration info\r\n */\r\nexport interface FieldRegistration {\r\n name: string;\r\n type: \"string\" | \"number\" | \"boolean\" | \"date\" | \"array\";\r\n rules: FieldValidationRules;\r\n}\r\n\r\n/**\r\n * Form context value\r\n */\r\nexport interface FormContextValue<TFieldValues extends FieldValues = FieldValues>\r\n extends FormConfig {\r\n form: UseFormReturn<TFieldValues>;\r\n /** Register a field's validation rules */\r\n registerFieldValidation: (field: FieldRegistration) => void;\r\n /** Unregister a field's validation rules */\r\n unregisterFieldValidation: (name: string) => void;\r\n /** Get current validation schema */\r\n getValidationSchema: () => z.ZodObject<Record<string, z.ZodTypeAny>>;\r\n /** Trigger validation for a specific field */\r\n triggerValidation: (name: string) => Promise<boolean>;\r\n}\r\n\r\n/**\r\n * Default form configuration\r\n */\r\nexport const defaultFormConfig: FormConfig = {\r\n showInlineErrors: true,\r\n validateOnBlur: true,\r\n validateOnChange: false,\r\n size: \"md\",\r\n layout: \"vertical\",\r\n disabled: false,\r\n colon: true,\r\n};\r\n\r\n/**\r\n * Form context for sharing form state and configuration\r\n */\r\nexport const FormConfigContext = createContext<FormContextValue | null>(null);\r\n\r\n/**\r\n * Build a Zod schema from validation rules\r\n */\r\nexport function buildZodSchemaFromRules(\r\n type: FieldRegistration[\"type\"],\r\n rules: FieldValidationRules\r\n): z.ZodTypeAny {\r\n // Helper to extract value and message\r\n const getValueAndMessage = <T>(\r\n rule: T | { value: T; message: string } | undefined,\r\n defaultMessage: string\r\n ): { value: T; message: string } | null => {\r\n if (rule === undefined) return null;\r\n if (typeof rule === \"object\" && rule !== null && \"value\" in rule) {\r\n return rule as { value: T; message: string };\r\n }\r\n return { value: rule as T, message: defaultMessage };\r\n };\r\n\r\n // Build string schema\r\n if (type === \"string\") {\r\n let schema = z.string();\r\n\r\n const minLengthRule = getValueAndMessage(\r\n rules.minLength,\r\n `Minimum ${typeof rules.minLength === \"number\" ? rules.minLength : (rules.minLength as { value: number })?.value} characters required`\r\n );\r\n if (minLengthRule) {\r\n schema = schema.min(minLengthRule.value as number, minLengthRule.message);\r\n }\r\n\r\n const maxLengthRule = getValueAndMessage(\r\n rules.maxLength,\r\n `Maximum ${typeof rules.maxLength === \"number\" ? rules.maxLength : (rules.maxLength as { value: number })?.value} characters allowed`\r\n );\r\n if (maxLengthRule) {\r\n schema = schema.max(maxLengthRule.value as number, maxLengthRule.message);\r\n }\r\n\r\n if (rules.pattern !== undefined) {\r\n const patternRule = rules.pattern instanceof RegExp\r\n ? { value: rules.pattern, message: \"Invalid format\" }\r\n : rules.pattern;\r\n schema = schema.regex(patternRule.value, patternRule.message);\r\n }\r\n\r\n if (rules.email) {\r\n const message = typeof rules.email === \"string\" ? rules.email : \"Invalid email address\";\r\n schema = schema.email(message);\r\n }\r\n\r\n if (rules.url) {\r\n const message = typeof rules.url === \"string\" ? rules.url : \"Invalid URL\";\r\n schema = schema.url(message);\r\n }\r\n\r\n // Handle required - for strings, require non-empty\r\n if (rules.required) {\r\n const message = typeof rules.required === \"string\" ? rules.required : \"This field is required\";\r\n schema = schema.min(1, message);\r\n return schema;\r\n }\r\n\r\n return schema.optional();\r\n }\r\n\r\n // Build number schema\r\n if (type === \"number\") {\r\n let schema = z.coerce.number();\r\n\r\n const minRule = getValueAndMessage(\r\n rules.min,\r\n `Minimum value is ${typeof rules.min === \"number\" ? rules.min : (rules.min as { value: number })?.value}`\r\n );\r\n if (minRule) {\r\n schema = schema.min(minRule.value as number, minRule.message);\r\n }\r\n\r\n const maxRule = getValueAndMessage(\r\n rules.max,\r\n `Maximum value is ${typeof rules.max === \"number\" ? rules.max : (rules.max as { value: number })?.value}`\r\n );\r\n if (maxRule) {\r\n schema = schema.max(maxRule.value as number, maxRule.message);\r\n }\r\n\r\n if (!rules.required) {\r\n return schema.optional();\r\n }\r\n return schema;\r\n }\r\n\r\n // Build boolean schema\r\n if (type === \"boolean\") {\r\n const schema = z.boolean();\r\n if (rules.required) {\r\n // For required boolean, must be true (like accepting terms)\r\n return schema.refine((val) => val === true, {\r\n message: typeof rules.required === \"string\" ? rules.required : \"This field is required\",\r\n });\r\n }\r\n return schema.optional();\r\n }\r\n\r\n // Build date schema\r\n if (type === \"date\") {\r\n const schema = z.coerce.date();\r\n if (!rules.required) {\r\n return schema.optional();\r\n }\r\n return schema;\r\n }\r\n\r\n // Build array schema\r\n if (type === \"array\") {\r\n let schema = z.array(z.unknown());\r\n if (rules.required) {\r\n const message = typeof rules.required === \"string\" ? rules.required : \"This field is required\";\r\n schema = schema.min(1, message);\r\n }\r\n return schema;\r\n }\r\n\r\n // Default fallback\r\n return z.unknown();\r\n}\r\n\r\n/**\r\n * Hook to manage field validations\r\n */\r\nexport function useFieldValidationRegistry() {\r\n const fieldsRef = useRef<Map<string, FieldRegistration>>(new Map());\r\n\r\n const registerFieldValidation = useCallback((field: FieldRegistration) => {\r\n fieldsRef.current.set(field.name, field);\r\n }, []);\r\n\r\n const unregisterFieldValidation = useCallback((name: string) => {\r\n fieldsRef.current.delete(name);\r\n }, []);\r\n\r\n const getValidationSchema = useCallback(() => {\r\n const shape: Record<string, z.ZodTypeAny> = {};\r\n \r\n fieldsRef.current.forEach((field) => {\r\n shape[field.name] = buildZodSchemaFromRules(field.type, field.rules);\r\n });\r\n\r\n return z.object(shape);\r\n }, []);\r\n\r\n return {\r\n registerFieldValidation,\r\n unregisterFieldValidation,\r\n getValidationSchema,\r\n fieldsRef,\r\n };\r\n}\r\n"],"names":["createContext","z","useRef","useCallback"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"hooks.cjs","sources":["../../../../src/components/Form/hooks.ts"],"sourcesContent":["import { useContext } from \"react\";\r\nimport {\r\n useFormContext as useRHFFormContext,\r\n useController,\r\n type FieldValues,\r\n type FieldPath,\r\n type UseControllerProps,\r\n type UseControllerReturn,\r\n} from \"react-hook-form\";\r\nimport { FormConfigContext, type FormContextValue, type FormConfig } from \"./context\";\r\n\r\n/**\r\n * Hook to access form configuration context\r\n */\r\nexport function useFormConfig<TFieldValues extends FieldValues = FieldValues>(): FormContextValue<TFieldValues> {\r\n const context = useContext(FormConfigContext) as FormContextValue<TFieldValues> | null;\r\n if (!context) {\r\n throw new Error(\"useFormConfig must be used within a Form component\");\r\n }\r\n return context;\r\n}\r\n\r\n/**\r\n * Hook to access react-hook-form context directly\r\n */\r\nexport function useForm<TFieldValues extends FieldValues = FieldValues>() {\r\n return useRHFFormContext<TFieldValues>();\r\n}\r\n\r\n/**\r\n * Hook to create a controlled field with form context awareness\r\n */\r\nexport function useFormField<\r\n TFieldValues extends FieldValues = FieldValues,\r\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n>(\r\n props: UseControllerProps<TFieldValues, TName>\r\n): UseControllerReturn<TFieldValues, TName> & { config: FormConfig } {\r\n const { form, ...config } = useFormConfig<TFieldValues>();\r\n const controller = useController<TFieldValues, TName>({\r\n ...props,\r\n control: form.control,\r\n });\r\n\r\n return {\r\n ...controller,\r\n config,\r\n };\r\n}\r\n\r\n/**\r\n * Hook to get field error\r\n */\r\nexport function useFieldError<\r\n TFieldValues extends FieldValues = FieldValues,\r\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n>(name: TName): string | undefined {\r\n const { form } = useFormConfig<TFieldValues>();\r\n const error = form.formState.errors[name];\r\n return error?.message as string | undefined;\r\n}\r\n"],"names":["context","useContext","FormConfigContext","useRHFFormContext","useController"],"mappings":";;;;;AAcO,SAAS,gBAAgG;AAC9G,QAAMA,YAAUC,MAAAA,WAAWC,yBAAiB;AAC5C,MAAI,CAACF,WAAS;AACZ,UAAM,IAAI,MAAM,oDAAoD;AAAA,EACtE;AACA,SAAOA;AACT;AAKO,SAAS,UAA0D;AACxE,SAAOG,6BAAA;AACT;AAKO,SAAS,aAId,OACmE;AACnE,QAAM,EAAE,MAAM,GAAG,OAAA,IAAW,cAAA;AAC5B,QAAM,aAAaC,cAAAA,cAAmC;AAAA,IACpD,GAAG;AAAA,IACH,SAAS,KAAK;AAAA,EAAA,CACf;AAED,SAAO;AAAA,IACL,GAAG;AAAA,IACH;AAAA,EAAA;AAEJ;AAKO,SAAS,cAGd,MAAiC;AACjC,QAAM,EAAE,KAAA,IAAS,cAAA;AACjB,QAAM,QAAQ,KAAK,UAAU,OAAO,IAAI;AACxC,SAAO,OAAO;AAChB;;;;;"}
1
+ {"version":3,"file":"hooks.cjs","sources":["../../../../src/components/Form/hooks.ts"],"sourcesContent":["'use client';\n\nimport { useContext } from \"react\";\r\nimport {\r\n useFormContext as useRHFFormContext,\r\n useController,\r\n type FieldValues,\r\n type FieldPath,\r\n type UseControllerProps,\r\n type UseControllerReturn,\r\n} from \"react-hook-form\";\r\nimport { FormConfigContext, type FormContextValue, type FormConfig } from \"./context\";\r\n\r\n/**\r\n * Hook to access form configuration context\r\n */\r\nexport function useFormConfig<TFieldValues extends FieldValues = FieldValues>(): FormContextValue<TFieldValues> {\r\n const context = useContext(FormConfigContext) as FormContextValue<TFieldValues> | null;\r\n if (!context) {\r\n throw new Error(\"useFormConfig must be used within a Form component\");\r\n }\r\n return context;\r\n}\r\n\r\n/**\r\n * Hook to access react-hook-form context directly\r\n */\r\nexport function useForm<TFieldValues extends FieldValues = FieldValues>() {\r\n return useRHFFormContext<TFieldValues>();\r\n}\r\n\r\n/**\r\n * Hook to create a controlled field with form context awareness\r\n */\r\nexport function useFormField<\r\n TFieldValues extends FieldValues = FieldValues,\r\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n>(\r\n props: UseControllerProps<TFieldValues, TName>\r\n): UseControllerReturn<TFieldValues, TName> & { config: FormConfig } {\r\n const { form, ...config } = useFormConfig<TFieldValues>();\r\n const controller = useController<TFieldValues, TName>({\r\n ...props,\r\n control: form.control,\r\n });\r\n\r\n return {\r\n ...controller,\r\n config,\r\n };\r\n}\r\n\r\n/**\r\n * Hook to get field error\r\n */\r\nexport function useFieldError<\r\n TFieldValues extends FieldValues = FieldValues,\r\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n>(name: TName): string | undefined {\r\n const { form } = useFormConfig<TFieldValues>();\r\n const error = form.formState.errors[name];\r\n return error?.message as string | undefined;\r\n}\r\n"],"names":["context","useContext","FormConfigContext","useRHFFormContext","useController"],"mappings":";;;;;AAgBO,SAAS,gBAAgG;AAC9G,QAAMA,YAAUC,MAAAA,WAAWC,yBAAiB;AAC5C,MAAI,CAACF,WAAS;AACZ,UAAM,IAAI,MAAM,oDAAoD;AAAA,EACtE;AACA,SAAOA;AACT;AAKO,SAAS,UAA0D;AACxE,SAAOG,6BAAA;AACT;AAKO,SAAS,aAId,OACmE;AACnE,QAAM,EAAE,MAAM,GAAG,OAAA,IAAW,cAAA;AAC5B,QAAM,aAAaC,cAAAA,cAAmC;AAAA,IACpD,GAAG;AAAA,IACH,SAAS,KAAK;AAAA,EAAA,CACf;AAED,SAAO;AAAA,IACL,GAAG;AAAA,IACH;AAAA,EAAA;AAEJ;AAKO,SAAS,cAGd,MAAiC;AACjC,QAAM,EAAE,KAAA,IAAS,cAAA;AACjB,QAAM,QAAQ,KAAK,UAAU,OAAO,IAAI;AACxC,SAAO,OAAO;AAChB;;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"useDebounce.cjs","sources":["../../../src/hooks/useDebounce.ts"],"sourcesContent":["import { useState, useEffect } from \"react\";\r\n\r\n/**\r\n * A hook that debounces a value by a specified delay\r\n * @param value - The value to debounce\r\n * @param delay - The delay in milliseconds (default: 500)\r\n * @returns The debounced value\r\n */\r\nexport function useDebounce<T>(value: T, delay = 500): T {\r\n const [debouncedValue, setDebouncedValue] = useState<T>(value);\r\n\r\n useEffect(() => {\r\n const timer = setTimeout(() => {\r\n setDebouncedValue(value);\r\n }, delay);\r\n\r\n return () => {\r\n clearTimeout(timer);\r\n };\r\n }, [value, delay]);\r\n\r\n return debouncedValue;\r\n}\r\n"],"names":["useState","useEffect"],"mappings":";;;AAQO,SAAS,YAAe,OAAU,QAAQ,KAAQ;AACvD,QAAM,CAAC,gBAAgB,iBAAiB,IAAIA,MAAAA,SAAY,KAAK;AAE7DC,QAAAA,UAAU,MAAM;AACd,UAAM,QAAQ,WAAW,MAAM;AAC7B,wBAAkB,KAAK;AAAA,IACzB,GAAG,KAAK;AAER,WAAO,MAAM;AACX,mBAAa,KAAK;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,OAAO,KAAK,CAAC;AAEjB,SAAO;AACT;;"}
1
+ {"version":3,"file":"useDebounce.cjs","sources":["../../../src/hooks/useDebounce.ts"],"sourcesContent":["'use client';\n\nimport { useState, useEffect } from \"react\";\r\n\r\n/**\r\n * A hook that debounces a value by a specified delay\r\n * @param value - The value to debounce\r\n * @param delay - The delay in milliseconds (default: 500)\r\n * @returns The debounced value\r\n */\r\nexport function useDebounce<T>(value: T, delay = 500): T {\r\n const [debouncedValue, setDebouncedValue] = useState<T>(value);\r\n\r\n useEffect(() => {\r\n const timer = setTimeout(() => {\r\n setDebouncedValue(value);\r\n }, delay);\r\n\r\n return () => {\r\n clearTimeout(timer);\r\n };\r\n }, [value, delay]);\r\n\r\n return debouncedValue;\r\n}\r\n"],"names":["useState","useEffect"],"mappings":";;;AAUO,SAAS,YAAe,OAAU,QAAQ,KAAQ;AACvD,QAAM,CAAC,gBAAgB,iBAAiB,IAAIA,MAAAA,SAAY,KAAK;AAE7DC,QAAAA,UAAU,MAAM;AACd,UAAM,QAAQ,WAAW,MAAM;AAC7B,wBAAkB,KAAK;AAAA,IACzB,GAAG,KAAK;AAER,WAAO,MAAM;AACX,mBAAa,KAAK;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,OAAO,KAAK,CAAC;AAEjB,SAAO;AACT;;"}
@@ -0,0 +1,97 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ const React = require("react");
4
+ function _interopNamespaceDefault(e) {
5
+ const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
6
+ if (e) {
7
+ for (const k in e) {
8
+ if (k !== "default") {
9
+ const d = Object.getOwnPropertyDescriptor(e, k);
10
+ Object.defineProperty(n, k, d.get ? d : {
11
+ enumerable: true,
12
+ get: () => e[k]
13
+ });
14
+ }
15
+ }
16
+ }
17
+ n.default = e;
18
+ return Object.freeze(n);
19
+ }
20
+ const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
21
+ const TOAST_LIMIT = 1;
22
+ const TOAST_REMOVE_DELAY = 1e6;
23
+ let count = 0;
24
+ function genId() {
25
+ count = (count + 1) % Number.MAX_SAFE_INTEGER;
26
+ return count.toString();
27
+ }
28
+ const toastTimeouts = /* @__PURE__ */ new Map();
29
+ const addToRemoveQueue = (toastId) => {
30
+ if (toastTimeouts.has(toastId)) return;
31
+ const timeout = setTimeout(() => {
32
+ toastTimeouts.delete(toastId);
33
+ dispatch({ type: "REMOVE_TOAST", toastId });
34
+ }, TOAST_REMOVE_DELAY);
35
+ toastTimeouts.set(toastId, timeout);
36
+ };
37
+ const reducer = (state, action) => {
38
+ switch (action.type) {
39
+ case "ADD_TOAST":
40
+ return { ...state, toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT) };
41
+ case "UPDATE_TOAST":
42
+ return { ...state, toasts: state.toasts.map((t) => t.id === action.toast.id ? { ...t, ...action.toast } : t) };
43
+ case "DISMISS_TOAST": {
44
+ const { toastId } = action;
45
+ if (toastId) {
46
+ addToRemoveQueue(toastId);
47
+ } else {
48
+ state.toasts.forEach((t) => addToRemoveQueue(t.id));
49
+ }
50
+ return { ...state, toasts: state.toasts.map((t) => t.id === toastId || toastId === void 0 ? { ...t, open: false } : t) };
51
+ }
52
+ case "REMOVE_TOAST":
53
+ return action.toastId === void 0 ? { ...state, toasts: [] } : { ...state, toasts: state.toasts.filter((t) => t.id !== action.toastId) };
54
+ }
55
+ };
56
+ const listeners = [];
57
+ let memoryState = { toasts: [] };
58
+ function dispatch(action) {
59
+ memoryState = reducer(memoryState, action);
60
+ listeners.forEach((l) => l(memoryState));
61
+ }
62
+ function toast({ ...props }) {
63
+ const id = genId();
64
+ const update = (props2) => dispatch({ type: "UPDATE_TOAST", toast: { ...props2, id } });
65
+ const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
66
+ dispatch({
67
+ type: "ADD_TOAST",
68
+ toast: {
69
+ ...props,
70
+ id,
71
+ open: true,
72
+ onOpenChange: (open) => {
73
+ if (!open) dismiss();
74
+ }
75
+ }
76
+ });
77
+ return { id, dismiss, update };
78
+ }
79
+ function useToast() {
80
+ const [state, setState] = React__namespace.useState(memoryState);
81
+ React__namespace.useEffect(() => {
82
+ listeners.push(setState);
83
+ return () => {
84
+ const index = listeners.indexOf(setState);
85
+ if (index > -1) listeners.splice(index, 1);
86
+ };
87
+ }, [state]);
88
+ return {
89
+ ...state,
90
+ toast,
91
+ dismiss: (toastId) => dispatch({ type: "DISMISS_TOAST", toastId })
92
+ };
93
+ }
94
+ exports.reducer = reducer;
95
+ exports.toast = toast;
96
+ exports.useToast = useToast;
97
+ //# sourceMappingURL=useToast.cjs.map