diff --git a/packages/ui/package.json b/packages/ui/package.json
index da614c6..b0bfa34 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -88,9 +88,7 @@
       "default": "./dist/FormField/FormField.js"
     }
   },
-  "files": [
-    "dist"
-  ],
+  "files": ["dist"],
   "scripts": {
     "build": "NODE_OPTIONS='--max-old-space-size=4096' tsup",
     "dev": "tsup --watch",
diff --git a/packages/ui/src/Checkbox/Checkbox.test.tsx b/packages/ui/src/Checkbox/Checkbox.test.tsx
index efa3ed6..7f9983a 100644
--- a/packages/ui/src/Checkbox/Checkbox.test.tsx
+++ b/packages/ui/src/Checkbox/Checkbox.test.tsx
@@ -107,9 +107,7 @@ describe('Checkbox', () => {
       const wrapper = container.querySelector('div');
       const children = Array.from(wrapper?.children || []);
       const labelIndex = children.findIndex((child) => child.tagName === 'LABEL');
-      const inputWrapperIndex = children.findIndex((child) =>
-        child.querySelector('input')
-      );
+      const inputWrapperIndex = children.findIndex((child) => child.querySelector('input'));
       expect(inputWrapperIndex).toBeLessThan(labelIndex);
     });
 
@@ -123,9 +121,7 @@ describe('Checkbox', () => {
       const wrapper = container.querySelector('div');
       const children = Array.from(wrapper?.children || []);
       const labelIndex = children.findIndex((child) => child.tagName === 'LABEL');
-      const inputWrapperIndex = children.findIndex((child) =>
-        child.querySelector('input')
-      );
+      const inputWrapperIndex = children.findIndex((child) => child.querySelector('input'));
       expect(labelIndex).toBeLessThan(inputWrapperIndex);
     });
   });
@@ -251,18 +247,12 @@ describe('Checkbox', () => {
 
     it('should support aria-describedby', () => {
       render(<Checkbox aria-describedby="description" />);
-      expect(screen.getByRole('checkbox')).toHaveAttribute(
-        'aria-describedby',
-        'description'
-      );
+      expect(screen.getByRole('checkbox')).toHaveAttribute('aria-describedby', 'description');
     });
 
     it('should support aria-labelledby', () => {
       render(<Checkbox aria-labelledby="label-id" />);
-      expect(screen.getByRole('checkbox')).toHaveAttribute(
-        'aria-labelledby',
-        'label-id'
-      );
+      expect(screen.getByRole('checkbox')).toHaveAttribute('aria-labelledby', 'label-id');
     });
 
     it('should support aria-required', () => {
@@ -519,9 +509,7 @@ describe('Checkbox', () => {
       const user = userEvent.setup();
       const ControlledCheckbox = () => {
         const [checked, setChecked] = React.useState(false);
-        return (
-          <Checkbox checked={checked} onChange={(e) => setChecked(e.target.checked)} />
-        );
+        return <Checkbox checked={checked} onChange={(e) => setChecked(e.target.checked)} />;
       };
 
       render(<ControlledCheckbox />);
diff --git a/packages/ui/src/Checkbox/Checkbox.tsx b/packages/ui/src/Checkbox/Checkbox.tsx
index 953fce0..daef4df 100644
--- a/packages/ui/src/Checkbox/Checkbox.tsx
+++ b/packages/ui/src/Checkbox/Checkbox.tsx
@@ -120,12 +120,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
           xmlns="http://www.w3.org/2000/svg"
           aria-hidden="true"
         >
-          <path
-            d="M4 8H12"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-          />
+          <path d="M4 8H12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
         </svg>
       </span>
     );
@@ -133,10 +128,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
     const labelElement = label ? (
       <label
         htmlFor={checkboxId}
-        className={cn(
-          checkboxLabelVariants({ size }),
-          labelPosition === 'left' ? 'mr-2' : 'ml-2'
-        )}
+        className={cn(checkboxLabelVariants({ size }), labelPosition === 'left' ? 'mr-2' : 'ml-2')}
       >
         {label}
       </label>
diff --git a/packages/ui/src/FormField/FormField.test.tsx b/packages/ui/src/FormField/FormField.test.tsx
index d57097a..447c105 100644
--- a/packages/ui/src/FormField/FormField.test.tsx
+++ b/packages/ui/src/FormField/FormField.test.tsx
@@ -191,10 +191,7 @@ describe('FormField', () => {
 
     it('should hide helper text when error is present', () => {
       render(
-        <FormField
-          helperText="This is helper text"
-          error="This is an error"
-        >
+        <FormField helperText="This is helper text" error="This is an error">
           <input />
         </FormField>
       );
@@ -390,11 +387,7 @@ describe('FormField', () => {
 
     it('should work with success state and helper text', () => {
       render(
-        <FormField
-          label="Username"
-          state="success"
-          helperText="Username is available!"
-        >
+        <FormField label="Username" state="success" helperText="Username is available!">
           <input />
         </FormField>
       );
diff --git a/packages/ui/src/FormField/FormField.tsx b/packages/ui/src/FormField/FormField.tsx
index 92fcb08..d523196 100644
--- a/packages/ui/src/FormField/FormField.tsx
+++ b/packages/ui/src/FormField/FormField.tsx
@@ -126,10 +126,7 @@ export function FormField({
 
         {/* Helper text (shown only if no error) */}
         {!error && helperText && (
-          <div
-            id={helperId}
-            className={cn(formFieldHelperVariants({ state: effectiveState }))}
-          >
+          <div id={helperId} className={cn(formFieldHelperVariants({ state: effectiveState }))}>
             {helperText}
           </div>
         )}
diff --git a/packages/ui/src/Radio/Radio.test.tsx b/packages/ui/src/Radio/Radio.test.tsx
index 46c7fa8..8bd9569 100644
--- a/packages/ui/src/Radio/Radio.test.tsx
+++ b/packages/ui/src/Radio/Radio.test.tsx
@@ -1,10 +1,10 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { createRef } from 'react';
+import React from 'react';
 import { describe, expect, it, vi } from 'vitest';
 import { Radio } from './Radio';
 import { RadioGroup } from './RadioGroup';
-import React from 'react';
 
 describe('Radio', () => {
   describe('Rendering', () => {
@@ -347,10 +347,7 @@ describe('Radio', () => {
           <Radio value="option1" aria-describedby="description" />
         </RadioGroup>
       );
-      expect(screen.getByRole('radio')).toHaveAttribute(
-        'aria-describedby',
-        'description'
-      );
+      expect(screen.getByRole('radio')).toHaveAttribute('aria-describedby', 'description');
     });
 
     it('should support aria-labelledby', () => {
@@ -573,10 +570,7 @@ describe('RadioGroup', () => {
           <Radio value="option1" />
         </RadioGroup>
       );
-      expect(screen.getByRole('radiogroup')).toHaveAttribute(
-        'aria-label',
-        'Choose size'
-      );
+      expect(screen.getByRole('radiogroup')).toHaveAttribute('aria-label', 'Choose size');
     });
 
     it('should support aria-labelledby', () => {
@@ -585,10 +579,7 @@ describe('RadioGroup', () => {
           <Radio value="option1" />
         </RadioGroup>
       );
-      expect(screen.getByRole('radiogroup')).toHaveAttribute(
-        'aria-labelledby',
-        'label-id'
-      );
+      expect(screen.getByRole('radiogroup')).toHaveAttribute('aria-labelledby', 'label-id');
     });
 
     it('should support aria-describedby', () => {
@@ -597,10 +588,7 @@ describe('RadioGroup', () => {
           <Radio value="option1" />
         </RadioGroup>
       );
-      expect(screen.getByRole('radiogroup')).toHaveAttribute(
-        'aria-describedby',
-        'description-id'
-      );
+      expect(screen.getByRole('radiogroup')).toHaveAttribute('aria-describedby', 'description-id');
     });
 
     it('should support aria-required', () => {
diff --git a/packages/ui/src/Radio/Radio.tsx b/packages/ui/src/Radio/Radio.tsx
index 2174bde..ac8d1b7 100644
--- a/packages/ui/src/Radio/Radio.tsx
+++ b/packages/ui/src/Radio/Radio.tsx
@@ -89,10 +89,7 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(
     const labelElement = label ? (
       <label
         htmlFor={radioId}
-        className={cn(
-          radioLabelVariants({ size }),
-          labelPosition === 'left' ? 'mr-2' : 'ml-2'
-        )}
+        className={cn(radioLabelVariants({ size }), labelPosition === 'left' ? 'mr-2' : 'ml-2')}
       >
         {label}
       </label>
diff --git a/packages/ui/src/Radio/types.ts b/packages/ui/src/Radio/types.ts
index 863d118..85854f3 100644
--- a/packages/ui/src/Radio/types.ts
+++ b/packages/ui/src/Radio/types.ts
@@ -3,8 +3,7 @@ import type { InputHTMLAttributes } from 'react';
 /**
  * Radio component props
  */
-export interface RadioProps
-  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
+export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
   /**
    * Visual state of the radio button
    * @default 'default'
diff --git a/packages/ui/src/Select/Select.test.tsx b/packages/ui/src/Select/Select.test.tsx
index 75772f6..feb92e3 100644
--- a/packages/ui/src/Select/Select.test.tsx
+++ b/packages/ui/src/Select/Select.test.tsx
@@ -231,9 +231,7 @@ describe('Select', () => {
     });
 
     it('should apply correct spinner size based on select size', () => {
-      const { container, rerender } = render(
-        <Select options={simpleOptions} loading size="sm" />
-      );
+      const { container, rerender } = render(<Select options={simpleOptions} loading size="sm" />);
       let spinner = container.querySelector('svg.animate-spin');
       expect(spinner).toHaveAttribute('width', '14');
 
@@ -300,18 +298,12 @@ describe('Select', () => {
 
     it('should support aria-describedby', () => {
       render(<Select options={simpleOptions} aria-describedby="description" />);
-      expect(screen.getByRole('combobox')).toHaveAttribute(
-        'aria-describedby',
-        'description'
-      );
+      expect(screen.getByRole('combobox')).toHaveAttribute('aria-describedby', 'description');
     });
 
     it('should support aria-labelledby', () => {
       render(<Select options={simpleOptions} aria-labelledby="label-id" />);
-      expect(screen.getByRole('combobox')).toHaveAttribute(
-        'aria-labelledby',
-        'label-id'
-      );
+      expect(screen.getByRole('combobox')).toHaveAttribute('aria-labelledby', 'label-id');
     });
 
     it('should support aria-required', () => {
@@ -506,9 +498,7 @@ describe('Select', () => {
     });
 
     it('should work with loading and disabled states', () => {
-      const { container } = render(
-        <Select options={simpleOptions} loading disabled />
-      );
+      const { container } = render(<Select options={simpleOptions} loading disabled />);
       const select = screen.getByRole('combobox');
       expect(select).toBeDisabled();
       expect(container.querySelector('svg.animate-spin')).toBeInTheDocument();
diff --git a/packages/ui/src/Select/Select.tsx b/packages/ui/src/Select/Select.tsx
index 6dbeeb7..01eab5f 100644
--- a/packages/ui/src/Select/Select.tsx
+++ b/packages/ui/src/Select/Select.tsx
@@ -98,27 +98,22 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
           {hasChildren && children}
 
           {/* Render simple options if provided */}
-          {!hasChildren && hasOptions &&
+          {!hasChildren &&
+            hasOptions &&
             options.map((option) => (
-              <option
-                key={option.value}
-                value={option.value}
-                disabled={option.disabled}
-              >
+              <option key={option.value} value={option.value} disabled={option.disabled}>
                 {option.label}
               </option>
             ))}
 
           {/* Render option groups if provided */}
-          {!hasChildren && !hasOptions && hasOptionGroups &&
+          {!hasChildren &&
+            !hasOptions &&
+            hasOptionGroups &&
             optionGroups.map((group) => (
               <optgroup key={group.label} label={group.label}>
                 {group.options.map((option) => (
-                  <option
-                    key={option.value}
-                    value={option.value}
-                    disabled={option.disabled}
-                  >
+                  <option key={option.value} value={option.value} disabled={option.disabled}>
                     {option.label}
                   </option>
                 ))}
diff --git a/packages/ui/src/Select/types.ts b/packages/ui/src/Select/types.ts
index 2c64f26..84ffe27 100644
--- a/packages/ui/src/Select/types.ts
+++ b/packages/ui/src/Select/types.ts
@@ -39,8 +39,7 @@ export interface SelectOptionGroup {
 /**
  * Select component props
  */
-export interface SelectProps
-  extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
+export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
   /**
    * Visual state of the select
    * @default 'default'
diff --git a/packages/ui/src/Slider/Slider.test.tsx b/packages/ui/src/Slider/Slider.test.tsx
index 98ac596..a96e5bd 100644
--- a/packages/ui/src/Slider/Slider.test.tsx
+++ b/packages/ui/src/Slider/Slider.test.tsx
@@ -159,10 +159,7 @@ describe('Slider', () => {
     });
 
     it('should show marks without labels (just values)', () => {
-      const marks = [
-        { value: 0 },
-        { value: 50 },
-      ];
+      const marks = [{ value: 0 }, { value: 50 }];
       render(<Slider marks={marks} />);
 
       expect(screen.getByText('0')).toBeInTheDocument();
@@ -282,18 +279,12 @@ describe('Slider', () => {
 
     it('should support aria-labelledby', () => {
       render(<Slider aria-labelledby="volume-label" />);
-      expect(screen.getByRole('slider')).toHaveAttribute(
-        'aria-labelledby',
-        'volume-label'
-      );
+      expect(screen.getByRole('slider')).toHaveAttribute('aria-labelledby', 'volume-label');
     });
 
     it('should support aria-describedby', () => {
       render(<Slider aria-describedby="volume-description" />);
-      expect(screen.getByRole('slider')).toHaveAttribute(
-        'aria-describedby',
-        'volume-description'
-      );
+      expect(screen.getByRole('slider')).toHaveAttribute('aria-describedby', 'volume-description');
     });
   });
 
@@ -446,7 +437,10 @@ describe('Slider', () => {
     });
 
     it('should work with all props combined', () => {
-      const marks = [{ value: 0, label: 'Low' }, { value: 100, label: 'High' }];
+      const marks = [
+        { value: 0, label: 'Low' },
+        { value: 100, label: 'High' },
+      ];
       render(
         <Slider
           min={0}
diff --git a/packages/ui/src/Slider/types.ts b/packages/ui/src/Slider/types.ts
index 8b9b78a..a811833 100644
--- a/packages/ui/src/Slider/types.ts
+++ b/packages/ui/src/Slider/types.ts
@@ -3,8 +3,7 @@ import type { InputHTMLAttributes } from 'react';
 /**
  * Slider component props
  */
-export interface SliderProps
-  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+export interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
   /**
    * Minimum value
    * @default 0
diff --git a/packages/ui/src/Switch/Switch.test.tsx b/packages/ui/src/Switch/Switch.test.tsx
index 2039931..a93468e 100644
--- a/packages/ui/src/Switch/Switch.test.tsx
+++ b/packages/ui/src/Switch/Switch.test.tsx
@@ -1,9 +1,9 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { createRef } from 'react';
+import React from 'react';
 import { describe, expect, it, vi } from 'vitest';
 import { Switch } from './Switch';
-import React from 'react';
 
 describe('Switch', () => {
   describe('Rendering', () => {
@@ -248,9 +248,7 @@ describe('Switch', () => {
     it('should sync hidden input checked state', async () => {
       const user = userEvent.setup();
       const { container } = render(<Switch name="test" />);
-      const hiddenInput = container.querySelector(
-        'input[name="test"]'
-      ) as HTMLInputElement;
+      const hiddenInput = container.querySelector('input[name="test"]') as HTMLInputElement;
       const switchEl = screen.getByRole('switch');
 
       expect(hiddenInput?.checked).toBe(false);
@@ -296,10 +294,7 @@ describe('Switch', () => {
 
     it('should support custom aria-labelledby', () => {
       render(<Switch aria-labelledby="custom-label" />);
-      expect(screen.getByRole('switch')).toHaveAttribute(
-        'aria-labelledby',
-        'custom-label'
-      );
+      expect(screen.getByRole('switch')).toHaveAttribute('aria-labelledby', 'custom-label');
     });
 
     it('should set aria-hidden on thumb', () => {
diff --git a/packages/ui/src/Switch/variants.ts b/packages/ui/src/Switch/variants.ts
index 1d60ffb..150d51e 100644
--- a/packages/ui/src/Switch/variants.ts
+++ b/packages/ui/src/Switch/variants.ts
@@ -102,10 +102,7 @@ export const switchThumbVariants = createVariants({
  * Loading spinner variants
  */
 export const switchSpinnerVariants = createVariants({
-  base: [
-    'absolute inset-0 flex items-center justify-center',
-    'pointer-events-none',
-  ].join(' '),
+  base: ['absolute inset-0 flex items-center justify-center', 'pointer-events-none'].join(' '),
 
   variants: {
     size: {
diff --git a/packages/ui/src/Textarea/Textarea.test.tsx b/packages/ui/src/Textarea/Textarea.test.tsx
index 8c5e834..9e323cf 100644
--- a/packages/ui/src/Textarea/Textarea.test.tsx
+++ b/packages/ui/src/Textarea/Textarea.test.tsx
@@ -162,7 +162,9 @@ describe('Textarea', () => {
     });
 
     it('shows character count with max length', () => {
-      const { container } = render(<Textarea showCount maxLength={100} defaultValue="Hello" data-testid="textarea" />);
+      const { container } = render(
+        <Textarea showCount maxLength={100} defaultValue="Hello" data-testid="textarea" />
+      );
       const counter = container.querySelector('[aria-live="polite"]');
       expect(counter).toBeInTheDocument();
       expect(counter?.textContent).toContain('5');
@@ -483,7 +485,13 @@ describe('Textarea', () => {
 
     it('works with character counter and error state', () => {
       const { container } = render(
-        <Textarea showCount state="error" maxLength={100} defaultValue="Error text" data-testid="textarea" />
+        <Textarea
+          showCount
+          state="error"
+          maxLength={100}
+          defaultValue="Error text"
+          data-testid="textarea"
+        />
       );
       const textarea = screen.getByTestId('textarea');
       expect(textarea.className).toContain('border-error');
@@ -551,7 +559,9 @@ describe('Textarea', () => {
     });
 
     it('works as controlled component with value prop', () => {
-      const { rerender } = render(<Textarea value="Controlled" onChange={() => {}} data-testid="textarea" />);
+      const { rerender } = render(
+        <Textarea value="Controlled" onChange={() => {}} data-testid="textarea" />
+      );
       const textarea = screen.getByTestId('textarea') as HTMLTextAreaElement;
       expect(textarea.value).toBe('Controlled');
 
diff --git a/packages/ui/src/Textarea/types.ts b/packages/ui/src/Textarea/types.ts
index ab72ec8..655e249 100644
--- a/packages/ui/src/Textarea/types.ts
+++ b/packages/ui/src/Textarea/types.ts
@@ -3,8 +3,7 @@ import type { TextareaHTMLAttributes } from 'react';
 /**
  * Textarea component props
  */
-export interface TextareaProps
-  extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> {
+export interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> {
   /**
    * Visual state of the textarea
    * @default 'default'
diff --git a/packages/ui/src/system/formVariants.ts b/packages/ui/src/system/formVariants.ts
index d07f51b..0302f4d 100644
--- a/packages/ui/src/system/formVariants.ts
+++ b/packages/ui/src/system/formVariants.ts
@@ -49,11 +49,9 @@ export const formControlBase = [
  * Error state classes
  * Applied when a form field has validation errors
  */
-export const formErrorState = [
-  'border-error',
-  'focus:border-error',
-  'focus:ring-error/20',
-].join(' ');
+export const formErrorState = ['border-error', 'focus:border-error', 'focus:ring-error/20'].join(
+  ' '
+);
 
 /**
  * Success state classes
@@ -69,9 +67,7 @@ export const formSuccessState = [
  * Loading state classes
  * Applied when a form field is in loading state
  */
-export const formLoadingState = ['cursor-wait', 'pointer-events-none', 'opacity-70'].join(
-  ' '
-);
+export const formLoadingState = ['cursor-wait', 'pointer-events-none', 'opacity-70'].join(' ');
 
 /**
  * Helper text base classes
@@ -89,11 +85,9 @@ export const formErrorMessage = ['text-sm text-error', 'mt-1.5'].join(' ');
  * Label base classes
  * For form field labels
  */
-export const formLabelBase = [
-  'text-sm font-medium text-foreground',
-  'mb-2',
-  'inline-block',
-].join(' ');
+export const formLabelBase = ['text-sm font-medium text-foreground', 'mb-2', 'inline-block'].join(
+  ' '
+);
 
 /**
  * Required indicator classes