feat: improve registry maintenance with automated build script

codegen-sh[bot] · codegen-sh[bot] · commit c70b7b780fa4 · 2025-06-04T23:16:38.000Z
- Add build-registry.js script that generates registry files from source components
- Replace inline content with file references for better maintainability
- Add build:registry script to package.json
- Update REGISTRY.md with maintenance documentation
- Validate source files exist before generating registry
- Eliminate code duplication between source files and registry JSON

This solves the maintenance issue where registry files had to be manually
updated whenever component source code changed. Now the registry is
automatically generated from the actual source files.
diff --git a/packages/medusa-forms/REGISTRY.md b/packages/medusa-forms/REGISTRY.md
@@ -10,6 +10,33 @@ You can install components from this registry using the shadcn CLI:
 npx shadcn@latest add --registry https://raw.githubusercontent.com/lambda-curry/medusa-forms/main/packages/medusa-forms/registry.json input
 ```
 
+## Registry Maintenance
+
+The registry files are automatically generated from source components using a build script. This ensures the registry stays in sync with the actual component code without manual maintenance.
+
+### Regenerating Registry Files
+
+To regenerate the registry files after making changes to components:
+
+```bash
+yarn build:registry
+```
+
+This script:
+- Scans component source files in `src/ui/` and `src/controlled/`
+- Generates registry JSON files with file references (not inline content)
+- Updates the main `registry.json` with proper metadata
+- Validates that all referenced source files exist
+
+### Adding New Components
+
+To add a new component to the registry:
+
+1. Create your component in the appropriate directory (`src/ui/` or `src/controlled/`)
+2. Add the component configuration to `scripts/build-registry.js` in the `COMPONENTS` object
+3. Run `yarn build:registry` to generate the registry files
+4. Commit both the source component and generated registry files
+
 ## Available Components
 
 ### Base UI Components
@@ -115,4 +142,3 @@ Controlled components use react-hook-form:
 - `FieldWrapperProps` - Wrapper component props
 - Component-specific props (`InputProps`, `SelectProps`, etc.)
 - React Hook Form integration types
-
diff --git a/packages/medusa-forms/package.json b/packages/medusa-forms/package.json
@@ -40,6 +40,7 @@
   "scripts": {
     "prepublishOnly": "yarn run build",
     "build": "vite build",
+    "build:registry": "node scripts/build-registry.js",
     "lint": "biome check .",
     "lint:fix": "biome check --apply .",
     "type-check": "tsc --noEmit"
diff --git a/packages/medusa-forms/registry.json b/packages/medusa-forms/registry.json
@@ -14,5 +14,4 @@
     "components": "src/components",
     "utils": "src/lib/utils"
   }
-}
-
+}
diff --git a/packages/medusa-forms/registry/controlled-checkbox.json b/packages/medusa-forms/registry/controlled-checkbox.json
@@ -1,7 +1,7 @@
 {
   "name": "controlled-checkbox",
   "type": "registry:ui",
-  "description": "A checkbox component with react-hook-form integration",
+  "description": "Checkbox component with react-hook-form integration",
   "dependencies": [
     "react-hook-form"
   ],
@@ -11,8 +11,7 @@
   "files": [
     {
       "name": "controlled-checkbox.tsx",
-      "content": "import {\n  Controller,\n  type ControllerProps,\n  type FieldValues,\n  type Path,\n  type RegisterOptions,\n  useFormContext,\n} from 'react-hook-form';\nimport { FieldCheckbox, type FieldCheckboxProps } from '../ui/FieldCheckbox';\n\nexport type ControlledCheckboxProps<T extends FieldValues> = Omit<FieldCheckboxProps, 'name'> &\n  Omit<ControllerProps, 'render'> & {\n    name: Path<T>;\n    rules?: Omit<RegisterOptions<T, Path<T>>, 'disabled' | 'valueAsNumber' | 'valueAsDate' | 'setValueAs'>;\n  };\n\nexport const ControlledCheckbox = <T extends FieldValues>({\n  name,\n  rules,\n  onChange,\n  ...props\n}: ControlledCheckboxProps<T>) => {\n  const {\n    control,\n    formState: { errors },\n  } = useFormContext<T>();\n\n  return (\n    <Controller\n      control={control}\n      name={name}\n      rules={rules as Omit<RegisterOptions<T, Path<T>>, 'disabled' | 'valueAsNumber' | 'valueAsDate' | 'setValueAs'>}\n      render={({ field }) => (\n        <FieldCheckbox\n          {...field}\n          {...props}\n          formErrors={errors}\n          checked={field.value}\n          onChange={(checked) => {\n            if (onChange) onChange(checked);\n            field.onChange(checked);\n          }}\n        />\n      )}\n    />\n  );\n};\n\n"
+      "path": "src/controlled/ControlledCheckbox.tsx"
     }
   ]
-}
-
+}
diff --git a/packages/medusa-forms/registry/controlled-currency-input.json b/packages/medusa-forms/registry/controlled-currency-input.json
@@ -1,7 +1,7 @@
 {
   "name": "controlled-currency-input",
   "type": "registry:ui",
-  "description": "A currency-input component with react-hook-form integration",
+  "description": "CurrencyInput component with react-hook-form integration",
   "dependencies": [
     "react-hook-form"
   ],
@@ -11,8 +11,7 @@
   "files": [
     {
       "name": "controlled-currency-input.tsx",
-      "content": "import type * as React from 'react';\nimport {\n  Controller,\n  type ControllerProps,\n  type FieldValues,\n  type Path,\n  type RegisterOptions,\n  useFormContext,\n} from 'react-hook-form';\nimport { CurrencyInput, type CurrencyInputProps } from '../ui/CurrencyInput';\n\nexport type ControlledCurrencyInputProps<T extends FieldValues> = CurrencyInputProps &\n  Omit<ControllerProps, 'render' | 'control'> & {\n    name: Path<T>;\n  };\n\nexport const ControlledCurrencyInput = <T extends FieldValues>({\n  name,\n  rules,\n  ...props\n}: ControlledCurrencyInputProps<T>) => {\n  const { control } = useFormContext<T>();\n\n  return (\n    <Controller<T>\n      control={control}\n      name={name}\n      rules={rules as Omit<RegisterOptions<T, Path<T>>, 'disabled' | 'valueAsNumber' | 'valueAsDate' | 'setValueAs'>}\n      render={({ field }) => {\n        return (\n          <CurrencyInput\n            {...field}\n            {...props}\n            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {\n              field.onChange(e.target.value.replace(/[^0-9.-]+/g, ''));\n            }}\n          />\n        );\n      }}\n    />\n  );\n};\n\n"
+      "path": "src/controlled/ControlledCurrencyInput.tsx"
     }
   ]
-}
-
+}
diff --git a/packages/medusa-forms/registry/controlled-datepicker.json b/packages/medusa-forms/registry/controlled-datepicker.json
@@ -1,7 +1,7 @@
 {
   "name": "controlled-datepicker",
   "type": "registry:ui",
-  "description": "A datepicker component with react-hook-form integration",
+  "description": "DatePicker component with react-hook-form integration",
   "dependencies": [
     "react-hook-form"
   ],
@@ -11,8 +11,7 @@
   "files": [
     {
       "name": "controlled-datepicker.tsx",
-      "content": "import {\n  Controller,\n  type ControllerProps,\n  type FieldValues,\n  type Path,\n  type RegisterOptions,\n  useFormContext,\n} from 'react-hook-form';\nimport { DatePickerInput, type DatePickerProps } from '../ui/DatePicker';\n\nexport type ControlledDatePickerProps<T extends FieldValues> = DatePickerProps &\n  Omit<ControllerProps, 'render' | 'control'> & {\n    name: Path<T>;\n  };\n\nexport const ControlledDatePicker = <T extends FieldValues>({\n  name,\n  rules,\n  ...props\n}: ControlledDatePickerProps<T>) => {\n  const { control } = useFormContext<T>();\n  return (\n    <Controller<T>\n      control={control}\n      name={name}\n      rules={rules as Omit<RegisterOptions<T, Path<T>>, 'disabled' | 'valueAsNumber' | 'valueAsDate' | 'setValueAs'>}\n      render={({ field }) => <DatePickerInput {...field} {...props} />}\n    />\n  );\n};\n\n"
+      "path": "src/controlled/ControlledDatePicker.tsx"
     }
   ]
-}
-
+}
diff --git a/packages/medusa-forms/registry/controlled-input.json b/packages/medusa-forms/registry/controlled-input.json
@@ -1,7 +1,7 @@
 {
   "name": "controlled-input",
   "type": "registry:ui",
-  "description": "An input component with react-hook-form integration",
+  "description": "Input component with react-hook-form integration",
   "dependencies": [
     "react-hook-form"
   ],
@@ -11,8 +11,7 @@
   "files": [
     {
       "name": "controlled-input.tsx",
-      "content": "import type { ComponentProps } from 'react';\nimport {\n  Controller,\n  type ControllerProps,\n  type FieldValues,\n  type Path,\n  type RegisterOptions,\n  useFormContext,\n} from 'react-hook-form';\nimport { Input, type InputProps } from '../ui/Input';\n\nexport type ControlledInputProps<T extends FieldValues> = InputProps &\n  Omit<ControllerProps, 'render'> & {\n    name: Path<T>;\n    rules?: Omit<RegisterOptions<T, Path<T>>, 'disabled' | 'valueAsNumber' | 'valueAsDate' | 'setValueAs'>;\n  } & ComponentProps<typeof Input> &\n  Omit<ControllerProps<T>, 'render'>;\n\nexport const ControlledInput = <T extends FieldValues>({\n  name,\n  rules,\n  onChange,\n  ...props\n}: ControlledInputProps<T>) => {\n  const {\n    control,\n    formState: { errors },\n  } = useFormContext<T>();\n\n  return (\n    <Controller\n      control={control}\n      name={name}\n      rules={rules as Omit<RegisterOptions<T, Path<T>>, 'disabled' | 'valueAsNumber' | 'valueAsDate' | 'setValueAs'>}\n      render={({ field }) => (\n        <Input\n          {...field}\n          {...props}\n          labelClassName={props.labelClassName}\n          formErrors={errors}\n          onChange={(evt) => {\n            if (onChange) {\n              onChange(evt);\n            }\n            field.onChange(evt);\n          }}\n        />\n      )}\n    />\n  );\n};\n\n"
+      "path": "src/controlled/ControlledInput.tsx"
     }
   ]
-}
-
+}
diff --git a/packages/medusa-forms/registry/controlled-select.json b/packages/medusa-forms/registry/controlled-select.json
@@ -1,7 +1,7 @@
 {
   "name": "controlled-select",
   "type": "registry:ui",
-  "description": "A select component with react-hook-form integration",
+  "description": "Select component with react-hook-form integration",
   "dependencies": [
     "react-hook-form"
   ],
@@ -11,8 +11,7 @@
   "files": [
     {
       "name": "controlled-select.tsx",
-      "content": "import type * as React from 'react';\nimport {\n  Controller,\n  type ControllerProps,\n  type FieldPathValue,\n  type FieldValues,\n  type Path,\n  type RegisterOptions,\n  useFormContext,\n} from 'react-hook-form';\nimport { Select, type SelectProps } from '../ui/Select';\n\nexport type ControlledSelectProps<T extends FieldValues> = SelectProps &\n  Omit<ControllerProps, 'render'> & {\n    name: Path<T>;\n    onBlur?: () => void;\n    onChange?: (value: unknown) => void;\n  } & (\n    | {\n        options: { label: React.ReactNode; value: FieldPathValue<T, Path<T>> }[];\n        children?: never;\n      }\n    | {\n        options?: never;\n        children: React.ReactNode;\n      }\n  );\n\nexport const ControlledSelect = <T extends FieldValues>({\n  name,\n  rules,\n  children,\n  options,\n  onChange,\n  onBlur,\n  ...props\n}: ControlledSelectProps<T>) => {\n  const { control } = useFormContext<T>();\n  return (\n    <Controller<T>\n      control={control}\n      name={name}\n      rules={rules as Omit<RegisterOptions<T, Path<T>>, 'disabled' | 'valueAsNumber' | 'valueAsDate' | 'setValueAs'>}\n      render={({ field }) => {\n        const handleChange = (value: unknown) => {\n          if (typeof onChange === 'function') onChange(value);\n          field.onChange(value);\n        };\n\n        if (options) {\n          return (\n            <Select {...({ ...field, ...props, onValueChange: handleChange } as SelectProps)}>\n              <Select.Trigger>\n                <Select.Value />\n              </Select.Trigger>\n              <Select.Content>\n                {options.map((option) => (\n                  <Select.Item key={option.value} value={option.value}>\n                    {option.label}\n                  </Select.Item>\n                ))}\n              </Select.Content>\n            </Select>\n          );\n        }\n\n        return <Select {...({ ...field, ...props, onValueChange: handleChange } as SelectProps)}>{children}</Select>;\n      }}\n    />\n  );\n};\n\n"
+      "path": "src/controlled/ControlledSelect.tsx"
     }
   ]
-}
-
+}
diff --git a/packages/medusa-forms/registry/controlled-textarea.json b/packages/medusa-forms/registry/controlled-textarea.json
@@ -1,7 +1,7 @@
 {
   "name": "controlled-textarea",
   "type": "registry:ui",
-  "description": "A textarea component with react-hook-form integration",
+  "description": "Textarea component with react-hook-form integration",
   "dependencies": [
     "react-hook-form"
   ],
@@ -11,8 +11,7 @@
   "files": [
     {
       "name": "controlled-textarea.tsx",
-      "content": "import type * as React from 'react';\nimport {\n  Controller,\n  type ControllerProps,\n  type FieldValues,\n  type Path,\n  type RegisterOptions,\n  useFormContext,\n} from 'react-hook-form';\nimport { TextArea, type TextAreaProps } from '../ui/TextArea';\n\nexport type ControlledTextAreaProps<T extends FieldValues> = TextAreaProps &\n  Omit<ControllerProps, 'render'> & {\n    name: Path<T>;\n    rules?: RegisterOptions<T, Path<T>>;\n  } & React.ComponentProps<typeof TextArea> &\n  Omit<ControllerProps<T>, 'render'>;\n\nexport const ControlledTextArea = <T extends FieldValues>({ name, rules, ...props }: ControlledTextAreaProps<T>) => {\n  const { control } = useFormContext<T>();\n  return (\n    <Controller<T>\n      control={control}\n      name={name}\n      rules={rules}\n      render={({ field }) => <TextArea {...field} {...props} />}\n    />\n  );\n};\n\n"
+      "path": "src/controlled/ControlledTextArea.tsx"
     }
   ]
-}
-
+}
diff --git a/packages/medusa-forms/registry/currency-input.json b/packages/medusa-forms/registry/currency-input.json
@@ -1,7 +1,7 @@
 {
   "name": "currency-input",
   "type": "registry:ui",
-  "description": "currency-input component",
+  "description": "Base currency input component",
   "dependencies": [
     "@medusajs/ui"
   ],
@@ -11,8 +11,7 @@
   "files": [
     {
       "name": "currency-input.tsx",
-      "content": "import { CurrencyInput as MedusaCurrencyInput } from '@medusajs/ui';\nimport { forwardRef } from 'react';\nimport { FieldWrapper } from './FieldWrapper';\nimport type { BasicFieldProps, MedusaCurrencyInputProps } from './types';\n\nexport type CurrencyInputProps = MedusaCurrencyInputProps & BasicFieldProps;\n\nconst Wrapper = FieldWrapper<CurrencyInputProps>;\n\nexport const CurrencyInput = forwardRef<HTMLInputElement, CurrencyInputProps>((props, ref) => (\n  <Wrapper {...props}>{(inputProps) => <MedusaCurrencyInput {...inputProps} ref={ref} />}</Wrapper>\n));\n\nCurrencyInput.displayName = 'CurrencyInput';\n"
+      "path": "src/ui/CurrencyInput.tsx"
     }
   ]
-}
-
+}
diff --git a/packages/medusa-forms/registry/datepicker.json b/packages/medusa-forms/registry/datepicker.json
@@ -1,7 +1,7 @@
 {
   "name": "datepicker",
   "type": "registry:ui",
-  "description": "datepicker component",
+  "description": "Base datepicker component",
   "dependencies": [
     "@medusajs/ui"
   ],
@@ -11,8 +11,7 @@
   "files": [
     {
       "name": "datepicker.tsx",
-      "content": "import { DatePicker } from '@medusajs/ui';\nimport { forwardRef } from 'react';\nimport { FieldWrapper } from './FieldWrapper';\nimport type { BasicFieldProps, DatePickerProps as MedusaDatePickerProps } from './types';\n\nexport type DatePickerProps = MedusaDatePickerProps & BasicFieldProps;\n\nconst Wrapper = FieldWrapper<DatePickerProps>;\n\nexport const DatePickerInput = forwardRef<HTMLInputElement, DatePickerProps>((props, ref) => {\n  return <Wrapper {...props}>{(inputProps) => <DatePicker {...{ ...inputProps, ref }} />}</Wrapper>;\n});\n\nDatePickerInput.displayName = 'DatePickerInput';\n"
+      "path": "src/ui/DatePicker.tsx"
     }
   ]
-}
-
+}
diff --git a/packages/medusa-forms/registry/field-checkbox.json b/packages/medusa-forms/registry/field-checkbox.json
@@ -1,7 +1,7 @@
 {
   "name": "field-checkbox",
   "type": "registry:ui",
-  "description": "field checkbox component",
+  "description": "Base checkbox component",
   "dependencies": [
     "@medusajs/ui"
   ],
@@ -12,8 +12,7 @@
   "files": [
     {
       "name": "fieldcheckbox.tsx",
-      "content": "import { Checkbox as MedusaCheckbox } from '@medusajs/ui';\nimport clsx from 'clsx';\nimport type * as React from 'react';\nimport { FieldWrapper } from './FieldWrapper';\nimport { Label } from './Label';\nimport type { BasicFieldProps } from './types';\n\nexport type CheckedState = boolean | 'indeterminate';\nexport type FieldCheckboxProps = BasicFieldProps & {\n  checked?: CheckedState;\n  onChange?: (checked: CheckedState) => void;\n  ref?: React.Ref<HTMLButtonElement>;\n};\n\nexport const FieldCheckbox: React.FC<FieldCheckboxProps> = ({\n  label,\n  labelClassName,\n  labelTooltip,\n  wrapperClassName,\n  errorClassName,\n  formErrors,\n  onChange,\n  ref,\n  ...props\n}) => {\n  return (\n    <FieldWrapper<FieldCheckboxProps>\n      wrapperClassName={wrapperClassName}\n      errorClassName={errorClassName}\n      formErrors={formErrors}\n      {...props}\n    >\n      {(fieldProps) => (\n        <div className=\"flex items-center\">\n          <MedusaCheckbox\n            {...fieldProps}\n            ref={ref}\n            checked={props.checked}\n            onChange={(_e) => {\n              // this is a noop since we handle the onChange in the onCheckedChange handler,\n              // but we need to pass a function to the onChange prop because the MedusaCheckbox component expects it\n            }}\n            onCheckedChange={(checked) => {\n              onChange?.(checked);\n            }}\n          />\n\n          {label && (\n            <Label\n              htmlFor={props.name}\n              onClick={() => {\n                onChange?.(!props.checked);\n              }}\n              className={clsx('ml-2 !mb-0 font-normal [&>label]:!cursor-pointer', labelClassName)}\n            >\n              {label}\n            </Label>\n          )}\n        </div>\n      )}\n    </FieldWrapper>\n  );\n};\n"
+      "path": "src/ui/FieldCheckbox.tsx"
     }
   ]
-}
-
+}
diff --git a/packages/medusa-forms/registry/field-error.json b/packages/medusa-forms/registry/field-error.json
@@ -1,16 +1,15 @@
 {
   "name": "field-error",
   "type": "registry:ui",
-  "description": "field error component",
+  "description": "Error display component",
   "dependencies": [
     "@medusajs/ui"
   ],
   "registryDependencies": [],
   "files": [
     {
       "name": "error.tsx",
-      "content": "import { ErrorMessage } from '@hookform/error-message';\nimport { Tooltip } from '@medusajs/ui';\nimport clsx from 'clsx';\nimport type { MultipleFieldErrors } from 'react-hook-form';\nimport type { BasicFieldProps } from './types';\n\ntype Props = {\n  className?: BasicFieldProps['errorClassName'];\n  name: BasicFieldProps['name'];\n  errors: BasicFieldProps['formErrors'];\n};\n\nconst MultipleMessages = ({ messages }: { messages: MultipleFieldErrors }) => {\n  const errors = Object.entries(messages).map(([_, message]) => message);\n\n  const displayedError = errors[0];\n  const remainderErrors = errors.slice(1);\n\n  return (\n    <div className=\"flex cursor-default items-center gap-x-1\">\n      <p>{displayedError}</p>\n      {remainderErrors?.length > 0 && (\n        <Tooltip\n          content={\n            <div className=\"txt-compact-xsmall text-rose-50\">\n              {remainderErrors.map((e, i) => {\n                return (\n                  // biome-ignore lint/suspicious/noArrayIndexKey: index is the best option here\n                  <p key={i}>\n                    {Array.from(new Array(remainderErrors.length)).map((_) => '*')}\n                    {e}\n                  </p>\n                );\n              })}\n            </div>\n          }\n        >\n          <p>\n            +{remainderErrors.length} {remainderErrors.length > 1 ? 'errors' : 'error'}\n          </p>\n        </Tooltip>\n      )}\n    </div>\n  );\n};\n\nexport const FieldError = ({ errors, name, className }: Props) => {\n  if (!(errors && name)) return null;\n\n  return (\n    <ErrorMessage\n      name={name}\n      errors={errors}\n      render={({ message, messages }) => {\n        return (\n          <div className={clsx('txt-compact-xsmall !leading-snug mt-2 text-red-500', className)}>\n            {messages ? <MultipleMessages messages={messages} /> : <p>{message}</p>}\n          </div>\n        );\n      }}\n    />\n  );\n};\n"
+      "path": "src/ui/Error.tsx"
     }
   ]
-}
-
+}
diff --git a/packages/medusa-forms/registry/field-wrapper.json b/packages/medusa-forms/registry/field-wrapper.json
diff --git a/packages/medusa-forms/registry/input.json b/packages/medusa-forms/registry/input.json
diff --git a/packages/medusa-forms/registry/label.json b/packages/medusa-forms/registry/label.json
diff --git a/packages/medusa-forms/registry/select.json b/packages/medusa-forms/registry/select.json
diff --git a/packages/medusa-forms/registry/textarea.json b/packages/medusa-forms/registry/textarea.json
diff --git a/packages/medusa-forms/scripts/build-registry.js b/packages/medusa-forms/scripts/build-registry.js

Original file line number	Diff line number	Diff line change
`@@ -14,5 +14,4 @@`
`14`	`14`	`"components": "src/components",`
`15`	`15`	`"utils": "src/lib/utils"`
`16`	`16`	`}`
`17`		`-}`
`18`		`-`
	`17`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "controlled-checkbox",`
`3`	`3`	`"type": "registry:ui",`
`4`		`- "description": "A checkbox component with react-hook-form integration",`
	`4`	`+ "description": "Checkbox component with react-hook-form integration",`
`5`	`5`	`"dependencies": [`
`6`	`6`	`"react-hook-form"`
`7`	`7`	`],`
`@@ -11,8 +11,7 @@`
`11`	`11`	`"files": [`
`12`	`12`	`{`
`13`	`13`	`"name": "controlled-checkbox.tsx",`
`14`		- "content": "import {\n Controller,\n type ControllerProps,\n type FieldValues,\n type Path,\n type RegisterOptions,\n useFormContext,\n} from 'react-hook-form';\nimport { FieldCheckbox, type FieldCheckboxProps } from '../ui/FieldCheckbox';\n\nexport type ControlledCheckboxProps<T extends FieldValues> = Omit<FieldCheckboxProps, 'name'> &\n Omit<ControllerProps, 'render'> & {\n name: Path<T>;\n rules?: Omit<RegisterOptions<T, Path<T>>, 'disabled' \| 'valueAsNumber' \| 'valueAsDate' \| 'setValueAs'>;\n };\n\nexport const ControlledCheckbox = <T extends FieldValues>({\n name,\n rules,\n onChange,\n ...props\n}: ControlledCheckboxProps<T>) => {\n const {\n control,\n formState: { errors },\n } = useFormContext<T>();\n\n return (\n <Controller\n control={control}\n name={name}\n rules={rules as Omit<RegisterOptions<T, Path<T>>, 'disabled' \| 'valueAsNumber' \| 'valueAsDate' \| 'setValueAs'>}\n render={({ field }) => (\n <FieldCheckbox\n {...field}\n {...props}\n formErrors={errors}\n checked={field.value}\n onChange={(checked) => {\n if (onChange) onChange(checked);\n field.onChange(checked);\n }}\n />\n )}\n />\n );\n};\n\n"
	`14`	`+ "path": "src/controlled/ControlledCheckbox.tsx"`
`15`	`15`	`}`
`16`	`16`	`]`
`17`		`-}`
`18`		`-`
	`17`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "controlled-currency-input",`
`3`	`3`	`"type": "registry:ui",`
`4`		`- "description": "A currency-input component with react-hook-form integration",`
	`4`	`+ "description": "CurrencyInput component with react-hook-form integration",`
`5`	`5`	`"dependencies": [`
`6`	`6`	`"react-hook-form"`
`7`	`7`	`],`
`@@ -11,8 +11,7 @@`
`11`	`11`	`"files": [`
`12`	`12`	`{`
`13`	`13`	`"name": "controlled-currency-input.tsx",`
`14`		- "content": "import type * as React from 'react';\nimport {\n Controller,\n type ControllerProps,\n type FieldValues,\n type Path,\n type RegisterOptions,\n useFormContext,\n} from 'react-hook-form';\nimport { CurrencyInput, type CurrencyInputProps } from '../ui/CurrencyInput';\n\nexport type ControlledCurrencyInputProps<T extends FieldValues> = CurrencyInputProps &\n Omit<ControllerProps, 'render' \| 'control'> & {\n name: Path<T>;\n };\n\nexport const ControlledCurrencyInput = <T extends FieldValues>({\n name,\n rules,\n ...props\n}: ControlledCurrencyInputProps<T>) => {\n const { control } = useFormContext<T>();\n\n return (\n <Controller<T>\n control={control}\n name={name}\n rules={rules as Omit<RegisterOptions<T, Path<T>>, 'disabled' \| 'valueAsNumber' \| 'valueAsDate' \| 'setValueAs'>}\n render={({ field }) => {\n return (\n <CurrencyInput\n {...field}\n {...props}\n onChange={(e: React.ChangeEvent<HTMLInputElement>) => {\n field.onChange(e.target.value.replace(/[^0-9.-]+/g, ''));\n }}\n />\n );\n }}\n />\n );\n};\n\n"
	`14`	`+ "path": "src/controlled/ControlledCurrencyInput.tsx"`
`15`	`15`	`}`
`16`	`16`	`]`
`17`		`-}`
`18`		`-`
	`17`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "controlled-datepicker",`
`3`	`3`	`"type": "registry:ui",`
`4`		`- "description": "A datepicker component with react-hook-form integration",`
	`4`	`+ "description": "DatePicker component with react-hook-form integration",`
`5`	`5`	`"dependencies": [`
`6`	`6`	`"react-hook-form"`
`7`	`7`	`],`
`@@ -11,8 +11,7 @@`
`11`	`11`	`"files": [`
`12`	`12`	`{`
`13`	`13`	`"name": "controlled-datepicker.tsx",`
`14`		- "content": "import {\n Controller,\n type ControllerProps,\n type FieldValues,\n type Path,\n type RegisterOptions,\n useFormContext,\n} from 'react-hook-form';\nimport { DatePickerInput, type DatePickerProps } from '../ui/DatePicker';\n\nexport type ControlledDatePickerProps<T extends FieldValues> = DatePickerProps &\n Omit<ControllerProps, 'render' \| 'control'> & {\n name: Path<T>;\n };\n\nexport const ControlledDatePicker = <T extends FieldValues>({\n name,\n rules,\n ...props\n}: ControlledDatePickerProps<T>) => {\n const { control } = useFormContext<T>();\n return (\n <Controller<T>\n control={control}\n name={name}\n rules={rules as Omit<RegisterOptions<T, Path<T>>, 'disabled' \| 'valueAsNumber' \| 'valueAsDate' \| 'setValueAs'>}\n render={({ field }) => <DatePickerInput {...field} {...props} />}\n />\n );\n};\n\n"
	`14`	`+ "path": "src/controlled/ControlledDatePicker.tsx"`
`15`	`15`	`}`
`16`	`16`	`]`
`17`		`-}`
`18`		`-`
	`17`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "controlled-input",`
`3`	`3`	`"type": "registry:ui",`
`4`		`- "description": "An input component with react-hook-form integration",`
	`4`	`+ "description": "Input component with react-hook-form integration",`
`5`	`5`	`"dependencies": [`
`6`	`6`	`"react-hook-form"`
`7`	`7`	`],`
`@@ -11,8 +11,7 @@`
`11`	`11`	`"files": [`
`12`	`12`	`{`
`13`	`13`	`"name": "controlled-input.tsx",`
`14`		- "content": "import type { ComponentProps } from 'react';\nimport {\n Controller,\n type ControllerProps,\n type FieldValues,\n type Path,\n type RegisterOptions,\n useFormContext,\n} from 'react-hook-form';\nimport { Input, type InputProps } from '../ui/Input';\n\nexport type ControlledInputProps<T extends FieldValues> = InputProps &\n Omit<ControllerProps, 'render'> & {\n name: Path<T>;\n rules?: Omit<RegisterOptions<T, Path<T>>, 'disabled' \| 'valueAsNumber' \| 'valueAsDate' \| 'setValueAs'>;\n } & ComponentProps<typeof Input> &\n Omit<ControllerProps<T>, 'render'>;\n\nexport const ControlledInput = <T extends FieldValues>({\n name,\n rules,\n onChange,\n ...props\n}: ControlledInputProps<T>) => {\n const {\n control,\n formState: { errors },\n } = useFormContext<T>();\n\n return (\n <Controller\n control={control}\n name={name}\n rules={rules as Omit<RegisterOptions<T, Path<T>>, 'disabled' \| 'valueAsNumber' \| 'valueAsDate' \| 'setValueAs'>}\n render={({ field }) => (\n <Input\n {...field}\n {...props}\n labelClassName={props.labelClassName}\n formErrors={errors}\n onChange={(evt) => {\n if (onChange) {\n onChange(evt);\n }\n field.onChange(evt);\n }}\n />\n )}\n />\n );\n};\n\n"
	`14`	`+ "path": "src/controlled/ControlledInput.tsx"`
`15`	`15`	`}`
`16`	`16`	`]`
`17`		`-}`
`18`		`-`
	`17`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "controlled-select",`
`3`	`3`	`"type": "registry:ui",`
`4`		`- "description": "A select component with react-hook-form integration",`
	`4`	`+ "description": "Select component with react-hook-form integration",`
`5`	`5`	`"dependencies": [`
`6`	`6`	`"react-hook-form"`
`7`	`7`	`],`
`@@ -11,8 +11,7 @@`
`11`	`11`	`"files": [`
`12`	`12`	`{`
`13`	`13`	`"name": "controlled-select.tsx",`
`14`		- "content": "import type * as React from 'react';\nimport {\n Controller,\n type ControllerProps,\n type FieldPathValue,\n type FieldValues,\n type Path,\n type RegisterOptions,\n useFormContext,\n} from 'react-hook-form';\nimport { Select, type SelectProps } from '../ui/Select';\n\nexport type ControlledSelectProps<T extends FieldValues> = SelectProps &\n Omit<ControllerProps, 'render'> & {\n name: Path<T>;\n onBlur?: () => void;\n onChange?: (value: unknown) => void;\n } & (\n \| {\n options: { label: React.ReactNode; value: FieldPathValue<T, Path<T>> }[];\n children?: never;\n }\n \| {\n options?: never;\n children: React.ReactNode;\n }\n );\n\nexport const ControlledSelect = <T extends FieldValues>({\n name,\n rules,\n children,\n options,\n onChange,\n onBlur,\n ...props\n}: ControlledSelectProps<T>) => {\n const { control } = useFormContext<T>();\n return (\n <Controller<T>\n control={control}\n name={name}\n rules={rules as Omit<RegisterOptions<T, Path<T>>, 'disabled' \| 'valueAsNumber' \| 'valueAsDate' \| 'setValueAs'>}\n render={({ field }) => {\n const handleChange = (value: unknown) => {\n if (typeof onChange === 'function') onChange(value);\n field.onChange(value);\n };\n\n if (options) {\n return (\n <Select {...({ ...field, ...props, onValueChange: handleChange } as SelectProps)}>\n <Select.Trigger>\n <Select.Value />\n </Select.Trigger>\n <Select.Content>\n {options.map((option) => (\n <Select.Item key={option.value} value={option.value}>\n {option.label}\n </Select.Item>\n ))}\n </Select.Content>\n </Select>\n );\n }\n\n return <Select {...({ ...field, ...props, onValueChange: handleChange } as SelectProps)}>{children}</Select>;\n }}\n />\n );\n};\n\n"
	`14`	`+ "path": "src/controlled/ControlledSelect.tsx"`
`15`	`15`	`}`
`16`	`16`	`]`
`17`		`-}`
`18`		`-`
	`17`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "controlled-textarea",`
`3`	`3`	`"type": "registry:ui",`
`4`		`- "description": "A textarea component with react-hook-form integration",`
	`4`	`+ "description": "Textarea component with react-hook-form integration",`
`5`	`5`	`"dependencies": [`
`6`	`6`	`"react-hook-form"`
`7`	`7`	`],`
`@@ -11,8 +11,7 @@`
`11`	`11`	`"files": [`
`12`	`12`	`{`
`13`	`13`	`"name": "controlled-textarea.tsx",`
`14`		- "content": "import type * as React from 'react';\nimport {\n Controller,\n type ControllerProps,\n type FieldValues,\n type Path,\n type RegisterOptions,\n useFormContext,\n} from 'react-hook-form';\nimport { TextArea, type TextAreaProps } from '../ui/TextArea';\n\nexport type ControlledTextAreaProps<T extends FieldValues> = TextAreaProps &\n Omit<ControllerProps, 'render'> & {\n name: Path<T>;\n rules?: RegisterOptions<T, Path<T>>;\n } & React.ComponentProps<typeof TextArea> &\n Omit<ControllerProps<T>, 'render'>;\n\nexport const ControlledTextArea = <T extends FieldValues>({ name, rules, ...props }: ControlledTextAreaProps<T>) => {\n const { control } = useFormContext<T>();\n return (\n <Controller<T>\n control={control}\n name={name}\n rules={rules}\n render={({ field }) => <TextArea {...field} {...props} />}\n />\n );\n};\n\n"
	`14`	`+ "path": "src/controlled/ControlledTextArea.tsx"`
`15`	`15`	`}`
`16`	`16`	`]`
`17`		`-}`
`18`		`-`
	`17`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "currency-input",`
`3`	`3`	`"type": "registry:ui",`
`4`		`- "description": "currency-input component",`
	`4`	`+ "description": "Base currency input component",`
`5`	`5`	`"dependencies": [`
`6`	`6`	`"@medusajs/ui"`
`7`	`7`	`],`
`@@ -11,8 +11,7 @@`
`11`	`11`	`"files": [`
`12`	`12`	`{`
`13`	`13`	`"name": "currency-input.tsx",`
`14`		- "content": "import { CurrencyInput as MedusaCurrencyInput } from '@medusajs/ui';\nimport { forwardRef } from 'react';\nimport { FieldWrapper } from './FieldWrapper';\nimport type { BasicFieldProps, MedusaCurrencyInputProps } from './types';\n\nexport type CurrencyInputProps = MedusaCurrencyInputProps & BasicFieldProps;\n\nconst Wrapper = FieldWrapper<CurrencyInputProps>;\n\nexport const CurrencyInput = forwardRef<HTMLInputElement, CurrencyInputProps>((props, ref) => (\n <Wrapper {...props}>{(inputProps) => <MedusaCurrencyInput {...inputProps} ref={ref} />}</Wrapper>\n));\n\nCurrencyInput.displayName = 'CurrencyInput';\n"
	`14`	`+ "path": "src/ui/CurrencyInput.tsx"`
`15`	`15`	`}`
`16`	`16`	`]`
`17`		`-}`
`18`		`-`
	`17`	`+}`