@skybin-tech/nebula-ui 0.0.26 → 0.0.28
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.
- package/README.md +6 -4
- package/dist/cjs/_virtual/_rolldown/runtime.cjs +24 -0
- package/dist/cjs/components/Accordion/Accordion.cjs +20 -10
- package/dist/cjs/components/Accordion/Accordion.cjs.map +1 -1
- package/dist/cjs/components/Alert/Alert.cjs +19 -9
- package/dist/cjs/components/Alert/Alert.cjs.map +1 -1
- package/dist/cjs/components/Avatar/Avatar.cjs +19 -9
- package/dist/cjs/components/Avatar/Avatar.cjs.map +1 -1
- package/dist/cjs/components/Badge/Badge.cjs +8 -7
- package/dist/cjs/components/Badge/Badge.cjs.map +1 -1
- package/dist/cjs/components/Button/Button.cjs +37 -47
- package/dist/cjs/components/Button/Button.cjs.map +1 -1
- package/dist/cjs/components/Card/Card.cjs +31 -12
- package/dist/cjs/components/Card/Card.cjs.map +1 -1
- package/dist/cjs/components/Checkbox/Checkbox.cjs +12 -7
- package/dist/cjs/components/Checkbox/Checkbox.cjs.map +1 -1
- package/dist/cjs/components/DropdownMenu/DropdownMenu.cjs +55 -21
- package/dist/cjs/components/DropdownMenu/DropdownMenu.cjs.map +1 -1
- package/dist/cjs/components/Form/Checkbox.cjs +128 -142
- package/dist/cjs/components/Form/Checkbox.cjs.map +1 -1
- package/dist/cjs/components/Form/Form.cjs +106 -105
- package/dist/cjs/components/Form/Form.cjs.map +1 -1
- package/dist/cjs/components/Form/FormSwitch.cjs +126 -0
- package/dist/cjs/components/Form/FormSwitch.cjs.map +1 -0
- package/dist/cjs/components/Form/Radio.cjs +157 -172
- package/dist/cjs/components/Form/Radio.cjs.map +1 -1
- package/dist/cjs/components/Form/Select.cjs +131 -0
- package/dist/cjs/components/Form/Select.cjs.map +1 -0
- package/dist/cjs/components/Form/TextArea.cjs +137 -152
- package/dist/cjs/components/Form/TextArea.cjs.map +1 -1
- package/dist/cjs/components/Form/TextBox.cjs +184 -206
- package/dist/cjs/components/Form/TextBox.cjs.map +1 -1
- package/dist/cjs/components/Form/context.cjs +109 -122
- package/dist/cjs/components/Form/context.cjs.map +1 -1
- package/dist/cjs/components/Form/hooks.cjs +34 -24
- package/dist/cjs/components/Form/hooks.cjs.map +1 -1
- package/dist/cjs/components/Form/index.cjs +29 -0
- package/dist/cjs/components/Form/variants.cjs +14 -14
- package/dist/cjs/components/Form/variants.cjs.map +1 -1
- package/dist/cjs/components/Input/Input.cjs +11 -7
- package/dist/cjs/components/Input/Input.cjs.map +1 -1
- package/dist/cjs/components/Label/Label.cjs +11 -7
- package/dist/cjs/components/Label/Label.cjs.map +1 -1
- package/dist/cjs/components/Pagination/Pagination.cjs +58 -95
- package/dist/cjs/components/Pagination/Pagination.cjs.map +1 -1
- package/dist/cjs/components/Separator/Separator.cjs +11 -7
- package/dist/cjs/components/Separator/Separator.cjs.map +1 -1
- package/dist/cjs/components/Skeleton/Skeleton.cjs +7 -6
- package/dist/cjs/components/Skeleton/Skeleton.cjs.map +1 -1
- package/dist/cjs/components/Switch/Switch.cjs +14 -0
- package/dist/cjs/components/Switch/Switch.cjs.map +1 -0
- package/dist/cjs/components/Tabs/Tabs.cjs +23 -10
- package/dist/cjs/components/Tabs/Tabs.cjs.map +1 -1
- package/dist/cjs/components/Textarea/Textarea.cjs +11 -7
- package/dist/cjs/components/Textarea/Textarea.cjs.map +1 -1
- package/dist/cjs/components/Tooltip/Tooltip.cjs +14 -10
- package/dist/cjs/components/Tooltip/Tooltip.cjs.map +1 -1
- package/dist/cjs/hooks/useDebounce.cjs +22 -14
- package/dist/cjs/hooks/useDebounce.cjs.map +1 -1
- package/dist/cjs/hooks/useToast.cjs +105 -84
- package/dist/cjs/hooks/useToast.cjs.map +1 -1
- package/dist/cjs/hooks/useToggle.cjs +15 -9
- package/dist/cjs/hooks/useToggle.cjs.map +1 -1
- package/dist/cjs/index.cjs +172 -170
- package/dist/cjs/primitives/accordion.cjs +38 -61
- package/dist/cjs/primitives/accordion.cjs.map +1 -1
- package/dist/cjs/primitives/alert.cjs +33 -63
- package/dist/cjs/primitives/alert.cjs.map +1 -1
- package/dist/cjs/primitives/avatar.cjs +29 -58
- package/dist/cjs/primitives/avatar.cjs.map +1 -1
- package/dist/cjs/primitives/badge.cjs +26 -27
- package/dist/cjs/primitives/badge.cjs.map +1 -1
- package/dist/cjs/primitives/button.cjs +44 -63
- package/dist/cjs/primitives/button.cjs.map +1 -1
- package/dist/cjs/primitives/calendar.cjs +41 -44
- package/dist/cjs/primitives/calendar.cjs.map +1 -1
- package/dist/cjs/primitives/card.cjs +39 -70
- package/dist/cjs/primitives/card.cjs.map +1 -1
- package/dist/cjs/primitives/checkbox.cjs +22 -45
- package/dist/cjs/primitives/checkbox.cjs.map +1 -1
- package/dist/cjs/primitives/command.cjs +65 -73
- package/dist/cjs/primitives/command.cjs.map +1 -1
- package/dist/cjs/primitives/dialog.cjs +55 -84
- package/dist/cjs/primitives/dialog.cjs.map +1 -1
- package/dist/cjs/primitives/dropdown-menu.cjs +82 -153
- package/dist/cjs/primitives/dropdown-menu.cjs.map +1 -1
- package/dist/cjs/primitives/input.cjs +17 -39
- package/dist/cjs/primitives/input.cjs.map +1 -1
- package/dist/cjs/primitives/label.cjs +19 -38
- package/dist/cjs/primitives/label.cjs.map +1 -1
- package/dist/cjs/primitives/popover.cjs +22 -42
- package/dist/cjs/primitives/popover.cjs.map +1 -1
- package/dist/cjs/primitives/radio-group.cjs +31 -50
- package/dist/cjs/primitives/radio-group.cjs.map +1 -1
- package/dist/cjs/primitives/scroll-area.cjs +33 -55
- package/dist/cjs/primitives/scroll-area.cjs.map +1 -1
- package/dist/cjs/primitives/select.cjs +76 -133
- package/dist/cjs/primitives/select.cjs.map +1 -1
- package/dist/cjs/primitives/separator.cjs +20 -42
- package/dist/cjs/primitives/separator.cjs.map +1 -1
- package/dist/cjs/primitives/skeleton.cjs +10 -12
- package/dist/cjs/primitives/skeleton.cjs.map +1 -1
- package/dist/cjs/primitives/sonner.cjs +16 -20
- package/dist/cjs/primitives/sonner.cjs.map +1 -1
- package/dist/cjs/primitives/switch.cjs +19 -45
- package/dist/cjs/primitives/switch.cjs.map +1 -1
- package/dist/cjs/primitives/table.cjs +52 -61
- package/dist/cjs/primitives/table.cjs.map +1 -1
- package/dist/cjs/primitives/tabs.cjs +30 -62
- package/dist/cjs/primitives/tabs.cjs.map +1 -1
- package/dist/cjs/primitives/textarea.cjs +15 -35
- package/dist/cjs/primitives/textarea.cjs.map +1 -1
- package/dist/cjs/primitives/textbox.cjs +17 -39
- package/dist/cjs/primitives/textbox.cjs.map +1 -1
- package/dist/cjs/primitives/toast.cjs +59 -107
- package/dist/cjs/primitives/toast.cjs.map +1 -1
- package/dist/cjs/primitives/toggle.cjs +39 -55
- package/dist/cjs/primitives/toggle.cjs.map +1 -1
- package/dist/cjs/primitives/tooltip.cjs +21 -41
- package/dist/cjs/primitives/tooltip.cjs.map +1 -1
- package/dist/cjs/utils/cn.cjs +11 -6
- package/dist/cjs/utils/cn.cjs.map +1 -1
- package/dist/components/Accordion/Accordion.js +20 -13
- package/dist/components/Accordion/Accordion.js.map +1 -1
- package/dist/components/Alert/Alert.js +19 -11
- package/dist/components/Alert/Alert.js.map +1 -1
- package/dist/components/Avatar/Avatar.js +19 -11
- package/dist/components/Avatar/Avatar.js.map +1 -1
- package/dist/components/Badge/Badge.d.ts +1 -1
- package/dist/components/Badge/Badge.d.ts.map +1 -1
- package/dist/components/Badge/Badge.js +8 -8
- package/dist/components/Badge/Badge.js.map +1 -1
- package/dist/components/Button/Button.js +37 -48
- package/dist/components/Button/Button.js.map +1 -1
- package/dist/components/Card/Card.js +31 -17
- package/dist/components/Card/Card.js.map +1 -1
- package/dist/components/Checkbox/Checkbox.js +12 -7
- package/dist/components/Checkbox/Checkbox.js.map +1 -1
- package/dist/components/DropdownMenu/DropdownMenu.d.ts +4 -4
- package/dist/components/DropdownMenu/DropdownMenu.d.ts.map +1 -1
- package/dist/components/DropdownMenu/DropdownMenu.js +55 -35
- package/dist/components/DropdownMenu/DropdownMenu.js.map +1 -1
- package/dist/components/Form/Checkbox.js +126 -140
- package/dist/components/Form/Checkbox.js.map +1 -1
- package/dist/components/Form/Form.d.ts +1 -1
- package/dist/components/Form/Form.d.ts.map +1 -1
- package/dist/components/Form/Form.js +104 -103
- package/dist/components/Form/Form.js.map +1 -1
- package/dist/components/Form/{Switch.d.ts → FormSwitch.d.ts} +3 -3
- package/dist/components/Form/FormSwitch.d.ts.map +1 -0
- package/dist/components/Form/FormSwitch.js +126 -0
- package/dist/components/Form/FormSwitch.js.map +1 -0
- package/dist/components/Form/Radio.d.ts +1 -1
- package/dist/components/Form/Radio.d.ts.map +1 -1
- package/dist/components/Form/Radio.js +155 -171
- package/dist/components/Form/Radio.js.map +1 -1
- package/dist/components/Form/Select.d.ts +1 -1
- package/dist/components/Form/Select.d.ts.map +1 -1
- package/dist/components/Form/Select.js +131 -0
- package/dist/components/Form/Select.js.map +1 -0
- package/dist/components/Form/TextArea.js +134 -149
- package/dist/components/Form/TextArea.js.map +1 -1
- package/dist/components/Form/TextBox.js +179 -201
- package/dist/components/Form/TextBox.js.map +1 -1
- package/dist/components/Form/context.d.ts +3 -5
- package/dist/components/Form/context.d.ts.map +1 -1
- package/dist/components/Form/context.js +109 -125
- package/dist/components/Form/context.js.map +1 -1
- package/dist/components/Form/hooks.js +35 -28
- package/dist/components/Form/hooks.js.map +1 -1
- package/dist/components/Form/index.d.ts +4 -4
- package/dist/components/Form/index.d.ts.map +1 -1
- package/dist/components/Form/index.js +11 -0
- package/dist/components/Form/variants.js +15 -14
- package/dist/components/Form/variants.js.map +1 -1
- package/dist/components/Input/Input.js +11 -7
- package/dist/components/Input/Input.js.map +1 -1
- package/dist/components/Label/Label.js +11 -7
- package/dist/components/Label/Label.js.map +1 -1
- package/dist/components/Pagination/Pagination.d.ts +5 -5
- package/dist/components/Pagination/Pagination.js +55 -83
- package/dist/components/Pagination/Pagination.js.map +1 -1
- package/dist/components/Separator/Separator.js +11 -7
- package/dist/components/Separator/Separator.js.map +1 -1
- package/dist/components/Skeleton/Skeleton.d.ts +1 -1
- package/dist/components/Skeleton/Skeleton.d.ts.map +1 -1
- package/dist/components/Skeleton/Skeleton.js +7 -6
- package/dist/components/Skeleton/Skeleton.js.map +1 -1
- package/dist/components/Switch/Switch.d.ts +4 -1
- package/dist/components/Switch/Switch.d.ts.map +1 -1
- package/dist/components/Switch/Switch.js +14 -0
- package/dist/components/Switch/Switch.js.map +1 -0
- package/dist/components/Switch/index.d.ts +1 -0
- package/dist/components/Switch/index.d.ts.map +1 -1
- package/dist/components/Tabs/Tabs.js +23 -13
- package/dist/components/Tabs/Tabs.js.map +1 -1
- package/dist/components/Textarea/Textarea.js +11 -7
- package/dist/components/Textarea/Textarea.js.map +1 -1
- package/dist/components/Tooltip/Tooltip.js +14 -13
- package/dist/components/Tooltip/Tooltip.js.map +1 -1
- package/dist/hooks/useDebounce.js +23 -15
- package/dist/hooks/useDebounce.js.map +1 -1
- package/dist/hooks/useToast.js +103 -69
- package/dist/hooks/useToast.js.map +1 -1
- package/dist/hooks/useToggle.js +16 -10
- package/dist/hooks/useToggle.js.map +1 -1
- package/dist/index.d.ts +6 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +30 -160
- package/dist/primitives/accordion.js +32 -43
- package/dist/primitives/accordion.js.map +1 -1
- package/dist/primitives/alert.js +30 -47
- package/dist/primitives/alert.js.map +1 -1
- package/dist/primitives/avatar.js +22 -38
- package/dist/primitives/avatar.js.map +1 -1
- package/dist/primitives/badge.d.ts +1 -1
- package/dist/primitives/badge.d.ts.map +1 -1
- package/dist/primitives/badge.js +23 -27
- package/dist/primitives/badge.js.map +1 -1
- package/dist/primitives/button.js +41 -46
- package/dist/primitives/button.js.map +1 -1
- package/dist/primitives/calendar.d.ts +1 -1
- package/dist/primitives/calendar.d.ts.map +1 -1
- package/dist/primitives/calendar.js +37 -42
- package/dist/primitives/calendar.js.map +1 -1
- package/dist/primitives/card.js +37 -58
- package/dist/primitives/card.js.map +1 -1
- package/dist/primitives/checkbox.js +17 -25
- package/dist/primitives/checkbox.js.map +1 -1
- package/dist/primitives/command.d.ts +2 -2
- package/dist/primitives/command.d.ts.map +1 -1
- package/dist/primitives/command.js +70 -71
- package/dist/primitives/command.js.map +1 -1
- package/dist/primitives/dialog.d.ts +2 -2
- package/dist/primitives/dialog.js +47 -70
- package/dist/primitives/dialog.js.map +1 -1
- package/dist/primitives/dropdown-menu.d.ts +1 -1
- package/dist/primitives/dropdown-menu.js +70 -140
- package/dist/primitives/dropdown-menu.js.map +1 -1
- package/dist/primitives/input.js +15 -22
- package/dist/primitives/input.js.map +1 -1
- package/dist/primitives/label.js +14 -18
- package/dist/primitives/label.js.map +1 -1
- package/dist/primitives/popover.js +17 -25
- package/dist/primitives/popover.js.map +1 -1
- package/dist/primitives/radio-group.js +25 -30
- package/dist/primitives/radio-group.js.map +1 -1
- package/dist/primitives/scroll-area.js +27 -35
- package/dist/primitives/scroll-area.js.map +1 -1
- package/dist/primitives/select.js +65 -116
- package/dist/primitives/select.js.map +1 -1
- package/dist/primitives/separator.js +15 -22
- package/dist/primitives/separator.js.map +1 -1
- package/dist/primitives/skeleton.d.ts +1 -1
- package/dist/primitives/skeleton.d.ts.map +1 -1
- package/dist/primitives/skeleton.js +10 -12
- package/dist/primitives/skeleton.js.map +1 -1
- package/dist/primitives/sonner.d.ts +1 -1
- package/dist/primitives/sonner.d.ts.map +1 -1
- package/dist/primitives/sonner.js +17 -21
- package/dist/primitives/sonner.js.map +1 -1
- package/dist/primitives/switch.js +14 -25
- package/dist/primitives/switch.js.map +1 -1
- package/dist/primitives/table.js +50 -51
- package/dist/primitives/table.js.map +1 -1
- package/dist/primitives/tabs.js +23 -43
- package/dist/primitives/tabs.js.map +1 -1
- package/dist/primitives/textarea.js +13 -18
- package/dist/primitives/textarea.js.map +1 -1
- package/dist/primitives/textbox.js +15 -22
- package/dist/primitives/textbox.js.map +1 -1
- package/dist/primitives/toast.js +48 -87
- package/dist/primitives/toast.js.map +1 -1
- package/dist/primitives/toggle.js +34 -36
- package/dist/primitives/toggle.js.map +1 -1
- package/dist/primitives/tooltip.js +16 -24
- package/dist/primitives/tooltip.js.map +1 -1
- package/dist/stories/Button.d.ts +1 -1
- package/dist/stories/Button.d.ts.map +1 -1
- package/dist/stories/Button.stories.d.ts +1 -1
- package/dist/stories/Header.d.ts +1 -1
- package/dist/stories/Header.d.ts.map +1 -1
- package/dist/stories/Header.stories.d.ts +1 -1
- package/dist/utils/cn.js +10 -5
- package/dist/utils/cn.js.map +1 -1
- package/package.json +503 -497
- package/dist/cjs/components/Form/Switch.cjs +0 -126
- package/dist/cjs/components/Form/Switch.cjs.map +0 -1
- package/dist/cjs/index.cjs.map +0 -1
- package/dist/components/Form/Switch.d.ts.map +0 -1
- package/dist/components/Form/Switch.js +0 -126
- package/dist/components/Form/Switch.js.map +0 -1
- package/dist/index.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
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"],"
|
|
1
|
+
{"version":3,"file":"Form.cjs","names":[],"sources":["../../../../src/components/Form/Form.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useMemo, type ReactNode } from \"react\";\r\nimport {\r\n useForm,\r\n FormProvider as RHFFormProvider,\r\n type UseFormReturn,\r\n type FieldValues,\r\n type UseFormProps,\r\n type SubmitHandler,\r\n type SubmitErrorHandler,\r\n type Resolver,\r\n type Path,\r\n} from \"react-hook-form\";\r\nimport { zodResolver } from \"@hookform/resolvers/zod\";\r\nimport { z } from \"zod\";\r\nimport { \r\n FormConfigContext, \r\n defaultFormConfig, \r\n useFieldValidationRegistry,\r\n type FormConfig, \r\n type FormContextValue \r\n} from \"./context\";\r\n\r\n/**\r\n * Props for the Form component\r\n */\r\nexport interface FormProps<\r\n TFieldValues extends FieldValues = FieldValues,\r\n TContext = unknown\r\n> extends Omit<React.FormHTMLAttributes<HTMLFormElement>, \"onSubmit\" | \"onError\"> {\r\n /** Base Zod schema for validation (will be extended by field props) */\r\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n schema?: z.ZodType<TFieldValues, any, any>;\r\n /** Default values for the form */\r\n defaultValues?: UseFormProps<TFieldValues, TContext>[\"defaultValues\"];\r\n /** Values to reset the form to */\r\n values?: UseFormProps<TFieldValues, TContext>[\"values\"];\r\n /** Submit handler */\r\n onSubmit?: SubmitHandler<TFieldValues>;\r\n /** Error handler */\r\n onError?: SubmitErrorHandler<TFieldValues>;\r\n /** Form configuration */\r\n config?: FormConfig;\r\n /** Children */\r\n children?: ReactNode;\r\n /** External form instance (for controlled forms) */\r\n form?: UseFormReturn<TFieldValues>;\r\n /** Validation mode */\r\n mode?: UseFormProps<TFieldValues, TContext>[\"mode\"];\r\n /** Revalidation mode */\r\n reValidateMode?: UseFormProps<TFieldValues, TContext>[\"reValidateMode\"];\r\n /** Custom resolver (overrides schema) */\r\n resolver?: Resolver<TFieldValues>;\r\n}\r\n\r\n/**\r\n * Form component that provides form context and validation\r\n * \r\n * Child components like TextBox can register their validation rules automatically.\r\n * \r\n * @example\r\n * ```tsx\r\n * // Validation is automatically built from component props\r\n * <Form onSubmit={handleSubmit} defaultValues={{ username: \"\", email: \"\" }}>\r\n * <TextBox name=\"username\" label=\"Username\" required minLength={3} maxLength={50} />\r\n * <TextBox name=\"email\" label=\"Email\" type=\"email\" required email />\r\n * <Button type=\"submit\">Submit</Button>\r\n * </Form>\r\n * \r\n * // Or with a base schema that gets extended\r\n * const baseSchema = z.object({\r\n * username: z.string(),\r\n * email: z.string(),\r\n * });\r\n * \r\n * <Form schema={baseSchema} onSubmit={handleSubmit}>\r\n * <TextBox name=\"username\" required minLength={3} /> // Adds required + minLength\r\n * <TextBox name=\"email\" required email /> // Adds required + email validation\r\n * </Form>\r\n * ```\r\n */\r\nexport function Form<\r\n TFieldValues extends FieldValues = FieldValues,\r\n TContext = unknown\r\n>({\r\n schema: baseSchema,\r\n defaultValues,\r\n values,\r\n onSubmit,\r\n onError,\r\n config,\r\n children,\r\n form: externalForm,\r\n mode = \"onBlur\",\r\n reValidateMode = \"onChange\",\r\n resolver: customResolver,\r\n ...formProps\r\n}: FormProps<TFieldValues, TContext>) {\r\n const mergedConfig = { ...defaultFormConfig, ...config };\r\n\r\n const {\r\n registerFieldValidation,\r\n unregisterFieldValidation,\r\n getValidationSchema,\r\n } = useFieldValidationRegistry();\r\n\r\n // Stable resolver that reads from fieldsRef at validation time — no re-renders\r\n // needed on field registration, and no race condition with useEffect timing.\r\n const dynamicResolver = useCallback<Resolver<TFieldValues>>(\r\n async (vals, context, options) => {\r\n if (customResolver) {\r\n return customResolver(vals, context, options);\r\n }\r\n const fieldSchema = getValidationSchema();\r\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n let finalSchema: z.ZodType<any, any, any>;\r\n if (baseSchema instanceof z.ZodObject) {\r\n finalSchema = baseSchema.merge(fieldSchema);\r\n } else {\r\n finalSchema = baseSchema ?? fieldSchema;\r\n }\r\n return zodResolver(finalSchema)(vals, context, options);\r\n },\r\n // getValidationSchema reads a ref — always current, intentionally omitted.\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n [baseSchema, customResolver]\r\n );\r\n\r\n const internalForm = useForm<TFieldValues>({\r\n resolver: dynamicResolver,\r\n defaultValues,\r\n values,\r\n mode,\r\n reValidateMode,\r\n });\r\n\r\n const form = externalForm ?? internalForm;\r\n\r\n // Trigger validation for a specific field\r\n const triggerValidation = useCallback(async (name: string) => {\r\n return form.trigger(name as Path<TFieldValues>);\r\n }, [form]);\r\n\r\n const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {\r\n e.preventDefault();\r\n if (onSubmit) {\r\n form.handleSubmit(onSubmit, onError)(e);\r\n }\r\n };\r\n\r\n const contextValue = useMemo<FormContextValue<TFieldValues>>(\r\n () => ({\r\n form,\r\n registerFieldValidation,\r\n unregisterFieldValidation,\r\n getValidationSchema,\r\n triggerValidation,\r\n showInlineErrors: mergedConfig.showInlineErrors,\r\n validateOnBlur: mergedConfig.validateOnBlur,\r\n validateOnChange: mergedConfig.validateOnChange,\r\n size: mergedConfig.size,\r\n layout: mergedConfig.layout,\r\n labelWidth: mergedConfig.labelWidth,\r\n disabled: mergedConfig.disabled,\r\n colon: mergedConfig.colon,\r\n }),\r\n [\r\n form,\r\n registerFieldValidation,\r\n unregisterFieldValidation,\r\n getValidationSchema,\r\n triggerValidation,\r\n mergedConfig.showInlineErrors,\r\n mergedConfig.validateOnBlur,\r\n mergedConfig.validateOnChange,\r\n mergedConfig.size,\r\n mergedConfig.layout,\r\n mergedConfig.labelWidth,\r\n mergedConfig.disabled,\r\n mergedConfig.colon,\r\n ]\r\n );\r\n\r\n return (\r\n <FormConfigContext.Provider value={contextValue as FormContextValue}>\r\n <RHFFormProvider {...form}>\r\n <form\r\n {...formProps}\r\n onSubmit={handleSubmit}\r\n noValidate\r\n >\r\n {children}\r\n </form>\r\n </RHFFormProvider>\r\n </FormConfigContext.Provider>\r\n );\r\n}\r\n\r\nForm.displayName = \"Form\";\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkFA,SAAgB,KAGd,EACA,QAAQ,YACR,eACA,QACA,UACA,SACA,QACA,UACA,MAAM,cACN,OAAO,UACP,iBAAiB,YACjB,UAAU,gBACV,GAAG,aACiC;CACpC,MAAM,eAAe;EAAE,GAAG,gBAAA;EAAmB,GAAG;CAAO;CAEvD,MAAM,EACJ,yBACA,2BACA,wBACE,gBAAA,2BAA2B;CAwB/B,MAAM,gBAAA,GAAA,gBAAA,QAAA,CAAqC;EACzC,WAAA,GAAA,MAAA,YAAA,CApBA,OAAO,MAAM,SAAS,YAAY;GAChC,IAAI,gBACF,OAAO,eAAe,MAAM,SAAS,OAAO;GAE9C,MAAM,cAAc,oBAAoB;GAExC,IAAI;GACJ,IAAI,sBAAsB,IAAA,EAAE,WAC1B,cAAc,WAAW,MAAM,WAAW;QAE1C,cAAc,cAAc;GAE9B,QAAA,GAAA,wBAAA,YAAA,CAAmB,WAAW,CAAC,CAAC,MAAM,SAAS,OAAO;EACxD,GAGA,CAAC,YAAY,cAAc,CAIjB;EACV;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,OAAO,gBAAgB;CAG7B,MAAM,qBAAA,GAAA,MAAA,YAAA,CAAgC,OAAO,SAAiB;EAC5D,OAAO,KAAK,QAAQ,IAA0B;CAChD,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,gBAAgB,MAAwC;EAC5D,EAAE,eAAe;EACjB,IAAI,UACF,KAAK,aAAa,UAAU,OAAO,CAAC,CAAC,CAAC;CAE1C;CAEA,MAAM,gBAAA,GAAA,MAAA,QAAA,QACG;EACL;EACA;EACA;EACA;EACA;EACA,kBAAkB,aAAa;EAC/B,gBAAgB,aAAa;EAC7B,kBAAkB,aAAa;EAC/B,MAAM,aAAa;EACnB,QAAQ,aAAa;EACrB,YAAY,aAAa;EACzB,UAAU,aAAa;EACvB,OAAO,aAAa;CACtB,IACA;EACE;EACA;EACA;EACA;EACA;EACA,aAAa;EACb,aAAa;EACb,aAAa;EACb,aAAa;EACb,aAAa;EACb,aAAa;EACb,aAAa;EACb,aAAa;CACf,CACF;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,gBAAA,kBAAkB,UAAnB;EAA4B,OAAO;YACjC,iBAAA,GAAA,kBAAA,IAAA,CAAC,gBAAA,cAAD;GAAiB,GAAI;aACnB,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IACE,GAAI;IACJ,UAAU;IACV,YAAA;IAEC;GACG,CAAA;EACS,CAAA;CACS,CAAA;AAEhC;AAEA,KAAK,cAAc"}
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
"use client";
|
|
3
|
+
const require_cn = require("../../utils/cn.cjs");
|
|
4
|
+
const require_context = require("./context.cjs");
|
|
5
|
+
const require_label = require("../../primitives/label.cjs");
|
|
6
|
+
const require_switch = require("../../primitives/switch.cjs");
|
|
7
|
+
let react = require("react");
|
|
8
|
+
let class_variance_authority = require("class-variance-authority");
|
|
9
|
+
let react_jsx_runtime = require("react/jsx-runtime");
|
|
10
|
+
let react_hook_form = require("react-hook-form");
|
|
11
|
+
//#region src/components/Form/FormSwitch.tsx
|
|
12
|
+
var switchSizeVariants = (0, class_variance_authority.cva)("", {
|
|
13
|
+
variants: { size: {
|
|
14
|
+
sm: "h-5 w-9",
|
|
15
|
+
md: "h-6 w-11",
|
|
16
|
+
lg: "h-7 w-14"
|
|
17
|
+
} },
|
|
18
|
+
defaultVariants: { size: "md" }
|
|
19
|
+
});
|
|
20
|
+
var labelVariants = (0, class_variance_authority.cva)("text-sm font-medium cursor-pointer select-none", {
|
|
21
|
+
variants: { disabled: {
|
|
22
|
+
true: "cursor-not-allowed opacity-50",
|
|
23
|
+
false: ""
|
|
24
|
+
} },
|
|
25
|
+
defaultVariants: { disabled: false }
|
|
26
|
+
});
|
|
27
|
+
/**
|
|
28
|
+
* Switch component with form integration
|
|
29
|
+
*
|
|
30
|
+
* This is a wrapper around the shadcn/ui Switch primitive that adds:
|
|
31
|
+
* - Form integration with react-hook-form
|
|
32
|
+
* - Automatic validation registration
|
|
33
|
+
* - Label, helper text, and error message support
|
|
34
|
+
* - Checked/unchecked text display
|
|
35
|
+
*
|
|
36
|
+
* @example
|
|
37
|
+
* ```tsx
|
|
38
|
+
* // Inside a Form component
|
|
39
|
+
* <FormSwitch name="notifications" label="Enable notifications" />
|
|
40
|
+
* <FormSwitch name="terms" label="Accept terms" required="You must accept the terms" />
|
|
41
|
+
* <FormSwitch name="darkMode" label="Dark mode" checkedText="On" uncheckedText="Off" />
|
|
42
|
+
* ```
|
|
43
|
+
*/
|
|
44
|
+
function FormSwitchInner({ name, label, helperText, showError = true, error: customError, size, className, disabled, id: providedId, control: externalControl, checkedText, uncheckedText, required, validate, ...props }, ref) {
|
|
45
|
+
const generatedId = (0, react.useId)();
|
|
46
|
+
const inputId = providedId ?? generatedId;
|
|
47
|
+
const formConfigContext = (0, react.useContext)(require_context.FormConfigContext);
|
|
48
|
+
const formConfig = formConfigContext ?? {};
|
|
49
|
+
const rhfContext = (0, react_hook_form.useFormContext)();
|
|
50
|
+
const control = externalControl ?? rhfContext?.control;
|
|
51
|
+
(0, react.useEffect)(() => {
|
|
52
|
+
if (formConfigContext?.registerFieldValidation) {
|
|
53
|
+
const rules = {};
|
|
54
|
+
if (required !== void 0) rules.required = required;
|
|
55
|
+
if (validate !== void 0) rules.validate = validate;
|
|
56
|
+
formConfigContext.registerFieldValidation({
|
|
57
|
+
name,
|
|
58
|
+
type: "boolean",
|
|
59
|
+
rules
|
|
60
|
+
});
|
|
61
|
+
return () => {
|
|
62
|
+
formConfigContext.unregisterFieldValidation(name);
|
|
63
|
+
};
|
|
64
|
+
}
|
|
65
|
+
}, [
|
|
66
|
+
formConfigContext,
|
|
67
|
+
name,
|
|
68
|
+
required,
|
|
69
|
+
validate
|
|
70
|
+
]);
|
|
71
|
+
const { field, fieldState } = (0, react_hook_form.useController)({
|
|
72
|
+
name,
|
|
73
|
+
control
|
|
74
|
+
});
|
|
75
|
+
const fieldError = fieldState.error?.message;
|
|
76
|
+
const errorMessage = customError ?? fieldError;
|
|
77
|
+
const hasError = !!errorMessage;
|
|
78
|
+
const effectiveSize = size ?? formConfig.size ?? "md";
|
|
79
|
+
const effectiveDisabled = disabled ?? formConfig.disabled;
|
|
80
|
+
const isChecked = field.value ?? false;
|
|
81
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
82
|
+
className: "space-y-1.5",
|
|
83
|
+
children: [
|
|
84
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
85
|
+
className: "flex items-center gap-3",
|
|
86
|
+
children: [
|
|
87
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_switch.Switch, {
|
|
88
|
+
...props,
|
|
89
|
+
ref,
|
|
90
|
+
id: inputId,
|
|
91
|
+
checked: isChecked,
|
|
92
|
+
onCheckedChange: (checked) => field.onChange(checked),
|
|
93
|
+
disabled: effectiveDisabled,
|
|
94
|
+
"aria-labelledby": label ? `${inputId}-label` : void 0,
|
|
95
|
+
className: require_cn.cn(switchSizeVariants({ size: effectiveSize }), className)
|
|
96
|
+
}),
|
|
97
|
+
(checkedText || uncheckedText) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
|
|
98
|
+
className: "text-sm text-muted-foreground",
|
|
99
|
+
children: isChecked ? checkedText : uncheckedText
|
|
100
|
+
}),
|
|
101
|
+
label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_label.Label, {
|
|
102
|
+
id: `${inputId}-label`,
|
|
103
|
+
htmlFor: inputId,
|
|
104
|
+
className: labelVariants({ disabled: effectiveDisabled }),
|
|
105
|
+
children: label
|
|
106
|
+
})
|
|
107
|
+
]
|
|
108
|
+
}),
|
|
109
|
+
showError && hasError && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
|
|
110
|
+
className: "text-sm text-destructive",
|
|
111
|
+
role: "alert",
|
|
112
|
+
children: errorMessage
|
|
113
|
+
}),
|
|
114
|
+
helperText && !hasError && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
|
|
115
|
+
className: "text-sm text-muted-foreground",
|
|
116
|
+
children: helperText
|
|
117
|
+
})
|
|
118
|
+
]
|
|
119
|
+
});
|
|
120
|
+
}
|
|
121
|
+
var FormSwitch = (0, react.forwardRef)(FormSwitchInner);
|
|
122
|
+
FormSwitch.displayName = "FormSwitch";
|
|
123
|
+
//#endregion
|
|
124
|
+
exports.FormSwitch = FormSwitch;
|
|
125
|
+
|
|
126
|
+
//# sourceMappingURL=FormSwitch.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FormSwitch.cjs","names":[],"sources":["../../../../src/components/Form/FormSwitch.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { forwardRef, useId, useContext, useEffect } from \"react\";\r\nimport type { ReactNode, ComponentPropsWithoutRef } from \"react\";\r\nimport { useController, useFormContext as useRHFFormContext, type FieldValues, type FieldPath, type Control } from \"react-hook-form\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { cn } from \"../../utils/cn\";\r\nimport { FormConfigContext, type FormConfig, type FieldValidationRules } from \"../Form/context\";\r\nimport { Switch as ShadcnSwitch } from \"../../primitives/switch\";\r\nimport { Label } from \"../../primitives/label\";\r\nimport type * as SwitchPrimitives from \"@radix-ui/react-switch\";\r\n\r\nconst switchSizeVariants = cva(\r\n \"\",\r\n {\r\n variants: {\r\n size: {\r\n sm: \"h-5 w-9\",\r\n md: \"h-6 w-11\",\r\n lg: \"h-7 w-14\",\r\n },\r\n },\r\n defaultVariants: {\r\n size: \"md\",\r\n },\r\n }\r\n);\r\n\r\nconst labelVariants = cva(\r\n \"text-sm font-medium cursor-pointer select-none\",\r\n {\r\n variants: {\r\n disabled: {\r\n true: \"cursor-not-allowed opacity-50\",\r\n false: \"\",\r\n },\r\n },\r\n defaultVariants: {\r\n disabled: false,\r\n },\r\n }\r\n);\r\n\r\nexport interface FormSwitchProps<\r\n TFieldValues extends FieldValues = FieldValues,\r\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n> extends Omit<ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>, \"name\" | \"checked\" | \"onCheckedChange\" | \"required\">,\r\n VariantProps<typeof switchSizeVariants> {\r\n /** Field name - required for form integration */\r\n name: TName;\r\n /** Label text for the switch */\r\n label?: ReactNode;\r\n /** Helper text displayed below the switch */\r\n helperText?: string;\r\n /** Whether to show the error message */\r\n showError?: boolean;\r\n /** Custom error message (overrides form error) */\r\n error?: string;\r\n /** External control (for use outside Form) */\r\n control?: Control<TFieldValues>;\r\n /** Text to show when checked */\r\n checkedText?: ReactNode;\r\n /** Text to show when unchecked */\r\n uncheckedText?: ReactNode;\r\n\r\n // Validation props\r\n /** Field is required (must be on) */\r\n required?: boolean | string;\r\n /** Custom validation function */\r\n validate?: (value: unknown) => boolean | string | Promise<boolean | string>;\r\n}\r\n\r\n/**\r\n * Switch component with form integration\r\n *\r\n * This is a wrapper around the shadcn/ui Switch primitive that adds:\r\n * - Form integration with react-hook-form\r\n * - Automatic validation registration\r\n * - Label, helper text, and error message support\r\n * - Checked/unchecked text display\r\n *\r\n * @example\r\n * ```tsx\r\n * // Inside a Form component\r\n * <FormSwitch name=\"notifications\" label=\"Enable notifications\" />\r\n * <FormSwitch name=\"terms\" label=\"Accept terms\" required=\"You must accept the terms\" />\r\n * <FormSwitch name=\"darkMode\" label=\"Dark mode\" checkedText=\"On\" uncheckedText=\"Off\" />\r\n * ```\r\n */\r\nfunction FormSwitchInner<\r\n TFieldValues extends FieldValues = FieldValues,\r\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n>(\r\n {\r\n name,\r\n label,\r\n helperText,\r\n showError = true,\r\n error: customError,\r\n size,\r\n className,\r\n disabled,\r\n id: providedId,\r\n control: externalControl,\r\n checkedText,\r\n uncheckedText,\r\n // Validation props\r\n required,\r\n validate,\r\n ...props\r\n }: FormSwitchProps<TFieldValues, TName>,\r\n ref: React.ForwardedRef<React.ElementRef<typeof SwitchPrimitives.Root>>\r\n) {\r\n const generatedId = useId();\r\n const inputId = providedId ?? generatedId;\r\n\r\n // Try to get form context\r\n const formConfigContext = useContext(FormConfigContext);\r\n const formConfig: FormConfig = formConfigContext ?? {};\r\n\r\n // Get form context from react-hook-form\r\n const rhfContext = useRHFFormContext<TFieldValues>();\r\n const control = externalControl ?? rhfContext?.control;\r\n\r\n // Register validation rules with the form\r\n useEffect(() => {\r\n if (formConfigContext?.registerFieldValidation) {\r\n const rules: FieldValidationRules = {};\r\n\r\n if (required !== undefined) rules.required = required;\r\n if (validate !== undefined) rules.validate = validate;\r\n\r\n formConfigContext.registerFieldValidation({\r\n name: name as string,\r\n type: \"boolean\",\r\n rules,\r\n });\r\n\r\n return () => {\r\n formConfigContext.unregisterFieldValidation(name as string);\r\n };\r\n }\r\n }, [formConfigContext, name, required, validate]);\r\n\r\n // Use controller for form integration\r\n const { field, fieldState } = useController<TFieldValues, TName>({\r\n name,\r\n control,\r\n });\r\n\r\n const fieldError = fieldState.error?.message;\r\n const errorMessage = customError ?? fieldError;\r\n const hasError = !!errorMessage;\r\n\r\n // Merge sizes - prop takes precedence over form config\r\n const effectiveSize = size ?? formConfig.size ?? \"md\";\r\n const effectiveDisabled = disabled ?? formConfig.disabled;\r\n const isChecked = field.value ?? false;\r\n\r\n return (\r\n <div className=\"space-y-1.5\">\r\n <div className=\"flex items-center gap-3\">\r\n <ShadcnSwitch\r\n {...props}\r\n ref={ref}\r\n id={inputId}\r\n checked={isChecked}\r\n onCheckedChange={(checked) => field.onChange(checked)}\r\n disabled={effectiveDisabled}\r\n aria-labelledby={label ? `${inputId}-label` : undefined}\r\n className={cn(\r\n switchSizeVariants({ size: effectiveSize }),\r\n className\r\n )}\r\n />\r\n\r\n {(checkedText || uncheckedText) && (\r\n <span className=\"text-sm text-muted-foreground\">\r\n {isChecked ? checkedText : uncheckedText}\r\n </span>\r\n )}\r\n\r\n {label && (\r\n <Label\r\n id={`${inputId}-label`}\r\n htmlFor={inputId}\r\n className={labelVariants({ disabled: effectiveDisabled })}\r\n >\r\n {label}\r\n </Label>\r\n )}\r\n </div>\r\n\r\n {showError && hasError && (\r\n <p className=\"text-sm text-destructive\" role=\"alert\">\r\n {errorMessage}\r\n </p>\r\n )}\r\n\r\n {helperText && !hasError && (\r\n <p className=\"text-sm text-muted-foreground\">\r\n {helperText}\r\n </p>\r\n )}\r\n </div>\r\n );\r\n}\r\n\r\nexport const FormSwitch = forwardRef(FormSwitchInner) as <\r\n TFieldValues extends FieldValues = FieldValues,\r\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n>(\r\n props: FormSwitchProps<TFieldValues, TName> & { ref?: React.ForwardedRef<React.ElementRef<typeof SwitchPrimitives.Root>> }\r\n) => React.ReactElement;\r\n\r\n(FormSwitch as React.FC).displayName = \"FormSwitch\";\r\n"],"mappings":";;;;;;;;;;;AAYA,IAAM,sBAAA,GAAA,yBAAA,IAAA,CACJ,IACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CACF;AAEA,IAAM,iBAAA,GAAA,yBAAA,IAAA,CACJ,kDACA;CACE,UAAU,EACR,UAAU;EACR,MAAM;EACN,OAAO;CACT,EACF;CACA,iBAAiB,EACf,UAAU,MACZ;AACF,CACF;;;;;;;;;;;;;;;;;;AAgDA,SAAS,gBAIP,EACE,MACA,OACA,YACA,YAAY,MACZ,OAAO,aACP,MACA,WACA,UACA,IAAI,YACJ,SAAS,iBACT,aACA,eAEA,UACA,UACA,GAAG,SAEL,KACA;CACA,MAAM,eAAA,GAAA,MAAA,MAAA,CAAoB;CAC1B,MAAM,UAAU,cAAc;CAG9B,MAAM,qBAAA,GAAA,MAAA,WAAA,CAA+B,gBAAA,iBAAiB;CACtD,MAAM,aAAyB,qBAAqB,CAAC;CAGrD,MAAM,cAAA,GAAA,gBAAA,eAAA,CAA6C;CACnD,MAAM,UAAU,mBAAmB,YAAY;CAG/C,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,IAAI,mBAAmB,yBAAyB;GAC9C,MAAM,QAA8B,CAAC;GAErC,IAAI,aAAa,KAAA,GAAW,MAAM,WAAW;GAC7C,IAAI,aAAa,KAAA,GAAW,MAAM,WAAW;GAE7C,kBAAkB,wBAAwB;IAClC;IACN,MAAM;IACN;GACF,CAAC;GAED,aAAa;IACX,kBAAkB,0BAA0B,IAAc;GAC5D;EACF;CACF,GAAG;EAAC;EAAmB;EAAM;EAAU;CAAQ,CAAC;CAGhD,MAAM,EAAE,OAAO,gBAAA,GAAA,gBAAA,cAAA,CAAkD;EAC/D;EACA;CACF,CAAC;CAED,MAAM,aAAa,WAAW,OAAO;CACrC,MAAM,eAAe,eAAe;CACpC,MAAM,WAAW,CAAC,CAAC;CAGnB,MAAM,gBAAgB,QAAQ,WAAW,QAAQ;CACjD,MAAM,oBAAoB,YAAY,WAAW;CACjD,MAAM,YAAY,MAAM,SAAS;CAEjC,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,WAAU;YAAf;GACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;IAAK,WAAU;cAAf;KACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,eAAA,QAAD;MACE,GAAI;MACC;MACL,IAAI;MACJ,SAAS;MACT,kBAAkB,YAAY,MAAM,SAAS,OAAO;MACpD,UAAU;MACV,mBAAiB,QAAQ,GAAG,QAAQ,UAAU,KAAA;MAC9C,WAAW,WAAA,GACT,mBAAmB,EAAE,MAAM,cAAc,CAAC,GAC1C,SACF;KACD,CAAA;MAEC,eAAe,kBACf,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;MAAM,WAAU;gBACb,YAAY,cAAc;KACvB,CAAA;KAGP,SACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,cAAA,OAAD;MACE,IAAI,GAAG,QAAQ;MACf,SAAS;MACT,WAAW,cAAc,EAAE,UAAU,kBAAkB,CAAC;gBAEvD;KACI,CAAA;IAEN;;GAEJ,aAAa,YACZ,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;IAAG,WAAU;IAA2B,MAAK;cAC1C;GACA,CAAA;GAGJ,cAAc,CAAC,YACd,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;IAAG,WAAU;cACV;GACA,CAAA;EAEF;;AAET;AAEA,IAAa,cAAA,GAAA,MAAA,WAAA,CAAwB,eAAe;AAOpD,WAAyB,cAAc"}
|
|
@@ -1,179 +1,164 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use
|
|
3
|
-
|
|
4
|
-
const
|
|
5
|
-
const
|
|
6
|
-
const
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
);
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
showError && hasError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-destructive", role: "alert", children: errorMessage }),
|
|
130
|
-
helperText && !hasError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: helperText })
|
|
131
|
-
] });
|
|
2
|
+
"use client";
|
|
3
|
+
const require_cn = require("../../utils/cn.cjs");
|
|
4
|
+
const require_context = require("./context.cjs");
|
|
5
|
+
const require_label = require("../../primitives/label.cjs");
|
|
6
|
+
const require_radio_group = require("../../primitives/radio-group.cjs");
|
|
7
|
+
let react = require("react");
|
|
8
|
+
let class_variance_authority = require("class-variance-authority");
|
|
9
|
+
let react_jsx_runtime = require("react/jsx-runtime");
|
|
10
|
+
let react_hook_form = require("react-hook-form");
|
|
11
|
+
//#region src/components/Form/Radio.tsx
|
|
12
|
+
var radioSizeVariants = (0, class_variance_authority.cva)("", {
|
|
13
|
+
variants: { size: {
|
|
14
|
+
sm: "h-4 w-4",
|
|
15
|
+
md: "h-5 w-5",
|
|
16
|
+
lg: "h-6 w-6"
|
|
17
|
+
} },
|
|
18
|
+
defaultVariants: { size: "md" }
|
|
19
|
+
});
|
|
20
|
+
var labelVariants = (0, class_variance_authority.cva)("text-sm font-medium cursor-pointer select-none", {
|
|
21
|
+
variants: { disabled: {
|
|
22
|
+
true: "cursor-not-allowed opacity-50",
|
|
23
|
+
false: ""
|
|
24
|
+
} },
|
|
25
|
+
defaultVariants: { disabled: false }
|
|
26
|
+
});
|
|
27
|
+
var RadioGroupContext = (0, react.createContext)(null);
|
|
28
|
+
/**
|
|
29
|
+
* RadioGroup component with form integration
|
|
30
|
+
*
|
|
31
|
+
* This is a wrapper around the shadcn/ui RadioGroup primitive that adds:
|
|
32
|
+
* - Form integration with react-hook-form
|
|
33
|
+
* - Automatic validation registration
|
|
34
|
+
* - Label, helper text, and error message support
|
|
35
|
+
*
|
|
36
|
+
* @example
|
|
37
|
+
* ```tsx
|
|
38
|
+
* // Inside a Form component
|
|
39
|
+
* <RadioGroup
|
|
40
|
+
* name="gender"
|
|
41
|
+
* label="Gender"
|
|
42
|
+
* required
|
|
43
|
+
* options={[
|
|
44
|
+
* { label: "Male", value: "male" },
|
|
45
|
+
* { label: "Female", value: "female" },
|
|
46
|
+
* { label: "Other", value: "other" },
|
|
47
|
+
* ]}
|
|
48
|
+
* />
|
|
49
|
+
* ```
|
|
50
|
+
*/
|
|
51
|
+
function RadioGroup({ name, label, helperText, showError = true, error: customError, size, variant, options = [], direction = "vertical", control: externalControl, children, disabled, className, required, validate }) {
|
|
52
|
+
const generatedId = (0, react.useId)();
|
|
53
|
+
const formConfigContext = (0, react.useContext)(require_context.FormConfigContext);
|
|
54
|
+
const formConfig = formConfigContext ?? {};
|
|
55
|
+
const rhfContext = (0, react_hook_form.useFormContext)();
|
|
56
|
+
const control = externalControl ?? rhfContext?.control;
|
|
57
|
+
(0, react.useEffect)(() => {
|
|
58
|
+
if (formConfigContext?.registerFieldValidation) {
|
|
59
|
+
const rules = {};
|
|
60
|
+
if (required !== void 0) rules.required = required;
|
|
61
|
+
if (validate !== void 0) rules.validate = validate;
|
|
62
|
+
formConfigContext.registerFieldValidation({
|
|
63
|
+
name,
|
|
64
|
+
type: "string",
|
|
65
|
+
rules
|
|
66
|
+
});
|
|
67
|
+
return () => {
|
|
68
|
+
formConfigContext.unregisterFieldValidation(name);
|
|
69
|
+
};
|
|
70
|
+
}
|
|
71
|
+
}, [
|
|
72
|
+
formConfigContext,
|
|
73
|
+
name,
|
|
74
|
+
required,
|
|
75
|
+
validate
|
|
76
|
+
]);
|
|
77
|
+
const { field, fieldState } = (0, react_hook_form.useController)({
|
|
78
|
+
name,
|
|
79
|
+
control
|
|
80
|
+
});
|
|
81
|
+
const fieldError = fieldState.error?.message;
|
|
82
|
+
const errorMessage = customError ?? fieldError;
|
|
83
|
+
const hasError = !!errorMessage;
|
|
84
|
+
const effectiveSize = size ?? formConfig.size ?? "md";
|
|
85
|
+
const effectiveDisabled = disabled ?? formConfig.disabled;
|
|
86
|
+
const effectiveVariant = hasError ? "error" : variant;
|
|
87
|
+
const contextValue = {
|
|
88
|
+
name,
|
|
89
|
+
value: field.value,
|
|
90
|
+
onChange: field.onChange,
|
|
91
|
+
disabled: effectiveDisabled,
|
|
92
|
+
size: effectiveSize
|
|
93
|
+
};
|
|
94
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
95
|
+
className: require_cn.cn("space-y-2", className),
|
|
96
|
+
children: [
|
|
97
|
+
label && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_label.Label, {
|
|
98
|
+
className: require_cn.cn("block", required && "after:content-['*'] after:ml-0.5 after:text-destructive"),
|
|
99
|
+
children: [label, formConfig.colon && ":"]
|
|
100
|
+
}),
|
|
101
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RadioGroupContext.Provider, {
|
|
102
|
+
value: contextValue,
|
|
103
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_radio_group.RadioGroup, {
|
|
104
|
+
value: field.value?.toString(),
|
|
105
|
+
onValueChange: (value) => field.onChange(value),
|
|
106
|
+
disabled: effectiveDisabled,
|
|
107
|
+
"aria-labelledby": label ? `${generatedId}-label` : void 0,
|
|
108
|
+
className: require_cn.cn(direction === "horizontal" && "flex flex-row gap-4", direction === "vertical" && "flex flex-col gap-2"),
|
|
109
|
+
children: children ?? options.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RadioItem, {
|
|
110
|
+
value: option.value,
|
|
111
|
+
disabled: option.disabled,
|
|
112
|
+
size: effectiveSize,
|
|
113
|
+
variant: effectiveVariant,
|
|
114
|
+
children: option.label
|
|
115
|
+
}, option.value))
|
|
116
|
+
})
|
|
117
|
+
}),
|
|
118
|
+
showError && hasError && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
|
|
119
|
+
className: "text-sm text-destructive",
|
|
120
|
+
role: "alert",
|
|
121
|
+
children: errorMessage
|
|
122
|
+
}),
|
|
123
|
+
helperText && !hasError && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
|
|
124
|
+
className: "text-sm text-muted-foreground",
|
|
125
|
+
children: helperText
|
|
126
|
+
})
|
|
127
|
+
]
|
|
128
|
+
});
|
|
132
129
|
}
|
|
133
130
|
RadioGroup.displayName = "RadioGroup";
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
variant === "error" && "border-destructive",
|
|
161
|
-
className
|
|
162
|
-
)
|
|
163
|
-
}
|
|
164
|
-
),
|
|
165
|
-
children && /* @__PURE__ */ jsxRuntime.jsx(
|
|
166
|
-
label.Label,
|
|
167
|
-
{
|
|
168
|
-
htmlFor: inputId,
|
|
169
|
-
className: labelVariants({ disabled: effectiveDisabled }),
|
|
170
|
-
children
|
|
171
|
-
}
|
|
172
|
-
)
|
|
173
|
-
] });
|
|
131
|
+
/**
|
|
132
|
+
* RadioItem component - must be used within RadioGroup
|
|
133
|
+
*
|
|
134
|
+
* This is a wrapper around the shadcn/ui RadioGroupItem primitive
|
|
135
|
+
*/
|
|
136
|
+
function RadioItemInner({ value, children, size, variant, className, disabled, id: providedId, ...props }, ref) {
|
|
137
|
+
const generatedId = (0, react.useId)();
|
|
138
|
+
const inputId = providedId ?? generatedId;
|
|
139
|
+
const groupContext = (0, react.useContext)(RadioGroupContext);
|
|
140
|
+
const effectiveSize = size ?? groupContext?.size ?? "md";
|
|
141
|
+
const effectiveDisabled = disabled ?? groupContext?.disabled;
|
|
142
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
143
|
+
className: "flex items-center gap-2",
|
|
144
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_radio_group.RadioGroupItem, {
|
|
145
|
+
...props,
|
|
146
|
+
ref,
|
|
147
|
+
id: inputId,
|
|
148
|
+
value: value.toString(),
|
|
149
|
+
disabled: effectiveDisabled,
|
|
150
|
+
className: require_cn.cn(radioSizeVariants({ size: effectiveSize }), variant === "error" && "border-destructive", className)
|
|
151
|
+
}), children && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_label.Label, {
|
|
152
|
+
htmlFor: inputId,
|
|
153
|
+
className: labelVariants({ disabled: effectiveDisabled }),
|
|
154
|
+
children
|
|
155
|
+
})]
|
|
156
|
+
});
|
|
174
157
|
}
|
|
175
|
-
|
|
158
|
+
var RadioItem = (0, react.forwardRef)(RadioItemInner);
|
|
176
159
|
RadioItem.displayName = "RadioItem";
|
|
160
|
+
//#endregion
|
|
177
161
|
exports.RadioGroup = RadioGroup;
|
|
178
162
|
exports.RadioItem = RadioItem;
|
|
179
|
-
|
|
163
|
+
|
|
164
|
+
//# sourceMappingURL=Radio.cjs.map
|
|
@@ -1 +1 @@
|
|
|
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
|
+
{"version":3,"file":"Radio.cjs","names":[],"sources":["../../../../src/components/Form/Radio.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, useId, useContext, createContext, useEffect } from \"react\";\nimport type { ReactNode, ComponentPropsWithoutRef } from \"react\";\nimport { useController, useFormContext as useRHFFormContext, type FieldValues, type FieldPath, type Control } from \"react-hook-form\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../utils/cn\";\nimport { FormConfigContext, type FormConfig, type FieldValidationRules } from \"../Form/context\";\nimport { RadioGroup as ShadcnRadioGroup, RadioGroupItem as ShadcnRadioGroupItem } from \"../../primitives/radio-group\";\nimport { Label } from \"../../primitives/label\";\nimport type * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\";\n\nconst radioSizeVariants = cva(\n \"\",\n {\n variants: {\n size: {\n sm: \"h-4 w-4\",\n md: \"h-5 w-5\",\n lg: \"h-6 w-6\",\n },\n },\n defaultVariants: {\n size: \"md\",\n },\n }\n);\n\nconst labelVariants = cva(\n \"text-sm font-medium cursor-pointer select-none\",\n {\n variants: {\n disabled: {\n true: \"cursor-not-allowed opacity-50\",\n false: \"\",\n },\n },\n defaultVariants: {\n disabled: false,\n },\n }\n);\n\n// Radio Group Context\ninterface RadioGroupContextValue {\n name: string;\n value: string | number | undefined;\n onChange: (value: string | number) => void;\n disabled?: boolean;\n size?: \"sm\" | \"md\" | \"lg\";\n}\n\nconst RadioGroupContext = createContext<RadioGroupContextValue | null>(null);\n\nexport interface RadioOption {\n label: ReactNode;\n value: string | number;\n disabled?: boolean;\n}\n\nexport interface RadioGroupProps<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n> extends VariantProps<typeof radioSizeVariants> {\n /** Field name - required for form integration */\n name: TName;\n /** Label text for the radio group */\n label?: string;\n /** Helper text displayed below the radio group */\n helperText?: string;\n /** Whether to show the error message */\n showError?: boolean;\n /** Custom error message (overrides form error) */\n error?: string;\n /** Options for the radio group */\n options?: RadioOption[];\n /** Layout direction */\n direction?: \"horizontal\" | \"vertical\";\n /** External control (for use outside Form) */\n control?: Control<TFieldValues>;\n /** Children (alternative to options prop) */\n children?: ReactNode;\n /** Disabled state */\n disabled?: boolean;\n /** Additional class name */\n className?: string;\n /** Variant style */\n variant?: \"default\" | \"error\";\n \n // Validation props\n /** Field is required */\n required?: boolean | string;\n /** Custom validation function */\n validate?: (value: unknown) => boolean | string | Promise<boolean | string>;\n}\n\n/**\n * RadioGroup component with form integration\n * \n * This is a wrapper around the shadcn/ui RadioGroup primitive that adds:\n * - Form integration with react-hook-form\n * - Automatic validation registration\n * - Label, helper text, and error message support\n * \n * @example\n * ```tsx\n * // Inside a Form component\n * <RadioGroup \n * name=\"gender\" \n * label=\"Gender\"\n * required\n * options={[\n * { label: \"Male\", value: \"male\" },\n * { label: \"Female\", value: \"female\" },\n * { label: \"Other\", value: \"other\" },\n * ]} \n * />\n * ```\n */\nexport function RadioGroup<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>({\n name,\n label,\n helperText,\n showError = true,\n error: customError,\n size,\n variant,\n options = [],\n direction = \"vertical\",\n control: externalControl,\n children,\n disabled,\n className,\n // Validation props\n required,\n validate,\n}: RadioGroupProps<TFieldValues, TName>) {\n const generatedId = useId();\n \n // Try to get form context\n const formConfigContext = useContext(FormConfigContext);\n const formConfig: FormConfig = formConfigContext ?? {};\n \n // Get form context from react-hook-form\n const rhfContext = useRHFFormContext<TFieldValues>();\n const control = externalControl ?? rhfContext?.control;\n\n // Register validation rules with the form\n useEffect(() => {\n if (formConfigContext?.registerFieldValidation) {\n const rules: FieldValidationRules = {};\n \n if (required !== undefined) rules.required = required;\n if (validate !== undefined) rules.validate = validate;\n\n formConfigContext.registerFieldValidation({\n name: name as string,\n type: \"string\",\n rules,\n });\n\n return () => {\n formConfigContext.unregisterFieldValidation(name as string);\n };\n }\n }, [formConfigContext, name, required, validate]);\n\n // Use controller for form integration\n const { field, fieldState } = useController<TFieldValues, TName>({\n name,\n control,\n });\n\n const fieldError = fieldState.error?.message;\n const errorMessage = customError ?? fieldError;\n const hasError = !!errorMessage;\n \n // Merge sizes - prop takes precedence over form config\n const effectiveSize = size ?? formConfig.size ?? \"md\";\n const effectiveDisabled = disabled ?? formConfig.disabled;\n const effectiveVariant = hasError ? \"error\" : variant;\n\n const contextValue: RadioGroupContextValue = {\n name: name as string,\n value: field.value,\n onChange: field.onChange,\n disabled: effectiveDisabled,\n size: effectiveSize,\n };\n\n return (\n <div className={cn(\"space-y-2\", className)}>\n {label && (\n <Label className={cn(\n \"block\",\n required && \"after:content-['*'] after:ml-0.5 after:text-destructive\"\n )}>\n {label}\n {formConfig.colon && \":\"}\n </Label>\n )}\n \n <RadioGroupContext.Provider value={contextValue}>\n <ShadcnRadioGroup\n value={field.value?.toString()}\n onValueChange={(value) => field.onChange(value)}\n disabled={effectiveDisabled}\n aria-labelledby={label ? `${generatedId}-label` : undefined}\n className={cn(\n direction === \"horizontal\" && \"flex flex-row gap-4\",\n direction === \"vertical\" && \"flex flex-col gap-2\"\n )}\n >\n {children ?? options.map((option) => (\n <RadioItem\n key={option.value}\n value={option.value}\n disabled={option.disabled}\n size={effectiveSize}\n variant={effectiveVariant}\n >\n {option.label}\n </RadioItem>\n ))}\n </ShadcnRadioGroup>\n </RadioGroupContext.Provider>\n\n {showError && hasError && (\n <p className=\"text-sm text-destructive\" role=\"alert\">\n {errorMessage}\n </p>\n )}\n \n {helperText && !hasError && (\n <p className=\"text-sm text-muted-foreground\">\n {helperText}\n </p>\n )}\n </div>\n );\n}\n\nRadioGroup.displayName = \"RadioGroup\";\n\nexport interface RadioItemProps extends Omit<ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>, \"value\">,\n VariantProps<typeof radioSizeVariants> {\n /** Value for this radio option */\n value: string | number;\n /** Label for this radio option */\n children?: ReactNode;\n /** Variant style */\n variant?: \"default\" | \"error\";\n}\n\n/**\n * RadioItem component - must be used within RadioGroup\n * \n * This is a wrapper around the shadcn/ui RadioGroupItem primitive\n */\nfunction RadioItemInner(\n {\n value,\n children,\n size,\n variant,\n className,\n disabled,\n id: providedId,\n ...props\n }: RadioItemProps,\n ref: React.ForwardedRef<React.ElementRef<typeof RadioGroupPrimitive.Item>>\n) {\n const generatedId = useId();\n const inputId = providedId ?? generatedId;\n \n const groupContext = useContext(RadioGroupContext);\n \n const effectiveSize = size ?? groupContext?.size ?? \"md\";\n const effectiveDisabled = disabled ?? groupContext?.disabled;\n\n return (\n <div className=\"flex items-center gap-2\">\n <ShadcnRadioGroupItem\n {...props}\n ref={ref}\n id={inputId}\n value={value.toString()}\n disabled={effectiveDisabled}\n className={cn(\n radioSizeVariants({ size: effectiveSize }),\n variant === \"error\" && \"border-destructive\",\n className\n )}\n />\n \n {children && (\n <Label\n htmlFor={inputId}\n className={labelVariants({ disabled: effectiveDisabled })}\n >\n {children}\n </Label>\n )}\n </div>\n );\n}\n\nexport const RadioItem = forwardRef(RadioItemInner);\nRadioItem.displayName = \"RadioItem\";\n"],"mappings":"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"}
|