From 9355c0410fdeaeb322809b0af10066ef1c49d06d Mon Sep 17 00:00:00 2001
From: ephraimduncan <ephraimduncan68@gmail.com>
Date: Mon, 26 Jan 2026 21:04:25 +0000
Subject: [PATCH 1/2] feat: add webhook queue system and worker

- Add queue package with BullMQ for webhook delivery
- Add worker app to process webhook jobs
- Add webhook delivery logs schema and tracking
- Update UI components for Tailwind v4
- Add .env.example, improve API and tests
---
 .../.env.development.example => .env.example  |   5 +-
 .eslintrc.cjs                                 |   8 +-
 apps/web/next.config.js                       |   2 +-
 apps/web/package.json                         |   8 +-
 apps/web/src/app/(auth)/login/login.tsx       |   4 +-
 .../(auth)/reset-password/[token]/page.tsx    |   1 -
 .../src/app/(auth)/reset-password/page.tsx    |   1 -
 .../reset-password/send-reset-email.tsx       |   9 +-
 .../app/(auth)/verify-email/verify-code.tsx   |   4 +-
 .../(main)/dashboard/_components/forms.tsx    |   4 +-
 .../dashboard/_components/new-form-dialog.tsx |   3 +-
 .../settings/api-keys/api-keys-section.tsx    |   9 +-
 .../dashboard/settings/profile-form.tsx       |   3 +-
 .../app/(main)/form/[id]/form-settings.tsx    | 187 +++-
 apps/web/src/app/(main)/form/[id]/page.tsx    |   7 +-
 .../(main)/form/[id]/submissions-table.tsx    |  22 +-
 .../onboarding/form/create-form-dialog.tsx    |   3 +-
 apps/web/src/app/api/auth/[...all]/route.ts   |   3 +-
 .../app/api/cron/cleanup-audit-logs/route.ts  |   2 +-
 apps/web/src/app/api/s/[id]/route.ts          |  39 +-
 apps/web/src/app/api/v1/[...trpc]/route.ts    |  13 +-
 apps/web/src/app/api/v1/openapi.json/route.ts |   2 +-
 apps/web/src/app/icon.tsx                     |  20 +-
 apps/web/src/components/password-input.tsx    |   4 +-
 apps/web/src/components/user-avatar.tsx       |   4 +-
 apps/web/src/lib/hooks/use-social-auth.ts     |   6 +-
 apps/web/src/lib/trpc/react.tsx               |   2 +-
 apps/web/src/styles/globals.css               |  72 +-
 apps/web/tailwind.config.ts                   |   3 +-
 apps/worker/package.json                      |  23 +
 apps/worker/src/index.ts                      |  29 +
 apps/worker/tsconfig.json                     |   7 +
 bun.lock                                      |  84 ++
 docker/docker-compose.yml                     |  10 +
 package.json                                  |  15 +-
 packages/api/lib/api-key.ts                   |   6 +-
 packages/api/lib/audit-log.ts                 |  12 +-
 packages/api/middleware/api-auth.ts           |   4 +-
 packages/api/middleware/rate-limit.ts         |   4 +-
 packages/api/package.json                     |   1 +
 packages/api/routers/api-keys.ts              |  10 +-
 packages/api/routers/api-v1/index.ts          |   4 +-
 packages/api/routers/api-v1/ownership.ts      |  11 +-
 packages/api/routers/api-v1/submissions.ts    |  17 +-
 packages/api/routers/api-v1/trpc.ts           |   5 +-
 packages/api/routers/form.ts                  |  73 +-
 packages/api/routers/formData.ts              |  12 +-
 packages/api/utils/json.ts                    |   4 +-
 packages/config/tailwind/src/preset.ts        |  25 +-
 packages/db/drizzle/0003_serious_the_fury.sql |  23 +
 packages/db/drizzle/meta/0000_snapshot.json   |  95 +-
 packages/db/drizzle/meta/0001_snapshot.json   | 135 +--
 packages/db/drizzle/meta/0002_snapshot.json   | 135 +--
 packages/db/drizzle/meta/0003_snapshot.json   | 979 ++++++++++++++++++
 packages/db/drizzle/meta/_journal.json        |   9 +-
 packages/db/index.ts                          |  14 +-
 packages/db/migrate.ts                        |   9 +-
 packages/db/package.json                      |  16 +-
 packages/db/schema/api-audit-logs.ts          |   2 +-
 packages/db/schema/api-keys.ts                |   2 +-
 packages/db/schema/form-data.ts               |   2 +-
 packages/db/schema/forms.ts                   |   8 +-
 packages/db/schema/index.ts                   |   1 +
 packages/db/schema/relations.ts               |  19 +-
 packages/db/schema/users.ts                   |   2 +-
 packages/db/schema/webhook-delivery-logs.ts   |  48 +
 packages/email/index.ts                       |   5 +-
 packages/email/package.json                   |   1 -
 packages/email/tsconfig.json                  |   1 -
 packages/env/index.ts                         |   2 +
 packages/queue/connection.ts                  |  23 +
 packages/queue/index.ts                       |  10 +
 packages/queue/package.json                   |  29 +
 packages/queue/queues/webhook.ts              |  40 +
 packages/queue/services/delivery.ts           | 237 +++++
 packages/queue/tsconfig.json                  |   7 +
 packages/queue/workers/webhook.ts             |  75 ++
 packages/ui/primitives/accordion.tsx          |  40 +-
 packages/ui/primitives/alert.tsx              |  59 +-
 packages/ui/primitives/aspect-ratio.tsx       |  12 +-
 packages/ui/primitives/avatar.tsx             |  64 +-
 packages/ui/primitives/badge.tsx              |  50 +-
 packages/ui/primitives/breadcrumb.tsx         |  73 +-
 packages/ui/primitives/button-group.tsx       |  50 +-
 packages/ui/primitives/calendar.tsx           | 174 ++--
 packages/ui/primitives/card.tsx               |  63 +-
 packages/ui/primitives/carousel.tsx           | 197 ++--
 packages/ui/primitives/chart.tsx              | 211 ++--
 packages/ui/primitives/checkbox.tsx           |  19 +-
 packages/ui/primitives/collapsible.tsx        |  12 +-
 packages/ui/primitives/combobox.tsx           | 103 +-
 packages/ui/primitives/command.tsx            |  83 +-
 packages/ui/primitives/context-menu.tsx       |  94 +-
 packages/ui/primitives/dialog.tsx             |  74 +-
 packages/ui/primitives/drawer.tsx             |  55 +-
 packages/ui/primitives/dropdown-menu.tsx      | 113 +-
 packages/ui/primitives/empty.tsx              |  63 +-
 packages/ui/primitives/field.tsx              | 150 +--
 packages/ui/primitives/form.tsx               |   5 +-
 packages/ui/primitives/hover-card.tsx         |  24 +-
 packages/ui/primitives/input-group.tsx        | 110 +-
 packages/ui/primitives/input-otp.tsx          |  56 +-
 packages/ui/primitives/input.tsx              |  23 +-
 packages/ui/primitives/item.tsx               | 132 +--
 packages/ui/primitives/kbd.tsx                |  16 +-
 packages/ui/primitives/label.tsx              |  16 +-
 packages/ui/primitives/menubar.tsx            | 108 +-
 packages/ui/primitives/navigation-menu.tsx    |  70 +-
 packages/ui/primitives/pagination.tsx         |  69 +-
 packages/ui/primitives/popover.tsx            |  47 +-
 packages/ui/primitives/progress.tsx           |  33 +-
 packages/ui/primitives/radio-group.tsx        |  22 +-
 packages/ui/primitives/resizable.tsx          |  27 +-
 packages/ui/primitives/scroll-area.tsx        |  23 +-
 packages/ui/primitives/select.tsx             |  85 +-
 packages/ui/primitives/separator.tsx          |  16 +-
 packages/ui/primitives/sheet.tsx              |  66 +-
 packages/ui/primitives/sidebar.tsx            | 463 +++++----
 packages/ui/primitives/skeleton.tsx           |  10 +-
 packages/ui/primitives/slider.tsx             |  21 +-
 packages/ui/primitives/sonner.tsx             |  57 +-
 packages/ui/primitives/spinner.tsx            |  18 +-
 packages/ui/primitives/switch.tsx             |  18 +-
 packages/ui/primitives/table.tsx              |  73 +-
 packages/ui/primitives/tabs.tsx               |  50 +-
 packages/ui/primitives/textarea.tsx           |  14 +-
 packages/ui/primitives/toggle-group.tsx       |  55 +-
 packages/ui/primitives/toggle.tsx             |  36 +-
 packages/ui/primitives/tooltip.tsx            |  26 +-
 packages/ui/primitives/typography.tsx         |   2 +-
 tests/api/api-v1.test.ts                      |  26 +-
 tests/api/form.test.ts                        |   4 +-
 tests/api/formData.test.ts                    |   5 +-
 tests/api/security.test.ts                    |  20 +-
 tests/api/user.test.ts                        |   4 +-
 tests/helpers/api-v1.ts                       |   3 +-
 tests/helpers/db.ts                           |   7 +-
 tests/helpers/factories.ts                    |   2 +-
 tests/package.json                            |  24 +-
 tests/routes/submission.test.ts               |   4 +-
 tests/vitest.config.ts                        |   9 +-
 turbo.json                                    |   5 +-
 142 files changed, 4207 insertions(+), 2191 deletions(-)
 rename apps/web/.env.development.example => .env.example (87%)
 create mode 100644 apps/worker/package.json
 create mode 100644 apps/worker/src/index.ts
 create mode 100644 apps/worker/tsconfig.json
 create mode 100644 packages/db/drizzle/0003_serious_the_fury.sql
 create mode 100644 packages/db/drizzle/meta/0003_snapshot.json
 create mode 100644 packages/db/schema/webhook-delivery-logs.ts
 create mode 100644 packages/queue/connection.ts
 create mode 100644 packages/queue/index.ts
 create mode 100644 packages/queue/package.json
 create mode 100644 packages/queue/queues/webhook.ts
 create mode 100644 packages/queue/services/delivery.ts
 create mode 100644 packages/queue/tsconfig.json
 create mode 100644 packages/queue/workers/webhook.ts

diff --git a/apps/web/.env.development.example b/.env.example
similarity index 87%
rename from apps/web/.env.development.example
rename to .env.example
index a1c9eb0..a616a61 100644
--- a/apps/web/.env.development.example
+++ b/.env.example
@@ -1,5 +1,5 @@
 # Development environment (.env.local)
-# Copy this file to apps/web/.env.local
+# Copy this file to .env.local in the root directory
 
 # Drizzle / libSQL (local sqlite)
 DATABASE_URL=file:./local.db
@@ -36,3 +36,6 @@ STORAGE_USESSL=false
 STORAGE_ACCESS_KEY=formbase
 STORAGE_SECRET_KEY=password
 STORAGE_BUCKET=formbase
+
+# Redis (for webhook queue)
+REDIS_URL=redis://localhost:6379
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 7e59b46..0636f62 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -1,6 +1,12 @@
 /** @type {import('eslint').Linter.Config} */
 const config = {
-  ignorePatterns: ['apps/**', 'packages/**', 'tests/playwright-report/**', 'tests/test-results/**', '**/.eslintrc.cjs'],
+  ignorePatterns: [
+    'apps/**',
+    'packages/**',
+    'tests/playwright-report/**',
+    'tests/test-results/**',
+    '**/.eslintrc.cjs',
+  ],
   extends: ['formbase/base'],
 };
 
diff --git a/apps/web/next.config.js b/apps/web/next.config.js
index 07ce97b..de0d631 100644
--- a/apps/web/next.config.js
+++ b/apps/web/next.config.js
@@ -20,7 +20,7 @@ const nextConfig = {
     '@formbase/env',
     '@formbase/ui',
     '@formbase/utils',
-    "@formbase/tailwind",
+    '@formbase/tailwind',
   ],
   serverExternalPackages: ['libsql', '@libsql/client'],
   typescript: {
diff --git a/apps/web/package.json b/apps/web/package.json
index 83b999f..8a2aac6 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -4,10 +4,10 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "build": "next build",
-    "dev": "next dev -p 3000",
+    "build": "dotenv -e ../../.env.local -- next build",
+    "dev": "dotenv -e ../../.env.local -- next dev -p 3000",
     "lint": "eslint . --cache --max-warnings 0",
-    "start": "next start",
+    "start": "dotenv -e ../../.env.local -- next start",
     "typecheck": "tsc --noEmit --tsBuildInfoFile .tsbuildinfo"
   },
   "dependencies": {
@@ -16,6 +16,7 @@
     "@formbase/db": "workspace:*",
     "@formbase/email": "workspace:*",
     "@formbase/env": "workspace:*",
+    "@formbase/queue": "workspace:*",
     "@formbase/ui": "workspace:*",
     "@formbase/utils": "workspace:*",
     "@hookform/resolvers": "^3.4.2",
@@ -57,6 +58,7 @@
     "@types/react": "^18.3.2",
     "@types/react-dom": "^18.3.0",
     "dotenv": "^16.4.5",
+    "dotenv-cli": "^7.4.2",
     "eslint-config-formbase": "workspace:*",
     "postcss": "^8.4.38",
     "shiki": "^1.6.3",
diff --git a/apps/web/src/app/(auth)/login/login.tsx b/apps/web/src/app/(auth)/login/login.tsx
index 1613406..f367b5c 100644
--- a/apps/web/src/app/(auth)/login/login.tsx
+++ b/apps/web/src/app/(auth)/login/login.tsx
@@ -9,8 +9,6 @@ import type { FormEvent } from 'react';
 import { IconBrandGithub, IconBrandGoogleFilled } from '@tabler/icons-react';
 
 import { signIn } from '@formbase/auth/client';
-
-import { Logo } from '../_components/logo';
 import { Button } from '@formbase/ui/primitives/button';
 import { Input } from '@formbase/ui/primitives/input';
 import { Label } from '@formbase/ui/primitives/label';
@@ -20,6 +18,8 @@ import { LoadingButton } from '~/components/loading-button';
 import { PasswordInput } from '~/components/password-input';
 import { useSocialAuth } from '~/lib/hooks/use-social-auth';
 
+import { Logo } from '../_components/logo';
+
 export function Login() {
   const router = useRouter();
   const [formError, setFormError] = useState<string | null>(null);
diff --git a/apps/web/src/app/(auth)/reset-password/[token]/page.tsx b/apps/web/src/app/(auth)/reset-password/[token]/page.tsx
index 948281f..59cdf2e 100644
--- a/apps/web/src/app/(auth)/reset-password/[token]/page.tsx
+++ b/apps/web/src/app/(auth)/reset-password/[token]/page.tsx
@@ -1,7 +1,6 @@
 import Link from 'next/link';
 
 import { Logo } from '../../_components/logo';
-
 import { ResetPassword } from './reset-password';
 
 export const metadata = {
diff --git a/apps/web/src/app/(auth)/reset-password/page.tsx b/apps/web/src/app/(auth)/reset-password/page.tsx
index e8ef369..8710183 100644
--- a/apps/web/src/app/(auth)/reset-password/page.tsx
+++ b/apps/web/src/app/(auth)/reset-password/page.tsx
@@ -4,7 +4,6 @@ import { redirect } from 'next/navigation';
 import { getSession } from '@formbase/auth/server';
 
 import { Logo } from '../_components/logo';
-
 import { SendResetEmail } from './send-reset-email';
 
 export const metadata = {
diff --git a/apps/web/src/app/(auth)/reset-password/send-reset-email.tsx b/apps/web/src/app/(auth)/reset-password/send-reset-email.tsx
index 0a7ca5e..345e3ea 100644
--- a/apps/web/src/app/(auth)/reset-password/send-reset-email.tsx
+++ b/apps/web/src/app/(auth)/reset-password/send-reset-email.tsx
@@ -1,8 +1,10 @@
 'use client';
 
-import { type FormEvent, useState } from 'react';
+import { useState } from 'react';
 import { useRouter } from 'next/navigation';
 
+import type { FormEvent } from 'react';
+
 import { toast } from 'sonner';
 
 import { authClient } from '@formbase/auth/client';
@@ -46,10 +48,7 @@ export function SendResetEmail() {
   return (
     <form className="mt-8 space-y-4" onSubmit={handleResetRequest}>
       <div>
-        <Label
-          htmlFor="email"
-          className="text-sm font-medium text-foreground"
-        >
+        <Label htmlFor="email" className="text-sm font-medium text-foreground">
           Email
         </Label>
         <Input
diff --git a/apps/web/src/app/(auth)/verify-email/verify-code.tsx b/apps/web/src/app/(auth)/verify-email/verify-code.tsx
index 41ec4a6..f67b48e 100644
--- a/apps/web/src/app/(auth)/verify-email/verify-code.tsx
+++ b/apps/web/src/app/(auth)/verify-email/verify-code.tsx
@@ -37,7 +37,9 @@ export const VerifyEmail = ({ email }: { email?: string | null }) => {
       })
       .catch(() => {
         toast('Unable to verify email. Please try again.', {
-          icon: <ExclamationTriangleIcon className="h-5 w-5 text-destructive" />,
+          icon: (
+            <ExclamationTriangleIcon className="h-5 w-5 text-destructive" />
+          ),
         });
       });
   }, [token, router]);
diff --git a/apps/web/src/app/(main)/dashboard/_components/forms.tsx b/apps/web/src/app/(main)/dashboard/_components/forms.tsx
index 336b79f..756a6de 100644
--- a/apps/web/src/app/(main)/dashboard/_components/forms.tsx
+++ b/apps/web/src/app/(main)/dashboard/_components/forms.tsx
@@ -8,9 +8,7 @@ import { EmptyFormState } from './empty-state';
 import { FormCard } from './form-card';
 
 interface FormsProps {
-  promises: Promise<
-    [RouterOutputs['form']['userForms']]
-  >;
+  promises: Promise<[RouterOutputs['form']['userForms']]>;
 }
 
 export function Forms({ promises }: FormsProps) {
diff --git a/apps/web/src/app/(main)/dashboard/_components/new-form-dialog.tsx b/apps/web/src/app/(main)/dashboard/_components/new-form-dialog.tsx
index 76042c0..d8c82c3 100644
--- a/apps/web/src/app/(main)/dashboard/_components/new-form-dialog.tsx
+++ b/apps/web/src/app/(main)/dashboard/_components/new-form-dialog.tsx
@@ -10,8 +10,6 @@ import { toast } from 'sonner';
 import { z } from 'zod';
 
 import { Button } from '@formbase/ui/primitives/button';
-
-import { LoadingButton } from '~/components/loading-button';
 import {
   Dialog,
   DialogContent,
@@ -35,6 +33,7 @@ import {
   TooltipTrigger,
 } from '@formbase/ui/primitives/tooltip';
 
+import { LoadingButton } from '~/components/loading-button';
 import { api } from '~/lib/trpc/react';
 
 const FormSchema = z.object({
diff --git a/apps/web/src/app/(main)/dashboard/settings/api-keys/api-keys-section.tsx b/apps/web/src/app/(main)/dashboard/settings/api-keys/api-keys-section.tsx
index 6545d10..dd18351 100644
--- a/apps/web/src/app/(main)/dashboard/settings/api-keys/api-keys-section.tsx
+++ b/apps/web/src/app/(main)/dashboard/settings/api-keys/api-keys-section.tsx
@@ -44,7 +44,6 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from '@formbase/ui/primitives/popover';
-
 import { cn } from '@formbase/ui/utils/cn';
 
 import { CopyButton } from '~/components/copy-button';
@@ -278,7 +277,9 @@ interface ApiKeyRowProps {
 
 function ApiKeyRow({ apiKey, onDelete }: ApiKeyRowProps) {
   const isExpired = apiKey.expiresAt && new Date(apiKey.expiresAt) < new Date();
-  const { data: usageStats } = api.apiKeys.getUsageStats.useQuery({ id: apiKey.id });
+  const { data: usageStats } = api.apiKeys.getUsageStats.useQuery({
+    id: apiKey.id,
+  });
 
   return (
     <div className="flex items-center justify-between p-4">
@@ -295,7 +296,9 @@ function ApiKeyRow({ apiKey, onDelete }: ApiKeyRowProps) {
           <code className="rounded bg-muted px-1.5 py-0.5">
             {apiKey.keyPrefix}...
           </code>
-          <span>Created {format(new Date(apiKey.createdAt), 'MMM d, yyyy')}</span>
+          <span>
+            Created {format(new Date(apiKey.createdAt), 'MMM d, yyyy')}
+          </span>
           {apiKey.lastUsedAt && (
             <span>
               Last used {format(new Date(apiKey.lastUsedAt), 'MMM d, yyyy')}
diff --git a/apps/web/src/app/(main)/dashboard/settings/profile-form.tsx b/apps/web/src/app/(main)/dashboard/settings/profile-form.tsx
index a163f49..613748d 100644
--- a/apps/web/src/app/(main)/dashboard/settings/profile-form.tsx
+++ b/apps/web/src/app/(main)/dashboard/settings/profile-form.tsx
@@ -9,8 +9,6 @@ import { toast } from 'sonner';
 import { z } from 'zod';
 
 import { type User } from '@formbase/auth';
-
-import { LoadingButton } from '~/components/loading-button';
 import {
   Form,
   FormControl,
@@ -21,6 +19,7 @@ import {
 } from '@formbase/ui/primitives/form';
 import { Input } from '@formbase/ui/primitives/input';
 
+import { LoadingButton } from '~/components/loading-button';
 import { api } from '~/lib/trpc/react';
 
 const profileFormSchema = z.object({
diff --git a/apps/web/src/app/(main)/form/[id]/form-settings.tsx b/apps/web/src/app/(main)/form/[id]/form-settings.tsx
index 74fb8f6..9c1a92d 100644
--- a/apps/web/src/app/(main)/form/[id]/form-settings.tsx
+++ b/apps/web/src/app/(main)/form/[id]/form-settings.tsx
@@ -3,14 +3,20 @@
 import { useRouter } from 'next/navigation';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { BellRing, ExternalLink, FolderPen, FolderX, Shield } from 'lucide-react';
+import {
+  BellRing,
+  ExternalLink,
+  FolderPen,
+  FolderX,
+  Shield,
+  Webhook,
+} from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { toast } from 'sonner';
 import { z } from 'zod';
 
 import { type RouterOutputs } from '@formbase/api';
 import { type User } from '@formbase/auth';
-import { LoadingButton } from '~/components/loading-button';
 import {
   Form,
   FormControl,
@@ -23,6 +29,7 @@ import { Input } from '@formbase/ui/primitives/input';
 import { Label } from '@formbase/ui/primitives/label';
 import { Switch } from '@formbase/ui/primitives/switch';
 
+import { LoadingButton } from '~/components/loading-button';
 import { api } from '~/lib/trpc/react';
 
 import { revalidateDashboard } from '../../_actions/revalidateDashboard';
@@ -56,6 +63,11 @@ const honeypotFieldSchema = z.object({
   honeypotField: z.string().min(1).optional(),
 });
 
+const webhookSettingsSchema = z.object({
+  enableWebhook: z.boolean().default(false).optional(),
+  webhookUrl: z.string().url().optional().or(z.literal('')),
+});
+
 type FormNameSchema = z.infer<typeof formNameSchema>;
 type EnableFormSubmissionsSchema = z.infer<typeof enableFormSubmissionsSchema>;
 type _EnableSubmissionsRetentionSchema = z.infer<typeof enableRetentionSchema>;
@@ -112,6 +124,12 @@ export function FormSettings({ form, user }: FormSettingsProps) {
         honeypotField={form.honeypotField}
       />
 
+      <WebhookSettings
+        formId={form.id}
+        enableWebhook={form.enableWebhook}
+        webhookUrl={form.webhookUrl ?? ''}
+      />
+
       <div className="flex flex-row items-center justify-between rounded-lg border p-4">
         <div className="space-y-0.5">
           <Label className="text-base">Delete Form</Label>
@@ -562,7 +580,9 @@ const HoneypotFieldSetting = ({
 
   return (
     <Form {...honeypotFieldForm}>
-      <form onSubmit={honeypotFieldForm.handleSubmit(handleHoneypotFieldSubmit)}>
+      <form
+        onSubmit={honeypotFieldForm.handleSubmit(handleHoneypotFieldSubmit)}
+      >
         <FormField
           control={honeypotFieldForm.control}
           name="honeypotField"
@@ -594,3 +614,164 @@ const HoneypotFieldSetting = ({
     </Form>
   );
 };
+
+type WebhookSettingsSchema = z.infer<typeof webhookSettingsSchema>;
+
+const WebhookSettings = ({
+  formId,
+  enableWebhook,
+  webhookUrl,
+}: {
+  formId: string;
+  enableWebhook: boolean;
+  webhookUrl: string;
+}) => {
+  const router = useRouter();
+
+  const webhookForm = useForm<WebhookSettingsSchema>({
+    resolver: zodResolver(webhookSettingsSchema),
+    defaultValues: {
+      enableWebhook,
+      webhookUrl,
+    },
+  });
+
+  const watchEnableWebhook = webhookForm.watch('enableWebhook');
+
+  const { mutateAsync: updateWebhookSettings, isPending: isUpdating } =
+    api.form.update.useMutation();
+
+  const { mutateAsync: testWebhook, isPending: isTesting } =
+    api.form.testWebhook.useMutation();
+
+  async function handleEnableWebhookChange(isChecked: boolean) {
+    webhookForm.setValue('enableWebhook', isChecked);
+
+    try {
+      await updateWebhookSettings({
+        id: formId,
+        enableWebhook: isChecked,
+      });
+
+      toast(
+        isChecked ? 'Webhook has been enabled' : 'Webhook has been disabled',
+        { icon: <Webhook className="h-4 w-4" /> },
+      );
+
+      router.refresh();
+    } catch {
+      toast('Failed to update webhook settings', {
+        description: 'Please try again later',
+        icon: <FolderX className="h-4 w-4" />,
+      });
+    }
+  }
+
+  async function handleWebhookUrlSubmit(data: WebhookSettingsSchema) {
+    try {
+      await updateWebhookSettings({
+        id: formId,
+        webhookUrl: data.webhookUrl || null,
+      });
+
+      toast('Webhook URL has been updated', {
+        icon: <Webhook className="h-4 w-4" />,
+      });
+
+      router.refresh();
+    } catch {
+      toast('Failed to update webhook URL', {
+        description: 'URL must use HTTPS (localhost allowed for development)',
+        icon: <FolderX className="h-4 w-4" />,
+      });
+    }
+  }
+
+  async function handleTestWebhook() {
+    try {
+      await testWebhook({ formId });
+      toast('Test webhook has been queued', {
+        description: 'Check your webhook endpoint for the delivery',
+        icon: <Webhook className="h-4 w-4" />,
+      });
+    } catch {
+      toast('Failed to send test webhook', {
+        description: 'Make sure webhook is enabled and URL is configured',
+        icon: <FolderX className="h-4 w-4" />,
+      });
+    }
+  }
+
+  return (
+    <div className="space-y-4 rounded-lg border p-4">
+      <Form {...webhookForm}>
+        <FormField
+          control={webhookForm.control}
+          name="enableWebhook"
+          render={({ field }) => (
+            <FormItem className="flex flex-row items-center justify-between">
+              <div className="space-y-0.5">
+                <FormLabel className="text-base">Enable Webhook</FormLabel>
+                <FormDescription>
+                  Send an HTTP POST request on every form submission
+                </FormDescription>
+              </div>
+              <FormControl>
+                <Switch
+                  checked={field.value ?? false}
+                  onCheckedChange={handleEnableWebhookChange}
+                  disabled={isUpdating}
+                />
+              </FormControl>
+            </FormItem>
+          )}
+        />
+      </Form>
+
+      {watchEnableWebhook && (
+        <Form {...webhookForm}>
+          <form onSubmit={webhookForm.handleSubmit(handleWebhookUrlSubmit)}>
+            <FormField
+              control={webhookForm.control}
+              name="webhookUrl"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Webhook URL</FormLabel>
+                  <FormControl>
+                    <div className="flex gap-2">
+                      <Input
+                        className="flex-1"
+                        {...field}
+                        placeholder="https://example.com/webhook"
+                        type="url"
+                      />
+                      <LoadingButton
+                        loading={isUpdating}
+                        type="submit"
+                        variant="default"
+                      >
+                        Save
+                      </LoadingButton>
+                      <LoadingButton
+                        loading={isTesting}
+                        type="button"
+                        variant="outline"
+                        onClick={handleTestWebhook}
+                        disabled={!webhookUrl}
+                      >
+                        Test
+                      </LoadingButton>
+                    </div>
+                  </FormControl>
+                  <FormDescription>
+                    Must use HTTPS (localhost allowed for development)
+                  </FormDescription>
+                </FormItem>
+              )}
+            />
+          </form>
+        </Form>
+      )}
+    </div>
+  );
+};
diff --git a/apps/web/src/app/(main)/form/[id]/page.tsx b/apps/web/src/app/(main)/form/[id]/page.tsx
index eb8c06e..7b7868d 100644
--- a/apps/web/src/app/(main)/form/[id]/page.tsx
+++ b/apps/web/src/app/(main)/form/[id]/page.tsx
@@ -1,6 +1,11 @@
 import { getSession } from '@formbase/auth/server';
 import { type FormData } from '@formbase/db/schema';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@formbase/ui/primitives/tabs';
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from '@formbase/ui/primitives/tabs';
 
 import { CopyButton } from '~/components/copy-button';
 import { api } from '~/lib/trpc/server';
diff --git a/apps/web/src/app/(main)/form/[id]/submissions-table.tsx b/apps/web/src/app/(main)/form/[id]/submissions-table.tsx
index 0a1aae1..671a262 100644
--- a/apps/web/src/app/(main)/form/[id]/submissions-table.tsx
+++ b/apps/web/src/app/(main)/form/[id]/submissions-table.tsx
@@ -108,16 +108,13 @@ export function SubmissionsTable({
       {
         onSuccess: () => {
           router.refresh();
-          toast.success(
-            isSpam ? 'Marked as spam' : 'Marked as not spam',
-            {
-              icon: isSpam ? (
-                <AlertTriangle className="h-4 w-4" />
-              ) : (
-                <CheckCircle className="h-4 w-4" />
-              ),
-            },
-          );
+          toast.success(isSpam ? 'Marked as spam' : 'Marked as not spam', {
+            icon: isSpam ? (
+              <AlertTriangle className="h-4 w-4" />
+            ) : (
+              <CheckCircle className="h-4 w-4" />
+            ),
+          });
         },
       },
     );
@@ -264,10 +261,7 @@ export function SubmissionsTable({
       accessorKey: 'isSpam',
       header: () => {
         return (
-          <Button
-            variant="ghost"
-            className="px-0 py-0 hover:bg-transparent"
-          >
+          <Button variant="ghost" className="px-0 py-0 hover:bg-transparent">
             Status
           </Button>
         );
diff --git a/apps/web/src/app/(main)/onboarding/form/create-form-dialog.tsx b/apps/web/src/app/(main)/onboarding/form/create-form-dialog.tsx
index f1c1236..e03a8d5 100644
--- a/apps/web/src/app/(main)/onboarding/form/create-form-dialog.tsx
+++ b/apps/web/src/app/(main)/onboarding/form/create-form-dialog.tsx
@@ -18,8 +18,6 @@ import {
   DialogTitle,
   DialogTrigger,
 } from '@formbase/ui/primitives/dialog';
-
-import { LoadingButton } from '~/components/loading-button';
 import {
   Form,
   FormControl,
@@ -35,6 +33,7 @@ import {
   TooltipTrigger,
 } from '@formbase/ui/primitives/tooltip';
 
+import { LoadingButton } from '~/components/loading-button';
 import { api } from '~/lib/trpc/react';
 
 const FormSchema = z.object({
diff --git a/apps/web/src/app/api/auth/[...all]/route.ts b/apps/web/src/app/api/auth/[...all]/route.ts
index 40ac7b0..6ee9323 100644
--- a/apps/web/src/app/api/auth/[...all]/route.ts
+++ b/apps/web/src/app/api/auth/[...all]/route.ts
@@ -1,4 +1,5 @@
-import { auth } from '@formbase/auth';
 import { toNextJsHandler } from 'better-auth/next-js';
 
+import { auth } from '@formbase/auth';
+
 export const { GET, POST } = toNextJsHandler(auth);
diff --git a/apps/web/src/app/api/cron/cleanup-audit-logs/route.ts b/apps/web/src/app/api/cron/cleanup-audit-logs/route.ts
index 299daa8..a797786 100644
--- a/apps/web/src/app/api/cron/cleanup-audit-logs/route.ts
+++ b/apps/web/src/app/api/cron/cleanup-audit-logs/route.ts
@@ -1,5 +1,5 @@
-import { db } from '@formbase/db';
 import { cleanupOldAuditLogs } from '@formbase/api/lib/audit-log';
+import { db } from '@formbase/db';
 
 export const dynamic = 'force-dynamic';
 
diff --git a/apps/web/src/app/api/s/[id]/route.ts b/apps/web/src/app/api/s/[id]/route.ts
index d0db918..13d0523 100644
--- a/apps/web/src/app/api/s/[id]/route.ts
+++ b/apps/web/src/app/api/s/[id]/route.ts
@@ -1,12 +1,14 @@
-import { env } from "@formbase/env";
-import { userAgent } from "next/server";
+import { userAgent } from 'next/server';
 
-import { sendMail } from "~/lib/email/mailer";
-import { renderNewSubmissionEmail } from "~/lib/email/templates/new-submission";
-import { checkForSpam, stripHoneypotField } from "~/lib/spam-detection";
-import { api } from "~/lib/trpc/server";
-import { assignFileOrImage, uploadFileFromBlob } from "~/lib/upload-file";
-import { type RouterOutputs } from "@formbase/api";
+import { type RouterOutputs } from '@formbase/api';
+import { env } from '@formbase/env';
+import { enqueueWebhook } from '@formbase/queue';
+
+import { sendMail } from '~/lib/email/mailer';
+import { renderNewSubmissionEmail } from '~/lib/email/templates/new-submission';
+import { checkForSpam, stripHoneypotField } from '~/lib/spam-detection';
+import { api } from '~/lib/trpc/server';
+import { assignFileOrImage, uploadFileFromBlob } from '~/lib/upload-file';
 
 type Json = string | number | boolean | null | { [key: string]: Json } | Json[];
 
@@ -30,7 +32,10 @@ const CORS_HEADERS = {
 async function getFormData(request: Request): Promise<FormDataResult> {
   const contentType = request.headers.get('content-type') ?? '';
 
-  if (contentType.includes('multipart/form-data') || contentType.includes('application/x-www-form-urlencoded')) {
+  if (
+    contentType.includes('multipart/form-data') ||
+    contentType.includes('application/x-www-form-urlencoded')
+  ) {
     try {
       const rawFormData = await request.formData();
       const data: Record<string, Blob | string | undefined> = {};
@@ -122,14 +127,20 @@ export async function POST(
     }
 
     const honeypotField = form.honeypotField;
-    const spamResult = checkForSpam(formData as Record<string, unknown>, honeypotField);
-    const cleanedFormData = stripHoneypotField(formData as Record<string, unknown>, honeypotField);
+    const spamResult = checkForSpam(
+      formData as Record<string, unknown>,
+      honeypotField,
+    );
+    const cleanedFormData = stripHoneypotField(
+      formData as Record<string, unknown>,
+      honeypotField,
+    );
 
     const formDataKeys = Object.keys(cleanedFormData);
     const formKeys = form.keys;
     const updatedKeys = [...new Set([...formKeys, ...formDataKeys])];
 
-    await api.formData.setFormData({
+    const { id: formDataId } = await api.formData.setFormData({
       data: cleanedFormData as Json,
       formId,
       keys: updatedKeys,
@@ -140,6 +151,10 @@ export async function POST(
     if (!spamResult.isSpam) {
       void handleEmailNotifications(form, cleanedFormData);
     }
+
+    if (form.enableWebhook && form.webhookUrl) {
+      void enqueueWebhook(formId, formDataId, form.webhookUrl);
+    }
     const { browser } = userAgent(request);
 
     if (!browser.name) {
diff --git a/apps/web/src/app/api/v1/[...trpc]/route.ts b/apps/web/src/app/api/v1/[...trpc]/route.ts
index 47502bf..90dd8b7 100644
--- a/apps/web/src/app/api/v1/[...trpc]/route.ts
+++ b/apps/web/src/app/api/v1/[...trpc]/route.ts
@@ -1,8 +1,12 @@
-import { type NextRequest, NextResponse } from 'next/server';
+import { NextResponse } from 'next/server';
+
+import type { ApiV1Context } from '@formbase/api/routers/api-v1';
+import type { NextRequest } from 'next/server';
+
 import { createOpenApiFetchHandler } from 'trpc-to-openapi';
 
-import { apiV1Router, createApiV1Context, type ApiV1Context } from '@formbase/api/routers/api-v1';
 import { logApiRequest } from '@formbase/api';
+import { apiV1Router, createApiV1Context } from '@formbase/api/routers/api-v1';
 import { db } from '@formbase/db';
 
 export const dynamic = 'force-dynamic';
@@ -74,7 +78,10 @@ const handler = async (req: NextRequest) => {
       method: req.method,
       path: new URL(req.url).pathname,
       statusCode: response.status,
-      ipAddress: req.headers.get('x-forwarded-for') ?? req.headers.get('x-real-ip') ?? undefined,
+      ipAddress:
+        req.headers.get('x-forwarded-for') ??
+        req.headers.get('x-real-ip') ??
+        undefined,
       userAgent: req.headers.get('user-agent') ?? undefined,
       responseTimeMs: responseTime,
     }).catch(() => {});
diff --git a/apps/web/src/app/api/v1/openapi.json/route.ts b/apps/web/src/app/api/v1/openapi.json/route.ts
index dc18a9e..8be402c 100644
--- a/apps/web/src/app/api/v1/openapi.json/route.ts
+++ b/apps/web/src/app/api/v1/openapi.json/route.ts
@@ -1,7 +1,7 @@
 import { generateOpenApiDocument } from 'trpc-to-openapi';
 
-import { env } from '@formbase/env';
 import { apiV1Router } from '@formbase/api/routers/api-v1';
+import { env } from '@formbase/env';
 
 export const dynamic = 'force-dynamic';
 
diff --git a/apps/web/src/app/icon.tsx b/apps/web/src/app/icon.tsx
index 7694384..a651cc7 100644
--- a/apps/web/src/app/icon.tsx
+++ b/apps/web/src/app/icon.tsx
@@ -8,17 +8,15 @@ export const contentType = 'image/png';
 
 export default function Icon() {
   return new ImageResponse(
-    (
-      <div
-        tw="flex items-center justify-center bg-black text-[24px] leading-8 text-white"
-        style={{
-          width: 32,
-          height: 32,
-        }}
-      >
-        8{/* Formbase,  Eight Labs */}
-      </div>
-    ),
+    <div
+      tw="flex items-center justify-center bg-black text-[24px] leading-8 text-white"
+      style={{
+        width: 32,
+        height: 32,
+      }}
+    >
+      8{/* Formbase,  Eight Labs */}
+    </div>,
     {
       ...size,
     },
diff --git a/apps/web/src/components/password-input.tsx b/apps/web/src/components/password-input.tsx
index 8242b6c..b63093d 100644
--- a/apps/web/src/components/password-input.tsx
+++ b/apps/web/src/components/password-input.tsx
@@ -2,10 +2,10 @@
 
 import * as React from 'react';
 
-import { EyeIcon, EyeOffIcon } from 'lucide-react';
-
 import type { InputProps } from '@formbase/ui/primitives/input';
 
+import { EyeIcon, EyeOffIcon } from 'lucide-react';
+
 import { Input } from '@formbase/ui/primitives/input';
 import { cn } from '@formbase/ui/utils/cn';
 
diff --git a/apps/web/src/components/user-avatar.tsx b/apps/web/src/components/user-avatar.tsx
index 1c51204..52b2856 100644
--- a/apps/web/src/components/user-avatar.tsx
+++ b/apps/web/src/components/user-avatar.tsx
@@ -31,9 +31,7 @@ export function UserAvatar({
 
   return (
     <Avatar size={size} className={className}>
-      {hasImage ? (
-        <AvatarImage src={src} alt="Avatar" />
-      ) : null}
+      {hasImage ? <AvatarImage src={src} alt="Avatar" /> : null}
       <AvatarFallback>
         <Avvvatars value={seed} size={sizeMap[size]} />
       </AvatarFallback>
diff --git a/apps/web/src/lib/hooks/use-social-auth.ts b/apps/web/src/lib/hooks/use-social-auth.ts
index 0b66e37..099b213 100644
--- a/apps/web/src/lib/hooks/use-social-auth.ts
+++ b/apps/web/src/lib/hooks/use-social-auth.ts
@@ -12,10 +12,8 @@ interface UseSocialAuthOptions {
 }
 
 export function useSocialAuth(options: UseSocialAuthOptions = {}) {
-  const {
-    callbackURL = '/dashboard',
-    newUserCallbackURL = '/onboarding',
-  } = options;
+  const { callbackURL = '/dashboard', newUserCallbackURL = '/onboarding' } =
+    options;
 
   const [loading, setLoading] = useState<SocialProvider | null>(null);
   const [error, setError] = useState<string | null>(null);
diff --git a/apps/web/src/lib/trpc/react.tsx b/apps/web/src/lib/trpc/react.tsx
index 2557e4c..a11199d 100644
--- a/apps/web/src/lib/trpc/react.tsx
+++ b/apps/web/src/lib/trpc/react.tsx
@@ -3,7 +3,7 @@
 import { useState } from 'react';
 
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { loggerLink, httpBatchStreamLink } from '@trpc/client';
+import { httpBatchStreamLink, loggerLink } from '@trpc/client';
 import { createTRPCReact } from '@trpc/react-query';
 import { type inferRouterInputs, type inferRouterOutputs } from '@trpc/server';
 import superjson from 'superjson';
diff --git a/apps/web/src/styles/globals.css b/apps/web/src/styles/globals.css
index 1456503..0381cf1 100644
--- a/apps/web/src/styles/globals.css
+++ b/apps/web/src/styles/globals.css
@@ -153,14 +153,34 @@
 @keyframes enter {
   from {
     opacity: var(--tw-enter-opacity, 1);
-    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
+    transform: translate3d(
+        var(--tw-enter-translate-x, 0),
+        var(--tw-enter-translate-y, 0),
+        0
+      )
+      scale3d(
+        var(--tw-enter-scale, 1),
+        var(--tw-enter-scale, 1),
+        var(--tw-enter-scale, 1)
+      )
+      rotate(var(--tw-enter-rotate, 0));
   }
 }
 
 @keyframes exit {
   to {
     opacity: var(--tw-exit-opacity, 1);
-    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
+    transform: translate3d(
+        var(--tw-exit-translate-x, 0),
+        var(--tw-exit-translate-y, 0),
+        0
+      )
+      scale3d(
+        var(--tw-exit-scale, 1),
+        var(--tw-exit-scale, 1),
+        var(--tw-exit-scale, 1)
+      )
+      rotate(var(--tw-exit-rotate, 0));
   }
 }
 
@@ -170,18 +190,42 @@
 }
 
 @keyframes loader-spin {
-  8.3% { transform: rotate(30deg); }
-  16.6% { transform: rotate(60deg); }
-  25% { transform: rotate(90deg); }
-  33.3% { transform: rotate(120deg); }
-  41.6% { transform: rotate(150deg); }
-  50% { transform: rotate(180deg); }
-  58.3% { transform: rotate(210deg); }
-  66.6% { transform: rotate(240deg); }
-  75% { transform: rotate(270deg); }
-  83.3% { transform: rotate(300deg); }
-  91.6% { transform: rotate(330deg); }
-  100% { transform: rotate(360deg); }
+  8.3% {
+    transform: rotate(30deg);
+  }
+  16.6% {
+    transform: rotate(60deg);
+  }
+  25% {
+    transform: rotate(90deg);
+  }
+  33.3% {
+    transform: rotate(120deg);
+  }
+  41.6% {
+    transform: rotate(150deg);
+  }
+  50% {
+    transform: rotate(180deg);
+  }
+  58.3% {
+    transform: rotate(210deg);
+  }
+  66.6% {
+    transform: rotate(240deg);
+  }
+  75% {
+    transform: rotate(270deg);
+  }
+  83.3% {
+    transform: rotate(300deg);
+  }
+  91.6% {
+    transform: rotate(330deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
 .steps-gradient {
diff --git a/apps/web/tailwind.config.ts b/apps/web/tailwind.config.ts
index 52ffc29..ef84d60 100644
--- a/apps/web/tailwind.config.ts
+++ b/apps/web/tailwind.config.ts
@@ -1,4 +1,5 @@
 import type { Config } from 'tailwindcss';
+
 import { tailwindPreset } from '@formbase/tailwind';
 
 const config: Config = {
@@ -16,7 +17,7 @@ const config: Config = {
       },
     },
   },
-presets: [tailwindPreset],
+  presets: [tailwindPreset],
 };
 
 export default config;
diff --git a/apps/worker/package.json b/apps/worker/package.json
new file mode 100644
index 0000000..f1039da
--- /dev/null
+++ b/apps/worker/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "@formbase/worker",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "dotenv -e ../../.env.local -- tsx watch --clear-screen=false src/index.ts",
+    "lint": "eslint . --cache --max-warnings 0",
+    "start": "dotenv -e ../../.env.local -- tsx src/index.ts",
+    "typecheck": "tsc --noEmit --tsBuildInfoFile .tsbuildinfo"
+  },
+  "dependencies": {
+    "@formbase/db": "workspace:*",
+    "@formbase/env": "workspace:*",
+    "@formbase/queue": "workspace:*"
+  },
+  "devDependencies": {
+    "@formbase/tsconfig": "workspace:*",
+    "dotenv-cli": "^7.4.2",
+    "eslint-config-formbase": "workspace:*",
+    "tsx": "^4.15.5"
+  }
+}
diff --git a/apps/worker/src/index.ts b/apps/worker/src/index.ts
new file mode 100644
index 0000000..f4fd815
--- /dev/null
+++ b/apps/worker/src/index.ts
@@ -0,0 +1,29 @@
+import { closeRedisConnection, createWebhookWorker } from '@formbase/queue';
+
+console.log('Starting webhook worker...');
+
+const worker = createWebhookWorker();
+
+worker.on('completed', (job) => {
+  console.log(`Job ${job.id} completed successfully`);
+});
+
+worker.on('failed', (job, err) => {
+  console.error(`Job ${job?.id} failed:`, err.message);
+});
+
+worker.on('error', (err) => {
+  console.error('Worker error:', err);
+});
+
+async function shutdown() {
+  console.log('Shutting down worker...');
+  await worker.close();
+  await closeRedisConnection();
+  process.exit(0);
+}
+
+process.on('SIGTERM', shutdown);
+process.on('SIGINT', shutdown);
+
+console.log('Webhook worker is running. Press Ctrl+C to stop.');
diff --git a/apps/worker/tsconfig.json b/apps/worker/tsconfig.json
new file mode 100644
index 0000000..432e7a0
--- /dev/null
+++ b/apps/worker/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "extends": ["@formbase/tsconfig/base.json"],
+  "compilerOptions": {
+    "tsBuildInfoFile": ".tsbuildinfo"
+  },
+  "include": ["src/**/*.ts"]
+}
diff --git a/bun.lock b/bun.lock
index 5acf481..253164e 100644
--- a/bun.lock
+++ b/bun.lock
@@ -36,6 +36,7 @@
         "@formbase/db": "workspace:*",
         "@formbase/email": "workspace:*",
         "@formbase/env": "workspace:*",
+        "@formbase/queue": "workspace:*",
         "@formbase/ui": "workspace:*",
         "@formbase/utils": "workspace:*",
         "@hookform/resolvers": "^3.4.2",
@@ -77,12 +78,28 @@
         "@types/react": "^18.3.2",
         "@types/react-dom": "^18.3.0",
         "dotenv": "^16.4.5",
+        "dotenv-cli": "^7.4.2",
         "eslint-config-formbase": "workspace:*",
         "postcss": "^8.4.38",
         "shiki": "^1.6.3",
         "tailwindcss": "^4.1.18",
       },
     },
+    "apps/worker": {
+      "name": "@formbase/worker",
+      "version": "0.1.0",
+      "dependencies": {
+        "@formbase/db": "workspace:*",
+        "@formbase/env": "workspace:*",
+        "@formbase/queue": "workspace:*",
+      },
+      "devDependencies": {
+        "@formbase/tsconfig": "workspace:*",
+        "dotenv-cli": "^7.4.2",
+        "eslint-config-formbase": "workspace:*",
+        "tsx": "^4.15.5",
+      },
+    },
     "packages/api": {
       "name": "@formbase/api",
       "version": "0.1.0",
@@ -90,6 +107,7 @@
         "@formbase/auth": "workspace:*",
         "@formbase/db": "workspace:*",
         "@formbase/env": "workspace:*",
+        "@formbase/queue": "workspace:*",
         "@formbase/utils": "workspace:*",
         "@trpc/server": "next",
         "superjson": "^2.2.1",
@@ -224,6 +242,22 @@
         "eslint-config-formbase": "workspace:*",
       },
     },
+    "packages/queue": {
+      "name": "@formbase/queue",
+      "version": "0.1.0",
+      "dependencies": {
+        "@formbase/db": "workspace:*",
+        "@formbase/env": "workspace:*",
+        "@formbase/utils": "workspace:*",
+        "bullmq": "^5.34.8",
+        "drizzle-orm": "^0.30.10",
+        "ioredis": "^5.4.1",
+      },
+      "devDependencies": {
+        "@formbase/tsconfig": "workspace:*",
+        "eslint-config-formbase": "workspace:*",
+      },
+    },
     "packages/ui": {
       "name": "@formbase/ui",
       "version": "0.1.0",
@@ -504,6 +538,8 @@
 
     "@formbase/env": ["@formbase/env@workspace:packages/env"],
 
+    "@formbase/queue": ["@formbase/queue@workspace:packages/queue"],
+
     "@formbase/tailwind": ["@formbase/tailwind@workspace:packages/config/tailwind"],
 
     "@formbase/tests": ["@formbase/tests@workspace:tests"],
@@ -516,6 +552,8 @@
 
     "@formbase/web": ["@formbase/web@workspace:apps/web"],
 
+    "@formbase/worker": ["@formbase/worker@workspace:apps/worker"],
+
     "@hapi/bourne": ["@hapi/bourne@3.0.0", "", {}, "sha512-Waj1cwPXJDucOib4a3bAISsKJVb15MKi9IvmTI/7ssVEm6sywXGjVJDhl6/umt1pK1ZS7PacXU3A1PmFKHEZ2w=="],
 
     "@hookform/resolvers": ["@hookform/resolvers@3.10.0", "", { "peerDependencies": { "react-hook-form": "^7.0.0" } }, "sha512-79Dv+3mDF7i+2ajj7SkypSKHhl1cbln1OGavqrsF7p6mbUv11xpqpacPsGDCTRvCSjEEIez2ef1NveSVL3b0Ag=="],
@@ -578,6 +616,8 @@
 
     "@img/sharp-win32-x64": ["@img/sharp-win32-x64@0.34.5", "", { "os": "win32", "cpu": "x64" }, "sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw=="],
 
+    "@ioredis/commands": ["@ioredis/commands@1.5.0", "", {}, "sha512-eUgLqrMf8nJkZxT24JvVRrQya1vZkQh8BBeYNwGDqa5I0VUi8ACx7uFvAaLxintokpTenkK6DASvo/bvNbBGow=="],
+
     "@isaacs/balanced-match": ["@isaacs/balanced-match@4.0.1", "", {}, "sha512-yzMTt9lEb8Gv7zRioUilSglI0c0smZ9k5D65677DLWLtWJaXIS3CqcGyUFByYKlnUj6TkjLVs54fBl6+TiGQDQ=="],
 
     "@isaacs/brace-expansion": ["@isaacs/brace-expansion@5.0.0", "", { "dependencies": { "@isaacs/balanced-match": "^4.0.1" } }, "sha512-ZT55BDLV0yv0RBm2czMiZ+SqCGO7AvmOM3G/w2xhVPH+te0aKgFjmBvGlL1dH+ql2tgGO3MVrbb3jCKyvpgnxA=="],
@@ -628,6 +668,18 @@
 
     "@microsoft/tsdoc-config": ["@microsoft/tsdoc-config@0.18.0", "", { "dependencies": { "@microsoft/tsdoc": "0.16.0", "ajv": "~8.12.0", "jju": "~1.4.0", "resolve": "~1.22.2" } }, "sha512-8N/vClYyfOH+l4fLkkr9+myAoR6M7akc8ntBJ4DJdWH2b09uVfr71+LTMpNyG19fNqWDg8KEDZhx5wxuqHyGjw=="],
 
+    "@msgpackr-extract/msgpackr-extract-darwin-arm64": ["@msgpackr-extract/msgpackr-extract-darwin-arm64@3.0.3", "", { "os": "darwin", "cpu": "arm64" }, "sha512-QZHtlVgbAdy2zAqNA9Gu1UpIuI8Xvsd1v8ic6B2pZmeFnFcMWiPLfWXh7TVw4eGEZ/C9TH281KwhVoeQUKbyjw=="],
+
+    "@msgpackr-extract/msgpackr-extract-darwin-x64": ["@msgpackr-extract/msgpackr-extract-darwin-x64@3.0.3", "", { "os": "darwin", "cpu": "x64" }, "sha512-mdzd3AVzYKuUmiWOQ8GNhl64/IoFGol569zNRdkLReh6LRLHOXxU4U8eq0JwaD8iFHdVGqSy4IjFL4reoWCDFw=="],
+
+    "@msgpackr-extract/msgpackr-extract-linux-arm": ["@msgpackr-extract/msgpackr-extract-linux-arm@3.0.3", "", { "os": "linux", "cpu": "arm" }, "sha512-fg0uy/dG/nZEXfYilKoRe7yALaNmHoYeIoJuJ7KJ+YyU2bvY8vPv27f7UKhGRpY6euFYqEVhxCFZgAUNQBM3nw=="],
+
+    "@msgpackr-extract/msgpackr-extract-linux-arm64": ["@msgpackr-extract/msgpackr-extract-linux-arm64@3.0.3", "", { "os": "linux", "cpu": "arm64" }, "sha512-YxQL+ax0XqBJDZiKimS2XQaf+2wDGVa1enVRGzEvLLVFeqa5kx2bWbtcSXgsxjQB7nRqqIGFIcLteF/sHeVtQg=="],
+
+    "@msgpackr-extract/msgpackr-extract-linux-x64": ["@msgpackr-extract/msgpackr-extract-linux-x64@3.0.3", "", { "os": "linux", "cpu": "x64" }, "sha512-cvwNfbP07pKUfq1uH+S6KJ7dT9K8WOE4ZiAcsrSes+UY55E/0jLYc+vq+DO7jlmqRb5zAggExKm0H7O/CBaesg=="],
+
+    "@msgpackr-extract/msgpackr-extract-win32-x64": ["@msgpackr-extract/msgpackr-extract-win32-x64@3.0.3", "", { "os": "win32", "cpu": "x64" }, "sha512-x0fWaQtYp4E6sktbsdAqnehxDgEc/VwM7uLsRCYWaiGu0ykYdZPiS8zCWdnjHwyiumousxfBm4SO31eXqwEZhQ=="],
+
     "@napi-rs/wasm-runtime": ["@napi-rs/wasm-runtime@0.2.12", "", { "dependencies": { "@emnapi/core": "^1.4.3", "@emnapi/runtime": "^1.4.3", "@tybys/wasm-util": "^0.10.0" } }, "sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ=="],
 
     "@neon-rs/load": ["@neon-rs/load@0.0.4", "", {}, "sha512-kTPhdZyTQxB+2wpiRcFWrDcejc4JI6tkPuS7UZCG4l6Zvc5kU/gGQ/ozvHTh1XR5tS+UlfAfGuPajjzQjCiHCw=="],
@@ -1198,6 +1250,8 @@
 
     "buffer-from": ["buffer-from@1.1.2", "", {}, "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="],
 
+    "bullmq": ["bullmq@5.67.1", "", { "dependencies": { "cron-parser": "4.9.0", "ioredis": "5.9.2", "msgpackr": "1.11.5", "node-abort-controller": "3.1.1", "semver": "7.7.3", "tslib": "2.8.1", "uuid": "11.1.0" } }, "sha512-ELJEAzwzesgFxk29emvnAakqrwdBEhEyfZREPQ8pbG4ALVz/mk/AhfuChzxkFpJ7SfL2qclPHbiUGBZzaqcLvg=="],
+
     "bundle-require": ["bundle-require@5.1.0", "", { "dependencies": { "load-tsconfig": "^0.2.3" }, "peerDependencies": { "esbuild": ">=0.18" } }, "sha512-3WrrOuZiyaaZPWiEt4G3+IffISVC9HYlWueJEBWED4ZH4aIAC2PnkdnuRrR94M+w6yGWn4AglWtJtBI8YqvgoA=="],
 
     "bytes": ["bytes@3.1.2", "", {}, "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg=="],
@@ -1238,6 +1292,8 @@
 
     "clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
 
+    "cluster-key-slot": ["cluster-key-slot@1.1.2", "", {}, "sha512-RMr0FhtfXemyinomL4hrWcYJxmX6deFdCxpJzhDttxgO1+bcCnkk+9drydLVDmAMG7NE6aN/fl4F7ucU/90gAA=="],
+
     "cmdk": ["cmdk@1.1.1", "", { "dependencies": { "@radix-ui/react-compose-refs": "^1.1.1", "@radix-ui/react-dialog": "^1.1.6", "@radix-ui/react-id": "^1.1.0", "@radix-ui/react-primitive": "^2.0.2" }, "peerDependencies": { "react": "^18 || ^19 || ^19.0.0-rc", "react-dom": "^18 || ^19 || ^19.0.0-rc" } }, "sha512-Vsv7kFaXm+ptHDMZ7izaRsP70GgrW9NBNGswt9OZaVBLlE0SNpDq8eu/VGXyF9r7M0azK3Wy7OlYXsuyYLFzHg=="],
 
     "co-body": ["co-body@6.2.0", "", { "dependencies": { "@hapi/bourne": "^3.0.0", "inflation": "^2.0.0", "qs": "^6.5.2", "raw-body": "^2.3.3", "type-is": "^1.6.16" } }, "sha512-Kbpv2Yd1NdL1V/V4cwLVxraHDV6K8ayohr2rmH0J87Er8+zJjcTa6dAn9QMPC9CRgU8+aNajKbSf1TzDB1yKPA=="],
@@ -1266,6 +1322,8 @@
 
     "copy-anything": ["copy-anything@4.0.5", "", { "dependencies": { "is-what": "^5.2.0" } }, "sha512-7Vv6asjS4gMOuILabD3l739tsaxFQmC+a7pLZm02zyvs8p977bL3zEgq3yDk5rn9B0PbYgIv++jmHcuUab4RhA=="],
 
+    "cron-parser": ["cron-parser@4.9.0", "", { "dependencies": { "luxon": "^3.2.1" } }, "sha512-p0SaNjrHOnQeR8/VnfGbmg9te2kfyYSQ7Sc/j/6DtPL3JQvKxmjO9TSjNFpujqV3vEYYBvNNvXSxzyksBWAx1Q=="],
+
     "cross-spawn": ["cross-spawn@7.0.6", "", { "dependencies": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", "which": "^2.0.1" } }, "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA=="],
 
     "crossws": ["crossws@0.3.5", "", { "dependencies": { "uncrypto": "^0.1.3" } }, "sha512-ojKiDvcmByhwa8YYqbQI/hg7MEU0NC03+pSdEq4ZUnZR9xXpwk7E43SMNGkn+JxJGPFtNvQ48+vV2p+P1ml5PA=="],
@@ -1332,6 +1390,8 @@
 
     "defu": ["defu@6.1.4", "", {}, "sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg=="],
 
+    "denque": ["denque@2.1.0", "", {}, "sha512-HVQE3AAb/pxF8fQAoiqpvg9i3evqug3hoiwakOyZAwJm+6vZehbkYXZ0l4JxS+I3QxM97v5aaRNhj8v5oBhekw=="],
+
     "depd": ["depd@2.0.0", "", {}, "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw=="],
 
     "dequal": ["dequal@2.0.3", "", {}, "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA=="],
@@ -1640,6 +1700,8 @@
 
     "internmap": ["internmap@2.0.3", "", {}, "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg=="],
 
+    "ioredis": ["ioredis@5.9.2", "", { "dependencies": { "@ioredis/commands": "1.5.0", "cluster-key-slot": "^1.1.0", "debug": "^4.3.4", "denque": "^2.1.0", "lodash.defaults": "^4.2.0", "lodash.isarguments": "^3.1.0", "redis-errors": "^1.2.0", "redis-parser": "^3.0.0", "standard-as-callback": "^2.1.0" } }, "sha512-tAAg/72/VxOUW7RQSX1pIxJVucYKcjFjfvj60L57jrZpYCHC3XN0WCQ3sNYL4Gmvv+7GPvTAjc+KSdeNuE8oWQ=="],
+
     "ipaddr.js": ["ipaddr.js@2.3.0", "", {}, "sha512-Zv/pA+ciVFbCSBBjGfaKUya/CcGmUHzTydLMaTwrUUEM2DIEO3iZvueGxmacvmN50fGpGVKeTXpb2LcYQxeVdg=="],
 
     "iron-webcrypto": ["iron-webcrypto@1.2.1", "", {}, "sha512-feOM6FaSr6rEABp/eDfVseKyTMDt+KGpeB35SkVn9Tyn0CqvVsY3EwI0v5i8nMHyJnzCIQf7nsy3p41TPkJZhg=="],
@@ -1806,6 +1868,10 @@
 
     "lodash": ["lodash@4.17.21", "", {}, "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="],
 
+    "lodash.defaults": ["lodash.defaults@4.2.0", "", {}, "sha512-qjxPLHd3r5DnsdGacqOMU6pb/avJzdh9tFX2ymgoZE27BmjXrNy/y4LoaiTeAb+O3gL8AfpJGtqfX/ae2leYYQ=="],
+
+    "lodash.isarguments": ["lodash.isarguments@3.1.0", "", {}, "sha512-chi4NHZlZqZD18a0imDHnZPrDeBbTtVN7GXMwuGdRH9qotxAjYs3aVLKc7zNOG9eddR5Ksd8rvFEBc9SsggPpg=="],
+
     "lodash.merge": ["lodash.merge@4.6.2", "", {}, "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="],
 
     "lodash.throttle": ["lodash.throttle@4.1.1", "", {}, "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="],
@@ -1820,6 +1886,8 @@
 
     "lucide-react": ["lucide-react@0.379.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0" } }, "sha512-KcdeVPqmhRldldAAgptb8FjIunM2x2Zy26ZBh1RsEUcdLIvsEmbcw7KpzFYUy5BbpGeWhPu9Z9J5YXfStiXwhg=="],
 
+    "luxon": ["luxon@3.7.2", "", {}, "sha512-vtEhXh/gNjI9Yg1u4jX/0YVPMvxzHuGgCm6tC5kZyb08yjGWGnqAjGJvcXbqQR2P3MyMEFnRbpcdFS6PBcLqew=="],
+
     "magic-string": ["magic-string@0.30.21", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" } }, "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ=="],
 
     "magicast": ["magicast@0.3.5", "", { "dependencies": { "@babel/parser": "^7.25.4", "@babel/types": "^7.25.4", "source-map-js": "^1.2.0" } }, "sha512-L0WhttDl+2BOsybvEOLK7fW3UA0OQ0IQ2d6Zl2x/a6vVRs3bAY0ECOSHHeL5jD+SbOpOCUEi0y1DgHEn9Qn1AQ=="],
@@ -1910,6 +1978,10 @@
 
     "ms": ["ms@2.1.3", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="],
 
+    "msgpackr": ["msgpackr@1.11.5", "", { "optionalDependencies": { "msgpackr-extract": "^3.0.2" } }, "sha512-UjkUHN0yqp9RWKy0Lplhh+wlpdt9oQBYgULZOiFhV3VclSF1JnSQWZ5r9gORQlNYaUKQoR8itv7g7z1xDDuACA=="],
+
+    "msgpackr-extract": ["msgpackr-extract@3.0.3", "", { "dependencies": { "node-gyp-build-optional-packages": "5.2.2" }, "optionalDependencies": { "@msgpackr-extract/msgpackr-extract-darwin-arm64": "3.0.3", "@msgpackr-extract/msgpackr-extract-darwin-x64": "3.0.3", "@msgpackr-extract/msgpackr-extract-linux-arm": "3.0.3", "@msgpackr-extract/msgpackr-extract-linux-arm64": "3.0.3", "@msgpackr-extract/msgpackr-extract-linux-x64": "3.0.3", "@msgpackr-extract/msgpackr-extract-win32-x64": "3.0.3" }, "bin": { "download-msgpackr-prebuilds": "bin/download-prebuilds.js" } }, "sha512-P0efT1C9jIdVRefqjzOQ9Xml57zpOXnIuS+csaB4MdZbTdmGDLo8XhzBG1N7aO11gKDDkJvBLULeFTo46wwreA=="],
+
     "mz": ["mz@2.7.0", "", { "dependencies": { "any-promise": "^1.0.0", "object-assign": "^4.0.1", "thenify-all": "^1.0.0" } }, "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q=="],
 
     "nanoid": ["nanoid@5.1.6", "", { "bin": { "nanoid": "bin/nanoid.js" } }, "sha512-c7+7RQ+dMB5dPwwCp4ee1/iV/q2P6aK1mTZcfr1BTuVlyW9hJYiMPybJCcnBlQtuSmTIWNeazm/zqNoZSSElBg=="],
@@ -1926,10 +1998,14 @@
 
     "next-tick": ["next-tick@1.1.0", "", {}, "sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ=="],
 
+    "node-abort-controller": ["node-abort-controller@3.1.1", "", {}, "sha512-AGK2yQKIjRuqnc6VkX2Xj5d+QW8xZ87pa1UK6yA6ouUyuxfHuMP6umE5QK7UmTeOAymo+Zx1Fxiuw9rVx8taHQ=="],
+
     "node-domexception": ["node-domexception@1.0.0", "", {}, "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ=="],
 
     "node-fetch": ["node-fetch@3.3.2", "", { "dependencies": { "data-uri-to-buffer": "^4.0.0", "fetch-blob": "^3.1.4", "formdata-polyfill": "^4.0.10" } }, "sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA=="],
 
+    "node-gyp-build-optional-packages": ["node-gyp-build-optional-packages@5.2.2", "", { "dependencies": { "detect-libc": "^2.0.1" }, "bin": { "node-gyp-build-optional-packages": "bin.js", "node-gyp-build-optional-packages-optional": "optional.js", "node-gyp-build-optional-packages-test": "build-test.js" } }, "sha512-s+w+rBWnpTMwSFbaE0UXsRlg7hU4FjekKU4eyAih5T8nJuNZT1nNsskXpxmeqSK9UzkBl6UgRlnKc8hz8IEqOw=="],
+
     "node-mock-http": ["node-mock-http@1.0.4", "", {}, "sha512-8DY+kFsDkNXy1sJglUfuODx1/opAGJGyrTuFqEoN90oRc2Vk0ZbD4K2qmKXBBEhZQzdKHIVfEJpDU8Ak2NJEvQ=="],
 
     "node-releases": ["node-releases@2.0.27", "", {}, "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA=="],
@@ -2080,6 +2156,10 @@
 
     "recharts-scale": ["recharts-scale@0.4.5", "", { "dependencies": { "decimal.js-light": "^2.4.1" } }, "sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w=="],
 
+    "redis-errors": ["redis-errors@1.2.0", "", {}, "sha512-1qny3OExCf0UvUV/5wpYKf2YwPcOqXzkwKKSmKHiE6ZMQs5heeE/c8eXK+PNllPvmjgAbfnsbpkGZWy8cBpn9w=="],
+
+    "redis-parser": ["redis-parser@3.0.0", "", { "dependencies": { "redis-errors": "^1.0.0" } }, "sha512-DJnGAeenTdpMEH6uAJRK/uiyEIH9WVsUmoLwzudwGJUwZPp80PDBWPHXSAGNPwNvIXAbe7MSUB1zQFugFml66A=="],
+
     "reflect.getprototypeof": ["reflect.getprototypeof@1.0.10", "", { "dependencies": { "call-bind": "^1.0.8", "define-properties": "^1.2.1", "es-abstract": "^1.23.9", "es-errors": "^1.3.0", "es-object-atoms": "^1.0.0", "get-intrinsic": "^1.2.7", "get-proto": "^1.0.1", "which-builtin-type": "^1.2.1" } }, "sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw=="],
 
     "regex": ["regex@5.1.1", "", { "dependencies": { "regex-utilities": "^2.3.0" } }, "sha512-dN5I359AVGPnwzJm2jN1k0W9LPZ+ePvoOeVMMfqIMFz53sSwXkxaJoxr50ptnsC771lK95BnTrVSZxq0b9yCGw=="],
@@ -2192,6 +2272,8 @@
 
     "stackback": ["stackback@0.0.2", "", {}, "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw=="],
 
+    "standard-as-callback": ["standard-as-callback@2.1.0", "", {}, "sha512-qoRRSyROncaz1z0mvYqIE4lCd9p2R90i6GxW3uZv5ucSu8tU7B5HXUP1gG8pVZsYNVaXjk8ClXHPttLyxAL48A=="],
+
     "statuses": ["statuses@2.0.2", "", {}, "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw=="],
 
     "std-env": ["std-env@3.10.0", "", {}, "sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg=="],
@@ -2384,6 +2466,8 @@
 
     "util-deprecate": ["util-deprecate@1.0.2", "", {}, "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="],
 
+    "uuid": ["uuid@11.1.0", "", { "bin": { "uuid": "dist/esm/bin/uuid" } }, "sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A=="],
+
     "vaul": ["vaul@1.1.2", "", { "dependencies": { "@radix-ui/react-dialog": "^1.1.1" }, "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc" } }, "sha512-ZFkClGpWyI2WUQjdLJ/BaGuV6AVQiJ3uELGk3OYtP+B6yCO7Cmn9vPFXVJkRaGkOJu3m8bQMgtyzNHixULceQA=="],
 
     "vfile": ["vfile@6.0.3", "", { "dependencies": { "@types/unist": "^3.0.0", "vfile-message": "^4.0.0" } }, "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q=="],
diff --git a/docker/docker-compose.yml b/docker/docker-compose.yml
index 3bf943c..5798310 100644
--- a/docker/docker-compose.yml
+++ b/docker/docker-compose.yml
@@ -26,6 +26,16 @@ services:
     entrypoint: sh
     command: -c 'mkdir -p /data/formbase && minio server /data --console-address ":9001" --address ":9002"'
 
+  redis:
+    image: redis:7-alpine
+    container_name: formbase-redis
+    ports:
+      - 6379:6379
+    volumes:
+      - redis:/data
+    command: redis-server --appendonly yes
+
 volumes:
   formbase-mail:
   minio:
+  redis:
diff --git a/package.json b/package.json
index dcb36f2..8976f1e 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,10 @@
     "build": "turbo build",
     "clean": "rimraf --glob **/node_modules **/dist **/.turbo **/.next **/.astro **/.eslintcache bun.lock **/.tsbuildinfo **/test-results",
     "d": "bun install && bun docker:start && bun run dev",
+    "db:generate": "bun run --cwd packages/db db:generate",
+    "db:migrate": "bun run --cwd packages/db db:migrate",
+    "db:push": "bun run --cwd packages/db db:push",
+    "db:studio": "bun run --cwd packages/db db:studio",
     "dev": "turbo dev",
     "docker:start": "docker-compose  -p formbase -f ./docker/docker-compose.yml up -d",
     "format": "prettier \"**/*\" --ignore-unknown --list-different --write",
@@ -23,7 +27,11 @@
     "test:coverage": "turbo run test:coverage",
     "test:e2e": "turbo run test:e2e",
     "tests:ui": "bun run --cwd=tests test:e2e:ui",
-    "typecheck": "tsc --noEmit --tsBuildInfoFile .tsbuildinfo"
+    "typecheck": "tsc --noEmit --tsBuildInfoFile .tsbuildinfo",
+    "worker": "bun run --cwd apps/worker start"
+  },
+  "dependencies": {
+    "disposable-email-domains": "^1.0.62"
   },
   "devDependencies": {
     "@formbase/tsconfig": "workspace:*",
@@ -44,8 +52,5 @@
     "turbo": "^2.0.0",
     "typescript": "5.8.2"
   },
-  "packageManager": "bun@1.3.2",
-  "dependencies": {
-    "disposable-email-domains": "^1.0.62"
-  }
+  "packageManager": "bun@1.3.2"
 }
diff --git a/packages/api/lib/api-key.ts b/packages/api/lib/api-key.ts
index 0bb52dc..884a483 100644
--- a/packages/api/lib/api-key.ts
+++ b/packages/api/lib/api-key.ts
@@ -2,7 +2,11 @@ import { createHash, randomBytes } from 'crypto';
 
 const API_KEY_PREFIX = 'api_';
 
-export function generateApiKey(): { key: string; prefix: string; hash: string } {
+export function generateApiKey(): {
+  key: string;
+  prefix: string;
+  hash: string;
+} {
   const randomPart = randomBytes(24).toString('base64url');
   const key = `${API_KEY_PREFIX}${randomPart}`;
   const prefix = key.slice(0, 12);
diff --git a/packages/api/lib/audit-log.ts b/packages/api/lib/audit-log.ts
index 1f6b255..bf7eedb 100644
--- a/packages/api/lib/audit-log.ts
+++ b/packages/api/lib/audit-log.ts
@@ -38,7 +38,13 @@ function sanitizeRequestBody(body: unknown): string | null {
   if (typeof body !== 'object') return JSON.stringify(body);
 
   const sanitized = { ...(body as Record<string, unknown>) };
-  const sensitiveKeys = ['password', 'token', 'secret', 'apiKey', 'authorization'];
+  const sensitiveKeys = [
+    'password',
+    'token',
+    'secret',
+    'apiKey',
+    'authorization',
+  ];
 
   for (const key of sensitiveKeys) {
     if (key in sanitized) {
@@ -51,5 +57,7 @@ function sanitizeRequestBody(body: unknown): string | null {
 
 export async function cleanupOldAuditLogs(db: Database) {
   const ninetyDaysAgo = new Date(Date.now() - 90 * 24 * 60 * 60 * 1000);
-  await db.delete(apiAuditLogs).where(drizzlePrimitives.lt(apiAuditLogs.createdAt, ninetyDaysAgo));
+  await db
+    .delete(apiAuditLogs)
+    .where(drizzlePrimitives.lt(apiAuditLogs.createdAt, ninetyDaysAgo));
 }
diff --git a/packages/api/middleware/api-auth.ts b/packages/api/middleware/api-auth.ts
index f44de42..c6654ad 100644
--- a/packages/api/middleware/api-auth.ts
+++ b/packages/api/middleware/api-auth.ts
@@ -3,10 +3,10 @@ import type { LibSQLDatabase } from 'drizzle-orm/libsql';
 import { drizzlePrimitives } from '@formbase/db';
 import { apiKeys } from '@formbase/db/schema';
 
-const { and, eq, gt, isNull, or } = drizzlePrimitives;
-
 import { hashApiKey } from '../lib/api-key';
 
+const { and, eq, gt, isNull, or } = drizzlePrimitives;
+
 type Database = LibSQLDatabase<Record<string, never>>;
 
 export async function validateApiKey(
diff --git a/packages/api/middleware/rate-limit.ts b/packages/api/middleware/rate-limit.ts
index e6fb2eb..ad7bf33 100644
--- a/packages/api/middleware/rate-limit.ts
+++ b/packages/api/middleware/rate-limit.ts
@@ -32,7 +32,9 @@ export function checkRateLimit(keyId: string): RateLimitResult {
   const resetAt = new Date(entry.windowStart + WINDOW_MS);
 
   if (entry.count >= MAX_REQUESTS) {
-    const retryAfterSeconds = Math.ceil((entry.windowStart + WINDOW_MS - now) / 1000);
+    const retryAfterSeconds = Math.ceil(
+      (entry.windowStart + WINDOW_MS - now) / 1000,
+    );
     return {
       allowed: false,
       remaining: 0,
diff --git a/packages/api/package.json b/packages/api/package.json
index 73eb093..369f920 100644
--- a/packages/api/package.json
+++ b/packages/api/package.json
@@ -11,6 +11,7 @@
     "@formbase/auth": "workspace:*",
     "@formbase/db": "workspace:*",
     "@formbase/env": "workspace:*",
+    "@formbase/queue": "workspace:*",
     "@formbase/utils": "workspace:*",
     "@trpc/server": "next",
     "superjson": "^2.2.1",
diff --git a/packages/api/routers/api-keys.ts b/packages/api/routers/api-keys.ts
index 154ad34..94cb71a 100644
--- a/packages/api/routers/api-keys.ts
+++ b/packages/api/routers/api-keys.ts
@@ -50,7 +50,10 @@ export const apiKeysRouter = createRouter({
       });
 
       if (!apiKey) {
-        throw new TRPCError({ code: 'NOT_FOUND', message: 'API key not found' });
+        throw new TRPCError({
+          code: 'NOT_FOUND',
+          message: 'API key not found',
+        });
       }
 
       await ctx.db.delete(apiKeys).where(eq(apiKeys.id, input.id));
@@ -65,7 +68,10 @@ export const apiKeysRouter = createRouter({
       });
 
       if (!apiKey) {
-        throw new TRPCError({ code: 'NOT_FOUND', message: 'API key not found' });
+        throw new TRPCError({
+          code: 'NOT_FOUND',
+          message: 'API key not found',
+        });
       }
 
       const now = new Date();
diff --git a/packages/api/routers/api-v1/index.ts b/packages/api/routers/api-v1/index.ts
index 51db99c..ce2d9ca 100644
--- a/packages/api/routers/api-v1/index.ts
+++ b/packages/api/routers/api-v1/index.ts
@@ -1,8 +1,10 @@
+import type { ApiV1Context } from './trpc';
+
 import { initTRPC } from '@trpc/server';
 
 import { formsRouter } from './forms';
 import { submissionsRouter } from './submissions';
-import { createApiV1Router, type ApiV1Context } from './trpc';
+import { createApiV1Router } from './trpc';
 
 export const apiV1Router = createApiV1Router({
   forms: formsRouter,
diff --git a/packages/api/routers/api-v1/ownership.ts b/packages/api/routers/api-v1/ownership.ts
index f83f29d..1edae2b 100644
--- a/packages/api/routers/api-v1/ownership.ts
+++ b/packages/api/routers/api-v1/ownership.ts
@@ -6,13 +6,9 @@ const { and, eq } = drizzlePrimitives;
 
 type DbContext = { db: typeof import('@formbase/db').db; user: { id: string } };
 
-export async function assertApiFormOwnership(
-  ctx: DbContext,
-  formId: string,
-) {
+export async function assertApiFormOwnership(ctx: DbContext, formId: string) {
   const form = await ctx.db.query.forms.findFirst({
-    where: (table) =>
-      and(eq(table.id, formId), eq(table.userId, ctx.user.id)),
+    where: (table) => and(eq(table.id, formId), eq(table.userId, ctx.user.id)),
   });
 
   if (!form) {
@@ -33,8 +29,7 @@ export async function assertApiSubmissionOwnership(
   await assertApiFormOwnership(ctx, formId);
 
   const submission = await ctx.db.query.formDatas.findFirst({
-    where: (table) =>
-      and(eq(table.id, submissionId), eq(table.formId, formId)),
+    where: (table) => and(eq(table.id, submissionId), eq(table.formId, formId)),
   });
 
   if (!submission) {
diff --git a/packages/api/routers/api-v1/submissions.ts b/packages/api/routers/api-v1/submissions.ts
index ecebbc8..2796b78 100644
--- a/packages/api/routers/api-v1/submissions.ts
+++ b/packages/api/routers/api-v1/submissions.ts
@@ -28,7 +28,8 @@ export const submissionsRouter = createApiV1Router({
         path: '/forms/{formId}/submissions',
         tags: ['Submissions'],
         summary: 'List submissions for a form',
-        description: 'Returns a paginated list of submissions with optional date and spam filtering.',
+        description:
+          'Returns a paginated list of submissions with optional date and spam filtering.',
       },
     })
     .input(
@@ -51,7 +52,9 @@ export const submissionsRouter = createApiV1Router({
       const whereConditions = [eq(formDatas.formId, input.formId)];
 
       if (input.startDate) {
-        whereConditions.push(gte(formDatas.createdAt, new Date(input.startDate)));
+        whereConditions.push(
+          gte(formDatas.createdAt, new Date(input.startDate)),
+        );
       }
       if (input.endDate) {
         const endDate = new Date(input.endDate);
@@ -71,10 +74,7 @@ export const submissionsRouter = createApiV1Router({
           limit: input.perPage,
           orderBy: (table, { desc }) => desc(table.createdAt),
         }),
-        ctx.db
-          .select({ count: count() })
-          .from(formDatas)
-          .where(whereClause),
+        ctx.db.select({ count: count() }).from(formDatas).where(whereClause),
       ]);
 
       const total = totalResult[0]?.count ?? 0;
@@ -178,10 +178,7 @@ export const submissionsRouter = createApiV1Router({
 
       const submissions = await ctx.db.query.formDatas.findMany({
         where: (table) =>
-          and(
-            inArray(table.id, input.ids),
-            eq(table.formId, input.formId),
-          ),
+          and(inArray(table.id, input.ids), eq(table.formId, input.formId)),
       });
 
       const foundIds = submissions.map((s) => s.id);
diff --git a/packages/api/routers/api-v1/trpc.ts b/packages/api/routers/api-v1/trpc.ts
index 51ff11b..33fd131 100644
--- a/packages/api/routers/api-v1/trpc.ts
+++ b/packages/api/routers/api-v1/trpc.ts
@@ -1,8 +1,9 @@
-import { initTRPC, TRPCError } from '@trpc/server';
+import type { User } from '@formbase/db/schema';
 import type { OpenApiMeta } from 'trpc-to-openapi';
+
+import { initTRPC, TRPCError } from '@trpc/server';
 import { ZodError } from 'zod';
 
-import type { User } from '@formbase/db/schema';
 import { db } from '@formbase/db';
 
 import { validateApiKey } from '../../middleware/api-auth';
diff --git a/packages/api/routers/form.ts b/packages/api/routers/form.ts
index d819382..4013a3f 100644
--- a/packages/api/routers/form.ts
+++ b/packages/api/routers/form.ts
@@ -1,11 +1,14 @@
-import { drizzlePrimitives } from "@formbase/db";
-import { formDatas, forms, onboardingForms } from "@formbase/db/schema";
-import { generateId } from "@formbase/utils/generate-id";
-import { z } from "zod";
+import { TRPCError } from '@trpc/server';
+import { z } from 'zod';
 
-import { createTRPCRouter, protectedProcedure, publicProcedure } from "../trpc";
-import { parseJsonArray, serializeJson } from "../utils/json";
-import { assertFormOwnership } from "./form-ownership";
+import { drizzlePrimitives } from '@formbase/db';
+import { formDatas, forms, onboardingForms } from '@formbase/db/schema';
+import { createTestWebhookJob } from '@formbase/queue';
+import { generateId } from '@formbase/utils/generate-id';
+
+import { createTRPCRouter, protectedProcedure, publicProcedure } from '../trpc';
+import { parseJsonArray, serializeJson } from '../utils/json';
+import { assertFormOwnership } from './form-ownership';
 
 const { and, count, eq } = drizzlePrimitives;
 
@@ -127,6 +130,34 @@ export const formRouter = createTRPCRouter({
         returnUrl: z.string().optional(),
         defaultSubmissionEmail: z.string().optional(),
         honeypotField: z.string().optional(),
+        enableWebhook: z.boolean().optional(),
+        webhookUrl: z
+          .string()
+          .url()
+          .refine(
+            (url) => {
+              try {
+                const parsed = new URL(url);
+                if (parsed.protocol === 'https:') return true;
+                if (
+                  parsed.protocol === 'http:' &&
+                  (parsed.hostname === 'localhost' ||
+                    parsed.hostname === '127.0.0.1')
+                ) {
+                  return true;
+                }
+                return false;
+              } catch {
+                return false;
+              }
+            },
+            {
+              message:
+                'Webhook URL must use HTTPS (localhost allowed for development)',
+            },
+          )
+          .optional()
+          .nullable(),
       }),
     )
     .mutation(async ({ ctx, input }) => {
@@ -145,6 +176,9 @@ export const formRouter = createTRPCRouter({
           defaultSubmissionEmail:
             input.defaultSubmissionEmail ?? form.defaultSubmissionEmail,
           honeypotField: input.honeypotField ?? form.honeypotField,
+          enableWebhook: input.enableWebhook ?? form.enableWebhook,
+          webhookUrl:
+            input.webhookUrl !== undefined ? input.webhookUrl : form.webhookUrl,
         })
         .where(eq(forms.id, input.id));
     }),
@@ -182,6 +216,8 @@ export const formRouter = createTRPCRouter({
         enableSubmissions: existingForm.enableSubmissions,
         defaultSubmissionEmail: existingForm.defaultSubmissionEmail,
         honeypotField: existingForm.honeypotField,
+        enableWebhook: existingForm.enableWebhook,
+        webhookUrl: existingForm.webhookUrl,
       });
 
       return { id: newId };
@@ -254,4 +290,27 @@ export const formRouter = createTRPCRouter({
         keys: parseJsonArray(form.keys),
       };
     }),
+
+  testWebhook: protectedProcedure
+    .input(z.object({ formId: z.string() }))
+    .mutation(async ({ ctx, input }) => {
+      const form = await assertFormOwnership(ctx, input.formId);
+
+      if (!form.enableWebhook || !form.webhookUrl) {
+        throw new TRPCError({
+          code: 'BAD_REQUEST',
+          message: 'Webhook is not enabled or URL is not configured',
+        });
+      }
+
+      const jobId = await createTestWebhookJob(form.id, form.webhookUrl);
+      if (!jobId) {
+        throw new TRPCError({
+          code: 'INTERNAL_SERVER_ERROR',
+          message: 'Failed to create test webhook job',
+        });
+      }
+
+      return { jobId };
+    }),
 });
diff --git a/packages/api/routers/formData.ts b/packages/api/routers/formData.ts
index 7d217ed..a7a46ec 100644
--- a/packages/api/routers/formData.ts
+++ b/packages/api/routers/formData.ts
@@ -7,10 +7,7 @@ import { generateId } from '@formbase/utils/generate-id';
 
 import { createTRPCRouter, protectedProcedure, publicProcedure } from '../trpc';
 import { parseJsonObject, serializeJson } from '../utils/json';
-import {
-  assertFormDataOwnership,
-  assertFormOwnership,
-} from './form-ownership';
+import { assertFormDataOwnership, assertFormOwnership } from './form-ownership';
 
 const { eq } = drizzlePrimitives;
 
@@ -124,10 +121,11 @@ export const formDataRouter = createTRPCRouter({
     )
     .mutation(async ({ ctx, input }) => {
       return await ctx.db.transaction(async (tx) => {
-        const formdata = await tx.insert(formDatas).values({
+        const id = generateId(15);
+        await tx.insert(formDatas).values({
           data: serializeJson(input.data),
           formId: input.formId,
-          id: generateId(15),
+          id,
           createdAt: new Date(),
           isSpam: input.isSpam,
           spamReason: input.spamReason ?? null,
@@ -141,7 +139,7 @@ export const formDataRouter = createTRPCRouter({
           })
           .where(eq(forms.id, input.formId));
 
-        return formdata;
+        return { id };
       });
     }),
 
diff --git a/packages/api/utils/json.ts b/packages/api/utils/json.ts
index 182c67a..6f01f82 100644
--- a/packages/api/utils/json.ts
+++ b/packages/api/utils/json.ts
@@ -11,9 +11,7 @@ export function parseJsonArray(value: string): string[] {
   return Array.isArray(parsed) ? (parsed as string[]) : [];
 }
 
-export function parseJsonObject(
-  value: string,
-): Record<string, unknown> | null {
+export function parseJsonObject(value: string): Record<string, unknown> | null {
   return safeParseJson<Record<string, unknown> | null>(value, null);
 }
 
diff --git a/packages/config/tailwind/src/preset.ts b/packages/config/tailwind/src/preset.ts
index dadf53a..4b7ee32 100644
--- a/packages/config/tailwind/src/preset.ts
+++ b/packages/config/tailwind/src/preset.ts
@@ -1,3 +1,4 @@
+import themer from '@tailus/themer';
 import aspectRatio from '@tailwindcss/aspect-ratio';
 import containerQueries from '@tailwindcss/container-queries';
 import forms from '@tailwindcss/forms';
@@ -6,7 +7,6 @@ import animate from 'tailwindcss-animate';
 import plugin from 'tailwindcss/plugin';
 
 import { type Config } from 'tailwindcss';
-import themer from '@tailus/themer';
 
 // Default sans-serif font stack (previously from tailwindcss/defaultTheme)
 const defaultSansFonts = [
@@ -131,16 +131,16 @@ export const tailwindPreset: Config = {
       handler: containerQueries.handler,
     },
     themer({
-        radius: 'smoothest',
-        background: 'lighter',
-        border: 'light',
-        padding: 'large',
-        components: {
-          button: {
-            rounded: '2xl',
-          },
+      radius: 'smoothest',
+      background: 'lighter',
+      border: 'light',
+      padding: 'large',
+      components: {
+        button: {
+          rounded: '2xl',
         },
-      }),
+      },
+    }),
     // Base UI data attribute variants
     plugin(function ({ addVariant }) {
       // Base UI state variants
@@ -166,7 +166,10 @@ export const tailwindPreset: Config = {
       addVariant('in-data-closed', ':not([data-open]) &');
 
       // Supports backdrop filter
-      addVariant('supports-backdrop-filter', '@supports (backdrop-filter: blur(0))');
+      addVariant(
+        'supports-backdrop-filter',
+        '@supports (backdrop-filter: blur(0))',
+      );
     }),
   ],
 };
diff --git a/packages/db/drizzle/0003_serious_the_fury.sql b/packages/db/drizzle/0003_serious_the_fury.sql
new file mode 100644
index 0000000..4e3f4fe
--- /dev/null
+++ b/packages/db/drizzle/0003_serious_the_fury.sql
@@ -0,0 +1,23 @@
+CREATE TABLE `webhook_delivery_logs` (
+	`id` text PRIMARY KEY NOT NULL,
+	`form_id` text NOT NULL,
+	`form_data_id` text,
+	`webhook_url` text NOT NULL,
+	`payload` text NOT NULL,
+	`status` text DEFAULT 'pending' NOT NULL,
+	`status_code` integer,
+	`response_body` text,
+	`error_message` text,
+	`attempts` integer DEFAULT 0 NOT NULL,
+	`next_retry_at` integer,
+	`created_at` integer DEFAULT (cast(unixepoch('subsecond') * 1000 as integer)) NOT NULL,
+	`completed_at` integer,
+	FOREIGN KEY (`form_id`) REFERENCES `forms`(`id`) ON UPDATE no action ON DELETE cascade,
+	FOREIGN KEY (`form_data_id`) REFERENCES `form_datas`(`id`) ON UPDATE no action ON DELETE set null
+);
+--> statement-breakpoint
+ALTER TABLE `forms` ADD `enable_webhook` integer DEFAULT false NOT NULL;--> statement-breakpoint
+ALTER TABLE `forms` ADD `webhook_url` text;--> statement-breakpoint
+CREATE INDEX `webhook_log_form_idx` ON `webhook_delivery_logs` (`form_id`);--> statement-breakpoint
+CREATE INDEX `webhook_log_status_idx` ON `webhook_delivery_logs` (`status`);--> statement-breakpoint
+CREATE INDEX `webhook_log_next_retry_idx` ON `webhook_delivery_logs` (`next_retry_at`);
\ No newline at end of file
diff --git a/packages/db/drizzle/meta/0000_snapshot.json b/packages/db/drizzle/meta/0000_snapshot.json
index 619c4c4..ae670da 100644
--- a/packages/db/drizzle/meta/0000_snapshot.json
+++ b/packages/db/drizzle/meta/0000_snapshot.json
@@ -104,17 +104,12 @@
       "indexes": {
         "account_userId_idx": {
           "name": "account_userId_idx",
-          "columns": [
-            "user_id"
-          ],
+          "columns": ["user_id"],
           "isUnique": false
         },
         "account_provider_account_idx": {
           "name": "account_provider_account_idx",
-          "columns": [
-            "provider_id",
-            "account_id"
-          ],
+          "columns": ["provider_id", "account_id"],
           "isUnique": true
         }
       },
@@ -123,12 +118,8 @@
           "name": "account_user_id_user_id_fk",
           "tableFrom": "account",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -172,16 +163,12 @@
       "indexes": {
         "form_idx": {
           "name": "form_idx",
-          "columns": [
-            "form_id"
-          ],
+          "columns": ["form_id"],
           "isUnique": false
         },
         "form_data_created_at_idx": {
           "name": "form_data_created_at_idx",
-          "columns": [
-            "created_at"
-          ],
+          "columns": ["created_at"],
           "isUnique": false
         }
       },
@@ -190,12 +177,8 @@
           "name": "form_datas_form_id_forms_id_fk",
           "tableFrom": "form_datas",
           "tableTo": "forms",
-          "columnsFrom": [
-            "form_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["form_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -298,16 +281,12 @@
       "indexes": {
         "form_user_idx": {
           "name": "form_user_idx",
-          "columns": [
-            "user_id"
-          ],
+          "columns": ["user_id"],
           "isUnique": false
         },
         "form_created_at_idx": {
           "name": "form_created_at_idx",
-          "columns": [
-            "created_at"
-          ],
+          "columns": ["created_at"],
           "isUnique": false
         }
       },
@@ -316,12 +295,8 @@
           "name": "forms_user_id_user_id_fk",
           "tableFrom": "forms",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -368,12 +343,8 @@
           "name": "onboarding_forms_user_id_user_id_fk",
           "tableFrom": "onboarding_forms",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -381,12 +352,8 @@
           "name": "onboarding_forms_form_id_forms_id_fk",
           "tableFrom": "onboarding_forms",
           "tableTo": "forms",
-          "columnsFrom": [
-            "form_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["form_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -459,16 +426,12 @@
       "indexes": {
         "session_token_unique": {
           "name": "session_token_unique",
-          "columns": [
-            "token"
-          ],
+          "columns": ["token"],
           "isUnique": true
         },
         "session_userId_idx": {
           "name": "session_userId_idx",
-          "columns": [
-            "user_id"
-          ],
+          "columns": ["user_id"],
           "isUnique": false
         }
       },
@@ -477,12 +440,8 @@
           "name": "session_user_id_user_id_fk",
           "tableFrom": "session",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -549,16 +508,12 @@
       "indexes": {
         "user_email_unique": {
           "name": "user_email_unique",
-          "columns": [
-            "email"
-          ],
+          "columns": ["email"],
           "isUnique": true
         },
         "user_email_idx": {
           "name": "user_email_idx",
-          "columns": [
-            "email"
-          ],
+          "columns": ["email"],
           "isUnique": false
         }
       },
@@ -617,9 +572,7 @@
       "indexes": {
         "verification_identifier_idx": {
           "name": "verification_identifier_idx",
-          "columns": [
-            "identifier"
-          ],
+          "columns": ["identifier"],
           "isUnique": false
         }
       },
@@ -634,4 +587,4 @@
     "tables": {},
     "columns": {}
   }
-}
\ No newline at end of file
+}
diff --git a/packages/db/drizzle/meta/0001_snapshot.json b/packages/db/drizzle/meta/0001_snapshot.json
index 21dcecd..1c9606b 100644
--- a/packages/db/drizzle/meta/0001_snapshot.json
+++ b/packages/db/drizzle/meta/0001_snapshot.json
@@ -104,17 +104,12 @@
       "indexes": {
         "account_userId_idx": {
           "name": "account_userId_idx",
-          "columns": [
-            "user_id"
-          ],
+          "columns": ["user_id"],
           "isUnique": false
         },
         "account_provider_account_idx": {
           "name": "account_provider_account_idx",
-          "columns": [
-            "provider_id",
-            "account_id"
-          ],
+          "columns": ["provider_id", "account_id"],
           "isUnique": true
         }
       },
@@ -123,12 +118,8 @@
           "name": "account_user_id_user_id_fk",
           "tableFrom": "account",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -221,23 +212,17 @@
       "indexes": {
         "audit_api_key_idx": {
           "name": "audit_api_key_idx",
-          "columns": [
-            "api_key_id"
-          ],
+          "columns": ["api_key_id"],
           "isUnique": false
         },
         "audit_user_idx": {
           "name": "audit_user_idx",
-          "columns": [
-            "user_id"
-          ],
+          "columns": ["user_id"],
           "isUnique": false
         },
         "audit_created_at_idx": {
           "name": "audit_created_at_idx",
-          "columns": [
-            "created_at"
-          ],
+          "columns": ["created_at"],
           "isUnique": false
         }
       },
@@ -246,12 +231,8 @@
           "name": "api_audit_logs_api_key_id_api_keys_id_fk",
           "tableFrom": "api_audit_logs",
           "tableTo": "api_keys",
-          "columnsFrom": [
-            "api_key_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["api_key_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -323,23 +304,17 @@
       "indexes": {
         "api_keys_key_hash_unique": {
           "name": "api_keys_key_hash_unique",
-          "columns": [
-            "key_hash"
-          ],
+          "columns": ["key_hash"],
           "isUnique": true
         },
         "api_key_user_idx": {
           "name": "api_key_user_idx",
-          "columns": [
-            "user_id"
-          ],
+          "columns": ["user_id"],
           "isUnique": false
         },
         "api_key_hash_idx": {
           "name": "api_key_hash_idx",
-          "columns": [
-            "key_hash"
-          ],
+          "columns": ["key_hash"],
           "isUnique": false
         }
       },
@@ -348,12 +323,8 @@
           "name": "api_keys_user_id_user_id_fk",
           "tableFrom": "api_keys",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -397,16 +368,12 @@
       "indexes": {
         "form_idx": {
           "name": "form_idx",
-          "columns": [
-            "form_id"
-          ],
+          "columns": ["form_id"],
           "isUnique": false
         },
         "form_data_created_at_idx": {
           "name": "form_data_created_at_idx",
-          "columns": [
-            "created_at"
-          ],
+          "columns": ["created_at"],
           "isUnique": false
         }
       },
@@ -415,12 +382,8 @@
           "name": "form_datas_form_id_forms_id_fk",
           "tableFrom": "form_datas",
           "tableTo": "forms",
-          "columnsFrom": [
-            "form_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["form_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -523,16 +486,12 @@
       "indexes": {
         "form_user_idx": {
           "name": "form_user_idx",
-          "columns": [
-            "user_id"
-          ],
+          "columns": ["user_id"],
           "isUnique": false
         },
         "form_created_at_idx": {
           "name": "form_created_at_idx",
-          "columns": [
-            "created_at"
-          ],
+          "columns": ["created_at"],
           "isUnique": false
         }
       },
@@ -541,12 +500,8 @@
           "name": "forms_user_id_user_id_fk",
           "tableFrom": "forms",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -593,12 +548,8 @@
           "name": "onboarding_forms_user_id_user_id_fk",
           "tableFrom": "onboarding_forms",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -606,12 +557,8 @@
           "name": "onboarding_forms_form_id_forms_id_fk",
           "tableFrom": "onboarding_forms",
           "tableTo": "forms",
-          "columnsFrom": [
-            "form_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["form_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -684,16 +631,12 @@
       "indexes": {
         "session_token_unique": {
           "name": "session_token_unique",
-          "columns": [
-            "token"
-          ],
+          "columns": ["token"],
           "isUnique": true
         },
         "session_userId_idx": {
           "name": "session_userId_idx",
-          "columns": [
-            "user_id"
-          ],
+          "columns": ["user_id"],
           "isUnique": false
         }
       },
@@ -702,12 +645,8 @@
           "name": "session_user_id_user_id_fk",
           "tableFrom": "session",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -774,16 +713,12 @@
       "indexes": {
         "user_email_unique": {
           "name": "user_email_unique",
-          "columns": [
-            "email"
-          ],
+          "columns": ["email"],
           "isUnique": true
         },
         "user_email_idx": {
           "name": "user_email_idx",
-          "columns": [
-            "email"
-          ],
+          "columns": ["email"],
           "isUnique": false
         }
       },
@@ -842,9 +777,7 @@
       "indexes": {
         "verification_identifier_idx": {
           "name": "verification_identifier_idx",
-          "columns": [
-            "identifier"
-          ],
+          "columns": ["identifier"],
           "isUnique": false
         }
       },
@@ -859,4 +792,4 @@
     "tables": {},
     "columns": {}
   }
-}
\ No newline at end of file
+}
diff --git a/packages/db/drizzle/meta/0002_snapshot.json b/packages/db/drizzle/meta/0002_snapshot.json
index 32d8791..aeb68b0 100644
--- a/packages/db/drizzle/meta/0002_snapshot.json
+++ b/packages/db/drizzle/meta/0002_snapshot.json
@@ -104,17 +104,12 @@
       "indexes": {
         "account_userId_idx": {
           "name": "account_userId_idx",
-          "columns": [
-            "user_id"
-          ],
+          "columns": ["user_id"],
           "isUnique": false
         },
         "account_provider_account_idx": {
           "name": "account_provider_account_idx",
-          "columns": [
-            "provider_id",
-            "account_id"
-          ],
+          "columns": ["provider_id", "account_id"],
           "isUnique": true
         }
       },
@@ -123,12 +118,8 @@
           "name": "account_user_id_user_id_fk",
           "tableFrom": "account",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -221,23 +212,17 @@
       "indexes": {
         "audit_api_key_idx": {
           "name": "audit_api_key_idx",
-          "columns": [
-            "api_key_id"
-          ],
+          "columns": ["api_key_id"],
           "isUnique": false
         },
         "audit_user_idx": {
           "name": "audit_user_idx",
-          "columns": [
-            "user_id"
-          ],
+          "columns": ["user_id"],
           "isUnique": false
         },
         "audit_created_at_idx": {
           "name": "audit_created_at_idx",
-          "columns": [
-            "created_at"
-          ],
+          "columns": ["created_at"],
           "isUnique": false
         }
       },
@@ -246,12 +231,8 @@
           "name": "api_audit_logs_api_key_id_api_keys_id_fk",
           "tableFrom": "api_audit_logs",
           "tableTo": "api_keys",
-          "columnsFrom": [
-            "api_key_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["api_key_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -323,23 +304,17 @@
       "indexes": {
         "api_keys_key_hash_unique": {
           "name": "api_keys_key_hash_unique",
-          "columns": [
-            "key_hash"
-          ],
+          "columns": ["key_hash"],
           "isUnique": true
         },
         "api_key_user_idx": {
           "name": "api_key_user_idx",
-          "columns": [
-            "user_id"
-          ],
+          "columns": ["user_id"],
           "isUnique": false
         },
         "api_key_hash_idx": {
           "name": "api_key_hash_idx",
-          "columns": [
-            "key_hash"
-          ],
+          "columns": ["key_hash"],
           "isUnique": false
         }
       },
@@ -348,12 +323,8 @@
           "name": "api_keys_user_id_user_id_fk",
           "tableFrom": "api_keys",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -420,16 +391,12 @@
       "indexes": {
         "form_idx": {
           "name": "form_idx",
-          "columns": [
-            "form_id"
-          ],
+          "columns": ["form_id"],
           "isUnique": false
         },
         "form_data_created_at_idx": {
           "name": "form_data_created_at_idx",
-          "columns": [
-            "created_at"
-          ],
+          "columns": ["created_at"],
           "isUnique": false
         }
       },
@@ -438,12 +405,8 @@
           "name": "form_datas_form_id_forms_id_fk",
           "tableFrom": "form_datas",
           "tableTo": "forms",
-          "columnsFrom": [
-            "form_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["form_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -554,16 +517,12 @@
       "indexes": {
         "form_user_idx": {
           "name": "form_user_idx",
-          "columns": [
-            "user_id"
-          ],
+          "columns": ["user_id"],
           "isUnique": false
         },
         "form_created_at_idx": {
           "name": "form_created_at_idx",
-          "columns": [
-            "created_at"
-          ],
+          "columns": ["created_at"],
           "isUnique": false
         }
       },
@@ -572,12 +531,8 @@
           "name": "forms_user_id_user_id_fk",
           "tableFrom": "forms",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -624,12 +579,8 @@
           "name": "onboarding_forms_user_id_user_id_fk",
           "tableFrom": "onboarding_forms",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -637,12 +588,8 @@
           "name": "onboarding_forms_form_id_forms_id_fk",
           "tableFrom": "onboarding_forms",
           "tableTo": "forms",
-          "columnsFrom": [
-            "form_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["form_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -715,16 +662,12 @@
       "indexes": {
         "session_token_unique": {
           "name": "session_token_unique",
-          "columns": [
-            "token"
-          ],
+          "columns": ["token"],
           "isUnique": true
         },
         "session_userId_idx": {
           "name": "session_userId_idx",
-          "columns": [
-            "user_id"
-          ],
+          "columns": ["user_id"],
           "isUnique": false
         }
       },
@@ -733,12 +676,8 @@
           "name": "session_user_id_user_id_fk",
           "tableFrom": "session",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -805,16 +744,12 @@
       "indexes": {
         "user_email_unique": {
           "name": "user_email_unique",
-          "columns": [
-            "email"
-          ],
+          "columns": ["email"],
           "isUnique": true
         },
         "user_email_idx": {
           "name": "user_email_idx",
-          "columns": [
-            "email"
-          ],
+          "columns": ["email"],
           "isUnique": false
         }
       },
@@ -873,9 +808,7 @@
       "indexes": {
         "verification_identifier_idx": {
           "name": "verification_identifier_idx",
-          "columns": [
-            "identifier"
-          ],
+          "columns": ["identifier"],
           "isUnique": false
         }
       },
@@ -890,4 +823,4 @@
     "tables": {},
     "columns": {}
   }
-}
\ No newline at end of file
+}
diff --git a/packages/db/drizzle/meta/0003_snapshot.json b/packages/db/drizzle/meta/0003_snapshot.json
new file mode 100644
index 0000000..9e1dd73
--- /dev/null
+++ b/packages/db/drizzle/meta/0003_snapshot.json
@@ -0,0 +1,979 @@
+{
+  "version": "6",
+  "dialect": "sqlite",
+  "id": "32f474c5-79f7-42da-aba1-e63a93e1f5ee",
+  "prevId": "57d4c97e-b93c-4e5d-977d-b619497f66a1",
+  "tables": {
+    "account": {
+      "name": "account",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "account_id": {
+          "name": "account_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "provider_id": {
+          "name": "provider_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "access_token": {
+          "name": "access_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "refresh_token": {
+          "name": "refresh_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "id_token": {
+          "name": "id_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "access_token_expires_at": {
+          "name": "access_token_expires_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "refresh_token_expires_at": {
+          "name": "refresh_token_expires_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "scope": {
+          "name": "scope",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "password": {
+          "name": "password",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(cast(unixepoch('subsecond') * 1000 as integer))"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(cast(unixepoch('subsecond') * 1000 as integer))"
+        }
+      },
+      "indexes": {
+        "account_userId_idx": {
+          "name": "account_userId_idx",
+          "columns": ["user_id"],
+          "isUnique": false
+        },
+        "account_provider_account_idx": {
+          "name": "account_provider_account_idx",
+          "columns": ["provider_id", "account_id"],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {
+        "account_user_id_user_id_fk": {
+          "name": "account_user_id_user_id_fk",
+          "tableFrom": "account",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "api_audit_logs": {
+      "name": "api_audit_logs",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "api_key_id": {
+          "name": "api_key_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "method": {
+          "name": "method",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "path": {
+          "name": "path",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "status_code": {
+          "name": "status_code",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "ip_address": {
+          "name": "ip_address",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "user_agent": {
+          "name": "user_agent",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "request_body": {
+          "name": "request_body",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "response_time_ms": {
+          "name": "response_time_ms",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(cast(unixepoch('subsecond') * 1000 as integer))"
+        }
+      },
+      "indexes": {
+        "audit_api_key_idx": {
+          "name": "audit_api_key_idx",
+          "columns": ["api_key_id"],
+          "isUnique": false
+        },
+        "audit_user_idx": {
+          "name": "audit_user_idx",
+          "columns": ["user_id"],
+          "isUnique": false
+        },
+        "audit_created_at_idx": {
+          "name": "audit_created_at_idx",
+          "columns": ["created_at"],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "api_audit_logs_api_key_id_api_keys_id_fk": {
+          "name": "api_audit_logs_api_key_id_api_keys_id_fk",
+          "tableFrom": "api_audit_logs",
+          "tableTo": "api_keys",
+          "columnsFrom": ["api_key_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "api_keys": {
+      "name": "api_keys",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "key_hash": {
+          "name": "key_hash",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "key_prefix": {
+          "name": "key_prefix",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "expires_at": {
+          "name": "expires_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "last_used_at": {
+          "name": "last_used_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(cast(unixepoch('subsecond') * 1000 as integer))"
+        }
+      },
+      "indexes": {
+        "api_keys_key_hash_unique": {
+          "name": "api_keys_key_hash_unique",
+          "columns": ["key_hash"],
+          "isUnique": true
+        },
+        "api_key_user_idx": {
+          "name": "api_key_user_idx",
+          "columns": ["user_id"],
+          "isUnique": false
+        },
+        "api_key_hash_idx": {
+          "name": "api_key_hash_idx",
+          "columns": ["key_hash"],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "api_keys_user_id_user_id_fk": {
+          "name": "api_keys_user_id_user_id_fk",
+          "tableFrom": "api_keys",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "form_datas": {
+      "name": "form_datas",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "form_id": {
+          "name": "form_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "data": {
+          "name": "data",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(cast(unixepoch('subsecond') * 1000 as integer))"
+        },
+        "is_spam": {
+          "name": "is_spam",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        },
+        "spam_reason": {
+          "name": "spam_reason",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "manual_override": {
+          "name": "manual_override",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        }
+      },
+      "indexes": {
+        "form_idx": {
+          "name": "form_idx",
+          "columns": ["form_id"],
+          "isUnique": false
+        },
+        "form_data_created_at_idx": {
+          "name": "form_data_created_at_idx",
+          "columns": ["created_at"],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "form_datas_form_id_forms_id_fk": {
+          "name": "form_datas_form_id_forms_id_fk",
+          "tableFrom": "form_datas",
+          "tableTo": "forms",
+          "columnsFrom": ["form_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "forms": {
+      "name": "forms",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "title": {
+          "name": "title",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(cast(unixepoch('subsecond') * 1000 as integer))"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "return_url": {
+          "name": "return_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "send_email_for_new_submissions": {
+          "name": "send_email_for_new_submissions",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": true
+        },
+        "keys": {
+          "name": "keys",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "enable_submissions": {
+          "name": "enable_submissions",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": true
+        },
+        "enable_retention": {
+          "name": "enable_retention",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": true
+        },
+        "default_submission_email": {
+          "name": "default_submission_email",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "honeypot_field": {
+          "name": "honeypot_field",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'_gotcha'"
+        },
+        "enable_webhook": {
+          "name": "enable_webhook",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        },
+        "webhook_url": {
+          "name": "webhook_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "form_user_idx": {
+          "name": "form_user_idx",
+          "columns": ["user_id"],
+          "isUnique": false
+        },
+        "form_created_at_idx": {
+          "name": "form_created_at_idx",
+          "columns": ["created_at"],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "forms_user_id_user_id_fk": {
+          "name": "forms_user_id_user_id_fk",
+          "tableFrom": "forms",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "onboarding_forms": {
+      "name": "onboarding_forms",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "form_id": {
+          "name": "form_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(cast(unixepoch('subsecond') * 1000 as integer))"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "onboarding_forms_user_id_user_id_fk": {
+          "name": "onboarding_forms_user_id_user_id_fk",
+          "tableFrom": "onboarding_forms",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "onboarding_forms_form_id_forms_id_fk": {
+          "name": "onboarding_forms_form_id_forms_id_fk",
+          "tableFrom": "onboarding_forms",
+          "tableTo": "forms",
+          "columnsFrom": ["form_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "session": {
+      "name": "session",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "expires_at": {
+          "name": "expires_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "token": {
+          "name": "token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(cast(unixepoch('subsecond') * 1000 as integer))"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(cast(unixepoch('subsecond') * 1000 as integer))"
+        },
+        "ip_address": {
+          "name": "ip_address",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "user_agent": {
+          "name": "user_agent",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "session_token_unique": {
+          "name": "session_token_unique",
+          "columns": ["token"],
+          "isUnique": true
+        },
+        "session_userId_idx": {
+          "name": "session_userId_idx",
+          "columns": ["user_id"],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "session_user_id_user_id_fk": {
+          "name": "session_user_id_user_id_fk",
+          "tableFrom": "session",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "user": {
+      "name": "user",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "email": {
+          "name": "email",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "email_verified": {
+          "name": "email_verified",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        },
+        "image": {
+          "name": "image",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(cast(unixepoch('subsecond') * 1000 as integer))"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(cast(unixepoch('subsecond') * 1000 as integer))"
+        }
+      },
+      "indexes": {
+        "user_email_unique": {
+          "name": "user_email_unique",
+          "columns": ["email"],
+          "isUnique": true
+        },
+        "user_email_idx": {
+          "name": "user_email_idx",
+          "columns": ["email"],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "verification": {
+      "name": "verification",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "identifier": {
+          "name": "identifier",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "value": {
+          "name": "value",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "expires_at": {
+          "name": "expires_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(cast(unixepoch('subsecond') * 1000 as integer))"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(cast(unixepoch('subsecond') * 1000 as integer))"
+        }
+      },
+      "indexes": {
+        "verification_identifier_idx": {
+          "name": "verification_identifier_idx",
+          "columns": ["identifier"],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "webhook_delivery_logs": {
+      "name": "webhook_delivery_logs",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "form_id": {
+          "name": "form_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "form_data_id": {
+          "name": "form_data_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "webhook_url": {
+          "name": "webhook_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "payload": {
+          "name": "payload",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "status": {
+          "name": "status",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'pending'"
+        },
+        "status_code": {
+          "name": "status_code",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "response_body": {
+          "name": "response_body",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "error_message": {
+          "name": "error_message",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "attempts": {
+          "name": "attempts",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        },
+        "next_retry_at": {
+          "name": "next_retry_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(cast(unixepoch('subsecond') * 1000 as integer))"
+        },
+        "completed_at": {
+          "name": "completed_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "webhook_log_form_idx": {
+          "name": "webhook_log_form_idx",
+          "columns": ["form_id"],
+          "isUnique": false
+        },
+        "webhook_log_status_idx": {
+          "name": "webhook_log_status_idx",
+          "columns": ["status"],
+          "isUnique": false
+        },
+        "webhook_log_next_retry_idx": {
+          "name": "webhook_log_next_retry_idx",
+          "columns": ["next_retry_at"],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "webhook_delivery_logs_form_id_forms_id_fk": {
+          "name": "webhook_delivery_logs_form_id_forms_id_fk",
+          "tableFrom": "webhook_delivery_logs",
+          "tableTo": "forms",
+          "columnsFrom": ["form_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "webhook_delivery_logs_form_data_id_form_datas_id_fk": {
+          "name": "webhook_delivery_logs_form_data_id_form_datas_id_fk",
+          "tableFrom": "webhook_delivery_logs",
+          "tableTo": "form_datas",
+          "columnsFrom": ["form_data_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    }
+  },
+  "enums": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  }
+}
diff --git a/packages/db/drizzle/meta/_journal.json b/packages/db/drizzle/meta/_journal.json
index 52f2575..6b198bd 100644
--- a/packages/db/drizzle/meta/_journal.json
+++ b/packages/db/drizzle/meta/_journal.json
@@ -22,6 +22,13 @@
       "when": 1768165812454,
       "tag": "0002_majestic_the_hood",
       "breakpoints": true
+    },
+    {
+      "idx": 3,
+      "version": "6",
+      "when": 1769432697918,
+      "tag": "0003_serious_the_fury",
+      "breakpoints": true
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/packages/db/index.ts b/packages/db/index.ts
index 414dc5a..6fc0309 100644
--- a/packages/db/index.ts
+++ b/packages/db/index.ts
@@ -1,5 +1,17 @@
 import { createClient } from '@libsql/client';
-import { and, count, eq, gt, gte, inArray, isNull, lt, lte, or, sql } from 'drizzle-orm';
+import {
+  and,
+  count,
+  eq,
+  gt,
+  gte,
+  inArray,
+  isNull,
+  lt,
+  lte,
+  or,
+  sql,
+} from 'drizzle-orm';
 import { drizzle } from 'drizzle-orm/libsql';
 
 import { env } from '@formbase/env';
diff --git a/packages/db/migrate.ts b/packages/db/migrate.ts
index e8ee1d3..c1988a8 100644
--- a/packages/db/migrate.ts
+++ b/packages/db/migrate.ts
@@ -70,13 +70,14 @@ const baselineMigrations = async () => {
     sql`INSERT INTO ${sql.identifier(migrationsTable)} ("hash", "created_at") VALUES (${latest.hash}, ${latest.folderMillis})`,
   );
 
-  console.warn(
-    'Migrations were baselined to match the current schema.',
-  );
+  console.warn('Migrations were baselined to match the current schema.');
 };
 
 let baselined = false;
-if ((await getLastMigrationTimestamp()) === null && (await hasAnySchemaTable())) {
+if (
+  (await getLastMigrationTimestamp()) === null &&
+  (await hasAnySchemaTable())
+) {
   await baselineMigrations();
   baselined = true;
 }
diff --git a/packages/db/package.json b/packages/db/package.json
index 182dbe3..c8549de 100644
--- a/packages/db/package.json
+++ b/packages/db/package.json
@@ -4,14 +4,14 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "db:check": "dotenv -e ../../apps/web/.env.local drizzle-kit check",
-    "db:generate": "dotenv -e ../../apps/web/.env.local drizzle-kit generate",
-    "db:migrate": "dotenv -e ../../apps/web/.env.local pnpm tsx migrate.ts",
-    "db:migrate:drop": "dotenv -e ../../apps/web/.env.local drizzle-kit drop",
-    "db:pull": "dotenv -e ../../apps/web/.env.local drizzle-kit introspect",
-    "db:push": "dotenv -e ../../apps/web/.env.local drizzle-kit push",
-    "db:studio": "dotenv -e ../../apps/web/.env.local drizzle-kit studio",
-    "db:up": "dotenv -e ../../apps/web/.env.local drizzle-kit up",
+    "db:check": "dotenv -e ../../.env.local drizzle-kit check",
+    "db:generate": "dotenv -e ../../.env.local drizzle-kit generate",
+    "db:migrate": "dotenv -e ../../.env.local pnpm tsx migrate.ts",
+    "db:migrate:drop": "dotenv -e ../../.env.local drizzle-kit drop",
+    "db:pull": "dotenv -e ../../.env.local drizzle-kit introspect",
+    "db:push": "dotenv -e ../../.env.local drizzle-kit push",
+    "db:studio": "dotenv -e ../../.env.local drizzle-kit studio",
+    "db:up": "dotenv -e ../../.env.local drizzle-kit up",
     "lint": "eslint . --cache --max-warnings 0",
     "typecheck": "tsc --noEmit --tsBuildInfoFile .tsbuildinfo"
   },
diff --git a/packages/db/schema/api-audit-logs.ts b/packages/db/schema/api-audit-logs.ts
index 79d144c..1ae875e 100644
--- a/packages/db/schema/api-audit-logs.ts
+++ b/packages/db/schema/api-audit-logs.ts
@@ -1,6 +1,6 @@
 import { sql } from 'drizzle-orm';
-import { createInsertSchema, createSelectSchema } from 'drizzle-zod';
 import { index, integer, sqliteTable, text } from 'drizzle-orm/sqlite-core';
+import { createInsertSchema, createSelectSchema } from 'drizzle-zod';
 
 import { apiKeys } from './api-keys';
 
diff --git a/packages/db/schema/api-keys.ts b/packages/db/schema/api-keys.ts
index b84aff2..51916fa 100644
--- a/packages/db/schema/api-keys.ts
+++ b/packages/db/schema/api-keys.ts
@@ -1,6 +1,6 @@
 import { sql } from 'drizzle-orm';
-import { createInsertSchema, createSelectSchema } from 'drizzle-zod';
 import { index, integer, sqliteTable, text } from 'drizzle-orm/sqlite-core';
+import { createInsertSchema, createSelectSchema } from 'drizzle-zod';
 
 import { users } from './users';
 
diff --git a/packages/db/schema/form-data.ts b/packages/db/schema/form-data.ts
index 9bc21cc..25d15f3 100644
--- a/packages/db/schema/form-data.ts
+++ b/packages/db/schema/form-data.ts
@@ -1,6 +1,6 @@
 import { sql } from 'drizzle-orm';
-import { createInsertSchema, createSelectSchema } from 'drizzle-zod';
 import { index, integer, sqliteTable, text } from 'drizzle-orm/sqlite-core';
+import { createInsertSchema, createSelectSchema } from 'drizzle-zod';
 import { type z } from 'zod';
 
 import { forms } from './forms';
diff --git a/packages/db/schema/forms.ts b/packages/db/schema/forms.ts
index cd8edf3..cbda59d 100644
--- a/packages/db/schema/forms.ts
+++ b/packages/db/schema/forms.ts
@@ -1,8 +1,8 @@
 import type { InferSelectModel } from 'drizzle-orm';
 
 import { sql } from 'drizzle-orm';
-import { createInsertSchema, createSelectSchema } from 'drizzle-zod';
 import { index, integer, sqliteTable, text } from 'drizzle-orm/sqlite-core';
+import { createInsertSchema, createSelectSchema } from 'drizzle-zod';
 
 import { users } from './users';
 
@@ -38,6 +38,10 @@ export const forms = sqliteTable(
       .notNull(),
     defaultSubmissionEmail: text('default_submission_email'),
     honeypotField: text('honeypot_field').default('_gotcha').notNull(),
+    enableWebhook: integer('enable_webhook', { mode: 'boolean' })
+      .default(false)
+      .notNull(),
+    webhookUrl: text('webhook_url'),
   },
   (t) => ({
     userIdx: index('form_user_idx').on(t.userId),
@@ -56,6 +60,8 @@ export const ZUpdateFormSchema = createInsertSchema(forms).pick({
   enableEmailNotifications: true,
   enableRetention: true,
   honeypotField: true,
+  enableWebhook: true,
+  webhookUrl: true,
 });
 
 export type Form = InferSelectModel<typeof forms>;
diff --git a/packages/db/schema/index.ts b/packages/db/schema/index.ts
index 1cf5169..72b9fa1 100644
--- a/packages/db/schema/index.ts
+++ b/packages/db/schema/index.ts
@@ -8,3 +8,4 @@ export * from './relations';
 export * from './sessions';
 export * from './users';
 export * from './verification';
+export * from './webhook-delivery-logs';
diff --git a/packages/db/schema/relations.ts b/packages/db/schema/relations.ts
index afe81b6..70c2d9d 100644
--- a/packages/db/schema/relations.ts
+++ b/packages/db/schema/relations.ts
@@ -7,6 +7,7 @@ import { formDatas } from './form-data';
 import { forms } from './forms';
 import { sessions } from './sessions';
 import { users } from './users';
+import { webhookDeliveryLogs } from './webhook-delivery-logs';
 
 export const userRelations = relations(users, ({ many }) => ({
   forms: many(forms),
@@ -36,11 +37,27 @@ export const formRelations = relations(forms, ({ one, many }) => ({
     references: [users.id],
   }),
   formData: many(formDatas),
+  webhookDeliveryLogs: many(webhookDeliveryLogs),
 }));
 
-export const formDataRelations = relations(formDatas, ({ one }) => ({
+export const formDataRelations = relations(formDatas, ({ one, many }) => ({
   form: one(forms, {
     fields: [formDatas.formId],
     references: [forms.id],
   }),
+  webhookDeliveryLogs: many(webhookDeliveryLogs),
 }));
+
+export const webhookDeliveryLogRelations = relations(
+  webhookDeliveryLogs,
+  ({ one }) => ({
+    form: one(forms, {
+      fields: [webhookDeliveryLogs.formId],
+      references: [forms.id],
+    }),
+    formData: one(formDatas, {
+      fields: [webhookDeliveryLogs.formDataId],
+      references: [formDatas.id],
+    }),
+  }),
+);
diff --git a/packages/db/schema/users.ts b/packages/db/schema/users.ts
index a7796d0..3c0f43d 100644
--- a/packages/db/schema/users.ts
+++ b/packages/db/schema/users.ts
@@ -1,6 +1,6 @@
 import { sql } from 'drizzle-orm';
-import { createInsertSchema, createSelectSchema } from 'drizzle-zod';
 import { index, integer, sqliteTable, text } from 'drizzle-orm/sqlite-core';
+import { createInsertSchema, createSelectSchema } from 'drizzle-zod';
 
 export const users = sqliteTable(
   'user',
diff --git a/packages/db/schema/webhook-delivery-logs.ts b/packages/db/schema/webhook-delivery-logs.ts
new file mode 100644
index 0000000..077bc95
--- /dev/null
+++ b/packages/db/schema/webhook-delivery-logs.ts
@@ -0,0 +1,48 @@
+import { sql } from 'drizzle-orm';
+import { index, integer, sqliteTable, text } from 'drizzle-orm/sqlite-core';
+import { createInsertSchema, createSelectSchema } from 'drizzle-zod';
+import { type z } from 'zod';
+
+import { formDatas } from './form-data';
+import { forms } from './forms';
+
+export const webhookDeliveryLogs = sqliteTable(
+  'webhook_delivery_logs',
+  {
+    id: text('id').primaryKey(),
+    formId: text('form_id')
+      .references(() => forms.id, { onDelete: 'cascade' })
+      .notNull(),
+    formDataId: text('form_data_id').references(() => formDatas.id, {
+      onDelete: 'set null',
+    }),
+    webhookUrl: text('webhook_url').notNull(),
+    payload: text('payload').notNull(),
+    status: text('status', { enum: ['pending', 'success', 'failed'] })
+      .default('pending')
+      .notNull(),
+    statusCode: integer('status_code'),
+    responseBody: text('response_body'),
+    errorMessage: text('error_message'),
+    attempts: integer('attempts').default(0).notNull(),
+    nextRetryAt: integer('next_retry_at', { mode: 'timestamp_ms' }),
+    createdAt: integer('created_at', { mode: 'timestamp_ms' })
+      .default(sql`(cast(unixepoch('subsecond') * 1000 as integer))`)
+      .notNull(),
+    completedAt: integer('completed_at', { mode: 'timestamp_ms' }),
+  },
+  (t) => ({
+    formIdx: index('webhook_log_form_idx').on(t.formId),
+    statusIdx: index('webhook_log_status_idx').on(t.status),
+    nextRetryIdx: index('webhook_log_next_retry_idx').on(t.nextRetryAt),
+  }),
+);
+
+export const ZSelectWebhookDeliveryLogSchema =
+  createSelectSchema(webhookDeliveryLogs);
+export const ZInsertWebhookDeliveryLogSchema =
+  createInsertSchema(webhookDeliveryLogs);
+
+export type WebhookDeliveryLog = z.infer<
+  typeof ZSelectWebhookDeliveryLogSchema
+>;
diff --git a/packages/email/index.ts b/packages/email/index.ts
index 34d2f13..1df1279 100644
--- a/packages/email/index.ts
+++ b/packages/email/index.ts
@@ -74,7 +74,9 @@ const getTransporter = () => {
     !!env.SMTP_PASS;
 
   if (!hasSmtpConfig) {
-    throw new Error('Email transport not configured. Set SMTP_TRANSPORT to resend or smtp.');
+    throw new Error(
+      'Email transport not configured. Set SMTP_TRANSPORT to resend or smtp.',
+    );
   }
 
   cachedTransporter = createSmtpTransport();
@@ -91,4 +93,3 @@ export const sendMail = async ({ to, subject, body }: MessageInfo) => {
   };
   return transporter.sendMail(mailOptions);
 };
-
diff --git a/packages/email/package.json b/packages/email/package.json
index 42b7d63..518bc4a 100644
--- a/packages/email/package.json
+++ b/packages/email/package.json
@@ -22,4 +22,3 @@
     "eslint-config-formbase": "workspace:*"
   }
 }
-
diff --git a/packages/email/tsconfig.json b/packages/email/tsconfig.json
index a270307..fe061ba 100644
--- a/packages/email/tsconfig.json
+++ b/packages/email/tsconfig.json
@@ -5,4 +5,3 @@
   },
   "include": ["**/*.ts", "**/*.mjs", "**/*.js", "**/*.cjs", ".eslintrc.cjs"]
 }
-
diff --git a/packages/env/index.ts b/packages/env/index.ts
index eec0ce9..9211848 100644
--- a/packages/env/index.ts
+++ b/packages/env/index.ts
@@ -53,6 +53,8 @@ export const env = createEnv({
     SMTP_TRANSPORT: z.enum(['smtp', 'resend']).optional(),
 
     VERCEL_URL: z.string().optional(),
+
+    REDIS_URL: z.string().url().optional(),
   },
   clientPrefix: 'NEXT_PUBLIC_',
   client: {},
diff --git a/packages/queue/connection.ts b/packages/queue/connection.ts
new file mode 100644
index 0000000..18a84d0
--- /dev/null
+++ b/packages/queue/connection.ts
@@ -0,0 +1,23 @@
+import Redis from 'ioredis';
+
+let redisConnection: Redis | null = null;
+
+export function getRedisConnection(): Redis {
+  if (!redisConnection) {
+    const redisUrl = process.env['REDIS_URL'];
+    if (!redisUrl) {
+      throw new Error('REDIS_URL environment variable is not set');
+    }
+    redisConnection = new Redis(redisUrl, {
+      maxRetriesPerRequest: null,
+    });
+  }
+  return redisConnection;
+}
+
+export async function closeRedisConnection(): Promise<void> {
+  if (redisConnection) {
+    await redisConnection.quit();
+    redisConnection = null;
+  }
+}
diff --git a/packages/queue/index.ts b/packages/queue/index.ts
new file mode 100644
index 0000000..06fbbc7
--- /dev/null
+++ b/packages/queue/index.ts
@@ -0,0 +1,10 @@
+export { getRedisConnection, closeRedisConnection } from './connection';
+export { getWebhookQueue, type WebhookJobData } from './queues/webhook';
+export {
+  validateWebhookUrl,
+  buildWebhookPayload,
+  enqueueWebhook,
+  deliverWebhook,
+  createTestWebhookJob,
+} from './services/delivery';
+export { createWebhookWorker } from './workers/webhook';
diff --git a/packages/queue/package.json b/packages/queue/package.json
new file mode 100644
index 0000000..c0d659d
--- /dev/null
+++ b/packages/queue/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "@formbase/queue",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "exports": {
+    ".": "./index.ts",
+    "./connection": "./connection.ts",
+    "./workers/webhook": "./workers/webhook.ts"
+  },
+  "main": "./index.ts",
+  "types": "./index.ts",
+  "scripts": {
+    "lint": "eslint . --cache --max-warnings 0",
+    "typecheck": "tsc --noEmit --tsBuildInfoFile .tsbuildinfo"
+  },
+  "dependencies": {
+    "@formbase/db": "workspace:*",
+    "@formbase/env": "workspace:*",
+    "@formbase/utils": "workspace:*",
+    "bullmq": "^5.34.8",
+    "drizzle-orm": "^0.30.10",
+    "ioredis": "^5.4.1"
+  },
+  "devDependencies": {
+    "@formbase/tsconfig": "workspace:*",
+    "eslint-config-formbase": "workspace:*"
+  }
+}
diff --git a/packages/queue/queues/webhook.ts b/packages/queue/queues/webhook.ts
new file mode 100644
index 0000000..243901f
--- /dev/null
+++ b/packages/queue/queues/webhook.ts
@@ -0,0 +1,40 @@
+import { Queue } from 'bullmq';
+
+import { getRedisConnection } from '../connection';
+
+export interface WebhookJobData {
+  formId: string;
+  formDataId: string;
+  webhookUrl: string;
+  payload: {
+    event: 'submission.created';
+    payload: {
+      id: string;
+      formId: string;
+      formTitle: string;
+      data: Record<string, unknown>;
+      fileUrls: string[];
+      isSpam: boolean;
+      spamReason: string | null;
+      createdAt: string;
+    };
+  };
+  deliveryLogId: string;
+}
+
+let webhookQueue: Queue<WebhookJobData> | null = null;
+
+export function getWebhookQueue(): Queue<WebhookJobData> {
+  if (!webhookQueue) {
+    webhookQueue = new Queue<WebhookJobData>('webhook', {
+      connection: getRedisConnection(),
+      defaultJobOptions: {
+        attempts: 5,
+        backoff: { type: 'custom' },
+        removeOnComplete: true,
+        removeOnFail: false,
+      },
+    });
+  }
+  return webhookQueue;
+}
diff --git a/packages/queue/services/delivery.ts b/packages/queue/services/delivery.ts
new file mode 100644
index 0000000..4b5ea40
--- /dev/null
+++ b/packages/queue/services/delivery.ts
@@ -0,0 +1,237 @@
+import type { WebhookJobData } from '../queues/webhook';
+
+import { eq } from 'drizzle-orm';
+
+import { db } from '@formbase/db';
+import { formDatas, forms, webhookDeliveryLogs } from '@formbase/db/schema';
+import { generateId } from '@formbase/utils/generate-id';
+
+import { getWebhookQueue } from '../queues/webhook';
+
+const WEBHOOK_TIMEOUT_MS = 30_000;
+
+export function validateWebhookUrl(url: string): boolean {
+  try {
+    const parsed = new URL(url);
+    if (parsed.protocol === 'https:') return true;
+    if (
+      parsed.protocol === 'http:' &&
+      (parsed.hostname === 'localhost' || parsed.hostname === '127.0.0.1')
+    ) {
+      return true;
+    }
+    return false;
+  } catch {
+    return false;
+  }
+}
+
+function extractFileUrls(data: Record<string, unknown>): string[] {
+  const urls: string[] = [];
+  for (const value of Object.values(data)) {
+    if (typeof value === 'string' && value.startsWith('http')) {
+      urls.push(value);
+    }
+  }
+  return urls;
+}
+
+export async function buildWebhookPayload(
+  formId: string,
+  formDataId: string,
+): Promise<WebhookJobData['payload'] | null> {
+  const [form, formData] = await Promise.all([
+    db.query.forms.findFirst({
+      where: eq(forms.id, formId),
+      columns: { id: true, title: true },
+    }),
+    db.query.formDatas.findFirst({
+      where: eq(formDatas.id, formDataId),
+      columns: {
+        id: true,
+        data: true,
+        isSpam: true,
+        spamReason: true,
+        createdAt: true,
+      },
+    }),
+  ]);
+
+  if (!form || !formData) return null;
+
+  const parsedData = JSON.parse(formData.data) as Record<string, unknown>;
+  const fileUrls = extractFileUrls(parsedData);
+
+  return {
+    event: 'submission.created',
+    payload: {
+      id: formData.id,
+      formId: form.id,
+      formTitle: form.title,
+      data: parsedData,
+      fileUrls,
+      isSpam: formData.isSpam,
+      spamReason: formData.spamReason,
+      createdAt: formData.createdAt.toISOString(),
+    },
+  };
+}
+
+export async function enqueueWebhook(
+  formId: string,
+  formDataId: string,
+  webhookUrl: string,
+): Promise<string | null> {
+  const payload = await buildWebhookPayload(formId, formDataId);
+  if (!payload) return null;
+
+  const logId = generateId(15);
+
+  await db.insert(webhookDeliveryLogs).values({
+    id: logId,
+    formId,
+    formDataId,
+    webhookUrl,
+    payload: JSON.stringify(payload),
+    status: 'pending',
+    attempts: 0,
+  });
+
+  const queue = getWebhookQueue();
+  await queue.add(
+    'deliver',
+    {
+      formId,
+      formDataId,
+      webhookUrl,
+      payload,
+      deliveryLogId: logId,
+    },
+    { jobId: logId },
+  );
+
+  return logId;
+}
+
+export async function deliverWebhook(data: WebhookJobData): Promise<{
+  success: boolean;
+  statusCode?: number;
+  body?: string;
+  error?: string;
+}> {
+  const controller = new AbortController();
+  const timeout = setTimeout(() => controller.abort(), WEBHOOK_TIMEOUT_MS);
+
+  try {
+    const response = await fetch(data.webhookUrl, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(data.payload),
+      signal: controller.signal,
+    });
+
+    const body = await response.text();
+
+    if (response.ok) {
+      return { success: true, statusCode: response.status, body };
+    }
+
+    return { success: false, statusCode: response.status, body };
+  } catch (err) {
+    const message = err instanceof Error ? err.message : 'Unknown error';
+    return { success: false, error: message };
+  } finally {
+    clearTimeout(timeout);
+  }
+}
+
+export async function createTestWebhookJob(
+  formId: string,
+  webhookUrl: string,
+): Promise<string | null> {
+  const form = await db.query.forms.findFirst({
+    where: eq(forms.id, formId),
+    columns: { id: true, title: true },
+  });
+
+  if (!form) return null;
+
+  const lastSubmission = await db.query.formDatas.findFirst({
+    where: eq(formDatas.formId, formId),
+    orderBy: (table, { desc }) => desc(table.createdAt),
+    columns: {
+      id: true,
+      data: true,
+      isSpam: true,
+      spamReason: true,
+      createdAt: true,
+    },
+  });
+
+  let payload: WebhookJobData['payload'];
+
+  if (lastSubmission) {
+    const parsedData = JSON.parse(lastSubmission.data) as Record<
+      string,
+      unknown
+    >;
+    payload = {
+      event: 'submission.created',
+      payload: {
+        id: lastSubmission.id,
+        formId: form.id,
+        formTitle: form.title,
+        data: parsedData,
+        fileUrls: extractFileUrls(parsedData),
+        isSpam: lastSubmission.isSpam,
+        spamReason: lastSubmission.spamReason,
+        createdAt: lastSubmission.createdAt.toISOString(),
+      },
+    };
+  } else {
+    payload = {
+      event: 'submission.created',
+      payload: {
+        id: 'test-submission-id',
+        formId: form.id,
+        formTitle: form.title,
+        data: {
+          name: 'Test User',
+          email: 'test@example.com',
+          message: 'This is a test submission',
+        },
+        fileUrls: [],
+        isSpam: false,
+        spamReason: null,
+        createdAt: new Date().toISOString(),
+      },
+    };
+  }
+
+  const logId = generateId(15);
+
+  await db.insert(webhookDeliveryLogs).values({
+    id: logId,
+    formId,
+    formDataId: lastSubmission?.id ?? null,
+    webhookUrl,
+    payload: JSON.stringify(payload),
+    status: 'pending',
+    attempts: 0,
+  });
+
+  const queue = getWebhookQueue();
+  await queue.add(
+    'deliver',
+    {
+      formId,
+      formDataId: lastSubmission?.id ?? 'test',
+      webhookUrl,
+      payload,
+      deliveryLogId: logId,
+    },
+    { jobId: logId },
+  );
+
+  return logId;
+}
diff --git a/packages/queue/tsconfig.json b/packages/queue/tsconfig.json
new file mode 100644
index 0000000..fe061ba
--- /dev/null
+++ b/packages/queue/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "extends": ["@formbase/tsconfig/base.json"],
+  "compilerOptions": {
+    "tsBuildInfoFile": ".tsbuildinfo"
+  },
+  "include": ["**/*.ts", "**/*.mjs", "**/*.js", "**/*.cjs", ".eslintrc.cjs"]
+}
diff --git a/packages/queue/workers/webhook.ts b/packages/queue/workers/webhook.ts
new file mode 100644
index 0000000..c6e0a3f
--- /dev/null
+++ b/packages/queue/workers/webhook.ts
@@ -0,0 +1,75 @@
+import type { Job } from 'bullmq';
+import type { WebhookJobData } from '../queues/webhook';
+
+import { Worker } from 'bullmq';
+import { eq } from 'drizzle-orm';
+
+import { db } from '@formbase/db';
+import { webhookDeliveryLogs } from '@formbase/db/schema';
+
+import { getRedisConnection } from '../connection';
+import { deliverWebhook } from '../services/delivery';
+
+const RETRY_DELAYS_MS = [60_000, 600_000, 3_600_000, 21_600_000, 86_400_000];
+
+function getRetryDelay(attemptsMade: number): number {
+  const index = Math.min(attemptsMade - 1, RETRY_DELAYS_MS.length - 1);
+  return RETRY_DELAYS_MS[index] ?? RETRY_DELAYS_MS[RETRY_DELAYS_MS.length - 1]!;
+}
+
+async function processWebhook(job: Job<WebhookJobData>): Promise<void> {
+  const { deliveryLogId } = job.data;
+  const attemptNumber = job.attemptsMade + 1;
+
+  await db
+    .update(webhookDeliveryLogs)
+    .set({ attempts: attemptNumber })
+    .where(eq(webhookDeliveryLogs.id, deliveryLogId));
+
+  const result = await deliverWebhook(job.data);
+
+  if (result.success) {
+    await db
+      .update(webhookDeliveryLogs)
+      .set({
+        status: 'success',
+        statusCode: result.statusCode ?? null,
+        responseBody: result.body?.slice(0, 10_000) ?? null,
+        completedAt: new Date(),
+        nextRetryAt: null,
+      })
+      .where(eq(webhookDeliveryLogs.id, deliveryLogId));
+    return;
+  }
+
+  const isLastAttempt = attemptNumber >= 5;
+  const nextRetryAt = isLastAttempt
+    ? null
+    : new Date(Date.now() + getRetryDelay(attemptNumber));
+
+  await db
+    .update(webhookDeliveryLogs)
+    .set({
+      status: isLastAttempt ? 'failed' : 'pending',
+      statusCode: result.statusCode ?? null,
+      responseBody: result.body?.slice(0, 10_000) ?? null,
+      errorMessage: result.error ?? null,
+      completedAt: isLastAttempt ? new Date() : null,
+      nextRetryAt,
+    })
+    .where(eq(webhookDeliveryLogs.id, deliveryLogId));
+
+  if (!isLastAttempt) {
+    throw new Error(result.error ?? `HTTP ${result.statusCode}`);
+  }
+}
+
+export function createWebhookWorker(): Worker<WebhookJobData> {
+  return new Worker<WebhookJobData>('webhook', processWebhook, {
+    connection: getRedisConnection(),
+    concurrency: 10,
+    settings: {
+      backoffStrategy: (attemptsMade: number) => getRetryDelay(attemptsMade),
+    },
+  });
+}
diff --git a/packages/ui/primitives/accordion.tsx b/packages/ui/primitives/accordion.tsx
index 6adc6ce..8ca4bbb 100644
--- a/packages/ui/primitives/accordion.tsx
+++ b/packages/ui/primitives/accordion.tsx
@@ -1,28 +1,28 @@
-"use client"
+'use client';
 
-import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion"
+import { Accordion as AccordionPrimitive } from '@base-ui/react/accordion';
+import { IconChevronDown, IconChevronUp } from '@tabler/icons-react';
 
-import { cn } from "@formbase/ui/utils/cn"
-import { IconChevronDown, IconChevronUp } from "@tabler/icons-react"
+import { cn } from '@formbase/ui/utils/cn';
 
 function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {
   return (
     <AccordionPrimitive.Root
       data-slot="accordion"
-      className={cn("flex w-full flex-col", className)}
+      className={cn('flex w-full flex-col', className)}
       {...props}
     />
-  )
+  );
 }
 
 function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {
   return (
     <AccordionPrimitive.Item
       data-slot="accordion-item"
-      className={cn("not-last:border-b", className)}
+      className={cn('not-last:border-b', className)}
       {...props}
     />
-  )
+  );
 }
 
 function AccordionTrigger({
@@ -35,17 +35,23 @@ function AccordionTrigger({
       <AccordionPrimitive.Trigger
         data-slot="accordion-trigger"
         className={cn(
-          "focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring data-[slot=accordion-trigger-icon]:**:text-muted-foreground rounded-lg py-2.5 text-left text-sm font-medium hover:underline focus-visible:ring-[3px] data-[slot=accordion-trigger-icon]:**:ml-auto data-[slot=accordion-trigger-icon]:**:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-hidden disabled:pointer-events-none disabled:opacity-50",
-          className
+          'focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring data-[slot=accordion-trigger-icon]:**:text-muted-foreground rounded-lg py-2.5 text-left text-sm font-medium hover:underline focus-visible:ring-[3px] data-[slot=accordion-trigger-icon]:**:ml-auto data-[slot=accordion-trigger-icon]:**:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-hidden disabled:pointer-events-none disabled:opacity-50',
+          className,
         )}
         {...props}
       >
         {children}
-        <IconChevronDown data-slot="accordion-trigger-icon" className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden" />
-        <IconChevronUp data-slot="accordion-trigger-icon" className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline" />
+        <IconChevronDown
+          data-slot="accordion-trigger-icon"
+          className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
+        />
+        <IconChevronUp
+          data-slot="accordion-trigger-icon"
+          className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
+        />
       </AccordionPrimitive.Trigger>
     </AccordionPrimitive.Header>
-  )
+  );
 }
 
 function AccordionContent({
@@ -61,14 +67,14 @@ function AccordionContent({
     >
       <div
         className={cn(
-          "pt-0 pb-2.5 hover:[&_a]:text-foreground h-(--accordion-panel-height) data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4",
-          className
+          'pt-0 pb-2.5 hover:[&_a]:text-foreground h-(--accordion-panel-height) data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4',
+          className,
         )}
       >
         {children}
       </div>
     </AccordionPrimitive.Panel>
-  )
+  );
 }
 
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
diff --git a/packages/ui/primitives/alert.tsx b/packages/ui/primitives/alert.tsx
index e1a697a..8d92d0a 100644
--- a/packages/ui/primitives/alert.tsx
+++ b/packages/ui/primitives/alert.tsx
@@ -1,25 +1,32 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from 'react';
 
-import { cn } from "@formbase/ui/utils/cn"
+import type { VariantProps } from 'class-variance-authority';
 
-const alertVariants = cva("grid gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 [svg]:*:row-span-2 [svg]:*:translate-y-0.5 [svg]:*:text-current [svg:not([class*='size-'])]:*:size-4 w-full relative group/alert", {
-  variants: {
-    variant: {
-      default: "bg-card text-card-foreground",
-      destructive: "text-destructive bg-card data-[slot=alert-description]:*:text-destructive/90 [svg]:*:text-current",
+import { cva } from 'class-variance-authority';
+
+import { cn } from '@formbase/ui/utils/cn';
+
+const alertVariants = cva(
+  "grid gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 [svg]:*:row-span-2 [svg]:*:translate-y-0.5 [svg]:*:text-current [svg:not([class*='size-'])]:*:size-4 w-full relative group/alert",
+  {
+    variants: {
+      variant: {
+        default: 'bg-card text-card-foreground',
+        destructive:
+          'text-destructive bg-card data-[slot=alert-description]:*:text-destructive/90 [svg]:*:text-current',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
     },
   },
-  defaultVariants: {
-    variant: "default",
-  },
-})
+);
 
 function Alert({
   className,
   variant,
   ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+}: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>) {
   return (
     <div
       data-slot="alert"
@@ -27,46 +34,46 @@ function Alert({
       className={cn(alertVariants({ variant }), className)}
       {...props}
     />
-  )
+  );
 }
 
-function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="alert-title"
       className={cn(
-        "font-medium group-has-[>svg]/alert:col-start-2 hover:[&_a]:text-foreground [&_a]:underline [&_a]:underline-offset-3",
-        className
+        'font-medium group-has-[>svg]/alert:col-start-2 hover:[&_a]:text-foreground [&_a]:underline [&_a]:underline-offset-3',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function AlertDescription({
   className,
   ...props
-}: React.ComponentProps<"div">) {
+}: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="alert-description"
       className={cn(
-        "text-muted-foreground text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4 hover:[&_a]:text-foreground [&_a]:underline [&_a]:underline-offset-3",
-        className
+        'text-muted-foreground text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4 hover:[&_a]:text-foreground [&_a]:underline [&_a]:underline-offset-3',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
+function AlertAction({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="alert-action"
-      className={cn("absolute top-2 right-2", className)}
+      className={cn('absolute top-2 right-2', className)}
       {...props}
     />
-  )
+  );
 }
 
-export { Alert, AlertTitle, AlertDescription, AlertAction }
+export { Alert, AlertTitle, AlertDescription, AlertAction };
diff --git a/packages/ui/primitives/aspect-ratio.tsx b/packages/ui/primitives/aspect-ratio.tsx
index 0538993..6bc69c4 100644
--- a/packages/ui/primitives/aspect-ratio.tsx
+++ b/packages/ui/primitives/aspect-ratio.tsx
@@ -1,22 +1,22 @@
-import { cn } from "@formbase/ui/utils/cn"
+import { cn } from '@formbase/ui/utils/cn';
 
 function AspectRatio({
   ratio,
   className,
   ...props
-}: React.ComponentProps<"div"> & { ratio: number }) {
+}: React.ComponentProps<'div'> & { ratio: number }) {
   return (
     <div
       data-slot="aspect-ratio"
       style={
         {
-          "--ratio": ratio,
+          '--ratio': ratio,
         } as React.CSSProperties
       }
-      className={cn("relative aspect-(--ratio)", className)}
+      className={cn('relative aspect-(--ratio)', className)}
       {...props}
     />
-  )
+  );
 }
 
-export { AspectRatio }
+export { AspectRatio };
diff --git a/packages/ui/primitives/avatar.tsx b/packages/ui/primitives/avatar.tsx
index 33c1c97..3227052 100644
--- a/packages/ui/primitives/avatar.tsx
+++ b/packages/ui/primitives/avatar.tsx
@@ -1,28 +1,29 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar"
+import * as React from 'react';
 
-import { cn } from "@formbase/ui/utils/cn"
+import { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';
+
+import { cn } from '@formbase/ui/utils/cn';
 
 function Avatar({
   className,
-  size = "default",
+  size = 'default',
   ...props
 }: AvatarPrimitive.Root.Props & {
-  size?: "default" | "sm" | "lg"
+  size?: 'default' | 'sm' | 'lg';
 }) {
   return (
     <AvatarPrimitive.Root
       data-slot="avatar"
       data-size={size}
       className={cn(
-        "size-8 rounded-full after:rounded-full data-[size=lg]:size-10 data-[size=sm]:size-6 after:border-border group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:mix-blend-darken dark:after:mix-blend-lighten",
-        className
+        'size-8 rounded-full after:rounded-full data-[size=lg]:size-10 data-[size=sm]:size-6 after:border-border group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:mix-blend-darken dark:after:mix-blend-lighten',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {
@@ -30,12 +31,12 @@ function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {
     <AvatarPrimitive.Image
       data-slot="avatar-image"
       className={cn(
-        "rounded-full aspect-square size-full object-cover",
-        className
+        'rounded-full aspect-square size-full object-cover',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function AvatarFallback({
@@ -46,54 +47,57 @@ function AvatarFallback({
     <AvatarPrimitive.Fallback
       data-slot="avatar-fallback"
       className={cn(
-        "bg-muted text-muted-foreground rounded-full flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs",
-        className
+        'bg-muted text-muted-foreground rounded-full flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
+function AvatarBadge({ className, ...props }: React.ComponentProps<'span'>) {
   return (
     <span
       data-slot="avatar-badge"
       className={cn(
-        "bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none",
-        "group-data-[size=sm]/avatar:size-2 [&>svg]:group-data-[size=sm]/avatar:hidden",
-        "group-data-[size=default]/avatar:size-2.5 [&>svg]:group-data-[size=default]/avatar:size-2",
-        "group-data-[size=lg]/avatar:size-3 [&>svg]:group-data-[size=lg]/avatar:size-2",
-        className
+        'bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none',
+        'group-data-[size=sm]/avatar:size-2 [&>svg]:group-data-[size=sm]/avatar:hidden',
+        'group-data-[size=default]/avatar:size-2.5 [&>svg]:group-data-[size=default]/avatar:size-2',
+        'group-data-[size=lg]/avatar:size-3 [&>svg]:group-data-[size=lg]/avatar:size-2',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
+function AvatarGroup({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="avatar-group"
       className={cn(
-        "data-[slot=avatar]:*:ring-background group/avatar-group flex -space-x-2 data-[slot=avatar]:*:ring-2",
-        className
+        'data-[slot=avatar]:*:ring-background group/avatar-group flex -space-x-2 data-[slot=avatar]:*:ring-2',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function AvatarGroupCount({
   className,
   ...props
-}: React.ComponentProps<"div">) {
+}: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="avatar-group-count"
-      className={cn("bg-muted text-muted-foreground size-8 rounded-full text-sm group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 [&>svg]:group-has-data-[size=lg]/avatar-group:size-5 [&>svg]:group-has-data-[size=sm]/avatar-group:size-3 ring-background relative flex shrink-0 items-center justify-center ring-2", className)}
+      className={cn(
+        'bg-muted text-muted-foreground size-8 rounded-full text-sm group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 [&>svg]:group-has-data-[size=lg]/avatar-group:size-5 [&>svg]:group-has-data-[size=sm]/avatar-group:size-3 ring-background relative flex shrink-0 items-center justify-center ring-2',
+        className,
+      )}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -103,4 +107,4 @@ export {
   AvatarGroup,
   AvatarGroupCount,
   AvatarBadge,
-}
+};
diff --git a/packages/ui/primitives/badge.tsx b/packages/ui/primitives/badge.tsx
index 668ed94..456e4d1 100644
--- a/packages/ui/primitives/badge.tsx
+++ b/packages/ui/primitives/badge.tsx
@@ -1,48 +1,54 @@
-import { mergeProps } from "@base-ui/react/merge-props"
-import { useRender } from "@base-ui/react/use-render"
-import { cva, type VariantProps } from "class-variance-authority"
+import type { VariantProps } from 'class-variance-authority';
 
-import { cn } from "@formbase/ui/utils/cn"
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
+import { cva } from 'class-variance-authority';
+
+import { cn } from '@formbase/ui/utils/cn';
 
 const badgeVariants = cva(
-  "h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-colors overflow-hidden group/badge",
+  'h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-colors overflow-hidden group/badge',
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
-        secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
-        destructive: "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20",
-        outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
-        ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
-        link: "text-primary underline-offset-4 hover:underline",
+        default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
+        secondary:
+          'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',
+        destructive:
+          'bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20',
+        outline:
+          'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',
+        ghost:
+          'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',
+        link: 'text-primary underline-offset-4 hover:underline',
       },
     },
     defaultVariants: {
-      variant: "default",
+      variant: 'default',
     },
-  }
-)
+  },
+);
 
 function Badge({
   className,
-  variant = "default",
+  variant = 'default',
   render,
   ...props
-}: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
+}: useRender.ComponentProps<'span'> & VariantProps<typeof badgeVariants>) {
   return useRender({
-    defaultTagName: "span",
-    props: mergeProps<"span">(
+    defaultTagName: 'span',
+    props: mergeProps<'span'>(
       {
         className: cn(badgeVariants({ className, variant })),
       },
-      props
+      props,
     ),
     render,
     state: {
-      slot: "badge",
+      slot: 'badge',
       variant,
     },
-  })
+  });
 }
 
-export { Badge, badgeVariants }
+export { Badge, badgeVariants };
diff --git a/packages/ui/primitives/breadcrumb.tsx b/packages/ui/primitives/breadcrumb.tsx
index dabaf68..acbb6e7 100644
--- a/packages/ui/primitives/breadcrumb.tsx
+++ b/packages/ui/primitives/breadcrumb.tsx
@@ -1,11 +1,12 @@
-import * as React from "react"
-import { mergeProps } from "@base-ui/react/merge-props"
-import { useRender } from "@base-ui/react/use-render"
+import * as React from 'react';
 
-import { cn } from "@formbase/ui/utils/cn"
-import { IconChevronRight, IconDots } from "@tabler/icons-react"
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
+import { IconChevronRight, IconDots } from '@tabler/icons-react';
 
-function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
+import { cn } from '@formbase/ui/utils/cn';
+
+function Breadcrumb({ className, ...props }: React.ComponentProps<'nav'>) {
   return (
     <nav
       aria-label="breadcrumb"
@@ -13,106 +14,102 @@ function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
       className={cn(className)}
       {...props}
     />
-  )
+  );
 }
 
-function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) {
   return (
     <ol
       data-slot="breadcrumb-list"
       className={cn(
-        "text-muted-foreground gap-1.5 text-sm flex flex-wrap items-center wrap-break-word",
-        className
+        'text-muted-foreground gap-1.5 text-sm flex flex-wrap items-center wrap-break-word',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>) {
   return (
     <li
       data-slot="breadcrumb-item"
-      className={cn("gap-1 inline-flex items-center", className)}
+      className={cn('gap-1 inline-flex items-center', className)}
       {...props}
     />
-  )
+  );
 }
 
 function BreadcrumbLink({
   className,
   render,
   ...props
-}: useRender.ComponentProps<"a">) {
+}: useRender.ComponentProps<'a'>) {
   return useRender({
-    defaultTagName: "a",
-    props: mergeProps<"a">(
+    defaultTagName: 'a',
+    props: mergeProps<'a'>(
       {
-        className: cn("hover:text-foreground transition-colors", className),
+        className: cn('hover:text-foreground transition-colors', className),
       },
-      props
+      props,
     ),
     render,
     state: {
-      slot: "breadcrumb-link",
+      slot: 'breadcrumb-link',
     },
-  })
+  });
 }
 
-function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) {
   return (
     <span
       data-slot="breadcrumb-page"
       role="link"
       aria-disabled="true"
       aria-current="page"
-      className={cn("text-foreground font-normal", className)}
+      className={cn('text-foreground font-normal', className)}
       {...props}
     />
-  )
+  );
 }
 
 function BreadcrumbSeparator({
   children,
   className,
   ...props
-}: React.ComponentProps<"li">) {
+}: React.ComponentProps<'li'>) {
   return (
     <li
       data-slot="breadcrumb-separator"
       role="presentation"
       aria-hidden="true"
-      className={cn("[&>svg]:size-3.5", className)}
+      className={cn('[&>svg]:size-3.5', className)}
       {...props}
     >
-      {children ?? (
-        <IconChevronRight
-        />
-      )}
+      {children ?? <IconChevronRight />}
     </li>
-  )
+  );
 }
 
 function BreadcrumbEllipsis({
   className,
   ...props
-}: React.ComponentProps<"span">) {
+}: React.ComponentProps<'span'>) {
   return (
     <span
       data-slot="breadcrumb-ellipsis"
       role="presentation"
       aria-hidden="true"
       className={cn(
-        "size-5 [&>svg]:size-4 flex items-center justify-center",
-        className
+        'size-5 [&>svg]:size-4 flex items-center justify-center',
+        className,
       )}
       {...props}
     >
-      <IconDots
-      />
+      <IconDots />
       <span className="sr-only">More</span>
     </span>
-  )
+  );
 }
 
 export {
@@ -123,4 +120,4 @@ export {
   BreadcrumbPage,
   BreadcrumbSeparator,
   BreadcrumbEllipsis,
-}
+};
diff --git a/packages/ui/primitives/button-group.tsx b/packages/ui/primitives/button-group.tsx
index 07d8990..5a88b17 100644
--- a/packages/ui/primitives/button-group.tsx
+++ b/packages/ui/primitives/button-group.tsx
@@ -1,9 +1,11 @@
-import { mergeProps } from "@base-ui/react/merge-props"
-import { useRender } from "@base-ui/react/use-render"
-import { cva, type VariantProps } from "class-variance-authority"
+import type { VariantProps } from 'class-variance-authority';
 
-import { cn } from "@formbase/ui/utils/cn"
-import { Separator } from "@formbase/ui/primitives/separator"
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
+import { cva } from 'class-variance-authority';
+
+import { Separator } from '@formbase/ui/primitives/separator';
+import { cn } from '@formbase/ui/utils/cn';
 
 const buttonGroupVariants = cva(
   "has-[>[data-slot=button-group]]:gap-2 [&>[data-slot=select-trigger]:last-of-type]:has-[select[aria-hidden=true]:last-child]:rounded-r-lg flex w-fit items-stretch focus-visible:*:z-10 focus-visible:*:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
@@ -11,22 +13,22 @@ const buttonGroupVariants = cva(
     variants: {
       orientation: {
         horizontal:
-          "[&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0 *:data-slot:rounded-r-none",
+          '[&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0 *:data-slot:rounded-r-none',
         vertical:
-          "[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! flex-col [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0 *:data-slot:rounded-b-none",
+          '[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! flex-col [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0 *:data-slot:rounded-b-none',
       },
     },
     defaultVariants: {
-      orientation: "horizontal",
+      orientation: 'horizontal',
     },
-  }
-)
+  },
+);
 
 function ButtonGroup({
   className,
   orientation,
   ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
+}: React.ComponentProps<'div'> & VariantProps<typeof buttonGroupVariants>) {
   return (
     <div
       role="group"
@@ -35,35 +37,35 @@ function ButtonGroup({
       className={cn(buttonGroupVariants({ orientation }), className)}
       {...props}
     />
-  )
+  );
 }
 
 function ButtonGroupText({
   className,
   render,
   ...props
-}: useRender.ComponentProps<"div">) {
+}: useRender.ComponentProps<'div'>) {
   return useRender({
-    defaultTagName: "div",
-    props: mergeProps<"div">(
+    defaultTagName: 'div',
+    props: mergeProps<'div'>(
       {
         className: cn(
           "bg-muted gap-2 rounded-lg border px-2.5 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none",
-          className
+          className,
         ),
       },
-      props
+      props,
     ),
     render,
     state: {
-      slot: "button-group-text",
+      slot: 'button-group-text',
     },
-  })
+  });
 }
 
 function ButtonGroupSeparator({
   className,
-  orientation = "vertical",
+  orientation = 'vertical',
   ...props
 }: React.ComponentProps<typeof Separator>) {
   return (
@@ -71,12 +73,12 @@ function ButtonGroupSeparator({
       data-slot="button-group-separator"
       orientation={orientation}
       className={cn(
-        "bg-input relative self-stretch data-[orientation=horizontal]:mx-px data-[orientation=horizontal]:w-auto data-[orientation=vertical]:my-px data-[orientation=vertical]:h-auto",
-        className
+        'bg-input relative self-stretch data-[orientation=horizontal]:mx-px data-[orientation=horizontal]:w-auto data-[orientation=vertical]:my-px data-[orientation=vertical]:h-auto',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -84,4 +86,4 @@ export {
   ButtonGroupSeparator,
   ButtonGroupText,
   buttonGroupVariants,
-}
+};
diff --git a/packages/ui/primitives/calendar.tsx b/packages/ui/primitives/calendar.tsx
index f4f9e65..887fb26 100644
--- a/packages/ui/primitives/calendar.tsx
+++ b/packages/ui/primitives/calendar.tsx
@@ -1,133 +1,136 @@
-"use client"
+'use client';
+
+import * as React from 'react';
+
+import type { DayButton } from 'react-day-picker';
 
-import * as React from "react"
 import {
-  DayPicker,
-  getDefaultClassNames,
-  type DayButton,
-} from "react-day-picker"
+  IconChevronDown,
+  IconChevronLeft,
+  IconChevronRight,
+} from '@tabler/icons-react';
+import { DayPicker, getDefaultClassNames } from 'react-day-picker';
 
-import { cn } from "@formbase/ui/utils/cn"
-import { Button, buttonVariants } from "@formbase/ui/primitives/button"
-import { IconChevronLeft, IconChevronRight, IconChevronDown } from "@tabler/icons-react"
+import { Button, buttonVariants } from '@formbase/ui/primitives/button';
+import { cn } from '@formbase/ui/utils/cn';
 
 function Calendar({
   className,
   classNames,
   showOutsideDays = true,
-  captionLayout = "label",
-  buttonVariant = "ghost",
+  captionLayout = 'label',
+  buttonVariant = 'ghost',
   formatters,
   components,
   ...props
 }: React.ComponentProps<typeof DayPicker> & {
-  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
+  buttonVariant?: React.ComponentProps<typeof Button>['variant'];
 }) {
-  const defaultClassNames = getDefaultClassNames()
+  const defaultClassNames = getDefaultClassNames();
 
   return (
     <DayPicker
       showOutsideDays={showOutsideDays}
       className={cn(
-        "p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] bg-background group/calendar in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent",
+        'p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] bg-background group/calendar in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent',
         String.raw`[.rdp-button\_next>svg]:**:rtl:rotate-180`,
         String.raw`[.rdp-button\_previous>svg]:**:rtl:rotate-180`,
-        className
+        className,
       )}
       captionLayout={captionLayout}
       formatters={{
         formatMonthDropdown: (date) =>
-          date.toLocaleString("default", { month: "short" }),
+          date.toLocaleString('default', { month: 'short' }),
         ...formatters,
       }}
       classNames={{
-        root: cn("w-fit", defaultClassNames.root),
+        root: cn('w-fit', defaultClassNames.root),
         months: cn(
-          "flex gap-4 flex-col md:flex-row relative",
-          defaultClassNames.months
+          'flex gap-4 flex-col md:flex-row relative',
+          defaultClassNames.months,
         ),
-        month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
+        month: cn('flex flex-col w-full gap-4', defaultClassNames.month),
         nav: cn(
-          "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
-          defaultClassNames.nav
+          'flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between',
+          defaultClassNames.nav,
         ),
         button_previous: cn(
           buttonVariants({ variant: buttonVariant }),
-          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
-          defaultClassNames.button_previous
+          'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none',
+          defaultClassNames.button_previous,
         ),
         button_next: cn(
           buttonVariants({ variant: buttonVariant }),
-          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
-          defaultClassNames.button_next
+          'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none',
+          defaultClassNames.button_next,
         ),
         month_caption: cn(
-          "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
-          defaultClassNames.month_caption
+          'flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)',
+          defaultClassNames.month_caption,
         ),
         dropdowns: cn(
-          "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
-          defaultClassNames.dropdowns
+          'w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5',
+          defaultClassNames.dropdowns,
         ),
         dropdown_root: cn(
-          "relative cn-calendar-dropdown-root rounded-(--cell-radius)",
-          defaultClassNames.dropdown_root
+          'relative cn-calendar-dropdown-root rounded-(--cell-radius)',
+          defaultClassNames.dropdown_root,
         ),
         dropdown: cn(
-          "absolute bg-popover inset-0 opacity-0",
-          defaultClassNames.dropdown
+          'absolute bg-popover inset-0 opacity-0',
+          defaultClassNames.dropdown,
         ),
         caption_label: cn(
-          "select-none font-medium",
-          captionLayout === "label"
-            ? "text-sm"
-            : "cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5",
-          defaultClassNames.caption_label
-        ),
-        table: "w-full border-collapse",
-        weekdays: cn("flex", defaultClassNames.weekdays),
+          'select-none font-medium',
+          captionLayout === 'label'
+            ? 'text-sm'
+            : 'cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5',
+          defaultClassNames.caption_label,
+        ),
+        table: 'w-full border-collapse',
+        weekdays: cn('flex', defaultClassNames.weekdays),
         weekday: cn(
-          "text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none",
-          defaultClassNames.weekday
+          'text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none',
+          defaultClassNames.weekday,
         ),
-        week: cn("flex w-full mt-2", defaultClassNames.week),
+        week: cn('flex w-full mt-2', defaultClassNames.week),
         week_number_header: cn(
-          "select-none w-(--cell-size)",
-          defaultClassNames.week_number_header
+          'select-none w-(--cell-size)',
+          defaultClassNames.week_number_header,
         ),
         week_number: cn(
-          "text-[0.8rem] select-none text-muted-foreground",
-          defaultClassNames.week_number
+          'text-[0.8rem] select-none text-muted-foreground',
+          defaultClassNames.week_number,
         ),
         day: cn(
-          "relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none",
+          'relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none',
           props.showWeekNumber
-            ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)"
-            : "[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)",
-          defaultClassNames.day
+            ? '[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)'
+            : '[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)',
+          defaultClassNames.day,
         ),
         range_start: cn(
-          "rounded-l-(--cell-radius) bg-muted elative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 z-0 isolate",
-          defaultClassNames.range_start
+          'rounded-l-(--cell-radius) bg-muted elative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 z-0 isolate',
+          defaultClassNames.range_start,
         ),
-        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_middle: cn('rounded-none', defaultClassNames.range_middle),
         range_end: cn(
-          "rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 z-0 isolate",
-          defaultClassNames.range_end
+          'rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 z-0 isolate',
+          defaultClassNames.range_end,
         ),
         today: cn(
-          "bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none",
-          defaultClassNames.today
+          'bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none',
+          defaultClassNames.today,
         ),
         outside: cn(
-          "text-muted-foreground aria-selected:text-muted-foreground",
-          defaultClassNames.outside
+          'text-muted-foreground aria-selected:text-muted-foreground',
+          defaultClassNames.outside,
         ),
         disabled: cn(
-          "text-muted-foreground opacity-50",
-          defaultClassNames.disabled
+          'text-muted-foreground opacity-50',
+          defaultClassNames.disabled,
         ),
-        hidden: cn("invisible", defaultClassNames.hidden),
+        hidden: cn('invisible', defaultClassNames.hidden),
         ...classNames,
       }}
       components={{
@@ -139,24 +142,27 @@ function Calendar({
               className={cn(className)}
               {...props}
             />
-          )
+          );
         },
         Chevron: ({ className, orientation, ...props }) => {
-          if (orientation === "left") {
+          if (orientation === 'left') {
             return (
-              <IconChevronLeft className={cn("size-4", className)} {...props} />
-            )
+              <IconChevronLeft className={cn('size-4', className)} {...props} />
+            );
           }
 
-          if (orientation === "right") {
+          if (orientation === 'right') {
             return (
-              <IconChevronRight className={cn("size-4", className)} {...props} />
-            )
+              <IconChevronRight
+                className={cn('size-4', className)}
+                {...props}
+              />
+            );
           }
 
           return (
-            <IconChevronDown className={cn("size-4", className)} {...props} />
-          )
+            <IconChevronDown className={cn('size-4', className)} {...props} />
+          );
         },
         DayButton: CalendarDayButton,
         WeekNumber: ({ children, ...props }) => {
@@ -166,13 +172,13 @@ function Calendar({
                 {children}
               </div>
             </td>
-          )
+          );
         },
         ...components,
       }}
       {...props}
     />
-  )
+  );
 }
 
 function CalendarDayButton({
@@ -181,12 +187,12 @@ function CalendarDayButton({
   modifiers,
   ...props
 }: React.ComponentProps<typeof DayButton>) {
-  const defaultClassNames = getDefaultClassNames()
+  const defaultClassNames = getDefaultClassNames();
 
-  const ref = React.useRef<HTMLButtonElement>(null)
+  const ref = React.useRef<HTMLButtonElement>(null);
   React.useEffect(() => {
-    if (modifiers.focused) ref.current?.focus()
-  }, [modifiers.focused])
+    if (modifiers.focused) ref.current?.focus();
+  }, [modifiers.focused]);
 
   return (
     <Button
@@ -203,13 +209,13 @@ function CalendarDayButton({
       data-range-end={modifiers.range_end}
       data-range-middle={modifiers.range_middle}
       className={cn(
-        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70",
+        'data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70',
         defaultClassNames.day,
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-export { Calendar, CalendarDayButton }
+export { Calendar, CalendarDayButton };
diff --git a/packages/ui/primitives/card.tsx b/packages/ui/primitives/card.tsx
index 38956d2..30341b8 100644
--- a/packages/ui/primitives/card.tsx
+++ b/packages/ui/primitives/card.tsx
@@ -1,86 +1,95 @@
-import * as React from "react"
+import * as React from 'react';
 
-import { cn } from "@formbase/ui/utils/cn"
+import { cn } from '@formbase/ui/utils/cn';
 
 function Card({
   className,
-  size = "default",
+  size = 'default',
   ...props
-}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
+}: React.ComponentProps<'div'> & { size?: 'default' | 'sm' }) {
   return (
     <div
       data-slot="card"
       data-size={size}
-      className={cn("ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 [img:first-child]:*:rounded-t-xl [img:last-child]:*:rounded-b-xl group/card flex flex-col", className)}
+      className={cn(
+        'ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 [img:first-child]:*:rounded-t-xl [img:last-child]:*:rounded-b-xl group/card flex flex-col',
+        className,
+      )}
       {...props}
     />
-  )
+  );
 }
 
-function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="card-header"
       className={cn(
-        "gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 [.border-b]:pb-4 [.border-b]:group-data-[size=sm]/card:pb-3 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]",
-        className
+        'gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 [.border-b]:pb-4 [.border-b]:group-data-[size=sm]/card:pb-3 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="card-title"
-      className={cn("text-base leading-snug font-medium group-data-[size=sm]/card:text-sm", className)}
+      className={cn(
+        'text-base leading-snug font-medium group-data-[size=sm]/card:text-sm',
+        className,
+      )}
       {...props}
     />
-  )
+  );
 }
 
-function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="card-description"
-      className={cn("text-muted-foreground text-sm", className)}
+      className={cn('text-muted-foreground text-sm', className)}
       {...props}
     />
-  )
+  );
 }
 
-function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="card-action"
       className={cn(
-        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
-        className
+        'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="card-content"
-      className={cn("px-4 group-data-[size=sm]/card:px-3", className)}
+      className={cn('px-4 group-data-[size=sm]/card:px-3', className)}
       {...props}
     />
-  )
+  );
 }
 
-function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="card-footer"
-      className={cn("bg-muted/50 rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3 flex items-center", className)}
+      className={cn(
+        'bg-muted/50 rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3 flex items-center',
+        className,
+      )}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -91,4 +100,4 @@ export {
   CardAction,
   CardDescription,
   CardContent,
-}
+};
diff --git a/packages/ui/primitives/carousel.tsx b/packages/ui/primitives/carousel.tsx
index 8dd8a8a..efc2d4d 100644
--- a/packages/ui/primitives/carousel.tsx
+++ b/packages/ui/primitives/carousel.tsx
@@ -1,108 +1,109 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import useEmblaCarousel, {
-  type UseEmblaCarouselType,
-} from "embla-carousel-react"
+import * as React from 'react';
 
-import { cn } from "@formbase/ui/utils/cn"
-import { Button } from "@formbase/ui/primitives/button"
-import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react"
+import type { UseEmblaCarouselType } from 'embla-carousel-react';
 
-type CarouselApi = UseEmblaCarouselType[1]
-type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
-type CarouselOptions = UseCarouselParameters[0]
-type CarouselPlugin = UseCarouselParameters[1]
+import { IconChevronLeft, IconChevronRight } from '@tabler/icons-react';
+import useEmblaCarousel from 'embla-carousel-react';
+
+import { Button } from '@formbase/ui/primitives/button';
+import { cn } from '@formbase/ui/utils/cn';
+
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
 
 type CarouselProps = {
-  opts?: CarouselOptions
-  plugins?: CarouselPlugin
-  orientation?: "horizontal" | "vertical"
-  setApi?: (api: CarouselApi) => void
-}
+  opts?: CarouselOptions;
+  plugins?: CarouselPlugin;
+  orientation?: 'horizontal' | 'vertical';
+  setApi?: (api: CarouselApi) => void;
+};
 
 type CarouselContextProps = {
-  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
-  api: ReturnType<typeof useEmblaCarousel>[1]
-  scrollPrev: () => void
-  scrollNext: () => void
-  canScrollPrev: boolean
-  canScrollNext: boolean
-} & CarouselProps
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+  api: ReturnType<typeof useEmblaCarousel>[1];
+  scrollPrev: () => void;
+  scrollNext: () => void;
+  canScrollPrev: boolean;
+  canScrollNext: boolean;
+} & CarouselProps;
 
-const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+const CarouselContext = React.createContext<CarouselContextProps | null>(null);
 
 function useCarousel() {
-  const context = React.useContext(CarouselContext)
+  const context = React.useContext(CarouselContext);
 
   if (!context) {
-    throw new Error("useCarousel must be used within a <Carousel />")
+    throw new Error('useCarousel must be used within a <Carousel />');
   }
 
-  return context
+  return context;
 }
 
 function Carousel({
-  orientation = "horizontal",
+  orientation = 'horizontal',
   opts,
   setApi,
   plugins,
   className,
   children,
   ...props
-}: React.ComponentProps<"div"> & CarouselProps) {
+}: React.ComponentProps<'div'> & CarouselProps) {
   const [carouselRef, api] = useEmblaCarousel(
     {
       ...opts,
-      axis: orientation === "horizontal" ? "x" : "y",
+      axis: orientation === 'horizontal' ? 'x' : 'y',
     },
-    plugins
-  )
-  const [canScrollPrev, setCanScrollPrev] = React.useState(false)
-  const [canScrollNext, setCanScrollNext] = React.useState(false)
+    plugins,
+  );
+  const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+  const [canScrollNext, setCanScrollNext] = React.useState(false);
 
   const onSelect = React.useCallback((api: CarouselApi) => {
-    if (!api) return
-    setCanScrollPrev(api.canScrollPrev())
-    setCanScrollNext(api.canScrollNext())
-  }, [])
+    if (!api) return;
+    setCanScrollPrev(api.canScrollPrev());
+    setCanScrollNext(api.canScrollNext());
+  }, []);
 
   const scrollPrev = React.useCallback(() => {
-    api?.scrollPrev()
-  }, [api])
+    api?.scrollPrev();
+  }, [api]);
 
   const scrollNext = React.useCallback(() => {
-    api?.scrollNext()
-  }, [api])
+    api?.scrollNext();
+  }, [api]);
 
   const handleKeyDown = React.useCallback(
     (event: React.KeyboardEvent<HTMLDivElement>) => {
-      if (event.key === "ArrowLeft") {
-        event.preventDefault()
-        scrollPrev()
-      } else if (event.key === "ArrowRight") {
-        event.preventDefault()
-        scrollNext()
+      if (event.key === 'ArrowLeft') {
+        event.preventDefault();
+        scrollPrev();
+      } else if (event.key === 'ArrowRight') {
+        event.preventDefault();
+        scrollNext();
       }
     },
-    [scrollPrev, scrollNext]
-  )
+    [scrollPrev, scrollNext],
+  );
 
   React.useEffect(() => {
-    if (!api || !setApi) return
-    setApi(api)
-  }, [api, setApi])
+    if (!api || !setApi) return;
+    setApi(api);
+  }, [api, setApi]);
 
   React.useEffect(() => {
-    if (!api) return
-    onSelect(api)
-    api.on("reInit", onSelect)
-    api.on("select", onSelect)
+    if (!api) return;
+    onSelect(api);
+    api.on('reInit', onSelect);
+    api.on('select', onSelect);
 
     return () => {
-      api?.off("select", onSelect)
-    }
-  }, [api, onSelect])
+      api?.off('select', onSelect);
+    };
+  }, [api, onSelect]);
 
   return (
     <CarouselContext.Provider
@@ -111,7 +112,7 @@ function Carousel({
         api: api,
         opts,
         orientation:
-          orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+          orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),
         scrollPrev,
         scrollNext,
         canScrollPrev,
@@ -120,7 +121,7 @@ function Carousel({
     >
       <div
         onKeyDownCapture={handleKeyDown}
-        className={cn("relative", className)}
+        className={cn('relative', className)}
         role="region"
         aria-roledescription="carousel"
         data-slot="carousel"
@@ -129,11 +130,11 @@ function Carousel({
         {children}
       </div>
     </CarouselContext.Provider>
-  )
+  );
 }
 
-function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
-  const { carouselRef, orientation } = useCarousel()
+function CarouselContent({ className, ...props }: React.ComponentProps<'div'>) {
+  const { carouselRef, orientation } = useCarousel();
 
   return (
     <div
@@ -143,18 +144,18 @@ function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
     >
       <div
         className={cn(
-          "flex",
-          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
-          className
+          'flex',
+          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
+          className,
         )}
         {...props}
       />
     </div>
-  )
+  );
 }
 
-function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
-  const { orientation } = useCarousel()
+function CarouselItem({ className, ...props }: React.ComponentProps<'div'>) {
+  const { orientation } = useCarousel();
 
   return (
     <div
@@ -162,22 +163,22 @@ function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
       aria-roledescription="slide"
       data-slot="carousel-item"
       className={cn(
-        "min-w-0 shrink-0 grow-0 basis-full",
-        orientation === "horizontal" ? "pl-4" : "pt-4",
-        className
+        'min-w-0 shrink-0 grow-0 basis-full',
+        orientation === 'horizontal' ? 'pl-4' : 'pt-4',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function CarouselPrevious({
   className,
-  variant = "outline",
-  size = "icon-sm",
+  variant = 'outline',
+  size = 'icon-sm',
   ...props
 }: React.ComponentProps<typeof Button>) {
-  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
 
   return (
     <Button
@@ -185,30 +186,29 @@ function CarouselPrevious({
       variant={variant}
       size={size}
       className={cn(
-        "rounded-full absolute touch-manipulation",
-        orientation === "horizontal"
-          ? "top-1/2 -left-12 -translate-y-1/2"
-          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
+        'rounded-full absolute touch-manipulation',
+        orientation === 'horizontal'
+          ? 'top-1/2 -left-12 -translate-y-1/2'
+          : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
+        className,
       )}
       disabled={!canScrollPrev}
       onClick={scrollPrev}
       {...props}
     >
-      <IconChevronLeft
-      />
+      <IconChevronLeft />
       <span className="sr-only">Previous slide</span>
     </Button>
-  )
+  );
 }
 
 function CarouselNext({
   className,
-  variant = "outline",
-  size = "icon-sm",
+  variant = 'outline',
+  size = 'icon-sm',
   ...props
 }: React.ComponentProps<typeof Button>) {
-  const { orientation, scrollNext, canScrollNext } = useCarousel()
+  const { orientation, scrollNext, canScrollNext } = useCarousel();
 
   return (
     <Button
@@ -216,21 +216,20 @@ function CarouselNext({
       variant={variant}
       size={size}
       className={cn(
-        "rounded-full absolute touch-manipulation",
-        orientation === "horizontal"
-          ? "top-1/2 -right-12 -translate-y-1/2"
-          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
+        'rounded-full absolute touch-manipulation',
+        orientation === 'horizontal'
+          ? 'top-1/2 -right-12 -translate-y-1/2'
+          : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
+        className,
       )}
       disabled={!canScrollNext}
       onClick={scrollNext}
       {...props}
     >
-      <IconChevronRight
-      />
+      <IconChevronRight />
       <span className="sr-only">Next slide</span>
     </Button>
-  )
+  );
 }
 
 export {
@@ -241,4 +240,4 @@ export {
   CarouselPrevious,
   CarouselNext,
   useCarousel,
-}
+};
diff --git a/packages/ui/primitives/chart.tsx b/packages/ui/primitives/chart.tsx
index 52fc345..79938a1 100644
--- a/packages/ui/primitives/chart.tsx
+++ b/packages/ui/primitives/chart.tsx
@@ -1,37 +1,38 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import * as RechartsPrimitive from "recharts"
+import * as React from 'react';
 
-import { cn } from "@formbase/ui/utils/cn"
+import * as RechartsPrimitive from 'recharts';
+
+import { cn } from '@formbase/ui/utils/cn';
 
 // Format: { THEME_NAME: CSS_SELECTOR }
-const THEMES = { light: "", dark: ".dark" } as const
+const THEMES = { light: '', dark: '.dark' } as const;
 
 export type ChartConfig = {
   [k in string]: {
-    label?: React.ReactNode
-    icon?: React.ComponentType
+    label?: React.ReactNode;
+    icon?: React.ComponentType;
   } & (
     | { color?: string; theme?: never }
     | { color?: never; theme: Record<keyof typeof THEMES, string> }
-  )
-}
+  );
+};
 
 type ChartContextProps = {
-  config: ChartConfig
-}
+  config: ChartConfig;
+};
 
-const ChartContext = React.createContext<ChartContextProps | null>(null)
+const ChartContext = React.createContext<ChartContextProps | null>(null);
 
 function useChart() {
-  const context = React.useContext(ChartContext)
+  const context = React.useContext(ChartContext);
 
   if (!context) {
-    throw new Error("useChart must be used within a <ChartContainer />")
+    throw new Error('useChart must be used within a <ChartContainer />');
   }
 
-  return context
+  return context;
 }
 
 function ChartContainer({
@@ -40,14 +41,14 @@ function ChartContainer({
   children,
   config,
   ...props
-}: React.ComponentProps<"div"> & {
-  config: ChartConfig
+}: React.ComponentProps<'div'> & {
+  config: ChartConfig;
   children: React.ComponentProps<
     typeof RechartsPrimitive.ResponsiveContainer
-  >["children"]
+  >['children'];
 }) {
-  const uniqueId = React.useId()
-  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
+  const uniqueId = React.useId();
+  const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`;
 
   return (
     <ChartContext.Provider value={{ config }}>
@@ -56,7 +57,7 @@ function ChartContainer({
         data-chart={chartId}
         className={cn(
           "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
-          className
+          className,
         )}
         {...props}
       >
@@ -66,16 +67,16 @@ function ChartContainer({
         </RechartsPrimitive.ResponsiveContainer>
       </div>
     </ChartContext.Provider>
-  )
+  );
 }
 
 const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
   const colorConfig = Object.entries(config).filter(
-    ([, config]) => config.theme || config.color
-  )
+    ([, config]) => config.theme || config.color,
+  );
 
   if (!colorConfig.length) {
-    return null
+    return null;
   }
 
   return (
@@ -89,26 +90,26 @@ ${colorConfig
   .map(([key, itemConfig]) => {
     const color =
       itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
-      itemConfig.color
-    return color ? `  --color-${key}: ${color};` : null
+      itemConfig.color;
+    return color ? `  --color-${key}: ${color};` : null;
   })
-  .join("\n")}
+  .join('\n')}
 }
-`
+`,
           )
-          .join("\n"),
+          .join('\n'),
       }}
     />
-  )
-}
+  );
+};
 
-const ChartTooltip = RechartsPrimitive.Tooltip
+const ChartTooltip = RechartsPrimitive.Tooltip;
 
 function ChartTooltipContent({
   active,
   payload,
   className,
-  indicator = "dot",
+  indicator = 'dot',
   hideLabel = false,
   hideIndicator = false,
   label,
@@ -119,41 +120,41 @@ function ChartTooltipContent({
   nameKey,
   labelKey,
 }: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
-  React.ComponentProps<"div"> & {
-    hideLabel?: boolean
-    hideIndicator?: boolean
-    indicator?: "line" | "dot" | "dashed"
-    nameKey?: string
-    labelKey?: string
+  React.ComponentProps<'div'> & {
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    indicator?: 'line' | 'dot' | 'dashed';
+    nameKey?: string;
+    labelKey?: string;
   }) {
-  const { config } = useChart()
+  const { config } = useChart();
 
   const tooltipLabel = React.useMemo(() => {
     if (hideLabel || !payload?.length) {
-      return null
+      return null;
     }
 
-    const [item] = payload
-    const key = `${labelKey || item?.dataKey || item?.name || "value"}`
-    const itemConfig = getPayloadConfigFromPayload(config, item, key)
+    const [item] = payload;
+    const key = `${labelKey || item?.dataKey || item?.name || 'value'}`;
+    const itemConfig = getPayloadConfigFromPayload(config, item, key);
     const value =
-      !labelKey && typeof label === "string"
+      !labelKey && typeof label === 'string'
         ? config[label as keyof typeof config]?.label || label
-        : itemConfig?.label
+        : itemConfig?.label;
 
     if (labelFormatter) {
       return (
-        <div className={cn("font-medium", labelClassName)}>
+        <div className={cn('font-medium', labelClassName)}>
           {labelFormatter(value, payload)}
         </div>
-      )
+      );
     }
 
     if (!value) {
-      return null
+      return null;
     }
 
-    return <div className={cn("font-medium", labelClassName)}>{value}</div>
+    return <div className={cn('font-medium', labelClassName)}>{value}</div>;
   }, [
     label,
     labelFormatter,
@@ -162,36 +163,36 @@ function ChartTooltipContent({
     labelClassName,
     config,
     labelKey,
-  ])
+  ]);
 
   if (!active || !payload?.length) {
-    return null
+    return null;
   }
 
-  const nestLabel = payload.length === 1 && indicator !== "dot"
+  const nestLabel = payload.length === 1 && indicator !== 'dot';
 
   return (
     <div
       className={cn(
-        "border-border/50 bg-background gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl grid min-w-32 items-start",
-        className
+        'border-border/50 bg-background gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl grid min-w-32 items-start',
+        className,
       )}
     >
       {!nestLabel ? tooltipLabel : null}
       <div className="grid gap-1.5">
         {payload
-          .filter((item) => item.type !== "none")
+          .filter((item) => item.type !== 'none')
           .map((item, index) => {
-            const key = `${nameKey || item.name || item.dataKey || "value"}`
-            const itemConfig = getPayloadConfigFromPayload(config, item, key)
-            const indicatorColor = color || item.payload.fill || item.color
+            const key = `${nameKey || item.name || item.dataKey || 'value'}`;
+            const itemConfig = getPayloadConfigFromPayload(config, item, key);
+            const indicatorColor = color || item.payload.fill || item.color;
 
             return (
               <div
                 key={item.dataKey}
                 className={cn(
-                  "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
-                  indicator === "dot" && "items-center"
+                  '[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5',
+                  indicator === 'dot' && 'items-center',
                 )}
               >
                 {formatter && item?.value !== undefined && item.name ? (
@@ -204,19 +205,19 @@ function ChartTooltipContent({
                       !hideIndicator && (
                         <div
                           className={cn(
-                            "shrink-0 rounded-[2px] border-border bg-(--color-bg)",
+                            'shrink-0 rounded-[2px] border-border bg-(--color-bg)',
                             {
-                              "h-2.5 w-2.5": indicator === "dot",
-                              "w-1": indicator === "line",
-                              "w-0 border-[1.5px] border-dashed bg-transparent":
-                                indicator === "dashed",
-                              "my-0.5": nestLabel && indicator === "dashed",
-                            }
+                              'h-2.5 w-2.5': indicator === 'dot',
+                              'w-1': indicator === 'line',
+                              'w-0 border-[1.5px] border-dashed bg-transparent':
+                                indicator === 'dashed',
+                              'my-0.5': nestLabel && indicator === 'dashed',
+                            },
                           )}
                           style={
                             {
-                              "--color-bg": indicatorColor,
-                              "--color-border": indicatorColor,
+                              '--color-bg': indicatorColor,
+                              '--color-border': indicatorColor,
                             } as React.CSSProperties
                           }
                         />
@@ -224,8 +225,8 @@ function ChartTooltipContent({
                     )}
                     <div
                       className={cn(
-                        "flex flex-1 justify-between leading-none",
-                        nestLabel ? "items-end" : "items-center"
+                        'flex flex-1 justify-between leading-none',
+                        nestLabel ? 'items-end' : 'items-center',
                       )}
                     >
                       <div className="grid gap-1.5">
@@ -243,51 +244,51 @@ function ChartTooltipContent({
                   </>
                 )}
               </div>
-            )
+            );
           })}
       </div>
     </div>
-  )
+  );
 }
 
-const ChartLegend = RechartsPrimitive.Legend
+const ChartLegend = RechartsPrimitive.Legend;
 
 function ChartLegendContent({
   className,
   hideIcon = false,
   payload,
-  verticalAlign = "bottom",
+  verticalAlign = 'bottom',
   nameKey,
-}: React.ComponentProps<"div"> &
-  Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
-    hideIcon?: boolean
-    nameKey?: string
+}: React.ComponentProps<'div'> &
+  Pick<RechartsPrimitive.LegendProps, 'payload' | 'verticalAlign'> & {
+    hideIcon?: boolean;
+    nameKey?: string;
   }) {
-  const { config } = useChart()
+  const { config } = useChart();
 
   if (!payload?.length) {
-    return null
+    return null;
   }
 
   return (
     <div
       className={cn(
-        "flex items-center justify-center gap-4",
-        verticalAlign === "top" ? "pb-3" : "pt-3",
-        className
+        'flex items-center justify-center gap-4',
+        verticalAlign === 'top' ? 'pb-3' : 'pt-3',
+        className,
       )}
     >
       {payload
-        .filter((item) => item.type !== "none")
+        .filter((item) => item.type !== 'none')
         .map((item) => {
-          const key = `${nameKey || item.dataKey || "value"}`
-          const itemConfig = getPayloadConfigFromPayload(config, item, key)
+          const key = `${nameKey || item.dataKey || 'value'}`;
+          const itemConfig = getPayloadConfigFromPayload(config, item, key);
 
           return (
             <div
               key={item.value}
               className={cn(
-                "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
+                '[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3',
               )}
             >
               {itemConfig?.icon && !hideIcon ? (
@@ -302,48 +303,48 @@ function ChartLegendContent({
               )}
               {itemConfig?.label}
             </div>
-          )
+          );
         })}
     </div>
-  )
+  );
 }
 
 function getPayloadConfigFromPayload(
   config: ChartConfig,
   payload: unknown,
-  key: string
+  key: string,
 ) {
-  if (typeof payload !== "object" || payload === null) {
-    return undefined
+  if (typeof payload !== 'object' || payload === null) {
+    return undefined;
   }
 
   const payloadPayload =
-    "payload" in payload &&
-    typeof payload.payload === "object" &&
+    'payload' in payload &&
+    typeof payload.payload === 'object' &&
     payload.payload !== null
       ? payload.payload
-      : undefined
+      : undefined;
 
-  let configLabelKey: string = key
+  let configLabelKey: string = key;
 
   if (
     key in payload &&
-    typeof payload[key as keyof typeof payload] === "string"
+    typeof payload[key as keyof typeof payload] === 'string'
   ) {
-    configLabelKey = payload[key as keyof typeof payload] as string
+    configLabelKey = payload[key as keyof typeof payload] as string;
   } else if (
     payloadPayload &&
     key in payloadPayload &&
-    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+    typeof payloadPayload[key as keyof typeof payloadPayload] === 'string'
   ) {
     configLabelKey = payloadPayload[
       key as keyof typeof payloadPayload
-    ] as string
+    ] as string;
   }
 
   return configLabelKey in config
     ? config[configLabelKey]
-    : config[key as keyof typeof config]
+    : config[key as keyof typeof config];
 }
 
 export {
@@ -353,4 +354,4 @@ export {
   ChartLegend,
   ChartLegendContent,
   ChartStyle,
-}
+};
diff --git a/packages/ui/primitives/checkbox.tsx b/packages/ui/primitives/checkbox.tsx
index 5eb7820..73b8b47 100644
--- a/packages/ui/primitives/checkbox.tsx
+++ b/packages/ui/primitives/checkbox.tsx
@@ -1,17 +1,17 @@
-"use client"
+'use client';
 
-import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox"
+import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';
+import { IconCheck } from '@tabler/icons-react';
 
-import { cn } from "@formbase/ui/utils/cn"
-import { IconCheck } from "@tabler/icons-react"
+import { cn } from '@formbase/ui/utils/cn';
 
 function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
   return (
     <CheckboxPrimitive.Root
       data-slot="checkbox"
       className={cn(
-        "border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-[3px] aria-invalid:ring-[3px] peer relative shrink-0 outline-hidden after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50",
-        className
+        'border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-[3px] aria-invalid:ring-[3px] peer relative shrink-0 outline-hidden after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50',
+        className,
       )}
       {...props}
     >
@@ -19,11 +19,10 @@ function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
         data-slot="checkbox-indicator"
         className="[&>svg]:size-3.5 grid place-content-center text-current transition-none"
       >
-        <IconCheck
-        />
+        <IconCheck />
       </CheckboxPrimitive.Indicator>
     </CheckboxPrimitive.Root>
-  )
+  );
 }
 
-export { Checkbox }
+export { Checkbox };
diff --git a/packages/ui/primitives/collapsible.tsx b/packages/ui/primitives/collapsible.tsx
index 488fb33..93a3851 100644
--- a/packages/ui/primitives/collapsible.tsx
+++ b/packages/ui/primitives/collapsible.tsx
@@ -1,21 +1,21 @@
-"use client"
+'use client';
 
-import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible"
+import { Collapsible as CollapsiblePrimitive } from '@base-ui/react/collapsible';
 
 function Collapsible({ ...props }: CollapsiblePrimitive.Root.Props) {
-  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
 }
 
 function CollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.Props) {
   return (
     <CollapsiblePrimitive.Trigger data-slot="collapsible-trigger" {...props} />
-  )
+  );
 }
 
 function CollapsibleContent({ ...props }: CollapsiblePrimitive.Panel.Props) {
   return (
     <CollapsiblePrimitive.Panel data-slot="collapsible-content" {...props} />
-  )
+  );
 }
 
-export { Collapsible, CollapsibleTrigger, CollapsibleContent }
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };
diff --git a/packages/ui/primitives/combobox.tsx b/packages/ui/primitives/combobox.tsx
index d28fab5..ca66a45 100644
--- a/packages/ui/primitives/combobox.tsx
+++ b/packages/ui/primitives/combobox.tsx
@@ -1,22 +1,23 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import { Combobox as ComboboxPrimitive } from "@base-ui/react"
+import * as React from 'react';
 
-import { cn } from "@formbase/ui/utils/cn"
-import { Button } from "@formbase/ui/primitives/button"
+import { Combobox as ComboboxPrimitive } from '@base-ui/react';
+import { IconCheck, IconChevronDown, IconX } from '@tabler/icons-react';
+
+import { Button } from '@formbase/ui/primitives/button';
 import {
   InputGroup,
   InputGroupAddon,
   InputGroupButton,
   InputGroupInput,
-} from "@formbase/ui/primitives/input-group"
-import { IconChevronDown, IconX, IconCheck } from "@tabler/icons-react"
+} from '@formbase/ui/primitives/input-group';
+import { cn } from '@formbase/ui/utils/cn';
 
-const Combobox = ComboboxPrimitive.Root
+const Combobox = ComboboxPrimitive.Root;
 
 function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {
-  return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />
+  return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />;
 }
 
 function ComboboxTrigger({
@@ -33,7 +34,7 @@ function ComboboxTrigger({
       {children}
       <IconChevronDown className="text-muted-foreground size-4 pointer-events-none" />
     </ComboboxPrimitive.Trigger>
-  )
+  );
 }
 
 function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {
@@ -46,7 +47,7 @@ function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {
     >
       <IconX className="pointer-events-none" />
     </ComboboxPrimitive.Clear>
-  )
+  );
 }
 
 function ComboboxInput({
@@ -57,11 +58,11 @@ function ComboboxInput({
   showClear = false,
   ...props
 }: ComboboxPrimitive.Input.Props & {
-  showTrigger?: boolean
-  showClear?: boolean
+  showTrigger?: boolean;
+  showClear?: boolean;
 }) {
   return (
-    <InputGroup className={cn("w-auto", className)}>
+    <InputGroup className={cn('w-auto', className)}>
       <ComboboxPrimitive.Input
         render={<InputGroupInput disabled={disabled} />}
         {...props}
@@ -81,21 +82,21 @@ function ComboboxInput({
       </InputGroupAddon>
       {children}
     </InputGroup>
-  )
+  );
 }
 
 function ComboboxContent({
   className,
-  side = "bottom",
+  side = 'bottom',
   sideOffset = 6,
-  align = "start",
+  align = 'start',
   alignOffset = 0,
   anchor,
   ...props
 }: ComboboxPrimitive.Popup.Props &
   Pick<
     ComboboxPrimitive.Positioner.Props,
-    "side" | "align" | "sideOffset" | "alignOffset" | "anchor"
+    'side' | 'align' | 'sideOffset' | 'alignOffset' | 'anchor'
   >) {
   return (
     <ComboboxPrimitive.Portal>
@@ -110,12 +111,15 @@ function ComboboxContent({
         <ComboboxPrimitive.Popup
           data-slot="combobox-content"
           data-chips={!!anchor}
-          className={cn("bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 data-[slot=input-group]:*:bg-input/30 data-[slot=input-group]:*:border-input/30 max-h-72 min-w-36 overflow-hidden rounded-lg shadow-md ring-1 duration-100 data-[slot=input-group]:*:m-1 data-[slot=input-group]:*:mb-0 data-[slot=input-group]:*:h-8 data-[slot=input-group]:*:shadow-none group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) data-[chips=true]:min-w-(--anchor-width)", className )}
+          className={cn(
+            'bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 data-[slot=input-group]:*:bg-input/30 data-[slot=input-group]:*:border-input/30 max-h-72 min-w-36 overflow-hidden rounded-lg shadow-md ring-1 duration-100 data-[slot=input-group]:*:m-1 data-[slot=input-group]:*:mb-0 data-[slot=input-group]:*:h-8 data-[slot=input-group]:*:shadow-none group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) data-[chips=true]:min-w-(--anchor-width)',
+            className,
+          )}
           {...props}
         />
       </ComboboxPrimitive.Positioner>
     </ComboboxPrimitive.Portal>
-  )
+  );
 }
 
 function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {
@@ -123,12 +127,12 @@ function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {
     <ComboboxPrimitive.List
       data-slot="combobox-list"
       className={cn(
-        "no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto p-1 data-empty:p-0 overflow-y-auto overscroll-contain",
-        className
+        'no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto p-1 data-empty:p-0 overflow-y-auto overscroll-contain',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function ComboboxItem({
@@ -141,18 +145,20 @@ function ComboboxItem({
       data-slot="combobox-item"
       className={cn(
         "data-highlighted:bg-accent data-highlighted:text-accent-foreground **:data-highlighted:not-data-[variant=destructive]:text-accent-foreground gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        className
+        className,
       )}
       {...props}
     >
       {children}
       <ComboboxPrimitive.ItemIndicator
-        render={<span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />}
+        render={
+          <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
+        }
       >
         <IconCheck className="pointer-events-none" />
       </ComboboxPrimitive.ItemIndicator>
     </ComboboxPrimitive.Item>
-  )
+  );
 }
 
 function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {
@@ -162,7 +168,7 @@ function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {
       className={cn(className)}
       {...props}
     />
-  )
+  );
 }
 
 function ComboboxLabel({
@@ -172,26 +178,29 @@ function ComboboxLabel({
   return (
     <ComboboxPrimitive.GroupLabel
       data-slot="combobox-label"
-      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+      className={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
       {...props}
     />
-  )
+  );
 }
 
 function ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {
   return (
     <ComboboxPrimitive.Collection data-slot="combobox-collection" {...props} />
-  )
+  );
 }
 
 function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {
   return (
     <ComboboxPrimitive.Empty
       data-slot="combobox-empty"
-      className={cn("text-muted-foreground hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex", className)}
+      className={cn(
+        'text-muted-foreground hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex',
+        className,
+      )}
       {...props}
     />
-  )
+  );
 }
 
 function ComboboxSeparator({
@@ -201,10 +210,10 @@ function ComboboxSeparator({
   return (
     <ComboboxPrimitive.Separator
       data-slot="combobox-separator"
-      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      className={cn('bg-border -mx-1 my-1 h-px', className)}
       {...props}
     />
-  )
+  );
 }
 
 function ComboboxChips({
@@ -215,10 +224,13 @@ function ComboboxChips({
   return (
     <ComboboxPrimitive.Chips
       data-slot="combobox-chips"
-      className={cn("dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-8 flex-wrap items-center gap-1 rounded-lg border bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:ring-[3px] has-aria-invalid:ring-[3px] has-data-[slot=combobox-chip]:px-1", className)}
+      className={cn(
+        'dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-8 flex-wrap items-center gap-1 rounded-lg border bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:ring-[3px] has-aria-invalid:ring-[3px] has-data-[slot=combobox-chip]:px-1',
+        className,
+      )}
       {...props}
     />
-  )
+  );
 }
 
 function ComboboxChip({
@@ -227,14 +239,14 @@ function ComboboxChip({
   showRemove = true,
   ...props
 }: ComboboxPrimitive.Chip.Props & {
-  showRemove?: boolean
+  showRemove?: boolean;
 }) {
   return (
     <ComboboxPrimitive.Chip
       data-slot="combobox-chip"
       className={cn(
-        "bg-muted text-foreground flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm px-1.5 text-xs font-medium whitespace-nowrap has-data-[slot=combobox-chip-remove]:pr-0 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50",
-        className
+        'bg-muted text-foreground flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm px-1.5 text-xs font-medium whitespace-nowrap has-data-[slot=combobox-chip-remove]:pr-0 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50',
+        className,
       )}
       {...props}
     >
@@ -249,7 +261,7 @@ function ComboboxChip({
         </ComboboxPrimitive.ChipRemove>
       )}
     </ComboboxPrimitive.Chip>
-  )
+  );
 }
 
 function ComboboxChipsInput({
@@ -259,17 +271,14 @@ function ComboboxChipsInput({
   return (
     <ComboboxPrimitive.Input
       data-slot="combobox-chip-input"
-      className={cn(
-        "min-w-16 flex-1 outline-hidden",
-        className
-      )}
+      className={cn('min-w-16 flex-1 outline-hidden', className)}
       {...props}
     />
-  )
+  );
 }
 
 function useComboboxAnchor() {
-  return React.useRef<HTMLDivElement | null>(null)
+  return React.useRef<HTMLDivElement | null>(null);
 }
 
 export {
@@ -289,4 +298,4 @@ export {
   ComboboxTrigger,
   ComboboxValue,
   useComboboxAnchor,
-}
+};
diff --git a/packages/ui/primitives/command.tsx b/packages/ui/primitives/command.tsx
index ac9f4b1..db3da43 100644
--- a/packages/ui/primitives/command.tsx
+++ b/packages/ui/primitives/command.tsx
@@ -1,21 +1,22 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import { Command as CommandPrimitive } from "cmdk"
+import * as React from 'react';
+
+import { IconCheck, IconSearch } from '@tabler/icons-react';
+import { Command as CommandPrimitive } from 'cmdk';
 
-import { cn } from "@formbase/ui/utils/cn"
 import {
   Dialog,
   DialogContent,
   DialogDescription,
   DialogHeader,
   DialogTitle,
-} from "@formbase/ui/primitives/dialog"
+} from '@formbase/ui/primitives/dialog';
 import {
   InputGroup,
   InputGroupAddon,
-} from "@formbase/ui/primitives/input-group"
-import { IconSearch, IconCheck } from "@tabler/icons-react"
+} from '@formbase/ui/primitives/input-group';
+import { cn } from '@formbase/ui/utils/cn';
 
 function Command({
   className,
@@ -25,27 +26,27 @@ function Command({
     <CommandPrimitive
       data-slot="command"
       className={cn(
-        "bg-popover text-popover-foreground rounded-xl! p-1 flex size-full flex-col overflow-hidden",
-        className
+        'bg-popover text-popover-foreground rounded-xl! p-1 flex size-full flex-col overflow-hidden',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function CommandDialog({
-  title = "Command Palette",
-  description = "Search for a command to run...",
+  title = 'Command Palette',
+  description = 'Search for a command to run...',
   children,
   className,
   showCloseButton = false,
   ...props
-}: Omit<React.ComponentProps<typeof Dialog>, "children"> & {
-  title?: string
-  description?: string
-  className?: string
-  showCloseButton?: boolean
-  children: React.ReactNode
+}: Omit<React.ComponentProps<typeof Dialog>, 'children'> & {
+  title?: string;
+  description?: string;
+  className?: string;
+  showCloseButton?: boolean;
+  children: React.ReactNode;
 }) {
   return (
     <Dialog {...props}>
@@ -54,13 +55,13 @@ function CommandDialog({
         <DialogDescription>{description}</DialogDescription>
       </DialogHeader>
       <DialogContent
-        className={cn("rounded-xl! overflow-hidden p-0", className)}
+        className={cn('rounded-xl! overflow-hidden p-0', className)}
         showCloseButton={showCloseButton}
       >
         {children}
       </DialogContent>
     </Dialog>
-  )
+  );
 }
 
 function CommandInput({
@@ -73,8 +74,8 @@ function CommandInput({
         <CommandPrimitive.Input
           data-slot="command-input"
           className={cn(
-            "w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
-            className
+            'w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
+            className,
           )}
           {...props}
         />
@@ -83,7 +84,7 @@ function CommandInput({
         </InputGroupAddon>
       </InputGroup>
     </div>
-  )
+  );
 }
 
 function CommandList({
@@ -94,12 +95,12 @@ function CommandList({
     <CommandPrimitive.List
       data-slot="command-list"
       className={cn(
-        "no-scrollbar max-h-72 scroll-py-1 outline-hidden overflow-x-hidden overflow-y-auto",
-        className
+        'no-scrollbar max-h-72 scroll-py-1 outline-hidden overflow-x-hidden overflow-y-auto',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function CommandEmpty({
@@ -109,10 +110,10 @@ function CommandEmpty({
   return (
     <CommandPrimitive.Empty
       data-slot="command-empty"
-      className={cn("py-6 text-center text-sm", className)}
+      className={cn('py-6 text-center text-sm', className)}
       {...props}
     />
-  )
+  );
 }
 
 function CommandGroup({
@@ -122,10 +123,13 @@ function CommandGroup({
   return (
     <CommandPrimitive.Group
       data-slot="command-group"
-      className={cn("text-foreground **:[[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium", className)}
+      className={cn(
+        'text-foreground **:[[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium',
+        className,
+      )}
       {...props}
     />
-  )
+  );
 }
 
 function CommandSeparator({
@@ -135,10 +139,10 @@ function CommandSeparator({
   return (
     <CommandPrimitive.Separator
       data-slot="command-separator"
-      className={cn("bg-border -mx-1 h-px", className)}
+      className={cn('bg-border -mx-1 h-px', className)}
       {...props}
     />
-  )
+  );
 }
 
 function CommandItem({
@@ -151,27 +155,30 @@ function CommandItem({
       data-slot="command-item"
       className={cn(
         "data-selected:bg-muted data-selected:text-foreground [svg]:*:data-selected:text-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none [&_svg:not([class*='size-'])]:size-4 in-data-[slot=dialog-content]:rounded-lg! group/command-item data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        className
+        className,
       )}
       {...props}
     >
       {children}
       <IconCheck className="ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" />
     </CommandPrimitive.Item>
-  )
+  );
 }
 
 function CommandShortcut({
   className,
   ...props
-}: React.ComponentProps<"span">) {
+}: React.ComponentProps<'span'>) {
   return (
     <span
       data-slot="command-shortcut"
-      className={cn("text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest", className)}
+      className={cn(
+        'text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest',
+        className,
+      )}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -184,4 +191,4 @@ export {
   CommandItem,
   CommandShortcut,
   CommandSeparator,
-}
+};
diff --git a/packages/ui/primitives/context-menu.tsx b/packages/ui/primitives/context-menu.tsx
index 30399ba..f459bfc 100644
--- a/packages/ui/primitives/context-menu.tsx
+++ b/packages/ui/primitives/context-menu.tsx
@@ -1,19 +1,20 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import { ContextMenu as ContextMenuPrimitive } from "@base-ui/react/context-menu"
+import * as React from 'react';
 
-import { cn } from "@formbase/ui/utils/cn"
-import { IconChevronRight, IconCheck } from "@tabler/icons-react"
+import { ContextMenu as ContextMenuPrimitive } from '@base-ui/react/context-menu';
+import { IconCheck, IconChevronRight } from '@tabler/icons-react';
+
+import { cn } from '@formbase/ui/utils/cn';
 
 function ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {
-  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
+  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;
 }
 
 function ContextMenuPortal({ ...props }: ContextMenuPrimitive.Portal.Props) {
   return (
     <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
-  )
+  );
 }
 
 function ContextMenuTrigger({
@@ -23,23 +24,23 @@ function ContextMenuTrigger({
   return (
     <ContextMenuPrimitive.Trigger
       data-slot="context-menu-trigger"
-      className={cn("select-none", className)}
+      className={cn('select-none', className)}
       {...props}
     />
-  )
+  );
 }
 
 function ContextMenuContent({
   className,
-  align = "start",
+  align = 'start',
   alignOffset = 4,
-  side = "right",
+  side = 'right',
   sideOffset = 0,
   ...props
 }: ContextMenuPrimitive.Popup.Props &
   Pick<
     ContextMenuPrimitive.Positioner.Props,
-    "align" | "alignOffset" | "side" | "sideOffset"
+    'align' | 'alignOffset' | 'side' | 'sideOffset'
   >) {
   return (
     <ContextMenuPrimitive.Portal>
@@ -52,18 +53,21 @@ function ContextMenuContent({
       >
         <ContextMenuPrimitive.Popup
           data-slot="context-menu-content"
-          className={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-36 rounded-lg p-1 shadow-md ring-1 duration-100 z-50 max-h-(--available-height) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-hidden", className )}
+          className={cn(
+            'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-36 rounded-lg p-1 shadow-md ring-1 duration-100 z-50 max-h-(--available-height) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-hidden',
+            className,
+          )}
           {...props}
         />
       </ContextMenuPrimitive.Positioner>
     </ContextMenuPrimitive.Portal>
-  )
+  );
 }
 
 function ContextMenuGroup({ ...props }: ContextMenuPrimitive.Group.Props) {
   return (
     <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
-  )
+  );
 }
 
 function ContextMenuLabel({
@@ -71,26 +75,29 @@ function ContextMenuLabel({
   inset,
   ...props
 }: ContextMenuPrimitive.GroupLabel.Props & {
-  inset?: boolean
+  inset?: boolean;
 }) {
   return (
     <ContextMenuPrimitive.GroupLabel
       data-slot="context-menu-label"
       data-inset={inset}
-      className={cn("text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-8", className)}
+      className={cn(
+        'text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-8',
+        className,
+      )}
       {...props}
     />
-  )
+  );
 }
 
 function ContextMenuItem({
   className,
   inset,
-  variant = "default",
+  variant = 'default',
   ...props
 }: ContextMenuPrimitive.Item.Props & {
-  inset?: boolean
-  variant?: "default" | "destructive"
+  inset?: boolean;
+  variant?: 'default' | 'destructive';
 }) {
   return (
     <ContextMenuPrimitive.Item
@@ -99,17 +106,17 @@ function ContextMenuItem({
       data-variant={variant}
       className={cn(
         "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive [svg]:*:data-[variant=destructive]:text-destructive [svg]:*:focus:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm [&_svg:not([class*='size-'])]:size-4 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function ContextMenuSub({ ...props }: ContextMenuPrimitive.SubmenuRoot.Props) {
   return (
     <ContextMenuPrimitive.SubmenuRoot data-slot="context-menu-sub" {...props} />
-  )
+  );
 }
 
 function ContextMenuSubTrigger({
@@ -118,7 +125,7 @@ function ContextMenuSubTrigger({
   children,
   ...props
 }: ContextMenuPrimitive.SubmenuTrigger.Props & {
-  inset?: boolean
+  inset?: boolean;
 }) {
   return (
     <ContextMenuPrimitive.SubmenuTrigger
@@ -126,14 +133,14 @@ function ContextMenuSubTrigger({
       data-inset={inset}
       className={cn(
         "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        className
+        className,
       )}
       {...props}
     >
       {children}
       <IconChevronRight className="ml-auto" />
     </ContextMenuPrimitive.SubmenuTrigger>
-  )
+  );
 }
 
 function ContextMenuSubContent({
@@ -146,7 +153,7 @@ function ContextMenuSubContent({
       side="right"
       {...props}
     />
-  )
+  );
 }
 
 function ContextMenuCheckboxItem({
@@ -160,20 +167,19 @@ function ContextMenuCheckboxItem({
       data-slot="context-menu-checkbox-item"
       className={cn(
         "focus:bg-accent focus:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        className
+        className,
       )}
       checked={checked}
       {...props}
     >
       <span className="absolute right-2 pointer-events-none">
         <ContextMenuPrimitive.CheckboxItemIndicator>
-          <IconCheck
-          />
+          <IconCheck />
         </ContextMenuPrimitive.CheckboxItemIndicator>
       </span>
       {children}
     </ContextMenuPrimitive.CheckboxItem>
-  )
+  );
 }
 
 function ContextMenuRadioGroup({
@@ -184,7 +190,7 @@ function ContextMenuRadioGroup({
       data-slot="context-menu-radio-group"
       {...props}
     />
-  )
+  );
 }
 
 function ContextMenuRadioItem({
@@ -197,19 +203,18 @@ function ContextMenuRadioItem({
       data-slot="context-menu-radio-item"
       className={cn(
         "focus:bg-accent focus:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        className
+        className,
       )}
       {...props}
     >
       <span className="absolute right-2 pointer-events-none">
         <ContextMenuPrimitive.RadioItemIndicator>
-          <IconCheck
-          />
+          <IconCheck />
         </ContextMenuPrimitive.RadioItemIndicator>
       </span>
       {children}
     </ContextMenuPrimitive.RadioItem>
-  )
+  );
 }
 
 function ContextMenuSeparator({
@@ -219,23 +224,26 @@ function ContextMenuSeparator({
   return (
     <ContextMenuPrimitive.Separator
       data-slot="context-menu-separator"
-      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      className={cn('bg-border -mx-1 my-1 h-px', className)}
       {...props}
     />
-  )
+  );
 }
 
 function ContextMenuShortcut({
   className,
   ...props
-}: React.ComponentProps<"span">) {
+}: React.ComponentProps<'span'>) {
   return (
     <span
       data-slot="context-menu-shortcut"
-      className={cn("text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest", className)}
+      className={cn(
+        'text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest',
+        className,
+      )}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -254,4 +262,4 @@ export {
   ContextMenuSubContent,
   ContextMenuSubTrigger,
   ContextMenuRadioGroup,
-}
+};
diff --git a/packages/ui/primitives/dialog.tsx b/packages/ui/primitives/dialog.tsx
index 0a3893e..831835e 100644
--- a/packages/ui/primitives/dialog.tsx
+++ b/packages/ui/primitives/dialog.tsx
@@ -1,19 +1,20 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
+import * as React from 'react';
 
-import { cn } from "@formbase/ui/utils/cn"
-import { Button } from "@formbase/ui/primitives/button"
-import { IconX } from "@tabler/icons-react"
+import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
+import { IconX } from '@tabler/icons-react';
+
+import { Button } from '@formbase/ui/primitives/button';
+import { cn } from '@formbase/ui/utils/cn';
 
 function Dialog({ ...props }: DialogPrimitive.Root.Props) {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
 }
 
 type DialogTriggerProps = DialogPrimitive.Trigger.Props & {
-  asChild?: boolean
-}
+  asChild?: boolean;
+};
 
 function DialogTrigger({
   asChild = false,
@@ -21,7 +22,7 @@ function DialogTrigger({
   ...props
 }: DialogTriggerProps) {
   const renderProp =
-    asChild && React.isValidElement(children) ? children : undefined
+    asChild && React.isValidElement(children) ? children : undefined;
 
   return (
     <DialogPrimitive.Trigger
@@ -31,15 +32,15 @@ function DialogTrigger({
     >
       {asChild ? undefined : children}
     </DialogPrimitive.Trigger>
-  )
+  );
 }
 
 function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
 }
 
 function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
 }
 
 function DialogOverlay({
@@ -49,10 +50,13 @@ function DialogOverlay({
   return (
     <DialogPrimitive.Backdrop
       data-slot="dialog-overlay"
-      className={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50", className)}
+      className={cn(
+        'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50',
+        className,
+      )}
       {...props}
     />
-  )
+  );
 }
 
 function DialogContent({
@@ -61,7 +65,7 @@ function DialogContent({
   showCloseButton = true,
   ...props
 }: DialogPrimitive.Popup.Props & {
-  showCloseButton?: boolean
+  showCloseButton?: boolean;
 }) {
   return (
     <DialogPortal>
@@ -69,8 +73,8 @@ function DialogContent({
       <DialogPrimitive.Popup
         data-slot="dialog-content"
         className={cn(
-          "bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-sm ring-1 duration-100 sm:max-w-sm fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-hidden",
-          className
+          'bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-sm ring-1 duration-100 sm:max-w-sm fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-hidden',
+          className,
         )}
         {...props}
       >
@@ -86,24 +90,23 @@ function DialogContent({
               />
             }
           >
-            <IconX
-            />
+            <IconX />
             <span className="sr-only">Close</span>
           </DialogPrimitive.Close>
         )}
       </DialogPrimitive.Popup>
     </DialogPortal>
-  )
+  );
 }
 
-function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="dialog-header"
-      className={cn("gap-2 flex flex-col", className)}
+      className={cn('gap-2 flex flex-col', className)}
       {...props}
     />
-  )
+  );
 }
 
 function DialogFooter({
@@ -111,15 +114,15 @@ function DialogFooter({
   showCloseButton = false,
   children,
   ...props
-}: React.ComponentProps<"div"> & {
-  showCloseButton?: boolean
+}: React.ComponentProps<'div'> & {
+  showCloseButton?: boolean;
 }) {
   return (
     <div
       data-slot="dialog-footer"
       className={cn(
-        "bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className
+        'bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+        className,
       )}
       {...props}
     >
@@ -130,17 +133,17 @@ function DialogFooter({
         </DialogPrimitive.Close>
       )}
     </div>
-  )
+  );
 }
 
 function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
   return (
     <DialogPrimitive.Title
       data-slot="dialog-title"
-      className={cn("text-lg leading-none font-medium", className)}
+      className={cn('text-lg leading-none font-medium', className)}
       {...props}
     />
-  )
+  );
 }
 
 function DialogDescription({
@@ -150,10 +153,13 @@ function DialogDescription({
   return (
     <DialogPrimitive.Description
       data-slot="dialog-description"
-      className={cn("text-muted-foreground hover:[a]:*:text-foreground text-sm [a]:*:underline [a]:*:underline-offset-3", className)}
+      className={cn(
+        'text-muted-foreground hover:[a]:*:text-foreground text-sm [a]:*:underline [a]:*:underline-offset-3',
+        className,
+      )}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -167,4 +173,4 @@ export {
   DialogPortal,
   DialogTitle,
   DialogTrigger,
-}
+};
diff --git a/packages/ui/primitives/drawer.tsx b/packages/ui/primitives/drawer.tsx
index a1bf897..fc699bc 100644
--- a/packages/ui/primitives/drawer.tsx
+++ b/packages/ui/primitives/drawer.tsx
@@ -1,32 +1,33 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import { Drawer as DrawerPrimitive } from "vaul"
+import * as React from 'react';
 
-import { cn } from "@formbase/ui/utils/cn"
+import { Drawer as DrawerPrimitive } from 'vaul';
+
+import { cn } from '@formbase/ui/utils/cn';
 
 function Drawer({
   ...props
 }: React.ComponentProps<typeof DrawerPrimitive.Root>) {
-  return <DrawerPrimitive.Root data-slot="drawer" {...props} />
+  return <DrawerPrimitive.Root data-slot="drawer" {...props} />;
 }
 
 function DrawerTrigger({
   ...props
 }: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
-  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
+  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
 }
 
 function DrawerPortal({
   ...props
 }: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
-  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
+  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />;
 }
 
 function DrawerClose({
   ...props
 }: React.ComponentProps<typeof DrawerPrimitive.Close>) {
-  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
+  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />;
 }
 
 function DrawerOverlay({
@@ -36,10 +37,13 @@ function DrawerOverlay({
   return (
     <DrawerPrimitive.Overlay
       data-slot="drawer-overlay"
-      className={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50", className)}
+      className={cn(
+        'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50',
+        className,
+      )}
       {...props}
     />
-  )
+  );
 }
 
 function DrawerContent({
@@ -53,8 +57,8 @@ function DrawerContent({
       <DrawerPrimitive.Content
         data-slot="drawer-content"
         className={cn(
-          "bg-background flex h-auto flex-col text-sm data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b sm:data-[vaul-drawer-direction=left]:max-w-sm sm:data-[vaul-drawer-direction=right]:max-w-sm group/drawer-content fixed z-50",
-          className
+          'bg-background flex h-auto flex-col text-sm data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b sm:data-[vaul-drawer-direction=left]:max-w-sm sm:data-[vaul-drawer-direction=right]:max-w-sm group/drawer-content fixed z-50',
+          className,
         )}
         {...props}
       >
@@ -62,27 +66,30 @@ function DrawerContent({
         {children}
       </DrawerPrimitive.Content>
     </DrawerPortal>
-  )
+  );
 }
 
-function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
+function DrawerHeader({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="drawer-header"
-      className={cn("gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-0.5 md:text-left flex flex-col", className)}
+      className={cn(
+        'gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-0.5 md:text-left flex flex-col',
+        className,
+      )}
       {...props}
     />
-  )
+  );
 }
 
-function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
+function DrawerFooter({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="drawer-footer"
-      className={cn("gap-2 p-4 mt-auto flex flex-col", className)}
+      className={cn('gap-2 p-4 mt-auto flex flex-col', className)}
       {...props}
     />
-  )
+  );
 }
 
 function DrawerTitle({
@@ -92,10 +99,10 @@ function DrawerTitle({
   return (
     <DrawerPrimitive.Title
       data-slot="drawer-title"
-      className={cn("text-foreground text-base font-medium", className)}
+      className={cn('text-foreground text-base font-medium', className)}
       {...props}
     />
-  )
+  );
 }
 
 function DrawerDescription({
@@ -105,10 +112,10 @@ function DrawerDescription({
   return (
     <DrawerPrimitive.Description
       data-slot="drawer-description"
-      className={cn("text-muted-foreground text-sm", className)}
+      className={cn('text-muted-foreground text-sm', className)}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -122,4 +129,4 @@ export {
   DrawerFooter,
   DrawerTitle,
   DrawerDescription,
-}
+};
diff --git a/packages/ui/primitives/dropdown-menu.tsx b/packages/ui/primitives/dropdown-menu.tsx
index a094deb..3eaf38a 100644
--- a/packages/ui/primitives/dropdown-menu.tsx
+++ b/packages/ui/primitives/dropdown-menu.tsx
@@ -1,22 +1,23 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import { Menu as MenuPrimitive } from "@base-ui/react/menu"
+import * as React from 'react';
 
-import { cn } from "@formbase/ui/utils/cn"
-import { IconChevronRight, IconCheck } from "@tabler/icons-react"
+import { Menu as MenuPrimitive } from '@base-ui/react/menu';
+import { IconCheck, IconChevronRight } from '@tabler/icons-react';
+
+import { cn } from '@formbase/ui/utils/cn';
 
 function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
-  return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+  return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
 }
 
 function DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {
-  return <MenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  return <MenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />;
 }
 
 type DropdownMenuTriggerProps = MenuPrimitive.Trigger.Props & {
-  asChild?: boolean
-}
+  asChild?: boolean;
+};
 
 function DropdownMenuTrigger({
   asChild = false,
@@ -25,7 +26,7 @@ function DropdownMenuTrigger({
   ...props
 }: DropdownMenuTriggerProps) {
   const renderProp =
-    asChild && React.isValidElement(children) ? children : undefined
+    asChild && React.isValidElement(children) ? children : undefined;
 
   return (
     <MenuPrimitive.Trigger
@@ -36,20 +37,20 @@ function DropdownMenuTrigger({
     >
       {asChild ? undefined : children}
     </MenuPrimitive.Trigger>
-  )
+  );
 }
 
 function DropdownMenuContent({
-  align = "start",
+  align = 'start',
   alignOffset = 0,
-  side = "bottom",
+  side = 'bottom',
   sideOffset = 4,
   className,
   ...props
 }: MenuPrimitive.Popup.Props &
   Pick<
     MenuPrimitive.Positioner.Props,
-    "align" | "alignOffset" | "side" | "sideOffset"
+    'align' | 'alignOffset' | 'side' | 'sideOffset'
   >) {
   return (
     <MenuPrimitive.Portal>
@@ -62,16 +63,19 @@ function DropdownMenuContent({
       >
         <MenuPrimitive.Popup
           data-slot="dropdown-menu-content"
-          className={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-hidden data-closed:overflow-hidden", className )}
+          className={cn(
+            'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-hidden data-closed:overflow-hidden',
+            className,
+          )}
           {...props}
         />
       </MenuPrimitive.Positioner>
     </MenuPrimitive.Portal>
-  )
+  );
 }
 
 function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {
-  return <MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  return <MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />;
 }
 
 function DropdownMenuLabel({
@@ -79,34 +83,37 @@ function DropdownMenuLabel({
   inset,
   ...props
 }: MenuPrimitive.GroupLabel.Props & {
-  inset?: boolean
+  inset?: boolean;
 }) {
   return (
     <MenuPrimitive.GroupLabel
       data-slot="dropdown-menu-label"
       data-inset={inset}
-      className={cn("text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-8", className)}
+      className={cn(
+        'text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-8',
+        className,
+      )}
       {...props}
     />
-  )
+  );
 }
 
 type MenuItemProps = MenuPrimitive.Item.Props & {
-  inset?: boolean
-  variant?: "default" | "destructive"
-  asChild?: boolean
-}
+  inset?: boolean;
+  variant?: 'default' | 'destructive';
+  asChild?: boolean;
+};
 
 function DropdownMenuItem({
   className,
   inset,
-  variant = "default",
+  variant = 'default',
   asChild = false,
   children,
   ...props
 }: MenuItemProps) {
   const renderProp =
-    asChild && React.isValidElement(children) ? children : undefined
+    asChild && React.isValidElement(children) ? children : undefined;
 
   return (
     <MenuPrimitive.Item
@@ -116,17 +123,17 @@ function DropdownMenuItem({
       render={renderProp}
       className={cn(
         "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive [svg]:*:data-[variant=destructive]:text-destructive **:focus:not-data-[variant=destructive]:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        className
+        className,
       )}
       {...props}
     >
       {asChild ? undefined : children}
     </MenuPrimitive.Item>
-  )
+  );
 }
 
 function DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {
-  return <MenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />
+  return <MenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />;
 }
 
 function DropdownMenuSubTrigger({
@@ -135,7 +142,7 @@ function DropdownMenuSubTrigger({
   children,
   ...props
 }: MenuPrimitive.SubmenuTrigger.Props & {
-  inset?: boolean
+  inset?: boolean;
 }) {
   return (
     <MenuPrimitive.SubmenuTrigger
@@ -143,20 +150,20 @@ function DropdownMenuSubTrigger({
       data-inset={inset}
       className={cn(
         "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground **:focus:not-data-[variant=destructive]:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        className
+        className,
       )}
       {...props}
     >
       {children}
       <IconChevronRight className="ml-auto" />
     </MenuPrimitive.SubmenuTrigger>
-  )
+  );
 }
 
 function DropdownMenuSubContent({
-  align = "start",
+  align = 'start',
   alignOffset = -3,
-  side = "right",
+  side = 'right',
   sideOffset = 0,
   className,
   ...props
@@ -164,14 +171,17 @@ function DropdownMenuSubContent({
   return (
     <DropdownMenuContent
       data-slot="dropdown-menu-sub-content"
-      className={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-[96px] rounded-md p-1 shadow-lg ring-1 duration-100 w-auto", className)}
+      className={cn(
+        'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-[96px] rounded-md p-1 shadow-lg ring-1 duration-100 w-auto',
+        className,
+      )}
       align={align}
       alignOffset={alignOffset}
       side={side}
       sideOffset={sideOffset}
       {...props}
     />
-  )
+  );
 }
 
 function DropdownMenuCheckboxItem({
@@ -185,7 +195,7 @@ function DropdownMenuCheckboxItem({
       data-slot="dropdown-menu-checkbox-item"
       className={cn(
         "focus:bg-accent focus:text-accent-foreground **:focus:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        className
+        className,
       )}
       checked={checked}
       {...props}
@@ -195,13 +205,12 @@ function DropdownMenuCheckboxItem({
         data-slot="dropdown-menu-checkbox-item-indicator"
       >
         <MenuPrimitive.CheckboxItemIndicator>
-          <IconCheck
-          />
+          <IconCheck />
         </MenuPrimitive.CheckboxItemIndicator>
       </span>
       {children}
     </MenuPrimitive.CheckboxItem>
-  )
+  );
 }
 
 function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {
@@ -210,7 +219,7 @@ function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {
       data-slot="dropdown-menu-radio-group"
       {...props}
     />
-  )
+  );
 }
 
 function DropdownMenuRadioItem({
@@ -223,7 +232,7 @@ function DropdownMenuRadioItem({
       data-slot="dropdown-menu-radio-item"
       className={cn(
         "focus:bg-accent focus:text-accent-foreground **:focus:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        className
+        className,
       )}
       {...props}
     >
@@ -232,13 +241,12 @@ function DropdownMenuRadioItem({
         data-slot="dropdown-menu-radio-item-indicator"
       >
         <MenuPrimitive.RadioItemIndicator>
-          <IconCheck
-          />
+          <IconCheck />
         </MenuPrimitive.RadioItemIndicator>
       </span>
       {children}
     </MenuPrimitive.RadioItem>
-  )
+  );
 }
 
 function DropdownMenuSeparator({
@@ -248,23 +256,26 @@ function DropdownMenuSeparator({
   return (
     <MenuPrimitive.Separator
       data-slot="dropdown-menu-separator"
-      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      className={cn('bg-border -mx-1 my-1 h-px', className)}
       {...props}
     />
-  )
+  );
 }
 
 function DropdownMenuShortcut({
   className,
   ...props
-}: React.ComponentProps<"span">) {
+}: React.ComponentProps<'span'>) {
   return (
     <span
       data-slot="dropdown-menu-shortcut"
-      className={cn("text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest", className)}
+      className={cn(
+        'text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest',
+        className,
+      )}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -283,4 +294,4 @@ export {
   DropdownMenuSub,
   DropdownMenuSubTrigger,
   DropdownMenuSubContent,
-}
+};
diff --git a/packages/ui/primitives/empty.tsx b/packages/ui/primitives/empty.tsx
index 527a74c..de80191 100644
--- a/packages/ui/primitives/empty.tsx
+++ b/packages/ui/primitives/empty.tsx
@@ -1,53 +1,52 @@
-import { cva, type VariantProps } from "class-variance-authority"
+import type { VariantProps } from 'class-variance-authority';
 
-import { cn } from "@formbase/ui/utils/cn"
+import { cva } from 'class-variance-authority';
 
-function Empty({ className, ...props }: React.ComponentProps<"div">) {
+import { cn } from '@formbase/ui/utils/cn';
+
+function Empty({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="empty"
       className={cn(
-        "gap-4 rounded-lg border-dashed p-6 flex w-full min-w-0 flex-1 flex-col items-center justify-center text-center text-balance",
-        className
+        'gap-4 rounded-lg border-dashed p-6 flex w-full min-w-0 flex-1 flex-col items-center justify-center text-center text-balance',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
+function EmptyHeader({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="empty-header"
-      className={cn(
-        "gap-2 flex max-w-sm flex-col items-center",
-        className
-      )}
+      className={cn('gap-2 flex max-w-sm flex-col items-center', className)}
       {...props}
     />
-  )
+  );
 }
 
 const emptyMediaVariants = cva(
-  "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  'mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0',
   {
     variants: {
       variant: {
-        default: "bg-transparent",
+        default: 'bg-transparent',
         icon: "bg-muted text-foreground flex size-8 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-4",
       },
     },
     defaultVariants: {
-      variant: "default",
+      variant: 'default',
     },
-  }
-)
+  },
+);
 
 function EmptyMedia({
   className,
-  variant = "default",
+  variant = 'default',
   ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>) {
+}: React.ComponentProps<'div'> & VariantProps<typeof emptyMediaVariants>) {
   return (
     <div
       data-slot="empty-icon"
@@ -55,43 +54,43 @@ function EmptyMedia({
       className={cn(emptyMediaVariants({ variant, className }))}
       {...props}
     />
-  )
+  );
 }
 
-function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
+function EmptyTitle({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="empty-title"
-      className={cn("text-sm font-medium tracking-tight", className)}
+      className={cn('text-sm font-medium tracking-tight', className)}
       {...props}
     />
-  )
+  );
 }
 
-function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
+function EmptyDescription({ className, ...props }: React.ComponentProps<'p'>) {
   return (
     <div
       data-slot="empty-description"
       className={cn(
-        "text-sm/relaxed text-muted-foreground [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
-        className
+        'text-sm/relaxed text-muted-foreground [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
+function EmptyContent({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="empty-content"
       className={cn(
-        "gap-2.5 text-sm flex w-full max-w-sm min-w-0 flex-col items-center text-balance",
-        className
+        'gap-2.5 text-sm flex w-full max-w-sm min-w-0 flex-col items-center text-balance',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -101,4 +100,4 @@ export {
   EmptyDescription,
   EmptyContent,
   EmptyMedia,
-}
+};
diff --git a/packages/ui/primitives/field.tsx b/packages/ui/primitives/field.tsx
index 016059f..8da47a4 100644
--- a/packages/ui/primitives/field.tsx
+++ b/packages/ui/primitives/field.tsx
@@ -1,71 +1,82 @@
-"use client"
+'use client';
 
-import { useMemo } from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import { useMemo } from 'react';
 
-import { cn } from "@formbase/ui/utils/cn"
-import { Label } from "@formbase/ui/primitives/label"
-import { Separator } from "@formbase/ui/primitives/separator"
+import type { VariantProps } from 'class-variance-authority';
 
-function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
+import { cva } from 'class-variance-authority';
+
+import { Label } from '@formbase/ui/primitives/label';
+import { Separator } from '@formbase/ui/primitives/separator';
+import { cn } from '@formbase/ui/utils/cn';
+
+function FieldSet({ className, ...props }: React.ComponentProps<'fieldset'>) {
   return (
     <fieldset
       data-slot="field-set"
-      className={cn("gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col", className)}
+      className={cn(
+        'gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col',
+        className,
+      )}
       {...props}
     />
-  )
+  );
 }
 
 function FieldLegend({
   className,
-  variant = "legend",
+  variant = 'legend',
   ...props
-}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
+}: React.ComponentProps<'legend'> & { variant?: 'legend' | 'label' }) {
   return (
     <legend
       data-slot="field-legend"
       data-variant={variant}
-      className={cn("mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base", className)}
+      className={cn(
+        'mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base',
+        className,
+      )}
       {...props}
     />
-  )
+  );
 }
 
-function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
+function FieldGroup({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="field-group"
       className={cn(
-        "gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4 group/field-group @container/field-group flex w-full flex-col",
-        className
+        'gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4 group/field-group @container/field-group flex w-full flex-col',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-const fieldVariants = cva("data-[invalid=true]:text-destructive gap-2 group/field flex w-full", {
-  variants: {
-    orientation: {
-      vertical:
-        "flex-col *:w-full [&>.sr-only]:w-auto",
-      horizontal:
-        "flex-row items-center *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:items-start [&>[role=checkbox],[role=radio]]:has-[>[data-slot=field-content]]:mt-px",
-      responsive:
-        "flex-col *:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:*:data-[slot=field-label]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:[&>[role=checkbox],[role=radio]]:has-[>[data-slot=field-content]]:mt-px",
+const fieldVariants = cva(
+  'data-[invalid=true]:text-destructive gap-2 group/field flex w-full',
+  {
+    variants: {
+      orientation: {
+        vertical: 'flex-col *:w-full [&>.sr-only]:w-auto',
+        horizontal:
+          'flex-row items-center *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:items-start [&>[role=checkbox],[role=radio]]:has-[>[data-slot=field-content]]:mt-px',
+        responsive:
+          'flex-col *:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:*:data-[slot=field-label]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:[&>[role=checkbox],[role=radio]]:has-[>[data-slot=field-content]]:mt-px',
+      },
+    },
+    defaultVariants: {
+      orientation: 'vertical',
     },
   },
-  defaultVariants: {
-    orientation: "vertical",
-  },
-})
+);
 
 function Field({
   className,
-  orientation = "vertical",
+  orientation = 'vertical',
   ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
+}: React.ComponentProps<'div'> & VariantProps<typeof fieldVariants>) {
   return (
     <div
       role="group"
@@ -74,20 +85,20 @@ function Field({
       className={cn(fieldVariants({ orientation }), className)}
       {...props}
     />
-  )
+  );
 }
 
-function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
+function FieldContent({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="field-content"
       className={cn(
-        "gap-0.5 group/field-content flex flex-1 flex-col leading-snug",
-        className
+        'gap-0.5 group/field-content flex flex-1 flex-col leading-snug',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function FieldLabel({
@@ -98,55 +109,58 @@ function FieldLabel({
     <Label
       data-slot="field-label"
       className={cn(
-        "has-data-checked:bg-primary/5 has-data-checked:border-primary dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border data-[slot=field]:*:p-2.5 group/field-label peer/field-label flex w-fit leading-snug",
-        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
-        className
+        'has-data-checked:bg-primary/5 has-data-checked:border-primary dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border data-[slot=field]:*:p-2.5 group/field-label peer/field-label flex w-fit leading-snug',
+        'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
+function FieldTitle({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="field-label"
       className={cn(
-        "gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50 flex w-fit items-center leading-snug",
-        className
+        'gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50 flex w-fit items-center leading-snug',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
+function FieldDescription({ className, ...props }: React.ComponentProps<'p'>) {
   return (
     <p
       data-slot="field-description"
       className={cn(
-        "text-muted-foreground text-left text-sm [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-data-[orientation=horizontal]/field:text-balance",
-        "last:mt-0 nth-last-2:-mt-1",
-        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
-        className
+        'text-muted-foreground text-left text-sm [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-data-[orientation=horizontal]/field:text-balance',
+        'last:mt-0 nth-last-2:-mt-1',
+        '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function FieldSeparator({
   children,
   className,
   ...props
-}: React.ComponentProps<"div"> & {
-  children?: React.ReactNode
+}: React.ComponentProps<'div'> & {
+  children?: React.ReactNode;
 }) {
   return (
     <div
       data-slot="field-separator"
       data-content={!!children}
-      className={cn("-my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2 relative", className)}
+      className={cn(
+        '-my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2 relative',
+        className,
+      )}
       {...props}
     >
       <Separator className="absolute inset-0 top-1/2" />
@@ -159,7 +173,7 @@ function FieldSeparator({
         </span>
       )}
     </div>
-  )
+  );
 }
 
 function FieldError({
@@ -167,50 +181,50 @@ function FieldError({
   children,
   errors,
   ...props
-}: React.ComponentProps<"div"> & {
-  errors?: Array<{ message?: string } | undefined>
+}: React.ComponentProps<'div'> & {
+  errors?: Array<{ message?: string } | undefined>;
 }) {
   const content = useMemo(() => {
     if (children) {
-      return children
+      return children;
     }
 
     if (!errors?.length) {
-      return null
+      return null;
     }
 
     const uniqueErrors = [
       ...new Map(errors.map((error) => [error?.message, error])).values(),
-    ]
+    ];
 
     if (uniqueErrors?.length == 1) {
-      return uniqueErrors[0]?.message
+      return uniqueErrors[0]?.message;
     }
 
     return (
       <ul className="ml-4 flex list-disc flex-col gap-1">
         {uniqueErrors.map(
           (error, index) =>
-            error?.message && <li key={index}>{error.message}</li>
+            error?.message && <li key={index}>{error.message}</li>,
         )}
       </ul>
-    )
-  }, [children, errors])
+    );
+  }, [children, errors]);
 
   if (!content) {
-    return null
+    return null;
   }
 
   return (
     <div
       role="alert"
       data-slot="field-error"
-      className={cn("text-destructive text-sm font-normal", className)}
+      className={cn('text-destructive text-sm font-normal', className)}
       {...props}
     >
       {content}
     </div>
-  )
+  );
 }
 
 export {
@@ -224,4 +238,4 @@ export {
   FieldSet,
   FieldContent,
   FieldTitle,
-}
+};
diff --git a/packages/ui/primitives/form.tsx b/packages/ui/primitives/form.tsx
index a54fc69..8be39e4 100644
--- a/packages/ui/primitives/form.tsx
+++ b/packages/ui/primitives/form.tsx
@@ -97,10 +97,7 @@ function FormLabel({
   );
 }
 
-function FormControl({
-  render,
-  ...props
-}: useRender.ComponentProps<'div'>) {
+function FormControl({ render, ...props }: useRender.ComponentProps<'div'>) {
   const { error, formItemId, formDescriptionId, formMessageId } =
     useFormField();
 
diff --git a/packages/ui/primitives/hover-card.tsx b/packages/ui/primitives/hover-card.tsx
index c768bc3..f4f5ddf 100644
--- a/packages/ui/primitives/hover-card.tsx
+++ b/packages/ui/primitives/hover-card.tsx
@@ -1,30 +1,30 @@
-"use client"
+'use client';
 
-import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card"
+import { PreviewCard as PreviewCardPrimitive } from '@base-ui/react/preview-card';
 
-import { cn } from "@formbase/ui/utils/cn"
+import { cn } from '@formbase/ui/utils/cn';
 
 function HoverCard({ ...props }: PreviewCardPrimitive.Root.Props) {
-  return <PreviewCardPrimitive.Root data-slot="hover-card" {...props} />
+  return <PreviewCardPrimitive.Root data-slot="hover-card" {...props} />;
 }
 
 function HoverCardTrigger({ ...props }: PreviewCardPrimitive.Trigger.Props) {
   return (
     <PreviewCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
-  )
+  );
 }
 
 function HoverCardContent({
   className,
-  side = "bottom",
+  side = 'bottom',
   sideOffset = 4,
-  align = "center",
+  align = 'center',
   alignOffset = 4,
   ...props
 }: PreviewCardPrimitive.Popup.Props &
   Pick<
     PreviewCardPrimitive.Positioner.Props,
-    "align" | "alignOffset" | "side" | "sideOffset"
+    'align' | 'alignOffset' | 'side' | 'sideOffset'
   >) {
   return (
     <PreviewCardPrimitive.Portal data-slot="hover-card-portal">
@@ -38,14 +38,14 @@ function HoverCardContent({
         <PreviewCardPrimitive.Popup
           data-slot="hover-card-content"
           className={cn(
-            "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground w-64 rounded-lg p-2.5 text-sm shadow-md ring-1 duration-100 z-50 origin-(--transform-origin) outline-hidden",
-            className
+            'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground w-64 rounded-lg p-2.5 text-sm shadow-md ring-1 duration-100 z-50 origin-(--transform-origin) outline-hidden',
+            className,
           )}
           {...props}
         />
       </PreviewCardPrimitive.Positioner>
     </PreviewCardPrimitive.Portal>
-  )
+  );
 }
 
-export { HoverCard, HoverCardTrigger, HoverCardContent }
+export { HoverCard, HoverCardTrigger, HoverCardContent };
diff --git a/packages/ui/primitives/input-group.tsx b/packages/ui/primitives/input-group.tsx
index f4aabdd..b8ab923 100644
--- a/packages/ui/primitives/input-group.tsx
+++ b/packages/ui/primitives/input-group.tsx
@@ -1,25 +1,28 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from 'react';
 
-import { cn } from "@formbase/ui/utils/cn"
-import { Button } from "@formbase/ui/primitives/button"
-import { Input } from "@formbase/ui/primitives/input"
-import { Textarea } from "@formbase/ui/primitives/textarea"
+import type { VariantProps } from 'class-variance-authority';
 
-function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
+import { cva } from 'class-variance-authority';
+
+import { Button } from '@formbase/ui/primitives/button';
+import { Input } from '@formbase/ui/primitives/input';
+import { Textarea } from '@formbase/ui/primitives/textarea';
+import { cn } from '@formbase/ui/utils/cn';
+
+function InputGroup({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="input-group"
       role="group"
       className={cn(
-        "border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 h-8 rounded-lg border transition-colors has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-[3px] has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col [&>input]:has-[>[data-align=block-end]]:pt-3 [&>input]:has-[>[data-align=block-start]]:pb-3 [&>input]:has-[>[data-align=inline-end]]:pr-1.5 [&>input]:has-[>[data-align=inline-start]]:pl-1.5 focus-within:in-data-[slot=combobox-content]:border-inherit focus-within:in-data-[slot=combobox-content]:ring-0 group/input-group relative flex w-full min-w-0 items-center outline-hidden has-[>textarea]:h-auto",
-        className
+        'border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 h-8 rounded-lg border transition-colors has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-[3px] has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col [&>input]:has-[>[data-align=block-end]]:pt-3 [&>input]:has-[>[data-align=block-start]]:pb-3 [&>input]:has-[>[data-align=inline-end]]:pr-1.5 [&>input]:has-[>[data-align=inline-start]]:pl-1.5 focus-within:in-data-[slot=combobox-content]:border-inherit focus-within:in-data-[slot=combobox-content]:ring-0 group/input-group relative flex w-full min-w-0 items-center outline-hidden has-[>textarea]:h-auto',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 const inputGroupAddonVariants = cva(
@@ -27,25 +30,27 @@ const inputGroupAddonVariants = cva(
   {
     variants: {
       align: {
-        "inline-start": "pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first",
-        "inline-end": "pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last",
-        "block-start":
-          "px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start",
-        "block-end":
-          "px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start",
+        'inline-start':
+          'pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first',
+        'inline-end':
+          'pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last',
+        'block-start':
+          'px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start',
+        'block-end':
+          'px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start',
       },
     },
     defaultVariants: {
-      align: "inline-start",
+      align: 'inline-start',
     },
-  }
-)
+  },
+);
 
 function InputGroupAddon({
   className,
-  align = "inline-start",
+  align = 'inline-start',
   ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
+}: React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>) {
   return (
     <div
       role="group"
@@ -53,42 +58,43 @@ function InputGroupAddon({
       data-align={align}
       className={cn(inputGroupAddonVariants({ align }), className)}
       onClick={(e) => {
-        if ((e.target as HTMLElement).closest("button")) {
-          return
+        if ((e.target as HTMLElement).closest('button')) {
+          return;
         }
-        e.currentTarget.parentElement?.querySelector("input")?.focus()
+        e.currentTarget.parentElement?.querySelector('input')?.focus();
       }}
       {...props}
     />
-  )
+  );
 }
 
 const inputGroupButtonVariants = cva(
-  "gap-2 text-sm shadow-none flex items-center",
+  'gap-2 text-sm shadow-none flex items-center',
   {
     variants: {
       size: {
         xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
-        sm: "",
-        "icon-xs": "size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0",
-        "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+        sm: '',
+        'icon-xs':
+          'size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0',
+        'icon-sm': 'size-8 p-0 has-[>svg]:p-0',
       },
     },
     defaultVariants: {
-      size: "xs",
+      size: 'xs',
     },
-  }
-)
+  },
+);
 
 function InputGroupButton({
   className,
-  type = "button",
-  variant = "ghost",
-  size = "xs",
+  type = 'button',
+  variant = 'ghost',
+  size = 'xs',
   ...props
-}: Omit<React.ComponentProps<typeof Button>, "size" | "type"> &
+}: Omit<React.ComponentProps<typeof Button>, 'size' | 'type'> &
   VariantProps<typeof inputGroupButtonVariants> & {
-    type?: "button" | "submit" | "reset"
+    type?: 'button' | 'submit' | 'reset';
   }) {
   return (
     <Button
@@ -98,45 +104,51 @@ function InputGroupButton({
       className={cn(inputGroupButtonVariants({ size }), className)}
       {...props}
     />
-  )
+  );
 }
 
-function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
+function InputGroupText({ className, ...props }: React.ComponentProps<'span'>) {
   return (
     <span
       className={cn(
         "text-muted-foreground gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function InputGroupInput({
   className,
   ...props
-}: React.ComponentProps<"input">) {
+}: React.ComponentProps<'input'>) {
   return (
     <Input
       data-slot="input-group-control"
-      className={cn("rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1", className)}
+      className={cn(
+        'rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1',
+        className,
+      )}
       {...props}
     />
-  )
+  );
 }
 
 function InputGroupTextarea({
   className,
   ...props
-}: React.ComponentProps<"textarea">) {
+}: React.ComponentProps<'textarea'>) {
   return (
     <Textarea
       data-slot="input-group-control"
-      className={cn("rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1 resize-none", className)}
+      className={cn(
+        'rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1 resize-none',
+        className,
+      )}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -146,4 +158,4 @@ export {
   InputGroupText,
   InputGroupInput,
   InputGroupTextarea,
-}
+};
diff --git a/packages/ui/primitives/input-otp.tsx b/packages/ui/primitives/input-otp.tsx
index 93669bc..a050d66 100644
--- a/packages/ui/primitives/input-otp.tsx
+++ b/packages/ui/primitives/input-otp.tsx
@@ -1,62 +1,63 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import { OTPInput, OTPInputContext } from "input-otp"
+import * as React from 'react';
 
-import { cn } from "@formbase/ui/utils/cn"
-import { IconMinus } from "@tabler/icons-react"
+import { IconMinus } from '@tabler/icons-react';
+import { OTPInput, OTPInputContext } from 'input-otp';
+
+import { cn } from '@formbase/ui/utils/cn';
 
 function InputOTP({
   className,
   containerClassName,
   ...props
 }: React.ComponentProps<typeof OTPInput> & {
-  containerClassName?: string
+  containerClassName?: string;
 }) {
   return (
     <OTPInput
       data-slot="input-otp"
       containerClassName={cn(
-        "cn-input-otp flex items-center has-disabled:opacity-50",
-        containerClassName
+        'cn-input-otp flex items-center has-disabled:opacity-50',
+        containerClassName,
       )}
       spellCheck={false}
-      className={cn(
-        "disabled:cursor-not-allowed",
-        className
-      )}
+      className={cn('disabled:cursor-not-allowed', className)}
       {...props}
     />
-  )
+  );
 }
 
-function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
+function InputOTPGroup({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="input-otp-group"
-      className={cn("has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-lg has-aria-invalid:ring-[3px] flex items-center", className)}
+      className={cn(
+        'has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-lg has-aria-invalid:ring-[3px] flex items-center',
+        className,
+      )}
       {...props}
     />
-  )
+  );
 }
 
 function InputOTPSlot({
   index,
   className,
   ...props
-}: React.ComponentProps<"div"> & {
-  index: number
+}: React.ComponentProps<'div'> & {
+  index: number;
 }) {
-  const inputOTPContext = React.useContext(OTPInputContext)
-  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}
+  const inputOTPContext = React.useContext(OTPInputContext);
+  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
 
   return (
     <div
       data-slot="input-otp-slot"
       data-active={isActive}
       className={cn(
-        "dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-8 border-y border-r text-sm transition-all outline-hidden first:rounded-l-lg first:border-l last:rounded-r-lg data-[active=true]:ring-[3px] relative flex items-center justify-center data-[active=true]:z-10",
-        className
+        'dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-8 border-y border-r text-sm transition-all outline-hidden first:rounded-l-lg first:border-l last:rounded-r-lg data-[active=true]:ring-[3px] relative flex items-center justify-center data-[active=true]:z-10',
+        className,
       )}
       {...props}
     >
@@ -67,10 +68,10 @@ function InputOTPSlot({
         </div>
       )}
     </div>
-  )
+  );
 }
 
-function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
+function InputOTPSeparator({ ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="input-otp-separator"
@@ -78,10 +79,9 @@ function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
       role="separator"
       {...props}
     >
-      <IconMinus
-      />
+      <IconMinus />
     </div>
-  )
+  );
 }
 
-export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };
diff --git a/packages/ui/primitives/input.tsx b/packages/ui/primitives/input.tsx
index 3f6defc..7692380 100644
--- a/packages/ui/primitives/input.tsx
+++ b/packages/ui/primitives/input.tsx
@@ -1,9 +1,10 @@
-import * as React from "react"
-import { Input as InputPrimitive } from "@base-ui/react/input"
+import * as React from 'react';
 
-import { cn } from "@formbase/ui/utils/cn"
+import { Input as InputPrimitive } from '@base-ui/react/input';
 
-type InputProps = React.ComponentProps<"input">
+import { cn } from '@formbase/ui/utils/cn';
+
+type InputProps = React.ComponentProps<'input'>;
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
   ({ className, type, ...props }, ref) => {
@@ -13,14 +14,14 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         type={type}
         data-slot="input"
         className={cn(
-          "dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-hidden file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
-          className
+          'dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-hidden file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+          className,
         )}
         {...props}
       />
-    )
-  }
-)
-Input.displayName = "Input"
+    );
+  },
+);
+Input.displayName = 'Input';
 
-export { Input, type InputProps }
+export { Input, type InputProps };
diff --git a/packages/ui/primitives/item.tsx b/packages/ui/primitives/item.tsx
index dcd74ce..0592723 100644
--- a/packages/ui/primitives/item.tsx
+++ b/packages/ui/primitives/item.tsx
@@ -1,23 +1,26 @@
-import * as React from "react"
-import { mergeProps } from "@base-ui/react/merge-props"
-import { useRender } from "@base-ui/react/use-render"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from 'react';
 
-import { cn } from "@formbase/ui/utils/cn"
-import { Separator } from "@formbase/ui/primitives/separator"
+import type { VariantProps } from 'class-variance-authority';
 
-function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
+import { cva } from 'class-variance-authority';
+
+import { Separator } from '@formbase/ui/primitives/separator';
+import { cn } from '@formbase/ui/utils/cn';
+
+function ItemGroup({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       role="list"
       data-slot="item-group"
       className={cn(
-        "gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2 group/item-group flex w-full flex-col",
-        className
+        'gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2 group/item-group flex w-full flex-col',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function ItemSeparator({
@@ -28,79 +31,80 @@ function ItemSeparator({
     <Separator
       data-slot="item-separator"
       orientation="horizontal"
-      className={cn("my-2", className)}
+      className={cn('my-2', className)}
       {...props}
     />
-  )
+  );
 }
 
 const itemVariants = cva(
-  "[a]:hover:bg-muted rounded-lg border text-sm w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-hidden transition-colors duration-100 focus-visible:ring-[3px] [a]:transition-colors",
+  '[a]:hover:bg-muted rounded-lg border text-sm w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-hidden transition-colors duration-100 focus-visible:ring-[3px] [a]:transition-colors',
   {
     variants: {
       variant: {
-        default: "border-transparent",
-        outline: "border-border",
-        muted: "bg-muted/50 border-transparent",
+        default: 'border-transparent',
+        outline: 'border-border',
+        muted: 'bg-muted/50 border-transparent',
       },
       size: {
-        default: "gap-2.5 px-3 py-2.5",
-        sm: "gap-2.5 px-3 py-2.5",
-        xs: "gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0",
+        default: 'gap-2.5 px-3 py-2.5',
+        sm: 'gap-2.5 px-3 py-2.5',
+        xs: 'gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0',
       },
     },
     defaultVariants: {
-      variant: "default",
-      size: "default",
+      variant: 'default',
+      size: 'default',
     },
-  }
-)
+  },
+);
 
 function Item({
   className,
-  variant = "default",
-  size = "default",
+  variant = 'default',
+  size = 'default',
   render,
   ...props
-}: useRender.ComponentProps<"div"> & VariantProps<typeof itemVariants>) {
+}: useRender.ComponentProps<'div'> & VariantProps<typeof itemVariants>) {
   return useRender({
-    defaultTagName: "div",
-    props: mergeProps<"div">(
+    defaultTagName: 'div',
+    props: mergeProps<'div'>(
       {
         className: cn(itemVariants({ variant, size, className })),
       },
-      props
+      props,
     ),
     render,
     state: {
-      slot: "item",
+      slot: 'item',
       variant,
       size,
     },
-  })
+  });
 }
 
 const itemMediaVariants = cva(
-  "gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none",
+  'gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none',
   {
     variants: {
       variant: {
-        default: "bg-transparent",
+        default: 'bg-transparent',
         icon: "[&_svg:not([class*='size-'])]:size-4",
-        image: "size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover",
+        image:
+          'size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover',
       },
     },
     defaultVariants: {
-      variant: "default",
+      variant: 'default',
     },
-  }
-)
+  },
+);
 
 function ItemMedia({
   className,
-  variant = "default",
+  variant = 'default',
   ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>) {
+}: React.ComponentProps<'div'> & VariantProps<typeof itemMediaVariants>) {
   return (
     <div
       data-slot="item-media"
@@ -108,82 +112,82 @@ function ItemMedia({
       className={cn(itemMediaVariants({ variant, className }))}
       {...props}
     />
-  )
+  );
 }
 
-function ItemContent({ className, ...props }: React.ComponentProps<"div">) {
+function ItemContent({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="item-content"
       className={cn(
-        "gap-1 group-data-[size=xs]/item:gap-0 flex flex-1 flex-col [&+[data-slot=item-content]]:flex-none",
-        className
+        'gap-1 group-data-[size=xs]/item:gap-0 flex flex-1 flex-col [&+[data-slot=item-content]]:flex-none',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
+function ItemTitle({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="item-title"
       className={cn(
-        "gap-2 text-sm leading-snug font-medium underline-offset-4 line-clamp-1 flex w-fit items-center",
-        className
+        'gap-2 text-sm leading-snug font-medium underline-offset-4 line-clamp-1 flex w-fit items-center',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
+function ItemDescription({ className, ...props }: React.ComponentProps<'p'>) {
   return (
     <p
       data-slot="item-description"
       className={cn(
-        "text-muted-foreground text-left text-sm leading-normal group-data-[size=xs]/item:text-xs [&>a:hover]:text-primary line-clamp-2 font-normal [&>a]:underline [&>a]:underline-offset-4",
-        className
+        'text-muted-foreground text-left text-sm leading-normal group-data-[size=xs]/item:text-xs [&>a:hover]:text-primary line-clamp-2 font-normal [&>a]:underline [&>a]:underline-offset-4',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function ItemActions({ className, ...props }: React.ComponentProps<"div">) {
+function ItemActions({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="item-actions"
-      className={cn("gap-2 flex items-center", className)}
+      className={cn('gap-2 flex items-center', className)}
       {...props}
     />
-  )
+  );
 }
 
-function ItemHeader({ className, ...props }: React.ComponentProps<"div">) {
+function ItemHeader({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="item-header"
       className={cn(
-        "gap-2 flex basis-full items-center justify-between",
-        className
+        'gap-2 flex basis-full items-center justify-between',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function ItemFooter({ className, ...props }: React.ComponentProps<"div">) {
+function ItemFooter({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="item-footer"
       className={cn(
-        "gap-2 flex basis-full items-center justify-between",
-        className
+        'gap-2 flex basis-full items-center justify-between',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -197,4 +201,4 @@ export {
   ItemDescription,
   ItemHeader,
   ItemFooter,
-}
+};
diff --git a/packages/ui/primitives/kbd.tsx b/packages/ui/primitives/kbd.tsx
index bcacd9e..f5319d8 100644
--- a/packages/ui/primitives/kbd.tsx
+++ b/packages/ui/primitives/kbd.tsx
@@ -1,26 +1,26 @@
-import { cn } from "@formbase/ui/utils/cn"
+import { cn } from '@formbase/ui/utils/cn';
 
-function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
+function Kbd({ className, ...props }: React.ComponentProps<'kbd'>) {
   return (
     <kbd
       data-slot="kbd"
       className={cn(
         "bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-sm px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3 pointer-events-none inline-flex items-center justify-center select-none",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
+function KbdGroup({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <kbd
       data-slot="kbd-group"
-      className={cn("gap-1 inline-flex items-center", className)}
+      className={cn('gap-1 inline-flex items-center', className)}
       {...props}
     />
-  )
+  );
 }
 
-export { Kbd, KbdGroup }
+export { Kbd, KbdGroup };
diff --git a/packages/ui/primitives/label.tsx b/packages/ui/primitives/label.tsx
index 5d5e212..8633a10 100644
--- a/packages/ui/primitives/label.tsx
+++ b/packages/ui/primitives/label.tsx
@@ -1,20 +1,20 @@
-"use client"
+'use client';
 
-import * as React from "react"
+import * as React from 'react';
 
-import { cn } from "@formbase/ui/utils/cn"
+import { cn } from '@formbase/ui/utils/cn';
 
-function Label({ className, ...props }: React.ComponentProps<"label">) {
+function Label({ className, ...props }: React.ComponentProps<'label'>) {
   return (
     <label
       data-slot="label"
       className={cn(
-        "gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed",
-        className
+        'gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-export { Label }
+export { Label };
diff --git a/packages/ui/primitives/menubar.tsx b/packages/ui/primitives/menubar.tsx
index 27e4740..035e857 100644
--- a/packages/ui/primitives/menubar.tsx
+++ b/packages/ui/primitives/menubar.tsx
@@ -1,10 +1,11 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import { Menu as MenuPrimitive } from "@base-ui/react/menu"
-import { Menubar as MenubarPrimitive } from "@base-ui/react/menubar"
+import * as React from 'react';
+
+import { Menu as MenuPrimitive } from '@base-ui/react/menu';
+import { Menubar as MenubarPrimitive } from '@base-ui/react/menubar';
+import { IconCheck } from '@tabler/icons-react';
 
-import { cn } from "@formbase/ui/utils/cn"
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -19,33 +20,36 @@ import {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
-} from "@formbase/ui/primitives/dropdown-menu"
-import { IconCheck } from "@tabler/icons-react"
+} from '@formbase/ui/primitives/dropdown-menu';
+import { cn } from '@formbase/ui/utils/cn';
 
 function Menubar({ className, ...props }: MenubarPrimitive.Props) {
   return (
     <MenubarPrimitive
       data-slot="menubar"
-      className={cn("bg-background h-8 gap-0.5 rounded-lg border p-1 flex items-center", className)}
+      className={cn(
+        'bg-background h-8 gap-0.5 rounded-lg border p-1 flex items-center',
+        className,
+      )}
       {...props}
     />
-  )
+  );
 }
 
 function MenubarMenu({ ...props }: React.ComponentProps<typeof DropdownMenu>) {
-  return <DropdownMenu data-slot="menubar-menu" {...props} />
+  return <DropdownMenu data-slot="menubar-menu" {...props} />;
 }
 
 function MenubarGroup({
   ...props
 }: React.ComponentProps<typeof DropdownMenuGroup>) {
-  return <DropdownMenuGroup data-slot="menubar-group" {...props} />
+  return <DropdownMenuGroup data-slot="menubar-group" {...props} />;
 }
 
 function MenubarPortal({
   ...props
 }: React.ComponentProps<typeof DropdownMenuPortal>) {
-  return <DropdownMenuPortal data-slot="menubar-portal" {...props} />
+  return <DropdownMenuPortal data-slot="menubar-portal" {...props} />;
 }
 
 function MenubarTrigger({
@@ -56,17 +60,17 @@ function MenubarTrigger({
     <DropdownMenuTrigger
       data-slot="menubar-trigger"
       className={cn(
-        "hover:bg-muted aria-expanded:bg-muted rounded-sm px-1.5 py-px text-sm font-medium flex items-center outline-hidden select-none",
-        className
+        'hover:bg-muted aria-expanded:bg-muted rounded-sm px-1.5 py-px text-sm font-medium flex items-center outline-hidden select-none',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function MenubarContent({
   className,
-  align = "start",
+  align = 'start',
   alignOffset = -4,
   sideOffset = 8,
   ...props
@@ -77,16 +81,19 @@ function MenubarContent({
       align={align}
       alignOffset={alignOffset}
       sideOffset={sideOffset}
-      className={cn("bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-lg p-1 shadow-md ring-1 duration-100", className)}
+      className={cn(
+        'bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-lg p-1 shadow-md ring-1 duration-100',
+        className,
+      )}
       {...props}
     />
-  )
+  );
 }
 
 function MenubarItem({
   className,
   inset,
-  variant = "default",
+  variant = 'default',
   ...props
 }: React.ComponentProps<typeof DropdownMenuItem>) {
   return (
@@ -94,10 +101,13 @@ function MenubarItem({
       data-slot="menubar-item"
       data-inset={inset}
       data-variant={variant}
-      className={cn("focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive [svg]:*:data-[variant=destructive]:text-destructive! **:focus:not-data-[variant=destructive]:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-disabled:opacity-50 data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4 group/menubar-item", className)}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive [svg]:*:data-[variant=destructive]:text-destructive! **:focus:not-data-[variant=destructive]:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-disabled:opacity-50 data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4 group/menubar-item",
+        className,
+      )}
       {...props}
     />
-  )
+  );
 }
 
 function MenubarCheckboxItem({
@@ -110,27 +120,26 @@ function MenubarCheckboxItem({
     <MenuPrimitive.CheckboxItem
       data-slot="menubar-checkbox-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground **:focus:text-accent-foreground gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm data-disabled:opacity-50 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        className
+        'focus:bg-accent focus:text-accent-foreground **:focus:text-accent-foreground gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm data-disabled:opacity-50 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
+        className,
       )}
       checked={checked}
       {...props}
     >
       <span className="left-1.5 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center">
         <MenuPrimitive.CheckboxItemIndicator>
-          <IconCheck
-          />
+          <IconCheck />
         </MenuPrimitive.CheckboxItemIndicator>
       </span>
       {children}
     </MenuPrimitive.CheckboxItem>
-  )
+  );
 }
 
 function MenubarRadioGroup({
   ...props
 }: React.ComponentProps<typeof DropdownMenuRadioGroup>) {
-  return <DropdownMenuRadioGroup data-slot="menubar-radio-group" {...props} />
+  return <DropdownMenuRadioGroup data-slot="menubar-radio-group" {...props} />;
 }
 
 function MenubarRadioItem({
@@ -143,19 +152,18 @@ function MenubarRadioItem({
       data-slot="menubar-radio-item"
       className={cn(
         "focus:bg-accent focus:text-accent-foreground **:focus:text-accent-foreground gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        className
+        className,
       )}
       {...props}
     >
       <span className="left-1.5 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center">
         <MenuPrimitive.RadioItemIndicator>
-          <IconCheck
-          />
+          <IconCheck />
         </MenuPrimitive.RadioItemIndicator>
       </span>
       {children}
     </MenuPrimitive.RadioItem>
-  )
+  );
 }
 
 function MenubarLabel({
@@ -167,10 +175,13 @@ function MenubarLabel({
     <DropdownMenuLabel
       data-slot="menubar-label"
       data-inset={inset}
-      className={cn("px-1.5 py-1 text-sm font-medium data-inset:pl-8", className)}
+      className={cn(
+        'px-1.5 py-1 text-sm font-medium data-inset:pl-8',
+        className,
+      )}
       {...props}
     />
-  )
+  );
 }
 
 function MenubarSeparator({
@@ -180,10 +191,10 @@ function MenubarSeparator({
   return (
     <DropdownMenuSeparator
       data-slot="menubar-separator"
-      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      className={cn('bg-border -mx-1 my-1 h-px', className)}
       {...props}
     />
-  )
+  );
 }
 
 function MenubarShortcut({
@@ -193,16 +204,19 @@ function MenubarShortcut({
   return (
     <DropdownMenuShortcut
       data-slot="menubar-shortcut"
-      className={cn("text-muted-foreground group-focus/menubar-item:text-accent-foreground text-xs tracking-widest ml-auto", className)}
+      className={cn(
+        'text-muted-foreground group-focus/menubar-item:text-accent-foreground text-xs tracking-widest ml-auto',
+        className,
+      )}
       {...props}
     />
-  )
+  );
 }
 
 function MenubarSub({
   ...props
 }: React.ComponentProps<typeof DropdownMenuSub>) {
-  return <DropdownMenuSub data-slot="menubar-sub" {...props} />
+  return <DropdownMenuSub data-slot="menubar-sub" {...props} />;
 }
 
 function MenubarSubTrigger({
@@ -210,16 +224,19 @@ function MenubarSubTrigger({
   inset,
   ...props
 }: React.ComponentProps<typeof DropdownMenuSubTrigger> & {
-  inset?: boolean
+  inset?: boolean;
 }) {
   return (
     <DropdownMenuSubTrigger
       data-slot="menubar-sub-trigger"
       data-inset={inset}
-      className={cn("focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4", className)}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
       {...props}
     />
-  )
+  );
 }
 
 function MenubarSubContent({
@@ -229,10 +246,13 @@ function MenubarSubContent({
   return (
     <DropdownMenuSubContent
       data-slot="menubar-sub-content"
-      className={cn("bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-lg p-1 shadow-lg ring-1 duration-100", className)}
+      className={cn(
+        'bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-lg p-1 shadow-lg ring-1 duration-100',
+        className,
+      )}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -252,4 +272,4 @@ export {
   MenubarSub,
   MenubarSubTrigger,
   MenubarSubContent,
-}
+};
diff --git a/packages/ui/primitives/navigation-menu.tsx b/packages/ui/primitives/navigation-menu.tsx
index daa6202..11f3a3d 100644
--- a/packages/ui/primitives/navigation-menu.tsx
+++ b/packages/ui/primitives/navigation-menu.tsx
@@ -1,8 +1,8 @@
-import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu"
-import { cva } from "class-variance-authority"
+import { NavigationMenu as NavigationMenuPrimitive } from '@base-ui/react/navigation-menu';
+import { IconChevronDown } from '@tabler/icons-react';
+import { cva } from 'class-variance-authority';
 
-import { cn } from "@formbase/ui/utils/cn"
-import { IconChevronDown } from "@tabler/icons-react"
+import { cn } from '@formbase/ui/utils/cn';
 
 function NavigationMenu({
   className,
@@ -13,15 +13,15 @@ function NavigationMenu({
     <NavigationMenuPrimitive.Root
       data-slot="navigation-menu"
       className={cn(
-        "max-w-max group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
-        className
+        'max-w-max group/navigation-menu relative flex max-w-max flex-1 items-center justify-center',
+        className,
       )}
       {...props}
     >
       {children}
       <NavigationMenuPositioner />
     </NavigationMenuPrimitive.Root>
-  )
+  );
 }
 
 function NavigationMenuList({
@@ -32,12 +32,12 @@ function NavigationMenuList({
     <NavigationMenuPrimitive.List
       data-slot="navigation-menu-list"
       className={cn(
-        "gap-0 group flex flex-1 list-none items-center justify-center",
-        className
+        'gap-0 group flex flex-1 list-none items-center justify-center',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function NavigationMenuItem({
@@ -47,15 +47,15 @@ function NavigationMenuItem({
   return (
     <NavigationMenuPrimitive.Item
       data-slot="navigation-menu-item"
-      className={cn("relative", className)}
+      className={cn('relative', className)}
       {...props}
     />
-  )
+  );
 }
 
 const navigationMenuTriggerStyle = cva(
-  "bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all focus-visible:ring-[3px] focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-hidden"
-)
+  'bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all focus-visible:ring-[3px] focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-hidden',
+);
 
 function NavigationMenuTrigger({
   className,
@@ -65,13 +65,16 @@ function NavigationMenuTrigger({
   return (
     <NavigationMenuPrimitive.Trigger
       data-slot="navigation-menu-trigger"
-      className={cn(navigationMenuTriggerStyle(), "group", className)}
+      className={cn(navigationMenuTriggerStyle(), 'group', className)}
       {...props}
     >
-      {children}{" "}
-      <IconChevronDown className="relative top-px ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180" aria-hidden="true" />
+      {children}{' '}
+      <IconChevronDown
+        className="relative top-px ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180"
+        aria-hidden="true"
+      />
     </NavigationMenuPrimitive.Trigger>
-  )
+  );
 }
 
 function NavigationMenuContent({
@@ -82,19 +85,19 @@ function NavigationMenuContent({
     <NavigationMenuPrimitive.Content
       data-slot="navigation-menu-content"
       className={cn(
-        "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground data-open:group-data-[viewport=false]/navigation-menu:animate-in data-closed:group-data-[viewport=false]/navigation-menu:animate-out data-closed:group-data-[viewport=false]/navigation-menu:zoom-out-95 data-open:group-data-[viewport=false]/navigation-menu:zoom-in-95 data-open:group-data-[viewport=false]/navigation-menu:fade-in-0 data-closed:group-data-[viewport=false]/navigation-menu:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 p-1 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:shadow-sm group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 h-full w-auto focus:data-[slot=navigation-menu-link]:**:ring-0 focus:data-[slot=navigation-menu-link]:**:outline-hidden",
-        className
+        'data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground data-open:group-data-[viewport=false]/navigation-menu:animate-in data-closed:group-data-[viewport=false]/navigation-menu:animate-out data-closed:group-data-[viewport=false]/navigation-menu:zoom-out-95 data-open:group-data-[viewport=false]/navigation-menu:zoom-in-95 data-open:group-data-[viewport=false]/navigation-menu:fade-in-0 data-closed:group-data-[viewport=false]/navigation-menu:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 p-1 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:shadow-sm group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 h-full w-auto focus:data-[slot=navigation-menu-link]:**:ring-0 focus:data-[slot=navigation-menu-link]:**:outline-hidden',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function NavigationMenuPositioner({
   className,
-  side = "bottom",
+  side = 'bottom',
   sideOffset = 8,
-  align = "start",
+  align = 'start',
   alignOffset = 0,
   ...props
 }: NavigationMenuPrimitive.Positioner.Props) {
@@ -106,8 +109,8 @@ function NavigationMenuPositioner({
         align={align}
         alignOffset={alignOffset}
         className={cn(
-          "transition-[top,left,right,bottom] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) data-instant:transition-none",
-          className
+          'transition-[top,left,right,bottom] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) data-instant:transition-none',
+          className,
         )}
         {...props}
       >
@@ -116,7 +119,7 @@ function NavigationMenuPositioner({
         </NavigationMenuPrimitive.Popup>
       </NavigationMenuPrimitive.Positioner>
     </NavigationMenuPrimitive.Portal>
-  )
+  );
 }
 
 function NavigationMenuLink({
@@ -126,10 +129,13 @@ function NavigationMenuLink({
   return (
     <NavigationMenuPrimitive.Link
       data-slot="navigation-menu-link"
-      className={cn("data-active:focus:bg-muted data-active:hover:bg-muted data-active:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-hidden focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4 in-data-[slot=navigation-menu-content]:rounded-md", className)}
+      className={cn(
+        "data-active:focus:bg-muted data-active:hover:bg-muted data-active:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-hidden focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4 in-data-[slot=navigation-menu-content]:rounded-md",
+        className,
+      )}
       {...props}
     />
-  )
+  );
 }
 
 function NavigationMenuIndicator({
@@ -140,14 +146,14 @@ function NavigationMenuIndicator({
     <NavigationMenuPrimitive.Icon
       data-slot="navigation-menu-indicator"
       className={cn(
-        "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-1 flex h-1.5 items-end justify-center overflow-hidden",
-        className
+        'data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-1 flex h-1.5 items-end justify-center overflow-hidden',
+        className,
       )}
       {...props}
     >
       <div className="bg-border rounded-tl-sm shadow-md relative top-[60%] h-2 w-2 rotate-45" />
     </NavigationMenuPrimitive.Icon>
-  )
+  );
 }
 
 export {
@@ -160,4 +166,4 @@ export {
   NavigationMenuTrigger,
   navigationMenuTriggerStyle,
   NavigationMenuPositioner,
-}
+};
diff --git a/packages/ui/primitives/pagination.tsx b/packages/ui/primitives/pagination.tsx
index fc16f81..3942da1 100644
--- a/packages/ui/primitives/pagination.tsx
+++ b/packages/ui/primitives/pagination.tsx
@@ -1,68 +1,70 @@
-import * as React from "react"
+import * as React from 'react';
 
-import { cn } from "@formbase/ui/utils/cn"
-import { Button } from "@formbase/ui/primitives/button"
-import { IconChevronLeft, IconChevronRight, IconDots } from "@tabler/icons-react"
+import {
+  IconChevronLeft,
+  IconChevronRight,
+  IconDots,
+} from '@tabler/icons-react';
 
-function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
+import { Button } from '@formbase/ui/primitives/button';
+import { cn } from '@formbase/ui/utils/cn';
+
+function Pagination({ className, ...props }: React.ComponentProps<'nav'>) {
   return (
     <nav
       role="navigation"
       aria-label="pagination"
       data-slot="pagination"
-      className={cn(
-        "mx-auto flex w-full justify-center",
-        className
-      )}
+      className={cn('mx-auto flex w-full justify-center', className)}
       {...props}
     />
-  )
+  );
 }
 
 function PaginationContent({
   className,
   ...props
-}: React.ComponentProps<"ul">) {
+}: React.ComponentProps<'ul'>) {
   return (
     <ul
       data-slot="pagination-content"
-      className={cn("gap-0.5 flex items-center", className)}
+      className={cn('gap-0.5 flex items-center', className)}
       {...props}
     />
-  )
+  );
 }
 
-function PaginationItem({ ...props }: React.ComponentProps<"li">) {
-  return <li data-slot="pagination-item" {...props} />
+function PaginationItem({ ...props }: React.ComponentProps<'li'>) {
+  return <li data-slot="pagination-item" {...props} />;
 }
 
 type PaginationLinkProps = {
-  isActive?: boolean
-} & Pick<React.ComponentProps<typeof Button>, "size"> &
-  React.ComponentProps<"a">
+  isActive?: boolean;
+} & Pick<React.ComponentProps<typeof Button>, 'size'> &
+  React.ComponentProps<'a'>;
 
 function PaginationLink({
   className,
   isActive,
-  size = "icon",
+  size = 'icon',
   ...props
 }: PaginationLinkProps) {
   return (
     <Button
-      variant={isActive ? "outline-solid" : "ghost"}
+      variant={isActive ? 'outline-solid' : 'ghost'}
       size={size}
       className={cn(className)}
       nativeButton={false}
       render={
         <a
-          aria-current={isActive ? "page" : undefined}
+          aria-current={isActive ? 'page' : undefined}
           data-slot="pagination-link"
           data-active={isActive}
           {...props}
         />
       }
     />
-  )
+  );
 }
 
 function PaginationPrevious({
@@ -73,15 +75,13 @@ function PaginationPrevious({
     <PaginationLink
       aria-label="Go to previous page"
       size="default"
-      className={cn("pl-1.5!", className)}
+      className={cn('pl-1.5!', className)}
       {...props}
     >
       <IconChevronLeft data-icon="inline-start" />
-      <span className="hidden sm:block">
-        Previous
-      </span>
+      <span className="hidden sm:block">Previous</span>
     </PaginationLink>
-  )
+  );
 }
 
 function PaginationNext({
@@ -92,34 +92,33 @@ function PaginationNext({
     <PaginationLink
       aria-label="Go to next page"
       size="default"
-      className={cn("pr-1.5!", className)}
+      className={cn('pr-1.5!', className)}
       {...props}
     >
       <span className="hidden sm:block">Next</span>
       <IconChevronRight data-icon="inline-end" />
     </PaginationLink>
-  )
+  );
 }
 
 function PaginationEllipsis({
   className,
   ...props
-}: React.ComponentProps<"span">) {
+}: React.ComponentProps<'span'>) {
   return (
     <span
       aria-hidden
       data-slot="pagination-ellipsis"
       className={cn(
         "size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4 flex items-center justify-center",
-        className
+        className,
       )}
       {...props}
     >
-      <IconDots
-      />
+      <IconDots />
       <span className="sr-only">More pages</span>
     </span>
-  )
+  );
 }
 
 export {
@@ -130,4 +129,4 @@ export {
   PaginationLink,
   PaginationNext,
   PaginationPrevious,
-}
+};
diff --git a/packages/ui/primitives/popover.tsx b/packages/ui/primitives/popover.tsx
index 6abcbdf..55be456 100644
--- a/packages/ui/primitives/popover.tsx
+++ b/packages/ui/primitives/popover.tsx
@@ -1,17 +1,18 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import { Popover as PopoverPrimitive } from "@base-ui/react/popover"
+import * as React from 'react';
 
-import { cn } from "@formbase/ui/utils/cn"
+import { Popover as PopoverPrimitive } from '@base-ui/react/popover';
+
+import { cn } from '@formbase/ui/utils/cn';
 
 function Popover({ ...props }: PopoverPrimitive.Root.Props) {
-  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
 }
 
 type PopoverTriggerProps = PopoverPrimitive.Trigger.Props & {
-  asChild?: boolean
-}
+  asChild?: boolean;
+};
 
 function PopoverTrigger({
   asChild = false,
@@ -19,7 +20,7 @@ function PopoverTrigger({
   ...props
 }: PopoverTriggerProps) {
   const renderProp =
-    asChild && React.isValidElement(children) ? children : undefined
+    asChild && React.isValidElement(children) ? children : undefined;
 
   return (
     <PopoverPrimitive.Trigger
@@ -29,20 +30,20 @@ function PopoverTrigger({
     >
       {asChild ? undefined : children}
     </PopoverPrimitive.Trigger>
-  )
+  );
 }
 
 function PopoverContent({
   className,
-  align = "center",
+  align = 'center',
   alignOffset = 0,
-  side = "bottom",
+  side = 'bottom',
   sideOffset = 4,
   ...props
 }: PopoverPrimitive.Popup.Props &
   Pick<
     PopoverPrimitive.Positioner.Props,
-    "align" | "alignOffset" | "side" | "sideOffset"
+    'align' | 'alignOffset' | 'side' | 'sideOffset'
   >) {
   return (
     <PopoverPrimitive.Portal>
@@ -56,34 +57,34 @@ function PopoverContent({
         <PopoverPrimitive.Popup
           data-slot="popover-content"
           className={cn(
-            "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 flex flex-col gap-2.5 rounded-lg p-2.5 text-sm shadow-md ring-1 duration-100 z-50 w-72 origin-(--transform-origin) outline-hidden",
-            className
+            'bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 flex flex-col gap-2.5 rounded-lg p-2.5 text-sm shadow-md ring-1 duration-100 z-50 w-72 origin-(--transform-origin) outline-hidden',
+            className,
           )}
           {...props}
         />
       </PopoverPrimitive.Positioner>
     </PopoverPrimitive.Portal>
-  )
+  );
 }
 
-function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
+function PopoverHeader({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="popover-header"
-      className={cn("flex flex-col gap-0.5 text-sm", className)}
+      className={cn('flex flex-col gap-0.5 text-sm', className)}
       {...props}
     />
-  )
+  );
 }
 
 function PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {
   return (
     <PopoverPrimitive.Title
       data-slot="popover-title"
-      className={cn("font-medium", className)}
+      className={cn('font-medium', className)}
       {...props}
     />
-  )
+  );
 }
 
 function PopoverDescription({
@@ -93,10 +94,10 @@ function PopoverDescription({
   return (
     <PopoverPrimitive.Description
       data-slot="popover-description"
-      className={cn("text-muted-foreground", className)}
+      className={cn('text-muted-foreground', className)}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -106,4 +107,4 @@ export {
   PopoverHeader,
   PopoverTitle,
   PopoverTrigger,
-}
+};
diff --git a/packages/ui/primitives/progress.tsx b/packages/ui/primitives/progress.tsx
index a3b5d6c..893f506 100644
--- a/packages/ui/primitives/progress.tsx
+++ b/packages/ui/primitives/progress.tsx
@@ -1,8 +1,8 @@
-"use client"
+'use client';
 
-import { Progress as ProgressPrimitive } from "@base-ui/react/progress"
+import { Progress as ProgressPrimitive } from '@base-ui/react/progress';
 
-import { cn } from "@formbase/ui/utils/cn"
+import { cn } from '@formbase/ui/utils/cn';
 
 function Progress({
   className,
@@ -14,7 +14,7 @@ function Progress({
     <ProgressPrimitive.Root
       value={value}
       data-slot="progress"
-      className={cn("flex flex-wrap gap-3", className)}
+      className={cn('flex flex-wrap gap-3', className)}
       {...props}
     >
       {children}
@@ -22,20 +22,20 @@ function Progress({
         <ProgressIndicator />
       </ProgressTrack>
     </ProgressPrimitive.Root>
-  )
+  );
 }
 
 function ProgressTrack({ className, ...props }: ProgressPrimitive.Track.Props) {
   return (
     <ProgressPrimitive.Track
       className={cn(
-        "bg-muted h-1 rounded-full relative flex w-full items-center overflow-x-hidden",
-        className
+        'bg-muted h-1 rounded-full relative flex w-full items-center overflow-x-hidden',
+        className,
       )}
       data-slot="progress-track"
       {...props}
     />
-  )
+  );
 }
 
 function ProgressIndicator({
@@ -45,30 +45,33 @@ function ProgressIndicator({
   return (
     <ProgressPrimitive.Indicator
       data-slot="progress-indicator"
-      className={cn("bg-primary h-full transition-all", className)}
+      className={cn('bg-primary h-full transition-all', className)}
       {...props}
     />
-  )
+  );
 }
 
 function ProgressLabel({ className, ...props }: ProgressPrimitive.Label.Props) {
   return (
     <ProgressPrimitive.Label
-      className={cn("text-sm font-medium", className)}
+      className={cn('text-sm font-medium', className)}
       data-slot="progress-label"
       {...props}
     />
-  )
+  );
 }
 
 function ProgressValue({ className, ...props }: ProgressPrimitive.Value.Props) {
   return (
     <ProgressPrimitive.Value
-      className={cn("text-muted-foreground ml-auto text-sm tabular-nums", className)}
+      className={cn(
+        'text-muted-foreground ml-auto text-sm tabular-nums',
+        className,
+      )}
       data-slot="progress-value"
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -77,4 +80,4 @@ export {
   ProgressIndicator,
   ProgressLabel,
   ProgressValue,
-}
+};
diff --git a/packages/ui/primitives/radio-group.tsx b/packages/ui/primitives/radio-group.tsx
index b2cac97..befd840 100644
--- a/packages/ui/primitives/radio-group.tsx
+++ b/packages/ui/primitives/radio-group.tsx
@@ -1,19 +1,19 @@
-"use client"
+'use client';
 
-import { Radio as RadioPrimitive } from "@base-ui/react/radio"
-import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group"
+import { Radio as RadioPrimitive } from '@base-ui/react/radio';
+import { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group';
+import { IconCircle } from '@tabler/icons-react';
 
-import { cn } from "@formbase/ui/utils/cn"
-import { IconCircle } from "@tabler/icons-react"
+import { cn } from '@formbase/ui/utils/cn';
 
 function RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {
   return (
     <RadioGroupPrimitive
       data-slot="radio-group"
-      className={cn("grid gap-2 w-full", className)}
+      className={cn('grid gap-2 w-full', className)}
       {...props}
     />
-  )
+  );
 }
 
 function RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {
@@ -21,8 +21,8 @@ function RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {
     <RadioPrimitive.Root
       data-slot="radio-group-item"
       className={cn(
-        "border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex size-4 rounded-full focus-visible:ring-[3px] aria-invalid:ring-[3px] group/radio-group-item peer relative aspect-square shrink-0 border outline-hidden after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50",
-        className
+        'border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex size-4 rounded-full focus-visible:ring-[3px] aria-invalid:ring-[3px] group/radio-group-item peer relative aspect-square shrink-0 border outline-hidden after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50',
+        className,
       )}
       {...props}
     >
@@ -33,7 +33,7 @@ function RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {
         <IconCircle className="absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current" />
       </RadioPrimitive.Indicator>
     </RadioPrimitive.Root>
-  )
+  );
 }
 
-export { RadioGroup, RadioGroupItem }
+export { RadioGroup, RadioGroupItem };
diff --git a/packages/ui/primitives/resizable.tsx b/packages/ui/primitives/resizable.tsx
index e39b007..84059d2 100644
--- a/packages/ui/primitives/resizable.tsx
+++ b/packages/ui/primitives/resizable.tsx
@@ -1,9 +1,10 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import * as ResizablePrimitive from "react-resizable-panels"
+import * as React from 'react';
 
-import { cn } from "@formbase/ui/utils/cn"
+import * as ResizablePrimitive from 'react-resizable-panels';
+
+import { cn } from '@formbase/ui/utils/cn';
 
 function ResizablePanelGroup({
   className,
@@ -13,18 +14,18 @@ function ResizablePanelGroup({
     <ResizablePrimitive.PanelGroup
       data-slot="resizable-panel-group"
       className={cn(
-        "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
-        className
+        'flex h-full w-full data-[panel-group-direction=vertical]:flex-col',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function ResizablePanel({
   ...props
 }: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
-  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
+  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />;
 }
 
 function ResizableHandle({
@@ -32,14 +33,14 @@ function ResizableHandle({
   className,
   ...props
 }: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
-  withHandle?: boolean
+  withHandle?: boolean;
 }) {
   return (
     <ResizablePrimitive.PanelResizeHandle
       data-slot="resizable-handle"
       className={cn(
-        "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90",
-        className
+        'bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90',
+        className,
       )}
       {...props}
     >
@@ -47,7 +48,7 @@ function ResizableHandle({
         <div className="bg-border h-6 w-1 rounded-lg z-10 flex shrink-0" />
       )}
     </ResizablePrimitive.PanelResizeHandle>
-  )
+  );
 }
 
-export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle };
diff --git a/packages/ui/primitives/scroll-area.tsx b/packages/ui/primitives/scroll-area.tsx
index baa7a7e..0765974 100644
--- a/packages/ui/primitives/scroll-area.tsx
+++ b/packages/ui/primitives/scroll-area.tsx
@@ -1,9 +1,10 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area"
+import * as React from 'react';
 
-import { cn } from "@formbase/ui/utils/cn"
+import { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area';
+
+import { cn } from '@formbase/ui/utils/cn';
 
 function ScrollArea({
   className,
@@ -13,7 +14,7 @@ function ScrollArea({
   return (
     <ScrollAreaPrimitive.Root
       data-slot="scroll-area"
-      className={cn("relative", className)}
+      className={cn('relative', className)}
       {...props}
     >
       <ScrollAreaPrimitive.Viewport
@@ -25,12 +26,12 @@ function ScrollArea({
       <ScrollBar />
       <ScrollAreaPrimitive.Corner />
     </ScrollAreaPrimitive.Root>
-  )
+  );
 }
 
 function ScrollBar({
   className,
-  orientation = "vertical",
+  orientation = 'vertical',
   ...props
 }: ScrollAreaPrimitive.Scrollbar.Props) {
   return (
@@ -39,8 +40,8 @@ function ScrollBar({
       data-orientation={orientation}
       orientation={orientation}
       className={cn(
-        "data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent flex touch-none p-px transition-colors select-none",
-        className
+        'data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent flex touch-none p-px transition-colors select-none',
+        className,
       )}
       {...props}
     >
@@ -49,7 +50,7 @@ function ScrollBar({
         className="rounded-full bg-border relative flex-1"
       />
     </ScrollAreaPrimitive.Scrollbar>
-  )
+  );
 }
 
-export { ScrollArea, ScrollBar }
+export { ScrollArea, ScrollBar };
diff --git a/packages/ui/primitives/select.tsx b/packages/ui/primitives/select.tsx
index 779d982..4a3e205 100644
--- a/packages/ui/primitives/select.tsx
+++ b/packages/ui/primitives/select.tsx
@@ -1,40 +1,46 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import { Select as SelectPrimitive } from "@base-ui/react/select"
+import * as React from 'react';
 
-import { cn } from "@formbase/ui/utils/cn"
-import { IconSelector, IconCheck, IconChevronUp, IconChevronDown } from "@tabler/icons-react"
+import { Select as SelectPrimitive } from '@base-ui/react/select';
+import {
+  IconCheck,
+  IconChevronDown,
+  IconChevronUp,
+  IconSelector,
+} from '@tabler/icons-react';
 
-const Select = SelectPrimitive.Root
+import { cn } from '@formbase/ui/utils/cn';
+
+const Select = SelectPrimitive.Root;
 
 function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {
   return (
     <SelectPrimitive.Group
       data-slot="select-group"
-      className={cn("scroll-my-1 p-1", className)}
+      className={cn('scroll-my-1 p-1', className)}
       {...props}
     />
-  )
+  );
 }
 
 function SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {
   return (
     <SelectPrimitive.Value
       data-slot="select-value"
-      className={cn("flex flex-1 text-left", className)}
+      className={cn('flex flex-1 text-left', className)}
       {...props}
     />
-  )
+  );
 }
 
 function SelectTrigger({
   className,
-  size = "default",
+  size = 'default',
   children,
   ...props
 }: SelectPrimitive.Trigger.Props & {
-  size?: "sm" | "default"
+  size?: 'sm' | 'default';
 }) {
   return (
     <SelectPrimitive.Trigger
@@ -42,7 +48,7 @@ function SelectTrigger({
       data-size={size}
       className={cn(
         "border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[slot=select-value]:*:flex data-[slot=select-value]:*:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-hidden disabled:cursor-not-allowed disabled:opacity-50 data-[slot=select-value]:*:line-clamp-1 data-[slot=select-value]:*:flex data-[slot=select-value]:*:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        className
+        className,
       )}
       {...props}
     >
@@ -53,22 +59,22 @@ function SelectTrigger({
         }
       />
     </SelectPrimitive.Trigger>
-  )
+  );
 }
 
 function SelectContent({
   className,
   children,
-  side = "bottom",
+  side = 'bottom',
   sideOffset = 4,
-  align = "center",
+  align = 'center',
   alignOffset = 0,
   alignItemWithTrigger = true,
   ...props
 }: SelectPrimitive.Popup.Props &
   Pick<
     SelectPrimitive.Positioner.Props,
-    "align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger"
+    'align' | 'alignOffset' | 'side' | 'sideOffset' | 'alignItemWithTrigger'
   >) {
   return (
     <SelectPrimitive.Portal>
@@ -82,7 +88,10 @@ function SelectContent({
       >
         <SelectPrimitive.Popup
           data-slot="select-content"
-          className={cn("bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-lg shadow-md ring-1 duration-100 relative isolate z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto", className )}
+          className={cn(
+            'bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-lg shadow-md ring-1 duration-100 relative isolate z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto',
+            className,
+          )}
           {...props}
         >
           <SelectScrollUpButton />
@@ -91,7 +100,7 @@ function SelectContent({
         </SelectPrimitive.Popup>
       </SelectPrimitive.Positioner>
     </SelectPrimitive.Portal>
-  )
+  );
 }
 
 function SelectLabel({
@@ -101,10 +110,10 @@ function SelectLabel({
   return (
     <SelectPrimitive.GroupLabel
       data-slot="select-label"
-      className={cn("text-muted-foreground px-1.5 py-1 text-xs", className)}
+      className={cn('text-muted-foreground px-1.5 py-1 text-xs', className)}
       {...props}
     />
-  )
+  );
 }
 
 function SelectItem({
@@ -117,7 +126,7 @@ function SelectItem({
       data-slot="select-item"
       className={cn(
         "focus:bg-accent focus:text-accent-foreground **:focus:not-data-[variant=destructive]:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 last:[span]:*:flex last:[span]:*:items-center last:[span]:*:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        className
+        className,
       )}
       {...props}
     >
@@ -125,12 +134,14 @@ function SelectItem({
         {children}
       </SelectPrimitive.ItemText>
       <SelectPrimitive.ItemIndicator
-        render={<span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />}
+        render={
+          <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
+        }
       >
         <IconCheck className="pointer-events-none" />
       </SelectPrimitive.ItemIndicator>
     </SelectPrimitive.Item>
-  )
+  );
 }
 
 function SelectSeparator({
@@ -140,10 +151,10 @@ function SelectSeparator({
   return (
     <SelectPrimitive.Separator
       data-slot="select-separator"
-      className={cn("bg-border -mx-1 my-1 h-px pointer-events-none", className)}
+      className={cn('bg-border -mx-1 my-1 h-px pointer-events-none', className)}
       {...props}
     />
-  )
+  );
 }
 
 function SelectScrollUpButton({
@@ -153,13 +164,15 @@ function SelectScrollUpButton({
   return (
     <SelectPrimitive.ScrollUpArrow
       data-slot="select-scroll-up-button"
-      className={cn("bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 top-0 w-full", className)}
+      className={cn(
+        "bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 top-0 w-full",
+        className,
+      )}
       {...props}
     >
-      <IconChevronUp
-      />
+      <IconChevronUp />
     </SelectPrimitive.ScrollUpArrow>
-  )
+  );
 }
 
 function SelectScrollDownButton({
@@ -169,13 +182,15 @@ function SelectScrollDownButton({
   return (
     <SelectPrimitive.ScrollDownArrow
       data-slot="select-scroll-down-button"
-      className={cn("bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 bottom-0 w-full", className)}
+      className={cn(
+        "bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 bottom-0 w-full",
+        className,
+      )}
       {...props}
     >
-      <IconChevronDown
-      />
+      <IconChevronDown />
     </SelectPrimitive.ScrollDownArrow>
-  )
+  );
 }
 
 export {
@@ -189,4 +204,4 @@ export {
   SelectSeparator,
   SelectTrigger,
   SelectValue,
-}
+};
diff --git a/packages/ui/primitives/separator.tsx b/packages/ui/primitives/separator.tsx
index ef27265..b66b821 100644
--- a/packages/ui/primitives/separator.tsx
+++ b/packages/ui/primitives/separator.tsx
@@ -1,12 +1,12 @@
-"use client"
+'use client';
 
-import { Separator as SeparatorPrimitive } from "@base-ui/react/separator"
+import { Separator as SeparatorPrimitive } from '@base-ui/react/separator';
 
-import { cn } from "@formbase/ui/utils/cn"
+import { cn } from '@formbase/ui/utils/cn';
 
 function Separator({
   className,
-  orientation = "horizontal",
+  orientation = 'horizontal',
   ...props
 }: SeparatorPrimitive.Props) {
   return (
@@ -14,12 +14,12 @@ function Separator({
       data-slot="separator"
       orientation={orientation}
       className={cn(
-        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch",
-        className
+        'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-export { Separator }
+export { Separator };
diff --git a/packages/ui/primitives/sheet.tsx b/packages/ui/primitives/sheet.tsx
index 1e8da60..4b2c745 100644
--- a/packages/ui/primitives/sheet.tsx
+++ b/packages/ui/primitives/sheet.tsx
@@ -1,47 +1,51 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import { Dialog as SheetPrimitive } from "@base-ui/react/dialog"
+import * as React from 'react';
 
-import { cn } from "@formbase/ui/utils/cn"
-import { Button } from "@formbase/ui/primitives/button"
-import { IconX } from "@tabler/icons-react"
+import { Dialog as SheetPrimitive } from '@base-ui/react/dialog';
+import { IconX } from '@tabler/icons-react';
+
+import { Button } from '@formbase/ui/primitives/button';
+import { cn } from '@formbase/ui/utils/cn';
 
 function Sheet({ ...props }: SheetPrimitive.Root.Props) {
-  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />;
 }
 
 function SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {
-  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
 }
 
 function SheetClose({ ...props }: SheetPrimitive.Close.Props) {
-  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
 }
 
 function SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {
-  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
 }
 
 function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {
   return (
     <SheetPrimitive.Backdrop
       data-slot="sheet-overlay"
-      className={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50", className)}
+      className={cn(
+        'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50',
+        className,
+      )}
       {...props}
     />
-  )
+  );
 }
 
 function SheetContent({
   className,
   children,
-  side = "right",
+  side = 'right',
   showCloseButton = true,
   ...props
 }: SheetPrimitive.Popup.Props & {
-  side?: "top" | "right" | "bottom" | "left"
-  showCloseButton?: boolean
+  side?: 'top' | 'right' | 'bottom' | 'left';
+  showCloseButton?: boolean;
 }) {
   return (
     <SheetPortal>
@@ -49,7 +53,10 @@ function SheetContent({
       <SheetPrimitive.Popup
         data-slot="sheet-content"
         data-side={side}
-        className={cn("bg-background data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b sm:data-[side=left]:max-w-sm sm:data-[side=right]:max-w-sm", className)}
+        className={cn(
+          'bg-background data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b sm:data-[side=left]:max-w-sm sm:data-[side=right]:max-w-sm',
+          className,
+        )}
         {...props}
       >
         {children}
@@ -64,44 +71,43 @@ function SheetContent({
               />
             }
           >
-            <IconX
-            />
+            <IconX />
             <span className="sr-only">Close</span>
           </SheetPrimitive.Close>
         )}
       </SheetPrimitive.Popup>
     </SheetPortal>
-  )
+  );
 }
 
-function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="sheet-header"
-      className={cn("gap-0.5 p-4 flex flex-col", className)}
+      className={cn('gap-0.5 p-4 flex flex-col', className)}
       {...props}
     />
-  )
+  );
 }
 
-function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="sheet-footer"
-      className={cn("gap-2 p-4 mt-auto flex flex-col", className)}
+      className={cn('gap-2 p-4 mt-auto flex flex-col', className)}
       {...props}
     />
-  )
+  );
 }
 
 function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {
   return (
     <SheetPrimitive.Title
       data-slot="sheet-title"
-      className={cn("text-foreground text-base font-medium", className)}
+      className={cn('text-foreground text-base font-medium', className)}
       {...props}
     />
-  )
+  );
 }
 
 function SheetDescription({
@@ -111,10 +117,10 @@ function SheetDescription({
   return (
     <SheetPrimitive.Description
       data-slot="sheet-description"
-      className={cn("text-muted-foreground text-sm", className)}
+      className={cn('text-muted-foreground text-sm', className)}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -126,4 +132,4 @@ export {
   SheetFooter,
   SheetTitle,
   SheetDescription,
-}
+};
diff --git a/packages/ui/primitives/sidebar.tsx b/packages/ui/primitives/sidebar.tsx
index c833ee2..8188b00 100644
--- a/packages/ui/primitives/sidebar.tsx
+++ b/packages/ui/primitives/sidebar.tsx
@@ -1,56 +1,59 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import { mergeProps } from "@base-ui/react/merge-props"
-import { useRender } from "@base-ui/react/use-render"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from 'react';
 
-import { cn } from "@formbase/ui/utils/cn"
-import { Button } from "@formbase/ui/primitives/button"
-import { Input } from "@formbase/ui/primitives/input"
-import { Separator } from "@formbase/ui/primitives/separator"
+import type { VariantProps } from 'class-variance-authority';
+
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
+import { IconLayoutSidebar } from '@tabler/icons-react';
+import { cva } from 'class-variance-authority';
+
+import { useIsMobile } from '@formbase/ui/hooks/use-mobile';
+import { Button } from '@formbase/ui/primitives/button';
+import { Input } from '@formbase/ui/primitives/input';
+import { Separator } from '@formbase/ui/primitives/separator';
 import {
   Sheet,
   SheetContent,
   SheetDescription,
   SheetHeader,
   SheetTitle,
-} from "@formbase/ui/primitives/sheet"
-import { Skeleton } from "@formbase/ui/primitives/skeleton"
+} from '@formbase/ui/primitives/sheet';
+import { Skeleton } from '@formbase/ui/primitives/skeleton';
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from "@formbase/ui/primitives/tooltip"
-import { useIsMobile } from "@formbase/ui/hooks/use-mobile"
-import { IconLayoutSidebar } from "@tabler/icons-react"
+} from '@formbase/ui/primitives/tooltip';
+import { cn } from '@formbase/ui/utils/cn';
 
-const SIDEBAR_COOKIE_NAME = "sidebar_state"
-const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
-const SIDEBAR_WIDTH = "16rem"
-const SIDEBAR_WIDTH_MOBILE = "18rem"
-const SIDEBAR_WIDTH_ICON = "3rem"
-const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+const SIDEBAR_COOKIE_NAME = 'sidebar_state';
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const SIDEBAR_WIDTH = '16rem';
+const SIDEBAR_WIDTH_MOBILE = '18rem';
+const SIDEBAR_WIDTH_ICON = '3rem';
+const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
 
 type SidebarContextProps = {
-  state: "expanded" | "collapsed"
-  open: boolean
-  setOpen: (open: boolean) => void
-  openMobile: boolean
-  setOpenMobile: (open: boolean) => void
-  isMobile: boolean
-  toggleSidebar: () => void
-}
+  state: 'expanded' | 'collapsed';
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  openMobile: boolean;
+  setOpenMobile: (open: boolean) => void;
+  isMobile: boolean;
+  toggleSidebar: () => void;
+};
 
-const SidebarContext = React.createContext<SidebarContextProps | null>(null)
+const SidebarContext = React.createContext<SidebarContextProps | null>(null);
 
 function useSidebar() {
-  const context = React.useContext(SidebarContext)
+  const context = React.useContext(SidebarContext);
   if (!context) {
-    throw new Error("useSidebar must be used within a SidebarProvider.")
+    throw new Error('useSidebar must be used within a SidebarProvider.');
   }
 
-  return context
+  return context;
 }
 
 function SidebarProvider({
@@ -61,37 +64,37 @@ function SidebarProvider({
   style,
   children,
   ...props
-}: React.ComponentProps<"div"> & {
-  defaultOpen?: boolean
-  open?: boolean
-  onOpenChange?: (open: boolean) => void
+}: React.ComponentProps<'div'> & {
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
 }) {
-  const isMobile = useIsMobile()
-  const [openMobile, setOpenMobile] = React.useState(false)
+  const isMobile = useIsMobile();
+  const [openMobile, setOpenMobile] = React.useState(false);
 
   // This is the internal state of the sidebar.
   // We use openProp and setOpenProp for control from outside the component.
-  const [_open, _setOpen] = React.useState(defaultOpen)
-  const open = openProp ?? _open
+  const [_open, _setOpen] = React.useState(defaultOpen);
+  const open = openProp ?? _open;
   const setOpen = React.useCallback(
     (value: boolean | ((value: boolean) => boolean)) => {
-      const openState = typeof value === "function" ? value(open) : value
+      const openState = typeof value === 'function' ? value(open) : value;
       if (setOpenProp) {
-        setOpenProp(openState)
+        setOpenProp(openState);
       } else {
-        _setOpen(openState)
+        _setOpen(openState);
       }
 
       // This sets the cookie to keep the sidebar state.
-      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
     },
-    [setOpenProp, open]
-  )
+    [setOpenProp, open],
+  );
 
   // Helper to toggle the sidebar.
   const toggleSidebar = React.useCallback(() => {
-    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
-  }, [isMobile, setOpen, setOpenMobile])
+    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
+  }, [isMobile, setOpen, setOpenMobile]);
 
   // Adds a keyboard shortcut to toggle the sidebar.
   React.useEffect(() => {
@@ -100,18 +103,18 @@ function SidebarProvider({
         event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
         (event.metaKey || event.ctrlKey)
       ) {
-        event.preventDefault()
-        toggleSidebar()
+        event.preventDefault();
+        toggleSidebar();
       }
-    }
+    };
 
-    window.addEventListener("keydown", handleKeyDown)
-    return () => window.removeEventListener("keydown", handleKeyDown)
-  }, [toggleSidebar])
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [toggleSidebar]);
 
   // We add a state so that we can do data-state="expanded" or "collapsed".
   // This makes it easier to style the sidebar with Tailwind classes.
-  const state = open ? "expanded" : "collapsed"
+  const state = open ? 'expanded' : 'collapsed';
 
   const contextValue = React.useMemo<SidebarContextProps>(
     () => ({
@@ -123,8 +126,8 @@ function SidebarProvider({
       setOpenMobile,
       toggleSidebar,
     }),
-    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
-  )
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],
+  );
 
   return (
     <SidebarContext.Provider value={contextValue}>
@@ -132,50 +135,50 @@ function SidebarProvider({
         data-slot="sidebar-wrapper"
         style={
           {
-            "--sidebar-width": SIDEBAR_WIDTH,
-            "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+            '--sidebar-width': SIDEBAR_WIDTH,
+            '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
             ...style,
           } as React.CSSProperties
         }
         className={cn(
-          "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
-          className
+          'group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full',
+          className,
         )}
         {...props}
       >
         {children}
       </div>
     </SidebarContext.Provider>
-  )
+  );
 }
 
 function Sidebar({
-  side = "left",
-  variant = "sidebar",
-  collapsible = "offcanvas",
+  side = 'left',
+  variant = 'sidebar',
+  collapsible = 'offcanvas',
   className,
   children,
   ...props
-}: React.ComponentProps<"div"> & {
-  side?: "left" | "right"
-  variant?: "sidebar" | "floating" | "inset"
-  collapsible?: "offcanvas" | "icon" | "none"
+}: React.ComponentProps<'div'> & {
+  side?: 'left' | 'right';
+  variant?: 'sidebar' | 'floating' | 'inset';
+  collapsible?: 'offcanvas' | 'icon' | 'none';
 }) {
-  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
 
-  if (collapsible === "none") {
+  if (collapsible === 'none') {
     return (
       <div
         data-slot="sidebar"
         className={cn(
-          "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
-          className
+          'bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col',
+          className,
         )}
         {...props}
       >
         {children}
       </div>
-    )
+    );
   }
 
   if (isMobile) {
@@ -188,7 +191,7 @@ function Sidebar({
           className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
           style={
             {
-              "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+              '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
             } as React.CSSProperties
           }
           side={side}
@@ -200,14 +203,14 @@ function Sidebar({
           <div className="flex h-full w-full flex-col">{children}</div>
         </SheetContent>
       </Sheet>
-    )
+    );
   }
 
   return (
     <div
       className="group peer text-sidebar-foreground hidden md:block"
       data-state={state}
-      data-collapsible={state === "collapsed" ? collapsible : ""}
+      data-collapsible={state === 'collapsed' ? collapsible : ''}
       data-variant={variant}
       data-side={side}
       data-slot="sidebar"
@@ -216,26 +219,26 @@ function Sidebar({
       <div
         data-slot="sidebar-gap"
         className={cn(
-          "transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent",
-          "group-data-[collapsible=offcanvas]:w-0",
-          "group-data-[side=right]:rotate-180",
-          variant === "floating" || variant === "inset"
-            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
-            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
+          'transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent',
+          'group-data-[collapsible=offcanvas]:w-0',
+          'group-data-[side=right]:rotate-180',
+          variant === 'floating' || variant === 'inset'
+            ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
+            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
         )}
       />
       <div
         data-slot="sidebar-container"
         className={cn(
-          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
-          side === "left"
-            ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
-            : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+          'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
+          side === 'left'
+            ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
+            : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
           // Adjust the padding for floating and inset variants.
-          variant === "floating" || variant === "inset"
-            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
-            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
-          className
+          variant === 'floating' || variant === 'inset'
+            ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
+            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
+          className,
         )}
         {...props}
       >
@@ -248,7 +251,7 @@ function Sidebar({
         </div>
       </div>
     </div>
-  )
+  );
 }
 
 function SidebarTrigger({
@@ -256,7 +259,7 @@ function SidebarTrigger({
   onClick,
   ...props
 }: React.ComponentProps<typeof Button>) {
-  const { toggleSidebar } = useSidebar()
+  const { toggleSidebar } = useSidebar();
 
   return (
     <Button
@@ -266,20 +269,19 @@ function SidebarTrigger({
       size="icon-sm"
       className={cn(className)}
       onClick={(event) => {
-        onClick?.(event)
-        toggleSidebar()
+        onClick?.(event);
+        toggleSidebar();
       }}
       {...props}
     >
-      <IconLayoutSidebar
-      />
+      <IconLayoutSidebar />
       <span className="sr-only">Toggle Sidebar</span>
     </Button>
-  )
+  );
 }
 
-function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
-  const { toggleSidebar } = useSidebar()
+function SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {
+  const { toggleSidebar } = useSidebar();
 
   return (
     <button
@@ -290,30 +292,30 @@ function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
       onClick={toggleSidebar}
       title="Toggle Sidebar"
       className={cn(
-        "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
-        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
-        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
-        "group-data-[collapsible=offcanvas]:hover:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
-        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
-        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
-        className
+        'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',
+        'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
+        '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
+        'group-data-[collapsible=offcanvas]:hover:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
+        '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
+        '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
+function SidebarInset({ className, ...props }: React.ComponentProps<'main'>) {
   return (
     <main
       data-slot="sidebar-inset"
       className={cn(
-        "bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-xs md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 relative flex w-full flex-1 flex-col",
-        className
+        'bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-xs md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 relative flex w-full flex-1 flex-col',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function SidebarInput({
@@ -324,32 +326,32 @@ function SidebarInput({
     <Input
       data-slot="sidebar-input"
       data-sidebar="input"
-      className={cn("bg-background h-8 w-full shadow-none", className)}
+      className={cn('bg-background h-8 w-full shadow-none', className)}
       {...props}
     />
-  )
+  );
 }
 
-function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
+function SidebarHeader({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="sidebar-header"
       data-sidebar="header"
-      className={cn("gap-2 p-2 flex flex-col", className)}
+      className={cn('gap-2 p-2 flex flex-col', className)}
       {...props}
     />
-  )
+  );
 }
 
-function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
+function SidebarFooter({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="sidebar-footer"
       data-sidebar="footer"
-      className={cn("gap-2 p-2 flex flex-col", className)}
+      className={cn('gap-2 p-2 flex flex-col', className)}
       {...props}
     />
-  )
+  );
 }
 
 function SidebarSeparator({
@@ -360,184 +362,182 @@ function SidebarSeparator({
     <Separator
       data-slot="sidebar-separator"
       data-sidebar="separator"
-      className={cn("bg-sidebar-border mx-2 w-auto", className)}
+      className={cn('bg-sidebar-border mx-2 w-auto', className)}
       {...props}
     />
-  )
+  );
 }
 
-function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
+function SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="sidebar-content"
       data-sidebar="content"
       className={cn(
-        "no-scrollbar gap-0 flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden",
-        className
+        'no-scrollbar gap-0 flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
+function SidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="sidebar-group"
       data-sidebar="group"
-      className={cn(
-        "p-2 relative flex w-full min-w-0 flex-col",
-        className
-      )}
+      className={cn('p-2 relative flex w-full min-w-0 flex-col', className)}
       {...props}
     />
-  )
+  );
 }
 
 function SidebarGroupLabel({
   className,
   render,
   ...props
-}: useRender.ComponentProps<"div"> & React.ComponentProps<"div">) {
+}: useRender.ComponentProps<'div'> & React.ComponentProps<'div'>) {
   return useRender({
-    defaultTagName: "div",
-    props: mergeProps<"div">(
+    defaultTagName: 'div',
+    props: mergeProps<'div'>(
       {
         className: cn(
-          "text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0",
-          className
+          'text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0',
+          className,
         ),
       },
-      props
+      props,
     ),
     render,
     state: {
-      slot: "sidebar-group-label",
-      sidebar: "group-label",
+      slot: 'sidebar-group-label',
+      sidebar: 'group-label',
     },
-  })
+  });
 }
 
 function SidebarGroupAction({
   className,
   render,
   ...props
-}: useRender.ComponentProps<"button"> & React.ComponentProps<"button">) {
+}: useRender.ComponentProps<'button'> & React.ComponentProps<'button'>) {
   return useRender({
-    defaultTagName: "button",
-    props: mergeProps<"button">(
+    defaultTagName: 'button',
+    props: mergeProps<'button'>(
       {
         className: cn(
-          "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-md p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform [&>svg]:shrink-0 after:absolute after:-inset-2 md:after:hidden group-data-[collapsible=icon]:hidden",
-          className
+          'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-md p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform [&>svg]:shrink-0 after:absolute after:-inset-2 md:after:hidden group-data-[collapsible=icon]:hidden',
+          className,
         ),
       },
-      props
+      props,
     ),
     render,
     state: {
-      slot: "sidebar-group-action",
-      sidebar: "group-action",
+      slot: 'sidebar-group-action',
+      sidebar: 'group-action',
     },
-  })
+  });
 }
 
 function SidebarGroupContent({
   className,
   ...props
-}: React.ComponentProps<"div">) {
+}: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="sidebar-group-content"
       data-sidebar="group-content"
-      className={cn("text-sm w-full", className)}
+      className={cn('text-sm w-full', className)}
       {...props}
     />
-  )
+  );
 }
 
-function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
+function SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>) {
   return (
     <ul
       data-slot="sidebar-menu"
       data-sidebar="menu"
-      className={cn("gap-0 flex w-full min-w-0 flex-col", className)}
+      className={cn('gap-0 flex w-full min-w-0 flex-col', className)}
       {...props}
     />
-  )
+  );
 }
 
-function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
+function SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>) {
   return (
     <li
       data-slot="sidebar-menu-item"
       data-sidebar="menu-item"
-      className={cn("group/menu-item relative", className)}
+      className={cn('group/menu-item relative', className)}
       {...props}
     />
-  )
+  );
 }
 
 const sidebarMenuButtonVariants = cva(
-  "ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0",
+  'ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0',
   {
     variants: {
       variant: {
-        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-        outline: "bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+        outline:
+          'bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
       },
       size: {
-        default: "h-8 text-sm",
-        sm: "h-7 text-xs",
-        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
+        default: 'h-8 text-sm',
+        sm: 'h-7 text-xs',
+        lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',
       },
     },
     defaultVariants: {
-      variant: "default",
-      size: "default",
+      variant: 'default',
+      size: 'default',
     },
-  }
-)
+  },
+);
 
 function SidebarMenuButton({
   render,
   isActive = false,
-  variant = "default",
-  size = "default",
+  variant = 'default',
+  size = 'default',
   tooltip,
   className,
   ...props
-}: useRender.ComponentProps<"button"> &
-  React.ComponentProps<"button"> & {
-    isActive?: boolean
-    tooltip?: string | React.ComponentProps<typeof TooltipContent>
+}: useRender.ComponentProps<'button'> &
+  React.ComponentProps<'button'> & {
+    isActive?: boolean;
+    tooltip?: string | React.ComponentProps<typeof TooltipContent>;
   } & VariantProps<typeof sidebarMenuButtonVariants>) {
-  const { isMobile, state } = useSidebar()
+  const { isMobile, state } = useSidebar();
   const comp = useRender({
-    defaultTagName: "button",
-    props: mergeProps<"button">(
+    defaultTagName: 'button',
+    props: mergeProps<'button'>(
       {
         className: cn(sidebarMenuButtonVariants({ variant, size }), className),
       },
-      props
+      props,
     ),
     render: !tooltip ? render : TooltipTrigger,
     state: {
-      slot: "sidebar-menu-button",
-      sidebar: "menu-button",
+      slot: 'sidebar-menu-button',
+      sidebar: 'menu-button',
       size,
       active: isActive,
     },
-  })
+  });
 
   if (!tooltip) {
-    return comp
+    return comp;
   }
 
-  if (typeof tooltip === "string") {
+  if (typeof tooltip === 'string') {
     tooltip = {
       children: tooltip,
-    }
+    };
   }
 
   return (
@@ -546,11 +546,11 @@ function SidebarMenuButton({
       <TooltipContent
         side="right"
         align="center"
-        hidden={state !== "collapsed" || isMobile}
+        hidden={state !== 'collapsed' || isMobile}
         {...tooltip}
       />
     </Tooltip>
-  )
+  );
 }
 
 function SidebarMenuAction({
@@ -558,65 +558,65 @@ function SidebarMenuAction({
   render,
   showOnHover = false,
   ...props
-}: useRender.ComponentProps<"button"> &
-  React.ComponentProps<"button"> & {
-    showOnHover?: boolean
+}: useRender.ComponentProps<'button'> &
+  React.ComponentProps<'button'> & {
+    showOnHover?: boolean;
   }) {
   return useRender({
-    defaultTagName: "button",
-    props: mergeProps<"button">(
+    defaultTagName: 'button',
+    props: mergeProps<'button'>(
       {
         className: cn(
-          "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-md p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0",
+          'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-md p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0',
           showOnHover &&
-            "peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0",
-          className
+            'peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0',
+          className,
         ),
       },
-      props
+      props,
     ),
     render,
     state: {
-      slot: "sidebar-menu-action",
-      sidebar: "menu-action",
+      slot: 'sidebar-menu-action',
+      sidebar: 'menu-action',
     },
-  })
+  });
 }
 
 function SidebarMenuBadge({
   className,
   ...props
-}: React.ComponentProps<"div">) {
+}: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="sidebar-menu-badge"
       data-sidebar="menu-badge"
       className={cn(
-        "text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 rounded-md px-1 text-xs font-medium peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 flex items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden",
-        className
+        'text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 rounded-md px-1 text-xs font-medium peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 flex items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function SidebarMenuSkeleton({
   className,
   showIcon = false,
   ...props
-}: React.ComponentProps<"div"> & {
-  showIcon?: boolean
+}: React.ComponentProps<'div'> & {
+  showIcon?: boolean;
 }) {
   // Random width between 50 to 90%.
   const [width] = React.useState(() => {
-    return `${Math.floor(Math.random() * 40) + 50}%`
-  })
+    return `${Math.floor(Math.random() * 40) + 50}%`;
+  });
 
   return (
     <div
       data-slot="sidebar-menu-skeleton"
       data-sidebar="menu-skeleton"
-      className={cn("h-8 gap-2 rounded-md px-2 flex items-center", className)}
+      className={cn('h-8 gap-2 rounded-md px-2 flex items-center', className)}
       {...props}
     >
       {showIcon && (
@@ -630,69 +630,72 @@ function SidebarMenuSkeleton({
         data-sidebar="menu-skeleton-text"
         style={
           {
-            "--skeleton-width": width,
+            '--skeleton-width': width,
           } as React.CSSProperties
         }
       />
     </div>
-  )
+  );
 }
 
-function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
+function SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {
   return (
     <ul
       data-slot="sidebar-menu-sub"
       data-sidebar="menu-sub"
-      className={cn("border-sidebar-border mx-3.5 translate-x-px gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col", className)}
+      className={cn(
+        'border-sidebar-border mx-3.5 translate-x-px gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col',
+        className,
+      )}
       {...props}
     />
-  )
+  );
 }
 
 function SidebarMenuSubItem({
   className,
   ...props
-}: React.ComponentProps<"li">) {
+}: React.ComponentProps<'li'>) {
   return (
     <li
       data-slot="sidebar-menu-sub-item"
       data-sidebar="menu-sub-item"
-      className={cn("group/menu-sub-item relative", className)}
+      className={cn('group/menu-sub-item relative', className)}
       {...props}
     />
-  )
+  );
 }
 
 function SidebarMenuSubButton({
   render,
-  size = "md",
+  size = 'md',
   isActive = false,
   className,
   ...props
-}: useRender.ComponentProps<"a"> &
-  React.ComponentProps<"a"> & {
-    size?: "sm" | "md"
-    isActive?: boolean
+}: useRender.ComponentProps<'a'> &
+  React.ComponentProps<'a'> & {
+    size?: 'sm' | 'md';
+    isActive?: boolean;
   }) {
   return useRender({
-    defaultTagName: "a",
-    props: mergeProps<"a">(
+    defaultTagName: 'a',
+    props: mergeProps<'a'>(
       {
         className: cn(
-          "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0",
-          className
+          'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0',
+          className,
         ),
       },
-      props
+      props,
     ),
     render,
     state: {
-      slot: "sidebar-menu-sub-button",
-      sidebar: "menu-sub-button",
+      slot: 'sidebar-menu-sub-button',
+      sidebar: 'menu-sub-button',
       size,
       active: isActive,
     },
-  })
+  });
 }
 
 export {
@@ -720,4 +723,4 @@ export {
   SidebarSeparator,
   SidebarTrigger,
   useSidebar,
-}
+};
diff --git a/packages/ui/primitives/skeleton.tsx b/packages/ui/primitives/skeleton.tsx
index 184a72f..3b5e4d3 100644
--- a/packages/ui/primitives/skeleton.tsx
+++ b/packages/ui/primitives/skeleton.tsx
@@ -1,13 +1,13 @@
-import { cn } from "@formbase/ui/utils/cn"
+import { cn } from '@formbase/ui/utils/cn';
 
-function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="skeleton"
-      className={cn("bg-muted rounded-md animate-pulse", className)}
+      className={cn('bg-muted rounded-md animate-pulse', className)}
       {...props}
     />
-  )
+  );
 }
 
-export { Skeleton }
+export { Skeleton };
diff --git a/packages/ui/primitives/slider.tsx b/packages/ui/primitives/slider.tsx
index 9c60ada..879fc87 100644
--- a/packages/ui/primitives/slider.tsx
+++ b/packages/ui/primitives/slider.tsx
@@ -1,9 +1,10 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import { Slider as SliderPrimitive } from "@base-ui/react/slider"
+import * as React from 'react';
 
-import { cn } from "@formbase/ui/utils/cn"
+import { Slider as SliderPrimitive } from '@base-ui/react/slider';
+
+import { cn } from '@formbase/ui/utils/cn';
 
 function Slider({
   className,
@@ -20,8 +21,8 @@ function Slider({
         : Array.isArray(defaultValue)
           ? defaultValue
           : [min, max],
-    [value, defaultValue, min, max]
-  )
+    [value, defaultValue, min, max],
+  );
 
   return (
     <SliderPrimitive.Root
@@ -36,8 +37,8 @@ function Slider({
     >
       <SliderPrimitive.Control
         className={cn(
-          "data-vertical:min-h-40 relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:w-auto data-vertical:flex-col",
-          className
+          'data-vertical:min-h-40 relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:w-auto data-vertical:flex-col',
+          className,
         )}
       >
         <SliderPrimitive.Track
@@ -58,7 +59,7 @@ function Slider({
         ))}
       </SliderPrimitive.Control>
     </SliderPrimitive.Root>
-  )
+  );
 }
 
-export { Slider }
+export { Slider };
diff --git a/packages/ui/primitives/sonner.tsx b/packages/ui/primitives/sonner.tsx
index 6988293..667442d 100644
--- a/packages/ui/primitives/sonner.tsx
+++ b/packages/ui/primitives/sonner.tsx
@@ -1,49 +1,48 @@
-"use client"
+'use client';
 
-import { useTheme } from "next-themes"
-import { Toaster as Sonner, type ToasterProps } from "sonner"
-import { IconCircleCheck, IconInfoCircle, IconAlertTriangle, IconAlertOctagon, IconLoader } from "@tabler/icons-react"
+import { useTheme } from 'next-themes';
+
+import type { ToasterProps } from 'sonner';
+
+import {
+  IconAlertOctagon,
+  IconAlertTriangle,
+  IconCircleCheck,
+  IconInfoCircle,
+  IconLoader,
+} from '@tabler/icons-react';
+import { Toaster as Sonner } from 'sonner';
 
 const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme()
+  const { theme = 'system' } = useTheme();
 
   return (
     <Sonner
-      theme={theme as ToasterProps["theme"]}
+      theme={theme as ToasterProps['theme']}
       className="toaster group"
       icons={{
-        success: (
-          <IconCircleCheck className="size-4" />
-        ),
-        info: (
-          <IconInfoCircle className="size-4" />
-        ),
-        warning: (
-          <IconAlertTriangle className="size-4" />
-        ),
-        error: (
-          <IconAlertOctagon className="size-4" />
-        ),
-        loading: (
-          <IconLoader className="size-4 animate-spin" />
-        ),
+        success: <IconCircleCheck className="size-4" />,
+        info: <IconInfoCircle className="size-4" />,
+        warning: <IconAlertTriangle className="size-4" />,
+        error: <IconAlertOctagon className="size-4" />,
+        loading: <IconLoader className="size-4 animate-spin" />,
       }}
       style={
         {
-          "--normal-bg": "var(--popover)",
-          "--normal-text": "var(--popover-foreground)",
-          "--normal-border": "var(--border)",
-          "--border-radius": "var(--radius)",
+          '--normal-bg': 'var(--popover)',
+          '--normal-text': 'var(--popover-foreground)',
+          '--normal-border': 'var(--border)',
+          '--border-radius': 'var(--radius)',
         } as React.CSSProperties
       }
       toastOptions={{
         classNames: {
-          toast: "cn-toast",
+          toast: 'cn-toast',
         },
       }}
       {...props}
     />
-  )
-}
+  );
+};
 
-export { Toaster }
+export { Toaster };
diff --git a/packages/ui/primitives/spinner.tsx b/packages/ui/primitives/spinner.tsx
index 3f44a99..22fec48 100644
--- a/packages/ui/primitives/spinner.tsx
+++ b/packages/ui/primitives/spinner.tsx
@@ -1,10 +1,16 @@
-import { cn } from "@formbase/ui/utils/cn"
-import { IconLoader } from "@tabler/icons-react"
+import { IconLoader } from '@tabler/icons-react';
 
-function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
+import { cn } from '@formbase/ui/utils/cn';
+
+function Spinner({ className, ...props }: React.ComponentProps<'svg'>) {
   return (
-    <IconLoader role="status" aria-label="Loading" className={cn("size-4 animate-spin", className)} {...props} />
-  )
+    <IconLoader
+      role="status"
+      aria-label="Loading"
+      className={cn('size-4 animate-spin', className)}
+      {...props}
+    />
+  );
 }
 
-export { Spinner }
+export { Spinner };
diff --git a/packages/ui/primitives/switch.tsx b/packages/ui/primitives/switch.tsx
index fc40260..7452ff1 100644
--- a/packages/ui/primitives/switch.tsx
+++ b/packages/ui/primitives/switch.tsx
@@ -1,23 +1,23 @@
-"use client"
+'use client';
 
-import { Switch as SwitchPrimitive } from "@base-ui/react/switch"
+import { Switch as SwitchPrimitive } from '@base-ui/react/switch';
 
-import { cn } from "@formbase/ui/utils/cn"
+import { cn } from '@formbase/ui/utils/cn';
 
 function Switch({
   className,
-  size = "default",
+  size = 'default',
   ...props
 }: SwitchPrimitive.Root.Props & {
-  size?: "sm" | "default"
+  size?: 'sm' | 'default';
 }) {
   return (
     <SwitchPrimitive.Root
       data-slot="switch"
       data-size={size}
       className={cn(
-        "data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] peer group/switch relative inline-flex items-center transition-all outline-hidden after:absolute after:-inset-x-3 after:-inset-y-2 data-disabled:cursor-not-allowed data-disabled:opacity-50",
-        className
+        'data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] peer group/switch relative inline-flex items-center transition-all outline-hidden after:absolute after:-inset-x-3 after:-inset-y-2 data-disabled:cursor-not-allowed data-disabled:opacity-50',
+        className,
       )}
       {...props}
     >
@@ -26,7 +26,7 @@ function Switch({
         className="bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-checked:group-data-[size=default]/switch:translate-x-[calc(100%-2px)] data-checked:group-data-[size=sm]/switch:translate-x-[calc(100%-2px)] data-unchecked:group-data-[size=default]/switch:translate-x-0 data-unchecked:group-data-[size=sm]/switch:translate-x-0 pointer-events-none block ring-0 transition-transform"
       />
     </SwitchPrimitive.Root>
-  )
+  );
 }
 
-export { Switch }
+export { Switch };
diff --git a/packages/ui/primitives/table.tsx b/packages/ui/primitives/table.tsx
index 9f0adaf..7e5c6c3 100644
--- a/packages/ui/primitives/table.tsx
+++ b/packages/ui/primitives/table.tsx
@@ -1,92 +1,107 @@
-"use client"
+'use client';
 
-import * as React from "react"
+import * as React from 'react';
 
-import { cn } from "@formbase/ui/utils/cn"
+import { cn } from '@formbase/ui/utils/cn';
 
-function Table({ className, ...props }: React.ComponentProps<"table">) {
+function Table({ className, ...props }: React.ComponentProps<'table'>) {
   return (
-    <div data-slot="table-container" className="relative w-full overflow-x-auto">
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
       <table
         data-slot="table"
-        className={cn("w-full caption-bottom text-sm", className)}
+        className={cn('w-full caption-bottom text-sm', className)}
         {...props}
       />
     </div>
-  )
+  );
 }
 
-function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
   return (
     <thead
       data-slot="table-header"
-      className={cn("[&_tr]:border-b", className)}
+      className={cn('[&_tr]:border-b', className)}
       {...props}
     />
-  )
+  );
 }
 
-function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {
   return (
     <tbody
       data-slot="table-body"
-      className={cn("[&_tr:last-child]:border-0", className)}
+      className={cn('[&_tr:last-child]:border-0', className)}
       {...props}
     />
-  )
+  );
 }
 
-function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {
   return (
     <tfoot
       data-slot="table-footer"
-      className={cn("bg-muted/50 border-t font-medium last:[&>tr]:border-b-0", className)}
+      className={cn(
+        'bg-muted/50 border-t font-medium last:[&>tr]:border-b-0',
+        className,
+      )}
       {...props}
     />
-  )
+  );
 }
 
-function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {
   return (
     <tr
       data-slot="table-row"
-      className={cn("hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors", className)}
+      className={cn(
+        'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',
+        className,
+      )}
       {...props}
     />
-  )
+  );
 }
 
-function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
   return (
     <th
       data-slot="table-head"
-      className={cn("text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0", className)}
+      className={cn(
+        'text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0',
+        className,
+      )}
       {...props}
     />
-  )
+  );
 }
 
-function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
   return (
     <td
       data-slot="table-cell"
-      className={cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", className)}
+      className={cn(
+        'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0',
+        className,
+      )}
       {...props}
     />
-  )
+  );
 }
 
 function TableCaption({
   className,
   ...props
-}: React.ComponentProps<"caption">) {
+}: React.ComponentProps<'caption'>) {
   return (
     <caption
       data-slot="table-caption"
-      className={cn("text-muted-foreground mt-4 text-sm", className)}
+      className={cn('text-muted-foreground mt-4 text-sm', className)}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -98,4 +113,4 @@ export {
   TableRow,
   TableCell,
   TableCaption,
-}
+};
diff --git a/packages/ui/primitives/tabs.tsx b/packages/ui/primitives/tabs.tsx
index a568246..2c7d203 100644
--- a/packages/ui/primitives/tabs.tsx
+++ b/packages/ui/primitives/tabs.tsx
@@ -1,13 +1,15 @@
-"use client"
+'use client';
 
-import { Tabs as TabsPrimitive } from "@base-ui/react/tabs"
-import { cva, type VariantProps } from "class-variance-authority"
+import type { VariantProps } from 'class-variance-authority';
 
-import { cn } from "@formbase/ui/utils/cn"
+import { Tabs as TabsPrimitive } from '@base-ui/react/tabs';
+import { cva } from 'class-variance-authority';
+
+import { cn } from '@formbase/ui/utils/cn';
 
 function Tabs({
   className,
-  orientation = "horizontal",
+  orientation = 'horizontal',
   ...props
 }: TabsPrimitive.Root.Props) {
   return (
@@ -15,32 +17,32 @@ function Tabs({
       data-slot="tabs"
       data-orientation={orientation}
       className={cn(
-        "gap-2 group/tabs flex data-[orientation=horizontal]:flex-col",
-        className
+        'gap-2 group/tabs flex data-[orientation=horizontal]:flex-col',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 const tabsListVariants = cva(
-  "rounded-lg p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col",
+  'rounded-lg p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col',
   {
     variants: {
       variant: {
-        default: "bg-muted",
-        line: "gap-1 bg-transparent",
+        default: 'bg-muted',
+        line: 'gap-1 bg-transparent',
       },
     },
     defaultVariants: {
-      variant: "default",
+      variant: 'default',
     },
-  }
-)
+  },
+);
 
 function TabsList({
   className,
-  variant = "default",
+  variant = 'default',
   ...props
 }: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {
   return (
@@ -50,7 +52,7 @@ function TabsList({
       className={cn(tabsListVariants({ variant }), className)}
       {...props}
     />
-  )
+  );
 }
 
 function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
@@ -59,24 +61,24 @@ function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
       data-slot="tabs-trigger"
       className={cn(
         "gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium data-active:group-data-[variant=default]/tabs-list:shadow-xs data-active:group-data-[variant=line]/tabs-list:shadow-none [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        "group-data-[variant=line]/tabs-list:bg-transparent data-active:group-data-[variant=line]/tabs-list:bg-transparent dark:data-active:group-data-[variant=line]/tabs-list:border-transparent dark:data-active:group-data-[variant=line]/tabs-list:bg-transparent",
-        "data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground",
-        "after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 data-active:group-data-[variant=line]/tabs-list:after:opacity-100",
-        className
+        'group-data-[variant=line]/tabs-list:bg-transparent data-active:group-data-[variant=line]/tabs-list:bg-transparent dark:data-active:group-data-[variant=line]/tabs-list:border-transparent dark:data-active:group-data-[variant=line]/tabs-list:bg-transparent',
+        'data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground',
+        'after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 data-active:group-data-[variant=line]/tabs-list:after:opacity-100',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
   return (
     <TabsPrimitive.Panel
       data-slot="tabs-content"
-      className={cn("text-sm flex-1 outline-hidden", className)}
+      className={cn('text-sm flex-1 outline-hidden', className)}
       {...props}
     />
-  )
+  );
 }
 
-export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };
diff --git a/packages/ui/primitives/textarea.tsx b/packages/ui/primitives/textarea.tsx
index fbc65e3..1860685 100644
--- a/packages/ui/primitives/textarea.tsx
+++ b/packages/ui/primitives/textarea.tsx
@@ -1,18 +1,18 @@
-import * as React from "react"
+import * as React from 'react';
 
-import { cn } from "@formbase/ui/utils/cn"
+import { cn } from '@formbase/ui/utils/cn';
 
-function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
   return (
     <textarea
       data-slot="textarea"
       className={cn(
-        "border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
-        className
+        'border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-export { Textarea }
+export { Textarea };
diff --git a/packages/ui/primitives/toggle-group.tsx b/packages/ui/primitives/toggle-group.tsx
index 42c87b4..dc543e8 100644
--- a/packages/ui/primitives/toggle-group.tsx
+++ b/packages/ui/primitives/toggle-group.tsx
@@ -1,37 +1,38 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import { Toggle as TogglePrimitive } from "@base-ui/react/toggle"
-import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group"
-import { type VariantProps } from "class-variance-authority"
+import * as React from 'react';
 
-import { cn } from "@formbase/ui/utils/cn"
-import { toggleVariants } from "@formbase/ui/primitives/toggle"
+import { Toggle as TogglePrimitive } from '@base-ui/react/toggle';
+import { ToggleGroup as ToggleGroupPrimitive } from '@base-ui/react/toggle-group';
+import { type VariantProps } from 'class-variance-authority';
+
+import { toggleVariants } from '@formbase/ui/primitives/toggle';
+import { cn } from '@formbase/ui/utils/cn';
 
 const ToggleGroupContext = React.createContext<
   VariantProps<typeof toggleVariants> & {
-    spacing?: number
-    orientation?: "horizontal" | "vertical"
+    spacing?: number;
+    orientation?: 'horizontal' | 'vertical';
   }
 >({
-  size: "default",
-  variant: "default",
+  size: 'default',
+  variant: 'default',
   spacing: 0,
-  orientation: "horizontal",
-})
+  orientation: 'horizontal',
+});
 
 function ToggleGroup({
   className,
   variant,
   size,
   spacing = 0,
-  orientation = "horizontal",
+  orientation = 'horizontal',
   children,
   ...props
 }: ToggleGroupPrimitive.Props &
   VariantProps<typeof toggleVariants> & {
-    spacing?: number
-    orientation?: "horizontal" | "vertical"
+    spacing?: number;
+    orientation?: 'horizontal' | 'vertical';
   }) {
   return (
     <ToggleGroupPrimitive
@@ -40,10 +41,10 @@ function ToggleGroup({
       data-size={size}
       data-spacing={spacing}
       data-orientation={orientation}
-      style={{ "--gap": spacing } as React.CSSProperties}
+      style={{ '--gap': spacing } as React.CSSProperties}
       className={cn(
-        "rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch",
-        className
+        'rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch',
+        className,
       )}
       {...props}
     >
@@ -53,17 +54,17 @@ function ToggleGroup({
         {children}
       </ToggleGroupContext.Provider>
     </ToggleGroupPrimitive>
-  )
+  );
 }
 
 function ToggleGroupItem({
   className,
   children,
-  variant = "default",
-  size = "default",
+  variant = 'default',
+  size = 'default',
   ...props
 }: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
-  const context = React.useContext(ToggleGroupContext)
+  const context = React.useContext(ToggleGroupContext);
 
   return (
     <TogglePrimitive
@@ -72,18 +73,18 @@ function ToggleGroupItem({
       data-size={context.size || size}
       data-spacing={context.spacing}
       className={cn(
-        "group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 first:data-[spacing=0]:group-data-horizontal/toggle-group:rounded-l-lg first:data-[spacing=0]:group-data-vertical/toggle-group:rounded-t-lg last:data-[spacing=0]:group-data-horizontal/toggle-group:rounded-r-lg last:data-[spacing=0]:group-data-vertical/toggle-group:rounded-b-lg shrink-0 focus:z-10 focus-visible:z-10 data-[variant=outline]:data-[spacing=0]:group-data-horizontal/toggle-group:border-l-0 data-[variant=outline]:data-[spacing=0]:group-data-vertical/toggle-group:border-t-0 first:data-[variant=outline]:data-[spacing=0]:group-data-horizontal/toggle-group:border-l first:data-[variant=outline]:data-[spacing=0]:group-data-vertical/toggle-group:border-t",
+        'group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 first:data-[spacing=0]:group-data-horizontal/toggle-group:rounded-l-lg first:data-[spacing=0]:group-data-vertical/toggle-group:rounded-t-lg last:data-[spacing=0]:group-data-horizontal/toggle-group:rounded-r-lg last:data-[spacing=0]:group-data-vertical/toggle-group:rounded-b-lg shrink-0 focus:z-10 focus-visible:z-10 data-[variant=outline]:data-[spacing=0]:group-data-horizontal/toggle-group:border-l-0 data-[variant=outline]:data-[spacing=0]:group-data-vertical/toggle-group:border-t-0 first:data-[variant=outline]:data-[spacing=0]:group-data-horizontal/toggle-group:border-l first:data-[variant=outline]:data-[spacing=0]:group-data-vertical/toggle-group:border-t',
         toggleVariants({
           variant: context.variant || variant,
           size: context.size || size,
         }),
-        className
+        className,
       )}
       {...props}
     >
       {children}
     </TogglePrimitive>
-  )
+  );
 }
 
-export { ToggleGroup, ToggleGroupItem }
+export { ToggleGroup, ToggleGroupItem };
diff --git a/packages/ui/primitives/toggle.tsx b/packages/ui/primitives/toggle.tsx
index b2f729c..8f74874 100644
--- a/packages/ui/primitives/toggle.tsx
+++ b/packages/ui/primitives/toggle.tsx
@@ -1,35 +1,37 @@
-"use client"
+'use client';
 
-import { Toggle as TogglePrimitive } from "@base-ui/react/toggle"
-import { cva, type VariantProps } from "class-variance-authority"
+import type { VariantProps } from 'class-variance-authority';
 
-import { cn } from "@formbase/ui/utils/cn"
+import { Toggle as TogglePrimitive } from '@base-ui/react/toggle';
+import { cva } from 'class-variance-authority';
+
+import { cn } from '@formbase/ui/utils/cn';
 
 const toggleVariants = cva(
   "hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[state=on]:bg-muted gap-1 rounded-lg text-sm font-medium transition-all [&_svg:not([class*='size-'])]:size-4 group/toggle hover:bg-muted inline-flex items-center justify-center whitespace-nowrap outline-hidden focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
   {
     variants: {
       variant: {
-        default: "bg-transparent",
-        outline: "border-input hover:bg-muted border bg-transparent",
+        default: 'bg-transparent',
+        outline: 'border-input hover:bg-muted border bg-transparent',
       },
       size: {
-        default: "h-8 min-w-8 px-2",
-        sm: "h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-1.5 text-[0.8rem]",
-        lg: "h-9 min-w-9 px-2.5",
+        default: 'h-8 min-w-8 px-2',
+        sm: 'h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-1.5 text-[0.8rem]',
+        lg: 'h-9 min-w-9 px-2.5',
       },
     },
     defaultVariants: {
-      variant: "default",
-      size: "default",
+      variant: 'default',
+      size: 'default',
     },
-  }
-)
+  },
+);
 
 function Toggle({
   className,
-  variant = "default",
-  size = "default",
+  variant = 'default',
+  size = 'default',
   ...props
 }: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
   return (
@@ -38,7 +40,7 @@ function Toggle({
       className={cn(toggleVariants({ variant, size, className }))}
       {...props}
     />
-  )
+  );
 }
 
-export { Toggle, toggleVariants }
+export { Toggle, toggleVariants };
diff --git a/packages/ui/primitives/tooltip.tsx b/packages/ui/primitives/tooltip.tsx
index cc35001..08c9eef 100644
--- a/packages/ui/primitives/tooltip.tsx
+++ b/packages/ui/primitives/tooltip.tsx
@@ -1,8 +1,8 @@
-"use client"
+'use client';
 
-import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip"
+import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';
 
-import { cn } from "@formbase/ui/utils/cn"
+import { cn } from '@formbase/ui/utils/cn';
 
 function TooltipProvider({
   delay = 0,
@@ -14,7 +14,7 @@ function TooltipProvider({
       delay={delay}
       {...props}
     />
-  )
+  );
 }
 
 function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
@@ -22,25 +22,25 @@ function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
     <TooltipProvider>
       <TooltipPrimitive.Root data-slot="tooltip" {...props} />
     </TooltipProvider>
-  )
+  );
 }
 
 function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
-  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
 }
 
 function TooltipContent({
   className,
-  side = "top",
+  side = 'top',
   sideOffset = 4,
-  align = "center",
+  align = 'center',
   alignOffset = 0,
   children,
   ...props
 }: TooltipPrimitive.Popup.Props &
   Pick<
     TooltipPrimitive.Positioner.Props,
-    "align" | "alignOffset" | "side" | "sideOffset"
+    'align' | 'alignOffset' | 'side' | 'sideOffset'
   >) {
   return (
     <TooltipPrimitive.Portal>
@@ -54,8 +54,8 @@ function TooltipContent({
         <TooltipPrimitive.Popup
           data-slot="tooltip-content"
           className={cn(
-            "data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 rounded-md px-3 py-1.5 text-xs bg-foreground text-background z-50 w-fit max-w-xs origin-(--transform-origin)",
-            className
+            'data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 rounded-md px-3 py-1.5 text-xs bg-foreground text-background z-50 w-fit max-w-xs origin-(--transform-origin)',
+            className,
           )}
           {...props}
         >
@@ -64,7 +64,7 @@ function TooltipContent({
         </TooltipPrimitive.Popup>
       </TooltipPrimitive.Positioner>
     </TooltipPrimitive.Portal>
-  )
+  );
 }
 
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
diff --git a/packages/ui/primitives/typography.tsx b/packages/ui/primitives/typography.tsx
index 543d902..1e027cb 100644
--- a/packages/ui/primitives/typography.tsx
+++ b/packages/ui/primitives/typography.tsx
@@ -53,7 +53,7 @@ export const Typography: FC<PropsWithChildren<TypographyProps>> = ({
       ? 'div'
       : variant === 'lead' || variant === 'muted'
         ? 'p'
-        : variant ?? 'p';
+        : (variant ?? 'p');
 
   return (
     <Component className={cn(typographyStyles({ variant }), className)}>
diff --git a/tests/api/api-v1.test.ts b/tests/api/api-v1.test.ts
index 7a0fe9f..adc9986 100644
--- a/tests/api/api-v1.test.ts
+++ b/tests/api/api-v1.test.ts
@@ -1,3 +1,5 @@
+import type { TestApiKey, TestUser } from '../helpers';
+
 import { beforeEach, describe, expect, it } from 'vitest';
 
 import {
@@ -7,8 +9,6 @@ import {
   createTestForm,
   createTestFormData,
   createTestUser,
-  type TestApiKey,
-  type TestUser,
 } from '../helpers';
 
 describe('API v1', () => {
@@ -63,9 +63,9 @@ describe('API v1', () => {
         await caller.forms.list({ page: 1, perPage: 20 });
       }
 
-      await expect(
-        caller.forms.list({ page: 1, perPage: 20 }),
-      ).rejects.toThrow('Rate limit exceeded');
+      await expect(caller.forms.list({ page: 1, perPage: 20 })).rejects.toThrow(
+        'Rate limit exceeded',
+      );
     });
   });
 
@@ -215,9 +215,9 @@ describe('API v1', () => {
         const caller = await createApiV1Caller(apiKey.key);
         await caller.forms.delete({ formId: form.id });
 
-        await expect(
-          caller.forms.get({ formId: form.id }),
-        ).rejects.toThrow('Form not found');
+        await expect(caller.forms.get({ formId: form.id })).rejects.toThrow(
+          'Form not found',
+        );
       });
 
       it('throws NOT_FOUND for form owned by another user', async () => {
@@ -277,8 +277,14 @@ describe('API v1', () => {
 
     describe('bulkUpdate', () => {
       it('updates multiple forms', async () => {
-        const form1 = await createTestForm({ userId: user.id, title: 'Form 1' });
-        const form2 = await createTestForm({ userId: user.id, title: 'Form 2' });
+        const form1 = await createTestForm({
+          userId: user.id,
+          title: 'Form 1',
+        });
+        const form2 = await createTestForm({
+          userId: user.id,
+          title: 'Form 2',
+        });
 
         const caller = await createApiV1Caller(apiKey.key);
         await caller.forms.bulkUpdate({
diff --git a/tests/api/form.test.ts b/tests/api/form.test.ts
index cb9fdf9..f8de14a 100644
--- a/tests/api/form.test.ts
+++ b/tests/api/form.test.ts
@@ -1,11 +1,11 @@
+import type { TestSession, TestUser } from '../helpers';
+
 import { beforeEach, describe, expect, it } from 'vitest';
 
 import {
   createAuthenticatedCaller,
   createTestSession,
   createTestUser,
-  type TestSession,
-  type TestUser,
 } from '../helpers';
 
 describe('Form API', () => {
diff --git a/tests/api/formData.test.ts b/tests/api/formData.test.ts
index 25898f1..d2a8b63 100644
--- a/tests/api/formData.test.ts
+++ b/tests/api/formData.test.ts
@@ -1,3 +1,5 @@
+import type { TestForm, TestSession, TestUser } from '../helpers';
+
 import { beforeEach, describe, expect, it } from 'vitest';
 
 import {
@@ -5,9 +7,6 @@ import {
   createTestForm,
   createTestSession,
   createTestUser,
-  type TestForm,
-  type TestSession,
-  type TestUser,
 } from '../helpers';
 
 describe('FormData API', () => {
diff --git a/tests/api/security.test.ts b/tests/api/security.test.ts
index 8084ed4..6bbdd4b 100644
--- a/tests/api/security.test.ts
+++ b/tests/api/security.test.ts
@@ -1,3 +1,5 @@
+import type { TestForm, TestFormData, TestSession, TestUser } from '../helpers';
+
 import { beforeEach, describe, expect, it } from 'vitest';
 
 import {
@@ -7,10 +9,6 @@ import {
   createTestSession,
   createTestUser,
   createUnauthenticatedCaller,
-  type TestForm,
-  type TestFormData,
-  type TestSession,
-  type TestUser,
 } from '../helpers';
 
 describe('Security Matrix', () => {
@@ -75,7 +73,7 @@ describe('Security Matrix', () => {
       await expect(callerB.form.delete({ id: formA.id })).rejects.toThrow();
     });
 
-    it("User B form list does not include User A forms", async () => {
+    it('User B form list does not include User A forms', async () => {
       const formB = await createTestForm({
         userId: userB.id,
         title: 'User B Form',
@@ -124,9 +122,9 @@ describe('Security Matrix', () => {
     });
 
     it('form.get requires authentication', async () => {
-      await expect(
-        unauthCaller.form.get({ formId: formA.id }),
-      ).rejects.toThrow('UNAUTHORIZED');
+      await expect(unauthCaller.form.get({ formId: formA.id })).rejects.toThrow(
+        'UNAUTHORIZED',
+      );
     });
 
     it('form.update requires authentication', async () => {
@@ -136,9 +134,9 @@ describe('Security Matrix', () => {
     });
 
     it('form.delete requires authentication', async () => {
-      await expect(
-        unauthCaller.form.delete({ id: formA.id }),
-      ).rejects.toThrow('UNAUTHORIZED');
+      await expect(unauthCaller.form.delete({ id: formA.id })).rejects.toThrow(
+        'UNAUTHORIZED',
+      );
     });
 
     it('form.list requires authentication', async () => {
diff --git a/tests/api/user.test.ts b/tests/api/user.test.ts
index 06c7f1a..07c62f5 100644
--- a/tests/api/user.test.ts
+++ b/tests/api/user.test.ts
@@ -1,3 +1,5 @@
+import type { TestSession, TestUser } from '../helpers';
+
 import { beforeEach, describe, expect, it } from 'vitest';
 
 import {
@@ -5,8 +7,6 @@ import {
   createTestSession,
   createTestUser,
   getTestDb,
-  type TestSession,
-  type TestUser,
 } from '../helpers';
 
 describe('User API', () => {
diff --git a/tests/helpers/api-v1.ts b/tests/helpers/api-v1.ts
index 75ad907..e16bfd6 100644
--- a/tests/helpers/api-v1.ts
+++ b/tests/helpers/api-v1.ts
@@ -1,7 +1,8 @@
 import { getTestDb } from './db';
 
 export async function createApiV1Caller(apiKeyToken?: string) {
-  const { createApiV1CallerFactory } = await import('@formbase/api/routers/api-v1');
+  const { createApiV1CallerFactory } =
+    await import('@formbase/api/routers/api-v1');
 
   const headers = new Headers();
   if (apiKeyToken) {
diff --git a/tests/helpers/db.ts b/tests/helpers/db.ts
index 26f4623..0ad36e5 100644
--- a/tests/helpers/db.ts
+++ b/tests/helpers/db.ts
@@ -1,5 +1,8 @@
-import { createClient, type Client } from '@libsql/client';
-import { drizzle, type LibSQLDatabase } from 'drizzle-orm/libsql';
+import type { Client } from '@libsql/client';
+import type { LibSQLDatabase } from 'drizzle-orm/libsql';
+
+import { createClient } from '@libsql/client';
+import { drizzle } from 'drizzle-orm/libsql';
 
 import * as schema from '@formbase/db/schema';
 
diff --git a/tests/helpers/factories.ts b/tests/helpers/factories.ts
index aa02f2a..8a6e5dc 100644
--- a/tests/helpers/factories.ts
+++ b/tests/helpers/factories.ts
@@ -1,6 +1,6 @@
+import { generateApiKey } from '@formbase/api/lib/api-key';
 import { apiKeys, formDatas, forms } from '@formbase/db/schema';
 import { generateId } from '@formbase/utils/generate-id';
-import { generateApiKey } from '@formbase/api/lib/api-key';
 
 import { getTestDb } from './db';
 
diff --git a/tests/package.json b/tests/package.json
index b10be38..b9e6660 100644
--- a/tests/package.json
+++ b/tests/package.json
@@ -1,6 +1,17 @@
 {
   "name": "@formbase/tests",
   "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "test:e2e": "playwright test",
+    "test:e2e:cleanup": "bun run --env-file=../.env.local ./e2e/cleanup.ts",
+    "test:e2e:seed": "bun run --env-file=../.env.local ./e2e/seed.ts",
+    "test:e2e:ui": "playwright test --ui",
+    "test:watch": "vitest"
+  },
   "devDependencies": {
     "@formbase/api": "workspace:*",
     "@formbase/db": "workspace:*",
@@ -12,16 +23,5 @@
     "drizzle-orm": "^0.30.10",
     "typescript": "5.8.2",
     "vitest": "^2.1.8"
-  },
-  "private": true,
-  "scripts": {
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "test:coverage": "vitest run --coverage",
-    "test:e2e": "playwright test",
-    "test:e2e:ui": "playwright test --ui",
-    "test:e2e:seed": "bun run --env-file=../apps/web/.env.local ./e2e/seed.ts",
-    "test:e2e:cleanup": "bun run --env-file=../apps/web/.env.local ./e2e/cleanup.ts"
-  },
-  "type": "module"
+  }
 }
diff --git a/tests/routes/submission.test.ts b/tests/routes/submission.test.ts
index c725259..64b494c 100644
--- a/tests/routes/submission.test.ts
+++ b/tests/routes/submission.test.ts
@@ -1,3 +1,5 @@
+import type { TestForm, TestUser } from '../helpers';
+
 import { beforeEach, describe, expect, it } from 'vitest';
 
 import {
@@ -5,8 +7,6 @@ import {
   createTestUser,
   createUnauthenticatedCaller,
   getTestDb,
-  type TestForm,
-  type TestUser,
 } from '../helpers';
 
 describe('Public Submission (formData.setFormData)', () => {
diff --git a/tests/vitest.config.ts b/tests/vitest.config.ts
index 296ae6c..16d4441 100644
--- a/tests/vitest.config.ts
+++ b/tests/vitest.config.ts
@@ -1,10 +1,12 @@
 import path from 'path';
+
 import { defineConfig } from 'vitest/config';
 
 process.env['SKIP_ENV_VALIDATION'] = 'true';
 process.env.NODE_ENV = 'test';
 process.env['DATABASE_URL'] = 'file::memory:?cache=shared';
-process.env['BETTER_AUTH_SECRET'] = 'test-secret-minimum-32-characters-long-for-testing';
+process.env['BETTER_AUTH_SECRET'] =
+  'test-secret-minimum-32-characters-long-for-testing';
 process.env['NEXT_PUBLIC_APP_URL'] = 'http://localhost:3000';
 process.env['ALLOW_SIGNIN_SIGNUP'] = 'true';
 
@@ -32,10 +34,7 @@ export default defineConfig({
       provider: 'v8',
       reporter: ['text', 'json', 'html', 'lcov'],
       reportsDirectory: './coverage',
-      include: [
-        '../packages/api/**/*.ts',
-        '../apps/web/src/app/api/**/*.ts',
-      ],
+      include: ['../packages/api/**/*.ts', '../apps/web/src/app/api/**/*.ts'],
       exclude: [
         '**/*.test.ts',
         '**/*.spec.ts',
diff --git a/turbo.json b/turbo.json
index 969e455..180ce45 100644
--- a/turbo.json
+++ b/turbo.json
@@ -1,6 +1,6 @@
 {
   "$schema": "https://turbo.build/schema.json",
-  "globalDependencies": ["apps/web/.env.local"],
+  "globalDependencies": [".env.local"],
   "tasks": {
     "build": {
       "dependsOn": ["^build", "^db:migrate"],
@@ -29,7 +29,8 @@
         "STORAGE_USESSL",
         "STORAGE_ACCESS_KEY",
         "STORAGE_SECRET_KEY",
-        "STORAGE_BUCKET"
+        "STORAGE_BUCKET",
+        "REDIS_URL"
       ],
       "outputs": [".next/**", "!.next/cache/**", "dist/**"]
     },

From 305798f9d76b5c3229cd2f8b4de73ebef1430337 Mon Sep 17 00:00:00 2001
From: ephraimduncan <ephraimduncan68@gmail.com>
Date: Mon, 26 Jan 2026 22:44:09 +0000
Subject: [PATCH 2/2] refactor: consolidate webhook URL validation into shared
 utility

Extracts duplicated URL validation logic into @formbase/utils/webhook
and reuses buildWebhookPayload in createTestWebhookJob. Also adds
missing HTTPS validation to frontend webhook settings schema.
---
 .../app/(main)/form/[id]/form-settings.tsx    | 10 +-
 packages/api/routers/form.ts                  | 27 +-----
 packages/queue/services/delivery.ts           | 95 ++++++++-----------
 packages/utils/package.json                   |  3 +-
 packages/utils/webhook.ts                     | 15 +++
 5 files changed, 68 insertions(+), 82 deletions(-)
 create mode 100644 packages/utils/webhook.ts

diff --git a/apps/web/src/app/(main)/form/[id]/form-settings.tsx b/apps/web/src/app/(main)/form/[id]/form-settings.tsx
index 9c1a92d..d541399 100644
--- a/apps/web/src/app/(main)/form/[id]/form-settings.tsx
+++ b/apps/web/src/app/(main)/form/[id]/form-settings.tsx
@@ -16,6 +16,7 @@ import { toast } from 'sonner';
 import { z } from 'zod';
 
 import { type RouterOutputs } from '@formbase/api';
+import { isValidWebhookUrl } from '@formbase/utils/webhook';
 import { type User } from '@formbase/auth';
 import {
   Form,
@@ -65,7 +66,14 @@ const honeypotFieldSchema = z.object({
 
 const webhookSettingsSchema = z.object({
   enableWebhook: z.boolean().default(false).optional(),
-  webhookUrl: z.string().url().optional().or(z.literal('')),
+  webhookUrl: z
+    .string()
+    .url()
+    .refine(isValidWebhookUrl, {
+      message: 'URL must use HTTPS (localhost allowed for development)',
+    })
+    .optional()
+    .or(z.literal('')),
 });
 
 type FormNameSchema = z.infer<typeof formNameSchema>;
diff --git a/packages/api/routers/form.ts b/packages/api/routers/form.ts
index 4013a3f..ea07e3a 100644
--- a/packages/api/routers/form.ts
+++ b/packages/api/routers/form.ts
@@ -5,6 +5,7 @@ import { drizzlePrimitives } from '@formbase/db';
 import { formDatas, forms, onboardingForms } from '@formbase/db/schema';
 import { createTestWebhookJob } from '@formbase/queue';
 import { generateId } from '@formbase/utils/generate-id';
+import { isValidWebhookUrl } from '@formbase/utils/webhook';
 
 import { createTRPCRouter, protectedProcedure, publicProcedure } from '../trpc';
 import { parseJsonArray, serializeJson } from '../utils/json';
@@ -134,28 +135,10 @@ export const formRouter = createTRPCRouter({
         webhookUrl: z
           .string()
           .url()
-          .refine(
-            (url) => {
-              try {
-                const parsed = new URL(url);
-                if (parsed.protocol === 'https:') return true;
-                if (
-                  parsed.protocol === 'http:' &&
-                  (parsed.hostname === 'localhost' ||
-                    parsed.hostname === '127.0.0.1')
-                ) {
-                  return true;
-                }
-                return false;
-              } catch {
-                return false;
-              }
-            },
-            {
-              message:
-                'Webhook URL must use HTTPS (localhost allowed for development)',
-            },
-          )
+          .refine(isValidWebhookUrl, {
+            message:
+              'Webhook URL must use HTTPS (localhost allowed for development)',
+          })
           .optional()
           .nullable(),
       }),
diff --git a/packages/queue/services/delivery.ts b/packages/queue/services/delivery.ts
index 4b5ea40..aa2caa6 100644
--- a/packages/queue/services/delivery.ts
+++ b/packages/queue/services/delivery.ts
@@ -5,26 +5,13 @@ import { eq } from 'drizzle-orm';
 import { db } from '@formbase/db';
 import { formDatas, forms, webhookDeliveryLogs } from '@formbase/db/schema';
 import { generateId } from '@formbase/utils/generate-id';
+import { isValidWebhookUrl } from '@formbase/utils/webhook';
 
 import { getWebhookQueue } from '../queues/webhook';
 
 const WEBHOOK_TIMEOUT_MS = 30_000;
 
-export function validateWebhookUrl(url: string): boolean {
-  try {
-    const parsed = new URL(url);
-    if (parsed.protocol === 'https:') return true;
-    if (
-      parsed.protocol === 'http:' &&
-      (parsed.hostname === 'localhost' || parsed.hostname === '127.0.0.1')
-    ) {
-      return true;
-    }
-    return false;
-  } catch {
-    return false;
-  }
-}
+export { isValidWebhookUrl as validateWebhookUrl };
 
 function extractFileUrls(data: Record<string, unknown>): string[] {
   const urls: string[] = [];
@@ -145,6 +132,29 @@ export async function deliverWebhook(data: WebhookJobData): Promise<{
   }
 }
 
+function buildMockPayload(
+  formId: string,
+  formTitle: string,
+): WebhookJobData['payload'] {
+  return {
+    event: 'submission.created',
+    payload: {
+      id: 'test-submission-id',
+      formId,
+      formTitle,
+      data: {
+        name: 'Test User',
+        email: 'test@example.com',
+        message: 'This is a test submission',
+      },
+      fileUrls: [],
+      isSpam: false,
+      spamReason: null,
+      createdAt: new Date().toISOString(),
+    },
+  };
+}
+
 export async function createTestWebhookJob(
   formId: string,
   webhookUrl: string,
@@ -159,53 +169,22 @@ export async function createTestWebhookJob(
   const lastSubmission = await db.query.formDatas.findFirst({
     where: eq(formDatas.formId, formId),
     orderBy: (table, { desc }) => desc(table.createdAt),
-    columns: {
-      id: true,
-      data: true,
-      isSpam: true,
-      spamReason: true,
-      createdAt: true,
-    },
+    columns: { id: true },
   });
 
   let payload: WebhookJobData['payload'];
+  let formDataId: string | null = null;
 
   if (lastSubmission) {
-    const parsedData = JSON.parse(lastSubmission.data) as Record<
-      string,
-      unknown
-    >;
-    payload = {
-      event: 'submission.created',
-      payload: {
-        id: lastSubmission.id,
-        formId: form.id,
-        formTitle: form.title,
-        data: parsedData,
-        fileUrls: extractFileUrls(parsedData),
-        isSpam: lastSubmission.isSpam,
-        spamReason: lastSubmission.spamReason,
-        createdAt: lastSubmission.createdAt.toISOString(),
-      },
-    };
+    const built = await buildWebhookPayload(formId, lastSubmission.id);
+    if (built) {
+      payload = built;
+      formDataId = lastSubmission.id;
+    } else {
+      payload = buildMockPayload(form.id, form.title);
+    }
   } else {
-    payload = {
-      event: 'submission.created',
-      payload: {
-        id: 'test-submission-id',
-        formId: form.id,
-        formTitle: form.title,
-        data: {
-          name: 'Test User',
-          email: 'test@example.com',
-          message: 'This is a test submission',
-        },
-        fileUrls: [],
-        isSpam: false,
-        spamReason: null,
-        createdAt: new Date().toISOString(),
-      },
-    };
+    payload = buildMockPayload(form.id, form.title);
   }
 
   const logId = generateId(15);
@@ -213,7 +192,7 @@ export async function createTestWebhookJob(
   await db.insert(webhookDeliveryLogs).values({
     id: logId,
     formId,
-    formDataId: lastSubmission?.id ?? null,
+    formDataId,
     webhookUrl,
     payload: JSON.stringify(payload),
     status: 'pending',
@@ -225,7 +204,7 @@ export async function createTestWebhookJob(
     'deliver',
     {
       formId,
-      formDataId: lastSubmission?.id ?? 'test',
+      formDataId: formDataId ?? 'test',
       webhookUrl,
       payload,
       deliveryLogId: logId,
diff --git a/packages/utils/package.json b/packages/utils/package.json
index 73bdbea..d2fda15 100644
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@@ -8,7 +8,8 @@
     "./server": "./server.ts",
     "./flatten-object": "./flatten-object.ts",
     "./generate-id": "./generate-id.ts",
-    "./url": "./url.ts"
+    "./url": "./url.ts",
+    "./webhook": "./webhook.ts"
   },
   "scripts": {
     "lint": "eslint . --cache --max-warnings 0",
diff --git a/packages/utils/webhook.ts b/packages/utils/webhook.ts
new file mode 100644
index 0000000..c613f90
--- /dev/null
+++ b/packages/utils/webhook.ts
@@ -0,0 +1,15 @@
+export function isValidWebhookUrl(url: string): boolean {
+  try {
+    const parsed = new URL(url);
+    if (parsed.protocol === 'https:') return true;
+    if (
+      parsed.protocol === 'http:' &&
+      (parsed.hostname === 'localhost' || parsed.hostname === '127.0.0.1')
+    ) {
+      return true;
+    }
+    return false;
+  } catch {
+    return false;
+  }
+}