chore: update dependencies and improve medusa-forms structure

- Updated remix-hook-form to version 7.0.1 across multiple package.json files.
- Added new dependencies: @hookform/error-message and @hookform/resolvers in apps/docs.
- Enhanced tsconfig paths for medusa-forms to include src and lib directories.
- Refactored ControlledInput component to use ComponentProps for better type safety.
- Removed unused index.ts file from controlled directory in medusa-forms.
- Improved error handling in Error component for better readability and performance.
- Updated main.css for consistent Tailwind CSS imports and added Medusa UI tokens.

Author: jaruesink

.cursor/rules/monorepo-organization.mdc

@@ -1,6 +1,7 @@
 ---
-type: Always
 description: Monorepo structure and import conventions for the lambda-curry/forms repository
+globs: 
+alwaysApply: false
 ---
 
 You are an expert in monorepo architecture, package management, and TypeScript module organization.
@@ -169,7 +170,7 @@ src/
 {
   "peerDependencies": {
     "react": "^19.0.0",
-    "remix-hook-form": "7.0.0"
+    "remix-hook-form": "7.0.1"
   },
   "dependencies": {
     "@radix-ui/react-slot": "^1.1.2",

apps/docs/package.json

@@ -11,6 +11,8 @@
     "test:local": "test-storybook"
   },
   "dependencies": {
+    "@hookform/error-message": "^2.0.0",
+    "@hookform/resolvers": "^3.9.1",
     "@lambdacurry/forms": "*",
     "@lambdacurry/medusa-forms": "*",
     "@storybook/addon-essentials": "^8.6.7",
@@ -20,22 +22,25 @@
     "@storybook/react": "^8.6.7",
     "@storybook/react-vite": "^8.6.7",
     "@storybook/test": "^8.6.7",
+    "react": "^19.0.0",
     "react-hook-form": "^7.51.0",
+    "react-router": "^7.0.0",
+    "react-router-dom": "^7.0.0",
+    "remix-hook-form": "^7.0.1",
     "storybook": "^8.6.7"
   },
   "devDependencies": {
+    "@medusajs/ui-preset": "^2.8.3",
     "@react-router/dev": "^7.0.0",
     "@storybook/test-runner": "^0.22.0",
     "@storybook/testing-library": "^0.2.2",
+    "@tailwindcss/postcss": "^4.1.8",
     "@tailwindcss/vite": "^4.0.0",
     "@types/react": "^19.0.0",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
     "autoprefixer": "^10.4.20",
     "http-server": "^14.1.1",
-    "react": "^19.0.0",
-    "react-router": "^7.0.0",
-    "react-router-dom": "^7.0.0",
     "start-server-and-test": "^2.0.11",
     "tailwindcss": "^4.0.0",
     "typescript": "^5.7.2",

apps/docs/src/main.css

@@ -1,4 +1,4 @@
-import { ControlledInput } from '@lambdacurry/medusa-forms/controlled';
+import { ControlledInput } from '@lambdacurry/medusa-forms/controlled/ControlledInput';
 import type { Meta, StoryObj } from '@storybook/react';
 import { FormProvider, useForm } from 'react-hook-form';
 
@@ -24,17 +24,17 @@ const ControlledInputWithHookForm = () => {
   return (
     <FormProvider {...form}>
       <div className="w-[400px]">
-        <ControlledInput
-          name="username"
-          label="Username"
-          placeholder="Enter your username"
-          description="This is your unique identifier"
-        />
+        <ControlledInput name="username" label="Username" placeholder="Enter your username" />
       </div>
     </FormProvider>
   );
 };
 
 export const WithReactHookForm: Story = {
+  args: {
+    name: 'username',
+    label: 'Username',
+    placeholder: 'Enter your username',
+  },
   render: () => <ControlledInputWithHookForm />,
 };

apps/docs/src/medusa-forms/ControlledInput.stories.tsx

@@ -5,7 +5,9 @@
     "moduleResolution": "bundler",
     "paths": {
       "@lambdacurry/forms/*": ["../../packages/components/src/*"],
-      "@lambdacurry/forms/lib/*": ["../../packages/components/lib/*"]
+      "@lambdacurry/forms/lib/*": ["../../packages/components/lib/*"],
+      "@lambdacurry/medusa-forms/*": ["../../packages/medusa-forms/src/*"],
+      "@lambdacurry/medusa-forms/lib/*": ["../../packages/medusa-forms/lib/*"]
     }
   },
   "include": ["lib", "src"],

apps/docs/tsconfig.json

@@ -12,6 +12,8 @@ export default defineConfig({
       '@/lib/utils': path.resolve(__dirname, '../../packages/components/lib/utils'),
       '@lambdacurry/forms': path.resolve(__dirname, '../../packages/components/src'),
       '@lambdacurry/forms/lib': path.resolve(__dirname, '../../packages/components/lib'),
+      '@lambdacurry/medusa-forms': path.resolve(__dirname, '../../packages/medusa-forms/src'),
+      '@lambdacurry/medusa-forms/lib': path.resolve(__dirname, '../../packages/medusa-forms/lib'),
     },
   },
   build: {

apps/docs/vite.config.mjs

@@ -36,7 +36,7 @@
   },
   "peerDependencies": {
     "react": "^19.0.0",
-    "remix-hook-form": "7.0.0"
+    "remix-hook-form": "7.0.1"
   },
   "dependencies": {
     "@hookform/resolvers": "^3.9.1",
@@ -66,7 +66,7 @@
     "react-hook-form": "^7.53.1",
     "react-router": "^7.0.0",
     "react-router-dom": "^7.0.0",
-    "remix-hook-form": "7.0.0",
+    "remix-hook-form": "7.0.1",
     "sonner": "^1.7.1",
     "tailwind-merge": "^2.5.5",
     "tailwindcss-animate": "^1.0.7",

packages/components/package.json

@@ -1,3 +1,4 @@
+import type { ComponentProps } from 'react';
 import {
   Controller,
   type ControllerProps,
@@ -12,7 +13,7 @@ type Props<T extends FieldValues> = InputProps &
   Omit<ControllerProps, 'render'> & {
     name: Path<T>;
     rules?: Omit<RegisterOptions<T, Path<T>>, 'disabled' | 'valueAsNumber' | 'valueAsDate' | 'setValueAs'>;
-  } & React.ComponentProps<typeof Input> &
+  } & ComponentProps<typeof Input> &
   Omit<ControllerProps<T>, 'render'>;
 
 export const ControlledInput = <T extends FieldValues>({ name, rules, onChange, ...props }: Props<T>) => {

packages/medusa-forms/src/controlled/ControlledInput.tsx

@@ -25,8 +25,9 @@ const MultipleMessages = ({ messages }: { messages: MultipleFieldErrors }) => {
             <div className="inter-small-regular text-rose-50">
               {remainderErrors.map((e, i) => {
                 return (
+                  // biome-ignore lint/suspicious/noArrayIndexKey: index is the best option here
                   <p key={i}>
-                    {Array.from(Array(i + 1)).map((_) => '*')}
+                    {Array.from(new Array(remainderErrors.length)).map((_) => '*')}
                     {e}
                   </p>
                 );
@@ -44,9 +45,7 @@ const MultipleMessages = ({ messages }: { messages: MultipleFieldErrors }) => {
 };
 
 export const FieldError = ({ errors, name, className }: Props) => {
-  if (!errors || !name) {
-    return null;
-  }
+  if (!(errors && name)) return null;
 
   return (
     <ErrorMessage