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>

Author: codegen-sh[bot]

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
+

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"
+  }
+}
+

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"
+    }
+  ]
+}
+

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"
+    }
+  ]
+}
+

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"
+    }
+  ]
+}
+

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"
+    }
+  ]
+}
+

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"
+    }
+  ]
+}
+

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"
+    }
+  ]
+}
+

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"
+    }
+  ]
+}
+

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"
+    }
+  ]
+}
+