From e73df42368d3c426abc1a4d4ed36575a8e590fc0 Mon Sep 17 00:00:00 2001
From: "codegen-sh[bot]" <131295404+codegen-sh[bot]@users.noreply.github.com>
Date: Wed, 4 Jun 2025 22:35:52 +0000
Subject: [PATCH 1/2] feat: add shadcn/ui registry for medusa-forms components

- Add main registry.json with shadcn/ui schema
- Create registry files for all UI components (input, select, checkbox, textarea, datepicker, currency-input)
- Create registry files for all controlled components with react-hook-form integration
- Add field-wrapper, field-error, and label base components
- Include proper dependency management between components
- Add comprehensive documentation in REGISTRY.md

This allows developers to install medusa-forms components using:
npx shadcn@latest add --registry <url> <component-name>
---
 packages/medusa-forms/REGISTRY.md             | 118 ++++++++++++++++++
 packages/medusa-forms/registry.json           |  18 +++
 .../registry/controlled-checkbox.json         |  18 +++
 .../registry/controlled-currency-input.json   |  18 +++
 .../registry/controlled-datepicker.json       |  18 +++
 .../registry/controlled-input.json            |  18 +++
 .../registry/controlled-select.json           |  18 +++
 .../registry/controlled-textarea.json         |  18 +++
 .../medusa-forms/registry/currency-input.json |  18 +++
 .../medusa-forms/registry/datepicker.json     |  18 +++
 .../medusa-forms/registry/field-checkbox.json |  19 +++
 .../medusa-forms/registry/field-error.json    |  16 +++
 .../medusa-forms/registry/field-wrapper.json  |  23 ++++
 packages/medusa-forms/registry/input.json     |  18 +++
 packages/medusa-forms/registry/label.json     |  16 +++
 packages/medusa-forms/registry/select.json    |  18 +++
 packages/medusa-forms/registry/textarea.json  |  18 +++
 17 files changed, 408 insertions(+)
 create mode 100644 packages/medusa-forms/REGISTRY.md
 create mode 100644 packages/medusa-forms/registry.json
 create mode 100644 packages/medusa-forms/registry/controlled-checkbox.json
 create mode 100644 packages/medusa-forms/registry/controlled-currency-input.json
 create mode 100644 packages/medusa-forms/registry/controlled-datepicker.json
 create mode 100644 packages/medusa-forms/registry/controlled-input.json
 create mode 100644 packages/medusa-forms/registry/controlled-select.json
 create mode 100644 packages/medusa-forms/registry/controlled-textarea.json
 create mode 100644 packages/medusa-forms/registry/currency-input.json
 create mode 100644 packages/medusa-forms/registry/datepicker.json
 create mode 100644 packages/medusa-forms/registry/field-checkbox.json
 create mode 100644 packages/medusa-forms/registry/field-error.json
 create mode 100644 packages/medusa-forms/registry/field-wrapper.json
 create mode 100644 packages/medusa-forms/registry/input.json
 create mode 100644 packages/medusa-forms/registry/label.json
 create mode 100644 packages/medusa-forms/registry/select.json
 create mode 100644 packages/medusa-forms/registry/textarea.json

diff --git a/packages/medusa-forms/REGISTRY.md b/packages/medusa-forms/REGISTRY.md
new file mode 100644
index 0000000..e9540a8
--- /dev/null
+++ b/packages/medusa-forms/REGISTRY.md
@@ -0,0 +1,118 @@
+# Medusa Forms Registry
+
+This package provides a custom shadcn/ui registry that allows developers to install medusa-forms components using the native shadcn CLI.
+
+## Installation
+
+You can install components from this registry using the shadcn CLI:
+
+```bash
+npx shadcn@latest add --registry https://raw.githubusercontent.com/lambda-curry/medusa-forms/main/packages/medusa-forms/registry.json input
+```
+
+## Available Components
+
+### Base UI Components
+
+- `field-wrapper` - Core wrapper component with error handling and labels
+- `field-error` - Error display component
+- `label` - Label component with tooltip support
+- `input` - Base input component
+- `select` - Base select component
+- `field-checkbox` - Base checkbox component
+- `textarea` - Base textarea component
+- `datepicker` - Base datepicker component
+- `currency-input` - Base currency input component
+
+### Controlled Components (React Hook Form)
+
+- `controlled-input` - Input with react-hook-form integration
+- `controlled-select` - Select with react-hook-form integration
+- `controlled-checkbox` - Checkbox with react-hook-form integration
+- `controlled-textarea` - Textarea with react-hook-form integration
+- `controlled-datepicker` - DatePicker with react-hook-form integration
+- `controlled-currency-input` - CurrencyInput with react-hook-form integration
+
+## Usage Examples
+
+### Installing a single component
+
+```bash
+npx shadcn@latest add --registry https://raw.githubusercontent.com/lambda-curry/medusa-forms/main/packages/medusa-forms/registry.json controlled-input
+```
+
+### Installing multiple components
+
+```bash
+npx shadcn@latest add --registry https://raw.githubusercontent.com/lambda-curry/medusa-forms/main/packages/medusa-forms/registry.json controlled-input controlled-select controlled-checkbox
+```
+
+### Using the components
+
+```tsx
+import { ControlledInput } from '@/components/ui/controlled-input'
+import { ControlledSelect } from '@/components/ui/controlled-select'
+import { useForm, FormProvider } from 'react-hook-form'
+
+function MyForm() {
+  const methods = useForm()
+
+  return (
+    <FormProvider {...methods}>
+      <form>
+        <ControlledInput
+          name="email"
+          label="Email"
+          placeholder="Enter your email"
+        />
+        
+        <ControlledSelect
+          name="country"
+          label="Country"
+          options={[
+            { label: 'United States', value: 'us' },
+            { label: 'Canada', value: 'ca' },
+          ]}
+        />
+      </form>
+    </FormProvider>
+  )
+}
+```
+
+## Component Dependencies
+
+The registry properly handles component dependencies:
+
+- Controlled components depend on their base UI components
+- UI components depend on `field-wrapper` when needed
+- `field-wrapper` depends on `field-error` and `label`
+- All components use `@medusajs/ui` for base styling
+
+## Architecture
+
+### Field Wrapper Pattern
+
+All form components use a consistent wrapper pattern:
+
+- `FieldWrapper` provides consistent layout and error handling
+- `Label` component handles labels and tooltips
+- `FieldError` handles error message display
+- UI components wrap `@medusajs/ui` components
+
+### Controlled Component Pattern
+
+Controlled components use react-hook-form:
+
+- Uses `Controller` from react-hook-form
+- Integrates with form context
+- Handles form validation and errors
+- Preserves component props and types
+
+## Types and Interfaces
+
+- `BasicFieldProps` - Common field properties
+- `FieldWrapperProps` - Wrapper component props
+- Component-specific props (`InputProps`, `SelectProps`, etc.)
+- React Hook Form integration types
+
diff --git a/packages/medusa-forms/registry.json b/packages/medusa-forms/registry.json
new file mode 100644
index 0000000..a1dd062
--- /dev/null
+++ b/packages/medusa-forms/registry.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "name": "medusa-forms",
+  "description": "Controlled form fields for Medusa Admin and Medusa UI",
+  "url": "https://raw.githubusercontent.com/lambda-curry/medusa-forms/main/packages/medusa-forms",
+  "style": "default",
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/styles/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true
+  },
+  "aliases": {
+    "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
new file mode 100644
index 0000000..e90bb6b
--- /dev/null
+++ b/packages/medusa-forms/registry/controlled-checkbox.json
@@ -0,0 +1,18 @@
+{
+  "name": "controlled-checkbox",
+  "type": "registry:ui",
+  "description": "A checkbox component with react-hook-form integration",
+  "dependencies": [
+    "react-hook-form"
+  ],
+  "registryDependencies": [
+    "field-checkbox"
+  ],
+  "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"
+    }
+  ]
+}
+
diff --git a/packages/medusa-forms/registry/controlled-currency-input.json b/packages/medusa-forms/registry/controlled-currency-input.json
new file mode 100644
index 0000000..a3dda62
--- /dev/null
+++ b/packages/medusa-forms/registry/controlled-currency-input.json
@@ -0,0 +1,18 @@
+{
+  "name": "controlled-currency-input",
+  "type": "registry:ui",
+  "description": "A currency-input component with react-hook-form integration",
+  "dependencies": [
+    "react-hook-form"
+  ],
+  "registryDependencies": [
+    "currency-input"
+  ],
+  "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"
+    }
+  ]
+}
+
diff --git a/packages/medusa-forms/registry/controlled-datepicker.json b/packages/medusa-forms/registry/controlled-datepicker.json
new file mode 100644
index 0000000..2ef3679
--- /dev/null
+++ b/packages/medusa-forms/registry/controlled-datepicker.json
@@ -0,0 +1,18 @@
+{
+  "name": "controlled-datepicker",
+  "type": "registry:ui",
+  "description": "A datepicker component with react-hook-form integration",
+  "dependencies": [
+    "react-hook-form"
+  ],
+  "registryDependencies": [
+    "datepicker"
+  ],
+  "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"
+    }
+  ]
+}
+
diff --git a/packages/medusa-forms/registry/controlled-input.json b/packages/medusa-forms/registry/controlled-input.json
new file mode 100644
index 0000000..37ad81d
--- /dev/null
+++ b/packages/medusa-forms/registry/controlled-input.json
@@ -0,0 +1,18 @@
+{
+  "name": "controlled-input",
+  "type": "registry:ui",
+  "description": "An input component with react-hook-form integration",
+  "dependencies": [
+    "react-hook-form"
+  ],
+  "registryDependencies": [
+    "input"
+  ],
+  "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"
+    }
+  ]
+}
+
diff --git a/packages/medusa-forms/registry/controlled-select.json b/packages/medusa-forms/registry/controlled-select.json
new file mode 100644
index 0000000..1ef6e7c
--- /dev/null
+++ b/packages/medusa-forms/registry/controlled-select.json
@@ -0,0 +1,18 @@
+{
+  "name": "controlled-select",
+  "type": "registry:ui",
+  "description": "A select component with react-hook-form integration",
+  "dependencies": [
+    "react-hook-form"
+  ],
+  "registryDependencies": [
+    "select"
+  ],
+  "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"
+    }
+  ]
+}
+
diff --git a/packages/medusa-forms/registry/controlled-textarea.json b/packages/medusa-forms/registry/controlled-textarea.json
new file mode 100644
index 0000000..7c0e763
--- /dev/null
+++ b/packages/medusa-forms/registry/controlled-textarea.json
@@ -0,0 +1,18 @@
+{
+  "name": "controlled-textarea",
+  "type": "registry:ui",
+  "description": "A textarea component with react-hook-form integration",
+  "dependencies": [
+    "react-hook-form"
+  ],
+  "registryDependencies": [
+    "textarea"
+  ],
+  "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"
+    }
+  ]
+}
+
diff --git a/packages/medusa-forms/registry/currency-input.json b/packages/medusa-forms/registry/currency-input.json
new file mode 100644
index 0000000..5f519fa
--- /dev/null
+++ b/packages/medusa-forms/registry/currency-input.json
@@ -0,0 +1,18 @@
+{
+  "name": "currency-input",
+  "type": "registry:ui",
+  "description": "currency-input component",
+  "dependencies": [
+    "@medusajs/ui"
+  ],
+  "registryDependencies": [
+    "field-wrapper"
+  ],
+  "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"
+    }
+  ]
+}
+
diff --git a/packages/medusa-forms/registry/datepicker.json b/packages/medusa-forms/registry/datepicker.json
new file mode 100644
index 0000000..0614e8c
--- /dev/null
+++ b/packages/medusa-forms/registry/datepicker.json
@@ -0,0 +1,18 @@
+{
+  "name": "datepicker",
+  "type": "registry:ui",
+  "description": "datepicker component",
+  "dependencies": [
+    "@medusajs/ui"
+  ],
+  "registryDependencies": [
+    "field-wrapper"
+  ],
+  "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"
+    }
+  ]
+}
+
diff --git a/packages/medusa-forms/registry/field-checkbox.json b/packages/medusa-forms/registry/field-checkbox.json
new file mode 100644
index 0000000..f8f0901
--- /dev/null
+++ b/packages/medusa-forms/registry/field-checkbox.json
@@ -0,0 +1,19 @@
+{
+  "name": "field-checkbox",
+  "type": "registry:ui",
+  "description": "field checkbox component",
+  "dependencies": [
+    "@medusajs/ui"
+  ],
+  "registryDependencies": [
+    "field-wrapper",
+    "label"
+  ],
+  "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"
+    }
+  ]
+}
+
diff --git a/packages/medusa-forms/registry/field-error.json b/packages/medusa-forms/registry/field-error.json
new file mode 100644
index 0000000..3227439
--- /dev/null
+++ b/packages/medusa-forms/registry/field-error.json
@@ -0,0 +1,16 @@
+{
+  "name": "field-error",
+  "type": "registry:ui",
+  "description": "field error 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"
+    }
+  ]
+}
+
diff --git a/packages/medusa-forms/registry/field-wrapper.json b/packages/medusa-forms/registry/field-wrapper.json
new file mode 100644
index 0000000..aa6d049
--- /dev/null
+++ b/packages/medusa-forms/registry/field-wrapper.json
@@ -0,0 +1,23 @@
+{
+  "name": "field-wrapper",
+  "type": "registry:ui",
+  "description": "field wrapper component",
+  "dependencies": [
+    "@medusajs/ui"
+  ],
+  "registryDependencies": [
+    "field-error",
+    "label"
+  ],
+  "files": [
+    {
+      "name": "fieldwrapper.tsx",
+      "content": "/* eslint-disable @typescript-eslint/no-unsafe-assignment */\n\nimport { FieldError } from './Error';\nimport { Label } from './Label';\nimport type { FieldWrapperProps } from './types';\n\nexport const FieldWrapper = <T,>({\n  label,\n  labelClassName,\n  labelTooltip,\n  wrapperClassName,\n  errorClassName,\n  formErrors,\n  name,\n  children,\n  ...props\n}: FieldWrapperProps<T>) => (\n  <div className={wrapperClassName}>\n    {label && (\n      <Label\n        htmlFor={typeof name === 'string' ? name : undefined}\n        tooltip={typeof labelTooltip === 'string' ? labelTooltip : undefined}\n        className={labelClassName}\n      >\n        {label}\n      </Label>\n    )}\n    {children({ ...props, name } as T)}\n    {formErrors && name ? <FieldError className={errorClassName} name={name} errors={formErrors} /> : null}\n  </div>\n);\n"
+    },
+    {
+      "name": "types.d.ts",
+      "content": "import type { CalendarDate, CalendarDateTime, Granularity } from '@internationalized/date';\nimport type { BaseDatePickerProps } from '@medusajs/ui';\nimport type { ReactNode, RefAttributes } from 'react';\nimport type * as React from 'react';\nimport type { Props, SelectInstance } from 'react-select';\nimport type { CreatableProps } from 'react-select/creatable';\n\nexport interface BasicFieldProps {\n  label?: ReactNode;\n  labelClassName?: string;\n  labelTooltip?: ReactNode;\n  wrapperClassName?: string;\n  errorClassName?: string;\n  formErrors?: { [x: string]: unknown };\n  name?: string;\n}\n\nexport interface FieldWrapperProps<T> extends BasicFieldProps, T {\n  children: (args: T) => ReactNode;\n}\n\nexport type TextAreaProps = Omit<\n  React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>,\n  'ref'\n> &\n  React.RefAttributes<HTMLTextAreaElement>;\n\nexport type MedusaCurrencyInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'step'> & {\n  symbol: string;\n  code: string;\n  size?: 'small' | 'base';\n  defaultValue?: string | number;\n  step?: number;\n};\n\nexport type MedusaInputProps = React.InputHTMLAttributes<HTMLInputElement> & {\n  size?: 'small' | 'base';\n};\n\ntype Option = {\n  label: string;\n  value: string;\n};\n\ntype IsMulti = boolean;\ntype Group = {\n  label: string;\n  options: Option[];\n};\n\ntype DatePickerValueProps = {\n  defaultValue?: Date | null;\n  value?: Date | null;\n  onChange?: (value: Date | null) => void;\n  isDateUnavailable?: (date: Date) => boolean;\n  minValue?: Date;\n  maxValue?: Date;\n  shouldCloseOnSelect?: boolean;\n  granularity?: Granularity;\n  size?: 'base' | 'small';\n  className?: string;\n  modal?: boolean;\n};\nexport interface DatePickerProps\n  extends Omit<BaseDatePickerProps<CalendarDateTime | CalendarDate>, keyof DatePickerValueProps>,\n    DatePickerValueProps {}\n\nexport type SearchableSelectProps = Props<Option, IsMulti, Group> &\n  RefAttributes<SelectInstance<Option, IsMulti, Group>>;\n\nexport type CreatableSelectProps = CreatableProps<Option, IsMulti, Group> &\n  RefAttributes<SelectInstance<Option, IsMulti, Group>>;\n\nexport interface SelectProps extends React.ComponentPropsWithRef {\n  size?: 'base' | 'small';\n  children?: React.ReactNode;\n  value?: string;\n  defaultValue?: string;\n  onValueChange?(value: string): void;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?(open: boolean): void;\n  dir?: 'ltr' | 'rtl';\n  name?: string;\n  autoComplete?: string;\n  disabled?: boolean;\n  required?: boolean;\n}\n"
+    }
+  ]
+}
+
diff --git a/packages/medusa-forms/registry/input.json b/packages/medusa-forms/registry/input.json
new file mode 100644
index 0000000..3c16916
--- /dev/null
+++ b/packages/medusa-forms/registry/input.json
@@ -0,0 +1,18 @@
+{
+  "name": "input",
+  "type": "registry:ui",
+  "description": "input component",
+  "dependencies": [
+    "@medusajs/ui"
+  ],
+  "registryDependencies": [
+    "field-wrapper"
+  ],
+  "files": [
+    {
+      "name": "input.tsx",
+      "content": "import { Input as MedusaInput } from '@medusajs/ui';\nimport { forwardRef } from 'react';\nimport { FieldWrapper } from './FieldWrapper';\nimport type { BasicFieldProps, MedusaInputProps } from './types';\n\nexport type InputProps = MedusaInputProps & BasicFieldProps;\n\nconst Wrapper = FieldWrapper<InputProps>;\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => (\n  <Wrapper {...props}>{(inputProps) => <MedusaInput {...inputProps} ref={ref} />}</Wrapper>\n));\n\nInput.displayName = 'Input';\n"
+    }
+  ]
+}
+
diff --git a/packages/medusa-forms/registry/label.json b/packages/medusa-forms/registry/label.json
new file mode 100644
index 0000000..3825b85
--- /dev/null
+++ b/packages/medusa-forms/registry/label.json
@@ -0,0 +1,16 @@
+{
+  "name": "label",
+  "type": "registry:ui",
+  "description": "label component",
+  "dependencies": [
+    "@medusajs/ui"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "name": "label.tsx",
+      "content": "import { InformationCircle } from '@medusajs/icons';\nimport { Label as MedusaLabel, Tooltip } from '@medusajs/ui';\nimport clsx from 'clsx';\nimport type * as React from 'react';\n\nexport interface LabelProps {\n  htmlFor?: string;\n  children: React.ReactNode;\n  tooltip?: string;\n  className?: string;\n  onClick?: () => void;\n}\n\nexport const Label = ({ htmlFor, children, tooltip, className, ...props }: LabelProps) => (\n  <div className={clsx('flex items-center mb-2 text-gray-500 w-full', className)}>\n    <MedusaLabel htmlFor={htmlFor} size=\"xsmall\" {...props}>\n      {children}\n    </MedusaLabel>\n    {tooltip && (\n      <Tooltip content={tooltip}>\n        <div className=\"flex items-center justify-center ml-1\">\n          <InformationCircle className=\"-scale-75\" />\n        </div>\n      </Tooltip>\n    )}\n  </div>\n);\n"
+    }
+  ]
+}
+
diff --git a/packages/medusa-forms/registry/select.json b/packages/medusa-forms/registry/select.json
new file mode 100644
index 0000000..c1ef16b
--- /dev/null
+++ b/packages/medusa-forms/registry/select.json
@@ -0,0 +1,18 @@
+{
+  "name": "select",
+  "type": "registry:ui",
+  "description": "select component",
+  "dependencies": [
+    "@medusajs/ui"
+  ],
+  "registryDependencies": [
+    "field-wrapper"
+  ],
+  "files": [
+    {
+      "name": "select.tsx",
+      "content": "import { Select as MedusaSelect } from '@medusajs/ui';\nimport { forwardRef } from 'react';\nimport { FieldWrapper } from './FieldWrapper';\nimport type { BasicFieldProps, SelectProps as MedusaSelectProps } from './types';\n\nexport type SelectProps = MedusaSelectProps & BasicFieldProps;\n\nconst Wrapper = FieldWrapper<SelectProps>;\n\nconst SelectComponent = forwardRef<unknown, SelectProps>((props, ref) => {\n  return (\n    <Wrapper {...props}>\n      {(inputProps) => <MedusaSelect {...{ ...inputProps, ref }}>{props.children}</MedusaSelect>}\n    </Wrapper>\n  );\n});\n\nSelectComponent.displayName = 'Select';\n\ntype SelectComponent = typeof SelectComponent & {\n  Trigger: typeof MedusaSelect.Trigger;\n  Value: typeof MedusaSelect.Value;\n  Content: typeof MedusaSelect.Content;\n  Item: typeof MedusaSelect.Item;\n};\n\nexport const Select: SelectComponent = Object.assign(SelectComponent, {\n  Trigger: MedusaSelect.Trigger,\n  Value: MedusaSelect.Value,\n  Content: MedusaSelect.Content,\n  Item: MedusaSelect.Item,\n});\n"
+    }
+  ]
+}
+
diff --git a/packages/medusa-forms/registry/textarea.json b/packages/medusa-forms/registry/textarea.json
new file mode 100644
index 0000000..9c42a17
--- /dev/null
+++ b/packages/medusa-forms/registry/textarea.json
@@ -0,0 +1,18 @@
+{
+  "name": "textarea",
+  "type": "registry:ui",
+  "description": "textarea component",
+  "dependencies": [
+    "@medusajs/ui"
+  ],
+  "registryDependencies": [
+    "field-wrapper"
+  ],
+  "files": [
+    {
+      "name": "textarea.tsx",
+      "content": "import { Textarea } from '@medusajs/ui';\nimport { forwardRef } from 'react';\nimport { FieldWrapper } from './FieldWrapper';\nimport type { BasicFieldProps, TextAreaProps as MedusaTextAreaProps } from './types';\n\nexport type TextAreaProps = MedusaTextAreaProps & BasicFieldProps;\n\nconst Wrapper = FieldWrapper<TextAreaProps>;\n\nexport const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>((props, ref) => (\n  <Wrapper {...props}>{(inputProps) => <Textarea {...inputProps} ref={ref} />}</Wrapper>\n));\n\nTextArea.displayName = 'TextArea';\n"
+    }
+  ]
+}
+

From c70b7b780fa4e89fb130e1f9472ccfcb6d642259 Mon Sep 17 00:00:00 2001
From: "codegen-sh[bot]" <131295404+codegen-sh[bot]@users.noreply.github.com>
Date: Wed, 4 Jun 2025 23:16:38 +0000
Subject: [PATCH 2/2] feat: improve registry maintenance with automated build
 script

- 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.
---
 packages/medusa-forms/REGISTRY.md             |  28 ++-
 packages/medusa-forms/package.json            |   1 +
 packages/medusa-forms/registry.json           |   3 +-
 .../registry/controlled-checkbox.json         |   7 +-
 .../registry/controlled-currency-input.json   |   7 +-
 .../registry/controlled-datepicker.json       |   7 +-
 .../registry/controlled-input.json            |   7 +-
 .../registry/controlled-select.json           |   7 +-
 .../registry/controlled-textarea.json         |   7 +-
 .../medusa-forms/registry/currency-input.json |   7 +-
 .../medusa-forms/registry/datepicker.json     |   7 +-
 .../medusa-forms/registry/field-checkbox.json |   7 +-
 .../medusa-forms/registry/field-error.json    |   7 +-
 .../medusa-forms/registry/field-wrapper.json  |   9 +-
 packages/medusa-forms/registry/input.json     |   7 +-
 packages/medusa-forms/registry/label.json     |   7 +-
 packages/medusa-forms/registry/select.json    |   7 +-
 packages/medusa-forms/registry/textarea.json  |   7 +-
 .../medusa-forms/scripts/build-registry.js    | 225 ++++++++++++++++++
 19 files changed, 300 insertions(+), 64 deletions(-)
 create mode 100644 packages/medusa-forms/scripts/build-registry.js

diff --git a/packages/medusa-forms/REGISTRY.md b/packages/medusa-forms/REGISTRY.md
index e9540a8..9df9924 100644
--- 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
index cc89ff4..b4557e4 100644
--- 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
index a1dd062..e769ba0 100644
--- a/packages/medusa-forms/registry.json
+++ b/packages/medusa-forms/registry.json
@@ -14,5 +14,4 @@
     "components": "src/components",
     "utils": "src/lib/utils"
   }
-}
-
+}
\ No newline at end of file
diff --git a/packages/medusa-forms/registry/controlled-checkbox.json b/packages/medusa-forms/registry/controlled-checkbox.json
index e90bb6b..8dde63b 100644
--- 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"
     }
   ]
-}
-
+}
\ No newline at end of file
diff --git a/packages/medusa-forms/registry/controlled-currency-input.json b/packages/medusa-forms/registry/controlled-currency-input.json
index a3dda62..0fe2a25 100644
--- 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"
     }
   ]
-}
-
+}
\ No newline at end of file
diff --git a/packages/medusa-forms/registry/controlled-datepicker.json b/packages/medusa-forms/registry/controlled-datepicker.json
index 2ef3679..43f4742 100644
--- 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"
     }
   ]
-}
-
+}
\ No newline at end of file
diff --git a/packages/medusa-forms/registry/controlled-input.json b/packages/medusa-forms/registry/controlled-input.json
index 37ad81d..325fe2f 100644
--- 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"
     }
   ]
-}
-
+}
\ No newline at end of file
diff --git a/packages/medusa-forms/registry/controlled-select.json b/packages/medusa-forms/registry/controlled-select.json
index 1ef6e7c..1771722 100644
--- 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"
     }
   ]
-}
-
+}
\ No newline at end of file
diff --git a/packages/medusa-forms/registry/controlled-textarea.json b/packages/medusa-forms/registry/controlled-textarea.json
index 7c0e763..d3ecb01 100644
--- 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"
     }
   ]
-}
-
+}
\ No newline at end of file
diff --git a/packages/medusa-forms/registry/currency-input.json b/packages/medusa-forms/registry/currency-input.json
index 5f519fa..a8de433 100644
--- 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"
     }
   ]
-}
-
+}
\ No newline at end of file
diff --git a/packages/medusa-forms/registry/datepicker.json b/packages/medusa-forms/registry/datepicker.json
index 0614e8c..558709f 100644
--- 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"
     }
   ]
-}
-
+}
\ No newline at end of file
diff --git a/packages/medusa-forms/registry/field-checkbox.json b/packages/medusa-forms/registry/field-checkbox.json
index f8f0901..8dcc94d 100644
--- 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"
     }
   ]
-}
-
+}
\ No newline at end of file
diff --git a/packages/medusa-forms/registry/field-error.json b/packages/medusa-forms/registry/field-error.json
index 3227439..a679075 100644
--- a/packages/medusa-forms/registry/field-error.json
+++ b/packages/medusa-forms/registry/field-error.json
@@ -1,7 +1,7 @@
 {
   "name": "field-error",
   "type": "registry:ui",
-  "description": "field error component",
+  "description": "Error display component",
   "dependencies": [
     "@medusajs/ui"
   ],
@@ -9,8 +9,7 @@
   "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"
     }
   ]
-}
-
+}
\ No newline at end of file
diff --git a/packages/medusa-forms/registry/field-wrapper.json b/packages/medusa-forms/registry/field-wrapper.json
index aa6d049..baaf516 100644
--- a/packages/medusa-forms/registry/field-wrapper.json
+++ b/packages/medusa-forms/registry/field-wrapper.json
@@ -1,7 +1,7 @@
 {
   "name": "field-wrapper",
   "type": "registry:ui",
-  "description": "field wrapper component",
+  "description": "Core wrapper component with error handling and labels",
   "dependencies": [
     "@medusajs/ui"
   ],
@@ -12,12 +12,11 @@
   "files": [
     {
       "name": "fieldwrapper.tsx",
-      "content": "/* eslint-disable @typescript-eslint/no-unsafe-assignment */\n\nimport { FieldError } from './Error';\nimport { Label } from './Label';\nimport type { FieldWrapperProps } from './types';\n\nexport const FieldWrapper = <T,>({\n  label,\n  labelClassName,\n  labelTooltip,\n  wrapperClassName,\n  errorClassName,\n  formErrors,\n  name,\n  children,\n  ...props\n}: FieldWrapperProps<T>) => (\n  <div className={wrapperClassName}>\n    {label && (\n      <Label\n        htmlFor={typeof name === 'string' ? name : undefined}\n        tooltip={typeof labelTooltip === 'string' ? labelTooltip : undefined}\n        className={labelClassName}\n      >\n        {label}\n      </Label>\n    )}\n    {children({ ...props, name } as T)}\n    {formErrors && name ? <FieldError className={errorClassName} name={name} errors={formErrors} /> : null}\n  </div>\n);\n"
+      "path": "src/ui/FieldWrapper.tsx"
     },
     {
       "name": "types.d.ts",
-      "content": "import type { CalendarDate, CalendarDateTime, Granularity } from '@internationalized/date';\nimport type { BaseDatePickerProps } from '@medusajs/ui';\nimport type { ReactNode, RefAttributes } from 'react';\nimport type * as React from 'react';\nimport type { Props, SelectInstance } from 'react-select';\nimport type { CreatableProps } from 'react-select/creatable';\n\nexport interface BasicFieldProps {\n  label?: ReactNode;\n  labelClassName?: string;\n  labelTooltip?: ReactNode;\n  wrapperClassName?: string;\n  errorClassName?: string;\n  formErrors?: { [x: string]: unknown };\n  name?: string;\n}\n\nexport interface FieldWrapperProps<T> extends BasicFieldProps, T {\n  children: (args: T) => ReactNode;\n}\n\nexport type TextAreaProps = Omit<\n  React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>,\n  'ref'\n> &\n  React.RefAttributes<HTMLTextAreaElement>;\n\nexport type MedusaCurrencyInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'step'> & {\n  symbol: string;\n  code: string;\n  size?: 'small' | 'base';\n  defaultValue?: string | number;\n  step?: number;\n};\n\nexport type MedusaInputProps = React.InputHTMLAttributes<HTMLInputElement> & {\n  size?: 'small' | 'base';\n};\n\ntype Option = {\n  label: string;\n  value: string;\n};\n\ntype IsMulti = boolean;\ntype Group = {\n  label: string;\n  options: Option[];\n};\n\ntype DatePickerValueProps = {\n  defaultValue?: Date | null;\n  value?: Date | null;\n  onChange?: (value: Date | null) => void;\n  isDateUnavailable?: (date: Date) => boolean;\n  minValue?: Date;\n  maxValue?: Date;\n  shouldCloseOnSelect?: boolean;\n  granularity?: Granularity;\n  size?: 'base' | 'small';\n  className?: string;\n  modal?: boolean;\n};\nexport interface DatePickerProps\n  extends Omit<BaseDatePickerProps<CalendarDateTime | CalendarDate>, keyof DatePickerValueProps>,\n    DatePickerValueProps {}\n\nexport type SearchableSelectProps = Props<Option, IsMulti, Group> &\n  RefAttributes<SelectInstance<Option, IsMulti, Group>>;\n\nexport type CreatableSelectProps = CreatableProps<Option, IsMulti, Group> &\n  RefAttributes<SelectInstance<Option, IsMulti, Group>>;\n\nexport interface SelectProps extends React.ComponentPropsWithRef {\n  size?: 'base' | 'small';\n  children?: React.ReactNode;\n  value?: string;\n  defaultValue?: string;\n  onValueChange?(value: string): void;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?(open: boolean): void;\n  dir?: 'ltr' | 'rtl';\n  name?: string;\n  autoComplete?: string;\n  disabled?: boolean;\n  required?: boolean;\n}\n"
+      "path": "src/ui/types.d.ts"
     }
   ]
-}
-
+}
\ No newline at end of file
diff --git a/packages/medusa-forms/registry/input.json b/packages/medusa-forms/registry/input.json
index 3c16916..82b8e85 100644
--- a/packages/medusa-forms/registry/input.json
+++ b/packages/medusa-forms/registry/input.json
@@ -1,7 +1,7 @@
 {
   "name": "input",
   "type": "registry:ui",
-  "description": "input component",
+  "description": "Base input component",
   "dependencies": [
     "@medusajs/ui"
   ],
@@ -11,8 +11,7 @@
   "files": [
     {
       "name": "input.tsx",
-      "content": "import { Input as MedusaInput } from '@medusajs/ui';\nimport { forwardRef } from 'react';\nimport { FieldWrapper } from './FieldWrapper';\nimport type { BasicFieldProps, MedusaInputProps } from './types';\n\nexport type InputProps = MedusaInputProps & BasicFieldProps;\n\nconst Wrapper = FieldWrapper<InputProps>;\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => (\n  <Wrapper {...props}>{(inputProps) => <MedusaInput {...inputProps} ref={ref} />}</Wrapper>\n));\n\nInput.displayName = 'Input';\n"
+      "path": "src/ui/Input.tsx"
     }
   ]
-}
-
+}
\ No newline at end of file
diff --git a/packages/medusa-forms/registry/label.json b/packages/medusa-forms/registry/label.json
index 3825b85..c5aeb7c 100644
--- a/packages/medusa-forms/registry/label.json
+++ b/packages/medusa-forms/registry/label.json
@@ -1,7 +1,7 @@
 {
   "name": "label",
   "type": "registry:ui",
-  "description": "label component",
+  "description": "Label component with tooltip support",
   "dependencies": [
     "@medusajs/ui"
   ],
@@ -9,8 +9,7 @@
   "files": [
     {
       "name": "label.tsx",
-      "content": "import { InformationCircle } from '@medusajs/icons';\nimport { Label as MedusaLabel, Tooltip } from '@medusajs/ui';\nimport clsx from 'clsx';\nimport type * as React from 'react';\n\nexport interface LabelProps {\n  htmlFor?: string;\n  children: React.ReactNode;\n  tooltip?: string;\n  className?: string;\n  onClick?: () => void;\n}\n\nexport const Label = ({ htmlFor, children, tooltip, className, ...props }: LabelProps) => (\n  <div className={clsx('flex items-center mb-2 text-gray-500 w-full', className)}>\n    <MedusaLabel htmlFor={htmlFor} size=\"xsmall\" {...props}>\n      {children}\n    </MedusaLabel>\n    {tooltip && (\n      <Tooltip content={tooltip}>\n        <div className=\"flex items-center justify-center ml-1\">\n          <InformationCircle className=\"-scale-75\" />\n        </div>\n      </Tooltip>\n    )}\n  </div>\n);\n"
+      "path": "src/ui/Label.tsx"
     }
   ]
-}
-
+}
\ No newline at end of file
diff --git a/packages/medusa-forms/registry/select.json b/packages/medusa-forms/registry/select.json
index c1ef16b..aca86f4 100644
--- a/packages/medusa-forms/registry/select.json
+++ b/packages/medusa-forms/registry/select.json
@@ -1,7 +1,7 @@
 {
   "name": "select",
   "type": "registry:ui",
-  "description": "select component",
+  "description": "Base select component",
   "dependencies": [
     "@medusajs/ui"
   ],
@@ -11,8 +11,7 @@
   "files": [
     {
       "name": "select.tsx",
-      "content": "import { Select as MedusaSelect } from '@medusajs/ui';\nimport { forwardRef } from 'react';\nimport { FieldWrapper } from './FieldWrapper';\nimport type { BasicFieldProps, SelectProps as MedusaSelectProps } from './types';\n\nexport type SelectProps = MedusaSelectProps & BasicFieldProps;\n\nconst Wrapper = FieldWrapper<SelectProps>;\n\nconst SelectComponent = forwardRef<unknown, SelectProps>((props, ref) => {\n  return (\n    <Wrapper {...props}>\n      {(inputProps) => <MedusaSelect {...{ ...inputProps, ref }}>{props.children}</MedusaSelect>}\n    </Wrapper>\n  );\n});\n\nSelectComponent.displayName = 'Select';\n\ntype SelectComponent = typeof SelectComponent & {\n  Trigger: typeof MedusaSelect.Trigger;\n  Value: typeof MedusaSelect.Value;\n  Content: typeof MedusaSelect.Content;\n  Item: typeof MedusaSelect.Item;\n};\n\nexport const Select: SelectComponent = Object.assign(SelectComponent, {\n  Trigger: MedusaSelect.Trigger,\n  Value: MedusaSelect.Value,\n  Content: MedusaSelect.Content,\n  Item: MedusaSelect.Item,\n});\n"
+      "path": "src/ui/Select.tsx"
     }
   ]
-}
-
+}
\ No newline at end of file
diff --git a/packages/medusa-forms/registry/textarea.json b/packages/medusa-forms/registry/textarea.json
index 9c42a17..231aeb0 100644
--- a/packages/medusa-forms/registry/textarea.json
+++ b/packages/medusa-forms/registry/textarea.json
@@ -1,7 +1,7 @@
 {
   "name": "textarea",
   "type": "registry:ui",
-  "description": "textarea component",
+  "description": "Base textarea component",
   "dependencies": [
     "@medusajs/ui"
   ],
@@ -11,8 +11,7 @@
   "files": [
     {
       "name": "textarea.tsx",
-      "content": "import { Textarea } from '@medusajs/ui';\nimport { forwardRef } from 'react';\nimport { FieldWrapper } from './FieldWrapper';\nimport type { BasicFieldProps, TextAreaProps as MedusaTextAreaProps } from './types';\n\nexport type TextAreaProps = MedusaTextAreaProps & BasicFieldProps;\n\nconst Wrapper = FieldWrapper<TextAreaProps>;\n\nexport const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>((props, ref) => (\n  <Wrapper {...props}>{(inputProps) => <Textarea {...inputProps} ref={ref} />}</Wrapper>\n));\n\nTextArea.displayName = 'TextArea';\n"
+      "path": "src/ui/TextArea.tsx"
     }
   ]
-}
-
+}
\ No newline at end of file
diff --git a/packages/medusa-forms/scripts/build-registry.js b/packages/medusa-forms/scripts/build-registry.js
new file mode 100644
index 0000000..5dbf56b
--- /dev/null
+++ b/packages/medusa-forms/scripts/build-registry.js
@@ -0,0 +1,225 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const path = require('path');
+
+// Component metadata configuration
+const COMPONENTS = {
+  // Base UI Components
+  'field-wrapper': {
+    description: 'Core wrapper component with error handling and labels',
+    dependencies: ['@medusajs/ui'],
+    registryDependencies: ['field-error', 'label'],
+    files: [
+      { name: 'fieldwrapper.tsx', path: 'src/ui/FieldWrapper.tsx' },
+      { name: 'types.d.ts', path: 'src/ui/types.d.ts' }
+    ]
+  },
+  'field-error': {
+    description: 'Error display component',
+    dependencies: ['@medusajs/ui'],
+    registryDependencies: [],
+    files: [
+      { name: 'error.tsx', path: 'src/ui/Error.tsx' }
+    ]
+  },
+  'label': {
+    description: 'Label component with tooltip support',
+    dependencies: ['@medusajs/ui'],
+    registryDependencies: [],
+    files: [
+      { name: 'label.tsx', path: 'src/ui/Label.tsx' }
+    ]
+  },
+  'input': {
+    description: 'Base input component',
+    dependencies: ['@medusajs/ui'],
+    registryDependencies: ['field-wrapper'],
+    files: [
+      { name: 'input.tsx', path: 'src/ui/Input.tsx' }
+    ]
+  },
+  'select': {
+    description: 'Base select component',
+    dependencies: ['@medusajs/ui'],
+    registryDependencies: ['field-wrapper'],
+    files: [
+      { name: 'select.tsx', path: 'src/ui/Select.tsx' }
+    ]
+  },
+  'field-checkbox': {
+    description: 'Base checkbox component',
+    dependencies: ['@medusajs/ui'],
+    registryDependencies: ['field-wrapper', 'label'],
+    files: [
+      { name: 'fieldcheckbox.tsx', path: 'src/ui/FieldCheckbox.tsx' }
+    ]
+  },
+  'textarea': {
+    description: 'Base textarea component',
+    dependencies: ['@medusajs/ui'],
+    registryDependencies: ['field-wrapper'],
+    files: [
+      { name: 'textarea.tsx', path: 'src/ui/TextArea.tsx' }
+    ]
+  },
+  'datepicker': {
+    description: 'Base datepicker component',
+    dependencies: ['@medusajs/ui'],
+    registryDependencies: ['field-wrapper'],
+    files: [
+      { name: 'datepicker.tsx', path: 'src/ui/DatePicker.tsx' }
+    ]
+  },
+  'currency-input': {
+    description: 'Base currency input component',
+    dependencies: ['@medusajs/ui'],
+    registryDependencies: ['field-wrapper'],
+    files: [
+      { name: 'currency-input.tsx', path: 'src/ui/CurrencyInput.tsx' }
+    ]
+  },
+
+  // Controlled Components
+  'controlled-input': {
+    description: 'Input component with react-hook-form integration',
+    dependencies: ['react-hook-form'],
+    registryDependencies: ['input'],
+    files: [
+      { name: 'controlled-input.tsx', path: 'src/controlled/ControlledInput.tsx' }
+    ]
+  },
+  'controlled-select': {
+    description: 'Select component with react-hook-form integration',
+    dependencies: ['react-hook-form'],
+    registryDependencies: ['select'],
+    files: [
+      { name: 'controlled-select.tsx', path: 'src/controlled/ControlledSelect.tsx' }
+    ]
+  },
+  'controlled-checkbox': {
+    description: 'Checkbox component with react-hook-form integration',
+    dependencies: ['react-hook-form'],
+    registryDependencies: ['field-checkbox'],
+    files: [
+      { name: 'controlled-checkbox.tsx', path: 'src/controlled/ControlledCheckbox.tsx' }
+    ]
+  },
+  'controlled-textarea': {
+    description: 'Textarea component with react-hook-form integration',
+    dependencies: ['react-hook-form'],
+    registryDependencies: ['textarea'],
+    files: [
+      { name: 'controlled-textarea.tsx', path: 'src/controlled/ControlledTextArea.tsx' }
+    ]
+  },
+  'controlled-datepicker': {
+    description: 'DatePicker component with react-hook-form integration',
+    dependencies: ['react-hook-form'],
+    registryDependencies: ['datepicker'],
+    files: [
+      { name: 'controlled-datepicker.tsx', path: 'src/controlled/ControlledDatePicker.tsx' }
+    ]
+  },
+  'controlled-currency-input': {
+    description: 'CurrencyInput component with react-hook-form integration',
+    dependencies: ['react-hook-form'],
+    registryDependencies: ['currency-input'],
+    files: [
+      { name: 'controlled-currency-input.tsx', path: 'src/controlled/ControlledCurrencyInput.tsx' }
+    ]
+  }
+};
+
+function generateRegistryItem(componentName, config) {
+  return {
+    name: componentName,
+    type: 'registry:ui',
+    description: config.description,
+    dependencies: config.dependencies,
+    registryDependencies: config.registryDependencies,
+    files: config.files.map(file => ({
+      name: file.name,
+      path: file.path
+    }))
+  };
+}
+
+function ensureDirectoryExists(dirPath) {
+  if (!fs.existsSync(dirPath)) {
+    fs.mkdirSync(dirPath, { recursive: true });
+  }
+}
+
+function buildRegistry() {
+  console.log('🏗️  Building medusa-forms registry...');
+  
+  const registryDir = path.join(__dirname, '../registry');
+  ensureDirectoryExists(registryDir);
+
+  // Generate individual component registry files
+  Object.entries(COMPONENTS).forEach(([componentName, config]) => {
+    const registryItem = generateRegistryItem(componentName, config);
+    const filePath = path.join(registryDir, `${componentName}.json`);
+    
+    fs.writeFileSync(filePath, JSON.stringify(registryItem, null, 2));
+    console.log(`✅ Generated ${componentName}.json`);
+  });
+
+  // Update main registry.json with component list
+  const mainRegistry = {
+    "$schema": "https://ui.shadcn.com/schema.json",
+    "name": "medusa-forms",
+    "description": "Controlled form fields for Medusa Admin and Medusa UI",
+    "url": "https://raw.githubusercontent.com/lambda-curry/medusa-forms/main/packages/medusa-forms",
+    "style": "default",
+    "tailwind": {
+      "config": "tailwind.config.js",
+      "css": "src/styles/globals.css",
+      "baseColor": "slate",
+      "cssVariables": true
+    },
+    "aliases": {
+      "components": "src/components",
+      "utils": "src/lib/utils"
+    }
+  };
+
+  const mainRegistryPath = path.join(__dirname, '../registry.json');
+  fs.writeFileSync(mainRegistryPath, JSON.stringify(mainRegistry, null, 2));
+  console.log('✅ Updated main registry.json');
+
+  console.log(`🎉 Registry build complete! Generated ${Object.keys(COMPONENTS).length} component files.`);
+}
+
+// Validate that source files exist
+function validateSourceFiles() {
+  console.log('🔍 Validating source files...');
+  
+  let allValid = true;
+  Object.entries(COMPONENTS).forEach(([componentName, config]) => {
+    config.files.forEach(file => {
+      const fullPath = path.join(__dirname, '..', file.path);
+      if (!fs.existsSync(fullPath)) {
+        console.error(`❌ Missing source file: ${file.path} for component ${componentName}`);
+        allValid = false;
+      }
+    });
+  });
+
+  if (!allValid) {
+    console.error('❌ Some source files are missing. Please check the file paths.');
+    process.exit(1);
+  }
+
+  console.log('✅ All source files validated');
+}
+
+// Main execution
+if (require.main === module) {
+  validateSourceFiles();
+  buildRegistry();
+}
+
+module.exports = { buildRegistry, COMPONENTS };
+