diff --git a/.github/workflows/pr-quality-checks.yml b/.github/workflows/pr-quality-checks.yml
new file mode 100644
index 00000000..3be5a8c4
--- /dev/null
+++ b/.github/workflows/pr-quality-checks.yml
@@ -0,0 +1,66 @@
+name: PR Quality Checks
+
+on:
+  pull_request:
+    paths:
+      - 'apps/**'
+      - 'packages/**'
+      - '.github/workflows/**'
+      - '*.json'
+      - '*.js'
+      - '*.ts'
+      - '*.tsx'
+      - 'yarn.lock'
+      - 'turbo.json'
+      - 'biome.json'
+      - '!**/*.md'
+      - '!**/*.txt'
+  workflow_dispatch:
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number }}
+  cancel-in-progress: true
+
+jobs:
+  quality-checks:
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '22.9.0'
+
+      - name: Setup Yarn Corepack
+        run: corepack enable
+
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Cache Turbo
+        uses: actions/cache@v4
+        with:
+          path: .turbo
+          key: ${{ runner.os }}-turbo-${{ github.ref_name }}-${{ hashFiles('**/yarn.lock') }}-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-turbo-${{ github.ref_name }}-${{ hashFiles('**/yarn.lock') }}-
+            ${{ runner.os }}-turbo-${{ github.ref_name }}-
+            ${{ runner.os }}-turbo-
+
+      - name: Run Turbo lint
+        run: yarn turbo run lint
+
+      - name: Run Turbo typecheck
+        run: yarn turbo run type-check --filter=@lambdacurry/forms
+
+      - name: Summary
+        run: |
+          echo "## PR Quality Checks Summary" >> $GITHUB_STEP_SUMMARY
+          echo "✅ Linting passed (Biome)" >> $GITHUB_STEP_SUMMARY
+          echo "✅ TypeScript compilation passed" >> $GITHUB_STEP_SUMMARY
+          echo "✅ All checks completed with Turbo caching" >> $GITHUB_STEP_SUMMARY
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 9052de7d..98647df4 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -24,11 +24,8 @@
     "source.fixAll.biome": "explicit",
     "source.organizeImports.biome": "explicit"
   },
-  "tailwindCSS.classAttributes": [
-    "class",
-    "className",
-    "ngClass",
-    "class:list",
-    "wrapperClassName"
-  ]
-}
\ No newline at end of file
+  "tailwindCSS.classAttributes": ["class", "className", "ngClass", "class:list", "wrapperClassName"],
+  "[jsonc]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  }
+}
diff --git a/apps/docs/package.json b/apps/docs/package.json
index aa7cc625..5c78bc60 100644
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -31,6 +31,9 @@
     "@storybook/testing-library": "^0.2.2",
     "@tailwindcss/postcss": "^4.1.8",
     "@tailwindcss/vite": "^4.0.0",
+    "@testing-library/jest-dom": "^6.8.0",
+    "@testing-library/react": "^16.3.0",
+    "@types/jest": "^30.0.0",
     "@types/react": "^19.0.0",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
diff --git a/apps/docs/src/examples/middleware-example.tsx b/apps/docs/src/examples/middleware-example.tsx
index 7faf2ed0..c1cf3a9c 100644
--- a/apps/docs/src/examples/middleware-example.tsx
+++ b/apps/docs/src/examples/middleware-example.tsx
@@ -33,11 +33,7 @@ export const action = async ({ context }: ActionFunctionArgs) => {
 
 // Component
 export default function MiddlewareExample() {
-  const {
-    handleSubmit,
-    formState: { errors },
-    register,
-  } = useRemixForm<FormData>({
+  const methods = useRemixForm<FormData>({
     mode: 'onSubmit',
     resolver,
   });
@@ -46,12 +42,12 @@ export default function MiddlewareExample() {
     <div className="p-4">
       <h1 className="text-2xl font-bold mb-4">Remix Hook Form v7 Middleware Example</h1>
 
-      <RemixFormProvider>
-        <Form method="POST" onSubmit={handleSubmit}>
+      <RemixFormProvider {...methods}>
+        <Form method="POST" onSubmit={methods.handleSubmit}>
           <div className="space-y-4">
-            <TextField label="Name" {...register('name')} error={errors.name?.message} />
+            <TextField name="name" label="Name" />
 
-            <TextField label="Email" type="email" {...register('email')} error={errors.email?.message} />
+            <TextField name="email" type="email" label="Email" />
 
             <button type="submit" className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
               Submit
diff --git a/apps/docs/src/remix-hook-form/checkbox-list.stories.tsx b/apps/docs/src/remix-hook-form/checkbox-list.stories.tsx
index 9adbba17..02d67bba 100644
--- a/apps/docs/src/remix-hook-form/checkbox-list.stories.tsx
+++ b/apps/docs/src/remix-hook-form/checkbox-list.stories.tsx
@@ -3,7 +3,7 @@ import { Checkbox } from '@lambdacurry/forms/remix-hook-form/checkbox';
 import { FormMessage } from '@lambdacurry/forms/remix-hook-form/form';
 import { Button } from '@lambdacurry/forms/ui/button';
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { expect, userEvent, type within } from '@storybook/test';
+import { expect, userEvent, within } from '@storybook/test';
 import { type ActionFunctionArgs, Form, useFetcher } from 'react-router';
 import { createFormData, getValidatedFormData, RemixFormProvider, useRemixForm } from 'remix-hook-form';
 import { z } from 'zod';
@@ -137,18 +137,18 @@ const meta: Meta<typeof Checkbox> = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-interface StoryContext {
-  canvas: ReturnType<typeof within>;
-}
+type StoryContext = { canvasElement: HTMLElement };
 
-const testDefaultValues = ({ canvas }: StoryContext) => {
+const testDefaultValues = ({ canvasElement }: StoryContext) => {
+  const canvas = within(canvasElement);
   AVAILABLE_COLORS.forEach(({ label }) => {
     const checkbox = canvas.getByLabelText(label);
     expect(checkbox).not.toBeChecked();
   });
 };
 
-const testErrorState = async ({ canvas }: StoryContext) => {
+const testErrorState = async ({ canvasElement }: StoryContext) => {
+  const canvas = within(canvasElement);
   // Submit form without selecting any colors
   const submitButton = canvas.getByRole('button', { name: 'Submit' });
   await userEvent.click(submitButton);
@@ -157,7 +157,8 @@ const testErrorState = async ({ canvas }: StoryContext) => {
   await expect(await canvas.findByText('Please select at least one color')).toBeInTheDocument();
 };
 
-const testColorSelection = async ({ canvas }: StoryContext) => {
+const testColorSelection = async ({ canvasElement }: StoryContext) => {
+  const canvas = within(canvasElement);
   // Select two colors
   const redCheckbox = canvas.getByLabelText('Red');
   const blueCheckbox = canvas.getByLabelText('Blue');
diff --git a/apps/docs/src/remix-hook-form/data-table/data-table-filter-accessibility-tests.stories.tsx b/apps/docs/src/remix-hook-form/data-table/data-table-filter-accessibility-tests.stories.tsx
index c9725c3a..7dcb9b2f 100644
--- a/apps/docs/src/remix-hook-form/data-table/data-table-filter-accessibility-tests.stories.tsx
+++ b/apps/docs/src/remix-hook-form/data-table/data-table-filter-accessibility-tests.stories.tsx
@@ -4,7 +4,7 @@ import { useDataTableFilters } from '@lambdacurry/forms/ui/data-table-filter/hoo
 import { useFilterSync } from '@lambdacurry/forms/ui/utils/use-filter-sync';
 import { CheckCircledIcon, PersonIcon, StarIcon, TextIcon } from '@radix-ui/react-icons';
 import type { Meta, StoryContext, StoryObj } from '@storybook/react';
-import { expect } from '@storybook/test';
+import { expect, within } from '@storybook/test';
 import { withReactRouterStubDecorator } from '../../lib/storybook/react-router-stub';
 
 /**
@@ -228,7 +228,8 @@ type Story = StoryObj<typeof meta>;
 /**
  * Test functions for accessibility testing
  */
-const testBasicRendering = ({ canvas }: StoryContext) => {
+const testBasicRendering = ({ canvasElement }: StoryContext) => {
+  const canvas = within(canvasElement);
   const title = canvas.getByText('Data Table Filter Accessibility Test');
   expect(title).toBeInTheDocument();
 
@@ -236,7 +237,8 @@ const testBasicRendering = ({ canvas }: StoryContext) => {
   expect(filterInterface).toBeInTheDocument();
 };
 
-const testKeyboardNavigation = async ({ canvas }: StoryContext) => {
+const testKeyboardNavigation = async ({ canvasElement }: StoryContext) => {
+  const canvas = within(canvasElement);
   // Look for filter-related buttons or elements
   const buttons = canvas.getAllByRole('button');
   await expect(buttons.length).toBeGreaterThan(0);
@@ -248,7 +250,8 @@ const testKeyboardNavigation = async ({ canvas }: StoryContext) => {
   }
 };
 
-const testAriaAttributes = async ({ canvas }: StoryContext) => {
+const testAriaAttributes = async ({ canvasElement }: StoryContext) => {
+  const canvas = within(canvasElement);
   // Test that interactive elements have proper roles
   const buttons = canvas.getAllByRole('button');
   expect(buttons.length).toBeGreaterThan(0);
diff --git a/apps/docs/src/remix-hook-form/data-table/data-table-router-form.stories.tsx b/apps/docs/src/remix-hook-form/data-table/data-table-router-form.stories.tsx
index 04e72c38..a9c67be5 100644
--- a/apps/docs/src/remix-hook-form/data-table/data-table-router-form.stories.tsx
+++ b/apps/docs/src/remix-hook-form/data-table/data-table-router-form.stories.tsx
@@ -302,7 +302,8 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-  args: {} satisfies Record<string, unknown>, // Args for DataTableRouterForm if needed, handled by Example component
+  // biome-ignore lint/suspicious/noExplicitAny: any for flexibility
+  args: {} as any,
   render: () => <DataTableRouterFormExample />,
   parameters: {
     docs: {
diff --git a/apps/docs/src/remix-hook-form/form-error.test.tsx b/apps/docs/src/remix-hook-form/form-error.test.tsx
index 067e781f..25403293 100644
--- a/apps/docs/src/remix-hook-form/form-error.test.tsx
+++ b/apps/docs/src/remix-hook-form/form-error.test.tsx
@@ -5,7 +5,9 @@ import { render, screen } from '@testing-library/react';
 import { useFetcher } from 'react-router';
 import { RemixFormProvider, useRemixForm } from 'remix-hook-form';
 import { z } from 'zod';
-import type { ElementType, PropsWithChildren } from 'react';
+import type { ElementType } from 'react';
+import type { FetcherWithComponents } from 'react-router';
+import type { FormMessageProps } from '@lambdacurry/forms/ui/form';
 
 // Mock useFetcher
 jest.mock('react-router', () => ({
@@ -31,7 +33,7 @@ const TestFormWithError = ({
 }: {
   initialErrors?: Record<string, { message: string }>;
   formErrorName?: string;
-  customComponents?: { FormMessage?: React.ComponentType<PropsWithChildren<Record<string, unknown>>> };
+  customComponents?: { FormMessage?: React.ComponentType<FormMessageProps> };
   className?: string;
 }) => {
   const mockFetcher = {
@@ -39,7 +41,7 @@ const TestFormWithError = ({
     state: 'idle' as const,
     submit: jest.fn(),
     Form: 'form' as ElementType,
-  };
+  } as unknown as FetcherWithComponents<unknown>;
 
   mockUseFetcher.mockReturnValue(mockFetcher);
 
@@ -143,9 +145,9 @@ describe('FormError Component', () => {
 
   describe('Component Customization', () => {
     it('uses custom FormMessage component when provided', () => {
-      const CustomFormMessage = ({ children, ...props }: PropsWithChildren<Record<string, unknown>>) => (
+      const CustomFormMessage = (props: FormMessageProps) => (
         <div data-testid="custom-form-message" className="custom-message" {...props}>
-          Custom: {children}
+          Custom: {props.children}
         </div>
       );
 
@@ -218,7 +220,7 @@ describe('FormError Component', () => {
         state: 'idle' as const,
         submit: jest.fn(),
         Form: 'form' as ElementType,
-      };
+      } as unknown as FetcherWithComponents<unknown>;
 
       mockUseFetcher.mockReturnValue(mockFetcher);
 
@@ -315,9 +317,9 @@ describe('FormError Component', () => {
     it('does not re-render unnecessarily when unrelated form state changes', () => {
       const renderSpy = jest.fn();
 
-      const CustomFormMessage = ({ children, ...props }: PropsWithChildren<Record<string, unknown>>) => {
+      const CustomFormMessage = (props: FormMessageProps) => {
         renderSpy();
-        return <div {...props}>{children}</div>;
+        return <div {...props}>{props.children}</div>;
       };
 
       const errors = {
@@ -346,7 +348,7 @@ describe('FormError Integration Tests', () => {
         state: 'idle' as const,
         submit: jest.fn(),
         Form: 'form' as ElementType,
-      };
+      } as unknown as FetcherWithComponents<unknown>;
 
       mockUseFetcher.mockReturnValue(mockFetcher);
 
diff --git a/apps/docs/src/remix-hook-form/password-field.stories.tsx b/apps/docs/src/remix-hook-form/password-field.stories.tsx
index bf3dc4c6..589ec240 100644
--- a/apps/docs/src/remix-hook-form/password-field.stories.tsx
+++ b/apps/docs/src/remix-hook-form/password-field.stories.tsx
@@ -2,7 +2,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { PasswordField } from '@lambdacurry/forms/remix-hook-form/password-field';
 import { Button } from '@lambdacurry/forms/ui/button';
 import type { Meta, StoryContext, StoryObj } from '@storybook/react-vite';
-import { expect, userEvent } from '@storybook/test';
+import { expect, userEvent, within } from '@storybook/test';
 import { useRef } from 'react';
 import { type ActionFunctionArgs, useFetcher } from 'react-router';
 import { getValidatedFormData, RemixFormProvider, useRemixForm } from 'remix-hook-form';
@@ -114,14 +114,16 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 // Test scenarios
-const testDefaultValues = ({ canvas }: StoryContext) => {
+const testDefaultValues = ({ canvasElement }: StoryContext) => {
+  const canvas = within(canvasElement);
   const passwordInput = canvas.getByLabelText('Password');
   const confirmInput = canvas.getByLabelText('Confirm Password');
   expect(passwordInput).toHaveValue(INITIAL_PASSWORD);
   expect(confirmInput).toHaveValue(INITIAL_PASSWORD);
 };
 
-const testPasswordVisibilityToggle = async ({ canvas }: StoryContext) => {
+const testPasswordVisibilityToggle = async ({ canvasElement }: StoryContext) => {
+  const canvas = within(canvasElement);
   const passwordInput = canvas.getByLabelText('Password');
 
   // Find the toggle button within the same form item as the password input
@@ -150,7 +152,8 @@ const testPasswordVisibilityToggle = async ({ canvas }: StoryContext) => {
   expect(showButtonAgain).toBeInTheDocument();
 };
 
-const testWeakPasswordValidation = async ({ canvas }: StoryContext) => {
+const testWeakPasswordValidation = async ({ canvasElement }: StoryContext) => {
+  const canvas = within(canvasElement);
   const passwordInput = canvas.getByLabelText('Password');
   const submitButton = canvas.getByRole('button', { name: 'Create Account' });
 
@@ -162,7 +165,8 @@ const testWeakPasswordValidation = async ({ canvas }: StoryContext) => {
   await expect(await canvas.findByText(WEAK_PASSWORD_ERROR)).toBeInTheDocument();
 };
 
-const testPasswordMismatchValidation = async ({ canvas }: StoryContext) => {
+const testPasswordMismatchValidation = async ({ canvasElement }: StoryContext) => {
+  const canvas = within(canvasElement);
   const passwordInput = canvas.getByLabelText('Password');
   const confirmInput = canvas.getByLabelText('Confirm Password');
   const submitButton = canvas.getByRole('button', { name: 'Create Account' });
@@ -180,7 +184,8 @@ const testPasswordMismatchValidation = async ({ canvas }: StoryContext) => {
   await expect(await canvas.findByText(MISMATCH_PASSWORD_ERROR)).toBeInTheDocument();
 };
 
-const testValidSubmission = async ({ canvas }: StoryContext) => {
+const testValidSubmission = async ({ canvasElement }: StoryContext) => {
+  const canvas = within(canvasElement);
   const passwordInput = canvas.getByLabelText('Password');
   const confirmInput = canvas.getByLabelText('Confirm Password');
   const submitButton = canvas.getByRole('button', { name: 'Create Account' });
@@ -199,7 +204,8 @@ const testValidSubmission = async ({ canvas }: StoryContext) => {
   expect(successMessage).toBeInTheDocument();
 };
 
-const testRefFunctionality = async ({ canvas }: StoryContext) => {
+const testRefFunctionality = async ({ canvasElement }: StoryContext) => {
+  const canvas = within(canvasElement);
   const refInput = canvas.getByLabelText('Ref Example');
   const focusButton = canvas.getByRole('button', { name: 'Focus' });
 
diff --git a/apps/docs/src/remix-hook-form/phone-input.test.tsx b/apps/docs/src/remix-hook-form/phone-input.test.tsx
index ba92e91a..811b2f47 100644
--- a/apps/docs/src/remix-hook-form/phone-input.test.tsx
+++ b/apps/docs/src/remix-hook-form/phone-input.test.tsx
@@ -6,7 +6,9 @@ import userEvent from '@testing-library/user-event';
 import { useFetcher } from 'react-router';
 import { RemixFormProvider, useRemixForm } from 'remix-hook-form';
 import { z } from 'zod';
-import type { ElementType, PropsWithChildren } from 'react';
+import type { ElementType } from 'react';
+import type { FetcherWithComponents } from 'react-router';
+import type { FormMessageProps } from '@lambdacurry/forms/ui/form';
 
 // Mock useFetcher
 jest.mock('react-router', () => ({
@@ -29,14 +31,14 @@ const TestPhoneInputForm = ({
   customComponents = {},
 }: {
   initialErrors?: Record<string, { message: string }>;
-  customComponents?: { FormMessage?: React.ComponentType<PropsWithChildren<Record<string, unknown>>> };
+  customComponents?: { FormMessage?: React.ComponentType<FormMessageProps> };
 }) => {
   const mockFetcher = {
     data: { errors: initialErrors },
     state: 'idle' as const,
     submit: jest.fn(),
     Form: 'form' as ElementType,
-  };
+  } as unknown as FetcherWithComponents<unknown>;
 
   mockUseFetcher.mockReturnValue(mockFetcher);
 
@@ -152,9 +154,9 @@ describe('PhoneInput Component', () => {
 
   describe('Component Customization', () => {
     it('uses custom FormMessage component when provided', () => {
-      const CustomFormMessage = ({ children, ...props }: PropsWithChildren<Record<string, unknown>>) => (
+      const CustomFormMessage = (props: FormMessageProps) => (
         <div data-testid="custom-form-message" className="custom-message" {...props}>
-          Custom: {children}
+          Custom: {props.children}
         </div>
       );
 
diff --git a/apps/docs/src/remix-hook-form/radio-group.stories.tsx b/apps/docs/src/remix-hook-form/radio-group.stories.tsx
index b2a825d8..854225b3 100644
--- a/apps/docs/src/remix-hook-form/radio-group.stories.tsx
+++ b/apps/docs/src/remix-hook-form/radio-group.stories.tsx
@@ -7,6 +7,8 @@ import { expect, userEvent, within } from '@storybook/test';
 import { type ActionFunctionArgs, Form, useFetcher } from 'react-router';
 import { getValidatedFormData, RemixFormProvider, useRemixForm } from 'remix-hook-form';
 import { z } from 'zod';
+import type { ComponentType, ComponentPropsWithoutRef } from 'react';
+import { Label } from '@lambdacurry/forms/ui/label';
 import { withReactRouterStubDecorator } from '../lib/storybook/react-router-stub';
 
 const AVAILABLE_SIZES: RadioOption[] = [
diff --git a/apps/docs/src/remix-hook-form/select.stories.tsx b/apps/docs/src/remix-hook-form/select.stories.tsx
index 9984d466..5d3c4cfd 100644
--- a/apps/docs/src/remix-hook-form/select.stories.tsx
+++ b/apps/docs/src/remix-hook-form/select.stories.tsx
@@ -510,6 +510,8 @@ export const CreatableOption: Story = {
     await step('Create new option when no exact match', async () => {
       const regionSelect = canvas.getByLabelText('Custom Region');
       await userEvent.click(regionSelect);
+      // Add a small delay to ensure the dropdown has time to render
+      await new Promise((resolve) => setTimeout(resolve, 100));
       const listbox = await within(document.body).findByRole('listbox');
       // The search input is outside the listbox container; query from the portal root
       const input = within(document.body).getByPlaceholderText('Search...');
@@ -531,6 +533,8 @@ export const CreatableOption: Story = {
     await step('No creatable when exact match exists', async () => {
       const regionSelect = canvas.getByLabelText('Custom Region');
       await userEvent.click(regionSelect);
+      // Add a small delay to ensure the dropdown has time to render
+      await new Promise((resolve) => setTimeout(resolve, 100));
       const listbox = await within(document.body).findByRole('listbox');
       // The search input is outside the listbox container; query from the portal root
       const input = within(document.body).getByPlaceholderText('Search...');
diff --git a/apps/docs/src/remix-hook-form/text-field.stories.tsx b/apps/docs/src/remix-hook-form/text-field.stories.tsx
index 50051af9..1529eb4f 100644
--- a/apps/docs/src/remix-hook-form/text-field.stories.tsx
+++ b/apps/docs/src/remix-hook-form/text-field.stories.tsx
@@ -2,7 +2,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { TextField } from '@lambdacurry/forms/remix-hook-form/text-field';
 import { Button } from '@lambdacurry/forms/ui/button';
 import type { Meta, StoryContext, StoryObj } from '@storybook/react-vite';
-import { expect, userEvent } from '@storybook/test';
+import { expect, userEvent, within } from '@storybook/test';
 import { useRef } from 'react';
 import { type ActionFunctionArgs, useFetcher } from 'react-router';
 import { getValidatedFormData, RemixFormProvider, useRemixForm } from 'remix-hook-form';
@@ -109,12 +109,14 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 // Test scenarios
-const testDefaultValues = ({ canvas }: StoryContext) => {
+const testDefaultValues = ({ canvasElement }: StoryContext) => {
+  const canvas = within(canvasElement);
   const input = canvas.getByLabelText('Username');
   expect(input).toHaveValue(INITIAL_USERNAME);
 };
 
-const testInvalidSubmission = async ({ canvas }: StoryContext) => {
+const testInvalidSubmission = async ({ canvasElement }: StoryContext) => {
+  const canvas = within(canvasElement);
   const input = canvas.getByLabelText('Username');
   const submitButton = canvas.getByRole('button', { name: 'Submit' });
 
@@ -127,7 +129,8 @@ const testInvalidSubmission = async ({ canvas }: StoryContext) => {
   await expect(await canvas.findByText('Username must be at least 3 characters')).toBeInTheDocument();
 };
 
-const testUsernameTaken = async ({ canvas }: StoryContext) => {
+const testUsernameTaken = async ({ canvasElement }: StoryContext) => {
+  const canvas = within(canvasElement);
   const input = canvas.getByLabelText('Username');
   const submitButton = canvas.getByRole('button', { name: 'Submit' });
 
@@ -143,7 +146,8 @@ const testUsernameTaken = async ({ canvas }: StoryContext) => {
   await expect(canvas.getByText(USERNAME_TAKEN_ERROR)).toBeInTheDocument();
 };
 
-const testValidSubmission = async ({ canvas }: StoryContext) => {
+const testValidSubmission = async ({ canvasElement }: StoryContext) => {
+  const canvas = within(canvasElement);
   const input = canvas.getByLabelText('Username');
   const submitButton = canvas.getByRole('button', { name: 'Submit' });
 
diff --git a/apps/docs/src/remix-hook-form/textarea.stories.tsx b/apps/docs/src/remix-hook-form/textarea.stories.tsx
index af145ccd..d81bc32c 100644
--- a/apps/docs/src/remix-hook-form/textarea.stories.tsx
+++ b/apps/docs/src/remix-hook-form/textarea.stories.tsx
@@ -2,7 +2,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { Textarea } from '@lambdacurry/forms/remix-hook-form/textarea';
 import { Button } from '@lambdacurry/forms/ui/button';
 import type { Meta, StoryContext, StoryObj } from '@storybook/react-vite';
-import { expect, userEvent } from '@storybook/test';
+import { expect, userEvent, within } from '@storybook/test';
 import { type ActionFunctionArgs, useFetcher } from 'react-router';
 import { createFormData, getValidatedFormData, RemixFormProvider, useRemixForm } from 'remix-hook-form';
 import { z } from 'zod';
@@ -94,7 +94,8 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 // Test scenarios
-const testInvalidSubmission = async ({ canvas }: StoryContext) => {
+const testInvalidSubmission = async ({ canvasElement }: StoryContext) => {
+  const canvas = within(canvasElement);
   const messageInput = canvas.getByLabelText('Your message');
   const submitButton = canvas.getByRole('button', { name: 'Submit' });
 
@@ -108,7 +109,8 @@ const testInvalidSubmission = async ({ canvas }: StoryContext) => {
   await expect(await canvas.findByText('Message must be at least 10 characters')).toBeInTheDocument();
 };
 
-const testValidSubmission = async ({ canvas }: StoryContext) => {
+const testValidSubmission = async ({ canvasElement }: StoryContext) => {
+  const canvas = within(canvasElement);
   const messageInput = canvas.getByLabelText('Your message');
   const submitButton = canvas.getByRole('button', { name: 'Submit' });
 
diff --git a/apps/docs/tsconfig.json b/apps/docs/tsconfig.json
index 746bf907..1cbf107d 100644
--- a/apps/docs/tsconfig.json
+++ b/apps/docs/tsconfig.json
@@ -3,6 +3,7 @@
   "compilerOptions": {
     "baseUrl": ".",
     "moduleResolution": "bundler",
+    "types": ["vite/client", "node", "@playwright/test", "jest", "@testing-library/jest-dom"],
     "paths": {
       "@lambdacurry/forms/*": ["../../packages/components/src/*"],
       "@lambdacurry/forms/lib/*": ["../../packages/components/lib/*"]
diff --git a/package.json b/package.json
index b1102163..6a5e4573 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
     "build": "turbo run build",
     "serve": "turbo run serve",
     "test": "turbo run test",
-    "typecheck": "turbo run type-check --filter=@lambdacurry/forms",
+    "typecheck": "turbo run type-check",
     "clean": "find . -name '.turbo' -type d -prune -exec rm -rf {} + && find . -name 'node_modules' -type d -prune -exec rm -rf {} + && find . -name 'yarn.lock' -type f -delete",
     "lint": "biome check .",
     "lint:fix": "biome check . --write",
diff --git a/packages/components/src/ui/data-table-filter/core/filters.ts b/packages/components/src/ui/data-table-filter/core/filters.ts
index 2abdc770..59b5532a 100644
--- a/packages/components/src/ui/data-table-filter/core/filters.ts
+++ b/packages/components/src/ui/data-table-filter/core/filters.ts
@@ -50,7 +50,7 @@ class ColumnConfigBuilder<
     return newInstance;
   }
 
-  icon(value: import('lucide-react').LucideIcon): ColumnConfigBuilder<TData, TType, TVal, TId> {
+  icon(value: import('react').ElementType): ColumnConfigBuilder<TData, TType, TVal, TId> {
     const newInstance = this.clone();
     newInstance.config.icon = value as unknown as ColumnConfig<TData, TType, TVal, TId>['icon'];
     return newInstance;
diff --git a/packages/components/src/ui/data-table-filter/core/types.ts b/packages/components/src/ui/data-table-filter/core/types.ts
index 38d2955c..ff37994c 100644
--- a/packages/components/src/ui/data-table-filter/core/types.ts
+++ b/packages/components/src/ui/data-table-filter/core/types.ts
@@ -1,5 +1,4 @@
-import type { LucideIcon } from 'lucide-react';
-import type { ReactElement } from 'react';
+import type { ReactElement, ElementType as ReactElementType } from 'react';
 
 /*
  * # GENERAL NOTES:
@@ -96,7 +95,7 @@ export type ColumnConfig<TData, TType extends ColumnDataType = any, TVal = unkno
   id: TId;
   accessor: TAccessorFn<TData, TVal>;
   displayName: string;
-  icon: LucideIcon;
+  icon: ReactElementType;
   type: TType;
   options?: TType extends OptionBasedColumnDataType ? ColumnOption[] : never;
   facetedOptions?: TType extends OptionBasedColumnDataType ? Map<string, number> : never;
diff --git a/yarn.lock b/yarn.lock
index 52dc9a36..e201fa20 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1379,6 +1379,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jest/diff-sequences@npm:30.0.1":
+  version: 30.0.1
+  resolution: "@jest/diff-sequences@npm:30.0.1"
+  checksum: 10c0/3a840404e6021725ef7f86b11f7b2d13dd02846481264db0e447ee33b7ee992134e402cdc8b8b0ac969d37c6c0183044e382dedee72001cdf50cfb3c8088de74
+  languageName: node
+  linkType: hard
+
 "@jest/environment@npm:^29.7.0":
   version: 29.7.0
   resolution: "@jest/environment@npm:29.7.0"
@@ -1391,6 +1398,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jest/expect-utils@npm:30.1.2":
+  version: 30.1.2
+  resolution: "@jest/expect-utils@npm:30.1.2"
+  dependencies:
+    "@jest/get-type": "npm:30.1.0"
+  checksum: 10c0/5b6c4d400ad0bd22960bd77750baf55b24bf1ebdc2cec328afe275967db76bf94f797ca4c9817cdb86bc7820b9219d3f493705f3fa94fe7720960e47805a8e1b
+  languageName: node
+  linkType: hard
+
 "@jest/expect-utils@npm:^29.7.0":
   version: 29.7.0
   resolution: "@jest/expect-utils@npm:29.7.0"
@@ -1424,6 +1440,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jest/get-type@npm:30.1.0":
+  version: 30.1.0
+  resolution: "@jest/get-type@npm:30.1.0"
+  checksum: 10c0/3e65fd5015f551c51ec68fca31bbd25b466be0e8ee8075d9610fa1c686ea1e70a942a0effc7b10f4ea9a338c24337e1ad97ff69d3ebacc4681b7e3e80d1b24ac
+  languageName: node
+  linkType: hard
+
 "@jest/globals@npm:^29.7.0":
   version: 29.7.0
   resolution: "@jest/globals@npm:29.7.0"
@@ -1665,6 +1688,9 @@ __metadata:
     "@storybook/testing-library": "npm:^0.2.2"
     "@tailwindcss/postcss": "npm:^4.1.8"
     "@tailwindcss/vite": "npm:^4.0.0"
+    "@testing-library/jest-dom": "npm:^6.8.0"
+    "@testing-library/react": "npm:^16.3.0"
+    "@types/jest": "npm:^30.0.0"
     "@types/react": "npm:^19.0.0"
     "@typescript-eslint/eslint-plugin": "npm:^6.21.0"
     "@typescript-eslint/parser": "npm:^6.21.0"
@@ -4475,7 +4501,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/jest-dom@npm:^6.6.3":
+"@testing-library/jest-dom@npm:^6.6.3, @testing-library/jest-dom@npm:^6.8.0":
   version: 6.8.0
   resolution: "@testing-library/jest-dom@npm:6.8.0"
   dependencies:
@@ -4489,6 +4515,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@testing-library/react@npm:^16.3.0":
+  version: 16.3.0
+  resolution: "@testing-library/react@npm:16.3.0"
+  dependencies:
+    "@babel/runtime": "npm:^7.12.5"
+  peerDependencies:
+    "@testing-library/dom": ^10.0.0
+    "@types/react": ^18.0.0 || ^19.0.0
+    "@types/react-dom": ^18.0.0 || ^19.0.0
+    react: ^18.0.0 || ^19.0.0
+    react-dom: ^18.0.0 || ^19.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10c0/3a2cb1f87c9a67e1ebbbcfd99b94b01e496fc35147be8bc5d8bf07a699c7d523a09d57ef2f7b1d91afccd1a28e21eda3b00d80187fbb51b1de01e422592d845e
+  languageName: node
+  linkType: hard
+
 "@testing-library/user-event@npm:14.5.2, @testing-library/user-event@npm:^14.4.0":
   version: 14.5.2
   resolution: "@testing-library/user-event@npm:14.5.2"
@@ -4652,6 +4698,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/jest@npm:^30.0.0":
+  version: 30.0.0
+  resolution: "@types/jest@npm:30.0.0"
+  dependencies:
+    expect: "npm:^30.0.0"
+    pretty-format: "npm:^30.0.0"
+  checksum: 10c0/20c6ce574154bc16f8dd6a97afacca4b8c4921a819496a3970382031c509ebe87a1b37b152a1b8475089b82d8ca951a9e95beb4b9bf78fbf579b1536f0b65969
+  languageName: node
+  linkType: hard
+
 "@types/json-schema@npm:^7.0.12":
   version: 7.0.15
   resolution: "@types/json-schema@npm:7.0.15"
@@ -4712,7 +4768,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/stack-utils@npm:^2.0.0":
+"@types/stack-utils@npm:^2.0.0, @types/stack-utils@npm:^2.0.3":
   version: 2.0.3
   resolution: "@types/stack-utils@npm:2.0.3"
   checksum: 10c0/1f4658385ae936330581bcb8aa3a066df03867d90281cdf89cc356d404bd6579be0f11902304e1f775d92df22c6dd761d4451c804b0a4fba973e06211e9bd77c
@@ -5246,7 +5302,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ansi-styles@npm:^5.0.0":
+"ansi-styles@npm:^5.0.0, ansi-styles@npm:^5.2.0":
   version: 5.2.0
   resolution: "ansi-styles@npm:5.2.0"
   checksum: 10c0/9c4ca80eb3c2fb7b33841c210d2f20807f40865d27008d7c3f707b7f95cab7d67462a565e2388ac3285b71cb3d9bb2173de8da37c57692a362885ec34d6e27df
@@ -5822,6 +5878,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ci-info@npm:^4.2.0":
+  version: 4.3.0
+  resolution: "ci-info@npm:4.3.0"
+  checksum: 10c0/60d3dfe95d75c01454ec1cfd5108617dd598a28a2a3e148bd7e1523c1c208b5f5a3007cafcbe293e6fd0a5a310cc32217c5dc54743eeabc0a2bec80072fc055c
+  languageName: node
+  linkType: hard
+
 "cjs-module-lexer@npm:^1.0.0":
   version: 1.4.3
   resolution: "cjs-module-lexer@npm:1.4.3"
@@ -6792,6 +6855,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"expect@npm:^30.0.0":
+  version: 30.1.2
+  resolution: "expect@npm:30.1.2"
+  dependencies:
+    "@jest/expect-utils": "npm:30.1.2"
+    "@jest/get-type": "npm:30.1.0"
+    jest-matcher-utils: "npm:30.1.2"
+    jest-message-util: "npm:30.1.0"
+    jest-mock: "npm:30.0.5"
+    jest-util: "npm:30.0.5"
+  checksum: 10c0/467c1b69549e75a1a09f3feec335e0dc968cd71370361b5d83248351cf77e705e8ddf38a4885e32a50237502ced7fcc9106462f59f33c4796462e95938b8ca19
+  languageName: node
+  linkType: hard
+
 "exponential-backoff@npm:^3.1.1":
   version: 3.1.2
   resolution: "exponential-backoff@npm:3.1.2"
@@ -7309,7 +7386,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"graceful-fs@npm:^4.1.15, graceful-fs@npm:^4.1.2, graceful-fs@npm:^4.1.5, graceful-fs@npm:^4.1.6, graceful-fs@npm:^4.2.0, graceful-fs@npm:^4.2.4, graceful-fs@npm:^4.2.6, graceful-fs@npm:^4.2.9":
+"graceful-fs@npm:^4.1.15, graceful-fs@npm:^4.1.2, graceful-fs@npm:^4.1.5, graceful-fs@npm:^4.1.6, graceful-fs@npm:^4.2.0, graceful-fs@npm:^4.2.11, graceful-fs@npm:^4.2.4, graceful-fs@npm:^4.2.6, graceful-fs@npm:^4.2.9":
   version: 4.2.11
   resolution: "graceful-fs@npm:4.2.11"
   checksum: 10c0/386d011a553e02bc594ac2ca0bd6d9e4c22d7fa8cfbfc448a6d148c59ea881b092db9dbe3547ae4b88e55f1b01f7c4a2ecc53b310c042793e63aa44cf6c257f2
@@ -8150,6 +8227,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jest-diff@npm:30.1.2":
+  version: 30.1.2
+  resolution: "jest-diff@npm:30.1.2"
+  dependencies:
+    "@jest/diff-sequences": "npm:30.0.1"
+    "@jest/get-type": "npm:30.1.0"
+    chalk: "npm:^4.1.2"
+    pretty-format: "npm:30.0.5"
+  checksum: 10c0/5baba5c54d044faf77540d2b97f947ce2a735c529bdca23ccd25669085ba3912eef2a8f66f4d765e8e416b1e10b95cb1dded0ebc1633efdbef37706b4e767ecb
+  languageName: node
+  linkType: hard
+
 "jest-diff@npm:^29.7.0":
   version: 29.7.0
   resolution: "jest-diff@npm:29.7.0"
@@ -8250,6 +8339,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jest-matcher-utils@npm:30.1.2":
+  version: 30.1.2
+  resolution: "jest-matcher-utils@npm:30.1.2"
+  dependencies:
+    "@jest/get-type": "npm:30.1.0"
+    chalk: "npm:^4.1.2"
+    jest-diff: "npm:30.1.2"
+    pretty-format: "npm:30.0.5"
+  checksum: 10c0/c4f81fc7d72f94b18dff807adf787d6fd081c3e150148fbbcb1559c353b27890989bcf7e10b15d763625565175bf30019e93a014078ff291646a88a9acdfc9a4
+  languageName: node
+  linkType: hard
+
 "jest-matcher-utils@npm:^29.7.0":
   version: 29.7.0
   resolution: "jest-matcher-utils@npm:29.7.0"
@@ -8262,6 +8363,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jest-message-util@npm:30.1.0":
+  version: 30.1.0
+  resolution: "jest-message-util@npm:30.1.0"
+  dependencies:
+    "@babel/code-frame": "npm:^7.27.1"
+    "@jest/types": "npm:30.0.5"
+    "@types/stack-utils": "npm:^2.0.3"
+    chalk: "npm:^4.1.2"
+    graceful-fs: "npm:^4.2.11"
+    micromatch: "npm:^4.0.8"
+    pretty-format: "npm:30.0.5"
+    slash: "npm:^3.0.0"
+    stack-utils: "npm:^2.0.6"
+  checksum: 10c0/3884f7e772d64891eca63870f73b89af4e1dce715611c308e1115f7961ed378560bac66c5f9cbee025b06ca530dbd30685362cb8db7b5a48f5f53b75ba79023e
+  languageName: node
+  linkType: hard
+
 "jest-message-util@npm:^29.7.0":
   version: 29.7.0
   resolution: "jest-message-util@npm:29.7.0"
@@ -8279,6 +8397,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jest-mock@npm:30.0.5":
+  version: 30.0.5
+  resolution: "jest-mock@npm:30.0.5"
+  dependencies:
+    "@jest/types": "npm:30.0.5"
+    "@types/node": "npm:*"
+    jest-util: "npm:30.0.5"
+  checksum: 10c0/207fd79297f514a8e26ede9b4b5035e70212b8850a2f460b51d3cc58e8e7c9585bd2dbc5df2475a3321c4cd114b90e0b24190f00d6eeb88c8f088a8ed00416d5
+  languageName: node
+  linkType: hard
+
 "jest-mock@npm:^29.7.0":
   version: 29.7.0
   resolution: "jest-mock@npm:29.7.0"
@@ -8476,6 +8605,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jest-util@npm:30.0.5":
+  version: 30.0.5
+  resolution: "jest-util@npm:30.0.5"
+  dependencies:
+    "@jest/types": "npm:30.0.5"
+    "@types/node": "npm:*"
+    chalk: "npm:^4.1.2"
+    ci-info: "npm:^4.2.0"
+    graceful-fs: "npm:^4.2.11"
+    picomatch: "npm:^4.0.2"
+  checksum: 10c0/d3808b5f7720044d0464664c795e2b795ed82edf3b5871db74b8b603c3a0a38107668730348d26f92920ca3b8245a99cbbc2c93e77d0abb1f5e27524079a4ba8
+  languageName: node
+  linkType: hard
+
 "jest-util@npm:^29.7.0":
   version: 29.7.0
   resolution: "jest-util@npm:29.7.0"
@@ -9957,6 +10100,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pretty-format@npm:30.0.5, pretty-format@npm:^30.0.0":
+  version: 30.0.5
+  resolution: "pretty-format@npm:30.0.5"
+  dependencies:
+    "@jest/schemas": "npm:30.0.5"
+    ansi-styles: "npm:^5.2.0"
+    react-is: "npm:^18.3.1"
+  checksum: 10c0/9f6cf1af5c3169093866c80adbfdad32f69c692b62f24ba3ca8cdec8519336123323f896396f9fa40346a41b197c5f6be15aec4d8620819f12496afaaca93f81
+  languageName: node
+  linkType: hard
+
 "pretty-format@npm:^27.0.2":
   version: 27.5.1
   resolution: "pretty-format@npm:27.5.1"
@@ -10169,7 +10323,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-is@npm:^18.0.0":
+"react-is@npm:^18.0.0, react-is@npm:^18.3.1":
   version: 18.3.1
   resolution: "react-is@npm:18.3.1"
   checksum: 10c0/f2f1e60010c683479e74c63f96b09fb41603527cd131a9959e2aee1e5a8b0caf270b365e5ca77d4a6b18aae659b60a86150bb3979073528877029b35aecd2072
@@ -11026,7 +11180,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"stack-utils@npm:^2.0.3":
+"stack-utils@npm:^2.0.3, stack-utils@npm:^2.0.6":
   version: 2.0.6
   resolution: "stack-utils@npm:2.0.6"
   dependencies: