From 008ed4dfcfe3f4a99c5cbd8026a3f2b433e789c9 Mon Sep 17 00:00:00 2001
From: "Irsyad A. Panjaitan" <irsyad@parsinta.com>
Date: Fri, 16 Aug 2024 22:38:59 +0700
Subject: [PATCH 1/6] temp

---
 app/(app)/colors/(colors)/color-generator.tsx |   2 -
 app/(app)/colors/(colors)/color-item.tsx      |  59 ++++-----
 app/(app)/colors/(colors)/color-palette.tsx   |   4 +-
 app/(app)/colors/(colors)/color-row.tsx       |   9 +-
 app/(app)/themes/blocks.tsx                   |  14 +-
 app/(app)/themes/blocks/buttons.tsx           |  26 ++++
 app/(app)/themes/blocks/forms/login-form.tsx  |  31 -----
 .../themes/blocks/forms/login-root-form.tsx   |  32 -----
 .../themes/blocks/forms/login-social.tsx      |  38 ------
 app/(app)/themes/blocks/forms/toggle-form.tsx |  29 -----
 app/(app)/themes/blocks/login-form.tsx        |  27 ++++
 .../themes/blocks/range-calendar-blocks.tsx   |  24 ++++
 app/(app)/themes/page.tsx                     |   7 +-
 app/(app)/themes/themes-list.ts               | 122 ++++++++++++++++++
 app/(app)/themes/themes.tsx                   |  55 +++++++-
 components/ui/button.tsx                      |   4 +-
 components/ui/field.tsx                       |   4 +-
 components/ui/input-otp.tsx                   |   2 +-
 components/ui/link.tsx                        |   8 +-
 components/ui/primitive.tsx                   |   6 +-
 .../docs/getting-started/installation.mdx     |   3 +-
 resources/styles/app.css                      |   8 +-
 22 files changed, 303 insertions(+), 211 deletions(-)
 create mode 100644 app/(app)/themes/blocks/buttons.tsx
 delete mode 100644 app/(app)/themes/blocks/forms/login-form.tsx
 delete mode 100644 app/(app)/themes/blocks/forms/login-root-form.tsx
 delete mode 100644 app/(app)/themes/blocks/forms/login-social.tsx
 delete mode 100644 app/(app)/themes/blocks/forms/toggle-form.tsx
 create mode 100644 app/(app)/themes/blocks/login-form.tsx
 create mode 100644 app/(app)/themes/blocks/range-calendar-blocks.tsx
 create mode 100644 app/(app)/themes/themes-list.ts

diff --git a/app/(app)/colors/(colors)/color-generator.tsx b/app/(app)/colors/(colors)/color-generator.tsx
index c45ab104..16afbb8e 100644
--- a/app/(app)/colors/(colors)/color-generator.tsx
+++ b/app/(app)/colors/(colors)/color-generator.tsx
@@ -36,8 +36,6 @@ export function ColorGenerator() {
 
         <div className="lg:col-span-2">
           <ColorRow
-            showItem={isDesktop}
-            swatchClassName="sm:w-full lg:h-32 lg:w-full size-10"
             item={{
               name: getColorName(defaultColor.toString('hex')),
               children: colorScales as any
diff --git a/app/(app)/colors/(colors)/color-item.tsx b/app/(app)/colors/(colors)/color-item.tsx
index 2bed8e28..13730d8f 100644
--- a/app/(app)/colors/(colors)/color-item.tsx
+++ b/app/(app)/colors/(colors)/color-item.tsx
@@ -8,7 +8,7 @@ import type { ListBoxItemProps } from 'react-aria-components'
 import { ListBoxItem } from 'react-aria-components'
 import type { ColorShade, FormatOnlyForTailwindVariableType } from 'resources/types'
 import { toast } from 'sonner'
-import { cn, ColorSwatch, Tooltip } from 'ui'
+import { cn, isBrightColor } from 'ui'
 import { copyToClipboard } from 'usemods'
 
 interface ColorItemProps extends ListBoxItemProps {
@@ -16,13 +16,9 @@ interface ColorItemProps extends ListBoxItemProps {
   name: string
   isForTailwindVariable: boolean
   selectedFormat: FormatOnlyForTailwindVariableType | ColorFormat
-  swatchClassName?: string
-  showItem?: boolean
 }
 
 const ColorItem = ({
-  showItem,
-  swatchClassName,
   item,
   name,
   isForTailwindVariable,
@@ -38,48 +34,39 @@ const ColorItem = ({
     setTimeout(() => {
       setCopied(false)
     }, 2000)
-    toast('Copied to clipboard!')
+    toast.success(`Copy ${toCopy} to clipboard.`, {
+      classNames: {
+        toast: '[&:has([data-icon])_[data-content]]:ml-0',
+        icon: 'hidden'
+      }
+    })
   }
   return (
     <ListBoxItem
       textValue={name}
       className={cn(
-        'group w-full focus:outline-none cursor-pointer focus-visible:outline-primary-600 focus-visible:outline-2 focus-visible:outline-offset-1 rounded-md relative'
+        'w-full h-14 sm:h-24 group focus:outline-none focus:rounded-sm cursor-pointer rounded relative',
+        isBrightColor(item.color)
+          ? 'ring-1 ring-inset ring-black/10'
+          : 'dark:ring-1 dark:ring-inset dark:ring-white/10'
       )}
       onAction={() => handleCopy(parseColor(item.color as string)?.toString(selectedFormat))}
       style={{
-        color: textColorBasedOnBg(item.color)
+        color: textColorBasedOnBg(item.color),
+        backgroundColor: item.color
       }}
     >
-      <ColorSwatch
-        aria-label={`${name} of ${item.shade}`}
-        colorName={name}
-        color={item.color}
-        className={cn('size-10 sm:w-full lg:size-8', swatchClassName)}
-      />
-      <div className="absolute lg:left-1/2 lg:-translate-x-1/2 group-hover:block group-focus:block hidden group-pressed:block lg:top-4 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+      <span
+        className={cn(
+          'group-hover:block hidden text-xs left-1/2 -translate-x-1/2 top-2 absolute font-mono',
+          copied && 'block'
+        )}
+      >
         {copied ? <IconCheck /> : <IconDuplicate />}
-      </div>
-
-      {showItem && (
-        <div className="absolute bottom-0 block line-clamp-1 p-1 text-[0.70rem] font-mono">
-          <span className="w-fit mb-1">{item.shade}</span>
-          <Tooltip>
-            <Tooltip.Trigger className="w-full text-left focus:outline-none">
-              {isForTailwindVariable &&
-                selectedFormat !== 'hexa' &&
-                selectedFormat !== 'hex' &&
-                'tw/'}
-              {selectedFormat === 'hex'
-                ? parseColor(item.color as string)?.toString(selectedFormat)
-                : selectedFormat}
-            </Tooltip.Trigger>
-            <Tooltip.Content>
-              {parseColor(item.color as string)?.toString(selectedFormat)}
-            </Tooltip.Content>
-          </Tooltip>
-        </div>
-      )}
+      </span>
+      <span className="text-xs left-1/2 -translate-x-1/2 bottom-2 absolute font-mono block">
+        {item.shade}
+      </span>
     </ListBoxItem>
   )
 }
diff --git a/app/(app)/colors/(colors)/color-palette.tsx b/app/(app)/colors/(colors)/color-palette.tsx
index 98a6b797..1b2f438a 100644
--- a/app/(app)/colors/(colors)/color-palette.tsx
+++ b/app/(app)/colors/(colors)/color-palette.tsx
@@ -28,7 +28,7 @@ export function ColorPalette() {
 
   useEffect(() => {
     if (inView && hasMore) {
-      const nextPage = colors.length + 9
+      const nextPage = colors.length + 8
       const newColors = filteredColors.slice(0, nextPage)
       setColors(newColors)
       if (newColors.length >= filteredColors.length) {
@@ -43,7 +43,7 @@ export function ColorPalette() {
         <ColorGenerator />
         <div
           className={gridStyles({
-            columns: { initial: 1, sm: 2, lg: 3 },
+            columns: { initial: 1, sm: 2 },
             gap: { initial: 2 }
           })}
         >
diff --git a/app/(app)/colors/(colors)/color-row.tsx b/app/(app)/colors/(colors)/color-row.tsx
index a5f52451..c94a070f 100644
--- a/app/(app)/colors/(colors)/color-row.tsx
+++ b/app/(app)/colors/(colors)/color-row.tsx
@@ -12,7 +12,7 @@ import { IconBrandTailwindcss } from 'justd-icons'
 import { ListBox, Text, ToggleButton } from 'react-aria-components'
 import type { ColorItemProps, FormatOnlyForTailwindVariableType } from 'resources/types'
 import { toast } from 'sonner'
-import { buttonStyles, gridStyles, Heading, Select, Tooltip } from 'ui'
+import { buttonStyles, gridStyles, Select, Tooltip } from 'ui'
 
 import { ColorItem } from './color-item'
 
@@ -31,14 +31,11 @@ export function ColorRow({ showItem = false, swatchClassName, item }: ColorRowPr
   return (
     <div className="p-2 bg-tertiary border rounded-lg overflow-hidden">
       <div className="flex mb-2 items-center gap-x-1 justify-between">
-        <Heading
-          level={3}
-          className="tracking-tight text-muted-fg font-mono text-sm font-medium sm:text-sm"
-        >
+        <h3 className="tracking-tight text-muted-fg font-mono text-sm font-medium sm:text-sm">
           {tailwindColorNames.includes(item.name)
             ? item.name
             : getColorName(item.children[4].color)}
-        </Heading>
+        </h3>
         <div className="flex gap-x-1">
           <>
             <CopyJsonColorShades
diff --git a/app/(app)/themes/blocks.tsx b/app/(app)/themes/blocks.tsx
index 1d9af4df..74539043 100644
--- a/app/(app)/themes/blocks.tsx
+++ b/app/(app)/themes/blocks.tsx
@@ -1,14 +1,16 @@
-import { LoginRootForm } from '@/app/(app)/themes/blocks/forms/login-root-form'
-import { LoginSocial } from '@/app/(app)/themes/blocks/forms/login-social'
+'use client'
+
+import { LoginForm } from './blocks/login-form'
+import { RangeCalendarBlocks } from '@/app/(app)/themes/blocks/range-calendar-blocks'
+import { Buttons } from '@/app/(app)/themes/blocks/buttons'
 
-import { LoginForm } from './blocks/forms/login-form'
 
 export function Blocks() {
   return (
-    <div className="grid items-start grid-cols-3 gap-2">
+    <div className="grid grid-cols-3 gap-2">
       <LoginForm />
-      <LoginRootForm />
-      <LoginSocial />
+      <RangeCalendarBlocks />
+      <Buttons />
     </div>
   )
 }
diff --git a/app/(app)/themes/blocks/buttons.tsx b/app/(app)/themes/blocks/buttons.tsx
new file mode 100644
index 00000000..7c153349
--- /dev/null
+++ b/app/(app)/themes/blocks/buttons.tsx
@@ -0,0 +1,26 @@
+'use client'
+
+import { Button, Card, Checkbox, Switch } from 'ui'
+
+export function Buttons() {
+  return (
+    <div className="gap-2 grid">
+      <Card className="grid place-content-center gap-2">
+        <div className="grid grid-cols-2 gap-2">
+          <Button>Label</Button>
+          <Button intent="secondary">Label</Button>
+        </div>
+        <div className="grid grid-cols-2 gap-2">
+          <Button appearance="outline">Label</Button>
+          <Button appearance="plain">Label</Button>
+        </div>
+      </Card>
+      <Card className="grid place-content-center">
+        <Checkbox isReadOnly defaultSelected>Remember me</Checkbox>
+      </Card>
+      <Card className="grid place-content-center">
+        <Switch isReadOnly defaultSelected>Toggle Theme</Switch>
+      </Card>
+    </div>
+  )
+}
diff --git a/app/(app)/themes/blocks/forms/login-form.tsx b/app/(app)/themes/blocks/forms/login-form.tsx
deleted file mode 100644
index 0ceaae86..00000000
--- a/app/(app)/themes/blocks/forms/login-form.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-'use client'
-
-import { Button, Card, Checkbox, Form, Link, TextField } from 'ui'
-
-export function LoginForm() {
-  return (
-    <Card>
-      <Card.Header title="Login" description="Don't loose the level, just keep on going." />
-      <Form onSubmit={() => {}}>
-        <Card.Content className="space-y-6">
-          <TextField isRequired label="Email" placeholder="Enter your email" />
-          <TextField
-            isRequired
-            label="Password"
-            type="password"
-            placeholder="Enter your password"
-          />
-          <div className="flex justify-between items-center">
-            <Checkbox>Remember me</Checkbox>
-            <Link intent="primary" href="#">
-              Forgot password?
-            </Link>
-          </div>
-        </Card.Content>
-        <Card.Footer>
-          <Button type="submit">Login</Button>
-        </Card.Footer>
-      </Form>
-    </Card>
-  )
-}
diff --git a/app/(app)/themes/blocks/forms/login-root-form.tsx b/app/(app)/themes/blocks/forms/login-root-form.tsx
deleted file mode 100644
index 1236e024..00000000
--- a/app/(app)/themes/blocks/forms/login-root-form.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-'use client'
-
-import { Button, Card, Choicebox, Form, TextField } from 'ui'
-
-export function LoginRootForm() {
-  return (
-    <Card>
-      <Card.Header
-        title="Sign in "
-        description="This site uses essential cookies. See our Cookie Notice for more information."
-      />
-      <Form onSubmit={() => {}}>
-        <Card.Content className="space-y-4">
-          <Choicebox selectionMode="single" columns={1} gap={2}>
-            <Choicebox.Item
-              id="root"
-              description="Account owner that performs tasks requiring unrestricted access. Learn more"
-              title="Root"
-            />
-            <Choicebox.Item
-              id="iam"
-              description="User within an account that performs daily tasks. Learn more"
-              title="IAM user"
-            />
-          </Choicebox>
-          <TextField isRequired label="Account ID (12 digits)" />
-          <Button type="submit">Next</Button>
-        </Card.Content>
-      </Form>
-    </Card>
-  )
-}
diff --git a/app/(app)/themes/blocks/forms/login-social.tsx b/app/(app)/themes/blocks/forms/login-social.tsx
deleted file mode 100644
index afc137c1..00000000
--- a/app/(app)/themes/blocks/forms/login-social.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { IconBrandGithub, IconBrandThreads, IconBrandX } from 'justd-icons'
-import { Button, Card, Link, ShowMore } from 'ui'
-
-export function LoginSocial() {
-  return (
-    <Card>
-      <Card.Header className="text-center">Log in</Card.Header>
-      <Card.Content className="flex flex-col gap-y-3">
-        <Button shape="circle" size="large" intent="dark">
-          <IconBrandGithub />
-          Continue with Github
-        </Button>
-        <Button shape="circle" size="large" intent="light/dark">
-          <IconBrandX />
-          Continue with X
-        </Button>
-        <Button shape="circle" size="large" intent="light/dark">
-          <IconBrandThreads />
-          Continue with Threads
-        </Button>
-
-        <ShowMore className="my-4" as="text" text="Or" />
-
-        <Button shape="circle" size="large" appearance="outline">
-          Continue with SAML SSO
-        </Button>
-        <Button shape="circle" size="large" appearance="outline">
-          Continue with Passkey
-        </Button>
-      </Card.Content>
-      <Card.Footer className="justify-center">
-        <Link intent="primary" href="#">
-          Continue with Email
-        </Link>
-      </Card.Footer>
-    </Card>
-  )
-}
diff --git a/app/(app)/themes/blocks/forms/toggle-form.tsx b/app/(app)/themes/blocks/forms/toggle-form.tsx
deleted file mode 100644
index ea77314e..00000000
--- a/app/(app)/themes/blocks/forms/toggle-form.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-'use client'
-
-import { Button, Card, Checkbox, Link, TextField } from 'ui'
-
-export function ToggleForm() {
-  return (
-    <Card>
-      <Card.Header
-        title="Team members"
-        description="Share this link with your team to give them access to your organization."
-      />
-      <Card.Content className="space-y-6">
-        <div className="flex gap-2 w-full">
-          <TextField isRequired placeholder="Enter your email" />
-          <Button type="submit">Send link</Button>
-        </div>
-        <div className="flex justify-between items-center">
-          <Checkbox>Remember me</Checkbox>
-          <Link intent="primary" href="#">
-            Forgot password?
-          </Link>
-        </div>
-      </Card.Content>
-      <Card.Footer>
-        <Button type="submit">Login</Button>
-      </Card.Footer>
-    </Card>
-  )
-}
diff --git a/app/(app)/themes/blocks/login-form.tsx b/app/(app)/themes/blocks/login-form.tsx
new file mode 100644
index 00000000..85c41771
--- /dev/null
+++ b/app/(app)/themes/blocks/login-form.tsx
@@ -0,0 +1,27 @@
+'use client'
+
+import { Button, Card, Checkbox, Link, TextField } from 'ui'
+
+export function LoginForm() {
+  return (
+    <Card className="max-w-md w-full mx-auto">
+      <Card.Header>
+        <Card.Title>Login</Card.Title>
+        <Card.Description>Don't loose the level, just keep on going.</Card.Description>
+      </Card.Header>
+      <Card.Content className="space-y-6">
+        <TextField isRequired label="Email" placeholder="Enter your email" />
+        <TextField isRequired label="Password" type="password" placeholder="Enter your password" />
+        <div className="flex justify-between items-center">
+          <Checkbox>Remember me</Checkbox>
+          <Link intent="primary" href="#">
+            Forgot password?
+          </Link>
+        </div>
+      </Card.Content>
+      <Card.Footer>
+        <Button className="w-full">Login</Button>
+      </Card.Footer>
+    </Card>
+  )
+}
diff --git a/app/(app)/themes/blocks/range-calendar-blocks.tsx b/app/(app)/themes/blocks/range-calendar-blocks.tsx
new file mode 100644
index 00000000..069b03f5
--- /dev/null
+++ b/app/(app)/themes/blocks/range-calendar-blocks.tsx
@@ -0,0 +1,24 @@
+'use client'
+
+import { Button, Calendar, Card, Checkbox, Link, RangeCalendar, TextField } from 'ui'
+import React from 'react'
+import { getLocalTimeZone, parseDate, today } from '@internationalized/date'
+import { useDateFormatter } from '@react-aria/i18n'
+
+export function RangeCalendarBlocks() {
+  const now = today(getLocalTimeZone())
+  const tomorrowWeek = today(getLocalTimeZone()).add({ days: 12 })
+
+  const [value, setValue] = React.useState({
+    start: now,
+    end: tomorrowWeek
+  })
+  return (
+    <Card className="grid place-content-center">
+      <RangeCalendar
+        value={value}
+        onChange={setValue}
+        aria-label="Event date" />
+    </Card>
+  )
+}
diff --git a/app/(app)/themes/page.tsx b/app/(app)/themes/page.tsx
index d85bfae0..5a0cddf1 100644
--- a/app/(app)/themes/page.tsx
+++ b/app/(app)/themes/page.tsx
@@ -1,6 +1,7 @@
-import { Header } from '@/components/header'
-import { siteConfig } from '@/resources/config/site'
+import { Header } from '@/components/header';
+import { siteConfig } from '@/resources/config/site';
 import type { Metadata } from 'next'
+import { Themes } from '@/app/(app)/themes/themes'
 
 export const metadata: Metadata = {
   title: 'Themes / ' + siteConfig.name,
@@ -17,7 +18,7 @@ export default function Page() {
         <span className="text-muted-fg">es</span>
       </Header>
 
-      {/*<Themes/>*/}
+      <Themes/>
     </div>
   )
 }
diff --git a/app/(app)/themes/themes-list.ts b/app/(app)/themes/themes-list.ts
new file mode 100644
index 00000000..20d3e41b
--- /dev/null
+++ b/app/(app)/themes/themes-list.ts
@@ -0,0 +1,122 @@
+type ThemeProps = 'default' | 'zinc' | 'slate'
+type ThemeVariables = {
+  [key: string]: string;
+};
+const themesList: Record<ThemeProps, { root: ThemeVariables; dark: ThemeVariables }> = {
+  default: {
+    root: {
+      '--light': '0 0% 98.04%',
+      '--dark': '240 10% 6%',
+      '--background': '0 0% 100%',
+      '--fg': '240 10% 3.9%',
+      '--overlay': '0 0% 100%',
+      '--overlay-fg': '240 10% 3.9%',
+      '--primary': '216 98% 52%',
+      '--primary-fg': '0 0% 100%',
+      '--secondary': '240 4.8% 95.9%',
+      '--secondary-fg': '240 5.9% 10%',
+      '--tertiary': '0 0% 100%',
+      '--tertiary-fg': '240 4% 16%',
+      '--success': '152 69% 31%',
+      '--success-fg': '0 0% 100%',
+      '--info': '81.97 84.52% 67.06%',
+      '--info-fg': '89.27 80.39% 10%',
+      '--muted': '240 4.8% 95.9%',
+      '--muted-fg': '240 3.8% 46.1%',
+      '--danger': '0 72.22% 50.59%',
+      '--danger-fg': '0 85.71% 97.25%',
+      '--warning': '43.26 96.41% 56.27%',
+      '--warning-fg': '20.91 91.67% 14.12%',
+      '--border': '240 5.9% 90%',
+      '--input': '240 5.9% 90%',
+      '--ring': 'var(--primary)',
+      '--toggle': '240 5% 84%',
+      '--radius': '0.55rem',
+    },
+    dark: {
+      '--background': '0 0% 0%',
+      '--fg': '0 0% 98%',
+      '--overlay': '240 6% 6%',
+      '--overlay-fg': '0 0% 98%',
+      '--secondary': '240 3.7% 15.9%',
+      '--secondary-fg': '0 0% 98%',
+      '--info': '84.91 100% 66.47%',
+      '--info-fg': '120 100% 13.14%',
+      '--tertiary': '240 10% 5.5%',
+      '--tertiary-fg': '240 5% 96%',
+      '--ring': 'var(--primary)',
+      '--muted': '240 3.7% 15.9%',
+      '--muted-fg': '240 5% 64.9%',
+      '--toggle': '240 5% 26%',
+      '--border': '240 7% 15%',
+      '--input': '240 3.7% 15.9%',
+    },
+  },
+  zinc: {
+    root: {
+      '--light': '0 0% 98.04%',
+      '--dark': '240 10% 6%',
+      '--background': '0 0% 100%',
+      '--fg': '240 10% 3.9%',
+      '--overlay': '0 0% 100%',
+      '--overlay-fg': '240 10% 3.9%',
+      '--primary': '240 10% 3.92%',
+      '--primary-fg': '0 0% 98.04%',
+      '--secondary': '240 4.8% 95.9%',
+      '--secondary-fg': '240 5.9% 10%',
+      '--tertiary': '0 0% 100%',
+      '--tertiary-fg': '240 4% 16%',
+      '--success': '152 69% 31%',
+      '--success-fg': '0 0% 100%',
+      '--muted': '240 4.8% 95.9%',
+      '--muted-fg': '240 3.8% 46.1%',
+      '--border': '240 5.9% 90%',
+      '--input': '240 5.9% 90%',
+      '--ring': 'var(--primary)',
+      '--toggle': '240 5% 84%',
+    },
+    dark: {
+      '--background': '0 0% 0%',
+      '--fg': '0 0% 98%',
+      '--overlay': '240 6% 6%',
+      '--overlay-fg': '0 0% 98%',
+      '--secondary': '240 3.7% 15.9%',
+      '--secondary-fg': '0 0% 98%',
+      '--tertiary': '240 10% 5.5%',
+      '--tertiary-fg': '240 5% 96%',
+      '--ring': 'var(--primary)',
+      '--muted': '240 3.7% 15.9%',
+      '--muted-fg': '240 5% 64.9%',
+      '--toggle': '240 5% 26%',
+      '--border': '240 7% 15%',
+      '--input': '240 3.7% 15.9%',
+    },
+  },
+  slate: {
+    root: {
+      '--light': '228.57 84% 4.9%',
+      '--dark': '210 40% 98.04%',
+      '--background': '0 0% 100%',
+      '--fg': '228.57 84% 4.9%',
+      '--overlay': '210 40% 98.04%',
+      '--overlay-fg': '228.57 84% 4.9%',
+      '--secondary': '210 40% 96.08%',
+      '--secondary-fg': '228.57 84% 4.9%',
+      '--border': '215.38 16.32% 46.86%',
+      '--input': '212.73 26.83% 83.92%',
+    },
+    dark: {
+      '--background': '228.57 84% 4.9%',
+      '--fg': '210 40% 98.04%',
+      '--overlay': '222.22 47.37% 11.18%',
+      '--overlay-fg': '210 40% 96.08%',
+      '--secondary': '222.22 47.37% 11.18%',
+      '--secondary-fg': '210 40% 96.08%',
+      '--border': '215 20.22% 65.1%',
+      '--input': '215.29 25% 26.67%',
+    },
+  },
+};
+
+export type {ThemeProps}
+export {themesList}
diff --git a/app/(app)/themes/themes.tsx b/app/(app)/themes/themes.tsx
index 3a19d3d5..aba171f0 100644
--- a/app/(app)/themes/themes.tsx
+++ b/app/(app)/themes/themes.tsx
@@ -1,13 +1,54 @@
-import { Container } from 'ui'
+'use client';
+
+import React from 'react';
+
+
+
+import { Button, Container } from 'ui';
+
+
+
+import { Blocks } from './blocks';
+import type { ThemeProps } from './themes-list'
+import { themesList } from './themes-list';
 
-import { Blocks } from './blocks'
-import { Controller } from './controller'
 
 export function Themes() {
+  const themeContainerRef = React.useRef<HTMLDivElement>(null)
+  const applyTheme = (theme: ThemeProps) => {
+    const themeVars = themesList[theme].root
+    const darkThemeVars = themesList[theme].dark
+
+    const themeElement = themeContainerRef.current
+    if (themeElement) {
+      Object.keys(themeVars).forEach((key) => {
+        themeElement.style.setProperty(key, themeVars[key])
+      })
+
+      if (document.documentElement.classList.contains('dark')) {
+        Object.keys(darkThemeVars).forEach((key) => {
+          themeElement.style.setProperty(key, darkThemeVars[key])
+        })
+      }
+    }
+    localStorage.setItem('theme-id', theme);
+  }
+  React.useEffect(() => {
+    const savedTheme = localStorage.getItem('theme-id') as ThemeProps;
+    if (savedTheme) {
+      applyTheme(savedTheme);
+    }
+  }, []);
   return (
-    <Container className="sm:py-16 py-8">
-      <Controller />
-      <Blocks />
-    </Container>
+    <div ref={themeContainerRef}>
+      <Container className="sm:py-16 bg-background py-8">
+        <div className="flex border rounded-lg p-2 mb-2 items-center gap-2">
+          <Button appearance='outline' onPress={() => applyTheme('default')}>Default</Button>
+          <Button appearance='outline' onPress={() => applyTheme('zinc')}>Zinc</Button>
+          <Button appearance='outline' onPress={() => applyTheme('slate')}>Slate</Button>
+        </div>
+        <Blocks />
+      </Container>
+    </div>
   )
 }
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
index 9a07cbc8..ba9b5846 100644
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@@ -61,9 +61,9 @@ const buttonStyles = tv(
         solid:
           'border-transparent bg-[--btn-border] dark:bg-[--btn-bg] before:absolute before:inset-0 before:-z-10 before:bg-[--btn-bg] before:shadow dark:before:hidden dark:border-white/5 after:absolute after:inset-0 after:-z-10 after:shadow-[shadow:inset_0_1px_theme(colors.white/15%)] after:active:bg-[--btn-hover-overlay] after:hover:bg-[--btn-hover-overlay] dark:after:-inset-px before:data-[disabled]:shadow-none after:data-[disabled]:shadow-none',
         outline:
-          'border-border hover:bg-secondary/90 active:bg-secondary/90 text-fg [--btn-icon:theme(colors.zinc.400)] active:[--btn-icon:theme(colors.zinc.500)] hover:[--btn-icon:theme(colors.zinc.500)] dark:active:[--btn-icon:theme(colors.zinc.300)] dark:hover:[--btn-icon:theme(colors.zinc.300)]',
+          'border-border hover:bg-secondary/90 active:bg-secondary/90 text-fg [--btn-icon:theme(colors.zinc.400)] active:[--btn-icon:theme(colors.fg)] hover:[--btn-icon:theme(colors.fg)]',
         plain:
-          'border-transparent text-fg pressed:bg-secondary/90 active:bg-fg/5 hover:bg-fg/5 [--btn-icon:theme(colors.zinc.500)] active:[--btn-icon:theme(colors.zinc.700)] hover:[--btn-icon:theme(colors.zinc.700)] dark:[--btn-icon:theme(colors.zinc.500)] dark:active:[--btn-icon:theme(colors.zinc.400)] dark:hover:[--btn-icon:theme(colors.zinc.400)]'
+          'border-transparent text-fg pressed:bg-secondary/90 active:bg-secondary/90 hover:bg-secondary/90 [--btn-icon:theme(colors.muted.fg)] active:[--btn-icon:theme(colors.fg)] hover:[--btn-icon:theme(colors.fg)]'
       },
       size: {
         'extra-small':
diff --git a/components/ui/field.tsx b/components/ui/field.tsx
index 3700e7bb..9e2df5ae 100644
--- a/components/ui/field.tsx
+++ b/components/ui/field.tsx
@@ -33,7 +33,7 @@ interface FieldProps {
 
 // primitive styles
 const fieldBorderStyles = tv({
-  base: 'group-focus-within:border-primary forced-colors:border-[Highlight]',
+  base: 'group-focus-within:border-ring forced-colors:border-[Highlight]',
   variants: {
     isInvalid: {
       true: 'border-danger/70 group-focus-within:border-danger/70 forced-colors:border-[Mark]'
@@ -78,7 +78,7 @@ const FieldError = ({ className, ...props }: FieldErrorProps) => {
 const fieldGroupStyles = tv({
   base: [
     'group flex h-10 items-center overflow-hidden rounded-lg border border-input bg-background transition disabled:opacity-50 disabled:bg-secondary forced-colors:bg-[Field]',
-    'focus-within:border-primary focus-within:ring-4 focus-within:ring-primary/20',
+    'focus-within:border-ring focus-within:ring-4 focus-within:ring-ring/20',
     'focus-within:invalid:border-danger focus-within:invalid:ring-4 focus-within:invalid:ring-danger/20',
     'invalid:border-danger',
     'has-[.isPfx]:pl-2.5 has-[.isSfx]:pr-2.5 [&_[data-slot=icon]]:size-4 has-[.atrs]:shrink-0 has-[.atrs]:text-muted-fg'
diff --git a/components/ui/input-otp.tsx b/components/ui/input-otp.tsx
index 2cd2d40b..6621c37a 100644
--- a/components/ui/input-otp.tsx
+++ b/components/ui/input-otp.tsx
@@ -44,7 +44,7 @@ const InputOTPSlot = React.forwardRef<
       ref={ref}
       className={cn(
         'relative flex size-10 items-center justify-center rounded-md border border-input text-sm transition-all',
-        isActive && 'z-10 border-primary/70 ring-4 ring-primary/20',
+        isActive && 'z-10 border-ring/70 ring-4 ring-ring/20',
         className
       )}
       {...props}
diff --git a/components/ui/link.tsx b/components/ui/link.tsx
index faff68ef..2daba1e3 100644
--- a/components/ui/link.tsx
+++ b/components/ui/link.tsx
@@ -11,12 +11,12 @@ const linkStyles = tv({
     intent: {
       unstyled: 'text-fg',
       primary:
-        'text-primary-600 hover:text-primary-500 dark:text-primary-500 dark:hover:text-primary-400 forced-colors:disabled:text-[GrayText]',
+        'text-primary hover:text-primary/80 forced-colors:disabled:text-[GrayText]',
       danger:
-        'text-red-600 hover:text-red-500 dark:text-red-500 dark:hover:text-red-400 forced-colors:disabled:text-[GrayText]',
+        'text-danger hover:text-danger/80 forced-colors:disabled:text-[GrayText]',
       'lad/primary':
-        'text-fg hover:text-primary-500 dark:hover:text-primary-400 forced-colors:disabled:text-[GrayText]',
-      secondary: 'text-zinc-800 dark:text-zinc-300 hover:text-zinc-700 dark:hover:text-zinc-white'
+        'text-fg hover:text-primary dark:hover:text-primary/80 forced-colors:disabled:text-[GrayText]',
+      secondary: 'text-secondary-fg hover:text-secondary-fg/80'
     }
   },
   defaultVariants: {
diff --git a/components/ui/primitive.tsx b/components/ui/primitive.tsx
index 7660452a..bd037e74 100644
--- a/components/ui/primitive.tsx
+++ b/components/ui/primitive.tsx
@@ -19,7 +19,7 @@ const composeTailwindRenderProps = <T,>(
 const focusRing = tv({
   base: 'outline-none focus:outline-none forced-colors:outline-[Highlight]',
   variants: {
-    isFocused: { true: 'ring-4 ring-primary/20' },
+    isFocused: { true: 'ring-4 ring-ring/20' },
     isInvalid: { true: 'ring-4 ring-danger/20' }
   }
 })
@@ -43,13 +43,13 @@ const isIos = (userAgent?: string): boolean => {
 const focusStyles = tv({
   extend: focusRing,
   variants: {
-    isFocused: { true: 'border-primary' },
+    isFocused: { true: 'border-ring' },
     isInvalid: { true: 'border-danger' }
   }
 })
 
 const focusButtonStyles = tv({
-  base: 'outline outline-primary forced-colors:outline-[Highlight] outline-offset-2',
+  base: 'outline outline-ring forced-colors:outline-[Highlight] outline-offset-2',
   variants: {
     isFocusVisible: {
       false: 'outline-0',
diff --git a/resources/content/docs/getting-started/installation.mdx b/resources/content/docs/getting-started/installation.mdx
index 6f539a3f..038402e7 100644
--- a/resources/content/docs/getting-started/installation.mdx
+++ b/resources/content/docs/getting-started/installation.mdx
@@ -191,7 +191,7 @@ Below that, insert the following code:
 
         --border: 240 5.9% 90%;
         --input: 240 5.9% 90%;
-        --ring: 211 100% 58%;
+        --ring: var(--primary);
         --toggle: 240 5% 84%;
         --radius: 0.55rem;
     }
@@ -214,6 +214,7 @@ Below that, insert the following code:
 
         --muted: 240 3.7% 15.9%;
         --muted-fg: 240 5% 64.9%;
+        --ring: var(--primary);
         --toggle: 240 5% 26%;
         --border: 240 7% 15%;
         --input: 240 3.7% 15.9%;
diff --git a/resources/styles/app.css b/resources/styles/app.css
index 0ffc52fe..80f58de0 100644
--- a/resources/styles/app.css
+++ b/resources/styles/app.css
@@ -38,7 +38,7 @@
 
         --border: 240 5.9% 90%;
         --input: 240 5.9% 90%;
-        --ring: 211 100% 58%;
+        --ring: var(--primary);
         --toggle: 240 5% 84%;
         --radius: 0.55rem;
     }
@@ -58,7 +58,7 @@
 
         --tertiary: 240 10% 5.5%;
         --tertiary-fg: 240 5% 96%;
-
+        --ring: var(--primary);
         --muted: 240 3.7% 15.9%;
         --muted-fg: 240 5% 64.9%;
         --toggle: 240 5% 26%;
@@ -132,10 +132,6 @@
     outline: 1px solid hsl(var(--primary));
 }
 
-.recharts-rectangle.recharts-tooltip-cursor {
-    @apply fill-zinc-300/10;
-}
-
 @layer components {
     .no-scrollbar {
         -ms-overflow-style: none; /* Internet Explorer and Edge */

From 88f28d19381c8b582296c3bf7bd540940470ba8a Mon Sep 17 00:00:00 2001
From: "Irsyad A. Panjaitan" <irsyad@parsinta.com>
Date: Fri, 16 Aug 2024 22:39:44 +0700
Subject: [PATCH 2/6] ff

---
 app/(app)/colors/(colors)/color-item.tsx      |  7 +---
 app/(app)/themes/blocks.tsx                   |  4 +--
 app/(app)/themes/blocks/buttons.tsx           |  8 +++--
 .../themes/blocks/range-calendar-blocks.tsx   |  8 ++---
 app/(app)/themes/page.tsx                     |  8 ++---
 app/(app)/themes/themes-list.ts               | 30 ++++++++--------
 app/(app)/themes/themes.tsx                   | 35 ++++++++++---------
 components/docs/generated/previews.json       | 10 +++---
 components/ui/link.tsx                        |  6 ++--
 9 files changed, 56 insertions(+), 60 deletions(-)

diff --git a/app/(app)/colors/(colors)/color-item.tsx b/app/(app)/colors/(colors)/color-item.tsx
index 13730d8f..c378cd44 100644
--- a/app/(app)/colors/(colors)/color-item.tsx
+++ b/app/(app)/colors/(colors)/color-item.tsx
@@ -18,12 +18,7 @@ interface ColorItemProps extends ListBoxItemProps {
   selectedFormat: FormatOnlyForTailwindVariableType | ColorFormat
 }
 
-const ColorItem = ({
-  item,
-  name,
-  isForTailwindVariable,
-  selectedFormat
-}: ColorItemProps) => {
+const ColorItem = ({ item, name, isForTailwindVariable, selectedFormat }: ColorItemProps) => {
   const [copied, setCopied] = React.useState(false)
   const handleCopy = async (selectedColor: string) => {
     const toCopy = isForTailwindVariable
diff --git a/app/(app)/themes/blocks.tsx b/app/(app)/themes/blocks.tsx
index 74539043..e6ea0542 100644
--- a/app/(app)/themes/blocks.tsx
+++ b/app/(app)/themes/blocks.tsx
@@ -1,9 +1,9 @@
 'use client'
 
-import { LoginForm } from './blocks/login-form'
-import { RangeCalendarBlocks } from '@/app/(app)/themes/blocks/range-calendar-blocks'
 import { Buttons } from '@/app/(app)/themes/blocks/buttons'
+import { RangeCalendarBlocks } from '@/app/(app)/themes/blocks/range-calendar-blocks'
 
+import { LoginForm } from './blocks/login-form'
 
 export function Blocks() {
   return (
diff --git a/app/(app)/themes/blocks/buttons.tsx b/app/(app)/themes/blocks/buttons.tsx
index 7c153349..d8f270e0 100644
--- a/app/(app)/themes/blocks/buttons.tsx
+++ b/app/(app)/themes/blocks/buttons.tsx
@@ -16,10 +16,14 @@ export function Buttons() {
         </div>
       </Card>
       <Card className="grid place-content-center">
-        <Checkbox isReadOnly defaultSelected>Remember me</Checkbox>
+        <Checkbox isReadOnly defaultSelected>
+          Remember me
+        </Checkbox>
       </Card>
       <Card className="grid place-content-center">
-        <Switch isReadOnly defaultSelected>Toggle Theme</Switch>
+        <Switch isReadOnly defaultSelected>
+          Toggle Theme
+        </Switch>
       </Card>
     </div>
   )
diff --git a/app/(app)/themes/blocks/range-calendar-blocks.tsx b/app/(app)/themes/blocks/range-calendar-blocks.tsx
index 069b03f5..f0963f9e 100644
--- a/app/(app)/themes/blocks/range-calendar-blocks.tsx
+++ b/app/(app)/themes/blocks/range-calendar-blocks.tsx
@@ -1,9 +1,10 @@
 'use client'
 
-import { Button, Calendar, Card, Checkbox, Link, RangeCalendar, TextField } from 'ui'
 import React from 'react'
+
 import { getLocalTimeZone, parseDate, today } from '@internationalized/date'
 import { useDateFormatter } from '@react-aria/i18n'
+import { Button, Calendar, Card, Checkbox, Link, RangeCalendar, TextField } from 'ui'
 
 export function RangeCalendarBlocks() {
   const now = today(getLocalTimeZone())
@@ -15,10 +16,7 @@ export function RangeCalendarBlocks() {
   })
   return (
     <Card className="grid place-content-center">
-      <RangeCalendar
-        value={value}
-        onChange={setValue}
-        aria-label="Event date" />
+      <RangeCalendar value={value} onChange={setValue} aria-label="Event date" />
     </Card>
   )
 }
diff --git a/app/(app)/themes/page.tsx b/app/(app)/themes/page.tsx
index 5a0cddf1..0ac39e77 100644
--- a/app/(app)/themes/page.tsx
+++ b/app/(app)/themes/page.tsx
@@ -1,7 +1,7 @@
-import { Header } from '@/components/header';
-import { siteConfig } from '@/resources/config/site';
-import type { Metadata } from 'next'
 import { Themes } from '@/app/(app)/themes/themes'
+import { Header } from '@/components/header'
+import { siteConfig } from '@/resources/config/site'
+import type { Metadata } from 'next'
 
 export const metadata: Metadata = {
   title: 'Themes / ' + siteConfig.name,
@@ -18,7 +18,7 @@ export default function Page() {
         <span className="text-muted-fg">es</span>
       </Header>
 
-      <Themes/>
+      <Themes />
     </div>
   )
 }
diff --git a/app/(app)/themes/themes-list.ts b/app/(app)/themes/themes-list.ts
index 20d3e41b..16abc9c1 100644
--- a/app/(app)/themes/themes-list.ts
+++ b/app/(app)/themes/themes-list.ts
@@ -1,7 +1,7 @@
 type ThemeProps = 'default' | 'zinc' | 'slate'
 type ThemeVariables = {
-  [key: string]: string;
-};
+  [key: string]: string
+}
 const themesList: Record<ThemeProps, { root: ThemeVariables; dark: ThemeVariables }> = {
   default: {
     root: {
@@ -31,7 +31,7 @@ const themesList: Record<ThemeProps, { root: ThemeVariables; dark: ThemeVariable
       '--input': '240 5.9% 90%',
       '--ring': 'var(--primary)',
       '--toggle': '240 5% 84%',
-      '--radius': '0.55rem',
+      '--radius': '0.55rem'
     },
     dark: {
       '--background': '0 0% 0%',
@@ -49,8 +49,8 @@ const themesList: Record<ThemeProps, { root: ThemeVariables; dark: ThemeVariable
       '--muted-fg': '240 5% 64.9%',
       '--toggle': '240 5% 26%',
       '--border': '240 7% 15%',
-      '--input': '240 3.7% 15.9%',
-    },
+      '--input': '240 3.7% 15.9%'
+    }
   },
   zinc: {
     root: {
@@ -73,7 +73,7 @@ const themesList: Record<ThemeProps, { root: ThemeVariables; dark: ThemeVariable
       '--border': '240 5.9% 90%',
       '--input': '240 5.9% 90%',
       '--ring': 'var(--primary)',
-      '--toggle': '240 5% 84%',
+      '--toggle': '240 5% 84%'
     },
     dark: {
       '--background': '0 0% 0%',
@@ -89,8 +89,8 @@ const themesList: Record<ThemeProps, { root: ThemeVariables; dark: ThemeVariable
       '--muted-fg': '240 5% 64.9%',
       '--toggle': '240 5% 26%',
       '--border': '240 7% 15%',
-      '--input': '240 3.7% 15.9%',
-    },
+      '--input': '240 3.7% 15.9%'
+    }
   },
   slate: {
     root: {
@@ -103,7 +103,7 @@ const themesList: Record<ThemeProps, { root: ThemeVariables; dark: ThemeVariable
       '--secondary': '210 40% 96.08%',
       '--secondary-fg': '228.57 84% 4.9%',
       '--border': '215.38 16.32% 46.86%',
-      '--input': '212.73 26.83% 83.92%',
+      '--input': '212.73 26.83% 83.92%'
     },
     dark: {
       '--background': '228.57 84% 4.9%',
@@ -113,10 +113,10 @@ const themesList: Record<ThemeProps, { root: ThemeVariables; dark: ThemeVariable
       '--secondary': '222.22 47.37% 11.18%',
       '--secondary-fg': '210 40% 96.08%',
       '--border': '215 20.22% 65.1%',
-      '--input': '215.29 25% 26.67%',
-    },
-  },
-};
+      '--input': '215.29 25% 26.67%'
+    }
+  }
+}
 
-export type {ThemeProps}
-export {themesList}
+export type { ThemeProps }
+export { themesList }
diff --git a/app/(app)/themes/themes.tsx b/app/(app)/themes/themes.tsx
index aba171f0..ebf4d996 100644
--- a/app/(app)/themes/themes.tsx
+++ b/app/(app)/themes/themes.tsx
@@ -1,17 +1,12 @@
-'use client';
+'use client'
 
-import React from 'react';
+import React from 'react'
 
+import { Button, Container } from 'ui'
 
-
-import { Button, Container } from 'ui';
-
-
-
-import { Blocks } from './blocks';
+import { Blocks } from './blocks'
 import type { ThemeProps } from './themes-list'
-import { themesList } from './themes-list';
-
+import { themesList } from './themes-list'
 
 export function Themes() {
   const themeContainerRef = React.useRef<HTMLDivElement>(null)
@@ -31,21 +26,27 @@ export function Themes() {
         })
       }
     }
-    localStorage.setItem('theme-id', theme);
+    localStorage.setItem('theme-id', theme)
   }
   React.useEffect(() => {
-    const savedTheme = localStorage.getItem('theme-id') as ThemeProps;
+    const savedTheme = localStorage.getItem('theme-id') as ThemeProps
     if (savedTheme) {
-      applyTheme(savedTheme);
+      applyTheme(savedTheme)
     }
-  }, []);
+  }, [])
   return (
     <div ref={themeContainerRef}>
       <Container className="sm:py-16 bg-background py-8">
         <div className="flex border rounded-lg p-2 mb-2 items-center gap-2">
-          <Button appearance='outline' onPress={() => applyTheme('default')}>Default</Button>
-          <Button appearance='outline' onPress={() => applyTheme('zinc')}>Zinc</Button>
-          <Button appearance='outline' onPress={() => applyTheme('slate')}>Slate</Button>
+          <Button appearance="outline" onPress={() => applyTheme('default')}>
+            Default
+          </Button>
+          <Button appearance="outline" onPress={() => applyTheme('zinc')}>
+            Zinc
+          </Button>
+          <Button appearance="outline" onPress={() => applyTheme('slate')}>
+            Slate
+          </Button>
         </div>
         <Blocks />
       </Container>
diff --git a/components/docs/generated/previews.json b/components/docs/generated/previews.json
index 69ad3b30..af830d1c 100644
--- a/components/docs/generated/previews.json
+++ b/components/docs/generated/previews.json
@@ -1706,7 +1706,7 @@
   },
   "link": {
     "component": "@/components/ui/link",
-    "raw": "'use client'\n\nimport { Link as LinkPrimitive, type LinkProps as LinkPrimitiveProps } from 'react-aria-components'\nimport { tv } from 'tailwind-variants'\n\nimport { cr } from './primitive'\n\nconst linkStyles = tv({\n  base: 'forced-colors:outline-[Highlight] focus-visible:outline-2 outline outline-offset-2 disabled:focus-visible:outline-0 outline-0 outline-primary rounded disabled:opacity-60 forced-colors:disabled:text-[GrayText] border-transparent transition-colors disabled:cursor-default',\n  variants: {\n    intent: {\n      unstyled: 'text-fg',\n      primary:\n        'text-primary-600 hover:text-primary-500 dark:text-primary-500 dark:hover:text-primary-400 forced-colors:disabled:text-[GrayText]',\n      danger:\n        'text-red-600 hover:text-red-500 dark:text-red-500 dark:hover:text-red-400 forced-colors:disabled:text-[GrayText]',\n      'lad/primary':\n        'text-fg hover:text-primary-500 dark:hover:text-primary-400 forced-colors:disabled:text-[GrayText]',\n      secondary: 'text-zinc-800 dark:text-zinc-300 hover:text-zinc-700 dark:hover:text-zinc-white'\n    }\n  },\n  defaultVariants: {\n    intent: 'unstyled'\n  }\n})\n\ninterface LinkProps extends LinkPrimitiveProps {\n  intent?: 'primary' | 'secondary' | 'danger' | 'lad/primary' | 'unstyled'\n}\n\nconst Link = ({ className, ...props }: LinkProps) => {\n  return (\n    <LinkPrimitive\n      aria-label={props['aria-label'] ?? 'Link'}\n      {...props}\n      className={cr(className, (className, ...renderProps) =>\n        linkStyles({ ...renderProps, intent: props.intent, className })\n      )}\n    />\n  )\n}\n\nexport { Link, LinkPrimitive, type LinkPrimitiveProps, type LinkProps }\n",
+    "raw": "'use client'\n\nimport { Link as LinkPrimitive, type LinkProps as LinkPrimitiveProps } from 'react-aria-components'\nimport { tv } from 'tailwind-variants'\n\nimport { cr } from './primitive'\n\nconst linkStyles = tv({\n  base: 'forced-colors:outline-[Highlight] focus-visible:outline-2 outline outline-offset-2 disabled:focus-visible:outline-0 outline-0 outline-primary rounded disabled:opacity-60 forced-colors:disabled:text-[GrayText] border-transparent transition-colors disabled:cursor-default',\n  variants: {\n    intent: {\n      unstyled: 'text-fg',\n      primary: 'text-primary hover:text-primary/80 forced-colors:disabled:text-[GrayText]',\n      danger: 'text-danger hover:text-danger/80 forced-colors:disabled:text-[GrayText]',\n      'lad/primary':\n        'text-fg hover:text-primary dark:hover:text-primary/80 forced-colors:disabled:text-[GrayText]',\n      secondary: 'text-secondary-fg hover:text-secondary-fg/80'\n    }\n  },\n  defaultVariants: {\n    intent: 'unstyled'\n  }\n})\n\ninterface LinkProps extends LinkPrimitiveProps {\n  intent?: 'primary' | 'secondary' | 'danger' | 'lad/primary' | 'unstyled'\n}\n\nconst Link = ({ className, ...props }: LinkProps) => {\n  return (\n    <LinkPrimitive\n      aria-label={props['aria-label'] ?? 'Link'}\n      {...props}\n      className={cr(className, (className, ...renderProps) =>\n        linkStyles({ ...renderProps, intent: props.intent, className })\n      )}\n    />\n  )\n}\n\nexport { Link, LinkPrimitive, type LinkPrimitiveProps, type LinkProps }\n",
     "type": "ui"
   },
   "tabs": {
@@ -1751,7 +1751,7 @@
   },
   "primitive": {
     "component": "@/components/ui/primitive",
-    "raw": "'use client'\n\nimport * as React from 'react'\n\nimport { type ClassValue, clsx } from 'clsx'\nimport { composeRenderProps } from 'react-aria-components'\nimport { twMerge } from 'tailwind-merge'\nimport { tv } from 'tailwind-variants'\n\nconst cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs))\n\nconst composeTailwindRenderProps = <T,>(\n  className: string | ((v: T) => string) | undefined,\n  tw: string\n): string | ((v: T) => string) => {\n  return composeRenderProps(className, (className) => twMerge(tw, className))\n}\n\nconst focusRing = tv({\n  base: 'outline-none focus:outline-none forced-colors:outline-[Highlight]',\n  variants: {\n    isFocused: { true: 'ring-4 ring-primary/20' },\n    isInvalid: { true: 'ring-4 ring-danger/20' }\n  }\n})\n\nconst isServerSide = (): boolean => {\n  if (typeof window !== 'undefined') {\n    return false\n  }\n  if (typeof process !== 'undefined' && process.versions && process.versions.node) {\n    return true\n  }\n  return true\n}\n\nconst isIos = (userAgent?: string): boolean => {\n  if (isServerSide() && !userAgent) return false\n  const result = userAgent || navigator.userAgent\n  return /iPad|iPhone|iPod|iPadOS|iPhoneOS/.test(result)\n}\n\nconst focusStyles = tv({\n  extend: focusRing,\n  variants: {\n    isFocused: { true: 'border-primary' },\n    isInvalid: { true: 'border-danger' }\n  }\n})\n\nconst focusButtonStyles = tv({\n  base: 'outline outline-primary forced-colors:outline-[Highlight] outline-offset-2',\n  variants: {\n    isFocusVisible: {\n      false: 'outline-0',\n      true: 'outline-2'\n    }\n  }\n})\n\nconst useMediaQuery = (query: string) => {\n  const [value, setValue] = React.useState(false)\n\n  React.useEffect(() => {\n    const onChange = (event: MediaQueryListEvent) => {\n      setValue(event.matches)\n    }\n\n    const result = matchMedia(query)\n    result.addEventListener('change', onChange)\n    setValue(result.matches)\n\n    return () => result.removeEventListener('change', onChange)\n  }, [query])\n\n  return value\n}\n\nconst ctr = composeTailwindRenderProps\nconst tm = twMerge\nconst cr = composeRenderProps\n\nexport {\n  cn,\n  composeTailwindRenderProps,\n  cr,\n  ctr,\n  focusRing,\n  focusStyles,\n  focusButtonStyles,\n  tm,\n  twMerge,\n  useMediaQuery,\n  isIos\n}\n",
+    "raw": "'use client'\n\nimport * as React from 'react'\n\nimport { type ClassValue, clsx } from 'clsx'\nimport { composeRenderProps } from 'react-aria-components'\nimport { twMerge } from 'tailwind-merge'\nimport { tv } from 'tailwind-variants'\n\nconst cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs))\n\nconst composeTailwindRenderProps = <T,>(\n  className: string | ((v: T) => string) | undefined,\n  tw: string\n): string | ((v: T) => string) => {\n  return composeRenderProps(className, (className) => twMerge(tw, className))\n}\n\nconst focusRing = tv({\n  base: 'outline-none focus:outline-none forced-colors:outline-[Highlight]',\n  variants: {\n    isFocused: { true: 'ring-4 ring-ring/20' },\n    isInvalid: { true: 'ring-4 ring-danger/20' }\n  }\n})\n\nconst isServerSide = (): boolean => {\n  if (typeof window !== 'undefined') {\n    return false\n  }\n  if (typeof process !== 'undefined' && process.versions && process.versions.node) {\n    return true\n  }\n  return true\n}\n\nconst isIos = (userAgent?: string): boolean => {\n  if (isServerSide() && !userAgent) return false\n  const result = userAgent || navigator.userAgent\n  return /iPad|iPhone|iPod|iPadOS|iPhoneOS/.test(result)\n}\n\nconst focusStyles = tv({\n  extend: focusRing,\n  variants: {\n    isFocused: { true: 'border-ring' },\n    isInvalid: { true: 'border-danger' }\n  }\n})\n\nconst focusButtonStyles = tv({\n  base: 'outline outline-ring forced-colors:outline-[Highlight] outline-offset-2',\n  variants: {\n    isFocusVisible: {\n      false: 'outline-0',\n      true: 'outline-2'\n    }\n  }\n})\n\nconst useMediaQuery = (query: string) => {\n  const [value, setValue] = React.useState(false)\n\n  React.useEffect(() => {\n    const onChange = (event: MediaQueryListEvent) => {\n      setValue(event.matches)\n    }\n\n    const result = matchMedia(query)\n    result.addEventListener('change', onChange)\n    setValue(result.matches)\n\n    return () => result.removeEventListener('change', onChange)\n  }, [query])\n\n  return value\n}\n\nconst ctr = composeTailwindRenderProps\nconst tm = twMerge\nconst cr = composeRenderProps\n\nexport {\n  cn,\n  composeTailwindRenderProps,\n  cr,\n  ctr,\n  focusRing,\n  focusStyles,\n  focusButtonStyles,\n  tm,\n  twMerge,\n  useMediaQuery,\n  isIos\n}\n",
     "type": "ui"
   },
   "visually-hidden": {
@@ -1771,7 +1771,7 @@
   },
   "input-otp": {
     "component": "@/components/ui/input-otp",
-    "raw": "'use client'\n\nimport * as React from 'react'\n\nimport { OTPInput, OTPInputContext } from 'input-otp'\nimport { IconBulletFill } from 'justd-icons'\n\nimport { cn } from './primitive'\n\nconst InputOTP = React.forwardRef<\n  React.ElementRef<typeof OTPInput>,\n  React.ComponentPropsWithoutRef<typeof OTPInput>\n>(({ className, containerClassName, ...props }, ref) => (\n  <OTPInput\n    data-1p-ignore\n    ref={ref}\n    containerClassName={cn(\n      'flex items-center gap-2 has-[:disabled]:opacity-50',\n      containerClassName\n    )}\n    className={cn('disabled:cursor-not-allowed', className)}\n    {...props}\n  />\n))\nInputOTP.displayName = 'InputOTP'\n\nconst InputOTPGroup = React.forwardRef<\n  React.ElementRef<'div'>,\n  React.ComponentPropsWithoutRef<'div'>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn('flex items-center gap-x-1.5', className)} {...props} />\n))\nInputOTPGroup.displayName = 'InputOTPGroup'\n\nconst InputOTPSlot = React.forwardRef<\n  React.ElementRef<'div'>,\n  React.ComponentPropsWithoutRef<'div'> & { index: number }\n>(({ index, className, ...props }, ref) => {\n  const inputOTPContext = React.useContext(OTPInputContext)\n  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'relative flex size-10 items-center justify-center rounded-md border border-input text-sm transition-all',\n        isActive && 'z-10 border-primary/70 ring-4 ring-primary/20',\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"h-4 w-px animate-caret-blink bg-fg duration-1000\" />\n        </div>\n      )}\n    </div>\n  )\n})\nInputOTPSlot.displayName = 'InputOTPSlot'\n\nconst InputOTPSeparator = React.forwardRef<\n  React.ElementRef<'div'>,\n  React.ComponentPropsWithoutRef<'div'>\n>(({ ...props }, ref) => (\n  <div ref={ref} role=\"separator\" {...props}>\n    <IconBulletFill className=\"size-2\" />\n  </div>\n))\nInputOTPSeparator.displayName = 'InputOTPSeparator'\n\nexport { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot }\n",
+    "raw": "'use client'\n\nimport * as React from 'react'\n\nimport { OTPInput, OTPInputContext } from 'input-otp'\nimport { IconBulletFill } from 'justd-icons'\n\nimport { cn } from './primitive'\n\nconst InputOTP = React.forwardRef<\n  React.ElementRef<typeof OTPInput>,\n  React.ComponentPropsWithoutRef<typeof OTPInput>\n>(({ className, containerClassName, ...props }, ref) => (\n  <OTPInput\n    data-1p-ignore\n    ref={ref}\n    containerClassName={cn(\n      'flex items-center gap-2 has-[:disabled]:opacity-50',\n      containerClassName\n    )}\n    className={cn('disabled:cursor-not-allowed', className)}\n    {...props}\n  />\n))\nInputOTP.displayName = 'InputOTP'\n\nconst InputOTPGroup = React.forwardRef<\n  React.ElementRef<'div'>,\n  React.ComponentPropsWithoutRef<'div'>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn('flex items-center gap-x-1.5', className)} {...props} />\n))\nInputOTPGroup.displayName = 'InputOTPGroup'\n\nconst InputOTPSlot = React.forwardRef<\n  React.ElementRef<'div'>,\n  React.ComponentPropsWithoutRef<'div'> & { index: number }\n>(({ index, className, ...props }, ref) => {\n  const inputOTPContext = React.useContext(OTPInputContext)\n  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'relative flex size-10 items-center justify-center rounded-md border border-input text-sm transition-all',\n        isActive && 'z-10 border-ring/70 ring-4 ring-ring/20',\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"h-4 w-px animate-caret-blink bg-fg duration-1000\" />\n        </div>\n      )}\n    </div>\n  )\n})\nInputOTPSlot.displayName = 'InputOTPSlot'\n\nconst InputOTPSeparator = React.forwardRef<\n  React.ElementRef<'div'>,\n  React.ComponentPropsWithoutRef<'div'>\n>(({ ...props }, ref) => (\n  <div ref={ref} role=\"separator\" {...props}>\n    <IconBulletFill className=\"size-2\" />\n  </div>\n))\nInputOTPSeparator.displayName = 'InputOTPSeparator'\n\nexport { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot }\n",
     "type": "ui"
   },
   "tag-group": {
@@ -1786,7 +1786,7 @@
   },
   "field": {
     "component": "@/components/ui/field",
-    "raw": "'use client'\n\nimport * as React from 'react'\n\nimport {\n  FieldError as FieldErrorPrimitive,\n  type FieldErrorProps,\n  Group,\n  type GroupProps,\n  Input as InputPrimitive,\n  type InputProps,\n  Label as LabelPrimitive,\n  type LabelProps,\n  Text,\n  type TextFieldProps as TextFieldPrimitiveProps,\n  type TextProps,\n  type ValidationResult\n} from 'react-aria-components'\nimport { tv } from 'tailwind-variants'\n\nimport { cr, ctr } from './primitive'\n\n// primitive styles\n\ninterface FieldProps {\n  label?: string\n  placeholder?: string\n  description?: string\n  errorMessage?: string | ((validation: ValidationResult) => string)\n  'aria-label'?: TextFieldPrimitiveProps['aria-label']\n  'aria-labelledby'?: TextFieldPrimitiveProps['aria-labelledby']\n}\n\n// primitive styles\nconst fieldBorderStyles = tv({\n  base: 'group-focus-within:border-primary forced-colors:border-[Highlight]',\n  variants: {\n    isInvalid: {\n      true: 'border-danger/70 group-focus-within:border-danger/70 forced-colors:border-[Mark]'\n    }\n  }\n})\n\nconst fieldGroupPrefixStyles = tv({\n  base: [\n    'flex group-invalid:border-danger group-disabled:bg-secondary group-disabled:opacity-50 items-center group-invalid:focus-within:ring-danger/20',\n    '[&>.x2e2>.kbt32x]:size-7 [&>.x2e2>.kbt32x]:rounded-sm [&>.x2e2:has(.kbt32x)]:size-9 [&>.x2e2:has(.kbt32x)]:grid [&>.x2e2:has(.kbt32x)]:place-items-center',\n    '[&>.x2e2>.kbt32x]:before:rounded-[calc(theme(borderRadius.sm)-1px)] [&>.x2e2>.kbt32x]:after:rounded-[calc(theme(borderRadius.sm)-1px)] dark:[&>.x2e2>.kbt32x]:after:rounded-sm',\n    '[&>.isSfx:has(.kbt32x)]:-mr-2 [&>.isPfx:has(.kbt32x)]:-ml-2 [&>.isSfx>.kbt32x]:mr-0.5 [&>.isPfx>.kbt32x]:ml-0.5'\n  ]\n})\n\nconst fieldStyles = tv({\n  slots: {\n    description: 'text-pretty text-base/6 text-muted-fg sm:text-sm/6',\n    label: 'w-fit cursor-default font-medium text-secondary-fg text-sm',\n    fieldError: 'text-sm text-danger forced-colors:text-[Mark]',\n    input: [\n      'w-full min-w-0 bg-transparent p-2 text-base text-fg placeholder-muted-fg outline-none focus:outline-none lg:text-sm'\n    ]\n  }\n})\n\nconst { description, label, fieldError, input } = fieldStyles()\n\nconst Label = ({ className, ...props }: LabelProps) => {\n  return <LabelPrimitive {...props} className={label({ className })} />\n}\n\nconst Description = ({ className, ...props }: TextProps) => {\n  return <Text {...props} slot=\"description\" className={description({ className })} />\n}\n\nconst FieldError = ({ className, ...props }: FieldErrorProps) => {\n  return <FieldErrorPrimitive {...props} className={ctr(className, fieldError())} />\n}\n\nconst fieldGroupStyles = tv({\n  base: [\n    'group flex h-10 items-center overflow-hidden rounded-lg border border-input bg-background transition disabled:opacity-50 disabled:bg-secondary forced-colors:bg-[Field]',\n    'focus-within:border-primary focus-within:ring-4 focus-within:ring-primary/20',\n    'focus-within:invalid:border-danger focus-within:invalid:ring-4 focus-within:invalid:ring-danger/20',\n    'invalid:border-danger',\n    'has-[.isPfx]:pl-2.5 has-[.isSfx]:pr-2.5 [&_[data-slot=icon]]:size-4 has-[.atrs]:shrink-0 has-[.atrs]:text-muted-fg'\n  ]\n})\n\nconst FieldGroup = ({ className, ...props }: GroupProps) => {\n  return (\n    <Group\n      {...props}\n      className={cr(className, (className, renderProps) =>\n        fieldGroupStyles({ ...renderProps, className })\n      )}\n    />\n  )\n}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, ...props }, ref) => {\n  return <InputPrimitive ref={ref} {...props} className={ctr(className, input())} />\n})\nInput.displayName = 'Input'\n\nexport {\n  Description,\n  fieldBorderStyles,\n  FieldError,\n  FieldGroup,\n  fieldGroupPrefixStyles,\n  fieldGroupStyles,\n  Input,\n  InputPrimitive,\n  Label,\n  type FieldProps\n}\n",
+    "raw": "'use client'\n\nimport * as React from 'react'\n\nimport {\n  FieldError as FieldErrorPrimitive,\n  type FieldErrorProps,\n  Group,\n  type GroupProps,\n  Input as InputPrimitive,\n  type InputProps,\n  Label as LabelPrimitive,\n  type LabelProps,\n  Text,\n  type TextFieldProps as TextFieldPrimitiveProps,\n  type TextProps,\n  type ValidationResult\n} from 'react-aria-components'\nimport { tv } from 'tailwind-variants'\n\nimport { cr, ctr } from './primitive'\n\n// primitive styles\n\ninterface FieldProps {\n  label?: string\n  placeholder?: string\n  description?: string\n  errorMessage?: string | ((validation: ValidationResult) => string)\n  'aria-label'?: TextFieldPrimitiveProps['aria-label']\n  'aria-labelledby'?: TextFieldPrimitiveProps['aria-labelledby']\n}\n\n// primitive styles\nconst fieldBorderStyles = tv({\n  base: 'group-focus-within:border-ring forced-colors:border-[Highlight]',\n  variants: {\n    isInvalid: {\n      true: 'border-danger/70 group-focus-within:border-danger/70 forced-colors:border-[Mark]'\n    }\n  }\n})\n\nconst fieldGroupPrefixStyles = tv({\n  base: [\n    'flex group-invalid:border-danger group-disabled:bg-secondary group-disabled:opacity-50 items-center group-invalid:focus-within:ring-danger/20',\n    '[&>.x2e2>.kbt32x]:size-7 [&>.x2e2>.kbt32x]:rounded-sm [&>.x2e2:has(.kbt32x)]:size-9 [&>.x2e2:has(.kbt32x)]:grid [&>.x2e2:has(.kbt32x)]:place-items-center',\n    '[&>.x2e2>.kbt32x]:before:rounded-[calc(theme(borderRadius.sm)-1px)] [&>.x2e2>.kbt32x]:after:rounded-[calc(theme(borderRadius.sm)-1px)] dark:[&>.x2e2>.kbt32x]:after:rounded-sm',\n    '[&>.isSfx:has(.kbt32x)]:-mr-2 [&>.isPfx:has(.kbt32x)]:-ml-2 [&>.isSfx>.kbt32x]:mr-0.5 [&>.isPfx>.kbt32x]:ml-0.5'\n  ]\n})\n\nconst fieldStyles = tv({\n  slots: {\n    description: 'text-pretty text-base/6 text-muted-fg sm:text-sm/6',\n    label: 'w-fit cursor-default font-medium text-secondary-fg text-sm',\n    fieldError: 'text-sm text-danger forced-colors:text-[Mark]',\n    input: [\n      'w-full min-w-0 bg-transparent p-2 text-base text-fg placeholder-muted-fg outline-none focus:outline-none lg:text-sm'\n    ]\n  }\n})\n\nconst { description, label, fieldError, input } = fieldStyles()\n\nconst Label = ({ className, ...props }: LabelProps) => {\n  return <LabelPrimitive {...props} className={label({ className })} />\n}\n\nconst Description = ({ className, ...props }: TextProps) => {\n  return <Text {...props} slot=\"description\" className={description({ className })} />\n}\n\nconst FieldError = ({ className, ...props }: FieldErrorProps) => {\n  return <FieldErrorPrimitive {...props} className={ctr(className, fieldError())} />\n}\n\nconst fieldGroupStyles = tv({\n  base: [\n    'group flex h-10 items-center overflow-hidden rounded-lg border border-input bg-background transition disabled:opacity-50 disabled:bg-secondary forced-colors:bg-[Field]',\n    'focus-within:border-ring focus-within:ring-4 focus-within:ring-ring/20',\n    'focus-within:invalid:border-danger focus-within:invalid:ring-4 focus-within:invalid:ring-danger/20',\n    'invalid:border-danger',\n    'has-[.isPfx]:pl-2.5 has-[.isSfx]:pr-2.5 [&_[data-slot=icon]]:size-4 has-[.atrs]:shrink-0 has-[.atrs]:text-muted-fg'\n  ]\n})\n\nconst FieldGroup = ({ className, ...props }: GroupProps) => {\n  return (\n    <Group\n      {...props}\n      className={cr(className, (className, renderProps) =>\n        fieldGroupStyles({ ...renderProps, className })\n      )}\n    />\n  )\n}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, ...props }, ref) => {\n  return <InputPrimitive ref={ref} {...props} className={ctr(className, input())} />\n})\nInput.displayName = 'Input'\n\nexport {\n  Description,\n  fieldBorderStyles,\n  FieldError,\n  FieldGroup,\n  fieldGroupPrefixStyles,\n  fieldGroupStyles,\n  Input,\n  InputPrimitive,\n  Label,\n  type FieldProps\n}\n",
     "type": "ui"
   },
   "drop-zone": {
@@ -1946,7 +1946,7 @@
   },
   "button": {
     "component": "@/components/ui/button",
-    "raw": "'use client'\n\nimport * as React from 'react'\n\nimport {\n  Button as ButtonPrimitive,\n  type ButtonProps as ButtonPrimitiveProps\n} from 'react-aria-components'\nimport { tv } from 'tailwind-variants'\n\nimport { cr, focusButtonStyles } from './primitive'\n\nconst buttonStyles = tv(\n  {\n    extend: focusButtonStyles,\n    base: [\n      'kbt32x relative no-underline isolate inline-flex items-center justify-center gap-x-2 border font-medium',\n      'forced-colors:[--btn-icon:ButtonText] forced-colors:hover:[--btn-icon:ButtonText] [&>[data-slot=icon]]:-mx-0.5 [&>[data-slot=icon]]:my-1 [&>[data-slot=icon]]:size-4 [&>[data-slot=icon]]:shrink-0 [&>[data-slot=icon]]:text-[--btn-icon]'\n    ],\n    variants: {\n      intent: {\n        primary: [\n          'text-white [--btn-bg:theme(colors.primary.DEFAULT)] [--btn-border:theme(colors.primary.DEFAULT)] [--btn-hover-overlay:theme(colors.white/10%)]',\n          '[--btn-icon:theme(colors.primary.fg/60%)] active:[--btn-icon:theme(colors.primary.fg/80%)] hover:[--btn-icon:theme(colors.primary.fg/80%)]'\n        ],\n        secondary: [\n          'text-secondary-fg [--btn-bg:white] dark:[--btn-bg:theme(colors.secondary.DEFAULT)] [--btn-border:theme(colors.secondary.fg/10%)] [--btn-hover-overlay:theme(colors.secondary.fg/2.5%)] data-[active]:[--btn-border:theme(colors.secondary.fg/15%)] hover:[--btn-border:theme(colors.secondary.fg/15%)]',\n          '[--btn-icon:theme(colors.muted.fg)] active:[--btn-icon:theme(colors.fg)] hover:[--btn-icon:theme(colors.fg)]'\n        ],\n        success: [\n          'text-white [--btn-bg:theme(colors.success.DEFAULT)] [--btn-border:theme(colors.success.DEFAULT)] [--btn-hover-overlay:theme(colors.white/10%)]',\n          '[--btn-icon:theme(colors.white/60%)] active:[--btn-icon:theme(colors.white/80%)] hover:[--btn-icon:theme(colors.white/80%)]'\n        ],\n        'light/dark': [\n          'text-background [--btn-bg:theme(colors.dark)] [--btn-border:theme(colors.dark/90%)] [--btn-hover-overlay:theme(colors.white/10%)]',\n          'dark:[--btn-bg:white] dark:[--btn-hover-overlay:theme(colors.dark/5%)]',\n          '[--btn-icon:theme(colors.muted.fg)] active:[--btn-icon:theme(colors.background/85%)] hover:[--btn-icon:theme(colors.background/85%)]'\n        ],\n        dark: [\n          'text-light [--btn-bg:theme(colors.dark)] [--btn-border:theme(colors.dark)] [--btn-hover-overlay:theme(colors.light/2.5%)]',\n          '[--btn-icon:theme(colors.light/60%)] active:[--btn-icon:theme(colors.light/80%)] hover:[--btn-icon:theme(colors.light/80%)]'\n        ],\n        light: [\n          'text-dark [--btn-bg:white] [--btn-border:theme(colors.dark/10%)] [--btn-hover-overlay:theme(colors.dark/2.5%)] active:[--btn-border:theme(colors.dark/15%)] hover:[--btn-border:theme(colors.dark/15%)]',\n          '[--btn-icon:theme(colors.dark/60%)] active:[--btn-icon:theme(colors.dark/80%)] hover:[--btn-icon:theme(colors.dark/80%)]'\n        ],\n        info: [\n          'text-info-fg [--btn-bg:theme(colors.info.DEFAULT)] [--btn-border:theme(colors.info.DEFAULT/80%)] [--btn-hover-overlay:theme(colors.white/25%)]',\n          '[--btn-icon:theme(colors.info.fg/60%)] active:[--btn-icon:theme(colors.info.fg/80%)] hover:[--btn-icon:theme(colors.info.fg/80%)]'\n        ],\n        warning: [\n          'text-warning-fg [--btn-bg:theme(colors.warning.DEFAULT)] [--btn-border:theme(colors.warning.DEFAULT)] [--btn-hover-overlay:theme(colors.white/10%)]',\n          '[--btn-icon:theme(colors.warning.fg/60%)] active:[--btn-icon:theme(colors.warning.fg/80%)] hover:[--btn-icon:theme(colors.warning.fg/80%)]'\n        ],\n        danger: [\n          'text-white [--btn-bg:theme(colors.danger.DEFAULT)] [--btn-border:theme(colors.danger.DEFAULT)] [--btn-hover-overlay:theme(colors.white/10%)]',\n          '[--btn-icon:theme(colors.white/60%)] active:[--btn-icon:theme(colors.white/80%)] hover:[--btn-icon:theme(colors.white/80%)]'\n        ]\n      },\n      appearance: {\n        solid:\n          'border-transparent bg-[--btn-border] dark:bg-[--btn-bg] before:absolute before:inset-0 before:-z-10 before:bg-[--btn-bg] before:shadow dark:before:hidden dark:border-white/5 after:absolute after:inset-0 after:-z-10 after:shadow-[shadow:inset_0_1px_theme(colors.white/15%)] after:active:bg-[--btn-hover-overlay] after:hover:bg-[--btn-hover-overlay] dark:after:-inset-px before:data-[disabled]:shadow-none after:data-[disabled]:shadow-none',\n        outline:\n          'border-border hover:bg-secondary/90 active:bg-secondary/90 text-fg [--btn-icon:theme(colors.zinc.400)] active:[--btn-icon:theme(colors.zinc.500)] hover:[--btn-icon:theme(colors.zinc.500)] dark:active:[--btn-icon:theme(colors.zinc.300)] dark:hover:[--btn-icon:theme(colors.zinc.300)]',\n        plain:\n          'border-transparent text-fg pressed:bg-secondary/90 active:bg-fg/5 hover:bg-fg/5 [--btn-icon:theme(colors.zinc.500)] active:[--btn-icon:theme(colors.zinc.700)] hover:[--btn-icon:theme(colors.zinc.700)] dark:[--btn-icon:theme(colors.zinc.500)] dark:active:[--btn-icon:theme(colors.zinc.400)] dark:hover:[--btn-icon:theme(colors.zinc.400)]'\n      },\n      size: {\n        'extra-small':\n          'h-8 px-[calc(theme(spacing.3)-1px)] py-[calc(theme(spacing.1)-1px)] text-xs/4 lg:text-[0.800rem]/4',\n        small:\n          'h-9 px-[calc(theme(spacing.4)-1px)] py-[calc(theme(spacing[1.5])-1px)] text-sm/5 lg:text-sm/5',\n        medium:\n          'h-10 px-[calc(theme(spacing.4)-1px)] py-[calc(theme(spacing.2)-1px)] text-base lg:text-sm/6',\n        large:\n          'h-10 sm:h-11 px-[calc(theme(spacing.4)-1px)] sm:px-[calc(theme(spacing.5)-1px)] py-[calc(theme(spacing[2.5])-1px)] text-base lg:text-base/7 sm:[&>[data-slot=icon]]:size-5',\n        'square-petite': 'size-9 shrink-0 [&_[data-slot=icon]]:text-current'\n      },\n      shape: {\n        square:\n          'rounded-lg before:rounded-[calc(theme(borderRadius.lg)-1px)] after:rounded-[calc(theme(borderRadius.lg)-1px)] dark:after:rounded-lg',\n        circle:\n          'rounded-[9999px] before:rounded-[9998px] after:rounded-[9998px] dark:after:rounded-[9999px]'\n      },\n      isDisabled: {\n        false: 'forced-colors:disabled:text-[GrayText]',\n        true: 'cursor-default opacity-60 forced-colors:disabled:text-[GrayText]'\n      }\n    },\n    defaultVariants: {\n      intent: 'primary',\n      appearance: 'solid',\n      size: 'medium',\n      shape: 'square'\n    },\n    compoundVariants: [\n      {\n        appearance: ['outline', 'plain'],\n        className: 'px-1',\n        size: 'extra-small'\n      },\n      {\n        appearance: ['outline', 'plain'],\n        className: 'px-[calc(theme(spacing.1)-1px)]',\n        size: 'small'\n      },\n      {\n        appearance: ['outline', 'plain'],\n        className: 'px-[calc(theme(spacing.2)-1px)]',\n        size: 'medium'\n      },\n      {\n        appearance: ['outline', 'plain'],\n        className: 'px-[calc(theme(spacing.3)-1px)]',\n        size: 'large'\n      }\n    ]\n  },\n  {\n    responsiveVariants: ['sm', 'md', 'lg', 'xl']\n  }\n)\n\ninterface ButtonProps extends ButtonPrimitiveProps {\n  intent?:\n    | 'primary'\n    | 'secondary'\n    | 'danger'\n    | 'warning'\n    | 'info'\n    | 'light/dark'\n    | 'success'\n    | 'light'\n    | 'dark'\n  size?: 'medium' | 'large' | 'square-petite' | 'extra-small' | 'small'\n  shape?: 'square' | 'circle'\n  appearance?: 'solid' | 'outline' | 'plain'\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, intent, appearance, size, shape, ...props }, ref) => {\n    return (\n      <ButtonPrimitive\n        ref={ref}\n        {...props}\n        className={cr(className, (className, renderProps) =>\n          buttonStyles({\n            ...renderProps,\n            intent,\n            appearance,\n            size,\n            shape,\n            className\n          })\n        )}\n      />\n    )\n  }\n)\n\nButton.displayName = 'Button'\n\nexport { Button, ButtonPrimitive, buttonStyles, type ButtonProps }\n",
+    "raw": "'use client'\n\nimport * as React from 'react'\n\nimport {\n  Button as ButtonPrimitive,\n  type ButtonProps as ButtonPrimitiveProps\n} from 'react-aria-components'\nimport { tv } from 'tailwind-variants'\n\nimport { cr, focusButtonStyles } from './primitive'\n\nconst buttonStyles = tv(\n  {\n    extend: focusButtonStyles,\n    base: [\n      'kbt32x relative no-underline isolate inline-flex items-center justify-center gap-x-2 border font-medium',\n      'forced-colors:[--btn-icon:ButtonText] forced-colors:hover:[--btn-icon:ButtonText] [&>[data-slot=icon]]:-mx-0.5 [&>[data-slot=icon]]:my-1 [&>[data-slot=icon]]:size-4 [&>[data-slot=icon]]:shrink-0 [&>[data-slot=icon]]:text-[--btn-icon]'\n    ],\n    variants: {\n      intent: {\n        primary: [\n          'text-white [--btn-bg:theme(colors.primary.DEFAULT)] [--btn-border:theme(colors.primary.DEFAULT)] [--btn-hover-overlay:theme(colors.white/10%)]',\n          '[--btn-icon:theme(colors.primary.fg/60%)] active:[--btn-icon:theme(colors.primary.fg/80%)] hover:[--btn-icon:theme(colors.primary.fg/80%)]'\n        ],\n        secondary: [\n          'text-secondary-fg [--btn-bg:white] dark:[--btn-bg:theme(colors.secondary.DEFAULT)] [--btn-border:theme(colors.secondary.fg/10%)] [--btn-hover-overlay:theme(colors.secondary.fg/2.5%)] data-[active]:[--btn-border:theme(colors.secondary.fg/15%)] hover:[--btn-border:theme(colors.secondary.fg/15%)]',\n          '[--btn-icon:theme(colors.muted.fg)] active:[--btn-icon:theme(colors.fg)] hover:[--btn-icon:theme(colors.fg)]'\n        ],\n        success: [\n          'text-white [--btn-bg:theme(colors.success.DEFAULT)] [--btn-border:theme(colors.success.DEFAULT)] [--btn-hover-overlay:theme(colors.white/10%)]',\n          '[--btn-icon:theme(colors.white/60%)] active:[--btn-icon:theme(colors.white/80%)] hover:[--btn-icon:theme(colors.white/80%)]'\n        ],\n        'light/dark': [\n          'text-background [--btn-bg:theme(colors.dark)] [--btn-border:theme(colors.dark/90%)] [--btn-hover-overlay:theme(colors.white/10%)]',\n          'dark:[--btn-bg:white] dark:[--btn-hover-overlay:theme(colors.dark/5%)]',\n          '[--btn-icon:theme(colors.muted.fg)] active:[--btn-icon:theme(colors.background/85%)] hover:[--btn-icon:theme(colors.background/85%)]'\n        ],\n        dark: [\n          'text-light [--btn-bg:theme(colors.dark)] [--btn-border:theme(colors.dark)] [--btn-hover-overlay:theme(colors.light/2.5%)]',\n          '[--btn-icon:theme(colors.light/60%)] active:[--btn-icon:theme(colors.light/80%)] hover:[--btn-icon:theme(colors.light/80%)]'\n        ],\n        light: [\n          'text-dark [--btn-bg:white] [--btn-border:theme(colors.dark/10%)] [--btn-hover-overlay:theme(colors.dark/2.5%)] active:[--btn-border:theme(colors.dark/15%)] hover:[--btn-border:theme(colors.dark/15%)]',\n          '[--btn-icon:theme(colors.dark/60%)] active:[--btn-icon:theme(colors.dark/80%)] hover:[--btn-icon:theme(colors.dark/80%)]'\n        ],\n        info: [\n          'text-info-fg [--btn-bg:theme(colors.info.DEFAULT)] [--btn-border:theme(colors.info.DEFAULT/80%)] [--btn-hover-overlay:theme(colors.white/25%)]',\n          '[--btn-icon:theme(colors.info.fg/60%)] active:[--btn-icon:theme(colors.info.fg/80%)] hover:[--btn-icon:theme(colors.info.fg/80%)]'\n        ],\n        warning: [\n          'text-warning-fg [--btn-bg:theme(colors.warning.DEFAULT)] [--btn-border:theme(colors.warning.DEFAULT)] [--btn-hover-overlay:theme(colors.white/10%)]',\n          '[--btn-icon:theme(colors.warning.fg/60%)] active:[--btn-icon:theme(colors.warning.fg/80%)] hover:[--btn-icon:theme(colors.warning.fg/80%)]'\n        ],\n        danger: [\n          'text-white [--btn-bg:theme(colors.danger.DEFAULT)] [--btn-border:theme(colors.danger.DEFAULT)] [--btn-hover-overlay:theme(colors.white/10%)]',\n          '[--btn-icon:theme(colors.white/60%)] active:[--btn-icon:theme(colors.white/80%)] hover:[--btn-icon:theme(colors.white/80%)]'\n        ]\n      },\n      appearance: {\n        solid:\n          'border-transparent bg-[--btn-border] dark:bg-[--btn-bg] before:absolute before:inset-0 before:-z-10 before:bg-[--btn-bg] before:shadow dark:before:hidden dark:border-white/5 after:absolute after:inset-0 after:-z-10 after:shadow-[shadow:inset_0_1px_theme(colors.white/15%)] after:active:bg-[--btn-hover-overlay] after:hover:bg-[--btn-hover-overlay] dark:after:-inset-px before:data-[disabled]:shadow-none after:data-[disabled]:shadow-none',\n        outline:\n          'border-border hover:bg-secondary/90 active:bg-secondary/90 text-fg [--btn-icon:theme(colors.zinc.400)] active:[--btn-icon:theme(colors.fg)] hover:[--btn-icon:theme(colors.fg)]',\n        plain:\n          'border-transparent text-fg pressed:bg-secondary/90 active:bg-secondary/90 hover:bg-secondary/90 [--btn-icon:theme(colors.muted.fg)] active:[--btn-icon:theme(colors.fg)] hover:[--btn-icon:theme(colors.fg)]'\n      },\n      size: {\n        'extra-small':\n          'h-8 px-[calc(theme(spacing.3)-1px)] py-[calc(theme(spacing.1)-1px)] text-xs/4 lg:text-[0.800rem]/4',\n        small:\n          'h-9 px-[calc(theme(spacing.4)-1px)] py-[calc(theme(spacing[1.5])-1px)] text-sm/5 lg:text-sm/5',\n        medium:\n          'h-10 px-[calc(theme(spacing.4)-1px)] py-[calc(theme(spacing.2)-1px)] text-base lg:text-sm/6',\n        large:\n          'h-10 sm:h-11 px-[calc(theme(spacing.4)-1px)] sm:px-[calc(theme(spacing.5)-1px)] py-[calc(theme(spacing[2.5])-1px)] text-base lg:text-base/7 sm:[&>[data-slot=icon]]:size-5',\n        'square-petite': 'size-9 shrink-0 [&_[data-slot=icon]]:text-current'\n      },\n      shape: {\n        square:\n          'rounded-lg before:rounded-[calc(theme(borderRadius.lg)-1px)] after:rounded-[calc(theme(borderRadius.lg)-1px)] dark:after:rounded-lg',\n        circle:\n          'rounded-[9999px] before:rounded-[9998px] after:rounded-[9998px] dark:after:rounded-[9999px]'\n      },\n      isDisabled: {\n        false: 'forced-colors:disabled:text-[GrayText]',\n        true: 'cursor-default opacity-60 forced-colors:disabled:text-[GrayText]'\n      }\n    },\n    defaultVariants: {\n      intent: 'primary',\n      appearance: 'solid',\n      size: 'medium',\n      shape: 'square'\n    },\n    compoundVariants: [\n      {\n        appearance: ['outline', 'plain'],\n        className: 'px-1',\n        size: 'extra-small'\n      },\n      {\n        appearance: ['outline', 'plain'],\n        className: 'px-[calc(theme(spacing.1)-1px)]',\n        size: 'small'\n      },\n      {\n        appearance: ['outline', 'plain'],\n        className: 'px-[calc(theme(spacing.2)-1px)]',\n        size: 'medium'\n      },\n      {\n        appearance: ['outline', 'plain'],\n        className: 'px-[calc(theme(spacing.3)-1px)]',\n        size: 'large'\n      }\n    ]\n  },\n  {\n    responsiveVariants: ['sm', 'md', 'lg', 'xl']\n  }\n)\n\ninterface ButtonProps extends ButtonPrimitiveProps {\n  intent?:\n    | 'primary'\n    | 'secondary'\n    | 'danger'\n    | 'warning'\n    | 'info'\n    | 'light/dark'\n    | 'success'\n    | 'light'\n    | 'dark'\n  size?: 'medium' | 'large' | 'square-petite' | 'extra-small' | 'small'\n  shape?: 'square' | 'circle'\n  appearance?: 'solid' | 'outline' | 'plain'\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, intent, appearance, size, shape, ...props }, ref) => {\n    return (\n      <ButtonPrimitive\n        ref={ref}\n        {...props}\n        className={cr(className, (className, renderProps) =>\n          buttonStyles({\n            ...renderProps,\n            intent,\n            appearance,\n            size,\n            shape,\n            className\n          })\n        )}\n      />\n    )\n  }\n)\n\nButton.displayName = 'Button'\n\nexport { Button, ButtonPrimitive, buttonStyles, type ButtonProps }\n",
     "type": "ui"
   },
   "toggle": {
diff --git a/components/ui/link.tsx b/components/ui/link.tsx
index 2daba1e3..034882c7 100644
--- a/components/ui/link.tsx
+++ b/components/ui/link.tsx
@@ -10,10 +10,8 @@ const linkStyles = tv({
   variants: {
     intent: {
       unstyled: 'text-fg',
-      primary:
-        'text-primary hover:text-primary/80 forced-colors:disabled:text-[GrayText]',
-      danger:
-        'text-danger hover:text-danger/80 forced-colors:disabled:text-[GrayText]',
+      primary: 'text-primary hover:text-primary/80 forced-colors:disabled:text-[GrayText]',
+      danger: 'text-danger hover:text-danger/80 forced-colors:disabled:text-[GrayText]',
       'lad/primary':
         'text-fg hover:text-primary dark:hover:text-primary/80 forced-colors:disabled:text-[GrayText]',
       secondary: 'text-secondary-fg hover:text-secondary-fg/80'

From 4537bdac34e286600725d725a4b47226408414b1 Mon Sep 17 00:00:00 2001
From: "Irsyad A. Panjaitan" <irsyad@parsinta.com>
Date: Sat, 17 Aug 2024 02:42:05 +0700
Subject: [PATCH 3/6] fix everything

---
 .gitignore                                    |    1 +
 .prettierrc                                   |    2 +-
 app/(app)/colors/(colors)/color-generator.tsx |   24 +-
 app/(app)/colors/(colors)/color-item.tsx      |   36 +-
 app/(app)/colors/(colors)/color-palette.tsx   |   18 +-
 app/(app)/colors/(colors)/color-row.tsx       |   38 +-
 .../(colors)/copy-json-color-shades.tsx       |   22 +-
 app/(app)/colors/page.tsx                     |   22 +-
 app/(app)/components/page.tsx                 |   18 +-
 .../components/partials/card-list-box.tsx     |   14 +-
 .../components/partials/on-this-page.tsx      |   24 +-
 app/(app)/d/[slug]/page.tsx                   |    6 +-
 app/(app)/docs/[...slug]/page.tsx             |   86 +-
 app/(app)/docs/layout.tsx                     |    4 +-
 app/(app)/docs/page.tsx                       |    4 +-
 app/(app)/icons/page.tsx                      |   18 +-
 app/(app)/icons/partials/controller/index.tsx |   32 +-
 .../icons/partials/controller/install.tsx     |   32 +-
 .../icons/partials/controller/search.tsx      |   14 +-
 .../icons/partials/controller/select-size.tsx |   32 +-
 app/(app)/icons/partials/icons-list.tsx       |   48 +-
 app/(app)/icons/partials/styles.ts            |   16 +-
 app/(app)/sink/layout.tsx                     |    2 +-
 app/(app)/sink/page.tsx                       |    4 +-
 app/(app)/themes/blocks.tsx                   |   10 +-
 app/(app)/themes/blocks/buttons.tsx           |   18 +-
 app/(app)/themes/blocks/login-form.tsx        |    4 +-
 .../themes/blocks/range-calendar-blocks.tsx   |   11 +-
 app/(app)/themes/controller.tsx               |   96 +
 app/(app)/themes/controller/index.tsx         |    3 -
 app/(app)/themes/page.tsx                     |   14 +-
 app/(app)/themes/themes-list.ts               |   98 +-
 app/(app)/themes/themes.tsx                   |   82 +-
 app/layout.tsx                                |  120 +-
 app/page.tsx                                  |   10 +-
 app/robots.ts                                 |    8 +-
 app/sitemap.ts                                |   14 +-
 components/aside.tsx                          |  112 +-
 components/blocks.tsx                         |   36 +-
 components/blocks/buttons.tsx                 |    6 +-
 components/blocks/check-radio-block.tsx       |   14 +-
 components/blocks/grid-list-drag-block.tsx    |   26 +-
 components/blocks/login-form.tsx              |    6 +-
 components/blocks/menus.tsx                   |    8 +-
 components/blocks/overlays.tsx                |    6 +-
 components/blocks/slider-on-popover-block.tsx |   10 +-
 components/blocks/table-demo.tsx              |    6 +-
 components/blocks/toolbar-block.tsx           |    8 +-
 components/cta.tsx                            |   10 +-
 components/docs/buttons/button-icon-demo.tsx  |    6 +-
 components/docs/buttons/button-link-demo.tsx  |    6 +-
 components/docs/buttons/button-size-demo.tsx  |    4 +-
 components/docs/buttons/toggle-demo.tsx       |    6 +-
 .../collections/choicebox-columns-demo.tsx    |   18 +-
 .../collections/choicebox-controlled-demo.tsx |   34 +-
 .../docs/collections/choicebox-demo.tsx       |   22 +-
 .../collections/choicebox-disabled-demo.tsx   |   32 +-
 .../choicebox-single-selection-demo.tsx       |   30 +-
 .../docs/collections/command-basic-demo.tsx   |   10 +-
 .../collections/grid-list-controlled-demo.tsx |   20 +-
 .../docs/collections/grid-list-demo.tsx       |   14 +-
 .../collections/grid-list-disabled-demo.tsx   |   14 +-
 .../grid-list-drag-between-item-demo.tsx      |   30 +-
 .../docs/collections/grid-list-drag-demo.tsx  |   30 +-
 .../collections/grid-list-multiple-demo.tsx   |   14 +-
 .../grid-list-render-empty-state-demo.tsx     |    4 +-
 .../collections/list-box-controlled-demo.tsx  |   24 +-
 components/docs/collections/list-box-demo.tsx |   14 +-
 .../collections/list-box-disabled-demo.tsx    |   18 +-
 .../list-box-item-details-demo.tsx            |   14 +-
 .../collections/list-box-multiple-demo.tsx    |   26 +-
 .../collections/list-box-rearrange-demo.tsx   |   24 +-
 .../collections/list-box-section-demo.tsx     |  106 +-
 .../docs/collections/menu-basic-demo.tsx      |    4 +-
 .../docs/collections/menu-collection-demo.tsx |   46 +-
 .../docs/collections/menu-danger-demo.tsx     |    6 +-
 .../docs/collections/menu-disabled-demo.tsx   |    6 +-
 .../collections/menu-item-details-demo.tsx    |   12 +-
 .../collections/menu-respect-screen-demo.tsx  |    8 +-
 .../docs/collections/menu-section-demo.tsx    |  104 +-
 components/docs/collections/menu-sub-demo.tsx |    8 +-
 .../docs/collections/menu-with-arrow-demo.tsx |    8 +-
 .../docs/collections/menu-with-icon-demo.tsx  |   20 +-
 .../docs/collections/multiple-menu-demo.tsx   |   38 +-
 .../docs/collections/single-menu-demo.tsx     |   56 +-
 .../docs/collections/table-bulk-demo.tsx      |   60 +-
 components/docs/collections/table-demo.tsx    |   42 +-
 .../docs/collections/table-drag-demo.tsx      |   72 +-
 .../docs/collections/table-sorting-demo.tsx   |   10 +-
 .../collections/tag-group-controlled-demo.tsx |   16 +-
 .../docs/collections/tag-group-demo.tsx       |   12 +-
 .../collections/tag-group-disabled-demo.tsx   |    4 +-
 .../docs/collections/tag-group-href-demo.tsx  |   10 +-
 .../collections/tag-group-intent-demo.tsx     |   16 +-
 .../docs/collections/tag-group-shape-demo.tsx |   14 +-
 .../tag-group-with-remove-demo.tsx            |   26 +-
 .../docs/colors/color-area-channel-demo.tsx   |    4 +-
 .../colors/color-area-controlled-demo.tsx     |   12 +-
 components/docs/colors/color-area-demo.tsx    |    4 +-
 .../docs/colors/color-area-disabled-demo.tsx  |    4 +-
 .../docs/colors/color-area-space-demo.tsx     |    4 +-
 .../colors/color-field-controlled-demo.tsx    |   12 +-
 components/docs/colors/color-field-demo.tsx   |    4 +-
 .../docs/colors/color-field-disabled-demo.tsx |    4 +-
 .../colors/color-field-with-prefix-demo.tsx   |    6 +-
 .../colors/color-field-with-suffix-demo.tsx   |    6 +-
 .../colors/color-picker-combination-demo.tsx  |   10 +-
 .../colors/color-picker-controlled-demo.tsx   |   10 +-
 .../color-picker-custom-colors-demo.tsx       |   28 +-
 components/docs/colors/color-picker-demo.tsx  |    6 +-
 .../colors/color-picker-disabled-demo.tsx     |   10 +-
 ...or-picker-enable-selection-format-demo.tsx |    6 +-
 .../color-picker-enable-swatch-demo.tsx       |    8 +-
 .../color-picker-with-description-demo.tsx    |    6 +-
 .../colors/color-picker-with-label-demo.tsx   |    6 +-
 .../color-picker-with-placeholder-demo.tsx    |    6 +-
 .../colors/color-slider-controlled-demo.tsx   |    8 +-
 components/docs/colors/color-slider-demo.tsx  |    4 +-
 .../colors/color-slider-disabled-demo.tsx     |    4 +-
 .../colors/color-slider-with-label-demo.tsx   |    2 +-
 .../color-slider-without-output-demo.tsx      |    4 +-
 .../colors/color-swatch-controlled-demo.tsx   |   12 +-
 components/docs/colors/color-swatch-demo.tsx  |    4 +-
 .../docs/colors/color-swatch-picker-demo.tsx  |   10 +-
 ...color-swatch-picker-item-disabled-demo.tsx |   12 +-
 .../colors/color-wheel-controlled-demo.tsx    |   12 +-
 components/docs/colors/color-wheel-demo.tsx   |    4 +-
 .../docs/colors/color-wheel-disabled-demo.tsx |    4 +-
 components/docs/colors/controlled-values.tsx  |   12 +-
 .../controls/accordion-border-hidden-demo.tsx |   32 +-
 .../accordion-default-expand-demo.tsx         |   22 +-
 components/docs/controls/accordion-demo.tsx   |    6 +-
 .../docs/controls/accordion-disabled-demo.tsx |   30 +-
 .../accordion-hide-indicator-demo.tsx         |   18 +-
 .../controls/command-menu-controlled-demo.tsx |   34 +-
 .../command-menu-danger-item-demo.tsx         |    6 +-
 .../docs/controls/command-menu-demo.tsx       |   20 +-
 .../command-menu-description-demo.tsx         |    8 +-
 .../controls/command-menu-disabled-demo.tsx   |    6 +-
 .../controls/command-menu-keyboard-demo.tsx   |    6 +-
 .../controls/command-menu-section-demo.tsx    |   30 +-
 .../controls/command-menu-separator-demo.tsx  |    6 +-
 .../command-menu-trigger-by-keyboard-demo.tsx |   16 +-
 .../controls/context-menu-danger-demo.tsx     |    6 +-
 .../docs/controls/context-menu-demo.tsx       |    6 +-
 .../controls/context-menu-disabled-demo.tsx   |    6 +-
 .../context-menu-item-details-demo.tsx        |   12 +-
 .../controls/context-menu-separator-demo.tsx  |    6 +-
 .../controls/context-menu-with-icon-demo.tsx  |    8 +-
 .../docs/controls/slider-controlled-demo.tsx  |   10 +-
 .../docs/controls/slider-disabled-demo.tsx    |    4 +-
 .../docs/controls/slider-orientation-demo.tsx |   20 +-
 .../controls/slider-prefix-suffix-demo.tsx    |    8 +-
 .../docs/controls/slider-range-demo.tsx       |    4 +-
 components/docs/controls/slider-step-demo.tsx |    4 +-
 .../docs/controls/switch-controlled-demo.tsx  |    8 +-
 .../docs/controls/switch-disabled-demo.tsx    |    4 +-
 .../docs/controls/switch-variant-demo.tsx     |   12 +-
 components/docs/controls/toolbar-demo.tsx     |    8 +-
 .../docs/controls/toolbar-disabled-demo.tsx   |    8 +-
 .../controls/toolbar-orientation-demo.tsx     |    8 +-
 .../docs/date-and-time/calendar-demo.tsx      |    4 +-
 .../date-field-controlled-demo.tsx            |   16 +-
 .../docs/date-and-time/date-field-demo.tsx    |    4 +-
 .../date-field-disabled-demo.tsx              |    4 +-
 .../date-field-validation-demo.tsx            |    4 +-
 .../date-picker-controlled-demo.tsx           |   16 +-
 .../date-picker-custom-validation-demo.tsx    |   10 +-
 .../docs/date-and-time/date-picker-demo.tsx   |    4 +-
 .../date-picker-disabled-demo.tsx             |    4 +-
 .../date-picker-required-demo.tsx             |    6 +-
 .../date-range-picker-controlled-demo.tsx     |   16 +-
 ...te-range-picker-custom-validation-demo.tsx |    8 +-
 .../date-and-time/date-range-picker-demo.tsx  |    4 +-
 .../date-range-picker-disabled-demo.tsx       |    4 +-
 .../date-range-picker-time-demo.tsx           |    8 +-
 .../date-range-picker-validation-demo.tsx     |    4 +-
 .../docs/date-and-time/date-time-demo.tsx     |    8 +-
 .../date-and-time/date-time-field-demo.tsx    |    8 +-
 .../date-and-time/range-calendar-demo.tsx     |    4 +-
 .../time-field-controlled-demo.tsx            |   10 +-
 .../docs/date-and-time/time-field-demo.tsx    |    6 +-
 .../time-field-disabled-demo.tsx              |    4 +-
 .../docs/date-and-time/time-field-hc-demo.tsx |   10 +-
 .../time-field-validation-demo.tsx            |    4 +-
 .../drop-zone-and-file-trigger-demo.tsx       |   18 +-
 .../docs/drag-and-drop/drop-zone-demo.tsx     |    8 +-
 .../docs/forms/checkbox-controlled-demo.tsx   |    8 +-
 .../docs/forms/checkbox-description-demo.tsx  |    4 +-
 .../docs/forms/checkbox-disabled-demo.tsx     |    4 +-
 .../forms/checkbox-group-controlled-demo.tsx  |   10 +-
 components/docs/forms/checkbox-group-demo.tsx |    6 +-
 .../forms/checkbox-group-description-demo.tsx |    4 +-
 .../forms/checkbox-group-disabled-demo.tsx    |    6 +-
 .../forms/checkbox-indeterminate-demo.tsx     |    4 +-
 .../docs/forms/checkbox-invalid-demo.tsx      |    4 +-
 .../docs/forms/form-validation-demo.tsx       |    4 +-
 .../docs/forms/input-otp-controlled-demo.tsx  |    8 +-
 components/docs/forms/input-otp-demo.tsx      |    4 +-
 .../docs/forms/input-otp-separator-demo.tsx   |    4 +-
 .../forms/number-field-controlled-demo.tsx    |    8 +-
 components/docs/forms/number-field-demo.tsx   |    4 +-
 .../docs/forms/number-field-disabled-demo.tsx |    4 +-
 .../docs/forms/number-field-invalid-demo.tsx  |    4 +-
 .../radio-group-children-description-demo.tsx |    4 +-
 .../forms/radio-group-controlled-demo.tsx     |   10 +-
 components/docs/forms/radio-group-demo.tsx    |    4 +-
 .../forms/radio-group-description-demo.tsx    |    4 +-
 .../docs/forms/radio-group-disabled-demo.tsx  |    4 +-
 .../docs/forms/radio-group-invalid-demo.tsx   |    4 +-
 .../forms/radio-group-orientation-demo.tsx    |    4 +-
 .../forms/search-field-controlled-demo.tsx    |   10 +-
 components/docs/forms/search-field-demo.tsx   |    4 +-
 .../docs/forms/search-field-disabled-demo.tsx |    4 +-
 .../forms/search-field-validation-demo.tsx    |    4 +-
 .../forms/search-field-with-label-demo.tsx    |    4 +-
 .../docs/forms/tag-field-appearance-demo.tsx  |    8 +-
 .../docs/forms/tag-field-controlled-demo.tsx  |   14 +-
 components/docs/forms/tag-field-demo.tsx      |   10 +-
 .../docs/forms/tag-field-disabled-demo.tsx    |    8 +-
 .../docs/forms/tag-field-intent-demo.tsx      |   16 +-
 components/docs/forms/tag-field-max-demo.tsx  |    8 +-
 .../docs/forms/tag-field-shape-demo.tsx       |   12 +-
 .../docs/forms/text-field-controlled-demo.tsx |   10 +-
 components/docs/forms/text-field-demo.tsx     |    4 +-
 .../docs/forms/text-field-disabled-demo.tsx   |    4 +-
 .../docs/forms/text-field-loading-demo.tsx    |    4 +-
 .../forms/text-field-prefix-suffix-demo.tsx   |    6 +-
 .../docs/forms/text-field-readonly-demo.tsx   |    4 +-
 .../forms/text-field-suffix-button-demo.tsx   |    8 +-
 .../docs/forms/text-field-validation-demo.tsx |    4 +-
 .../docs/forms/textarea-controlled-demo.tsx   |   10 +-
 .../docs/forms/textarea-disabled-demo.tsx     |    4 +-
 .../docs/forms/textarea-readonly-demo.tsx     |    4 +-
 .../docs/forms/textarea-validation-demo.tsx   |    8 +-
 components/docs/generated/previews.json       | 2017 -----------------
 components/docs/media/avatar-demo.tsx         |    4 +-
 .../docs/media/avatar-fallback-demo.tsx       |    4 +-
 components/docs/media/avatar-group-demo.tsx   |    4 +-
 .../docs/media/avatar-initials-demo.tsx       |    4 +-
 components/docs/media/avatar-shape-demo.tsx   |    4 +-
 components/docs/media/avatar-size-demo.tsx    |    4 +-
 components/docs/media/avatar-status-demo.tsx  |    4 +-
 components/docs/media/carousel-api-demo.tsx   |   18 +-
 .../docs/media/carousel-autoplay-demo.tsx     |   50 +-
 components/docs/media/carousel-demo.tsx       |    8 +-
 .../docs/media/carousel-options-demo.tsx      |    6 +-
 .../docs/media/carousel-orientation-demo.tsx  |   46 +-
 .../media/carousel-with-collection-demo.tsx   |   36 +-
 .../docs/navigation/breadcrumbs-demo.tsx      |    4 +-
 .../docs/navigation/link-button-demo.tsx      |    8 +-
 components/docs/navigation/link-demo.tsx      |    4 +-
 .../docs/navigation/link-disabled-demo.tsx    |    4 +-
 .../docs/navigation/link-intent-demo.tsx      |    4 +-
 .../docs/navigation/link-unstyled-demo.tsx    |    4 +-
 .../docs/navigation/pagination-demo.tsx       |    4 +-
 .../navigation/pagination-dynamic-demo.tsx    |    4 +-
 .../navigation/simple-pagination-demo.tsx     |    4 +-
 .../docs/navigation/tabs-collections-demo.tsx |   16 +-
 components/docs/navigation/tabs-demo.tsx      |    4 +-
 .../docs/navigation/tabs-disabled-demo.tsx    |    6 +-
 .../docs/navigation/tabs-icons-demo.tsx       |    6 +-
 components/docs/navigation/tabs-link-demo.tsx |   12 +-
 .../docs/navigation/tabs-orientation-demo.tsx |    4 +-
 .../docs/navigation/tabs-responsive-demo.tsx  |   26 +-
 .../docs/overlays/alert-dialog-demo.tsx       |    6 +-
 .../docs/overlays/drawer-basic-demo.tsx       |    8 +-
 .../docs/overlays/drawer-controlled-demo.tsx  |    6 +-
 .../docs/overlays/drawer-nested-demo.tsx      |   12 +-
 .../docs/overlays/drawer-sticky-demo.tsx      |   10 +-
 .../overlays/drawer-without-notch-demo.tsx    |    8 +-
 components/docs/overlays/modal-blur-demo.tsx  |    4 +-
 .../docs/overlays/modal-controlled-demo.tsx   |    6 +-
 .../overlays/modal-custom-classnames-demo.tsx |    8 +-
 .../docs/overlays/modal-custom-style-demo.tsx |    4 +-
 components/docs/overlays/modal-demo.tsx       |    4 +-
 .../docs/overlays/modal-nested-demo.tsx       |   12 +-
 components/docs/overlays/modal-size-demo.tsx  |   12 +-
 .../docs/overlays/modal-sticky-demo.tsx       |    6 +-
 .../overlays/modal-triggered-by-menu-demo.tsx |   44 +-
 .../docs/overlays/popover-arrow-demo.tsx      |    6 +-
 .../docs/overlays/popover-controlled-demo.tsx |   26 +-
 .../docs/overlays/popover-custom-close.tsx    |    6 +-
 components/docs/overlays/popover-demo.tsx     |    4 +-
 .../docs/overlays/popover-placement-demo.tsx  |   10 +-
 .../docs/overlays/popover-trigger-demo.tsx    |    4 +-
 .../docs/overlays/sheet-classnames-demo.tsx   |    8 +-
 .../docs/overlays/sheet-controlled-demo.tsx   |    6 +-
 .../docs/overlays/sheet-custom-close-demo.tsx |    6 +-
 .../docs/overlays/sheet-custom-style-demo.tsx |    4 +-
 components/docs/overlays/sheet-demo.tsx       |    4 +-
 components/docs/overlays/sheet-menu-demo.tsx  |   10 +-
 .../docs/overlays/sheet-position-demo.tsx     |   14 +-
 components/docs/overlays/sheet-stack-demo.tsx |    6 +-
 .../docs/overlays/sheet-sticky-demo.tsx       |    6 +-
 .../docs/overlays/tooltip-delay-demo.tsx      |   10 +-
 components/docs/overlays/tooltip-demo.tsx     |   10 +-
 .../docs/overlays/tooltip-placement-demo.tsx  |   10 +-
 components/docs/rehype/code.tsx               |   76 +-
 components/docs/rehype/plain-code.tsx         |    8 +-
 components/docs/rehype/source-code.tsx        |   26 +-
 components/docs/statuses/badge-demo.tsx       |    4 +-
 .../docs/statuses/badge-intent-demo.tsx       |    6 +-
 components/docs/statuses/badge-shape-demo.tsx |    4 +-
 .../indeterminate-progress-bar-demo.tsx       |    6 +-
 components/docs/statuses/loader-demo.tsx      |    2 +-
 .../docs/statuses/loader-intent-demo.tsx      |    2 +-
 components/docs/statuses/loader-size-demo.tsx |    2 +-
 .../docs/statuses/loader-variant-demo.tsx     |    2 +-
 .../statuses/meter-currency-format-demo.tsx   |    8 +-
 .../statuses/meter-decimal-format-demo.tsx    |    8 +-
 components/docs/statuses/meter-demo.tsx       |    6 +-
 components/docs/statuses/note-demo.tsx        |    8 +-
 .../statuses/note-hide-indicator-demo.tsx     |    6 +-
 components/docs/statuses/note-intent-demo.tsx |   12 +-
 .../docs/statuses/progress-bar-demo.tsx       |    6 +-
 components/docs/statuses/skeleton-demo.tsx    |    2 +-
 .../docs/statuses/skeleton-intent-demo.tsx    |    2 +-
 .../docs/statuses/skeleton-shape-demo.tsx     |    2 +-
 .../docs/statuses/toast-action-demo.tsx       |   28 +-
 components/docs/statuses/toast-demo.tsx       |    8 +-
 .../docs/statuses/toast-description-demo.tsx  |   10 +-
 .../docs/statuses/toast-positions-demo.tsx    |   22 +-
 .../docs/statuses/toast-status-demo.tsx       |   20 +-
 components/docs/surfaces/card-demo.tsx        |    4 +-
 .../docs/surfaces/card-login-form-demo.tsx    |    4 +-
 components/docs/surfaces/card-table-demo.tsx  |   66 +-
 components/docs/surfaces/grid-basic-demo.tsx  |    4 +-
 components/docs/surfaces/grid-debug-demo.tsx  |    4 +-
 components/docs/surfaces/grid-gap-demo.tsx    |    2 +-
 .../docs/surfaces/grid-gap-x-y-demo.tsx       |    4 +-
 components/docs/surfaces/grid-item-demo.tsx   |    4 +-
 .../docs/surfaces/grid-responsive-demo.tsx    |    4 +-
 components/docs/surfaces/heading-demo.tsx     |    2 +-
 .../docs/surfaces/heading-level-demo.tsx      |    2 +-
 components/docs/surfaces/separator-demo.tsx   |    4 +-
 components/docs/surfaces/show-more-demo.tsx   |   14 +-
 components/footer.tsx                         |   22 +-
 components/hero.tsx                           |   30 +-
 components/logo.tsx                           |    2 +-
 components/pager.tsx                          |   18 +-
 components/ui/accordion.tsx                   |   46 +-
 components/ui/avatar.tsx                      |   66 +-
 components/ui/badge.tsx                       |   32 +-
 components/ui/breadcrumbs.tsx                 |   18 +-
 components/ui/button.tsx                      |  140 +-
 components/ui/calendar.tsx                    |   35 +-
 components/ui/card.tsx                        |   26 +-
 components/ui/carousel.tsx                    |   70 +-
 components/ui/checkbox.tsx                    |   42 +-
 components/ui/choicebox.tsx                   |   58 +-
 components/ui/color-field.tsx                 |   22 +-
 components/ui/color-picker.tsx                |   56 +-
 components/ui/color.tsx                       |   58 +-
 components/ui/combo-box.tsx                   |   36 +-
 components/ui/command-menu.tsx                |  106 +-
 components/ui/container.tsx                   |   10 +-
 components/ui/context-menu.tsx                |   22 +-
 components/ui/date-field.tsx                  |   26 +-
 components/ui/date-picker.tsx                 |   44 +-
 components/ui/date-range-picker.tsx           |   24 +-
 components/ui/dialog.tsx                      |   52 +-
 components/ui/drawer.tsx                      |   72 +-
 components/ui/drop-zone.tsx                   |   14 +-
 components/ui/dropdown.tsx                    |   44 +-
 components/ui/field.tsx                       |   38 +-
 components/ui/file-trigger.tsx                |   48 +-
 components/ui/form.tsx                        |    6 +-
 components/ui/grid-list.tsx                   |   32 +-
 components/ui/grid.tsx                        |  376 +--
 components/ui/heading.tsx                     |   38 +-
 components/ui/input-otp.tsx                   |   40 +-
 components/ui/keyboard.tsx                    |   16 +-
 components/ui/link.tsx                        |   28 +-
 components/ui/list-box.tsx                    |   42 +-
 components/ui/loader.tsx                      |   54 +-
 components/ui/loading-dots.tsx                |   12 +-
 components/ui/menu.tsx                        |   52 +-
 components/ui/meter.tsx                       |   34 +-
 components/ui/modal.tsx                       |   80 +-
 components/ui/multiple-select.tsx             |  114 +-
 components/ui/note.tsx                        |   46 +-
 components/ui/number-field.tsx                |   34 +-
 components/ui/pagination.tsx                  |  108 +-
 components/ui/popover.tsx                     |   74 +-
 components/ui/primitive.tsx                   |   36 +-
 components/ui/progress-bar.tsx                |   24 +-
 components/ui/radio.tsx                       |   34 +-
 components/ui/range-calendar.tsx              |   48 +-
 components/ui/search-field.tsx                |   24 +-
 components/ui/select.tsx                      |   32 +-
 components/ui/separator.tsx                   |   16 +-
 components/ui/sheet.tsx                       |   84 +-
 components/ui/show-more.tsx                   |   36 +-
 components/ui/skeleton.tsx                    |   22 +-
 components/ui/slider.tsx                      |   54 +-
 components/ui/snippet.tsx                     |   26 +-
 components/ui/switch.tsx                      |   49 +-
 components/ui/table.tsx                       |   36 +-
 components/ui/tabs.tsx                        |   54 +-
 components/ui/tag-field.tsx                   |   74 +-
 components/ui/tag-group.tsx                   |   80 +-
 components/ui/text-field.tsx                  |   24 +-
 components/ui/textarea.tsx                    |   16 +-
 components/ui/time-field.tsx                  |   18 +-
 components/ui/toast.tsx                       |   58 +-
 components/ui/toggle.tsx                      |   46 +-
 components/ui/toolbar.tsx                     |   36 +-
 components/ui/tooltip.tsx                     |   20 +-
 components/ui/visually-hidden.tsx             |    6 +-
 resources/styles/app.css                      |    9 +-
 411 files changed, 4043 insertions(+), 5902 deletions(-)
 create mode 100644 app/(app)/themes/controller.tsx
 delete mode 100644 app/(app)/themes/controller/index.tsx
 delete mode 100644 components/docs/generated/previews.json

diff --git a/.gitignore b/.gitignore
index 3bdf8f4f..61f2ca64 100644
--- a/.gitignore
+++ b/.gitignore
@@ -12,6 +12,7 @@ ignore
 # testing
 /coverage
 
+/components/docs/generated/previews.json
 # next.js
 /.next/
 /out/
diff --git a/.prettierrc b/.prettierrc
index c2ab25bb..6740fab4 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -20,7 +20,7 @@
     "^[./]"
   ],
   "importOrderSeparation": true,
-  "singleQuote": true,
+  "singleQuote": false,
   "trailingComma": "none",
   "tabWidth": 2,
   "semi": false,
diff --git a/app/(app)/colors/(colors)/color-generator.tsx b/app/(app)/colors/(colors)/color-generator.tsx
index 16afbb8e..4236f31f 100644
--- a/app/(app)/colors/(colors)/color-generator.tsx
+++ b/app/(app)/colors/(colors)/color-generator.tsx
@@ -1,21 +1,21 @@
-'use client'
+"use client"
 
-import React, { useState } from 'react'
+import React, { useState } from "react"
 
-import { ColorRow } from '@/app/(app)/colors/(colors)/color-row'
-import { generateColorScale, getColorName } from '@/resources/lib/colors'
-import { parseColor } from '@react-stately/color'
-import { IconArrowWallRight } from 'justd-icons'
-import { ColorField, defaultColor, useMediaQuery } from 'ui'
+import { ColorRow } from "@/app/(app)/colors/(colors)/color-row"
+import { generateColorScale, getColorName } from "@/resources/lib/colors"
+import { parseColor } from "@react-stately/color"
+import { IconArrowWallRight } from "justd-icons"
+import { ColorField, defaultColor, useMediaQuery } from "ui"
 
 export function ColorGenerator() {
-  const [colorObj, setColorObj] = useState<string>(defaultColor.toString('hex'))
+  const [colorObj, setColorObj] = useState<string>(defaultColor.toString("hex"))
   const handleChange = (newColor: any) => {
-    setColorObj(newColor.toString('hex'))
+    setColorObj(newColor.toString("hex"))
   }
 
   const colorScales = generateColorScale(colorObj)
-  const isDesktop = useMediaQuery('(min-width: 1024px)')
+  const isDesktop = useMediaQuery("(min-width: 1024px)")
   return (
     <div className="mb-2">
       <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-2">
@@ -24,7 +24,7 @@ export function ColorGenerator() {
             className="relative"
             value={parseColor(colorObj)}
             onChange={handleChange}
-            placeholder={defaultColor.toString('hex')}
+            placeholder={defaultColor.toString("hex")}
             suffix={
               <span className="text-xs sm:border-0 sm:p-0 px-2 cursor-pointer py-1.5 border rounded-sm absolute right-[4px] sm:right-2.5 font-mono top-[0.3rem] sm:top-3">
                 <IconArrowWallRight className="hidden sm:inline" />
@@ -37,7 +37,7 @@ export function ColorGenerator() {
         <div className="lg:col-span-2">
           <ColorRow
             item={{
-              name: getColorName(defaultColor.toString('hex')),
+              name: getColorName(defaultColor.toString("hex")),
               children: colorScales as any
             }}
           />
diff --git a/app/(app)/colors/(colors)/color-item.tsx b/app/(app)/colors/(colors)/color-item.tsx
index c378cd44..4e296761 100644
--- a/app/(app)/colors/(colors)/color-item.tsx
+++ b/app/(app)/colors/(colors)/color-item.tsx
@@ -1,15 +1,15 @@
-import * as React from 'react'
+import * as React from "react"
 
-import { formatColorForTailwind, textColorBasedOnBg } from '@/resources/lib/colors'
-import { parseColor } from '@react-stately/color'
-import type { ColorFormat } from '@react-types/color'
-import { IconCheck, IconDuplicate } from 'justd-icons'
-import type { ListBoxItemProps } from 'react-aria-components'
-import { ListBoxItem } from 'react-aria-components'
-import type { ColorShade, FormatOnlyForTailwindVariableType } from 'resources/types'
-import { toast } from 'sonner'
-import { cn, isBrightColor } from 'ui'
-import { copyToClipboard } from 'usemods'
+import { formatColorForTailwind, textColorBasedOnBg } from "@/resources/lib/colors"
+import { parseColor } from "@react-stately/color"
+import type { ColorFormat } from "@react-types/color"
+import { IconCheck, IconDuplicate } from "justd-icons"
+import type { ListBoxItemProps } from "react-aria-components"
+import { ListBoxItem } from "react-aria-components"
+import type { ColorShade, FormatOnlyForTailwindVariableType } from "resources/types"
+import { toast } from "sonner"
+import { cn, isBrightColor } from "ui"
+import { copyToClipboard } from "usemods"
 
 interface ColorItemProps extends ListBoxItemProps {
   item: ColorShade
@@ -31,8 +31,8 @@ const ColorItem = ({ item, name, isForTailwindVariable, selectedFormat }: ColorI
     }, 2000)
     toast.success(`Copy ${toCopy} to clipboard.`, {
       classNames: {
-        toast: '[&:has([data-icon])_[data-content]]:ml-0',
-        icon: 'hidden'
+        toast: "[&:has([data-icon])_[data-content]]:ml-0",
+        icon: "hidden"
       }
     })
   }
@@ -40,10 +40,10 @@ const ColorItem = ({ item, name, isForTailwindVariable, selectedFormat }: ColorI
     <ListBoxItem
       textValue={name}
       className={cn(
-        'w-full h-14 sm:h-24 group focus:outline-none focus:rounded-sm cursor-pointer rounded relative',
+        "w-full h-14 sm:h-24 group focus:outline-none focus:rounded-sm cursor-pointer rounded relative",
         isBrightColor(item.color)
-          ? 'ring-1 ring-inset ring-black/10'
-          : 'dark:ring-1 dark:ring-inset dark:ring-white/10'
+          ? "ring-1 ring-inset ring-black/10"
+          : "dark:ring-1 dark:ring-inset dark:ring-white/10"
       )}
       onAction={() => handleCopy(parseColor(item.color as string)?.toString(selectedFormat))}
       style={{
@@ -53,8 +53,8 @@ const ColorItem = ({ item, name, isForTailwindVariable, selectedFormat }: ColorI
     >
       <span
         className={cn(
-          'group-hover:block hidden text-xs left-1/2 -translate-x-1/2 top-2 absolute font-mono',
-          copied && 'block'
+          "group-hover:block hidden text-xs left-1/2 -translate-x-1/2 top-2 absolute font-mono",
+          copied && "block"
         )}
       >
         {copied ? <IconCheck /> : <IconDuplicate />}
diff --git a/app/(app)/colors/(colors)/color-palette.tsx b/app/(app)/colors/(colors)/color-palette.tsx
index 1b2f438a..a35835b3 100644
--- a/app/(app)/colors/(colors)/color-palette.tsx
+++ b/app/(app)/colors/(colors)/color-palette.tsx
@@ -1,15 +1,15 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import { useEffect, useState } from 'react'
+import * as React from "react"
+import { useEffect, useState } from "react"
 
-import { ColorGenerator } from '@/app/(app)/colors/(colors)/color-generator'
-import _colors from '@/app/(app)/colors/(colors)/colors.json'
-import { useInView } from 'react-intersection-observer'
-import type { ColorItemProps } from 'resources/types'
-import { Container, gridStyles, Loader } from 'ui'
+import { ColorGenerator } from "@/app/(app)/colors/(colors)/color-generator"
+import _colors from "@/app/(app)/colors/(colors)/colors.json"
+import { useInView } from "react-intersection-observer"
+import type { ColorItemProps } from "resources/types"
+import { Container, gridStyles, Loader } from "ui"
 
-import { ColorRow } from './color-row'
+import { ColorRow } from "./color-row"
 
 const filteredColors = _colors.map(([name, colorShades]) => ({
   name,
diff --git a/app/(app)/colors/(colors)/color-row.tsx b/app/(app)/colors/(colors)/color-row.tsx
index c94a070f..c10f5805 100644
--- a/app/(app)/colors/(colors)/color-row.tsx
+++ b/app/(app)/colors/(colors)/color-row.tsx
@@ -1,20 +1,20 @@
-import * as React from 'react'
+import * as React from "react"
 
-import { CopyJsonColorShades } from '@/app/(app)/colors/(colors)/copy-json-color-shades'
+import { CopyJsonColorShades } from "@/app/(app)/colors/(colors)/copy-json-color-shades"
 import {
   allFormats,
   formatOnlyForTailwindVariableValues,
   getColorName,
   tailwindColorNames
-} from '@/resources/lib/colors'
-import type { ColorFormat } from '@react-types/color'
-import { IconBrandTailwindcss } from 'justd-icons'
-import { ListBox, Text, ToggleButton } from 'react-aria-components'
-import type { ColorItemProps, FormatOnlyForTailwindVariableType } from 'resources/types'
-import { toast } from 'sonner'
-import { buttonStyles, gridStyles, Select, Tooltip } from 'ui'
+} from "@/resources/lib/colors"
+import type { ColorFormat } from "@react-types/color"
+import { IconBrandTailwindcss } from "justd-icons"
+import { ListBox, Text, ToggleButton } from "react-aria-components"
+import type { ColorItemProps, FormatOnlyForTailwindVariableType } from "resources/types"
+import { toast } from "sonner"
+import { buttonStyles, gridStyles, Select, Tooltip } from "ui"
 
-import { ColorItem } from './color-item'
+import { ColorItem } from "./color-item"
 
 interface ColorRowProps extends React.HtmlHTMLAttributes<HTMLDivElement> {
   item: ColorItemProps
@@ -24,10 +24,10 @@ interface ColorRowProps extends React.HtmlHTMLAttributes<HTMLDivElement> {
 }
 
 export function ColorRow({ showItem = false, swatchClassName, item }: ColorRowProps) {
-  const [isForTailwindVariable, setIsForTailwindVariable] = React.useState(false)
+  const [isForTailwindVariable, setIsForTailwindVariable] = React.useState(true)
   const [selectedFormat, setSelectedFormat] = React.useState<
     ColorFormat | null | FormatOnlyForTailwindVariableType
-  >('hex')
+  >("hsl")
   return (
     <div className="p-2 bg-tertiary border rounded-lg overflow-hidden">
       <div className="flex mb-2 items-center gap-x-1 justify-between">
@@ -43,15 +43,15 @@ export function ColorRow({ showItem = false, swatchClassName, item }: ColorRowPr
               color={item.children[4].color}
               colorScales={item.children}
             />
-            {['rgb', 'rgba', 'hsl', 'hsla', 'hsb', 'hsba'].includes(
+            {["rgb", "rgba", "hsl", "hsla", "hsb", "hsba"].includes(
               selectedFormat as ColorFormat
             ) && (
               <Tooltip>
                 <ToggleButton
                   className={buttonStyles({
-                    appearance: 'outline',
-                    size: 'square-petite',
-                    className: 'size-8'
+                    appearance: "outline",
+                    size: "square-petite",
+                    className: "size-8"
                   })}
                   isSelected={isForTailwindVariable}
                   onChange={() => {
@@ -61,7 +61,7 @@ export function ColorRow({ showItem = false, swatchClassName, item }: ColorRowPr
                       )
                     ) {
                       toast(
-                        'You can only switch up the color format to RGB, RGBA, HSL, HSLA, HSB, or HSBA.'
+                        "You can only switch up the color format to RGB, RGBA, HSL, HSLA, HSB, or HSBA."
                       )
                       return
                     }
@@ -69,7 +69,7 @@ export function ColorRow({ showItem = false, swatchClassName, item }: ColorRowPr
                   }}
                 >
                   {({ isSelected }) => (
-                    <IconBrandTailwindcss className={isSelected ? '!text-sky-500' : '!text-fg'} />
+                    <IconBrandTailwindcss className={isSelected ? "!text-sky-500" : "!text-fg"} />
                   )}
                 </ToggleButton>
                 <Tooltip.Content className="max-w-xs">
@@ -117,7 +117,7 @@ export function ColorRow({ showItem = false, swatchClassName, item }: ColorRowPr
               showItem,
               swatchClassName,
               isForTailwindVariable,
-              selectedFormat: selectedFormat ?? 'hsl',
+              selectedFormat: selectedFormat ?? "hsl",
               item: color,
               name: item.name
             }}
diff --git a/app/(app)/colors/(colors)/copy-json-color-shades.tsx b/app/(app)/colors/(colors)/copy-json-color-shades.tsx
index 93f08ce2..d97bcc48 100644
--- a/app/(app)/colors/(colors)/copy-json-color-shades.tsx
+++ b/app/(app)/colors/(colors)/copy-json-color-shades.tsx
@@ -1,11 +1,11 @@
-import React, { useState } from 'react'
+import React, { useState } from "react"
 
-import { getColorName } from '@/resources/lib/colors'
-import { wait } from '@/resources/lib/utils'
-import { IconBrackets2, IconCheck, IconDuplicate } from 'justd-icons'
-import { Heading } from 'react-aria-components'
-import { Button, ColorSwatch, Modal } from 'ui'
-import { copyToClipboard } from 'usemods'
+import { getColorName } from "@/resources/lib/colors"
+import { wait } from "@/resources/lib/utils"
+import { IconBrackets2, IconCheck, IconDuplicate } from "justd-icons"
+import { Heading } from "react-aria-components"
+import { Button, ColorSwatch, Modal } from "ui"
+import { copyToClipboard } from "usemods"
 
 export function CopyJsonColorShades({
   colorScales,
@@ -17,7 +17,7 @@ export function CopyJsonColorShades({
   colorScales: any
 }) {
   const [open, setOpen] = useState(false)
-  const [colorName, setColorName] = useState<string>(name || 'unknown')
+  const [colorName, setColorName] = useState<string>(name || "unknown")
   const [isCopied, setIsCopied] = useState(false)
 
   const handleOpen = () => {
@@ -27,9 +27,9 @@ export function CopyJsonColorShades({
 
   const codeString = colorScales
     .map(({ shade, color }: any) => `'${shade}': '${color}'`)
-    .join(',\n  ')
+    .join(",\n  ")
   const renderColorScaleAsCode = (colorScales: any, colorName: string) => {
-    const formattedColorName = colorName.includes('-')
+    const formattedColorName = colorName.includes("-")
       ? `'${getColorName(colorScales[4].color)}'`
       : colorName
     return `${formattedColorName}: {\n  ${codeString}\n}`
@@ -48,7 +48,7 @@ export function CopyJsonColorShades({
       <Button className="size-8" size="square-petite" appearance="outline" onPress={handleOpen}>
         <IconBrackets2 />
       </Button>
-      <Modal.Content closeButton={false} size="2xl" classNames={{ content: 'p-0 [&>.dlc]:p-0' }}>
+      <Modal.Content closeButton={false} size="2xl" classNames={{ content: "p-0 [&>.dlc]:p-0" }}>
         <Heading className="sr-only">{name}</Heading>
         <div className="relative grid sm:grid-cols-2 divide-x">
           <div className="hidden sm:grid place-content-center font-mono text-sm relative">
diff --git a/app/(app)/colors/page.tsx b/app/(app)/colors/page.tsx
index be19a3c9..bc169bcb 100644
--- a/app/(app)/colors/page.tsx
+++ b/app/(app)/colors/page.tsx
@@ -1,22 +1,22 @@
-import React from 'react'
+import React from "react"
 
-import { ColorPalette } from '@/app/(app)/colors/(colors)/color-palette'
-import { Header } from '@/components/header'
-import { siteConfig } from '@/resources/config/site'
-import type { Metadata } from 'next'
+import { ColorPalette } from "@/app/(app)/colors/(colors)/color-palette"
+import { Header } from "@/components/header"
+import { siteConfig } from "@/resources/config/site"
+import type { Metadata } from "next"
 
 export const metadata: Metadata = {
-  title: 'Colors / ' + siteConfig.name,
+  title: "Colors / " + siteConfig.name,
   description:
-    'A stash of over 154 colors blending TailwindCSS vibes with HTML color names, served up in 8 slick formats.',
+    "A stash of over 154 colors blending TailwindCSS vibes with HTML color names, served up in 8 slick formats.",
   metadataBase: new URL(process.env.NEXT_PUBLIC_APP_URL ?? siteConfig.url),
   applicationName: siteConfig.name,
-  category: 'Colors',
+  category: "Colors",
   twitter: {
-    card: 'summary_large_image',
-    title: 'Colors / ' + siteConfig.name,
+    card: "summary_large_image",
+    title: "Colors / " + siteConfig.name,
     description:
-      'A stash of over 154 colors blending TailwindCSS vibes with HTML color names, served up in 8 slick formats.'
+      "A stash of over 154 colors blending TailwindCSS vibes with HTML color names, served up in 8 slick formats."
   }
 }
 
diff --git a/app/(app)/components/page.tsx b/app/(app)/components/page.tsx
index 088989e2..d13fbfed 100644
--- a/app/(app)/components/page.tsx
+++ b/app/(app)/components/page.tsx
@@ -1,16 +1,16 @@
-import React from 'react'
+import React from "react"
 
-import { CardListBox } from '@/app/(app)/components/partials/card-list-box'
-import { OnThisPage } from '@/app/(app)/components/partials/on-this-page'
-import { Header } from '@/components/header'
-import { siteConfig } from '@/resources/config/site'
-import type { Metadata } from 'next'
-import { Container } from 'ui'
+import { CardListBox } from "@/app/(app)/components/partials/card-list-box"
+import { OnThisPage } from "@/app/(app)/components/partials/on-this-page"
+import { Header } from "@/components/header"
+import { siteConfig } from "@/resources/config/site"
+import type { Metadata } from "next"
+import { Container } from "ui"
 
 export const metadata: Metadata = {
-  title: 'Components / ' + siteConfig.name,
+  title: "Components / " + siteConfig.name,
   description:
-    'Over 50 accessible components, neatly grouped into sections. Guaranteed usability for all!',
+    "Over 50 accessible components, neatly grouped into sections. Guaranteed usability for all!",
   metadataBase: new URL(process.env.NEXT_PUBLIC_APP_URL ?? siteConfig.url),
   applicationName: siteConfig.name
 }
diff --git a/app/(app)/components/partials/card-list-box.tsx b/app/(app)/components/partials/card-list-box.tsx
index 3ea8db2c..741898db 100644
--- a/app/(app)/components/partials/card-list-box.tsx
+++ b/app/(app)/components/partials/card-list-box.tsx
@@ -1,10 +1,10 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { docs } from '#site/content'
-import { goodTitle } from '@/resources/lib/utils'
-import { buttonStyles, Description, Grid, Heading, Link } from 'ui'
+import { docs } from "#site/content"
+import { goodTitle } from "@/resources/lib/utils"
+import { buttonStyles, Description, Grid, Heading, Link } from "ui"
 
 type GroupedComponents = {
   [category: string]: {
@@ -18,8 +18,8 @@ type GroupedComponents = {
 
 const groupByCategory = (data: any[]): GroupedComponents => {
   return data.reduce((acc: GroupedComponents, item) => {
-    const parts = item.slug.split('/')
-    if (parts[1] === 'components') {
+    const parts = item.slug.split("/")
+    if (parts[1] === "components") {
       const category = parts[2]
       if (!acc[category]) {
         acc[category] = []
diff --git a/app/(app)/components/partials/on-this-page.tsx b/app/(app)/components/partials/on-this-page.tsx
index 3539b2e1..db1c1023 100644
--- a/app/(app)/components/partials/on-this-page.tsx
+++ b/app/(app)/components/partials/on-this-page.tsx
@@ -1,12 +1,12 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { groupedComponents } from '@/app/(app)/components/partials/card-list-box'
-import { useActiveItem } from '@/components/table-of-contents'
-import { goodTitle } from '@/resources/lib/utils'
-import { ListBox, ListBoxItem } from 'react-aria-components'
-import { cn, Heading, useMediaQuery } from 'ui'
+import { groupedComponents } from "@/app/(app)/components/partials/card-list-box"
+import { useActiveItem } from "@/components/table-of-contents"
+import { goodTitle } from "@/resources/lib/utils"
+import { ListBox, ListBoxItem } from "react-aria-components"
+import { cn, Heading, useMediaQuery } from "ui"
 
 const navigations = Object.keys(groupedComponents).map((x) => {
   return {
@@ -17,8 +17,8 @@ const navigations = Object.keys(groupedComponents).map((x) => {
 })
 
 export function OnThisPage() {
-  const activeId = useActiveItem(navigations.map((x) => x.href.split('#')[1]))
-  const isDesktop = useMediaQuery('(min-width: 1024px)')
+  const activeId = useActiveItem(navigations.map((x) => x.href.split("#")[1]))
+  const isDesktop = useMediaQuery("(min-width: 1024px)")
   return (
     <>
       {isDesktop ? (
@@ -28,7 +28,7 @@ export function OnThisPage() {
           </Heading>
           <ListBox aria-label="On this page">
             {navigations.map(({ text, href, id }) => (
-              <AsideLink key={id} id={id} activeId={activeId || ''} text={text} href={href} />
+              <AsideLink key={id} id={id} activeId={activeId || ""} text={text} href={href} />
             ))}
           </ListBox>
         </div>
@@ -51,8 +51,8 @@ export function AsideLink({
   return (
     <ListBoxItem
       className={cn(
-        'focus:outline-none focus-visible:font-medium focus-visible:text-fg py-1.5 block hover:text-fg',
-        href.split('#')[1] === activeId ? 'text-fg font-medium' : 'text-muted-fg'
+        "focus:outline-none focus-visible:font-medium focus-visible:text-fg py-1.5 block hover:text-fg",
+        href.split("#")[1] === activeId ? "text-fg font-medium" : "text-muted-fg"
       )}
       href={href}
       id={id}
diff --git a/app/(app)/d/[slug]/page.tsx b/app/(app)/d/[slug]/page.tsx
index 56b97df9..02fc0f7e 100644
--- a/app/(app)/d/[slug]/page.tsx
+++ b/app/(app)/d/[slug]/page.tsx
@@ -1,12 +1,12 @@
-import { docs } from '#site/content'
-import { notFound, redirect } from 'next/navigation'
+import { docs } from "#site/content"
+import { notFound, redirect } from "next/navigation"
 
 interface PageProps {
   params: { slug: string }
 }
 
 export default function Page({ params }: PageProps) {
-  const originalUrl = docs.map((i) => i.slug).find((i) => i.split('/').pop() === params.slug)
+  const originalUrl = docs.map((i) => i.slug).find((i) => i.split("/").pop() === params.slug)
   if (!originalUrl) {
     notFound()
   }
diff --git a/app/(app)/docs/[...slug]/page.tsx b/app/(app)/docs/[...slug]/page.tsx
index af540fac..11d84a96 100644
--- a/app/(app)/docs/[...slug]/page.tsx
+++ b/app/(app)/docs/[...slug]/page.tsx
@@ -1,13 +1,13 @@
-import { docs } from '#site/content'
-import { DocRefs } from '@/components/doc-refs'
-import { MDXContent } from '@/components/mdx-components'
-import { Pager } from '@/components/pager'
-import { TableOfContents } from '@/components/table-of-contents'
-import { siteConfig } from '@/resources/config/site'
-import '@/resources/styles/code.css'
-import { type Metadata } from 'next'
-import { notFound } from 'next/navigation'
-import { Separator, Toast } from 'ui'
+import { docs } from "#site/content"
+import { DocRefs } from "@/components/doc-refs"
+import { MDXContent } from "@/components/mdx-components"
+import { Pager } from "@/components/pager"
+import { TableOfContents } from "@/components/table-of-contents"
+import { siteConfig } from "@/resources/config/site"
+import "@/resources/styles/code.css"
+import { type Metadata } from "next"
+import { notFound } from "next/navigation"
+import { Separator, Toast } from "ui"
 
 export interface DocPageProps {
   params: {
@@ -15,8 +15,8 @@ export interface DocPageProps {
   }
 }
 
-async function getPostFromParams(params: DocPageProps['params']) {
-  const slug = params?.slug?.join('/')
+async function getPostFromParams(params: DocPageProps["params"]) {
+  const slug = params?.slug?.join("/")
   const doc = docs.find((doc) => doc.slugAsParams === slug)
 
   return doc
@@ -30,15 +30,15 @@ export async function generateMetadata({ params }: DocPageProps): Promise<Metada
   }
 
   const ogSearchParams = new URLSearchParams()
-  ogSearchParams.set('title', doc.title)
+  ogSearchParams.set("title", doc.title)
 
   return {
     title: `${doc.title} / ${siteConfig.name}`,
     description: doc.description,
     applicationName: siteConfig.name,
-    category: 'Docs',
+    category: "Docs",
     twitter: {
-      card: 'summary_large_image',
+      card: "summary_large_image",
       title: `${doc.title} / ${siteConfig.name}`,
       description: doc.description
     },
@@ -47,36 +47,36 @@ export async function generateMetadata({ params }: DocPageProps): Promise<Metada
       `${doc.title} components`,
       `${doc.title} component`,
       `${doc.title} on React`,
-      'React',
-      'Next.js',
-      'Inertia.js',
-      'Tailwind CSS',
-      'UI Components',
-      'UI Kit',
-      'UI Library',
-      'UI Framework',
-      'Justd',
-      'React Aria',
-      'React Aria Components',
-      'Server Components',
-      'React Components',
-      'Next UI Components',
-      'UI Design System',
-      'UI for Laravel Inertia',
-      'Justd Components',
-      'Justd UI Components',
-      'Justd UI Kit',
-      'Justd UI Library',
-      'Justd UI Framework',
-      'Justd Laravel Inertia',
-      'Justd Laravel',
-      'Justd Inertia'
+      "React",
+      "Next.js",
+      "Inertia.js",
+      "Tailwind CSS",
+      "UI Components",
+      "UI Kit",
+      "UI Library",
+      "UI Framework",
+      "Justd",
+      "React Aria",
+      "React Aria Components",
+      "Server Components",
+      "React Components",
+      "Next UI Components",
+      "UI Design System",
+      "UI for Laravel Inertia",
+      "Justd Components",
+      "Justd UI Components",
+      "Justd UI Kit",
+      "Justd UI Library",
+      "Justd UI Framework",
+      "Justd Laravel Inertia",
+      "Justd Laravel",
+      "Justd Inertia"
     ]
   }
 }
 
-export async function generateStaticParams(): Promise<DocPageProps['params'][]> {
-  return docs.map((doc) => ({ slug: doc.slugAsParams.split('/') }))
+export async function generateStaticParams(): Promise<DocPageProps["params"][]> {
+  return docs.map((doc) => ({ slug: doc.slugAsParams.split("/") }))
 }
 
 export default async function PostPage({ params }: DocPageProps) {
@@ -88,7 +88,7 @@ export default async function PostPage({ params }: DocPageProps) {
 
   return (
     <>
-      {doc.title === 'Toast' && <Toast />}
+      {doc.title === "Toast" && <Toast />}
       <div className="min-w-0 max-w-2xl flex-auto pt-16 pb-32 lg:max-w-none px-4 lg:pl-8 lg:pr-0 xl:px-16">
         <main className="prose prose-pre:p-0 prose-headings:mb-[0.3rem] prose-headings:scroll-mt-24 prose-blue dark:prose-invert max-w-[inherit]">
           <h1 className="mb-2 font-semibold tracking-tight sm:tracking-tight text-2xl sm:text-3xl">
@@ -115,7 +115,7 @@ export default async function PostPage({ params }: DocPageProps) {
               order: doc.order
             }}
             docs={docs
-              .filter((doc) => doc.slug.startsWith('docs/components'))
+              .filter((doc) => doc.slug.startsWith("docs/components"))
               .map((doc) => ({ order: doc.order, slug: doc.slug, title: doc.title }))}
           />
         </main>
diff --git a/app/(app)/docs/layout.tsx b/app/(app)/docs/layout.tsx
index b309d357..e18daa7b 100644
--- a/app/(app)/docs/layout.tsx
+++ b/app/(app)/docs/layout.tsx
@@ -1,6 +1,6 @@
-import React, { type ReactNode } from 'react'
+import React, { type ReactNode } from "react"
 
-import { Aside } from '@/components/aside'
+import { Aside } from "@/components/aside"
 
 export default function Layout({ children }: { children: ReactNode }) {
   return (
diff --git a/app/(app)/docs/page.tsx b/app/(app)/docs/page.tsx
index 308c291e..83984a5f 100644
--- a/app/(app)/docs/page.tsx
+++ b/app/(app)/docs/page.tsx
@@ -1,5 +1,5 @@
-import { redirect } from 'next/navigation'
+import { redirect } from "next/navigation"
 
 export default function Page() {
-  redirect('/docs/getting-started/installation')
+  redirect("/docs/getting-started/installation")
 }
diff --git a/app/(app)/icons/page.tsx b/app/(app)/icons/page.tsx
index fb920856..ff2b89cb 100644
--- a/app/(app)/icons/page.tsx
+++ b/app/(app)/icons/page.tsx
@@ -1,17 +1,17 @@
-import React from 'react'
+import React from "react"
 
-import { Header } from '@/components/header'
-import { siteConfig } from '@/resources/config/site'
-import type { Metadata } from 'next'
-import { Container } from 'ui'
+import { Header } from "@/components/header"
+import { siteConfig } from "@/resources/config/site"
+import type { Metadata } from "next"
+import { Container } from "ui"
 
-import type { SearchParamsProps } from './partials/icons-list'
-import { IconsList } from './partials/icons-list'
+import type { SearchParamsProps } from "./partials/icons-list"
+import { IconsList } from "./partials/icons-list"
 
 export const metadata: Metadata = {
-  title: 'Justd Icons / ' + siteConfig.name,
+  title: "Justd Icons / " + siteConfig.name,
   description:
-    ' A library of beautifully crafted react icons, perfect for enhancing the visual appeal and user experience of your web applications. ',
+    " A library of beautifully crafted react icons, perfect for enhancing the visual appeal and user experience of your web applications. ",
   metadataBase: new URL(process.env.NEXT_PUBLIC_APP_URL ?? siteConfig.url),
   applicationName: siteConfig.name
 }
diff --git a/app/(app)/icons/partials/controller/index.tsx b/app/(app)/icons/partials/controller/index.tsx
index 359ddee2..e79e633e 100644
--- a/app/(app)/icons/partials/controller/index.tsx
+++ b/app/(app)/icons/partials/controller/index.tsx
@@ -1,27 +1,27 @@
-import React from 'react'
+import React from "react"
 
-import { useQueryString } from 'hooks/use-query-string'
-import { IconBullet, IconBulletFill } from 'justd-icons'
-import { usePathname, useRouter } from 'next/navigation'
-import { Button } from 'ui'
+import { useQueryString } from "hooks/use-query-string"
+import { IconBullet, IconBulletFill } from "justd-icons"
+import { usePathname, useRouter } from "next/navigation"
+import { Button } from "ui"
 
-import type { SearchParamsProps } from '../icons-list'
-import { Install } from './install'
-import { Search } from './search'
-import { SelectSize } from './select-size'
+import type { SearchParamsProps } from "../icons-list"
+import { Install } from "./install"
+import { Search } from "./search"
+import { SelectSize } from "./select-size"
 
 export function Controller({ searchParams }: SearchParamsProps) {
   const router = useRouter()
   const pathname = usePathname()
   const { t } = searchParams
-  const [isSelected, setSelected] = React.useState<'solid' | 'regular'>(
-    (t as 'solid' | 'regular') || 'regular'
+  const [isSelected, setSelected] = React.useState<"solid" | "regular">(
+    (t as "solid" | "regular") || "regular"
   )
 
   const { createQueryString } = useQueryString()
 
-  const onFilter = (type: 'solid' | 'regular') => {
-    router.push(pathname + '?' + createQueryString('t', type), {
+  const onFilter = (type: "solid" | "regular") => {
+    router.push(pathname + "?" + createQueryString("t", type), {
       scroll: false
     })
     setSelected(type)
@@ -35,13 +35,13 @@ export function Controller({ searchParams }: SearchParamsProps) {
           <div className="flex gap-2 items-center">
             <Search />
             <Button
-              aria-label={`Change filter to ${isSelected === 'solid' ? 'regular' : 'solid'}`}
+              aria-label={`Change filter to ${isSelected === "solid" ? "regular" : "solid"}`}
               appearance="outline"
               className="size-10"
               size="square-petite"
-              onPress={() => onFilter(isSelected === 'solid' ? 'regular' : 'solid')}
+              onPress={() => onFilter(isSelected === "solid" ? "regular" : "solid")}
             >
-              {isSelected === 'solid' ? <IconBulletFill /> : <IconBullet />}
+              {isSelected === "solid" ? <IconBulletFill /> : <IconBullet />}
             </Button>
             <SelectSize />
           </div>
diff --git a/app/(app)/icons/partials/controller/install.tsx b/app/(app)/icons/partials/controller/install.tsx
index f5d07532..491d6eac 100644
--- a/app/(app)/icons/partials/controller/install.tsx
+++ b/app/(app)/icons/partials/controller/install.tsx
@@ -1,21 +1,21 @@
-import React from 'react'
+import React from "react"
 
-import { IconCheck, IconDuplicate } from 'justd-icons'
-import { Button, Menu } from 'ui'
-import { copyToClipboard } from 'usemods'
+import { IconCheck, IconDuplicate } from "justd-icons"
+import { Button, Menu } from "ui"
+import { copyToClipboard } from "usemods"
 
-type Tool = 'Bun' | 'Yarn' | 'PNPM' | 'NPM'
+type Tool = "Bun" | "Yarn" | "PNPM" | "NPM"
 
 export function Install() {
   const [isCopied, setIsCopied] = React.useState(false)
-  const [command, setCommand] = React.useState('')
-  const commandArgs = 'justd-icons'
+  const [command, setCommand] = React.useState("")
+  const commandArgs = "justd-icons"
 
   const installMap: Record<Tool, string> = {
-    Bun: 'bun add',
-    Yarn: 'yarn add',
-    PNPM: 'pnpm add',
-    NPM: 'npm i'
+    Bun: "bun add",
+    Yarn: "yarn add",
+    PNPM: "pnpm add",
+    NPM: "npm i"
   }
 
   const handleCopy = (tool: Tool) => {
@@ -29,7 +29,7 @@ export function Install() {
 
   return (
     <div className="pl-3 bg-background font-mono text-sm tracking-tighter border flex items-center justify-between p-1 rounded-lg w-full sm:min-w-72 sm:max-w-72 [&_.xd]:mr-[-0.30rem] [&_.xd]:-mt-px h-10 xd">
-      {command || 'npm i justd-icons'}
+      {command || "npm i justd-icons"}
       <Menu>
         <Button
           size="square-petite"
@@ -40,10 +40,10 @@ export function Install() {
           {isCopied ? <IconCheck /> : <IconDuplicate />}
         </Button>
         <Menu.Content showArrow placement="bottom end">
-          <Menu.Item onAction={() => handleCopy('Bun')}>Bun</Menu.Item>
-          <Menu.Item onAction={() => handleCopy('Yarn')}>Yarn</Menu.Item>
-          <Menu.Item onAction={() => handleCopy('PNPM')}>PNPM</Menu.Item>
-          <Menu.Item onAction={() => handleCopy('NPM')}>NPM</Menu.Item>
+          <Menu.Item onAction={() => handleCopy("Bun")}>Bun</Menu.Item>
+          <Menu.Item onAction={() => handleCopy("Yarn")}>Yarn</Menu.Item>
+          <Menu.Item onAction={() => handleCopy("PNPM")}>PNPM</Menu.Item>
+          <Menu.Item onAction={() => handleCopy("NPM")}>NPM</Menu.Item>
         </Menu.Content>
       </Menu>
     </div>
diff --git a/app/(app)/icons/partials/controller/search.tsx b/app/(app)/icons/partials/controller/search.tsx
index 0f8928e9..093c020e 100644
--- a/app/(app)/icons/partials/controller/search.tsx
+++ b/app/(app)/icons/partials/controller/search.tsx
@@ -1,8 +1,8 @@
-import React from 'react'
+import React from "react"
 
-import { usePathname, useRouter, useSearchParams } from 'next/navigation'
-import { SearchField } from 'ui'
-import { useDebouncedCallback } from 'use-debounce'
+import { usePathname, useRouter, useSearchParams } from "next/navigation"
+import { SearchField } from "ui"
+import { useDebouncedCallback } from "use-debounce"
 
 export function Search() {
   const searchParams = useSearchParams()
@@ -13,9 +13,9 @@ export function Search() {
   const handleSearch = useDebouncedCallback((term) => {
     const params = new URLSearchParams(searchParams)
     if (term) {
-      params.set('query', term)
+      params.set("query", term)
     } else {
-      params.delete('query')
+      params.delete("query")
     }
 
     replace(`${pathname}?${params.toString()}`)
@@ -24,7 +24,7 @@ export function Search() {
   return (
     <SearchField
       onChange={handleSearch}
-      defaultValue={searchParams.get('query')?.toString()}
+      defaultValue={searchParams.get("query")?.toString()}
       aria-label="Search icons"
       placeholder="Search icons..."
     />
diff --git a/app/(app)/icons/partials/controller/select-size.tsx b/app/(app)/icons/partials/controller/select-size.tsx
index 7e8ccdc8..cf422ffa 100644
--- a/app/(app)/icons/partials/controller/select-size.tsx
+++ b/app/(app)/icons/partials/controller/select-size.tsx
@@ -1,16 +1,16 @@
-import React from 'react'
+import React from "react"
 
-import { useQueryString } from 'hooks/use-query-string'
-import { IconChevronLgDown } from 'justd-icons'
-import { usePathname, useRouter } from 'next/navigation'
-import type { Selection } from 'react-aria-components'
-import title from 'title'
-import { Button, Menu } from 'ui'
+import { useQueryString } from "hooks/use-query-string"
+import { IconChevronLgDown } from "justd-icons"
+import { usePathname, useRouter } from "next/navigation"
+import type { Selection } from "react-aria-components"
+import title from "title"
+import { Button, Menu } from "ui"
 
 const sizes = [
-  { id: 'size-4', name: 'Size 4' },
-  { id: 'size-5', name: 'Size 5' },
-  { id: 'size-6', name: 'Size 6' }
+  { id: "size-4", name: "Size 4" },
+  { id: "size-5", name: "Size 5" },
+  { id: "size-6", name: "Size 6" }
 ]
 
 export function SelectSize() {
@@ -18,9 +18,9 @@ export function SelectSize() {
   const pathname = usePathname()
   const { createQueryString } = useQueryString()
 
-  const [selectedSize, setSelectSize] = React.useState<Selection>(new Set(['size-5']))
+  const [selectedSize, setSelectSize] = React.useState<Selection>(new Set(["size-5"]))
   const onSelectionChange = (size: Selection) => {
-    router.push(pathname + '?' + createQueryString('s', [...size].join(',')), {
+    router.push(pathname + "?" + createQueryString("s", [...size].join(",")), {
       scroll: false
     })
     setSelectSize(size)
@@ -33,10 +33,10 @@ export function SelectSize() {
         appearance="outline"
       >
         <span className="sm:hidden inline">
-          {title([...selectedSize].join(', ').replace('size-', ' ')) || '5'}
+          {title([...selectedSize].join(", ").replace("size-", " ")) || "5"}
         </span>
         <span className="sm:inline hidden">
-          {title([...selectedSize].join(', ').replace('-', ' ')) || 'Size 5'}
+          {title([...selectedSize].join(", ").replace("-", " ")) || "Size 5"}
         </span>
         <IconChevronLgDown />
       </Button>
@@ -49,8 +49,8 @@ export function SelectSize() {
       >
         {(item) => (
           <Menu.Radio textValue={item.name}>
-            {item.name} /{' '}
-            {item.name === 'Size 4' ? '20px' : item.name === 'Size 5' ? '24px' : '28px'}
+            {item.name} /{" "}
+            {item.name === "Size 4" ? "20px" : item.name === "Size 5" ? "24px" : "28px"}
           </Menu.Radio>
         )}
       </Menu.Content>
diff --git a/app/(app)/icons/partials/icons-list.tsx b/app/(app)/icons/partials/icons-list.tsx
index 3f433ae4..88598ea2 100644
--- a/app/(app)/icons/partials/icons-list.tsx
+++ b/app/(app)/icons/partials/icons-list.tsx
@@ -1,35 +1,35 @@
-'use client'
+"use client"
 
-import React, { Suspense, useRef } from 'react'
+import React, { Suspense, useRef } from "react"
 
-import * as icons from 'justd-icons'
-import { IconDownload } from 'justd-icons'
-import { useSearchParams } from 'next/navigation'
-import { ListBox, ListBoxItem } from 'react-aria-components'
-import * as ReactDOMServer from 'react-dom/server'
-import { toast } from 'sonner'
-import { Loader, Menu } from 'ui'
-import { copyToClipboard } from 'usemods'
+import * as icons from "justd-icons"
+import { IconDownload } from "justd-icons"
+import { useSearchParams } from "next/navigation"
+import { ListBox, ListBoxItem } from "react-aria-components"
+import * as ReactDOMServer from "react-dom/server"
+import { toast } from "sonner"
+import { Loader, Menu } from "ui"
+import { copyToClipboard } from "usemods"
 
-import { Controller } from './controller'
-import { box, item } from './styles'
+import { Controller } from "./controller"
+import { box, item } from "./styles"
 
 export interface SearchParamsProps {
   searchParams: {
     query: string
-    t: 'solid' | 'regular'
+    t: "solid" | "regular"
   }
 }
 
 export function IconsList({ searchParams }: SearchParamsProps) {
   const { query, t } = searchParams
-  const filterType = t ?? 'regular'
+  const filterType = t ?? "regular"
 
   const filteredIcons = Object.entries(icons).filter(([name]) => {
     const matchesSearch = query ? name.toLowerCase().includes(query.toLowerCase()) : true
-    const isSolid = name.toLowerCase().endsWith('fill')
+    const isSolid = name.toLowerCase().endsWith("fill")
     const matchesFilter =
-      (filterType === 'solid' && isSolid) || (filterType === 'regular' && !isSolid)
+      (filterType === "solid" && isSolid) || (filterType === "regular" && !isSolid)
     return matchesSearch && matchesFilter
   })
 
@@ -64,9 +64,9 @@ interface IconListItemProps {
 export function IconListItem({ name, Icon }: IconListItemProps) {
   const [isSelected, setSelected] = React.useState(false)
   const searchParams = useSearchParams()
-  const selectedSize = searchParams.get('s') ?? 'size-5'
-  const handleCopy = (type: 'text' | 'jsx') => {
-    const textToCopy = type === 'jsx' ? `<${name} />` : name
+  const selectedSize = searchParams.get("s") ?? "size-5"
+  const handleCopy = (type: "text" | "jsx") => {
+    const textToCopy = type === "jsx" ? `<${name} />` : name
     copyToClipboard(textToCopy).then(() => {
       toast(
         <>
@@ -90,9 +90,9 @@ export function IconListItem({ name, Icon }: IconListItemProps) {
       <Icon className={selectedSize} key={name} />
       <Menu isOpen={isSelected} onOpenChange={setSelected}>
         <Menu.Content triggerRef={triggerRef} showArrow>
-          <Menu.Item onAction={() => handleCopy('jsx')}>Copy JSX</Menu.Item>
+          <Menu.Item onAction={() => handleCopy("jsx")}>Copy JSX</Menu.Item>
           <Menu.Item onAction={() => copySvgToClipboard(Icon)}>Copy SVG</Menu.Item>
-          <Menu.Item onAction={() => handleCopy('text')}>Copy Name</Menu.Item>
+          <Menu.Item onAction={() => handleCopy("text")}>Copy Name</Menu.Item>
           <Menu.Separator />
           <Menu.Item onAction={() => downloadSvg(Icon, name)}>
             Download SVG
@@ -107,16 +107,16 @@ export function IconListItem({ name, Icon }: IconListItemProps) {
 const copySvgToClipboard = (IconComponent: React.ComponentType) => {
   const svgString = ReactDOMServer.renderToStaticMarkup(<IconComponent />)
   navigator.clipboard.writeText(svgString).then(() => {
-    toast('SVG copied to clipboard')
+    toast("SVG copied to clipboard")
   })
 }
 
 const downloadSvg = (IconComponent: React.ComponentType, fileName: string) => {
   const svgString = ReactDOMServer.renderToStaticMarkup(<IconComponent />)
-  const blob = new Blob([svgString], { type: 'image/svg+xml' })
+  const blob = new Blob([svgString], { type: "image/svg+xml" })
   const url = URL.createObjectURL(blob)
 
-  const link = document.createElement('a')
+  const link = document.createElement("a")
   link.href = url
   link.download = `${fileName}.svg`
   document.body.appendChild(link)
diff --git a/app/(app)/icons/partials/styles.ts b/app/(app)/icons/partials/styles.ts
index 3e4b1db7..494a39e6 100644
--- a/app/(app)/icons/partials/styles.ts
+++ b/app/(app)/icons/partials/styles.ts
@@ -1,15 +1,15 @@
-import { tv } from 'tailwind-variants'
+import { tv } from "tailwind-variants"
 
 const styles = tv({
   slots: {
-    box: 'flex justify-around flex-wrap gap-4',
+    box: "flex justify-around flex-wrap gap-4",
     item: [
-      'size-8 sm:size-12 grid cursor-pointer text-fg/80 place-content-center rounded-md',
-      'focus:bg-primary focus:text-primary-fg focus:outline-none',
-      'selected:bg-primary selected:text-primary-fg',
-      '[&[data-open=true]]:bg-primary [&[data-open=true]]:text-primary-fg',
-      'hover:bg-secondary hover:text-secondary-fg',
-      'focus-visible:ring-4 focus-visible:ring-primary-fg/15'
+      "size-8 sm:size-12 grid cursor-pointer text-fg/80 place-content-center rounded-md",
+      "focus:bg-primary focus:text-primary-fg focus:outline-none",
+      "selected:bg-primary selected:text-primary-fg",
+      "[&[data-open=true]]:bg-primary [&[data-open=true]]:text-primary-fg",
+      "hover:bg-secondary hover:text-secondary-fg",
+      "focus-visible:ring-4 focus-visible:ring-primary-fg/15"
     ]
   }
 })
diff --git a/app/(app)/sink/layout.tsx b/app/(app)/sink/layout.tsx
index ca13f426..d1588dd0 100644
--- a/app/(app)/sink/layout.tsx
+++ b/app/(app)/sink/layout.tsx
@@ -1,4 +1,4 @@
-import { Container } from 'ui'
+import { Container } from "ui"
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return <Container className="py-16">{children}</Container>
diff --git a/app/(app)/sink/page.tsx b/app/(app)/sink/page.tsx
index e2a77da3..e51cfef4 100644
--- a/app/(app)/sink/page.tsx
+++ b/app/(app)/sink/page.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
 export default function Page() {
   return <div />
diff --git a/app/(app)/themes/blocks.tsx b/app/(app)/themes/blocks.tsx
index e6ea0542..f0fbb204 100644
--- a/app/(app)/themes/blocks.tsx
+++ b/app/(app)/themes/blocks.tsx
@@ -1,13 +1,13 @@
-'use client'
+"use client"
 
-import { Buttons } from '@/app/(app)/themes/blocks/buttons'
-import { RangeCalendarBlocks } from '@/app/(app)/themes/blocks/range-calendar-blocks'
+import { Buttons } from "@/app/(app)/themes/blocks/buttons"
+import { RangeCalendarBlocks } from "@/app/(app)/themes/blocks/range-calendar-blocks"
 
-import { LoginForm } from './blocks/login-form'
+import { LoginForm } from "./blocks/login-form"
 
 export function Blocks() {
   return (
-    <div className="grid grid-cols-3 gap-2">
+    <div className="grid sm:grid-cols-2 grid-cols-1 lg:grid-cols-3 gap-2">
       <LoginForm />
       <RangeCalendarBlocks />
       <Buttons />
diff --git a/app/(app)/themes/blocks/buttons.tsx b/app/(app)/themes/blocks/buttons.tsx
index d8f270e0..b7aca2a8 100644
--- a/app/(app)/themes/blocks/buttons.tsx
+++ b/app/(app)/themes/blocks/buttons.tsx
@@ -1,11 +1,11 @@
-'use client'
+"use client"
 
-import { Button, Card, Checkbox, Switch } from 'ui'
+import { Button, Card, Checkbox, Switch } from "ui"
 
 export function Buttons() {
   return (
     <div className="gap-2 grid">
-      <Card className="grid place-content-center gap-2">
+      <Card className="grid py-4 place-content-center [&>div]:px-4 gap-2">
         <div className="grid grid-cols-2 gap-2">
           <Button>Label</Button>
           <Button intent="secondary">Label</Button>
@@ -15,15 +15,11 @@ export function Buttons() {
           <Button appearance="plain">Label</Button>
         </div>
       </Card>
-      <Card className="grid place-content-center">
-        <Checkbox isReadOnly defaultSelected>
-          Remember me
-        </Checkbox>
+      <Card className="grid place-content-center p-4">
+        <Checkbox defaultSelected>Remember me</Checkbox>
       </Card>
-      <Card className="grid place-content-center">
-        <Switch isReadOnly defaultSelected>
-          Toggle Theme
-        </Switch>
+      <Card className="grid place-content-center p-4">
+        <Switch defaultSelected>Toggle Theme</Switch>
       </Card>
     </div>
   )
diff --git a/app/(app)/themes/blocks/login-form.tsx b/app/(app)/themes/blocks/login-form.tsx
index 85c41771..2d96632e 100644
--- a/app/(app)/themes/blocks/login-form.tsx
+++ b/app/(app)/themes/blocks/login-form.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Button, Card, Checkbox, Link, TextField } from 'ui'
+import { Button, Card, Checkbox, Link, TextField } from "ui"
 
 export function LoginForm() {
   return (
diff --git a/app/(app)/themes/blocks/range-calendar-blocks.tsx b/app/(app)/themes/blocks/range-calendar-blocks.tsx
index f0963f9e..c0dee5ac 100644
--- a/app/(app)/themes/blocks/range-calendar-blocks.tsx
+++ b/app/(app)/themes/blocks/range-calendar-blocks.tsx
@@ -1,10 +1,9 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { getLocalTimeZone, parseDate, today } from '@internationalized/date'
-import { useDateFormatter } from '@react-aria/i18n'
-import { Button, Calendar, Card, Checkbox, Link, RangeCalendar, TextField } from 'ui'
+import { getLocalTimeZone, today } from "@internationalized/date"
+import { Card, RangeCalendar } from "ui"
 
 export function RangeCalendarBlocks() {
   const now = today(getLocalTimeZone())
@@ -15,7 +14,7 @@ export function RangeCalendarBlocks() {
     end: tomorrowWeek
   })
   return (
-    <Card className="grid place-content-center">
+    <Card className="grid place-content-center p-6">
       <RangeCalendar value={value} onChange={setValue} aria-label="Event date" />
     </Card>
   )
diff --git a/app/(app)/themes/controller.tsx b/app/(app)/themes/controller.tsx
new file mode 100644
index 00000000..2d86916c
--- /dev/null
+++ b/app/(app)/themes/controller.tsx
@@ -0,0 +1,96 @@
+import React from "react"
+
+import { Key } from "react-aria-components"
+import { toast } from "sonner"
+import { Button, Select, Sheet } from "ui"
+import { copyToClipboard } from "usemods"
+
+import type { ThemeProps } from "./themes-list"
+import { themesList } from "./themes-list"
+
+const availableThemes = [
+  { id: "default", textValue: "Default" },
+  { id: "zinc", textValue: "Zinc" },
+  { id: "slate", textValue: "Slate" },
+  { id: "regent", textValue: "Regent" }
+]
+
+interface Props {
+  themeId: ThemeProps
+  applyTheme: (theme: ThemeProps) => void
+}
+
+export function Controller({ themeId, applyTheme }: Props) {
+  const [selectedTheme, setSelectedTheme] = React.useState<Key>(themeId)
+  const [open, setOpen] = React.useState(false)
+  return (
+    <div className="flex justify-end mb-6">
+      <div className="flex items-center gap-2">
+        <Button onPress={() => setOpen(true)}>Export</Button>
+        <Sheet onOpenChange={setOpen} isOpen={open}>
+          <Sheet.Content classNames={{ content: "sm:w-1/2 sm:max-w-lg" }}>
+            <Sheet.Header
+              className="[&>[slot=title]]:capitalize"
+              title={`${themeId} theme`}
+              description="Slap this code into your CSS file. It's a bunch of variables that you can use to customize your theme."
+            />
+            <Sheet.Body>
+              <pre
+                className="font-mono text-sm p-4 overflow-x-auto bg-secondary border border-fg/10 rounded-lg"
+                lang="json"
+              >
+                {JSON.stringify(themesList[themeId], null, 2)}
+              </pre>
+            </Sheet.Body>
+            <Sheet.Footer>
+              <Sheet.Close>Close</Sheet.Close>
+              <Button
+                onPress={() => {
+                  copyToClipboard(JSON.stringify(themesList[themeId], null, 2)).then(() => {
+                    toast.success("Copied to clipboard", {
+                      classNames: {
+                        toast: "[&:has([data-icon])_[data-content]]:!ml-0",
+                        icon: "hidden"
+                      }
+                    })
+                    setOpen(false)
+                  })
+                }}
+              >
+                Copy
+              </Button>
+            </Sheet.Footer>
+          </Sheet.Content>
+        </Sheet>
+        <Select
+          className="min-w-56"
+          selectedKey={themeId}
+          onSelectionChange={(value) => {
+            setSelectedTheme(value)
+            console.log(value)
+            applyTheme(value as ThemeProps)
+          }}
+        >
+          <Select.Trigger />
+          <Select.List items={availableThemes}>
+            {(item) => {
+              const theme = themesList[item.id as ThemeProps]
+              const primaryColor = theme.root["--primary"]
+              return (
+                <Select.Option {...item}>
+                  <div
+                    className="size-4 mr-0 rounded ring-1 ring-inset ring-fg/20"
+                    style={{
+                      backgroundColor: `hsl(${primaryColor})`
+                    }}
+                  />
+                  {item.textValue}
+                </Select.Option>
+              )
+            }}
+          </Select.List>
+        </Select>
+      </div>
+    </div>
+  )
+}
diff --git a/app/(app)/themes/controller/index.tsx b/app/(app)/themes/controller/index.tsx
deleted file mode 100644
index fed8f22c..00000000
--- a/app/(app)/themes/controller/index.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export function Controller() {
-  return <div></div>
-}
diff --git a/app/(app)/themes/page.tsx b/app/(app)/themes/page.tsx
index 0ac39e77..59fef789 100644
--- a/app/(app)/themes/page.tsx
+++ b/app/(app)/themes/page.tsx
@@ -1,12 +1,12 @@
-import { Themes } from '@/app/(app)/themes/themes'
-import { Header } from '@/components/header'
-import { siteConfig } from '@/resources/config/site'
-import type { Metadata } from 'next'
+import { Themes } from "@/app/(app)/themes/themes"
+import { Header } from "@/components/header"
+import { siteConfig } from "@/resources/config/site"
+import type { Metadata } from "next"
 
 export const metadata: Metadata = {
-  title: 'Themes / ' + siteConfig.name,
+  title: "Themes / " + siteConfig.name,
   description:
-    'Curated themes, carefully selected just for you, ready to be copied, pasted, and seamlessly integrated into your apps, giving your projects a polished and custom vibe without the hassle.',
+    "Curated themes, carefully selected just for you, ready to be copied, pasted, and seamlessly integrated into your apps, giving your projects a polished and custom vibe without the hassle.",
   metadataBase: new URL(process.env.NEXT_PUBLIC_APP_URL ?? siteConfig.url),
   applicationName: siteConfig.name
 }
@@ -18,7 +18,7 @@ export default function Page() {
         <span className="text-muted-fg">es</span>
       </Header>
 
-      <Themes />
+      {/*<Themes />*/}
     </div>
   )
 }
diff --git a/app/(app)/themes/themes-list.ts b/app/(app)/themes/themes-list.ts
index 16abc9c1..428cfc2d 100644
--- a/app/(app)/themes/themes-list.ts
+++ b/app/(app)/themes/themes-list.ts
@@ -1,4 +1,4 @@
-type ThemeProps = 'default' | 'zinc' | 'slate'
+type ThemeProps = 'default' | 'zinc' | 'regent' | 'slate'
 type ThemeVariables = {
   [key: string]: string
 }
@@ -11,7 +11,7 @@ const themesList: Record<ThemeProps, { root: ThemeVariables; dark: ThemeVariable
       '--fg': '240 10% 3.9%',
       '--overlay': '0 0% 100%',
       '--overlay-fg': '240 10% 3.9%',
-      '--primary': '216 98% 52%',
+      '--primary': '216.74 100% 50%',
       '--primary-fg': '0 0% 100%',
       '--secondary': '240 4.8% 95.9%',
       '--secondary-fg': '240 5.9% 10%',
@@ -38,6 +38,8 @@ const themesList: Record<ThemeProps, { root: ThemeVariables; dark: ThemeVariable
       '--fg': '0 0% 98%',
       '--overlay': '240 6% 6%',
       '--overlay-fg': '0 0% 98%',
+      '--primary': '216 98% 52%',
+      '--primary-fg': '0 0% 100%',
       '--secondary': '240 3.7% 15.9%',
       '--secondary-fg': '0 0% 98%',
       '--info': '84.91 100% 66.47%',
@@ -77,11 +79,15 @@ const themesList: Record<ThemeProps, { root: ThemeVariables; dark: ThemeVariable
     },
     dark: {
       '--background': '0 0% 0%',
-      '--fg': '0 0% 98%',
+      '--fg': '0 0% 98.04%',
       '--overlay': '240 6% 6%',
       '--overlay-fg': '0 0% 98%',
+      '--primary': '0 0% 98.04%',
+      '--primary-fg': '240 10% 3.92%',
       '--secondary': '240 3.7% 15.9%',
       '--secondary-fg': '0 0% 98%',
+      '--info': '84.91 100% 66.47%',
+      '--info-fg': '120 100% 13.14%',
       '--tertiary': '240 10% 5.5%',
       '--tertiary-fg': '240 5% 96%',
       '--ring': 'var(--primary)',
@@ -94,26 +100,90 @@ const themesList: Record<ThemeProps, { root: ThemeVariables; dark: ThemeVariable
   },
   slate: {
     root: {
-      '--light': '228.57 84% 4.9%',
-      '--dark': '210 40% 98.04%',
+      '--light': '210 40% 98.04%',
+      '--dark': '228.57 84% 4.9%',
       '--background': '0 0% 100%',
       '--fg': '228.57 84% 4.9%',
       '--overlay': '210 40% 98.04%',
-      '--overlay-fg': '228.57 84% 4.9%',
+      '--overlay-fg': '222.22 47.37% 11.18%',
+      '--primary': '228.57 84% 4.9%',
+      '--primary-fg': '210 40% 96.08%',
       '--secondary': '210 40% 96.08%',
-      '--secondary-fg': '228.57 84% 4.9%',
-      '--border': '215.38 16.32% 46.86%',
-      '--input': '212.73 26.83% 83.92%'
+      '--secondary-fg': '222.22 47.37% 11.18%',
+      '--tertiary': '210 40% 96.08%',
+      '--tertiary-fg': '222.22 47.37% 11.18%',
+      '--success': '152 69% 31%',
+      '--success-fg': '0 0% 100%',
+      '--muted': '222.22 47.37% 11.18%',
+      '--muted-fg': '215.38 16.32% 46.86%',
+      '--border': '214.29 31.82% 91.37%',
+      '--input': '212.73 26.83% 88%',
+      '--ring': 'var(--primary)',
+      '--toggle': '212.73 26.83% 83.92%'
     },
     dark: {
-      '--background': '228.57 84% 4.9%',
+      '--background': '228.57 84% 3%',
       '--fg': '210 40% 98.04%',
-      '--overlay': '222.22 47.37% 11.18%',
-      '--overlay-fg': '210 40% 96.08%',
+      '--overlay': '228.57 84% 4.5%',
+      '--overlay-fg': '210 40% 98.04%',
+      '--primary': '210 40% 96.08%',
+      '--primary-fg': '222.22 47.37% 11.18%',
       '--secondary': '222.22 47.37% 11.18%',
       '--secondary-fg': '210 40% 96.08%',
-      '--border': '215 20.22% 65.1%',
-      '--input': '215.29 25% 26.67%'
+      '--info': '84.91 100% 66.47%',
+      '--info-fg': '120 100% 13.14%',
+      '--tertiary': '228.57 84% 4.5%',
+      '--tertiary-fg': '210 40% 96.08%',
+      '--ring': 'var(--primary)',
+      '--muted': '217.24 32.58% 17.45%',
+      '--muted-fg': '215 20.22% 65.1%',
+      '--toggle': '215.29 25% 23%',
+      '--border': '222.22 47.37% 13%',
+      '--input': '217.24 32.58% 17.45%'
+    }
+  },
+  regent: {
+    root: {
+      '--light': '210 15% 92.16%',
+      '--dark': '210 13.64% 8.63%',
+      '--background': '0 0% 100%',
+      '--fg': '210 13.64% 8.63%',
+      '--overlay': '210 15% 99%',
+      '--overlay-fg': '210 13.64% 8.63%',
+      '--primary': '210 13.64% 8.63%',
+      '--primary-fg': '210 15% 92.16%',
+      '--secondary': '210 15% 97%',
+      '--secondary-fg': '210 13.33% 17.65%',
+      '--tertiary': '210 15% 92.16%',
+      '--tertiary-fg': '210 13.33% 17.65%',
+      '--success': '152 69% 31%',
+      '--success-fg': '0 0% 100%',
+      '--muted': '208.24 12.59% 26.47%',
+      '--muted-fg': '210 14.29% 53.33%',
+      '--border': '211.76 14.29% 90%',
+      '--input': '211.76 14.29% 85%',
+      '--ring': 'var(--primary)',
+      '--toggle': '211.76 14.29% 80%'
+    },
+    dark: {
+      '--background': '210 13.64% 4%',
+      '--fg': '210 15% 92.16%',
+      '--overlay': '240 6% 6%',
+      '--overlay-fg': '0 0% 98%',
+      '--primary': '210 40% 96.08%',
+      '--primary-fg': '222.22 47.37% 11.18%',
+      '--secondary': '210 13.33% 10%',
+      '--secondary-fg': '210 15% 84.31%',
+      '--info': '84.91 100% 66.47%',
+      '--info-fg': '120 100% 13.14%',
+      '--tertiary': '210 13.64% 6%',
+      '--tertiary-fg': '210 15% 84.31%',
+      '--ring': 'var(--primary)',
+      '--muted': '217.24 32.58% 17.45%',
+      '--muted-fg': '215 20.22% 65.1%',
+      '--toggle': '208.24 12.59% 26.47%',
+      '--border': '210 13.33% 13%',
+      '--input': '210 13.33% 17.65%'
     }
   }
 }
diff --git a/app/(app)/themes/themes.tsx b/app/(app)/themes/themes.tsx
index ebf4d996..1ccafff6 100644
--- a/app/(app)/themes/themes.tsx
+++ b/app/(app)/themes/themes.tsx
@@ -1,55 +1,67 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { Button, Container } from 'ui'
+import { Controller } from "@/app/(app)/themes/controller"
+import { useTheme } from "next-themes"
+import { Container } from "ui"
 
-import { Blocks } from './blocks'
-import type { ThemeProps } from './themes-list'
-import { themesList } from './themes-list'
+import { Blocks } from "./blocks"
+import type { ThemeProps } from "./themes-list"
+import { themesList } from "./themes-list"
 
 export function Themes() {
+  const { resolvedTheme } = useTheme()
+  const [themeId, setThemeId] = React.useState<ThemeProps>("default")
   const themeContainerRef = React.useRef<HTMLDivElement>(null)
+
+  // Apply theme for current page
   const applyTheme = (theme: ThemeProps) => {
     const themeVars = themesList[theme].root
     const darkThemeVars = themesList[theme].dark
-
+    localStorage.setItem("theme-id", theme)
+    setThemeId(theme)
     const themeElement = themeContainerRef.current
     if (themeElement) {
-      Object.keys(themeVars).forEach((key) => {
-        themeElement.style.setProperty(key, themeVars[key])
+      const themeVarsToApply = resolvedTheme === "dark" ? darkThemeVars : themeVars
+      Object.keys(themeVarsToApply).forEach((key) => {
+        themeElement.style.setProperty(key, themeVarsToApply[key])
       })
-
-      if (document.documentElement.classList.contains('dark')) {
-        Object.keys(darkThemeVars).forEach((key) => {
-          themeElement.style.setProperty(key, darkThemeVars[key])
-        })
-      }
     }
-    localStorage.setItem('theme-id', theme)
   }
+
+  // Apply theme for whole page
+  // function applyTheme(theme: ThemeProps) {
+  //   const themeVars = themesList[theme].root
+  //   const darkThemeVars = themesList[theme].dark
+  //   localStorage.setItem('theme-id', theme)
+  //   setThemeId(theme)
+  //   const themeElement = document.documentElement
+  //   if (themeElement) {
+  //     const themeVarsToApply = resolvedTheme === 'dark' ? darkThemeVars : themeVars
+  //     Object.keys(themeVarsToApply).forEach((key) => {
+  //       themeElement.style.setProperty(key, themeVarsToApply[key])
+  //     })
+  //   }
+  // }
+
   React.useEffect(() => {
-    const savedTheme = localStorage.getItem('theme-id') as ThemeProps
-    if (savedTheme) {
-      applyTheme(savedTheme)
-    }
-  }, [])
+    const savedTheme = localStorage.getItem("theme-id") as ThemeProps
+    applyTheme(savedTheme)
+  }, [resolvedTheme, themeId])
   return (
-    <div ref={themeContainerRef}>
-      <Container className="sm:py-16 bg-background py-8">
-        <div className="flex border rounded-lg p-2 mb-2 items-center gap-2">
-          <Button appearance="outline" onPress={() => applyTheme('default')}>
-            Default
-          </Button>
-          <Button appearance="outline" onPress={() => applyTheme('zinc')}>
-            Zinc
-          </Button>
-          <Button appearance="outline" onPress={() => applyTheme('slate')}>
-            Slate
-          </Button>
-        </div>
-        <Blocks />
+    <div>
+      <Container className="sm:pt-16 pt-8">
+        <Controller themeId={themeId} applyTheme={applyTheme} />
       </Container>
+      <div
+        className="bg-background border-y border-dashed py-12 mb-6 border-secondary-fg/10 text-fg"
+        ref={themeContainerRef}
+      >
+        <Container>
+          <Blocks />
+        </Container>
+      </div>
     </div>
   )
 }
diff --git a/app/layout.tsx b/app/layout.tsx
index df093027..c31cb74e 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,16 +1,16 @@
-import React from 'react'
+import React from "react"
 
-import { Footer } from '@/components/footer'
-import { Navbar } from '@/components/navbar'
-import { Providers } from '@/components/providers'
-import { siteConfig } from '@/resources/config/site'
-import { cn } from '@/resources/lib/utils'
-import '@/resources/styles/app.css'
-import { OpenpanelProvider } from '@openpanel/nextjs'
-import type { Metadata, Viewport } from 'next'
-import { ViewTransitions } from 'next-view-transitions'
-import localFont from 'next/font/local'
-import { Toast } from 'ui'
+import { Footer } from "@/components/footer"
+import { Navbar } from "@/components/navbar"
+import { Providers } from "@/components/providers"
+import { siteConfig } from "@/resources/config/site"
+import { cn } from "@/resources/lib/utils"
+import "@/resources/styles/app.css"
+import { OpenpanelProvider } from "@openpanel/nextjs"
+import type { Metadata, Viewport } from "next"
+import { ViewTransitions } from "next-view-transitions"
+import localFont from "next/font/local"
+import { Toast } from "ui"
 
 export const metadata: Metadata = {
   metadataBase: new URL(process.env.NEXT_PUBLIC_APP_URL ?? siteConfig.url),
@@ -20,71 +20,71 @@ export const metadata: Metadata = {
   },
   description: siteConfig.description,
   alternates: {
-    canonical: './'
+    canonical: "./"
   },
   keywords: [
-    'React',
-    'Next.js',
-    'Inertia.js',
-    'Tailwind CSS',
-    'UI Components',
-    'UI Kit',
-    'UI Library',
-    'UI Framework',
-    'Justd',
-    'Just D.',
-    'React Aria',
-    'React Aria Components',
-    'Server Components',
-    'React Components',
-    'Next UI Components',
-    'UI Design System',
-    'UI for Laravel Inertia',
-    'Laravel Inertia UI',
-    'Laravel Inertia Components',
-    'Laravel Inertia UI Components',
-    'Laravel Inertia UI Kit',
-    'Laravel Inertia UI Library',
-    'Laravel Inertia UI Framework',
-    'Laravel Inertia Justd',
-    'Laravel Justd',
-    'Justd Components',
-    'Justd UI Components',
-    'Justd UI Kit',
-    'Justd UI Library',
-    'Justd UI Framework',
-    'Justd Laravel Inertia',
-    'Justd Laravel',
-    'Justd Inertia'
+    "React",
+    "Next.js",
+    "Inertia.js",
+    "Tailwind CSS",
+    "UI Components",
+    "UI Kit",
+    "UI Library",
+    "UI Framework",
+    "Justd",
+    "Just D.",
+    "React Aria",
+    "React Aria Components",
+    "Server Components",
+    "React Components",
+    "Next UI Components",
+    "UI Design System",
+    "UI for Laravel Inertia",
+    "Laravel Inertia UI",
+    "Laravel Inertia Components",
+    "Laravel Inertia UI Components",
+    "Laravel Inertia UI Kit",
+    "Laravel Inertia UI Library",
+    "Laravel Inertia UI Framework",
+    "Laravel Inertia Justd",
+    "Laravel Justd",
+    "Justd Components",
+    "Justd UI Components",
+    "Justd UI Kit",
+    "Justd UI Library",
+    "Justd UI Framework",
+    "Justd Laravel Inertia",
+    "Justd Laravel",
+    "Justd Inertia"
   ],
-  manifest: '/manifest.json',
+  manifest: "/manifest.json",
   authors: [
     {
-      name: 'irsyadadl',
-      url: 'https://x.com/irsyadadl'
+      name: "irsyadadl",
+      url: "https://x.com/irsyadadl"
     }
   ],
-  creator: 'irsyadadl'
+  creator: "irsyadadl"
 }
 
 export const viewport: Viewport = {
   themeColor: [
-    { media: '(prefers-color-scheme: light)', color: 'white' },
-    { media: '(prefers-color-scheme: dark)', color: 'black' }
+    { media: "(prefers-color-scheme: light)", color: "white" },
+    { media: "(prefers-color-scheme: dark)", color: "black" }
   ],
-  viewportFit: 'cover',
-  width: 'device-width',
+  viewportFit: "cover",
+  width: "device-width",
   initialScale: 1
 }
 
 const fontSans = localFont({
-  src: [{ path: './fonts/Inter.woff2' }],
-  variable: '--font-sans'
+  src: [{ path: "./fonts/Inter.woff2" }],
+  variable: "--font-sans"
 })
 
 const fontMono = localFont({
-  src: [{ path: './fonts/GeistMonoVF.woff' }, { path: './fonts/GeistMonoVF.woff2' }],
-  variable: '--font-mono'
+  src: [{ path: "./fonts/GeistMonoVF.woff" }, { path: "./fonts/GeistMonoVF.woff2" }],
+  variable: "--font-mono"
 })
 
 export default function RootLayout({
@@ -97,7 +97,7 @@ export default function RootLayout({
       <ViewTransitions>
         <body
           className={cn(
-            'min-h-svh [max-width:1850px] mx-auto bg-background font-sans antialiased',
+            "min-h-svh [max-width:1850px] mx-auto bg-background font-sans antialiased",
             fontSans.variable,
             fontMono.variable
           )}
@@ -110,7 +110,7 @@ export default function RootLayout({
               <Footer />
               <Toast />
             </div>
-            {process.env.NODE_ENV === 'production' && (
+            {process.env.NODE_ENV === "production" && (
               <OpenpanelProvider
                 url={process.env.ANALYTICS_CLIENT_URL as string}
                 clientSecret={process.env.ANALYTICS_CLIENT_SECRET as string}
diff --git a/app/page.tsx b/app/page.tsx
index b4327da4..c7c18c28 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,8 +1,8 @@
-import { Blocks } from '@/components/blocks'
-import { Cta } from '@/components/cta'
-import { Hero } from '@/components/hero'
-import { Resources } from '@/components/resources'
-import { Container } from 'ui'
+import { Blocks } from "@/components/blocks"
+import { Cta } from "@/components/cta"
+import { Hero } from "@/components/hero"
+import { Resources } from "@/components/resources"
+import { Container } from "ui"
 
 export default function Page() {
   return (
diff --git a/app/robots.ts b/app/robots.ts
index 458a2be4..006254d1 100644
--- a/app/robots.ts
+++ b/app/robots.ts
@@ -1,11 +1,11 @@
-import { type MetadataRoute } from 'next'
+import { type MetadataRoute } from "next"
 
 export default function robots(): MetadataRoute.Robots {
   return {
     rules: {
-      userAgent: '*',
-      allow: '/'
+      userAgent: "*",
+      allow: "/"
     },
-    sitemap: 'https://getjustd.com/sitemap.xml'
+    sitemap: "https://getjustd.com/sitemap.xml"
   }
 }
diff --git a/app/sitemap.ts b/app/sitemap.ts
index fb1ecdf1..755fd855 100644
--- a/app/sitemap.ts
+++ b/app/sitemap.ts
@@ -1,6 +1,6 @@
-import { type Docs, docs } from '@/.velite'
-import { siteConfig } from '@/resources/config/site'
-import type { MetadataRoute } from 'next'
+import { type Docs, docs } from "@/.velite"
+import { siteConfig } from "@/resources/config/site"
+import type { MetadataRoute } from "next"
 
 export default function sitemap(): MetadataRoute.Sitemap {
   return [
@@ -9,19 +9,19 @@ export default function sitemap(): MetadataRoute.Sitemap {
       lastModified: new Date()
     },
     {
-      url: siteConfig.url + '/components',
+      url: siteConfig.url + "/components",
       lastModified: new Date()
     },
     {
-      url: siteConfig.url + '/icons',
+      url: siteConfig.url + "/icons",
       lastModified: new Date()
     },
     {
-      url: siteConfig.url + '/colors',
+      url: siteConfig.url + "/colors",
       lastModified: new Date()
     },
     {
-      url: siteConfig.url + '/themes',
+      url: siteConfig.url + "/themes",
       lastModified: new Date()
     },
     ...docs.map((doc: Docs) => ({
diff --git a/components/aside.tsx b/components/aside.tsx
index c1645425..5677d2bd 100644
--- a/components/aside.tsx
+++ b/components/aside.tsx
@@ -1,21 +1,21 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { type Docs, docs } from '#site/content'
-import { goodTitle, sortDocs } from '@/resources/lib/utils'
-import { LayoutGroup, motion } from 'framer-motion'
-import { IconCircleHalf, IconCube, IconHighlight, IconLayers } from 'justd-icons'
-import { Link as NextLink } from 'next-view-transitions'
-import type { LinkProps as NextLinkProps } from 'next/link'
-import { usePathname } from 'next/navigation'
-import { tv } from 'tailwind-variants'
-import { Accordion, Badge, cn } from 'ui'
+import { type Docs, docs } from "#site/content"
+import { goodTitle, sortDocs } from "@/resources/lib/utils"
+import { LayoutGroup, motion } from "framer-motion"
+import { IconCircleHalf, IconCube, IconHighlight, IconLayers } from "justd-icons"
+import { Link as NextLink } from "next-view-transitions"
+import type { LinkProps as NextLinkProps } from "next/link"
+import { usePathname } from "next/navigation"
+import { tv } from "tailwind-variants"
+import { Accordion, Badge, cn } from "ui"
 
 export interface Doc {
   slug: string
   title: string
-  status?: 'wip' | 'new' | 'beta' | 'help' | 'primitive' | 'alpha'
+  status?: "wip" | "new" | "beta" | "help" | "primitive" | "alpha"
 }
 
 export interface HierarchyNode {
@@ -26,7 +26,7 @@ export const createHierarchy = (docs: Array<Docs>): HierarchyNode => {
   const hierarchy: HierarchyNode = {}
 
   sortDocs(docs).forEach((doc) => {
-    const parts = doc.slug.split('/').slice(1)
+    const parts = doc.slug.split("/").slice(1)
     let currentLevel = hierarchy
 
     parts.forEach((part, index) => {
@@ -47,22 +47,22 @@ export const createHierarchy = (docs: Array<Docs>): HierarchyNode => {
 
 const renderHierarchy = (node: HierarchyNode, defaultValues: string[]) => {
   const filteredNodeEntries = Object.entries(node).sort(([a], [b]) => {
-    const order = ['prologue', 'getting-started', 'dark-mode', 'components']
+    const order = ["prologue", "getting-started", "dark-mode", "components"]
     return order.indexOf(a) - order.indexOf(b)
   })
   return (
     <Accordion
-      defaultExpandedKeys={['getting-started', 'components']}
+      defaultExpandedKeys={["getting-started", "components"]}
       className="w-full [&_.dk32xd]:p-0 [&_.zwx3ai]:p-0 [&_.zwx3ai]:border-none"
     >
       {filteredNodeEntries.map(([key, value]) => (
         <Accordion.Item key={key} currentId={key}>
           <Trigger className="[&_.jr131]:size-4 text-fg groud-data-[open]:text-muted-fg [&_.jr131]:text-primary [&_.jr131]:fill-primary/10 dark:[&_.jr131]:fill-primary/30">
-            {key === 'getting-started' ? (
+            {key === "getting-started" ? (
               <IconLayers className="jr131" />
-            ) : key === 'prologue' ? (
+            ) : key === "prologue" ? (
               <IconHighlight className="jr131" />
-            ) : key === 'dark-mode' ? (
+            ) : key === "dark-mode" ? (
               <IconCircleHalf className="jr131" />
             ) : (
               <IconCube className="jr131" />
@@ -70,7 +70,7 @@ const renderHierarchy = (node: HierarchyNode, defaultValues: string[]) => {
             {goodTitle(key)}
           </Trigger>
           <Accordion.Content className="py-0">
-            {typeof value === 'object' && 'title' in value ? (
+            {typeof value === "object" && "title" in value ? (
               <AsideLink href={`/${(value as Doc).slug}`}>
                 {goodTitle((value as Doc).title)}
               </AsideLink>
@@ -78,7 +78,7 @@ const renderHierarchy = (node: HierarchyNode, defaultValues: string[]) => {
               <Accordion defaultExpandedKeys={defaultValues} className="w-full relative">
                 <div className="h-full absolute left-0 bg-zinc-200 dark:bg-zinc-800 w-px ml-4" />
                 {Object.entries(value as HierarchyNode).map(([subKey, subValue]) =>
-                  typeof subValue === 'object' && 'title' in subValue ? (
+                  typeof subValue === "object" && "title" in subValue ? (
                     <AsideLink
                       className="pl-[2rem] flex justify-between items-center"
                       key={subKey}
@@ -88,21 +88,21 @@ const renderHierarchy = (node: HierarchyNode, defaultValues: string[]) => {
                       {subValue.status && (
                         <Badge
                           intent={
-                            subValue?.status === 'wip'
-                              ? 'warning'
-                              : subValue?.status === 'alpha'
-                                ? 'danger'
-                                : subValue.status === 'beta'
-                                  ? 'warning'
-                                  : subValue.status === 'help'
-                                    ? 'warning'
-                                    : subValue.status === 'primitive'
-                                      ? 'secondary'
-                                      : 'info'
+                            subValue?.status === "wip"
+                              ? "warning"
+                              : subValue?.status === "alpha"
+                                ? "danger"
+                                : subValue.status === "beta"
+                                  ? "warning"
+                                  : subValue.status === "help"
+                                    ? "warning"
+                                    : subValue.status === "primitive"
+                                      ? "secondary"
+                                      : "info"
                           }
                           className="uppercase h-5 text-[0.5rem]"
                         >
-                          {subValue?.status as Doc['status']}
+                          {subValue?.status as Doc["status"]}
                         </Badge>
                       )}
                     </AsideLink>
@@ -115,11 +115,11 @@ const renderHierarchy = (node: HierarchyNode, defaultValues: string[]) => {
                       <Trigger className="pl-[2rem]">{goodTitle(subKey)}</Trigger>
                       <Accordion.Content className="py-0">
                         {Object.entries(subValue as HierarchyNode).map(([childKey, childValue]) =>
-                          typeof childValue === 'object' && 'title' in childValue ? (
+                          typeof childValue === "object" && "title" in childValue ? (
                             <AsideLink
                               className={cn(
-                                'ml-[-0rem] flex justify-between items-center pl-[3rem]',
-                                defaultValues.length > 0 && 'jf320s'
+                                "ml-[-0rem] flex justify-between items-center pl-[3rem]",
+                                defaultValues.length > 0 && "jf320s"
                               )}
                               key={childKey}
                               href={`/${childValue.slug}`}
@@ -129,21 +129,21 @@ const renderHierarchy = (node: HierarchyNode, defaultValues: string[]) => {
                               {childValue.status && (
                                 <Badge
                                   intent={
-                                    childValue?.status === 'wip'
-                                      ? 'primary'
-                                      : childValue.status === 'beta'
-                                        ? 'warning'
-                                        : childValue.status === 'alpha'
-                                          ? 'danger'
-                                          : childValue.status === 'help'
-                                            ? 'warning'
-                                            : childValue.status === 'primitive'
-                                              ? 'secondary'
-                                              : 'info'
+                                    childValue?.status === "wip"
+                                      ? "primary"
+                                      : childValue.status === "beta"
+                                        ? "warning"
+                                        : childValue.status === "alpha"
+                                          ? "danger"
+                                          : childValue.status === "help"
+                                            ? "warning"
+                                            : childValue.status === "primitive"
+                                              ? "secondary"
+                                              : "info"
                                   }
                                   className="uppercase h-5 text-[0.5rem]"
                                 >
-                                  {childValue?.status as Doc['status']}
+                                  {childValue?.status as Doc["status"]}
                                 </Badge>
                               )}
                             </AsideLink>
@@ -168,7 +168,7 @@ export const Aside = () => {
   const hierarchicalDocs = createHierarchy(docs)
 
   const computeDefaultValuesFromURL = (): string[] => {
-    const pathParts = pathname.split('/').filter(Boolean)
+    const pathParts = pathname.split("/").filter(Boolean)
     const relevantKey = pathParts[2]
     if (relevantKey) {
       return [relevantKey]
@@ -179,12 +179,12 @@ export const Aside = () => {
   const defaultValues = computeDefaultValuesFromURL()
 
   React.useEffect(() => {
-    const activeElement = document.querySelector('.jf320s')
+    const activeElement = document.querySelector(".jf320s")
 
     if (activeElement) {
       activeElement.scrollIntoView({
-        behavior: 'smooth',
-        block: 'center'
+        behavior: "smooth",
+        block: "center"
       })
     }
   }, [])
@@ -199,7 +199,7 @@ const Trigger = ({ children, className }: { children: React.ReactNode; className
   return (
     <Accordion.Trigger
       className={cn(
-        'pt-0 py-1.5 focus-visible:ring-1 focus-visible:ring-primary ring-inset outline-0 outline-offset-0 font-normal hover:bg-secondary/70 focus-visible:bg-secondary/70 rounded-lg px-2 lg:text-sm',
+        "pt-0 py-1.5 focus-visible:ring-1 focus-visible:ring-primary ring-inset outline-0 outline-offset-0 font-normal hover:bg-secondary/70 focus-visible:bg-secondary/70 rounded-lg px-2 lg:text-sm",
         className
       )}
     >
@@ -216,11 +216,11 @@ interface AsideLinkProps extends NextLinkProps {
 }
 
 const asideLinkStyles = tv({
-  base: 'relative block focus:outline-none focus-visible:bg-secondary/70 focus-visible:ring-inset focus-visible:ring-1 focus-visible:ring-primary rounded-md px-2.5 py-2 text-base transition-colors hover:bg-secondary/70 hover:text-fg lg:text-sm',
+  base: "relative block focus:outline-none focus-visible:bg-secondary/70 focus-visible:ring-inset focus-visible:ring-1 focus-visible:ring-primary rounded-md px-2.5 py-2 text-base transition-colors hover:bg-secondary/70 hover:text-fg lg:text-sm",
   variants: {
     isActive: {
-      true: 'font-medium text-fg',
-      false: 'text-muted-fg'
+      true: "font-medium text-fg",
+      false: "text-muted-fg"
     }
   }
 })
@@ -235,7 +235,7 @@ function AsideLink({ indicatorClassName, className, children, active, ...props }
         <motion.span
           layoutId="current-indicator-sidebar"
           className={cn(
-            'absolute inset-y-1 left-[1rem] w-0.5 rounded-full bg-fg',
+            "absolute inset-y-1 left-[1rem] w-0.5 rounded-full bg-fg",
             indicatorClassName
           )}
         />
diff --git a/components/blocks.tsx b/components/blocks.tsx
index f6e844af..67b9a92b 100644
--- a/components/blocks.tsx
+++ b/components/blocks.tsx
@@ -1,22 +1,22 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { Buttons } from '@/components/blocks/buttons'
-import { CheckRadioBlock } from '@/components/blocks/check-radio-block'
-import { LoginForm } from '@/components/blocks/login-form'
-import { Menus } from '@/components/blocks/menus'
-import { ModalOverlays, PopoverOverlays } from '@/components/blocks/overlays'
-import { TableDemo } from '@/components/blocks/table-demo'
-import { ToolbarBlock } from '@/components/blocks/toolbar-block'
-import ColorPickerCombinationDemo from '@/components/docs/colors/color-picker-combination-demo'
-import SwitchDemo from '@/components/docs/controls/switch-demo'
-import CalendarDemo from '@/components/docs/date-and-time/calendar-demo'
-import TagFieldDemo from '@/components/docs/forms/tag-field-demo'
-import ComboBoxAvatarDemo from '@/components/docs/pickers/combo-box-avatar-demo'
-import MultipleSelectDemo from '@/components/docs/pickers/multiple-select-demo'
-import { IconCubeFill } from 'justd-icons'
-import { buttonStyles, cn, DatePicker, DateRangePicker, Grid, Heading, Link, Note } from 'ui'
+import { Buttons } from "@/components/blocks/buttons"
+import { CheckRadioBlock } from "@/components/blocks/check-radio-block"
+import { LoginForm } from "@/components/blocks/login-form"
+import { Menus } from "@/components/blocks/menus"
+import { ModalOverlays, PopoverOverlays } from "@/components/blocks/overlays"
+import { TableDemo } from "@/components/blocks/table-demo"
+import { ToolbarBlock } from "@/components/blocks/toolbar-block"
+import ColorPickerCombinationDemo from "@/components/docs/colors/color-picker-combination-demo"
+import SwitchDemo from "@/components/docs/controls/switch-demo"
+import CalendarDemo from "@/components/docs/date-and-time/calendar-demo"
+import TagFieldDemo from "@/components/docs/forms/tag-field-demo"
+import ComboBoxAvatarDemo from "@/components/docs/pickers/combo-box-avatar-demo"
+import MultipleSelectDemo from "@/components/docs/pickers/multiple-select-demo"
+import { IconCubeFill } from "justd-icons"
+import { buttonStyles, cn, DatePicker, DateRangePicker, Grid, Heading, Link, Note } from "ui"
 
 export function Blocks() {
   return (
@@ -130,7 +130,7 @@ export function CardBlock({
     >
       <div
         className={cn(
-          'grid h-full w-full justify-items-center overflow-hidden place-items-center p-6 py-8 sm:p-8 lg:p-12',
+          "grid h-full w-full justify-items-center overflow-hidden place-items-center p-6 py-8 sm:p-8 lg:p-12",
           className
         )}
       >
diff --git a/components/blocks/buttons.tsx b/components/blocks/buttons.tsx
index 5cc9de71..7fe437b2 100644
--- a/components/blocks/buttons.tsx
+++ b/components/blocks/buttons.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { CardBlock } from '@/components/blocks'
-import { Button } from 'ui'
+import { CardBlock } from "@/components/blocks"
+import { Button } from "ui"
 
 export function Buttons() {
   return (
diff --git a/components/blocks/check-radio-block.tsx b/components/blocks/check-radio-block.tsx
index dd5c60e3..65d8429d 100644
--- a/components/blocks/check-radio-block.tsx
+++ b/components/blocks/check-radio-block.tsx
@@ -1,12 +1,12 @@
-'use client'
+"use client"
 
-import React, { useState } from 'react'
+import React, { useState } from "react"
 
-import { CardBlock } from '@/components/blocks'
-import { Checkbox, CheckboxGroup, Radio, RadioGroup } from 'ui'
+import { CardBlock } from "@/components/blocks"
+import { Checkbox, CheckboxGroup, Radio, RadioGroup } from "ui"
 
 export function CheckRadioBlock() {
-  const [selectedRadio, setSelectedRadio] = useState('lowSecurity')
+  const [selectedRadio, setSelectedRadio] = useState("lowSecurity")
   return (
     <CardBlock>
       <RadioGroup value={selectedRadio} onChange={setSelectedRadio}>
@@ -14,9 +14,9 @@ export function CheckRadioBlock() {
           High Security
         </Radio>
         <CheckboxGroup
-          defaultValue={['encryption']}
+          defaultValue={["encryption"]}
           className="ml-6"
-          isDisabled={selectedRadio !== 'highSecurity'}
+          isDisabled={selectedRadio !== "highSecurity"}
         >
           <Checkbox value="encryption" description="Enable encryption." isReadOnly>
             Encryption
diff --git a/components/blocks/grid-list-drag-block.tsx b/components/blocks/grid-list-drag-block.tsx
index 6def4e4f..7770e6b7 100644
--- a/components/blocks/grid-list-drag-block.tsx
+++ b/components/blocks/grid-list-drag-block.tsx
@@ -1,19 +1,19 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { CardBlock } from '@/components/blocks'
-import { OtherEmptyList } from '@/components/docs/collections/grid-list-drag-between-item-demo'
-import GridListDragDemo from '@/components/docs/collections/grid-list-drag-demo'
-import { useDragAndDrop } from 'react-aria-components'
-import { useListData } from 'react-stately'
-import { GridList } from 'ui'
+import { CardBlock } from "@/components/blocks"
+import { OtherEmptyList } from "@/components/docs/collections/grid-list-drag-between-item-demo"
+import GridListDragDemo from "@/components/docs/collections/grid-list-drag-demo"
+import { useDragAndDrop } from "react-aria-components"
+import { useListData } from "react-stately"
+import { GridList } from "ui"
 
 export function GridListDragBlock() {
   const list = useListData({
     initialItems: [
-      { id: 6, name: 'The Byrds' },
-      { id: 7, name: 'The Yardbirds' }
+      { id: 6, name: "The Byrds" },
+      { id: 7, name: "The Yardbirds" }
     ]
   })
 
@@ -21,14 +21,14 @@ export function GridListDragBlock() {
     async onInsert(e) {
       const items = await Promise.all(
         e.items.map(async (item) => {
-          const name = item.kind === 'text' ? await item.getText('text/plain') : item.name
+          const name = item.kind === "text" ? await item.getText("text/plain") : item.name
           return { id: Math.random(), name }
         })
       )
 
-      if (e.target.dropPosition === 'before') {
+      if (e.target.dropPosition === "before") {
         list.insertBefore(e.target.key, ...items)
-      } else if (e.target.dropPosition === 'after') {
+      } else if (e.target.dropPosition === "after") {
         list.insertAfter(e.target.key, ...items)
       }
     }
diff --git a/components/blocks/login-form.tsx b/components/blocks/login-form.tsx
index 753c6241..a2b6f58e 100644
--- a/components/blocks/login-form.tsx
+++ b/components/blocks/login-form.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { Button, Card, Checkbox, Link, TextField } from 'ui'
+import { Button, Card, Checkbox, Link, TextField } from "ui"
 
 export function LoginForm() {
   return (
diff --git a/components/blocks/menus.tsx b/components/blocks/menus.tsx
index cd3f3686..9f427cc3 100644
--- a/components/blocks/menus.tsx
+++ b/components/blocks/menus.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { CardBlock } from '@/components/blocks'
+import { CardBlock } from "@/components/blocks"
 import {
   IconBrandBluesky,
   IconBrandTelegram,
@@ -14,8 +14,8 @@ import {
   IconPersonAdd,
   IconPlus,
   IconSettings
-} from 'justd-icons'
-import { Button, Menu } from 'ui'
+} from "justd-icons"
+import { Button, Menu } from "ui"
 
 export function Menus() {
   return (
diff --git a/components/blocks/overlays.tsx b/components/blocks/overlays.tsx
index bec7aef7..fa2d53ab 100644
--- a/components/blocks/overlays.tsx
+++ b/components/blocks/overlays.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { CardBlock } from '@/components/blocks'
-import { Button, Modal, Popover } from 'ui'
+import { CardBlock } from "@/components/blocks"
+import { Button, Modal, Popover } from "ui"
 
 export function PopoverOverlays() {
   return (
diff --git a/components/blocks/slider-on-popover-block.tsx b/components/blocks/slider-on-popover-block.tsx
index 215152d6..fc3b5e20 100644
--- a/components/blocks/slider-on-popover-block.tsx
+++ b/components/blocks/slider-on-popover-block.tsx
@@ -1,7 +1,7 @@
-import React from 'react'
+import React from "react"
 
-import { IconAdjustment } from 'justd-icons'
-import { Button, Description, Popover, Slider } from 'ui'
+import { IconAdjustment } from "justd-icons"
+import { Button, Description, Popover, Slider } from "ui"
 
 export function SliderOnPopoverBlock() {
   const [fontSize, setFontSize] = React.useState<number>(16)
@@ -21,7 +21,7 @@ export function SliderOnPopoverBlock() {
           <div>
             <Slider value={fontSize} onChange={(v) => setFontSize(v as number)} label="Font Size" />
             <Description className="mt-2 block [&>strong]:text-fg">
-              Current font size: <strong>{fontSize ?? '-'}</strong>
+              Current font size: <strong>{fontSize ?? "-"}</strong>
             </Description>
           </div>
           <div>
@@ -31,7 +31,7 @@ export function SliderOnPopoverBlock() {
               label="Line Height"
             />
             <Description className="mt-2 block [&>strong]:text-fg">
-              Current line height: <strong>{lineHeight ?? '-'}</strong>
+              Current line height: <strong>{lineHeight ?? "-"}</strong>
             </Description>
           </div>
         </>
diff --git a/components/blocks/table-demo.tsx b/components/blocks/table-demo.tsx
index 75f3ba37..e684449c 100644
--- a/components/blocks/table-demo.tsx
+++ b/components/blocks/table-demo.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { books } from '@/components/docs/collections/table-bulk-demo'
-import { Table } from 'ui'
+import { books } from "@/components/docs/collections/table-bulk-demo"
+import { Table } from "ui"
 
 export function TableDemo() {
   return (
diff --git a/components/blocks/toolbar-block.tsx b/components/blocks/toolbar-block.tsx
index f34658ae..bc3741f8 100644
--- a/components/blocks/toolbar-block.tsx
+++ b/components/blocks/toolbar-block.tsx
@@ -1,6 +1,6 @@
-import React from 'react'
+import React from "react"
 
-import { SliderOnPopoverBlock } from '@/components/blocks/slider-on-popover-block'
+import { SliderOnPopoverBlock } from "@/components/blocks/slider-on-popover-block"
 import {
   IconCamera,
   IconCameraFill,
@@ -14,8 +14,8 @@ import {
   IconMagicFill,
   IconVideoPlaylist,
   IconVideoPlaylistFill
-} from 'justd-icons'
-import { Card, Toolbar } from 'ui'
+} from "justd-icons"
+import { Card, Toolbar } from "ui"
 
 export function ToolbarBlock() {
   return (
diff --git a/components/cta.tsx b/components/cta.tsx
index fc58a80f..72b292f7 100644
--- a/components/cta.tsx
+++ b/components/cta.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import { siteConfig } from '@/resources/config/site'
-import { IconBrandGithub } from 'justd-icons'
-import { buttonStyles, Container, Heading, Link } from 'ui'
+import { siteConfig } from "@/resources/config/site"
+import { IconBrandGithub } from "justd-icons"
+import { buttonStyles, Container, Heading, Link } from "ui"
 
 export function Cta() {
   return (
@@ -20,7 +20,7 @@ export function Cta() {
           <Link
             target="_blank"
             href={siteConfig.repo}
-            className={buttonStyles({ size: 'large', intent: 'light/dark' })}
+            className={buttonStyles({ size: "large", intent: "light/dark" })}
           >
             <IconBrandGithub />
             GitHub
diff --git a/components/docs/buttons/button-icon-demo.tsx b/components/docs/buttons/button-icon-demo.tsx
index 4e757abf..47805f9a 100644
--- a/components/docs/buttons/button-icon-demo.tsx
+++ b/components/docs/buttons/button-icon-demo.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { IconBrandLaravel } from 'justd-icons'
-import { Button } from 'ui'
+import { IconBrandLaravel } from "justd-icons"
+import { Button } from "ui"
 
 export default function ButtonIconDemo() {
   return (
diff --git a/components/docs/buttons/button-link-demo.tsx b/components/docs/buttons/button-link-demo.tsx
index 29b78a39..0ec54efa 100644
--- a/components/docs/buttons/button-link-demo.tsx
+++ b/components/docs/buttons/button-link-demo.tsx
@@ -1,11 +1,11 @@
-'use client'
+"use client"
 
-import { buttonStyles, Link } from 'ui'
+import { buttonStyles, Link } from "ui"
 
 export default function ButtonLinkDemo() {
   return (
     <Link
-      className={buttonStyles({ intent: 'info' })}
+      className={buttonStyles({ intent: "info" })}
       href="/docs/components/collections/choicebox"
     >
       Choicebox
diff --git a/components/docs/buttons/button-size-demo.tsx b/components/docs/buttons/button-size-demo.tsx
index 2199a445..30cdea5f 100644
--- a/components/docs/buttons/button-size-demo.tsx
+++ b/components/docs/buttons/button-size-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Button } from 'ui'
+import { Button } from "ui"
 
 export default function ButtonSizeDemo() {
   return (
diff --git a/components/docs/buttons/toggle-demo.tsx b/components/docs/buttons/toggle-demo.tsx
index 844b1215..faf7fcbb 100644
--- a/components/docs/buttons/toggle-demo.tsx
+++ b/components/docs/buttons/toggle-demo.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { Toggle } from 'ui'
+import { Toggle } from "ui"
 
 export default function ToggleDemo() {
-  return <Toggle>{({ isSelected }) => <>{isSelected ? 'Unpin' : 'Pin'}</>}</Toggle>
+  return <Toggle>{({ isSelected }) => <>{isSelected ? "Unpin" : "Pin"}</>}</Toggle>
 }
diff --git a/components/docs/collections/choicebox-columns-demo.tsx b/components/docs/collections/choicebox-columns-demo.tsx
index 13711b9a..4c00e346 100644
--- a/components/docs/collections/choicebox-columns-demo.tsx
+++ b/components/docs/collections/choicebox-columns-demo.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { Choicebox } from 'ui'
+import { Choicebox } from "ui"
 
 export default function ChoiceboxColumnsDemo() {
   return (
@@ -19,10 +19,10 @@ export default function ChoiceboxColumnsDemo() {
 }
 
 const prices = [
-  { id: 1, title: 'Basic', description: 'Essentials, get started' },
-  { id: 2, title: 'Standard', description: 'More features, support' },
-  { id: 3, title: 'Premium', description: 'Advanced, growing needs' },
-  { id: 4, title: 'Deluxe', description: 'Top-tier, maximum performance' },
-  { id: 5, title: 'Ultimate', description: 'All-inclusive, every feature' },
-  { id: 6, title: 'Enterprise', description: 'Custom, large-scale operations' }
+  { id: 1, title: "Basic", description: "Essentials, get started" },
+  { id: 2, title: "Standard", description: "More features, support" },
+  { id: 3, title: "Premium", description: "Advanced, growing needs" },
+  { id: 4, title: "Deluxe", description: "Top-tier, maximum performance" },
+  { id: 5, title: "Ultimate", description: "All-inclusive, every feature" },
+  { id: 6, title: "Enterprise", description: "Custom, large-scale operations" }
 ]
diff --git a/components/docs/collections/choicebox-controlled-demo.tsx b/components/docs/collections/choicebox-controlled-demo.tsx
index 2dd13e38..9ceea9f3 100644
--- a/components/docs/collections/choicebox-controlled-demo.tsx
+++ b/components/docs/collections/choicebox-controlled-demo.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import type { Selection } from 'react-aria-components'
-import { Choicebox, Description } from 'ui'
+import type { Selection } from "react-aria-components"
+import { Choicebox, Description } from "ui"
 
 export default function ChoiceboxControlledDemo() {
   const [selectedKeys, setSelectedKeys] = React.useState<Selection>(new Set([packages[0].id]))
@@ -20,7 +20,7 @@ export default function ChoiceboxControlledDemo() {
       </Choicebox>
 
       <Description className="mt-2 block [&>strong]:text-fg text-muted-fg">
-        You have selected: <strong>{Array.from(selectedKeys).join(', ')}</strong>
+        You have selected: <strong>{Array.from(selectedKeys).join(", ")}</strong>
       </Description>
     </>
   )
@@ -28,23 +28,23 @@ export default function ChoiceboxControlledDemo() {
 
 const packages = [
   {
-    id: 'sm',
-    title: 'Small',
-    description: 'Perfect for beginners. Basic resources for light projects.'
+    id: "sm",
+    title: "Small",
+    description: "Perfect for beginners. Basic resources for light projects."
   },
   {
-    id: 'md',
-    title: 'Medium',
-    description: 'Great for growing sites. More power and storage.'
+    id: "md",
+    title: "Medium",
+    description: "Great for growing sites. More power and storage."
   },
   {
-    id: 'lg',
-    title: 'Large',
-    description: 'Ideal for busy sites. Lots of resources and support.'
+    id: "lg",
+    title: "Large",
+    description: "Ideal for busy sites. Lots of resources and support."
   },
   {
-    id: 'xl',
-    title: 'Extra Large',
-    description: 'Max power for demanding applications. Top-tier performance.'
+    id: "xl",
+    title: "Extra Large",
+    description: "Max power for demanding applications. Top-tier performance."
   }
 ]
diff --git a/components/docs/collections/choicebox-demo.tsx b/components/docs/collections/choicebox-demo.tsx
index d757b3e6..d25cf8fe 100644
--- a/components/docs/collections/choicebox-demo.tsx
+++ b/components/docs/collections/choicebox-demo.tsx
@@ -1,29 +1,29 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { Choicebox } from 'ui'
+import { Choicebox } from "ui"
 
 const packages = [
   {
     id: 1,
-    title: 'Small',
-    description: 'Perfect for beginners. Basic resources for light projects.'
+    title: "Small",
+    description: "Perfect for beginners. Basic resources for light projects."
   },
   {
     id: 2,
-    title: 'Medium',
-    description: 'Great for growing sites. More power and storage.'
+    title: "Medium",
+    description: "Great for growing sites. More power and storage."
   },
   {
     id: 3,
-    title: 'Large',
-    description: 'Ideal for busy sites. Lots of resources and support.'
+    title: "Large",
+    description: "Ideal for busy sites. Lots of resources and support."
   },
   {
     id: 4,
-    title: 'Extra Large',
-    description: 'Max power for demanding applications. Top-tier performance.'
+    title: "Extra Large",
+    description: "Max power for demanding applications. Top-tier performance."
   }
 ]
 
diff --git a/components/docs/collections/choicebox-disabled-demo.tsx b/components/docs/collections/choicebox-disabled-demo.tsx
index 6082c32c..73a8c736 100644
--- a/components/docs/collections/choicebox-disabled-demo.tsx
+++ b/components/docs/collections/choicebox-disabled-demo.tsx
@@ -1,36 +1,36 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { Choicebox } from 'ui'
+import { Choicebox } from "ui"
 
 export default function ChoiceboxDisabledDemo() {
   return (
     <Choicebox aria-label="Select packages" selectionMode="multiple" items={packages}>
-      {(item) => <Choicebox.Item isDisabled={['sm', 'lg'].includes(item.id)} {...item} />}
+      {(item) => <Choicebox.Item isDisabled={["sm", "lg"].includes(item.id)} {...item} />}
     </Choicebox>
   )
 }
 
 const packages = [
   {
-    id: 'sm',
-    title: 'Small',
-    description: 'Perfect for beginners. Basic resources for light projects.'
+    id: "sm",
+    title: "Small",
+    description: "Perfect for beginners. Basic resources for light projects."
   },
   {
-    id: 'md',
-    title: 'Medium',
-    description: 'Great for growing sites. More power and storage.'
+    id: "md",
+    title: "Medium",
+    description: "Great for growing sites. More power and storage."
   },
   {
-    id: 'lg',
-    title: 'Large',
-    description: 'Ideal for busy sites. Lots of resources and support.'
+    id: "lg",
+    title: "Large",
+    description: "Ideal for busy sites. Lots of resources and support."
   },
   {
-    id: 'xl',
-    title: 'Extra Large',
-    description: 'Max power for demanding applications. Top-tier performance.'
+    id: "xl",
+    title: "Extra Large",
+    description: "Max power for demanding applications. Top-tier performance."
   }
 ]
diff --git a/components/docs/collections/choicebox-single-selection-demo.tsx b/components/docs/collections/choicebox-single-selection-demo.tsx
index 3dee2d06..551456b8 100644
--- a/components/docs/collections/choicebox-single-selection-demo.tsx
+++ b/components/docs/collections/choicebox-single-selection-demo.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { Choicebox } from 'ui'
+import { Choicebox } from "ui"
 
 export default function ChoiceboxSingleSelectionDemo() {
   return (
@@ -14,23 +14,23 @@ export default function ChoiceboxSingleSelectionDemo() {
 
 const packages = [
   {
-    id: 'sm',
-    title: 'Small',
-    description: 'Perfect for beginners. Basic resources for light projects.'
+    id: "sm",
+    title: "Small",
+    description: "Perfect for beginners. Basic resources for light projects."
   },
   {
-    id: 'md',
-    title: 'Medium',
-    description: 'Great for growing sites. More power and storage.'
+    id: "md",
+    title: "Medium",
+    description: "Great for growing sites. More power and storage."
   },
   {
-    id: 'lg',
-    title: 'Large',
-    description: 'Ideal for busy sites. Lots of resources and support.'
+    id: "lg",
+    title: "Large",
+    description: "Ideal for busy sites. Lots of resources and support."
   },
   {
-    id: 'xl',
-    title: 'Extra Large',
-    description: 'Max power for demanding applications. Top-tier performance.'
+    id: "xl",
+    title: "Extra Large",
+    description: "Max power for demanding applications. Top-tier performance."
   }
 ]
diff --git a/components/docs/collections/command-basic-demo.tsx b/components/docs/collections/command-basic-demo.tsx
index 1da4fdeb..aa6e8207 100644
--- a/components/docs/collections/command-basic-demo.tsx
+++ b/components/docs/collections/command-basic-demo.tsx
@@ -1,20 +1,20 @@
-'use client'
+"use client"
 
-import React, { useState } from 'react'
+import React, { useState } from "react"
 
 export default function CommandBasicDemo() {
   const [open, setOpen] = useState(false)
   React.useEffect(() => {
     const down = (e: KeyboardEvent) => {
-      if (e.key === 'e') {
+      if (e.key === "e") {
         e.preventDefault()
         setOpen((open: boolean) => !open)
       }
     }
 
-    document.addEventListener('keydown', down)
+    document.addEventListener("keydown", down)
 
-    return () => document.removeEventListener('keydown', down)
+    return () => document.removeEventListener("keydown", down)
   }, [])
   return <>{/*  */}</>
 }
diff --git a/components/docs/collections/grid-list-controlled-demo.tsx b/components/docs/collections/grid-list-controlled-demo.tsx
index f61ad883..c1a16884 100644
--- a/components/docs/collections/grid-list-controlled-demo.tsx
+++ b/components/docs/collections/grid-list-controlled-demo.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import type { Selection } from 'react-aria-components'
-import { Description, GridList } from 'ui'
+import type { Selection } from "react-aria-components"
+import { Description, GridList } from "ui"
 
 export default function GridListControlledDemo() {
   const [selectedKeys, setSelectedKeys] = React.useState<Selection>(new Set([]))
@@ -20,16 +20,16 @@ export default function GridListControlledDemo() {
         {(item) => <GridList.Item id={item.id}>{item.name}</GridList.Item>}
       </GridList>
       <Description className="mt-2 block [&>strong]:text-fg text-muted-fg">
-        You have selected: <strong>{Array.from(selectedKeys).join(', ')}</strong>
+        You have selected: <strong>{Array.from(selectedKeys).join(", ")}</strong>
       </Description>
     </div>
   )
 }
 
 const items = [
-  { id: '1', name: 'The Beatles' },
-  { id: '2', name: 'Led Zeppelin' },
-  { id: '3', name: 'Pink Floyd' },
-  { id: '4', name: 'Queen' },
-  { id: '5', name: 'The Rolling Stones' }
+  { id: "1", name: "The Beatles" },
+  { id: "2", name: "Led Zeppelin" },
+  { id: "3", name: "Pink Floyd" },
+  { id: "4", name: "Queen" },
+  { id: "5", name: "The Rolling Stones" }
 ]
diff --git a/components/docs/collections/grid-list-demo.tsx b/components/docs/collections/grid-list-demo.tsx
index 25834a58..61c7c22a 100644
--- a/components/docs/collections/grid-list-demo.tsx
+++ b/components/docs/collections/grid-list-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { GridList } from 'ui'
+import { GridList } from "ui"
 
 export default function GridListDemo() {
   return (
@@ -11,9 +11,9 @@ export default function GridListDemo() {
 }
 
 const items = [
-  { id: '1', name: 'The Beatles' },
-  { id: '2', name: 'Led Zeppelin' },
-  { id: '3', name: 'Pink Floyd' },
-  { id: '4', name: 'Queen' },
-  { id: '5', name: 'The Rolling Stones' }
+  { id: "1", name: "The Beatles" },
+  { id: "2", name: "Led Zeppelin" },
+  { id: "3", name: "Pink Floyd" },
+  { id: "4", name: "Queen" },
+  { id: "5", name: "The Rolling Stones" }
 ]
diff --git a/components/docs/collections/grid-list-disabled-demo.tsx b/components/docs/collections/grid-list-disabled-demo.tsx
index 5021e9f8..0da082ba 100644
--- a/components/docs/collections/grid-list-disabled-demo.tsx
+++ b/components/docs/collections/grid-list-disabled-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { GridList } from 'ui'
+import { GridList } from "ui"
 
 export default function GridListDisabledDemo() {
   return (
@@ -20,9 +20,9 @@ export default function GridListDisabledDemo() {
 }
 
 const items = [
-  { id: '1', name: 'The Beatles' },
-  { id: '2', name: 'Led Zeppelin' },
-  { id: '3', name: 'Pink Floyd' },
-  { id: '4', name: 'Queen' },
-  { id: '5', name: 'The Rolling Stones' }
+  { id: "1", name: "The Beatles" },
+  { id: "2", name: "Led Zeppelin" },
+  { id: "3", name: "Pink Floyd" },
+  { id: "4", name: "Queen" },
+  { id: "5", name: "The Rolling Stones" }
 ]
diff --git a/components/docs/collections/grid-list-drag-between-item-demo.tsx b/components/docs/collections/grid-list-drag-between-item-demo.tsx
index 63f0f843..07e16958 100644
--- a/components/docs/collections/grid-list-drag-between-item-demo.tsx
+++ b/components/docs/collections/grid-list-drag-between-item-demo.tsx
@@ -1,17 +1,17 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import GridListDragDemo from '@/components/docs/collections/grid-list-drag-demo'
-import { useDragAndDrop } from 'react-aria-components'
-import { useListData } from 'react-stately'
-import { GridList } from 'ui'
+import GridListDragDemo from "@/components/docs/collections/grid-list-drag-demo"
+import { useDragAndDrop } from "react-aria-components"
+import { useListData } from "react-stately"
+import { GridList } from "ui"
 
 export default function GridListDragBetweenItemDemo() {
   const list = useListData({
     initialItems: [
-      { id: 6, name: 'The Byrds' },
-      { id: 7, name: 'The Yardbirds' }
+      { id: 6, name: "The Byrds" },
+      { id: 7, name: "The Yardbirds" }
     ]
   })
 
@@ -19,14 +19,14 @@ export default function GridListDragBetweenItemDemo() {
     async onInsert(e) {
       const items = await Promise.all(
         e.items.map(async (item) => {
-          const name = item.kind === 'text' ? await item.getText('text/plain') : item.name
+          const name = item.kind === "text" ? await item.getText("text/plain") : item.name
           return { id: Math.random(), name }
         })
       )
 
-      if (e.target.dropPosition === 'before') {
+      if (e.target.dropPosition === "before") {
         list.insertBefore(e.target.key, ...items)
-      } else if (e.target.dropPosition === 'after') {
+      } else if (e.target.dropPosition === "after") {
         list.insertAfter(e.target.key, ...items)
       }
     }
@@ -45,21 +45,21 @@ export default function GridListDragBetweenItemDemo() {
 
 export function OtherEmptyList() {
   const list = useListData({
-    initialItems: [{ id: 7, name: 'The Who' }]
+    initialItems: [{ id: 7, name: "The Who" }]
   })
 
   const { dragAndDropHooks } = useDragAndDrop({
     async onInsert(e) {
       const items = await Promise.all(
         e.items.map(async (item) => {
-          const name = item.kind === 'text' ? await item.getText('text/plain') : item.name
+          const name = item.kind === "text" ? await item.getText("text/plain") : item.name
           return { id: Math.random(), name }
         })
       )
 
-      if (e.target.dropPosition === 'before') {
+      if (e.target.dropPosition === "before") {
         list.insertBefore(e.target.key, ...items)
-      } else if (e.target.dropPosition === 'after') {
+      } else if (e.target.dropPosition === "after") {
         list.insertAfter(e.target.key, ...items)
       }
     }
diff --git a/components/docs/collections/grid-list-drag-demo.tsx b/components/docs/collections/grid-list-drag-demo.tsx
index 101d9904..eda5bbc7 100644
--- a/components/docs/collections/grid-list-drag-demo.tsx
+++ b/components/docs/collections/grid-list-drag-demo.tsx
@@ -1,19 +1,19 @@
-'use client'
+"use client"
 
-import { useDragAndDrop } from 'react-aria-components'
-import { useListData } from 'react-stately'
-import { GridList } from 'ui'
+import { useDragAndDrop } from "react-aria-components"
+import { useListData } from "react-stately"
+import { GridList } from "ui"
 
 export default function GridListDragDemo() {
   const list = useListData({
     initialItems: items
   })
   const { dragAndDropHooks } = useDragAndDrop({
-    getItems: (keys) => [...keys].map((key) => ({ 'text/plain': list.getItem(key).name })),
+    getItems: (keys) => [...keys].map((key) => ({ "text/plain": list.getItem(key).name })),
     onReorder(e) {
-      if (e.target.dropPosition === 'before') {
+      if (e.target.dropPosition === "before") {
         list.moveBefore(e.target.key, e.keys)
-      } else if (e.target.dropPosition === 'after') {
+      } else if (e.target.dropPosition === "after") {
         list.moveAfter(e.target.key, e.keys)
       }
     }
@@ -34,12 +34,12 @@ export default function GridListDragDemo() {
 }
 
 const items = [
-  { id: 1, name: 'The Beatles' },
-  { id: 2, name: 'Led Zeppelin' },
-  { id: 3, name: 'Pink Floyd' },
-  { id: 4, name: 'Queen' },
-  { id: 5, name: 'The Rolling Stones' },
-  { id: 6, name: 'The Beach Boys' },
-  { id: 7, name: 'The Kinks' },
-  { id: 8, name: 'The Who' }
+  { id: 1, name: "The Beatles" },
+  { id: 2, name: "Led Zeppelin" },
+  { id: 3, name: "Pink Floyd" },
+  { id: 4, name: "Queen" },
+  { id: 5, name: "The Rolling Stones" },
+  { id: 6, name: "The Beach Boys" },
+  { id: 7, name: "The Kinks" },
+  { id: 8, name: "The Who" }
 ]
diff --git a/components/docs/collections/grid-list-multiple-demo.tsx b/components/docs/collections/grid-list-multiple-demo.tsx
index 3e942292..ef883ddf 100644
--- a/components/docs/collections/grid-list-multiple-demo.tsx
+++ b/components/docs/collections/grid-list-multiple-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { GridList } from 'ui'
+import { GridList } from "ui"
 
 export default function GridListMultipleDemo() {
   return (
@@ -18,9 +18,9 @@ export default function GridListMultipleDemo() {
 }
 
 const items = [
-  { id: '1', name: 'The Beatles' },
-  { id: '2', name: 'Led Zeppelin' },
-  { id: '3', name: 'Pink Floyd' },
-  { id: '4', name: 'Queen' },
-  { id: '5', name: 'The Rolling Stones' }
+  { id: "1", name: "The Beatles" },
+  { id: "2", name: "Led Zeppelin" },
+  { id: "3", name: "Pink Floyd" },
+  { id: "4", name: "Queen" },
+  { id: "5", name: "The Rolling Stones" }
 ]
diff --git a/components/docs/collections/grid-list-render-empty-state-demo.tsx b/components/docs/collections/grid-list-render-empty-state-demo.tsx
index b44a2ec1..95f51929 100644
--- a/components/docs/collections/grid-list-render-empty-state-demo.tsx
+++ b/components/docs/collections/grid-list-render-empty-state-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { GridList } from 'ui'
+import { GridList } from "ui"
 
 export default function GridListRenderEmptyStateDemo() {
   return (
diff --git a/components/docs/collections/list-box-controlled-demo.tsx b/components/docs/collections/list-box-controlled-demo.tsx
index 85b0d97a..6df76f56 100644
--- a/components/docs/collections/list-box-controlled-demo.tsx
+++ b/components/docs/collections/list-box-controlled-demo.tsx
@@ -1,12 +1,12 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import type { Selection } from 'react-aria-components'
-import { Description, ListBox } from 'ui'
+import type { Selection } from "react-aria-components"
+import { Description, ListBox } from "ui"
 
 export default function ListBoxControlledDemo() {
-  const [selected, setSelected] = React.useState<Selection>(new Set(['2']))
+  const [selected, setSelected] = React.useState<Selection>(new Set(["2"]))
   return (
     <>
       <ListBox
@@ -31,30 +31,30 @@ export default function ListBoxControlledDemo() {
 const fruits = [
   {
     id: 1,
-    name: 'Apple'
+    name: "Apple"
   },
   {
     id: 2,
-    name: 'Banana'
+    name: "Banana"
   },
   {
     id: 3,
-    name: 'Orange'
+    name: "Orange"
   },
   {
     id: 4,
-    name: 'Strawberry'
+    name: "Strawberry"
   },
   {
     id: 5,
-    name: 'Grapes'
+    name: "Grapes"
   },
   {
     id: 6,
-    name: 'Mango'
+    name: "Mango"
   },
   {
     id: 7,
-    name: 'Pineapple'
+    name: "Pineapple"
   }
 ]
diff --git a/components/docs/collections/list-box-demo.tsx b/components/docs/collections/list-box-demo.tsx
index 3bcc4f77..d10dc07c 100644
--- a/components/docs/collections/list-box-demo.tsx
+++ b/components/docs/collections/list-box-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { ListBox } from 'ui'
+import { ListBox } from "ui"
 
 export default function ListBoxDemo() {
   return (
@@ -11,9 +11,9 @@ export default function ListBoxDemo() {
 }
 
 const rockPopBands = [
-  { id: '1', name: 'Nirvana' },
-  { id: '2', name: 'Radiohead' },
-  { id: '3', name: 'Foo Fighters' },
-  { id: '4', name: 'Arctic Monkeys' },
-  { id: '5', name: 'The Strokes' }
+  { id: "1", name: "Nirvana" },
+  { id: "2", name: "Radiohead" },
+  { id: "3", name: "Foo Fighters" },
+  { id: "4", name: "Arctic Monkeys" },
+  { id: "5", name: "The Strokes" }
 ]
diff --git a/components/docs/collections/list-box-disabled-demo.tsx b/components/docs/collections/list-box-disabled-demo.tsx
index 1de0a513..263720e0 100644
--- a/components/docs/collections/list-box-disabled-demo.tsx
+++ b/components/docs/collections/list-box-disabled-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { ListBox } from 'ui'
+import { ListBox } from "ui"
 
 export default function ListBoxControlledDemo() {
   return (
@@ -20,30 +20,30 @@ export default function ListBoxControlledDemo() {
 const fruits = [
   {
     id: 1,
-    name: 'Apple'
+    name: "Apple"
   },
   {
     id: 2,
-    name: 'Banana'
+    name: "Banana"
   },
   {
     id: 3,
-    name: 'Orange'
+    name: "Orange"
   },
   {
     id: 4,
-    name: 'Strawberry'
+    name: "Strawberry"
   },
   {
     id: 5,
-    name: 'Grapes'
+    name: "Grapes"
   },
   {
     id: 6,
-    name: 'Mango'
+    name: "Mango"
   },
   {
     id: 7,
-    name: 'Pineapple'
+    name: "Pineapple"
   }
 ]
diff --git a/components/docs/collections/list-box-item-details-demo.tsx b/components/docs/collections/list-box-item-details-demo.tsx
index 0b16405e..0ccb217d 100644
--- a/components/docs/collections/list-box-item-details-demo.tsx
+++ b/components/docs/collections/list-box-item-details-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { ListBox } from 'ui'
+import { ListBox } from "ui"
 
 export default function ListBoxItemDetailsDemo() {
   return (
@@ -15,9 +15,9 @@ export default function ListBoxItemDetailsDemo() {
 }
 
 const roles = [
-  { id: 1, name: 'Admin', description: 'Has full access to all resources' },
-  { id: 2, name: 'Editor', description: 'Can edit content but has limited access to settings' },
-  { id: 3, name: 'Viewer', description: 'Can view content but cannot make changes' },
-  { id: 4, name: 'Contributor', description: 'Can contribute content for review' },
-  { id: 5, name: 'Guest', description: 'Limited access, mostly for viewing purposes' }
+  { id: 1, name: "Admin", description: "Has full access to all resources" },
+  { id: 2, name: "Editor", description: "Can edit content but has limited access to settings" },
+  { id: 3, name: "Viewer", description: "Can view content but cannot make changes" },
+  { id: 4, name: "Contributor", description: "Can contribute content for review" },
+  { id: 5, name: "Guest", description: "Limited access, mostly for viewing purposes" }
 ]
diff --git a/components/docs/collections/list-box-multiple-demo.tsx b/components/docs/collections/list-box-multiple-demo.tsx
index bc2f21e6..67a3cdbd 100644
--- a/components/docs/collections/list-box-multiple-demo.tsx
+++ b/components/docs/collections/list-box-multiple-demo.tsx
@@ -1,12 +1,12 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import type { Selection } from 'react-aria-components'
-import { Description, ListBox } from 'ui'
+import type { Selection } from "react-aria-components"
+import { Description, ListBox } from "ui"
 
 export default function ListBoxControlledDemo() {
-  const [selected, setSelected] = React.useState<Selection>(new Set(['2']))
+  const [selected, setSelected] = React.useState<Selection>(new Set(["2"]))
   return (
     <>
       <ListBox
@@ -25,7 +25,7 @@ export default function ListBoxControlledDemo() {
 
       {[...selected].length > 0 && (
         <Description className="mt-4 block">
-          Selected: {selected === 'all' ? 'All selected' : [...selected].join(', ')}
+          Selected: {selected === "all" ? "All selected" : [...selected].join(", ")}
         </Description>
       )}
     </>
@@ -35,30 +35,30 @@ export default function ListBoxControlledDemo() {
 const fruits = [
   {
     id: 1,
-    name: 'Apple'
+    name: "Apple"
   },
   {
     id: 2,
-    name: 'Banana'
+    name: "Banana"
   },
   {
     id: 3,
-    name: 'Orange'
+    name: "Orange"
   },
   {
     id: 4,
-    name: 'Strawberry'
+    name: "Strawberry"
   },
   {
     id: 5,
-    name: 'Grapes'
+    name: "Grapes"
   },
   {
     id: 6,
-    name: 'Mango'
+    name: "Mango"
   },
   {
     id: 7,
-    name: 'Pineapple'
+    name: "Pineapple"
   }
 ]
diff --git a/components/docs/collections/list-box-rearrange-demo.tsx b/components/docs/collections/list-box-rearrange-demo.tsx
index b4b33a3e..442afb3d 100644
--- a/components/docs/collections/list-box-rearrange-demo.tsx
+++ b/components/docs/collections/list-box-rearrange-demo.tsx
@@ -1,26 +1,26 @@
-'use client'
+"use client"
 
-import { useDragAndDrop } from 'react-aria-components'
-import { useListData } from 'react-stately'
-import { ListBox } from 'ui'
+import { useDragAndDrop } from "react-aria-components"
+import { useListData } from "react-stately"
+import { ListBox } from "ui"
 
 export default function ListBoxRearrangeDemo() {
   const list = useListData({
     initialItems: [
-      { id: '1', name: 'Nirvana' },
-      { id: '2', name: 'Radiohead' },
-      { id: '3', name: 'Foo Fighters' },
-      { id: '4', name: 'Arctic Monkeys' },
-      { id: '5', name: 'The Strokes' }
+      { id: "1", name: "Nirvana" },
+      { id: "2", name: "Radiohead" },
+      { id: "3", name: "Foo Fighters" },
+      { id: "4", name: "Arctic Monkeys" },
+      { id: "5", name: "The Strokes" }
     ]
   })
 
   const { dragAndDropHooks } = useDragAndDrop({
-    getItems: (keys) => [...keys].map((key) => ({ 'text/plain': list.getItem(key).name })),
+    getItems: (keys) => [...keys].map((key) => ({ "text/plain": list.getItem(key).name })),
     onReorder(e) {
-      if (e.target.dropPosition === 'before') {
+      if (e.target.dropPosition === "before") {
         list.moveBefore(e.target.key, e.keys)
-      } else if (e.target.dropPosition === 'after') {
+      } else if (e.target.dropPosition === "after") {
         list.moveAfter(e.target.key, e.keys)
       }
     }
diff --git a/components/docs/collections/list-box-section-demo.tsx b/components/docs/collections/list-box-section-demo.tsx
index a8427e1c..0ed806dc 100644
--- a/components/docs/collections/list-box-section-demo.tsx
+++ b/components/docs/collections/list-box-section-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { ListBox } from 'ui'
+import { ListBox } from "ui"
 
 export default function ListBoxSectionDemo() {
   return (
@@ -17,11 +17,11 @@ export default function ListBoxSectionDemo() {
 const bands = [
   {
     id: 1,
-    name: 'The Beatles',
+    name: "The Beatles",
     albums: [
       {
         id: 101,
-        name: 'Abbey Road'
+        name: "Abbey Road"
       },
       {
         id: 102,
@@ -29,201 +29,201 @@ const bands = [
       },
       {
         id: 103,
-        name: 'Revolver'
+        name: "Revolver"
       }
     ]
   },
   {
     id: 2,
-    name: 'Led Zeppelin',
+    name: "Led Zeppelin",
     albums: [
       {
         id: 201,
-        name: 'Led Zeppelin IV'
+        name: "Led Zeppelin IV"
       },
       {
         id: 202,
-        name: 'Physical Graffiti'
+        name: "Physical Graffiti"
       },
       {
         id: 203,
-        name: 'Houses of the Holy'
+        name: "Houses of the Holy"
       },
       {
         id: 204,
-        name: 'Led Zeppelin II'
+        name: "Led Zeppelin II"
       }
     ]
   },
   {
     id: 3,
-    name: 'Pink Floyd',
+    name: "Pink Floyd",
     albums: [
       {
         id: 301,
-        name: 'The Dark Side of the Moon'
+        name: "The Dark Side of the Moon"
       },
       {
         id: 302,
-        name: 'The Wall'
+        name: "The Wall"
       },
       {
         id: 303,
-        name: 'Wish You Were Here'
+        name: "Wish You Were Here"
       },
       {
         id: 304,
-        name: 'Animals'
+        name: "Animals"
       },
       {
         id: 305,
-        name: 'Meddle'
+        name: "Meddle"
       }
     ]
   },
   {
     id: 4,
-    name: 'Queen',
+    name: "Queen",
     albums: [
       {
         id: 401,
-        name: 'A Night at the Opera'
+        name: "A Night at the Opera"
       },
       {
         id: 402,
-        name: 'News of the World'
+        name: "News of the World"
       },
       {
         id: 403,
-        name: 'Sheer Heart Attack'
+        name: "Sheer Heart Attack"
       },
       {
         id: 404,
-        name: 'The Game'
+        name: "The Game"
       },
       {
         id: 405,
-        name: 'Jazz'
+        name: "Jazz"
       },
       {
         id: 406,
-        name: 'Queen II'
+        name: "Queen II"
       }
     ]
   },
   {
     id: 5,
-    name: 'The Rolling Stones',
+    name: "The Rolling Stones",
     albums: [
       {
         id: 501,
-        name: 'Let It Bleed'
+        name: "Let It Bleed"
       },
       {
         id: 502,
-        name: 'Sticky Fingers'
+        name: "Sticky Fingers"
       },
       {
         id: 503,
-        name: 'Exile on Main St.'
+        name: "Exile on Main St."
       },
       {
         id: 504,
-        name: 'Beggars Banquet'
+        name: "Beggars Banquet"
       },
       {
         id: 505,
-        name: 'Some Girls'
+        name: "Some Girls"
       },
       {
         id: 506,
-        name: 'Tattoo You'
+        name: "Tattoo You"
       }
     ]
   },
   {
     id: 6,
-    name: 'Nirvana',
+    name: "Nirvana",
     albums: [
       {
         id: 601,
-        name: 'Nevermind'
+        name: "Nevermind"
       },
       {
         id: 602,
-        name: 'In Utero'
+        name: "In Utero"
       },
       {
         id: 603,
-        name: 'Bleach'
+        name: "Bleach"
       }
     ]
   },
   {
     id: 7,
-    name: 'The Doors',
+    name: "The Doors",
     albums: [
       {
         id: 701,
-        name: 'The Doors'
+        name: "The Doors"
       },
       {
         id: 702,
-        name: 'L.A. Woman'
+        name: "L.A. Woman"
       },
       {
         id: 703,
-        name: 'Strange Days'
+        name: "Strange Days"
       },
       {
         id: 704,
-        name: 'Morrison Hotel'
+        name: "Morrison Hotel"
       }
     ]
   },
   {
     id: 8,
-    name: 'Radiohead',
+    name: "Radiohead",
     albums: [
       {
         id: 801,
-        name: 'OK Computer'
+        name: "OK Computer"
       },
       {
         id: 802,
-        name: 'Kid A'
+        name: "Kid A"
       },
       {
         id: 803,
-        name: 'The Bends'
+        name: "The Bends"
       },
       {
         id: 804,
-        name: 'In Rainbows'
+        name: "In Rainbows"
       }
     ]
   },
   {
     id: 9,
-    name: 'AC/DC',
+    name: "AC/DC",
     albums: [
       {
         id: 901,
-        name: 'Back in Black'
+        name: "Back in Black"
       },
       {
         id: 902,
-        name: 'Highway to Hell'
+        name: "Highway to Hell"
       },
       {
         id: 903,
-        name: 'Let There Be Rock'
+        name: "Let There Be Rock"
       }
     ]
   },
   {
     id: 10,
-    name: 'The Who',
+    name: "The Who",
     albums: [
       {
         id: 1001,
@@ -231,19 +231,19 @@ const bands = [
       },
       {
         id: 1002,
-        name: 'Tommy'
+        name: "Tommy"
       },
       {
         id: 1003,
-        name: 'Quadrophenia'
+        name: "Quadrophenia"
       },
       {
         id: 1004,
-        name: 'My Generation'
+        name: "My Generation"
       },
       {
         id: 1005,
-        name: 'The Who Sell Out'
+        name: "The Who Sell Out"
       }
     ]
   }
diff --git a/components/docs/collections/menu-basic-demo.tsx b/components/docs/collections/menu-basic-demo.tsx
index 2ce0d972..d95aa1cf 100644
--- a/components/docs/collections/menu-basic-demo.tsx
+++ b/components/docs/collections/menu-basic-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Menu } from 'ui'
+import { Menu } from "ui"
 
 export default function MenuBasicDemo() {
   return (
diff --git a/components/docs/collections/menu-collection-demo.tsx b/components/docs/collections/menu-collection-demo.tsx
index 99f8a164..b2e5e65c 100644
--- a/components/docs/collections/menu-collection-demo.tsx
+++ b/components/docs/collections/menu-collection-demo.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { Button, Menu } from 'ui'
+import { Button, Menu } from "ui"
 
 export default function MenuCollectionDemo() {
   return (
@@ -17,43 +17,43 @@ export default function MenuCollectionDemo() {
 
 const categories = [
   {
-    name: 'Technology',
-    slug: 'technology'
+    name: "Technology",
+    slug: "technology"
   },
   {
-    name: 'Health',
-    slug: 'health'
+    name: "Health",
+    slug: "health"
   },
   {
-    name: 'Business',
-    slug: 'business'
+    name: "Business",
+    slug: "business"
   },
   {
-    name: 'Travel',
-    slug: 'travel'
+    name: "Travel",
+    slug: "travel"
   },
   {
-    name: 'Education',
-    slug: 'education'
+    name: "Education",
+    slug: "education"
   },
   {
-    name: 'Entertainment',
-    slug: 'entertainment'
+    name: "Entertainment",
+    slug: "entertainment"
   },
   {
-    name: 'Sports',
-    slug: 'sports'
+    name: "Sports",
+    slug: "sports"
   },
   {
-    name: 'Fashion',
-    slug: 'fashion'
+    name: "Fashion",
+    slug: "fashion"
   },
   {
-    name: 'Food',
-    slug: 'food'
+    name: "Food",
+    slug: "food"
   },
   {
-    name: 'Science',
-    slug: 'science'
+    name: "Science",
+    slug: "science"
   }
 ]
diff --git a/components/docs/collections/menu-danger-demo.tsx b/components/docs/collections/menu-danger-demo.tsx
index 23ab58ae..f4b8612f 100644
--- a/components/docs/collections/menu-danger-demo.tsx
+++ b/components/docs/collections/menu-danger-demo.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { Menu } from 'ui'
+import { Menu } from "ui"
 
 export default function MenuDangerDemo() {
   return (
diff --git a/components/docs/collections/menu-disabled-demo.tsx b/components/docs/collections/menu-disabled-demo.tsx
index ed4e5986..257e805c 100644
--- a/components/docs/collections/menu-disabled-demo.tsx
+++ b/components/docs/collections/menu-disabled-demo.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { Menu } from 'ui'
+import { Menu } from "ui"
 
 export default function MenuDisabledDemo() {
   return (
diff --git a/components/docs/collections/menu-item-details-demo.tsx b/components/docs/collections/menu-item-details-demo.tsx
index b5190aed..9f65a52f 100644
--- a/components/docs/collections/menu-item-details-demo.tsx
+++ b/components/docs/collections/menu-item-details-demo.tsx
@@ -1,4 +1,4 @@
-import { Button, Menu } from 'ui'
+import { Button, Menu } from "ui"
 
 export default function MenuItemDetailsDemo() {
   return (
@@ -16,9 +16,9 @@ export default function MenuItemDetailsDemo() {
 }
 
 const roles = [
-  { id: 1, name: 'Admin', description: 'Has full access to all resources' },
-  { id: 2, name: 'Editor', description: 'Can edit content but has limited access to settings' },
-  { id: 3, name: 'Viewer', description: 'Can view content but cannot make changes' },
-  { id: 4, name: 'Contributor', description: 'Can contribute content for review' },
-  { id: 5, name: 'Guest', description: 'Limited access, mostly for viewing purposes' }
+  { id: 1, name: "Admin", description: "Has full access to all resources" },
+  { id: 2, name: "Editor", description: "Can edit content but has limited access to settings" },
+  { id: 3, name: "Viewer", description: "Can view content but cannot make changes" },
+  { id: 4, name: "Contributor", description: "Can contribute content for review" },
+  { id: 5, name: "Guest", description: "Limited access, mostly for viewing purposes" }
 ]
diff --git a/components/docs/collections/menu-respect-screen-demo.tsx b/components/docs/collections/menu-respect-screen-demo.tsx
index cfec1afa..8caef087 100644
--- a/components/docs/collections/menu-respect-screen-demo.tsx
+++ b/components/docs/collections/menu-respect-screen-demo.tsx
@@ -1,13 +1,13 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { buttonStyles, Menu } from 'ui'
+import { buttonStyles, Menu } from "ui"
 
 export default function MenuRespectScreenDemo() {
   return (
     <Menu respectScreen={false}>
-      <Menu.Trigger className={buttonStyles({ appearance: 'outline' })}>Open</Menu.Trigger>
+      <Menu.Trigger className={buttonStyles({ appearance: "outline" })}>Open</Menu.Trigger>
       <Menu.Content placement="bottom" className="min-w-48">
         <Menu.Item>Dashboard</Menu.Item>
         <Menu.Item>Reports</Menu.Item>
diff --git a/components/docs/collections/menu-section-demo.tsx b/components/docs/collections/menu-section-demo.tsx
index ea5db11f..4cd0d8a8 100644
--- a/components/docs/collections/menu-section-demo.tsx
+++ b/components/docs/collections/menu-section-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Menu } from 'ui'
+import { Menu } from "ui"
 
 export default function MenuSectionDemo() {
   return (
@@ -20,177 +20,177 @@ export default function MenuSectionDemo() {
 const cities = [
   {
     id: 1,
-    name: 'New York City',
+    name: "New York City",
     landmarks: [
       {
         id: 101,
-        name: 'Statue of Liberty'
+        name: "Statue of Liberty"
       },
       {
         id: 102,
-        name: 'Central Park'
+        name: "Central Park"
       },
       {
         id: 103,
-        name: 'Empire State Building'
+        name: "Empire State Building"
       },
       {
         id: 104,
-        name: 'Times Square'
+        name: "Times Square"
       }
     ]
   },
   {
     id: 2,
-    name: 'Paris',
+    name: "Paris",
     landmarks: [
       {
         id: 201,
-        name: 'Eiffel Tower'
+        name: "Eiffel Tower"
       },
       {
         id: 202,
-        name: 'Louvre Museum'
+        name: "Louvre Museum"
       },
       {
         id: 203,
-        name: 'Notre-Dame Cathedral'
+        name: "Notre-Dame Cathedral"
       },
       {
         id: 204,
-        name: 'Champs-Élysées'
+        name: "Champs-Élysées"
       }
     ]
   },
   {
     id: 3,
-    name: 'Tokyo',
+    name: "Tokyo",
     landmarks: [
       {
         id: 301,
-        name: 'Tokyo Tower'
+        name: "Tokyo Tower"
       },
       {
         id: 302,
-        name: 'Shibuya Crossing'
+        name: "Shibuya Crossing"
       },
       {
         id: 303,
-        name: 'Senso-ji Temple'
+        name: "Senso-ji Temple"
       },
       {
         id: 304,
-        name: 'Meiji Shrine'
+        name: "Meiji Shrine"
       },
       {
         id: 305,
-        name: 'Tokyo Skytree'
+        name: "Tokyo Skytree"
       }
     ]
   },
   {
     id: 4,
-    name: 'London',
+    name: "London",
     landmarks: [
       {
         id: 401,
-        name: 'Big Ben'
+        name: "Big Ben"
       },
       {
         id: 402,
-        name: 'Tower of London'
+        name: "Tower of London"
       },
       {
         id: 403,
-        name: 'Buckingham Palace'
+        name: "Buckingham Palace"
       },
       {
         id: 404,
-        name: 'London Eye'
+        name: "London Eye"
       },
       {
         id: 405,
-        name: 'Westminster Abbey'
+        name: "Westminster Abbey"
       }
     ]
   },
   {
     id: 5,
-    name: 'Rome',
+    name: "Rome",
     landmarks: [
       {
         id: 501,
-        name: 'Colosseum'
+        name: "Colosseum"
       },
       {
         id: 502,
-        name: 'Vatican City'
+        name: "Vatican City"
       },
       {
         id: 503,
-        name: 'Trevi Fountain'
+        name: "Trevi Fountain"
       },
       {
         id: 504,
-        name: 'Pantheon'
+        name: "Pantheon"
       }
     ]
   },
   {
     id: 6,
-    name: 'Sydney',
+    name: "Sydney",
     landmarks: [
       {
         id: 601,
-        name: 'Sydney Opera House'
+        name: "Sydney Opera House"
       },
       {
         id: 602,
-        name: 'Sydney Harbour Bridge'
+        name: "Sydney Harbour Bridge"
       },
       {
         id: 603,
-        name: 'Bondi Beach'
+        name: "Bondi Beach"
       },
       {
         id: 604,
-        name: 'Royal Botanic Garden'
+        name: "Royal Botanic Garden"
       }
     ]
   },
   {
     id: 7,
-    name: 'Dubai',
+    name: "Dubai",
     landmarks: [
       {
         id: 701,
-        name: 'Burj Khalifa'
+        name: "Burj Khalifa"
       },
       {
         id: 702,
-        name: 'Palm Jumeirah'
+        name: "Palm Jumeirah"
       },
       {
         id: 703,
-        name: 'Dubai Mall'
+        name: "Dubai Mall"
       },
       {
         id: 704,
-        name: 'Burj Al Arab'
+        name: "Burj Al Arab"
       }
     ]
   },
   {
     id: 8,
-    name: 'Moscow',
+    name: "Moscow",
     landmarks: [
       {
         id: 801,
-        name: 'Red Square'
+        name: "Red Square"
       },
       {
         id: 802,
-        name: 'Kremlin'
+        name: "Kremlin"
       },
       {
         id: 803,
@@ -198,47 +198,47 @@ const cities = [
       },
       {
         id: 804,
-        name: 'Bolshoi Theatre'
+        name: "Bolshoi Theatre"
       }
     ]
   },
   {
     id: 9,
-    name: 'Cairo',
+    name: "Cairo",
     landmarks: [
       {
         id: 901,
-        name: 'Pyramids of Giza'
+        name: "Pyramids of Giza"
       },
       {
         id: 902,
-        name: 'Great Sphinx of Giza'
+        name: "Great Sphinx of Giza"
       },
       {
         id: 903,
-        name: 'Egyptian Museum'
+        name: "Egyptian Museum"
       }
     ]
   },
   {
     id: 10,
-    name: 'Rio de Janeiro',
+    name: "Rio de Janeiro",
     landmarks: [
       {
         id: 1001,
-        name: 'Christ the Redeemer'
+        name: "Christ the Redeemer"
       },
       {
         id: 1002,
-        name: 'Sugarloaf Mountain'
+        name: "Sugarloaf Mountain"
       },
       {
         id: 1003,
-        name: 'Copacabana Beach'
+        name: "Copacabana Beach"
       },
       {
         id: 1004,
-        name: 'Maracanã Stadium'
+        name: "Maracanã Stadium"
       }
     ]
   }
diff --git a/components/docs/collections/menu-sub-demo.tsx b/components/docs/collections/menu-sub-demo.tsx
index c98bfce5..d4bfb478 100644
--- a/components/docs/collections/menu-sub-demo.tsx
+++ b/components/docs/collections/menu-sub-demo.tsx
@@ -1,13 +1,13 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { buttonStyles, Menu } from 'ui'
+import { buttonStyles, Menu } from "ui"
 
 export default function MenuSubDemo() {
   return (
     <Menu>
-      <Menu.Trigger className={buttonStyles({ appearance: 'outline' })}>Open</Menu.Trigger>
+      <Menu.Trigger className={buttonStyles({ appearance: "outline" })}>Open</Menu.Trigger>
       <Menu.Content placement="bottom" className="sm:min-w-48">
         <Menu.Item>Dashboard</Menu.Item>
         <Menu.Item>Reports</Menu.Item>
diff --git a/components/docs/collections/menu-with-arrow-demo.tsx b/components/docs/collections/menu-with-arrow-demo.tsx
index 1166a9b3..d0bf574a 100644
--- a/components/docs/collections/menu-with-arrow-demo.tsx
+++ b/components/docs/collections/menu-with-arrow-demo.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { IconHashtag, IconHeadphones, IconLogout, IconPlus, IconSettings } from 'justd-icons'
-import { Avatar, Menu } from 'ui'
+import { IconHashtag, IconHeadphones, IconLogout, IconPlus, IconSettings } from "justd-icons"
+import { Avatar, Menu } from "ui"
 
 export default function MenuWithArrowDemo() {
   return (
diff --git a/components/docs/collections/menu-with-icon-demo.tsx b/components/docs/collections/menu-with-icon-demo.tsx
index fd5f2bce..a2c1c697 100644
--- a/components/docs/collections/menu-with-icon-demo.tsx
+++ b/components/docs/collections/menu-with-icon-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
 import {
   IconCommandRegular,
@@ -11,9 +11,9 @@ import {
   IconMoon,
   IconSettings,
   IconSun
-} from 'justd-icons'
-import { useTheme } from 'next-themes'
-import { Avatar, Menu } from 'ui'
+} from "justd-icons"
+import { useTheme } from "next-themes"
+import { Avatar, Menu } from "ui"
 
 export default function MenuWithIconDemo() {
   const { resolvedTheme, setTheme } = useTheme()
@@ -45,9 +45,9 @@ export default function MenuWithIconDemo() {
         </Menu.Item>
         <Menu.Submenu>
           <Menu.Item>
-            {resolvedTheme === 'light' ? (
+            {resolvedTheme === "light" ? (
               <IconSun />
-            ) : resolvedTheme === 'dark' ? (
+            ) : resolvedTheme === "dark" ? (
               <IconMoon />
             ) : (
               <IconDeviceDesktop />
@@ -55,13 +55,13 @@ export default function MenuWithIconDemo() {
             Switch theme
           </Menu.Item>
           <Menu.Content>
-            <Menu.Item onAction={() => setTheme('system')}>
+            <Menu.Item onAction={() => setTheme("system")}>
               <IconDeviceDesktop /> System
             </Menu.Item>
-            <Menu.Item onAction={() => setTheme('dark')}>
+            <Menu.Item onAction={() => setTheme("dark")}>
               <IconMoon /> Dark
             </Menu.Item>
-            <Menu.Item onAction={() => setTheme('light')}>
+            <Menu.Item onAction={() => setTheme("light")}>
               <IconSun /> Light
             </Menu.Item>
           </Menu.Content>
diff --git a/components/docs/collections/multiple-menu-demo.tsx b/components/docs/collections/multiple-menu-demo.tsx
index 8f16541e..19c575d3 100644
--- a/components/docs/collections/multiple-menu-demo.tsx
+++ b/components/docs/collections/multiple-menu-demo.tsx
@@ -1,12 +1,12 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { type Selection } from '@react-types/shared'
-import { Button, Menu } from 'ui'
+import { type Selection } from "@react-types/shared"
+import { Button, Menu } from "ui"
 
 export default function MultipleMenuDemo() {
-  const [selected, setSelected] = React.useState<Selection>(new Set(['autoPlay']))
+  const [selected, setSelected] = React.useState<Selection>(new Set(["autoPlay"]))
   return (
     <Menu>
       <Button appearance="outline">Open</Button>
@@ -30,31 +30,31 @@ export default function MultipleMenuDemo() {
 
 const items = [
   {
-    name: 'Auto-Play Videos',
-    slug: 'autoPlay'
+    name: "Auto-Play Videos",
+    slug: "autoPlay"
   },
   {
-    name: 'High-Quality Streaming',
-    slug: 'highQuality'
+    name: "High-Quality Streaming",
+    slug: "highQuality"
   },
   {
-    name: 'Exclusive Releases',
-    slug: 'exclusiveContent'
+    name: "Exclusive Releases",
+    slug: "exclusiveContent"
   },
   {
-    name: 'Default Subtitles',
-    slug: 'subtitles'
+    name: "Default Subtitles",
+    slug: "subtitles"
   },
   {
-    name: 'Personalized Recommendations',
-    slug: 'recommendations'
+    name: "Personalized Recommendations",
+    slug: "recommendations"
   },
   {
-    name: 'Background Play',
-    slug: 'backgroundPlay'
+    name: "Background Play",
+    slug: "backgroundPlay"
   },
   {
-    name: 'Allow Downloads',
-    slug: 'download'
+    name: "Allow Downloads",
+    slug: "download"
   }
 ]
diff --git a/components/docs/collections/single-menu-demo.tsx b/components/docs/collections/single-menu-demo.tsx
index 39bf8da2..1862d073 100644
--- a/components/docs/collections/single-menu-demo.tsx
+++ b/components/docs/collections/single-menu-demo.tsx
@@ -1,38 +1,38 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import type { Placement } from '@react-types/overlays'
-import type { Selection } from 'react-aria-components'
-import { Button, Menu } from 'ui'
+import type { Placement } from "@react-types/overlays"
+import type { Selection } from "react-aria-components"
+import { Button, Menu } from "ui"
 
 export const placements = [
-  'bottom',
-  'bottom left',
-  'bottom right',
-  'bottom start',
-  'bottom end',
-  'top',
-  'top left',
-  'top right',
-  'top start',
-  'top end',
-  'left',
-  'left top',
-  'left bottom',
-  'start',
-  'start top',
-  'start bottom',
-  'right',
-  'right top',
-  'right bottom',
-  'end',
-  'end top',
-  'end bottom'
+  "bottom",
+  "bottom left",
+  "bottom right",
+  "bottom start",
+  "bottom end",
+  "top",
+  "top left",
+  "top right",
+  "top start",
+  "top end",
+  "left",
+  "left top",
+  "left bottom",
+  "start",
+  "start top",
+  "start bottom",
+  "right",
+  "right top",
+  "right bottom",
+  "end",
+  "end top",
+  "end bottom"
 ].map((item, i) => ({ id: i, name: item }))
 
 export default function SingleMenuDemo() {
-  const [selected, setSelected] = React.useState<Selection>(new Set(['bottom']))
+  const [selected, setSelected] = React.useState<Selection>(new Set(["bottom"]))
   return (
     <Menu>
       <Button appearance="outline">Placement</Button>
diff --git a/components/docs/collections/table-bulk-demo.tsx b/components/docs/collections/table-bulk-demo.tsx
index 67598385..74d09b38 100644
--- a/components/docs/collections/table-bulk-demo.tsx
+++ b/components/docs/collections/table-bulk-demo.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import type { Selection } from 'react-aria-components'
-import { Card, Description, Table } from 'ui'
+import type { Selection } from "react-aria-components"
+import { Card, Description, Table } from "ui"
 
 export default function TableBulkDemo() {
   const [selectedKeys, setSelectedKeys] = React.useState<Selection>(new Set())
@@ -39,10 +39,10 @@ export default function TableBulkDemo() {
       <Description className="block mt-2 [&>strong]:text-fg text-muted-fg">
         {Array.from(selectedKeys).length > 0 ? (
           <>
-            You have selected: <strong>{Array.from(selectedKeys).join(', ')}</strong>
+            You have selected: <strong>{Array.from(selectedKeys).join(", ")}</strong>
           </>
         ) : (
-          'You have not selected anything.'
+          "You have not selected anything."
         )}
       </Description>
     </>
@@ -51,46 +51,46 @@ export default function TableBulkDemo() {
 
 export const books = [
   {
-    id: '1',
-    title: 'To Kill a Mockingbird',
-    author: 'Harper Lee',
-    genre: 'Fiction',
+    id: "1",
+    title: "To Kill a Mockingbird",
+    author: "Harper Lee",
+    genre: "Fiction",
     publishedYear: 1960
   },
-  { id: '2', title: '1984', author: 'George Orwell', genre: 'Dystopian', publishedYear: 1949 },
+  { id: "2", title: "1984", author: "George Orwell", genre: "Dystopian", publishedYear: 1949 },
   {
-    id: '3',
-    title: 'The Great Gatsby',
-    author: 'F. Scott Fitzgerald',
-    genre: 'Fiction',
+    id: "3",
+    title: "The Great Gatsby",
+    author: "F. Scott Fitzgerald",
+    genre: "Fiction",
     publishedYear: 1925
   },
   {
-    id: '4',
-    title: 'The Catcher in the Rye',
-    author: 'J.D. Salinger',
-    genre: 'Fiction',
+    id: "4",
+    title: "The Catcher in the Rye",
+    author: "J.D. Salinger",
+    genre: "Fiction",
     publishedYear: 1951
   },
   {
-    id: '5',
-    title: 'Pride and Prejudice',
-    author: 'Jane Austen',
-    genre: 'Romance',
+    id: "5",
+    title: "Pride and Prejudice",
+    author: "Jane Austen",
+    genre: "Romance",
     publishedYear: 1813
   },
   {
-    id: '6',
-    title: 'The Lord of the Rings',
-    author: 'J.R.R. Tolkien',
-    genre: 'Fantasy',
+    id: "6",
+    title: "The Lord of the Rings",
+    author: "J.R.R. Tolkien",
+    genre: "Fantasy",
     publishedYear: 1954
   },
   {
-    id: '7',
+    id: "7",
     title: "Harry Potter and the Sorcerer's Stone",
-    author: 'J.K. Rowling',
-    genre: 'Fantasy',
+    author: "J.K. Rowling",
+    genre: "Fantasy",
     publishedYear: 1997
   }
 ]
diff --git a/components/docs/collections/table-demo.tsx b/components/docs/collections/table-demo.tsx
index 61bb24d1..f9834702 100644
--- a/components/docs/collections/table-demo.tsx
+++ b/components/docs/collections/table-demo.tsx
@@ -1,11 +1,11 @@
-'use client'
+"use client"
 
-import { NumberFormatter } from '@internationalized/number'
-import { IconDotsVertical } from 'justd-icons'
-import { Card, Menu, Table } from 'ui'
+import { NumberFormatter } from "@internationalized/number"
+import { IconDotsVertical } from "justd-icons"
+import { Card, Menu, Table } from "ui"
 
 export default function TableDemo() {
-  const formatter = new NumberFormatter('en-US', { style: 'currency', currency: 'USD' })
+  const formatter = new NumberFormatter("en-US", { style: "currency", currency: "USD" })
 
   const priceFormat = (price: number) => formatter.format(price)
   return (
@@ -51,32 +51,32 @@ export default function TableDemo() {
 }
 
 export const products = [
-  { id: '1', name: 'iPhone 13', category: 'Electronics', price: 799, brand: 'Apple', stock: 150 },
+  { id: "1", name: "iPhone 13", category: "Electronics", price: 799, brand: "Apple", stock: 150 },
   {
-    id: '2',
-    name: 'Galaxy S21',
-    category: 'Electronics',
+    id: "2",
+    name: "Galaxy S21",
+    category: "Electronics",
     price: 699,
-    brand: 'Samsung',
+    brand: "Samsung",
     stock: 200
   },
-  { id: '3', name: 'MacBook Pro', category: 'Computers', price: 1299, brand: 'Apple', stock: 80 },
-  { id: '4', name: 'Dell XPS 13', category: 'Computers', price: 999, brand: 'Dell', stock: 50 },
+  { id: "3", name: "MacBook Pro", category: "Computers", price: 1299, brand: "Apple", stock: 80 },
+  { id: "4", name: "Dell XPS 13", category: "Computers", price: 999, brand: "Dell", stock: 50 },
   {
-    id: '5',
-    name: 'Sony WH-1000XM4',
-    category: 'Headphones',
+    id: "5",
+    name: "Sony WH-1000XM4",
+    category: "Headphones",
     price: 349,
-    brand: 'Sony',
+    brand: "Sony",
     stock: 120
   },
-  { id: '6', name: 'AirPods Pro', category: 'Headphones', price: 249, brand: 'Apple', stock: 180 },
+  { id: "6", name: "AirPods Pro", category: "Headphones", price: 249, brand: "Apple", stock: 180 },
   {
-    id: '7',
-    name: 'Fitbit Charge 5',
-    category: 'Wearables',
+    id: "7",
+    name: "Fitbit Charge 5",
+    category: "Wearables",
     price: 179,
-    brand: 'Fitbit',
+    brand: "Fitbit",
     stock: 75
   }
 ]
diff --git a/components/docs/collections/table-drag-demo.tsx b/components/docs/collections/table-drag-demo.tsx
index abccce72..ce4f91ff 100644
--- a/components/docs/collections/table-drag-demo.tsx
+++ b/components/docs/collections/table-drag-demo.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import { IconStarFill } from 'justd-icons'
-import { useDragAndDrop } from 'react-aria-components'
-import { useListData } from 'react-stately'
-import { Card, Table } from 'ui'
+import { IconStarFill } from "justd-icons"
+import { useDragAndDrop } from "react-aria-components"
+import { useListData } from "react-stately"
+import { Card, Table } from "ui"
 
 export default function TableDragDemo() {
   const list = useListData({
@@ -13,12 +13,12 @@ export default function TableDragDemo() {
   const { dragAndDropHooks } = useDragAndDrop({
     getItems: (keys) =>
       [...keys].map((key) => ({
-        'text/plain': list.getItem(key).name
+        "text/plain": list.getItem(key).name
       })),
     onReorder(e) {
-      if (e.target.dropPosition === 'before') {
+      if (e.target.dropPosition === "before") {
         list.moveBefore(e.target.key, e.keys)
-      } else if (e.target.dropPosition === 'after') {
+      } else if (e.target.dropPosition === "after") {
         list.moveAfter(e.target.key, e.keys)
       }
     }
@@ -55,59 +55,59 @@ export default function TableDragDemo() {
 
 const movies = [
   {
-    id: '1',
-    name: 'The Matrix',
-    genre: 'Sci-Fi',
+    id: "1",
+    name: "The Matrix",
+    genre: "Sci-Fi",
     releaseYear: 1999,
-    director: 'Wachowskis',
+    director: "Wachowskis",
     rating: 8.7
   },
   {
-    id: '2',
-    name: 'Inception',
-    genre: 'Sci-Fi',
+    id: "2",
+    name: "Inception",
+    genre: "Sci-Fi",
     releaseYear: 2010,
-    director: 'Christopher Nolan',
+    director: "Christopher Nolan",
     rating: 8.8
   },
   {
-    id: '3',
-    name: 'The Godfather',
-    genre: 'Crime',
+    id: "3",
+    name: "The Godfather",
+    genre: "Crime",
     releaseYear: 1972,
-    director: 'Francis Ford Coppola',
+    director: "Francis Ford Coppola",
     rating: 9.2
   },
   {
-    id: '4',
-    name: 'Pulp Fiction',
-    genre: 'Crime',
+    id: "4",
+    name: "Pulp Fiction",
+    genre: "Crime",
     releaseYear: 1994,
-    director: 'Quentin Tarantino',
+    director: "Quentin Tarantino",
     rating: 8.9
   },
   {
-    id: '5',
-    name: 'The Dark Knight',
-    genre: 'Action',
+    id: "5",
+    name: "The Dark Knight",
+    genre: "Action",
     releaseYear: 2008,
-    director: 'Christopher Nolan',
+    director: "Christopher Nolan",
     rating: 9.0
   },
   {
-    id: '6',
-    name: 'Fight Club',
-    genre: 'Drama',
+    id: "6",
+    name: "Fight Club",
+    genre: "Drama",
     releaseYear: 1999,
-    director: 'David Fincher',
+    director: "David Fincher",
     rating: 8.8
   },
   {
-    id: '7',
-    name: 'Forrest Gump',
-    genre: 'Drama',
+    id: "7",
+    name: "Forrest Gump",
+    genre: "Drama",
     releaseYear: 1994,
-    director: 'Robert Zemeckis',
+    director: "Robert Zemeckis",
     rating: 8.8
   }
 ]
diff --git a/components/docs/collections/table-sorting-demo.tsx b/components/docs/collections/table-sorting-demo.tsx
index a8b8c949..a0b85c55 100644
--- a/components/docs/collections/table-sorting-demo.tsx
+++ b/components/docs/collections/table-sorting-demo.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import { useAsyncList } from '@react-stately/data'
-import { IconLoader } from 'justd-icons'
-import { Card, Table } from 'ui'
+import { useAsyncList } from "@react-stately/data"
+import { IconLoader } from "justd-icons"
+import { Card, Table } from "ui"
 
 interface Character {
   title: string
@@ -30,7 +30,7 @@ export default function TableSortingDemo() {
           // @ts-ignore
           const second = b[sortDescriptor.column]
           let cmp = (parseInt(first) || first) < (parseInt(second) || second) ? -1 : 1
-          if (sortDescriptor.direction === 'descending') {
+          if (sortDescriptor.direction === "descending") {
             cmp *= -1
           }
           return cmp
diff --git a/components/docs/collections/tag-group-controlled-demo.tsx b/components/docs/collections/tag-group-controlled-demo.tsx
index bbfa8862..20d3b6ae 100644
--- a/components/docs/collections/tag-group-controlled-demo.tsx
+++ b/components/docs/collections/tag-group-controlled-demo.tsx
@@ -1,13 +1,13 @@
-import React from 'react'
+import React from "react"
 
-import type { Selection } from 'react-aria-components'
-import { Description, Tag } from 'ui'
+import type { Selection } from "react-aria-components"
+import { Description, Tag } from "ui"
 
 const fruitList = [
-  { id: '1', name: 'Apple', available: false },
-  { id: '2', name: 'Banana', available: true },
-  { id: '3', name: 'Cherry', available: true },
-  { id: '4', name: 'Date', available: false }
+  { id: "1", name: "Apple", available: false },
+  { id: "2", name: "Banana", available: true },
+  { id: "3", name: "Cherry", available: true },
+  { id: "4", name: "Date", available: false }
 ]
 
 export default function TagGroupControlledDemo() {
@@ -19,7 +19,7 @@ export default function TagGroupControlledDemo() {
       </Tag.Group>
 
       <Description className="mt-2 block [&>strong]:text-fg text-muted-fg">
-        You have selected: <strong>{Array.from(selected).join(', ')}</strong>
+        You have selected: <strong>{Array.from(selected).join(", ")}</strong>
       </Description>
     </div>
   )
diff --git a/components/docs/collections/tag-group-demo.tsx b/components/docs/collections/tag-group-demo.tsx
index 29097bdd..11015404 100644
--- a/components/docs/collections/tag-group-demo.tsx
+++ b/components/docs/collections/tag-group-demo.tsx
@@ -1,12 +1,12 @@
-'use client'
+"use client"
 
-import { Tag } from 'ui'
+import { Tag } from "ui"
 
 export const androidBrands = [
-  { id: '1', name: 'Samsung', available: false },
-  { id: '2', name: 'OnePlus', available: true },
-  { id: '3', name: 'Google', available: true },
-  { id: '4', name: 'Xiaomi', available: false }
+  { id: "1", name: "Samsung", available: false },
+  { id: "2", name: "OnePlus", available: true },
+  { id: "3", name: "Google", available: true },
+  { id: "4", name: "Xiaomi", available: false }
 ]
 
 export default function TagGroupDemo() {
diff --git a/components/docs/collections/tag-group-disabled-demo.tsx b/components/docs/collections/tag-group-disabled-demo.tsx
index 1d2ec955..2273abb5 100644
--- a/components/docs/collections/tag-group-disabled-demo.tsx
+++ b/components/docs/collections/tag-group-disabled-demo.tsx
@@ -1,5 +1,5 @@
-import { androidBrands } from '@/components/docs/collections/tag-group-demo'
-import { Tag } from 'ui'
+import { androidBrands } from "@/components/docs/collections/tag-group-demo"
+import { Tag } from "ui"
 
 export default function TagGroupDisabledDemo() {
   return (
diff --git a/components/docs/collections/tag-group-href-demo.tsx b/components/docs/collections/tag-group-href-demo.tsx
index 0ff16cf6..f0c6e89b 100644
--- a/components/docs/collections/tag-group-href-demo.tsx
+++ b/components/docs/collections/tag-group-href-demo.tsx
@@ -1,11 +1,11 @@
-'use client'
+"use client"
 
-import { Tag } from 'ui'
+import { Tag } from "ui"
 
 const articles = [
-  { name: 'React Tutorial', url: '#' },
-  { name: 'TypeScript Handbook', url: '#' },
-  { name: 'JavaScript Guide', url: '#' }
+  { name: "React Tutorial", url: "#" },
+  { name: "TypeScript Handbook", url: "#" },
+  { name: "JavaScript Guide", url: "#" }
 ]
 
 export default function TagGroupControlledDemo() {
diff --git a/components/docs/collections/tag-group-intent-demo.tsx b/components/docs/collections/tag-group-intent-demo.tsx
index 293b581f..2626bf07 100644
--- a/components/docs/collections/tag-group-intent-demo.tsx
+++ b/components/docs/collections/tag-group-intent-demo.tsx
@@ -1,15 +1,15 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { useListData } from 'react-stately'
-import { Tag } from 'ui'
+import { useListData } from "react-stately"
+import { Tag } from "ui"
 
 const shoes = [
-  { id: '1', name: 'Nike', available: true },
-  { id: '2', name: 'Adidas', available: false },
-  { id: '3', name: 'Puma', available: true },
-  { id: '4', name: 'Reebok', available: true }
+  { id: "1", name: "Nike", available: true },
+  { id: "2", name: "Adidas", available: false },
+  { id: "3", name: "Puma", available: true },
+  { id: "4", name: "Reebok", available: true }
 ]
 
 export default function TagGroupIntentDemo() {
diff --git a/components/docs/collections/tag-group-shape-demo.tsx b/components/docs/collections/tag-group-shape-demo.tsx
index c513db1f..b1cac5a6 100644
--- a/components/docs/collections/tag-group-shape-demo.tsx
+++ b/components/docs/collections/tag-group-shape-demo.tsx
@@ -1,13 +1,13 @@
-'use client'
+"use client"
 
-import { Tag } from 'ui'
+import { Tag } from "ui"
 
 const carModels = [
-  { id: '1', name: 'Tesla Model S', available: true },
-  { id: '2', name: 'Ford Mustang', available: false },
-  { id: '3', name: 'Chevrolet Camaro', available: true },
-  { id: '4', name: 'BMW M3', available: false },
-  { id: '5', name: 'Audi R8', available: true }
+  { id: "1", name: "Tesla Model S", available: true },
+  { id: "2", name: "Ford Mustang", available: false },
+  { id: "3", name: "Chevrolet Camaro", available: true },
+  { id: "4", name: "BMW M3", available: false },
+  { id: "5", name: "Audi R8", available: true }
 ]
 
 export default function TagGroupIntentDemo() {
diff --git a/components/docs/collections/tag-group-with-remove-demo.tsx b/components/docs/collections/tag-group-with-remove-demo.tsx
index 27140456..d136648b 100644
--- a/components/docs/collections/tag-group-with-remove-demo.tsx
+++ b/components/docs/collections/tag-group-with-remove-demo.tsx
@@ -1,21 +1,21 @@
-'use client'
+"use client"
 
-import { useListData } from 'react-stately'
-import { Tag } from 'ui'
+import { useListData } from "react-stately"
+import { Tag } from "ui"
 
 export default function TagGroupWithRemoveDemo() {
   const list = useListData({
     initialItems: [
-      { id: '1', name: 'Ferrari', available: true },
-      { id: '2', name: 'Lamborghini', available: false },
-      { id: '3', name: 'Porsche', available: true },
-      { id: '4', name: 'Bugatti', available: false },
-      { id: '5', name: 'McLaren', available: true },
-      { id: '6', name: 'Aston Martin', available: true },
-      { id: '7', name: 'Bentley', available: false },
-      { id: '8', name: 'Rolls-Royce', available: true },
-      { id: '9', name: 'Maserati', available: false },
-      { id: '10', name: 'Jaguar', available: true }
+      { id: "1", name: "Ferrari", available: true },
+      { id: "2", name: "Lamborghini", available: false },
+      { id: "3", name: "Porsche", available: true },
+      { id: "4", name: "Bugatti", available: false },
+      { id: "5", name: "McLaren", available: true },
+      { id: "6", name: "Aston Martin", available: true },
+      { id: "7", name: "Bentley", available: false },
+      { id: "8", name: "Rolls-Royce", available: true },
+      { id: "9", name: "Maserati", available: false },
+      { id: "10", name: "Jaguar", available: true }
     ]
   })
 
diff --git a/components/docs/colors/color-area-channel-demo.tsx b/components/docs/colors/color-area-channel-demo.tsx
index 8011d7b2..6b61c79f 100644
--- a/components/docs/colors/color-area-channel-demo.tsx
+++ b/components/docs/colors/color-area-channel-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { ColorArea, ColorThumb } from 'ui'
+import { ColorArea, ColorThumb } from "ui"
 
 export default function ColorAreaChannelDemo() {
   return (
diff --git a/components/docs/colors/color-area-controlled-demo.tsx b/components/docs/colors/color-area-controlled-demo.tsx
index acd32a76..90207894 100644
--- a/components/docs/colors/color-area-controlled-demo.tsx
+++ b/components/docs/colors/color-area-controlled-demo.tsx
@@ -1,13 +1,13 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { ControlledValues } from '@/components/docs/colors/controlled-values'
-import { parseColor } from '@react-stately/color'
-import { ColorArea, ColorThumb } from 'ui'
+import { ControlledValues } from "@/components/docs/colors/controlled-values"
+import { parseColor } from "@react-stately/color"
+import { ColorArea, ColorThumb } from "ui"
 
 export default function ColorAreaControlledDemo() {
-  const [value, setValue] = React.useState(parseColor('hsl(0, 100%, 50%)'))
+  const [value, setValue] = React.useState(parseColor("hsl(0, 100%, 50%)"))
 
   return (
     <div className="flex flex-col lg:flex-row gap-2 lg:gap-4">
diff --git a/components/docs/colors/color-area-demo.tsx b/components/docs/colors/color-area-demo.tsx
index 68f5efca..7329f92d 100644
--- a/components/docs/colors/color-area-demo.tsx
+++ b/components/docs/colors/color-area-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { ColorArea, ColorThumb as Thumb } from 'ui'
+import { ColorArea, ColorThumb as Thumb } from "ui"
 
 export default function ColorAreaDemo() {
   return (
diff --git a/components/docs/colors/color-area-disabled-demo.tsx b/components/docs/colors/color-area-disabled-demo.tsx
index 3f0af325..64f9abb8 100644
--- a/components/docs/colors/color-area-disabled-demo.tsx
+++ b/components/docs/colors/color-area-disabled-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { ColorArea, ColorThumb as Thumb } from 'ui'
+import { ColorArea, ColorThumb as Thumb } from "ui"
 
 export default function ColorAreaDisabledDemo() {
   return (
diff --git a/components/docs/colors/color-area-space-demo.tsx b/components/docs/colors/color-area-space-demo.tsx
index 041cfa9d..ef99fef2 100644
--- a/components/docs/colors/color-area-space-demo.tsx
+++ b/components/docs/colors/color-area-space-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { ColorArea, ColorThumb } from 'ui'
+import { ColorArea, ColorThumb } from "ui"
 
 export default function ColorAreaSpaceDemo() {
   return (
diff --git a/components/docs/colors/color-field-controlled-demo.tsx b/components/docs/colors/color-field-controlled-demo.tsx
index 401f9247..a6c34e12 100644
--- a/components/docs/colors/color-field-controlled-demo.tsx
+++ b/components/docs/colors/color-field-controlled-demo.tsx
@@ -1,13 +1,13 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { ControlledValues } from '@/components/docs/colors/controlled-values'
-import { type Color, parseColor } from '@react-stately/color'
-import { ColorField } from 'ui'
+import { ControlledValues } from "@/components/docs/colors/controlled-values"
+import { type Color, parseColor } from "@react-stately/color"
+import { ColorField } from "ui"
 
 export default function ColorFieldControlledDemo() {
-  const [color, setColor] = React.useState(parseColor('#FAFAFA'))
+  const [color, setColor] = React.useState(parseColor("#FAFAFA"))
   return (
     <div className="flex flex-col lg:flex-row gap-2 lg:gap-4">
       <ColorField
diff --git a/components/docs/colors/color-field-demo.tsx b/components/docs/colors/color-field-demo.tsx
index 9cc8bb4d..b5416978 100644
--- a/components/docs/colors/color-field-demo.tsx
+++ b/components/docs/colors/color-field-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { ColorField } from 'ui'
+import { ColorField } from "ui"
 
 export default function ColorFieldDemo() {
   return <ColorField label="Color" placeholder="#FAFAFA" />
diff --git a/components/docs/colors/color-field-disabled-demo.tsx b/components/docs/colors/color-field-disabled-demo.tsx
index 199bc1ab..d3a7041c 100644
--- a/components/docs/colors/color-field-disabled-demo.tsx
+++ b/components/docs/colors/color-field-disabled-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { ColorField } from 'ui'
+import { ColorField } from "ui"
 
 export default function ColorFieldDisabledDemo() {
   return <ColorField isDisabled label="Color" placeholder="#FAFAFA" />
diff --git a/components/docs/colors/color-field-with-prefix-demo.tsx b/components/docs/colors/color-field-with-prefix-demo.tsx
index 849bcf58..96f736f7 100644
--- a/components/docs/colors/color-field-with-prefix-demo.tsx
+++ b/components/docs/colors/color-field-with-prefix-demo.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { IconColors } from 'justd-icons'
-import { ColorField } from 'ui'
+import { IconColors } from "justd-icons"
+import { ColorField } from "ui"
 
 export default function ColorFieldWithPrefixDemo() {
   return <ColorField label="Color" prefix={<IconColors />} placeholder="#FAFAFA" />
diff --git a/components/docs/colors/color-field-with-suffix-demo.tsx b/components/docs/colors/color-field-with-suffix-demo.tsx
index 85b3e9e9..9f5ca217 100644
--- a/components/docs/colors/color-field-with-suffix-demo.tsx
+++ b/components/docs/colors/color-field-with-suffix-demo.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { IconColors } from 'justd-icons'
-import { ColorField } from 'ui'
+import { IconColors } from "justd-icons"
+import { ColorField } from "ui"
 
 export default function ColorFieldWithSuffixDemo() {
   return <ColorField label="Color" suffix={<IconColors />} placeholder="#FAFAFA" />
diff --git a/components/docs/colors/color-picker-combination-demo.tsx b/components/docs/colors/color-picker-combination-demo.tsx
index 868e54ed..4a1b7fc6 100644
--- a/components/docs/colors/color-picker-combination-demo.tsx
+++ b/components/docs/colors/color-picker-combination-demo.tsx
@@ -1,12 +1,12 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { type Color } from 'react-aria-components'
-import { ColorPicker } from 'ui'
+import { type Color } from "react-aria-components"
+import { ColorPicker } from "ui"
 
 export default function ColorPickerCombinationDemo() {
-  const [color, setColor] = React.useState('')
+  const [color, setColor] = React.useState("")
 
   const handleChange = (value: Color) => {
     setColor(value as unknown as string)
diff --git a/components/docs/colors/color-picker-controlled-demo.tsx b/components/docs/colors/color-picker-controlled-demo.tsx
index ed3c67d8..eafffa46 100644
--- a/components/docs/colors/color-picker-controlled-demo.tsx
+++ b/components/docs/colors/color-picker-controlled-demo.tsx
@@ -1,10 +1,10 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { ControlledValues } from '@/components/docs/colors/controlled-values'
-import { type Color } from 'react-aria-components'
-import { ColorPicker, defaultColor } from 'ui'
+import { ControlledValues } from "@/components/docs/colors/controlled-values"
+import { type Color } from "react-aria-components"
+import { ColorPicker, defaultColor } from "ui"
 
 export default function ColorPickerControlledDemo() {
   const [color, setColor] = React.useState(defaultColor)
diff --git a/components/docs/colors/color-picker-custom-colors-demo.tsx b/components/docs/colors/color-picker-custom-colors-demo.tsx
index 27298e42..715b8bb4 100644
--- a/components/docs/colors/color-picker-custom-colors-demo.tsx
+++ b/components/docs/colors/color-picker-custom-colors-demo.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { ColorPicker, defaultColor } from 'ui'
+import { ColorPicker, defaultColor } from "ui"
 
 export default function ColorPickerCustomColorsDemo() {
   const [color, setColor] = React.useState(defaultColor)
@@ -11,17 +11,17 @@ export default function ColorPickerCustomColorsDemo() {
       enableColorFormatSelection
       enableColorSwatch
       colors={[
-        '#eef8ff',
-        '#d8eeff',
-        '#b9e0ff',
-        '#89cfff',
-        '#52b4ff',
-        '#2a91ff',
-        '#0d6efd',
-        '#0c5ae9',
-        '#1149bc',
-        '#144194',
-        '#11295a'
+        "#eef8ff",
+        "#d8eeff",
+        "#b9e0ff",
+        "#89cfff",
+        "#52b4ff",
+        "#2a91ff",
+        "#0d6efd",
+        "#0c5ae9",
+        "#1149bc",
+        "#144194",
+        "#11295a"
       ]}
       value={color}
       onChange={setColor}
diff --git a/components/docs/colors/color-picker-demo.tsx b/components/docs/colors/color-picker-demo.tsx
index f72513e3..737cdeb6 100644
--- a/components/docs/colors/color-picker-demo.tsx
+++ b/components/docs/colors/color-picker-demo.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { ColorPicker, defaultColor } from 'ui'
+import { ColorPicker, defaultColor } from "ui"
 
 export default function ColorPickerDemo() {
   const [color, setColor] = React.useState(defaultColor)
diff --git a/components/docs/colors/color-picker-disabled-demo.tsx b/components/docs/colors/color-picker-disabled-demo.tsx
index 1a0f76dc..e8ba0923 100644
--- a/components/docs/colors/color-picker-disabled-demo.tsx
+++ b/components/docs/colors/color-picker-disabled-demo.tsx
@@ -1,11 +1,11 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { parseColor } from '@react-stately/color'
-import { ColorPicker } from 'ui'
+import { parseColor } from "@react-stately/color"
+import { ColorPicker } from "ui"
 
 export default function ColorPickerDemo() {
-  const [color, setColor] = React.useState(parseColor('hsl(216, 98%, 52%)'))
+  const [color, setColor] = React.useState(parseColor("hsl(216, 98%, 52%)"))
   return <ColorPicker isDisabled label="Color Picker" value={color} onChange={setColor} />
 }
diff --git a/components/docs/colors/color-picker-enable-selection-format-demo.tsx b/components/docs/colors/color-picker-enable-selection-format-demo.tsx
index b3f3069e..f0e541dc 100644
--- a/components/docs/colors/color-picker-enable-selection-format-demo.tsx
+++ b/components/docs/colors/color-picker-enable-selection-format-demo.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { ColorPicker, defaultColor } from 'ui'
+import { ColorPicker, defaultColor } from "ui"
 
 export default function ColorPickerEnableSelectionFormatDemo() {
   const [color, setColor] = React.useState(defaultColor)
diff --git a/components/docs/colors/color-picker-enable-swatch-demo.tsx b/components/docs/colors/color-picker-enable-swatch-demo.tsx
index db26bd0c..530b11bc 100644
--- a/components/docs/colors/color-picker-enable-swatch-demo.tsx
+++ b/components/docs/colors/color-picker-enable-swatch-demo.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { type Color } from 'react-aria-components'
-import { ColorPicker, defaultColor } from 'ui'
+import { type Color } from "react-aria-components"
+import { ColorPicker, defaultColor } from "ui"
 
 export default function ColorPickerEnableSwatchDemo() {
   const [color, setColor] = React.useState(defaultColor)
diff --git a/components/docs/colors/color-picker-with-description-demo.tsx b/components/docs/colors/color-picker-with-description-demo.tsx
index 34cda370..438e6110 100644
--- a/components/docs/colors/color-picker-with-description-demo.tsx
+++ b/components/docs/colors/color-picker-with-description-demo.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { ColorPicker, defaultColor } from 'ui'
+import { ColorPicker, defaultColor } from "ui"
 
 export default function ColorPickerWithDescriptionDemo() {
   const [color, setColor] = React.useState(defaultColor)
diff --git a/components/docs/colors/color-picker-with-label-demo.tsx b/components/docs/colors/color-picker-with-label-demo.tsx
index 65a41e2b..822c1934 100644
--- a/components/docs/colors/color-picker-with-label-demo.tsx
+++ b/components/docs/colors/color-picker-with-label-demo.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { ColorPicker, defaultColor } from 'ui'
+import { ColorPicker, defaultColor } from "ui"
 
 export default function ColorPickerWithLabelDemo() {
   const [color, setColor] = React.useState(defaultColor)
diff --git a/components/docs/colors/color-picker-with-placeholder-demo.tsx b/components/docs/colors/color-picker-with-placeholder-demo.tsx
index 6cd0a878..9e9c0944 100644
--- a/components/docs/colors/color-picker-with-placeholder-demo.tsx
+++ b/components/docs/colors/color-picker-with-placeholder-demo.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { ColorPicker, defaultColor } from 'ui'
+import { ColorPicker, defaultColor } from "ui"
 
 export default function ColorPickerWithPlaceholderDemo() {
   const [color, setColor] = React.useState(defaultColor)
diff --git a/components/docs/colors/color-slider-controlled-demo.tsx b/components/docs/colors/color-slider-controlled-demo.tsx
index d0e8d3e1..e5ec7552 100644
--- a/components/docs/colors/color-slider-controlled-demo.tsx
+++ b/components/docs/colors/color-slider-controlled-demo.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { ControlledValues } from '@/components/docs/colors/controlled-values'
-import { ColorSlider, defaultColor } from 'ui'
+import { ControlledValues } from "@/components/docs/colors/controlled-values"
+import { ColorSlider, defaultColor } from "ui"
 
 export default function ColorSliderControlledDemo() {
   const [value, setValue] = React.useState(defaultColor)
diff --git a/components/docs/colors/color-slider-demo.tsx b/components/docs/colors/color-slider-demo.tsx
index d34b5259..e92e03fb 100644
--- a/components/docs/colors/color-slider-demo.tsx
+++ b/components/docs/colors/color-slider-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { ColorSlider } from 'ui'
+import { ColorSlider } from "ui"
 
 export default function ColorSliderDemo() {
   return <ColorSlider channel="hue" defaultValue="hsl(0, 100%, 50%)" />
diff --git a/components/docs/colors/color-slider-disabled-demo.tsx b/components/docs/colors/color-slider-disabled-demo.tsx
index f7b1bd05..555a79e7 100644
--- a/components/docs/colors/color-slider-disabled-demo.tsx
+++ b/components/docs/colors/color-slider-disabled-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { ColorSlider } from 'ui'
+import { ColorSlider } from "ui"
 
 export default function ColorSliderDisabledDemo() {
   return <ColorSlider isDisabled channel="hue" defaultValue="hsl(0, 100%, 50%)" />
diff --git a/components/docs/colors/color-slider-with-label-demo.tsx b/components/docs/colors/color-slider-with-label-demo.tsx
index 5d78f668..05c7b46d 100644
--- a/components/docs/colors/color-slider-with-label-demo.tsx
+++ b/components/docs/colors/color-slider-with-label-demo.tsx
@@ -1,4 +1,4 @@
-import { ColorSlider } from 'ui'
+import { ColorSlider } from "ui"
 
 export default function ColorSliderWithLabelDemo() {
   return <ColorSlider label="Color Customizer" channel="hue" defaultValue="hsl(0, 100%, 50%)" />
diff --git a/components/docs/colors/color-slider-without-output-demo.tsx b/components/docs/colors/color-slider-without-output-demo.tsx
index 15139012..d7a6ada9 100644
--- a/components/docs/colors/color-slider-without-output-demo.tsx
+++ b/components/docs/colors/color-slider-without-output-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { ColorSlider } from 'ui'
+import { ColorSlider } from "ui"
 
 export default function ColorSliderWithoutOutputDemo() {
   return <ColorSlider channel="hue" showOutput={false} defaultValue="hsl(0, 100%, 50%)" />
diff --git a/components/docs/colors/color-swatch-controlled-demo.tsx b/components/docs/colors/color-swatch-controlled-demo.tsx
index 42b86c18..0f97d691 100644
--- a/components/docs/colors/color-swatch-controlled-demo.tsx
+++ b/components/docs/colors/color-swatch-controlled-demo.tsx
@@ -1,13 +1,13 @@
-'use client'
+"use client"
 
-import * as React from 'react'
+import * as React from "react"
 
-import { ControlledValues } from '@/components/docs/colors/controlled-values'
-import { parseColor } from '@react-stately/color'
-import { ColorSwatchPicker, ColorSwatchPickerItem } from 'ui'
+import { ControlledValues } from "@/components/docs/colors/controlled-values"
+import { parseColor } from "@react-stately/color"
+import { ColorSwatchPicker, ColorSwatchPickerItem } from "ui"
 
 export default function ColorSwatchPickerDemo() {
-  const [value, setValue] = React.useState(parseColor('#0d6efd'))
+  const [value, setValue] = React.useState(parseColor("#0d6efd"))
   return (
     <div className="flex flex-col gap-4">
       <ColorSwatchPicker
diff --git a/components/docs/colors/color-swatch-demo.tsx b/components/docs/colors/color-swatch-demo.tsx
index 5086a543..7082c83e 100644
--- a/components/docs/colors/color-swatch-demo.tsx
+++ b/components/docs/colors/color-swatch-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { ColorSwatch } from 'ui'
+import { ColorSwatch } from "ui"
 
 export default function ColorSwatchDemo() {
   return <ColorSwatch aria-label="Current color" color="#0d6efd" />
diff --git a/components/docs/colors/color-swatch-picker-demo.tsx b/components/docs/colors/color-swatch-picker-demo.tsx
index 02f8e411..80906971 100644
--- a/components/docs/colors/color-swatch-picker-demo.tsx
+++ b/components/docs/colors/color-swatch-picker-demo.tsx
@@ -1,12 +1,12 @@
-'use client'
+"use client"
 
-import * as React from 'react'
+import * as React from "react"
 
-import { parseColor } from '@react-stately/color'
-import { ColorSwatchPicker, ColorSwatchPickerItem } from 'ui'
+import { parseColor } from "@react-stately/color"
+import { ColorSwatchPicker, ColorSwatchPickerItem } from "ui"
 
 export default function ColorSwatchPickerDemo() {
-  const [value, setValue] = React.useState(parseColor('#0d6efd'))
+  const [value, setValue] = React.useState(parseColor("#0d6efd"))
   return (
     <ColorSwatchPicker
       aria-label="Pick color"
diff --git a/components/docs/colors/color-swatch-picker-item-disabled-demo.tsx b/components/docs/colors/color-swatch-picker-item-disabled-demo.tsx
index 943b036b..4e1069ad 100644
--- a/components/docs/colors/color-swatch-picker-item-disabled-demo.tsx
+++ b/components/docs/colors/color-swatch-picker-item-disabled-demo.tsx
@@ -1,13 +1,13 @@
-'use client'
+"use client"
 
-import * as React from 'react'
+import * as React from "react"
 
-import { ControlledValues } from '@/components/docs/colors/controlled-values'
-import { parseColor } from '@react-stately/color'
-import { ColorSwatchPicker, ColorSwatchPickerItem } from 'ui'
+import { ControlledValues } from "@/components/docs/colors/controlled-values"
+import { parseColor } from "@react-stately/color"
+import { ColorSwatchPicker, ColorSwatchPickerItem } from "ui"
 
 export default function ColorSwatchPickerDemo() {
-  const [value, setValue] = React.useState(parseColor('#0d6efd'))
+  const [value, setValue] = React.useState(parseColor("#0d6efd"))
   return (
     <div className="flex flex-col gap-4">
       <ColorSwatchPicker
diff --git a/components/docs/colors/color-wheel-controlled-demo.tsx b/components/docs/colors/color-wheel-controlled-demo.tsx
index 98fa5f2c..4bd3bb1f 100644
--- a/components/docs/colors/color-wheel-controlled-demo.tsx
+++ b/components/docs/colors/color-wheel-controlled-demo.tsx
@@ -1,13 +1,13 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { ControlledValues } from '@/components/docs/colors/controlled-values'
-import { parseColor } from '@react-stately/color'
-import { ColorThumb, ColorWheel, ColorWheelTrack } from 'ui'
+import { ControlledValues } from "@/components/docs/colors/controlled-values"
+import { parseColor } from "@react-stately/color"
+import { ColorThumb, ColorWheel, ColorWheelTrack } from "ui"
 
 export default function ColorWheelControlledDemo() {
-  const [color, setColor] = React.useState(parseColor('hsl(0, 100%, 50%)'))
+  const [color, setColor] = React.useState(parseColor("hsl(0, 100%, 50%)"))
   return (
     <div className="grid gap-4 justify-center items-center sm:grid-cols-2">
       <div className="shrink-0 grid place-content-center">
diff --git a/components/docs/colors/color-wheel-demo.tsx b/components/docs/colors/color-wheel-demo.tsx
index e5eff7d4..43122943 100644
--- a/components/docs/colors/color-wheel-demo.tsx
+++ b/components/docs/colors/color-wheel-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { ColorThumb, ColorWheel, ColorWheelTrack } from 'ui'
+import { ColorThumb, ColorWheel, ColorWheelTrack } from "ui"
 
 export default function ColorWheelDemo() {
   return (
diff --git a/components/docs/colors/color-wheel-disabled-demo.tsx b/components/docs/colors/color-wheel-disabled-demo.tsx
index c262f309..cdd65b7e 100644
--- a/components/docs/colors/color-wheel-disabled-demo.tsx
+++ b/components/docs/colors/color-wheel-disabled-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { ColorThumb, ColorWheel, ColorWheelTrack } from 'ui'
+import { ColorThumb, ColorWheel, ColorWheelTrack } from "ui"
 
 export default function ColorWheelDisabledDemo() {
   return (
diff --git a/components/docs/colors/controlled-values.tsx b/components/docs/colors/controlled-values.tsx
index 5469dc81..554c1915 100644
--- a/components/docs/colors/controlled-values.tsx
+++ b/components/docs/colors/controlled-values.tsx
@@ -1,9 +1,9 @@
-import React from 'react'
+import React from "react"
 
-import type { ColorFormat } from '@react-types/color'
-import { Card, ColorSwatch } from 'ui'
+import type { ColorFormat } from "@react-types/color"
+import { Card, ColorSwatch } from "ui"
 
-const formats: string[] = ['hex', 'hexa', 'rgb', 'rgba', 'hsl', 'hsla', 'hsb', 'hsba']
+const formats: string[] = ["hex", "hexa", "rgb", "rgba", "hsl", "hsla", "hsb", "hsba"]
 export function ControlledValues({ color }: { color: any }) {
   return (
     <Card className="p-3 min-w-[15.5rem] sm:min-w-72 text-center bg-transparent flex flex-col gap-y-2 [&>span]:flex [&>span]:gap-x-6 [&>span]:justify-between">
@@ -12,12 +12,12 @@ export function ControlledValues({ color }: { color: any }) {
           <span className="flex gap-x-1.5 items-center">
             <ColorSwatch
               className="size-4 rounded"
-              color={color.toString(format as ColorFormat | 'css' | undefined)}
+              color={color.toString(format as ColorFormat | "css" | undefined)}
             />
             <span className="uppercase text-xs">{format}</span>
           </span>
           <span className="text-xs sm:text-sm">
-            {color.toString(format as ColorFormat | 'css' | undefined)}
+            {color.toString(format as ColorFormat | "css" | undefined)}
           </span>
         </span>
       ))}
diff --git a/components/docs/controls/accordion-border-hidden-demo.tsx b/components/docs/controls/accordion-border-hidden-demo.tsx
index 982535ef..6bcaa8f5 100644
--- a/components/docs/controls/accordion-border-hidden-demo.tsx
+++ b/components/docs/controls/accordion-border-hidden-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
 import {
   IconBell,
@@ -9,8 +9,8 @@ import {
   IconSettings,
   IconShield,
   IconSupport
-} from 'justd-icons'
-import { Accordion } from 'ui'
+} from "justd-icons"
+import { Accordion } from "ui"
 
 export default function AccordionWithIconDemo() {
   return (
@@ -28,37 +28,37 @@ export default function AccordionWithIconDemo() {
 const items = [
   {
     icon: <IconSettings />,
-    title: 'Personal Settings',
+    title: "Personal Settings",
     description:
-      'You can update your profile, change your password, and manage your account settings here.'
+      "You can update your profile, change your password, and manage your account settings here."
   },
   {
     icon: <IconBell />,
-    title: 'Notifications',
+    title: "Notifications",
     description:
-      'Manage your notifications preferences, including alerts, emails, and push notifications.'
+      "Manage your notifications preferences, including alerts, emails, and push notifications."
   },
   {
     icon: <IconShield />,
-    title: 'Privacy Options',
+    title: "Privacy Options",
     description:
-      'Adjust your privacy settings to control who can see your information and contact you.'
+      "Adjust your privacy settings to control who can see your information and contact you."
   },
   {
     icon: <IconCreditCard />,
-    title: 'Payment Methods',
+    title: "Payment Methods",
     description:
-      'Add, remove, or update your payment methods including credit cards and digital wallets.'
+      "Add, remove, or update your payment methods including credit cards and digital wallets."
   },
   {
     icon: <IconSupport />,
-    title: 'Support Center',
-    description: 'Find help with common issues, or contact support for further assistance.'
+    title: "Support Center",
+    description: "Find help with common issues, or contact support for further assistance."
   },
   {
     icon: <IconDownload />,
-    title: 'Download Data',
+    title: "Download Data",
     description:
-      'Request a download of all your data we have stored, including account activity and user data.'
+      "Request a download of all your data we have stored, including account activity and user data."
   }
 ]
diff --git a/components/docs/controls/accordion-default-expand-demo.tsx b/components/docs/controls/accordion-default-expand-demo.tsx
index 4b83a2de..aab4440b 100644
--- a/components/docs/controls/accordion-default-expand-demo.tsx
+++ b/components/docs/controls/accordion-default-expand-demo.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { Accordion } from 'ui'
+import { Accordion } from "ui"
 
 export default function AccordionDefaultExpandDemo() {
   return (
@@ -19,23 +19,23 @@ export default function AccordionDefaultExpandDemo() {
 
 const faqs = [
   {
-    q: 'How do I reset my password?',
+    q: "How do I reset my password?",
     a: "You can reset your password by going to the settings page and clicking on 'Reset Password'."
   },
   {
-    q: 'Can I change my subscription plan?',
-    a: 'Yes, you can upgrade or downgrade your subscription plan at any time from your account settings.'
+    q: "Can I change my subscription plan?",
+    a: "Yes, you can upgrade or downgrade your subscription plan at any time from your account settings."
   },
   {
-    q: 'Where can I view my past orders?',
+    q: "Where can I view my past orders?",
     a: "Your past orders can be viewed in the 'Orders' section of your account dashboard."
   },
   {
-    q: 'What is the return policy?',
-    a: 'Our return policy allows you to return products within 30 days of purchase for a full refund or exchange.'
+    q: "What is the return policy?",
+    a: "Our return policy allows you to return products within 30 days of purchase for a full refund or exchange."
   },
   {
-    q: 'How do I contact customer support?',
-    a: 'You can contact customer support via email at support@example.com or through our online chat system.'
+    q: "How do I contact customer support?",
+    a: "You can contact customer support via email at support@example.com or through our online chat system."
   }
 ]
diff --git a/components/docs/controls/accordion-demo.tsx b/components/docs/controls/accordion-demo.tsx
index fd37e621..19426140 100644
--- a/components/docs/controls/accordion-demo.tsx
+++ b/components/docs/controls/accordion-demo.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { Accordion } from 'ui'
+import { Accordion } from "ui"
 
 export default function AccordionDemo() {
   return (
diff --git a/components/docs/controls/accordion-disabled-demo.tsx b/components/docs/controls/accordion-disabled-demo.tsx
index 0e785931..e3af10af 100644
--- a/components/docs/controls/accordion-disabled-demo.tsx
+++ b/components/docs/controls/accordion-disabled-demo.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { Accordion } from 'ui'
+import { Accordion } from "ui"
 
 export default function AccordionDisabledDemo() {
   return (
@@ -19,27 +19,27 @@ export default function AccordionDisabledDemo() {
 
 const faqs = [
   {
-    q: 'Do you offer gift wrapping options?',
-    a: 'Yes, we provide gift wrapping services for a small additional charge at checkout.'
+    q: "Do you offer gift wrapping options?",
+    a: "Yes, we provide gift wrapping services for a small additional charge at checkout."
   },
   {
-    q: 'Can I return a gift card?',
-    a: 'Sorry, gift cards are non-refundable and cannot be returned.'
+    q: "Can I return a gift card?",
+    a: "Sorry, gift cards are non-refundable and cannot be returned."
   },
   {
-    q: 'What are your store hours?',
-    a: 'Our store is open from 9 AM to 9 PM on weekdays and 10 AM to 6 PM on weekends.'
+    q: "What are your store hours?",
+    a: "Our store is open from 9 AM to 9 PM on weekdays and 10 AM to 6 PM on weekends."
   },
   {
-    q: 'Do you have a loyalty program?',
-    a: 'Yes, we have a loyalty program where you can earn points for every purchase and redeem them for discounts.'
+    q: "Do you have a loyalty program?",
+    a: "Yes, we have a loyalty program where you can earn points for every purchase and redeem them for discounts."
   },
   {
-    q: 'How do I update my billing information?',
-    a: 'You can update your billing information through your account settings on our website.'
+    q: "How do I update my billing information?",
+    a: "You can update your billing information through your account settings on our website."
   },
   {
-    q: 'Are there any discounts for bulk orders?',
-    a: 'Yes, we offer discounts on bulk orders. Please contact our sales team for more details.'
+    q: "Are there any discounts for bulk orders?",
+    a: "Yes, we offer discounts on bulk orders. Please contact our sales team for more details."
   }
 ]
diff --git a/components/docs/controls/accordion-hide-indicator-demo.tsx b/components/docs/controls/accordion-hide-indicator-demo.tsx
index 60d0d2ca..39e3eb0e 100644
--- a/components/docs/controls/accordion-hide-indicator-demo.tsx
+++ b/components/docs/controls/accordion-hide-indicator-demo.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { Accordion } from 'ui'
+import { Accordion } from "ui"
 
 export default function AccordionHideIndicatorDemo() {
   return (
@@ -19,15 +19,15 @@ export default function AccordionHideIndicatorDemo() {
 
 const faqs = [
   {
-    q: 'What payment methods are accepted?',
-    a: 'We accept all major credit cards, PayPal, and Apple Pay.'
+    q: "What payment methods are accepted?",
+    a: "We accept all major credit cards, PayPal, and Apple Pay."
   },
   {
-    q: 'How long does shipping take?',
-    a: 'Shipping times vary by location but typically take between 3-7 business days.'
+    q: "How long does shipping take?",
+    a: "Shipping times vary by location but typically take between 3-7 business days."
   },
   {
-    q: 'Can I track my order?',
-    a: 'Yes, you can track your order using the tracking link provided in your shipping confirmation email.'
+    q: "Can I track my order?",
+    a: "Yes, you can track your order using the tracking link provided in your shipping confirmation email."
   }
 ]
diff --git a/components/docs/controls/command-menu-controlled-demo.tsx b/components/docs/controls/command-menu-controlled-demo.tsx
index 0d8ff328..aead96f1 100644
--- a/components/docs/controls/command-menu-controlled-demo.tsx
+++ b/components/docs/controls/command-menu-controlled-demo.tsx
@@ -1,12 +1,12 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { Avatar, Button, CommandMenu } from 'ui'
+import { Avatar, Button, CommandMenu } from "ui"
 
 export default function CommandMenuControlledDemo() {
   const [isOpen, setIsOpen] = React.useState(false)
-  const [value, setValue] = React.useState('')
+  const [value, setValue] = React.useState("")
   return (
     <>
       <Button appearance="outline" onPress={() => setIsOpen(true)}>
@@ -18,7 +18,7 @@ export default function CommandMenuControlledDemo() {
           {users.map((user) => (
             <CommandMenu.Item key={user.id} value={user.name}>
               <Avatar src={user.image_url} />
-              {user.name}{' '}
+              {user.name}{" "}
               {user.name === value && (
                 <CommandMenu.Description>Selected: {value}</CommandMenu.Description>
               )}
@@ -31,22 +31,22 @@ export default function CommandMenuControlledDemo() {
 }
 
 const users = [
-  { id: 1, name: 'Barbara Kirlin Sr.', image_url: 'https://i.pravatar.cc/150?img=1' },
-  { id: 2, name: 'Rosemarie Koch', image_url: 'https://i.pravatar.cc/150?img=2' },
-  { id: 3, name: 'Mrs. Reva Heaney Jr.', image_url: 'https://i.pravatar.cc/150?img=3' },
-  { id: 4, name: 'Ms. Ettie Abshire DVM', image_url: 'https://i.pravatar.cc/150?img=4' },
-  { id: 5, name: 'Bria Ziemann', image_url: 'https://i.pravatar.cc/150?img=5' },
-  { id: 6, name: 'Heloise Borer Sr.', image_url: 'https://i.pravatar.cc/150?img=6' },
+  { id: 1, name: "Barbara Kirlin Sr.", image_url: "https://i.pravatar.cc/150?img=1" },
+  { id: 2, name: "Rosemarie Koch", image_url: "https://i.pravatar.cc/150?img=2" },
+  { id: 3, name: "Mrs. Reva Heaney Jr.", image_url: "https://i.pravatar.cc/150?img=3" },
+  { id: 4, name: "Ms. Ettie Abshire DVM", image_url: "https://i.pravatar.cc/150?img=4" },
+  { id: 5, name: "Bria Ziemann", image_url: "https://i.pravatar.cc/150?img=5" },
+  { id: 6, name: "Heloise Borer Sr.", image_url: "https://i.pravatar.cc/150?img=6" },
   {
     id: 7,
-    name: 'Miss Jacinthe Gerlach DVM',
-    image_url: 'https://i.pravatar.cc/150?img=7'
+    name: "Miss Jacinthe Gerlach DVM",
+    image_url: "https://i.pravatar.cc/150?img=7"
   },
   {
     id: 8,
-    name: 'Miss Stephania Schaefer Sr.',
-    image_url: 'https://i.pravatar.cc/150?img=8'
+    name: "Miss Stephania Schaefer Sr.",
+    image_url: "https://i.pravatar.cc/150?img=8"
   },
-  { id: 9, name: 'Kevon Hackett MD', image_url: 'https://i.pravatar.cc/150?img=9' },
-  { id: 10, name: 'Tom Ledner', image_url: 'https://i.pravatar.cc/150?img=10' }
+  { id: 9, name: "Kevon Hackett MD", image_url: "https://i.pravatar.cc/150?img=9" },
+  { id: 10, name: "Tom Ledner", image_url: "https://i.pravatar.cc/150?img=10" }
 ]
diff --git a/components/docs/controls/command-menu-danger-item-demo.tsx b/components/docs/controls/command-menu-danger-item-demo.tsx
index 83d6178c..799d2afd 100644
--- a/components/docs/controls/command-menu-danger-item-demo.tsx
+++ b/components/docs/controls/command-menu-danger-item-demo.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { Button, CommandMenu } from 'ui'
+import { Button, CommandMenu } from "ui"
 
 export default function CommandMenuDangerItemDemo() {
   const [isOpen, setIsOpen] = React.useState(false)
diff --git a/components/docs/controls/command-menu-demo.tsx b/components/docs/controls/command-menu-demo.tsx
index 4f0889bf..f57316b5 100644
--- a/components/docs/controls/command-menu-demo.tsx
+++ b/components/docs/controls/command-menu-demo.tsx
@@ -1,10 +1,10 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { IconBill, IconCube, IconGear, IconHome, IconNotes, IconShield } from 'justd-icons'
-import Link from 'next/link'
-import { Avatar, Button, CommandMenu } from 'ui'
+import { IconBill, IconCube, IconGear, IconHome, IconNotes, IconShield } from "justd-icons"
+import Link from "next/link"
+import { Avatar, Button, CommandMenu } from "ui"
 
 export default function CommandMenuDemo() {
   const [isOpen, setIsOpen] = React.useState(false)
@@ -67,9 +67,9 @@ export default function CommandMenuDemo() {
 }
 
 const users = [
-  { id: 1, name: 'Barbara Kirlin Sr.', image_url: 'https://i.pravatar.cc/150?img=1' },
-  { id: 2, name: 'Rosemarie Koch', image_url: 'https://i.pravatar.cc/150?img=2' },
-  { id: 3, name: 'Mrs. Reva Heaney Jr.', image_url: 'https://i.pravatar.cc/150?img=3' },
-  { id: 5, name: 'Bria Ziemann', image_url: 'https://i.pravatar.cc/150?img=5' },
-  { id: 6, name: 'Heloise Borer Sr.', image_url: 'https://i.pravatar.cc/150?img=6' }
+  { id: 1, name: "Barbara Kirlin Sr.", image_url: "https://i.pravatar.cc/150?img=1" },
+  { id: 2, name: "Rosemarie Koch", image_url: "https://i.pravatar.cc/150?img=2" },
+  { id: 3, name: "Mrs. Reva Heaney Jr.", image_url: "https://i.pravatar.cc/150?img=3" },
+  { id: 5, name: "Bria Ziemann", image_url: "https://i.pravatar.cc/150?img=5" },
+  { id: 6, name: "Heloise Borer Sr.", image_url: "https://i.pravatar.cc/150?img=6" }
 ]
diff --git a/components/docs/controls/command-menu-description-demo.tsx b/components/docs/controls/command-menu-description-demo.tsx
index 11c06f87..4f781435 100644
--- a/components/docs/controls/command-menu-description-demo.tsx
+++ b/components/docs/controls/command-menu-description-demo.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { IconCube } from 'justd-icons'
-import { Button, CommandMenu } from 'ui'
+import { IconCube } from "justd-icons"
+import { Button, CommandMenu } from "ui"
 
 export default function CommandMenuDescriptionDemo() {
   const [isOpen, setIsOpen] = React.useState(false)
diff --git a/components/docs/controls/command-menu-disabled-demo.tsx b/components/docs/controls/command-menu-disabled-demo.tsx
index 2451b819..a1996776 100644
--- a/components/docs/controls/command-menu-disabled-demo.tsx
+++ b/components/docs/controls/command-menu-disabled-demo.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { Button, CommandMenu } from 'ui'
+import { Button, CommandMenu } from "ui"
 
 export default function CommandMenuDisabledDemo() {
   const [isOpen, setIsOpen] = React.useState(false)
diff --git a/components/docs/controls/command-menu-keyboard-demo.tsx b/components/docs/controls/command-menu-keyboard-demo.tsx
index 8d2b872a..f34a4972 100644
--- a/components/docs/controls/command-menu-keyboard-demo.tsx
+++ b/components/docs/controls/command-menu-keyboard-demo.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { Button, CommandMenu } from 'ui'
+import { Button, CommandMenu } from "ui"
 
 export default function CommandMenuKeyboardDemo() {
   const [isOpen, setIsOpen] = React.useState(false)
diff --git a/components/docs/controls/command-menu-section-demo.tsx b/components/docs/controls/command-menu-section-demo.tsx
index 51a0eef4..524dab02 100644
--- a/components/docs/controls/command-menu-section-demo.tsx
+++ b/components/docs/controls/command-menu-section-demo.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { Button, CommandMenu } from 'ui'
+import { Button, CommandMenu } from "ui"
 
 export default function CommandMenuSectionDemo() {
   const [isOpen, setIsOpen] = React.useState(false)
@@ -38,22 +38,22 @@ export default function CommandMenuSectionDemo() {
 }
 
 const users = [
-  { id: 1, name: 'Barbara Kirlin Sr.', image_url: 'https://i.pravatar.cc/150?img=1' },
-  { id: 2, name: 'Rosemarie Koch', image_url: 'https://i.pravatar.cc/150?img=2' },
-  { id: 3, name: 'Mrs. Reva Heaney Jr.', image_url: 'https://i.pravatar.cc/150?img=3' },
-  { id: 4, name: 'Ms. Ettie Abshire DVM', image_url: 'https://i.pravatar.cc/150?img=4' },
-  { id: 5, name: 'Bria Ziemann', image_url: 'https://i.pravatar.cc/150?img=5' },
-  { id: 6, name: 'Heloise Borer Sr.', image_url: 'https://i.pravatar.cc/150?img=6' },
+  { id: 1, name: "Barbara Kirlin Sr.", image_url: "https://i.pravatar.cc/150?img=1" },
+  { id: 2, name: "Rosemarie Koch", image_url: "https://i.pravatar.cc/150?img=2" },
+  { id: 3, name: "Mrs. Reva Heaney Jr.", image_url: "https://i.pravatar.cc/150?img=3" },
+  { id: 4, name: "Ms. Ettie Abshire DVM", image_url: "https://i.pravatar.cc/150?img=4" },
+  { id: 5, name: "Bria Ziemann", image_url: "https://i.pravatar.cc/150?img=5" },
+  { id: 6, name: "Heloise Borer Sr.", image_url: "https://i.pravatar.cc/150?img=6" },
   {
     id: 7,
-    name: 'Miss Jacinthe Gerlach DVM',
-    image_url: 'https://i.pravatar.cc/150?img=7'
+    name: "Miss Jacinthe Gerlach DVM",
+    image_url: "https://i.pravatar.cc/150?img=7"
   },
   {
     id: 8,
-    name: 'Miss Stephania Schaefer Sr.',
-    image_url: 'https://i.pravatar.cc/150?img=8'
+    name: "Miss Stephania Schaefer Sr.",
+    image_url: "https://i.pravatar.cc/150?img=8"
   },
-  { id: 9, name: 'Kevon Hackett MD', image_url: 'https://i.pravatar.cc/150?img=9' },
-  { id: 10, name: 'Tom Ledner', image_url: 'https://i.pravatar.cc/150?img=10' }
+  { id: 9, name: "Kevon Hackett MD", image_url: "https://i.pravatar.cc/150?img=9" },
+  { id: 10, name: "Tom Ledner", image_url: "https://i.pravatar.cc/150?img=10" }
 ]
diff --git a/components/docs/controls/command-menu-separator-demo.tsx b/components/docs/controls/command-menu-separator-demo.tsx
index 48b05be5..86acf8e1 100644
--- a/components/docs/controls/command-menu-separator-demo.tsx
+++ b/components/docs/controls/command-menu-separator-demo.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { Button, CommandMenu } from 'ui'
+import { Button, CommandMenu } from "ui"
 
 export default function CommandMenuSeparatorDemo() {
   const [isOpen, setIsOpen] = React.useState(false)
diff --git a/components/docs/controls/command-menu-trigger-by-keyboard-demo.tsx b/components/docs/controls/command-menu-trigger-by-keyboard-demo.tsx
index 7d90271b..14dce85d 100644
--- a/components/docs/controls/command-menu-trigger-by-keyboard-demo.tsx
+++ b/components/docs/controls/command-menu-trigger-by-keyboard-demo.tsx
@@ -1,24 +1,24 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { IconCreditCard, IconCube, IconGear, IconHome2, IconNotes, IconShield } from 'justd-icons'
-import Link from 'next/link'
-import { CommandMenu } from 'ui'
+import { IconCreditCard, IconCube, IconGear, IconHome2, IconNotes, IconShield } from "justd-icons"
+import Link from "next/link"
+import { CommandMenu } from "ui"
 
 export default function CommandMenuTriggerByKeyboardDemo() {
   const [isOpen, setIsOpen] = React.useState(false)
   React.useEffect(() => {
     const down = (e: KeyboardEvent) => {
-      if (e.key === '/' && (e.metaKey || e.ctrlKey)) {
+      if (e.key === "/" && (e.metaKey || e.ctrlKey)) {
         e.preventDefault()
         setIsOpen((open: boolean) => !open)
       }
     }
 
-    document.addEventListener('keydown', down)
+    document.addEventListener("keydown", down)
 
-    return () => document.removeEventListener('keydown', down)
+    return () => document.removeEventListener("keydown", down)
   }, [setIsOpen])
   return (
     <>
diff --git a/components/docs/controls/context-menu-danger-demo.tsx b/components/docs/controls/context-menu-danger-demo.tsx
index d3c3fbac..0d4fd5fe 100644
--- a/components/docs/controls/context-menu-danger-demo.tsx
+++ b/components/docs/controls/context-menu-danger-demo.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { ContextMenu } from 'ui'
+import { ContextMenu } from "ui"
 
 export default function ContextMenuDangerDemo() {
   return (
diff --git a/components/docs/controls/context-menu-demo.tsx b/components/docs/controls/context-menu-demo.tsx
index 83e66251..f4a7098c 100644
--- a/components/docs/controls/context-menu-demo.tsx
+++ b/components/docs/controls/context-menu-demo.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { ContextMenu } from 'ui'
+import { ContextMenu } from "ui"
 
 export default function ContextMenuDemo() {
   return (
diff --git a/components/docs/controls/context-menu-disabled-demo.tsx b/components/docs/controls/context-menu-disabled-demo.tsx
index ccc94acf..db2a0aef 100644
--- a/components/docs/controls/context-menu-disabled-demo.tsx
+++ b/components/docs/controls/context-menu-disabled-demo.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { ContextMenu } from 'ui'
+import { ContextMenu } from "ui"
 
 export default function ContextMenuDisabledDemo() {
   return (
diff --git a/components/docs/controls/context-menu-item-details-demo.tsx b/components/docs/controls/context-menu-item-details-demo.tsx
index ce32803f..5f704be6 100644
--- a/components/docs/controls/context-menu-item-details-demo.tsx
+++ b/components/docs/controls/context-menu-item-details-demo.tsx
@@ -1,4 +1,4 @@
-import { ContextMenu } from 'ui'
+import { ContextMenu } from "ui"
 
 export default function ContextMenuItemDetailsDemo() {
   return (
@@ -16,9 +16,9 @@ export default function ContextMenuItemDetailsDemo() {
 }
 
 const roles = [
-  { id: 1, name: 'Admin', description: 'Has full access to all resources' },
-  { id: 2, name: 'Editor', description: 'Can edit content but has limited access to settings' },
-  { id: 3, name: 'Viewer', description: 'Can view content but cannot make changes' },
-  { id: 4, name: 'Contributor', description: 'Can contribute content for review' },
-  { id: 5, name: 'Guest', description: 'Limited access, mostly for viewing purposes' }
+  { id: 1, name: "Admin", description: "Has full access to all resources" },
+  { id: 2, name: "Editor", description: "Can edit content but has limited access to settings" },
+  { id: 3, name: "Viewer", description: "Can view content but cannot make changes" },
+  { id: 4, name: "Contributor", description: "Can contribute content for review" },
+  { id: 5, name: "Guest", description: "Limited access, mostly for viewing purposes" }
 ]
diff --git a/components/docs/controls/context-menu-separator-demo.tsx b/components/docs/controls/context-menu-separator-demo.tsx
index 00b08da8..6a5653e6 100644
--- a/components/docs/controls/context-menu-separator-demo.tsx
+++ b/components/docs/controls/context-menu-separator-demo.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { ContextMenu } from 'ui'
+import { ContextMenu } from "ui"
 
 export default function ContextMenuSeparatorDemo() {
   return (
diff --git a/components/docs/controls/context-menu-with-icon-demo.tsx b/components/docs/controls/context-menu-with-icon-demo.tsx
index d3c1f040..94dc7ee5 100644
--- a/components/docs/controls/context-menu-with-icon-demo.tsx
+++ b/components/docs/controls/context-menu-with-icon-demo.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { IconDuplicate, IconFolder, IconHighlight, IconTrash, IconUpload } from 'justd-icons'
-import { ContextMenu } from 'ui'
+import { IconDuplicate, IconFolder, IconHighlight, IconTrash, IconUpload } from "justd-icons"
+import { ContextMenu } from "ui"
 
 export default function ContextMenuWithIconDemo() {
   return (
diff --git a/components/docs/controls/slider-controlled-demo.tsx b/components/docs/controls/slider-controlled-demo.tsx
index b66cedc5..4f0f6c9f 100644
--- a/components/docs/controls/slider-controlled-demo.tsx
+++ b/components/docs/controls/slider-controlled-demo.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { Slider } from 'ui'
+import { Slider } from "ui"
 
 export default function SliderControlledDemo() {
   const [temperature, setTemperature] = React.useState<number>(31)
@@ -14,7 +14,7 @@ export default function SliderControlledDemo() {
           value={temperature}
           onChange={(v) => setTemperature(v as number)}
           label="Temperature"
-          description={`Current temperature: ${temperature ?? '-'}`}
+          description={`Current temperature: ${temperature ?? "-"}`}
         />
       </div>
       <div>
@@ -22,7 +22,7 @@ export default function SliderControlledDemo() {
           value={saturation}
           onChange={(v) => setSaturation(v as number[])}
           label="Saturation"
-          description={`Current saturation: ${saturation ?? '-'}`}
+          description={`Current saturation: ${saturation ?? "-"}`}
         />
       </div>
     </div>
diff --git a/components/docs/controls/slider-disabled-demo.tsx b/components/docs/controls/slider-disabled-demo.tsx
index 22c2c0fb..bed8d306 100644
--- a/components/docs/controls/slider-disabled-demo.tsx
+++ b/components/docs/controls/slider-disabled-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Slider } from 'ui'
+import { Slider } from "ui"
 
 export default function SliderDisabledDemo() {
   return <Slider isDisabled label="Volume" />
diff --git a/components/docs/controls/slider-orientation-demo.tsx b/components/docs/controls/slider-orientation-demo.tsx
index 646f6ef5..1cb61edf 100644
--- a/components/docs/controls/slider-orientation-demo.tsx
+++ b/components/docs/controls/slider-orientation-demo.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import React, { useState } from 'react'
+import React, { useState } from "react"
 
-import { Card, Description, Slider } from 'ui'
+import { Card, Description, Slider } from "ui"
 
 export default function SliderOrientationDemo() {
   const [equalizer, setEqualizer] = useState({
@@ -25,43 +25,43 @@ export default function SliderOrientationDemo() {
         <Slider
           aria-label="Sub Bass"
           value={equalizer.subBass}
-          onChange={(newValue) => handleSliderChange('subBass', newValue as number)}
+          onChange={(newValue) => handleSliderChange("subBass", newValue as number)}
           orientation="vertical"
         />
         <Slider
           aria-label="Bass"
           value={equalizer.bass}
-          onChange={(newValue) => handleSliderChange('bass', newValue as number)}
+          onChange={(newValue) => handleSliderChange("bass", newValue as number)}
           orientation="vertical"
         />
         <Slider
           aria-label="Low Mid"
           value={equalizer.lowMid}
-          onChange={(newValue) => handleSliderChange('lowMid', newValue as number)}
+          onChange={(newValue) => handleSliderChange("lowMid", newValue as number)}
           orientation="vertical"
         />
         <Slider
           aria-label="Mid"
           value={equalizer.mid}
-          onChange={(newValue) => handleSliderChange('mid', newValue as number)}
+          onChange={(newValue) => handleSliderChange("mid", newValue as number)}
           orientation="vertical"
         />
         <Slider
           aria-label="High Mid"
           value={equalizer.highMid}
-          onChange={(newValue) => handleSliderChange('highMid', newValue as number)}
+          onChange={(newValue) => handleSliderChange("highMid", newValue as number)}
           orientation="vertical"
         />
         <Slider
           aria-label="Presence"
           value={equalizer.presence}
-          onChange={(newValue) => handleSliderChange('presence', newValue as number)}
+          onChange={(newValue) => handleSliderChange("presence", newValue as number)}
           orientation="vertical"
         />
         <Slider
           aria-label="Brilliance"
           value={equalizer.brilliance}
-          onChange={(newValue) => handleSliderChange('brilliance', newValue as number)}
+          onChange={(newValue) => handleSliderChange("brilliance", newValue as number)}
           orientation="vertical"
         />
       </div>
diff --git a/components/docs/controls/slider-prefix-suffix-demo.tsx b/components/docs/controls/slider-prefix-suffix-demo.tsx
index bce97279..98ecf7f1 100644
--- a/components/docs/controls/slider-prefix-suffix-demo.tsx
+++ b/components/docs/controls/slider-prefix-suffix-demo.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { IconVolumeFull, IconVolumeOff } from 'justd-icons'
-import { Slider } from 'ui'
+import { IconVolumeFull, IconVolumeOff } from "justd-icons"
+import { Slider } from "ui"
 
 export default function SliderPrefixSuffixDemo() {
   const [volume, setVolume] = React.useState<number>(0.5)
diff --git a/components/docs/controls/slider-range-demo.tsx b/components/docs/controls/slider-range-demo.tsx
index 51e602ae..18e3c69f 100644
--- a/components/docs/controls/slider-range-demo.tsx
+++ b/components/docs/controls/slider-range-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Slider } from 'ui'
+import { Slider } from "ui"
 
 export default function SliderRangeDemo() {
   return <Slider defaultValue={[25, 75]} label="Distance Range" />
diff --git a/components/docs/controls/slider-step-demo.tsx b/components/docs/controls/slider-step-demo.tsx
index 6086fafd..03833ccb 100644
--- a/components/docs/controls/slider-step-demo.tsx
+++ b/components/docs/controls/slider-step-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Slider } from 'ui'
+import { Slider } from "ui"
 
 export default function SliderStepDemo() {
   return <Slider step={10} description="Step in 10" label="Progress tracking" />
diff --git a/components/docs/controls/switch-controlled-demo.tsx b/components/docs/controls/switch-controlled-demo.tsx
index 28bb6dca..ca1c4d4d 100644
--- a/components/docs/controls/switch-controlled-demo.tsx
+++ b/components/docs/controls/switch-controlled-demo.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { Description, Switch } from 'ui'
+import { Description, Switch } from "ui"
 
 export default function SwitchControlledDemo() {
   const [darkMode, setDarkMode] = React.useState(false)
@@ -13,7 +13,7 @@ export default function SwitchControlledDemo() {
       </Switch>
 
       <Description className="mt-2 block [&>strong]:text-fg">
-        Dark Mode is <strong>{darkMode ? 'enabled' : 'disabled'}</strong>
+        Dark Mode is <strong>{darkMode ? "enabled" : "disabled"}</strong>
       </Description>
     </>
   )
diff --git a/components/docs/controls/switch-disabled-demo.tsx b/components/docs/controls/switch-disabled-demo.tsx
index 4a7c904c..3053face 100644
--- a/components/docs/controls/switch-disabled-demo.tsx
+++ b/components/docs/controls/switch-disabled-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Switch } from 'ui'
+import { Switch } from "ui"
 
 export default function SwitchDemo() {
   return <Switch isDisabled>Dark Mode</Switch>
diff --git a/components/docs/controls/switch-variant-demo.tsx b/components/docs/controls/switch-variant-demo.tsx
index 43dba2c8..febcf172 100644
--- a/components/docs/controls/switch-variant-demo.tsx
+++ b/components/docs/controls/switch-variant-demo.tsx
@@ -1,16 +1,16 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { OptionPreview } from '@/components/docs/outside/option-preview'
-import { Select, Switch } from 'ui'
+import { OptionPreview } from "@/components/docs/outside/option-preview"
+import { Select, Switch } from "ui"
 
-const items = ['primary', 'secondary', 'success', 'danger', 'warning', 'info'].map((item) => ({
+const items = ["primary", "secondary", "success", "danger", "warning"].map((item) => ({
   value: item,
   label: item
 }))
 export default function SwitchVariantDemo() {
-  const [intent, setIntent] = React.useState('primary')
+  const [intent, setIntent] = React.useState("primary")
 
   return (
     <>
diff --git a/components/docs/controls/toolbar-demo.tsx b/components/docs/controls/toolbar-demo.tsx
index 5bb14761..8c280545 100644
--- a/components/docs/controls/toolbar-demo.tsx
+++ b/components/docs/controls/toolbar-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
 import {
   IconAlignmentCenter,
@@ -25,8 +25,8 @@ import {
   IconUnderline,
   IconUnderlineFill,
   IconUndo
-} from 'justd-icons'
-import { Button, Checkbox, Menu, Toolbar } from 'ui'
+} from "justd-icons"
+import { Button, Checkbox, Menu, Toolbar } from "ui"
 
 export default function ToolbarDemo() {
   return (
diff --git a/components/docs/controls/toolbar-disabled-demo.tsx b/components/docs/controls/toolbar-disabled-demo.tsx
index f066f342..bfdb62d3 100644
--- a/components/docs/controls/toolbar-disabled-demo.tsx
+++ b/components/docs/controls/toolbar-disabled-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
 import {
   IconAlignmentJustify,
@@ -17,8 +17,8 @@ import {
   IconPencilBoxFill,
   IconToolbox,
   IconToolboxFill
-} from 'justd-icons'
-import { Toggle, Toolbar } from 'ui'
+} from "justd-icons"
+import { Toggle, Toolbar } from "ui"
 
 export default function ToolbarDisabledDemo() {
   return (
diff --git a/components/docs/controls/toolbar-orientation-demo.tsx b/components/docs/controls/toolbar-orientation-demo.tsx
index dec6121f..85f13620 100644
--- a/components/docs/controls/toolbar-orientation-demo.tsx
+++ b/components/docs/controls/toolbar-orientation-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
 import {
   IconAlignmentCenter,
@@ -24,8 +24,8 @@ import {
   IconToolbox,
   IconToolboxFill,
   IconUndo
-} from 'justd-icons'
-import { Button, Menu, Toggle, Toolbar } from 'ui'
+} from "justd-icons"
+import { Button, Menu, Toggle, Toolbar } from "ui"
 
 export default function ToolbarOrientationDemo() {
   return (
diff --git a/components/docs/date-and-time/calendar-demo.tsx b/components/docs/date-and-time/calendar-demo.tsx
index 64d967fd..a212fd43 100644
--- a/components/docs/date-and-time/calendar-demo.tsx
+++ b/components/docs/date-and-time/calendar-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Calendar } from 'ui'
+import { Calendar } from "ui"
 
 export default function CalendarDemo() {
   return <Calendar aria-label="Event date" />
diff --git a/components/docs/date-and-time/date-field-controlled-demo.tsx b/components/docs/date-and-time/date-field-controlled-demo.tsx
index 1944d047..b3b3d87a 100644
--- a/components/docs/date-and-time/date-field-controlled-demo.tsx
+++ b/components/docs/date-and-time/date-field-controlled-demo.tsx
@@ -1,22 +1,22 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { getLocalTimeZone, parseDate, today } from '@internationalized/date'
-import { useDateFormatter } from '@react-aria/i18n'
-import { DateField } from 'ui'
+import { getLocalTimeZone, parseDate, today } from "@internationalized/date"
+import { useDateFormatter } from "@react-aria/i18n"
+import { DateField } from "ui"
 
 export default function DateFieldDisabledDemo() {
   const now = today(getLocalTimeZone())
   const [value, setValue] = React.useState(parseDate(now.toString()))
 
-  const formatter = useDateFormatter({ dateStyle: 'full' })
+  const formatter = useDateFormatter({ dateStyle: "full" })
 
   return (
     <div className="space-y-3">
       <div className="divide-y [&_p]:py-2">
-        <p>{value ? formatter.format(value.toDate(getLocalTimeZone())) : '--'}</p>
-        <p>{value ? value.toString() : '--'}</p>
+        <p>{value ? formatter.format(value.toDate(getLocalTimeZone())) : "--"}</p>
+        <p>{value ? value.toString() : "--"}</p>
       </div>
       <DateField value={value} onChange={setValue} label="Event date" />
     </div>
diff --git a/components/docs/date-and-time/date-field-demo.tsx b/components/docs/date-and-time/date-field-demo.tsx
index 608bfbeb..726f5c9f 100644
--- a/components/docs/date-and-time/date-field-demo.tsx
+++ b/components/docs/date-and-time/date-field-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { DateField } from 'ui'
+import { DateField } from "ui"
 
 export default function DateFieldDemo() {
   return <DateField label="Event date" />
diff --git a/components/docs/date-and-time/date-field-disabled-demo.tsx b/components/docs/date-and-time/date-field-disabled-demo.tsx
index d38c120e..a0c2b652 100644
--- a/components/docs/date-and-time/date-field-disabled-demo.tsx
+++ b/components/docs/date-and-time/date-field-disabled-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { DateField } from 'ui'
+import { DateField } from "ui"
 
 export default function DateFieldDisabledDemo() {
   return <DateField isDisabled label="Event date" />
diff --git a/components/docs/date-and-time/date-field-validation-demo.tsx b/components/docs/date-and-time/date-field-validation-demo.tsx
index ce5c4d26..59b84dd1 100644
--- a/components/docs/date-and-time/date-field-validation-demo.tsx
+++ b/components/docs/date-and-time/date-field-validation-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Button, DateField, Form } from 'ui'
+import { Button, DateField, Form } from "ui"
 
 export default function DateFieldDisabledDemo() {
   return (
diff --git a/components/docs/date-and-time/date-picker-controlled-demo.tsx b/components/docs/date-and-time/date-picker-controlled-demo.tsx
index d9464d32..92491f2b 100644
--- a/components/docs/date-and-time/date-picker-controlled-demo.tsx
+++ b/components/docs/date-and-time/date-picker-controlled-demo.tsx
@@ -1,23 +1,23 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { getLocalTimeZone, parseDate, today } from '@internationalized/date'
-import { useDateFormatter } from '@react-aria/i18n'
-import { DatePicker } from 'ui'
+import { getLocalTimeZone, parseDate, today } from "@internationalized/date"
+import { useDateFormatter } from "@react-aria/i18n"
+import { DatePicker } from "ui"
 
 export default function DatePickerControlledDemo() {
   const now = today(getLocalTimeZone())
 
   const [value, setValue] = React.useState(parseDate(now.toString()))
 
-  const formatter = useDateFormatter({ dateStyle: 'full' })
+  const formatter = useDateFormatter({ dateStyle: "full" })
 
   return (
     <div className="space-y-3">
       <div className="divide-y [&_p]:py-2">
-        <p>{value ? formatter.format(value.toDate(getLocalTimeZone())) : '--'}</p>
-        <p>{value ? value.toString() : '--'}</p>
+        <p>{value ? formatter.format(value.toDate(getLocalTimeZone())) : "--"}</p>
+        <p>{value ? value.toString() : "--"}</p>
       </div>
       <DatePicker value={value} onChange={setValue} label="Event date" />
     </div>
diff --git a/components/docs/date-and-time/date-picker-custom-validation-demo.tsx b/components/docs/date-and-time/date-picker-custom-validation-demo.tsx
index 33eb8b3b..02f8666f 100644
--- a/components/docs/date-and-time/date-picker-custom-validation-demo.tsx
+++ b/components/docs/date-and-time/date-picker-custom-validation-demo.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { getLocalTimeZone, parseDate, startOfYear, today } from '@internationalized/date'
-import { Button, DatePicker, Form } from 'ui'
+import { getLocalTimeZone, parseDate, startOfYear, today } from "@internationalized/date"
+import { Button, DatePicker, Form } from "ui"
 
 export default function DatePickerInvalidDemo() {
   const ly = startOfYear(today(getLocalTimeZone()))
@@ -12,7 +12,7 @@ export default function DatePickerInvalidDemo() {
   return (
     <Form onSubmit={(e) => e.preventDefault()}>
       <DatePicker
-        validate={(date) => (date < now ? 'Select a future date, please.' : null)}
+        validate={(date) => (date < now ? "Select a future date, please." : null)}
         value={value}
         onChange={setValue}
         label="Delivery date"
diff --git a/components/docs/date-and-time/date-picker-demo.tsx b/components/docs/date-and-time/date-picker-demo.tsx
index 9d69eefd..188f0b08 100644
--- a/components/docs/date-and-time/date-picker-demo.tsx
+++ b/components/docs/date-and-time/date-picker-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { DatePicker } from 'ui'
+import { DatePicker } from "ui"
 
 export default function DatePickerDemo() {
   return <DatePicker label="Event date" />
diff --git a/components/docs/date-and-time/date-picker-disabled-demo.tsx b/components/docs/date-and-time/date-picker-disabled-demo.tsx
index ae2a0443..ab0ae6e6 100644
--- a/components/docs/date-and-time/date-picker-disabled-demo.tsx
+++ b/components/docs/date-and-time/date-picker-disabled-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { DatePicker } from 'ui'
+import { DatePicker } from "ui"
 
 export default function DatePickerDisabledDemo() {
   return <DatePicker isDisabled label="Event date" />
diff --git a/components/docs/date-and-time/date-picker-required-demo.tsx b/components/docs/date-and-time/date-picker-required-demo.tsx
index 56187150..6867a4fe 100644
--- a/components/docs/date-and-time/date-picker-required-demo.tsx
+++ b/components/docs/date-and-time/date-picker-required-demo.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { Button, DatePicker, Form } from 'ui'
+import { Button, DatePicker, Form } from "ui"
 
 export default function DatePickerRequiredDemo() {
   return (
diff --git a/components/docs/date-and-time/date-range-picker-controlled-demo.tsx b/components/docs/date-and-time/date-range-picker-controlled-demo.tsx
index b3067f86..5305e3db 100644
--- a/components/docs/date-and-time/date-range-picker-controlled-demo.tsx
+++ b/components/docs/date-and-time/date-range-picker-controlled-demo.tsx
@@ -1,15 +1,15 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { getLocalTimeZone, today } from '@internationalized/date'
-import { useDateFormatter } from '@react-aria/i18n'
-import { DateRangePicker } from 'ui'
+import { getLocalTimeZone, today } from "@internationalized/date"
+import { useDateFormatter } from "@react-aria/i18n"
+import { DateRangePicker } from "ui"
 
 export default function DateRangePickerControlledDemo() {
   const now = today(getLocalTimeZone())
   const tomorrowWeek = today(getLocalTimeZone()).add({ days: 12 })
-  const formatter = useDateFormatter({ dateStyle: 'full' })
+  const formatter = useDateFormatter({ dateStyle: "full" })
 
   const [value, setValue] = React.useState({
     start: now,
@@ -22,9 +22,9 @@ export default function DateRangePickerControlledDemo() {
         <p>
           {value
             ? `${formatter.format(value.start.toDate(getLocalTimeZone()))} to ${formatter.format(value.end.toDate(getLocalTimeZone()))}`
-            : '-- to --'}
+            : "-- to --"}
         </p>
-        <p>{value ? `${value.start.toString()} to ${value.end.toString()}` : '-- to --'}</p>
+        <p>{value ? `${value.start.toString()} to ${value.end.toString()}` : "-- to --"}</p>
       </div>
       <DateRangePicker value={value} onChange={setValue} label="Event date" />
     </div>
diff --git a/components/docs/date-and-time/date-range-picker-custom-validation-demo.tsx b/components/docs/date-and-time/date-range-picker-custom-validation-demo.tsx
index 1d10f38b..f6cc5466 100644
--- a/components/docs/date-and-time/date-range-picker-custom-validation-demo.tsx
+++ b/components/docs/date-and-time/date-range-picker-custom-validation-demo.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { getLocalTimeZone, today } from '@internationalized/date'
-import { Button, DateRangePicker, Form } from 'ui'
+import { getLocalTimeZone, today } from "@internationalized/date"
+import { Button, DateRangePicker, Form } from "ui"
 
 export default function DateRangePickerCustomValidationDemo() {
   return (
@@ -9,7 +9,7 @@ export default function DateRangePickerCustomValidationDemo() {
       <DateRangePicker
         label="Room Booking Dates"
         validate={(range) =>
-          range?.end.compare(range.start) > 7 ? 'Maximum booking duration is 1 week.' : null
+          range?.end.compare(range.start) > 7 ? "Maximum booking duration is 1 week." : null
         }
         defaultValue={{
           start: today(getLocalTimeZone()),
diff --git a/components/docs/date-and-time/date-range-picker-demo.tsx b/components/docs/date-and-time/date-range-picker-demo.tsx
index cf4572ac..a16edc5a 100644
--- a/components/docs/date-and-time/date-range-picker-demo.tsx
+++ b/components/docs/date-and-time/date-range-picker-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { DateRangePicker } from 'ui'
+import { DateRangePicker } from "ui"
 
 export default function DateRangePickerDemo() {
   return <DateRangePicker label="Event date" />
diff --git a/components/docs/date-and-time/date-range-picker-disabled-demo.tsx b/components/docs/date-and-time/date-range-picker-disabled-demo.tsx
index 88410038..dd622b9b 100644
--- a/components/docs/date-and-time/date-range-picker-disabled-demo.tsx
+++ b/components/docs/date-and-time/date-range-picker-disabled-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { DateRangePicker } from 'ui'
+import { DateRangePicker } from "ui"
 
 export default function DateRangePickerDisabledDemo() {
   return <DateRangePicker isDisabled label="Event date" />
diff --git a/components/docs/date-and-time/date-range-picker-time-demo.tsx b/components/docs/date-and-time/date-range-picker-time-demo.tsx
index f8a8ec22..09a38c61 100644
--- a/components/docs/date-and-time/date-range-picker-time-demo.tsx
+++ b/components/docs/date-and-time/date-range-picker-time-demo.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { getLocalTimeZone, now, parseZonedDateTime } from '@internationalized/date'
-import { DateRangePicker } from 'ui'
+import { getLocalTimeZone, now, parseZonedDateTime } from "@internationalized/date"
+import { DateRangePicker } from "ui"
 
 export default function DateRangePickerTimeDemo() {
   const today = parseZonedDateTime(now(getLocalTimeZone()).toString())
diff --git a/components/docs/date-and-time/date-range-picker-validation-demo.tsx b/components/docs/date-and-time/date-range-picker-validation-demo.tsx
index fbc447a7..90d8f826 100644
--- a/components/docs/date-and-time/date-range-picker-validation-demo.tsx
+++ b/components/docs/date-and-time/date-range-picker-validation-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Button, DateRangePicker, Form } from 'ui'
+import { Button, DateRangePicker, Form } from "ui"
 
 export default function DateRangePickerValidationDemo() {
   return (
diff --git a/components/docs/date-and-time/date-time-demo.tsx b/components/docs/date-and-time/date-time-demo.tsx
index 12c7cb81..a29930c9 100644
--- a/components/docs/date-and-time/date-time-demo.tsx
+++ b/components/docs/date-and-time/date-time-demo.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { getLocalTimeZone, now, parseZonedDateTime } from '@internationalized/date'
-import { DatePicker } from 'ui'
+import { getLocalTimeZone, now, parseZonedDateTime } from "@internationalized/date"
+import { DatePicker } from "ui"
 
 export default function DateTimeDemo() {
   const today = parseZonedDateTime(now(getLocalTimeZone()).toString())
diff --git a/components/docs/date-and-time/date-time-field-demo.tsx b/components/docs/date-and-time/date-time-field-demo.tsx
index 80c7de31..e52a61ba 100644
--- a/components/docs/date-and-time/date-time-field-demo.tsx
+++ b/components/docs/date-and-time/date-time-field-demo.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { getLocalTimeZone, now, parseZonedDateTime } from '@internationalized/date'
-import { DateField } from 'ui'
+import { getLocalTimeZone, now, parseZonedDateTime } from "@internationalized/date"
+import { DateField } from "ui"
 
 export default function DateTimeFieldDemo() {
   const today = parseZonedDateTime(now(getLocalTimeZone()).toString())
diff --git a/components/docs/date-and-time/range-calendar-demo.tsx b/components/docs/date-and-time/range-calendar-demo.tsx
index 44e1ec72..2ffe6b52 100644
--- a/components/docs/date-and-time/range-calendar-demo.tsx
+++ b/components/docs/date-and-time/range-calendar-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { RangeCalendar } from 'ui'
+import { RangeCalendar } from "ui"
 
 export default function RangeCalendarDemo() {
   return <RangeCalendar aria-label="Range Calendar" />
diff --git a/components/docs/date-and-time/time-field-controlled-demo.tsx b/components/docs/date-and-time/time-field-controlled-demo.tsx
index e41c256d..44000697 100644
--- a/components/docs/date-and-time/time-field-controlled-demo.tsx
+++ b/components/docs/date-and-time/time-field-controlled-demo.tsx
@@ -1,16 +1,16 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { Time } from '@internationalized/date'
-import { TimeField } from 'ui'
+import { Time } from "@internationalized/date"
+import { TimeField } from "ui"
 
 export default function TimeFieldValidationDemo() {
   const [value, setValue] = React.useState(new Time(11, 45))
   return (
     <div className="space-y-3">
       <div className="[&_p]:py-2">
-        <p>{value ? value.toString() : '--'}</p>
+        <p>{value ? value.toString() : "--"}</p>
       </div>
       <TimeField label="Event time" value={value} onChange={setValue} />
     </div>
diff --git a/components/docs/date-and-time/time-field-demo.tsx b/components/docs/date-and-time/time-field-demo.tsx
index 3411fdd9..cdaf1b86 100644
--- a/components/docs/date-and-time/time-field-demo.tsx
+++ b/components/docs/date-and-time/time-field-demo.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { Time } from '@internationalized/date'
-import { TimeField } from 'ui'
+import { Time } from "@internationalized/date"
+import { TimeField } from "ui"
 
 export default function TimeFieldDemo() {
   return <TimeField defaultValue={new Time()} label="Event time" />
diff --git a/components/docs/date-and-time/time-field-disabled-demo.tsx b/components/docs/date-and-time/time-field-disabled-demo.tsx
index 3dd45705..99049e02 100644
--- a/components/docs/date-and-time/time-field-disabled-demo.tsx
+++ b/components/docs/date-and-time/time-field-disabled-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { TimeField } from 'ui'
+import { TimeField } from "ui"
 
 export default function TimeFieldDisabledDemo() {
   return <TimeField isDisabled label="Event time" />
diff --git a/components/docs/date-and-time/time-field-hc-demo.tsx b/components/docs/date-and-time/time-field-hc-demo.tsx
index ab73c51e..f8d2a6b1 100644
--- a/components/docs/date-and-time/time-field-hc-demo.tsx
+++ b/components/docs/date-and-time/time-field-hc-demo.tsx
@@ -1,10 +1,10 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { OptionPreview } from '@/components/docs/outside/option-preview'
-import { Time } from '@internationalized/date'
-import { Switch, TimeField } from 'ui'
+import { OptionPreview } from "@/components/docs/outside/option-preview"
+import { Time } from "@internationalized/date"
+import { Switch, TimeField } from "ui"
 
 export default function TimeFieldHcDemo() {
   const [hc, setHc] = React.useState<12 | 24>(24)
diff --git a/components/docs/date-and-time/time-field-validation-demo.tsx b/components/docs/date-and-time/time-field-validation-demo.tsx
index 66b1eeb7..8098d763 100644
--- a/components/docs/date-and-time/time-field-validation-demo.tsx
+++ b/components/docs/date-and-time/time-field-validation-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Button, Form, TimeField } from 'ui'
+import { Button, Form, TimeField } from "ui"
 
 export default function TimeFieldValidationDemo() {
   return (
diff --git a/components/docs/drag-and-drop/drop-zone-and-file-trigger-demo.tsx b/components/docs/drag-and-drop/drop-zone-and-file-trigger-demo.tsx
index 2df53902..333f163f 100644
--- a/components/docs/drag-and-drop/drop-zone-and-file-trigger-demo.tsx
+++ b/components/docs/drag-and-drop/drop-zone-and-file-trigger-demo.tsx
@@ -1,11 +1,11 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import type { DropEvent } from '@react-types/shared'
-import { IconGallery } from 'justd-icons'
-import { isFileDropItem } from 'react-aria-components'
-import { Description, DropZone, FileTrigger } from 'ui'
+import type { DropEvent } from "@react-types/shared"
+import { IconGallery } from "justd-icons"
+import { isFileDropItem } from "react-aria-components"
+import { Description, DropZone, FileTrigger } from "ui"
 
 export default function DropZoneAndFileTriggerDemo() {
   const [droppedImage, setDroppedImage] = React.useState<string | undefined>(undefined)
@@ -13,7 +13,7 @@ export default function DropZoneAndFileTriggerDemo() {
   const onDropHandler = async (e: DropEvent) => {
     const item = e.items
       .filter(isFileDropItem)
-      .find((item) => item.type === 'image/jpeg' || item.type === 'image/png')
+      .find((item) => item.type === "image/jpeg" || item.type === "image/png")
     if (item) {
       const file = await item.getFile()
       setDroppedImage(URL.createObjectURL(file))
@@ -33,7 +33,7 @@ export default function DropZoneAndFileTriggerDemo() {
   return (
     <DropZone
       getDropOperation={(types) =>
-        types.has('image/jpeg') || types.has('image/png') ? 'copy' : 'cancel'
+        types.has("image/jpeg") || types.has("image/png") ? "copy" : "cancel"
       }
       onDrop={onDropHandler}
     >
@@ -46,7 +46,7 @@ export default function DropZoneAndFileTriggerDemo() {
           </div>
           <div className="justify-center flex">
             <FileTrigger
-              acceptedFileTypes={['image/png', 'image/jpeg']}
+              acceptedFileTypes={["image/png", "image/jpeg"]}
               allowsMultiple={false}
               onSelect={onSelectHandler}
             >
diff --git a/components/docs/drag-and-drop/drop-zone-demo.tsx b/components/docs/drag-and-drop/drop-zone-demo.tsx
index 196855e6..54731401 100644
--- a/components/docs/drag-and-drop/drop-zone-demo.tsx
+++ b/components/docs/drag-and-drop/drop-zone-demo.tsx
@@ -1,15 +1,15 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { DropZone, Label } from 'ui'
+import { DropZone, Label } from "ui"
 
 export default function DropZoneDemo() {
   const [dropped, setDropped] = React.useState(false)
 
   return (
     <DropZone onDrop={() => setDropped(true)}>
-      <Label>{dropped ? 'Drop nailed' : 'Toss your stuff here'}</Label>
+      <Label>{dropped ? "Drop nailed" : "Toss your stuff here"}</Label>
     </DropZone>
   )
 }
diff --git a/components/docs/forms/checkbox-controlled-demo.tsx b/components/docs/forms/checkbox-controlled-demo.tsx
index 1e56b489..1686798e 100644
--- a/components/docs/forms/checkbox-controlled-demo.tsx
+++ b/components/docs/forms/checkbox-controlled-demo.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { Checkbox, Description } from 'ui'
+import { Checkbox, Description } from "ui"
 
 export default function CheckboxControlledDemo() {
   const [selected, setSelection] = React.useState(false)
@@ -12,7 +12,7 @@ export default function CheckboxControlledDemo() {
         Receive Updates
       </Checkbox>
       <Description className="mt-2 block [&>strong]:text-fg">
-        You have <strong>{selected ? 'enabled' : 'disabled'}</strong> the option.
+        You have <strong>{selected ? "enabled" : "disabled"}</strong> the option.
       </Description>
     </>
   )
diff --git a/components/docs/forms/checkbox-description-demo.tsx b/components/docs/forms/checkbox-description-demo.tsx
index 39f8bcb0..3f6aa18a 100644
--- a/components/docs/forms/checkbox-description-demo.tsx
+++ b/components/docs/forms/checkbox-description-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Checkbox } from 'ui'
+import { Checkbox } from "ui"
 
 export default function CheckboxDescriptionDemo() {
   return <Checkbox label="Postal Mail" description="Receive notifications via postal mail" />
diff --git a/components/docs/forms/checkbox-disabled-demo.tsx b/components/docs/forms/checkbox-disabled-demo.tsx
index 8ddb4e64..cbad5015 100644
--- a/components/docs/forms/checkbox-disabled-demo.tsx
+++ b/components/docs/forms/checkbox-disabled-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Checkbox } from 'ui'
+import { Checkbox } from "ui"
 
 export default function CheckboxDisabledDemo() {
   return <Checkbox isDisabled>Enable notifications</Checkbox>
diff --git a/components/docs/forms/checkbox-group-controlled-demo.tsx b/components/docs/forms/checkbox-group-controlled-demo.tsx
index f70596c0..2d85fa93 100644
--- a/components/docs/forms/checkbox-group-controlled-demo.tsx
+++ b/components/docs/forms/checkbox-group-controlled-demo.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { Checkbox, CheckboxGroup, Description } from 'ui'
+import { Checkbox, CheckboxGroup, Description } from "ui"
 
 export default function CheckboxGroupControlledDemo() {
   const [values, setValues] = React.useState<string[]>([])
@@ -17,10 +17,10 @@ export default function CheckboxGroupControlledDemo() {
       <Description className="flex flex-col gap-y-1 h-10 mt-2 [&>strong]:text-fg [&>strong]:font-medium">
         {values.length > 0 ? (
           <>
-            Selected values <strong className="font-medium">{values.join(', ')}</strong>
+            Selected values <strong className="font-medium">{values.join(", ")}</strong>
           </>
         ) : (
-          'No values selected'
+          "No values selected"
         )}
       </Description>
     </>
diff --git a/components/docs/forms/checkbox-group-demo.tsx b/components/docs/forms/checkbox-group-demo.tsx
index e8a6ac57..623d1c67 100644
--- a/components/docs/forms/checkbox-group-demo.tsx
+++ b/components/docs/forms/checkbox-group-demo.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { Checkbox, CheckboxGroup } from 'ui'
+import { Checkbox, CheckboxGroup } from "ui"
 
 export default function CheckboxGroupDemo() {
   return (
diff --git a/components/docs/forms/checkbox-group-description-demo.tsx b/components/docs/forms/checkbox-group-description-demo.tsx
index c67d60d5..5a152339 100644
--- a/components/docs/forms/checkbox-group-description-demo.tsx
+++ b/components/docs/forms/checkbox-group-description-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Checkbox, CheckboxGroup } from 'ui'
+import { Checkbox, CheckboxGroup } from "ui"
 
 export default function CheckboxGroupDescriptionDemo() {
   return (
diff --git a/components/docs/forms/checkbox-group-disabled-demo.tsx b/components/docs/forms/checkbox-group-disabled-demo.tsx
index 1afd5644..dae85d52 100644
--- a/components/docs/forms/checkbox-group-disabled-demo.tsx
+++ b/components/docs/forms/checkbox-group-disabled-demo.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { Checkbox, CheckboxGroup } from 'ui'
+import { Checkbox, CheckboxGroup } from "ui"
 
 export default function CheckboxDisabledDemo() {
   return (
diff --git a/components/docs/forms/checkbox-indeterminate-demo.tsx b/components/docs/forms/checkbox-indeterminate-demo.tsx
index 011ac596..4ff359d9 100644
--- a/components/docs/forms/checkbox-indeterminate-demo.tsx
+++ b/components/docs/forms/checkbox-indeterminate-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Checkbox } from 'ui'
+import { Checkbox } from "ui"
 
 export default function CheckboxIndeterminateDemo() {
   return (
diff --git a/components/docs/forms/checkbox-invalid-demo.tsx b/components/docs/forms/checkbox-invalid-demo.tsx
index e96f5869..8df61ac3 100644
--- a/components/docs/forms/checkbox-invalid-demo.tsx
+++ b/components/docs/forms/checkbox-invalid-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Checkbox } from 'ui'
+import { Checkbox } from "ui"
 
 export default function CheckboxInvalidDemo() {
   return <Checkbox isInvalid>Enable notifications</Checkbox>
diff --git a/components/docs/forms/form-validation-demo.tsx b/components/docs/forms/form-validation-demo.tsx
index 150e225e..17c7842a 100644
--- a/components/docs/forms/form-validation-demo.tsx
+++ b/components/docs/forms/form-validation-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Button, Form, TextField } from 'ui'
+import { Button, Form, TextField } from "ui"
 
 export default function FormValidationDemo() {
   return (
diff --git a/components/docs/forms/input-otp-controlled-demo.tsx b/components/docs/forms/input-otp-controlled-demo.tsx
index 96bd8a99..d0a4f72c 100644
--- a/components/docs/forms/input-otp-controlled-demo.tsx
+++ b/components/docs/forms/input-otp-controlled-demo.tsx
@@ -1,9 +1,9 @@
-import React from 'react'
+import React from "react"
 
-import { InputOTP, InputOTPGroup, InputOTPSlot } from 'ui'
+import { InputOTP, InputOTPGroup, InputOTPSlot } from "ui"
 
 export default function InputOtpControlledDemo() {
-  const [value, setValue] = React.useState('')
+  const [value, setValue] = React.useState("")
   return (
     <div className="space-y-2">
       <InputOTP maxLength={6} value={value} onChange={setValue}>
@@ -15,7 +15,7 @@ export default function InputOtpControlledDemo() {
       </InputOTP>
 
       <div className="text-center text-sm">
-        {value === '' ? <>Enter your one-time password.</> : <>You entered: {value}</>}
+        {value === "" ? <>Enter your one-time password.</> : <>You entered: {value}</>}
       </div>
     </div>
   )
diff --git a/components/docs/forms/input-otp-demo.tsx b/components/docs/forms/input-otp-demo.tsx
index af071c8f..a09ed5c0 100644
--- a/components/docs/forms/input-otp-demo.tsx
+++ b/components/docs/forms/input-otp-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { InputOTP, InputOTPGroup, InputOTPSlot } from 'ui'
+import { InputOTP, InputOTPGroup, InputOTPSlot } from "ui"
 
 export default function InputOtpDemo() {
   return (
diff --git a/components/docs/forms/input-otp-separator-demo.tsx b/components/docs/forms/input-otp-separator-demo.tsx
index b17789ff..6eeccd0f 100644
--- a/components/docs/forms/input-otp-separator-demo.tsx
+++ b/components/docs/forms/input-otp-separator-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from 'ui'
+import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from "ui"
 
 export default function InputOtpSeparatorDemo() {
   return (
diff --git a/components/docs/forms/number-field-controlled-demo.tsx b/components/docs/forms/number-field-controlled-demo.tsx
index 915e6c38..8be20a96 100644
--- a/components/docs/forms/number-field-controlled-demo.tsx
+++ b/components/docs/forms/number-field-controlled-demo.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { Description, NumberField } from 'ui'
+import { Description, NumberField } from "ui"
 
 export default function NumberFieldControlledDemo() {
   const [number, setNumber] = React.useState(1280)
@@ -11,7 +11,7 @@ export default function NumberFieldControlledDemo() {
       <NumberField label="Width" value={number} onChange={setNumber} />
 
       <Description className="mt-2 block [&>strong]:text-fg">
-        You have typed: <strong>{number ?? '-'}</strong>
+        You have typed: <strong>{number ?? "-"}</strong>
       </Description>
     </div>
   )
diff --git a/components/docs/forms/number-field-demo.tsx b/components/docs/forms/number-field-demo.tsx
index 496ab9c5..d5b44096 100644
--- a/components/docs/forms/number-field-demo.tsx
+++ b/components/docs/forms/number-field-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { NumberField } from 'ui'
+import { NumberField } from "ui"
 
 export default function NumberFieldDemo() {
   return <NumberField label="Cookies" />
diff --git a/components/docs/forms/number-field-disabled-demo.tsx b/components/docs/forms/number-field-disabled-demo.tsx
index 7369cadb..002ec003 100644
--- a/components/docs/forms/number-field-disabled-demo.tsx
+++ b/components/docs/forms/number-field-disabled-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { NumberField } from 'ui'
+import { NumberField } from "ui"
 
 export default function NumberFieldDisabledDemo() {
   return <NumberField isDisabled label="Cookies" />
diff --git a/components/docs/forms/number-field-invalid-demo.tsx b/components/docs/forms/number-field-invalid-demo.tsx
index 8055f3a2..2a56d03e 100644
--- a/components/docs/forms/number-field-invalid-demo.tsx
+++ b/components/docs/forms/number-field-invalid-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { NumberField } from 'ui'
+import { NumberField } from "ui"
 
 export default function NumberFieldInvalidDemo() {
   return <NumberField isInvalid label="Cookies" />
diff --git a/components/docs/forms/radio-group-children-description-demo.tsx b/components/docs/forms/radio-group-children-description-demo.tsx
index 047260c1..89e28d93 100644
--- a/components/docs/forms/radio-group-children-description-demo.tsx
+++ b/components/docs/forms/radio-group-children-description-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Radio, RadioGroup } from 'ui'
+import { Radio, RadioGroup } from "ui"
 
 export default function RadioGroupChildrenDescriptionDemo() {
   return (
diff --git a/components/docs/forms/radio-group-controlled-demo.tsx b/components/docs/forms/radio-group-controlled-demo.tsx
index 801a97db..bb0384ef 100644
--- a/components/docs/forms/radio-group-controlled-demo.tsx
+++ b/components/docs/forms/radio-group-controlled-demo.tsx
@@ -1,11 +1,11 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { Description, Radio, RadioGroup } from 'ui'
+import { Description, Radio, RadioGroup } from "ui"
 
 export default function RadioGroupControlledDemo() {
-  const [selected, setSelected] = React.useState('')
+  const [selected, setSelected] = React.useState("")
   return (
     <>
       <RadioGroup label="Features" value={selected} onChange={setSelected}>
@@ -16,7 +16,7 @@ export default function RadioGroupControlledDemo() {
         <Radio value="privacy">Privacy</Radio>
       </RadioGroup>
       <Description className="mt-2 block [&>strong]:text-fg">
-        You have selected: <strong>{selected ?? '-'}</strong>
+        You have selected: <strong>{selected ?? "-"}</strong>
       </Description>
     </>
   )
diff --git a/components/docs/forms/radio-group-demo.tsx b/components/docs/forms/radio-group-demo.tsx
index 5cf3de7f..65e44672 100644
--- a/components/docs/forms/radio-group-demo.tsx
+++ b/components/docs/forms/radio-group-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Radio, RadioGroup } from 'ui'
+import { Radio, RadioGroup } from "ui"
 
 export default function RadioGroupDemo() {
   return (
diff --git a/components/docs/forms/radio-group-description-demo.tsx b/components/docs/forms/radio-group-description-demo.tsx
index 036c7a34..a8fe993f 100644
--- a/components/docs/forms/radio-group-description-demo.tsx
+++ b/components/docs/forms/radio-group-description-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Radio, RadioGroup } from 'ui'
+import { Radio, RadioGroup } from "ui"
 
 export default function RadioGroupDescriptionDemo() {
   return (
diff --git a/components/docs/forms/radio-group-disabled-demo.tsx b/components/docs/forms/radio-group-disabled-demo.tsx
index dff401ef..400c27e0 100644
--- a/components/docs/forms/radio-group-disabled-demo.tsx
+++ b/components/docs/forms/radio-group-disabled-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Radio, RadioGroup } from 'ui'
+import { Radio, RadioGroup } from "ui"
 
 export default function RadioGroupDisabledDemo() {
   return (
diff --git a/components/docs/forms/radio-group-invalid-demo.tsx b/components/docs/forms/radio-group-invalid-demo.tsx
index 6df607a1..4665db4c 100644
--- a/components/docs/forms/radio-group-invalid-demo.tsx
+++ b/components/docs/forms/radio-group-invalid-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Radio, RadioGroup } from 'ui'
+import { Radio, RadioGroup } from "ui"
 
 export default function RadioGroupInvalidDemo() {
   return (
diff --git a/components/docs/forms/radio-group-orientation-demo.tsx b/components/docs/forms/radio-group-orientation-demo.tsx
index f936a2af..ff9c438b 100644
--- a/components/docs/forms/radio-group-orientation-demo.tsx
+++ b/components/docs/forms/radio-group-orientation-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Radio, RadioGroup } from 'ui'
+import { Radio, RadioGroup } from "ui"
 
 export default function RadioGroupOrientationDemo() {
   return (
diff --git a/components/docs/forms/search-field-controlled-demo.tsx b/components/docs/forms/search-field-controlled-demo.tsx
index 7a79335f..c053cec2 100644
--- a/components/docs/forms/search-field-controlled-demo.tsx
+++ b/components/docs/forms/search-field-controlled-demo.tsx
@@ -1,16 +1,16 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { Description, SearchField } from 'ui'
+import { Description, SearchField } from "ui"
 
 export default function SearchFieldControlledDemo() {
-  const [value, setValue] = React.useState('')
+  const [value, setValue] = React.useState("")
   return (
     <>
       <SearchField value={value} onChange={setValue} className="mb-2" />
       <Description className="mt-2 block [&>strong]:text-fg">
-        You have typed: <strong>{value ?? '-'}</strong>
+        You have typed: <strong>{value ?? "-"}</strong>
       </Description>
     </>
   )
diff --git a/components/docs/forms/search-field-demo.tsx b/components/docs/forms/search-field-demo.tsx
index 47958223..cc7459b4 100644
--- a/components/docs/forms/search-field-demo.tsx
+++ b/components/docs/forms/search-field-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { SearchField } from 'ui'
+import { SearchField } from "ui"
 
 export default function SearchFieldDemo() {
   return <SearchField aria-label="Search" placeholder="Search" />
diff --git a/components/docs/forms/search-field-disabled-demo.tsx b/components/docs/forms/search-field-disabled-demo.tsx
index b2fcb675..d8017d3c 100644
--- a/components/docs/forms/search-field-disabled-demo.tsx
+++ b/components/docs/forms/search-field-disabled-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { SearchField } from 'ui'
+import { SearchField } from "ui"
 
 export default function SearchFieldDisabledDemo() {
   return <SearchField isDisabled />
diff --git a/components/docs/forms/search-field-validation-demo.tsx b/components/docs/forms/search-field-validation-demo.tsx
index 907e367a..3709dd42 100644
--- a/components/docs/forms/search-field-validation-demo.tsx
+++ b/components/docs/forms/search-field-validation-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Button, Form, SearchField } from 'ui'
+import { Button, Form, SearchField } from "ui"
 
 export default function SearchFieldValidationDemo() {
   return (
diff --git a/components/docs/forms/search-field-with-label-demo.tsx b/components/docs/forms/search-field-with-label-demo.tsx
index 0a108a73..acc0cac8 100644
--- a/components/docs/forms/search-field-with-label-demo.tsx
+++ b/components/docs/forms/search-field-with-label-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { SearchField } from 'ui'
+import { SearchField } from "ui"
 
 export default function SearchFieldWithLabelDemo() {
   return <SearchField label="Search" />
diff --git a/components/docs/forms/tag-field-appearance-demo.tsx b/components/docs/forms/tag-field-appearance-demo.tsx
index 2dc56b25..bd8ba15d 100644
--- a/components/docs/forms/tag-field-appearance-demo.tsx
+++ b/components/docs/forms/tag-field-appearance-demo.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { useListData } from 'react-stately'
-import { TagField } from 'ui'
+import { useListData } from "react-stately"
+import { TagField } from "ui"
 
 export default function TagFieldAppearanceDemo() {
   const selectedItems = useListData({
diff --git a/components/docs/forms/tag-field-controlled-demo.tsx b/components/docs/forms/tag-field-controlled-demo.tsx
index da24eda6..0ddab9ce 100644
--- a/components/docs/forms/tag-field-controlled-demo.tsx
+++ b/components/docs/forms/tag-field-controlled-demo.tsx
@@ -1,13 +1,13 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { useListData } from 'react-stately'
-import { Description, TagField } from 'ui'
+import { useListData } from "react-stately"
+import { Description, TagField } from "ui"
 
 export default function TagFieldControlledDemo() {
   const selectedItems = useListData({
-    initialItems: [{ id: 1, name: 'Ferrari' }]
+    initialItems: [{ id: 1, name: "Ferrari" }]
   })
 
   return (
@@ -15,8 +15,8 @@ export default function TagFieldControlledDemo() {
       <TagField
         appearance="outline"
         label="Add tag"
-        onItemInserted={(key) => console.log('on item inserted', key)}
-        onItemCleared={(key) => console.log('on item cleared', key)}
+        onItemInserted={(key) => console.log("on item inserted", key)}
+        onItemCleared={(key) => console.log("on item cleared", key)}
         description="You can add multiple tags"
         list={selectedItems}
       />
diff --git a/components/docs/forms/tag-field-demo.tsx b/components/docs/forms/tag-field-demo.tsx
index b772e7e5..02c763e1 100644
--- a/components/docs/forms/tag-field-demo.tsx
+++ b/components/docs/forms/tag-field-demo.tsx
@@ -1,16 +1,16 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { useListData } from 'react-stately'
-import { TagField } from 'ui'
+import { useListData } from "react-stately"
+import { TagField } from "ui"
 
 export default function TagFieldDemo() {
   const selectedItems = useListData({
     initialItems: [
       {
         id: 1,
-        name: 'Laravel'
+        name: "Laravel"
       }
     ]
   })
diff --git a/components/docs/forms/tag-field-disabled-demo.tsx b/components/docs/forms/tag-field-disabled-demo.tsx
index 92069d8b..98e18663 100644
--- a/components/docs/forms/tag-field-disabled-demo.tsx
+++ b/components/docs/forms/tag-field-disabled-demo.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { useListData } from 'react-stately'
-import { TagField } from 'ui'
+import { useListData } from "react-stately"
+import { TagField } from "ui"
 
 export default function TagFieldDisabledDemo() {
   const selectedItems = useListData({
diff --git a/components/docs/forms/tag-field-intent-demo.tsx b/components/docs/forms/tag-field-intent-demo.tsx
index 54d53ef7..7d05ee7d 100644
--- a/components/docs/forms/tag-field-intent-demo.tsx
+++ b/components/docs/forms/tag-field-intent-demo.tsx
@@ -1,28 +1,28 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { useListData } from 'react-stately'
-import { TagField } from 'ui'
+import { useListData } from "react-stately"
+import { TagField } from "ui"
 
 export default function TagFieldIntentDemo() {
   const selectedItems = useListData({
     initialItems: [
       {
         id: 1,
-        name: 'Laravel'
+        name: "Laravel"
       },
       {
         id: 2,
-        name: 'Inertia.js'
+        name: "Inertia.js"
       },
       {
         id: 3,
-        name: 'React'
+        name: "React"
       },
       {
         id: 4,
-        name: 'Tailwind CSS'
+        name: "Tailwind CSS"
       }
     ]
   })
diff --git a/components/docs/forms/tag-field-max-demo.tsx b/components/docs/forms/tag-field-max-demo.tsx
index 0f9fade9..79b00da7 100644
--- a/components/docs/forms/tag-field-max-demo.tsx
+++ b/components/docs/forms/tag-field-max-demo.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { useListData } from 'react-stately'
-import { TagField } from 'ui'
+import { useListData } from "react-stately"
+import { TagField } from "ui"
 
 export default function TagFieldMaxDemo() {
   const selectedItems = useListData({
diff --git a/components/docs/forms/tag-field-shape-demo.tsx b/components/docs/forms/tag-field-shape-demo.tsx
index bc99c705..fb97bb8b 100644
--- a/components/docs/forms/tag-field-shape-demo.tsx
+++ b/components/docs/forms/tag-field-shape-demo.tsx
@@ -1,20 +1,20 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { useListData } from 'react-stately'
-import { TagField } from 'ui'
+import { useListData } from "react-stately"
+import { TagField } from "ui"
 
 export default function TagFieldShapeDemo() {
   const selectedItems = useListData({
     initialItems: [
       {
         id: 1,
-        name: 'Laravel'
+        name: "Laravel"
       },
       {
         id: 2,
-        name: 'Inertia.js'
+        name: "Inertia.js"
       }
     ]
   })
diff --git a/components/docs/forms/text-field-controlled-demo.tsx b/components/docs/forms/text-field-controlled-demo.tsx
index b506ac40..e4f3bea5 100644
--- a/components/docs/forms/text-field-controlled-demo.tsx
+++ b/components/docs/forms/text-field-controlled-demo.tsx
@@ -1,16 +1,16 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { Description, TextField } from 'ui'
+import { Description, TextField } from "ui"
 
 export default function TextFieldControlledDemo() {
-  const [value, setValue] = React.useState('')
+  const [value, setValue] = React.useState("")
   return (
     <>
       <TextField value={value} onChange={setValue} label="Name" className="mb-2" />
       <Description className="mt-2 block [&>strong]:text-fg">
-        You have typed: <strong>{value ?? '-'}</strong>
+        You have typed: <strong>{value ?? "-"}</strong>
       </Description>
     </>
   )
diff --git a/components/docs/forms/text-field-demo.tsx b/components/docs/forms/text-field-demo.tsx
index fad919ca..89508b18 100644
--- a/components/docs/forms/text-field-demo.tsx
+++ b/components/docs/forms/text-field-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { TextField } from 'ui'
+import { TextField } from "ui"
 
 export default function TextFieldDemo() {
   return <TextField label="Name" />
diff --git a/components/docs/forms/text-field-disabled-demo.tsx b/components/docs/forms/text-field-disabled-demo.tsx
index 24183a9b..9ad9fc4a 100644
--- a/components/docs/forms/text-field-disabled-demo.tsx
+++ b/components/docs/forms/text-field-disabled-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { TextField } from 'ui'
+import { TextField } from "ui"
 
 export default function TextFieldDisabledDemo() {
   return <TextField isDisabled label="Name" />
diff --git a/components/docs/forms/text-field-loading-demo.tsx b/components/docs/forms/text-field-loading-demo.tsx
index 881de8aa..087f31ab 100644
--- a/components/docs/forms/text-field-loading-demo.tsx
+++ b/components/docs/forms/text-field-loading-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { TextField } from 'ui'
+import { TextField } from "ui"
 
 export default function TextFieldLoadingDemo() {
   return <TextField isLoading indicatorPlace="suffix" label="Name" />
diff --git a/components/docs/forms/text-field-prefix-suffix-demo.tsx b/components/docs/forms/text-field-prefix-suffix-demo.tsx
index 8a9d6ddb..d8f4613f 100644
--- a/components/docs/forms/text-field-prefix-suffix-demo.tsx
+++ b/components/docs/forms/text-field-prefix-suffix-demo.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { IconBrandTwitter } from 'justd-icons'
-import { TextField } from 'ui'
+import { IconBrandTwitter } from "justd-icons"
+import { TextField } from "ui"
 
 export default function TextFieldPrefixSuffixDemo() {
   return (
diff --git a/components/docs/forms/text-field-readonly-demo.tsx b/components/docs/forms/text-field-readonly-demo.tsx
index 5ae220f8..f2aa035f 100644
--- a/components/docs/forms/text-field-readonly-demo.tsx
+++ b/components/docs/forms/text-field-readonly-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { TextField } from 'ui'
+import { TextField } from "ui"
 
 export default function TextFieldReadonlyDemo() {
   return <TextField isReadOnly label="Name" />
diff --git a/components/docs/forms/text-field-suffix-button-demo.tsx b/components/docs/forms/text-field-suffix-button-demo.tsx
index 7b250087..53084ef8 100644
--- a/components/docs/forms/text-field-suffix-button-demo.tsx
+++ b/components/docs/forms/text-field-suffix-button-demo.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { IconPlus } from 'justd-icons'
-import { Button, Modal, TextField } from 'ui'
+import { IconPlus } from "justd-icons"
+import { Button, Modal, TextField } from "ui"
 
 export default function TextFieldSuffixButtonDemo() {
   const [open, setOpen] = React.useState(false)
diff --git a/components/docs/forms/text-field-validation-demo.tsx b/components/docs/forms/text-field-validation-demo.tsx
index 63606fa1..2a5b9d3f 100644
--- a/components/docs/forms/text-field-validation-demo.tsx
+++ b/components/docs/forms/text-field-validation-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Button, Form, TextField } from 'ui'
+import { Button, Form, TextField } from "ui"
 
 export default function TextFieldValidationDemo() {
   return (
diff --git a/components/docs/forms/textarea-controlled-demo.tsx b/components/docs/forms/textarea-controlled-demo.tsx
index 39826188..777a6c41 100644
--- a/components/docs/forms/textarea-controlled-demo.tsx
+++ b/components/docs/forms/textarea-controlled-demo.tsx
@@ -1,15 +1,15 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { Textarea } from 'ui'
+import { Textarea } from "ui"
 
 export default function TextareaControlledDemo() {
-  const [value, setValue] = React.useState('')
+  const [value, setValue] = React.useState("")
   return (
     <>
       <Textarea value={value} onChange={setValue} label="Address" className="mb-2" />
-      <p className="mt-2">You have typed: {value ?? '-'}</p>
+      <p className="mt-2">You have typed: {value ?? "-"}</p>
     </>
   )
 }
diff --git a/components/docs/forms/textarea-disabled-demo.tsx b/components/docs/forms/textarea-disabled-demo.tsx
index 6f07f073..16b94369 100644
--- a/components/docs/forms/textarea-disabled-demo.tsx
+++ b/components/docs/forms/textarea-disabled-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Textarea } from 'ui'
+import { Textarea } from "ui"
 
 export default function TextareaDisabledDemo() {
   return <Textarea isDisabled label="Address" />
diff --git a/components/docs/forms/textarea-readonly-demo.tsx b/components/docs/forms/textarea-readonly-demo.tsx
index 3a7738c9..4f10e7b3 100644
--- a/components/docs/forms/textarea-readonly-demo.tsx
+++ b/components/docs/forms/textarea-readonly-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Textarea } from 'ui'
+import { Textarea } from "ui"
 
 export default function TextareaReadonlyDemo() {
   return <Textarea isReadOnly label="Address" />
diff --git a/components/docs/forms/textarea-validation-demo.tsx b/components/docs/forms/textarea-validation-demo.tsx
index f494d5f2..31df2a34 100644
--- a/components/docs/forms/textarea-validation-demo.tsx
+++ b/components/docs/forms/textarea-validation-demo.tsx
@@ -1,11 +1,11 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { Button, Form, Textarea } from 'ui'
+import { Button, Form, Textarea } from "ui"
 
 export default function TextareaValidationDemo() {
-  const [value, setValue] = React.useState('')
+  const [value, setValue] = React.useState("")
   return (
     <Form onSubmit={(e) => e.preventDefault()}>
       <Textarea value={value} onChange={setValue} label="Address" isRequired className="mb-2" />
diff --git a/components/docs/generated/previews.json b/components/docs/generated/previews.json
deleted file mode 100644
index af830d1c..00000000
--- a/components/docs/generated/previews.json
+++ /dev/null
@@ -1,2017 +0,0 @@
-{
-  "date-and-time/date-field-demo": {
-    "component": "@/components/docs/date-and-time/date-field-demo",
-    "raw": "'use client'\n\nimport { DateField } from 'ui'\n\nexport default function DateFieldDemo() {\n  return <DateField label=\"Event date\" />\n}\n",
-    "type": "docs"
-  },
-  "date-and-time/date-range-picker-disabled-demo": {
-    "component": "@/components/docs/date-and-time/date-range-picker-disabled-demo",
-    "raw": "'use client'\n\nimport { DateRangePicker } from 'ui'\n\nexport default function DateRangePickerDisabledDemo() {\n  return <DateRangePicker isDisabled label=\"Event date\" />\n}\n",
-    "type": "docs"
-  },
-  "date-and-time/date-range-picker-controlled-demo": {
-    "component": "@/components/docs/date-and-time/date-range-picker-controlled-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { getLocalTimeZone, today } from '@internationalized/date'\nimport { useDateFormatter } from '@react-aria/i18n'\nimport { DateRangePicker } from 'ui'\n\nexport default function DateRangePickerControlledDemo() {\n  const now = today(getLocalTimeZone())\n  const tomorrowWeek = today(getLocalTimeZone()).add({ days: 12 })\n  const formatter = useDateFormatter({ dateStyle: 'full' })\n\n  const [value, setValue] = React.useState({\n    start: now,\n    end: tomorrowWeek\n  })\n\n  return (\n    <div className=\"space-y-3\">\n      <div className=\"divide-y [&_p]:py-2\">\n        <p>\n          {value\n            ? `${formatter.format(value.start.toDate(getLocalTimeZone()))} to ${formatter.format(value.end.toDate(getLocalTimeZone()))}`\n            : '-- to --'}\n        </p>\n        <p>{value ? `${value.start.toString()} to ${value.end.toString()}` : '-- to --'}</p>\n      </div>\n      <DateRangePicker value={value} onChange={setValue} label=\"Event date\" />\n    </div>\n  )\n}\n",
-    "type": "docs"
-  },
-  "date-and-time/time-field-disabled-demo": {
-    "component": "@/components/docs/date-and-time/time-field-disabled-demo",
-    "raw": "'use client'\n\nimport { TimeField } from 'ui'\n\nexport default function TimeFieldDisabledDemo() {\n  return <TimeField isDisabled label=\"Event time\" />\n}\n",
-    "type": "docs"
-  },
-  "date-and-time/date-picker-custom-validation-demo": {
-    "component": "@/components/docs/date-and-time/date-picker-custom-validation-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { getLocalTimeZone, parseDate, startOfYear, today } from '@internationalized/date'\nimport { Button, DatePicker, Form } from 'ui'\n\nexport default function DatePickerInvalidDemo() {\n  const ly = startOfYear(today(getLocalTimeZone()))\n  const now = today(getLocalTimeZone())\n  const [value, setValue] = React.useState(parseDate(ly.toString()))\n  return (\n    <Form onSubmit={(e) => e.preventDefault()}>\n      <DatePicker\n        validate={(date) => (date < now ? 'Select a future date, please.' : null)}\n        value={value}\n        onChange={setValue}\n        label=\"Delivery date\"\n        className=\"mb-2\"\n      />\n\n      <Button type=\"submit\">Submit</Button>\n    </Form>\n  )\n}\n",
-    "type": "docs"
-  },
-  "date-and-time/date-field-controlled-demo": {
-    "component": "@/components/docs/date-and-time/date-field-controlled-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { getLocalTimeZone, parseDate, today } from '@internationalized/date'\nimport { useDateFormatter } from '@react-aria/i18n'\nimport { DateField } from 'ui'\n\nexport default function DateFieldDisabledDemo() {\n  const now = today(getLocalTimeZone())\n  const [value, setValue] = React.useState(parseDate(now.toString()))\n\n  const formatter = useDateFormatter({ dateStyle: 'full' })\n\n  return (\n    <div className=\"space-y-3\">\n      <div className=\"divide-y [&_p]:py-2\">\n        <p>{value ? formatter.format(value.toDate(getLocalTimeZone())) : '--'}</p>\n        <p>{value ? value.toString() : '--'}</p>\n      </div>\n      <DateField value={value} onChange={setValue} label=\"Event date\" />\n    </div>\n  )\n}\n",
-    "type": "docs"
-  },
-  "date-and-time/range-calendar-demo": {
-    "component": "@/components/docs/date-and-time/range-calendar-demo",
-    "raw": "'use client'\n\nimport { RangeCalendar } from 'ui'\n\nexport default function RangeCalendarDemo() {\n  return <RangeCalendar aria-label=\"Range Calendar\" />\n}\n",
-    "type": "docs"
-  },
-  "date-and-time/date-range-picker-time-demo": {
-    "component": "@/components/docs/date-and-time/date-range-picker-time-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { getLocalTimeZone, now, parseZonedDateTime } from '@internationalized/date'\nimport { DateRangePicker } from 'ui'\n\nexport default function DateRangePickerTimeDemo() {\n  const today = parseZonedDateTime(now(getLocalTimeZone()).toString())\n  const tomorrowWeek = today.add({ days: 12 })\n\n  const [value, setValue] = React.useState({\n    start: today,\n    end: tomorrowWeek\n  })\n  return (\n    <DateRangePicker\n      hideTimeZone\n      label=\"Date time range\"\n      value={value}\n      onChange={setValue}\n      hourCycle={24}\n    />\n  )\n}\n",
-    "type": "docs"
-  },
-  "date-and-time/date-picker-demo": {
-    "component": "@/components/docs/date-and-time/date-picker-demo",
-    "raw": "'use client'\n\nimport { DatePicker } from 'ui'\n\nexport default function DatePickerDemo() {\n  return <DatePicker label=\"Event date\" />\n}\n",
-    "type": "docs"
-  },
-  "date-and-time/date-range-picker-custom-validation-demo": {
-    "component": "@/components/docs/date-and-time/date-range-picker-custom-validation-demo",
-    "raw": "'use client'\n\nimport { getLocalTimeZone, today } from '@internationalized/date'\nimport { Button, DateRangePicker, Form } from 'ui'\n\nexport default function DateRangePickerCustomValidationDemo() {\n  return (\n    <Form onSubmit={(e) => e.preventDefault()}>\n      <DateRangePicker\n        label=\"Room Booking Dates\"\n        validate={(range) =>\n          range?.end.compare(range.start) > 7 ? 'Maximum booking duration is 1 week.' : null\n        }\n        defaultValue={{\n          start: today(getLocalTimeZone()),\n          end: today(getLocalTimeZone()).add({ weeks: 2 })\n        }}\n        className=\"mb-2\"\n      />\n      <Button type=\"submit\">Book Room</Button>\n    </Form>\n  )\n}\n",
-    "type": "docs"
-  },
-  "date-and-time/time-field-validation-demo": {
-    "component": "@/components/docs/date-and-time/time-field-validation-demo",
-    "raw": "'use client'\n\nimport { Button, Form, TimeField } from 'ui'\n\nexport default function TimeFieldValidationDemo() {\n  return (\n    <Form onSubmit={(e) => e.preventDefault()}>\n      <TimeField label=\"Event time\" isRequired className=\"mb-2\" />\n      <Button type=\"submit\">Submit</Button>\n    </Form>\n  )\n}\n",
-    "type": "docs"
-  },
-  "date-and-time/date-field-disabled-demo": {
-    "component": "@/components/docs/date-and-time/date-field-disabled-demo",
-    "raw": "'use client'\n\nimport { DateField } from 'ui'\n\nexport default function DateFieldDisabledDemo() {\n  return <DateField isDisabled label=\"Event date\" />\n}\n",
-    "type": "docs"
-  },
-  "date-and-time/date-time-demo": {
-    "component": "@/components/docs/date-and-time/date-time-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { getLocalTimeZone, now, parseZonedDateTime } from '@internationalized/date'\nimport { DatePicker } from 'ui'\n\nexport default function DateTimeDemo() {\n  const today = parseZonedDateTime(now(getLocalTimeZone()).toString())\n  const [value, setValue] = React.useState(today)\n\n  return (\n    <DatePicker\n      hideTimeZone\n      hourCycle={24}\n      className=\"max-w-xs\"\n      value={value}\n      onChange={setValue}\n      label=\"Event date\"\n    />\n  )\n}\n",
-    "type": "docs"
-  },
-  "date-and-time/calendar-demo": {
-    "component": "@/components/docs/date-and-time/calendar-demo",
-    "raw": "'use client'\n\nimport { Calendar } from 'ui'\n\nexport default function CalendarDemo() {\n  return <Calendar aria-label=\"Event date\" />\n}\n",
-    "type": "docs"
-  },
-  "date-and-time/date-range-picker-demo": {
-    "component": "@/components/docs/date-and-time/date-range-picker-demo",
-    "raw": "'use client'\n\nimport { DateRangePicker } from 'ui'\n\nexport default function DateRangePickerDemo() {\n  return <DateRangePicker label=\"Event date\" />\n}\n",
-    "type": "docs"
-  },
-  "date-and-time/date-picker-required-demo": {
-    "component": "@/components/docs/date-and-time/date-picker-required-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { Button, DatePicker, Form } from 'ui'\n\nexport default function DatePickerRequiredDemo() {\n  return (\n    <Form onSubmit={(e) => e.preventDefault()}>\n      <DatePicker label=\"Delivery date\" name=\"deliveryDate\" isRequired className=\"mb-2\" />\n\n      <Button type=\"submit\">Submit</Button>\n    </Form>\n  )\n}\n",
-    "type": "docs"
-  },
-  "date-and-time/time-field-hc-demo": {
-    "component": "@/components/docs/date-and-time/time-field-hc-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { OptionPreview } from '@/components/docs/outside/option-preview'\nimport { Time } from '@internationalized/date'\nimport { Switch, TimeField } from 'ui'\n\nexport default function TimeFieldHcDemo() {\n  const [hc, setHc] = React.useState<12 | 24>(24)\n  const [value, setValue] = React.useState(new Time(13, 45))\n  return (\n    <>\n      <OptionPreview>\n        <Switch\n          isSelected={hc === 24}\n          onChange={() => setHc((prevHc) => (prevHc === 24 ? 12 : 24))}\n        >\n          {hc} hour\n        </Switch>\n      </OptionPreview>\n      <TimeField value={value} onChange={setValue} hourCycle={hc} label=\"Event time\" />\n    </>\n  )\n}\n",
-    "type": "docs"
-  },
-  "date-and-time/time-field-controlled-demo": {
-    "component": "@/components/docs/date-and-time/time-field-controlled-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { Time } from '@internationalized/date'\nimport { TimeField } from 'ui'\n\nexport default function TimeFieldValidationDemo() {\n  const [value, setValue] = React.useState(new Time(11, 45))\n  return (\n    <div className=\"space-y-3\">\n      <div className=\"[&_p]:py-2\">\n        <p>{value ? value.toString() : '--'}</p>\n      </div>\n      <TimeField label=\"Event time\" value={value} onChange={setValue} />\n    </div>\n  )\n}\n",
-    "type": "docs"
-  },
-  "date-and-time/date-time-field-demo": {
-    "component": "@/components/docs/date-and-time/date-time-field-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { getLocalTimeZone, now, parseZonedDateTime } from '@internationalized/date'\nimport { DateField } from 'ui'\n\nexport default function DateTimeFieldDemo() {\n  const today = parseZonedDateTime(now(getLocalTimeZone()).toString())\n  const [value, setValue] = React.useState(today)\n  return (\n    <DateField hideTimeZone hourCycle={24} value={value} onChange={setValue} label=\"Event date\" />\n  )\n}\n",
-    "type": "docs"
-  },
-  "date-and-time/date-field-validation-demo": {
-    "component": "@/components/docs/date-and-time/date-field-validation-demo",
-    "raw": "'use client'\n\nimport { Button, DateField, Form } from 'ui'\n\nexport default function DateFieldDisabledDemo() {\n  return (\n    <Form onSubmit={(e) => e.preventDefault()}>\n      <DateField isRequired label=\"Event date\" className=\"mb-2\" />\n      <Button type=\"submit\">Submit</Button>\n    </Form>\n  )\n}\n",
-    "type": "docs"
-  },
-  "date-and-time/date-picker-disabled-demo": {
-    "component": "@/components/docs/date-and-time/date-picker-disabled-demo",
-    "raw": "'use client'\n\nimport { DatePicker } from 'ui'\n\nexport default function DatePickerDisabledDemo() {\n  return <DatePicker isDisabled label=\"Event date\" />\n}\n",
-    "type": "docs"
-  },
-  "date-and-time/time-field-demo": {
-    "component": "@/components/docs/date-and-time/time-field-demo",
-    "raw": "'use client'\n\nimport { Time } from '@internationalized/date'\nimport { TimeField } from 'ui'\n\nexport default function TimeFieldDemo() {\n  return <TimeField defaultValue={new Time()} label=\"Event time\" />\n}\n",
-    "type": "docs"
-  },
-  "date-and-time/date-range-picker-validation-demo": {
-    "component": "@/components/docs/date-and-time/date-range-picker-validation-demo",
-    "raw": "'use client'\n\nimport { Button, DateRangePicker, Form } from 'ui'\n\nexport default function DateRangePickerValidationDemo() {\n  return (\n    <Form onSubmit={(e) => e.preventDefault()}>\n      <DateRangePicker isRequired label=\"Event date\" className=\"mb-2\" />\n      <Button type=\"submit\">Submit</Button>\n    </Form>\n  )\n}\n",
-    "type": "docs"
-  },
-  "date-and-time/date-picker-controlled-demo": {
-    "component": "@/components/docs/date-and-time/date-picker-controlled-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { getLocalTimeZone, parseDate, today } from '@internationalized/date'\nimport { useDateFormatter } from '@react-aria/i18n'\nimport { DatePicker } from 'ui'\n\nexport default function DatePickerControlledDemo() {\n  const now = today(getLocalTimeZone())\n\n  const [value, setValue] = React.useState(parseDate(now.toString()))\n\n  const formatter = useDateFormatter({ dateStyle: 'full' })\n\n  return (\n    <div className=\"space-y-3\">\n      <div className=\"divide-y [&_p]:py-2\">\n        <p>{value ? formatter.format(value.toDate(getLocalTimeZone())) : '--'}</p>\n        <p>{value ? value.toString() : '--'}</p>\n      </div>\n      <DatePicker value={value} onChange={setValue} label=\"Event date\" />\n    </div>\n  )\n}\n",
-    "type": "docs"
-  },
-  "forms/text-field-validation-demo": {
-    "component": "@/components/docs/forms/text-field-validation-demo",
-    "raw": "'use client'\n\nimport { Button, Form, TextField } from 'ui'\n\nexport default function TextFieldValidationDemo() {\n  return (\n    <Form>\n      <TextField isRequired label=\"Name\" className=\"mb-2\" />\n      <Button type=\"submit\">Submit</Button>\n    </Form>\n  )\n}\n",
-    "type": "docs"
-  },
-  "forms/checkbox-demo": {
-    "component": "@/components/docs/forms/checkbox-demo",
-    "raw": "'use client'\n\nimport { Checkbox } from 'ui'\n\nexport default function CheckboxDemo() {\n  return <Checkbox>Enable notifications</Checkbox>\n}\n",
-    "type": "docs"
-  },
-  "forms/checkbox-group-demo": {
-    "component": "@/components/docs/forms/checkbox-group-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { Checkbox, CheckboxGroup } from 'ui'\n\nexport default function CheckboxGroupDemo() {\n  return (\n    <CheckboxGroup label=\"Settings\">\n      <Checkbox value=\"notifications\">Enable notifications</Checkbox>\n      <Checkbox value=\"auto_update\">Auto-update applications</Checkbox>\n      <Checkbox value=\"dark_mode\">Enable dark mode</Checkbox>\n      <Checkbox value=\"location_access\">Allow location access</Checkbox>\n      <Checkbox value=\"two_factor_auth\">Enable two-factor authentication</Checkbox>\n    </CheckboxGroup>\n  )\n}\n",
-    "type": "docs"
-  },
-  "forms/search-field-controlled-demo": {
-    "component": "@/components/docs/forms/search-field-controlled-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { Description, SearchField } from 'ui'\n\nexport default function SearchFieldControlledDemo() {\n  const [value, setValue] = React.useState('')\n  return (\n    <>\n      <SearchField value={value} onChange={setValue} className=\"mb-2\" />\n      <Description className=\"mt-2 block [&>strong]:text-fg\">\n        You have typed: <strong>{value ?? '-'}</strong>\n      </Description>\n    </>\n  )\n}\n",
-    "type": "docs"
-  },
-  "forms/checkbox-indeterminate-demo": {
-    "component": "@/components/docs/forms/checkbox-indeterminate-demo",
-    "raw": "'use client'\n\nimport { Checkbox } from 'ui'\n\nexport default function CheckboxIndeterminateDemo() {\n  return (\n    <Checkbox value=\"read\" isIndeterminate>\n      Read\n    </Checkbox>\n  )\n}\n",
-    "type": "docs"
-  },
-  "forms/text-field-readonly-demo": {
-    "component": "@/components/docs/forms/text-field-readonly-demo",
-    "raw": "'use client'\n\nimport { TextField } from 'ui'\n\nexport default function TextFieldReadonlyDemo() {\n  return <TextField isReadOnly label=\"Name\" />\n}\n",
-    "type": "docs"
-  },
-  "forms/input-otp-controlled-demo": {
-    "component": "@/components/docs/forms/input-otp-controlled-demo",
-    "raw": "import React from 'react'\n\nimport { InputOTP, InputOTPGroup, InputOTPSlot } from 'ui'\n\nexport default function InputOtpControlledDemo() {\n  const [value, setValue] = React.useState('')\n  return (\n    <div className=\"space-y-2\">\n      <InputOTP maxLength={6} value={value} onChange={setValue}>\n        <InputOTPGroup>\n          {[...Array(6)].map((_, index) => (\n            <InputOTPSlot key={index} index={index} />\n          ))}\n        </InputOTPGroup>\n      </InputOTP>\n\n      <div className=\"text-center text-sm\">\n        {value === '' ? <>Enter your one-time password.</> : <>You entered: {value}</>}\n      </div>\n    </div>\n  )\n}\n",
-    "type": "docs"
-  },
-  "forms/input-otp-separator-demo": {
-    "component": "@/components/docs/forms/input-otp-separator-demo",
-    "raw": "'use client'\n\nimport { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from 'ui'\n\nexport default function InputOtpSeparatorDemo() {\n  return (\n    <InputOTP maxLength={6}>\n      <InputOTPGroup>\n        <InputOTPSlot index={0} />\n        <InputOTPSlot index={1} />\n        <InputOTPSlot index={2} />\n      </InputOTPGroup>\n      <InputOTPSeparator />\n      <InputOTPGroup>\n        <InputOTPSlot index={3} />\n        <InputOTPSlot index={4} />\n        <InputOTPSlot index={5} />\n      </InputOTPGroup>\n    </InputOTP>\n  )\n}\n",
-    "type": "docs"
-  },
-  "forms/form-validation-demo": {
-    "component": "@/components/docs/forms/form-validation-demo",
-    "raw": "'use client'\n\nimport { Button, Form, TextField } from 'ui'\n\nexport default function FormValidationDemo() {\n  return (\n    <Form onSubmit={() => {}}>\n      <TextField label=\"Name\" isRequired className=\"mb-2\" />\n      <Button type=\"submit\">Submit</Button>\n    </Form>\n  )\n}\n",
-    "type": "docs"
-  },
-  "forms/textarea-demo": {
-    "component": "@/components/docs/forms/textarea-demo",
-    "raw": "'use client'\n\nimport { Textarea } from 'ui'\n\nexport default function TextareaDemo() {\n  return <Textarea label=\"Address\" />\n}\n",
-    "type": "docs"
-  },
-  "forms/checkbox-description-demo": {
-    "component": "@/components/docs/forms/checkbox-description-demo",
-    "raw": "'use client'\n\nimport { Checkbox } from 'ui'\n\nexport default function CheckboxDescriptionDemo() {\n  return <Checkbox label=\"Postal Mail\" description=\"Receive notifications via postal mail\" />\n}\n",
-    "type": "docs"
-  },
-  "forms/checkbox-group-description-demo": {
-    "component": "@/components/docs/forms/checkbox-group-description-demo",
-    "raw": "'use client'\n\nimport { Checkbox, CheckboxGroup } from 'ui'\n\nexport default function CheckboxGroupDescriptionDemo() {\n  return (\n    <CheckboxGroup\n      label=\"User Permissions\"\n      description=\"Select the permissions you want to grant to the user.\"\n    >\n      <Checkbox value=\"read\">Read</Checkbox>\n      <Checkbox value=\"write\">Write</Checkbox>\n      <Checkbox value=\"delete\">Delete</Checkbox>\n      <Checkbox value=\"admin\">Admin</Checkbox>\n    </CheckboxGroup>\n  )\n}\n",
-    "type": "docs"
-  },
-  "forms/number-field-invalid-demo": {
-    "component": "@/components/docs/forms/number-field-invalid-demo",
-    "raw": "'use client'\n\nimport { NumberField } from 'ui'\n\nexport default function NumberFieldInvalidDemo() {\n  return <NumberField isInvalid label=\"Cookies\" />\n}\n",
-    "type": "docs"
-  },
-  "forms/number-field-disabled-demo": {
-    "component": "@/components/docs/forms/number-field-disabled-demo",
-    "raw": "'use client'\n\nimport { NumberField } from 'ui'\n\nexport default function NumberFieldDisabledDemo() {\n  return <NumberField isDisabled label=\"Cookies\" />\n}\n",
-    "type": "docs"
-  },
-  "forms/search-field-disabled-demo": {
-    "component": "@/components/docs/forms/search-field-disabled-demo",
-    "raw": "'use client'\n\nimport { SearchField } from 'ui'\n\nexport default function SearchFieldDisabledDemo() {\n  return <SearchField isDisabled />\n}\n",
-    "type": "docs"
-  },
-  "forms/checkbox-controlled-demo": {
-    "component": "@/components/docs/forms/checkbox-controlled-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { Checkbox, Description } from 'ui'\n\nexport default function CheckboxControlledDemo() {\n  const [selected, setSelection] = React.useState(false)\n  return (\n    <>\n      <Checkbox isSelected={selected} onChange={setSelection} value=\"updates\">\n        Receive Updates\n      </Checkbox>\n      <Description className=\"mt-2 block [&>strong]:text-fg\">\n        You have <strong>{selected ? 'enabled' : 'disabled'}</strong> the option.\n      </Description>\n    </>\n  )\n}\n",
-    "type": "docs"
-  },
-  "forms/tag-field-intent-demo": {
-    "component": "@/components/docs/forms/tag-field-intent-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { useListData } from 'react-stately'\nimport { TagField } from 'ui'\n\nexport default function TagFieldIntentDemo() {\n  const selectedItems = useListData({\n    initialItems: [\n      {\n        id: 1,\n        name: 'Laravel'\n      },\n      {\n        id: 2,\n        name: 'Inertia.js'\n      },\n      {\n        id: 3,\n        name: 'React'\n      },\n      {\n        id: 4,\n        name: 'Tailwind CSS'\n      }\n    ]\n  })\n\n  return (\n    <TagField intent=\"secondary\" className=\"max-w-xs\" aria-label=\"Add tag\" list={selectedItems} />\n  )\n}\n",
-    "type": "docs"
-  },
-  "forms/number-field-controlled-demo": {
-    "component": "@/components/docs/forms/number-field-controlled-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { Description, NumberField } from 'ui'\n\nexport default function NumberFieldControlledDemo() {\n  const [number, setNumber] = React.useState(1280)\n  return (\n    <div>\n      <NumberField label=\"Width\" value={number} onChange={setNumber} />\n\n      <Description className=\"mt-2 block [&>strong]:text-fg\">\n        You have typed: <strong>{number ?? '-'}</strong>\n      </Description>\n    </div>\n  )\n}\n",
-    "type": "docs"
-  },
-  "forms/radio-group-demo": {
-    "component": "@/components/docs/forms/radio-group-demo",
-    "raw": "'use client'\n\nimport { Radio, RadioGroup } from 'ui'\n\nexport default function RadioGroupDemo() {\n  return (\n    <RadioGroup label=\"Features\">\n      <Radio value=\"fs\">Font size: Small, Medium, Large</Radio>\n      <Radio value=\"dr\">Display resolution: 1080p, 1440p, 4K</Radio>\n      <Radio value=\"ss\">Sound settings: Mute, Low, Medium, High</Radio>\n      <Radio value=\"bi\">Background image: Default, Custom</Radio>\n      <Radio value=\"ks\">Keyboard shortcuts: Enabled, Disabled</Radio>\n    </RadioGroup>\n  )\n}\n",
-    "type": "docs"
-  },
-  "forms/textarea-controlled-demo": {
-    "component": "@/components/docs/forms/textarea-controlled-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { Textarea } from 'ui'\n\nexport default function TextareaControlledDemo() {\n  const [value, setValue] = React.useState('')\n  return (\n    <>\n      <Textarea value={value} onChange={setValue} label=\"Address\" className=\"mb-2\" />\n      <p className=\"mt-2\">You have typed: {value ?? '-'}</p>\n    </>\n  )\n}\n",
-    "type": "docs"
-  },
-  "forms/tag-field-disabled-demo": {
-    "component": "@/components/docs/forms/tag-field-disabled-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { useListData } from 'react-stately'\nimport { TagField } from 'ui'\n\nexport default function TagFieldDisabledDemo() {\n  const selectedItems = useListData({\n    initialItems: []\n  })\n\n  return <TagField isDisabled label=\"Add tag\" list={selectedItems} />\n}\n",
-    "type": "docs"
-  },
-  "forms/tag-field-max-demo": {
-    "component": "@/components/docs/forms/tag-field-max-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { useListData } from 'react-stately'\nimport { TagField } from 'ui'\n\nexport default function TagFieldMaxDemo() {\n  const selectedItems = useListData({\n    initialItems: []\n  })\n\n  return (\n    <TagField\n      className=\"max-w-sm\"\n      max={3}\n      label=\"Add tag\"\n      description=\"You can only add 3 tags\"\n      list={selectedItems}\n    />\n  )\n}\n",
-    "type": "docs"
-  },
-  "forms/textarea-readonly-demo": {
-    "component": "@/components/docs/forms/textarea-readonly-demo",
-    "raw": "'use client'\n\nimport { Textarea } from 'ui'\n\nexport default function TextareaReadonlyDemo() {\n  return <Textarea isReadOnly label=\"Address\" />\n}\n",
-    "type": "docs"
-  },
-  "forms/checkbox-invalid-demo": {
-    "component": "@/components/docs/forms/checkbox-invalid-demo",
-    "raw": "'use client'\n\nimport { Checkbox } from 'ui'\n\nexport default function CheckboxInvalidDemo() {\n  return <Checkbox isInvalid>Enable notifications</Checkbox>\n}\n",
-    "type": "docs"
-  },
-  "forms/tag-field-shape-demo": {
-    "component": "@/components/docs/forms/tag-field-shape-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { useListData } from 'react-stately'\nimport { TagField } from 'ui'\n\nexport default function TagFieldShapeDemo() {\n  const selectedItems = useListData({\n    initialItems: [\n      {\n        id: 1,\n        name: 'Laravel'\n      },\n      {\n        id: 2,\n        name: 'Inertia.js'\n      }\n    ]\n  })\n\n  return <TagField shape=\"circle\" className=\"max-w-xs\" label=\"Add tag\" list={selectedItems} />\n}\n",
-    "type": "docs"
-  },
-  "forms/search-field-demo": {
-    "component": "@/components/docs/forms/search-field-demo",
-    "raw": "'use client'\n\nimport { SearchField } from 'ui'\n\nexport default function SearchFieldDemo() {\n  return <SearchField aria-label=\"Search\" placeholder=\"Search\" />\n}\n",
-    "type": "docs"
-  },
-  "forms/tag-field-controlled-demo": {
-    "component": "@/components/docs/forms/tag-field-controlled-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { useListData } from 'react-stately'\nimport { Description, TagField } from 'ui'\n\nexport default function TagFieldControlledDemo() {\n  const selectedItems = useListData({\n    initialItems: [{ id: 1, name: 'Ferrari' }]\n  })\n\n  return (\n    <div className=\"max-w-xs\">\n      <TagField\n        appearance=\"outline\"\n        label=\"Add tag\"\n        onItemInserted={(key) => console.log('on item inserted', key)}\n        onItemCleared={(key) => console.log('on item cleared', key)}\n        description=\"You can add multiple tags\"\n        list={selectedItems}\n      />\n      <Description className=\"max-w-xs block [&>strong]:text-fg [&>strong]:text-medium mt-4\">\n        {JSON.stringify(selectedItems.items)}\n      </Description>\n    </div>\n  )\n}\n",
-    "type": "docs"
-  },
-  "forms/radio-group-controlled-demo": {
-    "component": "@/components/docs/forms/radio-group-controlled-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { Description, Radio, RadioGroup } from 'ui'\n\nexport default function RadioGroupControlledDemo() {\n  const [selected, setSelected] = React.useState('')\n  return (\n    <>\n      <RadioGroup label=\"Features\" value={selected} onChange={setSelected}>\n        <Radio value=\"theme\">Theme</Radio>\n        <Radio value=\"language\">Language</Radio>\n        <Radio value=\"timezone\">Timezone</Radio>\n        <Radio value=\"notifications\">Notifications</Radio>\n        <Radio value=\"privacy\">Privacy</Radio>\n      </RadioGroup>\n      <Description className=\"mt-2 block [&>strong]:text-fg\">\n        You have selected: <strong>{selected ?? '-'}</strong>\n      </Description>\n    </>\n  )\n}\n",
-    "type": "docs"
-  },
-  "forms/text-field-prefix-suffix-demo": {
-    "component": "@/components/docs/forms/text-field-prefix-suffix-demo",
-    "raw": "'use client'\n\nimport { IconBrandTwitter } from 'justd-icons'\nimport { TextField } from 'ui'\n\nexport default function TextFieldPrefixSuffixDemo() {\n  return (\n    <div className=\"flex flex-col gap-4\">\n      <TextField label=\"Twitter\" suffix={<IconBrandTwitter />} />\n      <TextField label=\"Sites\" prefix=\"https://\" suffix=\".com\" />\n    </div>\n  )\n}\n",
-    "type": "docs"
-  },
-  "forms/textarea-disabled-demo": {
-    "component": "@/components/docs/forms/textarea-disabled-demo",
-    "raw": "'use client'\n\nimport { Textarea } from 'ui'\n\nexport default function TextareaDisabledDemo() {\n  return <Textarea isDisabled label=\"Address\" />\n}\n",
-    "type": "docs"
-  },
-  "forms/input-otp-demo": {
-    "component": "@/components/docs/forms/input-otp-demo",
-    "raw": "'use client'\n\nimport { InputOTP, InputOTPGroup, InputOTPSlot } from 'ui'\n\nexport default function InputOtpDemo() {\n  return (\n    <div>\n      <InputOTP maxLength={6}>\n        <InputOTPGroup>\n          {[...Array(6)].map((_, index) => (\n            <InputOTPSlot key={index} index={index} />\n          ))}\n        </InputOTPGroup>\n      </InputOTP>\n    </div>\n  )\n}\n",
-    "type": "docs"
-  },
-  "forms/radio-group-orientation-demo": {
-    "component": "@/components/docs/forms/radio-group-orientation-demo",
-    "raw": "'use client'\n\nimport { Radio, RadioGroup } from 'ui'\n\nexport default function RadioGroupOrientationDemo() {\n  return (\n    <RadioGroup orientation=\"horizontal\" label=\"Payment Method\">\n      <Radio value=\"credit-card\">Credit Card</Radio>\n      <Radio value=\"paypal\">PayPal</Radio>\n      <Radio value=\"apple-pay\">Apple Pay</Radio>\n      <Radio value=\"google-pay\">Google Pay</Radio>\n      <Radio value=\"bank-transfer\">Bank Transfer</Radio>\n    </RadioGroup>\n  )\n}\n",
-    "type": "docs"
-  },
-  "forms/text-field-demo": {
-    "component": "@/components/docs/forms/text-field-demo",
-    "raw": "'use client'\n\nimport { TextField } from 'ui'\n\nexport default function TextFieldDemo() {\n  return <TextField label=\"Name\" />\n}\n",
-    "type": "docs"
-  },
-  "forms/textarea-validation-demo": {
-    "component": "@/components/docs/forms/textarea-validation-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { Button, Form, Textarea } from 'ui'\n\nexport default function TextareaValidationDemo() {\n  const [value, setValue] = React.useState('')\n  return (\n    <Form onSubmit={(e) => e.preventDefault()}>\n      <Textarea value={value} onChange={setValue} label=\"Address\" isRequired className=\"mb-2\" />\n      <Button type=\"submit\">Submit</Button>\n    </Form>\n  )\n}\n",
-    "type": "docs"
-  },
-  "forms/form-demo": {
-    "component": "@/components/docs/forms/form-demo",
-    "raw": "'use client'\n\nimport { Button, Form, Heading, TextField } from 'ui'\n\nexport default function FormDemo() {\n  return (\n    <div className=\"mx-auto max-w-md py-10\">\n      <Heading level={2} className=\"mb-4\">\n        Register\n      </Heading>\n      <Form onSubmit={() => {}} className=\"space-y-4\">\n        <TextField isRequired label=\"Name\" placeholder=\"Enter your name\" />\n        <TextField isRequired label=\"Email\" placeholder=\"Enter your email\" />\n        <div className=\"grid grid-cols-2 gap-4\">\n          <TextField\n            isRequired\n            label=\"Password\"\n            placeholder=\"Enter your password\"\n            type=\"password\"\n          />\n          <TextField\n            isRequired\n            label=\"Confirm Password\"\n            placeholder=\"Enter your password again\"\n            type=\"password\"\n          />\n        </div>\n        <Button type=\"submit\">Submit</Button>\n      </Form>\n    </div>\n  )\n}\n",
-    "type": "docs"
-  },
-  "forms/radio-group-invalid-demo": {
-    "component": "@/components/docs/forms/radio-group-invalid-demo",
-    "raw": "'use client'\n\nimport { Radio, RadioGroup } from 'ui'\n\nexport default function RadioGroupInvalidDemo() {\n  return (\n    <RadioGroup isInvalid label=\"Features\">\n      <Radio value=\"fs\">Font size: Small, Medium, Large</Radio>\n      <Radio value=\"dr\">Display resolution: 1080p, 1440p, 4K</Radio>\n      <Radio value=\"ss\">Sound settings: Mute, Low, Medium, High</Radio>\n      <Radio value=\"bi\">Background image: Default, Custom</Radio>\n      <Radio value=\"ks\">Keyboard shortcuts: Enabled, Disabled</Radio>\n    </RadioGroup>\n  )\n}\n",
-    "type": "docs"
-  },
-  "forms/text-field-disabled-demo": {
-    "component": "@/components/docs/forms/text-field-disabled-demo",
-    "raw": "'use client'\n\nimport { TextField } from 'ui'\n\nexport default function TextFieldDisabledDemo() {\n  return <TextField isDisabled label=\"Name\" />\n}\n",
-    "type": "docs"
-  },
-  "forms/radio-group-disabled-demo": {
-    "component": "@/components/docs/forms/radio-group-disabled-demo",
-    "raw": "'use client'\n\nimport { Radio, RadioGroup } from 'ui'\n\nexport default function RadioGroupDisabledDemo() {\n  return (\n    <RadioGroup isDisabled label=\"Features\">\n      <Radio value=\"fs\">Font size: Small, Medium, Large</Radio>\n      <Radio value=\"dr\">Display resolution: 1080p, 1440p, 4K</Radio>\n      <Radio value=\"ss\">Sound settings: Mute, Low, Medium, High</Radio>\n      <Radio value=\"bi\">Background image: Default, Custom</Radio>\n      <Radio value=\"ks\">Keyboard shortcuts: Enabled, Disabled</Radio>\n    </RadioGroup>\n  )\n}\n",
-    "type": "docs"
-  },
-  "forms/number-field-demo": {
-    "component": "@/components/docs/forms/number-field-demo",
-    "raw": "'use client'\n\nimport { NumberField } from 'ui'\n\nexport default function NumberFieldDemo() {\n  return <NumberField label=\"Cookies\" />\n}\n",
-    "type": "docs"
-  },
-  "forms/tag-field-demo": {
-    "component": "@/components/docs/forms/tag-field-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { useListData } from 'react-stately'\nimport { TagField } from 'ui'\n\nexport default function TagFieldDemo() {\n  const selectedItems = useListData({\n    initialItems: [\n      {\n        id: 1,\n        name: 'Laravel'\n      }\n    ]\n  })\n\n  return <TagField className=\"max-w-xs\" label=\"Add tag\" list={selectedItems} />\n}\n",
-    "type": "docs"
-  },
-  "forms/checkbox-disabled-demo": {
-    "component": "@/components/docs/forms/checkbox-disabled-demo",
-    "raw": "'use client'\n\nimport { Checkbox } from 'ui'\n\nexport default function CheckboxDisabledDemo() {\n  return <Checkbox isDisabled>Enable notifications</Checkbox>\n}\n",
-    "type": "docs"
-  },
-  "forms/radio-group-description-demo": {
-    "component": "@/components/docs/forms/radio-group-description-demo",
-    "raw": "'use client'\n\nimport { Radio, RadioGroup } from 'ui'\n\nexport default function RadioGroupDescriptionDemo() {\n  return (\n    <RadioGroup\n      description=\"Select your preferred shipping method for the delivery of your items.\"\n      label=\"Shipping Method\"\n    >\n      <Radio value=\"standard\">Standard</Radio>\n      <Radio value=\"express\">Express</Radio>\n      <Radio value=\"overnight\">Overnight</Radio>\n      <Radio value=\"international\">International</Radio>\n      <Radio value=\"pickup\">Pickup</Radio>\n    </RadioGroup>\n  )\n}\n",
-    "type": "docs"
-  },
-  "forms/text-field-loading-demo": {
-    "component": "@/components/docs/forms/text-field-loading-demo",
-    "raw": "'use client'\n\nimport { TextField } from 'ui'\n\nexport default function TextFieldLoadingDemo() {\n  return <TextField isLoading indicatorPlace=\"suffix\" label=\"Name\" />\n}\n",
-    "type": "docs"
-  },
-  "forms/text-field-controlled-demo": {
-    "component": "@/components/docs/forms/text-field-controlled-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { Description, TextField } from 'ui'\n\nexport default function TextFieldControlledDemo() {\n  const [value, setValue] = React.useState('')\n  return (\n    <>\n      <TextField value={value} onChange={setValue} label=\"Name\" className=\"mb-2\" />\n      <Description className=\"mt-2 block [&>strong]:text-fg\">\n        You have typed: <strong>{value ?? '-'}</strong>\n      </Description>\n    </>\n  )\n}\n",
-    "type": "docs"
-  },
-  "forms/search-field-with-label-demo": {
-    "component": "@/components/docs/forms/search-field-with-label-demo",
-    "raw": "'use client'\n\nimport { SearchField } from 'ui'\n\nexport default function SearchFieldWithLabelDemo() {\n  return <SearchField label=\"Search\" />\n}\n",
-    "type": "docs"
-  },
-  "forms/text-field-suffix-button-demo": {
-    "component": "@/components/docs/forms/text-field-suffix-button-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { IconPlus } from 'justd-icons'\nimport { Button, Modal, TextField } from 'ui'\n\nexport default function TextFieldSuffixButtonDemo() {\n  const [open, setOpen] = React.useState(false)\n  const close = () => setOpen(false)\n  return (\n    <>\n      <Modal.Content isOpen={open} onOpenChange={close}>\n        <Modal.Header>\n          <Modal.Title>New User</Modal.Title>\n          <Modal.Description>Create a new user account</Modal.Description>\n        </Modal.Header>\n        <Modal.Body className=\"flex flex-col gap-4\">\n          <TextField label=\"Username\" placeholder=\"Username\" />\n          <TextField label=\"Email\" placeholder=\"Email\" type=\"email\" />\n        </Modal.Body>\n        <Modal.Footer>\n          <Modal.Close appearance=\"outline\">Cancel</Modal.Close>\n          <Button onPress={close}>Continue</Button>\n        </Modal.Footer>\n      </Modal.Content>\n      <TextField\n        label=\"Username\"\n        suffix={\n          <Button aria-label=\"New user\" onPress={() => setOpen(true)} appearance=\"outline\">\n            <IconPlus />\n          </Button>\n        }\n      />\n    </>\n  )\n}\n",
-    "type": "docs"
-  },
-  "forms/radio-group-children-description-demo": {
-    "component": "@/components/docs/forms/radio-group-children-description-demo",
-    "raw": "'use client'\n\nimport { Radio, RadioGroup } from 'ui'\n\nexport default function RadioGroupChildrenDescriptionDemo() {\n  return (\n    <RadioGroup orientation=\"horizontal\">\n      <Radio value=\"basic\" description=\"Basic plan with limited features\">\n        Basic\n      </Radio>\n      <Radio value=\"standard\" description=\"Standard plan with more features\">\n        Standard\n      </Radio>\n      <Radio value=\"premium\" description=\"Premium plan with all features\">\n        Premium\n      </Radio>\n      <Radio value=\"family\" description=\"Family plan for multiple users\">\n        Family\n      </Radio>\n      <Radio value=\"student\" description=\"Discounted plan for students\">\n        Student\n      </Radio>\n      <Radio value=\"custom\">Custom</Radio>\n    </RadioGroup>\n  )\n}\n",
-    "type": "docs"
-  },
-  "forms/checkbox-group-disabled-demo": {
-    "component": "@/components/docs/forms/checkbox-group-disabled-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { Checkbox, CheckboxGroup } from 'ui'\n\nexport default function CheckboxDisabledDemo() {\n  return (\n    <CheckboxGroup isDisabled label=\"Settings\">\n      <Checkbox value=\"notifications\">Enable notifications</Checkbox>\n      <Checkbox value=\"auto_update\">Auto-update applications</Checkbox>\n      <Checkbox value=\"dark_mode\">Enable dark mode</Checkbox>\n      <Checkbox value=\"location_access\">Allow location access</Checkbox>\n      <Checkbox value=\"two_factor_auth\">Enable two-factor authentication</Checkbox>\n    </CheckboxGroup>\n  )\n}\n",
-    "type": "docs"
-  },
-  "forms/checkbox-group-controlled-demo": {
-    "component": "@/components/docs/forms/checkbox-group-controlled-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { Checkbox, CheckboxGroup, Description } from 'ui'\n\nexport default function CheckboxGroupControlledDemo() {\n  const [values, setValues] = React.useState<string[]>([])\n  return (\n    <>\n      <CheckboxGroup value={values} onChange={setValues} label=\"Options\">\n        <Checkbox value=\"sound\">Sound</Checkbox>\n        <Checkbox value=\"wifi\">Wi-Fi</Checkbox>\n        <Checkbox value=\"sync\">Sync</Checkbox>\n      </CheckboxGroup>\n\n      <Description className=\"flex flex-col gap-y-1 h-10 mt-2 [&>strong]:text-fg [&>strong]:font-medium\">\n        {values.length > 0 ? (\n          <>\n            Selected values <strong className=\"font-medium\">{values.join(', ')}</strong>\n          </>\n        ) : (\n          'No values selected'\n        )}\n      </Description>\n    </>\n  )\n}\n",
-    "type": "docs"
-  },
-  "forms/tag-field-appearance-demo": {
-    "component": "@/components/docs/forms/tag-field-appearance-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { useListData } from 'react-stately'\nimport { TagField } from 'ui'\n\nexport default function TagFieldAppearanceDemo() {\n  const selectedItems = useListData({\n    initialItems: []\n  })\n\n  return <TagField appearance=\"plain\" placeholder=\"Tags...\" list={selectedItems} />\n}\n",
-    "type": "docs"
-  },
-  "forms/search-field-validation-demo": {
-    "component": "@/components/docs/forms/search-field-validation-demo",
-    "raw": "'use client'\n\nimport { Button, Form, SearchField } from 'ui'\n\nexport default function SearchFieldValidationDemo() {\n  return (\n    <Form>\n      <SearchField isRequired label=\"Name\" className=\"mb-2\" />\n      <Button type=\"submit\">Submit</Button>\n    </Form>\n  )\n}\n",
-    "type": "docs"
-  },
-  "buttons/file-trigger-disabled-demo": {
-    "component": "@/components/docs/buttons/file-trigger-disabled-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { Description, FileTrigger } from 'ui'\n\nexport default function FileTriggerDemo() {\n  const [file, setFile] = React.useState<string[] | null>(null)\n  return (\n    <>\n      <FileTrigger\n        isDisabled\n        onSelect={(e) => {\n          const files = Array.from(e ?? [])\n          const filenames = files.map((file) => file.name)\n          setFile(filenames)\n        }}\n      />\n      {file && <Description>{file}</Description>}\n    </>\n  )\n}\n",
-    "type": "docs"
-  },
-  "buttons/button-intent-demo": {
-    "component": "@/components/docs/buttons/button-intent-demo",
-    "raw": "'use client'\n\nimport { IconBackspace } from 'justd-icons'\nimport { Button, gridStyles } from 'ui'\n\nexport default function ButtonIntentDemo() {\n  return (\n    <div className={gridStyles({ columns: { initial: 2, sm: 3, lg: 4 }, gap: 3 })}>\n      <Button intent=\"warning\"> Label</Button>\n      <Button intent=\"light\">Label</Button>\n      <Button intent=\"secondary\">Label</Button>\n      <Button intent=\"danger\">Label</Button>\n      <Button intent=\"info\">\n        <IconBackspace />\n        Label\n      </Button>\n      <Button intent=\"light/dark\">Label</Button>\n      <Button intent=\"success\">Label</Button>\n      <Button>Label</Button>\n    </div>\n  )\n}\n",
-    "type": "docs"
-  },
-  "buttons/file-trigger-folder-demo": {
-    "component": "@/components/docs/buttons/file-trigger-folder-demo",
-    "raw": "'use client'\n\nimport { FileTrigger } from 'ui'\n\nexport default function FileTriggerFolderDemo() {\n  return <FileTrigger acceptDirectory />\n}\n",
-    "type": "docs"
-  },
-  "buttons/toggle-disabled-demo": {
-    "component": "@/components/docs/buttons/toggle-disabled-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { IconPin } from 'justd-icons'\nimport { Toggle } from 'ui'\n\nexport default function ToggleDisabledDemo() {\n  return (\n    <Toggle size=\"square-petite\" isDisabled>\n      <IconPin />\n    </Toggle>\n  )\n}\n",
-    "type": "docs"
-  },
-  "buttons/file-trigger-demo": {
-    "component": "@/components/docs/buttons/file-trigger-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { FileTrigger } from 'ui'\n\nexport default function FileTriggerDemo() {\n  return <FileTrigger />\n}\n",
-    "type": "docs"
-  },
-  "buttons/button-icon-demo": {
-    "component": "@/components/docs/buttons/button-icon-demo",
-    "raw": "'use client'\n\nimport { IconBrandLaravel } from 'justd-icons'\nimport { Button } from 'ui'\n\nexport default function ButtonIconDemo() {\n  return (\n    <Button intent=\"danger\">\n      <IconBrandLaravel />\n      Laravel\n    </Button>\n  )\n}\n",
-    "type": "docs"
-  },
-  "buttons/toggle-appearance-demo": {
-    "component": "@/components/docs/buttons/toggle-appearance-demo",
-    "raw": "'use client'\n\nimport { Toggle } from 'ui'\n\nexport default function ToggleAppearanceDemo() {\n  return (\n    <div className=\"flex gap-2\">\n      <Toggle>{({ isSelected }) => <>{isSelected ? 'Unpin' : 'Pin'}</>}</Toggle>\n      <Toggle appearance=\"outline\">\n        {({ isSelected }) => <>{isSelected ? 'Unpin' : 'Pin'}</>}\n      </Toggle>\n      <Toggle appearance=\"solid\">{({ isSelected }) => <>{isSelected ? 'Unpin' : 'Pin'}</>}</Toggle>\n    </div>\n  )\n}\n",
-    "type": "docs"
-  },
-  "buttons/button-loader-demo": {
-    "component": "@/components/docs/buttons/button-loader-demo",
-    "raw": "'use client'\n\nimport { useState } from 'react'\n\nimport { IconCircleCheckFill, IconKey } from 'justd-icons'\nimport { Button, Loader } from 'ui'\n\nexport default function ButtonLoaderDemo() {\n  const [loading, setLoading] = useState<'idle' | 'loading' | 'success'>('idle')\n\n  const pressHandler = () => {\n    setLoading('loading')\n\n    setTimeout(() => setLoading('success'), 3000)\n\n    setTimeout(() => setLoading('idle'), 6000)\n  }\n\n  return (\n    <Button\n      isDisabled={loading === 'loading'}\n      className=\"w-52 justify-between\"\n      onPress={pressHandler}\n      intent=\"primary\"\n    >\n      {loading === 'success' ? (\n        <IconCircleCheckFill />\n      ) : loading === 'loading' ? (\n        <Loader variant=\"spin\" />\n      ) : (\n        <IconKey />\n      )}\n      {loading === 'loading'\n        ? 'Generating Key...'\n        : loading === 'success'\n          ? 'Key Generated!'\n          : 'Generate API Key'}\n    </Button>\n  )\n}\n",
-    "type": "docs"
-  },
-  "buttons/toggle-shape-demo": {
-    "component": "@/components/docs/buttons/toggle-shape-demo",
-    "raw": "'use client'\n\nimport { Toggle } from 'ui'\n\nexport default function ToggleShapeDemo() {\n  return (\n    <Toggle appearance=\"outline\" shape=\"circle\">\n      {({ isSelected }) => <>{isSelected ? 'Unpin' : 'Pin'}</>}\n    </Toggle>\n  )\n}\n",
-    "type": "docs"
-  },
-  "buttons/file-trigger-controlled-demo": {
-    "component": "@/components/docs/buttons/file-trigger-controlled-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { Description, FileTrigger } from 'ui'\n\nexport default function FileTriggerDemo() {\n  const [file, setFile] = React.useState<string[] | null>(null)\n  return (\n    <>\n      <FileTrigger\n        onSelect={(e) => {\n          const files = Array.from(e ?? [])\n          const filenames = files.map((file) => file.name)\n          setFile(filenames)\n        }}\n      />\n      {file && (\n        <Description className=\"truncate max-w-60 [&>strong]:font-medium block [&>strong]:text-fg mt-2\">\n          Your file: <strong>{file}</strong>\n        </Description>\n      )}\n    </>\n  )\n}\n",
-    "type": "docs"
-  },
-  "buttons/button-disabled-demo": {
-    "component": "@/components/docs/buttons/button-disabled-demo",
-    "raw": "'use client'\n\nimport { Button } from 'ui'\n\nexport default function ButtonDisabledDemo() {\n  return <Button isDisabled>Label</Button>\n}\n",
-    "type": "docs"
-  },
-  "buttons/button-only-icon-demo": {
-    "component": "@/components/docs/buttons/button-only-icon-demo",
-    "raw": "'use client'\n\nimport { IconBrandParsinta } from 'justd-icons'\nimport { Button } from 'ui'\n\nexport default function ButtonOnlyIconDemo() {\n  return (\n    <Button size=\"square-petite\" appearance=\"outline\">\n      <IconBrandParsinta />\n    </Button>\n  )\n}\n",
-    "type": "docs"
-  },
-  "buttons/button-size-demo": {
-    "component": "@/components/docs/buttons/button-size-demo",
-    "raw": "'use client'\n\nimport { Button } from 'ui'\n\nexport default function ButtonSizeDemo() {\n  return (\n    <div className=\"flex gap-2\">\n      <Button size=\"extra-small\">Label</Button>\n      <Button size=\"small\">Label</Button>\n      <Button>Label</Button>\n      <Button size=\"large\">Label</Button>\n    </div>\n  )\n}\n",
-    "type": "docs"
-  },
-  "buttons/toggle-demo": {
-    "component": "@/components/docs/buttons/toggle-demo",
-    "raw": "'use client'\n\nimport { Toggle } from 'ui'\n\nexport default function ToggleDemo() {\n  return <Toggle>{({ isSelected }) => <>{isSelected ? 'Unpin' : 'Pin'}</>}</Toggle>\n}\n",
-    "type": "docs"
-  },
-  "buttons/button-shape-demo": {
-    "component": "@/components/docs/buttons/button-shape-demo",
-    "raw": "'use client'\n\nimport { Button } from 'ui'\n\nexport default function ButtonShapeDemo() {\n  return <Button shape=\"circle\">Label</Button>\n}\n",
-    "type": "docs"
-  },
-  "buttons/file-trigger-multiple-demo": {
-    "component": "@/components/docs/buttons/file-trigger-multiple-demo",
-    "raw": "'use client'\n\nimport { FileTrigger } from 'ui'\n\nexport default function FileTriggerMultipleDemo() {\n  return <FileTrigger allowsMultiple />\n}\n",
-    "type": "docs"
-  },
-  "buttons/file-trigger-camera-demo": {
-    "component": "@/components/docs/buttons/file-trigger-camera-demo",
-    "raw": "'use client'\n\nimport { FileTrigger } from 'ui'\n\nexport default function FileTriggerCameraDemo() {\n  return <FileTrigger defaultCamera=\"environment\">Open a camera</FileTrigger>\n}\n",
-    "type": "docs"
-  },
-  "buttons/button-basic-demo": {
-    "component": "@/components/docs/buttons/button-basic-demo",
-    "raw": "'use client'\n\nimport { Button } from 'ui'\n\nexport default function ButtonBasicDemo() {\n  return <Button onPress={() => alert('Pressed')}>Label</Button>\n}\n",
-    "type": "docs"
-  },
-  "buttons/button-appearance-demo": {
-    "component": "@/components/docs/buttons/button-appearance-demo",
-    "raw": "'use client'\n\nimport title from 'title'\nimport { Button, buttonStyles } from 'ui'\n\ntype Appearance = keyof typeof buttonStyles.variants.appearance\n\nexport default function ButtonAppearanceDemo() {\n  return (\n    <div className=\"flex flex-col gap-2 md:flex-row md:flex-wrap\">\n      {Object.keys(buttonStyles.variants.appearance).map((appearance) => (\n        <div key={appearance}>\n          <Button appearance={appearance as Appearance}>{title(appearance)}</Button>\n        </div>\n      ))}\n    </div>\n  )\n}\n",
-    "type": "docs"
-  },
-  "buttons/toggle-size-demo": {
-    "component": "@/components/docs/buttons/toggle-size-demo",
-    "raw": "'use client'\n\nimport { IconAccessible, IconAccessibleFill } from 'justd-icons'\nimport { Toggle } from 'ui'\n\nexport default function ToggleSizeDemo() {\n  return (\n    <div className=\"flex flex-wrap gap-2\">\n      <Toggle appearance=\"outline\" size=\"square-petite\">\n        {({ isSelected }) => <>{isSelected ? <IconAccessibleFill /> : <IconAccessible />}</>}\n      </Toggle>\n      <Toggle appearance=\"outline\" size=\"small\">\n        {({ isSelected }) => <>{isSelected ? 'Unpin' : 'Pin'}</>}\n      </Toggle>\n      <Toggle appearance=\"outline\" size=\"medium\">\n        {({ isSelected }) => <>{isSelected ? 'Unpin' : 'Pin'}</>}\n      </Toggle>\n      <Toggle appearance=\"outline\" size=\"large\">\n        {({ isSelected }) => <>{isSelected ? 'Unpin' : 'Pin'}</>}\n      </Toggle>\n    </div>\n  )\n}\n",
-    "type": "docs"
-  },
-  "buttons/toggle-controlled-demo": {
-    "component": "@/components/docs/buttons/toggle-controlled-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { IconPin, IconUnpin } from 'justd-icons'\nimport { Toggle } from 'ui'\n\nexport default function ToggleControlledDemo() {\n  const [isSelected, setSelected] = React.useState(false)\n  return (\n    <Toggle size=\"square-petite\" isSelected={isSelected} onChange={setSelected}>\n      {({ isSelected }) => <>{isSelected ? <IconUnpin /> : <IconPin />}</>}\n    </Toggle>\n  )\n}\n",
-    "type": "docs"
-  },
-  "buttons/file-trigger-avatar-demo": {
-    "component": "@/components/docs/buttons/file-trigger-avatar-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport type { DropEvent } from '@react-types/shared'\nimport { isFileDropItem } from 'react-aria-components'\nimport { twJoin } from 'tailwind-merge'\nimport { Avatar, DropZone, FileTrigger } from 'ui'\n\nexport default function FileTriggerAvatarDemo() {\n  const [droppedImage, setDroppedImage] = React.useState<string | undefined>(undefined)\n\n  const onDropHandler = async (e: DropEvent) => {\n    const item = e.items\n      .filter(isFileDropItem)\n      .find((item) => item.type === 'image/jpeg' || item.type === 'image/png')\n    if (item) {\n      const file = await item.getFile()\n      setDroppedImage(URL.createObjectURL(file))\n    }\n  }\n\n  async function onSelectHandler(e: any) {\n    if (e) {\n      const files = Array.from([...e])\n      const item = files[0]\n\n      if (item) {\n        setDroppedImage(URL.createObjectURL(item))\n      }\n    }\n  }\n\n  return (\n    <div className=\"flex items-center gap-2\">\n      <DropZone\n        getDropOperation={() => 'copy'}\n        onDrop={onDropHandler}\n        className={twJoin(\n          '[&_[data-slot=avatar]]:bg-transparent [&_[data-slot=avatar]]:outline-none rounded-full p-0 overflow-hidden size-10'\n        )}\n      >\n        {droppedImage ? (\n          <Avatar src={droppedImage} size=\"large\" />\n        ) : (\n          <Avatar initials=\"IA\" size=\"large\" />\n        )}\n        <input type=\"hidden\" name=\"image\" value={droppedImage} />\n      </DropZone>\n      <FileTrigger\n        size=\"small\"\n        withIcon={false}\n        acceptedFileTypes={['image/png', 'image/jpeg']}\n        onSelect={onSelectHandler}\n      >\n        Upload avatar\n      </FileTrigger>\n    </div>\n  )\n}\n",
-    "type": "docs"
-  },
-  "buttons/button-link-demo": {
-    "component": "@/components/docs/buttons/button-link-demo",
-    "raw": "'use client'\n\nimport { buttonStyles, Link } from 'ui'\n\nexport default function ButtonLinkDemo() {\n  return (\n    <Link\n      className={buttonStyles({ intent: 'info' })}\n      href=\"/docs/components/collections/choicebox\"\n    >\n      Choicebox\n    </Link>\n  )\n}\n",
-    "type": "docs"
-  },
-  "overlays/popover-controlled-demo": {
-    "component": "@/components/docs/overlays/popover-controlled-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { wait } from '@/resources/lib/utils'\nimport { IconCircleCheckFill, IconTrash } from 'justd-icons'\nimport { Button, Loader, Popover } from 'ui'\n\nexport default function PopoverControlledDemo() {\n  const [isOpen, setIsOpen] = React.useState(false)\n  const [loading, setLoading] = React.useState<'idle' | 'loading' | 'success'>('idle')\n  const triggerRef = React.useRef(null)\n\n  const deleteAccount = async () => {\n    setLoading('loading')\n    await wait(3000)\n    setLoading('success')\n\n    await wait(2000)\n    setLoading('idle')\n    setIsOpen(false)\n  }\n  return (\n    <>\n      <Button ref={triggerRef} onPress={() => setIsOpen(true)} intent=\"danger\">\n        Delete Account\n      </Button>\n      <Popover.Content\n        triggerRef={triggerRef}\n        isOpen={isOpen}\n        onOpenChange={setIsOpen}\n        className=\"sm:max-w-sm\"\n      >\n        <Popover.Header>\n          <Popover.Title>Confirm Deletion</Popover.Title>\n          <Popover.Description>\n            Are you sure you want to delete your account? This action cannot be undone.\n          </Popover.Description>\n        </Popover.Header>\n        <Popover.Footer>\n          <Button appearance=\"outline\" onPress={() => setIsOpen(false)} className=\"mr-2\">\n            Cancel\n          </Button>\n          <Button\n            isDisabled={loading === 'loading'}\n            onPress={deleteAccount}\n            intent={['loading', 'idle'].includes(loading) ? 'danger' : 'success'}\n          >\n            {loading === 'loading' ? (\n              <>\n                <Loader variant=\"spin\" />\n                Deleting...\n              </>\n            ) : loading === 'success' ? (\n              <>\n                <IconCircleCheckFill />\n                Deleted\n              </>\n            ) : (\n              <>\n                <IconTrash />\n                Delete\n              </>\n            )}\n          </Button>\n        </Popover.Footer>\n      </Popover.Content>\n    </>\n  )\n}\n",
-    "type": "docs"
-  },
-  "overlays/sheet-custom-style-demo": {
-    "component": "@/components/docs/overlays/sheet-custom-style-demo",
-    "raw": "'use client'\n\nimport { Button, Form, Note, Sheet, TextField } from 'ui'\n\nexport default function SheetCustomStyleDemo() {\n  return (\n    <Sheet>\n      <Button intent=\"warning\">Archive Project</Button>\n      <Sheet.Content role=\"dialog\">\n        <Sheet.Header\n          className=\"bg-background border-b mb-4\"\n          title=\"Archive Project\"\n          description=\"Archiving this project will disable access and hide it from active projects.\"\n        >\n          <Note intent=\"warning\">You can restore the project anytime from the archive!</Note>\n        </Sheet.Header>\n        <Form className=\"overflow-y-auto flex-1\" onSubmit={() => {}}>\n          <Sheet.Body className=\"space-y-4\">\n            <TextField\n              isRequired\n              autoFocus\n              label=\"Confirm by typing the project name\"\n              type=\"text\"\n              placeholder=\"team/project-name\"\n            />\n            <TextField isRequired label='To verify, type \"archive my project\" below' type=\"text\" />\n          </Sheet.Body>\n          <Sheet.Footer>\n            <Sheet.Close>Cancel</Sheet.Close>\n            <Button intent=\"warning\" type=\"submit\">\n              Archive Project\n            </Button>\n          </Sheet.Footer>\n        </Form>\n      </Sheet.Content>\n    </Sheet>\n  )\n}\n",
-    "type": "docs"
-  },
-  "overlays/modal-triggered-by-menu-demo": {
-    "component": "@/components/docs/overlays/modal-triggered-by-menu-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { wait } from '@/resources/lib/utils'\nimport { IconDotsVertical } from 'justd-icons'\nimport { Button, buttonStyles, LoadingDots, Menu, Modal } from 'ui'\n\nexport default function ModalTriggeredByMenuDemo() {\n  const [state, setState] = React.useState<string | null>(null)\n  const [loading, setLoading] = React.useState<boolean>(false)\n  const closeModal = () => setState(null)\n  const executeAction = (action: string) => {\n    console.log(`${action} is executing`)\n    setLoading(true)\n    wait(2000).then(() => {\n      setLoading(false)\n      closeModal()\n    })\n  }\n\n  const actionType = (t: string | null) => {\n    switch (t) {\n      case 'delete':\n        return {\n          title: 'Delete User',\n          description: 'Are you sure you want to delete this item?',\n          confirmText: 'Delete',\n          action: () => executeAction(t)\n        }\n\n      case 'ban':\n        return {\n          title: 'Ban User',\n          description: 'Are you sure you want to ban this user?',\n          confirmText: 'Ban',\n          action: () => executeAction(t)\n        }\n\n      case 'restore':\n        return {\n          title: 'Restore User',\n          description: 'Are you sure you want to restore this user?',\n          confirmText: 'Restore',\n          action: () => executeAction(t)\n        }\n      default:\n        return\n    }\n  }\n  return (\n    <>\n      <Menu>\n        <Menu.Trigger className={buttonStyles({ appearance: 'outline' })}>\n          <IconDotsVertical />\n        </Menu.Trigger>\n        <Menu.Content placement=\"bottom\">\n          <Menu.Item onAction={() => setState('delete')}>Delete</Menu.Item>\n          <Menu.Item onAction={() => setState('ban')}>Ban</Menu.Item>\n          <Menu.Item onAction={() => setState('restore')}>Restore</Menu.Item>\n        </Menu.Content>\n      </Menu>\n\n      <Modal.Content isOpen={state !== null} onOpenChange={closeModal}>\n        <Modal.Header>\n          <Modal.Title>{actionType(state)?.title}</Modal.Title>\n          <Modal.Description>{actionType(state)?.description}</Modal.Description>\n        </Modal.Header>\n        <Modal.Footer>\n          <Modal.Close>Cancel</Modal.Close>\n          <Button className=\"min-w-24\" isDisabled={loading} onPress={actionType(state)?.action}>\n            {loading ? <LoadingDots className={'bg-fg'} /> : actionType(state)?.confirmText}\n          </Button>\n        </Modal.Footer>\n      </Modal.Content>\n    </>\n  )\n}\n",
-    "type": "docs"
-  },
-  "overlays/popover-placement-demo": {
-    "component": "@/components/docs/overlays/popover-placement-demo",
-    "raw": "'use client'\n\nimport { type TooltipProps } from 'react-aria-components'\nimport { Button, Popover } from 'ui'\n\ntype Placement = Pick<TooltipProps, 'placement'>['placement']\nconst placements: Placement[] = ['bottom', 'top', 'left', 'start', 'right', 'end']\nexport default function PopoverPlacementDemo() {\n  return (\n    <div className=\"grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-2 [&_.kbt32x]:w-full\">\n      {placements.map((placement, idx) => (\n        <Popover key={idx}>\n          <Button className=\"mx-auto\" size=\"small\" appearance=\"outline\">\n            {placement}\n          </Button>\n          <Popover.Content placement={placement}>\n            Popover shown at <strong>{placement}</strong>.\n          </Popover.Content>\n        </Popover>\n      ))}\n    </div>\n  )\n}\n",
-    "type": "docs"
-  },
-  "overlays/tooltip-delay-demo": {
-    "component": "@/components/docs/overlays/tooltip-delay-demo",
-    "raw": "'use client'\n\nimport { IconBrandGithub } from 'justd-icons'\nimport { buttonStyles, Tooltip } from 'ui'\n\nexport default function TooltipDelayDemo() {\n  return (\n    <div className=\"flex gap-2\">\n      <Tooltip delay={0}>\n        <Tooltip.Trigger\n          aria-label=\"Follow My Twitter\"\n          className={buttonStyles({\n            appearance: 'outline',\n            size: 'square-petite'\n          })}\n        >\n          <IconBrandGithub />\n        </Tooltip.Trigger>\n        <Tooltip.Content>Follow me on Github @irsyadadl</Tooltip.Content>\n      </Tooltip>\n    </div>\n  )\n}\n",
-    "type": "docs"
-  },
-  "overlays/sheet-custom-close-demo": {
-    "component": "@/components/docs/overlays/sheet-custom-close-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { Button, Checkbox, CheckboxGroup, Sheet } from 'ui'\n\nexport default function SheetControlledDemo() {\n  return (\n    <Sheet>\n      <Button appearance=\"outline\">Notifications</Button>\n      <Sheet.Content aria-label=\"Notifications\">\n        <Sheet.Header>\n          <Sheet.Title>Manage Notifications</Sheet.Title>\n          <Sheet.Description>Adjust your notification settings below.</Sheet.Description>\n        </Sheet.Header>\n        <Sheet.Body>\n          <CheckboxGroup aria-label=\"Notification Settings\">\n            <Checkbox\n              value=\"n1\"\n              label=\"Email Notifications\"\n              description=\"Receive updates via email.\"\n            />\n            <Checkbox\n              value=\"n2\"\n              label=\"SMS Notifications\"\n              description=\"Receive updates via SMS messages.\"\n            />\n            <Checkbox\n              value=\"n3\"\n              label=\"Push Notifications\"\n              description=\"Receive real-time notifications on your device.\"\n            />\n          </CheckboxGroup>\n        </Sheet.Body>\n        <Sheet.Footer>\n          <Sheet.Close>Cancel</Sheet.Close>\n          <Button intent=\"primary\">Save Settings</Button>\n        </Sheet.Footer>\n      </Sheet.Content>\n    </Sheet>\n  )\n}\n",
-    "type": "docs"
-  },
-  "overlays/tooltip-demo": {
-    "component": "@/components/docs/overlays/tooltip-demo",
-    "raw": "'use client'\n\nimport { IconBrandX } from 'justd-icons'\nimport { buttonStyles, Tooltip } from 'ui'\n\nexport default function TooltipDemo() {\n  return (\n    <div className=\"flex gap-2\">\n      <Tooltip>\n        <Tooltip.Trigger\n          aria-label=\"Follow My Twitter\"\n          className={buttonStyles({\n            appearance: 'outline',\n            size: 'square-petite'\n          })}\n        >\n          <IconBrandX />\n        </Tooltip.Trigger>\n        <Tooltip.Content>Follow me on X @irsyadadl</Tooltip.Content>\n      </Tooltip>\n    </div>\n  )\n}\n",
-    "type": "docs"
-  },
-  "overlays/modal-custom-classnames-demo": {
-    "component": "@/components/docs/overlays/modal-custom-classnames-demo",
-    "raw": "'use client'\n\nimport { Button, Modal } from 'ui'\n\nexport default function ModalCustomClassnamesDemo() {\n  return (\n    <Modal>\n      <Button>Open</Button>\n      <Modal.Content\n        classNames={{\n          overlay: 'bg-white/40 dark:bg-black/40 backdrop-blur',\n          content: 'bg-background'\n        }}\n      >\n        <Modal.Header title=\"Custom Classnames\" description=\"This modal has custom class names.\" />\n        <Modal.Footer>\n          <Modal.Close>Close</Modal.Close>\n        </Modal.Footer>\n      </Modal.Content>\n    </Modal>\n  )\n}\n",
-    "type": "docs"
-  },
-  "overlays/sheet-menu-demo": {
-    "component": "@/components/docs/overlays/sheet-menu-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport {\n  IconBook,\n  IconBookOpen,\n  IconBrandCopilot,\n  IconBrandGithub,\n  IconBuilding,\n  IconChart,\n  IconCodeBrackets,\n  IconFilter,\n  IconGear,\n  IconGlobe,\n  IconHeart,\n  IconLogout,\n  IconMessages,\n  IconPeople,\n  IconPerson,\n  IconStar\n} from 'justd-icons'\nimport { Group } from 'react-aria-components'\nimport { Avatar, Button, Checkbox, Description, Menu, Modal, Select, Sheet, TextField } from 'ui'\n\nexport default function SheetMenuDemo() {\n  const [isOpen, setIsOpen] = React.useState(false)\n  const openModal = () => setIsOpen(true)\n  const closeModal = () => setIsOpen(false)\n  return (\n    <>\n      <Modal.Content isOpen={isOpen} onOpenChange={setIsOpen}>\n        <Modal.Header>\n          <Modal.Title>Edit status</Modal.Title>\n        </Modal.Header>\n        <Modal.Body>\n          <div className=\"space-y-4\">\n            <TextField\n              prefix={<IconBrandGithub />}\n              label=\"Status\"\n              placeholder=\"What's your status?\"\n            />\n            <Group>\n              <Checkbox>Busy</Checkbox>\n              <Description>\n                When others mention you, assign you, or request your review, GitHub will let them\n                know that you have limited availability.\n              </Description>\n            </Group>\n            <Select label=\"Clear Status\">\n              <Select.Trigger />\n              <Select.List>\n                <Select.Option>Never</Select.Option>\n                <Select.Option>in 30 Minutes</Select.Option>\n                <Select.Option>in 1 Hour</Select.Option>\n                <Select.Option>in 8 Hours</Select.Option>\n                <Select.Option>after Today</Select.Option>\n                <Select.Option>after a Week</Select.Option>\n                <Select.Option>after a Month</Select.Option>\n              </Select.List>\n            </Select>\n            <Select label=\"Visible to\">\n              <Select.List>\n                <Select.Option>Everyone</Select.Option>\n                <Select.Option>Organization</Select.Option>\n                <Select.Option>Public</Select.Option>\n              </Select.List>\n            </Select>\n          </div>\n        </Modal.Body>\n        <Modal.Footer>\n          <Modal.Close>Clear Status</Modal.Close>\n          <Button onPress={closeModal}>Set Status</Button>\n        </Modal.Footer>\n      </Modal.Content>\n      <Sheet>\n        <Sheet.Trigger aria-label=\"Open menu\">\n          <Avatar src=\"https://github.com/irsyadadl.png\" alt=\"irsyadadl\" />\n        </Sheet.Trigger>\n        <Sheet.Content closeButton={false}>\n          <Sheet.Header className=\"flex border-b p-4 sticky top-0 bg-overlay flex-row items-center gap-x-3 mb-2\">\n            <Avatar src=\"https://github.com/irsyadadl.png\" alt=\"irsyadadl\" />\n            <div>\n              <Sheet.Title>irsyadadl</Sheet.Title>\n              <Sheet.Description>Irsyad A. Panjaitan</Sheet.Description>\n            </div>\n          </Sheet.Header>\n          <Sheet.Body className=\"px-0 sm:px-0\">\n            <Menu.Primitive className=\"divide-y [&_.xss3]:p-2\">\n              <Menu.Section>\n                <Menu.Item onAction={openModal}>\n                  <IconBrandGithub />\n                  Edit Status\n                </Menu.Item>\n              </Menu.Section>\n              <Menu.Section>\n                <Menu.Item>\n                  <IconPerson />\n                  Your profile\n                </Menu.Item>\n                <Menu.Item>\n                  <IconBook /> Your repositories\n                </Menu.Item>\n                <Menu.Item>\n                  <IconBrandCopilot /> Your Copilot\n                </Menu.Item>\n                <Menu.Item>\n                  <IconChart /> Your projects\n                </Menu.Item>\n                <Menu.Item>\n                  <IconStar /> Your stars\n                </Menu.Item>\n                <Menu.Item>\n                  <IconCodeBrackets /> Your gists\n                </Menu.Item>\n                <Menu.Item>\n                  <IconBuilding /> Your organizations\n                </Menu.Item>\n                <Menu.Item>\n                  <IconGlobe /> Your enterprises\n                </Menu.Item>\n                <Menu.Item>\n                  <IconHeart />\n                  Your sponsors\n                </Menu.Item>\n              </Menu.Section>\n              <Menu.Section>\n                <Menu.Item>\n                  <IconFilter /> Feature preview\n                </Menu.Item>\n                <Menu.Item>\n                  <IconGear />\n                  Settings\n                </Menu.Item>\n              </Menu.Section>\n              <Menu.Section>\n                <Menu.Item>\n                  <IconBookOpen /> GitHub Docs\n                </Menu.Item>\n                <Menu.Item>\n                  <IconPeople /> GitHub Support\n                </Menu.Item>\n                <Menu.Item>\n                  <IconMessages /> GitHub Community\n                </Menu.Item>\n              </Menu.Section>\n              <Menu.Section>\n                <Menu.Item>\n                  <IconLogout /> Sign out\n                </Menu.Item>\n              </Menu.Section>\n            </Menu.Primitive>\n          </Sheet.Body>\n        </Sheet.Content>\n      </Sheet>\n    </>\n  )\n}\n",
-    "type": "docs"
-  },
-  "overlays/tooltip-placement-demo": {
-    "component": "@/components/docs/overlays/tooltip-placement-demo",
-    "raw": "'use client'\n\nimport { type TooltipProps } from 'react-aria-components'\nimport { Button, Tooltip } from 'ui'\n\ntype Placement = Pick<TooltipProps, 'placement'>['placement']\nconst placements: Placement[] = ['bottom', 'top', 'left', 'start', 'right', 'end']\nexport default function TooltipPlacementDemo() {\n  return (\n    <div className=\"grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-2 [&_.kbt32x]:w-full\">\n      {placements.map((placement, idx) => (\n        <Tooltip key={idx}>\n          <Button className=\"mx-auto\" size=\"small\" appearance=\"outline\">\n            {placement}\n          </Button>\n          <Tooltip.Content placement={placement}>\n            Tooltip shown at <strong>{placement}</strong>.\n          </Tooltip.Content>\n        </Tooltip>\n      ))}\n    </div>\n  )\n}\n",
-    "type": "docs"
-  },
-  "overlays/sheet-controlled-demo": {
-    "component": "@/components/docs/overlays/sheet-controlled-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { Button, Sheet, Textarea } from 'ui'\n\nexport default function SheetControlledDemo() {\n  const [isOpen, setIsOpen] = React.useState(false)\n  return (\n    <>\n      <Button onPress={() => setIsOpen(true)}>Feedback</Button>\n      <Sheet.Content isOpen={isOpen} onOpenChange={setIsOpen}>\n        <Sheet.Header>\n          <Sheet.Title>Submit Feedback</Sheet.Title>\n          <Sheet.Description>\n            Please let us know your thoughts and how we can improve our service.\n          </Sheet.Description>\n        </Sheet.Header>\n        <Sheet.Body>\n          <Textarea label=\"Your Feedback\" placeholder=\"Type your feedback here...\" />\n        </Sheet.Body>\n        <Sheet.Footer>\n          <Button appearance=\"outline\" onPress={() => setIsOpen(false)}>\n            Close\n          </Button>\n          <Button intent=\"primary\" onPress={() => setIsOpen(false)}>\n            Submit Feedback\n          </Button>\n        </Sheet.Footer>\n      </Sheet.Content>\n    </>\n  )\n}\n",
-    "type": "docs"
-  },
-  "overlays/popover-arrow-demo": {
-    "component": "@/components/docs/overlays/popover-arrow-demo",
-    "raw": "'use client'\n\nimport { IconBell } from 'justd-icons'\nimport { Button, Popover } from 'ui'\n\nexport default function PopoverArrowDemo() {\n  return (\n    <Popover>\n      <Button appearance=\"outline\" size=\"square-petite\">\n        <IconBell />\n      </Button>\n      <Popover.Content showArrow={false} className=\"min-w-72\">\n        You have 3 new notifications.\n      </Popover.Content>\n    </Popover>\n  )\n}\n",
-    "type": "docs"
-  },
-  "overlays/popover-custom-close": {
-    "component": "@/components/docs/overlays/popover-custom-close",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { Button, Checkbox, Form, Link, Popover, TextField } from 'ui'\n\nexport default function PopoverCustomClose() {\n  return (\n    <Popover>\n      <Button>Login</Button>\n      <Popover.Content className=\"sm:min-w-96\">\n        <Popover.Header className=\"mb-4\">\n          <Popover.Title>Login</Popover.Title>\n          <Popover.Description>Enter your credentials to sign in.</Popover.Description>\n        </Popover.Header>\n        <Form onSubmit={() => {}}>\n          <Popover.Body>\n            <div className=\"space-y-4\">\n              <TextField isRequired type=\"email\" label=\"Email\" placeholder=\"Enter your email\" />\n              <TextField\n                isRequired\n                label=\"Password\"\n                type=\"password\"\n                placeholder=\"Enter your password\"\n              />\n              <div className=\"flex justify-between items-center\">\n                <Checkbox name=\"remember-me\">Remember me</Checkbox>\n                <Link intent=\"primary\" href=\"#\">\n                  Forgot password?\n                </Link>\n              </div>\n            </div>\n          </Popover.Body>\n          <Popover.Footer>\n            <Popover.Close>Cancel</Popover.Close>\n            <Button type=\"submit\">Login</Button>\n          </Popover.Footer>\n        </Form>\n      </Popover.Content>\n    </Popover>\n  )\n}\n",
-    "type": "docs"
-  },
-  "overlays/sheet-position-demo": {
-    "component": "@/components/docs/overlays/sheet-position-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { Button, Sheet } from 'ui'\nimport { titleCase } from 'usemods'\n\ntype Side = 'left' | 'right' | 'top' | 'bottom'\nexport default function SheetPositionDemo() {\n  const [sheetSide, setSheetSide] = React.useState<Side>('left')\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  const sides: Side[] = ['left', 'right', 'top', 'bottom']\n\n  const pressHandler = (side: Side, open: boolean) => {\n    setSheetSide(side)\n    setIsOpen(open)\n  }\n\n  return (\n    <>\n      <div className=\"grid grid-cols-2 gap-2\">\n        {sides.map((side, idx) => (\n          <Button appearance=\"outline\" onPress={() => pressHandler(side, true)} key={idx}>\n            {titleCase(side)}\n          </Button>\n        ))}\n      </div>\n      <Sheet.Content isOpen={isOpen} onOpenChange={setIsOpen} side={sheetSide}>\n        <Sheet.Header>\n          <Sheet.Title>{titleCase(sheetSide)}</Sheet.Title>\n          <Sheet.Description>The sheet will go from {sheetSide} side.</Sheet.Description>\n        </Sheet.Header>\n      </Sheet.Content>\n    </>\n  )\n}\n",
-    "type": "docs"
-  },
-  "overlays/modal-nested-demo": {
-    "component": "@/components/docs/overlays/modal-nested-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { toast } from 'sonner'\nimport { Button, Form, Modal, Textarea } from 'ui'\n\nexport default function ModalNestedDemo() {\n  const [isRegistrationModalOpen, setIsRegistrationModalOpen] = React.useState(false)\n  const [isProfileSetupModalOpen, setIsProfileSetupModalOpen] = React.useState(false)\n  const [isTyping, setIsTyping] = React.useState(false)\n\n  return (\n    <>\n      <Button onPress={() => setIsRegistrationModalOpen(true)}>Register</Button>\n\n      <Modal.Content\n        isOpen={isRegistrationModalOpen}\n        onOpenChange={() => setIsRegistrationModalOpen(false)}\n        aria-label=\"Confirm Registration\"\n      >\n        <Modal.Header>\n          <Modal.Title>Confirm Registration</Modal.Title>\n          <Modal.Description>Please confirm your registration details.</Modal.Description>\n        </Modal.Header>\n        <Modal.Footer>\n          <Modal.Close>Cancel</Modal.Close>\n          <Button\n            onPress={() => {\n              setIsProfileSetupModalOpen(true)\n            }}\n          >\n            Confirm\n          </Button>\n        </Modal.Footer>\n      </Modal.Content>\n\n      <Modal.Content\n        isOpen={isProfileSetupModalOpen}\n        onOpenChange={(isOpen) => {\n          if (!isOpen && isTyping) {\n            toast('Profile setup incomplete')\n          }\n          setIsProfileSetupModalOpen(isOpen)\n        }}\n        aria-label=\"Profile Setup\"\n      >\n        <Modal.Header>\n          <Modal.Title>Set Up Your Profile</Modal.Title>\n          <Modal.Description>\n            We need a bit more information before you can get started.\n          </Modal.Description>\n        </Modal.Header>\n        <Form\n          onSubmit={(e) => {\n            e.preventDefault()\n            toast.success('Profile setup complete')\n            setIsProfileSetupModalOpen(false)\n            setIsRegistrationModalOpen(false)\n          }}\n        >\n          <Modal.Body className=\"space-y-4\">\n            <Textarea\n              isRequired\n              label=\"Bio\"\n              placeholder=\"Tell us something about yourself\"\n              onInput={() => setIsTyping(true)}\n            />\n          </Modal.Body>\n          <Modal.Footer>\n            <Modal.Close>Skip for now</Modal.Close>\n            <Button type=\"submit\">Complete Setup</Button>\n          </Modal.Footer>\n        </Form>\n      </Modal.Content>\n    </>\n  )\n}\n",
-    "type": "docs"
-  },
-  "overlays/modal-size-demo": {
-    "component": "@/components/docs/overlays/modal-size-demo",
-    "raw": "'use client'\n\nimport * as React from 'react'\n\nimport { Button, Grid, Modal } from 'ui'\n\ntype Size = Pick<React.ComponentProps<typeof Modal.Content>, 'size'>['size']\nconst sizes: Size[] = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl']\nexport default function ModalSizeDemo() {\n  const [isOpen, setIsOpen] = React.useState(false)\n  const [modalSize, setModalSize] = React.useState<Size>('md')\n\n  const handlePress = (size: Size, open: boolean) => {\n    setModalSize(size)\n    setIsOpen(open)\n  }\n  return (\n    <>\n      <Grid columns={{ initial: 2, sm: 3, lg: 4 }} gap={2}>\n        {sizes.map((size, idx) => (\n          <Grid.Item key={idx}>\n            <Button appearance=\"outline\" onPress={() => handlePress(size, true)}>\n              Open {size}\n            </Button>\n          </Grid.Item>\n        ))}\n      </Grid>\n\n      <Modal.Content isOpen={isOpen} onOpenChange={setIsOpen} size={modalSize}>\n        <Modal.Header>\n          <Modal.Title>Project Update</Modal.Title>\n          <Modal.Description>\n            Dive deep into our project’s latest updates where we've streamlined workflow and\n            improved user interfaces.\n          </Modal.Description>\n        </Modal.Header>\n        <Modal.Footer>\n          <Button appearance=\"outline\" onPress={() => setIsOpen(false)}>\n            Close\n          </Button>\n          <Button onPress={() => setIsOpen(false)}>Confirm</Button>\n        </Modal.Footer>\n      </Modal.Content>\n    </>\n  )\n}\n",
-    "type": "docs"
-  },
-  "overlays/drawer-nested-demo": {
-    "component": "@/components/docs/overlays/drawer-nested-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { toast } from 'sonner'\nimport { Button, Drawer, Form, Textarea } from 'ui'\n\nexport default function DrawerNestedDemo() {\n  const [isRegistrationDrawerOpen, setIsRegistrationDrawerOpen] = React.useState(false)\n  const [isProfileSetupDrawerOpen, setIsProfileSetupDrawerOpen] = React.useState(false)\n  const [isTyping, setIsTyping] = React.useState(false)\n\n  return (\n    <>\n      <Button onPress={() => setIsRegistrationDrawerOpen(true)}>Register</Button>\n\n      <Drawer\n        isOpen={isRegistrationDrawerOpen}\n        onOpenChange={() => setIsRegistrationDrawerOpen(false)}\n      >\n        <Drawer.Content>\n          <Drawer.Header>\n            <Drawer.Title>Confirm Registration</Drawer.Title>\n            <Drawer.Description>Please confirm your registration details.</Drawer.Description>\n          </Drawer.Header>\n          <Drawer.Footer>\n            <Drawer.Close>Cancel</Drawer.Close>\n            <Button\n              onPress={() => {\n                setIsProfileSetupDrawerOpen(true)\n              }}\n            >\n              Confirm\n            </Button>\n          </Drawer.Footer>\n        </Drawer.Content>\n      </Drawer>\n\n      <Drawer\n        isOpen={isProfileSetupDrawerOpen}\n        onOpenChange={(isOpen) => {\n          if (!isOpen && isTyping) toast('Profile setup incomplete', { position: 'top-center' })\n          setIsProfileSetupDrawerOpen(isOpen)\n        }}\n      >\n        <Drawer.Content>\n          <Drawer.Header>\n            <Drawer.Title>Set Up Your Profile</Drawer.Title>\n            <Drawer.Description>\n              We need a bit more information before you can get started.\n            </Drawer.Description>\n          </Drawer.Header>\n          <Form\n            onSubmit={(e) => {\n              e.preventDefault()\n              toast.success('Profile setup complete', { position: 'top-center' })\n              setIsProfileSetupDrawerOpen(false)\n              setIsRegistrationDrawerOpen(false)\n            }}\n          >\n            <Drawer.Body className=\"space-y-4\">\n              <Textarea\n                isRequired\n                label=\"Bio\"\n                placeholder=\"Tell us something about yourself\"\n                onInput={() => setIsTyping(true)}\n              />\n            </Drawer.Body>\n            <Drawer.Footer>\n              <Drawer.Close>Skip for now</Drawer.Close>\n              <Button type=\"submit\">Complete Setup</Button>\n            </Drawer.Footer>\n          </Form>\n        </Drawer.Content>\n      </Drawer>\n    </>\n  )\n}\n",
-    "type": "docs"
-  },
-  "overlays/drawer-basic-demo": {
-    "component": "@/components/docs/overlays/drawer-basic-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { buttonStyles, Drawer } from 'ui'\n\nexport default function DrawerBasicDemo() {\n  return (\n    <Drawer>\n      <Drawer.Trigger className={buttonStyles({ shape: 'circle', appearance: 'outline' })}>\n        Open\n      </Drawer.Trigger>\n      <Drawer.Content>\n        <Drawer.Header>\n          <Drawer.Title>Nirvana: The Band</Drawer.Title>\n          <Drawer.Description>\n            A brief overview of the influential rock band Nirvana.\n          </Drawer.Description>\n        </Drawer.Header>\n        <Drawer.Body>\n          Nirvana was an American rock band formed in 1987, fronted by Kurt Cobain, with Krist\n          Novoselic on bass and Dave Grohl on drums. They played a key role in bringing grunge music\n          into the mainstream with their breakthrough album, *Nevermind* (1991), which featured the\n          hit single \"Smells Like Teen Spirit.\"\n        </Drawer.Body>\n        <Drawer.Footer>\n          <Drawer.Close shape=\"circle\">Close</Drawer.Close>\n        </Drawer.Footer>\n      </Drawer.Content>\n    </Drawer>\n  )\n}\n",
-    "type": "docs"
-  },
-  "overlays/sheet-demo": {
-    "component": "@/components/docs/overlays/sheet-demo",
-    "raw": "'use client'\n\nimport { Button, Sheet, Switch, TextField } from 'ui'\n\nexport default function SheetDemo() {\n  return (\n    <Sheet>\n      <Button appearance=\"outline\">Edit Settings</Button>\n      <Sheet.Content>\n        <Sheet.Header>\n          <Sheet.Title>Update User Settings</Sheet.Title>\n          <Sheet.Description>Adjust your preferences and configurations here.</Sheet.Description>\n        </Sheet.Header>\n        <Sheet.Body className=\"space-y-4\">\n          <TextField label=\"Username\" type=\"text\" placeholder=\"Enter your username\" />\n          <TextField label=\"Email\" type=\"email\" placeholder=\"Enter your email address\" />\n          <Switch>Enable Notifications</Switch>\n        </Sheet.Body>\n        <Sheet.Footer>\n          <Sheet.Close>Cancel</Sheet.Close>\n          <Button intent=\"primary\" type=\"submit\">\n            Save Changes\n          </Button>\n        </Sheet.Footer>\n      </Sheet.Content>\n    </Sheet>\n  )\n}\n",
-    "type": "docs"
-  },
-  "overlays/drawer-sticky-demo": {
-    "component": "@/components/docs/overlays/drawer-sticky-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { buttonStyles, Drawer } from 'ui'\n\nexport default function DrawerStickyDemo() {\n  return (\n    <Drawer>\n      <Drawer.Trigger className={buttonStyles({ shape: 'circle', appearance: 'outline' })}>\n        Open\n      </Drawer.Trigger>\n      <Drawer.Content>\n        <Drawer.Header>The Beatles</Drawer.Header>\n        <Drawer.Body>\n          <div className=\"prose dark:prose-invert prose-zinc\">\n            <p>\n              Welcome to our Terms of Use. By accessing or using our services, you agree to be bound\n              by these terms. If you do not agree to these terms, please refrain from using our\n              services.\n            </p>\n            <h3> User Obligations</h3>\n            <h4>Account Responsibility</h4>\n            <p>\n              When you create an account with us, you are responsible for maintaining the\n              confidentiality of your account and password.\n            </p>{' '}\n            <p>\n              You agree to accept responsibility for all activities that occur under your account.\n              You must notify us immediately of any breach of security or unauthorized use of your\n              account.\n            </p>\n            <h4>Compliance with Laws</h4>\n            <p>\n              You agree to comply with all applicable laws, regulations, and policies in connection\n              with your use of our services. This includes adhering to intellectual property laws\n              and refraining from any unlawful behavior while using our platform.\n            </p>\n            <h3> Prohibited Activities</h3>\n            <p>\n              You are not permitted to access or attempt to access any of our services by any means\n              other than through the interface provided by us. Any form of hacking, bypassing, or\n              circumventing our security protocols is strictly prohibited.\n            </p>\n            <h4>Misuse of Content</h4>\n            <p>\n              You agree not to misuse, reproduce, distribute, or modify any content from our\n              services unless explicitly authorized by us. This includes engaging in activities such\n              as scraping, data mining, or using automated systems to extract data.\n            </p>\n            <h4>Harassment and Abuse</h4>\n            <p>\n              You are prohibited from using our services to harass, abuse, or harm other users. This\n              includes sending unsolicited messages, stalking, or engaging in any form of\n              cyberbullying. We reserve the right to terminate accounts found in violation of this\n              policy.\n            </p>\n            <h4>Ownership of Content</h4>\n            <p>\n              All content, trademarks, service marks, logos, and other intellectual property\n              displayed on our services are the property of their respective owners. You may not\n              use, copy, or distribute any content without prior written permission from the owner.\n            </p>\n            <h4>User-Generated Content</h4>\n            <p>\n              By submitting content to our services, you grant us a worldwide, royalty-free,\n              non-exclusive license to use, distribute, modify, and display that content for the\n              purpose of providing our services.\n            </p>\n            <p>\n              You retain all ownership rights to your content but agree to allow us to use it in\n              accordance with these terms.\n            </p>\n            <h3> Termination</h3>\n            <h4>Right to Terminate</h4>\n            We reserve the right to terminate or suspend your access to our services at any time,\n            without notice, for any reason, including but not limited to a breach of these terms.\n            Upon termination, your right to use our services will immediately cease.\n            <h4>Effect of Termination</h4>\n            Upon termination of your account, all provisions of these terms that, by their nature,\n            should survive termination shall remain in effect. This includes, but is not limited to,\n            ownership provisions, warranty disclaimers, and limitations of liability.\n            <h3> Limitation of Liability</h3>\n            <h4>Service Availability</h4>\n            We do not guarantee that our services will be available at all times or without\n            interruption. We are not liable for any downtime or technical issues that may prevent\n            access to our services.\n            <h4>No Warranties</h4>\n            Our services are provided \"as is\" and \"as available\" without any warranties of any kind,\n            whether express or implied. We do not warrant that our services will meet your\n            requirements or that they will be error-free or secure.\n            <h4>Limitation of Damages</h4>\n            In no event shall we be liable for any indirect, incidental, special, consequential, or\n            punitive damages arising out of or related to your use of our services. This includes,\n            but is not limited to, damages for loss of profits, data, or other intangibles.\n            <h3> Changes to These Terms</h3>\n            We reserve the right to modify or replace these terms at any time. If a revision is\n            material, we will provide at least 30 days' notice prior to any new terms taking effect.\n            What constitutes a material change will be determined at our sole discretion.\n            <h3> Governing Law</h3>\n            These terms shall be governed and construed in accordance with the laws of [Your\n            Jurisdiction], without regard to its conflict of law provisions. Any disputes arising\n            from or relating to these terms shall be resolved in the courts of [Your Jurisdiction].\n            <h3> Contact Information</h3>\n            If you have any questions about these terms, please contact us at xxx@example.com.\n          </div>\n        </Drawer.Body>\n        <Drawer.Footer>\n          <Drawer.Close shape=\"circle\">Close</Drawer.Close>\n        </Drawer.Footer>\n      </Drawer.Content>\n    </Drawer>\n  )\n}\n",
-    "type": "docs"
-  },
-  "overlays/modal-sticky-demo": {
-    "component": "@/components/docs/overlays/modal-sticky-demo",
-    "raw": "'use client'\n\nimport { Button, Modal } from 'ui'\n\nexport default function ModalStickyDemo() {\n  return (\n    <Modal>\n      <Button>Read</Button>\n      <Modal.Content size=\"xl\">\n        <Modal.Header>\n          <Modal.Title>Terms of Use</Modal.Title>\n          <Modal.Description>\n            If you do not agree to these terms, please refrain from using our services.\n          </Modal.Description>\n        </Modal.Header>\n        <Modal.Body>\n          <div className=\"prose dark:prose-invert prose-zinc\">\n            <p>\n              Welcome to our Terms of Use. By accessing or using our services, you agree to be bound\n              by these terms. If you do not agree to these terms, please refrain from using our\n              services.\n            </p>\n            <h3> User Obligations</h3>\n            <h4>Account Responsibility</h4>\n            <p>\n              When you create an account with us, you are responsible for maintaining the\n              confidentiality of your account and password.\n            </p>{' '}\n            <p>\n              You agree to accept responsibility for all activities that occur under your account.\n              You must notify us immediately of any breach of security or unauthorized use of your\n              account.\n            </p>\n            <h4>Compliance with Laws</h4>\n            <p>\n              You agree to comply with all applicable laws, regulations, and policies in connection\n              with your use of our services. This includes adhering to intellectual property laws\n              and refraining from any unlawful behavior while using our platform.\n            </p>\n            <h3> Prohibited Activities</h3>\n            <p>\n              You are not permitted to access or attempt to access any of our services by any means\n              other than through the interface provided by us. Any form of hacking, bypassing, or\n              circumventing our security protocols is strictly prohibited.\n            </p>\n            <h4>Misuse of Content</h4>\n            <p>\n              You agree not to misuse, reproduce, distribute, or modify any content from our\n              services unless explicitly authorized by us. This includes engaging in activities such\n              as scraping, data mining, or using automated systems to extract data.\n            </p>\n            <h4>Harassment and Abuse</h4>\n            <p>\n              You are prohibited from using our services to harass, abuse, or harm other users. This\n              includes sending unsolicited messages, stalking, or engaging in any form of\n              cyberbullying. We reserve the right to terminate accounts found in violation of this\n              policy.\n            </p>\n            <h4>Ownership of Content</h4>\n            <p>\n              All content, trademarks, service marks, logos, and other intellectual property\n              displayed on our services are the property of their respective owners. You may not\n              use, copy, or distribute any content without prior written permission from the owner.\n            </p>\n            <h4>User-Generated Content</h4>\n            <p>\n              By submitting content to our services, you grant us a worldwide, royalty-free,\n              non-exclusive license to use, distribute, modify, and display that content for the\n              purpose of providing our services.\n            </p>\n            <p>\n              You retain all ownership rights to your content but agree to allow us to use it in\n              accordance with these terms.\n            </p>\n            <h3> Termination</h3>\n            <h4>Right to Terminate</h4>\n            We reserve the right to terminate or suspend your access to our services at any time,\n            without notice, for any reason, including but not limited to a breach of these terms.\n            Upon termination, your right to use our services will immediately cease.\n            <h4>Effect of Termination</h4>\n            Upon termination of your account, all provisions of these terms that, by their nature,\n            should survive termination shall remain in effect. This includes, but is not limited to,\n            ownership provisions, warranty disclaimers, and limitations of liability.\n            <h3> Limitation of Liability</h3>\n            <h4>Service Availability</h4>\n            We do not guarantee that our services will be available at all times or without\n            interruption. We are not liable for any downtime or technical issues that may prevent\n            access to our services.\n            <h4>No Warranties</h4>\n            Our services are provided \"as is\" and \"as available\" without any warranties of any kind,\n            whether express or implied. We do not warrant that our services will meet your\n            requirements or that they will be error-free or secure.\n            <h4>Limitation of Damages</h4>\n            In no event shall we be liable for any indirect, incidental, special, consequential, or\n            punitive damages arising out of or related to your use of our services. This includes,\n            but is not limited to, damages for loss of profits, data, or other intangibles.\n            <h3> Changes to These Terms</h3>\n            We reserve the right to modify or replace these terms at any time. If a revision is\n            material, we will provide at least 30 days' notice prior to any new terms taking effect.\n            What constitutes a material change will be determined at our sole discretion.\n            <h3> Governing Law</h3>\n            These terms shall be governed and construed in accordance with the laws of [Your\n            Jurisdiction], without regard to its conflict of law provisions. Any disputes arising\n            from or relating to these terms shall be resolved in the courts of [Your Jurisdiction].\n            <h3> Contact Information</h3>\n            If you have any questions about these terms, please contact us at [Your Contact\n            Information].\n          </div>\n        </Modal.Body>\n        <Modal.Footer>\n          <Modal.Close>Close</Modal.Close>\n          <Button>Accept</Button>\n        </Modal.Footer>\n      </Modal.Content>\n    </Modal>\n  )\n}\n",
-    "type": "docs"
-  },
-  "overlays/alert-dialog-demo": {
-    "component": "@/components/docs/overlays/alert-dialog-demo",
-    "raw": "'use client'\n\nimport { buttonStyles, Modal } from 'ui'\n\nexport default function AlertDialogDemo() {\n  return (\n    <Modal>\n      <Modal.Trigger className={buttonStyles({ intent: 'danger' })}>Delete</Modal.Trigger>\n      <Modal.Content role=\"alertdialog\">\n        <Modal.Header>\n          <Modal.Title>Delete file</Modal.Title>\n          <Modal.Description>\n            This will permanently delete the selected file. Continue?\n          </Modal.Description>\n        </Modal.Header>\n        <Modal.Footer>\n          <Modal.Close appearance=\"outline\">Cancel</Modal.Close>\n          <Modal.Close appearance=\"solid\" intent=\"danger\">\n            Continue\n          </Modal.Close>\n        </Modal.Footer>\n      </Modal.Content>\n    </Modal>\n  )\n}\n",
-    "type": "docs"
-  },
-  "overlays/sheet-stack-demo": {
-    "component": "@/components/docs/overlays/sheet-stack-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { Button, Sheet } from 'ui'\n\nexport default function SheetStackDemo() {\n  return (\n    <Sheet>\n      <Button appearance=\"outline\">Stack</Button>\n      <Sheet.Content isStack={false}>\n        <Sheet.Header>\n          <Sheet.Title>Not Stacked</Sheet.Title>\n          <Sheet.Description>This sheet is not stacked.</Sheet.Description>\n        </Sheet.Header>\n        <Sheet.Footer>\n          <Sheet.Close>Cancel</Sheet.Close>\n          <Button intent=\"primary\">Save Changes</Button>\n        </Sheet.Footer>\n      </Sheet.Content>\n    </Sheet>\n  )\n}\n",
-    "type": "docs"
-  },
-  "overlays/popover-trigger-demo": {
-    "component": "@/components/docs/overlays/popover-trigger-demo",
-    "raw": "'use client'\n\nimport { Avatar, Button, Popover } from 'ui'\n\nexport default function PopoverTriggerDemo() {\n  return (\n    <Popover>\n      <Popover.Trigger>\n        <Avatar src=\"https://github.com/irsyadadl.png\" />\n      </Popover.Trigger>\n      <Popover.Content className=\"min-w-72\">\n        <Popover.Header>\n          <Popover.Title>Email</Popover.Title>\n          <Popover.Description>We'll send you an email to log in.</Popover.Description>\n        </Popover.Header>\n        <Popover.Footer>\n          <Button>Send Login Link</Button>\n        </Popover.Footer>\n      </Popover.Content>\n    </Popover>\n  )\n}\n",
-    "type": "docs"
-  },
-  "overlays/drawer-controlled-demo": {
-    "component": "@/components/docs/overlays/drawer-controlled-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { Button, Drawer, TextField } from 'ui'\n\nexport default function DrawerControlledDemo() {\n  const [isOpen, setIsOpen] = React.useState(false)\n  return (\n    <>\n      <Button onPress={() => setIsOpen(!isOpen)} appearance=\"outline\">\n        Login\n      </Button>\n      <Drawer isOpen={isOpen} onOpenChange={setIsOpen}>\n        <Drawer.Content>\n          <Drawer.Header>\n            <Drawer.Title>Login</Drawer.Title>\n            <Drawer.Description>\n              Please enter your credentials to access your account.\n            </Drawer.Description>\n          </Drawer.Header>\n          <Drawer.Body className=\"flex flex-col gap-4\">\n            <TextField label=\"Email\" isRequired type=\"email\" placeholder=\"Enter your email\" />\n            <TextField\n              label=\"Password\"\n              isRequired\n              type=\"password\"\n              placeholder=\"Enter your password\"\n            />\n          </Drawer.Body>\n          <Drawer.Footer>\n            <Drawer.Close>Close</Drawer.Close>\n            <Button onPress={() => setIsOpen(false)}>Login</Button>\n          </Drawer.Footer>\n        </Drawer.Content>\n      </Drawer>\n    </>\n  )\n}\n",
-    "type": "docs"
-  },
-  "overlays/modal-blur-demo": {
-    "component": "@/components/docs/overlays/modal-blur-demo",
-    "raw": "'use client'\n\nimport { Button, Form, Modal, TextField } from 'ui'\n\nexport default function ModalBlurDemo() {\n  return (\n    <Modal>\n      <Button>Turn on 2FA</Button>\n      <Modal.Content isBlurred>\n        <Modal.Header>\n          <Modal.Title>Nice! Let's beef up your account.</Modal.Title>\n          <Modal.Description>\n            2FA beefs up your account's defense. Pop in your password to keep going.\n          </Modal.Description>\n        </Modal.Header>\n        <Form onSubmit={() => {}}>\n          <TextField\n            isRequired\n            autoFocus\n            label=\"Password\"\n            type=\"password\"\n            placeholder=\"Enter your password\"\n          />\n          <Modal.Footer>\n            <Modal.Close>Cancel</Modal.Close>\n            <Button type=\"submit\">Turn on 2FA</Button>\n          </Modal.Footer>\n        </Form>\n      </Modal.Content>\n    </Modal>\n  )\n}\n",
-    "type": "docs"
-  },
-  "overlays/sheet-sticky-demo": {
-    "component": "@/components/docs/overlays/sheet-sticky-demo",
-    "raw": "'use client'\n\nimport { Button, Sheet } from 'ui'\n\nexport default function SheetStickyDemo() {\n  return (\n    <Sheet>\n      <Button>Read</Button>\n      <Sheet.Content>\n        <Sheet.Header>\n          <Sheet.Title>Terms of Use</Sheet.Title>\n          <Sheet.Description>\n            If you do not agree to these terms, please refrain from using our services.\n          </Sheet.Description>\n        </Sheet.Header>\n        <Sheet.Body>\n          <div className=\"prose dark:prose-invert prose-zinc\">\n            <p>\n              Welcome to our Terms of Use. By accessing or using our services, you agree to be bound\n              by these terms. If you do not agree to these terms, please refrain from using our\n              services.\n            </p>\n            <h3> User Obligations</h3>\n            <h4>Account Responsibility</h4>\n            <p>\n              When you create an account with us, you are responsible for maintaining the\n              confidentiality of your account and password.\n            </p>{' '}\n            <p>\n              You agree to accept responsibility for all activities that occur under your account.\n              You must notify us immediately of any breach of security or unauthorized use of your\n              account.\n            </p>\n            <h4>Compliance with Laws</h4>\n            <p>\n              You agree to comply with all applicable laws, regulations, and policies in connection\n              with your use of our services. This includes adhering to intellectual property laws\n              and refraining from any unlawful behavior while using our platform.\n            </p>\n            <h3> Prohibited Activities</h3>\n            <p>\n              You are not permitted to access or attempt to access any of our services by any means\n              other than through the interface provided by us. Any form of hacking, bypassing, or\n              circumventing our security protocols is strictly prohibited.\n            </p>\n            <h4>Misuse of Content</h4>\n            <p>\n              You agree not to misuse, reproduce, distribute, or modify any content from our\n              services unless explicitly authorized by us. This includes engaging in activities such\n              as scraping, data mining, or using automated systems to extract data.\n            </p>\n            <h4>Harassment and Abuse</h4>\n            <p>\n              You are prohibited from using our services to harass, abuse, or harm other users. This\n              includes sending unsolicited messages, stalking, or engaging in any form of\n              cyberbullying. We reserve the right to terminate accounts found in violation of this\n              policy.\n            </p>\n            <h4>Ownership of Content</h4>\n            <p>\n              All content, trademarks, service marks, logos, and other intellectual property\n              displayed on our services are the property of their respective owners. You may not\n              use, copy, or distribute any content without prior written permission from the owner.\n            </p>\n            <h4>User-Generated Content</h4>\n            <p>\n              By submitting content to our services, you grant us a worldwide, royalty-free,\n              non-exclusive license to use, distribute, modify, and display that content for the\n              purpose of providing our services.\n            </p>\n            <p>\n              You retain all ownership rights to your content but agree to allow us to use it in\n              accordance with these terms.\n            </p>\n            <h3> Termination</h3>\n            <h4>Right to Terminate</h4>\n            We reserve the right to terminate or suspend your access to our services at any time,\n            without notice, for any reason, including but not limited to a breach of these terms.\n            Upon termination, your right to use our services will immediately cease.\n            <h4>Effect of Termination</h4>\n            Upon termination of your account, all provisions of these terms that, by their nature,\n            should survive termination shall remain in effect. This includes, but is not limited to,\n            ownership provisions, warranty disclaimers, and limitations of liability.\n            <h3> Limitation of Liability</h3>\n            <h4>Service Availability</h4>\n            We do not guarantee that our services will be available at all times or without\n            interruption. We are not liable for any downtime or technical issues that may prevent\n            access to our services.\n            <h4>No Warranties</h4>\n            Our services are provided \"as is\" and \"as available\" without any warranties of any kind,\n            whether express or implied. We do not warrant that our services will meet your\n            requirements or that they will be error-free or secure.\n            <h4>Limitation of Damages</h4>\n            In no event shall we be liable for any indirect, incidental, special, consequential, or\n            punitive damages arising out of or related to your use of our services. This includes,\n            but is not limited to, damages for loss of profits, data, or other intangibles.\n            <h3> Changes to These Terms</h3>\n            We reserve the right to modify or replace these terms at any time. If a revision is\n            material, we will provide at least 30 days' notice prior to any new terms taking effect.\n            What constitutes a material change will be determined at our sole discretion.\n            <h3> Governing Law</h3>\n            These terms shall be governed and construed in accordance with the laws of [Your\n            Jurisdiction], without regard to its conflict of law provisions. Any disputes arising\n            from or relating to these terms shall be resolved in the courts of [Your Jurisdiction].\n            <h3> Contact Information</h3>\n            If you have any questions about these terms, please contact us at [Your Contact\n            Information].\n          </div>\n        </Sheet.Body>\n        <Sheet.Footer>\n          <Sheet.Close>Close</Sheet.Close>\n          <Button>Accept</Button>\n        </Sheet.Footer>\n      </Sheet.Content>\n    </Sheet>\n  )\n}\n",
-    "type": "docs"
-  },
-  "overlays/modal-controlled-demo": {
-    "component": "@/components/docs/overlays/modal-controlled-demo",
-    "raw": "'use client'\n\nimport { useState } from 'react'\n\nimport { Button, Modal } from 'ui'\n\nexport default function ModalControlledDemo() {\n  const [open, setOpen] = useState(false)\n  return (\n    <>\n      <Button onPress={() => setOpen(true)} intent=\"primary\">\n        Subscribe\n      </Button>\n      <Modal.Content isOpen={open} onOpenChange={setOpen}>\n        <Modal.Header>\n          <Modal.Title>Subscribe to Our Newsletter</Modal.Title>\n          <Modal.Description>\n            Get the latest news and updates right to your inbox.\n          </Modal.Description>\n        </Modal.Header>\n        <Modal.Footer>\n          <Button onPress={() => setOpen(false)}>Sign Up</Button>\n        </Modal.Footer>\n      </Modal.Content>\n    </>\n  )\n}\n",
-    "type": "docs"
-  },
-  "overlays/popover-demo": {
-    "component": "@/components/docs/overlays/popover-demo",
-    "raw": "'use client'\n\nimport { Button, Popover } from 'ui'\n\nexport default function PopoverDemo() {\n  return (\n    <Popover>\n      <Button>Forgot Password</Button>\n      <Popover.Content className=\"min-w-72\">\n        <Popover.Header>\n          <Popover.Title>Email</Popover.Title>\n          <Popover.Description>We'll send you an email to log in.</Popover.Description>\n        </Popover.Header>\n        <Popover.Footer>\n          <Button>Send Login Link</Button>\n        </Popover.Footer>\n      </Popover.Content>\n    </Popover>\n  )\n}\n",
-    "type": "docs"
-  },
-  "overlays/modal-custom-style-demo": {
-    "component": "@/components/docs/overlays/modal-custom-style-demo",
-    "raw": "'use client'\n\nimport { Button, Form, Modal, Note, TextField } from 'ui'\n\nexport default function ModalCustomStyleDemo() {\n  return (\n    <Modal>\n      <Button intent=\"danger\">Delete Project</Button>\n      <Modal.Content role=\"alertdialog\">\n        <Modal.Header\n          className=\"bg-background border-b mb-4\"\n          title=\"Delete Project\"\n          description=\"This project’s gonna get wiped, including all its Deployments, Domains, Env Variables, Serverless Functions, and Settings.\"\n        >\n          <Note intent=\"danger\">No undo button here, so be sure!</Note>\n        </Modal.Header>\n        <Form onSubmit={() => {}}>\n          <Modal.Body className=\"space-y-4\">\n            <TextField\n              isRequired\n              autoFocus\n              label=\"Enter the project name\"\n              type=\"text\"\n              placeholder=\"team/project-name\"\n            />\n            <TextField isRequired label='To verify, type \"delete my project\" below' type=\"text\" />\n          </Modal.Body>\n          <Modal.Footer>\n            <Modal.Close>Cancel</Modal.Close>\n            <Button intent=\"danger\" type=\"submit\">\n              Delete Project\n            </Button>\n          </Modal.Footer>\n        </Form>\n      </Modal.Content>\n    </Modal>\n  )\n}\n",
-    "type": "docs"
-  },
-  "overlays/drawer-without-notch-demo": {
-    "component": "@/components/docs/overlays/drawer-without-notch-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { buttonStyles, Drawer } from 'ui'\n\nexport default function DrawerWithoutNotchDemo() {\n  return (\n    <Drawer withNotch={false}>\n      <Drawer.Trigger className={buttonStyles({ shape: 'circle', appearance: 'outline' })}>\n        Open Drawer\n      </Drawer.Trigger>\n      <Drawer.Content>\n        <Drawer.Header>\n          <Drawer.Title>The Beatles</Drawer.Title>\n          <Drawer.Description>\n            The Beatles were an English rock band formed in Liverpool in 1960, comprising John\n            Lennon, Paul McCartney, George Harrison and Ringo Starr.\n          </Drawer.Description>\n        </Drawer.Header>\n        <Drawer.Footer>\n          <Drawer.Close shape=\"circle\">Close</Drawer.Close>\n        </Drawer.Footer>\n      </Drawer.Content>\n    </Drawer>\n  )\n}\n",
-    "type": "docs"
-  },
-  "overlays/sheet-classnames-demo": {
-    "component": "@/components/docs/overlays/sheet-classnames-demo",
-    "raw": "'use client'\n\nimport { Button, Sheet } from 'ui'\n\nexport default function SheetClassnamesDemo() {\n  return (\n    <Sheet>\n      <Button>Open</Button>\n      <Sheet.Content\n        classNames={{\n          overlay: 'bg-white/50 dark:bg-black/50 backdrop-blur',\n          content: 'min-w-80'\n        }}\n      >\n        <Sheet.Header title=\"Custom Classnames\" description=\"This sheet has custom class names.\" />\n        <Sheet.Footer>\n          <Sheet.Close>Close</Sheet.Close>\n        </Sheet.Footer>\n      </Sheet.Content>\n    </Sheet>\n  )\n}\n",
-    "type": "docs"
-  },
-  "overlays/modal-demo": {
-    "component": "@/components/docs/overlays/modal-demo",
-    "raw": "'use client'\n\nimport { Button, Form, Modal, TextField } from 'ui'\n\nexport default function ModalDemo() {\n  return (\n    <Modal>\n      <Button>Turn on 2FA</Button>\n      <Modal.Content>\n        <Modal.Header>\n          <Modal.Title>Nice! Let's beef up your account.</Modal.Title>\n          <Modal.Description>\n            2FA beefs up your account's defense. Pop in your password to keep going.\n          </Modal.Description>\n        </Modal.Header>\n        <Form onSubmit={() => {}}>\n          <TextField\n            isRequired\n            autoFocus\n            label=\"Password\"\n            type=\"password\"\n            placeholder=\"Enter your password\"\n          />\n          <Modal.Footer>\n            <Modal.Close>Cancel</Modal.Close>\n            <Button type=\"submit\">Turn on 2FA</Button>\n          </Modal.Footer>\n        </Form>\n      </Modal.Content>\n    </Modal>\n  )\n}\n",
-    "type": "docs"
-  },
-  "navigation/tabs-demo": {
-    "component": "@/components/docs/navigation/tabs-demo",
-    "raw": "'use client'\n\nimport { Tabs } from 'ui'\n\nexport default function TabsDemo() {\n  return (\n    <Tabs aria-label=\"Recipe App\">\n      <Tabs.List>\n        <Tabs.Tab id=\"r\">Recipes</Tabs.Tab>\n        <Tabs.Tab id=\"i\">Ingredients</Tabs.Tab>\n        <Tabs.Tab id=\"m\">Meal Plans</Tabs.Tab>\n        <Tabs.Tab id=\"v\">Videos</Tabs.Tab>\n      </Tabs.List>\n      <Tabs.Panel id=\"r\">\n        Browse through a wide selection of recipes for all occasions and dietary preferences.\n      </Tabs.Panel>\n      <Tabs.Panel id=\"i\">Check the list of ingredients needed for your chosen recipes.</Tabs.Panel>\n      <Tabs.Panel id=\"m\">Discover curated meal plans to simplify your weekly cooking.</Tabs.Panel>\n      <Tabs.Panel id=\"v\">Watch cooking videos to learn new techniques and recipes.</Tabs.Panel>\n    </Tabs>\n  )\n}\n",
-    "type": "docs"
-  },
-  "navigation/tabs-icons-demo": {
-    "component": "@/components/docs/navigation/tabs-icons-demo",
-    "raw": "'use client'\n\nimport { IconApple, IconClock, IconCut } from 'justd-icons'\nimport { Tabs } from 'ui'\n\nexport default function TabsIconsDemo() {\n  return (\n    <Tabs aria-label=\"Fitness App\">\n      <Tabs.List>\n        <Tabs.Tab id=\"w\">\n          <IconCut /> Workouts\n        </Tabs.Tab>\n        <Tabs.Tab id=\"n\">\n          <IconApple /> Nutrition\n        </Tabs.Tab>\n        <Tabs.Tab id=\"t\">\n          <IconClock /> Tracker\n        </Tabs.Tab>\n      </Tabs.List>\n      <Tabs.Panel id=\"w\">\n        Find a variety of workout plans tailored to your fitness level and goals.\n      </Tabs.Panel>\n      <Tabs.Panel id=\"n\">\n        Get nutrition tips and meal plans to complement your fitness journey.\n      </Tabs.Panel>\n      <Tabs.Panel id=\"t\">Track your progress with detailed statistics and analytics.</Tabs.Panel>\n    </Tabs>\n  )\n}\n",
-    "type": "docs"
-  },
-  "navigation/link-intent-demo": {
-    "component": "@/components/docs/navigation/link-intent-demo",
-    "raw": "'use client'\n\nimport { Link } from 'ui'\n\nexport default function LinkIntentDemo() {\n  return (\n    <div className=\"flex gap-4\">\n      <Link intent=\"primary\" href=\"#intent-1\">\n        Label\n      </Link>\n      <Link intent=\"secondary\" href=\"#intent-2\">\n        Label\n      </Link>\n      <Link intent=\"lad/primary\" href=\"#intent-3\">\n        Label\n      </Link>\n      <Link intent=\"danger\" href=\"#intent-4\">\n        Label\n      </Link>\n      <Link href=\"#intent-5\">Label</Link>\n    </div>\n  )\n}\n",
-    "type": "docs"
-  },
-  "navigation/tabs-link-demo": {
-    "component": "@/components/docs/navigation/tabs-link-demo",
-    "raw": "'use client'\n\nimport { Tabs } from 'ui'\n\nconst navs = [\n  { url: '/', label: 'Home' },\n  { url: '/docs/getting-started/introduction', label: 'Docs' },\n  { url: '/components', label: 'Components' },\n  { url: 'https://paranoid.irsyad.co', label: 'Paranoid' }\n]\n\nexport default function TabsLinkDemo() {\n  return (\n    <Tabs aria-label=\"Navbar\">\n      <Tabs.List items={navs}>\n        {(item) => (\n          <Tabs.Tab id={item.label} href={item.url}>\n            {item.label}\n          </Tabs.Tab>\n        )}\n      </Tabs.List>\n    </Tabs>\n  )\n}\n",
-    "type": "docs"
-  },
-  "navigation/tabs-collections-demo": {
-    "component": "@/components/docs/navigation/tabs-collections-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { Collection } from 'react-aria-components'\nimport { Tabs } from 'ui'\n\nconst tabs = [\n  { id: 1, title: 'Overview', content: 'This is the overview tab content.' },\n  { id: 2, title: 'Features', content: 'Details about the features are listed here.' },\n  { id: 3, title: 'Pricing', content: 'Find the pricing information on this tab.' },\n  { id: 4, title: 'Reviews', content: 'Read user reviews and ratings here.' }\n]\n\nexport default function TabsCollectionsDemo() {\n  return (\n    <Tabs aria-label=\"Project Management\">\n      <Tabs.List aria-label=\"Dynamic tabs\" items={tabs}>\n        {(item) => <Tabs.Tab>{item.title}</Tabs.Tab>}\n      </Tabs.List>\n\n      <Collection items={tabs}>\n        {(item) => <Tabs.Panel key={item.id}>{item.content}</Tabs.Panel>}\n      </Collection>\n    </Tabs>\n  )\n}\n",
-    "type": "docs"
-  },
-  "navigation/pagination-dynamic-demo": {
-    "component": "@/components/docs/navigation/pagination-dynamic-demo",
-    "raw": "'use client'\n\nimport { Pagination } from 'ui'\n\nconst pages = Array.from({ length: 6 }, (_, i) => ({ value: i + 1 }))\nexport default function PaginationDynamicDemo() {\n  return (\n    <Pagination>\n      <Pagination.List>\n        <Pagination.Item variant=\"first\" href=\"#\" />\n        <Pagination.Item variant=\"previous\" href=\"#\" />\n        <Pagination.Section aria-label=\"Pagination Segment\" className=\"rounded-lg lg:hidden border\">\n          <Pagination.Item variant=\"label\">1</Pagination.Item>\n          <Pagination.Item variant=\"separator\" />\n          <Pagination.Item className=\"text-muted-fg\" variant=\"label\">\n            10\n          </Pagination.Item>\n        </Pagination.Section>\n        <Pagination.Section\n          aria-label=\"Pagination Segment\"\n          className=\"hidden lg:flex\"\n          items={pages}\n        >\n          {(item) => (\n            <Pagination.Item id={item.value.toString()} isCurrent={item.value === 4} href=\"#\">\n              {item.value}\n            </Pagination.Item>\n          )}\n        </Pagination.Section>\n        <Pagination.Item variant=\"next\" href=\"#\" />\n        <Pagination.Item variant=\"last\" href=\"#\" />\n      </Pagination.List>\n    </Pagination>\n  )\n}\n",
-    "type": "docs"
-  },
-  "navigation/tabs-responsive-demo": {
-    "component": "@/components/docs/navigation/tabs-responsive-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { IconHamburger } from 'justd-icons'\nimport { Collection } from 'react-aria-components'\nimport { Select, Tabs, useMediaQuery } from 'ui'\n\nconst tabs = [\n  { id: 1, title: 'Overview', content: 'This is the overview tab content.' },\n  { id: 2, title: 'Features', content: 'Details about the features are listed here.' },\n  { id: 3, title: 'Pricing', content: 'Find the pricing information on this tab.' },\n  { id: 4, title: 'Reviews', content: 'Read user reviews and ratings here.' },\n  { id: 5, title: 'Support', content: 'Contact our support team on this tab.' },\n  { id: 6, title: 'Guarantee', content: 'Our satisfaction guarantee details are here.' },\n  { id: 7, title: 'FAQ', content: 'Frequently asked questions are answered here.' }\n]\n\nexport default function TabsResponsiveDemo() {\n  const isMobile = useMediaQuery('(max-width: 600px)')\n  return isMobile ? (\n    <Select className=\"sm:hidden flex\">\n      <Select.Trigger prefix={<IconHamburger />} />\n      <Select.List items={tabs}>\n        {(item) => <Select.Option textValue={item.title}>{item.title}</Select.Option>}\n      </Select.List>\n    </Select>\n  ) : (\n    <Tabs className=\"sm:flex hidden\" aria-label=\"Project Management\">\n      <Tabs.List aria-label=\"Dynamic tabs\" items={tabs}>\n        {(item) => <Tabs.Tab>{item.title}</Tabs.Tab>}\n      </Tabs.List>\n      <Collection items={tabs}>\n        {(item) => <Tabs.Panel key={item.id}>{item.content}</Tabs.Panel>}\n      </Collection>\n    </Tabs>\n  )\n}\n",
-    "type": "docs"
-  },
-  "navigation/pagination-demo": {
-    "component": "@/components/docs/navigation/pagination-demo",
-    "raw": "'use client'\n\nimport { Pagination } from 'ui'\n\nexport default function PaginationDemo() {\n  return (\n    <Pagination>\n      <Pagination.List>\n        <Pagination.Item variant=\"first\" href=\"#\" />\n        <Pagination.Item variant=\"previous\" href=\"#\" />\n        <Pagination.Item href=\"#\">1</Pagination.Item>\n        <Pagination.Item href=\"#\" isCurrent>\n          2\n        </Pagination.Item>\n        <Pagination.Item variant=\"ellipsis\" />\n        <Pagination.Item variant=\"next\" href=\"#\" />\n        <Pagination.Item variant=\"last\" href=\"#\" />\n      </Pagination.List>\n    </Pagination>\n  )\n}\n",
-    "type": "docs"
-  },
-  "navigation/simple-pagination-demo": {
-    "component": "@/components/docs/navigation/simple-pagination-demo",
-    "raw": "'use client'\n\nimport { Pagination } from 'ui'\n\nexport default function SimplePaginationDemo() {\n  return (\n    <Pagination>\n      <Pagination.List>\n        <Pagination.Item variant=\"first\" href=\"#\" />\n        <Pagination.Item variant=\"previous\" href=\"#\" />\n        <Pagination.Section aria-label=\"Pagination Segment\" className=\"rounded-lg border\">\n          <Pagination.Item variant=\"label\">1</Pagination.Item>\n          <Pagination.Item variant=\"separator\" />\n          <Pagination.Item className=\"text-muted-fg\" variant=\"label\">\n            10\n          </Pagination.Item>\n        </Pagination.Section>\n        <Pagination.Item variant=\"next\" href=\"#\" />\n        <Pagination.Item variant=\"last\" href=\"#\" />\n      </Pagination.List>\n    </Pagination>\n  )\n}\n",
-    "type": "docs"
-  },
-  "navigation/link-unstyled-demo": {
-    "component": "@/components/docs/navigation/link-unstyled-demo",
-    "raw": "'use client'\n\nimport { Link } from 'ui'\n\nexport default function LinkUnstyledDemo() {\n  return <Link href=\"#unstyled\">Label</Link>\n}\n",
-    "type": "docs"
-  },
-  "navigation/tabs-orientation-demo": {
-    "component": "@/components/docs/navigation/tabs-orientation-demo",
-    "raw": "'use client'\n\nimport { Tabs } from 'ui'\n\nexport default function TabsOrientationDemo() {\n  return (\n    <Tabs orientation=\"vertical\" aria-label=\"E-Learning Platform\">\n      <Tabs.List>\n        <Tabs.Tab id=\"c\">Courses</Tabs.Tab>\n        <Tabs.Tab id=\"e\">Exams</Tabs.Tab>\n        <Tabs.Tab id=\"g\">Grades</Tabs.Tab>\n        <Tabs.Tab id=\"f\">Forums</Tabs.Tab>\n        <Tabs.Tab id=\"p\">Profile</Tabs.Tab>\n      </Tabs.List>\n      <Tabs.Panel id=\"c\">\n        Enroll in courses and access learning materials on various subjects.\n      </Tabs.Panel>\n      <Tabs.Panel id=\"e\">Take practice exams and quizzes to test your knowledge.</Tabs.Panel>\n      <Tabs.Panel id=\"g\">View your grades and track your academic progress.</Tabs.Panel>\n      <Tabs.Panel id=\"f\">\n        Participate in discussion forums with other students and instructors.\n      </Tabs.Panel>\n      <Tabs.Panel id=\"p\">Update your profile and customize your learning preferences.</Tabs.Panel>\n    </Tabs>\n  )\n}\n",
-    "type": "docs"
-  },
-  "navigation/link-button-demo": {
-    "component": "@/components/docs/navigation/link-button-demo",
-    "raw": "'use client'\n\nimport { buttonStyles, Link } from 'ui'\n\nexport default function LinkButtonDemo() {\n  return (\n    <div className=\"flex gap-2\">\n      <Link className={buttonStyles()} href=\"#use-as-button\">\n        Link\n      </Link>\n      <Link className={buttonStyles({ appearance: 'outline' })} href=\"#use-as-button\">\n        Link\n      </Link>\n      <Link\n        className={buttonStyles({ appearance: 'plain', shape: 'circle' })}\n        href=\"#use-as-button\"\n      >\n        Link\n      </Link>\n    </div>\n  )\n}\n",
-    "type": "docs"
-  },
-  "navigation/link-demo": {
-    "component": "@/components/docs/navigation/link-demo",
-    "raw": "'use client'\n\nimport { Link } from 'ui'\n\nexport default function LinkDemo() {\n  return (\n    <Link intent=\"primary\" href=\"#basic\">\n      Label\n    </Link>\n  )\n}\n",
-    "type": "docs"
-  },
-  "navigation/breadcrumbs-demo": {
-    "component": "@/components/docs/navigation/breadcrumbs-demo",
-    "raw": "'use client'\n\nimport { Breadcrumb, Breadcrumbs } from 'ui'\n\nexport default function BreadcrumbsDemo() {\n  return (\n    <Breadcrumbs onAction={() => {}}>\n      <Breadcrumb href=\"/\">Home</Breadcrumb>\n      <Breadcrumb href=\"/design-system\">Design System</Breadcrumb>\n      <Breadcrumb>Collections</Breadcrumb>\n    </Breadcrumbs>\n  )\n}\n",
-    "type": "docs"
-  },
-  "navigation/link-disabled-demo": {
-    "component": "@/components/docs/navigation/link-disabled-demo",
-    "raw": "'use client'\n\nimport { Link } from 'ui'\n\nexport default function LinkDisabledDemo() {\n  return (\n    <div className=\"flex gap-4\">\n      <Link isDisabled intent=\"primary\" href=\"#intent-1\">\n        Label\n      </Link>\n      <Link isDisabled intent=\"secondary\" href=\"#intent-2\">\n        Label\n      </Link>\n      <Link isDisabled intent=\"lad/primary\" href=\"#intent-3\">\n        Label\n      </Link>\n      <Link isDisabled intent=\"danger\" href=\"#intent-4\">\n        Label\n      </Link>\n      <Link isDisabled href=\"#intent-5\">\n        Label\n      </Link>\n    </div>\n  )\n}\n",
-    "type": "docs"
-  },
-  "navigation/tabs-disabled-demo": {
-    "component": "@/components/docs/navigation/tabs-disabled-demo",
-    "raw": "'use client'\n\nimport { Tabs } from 'ui'\n\nexport default function TabsDisabledDemo() {\n  return (\n    <Tabs disabledKeys={['c', 'a']} aria-label=\"Services\">\n      <Tabs.List>\n        <Tabs.Tab id=\"o\">Overview</Tabs.Tab>\n        <Tabs.Tab id=\"c\">Contact</Tabs.Tab>\n        <Tabs.Tab id=\"a\">About Us</Tabs.Tab>\n      </Tabs.List>\n      <Tabs.Panel id=\"o\">\n        Welcome to our service! Here, you’ll find a brief overview of what we offer, our mission,\n        and how we strive to provide value to our customers.\n      </Tabs.Panel>\n      <Tabs.Panel id=\"c\">\n        Get in touch with us through our contact page. We are here to help you with any inquiries,\n        support requests, or feedback you may have.\n      </Tabs.Panel>\n      <Tabs.Panel id=\"a\">\n        Learn more about our company, our history, and the team behind our success. We are dedicated\n        to delivering the best service to our customers.\n      </Tabs.Panel>\n    </Tabs>\n  )\n}\n",
-    "type": "docs"
-  },
-  "controls/slider-range-demo": {
-    "component": "@/components/docs/controls/slider-range-demo",
-    "raw": "'use client'\n\nimport { Slider } from 'ui'\n\nexport default function SliderRangeDemo() {\n  return <Slider defaultValue={[25, 75]} label=\"Distance Range\" />\n}\n",
-    "type": "docs"
-  },
-  "controls/context-menu-disabled-demo": {
-    "component": "@/components/docs/controls/context-menu-disabled-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { ContextMenu } from 'ui'\n\nexport default function ContextMenuDisabledDemo() {\n  return (\n    <ContextMenu>\n      <ContextMenu.Trigger>Right click me</ContextMenu.Trigger>\n      <ContextMenu.Content>\n        <ContextMenu.Item id=\"view\">View</ContextMenu.Item>\n        <ContextMenu.Item id=\"edit\">Edit</ContextMenu.Item>\n        <ContextMenu.Item id=\"gsu\" isDisabled>\n          Generate Short URL\n        </ContextMenu.Item>\n      </ContextMenu.Content>\n    </ContextMenu>\n  )\n}\n",
-    "type": "docs"
-  },
-  "controls/toolbar-disabled-demo": {
-    "component": "@/components/docs/controls/toolbar-disabled-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport {\n  IconAlignmentJustify,\n  IconAlignmentJustifyFill,\n  IconAlignmentRight,\n  IconAlignmentRightFill,\n  IconCamera,\n  IconCameraFill,\n  IconCursor,\n  IconCursorFill,\n  IconGallery,\n  IconGalleryFill,\n  IconPencilBox,\n  IconPencilBoxFill,\n  IconToolbox,\n  IconToolboxFill\n} from 'justd-icons'\nimport { Toggle, Toolbar } from 'ui'\n\nexport default function ToolbarDisabledDemo() {\n  return (\n    <Toolbar aria-label=\"Toolbox\">\n      <Toolbar.Group aria-label=\"Toolbox\">\n        <Toggle isDisabled aria-label=\"Cursor\" size=\"square-petite\" appearance=\"outline\">\n          {({ isSelected }) => <>{isSelected ? <IconCursorFill /> : <IconCursor />}</>}\n        </Toggle>\n        <Toggle aria-label=\"Pencil Box\" size=\"square-petite\" appearance=\"outline\">\n          {({ isSelected }) => <>{isSelected ? <IconPencilBoxFill /> : <IconPencilBox />}</>}\n        </Toggle>\n        <Toggle aria-label=\"Pencil Box\" size=\"square-petite\" appearance=\"outline\">\n          {({ isSelected }) => <>{isSelected ? <IconToolboxFill /> : <IconToolbox />}</>}\n        </Toggle>\n      </Toolbar.Group>\n      <Toolbar.Separator />\n      <Toolbar.Group isDisabled aria-label=\"Gallery\">\n        <Toolbar.Item aria-label=\"Camera\" size=\"square-petite\" appearance=\"outline\">\n          {({ isSelected }) => <>{isSelected ? <IconCameraFill /> : <IconCamera />}</>}\n        </Toolbar.Item>\n        <Toolbar.Item aria-label=\"Gallery\" size=\"square-petite\" appearance=\"outline\">\n          {({ isSelected }) => <>{isSelected ? <IconGalleryFill /> : <IconGallery />}</>}\n        </Toolbar.Item>\n      </Toolbar.Group>\n      <Toolbar.Separator />\n      <Toolbar.Group aria-label=\"Alignment\">\n        <Toggle aria-label=\"Align Right\" appearance=\"outline\">\n          {({ isSelected }) => (\n            <>{isSelected ? <IconAlignmentRightFill /> : <IconAlignmentRight />}</>\n          )}\n        </Toggle>\n        <Toggle aria-label=\"Align Justify\" appearance=\"outline\">\n          {({ isSelected }) => (\n            <>{isSelected ? <IconAlignmentJustifyFill /> : <IconAlignmentJustify />}</>\n          )}\n        </Toggle>\n      </Toolbar.Group>\n    </Toolbar>\n  )\n}\n",
-    "type": "docs"
-  },
-  "controls/slider-orientation-demo": {
-    "component": "@/components/docs/controls/slider-orientation-demo",
-    "raw": "'use client'\n\nimport React, { useState } from 'react'\n\nimport { Card, Description, Slider } from 'ui'\n\nexport default function SliderOrientationDemo() {\n  const [equalizer, setEqualizer] = useState({\n    subBass: 40,\n    bass: 50,\n    lowMid: 60,\n    mid: 70,\n    highMid: 65,\n    presence: 75,\n    brilliance: 80\n  })\n\n  const handleSliderChange = (name: string, value: number) => {\n    setEqualizer((prev) => ({ ...prev, [name]: value }))\n  }\n\n  return (\n    <Card className=\"p-4\">\n      <div className=\"flex justify-center [&>*]:w-6 gap-4\">\n        <Slider\n          aria-label=\"Sub Bass\"\n          value={equalizer.subBass}\n          onChange={(newValue) => handleSliderChange('subBass', newValue as number)}\n          orientation=\"vertical\"\n        />\n        <Slider\n          aria-label=\"Bass\"\n          value={equalizer.bass}\n          onChange={(newValue) => handleSliderChange('bass', newValue as number)}\n          orientation=\"vertical\"\n        />\n        <Slider\n          aria-label=\"Low Mid\"\n          value={equalizer.lowMid}\n          onChange={(newValue) => handleSliderChange('lowMid', newValue as number)}\n          orientation=\"vertical\"\n        />\n        <Slider\n          aria-label=\"Mid\"\n          value={equalizer.mid}\n          onChange={(newValue) => handleSliderChange('mid', newValue as number)}\n          orientation=\"vertical\"\n        />\n        <Slider\n          aria-label=\"High Mid\"\n          value={equalizer.highMid}\n          onChange={(newValue) => handleSliderChange('highMid', newValue as number)}\n          orientation=\"vertical\"\n        />\n        <Slider\n          aria-label=\"Presence\"\n          value={equalizer.presence}\n          onChange={(newValue) => handleSliderChange('presence', newValue as number)}\n          orientation=\"vertical\"\n        />\n        <Slider\n          aria-label=\"Brilliance\"\n          value={equalizer.brilliance}\n          onChange={(newValue) => handleSliderChange('brilliance', newValue as number)}\n          orientation=\"vertical\"\n        />\n      </div>\n      <Description className=\"mt-6 block text-center\">Equilizer</Description>\n    </Card>\n  )\n}\n",
-    "type": "docs"
-  },
-  "controls/command-menu-disabled-demo": {
-    "component": "@/components/docs/controls/command-menu-disabled-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { Button, CommandMenu } from 'ui'\n\nexport default function CommandMenuDisabledDemo() {\n  const [isOpen, setIsOpen] = React.useState(false)\n  return (\n    <>\n      <Button appearance=\"outline\" onPress={() => setIsOpen(true)}>\n        Open\n      </Button>\n      <CommandMenu isOpen={isOpen} onOpenChange={setIsOpen}>\n        <CommandMenu.Input placeholder=\"Quick search...\" />\n        <CommandMenu.List>\n          <CommandMenu.Section heading=\"Suggestions\">\n            <CommandMenu.Item>\n              PhpStorm\n              <CommandMenu.Description>Application</CommandMenu.Description>\n            </CommandMenu.Item>\n            <CommandMenu.Item>\n              WebStorm\n              <CommandMenu.Description>Application</CommandMenu.Description>\n            </CommandMenu.Item>\n            <CommandMenu.Item disabled>\n              Warp\n              <CommandMenu.Description>Need to enable</CommandMenu.Description>\n            </CommandMenu.Item>\n            <CommandMenu.Item disabled>\n              Sublime Text\n              <CommandMenu.Description>Need to enable</CommandMenu.Description>\n            </CommandMenu.Item>\n            <CommandMenu.Item>\n              VS Code\n              <CommandMenu.Description>Application</CommandMenu.Description>\n            </CommandMenu.Item>\n            <CommandMenu.Item disabled>\n              Atom\n              <CommandMenu.Description>Killed</CommandMenu.Description>\n            </CommandMenu.Item>\n          </CommandMenu.Section>\n        </CommandMenu.List>\n      </CommandMenu>\n    </>\n  )\n}\n",
-    "type": "docs"
-  },
-  "controls/switch-variant-demo": {
-    "component": "@/components/docs/controls/switch-variant-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { OptionPreview } from '@/components/docs/outside/option-preview'\nimport { Select, Switch } from 'ui'\n\nconst items = ['primary', 'secondary', 'success', 'danger', 'warning', 'info'].map((item) => ({\n  value: item,\n  label: item\n}))\nexport default function SwitchVariantDemo() {\n  const [intent, setIntent] = React.useState('primary')\n\n  return (\n    <>\n      <OptionPreview>\n        <Select selectedKey={intent} onSelectionChange={(v) => setIntent(v as any)}>\n          <Select.Trigger />\n          <Select.List items={items}>\n            {(item) => (\n              <Select.Option id={item.value} textValue={item.value}>\n                {item.label}\n              </Select.Option>\n            )}\n          </Select.List>\n        </Select>\n      </OptionPreview>\n      <Switch defaultSelected intent={intent as any}>\n        Label\n      </Switch>\n    </>\n  )\n}\n",
-    "type": "docs"
-  },
-  "controls/toolbar-demo": {
-    "component": "@/components/docs/controls/toolbar-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport {\n  IconAlignmentCenter,\n  IconAlignmentCenterFill,\n  IconAlignmentJustify,\n  IconAlignmentJustifyFill,\n  IconAlignmentLeft,\n  IconAlignmentLeftFill,\n  IconAlignmentRight,\n  IconAlignmentRightFill,\n  IconBold,\n  IconBoldFill,\n  IconChevronDown,\n  IconGallery,\n  IconGrid4,\n  IconItalic,\n  IconItalicFill,\n  IconLink,\n  IconRedo,\n  IconStrikeThrough,\n  IconStrikeThroughFill,\n  IconUnderline,\n  IconUnderlineFill,\n  IconUndo\n} from 'justd-icons'\nimport { Button, Checkbox, Menu, Toolbar } from 'ui'\n\nexport default function ToolbarDemo() {\n  return (\n    <Toolbar aria-label=\"Toolbars\">\n      <Toolbar.Group aria-label=\"Text Formatting Options\">\n        <Toolbar.Item defaultSelected aria-label=\"Bold\" size=\"square-petite\" appearance=\"outline\">\n          {({ isSelected }) => <>{isSelected ? <IconBoldFill /> : <IconBold />}</>}\n        </Toolbar.Item>\n        <Toolbar.Item aria-label=\"Italic\" size=\"square-petite\" appearance=\"outline\">\n          {({ isSelected }) => <>{isSelected ? <IconItalicFill /> : <IconItalic />}</>}\n        </Toolbar.Item>\n        <Toolbar.Item aria-label=\"Underline\" size=\"square-petite\" appearance=\"outline\">\n          {({ isSelected }) => <>{isSelected ? <IconUnderlineFill /> : <IconUnderline />}</>}\n        </Toolbar.Item>\n        <Toolbar.Item aria-label=\"Strikethrough\" size=\"square-petite\" appearance=\"outline\">\n          {({ isSelected }) => (\n            <>{isSelected ? <IconStrikeThroughFill /> : <IconStrikeThrough />}</>\n          )}\n        </Toolbar.Item>\n      </Toolbar.Group>\n      <Toolbar.Separator />\n      <Toolbar.Group aria-label=\"Alignment\">\n        <Toolbar.Item aria-label=\"Align Left\" size=\"square-petite\" appearance=\"outline\">\n          {({ isSelected }) => (\n            <>{isSelected ? <IconAlignmentLeftFill /> : <IconAlignmentLeft />}</>\n          )}\n        </Toolbar.Item>\n        <Toolbar.Item aria-label=\"Align Center\" appearance=\"outline\">\n          {({ isSelected }) => (\n            <>{isSelected ? <IconAlignmentCenterFill /> : <IconAlignmentCenter />}</>\n          )}\n        </Toolbar.Item>\n        <Toolbar.Item aria-label=\"Align Right\" appearance=\"outline\">\n          {({ isSelected }) => (\n            <>{isSelected ? <IconAlignmentRightFill /> : <IconAlignmentRight />}</>\n          )}\n        </Toolbar.Item>\n        <Toolbar.Item aria-label=\"Align Justify\" appearance=\"outline\">\n          {({ isSelected }) => (\n            <>{isSelected ? <IconAlignmentJustifyFill /> : <IconAlignmentJustify />}</>\n          )}\n        </Toolbar.Item>\n      </Toolbar.Group>\n      <Toolbar.Separator />\n      <Checkbox>Spell Check</Checkbox>\n      <Toolbar.Group className=\"ml-auto\">\n        <Menu>\n          <Button aria-label=\"Other options\" appearance=\"outline\" size=\"small\">\n            Options...\n            <IconChevronDown />\n          </Button>\n          <Menu.Content showArrow placement=\"bottom right\">\n            <Menu.Item>\n              <IconUndo />\n              Undo\n            </Menu.Item>\n            <Menu.Item>\n              <IconRedo />\n              Redo\n            </Menu.Item>\n            <Menu.Item>\n              <IconLink />\n              Insert Link\n            </Menu.Item>\n            <Menu.Item>\n              <IconGallery />\n              Insert Image\n            </Menu.Item>\n            <Menu.Item>\n              <IconGrid4 />\n              Insert Grid\n            </Menu.Item>\n          </Menu.Content>\n        </Menu>\n      </Toolbar.Group>\n    </Toolbar>\n  )\n}\n",
-    "type": "docs"
-  },
-  "controls/command-menu-section-demo": {
-    "component": "@/components/docs/controls/command-menu-section-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { Button, CommandMenu } from 'ui'\n\nexport default function CommandMenuSectionDemo() {\n  const [isOpen, setIsOpen] = React.useState(false)\n  return (\n    <>\n      <Button appearance=\"outline\" onPress={() => setIsOpen(true)}>\n        Open\n      </Button>\n      <CommandMenu isOpen={isOpen} onOpenChange={setIsOpen}>\n        <CommandMenu.Input placeholder=\"Quick search...\" />\n        <CommandMenu.List>\n          <CommandMenu.Section heading=\"Pages\">\n            <CommandMenu.Item asChild>\n              <a href=\"/\">Home</a>\n            </CommandMenu.Item>\n            <CommandMenu.Item asChild>\n              <a href=\"/docs/getting-started/installation\">Docs</a>\n            </CommandMenu.Item>\n            <CommandMenu.Item asChild>\n              <a href=\"/components\">Components</a>\n            </CommandMenu.Item>\n          </CommandMenu.Section>\n          <CommandMenu.Separator />\n          <CommandMenu.Section heading=\"Users\">\n            {users.map((user) => (\n              <CommandMenu.Item key={user.id}>{user.name}</CommandMenu.Item>\n            ))}\n          </CommandMenu.Section>\n        </CommandMenu.List>\n      </CommandMenu>\n    </>\n  )\n}\n\nconst users = [\n  { id: 1, name: 'Barbara Kirlin Sr.', image_url: 'https://i.pravatar.cc/150?img=1' },\n  { id: 2, name: 'Rosemarie Koch', image_url: 'https://i.pravatar.cc/150?img=2' },\n  { id: 3, name: 'Mrs. Reva Heaney Jr.', image_url: 'https://i.pravatar.cc/150?img=3' },\n  { id: 4, name: 'Ms. Ettie Abshire DVM', image_url: 'https://i.pravatar.cc/150?img=4' },\n  { id: 5, name: 'Bria Ziemann', image_url: 'https://i.pravatar.cc/150?img=5' },\n  { id: 6, name: 'Heloise Borer Sr.', image_url: 'https://i.pravatar.cc/150?img=6' },\n  {\n    id: 7,\n    name: 'Miss Jacinthe Gerlach DVM',\n    image_url: 'https://i.pravatar.cc/150?img=7'\n  },\n  {\n    id: 8,\n    name: 'Miss Stephania Schaefer Sr.',\n    image_url: 'https://i.pravatar.cc/150?img=8'\n  },\n  { id: 9, name: 'Kevon Hackett MD', image_url: 'https://i.pravatar.cc/150?img=9' },\n  { id: 10, name: 'Tom Ledner', image_url: 'https://i.pravatar.cc/150?img=10' }\n]\n",
-    "type": "docs"
-  },
-  "controls/command-menu-trigger-by-keyboard-demo": {
-    "component": "@/components/docs/controls/command-menu-trigger-by-keyboard-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { IconCreditCard, IconCube, IconGear, IconHome2, IconNotes, IconShield } from 'justd-icons'\nimport Link from 'next/link'\nimport { CommandMenu } from 'ui'\n\nexport default function CommandMenuTriggerByKeyboardDemo() {\n  const [isOpen, setIsOpen] = React.useState(false)\n  React.useEffect(() => {\n    const down = (e: KeyboardEvent) => {\n      if (e.key === '/' && (e.metaKey || e.ctrlKey)) {\n        e.preventDefault()\n        setIsOpen((open: boolean) => !open)\n      }\n    }\n\n    document.addEventListener('keydown', down)\n\n    return () => document.removeEventListener('keydown', down)\n  }, [setIsOpen])\n  return (\n    <>\n      ⌘ /\n      <CommandMenu isOpen={isOpen} onOpenChange={setIsOpen}>\n        <CommandMenu.Input placeholder=\"Quick search...\" />\n        <CommandMenu.List>\n          <CommandMenu.Section separator heading=\"Pages\">\n            <CommandMenu.Item asChild>\n              <Link href=\"#\">\n                <IconHome2 /> Home\n              </Link>\n            </CommandMenu.Item>\n            <CommandMenu.Item asChild>\n              <Link href=\"#\">\n                <IconNotes /> Docs\n                <CommandMenu.Keyboard keys=\"⌘k\" />\n              </Link>\n            </CommandMenu.Item>\n            <CommandMenu.Item asChild>\n              <Link href=\"#\">\n                <IconCube /> Components\n              </Link>\n            </CommandMenu.Item>\n          </CommandMenu.Section>\n          <CommandMenu.Section heading=\"Dashboard\">\n            <CommandMenu.Item asChild>\n              <Link href=\"#\">\n                <IconCreditCard /> Billing\n              </Link>\n            </CommandMenu.Item>\n            <CommandMenu.Item asChild>\n              <Link href=\"#\">\n                <IconGear /> Settings\n                <CommandMenu.Keyboard keys=\"⌘s\" />\n              </Link>\n            </CommandMenu.Item>\n            <CommandMenu.Item asChild>\n              <Link href=\"#\">\n                <IconShield /> Security\n              </Link>\n            </CommandMenu.Item>\n          </CommandMenu.Section>\n        </CommandMenu.List>\n      </CommandMenu>\n    </>\n  )\n}\n",
-    "type": "docs"
-  },
-  "controls/accordion-default-expand-demo": {
-    "component": "@/components/docs/controls/accordion-default-expand-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { Accordion } from 'ui'\n\nexport default function AccordionDefaultExpandDemo() {\n  return (\n    <Accordion defaultExpandedKeys={[1, 2]}>\n      {faqs.map((item, index) => (\n        <Accordion.Item key={index} currentId={index}>\n          <Accordion.Trigger>{item.q}</Accordion.Trigger>\n          <Accordion.Content>{item.a}</Accordion.Content>\n        </Accordion.Item>\n      ))}\n    </Accordion>\n  )\n}\n\nconst faqs = [\n  {\n    q: 'How do I reset my password?',\n    a: \"You can reset your password by going to the settings page and clicking on 'Reset Password'.\"\n  },\n  {\n    q: 'Can I change my subscription plan?',\n    a: 'Yes, you can upgrade or downgrade your subscription plan at any time from your account settings.'\n  },\n  {\n    q: 'Where can I view my past orders?',\n    a: \"Your past orders can be viewed in the 'Orders' section of your account dashboard.\"\n  },\n  {\n    q: 'What is the return policy?',\n    a: 'Our return policy allows you to return products within 30 days of purchase for a full refund or exchange.'\n  },\n  {\n    q: 'How do I contact customer support?',\n    a: 'You can contact customer support via email at support@example.com or through our online chat system.'\n  }\n]\n",
-    "type": "docs"
-  },
-  "controls/context-menu-separator-demo": {
-    "component": "@/components/docs/controls/context-menu-separator-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { ContextMenu } from 'ui'\n\nexport default function ContextMenuSeparatorDemo() {\n  return (\n    <ContextMenu>\n      <ContextMenu.Trigger>Right click me</ContextMenu.Trigger>\n      <ContextMenu.Content>\n        <ContextMenu.Item id=\"view\">View</ContextMenu.Item>\n        <ContextMenu.Item id=\"edit\">Edit</ContextMenu.Item>\n        <ContextMenu.Separator />\n        <ContextMenu.Item id=\"gsu\">Generate Short URL</ContextMenu.Item>\n      </ContextMenu.Content>\n    </ContextMenu>\n  )\n}\n",
-    "type": "docs"
-  },
-  "controls/accordion-demo": {
-    "component": "@/components/docs/controls/accordion-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { Accordion } from 'ui'\n\nexport default function AccordionDemo() {\n  return (\n    <Accordion>\n      <Accordion.Item currentId={1}>\n        <Accordion.Trigger>What is a VPS?</Accordion.Trigger>\n        <Accordion.Content>\n          A VPS is a Virtual Private Server, which provides dedicated resources on a server shared\n          with other users, offering more control and customization than shared hosting.\n        </Accordion.Content>\n      </Accordion.Item>\n\n      <Accordion.Item currentId={2}>\n        <Accordion.Trigger>What is cloud hosting?</Accordion.Trigger>\n        <Accordion.Content>\n          Cloud hosting utilizes multiple servers to balance load and maximize uptime. Instead of\n          being hosted on a single server, your data and resources are spread across multiple\n          servers.\n        </Accordion.Content>\n      </Accordion.Item>\n\n      <Accordion.Item currentId={3}>\n        <Accordion.Trigger>What is shared hosting?</Accordion.Trigger>\n        <Accordion.Content>\n          Shared hosting is a type of web hosting where multiple websites share the same server and\n          its resources. It's an affordable option, but may have limitations on performance and\n          customization.\n        </Accordion.Content>\n      </Accordion.Item>\n      <Accordion.Item currentId={4}>\n        <Accordion.Trigger>What is dedicated hosting?</Accordion.Trigger>\n        <Accordion.Content>\n          Dedicated hosting means your website is hosted on a single server exclusively reserved for\n          your site. This provides maximum performance and customization, but at a higher cost.\n        </Accordion.Content>\n      </Accordion.Item>\n    </Accordion>\n  )\n}\n",
-    "type": "docs"
-  },
-  "controls/accordion-disabled-demo": {
-    "component": "@/components/docs/controls/accordion-disabled-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { Accordion } from 'ui'\n\nexport default function AccordionDisabledDemo() {\n  return (\n    <Accordion disabledKeys={[1, 2, 4]}>\n      {faqs.map((item, index) => (\n        <Accordion.Item key={index} currentId={index}>\n          <Accordion.Trigger>{item.q}</Accordion.Trigger>\n          <Accordion.Content>{item.a}</Accordion.Content>\n        </Accordion.Item>\n      ))}\n    </Accordion>\n  )\n}\n\nconst faqs = [\n  {\n    q: 'Do you offer gift wrapping options?',\n    a: 'Yes, we provide gift wrapping services for a small additional charge at checkout.'\n  },\n  {\n    q: 'Can I return a gift card?',\n    a: 'Sorry, gift cards are non-refundable and cannot be returned.'\n  },\n  {\n    q: 'What are your store hours?',\n    a: 'Our store is open from 9 AM to 9 PM on weekdays and 10 AM to 6 PM on weekends.'\n  },\n  {\n    q: 'Do you have a loyalty program?',\n    a: 'Yes, we have a loyalty program where you can earn points for every purchase and redeem them for discounts.'\n  },\n  {\n    q: 'How do I update my billing information?',\n    a: 'You can update your billing information through your account settings on our website.'\n  },\n  {\n    q: 'Are there any discounts for bulk orders?',\n    a: 'Yes, we offer discounts on bulk orders. Please contact our sales team for more details.'\n  }\n]\n",
-    "type": "docs"
-  },
-  "controls/slider-controlled-demo": {
-    "component": "@/components/docs/controls/slider-controlled-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { Slider } from 'ui'\n\nexport default function SliderControlledDemo() {\n  const [temperature, setTemperature] = React.useState<number>(31)\n  const [saturation, setSaturation] = React.useState<number[]>([21, 86])\n  return (\n    <div className=\"space-y-6\">\n      <div>\n        <Slider\n          value={temperature}\n          onChange={(v) => setTemperature(v as number)}\n          label=\"Temperature\"\n          description={`Current temperature: ${temperature ?? '-'}`}\n        />\n      </div>\n      <div>\n        <Slider\n          value={saturation}\n          onChange={(v) => setSaturation(v as number[])}\n          label=\"Saturation\"\n          description={`Current saturation: ${saturation ?? '-'}`}\n        />\n      </div>\n    </div>\n  )\n}\n",
-    "type": "docs"
-  },
-  "controls/slider-demo": {
-    "component": "@/components/docs/controls/slider-demo",
-    "raw": "'use client'\n\nimport { Slider } from 'ui'\n\nexport default function SliderDemo() {\n  return <Slider label=\"Volume\" />\n}\n",
-    "type": "docs"
-  },
-  "controls/slider-prefix-suffix-demo": {
-    "component": "@/components/docs/controls/slider-prefix-suffix-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { IconVolumeFull, IconVolumeOff } from 'justd-icons'\nimport { Slider } from 'ui'\n\nexport default function SliderPrefixSuffixDemo() {\n  const [volume, setVolume] = React.useState<number>(0.5)\n  return (\n    <div className=\"max-w-2xl items-center flex gap-4 [&>[data-slot=icon]]:translate-y-3.5 [&>[data-slot=icon]]:size-4 [&>[data-slot=icon]]:shrink-0\">\n      <IconVolumeOff />\n      <Slider value={volume} onChange={(v) => setVolume(v as number)} label=\"Volume\" />\n      <IconVolumeFull />\n    </div>\n  )\n}\n",
-    "type": "docs"
-  },
-  "controls/toolbar-orientation-demo": {
-    "component": "@/components/docs/controls/toolbar-orientation-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport {\n  IconAlignmentCenter,\n  IconAlignmentCenterFill,\n  IconAlignmentJustify,\n  IconAlignmentJustifyFill,\n  IconAlignmentLeft,\n  IconAlignmentLeftFill,\n  IconCamera,\n  IconCameraFill,\n  IconCursor,\n  IconCursorFill,\n  IconDotsVertical,\n  IconGallery,\n  IconGalleryFill,\n  IconGrid4,\n  IconLink,\n  IconPencilBox,\n  IconPencilBoxFill,\n  IconRedo,\n  IconToolbox,\n  IconToolboxFill,\n  IconUndo\n} from 'justd-icons'\nimport { Button, Menu, Toggle, Toolbar } from 'ui'\n\nexport default function ToolbarOrientationDemo() {\n  return (\n    <Toolbar aria-label=\"Toolbox\" orientation=\"vertical\">\n      <Toolbar.Group aria-label=\"Toolbox\">\n        <Toolbar.Item aria-label=\"Cursor\" size=\"square-petite\" appearance=\"outline\">\n          {({ isSelected }) => <>{isSelected ? <IconCursorFill /> : <IconCursor />}</>}\n        </Toolbar.Item>\n        <Toolbar.Item aria-label=\"Pencil Box\" size=\"square-petite\" appearance=\"outline\">\n          {({ isSelected }) => <>{isSelected ? <IconPencilBoxFill /> : <IconPencilBox />}</>}\n        </Toolbar.Item>\n        <Toolbar.Item aria-label=\"Pencil Box\" size=\"square-petite\" appearance=\"outline\">\n          {({ isSelected }) => <>{isSelected ? <IconToolboxFill /> : <IconToolbox />}</>}\n        </Toolbar.Item>\n      </Toolbar.Group>\n      <Toolbar.Separator />\n      <Toolbar.Group aria-label=\"Gallery\">\n        <Toolbar.Item aria-label=\"Camera\" size=\"square-petite\" appearance=\"outline\">\n          {({ isSelected }) => <>{isSelected ? <IconCameraFill /> : <IconCamera />}</>}\n        </Toolbar.Item>\n        <Toolbar.Item aria-label=\"Gallery\" size=\"square-petite\" appearance=\"outline\">\n          {({ isSelected }) => <>{isSelected ? <IconGalleryFill /> : <IconGallery />}</>}\n        </Toolbar.Item>\n      </Toolbar.Group>\n      <Toolbar.Separator />\n      <Toolbar.Group aria-label=\"Alignment\">\n        <Toggle aria-label=\"Align Left\" size=\"square-petite\" appearance=\"outline\">\n          {({ isSelected }) => (\n            <>{isSelected ? <IconAlignmentLeftFill /> : <IconAlignmentLeft />}</>\n          )}\n        </Toggle>\n        <Toolbar.Item aria-label=\"Align Center\" appearance=\"outline\">\n          {({ isSelected }) => (\n            <>{isSelected ? <IconAlignmentCenterFill /> : <IconAlignmentCenter />}</>\n          )}\n        </Toolbar.Item>\n        <Toolbar.Item aria-label=\"Align Justify\" appearance=\"outline\">\n          {({ isSelected }) => (\n            <>{isSelected ? <IconAlignmentJustifyFill /> : <IconAlignmentJustify />}</>\n          )}\n        </Toolbar.Item>\n      </Toolbar.Group>\n      <Toolbar.Separator />\n      <Toolbar.Group>\n        <Menu>\n          <Button aria-label=\"Other options\" appearance=\"outline\" size=\"square-petite\">\n            <IconDotsVertical />\n          </Button>\n          <Menu.Content showArrow placement=\"right\">\n            <Menu.Item>\n              <IconUndo />\n              Undo\n            </Menu.Item>\n            <Menu.Item>\n              <IconRedo />\n              Redo\n            </Menu.Item>\n            <Menu.Item>\n              <IconLink />\n              Insert Link\n            </Menu.Item>\n            <Menu.Item>\n              <IconGallery />\n              Insert Image\n            </Menu.Item>\n            <Menu.Item>\n              <IconGrid4 />\n              Insert Grid\n            </Menu.Item>\n          </Menu.Content>\n        </Menu>\n      </Toolbar.Group>\n    </Toolbar>\n  )\n}\n",
-    "type": "docs"
-  },
-  "controls/slider-disabled-demo": {
-    "component": "@/components/docs/controls/slider-disabled-demo",
-    "raw": "'use client'\n\nimport { Slider } from 'ui'\n\nexport default function SliderDisabledDemo() {\n  return <Slider isDisabled label=\"Volume\" />\n}\n",
-    "type": "docs"
-  },
-  "controls/context-menu-demo": {
-    "component": "@/components/docs/controls/context-menu-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { ContextMenu } from 'ui'\n\nexport default function ContextMenuDemo() {\n  return (\n    <ContextMenu>\n      <ContextMenu.Trigger>Right click me</ContextMenu.Trigger>\n      <ContextMenu.Content className=\"sm:min-w-56\">\n        <ContextMenu.Item>Back</ContextMenu.Item>\n        <ContextMenu.Item isDisabled>Forward</ContextMenu.Item>\n        <ContextMenu.Item>Reload</ContextMenu.Item>\n        <ContextMenu.Separator />\n        <ContextMenu.Item>Bookmark</ContextMenu.Item>\n        <ContextMenu.Item>Save as</ContextMenu.Item>\n        <ContextMenu.Item>\n          Select all\n          <ContextMenu.Keyboard keys=\"⌘A\" />\n        </ContextMenu.Item>\n        <ContextMenu.Separator />\n        <ContextMenu.Item>View source</ContextMenu.Item>\n        <ContextMenu.Item>Inspect Accessibility</ContextMenu.Item>\n        <ContextMenu.Item>Inspect</ContextMenu.Item>\n      </ContextMenu.Content>\n    </ContextMenu>\n  )\n}\n",
-    "type": "docs"
-  },
-  "controls/command-menu-demo": {
-    "component": "@/components/docs/controls/command-menu-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { IconBill, IconCube, IconGear, IconHome, IconNotes, IconShield } from 'justd-icons'\nimport Link from 'next/link'\nimport { Avatar, Button, CommandMenu } from 'ui'\n\nexport default function CommandMenuDemo() {\n  const [isOpen, setIsOpen] = React.useState(false)\n  return (\n    <>\n      <Button appearance=\"outline\" onPress={() => setIsOpen(true)}>\n        Open\n      </Button>\n      <CommandMenu isOpen={isOpen} onOpenChange={setIsOpen}>\n        <CommandMenu.Input placeholder=\"Quick search...\" />\n        <CommandMenu.List>\n          <CommandMenu.Section separator heading=\"Pages\">\n            <CommandMenu.Item asChild>\n              <Link href=\"#\">\n                <IconHome /> Home\n              </Link>\n            </CommandMenu.Item>\n            <CommandMenu.Item asChild>\n              <Link href=\"#\">\n                <IconNotes /> Docs\n                <CommandMenu.Keyboard keys=\"⌘k\" />\n              </Link>\n            </CommandMenu.Item>\n            <CommandMenu.Item asChild>\n              <Link href=\"#\">\n                <IconCube /> Components\n              </Link>\n            </CommandMenu.Item>\n          </CommandMenu.Section>\n          <CommandMenu.Section separator heading=\"Dashboard\">\n            <CommandMenu.Item asChild>\n              <Link href=\"#\">\n                <IconBill /> Billing\n              </Link>\n            </CommandMenu.Item>\n            <CommandMenu.Item asChild>\n              <Link href=\"#\">\n                <IconGear /> Settings\n                <CommandMenu.Keyboard keys=\"⌘s\" />\n              </Link>\n            </CommandMenu.Item>\n            <CommandMenu.Item asChild>\n              <Link href=\"#\">\n                <IconShield /> Security\n              </Link>\n            </CommandMenu.Item>\n          </CommandMenu.Section>\n          <CommandMenu.Section heading=\"Team\">\n            {users.map((user) => (\n              <CommandMenu.Item key={user.id}>\n                <Avatar src={user.image_url} />\n                {user.name}\n              </CommandMenu.Item>\n            ))}\n          </CommandMenu.Section>\n        </CommandMenu.List>\n      </CommandMenu>\n    </>\n  )\n}\n\nconst users = [\n  { id: 1, name: 'Barbara Kirlin Sr.', image_url: 'https://i.pravatar.cc/150?img=1' },\n  { id: 2, name: 'Rosemarie Koch', image_url: 'https://i.pravatar.cc/150?img=2' },\n  { id: 3, name: 'Mrs. Reva Heaney Jr.', image_url: 'https://i.pravatar.cc/150?img=3' },\n  { id: 5, name: 'Bria Ziemann', image_url: 'https://i.pravatar.cc/150?img=5' },\n  { id: 6, name: 'Heloise Borer Sr.', image_url: 'https://i.pravatar.cc/150?img=6' }\n]\n",
-    "type": "docs"
-  },
-  "controls/context-menu-danger-demo": {
-    "component": "@/components/docs/controls/context-menu-danger-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { ContextMenu } from 'ui'\n\nexport default function ContextMenuDangerDemo() {\n  return (\n    <ContextMenu>\n      <ContextMenu.Trigger>Right click me</ContextMenu.Trigger>\n      <ContextMenu.Content>\n        <ContextMenu.Item>Open</ContextMenu.Item>\n        <ContextMenu.Item>Rename</ContextMenu.Item>\n        <ContextMenu.Item>Duplicate</ContextMenu.Item>\n        <ContextMenu.Item>Share</ContextMenu.Item>\n        <ContextMenu.Separator />\n        <ContextMenu.Item isDanger>Delete</ContextMenu.Item>\n      </ContextMenu.Content>\n    </ContextMenu>\n  )\n}\n",
-    "type": "docs"
-  },
-  "controls/slider-step-demo": {
-    "component": "@/components/docs/controls/slider-step-demo",
-    "raw": "'use client'\n\nimport { Slider } from 'ui'\n\nexport default function SliderStepDemo() {\n  return <Slider step={10} description=\"Step in 10\" label=\"Progress tracking\" />\n}\n",
-    "type": "docs"
-  },
-  "controls/switch-demo": {
-    "component": "@/components/docs/controls/switch-demo",
-    "raw": "'use client'\n\nimport { useTheme } from 'next-themes'\nimport { Switch } from 'ui'\n\nexport default function SwitchDemo() {\n  const { resolvedTheme, setTheme } = useTheme()\n  return (\n    <Switch onChange={() => setTheme(resolvedTheme === 'light' ? 'dark' : 'light')}>\n      Switch Theme\n    </Switch>\n  )\n}\n",
-    "type": "docs"
-  },
-  "controls/context-menu-item-details-demo": {
-    "component": "@/components/docs/controls/context-menu-item-details-demo",
-    "raw": "import { ContextMenu } from 'ui'\n\nexport default function ContextMenuItemDetailsDemo() {\n  return (\n    <ContextMenu>\n      <ContextMenu.Trigger>Right click me</ContextMenu.Trigger>\n      <ContextMenu.Content items={roles}>\n        {(item) => (\n          <ContextMenu.Item id={item.id} textValue={item.name}>\n            <ContextMenu.ItemDetails label={item.name} description={item.description} />\n          </ContextMenu.Item>\n        )}\n      </ContextMenu.Content>\n    </ContextMenu>\n  )\n}\n\nconst roles = [\n  { id: 1, name: 'Admin', description: 'Has full access to all resources' },\n  { id: 2, name: 'Editor', description: 'Can edit content but has limited access to settings' },\n  { id: 3, name: 'Viewer', description: 'Can view content but cannot make changes' },\n  { id: 4, name: 'Contributor', description: 'Can contribute content for review' },\n  { id: 5, name: 'Guest', description: 'Limited access, mostly for viewing purposes' }\n]\n",
-    "type": "docs"
-  },
-  "controls/command-menu-separator-demo": {
-    "component": "@/components/docs/controls/command-menu-separator-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { Button, CommandMenu } from 'ui'\n\nexport default function CommandMenuSeparatorDemo() {\n  const [isOpen, setIsOpen] = React.useState(false)\n  return (\n    <>\n      <Button appearance=\"outline\" onPress={() => setIsOpen(true)}>\n        Open\n      </Button>\n      <CommandMenu isOpen={isOpen} onOpenChange={setIsOpen}>\n        <CommandMenu.Input placeholder=\"Quick search...\" />\n        <CommandMenu.List>\n          <CommandMenu.Item asChild>\n            <a href=\"#\">Profile Overview</a>\n          </CommandMenu.Item>\n          <CommandMenu.Item asChild>\n            <a href=\"#\">Profile Settings</a>\n          </CommandMenu.Item>\n          <CommandMenu.Item asChild>\n            <a href=\"#\">Security Settings</a>\n          </CommandMenu.Item>\n          <CommandMenu.Separator />\n          <CommandMenu.Item asChild>\n            <a href=\"#\">Notification Preferences</a>\n          </CommandMenu.Item>\n          <CommandMenu.Item asChild>\n            <a href=\"#\">Privacy Settings</a>\n          </CommandMenu.Item>\n          <CommandMenu.Separator />\n          <CommandMenu.Item asChild>\n            <a href=\"#\">Billing Information</a>\n          </CommandMenu.Item>\n          <CommandMenu.Item asChild>\n            <a href=\"#\">Subscription Plans</a>\n          </CommandMenu.Item>\n          <CommandMenu.Separator />\n          <CommandMenu.Item asChild>\n            <a href=\"#\">Connected Apps</a>\n          </CommandMenu.Item>\n          <CommandMenu.Item asChild>\n            <a href=\"#\">Logout</a>\n          </CommandMenu.Item>\n        </CommandMenu.List>\n      </CommandMenu>\n    </>\n  )\n}\n",
-    "type": "docs"
-  },
-  "controls/accordion-border-hidden-demo": {
-    "component": "@/components/docs/controls/accordion-border-hidden-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport {\n  IconBell,\n  IconCreditCard,\n  IconDownload,\n  IconSettings,\n  IconShield,\n  IconSupport\n} from 'justd-icons'\nimport { Accordion } from 'ui'\n\nexport default function AccordionWithIconDemo() {\n  return (\n    <Accordion hideBorder>\n      {items.map((item, index) => (\n        <Accordion.Item key={index} currentId={index}>\n          <Accordion.Trigger>{item.title}</Accordion.Trigger>\n          <Accordion.Content>{item.description}</Accordion.Content>\n        </Accordion.Item>\n      ))}\n    </Accordion>\n  )\n}\n\nconst items = [\n  {\n    icon: <IconSettings />,\n    title: 'Personal Settings',\n    description:\n      'You can update your profile, change your password, and manage your account settings here.'\n  },\n  {\n    icon: <IconBell />,\n    title: 'Notifications',\n    description:\n      'Manage your notifications preferences, including alerts, emails, and push notifications.'\n  },\n  {\n    icon: <IconShield />,\n    title: 'Privacy Options',\n    description:\n      'Adjust your privacy settings to control who can see your information and contact you.'\n  },\n  {\n    icon: <IconCreditCard />,\n    title: 'Payment Methods',\n    description:\n      'Add, remove, or update your payment methods including credit cards and digital wallets.'\n  },\n  {\n    icon: <IconSupport />,\n    title: 'Support Center',\n    description: 'Find help with common issues, or contact support for further assistance.'\n  },\n  {\n    icon: <IconDownload />,\n    title: 'Download Data',\n    description:\n      'Request a download of all your data we have stored, including account activity and user data.'\n  }\n]\n",
-    "type": "docs"
-  },
-  "controls/command-menu-keyboard-demo": {
-    "component": "@/components/docs/controls/command-menu-keyboard-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { Button, CommandMenu } from 'ui'\n\nexport default function CommandMenuKeyboardDemo() {\n  const [isOpen, setIsOpen] = React.useState(false)\n  return (\n    <>\n      <Button appearance=\"outline\" onPress={() => setIsOpen(true)}>\n        Open\n      </Button>\n      <CommandMenu isOpen={isOpen} onOpenChange={setIsOpen}>\n        <CommandMenu.Input placeholder=\"Quick search...\" />\n        <CommandMenu.List>\n          <CommandMenu.Item>\n            Account Settings\n            <CommandMenu.Keyboard keys=\"⌘A\" />\n          </CommandMenu.Item>\n\n          <CommandMenu.Item>\n            Profile\n            <CommandMenu.Keyboard keys=\"⌘P\" />\n          </CommandMenu.Item>\n\n          <CommandMenu.Item>\n            Notifications\n            <CommandMenu.Keyboard keys=\"⌘N\" />\n          </CommandMenu.Item>\n\n          <CommandMenu.Item>\n            Privacy Settings\n            <CommandMenu.Keyboard keys=\"⌘S\" />\n          </CommandMenu.Item>\n\n          <CommandMenu.Item>\n            Billing Information\n            <CommandMenu.Keyboard keys=\"⌘B\" />\n          </CommandMenu.Item>\n\n          <CommandMenu.Item>\n            Logout\n            <CommandMenu.Keyboard keys=\"⌘L\" />\n          </CommandMenu.Item>\n        </CommandMenu.List>\n      </CommandMenu>\n    </>\n  )\n}\n",
-    "type": "docs"
-  },
-  "controls/command-menu-description-demo": {
-    "component": "@/components/docs/controls/command-menu-description-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { IconCube } from 'justd-icons'\nimport { Button, CommandMenu } from 'ui'\n\nexport default function CommandMenuDescriptionDemo() {\n  const [isOpen, setIsOpen] = React.useState(false)\n  return (\n    <>\n      <Button appearance=\"outline\" onPress={() => setIsOpen(true)}>\n        Open\n      </Button>\n      <CommandMenu\n        messageOnEmpty={false}\n        hideCloseButton\n        hideSearchIndicator\n        isOpen={isOpen}\n        onOpenChange={setIsOpen}\n      >\n        <CommandMenu.Input placeholder=\"Search for apps and commands...\" />\n        <CommandMenu.Empty className=\"grid place-content-center\">\n          <div className=\"text-center\">\n            <IconCube className=\"inline\" />\n            <p className=\"mt-2\">No results found.</p>\n          </div>\n        </CommandMenu.Empty>\n\n        <CommandMenu.List>\n          <CommandMenu.Section separator heading=\"Suggestions\">\n            <CommandMenu.Item>\n              PhpStorm\n              <CommandMenu.Description>Application</CommandMenu.Description>\n            </CommandMenu.Item>\n            <CommandMenu.Item>\n              WebStorm\n              <CommandMenu.Description>Application</CommandMenu.Description>\n            </CommandMenu.Item>\n            <CommandMenu.Item>\n              Warp\n              <CommandMenu.Description>Application</CommandMenu.Description>\n            </CommandMenu.Item>\n          </CommandMenu.Section>\n\n          <CommandMenu.Section separator heading=\"Applications\">\n            <CommandMenu.Item>\n              Terminal\n              <CommandMenu.Description>Application</CommandMenu.Description>\n            </CommandMenu.Item>\n            <CommandMenu.Item>\n              Docker\n              <CommandMenu.Description>Application</CommandMenu.Description>\n            </CommandMenu.Item>\n          </CommandMenu.Section>\n\n          <CommandMenu.Section separator heading=\"Commands\">\n            <CommandMenu.Item>\n              git status\n              <CommandMenu.Description>Command</CommandMenu.Description>\n            </CommandMenu.Item>\n            <CommandMenu.Item>\n              bun add\n              <CommandMenu.Description>Command</CommandMenu.Description>\n            </CommandMenu.Item>\n            <CommandMenu.Item>\n              composer require\n              <CommandMenu.Description>Command</CommandMenu.Description>\n            </CommandMenu.Item>\n          </CommandMenu.Section>\n\n          <CommandMenu.Section heading=\"System Settings\">\n            <CommandMenu.Item>\n              Display Brightness\n              <CommandMenu.Description>System Settings</CommandMenu.Description>\n            </CommandMenu.Item>\n            <CommandMenu.Item>\n              Sound Output\n              <CommandMenu.Description>System Settings</CommandMenu.Description>\n            </CommandMenu.Item>\n          </CommandMenu.Section>\n        </CommandMenu.List>\n      </CommandMenu>\n    </>\n  )\n}\n",
-    "type": "docs"
-  },
-  "controls/command-menu-controlled-demo": {
-    "component": "@/components/docs/controls/command-menu-controlled-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { Avatar, Button, CommandMenu } from 'ui'\n\nexport default function CommandMenuControlledDemo() {\n  const [isOpen, setIsOpen] = React.useState(false)\n  const [value, setValue] = React.useState('')\n  return (\n    <>\n      <Button appearance=\"outline\" onPress={() => setIsOpen(true)}>\n        Open\n      </Button>\n      <CommandMenu onValueChange={setValue} value={value} isOpen={isOpen} onOpenChange={setIsOpen}>\n        <CommandMenu.Input defaultValue={value} placeholder=\"Quick search...\" />\n        <CommandMenu.List>\n          {users.map((user) => (\n            <CommandMenu.Item key={user.id} value={user.name}>\n              <Avatar src={user.image_url} />\n              {user.name}{' '}\n              {user.name === value && (\n                <CommandMenu.Description>Selected: {value}</CommandMenu.Description>\n              )}\n            </CommandMenu.Item>\n          ))}\n        </CommandMenu.List>\n      </CommandMenu>\n    </>\n  )\n}\n\nconst users = [\n  { id: 1, name: 'Barbara Kirlin Sr.', image_url: 'https://i.pravatar.cc/150?img=1' },\n  { id: 2, name: 'Rosemarie Koch', image_url: 'https://i.pravatar.cc/150?img=2' },\n  { id: 3, name: 'Mrs. Reva Heaney Jr.', image_url: 'https://i.pravatar.cc/150?img=3' },\n  { id: 4, name: 'Ms. Ettie Abshire DVM', image_url: 'https://i.pravatar.cc/150?img=4' },\n  { id: 5, name: 'Bria Ziemann', image_url: 'https://i.pravatar.cc/150?img=5' },\n  { id: 6, name: 'Heloise Borer Sr.', image_url: 'https://i.pravatar.cc/150?img=6' },\n  {\n    id: 7,\n    name: 'Miss Jacinthe Gerlach DVM',\n    image_url: 'https://i.pravatar.cc/150?img=7'\n  },\n  {\n    id: 8,\n    name: 'Miss Stephania Schaefer Sr.',\n    image_url: 'https://i.pravatar.cc/150?img=8'\n  },\n  { id: 9, name: 'Kevon Hackett MD', image_url: 'https://i.pravatar.cc/150?img=9' },\n  { id: 10, name: 'Tom Ledner', image_url: 'https://i.pravatar.cc/150?img=10' }\n]\n",
-    "type": "docs"
-  },
-  "controls/switch-controlled-demo": {
-    "component": "@/components/docs/controls/switch-controlled-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { Description, Switch } from 'ui'\n\nexport default function SwitchControlledDemo() {\n  const [darkMode, setDarkMode] = React.useState(false)\n  return (\n    <>\n      <Switch isSelected={darkMode} onChange={setDarkMode} value=\"dark_mode\">\n        Enable Dark Mode\n      </Switch>\n\n      <Description className=\"mt-2 block [&>strong]:text-fg\">\n        Dark Mode is <strong>{darkMode ? 'enabled' : 'disabled'}</strong>\n      </Description>\n    </>\n  )\n}\n",
-    "type": "docs"
-  },
-  "controls/context-menu-with-icon-demo": {
-    "component": "@/components/docs/controls/context-menu-with-icon-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { IconDuplicate, IconFolder, IconHighlight, IconTrash, IconUpload } from 'justd-icons'\nimport { ContextMenu } from 'ui'\n\nexport default function ContextMenuWithIconDemo() {\n  return (\n    <ContextMenu>\n      <ContextMenu.Trigger>Right click me</ContextMenu.Trigger>\n      <ContextMenu.Content>\n        <ContextMenu.Item>\n          <IconFolder />\n          Open\n        </ContextMenu.Item>\n        <ContextMenu.Item>\n          <IconHighlight />\n          Rename\n        </ContextMenu.Item>\n        <ContextMenu.Item>\n          <IconDuplicate />\n          Duplicate\n        </ContextMenu.Item>\n        <ContextMenu.Item>\n          <IconUpload />\n          Share\n        </ContextMenu.Item>\n        <ContextMenu.Separator />\n        <ContextMenu.Item isDanger>\n          <IconTrash />\n          Delete\n        </ContextMenu.Item>\n      </ContextMenu.Content>\n    </ContextMenu>\n  )\n}\n",
-    "type": "docs"
-  },
-  "controls/accordion-hide-indicator-demo": {
-    "component": "@/components/docs/controls/accordion-hide-indicator-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { Accordion } from 'ui'\n\nexport default function AccordionHideIndicatorDemo() {\n  return (\n    <Accordion hideIndicator>\n      {faqs.map((item, index) => (\n        <Accordion.Item key={index} currentId={index}>\n          <Accordion.Trigger>{item.q}</Accordion.Trigger>\n          <Accordion.Content>{item.a}</Accordion.Content>\n        </Accordion.Item>\n      ))}\n    </Accordion>\n  )\n}\n\nconst faqs = [\n  {\n    q: 'What payment methods are accepted?',\n    a: 'We accept all major credit cards, PayPal, and Apple Pay.'\n  },\n  {\n    q: 'How long does shipping take?',\n    a: 'Shipping times vary by location but typically take between 3-7 business days.'\n  },\n  {\n    q: 'Can I track my order?',\n    a: 'Yes, you can track your order using the tracking link provided in your shipping confirmation email.'\n  }\n]\n",
-    "type": "docs"
-  },
-  "controls/command-menu-danger-item-demo": {
-    "component": "@/components/docs/controls/command-menu-danger-item-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { Button, CommandMenu } from 'ui'\n\nexport default function CommandMenuDangerItemDemo() {\n  const [isOpen, setIsOpen] = React.useState(false)\n  return (\n    <>\n      <Button appearance=\"outline\" onPress={() => setIsOpen(true)}>\n        Open\n      </Button>\n      <CommandMenu isOpen={isOpen} onOpenChange={setIsOpen}>\n        <CommandMenu.Input placeholder=\"Quick search...\" />\n        <CommandMenu.List>\n          <CommandMenu.Section>\n            <CommandMenu.Item>System Shutdown</CommandMenu.Item>\n            <CommandMenu.Item isDanger>Format Disk</CommandMenu.Item>\n            <CommandMenu.Item>Restart Service</CommandMenu.Item>\n            <CommandMenu.Item>Empty Trash</CommandMenu.Item>\n            <CommandMenu.Item>Overwrite File</CommandMenu.Item>\n            <CommandMenu.Item isDanger>Reset Factory Settings</CommandMenu.Item>\n            <CommandMenu.Item>Disconnect Network</CommandMenu.Item>\n          </CommandMenu.Section>\n        </CommandMenu.List>\n      </CommandMenu>\n    </>\n  )\n}\n",
-    "type": "docs"
-  },
-  "controls/switch-disabled-demo": {
-    "component": "@/components/docs/controls/switch-disabled-demo",
-    "raw": "'use client'\n\nimport { Switch } from 'ui'\n\nexport default function SwitchDemo() {\n  return <Switch isDisabled>Dark Mode</Switch>\n}\n",
-    "type": "docs"
-  },
-  "drag-and-drop/drop-zone-and-file-trigger-demo": {
-    "component": "@/components/docs/drag-and-drop/drop-zone-and-file-trigger-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport type { DropEvent } from '@react-types/shared'\nimport { IconGallery } from 'justd-icons'\nimport { isFileDropItem } from 'react-aria-components'\nimport { Description, DropZone, FileTrigger } from 'ui'\n\nexport default function DropZoneAndFileTriggerDemo() {\n  const [droppedImage, setDroppedImage] = React.useState<string | undefined>(undefined)\n\n  const onDropHandler = async (e: DropEvent) => {\n    const item = e.items\n      .filter(isFileDropItem)\n      .find((item) => item.type === 'image/jpeg' || item.type === 'image/png')\n    if (item) {\n      const file = await item.getFile()\n      setDroppedImage(URL.createObjectURL(file))\n    }\n  }\n\n  const onSelectHandler = async (e: any) => {\n    if (e) {\n      const files = Array.from([...e])\n      const item = files[0]\n\n      if (item) {\n        setDroppedImage(URL.createObjectURL(item))\n      }\n    }\n  }\n  return (\n    <DropZone\n      getDropOperation={(types) =>\n        types.has('image/jpeg') || types.has('image/png') ? 'copy' : 'cancel'\n      }\n      onDrop={onDropHandler}\n    >\n      {droppedImage ? (\n        <img alt=\"\" src={droppedImage} className=\"aspect-square size-full object-contain\" />\n      ) : (\n        <div className=\"grid space-y-3\">\n          <div className=\"size-12 mx-auto grid place-content-center rounded-full border bg-secondary/70 group-data-[drop-target]:bg-primary/20 group-data-[drop-target]:border-primary/70\">\n            <IconGallery className=\"size-5\" />\n          </div>\n          <div className=\"justify-center flex\">\n            <FileTrigger\n              acceptedFileTypes={['image/png', 'image/jpeg']}\n              allowsMultiple={false}\n              onSelect={onSelectHandler}\n            >\n              Upload a file\n            </FileTrigger>\n          </div>\n          <Description>Or drag and drop PNG, JPG, GIF up to 10MB</Description>\n        </div>\n      )}\n      <input type=\"hidden\" name=\"image\" value={droppedImage} />\n    </DropZone>\n  )\n}\n",
-    "type": "docs"
-  },
-  "drag-and-drop/drop-zone-demo": {
-    "component": "@/components/docs/drag-and-drop/drop-zone-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { DropZone, Label } from 'ui'\n\nexport default function DropZoneDemo() {\n  const [dropped, setDropped] = React.useState(false)\n\n  return (\n    <DropZone onDrop={() => setDropped(true)}>\n      <Label>{dropped ? 'Drop nailed' : 'Toss your stuff here'}</Label>\n    </DropZone>\n  )\n}\n",
-    "type": "docs"
-  },
-  "colors/color-wheel-controlled-demo": {
-    "component": "@/components/docs/colors/color-wheel-controlled-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { ControlledValues } from '@/components/docs/colors/controlled-values'\nimport { parseColor } from '@react-stately/color'\nimport { ColorThumb, ColorWheel, ColorWheelTrack } from 'ui'\n\nexport default function ColorWheelControlledDemo() {\n  const [color, setColor] = React.useState(parseColor('hsl(0, 100%, 50%)'))\n  return (\n    <div className=\"grid gap-4 justify-center items-center sm:grid-cols-2\">\n      <div className=\"shrink-0 grid place-content-center\">\n        <ColorWheel\n          aria-label=\"Background color\"\n          value={color}\n          onChange={setColor}\n          outerRadius={105}\n          innerRadius={78}\n        >\n          <ColorWheelTrack />\n          <ColorThumb />\n        </ColorWheel>\n      </div>\n      <ControlledValues color={color} />\n    </div>\n  )\n}\n",
-    "type": "docs"
-  },
-  "colors/controlled-values": {
-    "component": "@/components/docs/colors/controlled-values",
-    "raw": "import React from 'react'\n\nimport type { ColorFormat } from '@react-types/color'\nimport { Card, ColorSwatch } from 'ui'\n\nconst formats: string[] = ['hex', 'hexa', 'rgb', 'rgba', 'hsl', 'hsla', 'hsb', 'hsba']\nexport function ControlledValues({ color }: { color: any }) {\n  return (\n    <Card className=\"p-3 min-w-[15.5rem] sm:min-w-72 text-center bg-transparent flex flex-col gap-y-2 [&>span]:flex [&>span]:gap-x-6 [&>span]:justify-between\">\n      {formats.map((format) => (\n        <span key={format}>\n          <span className=\"flex gap-x-1.5 items-center\">\n            <ColorSwatch\n              className=\"size-4 rounded\"\n              color={color.toString(format as ColorFormat | 'css' | undefined)}\n            />\n            <span className=\"uppercase text-xs\">{format}</span>\n          </span>\n          <span className=\"text-xs sm:text-sm\">\n            {color.toString(format as ColorFormat | 'css' | undefined)}\n          </span>\n        </span>\n      ))}\n    </Card>\n  )\n}\n",
-    "type": "docs"
-  },
-  "colors/color-field-disabled-demo": {
-    "component": "@/components/docs/colors/color-field-disabled-demo",
-    "raw": "'use client'\n\nimport { ColorField } from 'ui'\n\nexport default function ColorFieldDisabledDemo() {\n  return <ColorField isDisabled label=\"Color\" placeholder=\"#FAFAFA\" />\n}\n",
-    "type": "docs"
-  },
-  "colors/color-swatch-demo": {
-    "component": "@/components/docs/colors/color-swatch-demo",
-    "raw": "'use client'\n\nimport { ColorSwatch } from 'ui'\n\nexport default function ColorSwatchDemo() {\n  return <ColorSwatch aria-label=\"Current color\" color=\"#0d6efd\" />\n}\n",
-    "type": "docs"
-  },
-  "colors/color-wheel-disabled-demo": {
-    "component": "@/components/docs/colors/color-wheel-disabled-demo",
-    "raw": "'use client'\n\nimport { ColorThumb, ColorWheel, ColorWheelTrack } from 'ui'\n\nexport default function ColorWheelDisabledDemo() {\n  return (\n    <ColorWheel\n      aria-label=\"Background color is disabled\"\n      isDisabled\n      outerRadius={105}\n      innerRadius={78}\n    >\n      <ColorWheelTrack />\n      <ColorThumb />\n    </ColorWheel>\n  )\n}\n",
-    "type": "docs"
-  },
-  "colors/color-field-with-prefix-demo": {
-    "component": "@/components/docs/colors/color-field-with-prefix-demo",
-    "raw": "'use client'\n\nimport { IconColors } from 'justd-icons'\nimport { ColorField } from 'ui'\n\nexport default function ColorFieldWithPrefixDemo() {\n  return <ColorField label=\"Color\" prefix={<IconColors />} placeholder=\"#FAFAFA\" />\n}\n",
-    "type": "docs"
-  },
-  "colors/color-slider-disabled-demo": {
-    "component": "@/components/docs/colors/color-slider-disabled-demo",
-    "raw": "'use client'\n\nimport { ColorSlider } from 'ui'\n\nexport default function ColorSliderDisabledDemo() {\n  return <ColorSlider isDisabled channel=\"hue\" defaultValue=\"hsl(0, 100%, 50%)\" />\n}\n",
-    "type": "docs"
-  },
-  "colors/color-area-channel-demo": {
-    "component": "@/components/docs/colors/color-area-channel-demo",
-    "raw": "'use client'\n\nimport { ColorArea, ColorThumb } from 'ui'\n\nexport default function ColorAreaChannelDemo() {\n  return (\n    <ColorArea xChannel=\"alpha\" yChannel=\"blue\">\n      <ColorThumb />\n    </ColorArea>\n  )\n}\n",
-    "type": "docs"
-  },
-  "colors/color-picker-custom-colors-demo": {
-    "component": "@/components/docs/colors/color-picker-custom-colors-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { ColorPicker, defaultColor } from 'ui'\n\nexport default function ColorPickerCustomColorsDemo() {\n  const [color, setColor] = React.useState(defaultColor)\n  return (\n    <ColorPicker\n      enableColorFormatSelection\n      enableColorSwatch\n      colors={[\n        '#eef8ff',\n        '#d8eeff',\n        '#b9e0ff',\n        '#89cfff',\n        '#52b4ff',\n        '#2a91ff',\n        '#0d6efd',\n        '#0c5ae9',\n        '#1149bc',\n        '#144194',\n        '#11295a'\n      ]}\n      value={color}\n      onChange={setColor}\n    />\n  )\n}\n",
-    "type": "docs"
-  },
-  "colors/color-picker-with-placeholder-demo": {
-    "component": "@/components/docs/colors/color-picker-with-placeholder-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { ColorPicker, defaultColor } from 'ui'\n\nexport default function ColorPickerWithPlaceholderDemo() {\n  const [color, setColor] = React.useState(defaultColor)\n  return <ColorPicker placeholder=\"Select a color\" value={color} onChange={setColor} />\n}\n",
-    "type": "docs"
-  },
-  "colors/color-area-demo": {
-    "component": "@/components/docs/colors/color-area-demo",
-    "raw": "'use client'\n\nimport { ColorArea, ColorThumb as Thumb } from 'ui'\n\nexport default function ColorAreaDemo() {\n  return (\n    <ColorArea>\n      <Thumb />\n    </ColorArea>\n  )\n}\n",
-    "type": "docs"
-  },
-  "colors/color-picker-controlled-demo": {
-    "component": "@/components/docs/colors/color-picker-controlled-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { ControlledValues } from '@/components/docs/colors/controlled-values'\nimport { type Color } from 'react-aria-components'\nimport { ColorPicker, defaultColor } from 'ui'\n\nexport default function ColorPickerControlledDemo() {\n  const [color, setColor] = React.useState(defaultColor)\n  const colorChangeHandler = (v: Color) => {\n    setColor(v)\n  }\n  return (\n    <div className=\"flex flex-col lg:flex-row gap-2 lg:gap-4\">\n      <ColorPicker className=\"min-w-56\" value={color} onChange={(v) => colorChangeHandler(v)} />\n      <ControlledValues color={color} />\n    </div>\n  )\n}\n",
-    "type": "docs"
-  },
-  "colors/color-swatch-picker-item-disabled-demo": {
-    "component": "@/components/docs/colors/color-swatch-picker-item-disabled-demo",
-    "raw": "'use client'\n\nimport * as React from 'react'\n\nimport { ControlledValues } from '@/components/docs/colors/controlled-values'\nimport { parseColor } from '@react-stately/color'\nimport { ColorSwatchPicker, ColorSwatchPickerItem } from 'ui'\n\nexport default function ColorSwatchPickerDemo() {\n  const [value, setValue] = React.useState(parseColor('#0d6efd'))\n  return (\n    <div className=\"flex flex-col gap-4\">\n      <ColorSwatchPicker\n        aria-label=\"Pick color\"\n        value={value}\n        onChange={setValue}\n        className=\"flex justify-center gap-2\"\n      >\n        <ColorSwatchPickerItem isDisabled color=\"#f59e0b\" />\n        <ColorSwatchPickerItem color=\"#84cc16\" />\n        <ColorSwatchPickerItem color=\"#0d6efd\" />\n        <ColorSwatchPickerItem isDisabled color=\"#ec4899\" />\n        <ColorSwatchPickerItem isDisabled color=\"#f43f5e\" />\n      </ColorSwatchPicker>\n\n      <ControlledValues color={value} />\n    </div>\n  )\n}\n",
-    "type": "docs"
-  },
-  "colors/color-slider-demo": {
-    "component": "@/components/docs/colors/color-slider-demo",
-    "raw": "'use client'\n\nimport { ColorSlider } from 'ui'\n\nexport default function ColorSliderDemo() {\n  return <ColorSlider channel=\"hue\" defaultValue=\"hsl(0, 100%, 50%)\" />\n}\n",
-    "type": "docs"
-  },
-  "colors/color-field-with-suffix-demo": {
-    "component": "@/components/docs/colors/color-field-with-suffix-demo",
-    "raw": "'use client'\n\nimport { IconColors } from 'justd-icons'\nimport { ColorField } from 'ui'\n\nexport default function ColorFieldWithSuffixDemo() {\n  return <ColorField label=\"Color\" suffix={<IconColors />} placeholder=\"#FAFAFA\" />\n}\n",
-    "type": "docs"
-  },
-  "colors/color-swatch-controlled-demo": {
-    "component": "@/components/docs/colors/color-swatch-controlled-demo",
-    "raw": "'use client'\n\nimport * as React from 'react'\n\nimport { ControlledValues } from '@/components/docs/colors/controlled-values'\nimport { parseColor } from '@react-stately/color'\nimport { ColorSwatchPicker, ColorSwatchPickerItem } from 'ui'\n\nexport default function ColorSwatchPickerDemo() {\n  const [value, setValue] = React.useState(parseColor('#0d6efd'))\n  return (\n    <div className=\"flex flex-col gap-4\">\n      <ColorSwatchPicker\n        aria-label=\"Pick color\"\n        value={value}\n        onChange={setValue}\n        className=\"flex justify-center gap-2\"\n      >\n        <ColorSwatchPickerItem color=\"#f59e0b\" />\n        <ColorSwatchPickerItem color=\"#84cc16\" />\n        <ColorSwatchPickerItem color=\"#0d6efd\" />\n        <ColorSwatchPickerItem color=\"#ec4899\" />\n        <ColorSwatchPickerItem color=\"#f43f5e\" />\n      </ColorSwatchPicker>\n      <ControlledValues color={value} />\n    </div>\n  )\n}\n",
-    "type": "docs"
-  },
-  "colors/color-picker-with-description-demo": {
-    "component": "@/components/docs/colors/color-picker-with-description-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { ColorPicker, defaultColor } from 'ui'\n\nexport default function ColorPickerWithDescriptionDemo() {\n  const [color, setColor] = React.useState(defaultColor)\n  return (\n    <ColorPicker\n      label=\"Theme Color\"\n      description=\"Snag a color for the app theme\"\n      value={color}\n      onChange={setColor}\n    />\n  )\n}\n",
-    "type": "docs"
-  },
-  "colors/color-field-demo": {
-    "component": "@/components/docs/colors/color-field-demo",
-    "raw": "'use client'\n\nimport { ColorField } from 'ui'\n\nexport default function ColorFieldDemo() {\n  return <ColorField label=\"Color\" placeholder=\"#FAFAFA\" />\n}\n",
-    "type": "docs"
-  },
-  "colors/color-slider-with-label-demo": {
-    "component": "@/components/docs/colors/color-slider-with-label-demo",
-    "raw": "import { ColorSlider } from 'ui'\n\nexport default function ColorSliderWithLabelDemo() {\n  return <ColorSlider label=\"Color Customizer\" channel=\"hue\" defaultValue=\"hsl(0, 100%, 50%)\" />\n}\n",
-    "type": "docs"
-  },
-  "colors/color-area-space-demo": {
-    "component": "@/components/docs/colors/color-area-space-demo",
-    "raw": "'use client'\n\nimport { ColorArea, ColorThumb } from 'ui'\n\nexport default function ColorAreaSpaceDemo() {\n  return (\n    <ColorArea colorSpace=\"rgb\">\n      <ColorThumb />\n    </ColorArea>\n  )\n}\n",
-    "type": "docs"
-  },
-  "colors/color-wheel-demo": {
-    "component": "@/components/docs/colors/color-wheel-demo",
-    "raw": "'use client'\n\nimport { ColorThumb, ColorWheel, ColorWheelTrack } from 'ui'\n\nexport default function ColorWheelDemo() {\n  return (\n    <ColorWheel aria-label=\"Background color\" outerRadius={105} innerRadius={78}>\n      <ColorWheelTrack />\n      <ColorThumb />\n    </ColorWheel>\n  )\n}\n",
-    "type": "docs"
-  },
-  "colors/color-picker-demo": {
-    "component": "@/components/docs/colors/color-picker-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { ColorPicker, defaultColor } from 'ui'\n\nexport default function ColorPickerDemo() {\n  const [color, setColor] = React.useState(defaultColor)\n  return <ColorPicker label=\"Color Picker\" value={color} onChange={setColor} />\n}\n",
-    "type": "docs"
-  },
-  "colors/color-slider-controlled-demo": {
-    "component": "@/components/docs/colors/color-slider-controlled-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { ControlledValues } from '@/components/docs/colors/controlled-values'\nimport { ColorSlider, defaultColor } from 'ui'\n\nexport default function ColorSliderControlledDemo() {\n  const [value, setValue] = React.useState(defaultColor)\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <ColorSlider channel=\"hue\" value={value} onChange={setValue} />\n      <ControlledValues color={value} />\n    </div>\n  )\n}\n",
-    "type": "docs"
-  },
-  "colors/color-area-controlled-demo": {
-    "component": "@/components/docs/colors/color-area-controlled-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { ControlledValues } from '@/components/docs/colors/controlled-values'\nimport { parseColor } from '@react-stately/color'\nimport { ColorArea, ColorThumb } from 'ui'\n\nexport default function ColorAreaControlledDemo() {\n  const [value, setValue] = React.useState(parseColor('hsl(0, 100%, 50%)'))\n\n  return (\n    <div className=\"flex flex-col lg:flex-row gap-2 lg:gap-4\">\n      <ColorArea value={value} onChange={setValue}>\n        <ColorThumb />\n      </ColorArea>\n      <ControlledValues color={value} />\n    </div>\n  )\n}\n",
-    "type": "docs"
-  },
-  "colors/color-picker-enable-swatch-demo": {
-    "component": "@/components/docs/colors/color-picker-enable-swatch-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { type Color } from 'react-aria-components'\nimport { ColorPicker, defaultColor } from 'ui'\n\nexport default function ColorPickerEnableSwatchDemo() {\n  const [color, setColor] = React.useState(defaultColor)\n  const colorChangeHandler = (v: Color) => {\n    setColor(v)\n  }\n  return <ColorPicker enableColorSwatch value={color} onChange={(v) => colorChangeHandler(v)} />\n}\n",
-    "type": "docs"
-  },
-  "colors/color-picker-disabled-demo": {
-    "component": "@/components/docs/colors/color-picker-disabled-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { parseColor } from '@react-stately/color'\nimport { ColorPicker } from 'ui'\n\nexport default function ColorPickerDemo() {\n  const [color, setColor] = React.useState(parseColor('hsl(216, 98%, 52%)'))\n  return <ColorPicker isDisabled label=\"Color Picker\" value={color} onChange={setColor} />\n}\n",
-    "type": "docs"
-  },
-  "colors/color-picker-with-label-demo": {
-    "component": "@/components/docs/colors/color-picker-with-label-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { ColorPicker, defaultColor } from 'ui'\n\nexport default function ColorPickerWithLabelDemo() {\n  const [color, setColor] = React.useState(defaultColor)\n  return <ColorPicker label=\"Theme Color\" value={color} onChange={setColor} />\n}\n",
-    "type": "docs"
-  },
-  "colors/color-picker-enable-selection-format-demo": {
-    "component": "@/components/docs/colors/color-picker-enable-selection-format-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { ColorPicker, defaultColor } from 'ui'\n\nexport default function ColorPickerEnableSelectionFormatDemo() {\n  const [color, setColor] = React.useState(defaultColor)\n  return <ColorPicker enableColorFormatSelection value={color} onChange={setColor} />\n}\n",
-    "type": "docs"
-  },
-  "colors/color-picker-combination-demo": {
-    "component": "@/components/docs/colors/color-picker-combination-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { type Color } from 'react-aria-components'\nimport { ColorPicker } from 'ui'\n\nexport default function ColorPickerCombinationDemo() {\n  const [color, setColor] = React.useState('')\n\n  const handleChange = (value: Color) => {\n    setColor(value as unknown as string)\n  }\n  return (\n    <ColorPicker\n      aria-label=\"Color picker\"\n      enableColorFormatSelection\n      enableColorSwatch\n      defaultValue={color}\n      onChange={handleChange}\n    />\n  )\n}\n",
-    "type": "docs"
-  },
-  "colors/color-area-disabled-demo": {
-    "component": "@/components/docs/colors/color-area-disabled-demo",
-    "raw": "'use client'\n\nimport { ColorArea, ColorThumb as Thumb } from 'ui'\n\nexport default function ColorAreaDisabledDemo() {\n  return (\n    <ColorArea isDisabled>\n      <Thumb />\n    </ColorArea>\n  )\n}\n",
-    "type": "docs"
-  },
-  "colors/color-swatch-picker-demo": {
-    "component": "@/components/docs/colors/color-swatch-picker-demo",
-    "raw": "'use client'\n\nimport * as React from 'react'\n\nimport { parseColor } from '@react-stately/color'\nimport { ColorSwatchPicker, ColorSwatchPickerItem } from 'ui'\n\nexport default function ColorSwatchPickerDemo() {\n  const [value, setValue] = React.useState(parseColor('#0d6efd'))\n  return (\n    <ColorSwatchPicker\n      aria-label=\"Pick color\"\n      value={value}\n      onChange={setValue}\n      className=\"grid grid-cols-3 lg:grid-cols-6 gap-2\"\n    >\n      <ColorSwatchPickerItem color=\"#f59e0b\" />\n      <ColorSwatchPickerItem color=\"#84cc16\" />\n      <ColorSwatchPickerItem color=\"#0d6efd\" />\n      <ColorSwatchPickerItem color=\"#ec4899\" />\n      <ColorSwatchPickerItem color=\"#f43f5e\" />\n    </ColorSwatchPicker>\n  )\n}\n",
-    "type": "docs"
-  },
-  "colors/color-slider-without-output-demo": {
-    "component": "@/components/docs/colors/color-slider-without-output-demo",
-    "raw": "'use client'\n\nimport { ColorSlider } from 'ui'\n\nexport default function ColorSliderWithoutOutputDemo() {\n  return <ColorSlider channel=\"hue\" showOutput={false} defaultValue=\"hsl(0, 100%, 50%)\" />\n}\n",
-    "type": "docs"
-  },
-  "colors/color-field-controlled-demo": {
-    "component": "@/components/docs/colors/color-field-controlled-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { ControlledValues } from '@/components/docs/colors/controlled-values'\nimport { type Color, parseColor } from '@react-stately/color'\nimport { ColorField } from 'ui'\n\nexport default function ColorFieldControlledDemo() {\n  const [color, setColor] = React.useState(parseColor('#FAFAFA'))\n  return (\n    <div className=\"flex flex-col lg:flex-row gap-2 lg:gap-4\">\n      <ColorField\n        className=\"min-w-56\"\n        value={color}\n        aria-label=\"Pick a color\"\n        onChange={(newColor: Color | null) => newColor && setColor(newColor)}\n        placeholder=\"#FAFAFA\"\n      />\n      <ControlledValues color={color} />\n    </div>\n  )\n}\n",
-    "type": "docs"
-  },
-  "pickers/select-disabled-demo": {
-    "component": "@/components/docs/pickers/select-disabled-demo",
-    "raw": "'use client'\n\nimport { Select } from 'ui'\n\nconst software = [\n  { id: 1, name: 'Adobe Photoshop' }\n  //...\n]\n\nexport default function SelectDisabledDemo() {\n  return (\n    <Select label=\"Design software\" isDisabled placeholder=\"Select a software\">\n      <Select.Trigger />\n      <Select.List items={software}>\n        {(item) => (\n          <Select.Option id={item.id} textValue={item.name}>\n            {item.name}\n          </Select.Option>\n        )}\n      </Select.List>\n    </Select>\n  )\n}\n",
-    "type": "docs"
-  },
-  "pickers/multiple-select-disabled-demo": {
-    "component": "@/components/docs/pickers/multiple-select-disabled-demo",
-    "raw": "'use client'\n\nimport { useListData } from 'react-stately'\nimport type { SelectedKey } from 'ui'\nimport { MultipleSelect, Tag } from 'ui'\n\nexport default function MultipleSelectDisabledDemo() {\n  const selectedItems = useListData<SelectedKey>({\n    initialItems: []\n  })\n  return (\n    <MultipleSelect\n      isDisabled\n      className=\"max-w-xs\"\n      label=\"Fruits\"\n      selectedItems={selectedItems}\n      items={fruits}\n      tag={(item) => <Tag.Item textValue={item.name}>{item.name}</Tag.Item>}\n    >\n      {(item) => {\n        return <MultipleSelect.Option textValue={item.name}>{item.name}</MultipleSelect.Option>\n      }}\n    </MultipleSelect>\n  )\n}\n\nconst fruits: SelectedKey[] = [{ id: 1, name: 'Apple' }]\n",
-    "type": "docs"
-  },
-  "pickers/multiple-select-min-max-demo": {
-    "component": "@/components/docs/pickers/multiple-select-min-max-demo",
-    "raw": "'use client'\n\nimport { useListData } from 'react-stately'\nimport type { SelectedKey } from 'ui'\nimport { MultipleSelect, Tag } from 'ui'\n\nconst tags = [\n  { id: 1, name: 'Cooking' },\n  { id: 2, name: 'Gardening' },\n  { id: 3, name: 'Meditation' },\n  { id: 4, name: 'Parenting' },\n  { id: 5, name: 'DIY Projects' },\n  { id: 6, name: 'Mindfulness' },\n  { id: 7, name: 'Travel Tips' },\n  { id: 8, name: 'Pet Care' },\n  { id: 9, name: 'Home Decor' },\n  { id: 10, name: 'Sustainable Living' }\n]\n\nexport default function MultipleSelectMinMaxDemo() {\n  const selectedItems = useListData<SelectedKey>({\n    initialItems: [tags[0]]\n  })\n  return (\n    <MultipleSelect\n      className=\"max-w-xs\"\n      label=\"Select tags\"\n      description=\"You can select up to 4 tags\"\n      max={4}\n      selectedItems={selectedItems}\n      items={tags}\n      tag={(item) => <Tag.Item textValue={item.name}>{item.name}</Tag.Item>}\n    >\n      {(item) => {\n        return <MultipleSelect.Option textValue={item.name}>{item.name}</MultipleSelect.Option>\n      }}\n    </MultipleSelect>\n  )\n}\n",
-    "type": "docs"
-  },
-  "pickers/combo-box-controlled-demo": {
-    "component": "@/components/docs/pickers/combo-box-controlled-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { ComboBox, Description } from 'ui'\n\nconst sports = [\n  { id: 1, name: 'Football' },\n  { id: 2, name: 'Basketball' },\n  { id: 3, name: 'Baseball' },\n  { id: 4, name: 'Soccer' },\n  { id: 5, name: 'Tennis' },\n  { id: 6, name: 'Cricket' },\n  { id: 7, name: 'Hockey' },\n  { id: 8, name: 'Rugby' },\n  { id: 9, name: 'Golf' }\n]\n\nexport default function ComboBoxControlledDemo() {\n  const [sport, setSport] = React.useState('')\n  return (\n    <>\n      <ComboBox\n        onInputChange={setSport}\n        inputValue={sport}\n        placeholder=\"Select a sports\"\n        label=\"Sports\"\n      >\n        <ComboBox.Input />\n        <ComboBox.List items={sports}>\n          {(item) => (\n            <ComboBox.Option key={item.id} id={item.id} textValue={item.name}>\n              {item.name}\n            </ComboBox.Option>\n          )}\n        </ComboBox.List>\n      </ComboBox>\n      <Description className=\"mt-2 block [&>strong]:text-fg text-muted-fg\">\n        You have selected: <strong>{sport}</strong>\n      </Description>\n    </>\n  )\n}\n",
-    "type": "docs"
-  },
-  "pickers/multiple-select-demo": {
-    "component": "@/components/docs/pickers/multiple-select-demo",
-    "raw": "'use client'\n\nimport { useListData } from 'react-stately'\nimport type { SelectedKey } from 'ui'\nimport { MultipleSelect, Tag } from 'ui'\n\nexport default function MultipleSelectDemo() {\n  const selectedItems = useListData<SelectedKey>({\n    initialItems: [fruits[0]]\n  })\n  return (\n    <MultipleSelect\n      className=\"max-w-xs\"\n      label=\"Fruits\"\n      selectedItems={selectedItems}\n      items={fruits}\n      tag={(item) => <Tag.Item textValue={item.name}>{item.name}</Tag.Item>}\n    >\n      {(item) => {\n        return <MultipleSelect.Option textValue={item.name}>{item.name}</MultipleSelect.Option>\n      }}\n    </MultipleSelect>\n  )\n}\n\nconst fruits: SelectedKey[] = [\n  { id: 1, name: 'Apple' },\n  { id: 2, name: 'Banana' },\n  { id: 3, name: 'Cherry' },\n  { id: 4, name: 'Date' },\n  { id: 5, name: 'Elderberry' },\n  { id: 6, name: 'Fig' },\n  { id: 7, name: 'Grape' },\n  { id: 8, name: 'Honeydew' },\n  { id: 9, name: 'Kiwi' },\n  { id: 10, name: 'Lemon' },\n  { id: 11, name: 'Mango' },\n  { id: 12, name: 'Nectarine' },\n  { id: 13, name: 'Orange' },\n  { id: 14, name: 'Papaya' },\n  { id: 15, name: 'Quince' },\n  { id: 16, name: 'Raspberry' },\n  { id: 17, name: 'Strawberry' },\n  { id: 18, name: 'Tangerine' },\n  { id: 19, name: 'Ugli Fruit' },\n  { id: 20, name: 'Watermelon' }\n]\n",
-    "type": "docs"
-  },
-  "pickers/combo-box-readonly-demo": {
-    "component": "@/components/docs/pickers/combo-box-readonly-demo",
-    "raw": "'use client'\n\nimport { Avatar, ComboBox } from 'ui'\n\nconst users = [\n  { id: 1, name: 'Barbara Kirlin Sr.', image_url: 'https://i.pravatar.cc/150?img=1' }\n  //...\n]\nexport default function ComboBoxReadonlyDemo() {\n  return (\n    <ComboBox placeholder=\"Select a user\" label=\"Users\" isReadOnly>\n      <ComboBox.List items={users}>\n        {(item) => (\n          <ComboBox.Option key={item.id} id={item.id} textValue={item.name}>\n            <Avatar src={item.image_url} />\n            {item.name}\n          </ComboBox.Option>\n        )}\n      </ComboBox.List>\n    </ComboBox>\n  )\n}\n",
-    "type": "docs"
-  },
-  "pickers/combo-box-demo": {
-    "component": "@/components/docs/pickers/combo-box-demo",
-    "raw": "'use client'\n\nimport { ComboBox } from 'ui'\n\nexport default function ComboBoxDemo() {\n  return (\n    <ComboBox placeholder=\"Select a user\" label=\"Users\">\n      <ComboBox.Input />\n      <ComboBox.List items={users}>\n        {(item) => (\n          <ComboBox.Option id={item.id} textValue={item.name}>\n            {item.name}\n          </ComboBox.Option>\n        )}\n      </ComboBox.List>\n    </ComboBox>\n  )\n}\n\nconst users = [\n  { id: 1, name: 'Barbara Kirlin Sr.', image_url: 'https://i.pravatar.cc/150?img=1' },\n  { id: 2, name: 'Rosemarie Koch', image_url: 'https://i.pravatar.cc/150?img=2' },\n  { id: 3, name: 'Mrs. Reva Heaney Jr.', image_url: 'https://i.pravatar.cc/150?img=3' },\n  { id: 4, name: 'Ms. Ettie Abshire DVM', image_url: 'https://i.pravatar.cc/150?img=4' },\n  { id: 5, name: 'Bria Ziemann', image_url: 'https://i.pravatar.cc/150?img=5' },\n  { id: 6, name: 'Heloise Borer Sr.', image_url: 'https://i.pravatar.cc/150?img=6' },\n  {\n    id: 7,\n    name: 'Miss Jacinthe Gerlach DVM',\n    image_url: 'https://i.pravatar.cc/150?img=7'\n  },\n  {\n    id: 8,\n    name: 'Miss Stephania Schaefer Sr.',\n    image_url: 'https://i.pravatar.cc/150?img=8'\n  },\n  { id: 9, name: 'Kevon Hackett MD', image_url: 'https://i.pravatar.cc/150?img=9' },\n  { id: 10, name: 'Tom Ledner', image_url: 'https://i.pravatar.cc/150?img=10' }\n]\n",
-    "type": "docs"
-  },
-  "pickers/select-demo": {
-    "component": "@/components/docs/pickers/select-demo",
-    "raw": "'use client'\n\nimport { Select } from 'ui'\n\nexport const software = [\n  { id: 1, name: 'Adobe Photoshop' },\n  { id: 2, name: 'Sketch' },\n  { id: 3, name: 'Figma' },\n  { id: 4, name: 'Adobe XD' },\n  { id: 5, name: 'InVision' }\n]\nexport default function SelectDemo() {\n  return (\n    <Select label=\"Design software\" placeholder=\"Select a software\">\n      <Select.Trigger />\n      <Select.List items={software}>\n        {(item) => (\n          <Select.Option id={item.id} textValue={item.name}>\n            {item.name}\n          </Select.Option>\n        )}\n      </Select.List>\n    </Select>\n  )\n}\n",
-    "type": "docs"
-  },
-  "pickers/multiple-select-controlled-demo": {
-    "component": "@/components/docs/pickers/multiple-select-controlled-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { useListData } from 'react-stately'\nimport type { SelectedKey } from 'ui'\nimport { Description, MultipleSelect, Tag } from 'ui'\n\nconst tags = [\n  { id: 1, name: 'Travel' },\n  { id: 2, name: 'Food' },\n  { id: 3, name: 'Fashion' },\n  { id: 4, name: 'Music' },\n  { id: 5, name: 'Photography' }\n]\n\nexport default function MultipleSelectControlledDemo() {\n  const selectedItems = useListData<SelectedKey>({\n    initialItems: []\n  })\n\n  return (\n    <>\n      <MultipleSelect\n        className=\"max-w-xs\"\n        onItemInserted={(key) => console.log('on item inserted', key)}\n        onItemCleared={(key) => console.log('on item cleared', key)}\n        label=\"Select tags\"\n        selectedItems={selectedItems}\n        items={tags}\n        tag={(item) => <Tag.Item textValue={item.name}>{item.name}</Tag.Item>}\n      >\n        {(item) => {\n          return (\n            <MultipleSelect.Option id={item.id} textValue={item.name}>\n              {item.name}\n            </MultipleSelect.Option>\n          )\n        }}\n      </MultipleSelect>\n      {selectedItems.items.length > 0 && (\n        <Description className=\"mt-2 max-w-xs block [&>strong]:text-fg text-muted-fg\">\n          You have selected:{' '}\n          <strong>{selectedItems.items.map((item) => item.name).join(', ')}</strong>\n        </Description>\n      )}\n    </>\n  )\n}\n",
-    "type": "docs"
-  },
-  "pickers/select-validation-demo": {
-    "component": "@/components/docs/pickers/select-validation-demo",
-    "raw": "'use client'\n\nimport { Button, Form, Select } from 'ui'\n\nconst software = [\n  { id: 1, name: 'Adobe Photoshop' }\n  //...\n]\n\nexport default function SelectValidationDemo() {\n  return (\n    <Form onSubmit={(e) => e.preventDefault()} className=\"space-y-2\">\n      <Select label=\"Design software\" placeholder=\"Select a software\" isRequired>\n        <Select.Trigger />\n        <Select.List items={software}>\n          {(item) => (\n            <Select.Option id={item.id} textValue={item.name}>\n              {item.name}\n            </Select.Option>\n          )}\n        </Select.List>\n      </Select>\n      <Button type=\"submit\">Submit</Button>\n    </Form>\n  )\n}\n",
-    "type": "docs"
-  },
-  "pickers/multiple-select-intent-demo": {
-    "component": "@/components/docs/pickers/multiple-select-intent-demo",
-    "raw": "'use client'\n\nimport { useListData } from 'react-stately'\nimport type { SelectedKey } from 'ui'\nimport { MultipleSelect, Tag } from 'ui'\n\nexport default function MultipleSelectIntentDemo() {\n  const selectedItems = useListData<SelectedKey>({\n    initialItems: [fruits[0]]\n  })\n  return (\n    <MultipleSelect\n      className=\"max-w-xs\"\n      intent=\"secondary\"\n      label=\"Fruits\"\n      selectedItems={selectedItems}\n      items={fruits}\n      tag={(item) => <Tag.Item textValue={item.name}>{item.name}</Tag.Item>}\n    >\n      {(item) => {\n        return <MultipleSelect.Option textValue={item.name}>{item.name}</MultipleSelect.Option>\n      }}\n    </MultipleSelect>\n  )\n}\n\nconst fruits: SelectedKey[] = [\n  { id: 1, name: 'Apple' },\n  { id: 2, name: 'Banana' },\n  { id: 3, name: 'Cherry' },\n  { id: 4, name: 'Date' },\n  { id: 5, name: 'Elderberry' },\n  { id: 6, name: 'Fig' },\n  { id: 7, name: 'Grape' },\n  { id: 8, name: 'Honeydew' },\n  { id: 9, name: 'Kiwi' },\n  { id: 10, name: 'Lemon' },\n  { id: 11, name: 'Mango' },\n  { id: 12, name: 'Nectarine' },\n  { id: 13, name: 'Orange' },\n  { id: 14, name: 'Papaya' },\n  { id: 15, name: 'Quince' },\n  { id: 16, name: 'Raspberry' },\n  { id: 17, name: 'Strawberry' },\n  { id: 18, name: 'Tangerine' },\n  { id: 19, name: 'Ugli Fruit' },\n  { id: 20, name: 'Watermelon' }\n]\n",
-    "type": "docs"
-  },
-  "pickers/combo-box-avatar-demo": {
-    "component": "@/components/docs/pickers/combo-box-avatar-demo",
-    "raw": "'use client'\n\nimport { Avatar, ComboBox } from 'ui'\n\nexport default function ComboBoxAvatarDemo() {\n  return (\n    <ComboBox placeholder=\"Select a user\" label=\"Users\" isRequired>\n      <ComboBox.Input />\n      <ComboBox.List items={users}>\n        {(item) => (\n          <ComboBox.Option id={item.id} textValue={item.name}>\n            <Avatar src={item.image_url} />\n            {item.name}\n          </ComboBox.Option>\n        )}\n      </ComboBox.List>\n    </ComboBox>\n  )\n}\n\nconst users = [\n  { id: 1, name: 'Barbara Kirlin Sr.', image_url: 'https://i.pravatar.cc/150?img=1' },\n  { id: 2, name: 'Rosemarie Koch', image_url: 'https://i.pravatar.cc/150?img=2' },\n  { id: 3, name: 'Mrs. Reva Heaney Jr.', image_url: 'https://i.pravatar.cc/150?img=3' },\n  { id: 4, name: 'Ms. Ettie Abshire DVM', image_url: 'https://i.pravatar.cc/150?img=4' },\n  { id: 5, name: 'Bria Ziemann', image_url: 'https://i.pravatar.cc/150?img=5' },\n  { id: 6, name: 'Heloise Borer Sr.', image_url: 'https://i.pravatar.cc/150?img=6' },\n  {\n    id: 7,\n    name: 'Miss Jacinthe Gerlach DVM',\n    image_url: 'https://i.pravatar.cc/150?img=7'\n  },\n  {\n    id: 8,\n    name: 'Miss Stephania Schaefer Sr.',\n    image_url: 'https://i.pravatar.cc/150?img=8'\n  },\n  { id: 9, name: 'Kevon Hackett MD', image_url: 'https://i.pravatar.cc/150?img=9' },\n  { id: 10, name: 'Tom Ledner', image_url: 'https://i.pravatar.cc/150?img=10' }\n]\n",
-    "type": "docs"
-  },
-  "pickers/select-item-details-demo": {
-    "component": "@/components/docs/pickers/select-item-details-demo",
-    "raw": "'use client'\n\nimport { Select } from 'ui'\n\nexport default function SelectItemDetailsDemo() {\n  return (\n    <Select label=\"Roles\" placeholder=\"Select a role\">\n      <Select.Trigger />\n      <Select.List items={roles}>\n        {(item) => (\n          <Select.Option id={item.id} textValue={item.name}>\n            <Select.OptionDetails label={item.name} description={item.description} />\n          </Select.Option>\n        )}\n      </Select.List>\n    </Select>\n  )\n}\n\nconst roles = [\n  { id: 1, name: 'Admin', description: 'Has full access to all resources' },\n  { id: 2, name: 'Editor', description: 'Can edit content but has limited access to settings' },\n  { id: 3, name: 'Viewer', description: 'Can view content but cannot make changes' },\n  { id: 4, name: 'Contributor', description: 'Can contribute content for review' },\n  { id: 5, name: 'Guest', description: 'Limited access, mostly for viewing purposes' }\n]\n",
-    "type": "docs"
-  },
-  "pickers/select-controlled-demo": {
-    "component": "@/components/docs/pickers/select-controlled-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport type { Key } from 'react-aria-components'\nimport { Description, Select } from 'ui'\n\nexport const movies = [\n  { id: 1, title: 'Inception' },\n  { id: 2, title: 'The Dark Knight' },\n  { id: 3, title: 'Interstellar' },\n  { id: 4, title: 'The Matrix' },\n  { id: 5, title: 'Pulp Fiction' }\n]\n\nexport default function SelectControlledDemo() {\n  const [movie, setMovie] = React.useState<Key>('')\n  return (\n    <>\n      <Select\n        selectedKey={movie}\n        onSelectionChange={setMovie}\n        label=\"Movies\"\n        placeholder=\"Select a movie\"\n      >\n        <Select.Trigger />\n        <Select.List items={movies}>\n          {(item) => (\n            <Select.Option id={item.id} textValue={item.title}>\n              {item.title}\n            </Select.Option>\n          )}\n        </Select.List>\n      </Select>\n      <Description className=\"mt-2 block [&>strong]:text-fg text-muted-fg\">\n        You have selected: <strong>{movie}</strong>\n      </Description>\n    </>\n  )\n}\n",
-    "type": "docs"
-  },
-  "pickers/multiple-select-shape-demo": {
-    "component": "@/components/docs/pickers/multiple-select-shape-demo",
-    "raw": "'use client'\n\nimport { useListData } from 'react-stately'\nimport type { SelectedKey } from 'ui'\nimport { MultipleSelect, Tag } from 'ui'\n\nexport default function MultipleSelectShapeDemo() {\n  const selectedItems = useListData<SelectedKey>({\n    initialItems: [fruits[0]]\n  })\n  return (\n    <MultipleSelect\n      className=\"max-w-xs\"\n      label=\"Fruits\"\n      shape=\"circle\"\n      selectedItems={selectedItems}\n      items={fruits}\n      tag={(item) => <Tag.Item textValue={item.name}>{item.name}</Tag.Item>}\n    >\n      {(item) => {\n        return <MultipleSelect.Option textValue={item.name}>{item.name}</MultipleSelect.Option>\n      }}\n    </MultipleSelect>\n  )\n}\n\nconst fruits: SelectedKey[] = [\n  { id: 1, name: 'Apple' },\n  { id: 2, name: 'Banana' },\n  { id: 3, name: 'Cherry' },\n  { id: 4, name: 'Date' },\n  { id: 5, name: 'Elderberry' },\n  { id: 6, name: 'Fig' },\n  { id: 7, name: 'Grape' },\n  { id: 8, name: 'Honeydew' },\n  { id: 9, name: 'Kiwi' },\n  { id: 10, name: 'Lemon' },\n  { id: 11, name: 'Mango' },\n  { id: 12, name: 'Nectarine' },\n  { id: 13, name: 'Orange' },\n  { id: 14, name: 'Papaya' },\n  { id: 15, name: 'Quince' },\n  { id: 16, name: 'Raspberry' },\n  { id: 17, name: 'Strawberry' },\n  { id: 18, name: 'Tangerine' },\n  { id: 19, name: 'Ugli Fruit' },\n  { id: 20, name: 'Watermelon' }\n]\n",
-    "type": "docs"
-  },
-  "pickers/combo-box-section-demo": {
-    "component": "@/components/docs/pickers/combo-box-section-demo",
-    "raw": "'use client'\n\nimport { ComboBox } from 'ui'\n\nexport default function ComboBoxSectionDemo() {\n  return (\n    <ComboBox placeholder=\"Select a author\" label=\"Authors\">\n      <ComboBox.Input />\n      <ComboBox.List items={movies}>\n        {(movie) => (\n          <ComboBox.Section title={movie.title} items={movie.genres}>\n            {(genre) => <ComboBox.Option textValue={genre.name}>{genre.name}</ComboBox.Option>}\n          </ComboBox.Section>\n        )}\n      </ComboBox.List>\n    </ComboBox>\n  )\n}\n\nconst movies = [\n  {\n    id: 1,\n    title: 'Inception',\n    genres: [\n      {\n        id: 101,\n        name: 'Sci-Fi'\n      },\n      {\n        id: 102,\n        name: 'Thriller'\n      }\n    ]\n  },\n  {\n    id: 2,\n    title: 'Titanic',\n    genres: [\n      {\n        id: 201,\n        name: 'Romance'\n      },\n      {\n        id: 202,\n        name: 'Drama'\n      }\n    ]\n  },\n  {\n    id: 3,\n    title: 'The Matrix',\n    genres: [\n      {\n        id: 301,\n        name: 'Action'\n      },\n      {\n        id: 302,\n        name: 'Sci-Fi'\n      }\n    ]\n  },\n  {\n    id: 4,\n    title: 'Gladiator',\n    genres: [\n      {\n        id: 401,\n        name: 'Action'\n      },\n      {\n        id: 402,\n        name: 'Drama'\n      }\n    ]\n  },\n  {\n    id: 5,\n    title: 'Casablanca',\n    genres: [\n      {\n        id: 501,\n        name: 'Romance'\n      },\n      {\n        id: 502,\n        name: 'Drama'\n      }\n    ]\n  }\n]\n",
-    "type": "docs"
-  },
-  "pickers/select-section-demo": {
-    "component": "@/components/docs/pickers/select-section-demo",
-    "raw": "'use client'\n\nimport { Select } from 'ui'\n\nexport default function SelectSectionDemo() {\n  return (\n    <Select label=\"Countries\" placeholder=\"Select a country\">\n      <Select.Trigger />\n      <Select.List items={countries}>\n        {(country) => (\n          <Select.Section title={country.name} items={country.cities}>\n            {(city) => <Select.Option textValue={city.name}>{city.name}</Select.Option>}\n          </Select.Section>\n        )}\n      </Select.List>\n    </Select>\n  )\n}\n\nconst countries = [\n  {\n    id: 1,\n    name: 'Egypt',\n    cities: [\n      {\n        id: 101,\n        name: 'Cairo'\n      },\n      {\n        id: 102,\n        name: 'Alexandria'\n      },\n      {\n        id: 103,\n        name: 'Giza'\n      },\n      {\n        id: 104,\n        name: 'Luxor'\n      }\n    ]\n  },\n  {\n    id: 2,\n    name: 'Indonesia',\n    cities: [\n      {\n        id: 201,\n        name: 'Jakarta'\n      },\n      {\n        id: 202,\n        name: 'Bali'\n      },\n      {\n        id: 203,\n        name: 'Surabaya'\n      },\n      {\n        id: 204,\n        name: 'Bandung'\n      },\n      {\n        id: 205,\n        name: 'Medan'\n      }\n    ]\n  },\n  {\n    id: 3,\n    name: 'United States',\n    cities: [\n      {\n        id: 301,\n        name: 'New York City'\n      },\n      {\n        id: 302,\n        name: 'Los Angeles'\n      },\n      {\n        id: 303,\n        name: 'Chicago'\n      },\n      {\n        id: 304,\n        name: 'Houston'\n      }\n    ]\n  },\n  {\n    id: 4,\n    name: 'Canada',\n    cities: [\n      {\n        id: 401,\n        name: 'Toronto'\n      },\n      {\n        id: 402,\n        name: 'Vancouver'\n      },\n      {\n        id: 403,\n        name: 'Montreal'\n      }\n    ]\n  },\n  {\n    id: 5,\n    name: 'Australia',\n    cities: [\n      {\n        id: 501,\n        name: 'Sydney'\n      },\n      {\n        id: 502,\n        name: 'Melbourne'\n      },\n      {\n        id: 503,\n        name: 'Brisbane'\n      }\n    ]\n  },\n  {\n    id: 6,\n    name: 'Germany',\n    cities: [\n      {\n        id: 601,\n        name: 'Berlin'\n      },\n      {\n        id: 602,\n        name: 'Munich'\n      },\n      {\n        id: 603,\n        name: 'Frankfurt'\n      },\n      {\n        id: 604,\n        name: 'Hamburg'\n      }\n    ]\n  },\n  {\n    id: 7,\n    name: 'Japan',\n    cities: [\n      {\n        id: 701,\n        name: 'Tokyo'\n      },\n      {\n        id: 702,\n        name: 'Osaka'\n      },\n      {\n        id: 703,\n        name: 'Kyoto'\n      }\n    ]\n  }\n]\n",
-    "type": "docs"
-  },
-  "pickers/combo-box-invalid-demo": {
-    "component": "@/components/docs/pickers/combo-box-invalid-demo",
-    "raw": "'use client'\n\nimport { Avatar, ComboBox } from 'ui'\n\nconst users = [\n  { id: 1, name: 'Barbara Kirlin Sr.', image_url: 'https://i.pravatar.cc/150?img=1' }\n  //...\n]\nexport default function ComboBoxInvalidDemo() {\n  return (\n    <ComboBox placeholder=\"Select a user\" label=\"Users\" isInvalid>\n      <ComboBox.List items={users}>\n        {(item) => (\n          <ComboBox.Option key={item.id} id={item.id} textValue={item.name}>\n            <Avatar src={item.image_url} />\n            {item.name}\n          </ComboBox.Option>\n        )}\n      </ComboBox.List>\n    </ComboBox>\n  )\n}\n",
-    "type": "docs"
-  },
-  "pickers/combo-box-disabled-demo": {
-    "component": "@/components/docs/pickers/combo-box-disabled-demo",
-    "raw": "'use client'\n\nimport { Avatar, ComboBox } from 'ui'\n\nexport default function ComboBoxDisabledDemo() {\n  return (\n    <ComboBox placeholder=\"Select a user\" label=\"Users\" isDisabled>\n      <ComboBox.Input />\n      <ComboBox.List items={users}>\n        {(item) => (\n          <ComboBox.Option key={item.id} id={item.id} textValue={item.name}>\n            <Avatar src={item.image_url} />\n            {item.name}\n          </ComboBox.Option>\n        )}\n      </ComboBox.List>\n    </ComboBox>\n  )\n}\n\nconst users = [\n  { id: 1, name: 'Barbara Kirlin Sr.', image_url: 'https://i.pravatar.cc/150?img=1' }\n  //...\n]\n",
-    "type": "docs"
-  },
-  "pickers/combo-box-validation-demo": {
-    "component": "@/components/docs/pickers/combo-box-validation-demo",
-    "raw": "'use client'\n\nimport { Avatar, Button, ComboBox, Form } from 'ui'\n\nconst users = [\n  { id: 1, name: 'Barbara Kirlin Sr.', image_url: 'https://i.pravatar.cc/150?img=1' }\n  //...\n]\nexport default function ComboBoxValidationDemo() {\n  return (\n    <Form onSubmit={(e) => e.preventDefault()} className=\"space-y-2\">\n      <ComboBox placeholder=\"Select a user\" label=\"Users\" isRequired>\n        <ComboBox.Input />\n        <ComboBox.List items={users}>\n          {(item) => (\n            <ComboBox.Option key={item.id} id={item.id} textValue={item.name}>\n              <Avatar src={item.image_url} />\n              {item.name}\n            </ComboBox.Option>\n          )}\n        </ComboBox.List>\n      </ComboBox>\n      <Button type=\"submit\">Submit</Button>\n    </Form>\n  )\n}\n",
-    "type": "docs"
-  },
-  "surfaces/separator-demo": {
-    "component": "@/components/docs/surfaces/separator-demo",
-    "raw": "'use client'\n\nimport { Separator } from 'ui'\n\nexport default function SeparatorDemo() {\n  return <Separator />\n}\n",
-    "type": "docs"
-  },
-  "surfaces/grid-gap-demo": {
-    "component": "@/components/docs/surfaces/grid-gap-demo",
-    "raw": "import { Grid } from 'ui'\n\nexport default function GridGapDemo() {\n  return (\n    <Grid\n      columns={{\n        initial: 4,\n        sm: 5,\n        md: 6\n      }}\n      gap={{\n        initial: 2,\n        sm: 4\n      }}\n    >\n      <Grid.Item>\n        <div className=\"p-4 border h-24\" />\n      </Grid.Item>\n      <Grid.Item>\n        <div className=\"p-4 border h-24\" />\n      </Grid.Item>\n      <Grid.Item>\n        <div className=\"p-4 border h-24\" />\n      </Grid.Item>\n      <Grid.Item>\n        <div className=\"p-4 border h-24\" />\n      </Grid.Item>\n      <Grid.Item>\n        <div className=\"p-4 border h-24\" />\n      </Grid.Item>\n      <Grid.Item>\n        <div className=\"p-4 border h-24\" />\n      </Grid.Item>\n    </Grid>\n  )\n}\n",
-    "type": "docs"
-  },
-  "surfaces/show-more-controlled-demo": {
-    "component": "@/components/docs/surfaces/show-more-controlled-demo",
-    "raw": "'use client'\n\nimport * as React from 'react'\n\nimport { IconChevronLgDown } from 'justd-icons'\nimport { ShowMore } from 'ui'\n\nexport default function ShowMoreControlledDemo() {\n  const [isExpanded, setIsExpanded] = React.useState(false)\n  return (\n    <div className=\"py-6\">\n      <ShowMore onChange={setIsExpanded} isSelected={isExpanded}>\n        {isExpanded ? 'Expand' : 'Collapse'}\n        <IconChevronLgDown\n          className={`${isExpanded ? 'rotate-180' : ''} size-4 transition-transform duration-200`}\n        />\n      </ShowMore>\n    </div>\n  )\n}\n",
-    "type": "docs"
-  },
-  "surfaces/grid-collections-demo": {
-    "component": "@/components/docs/surfaces/grid-collections-demo",
-    "raw": "'use client'\n\nimport { Card, Grid } from 'ui'\n\nexport default function GridCollectionsDemo() {\n  return (\n    <Grid aria-label=\"List articles\" columns={{ initial: 1, sm: 2, '2xl': 3 }} gap={2}>\n      <Grid.Collection items={articles}>\n        {(item) => (\n          <Grid.Item>\n            <Card>\n              <Card.Header>\n                <Card.Title>{item.title}</Card.Title>\n                <Card.Description>{item.description}</Card.Description>\n              </Card.Header>\n            </Card>\n          </Grid.Item>\n        )}\n      </Grid.Collection>\n    </Grid>\n  )\n}\n\nconst articles = [\n  {\n    id: 1,\n    title: 'Understanding React Hooks',\n    description:\n      \"Get the lowdown on React Hooks, how to use 'em, and best practices for those sleek functional components.\"\n  },\n  {\n    id: 2,\n    title: 'Mastering TypeScript',\n    description:\n      'Dive deep into TypeScript, from basic stuff to pro features, for building rock-solid apps.'\n  },\n  {\n    id: 3,\n    title: 'Laravel Eloquent Tips',\n    description:\n      'Check out advanced tricks for using Laravel Eloquent ORM to make your database game strong.'\n  },\n  {\n    id: 4,\n    title: 'Building with Next.js',\n    description:\n      'A full-on tutorial on creating server-rendered React apps with the Next.js framework.'\n  },\n  {\n    id: 5,\n    title: 'Inertia.js for Full-Stack Devs',\n    description:\n      'Learn how Inertia.js smooths out the gap between client-side frameworks and server-side apps.'\n  },\n  {\n    id: 6,\n    title: 'Optimizing Web Performance',\n    description: 'Tips and tricks to boost the performance and speed of your web apps.'\n  }\n]\n",
-    "type": "docs"
-  },
-  "surfaces/card-login-form-demo": {
-    "component": "@/components/docs/surfaces/card-login-form-demo",
-    "raw": "'use client'\n\nimport { Button, Card, Checkbox, Link, TextField } from 'ui'\n\nexport default function CardLoginFormDemo() {\n  return (\n    <Card className=\"max-w-md mx-auto\">\n      <Card.Header>\n        <Card.Title>Login</Card.Title>\n        <Card.Description>Don't loose the level, just keep on going.</Card.Description>\n      </Card.Header>\n      <Card.Content className=\"space-y-6\">\n        <TextField isRequired label=\"Email\" placeholder=\"Enter your email\" />\n        <TextField isRequired label=\"Password\" type=\"password\" placeholder=\"Enter your password\" />\n        <div className=\"flex justify-between items-center\">\n          <Checkbox>Remember me</Checkbox>\n          <Link intent=\"primary\" href=\"#\">\n            Forgot password?\n          </Link>\n        </div>\n      </Card.Content>\n      <Card.Footer>\n        <Button className=\"w-full\">Login</Button>\n      </Card.Footer>\n    </Card>\n  )\n}\n",
-    "type": "docs"
-  },
-  "surfaces/grid-basic-demo": {
-    "component": "@/components/docs/surfaces/grid-basic-demo",
-    "raw": "'use client'\n\nimport { Grid } from 'ui'\n\nexport default function GridBasicDemo() {\n  return (\n    <div>\n      <Grid columns={6}>\n        <Grid.Item>\n          <div className=\"p-4 border-l border-y h-32\" />\n        </Grid.Item>\n        <Grid.Item>\n          <div className=\"p-4 border-l border-y h-32\" />\n        </Grid.Item>\n        <Grid.Item>\n          <div className=\"p-4 border-l border-y h-32\" />\n        </Grid.Item>\n        <Grid.Item>\n          <div className=\"p-4 border-l border-y h-32\" />\n        </Grid.Item>\n        <Grid.Item>\n          <div className=\"p-4 border-l border-y h-32\" />\n        </Grid.Item>\n        <Grid.Item>\n          <div className=\"p-4 border-l border-y h-32 border-r\" />\n        </Grid.Item>\n      </Grid>\n    </div>\n  )\n}\n",
-    "type": "docs"
-  },
-  "surfaces/show-more-as-text-demo": {
-    "component": "@/components/docs/surfaces/show-more-as-text-demo",
-    "raw": "'use client'\n\nimport * as React from 'react'\n\nimport { ShowMore } from 'ui'\n\nexport default function ShowMoreAsTextDemo() {\n  return (\n    <div className=\"py-6\">\n      <ShowMore as=\"text\" text=\"Or continue with\" />\n    </div>\n  )\n}\n",
-    "type": "docs"
-  },
-  "surfaces/heading-tracking-demo": {
-    "component": "@/components/docs/surfaces/heading-tracking-demo",
-    "raw": "import { Heading } from 'ui'\n\nexport default function HeadingTrackingDemo() {\n  return <Heading tracking=\"tighter\">The quick brown fox jumps over the lazy dog</Heading>\n}\n",
-    "type": "docs"
-  },
-  "surfaces/show-more-orientation-demo": {
-    "component": "@/components/docs/surfaces/show-more-orientation-demo",
-    "raw": "'use client'\n\nimport * as React from 'react'\n\nimport { ShowMore } from 'ui'\n\nexport default function ShowMoreOrientationDemo() {\n  return <ShowMore orientation=\"vertical\" as=\"text\" text=\"Or\" className=\"h-56\" />\n}\n",
-    "type": "docs"
-  },
-  "surfaces/card-table-demo": {
-    "component": "@/components/docs/surfaces/card-table-demo",
-    "raw": "'use client'\n\nimport { IconDotsVertical, IconEye, IconHighlight, IconTrash } from 'justd-icons'\nimport { Card, Menu, Pagination, Table } from 'ui'\n\nexport default function CardTableDemo() {\n  return (\n    <Card>\n      <Card.Header>\n        <Card.Title>Users</Card.Title>\n        <Card.Description>Manage users, groups, and roles.</Card.Description>\n      </Card.Header>\n      <Card.Content>\n        <Table aria-label=\"Users\">\n          <Table.Header>\n            <Table.Column>#</Table.Column>\n            <Table.Column isRowHeader>Name</Table.Column>\n            <Table.Column>Gender</Table.Column>\n            <Table.Column>Age</Table.Column>\n            <Table.Column>Occupation</Table.Column>\n            <Table.Column />\n          </Table.Header>\n          <Table.Body items={users}>\n            {(item) => (\n              <Table.Row id={item.id}>\n                <Table.Cell>{item.id}</Table.Cell>\n                <Table.Cell>{item.name}</Table.Cell>\n                <Table.Cell>{item.gender}</Table.Cell>\n                <Table.Cell>{item.age}</Table.Cell>\n                <Table.Cell>{item.occupation}</Table.Cell>\n                <Table.Cell className=\"flex justify-end\">\n                  <Menu>\n                    <Menu.Trigger>\n                      <IconDotsVertical />\n                    </Menu.Trigger>\n                    <Menu.Content showArrow placement=\"left\">\n                      <Menu.Item>\n                        <IconEye /> View\n                      </Menu.Item>\n                      <Menu.Item>\n                        <IconHighlight /> Edit\n                      </Menu.Item>\n                      <Menu.Separator />\n                      <Menu.Item isDanger>\n                        <IconTrash /> Delete\n                      </Menu.Item>\n                    </Menu.Content>\n                  </Menu>\n                </Table.Cell>\n              </Table.Row>\n            )}\n          </Table.Body>\n        </Table>\n      </Card.Content>\n      <Card.Footer>\n        <Pagination>\n          <Pagination.List>\n            <Pagination.Item variant=\"first\" />\n            <Pagination.Item variant=\"previous\" />\n            <Pagination.Section className=\"lg:hidden rounded-lg border\">\n              <Pagination.Item variant=\"label\">1</Pagination.Item>\n              <Pagination.Item variant=\"separator\" />\n              <Pagination.Item className=\"text-muted-fg\" variant=\"label\">\n                {users.length}\n              </Pagination.Item>\n            </Pagination.Section>\n            <Pagination.Section className=\"lg:flex hidden\" items={pages}>\n              {(item) => (\n                <Pagination.Item id={item.value.toString()} isCurrent={item.value === 4} href=\"#\">\n                  {item.value}\n                </Pagination.Item>\n              )}\n            </Pagination.Section>\n            <Pagination.Item variant=\"next\" />\n            <Pagination.Item variant=\"last\" />\n          </Pagination.List>\n        </Pagination>\n      </Card.Footer>\n    </Card>\n  )\n}\n\nconst users = [\n  {\n    id: 1,\n    name: 'John Doe',\n    gender: 'Male',\n    age: 30,\n    occupation: 'Software Engineer'\n  },\n  {\n    id: 2,\n    name: 'Jane Smith',\n    gender: 'Female',\n    age: 25,\n    occupation: 'Marketing Manager'\n  },\n  {\n    id: 3,\n    name: 'Bob Johnson',\n    gender: 'Male',\n    age: 40,\n    occupation: 'Doctor'\n  },\n  {\n    id: 4,\n    name: 'Emily Chen',\n    gender: 'Female',\n    age: 28,\n    occupation: 'Teacher'\n  },\n  {\n    id: 5,\n    name: 'Michael Brown',\n    gender: 'Male',\n    age: 35,\n    occupation: 'Lawyer'\n  },\n  {\n    id: 6,\n    name: 'Sarah Lee',\n    gender: 'Female',\n    age: 32,\n    occupation: 'Designer'\n  },\n  {\n    id: 7,\n    name: 'Kevin White',\n    gender: 'Male',\n    age: 45,\n    occupation: 'CEO'\n  },\n  {\n    id: 8,\n    name: 'Lisa Nguyen',\n    gender: 'Female',\n    age: 29,\n    occupation: 'Engineer'\n  },\n  {\n    id: 9,\n    name: 'David Kim',\n    gender: 'Male',\n    age: 38,\n    occupation: 'Consultant'\n  },\n  {\n    id: 10,\n    name: 'Hannah Patel',\n    gender: 'Female',\n    age: 26,\n    occupation: 'Writer'\n  }\n]\nconst pages = Array.from({ length: users.length / 2 }, (_, i) => ({ value: i + 1 }))\n",
-    "type": "docs"
-  },
-  "surfaces/heading-level-demo": {
-    "component": "@/components/docs/surfaces/heading-level-demo",
-    "raw": "import { Heading } from 'ui'\n\nexport default function HeadingLevelDemo() {\n  return <Heading level={2}>The quick brown fox jumps over the lazy dog</Heading>\n}\n",
-    "type": "docs"
-  },
-  "surfaces/separator-orientation-demo": {
-    "component": "@/components/docs/surfaces/separator-orientation-demo",
-    "raw": "'use client'\n\nimport { Separator } from 'ui'\n\nexport default function SeparatorDemo() {\n  return <Separator orientation=\"vertical\" className=\"h-32\" />\n}\n",
-    "type": "docs"
-  },
-  "surfaces/grid-responsive-demo": {
-    "component": "@/components/docs/surfaces/grid-responsive-demo",
-    "raw": "'use client'\n\nimport { Grid } from 'ui'\n\nexport default function GridResponsiveDemo() {\n  return (\n    <Grid\n      columns={{\n        initial: 3,\n        sm: 4,\n        md: 5,\n        xl: 6\n      }}\n      gap={{\n        initial: 2,\n        sm: 3,\n        lg: 4\n      }}\n    >\n      <Grid.Item>\n        <div className=\"p-4 border h-32\" />\n      </Grid.Item>\n      <Grid.Item>\n        <div className=\"p-4 border h-32\" />\n      </Grid.Item>\n      <Grid.Item>\n        <div className=\"p-4 border h-32\" />\n      </Grid.Item>\n      <Grid.Item>\n        <div className=\"p-4 border h-32\" />\n      </Grid.Item>\n      <Grid.Item>\n        <div className=\"p-4 border h-32\" />\n      </Grid.Item>\n      <Grid.Item>\n        <div className=\"p-4 border h-32\" />\n      </Grid.Item>\n    </Grid>\n  )\n}\n",
-    "type": "docs"
-  },
-  "surfaces/grid-item-demo": {
-    "component": "@/components/docs/surfaces/grid-item-demo",
-    "raw": "'use client'\n\nimport { Grid } from 'ui'\n\nexport default function GridItemDemo() {\n  return (\n    <Grid debug columns={3} gap={4}>\n      <Grid.Item\n        colSpan={{\n          initial: 1,\n          sm: 2\n        }}\n        className=\"w-full h-24 grid place-content-center\"\n      >\n        1\n      </Grid.Item>\n      <Grid.Item className=\"w-full h-24 grid place-content-center\">2</Grid.Item>\n      <Grid.Item\n        colSpan={{\n          initial: 1,\n          sm: 3\n        }}\n        className=\"w-full h-24 grid place-content-center\"\n      >\n        3\n      </Grid.Item>\n    </Grid>\n  )\n}\n",
-    "type": "docs"
-  },
-  "surfaces/grid-debug-demo": {
-    "component": "@/components/docs/surfaces/grid-debug-demo",
-    "raw": "'use client'\n\nimport { Grid } from 'ui'\n\nexport default function GridDebugDemo() {\n  return (\n    <Grid debug columns={3} gap={4}>\n      <Grid.Item className=\"w-full h-24\" />\n      <Grid.Item className=\"w-full h-24\" />\n      <Grid.Item className=\"w-full h-24\" />\n      <Grid.Item className=\"w-full h-24\" />\n      <Grid.Item className=\"w-full h-24\" />\n      <Grid.Item className=\"w-full h-24\" />\n      <Grid.Item className=\"w-full h-24\" />\n      <Grid.Item className=\"w-full h-24\" />\n      <Grid.Item className=\"w-full h-24\" />\n    </Grid>\n  )\n}\n",
-    "type": "docs"
-  },
-  "surfaces/heading-demo": {
-    "component": "@/components/docs/surfaces/heading-demo",
-    "raw": "import { Heading } from 'ui'\n\nexport default function HeadingDemo() {\n  return <Heading>The quick brown fox jumps over the lazy dog</Heading>\n}\n",
-    "type": "docs"
-  },
-  "surfaces/card-demo": {
-    "component": "@/components/docs/surfaces/card-demo",
-    "raw": "'use client'\n\nimport { Button, Card } from 'ui'\n\nexport default function CardDemo() {\n  return (\n    <Card className=\"max-w-lg\">\n      <Card.Header>\n        <Card.Title>Monthly Report</Card.Title>\n        <Card.Description>Financial summary for June</Card.Description>\n      </Card.Header>\n      <Card.Content>\n        The monthly financial report shows a 15% increase in revenue compared to last month.\n      </Card.Content>\n      <Card.Footer>\n        <Button>View Details</Button>\n      </Card.Footer>\n    </Card>\n  )\n}\n",
-    "type": "docs"
-  },
-  "surfaces/show-more-demo": {
-    "component": "@/components/docs/surfaces/show-more-demo",
-    "raw": "'use client'\n\nimport * as React from 'react'\n\nimport { IconChevronLgDown } from 'justd-icons'\nimport { cn, ShowMore } from 'ui'\n\nexport default function ShowMoreDemo() {\n  return (\n    <div className=\"py-6\">\n      <ShowMore>\n        {({ isSelected }) => (\n          <>\n            Show {isSelected ? 'less' : 'more'}\n            <IconChevronLgDown\n              className={cn(\n                isSelected ? 'rotate-180' : '',\n                'size-4 transition-transform duration-200'\n              )}\n            />\n          </>\n        )}\n      </ShowMore>\n    </div>\n  )\n}\n",
-    "type": "docs"
-  },
-  "surfaces/grid-gap-x-y-demo": {
-    "component": "@/components/docs/surfaces/grid-gap-x-y-demo",
-    "raw": "'use client'\n\nimport { Grid } from 'ui'\n\nexport default function GridGapXYDemo() {\n  return (\n    <Grid\n      columns={{\n        initial: 3,\n        sm: 4,\n        md: 6\n      }}\n      gapX={{\n        initial: 2,\n        sm: 4\n      }}\n      gapY={{\n        initial: 4,\n        sm: 6\n      }}\n    >\n      <Grid.Item>\n        <div className=\"p-4 border h-24\" />\n      </Grid.Item>\n      <Grid.Item>\n        <div className=\"p-4 border h-24\" />\n      </Grid.Item>\n      <Grid.Item>\n        <div className=\"p-4 border h-24\" />\n      </Grid.Item>\n      <Grid.Item>\n        <div className=\"p-4 border h-24\" />\n      </Grid.Item>\n      <Grid.Item>\n        <div className=\"p-4 border h-24\" />\n      </Grid.Item>\n      <Grid.Item>\n        <div className=\"p-4 border h-24\" />\n      </Grid.Item>\n    </Grid>\n  )\n}\n",
-    "type": "docs"
-  },
-  "statuses/toast-description-demo": {
-    "component": "@/components/docs/statuses/toast-description-demo",
-    "raw": "'use client'\n\nimport { toast } from 'sonner'\nimport { Button } from 'ui'\n\nexport default function ToastDescriptionDemo() {\n  return (\n    <Button\n      onPress={() =>\n        toast('Cart Updated', {\n          description: 'Your item’s in the cart. Tap here to check it out.'\n        })\n      }\n    >\n      Add to Cart\n    </Button>\n  )\n}\n",
-    "type": "docs"
-  },
-  "statuses/meter-decimal-format-demo": {
-    "component": "@/components/docs/statuses/meter-decimal-format-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { Meter } from 'ui'\n\nexport default function MeterDecimalFormatDemo() {\n  return (\n    <Meter\n      formatOptions={{\n        style: 'decimal',\n        minimumFractionDigits: 2,\n        maximumFractionDigits: 2\n      }}\n      label=\"Progress\"\n      value={75.25}\n    />\n  )\n}\n",
-    "type": "docs"
-  },
-  "statuses/badge-demo": {
-    "component": "@/components/docs/statuses/badge-demo",
-    "raw": "'use client'\n\nimport { Badge } from 'ui'\n\nexport default function BadgeDemo() {\n  return <Badge>Label</Badge>\n}\n",
-    "type": "docs"
-  },
-  "statuses/skeleton-shape-demo": {
-    "component": "@/components/docs/statuses/skeleton-shape-demo",
-    "raw": "import { Card, Skeleton } from 'ui'\n\nexport default function SkeletonShapeDemo() {\n  return (\n    <Card className=\"p-4\">\n      <div className=\"flex gap-2\">\n        <Skeleton intent=\"lighter\" shape=\"circle\" className=\"size-8\" />\n        <div className=\"space-y-1\">\n          <Skeleton intent=\"muted\" shape=\"circle\" className=\"h-4 w-56\" />\n          <Skeleton intent=\"muted\" shape=\"circle\" className=\"h-4 w-10\" />\n        </div>\n      </div>\n    </Card>\n  )\n}\n",
-    "type": "docs"
-  },
-  "statuses/progress-bar-demo": {
-    "component": "@/components/docs/statuses/progress-bar-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { ProgressBar } from 'ui'\n\nexport default function ProgressBarDemo() {\n  const [value, setValue] = React.useState(1)\n\n  React.useEffect(() => {\n    const interval = setInterval(() => {\n      setValue((prev) => (prev < 100 ? prev + 1 : 100))\n    }, 200)\n\n    return () => clearInterval(interval)\n  }, [])\n\n  return <ProgressBar label=\"Loading…\" value={value} />\n}\n",
-    "type": "docs"
-  },
-  "statuses/loader-demo": {
-    "component": "@/components/docs/statuses/loader-demo",
-    "raw": "import { Loader } from 'ui'\n\nexport default function LoaderDemo() {\n  return <Loader />\n}\n",
-    "type": "docs"
-  },
-  "statuses/skeleton-intent-demo": {
-    "component": "@/components/docs/statuses/skeleton-intent-demo",
-    "raw": "import { Card, Skeleton } from 'ui'\n\nexport default function SkeletonIntentDemo() {\n  return (\n    <Card className=\"p-4\">\n      <div className=\"flex gap-2\">\n        <Skeleton intent=\"lighter\" className=\"size-8\" />\n        <div className=\"space-y-1\">\n          <Skeleton intent=\"muted\" className=\"h-3.5 w-20\" />\n          <Skeleton intent=\"muted\" className=\"h-3.5 w-48\" />\n        </div>\n      </div>\n    </Card>\n  )\n}\n",
-    "type": "docs"
-  },
-  "statuses/loader-variant-demo": {
-    "component": "@/components/docs/statuses/loader-variant-demo",
-    "raw": "import { Loader } from 'ui'\n\nexport default function LoaderVariantDemo() {\n  return (\n    <div className=\"flex gap-6\">\n      <Loader variant=\"ring\" />\n      <Loader variant=\"spin\" />\n      <Loader variant=\"bars\" />\n    </div>\n  )\n}\n",
-    "type": "docs"
-  },
-  "statuses/indeterminate-progress-bar-demo": {
-    "component": "@/components/docs/statuses/indeterminate-progress-bar-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { ProgressBar } from 'ui'\n\nexport default function ProgressBarDemo() {\n  const [value, setValue] = React.useState(1)\n\n  React.useEffect(() => {\n    const interval = setInterval(() => {\n      setValue((prev) => (prev < 100 ? prev + 1 : 100))\n    }, 50)\n\n    return () => clearInterval(interval)\n  }, [])\n\n  return <ProgressBar label=\"Loading…\" isIndeterminate value={value} />\n}\n",
-    "type": "docs"
-  },
-  "statuses/skeleton-demo": {
-    "component": "@/components/docs/statuses/skeleton-demo",
-    "raw": "import { Card, Skeleton } from 'ui'\n\nexport default function SkeletonDemo() {\n  return (\n    <Card className=\"p-4\">\n      <div className=\"flex gap-2\">\n        <Skeleton shape=\"circle\" className=\"size-6\" />\n        <div className=\"space-y-1\">\n          <Skeleton className=\"h-3 w-56\" />\n          <Skeleton className=\"h-3 w-10\" />\n        </div>\n      </div>\n    </Card>\n  )\n}\n",
-    "type": "docs"
-  },
-  "statuses/loader-intent-demo": {
-    "component": "@/components/docs/statuses/loader-intent-demo",
-    "raw": "import { Loader } from 'ui'\n\nexport default function LoaderIntentDemo() {\n  return (\n    <div className=\"flex gap-6\">\n      <Loader variant=\"spin\" size=\"medium\" intent=\"current\" />\n      <Loader variant=\"spin\" size=\"medium\" intent=\"primary\" />\n      <Loader variant=\"spin\" size=\"medium\" intent=\"secondary\" />\n      <Loader variant=\"spin\" size=\"medium\" intent=\"success\" />\n      <Loader variant=\"spin\" size=\"medium\" intent=\"warning\" />\n      <Loader variant=\"spin\" size=\"medium\" intent=\"danger\" />\n    </div>\n  )\n}\n",
-    "type": "docs"
-  },
-  "statuses/toast-action-demo": {
-    "component": "@/components/docs/statuses/toast-action-demo",
-    "raw": "'use client'\n\nimport { toast } from 'sonner'\nimport { Button } from 'ui'\n\nexport default function ToastActionDemo() {\n  return (\n    <div className=\"flex gap-3\">\n      <Button\n        appearance=\"outline\"\n        size=\"small\"\n        onPress={() =>\n          toast('New comment on your post!', {\n            action: {\n              label: 'View',\n              onClick: () => alert('Viewed')\n            }\n          })\n        }\n      >\n        Action\n      </Button>\n      <Button\n        appearance=\"outline\"\n        size=\"small\"\n        onPress={() =>\n          toast('New comment on your post!', {\n            action: {\n              label: 'View',\n              onClick: () => alert('Viewed')\n            },\n            cancel: {\n              label: 'Cancel',\n              onClick: () => alert('Cancelled')\n            }\n          })\n        }\n      >\n        Do or Not\n      </Button>\n      <Button\n        appearance=\"outline\"\n        size=\"small\"\n        onPress={() =>\n          toast('New comment on your post!', {\n            cancel: {\n              label: 'Cancel',\n              onClick: () => alert('Cancelled')\n            }\n          })\n        }\n      >\n        Cancel\n      </Button>\n    </div>\n  )\n}\n",
-    "type": "docs"
-  },
-  "statuses/badge-shape-demo": {
-    "component": "@/components/docs/statuses/badge-shape-demo",
-    "raw": "'use client'\n\nimport { Badge } from 'ui'\n\nexport default function BadgeShapeDemo() {\n  return <Badge shape=\"circle\">Label</Badge>\n}\n",
-    "type": "docs"
-  },
-  "statuses/note-demo": {
-    "component": "@/components/docs/statuses/note-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { Note } from 'ui'\n\nconst notes = ['info', 'primary', 'secondary', 'warning', 'danger', 'success'].map((n) => ({\n  name: n\n}))\n\nexport default function NoteDemo() {\n  return (\n    <Note>\n      We hook you up with top-tier migration services in our startup plan. Wanna roll with it? Hit\n      us up here.\n    </Note>\n  )\n}\n",
-    "type": "docs"
-  },
-  "statuses/toast-status-demo": {
-    "component": "@/components/docs/statuses/toast-status-demo",
-    "raw": "'use client'\n\nimport { toast } from 'sonner'\nimport { Button } from 'ui'\n\nexport default function ToastStatusDemo() {\n  return (\n    <div className=\"flex flex-wrap gap-3\">\n      <Button appearance=\"outline\" onPress={() => toast.error('The registration failed')}>\n        Error\n      </Button>\n      <Button\n        appearance=\"outline\"\n        onPress={() => toast.success('The registration was successful.')}\n      >\n        Success\n      </Button>\n      <Button\n        appearance=\"outline\"\n        onPress={() => toast.warning('There was an issue during registration')}\n      >\n        Warning\n      </Button>\n      <Button appearance=\"outline\" onPress={() => toast.info('Email is already registered.')}>\n        Info\n      </Button>\n      <Button\n        appearance=\"outline\"\n        onPress={() => {\n          toast.promise(wait(2000), {\n            loading: 'Deleting database...',\n            success: 'Database deleted.',\n            error: 'Failed to delete database.'\n          })\n        }}\n      >\n        Promise / Loading\n      </Button>\n    </div>\n  )\n}\n\nfunction wait(number: number) {\n  return new Promise((resolve) => setTimeout(resolve, number))\n}\n",
-    "type": "docs"
-  },
-  "statuses/note-intent-demo": {
-    "component": "@/components/docs/statuses/note-intent-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { OptionPreview } from '@/components/docs/outside/option-preview'\nimport { Note, Select } from 'ui'\n\nconst notes = ['info', 'primary', 'secondary', 'warning', 'danger', 'success'].map((n) => ({\n  name: n\n}))\n\nexport default function NoteIntentDemo() {\n  const [selected, setSelected] = React.useState<any>('primary')\n  return (\n    <>\n      <OptionPreview>\n        <Select\n          className=\"[&_button]:h-9\"\n          selectedKey={selected}\n          onSelectionChange={setSelected}\n          placeholder=\"Choose an intent\"\n        >\n          <Select.Trigger />\n          <Select.List items={notes}>\n            {(item) => (\n              <Select.Option id={item.name} textValue={item.name}>\n                {item.name}\n              </Select.Option>\n            )}\n          </Select.List>\n        </Select>\n      </OptionPreview>\n      <div className=\"max-w-md\">\n        <Note intent={selected as any}>\n          We hook you up with top-tier migration services in our startup plan. Wanna roll with it?\n          Hit us up here.\n        </Note>\n      </div>\n    </>\n  )\n}\n",
-    "type": "docs"
-  },
-  "statuses/meter-currency-format-demo": {
-    "component": "@/components/docs/statuses/meter-currency-format-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { Meter } from 'ui'\n\nexport default function MeterCurrencyFormatDemo() {\n  return <Meter label=\"Revenue\" formatOptions={{ style: 'currency', currency: 'USD' }} value={15} />\n}\n",
-    "type": "docs"
-  },
-  "statuses/toast-positions-demo": {
-    "component": "@/components/docs/statuses/toast-positions-demo",
-    "raw": "'use client'\n\nimport { toast, type ToastT } from 'sonner'\nimport { Button } from 'ui'\n\nconst positions: ToastT['position'][] = [\n  'top-left',\n  'top-right',\n  'bottom-left',\n  'bottom-right',\n  'top-center',\n  'bottom-center'\n]\n\nexport default function ToastPositionsDemo() {\n  return (\n    <div className=\"grid grid-cols-2 sm:grid-cols-3 gap-4\">\n      {positions.map((position) => (\n        <Button\n          appearance=\"outline\"\n          size=\"small\"\n          key={position}\n          onPress={() =>\n            toast('The registration is successful, click here to continue.', { position })\n          }\n        >\n          {position}\n        </Button>\n      ))}\n    </div>\n  )\n}\n",
-    "type": "docs"
-  },
-  "statuses/note-hide-indicator-demo": {
-    "component": "@/components/docs/statuses/note-hide-indicator-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { Note } from 'ui'\n\nexport default function NoteHideIndicatorDemo() {\n  return (\n    <>\n      <Note hideIndicator>\n        You need to be careful with this note. This is a note without indicator.\n      </Note>\n    </>\n  )\n}\n",
-    "type": "docs"
-  },
-  "statuses/badge-intent-demo": {
-    "component": "@/components/docs/statuses/badge-intent-demo",
-    "raw": "'use client'\n\nimport { Badge } from 'ui'\n\nexport default function BadgeIntentDemo() {\n  return (\n    <div className=\"flex flex-wrap gap-2\">\n      {['primary', 'secondary', 'success', 'info', 'warning', 'danger', 'light', 'dark'].map(\n        (intent, index) => (\n          <Badge key={index} intent={intent as any}>\n            {intent}\n          </Badge>\n        )\n      )}\n    </div>\n  )\n}\n",
-    "type": "docs"
-  },
-  "statuses/toast-demo": {
-    "component": "@/components/docs/statuses/toast-demo",
-    "raw": "'use client'\n\nimport { toast } from 'sonner'\nimport { Button } from 'ui'\n\nexport default function ToastDemo() {\n  return (\n    <Button onPress={() => toast('The registration is successful, click here to continue.')}>\n      Show Toast\n    </Button>\n  )\n}\n",
-    "type": "docs"
-  },
-  "statuses/meter-demo": {
-    "component": "@/components/docs/statuses/meter-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { Meter } from 'ui'\n\nexport default function MeterDemo() {\n  const [value, setValue] = React.useState(1)\n\n  React.useEffect(() => {\n    const interval = setInterval(() => {\n      setValue((prev) => (prev < 100 ? prev + 1 : 100))\n    }, 50)\n\n    return () => clearInterval(interval)\n  }, [])\n  return <Meter label=\"Storage space\" value={value} />\n}\n",
-    "type": "docs"
-  },
-  "statuses/loader-size-demo": {
-    "component": "@/components/docs/statuses/loader-size-demo",
-    "raw": "import { Loader } from 'ui'\n\nexport default function LoaderSizeDemo() {\n  return (\n    <div className=\"flex gap-6\">\n      <Loader size=\"small\" />\n      <Loader size=\"medium\" />\n      <Loader size=\"large\" />\n      <Loader size=\"extra-large\" />\n    </div>\n  )\n}\n",
-    "type": "docs"
-  },
-  "collections/menu-collection-demo": {
-    "component": "@/components/docs/collections/menu-collection-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { Button, Menu } from 'ui'\n\nexport default function MenuCollectionDemo() {\n  return (\n    <Menu>\n      <Button appearance=\"outline\">Open</Button>\n      <Menu.Content className=\"min-w-64\" placement=\"bottom\" items={categories}>\n        {(item) => <Menu.Item id={item.slug}>{item.name}</Menu.Item>}\n      </Menu.Content>\n    </Menu>\n  )\n}\n\nconst categories = [\n  {\n    name: 'Technology',\n    slug: 'technology'\n  },\n  {\n    name: 'Health',\n    slug: 'health'\n  },\n  {\n    name: 'Business',\n    slug: 'business'\n  },\n  {\n    name: 'Travel',\n    slug: 'travel'\n  },\n  {\n    name: 'Education',\n    slug: 'education'\n  },\n  {\n    name: 'Entertainment',\n    slug: 'entertainment'\n  },\n  {\n    name: 'Sports',\n    slug: 'sports'\n  },\n  {\n    name: 'Fashion',\n    slug: 'fashion'\n  },\n  {\n    name: 'Food',\n    slug: 'food'\n  },\n  {\n    name: 'Science',\n    slug: 'science'\n  }\n]\n",
-    "type": "docs"
-  },
-  "collections/tag-group-disabled-demo": {
-    "component": "@/components/docs/collections/tag-group-disabled-demo",
-    "raw": "import { androidBrands } from '@/components/docs/collections/tag-group-demo'\nimport { Tag } from 'ui'\n\nexport default function TagGroupDisabledDemo() {\n  return (\n    <div className=\"space-y-6\">\n      <Tag.Group\n        disabledKeys={androidBrands.filter((brand) => !brand.available).map((brand) => brand.id)}\n        label=\"Disabled Key\"\n        selectionMode=\"multiple\"\n      >\n        <Tag.List items={androidBrands}>{(item) => <Tag.Item>{item.name}</Tag.Item>}</Tag.List>\n      </Tag.Group>\n\n      <Tag.Group label=\"Disabled by Tag\" selectionMode=\"multiple\">\n        <Tag.List items={androidBrands}>\n          {(item) => <Tag.Item isDisabled={item.available}>{item.name}</Tag.Item>}\n        </Tag.List>\n      </Tag.Group>\n    </div>\n  )\n}\n",
-    "type": "docs"
-  },
-  "collections/single-menu-demo": {
-    "component": "@/components/docs/collections/single-menu-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport type { Placement } from '@react-types/overlays'\nimport type { Selection } from 'react-aria-components'\nimport { Button, Menu } from 'ui'\n\nexport const placements = [\n  'bottom',\n  'bottom left',\n  'bottom right',\n  'bottom start',\n  'bottom end',\n  'top',\n  'top left',\n  'top right',\n  'top start',\n  'top end',\n  'left',\n  'left top',\n  'left bottom',\n  'start',\n  'start top',\n  'start bottom',\n  'right',\n  'right top',\n  'right bottom',\n  'end',\n  'end top',\n  'end bottom'\n].map((item, i) => ({ id: i, name: item }))\n\nexport default function SingleMenuDemo() {\n  const [selected, setSelected] = React.useState<Selection>(new Set(['bottom']))\n  return (\n    <Menu>\n      <Button appearance=\"outline\">Placement</Button>\n      <Menu.Content\n        placement={Array.from(selected)[0] as Placement}\n        selectionMode=\"single\"\n        selectedKeys={selected}\n        onSelectionChange={setSelected}\n        items={placements}\n        className=\"max-h-72 min-w-52\"\n      >\n        {(item) => <Menu.Radio id={item.name}>{item.name}</Menu.Radio>}\n      </Menu.Content>\n    </Menu>\n  )\n}\n",
-    "type": "docs"
-  },
-  "collections/choicebox-single-selection-demo": {
-    "component": "@/components/docs/collections/choicebox-single-selection-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { Choicebox } from 'ui'\n\nexport default function ChoiceboxSingleSelectionDemo() {\n  return (\n    <Choicebox aria-label=\"Select packages\" selectionMode=\"single\" items={packages}>\n      {(item) => <Choicebox.Item {...item} />}\n    </Choicebox>\n  )\n}\n\nconst packages = [\n  {\n    id: 'sm',\n    title: 'Small',\n    description: 'Perfect for beginners. Basic resources for light projects.'\n  },\n  {\n    id: 'md',\n    title: 'Medium',\n    description: 'Great for growing sites. More power and storage.'\n  },\n  {\n    id: 'lg',\n    title: 'Large',\n    description: 'Ideal for busy sites. Lots of resources and support.'\n  },\n  {\n    id: 'xl',\n    title: 'Extra Large',\n    description: 'Max power for demanding applications. Top-tier performance.'\n  }\n]\n",
-    "type": "docs"
-  },
-  "collections/multiple-menu-demo": {
-    "component": "@/components/docs/collections/multiple-menu-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { type Selection } from '@react-types/shared'\nimport { Button, Menu } from 'ui'\n\nexport default function MultipleMenuDemo() {\n  const [selected, setSelected] = React.useState<Selection>(new Set(['autoPlay']))\n  return (\n    <Menu>\n      <Button appearance=\"outline\">Open</Button>\n      <Menu.Content\n        placement=\"bottom\"\n        selectionMode=\"multiple\"\n        selectedKeys={selected}\n        onSelectionChange={setSelected}\n      >\n        <Menu.Section items={items} title=\"Content Preferences\">\n          {(item) => (\n            <Menu.Checkbox id={item.slug} textValue={item.name}>\n              {item.name}\n            </Menu.Checkbox>\n          )}\n        </Menu.Section>\n      </Menu.Content>\n    </Menu>\n  )\n}\n\nconst items = [\n  {\n    name: 'Auto-Play Videos',\n    slug: 'autoPlay'\n  },\n  {\n    name: 'High-Quality Streaming',\n    slug: 'highQuality'\n  },\n  {\n    name: 'Exclusive Releases',\n    slug: 'exclusiveContent'\n  },\n  {\n    name: 'Default Subtitles',\n    slug: 'subtitles'\n  },\n  {\n    name: 'Personalized Recommendations',\n    slug: 'recommendations'\n  },\n  {\n    name: 'Background Play',\n    slug: 'backgroundPlay'\n  },\n  {\n    name: 'Allow Downloads',\n    slug: 'download'\n  }\n]\n",
-    "type": "docs"
-  },
-  "collections/choicebox-controlled-demo": {
-    "component": "@/components/docs/collections/choicebox-controlled-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport type { Selection } from 'react-aria-components'\nimport { Choicebox, Description } from 'ui'\n\nexport default function ChoiceboxControlledDemo() {\n  const [selectedKeys, setSelectedKeys] = React.useState<Selection>(new Set([packages[0].id]))\n  return (\n    <>\n      <Choicebox\n        aria-label=\"Select packages\"\n        selectionMode=\"multiple\"\n        selectedKeys={selectedKeys}\n        onSelectionChange={setSelectedKeys}\n        items={packages}\n      >\n        {(item) => <Choicebox.Item {...item} />}\n      </Choicebox>\n\n      <Description className=\"mt-2 block [&>strong]:text-fg text-muted-fg\">\n        You have selected: <strong>{Array.from(selectedKeys).join(', ')}</strong>\n      </Description>\n    </>\n  )\n}\n\nconst packages = [\n  {\n    id: 'sm',\n    title: 'Small',\n    description: 'Perfect for beginners. Basic resources for light projects.'\n  },\n  {\n    id: 'md',\n    title: 'Medium',\n    description: 'Great for growing sites. More power and storage.'\n  },\n  {\n    id: 'lg',\n    title: 'Large',\n    description: 'Ideal for busy sites. Lots of resources and support.'\n  },\n  {\n    id: 'xl',\n    title: 'Extra Large',\n    description: 'Max power for demanding applications. Top-tier performance.'\n  }\n]\n",
-    "type": "docs"
-  },
-  "collections/grid-list-drag-between-item-demo": {
-    "component": "@/components/docs/collections/grid-list-drag-between-item-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport GridListDragDemo from '@/components/docs/collections/grid-list-drag-demo'\nimport { useDragAndDrop } from 'react-aria-components'\nimport { useListData } from 'react-stately'\nimport { GridList } from 'ui'\n\nexport default function GridListDragBetweenItemDemo() {\n  const list = useListData({\n    initialItems: [\n      { id: 6, name: 'The Byrds' },\n      { id: 7, name: 'The Yardbirds' }\n    ]\n  })\n\n  const { dragAndDropHooks } = useDragAndDrop({\n    async onInsert(e) {\n      const items = await Promise.all(\n        e.items.map(async (item) => {\n          const name = item.kind === 'text' ? await item.getText('text/plain') : item.name\n          return { id: Math.random(), name }\n        })\n      )\n\n      if (e.target.dropPosition === 'before') {\n        list.insertBefore(e.target.key, ...items)\n      } else if (e.target.dropPosition === 'after') {\n        list.insertAfter(e.target.key, ...items)\n      }\n    }\n  })\n\n  return (\n    <div className=\"grid gap-4 lg:grid-cols-3\">\n      <GridListDragDemo />\n      <GridList aria-label=\"Droppable list\" items={list.items} dragAndDropHooks={dragAndDropHooks}>\n        {(item) => <GridList.Item>{item.name}</GridList.Item>}\n      </GridList>\n      <OtherEmptyList />\n    </div>\n  )\n}\n\nexport function OtherEmptyList() {\n  const list = useListData({\n    initialItems: [{ id: 7, name: 'The Who' }]\n  })\n\n  const { dragAndDropHooks } = useDragAndDrop({\n    async onInsert(e) {\n      const items = await Promise.all(\n        e.items.map(async (item) => {\n          const name = item.kind === 'text' ? await item.getText('text/plain') : item.name\n          return { id: Math.random(), name }\n        })\n      )\n\n      if (e.target.dropPosition === 'before') {\n        list.insertBefore(e.target.key, ...items)\n      } else if (e.target.dropPosition === 'after') {\n        list.insertAfter(e.target.key, ...items)\n      }\n    }\n  })\n\n  return (\n    <GridList\n      aria-label=\"Droppable list\"\n      items={list.items}\n      dragAndDropHooks={dragAndDropHooks}\n      renderEmptyState={() => <GridList.EmptyState>No bands selected</GridList.EmptyState>}\n    >\n      {(item) => <GridList.Item>{item.name}</GridList.Item>}\n    </GridList>\n  )\n}\n",
-    "type": "docs"
-  },
-  "collections/list-box-demo": {
-    "component": "@/components/docs/collections/list-box-demo",
-    "raw": "'use client'\n\nimport { ListBox } from 'ui'\n\nexport default function ListBoxDemo() {\n  return (\n    <ListBox items={rockPopBands} selectionMode=\"single\" aria-label=\"Bands\">\n      {(item) => <ListBox.Item id={item.id}>{item.name}</ListBox.Item>}\n    </ListBox>\n  )\n}\n\nconst rockPopBands = [\n  { id: '1', name: 'Nirvana' },\n  { id: '2', name: 'Radiohead' },\n  { id: '3', name: 'Foo Fighters' },\n  { id: '4', name: 'Arctic Monkeys' },\n  { id: '5', name: 'The Strokes' }\n]\n",
-    "type": "docs"
-  },
-  "collections/list-box-multiple-demo": {
-    "component": "@/components/docs/collections/list-box-multiple-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport type { Selection } from 'react-aria-components'\nimport { Description, ListBox } from 'ui'\n\nexport default function ListBoxControlledDemo() {\n  const [selected, setSelected] = React.useState<Selection>(new Set(['2']))\n  return (\n    <>\n      <ListBox\n        selectedKeys={selected}\n        onSelectionChange={setSelected}\n        items={fruits}\n        aria-label=\"Fruits\"\n        selectionMode=\"multiple\"\n      >\n        {(fruit) => (\n          <ListBox.Item id={fruit.id} textValue={fruit.name}>\n            {fruit.name}\n          </ListBox.Item>\n        )}\n      </ListBox>\n\n      {[...selected].length > 0 && (\n        <Description className=\"mt-4 block\">\n          Selected: {selected === 'all' ? 'All selected' : [...selected].join(', ')}\n        </Description>\n      )}\n    </>\n  )\n}\n\nconst fruits = [\n  {\n    id: 1,\n    name: 'Apple'\n  },\n  {\n    id: 2,\n    name: 'Banana'\n  },\n  {\n    id: 3,\n    name: 'Orange'\n  },\n  {\n    id: 4,\n    name: 'Strawberry'\n  },\n  {\n    id: 5,\n    name: 'Grapes'\n  },\n  {\n    id: 6,\n    name: 'Mango'\n  },\n  {\n    id: 7,\n    name: 'Pineapple'\n  }\n]\n",
-    "type": "docs"
-  },
-  "collections/grid-list-multiple-demo": {
-    "component": "@/components/docs/collections/grid-list-multiple-demo",
-    "raw": "'use client'\n\nimport { GridList } from 'ui'\n\nexport default function GridListMultipleDemo() {\n  return (\n    <div>\n      <GridList\n        items={items}\n        aria-label=\"Select items\"\n        selectionMode=\"multiple\"\n        className=\"min-w-64\"\n      >\n        {(item) => <GridList.Item>{item.name}</GridList.Item>}\n      </GridList>\n    </div>\n  )\n}\n\nconst items = [\n  { id: '1', name: 'The Beatles' },\n  { id: '2', name: 'Led Zeppelin' },\n  { id: '3', name: 'Pink Floyd' },\n  { id: '4', name: 'Queen' },\n  { id: '5', name: 'The Rolling Stones' }\n]\n",
-    "type": "docs"
-  },
-  "collections/table-demo": {
-    "component": "@/components/docs/collections/table-demo",
-    "raw": "'use client'\n\nimport { NumberFormatter } from '@internationalized/number'\nimport { IconDotsVertical } from 'justd-icons'\nimport { Card, Menu, Table } from 'ui'\n\nexport default function TableDemo() {\n  const formatter = new NumberFormatter('en-US', { style: 'currency', currency: 'USD' })\n\n  const priceFormat = (price: number) => formatter.format(price)\n  return (\n    <Card>\n      <Table aria-label=\"Products\">\n        <Table.Header>\n          <Table.Column>#</Table.Column>\n          <Table.Column isRowHeader>Name</Table.Column>\n          <Table.Column>Category</Table.Column>\n          <Table.Column>Price</Table.Column>\n          <Table.Column>Stock</Table.Column>\n          <Table.Column />\n        </Table.Header>\n        <Table.Body items={products}>\n          {(item) => (\n            <Table.Row id={item.id}>\n              <Table.Cell>{item.id}</Table.Cell>\n              <Table.Cell>{item.name}</Table.Cell>\n              <Table.Cell>{item.category}</Table.Cell>\n              <Table.Cell>{priceFormat(item.price)}</Table.Cell>\n              <Table.Cell>{item.stock}</Table.Cell>\n              <Table.Cell>\n                <div className=\"flex justify-end\">\n                  <Menu>\n                    <Menu.Trigger>\n                      <IconDotsVertical />\n                    </Menu.Trigger>\n                    <Menu.Content aria-label=\"Actions\" showArrow placement=\"left\">\n                      <Menu.Item>View</Menu.Item>\n                      <Menu.Item>Edit</Menu.Item>\n                      <Menu.Separator />\n                      <Menu.Item isDanger>Delete</Menu.Item>\n                    </Menu.Content>\n                  </Menu>\n                </div>\n              </Table.Cell>\n            </Table.Row>\n          )}\n        </Table.Body>\n      </Table>\n    </Card>\n  )\n}\n\nexport const products = [\n  { id: '1', name: 'iPhone 13', category: 'Electronics', price: 799, brand: 'Apple', stock: 150 },\n  {\n    id: '2',\n    name: 'Galaxy S21',\n    category: 'Electronics',\n    price: 699,\n    brand: 'Samsung',\n    stock: 200\n  },\n  { id: '3', name: 'MacBook Pro', category: 'Computers', price: 1299, brand: 'Apple', stock: 80 },\n  { id: '4', name: 'Dell XPS 13', category: 'Computers', price: 999, brand: 'Dell', stock: 50 },\n  {\n    id: '5',\n    name: 'Sony WH-1000XM4',\n    category: 'Headphones',\n    price: 349,\n    brand: 'Sony',\n    stock: 120\n  },\n  { id: '6', name: 'AirPods Pro', category: 'Headphones', price: 249, brand: 'Apple', stock: 180 },\n  {\n    id: '7',\n    name: 'Fitbit Charge 5',\n    category: 'Wearables',\n    price: 179,\n    brand: 'Fitbit',\n    stock: 75\n  }\n]\n",
-    "type": "docs"
-  },
-  "collections/menu-respect-screen-demo": {
-    "component": "@/components/docs/collections/menu-respect-screen-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { buttonStyles, Menu } from 'ui'\n\nexport default function MenuRespectScreenDemo() {\n  return (\n    <Menu respectScreen={false}>\n      <Menu.Trigger className={buttonStyles({ appearance: 'outline' })}>Open</Menu.Trigger>\n      <Menu.Content placement=\"bottom\" className=\"min-w-48\">\n        <Menu.Item>Dashboard</Menu.Item>\n        <Menu.Item>Reports</Menu.Item>\n        <Menu.Item>Settings</Menu.Item>\n        <Menu.Item>Security</Menu.Item>\n        <Menu.Item>Privacy</Menu.Item>\n        <Menu.Item>Help</Menu.Item>\n      </Menu.Content>\n    </Menu>\n  )\n}\n",
-    "type": "docs"
-  },
-  "collections/menu-danger-demo": {
-    "component": "@/components/docs/collections/menu-danger-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { Menu } from 'ui'\n\nexport default function MenuDangerDemo() {\n  return (\n    <Menu>\n      <Menu.Trigger>Open</Menu.Trigger>\n      <Menu.Content className=\"min-w-48\" placement=\"bottom\">\n        <Menu.Item>View</Menu.Item>\n        <Menu.Item>Edit</Menu.Item>\n        <Menu.Separator />\n        <Menu.Item isDanger>Delete</Menu.Item>\n      </Menu.Content>\n    </Menu>\n  )\n}\n",
-    "type": "docs"
-  },
-  "collections/menu-section-demo": {
-    "component": "@/components/docs/collections/menu-section-demo",
-    "raw": "'use client'\n\nimport { Menu } from 'ui'\n\nexport default function MenuSectionDemo() {\n  return (\n    <Menu>\n      <Menu.Trigger>Open</Menu.Trigger>\n      <Menu.Content className=\"min-w-64\" items={cities} placement=\"bottom\">\n        {(city) => (\n          <Menu.Section title={city.name} items={city.landmarks}>\n            {(landmark) => <Menu.Item textValue={landmark.name}>{landmark.name}</Menu.Item>}\n          </Menu.Section>\n        )}\n      </Menu.Content>\n    </Menu>\n  )\n}\n\nconst cities = [\n  {\n    id: 1,\n    name: 'New York City',\n    landmarks: [\n      {\n        id: 101,\n        name: 'Statue of Liberty'\n      },\n      {\n        id: 102,\n        name: 'Central Park'\n      },\n      {\n        id: 103,\n        name: 'Empire State Building'\n      },\n      {\n        id: 104,\n        name: 'Times Square'\n      }\n    ]\n  },\n  {\n    id: 2,\n    name: 'Paris',\n    landmarks: [\n      {\n        id: 201,\n        name: 'Eiffel Tower'\n      },\n      {\n        id: 202,\n        name: 'Louvre Museum'\n      },\n      {\n        id: 203,\n        name: 'Notre-Dame Cathedral'\n      },\n      {\n        id: 204,\n        name: 'Champs-Élysées'\n      }\n    ]\n  },\n  {\n    id: 3,\n    name: 'Tokyo',\n    landmarks: [\n      {\n        id: 301,\n        name: 'Tokyo Tower'\n      },\n      {\n        id: 302,\n        name: 'Shibuya Crossing'\n      },\n      {\n        id: 303,\n        name: 'Senso-ji Temple'\n      },\n      {\n        id: 304,\n        name: 'Meiji Shrine'\n      },\n      {\n        id: 305,\n        name: 'Tokyo Skytree'\n      }\n    ]\n  },\n  {\n    id: 4,\n    name: 'London',\n    landmarks: [\n      {\n        id: 401,\n        name: 'Big Ben'\n      },\n      {\n        id: 402,\n        name: 'Tower of London'\n      },\n      {\n        id: 403,\n        name: 'Buckingham Palace'\n      },\n      {\n        id: 404,\n        name: 'London Eye'\n      },\n      {\n        id: 405,\n        name: 'Westminster Abbey'\n      }\n    ]\n  },\n  {\n    id: 5,\n    name: 'Rome',\n    landmarks: [\n      {\n        id: 501,\n        name: 'Colosseum'\n      },\n      {\n        id: 502,\n        name: 'Vatican City'\n      },\n      {\n        id: 503,\n        name: 'Trevi Fountain'\n      },\n      {\n        id: 504,\n        name: 'Pantheon'\n      }\n    ]\n  },\n  {\n    id: 6,\n    name: 'Sydney',\n    landmarks: [\n      {\n        id: 601,\n        name: 'Sydney Opera House'\n      },\n      {\n        id: 602,\n        name: 'Sydney Harbour Bridge'\n      },\n      {\n        id: 603,\n        name: 'Bondi Beach'\n      },\n      {\n        id: 604,\n        name: 'Royal Botanic Garden'\n      }\n    ]\n  },\n  {\n    id: 7,\n    name: 'Dubai',\n    landmarks: [\n      {\n        id: 701,\n        name: 'Burj Khalifa'\n      },\n      {\n        id: 702,\n        name: 'Palm Jumeirah'\n      },\n      {\n        id: 703,\n        name: 'Dubai Mall'\n      },\n      {\n        id: 704,\n        name: 'Burj Al Arab'\n      }\n    ]\n  },\n  {\n    id: 8,\n    name: 'Moscow',\n    landmarks: [\n      {\n        id: 801,\n        name: 'Red Square'\n      },\n      {\n        id: 802,\n        name: 'Kremlin'\n      },\n      {\n        id: 803,\n        name: \"St. Basil's Cathedral\"\n      },\n      {\n        id: 804,\n        name: 'Bolshoi Theatre'\n      }\n    ]\n  },\n  {\n    id: 9,\n    name: 'Cairo',\n    landmarks: [\n      {\n        id: 901,\n        name: 'Pyramids of Giza'\n      },\n      {\n        id: 902,\n        name: 'Great Sphinx of Giza'\n      },\n      {\n        id: 903,\n        name: 'Egyptian Museum'\n      }\n    ]\n  },\n  {\n    id: 10,\n    name: 'Rio de Janeiro',\n    landmarks: [\n      {\n        id: 1001,\n        name: 'Christ the Redeemer'\n      },\n      {\n        id: 1002,\n        name: 'Sugarloaf Mountain'\n      },\n      {\n        id: 1003,\n        name: 'Copacabana Beach'\n      },\n      {\n        id: 1004,\n        name: 'Maracanã Stadium'\n      }\n    ]\n  }\n]\n",
-    "type": "docs"
-  },
-  "collections/choicebox-disabled-demo": {
-    "component": "@/components/docs/collections/choicebox-disabled-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { Choicebox } from 'ui'\n\nexport default function ChoiceboxDisabledDemo() {\n  return (\n    <Choicebox aria-label=\"Select packages\" selectionMode=\"multiple\" items={packages}>\n      {(item) => <Choicebox.Item isDisabled={['sm', 'lg'].includes(item.id)} {...item} />}\n    </Choicebox>\n  )\n}\n\nconst packages = [\n  {\n    id: 'sm',\n    title: 'Small',\n    description: 'Perfect for beginners. Basic resources for light projects.'\n  },\n  {\n    id: 'md',\n    title: 'Medium',\n    description: 'Great for growing sites. More power and storage.'\n  },\n  {\n    id: 'lg',\n    title: 'Large',\n    description: 'Ideal for busy sites. Lots of resources and support.'\n  },\n  {\n    id: 'xl',\n    title: 'Extra Large',\n    description: 'Max power for demanding applications. Top-tier performance.'\n  }\n]\n",
-    "type": "docs"
-  },
-  "collections/tag-group-demo": {
-    "component": "@/components/docs/collections/tag-group-demo",
-    "raw": "'use client'\n\nimport { Tag } from 'ui'\n\nexport const androidBrands = [\n  { id: '1', name: 'Samsung', available: false },\n  { id: '2', name: 'OnePlus', available: true },\n  { id: '3', name: 'Google', available: true },\n  { id: '4', name: 'Xiaomi', available: false }\n]\n\nexport default function TagGroupDemo() {\n  return (\n    <Tag.Group label=\"Android Brands\" selectionMode=\"multiple\">\n      <Tag.List items={androidBrands}>{(item) => <Tag.Item>{item.name}</Tag.Item>}</Tag.List>\n    </Tag.Group>\n  )\n}\n",
-    "type": "docs"
-  },
-  "collections/list-box-item-details-demo": {
-    "component": "@/components/docs/collections/list-box-item-details-demo",
-    "raw": "'use client'\n\nimport { ListBox } from 'ui'\n\nexport default function ListBoxItemDetailsDemo() {\n  return (\n    <ListBox defaultSelectedKeys={[2]} items={roles} aria-label=\"Bands\">\n      {(item) => (\n        <ListBox.Item id={item.id}>\n          <ListBox.ItemDetails label={item.name} description={item.description} />\n        </ListBox.Item>\n      )}\n    </ListBox>\n  )\n}\n\nconst roles = [\n  { id: 1, name: 'Admin', description: 'Has full access to all resources' },\n  { id: 2, name: 'Editor', description: 'Can edit content but has limited access to settings' },\n  { id: 3, name: 'Viewer', description: 'Can view content but cannot make changes' },\n  { id: 4, name: 'Contributor', description: 'Can contribute content for review' },\n  { id: 5, name: 'Guest', description: 'Limited access, mostly for viewing purposes' }\n]\n",
-    "type": "docs"
-  },
-  "collections/menu-with-arrow-demo": {
-    "component": "@/components/docs/collections/menu-with-arrow-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { IconHashtag, IconHeadphones, IconLogout, IconPlus, IconSettings } from 'justd-icons'\nimport { Avatar, Menu } from 'ui'\n\nexport default function MenuWithArrowDemo() {\n  return (\n    <>\n      <Menu>\n        <Menu.Trigger aria-label=\"Open Menu\">\n          <Avatar className=\"size-10\" src=\"https://github.com/irsyadadl.png\" />\n        </Menu.Trigger>\n        <Menu.Content placement=\"bottom\" showArrow className=\"min-w-64\">\n          <Menu.Section>\n            <Menu.Header separator>\n              <span className=\"block\">Irsyad A. Panjaitan</span>\n              <span className=\"font-normal text-muted-fg\">@irsyadadl</span>\n            </Menu.Header>\n          </Menu.Section>\n          <Menu.Item>\n            <IconSettings />\n            Settings\n          </Menu.Item>\n          <Menu.Item href=\"#\">\n            <IconPlus />\n            Create Team\n          </Menu.Item>\n          <Menu.Item href=\"#\">\n            <IconHashtag />\n            Command Menu\n            <Menu.Keyboard keys=\"⌘K\" />\n          </Menu.Item>\n          <Menu.Separator />\n          <Menu.Item href=\"#\">\n            <IconHeadphones />\n            Contact Support\n          </Menu.Item>\n          <Menu.Separator />\n          <Menu.Item>\n            <IconLogout />\n            Log out\n          </Menu.Item>\n        </Menu.Content>\n      </Menu>\n    </>\n  )\n}\n",
-    "type": "docs"
-  },
-  "collections/menu-with-icon-demo": {
-    "component": "@/components/docs/collections/menu-with-icon-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport {\n  IconCommandRegular,\n  IconDashboard,\n  IconDeviceDesktop,\n  IconHeadphones,\n  IconLogout,\n  IconMoon,\n  IconSettings,\n  IconSun\n} from 'justd-icons'\nimport { useTheme } from 'next-themes'\nimport { Avatar, Menu } from 'ui'\n\nexport default function MenuWithIconDemo() {\n  const { resolvedTheme, setTheme } = useTheme()\n  return (\n    <Menu>\n      <Menu.Trigger>\n        <Avatar className=\"size-10\" src=\"https://github.com/irsyadadl.png\" />\n      </Menu.Trigger>\n      <Menu.Content placement=\"bottom\" showArrow className=\"sm:min-w-64\">\n        <Menu.Section>\n          <Menu.Header separator>\n            <span className=\"block\">Irsyad A. Panjaitan</span>\n            <span className=\"font-normal text-muted-fg\">@irsyadadl</span>\n          </Menu.Header>\n        </Menu.Section>\n\n        <Menu.Item href=\"#dashboard\">\n          <IconDashboard />\n          Dashboard\n        </Menu.Item>\n        <Menu.Item href=\"#settings\">\n          <IconSettings />\n          Settings\n        </Menu.Item>\n        <Menu.Separator />\n        <Menu.Item>\n          <IconCommandRegular />\n          Command Menu\n        </Menu.Item>\n        <Menu.Submenu>\n          <Menu.Item>\n            {resolvedTheme === 'light' ? (\n              <IconSun />\n            ) : resolvedTheme === 'dark' ? (\n              <IconMoon />\n            ) : (\n              <IconDeviceDesktop />\n            )}\n            Switch theme\n          </Menu.Item>\n          <Menu.Content>\n            <Menu.Item onAction={() => setTheme('system')}>\n              <IconDeviceDesktop /> System\n            </Menu.Item>\n            <Menu.Item onAction={() => setTheme('dark')}>\n              <IconMoon /> Dark\n            </Menu.Item>\n            <Menu.Item onAction={() => setTheme('light')}>\n              <IconSun /> Light\n            </Menu.Item>\n          </Menu.Content>\n        </Menu.Submenu>\n        <Menu.Separator />\n        <Menu.Item href=\"#contact-s\">\n          <IconHeadphones />\n          Contact Support\n        </Menu.Item>\n        <Menu.Separator />\n        <Menu.Item href=\"#logout\">\n          <IconLogout />\n          Log out\n        </Menu.Item>\n      </Menu.Content>\n    </Menu>\n  )\n}\n",
-    "type": "docs"
-  },
-  "collections/list-box-section-demo": {
-    "component": "@/components/docs/collections/list-box-section-demo",
-    "raw": "'use client'\n\nimport { ListBox } from 'ui'\n\nexport default function ListBoxSectionDemo() {\n  return (\n    <ListBox items={bands} aria-label=\"Bands\" selectionMode=\"multiple\">\n      {(item) => (\n        <ListBox.Section items={item.albums} title={item.name} id={item.id}>\n          {(album) => <ListBox.Item key={album.id}>{album.name}</ListBox.Item>}\n        </ListBox.Section>\n      )}\n    </ListBox>\n  )\n}\n\nconst bands = [\n  {\n    id: 1,\n    name: 'The Beatles',\n    albums: [\n      {\n        id: 101,\n        name: 'Abbey Road'\n      },\n      {\n        id: 102,\n        name: \"Sgt. Pepper's Lonely Hearts Club Band\"\n      },\n      {\n        id: 103,\n        name: 'Revolver'\n      }\n    ]\n  },\n  {\n    id: 2,\n    name: 'Led Zeppelin',\n    albums: [\n      {\n        id: 201,\n        name: 'Led Zeppelin IV'\n      },\n      {\n        id: 202,\n        name: 'Physical Graffiti'\n      },\n      {\n        id: 203,\n        name: 'Houses of the Holy'\n      },\n      {\n        id: 204,\n        name: 'Led Zeppelin II'\n      }\n    ]\n  },\n  {\n    id: 3,\n    name: 'Pink Floyd',\n    albums: [\n      {\n        id: 301,\n        name: 'The Dark Side of the Moon'\n      },\n      {\n        id: 302,\n        name: 'The Wall'\n      },\n      {\n        id: 303,\n        name: 'Wish You Were Here'\n      },\n      {\n        id: 304,\n        name: 'Animals'\n      },\n      {\n        id: 305,\n        name: 'Meddle'\n      }\n    ]\n  },\n  {\n    id: 4,\n    name: 'Queen',\n    albums: [\n      {\n        id: 401,\n        name: 'A Night at the Opera'\n      },\n      {\n        id: 402,\n        name: 'News of the World'\n      },\n      {\n        id: 403,\n        name: 'Sheer Heart Attack'\n      },\n      {\n        id: 404,\n        name: 'The Game'\n      },\n      {\n        id: 405,\n        name: 'Jazz'\n      },\n      {\n        id: 406,\n        name: 'Queen II'\n      }\n    ]\n  },\n  {\n    id: 5,\n    name: 'The Rolling Stones',\n    albums: [\n      {\n        id: 501,\n        name: 'Let It Bleed'\n      },\n      {\n        id: 502,\n        name: 'Sticky Fingers'\n      },\n      {\n        id: 503,\n        name: 'Exile on Main St.'\n      },\n      {\n        id: 504,\n        name: 'Beggars Banquet'\n      },\n      {\n        id: 505,\n        name: 'Some Girls'\n      },\n      {\n        id: 506,\n        name: 'Tattoo You'\n      }\n    ]\n  },\n  {\n    id: 6,\n    name: 'Nirvana',\n    albums: [\n      {\n        id: 601,\n        name: 'Nevermind'\n      },\n      {\n        id: 602,\n        name: 'In Utero'\n      },\n      {\n        id: 603,\n        name: 'Bleach'\n      }\n    ]\n  },\n  {\n    id: 7,\n    name: 'The Doors',\n    albums: [\n      {\n        id: 701,\n        name: 'The Doors'\n      },\n      {\n        id: 702,\n        name: 'L.A. Woman'\n      },\n      {\n        id: 703,\n        name: 'Strange Days'\n      },\n      {\n        id: 704,\n        name: 'Morrison Hotel'\n      }\n    ]\n  },\n  {\n    id: 8,\n    name: 'Radiohead',\n    albums: [\n      {\n        id: 801,\n        name: 'OK Computer'\n      },\n      {\n        id: 802,\n        name: 'Kid A'\n      },\n      {\n        id: 803,\n        name: 'The Bends'\n      },\n      {\n        id: 804,\n        name: 'In Rainbows'\n      }\n    ]\n  },\n  {\n    id: 9,\n    name: 'AC/DC',\n    albums: [\n      {\n        id: 901,\n        name: 'Back in Black'\n      },\n      {\n        id: 902,\n        name: 'Highway to Hell'\n      },\n      {\n        id: 903,\n        name: 'Let There Be Rock'\n      }\n    ]\n  },\n  {\n    id: 10,\n    name: 'The Who',\n    albums: [\n      {\n        id: 1001,\n        name: \"Who's Next\"\n      },\n      {\n        id: 1002,\n        name: 'Tommy'\n      },\n      {\n        id: 1003,\n        name: 'Quadrophenia'\n      },\n      {\n        id: 1004,\n        name: 'My Generation'\n      },\n      {\n        id: 1005,\n        name: 'The Who Sell Out'\n      }\n    ]\n  }\n]\n",
-    "type": "docs"
-  },
-  "collections/list-box-rearrange-demo": {
-    "component": "@/components/docs/collections/list-box-rearrange-demo",
-    "raw": "'use client'\n\nimport { useDragAndDrop } from 'react-aria-components'\nimport { useListData } from 'react-stately'\nimport { ListBox } from 'ui'\n\nexport default function ListBoxRearrangeDemo() {\n  const list = useListData({\n    initialItems: [\n      { id: '1', name: 'Nirvana' },\n      { id: '2', name: 'Radiohead' },\n      { id: '3', name: 'Foo Fighters' },\n      { id: '4', name: 'Arctic Monkeys' },\n      { id: '5', name: 'The Strokes' }\n    ]\n  })\n\n  const { dragAndDropHooks } = useDragAndDrop({\n    getItems: (keys) => [...keys].map((key) => ({ 'text/plain': list.getItem(key).name })),\n    onReorder(e) {\n      if (e.target.dropPosition === 'before') {\n        list.moveBefore(e.target.key, e.keys)\n      } else if (e.target.dropPosition === 'after') {\n        list.moveAfter(e.target.key, e.keys)\n      }\n    }\n  })\n\n  return (\n    <ListBox\n      items={list.items}\n      aria-label=\"Bands\"\n      selectionMode=\"multiple\"\n      dragAndDropHooks={dragAndDropHooks}\n    >\n      {(item) => <ListBox.Item key={item.id}>{item.name}</ListBox.Item>}\n    </ListBox>\n  )\n}\n",
-    "type": "docs"
-  },
-  "collections/table-sorting-demo": {
-    "component": "@/components/docs/collections/table-sorting-demo",
-    "raw": "'use client'\n\nimport { useAsyncList } from '@react-stately/data'\nimport { IconLoader } from 'justd-icons'\nimport { Card, Table } from 'ui'\n\ninterface Character {\n  title: string\n  director: number\n  producer: number\n  release_date: number\n}\n\nexport default function TableSortingDemo() {\n  const list = useAsyncList<Character>({\n    async load({ signal }) {\n      const res = await fetch(`https://swapi.py4e.com/api/films`, {\n        signal\n      })\n      const json = await res.json()\n      return {\n        items: json.results\n      }\n    },\n    async sort({ items, sortDescriptor }) {\n      return {\n        items: items.sort((a, b) => {\n          // @ts-ignore\n          const first = a[sortDescriptor.column]\n          // @ts-ignore\n          const second = b[sortDescriptor.column]\n          let cmp = (parseInt(first) || first) < (parseInt(second) || second) ? -1 : 1\n          if (sortDescriptor.direction === 'descending') {\n            cmp *= -1\n          }\n          return cmp\n        })\n      }\n    }\n  })\n  return (\n    <Card>\n      <Table\n        aria-label=\"Movies\"\n        selectionMode=\"multiple\"\n        sortDescriptor={list.sortDescriptor}\n        onSortChange={list.sort}\n      >\n        <Table.Header>\n          <Table.Column id=\"title\" isRowHeader allowsSorting>\n            Title\n          </Table.Column>\n          <Table.Column id=\"director\" allowsSorting>\n            Director\n          </Table.Column>\n          <Table.Column id=\"producer\" allowsSorting>\n            Producer\n          </Table.Column>\n          <Table.Column id=\"release_date\" allowsSorting>\n            Release Date\n          </Table.Column>\n        </Table.Header>\n        <Table.Body\n          items={list.items}\n          renderEmptyState={() => (\n            <div className=\"grid place-content-center p-10\">\n              <IconLoader className=\"animate-spin\" />\n            </div>\n          )}\n        >\n          {(item) => (\n            <Table.Row id={item.title}>\n              <Table.Cell>{item.title}</Table.Cell>\n              <Table.Cell>{item.director}</Table.Cell>\n              <Table.Cell>{item.producer}</Table.Cell>\n              <Table.Cell>{item.release_date}</Table.Cell>\n            </Table.Row>\n          )}\n        </Table.Body>\n      </Table>\n    </Card>\n  )\n}\n",
-    "type": "docs"
-  },
-  "collections/tag-group-shape-demo": {
-    "component": "@/components/docs/collections/tag-group-shape-demo",
-    "raw": "'use client'\n\nimport { Tag } from 'ui'\n\nconst carModels = [\n  { id: '1', name: 'Tesla Model S', available: true },\n  { id: '2', name: 'Ford Mustang', available: false },\n  { id: '3', name: 'Chevrolet Camaro', available: true },\n  { id: '4', name: 'BMW M3', available: false },\n  { id: '5', name: 'Audi R8', available: true }\n]\n\nexport default function TagGroupIntentDemo() {\n  return (\n    <div className=\"space-y-6 max-w-sm\">\n      <Tag.Group shape=\"square\" intent=\"danger\" label=\"Car Models\" selectionMode=\"multiple\">\n        <Tag.List items={carModels}>{(item) => <Tag.Item>{item.name}</Tag.Item>}</Tag.List>\n      </Tag.Group>\n      <Tag.Group shape=\"circle\" intent=\"warning\" label=\"Car Models\" selectionMode=\"multiple\">\n        <Tag.List items={carModels}>{(item) => <Tag.Item>{item.name}</Tag.Item>}</Tag.List>\n      </Tag.Group>\n    </div>\n  )\n}\n",
-    "type": "docs"
-  },
-  "collections/table-bulk-demo": {
-    "component": "@/components/docs/collections/table-bulk-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport type { Selection } from 'react-aria-components'\nimport { Card, Description, Table } from 'ui'\n\nexport default function TableBulkDemo() {\n  const [selectedKeys, setSelectedKeys] = React.useState<Selection>(new Set())\n  return (\n    <>\n      <Card>\n        <Table\n          aria-label=\"Books\"\n          selectionMode=\"multiple\"\n          selectedKeys={selectedKeys}\n          onSelectionChange={setSelectedKeys}\n        >\n          <Table.Header>\n            <Table.Column>#</Table.Column>\n            <Table.Column isRowHeader>Title</Table.Column>\n            <Table.Column>Author</Table.Column>\n            <Table.Column>Genre</Table.Column>\n            <Table.Column>Published</Table.Column>\n          </Table.Header>\n          <Table.Body items={books}>\n            {(item) => (\n              <Table.Row>\n                <Table.Cell>{item.id}</Table.Cell>\n                <Table.Cell>{item.title}</Table.Cell>\n                <Table.Cell>{item.author}</Table.Cell>\n                <Table.Cell>{item.genre}</Table.Cell>\n                <Table.Cell>{item.publishedYear}</Table.Cell>\n              </Table.Row>\n            )}\n          </Table.Body>\n        </Table>\n      </Card>\n      <Description className=\"block mt-2 [&>strong]:text-fg text-muted-fg\">\n        {Array.from(selectedKeys).length > 0 ? (\n          <>\n            You have selected: <strong>{Array.from(selectedKeys).join(', ')}</strong>\n          </>\n        ) : (\n          'You have not selected anything.'\n        )}\n      </Description>\n    </>\n  )\n}\n\nexport const books = [\n  {\n    id: '1',\n    title: 'To Kill a Mockingbird',\n    author: 'Harper Lee',\n    genre: 'Fiction',\n    publishedYear: 1960\n  },\n  { id: '2', title: '1984', author: 'George Orwell', genre: 'Dystopian', publishedYear: 1949 },\n  {\n    id: '3',\n    title: 'The Great Gatsby',\n    author: 'F. Scott Fitzgerald',\n    genre: 'Fiction',\n    publishedYear: 1925\n  },\n  {\n    id: '4',\n    title: 'The Catcher in the Rye',\n    author: 'J.D. Salinger',\n    genre: 'Fiction',\n    publishedYear: 1951\n  },\n  {\n    id: '5',\n    title: 'Pride and Prejudice',\n    author: 'Jane Austen',\n    genre: 'Romance',\n    publishedYear: 1813\n  },\n  {\n    id: '6',\n    title: 'The Lord of the Rings',\n    author: 'J.R.R. Tolkien',\n    genre: 'Fantasy',\n    publishedYear: 1954\n  },\n  {\n    id: '7',\n    title: \"Harry Potter and the Sorcerer's Stone\",\n    author: 'J.K. Rowling',\n    genre: 'Fantasy',\n    publishedYear: 1997\n  }\n]\n",
-    "type": "docs"
-  },
-  "collections/command-basic-demo": {
-    "component": "@/components/docs/collections/command-basic-demo",
-    "raw": "'use client'\n\nimport React, { useState } from 'react'\n\nexport default function CommandBasicDemo() {\n  const [open, setOpen] = useState(false)\n  React.useEffect(() => {\n    const down = (e: KeyboardEvent) => {\n      if (e.key === 'e') {\n        e.preventDefault()\n        setOpen((open: boolean) => !open)\n      }\n    }\n\n    document.addEventListener('keydown', down)\n\n    return () => document.removeEventListener('keydown', down)\n  }, [])\n  return <>{/*  */}</>\n}\n",
-    "type": "docs"
-  },
-  "collections/list-box-controlled-demo": {
-    "component": "@/components/docs/collections/list-box-controlled-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport type { Selection } from 'react-aria-components'\nimport { Description, ListBox } from 'ui'\n\nexport default function ListBoxControlledDemo() {\n  const [selected, setSelected] = React.useState<Selection>(new Set(['2']))\n  return (\n    <>\n      <ListBox\n        selectedKeys={selected}\n        onSelectionChange={setSelected}\n        items={fruits}\n        selectionMode=\"single\"\n        aria-label=\"Fruits\"\n      >\n        {(fruit) => (\n          <ListBox.Item id={fruit.id} textValue={fruit.name}>\n            {fruit.name}\n          </ListBox.Item>\n        )}\n      </ListBox>\n\n      {selected && <Description className=\"mt-4 block\">Selected: {selected}</Description>}\n    </>\n  )\n}\n\nconst fruits = [\n  {\n    id: 1,\n    name: 'Apple'\n  },\n  {\n    id: 2,\n    name: 'Banana'\n  },\n  {\n    id: 3,\n    name: 'Orange'\n  },\n  {\n    id: 4,\n    name: 'Strawberry'\n  },\n  {\n    id: 5,\n    name: 'Grapes'\n  },\n  {\n    id: 6,\n    name: 'Mango'\n  },\n  {\n    id: 7,\n    name: 'Pineapple'\n  }\n]\n",
-    "type": "docs"
-  },
-  "collections/grid-list-render-empty-state-demo": {
-    "component": "@/components/docs/collections/grid-list-render-empty-state-demo",
-    "raw": "'use client'\n\nimport { GridList } from 'ui'\n\nexport default function GridListRenderEmptyStateDemo() {\n  return (\n    <GridList\n      items={items}\n      aria-label=\"Select items\"\n      selectionMode=\"multiple\"\n      className=\"min-w-64\"\n      renderEmptyState={() => <GridList.EmptyState>No bands selected</GridList.EmptyState>}\n    />\n  )\n}\n\nconst items: Iterable<any> | undefined = []\n",
-    "type": "docs"
-  },
-  "collections/tag-group-controlled-demo": {
-    "component": "@/components/docs/collections/tag-group-controlled-demo",
-    "raw": "import React from 'react'\n\nimport type { Selection } from 'react-aria-components'\nimport { Description, Tag } from 'ui'\n\nconst fruitList = [\n  { id: '1', name: 'Apple', available: false },\n  { id: '2', name: 'Banana', available: true },\n  { id: '3', name: 'Cherry', available: true },\n  { id: '4', name: 'Date', available: false }\n]\n\nexport default function TagGroupControlledDemo() {\n  const [selected, setSelected] = React.useState<Selection>(new Set([]))\n  return (\n    <div>\n      <Tag.Group selectionMode=\"multiple\" selectedKeys={selected} onSelectionChange={setSelected}>\n        <Tag.List items={fruitList}>{(item) => <Tag.Item>{item.name}</Tag.Item>}</Tag.List>\n      </Tag.Group>\n\n      <Description className=\"mt-2 block [&>strong]:text-fg text-muted-fg\">\n        You have selected: <strong>{Array.from(selected).join(', ')}</strong>\n      </Description>\n    </div>\n  )\n}\n",
-    "type": "docs"
-  },
-  "collections/menu-item-details-demo": {
-    "component": "@/components/docs/collections/menu-item-details-demo",
-    "raw": "import { Button, Menu } from 'ui'\n\nexport default function MenuItemDetailsDemo() {\n  return (\n    <Menu>\n      <Button appearance=\"outline\">Open</Button>\n      <Menu.Content placement=\"bottom\" items={roles}>\n        {(item) => (\n          <Menu.Item id={item.id} textValue={item.name}>\n            <Menu.ItemDetails label={item.name} description={item.description} />\n          </Menu.Item>\n        )}\n      </Menu.Content>\n    </Menu>\n  )\n}\n\nconst roles = [\n  { id: 1, name: 'Admin', description: 'Has full access to all resources' },\n  { id: 2, name: 'Editor', description: 'Can edit content but has limited access to settings' },\n  { id: 3, name: 'Viewer', description: 'Can view content but cannot make changes' },\n  { id: 4, name: 'Contributor', description: 'Can contribute content for review' },\n  { id: 5, name: 'Guest', description: 'Limited access, mostly for viewing purposes' }\n]\n",
-    "type": "docs"
-  },
-  "collections/tag-group-with-remove-demo": {
-    "component": "@/components/docs/collections/tag-group-with-remove-demo",
-    "raw": "'use client'\n\nimport { useListData } from 'react-stately'\nimport { Tag } from 'ui'\n\nexport default function TagGroupWithRemoveDemo() {\n  const list = useListData({\n    initialItems: [\n      { id: '1', name: 'Ferrari', available: true },\n      { id: '2', name: 'Lamborghini', available: false },\n      { id: '3', name: 'Porsche', available: true },\n      { id: '4', name: 'Bugatti', available: false },\n      { id: '5', name: 'McLaren', available: true },\n      { id: '6', name: 'Aston Martin', available: true },\n      { id: '7', name: 'Bentley', available: false },\n      { id: '8', name: 'Rolls-Royce', available: true },\n      { id: '9', name: 'Maserati', available: false },\n      { id: '10', name: 'Jaguar', available: true }\n    ]\n  })\n\n  return (\n    <Tag.Group\n      selectionMode=\"multiple\"\n      className=\"max-w-sm\"\n      onRemove={(keys) => list.remove(...keys)}\n    >\n      <Tag.List items={list.items}>{(item) => <Tag.Item>{item.name}</Tag.Item>}</Tag.List>\n    </Tag.Group>\n  )\n}\n",
-    "type": "docs"
-  },
-  "collections/grid-list-controlled-demo": {
-    "component": "@/components/docs/collections/grid-list-controlled-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport type { Selection } from 'react-aria-components'\nimport { Description, GridList } from 'ui'\n\nexport default function GridListControlledDemo() {\n  const [selectedKeys, setSelectedKeys] = React.useState<Selection>(new Set([]))\n  return (\n    <div>\n      <GridList\n        selectedKeys={selectedKeys}\n        onSelectionChange={setSelectedKeys}\n        items={items}\n        aria-label=\"Select items\"\n        selectionMode=\"multiple\"\n        className=\"min-w-64\"\n      >\n        {(item) => <GridList.Item id={item.id}>{item.name}</GridList.Item>}\n      </GridList>\n      <Description className=\"mt-2 block [&>strong]:text-fg text-muted-fg\">\n        You have selected: <strong>{Array.from(selectedKeys).join(', ')}</strong>\n      </Description>\n    </div>\n  )\n}\n\nconst items = [\n  { id: '1', name: 'The Beatles' },\n  { id: '2', name: 'Led Zeppelin' },\n  { id: '3', name: 'Pink Floyd' },\n  { id: '4', name: 'Queen' },\n  { id: '5', name: 'The Rolling Stones' }\n]\n",
-    "type": "docs"
-  },
-  "collections/menu-sub-demo": {
-    "component": "@/components/docs/collections/menu-sub-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { buttonStyles, Menu } from 'ui'\n\nexport default function MenuSubDemo() {\n  return (\n    <Menu>\n      <Menu.Trigger className={buttonStyles({ appearance: 'outline' })}>Open</Menu.Trigger>\n      <Menu.Content placement=\"bottom\" className=\"sm:min-w-48\">\n        <Menu.Item>Dashboard</Menu.Item>\n        <Menu.Item>Reports</Menu.Item>\n        <Menu.Separator />\n        <Menu.Submenu>\n          <Menu.Item>Settings</Menu.Item>\n          <Menu.Content>\n            <Menu.Item>General</Menu.Item>\n            <Menu.Item>Security</Menu.Item>\n            <Menu.Item>Privacy</Menu.Item>\n            <Menu.Item>Data Sharing</Menu.Item>\n          </Menu.Content>\n        </Menu.Submenu>\n        <Menu.Item>Help</Menu.Item>\n      </Menu.Content>\n    </Menu>\n  )\n}\n",
-    "type": "docs"
-  },
-  "collections/menu-basic-demo": {
-    "component": "@/components/docs/collections/menu-basic-demo",
-    "raw": "'use client'\n\nimport { Menu } from 'ui'\n\nexport default function MenuBasicDemo() {\n  return (\n    <Menu>\n      <Menu.Trigger>Open</Menu.Trigger>\n      <Menu.Content placement=\"bottom\">\n        <Menu.Item>Inbox</Menu.Item>\n        <Menu.Item>Sent</Menu.Item>\n        <Menu.Item>New Message</Menu.Item>\n      </Menu.Content>\n    </Menu>\n  )\n}\n",
-    "type": "docs"
-  },
-  "collections/choicebox-columns-demo": {
-    "component": "@/components/docs/collections/choicebox-columns-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { Choicebox } from 'ui'\n\nexport default function ChoiceboxColumnsDemo() {\n  return (\n    <Choicebox\n      aria-label=\"Select prices\"\n      gap={2}\n      columns={3}\n      selectionMode=\"multiple\"\n      items={prices}\n    >\n      {(item) => <Choicebox.Item {...item} />}\n    </Choicebox>\n  )\n}\n\nconst prices = [\n  { id: 1, title: 'Basic', description: 'Essentials, get started' },\n  { id: 2, title: 'Standard', description: 'More features, support' },\n  { id: 3, title: 'Premium', description: 'Advanced, growing needs' },\n  { id: 4, title: 'Deluxe', description: 'Top-tier, maximum performance' },\n  { id: 5, title: 'Ultimate', description: 'All-inclusive, every feature' },\n  { id: 6, title: 'Enterprise', description: 'Custom, large-scale operations' }\n]\n",
-    "type": "docs"
-  },
-  "collections/grid-list-disabled-demo": {
-    "component": "@/components/docs/collections/grid-list-disabled-demo",
-    "raw": "'use client'\n\nimport { GridList } from 'ui'\n\nexport default function GridListDisabledDemo() {\n  return (\n    <GridList\n      items={items}\n      aria-label=\"Select your favorite bands\"\n      selectionMode=\"multiple\"\n      className=\"min-w-64\"\n    >\n      {(item) => (\n        <GridList.Item isDisabled={[2, 5].includes(Number(item.id))} id={item.id}>\n          {item.name}\n        </GridList.Item>\n      )}\n    </GridList>\n  )\n}\n\nconst items = [\n  { id: '1', name: 'The Beatles' },\n  { id: '2', name: 'Led Zeppelin' },\n  { id: '3', name: 'Pink Floyd' },\n  { id: '4', name: 'Queen' },\n  { id: '5', name: 'The Rolling Stones' }\n]\n",
-    "type": "docs"
-  },
-  "collections/list-box-disabled-demo": {
-    "component": "@/components/docs/collections/list-box-disabled-demo",
-    "raw": "'use client'\n\nimport { ListBox } from 'ui'\n\nexport default function ListBoxControlledDemo() {\n  return (\n    <>\n      <ListBox\n        disabledKeys={[2, 3, 4, 5]}\n        items={fruits}\n        aria-label=\"Fruits\"\n        selectionMode=\"multiple\"\n      >\n        {(fruit) => <ListBox.Item id={fruit.id}>{fruit.name}</ListBox.Item>}\n      </ListBox>\n    </>\n  )\n}\n\nconst fruits = [\n  {\n    id: 1,\n    name: 'Apple'\n  },\n  {\n    id: 2,\n    name: 'Banana'\n  },\n  {\n    id: 3,\n    name: 'Orange'\n  },\n  {\n    id: 4,\n    name: 'Strawberry'\n  },\n  {\n    id: 5,\n    name: 'Grapes'\n  },\n  {\n    id: 6,\n    name: 'Mango'\n  },\n  {\n    id: 7,\n    name: 'Pineapple'\n  }\n]\n",
-    "type": "docs"
-  },
-  "collections/table-drag-demo": {
-    "component": "@/components/docs/collections/table-drag-demo",
-    "raw": "'use client'\n\nimport { IconStarFill } from 'justd-icons'\nimport { useDragAndDrop } from 'react-aria-components'\nimport { useListData } from 'react-stately'\nimport { Card, Table } from 'ui'\n\nexport default function TableDragDemo() {\n  const list = useListData({\n    initialItems: movies\n  })\n\n  const { dragAndDropHooks } = useDragAndDrop({\n    getItems: (keys) =>\n      [...keys].map((key) => ({\n        'text/plain': list.getItem(key).name\n      })),\n    onReorder(e) {\n      if (e.target.dropPosition === 'before') {\n        list.moveBefore(e.target.key, e.keys)\n      } else if (e.target.dropPosition === 'after') {\n        list.moveAfter(e.target.key, e.keys)\n      }\n    }\n  })\n  return (\n    <Card>\n      <Table aria-label=\"Movies\" selectionMode=\"multiple\" dragAndDropHooks={dragAndDropHooks}>\n        <Table.Header>\n          <Table.Column>#</Table.Column>\n          <Table.Column isRowHeader>Name</Table.Column>\n          <Table.Column>Genre</Table.Column>\n          <Table.Column>Release</Table.Column>\n          <Table.Column>Rating</Table.Column>\n        </Table.Header>\n        <Table.Body items={list.items}>\n          {(item) => (\n            <Table.Row>\n              <Table.Cell>{item.id}</Table.Cell>\n              <Table.Cell>{item.name}</Table.Cell>\n              <Table.Cell>{item.genre}</Table.Cell>\n              <Table.Cell>{item.releaseYear}</Table.Cell>\n              <Table.Cell>\n                <div className=\"flex items-center gap-x-2\">\n                  <IconStarFill className=\"text-warning size-3.5\" /> <span>{item.rating}</span>\n                </div>\n              </Table.Cell>\n            </Table.Row>\n          )}\n        </Table.Body>\n      </Table>\n    </Card>\n  )\n}\n\nconst movies = [\n  {\n    id: '1',\n    name: 'The Matrix',\n    genre: 'Sci-Fi',\n    releaseYear: 1999,\n    director: 'Wachowskis',\n    rating: 8.7\n  },\n  {\n    id: '2',\n    name: 'Inception',\n    genre: 'Sci-Fi',\n    releaseYear: 2010,\n    director: 'Christopher Nolan',\n    rating: 8.8\n  },\n  {\n    id: '3',\n    name: 'The Godfather',\n    genre: 'Crime',\n    releaseYear: 1972,\n    director: 'Francis Ford Coppola',\n    rating: 9.2\n  },\n  {\n    id: '4',\n    name: 'Pulp Fiction',\n    genre: 'Crime',\n    releaseYear: 1994,\n    director: 'Quentin Tarantino',\n    rating: 8.9\n  },\n  {\n    id: '5',\n    name: 'The Dark Knight',\n    genre: 'Action',\n    releaseYear: 2008,\n    director: 'Christopher Nolan',\n    rating: 9.0\n  },\n  {\n    id: '6',\n    name: 'Fight Club',\n    genre: 'Drama',\n    releaseYear: 1999,\n    director: 'David Fincher',\n    rating: 8.8\n  },\n  {\n    id: '7',\n    name: 'Forrest Gump',\n    genre: 'Drama',\n    releaseYear: 1994,\n    director: 'Robert Zemeckis',\n    rating: 8.8\n  }\n]\n",
-    "type": "docs"
-  },
-  "collections/tag-group-href-demo": {
-    "component": "@/components/docs/collections/tag-group-href-demo",
-    "raw": "'use client'\n\nimport { Tag } from 'ui'\n\nconst articles = [\n  { name: 'React Tutorial', url: '#' },\n  { name: 'TypeScript Handbook', url: '#' },\n  { name: 'JavaScript Guide', url: '#' }\n]\n\nexport default function TagGroupControlledDemo() {\n  return (\n    <Tag.Group>\n      <Tag.List items={articles}>\n        {(item) => (\n          <Tag.Item id={item.name} href={item.url}>\n            {item.name}\n          </Tag.Item>\n        )}\n      </Tag.List>\n    </Tag.Group>\n  )\n}\n",
-    "type": "docs"
-  },
-  "collections/menu-disabled-demo": {
-    "component": "@/components/docs/collections/menu-disabled-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { Menu } from 'ui'\n\nexport default function MenuDisabledDemo() {\n  return (\n    <Menu>\n      <Menu.Trigger>Open</Menu.Trigger>\n      <Menu.Content className=\"min-w-48\" placement=\"bottom\">\n        <Menu.Item id=\"view\">View</Menu.Item>\n        <Menu.Item id=\"edit\">Edit</Menu.Item>\n        <Menu.Item id=\"gsu\" isDisabled>\n          Generate Short URL\n        </Menu.Item>\n      </Menu.Content>\n    </Menu>\n  )\n}\n",
-    "type": "docs"
-  },
-  "collections/choicebox-demo": {
-    "component": "@/components/docs/collections/choicebox-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { Choicebox } from 'ui'\n\nconst packages = [\n  {\n    id: 1,\n    title: 'Small',\n    description: 'Perfect for beginners. Basic resources for light projects.'\n  },\n  {\n    id: 2,\n    title: 'Medium',\n    description: 'Great for growing sites. More power and storage.'\n  },\n  {\n    id: 3,\n    title: 'Large',\n    description: 'Ideal for busy sites. Lots of resources and support.'\n  },\n  {\n    id: 4,\n    title: 'Extra Large',\n    description: 'Max power for demanding applications. Top-tier performance.'\n  }\n]\n\nexport default function ChoiceboxDemo() {\n  return (\n    <Choicebox aria-label=\"Select items\" selectionMode=\"multiple\">\n      <Choicebox.Item title=\"Basic\" description=\"Just the essentials to get started.\" />\n      <Choicebox.Item title=\"Standard\" description=\"A step up with more features and support.\" />\n      <Choicebox.Item title=\"Premium\" description=\"Advanced options for growing needs.\" />\n      <Choicebox.Item title=\"Deluxe\" description=\"Top-tier features for maximum performance.\" />\n      <Choicebox.Item\n        title=\"Ultimate\"\n        description=\"All-inclusive plan with every feature available.\"\n      />\n      <Choicebox.Item\n        title=\"Enterprise\"\n        description=\"Custom solutions for large-scale operations.\"\n      />\n    </Choicebox>\n  )\n}\n",
-    "type": "docs"
-  },
-  "collections/tag-group-intent-demo": {
-    "component": "@/components/docs/collections/tag-group-intent-demo",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { useListData } from 'react-stately'\nimport { Tag } from 'ui'\n\nconst shoes = [\n  { id: '1', name: 'Nike', available: true },\n  { id: '2', name: 'Adidas', available: false },\n  { id: '3', name: 'Puma', available: true },\n  { id: '4', name: 'Reebok', available: true }\n]\n\nexport default function TagGroupIntentDemo() {\n  const shoesList = useListData({\n    initialItems: shoes\n  })\n  return (\n    <div className=\"space-y-2 max-w-sm\">\n      <Tag.Group\n        intent=\"primary\"\n        aria-label=\"Primary Intent\"\n        selectionMode=\"multiple\"\n        onRemove={(keys) => shoesList.remove(...keys)}\n      >\n        <Tag.List items={shoesList.items}>{(item) => <Tag.Item>{item.name}</Tag.Item>}</Tag.List>\n      </Tag.Group>\n      <Tag.Group\n        intent=\"secondary\"\n        aria-label=\"Secondary Intent\"\n        selectionMode=\"multiple\"\n        onRemove={(keys) => shoesList.remove(...keys)}\n      >\n        <Tag.List items={shoesList.items}>{(item) => <Tag.Item>{item.name}</Tag.Item>}</Tag.List>\n      </Tag.Group>\n      <Tag.Group\n        intent=\"success\"\n        aria-label=\"Success Intent\"\n        selectionMode=\"multiple\"\n        onRemove={(keys) => shoesList.remove(...keys)}\n      >\n        <Tag.List items={shoesList.items}>{(item) => <Tag.Item>{item.name}</Tag.Item>}</Tag.List>\n      </Tag.Group>\n      <Tag.Group\n        intent=\"warning\"\n        aria-label=\"Warning Intent\"\n        selectionMode=\"multiple\"\n        onRemove={(keys) => shoesList.remove(...keys)}\n      >\n        <Tag.List items={shoesList.items}>{(item) => <Tag.Item>{item.name}</Tag.Item>}</Tag.List>\n      </Tag.Group>\n      <Tag.Group\n        intent=\"danger\"\n        aria-label=\"Danger Intent\"\n        selectionMode=\"multiple\"\n        onRemove={(keys) => shoesList.remove(...keys)}\n      >\n        <Tag.List items={shoesList.items}>{(item) => <Tag.Item>{item.name}</Tag.Item>}</Tag.List>\n      </Tag.Group>\n    </div>\n  )\n}\n",
-    "type": "docs"
-  },
-  "collections/grid-list-drag-demo": {
-    "component": "@/components/docs/collections/grid-list-drag-demo",
-    "raw": "'use client'\n\nimport { useDragAndDrop } from 'react-aria-components'\nimport { useListData } from 'react-stately'\nimport { GridList } from 'ui'\n\nexport default function GridListDragDemo() {\n  const list = useListData({\n    initialItems: items\n  })\n  const { dragAndDropHooks } = useDragAndDrop({\n    getItems: (keys) => [...keys].map((key) => ({ 'text/plain': list.getItem(key).name })),\n    onReorder(e) {\n      if (e.target.dropPosition === 'before') {\n        list.moveBefore(e.target.key, e.keys)\n      } else if (e.target.dropPosition === 'after') {\n        list.moveAfter(e.target.key, e.keys)\n      }\n    }\n  })\n\n  return (\n    <>\n      <GridList\n        items={list.items}\n        aria-label=\"Droppable list\"\n        selectionMode=\"multiple\"\n        dragAndDropHooks={dragAndDropHooks}\n      >\n        {(item) => <GridList.Item id={item.id}>{item.name}</GridList.Item>}\n      </GridList>\n    </>\n  )\n}\n\nconst items = [\n  { id: 1, name: 'The Beatles' },\n  { id: 2, name: 'Led Zeppelin' },\n  { id: 3, name: 'Pink Floyd' },\n  { id: 4, name: 'Queen' },\n  { id: 5, name: 'The Rolling Stones' },\n  { id: 6, name: 'The Beach Boys' },\n  { id: 7, name: 'The Kinks' },\n  { id: 8, name: 'The Who' }\n]\n",
-    "type": "docs"
-  },
-  "collections/grid-list-demo": {
-    "component": "@/components/docs/collections/grid-list-demo",
-    "raw": "'use client'\n\nimport { GridList } from 'ui'\n\nexport default function GridListDemo() {\n  return (\n    <GridList items={items} aria-label=\"Select your favorite bands\" className=\"min-w-64\">\n      {(item) => <GridList.Item id={item.id}>{item.name}</GridList.Item>}\n    </GridList>\n  )\n}\n\nconst items = [\n  { id: '1', name: 'The Beatles' },\n  { id: '2', name: 'Led Zeppelin' },\n  { id: '3', name: 'Pink Floyd' },\n  { id: '4', name: 'Queen' },\n  { id: '5', name: 'The Rolling Stones' }\n]\n",
-    "type": "docs"
-  },
-  "media/avatar-size-demo": {
-    "component": "@/components/docs/media/avatar-size-demo",
-    "raw": "'use client'\n\nimport { Avatar } from 'ui'\n\nexport default function AvatarSizeDemo() {\n  return (\n    <div className=\"flex gap-4\">\n      <Avatar size=\"small\" src=\"https://github.com/irsyadadl.png\" />\n      <Avatar size=\"medium\" src=\"https://github.com/irsyadadl.png\" />\n      <Avatar size=\"large\" src=\"https://github.com/irsyadadl.png\" />\n    </div>\n  )\n}\n",
-    "type": "docs"
-  },
-  "media/carousel-demo": {
-    "component": "@/components/docs/media/carousel-demo",
-    "raw": "'use client'\n\nimport * as React from 'react'\n\nimport Image from 'next/image'\nimport { Carousel } from 'ui'\n\nexport default function CarouselDemo() {\n  return (\n    <Carousel className=\"w-full [&_.xrkr]:h-56 [&_.xrkr]:overflow-hidden [&_.xrkr]:flex [&_.xrkr]:flex-col max-w-xs\">\n      <Carousel.Content>\n        <Carousel.Item className=\"basis-1/2\">\n          <Image\n            className=\"rounded-xl\"\n            src=\"/slides/slide-1.jpg\"\n            alt=\"image 1\"\n            width={400}\n            height={300}\n          />\n        </Carousel.Item>\n        <Carousel.Item className=\"basis-1/2\">\n          <Image\n            className=\"rounded-xl\"\n            src=\"/slides/slide-2.jpg\"\n            alt=\"image 2\"\n            width={400}\n            height={300}\n          />\n        </Carousel.Item>\n        <Carousel.Item className=\"basis-1/2\">\n          <Image\n            className=\"rounded-xl\"\n            src=\"/slides/slide-3.jpg\"\n            alt=\"image 3\"\n            width={400}\n            height={300}\n          />\n        </Carousel.Item>\n        <Carousel.Item className=\"basis-1/2\">\n          <Image\n            className=\"rounded-xl\"\n            src=\"/slides/slide-4.jpg\"\n            alt=\"image 4\"\n            width={400}\n            height={300}\n          />\n        </Carousel.Item>\n        <Carousel.Item className=\"basis-1/2\">\n          <Image\n            className=\"rounded-xl\"\n            src=\"/slides/slide-5.jpg\"\n            alt=\"image 5\"\n            width={400}\n            height={300}\n          />\n        </Carousel.Item>\n        <Carousel.Item className=\"basis-1/2\">\n          <Image\n            className=\"rounded-xl\"\n            src=\"/slides/slide-6.jpg\"\n            alt=\"image 6\"\n            width={400}\n            height={300}\n          />\n        </Carousel.Item>\n        <Carousel.Item className=\"basis-1/2\">\n          <Image\n            className=\"rounded-xl\"\n            src=\"/slides/slide-7.jpg\"\n            alt=\"image 7\"\n            width={400}\n            height={300}\n          />\n        </Carousel.Item>\n      </Carousel.Content>\n\n      <Carousel.Handler>\n        <Carousel.Button slot=\"previous\" />\n        <Carousel.Button slot=\"next\" />\n      </Carousel.Handler>\n    </Carousel>\n  )\n}\n",
-    "type": "docs"
-  },
-  "media/avatar-initials-demo": {
-    "component": "@/components/docs/media/avatar-initials-demo",
-    "raw": "'use client'\n\nimport { Avatar } from 'ui'\n\nexport default function AvatarInitialsDemo() {\n  return <Avatar initials=\"IR\" />\n}\n",
-    "type": "docs"
-  },
-  "media/carousel-with-collection-demo": {
-    "component": "@/components/docs/media/carousel-with-collection-demo",
-    "raw": "'use client'\n\nimport * as React from 'react'\n\nimport Image from 'next/image'\nimport { Card, Carousel } from 'ui'\n\nexport default function CarouselWithCollectionDemo() {\n  return (\n    <Carousel className=\"w-full [&_.xrkr]:overflow-hidden [&_.xrkr]:flex [&_.xrkr]:flex-col max-w-xs\">\n      <Carousel.Content items={items}>\n        {(item) => (\n          <Carousel.Item id={item.id}>\n            <Card className=\"p-1\">\n              <Image\n                className=\"rounded-md h-40 object-center object-cover\"\n                src={`/slides/slide-${item.id}.jpg`}\n                alt=\"image 5\"\n                width={400}\n                height={300}\n              />\n              <Card.Header className=\"p-3\">\n                <Card.Title className=\"line-clamp-1 sm:text-lg\">{item.title}</Card.Title>\n                <Card.Description className=\"line-clamp-2\">{item.description}</Card.Description>\n              </Card.Header>\n            </Card>\n          </Carousel.Item>\n        )}\n      </Carousel.Content>\n\n      <Carousel.Handler>\n        <Carousel.Button slot=\"previous\" />\n        <Carousel.Button slot=\"next\" />\n      </Carousel.Handler>\n    </Carousel>\n  )\n}\n\nconst items = [\n  {\n    id: 1,\n    title: 'Vintage Leather Jacket',\n    description: 'Classic brown leather jacket, perfect for a stylish retro look.'\n  },\n  {\n    id: 2,\n    title: 'Wireless Bluetooth Headphones',\n    description: 'Experience high-quality sound with these comfortable, noise-canceling headphones.'\n  },\n  {\n    id: 3,\n    title: 'Organic Cotton T-Shirt',\n    description: 'Soft and eco-friendly t-shirt made from 100% organic cotton.'\n  },\n  {\n    id: 4,\n    title: 'Stainless Steel Water Bottle',\n    description: 'Keep your drinks cold or hot with this durable, insulated water bottle.'\n  },\n  {\n    id: 5,\n    title: 'Running Shoes',\n    description: 'Lightweight and comfortable shoes designed for optimal performance.'\n  },\n  {\n    id: 6,\n    title: 'Smartwatch',\n    description: 'Stay connected and track your fitness with this sleek smartwatch.'\n  },\n  {\n    id: 7,\n    title: 'Portable Charger',\n    description: 'Never run out of battery with this high-capacity portable charger.'\n  }\n]\n",
-    "type": "docs"
-  },
-  "media/carousel-api-demo": {
-    "component": "@/components/docs/media/carousel-api-demo",
-    "raw": "'use client'\n\nimport * as React from 'react'\n\nimport { Button } from 'react-aria-components'\nimport { twJoin } from 'tailwind-merge'\nimport { Card, Carousel, type CarouselApi } from 'ui'\n\nexport default function CarouselDApiDemo() {\n  const [api, setApi] = React.useState<CarouselApi>()\n  const [current, setCurrent] = React.useState(0)\n  const [count, setCount] = React.useState(0)\n\n  React.useEffect(() => {\n    if (!api) {\n      return\n    }\n\n    setCount(api.scrollSnapList().length)\n    setCurrent(api.selectedScrollSnap() + 1)\n    api.on('select', () => {\n      setCurrent(api.selectedScrollSnap() + 1)\n    })\n  }, [api])\n\n  const handleSelect = (index: number) => {\n    if (api) {\n      api.scrollTo(index)\n      setCurrent(index + 1)\n    }\n  }\n\n  return (\n    <Carousel setApi={setApi} className=\"w-full max-w-sm\">\n      <Carousel.Content items={Array.from({ length: 10 }, (_, id) => ({ id: id + 1 }))}>\n        {({ id }) => (\n          <Carousel.Item id={id}>\n            <Card>\n              <Card.Content className=\"flex aspect-square items-center justify-center p-6\">\n                <span className=\"text-4xl font-semibold\">{id}</span>\n              </Card.Content>\n            </Card>\n          </Carousel.Item>\n        )}\n      </Carousel.Content>\n      <div className=\"flex justify-between mt-4 items-center\">\n        <div className=\"py-2 gap-1 flex text-center text-sm text-muted-foreground\">\n          {Array.from({ length: 10 }).map((_, index) => (\n            <Button\n              className={twJoin(\n                'focus:outline-none transition rounded-xl',\n                current === index + 1\n                  ? 'w-5 h-3 transition-all bg-primary hover:bg-primary/80'\n                  : 'bg-fg/10 hover:bg-fg/15 w-3 h-3'\n              )}\n              aria-label={`Slide ${current} of ${count}`}\n              onPress={() => handleSelect(index)}\n              key={index}\n            />\n          ))}\n        </div>\n\n        <div className=\"space-x-2\">\n          <Carousel.Button slot=\"previous\" />\n          <Carousel.Button slot=\"next\" />\n        </div>\n      </div>\n    </Carousel>\n  )\n}\n",
-    "type": "docs"
-  },
-  "media/avatar-demo": {
-    "component": "@/components/docs/media/avatar-demo",
-    "raw": "'use client'\n\nimport AvatarGroupDemo from '@/components/docs/media/avatar-group-demo'\n\nexport default function AvatarDemo() {\n  return <AvatarGroupDemo />\n}\n",
-    "type": "docs"
-  },
-  "media/avatar-shape-demo": {
-    "component": "@/components/docs/media/avatar-shape-demo",
-    "raw": "'use client'\n\nimport { Avatar } from 'ui'\n\nexport default function AvatarShapeDemo() {\n  return (\n    <Avatar shape=\"square\" initials=\"IR\" alt=\"irsyadadl\" src=\"https://github.com/irsyadadl.png\" />\n  )\n}\n",
-    "type": "docs"
-  },
-  "media/carousel-options-demo": {
-    "component": "@/components/docs/media/carousel-options-demo",
-    "raw": "import * as React from 'react'\n\nimport { Card, Carousel } from 'ui'\n\nexport default function CarouselOptionsDemo() {\n  return (\n    <Carousel\n      opts={{\n        align: 'center',\n        loop: true\n      }}\n      className=\"w-full max-w-2xl\"\n    >\n      <Carousel.Content items={Array.from({ length: 16 }, (_, id) => ({ id: id + 1 }))}>\n        {({ id }) => (\n          <Carousel.Item id={id} className=\"basis-1/2 lg:basis-1/3\">\n            <Card className=\"flex aspect-square items-center justify-center\">\n              <Card.Title>{id}</Card.Title>\n            </Card>\n          </Carousel.Item>\n        )}\n      </Carousel.Content>\n\n      <Carousel.Handler>\n        <Carousel.Button slot=\"previous\" />\n        <Carousel.Button slot=\"next\" />\n      </Carousel.Handler>\n    </Carousel>\n  )\n}\n",
-    "type": "docs"
-  },
-  "media/avatar-group-demo": {
-    "component": "@/components/docs/media/avatar-group-demo",
-    "raw": "'use client'\n\nimport { Avatar, AvatarGroup } from 'ui'\n\nexport default function AvatarGroupDemo() {\n  return (\n    <AvatarGroup aria-label=\"avatar-group\">\n      <Avatar role=\"avatar-1 \" alt=\"image 1\" initials=\"IR\" src=\"https://i.pravatar.cc/150?img=61\" />\n      <Avatar role=\"avatar-2 \" alt=\"image 2\" initials=\"IR\" src=\"https://i.pravatar.cc/150?img=62\" />\n      <Avatar role=\"avatar-3 \" alt=\"image 3\" initials=\"IR\" src=\"https://i.pravatar.cc/150?img=63\" />\n      <Avatar role=\"avatar-4 \" alt=\"image 4\" initials=\"IR\" src=\"https://i.pravatar.cc/150?img=64\" />\n      <Avatar role=\"avatar-5 \" alt=\"image 5\" initials=\"IR\" src=\"https://i.pravatar.cc/150?img=65\" />\n    </AvatarGroup>\n  )\n}\n",
-    "type": "docs"
-  },
-  "media/avatar-fallback-demo": {
-    "component": "@/components/docs/media/avatar-fallback-demo",
-    "raw": "'use client'\n\nimport { Avatar } from 'ui'\n\nexport default function AvatarFallbackDemo() {\n  return <Avatar initials=\"IR\" src=\"https://github.com/irsyadadl.png\" />\n}\n",
-    "type": "docs"
-  },
-  "media/avatar-status-demo": {
-    "component": "@/components/docs/media/avatar-status-demo",
-    "raw": "import React from 'react'\n\nimport { Avatar } from 'ui'\n\nexport default function AvatarStatusDemo() {\n  return (\n    <div className=\"flex flex-col gap-6\">\n      <div className=\"flex justify-center gap-2\">\n        <Avatar status=\"online\" initials=\"IR\" src=\"https://i.pravatar.cc/150?img=58\" />\n        <Avatar\n          shape=\"square\"\n          status=\"online\"\n          initials=\"IR\"\n          src=\"https://i.pravatar.cc/150?img=57\"\n        />\n      </div>\n      <div className=\"flex justify-center gap-2\">\n        <Avatar status=\"online\" initials=\"IR\" src=\"https://i.pravatar.cc/150?img=59\" />\n        <Avatar status=\"offline\" initials=\"IR\" src=\"https://i.pravatar.cc/150?img=62\" />\n        <Avatar status=\"away\" initials=\"IR\" src=\"https://i.pravatar.cc/150?img=63\" />\n        <Avatar status=\"dnd\" initials=\"IR\" src=\"https://i.pravatar.cc/150?img=64\" />\n        <Avatar status=\"idle\" initials=\"IR\" src=\"https://i.pravatar.cc/150?img=60\" />\n      </div>\n    </div>\n  )\n}\n",
-    "type": "docs"
-  },
-  "media/carousel-autoplay-demo": {
-    "component": "@/components/docs/media/carousel-autoplay-demo",
-    "raw": "'use client'\n\nimport * as React from 'react'\n\nimport Autoplay from 'embla-carousel-autoplay'\nimport { Card, Carousel } from 'ui'\n\nexport default function CarouselAutoplayDemo() {\n  const plugin = React.useRef(Autoplay({ delay: 1000, stopOnInteraction: true }))\n\n  return (\n    <Carousel\n      onMouseEnter={plugin.current.stop}\n      onMouseLeave={plugin.current.reset}\n      plugins={[plugin.current as any]}\n      opts={{\n        loop: true,\n        align: 'center'\n      }}\n      className=\"w-full [&_.xrkr]:h-56 [&_.xrkr]:overflow-hidden [&_.xrkr]:flex [&_.xrkr]:flex-col max-w-xs\"\n    >\n      <Carousel.Content items={items}>\n        {(item) => (\n          <Carousel.Item id={item.id}>\n            <div className=\"p-1\">\n              <Card>\n                <div className=\"bg-fg/5 border-b flex-1 relative\" />\n                <Card.Header>\n                  <Card.Title className=\"line-clamp-1 sm:text-lg\">{item.title}</Card.Title>\n                  <Card.Description className=\"line-clamp-2\">{item.description}</Card.Description>\n                </Card.Header>\n              </Card>\n            </div>\n          </Carousel.Item>\n        )}\n      </Carousel.Content>\n\n      <Carousel.Handler>\n        <Carousel.Button slot=\"previous\" />\n        <Carousel.Button slot=\"next\" />\n      </Carousel.Handler>\n    </Carousel>\n  )\n}\n\nconst items = [\n  {\n    id: 1,\n    title: 'Vintage Leather Jacket',\n    description: 'Classic brown leather jacket, perfect for a stylish retro look.'\n  },\n  {\n    id: 2,\n    title: 'Wireless Bluetooth Headphones',\n    description: 'Experience high-quality sound with these comfortable, noise-canceling headphones.'\n  },\n  {\n    id: 3,\n    title: 'Organic Cotton T-Shirt',\n    description: 'Soft and eco-friendly t-shirt made from 100% organic cotton.'\n  },\n  {\n    id: 4,\n    title: 'Stainless Steel Water Bottle',\n    description: 'Keep your drinks cold or hot with this durable, insulated water bottle.'\n  },\n  {\n    id: 5,\n    title: 'Running Shoes',\n    description: 'Lightweight and comfortable shoes designed for optimal performance.'\n  },\n  {\n    id: 6,\n    title: 'Smartwatch',\n    description: 'Stay connected and track your fitness with this sleek smartwatch.'\n  },\n  {\n    id: 7,\n    title: 'Portable Charger',\n    description: 'Never run out of battery with this high-capacity portable charger.'\n  },\n  {\n    id: 8,\n    title: 'Noise-Canceling Earbuds',\n    description: 'Compact and powerful earbuds that block out unwanted noise.'\n  },\n  {\n    id: 9,\n    title: 'Yoga Mat',\n    description: 'Non-slip, cushioned yoga mat for a comfortable workout experience.'\n  },\n  {\n    id: 10,\n    title: 'LED Desk Lamp',\n    description: 'Bright and energy-efficient LED lamp with adjustable brightness.'\n  }\n]\n",
-    "type": "docs"
-  },
-  "media/carousel-orientation-demo": {
-    "component": "@/components/docs/media/carousel-orientation-demo",
-    "raw": "'use client'\n\nimport * as React from 'react'\n\nimport { Card, Carousel } from 'ui'\n\nexport default function CarouselOrientationDemo() {\n  return (\n    <Carousel orientation=\"vertical\" className=\"w-full relative max-w-xs\">\n      <Carousel.Content items={items} className=\"h-64 py-4 snap-y\">\n        {(item) => (\n          <Carousel.Item className=\"pt-1 basis-1/2 md:basis-1/3 snap-center\">\n            <Card>\n              <Card.Header>\n                <Card.Title>{item.title}</Card.Title>\n                <Card.Description>{item.description}</Card.Description>\n              </Card.Header>\n            </Card>\n          </Carousel.Item>\n        )}\n      </Carousel.Content>\n\n      <Carousel.Handler>\n        <Carousel.Button slot=\"previous\" />\n        <Carousel.Button slot=\"next\" />\n      </Carousel.Handler>\n    </Carousel>\n  )\n}\n\nconst items = [\n  {\n    id: 1,\n    title: 'Vintage Leather Jacket',\n    description: 'Classic brown leather jacket, perfect for a stylish retro look.'\n  },\n  {\n    id: 2,\n    title: 'Wireless Bluetooth Headphones',\n    description: 'Experience high-quality sound with these comfortable, noise-canceling headphones.'\n  },\n  {\n    id: 3,\n    title: 'Organic Cotton T-Shirt',\n    description: 'Soft and eco-friendly t-shirt made from 100% organic cotton.'\n  },\n  {\n    id: 4,\n    title: 'Stainless Steel Water Bottle',\n    description: 'Keep your drinks cold or hot with this durable, insulated water bottle.'\n  },\n  {\n    id: 5,\n    title: 'Running Shoes',\n    description: 'Lightweight and comfortable shoes designed for optimal performance.'\n  },\n  {\n    id: 6,\n    title: 'Smartwatch',\n    description: 'Stay connected and track your fitness with this sleek smartwatch.'\n  },\n  {\n    id: 7,\n    title: 'Portable Charger',\n    description: 'Never run out of battery with this high-capacity portable charger.'\n  },\n  {\n    id: 8,\n    title: 'Noise-Canceling Earbuds',\n    description: 'Compact and powerful earbuds that block out unwanted noise.'\n  },\n  {\n    id: 9,\n    title: 'Yoga Mat',\n    description: 'Non-slip, cushioned yoga mat for a comfortable workout experience.'\n  },\n  {\n    id: 10,\n    title: 'LED Desk Lamp',\n    description: 'Bright and energy-efficient LED lamp with adjustable brightness.'\n  }\n]\n",
-    "type": "docs"
-  },
-  "show-more": {
-    "component": "@/components/ui/show-more",
-    "raw": "'use client'\n\nimport { Text, ToggleButton } from 'react-aria-components'\nimport { tv } from 'tailwind-variants'\n\nimport { buttonStyles } from './button'\n\nconst showMoreStyles = tv({\n  base: 'text-sm leading-6 after:border-muted before:border-muted',\n  variants: {\n    orientation: {\n      vertical: 'mx-1 h-auto self-stretch',\n      horizontal: 'my-0.5 h-px w-full self-stretch'\n    }\n  },\n  compoundVariants: [\n    {\n      orientation: 'vertical',\n      className:\n        'mx-2 flex flex-col items-center before:border-l before:flex-1 before:mb-2 after:border-r after:flex-1 after:mt-2'\n    },\n    {\n      orientation: 'horizontal',\n      className:\n        'self-stretch my-2 flex items-center before:border-t before:flex-1 before:mr-2 after:border-t after:flex-1 after:ml-2'\n    }\n  ],\n  defaultVariants: {\n    orientation: 'horizontal'\n  }\n})\n\ninterface ShowMoreProps extends React.ComponentProps<typeof ToggleButton> {\n  className?: string\n  orientation?: 'horizontal' | 'vertical'\n  as?: 'text' | 'button'\n  text?: string\n}\n\nconst ShowMore = ({\n  as = 'button',\n  orientation = 'horizontal',\n  className,\n  ...props\n}: ShowMoreProps) => {\n  return (\n    <div className={showMoreStyles({ orientation, className })}>\n      {as === 'button' ? (\n        <ToggleButton\n          {...props}\n          className={buttonStyles({ shape: 'circle', appearance: 'outline', size: 'small' })}\n        />\n      ) : (\n        <Text slot=\"description\">{props.text}</Text>\n      )}\n    </div>\n  )\n}\n\nexport { ShowMore }\n",
-    "type": "ui"
-  },
-  "tag-field": {
-    "component": "@/components/ui/tag-field",
-    "raw": "'use client'\n\nimport * as React from 'react'\n\nimport type { Key } from 'react-aria-components'\nimport { Group, TextField } from 'react-aria-components'\nimport type { ListData } from 'react-stately'\nimport { twJoin } from 'tailwind-merge'\nimport { tv } from 'tailwind-variants'\n\nimport type { FieldProps } from './field'\nimport { Description, Input, Label } from './field'\nimport { cn } from './primitive'\nimport type { RestrictedIntent, TagGroupProps } from './tag-group'\nimport { Tag } from './tag-group'\n\nconst tagFieldsStyles = tv({\n  base: ['relative flex min-h-10 flex-row flex-wrap items-center'],\n  variants: {\n    appearance: {\n      outline: [\n        'px-1 rounded-lg shadow-sm border',\n        'has-[input[data-focused=true]]:border-primary',\n        'has-[input[data-invalid=true][data-focused=true]]:border-danger has-[input[data-invalid=true]]:border-danger has-[input[data-invalid=true]]:ring-danger/20',\n        'has-[input[data-focused=true]]:ring-4 has-[input[data-focused=true]]:ring-primary/20'\n      ],\n      plain: ['has-[input[data-focused=true]]:border-transparent']\n    }\n  }\n})\n\ninterface TagItemProps {\n  id: number\n  name: string\n}\n\ninterface TagFieldProps extends Pick<TagGroupProps, 'shape'>, FieldProps {\n  intent?: RestrictedIntent\n  isDisabled?: boolean\n  max?: number\n  className?: string\n  children?: React.ReactNode\n  name?: string\n  list: ListData<TagItemProps>\n  onItemInserted?: (tag: TagItemProps) => void\n  onItemCleared?: (tag: TagItemProps) => void\n  appearance?: 'outline' | 'plain'\n}\n\nconst TagField = ({\n  appearance = 'outline',\n  name,\n  className,\n  list,\n  onItemCleared,\n  onItemInserted,\n  ...props\n}: TagFieldProps) => {\n  const [isInvalid, setIsInvalid] = React.useState(false)\n  const [inputValue, setInputValue] = React.useState('')\n\n  const existingTagCount = list.items.length\n  const maxTags = props.max !== undefined ? props.max : Infinity\n  const maxTagsToAdd = maxTags - existingTagCount\n\n  const insertTag = () => {\n    const tagNames = inputValue.split(/,/)\n    if (maxTagsToAdd <= 0) {\n      setIsInvalid(true)\n      setInputValue('')\n      const timeoutId = setTimeout(() => {\n        setIsInvalid(false)\n      }, 2000)\n\n      return () => clearTimeout(timeoutId)\n    }\n\n    tagNames.slice(0, maxTagsToAdd).forEach((tagName) => {\n      const formattedName = tagName\n        .trim()\n        .replace(/\\s+/g, ' ')\n        .replace(/[\\t\\r\\n]/g, '')\n\n      if (\n        formattedName &&\n        !list.items.some(({ name }) => name.toLowerCase() === formattedName.toLowerCase())\n      ) {\n        const tag = {\n          id: (list.items.at(-1)?.id ?? 0) + 1,\n          name: formattedName\n        }\n\n        list.append(tag)\n        onItemInserted?.(tag)\n      }\n    })\n\n    setInputValue('')\n  }\n\n  const clearInvalidFeedback = () => {\n    if (maxTags - list.items.length <= maxTagsToAdd) {\n      setIsInvalid(false)\n    }\n  }\n\n  const onRemove = (keys: Set<Key>) => {\n    list.remove(...keys)\n    onItemCleared?.(list.getItem([...keys][0]))\n    clearInvalidFeedback()\n  }\n\n  const onKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ',') {\n      e.preventDefault()\n      insertTag()\n    }\n\n    if (e.key === 'Backspace' && inputValue === '') {\n      popLast()\n      clearInvalidFeedback()\n    }\n  }\n\n  const popLast = React.useCallback(() => {\n    if (list.items.length == 0) {\n      return\n    }\n\n    const endKey = list.items[list.items.length - 1]\n\n    if (endKey !== null) {\n      list.remove(endKey.id)\n      onItemCleared?.(list.getItem(endKey.id))\n    }\n  }, [list, onItemCleared])\n\n  return (\n    <div className={cn('flex flex-col gap-1 w-full', className)}>\n      {props.label && <Label>{props.label}</Label>}\n      <Group className={twJoin('flex flex-col', props.isDisabled && 'opacity-50')}>\n        <Tag.Group\n          intent={props.intent}\n          shape={props.shape}\n          aria-label=\"List item inserted\"\n          onRemove={onRemove}\n        >\n          <div className={tagFieldsStyles({ appearance })}>\n            <div className=\"flex flex-1 flex-wrap items-center\">\n              <Tag.List\n                items={list.items}\n                className={twJoin(\n                  list.items.length !== 0\n                    ? appearance === 'outline' && 'py-1.5 px-0.5 gap-1.5'\n                    : 'gap-0',\n                  props.shape === 'square' && '[&_.jdt3lr2x]:rounded-[calc(var(--radius)-4px)]',\n                  '[&_.jdt3lr2x]:cursor-default last:[&_.jdt3lr2x]:-mr-1 outline-none'\n                )}\n              >\n                {(item) => <Tag.Item>{item.name}</Tag.Item>}\n              </Tag.List>\n              <TextField\n                isDisabled={props.isDisabled}\n                aria-label={props?.label ?? (props['aria-label'] || props.placeholder)}\n                isInvalid={isInvalid}\n                onKeyDown={onKeyDown}\n                onChange={setInputValue}\n                value={inputValue}\n                {...props}\n              >\n                <Input\n                  className=\"w-auto inline\"\n                  placeholder={maxTagsToAdd <= 0 ? 'Remove one to add more' : props.placeholder}\n                />\n              </TextField>\n            </div>\n          </div>\n        </Tag.Group>\n        {name && (\n          <input hidden name={name} value={list.items.map((i) => i.name).join(',')} readOnly />\n        )}\n      </Group>\n      {props.description && <Description>{props.description}</Description>}\n    </div>\n  )\n}\n\nexport { TagField, type TagItemProps }\n",
-    "type": "ui"
-  },
-  "note": {
-    "component": "@/components/ui/note",
-    "raw": "'use client'\n\nimport * as React from 'react'\n\nimport { IconCircleCheck, IconCircleInfo, IconTriangleInfo } from 'justd-icons'\nimport { Text } from 'react-aria-components'\nimport { tv, type VariantProps } from 'tailwind-variants'\n\nconst noteStyles = tv({\n  base: [\n    'my-4 px-5 [&_.nd]:block [&_.nd]:text-sm py-4 overflow-hidden rounded-lg border [&_strong]:font-medium',\n    '[&_[data-slot=icon]]:size-5 [&_[data-slot=icon]]:shrink-0'\n  ],\n  variants: {\n    intent: {\n      primary: [\n        'border-primary-500/20 [&_a]:text-primary-600 text-primary-800 bg-primary-50/50 [&_[data-slot=icon]]:text-primary-600 leading-4',\n        'dark:bg-primary-600/10 dark:text-primary-200 dark:[&_a]:text-primary-50 dark:[&_[data-slot=icon]]:text-primary-400'\n      ],\n      secondary: [\n        'border-zinc-500/20 [&_a]:text-zinc-600 text-zinc-900 bg-zinc-50/50 [&_[data-slot=icon]]:text-zinc-500 leading-4',\n        'dark:bg-zinc-500/10 dark:text-zinc-200 dark:[&_a]:text-zinc-50 dark:[&_[data-slot=icon]]:text-zinc-50'\n      ],\n      info: [\n        'border-lime-500/20 [&_a]:text-lime-600 text-lime-800 bg-lime-50/50 [&_[data-slot=icon]]:text-lime-500 leading-4',\n        'dark:bg-lime-500/10 dark:text-lime-200 dark:[&_a]:text-lime-50 dark:[&_[data-slot=icon]]:text-lime-400'\n      ],\n      warning: [\n        'border-amber-500/20 [&_a]:text-amber-600 text-amber-800 bg-amber-50/50 [&_[data-slot=icon]]:text-amber-500 leading-4',\n        'dark:bg-amber-500/10 dark:text-amber-200 dark:[&_a]:text-amber-50 dark:[&_[data-slot=icon]]:text-amber-400'\n      ],\n      danger: [\n        'border-red-500/20 [&_a]:text-red-600 text-red-800 bg-red-50/50 [&_[data-slot=icon]]:text-red-500 leading-4',\n        'dark:bg-red-500/10 dark:text-red-200 dark:[&_a]:text-red-50 dark:[&_[data-slot=icon]]:text-red-400'\n      ],\n      success: [\n        'border-emerald-500/20 [&_a]:text-emerald-600 text-emerald-900 bg-emerald-50/50 [&_[data-slot=icon]]:text-emerald-600 leading-4',\n        'dark:bg-emerald-500/10 dark:text-emerald-200 dark:[&_a]:text-emerald-50 dark:[&_[data-slot=icon]]:text-emerald-400'\n      ]\n    }\n  },\n  defaultVariants: {\n    intent: 'primary'\n  }\n})\n\ninterface NoteProps\n  extends React.HtmlHTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof noteStyles> {\n  hideIndicator?: boolean\n}\n\nconst Note = ({ hideIndicator = false, intent = 'primary', className, ...props }: NoteProps) => {\n  return (\n    <div className={noteStyles({ intent, className })} {...props}>\n      <div className=\"flex items-start gap-x-2.5\">\n        {!hideIndicator && (\n          <div className=\"w-5 shrink-0 mt-px\">\n            {['info', 'primary', 'secondary'].includes(intent) ? (\n              <IconCircleInfo />\n            ) : intent === 'success' ? (\n              <IconCircleCheck />\n            ) : (\n              <IconTriangleInfo />\n            )}\n          </div>\n        )}\n        <Text slot=\"description\" {...props} className=\"nd\">\n          {props.children}\n        </Text>\n      </div>\n    </div>\n  )\n}\n\nexport { Note, type NoteProps }\n",
-    "type": "ui"
-  },
-  "keyboard": {
-    "component": "@/components/ui/keyboard",
-    "raw": "import * as React from 'react'\n\nimport { Keyboard as KeyboardPrimitive } from 'react-aria-components'\nimport { tv } from 'tailwind-variants'\n\nconst keyboardStyles = tv({\n  slots: {\n    base: '-mr-1 ml-auto hidden items-center gap-[0.25rem] px-1 lg:inline-flex',\n    kbd: [\n      'text-center font-sans capitalize text-muted-fg group-focus:text-fg forced-colors:group-focus:text-[HighlightText]',\n      'inline-grid min-h-5 min-w-5 place-content-center rounded bg-background font-sans text-[.75rem] uppercase text-fg ring-1 ring-fg/10 group-focus:opacity-60'\n    ]\n  }\n})\n\nconst { base, kbd } = keyboardStyles()\n\ninterface KeyboardProps extends React.HTMLAttributes<HTMLElement> {\n  keys: string | string[]\n  classNames?: {\n    base?: string\n    kbd?: string\n  }\n}\n\nconst Keyboard = ({ keys, classNames, className, ...props }: KeyboardProps) => {\n  return (\n    <KeyboardPrimitive className={base({ className: classNames?.base ?? className })} {...props}>\n      {(Array.isArray(keys) ? keys : keys.split('')).map((char, index) => (\n        <kbd\n          key={index}\n          className={kbd({ className: index > 0 && char.length > 1 ? 'pl-1' : classNames?.kbd })}\n        >\n          {char}\n        </kbd>\n      ))}\n    </KeyboardPrimitive>\n  )\n}\n\nexport { Keyboard, type KeyboardProps }\n",
-    "type": "ui"
-  },
-  "date-range-picker": {
-    "component": "@/components/ui/date-range-picker",
-    "raw": "'use client'\n\nimport * as React from 'react'\n\nimport {\n  DateRangePicker as DateRangePickerPrimitive,\n  type DateRangePickerProps as DateRangePickerPrimitiveProps,\n  type DateValue,\n  type ValidationResult\n} from 'react-aria-components'\nimport { tv } from 'tailwind-variants'\n\nimport { DateInput } from './date-field'\nimport { DatePickerIcon, DatePickerOverlay } from './date-picker'\nimport { Description, FieldError, FieldGroup, Label } from './field'\nimport { ctr } from './primitive'\n\nconst dateRangePickerStyles = tv({\n  slots: {\n    base: 'group flex flex-col gap-1',\n    dateRangePickerInputStart: 'px-2 lg:text-sm font-mono uppercase text-base',\n    dateRangePickerInputEnd: 'flex-1 px-2 py-1.5 font-mono uppercase text-base lg:text-sm',\n    dateRangePickerDash:\n      'text-zinc-800 group-disabled:text-zinc-200 dark:text-zinc-200 group-disabled:dark:text-zinc-600 forced-colors:text-[ButtonText] group-disabled:forced-colors:text-[GrayText]'\n  }\n})\nconst { base, dateRangePickerInputStart, dateRangePickerInputEnd, dateRangePickerDash } =\n  dateRangePickerStyles()\n\ninterface DateRangePickerProps<T extends DateValue> extends DateRangePickerPrimitiveProps<T> {\n  label?: string\n  description?: string\n  errorMessage?: string | ((validation: ValidationResult) => string)\n}\n\nconst DateRangePicker = <T extends DateValue>({\n  label,\n  className,\n  description,\n  errorMessage,\n  ...props\n}: DateRangePickerProps<T>) => {\n  return (\n    <DateRangePickerPrimitive {...props} className={ctr(className, base())}>\n      {label && <Label>{label}</Label>}\n      <FieldGroup className=\"w-auto min-w-40\">\n        <DateInput slot=\"start\" className={dateRangePickerInputStart()} />\n        <span aria-hidden=\"true\" className={dateRangePickerDash()}>\n          –\n        </span>\n        <DateInput slot=\"end\" className={dateRangePickerInputEnd()} />\n        <DatePickerIcon />\n      </FieldGroup>\n      {description && <Description>{description}</Description>}\n      <FieldError>{errorMessage}</FieldError>\n      <DatePickerOverlay range />\n    </DateRangePickerPrimitive>\n  )\n}\n\nexport { DateRangePicker, type DateRangePickerProps }\n",
-    "type": "ui"
-  },
-  "list-box": {
-    "component": "@/components/ui/list-box",
-    "raw": "'use client'\n\nimport * as React from 'react'\n\nimport { IconHamburger } from 'justd-icons'\nimport {\n  ListBox as ListBoxPrimitive,\n  ListBoxItem as ListBoxItemPrimitive,\n  type ListBoxItemProps as ListBoxItemPrimitiveProps,\n  type ListBoxProps as ListBoxPrimitiveProps\n} from 'react-aria-components'\nimport { tv } from 'tailwind-variants'\n\nimport { DropdownItemDetails, DropdownSection } from './dropdown'\nimport { cn, cr } from './primitive'\n\nconst listBoxStyles = tv({\n  base: 'flex max-h-96 w-full min-w-72 flex-col overflow-y-auto rounded-xl border p-1 shadow-xl outline-none'\n})\n\ninterface ListBoxProps<T> extends ListBoxPrimitiveProps<T> {\n  className?: string\n}\n\nconst ListBox = <T extends object>({ children, className, ...props }: ListBoxProps<T>) => (\n  <ListBoxPrimitive {...props} className={listBoxStyles({ className })}>\n    {children}\n  </ListBoxPrimitive>\n)\n\nconst listBoxItemStyles = tv({\n  base: 'my-0.5 cursor-pointer rounded-md p-2 text-base outline-none transition lg:text-sm',\n  variants: {\n    isHovered: { true: 'bg-secondary text-secondary-fg' },\n    isFocused: {\n      true: '[&_[data-slot=icon]]:text-primary-fg [&_[data-slot=label]]:text-primary-fg [&_.text-muted-fg]:text-primary-fg/80 bg-primary text-primary-fg'\n    },\n    isDragging: { true: 'cursor-grabbing bg-secondary text-secondary-fg' },\n    isSelected: { true: 'bg-primary text-primary-fg' },\n    isDisabled: {\n      true: 'opacity-70 cursor-default text-muted-fg'\n    }\n  }\n})\n\ninterface ListBoxItemProps<T extends Object> extends ListBoxItemPrimitiveProps<T> {\n  className?: string\n}\n\nconst ListBoxItem = <T extends object>({ children, className, ...props }: ListBoxItemProps<T>) => {\n  const textValue = typeof children === 'string' ? children : undefined\n\n  return (\n    <ListBoxItemPrimitive\n      textValue={textValue}\n      {...props}\n      className={cr(className, (className, renderProps) =>\n        listBoxItemStyles({\n          ...renderProps,\n          className\n        })\n      )}\n    >\n      {(values) => (\n        <div className=\"flex items-center gap-2\">\n          <>\n            {values.allowsDragging && (\n              <IconHamburger\n                className={cn(\n                  'size-4 shrink-0 text-muted-fg transition',\n                  values.isFocused && 'text-fg',\n                  values.isDragging && 'text-fg',\n                  values.isSelected && 'text-primary-fg/70'\n                )}\n              />\n            )}\n            <div className=\"flex flex-col\">\n              {typeof children === 'function' ? children(values) : children}\n            </div>\n          </>\n        </div>\n      )}\n    </ListBoxItemPrimitive>\n  )\n}\n\ninterface ListBoxPickerProps<T> extends ListBoxProps<T> {}\n\nconst ListBoxPicker = <T extends object>({ className, ...props }: ListBoxPickerProps<T>) => {\n  return (\n    <ListBoxPrimitive\n      className={cn('max-h-72 overflow-auto p-1 outline-none', className)}\n      {...props}\n    />\n  )\n}\n\nListBox.Section = DropdownSection\nListBox.ItemDetails = DropdownItemDetails\nListBox.Item = ListBoxItem\nListBox.Picker = ListBoxPicker\n\nexport { ListBox, listBoxStyles, type ListBoxPickerProps }\n",
-    "type": "ui"
-  },
-  "pagination": {
-    "component": "@/components/ui/pagination",
-    "raw": "'use client'\n\nimport * as React from 'react'\n\nimport {\n  IconChevronLgLeft,\n  IconChevronLgRight,\n  IconChevronsLgLeft,\n  IconChevronsLgRight,\n  IconDotsHorizontal\n} from 'justd-icons'\nimport {\n  ListBox,\n  ListBoxItem,\n  type ListBoxItemProps,\n  type ListBoxProps,\n  Section,\n  type SectionProps,\n  Separator\n} from 'react-aria-components'\nimport { tv } from 'tailwind-variants'\n\nimport { buttonStyles } from './button'\nimport { cn, cr } from './primitive'\n\nconst paginationStyles = tv({\n  slots: {\n    pagination: 'mx-auto flex w-full justify-center gap-1',\n    section: 'flex h-9 gap-1',\n    list: 'flex flex-row items-center gap-1',\n    itemButton:\n      'focus-visible:border-primary focus-visible:bg-primary/10 dark:focus-visible:text-primary-100 dark:[&>[data-slot=icon]]:text-primary-100 focus-visible:text-primary-900 [&>[data-slot=icon]]:text-primary-960 focus-visible:ring-4 focus-visible:ring-primary/20',\n    itemLabel: 'h-9 px-3.5 grid place-content-center',\n    itemSeparator: 'h-9 grid place-content-center',\n    itemEllipsis:\n      'flex items-center justify-center focus-visible:border-primary rounded-lg border border-transparent focus:outline-none size-9 focus-visible:bg-primary/10 dark:focus-visible:text-primary-100 dark:[&>[data-slot=icon]]:text-primary-100 focus-visible:text-primary-900 [&>[data-slot=icon]]:text-primary-960 focus-visible:ring-4 focus-visible:ring-primary/20',\n    itemEllipsisIcon: 'flex size-9 items-center justify-center',\n    defaultItem:\n      'focus-visible:border-primary disabled:cursor-default focus-visible:bg-primary/10 dark:focus-visible:text-primary-100 dark:[&>[data-slot=icon]]:text-primary-100 focus-visible:text-primary-900 [&>[data-slot=icon]]:text-primary-960 focus-visible:ring-4 focus-visible:ring-primary/20 disabled:opacity-100',\n    itemSeparatorLine: 'h-5 w-[1.5px] bg-zinc-300 dark:bg-zinc-700 rotate-[14deg] shrink-0'\n  }\n})\n\nconst {\n  pagination,\n  section,\n  list,\n  itemButton,\n  itemLabel,\n  itemSeparator,\n  itemEllipsis,\n  itemEllipsisIcon,\n  defaultItem,\n  itemSeparatorLine\n} = paginationStyles()\n\nconst Pagination = ({ className, ...props }: React.ComponentProps<'nav'>) => (\n  <nav role=\"navigation\" aria-label=\"pagination\" className={pagination({ className })} {...props} />\n)\n\nconst PaginationSection = <T extends object>({ className, ...props }: SectionProps<T>) => (\n  <Section {...props} className={section({ className })} />\n)\n\nconst PaginationList = <T extends object>({ className, ...props }: ListBoxProps<T>) => {\n  return (\n    <ListBox\n      orientation=\"horizontal\"\n      aria-label={props['aria-label'] || 'Pagination'}\n      layout=\"grid\"\n      className={cr(className, (className) => list({ className }))}\n      {...props}\n    />\n  )\n}\n\nconst renderListItem = (\n  props: ListBoxItemProps & {\n    textValue?: string\n    'aria-current'?: string | undefined\n    isDisabled?: boolean\n    className?: string\n  },\n  children: React.ReactNode\n) => <ListBoxItem {...props}>{children}</ListBoxItem>\n\ninterface PaginationItemProps extends ListBoxItemProps {\n  children?: React.ReactNode\n  className?: string\n  intent?:\n    | 'primary'\n    | 'secondary'\n    | 'danger'\n    | 'warning'\n    | 'info'\n    | 'light/dark'\n    | 'success'\n    | 'light'\n    | 'dark'\n  size?: 'medium' | 'large' | 'square-petite' | 'extra-small' | 'small'\n  shape?: 'square' | 'circle'\n  appearance?: 'solid' | 'outline' | 'plain'\n  isCurrent?: boolean\n  variant?: 'label' | 'separator' | 'ellipsis' | 'default' | 'last' | 'first' | 'previous' | 'next'\n}\n\nconst PaginationItem = ({\n  variant = 'default',\n  size = 'square-petite',\n  appearance = 'outline',\n  intent,\n  shape = 'square',\n  className,\n  isCurrent,\n  children,\n  ...props\n}: PaginationItemProps) => {\n  const textValue =\n    typeof children === 'string'\n      ? children\n      : typeof children === 'number'\n        ? children.toString()\n        : undefined\n\n  const renderPaginationIndicator = (indicator: React.ReactNode) =>\n    renderListItem(\n      {\n        textValue: variant,\n        'aria-current': isCurrent ? 'page' : undefined,\n        isDisabled: isCurrent,\n        className: cn(\n          buttonStyles({\n            appearance: 'outline',\n            size: 'square-petite',\n            className: itemButton()\n          }),\n          className\n        ),\n        ...props\n      },\n      indicator\n    )\n\n  switch (variant) {\n    case 'label':\n      return renderListItem(\n        {\n          textValue: textValue,\n          className: itemLabel({ className }),\n          ...props\n        },\n        children\n      )\n    case 'separator':\n      return renderListItem(\n        {\n          textValue: 'Separator',\n          className: itemSeparator({ className }),\n          ...props\n        },\n        <Separator orientation=\"vertical\" className={itemSeparatorLine()} />\n      )\n    case 'ellipsis':\n      return renderListItem(\n        {\n          textValue: 'More pages',\n          className: itemEllipsis({ className }),\n          ...props\n        },\n        <span aria-hidden className={itemEllipsisIcon({ className })}>\n          <IconDotsHorizontal />\n        </span>\n      )\n    case 'previous':\n      return renderPaginationIndicator(<IconChevronLgLeft />)\n    case 'next':\n      return renderPaginationIndicator(<IconChevronLgRight />)\n    case 'first':\n      return renderPaginationIndicator(<IconChevronsLgLeft />)\n    case 'last':\n      return renderPaginationIndicator(<IconChevronsLgRight />)\n    default:\n      return renderListItem(\n        {\n          textValue: textValue,\n          'aria-current': isCurrent ? 'page' : undefined,\n          isDisabled: isCurrent,\n          className: cn(\n            buttonStyles({\n              intent: isCurrent ? 'primary' : intent,\n              appearance: isCurrent ? 'solid' : appearance,\n              size,\n              className: defaultItem({ className })\n            }),\n            className\n          ),\n          ...props\n        },\n        children\n      )\n  }\n}\n\nPagination.Item = PaginationItem\nPagination.List = PaginationList\nPagination.Section = PaginationSection\n\nexport { Pagination }\n",
-    "type": "ui"
-  },
-  "link": {
-    "component": "@/components/ui/link",
-    "raw": "'use client'\n\nimport { Link as LinkPrimitive, type LinkProps as LinkPrimitiveProps } from 'react-aria-components'\nimport { tv } from 'tailwind-variants'\n\nimport { cr } from './primitive'\n\nconst linkStyles = tv({\n  base: 'forced-colors:outline-[Highlight] focus-visible:outline-2 outline outline-offset-2 disabled:focus-visible:outline-0 outline-0 outline-primary rounded disabled:opacity-60 forced-colors:disabled:text-[GrayText] border-transparent transition-colors disabled:cursor-default',\n  variants: {\n    intent: {\n      unstyled: 'text-fg',\n      primary: 'text-primary hover:text-primary/80 forced-colors:disabled:text-[GrayText]',\n      danger: 'text-danger hover:text-danger/80 forced-colors:disabled:text-[GrayText]',\n      'lad/primary':\n        'text-fg hover:text-primary dark:hover:text-primary/80 forced-colors:disabled:text-[GrayText]',\n      secondary: 'text-secondary-fg hover:text-secondary-fg/80'\n    }\n  },\n  defaultVariants: {\n    intent: 'unstyled'\n  }\n})\n\ninterface LinkProps extends LinkPrimitiveProps {\n  intent?: 'primary' | 'secondary' | 'danger' | 'lad/primary' | 'unstyled'\n}\n\nconst Link = ({ className, ...props }: LinkProps) => {\n  return (\n    <LinkPrimitive\n      aria-label={props['aria-label'] ?? 'Link'}\n      {...props}\n      className={cr(className, (className, ...renderProps) =>\n        linkStyles({ ...renderProps, intent: props.intent, className })\n      )}\n    />\n  )\n}\n\nexport { Link, LinkPrimitive, type LinkPrimitiveProps, type LinkProps }\n",
-    "type": "ui"
-  },
-  "tabs": {
-    "component": "@/components/ui/tabs",
-    "raw": "'use client'\n\nimport { useId } from 'react'\n\nimport { LayoutGroup, motion } from 'framer-motion'\nimport {\n  Tab as TabPrimitive,\n  TabList as TabListPrimitive,\n  type TabListProps,\n  TabPanel as TabPanelPrimitive,\n  type TabPanelProps,\n  type TabProps,\n  Tabs as TabsPrimitive,\n  type TabsProps\n} from 'react-aria-components'\nimport { twJoin } from 'tailwind-merge'\nimport { tv } from 'tailwind-variants'\n\nimport { cn, cr } from './primitive'\n\nconst tabsStyles = tv({\n  base: 'group flex gap-4',\n  variants: {\n    orientation: {\n      horizontal: 'flex-col',\n      vertical: 'w-[800px] flex-row'\n    }\n  }\n})\n\nconst Tabs = (props: TabsProps) => {\n  return (\n    <TabsPrimitive\n      {...props}\n      className={cr(props.className, (className, renderProps) =>\n        tabsStyles({\n          ...renderProps,\n          className\n        })\n      )}\n    />\n  )\n}\n\nconst tabListStyles = tv({\n  base: 'flex',\n  variants: {\n    orientation: {\n      horizontal: 'flex-row gap-x-5 border-b',\n      vertical: 'flex-col items-start gap-y-4 border-l'\n    }\n  }\n})\n\nconst TabList = <T extends object>(props: TabListProps<T>) => {\n  const id = useId()\n  return (\n    <LayoutGroup id={id}>\n      <TabListPrimitive\n        {...props}\n        className={cr(props.className, (className, renderProps) =>\n          tabListStyles({ ...renderProps, className })\n        )}\n      />\n    </LayoutGroup>\n  )\n}\n\nconst tabStyles = tv({\n  base: [\n    'relative flex whitespace-nowrap cursor-default items-center rounded-full text-sm font-medium outline-none transition forced-color-adjust-none hover:text-fg [&>[data-slot=icon]]:size-4 [&>[data-slot=icon]]:mr-2',\n    // hor\n    'group-orientation-vertical:w-full group-orientation-vertical:py-0 group-orientation-vertical:pl-4 group-orientation-vertical:pr-2',\n    // ver\n    'group-orientation-horizontal:pb-3'\n  ],\n  variants: {\n    isSelected: {\n      false: 'text-muted-fg',\n      true: 'text-fg forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]'\n    },\n    isFocused: { false: 'ring-0', true: 'text-fg' },\n    isDisabled: {\n      true: 'text-muted-fg/50 forced-colors:text-[GrayText] forced-colors:selected:bg-[GrayText] forced-colors:selected:text-[HighlightText]'\n    }\n  }\n})\n\nconst Tab = ({ children, ...props }: TabProps) => {\n  return (\n    <TabPrimitive\n      {...props}\n      className={cr(props.className, (_className, renderProps) =>\n        tabStyles({\n          ...renderProps,\n          className: twJoin('href' in props && 'cursor-pointer', _className)\n        })\n      )}\n    >\n      {({ isSelected }) => (\n        <>\n          {children}\n          {isSelected && (\n            <motion.span\n              className={cn(\n                'absolute rounded bg-fg',\n                // horizontal\n                'group-orientation-horizontal:inset-x-0 group-orientation-horizontal:-bottom-px group-orientation-horizontal:h-0.5 group-orientation-horizontal:w-full',\n                // vertical\n                'group-orientation-vertical:left-0 group-orientation-vertical:h-[calc(100%-10%)] group-orientation-vertical:w-0.5 group-orientation-vertical:transform'\n              )}\n              layoutId=\"current-selected\"\n              transition={{ type: 'spring', stiffness: 500, damping: 40 }}\n            />\n          )}\n        </>\n      )}\n    </TabPrimitive>\n  )\n}\n\nconst tabPanelStyles = tv({\n  base: 'flex-1 text-sm text-fg',\n  variants: {\n    isFocusVisible: {\n      true: 'outline-none'\n    }\n  }\n})\n\nconst TabPanel = (props: TabPanelProps) => {\n  return (\n    <TabPanelPrimitive\n      {...props}\n      className={cr(props.className, (className, renderProps) =>\n        tabPanelStyles({ ...renderProps, className })\n      )}\n    />\n  )\n}\nTabs.List = TabList\nTabs.Tab = Tab\nTabs.Panel = TabPanel\n\nexport { Tabs }\n",
-    "type": "ui"
-  },
-  "card": {
-    "component": "@/components/ui/card",
-    "raw": "'use client'\n\nimport * as React from 'react'\n\nimport type { HeadingProps, TextProps } from 'react-aria-components'\nimport { Heading } from 'react-aria-components'\nimport { tv } from 'tailwind-variants'\n\nimport { Description } from './field'\n\nconst card = tv({\n  slots: {\n    root: [\n      'xrkr bg-background rounded-lg xkd2 [&:has(table)_.ccvgs8x]:border-t [&:has(table)_.x32]:bg-tertiary [&:has(table)]:overflow-hidden border text-fg shadow-sm [&:has(.larhy3):not(:has(.yahnba))>.ccvgs8x]:pt-6 [&:has(.larhy3)]:overflow-hidden [&_table]:overflow-hidden'\n    ],\n    header: 'flex xlw32 flex-col space-y-1.5 px-6 py-5',\n    title: 'text-lg klda font-semibold leading-none tracking-tight',\n    description: 'text-base dl2 text-muted-fg sm:text-sm',\n    content:\n      'yahnba px-6 pb-6 has-[.t-hea]:bg-secondary/40 has-[table]:p-0 [&:has(table)+.ccvgs8x]:py-5 [&:has(table)]:border-t [&_.t-cel]:px-6 [&_.t-col]:px-6',\n    footer: 'ccvgs8x flex items-center p-6 pt-0'\n  }\n})\n\nconst { root, header, title, description, content, footer } = card()\n\nconst Card = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => {\n  return <div className={root({ className })} {...props} />\n}\n\ninterface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  title?: string\n  description?: string\n}\n\nconst CardHeader = ({ className, ...props }: CardHeaderProps) => (\n  <div className={header({ className })} {...props}>\n    {props.title && <CardTitle>{props.title}</CardTitle>}\n    {props.description && <CardDescription>{props.description}</CardDescription>}\n    {!props.title && typeof props.children === 'string' ? <CardTitle {...props} /> : props.children}\n  </div>\n)\n\nconst CardTitle = ({ className, ...props }: HeadingProps) => {\n  return <Heading slot=\"title\" className={title({ className })} {...props} />\n}\n\nconst CardDescription = (props: TextProps) => {\n  return <Description className={description({ className: props.className })} {...props} />\n}\n\nconst CardContent = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => {\n  return <div className={content({ className })} {...props} />\n}\n\nconst CardFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => {\n  return <div className={footer({ className })} {...props} />\n}\n\nCard.Content = CardContent\nCard.Description = CardDescription\nCard.Footer = CardFooter\nCard.Header = CardHeader\nCard.Title = CardTitle\n\nexport { Card }\n",
-    "type": "ui"
-  },
-  "slider": {
-    "component": "@/components/ui/slider",
-    "raw": "'use client'\n\nimport * as React from 'react'\n\nimport { useSlotId } from '@react-aria/utils'\nimport type {\n  LabelProps,\n  SliderOutputProps,\n  SliderProps as SliderPrimitiveProps,\n  SliderThumbProps,\n  SliderTrackProps,\n  TextProps\n} from 'react-aria-components'\nimport {\n  Slider as SliderPrimitive,\n  SliderOutput,\n  SliderStateContext,\n  SliderThumb,\n  SliderTrack,\n  TextContext\n} from 'react-aria-components'\nimport { tv, type VariantProps } from 'tailwind-variants'\n\nimport { Description, Label } from './field'\nimport { cr } from './primitive'\n\nconst sliderStyles = tv({\n  slots: {\n    root: 'flex disabled:opacity-50 flex-col gap-2 orientation-horizontal:w-full orientation-vertical:h-56 orientation-vertical:items-center',\n    track: [\n      'relative group/track rounded-full bg-zinc-200 dark:bg-zinc-800 cursor-pointer disabled:cursor-default disabled:bg-bg-disabled',\n      'grow orientation-vertical:flex-1 orientation-vertical:w-1.5 orientation-horizontal:w-full orientation-horizontal:h-1.5'\n    ],\n    filler: [\n      'rounded-full bg-primary group-disabled/track:bg-bg-disabled',\n      'pointer-events-none absolute group-orientation-horizontal/top-0 group-orientation-vertical/track:w-full group-orientation-vertical/track:bottom-0 group-orientation-horizontal/track:h-full'\n    ],\n    thumb: [\n      'outline-none dragging:cursor-grabbing focus:ring-4 border border-zinc-200 focus:ring-primary/20 focus:border-primary focus:outline-none forced-colors:outline-[Highlight]',\n      'rounded-full bg-white transition-[width,height]',\n      'absolute left-[50%] top-[50%] block !-translate-x-1/2 !-translate-y-1/2',\n      'disabled:bg-bg-disabled disabled:border disabled:border-bg',\n      'orientation-vertical:w-2 orientation-horizontal:h-2',\n      'size-[1.15rem] dragging:size-[1.30rem] dragging:border-primary'\n    ],\n    valueLabel: 'text-muted-fg text-sm'\n  }\n})\n\nconst { track, filler, thumb, root, valueLabel } = sliderStyles()\n\ninterface SliderRootProps extends SliderPrimitiveProps {}\n\nconst Root = (props: SliderPrimitiveProps) => {\n  const descriptionId = useSlotId()\n  return (\n    <TextContext.Provider value={{ slots: { description: { id: descriptionId } } }}>\n      <SliderPrimitive\n        data-slot=\"root\"\n        aria-describedby={descriptionId}\n        {...props}\n        className={cr(props.className, (className) => root({ className }))}\n      />\n    </TextContext.Provider>\n  )\n}\n\ninterface SliderProps extends SliderRootProps, VariantProps<typeof sliderStyles> {\n  label?: LabelProps['children']\n  description?: TextProps['children']\n  showValue?: boolean | ((value: number[]) => string)\n}\n\nconst Slider = ({ label, description, showValue = true, ...props }: SliderProps) => (\n  <Root {...props}>\n    <div className=\"flex items-center justify-between gap-2\">\n      {label && <Label>{label}</Label>}\n      {(showValue || typeof showValue === 'function') && (\n        <Output>\n          {({ state }) => (typeof showValue === 'function' ? showValue(state.values) : undefined)}\n        </Output>\n      )}\n    </div>\n    <Controls />\n    {description && <Description>{description}</Description>}\n  </Root>\n)\n\nconst Controls = (props: SliderTrackProps) => {\n  const { values } = React.useContext(SliderStateContext)\n  return (\n    <Track {...props}>\n      <Filler />\n      {values.map((_, i) => (\n        <Thumb key={i} index={i} />\n      ))}\n    </Track>\n  )\n}\n\nconst Track = (props: SliderTrackProps) => {\n  return (\n    <SliderTrack {...props} className={cr(props.className, (className) => track({ className }))} />\n  )\n}\n\nconst Filler = (props: React.HTMLAttributes<HTMLDivElement>) => {\n  const { orientation, getThumbPercent, values } = React.useContext(SliderStateContext)\n  return (\n    <div\n      {...props}\n      style={\n        values.length === 1\n          ? orientation === 'horizontal'\n            ? { width: `${getThumbPercent(0) * 100}%` }\n            : { height: `${getThumbPercent(0) * 100}%` }\n          : orientation === 'horizontal'\n            ? {\n                left: `${getThumbPercent(0) * 100}%`,\n                width: `${Math.abs(getThumbPercent(0) - getThumbPercent(1)) * 100}%`\n              }\n            : {\n                bottom: `${getThumbPercent(0) * 100}%`,\n                height: `${Math.abs(getThumbPercent(0) - getThumbPercent(1)) * 100}%`\n              }\n      }\n      className={filler({ className: props.className })}\n    />\n  )\n}\n\nconst Thumb = ({ className, ...props }: SliderThumbProps) => {\n  return <SliderThumb {...props} className={cr(className, (className) => thumb({ className }))} />\n}\n\nconst Output = ({ className, ...props }: SliderOutputProps) => {\n  return (\n    <SliderOutput {...props} className={cr(className, (className) => valueLabel({ className }))}>\n      {cr(\n        props.children,\n        (children, { state }) =>\n          children ?? state.values.map((_, i) => state.getThumbValueLabel(i)).join(' - ')\n      )}\n    </SliderOutput>\n  )\n}\n\nSlider.Controls = Controls\nSlider.Filler = Filler\nSlider.Root = Root\nSlider.Thumb = Thumb\nSlider.Track = Track\nSlider.Output = Output\nexport { Slider }\n",
-    "type": "ui"
-  },
-  "popover": {
-    "component": "@/components/ui/popover",
-    "raw": "'use client'\n\nimport * as React from 'react'\n\nimport type { ModalOverlayProps } from 'react-aria-components'\nimport {\n  Button,\n  type DialogProps,\n  DialogTrigger as DialogTriggerPrimitive,\n  Modal,\n  ModalOverlay,\n  OverlayArrow,\n  Popover as PopoverPrimitive,\n  PopoverContext,\n  type PopoverProps as PopoverPrimitiveProps,\n  useSlottedContext\n} from 'react-aria-components'\nimport { twJoin } from 'tailwind-merge'\nimport { tv } from 'tailwind-variants'\n\nimport { Dialog } from './dialog'\nimport { cn, cr, useMediaQuery } from './primitive'\n\nconst Popover = ({ children }: { children: React.ReactNode }) => {\n  return <DialogTriggerPrimitive>{children}</DialogTriggerPrimitive>\n}\n\nconst Title = ({ className, ...props }: React.ComponentProps<typeof Dialog.Title>) => (\n  <Dialog.Title className={cn('leading-none', className)} {...props} />\n)\n\nconst Header = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n  <Dialog.Header className={cn('p-0 sm:pt-0', className)} {...props} />\n)\n\nconst Footer = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n  <Dialog.Footer className={cn('pt-4 pb-0 sm:pb-0', className)} {...props} />\n)\n\nconst Body = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n  <Dialog.Body className={cn('p-0', className)} {...props} />\n)\n\nconst popoverContentStyles = tv({\n  base: [\n    'max-w-xs min-w-80 p-4 rounded-xl border bg-overlay bg-clip-padding text-overlay-fg shadow-lg dark:backdrop-blur-2xl dark:backdrop-saturate-200 lg:text-sm sm:max-w-3xl forced-colors:bg-[Canvas]'\n  ],\n  variants: {\n    isMenu: {\n      true: {\n        true: 'p-0'\n      }\n    },\n    isEntering: {\n      true: [\n        'duration-50 ease-out animate-in fade-in placement-left:slide-in-from-right-1 placement-right:slide-in-from-left-1 placement-top:slide-in-from-bottom-1 placement-bottom:slide-in-from-top-1'\n      ]\n    },\n    isExiting: {\n      true: 'duration-50 ease-in animate-out fade-out placement-left:slide-out-to-right-1 placement-right:slide-out-to-left-1 placement-top:slide-out-to-bottom-1 placement-bottom:slide-out-to-top-1'\n    }\n  }\n})\n\nconst drawerStyles = tv({\n  base: [\n    'fixed max-h-full bottom-0 top-auto z-50 w-full bg-overlay max-w-2xl border border-b-transparent outline-none'\n  ],\n  variants: {\n    isMenu: {\n      true: 'p-0 [&_[role=dialog]]:px-0 rounded-t-xl',\n      false: 'p-4 rounded-t-2xl'\n    },\n    isEntering: {\n      true: [\n        '[will-change:transform] [transition:transform_0.5s_cubic-bezier(0.32,_0.72,_0,_1)]',\n        'animate-in duration-200 fade-in-0 slide-in-from-bottom-56',\n        '[transition:translate3d(0,_100%,_0)]',\n        'sm:slide-in-from-bottom-auto sm:slide-in-from-top-[20%]'\n      ]\n    },\n    isExiting: {\n      true: 'duration-200 ease-in animate-out slide-out-to-bottom-56'\n    }\n  }\n})\n\ninterface PopoverProps\n  extends Omit<React.ComponentProps<typeof Modal>, 'children'>,\n    Omit<PopoverPrimitiveProps, 'children' | 'className'>,\n    ModalOverlayProps {\n  children: React.ReactNode\n  className?: string | ((values: any & { defaultClassName?: string }) => string)\n  showArrow?: boolean\n  style?: React.CSSProperties\n  respectScreen?: boolean\n  'aria-label'?: DialogProps['aria-label']\n  'aria-labelledby'?: DialogProps['aria-labelledby']\n}\n\nconst Content = ({\n  respectScreen = true,\n  children,\n  showArrow = true,\n  className,\n  ...props\n}: PopoverProps) => {\n  const isMobile = useMediaQuery('(max-width: 600px)')\n  const popoverContext = useSlottedContext(PopoverContext)!\n  const isMenuTrigger = popoverContext?.trigger === 'MenuTrigger'\n  const isSubmenuTrigger = popoverContext?.trigger === 'SubmenuTrigger'\n  const isMenu = isMenuTrigger || isSubmenuTrigger\n  let offset = showArrow ? 12 : 8\n  offset = isSubmenuTrigger ? offset - 6 : offset\n  return isMobile && respectScreen ? (\n    <ModalOverlay\n      className={twJoin(\n        'fixed left-0 top-0 bg-overlay/10 isolate z-50 h-[--visual-viewport-height] w-full [--visual-viewport-vertical-padding:16px]',\n        isSubmenuTrigger ? 'bg-overlay/10' : ''\n      )}\n      {...props}\n      isDismissable\n    >\n      <Modal\n        className={cr(className, (className, renderProps) =>\n          drawerStyles({ ...renderProps, isMenu, className })\n        )}\n      >\n        <Dialog\n          aria-label={isMenu ? 'Menu' : props['aria-label']}\n          className=\"focus:outline-none touch-none\"\n        >\n          {children}\n        </Dialog>\n      </Modal>\n    </ModalOverlay>\n  ) : (\n    <PopoverPrimitive\n      offset={offset}\n      {...props}\n      className={cr(className, (className, renderProps) =>\n        popoverContentStyles({\n          ...renderProps,\n          className\n        })\n      )}\n    >\n      {showArrow && (\n        <OverlayArrow className=\"group\">\n          <svg\n            width={12}\n            height={12}\n            viewBox=\"0 0 12 12\"\n            className=\"block fill-overlay stroke-border group-placement-left:-rotate-90 group-placement-right:rotate-90 group-placement-bottom:rotate-180 forced-colors:fill-[Canvas] forced-colors:stroke-[ButtonBorder]\"\n          >\n            <path d=\"M0 0 L6 6 L12 0\" />\n          </svg>\n        </OverlayArrow>\n      )}\n      {children}\n    </PopoverPrimitive>\n  )\n}\n\nconst Picker = ({ children, className, ...props }: PopoverProps) => {\n  return (\n    <PopoverPrimitive\n      {...props}\n      className={cr(className, (className, renderProps) =>\n        popoverContentStyles({\n          ...renderProps,\n          className: cn('max-h-72 overflow-y-auto min-w-[--trigger-width] p-0', className)\n        })\n      )}\n    >\n      {children}\n    </PopoverPrimitive>\n  )\n}\n\nPopover.Primitive = PopoverPrimitive\nPopover.Trigger = Button\nPopover.Close = Dialog.Close\nPopover.Content = Content\nPopover.Description = Dialog.Description\nPopover.Body = Body\nPopover.Footer = Footer\nPopover.Header = Header\nPopover.Picker = Picker\nPopover.Title = Title\n\nexport { Popover, drawerStyles, popoverContentStyles }\n",
-    "type": "ui"
-  },
-  "text-field": {
-    "component": "@/components/ui/text-field",
-    "raw": "'use client'\n\nimport * as React from 'react'\n\nimport { IconLoader } from 'justd-icons'\nimport {\n  TextField as TextFieldPrimitive,\n  type TextFieldProps as TextFieldPrimitiveProps\n} from 'react-aria-components'\n\nimport type { FieldProps } from './field'\nimport { Description, FieldError, FieldGroup, fieldGroupPrefixStyles, Input, Label } from './field'\nimport { ctr } from './primitive'\n\ninterface TextFieldProps extends TextFieldPrimitiveProps, FieldProps {\n  prefix?: React.ReactNode\n  suffix?: React.ReactNode\n  isLoading?: boolean\n  indicatorPlace?: 'prefix' | 'suffix'\n}\n\nconst TextField = ({\n  placeholder,\n  label,\n  description,\n  errorMessage,\n  prefix,\n  suffix,\n  isLoading,\n  indicatorPlace,\n  ...props\n}: TextFieldProps) => {\n  return (\n    <TextFieldPrimitive {...props} className={ctr(props.className, 'group flex flex-col gap-1')}>\n      {label && <Label>{label}</Label>}\n      <FieldGroup\n        data-loading={isLoading ? 'true' : undefined}\n        className={fieldGroupPrefixStyles()}\n      >\n        {isLoading && indicatorPlace === 'prefix' ? (\n          <IconLoader className=\"animate-spin isPfx\" />\n        ) : prefix ? (\n          <span className=\"atrs isPfx x2e2\">{prefix}</span>\n        ) : null}\n        <Input className=\"px-2.5\" placeholder={placeholder} />\n        {isLoading && indicatorPlace === 'suffix' ? (\n          <IconLoader className=\"animate-spin isSfx\" />\n        ) : suffix ? (\n          <span className=\"atrs isSfx x2e2\">{suffix}</span>\n        ) : null}\n      </FieldGroup>\n      {description && <Description>{description}</Description>}\n      <FieldError>{errorMessage}</FieldError>\n    </TextFieldPrimitive>\n  )\n}\n\nexport { TextField, TextFieldPrimitive, type TextFieldProps }\n",
-    "type": "ui"
-  },
-  "loader": {
-    "component": "@/components/ui/loader",
-    "raw": "import type { SVGProps } from 'react'\nimport React from 'react'\n\nimport { IconLoader } from 'justd-icons'\nimport type { VariantProps } from 'tailwind-variants'\nimport { tv } from 'tailwind-variants'\n\nimport { cn } from './primitive'\n\nconst loaderStyles = tv({\n  base: 'relative',\n  variants: {\n    intent: {\n      current: 'text-current',\n      primary: 'text-primary',\n      secondary: 'text-muted-fg',\n      success: 'text-success',\n      warning: 'text-warning',\n      danger: 'text-danger'\n    },\n    size: {\n      small: 'size-4',\n      medium: 'size-6',\n      large: 'size-8',\n      'extra-large': 'size-10'\n    }\n  },\n  defaultVariants: {\n    intent: 'current',\n    size: 'small'\n  }\n})\n\ntype LoaderVariantProps = VariantProps<typeof loaderStyles>\n\nconst Bars = ({ className, ...props }: SVGProps<SVGSVGElement>) => (\n  <svg\n    className={cn('size-4', className)}\n    data-slot=\"icon\"\n    viewBox=\"0 0 135 140\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"currentColor\"\n    {...props}\n  >\n    <rect y=\"10\" width=\"15\" height=\"120\" rx=\"6\">\n      <animate\n        attributeName=\"height\"\n        begin=\"0.5s\"\n        dur=\"1s\"\n        values=\"120;110;100;90;80;70;60;50;40;140;120\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n      <animate\n        attributeName=\"y\"\n        begin=\"0.5s\"\n        dur=\"1s\"\n        values=\"10;15;20;25;30;35;40;45;50;0;10\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n    </rect>\n    <rect x=\"30\" y=\"10\" width=\"15\" height=\"120\" rx=\"6\">\n      <animate\n        attributeName=\"height\"\n        begin=\"0.25s\"\n        dur=\"1s\"\n        values=\"120;110;100;90;80;70;60;50;40;140;120\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n      <animate\n        attributeName=\"y\"\n        begin=\"0.25s\"\n        dur=\"1s\"\n        values=\"10;15;20;25;30;35;40;45;50;0;10\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n    </rect>\n    <rect x=\"60\" width=\"15\" height=\"140\" rx=\"6\">\n      <animate\n        attributeName=\"height\"\n        begin=\"0s\"\n        dur=\"1s\"\n        values=\"120;110;100;90;80;70;60;50;40;140;120\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n      <animate\n        attributeName=\"y\"\n        begin=\"0s\"\n        dur=\"1s\"\n        values=\"10;15;20;25;30;35;40;45;50;0;10\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n    </rect>\n    <rect x=\"90\" y=\"10\" width=\"15\" height=\"120\" rx=\"6\">\n      <animate\n        attributeName=\"height\"\n        begin=\"0.25s\"\n        dur=\"1s\"\n        values=\"120;110;100;90;80;70;60;50;40;140;120\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n      <animate\n        attributeName=\"y\"\n        begin=\"0.25s\"\n        dur=\"1s\"\n        values=\"10;15;20;25;30;35;40;45;50;0;10\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n    </rect>\n    <rect x=\"120\" y=\"10\" width=\"15\" height=\"120\" rx=\"6\">\n      <animate\n        attributeName=\"height\"\n        begin=\"0.5s\"\n        dur=\"1s\"\n        values=\"120;110;100;90;80;70;60;50;40;140;120\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n      <animate\n        attributeName=\"y\"\n        begin=\"0.5s\"\n        dur=\"1s\"\n        values=\"10;15;20;25;30;35;40;45;50;0;10\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n    </rect>\n  </svg>\n)\nconst Ring = (props: SVGProps<SVGSVGElement>) => <IconLoader {...props} />\nconst Spin = ({ className, ...props }: SVGProps<SVGSVGElement>) => (\n  <svg className={cn('size-4', className)} data-slot=\"icon\" viewBox=\"0 0 2400 2400\" {...props}>\n    <g strokeWidth=\"200\" strokeLinecap=\"round\" fill=\"none\">\n      <line x1=\"1200\" y1=\"600\" x2=\"1200\" y2=\"100\" />\n      <line opacity=\"0.5\" x1=\"1200\" y1=\"2300\" x2=\"1200\" y2=\"1800\" />\n      <line opacity=\"0.917\" x1=\"900\" y1=\"680.4\" x2=\"650\" y2=\"247.4\" />\n      <line opacity=\"0.417\" x1=\"1750\" y1=\"2152.6\" x2=\"1500\" y2=\"1719.6\" />\n      <line opacity=\"0.833\" x1=\"680.4\" y1=\"900\" x2=\"247.4\" y2=\"650\" />\n      <line opacity=\"0.333\" x1=\"2152.6\" y1=\"1750\" x2=\"1719.6\" y2=\"1500\" />\n      <line opacity=\"0.75\" x1=\"600\" y1=\"1200\" x2=\"100\" y2=\"1200\" />\n      <line opacity=\"0.25\" x1=\"2300\" y1=\"1200\" x2=\"1800\" y2=\"1200\" />\n      <line opacity=\"0.667\" x1=\"680.4\" y1=\"1500\" x2=\"247.4\" y2=\"1750\" />\n      <line opacity=\"0.167\" x1=\"2152.6\" y1=\"650\" x2=\"1719.6\" y2=\"900\" />\n      <line opacity=\"0.583\" x1=\"900\" y1=\"1719.6\" x2=\"650\" y2=\"2152.6\" />\n      <line opacity=\"0.083\" x1=\"1750\" y1=\"247.4\" x2=\"1500\" y2=\"680.4\" />\n      <animateTransform\n        attributeName=\"transform\"\n        attributeType=\"XML\"\n        type=\"rotate\"\n        keyTimes=\"0;0.08333;0.16667;0.25;0.33333;0.41667;0.5;0.58333;0.66667;0.75;0.83333;0.91667\"\n        values=\"0 1199 1199;30 1199 1199;60 1199 1199;90 1199 1199;120 1199 1199;150 1199 1199;180 1199 1199;210 1199 1199;240 1199 1199;270 1199 1199;300 1199 1199;330 1199 1199\"\n        dur=\"0.83333s\"\n        begin=\"0.08333s\"\n        repeatCount=\"indefinite\"\n        calcMode=\"discrete\"\n      />\n    </g>\n  </svg>\n)\n\nconst LOADERS = {\n  bars: Bars,\n  ring: Ring,\n  spin: Spin\n}\n\nconst DEFAULT_SPINNER = 'ring'\n\nexport interface LoaderProps\n  extends Omit<React.ComponentPropsWithoutRef<'svg'>, 'display' | 'opacity' | 'intent'>,\n    LoaderVariantProps {\n  variant?: keyof typeof LOADERS\n}\n\nconst Loader = (props: LoaderProps, ref: React.ForwardedRef<SVGSVGElement>) => {\n  const { className, variant = DEFAULT_SPINNER, intent, size, ...spinnerProps } = props\n  const LoaderPrimitive = LOADERS[variant in LOADERS ? variant : DEFAULT_SPINNER]\n\n  return (\n    <LoaderPrimitive\n      role=\"presentation\"\n      className={loaderStyles({\n        intent,\n        size,\n        className: ['ring'].includes(variant)\n          ? 'animate-spin'\n          : variant === 'spin'\n            ? 'stroke-current'\n            : className\n      })}\n      ref={ref}\n      {...spinnerProps}\n    />\n  )\n}\n\nexport { Loader }\n",
-    "type": "ui"
-  },
-  "radio": {
-    "component": "@/components/ui/radio",
-    "raw": "'use client'\n\nimport * as React from 'react'\n\nimport {\n  Radio as RadioPrimitive,\n  RadioGroup as RadioGroupPrimitive,\n  type RadioGroupProps as RACRadioGroupProps,\n  type RadioProps as RadioPrimitiveProps,\n  type ValidationResult\n} from 'react-aria-components'\nimport { tv } from 'tailwind-variants'\n\nimport { Description, FieldError, Label } from './field'\nimport { ctr } from './primitive'\n\ninterface RadioGroupProps extends Omit<RACRadioGroupProps, 'children'> {\n  label?: string\n  children?: React.ReactNode\n  description?: string\n  errorMessage?: string | ((validation: ValidationResult) => string)\n}\n\nconst RadioGroup = ({ label, description, errorMessage, children, ...props }: RadioGroupProps) => {\n  return (\n    <RadioGroupPrimitive {...props} className={ctr(props.className, 'group flex flex-col gap-2')}>\n      {label && <Label>{label}</Label>}\n      <div className=\"flex select-none gap-2 group-orientation-horizontal:flex-wrap group-orientation-horizontal:gap-2 sm:group-orientation-horizontal:gap-4 group-orientation-vertical:flex-col\">\n        {children}\n      </div>\n      {description && <Description>{description}</Description>}\n      <FieldError>{errorMessage}</FieldError>\n    </RadioGroupPrimitive>\n  )\n}\n\nconst radioStyles = tv({\n  base: 'size-4 shrink-0 rounded-full border bg-secondary transition',\n  variants: {\n    isSelected: {\n      false: 'border-toggle',\n      true: 'border-[4.5px] border-primary'\n    },\n    isFocused: {\n      true: [\n        'border-primary bg-primary/20 ring-4 ring-primary/20',\n        'group-invalid:border-danger/70 group-invalid:bg-danger/20 group-invalid:ring-danger/20'\n      ]\n    },\n    isInvalid: {\n      true: 'border-danger/70 bg-danger/20'\n    },\n    isDisabled: {\n      true: 'opacity-50'\n    }\n  }\n})\n\ninterface RadioProps extends RadioPrimitiveProps {\n  description?: string\n}\n\nconst Radio = ({ description, ...props }: RadioProps) => {\n  return (\n    <>\n      <RadioPrimitive\n        {...props}\n        className={ctr(\n          props.className,\n          'group flex items-center gap-2 text-sm text-fg transition disabled:text-fg/50 forced-colors:disabled:text-[GrayText]'\n        )}\n      >\n        {(renderProps) => (\n          <div className=\"flex gap-2\">\n            <div\n              className={radioStyles({\n                ...renderProps,\n                className: 'description' in props ? 'mt-1' : 'mt-0.5'\n              })}\n            />\n            <div className=\"flex flex-col gap-1\">\n              <>{props.children}</>\n              {description && <Description className=\"block\">{description}</Description>}\n            </div>\n          </div>\n        )}\n      </RadioPrimitive>\n    </>\n  )\n}\n\nexport { Radio, RadioGroup, radioStyles }\n",
-    "type": "ui"
-  },
-  "date-field": {
-    "component": "@/components/ui/date-field",
-    "raw": "'use client'\n\nimport {\n  DateField as DateFieldPrimitive,\n  type DateFieldProps as DateFieldPrimitiveProps,\n  DateInput as DateInputPrimitive,\n  type DateInputProps,\n  DateSegment,\n  type DateValue,\n  type ValidationResult\n} from 'react-aria-components'\nimport { tv } from 'tailwind-variants'\n\nimport { Description, FieldError, fieldGroupStyles, Label } from './field'\nimport { cn, cr, ctr } from './primitive'\n\ninterface DateFieldProps<T extends DateValue> extends DateFieldPrimitiveProps<T> {\n  label?: string\n  description?: string\n  errorMessage?: string | ((validation: ValidationResult) => string)\n}\n\nconst DateField = <T extends DateValue>({\n  label,\n  description,\n  errorMessage,\n  ...props\n}: DateFieldProps<T>) => {\n  return (\n    <DateFieldPrimitive {...props} className={ctr(props.className, 'flex flex-col gap-1')}>\n      {label && <Label>{label}</Label>}\n      <DateInput />\n      {description && <Description>{description}</Description>}\n      <FieldError>{errorMessage}</FieldError>\n    </DateFieldPrimitive>\n  )\n}\n\nconst segmentStyles = tv({\n  base: 'inline shrink-0 rounded p-0.5 tracking-wider text-fg caret-transparent outline outline-0 forced-color-adjust-none type-literal:px-0 lg:text-sm forced-colors:text-[ButtonText]',\n  variants: {\n    isPlaceholder: {\n      true: 'text-muted-fg'\n    },\n    isDisabled: {\n      true: 'text-fg/50 forced-colors:text-[GrayText]'\n    },\n    isFocused: {\n      true: [\n        'bg-primary text-primary-fg forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]',\n        'invalid:bg-danger invalid:text-danger-fg'\n      ]\n    }\n  }\n})\n\nconst DateInput = (props: Omit<DateInputProps, 'children'>) => {\n  return (\n    <DateInputPrimitive\n      className={cr(props.className, (className, renderProps) =>\n        fieldGroupStyles({\n          ...renderProps,\n          className: cn(\n            'min-w-sm block font-mono disabled:bg-secondary uppercase w-full py-2 px-2.5 text-base lg:text-sm/[1.4rem]',\n            className\n          )\n        })\n      )}\n      {...props}\n    >\n      {(segment) => <DateSegment segment={segment} className={segmentStyles} />}\n    </DateInputPrimitive>\n  )\n}\n\nexport { DateField, DateInput, segmentStyles, type DateFieldProps }\n",
-    "type": "ui"
-  },
-  "primitive": {
-    "component": "@/components/ui/primitive",
-    "raw": "'use client'\n\nimport * as React from 'react'\n\nimport { type ClassValue, clsx } from 'clsx'\nimport { composeRenderProps } from 'react-aria-components'\nimport { twMerge } from 'tailwind-merge'\nimport { tv } from 'tailwind-variants'\n\nconst cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs))\n\nconst composeTailwindRenderProps = <T,>(\n  className: string | ((v: T) => string) | undefined,\n  tw: string\n): string | ((v: T) => string) => {\n  return composeRenderProps(className, (className) => twMerge(tw, className))\n}\n\nconst focusRing = tv({\n  base: 'outline-none focus:outline-none forced-colors:outline-[Highlight]',\n  variants: {\n    isFocused: { true: 'ring-4 ring-ring/20' },\n    isInvalid: { true: 'ring-4 ring-danger/20' }\n  }\n})\n\nconst isServerSide = (): boolean => {\n  if (typeof window !== 'undefined') {\n    return false\n  }\n  if (typeof process !== 'undefined' && process.versions && process.versions.node) {\n    return true\n  }\n  return true\n}\n\nconst isIos = (userAgent?: string): boolean => {\n  if (isServerSide() && !userAgent) return false\n  const result = userAgent || navigator.userAgent\n  return /iPad|iPhone|iPod|iPadOS|iPhoneOS/.test(result)\n}\n\nconst focusStyles = tv({\n  extend: focusRing,\n  variants: {\n    isFocused: { true: 'border-ring' },\n    isInvalid: { true: 'border-danger' }\n  }\n})\n\nconst focusButtonStyles = tv({\n  base: 'outline outline-ring forced-colors:outline-[Highlight] outline-offset-2',\n  variants: {\n    isFocusVisible: {\n      false: 'outline-0',\n      true: 'outline-2'\n    }\n  }\n})\n\nconst useMediaQuery = (query: string) => {\n  const [value, setValue] = React.useState(false)\n\n  React.useEffect(() => {\n    const onChange = (event: MediaQueryListEvent) => {\n      setValue(event.matches)\n    }\n\n    const result = matchMedia(query)\n    result.addEventListener('change', onChange)\n    setValue(result.matches)\n\n    return () => result.removeEventListener('change', onChange)\n  }, [query])\n\n  return value\n}\n\nconst ctr = composeTailwindRenderProps\nconst tm = twMerge\nconst cr = composeRenderProps\n\nexport {\n  cn,\n  composeTailwindRenderProps,\n  cr,\n  ctr,\n  focusRing,\n  focusStyles,\n  focusButtonStyles,\n  tm,\n  twMerge,\n  useMediaQuery,\n  isIos\n}\n",
-    "type": "ui"
-  },
-  "visually-hidden": {
-    "component": "@/components/ui/visually-hidden",
-    "raw": "'use client'\n\nimport * as React from 'react'\n\nimport { useVisuallyHidden } from 'react-aria'\n\ntype VisuallyHiddenSpanProps = {\n  children: React.ReactNode\n}\n\nconst VisuallyHidden = ({ children }: VisuallyHiddenSpanProps) => {\n  const { visuallyHiddenProps } = useVisuallyHidden()\n\n  return <span {...visuallyHiddenProps}>{children}</span>\n}\n\nexport { VisuallyHidden }\n",
-    "type": "ui"
-  },
-  "date-picker": {
-    "component": "@/components/ui/date-picker",
-    "raw": "'use client'\n\nimport * as React from 'react'\n\nimport { IconCalendarDays } from 'justd-icons'\nimport {\n  DatePicker as DatePickerPrimitive,\n  type DatePickerProps as DatePickerPrimitiveProps,\n  type DateValue,\n  type DialogProps,\n  type PopoverProps,\n  type ValidationResult\n} from 'react-aria-components'\nimport { tv } from 'tailwind-variants'\n\nimport { Button } from './button'\nimport { Calendar } from './calendar'\nimport { DateInput } from './date-field'\nimport { Description, FieldError, FieldGroup, Label } from './field'\nimport { Popover } from './popover'\nimport { ctr } from './primitive'\nimport { RangeCalendar } from './range-calendar'\n\nconst datePickerStyles = tv({\n  slots: {\n    base: 'group flex flex-col gap-1',\n    datePickerIcon:\n      'group mr-1 h-7 dark:[&>[data-slot=icon]]:text-zinc-400 [&>[data-slot=icon]]:text-zinc-800 w-8 rounded outline-offset-0 hover:bg-transparent pressed:bg-transparent',\n    calendarIcon: 'size-4 text-muted-fg group-open:text-fg',\n    datePickerInput: 'w-full px-2 uppercase text-base lg:text-sm',\n    dateRangePickerInputStart: 'px-2 lg:text-sm uppercase text-base',\n    dateRangePickerInputEnd: 'flex-1 px-2 py-1.5 lg:text-sm uppercase text-base',\n    dateRangePickerDash:\n      'text-zinc-800 group-disabled:text-zinc-200 dark:text-zinc-200 group-disabled:dark:text-zinc-600 forced-colors:text-[ButtonText] group-disabled:forced-colors:text-[GrayText]'\n  }\n})\n\nconst { base, datePickerIcon, calendarIcon, datePickerInput } = datePickerStyles()\n\ninterface DatePickerOverlayProps\n  extends Omit<DialogProps, 'children' | 'className' | 'style'>,\n    Omit<PopoverProps, 'children' | 'className' | 'style'> {\n  className?: string | DialogProps['className'] | PopoverProps['className']\n  children?: React.ReactNode\n  closeButton?: boolean\n  range?: boolean\n}\n\nconst DatePickerOverlay = ({ closeButton = true, range, ...props }: DatePickerOverlayProps) => {\n  return (\n    <Popover.Content\n      showArrow={false}\n      className=\"flex justify-center p-4 sm:p-2 sm:pt-3 sm:max-w-[17.2rem] sm:min-w-[17rem]\"\n      {...props}\n    >\n      {range ? <RangeCalendar /> : <Calendar />}\n      {closeButton && (\n        <div className=\"sm:hidden py-2.5 flex justify-center mx-auto w-full max-w-[inherit]\">\n          <Popover.Close shape=\"circle\" className=\"w-full\">\n            Close\n          </Popover.Close>\n        </div>\n      )}\n    </Popover.Content>\n  )\n}\n\nconst DatePickerIcon = () => (\n  <Button size=\"square-petite\" appearance=\"plain\" className={datePickerIcon()}>\n    <IconCalendarDays aria-hidden className={calendarIcon()} />\n  </Button>\n)\n\ninterface DatePickerProps<T extends DateValue> extends DatePickerPrimitiveProps<T> {\n  label?: string\n  description?: string\n  errorMessage?: string | ((validation: ValidationResult) => string)\n}\n\nconst DatePicker = <T extends DateValue>({\n  label,\n  className,\n  description,\n  children,\n  errorMessage,\n  ...props\n}: DatePickerProps<T>) => {\n  return (\n    <DatePickerPrimitive {...props} className={ctr(className, base())}>\n      {label && <Label>{label}</Label>}\n      <FieldGroup className=\"min-w-40\">\n        <DateInput className={datePickerInput()} />\n        <DatePickerIcon />\n      </FieldGroup>\n      {description && <Description>{description}</Description>}\n      <FieldError>{errorMessage}</FieldError>\n      <DatePickerOverlay />\n    </DatePickerPrimitive>\n  )\n}\n\nexport {\n  DatePicker,\n  DatePickerIcon,\n  DatePickerOverlay,\n  type DatePickerProps,\n  type DateValue,\n  type ValidationResult\n}\n",
-    "type": "ui"
-  },
-  "container": {
-    "component": "@/components/ui/container",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { cn } from './primitive'\n\nconst Container = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div className={cn('mx-auto max-w-7xl px-4 sm:px-6 lg:px-8', className)} {...props} ref={ref} />\n  )\n)\nContainer.displayName = 'Container'\n\nexport { Container }\n",
-    "type": "ui"
-  },
-  "input-otp": {
-    "component": "@/components/ui/input-otp",
-    "raw": "'use client'\n\nimport * as React from 'react'\n\nimport { OTPInput, OTPInputContext } from 'input-otp'\nimport { IconBulletFill } from 'justd-icons'\n\nimport { cn } from './primitive'\n\nconst InputOTP = React.forwardRef<\n  React.ElementRef<typeof OTPInput>,\n  React.ComponentPropsWithoutRef<typeof OTPInput>\n>(({ className, containerClassName, ...props }, ref) => (\n  <OTPInput\n    data-1p-ignore\n    ref={ref}\n    containerClassName={cn(\n      'flex items-center gap-2 has-[:disabled]:opacity-50',\n      containerClassName\n    )}\n    className={cn('disabled:cursor-not-allowed', className)}\n    {...props}\n  />\n))\nInputOTP.displayName = 'InputOTP'\n\nconst InputOTPGroup = React.forwardRef<\n  React.ElementRef<'div'>,\n  React.ComponentPropsWithoutRef<'div'>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn('flex items-center gap-x-1.5', className)} {...props} />\n))\nInputOTPGroup.displayName = 'InputOTPGroup'\n\nconst InputOTPSlot = React.forwardRef<\n  React.ElementRef<'div'>,\n  React.ComponentPropsWithoutRef<'div'> & { index: number }\n>(({ index, className, ...props }, ref) => {\n  const inputOTPContext = React.useContext(OTPInputContext)\n  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'relative flex size-10 items-center justify-center rounded-md border border-input text-sm transition-all',\n        isActive && 'z-10 border-ring/70 ring-4 ring-ring/20',\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"h-4 w-px animate-caret-blink bg-fg duration-1000\" />\n        </div>\n      )}\n    </div>\n  )\n})\nInputOTPSlot.displayName = 'InputOTPSlot'\n\nconst InputOTPSeparator = React.forwardRef<\n  React.ElementRef<'div'>,\n  React.ComponentPropsWithoutRef<'div'>\n>(({ ...props }, ref) => (\n  <div ref={ref} role=\"separator\" {...props}>\n    <IconBulletFill className=\"size-2\" />\n  </div>\n))\nInputOTPSeparator.displayName = 'InputOTPSeparator'\n\nexport { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot }\n",
-    "type": "ui"
-  },
-  "tag-group": {
-    "component": "@/components/ui/tag-group",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport type {\n  TagGroupProps as TagGroupPrimitiveProps,\n  TagListProps,\n  TagProps as TagPrimitiveProps\n} from 'react-aria-components'\nimport {\n  Button,\n  Tag as TagPrimitive,\n  TagGroup as TagGroupPrimitive,\n  TagList as TagListPrimitive\n} from 'react-aria-components'\nimport { twMerge } from 'tailwind-merge'\nimport { tv } from 'tailwind-variants'\n\nimport { badgeIntents, badgeShapes, badgeStyles } from './badge'\nimport { Description, Label } from './field'\nimport { cn, cr, ctr, focusStyles } from './primitive'\n\nconst intents = {\n  primary: {\n    base: [\n      badgeIntents.primary,\n      '[&_[slot=remove]:hover]:bg-primary [&_[slot=remove]:hover]:text-primary-fg'\n    ],\n    selected: [\n      'bg-primary dark:hover:bg-primary dark:bg-primary hover:bg-primary ring-primary ring-inset text-primary-fg dark:text-primary-fg hover:text-primary-fg',\n      '[&_[slot=remove]:hover]:bg-primary-fg/80 [&_[slot=remove]:hover]:text-primary'\n    ]\n  },\n  secondary: {\n    base: [\n      badgeIntents.secondary,\n      '[&_[slot=remove]:hover]:bg-fg [&_[slot=remove]:hover]:text-background'\n    ],\n    selected: [\n      'bg-fg ring-fg/50 text-background dark:bg-fg/90 dark:text-secondary ring-inset',\n      '[&_[slot=remove]:hover]:bg-background [&_[slot=remove]:hover]:text-secondary-fg'\n    ]\n  },\n  success: {\n    base: [\n      badgeIntents.success,\n      '[&_[slot=remove]:hover]:bg-success [&_[slot=remove]:hover]:text-success-fg'\n    ],\n    selected: [\n      'bg-success dark:bg-success ring-success ring-inset dark:text-success-fg dark:hover:bg-success hover:bg-success text-success-fg hover:text-success-fg',\n      '[&_[slot=remove]:hover]:bg-success-fg/80 [&_[slot=remove]:hover]:text-success'\n    ]\n  },\n  warning: {\n    base: [\n      badgeIntents.warning,\n      '[&_[slot=remove]:hover]:bg-warning [&_[slot=remove]:hover]:text-warning-fg'\n    ],\n    selected: [\n      'bg-warning dark:hover:bg-warning dark:bg-warning dark:text-background hover:bg-warning text-warning-fg hover:text-warning-fg',\n      '[&_[slot=remove]:hover]:bg-warning-fg/80 [&_[slot=remove]:hover]:text-warning'\n    ]\n  },\n  danger: {\n    base: [\n      badgeIntents.danger,\n      '[&_[slot=remove]:hover]:bg-danger [&_[slot=remove]:hover]:text-danger-fg'\n    ],\n    selected: [\n      'bg-danger dark:bg-danger dark:hover:bg-danger/90 hover:bg-danger text-danger-fg ring-danger hover:text-danger-fg',\n      '[&_[slot=remove]:hover]:bg-danger-fg/80 [&_[slot=remove]:hover]:text-danger'\n    ]\n  }\n}\n\ntype RestrictedIntent = 'primary' | 'secondary'\n\ntype Intent = 'primary' | 'secondary' | 'success' | 'warning' | 'danger'\n\ntype Shape = keyof typeof badgeShapes\n\ntype TagGroupContextValue = {\n  intent: Intent\n  shape: Shape\n}\n\nconst TagGroupContext = React.createContext<TagGroupContextValue>({\n  intent: 'primary',\n  shape: 'square'\n})\n\nexport interface TagGroupProps extends TagGroupPrimitiveProps {\n  intent?: Intent\n  shape?: 'square' | 'circle'\n  errorMessage?: string\n  label?: string\n  description?: string\n}\n\nconst TagGroup = ({ children, ...props }: TagGroupProps) => {\n  return (\n    <TagGroupPrimitive\n      {...props}\n      className={twMerge('flex flex-wrap flex-col gap-1', props.className)}\n    >\n      <TagGroupContext.Provider\n        value={{\n          intent: props.intent || 'primary',\n          shape: props.shape || 'square'\n        }}\n      >\n        {props.label && <Label>{props.label}</Label>}\n        {children}\n        {props.description && <Description>{props.description}</Description>}\n      </TagGroupContext.Provider>\n    </TagGroupPrimitive>\n  )\n}\n\nconst TagList = <T extends object>({ className, ...props }: TagListProps<T>) => {\n  return <TagListPrimitive {...props} className={ctr(className, 'flex flex-wrap gap-2')} />\n}\n\nconst tagStyles = tv({\n  extend: focusStyles,\n  base: [badgeStyles.base, 'cursor-pointer jdt3lr2x'],\n  variants: {\n    isFocused: { true: 'ring-1' },\n    isDisabled: { true: 'opacity-50 cursor-default' },\n    allowsRemoving: { true: 'pr-1' }\n  }\n})\n\ninterface TagProps extends TagPrimitiveProps {\n  intent?: Intent\n  shape?: Shape\n}\n\nconst TagItem = ({ children, className, intent, shape, ...props }: TagProps) => {\n  const textValue = typeof children === 'string' ? children : undefined\n  const groupContext = React.useContext(TagGroupContext)\n\n  return (\n    <TagPrimitive\n      textValue={textValue}\n      {...props}\n      className={cr(className, (_, renderProps) => {\n        const finalIntent = intent || groupContext.intent\n        const finalShape = shape || groupContext.shape\n\n        return tagStyles({\n          ...renderProps,\n          className: cn([\n            intents[finalIntent]?.base,\n            badgeShapes[finalShape],\n            renderProps.isSelected ? intents[finalIntent].selected : undefined\n          ])\n        })\n      })}\n    >\n      {({ allowsRemoving }) => {\n        return (\n          <>\n            {children}\n            {allowsRemoving && (\n              <Button\n                slot=\"remove\"\n                className={cr('', (className) => {\n                  return twMerge(\n                    'rounded focus:outline-none size-3.5 grid place-content-center -mr-0.5 focus-visible:ring-1 focus-visible:ring-primary',\n                    className\n                  )\n                })}\n              >\n                <span className=\"rotate-45 text-base/4 -mr-px\">+</span>\n              </Button>\n            )}\n          </>\n        )\n      }}\n    </TagPrimitive>\n  )\n}\n\nconst Tag = {\n  Group: TagGroup,\n  Item: TagItem,\n  List: TagList\n}\n\nexport { Tag, type RestrictedIntent }\n",
-    "type": "ui"
-  },
-  "sheet": {
-    "component": "@/components/ui/sheet",
-    "raw": "'use client'\n\nimport * as React from 'react'\n\nimport type { DialogTriggerProps, Modal } from 'react-aria-components'\nimport {\n  Button,\n  type DialogProps,\n  DialogTrigger as DialogTriggerPrimitive,\n  Modal as ModalPrimitive,\n  ModalOverlay,\n  type ModalOverlayProps as ModalOverlayPrimitiveProps\n} from 'react-aria-components'\nimport { tv, type VariantProps } from 'tailwind-variants'\n\nimport { Dialog } from './dialog'\nimport { cr } from './primitive'\n\nconst sheetOverlayStyles = tv({\n  base: [\n    'fixed top-0 left-0 w-full h-[--visual-viewport-height] isolate z-50 flex items-center justify-center p-4'\n  ],\n  variants: {\n    isBlurred: {\n      true: 'backdrop-blur',\n      false: 'bg-black/25 dark:bg-black/60'\n    },\n    isEntering: {\n      true: 'animate-in fade-in duration-200 ease-out'\n    },\n    isExiting: {\n      true: 'animate-out fade-out duration-200 ease-in'\n    }\n  }\n})\n\ntype Sides = 'top' | 'bottom' | 'left' | 'right'\nconst generateCompoundVariants = (sides: Array<Sides>) => {\n  return sides.map((side) => ({\n    side,\n    isStack: true,\n    className:\n      side === 'top'\n        ? 'top-2 inset-x-2 rounded-lg border'\n        : side === 'bottom'\n          ? 'bottom-2 inset-x-2 rounded-lg border'\n          : side === 'left'\n            ? 'left-2 inset-y-2 rounded-lg border'\n            : 'right-2 inset-y-2 rounded-lg border'\n  }))\n}\n\nconst sheetContentStyles = tv({\n  base: 'fixed z-50 grid gap-4 bg-overlay text-overlay-fg shadow-lg transition ease-in-out',\n  variants: {\n    isEntering: {\n      true: 'duration-300 animate-in '\n    },\n    isExiting: {\n      true: 'duration-200 animate-out'\n    },\n    side: {\n      top: 'inset-x-0 top-0 rounded-b-2xl border-b entering:slide-in-from-top exiting:slide-out-to-top',\n      bottom:\n        'inset-x-0 bottom-0 rounded-t-2xl border-t entering:slide-in-from-bottom exiting:slide-out-to-bottom',\n      left: 'inset-y-0 left-0 h-auto w-[19rem] sm:w-3/4 overflow-y-auto border-r entering:slide-in-from-left exiting:slide-out-to-left sm:max-w-xs',\n      right:\n        'inset-y-0 right-0 h-auto w-[19rem] sm:w-3/4 overflow-y-auto border-l entering:slide-in-from-right exiting:slide-out-to-right sm:max-w-xs'\n    },\n    isStack: {\n      true: '',\n      false: ''\n    }\n  },\n  compoundVariants: generateCompoundVariants(['top', 'bottom', 'left', 'right'])\n})\n\nconst Sheet = ({ children }: DialogTriggerProps) => {\n  return <DialogTriggerPrimitive>{children}</DialogTriggerPrimitive>\n}\n\ninterface SheetContentProps\n  extends Omit<React.ComponentProps<typeof Modal>, 'children' | 'className'>,\n    Omit<ModalOverlayPrimitiveProps, 'className'>,\n    VariantProps<typeof sheetOverlayStyles> {\n  'aria-label'?: DialogProps['aria-label']\n  'aria-labelledby'?: DialogProps['aria-labelledby']\n  role?: DialogProps['role']\n  closeButton?: boolean\n  isBlurred?: boolean\n  isStack?: boolean\n  side?: Sides\n  classNames?: {\n    overlay?: ModalOverlayPrimitiveProps['className']\n    content?: ModalOverlayPrimitiveProps['className']\n  }\n}\n\nconst SheetContent = ({\n  classNames,\n  isBlurred = false,\n  isDismissable = true,\n  side = 'right',\n  role = 'dialog',\n  closeButton = true,\n  isStack = true,\n  ...props\n}: SheetContentProps) => {\n  const _isDismissable = role === 'alertdialog' ? false : isDismissable\n  return (\n    <ModalOverlay\n      isDismissable={_isDismissable}\n      className={cr(classNames?.overlay, (className, renderProps) => {\n        return sheetOverlayStyles({\n          ...renderProps,\n          isBlurred,\n          className\n        })\n      })}\n      {...props}\n    >\n      <ModalPrimitive\n        className={cr(classNames?.content, (className, renderProps) =>\n          sheetContentStyles({\n            ...renderProps,\n            side,\n            isStack,\n            className\n          })\n        )}\n        {...props}\n      >\n        <Dialog role={role} className=\"h-full\">\n          {(values) => (\n            <>\n              {props.children}\n              {closeButton && (\n                <Dialog.CloseIndicator\n                  className=\"top-2.5 right-2.5\"\n                  close={values.close}\n                  isDismissable={_isDismissable}\n                />\n              )}\n            </>\n          )}\n        </Dialog>\n      </ModalPrimitive>\n    </ModalOverlay>\n  )\n}\n\nSheet.Trigger = Button\nSheet.Footer = Dialog.Footer\nSheet.Content = SheetContent\nSheet.Header = Dialog.Header\nSheet.Title = Dialog.Title\nSheet.Description = Dialog.Description\nSheet.Body = Dialog.Body\nSheet.Close = Dialog.Close\n\nexport { Sheet }\n",
-    "type": "ui"
-  },
-  "field": {
-    "component": "@/components/ui/field",
-    "raw": "'use client'\n\nimport * as React from 'react'\n\nimport {\n  FieldError as FieldErrorPrimitive,\n  type FieldErrorProps,\n  Group,\n  type GroupProps,\n  Input as InputPrimitive,\n  type InputProps,\n  Label as LabelPrimitive,\n  type LabelProps,\n  Text,\n  type TextFieldProps as TextFieldPrimitiveProps,\n  type TextProps,\n  type ValidationResult\n} from 'react-aria-components'\nimport { tv } from 'tailwind-variants'\n\nimport { cr, ctr } from './primitive'\n\n// primitive styles\n\ninterface FieldProps {\n  label?: string\n  placeholder?: string\n  description?: string\n  errorMessage?: string | ((validation: ValidationResult) => string)\n  'aria-label'?: TextFieldPrimitiveProps['aria-label']\n  'aria-labelledby'?: TextFieldPrimitiveProps['aria-labelledby']\n}\n\n// primitive styles\nconst fieldBorderStyles = tv({\n  base: 'group-focus-within:border-ring forced-colors:border-[Highlight]',\n  variants: {\n    isInvalid: {\n      true: 'border-danger/70 group-focus-within:border-danger/70 forced-colors:border-[Mark]'\n    }\n  }\n})\n\nconst fieldGroupPrefixStyles = tv({\n  base: [\n    'flex group-invalid:border-danger group-disabled:bg-secondary group-disabled:opacity-50 items-center group-invalid:focus-within:ring-danger/20',\n    '[&>.x2e2>.kbt32x]:size-7 [&>.x2e2>.kbt32x]:rounded-sm [&>.x2e2:has(.kbt32x)]:size-9 [&>.x2e2:has(.kbt32x)]:grid [&>.x2e2:has(.kbt32x)]:place-items-center',\n    '[&>.x2e2>.kbt32x]:before:rounded-[calc(theme(borderRadius.sm)-1px)] [&>.x2e2>.kbt32x]:after:rounded-[calc(theme(borderRadius.sm)-1px)] dark:[&>.x2e2>.kbt32x]:after:rounded-sm',\n    '[&>.isSfx:has(.kbt32x)]:-mr-2 [&>.isPfx:has(.kbt32x)]:-ml-2 [&>.isSfx>.kbt32x]:mr-0.5 [&>.isPfx>.kbt32x]:ml-0.5'\n  ]\n})\n\nconst fieldStyles = tv({\n  slots: {\n    description: 'text-pretty text-base/6 text-muted-fg sm:text-sm/6',\n    label: 'w-fit cursor-default font-medium text-secondary-fg text-sm',\n    fieldError: 'text-sm text-danger forced-colors:text-[Mark]',\n    input: [\n      'w-full min-w-0 bg-transparent p-2 text-base text-fg placeholder-muted-fg outline-none focus:outline-none lg:text-sm'\n    ]\n  }\n})\n\nconst { description, label, fieldError, input } = fieldStyles()\n\nconst Label = ({ className, ...props }: LabelProps) => {\n  return <LabelPrimitive {...props} className={label({ className })} />\n}\n\nconst Description = ({ className, ...props }: TextProps) => {\n  return <Text {...props} slot=\"description\" className={description({ className })} />\n}\n\nconst FieldError = ({ className, ...props }: FieldErrorProps) => {\n  return <FieldErrorPrimitive {...props} className={ctr(className, fieldError())} />\n}\n\nconst fieldGroupStyles = tv({\n  base: [\n    'group flex h-10 items-center overflow-hidden rounded-lg border border-input bg-background transition disabled:opacity-50 disabled:bg-secondary forced-colors:bg-[Field]',\n    'focus-within:border-ring focus-within:ring-4 focus-within:ring-ring/20',\n    'focus-within:invalid:border-danger focus-within:invalid:ring-4 focus-within:invalid:ring-danger/20',\n    'invalid:border-danger',\n    'has-[.isPfx]:pl-2.5 has-[.isSfx]:pr-2.5 [&_[data-slot=icon]]:size-4 has-[.atrs]:shrink-0 has-[.atrs]:text-muted-fg'\n  ]\n})\n\nconst FieldGroup = ({ className, ...props }: GroupProps) => {\n  return (\n    <Group\n      {...props}\n      className={cr(className, (className, renderProps) =>\n        fieldGroupStyles({ ...renderProps, className })\n      )}\n    />\n  )\n}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, ...props }, ref) => {\n  return <InputPrimitive ref={ref} {...props} className={ctr(className, input())} />\n})\nInput.displayName = 'Input'\n\nexport {\n  Description,\n  fieldBorderStyles,\n  FieldError,\n  FieldGroup,\n  fieldGroupPrefixStyles,\n  fieldGroupStyles,\n  Input,\n  InputPrimitive,\n  Label,\n  type FieldProps\n}\n",
-    "type": "ui"
-  },
-  "drop-zone": {
-    "component": "@/components/ui/drop-zone",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { DropZone as DropPrimitiveZone, type DropZoneProps } from 'react-aria-components'\nimport { tv } from 'tailwind-variants'\n\nimport { cr, focusStyles } from './primitive'\n\nconst dropZoneStyles = tv({\n  extend: focusStyles,\n  base: 'group has-[slot=description]:text-center flex max-h-[200px] p-6 max-w-xl flex-col items-center justify-center gap-2 rounded-md border border-dashed text-sm',\n  variants: {\n    isDropTarget: {\n      true: 'bg-primary/10 ring-4 ring-primary/20 [&_.text-muted-fg]:text-primary-fg border-solid border-primary'\n    }\n  }\n})\n\nconst DropZone = ({ className, ...props }: DropZoneProps) => (\n  <DropPrimitiveZone\n    className={cr(className, (className, renderProps) =>\n      dropZoneStyles({ ...renderProps, className })\n    )}\n    {...props}\n  />\n)\nexport { DropZone }\n",
-    "type": "ui"
-  },
-  "toolbar": {
-    "component": "@/components/ui/toolbar",
-    "raw": "'use client'\n\nimport * as React from 'react'\n\nimport type {\n  GroupProps,\n  SeparatorProps,\n  ToolbarProps as ToolbarPrimitiveProps\n} from 'react-aria-components'\nimport { Group, Toolbar as ToolbarPrimitive } from 'react-aria-components'\nimport { tv } from 'tailwind-variants'\n\nimport { cn, cr } from './primitive'\nimport { Separator } from './separator'\nimport type { ToggleProps } from './toggle'\nimport { Toggle, toggleStyles } from './toggle'\n\nconst toolbarStyles = tv({\n  base: 'flex gap-2 group',\n  variants: {\n    orientation: {\n      horizontal:\n        'flex-row [&::-webkit-scrollbar]:hidden [scrollbar-width:none] [-ms-overflow-style:none]',\n      vertical: 'flex-col items-start'\n    }\n  }\n})\n\nconst ToolbarSeparator = ({ className, ...props }: SeparatorProps) => {\n  const { orientation } = React.useContext(ToolbarContext)\n  const effectiveOrientation = orientation === 'vertical' ? 'horizontal' : 'vertical'\n  return (\n    <Separator\n      orientation={effectiveOrientation}\n      className={cn(effectiveOrientation === 'vertical' ? 'mx-1.5' : 'my-1.5 w-9', className)}\n      {...props}\n    />\n  )\n}\n\nconst ToolbarContext = React.createContext<{ orientation?: ToolbarProps['orientation'] }>({\n  orientation: 'horizontal'\n})\n\ninterface ToolbarProps extends ToolbarPrimitiveProps {}\n\nconst Toolbar = ({ orientation = 'horizontal', ...props }: ToolbarProps) => {\n  return (\n    <ToolbarContext.Provider value={{ orientation }}>\n      <ToolbarPrimitive\n        orientation={orientation}\n        {...props}\n        className={cr(props.className, (className, renderProps) =>\n          toolbarStyles({ ...renderProps, className })\n        )}\n      />\n    </ToolbarContext.Provider>\n  )\n}\n\nconst toolbarGroupStyles = tv({\n  base: ['flex gap-2', 'group-orientation-vertical:flex-col group-orientation-vertical:items-start']\n})\n\nconst ToolbarGroupContext = React.createContext<{ isDisabled?: boolean }>({})\n\nconst ToolbarGroup = ({ isDisabled, ...props }: GroupProps) => {\n  return (\n    <ToolbarGroupContext.Provider value={{ isDisabled }}>\n      <Group className={toolbarGroupStyles()} {...props}>\n        {props.children}\n      </Group>\n    </ToolbarGroupContext.Provider>\n  )\n}\n\nconst ToolbarItem = ({ isDisabled, ...props }: ToggleProps) => {\n  const context = React.useContext(ToolbarGroupContext)\n  const effectiveIsDisabled = isDisabled || context.isDisabled\n\n  return (\n    <Toggle\n      isDisabled={effectiveIsDisabled}\n      {...props}\n      className={cr(props.className, (className, renderProps) =>\n        toggleStyles({\n          ...renderProps,\n          appearance: props.appearance,\n          size: props.size,\n          shape: props.shape,\n          className\n        })\n      )}\n    />\n  )\n}\n\nToolbar.Group = ToolbarGroup\nToolbar.Separator = ToolbarSeparator\nToolbar.Item = ToolbarItem\n\nexport { Toolbar }\n",
-    "type": "ui"
-  },
-  "grid": {
-    "component": "@/components/ui/grid",
-    "raw": "'use client'\n\nimport * as React from 'react'\n\nimport { Collection } from 'react-aria-components'\nimport { tv, type VariantProps } from 'tailwind-variants'\n\nimport { cn } from './primitive'\n\nconst gridStyles = tv(\n  {\n    base: 'grid',\n    variants: {\n      // Columns\n      columns: {\n        1: 'grid-cols-1',\n        2: 'grid-cols-2',\n        3: 'grid-cols-3',\n        4: 'grid-cols-4',\n        5: 'grid-cols-5',\n        6: 'grid-cols-6',\n        7: 'grid-cols-7',\n        8: 'grid-cols-8',\n        9: 'grid-cols-9',\n        10: 'grid-cols-10',\n        11: 'grid-cols-11',\n        12: 'grid-cols-12'\n      },\n\n      // Rows\n      rows: {\n        1: 'grid-rows-1',\n        2: 'grid-rows-2',\n        3: 'grid-rows-3',\n        4: 'grid-rows-4',\n        5: 'grid-rows-5',\n        6: 'grid-rows-6',\n        7: 'grid-rows-7',\n        8: 'grid-rows-8',\n        9: 'grid-rows-9',\n        10: 'grid-rows-10',\n        11: 'grid-rows-11',\n        12: 'grid-rows-12'\n      },\n\n      // Flow\n      flow: {\n        row: 'grid-flow-row',\n        col: 'grid-flow-col',\n        rowDense: 'grid-flow-row-dense',\n        colDense: 'grid-flow-col-dense',\n        dense: 'grid-flow-dense'\n      },\n\n      // Gap\n      gap: {\n        0: 'gap-0',\n        0.5: 'gap-0.5',\n        1: 'gap-1',\n        1.5: 'gap-1.5',\n        2: 'gap-2',\n        2.5: 'gap-2.5',\n        3: 'gap-3',\n        3.5: 'gap-3.5',\n        4: 'gap-4',\n        5: 'gap-5',\n        6: 'gap-6',\n        7: 'gap-7',\n        8: 'gap-8',\n        9: 'gap-9',\n        10: 'gap-10',\n        11: 'gap-11',\n        12: 'gap-12',\n        14: 'gap-14',\n        16: 'gap-16',\n        20: 'gap-20',\n        24: 'gap-24'\n      },\n      gapX: {\n        0: 'gap-x-0',\n        0.5: 'gap-x-0.5',\n        1: 'gap-x-1',\n        1.5: 'gap-x-1.5',\n        2: 'gap-x-2',\n        2.5: 'gap-x-2.5',\n        3: 'gap-x-3',\n        3.5: 'gap-x-3.5',\n        4: 'gap-x-4',\n        5: 'gap-x-5',\n        6: 'gap-x-6',\n        7: 'gap-x-7',\n        8: 'gap-x-8',\n        9: 'gap-x-9',\n        10: 'gap-x-10',\n        11: 'gap-x-11',\n        12: 'gap-x-12',\n        14: 'gap-x-14',\n        16: 'gap-x-16',\n        20: 'gap-x-20',\n        24: 'gap-x-24'\n      },\n      gapY: {\n        0: 'gap-y-0',\n        0.5: 'gap-y-0.5',\n        1: 'gap-y-1',\n        1.5: 'gap-y-1.5',\n        2: 'gap-y-2',\n        2.5: 'gap-y-2.5',\n        3: 'gap-y-3',\n        3.5: 'gap-y-3.5',\n        4: 'gap-y-4',\n        5: 'gap-y-5',\n        6: 'gap-y-6',\n        7: 'gap-y-7',\n        8: 'gap-y-8',\n        9: 'gap-y-9',\n        10: 'gap-y-10',\n        11: 'gap-y-11',\n        12: 'gap-y-12',\n        14: 'gap-y-14',\n        16: 'gap-y-16',\n        20: 'gap-y-20',\n        24: 'gap-y-24'\n      }\n    },\n    defaultVariants: {\n      columns: 1\n    }\n  },\n  {\n    responsiveVariants: true\n  }\n)\n\ninterface GridProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof gridStyles> {\n  className?: string\n  debug?: boolean\n}\n\nconst Grid = ({ className, gap, gapX, gapY, flow, columns, rows, ...props }: GridProps) => {\n  return (\n    <div\n      aria-label={props['aria-label'] || 'grid'}\n      className={gridStyles({\n        gap: gap ?? gapX ?? gapY,\n        gapX: gapX ?? gap,\n        gapY: gapY ?? gap,\n        flow: flow ?? 'row',\n        columns: columns ?? 1,\n        rows: rows ?? 1,\n        className:\n          'debug' in props\n            ? cn('[&>.grid-cell]:border [&>.grid-cell]:border-warning', className)\n            : className\n      })}\n      {...props}\n    >\n      {props.children}\n    </div>\n  )\n}\n\nconst gridItemStyles = tv(\n  {\n    base: 'grid-cell focus:outline-none',\n    variants: {\n      colSpan: {\n        auto: 'col-auto',\n        1: 'col-span-1',\n        2: 'col-span-2',\n        3: 'col-span-3',\n        4: 'col-span-4',\n        5: 'col-span-5',\n        6: 'col-span-6',\n        7: 'col-span-7',\n        8: 'col-span-8',\n        9: 'col-span-9',\n        10: 'col-span-10',\n        11: 'col-span-11',\n        12: 'col-span-12',\n        full: 'col-span-full'\n      },\n      colStart: {\n        1: 'col-start-1',\n        2: 'col-start-2',\n        3: 'col-start-3',\n        4: 'col-start-4',\n        5: 'col-start-5',\n        6: 'col-start-6',\n        7: 'col-start-7',\n        8: 'col-start-8',\n        9: 'col-start-9',\n        10: 'col-start-10',\n        11: 'col-start-11',\n        12: 'col-start-12',\n        13: 'col-start-13',\n        auto: 'col-start-auto'\n      },\n      colEnd: {\n        1: 'col-end-1',\n        2: 'col-end-2',\n        3: 'col-end-3',\n        4: 'col-end-4',\n        5: 'col-end-5',\n        6: 'col-end-6',\n        7: 'col-end-7',\n        8: 'col-end-8',\n        9: 'col-end-9',\n        10: 'col-end-10',\n        11: 'col-end-11',\n        12: 'col-end-12',\n        13: 'col-end-13',\n        auto: 'col-end-auto'\n      },\n      rowSpan: {\n        auto: 'row-auto',\n        1: 'row-span-1',\n        2: 'row-span-2',\n        3: 'row-span-3',\n        4: 'row-span-4',\n        5: 'row-span-5',\n        6: 'row-span-6',\n        7: 'row-span-7',\n        8: 'row-span-8',\n        9: 'row-span-9',\n        10: 'row-span-10',\n        11: 'row-span-11',\n        12: 'row-span-12',\n        full: 'row-span-full'\n      },\n      rowStart: {\n        1: 'row-start-1',\n        2: 'row-start-2',\n        3: 'row-start-3',\n        4: 'row-start-4',\n        5: 'row-start-5',\n        6: 'row-start-6',\n        7: 'row-start-7',\n        8: 'row-start-8',\n        9: 'row-start-9',\n        10: 'row-start-10',\n        11: 'row-start-11',\n        12: 'row-start-12',\n        13: 'row-start-13',\n        auto: 'row-start-auto'\n      },\n      rowEnd: {\n        1: 'row-end-1',\n        2: 'row-end-2',\n        3: 'row-end-3',\n        4: 'row-end-4',\n        5: 'row-end-5',\n        6: 'row-end-6',\n        7: 'row-end-7',\n        8: 'row-end-8',\n        9: 'row-end-9',\n        10: 'row-end-10',\n        11: 'row-end-11',\n        12: 'row-end-12',\n        13: 'row-end-13',\n        auto: 'row-end-auto'\n      }\n    }\n  },\n  {\n    responsiveVariants: ['sm', 'md', 'lg', 'xl', '2xl']\n  }\n)\n\ninterface GridItemProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof gridItemStyles> {\n  className?: string\n}\n\nconst GridItem = ({\n  children,\n  className,\n  colSpan,\n  rowSpan,\n  colStart,\n  colEnd,\n  rowStart,\n  rowEnd,\n  ...props\n}: GridItemProps) => {\n  return (\n    <div\n      className={gridItemStyles({\n        colSpan,\n        rowSpan,\n        colStart,\n        colEnd,\n        rowStart,\n        rowEnd,\n        className\n      })}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\n\nGrid.Collection = Collection\nGrid.Item = GridItem\n\nexport { Grid, gridStyles, gridItemStyles }\n",
-    "type": "ui"
-  },
-  "meter": {
-    "component": "@/components/ui/meter",
-    "raw": "'use client'\n\nimport * as React from 'react'\n\nimport { motion } from 'framer-motion'\nimport { IconTriangleInfoFill } from 'justd-icons'\nimport type { MeterProps as AriaMeterProps } from 'react-aria-components'\nimport { Meter as MeterPrimitive } from 'react-aria-components'\n\nimport { Label } from './field'\nimport { ctr } from './primitive'\n\nexport interface MeterProps extends AriaMeterProps {\n  label?: string\n}\n\nconst Meter = ({ label, ...props }: MeterProps) => {\n  return (\n    <MeterPrimitive {...props} className={ctr(props.className, 'flex flex-col gap-1')}>\n      {({ percentage, valueText }) => (\n        <>\n          <div className=\"flex w-full justify-between gap-2\">\n            <Label>{label}</Label>\n            <span className={`text-sm ${percentage >= 80 ? 'text-danger' : 'text-muted-fg'}`}>\n              {percentage >= 80 && (\n                <IconTriangleInfoFill\n                  aria-label=\"Alert\"\n                  className=\"inline-block size-4 align-text-bottom\"\n                />\n              )}\n              {' ' + valueText}\n            </span>\n          </div>\n          <div className=\"relative h-2 min-w-64 rounded-full bg-muted outline outline-1 -outline-offset-1 outline-transparent\">\n            <motion.div\n              className=\"absolute left-0 top-0 h-full rounded-full forced-colors:bg-[Highlight]\"\n              initial={{ width: '0%', backgroundColor: getColor(0) }}\n              animate={{\n                width: `${percentage}%`,\n                backgroundColor: getColor(percentage)\n              }}\n              transition={{ duration: 0.5 }}\n            />\n          </div>\n        </>\n      )}\n    </MeterPrimitive>\n  )\n}\n\nconst getColor = (percentage: number) => {\n  if (percentage < 30) {\n    return '#0d6efd' // Blue\n  }\n\n  if (percentage < 50) {\n    return '#198754' // Green\n  }\n\n  if (percentage < 70) {\n    return '#ffc107' // Yellow\n  }\n\n  if (percentage < 80) {\n    return '#f97316' // Orange\n  }\n\n  return '#e11d48' // Red\n}\n\nexport { Meter, getColor }\n",
-    "type": "ui"
-  },
-  "time-field": {
-    "component": "@/components/ui/time-field",
-    "raw": "'use client'\n\nimport * as React from 'react'\n\nimport {\n  TimeField as TimeFieldPrimitive,\n  type TimeFieldProps as TimeFieldPrimitiveProps,\n  type TimeValue,\n  type ValidationResult\n} from 'react-aria-components'\nimport { tv } from 'tailwind-variants'\n\nimport { DateInput } from './date-field'\nimport { Description, FieldError, fieldGroupStyles, Label } from './field'\nimport { ctr } from './primitive'\n\nexport interface TimeFieldProps<T extends TimeValue> extends TimeFieldPrimitiveProps<T> {\n  label?: string\n  description?: string\n  errorMessage?: string | ((validation: ValidationResult) => string)\n}\n\nconst timeFieldStyles = tv({\n  extend: fieldGroupStyles,\n  base: 'flex w-fit font-mono min-w-28 justify-around whitespace-nowrap p-2 lg:text-sm'\n})\n\nconst TimeField = <T extends TimeValue>({\n  label,\n  className,\n  description,\n  errorMessage,\n  ...props\n}: TimeFieldProps<T>) => {\n  return (\n    <TimeFieldPrimitive {...props} className={ctr(className, 'flex flex-col gap-1')}>\n      <Label>{label}</Label>\n      <DateInput className={timeFieldStyles} />\n      {description && <Description>{description}</Description>}\n      <FieldError>{errorMessage}</FieldError>\n    </TimeFieldPrimitive>\n  )\n}\n\nexport { TimeField }\n",
-    "type": "ui"
-  },
-  "breadcrumbs": {
-    "component": "@/components/ui/breadcrumbs",
-    "raw": "'use client'\n\nimport { IconChevronRight } from 'justd-icons'\nimport type { BreadcrumbProps, BreadcrumbsProps } from 'react-aria-components'\nimport {\n  Breadcrumb as BreadcrumbPrimitive,\n  Breadcrumbs as BreadcrumbsPrimitive,\n  type LinkProps\n} from 'react-aria-components'\n\nimport { Link } from './link'\nimport { cn } from './primitive'\n\nconst Breadcrumbs = <T extends object>({ className, ...props }: BreadcrumbsProps<T>) => {\n  return <BreadcrumbsPrimitive {...props} className={cn('flex gap-1', className)} />\n}\n\nconst Breadcrumb = ({ className, ...props }: BreadcrumbProps & LinkProps) => {\n  return (\n    <BreadcrumbPrimitive {...props} className={cn('flex items-center gap-1', className)}>\n      <Link href={props.href} {...props} />\n      {'href' in props && <IconChevronRight className=\"size-4 shrink-0 text-muted-fg\" />}\n    </BreadcrumbPrimitive>\n  )\n}\n\nexport { Breadcrumb, Breadcrumbs }\n",
-    "type": "ui"
-  },
-  "accordion": {
-    "component": "@/components/ui/accordion",
-    "raw": "'use client'\n\nimport * as React from 'react'\n\nimport type { MotionProps } from 'framer-motion'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport { IconChevronDown } from 'justd-icons'\nimport type { ButtonProps } from 'react-aria-components'\nimport { Button } from 'react-aria-components'\nimport { twMerge } from 'tailwind-merge'\nimport { tv } from 'tailwind-variants'\n\nimport { cn, cr } from './primitive'\n\ninterface AccordionContextType extends React.HtmlHTMLAttributes<HTMLDivElement> {\n  hideBorder?: boolean\n  hideIndicator?: boolean\n  disabledKeys?: number[]\n  defaultExpandedKeys?: number[] | string[]\n}\n\nconst AccordionContext = React.createContext<AccordionContextType>({})\nconst useAccordion = () => React.useContext(AccordionContext)\n\ninterface AccordionProps extends AccordionContextType {\n  children: React.ReactNode\n}\n\nconst Accordion = ({\n  children,\n  disabledKeys,\n  hideIndicator,\n  hideBorder,\n  defaultExpandedKeys,\n  ...props\n}: AccordionProps) => {\n  return (\n    <AccordionContext.Provider\n      value={{ hideIndicator, defaultExpandedKeys, hideBorder, disabledKeys }}\n    >\n      <div {...props}>{children}</div>\n    </AccordionContext.Provider>\n  )\n}\n\nconst accordionItemStyles = tv({\n  base: 'zwx3ai flex group pb-3 relative w-full flex-col border-b'\n})\n\ninterface AccordionItemContextProps {\n  setExpanded?: (index: null | number | string) => void\n  isOpen?: boolean\n  currentId: number | string\n}\n\nconst AccordionItemContext = React.createContext<AccordionItemContextProps | undefined>(undefined)\nconst useAccordionItem = () => {\n  const context = React.useContext(AccordionItemContext)\n  if (!context) {\n    throw new Error('AccordionItem must be used within an Accordion')\n  }\n  return context\n}\n\ninterface AccordionItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  currentId: number | string\n}\n\nconst AccordionItem = ({ className, children, currentId }: AccordionItemProps) => {\n  const { defaultExpandedKeys, disabledKeys } = useAccordion()\n  const [expanded, setExpanded] = React.useState<any>(\n    // @ts-ignore - TS doesn't know that defaultExpandedKeys is an array of numbers\n    defaultExpandedKeys?.includes(currentId) ? currentId : false\n  )\n  const isOpen = currentId === expanded\n  const isLocked = disabledKeys?.includes(currentId as number)\n  return (\n    <AccordionItemContext.Provider value={{ setExpanded, isOpen, currentId }}>\n      <div\n        data-slot=\"ai-31kxlae0321lsd\"\n        data-locked={isLocked ?? undefined}\n        data-open={isOpen ?? undefined}\n        className={accordionItemStyles({ className })}\n      >\n        {children}\n      </div>\n    </AccordionItemContext.Provider>\n  )\n}\n\ninterface AccordionContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n}\n\nconst AccordionContent = ({ className, children }: AccordionContentProps) => {\n  const { isOpen } = useAccordionItem()\n  return (\n    <AnimatePresence initial={false}>\n      {isOpen && (\n        <motion.section\n          className={cn('overflow-hidden pr-6 dk32xd', className)}\n          initial=\"collapsed\"\n          animate=\"open\"\n          exit=\"collapsed\"\n          variants={{\n            open: { opacity: 1, height: 'initial' },\n            collapsed: { opacity: 0, height: 0 }\n          }}\n          transition={{ duration: 0.4, ease: [0.04, 0.62, 0.23, 0.98] }}\n        >\n          <div className=\"pb-0 pt-1\">{children}</div>\n        </motion.section>\n      )}\n    </AnimatePresence>\n  )\n}\n\ninterface AccordionTriggerProps\n  extends Omit<ButtonProps & React.RefAttributes<HTMLButtonElement> & MotionProps, 'ref'> {\n  children: React.ReactNode\n}\n\nconst accordionTriggerStyles = tv({\n  base: [\n    'flex flex-1 rounded-lg text-muted-fg hover:text-fg [&>[data-slot=icon]]:size-6 items-center gap-x-2 pt-3 font-medium'\n  ],\n  variants: {\n    isFocused: {\n      true: 'outline-none text-fg'\n    },\n    isOpen: {\n      true: 'text-fg'\n    },\n    isDisabled: {\n      true: 'opacity-50 cursor-default'\n    }\n  }\n})\n\nconst AccordionTrigger = ({ className, children, ...props }: AccordionTriggerProps) => {\n  const { setExpanded, isOpen, currentId } = useAccordionItem()\n  const { hideIndicator, disabledKeys } = useAccordion()\n  const isLocked = disabledKeys?.includes(currentId as number)\n\n  const handlePress = () => {\n    if (setExpanded) {\n      setExpanded(isOpen ? null : currentId)\n    }\n  }\n\n  const onKeyDownHandler = (e: React.KeyboardEvent<HTMLButtonElement>) => {\n    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {\n      e.preventDefault()\n      const buttons = document.querySelectorAll('div[data-slot=\"ai-31kxlae0321lsd\"] > button')\n      const currentButton = e.currentTarget\n      const currentIndex = Array.from(buttons).indexOf(currentButton)\n      const totalItems = buttons.length\n      let nextIndex = currentIndex + (e.key === 'ArrowDown' ? 1 : -1)\n\n      if (nextIndex >= totalItems) {\n        nextIndex = 0\n      } else if (nextIndex < 0) {\n        nextIndex = totalItems - 1\n      }\n\n      ;(buttons[nextIndex] as HTMLElement).focus()\n    }\n  }\n\n  return (\n    <Button\n      {...props}\n      isDisabled={isLocked}\n      onKeyDown={onKeyDownHandler}\n      onPress={handlePress}\n      className={cr(className, (className, renderProps) =>\n        accordionTriggerStyles({\n          ...renderProps,\n          isOpen,\n          className\n        })\n      )}\n    >\n      {children}\n      {!hideIndicator && (\n        <IconChevronDown\n          className={twMerge(\n            'ml-auto transition duration-300 group-disabled:rotate-0',\n            isOpen ? 'rotate-180' : 'rotate-0'\n          )}\n        />\n      )}\n    </Button>\n  )\n}\n\nAccordion.Item = AccordionItem\nAccordion.Content = AccordionContent\nAccordion.Trigger = AccordionTrigger\n\nexport { Accordion, type AccordionTriggerProps }\n",
-    "type": "ui"
-  },
-  "drawer": {
-    "component": "@/components/ui/drawer",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport type { PanInfo } from 'framer-motion'\nimport {\n  animate,\n  AnimatePresence,\n  type Inertia,\n  motion,\n  useMotionTemplate,\n  useMotionValue,\n  useMotionValueEvent,\n  useTransform\n} from 'framer-motion'\nimport type { DialogProps } from 'react-aria-components'\nimport { Button, type ButtonProps, Modal, ModalOverlay } from 'react-aria-components'\nimport { twJoin } from 'tailwind-merge'\n\nimport { Dialog } from './dialog'\n\nconst inertiaTransition: Inertia = {\n  type: 'inertia',\n  bounceStiffness: 300,\n  bounceDamping: 60,\n  timeConstant: 300\n}\nconst staticTransition = {\n  duration: 0.4,\n  ease: [0.32, 0.72, 0, 1]\n}\nconst drawerMargin = 60\nconst drawerRadius = 32\n\ninterface DrawerContextType {\n  isOpen: boolean\n  openDrawer: () => void\n  closeDrawer: () => void\n  withNotch?: boolean\n}\n\nconst DrawerContext = React.createContext<DrawerContextType | undefined>(undefined)\n\nconst useDrawerContext = () => {\n  const context = React.useContext(DrawerContext)\n  if (context === undefined) {\n    throw new Error('useDrawerContext must be used within a Drawer')\n  }\n  return context\n}\n\nconst ModalPrimitive = motion(Modal)\nconst ModalOverlayPrimitive = motion(ModalOverlay)\n\ninterface DrawerOverlayPrimitiveProps\n  extends Omit<React.ComponentProps<typeof ModalOverlayPrimitive>, 'isOpen' | 'onOpenChange'> {\n  'aria-label'?: DialogProps['aria-label']\n  'aria-labelledby'?: DialogProps['aria-labelledby']\n  role?: DialogProps['role']\n}\n\nconst DrawerContentPrimitive = ({ children, ...props }: DrawerOverlayPrimitiveProps) => {\n  const { closeDrawer, withNotch } = useDrawerContext()\n  const [contentHeight, setContentHeight] = React.useState(0)\n\n  const h = Math.min(contentHeight + drawerMargin, window.innerHeight - drawerMargin)\n  const y = useMotionValue(h)\n  const bgOpacity = useTransform(y, [0, h], [0.15, 0])\n  const bg = useMotionTemplate`rgba(0, 0, 0, ${bgOpacity})`\n\n  const root = document.getElementsByTagName('main')[0] as HTMLElement\n\n  const bodyBorderRadius = useTransform(y, [0, h], [drawerRadius, 0])\n\n  useMotionValueEvent(bodyBorderRadius, 'change', (v) => (root.style.borderRadius = `${v}px`))\n\n  const onDragEnd = (_: any, { offset, velocity }: PanInfo) => {\n    if (offset.y > h * 0.4 || velocity.y > 10) {\n      closeDrawer()\n    } else {\n      animate(y, 0, { ...inertiaTransition, min: 0, max: 0 })\n    }\n  }\n\n  return (\n    <>\n      <ModalOverlayPrimitive\n        isDismissable\n        isOpen\n        onOpenChange={closeDrawer}\n        className={twJoin([\n          'fixed touch-none will-change-transform left-0 top-0 isolate z-50 h-[--visual-viewport-height] w-full',\n          'flex items-end [--visual-viewport-vertical-padding:100px]'\n        ])}\n        style={{\n          backgroundColor: bg as any\n        }}\n      >\n        <ModalPrimitive\n          className={twJoin(\n            'max-h-full flex flex-col w-full rounded-t-2xl sm:rounded-lg overflow-hidden bg-overlay text-overlay-fg text-left align-middle shadow-lg',\n            'ring-1 ring-zinc-950/5 dark:ring-white/15'\n          )}\n          initial={{ y: h }}\n          animate={{ y: 0 }}\n          exit={{ y: h }}\n          transition={staticTransition}\n          style={{\n            y,\n            top: 'auto',\n            height: contentHeight > 0 ? `${contentHeight + drawerMargin}px` : 'auto',\n            maxHeight: `calc(100% - ${drawerMargin}px)`\n          }}\n          drag=\"y\"\n          dragConstraints={{ top: 0, bottom: h }}\n          onDragEnd={onDragEnd}\n          {...props}\n        >\n          <div className=\"overflow-hidden\">\n            {withNotch && (\n              <div className=\"notch touch-pan-y sticky top-0 mx-auto shrink-0 mt-2.5 h-1.5 w-10 rounded-full bg-fg/20\" />\n            )}\n            <div\n              className=\"overflow-y-auto mt-3\"\n              ref={(el) => {\n                if (el) {\n                  const resizeObserver = new ResizeObserver((entries) => {\n                    for (const entry of entries) {\n                      setContentHeight(entry.contentRect.height)\n                    }\n                  })\n                  resizeObserver.observe(el)\n                  return () => resizeObserver.disconnect()\n                }\n              }}\n            >\n              <>{children}</>\n            </div>\n          </div>\n        </ModalPrimitive>\n      </ModalOverlayPrimitive>\n    </>\n  )\n}\n\ninterface DrawerPrimitiveProps extends Omit<React.ComponentProps<typeof Modal>, 'children'> {\n  'aria-label'?: DialogProps['aria-label']\n  'aria-labelledby'?: DialogProps['aria-labelledby']\n  role?: DialogProps['role']\n  children?: DialogProps['children']\n}\n\nconst DrawerPrimitive = (props: DrawerPrimitiveProps) => {\n  const { isOpen } = useDrawerContext()\n\n  const h = window.innerHeight - drawerMargin\n  const y = useMotionValue(h)\n  const bodyBorderRadius = useTransform(y, [0, h], [drawerRadius, 0])\n  return (\n    <motion.div\n      style={{\n        borderRadius: bodyBorderRadius,\n        transformOrigin: 'center 0'\n      }}\n    >\n      <AnimatePresence>{isOpen && <>{props.children}</>}</AnimatePresence>\n    </motion.div>\n  )\n}\n\nconst DrawerTrigger = (props: ButtonProps) => {\n  const { openDrawer } = useDrawerContext()\n\n  return <Button onPress={openDrawer} {...props} />\n}\n\ninterface DrawerProps {\n  children: React.ReactNode\n  isOpen?: boolean\n  withNotch?: boolean\n  onOpenChange?: (isOpen: boolean) => void\n}\n\nconst Drawer = ({\n  children,\n  withNotch = true,\n  isOpen: controlledIsOpen,\n  onOpenChange\n}: DrawerProps) => {\n  const [internalIsOpen, setInternalIsOpen] = React.useState(false)\n\n  const isControlled = controlledIsOpen !== undefined\n  const isOpen = isControlled ? controlledIsOpen : internalIsOpen\n\n  const openDrawer = () => {\n    if (isControlled && onOpenChange) {\n      onOpenChange(true)\n    } else {\n      setInternalIsOpen(true)\n    }\n  }\n\n  const closeDrawer = () => {\n    if (isControlled && onOpenChange) {\n      onOpenChange(false)\n    } else {\n      setInternalIsOpen(false)\n    }\n  }\n\n  if (typeof window === 'undefined') {\n    return null\n  }\n\n  return (\n    <DrawerContext.Provider value={{ isOpen, openDrawer, closeDrawer, withNotch }}>\n      {children}\n    </DrawerContext.Provider>\n  )\n}\n\nconst DrawerContent = ({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive>) => {\n  return (\n    <DrawerPrimitive>\n      <DrawerContentPrimitive {...props}>\n        <Dialog\n          role={props.role ?? 'dialog'}\n          aria-label={props['aria-label'] ?? undefined}\n          aria-labelledby={props['aria-labelledby'] ?? undefined}\n          className=\"sm:max-w-lg mx-auto\"\n        >\n          {(values) => <>{typeof children === 'function' ? children(values) : children}</>}\n        </Dialog>\n      </DrawerContentPrimitive>\n    </DrawerPrimitive>\n  )\n}\n\nconst DrawerHeader = ({ className, ...props }: React.ComponentProps<typeof Dialog.Header>) => (\n  <Dialog.Header className={twJoin('pt-2', className)} {...props} />\n)\n\nconst DrawerBody = ({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<typeof Dialog.Body>) => (\n  <Dialog.Body {...props} className={twJoin('px-4', className)}>\n    {children}\n  </Dialog.Body>\n)\n\nconst DrawerFooter = ({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<typeof Dialog.Footer>) => (\n  <Dialog.Footer {...props} className={twJoin('pb-2', className)}>\n    {children}\n  </Dialog.Footer>\n)\n\nDrawer.Body = DrawerBody\nDrawer.Close = Dialog.Close\nDrawer.Content = DrawerContent\nDrawer.Description = Dialog.Description\nDrawer.Footer = DrawerFooter\nDrawer.Header = DrawerHeader\nDrawer.Title = Dialog.Title\nDrawer.Trigger = DrawerTrigger\n\nexport { Drawer }\n",
-    "type": "ui"
-  },
-  "tooltip": {
-    "component": "@/components/ui/tooltip",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport {\n  Button,\n  OverlayArrow,\n  Tooltip as TooltipPrimitive,\n  type TooltipProps as TooltipPrimitiveProps,\n  TooltipTrigger\n} from 'react-aria-components'\nimport { tv } from 'tailwind-variants'\n\nimport { cr } from './primitive'\n\ninterface TooltipProps extends Omit<TooltipPrimitiveProps, 'children'> {\n  children: React.ReactNode\n}\n\nconst tooltipStyles = tv({\n  base: [\n    'group rounded-md [&_strong]:font-medium bg-fg border border-fg text-background px-2 py-1.5 text-sm will-change-transform dark:shadow-none',\n    'placement-left:slide-in-from-right-1 placement-right:slide-in-from-left-1 placement-top:slide-in-from-bottom-1 placement-bottom:slide-in-from-top-1'\n  ],\n  variants: {\n    isEntering: {\n      true: 'animate-in fade-in'\n    },\n    isExiting: {\n      true: 'animate-in fade-in direction-reverse'\n    }\n  }\n})\n\nconst Tooltip = (props: React.ComponentProps<typeof TooltipTrigger>) => (\n  <TooltipTrigger {...props}>{props.children}</TooltipTrigger>\n)\n\nconst Content = ({ children, ...props }: TooltipProps) => {\n  return (\n    <TooltipPrimitive\n      {...props}\n      offset={10}\n      className={cr(props.className, (className, renderProps) =>\n        tooltipStyles({\n          ...renderProps,\n          className\n        })\n      )}\n    >\n      <OverlayArrow>\n        <svg\n          width={8}\n          height={8}\n          viewBox=\"0 0 8 8\"\n          className=\"fill-fg stroke-fg group-placement-left:-rotate-90 group-placement-right:rotate-90 group-placement-bottom:rotate-180 forced-colors:fill-[Canvas] forced-colors:stroke-[ButtonBorder]\"\n        >\n          <path d=\"M0 0 L4 4 L8 0\" />\n        </svg>\n      </OverlayArrow>\n      {children}\n    </TooltipPrimitive>\n  )\n}\n\nTooltip.Trigger = Button\nTooltip.Content = Content\n\nexport { Tooltip }\n",
-    "type": "ui"
-  },
-  "file-trigger": {
-    "component": "@/components/ui/file-trigger",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { IconCamera, IconFolder, IconPaperclip } from 'justd-icons'\nimport {\n  FileTrigger as FileTriggerPrimitive,\n  type FileTriggerProps as FileTriggerPrimitiveProps\n} from 'react-aria-components'\n\nimport { Button } from './button'\n\ninterface FileTriggerProps extends FileTriggerPrimitiveProps {\n  withIcon?: boolean\n  isDisabled?: boolean\n  intent?:\n    | 'primary'\n    | 'secondary'\n    | 'danger'\n    | 'warning'\n    | 'info'\n    | 'light/dark'\n    | 'success'\n    | 'light'\n    | 'dark'\n  size?: 'medium' | 'large' | 'square-petite' | 'extra-small' | 'small'\n  shape?: 'square' | 'circle'\n  appearance?: 'solid' | 'outline' | 'plain'\n}\n\nconst FileTrigger = ({\n  intent = 'primary',\n  appearance = 'outline',\n  size = 'medium',\n  shape = 'square',\n  withIcon = true,\n  ...props\n}: FileTriggerProps) => {\n  return (\n    <>\n      <FileTriggerPrimitive {...props}>\n        <Button\n          isDisabled={props.isDisabled}\n          intent={intent}\n          size={size}\n          shape={shape}\n          appearance={appearance}\n        >\n          {withIcon && (\n            <>\n              {props.defaultCamera ? (\n                <IconCamera />\n              ) : props.acceptDirectory ? (\n                <IconFolder />\n              ) : (\n                <IconPaperclip className=\"rotate-45\" />\n              )}\n            </>\n          )}\n          {props.children ? (\n            props.children\n          ) : (\n            <>\n              {props.allowsMultiple\n                ? 'Browse a files'\n                : props.acceptDirectory\n                  ? 'Browse'\n                  : 'Browse a file'}\n              ...\n            </>\n          )}\n        </Button>\n      </FileTriggerPrimitive>\n    </>\n  )\n}\n\nexport { FileTrigger }\n",
-    "type": "ui"
-  },
-  "heading": {
-    "component": "@/components/ui/heading",
-    "raw": "'use client'\n\nimport { Heading as HeadingPrimitive } from 'react-aria-components'\nimport { tv } from 'tailwind-variants'\n\nimport { isIos } from './primitive'\n\nconst headingStyles = tv({\n  base: 'font-sans tracking-tight text-fg',\n  variants: {\n    level: {\n      1: 'font-bold text-2xl',\n      2: 'font-semibold text-lg sm:text-xl',\n      3: 'font-semibold text-base sm:text-lg',\n      4: 'font-medium text-base sm:text-sm'\n    },\n    tracking: {\n      tighter: 'tracking-tighter',\n      tight: 'tracking-tight',\n      normal: 'tracking-normal',\n      wide: 'tracking-wide',\n      wider: 'tracking-wider',\n      widest: 'tracking-widest'\n    }\n  }\n})\ntype HeadingType = { level?: 1 | 2 | 3 | 4 } & React.ComponentPropsWithoutRef<\n  'h1' | 'h2' | 'h3' | 'h4'\n>\n\ninterface HeadingProps extends HeadingType {\n  tracking?: 'tighter' | 'tight' | 'normal' | 'wide' | 'wider' | 'widest'\n  className?: string | undefined\n}\n\nconst Heading = ({ className, tracking = 'normal', level = 1, ...props }: HeadingProps) => {\n  return (\n    <HeadingPrimitive\n      level={level}\n      className={headingStyles({\n        level,\n        tracking,\n        className: isIos() ? 'font-medium' : className\n      })}\n      {...props}\n    />\n  )\n}\n\nexport { Heading, type HeadingProps }\n",
-    "type": "ui"
-  },
-  "choicebox": {
-    "component": "@/components/ui/choicebox",
-    "raw": "'use client'\n\nimport * as React from 'react'\n\nimport type { GridListItemProps, GridListProps } from 'react-aria-components'\nimport { GridList, GridListItem } from 'react-aria-components'\nimport type { VariantProps } from 'tailwind-variants'\nimport { tv } from 'tailwind-variants'\n\nimport { Checkbox } from './checkbox'\nimport { Description, Label } from './field'\nimport { cr, focusStyles } from './primitive'\n\nconst choiceboxStyles = tv({\n  base: 'grid',\n  variants: {\n    columns: {\n      1: 'sm:grid-cols-1',\n      2: 'sm:grid-cols-2',\n      3: 'sm:grid-cols-3',\n      4: 'sm:grid-cols-4',\n      5: 'sm:grid-cols-5',\n      6: 'sm:grid-cols-6'\n    },\n    gap: {\n      2: 'gap-2',\n      4: 'gap-4',\n      6: 'gap-6'\n    }\n  },\n  defaultVariants: {\n    columns: 2,\n    gap: 6\n  }\n})\n\ninterface ChoiceboxProps<T extends object>\n  extends GridListProps<T>,\n    VariantProps<typeof choiceboxStyles> {\n  className?: string\n}\n\nconst Choicebox = <T extends object>({\n  columns,\n  gap,\n  className,\n  selectionMode = 'multiple',\n  ...props\n}: ChoiceboxProps<T>) => {\n  return (\n    <GridList\n      layout={columns === 1 ? 'stack' : 'grid'}\n      selectionMode={selectionMode}\n      className={choiceboxStyles({\n        columns,\n        gap,\n        className\n      })}\n      {...props}\n    />\n  )\n}\n\nconst choiceboxItemStyles = tv({\n  extend: focusStyles,\n  base: 'rounded-lg cursor-pointer border p-4 [&_[slot=title]]:font-medium',\n  variants: {\n    isSelected: {\n      false: 'hover:bg-secondary/50',\n      true: [\n        'z-20 border-primary/50 bg-primary/5 dark:bg-primary/15',\n        '[&_[slot=title]]:text-primary-600 dark:[&_[slot=title]]:text-primary-300',\n        '[&_[slot=description]]:text-primary-600 dark:[&_[slot=description]]:text-primary-300'\n      ]\n    },\n    isDisabled: {\n      true: 'z-10 cursor-default opacity-80 [&_[slot=title]]:text-muted-fg forced-colors:text-[GrayText]'\n    }\n  }\n})\n\ninterface ChoiceboxItemProps extends GridListItemProps, VariantProps<typeof choiceboxItemStyles> {\n  title: string\n  description?: string\n}\n\nconst ChoiceboxItem = ({ children, className, ...props }: ChoiceboxItemProps) => {\n  const textValue = typeof children === 'string' ? children : undefined\n  return (\n    <GridListItem\n      textValue={textValue}\n      {...props}\n      className={cr(className, (className, renderProps) =>\n        choiceboxItemStyles({\n          ...renderProps,\n          className\n        })\n      )}\n    >\n      {(values) => (\n        <div className=\"flex items-center w-full justify-between gap-2\">\n          <div className=\"pr-8 flex flex-col space-y-1\">\n            <Label slot=\"title\" htmlFor={textValue}>\n              {props.title}\n            </Label>\n            {props.description && <Description>{props.description}</Description>}\n          </div>\n          <>\n            {values.selectionMode === 'multiple' && values.selectionBehavior === 'toggle' && (\n              <Checkbox slot=\"selection\" />\n            )}\n          </>\n        </div>\n      )}\n    </GridListItem>\n  )\n}\n\nChoicebox.Item = ChoiceboxItem\nexport { Choicebox }\n",
-    "type": "ui"
-  },
-  "switch": {
-    "component": "@/components/ui/switch",
-    "raw": "'use client'\n\nimport {\n  Switch as SwitchPrimitive,\n  type SwitchProps as SwitchPrimitiveProps\n} from 'react-aria-components'\nimport { tv, type VariantProps } from 'tailwind-variants'\n\nimport { focusRing } from './primitive'\n\nconst trackStyles = tv({\n  extend: focusRing,\n  base: 'mr-2 h-5 w-8 cursor-pointer rounded-full border-2 border-transparent bg-muted-fg/50 transition duration-200',\n  variants: {\n    isDisabled: { true: 'opacity-50 cursor-default' },\n    intent: {\n      primary: 'group-selected:bg-primary',\n      secondary: 'group-selected:bg-muted-fg',\n      success: 'group-selected:bg-success',\n      danger: 'group-selected:bg-danger',\n      warning: 'group-selected:bg-warning',\n      info: 'group-selected:bg-info'\n    }\n  },\n  defaultVariants: {\n    intent: 'primary'\n  }\n})\n\nconst switchStyles = tv({\n  slots: {\n    base: 'group inline-flex touch-none lg:text-sm items-center',\n    ball: 'forced-colors:disabled:outline-[GrayText] group-selected:ml-3 group-selected:group-data-[pressed]:ml-2 group-pressed:w-5 block size-4 origin-right rounded-full bg-white shadow transition-all duration-200'\n  }\n})\n\nconst { base, ball } = switchStyles()\n\ninterface SwitchProps extends SwitchPrimitiveProps, VariantProps<typeof trackStyles> {}\n\nconst Switch = ({ children, intent, className, ...props }: SwitchProps) => {\n  return (\n    <SwitchPrimitive\n      {...props}\n      className={(values) =>\n        base({ className: typeof className === 'function' ? className(values) : className })\n      }\n      style={{ WebkitTapHighlightColor: 'transparent' }}\n    >\n      {(values) => (\n        <>\n          <span\n            className={trackStyles({\n              isFocused: props.isFocused,\n              isInvalid: props.isInvalid,\n              isDisabled: props.isDisabled,\n              intent\n            })}\n          >\n            <span className={ball()} />\n          </span>\n          {typeof children === 'function' ? children(values) : children}\n        </>\n      )}\n    </SwitchPrimitive>\n  )\n}\n\nexport { Switch }\n",
-    "type": "ui"
-  },
-  "calendar": {
-    "component": "@/components/ui/calendar",
-    "raw": "'use client'\n\nimport { IconChevronLgLeft, IconChevronLgRight } from 'justd-icons'\nimport {\n  Calendar as CalendarPrimitive,\n  CalendarCell,\n  CalendarGrid,\n  CalendarGridBody,\n  CalendarGridHeader as CalendarGridHeaderPrimitive,\n  CalendarHeaderCell,\n  type CalendarProps as CalendarPrimitiveProps,\n  type DateValue,\n  Heading,\n  Text,\n  useLocale\n} from 'react-aria-components'\nimport { tv } from 'tailwind-variants'\n\nimport { Button } from './button'\nimport { cr, ctr, focusRing } from './primitive'\n\nconst cellStyles = tv({\n  extend: focusRing,\n  base: 'flex size-10 sm:size-9 cursor-default items-center justify-center font-medium rounded-full lg:text-sm forced-color-adjust-none',\n  variants: {\n    isSelected: {\n      false:\n        'text-fg hover:bg-zinc-100 pressed:bg-zinc-200 dark:hover:bg-zinc-700 dark:pressed:bg-zinc-600',\n      true: 'bg-primary text-primary-fg invalid:bg-danger invalid:text-danger-fg forced-colors:bg-[Highlight] forced-colors:text-[HighlightText] forced-colors:invalid:bg-[Mark]'\n    },\n    isDisabled: {\n      true: 'text-zinc-400 dark:text-zinc-600 forced-colors:text-[GrayText]'\n    }\n  }\n})\n\ninterface CalendarProps<T extends DateValue>\n  extends Omit<CalendarPrimitiveProps<T>, 'visibleDuration'> {\n  errorMessage?: string\n  className?: string\n}\n\nconst Calendar = <T extends DateValue>({ errorMessage, className, ...props }: CalendarProps<T>) => {\n  return (\n    <CalendarPrimitive className={ctr(className, 'max-w-[17.5rem] sm:max-w-[15.8rem]')} {...props}>\n      <CalendarHeader />\n      <CalendarGrid className=\"[&_td]:border-collapse [&_td]:px-0\">\n        <CalendarGridHeader />\n        <CalendarGridBody>\n          {(date) => (\n            <CalendarCell\n              date={date}\n              className={cr(className, (className, renderProps) =>\n                cellStyles({\n                  ...renderProps,\n                  className\n                })\n              )}\n            />\n          )}\n        </CalendarGridBody>\n      </CalendarGrid>\n      {errorMessage && (\n        <Text slot=\"errorMessage\" className=\"text-sm text-red-600\">\n          {errorMessage}\n        </Text>\n      )}\n    </CalendarPrimitive>\n  )\n}\n\nconst calendarHeaderStyles = tv({\n  slots: {\n    header: 'flex w-full justify-center gap-1 px-1 pb-5 sm:pb-4',\n    heading: 'mr-2 text-muted-fg tracking-tight flex-1 text-left font-medium',\n    calendarGridHeaderCell: 'text-sm lg:text-xs font-semibold text-muted-fg'\n  }\n})\n\nconst { header, heading, calendarGridHeaderCell } = calendarHeaderStyles()\n\nconst CalendarHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => {\n  const { direction } = useLocale()\n\n  return (\n    <header className={header({ className })} {...props}>\n      <Heading className={heading()} />\n      <div className=\"flex items-center gap-1\">\n        <Button\n          size=\"square-petite\"\n          className=\"[&_[data-slot=icon]]:text-fg size-8 sm:size-7\"\n          shape=\"circle\"\n          appearance=\"plain\"\n          slot=\"previous\"\n        >\n          {direction === 'rtl' ? <IconChevronLgRight /> : <IconChevronLgLeft aria-hidden />}\n        </Button>\n        <Button\n          size=\"square-petite\"\n          className=\"[&_[data-slot=icon]]:text-fg size-8 sm:size-7\"\n          shape=\"circle\"\n          appearance=\"plain\"\n          slot=\"next\"\n        >\n          {direction === 'rtl' ? <IconChevronLgLeft /> : <IconChevronLgRight />}\n        </Button>\n      </div>\n    </header>\n  )\n}\n\nconst CalendarGridHeader = () => {\n  return (\n    <CalendarGridHeaderPrimitive>\n      {(day) => <CalendarHeaderCell className={calendarGridHeaderCell()}>{day}</CalendarHeaderCell>}\n    </CalendarGridHeaderPrimitive>\n  )\n}\n\nCalendar.Header = CalendarHeader\nCalendar.GridHeader = CalendarGridHeader\nexport { Calendar }\n",
-    "type": "ui"
-  },
-  "grid-list": {
-    "component": "@/components/ui/grid-list",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { IconHamburger } from 'justd-icons'\nimport type {\n  GridListItemProps,\n  GridListProps as GridListPrimitiveProps\n} from 'react-aria-components'\nimport { Button, GridList as GridListPrimitive, GridListItem } from 'react-aria-components'\nimport { tv } from 'tailwind-variants'\n\nimport { Checkbox } from './checkbox'\nimport { composeTailwindRenderProps, focusRing } from './primitive'\n\ninterface GridListProps<T extends object> extends GridListPrimitiveProps<T> {}\n\nconst GridList = <T extends object>({\n  selectionMode = 'single',\n  children,\n  ...props\n}: GridListProps<T>) => (\n  <GridListPrimitive\n    selectionMode={selectionMode}\n    {...props}\n    className={composeTailwindRenderProps(\n      props.className,\n      'relative overflow-auto rounded-lg border'\n    )}\n  >\n    {children}\n  </GridListPrimitive>\n)\n\nconst itemStyles = tv({\n  extend: focusRing,\n  base: 'relative -mb-px flex cursor-default select-none gap-3 border-y px-3 py-2 text-sm text-fg -outline-offset-2 first:rounded-t-md first:border-t-0 last:mb-0 last:rounded-b-md last:border-b-0',\n  variants: {\n    isSelected: {\n      false: 'hover:bg-secondary',\n      true: 'z-20 border-y-primary/50 bg-primary/20'\n    },\n    isDisabled: {\n      true: 'z-10 text-muted-fg forced-colors:text-[GrayText]'\n    }\n  }\n})\n\nconst Item = ({ children, ...props }: GridListItemProps) => {\n  const textValue = typeof children === 'string' ? children : undefined\n  return (\n    <GridListItem textValue={textValue} {...props} className={itemStyles}>\n      {({ selectionMode, selectionBehavior, allowsDragging }) => (\n        <>\n          {allowsDragging && (\n            <Button slot=\"drag\">\n              <IconHamburger />\n            </Button>\n          )}\n          {selectionMode === 'multiple' && selectionBehavior === 'toggle' && (\n            <Checkbox slot=\"selection\" />\n          )}\n          {children}\n        </>\n      )}\n    </GridListItem>\n  )\n}\n\nconst EmptyState = (props: React.HTMLAttributes<HTMLDivElement>) => (\n  <div className=\"p-6\" {...props} />\n)\n\nGridList.Item = Item\nGridList.EmptyState = EmptyState\n\nexport { GridList }\n",
-    "type": "ui"
-  },
-  "color": {
-    "component": "@/components/ui/color",
-    "raw": "'use client'\n\nimport * as React from 'react'\n\nimport { parseColor } from '@react-stately/color'\nimport type {\n  ColorSliderProps as ColorSliderPrimitiveProps,\n  ColorSwatchPickerItemProps as ColorSwatchPickerItemPrimitiveProps,\n  ColorSwatchProps as ColorSwatchPrimitiveProps,\n  ColorThumbProps as ColorThumbPrimitiveProps\n} from 'react-aria-components'\nimport {\n  ColorArea as ColorAreaPrimitive,\n  ColorSlider as ColorSliderPrimitive,\n  ColorSwatch as ColorSwatchPrimitive,\n  ColorSwatchPicker as ColorSwatchPickerPrimitive,\n  ColorSwatchPickerItem as ColorSwatchPickerItemPrimitive,\n  ColorThumb as ColorThumbPrimitive,\n  ColorWheel as ColorWheelPrimitive,\n  ColorWheelTrack as ColorWheelTrackPrimitive,\n  SliderOutput\n} from 'react-aria-components'\nimport { tv } from 'tailwind-variants'\n\nimport { Description, Label } from './field'\nimport { cn, cr, focusStyles } from './primitive'\nimport { Slider } from './slider'\n\nconst colorAreaStyles = tv({\n  base: 'size-48 rounded-md border border-background shrink-0 disabled:opacity-50'\n})\n\ninterface ColorAreaProps extends React.ComponentProps<typeof ColorAreaPrimitive> {}\n\nconst ColorArea = ({ className, ...props }: ColorAreaProps) => {\n  return (\n    <ColorAreaPrimitive\n      aria-label={props['aria-label'] ?? 'Color area'}\n      {...props}\n      className={cr(className, (className, renderProps) =>\n        colorAreaStyles({\n          ...renderProps,\n          className\n        })\n      )}\n    />\n  )\n}\n\ninterface ColorThumbProps extends ColorThumbPrimitiveProps {}\n\nconst colorThumbStyles = tv({\n  base: 'size-5 shadow rounded-full ring-1 ring-inset ring-offset-2 ring-black/50 border border-black/50',\n  variants: {\n    isFocusVisible: {\n      true: 'size-6'\n    }\n  }\n})\n\nconst ColorThumb = ({ className, ...props }: ColorThumbProps) => {\n  return (\n    <ColorThumbPrimitive\n      className={cr(className, (className, renderProps) =>\n        colorThumbStyles({\n          ...renderProps,\n          className\n        })\n      )}\n      {...props}\n    />\n  )\n}\n\nconst colorSwatchPickerItemStyles = tv({\n  extend: focusStyles,\n  base: 'size-8 rounded-md cspis disabled:opacity-50'\n})\n\nconst ColorSwatchPickerItem = ({ className, ...props }: ColorSwatchPickerItemPrimitiveProps) => {\n  return (\n    <ColorSwatchPickerItemPrimitive\n      className={cr(className, (className, renderProps) =>\n        colorSwatchPickerItemStyles({\n          ...renderProps,\n          className\n        })\n      )}\n      {...props}\n    >\n      <ColorSwatch className=\"size-[inherit] cocspip\" />\n    </ColorSwatchPickerItemPrimitive>\n  )\n}\n\ninterface ColorSwatchProps extends ColorSwatchPrimitiveProps {}\n\nconst ColorSwatch = ({ className, ...props }: ColorSwatchProps) => {\n  const needRing = props.color ? isBrightColor(props.color) : false\n  return (\n    <ColorSwatchPrimitive\n      aria-label={props['aria-label'] ?? 'Color swatch'}\n      className={cn(\n        'size-8 cs rounded-md shrink-0',\n        needRing\n          ? 'ring-1 ring-inset ring-black/10'\n          : 'dark:ring-1 dark:ring-inset dark:ring-white/10',\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst hexToRgb = (hex: string): { r: number; g: number; b: number } | null => {\n  const shorthandRegex = /^#?([a-f\\d])([a-f\\d])([a-f\\d])$/i\n  hex = hex.replace(shorthandRegex, (m, r, g, b) => r + r + g + g + b + b)\n\n  const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex)\n  return result\n    ? {\n        r: parseInt(result[1], 16),\n        g: parseInt(result[2], 16),\n        b: parseInt(result[3], 16)\n      }\n    : null\n}\n\nconst hsbToRgb = (h: number, s: number, b: number): { r: number; g: number; b: number } => {\n  s /= 100\n  b /= 100\n  const k = (n: number) => (n + h / 60) % 6\n  const f = (n: number) => b * (1 - s * Math.max(0, Math.min(k(n), 4 - k(n), 1)))\n  return {\n    r: Math.round(255 * f(5)),\n    g: Math.round(255 * f(3)),\n    b: Math.round(255 * f(1))\n  }\n}\n\nconst luminance = (r: number, g: number, b: number): number => {\n  const a = [r, g, b].map((v) => {\n    v /= 255\n    return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4)\n  })\n  return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722\n}\n\nconst isBrightColor = (color: any): boolean => {\n  let r, g, b\n\n  if (typeof color === 'string') {\n    if (color.startsWith('#')) {\n      const rgb = hexToRgb(color)\n      if (rgb) {\n        r = rgb.r\n        g = rgb.g\n        b = rgb.b\n      } else {\n        return false\n      }\n    } else if (color.startsWith('rgb')) {\n      const rgbValues = color.match(/\\d+/g)\n      if (rgbValues) {\n        r = parseInt(rgbValues[0], 10)\n        g = parseInt(rgbValues[1], 10)\n        b = parseInt(rgbValues[2], 10)\n      } else {\n        return false\n      }\n    } else {\n      const namedColors: Record<string, string> = {\n        white: '#ffffff',\n        black: '#000000'\n      }\n      const hex = namedColors[color.toLowerCase()]\n      if (hex) {\n        const rgb = hexToRgb(hex)\n        if (rgb) {\n          r = rgb.r\n          g = rgb.g\n          b = rgb.b\n        } else {\n          return false\n        }\n      } else {\n        return false\n      }\n    }\n  } else if (\n    typeof color === 'object' &&\n    'hue' in color &&\n    'saturation' in color &&\n    'brightness' in color\n  ) {\n    const rgb = hsbToRgb(color.hue, color.saturation, color.brightness)\n    r = rgb.r\n    g = rgb.g\n    b = rgb.b\n  } else {\n    return false\n  }\n\n  const lum = luminance(r, g, b)\n  return lum > 0.75\n}\n\nconst defaultColor = parseColor('hsl(216, 98%, 52%)')\ninterface ColorSliderProps extends ColorSliderPrimitiveProps {\n  label?: string\n  description?: string\n  showOutput?: boolean\n}\n\nconst ColorSlider = ({\n  className,\n  showOutput = true,\n  label,\n  description,\n  ...props\n}: ColorSliderProps) => {\n  return (\n    <ColorSliderPrimitive\n      className={cn('flex disabled:opacity-50 w-full flex-col gap-1', className)}\n      {...props}\n    >\n      <div className=\"flex items-center gap-2\">\n        {label && <Label className=\"text-sm [grid-area:label]\">{label}</Label>}\n        {showOutput && <SliderOutput className=\"text-sm ml-auto [grid-area:output]\" />}\n      </div>\n      <Slider.Track className=\"cstrk rounded-md orientation-horizontal:h-8\">\n        <ColorThumb className=\"csth top-1/2\" />\n      </Slider.Track>\n      {description && <Description>{description}</Description>}\n    </ColorSliderPrimitive>\n  )\n}\n\nconst ColorWheel = ColorWheelPrimitive\nconst ColorWheelTrack = ColorWheelTrackPrimitive\nconst ColorSwatchPicker = ColorSwatchPickerPrimitive\n\nexport {\n  ColorArea,\n  ColorSlider,\n  ColorSwatch,\n  ColorSwatchPicker,\n  ColorSwatchPickerItem,\n  ColorThumb,\n  ColorWheel,\n  ColorWheelTrack,\n  defaultColor,\n  isBrightColor\n}\n",
-    "type": "ui"
-  },
-  "multiple-select": {
-    "component": "@/components/ui/multiple-select",
-    "raw": "'use client'\n\nimport * as React from 'react'\n\nimport { IconChevronLgDown } from 'justd-icons'\nimport { useFilter } from 'react-aria'\nimport type { ComboBoxProps as ComboBoxPrimitiveProps, Key } from 'react-aria-components'\nimport { ComboBox, Group } from 'react-aria-components'\nimport type { ListData } from 'react-stately'\nimport { useListData } from 'react-stately'\nimport { tv } from 'tailwind-variants'\n\nimport { Button } from './button'\nimport type { FieldProps } from './field'\nimport { Description, Input, Label } from './field'\nimport { ListBox } from './list-box'\nimport { Popover } from './popover'\nimport { cn } from './primitive'\nimport type { RestrictedIntent, TagGroupProps } from './tag-group'\nimport { Tag } from './tag-group'\nimport { VisuallyHidden } from './visually-hidden'\n\nconst multiSelectStyles = tv({\n  slots: {\n    multiSelectField: 'group flex w-full min-w-80 flex-col gap-1',\n    multiSelect: [\n      'relative px-1 flex min-h-10 flex-row flex-wrap items-center rounded-lg shadow-sm border',\n      'has-[input[data-focused=true]]:border-primary',\n      'has-[input[data-invalid=true][data-focused=true]]:border-danger has-[input[data-invalid=true]]:border-danger has-[input[data-invalid=true]]:ring-danger/20',\n      'has-[input[data-focused=true]]:ring-4 has-[input[data-focused=true]]:ring-primary/20'\n    ],\n    chevronButton:\n      'size-8 -mr-2 grid place-content-center rounded-sm hover:text-fg focus:text-fg text-muted-fg',\n    input: 'flex-1 py-1 px-0.5 ml-1 shadow-none ring-0',\n    comboBoxChild: 'inline-flex flex-1 flex-wrap items-center px-0',\n    comboBox: 'group peer flex flex-1'\n  }\n})\n\nconst { multiSelectField, multiSelect, chevronButton, input, comboBox, comboBoxChild } =\n  multiSelectStyles()\n\ninterface FieldState {\n  selectedKey: Key | null\n  inputValue: string\n}\n\ninterface SelectedKey {\n  id: Key\n  name: string\n}\n\ninterface MultipleSelectProps<T extends object>\n  extends FieldProps,\n    Omit<\n      ComboBoxPrimitiveProps<T>,\n      | 'children'\n      | 'validate'\n      | 'allowsEmptyCollection'\n      | 'selectedKey'\n      | 'inputValue'\n      | 'className'\n      | 'value'\n      | 'onSelectionChange'\n      | 'onInputChange'\n    >,\n    Pick<TagGroupProps, 'shape'> {\n  intent?: RestrictedIntent\n  items: Array<T>\n  selectedItems: ListData<T>\n  className?: string\n  onItemInserted?: (key: Key) => void\n  onItemCleared?: (key: Key) => void\n  renderEmptyState?: (inputValue: string) => React.ReactNode\n  tag: (item: T) => React.ReactNode\n  children: React.ReactNode | ((item: T) => React.ReactNode)\n  max?: number\n  min?: number\n}\n\nconst MultipleSelect = <T extends SelectedKey>({\n  children,\n  items,\n  selectedItems,\n  onItemCleared,\n  onItemInserted,\n  className,\n  name,\n  renderEmptyState,\n  ...props\n}: MultipleSelectProps<T>) => {\n  const [isInvalid, setIsInvalid] = React.useState(false)\n  const tagGroupIdentifier = React.useId()\n  const triggerRef = React.useRef<HTMLDivElement | null>(null)\n  const [width, setWidth] = React.useState(0)\n\n  const { contains } = useFilter({ sensitivity: 'base' })\n  const selectedKeys = selectedItems.items.map((i) => i.id)\n\n  const existingTagCount = selectedItems.items.length\n  const maxTags = props.max !== undefined ? props.max : Infinity\n  const maxTagsToAdd = maxTags - existingTagCount\n\n  const updateInvalidState = (selectedCount: number) => {\n    const maxTags = props.max !== undefined ? props.max : Infinity\n    setIsInvalid(selectedCount >= maxTags)\n  }\n\n  const filter = React.useCallback(\n    (item: T, filterText: string) =>\n      !selectedKeys.includes(item.id) && contains(item.name, filterText),\n    [contains, selectedKeys]\n  )\n\n  const accessibleList = useListData({\n    initialItems: items,\n    filter\n  })\n\n  const [fieldState, setFieldState] = React.useState<FieldState>({\n    selectedKey: null,\n    inputValue: ''\n  })\n\n  const onRemove = React.useCallback(\n    (keys: Set<Key>) => {\n      if (props.min !== undefined && selectedItems.items.length <= props.min) return\n\n      const key = keys.values().next().value\n      selectedItems.remove(key)\n      setFieldState({ inputValue: '', selectedKey: null })\n      onItemCleared?.(key)\n      updateInvalidState(selectedItems.items.length - 1)\n    },\n    [selectedItems, onItemCleared, props.min]\n  )\n\n  const onSelectionChange = (id: Key | null) => {\n    if (!id) return\n\n    const item = accessibleList.getItem(id)\n    const maxTags = props.max !== undefined ? props.max : Infinity\n\n    if (!item) return\n\n    if (!selectedKeys.includes(id)) {\n      if (selectedItems.items.length >= maxTags) {\n        setIsInvalid(true)\n\n        const timeoutId = setTimeout(() => {\n          setIsInvalid(false)\n        }, 2000)\n\n        return () => clearTimeout(timeoutId)\n      }\n\n      selectedItems.append(item)\n      setFieldState({\n        inputValue: '',\n        selectedKey: id\n      })\n      onItemInserted?.(id)\n    }\n\n    accessibleList.setFilterText('')\n  }\n  const onInputChange = (v: string) => {\n    setFieldState((prevState) => ({\n      inputValue: v,\n      selectedKey: v === '' ? null : prevState.selectedKey\n    }))\n\n    accessibleList.setFilterText(v)\n  }\n\n  const popLast = React.useCallback(() => {\n    if (\n      selectedItems.items.length == 0 ||\n      (props.min !== undefined && selectedItems.items.length <= props.min)\n    ) {\n      return\n    }\n\n    const endKey = selectedItems.items[selectedItems.items.length - 1]\n\n    if (endKey !== null) {\n      selectedItems.remove(endKey.id)\n      onItemCleared?.(endKey.id)\n      updateInvalidState(selectedItems.items.length - 1)\n    }\n\n    setFieldState({\n      inputValue: '',\n      selectedKey: null\n    })\n  }, [selectedItems, onItemCleared])\n\n  const onKeyDownCapture = React.useCallback(\n    (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === 'Backspace' && fieldState.inputValue === '') {\n        popLast()\n      }\n    },\n    [popLast, fieldState.inputValue]\n  )\n\n  React.useEffect(() => {\n    const trigger = triggerRef.current\n    if (!trigger) return\n\n    const observer = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        setWidth(entry.target.clientWidth)\n      }\n    })\n\n    observer.observe(trigger)\n    return () => {\n      observer.unobserve(trigger)\n    }\n  }, [triggerRef])\n\n  const triggerButtonRef = React.useRef<HTMLButtonElement | null>(null)\n\n  return (\n    <div className={multiSelectField({ className })}>\n      {props.label && <Label>{props.label}</Label>}\n      <Group className={props.isDisabled ? 'opacity-50' : ''}>\n        <div ref={triggerRef} className={multiSelect({ className })}>\n          <Tag.Group\n            shape={props.shape}\n            intent={props.intent}\n            aria-label=\"Selected items\"\n            id={tagGroupIdentifier}\n            onRemove={onRemove}\n          >\n            <Tag.List\n              items={selectedItems.items}\n              className={cn(\n                selectedItems.items.length !== 0 && 'px-1 py-1.5',\n                'last:[&_.jdt3lr2x]:-mr-1 outline-none gap-1.5',\n                props.shape === 'square' && '[&_.jdt3lr2x]:rounded-[calc(var(--radius)-4px)]'\n              )}\n            >\n              {props.tag}\n            </Tag.List>\n          </Tag.Group>\n          <ComboBox\n            {...props}\n            isInvalid={isInvalid}\n            aria-label=\"Available items\"\n            allowsEmptyCollection\n            className={comboBox()}\n            items={accessibleList.items}\n            selectedKey={fieldState.selectedKey}\n            inputValue={fieldState.inputValue}\n            onSelectionChange={onSelectionChange}\n            onInputChange={onInputChange}\n          >\n            <div className={comboBoxChild({ className })}>\n              <Input\n                placeholder={maxTagsToAdd <= 0 ? 'Remove one to add more' : props.placeholder}\n                className={input()}\n                onBlur={() => {\n                  setFieldState({\n                    inputValue: '',\n                    selectedKey: null\n                  })\n                  accessibleList.setFilterText('')\n                }}\n                onKeyDownCapture={onKeyDownCapture}\n              />\n\n              <VisuallyHidden>\n                <Button\n                  slot=\"remove\"\n                  aria-label=\"Remove\"\n                  appearance=\"plain\"\n                  size=\"square-petite\"\n                  ref={triggerButtonRef}\n                >\n                  <IconChevronLgDown />\n                </Button>\n              </VisuallyHidden>\n            </div>\n            <Popover.Picker\n              className=\"max-w-none\"\n              style={{ width: `${width}px` }}\n              triggerRef={triggerRef}\n              trigger=\"ComboBox\"\n            >\n              <ListBox.Picker\n                renderEmptyState={() =>\n                  renderEmptyState ? (\n                    renderEmptyState(fieldState.inputValue)\n                  ) : (\n                    <Description className=\"p-3 block\">\n                      {fieldState.inputValue ? (\n                        <>\n                          No results found for:{' '}\n                          <strong className=\"font-medium text-fg\">{fieldState.inputValue}</strong>\n                        </>\n                      ) : (\n                        `No options`\n                      )}\n                    </Description>\n                  )\n                }\n                selectionMode=\"multiple\"\n              >\n                {children}\n              </ListBox.Picker>\n            </Popover.Picker>\n          </ComboBox>\n          <div className=\"relative px-1 ml-auto flex items-center justify-center\" aria-hidden>\n            <button\n              type=\"button\"\n              className={chevronButton()}\n              onClick={() => triggerButtonRef.current?.click()}\n              tabIndex={-1}\n            >\n              <IconChevronLgDown className=\"peer/[data-open]:rotate-180 size-4\" />\n            </button>\n          </div>\n        </div>\n      </Group>\n      {props.description && <Description>{props.description}</Description>}\n      {name && <input hidden name={name} value={selectedKeys.join(',')} readOnly />}\n    </div>\n  )\n}\n\nMultipleSelect.Option = ListBox.Item\n\nexport { MultipleSelect, type SelectedKey }\n",
-    "type": "ui"
-  },
-  "dropdown": {
-    "component": "@/components/ui/dropdown",
-    "raw": "'use client'\n\nimport { IconCheck } from 'justd-icons'\nimport {\n  Collection,\n  Header,\n  ListBoxItem as ListBoxItemPrimitive,\n  type ListBoxItemProps,\n  Section,\n  type SectionProps,\n  Text,\n  type TextProps\n} from 'react-aria-components'\nimport { tv } from 'tailwind-variants'\n\nimport { cr } from './primitive'\n\nconst dropdownItemStyles = tv({\n  base: [\n    'group flex cursor-default select-none items-center gap-x-1.5 rounded-md py-2 pl-2.5 pr-1 text-base outline outline-0 forced-color-adjust-none lg:text-sm',\n    '[&_[data-slot=avatar]]:-mr-0.5 [&_[data-slot=avatar]]:size-6 sm:[&_[data-slot=avatar]]:size-5',\n    '[&_[data-slot=icon]]:size-4',\n    'has-submenu:open:data-[danger=true]:bg-danger/20 has-submenu:open:data-[danger=true]:text-danger',\n    'has-submenu:open:bg-primary has-submenu:open:text-primary-fg'\n  ],\n  variants: {\n    isDisabled: {\n      false: 'text-fg',\n      true: 'text-muted-fg forced-colors:text-[GrayText]'\n    },\n    isFocused: {\n      false: 'data-[danger=true]:text-danger',\n      true: [\n        'bg-primary text-primary-fg forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]',\n        'data-[danger=true]:bg-danger data-[danger=true]:text-danger-fg',\n        '[&_.text-muted-fg]:text-primary-fg/80 [&[data-slot=label]]:text-primary-fg [&[data-slot=description]]:text-primary-fg'\n      ]\n    }\n  },\n  compoundVariants: [\n    {\n      isFocused: false,\n      isOpen: true,\n      className: 'bg-zinc-100 dark:bg-zinc-700/60'\n    }\n  ]\n})\n\ninterface DropdownSectionProps<T> extends SectionProps<T> {\n  title?: string\n}\n\nconst dropdownSectionStyles = tv({\n  slots: {\n    base: \"first:-mt-[5px] xss3 after:content-[''] after:block after:h-[5px]\",\n    header:\n      'text-sm font-medium text-muted-fg bg-tertiary px-4 py-2 truncate min-w-[--trigger-width] sticky -top-[5px] backdrop-blur -mt-px -mx-1 z-10 supports-[-moz-appearance:none]:bg-tertiary border-y [&+*]:mt-1'\n  }\n})\n\nconst { base, header } = dropdownSectionStyles()\n\nconst DropdownSection = <T extends object>({ className, ...props }: DropdownSectionProps<T>) => {\n  return (\n    <Section className={base(className)}>\n      {'title' in props && <Header className={header()}>{props.title}</Header>}\n      <Collection items={props.items}>{props.children}</Collection>\n    </Section>\n  )\n}\n\nconst DropdownItem = ({ className, ...props }: ListBoxItemProps) => {\n  const textValue =\n    props.textValue || (typeof props.children === 'string' ? props.children : undefined)\n  return (\n    <ListBoxItemPrimitive\n      textValue={textValue}\n      className={cr(className, (className, renderProps) =>\n        dropdownItemStyles({ ...renderProps, className })\n      )}\n      {...props}\n    >\n      {cr(props.children, (children, { isSelected }) => (\n        <>\n          <span className=\"flex flex-1 items-center gap-2 truncate font-normal group-selected:font-medium\">\n            {children}\n          </span>\n          <span className=\"flex w-5 items-center\">\n            {isSelected && <IconCheck className=\"h-4 w-4\" />}\n          </span>\n        </>\n      ))}\n    </ListBoxItemPrimitive>\n  )\n}\n\ninterface DropdownItemSlot extends TextProps {\n  label?: TextProps['children']\n  description?: TextProps['children']\n}\n\nconst DropdownItemDetails = ({ label, description, ...props }: DropdownItemSlot) => {\n  return (\n    <div className=\"flex flex-col gap-1\">\n      <Text slot=\"label\" className=\"font-medium lg:text-sm\" {...props}>\n        {label}\n      </Text>\n      <Text slot=\"description\" className=\"text-muted-fg text-xs\" {...props}>\n        {description}\n      </Text>\n    </div>\n  )\n}\n\n// Note: This is not exposed component, but it's used in other components to render dropdowns.\nexport { DropdownItem, dropdownItemStyles, DropdownItemDetails, DropdownSection }\n",
-    "type": "ui"
-  },
-  "avatar": {
-    "component": "@/components/ui/avatar",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { tv, type VariantProps } from 'tailwind-variants'\n\nimport { VisuallyHidden } from './visually-hidden'\n\nconst avatarGroupStyles = tv({\n  base: 'flex items-center justify-center -space-x-2 [&_[data-slot=avatar]]:ring-2 [&_[data-slot=avatar]]:ring-background'\n})\n\ninterface AvatarGroupProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof avatarGroupStyles> {\n  children: React.ReactNode\n}\n\nconst AvatarGroup = ({ className, ...props }: AvatarGroupProps) => {\n  return <div className={avatarGroupStyles({ className })} {...props} />\n}\n\nconst avatarStyles = tv({\n  base: [\n    'inline-grid relative shrink-0 bg-secondary align-middle [--avatar-radius:20%] [--ring-opacity:20%] *:col-start-1 *:row-start-1',\n    'loo2ppvkxrcah38e outline outline-1 -outline-offset-1 outline-black/[--ring-opacity] dark:outline-white/[--ring-opacity]'\n  ],\n  variants: {\n    size: {\n      small: 'size-6',\n      medium: 'size-8',\n      large: 'size-10'\n    },\n    shape: {\n      square:\n        'rounded-[--avatar-radius] *:rounded-[--avatar-radius] [&_[data-slot=badge]]:rounded-full',\n      circle: 'rounded-full *:rounded-full'\n    }\n  },\n\n  defaultVariants: {\n    shape: 'circle',\n    size: 'medium'\n  }\n})\n\ntype Status = 'away' | 'online' | 'offline' | 'dnd' | 'idle'\n\ninterface AvatarProps\n  extends React.ComponentPropsWithoutRef<'span'>,\n    VariantProps<typeof avatarStyles> {\n  src?: string | null\n  initials?: string\n  alt?: string\n  status?: Status\n  className?: string\n  role?: string\n}\n\nconst Avatar = ({\n  status,\n  src = null,\n  initials,\n  alt = '',\n  children,\n  className,\n  shape,\n  size,\n  role = 'avatar',\n  ...props\n}: AvatarProps) => {\n  const badgeId = React.useId()\n  const ariaLabelledby = [badgeId, children ? badgeId : ''].join(' ')\n  return (\n    <span\n      aria-labelledby={ariaLabelledby}\n      role={role}\n      data-slot=\"avatar\"\n      {...props}\n      className={avatarStyles({ shape, size, className })}\n    >\n      {initials && (\n        <svg\n          className=\"select-none fill-current text-[48px] font-medium uppercase\"\n          viewBox=\"0 0 100 100\"\n          aria-hidden={alt ? undefined : 'true'}\n        >\n          {alt && <title>{alt}</title>}\n          <text\n            x=\"50%\"\n            y=\"50%\"\n            alignmentBaseline=\"middle\"\n            dominantBaseline=\"middle\"\n            textAnchor=\"middle\"\n            dy=\".125em\"\n          >\n            {initials}\n          </text>\n        </svg>\n      )}\n      {src && <img src={src} alt={alt} />}\n      {status && <AvatarBadge size={size} status={status} aria-label={status} />}\n    </span>\n  )\n}\n\ntype AvatarBadgeProps = {\n  className?: string\n  status?: Status\n  fillBackground?: boolean\n  'aria-label': string\n  size?: AvatarProps['size']\n}\n\nconst avatarBadgeStyles = tv({\n  base: [\n    'size-3 z-1 absolute bottom-0 right-0 z-10 rounded-full ring-[1.5px] ring-background bg-background'\n  ],\n  variants: {\n    size: {\n      small: 'size-1.5 translate-x-[0%] translate-y-[0%]',\n      medium: 'size-2 translate-x-[5%] translate-y-[5%]',\n      large: 'size-2.5 translate-x-[5%] translate-y-[5%]'\n    },\n    status: {\n      away: 'bg-red-500',\n      online: 'bg-green-500',\n      offline: 'bg-gray-500',\n      dnd: 'bg-yellow-500',\n      idle: 'bg-gray-500'\n    }\n  },\n  defaultVariants: {\n    size: 'medium',\n    status: 'idle'\n  }\n})\n\nconst AvatarBadge = ({ size, className, status, ...props }: AvatarBadgeProps) => {\n  return (\n    <span\n      data-slot=\"badge\"\n      {...props}\n      aria-hidden\n      className={avatarBadgeStyles({ size, status, className })}\n    >\n      <VisuallyHidden>{status}</VisuallyHidden>\n    </span>\n  )\n}\n\nexport { Avatar, AvatarGroup }\n",
-    "type": "ui"
-  },
-  "range-calendar": {
-    "component": "@/components/ui/range-calendar",
-    "raw": "'use client'\n\nimport type {\n  DateValue,\n  RangeCalendarProps as RangeCalendarPrimitiveProps\n} from 'react-aria-components'\nimport {\n  CalendarCell,\n  CalendarGrid,\n  CalendarGridBody,\n  RangeCalendar as RangeCalendarPrimitive,\n  Text\n} from 'react-aria-components'\nimport { twJoin } from 'tailwind-merge'\nimport { tv } from 'tailwind-variants'\n\nimport { Calendar } from './calendar'\nimport { ctr, focusRing } from './primitive'\n\nconst cellRangeStyles = tv({\n  extend: focusRing,\n  base: 'flex h-full w-full items-center font-medium justify-center rounded-md forced-color-adjust-none',\n  variants: {\n    selectionState: {\n      none: 'group-hover:bg-gray-100 group-pressed:bg-gray-200 dark:group-hover:bg-zinc-700 dark:group-pressed:bg-zinc-600 forced-colors:group-pressed:bg-[Highlight]',\n      middle: [\n        'group-hover:bg-primary-200 dark:group-hover:bg-primary-900 forced-colors:group-hover:bg-[Highlight]',\n        'group-invalid:group-hover:bg-red-200 dark:group-invalid:group-hover:bg-red-900 forced-colors:group-invalid:group-hover:bg-[Mark]',\n        'group-pressed:bg-primary-300 dark:group-pressed:bg-primary-800 forced-colors:text-[HighlightText] forced-colors:group-pressed:bg-[Highlight]',\n        'group-invalid:group-pressed:bg-red-300 dark:group-invalid:group-pressed:bg-red-800 forced-colors:group-invalid:group-pressed:bg-[Mark]'\n      ],\n      cap: 'bg-primary text-primary-fg group-invalid:bg-danger group-invalid:text-danger-fg forced-colors:bg-[Highlight] forced-colors:text-[HighlightText] forced-colors:group-invalid:bg-[Mark]'\n    },\n    isDisabled: {\n      true: 'text-gray-300 dark:text-zinc-600 forced-colors:text-[GrayText]'\n    }\n  }\n})\n\ninterface RangeCalendarProps<T extends DateValue>\n  extends Omit<RangeCalendarPrimitiveProps<T>, 'visibleDuration'> {\n  errorMessage?: string\n}\n\nconst RangeCalendar = <T extends DateValue>({\n  errorMessage,\n  className,\n  ...props\n}: RangeCalendarProps<T>) => {\n  return (\n    <RangeCalendarPrimitive\n      className={ctr(className, 'max-w-[17.5rem] sm:max-w-[15.8rem]')}\n      {...props}\n    >\n      <Calendar.Header />\n      <CalendarGrid className=\"[&_td]:border-collapse [&_td]:px-0\">\n        <Calendar.GridHeader />\n        <CalendarGridBody>\n          {(date) => (\n            <CalendarCell\n              date={date}\n              className={twJoin([\n                'group size-10 lg:size-9 cursor-default lg:text-sm outline outline-0 outside-month:text-zinc-300 selection-start:rounded-s-md selection-end:rounded-e-md forced-colors:selected:bg-[Highlight] forced-colors:invalid:selected:bg-[Mark]',\n                'selected:bg-primary/10 dark:selected:bg-primary/20 selected:text-primary forced-colors:selected:text-[HighlightText]',\n                '[td:first-child_&]:rounded-s-md [td:last-child_&]:rounded-e-md',\n                'invalid:selected:bg-red-100 dark:invalid:selected:bg-red-700/30'\n              ])}\n            >\n              {({\n                formattedDate,\n                isSelected,\n                isSelectionStart,\n                isSelectionEnd,\n                ...renderProps\n              }) => (\n                <span\n                  className={cellRangeStyles({\n                    ...renderProps,\n                    selectionState:\n                      isSelected && (isSelectionStart || isSelectionEnd)\n                        ? 'cap'\n                        : isSelected\n                          ? 'middle'\n                          : 'none'\n                  })}\n                >\n                  {formattedDate}\n                </span>\n              )}\n            </CalendarCell>\n          )}\n        </CalendarGridBody>\n      </CalendarGrid>\n      {errorMessage && (\n        <Text slot=\"errorMessage\" className=\"text-sm text-danger\">\n          {errorMessage}\n        </Text>\n      )}\n    </RangeCalendarPrimitive>\n  )\n}\n\nexport { RangeCalendar }\n",
-    "type": "ui"
-  },
-  "combo-box": {
-    "component": "@/components/ui/combo-box",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { IconChevronLgDown, IconX } from 'justd-icons'\nimport type { InputProps } from 'react-aria-components'\nimport {\n  ComboBox as ComboboxPrimitive,\n  ComboBoxContext,\n  type ComboBoxProps as ComboboxPrimitiveProps,\n  ComboBoxStateContext,\n  type PopoverProps as PopoverPrimitiveProps,\n  useSlottedContext,\n  type ValidationResult\n} from 'react-aria-components'\nimport { tv } from 'tailwind-variants'\n\nimport { Button, ButtonPrimitive } from './button'\nimport { DropdownItem, DropdownSection } from './dropdown'\nimport { Description, FieldError, FieldGroup, Input, Label } from './field'\nimport { ListBox } from './list-box'\nimport { Popover } from './popover'\nimport { ctr } from './primitive'\n\nconst comboboxStyles = tv({\n  slots: {\n    base: 'group w-full flex flex-col gap-1',\n    chevronButton:\n      'h-7 w-8 [&_[data-slot=icon]]:text-muted-fg hover:[&_[data-slot=icon]]:text-fg pressed:[&_[data-slot=icon]]:text-fg rounded outline-offset-0 active:bg-transparent hover:bg-transparent pressed:bg-transparent',\n    chevronIcon: 'transition duration-200 group-open:rotate-180 group-open:text-fg',\n    clearButton:\n      'focus:outline-none absolute inset-y-0 right-0 flex items-center pr-2 text-muted-fg hover:text-fg'\n  }\n})\n\nconst { base, chevronButton, chevronIcon, clearButton } = comboboxStyles()\n\ninterface ComboBoxProps<T extends object> extends Omit<ComboboxPrimitiveProps<T>, 'children'> {\n  label?: string\n  placeholder?: string\n  description?: string | null\n  errorMessage?: string | ((validation: ValidationResult) => string)\n  children: React.ReactNode\n}\n\nconst ComboBox = <T extends object>({\n  label,\n  description,\n  errorMessage,\n  children,\n  className,\n  ...props\n}: ComboBoxProps<T>) => {\n  return (\n    <ComboboxPrimitive {...props} className={ctr(className, base())}>\n      <Label>{label}</Label>\n      <>{children}</>\n      {description && <Description>{description}</Description>}\n      <FieldError>{errorMessage}</FieldError>\n    </ComboboxPrimitive>\n  )\n}\n\ninterface ListBoxPickerProps<T extends object> extends React.ComponentProps<typeof ListBox<T>> {}\n\ninterface ListProps<T extends object>\n  extends ListBoxPickerProps<T>,\n    Omit<PopoverPrimitiveProps, 'children' | 'className' | 'style'> {}\n\nconst List = <T extends object>({ children, items, ...props }: ListProps<T>) => {\n  return (\n    <Popover.Picker trigger=\"ComboBox\" isNonModal placement={props.placement}>\n      <ListBox.Picker items={items} {...props}>\n        {children}\n      </ListBox.Picker>\n    </Popover.Picker>\n  )\n}\n\nconst ComboBoxInput = (props: InputProps) => {\n  const context = useSlottedContext(ComboBoxContext)!\n  return (\n    <FieldGroup className=\"pl-0 relative\">\n      <Input {...props} className=\"pl-2.5\" placeholder={props?.placeholder} />\n      <Button size=\"square-petite\" appearance=\"plain\" className={chevronButton()}>\n        {!context?.inputValue && <IconChevronLgDown className={chevronIcon()} />}\n      </Button>\n      {context?.inputValue && <ComboBoxClearButton />}\n    </FieldGroup>\n  )\n}\n\nconst ComboBoxClearButton = () => {\n  const state = React.useContext(ComboBoxStateContext)\n\n  return (\n    <ButtonPrimitive\n      className={clearButton()}\n      slot={null}\n      aria-label=\"Clear\"\n      onPress={() => {\n        state?.setSelectedKey(null)\n        state?.open()\n      }}\n    >\n      <IconX className=\"size-4 animate-in\" />\n    </ButtonPrimitive>\n  )\n}\n\nComboBox.Input = ComboBoxInput\nComboBox.List = List\nComboBox.Option = DropdownItem\nComboBox.Section = DropdownSection\n\nexport { ComboBox, type ComboBoxProps }\n",
-    "type": "ui"
-  },
-  "search-field": {
-    "component": "@/components/ui/search-field",
-    "raw": "'use client'\n\nimport { IconSearch, IconX } from 'justd-icons'\nimport {\n  SearchField as SearchFieldPrimitive,\n  type SearchFieldProps as SearchFieldPrimitiveProps,\n  type ValidationResult\n} from 'react-aria-components'\nimport { tv } from 'tailwind-variants'\n\nimport { Button } from './button'\nimport { Description, FieldError, FieldGroup, Input, Label } from './field'\nimport { ctr } from './primitive'\n\nconst searchFieldStyles = tv({\n  slots: {\n    base: 'group flex min-w-10 flex-col gap-1',\n    searchIcon:\n      'ml-2 size-4 shrink-0 text-muted-fg group-disabled:text-muted-fg/50 forced-colors:text-[ButtonText] forced-colors:group-disabled:text-[GrayText]',\n    closeButton:\n      'mr-1 size-8 text-muted-fg group-empty:invisible hover:bg-transparent pressed:text-fg',\n    input: '[&::-webkit-search-cancel-button]:hidden'\n  }\n})\n\nconst { base, searchIcon, closeButton, input } = searchFieldStyles()\n\ninterface SearchFieldProps extends SearchFieldPrimitiveProps {\n  label?: string\n  placeholder?: string\n  description?: string\n  errorMessage?: string | ((validation: ValidationResult) => string)\n}\n\nconst SearchField = ({\n  className,\n  placeholder = 'Search',\n  label,\n  description,\n  errorMessage,\n  ...props\n}: SearchFieldProps) => {\n  return (\n    <SearchFieldPrimitive {...props} className={ctr(className, base())}>\n      {label && <Label>{label}</Label>}\n      <FieldGroup>\n        <IconSearch aria-hidden className={searchIcon()} />\n        <Input placeholder={placeholder} className={input()} />\n        <Button size=\"square-petite\" appearance=\"plain\" className={closeButton()}>\n          <IconX aria-hidden className=\"size-4\" />\n        </Button>\n      </FieldGroup>\n      {description && <Description>{description}</Description>}\n      <FieldError>{errorMessage}</FieldError>\n    </SearchFieldPrimitive>\n  )\n}\n\nexport { SearchField, type SearchFieldProps }\n",
-    "type": "ui"
-  },
-  "dialog": {
-    "component": "@/components/ui/dialog",
-    "raw": "'use client'\n\nimport * as React from 'react'\n\nimport { IconX } from 'justd-icons'\nimport {\n  Dialog as DialogPrimitive,\n  type DialogProps as DialogPrimitiveProps,\n  OverlayTriggerStateContext\n} from 'react-aria-components'\nimport { tv } from 'tailwind-variants'\n\nimport type { ButtonProps } from './button'\nimport { Button } from './button'\nimport type { HeadingProps } from './heading'\nimport { Heading } from './heading'\nimport { useMediaQuery } from './primitive'\n\nconst dialogStyles = tv({\n  slots: {\n    root: [\n      'dlc relative flex max-h-[inherit] [&::-webkit-scrollbar]:size-0.5 [scrollbar-width:thin] flex-col overflow-hidden outline-none',\n      'sm:[&:not(:has([data-slot=dialog-body]))]:px-6 sm:[&:has([data-slot=dialog-body])_[data-slot=dialog-header]]:px-6 sm:[&:has([data-slot=dialog-body])_[data-slot=dialog-footer]]:px-6',\n      '[&:not(:has([data-slot=dialog-body]))]:px-4 [&:has([data-slot=dialog-body])_[data-slot=dialog-header]]:px-4 [&:has([data-slot=dialog-body])_[data-slot=dialog-footer]]:px-4'\n    ],\n    header: 'relative flex flex-col pb-3 pt-4 sm:pt-6',\n    title: 'flex flex-1 items-center',\n    description: 'text-sm block text-muted-fg mt-0.5 sm:mt-1',\n    body: [\n      'flex flex-1 flex-col gap-2 overflow-auto px-4 sm:px-6 py-1',\n      'max-h-[calc(var(--visual-viewport-height)-var(--visual-viewport-vertical-padding)-var(--dialog-header-height,0px)-var(--dialog-footer-height,0px))]'\n    ],\n    footer: 'mt-auto flex flex-col-reverse justify-between gap-3 pb-4 sm:pb-6 pt-4 sm:flex-row',\n    closeIndicator: 'close absolute right-2 top-2 size-6 z-50'\n  }\n})\n\nconst { root, header, title, description, body, footer, closeIndicator } = dialogStyles()\n\nconst Dialog = ({ role, className, ...props }: DialogPrimitiveProps) => {\n  return <DialogPrimitive {...props} role={role ?? 'dialog'} className={root({ className })} />\n}\n\ninterface DialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  title?: string\n  description?: string\n}\n\nconst Header = ({ className, ...props }: DialogHeaderProps) => {\n  const headerRef = React.useRef<HTMLHeadingElement>(null)\n\n  React.useEffect(() => {\n    const header = headerRef.current\n    if (!header) {\n      return\n    }\n\n    const observer = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        header.parentElement?.style.setProperty(\n          '--dialog-header-height',\n          `${entry.target.clientHeight}px`\n        )\n      }\n    })\n\n    observer.observe(header)\n    return () => observer.unobserve(header)\n  }, [])\n\n  return (\n    <div data-slot=\"dialog-header\" ref={headerRef} className={header({ className })}>\n      {props.title && <Title>{props.title}</Title>}\n      {props.description && <Description>{props.description}</Description>}\n      {!props.title && typeof props.children === 'string' ? <Title {...props} /> : props.children}\n    </div>\n  )\n}\n\ninterface DialogTitleProps extends HeadingProps {\n  className?: string\n}\n\nconst Title = ({ tracking = 'tight', level = 2, className, ...props }: DialogTitleProps) => (\n  <Heading\n    slot=\"title\"\n    tracking={tracking}\n    level={level}\n    className={title({ className })}\n    {...props}\n  />\n)\n\nconst Description = ({ className, ...props }: HeadingProps) => (\n  <p className={description({ className })} {...props} />\n)\n\nconst Body = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n  <div data-slot=\"dialog-body\" className={body({ className })} {...props} />\n)\n\nconst Footer = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => {\n  const footerRef = React.useRef<HTMLDivElement>(null)\n\n  React.useEffect(() => {\n    const footer = footerRef.current\n\n    if (!footer) {\n      return\n    }\n\n    const observer = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        footer.parentElement?.style.setProperty(\n          '--dialog-footer-height',\n          `${entry.target.clientHeight}px`\n        )\n      }\n    })\n\n    observer.observe(footer)\n    return () => {\n      observer.unobserve(footer)\n    }\n  }, [])\n  return (\n    <div ref={footerRef} data-slot=\"dialog-footer\" className={footer({ className })} {...props} />\n  )\n}\n\nconst Close = ({ className, ...props }: ButtonProps) => {\n  const state = React.useContext(OverlayTriggerStateContext)!\n  return (\n    <Button className={className} appearance=\"outline\" onPress={() => state.close()} {...props} />\n  )\n}\n\ninterface CloseButtonIndicatorProps {\n  className?: string\n  close: () => void\n  isDismissable?: boolean | undefined\n}\n\nconst CloseIndicator = ({ className, ...props }: CloseButtonIndicatorProps) => {\n  const isMobile = useMediaQuery('(max-width: 600px)')\n  const buttonRef = React.useRef<HTMLButtonElement>(null)\n\n  React.useEffect(() => {\n    if (isMobile && buttonRef.current) {\n      buttonRef.current.focus()\n    }\n  }, [isMobile])\n  return props.isDismissable ? (\n    <Button\n      ref={buttonRef}\n      {...(isMobile ? { autoFocus: true } : {})}\n      appearance=\"plain\"\n      size=\"square-petite\"\n      aria-label=\"Close\"\n      onPress={props.close}\n      className={closeIndicator({ className })}\n    >\n      <IconX className=\"size-4\" />\n    </Button>\n  ) : null\n}\n\nDialog.Header = Header\nDialog.Title = Title\nDialog.Description = Description\nDialog.Body = Body\nDialog.Footer = Footer\nDialog.Close = Close\nDialog.CloseIndicator = CloseIndicator\n\nexport { Dialog }\n",
-    "type": "ui"
-  },
-  "menu": {
-    "component": "@/components/ui/menu",
-    "raw": "'use client'\n\nimport * as React from 'react'\n\nimport { IconBulletFill, IconCheck, IconChevronLgRight } from 'justd-icons'\nimport type {\n  ButtonProps,\n  MenuItemProps as MenuItemPrimitiveProps,\n  MenuProps as MenuPrimitiveProps,\n  MenuTriggerProps as MenuTriggerPrimitiveProps,\n  PopoverProps,\n  SeparatorProps\n} from 'react-aria-components'\nimport {\n  Button,\n  Header,\n  Menu as MenuPrimitive,\n  MenuItem,\n  MenuTrigger as MenuTriggerPrimitive,\n  Separator,\n  SubmenuTrigger as SubmenuTriggerPrimitive\n} from 'react-aria-components'\nimport type { VariantProps } from 'tailwind-variants'\nimport { tv } from 'tailwind-variants'\n\nimport { DropdownItemDetails, dropdownItemStyles, DropdownSection } from './dropdown'\nimport { Keyboard } from './keyboard'\nimport { Popover } from './popover'\nimport { cn, cr } from './primitive'\n\ninterface MenuContextProps {\n  respectScreen: boolean\n}\n\nconst MenuContext = React.createContext<MenuContextProps>({ respectScreen: true })\n\ninterface MenuProps extends MenuTriggerPrimitiveProps {\n  respectScreen?: boolean\n}\n\nconst Menu = ({ respectScreen = true, ...props }: MenuProps) => {\n  return (\n    <MenuContext.Provider value={{ respectScreen }}>\n      <MenuTriggerPrimitive {...props}>\n        <>{props.children}</>\n      </MenuTriggerPrimitive>\n    </MenuContext.Provider>\n  )\n}\n\nconst SubMenu = ({ delay = 0, ...props }) => (\n  <SubmenuTriggerPrimitive {...props} delay={delay}>\n    {props.children}\n  </SubmenuTriggerPrimitive>\n)\n\nconst menuStyles = tv({\n  slots: {\n    menu: 'z32kk max-h-[calc(var(--visual-viewport-height)-10rem)] sm:max-h-[inherit] overflow-auto rounded-xl p-1 outline outline-0 [clip-path:inset(0_0_0_0_round_calc(var(--radius)-2px))]',\n    popover: 'z-50 min-w-40 p-0 outline-none shadow-sm',\n    trigger: [\n      'inline text-left focus:outline-none focus-visible:ring-1 focus-visible:ring-primary-500 pressed:outline-none'\n    ]\n  }\n})\n\nconst { menu, popover, trigger } = menuStyles()\n\ninterface MenuTriggerProps extends ButtonProps {\n  className?: string\n}\n\nconst Trigger = ({ className, ...props }: MenuTriggerProps) => (\n  <Button className={trigger({ className })} {...props} />\n)\n\ninterface MenuContentProps<T>\n  extends Omit<PopoverProps, 'children' | 'style'>,\n    MenuPrimitiveProps<T> {\n  className?: string\n  popoverClassName?: string\n  showArrow?: boolean\n  respectScreen?: boolean\n}\n\nconst Content = <T extends object>({\n  className,\n  showArrow = false,\n  popoverClassName,\n  offset = 4,\n  ...props\n}: MenuContentProps<T>) => {\n  const { respectScreen } = React.useContext(MenuContext)\n  return (\n    <Popover.Content\n      respectScreen={respectScreen}\n      showArrow={showArrow}\n      className={popover({ className: popoverClassName })}\n      {...props}\n    >\n      <MenuPrimitive className={menu({ className })} {...props} />\n    </Popover.Content>\n  )\n}\n\ninterface MenuItemProps\n  extends Omit<MenuItemPrimitiveProps, 'isDanger'>,\n    VariantProps<typeof dropdownItemStyles> {\n  isDanger?: boolean\n}\n\nconst Item = ({ className, isDanger = false, children, ...props }: MenuItemProps) => {\n  const textValue = props.textValue || (typeof children === 'string' ? children : undefined)\n  return (\n    <MenuItem\n      textValue={textValue}\n      className={cr(className, (className, renderProps) =>\n        dropdownItemStyles({\n          ...renderProps,\n          className\n        })\n      )}\n      data-danger={isDanger ? 'true' : undefined}\n      {...props}\n    >\n      {(values) => (\n        <>\n          {typeof children === 'function' ? children(values) : children}\n          {values.hasSubmenu && <IconChevronLgRight className=\"gpfw ml-auto size-3.5\" />}\n        </>\n      )}\n    </MenuItem>\n  )\n}\n\nexport interface MenuHeaderProps extends React.ComponentProps<typeof Header> {\n  inset?: boolean\n  separator?: boolean\n}\n\nconst MenuHeader = ({ className, inset, separator = false, ...props }: MenuHeaderProps) => (\n  <Header\n    className={cn(\n      'p-2 text-base font-semibold sm:text-sm',\n      separator && '-mx-1 border-b border-b-border px-3 pb-[0.625rem]',\n      className\n    )}\n    {...props}\n  />\n)\n\nconst MenuSeparator = ({ className, ...props }: SeparatorProps) => (\n  <Separator className={cn('-mx-1 my-1 h-px ms bg-muted', className)} {...props} />\n)\n\nconst Checkbox = ({ className, children, ...props }: MenuItemProps) => (\n  <Item className={cn('pl-8 relative', className)} {...props}>\n    {(values) => (\n      <>\n        {values.isSelected && (\n          <span className=\"absolute left-2.5 flex size-4 items-center animate-in justify-center\">\n            <IconCheck className=\"size-4\" />\n          </span>\n        )}\n\n        {typeof children === 'function' ? children(values) : children}\n      </>\n    )}\n  </Item>\n)\n\nconst Radio = ({ className, children, ...props }: MenuItemProps) => (\n  <Item className={cn('pl-8 relative', className)} {...props}>\n    {(values) => (\n      <>\n        {values.isSelected && (\n          <span className=\"absolute left-3.5 flex size-[0.650rem] items-center animate-in justify-center\">\n            <IconBulletFill className=\"size-[0.650rem]\" />\n          </span>\n        )}\n\n        {typeof children === 'function' ? children(values) : children}\n      </>\n    )}\n  </Item>\n)\n\nMenu.Primitive = MenuPrimitive\nMenu.Content = Content\nMenu.Header = MenuHeader\nMenu.Item = Item\nMenu.Content = Content\nMenu.Keyboard = Keyboard\nMenu.Checkbox = Checkbox\nMenu.Radio = Radio\nMenu.Section = DropdownSection\nMenu.Separator = MenuSeparator\nMenu.Trigger = Trigger\nMenu.ItemDetails = DropdownItemDetails\nMenu.Submenu = SubMenu\n\nexport { Menu, type MenuItemProps, type MenuContentProps }\n",
-    "type": "ui"
-  },
-  "progress-bar": {
-    "component": "@/components/ui/progress-bar",
-    "raw": "'use client'\n\nimport * as React from 'react'\n\nimport { motion } from 'framer-motion'\nimport {\n  ProgressBar as ProgressBarPrimitive,\n  type ProgressBarProps as ProgressBarPrimitiveProps\n} from 'react-aria-components'\n\nimport { Label } from './field'\nimport { ctr } from './primitive'\n\ninterface ProgressBarProps extends ProgressBarPrimitiveProps {\n  label?: string\n}\n\nconst ProgressBar = ({ label, ...props }: ProgressBarProps) => {\n  return (\n    <ProgressBarPrimitive {...props} className={ctr(props.className, 'flex flex-col gap-1')}>\n      {({ percentage, valueText, isIndeterminate }) => (\n        <>\n          <div className=\"flex justify-between gap-2\">\n            <Label>{label}</Label>\n            <span className=\"text-sm text-muted-fg\">{valueText}</span>\n          </div>\n          <div className=\"relative h-2 min-w-64 overflow-hidden rounded-full bg-secondary outline outline-1 -outline-offset-1 outline-transparent\">\n            {!isIndeterminate ? (\n              <motion.div\n                className=\"absolute left-0 top-0 h-full rounded-full bg-primary forced-colors:bg-[Highlight]\"\n                initial={{ width: '0%' }}\n                animate={{ width: `${percentage}%` }}\n                transition={{ duration: 0.5, ease: 'easeInOut' }}\n              />\n            ) : (\n              <motion.div\n                className=\"absolute top-0 h-full rounded-full bg-primary forced-colors:bg-[Highlight]\"\n                initial={{ left: '0%', width: '40%' }}\n                animate={{ left: ['0%', '100%', '0%'] }}\n                transition={{\n                  repeat: Infinity,\n                  duration: 2,\n                  ease: 'easeInOut'\n                }}\n              />\n            )}\n          </div>\n        </>\n      )}\n    </ProgressBarPrimitive>\n  )\n}\n\nexport { ProgressBar, type ProgressBarProps }\n",
-    "type": "ui"
-  },
-  "badge": {
-    "component": "@/components/ui/badge",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { tv, type VariantProps } from 'tailwind-variants'\n\nconst badgeIntents = {\n  primary:\n    'ring-primary/30 bg-primary/10 dark:bg-primary/20 text-primary dark:text-primary-300 hover:bg-primary/15 dark:hover:bg-primary/10',\n  secondary: 'bg-secondary/50 dark:bg-secondary/70 ring-secondary-fg/20 text-secondary-fg',\n  success:\n    'dark:ring-success/30 ring-success/40 bg-success/10 dark:bg-success/15 text-success hover:bg-success/15 dark:hover:bg-success/10',\n  info: 'dark:ring-info/30 ring-info/80 bg-info/20 dark:bg-info/15 text-info-fg dark:text-info hover:bg-info/15 dark:hover:bg-info/10',\n  warning:\n    'dark:ring-warning/40 ring-warning/50 bg-warning/10 dark:bg-warning/15 text-warning-fg dark:text-warning hover:bg-warning/15 dark:hover:bg-warning/10',\n  danger:\n    'dark:ring-danger/30 ring-danger/40 bg-danger/10 dark:bg-danger/15 text-danger hover:bg-danger/15 dark:hover:bg-danger/10',\n  light:\n    'ring-zinc-300 dark:ring-white bg-white hover:bg-zinc-100 dark:hover:bg-zinc-200 dark:ring-inset text-zinc-900 dark:text-zinc-900',\n  dark: 'bg-zinc-800 hover:bg-zinc-800/90 ring-inset ring-zinc-800 text-white dark:ring-zinc-600'\n}\nconst badgeShapes = {\n  square: 'rounded-md px-1.5',\n  circle: 'px-2 rounded-full'\n}\nconst badgeStyles = tv({\n  base: 'inline-flex items-center gap-x-1.5 py-0.5 text-xs/5 font-medium ring-1 ring-white/10 dark:ring-inset forced-colors:outline [&_[data-slot=icon]]:size-3',\n  variants: {\n    intent: { ...badgeIntents },\n    shape: { ...badgeShapes }\n  },\n  defaultVariants: {\n    intent: 'primary',\n    shape: 'square'\n  }\n})\n\ninterface BadgeProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof badgeStyles> {\n  className?: string\n  children: React.ReactNode\n}\n\nconst Badge = ({ children, intent, shape, className, ...props }: BadgeProps) => {\n  return (\n    <span {...props} className={badgeStyles({ intent, shape, className })}>\n      {children}\n    </span>\n  )\n}\n\nexport { Badge, badgeIntents, badgeStyles, badgeShapes }\n",
-    "type": "ui"
-  },
-  "color-picker": {
-    "component": "@/components/ui/color-picker",
-    "raw": "'use client'\n\nimport * as React from 'react'\n\nimport {\n  ColorPicker as ColorPickerPrimitive,\n  type ColorPickerProps as ColorPickerPrimitiveProps,\n  type ColorSpace,\n  getColorChannels,\n  Group\n} from 'react-aria-components'\nimport { tv } from 'tailwind-variants'\nimport tailwindColors from 'tailwindcss/colors'\n\nimport { Button, ButtonPrimitive } from './button'\nimport {\n  ColorArea,\n  ColorSlider,\n  ColorSwatch,\n  ColorSwatchPicker,\n  ColorSwatchPickerItem,\n  ColorThumb,\n  defaultColor\n} from './color'\nimport { ColorField } from './color-field'\nimport { Description, Label } from './field'\nimport { Popover } from './popover'\nimport { Select } from './select'\n\nconst colorPickerStyles = tv({\n  slots: {\n    base: 'flex w-full flex-col gap-1',\n    triggerColorField:\n      'size-10 -mr-2.5 tcf bg-background grid place-content-center focus:outline-none',\n    triggerColorPicker: 'w-full hover:bg-tertiary tcp max-w-sm bg-background justify-start',\n    colorArea: 'w-full mt-2 sm:mt-0',\n    colorSlider: '[&_.cstrk]:orientation-horizontal:h-3',\n    colorSwatchPicker: 'flex flex-wrap gap-x-2 gap-y-2.5'\n  }\n})\n\nconst { base, triggerColorField, triggerColorPicker, colorArea, colorSlider, colorSwatchPicker } =\n  colorPickerStyles()\n\ninterface ColorPickerProps extends ColorPickerPrimitiveProps {\n  space?: ColorSpace\n  enableColorSwatch?: boolean\n  enableColorFormatSelection?: boolean\n  isHex?: boolean\n  label?: string\n  description?: string\n  errorMessage?: string\n  placeholder?: string\n  colors?: string[]\n  isDisabled?: boolean\n  className?: string\n  trigger?: 'color-picker' | 'color-field'\n  enableColorField?: boolean\n  closeButton?: boolean\n}\n\nconst ColorPicker = ({\n  closeButton = true,\n  enableColorSwatch = false,\n  enableColorFormatSelection = false,\n  enableColorField = true,\n  label,\n  description,\n  colors = [...Object.values(tailwindColors.zinc)],\n  placeholder = 'Fill Color',\n  isHex = true,\n  isDisabled = false,\n  className,\n  trigger = 'color-picker',\n  ...props\n}: ColorPickerProps) => {\n  const [space, setSpace] = React.useState<ColorSpace>('rgb')\n  const [isHexFormat, setIsHexFormat] = React.useState(false)\n  const value = props.value ?? props.defaultValue\n  return (\n    <div className={base({ className })}>\n      {label && <Label>{label}</Label>}\n      <Group>\n        <ColorPickerPrimitive defaultValue={defaultColor} {...props}>\n          <Popover>\n            {trigger === 'color-field' ? (\n              <ButtonPrimitive aria-label=\"Color swatch\" className={triggerColorField()}>\n                <ColorSwatch color={value?.toString(space)} className=\"size-6\" />\n              </ButtonPrimitive>\n            ) : trigger === 'color-picker' ? (\n              <Button\n                aria-label=\"Color picker\"\n                isDisabled={isDisabled}\n                appearance=\"outline\"\n                className={triggerColorPicker()}\n              >\n                <ColorSwatch color={value?.toString(space)} className=\"-ml-1.5 size-6\" />\n                {value ? <span>{value.toString(space)}</span> : <span>{placeholder}</span>}\n              </Button>\n            ) : null}\n            <Popover.Content\n              showArrow={false}\n              className=\"overflow-y-auto sm:min-w-56 w-full sm:max-w-[16rem] px-0 pt-2 pb-3 sm:p-2.5 [&::-webkit-scrollbar]:size-0.5 [scrollbar-width:thin]\"\n              {...props}\n            >\n              <div className=\"grid gap-2\">\n                <ColorArea\n                  aria-describedby={`${label ? `${label} color area` : 'Color slider'}`}\n                  className={colorArea()}\n                  colorSpace=\"hsb\"\n                  xChannel=\"saturation\"\n                  yChannel=\"brightness\"\n                >\n                  <ColorThumb className=\"z-40\" />\n                </ColorArea>\n                <ColorSlider\n                  aria-describedby={`${label ? `${label} color slider` : 'Color slider'}`}\n                  showOutput={false}\n                  className={colorSlider()}\n                  colorSpace=\"hsb\"\n                  channel=\"hue\"\n                />\n\n                {enableColorFormatSelection && (\n                  <Select\n                    aria-label=\"Color Space\"\n                    selectedKey={space}\n                    defaultSelectedKey={space}\n                    onSelectionChange={(s) => {\n                      setSpace(s as ColorSpace)\n                      setIsHexFormat(s === 'hex')\n                    }}\n                  >\n                    <Select.Trigger />\n                    <Select.List>\n                      {['rgb', 'hex', 'hsl', 'hsb'].map((s) => (\n                        <Select.Option key={s} id={s} textValue={s}>\n                          {s}\n                        </Select.Option>\n                      ))}\n                    </Select.List>\n                  </Select>\n                )}\n\n                {enableColorFormatSelection ? (\n                  <div className=\"flex gap-2 max-w-[inherit]\">\n                    {isHexFormat ? (\n                      <ColorField aria-label=\"Hex color\" colorSpace={space} />\n                    ) : (\n                      getColorChannels(space).map((channel) => (\n                        <ColorField\n                          aria-describedby={label ?? 'Color field'}\n                          colorSpace={space}\n                          channel={channel}\n                          key={channel}\n                        />\n                      ))\n                    )}\n                  </div>\n                ) : enableColorField ? (\n                  <ColorField aria-label={`Color in ${space} format`} colorSpace={space} />\n                ) : null}\n\n                {enableColorSwatch && colors && colors.length > 0 && (\n                  <ColorSwatchPicker\n                    aria-label=\"Color swatch picker\"\n                    layout=\"grid\"\n                    className={colorSwatchPicker()}\n                  >\n                    {colors.map((color) => (\n                      <ColorSwatchPickerItem key={color} color={color} />\n                    ))}\n                  </ColorSwatchPicker>\n                )}\n\n                {closeButton && (\n                  <div className=\"sm:hidden mt-2.5 mx-auto w-full max-w-[inherit]\">\n                    <Popover.Close shape=\"circle\" className=\"w-full\">\n                      Close\n                    </Popover.Close>\n                  </div>\n                )}\n              </div>\n            </Popover.Content>\n          </Popover>\n        </ColorPickerPrimitive>\n      </Group>\n      {description && <Description>{description}</Description>}\n    </div>\n  )\n}\n\nexport { ColorPicker, type ColorPickerProps }\n",
-    "type": "ui"
-  },
-  "snippet": {
-    "component": "@/components/ui/snippet",
-    "raw": "'use client'\n\nimport * as React from 'react'\n\nimport { AnimatePresence, motion } from 'framer-motion'\nimport { IconCheck, IconDuplicate } from 'justd-icons'\nimport { toast } from 'sonner'\nimport { twMerge } from 'tailwind-merge'\n\nimport { Button, type ButtonProps } from './button'\nimport { cn } from './primitive'\n\nconst snippetVariants = {\n  hidden: { opacity: 0, scale: 0.5 },\n  visible: { opacity: 1, scale: 1 }\n}\n\ninterface SnippetProps extends React.HTMLAttributes<HTMLDivElement> {\n  text: string\n}\n\nconst Snippet: React.FC<SnippetProps> = ({ className, text, ...props }) => {\n  const [copied, setCopied] = React.useState(false)\n\n  const handleCopy = async () => {\n    if (navigator.clipboard && window.isSecureContext) {\n      try {\n        await navigator.clipboard.writeText(text)\n        setCopied(true)\n        setTimeout(() => setCopied(false), 2000) // Reset the copied state after 2 seconds\n      } catch (error) {\n        toast.error('Failed to copy to clipboard')\n      }\n    } else {\n      toast.error('Failed to copy to clipboard')\n    }\n  }\n\n  return (\n    <div\n      {...props}\n      className={twMerge(\n        'relative flex items-center justify-between rounded-lg border bg-[#0e0e10] text-white py-2.5 pl-3 pr-2.5 font-mono text-sm [&>svg:hover]:text-white [&>svg]:text-muted-fg [&>svg]:transition [&_svg]:shrink-0',\n        className\n      )}\n    >\n      <span className=\"mr-6\">{text}</span>\n      <Button\n        className=\"size-7 bx backdrop-blur-lg text-white bg-zinc-800 border hover:bg-zinc-700 border-zinc-700\"\n        aria-label=\"Copy imports statement\"\n        size=\"square-petite\"\n        appearance=\"outline\"\n        onPress={handleCopy}\n      >\n        <AnimatePresence mode=\"wait\" initial={false}>\n          {copied ? (\n            <motion.span\n              key=\"checkmark\"\n              variants={snippetVariants}\n              initial=\"hidden\"\n              animate=\"visible\"\n              exit=\"hidden\"\n            >\n              <IconCheck />\n            </motion.span>\n          ) : (\n            <motion.span\n              key=\"copy\"\n              variants={snippetVariants}\n              initial=\"hidden\"\n              animate=\"visible\"\n              exit=\"hidden\"\n            >\n              <IconDuplicate />\n            </motion.span>\n          )}\n        </AnimatePresence>\n      </Button>\n    </div>\n  )\n}\n\ninterface CopyButtonProps extends ButtonProps {\n  isCopied?: boolean\n  ariaLabel?: string\n  initialIcon?: React.ReactNode\n  copiedIcon?: React.ReactNode\n  className?: string\n}\n\nconst CopyButton = ({\n  initialIcon,\n  copiedIcon,\n  ariaLabel = 'Copy',\n  isCopied,\n  className,\n  ...props\n}: CopyButtonProps) => {\n  return (\n    <Button\n      className={cn(\n        'size-7 backdrop-blur-lg rounded-md text-white bg-zinc-800 border hover:bg-zinc-700 border-zinc-700',\n        className\n      )}\n      aria-label={ariaLabel}\n      size=\"square-petite\"\n      appearance=\"outline\"\n      {...props}\n    >\n      <AnimatePresence mode=\"wait\" initial={false}>\n        {isCopied ? (\n          <motion.span\n            key=\"checkmark-import\"\n            variants={snippetVariants}\n            initial=\"hidden\"\n            animate=\"visible\"\n            exit=\"hidden\"\n          >\n            {copiedIcon ?? <IconCheck />}\n          </motion.span>\n        ) : (\n          <motion.span\n            key=\"copy-import\"\n            variants={snippetVariants}\n            initial=\"hidden\"\n            animate=\"visible\"\n            exit=\"hidden\"\n          >\n            {initialIcon ?? <IconDuplicate />}\n          </motion.span>\n        )}\n      </AnimatePresence>\n    </Button>\n  )\n}\n\nexport { CopyButton, Snippet, snippetVariants, type SnippetProps }\n",
-    "type": "ui"
-  },
-  "number-field": {
-    "component": "@/components/ui/number-field",
-    "raw": "'use client'\n\nimport { IconChevronDown, IconChevronUp, IconMinus, IconPlus } from 'justd-icons'\nimport {\n  Button,\n  type ButtonProps,\n  NumberField as NumberFieldPrimitive,\n  type NumberFieldProps as NumberFieldPrimitiveProps,\n  type ValidationResult\n} from 'react-aria-components'\nimport { tv } from 'tailwind-variants'\n\nimport { Description, fieldBorderStyles, FieldError, FieldGroup, Input, Label } from './field'\nimport { ctr, useMediaQuery } from './primitive'\n\nconst numberFieldStyles = tv({\n  slots: {\n    base: 'group flex flex-col gap-1',\n    stepperButton:\n      'h-10 cursor-default px-2 text-muted-fg pressed:bg-primary pressed:text-primary-fg group-disabled:bg-secondary forced-colors:group-disabled:text-[GrayText]'\n  }\n})\n\nconst { base, stepperButton } = numberFieldStyles()\n\ninterface NumberFieldProps extends NumberFieldPrimitiveProps {\n  label?: string\n  description?: string\n  placeholder?: string\n  errorMessage?: string | ((validation: ValidationResult) => string)\n}\n\nconst NumberField = ({\n  label,\n  placeholder,\n  description,\n  className,\n  errorMessage,\n  ...props\n}: NumberFieldProps) => {\n  const isMobile = useMediaQuery('(max-width: 768px)')\n  return (\n    <NumberFieldPrimitive {...props} className={ctr(className, base())}>\n      <Label>{label}</Label>\n      <FieldGroup className=\"group-disabled:bg-secondary\">\n        {(renderProps) => (\n          <>\n            {isMobile ? <StepperButton slot=\"decrement\" className=\"border-r\" /> : null}\n            <Input placeholder={placeholder} />\n            <div\n              className={fieldBorderStyles({\n                ...renderProps,\n                className: 'grid h-10 place-content-center border-s'\n              })}\n            >\n              {isMobile ? (\n                <StepperButton slot=\"increment\" />\n              ) : (\n                <div className=\"flex h-full flex-col\">\n                  <StepperButton slot=\"increment\" emblemType=\"chevron\" className=\"h-5 px-1\" />\n                  <div\n                    className={fieldBorderStyles({\n                      ...renderProps,\n                      className: 'border-b'\n                    })}\n                  />\n                  <StepperButton slot=\"decrement\" emblemType=\"chevron\" className=\"h-5 px-1\" />\n                </div>\n              )}\n            </div>\n          </>\n        )}\n      </FieldGroup>\n      {description && <Description>{description}</Description>}\n      <FieldError>{errorMessage}</FieldError>\n    </NumberFieldPrimitive>\n  )\n}\n\ninterface StepperButtonProps extends ButtonProps {\n  slot: 'increment' | 'decrement'\n  emblemType?: 'chevron' | 'default'\n  className?: string\n}\n\nconst StepperButton = ({\n  slot,\n  className,\n  emblemType = 'default',\n  ...props\n}: StepperButtonProps) => {\n  const icon =\n    emblemType === 'chevron' ? (\n      slot === 'increment' ? (\n        <IconChevronUp className=\"size-5\" />\n      ) : (\n        <IconChevronDown className=\"size-5\" />\n      )\n    ) : slot === 'increment' ? (\n      <IconPlus />\n    ) : (\n      <IconMinus />\n    )\n  return (\n    <Button className={stepperButton({ className })} slot={slot} {...props}>\n      {icon}\n    </Button>\n  )\n}\n\nexport { NumberField, type NumberFieldProps }\n",
-    "type": "ui"
-  },
-  "table": {
-    "component": "@/components/ui/table",
-    "raw": "'use client'\n\nimport { IconChevronDown, IconChevronUp, IconHamburger } from 'justd-icons'\nimport type {\n  CellProps as CellPrimitiveProps,\n  ColumnProps as ColumnPrimitiveProps,\n  RowProps as RowPrimitiveProps,\n  TableBodyProps,\n  TableHeaderProps as TableHeaderPrimitiveProps,\n  TableProps as TablePrimitiveProps\n} from 'react-aria-components'\nimport {\n  Button,\n  Cell as CellPrimitive,\n  Collection,\n  Column as ColumnPrimitive,\n  Row as RowPrimitive,\n  Table as TablePrimitive,\n  TableBody as TableBodyPrimitive,\n  TableHeader,\n  useTableOptions\n} from 'react-aria-components'\nimport { tv } from 'tailwind-variants'\n\nimport { Checkbox } from './checkbox'\nimport { cn } from './primitive'\n\nconst table = tv({\n  slots: {\n    root: 'table w-full caption-bottom border-spacing-0 text-sm outline-none',\n    column:\n      'whitespace-nowrap allows-sorting:cursor-pointer px-3 py-3 text-left dragging:cursor-grabbing font-medium outline-none [&:has([slot=selection])]:pr-0',\n    header: 'border-b x32',\n    row: 'tr group relative cursor-default border-b text-fg/70 outline-none ring-primary focus-visible:ring-1 selected:bg-primary/15',\n    cell: 'whitespace-nowrap px-3 py-3 outline-none'\n  }\n})\n\nconst { root, header, column, row, cell } = table()\n\ninterface TableProps extends TablePrimitiveProps {\n  className?: string\n}\n\nconst Table = ({ children, className, ...props }: TableProps) => (\n  <div className=\"relative w-full overflow-auto\">\n    <TablePrimitive {...props} className={root({ className })}>\n      {children}\n    </TablePrimitive>\n  </div>\n)\n\nconst Body = <T extends object>(props: TableBodyProps<T>) => (\n  <TableBodyPrimitive {...props} className={cn('[&_.tr:last-child]:border-0')} />\n)\n\ninterface CellProps extends CellPrimitiveProps {\n  className?: string\n}\n\nconst Cell = ({ children, className, ...props }: CellProps) => (\n  <CellPrimitive {...props} className={cell({ className })}>\n    {children}\n  </CellPrimitive>\n)\n\ninterface ColumnProps extends ColumnPrimitiveProps {\n  className?: string\n}\n\nconst Column = ({ children, className, ...props }: ColumnProps) => (\n  <ColumnPrimitive {...props} className={column({ className })}>\n    {({ allowsSorting, sortDirection }) => (\n      <div className=\"flex [&>[data-slot=icon]]:shrink-0 items-center gap-2\">\n        <>\n          {children}\n          {allowsSorting &&\n            (sortDirection === undefined ? (\n              <span>daf</span>\n            ) : sortDirection === 'ascending' ? (\n              <IconChevronUp />\n            ) : (\n              <IconChevronDown />\n            ))}\n        </>\n      </div>\n    )}\n  </ColumnPrimitive>\n)\n\ninterface HeaderProps<T extends object> extends TableHeaderPrimitiveProps<T> {\n  className?: string\n}\n\nconst Header = <T extends object>({ children, className, columns, ...props }: HeaderProps<T>) => {\n  const { selectionBehavior, selectionMode, allowsDragging } = useTableOptions()\n  return (\n    <TableHeader {...props} className={header({ className })}>\n      {allowsDragging && <Column />}\n      {selectionBehavior === 'toggle' && (\n        <Column className=\"pl-4\">\n          {selectionMode === 'multiple' && <Checkbox slot=\"selection\" />}\n        </Column>\n      )}\n      <Collection items={columns}>{children}</Collection>\n    </TableHeader>\n  )\n}\n\ninterface RowProps<T extends object> extends RowPrimitiveProps<T> {\n  className?: string\n}\n\nconst Row = <T extends object>({ children, className, columns, id, ...props }: RowProps<T>) => {\n  const { selectionBehavior, allowsDragging } = useTableOptions()\n  return (\n    <RowPrimitive\n      id={id}\n      {...props}\n      className={row({\n        className: 'href' in props ? cn('cursor-pointer hover:bg-secondary/50', className) : ''\n      })}\n    >\n      {allowsDragging && (\n        <Cell className=\"ring-primary pr-0 group cursor-grab dragging:cursor-grabbing\">\n          <Button\n            className=\"bg-transparent pl-3.5 py-1.5 text-muted-fg pressed:text-fg\"\n            slot=\"drag\"\n          >\n            <IconHamburger />\n          </Button>\n        </Cell>\n      )}\n      {selectionBehavior === 'toggle' && (\n        <Cell className=\"pl-4\">\n          <span\n            aria-hidden\n            className=\"absolute inset-y-0 left-0 hidden h-full w-0.5 bg-primary group-selected:block\"\n          />\n          <Checkbox slot=\"selection\" />\n        </Cell>\n      )}\n      <Collection items={columns}>{children}</Collection>\n    </RowPrimitive>\n  )\n}\n\nTable.Body = Body\nTable.Cell = Cell\nTable.Column = Column\nTable.Header = Header\nTable.Row = Row\n\nexport { Table }\n",
-    "type": "ui"
-  },
-  "separator": {
-    "component": "@/components/ui/separator",
-    "raw": "'use client'\n\nimport * as React from 'react'\n\nimport { Separator as SeparatorPrimitive, type SeparatorProps } from 'react-aria-components'\nimport { tv } from 'tailwind-variants'\n\nconst separatorStyles = tv({\n  base: 'bg-muted shrink-0 forced-colors:bg-[ButtonBorder]',\n  variants: {\n    orientation: {\n      horizontal: 'h-px w-full',\n      vertical: 'w-px'\n    }\n  },\n  defaultVariants: {\n    orientation: 'horizontal'\n  }\n})\n\nexport function Separator({ className, ...props }: SeparatorProps) {\n  return (\n    <SeparatorPrimitive\n      {...props}\n      className={separatorStyles({\n        orientation: props.orientation,\n        className: className\n      })}\n    />\n  )\n}\n\nexport type { SeparatorProps }\n",
-    "type": "ui"
-  },
-  "button": {
-    "component": "@/components/ui/button",
-    "raw": "'use client'\n\nimport * as React from 'react'\n\nimport {\n  Button as ButtonPrimitive,\n  type ButtonProps as ButtonPrimitiveProps\n} from 'react-aria-components'\nimport { tv } from 'tailwind-variants'\n\nimport { cr, focusButtonStyles } from './primitive'\n\nconst buttonStyles = tv(\n  {\n    extend: focusButtonStyles,\n    base: [\n      'kbt32x relative no-underline isolate inline-flex items-center justify-center gap-x-2 border font-medium',\n      'forced-colors:[--btn-icon:ButtonText] forced-colors:hover:[--btn-icon:ButtonText] [&>[data-slot=icon]]:-mx-0.5 [&>[data-slot=icon]]:my-1 [&>[data-slot=icon]]:size-4 [&>[data-slot=icon]]:shrink-0 [&>[data-slot=icon]]:text-[--btn-icon]'\n    ],\n    variants: {\n      intent: {\n        primary: [\n          'text-white [--btn-bg:theme(colors.primary.DEFAULT)] [--btn-border:theme(colors.primary.DEFAULT)] [--btn-hover-overlay:theme(colors.white/10%)]',\n          '[--btn-icon:theme(colors.primary.fg/60%)] active:[--btn-icon:theme(colors.primary.fg/80%)] hover:[--btn-icon:theme(colors.primary.fg/80%)]'\n        ],\n        secondary: [\n          'text-secondary-fg [--btn-bg:white] dark:[--btn-bg:theme(colors.secondary.DEFAULT)] [--btn-border:theme(colors.secondary.fg/10%)] [--btn-hover-overlay:theme(colors.secondary.fg/2.5%)] data-[active]:[--btn-border:theme(colors.secondary.fg/15%)] hover:[--btn-border:theme(colors.secondary.fg/15%)]',\n          '[--btn-icon:theme(colors.muted.fg)] active:[--btn-icon:theme(colors.fg)] hover:[--btn-icon:theme(colors.fg)]'\n        ],\n        success: [\n          'text-white [--btn-bg:theme(colors.success.DEFAULT)] [--btn-border:theme(colors.success.DEFAULT)] [--btn-hover-overlay:theme(colors.white/10%)]',\n          '[--btn-icon:theme(colors.white/60%)] active:[--btn-icon:theme(colors.white/80%)] hover:[--btn-icon:theme(colors.white/80%)]'\n        ],\n        'light/dark': [\n          'text-background [--btn-bg:theme(colors.dark)] [--btn-border:theme(colors.dark/90%)] [--btn-hover-overlay:theme(colors.white/10%)]',\n          'dark:[--btn-bg:white] dark:[--btn-hover-overlay:theme(colors.dark/5%)]',\n          '[--btn-icon:theme(colors.muted.fg)] active:[--btn-icon:theme(colors.background/85%)] hover:[--btn-icon:theme(colors.background/85%)]'\n        ],\n        dark: [\n          'text-light [--btn-bg:theme(colors.dark)] [--btn-border:theme(colors.dark)] [--btn-hover-overlay:theme(colors.light/2.5%)]',\n          '[--btn-icon:theme(colors.light/60%)] active:[--btn-icon:theme(colors.light/80%)] hover:[--btn-icon:theme(colors.light/80%)]'\n        ],\n        light: [\n          'text-dark [--btn-bg:white] [--btn-border:theme(colors.dark/10%)] [--btn-hover-overlay:theme(colors.dark/2.5%)] active:[--btn-border:theme(colors.dark/15%)] hover:[--btn-border:theme(colors.dark/15%)]',\n          '[--btn-icon:theme(colors.dark/60%)] active:[--btn-icon:theme(colors.dark/80%)] hover:[--btn-icon:theme(colors.dark/80%)]'\n        ],\n        info: [\n          'text-info-fg [--btn-bg:theme(colors.info.DEFAULT)] [--btn-border:theme(colors.info.DEFAULT/80%)] [--btn-hover-overlay:theme(colors.white/25%)]',\n          '[--btn-icon:theme(colors.info.fg/60%)] active:[--btn-icon:theme(colors.info.fg/80%)] hover:[--btn-icon:theme(colors.info.fg/80%)]'\n        ],\n        warning: [\n          'text-warning-fg [--btn-bg:theme(colors.warning.DEFAULT)] [--btn-border:theme(colors.warning.DEFAULT)] [--btn-hover-overlay:theme(colors.white/10%)]',\n          '[--btn-icon:theme(colors.warning.fg/60%)] active:[--btn-icon:theme(colors.warning.fg/80%)] hover:[--btn-icon:theme(colors.warning.fg/80%)]'\n        ],\n        danger: [\n          'text-white [--btn-bg:theme(colors.danger.DEFAULT)] [--btn-border:theme(colors.danger.DEFAULT)] [--btn-hover-overlay:theme(colors.white/10%)]',\n          '[--btn-icon:theme(colors.white/60%)] active:[--btn-icon:theme(colors.white/80%)] hover:[--btn-icon:theme(colors.white/80%)]'\n        ]\n      },\n      appearance: {\n        solid:\n          'border-transparent bg-[--btn-border] dark:bg-[--btn-bg] before:absolute before:inset-0 before:-z-10 before:bg-[--btn-bg] before:shadow dark:before:hidden dark:border-white/5 after:absolute after:inset-0 after:-z-10 after:shadow-[shadow:inset_0_1px_theme(colors.white/15%)] after:active:bg-[--btn-hover-overlay] after:hover:bg-[--btn-hover-overlay] dark:after:-inset-px before:data-[disabled]:shadow-none after:data-[disabled]:shadow-none',\n        outline:\n          'border-border hover:bg-secondary/90 active:bg-secondary/90 text-fg [--btn-icon:theme(colors.zinc.400)] active:[--btn-icon:theme(colors.fg)] hover:[--btn-icon:theme(colors.fg)]',\n        plain:\n          'border-transparent text-fg pressed:bg-secondary/90 active:bg-secondary/90 hover:bg-secondary/90 [--btn-icon:theme(colors.muted.fg)] active:[--btn-icon:theme(colors.fg)] hover:[--btn-icon:theme(colors.fg)]'\n      },\n      size: {\n        'extra-small':\n          'h-8 px-[calc(theme(spacing.3)-1px)] py-[calc(theme(spacing.1)-1px)] text-xs/4 lg:text-[0.800rem]/4',\n        small:\n          'h-9 px-[calc(theme(spacing.4)-1px)] py-[calc(theme(spacing[1.5])-1px)] text-sm/5 lg:text-sm/5',\n        medium:\n          'h-10 px-[calc(theme(spacing.4)-1px)] py-[calc(theme(spacing.2)-1px)] text-base lg:text-sm/6',\n        large:\n          'h-10 sm:h-11 px-[calc(theme(spacing.4)-1px)] sm:px-[calc(theme(spacing.5)-1px)] py-[calc(theme(spacing[2.5])-1px)] text-base lg:text-base/7 sm:[&>[data-slot=icon]]:size-5',\n        'square-petite': 'size-9 shrink-0 [&_[data-slot=icon]]:text-current'\n      },\n      shape: {\n        square:\n          'rounded-lg before:rounded-[calc(theme(borderRadius.lg)-1px)] after:rounded-[calc(theme(borderRadius.lg)-1px)] dark:after:rounded-lg',\n        circle:\n          'rounded-[9999px] before:rounded-[9998px] after:rounded-[9998px] dark:after:rounded-[9999px]'\n      },\n      isDisabled: {\n        false: 'forced-colors:disabled:text-[GrayText]',\n        true: 'cursor-default opacity-60 forced-colors:disabled:text-[GrayText]'\n      }\n    },\n    defaultVariants: {\n      intent: 'primary',\n      appearance: 'solid',\n      size: 'medium',\n      shape: 'square'\n    },\n    compoundVariants: [\n      {\n        appearance: ['outline', 'plain'],\n        className: 'px-1',\n        size: 'extra-small'\n      },\n      {\n        appearance: ['outline', 'plain'],\n        className: 'px-[calc(theme(spacing.1)-1px)]',\n        size: 'small'\n      },\n      {\n        appearance: ['outline', 'plain'],\n        className: 'px-[calc(theme(spacing.2)-1px)]',\n        size: 'medium'\n      },\n      {\n        appearance: ['outline', 'plain'],\n        className: 'px-[calc(theme(spacing.3)-1px)]',\n        size: 'large'\n      }\n    ]\n  },\n  {\n    responsiveVariants: ['sm', 'md', 'lg', 'xl']\n  }\n)\n\ninterface ButtonProps extends ButtonPrimitiveProps {\n  intent?:\n    | 'primary'\n    | 'secondary'\n    | 'danger'\n    | 'warning'\n    | 'info'\n    | 'light/dark'\n    | 'success'\n    | 'light'\n    | 'dark'\n  size?: 'medium' | 'large' | 'square-petite' | 'extra-small' | 'small'\n  shape?: 'square' | 'circle'\n  appearance?: 'solid' | 'outline' | 'plain'\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, intent, appearance, size, shape, ...props }, ref) => {\n    return (\n      <ButtonPrimitive\n        ref={ref}\n        {...props}\n        className={cr(className, (className, renderProps) =>\n          buttonStyles({\n            ...renderProps,\n            intent,\n            appearance,\n            size,\n            shape,\n            className\n          })\n        )}\n      />\n    )\n  }\n)\n\nButton.displayName = 'Button'\n\nexport { Button, ButtonPrimitive, buttonStyles, type ButtonProps }\n",
-    "type": "ui"
-  },
-  "toggle": {
-    "component": "@/components/ui/toggle",
-    "raw": "'use client'\n\nimport type { ToggleButtonProps } from 'react-aria-components'\nimport { ToggleButton as ToggleButtonPrimitive } from 'react-aria-components'\nimport { tv } from 'tailwind-variants'\n\nimport { type ButtonProps } from './button'\nimport { cr, focusButtonStyles } from './primitive'\n\nconst toggleStyles = tv({\n  extend: focusButtonStyles,\n  base: [\n    'inline-flex items-center bg-transparent justify-center border border-transparent rounded-lg text-sm font-medium ring-offset-background transition-colors',\n    'hover:bg-muted hover:text-muted-fg'\n  ],\n  variants: {\n    isDisabled: {\n      true: 'opacity-50 cursor-default forced-colors:border-[GrayText]'\n    },\n    appearance: {\n      plain: 'selected:bg-secondary selected:text-secondary-fg',\n      solid:\n        'bg-white border-border hover:border-primary selected:border-primary hover:bg-primary hover:text-primary-fg text-zinc-900 selected:bg-primary selected:text-primary-fg',\n      outline:\n        'border-border selected:bg-secondary selected:backdrop-blur-sm selected:text-secondary-fg hover:bg-secondary hover:text-secondary-fg'\n    },\n    size: {\n      medium: 'h-10 px-3',\n      small: 'h-9 px-2.5',\n      large: 'h-11 px-5',\n      'square-petite': 'size-9 shrink-0'\n    },\n    shape: {\n      square: 'rounded-lg',\n      circle: 'rounded-full'\n    }\n  },\n  defaultVariants: {\n    size: 'small',\n    shape: 'square'\n  }\n})\n\ninterface ToggleProps extends ToggleButtonProps {\n  appearance?: ButtonProps['appearance']\n  size?: 'small' | 'medium' | 'large' | 'square-petite'\n  shape?: ButtonProps['shape']\n}\n\nconst Toggle = ({ className, ...props }: ToggleProps) => {\n  return (\n    <ToggleButtonPrimitive\n      {...props}\n      className={cr(className, (className, renderProps) =>\n        toggleStyles({\n          ...renderProps,\n          appearance: props.appearance,\n          size: props.size,\n          shape: props.shape,\n          className\n        })\n      )}\n    />\n  )\n}\n\nexport { Toggle, toggleStyles, type ToggleProps }\n",
-    "type": "ui"
-  },
-  "modal": {
-    "component": "@/components/ui/modal",
-    "raw": "'use client'\n\nimport * as React from 'react'\n\nimport type {\n  DialogTriggerProps,\n  ModalOverlayProps as ModalOverlayPrimitiveProps\n} from 'react-aria-components'\nimport {\n  Button as ButtonPrimitive,\n  type DialogProps,\n  DialogTrigger as DialogTriggerPrimitive,\n  Modal as ModalPrimitive,\n  ModalOverlay as ModalOverlayPrimitive\n} from 'react-aria-components'\nimport { tv, type VariantProps } from 'tailwind-variants'\n\nimport { Dialog } from './dialog'\nimport { cr } from './primitive'\n\nconst modalOverlayStyles = tv({\n  base: [\n    'fixed left-0 top-0 isolate z-50 h-[--visual-viewport-height] w-full',\n    'flex items-end text-center sm:items-center sm:justify-center',\n    '[--visual-viewport-vertical-padding:16px] sm:[--visual-viewport-vertical-padding:32px]'\n  ],\n  variants: {\n    isBlurred: {\n      true: 'backdrop-blur',\n      false: 'bg-black/15 dark:bg-black/40'\n    },\n    isEntering: {\n      true: 'ease-out animate-in fade-in'\n    },\n    isExiting: {\n      true: 'duration-200 ease-in animate-out fade-out'\n    }\n  }\n})\nconst modalContentStyles = tv({\n  base: [\n    'max-h-full w-full rounded-t-2xl ring-1 ring-dark/5 bg-overlay text-overlay-fg text-left align-middle shadow-lg',\n    'dark:ring-white/15 sm:rounded-xl overflow-hidden'\n  ],\n  variants: {\n    isEntering: {\n      true: [\n        'animate-in duration-200 fade-in-0 slide-in-from-bottom-[20%]',\n        'sm:slide-in-from-bottom-auto sm:slide-in-from-top-[20%]'\n      ]\n    },\n    isExiting: {\n      true: [\n        'duration-200 ease-in animate-out slide-out-to-bottom-56',\n        'sm:exiting:slide-out-to-top-[15%]'\n      ]\n    },\n    size: {\n      xs: 'sm:max-w-xs',\n      sm: 'sm:max-w-sm',\n      md: 'sm:max-w-md',\n      lg: 'sm:max-w-lg sm:has-[[role=alertdialog]]:max-w-lg sm:has-[[role=dialog]]:max-w-lg',\n      xl: 'sm:max-w-xl',\n      '2xl': 'sm:max-w-2xl',\n      '3xl': 'sm:max-w-3xl',\n      '4xl': 'sm:max-w-4xl',\n      '5xl': 'sm:max-w-5xl'\n    }\n  },\n  defaultVariants: {\n    size: 'lg'\n  }\n})\n\ninterface ModalProps extends DialogTriggerProps {}\nconst Modal = ({ children }: ModalProps) => {\n  return <DialogTriggerPrimitive>{children}</DialogTriggerPrimitive>\n}\n\ninterface ModalContentProps\n  extends Omit<React.ComponentProps<typeof Modal>, 'children'>,\n    Omit<ModalOverlayPrimitiveProps, 'className'>,\n    VariantProps<typeof modalContentStyles> {\n  'aria-label'?: DialogProps['aria-label']\n  'aria-labelledby'?: DialogProps['aria-labelledby']\n  role?: DialogProps['role']\n  closeButton?: boolean\n  isBlurred?: boolean\n  classNames?: {\n    overlay?: ModalOverlayPrimitiveProps['className']\n    content?: ModalOverlayPrimitiveProps['className']\n  }\n}\n\nconst ModalContent = ({\n  classNames,\n  isDismissable = true,\n  isBlurred = false,\n  children,\n  size,\n  role,\n  closeButton = true,\n  ...props\n}: ModalContentProps) => {\n  const _isDismissable = role === 'alertdialog' ? false : isDismissable\n  return (\n    <ModalOverlayPrimitive\n      isDismissable={_isDismissable}\n      className={cr(classNames?.overlay, (className, renderProps) => {\n        return modalOverlayStyles({\n          ...renderProps,\n          isBlurred,\n          className\n        })\n      })}\n      {...props}\n    >\n      <ModalPrimitive\n        className={cr(classNames?.content, (className, renderProps) =>\n          modalContentStyles({\n            ...renderProps,\n            size,\n            className\n          })\n        )}\n        {...props}\n      >\n        <Dialog role={role}>\n          {({ close }) => (\n            <>\n              {children}\n              {closeButton && (\n                <Dialog.CloseIndicator close={close} isDismissable={_isDismissable} />\n              )}\n            </>\n          )}\n        </Dialog>\n      </ModalPrimitive>\n    </ModalOverlayPrimitive>\n  )\n}\n\nModal.Trigger = ButtonPrimitive\nModal.Header = Dialog.Header\nModal.Title = Dialog.Title\nModal.Description = Dialog.Description\nModal.Footer = Dialog.Footer\nModal.Body = Dialog.Body\nModal.Close = Dialog.Close\nModal.Content = ModalContent\n\nexport { Modal, modalOverlayStyles, modalContentStyles }\n",
-    "type": "ui"
-  },
-  "command-menu": {
-    "component": "@/components/ui/command-menu",
-    "raw": "'use client'\n\nimport * as React from 'react'\n\nimport { Command as CommandPrimitive } from 'cmdk'\nimport { IconSearch, IconX } from 'justd-icons'\nimport type { ModalOverlayProps, SeparatorProps, TextProps } from 'react-aria-components'\nimport { Button, Dialog, Modal, ModalOverlay, Text } from 'react-aria-components'\nimport { twJoin } from 'tailwind-merge'\nimport { tv } from 'tailwind-variants'\n\nimport type { KeyboardProps } from './keyboard'\nimport { Keyboard } from './keyboard'\nimport { useMediaQuery } from './primitive'\nimport { Separator } from './separator'\n\nconst commandStyles = tv({\n  slots: {\n    command: [\n      'flex h-svh w-full flex-col overflow-hidden rounded-md bg-overlay text-overlay-fg sm:h-full',\n      '[&_[cmdk-group-heading]]:ml-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:-mb-1.5 [&_[cmdk-group-heading]]:text-muted-fg [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_[data-slot=icon]]:size-5 [&_[cmdk-input]]:h-12',\n      // for specific properties, it has to be controlled by the command\n      '[&_[cmdk-item]]:py-2.5 [&_[cmdk-item]]:pl-2.5 [&_[cmdk-item]]:pr-4'\n    ],\n    list: 'overflow-y-auto lg:pb-0 max-h-[calc(100vh-35%)] pb-16 [&:not(:has(.xda32kfseccmd))]:p-2 [&:not(:has(.xda32kfseccmd))_.s3xsprt]:my-2 overflow-x-hidden md:max-h-[456px]',\n    input: [\n      'flex w-full rounded-md bg-transparent text-base placeholder:text-muted-fg',\n      'focus:outline-none',\n      'disabled:opacity-50 disabled:cursor-not-allowed'\n    ],\n    section: [\n      'xda32kfseccmd overflow-hidden py-2 px-2 text-fg',\n      '[&_[cmdk-group-heading]]:select-none [&_[cmdk-group-heading]]:ml-[1px] [&_[cmdk-group-heading]]:py-2 [&_[cmdk-group-heading]]:text-[0.8rem] [&_[cmdk-group-heading]]:text-muted-fg'\n    ],\n    modalOverlay: [\n      'fixed inset-0 max-h-[--visual-viewport-height] z-50 bg-black/15 dark:bg-black/40 entering:animate-in entering:fade-in-0 exiting:animate-in exiting:fade-out-0'\n    ],\n    modal: [\n      'fixed bottom-0 left-[50%] top-auto z-50 grid h-[calc(100vh-35%)] w-full max-w-full translate-x-[-50%] gap-4 overflow-hidden rounded-t-xl bg-background shadow-lg ring-1 ring-dark/5 dark:ring-border sm:bottom-auto sm:top-[6rem] sm:h-auto sm:w-full sm:max-w-2xl sm:rounded-xl',\n      'sm:entering:slide-in-from-bottom-auto entering:duration-300 entering:animate-in entering:fade-in-0 entering:slide-in-from-bottom-1/2 entering:slide-in-from-left-1/2 entering:[transition-timing-function:ease-out] sm:entering:duration-300 sm:entering:slide-in-from-top-[2rem]',\n      'exiting:duration-300 exiting:animate-out exiting:fade-out-0 exiting:slide-out-to-bottom-1/2 exiting:slide-out-to-left-1/2 exiting:[transition-timing-function:ease] sm:exiting:slide-out-to-top-[4rem]'\n    ],\n    closeButton: [\n      'absolute right-3 top-1.5 [&>span>[data-slot=icon]]:text-muted-fg pressed:[&_[data-slot=icon]]:text-fg lg:top-3.5 rounded-full border lg:border-border border-transparent lg:bg-secondary/50 py-2.5 px-2.5 lg:py-0.5 text-xs transition-opacity data-[state=open]:bg-secondary data-[state=open]:text-muted-fg lg:focus:border-fg/70 focus:outline-none lg:focus:ring-2 lg:focus:ring-ring disabled:pointer-events-none',\n      'focus:outline-none lg:focus:bg-primary/10 lg:focus:ring-2 lg:focus:ring-primary/20 lg:focus:border-primary/70',\n      'disabled:pointer-events-none'\n    ],\n    empty: 'py-6 text-center text-sm text-muted-fg x3tmpy',\n    kbdKeyboard: 'lg:block hidden group-data-[selected=true]:opacity-60',\n    description: 'sm:inline hidden text-sm ml-auto',\n    item: [\n      'group relative flex cursor-default select-none items-center rounded-lg py-2 text-sm outline-none',\n      // selected\n      'data-[selected=true]:bg-primary data-[selected=true]:text-primary-fg [&[data-selected=true]_[data-slot=icon]]:text-primary-fg',\n      // danger\n      'data-[danger=true]:text-danger data-[danger=true]:data-[selected=true]:bg-danger data-[danger=true]:data-[selected=true]:text-danger-fg',\n      // disabled\n      'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',\n      // icon\n      '[&_[data-slot=icon]]:mr-2 [&_[data-slot=icon]]:size-[1.10rem] [&_[data-slot=icon]]:shrink-0 [&_[data-slot=icon]]:text-muted-fg',\n      '[&_[data-slot=avatar]]:mr-2 [&_[data-slot=avatar]]:size-[1.10rem] [&_[data-slot=avatar]]:shrink-0'\n    ]\n  },\n\n  variants: {\n    isDanger: {\n      true: 'text-danger data-[selected=true]:bg-danger data-[selected=true]:text-danger-fg [&[data-selected=true]_[data-slot=icon]]:text-danger-fg'\n    }\n  }\n})\n\nconst {\n  command,\n  empty,\n  section,\n  list,\n  item,\n  closeButton,\n  modal,\n  input,\n  modalOverlay,\n  kbdKeyboard,\n  description\n} = commandStyles()\n\ninterface CommandMenuContextProps {\n  hideSearchIndicator?: boolean\n  hideCloseButton?: boolean\n  messageOnEmpty?: boolean | string\n}\n\nconst CommandMenuContext = React.createContext<CommandMenuContextProps>({})\n\ninterface CommandMenuRootProps {\n  CommandMenuEmpty?: typeof CommandMenuEmpty\n  CommandMenuInput?: typeof CommandMenuInput\n  CommandMenuItem?: typeof CommandMenuItem\n  CommandMenuKeyboard?: typeof CommandMenuKeyboard\n  CommandMenuList?: typeof CommandMenuList\n  CommandMenuSection?: typeof CommandMenuSection\n  CommandMenuSeparator?: typeof CommandMenuSeparator\n  CommandMenuDescription?: typeof CommandMenuDescription\n}\ninterface CommandMenuProps\n  extends ModalOverlayProps,\n    CommandMenuRootProps,\n    CommandMenuContextProps {\n  children: React.ReactNode\n  value?: string\n  messageOnEmpty?: boolean | string\n  onValueChange?: (value: string) => void\n}\n\nconst CommandMenu = ({\n  hideSearchIndicator = false,\n  hideCloseButton = false,\n  messageOnEmpty,\n  value,\n  onValueChange,\n  children,\n  ...props\n}: CommandMenuProps) => {\n  const isDesktop = useMediaQuery('(min-width: 1024px)')\n  return (\n    <CommandMenuContext.Provider value={{ hideSearchIndicator, hideCloseButton, messageOnEmpty }}>\n      <ModalOverlay isDismissable className={modalOverlay()} {...props}>\n        <Modal className={modal()}>\n          <Dialog className=\"outline-none\" aria-label=\"Command Palette\">\n            {({ close }) => (\n              <>\n                <CommandPrimitive value={value} onValueChange={onValueChange} className={command()}>\n                  {children}\n                </CommandPrimitive>\n                {!hideCloseButton && (\n                  <Button autoFocus={!isDesktop} onPress={close} className={closeButton()}>\n                    <span className=\"lg:block hidden\">Esc</span>\n                    <span className=\"lg:hidden -mr-2 block\">\n                      <IconX />\n                      <span className=\"sr-only\">Close command palette</span>\n                    </span>\n                  </Button>\n                )}\n              </>\n            )}\n          </Dialog>\n        </Modal>\n      </ModalOverlay>\n    </CommandMenuContext.Provider>\n  )\n}\n\ninterface CommandMenuInputProps\n  extends React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> {}\n\nconst CommandMenuInput = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Input>,\n  CommandMenuInputProps\n>(({ className, ...props }, ref) => {\n  const { hideSearchIndicator } = React.useContext(CommandMenuContext)\n  return (\n    <div className=\"flex border-b items-center px-3\">\n      {!hideSearchIndicator && <IconSearch className=\"mr-2 size-5 shrink-0 opacity-50\" />}\n      <CommandPrimitive.Input\n        autoFocus\n        ref={ref}\n        className={input({ className: hideSearchIndicator ? 'pl-1' : className })}\n        {...props}\n      />\n    </div>\n  )\n})\n\nCommandMenuInput.displayName = CommandPrimitive.Input.displayName\n\ninterface CommandMenuListProps extends React.ComponentProps<typeof CommandPrimitive.List> {}\n\nconst CommandMenuList = ({ className, ...props }: CommandMenuListProps) => {\n  const { messageOnEmpty } = React.useContext(CommandMenuContext)\n  return (\n    <CommandPrimitive.List className={list({ className })} {...props}>\n      {messageOnEmpty !== false && (\n        <CommandMenuEmpty>\n          {typeof messageOnEmpty === 'string' ? messageOnEmpty : 'No results found.'}\n        </CommandMenuEmpty>\n      )}\n      {props.children}\n    </CommandPrimitive.List>\n  )\n}\n\ninterface CommandMenuEmptyProps extends React.ComponentProps<typeof CommandPrimitive.Empty> {}\n\nconst CommandMenuEmpty = ({ className, ...props }: CommandMenuEmptyProps) => {\n  return <CommandPrimitive.Empty className={empty({ className })} {...props} />\n}\n\ninterface CommandSectionProps extends React.ComponentProps<typeof CommandPrimitive.Group> {\n  separator?: boolean\n}\n\nconst CommandMenuSection = ({ className, separator, ...props }: CommandSectionProps) => {\n  return (\n    <>\n      <CommandPrimitive.Group className={section({ className })} {...props}>\n        {props.children}\n        {separator && <CommandMenuSeparator className=\"mt-2\" />}\n      </CommandPrimitive.Group>\n    </>\n  )\n}\n\nconst CommandMenuSeparator = ({ className, ...props }: SeparatorProps) => {\n  return (\n    <div className=\"-mx-4 s3xsprt\">\n      <Separator className={className} {...props} orientation=\"horizontal\" />\n    </div>\n  )\n}\n\ninterface CommandItemProps extends React.ComponentProps<typeof CommandPrimitive.Item> {\n  isDanger?: boolean\n}\n\nconst CommandMenuItem = ({ isDanger, className, ...props }: CommandItemProps) => {\n  return (\n    <CommandPrimitive.Item\n      data-danger={isDanger ? 'true' : undefined}\n      className={item({ isDanger, className })}\n      {...props}\n    />\n  )\n}\n\ninterface CommandMenuDescriptionProps extends TextProps {\n  intent?: 'danger' | 'warning' | 'success' | 'primary' | 'secondary'\n}\n\nconst CommandMenuDescription = ({ intent, className, ...props }: CommandMenuDescriptionProps) => {\n  return (\n    <Text\n      {...props}\n      slot=\"description\"\n      className={description({\n        className: twJoin(\n          intent === 'danger'\n            ? 'group-data-[selected=true]:text-primary-fg/70 text-danger/90'\n            : intent === 'warning'\n              ? 'group-data-[selected=true]:text-primary-fg/70 text-warning/90'\n              : intent === 'success'\n                ? 'group-data-[selected=true]:text-primary-fg/70 text-success/90'\n                : intent === 'primary'\n                  ? 'group-data-[selected=true]:text-white/70 text-primary/90'\n                  : 'group-data-[selected=true]:text-primary-fg/70 text-muted-fg',\n          className\n        )\n      })}\n    />\n  )\n}\n\nconst CommandMenuKeyboard = (props: KeyboardProps) => (\n  <Keyboard classNames={{ kbd: kbdKeyboard(), base: '-mr-2.5' }} {...props} />\n)\n\nCommandMenu.Empty = CommandMenuEmpty\nCommandMenu.Input = CommandMenuInput\nCommandMenu.Item = CommandMenuItem\nCommandMenu.Keyboard = CommandMenuKeyboard\nCommandMenu.List = CommandMenuList\nCommandMenu.Section = CommandMenuSection\nCommandMenu.Separator = CommandMenuSeparator\nCommandMenu.Description = CommandMenuDescription\n\nexport { CommandMenu }\n",
-    "type": "ui"
-  },
-  "toast": {
-    "component": "@/components/ui/toast",
-    "raw": "'use client'\n\nimport React from 'react'\n\nimport { useTheme } from '@/components/theme-provider'\nimport { IconCheck, IconCircleInfoFill, IconTriangleInfoFill } from 'justd-icons'\nimport { Toaster as ToasterPrimitive, type ToasterProps } from 'sonner'\nimport { twJoin } from 'tailwind-merge'\n\nimport { buttonStyles } from './button'\nimport { Loader } from './loader'\n\nconst Toast = ({ ...props }: ToasterProps) => {\n  const { theme = 'system' } = useTheme()\n  return (\n    <ToasterPrimitive\n      theme={theme as ToasterProps['theme']}\n      className=\"toaster group\"\n      icons={{\n        info: <IconCircleInfoFill />,\n        success: <IconCheck />,\n        warning: <IconTriangleInfoFill />,\n        error: <IconTriangleInfoFill />,\n        loading: <Loader variant=\"spin\" />\n      }}\n      toastOptions={{\n        unstyled: true,\n        closeButton: true,\n        classNames: {\n          toast: twJoin(\n            'bg-background ring-1 ring-border dark:ring-inset sm:min-w-[22rem] rounded-xl text-fg overflow-hidden text-[0.925rem] backdrop-blur-xl px-4 py-3 font-normal sm:px-5 sm:py-5',\n            '[&:has([data-icon])_[data-content]]:ml-5',\n            '[&:has([data-button])_[data-close-button=\"true\"]]:hidden',\n            '[&:not([data-description])_[data-title]]:font-normal',\n            '[&:has([data-description])_[data-title]]:!font-medium [&:has([data-description])_[data-title]]:!text-lg',\n            '[&>[data-button]]:absolute [&>[data-button=true]]:bottom-4',\n            '[&>[data-action=true]]:right-4',\n            '[&>[data-cancel=true]]:left-4'\n          ),\n          icon: 'absolute top-[1.50rem]',\n          content: '[&:not(:has(+button))]:pr-10 [&:has(+button)]:pb-11 md:[&:has(+button)]:pb-9',\n          error:\n            'bg-danger text-white ring-white/10 text-danger-fg dark:ring-inset [&>[data-close-button=true]>svg]:text-white [&>[data-close-button=true]:hover]:bg-white/20',\n          info: 'bg-lime-600 ring-white/10 text-lime-50 dark:ring-inset [&>[data-close-button=true]>svg]:text-white [&>[data-close-button=true]:hover]:bg-white/20',\n          warning:\n            'bg-warning text-warning-fg ring-white/10 dark:ring-inset [&>[data-close-button=true]>svg]:text-amber-950 [&>[data-close-button=true]:hover]:bg-white/20',\n          success:\n            'bg-primary text-white ring-white/10 text-primary-fg dark:ring-inset [&>[data-close-button=true]>svg]:text-white [&>[data-close-button=true]:hover]:bg-white/20',\n          cancelButton: buttonStyles({\n            className: '',\n            size: 'extra-small',\n            appearance: 'outline'\n          }),\n          actionButton: buttonStyles({\n            className: 'self-end justify-self-end',\n            size: 'extra-small'\n          }),\n          closeButton:\n            '[&_svg]:size-5 size-8 absolute top-1/2 transform -translate-y-1/2 right-2 lg:right-3 left-auto grid place-content-center rounded-md hover:bg-black/20 dark:hover:bg-white/20 border-0 [&_svg]:text-fg'\n        }\n      }}\n      {...props}\n    />\n  )\n}\n\nexport { Toast }\n",
-    "type": "ui"
-  },
-  "checkbox": {
-    "component": "@/components/ui/checkbox",
-    "raw": "'use client'\n\nimport * as React from 'react'\nimport { type ReactNode } from 'react'\n\nimport { IconCheck, IconMinus } from 'justd-icons'\nimport {\n  Checkbox as CheckboxPrimitive,\n  CheckboxGroup as CheckboxGroupPrimitive,\n  type CheckboxGroupProps as CheckboxGroupPrimitiveProps,\n  type CheckboxProps as CheckboxPrimitiveProps,\n  type ValidationResult\n} from 'react-aria-components'\nimport { tv } from 'tailwind-variants'\n\nimport { Description, FieldError, Label } from './field'\nimport { cr, ctr } from './primitive'\n\ninterface CheckboxGroupProps extends Omit<CheckboxGroupPrimitiveProps, 'children'> {\n  label?: string\n  children?: ReactNode\n  description?: string\n  errorMessage?: string | ((validation: ValidationResult) => string)\n}\n\nconst CheckboxGroup = (props: CheckboxGroupProps) => {\n  return (\n    <CheckboxGroupPrimitive {...props} className={ctr(props.className, 'flex flex-col gap-2')}>\n      <Label>{props.label}</Label>\n      <>{props.children}</>\n      {props.description && <Description className=\"block\">{props.description}</Description>}\n      <FieldError>{props.errorMessage}</FieldError>\n    </CheckboxGroupPrimitive>\n  )\n}\n\nconst checkboxStyles = tv({\n  base: 'racc group flex items-center gap-2 text-sm transition',\n  variants: {\n    isDisabled: {\n      false: 'opacity-100',\n      true: 'opacity-50'\n    }\n  }\n})\n\nconst boxStyles = tv({\n  base: 'flex size-4 [&>[data-slot=icon]]:size-3 flex-shrink-0 items-center justify-center rounded border text-background transition',\n  variants: {\n    isSelected: {\n      false: 'border-toggle bg-secondary',\n      true: [\n        'border-primary/70 bg-primary text-primary-fg',\n        'group-invalid:border-danger/70 group-invalid:bg-danger group-invalid:text-danger-fg'\n      ]\n    },\n    isFocused: {\n      true: [\n        'border-primary/70 ring-4 ring-primary/20',\n        'group-invalid:border-danger/70 group-invalid:text-danger-fg group-invalid:ring-danger/20'\n      ]\n    },\n    isInvalid: {\n      true: 'border-danger/70 bg-danger/20 text-danger-fg ring-danger/20'\n    }\n  }\n})\n\ninterface CheckboxProps extends CheckboxPrimitiveProps {\n  description?: string\n  label?: string\n}\n\nconst Checkbox = (props: CheckboxProps) => {\n  return (\n    <CheckboxPrimitive\n      {...props}\n      className={cr(props.className, (className, renderProps) =>\n        checkboxStyles({ ...renderProps, className })\n      )}\n    >\n      {({ isSelected, isIndeterminate, ...renderProps }) => (\n        <div className=\"flex gap-2\">\n          <div\n            className={boxStyles({\n              isSelected: isSelected || isIndeterminate,\n              className: props.description ? 'mt-1' : 'mt-0.5',\n              ...renderProps\n            })}\n          >\n            {isIndeterminate ? <IconMinus /> : isSelected ? <IconCheck /> : null}\n          </div>\n\n          <div className=\"flex flex-col gap-1\">\n            <>\n              {props.label ? <Label>{props.label}</Label> : props.children}\n              {props.description && <Description>{props.description}</Description>}\n            </>\n          </div>\n        </div>\n      )}\n    </CheckboxPrimitive>\n  )\n}\n\nexport { Checkbox, CheckboxGroup }\n",
-    "type": "ui"
-  },
-  "select": {
-    "component": "@/components/ui/select",
-    "raw": "'use client'\n\nimport * as React from 'react'\n\nimport type { Placement } from '@react-types/overlays'\nimport { IconChevronLgDown } from 'justd-icons'\nimport type { ButtonProps } from 'react-aria-components'\nimport {\n  Button,\n  Select as SelectPrimitive,\n  type SelectProps as SelectPrimitiveProps,\n  SelectValue,\n  type ValidationResult\n} from 'react-aria-components'\nimport { tv } from 'tailwind-variants'\n\nimport { DropdownItem, DropdownItemDetails, DropdownSection } from './dropdown'\nimport { Description, FieldError, Label } from './field'\nimport { ListBox } from './list-box'\nimport { Popover } from './popover'\nimport { cr, ctr, focusStyles } from './primitive'\n\nconst selectTriggerStyles = tv({\n  extend: focusStyles,\n  base: [\n    'btr group-disabled:bg-secondary [&_[data-slot=icon]]:size-4 group-disabled:opacity-50 focus-visible:border-primary focus-visible:ring-4 focus-visible:ring-primary/20 group-open:border-primary group-open:ring-4 group-open:ring-primary/20 flex h-10 w-full cursor-default items-center gap-4 rounded-lg border border-input bg-background py-2 pl-3 pr-2 text-start shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1)] transition dark:shadow-none'\n  ],\n  variants: {\n    isDisabled: {\n      false:\n        'text-fg group-invalid:border-danger group-invalid:ring-danger/20 forced-colors:group-invalid:border-[Mark]',\n      true: 'bg-secondary text-muted-fg forced-colors:border-[GrayText] forced-colors:text-[GrayText]'\n    }\n  }\n})\n\ninterface SelectProps<T extends object> extends SelectPrimitiveProps<T> {\n  label?: string\n  description?: string\n  errorMessage?: string | ((validation: ValidationResult) => string)\n  items?: Iterable<T>\n  className?: string\n}\n\nconst Select = <T extends object>({\n  label,\n  description,\n  errorMessage,\n  children,\n  className,\n  ...props\n}: SelectProps<T>) => {\n  return (\n    <SelectPrimitive {...props} className={ctr(className, 'group flex w-full flex-col gap-1')}>\n      {label && <Label>{label}</Label>}\n      <>{children}</>\n      {description && <Description>{description}</Description>}\n      <FieldError>{errorMessage}</FieldError>\n    </SelectPrimitive>\n  )\n}\n\ninterface ListProps<T extends object> {\n  items?: Iterable<T>\n  placement?: Placement\n  children: React.ReactNode | ((item: T) => React.ReactNode)\n  className?: string\n}\n\nconst List = <T extends object>({ className, children, items, placement }: ListProps<T>) => {\n  return (\n    <Popover.Picker className={className} trigger=\"Select\" placement={placement}>\n      <ListBox.Picker aria-label=\"items\" items={items}>\n        {children}\n      </ListBox.Picker>\n    </Popover.Picker>\n  )\n}\n\ninterface TriggerProps extends ButtonProps {\n  prefix?: React.ReactNode\n  className?: string\n}\n\nconst Trigger = ({ className, ...props }: TriggerProps) => {\n  return (\n    <Button\n      className={cr(className, (className, renderProps) =>\n        selectTriggerStyles({\n          ...renderProps,\n          className\n        })\n      )}\n    >\n      {props.prefix && <span className=\"-mr-1\">{props.prefix}</span>}\n      <SelectValue className=\"flex-1 [&_[slot=description]]:hidden text-base placeholder-shown:text-muted-fg lg:text-sm\" />\n      <IconChevronLgDown\n        aria-hidden\n        className=\"text-muted-fg duration-300 group-open:rotate-180 group-open:text-fg group-disabled:opacity-50 forced-colors:text-[ButtonText] forced-colors:group-disabled:text-[GrayText]\"\n      />\n    </Button>\n  )\n}\n\nSelect.OptionDetails = DropdownItemDetails\nSelect.Option = DropdownItem\nSelect.Section = DropdownSection\nSelect.Trigger = Trigger\nSelect.List = List\n\nexport { Select }\n",
-    "type": "ui"
-  },
-  "textarea": {
-    "component": "@/components/ui/textarea",
-    "raw": "'use client'\n\nimport * as React from 'react'\n\nimport {\n  TextArea as TextAreaPrimitive,\n  TextField as TextFieldPrimitive,\n  type TextFieldProps as TextFieldPrimitiveProps,\n  type ValidationResult\n} from 'react-aria-components'\nimport { tv } from 'tailwind-variants'\n\nimport { Description, FieldError, Label } from './field'\nimport { cr, ctr, focusStyles } from './primitive'\n\nconst textareaStyles = tv({\n  extend: focusStyles,\n  base: 'w-full min-w-0 rounded-md border border-input bg-background px-2.5 py-2 text-base shadow-sm outline-none transition duration-200 disabled:bg-secondary disabled:opacity-50 sm:text-sm'\n})\n\ninterface TextareaProps extends TextFieldPrimitiveProps {\n  autoSize?: boolean\n  label?: string\n  placeholder?: string\n  description?: string\n  errorMessage?: string | ((validation: ValidationResult) => string)\n  className?: string\n}\n\nconst Textarea = ({\n  className,\n  placeholder,\n  label,\n  description,\n  errorMessage,\n  ...props\n}: TextareaProps) => {\n  return (\n    <TextFieldPrimitive {...props} className={ctr(className, 'group flex flex-col gap-1')}>\n      {label && <Label>{label}</Label>}\n      <TextAreaPrimitive\n        placeholder={placeholder}\n        className={cr(className, (className, renderProps) =>\n          textareaStyles({\n            ...renderProps,\n            className\n          })\n        )}\n      />\n      {description && <Description>{description}</Description>}\n      <FieldError>{errorMessage}</FieldError>\n    </TextFieldPrimitive>\n  )\n}\n\nexport { Textarea, type TextareaProps }\n",
-    "type": "ui"
-  },
-  "loading-dots": {
-    "component": "@/components/ui/loading-dots",
-    "raw": "'use client'\n\nimport * as React from 'react'\n\nimport { cn } from './primitive'\n\nconst dots = 'mx-[1px] inline-block size-[0.3125rem] animate-blink rounded-md'\n\nexport const LoadingDots = ({ className }: { className: string }) => {\n  return (\n    <span className=\"mx-2 inline-flex items-center\">\n      <span className={cn(dots, className)} />\n      <span className={cn(dots, 'animation-delay-[200ms]', className)} />\n      <span className={cn(dots, 'animation-delay-[400ms]', className)} />\n    </span>\n  )\n}\n",
-    "type": "ui"
-  },
-  "skeleton": {
-    "component": "@/components/ui/skeleton",
-    "raw": "import React from 'react'\n\nimport { tv } from 'tailwind-variants'\n\nconst skeletonStyles = tv({\n  base: 'animate-pulse shrink-0',\n  variants: {\n    intent: {\n      muted: 'bg-fg/20',\n      lighter: 'bg-fg/15'\n    },\n    shape: {\n      circle: 'rounded-full',\n      square: 'rounded-lg'\n    }\n  },\n  defaultVariants: {\n    intent: 'muted',\n    shape: 'square'\n  }\n})\n\ninterface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {\n  intent?: 'muted' | 'lighter'\n  shape?: 'circle' | 'square'\n}\nconst Skeleton = ({ shape, intent, className, ...props }: SkeletonProps) => {\n  return <div className={skeletonStyles({ shape, intent, className })} {...props} />\n}\n\nexport { Skeleton }\n",
-    "type": "ui"
-  },
-  "context-menu": {
-    "component": "@/components/ui/context-menu",
-    "raw": "'use client'\n\nimport React, { useRef, useState } from 'react'\n\nimport { tv } from 'tailwind-variants'\n\nimport type { MenuContentProps } from './menu'\nimport { Menu } from './menu'\nimport { focusButtonStyles } from './primitive'\n\ninterface ContextMenuTriggerContextType {\n  buttonRef: React.RefObject<HTMLButtonElement>\n  contextMenuOffset: { offset: number; crossOffset: number } | null\n  setContextMenuOffset: React.Dispatch<\n    React.SetStateAction<{ offset: number; crossOffset: number } | null>\n  >\n}\n\nconst ContextMenuTriggerContext = React.createContext<ContextMenuTriggerContextType | undefined>(\n  undefined\n)\n\nconst useContextMenuTrigger = () => {\n  const context = React.useContext(ContextMenuTriggerContext)\n  if (!context) {\n    throw new Error('useContextMenuTrigger must be used within a ContextMenuTrigger')\n  }\n  return context\n}\n\ninterface ContextMenuRootComponent {\n  children: React.ReactNode\n}\n\nconst ContextMenu = ({ children }: ContextMenuRootComponent) => {\n  const [contextMenuOffset, setContextMenuOffset] = useState<{\n    offset: number\n    crossOffset: number\n  } | null>(null)\n  const buttonRef = useRef<HTMLButtonElement>(null)\n\n  return (\n    <ContextMenuTriggerContext.Provider\n      value={{ buttonRef, contextMenuOffset, setContextMenuOffset }}\n    >\n      {children}\n    </ContextMenuTriggerContext.Provider>\n  )\n}\n\nconst contextMenuTriggerStyles = tv({\n  extend: focusButtonStyles,\n  base: 'focus:outline-none cursor-default',\n  variants: {\n    isDisabled: {\n      false: 'forced-colors:disabled:text-[GrayText]',\n      true: 'cursor-default opacity-60 forced-colors:disabled:text-[GrayText]'\n    }\n  }\n})\n\ninterface ContextMenuTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}\n\nconst ContextMenuTrigger = ({ className, ...props }: ContextMenuTriggerProps) => {\n  const { buttonRef, setContextMenuOffset } = useContextMenuTrigger()\n\n  const onContextMenu = (e: React.MouseEvent<HTMLButtonElement>) => {\n    e.preventDefault()\n    const rect = e.currentTarget.getBoundingClientRect()\n    setContextMenuOffset({\n      offset: e.clientY - rect.bottom,\n      crossOffset: e.clientX - rect.left\n    })\n  }\n  return (\n    <button\n      className={contextMenuTriggerStyles({ isDisabled: props.disabled, className })}\n      ref={buttonRef}\n      aria-haspopup=\"menu\"\n      onContextMenu={onContextMenu}\n      {...props}\n    />\n  )\n}\n\ninterface ContextMenuContentProps<T>\n  extends Omit<\n    MenuContentProps<T>,\n    'showArrow' | 'isOpen' | 'onOpenChange' | 'triggerRef' | 'placement' | 'shouldFlip'\n  > {}\n\nconst ContextMenuContent = <T extends object>(props: ContextMenuContentProps<T>) => {\n  const { contextMenuOffset, setContextMenuOffset, buttonRef } = useContextMenuTrigger()\n  return contextMenuOffset ? (\n    <Menu.Content\n      isOpen={!!contextMenuOffset}\n      onOpenChange={() => setContextMenuOffset(null)}\n      triggerRef={buttonRef}\n      shouldFlip={false}\n      placement=\"bottom left\"\n      offset={contextMenuOffset?.offset}\n      crossOffset={contextMenuOffset?.crossOffset}\n      onClose={() => setContextMenuOffset(null)}\n      {...props}\n    />\n  ) : null\n}\n\nContextMenu.Trigger = ContextMenuTrigger\nContextMenu.Content = ContextMenuContent\nContextMenu.Item = Menu.Item\nContextMenu.Separator = Menu.Separator\nContextMenu.ItemDetails = Menu.ItemDetails\nContextMenu.Section = Menu.Section\nContextMenu.Header = Menu.Header\nContextMenu.Keyboard = Menu.Keyboard\n\nexport { ContextMenu }\n",
-    "type": "ui"
-  },
-  "color-field": {
-    "component": "@/components/ui/color-field",
-    "raw": "'use client'\n\nimport * as React from 'react'\n\nimport type {\n  ColorFieldProps as ColorFieldPrimitiveProps,\n  ValidationResult\n} from 'react-aria-components'\nimport { ColorField as ColorFieldPrimitive } from 'react-aria-components'\n\nimport { ColorSwatch } from './color'\nimport { ColorPicker } from './color-picker'\nimport { Description, FieldError, FieldGroup, fieldGroupPrefixStyles, Input, Label } from './field'\nimport { ctr } from './primitive'\n\ninterface ColorFieldProps extends ColorFieldPrimitiveProps {\n  label?: string\n  description?: string\n  errorMessage?: string | ((validation: ValidationResult) => string)\n  placeholder?: string\n  prefix?: React.ReactNode\n  suffix?: React.ReactNode\n  isLoading?: boolean\n  enableColorPicker?: boolean\n}\n\nconst ColorField = ({\n  label,\n  description,\n  errorMessage,\n  placeholder,\n  prefix,\n  suffix,\n  isLoading,\n  enableColorPicker = true,\n  className,\n  ...props\n}: ColorFieldProps) => {\n  const value = props.value ?? props.defaultValue\n  return (\n    <ColorFieldPrimitive\n      {...props}\n      aria-label={props['aria-label'] ?? 'Color field'}\n      className={ctr(className, 'group w-full flex flex-col gap-1')}\n    >\n      {label && <Label>{label}</Label>}\n      <FieldGroup\n        data-loading={isLoading ? 'true' : undefined}\n        className={fieldGroupPrefixStyles()}\n      >\n        {prefix ? <span className=\"atrs isPfx\">{prefix}</span> : null}\n        <div className=\"flex items-center\">\n          {value && (\n            <span>\n              {enableColorPicker ? (\n                <ColorPicker\n                  enableColorField={false}\n                  onChange={props.onChange}\n                  defaultValue={value}\n                  className=\"size-9 [&_.tcf]:size-9\"\n                  trigger=\"color-field\"\n                />\n              ) : (\n                <ColorSwatch className=\"size-6 ml-2\" color={value.toString()} />\n              )}\n            </span>\n          )}\n\n          <Input className=\"px-2.5\" placeholder={placeholder} />\n        </div>\n        {suffix ? <span className=\"atrs ml-auto isSfx\">{suffix}</span> : null}\n      </FieldGroup>\n      {description && <Description>{description}</Description>}\n      <FieldError>{errorMessage}</FieldError>\n    </ColorFieldPrimitive>\n  )\n}\n\nexport { ColorField }\n",
-    "type": "ui"
-  },
-  "form": {
-    "component": "@/components/ui/form",
-    "raw": "'use client'\n\nimport type { FormProps as FormPrimitiveProps } from 'react-aria-components'\nimport { Form as FormPrimitive } from 'react-aria-components'\n\ninterface FormProps extends FormPrimitiveProps {}\n\nconst Form = (props: FormProps) => {\n  return <FormPrimitive {...props} />\n}\n\nexport { Form, type FormProps }\n",
-    "type": "ui"
-  },
-  "carousel": {
-    "component": "@/components/ui/carousel",
-    "raw": "'use client'\n\nimport * as React from 'react'\n\nimport useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-react'\nimport { IconChevronLgLeft, IconChevronLgRight } from 'justd-icons'\nimport type { ListBoxItemProps, SectionProps } from 'react-aria-components'\nimport { ListBox, ListBoxItem, Section } from 'react-aria-components'\n\nimport type { ButtonProps } from './button'\nimport { Button } from './button'\nimport { cn } from './primitive'\n\ntype CarouselApi = UseEmblaCarouselType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\ntype CarouselContextProps = {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0]\n  api: ReturnType<typeof useEmblaCarousel>[1]\n  scrollPrev: () => void\n  scrollNext: () => void\n  canScrollPrev: boolean\n  canScrollNext: boolean\n} & CarouselProps\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null)\n\nconst useCarousel = () => {\n  const context = React.useContext(CarouselContext)\n\n  if (!context) {\n    throw new Error('useCarousel must be used within a <Carousel />')\n  }\n\n  return context\n}\n\ninterface CarouselRootProps {\n  CarouselContent?: typeof CarouselContent\n  CarouselHandler?: typeof CarouselHandler\n  CarouselItem?: typeof CarouselItem\n  CarouselButton?: typeof CarouselButton\n}\n\ninterface CarouselProps extends React.HTMLAttributes<HTMLDivElement>, CarouselRootProps {\n  opts?: CarouselOptions\n  plugins?: CarouselPlugin\n  orientation?: 'horizontal' | 'vertical'\n  setApi?: (api: CarouselApi) => void\n}\n\nconst Carousel = ({\n  orientation = 'horizontal',\n  opts,\n  setApi,\n  plugins,\n  className,\n  children,\n  ...props\n}: CarouselProps) => {\n  const [carouselRef, api] = useEmblaCarousel(\n    {\n      ...opts,\n      axis: orientation === 'horizontal' ? 'x' : 'y'\n    },\n    plugins\n  )\n  const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n  const [canScrollNext, setCanScrollNext] = React.useState(false)\n\n  const onSelect = React.useCallback((api: CarouselApi) => {\n    if (!api) {\n      return\n    }\n\n    setCanScrollPrev(api.canScrollPrev())\n    setCanScrollNext(api.canScrollNext())\n  }, [])\n\n  const scrollPrev = React.useCallback(() => {\n    api?.scrollPrev()\n  }, [api])\n\n  const scrollNext = React.useCallback(() => {\n    api?.scrollNext()\n  }, [api])\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === 'ArrowLeft') {\n        event.preventDefault()\n        scrollPrev()\n      } else if (event.key === 'ArrowRight') {\n        event.preventDefault()\n        scrollNext()\n      }\n    },\n    [scrollPrev, scrollNext]\n  )\n\n  React.useEffect(() => {\n    if (!api || !setApi) {\n      return\n    }\n\n    setApi(api)\n  }, [api, setApi])\n\n  React.useEffect(() => {\n    if (!api) {\n      return\n    }\n\n    onSelect(api)\n    api.on('reInit', onSelect)\n    api.on('select', onSelect)\n\n    return () => {\n      api?.off('select', onSelect)\n    }\n  }, [api, onSelect])\n\n  return (\n    <CarouselContext.Provider\n      value={{\n        carouselRef,\n        api: api,\n        opts,\n        orientation: orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),\n        scrollPrev,\n        scrollNext,\n        canScrollPrev,\n        canScrollNext\n      }}\n    >\n      <div\n        onKeyDownCapture={handleKeyDown}\n        className={cn('relative', className)}\n        role=\"region\"\n        aria-roledescription=\"carousel\"\n        {...props}\n      >\n        {children}\n      </div>\n    </CarouselContext.Provider>\n  )\n}\n\nconst CarouselContent = <T extends object>({ className, ...props }: SectionProps<T>) => {\n  const { carouselRef, orientation } = useCarousel()\n\n  return (\n    <ListBox\n      layout={orientation === 'vertical' ? 'stack' : 'grid'}\n      aria-label=\"Slides\"\n      orientation={orientation}\n      ref={carouselRef}\n      className=\"overflow-hidden\"\n    >\n      <Section\n        className={cn('flex', orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col', className)}\n        {...props}\n      />\n    </ListBox>\n  )\n}\n\nconst CarouselItem = ({ className, ...props }: ListBoxItemProps) => {\n  const { orientation } = useCarousel()\n\n  return (\n    <ListBoxItem\n      aria-label={`Slide ${props.id}`}\n      aria-roledescription=\"slide\"\n      className={cn(\n        'min-w-0 xd24r shrink-0 focus:outline-none grow-0 basis-full focus-visible:outline-none',\n        orientation === 'horizontal' ? 'pl-4' : 'pt-4',\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst CarouselHandler = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => {\n    const { orientation } = useCarousel()\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'mt-6 z-20 relative flex items-center gap-x-2',\n          orientation === 'horizontal' ? 'justify-end' : 'justify-center',\n          className\n        )}\n        {...props}\n      />\n    )\n  }\n)\nCarouselHandler.displayName = 'CarouselHandler'\n\nconst CarouselButton = ({\n  slot,\n  className,\n  intent = 'secondary',\n  appearance = 'outline',\n  shape = 'circle',\n  size = 'square-petite',\n  ...props\n}: ButtonProps & { slot: 'previous' | 'next' }) => {\n  const { orientation, scrollPrev, canScrollPrev, scrollNext, canScrollNext } = useCarousel()\n  const isNext = slot === 'next'\n  const canScroll = isNext ? canScrollNext : canScrollPrev\n  const scroll = isNext ? scrollNext : scrollPrev\n  const Icon = isNext ? IconChevronLgRight : IconChevronLgLeft\n\n  return (\n    <Button\n      aria-label={isNext ? 'Next slide' : 'Previous slide'}\n      slot={slot}\n      intent={intent}\n      appearance={appearance}\n      size={size}\n      shape={shape}\n      className={cn(orientation === 'vertical' ? 'rotate-90' : '', className)}\n      isDisabled={!canScroll}\n      onPress={scroll}\n      {...props}\n    >\n      <Icon className=\"size-4\" />\n    </Button>\n  )\n}\n\nCarousel.Content = CarouselContent\nCarousel.Handler = CarouselHandler\nCarousel.Item = CarouselItem\nCarousel.Button = CarouselButton\n\nexport { Carousel, type CarouselApi }\n",
-    "type": "ui"
-  }
-}
\ No newline at end of file
diff --git a/components/docs/media/avatar-demo.tsx b/components/docs/media/avatar-demo.tsx
index 27033200..d67d2c9c 100644
--- a/components/docs/media/avatar-demo.tsx
+++ b/components/docs/media/avatar-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import AvatarGroupDemo from '@/components/docs/media/avatar-group-demo'
+import AvatarGroupDemo from "@/components/docs/media/avatar-group-demo"
 
 export default function AvatarDemo() {
   return <AvatarGroupDemo />
diff --git a/components/docs/media/avatar-fallback-demo.tsx b/components/docs/media/avatar-fallback-demo.tsx
index 58bb692f..53c271cb 100644
--- a/components/docs/media/avatar-fallback-demo.tsx
+++ b/components/docs/media/avatar-fallback-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Avatar } from 'ui'
+import { Avatar } from "ui"
 
 export default function AvatarFallbackDemo() {
   return <Avatar initials="IR" src="https://github.com/irsyadadl.png" />
diff --git a/components/docs/media/avatar-group-demo.tsx b/components/docs/media/avatar-group-demo.tsx
index 8bf78ebe..1b61d8cb 100644
--- a/components/docs/media/avatar-group-demo.tsx
+++ b/components/docs/media/avatar-group-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Avatar, AvatarGroup } from 'ui'
+import { Avatar, AvatarGroup } from "ui"
 
 export default function AvatarGroupDemo() {
   return (
diff --git a/components/docs/media/avatar-initials-demo.tsx b/components/docs/media/avatar-initials-demo.tsx
index 504508a3..0d5e75f7 100644
--- a/components/docs/media/avatar-initials-demo.tsx
+++ b/components/docs/media/avatar-initials-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Avatar } from 'ui'
+import { Avatar } from "ui"
 
 export default function AvatarInitialsDemo() {
   return <Avatar initials="IR" />
diff --git a/components/docs/media/avatar-shape-demo.tsx b/components/docs/media/avatar-shape-demo.tsx
index 84d2a6fb..74ff0540 100644
--- a/components/docs/media/avatar-shape-demo.tsx
+++ b/components/docs/media/avatar-shape-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Avatar } from 'ui'
+import { Avatar } from "ui"
 
 export default function AvatarShapeDemo() {
   return (
diff --git a/components/docs/media/avatar-size-demo.tsx b/components/docs/media/avatar-size-demo.tsx
index b72d5f98..9c4683e3 100644
--- a/components/docs/media/avatar-size-demo.tsx
+++ b/components/docs/media/avatar-size-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Avatar } from 'ui'
+import { Avatar } from "ui"
 
 export default function AvatarSizeDemo() {
   return (
diff --git a/components/docs/media/avatar-status-demo.tsx b/components/docs/media/avatar-status-demo.tsx
index 991e3d16..4abe4907 100644
--- a/components/docs/media/avatar-status-demo.tsx
+++ b/components/docs/media/avatar-status-demo.tsx
@@ -1,6 +1,6 @@
-import React from 'react'
+import React from "react"
 
-import { Avatar } from 'ui'
+import { Avatar } from "ui"
 
 export default function AvatarStatusDemo() {
   return (
diff --git a/components/docs/media/carousel-api-demo.tsx b/components/docs/media/carousel-api-demo.tsx
index 5e42c94b..b8ec70f0 100644
--- a/components/docs/media/carousel-api-demo.tsx
+++ b/components/docs/media/carousel-api-demo.tsx
@@ -1,10 +1,10 @@
-'use client'
+"use client"
 
-import * as React from 'react'
+import * as React from "react"
 
-import { Button } from 'react-aria-components'
-import { twJoin } from 'tailwind-merge'
-import { Card, Carousel, type CarouselApi } from 'ui'
+import { Button } from "react-aria-components"
+import { twJoin } from "tailwind-merge"
+import { Card, Carousel, type CarouselApi } from "ui"
 
 export default function CarouselDApiDemo() {
   const [api, setApi] = React.useState<CarouselApi>()
@@ -18,7 +18,7 @@ export default function CarouselDApiDemo() {
 
     setCount(api.scrollSnapList().length)
     setCurrent(api.selectedScrollSnap() + 1)
-    api.on('select', () => {
+    api.on("select", () => {
       setCurrent(api.selectedScrollSnap() + 1)
     })
   }, [api])
@@ -48,10 +48,10 @@ export default function CarouselDApiDemo() {
           {Array.from({ length: 10 }).map((_, index) => (
             <Button
               className={twJoin(
-                'focus:outline-none transition rounded-xl',
+                "focus:outline-none transition rounded-xl",
                 current === index + 1
-                  ? 'w-5 h-3 transition-all bg-primary hover:bg-primary/80'
-                  : 'bg-fg/10 hover:bg-fg/15 w-3 h-3'
+                  ? "w-5 h-3 transition-all bg-primary hover:bg-primary/80"
+                  : "bg-fg/10 hover:bg-fg/15 w-3 h-3"
               )}
               aria-label={`Slide ${current} of ${count}`}
               onPress={() => handleSelect(index)}
diff --git a/components/docs/media/carousel-autoplay-demo.tsx b/components/docs/media/carousel-autoplay-demo.tsx
index 06b682b8..a37b9798 100644
--- a/components/docs/media/carousel-autoplay-demo.tsx
+++ b/components/docs/media/carousel-autoplay-demo.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import * as React from 'react'
+import * as React from "react"
 
-import Autoplay from 'embla-carousel-autoplay'
-import { Card, Carousel } from 'ui'
+import Autoplay from "embla-carousel-autoplay"
+import { Card, Carousel } from "ui"
 
 export default function CarouselAutoplayDemo() {
   const plugin = React.useRef(Autoplay({ delay: 1000, stopOnInteraction: true }))
@@ -15,7 +15,7 @@ export default function CarouselAutoplayDemo() {
       plugins={[plugin.current as any]}
       opts={{
         loop: true,
-        align: 'center'
+        align: "center"
       }}
       className="w-full [&_.xrkr]:h-56 [&_.xrkr]:overflow-hidden [&_.xrkr]:flex [&_.xrkr]:flex-col max-w-xs"
     >
@@ -46,52 +46,52 @@ export default function CarouselAutoplayDemo() {
 const items = [
   {
     id: 1,
-    title: 'Vintage Leather Jacket',
-    description: 'Classic brown leather jacket, perfect for a stylish retro look.'
+    title: "Vintage Leather Jacket",
+    description: "Classic brown leather jacket, perfect for a stylish retro look."
   },
   {
     id: 2,
-    title: 'Wireless Bluetooth Headphones',
-    description: 'Experience high-quality sound with these comfortable, noise-canceling headphones.'
+    title: "Wireless Bluetooth Headphones",
+    description: "Experience high-quality sound with these comfortable, noise-canceling headphones."
   },
   {
     id: 3,
-    title: 'Organic Cotton T-Shirt',
-    description: 'Soft and eco-friendly t-shirt made from 100% organic cotton.'
+    title: "Organic Cotton T-Shirt",
+    description: "Soft and eco-friendly t-shirt made from 100% organic cotton."
   },
   {
     id: 4,
-    title: 'Stainless Steel Water Bottle',
-    description: 'Keep your drinks cold or hot with this durable, insulated water bottle.'
+    title: "Stainless Steel Water Bottle",
+    description: "Keep your drinks cold or hot with this durable, insulated water bottle."
   },
   {
     id: 5,
-    title: 'Running Shoes',
-    description: 'Lightweight and comfortable shoes designed for optimal performance.'
+    title: "Running Shoes",
+    description: "Lightweight and comfortable shoes designed for optimal performance."
   },
   {
     id: 6,
-    title: 'Smartwatch',
-    description: 'Stay connected and track your fitness with this sleek smartwatch.'
+    title: "Smartwatch",
+    description: "Stay connected and track your fitness with this sleek smartwatch."
   },
   {
     id: 7,
-    title: 'Portable Charger',
-    description: 'Never run out of battery with this high-capacity portable charger.'
+    title: "Portable Charger",
+    description: "Never run out of battery with this high-capacity portable charger."
   },
   {
     id: 8,
-    title: 'Noise-Canceling Earbuds',
-    description: 'Compact and powerful earbuds that block out unwanted noise.'
+    title: "Noise-Canceling Earbuds",
+    description: "Compact and powerful earbuds that block out unwanted noise."
   },
   {
     id: 9,
-    title: 'Yoga Mat',
-    description: 'Non-slip, cushioned yoga mat for a comfortable workout experience.'
+    title: "Yoga Mat",
+    description: "Non-slip, cushioned yoga mat for a comfortable workout experience."
   },
   {
     id: 10,
-    title: 'LED Desk Lamp',
-    description: 'Bright and energy-efficient LED lamp with adjustable brightness.'
+    title: "LED Desk Lamp",
+    description: "Bright and energy-efficient LED lamp with adjustable brightness."
   }
 ]
diff --git a/components/docs/media/carousel-demo.tsx b/components/docs/media/carousel-demo.tsx
index f8ddc063..c8d56f37 100644
--- a/components/docs/media/carousel-demo.tsx
+++ b/components/docs/media/carousel-demo.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import * as React from 'react'
+import * as React from "react"
 
-import Image from 'next/image'
-import { Carousel } from 'ui'
+import Image from "next/image"
+import { Carousel } from "ui"
 
 export default function CarouselDemo() {
   return (
diff --git a/components/docs/media/carousel-options-demo.tsx b/components/docs/media/carousel-options-demo.tsx
index 697ba522..ed692a27 100644
--- a/components/docs/media/carousel-options-demo.tsx
+++ b/components/docs/media/carousel-options-demo.tsx
@@ -1,12 +1,12 @@
-import * as React from 'react'
+import * as React from "react"
 
-import { Card, Carousel } from 'ui'
+import { Card, Carousel } from "ui"
 
 export default function CarouselOptionsDemo() {
   return (
     <Carousel
       opts={{
-        align: 'center',
+        align: "center",
         loop: true
       }}
       className="w-full max-w-2xl"
diff --git a/components/docs/media/carousel-orientation-demo.tsx b/components/docs/media/carousel-orientation-demo.tsx
index 4086b57c..09770395 100644
--- a/components/docs/media/carousel-orientation-demo.tsx
+++ b/components/docs/media/carousel-orientation-demo.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import * as React from 'react'
+import * as React from "react"
 
-import { Card, Carousel } from 'ui'
+import { Card, Carousel } from "ui"
 
 export default function CarouselOrientationDemo() {
   return (
@@ -31,52 +31,52 @@ export default function CarouselOrientationDemo() {
 const items = [
   {
     id: 1,
-    title: 'Vintage Leather Jacket',
-    description: 'Classic brown leather jacket, perfect for a stylish retro look.'
+    title: "Vintage Leather Jacket",
+    description: "Classic brown leather jacket, perfect for a stylish retro look."
   },
   {
     id: 2,
-    title: 'Wireless Bluetooth Headphones',
-    description: 'Experience high-quality sound with these comfortable, noise-canceling headphones.'
+    title: "Wireless Bluetooth Headphones",
+    description: "Experience high-quality sound with these comfortable, noise-canceling headphones."
   },
   {
     id: 3,
-    title: 'Organic Cotton T-Shirt',
-    description: 'Soft and eco-friendly t-shirt made from 100% organic cotton.'
+    title: "Organic Cotton T-Shirt",
+    description: "Soft and eco-friendly t-shirt made from 100% organic cotton."
   },
   {
     id: 4,
-    title: 'Stainless Steel Water Bottle',
-    description: 'Keep your drinks cold or hot with this durable, insulated water bottle.'
+    title: "Stainless Steel Water Bottle",
+    description: "Keep your drinks cold or hot with this durable, insulated water bottle."
   },
   {
     id: 5,
-    title: 'Running Shoes',
-    description: 'Lightweight and comfortable shoes designed for optimal performance.'
+    title: "Running Shoes",
+    description: "Lightweight and comfortable shoes designed for optimal performance."
   },
   {
     id: 6,
-    title: 'Smartwatch',
-    description: 'Stay connected and track your fitness with this sleek smartwatch.'
+    title: "Smartwatch",
+    description: "Stay connected and track your fitness with this sleek smartwatch."
   },
   {
     id: 7,
-    title: 'Portable Charger',
-    description: 'Never run out of battery with this high-capacity portable charger.'
+    title: "Portable Charger",
+    description: "Never run out of battery with this high-capacity portable charger."
   },
   {
     id: 8,
-    title: 'Noise-Canceling Earbuds',
-    description: 'Compact and powerful earbuds that block out unwanted noise.'
+    title: "Noise-Canceling Earbuds",
+    description: "Compact and powerful earbuds that block out unwanted noise."
   },
   {
     id: 9,
-    title: 'Yoga Mat',
-    description: 'Non-slip, cushioned yoga mat for a comfortable workout experience.'
+    title: "Yoga Mat",
+    description: "Non-slip, cushioned yoga mat for a comfortable workout experience."
   },
   {
     id: 10,
-    title: 'LED Desk Lamp',
-    description: 'Bright and energy-efficient LED lamp with adjustable brightness.'
+    title: "LED Desk Lamp",
+    description: "Bright and energy-efficient LED lamp with adjustable brightness."
   }
 ]
diff --git a/components/docs/media/carousel-with-collection-demo.tsx b/components/docs/media/carousel-with-collection-demo.tsx
index 02beca15..6ad31b98 100644
--- a/components/docs/media/carousel-with-collection-demo.tsx
+++ b/components/docs/media/carousel-with-collection-demo.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import * as React from 'react'
+import * as React from "react"
 
-import Image from 'next/image'
-import { Card, Carousel } from 'ui'
+import Image from "next/image"
+import { Card, Carousel } from "ui"
 
 export default function CarouselWithCollectionDemo() {
   return (
@@ -39,37 +39,37 @@ export default function CarouselWithCollectionDemo() {
 const items = [
   {
     id: 1,
-    title: 'Vintage Leather Jacket',
-    description: 'Classic brown leather jacket, perfect for a stylish retro look.'
+    title: "Vintage Leather Jacket",
+    description: "Classic brown leather jacket, perfect for a stylish retro look."
   },
   {
     id: 2,
-    title: 'Wireless Bluetooth Headphones',
-    description: 'Experience high-quality sound with these comfortable, noise-canceling headphones.'
+    title: "Wireless Bluetooth Headphones",
+    description: "Experience high-quality sound with these comfortable, noise-canceling headphones."
   },
   {
     id: 3,
-    title: 'Organic Cotton T-Shirt',
-    description: 'Soft and eco-friendly t-shirt made from 100% organic cotton.'
+    title: "Organic Cotton T-Shirt",
+    description: "Soft and eco-friendly t-shirt made from 100% organic cotton."
   },
   {
     id: 4,
-    title: 'Stainless Steel Water Bottle',
-    description: 'Keep your drinks cold or hot with this durable, insulated water bottle.'
+    title: "Stainless Steel Water Bottle",
+    description: "Keep your drinks cold or hot with this durable, insulated water bottle."
   },
   {
     id: 5,
-    title: 'Running Shoes',
-    description: 'Lightweight and comfortable shoes designed for optimal performance.'
+    title: "Running Shoes",
+    description: "Lightweight and comfortable shoes designed for optimal performance."
   },
   {
     id: 6,
-    title: 'Smartwatch',
-    description: 'Stay connected and track your fitness with this sleek smartwatch.'
+    title: "Smartwatch",
+    description: "Stay connected and track your fitness with this sleek smartwatch."
   },
   {
     id: 7,
-    title: 'Portable Charger',
-    description: 'Never run out of battery with this high-capacity portable charger.'
+    title: "Portable Charger",
+    description: "Never run out of battery with this high-capacity portable charger."
   }
 ]
diff --git a/components/docs/navigation/breadcrumbs-demo.tsx b/components/docs/navigation/breadcrumbs-demo.tsx
index e9859ceb..9b0737f7 100644
--- a/components/docs/navigation/breadcrumbs-demo.tsx
+++ b/components/docs/navigation/breadcrumbs-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Breadcrumb, Breadcrumbs } from 'ui'
+import { Breadcrumb, Breadcrumbs } from "ui"
 
 export default function BreadcrumbsDemo() {
   return (
diff --git a/components/docs/navigation/link-button-demo.tsx b/components/docs/navigation/link-button-demo.tsx
index f83ee697..28fc2b84 100644
--- a/components/docs/navigation/link-button-demo.tsx
+++ b/components/docs/navigation/link-button-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { buttonStyles, Link } from 'ui'
+import { buttonStyles, Link } from "ui"
 
 export default function LinkButtonDemo() {
   return (
@@ -8,11 +8,11 @@ export default function LinkButtonDemo() {
       <Link className={buttonStyles()} href="#use-as-button">
         Link
       </Link>
-      <Link className={buttonStyles({ appearance: 'outline' })} href="#use-as-button">
+      <Link className={buttonStyles({ appearance: "outline" })} href="#use-as-button">
         Link
       </Link>
       <Link
-        className={buttonStyles({ appearance: 'plain', shape: 'circle' })}
+        className={buttonStyles({ appearance: "plain", shape: "circle" })}
         href="#use-as-button"
       >
         Link
diff --git a/components/docs/navigation/link-demo.tsx b/components/docs/navigation/link-demo.tsx
index eeabe1be..2a62ab78 100644
--- a/components/docs/navigation/link-demo.tsx
+++ b/components/docs/navigation/link-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Link } from 'ui'
+import { Link } from "ui"
 
 export default function LinkDemo() {
   return (
diff --git a/components/docs/navigation/link-disabled-demo.tsx b/components/docs/navigation/link-disabled-demo.tsx
index bf9709ac..48c23dc8 100644
--- a/components/docs/navigation/link-disabled-demo.tsx
+++ b/components/docs/navigation/link-disabled-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Link } from 'ui'
+import { Link } from "ui"
 
 export default function LinkDisabledDemo() {
   return (
diff --git a/components/docs/navigation/link-intent-demo.tsx b/components/docs/navigation/link-intent-demo.tsx
index fac0e39c..1e819f4c 100644
--- a/components/docs/navigation/link-intent-demo.tsx
+++ b/components/docs/navigation/link-intent-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Link } from 'ui'
+import { Link } from "ui"
 
 export default function LinkIntentDemo() {
   return (
diff --git a/components/docs/navigation/link-unstyled-demo.tsx b/components/docs/navigation/link-unstyled-demo.tsx
index ed389e46..79baf802 100644
--- a/components/docs/navigation/link-unstyled-demo.tsx
+++ b/components/docs/navigation/link-unstyled-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Link } from 'ui'
+import { Link } from "ui"
 
 export default function LinkUnstyledDemo() {
   return <Link href="#unstyled">Label</Link>
diff --git a/components/docs/navigation/pagination-demo.tsx b/components/docs/navigation/pagination-demo.tsx
index eed8dbee..bbf74868 100644
--- a/components/docs/navigation/pagination-demo.tsx
+++ b/components/docs/navigation/pagination-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Pagination } from 'ui'
+import { Pagination } from "ui"
 
 export default function PaginationDemo() {
   return (
diff --git a/components/docs/navigation/pagination-dynamic-demo.tsx b/components/docs/navigation/pagination-dynamic-demo.tsx
index 2b509564..5b95b8bd 100644
--- a/components/docs/navigation/pagination-dynamic-demo.tsx
+++ b/components/docs/navigation/pagination-dynamic-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Pagination } from 'ui'
+import { Pagination } from "ui"
 
 const pages = Array.from({ length: 6 }, (_, i) => ({ value: i + 1 }))
 export default function PaginationDynamicDemo() {
diff --git a/components/docs/navigation/simple-pagination-demo.tsx b/components/docs/navigation/simple-pagination-demo.tsx
index 35f5e1f3..b8f63f40 100644
--- a/components/docs/navigation/simple-pagination-demo.tsx
+++ b/components/docs/navigation/simple-pagination-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Pagination } from 'ui'
+import { Pagination } from "ui"
 
 export default function SimplePaginationDemo() {
   return (
diff --git a/components/docs/navigation/tabs-collections-demo.tsx b/components/docs/navigation/tabs-collections-demo.tsx
index 11f64856..b94c5fc2 100644
--- a/components/docs/navigation/tabs-collections-demo.tsx
+++ b/components/docs/navigation/tabs-collections-demo.tsx
@@ -1,15 +1,15 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { Collection } from 'react-aria-components'
-import { Tabs } from 'ui'
+import { Collection } from "react-aria-components"
+import { Tabs } from "ui"
 
 const tabs = [
-  { id: 1, title: 'Overview', content: 'This is the overview tab content.' },
-  { id: 2, title: 'Features', content: 'Details about the features are listed here.' },
-  { id: 3, title: 'Pricing', content: 'Find the pricing information on this tab.' },
-  { id: 4, title: 'Reviews', content: 'Read user reviews and ratings here.' }
+  { id: 1, title: "Overview", content: "This is the overview tab content." },
+  { id: 2, title: "Features", content: "Details about the features are listed here." },
+  { id: 3, title: "Pricing", content: "Find the pricing information on this tab." },
+  { id: 4, title: "Reviews", content: "Read user reviews and ratings here." }
 ]
 
 export default function TabsCollectionsDemo() {
diff --git a/components/docs/navigation/tabs-demo.tsx b/components/docs/navigation/tabs-demo.tsx
index 2d3d8111..9f999a05 100644
--- a/components/docs/navigation/tabs-demo.tsx
+++ b/components/docs/navigation/tabs-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Tabs } from 'ui'
+import { Tabs } from "ui"
 
 export default function TabsDemo() {
   return (
diff --git a/components/docs/navigation/tabs-disabled-demo.tsx b/components/docs/navigation/tabs-disabled-demo.tsx
index d407e501..a79f2c96 100644
--- a/components/docs/navigation/tabs-disabled-demo.tsx
+++ b/components/docs/navigation/tabs-disabled-demo.tsx
@@ -1,10 +1,10 @@
-'use client'
+"use client"
 
-import { Tabs } from 'ui'
+import { Tabs } from "ui"
 
 export default function TabsDisabledDemo() {
   return (
-    <Tabs disabledKeys={['c', 'a']} aria-label="Services">
+    <Tabs disabledKeys={["c", "a"]} aria-label="Services">
       <Tabs.List>
         <Tabs.Tab id="o">Overview</Tabs.Tab>
         <Tabs.Tab id="c">Contact</Tabs.Tab>
diff --git a/components/docs/navigation/tabs-icons-demo.tsx b/components/docs/navigation/tabs-icons-demo.tsx
index 2d6a637b..3b076802 100644
--- a/components/docs/navigation/tabs-icons-demo.tsx
+++ b/components/docs/navigation/tabs-icons-demo.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { IconApple, IconClock, IconCut } from 'justd-icons'
-import { Tabs } from 'ui'
+import { IconApple, IconClock, IconCut } from "justd-icons"
+import { Tabs } from "ui"
 
 export default function TabsIconsDemo() {
   return (
diff --git a/components/docs/navigation/tabs-link-demo.tsx b/components/docs/navigation/tabs-link-demo.tsx
index 9258ebf5..d7314d1d 100644
--- a/components/docs/navigation/tabs-link-demo.tsx
+++ b/components/docs/navigation/tabs-link-demo.tsx
@@ -1,12 +1,12 @@
-'use client'
+"use client"
 
-import { Tabs } from 'ui'
+import { Tabs } from "ui"
 
 const navs = [
-  { url: '/', label: 'Home' },
-  { url: '/docs/getting-started/introduction', label: 'Docs' },
-  { url: '/components', label: 'Components' },
-  { url: 'https://paranoid.irsyad.co', label: 'Paranoid' }
+  { url: "/", label: "Home" },
+  { url: "/docs/getting-started/introduction", label: "Docs" },
+  { url: "/components", label: "Components" },
+  { url: "https://paranoid.irsyad.co", label: "Paranoid" }
 ]
 
 export default function TabsLinkDemo() {
diff --git a/components/docs/navigation/tabs-orientation-demo.tsx b/components/docs/navigation/tabs-orientation-demo.tsx
index 318fcd97..4073285a 100644
--- a/components/docs/navigation/tabs-orientation-demo.tsx
+++ b/components/docs/navigation/tabs-orientation-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Tabs } from 'ui'
+import { Tabs } from "ui"
 
 export default function TabsOrientationDemo() {
   return (
diff --git a/components/docs/navigation/tabs-responsive-demo.tsx b/components/docs/navigation/tabs-responsive-demo.tsx
index 24ce3046..6bbad177 100644
--- a/components/docs/navigation/tabs-responsive-demo.tsx
+++ b/components/docs/navigation/tabs-responsive-demo.tsx
@@ -1,23 +1,23 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { IconHamburger } from 'justd-icons'
-import { Collection } from 'react-aria-components'
-import { Select, Tabs, useMediaQuery } from 'ui'
+import { IconHamburger } from "justd-icons"
+import { Collection } from "react-aria-components"
+import { Select, Tabs, useMediaQuery } from "ui"
 
 const tabs = [
-  { id: 1, title: 'Overview', content: 'This is the overview tab content.' },
-  { id: 2, title: 'Features', content: 'Details about the features are listed here.' },
-  { id: 3, title: 'Pricing', content: 'Find the pricing information on this tab.' },
-  { id: 4, title: 'Reviews', content: 'Read user reviews and ratings here.' },
-  { id: 5, title: 'Support', content: 'Contact our support team on this tab.' },
-  { id: 6, title: 'Guarantee', content: 'Our satisfaction guarantee details are here.' },
-  { id: 7, title: 'FAQ', content: 'Frequently asked questions are answered here.' }
+  { id: 1, title: "Overview", content: "This is the overview tab content." },
+  { id: 2, title: "Features", content: "Details about the features are listed here." },
+  { id: 3, title: "Pricing", content: "Find the pricing information on this tab." },
+  { id: 4, title: "Reviews", content: "Read user reviews and ratings here." },
+  { id: 5, title: "Support", content: "Contact our support team on this tab." },
+  { id: 6, title: "Guarantee", content: "Our satisfaction guarantee details are here." },
+  { id: 7, title: "FAQ", content: "Frequently asked questions are answered here." }
 ]
 
 export default function TabsResponsiveDemo() {
-  const isMobile = useMediaQuery('(max-width: 600px)')
+  const isMobile = useMediaQuery("(max-width: 600px)")
   return isMobile ? (
     <Select className="sm:hidden flex">
       <Select.Trigger prefix={<IconHamburger />} />
diff --git a/components/docs/overlays/alert-dialog-demo.tsx b/components/docs/overlays/alert-dialog-demo.tsx
index ebf6044a..2283f75f 100644
--- a/components/docs/overlays/alert-dialog-demo.tsx
+++ b/components/docs/overlays/alert-dialog-demo.tsx
@@ -1,11 +1,11 @@
-'use client'
+"use client"
 
-import { buttonStyles, Modal } from 'ui'
+import { buttonStyles, Modal } from "ui"
 
 export default function AlertDialogDemo() {
   return (
     <Modal>
-      <Modal.Trigger className={buttonStyles({ intent: 'danger' })}>Delete</Modal.Trigger>
+      <Modal.Trigger className={buttonStyles({ intent: "danger" })}>Delete</Modal.Trigger>
       <Modal.Content role="alertdialog">
         <Modal.Header>
           <Modal.Title>Delete file</Modal.Title>
diff --git a/components/docs/overlays/drawer-basic-demo.tsx b/components/docs/overlays/drawer-basic-demo.tsx
index 8f134d9d..94f11dc0 100644
--- a/components/docs/overlays/drawer-basic-demo.tsx
+++ b/components/docs/overlays/drawer-basic-demo.tsx
@@ -1,13 +1,13 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { buttonStyles, Drawer } from 'ui'
+import { buttonStyles, Drawer } from "ui"
 
 export default function DrawerBasicDemo() {
   return (
     <Drawer>
-      <Drawer.Trigger className={buttonStyles({ shape: 'circle', appearance: 'outline' })}>
+      <Drawer.Trigger className={buttonStyles({ shape: "circle", appearance: "outline" })}>
         Open
       </Drawer.Trigger>
       <Drawer.Content>
diff --git a/components/docs/overlays/drawer-controlled-demo.tsx b/components/docs/overlays/drawer-controlled-demo.tsx
index ae1dcc2f..e0e6785c 100644
--- a/components/docs/overlays/drawer-controlled-demo.tsx
+++ b/components/docs/overlays/drawer-controlled-demo.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { Button, Drawer, TextField } from 'ui'
+import { Button, Drawer, TextField } from "ui"
 
 export default function DrawerControlledDemo() {
   const [isOpen, setIsOpen] = React.useState(false)
diff --git a/components/docs/overlays/drawer-nested-demo.tsx b/components/docs/overlays/drawer-nested-demo.tsx
index 09eb52da..54e7dea8 100644
--- a/components/docs/overlays/drawer-nested-demo.tsx
+++ b/components/docs/overlays/drawer-nested-demo.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { toast } from 'sonner'
-import { Button, Drawer, Form, Textarea } from 'ui'
+import { toast } from "sonner"
+import { Button, Drawer, Form, Textarea } from "ui"
 
 export default function DrawerNestedDemo() {
   const [isRegistrationDrawerOpen, setIsRegistrationDrawerOpen] = React.useState(false)
@@ -39,7 +39,7 @@ export default function DrawerNestedDemo() {
       <Drawer
         isOpen={isProfileSetupDrawerOpen}
         onOpenChange={(isOpen) => {
-          if (!isOpen && isTyping) toast('Profile setup incomplete', { position: 'top-center' })
+          if (!isOpen && isTyping) toast("Profile setup incomplete", { position: "top-center" })
           setIsProfileSetupDrawerOpen(isOpen)
         }}
       >
@@ -53,7 +53,7 @@ export default function DrawerNestedDemo() {
           <Form
             onSubmit={(e) => {
               e.preventDefault()
-              toast.success('Profile setup complete', { position: 'top-center' })
+              toast.success("Profile setup complete", { position: "top-center" })
               setIsProfileSetupDrawerOpen(false)
               setIsRegistrationDrawerOpen(false)
             }}
diff --git a/components/docs/overlays/drawer-sticky-demo.tsx b/components/docs/overlays/drawer-sticky-demo.tsx
index 78529d24..bffa19b0 100644
--- a/components/docs/overlays/drawer-sticky-demo.tsx
+++ b/components/docs/overlays/drawer-sticky-demo.tsx
@@ -1,13 +1,13 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { buttonStyles, Drawer } from 'ui'
+import { buttonStyles, Drawer } from "ui"
 
 export default function DrawerStickyDemo() {
   return (
     <Drawer>
-      <Drawer.Trigger className={buttonStyles({ shape: 'circle', appearance: 'outline' })}>
+      <Drawer.Trigger className={buttonStyles({ shape: "circle", appearance: "outline" })}>
         Open
       </Drawer.Trigger>
       <Drawer.Content>
@@ -24,7 +24,7 @@ export default function DrawerStickyDemo() {
             <p>
               When you create an account with us, you are responsible for maintaining the
               confidentiality of your account and password.
-            </p>{' '}
+            </p>{" "}
             <p>
               You agree to accept responsibility for all activities that occur under your account.
               You must notify us immediately of any breach of security or unauthorized use of your
diff --git a/components/docs/overlays/drawer-without-notch-demo.tsx b/components/docs/overlays/drawer-without-notch-demo.tsx
index 5afd0286..af7ab59c 100644
--- a/components/docs/overlays/drawer-without-notch-demo.tsx
+++ b/components/docs/overlays/drawer-without-notch-demo.tsx
@@ -1,13 +1,13 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { buttonStyles, Drawer } from 'ui'
+import { buttonStyles, Drawer } from "ui"
 
 export default function DrawerWithoutNotchDemo() {
   return (
     <Drawer withNotch={false}>
-      <Drawer.Trigger className={buttonStyles({ shape: 'circle', appearance: 'outline' })}>
+      <Drawer.Trigger className={buttonStyles({ shape: "circle", appearance: "outline" })}>
         Open Drawer
       </Drawer.Trigger>
       <Drawer.Content>
diff --git a/components/docs/overlays/modal-blur-demo.tsx b/components/docs/overlays/modal-blur-demo.tsx
index 3bb0a0be..82afc730 100644
--- a/components/docs/overlays/modal-blur-demo.tsx
+++ b/components/docs/overlays/modal-blur-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Button, Form, Modal, TextField } from 'ui'
+import { Button, Form, Modal, TextField } from "ui"
 
 export default function ModalBlurDemo() {
   return (
diff --git a/components/docs/overlays/modal-controlled-demo.tsx b/components/docs/overlays/modal-controlled-demo.tsx
index 2fc66ae1..9cb3b899 100644
--- a/components/docs/overlays/modal-controlled-demo.tsx
+++ b/components/docs/overlays/modal-controlled-demo.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import { useState } from 'react'
+import { useState } from "react"
 
-import { Button, Modal } from 'ui'
+import { Button, Modal } from "ui"
 
 export default function ModalControlledDemo() {
   const [open, setOpen] = useState(false)
diff --git a/components/docs/overlays/modal-custom-classnames-demo.tsx b/components/docs/overlays/modal-custom-classnames-demo.tsx
index 06d8a574..94b2235a 100644
--- a/components/docs/overlays/modal-custom-classnames-demo.tsx
+++ b/components/docs/overlays/modal-custom-classnames-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Button, Modal } from 'ui'
+import { Button, Modal } from "ui"
 
 export default function ModalCustomClassnamesDemo() {
   return (
@@ -8,8 +8,8 @@ export default function ModalCustomClassnamesDemo() {
       <Button>Open</Button>
       <Modal.Content
         classNames={{
-          overlay: 'bg-white/40 dark:bg-black/40 backdrop-blur',
-          content: 'bg-background'
+          overlay: "bg-white/40 dark:bg-black/40 backdrop-blur",
+          content: "bg-background"
         }}
       >
         <Modal.Header title="Custom Classnames" description="This modal has custom class names." />
diff --git a/components/docs/overlays/modal-custom-style-demo.tsx b/components/docs/overlays/modal-custom-style-demo.tsx
index 925f1908..7a93af54 100644
--- a/components/docs/overlays/modal-custom-style-demo.tsx
+++ b/components/docs/overlays/modal-custom-style-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Button, Form, Modal, Note, TextField } from 'ui'
+import { Button, Form, Modal, Note, TextField } from "ui"
 
 export default function ModalCustomStyleDemo() {
   return (
diff --git a/components/docs/overlays/modal-demo.tsx b/components/docs/overlays/modal-demo.tsx
index 925befd4..8951afc1 100644
--- a/components/docs/overlays/modal-demo.tsx
+++ b/components/docs/overlays/modal-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Button, Form, Modal, TextField } from 'ui'
+import { Button, Form, Modal, TextField } from "ui"
 
 export default function ModalDemo() {
   return (
diff --git a/components/docs/overlays/modal-nested-demo.tsx b/components/docs/overlays/modal-nested-demo.tsx
index 8374e968..3cb27425 100644
--- a/components/docs/overlays/modal-nested-demo.tsx
+++ b/components/docs/overlays/modal-nested-demo.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { toast } from 'sonner'
-import { Button, Form, Modal, Textarea } from 'ui'
+import { toast } from "sonner"
+import { Button, Form, Modal, Textarea } from "ui"
 
 export default function ModalNestedDemo() {
   const [isRegistrationModalOpen, setIsRegistrationModalOpen] = React.useState(false)
@@ -39,7 +39,7 @@ export default function ModalNestedDemo() {
         isOpen={isProfileSetupModalOpen}
         onOpenChange={(isOpen) => {
           if (!isOpen && isTyping) {
-            toast('Profile setup incomplete')
+            toast("Profile setup incomplete")
           }
           setIsProfileSetupModalOpen(isOpen)
         }}
@@ -54,7 +54,7 @@ export default function ModalNestedDemo() {
         <Form
           onSubmit={(e) => {
             e.preventDefault()
-            toast.success('Profile setup complete')
+            toast.success("Profile setup complete")
             setIsProfileSetupModalOpen(false)
             setIsRegistrationModalOpen(false)
           }}
diff --git a/components/docs/overlays/modal-size-demo.tsx b/components/docs/overlays/modal-size-demo.tsx
index 347b0709..46c0a7fa 100644
--- a/components/docs/overlays/modal-size-demo.tsx
+++ b/components/docs/overlays/modal-size-demo.tsx
@@ -1,14 +1,14 @@
-'use client'
+"use client"
 
-import * as React from 'react'
+import * as React from "react"
 
-import { Button, Grid, Modal } from 'ui'
+import { Button, Grid, Modal } from "ui"
 
-type Size = Pick<React.ComponentProps<typeof Modal.Content>, 'size'>['size']
-const sizes: Size[] = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl']
+type Size = Pick<React.ComponentProps<typeof Modal.Content>, "size">["size"]
+const sizes: Size[] = ["xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl"]
 export default function ModalSizeDemo() {
   const [isOpen, setIsOpen] = React.useState(false)
-  const [modalSize, setModalSize] = React.useState<Size>('md')
+  const [modalSize, setModalSize] = React.useState<Size>("md")
 
   const handlePress = (size: Size, open: boolean) => {
     setModalSize(size)
diff --git a/components/docs/overlays/modal-sticky-demo.tsx b/components/docs/overlays/modal-sticky-demo.tsx
index 9963a05c..becffd93 100644
--- a/components/docs/overlays/modal-sticky-demo.tsx
+++ b/components/docs/overlays/modal-sticky-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Button, Modal } from 'ui'
+import { Button, Modal } from "ui"
 
 export default function ModalStickyDemo() {
   return (
@@ -25,7 +25,7 @@ export default function ModalStickyDemo() {
             <p>
               When you create an account with us, you are responsible for maintaining the
               confidentiality of your account and password.
-            </p>{' '}
+            </p>{" "}
             <p>
               You agree to accept responsibility for all activities that occur under your account.
               You must notify us immediately of any breach of security or unauthorized use of your
diff --git a/components/docs/overlays/modal-triggered-by-menu-demo.tsx b/components/docs/overlays/modal-triggered-by-menu-demo.tsx
index 58162857..09a9ebac 100644
--- a/components/docs/overlays/modal-triggered-by-menu-demo.tsx
+++ b/components/docs/overlays/modal-triggered-by-menu-demo.tsx
@@ -1,10 +1,10 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { wait } from '@/resources/lib/utils'
-import { IconDotsVertical } from 'justd-icons'
-import { Button, buttonStyles, LoadingDots, Menu, Modal } from 'ui'
+import { wait } from "@/resources/lib/utils"
+import { IconDotsVertical } from "justd-icons"
+import { Button, buttonStyles, LoadingDots, Menu, Modal } from "ui"
 
 export default function ModalTriggeredByMenuDemo() {
   const [state, setState] = React.useState<string | null>(null)
@@ -21,27 +21,27 @@ export default function ModalTriggeredByMenuDemo() {
 
   const actionType = (t: string | null) => {
     switch (t) {
-      case 'delete':
+      case "delete":
         return {
-          title: 'Delete User',
-          description: 'Are you sure you want to delete this item?',
-          confirmText: 'Delete',
+          title: "Delete User",
+          description: "Are you sure you want to delete this item?",
+          confirmText: "Delete",
           action: () => executeAction(t)
         }
 
-      case 'ban':
+      case "ban":
         return {
-          title: 'Ban User',
-          description: 'Are you sure you want to ban this user?',
-          confirmText: 'Ban',
+          title: "Ban User",
+          description: "Are you sure you want to ban this user?",
+          confirmText: "Ban",
           action: () => executeAction(t)
         }
 
-      case 'restore':
+      case "restore":
         return {
-          title: 'Restore User',
-          description: 'Are you sure you want to restore this user?',
-          confirmText: 'Restore',
+          title: "Restore User",
+          description: "Are you sure you want to restore this user?",
+          confirmText: "Restore",
           action: () => executeAction(t)
         }
       default:
@@ -51,13 +51,13 @@ export default function ModalTriggeredByMenuDemo() {
   return (
     <>
       <Menu>
-        <Menu.Trigger className={buttonStyles({ appearance: 'outline' })}>
+        <Menu.Trigger className={buttonStyles({ appearance: "outline" })}>
           <IconDotsVertical />
         </Menu.Trigger>
         <Menu.Content placement="bottom">
-          <Menu.Item onAction={() => setState('delete')}>Delete</Menu.Item>
-          <Menu.Item onAction={() => setState('ban')}>Ban</Menu.Item>
-          <Menu.Item onAction={() => setState('restore')}>Restore</Menu.Item>
+          <Menu.Item onAction={() => setState("delete")}>Delete</Menu.Item>
+          <Menu.Item onAction={() => setState("ban")}>Ban</Menu.Item>
+          <Menu.Item onAction={() => setState("restore")}>Restore</Menu.Item>
         </Menu.Content>
       </Menu>
 
@@ -69,7 +69,7 @@ export default function ModalTriggeredByMenuDemo() {
         <Modal.Footer>
           <Modal.Close>Cancel</Modal.Close>
           <Button className="min-w-24" isDisabled={loading} onPress={actionType(state)?.action}>
-            {loading ? <LoadingDots className={'bg-fg'} /> : actionType(state)?.confirmText}
+            {loading ? <LoadingDots className={"bg-fg"} /> : actionType(state)?.confirmText}
           </Button>
         </Modal.Footer>
       </Modal.Content>
diff --git a/components/docs/overlays/popover-arrow-demo.tsx b/components/docs/overlays/popover-arrow-demo.tsx
index d770914a..d1f0a8bf 100644
--- a/components/docs/overlays/popover-arrow-demo.tsx
+++ b/components/docs/overlays/popover-arrow-demo.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { IconBell } from 'justd-icons'
-import { Button, Popover } from 'ui'
+import { IconBell } from "justd-icons"
+import { Button, Popover } from "ui"
 
 export default function PopoverArrowDemo() {
   return (
diff --git a/components/docs/overlays/popover-controlled-demo.tsx b/components/docs/overlays/popover-controlled-demo.tsx
index 90203737..487d7710 100644
--- a/components/docs/overlays/popover-controlled-demo.tsx
+++ b/components/docs/overlays/popover-controlled-demo.tsx
@@ -1,23 +1,23 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { wait } from '@/resources/lib/utils'
-import { IconCircleCheckFill, IconTrash } from 'justd-icons'
-import { Button, Loader, Popover } from 'ui'
+import { wait } from "@/resources/lib/utils"
+import { IconCircleCheckFill, IconTrash } from "justd-icons"
+import { Button, Loader, Popover } from "ui"
 
 export default function PopoverControlledDemo() {
   const [isOpen, setIsOpen] = React.useState(false)
-  const [loading, setLoading] = React.useState<'idle' | 'loading' | 'success'>('idle')
+  const [loading, setLoading] = React.useState<"idle" | "loading" | "success">("idle")
   const triggerRef = React.useRef(null)
 
   const deleteAccount = async () => {
-    setLoading('loading')
+    setLoading("loading")
     await wait(3000)
-    setLoading('success')
+    setLoading("success")
 
     await wait(2000)
-    setLoading('idle')
+    setLoading("idle")
     setIsOpen(false)
   }
   return (
@@ -42,16 +42,16 @@ export default function PopoverControlledDemo() {
             Cancel
           </Button>
           <Button
-            isDisabled={loading === 'loading'}
+            isDisabled={loading === "loading"}
             onPress={deleteAccount}
-            intent={['loading', 'idle'].includes(loading) ? 'danger' : 'success'}
+            intent={["loading", "idle"].includes(loading) ? "danger" : "success"}
           >
-            {loading === 'loading' ? (
+            {loading === "loading" ? (
               <>
                 <Loader variant="spin" />
                 Deleting...
               </>
-            ) : loading === 'success' ? (
+            ) : loading === "success" ? (
               <>
                 <IconCircleCheckFill />
                 Deleted
diff --git a/components/docs/overlays/popover-custom-close.tsx b/components/docs/overlays/popover-custom-close.tsx
index 66d66491..f0280c22 100644
--- a/components/docs/overlays/popover-custom-close.tsx
+++ b/components/docs/overlays/popover-custom-close.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { Button, Checkbox, Form, Link, Popover, TextField } from 'ui'
+import { Button, Checkbox, Form, Link, Popover, TextField } from "ui"
 
 export default function PopoverCustomClose() {
   return (
diff --git a/components/docs/overlays/popover-demo.tsx b/components/docs/overlays/popover-demo.tsx
index 6a4eb5d6..c40e41aa 100644
--- a/components/docs/overlays/popover-demo.tsx
+++ b/components/docs/overlays/popover-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Button, Popover } from 'ui'
+import { Button, Popover } from "ui"
 
 export default function PopoverDemo() {
   return (
diff --git a/components/docs/overlays/popover-placement-demo.tsx b/components/docs/overlays/popover-placement-demo.tsx
index 63a3cff8..bc8b26ff 100644
--- a/components/docs/overlays/popover-placement-demo.tsx
+++ b/components/docs/overlays/popover-placement-demo.tsx
@@ -1,10 +1,10 @@
-'use client'
+"use client"
 
-import { type TooltipProps } from 'react-aria-components'
-import { Button, Popover } from 'ui'
+import { type TooltipProps } from "react-aria-components"
+import { Button, Popover } from "ui"
 
-type Placement = Pick<TooltipProps, 'placement'>['placement']
-const placements: Placement[] = ['bottom', 'top', 'left', 'start', 'right', 'end']
+type Placement = Pick<TooltipProps, "placement">["placement"]
+const placements: Placement[] = ["bottom", "top", "left", "start", "right", "end"]
 export default function PopoverPlacementDemo() {
   return (
     <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-2 [&_.kbt32x]:w-full">
diff --git a/components/docs/overlays/popover-trigger-demo.tsx b/components/docs/overlays/popover-trigger-demo.tsx
index 04698e74..61946eb4 100644
--- a/components/docs/overlays/popover-trigger-demo.tsx
+++ b/components/docs/overlays/popover-trigger-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Avatar, Button, Popover } from 'ui'
+import { Avatar, Button, Popover } from "ui"
 
 export default function PopoverTriggerDemo() {
   return (
diff --git a/components/docs/overlays/sheet-classnames-demo.tsx b/components/docs/overlays/sheet-classnames-demo.tsx
index 38904503..9bb6243e 100644
--- a/components/docs/overlays/sheet-classnames-demo.tsx
+++ b/components/docs/overlays/sheet-classnames-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Button, Sheet } from 'ui'
+import { Button, Sheet } from "ui"
 
 export default function SheetClassnamesDemo() {
   return (
@@ -8,8 +8,8 @@ export default function SheetClassnamesDemo() {
       <Button>Open</Button>
       <Sheet.Content
         classNames={{
-          overlay: 'bg-white/50 dark:bg-black/50 backdrop-blur',
-          content: 'min-w-80'
+          overlay: "bg-white/50 dark:bg-black/50 backdrop-blur",
+          content: "min-w-80"
         }}
       >
         <Sheet.Header title="Custom Classnames" description="This sheet has custom class names." />
diff --git a/components/docs/overlays/sheet-controlled-demo.tsx b/components/docs/overlays/sheet-controlled-demo.tsx
index e8c2929b..4edb0d7b 100644
--- a/components/docs/overlays/sheet-controlled-demo.tsx
+++ b/components/docs/overlays/sheet-controlled-demo.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { Button, Sheet, Textarea } from 'ui'
+import { Button, Sheet, Textarea } from "ui"
 
 export default function SheetControlledDemo() {
   const [isOpen, setIsOpen] = React.useState(false)
diff --git a/components/docs/overlays/sheet-custom-close-demo.tsx b/components/docs/overlays/sheet-custom-close-demo.tsx
index 21f788e0..06115767 100644
--- a/components/docs/overlays/sheet-custom-close-demo.tsx
+++ b/components/docs/overlays/sheet-custom-close-demo.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { Button, Checkbox, CheckboxGroup, Sheet } from 'ui'
+import { Button, Checkbox, CheckboxGroup, Sheet } from "ui"
 
 export default function SheetControlledDemo() {
   return (
diff --git a/components/docs/overlays/sheet-custom-style-demo.tsx b/components/docs/overlays/sheet-custom-style-demo.tsx
index e9d69ffd..74903f0d 100644
--- a/components/docs/overlays/sheet-custom-style-demo.tsx
+++ b/components/docs/overlays/sheet-custom-style-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Button, Form, Note, Sheet, TextField } from 'ui'
+import { Button, Form, Note, Sheet, TextField } from "ui"
 
 export default function SheetCustomStyleDemo() {
   return (
diff --git a/components/docs/overlays/sheet-demo.tsx b/components/docs/overlays/sheet-demo.tsx
index c571abc5..52ce0f1a 100644
--- a/components/docs/overlays/sheet-demo.tsx
+++ b/components/docs/overlays/sheet-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Button, Sheet, Switch, TextField } from 'ui'
+import { Button, Sheet, Switch, TextField } from "ui"
 
 export default function SheetDemo() {
   return (
diff --git a/components/docs/overlays/sheet-menu-demo.tsx b/components/docs/overlays/sheet-menu-demo.tsx
index 0fc02230..7fe02452 100644
--- a/components/docs/overlays/sheet-menu-demo.tsx
+++ b/components/docs/overlays/sheet-menu-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
 import {
   IconBook,
@@ -19,9 +19,9 @@ import {
   IconPeople,
   IconPerson,
   IconStar
-} from 'justd-icons'
-import { Group } from 'react-aria-components'
-import { Avatar, Button, Checkbox, Description, Menu, Modal, Select, Sheet, TextField } from 'ui'
+} from "justd-icons"
+import { Group } from "react-aria-components"
+import { Avatar, Button, Checkbox, Description, Menu, Modal, Select, Sheet, TextField } from "ui"
 
 export default function SheetMenuDemo() {
   const [isOpen, setIsOpen] = React.useState(false)
diff --git a/components/docs/overlays/sheet-position-demo.tsx b/components/docs/overlays/sheet-position-demo.tsx
index c8ee89fb..0af7e6c6 100644
--- a/components/docs/overlays/sheet-position-demo.tsx
+++ b/components/docs/overlays/sheet-position-demo.tsx
@@ -1,16 +1,16 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { Button, Sheet } from 'ui'
-import { titleCase } from 'usemods'
+import { Button, Sheet } from "ui"
+import { titleCase } from "usemods"
 
-type Side = 'left' | 'right' | 'top' | 'bottom'
+type Side = "left" | "right" | "top" | "bottom"
 export default function SheetPositionDemo() {
-  const [sheetSide, setSheetSide] = React.useState<Side>('left')
+  const [sheetSide, setSheetSide] = React.useState<Side>("left")
   const [isOpen, setIsOpen] = React.useState(false)
 
-  const sides: Side[] = ['left', 'right', 'top', 'bottom']
+  const sides: Side[] = ["left", "right", "top", "bottom"]
 
   const pressHandler = (side: Side, open: boolean) => {
     setSheetSide(side)
diff --git a/components/docs/overlays/sheet-stack-demo.tsx b/components/docs/overlays/sheet-stack-demo.tsx
index 6c69387f..428fc2ae 100644
--- a/components/docs/overlays/sheet-stack-demo.tsx
+++ b/components/docs/overlays/sheet-stack-demo.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { Button, Sheet } from 'ui'
+import { Button, Sheet } from "ui"
 
 export default function SheetStackDemo() {
   return (
diff --git a/components/docs/overlays/sheet-sticky-demo.tsx b/components/docs/overlays/sheet-sticky-demo.tsx
index 1a0f79ec..484ec1de 100644
--- a/components/docs/overlays/sheet-sticky-demo.tsx
+++ b/components/docs/overlays/sheet-sticky-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Button, Sheet } from 'ui'
+import { Button, Sheet } from "ui"
 
 export default function SheetStickyDemo() {
   return (
@@ -25,7 +25,7 @@ export default function SheetStickyDemo() {
             <p>
               When you create an account with us, you are responsible for maintaining the
               confidentiality of your account and password.
-            </p>{' '}
+            </p>{" "}
             <p>
               You agree to accept responsibility for all activities that occur under your account.
               You must notify us immediately of any breach of security or unauthorized use of your
diff --git a/components/docs/overlays/tooltip-delay-demo.tsx b/components/docs/overlays/tooltip-delay-demo.tsx
index 43c4e509..4c624075 100644
--- a/components/docs/overlays/tooltip-delay-demo.tsx
+++ b/components/docs/overlays/tooltip-delay-demo.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { IconBrandGithub } from 'justd-icons'
-import { buttonStyles, Tooltip } from 'ui'
+import { IconBrandGithub } from "justd-icons"
+import { buttonStyles, Tooltip } from "ui"
 
 export default function TooltipDelayDemo() {
   return (
@@ -10,8 +10,8 @@ export default function TooltipDelayDemo() {
         <Tooltip.Trigger
           aria-label="Follow My Twitter"
           className={buttonStyles({
-            appearance: 'outline',
-            size: 'square-petite'
+            appearance: "outline",
+            size: "square-petite"
           })}
         >
           <IconBrandGithub />
diff --git a/components/docs/overlays/tooltip-demo.tsx b/components/docs/overlays/tooltip-demo.tsx
index eedf2efd..2024c58b 100644
--- a/components/docs/overlays/tooltip-demo.tsx
+++ b/components/docs/overlays/tooltip-demo.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { IconBrandX } from 'justd-icons'
-import { buttonStyles, Tooltip } from 'ui'
+import { IconBrandX } from "justd-icons"
+import { buttonStyles, Tooltip } from "ui"
 
 export default function TooltipDemo() {
   return (
@@ -10,8 +10,8 @@ export default function TooltipDemo() {
         <Tooltip.Trigger
           aria-label="Follow My Twitter"
           className={buttonStyles({
-            appearance: 'outline',
-            size: 'square-petite'
+            appearance: "outline",
+            size: "square-petite"
           })}
         >
           <IconBrandX />
diff --git a/components/docs/overlays/tooltip-placement-demo.tsx b/components/docs/overlays/tooltip-placement-demo.tsx
index b82cf994..54ed8d6e 100644
--- a/components/docs/overlays/tooltip-placement-demo.tsx
+++ b/components/docs/overlays/tooltip-placement-demo.tsx
@@ -1,10 +1,10 @@
-'use client'
+"use client"
 
-import { type TooltipProps } from 'react-aria-components'
-import { Button, Tooltip } from 'ui'
+import { type TooltipProps } from "react-aria-components"
+import { Button, Tooltip } from "ui"
 
-type Placement = Pick<TooltipProps, 'placement'>['placement']
-const placements: Placement[] = ['bottom', 'top', 'left', 'start', 'right', 'end']
+type Placement = Pick<TooltipProps, "placement">["placement"]
+const placements: Placement[] = ["bottom", "top", "left", "start", "right", "end"]
 export default function TooltipPlacementDemo() {
   return (
     <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-2 [&_.kbt32x]:w-full">
diff --git a/components/docs/rehype/code.tsx b/components/docs/rehype/code.tsx
index 6b285684..709fb117 100644
--- a/components/docs/rehype/code.tsx
+++ b/components/docs/rehype/code.tsx
@@ -1,16 +1,16 @@
-'use client'
+"use client"
 
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState } from "react"
 
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@radix-ui/react-collapsible'
-import { IconCircleInfo } from 'justd-icons'
-import rehypePrettyCode from 'rehype-pretty-code'
-import rehypeStringify from 'rehype-stringify'
-import remarkParse from 'remark-parse'
-import remarkRehype from 'remark-rehype'
-import { Button, cn, CopyButton } from 'ui'
-import { unified } from 'unified'
-import { copyToClipboard } from 'usemods'
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@radix-ui/react-collapsible"
+import { IconCircleInfo } from "justd-icons"
+import rehypePrettyCode from "rehype-pretty-code"
+import rehypeStringify from "rehype-stringify"
+import remarkParse from "remark-parse"
+import remarkRehype from "remark-rehype"
+import { Button, cn, CopyButton } from "ui"
+import { unified } from "unified"
+import { copyToClipboard } from "usemods"
 
 export interface CodeProps {
   lang?: string
@@ -19,25 +19,25 @@ export interface CodeProps {
   className?: string
 }
 
-function Code({ className, lang = 'tsx', code, withImportCopy = true }: CodeProps) {
-  const [copied, setCopied] = React.useState<string>('')
+function Code({ className, lang = "tsx", code, withImportCopy = true }: CodeProps) {
+  const [copied, setCopied] = React.useState<string>("")
 
   function copyImportsToClipboard(): void {
     const importRegex = /import[\s\S]+?from\s+['"][\s\S]+?['"];?\n*/g
     const _imports = code.match(importRegex) || []
-    const imports = _imports.map((importStatement: string) => importStatement.trim()).join('\n')
+    const imports = _imports.map((importStatement: string) => importStatement.trim()).join("\n")
     copyToClipboard(imports)
       .then(() => {
-        setCopied('imports')
-        setTimeout(() => setCopied(''), 2000)
+        setCopied("imports")
+        setTimeout(() => setCopied(""), 2000)
       })
-      .catch((err) => console.error('Copy failed: ', err))
+      .catch((err) => console.error("Copy failed: ", err))
   }
 
   return (
     <div
       className={cn(
-        'dfakdpxe2941 not-prose group relative max-h-96 overflow-y-auto rounded-lg font-mono text-sm',
+        "dfakdpxe2941 not-prose group relative max-h-96 overflow-y-auto rounded-lg font-mono text-sm",
         className
       )}
     >
@@ -47,7 +47,7 @@ function Code({ className, lang = 'tsx', code, withImportCopy = true }: CodeProp
             <CopyButton
               ariaLabel="Copy imports statement"
               initialIcon={<IconCircleInfo />}
-              isCopied={copied === 'imports'}
+              isCopied={copied === "imports"}
               onPress={copyImportsToClipboard}
             />
           )}
@@ -63,11 +63,11 @@ function Code({ className, lang = 'tsx', code, withImportCopy = true }: CodeProp
 
 function CodeContainer({ children, isOpened }: { children: React.ReactNode; isOpened: boolean }) {
   return (
-    <CollapsibleContent forceMount className={!isOpened ? 'h-32' : ''}>
+    <CollapsibleContent forceMount className={!isOpened ? "h-32" : ""}>
       <div
         className={cn(
-          '[&_pre]:my-0 [&_pre]:!border-0 [&_pre]:h-[32rem] [&_pre]:pb-[100px]',
-          !isOpened ? '[&_pre]:overflow-hidden' : '[&_pre]:overflow-auto'
+          "[&_pre]:my-0 [&_pre]:!border-0 [&_pre]:h-[32rem] [&_pre]:pb-[100px]",
+          !isOpened ? "[&_pre]:overflow-hidden" : "[&_pre]:overflow-auto"
         )}
       >
         {children}
@@ -80,13 +80,13 @@ function CodeExpandButton({ isOpened }: { isOpened: boolean }) {
   return (
     <div
       className={cn(
-        'absolute flex items-center justify-center bg-gradient-to-b from-[#0e0e10]/50 to-black',
-        isOpened ? 'inset-x-0 bottom-0 h-16' : 'inset-0'
+        "absolute flex items-center justify-center bg-gradient-to-b from-[#0e0e10]/50 to-black",
+        isOpened ? "inset-x-0 bottom-0 h-16" : "inset-0"
       )}
     >
       <CollapsibleTrigger asChild>
         <Button intent="secondary" size="small">
-          {isOpened ? 'Collapse' : 'Expand'}
+          {isOpened ? "Collapse" : "Expand"}
         </Button>
       </CollapsibleTrigger>
     </div>
@@ -105,14 +105,14 @@ function CodeCollapsible({
   children,
   isOpened,
   onOpenChange,
-  lang = 'tsx',
+  lang = "tsx",
   withImportCopy = true,
   code,
   ...props
 }: React.PropsWithChildren<CodeCollapsibleProps>) {
   return (
     <Collapsible open={isOpened} onOpenChange={onOpenChange}>
-      <div className={'relative overflow-hidden'} {...props}>
+      <div className={"relative overflow-hidden"} {...props}>
         <CodeContainer isOpened={isOpened}>
           <Code code={code} lang={lang} withImportCopy={withImportCopy} />
         </CodeContainer>
@@ -129,23 +129,23 @@ export function CodeCollapsibleRoot({ children }: React.PropsWithChildren<{}>) {
 }
 
 export function CopyRawButton({ code }: { className?: string; code: any }) {
-  const [copied, setCopied] = React.useState<string>('')
+  const [copied, setCopied] = React.useState<string>("")
   const copyRaw = () => {
     copyToClipboard(code)
       .then(() => {
-        setCopied('raw')
-        setTimeout(() => setCopied(''), 2000)
+        setCopied("raw")
+        setTimeout(() => setCopied(""), 2000)
       })
       .catch((err) => {
-        console.error('Copy failed: ', err)
+        console.error("Copy failed: ", err)
       })
   }
-  return <CopyButton ariaLabel="Copy raw code" isCopied={copied === 'raw'} onPress={copyRaw} />
+  return <CopyButton ariaLabel="Copy raw code" isCopied={copied === "raw"} onPress={copyRaw} />
 }
 
-const CodeHighlighter: React.FC<CodeProps> = ({ lang = 'tsx', code }) => {
-  const [formattedCode, setFormattedCode] = useState('')
-  const [error, setError] = useState('')
+const CodeHighlighter: React.FC<CodeProps> = ({ lang = "tsx", code }) => {
+  const [formattedCode, setFormattedCode] = useState("")
+  const [error, setError] = useState("")
 
   useEffect(() => {
     const processCode = async () => {
@@ -155,17 +155,17 @@ const CodeHighlighter: React.FC<CodeProps> = ({ lang = 'tsx', code }) => {
           .use(remarkRehype, { allowDangerousHtml: true })
           .use(rehypePrettyCode, {
             keepBackground: false,
-            theme: 'vesper',
+            theme: "vesper",
             defaultLang: {
               block: lang,
-              inline: 'plaintext'
+              inline: "plaintext"
             }
           })
           .use(rehypeStringify, { allowDangerousHtml: true })
           .process(`\`\`\`${lang}\n${code}\n\`\`\``)
         setFormattedCode(String(file))
       } catch (err) {
-        setError('Failed to process code. Please check the configuration.')
+        setError("Failed to process code. Please check the configuration.")
         console.error(err)
       }
     }
diff --git a/components/docs/rehype/plain-code.tsx b/components/docs/rehype/plain-code.tsx
index c8192314..489e0d81 100644
--- a/components/docs/rehype/plain-code.tsx
+++ b/components/docs/rehype/plain-code.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import * as React from 'react'
+import * as React from "react"
 
-import { CodeCollapsible, CodeCollapsibleRoot } from '@/components/docs/rehype/code'
+import { CodeCollapsible, CodeCollapsibleRoot } from "@/components/docs/rehype/code"
 
 interface PlainCodeProps extends React.HTMLAttributes<HTMLDivElement> {
   code: string
@@ -14,7 +14,7 @@ interface PlainCodeProps extends React.HTMLAttributes<HTMLDivElement> {
 export function PlainCode({
   title,
   withImportCopy = false,
-  lang = 'tsx',
+  lang = "tsx",
   code,
   ...props
 }: PlainCodeProps) {
diff --git a/components/docs/rehype/source-code.tsx b/components/docs/rehype/source-code.tsx
index 07e68216..503d816e 100644
--- a/components/docs/rehype/source-code.tsx
+++ b/components/docs/rehype/source-code.tsx
@@ -1,17 +1,17 @@
-'use client'
+"use client"
 
-import * as React from 'react'
+import * as React from "react"
 
-import jsonPreviews from '@/components/docs/generated/previews.json'
+import jsonPreviews from "@/components/docs/generated/previews.json"
 import {
   Code,
   CodeCollapsible,
   CodeCollapsibleRoot,
   CodeContainer,
   CodeExpandButton
-} from '@/components/docs/rehype/code'
-import { Collapsible } from '@radix-ui/react-collapsible'
-import { Tabs } from 'ui'
+} from "@/components/docs/rehype/code"
+import { Collapsible } from "@radix-ui/react-collapsible"
+import { Tabs } from "ui"
 
 interface SourceCodeProps extends React.HTMLAttributes<HTMLDivElement> {
   toShow: string | string[]
@@ -20,7 +20,7 @@ interface SourceCodeProps extends React.HTMLAttributes<HTMLDivElement> {
   ext?: string
 }
 
-export function SourceCode({ title, message, ext = 'tsx', toShow, ...props }: SourceCodeProps) {
+export function SourceCode({ title, message, ext = "tsx", toShow, ...props }: SourceCodeProps) {
   const [codeStrings, setCodeStrings] = React.useState<{ name: string; code: string }[]>([])
   const [isOpened, setIsOpened] = React.useState<Record<string, boolean>>({})
 
@@ -34,12 +34,12 @@ export function SourceCode({ title, message, ext = 'tsx', toShow, ...props }: So
           name: show,
           code: componentData.raw.replace(
             /export default function \w+\(\) \{/g,
-            'export default function App() {'
+            "export default function App() {"
           )
         }
       } else {
-        console.error('Component not found:', show)
-        return { name: show, code: '' }
+        console.error("Component not found:", show)
+        return { name: show, code: "" }
       }
     })
     setCodeStrings(updatedCodeStrings)
@@ -56,14 +56,14 @@ export function SourceCode({ title, message, ext = 'tsx', toShow, ...props }: So
         <p className="mb-4 -mt-2">
           {message
             ? message
-            : 'And next, you can copy the code below and paste it into your dopest component folder.'}
+            : "And next, you can copy the code below and paste it into your dopest component folder."}
         </p>
         {title && <figcaption data-rehype-pretty-code-title="">{title}</figcaption>}
         <CodeCollapsibleRoot>
           <CodeCollapsible
             isOpened={isOpened[0]}
             onOpenChange={(open) => handleOpenChange(0, open)}
-            code={codeStrings[0]?.code || ''}
+            code={codeStrings[0]?.code || ""}
           />
         </CodeCollapsibleRoot>
       </section>
@@ -75,7 +75,7 @@ export function SourceCode({ title, message, ext = 'tsx', toShow, ...props }: So
       <p className="mb-4 -mt-2">
         {toShow.length > 1
           ? "All these components are tight, so you gotta use 'em all together."
-          : 'And next, you can copy the code below and paste it into your dopest component folder.'}
+          : "And next, you can copy the code below and paste it into your dopest component folder."}
       </p>
 
       <Tabs>
diff --git a/components/docs/statuses/badge-demo.tsx b/components/docs/statuses/badge-demo.tsx
index e0439a22..b661c7d1 100644
--- a/components/docs/statuses/badge-demo.tsx
+++ b/components/docs/statuses/badge-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Badge } from 'ui'
+import { Badge } from "ui"
 
 export default function BadgeDemo() {
   return <Badge>Label</Badge>
diff --git a/components/docs/statuses/badge-intent-demo.tsx b/components/docs/statuses/badge-intent-demo.tsx
index 458b961c..69f97fe1 100644
--- a/components/docs/statuses/badge-intent-demo.tsx
+++ b/components/docs/statuses/badge-intent-demo.tsx
@@ -1,11 +1,11 @@
-'use client'
+"use client"
 
-import { Badge } from 'ui'
+import { Badge } from "ui"
 
 export default function BadgeIntentDemo() {
   return (
     <div className="flex flex-wrap gap-2">
-      {['primary', 'secondary', 'success', 'info', 'warning', 'danger', 'light', 'dark'].map(
+      {["primary", "secondary", "success", "info", "warning", "danger", "light", "dark"].map(
         (intent, index) => (
           <Badge key={index} intent={intent as any}>
             {intent}
diff --git a/components/docs/statuses/badge-shape-demo.tsx b/components/docs/statuses/badge-shape-demo.tsx
index 7bf4eb76..0b6f9ae8 100644
--- a/components/docs/statuses/badge-shape-demo.tsx
+++ b/components/docs/statuses/badge-shape-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Badge } from 'ui'
+import { Badge } from "ui"
 
 export default function BadgeShapeDemo() {
   return <Badge shape="circle">Label</Badge>
diff --git a/components/docs/statuses/indeterminate-progress-bar-demo.tsx b/components/docs/statuses/indeterminate-progress-bar-demo.tsx
index 460ef526..6c6fdbf0 100644
--- a/components/docs/statuses/indeterminate-progress-bar-demo.tsx
+++ b/components/docs/statuses/indeterminate-progress-bar-demo.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { ProgressBar } from 'ui'
+import { ProgressBar } from "ui"
 
 export default function ProgressBarDemo() {
   const [value, setValue] = React.useState(1)
diff --git a/components/docs/statuses/loader-demo.tsx b/components/docs/statuses/loader-demo.tsx
index d523262f..964ce156 100644
--- a/components/docs/statuses/loader-demo.tsx
+++ b/components/docs/statuses/loader-demo.tsx
@@ -1,4 +1,4 @@
-import { Loader } from 'ui'
+import { Loader } from "ui"
 
 export default function LoaderDemo() {
   return <Loader />
diff --git a/components/docs/statuses/loader-intent-demo.tsx b/components/docs/statuses/loader-intent-demo.tsx
index 2c4be14f..9649457c 100644
--- a/components/docs/statuses/loader-intent-demo.tsx
+++ b/components/docs/statuses/loader-intent-demo.tsx
@@ -1,4 +1,4 @@
-import { Loader } from 'ui'
+import { Loader } from "ui"
 
 export default function LoaderIntentDemo() {
   return (
diff --git a/components/docs/statuses/loader-size-demo.tsx b/components/docs/statuses/loader-size-demo.tsx
index bd53f0f8..e23349c9 100644
--- a/components/docs/statuses/loader-size-demo.tsx
+++ b/components/docs/statuses/loader-size-demo.tsx
@@ -1,4 +1,4 @@
-import { Loader } from 'ui'
+import { Loader } from "ui"
 
 export default function LoaderSizeDemo() {
   return (
diff --git a/components/docs/statuses/loader-variant-demo.tsx b/components/docs/statuses/loader-variant-demo.tsx
index fe55d34f..8eb18726 100644
--- a/components/docs/statuses/loader-variant-demo.tsx
+++ b/components/docs/statuses/loader-variant-demo.tsx
@@ -1,4 +1,4 @@
-import { Loader } from 'ui'
+import { Loader } from "ui"
 
 export default function LoaderVariantDemo() {
   return (
diff --git a/components/docs/statuses/meter-currency-format-demo.tsx b/components/docs/statuses/meter-currency-format-demo.tsx
index a2e1b38c..17fd8758 100644
--- a/components/docs/statuses/meter-currency-format-demo.tsx
+++ b/components/docs/statuses/meter-currency-format-demo.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { Meter } from 'ui'
+import { Meter } from "ui"
 
 export default function MeterCurrencyFormatDemo() {
-  return <Meter label="Revenue" formatOptions={{ style: 'currency', currency: 'USD' }} value={15} />
+  return <Meter label="Revenue" formatOptions={{ style: "currency", currency: "USD" }} value={15} />
 }
diff --git a/components/docs/statuses/meter-decimal-format-demo.tsx b/components/docs/statuses/meter-decimal-format-demo.tsx
index 4822b80e..3ab6a318 100644
--- a/components/docs/statuses/meter-decimal-format-demo.tsx
+++ b/components/docs/statuses/meter-decimal-format-demo.tsx
@@ -1,14 +1,14 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { Meter } from 'ui'
+import { Meter } from "ui"
 
 export default function MeterDecimalFormatDemo() {
   return (
     <Meter
       formatOptions={{
-        style: 'decimal',
+        style: "decimal",
         minimumFractionDigits: 2,
         maximumFractionDigits: 2
       }}
diff --git a/components/docs/statuses/meter-demo.tsx b/components/docs/statuses/meter-demo.tsx
index 179dd39e..5da12c10 100644
--- a/components/docs/statuses/meter-demo.tsx
+++ b/components/docs/statuses/meter-demo.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { Meter } from 'ui'
+import { Meter } from "ui"
 
 export default function MeterDemo() {
   const [value, setValue] = React.useState(1)
diff --git a/components/docs/statuses/note-demo.tsx b/components/docs/statuses/note-demo.tsx
index ee06cace..73577993 100644
--- a/components/docs/statuses/note-demo.tsx
+++ b/components/docs/statuses/note-demo.tsx
@@ -1,10 +1,10 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { Note } from 'ui'
+import { Note } from "ui"
 
-const notes = ['info', 'primary', 'secondary', 'warning', 'danger', 'success'].map((n) => ({
+const notes = ["info", "primary", "secondary", "warning", "danger", "success"].map((n) => ({
   name: n
 }))
 
diff --git a/components/docs/statuses/note-hide-indicator-demo.tsx b/components/docs/statuses/note-hide-indicator-demo.tsx
index 93c39f6f..1b0120dd 100644
--- a/components/docs/statuses/note-hide-indicator-demo.tsx
+++ b/components/docs/statuses/note-hide-indicator-demo.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { Note } from 'ui'
+import { Note } from "ui"
 
 export default function NoteHideIndicatorDemo() {
   return (
diff --git a/components/docs/statuses/note-intent-demo.tsx b/components/docs/statuses/note-intent-demo.tsx
index e8738917..7f548a49 100644
--- a/components/docs/statuses/note-intent-demo.tsx
+++ b/components/docs/statuses/note-intent-demo.tsx
@@ -1,16 +1,16 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { OptionPreview } from '@/components/docs/outside/option-preview'
-import { Note, Select } from 'ui'
+import { OptionPreview } from "@/components/docs/outside/option-preview"
+import { Note, Select } from "ui"
 
-const notes = ['info', 'primary', 'secondary', 'warning', 'danger', 'success'].map((n) => ({
+const notes = ["info", "primary", "secondary", "warning", "danger", "success"].map((n) => ({
   name: n
 }))
 
 export default function NoteIntentDemo() {
-  const [selected, setSelected] = React.useState<any>('primary')
+  const [selected, setSelected] = React.useState<any>("primary")
   return (
     <>
       <OptionPreview>
diff --git a/components/docs/statuses/progress-bar-demo.tsx b/components/docs/statuses/progress-bar-demo.tsx
index d18e67fc..c2dfae00 100644
--- a/components/docs/statuses/progress-bar-demo.tsx
+++ b/components/docs/statuses/progress-bar-demo.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { ProgressBar } from 'ui'
+import { ProgressBar } from "ui"
 
 export default function ProgressBarDemo() {
   const [value, setValue] = React.useState(1)
diff --git a/components/docs/statuses/skeleton-demo.tsx b/components/docs/statuses/skeleton-demo.tsx
index b479c215..2e363ae7 100644
--- a/components/docs/statuses/skeleton-demo.tsx
+++ b/components/docs/statuses/skeleton-demo.tsx
@@ -1,4 +1,4 @@
-import { Card, Skeleton } from 'ui'
+import { Card, Skeleton } from "ui"
 
 export default function SkeletonDemo() {
   return (
diff --git a/components/docs/statuses/skeleton-intent-demo.tsx b/components/docs/statuses/skeleton-intent-demo.tsx
index 2c1415d2..2a659e8b 100644
--- a/components/docs/statuses/skeleton-intent-demo.tsx
+++ b/components/docs/statuses/skeleton-intent-demo.tsx
@@ -1,4 +1,4 @@
-import { Card, Skeleton } from 'ui'
+import { Card, Skeleton } from "ui"
 
 export default function SkeletonIntentDemo() {
   return (
diff --git a/components/docs/statuses/skeleton-shape-demo.tsx b/components/docs/statuses/skeleton-shape-demo.tsx
index 36be4e03..984003e6 100644
--- a/components/docs/statuses/skeleton-shape-demo.tsx
+++ b/components/docs/statuses/skeleton-shape-demo.tsx
@@ -1,4 +1,4 @@
-import { Card, Skeleton } from 'ui'
+import { Card, Skeleton } from "ui"
 
 export default function SkeletonShapeDemo() {
   return (
diff --git a/components/docs/statuses/toast-action-demo.tsx b/components/docs/statuses/toast-action-demo.tsx
index c702bc5d..277ab929 100644
--- a/components/docs/statuses/toast-action-demo.tsx
+++ b/components/docs/statuses/toast-action-demo.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { toast } from 'sonner'
-import { Button } from 'ui'
+import { toast } from "sonner"
+import { Button } from "ui"
 
 export default function ToastActionDemo() {
   return (
@@ -10,10 +10,10 @@ export default function ToastActionDemo() {
         appearance="outline"
         size="small"
         onPress={() =>
-          toast('New comment on your post!', {
+          toast("New comment on your post!", {
             action: {
-              label: 'View',
-              onClick: () => alert('Viewed')
+              label: "View",
+              onClick: () => alert("Viewed")
             }
           })
         }
@@ -24,14 +24,14 @@ export default function ToastActionDemo() {
         appearance="outline"
         size="small"
         onPress={() =>
-          toast('New comment on your post!', {
+          toast("New comment on your post!", {
             action: {
-              label: 'View',
-              onClick: () => alert('Viewed')
+              label: "View",
+              onClick: () => alert("Viewed")
             },
             cancel: {
-              label: 'Cancel',
-              onClick: () => alert('Cancelled')
+              label: "Cancel",
+              onClick: () => alert("Cancelled")
             }
           })
         }
@@ -42,10 +42,10 @@ export default function ToastActionDemo() {
         appearance="outline"
         size="small"
         onPress={() =>
-          toast('New comment on your post!', {
+          toast("New comment on your post!", {
             cancel: {
-              label: 'Cancel',
-              onClick: () => alert('Cancelled')
+              label: "Cancel",
+              onClick: () => alert("Cancelled")
             }
           })
         }
diff --git a/components/docs/statuses/toast-demo.tsx b/components/docs/statuses/toast-demo.tsx
index e65ae7b7..011192db 100644
--- a/components/docs/statuses/toast-demo.tsx
+++ b/components/docs/statuses/toast-demo.tsx
@@ -1,11 +1,11 @@
-'use client'
+"use client"
 
-import { toast } from 'sonner'
-import { Button } from 'ui'
+import { toast } from "sonner"
+import { Button } from "ui"
 
 export default function ToastDemo() {
   return (
-    <Button onPress={() => toast('The registration is successful, click here to continue.')}>
+    <Button onPress={() => toast("The registration is successful, click here to continue.")}>
       Show Toast
     </Button>
   )
diff --git a/components/docs/statuses/toast-description-demo.tsx b/components/docs/statuses/toast-description-demo.tsx
index 77c15047..e32d6efb 100644
--- a/components/docs/statuses/toast-description-demo.tsx
+++ b/components/docs/statuses/toast-description-demo.tsx
@@ -1,14 +1,14 @@
-'use client'
+"use client"
 
-import { toast } from 'sonner'
-import { Button } from 'ui'
+import { toast } from "sonner"
+import { Button } from "ui"
 
 export default function ToastDescriptionDemo() {
   return (
     <Button
       onPress={() =>
-        toast('Cart Updated', {
-          description: 'Your item’s in the cart. Tap here to check it out.'
+        toast("Cart Updated", {
+          description: "Your item’s in the cart. Tap here to check it out."
         })
       }
     >
diff --git a/components/docs/statuses/toast-positions-demo.tsx b/components/docs/statuses/toast-positions-demo.tsx
index 3834671e..eb78d143 100644
--- a/components/docs/statuses/toast-positions-demo.tsx
+++ b/components/docs/statuses/toast-positions-demo.tsx
@@ -1,15 +1,15 @@
-'use client'
+"use client"
 
-import { toast, type ToastT } from 'sonner'
-import { Button } from 'ui'
+import { toast, type ToastT } from "sonner"
+import { Button } from "ui"
 
-const positions: ToastT['position'][] = [
-  'top-left',
-  'top-right',
-  'bottom-left',
-  'bottom-right',
-  'top-center',
-  'bottom-center'
+const positions: ToastT["position"][] = [
+  "top-left",
+  "top-right",
+  "bottom-left",
+  "bottom-right",
+  "top-center",
+  "bottom-center"
 ]
 
 export default function ToastPositionsDemo() {
@@ -21,7 +21,7 @@ export default function ToastPositionsDemo() {
           size="small"
           key={position}
           onPress={() =>
-            toast('The registration is successful, click here to continue.', { position })
+            toast("The registration is successful, click here to continue.", { position })
           }
         >
           {position}
diff --git a/components/docs/statuses/toast-status-demo.tsx b/components/docs/statuses/toast-status-demo.tsx
index da7521e6..7d5f3e5e 100644
--- a/components/docs/statuses/toast-status-demo.tsx
+++ b/components/docs/statuses/toast-status-demo.tsx
@@ -1,36 +1,36 @@
-'use client'
+"use client"
 
-import { toast } from 'sonner'
-import { Button } from 'ui'
+import { toast } from "sonner"
+import { Button } from "ui"
 
 export default function ToastStatusDemo() {
   return (
     <div className="flex flex-wrap gap-3">
-      <Button appearance="outline" onPress={() => toast.error('The registration failed')}>
+      <Button appearance="outline" onPress={() => toast.error("The registration failed")}>
         Error
       </Button>
       <Button
         appearance="outline"
-        onPress={() => toast.success('The registration was successful.')}
+        onPress={() => toast.success("The registration was successful.")}
       >
         Success
       </Button>
       <Button
         appearance="outline"
-        onPress={() => toast.warning('There was an issue during registration')}
+        onPress={() => toast.warning("There was an issue during registration")}
       >
         Warning
       </Button>
-      <Button appearance="outline" onPress={() => toast.info('Email is already registered.')}>
+      <Button appearance="outline" onPress={() => toast.info("Email is already registered.")}>
         Info
       </Button>
       <Button
         appearance="outline"
         onPress={() => {
           toast.promise(wait(2000), {
-            loading: 'Deleting database...',
-            success: 'Database deleted.',
-            error: 'Failed to delete database.'
+            loading: "Deleting database...",
+            success: "Database deleted.",
+            error: "Failed to delete database."
           })
         }}
       >
diff --git a/components/docs/surfaces/card-demo.tsx b/components/docs/surfaces/card-demo.tsx
index 7e0fd855..b895c561 100644
--- a/components/docs/surfaces/card-demo.tsx
+++ b/components/docs/surfaces/card-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Button, Card } from 'ui'
+import { Button, Card } from "ui"
 
 export default function CardDemo() {
   return (
diff --git a/components/docs/surfaces/card-login-form-demo.tsx b/components/docs/surfaces/card-login-form-demo.tsx
index 635d9bb5..2a33c0ab 100644
--- a/components/docs/surfaces/card-login-form-demo.tsx
+++ b/components/docs/surfaces/card-login-form-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Button, Card, Checkbox, Link, TextField } from 'ui'
+import { Button, Card, Checkbox, Link, TextField } from "ui"
 
 export default function CardLoginFormDemo() {
   return (
diff --git a/components/docs/surfaces/card-table-demo.tsx b/components/docs/surfaces/card-table-demo.tsx
index b00986dc..d0295646 100644
--- a/components/docs/surfaces/card-table-demo.tsx
+++ b/components/docs/surfaces/card-table-demo.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { IconDotsVertical, IconEye, IconHighlight, IconTrash } from 'justd-icons'
-import { Card, Menu, Pagination, Table } from 'ui'
+import { IconDotsVertical, IconEye, IconHighlight, IconTrash } from "justd-icons"
+import { Card, Menu, Pagination, Table } from "ui"
 
 export default function CardTableDemo() {
   return (
@@ -83,73 +83,73 @@ export default function CardTableDemo() {
 const users = [
   {
     id: 1,
-    name: 'John Doe',
-    gender: 'Male',
+    name: "John Doe",
+    gender: "Male",
     age: 30,
-    occupation: 'Software Engineer'
+    occupation: "Software Engineer"
   },
   {
     id: 2,
-    name: 'Jane Smith',
-    gender: 'Female',
+    name: "Jane Smith",
+    gender: "Female",
     age: 25,
-    occupation: 'Marketing Manager'
+    occupation: "Marketing Manager"
   },
   {
     id: 3,
-    name: 'Bob Johnson',
-    gender: 'Male',
+    name: "Bob Johnson",
+    gender: "Male",
     age: 40,
-    occupation: 'Doctor'
+    occupation: "Doctor"
   },
   {
     id: 4,
-    name: 'Emily Chen',
-    gender: 'Female',
+    name: "Emily Chen",
+    gender: "Female",
     age: 28,
-    occupation: 'Teacher'
+    occupation: "Teacher"
   },
   {
     id: 5,
-    name: 'Michael Brown',
-    gender: 'Male',
+    name: "Michael Brown",
+    gender: "Male",
     age: 35,
-    occupation: 'Lawyer'
+    occupation: "Lawyer"
   },
   {
     id: 6,
-    name: 'Sarah Lee',
-    gender: 'Female',
+    name: "Sarah Lee",
+    gender: "Female",
     age: 32,
-    occupation: 'Designer'
+    occupation: "Designer"
   },
   {
     id: 7,
-    name: 'Kevin White',
-    gender: 'Male',
+    name: "Kevin White",
+    gender: "Male",
     age: 45,
-    occupation: 'CEO'
+    occupation: "CEO"
   },
   {
     id: 8,
-    name: 'Lisa Nguyen',
-    gender: 'Female',
+    name: "Lisa Nguyen",
+    gender: "Female",
     age: 29,
-    occupation: 'Engineer'
+    occupation: "Engineer"
   },
   {
     id: 9,
-    name: 'David Kim',
-    gender: 'Male',
+    name: "David Kim",
+    gender: "Male",
     age: 38,
-    occupation: 'Consultant'
+    occupation: "Consultant"
   },
   {
     id: 10,
-    name: 'Hannah Patel',
-    gender: 'Female',
+    name: "Hannah Patel",
+    gender: "Female",
     age: 26,
-    occupation: 'Writer'
+    occupation: "Writer"
   }
 ]
 const pages = Array.from({ length: users.length / 2 }, (_, i) => ({ value: i + 1 }))
diff --git a/components/docs/surfaces/grid-basic-demo.tsx b/components/docs/surfaces/grid-basic-demo.tsx
index 7ff56613..eee03ab1 100644
--- a/components/docs/surfaces/grid-basic-demo.tsx
+++ b/components/docs/surfaces/grid-basic-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Grid } from 'ui'
+import { Grid } from "ui"
 
 export default function GridBasicDemo() {
   return (
diff --git a/components/docs/surfaces/grid-debug-demo.tsx b/components/docs/surfaces/grid-debug-demo.tsx
index 2b744648..7697d0ef 100644
--- a/components/docs/surfaces/grid-debug-demo.tsx
+++ b/components/docs/surfaces/grid-debug-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Grid } from 'ui'
+import { Grid } from "ui"
 
 export default function GridDebugDemo() {
   return (
diff --git a/components/docs/surfaces/grid-gap-demo.tsx b/components/docs/surfaces/grid-gap-demo.tsx
index 69c592c0..ecdf55cd 100644
--- a/components/docs/surfaces/grid-gap-demo.tsx
+++ b/components/docs/surfaces/grid-gap-demo.tsx
@@ -1,4 +1,4 @@
-import { Grid } from 'ui'
+import { Grid } from "ui"
 
 export default function GridGapDemo() {
   return (
diff --git a/components/docs/surfaces/grid-gap-x-y-demo.tsx b/components/docs/surfaces/grid-gap-x-y-demo.tsx
index 08af655f..9d2b44cc 100644
--- a/components/docs/surfaces/grid-gap-x-y-demo.tsx
+++ b/components/docs/surfaces/grid-gap-x-y-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Grid } from 'ui'
+import { Grid } from "ui"
 
 export default function GridGapXYDemo() {
   return (
diff --git a/components/docs/surfaces/grid-item-demo.tsx b/components/docs/surfaces/grid-item-demo.tsx
index 99f0d226..10482053 100644
--- a/components/docs/surfaces/grid-item-demo.tsx
+++ b/components/docs/surfaces/grid-item-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Grid } from 'ui'
+import { Grid } from "ui"
 
 export default function GridItemDemo() {
   return (
diff --git a/components/docs/surfaces/grid-responsive-demo.tsx b/components/docs/surfaces/grid-responsive-demo.tsx
index e1f6469d..290d4436 100644
--- a/components/docs/surfaces/grid-responsive-demo.tsx
+++ b/components/docs/surfaces/grid-responsive-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Grid } from 'ui'
+import { Grid } from "ui"
 
 export default function GridResponsiveDemo() {
   return (
diff --git a/components/docs/surfaces/heading-demo.tsx b/components/docs/surfaces/heading-demo.tsx
index 17230ea6..1eaa72db 100644
--- a/components/docs/surfaces/heading-demo.tsx
+++ b/components/docs/surfaces/heading-demo.tsx
@@ -1,4 +1,4 @@
-import { Heading } from 'ui'
+import { Heading } from "ui"
 
 export default function HeadingDemo() {
   return <Heading>The quick brown fox jumps over the lazy dog</Heading>
diff --git a/components/docs/surfaces/heading-level-demo.tsx b/components/docs/surfaces/heading-level-demo.tsx
index 969e4cee..063b67f8 100644
--- a/components/docs/surfaces/heading-level-demo.tsx
+++ b/components/docs/surfaces/heading-level-demo.tsx
@@ -1,4 +1,4 @@
-import { Heading } from 'ui'
+import { Heading } from "ui"
 
 export default function HeadingLevelDemo() {
   return <Heading level={2}>The quick brown fox jumps over the lazy dog</Heading>
diff --git a/components/docs/surfaces/separator-demo.tsx b/components/docs/surfaces/separator-demo.tsx
index d515a497..80cec305 100644
--- a/components/docs/surfaces/separator-demo.tsx
+++ b/components/docs/surfaces/separator-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Separator } from 'ui'
+import { Separator } from "ui"
 
 export default function SeparatorDemo() {
   return <Separator />
diff --git a/components/docs/surfaces/show-more-demo.tsx b/components/docs/surfaces/show-more-demo.tsx
index 2db43835..954d6be9 100644
--- a/components/docs/surfaces/show-more-demo.tsx
+++ b/components/docs/surfaces/show-more-demo.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import * as React from 'react'
+import * as React from "react"
 
-import { IconChevronLgDown } from 'justd-icons'
-import { cn, ShowMore } from 'ui'
+import { IconChevronLgDown } from "justd-icons"
+import { cn, ShowMore } from "ui"
 
 export default function ShowMoreDemo() {
   return (
@@ -11,11 +11,11 @@ export default function ShowMoreDemo() {
       <ShowMore>
         {({ isSelected }) => (
           <>
-            Show {isSelected ? 'less' : 'more'}
+            Show {isSelected ? "less" : "more"}
             <IconChevronLgDown
               className={cn(
-                isSelected ? 'rotate-180' : '',
-                'size-4 transition-transform duration-200'
+                isSelected ? "rotate-180" : "",
+                "size-4 transition-transform duration-200"
               )}
             />
           </>
diff --git a/components/footer.tsx b/components/footer.tsx
index 153c7245..ae4402f1 100644
--- a/components/footer.tsx
+++ b/components/footer.tsx
@@ -1,38 +1,38 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { siteConfig } from '@/resources/config/site'
-import { Container, Link } from 'ui'
+import { siteConfig } from "@/resources/config/site"
+import { Container, Link } from "ui"
 
 export function Footer() {
   return (
     <footer className="px-4 lg:[&_p]:mt-1 [&_strong]:font-medium [&_a]:font-medium border-t py-4 sm:py-8 lg:py-10 [&_strong]:text-fg [&_a]:text-fg text-muted-fg text-xs text-center lg:text-left lg:text-sm">
       <Container>
         <p>
-          <strong>{siteConfig.name} &trade; 2024</strong> - This project’s crafted with{' '}
-          <span className="font-[ui-sans-serif,-apple-system,system-ui] text-pink-500">♥</span> by{' '}
-          <Link href="https://twitter.com/irsyadadl">Irsyad</Link>. Peep the Source Code on{' '}
+          <strong>{siteConfig.name} &trade; 2024</strong> - This project’s crafted with{" "}
+          <span className="font-[ui-sans-serif,-apple-system,system-ui] text-pink-500">♥</span> by{" "}
+          <Link href="https://twitter.com/irsyadadl">Irsyad</Link>. Peep the Source Code on{" "}
           <Link href={siteConfig.repo}>GitHub</Link>.
         </p>
 
         <p>
-          Cooked up with <strong>Next.js</strong>,{' '}
+          Cooked up with <strong>Next.js</strong>,{" "}
           <Link href="https://tailwindcss.com" target="_blank">
             Tailwind CSS
           </Link>
-          , and{' '}
+          , and{" "}
           <Link href="https://react-spectrum.adobe.com/react-aria/components.html" target="_blank">
             RAC
           </Link>
           .
         </p>
         <p>
-          Hosted on{' '}
+          Hosted on{" "}
           <Link href="https://vercel.com" target="_blank">
             Vercel
           </Link>
-          . The source code's got the{' '}
+          . The source code's got the{" "}
           <Link href="https://github.com/justdlabs/justd/blob/main/LICENSE">MIT</Link> license.
         </p>
       </Container>
diff --git a/components/hero.tsx b/components/hero.tsx
index 0956f3d7..693bdaf3 100644
--- a/components/hero.tsx
+++ b/components/hero.tsx
@@ -1,10 +1,10 @@
-'use client'
+"use client"
 
-import { siteConfig } from '@/resources/config/site'
-import { IconBrandD, IconCube, IconStar } from 'justd-icons'
-import Link from 'next/link'
-import { Header, Text } from 'react-aria-components'
-import { buttonStyles, Container } from 'ui'
+import { siteConfig } from "@/resources/config/site"
+import { IconBrandD, IconCube, IconStar } from "justd-icons"
+import Link from "next/link"
+import { Header, Text } from "react-aria-components"
+import { buttonStyles, Container } from "ui"
 
 export function Hero() {
   return (
@@ -16,7 +16,7 @@ export function Hero() {
         <div
           style={{
             clipPath:
-              'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)'
+              "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"
           }}
           className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-lime-500 to-primary-500 opacity-10 dark:opacity-[0.17] sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
         />
@@ -51,10 +51,10 @@ export function Hero() {
               target="_blank"
               href={siteConfig.repo}
               className={buttonStyles({
-                size: 'extra-small',
-                intent: 'light',
-                shape: 'circle',
-                className: '[&_[data-slot=icon]]:text-warning'
+                size: "extra-small",
+                intent: "light",
+                shape: "circle",
+                className: "[&_[data-slot=icon]]:text-warning"
               })}
             >
               <IconStar /> Stars sustain energy
@@ -69,7 +69,7 @@ export function Hero() {
               <strong className="text-fg">{siteConfig.name}</strong> is a chill set of React
               components, built on top of <strong className="text-fg">React Aria Components</strong>
               , all about keeping the web accessible. Easy to customize and just copy & paste into
-              your React projects. Plus, it includes{' '}
+              your React projects. Plus, it includes{" "}
               <strong className="text-fg">Tailwind CSS</strong> for sleek styling right out of the
               box.
             </Text>
@@ -77,7 +77,7 @@ export function Hero() {
           <div className="mt-6 space-x-2">
             <Link
               className={buttonStyles({
-                size: 'large'
+                size: "large"
               })}
               href="/docs/getting-started/installation"
             >
@@ -86,8 +86,8 @@ export function Hero() {
             </Link>
             <Link
               className={buttonStyles({
-                size: 'large',
-                intent: 'light'
+                size: "large",
+                intent: "light"
               })}
               href="/components"
             >
diff --git a/components/logo.tsx b/components/logo.tsx
index eeef0aba..a61f38fd 100644
--- a/components/logo.tsx
+++ b/components/logo.tsx
@@ -1,4 +1,4 @@
-import type { SVGProps } from 'react'
+import type { SVGProps } from "react"
 
 interface Props extends SVGProps<SVGSVGElement> {}
 
diff --git a/components/pager.tsx b/components/pager.tsx
index d555fe96..1f07718b 100644
--- a/components/pager.tsx
+++ b/components/pager.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import { cn } from '@/resources/lib/utils'
-import { IconChevronLgLeft, IconChevronLgRight } from 'justd-icons'
-import Link from 'next/link'
-import { buttonStyles } from 'ui'
+import { cn } from "@/resources/lib/utils"
+import { IconChevronLgLeft, IconChevronLgRight } from "justd-icons"
+import Link from "next/link"
+import { buttonStyles } from "ui"
 
 interface Doc {
   order: number
@@ -30,8 +30,8 @@ const getPagerForDoc = (docs: Doc[], doc: Doc) => {
 
 export function Pager({ docs, doc }: { docs: Doc[]; doc: Doc }) {
   const groupedAndSortedDocs = docs.sort((a, b) => {
-    const groupA = a.slug.split('/')[2]
-    const groupB = b.slug.split('/')[2]
+    const groupA = a.slug.split("/")[2]
+    const groupB = b.slug.split("/")[2]
 
     if (groupA === groupB) {
       return a.order - b.order
@@ -52,7 +52,7 @@ export function Pager({ docs, doc }: { docs: Doc[]; doc: Doc }) {
         <Link
           aria-label={`Previous page: ${pager.prev.title}`}
           href={pager.prev.href}
-          className={buttonStyles({ appearance: 'outline' })}
+          className={buttonStyles({ appearance: "outline" })}
         >
           <IconChevronLgLeft />
           {pager.prev.title}
@@ -62,7 +62,7 @@ export function Pager({ docs, doc }: { docs: Doc[]; doc: Doc }) {
         <Link
           aria-label={`Next page: ${pager.next.title}`}
           href={pager.next.href}
-          className={cn(buttonStyles({ appearance: 'outline' }), 'ml-auto')}
+          className={cn(buttonStyles({ appearance: "outline" }), "ml-auto")}
         >
           {pager.next.title}
           <IconChevronLgRight />
diff --git a/components/ui/accordion.tsx b/components/ui/accordion.tsx
index 5fb239bd..c784479b 100644
--- a/components/ui/accordion.tsx
+++ b/components/ui/accordion.tsx
@@ -1,16 +1,16 @@
-'use client'
+"use client"
 
-import * as React from 'react'
+import * as React from "react"
 
-import type { MotionProps } from 'framer-motion'
-import { AnimatePresence, motion } from 'framer-motion'
-import { IconChevronDown } from 'justd-icons'
-import type { ButtonProps } from 'react-aria-components'
-import { Button } from 'react-aria-components'
-import { twMerge } from 'tailwind-merge'
-import { tv } from 'tailwind-variants'
+import type { MotionProps } from "framer-motion"
+import { AnimatePresence, motion } from "framer-motion"
+import { IconChevronDown } from "justd-icons"
+import type { ButtonProps } from "react-aria-components"
+import { Button } from "react-aria-components"
+import { twMerge } from "tailwind-merge"
+import { tv } from "tailwind-variants"
 
-import { cn, cr } from './primitive'
+import { cn, cr } from "./primitive"
 
 interface AccordionContextType extends React.HtmlHTMLAttributes<HTMLDivElement> {
   hideBorder?: boolean
@@ -44,7 +44,7 @@ const Accordion = ({
 }
 
 const accordionItemStyles = tv({
-  base: 'zwx3ai flex group pb-3 relative w-full flex-col border-b'
+  base: "zwx3ai flex group pb-3 relative w-full flex-col border-b"
 })
 
 interface AccordionItemContextProps {
@@ -57,7 +57,7 @@ const AccordionItemContext = React.createContext<AccordionItemContextProps | und
 const useAccordionItem = () => {
   const context = React.useContext(AccordionItemContext)
   if (!context) {
-    throw new Error('AccordionItem must be used within an Accordion')
+    throw new Error("AccordionItem must be used within an Accordion")
   }
   return context
 }
@@ -98,12 +98,12 @@ const AccordionContent = ({ className, children }: AccordionContentProps) => {
     <AnimatePresence initial={false}>
       {isOpen && (
         <motion.section
-          className={cn('overflow-hidden pr-6 dk32xd', className)}
+          className={cn("overflow-hidden pr-6 dk32xd", className)}
           initial="collapsed"
           animate="open"
           exit="collapsed"
           variants={{
-            open: { opacity: 1, height: 'initial' },
+            open: { opacity: 1, height: "initial" },
             collapsed: { opacity: 0, height: 0 }
           }}
           transition={{ duration: 0.4, ease: [0.04, 0.62, 0.23, 0.98] }}
@@ -116,23 +116,23 @@ const AccordionContent = ({ className, children }: AccordionContentProps) => {
 }
 
 interface AccordionTriggerProps
-  extends Omit<ButtonProps & React.RefAttributes<HTMLButtonElement> & MotionProps, 'ref'> {
+  extends Omit<ButtonProps & React.RefAttributes<HTMLButtonElement> & MotionProps, "ref"> {
   children: React.ReactNode
 }
 
 const accordionTriggerStyles = tv({
   base: [
-    'flex flex-1 rounded-lg text-muted-fg hover:text-fg [&>[data-slot=icon]]:size-6 items-center gap-x-2 pt-3 font-medium'
+    "flex flex-1 rounded-lg text-muted-fg hover:text-fg [&>[data-slot=icon]]:size-6 items-center gap-x-2 pt-3 font-medium"
   ],
   variants: {
     isFocused: {
-      true: 'outline-none text-fg'
+      true: "outline-none text-fg"
     },
     isOpen: {
-      true: 'text-fg'
+      true: "text-fg"
     },
     isDisabled: {
-      true: 'opacity-50 cursor-default'
+      true: "opacity-50 cursor-default"
     }
   }
 })
@@ -149,13 +149,13 @@ const AccordionTrigger = ({ className, children, ...props }: AccordionTriggerPro
   }
 
   const onKeyDownHandler = (e: React.KeyboardEvent<HTMLButtonElement>) => {
-    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
       e.preventDefault()
       const buttons = document.querySelectorAll('div[data-slot="ai-31kxlae0321lsd"] > button')
       const currentButton = e.currentTarget
       const currentIndex = Array.from(buttons).indexOf(currentButton)
       const totalItems = buttons.length
-      let nextIndex = currentIndex + (e.key === 'ArrowDown' ? 1 : -1)
+      let nextIndex = currentIndex + (e.key === "ArrowDown" ? 1 : -1)
 
       if (nextIndex >= totalItems) {
         nextIndex = 0
@@ -185,8 +185,8 @@ const AccordionTrigger = ({ className, children, ...props }: AccordionTriggerPro
       {!hideIndicator && (
         <IconChevronDown
           className={twMerge(
-            'ml-auto transition duration-300 group-disabled:rotate-0',
-            isOpen ? 'rotate-180' : 'rotate-0'
+            "ml-auto transition duration-300 group-disabled:rotate-0",
+            isOpen ? "rotate-180" : "rotate-0"
           )}
         />
       )}
diff --git a/components/ui/avatar.tsx b/components/ui/avatar.tsx
index 12b274de..45454946 100644
--- a/components/ui/avatar.tsx
+++ b/components/ui/avatar.tsx
@@ -1,13 +1,13 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { tv, type VariantProps } from 'tailwind-variants'
+import { tv, type VariantProps } from "tailwind-variants"
 
-import { VisuallyHidden } from './visually-hidden'
+import { VisuallyHidden } from "./visually-hidden"
 
 const avatarGroupStyles = tv({
-  base: 'flex items-center justify-center -space-x-2 [&_[data-slot=avatar]]:ring-2 [&_[data-slot=avatar]]:ring-background'
+  base: "flex items-center justify-center -space-x-2 [&_[data-slot=avatar]]:ring-2 [&_[data-slot=avatar]]:ring-background"
 })
 
 interface AvatarGroupProps
@@ -22,32 +22,32 @@ const AvatarGroup = ({ className, ...props }: AvatarGroupProps) => {
 
 const avatarStyles = tv({
   base: [
-    'inline-grid relative shrink-0 bg-secondary align-middle [--avatar-radius:20%] [--ring-opacity:20%] *:col-start-1 *:row-start-1',
-    'loo2ppvkxrcah38e outline outline-1 -outline-offset-1 outline-black/[--ring-opacity] dark:outline-white/[--ring-opacity]'
+    "inline-grid relative shrink-0 bg-secondary align-middle [--avatar-radius:20%] [--ring-opacity:20%] *:col-start-1 *:row-start-1",
+    "loo2ppvkxrcah38e outline outline-1 -outline-offset-1 outline-black/[--ring-opacity] dark:outline-white/[--ring-opacity]"
   ],
   variants: {
     size: {
-      small: 'size-6',
-      medium: 'size-8',
-      large: 'size-10'
+      small: "size-6",
+      medium: "size-8",
+      large: "size-10"
     },
     shape: {
       square:
-        'rounded-[--avatar-radius] *:rounded-[--avatar-radius] [&_[data-slot=badge]]:rounded-full',
-      circle: 'rounded-full *:rounded-full'
+        "rounded-[--avatar-radius] *:rounded-[--avatar-radius] [&_[data-slot=badge]]:rounded-full",
+      circle: "rounded-full *:rounded-full"
     }
   },
 
   defaultVariants: {
-    shape: 'circle',
-    size: 'medium'
+    shape: "circle",
+    size: "medium"
   }
 })
 
-type Status = 'away' | 'online' | 'offline' | 'dnd' | 'idle'
+type Status = "away" | "online" | "offline" | "dnd" | "idle"
 
 interface AvatarProps
-  extends React.ComponentPropsWithoutRef<'span'>,
+  extends React.ComponentPropsWithoutRef<"span">,
     VariantProps<typeof avatarStyles> {
   src?: string | null
   initials?: string
@@ -61,16 +61,16 @@ const Avatar = ({
   status,
   src = null,
   initials,
-  alt = '',
+  alt = "",
   children,
   className,
   shape,
   size,
-  role = 'avatar',
+  role = "avatar",
   ...props
 }: AvatarProps) => {
   const badgeId = React.useId()
-  const ariaLabelledby = [badgeId, children ? badgeId : ''].join(' ')
+  const ariaLabelledby = [badgeId, children ? badgeId : ""].join(" ")
   return (
     <span
       aria-labelledby={ariaLabelledby}
@@ -83,7 +83,7 @@ const Avatar = ({
         <svg
           className="select-none fill-current text-[48px] font-medium uppercase"
           viewBox="0 0 100 100"
-          aria-hidden={alt ? undefined : 'true'}
+          aria-hidden={alt ? undefined : "true"}
         >
           {alt && <title>{alt}</title>}
           <text
@@ -108,31 +108,31 @@ type AvatarBadgeProps = {
   className?: string
   status?: Status
   fillBackground?: boolean
-  'aria-label': string
-  size?: AvatarProps['size']
+  "aria-label": string
+  size?: AvatarProps["size"]
 }
 
 const avatarBadgeStyles = tv({
   base: [
-    'size-3 z-1 absolute bottom-0 right-0 z-10 rounded-full ring-[1.5px] ring-background bg-background'
+    "size-3 z-1 absolute bottom-0 right-0 z-10 rounded-full ring-[1.5px] ring-background bg-background"
   ],
   variants: {
     size: {
-      small: 'size-1.5 translate-x-[0%] translate-y-[0%]',
-      medium: 'size-2 translate-x-[5%] translate-y-[5%]',
-      large: 'size-2.5 translate-x-[5%] translate-y-[5%]'
+      small: "size-1.5 translate-x-[0%] translate-y-[0%]",
+      medium: "size-2 translate-x-[5%] translate-y-[5%]",
+      large: "size-2.5 translate-x-[5%] translate-y-[5%]"
     },
     status: {
-      away: 'bg-red-500',
-      online: 'bg-green-500',
-      offline: 'bg-gray-500',
-      dnd: 'bg-yellow-500',
-      idle: 'bg-gray-500'
+      away: "bg-red-500",
+      online: "bg-green-500",
+      offline: "bg-gray-500",
+      dnd: "bg-yellow-500",
+      idle: "bg-gray-500"
     }
   },
   defaultVariants: {
-    size: 'medium',
-    status: 'idle'
+    size: "medium",
+    status: "idle"
   }
 })
 
diff --git a/components/ui/badge.tsx b/components/ui/badge.tsx
index c46566af..457edb46 100644
--- a/components/ui/badge.tsx
+++ b/components/ui/badge.tsx
@@ -1,37 +1,37 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { tv, type VariantProps } from 'tailwind-variants'
+import { tv, type VariantProps } from "tailwind-variants"
 
 const badgeIntents = {
   primary:
-    'ring-primary/30 bg-primary/10 dark:bg-primary/20 text-primary dark:text-primary-300 hover:bg-primary/15 dark:hover:bg-primary/10',
-  secondary: 'bg-secondary/50 dark:bg-secondary/70 ring-secondary-fg/20 text-secondary-fg',
+    "ring-primary/30 bg-primary/10 dark:bg-primary/20 text-primary dark:text-primary-300 hover:bg-primary/15 dark:hover:bg-primary/10",
+  secondary: "bg-secondary/50 dark:bg-secondary/70 ring-secondary-fg/20 text-secondary-fg",
   success:
-    'dark:ring-success/30 ring-success/40 bg-success/10 dark:bg-success/15 text-success hover:bg-success/15 dark:hover:bg-success/10',
-  info: 'dark:ring-info/30 ring-info/80 bg-info/20 dark:bg-info/15 text-info-fg dark:text-info hover:bg-info/15 dark:hover:bg-info/10',
+    "dark:ring-success/30 ring-success/40 bg-success/10 dark:bg-success/15 text-success hover:bg-success/15 dark:hover:bg-success/10",
+  info: "dark:ring-info/30 ring-info/80 bg-info/20 dark:bg-info/15 text-info-fg dark:text-info hover:bg-info/15 dark:hover:bg-info/10",
   warning:
-    'dark:ring-warning/40 ring-warning/50 bg-warning/10 dark:bg-warning/15 text-warning-fg dark:text-warning hover:bg-warning/15 dark:hover:bg-warning/10',
+    "dark:ring-warning/40 ring-warning/50 bg-warning/10 dark:bg-warning/15 text-warning-fg dark:text-warning hover:bg-warning/15 dark:hover:bg-warning/10",
   danger:
-    'dark:ring-danger/30 ring-danger/40 bg-danger/10 dark:bg-danger/15 text-danger hover:bg-danger/15 dark:hover:bg-danger/10',
+    "dark:ring-danger/30 ring-danger/40 bg-danger/10 dark:bg-danger/15 text-danger hover:bg-danger/15 dark:hover:bg-danger/10",
   light:
-    'ring-zinc-300 dark:ring-white bg-white hover:bg-zinc-100 dark:hover:bg-zinc-200 dark:ring-inset text-zinc-900 dark:text-zinc-900',
-  dark: 'bg-zinc-800 hover:bg-zinc-800/90 ring-inset ring-zinc-800 text-white dark:ring-zinc-600'
+    "ring-zinc-300 dark:ring-white bg-white hover:bg-zinc-100 dark:hover:bg-zinc-200 dark:ring-inset text-zinc-900 dark:text-zinc-900",
+  dark: "bg-zinc-800 hover:bg-zinc-800/90 ring-inset ring-zinc-800 text-white dark:ring-zinc-600"
 }
 const badgeShapes = {
-  square: 'rounded-md px-1.5',
-  circle: 'px-2 rounded-full'
+  square: "rounded-md px-1.5",
+  circle: "px-2 rounded-full"
 }
 const badgeStyles = tv({
-  base: 'inline-flex items-center gap-x-1.5 py-0.5 text-xs/5 font-medium ring-1 ring-white/10 dark:ring-inset forced-colors:outline [&_[data-slot=icon]]:size-3',
+  base: "inline-flex items-center gap-x-1.5 py-0.5 text-xs/5 font-medium ring-1 ring-white/10 dark:ring-inset forced-colors:outline [&_[data-slot=icon]]:size-3",
   variants: {
     intent: { ...badgeIntents },
     shape: { ...badgeShapes }
   },
   defaultVariants: {
-    intent: 'primary',
-    shape: 'square'
+    intent: "primary",
+    shape: "square"
   }
 })
 
diff --git a/components/ui/breadcrumbs.tsx b/components/ui/breadcrumbs.tsx
index e42404e2..a2eaed5c 100644
--- a/components/ui/breadcrumbs.tsx
+++ b/components/ui/breadcrumbs.tsx
@@ -1,25 +1,25 @@
-'use client'
+"use client"
 
-import { IconChevronRight } from 'justd-icons'
-import type { BreadcrumbProps, BreadcrumbsProps } from 'react-aria-components'
+import { IconChevronRight } from "justd-icons"
+import type { BreadcrumbProps, BreadcrumbsProps } from "react-aria-components"
 import {
   Breadcrumb as BreadcrumbPrimitive,
   Breadcrumbs as BreadcrumbsPrimitive,
   type LinkProps
-} from 'react-aria-components'
+} from "react-aria-components"
 
-import { Link } from './link'
-import { cn } from './primitive'
+import { Link } from "./link"
+import { cn } from "./primitive"
 
 const Breadcrumbs = <T extends object>({ className, ...props }: BreadcrumbsProps<T>) => {
-  return <BreadcrumbsPrimitive {...props} className={cn('flex gap-1', className)} />
+  return <BreadcrumbsPrimitive {...props} className={cn("flex gap-1", className)} />
 }
 
 const Breadcrumb = ({ className, ...props }: BreadcrumbProps & LinkProps) => {
   return (
-    <BreadcrumbPrimitive {...props} className={cn('flex items-center gap-1', className)}>
+    <BreadcrumbPrimitive {...props} className={cn("flex items-center gap-1", className)}>
       <Link href={props.href} {...props} />
-      {'href' in props && <IconChevronRight className="size-4 shrink-0 text-muted-fg" />}
+      {"href" in props && <IconChevronRight className="size-4 shrink-0 text-muted-fg" />}
     </BreadcrumbPrimitive>
   )
 }
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
index ba9b5846..77fb66bc 100644
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@@ -1,140 +1,140 @@
-'use client'
+"use client"
 
-import * as React from 'react'
+import * as React from "react"
 
 import {
   Button as ButtonPrimitive,
   type ButtonProps as ButtonPrimitiveProps
-} from 'react-aria-components'
-import { tv } from 'tailwind-variants'
+} from "react-aria-components"
+import { tv } from "tailwind-variants"
 
-import { cr, focusButtonStyles } from './primitive'
+import { cr, focusButtonStyles } from "./primitive"
 
 const buttonStyles = tv(
   {
     extend: focusButtonStyles,
     base: [
-      'kbt32x relative no-underline isolate inline-flex items-center justify-center gap-x-2 border font-medium',
-      'forced-colors:[--btn-icon:ButtonText] forced-colors:hover:[--btn-icon:ButtonText] [&>[data-slot=icon]]:-mx-0.5 [&>[data-slot=icon]]:my-1 [&>[data-slot=icon]]:size-4 [&>[data-slot=icon]]:shrink-0 [&>[data-slot=icon]]:text-[--btn-icon]'
+      "kbt32x relative no-underline isolate inline-flex items-center justify-center gap-x-2 border font-medium",
+      "forced-colors:[--btn-icon:ButtonText] forced-colors:hover:[--btn-icon:ButtonText] [&>[data-slot=icon]]:-mx-0.5 [&>[data-slot=icon]]:my-1 [&>[data-slot=icon]]:size-4 [&>[data-slot=icon]]:shrink-0 [&>[data-slot=icon]]:text-[--btn-icon]"
     ],
     variants: {
       intent: {
         primary: [
-          'text-white [--btn-bg:theme(colors.primary.DEFAULT)] [--btn-border:theme(colors.primary.DEFAULT)] [--btn-hover-overlay:theme(colors.white/10%)]',
-          '[--btn-icon:theme(colors.primary.fg/60%)] active:[--btn-icon:theme(colors.primary.fg/80%)] hover:[--btn-icon:theme(colors.primary.fg/80%)]'
+          "text-primary-fg [--btn-bg:theme(colors.primary.DEFAULT)] [--btn-border:theme(colors.primary.DEFAULT)] [--btn-hover-overlay:theme(colors.white/10%)]",
+          "[--btn-icon:theme(colors.primary.fg/60%)] active:[--btn-icon:theme(colors.primary.fg/80%)] hover:[--btn-icon:theme(colors.primary.fg/80%)]"
         ],
         secondary: [
-          'text-secondary-fg [--btn-bg:white] dark:[--btn-bg:theme(colors.secondary.DEFAULT)] [--btn-border:theme(colors.secondary.fg/10%)] [--btn-hover-overlay:theme(colors.secondary.fg/2.5%)] data-[active]:[--btn-border:theme(colors.secondary.fg/15%)] hover:[--btn-border:theme(colors.secondary.fg/15%)]',
-          '[--btn-icon:theme(colors.muted.fg)] active:[--btn-icon:theme(colors.fg)] hover:[--btn-icon:theme(colors.fg)]'
+          "text-secondary-fg [--btn-bg:white] dark:[--btn-bg:theme(colors.secondary.DEFAULT)] [--btn-border:theme(colors.secondary.fg/10%)] [--btn-hover-overlay:theme(colors.secondary.fg/2.5%)] data-[active]:[--btn-border:theme(colors.secondary.fg/15%)] hover:[--btn-border:theme(colors.secondary.fg/15%)]",
+          "[--btn-icon:theme(colors.muted.fg)] active:[--btn-icon:theme(colors.fg)] hover:[--btn-icon:theme(colors.fg)]"
         ],
         success: [
-          'text-white [--btn-bg:theme(colors.success.DEFAULT)] [--btn-border:theme(colors.success.DEFAULT)] [--btn-hover-overlay:theme(colors.white/10%)]',
-          '[--btn-icon:theme(colors.white/60%)] active:[--btn-icon:theme(colors.white/80%)] hover:[--btn-icon:theme(colors.white/80%)]'
+          "text-white [--btn-bg:theme(colors.success.DEFAULT)] [--btn-border:theme(colors.success.DEFAULT)] [--btn-hover-overlay:theme(colors.white/10%)]",
+          "[--btn-icon:theme(colors.white/60%)] active:[--btn-icon:theme(colors.white/80%)] hover:[--btn-icon:theme(colors.white/80%)]"
         ],
-        'light/dark': [
-          'text-background [--btn-bg:theme(colors.dark)] [--btn-border:theme(colors.dark/90%)] [--btn-hover-overlay:theme(colors.white/10%)]',
-          'dark:[--btn-bg:white] dark:[--btn-hover-overlay:theme(colors.dark/5%)]',
-          '[--btn-icon:theme(colors.muted.fg)] active:[--btn-icon:theme(colors.background/85%)] hover:[--btn-icon:theme(colors.background/85%)]'
+        "light/dark": [
+          "text-background [--btn-bg:theme(colors.dark)] [--btn-border:theme(colors.dark/90%)] [--btn-hover-overlay:theme(colors.white/10%)]",
+          "dark:[--btn-bg:white] dark:[--btn-hover-overlay:theme(colors.dark/5%)]",
+          "[--btn-icon:theme(colors.muted.fg)] active:[--btn-icon:theme(colors.background/85%)] hover:[--btn-icon:theme(colors.background/85%)]"
         ],
         dark: [
-          'text-light [--btn-bg:theme(colors.dark)] [--btn-border:theme(colors.dark)] [--btn-hover-overlay:theme(colors.light/2.5%)]',
-          '[--btn-icon:theme(colors.light/60%)] active:[--btn-icon:theme(colors.light/80%)] hover:[--btn-icon:theme(colors.light/80%)]'
+          "text-light [--btn-bg:theme(colors.dark)] [--btn-border:theme(colors.dark)] [--btn-hover-overlay:theme(colors.light/2.5%)]",
+          "[--btn-icon:theme(colors.light/60%)] active:[--btn-icon:theme(colors.light/80%)] hover:[--btn-icon:theme(colors.light/80%)]"
         ],
         light: [
-          'text-dark [--btn-bg:white] [--btn-border:theme(colors.dark/10%)] [--btn-hover-overlay:theme(colors.dark/2.5%)] active:[--btn-border:theme(colors.dark/15%)] hover:[--btn-border:theme(colors.dark/15%)]',
-          '[--btn-icon:theme(colors.dark/60%)] active:[--btn-icon:theme(colors.dark/80%)] hover:[--btn-icon:theme(colors.dark/80%)]'
+          "text-dark [--btn-bg:white] [--btn-border:theme(colors.dark/10%)] [--btn-hover-overlay:theme(colors.dark/2.5%)] active:[--btn-border:theme(colors.dark/15%)] hover:[--btn-border:theme(colors.dark/15%)]",
+          "[--btn-icon:theme(colors.dark/60%)] active:[--btn-icon:theme(colors.dark/80%)] hover:[--btn-icon:theme(colors.dark/80%)]"
         ],
         info: [
-          'text-info-fg [--btn-bg:theme(colors.info.DEFAULT)] [--btn-border:theme(colors.info.DEFAULT/80%)] [--btn-hover-overlay:theme(colors.white/25%)]',
-          '[--btn-icon:theme(colors.info.fg/60%)] active:[--btn-icon:theme(colors.info.fg/80%)] hover:[--btn-icon:theme(colors.info.fg/80%)]'
+          "text-info-fg [--btn-bg:theme(colors.info.DEFAULT)] [--btn-border:theme(colors.info.DEFAULT/80%)] [--btn-hover-overlay:theme(colors.white/25%)]",
+          "[--btn-icon:theme(colors.info.fg/60%)] active:[--btn-icon:theme(colors.info.fg/80%)] hover:[--btn-icon:theme(colors.info.fg/80%)]"
         ],
         warning: [
-          'text-warning-fg [--btn-bg:theme(colors.warning.DEFAULT)] [--btn-border:theme(colors.warning.DEFAULT)] [--btn-hover-overlay:theme(colors.white/10%)]',
-          '[--btn-icon:theme(colors.warning.fg/60%)] active:[--btn-icon:theme(colors.warning.fg/80%)] hover:[--btn-icon:theme(colors.warning.fg/80%)]'
+          "text-warning-fg [--btn-bg:theme(colors.warning.DEFAULT)] [--btn-border:theme(colors.warning.DEFAULT)] [--btn-hover-overlay:theme(colors.white/10%)]",
+          "[--btn-icon:theme(colors.warning.fg/60%)] active:[--btn-icon:theme(colors.warning.fg/80%)] hover:[--btn-icon:theme(colors.warning.fg/80%)]"
         ],
         danger: [
-          'text-white [--btn-bg:theme(colors.danger.DEFAULT)] [--btn-border:theme(colors.danger.DEFAULT)] [--btn-hover-overlay:theme(colors.white/10%)]',
-          '[--btn-icon:theme(colors.white/60%)] active:[--btn-icon:theme(colors.white/80%)] hover:[--btn-icon:theme(colors.white/80%)]'
+          "text-white [--btn-bg:theme(colors.danger.DEFAULT)] [--btn-border:theme(colors.danger.DEFAULT)] [--btn-hover-overlay:theme(colors.white/10%)]",
+          "[--btn-icon:theme(colors.white/60%)] active:[--btn-icon:theme(colors.white/80%)] hover:[--btn-icon:theme(colors.white/80%)]"
         ]
       },
       appearance: {
         solid:
-          'border-transparent bg-[--btn-border] dark:bg-[--btn-bg] before:absolute before:inset-0 before:-z-10 before:bg-[--btn-bg] before:shadow dark:before:hidden dark:border-white/5 after:absolute after:inset-0 after:-z-10 after:shadow-[shadow:inset_0_1px_theme(colors.white/15%)] after:active:bg-[--btn-hover-overlay] after:hover:bg-[--btn-hover-overlay] dark:after:-inset-px before:data-[disabled]:shadow-none after:data-[disabled]:shadow-none',
+          "border-transparent bg-[--btn-border] dark:bg-[--btn-bg] before:absolute before:inset-0 before:-z-10 before:bg-[--btn-bg] before:shadow dark:before:hidden dark:border-white/5 after:absolute after:inset-0 after:-z-10 after:shadow-[shadow:inset_0_1px_theme(colors.white/15%)] after:active:bg-[--btn-hover-overlay] after:hover:bg-[--btn-hover-overlay] dark:after:-inset-px before:data-[disabled]:shadow-none after:data-[disabled]:shadow-none",
         outline:
-          'border-border hover:bg-secondary/90 active:bg-secondary/90 text-fg [--btn-icon:theme(colors.zinc.400)] active:[--btn-icon:theme(colors.fg)] hover:[--btn-icon:theme(colors.fg)]',
+          "border-border hover:bg-secondary/90 active:bg-secondary/90 text-fg [--btn-icon:theme(colors.zinc.400)] active:[--btn-icon:theme(colors.fg)] hover:[--btn-icon:theme(colors.fg)]",
         plain:
-          'border-transparent text-fg pressed:bg-secondary/90 active:bg-secondary/90 hover:bg-secondary/90 [--btn-icon:theme(colors.muted.fg)] active:[--btn-icon:theme(colors.fg)] hover:[--btn-icon:theme(colors.fg)]'
+          "border-transparent text-fg pressed:bg-secondary/90 active:bg-secondary/90 hover:bg-secondary/90 [--btn-icon:theme(colors.muted.fg)] active:[--btn-icon:theme(colors.fg)] hover:[--btn-icon:theme(colors.fg)]"
       },
       size: {
-        'extra-small':
-          'h-8 px-[calc(theme(spacing.3)-1px)] py-[calc(theme(spacing.1)-1px)] text-xs/4 lg:text-[0.800rem]/4',
+        "extra-small":
+          "h-8 px-[calc(theme(spacing.3)-1px)] py-[calc(theme(spacing.1)-1px)] text-xs/4 lg:text-[0.800rem]/4",
         small:
-          'h-9 px-[calc(theme(spacing.4)-1px)] py-[calc(theme(spacing[1.5])-1px)] text-sm/5 lg:text-sm/5',
+          "h-9 px-[calc(theme(spacing.4)-1px)] py-[calc(theme(spacing[1.5])-1px)] text-sm/5 lg:text-sm/5",
         medium:
-          'h-10 px-[calc(theme(spacing.4)-1px)] py-[calc(theme(spacing.2)-1px)] text-base lg:text-sm/6',
+          "h-10 px-[calc(theme(spacing.4)-1px)] py-[calc(theme(spacing.2)-1px)] text-base lg:text-sm/6",
         large:
-          'h-10 sm:h-11 px-[calc(theme(spacing.4)-1px)] sm:px-[calc(theme(spacing.5)-1px)] py-[calc(theme(spacing[2.5])-1px)] text-base lg:text-base/7 sm:[&>[data-slot=icon]]:size-5',
-        'square-petite': 'size-9 shrink-0 [&_[data-slot=icon]]:text-current'
+          "h-10 sm:h-11 px-[calc(theme(spacing.4)-1px)] sm:px-[calc(theme(spacing.5)-1px)] py-[calc(theme(spacing[2.5])-1px)] text-base lg:text-base/7 sm:[&>[data-slot=icon]]:size-5",
+        "square-petite": "size-9 shrink-0 [&_[data-slot=icon]]:text-current"
       },
       shape: {
         square:
-          'rounded-lg before:rounded-[calc(theme(borderRadius.lg)-1px)] after:rounded-[calc(theme(borderRadius.lg)-1px)] dark:after:rounded-lg',
+          "rounded-lg before:rounded-[calc(theme(borderRadius.lg)-1px)] after:rounded-[calc(theme(borderRadius.lg)-1px)] dark:after:rounded-lg",
         circle:
-          'rounded-[9999px] before:rounded-[9998px] after:rounded-[9998px] dark:after:rounded-[9999px]'
+          "rounded-[9999px] before:rounded-[9998px] after:rounded-[9998px] dark:after:rounded-[9999px]"
       },
       isDisabled: {
-        false: 'forced-colors:disabled:text-[GrayText]',
-        true: 'cursor-default opacity-60 forced-colors:disabled:text-[GrayText]'
+        false: "forced-colors:disabled:text-[GrayText]",
+        true: "cursor-default opacity-60 forced-colors:disabled:text-[GrayText]"
       }
     },
     defaultVariants: {
-      intent: 'primary',
-      appearance: 'solid',
-      size: 'medium',
-      shape: 'square'
+      intent: "primary",
+      appearance: "solid",
+      size: "medium",
+      shape: "square"
     },
     compoundVariants: [
       {
-        appearance: ['outline', 'plain'],
-        className: 'px-1',
-        size: 'extra-small'
+        appearance: ["outline", "plain"],
+        className: "px-1",
+        size: "extra-small"
       },
       {
-        appearance: ['outline', 'plain'],
-        className: 'px-[calc(theme(spacing.1)-1px)]',
-        size: 'small'
+        appearance: ["outline", "plain"],
+        className: "px-[calc(theme(spacing.1)-1px)]",
+        size: "small"
       },
       {
-        appearance: ['outline', 'plain'],
-        className: 'px-[calc(theme(spacing.2)-1px)]',
-        size: 'medium'
+        appearance: ["outline", "plain"],
+        className: "px-[calc(theme(spacing.2)-1px)]",
+        size: "medium"
       },
       {
-        appearance: ['outline', 'plain'],
-        className: 'px-[calc(theme(spacing.3)-1px)]',
-        size: 'large'
+        appearance: ["outline", "plain"],
+        className: "px-[calc(theme(spacing.3)-1px)]",
+        size: "large"
       }
     ]
   },
   {
-    responsiveVariants: ['sm', 'md', 'lg', 'xl']
+    responsiveVariants: ["sm", "md", "lg", "xl"]
   }
 )
 
 interface ButtonProps extends ButtonPrimitiveProps {
   intent?:
-    | 'primary'
-    | 'secondary'
-    | 'danger'
-    | 'warning'
-    | 'info'
-    | 'light/dark'
-    | 'success'
-    | 'light'
-    | 'dark'
-  size?: 'medium' | 'large' | 'square-petite' | 'extra-small' | 'small'
-  shape?: 'square' | 'circle'
-  appearance?: 'solid' | 'outline' | 'plain'
+    | "primary"
+    | "secondary"
+    | "danger"
+    | "warning"
+    | "info"
+    | "light/dark"
+    | "success"
+    | "light"
+    | "dark"
+  size?: "medium" | "large" | "square-petite" | "extra-small" | "small"
+  shape?: "square" | "circle"
+  appearance?: "solid" | "outline" | "plain"
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
@@ -158,6 +158,6 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   }
 )
 
-Button.displayName = 'Button'
+Button.displayName = "Button"
 
 export { Button, ButtonPrimitive, buttonStyles, type ButtonProps }
diff --git a/components/ui/calendar.tsx b/components/ui/calendar.tsx
index 9ea245ab..d38b2f2f 100644
--- a/components/ui/calendar.tsx
+++ b/components/ui/calendar.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { IconChevronLgLeft, IconChevronLgRight } from 'justd-icons'
+import { IconChevronLgLeft, IconChevronLgRight } from "justd-icons"
 import {
   Calendar as CalendarPrimitive,
   CalendarCell,
@@ -13,36 +13,35 @@ import {
   Heading,
   Text,
   useLocale
-} from 'react-aria-components'
-import { tv } from 'tailwind-variants'
+} from "react-aria-components"
+import { tv } from "tailwind-variants"
 
-import { Button } from './button'
-import { cr, ctr, focusRing } from './primitive'
+import { Button } from "./button"
+import { cr, ctr, focusRing } from "./primitive"
 
 const cellStyles = tv({
   extend: focusRing,
-  base: 'flex size-10 sm:size-9 cursor-default items-center justify-center font-medium rounded-full lg:text-sm forced-color-adjust-none',
+  base: "flex size-10 sm:size-9 cursor-default items-center justify-center font-medium rounded-full lg:text-sm forced-color-adjust-none",
   variants: {
     isSelected: {
-      false:
-        'text-fg hover:bg-zinc-100 pressed:bg-zinc-200 dark:hover:bg-zinc-700 dark:pressed:bg-zinc-600',
-      true: 'bg-primary text-primary-fg invalid:bg-danger invalid:text-danger-fg forced-colors:bg-[Highlight] forced-colors:text-[HighlightText] forced-colors:invalid:bg-[Mark]'
+      false: "text-fg hover:bg-secondary-fg/15 pressed:bg-secondary-fg/20",
+      true: "bg-primary text-primary-fg invalid:bg-danger invalid:text-danger-fg forced-colors:bg-[Highlight] forced-colors:text-[HighlightText] forced-colors:invalid:bg-[Mark]"
     },
     isDisabled: {
-      true: 'text-zinc-400 dark:text-zinc-600 forced-colors:text-[GrayText]'
+      true: "text-muted-fg/70 forced-colors:text-[GrayText]"
     }
   }
 })
 
 interface CalendarProps<T extends DateValue>
-  extends Omit<CalendarPrimitiveProps<T>, 'visibleDuration'> {
+  extends Omit<CalendarPrimitiveProps<T>, "visibleDuration"> {
   errorMessage?: string
   className?: string
 }
 
 const Calendar = <T extends DateValue>({ errorMessage, className, ...props }: CalendarProps<T>) => {
   return (
-    <CalendarPrimitive className={ctr(className, 'max-w-[17.5rem] sm:max-w-[15.8rem]')} {...props}>
+    <CalendarPrimitive className={ctr(className, "max-w-[17.5rem] sm:max-w-[15.8rem]")} {...props}>
       <CalendarHeader />
       <CalendarGrid className="[&_td]:border-collapse [&_td]:px-0">
         <CalendarGridHeader />
@@ -71,9 +70,9 @@ const Calendar = <T extends DateValue>({ errorMessage, className, ...props }: Ca
 
 const calendarHeaderStyles = tv({
   slots: {
-    header: 'flex w-full justify-center gap-1 px-1 pb-5 sm:pb-4',
-    heading: 'mr-2 text-muted-fg tracking-tight flex-1 text-left font-medium',
-    calendarGridHeaderCell: 'text-sm lg:text-xs font-semibold text-muted-fg'
+    header: "flex w-full justify-center gap-1 px-1 pb-5 sm:pb-4",
+    heading: "mr-2 text-muted-fg tracking-tight flex-1 text-left font-medium",
+    calendarGridHeaderCell: "text-sm lg:text-xs font-semibold text-muted-fg"
   }
 })
 
@@ -93,7 +92,7 @@ const CalendarHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivEle
           appearance="plain"
           slot="previous"
         >
-          {direction === 'rtl' ? <IconChevronLgRight /> : <IconChevronLgLeft aria-hidden />}
+          {direction === "rtl" ? <IconChevronLgRight /> : <IconChevronLgLeft aria-hidden />}
         </Button>
         <Button
           size="square-petite"
@@ -102,7 +101,7 @@ const CalendarHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivEle
           appearance="plain"
           slot="next"
         >
-          {direction === 'rtl' ? <IconChevronLgLeft /> : <IconChevronLgRight />}
+          {direction === "rtl" ? <IconChevronLgLeft /> : <IconChevronLgRight />}
         </Button>
       </div>
     </header>
diff --git a/components/ui/card.tsx b/components/ui/card.tsx
index 246a4dfa..2bdd9e1a 100644
--- a/components/ui/card.tsx
+++ b/components/ui/card.tsx
@@ -1,24 +1,24 @@
-'use client'
+"use client"
 
-import * as React from 'react'
+import * as React from "react"
 
-import type { HeadingProps, TextProps } from 'react-aria-components'
-import { Heading } from 'react-aria-components'
-import { tv } from 'tailwind-variants'
+import type { HeadingProps, TextProps } from "react-aria-components"
+import { Heading } from "react-aria-components"
+import { tv } from "tailwind-variants"
 
-import { Description } from './field'
+import { Description } from "./field"
 
 const card = tv({
   slots: {
     root: [
-      'xrkr bg-background rounded-lg xkd2 [&:has(table)_.ccvgs8x]:border-t [&:has(table)_.x32]:bg-tertiary [&:has(table)]:overflow-hidden border text-fg shadow-sm [&:has(.larhy3):not(:has(.yahnba))>.ccvgs8x]:pt-6 [&:has(.larhy3)]:overflow-hidden [&_table]:overflow-hidden'
+      "xrkr bg-background rounded-lg xkd2 [&:has(table)_.ccvgs8x]:border-t [&:has(table)_.x32]:bg-tertiary [&:has(table)]:overflow-hidden border text-fg shadow-sm [&:has(.larhy3):not(:has(.yahnba))>.ccvgs8x]:pt-6 [&:has(.larhy3)]:overflow-hidden [&_table]:overflow-hidden"
     ],
-    header: 'flex xlw32 flex-col space-y-1.5 px-6 py-5',
-    title: 'text-lg klda font-semibold leading-none tracking-tight',
-    description: 'text-base dl2 text-muted-fg sm:text-sm',
+    header: "flex xlw32 flex-col space-y-1.5 px-6 py-5",
+    title: "text-lg klda font-semibold leading-none tracking-tight",
+    description: "text-base dl2 text-muted-fg sm:text-sm",
     content:
-      'yahnba px-6 pb-6 has-[.t-hea]:bg-secondary/40 has-[table]:p-0 [&:has(table)+.ccvgs8x]:py-5 [&:has(table)]:border-t [&_.t-cel]:px-6 [&_.t-col]:px-6',
-    footer: 'ccvgs8x flex items-center p-6 pt-0'
+      "yahnba px-6 pb-6 has-[.t-hea]:bg-secondary/40 has-[table]:p-0 [&:has(table)+.ccvgs8x]:py-5 [&:has(table)]:border-t [&_.t-cel]:px-6 [&_.t-col]:px-6",
+    footer: "ccvgs8x flex items-center p-6 pt-0"
   }
 })
 
@@ -37,7 +37,7 @@ const CardHeader = ({ className, ...props }: CardHeaderProps) => (
   <div className={header({ className })} {...props}>
     {props.title && <CardTitle>{props.title}</CardTitle>}
     {props.description && <CardDescription>{props.description}</CardDescription>}
-    {!props.title && typeof props.children === 'string' ? <CardTitle {...props} /> : props.children}
+    {!props.title && typeof props.children === "string" ? <CardTitle {...props} /> : props.children}
   </div>
 )
 
diff --git a/components/ui/carousel.tsx b/components/ui/carousel.tsx
index 42bc7a73..7b488624 100644
--- a/components/ui/carousel.tsx
+++ b/components/ui/carousel.tsx
@@ -1,15 +1,15 @@
-'use client'
+"use client"
 
-import * as React from 'react'
+import * as React from "react"
 
-import useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-react'
-import { IconChevronLgLeft, IconChevronLgRight } from 'justd-icons'
-import type { ListBoxItemProps, SectionProps } from 'react-aria-components'
-import { ListBox, ListBoxItem, Section } from 'react-aria-components'
+import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react"
+import { IconChevronLgLeft, IconChevronLgRight } from "justd-icons"
+import type { ListBoxItemProps, SectionProps } from "react-aria-components"
+import { ListBox, ListBoxItem, Section } from "react-aria-components"
 
-import type { ButtonProps } from './button'
-import { Button } from './button'
-import { cn } from './primitive'
+import type { ButtonProps } from "./button"
+import { Button } from "./button"
+import { cn } from "./primitive"
 
 type CarouselApi = UseEmblaCarouselType[1]
 type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
@@ -31,7 +31,7 @@ const useCarousel = () => {
   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
@@ -47,12 +47,12 @@ interface CarouselRootProps {
 interface CarouselProps extends React.HTMLAttributes<HTMLDivElement>, CarouselRootProps {
   opts?: CarouselOptions
   plugins?: CarouselPlugin
-  orientation?: 'horizontal' | 'vertical'
+  orientation?: "horizontal" | "vertical"
   setApi?: (api: CarouselApi) => void
 }
 
 const Carousel = ({
-  orientation = 'horizontal',
+  orientation = "horizontal",
   opts,
   setApi,
   plugins,
@@ -63,7 +63,7 @@ const Carousel = ({
   const [carouselRef, api] = useEmblaCarousel(
     {
       ...opts,
-      axis: orientation === 'horizontal' ? 'x' : 'y'
+      axis: orientation === "horizontal" ? "x" : "y"
     },
     plugins
   )
@@ -89,10 +89,10 @@ const Carousel = ({
 
   const handleKeyDown = React.useCallback(
     (event: React.KeyboardEvent<HTMLDivElement>) => {
-      if (event.key === 'ArrowLeft') {
+      if (event.key === "ArrowLeft") {
         event.preventDefault()
         scrollPrev()
-      } else if (event.key === 'ArrowRight') {
+      } else if (event.key === "ArrowRight") {
         event.preventDefault()
         scrollNext()
       }
@@ -114,11 +114,11 @@ const Carousel = ({
     }
 
     onSelect(api)
-    api.on('reInit', onSelect)
-    api.on('select', onSelect)
+    api.on("reInit", onSelect)
+    api.on("select", onSelect)
 
     return () => {
-      api?.off('select', onSelect)
+      api?.off("select", onSelect)
     }
   }, [api, onSelect])
 
@@ -128,7 +128,7 @@ const Carousel = ({
         carouselRef,
         api: api,
         opts,
-        orientation: orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),
+        orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
         scrollPrev,
         scrollNext,
         canScrollPrev,
@@ -137,7 +137,7 @@ const Carousel = ({
     >
       <div
         onKeyDownCapture={handleKeyDown}
-        className={cn('relative', className)}
+        className={cn("relative", className)}
         role="region"
         aria-roledescription="carousel"
         {...props}
@@ -153,14 +153,14 @@ const CarouselContent = <T extends object>({ className, ...props }: SectionProps
 
   return (
     <ListBox
-      layout={orientation === 'vertical' ? 'stack' : 'grid'}
+      layout={orientation === "vertical" ? "stack" : "grid"}
       aria-label="Slides"
       orientation={orientation}
       ref={carouselRef}
       className="overflow-hidden"
     >
       <Section
-        className={cn('flex', orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col', className)}
+        className={cn("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className)}
         {...props}
       />
     </ListBox>
@@ -175,8 +175,8 @@ const CarouselItem = ({ className, ...props }: ListBoxItemProps) => {
       aria-label={`Slide ${props.id}`}
       aria-roledescription="slide"
       className={cn(
-        'min-w-0 xd24r shrink-0 focus:outline-none grow-0 basis-full focus-visible:outline-none',
-        orientation === 'horizontal' ? 'pl-4' : 'pt-4',
+        "min-w-0 xd24r shrink-0 focus:outline-none grow-0 basis-full focus-visible:outline-none",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
         className
       )}
       {...props}
@@ -191,8 +191,8 @@ const CarouselHandler = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HT
       <div
         ref={ref}
         className={cn(
-          'mt-6 z-20 relative flex items-center gap-x-2',
-          orientation === 'horizontal' ? 'justify-end' : 'justify-center',
+          "mt-6 z-20 relative flex items-center gap-x-2",
+          orientation === "horizontal" ? "justify-end" : "justify-center",
           className
         )}
         {...props}
@@ -200,32 +200,32 @@ const CarouselHandler = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HT
     )
   }
 )
-CarouselHandler.displayName = 'CarouselHandler'
+CarouselHandler.displayName = "CarouselHandler"
 
 const CarouselButton = ({
   slot,
   className,
-  intent = 'secondary',
-  appearance = 'outline',
-  shape = 'circle',
-  size = 'square-petite',
+  intent = "secondary",
+  appearance = "outline",
+  shape = "circle",
+  size = "square-petite",
   ...props
-}: ButtonProps & { slot: 'previous' | 'next' }) => {
+}: ButtonProps & { slot: "previous" | "next" }) => {
   const { orientation, scrollPrev, canScrollPrev, scrollNext, canScrollNext } = useCarousel()
-  const isNext = slot === 'next'
+  const isNext = slot === "next"
   const canScroll = isNext ? canScrollNext : canScrollPrev
   const scroll = isNext ? scrollNext : scrollPrev
   const Icon = isNext ? IconChevronLgRight : IconChevronLgLeft
 
   return (
     <Button
-      aria-label={isNext ? 'Next slide' : 'Previous slide'}
+      aria-label={isNext ? "Next slide" : "Previous slide"}
       slot={slot}
       intent={intent}
       appearance={appearance}
       size={size}
       shape={shape}
-      className={cn(orientation === 'vertical' ? 'rotate-90' : '', className)}
+      className={cn(orientation === "vertical" ? "rotate-90" : "", className)}
       isDisabled={!canScroll}
       onPress={scroll}
       {...props}
diff --git a/components/ui/checkbox.tsx b/components/ui/checkbox.tsx
index 12948de5..dbb9ad17 100644
--- a/components/ui/checkbox.tsx
+++ b/components/ui/checkbox.tsx
@@ -1,22 +1,22 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import { type ReactNode } from 'react'
+import * as React from "react"
+import { type ReactNode } from "react"
 
-import { IconCheck, IconMinus } from 'justd-icons'
+import { IconCheck, IconMinus } from "justd-icons"
 import {
   Checkbox as CheckboxPrimitive,
   CheckboxGroup as CheckboxGroupPrimitive,
   type CheckboxGroupProps as CheckboxGroupPrimitiveProps,
   type CheckboxProps as CheckboxPrimitiveProps,
   type ValidationResult
-} from 'react-aria-components'
-import { tv } from 'tailwind-variants'
+} from "react-aria-components"
+import { tv } from "tailwind-variants"
 
-import { Description, FieldError, Label } from './field'
-import { cr, ctr } from './primitive'
+import { Description, FieldError, Label } from "./field"
+import { cr, ctr } from "./primitive"
 
-interface CheckboxGroupProps extends Omit<CheckboxGroupPrimitiveProps, 'children'> {
+interface CheckboxGroupProps extends Omit<CheckboxGroupPrimitiveProps, "children"> {
   label?: string
   children?: ReactNode
   description?: string
@@ -25,7 +25,7 @@ interface CheckboxGroupProps extends Omit<CheckboxGroupPrimitiveProps, 'children
 
 const CheckboxGroup = (props: CheckboxGroupProps) => {
   return (
-    <CheckboxGroupPrimitive {...props} className={ctr(props.className, 'flex flex-col gap-2')}>
+    <CheckboxGroupPrimitive {...props} className={ctr(props.className, "flex flex-col gap-2")}>
       <Label>{props.label}</Label>
       <>{props.children}</>
       {props.description && <Description className="block">{props.description}</Description>}
@@ -35,33 +35,33 @@ const CheckboxGroup = (props: CheckboxGroupProps) => {
 }
 
 const checkboxStyles = tv({
-  base: 'racc group flex items-center gap-2 text-sm transition',
+  base: "racc group flex items-center gap-2 text-sm transition",
   variants: {
     isDisabled: {
-      false: 'opacity-100',
-      true: 'opacity-50'
+      false: "opacity-100",
+      true: "opacity-50"
     }
   }
 })
 
 const boxStyles = tv({
-  base: 'flex size-4 [&>[data-slot=icon]]:size-3 flex-shrink-0 items-center justify-center rounded border text-background transition',
+  base: "flex size-4 [&>[data-slot=icon]]:size-3 flex-shrink-0 items-center justify-center rounded border text-background transition",
   variants: {
     isSelected: {
-      false: 'border-toggle bg-secondary',
+      false: "border-toggle bg-secondary",
       true: [
-        'border-primary/70 bg-primary text-primary-fg',
-        'group-invalid:border-danger/70 group-invalid:bg-danger group-invalid:text-danger-fg'
+        "border-primary/70 bg-primary text-primary-fg",
+        "group-invalid:border-danger/70 group-invalid:bg-danger group-invalid:text-danger-fg"
       ]
     },
     isFocused: {
       true: [
-        'border-primary/70 ring-4 ring-primary/20',
-        'group-invalid:border-danger/70 group-invalid:text-danger-fg group-invalid:ring-danger/20'
+        "border-primary/70 ring-4 ring-primary/20",
+        "group-invalid:border-danger/70 group-invalid:text-danger-fg group-invalid:ring-danger/20"
       ]
     },
     isInvalid: {
-      true: 'border-danger/70 bg-danger/20 text-danger-fg ring-danger/20'
+      true: "border-danger/70 bg-danger/20 text-danger-fg ring-danger/20"
     }
   }
 })
@@ -84,7 +84,7 @@ const Checkbox = (props: CheckboxProps) => {
           <div
             className={boxStyles({
               isSelected: isSelected || isIndeterminate,
-              className: props.description ? 'mt-1' : 'mt-0.5',
+              className: props.description ? "mt-1" : "mt-0.5",
               ...renderProps
             })}
           >
diff --git a/components/ui/choicebox.tsx b/components/ui/choicebox.tsx
index 337364a7..257fbb09 100644
--- a/components/ui/choicebox.tsx
+++ b/components/ui/choicebox.tsx
@@ -1,31 +1,31 @@
-'use client'
+"use client"
 
-import * as React from 'react'
+import * as React from "react"
 
-import type { GridListItemProps, GridListProps } from 'react-aria-components'
-import { GridList, GridListItem } from 'react-aria-components'
-import type { VariantProps } from 'tailwind-variants'
-import { tv } from 'tailwind-variants'
+import type { GridListItemProps, GridListProps } from "react-aria-components"
+import { GridList, GridListItem } from "react-aria-components"
+import type { VariantProps } from "tailwind-variants"
+import { tv } from "tailwind-variants"
 
-import { Checkbox } from './checkbox'
-import { Description, Label } from './field'
-import { cr, focusStyles } from './primitive'
+import { Checkbox } from "./checkbox"
+import { Description, Label } from "./field"
+import { cr, focusStyles } from "./primitive"
 
 const choiceboxStyles = tv({
-  base: 'grid',
+  base: "grid",
   variants: {
     columns: {
-      1: 'sm:grid-cols-1',
-      2: 'sm:grid-cols-2',
-      3: 'sm:grid-cols-3',
-      4: 'sm:grid-cols-4',
-      5: 'sm:grid-cols-5',
-      6: 'sm:grid-cols-6'
+      1: "sm:grid-cols-1",
+      2: "sm:grid-cols-2",
+      3: "sm:grid-cols-3",
+      4: "sm:grid-cols-4",
+      5: "sm:grid-cols-5",
+      6: "sm:grid-cols-6"
     },
     gap: {
-      2: 'gap-2',
-      4: 'gap-4',
-      6: 'gap-6'
+      2: "gap-2",
+      4: "gap-4",
+      6: "gap-6"
     }
   },
   defaultVariants: {
@@ -44,12 +44,12 @@ const Choicebox = <T extends object>({
   columns,
   gap,
   className,
-  selectionMode = 'multiple',
+  selectionMode = "multiple",
   ...props
 }: ChoiceboxProps<T>) => {
   return (
     <GridList
-      layout={columns === 1 ? 'stack' : 'grid'}
+      layout={columns === 1 ? "stack" : "grid"}
       selectionMode={selectionMode}
       className={choiceboxStyles({
         columns,
@@ -63,18 +63,18 @@ const Choicebox = <T extends object>({
 
 const choiceboxItemStyles = tv({
   extend: focusStyles,
-  base: 'rounded-lg cursor-pointer border p-4 [&_[slot=title]]:font-medium',
+  base: "rounded-lg cursor-pointer border p-4 [&_[slot=title]]:font-medium",
   variants: {
     isSelected: {
-      false: 'hover:bg-secondary/50',
+      false: "hover:bg-secondary/50",
       true: [
-        'z-20 border-primary/50 bg-primary/5 dark:bg-primary/15',
-        '[&_[slot=title]]:text-primary-600 dark:[&_[slot=title]]:text-primary-300',
-        '[&_[slot=description]]:text-primary-600 dark:[&_[slot=description]]:text-primary-300'
+        "z-20 border-primary/50 bg-primary/5 dark:bg-primary/15",
+        "[&_[slot=title]]:text-primary-600 dark:[&_[slot=title]]:text-primary-300",
+        "[&_[slot=description]]:text-primary-600 dark:[&_[slot=description]]:text-primary-300"
       ]
     },
     isDisabled: {
-      true: 'z-10 cursor-default opacity-80 [&_[slot=title]]:text-muted-fg forced-colors:text-[GrayText]'
+      true: "z-10 cursor-default opacity-80 [&_[slot=title]]:text-muted-fg forced-colors:text-[GrayText]"
     }
   }
 })
@@ -85,7 +85,7 @@ interface ChoiceboxItemProps extends GridListItemProps, VariantProps<typeof choi
 }
 
 const ChoiceboxItem = ({ children, className, ...props }: ChoiceboxItemProps) => {
-  const textValue = typeof children === 'string' ? children : undefined
+  const textValue = typeof children === "string" ? children : undefined
   return (
     <GridListItem
       textValue={textValue}
@@ -106,7 +106,7 @@ const ChoiceboxItem = ({ children, className, ...props }: ChoiceboxItemProps) =>
             {props.description && <Description>{props.description}</Description>}
           </div>
           <>
-            {values.selectionMode === 'multiple' && values.selectionBehavior === 'toggle' && (
+            {values.selectionMode === "multiple" && values.selectionBehavior === "toggle" && (
               <Checkbox slot="selection" />
             )}
           </>
diff --git a/components/ui/color-field.tsx b/components/ui/color-field.tsx
index 799233a1..4475e2a0 100644
--- a/components/ui/color-field.tsx
+++ b/components/ui/color-field.tsx
@@ -1,17 +1,17 @@
-'use client'
+"use client"
 
-import * as React from 'react'
+import * as React from "react"
 
 import type {
   ColorFieldProps as ColorFieldPrimitiveProps,
   ValidationResult
-} from 'react-aria-components'
-import { ColorField as ColorFieldPrimitive } from 'react-aria-components'
+} from "react-aria-components"
+import { ColorField as ColorFieldPrimitive } from "react-aria-components"
 
-import { ColorSwatch } from './color'
-import { ColorPicker } from './color-picker'
-import { Description, FieldError, FieldGroup, fieldGroupPrefixStyles, Input, Label } from './field'
-import { ctr } from './primitive'
+import { ColorSwatch } from "./color"
+import { ColorPicker } from "./color-picker"
+import { Description, FieldError, FieldGroup, fieldGroupPrefixStyles, Input, Label } from "./field"
+import { ctr } from "./primitive"
 
 interface ColorFieldProps extends ColorFieldPrimitiveProps {
   label?: string
@@ -40,12 +40,12 @@ const ColorField = ({
   return (
     <ColorFieldPrimitive
       {...props}
-      aria-label={props['aria-label'] ?? 'Color field'}
-      className={ctr(className, 'group w-full flex flex-col gap-1')}
+      aria-label={props["aria-label"] ?? "Color field"}
+      className={ctr(className, "group w-full flex flex-col gap-1")}
     >
       {label && <Label>{label}</Label>}
       <FieldGroup
-        data-loading={isLoading ? 'true' : undefined}
+        data-loading={isLoading ? "true" : undefined}
         className={fieldGroupPrefixStyles()}
       >
         {prefix ? <span className="atrs isPfx">{prefix}</span> : null}
diff --git a/components/ui/color-picker.tsx b/components/ui/color-picker.tsx
index feabb544..3013482e 100644
--- a/components/ui/color-picker.tsx
+++ b/components/ui/color-picker.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import * as React from 'react'
+import * as React from "react"
 
 import {
   ColorPicker as ColorPickerPrimitive,
@@ -8,11 +8,11 @@ import {
   type ColorSpace,
   getColorChannels,
   Group
-} from 'react-aria-components'
-import { tv } from 'tailwind-variants'
-import tailwindColors from 'tailwindcss/colors'
+} from "react-aria-components"
+import { tv } from "tailwind-variants"
+import tailwindColors from "tailwindcss/colors"
 
-import { Button, ButtonPrimitive } from './button'
+import { Button, ButtonPrimitive } from "./button"
 import {
   ColorArea,
   ColorSlider,
@@ -21,21 +21,21 @@ import {
   ColorSwatchPickerItem,
   ColorThumb,
   defaultColor
-} from './color'
-import { ColorField } from './color-field'
-import { Description, Label } from './field'
-import { Popover } from './popover'
-import { Select } from './select'
+} from "./color"
+import { ColorField } from "./color-field"
+import { Description, Label } from "./field"
+import { Popover } from "./popover"
+import { Select } from "./select"
 
 const colorPickerStyles = tv({
   slots: {
-    base: 'flex w-full flex-col gap-1',
+    base: "flex w-full flex-col gap-1",
     triggerColorField:
-      'size-10 -mr-2.5 tcf bg-background grid place-content-center focus:outline-none',
-    triggerColorPicker: 'w-full hover:bg-tertiary tcp max-w-sm bg-background justify-start',
-    colorArea: 'w-full mt-2 sm:mt-0',
-    colorSlider: '[&_.cstrk]:orientation-horizontal:h-3',
-    colorSwatchPicker: 'flex flex-wrap gap-x-2 gap-y-2.5'
+      "size-10 -mr-2.5 tcf bg-background grid place-content-center focus:outline-none",
+    triggerColorPicker: "w-full hover:bg-tertiary tcp max-w-sm bg-background justify-start",
+    colorArea: "w-full mt-2 sm:mt-0",
+    colorSlider: "[&_.cstrk]:orientation-horizontal:h-3",
+    colorSwatchPicker: "flex flex-wrap gap-x-2 gap-y-2.5"
   }
 })
 
@@ -54,7 +54,7 @@ interface ColorPickerProps extends ColorPickerPrimitiveProps {
   colors?: string[]
   isDisabled?: boolean
   className?: string
-  trigger?: 'color-picker' | 'color-field'
+  trigger?: "color-picker" | "color-field"
   enableColorField?: boolean
   closeButton?: boolean
 }
@@ -67,14 +67,14 @@ const ColorPicker = ({
   label,
   description,
   colors = [...Object.values(tailwindColors.zinc)],
-  placeholder = 'Fill Color',
+  placeholder = "Fill Color",
   isHex = true,
   isDisabled = false,
   className,
-  trigger = 'color-picker',
+  trigger = "color-picker",
   ...props
 }: ColorPickerProps) => {
-  const [space, setSpace] = React.useState<ColorSpace>('rgb')
+  const [space, setSpace] = React.useState<ColorSpace>("rgb")
   const [isHexFormat, setIsHexFormat] = React.useState(false)
   const value = props.value ?? props.defaultValue
   return (
@@ -83,11 +83,11 @@ const ColorPicker = ({
       <Group>
         <ColorPickerPrimitive defaultValue={defaultColor} {...props}>
           <Popover>
-            {trigger === 'color-field' ? (
+            {trigger === "color-field" ? (
               <ButtonPrimitive aria-label="Color swatch" className={triggerColorField()}>
                 <ColorSwatch color={value?.toString(space)} className="size-6" />
               </ButtonPrimitive>
-            ) : trigger === 'color-picker' ? (
+            ) : trigger === "color-picker" ? (
               <Button
                 aria-label="Color picker"
                 isDisabled={isDisabled}
@@ -105,7 +105,7 @@ const ColorPicker = ({
             >
               <div className="grid gap-2">
                 <ColorArea
-                  aria-describedby={`${label ? `${label} color area` : 'Color slider'}`}
+                  aria-describedby={`${label ? `${label} color area` : "Color slider"}`}
                   className={colorArea()}
                   colorSpace="hsb"
                   xChannel="saturation"
@@ -114,7 +114,7 @@ const ColorPicker = ({
                   <ColorThumb className="z-40" />
                 </ColorArea>
                 <ColorSlider
-                  aria-describedby={`${label ? `${label} color slider` : 'Color slider'}`}
+                  aria-describedby={`${label ? `${label} color slider` : "Color slider"}`}
                   showOutput={false}
                   className={colorSlider()}
                   colorSpace="hsb"
@@ -128,12 +128,12 @@ const ColorPicker = ({
                     defaultSelectedKey={space}
                     onSelectionChange={(s) => {
                       setSpace(s as ColorSpace)
-                      setIsHexFormat(s === 'hex')
+                      setIsHexFormat(s === "hex")
                     }}
                   >
                     <Select.Trigger />
                     <Select.List>
-                      {['rgb', 'hex', 'hsl', 'hsb'].map((s) => (
+                      {["rgb", "hex", "hsl", "hsb"].map((s) => (
                         <Select.Option key={s} id={s} textValue={s}>
                           {s}
                         </Select.Option>
@@ -149,7 +149,7 @@ const ColorPicker = ({
                     ) : (
                       getColorChannels(space).map((channel) => (
                         <ColorField
-                          aria-describedby={label ?? 'Color field'}
+                          aria-describedby={label ?? "Color field"}
                           colorSpace={space}
                           channel={channel}
                           key={channel}
diff --git a/components/ui/color.tsx b/components/ui/color.tsx
index 2dd32345..31914870 100644
--- a/components/ui/color.tsx
+++ b/components/ui/color.tsx
@@ -1,14 +1,14 @@
-'use client'
+"use client"
 
-import * as React from 'react'
+import * as React from "react"
 
-import { parseColor } from '@react-stately/color'
+import { parseColor } from "@react-stately/color"
 import type {
   ColorSliderProps as ColorSliderPrimitiveProps,
   ColorSwatchPickerItemProps as ColorSwatchPickerItemPrimitiveProps,
   ColorSwatchProps as ColorSwatchPrimitiveProps,
   ColorThumbProps as ColorThumbPrimitiveProps
-} from 'react-aria-components'
+} from "react-aria-components"
 import {
   ColorArea as ColorAreaPrimitive,
   ColorSlider as ColorSliderPrimitive,
@@ -19,15 +19,15 @@ import {
   ColorWheel as ColorWheelPrimitive,
   ColorWheelTrack as ColorWheelTrackPrimitive,
   SliderOutput
-} from 'react-aria-components'
-import { tv } from 'tailwind-variants'
+} from "react-aria-components"
+import { tv } from "tailwind-variants"
 
-import { Description, Label } from './field'
-import { cn, cr, focusStyles } from './primitive'
-import { Slider } from './slider'
+import { Description, Label } from "./field"
+import { cn, cr, focusStyles } from "./primitive"
+import { Slider } from "./slider"
 
 const colorAreaStyles = tv({
-  base: 'size-48 rounded-md border border-background shrink-0 disabled:opacity-50'
+  base: "size-48 rounded-md border border-background shrink-0 disabled:opacity-50"
 })
 
 interface ColorAreaProps extends React.ComponentProps<typeof ColorAreaPrimitive> {}
@@ -35,7 +35,7 @@ interface ColorAreaProps extends React.ComponentProps<typeof ColorAreaPrimitive>
 const ColorArea = ({ className, ...props }: ColorAreaProps) => {
   return (
     <ColorAreaPrimitive
-      aria-label={props['aria-label'] ?? 'Color area'}
+      aria-label={props["aria-label"] ?? "Color area"}
       {...props}
       className={cr(className, (className, renderProps) =>
         colorAreaStyles({
@@ -50,10 +50,10 @@ const ColorArea = ({ className, ...props }: ColorAreaProps) => {
 interface ColorThumbProps extends ColorThumbPrimitiveProps {}
 
 const colorThumbStyles = tv({
-  base: 'size-5 shadow rounded-full ring-1 ring-inset ring-offset-2 ring-black/50 border border-black/50',
+  base: "size-5 shadow rounded-full ring-1 ring-inset ring-offset-2 ring-black/50 border border-black/50",
   variants: {
     isFocusVisible: {
-      true: 'size-6'
+      true: "size-6"
     }
   }
 })
@@ -74,7 +74,7 @@ const ColorThumb = ({ className, ...props }: ColorThumbProps) => {
 
 const colorSwatchPickerItemStyles = tv({
   extend: focusStyles,
-  base: 'size-8 rounded-md cspis disabled:opacity-50'
+  base: "size-8 rounded-md cspis disabled:opacity-50"
 })
 
 const ColorSwatchPickerItem = ({ className, ...props }: ColorSwatchPickerItemPrimitiveProps) => {
@@ -99,12 +99,12 @@ const ColorSwatch = ({ className, ...props }: ColorSwatchProps) => {
   const needRing = props.color ? isBrightColor(props.color) : false
   return (
     <ColorSwatchPrimitive
-      aria-label={props['aria-label'] ?? 'Color swatch'}
+      aria-label={props["aria-label"] ?? "Color swatch"}
       className={cn(
-        'size-8 cs rounded-md shrink-0',
+        "size-8 cs rounded-md shrink-0",
         needRing
-          ? 'ring-1 ring-inset ring-black/10'
-          : 'dark:ring-1 dark:ring-inset dark:ring-white/10',
+          ? "ring-1 ring-inset ring-black/10"
+          : "dark:ring-1 dark:ring-inset dark:ring-white/10",
         className
       )}
       {...props}
@@ -149,8 +149,8 @@ const luminance = (r: number, g: number, b: number): number => {
 const isBrightColor = (color: any): boolean => {
   let r, g, b
 
-  if (typeof color === 'string') {
-    if (color.startsWith('#')) {
+  if (typeof color === "string") {
+    if (color.startsWith("#")) {
       const rgb = hexToRgb(color)
       if (rgb) {
         r = rgb.r
@@ -159,7 +159,7 @@ const isBrightColor = (color: any): boolean => {
       } else {
         return false
       }
-    } else if (color.startsWith('rgb')) {
+    } else if (color.startsWith("rgb")) {
       const rgbValues = color.match(/\d+/g)
       if (rgbValues) {
         r = parseInt(rgbValues[0], 10)
@@ -170,8 +170,8 @@ const isBrightColor = (color: any): boolean => {
       }
     } else {
       const namedColors: Record<string, string> = {
-        white: '#ffffff',
-        black: '#000000'
+        white: "#ffffff",
+        black: "#000000"
       }
       const hex = namedColors[color.toLowerCase()]
       if (hex) {
@@ -188,10 +188,10 @@ const isBrightColor = (color: any): boolean => {
       }
     }
   } else if (
-    typeof color === 'object' &&
-    'hue' in color &&
-    'saturation' in color &&
-    'brightness' in color
+    typeof color === "object" &&
+    "hue" in color &&
+    "saturation" in color &&
+    "brightness" in color
   ) {
     const rgb = hsbToRgb(color.hue, color.saturation, color.brightness)
     r = rgb.r
@@ -205,7 +205,7 @@ const isBrightColor = (color: any): boolean => {
   return lum > 0.75
 }
 
-const defaultColor = parseColor('hsl(216, 98%, 52%)')
+const defaultColor = parseColor("hsl(216, 98%, 52%)")
 interface ColorSliderProps extends ColorSliderPrimitiveProps {
   label?: string
   description?: string
@@ -221,7 +221,7 @@ const ColorSlider = ({
 }: ColorSliderProps) => {
   return (
     <ColorSliderPrimitive
-      className={cn('flex disabled:opacity-50 w-full flex-col gap-1', className)}
+      className={cn("flex disabled:opacity-50 w-full flex-col gap-1", className)}
       {...props}
     >
       <div className="flex items-center gap-2">
diff --git a/components/ui/combo-box.tsx b/components/ui/combo-box.tsx
index f45a7b7f..c798b0aa 100644
--- a/components/ui/combo-box.tsx
+++ b/components/ui/combo-box.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { IconChevronLgDown, IconX } from 'justd-icons'
-import type { InputProps } from 'react-aria-components'
+import { IconChevronLgDown, IconX } from "justd-icons"
+import type { InputProps } from "react-aria-components"
 import {
   ComboBox as ComboboxPrimitive,
   ComboBoxContext,
@@ -12,30 +12,30 @@ import {
   type PopoverProps as PopoverPrimitiveProps,
   useSlottedContext,
   type ValidationResult
-} from 'react-aria-components'
-import { tv } from 'tailwind-variants'
+} from "react-aria-components"
+import { tv } from "tailwind-variants"
 
-import { Button, ButtonPrimitive } from './button'
-import { DropdownItem, DropdownSection } from './dropdown'
-import { Description, FieldError, FieldGroup, Input, Label } from './field'
-import { ListBox } from './list-box'
-import { Popover } from './popover'
-import { ctr } from './primitive'
+import { Button, ButtonPrimitive } from "./button"
+import { DropdownItem, DropdownSection } from "./dropdown"
+import { Description, FieldError, FieldGroup, Input, Label } from "./field"
+import { ListBox } from "./list-box"
+import { Popover } from "./popover"
+import { ctr } from "./primitive"
 
 const comboboxStyles = tv({
   slots: {
-    base: 'group w-full flex flex-col gap-1',
+    base: "group w-full flex flex-col gap-1",
     chevronButton:
-      'h-7 w-8 [&_[data-slot=icon]]:text-muted-fg hover:[&_[data-slot=icon]]:text-fg pressed:[&_[data-slot=icon]]:text-fg rounded outline-offset-0 active:bg-transparent hover:bg-transparent pressed:bg-transparent',
-    chevronIcon: 'transition duration-200 group-open:rotate-180 group-open:text-fg',
+      "h-7 w-8 [&_[data-slot=icon]]:text-muted-fg hover:[&_[data-slot=icon]]:text-fg pressed:[&_[data-slot=icon]]:text-fg rounded outline-offset-0 active:bg-transparent hover:bg-transparent pressed:bg-transparent",
+    chevronIcon: "transition duration-200 group-open:rotate-180 group-open:text-fg",
     clearButton:
-      'focus:outline-none absolute inset-y-0 right-0 flex items-center pr-2 text-muted-fg hover:text-fg'
+      "focus:outline-none absolute inset-y-0 right-0 flex items-center pr-2 text-muted-fg hover:text-fg"
   }
 })
 
 const { base, chevronButton, chevronIcon, clearButton } = comboboxStyles()
 
-interface ComboBoxProps<T extends object> extends Omit<ComboboxPrimitiveProps<T>, 'children'> {
+interface ComboBoxProps<T extends object> extends Omit<ComboboxPrimitiveProps<T>, "children"> {
   label?: string
   placeholder?: string
   description?: string | null
@@ -65,7 +65,7 @@ interface ListBoxPickerProps<T extends object> extends React.ComponentProps<type
 
 interface ListProps<T extends object>
   extends ListBoxPickerProps<T>,
-    Omit<PopoverPrimitiveProps, 'children' | 'className' | 'style'> {}
+    Omit<PopoverPrimitiveProps, "children" | "className" | "style"> {}
 
 const List = <T extends object>({ children, items, ...props }: ListProps<T>) => {
   return (
diff --git a/components/ui/command-menu.tsx b/components/ui/command-menu.tsx
index 0bfc4c74..88994801 100644
--- a/components/ui/command-menu.tsx
+++ b/components/ui/command-menu.tsx
@@ -1,70 +1,70 @@
-'use client'
+"use client"
 
-import * as React from 'react'
+import * as React from "react"
 
-import { Command as CommandPrimitive } from 'cmdk'
-import { IconSearch, IconX } from 'justd-icons'
-import type { ModalOverlayProps, SeparatorProps, TextProps } from 'react-aria-components'
-import { Button, Dialog, Modal, ModalOverlay, Text } from 'react-aria-components'
-import { twJoin } from 'tailwind-merge'
-import { tv } from 'tailwind-variants'
+import { Command as CommandPrimitive } from "cmdk"
+import { IconSearch, IconX } from "justd-icons"
+import type { ModalOverlayProps, SeparatorProps, TextProps } from "react-aria-components"
+import { Button, Dialog, Modal, ModalOverlay, Text } from "react-aria-components"
+import { twJoin } from "tailwind-merge"
+import { tv } from "tailwind-variants"
 
-import type { KeyboardProps } from './keyboard'
-import { Keyboard } from './keyboard'
-import { useMediaQuery } from './primitive'
-import { Separator } from './separator'
+import type { KeyboardProps } from "./keyboard"
+import { Keyboard } from "./keyboard"
+import { useMediaQuery } from "./primitive"
+import { Separator } from "./separator"
 
 const commandStyles = tv({
   slots: {
     command: [
-      'flex h-svh w-full flex-col overflow-hidden rounded-md bg-overlay text-overlay-fg sm:h-full',
-      '[&_[cmdk-group-heading]]:ml-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:-mb-1.5 [&_[cmdk-group-heading]]:text-muted-fg [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_[data-slot=icon]]:size-5 [&_[cmdk-input]]:h-12',
+      "flex h-svh w-full flex-col overflow-hidden rounded-md bg-overlay text-overlay-fg sm:h-full",
+      "[&_[cmdk-group-heading]]:ml-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:-mb-1.5 [&_[cmdk-group-heading]]:text-muted-fg [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_[data-slot=icon]]:size-5 [&_[cmdk-input]]:h-12",
       // for specific properties, it has to be controlled by the command
-      '[&_[cmdk-item]]:py-2.5 [&_[cmdk-item]]:pl-2.5 [&_[cmdk-item]]:pr-4'
+      "[&_[cmdk-item]]:py-2.5 [&_[cmdk-item]]:pl-2.5 [&_[cmdk-item]]:pr-4"
     ],
-    list: 'overflow-y-auto lg:pb-0 max-h-[calc(100vh-35%)] pb-16 [&:not(:has(.xda32kfseccmd))]:p-2 [&:not(:has(.xda32kfseccmd))_.s3xsprt]:my-2 overflow-x-hidden md:max-h-[456px]',
+    list: "overflow-y-auto lg:pb-0 max-h-[calc(100vh-35%)] pb-16 [&:not(:has(.xda32kfseccmd))]:p-2 [&:not(:has(.xda32kfseccmd))_.s3xsprt]:my-2 overflow-x-hidden md:max-h-[456px]",
     input: [
-      'flex w-full rounded-md bg-transparent text-base placeholder:text-muted-fg',
-      'focus:outline-none',
-      'disabled:opacity-50 disabled:cursor-not-allowed'
+      "flex w-full rounded-md bg-transparent text-base placeholder:text-muted-fg",
+      "focus:outline-none",
+      "disabled:opacity-50 disabled:cursor-not-allowed"
     ],
     section: [
-      'xda32kfseccmd overflow-hidden py-2 px-2 text-fg',
-      '[&_[cmdk-group-heading]]:select-none [&_[cmdk-group-heading]]:ml-[1px] [&_[cmdk-group-heading]]:py-2 [&_[cmdk-group-heading]]:text-[0.8rem] [&_[cmdk-group-heading]]:text-muted-fg'
+      "xda32kfseccmd overflow-hidden py-2 px-2 text-fg",
+      "[&_[cmdk-group-heading]]:select-none [&_[cmdk-group-heading]]:ml-[1px] [&_[cmdk-group-heading]]:py-2 [&_[cmdk-group-heading]]:text-[0.8rem] [&_[cmdk-group-heading]]:text-muted-fg"
     ],
     modalOverlay: [
-      'fixed inset-0 max-h-[--visual-viewport-height] z-50 bg-black/15 dark:bg-black/40 entering:animate-in entering:fade-in-0 exiting:animate-in exiting:fade-out-0'
+      "fixed inset-0 max-h-[--visual-viewport-height] z-50 bg-black/15 dark:bg-black/40 entering:animate-in entering:fade-in-0 exiting:animate-in exiting:fade-out-0"
     ],
     modal: [
-      'fixed bottom-0 left-[50%] top-auto z-50 grid h-[calc(100vh-35%)] w-full max-w-full translate-x-[-50%] gap-4 overflow-hidden rounded-t-xl bg-background shadow-lg ring-1 ring-dark/5 dark:ring-border sm:bottom-auto sm:top-[6rem] sm:h-auto sm:w-full sm:max-w-2xl sm:rounded-xl',
-      'sm:entering:slide-in-from-bottom-auto entering:duration-300 entering:animate-in entering:fade-in-0 entering:slide-in-from-bottom-1/2 entering:slide-in-from-left-1/2 entering:[transition-timing-function:ease-out] sm:entering:duration-300 sm:entering:slide-in-from-top-[2rem]',
-      'exiting:duration-300 exiting:animate-out exiting:fade-out-0 exiting:slide-out-to-bottom-1/2 exiting:slide-out-to-left-1/2 exiting:[transition-timing-function:ease] sm:exiting:slide-out-to-top-[4rem]'
+      "fixed bottom-0 left-[50%] top-auto z-50 grid h-[calc(100vh-35%)] w-full max-w-full translate-x-[-50%] gap-4 overflow-hidden rounded-t-xl bg-background shadow-lg ring-1 ring-dark/5 dark:ring-border sm:bottom-auto sm:top-[6rem] sm:h-auto sm:w-full sm:max-w-2xl sm:rounded-xl",
+      "sm:entering:slide-in-from-bottom-auto entering:duration-300 entering:animate-in entering:fade-in-0 entering:slide-in-from-bottom-1/2 entering:slide-in-from-left-1/2 entering:[transition-timing-function:ease-out] sm:entering:duration-300 sm:entering:slide-in-from-top-[2rem]",
+      "exiting:duration-300 exiting:animate-out exiting:fade-out-0 exiting:slide-out-to-bottom-1/2 exiting:slide-out-to-left-1/2 exiting:[transition-timing-function:ease] sm:exiting:slide-out-to-top-[4rem]"
     ],
     closeButton: [
-      'absolute right-3 top-1.5 [&>span>[data-slot=icon]]:text-muted-fg pressed:[&_[data-slot=icon]]:text-fg lg:top-3.5 rounded-full border lg:border-border border-transparent lg:bg-secondary/50 py-2.5 px-2.5 lg:py-0.5 text-xs transition-opacity data-[state=open]:bg-secondary data-[state=open]:text-muted-fg lg:focus:border-fg/70 focus:outline-none lg:focus:ring-2 lg:focus:ring-ring disabled:pointer-events-none',
-      'focus:outline-none lg:focus:bg-primary/10 lg:focus:ring-2 lg:focus:ring-primary/20 lg:focus:border-primary/70',
-      'disabled:pointer-events-none'
+      "absolute right-3 top-1.5 [&>span>[data-slot=icon]]:text-muted-fg pressed:[&_[data-slot=icon]]:text-fg lg:top-3.5 rounded-full border lg:border-border border-transparent lg:bg-secondary/50 py-2.5 px-2.5 lg:py-0.5 text-xs transition-opacity data-[state=open]:bg-secondary data-[state=open]:text-muted-fg lg:focus:border-fg/70 focus:outline-none lg:focus:ring-2 lg:focus:ring-ring disabled:pointer-events-none",
+      "focus:outline-none lg:focus:bg-primary/10 lg:focus:ring-2 lg:focus:ring-primary/20 lg:focus:border-primary/70",
+      "disabled:pointer-events-none"
     ],
-    empty: 'py-6 text-center text-sm text-muted-fg x3tmpy',
-    kbdKeyboard: 'lg:block hidden group-data-[selected=true]:opacity-60',
-    description: 'sm:inline hidden text-sm ml-auto',
+    empty: "py-6 text-center text-sm text-muted-fg x3tmpy",
+    kbdKeyboard: "lg:block hidden group-data-[selected=true]:opacity-60",
+    description: "sm:inline hidden text-sm ml-auto",
     item: [
-      'group relative flex cursor-default select-none items-center rounded-lg py-2 text-sm outline-none',
+      "group relative flex cursor-default select-none items-center rounded-lg py-2 text-sm outline-none",
       // selected
-      'data-[selected=true]:bg-primary data-[selected=true]:text-primary-fg [&[data-selected=true]_[data-slot=icon]]:text-primary-fg',
+      "data-[selected=true]:bg-primary data-[selected=true]:text-primary-fg [&[data-selected=true]_[data-slot=icon]]:text-primary-fg",
       // danger
-      'data-[danger=true]:text-danger data-[danger=true]:data-[selected=true]:bg-danger data-[danger=true]:data-[selected=true]:text-danger-fg',
+      "data-[danger=true]:text-danger data-[danger=true]:data-[selected=true]:bg-danger data-[danger=true]:data-[selected=true]:text-danger-fg",
       // disabled
-      'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',
+      "data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
       // icon
-      '[&_[data-slot=icon]]:mr-2 [&_[data-slot=icon]]:size-[1.10rem] [&_[data-slot=icon]]:shrink-0 [&_[data-slot=icon]]:text-muted-fg',
-      '[&_[data-slot=avatar]]:mr-2 [&_[data-slot=avatar]]:size-[1.10rem] [&_[data-slot=avatar]]:shrink-0'
+      "[&_[data-slot=icon]]:mr-2 [&_[data-slot=icon]]:size-[1.10rem] [&_[data-slot=icon]]:shrink-0 [&_[data-slot=icon]]:text-muted-fg",
+      "[&_[data-slot=avatar]]:mr-2 [&_[data-slot=avatar]]:size-[1.10rem] [&_[data-slot=avatar]]:shrink-0"
     ]
   },
 
   variants: {
     isDanger: {
-      true: 'text-danger data-[selected=true]:bg-danger data-[selected=true]:text-danger-fg [&[data-selected=true]_[data-slot=icon]]:text-danger-fg'
+      true: "text-danger data-[selected=true]:bg-danger data-[selected=true]:text-danger-fg [&[data-selected=true]_[data-slot=icon]]:text-danger-fg"
     }
   }
 })
@@ -120,7 +120,7 @@ const CommandMenu = ({
   children,
   ...props
 }: CommandMenuProps) => {
-  const isDesktop = useMediaQuery('(min-width: 1024px)')
+  const isDesktop = useMediaQuery("(min-width: 1024px)")
   return (
     <CommandMenuContext.Provider value={{ hideSearchIndicator, hideCloseButton, messageOnEmpty }}>
       <ModalOverlay isDismissable className={modalOverlay()} {...props}>
@@ -163,7 +163,7 @@ const CommandMenuInput = React.forwardRef<
       <CommandPrimitive.Input
         autoFocus
         ref={ref}
-        className={input({ className: hideSearchIndicator ? 'pl-1' : className })}
+        className={input({ className: hideSearchIndicator ? "pl-1" : className })}
         {...props}
       />
     </div>
@@ -180,7 +180,7 @@ const CommandMenuList = ({ className, ...props }: CommandMenuListProps) => {
     <CommandPrimitive.List className={list({ className })} {...props}>
       {messageOnEmpty !== false && (
         <CommandMenuEmpty>
-          {typeof messageOnEmpty === 'string' ? messageOnEmpty : 'No results found.'}
+          {typeof messageOnEmpty === "string" ? messageOnEmpty : "No results found."}
         </CommandMenuEmpty>
       )}
       {props.children}
@@ -224,7 +224,7 @@ interface CommandItemProps extends React.ComponentProps<typeof CommandPrimitive.
 const CommandMenuItem = ({ isDanger, className, ...props }: CommandItemProps) => {
   return (
     <CommandPrimitive.Item
-      data-danger={isDanger ? 'true' : undefined}
+      data-danger={isDanger ? "true" : undefined}
       className={item({ isDanger, className })}
       {...props}
     />
@@ -232,7 +232,7 @@ const CommandMenuItem = ({ isDanger, className, ...props }: CommandItemProps) =>
 }
 
 interface CommandMenuDescriptionProps extends TextProps {
-  intent?: 'danger' | 'warning' | 'success' | 'primary' | 'secondary'
+  intent?: "danger" | "warning" | "success" | "primary" | "secondary"
 }
 
 const CommandMenuDescription = ({ intent, className, ...props }: CommandMenuDescriptionProps) => {
@@ -242,15 +242,15 @@ const CommandMenuDescription = ({ intent, className, ...props }: CommandMenuDesc
       slot="description"
       className={description({
         className: twJoin(
-          intent === 'danger'
-            ? 'group-data-[selected=true]:text-primary-fg/70 text-danger/90'
-            : intent === 'warning'
-              ? 'group-data-[selected=true]:text-primary-fg/70 text-warning/90'
-              : intent === 'success'
-                ? 'group-data-[selected=true]:text-primary-fg/70 text-success/90'
-                : intent === 'primary'
-                  ? 'group-data-[selected=true]:text-white/70 text-primary/90'
-                  : 'group-data-[selected=true]:text-primary-fg/70 text-muted-fg',
+          intent === "danger"
+            ? "group-data-[selected=true]:text-primary-fg/70 text-danger/90"
+            : intent === "warning"
+              ? "group-data-[selected=true]:text-primary-fg/70 text-warning/90"
+              : intent === "success"
+                ? "group-data-[selected=true]:text-primary-fg/70 text-success/90"
+                : intent === "primary"
+                  ? "group-data-[selected=true]:text-white/70 text-primary/90"
+                  : "group-data-[selected=true]:text-primary-fg/70 text-muted-fg",
           className
         )
       })}
@@ -259,7 +259,7 @@ const CommandMenuDescription = ({ intent, className, ...props }: CommandMenuDesc
 }
 
 const CommandMenuKeyboard = (props: KeyboardProps) => (
-  <Keyboard classNames={{ kbd: kbdKeyboard(), base: '-mr-2.5' }} {...props} />
+  <Keyboard classNames={{ kbd: kbdKeyboard(), base: "-mr-2.5" }} {...props} />
 )
 
 CommandMenu.Empty = CommandMenuEmpty
diff --git a/components/ui/container.tsx b/components/ui/container.tsx
index 80297e9c..da81f054 100644
--- a/components/ui/container.tsx
+++ b/components/ui/container.tsx
@@ -1,14 +1,14 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { cn } from './primitive'
+import { cn } from "./primitive"
 
 const Container = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
-    <div className={cn('mx-auto max-w-7xl px-4 sm:px-6 lg:px-8', className)} {...props} ref={ref} />
+    <div className={cn("mx-auto max-w-7xl px-4 sm:px-6 lg:px-8", className)} {...props} ref={ref} />
   )
 )
-Container.displayName = 'Container'
+Container.displayName = "Container"
 
 export { Container }
diff --git a/components/ui/context-menu.tsx b/components/ui/context-menu.tsx
index 0164675c..b6b903a8 100644
--- a/components/ui/context-menu.tsx
+++ b/components/ui/context-menu.tsx
@@ -1,12 +1,12 @@
-'use client'
+"use client"
 
-import React, { useRef, useState } from 'react'
+import React, { useRef, useState } from "react"
 
-import { tv } from 'tailwind-variants'
+import { tv } from "tailwind-variants"
 
-import type { MenuContentProps } from './menu'
-import { Menu } from './menu'
-import { focusButtonStyles } from './primitive'
+import type { MenuContentProps } from "./menu"
+import { Menu } from "./menu"
+import { focusButtonStyles } from "./primitive"
 
 interface ContextMenuTriggerContextType {
   buttonRef: React.RefObject<HTMLButtonElement>
@@ -23,7 +23,7 @@ const ContextMenuTriggerContext = React.createContext<ContextMenuTriggerContextT
 const useContextMenuTrigger = () => {
   const context = React.useContext(ContextMenuTriggerContext)
   if (!context) {
-    throw new Error('useContextMenuTrigger must be used within a ContextMenuTrigger')
+    throw new Error("useContextMenuTrigger must be used within a ContextMenuTrigger")
   }
   return context
 }
@@ -50,11 +50,11 @@ const ContextMenu = ({ children }: ContextMenuRootComponent) => {
 
 const contextMenuTriggerStyles = tv({
   extend: focusButtonStyles,
-  base: 'focus:outline-none cursor-default',
+  base: "focus:outline-none cursor-default",
   variants: {
     isDisabled: {
-      false: 'forced-colors:disabled:text-[GrayText]',
-      true: 'cursor-default opacity-60 forced-colors:disabled:text-[GrayText]'
+      false: "forced-colors:disabled:text-[GrayText]",
+      true: "cursor-default opacity-60 forced-colors:disabled:text-[GrayText]"
     }
   }
 })
@@ -86,7 +86,7 @@ const ContextMenuTrigger = ({ className, ...props }: ContextMenuTriggerProps) =>
 interface ContextMenuContentProps<T>
   extends Omit<
     MenuContentProps<T>,
-    'showArrow' | 'isOpen' | 'onOpenChange' | 'triggerRef' | 'placement' | 'shouldFlip'
+    "showArrow" | "isOpen" | "onOpenChange" | "triggerRef" | "placement" | "shouldFlip"
   > {}
 
 const ContextMenuContent = <T extends object>(props: ContextMenuContentProps<T>) => {
diff --git a/components/ui/date-field.tsx b/components/ui/date-field.tsx
index d4ad6b8a..077992db 100644
--- a/components/ui/date-field.tsx
+++ b/components/ui/date-field.tsx
@@ -1,4 +1,4 @@
-'use client'
+"use client"
 
 import {
   DateField as DateFieldPrimitive,
@@ -8,11 +8,11 @@ import {
   DateSegment,
   type DateValue,
   type ValidationResult
-} from 'react-aria-components'
-import { tv } from 'tailwind-variants'
+} from "react-aria-components"
+import { tv } from "tailwind-variants"
 
-import { Description, FieldError, fieldGroupStyles, Label } from './field'
-import { cn, cr, ctr } from './primitive'
+import { Description, FieldError, fieldGroupStyles, Label } from "./field"
+import { cn, cr, ctr } from "./primitive"
 
 interface DateFieldProps<T extends DateValue> extends DateFieldPrimitiveProps<T> {
   label?: string
@@ -27,7 +27,7 @@ const DateField = <T extends DateValue>({
   ...props
 }: DateFieldProps<T>) => {
   return (
-    <DateFieldPrimitive {...props} className={ctr(props.className, 'flex flex-col gap-1')}>
+    <DateFieldPrimitive {...props} className={ctr(props.className, "flex flex-col gap-1")}>
       {label && <Label>{label}</Label>}
       <DateInput />
       {description && <Description>{description}</Description>}
@@ -37,31 +37,31 @@ const DateField = <T extends DateValue>({
 }
 
 const segmentStyles = tv({
-  base: 'inline shrink-0 rounded p-0.5 tracking-wider text-fg caret-transparent outline outline-0 forced-color-adjust-none type-literal:px-0 lg:text-sm forced-colors:text-[ButtonText]',
+  base: "inline shrink-0 rounded p-0.5 tracking-wider text-fg caret-transparent outline outline-0 forced-color-adjust-none type-literal:px-0 lg:text-sm forced-colors:text-[ButtonText]",
   variants: {
     isPlaceholder: {
-      true: 'text-muted-fg'
+      true: "text-muted-fg"
     },
     isDisabled: {
-      true: 'text-fg/50 forced-colors:text-[GrayText]'
+      true: "text-fg/50 forced-colors:text-[GrayText]"
     },
     isFocused: {
       true: [
-        'bg-primary text-primary-fg forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]',
-        'invalid:bg-danger invalid:text-danger-fg'
+        "bg-primary text-primary-fg forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]",
+        "invalid:bg-danger invalid:text-danger-fg"
       ]
     }
   }
 })
 
-const DateInput = (props: Omit<DateInputProps, 'children'>) => {
+const DateInput = (props: Omit<DateInputProps, "children">) => {
   return (
     <DateInputPrimitive
       className={cr(props.className, (className, renderProps) =>
         fieldGroupStyles({
           ...renderProps,
           className: cn(
-            'min-w-sm block font-mono disabled:bg-secondary uppercase w-full py-2 px-2.5 text-base lg:text-sm/[1.4rem]',
+            "min-w-sm block font-mono disabled:bg-secondary uppercase w-full py-2 px-2.5 text-base lg:text-sm/[1.4rem]",
             className
           )
         })
diff --git a/components/ui/date-picker.tsx b/components/ui/date-picker.tsx
index d061be2a..b204a6f8 100644
--- a/components/ui/date-picker.tsx
+++ b/components/ui/date-picker.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import * as React from 'react'
+import * as React from "react"
 
-import { IconCalendarDays } from 'justd-icons'
+import { IconCalendarDays } from "justd-icons"
 import {
   DatePicker as DatePickerPrimitive,
   type DatePickerProps as DatePickerPrimitiveProps,
@@ -10,37 +10,37 @@ import {
   type DialogProps,
   type PopoverProps,
   type ValidationResult
-} from 'react-aria-components'
-import { tv } from 'tailwind-variants'
+} from "react-aria-components"
+import { tv } from "tailwind-variants"
 
-import { Button } from './button'
-import { Calendar } from './calendar'
-import { DateInput } from './date-field'
-import { Description, FieldError, FieldGroup, Label } from './field'
-import { Popover } from './popover'
-import { ctr } from './primitive'
-import { RangeCalendar } from './range-calendar'
+import { Button } from "./button"
+import { Calendar } from "./calendar"
+import { DateInput } from "./date-field"
+import { Description, FieldError, FieldGroup, Label } from "./field"
+import { Popover } from "./popover"
+import { ctr } from "./primitive"
+import { RangeCalendar } from "./range-calendar"
 
 const datePickerStyles = tv({
   slots: {
-    base: 'group flex flex-col gap-1',
+    base: "group flex flex-col gap-1",
     datePickerIcon:
-      'group mr-1 h-7 dark:[&>[data-slot=icon]]:text-zinc-400 [&>[data-slot=icon]]:text-zinc-800 w-8 rounded outline-offset-0 hover:bg-transparent pressed:bg-transparent',
-    calendarIcon: 'size-4 text-muted-fg group-open:text-fg',
-    datePickerInput: 'w-full px-2 uppercase text-base lg:text-sm',
-    dateRangePickerInputStart: 'px-2 lg:text-sm uppercase text-base',
-    dateRangePickerInputEnd: 'flex-1 px-2 py-1.5 lg:text-sm uppercase text-base',
+      "group mr-1 h-7 dark:[&>[data-slot=icon]]:text-zinc-400 [&>[data-slot=icon]]:text-zinc-800 w-8 rounded outline-offset-0 hover:bg-transparent pressed:bg-transparent",
+    calendarIcon: "size-4 text-muted-fg group-open:text-fg",
+    datePickerInput: "w-full px-2 uppercase text-base lg:text-sm",
+    dateRangePickerInputStart: "px-2 lg:text-sm uppercase text-base",
+    dateRangePickerInputEnd: "flex-1 px-2 py-1.5 lg:text-sm uppercase text-base",
     dateRangePickerDash:
-      'text-zinc-800 group-disabled:text-zinc-200 dark:text-zinc-200 group-disabled:dark:text-zinc-600 forced-colors:text-[ButtonText] group-disabled:forced-colors:text-[GrayText]'
+      "text-zinc-800 group-disabled:text-zinc-200 dark:text-zinc-200 group-disabled:dark:text-zinc-600 forced-colors:text-[ButtonText] group-disabled:forced-colors:text-[GrayText]"
   }
 })
 
 const { base, datePickerIcon, calendarIcon, datePickerInput } = datePickerStyles()
 
 interface DatePickerOverlayProps
-  extends Omit<DialogProps, 'children' | 'className' | 'style'>,
-    Omit<PopoverProps, 'children' | 'className' | 'style'> {
-  className?: string | DialogProps['className'] | PopoverProps['className']
+  extends Omit<DialogProps, "children" | "className" | "style">,
+    Omit<PopoverProps, "children" | "className" | "style"> {
+  className?: string | DialogProps["className"] | PopoverProps["className"]
   children?: React.ReactNode
   closeButton?: boolean
   range?: boolean
diff --git a/components/ui/date-range-picker.tsx b/components/ui/date-range-picker.tsx
index fef07d05..781089ba 100644
--- a/components/ui/date-range-picker.tsx
+++ b/components/ui/date-range-picker.tsx
@@ -1,27 +1,27 @@
-'use client'
+"use client"
 
-import * as React from 'react'
+import * as React from "react"
 
 import {
   DateRangePicker as DateRangePickerPrimitive,
   type DateRangePickerProps as DateRangePickerPrimitiveProps,
   type DateValue,
   type ValidationResult
-} from 'react-aria-components'
-import { tv } from 'tailwind-variants'
+} from "react-aria-components"
+import { tv } from "tailwind-variants"
 
-import { DateInput } from './date-field'
-import { DatePickerIcon, DatePickerOverlay } from './date-picker'
-import { Description, FieldError, FieldGroup, Label } from './field'
-import { ctr } from './primitive'
+import { DateInput } from "./date-field"
+import { DatePickerIcon, DatePickerOverlay } from "./date-picker"
+import { Description, FieldError, FieldGroup, Label } from "./field"
+import { ctr } from "./primitive"
 
 const dateRangePickerStyles = tv({
   slots: {
-    base: 'group flex flex-col gap-1',
-    dateRangePickerInputStart: 'px-2 lg:text-sm font-mono uppercase text-base',
-    dateRangePickerInputEnd: 'flex-1 px-2 py-1.5 font-mono uppercase text-base lg:text-sm',
+    base: "group flex flex-col gap-1",
+    dateRangePickerInputStart: "px-2 lg:text-sm font-mono uppercase text-base",
+    dateRangePickerInputEnd: "flex-1 px-2 py-1.5 font-mono uppercase text-base lg:text-sm",
     dateRangePickerDash:
-      'text-zinc-800 group-disabled:text-zinc-200 dark:text-zinc-200 group-disabled:dark:text-zinc-600 forced-colors:text-[ButtonText] group-disabled:forced-colors:text-[GrayText]'
+      "text-zinc-800 group-disabled:text-zinc-200 dark:text-zinc-200 group-disabled:dark:text-zinc-600 forced-colors:text-[ButtonText] group-disabled:forced-colors:text-[GrayText]"
   }
 })
 const { base, dateRangePickerInputStart, dateRangePickerInputEnd, dateRangePickerDash } =
diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx
index 49368a49..6f2e1691 100644
--- a/components/ui/dialog.tsx
+++ b/components/ui/dialog.tsx
@@ -1,44 +1,44 @@
-'use client'
+"use client"
 
-import * as React from 'react'
+import * as React from "react"
 
-import { IconX } from 'justd-icons'
+import { IconX } from "justd-icons"
 import {
   Dialog as DialogPrimitive,
   type DialogProps as DialogPrimitiveProps,
   OverlayTriggerStateContext
-} from 'react-aria-components'
-import { tv } from 'tailwind-variants'
+} from "react-aria-components"
+import { tv } from "tailwind-variants"
 
-import type { ButtonProps } from './button'
-import { Button } from './button'
-import type { HeadingProps } from './heading'
-import { Heading } from './heading'
-import { useMediaQuery } from './primitive'
+import type { ButtonProps } from "./button"
+import { Button } from "./button"
+import type { HeadingProps } from "./heading"
+import { Heading } from "./heading"
+import { useMediaQuery } from "./primitive"
 
 const dialogStyles = tv({
   slots: {
     root: [
-      'dlc relative flex max-h-[inherit] [&::-webkit-scrollbar]:size-0.5 [scrollbar-width:thin] flex-col overflow-hidden outline-none',
-      'sm:[&:not(:has([data-slot=dialog-body]))]:px-6 sm:[&:has([data-slot=dialog-body])_[data-slot=dialog-header]]:px-6 sm:[&:has([data-slot=dialog-body])_[data-slot=dialog-footer]]:px-6',
-      '[&:not(:has([data-slot=dialog-body]))]:px-4 [&:has([data-slot=dialog-body])_[data-slot=dialog-header]]:px-4 [&:has([data-slot=dialog-body])_[data-slot=dialog-footer]]:px-4'
+      "dlc relative flex max-h-[inherit] [&::-webkit-scrollbar]:size-0.5 [scrollbar-width:thin] flex-col overflow-hidden outline-none",
+      "sm:[&:not(:has([data-slot=dialog-body]))]:px-6 sm:[&:has([data-slot=dialog-body])_[data-slot=dialog-header]]:px-6 sm:[&:has([data-slot=dialog-body])_[data-slot=dialog-footer]]:px-6",
+      "[&:not(:has([data-slot=dialog-body]))]:px-4 [&:has([data-slot=dialog-body])_[data-slot=dialog-header]]:px-4 [&:has([data-slot=dialog-body])_[data-slot=dialog-footer]]:px-4"
     ],
-    header: 'relative flex flex-col pb-3 pt-4 sm:pt-6',
-    title: 'flex flex-1 items-center',
-    description: 'text-sm block text-muted-fg mt-0.5 sm:mt-1',
+    header: "relative flex flex-col pb-3 pt-4 sm:pt-6",
+    title: "flex flex-1 items-center",
+    description: "text-sm block text-muted-fg mt-0.5 sm:mt-1",
     body: [
-      'flex flex-1 flex-col gap-2 overflow-auto px-4 sm:px-6 py-1',
-      'max-h-[calc(var(--visual-viewport-height)-var(--visual-viewport-vertical-padding)-var(--dialog-header-height,0px)-var(--dialog-footer-height,0px))]'
+      "flex flex-1 flex-col gap-2 overflow-auto px-4 sm:px-6 py-1",
+      "max-h-[calc(var(--visual-viewport-height)-var(--visual-viewport-vertical-padding)-var(--dialog-header-height,0px)-var(--dialog-footer-height,0px))]"
     ],
-    footer: 'mt-auto flex flex-col-reverse justify-between gap-3 pb-4 sm:pb-6 pt-4 sm:flex-row',
-    closeIndicator: 'close absolute right-2 top-2 size-6 z-50'
+    footer: "mt-auto flex flex-col-reverse justify-between gap-3 pb-4 sm:pb-6 pt-4 sm:flex-row",
+    closeIndicator: "close absolute right-2 top-2 size-6 z-50"
   }
 })
 
 const { root, header, title, description, body, footer, closeIndicator } = dialogStyles()
 
 const Dialog = ({ role, className, ...props }: DialogPrimitiveProps) => {
-  return <DialogPrimitive {...props} role={role ?? 'dialog'} className={root({ className })} />
+  return <DialogPrimitive {...props} role={role ?? "dialog"} className={root({ className })} />
 }
 
 interface DialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -58,7 +58,7 @@ const Header = ({ className, ...props }: DialogHeaderProps) => {
     const observer = new ResizeObserver((entries) => {
       for (const entry of entries) {
         header.parentElement?.style.setProperty(
-          '--dialog-header-height',
+          "--dialog-header-height",
           `${entry.target.clientHeight}px`
         )
       }
@@ -72,7 +72,7 @@ const Header = ({ className, ...props }: DialogHeaderProps) => {
     <div data-slot="dialog-header" ref={headerRef} className={header({ className })}>
       {props.title && <Title>{props.title}</Title>}
       {props.description && <Description>{props.description}</Description>}
-      {!props.title && typeof props.children === 'string' ? <Title {...props} /> : props.children}
+      {!props.title && typeof props.children === "string" ? <Title {...props} /> : props.children}
     </div>
   )
 }
@@ -81,7 +81,7 @@ interface DialogTitleProps extends HeadingProps {
   className?: string
 }
 
-const Title = ({ tracking = 'tight', level = 2, className, ...props }: DialogTitleProps) => (
+const Title = ({ tracking = "tight", level = 2, className, ...props }: DialogTitleProps) => (
   <Heading
     slot="title"
     tracking={tracking}
@@ -112,7 +112,7 @@ const Footer = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) =
     const observer = new ResizeObserver((entries) => {
       for (const entry of entries) {
         footer.parentElement?.style.setProperty(
-          '--dialog-footer-height',
+          "--dialog-footer-height",
           `${entry.target.clientHeight}px`
         )
       }
@@ -142,7 +142,7 @@ interface CloseButtonIndicatorProps {
 }
 
 const CloseIndicator = ({ className, ...props }: CloseButtonIndicatorProps) => {
-  const isMobile = useMediaQuery('(max-width: 600px)')
+  const isMobile = useMediaQuery("(max-width: 600px)")
   const buttonRef = React.useRef<HTMLButtonElement>(null)
 
   React.useEffect(() => {
diff --git a/components/ui/drawer.tsx b/components/ui/drawer.tsx
index 530b2e72..3e4f4c2f 100644
--- a/components/ui/drawer.tsx
+++ b/components/ui/drawer.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import type { PanInfo } from 'framer-motion'
+import type { PanInfo } from "framer-motion"
 import {
   animate,
   AnimatePresence,
@@ -12,15 +12,15 @@ import {
   useMotionValue,
   useMotionValueEvent,
   useTransform
-} from 'framer-motion'
-import type { DialogProps } from 'react-aria-components'
-import { Button, type ButtonProps, Modal, ModalOverlay } from 'react-aria-components'
-import { twJoin } from 'tailwind-merge'
+} from "framer-motion"
+import type { DialogProps } from "react-aria-components"
+import { Button, type ButtonProps, Modal, ModalOverlay } from "react-aria-components"
+import { twJoin } from "tailwind-merge"
 
-import { Dialog } from './dialog'
+import { Dialog } from "./dialog"
 
 const inertiaTransition: Inertia = {
-  type: 'inertia',
+  type: "inertia",
   bounceStiffness: 300,
   bounceDamping: 60,
   timeConstant: 300
@@ -44,7 +44,7 @@ const DrawerContext = React.createContext<DrawerContextType | undefined>(undefin
 const useDrawerContext = () => {
   const context = React.useContext(DrawerContext)
   if (context === undefined) {
-    throw new Error('useDrawerContext must be used within a Drawer')
+    throw new Error("useDrawerContext must be used within a Drawer")
   }
   return context
 }
@@ -53,10 +53,10 @@ const ModalPrimitive = motion(Modal)
 const ModalOverlayPrimitive = motion(ModalOverlay)
 
 interface DrawerOverlayPrimitiveProps
-  extends Omit<React.ComponentProps<typeof ModalOverlayPrimitive>, 'isOpen' | 'onOpenChange'> {
-  'aria-label'?: DialogProps['aria-label']
-  'aria-labelledby'?: DialogProps['aria-labelledby']
-  role?: DialogProps['role']
+  extends Omit<React.ComponentProps<typeof ModalOverlayPrimitive>, "isOpen" | "onOpenChange"> {
+  "aria-label"?: DialogProps["aria-label"]
+  "aria-labelledby"?: DialogProps["aria-labelledby"]
+  role?: DialogProps["role"]
 }
 
 const DrawerContentPrimitive = ({ children, ...props }: DrawerOverlayPrimitiveProps) => {
@@ -68,11 +68,11 @@ const DrawerContentPrimitive = ({ children, ...props }: DrawerOverlayPrimitivePr
   const bgOpacity = useTransform(y, [0, h], [0.15, 0])
   const bg = useMotionTemplate`rgba(0, 0, 0, ${bgOpacity})`
 
-  const root = document.getElementsByTagName('main')[0] as HTMLElement
+  const root = document.getElementsByTagName("main")[0] as HTMLElement
 
   const bodyBorderRadius = useTransform(y, [0, h], [drawerRadius, 0])
 
-  useMotionValueEvent(bodyBorderRadius, 'change', (v) => (root.style.borderRadius = `${v}px`))
+  useMotionValueEvent(bodyBorderRadius, "change", (v) => (root.style.borderRadius = `${v}px`))
 
   const onDragEnd = (_: any, { offset, velocity }: PanInfo) => {
     if (offset.y > h * 0.4 || velocity.y > 10) {
@@ -89,8 +89,8 @@ const DrawerContentPrimitive = ({ children, ...props }: DrawerOverlayPrimitivePr
         isOpen
         onOpenChange={closeDrawer}
         className={twJoin([
-          'fixed touch-none will-change-transform left-0 top-0 isolate z-50 h-[--visual-viewport-height] w-full',
-          'flex items-end [--visual-viewport-vertical-padding:100px]'
+          "fixed touch-none will-change-transform left-0 top-0 isolate z-50 h-[--visual-viewport-height] w-full",
+          "flex items-end [--visual-viewport-vertical-padding:100px]"
         ])}
         style={{
           backgroundColor: bg as any
@@ -98,8 +98,8 @@ const DrawerContentPrimitive = ({ children, ...props }: DrawerOverlayPrimitivePr
       >
         <ModalPrimitive
           className={twJoin(
-            'max-h-full flex flex-col w-full rounded-t-2xl sm:rounded-lg overflow-hidden bg-overlay text-overlay-fg text-left align-middle shadow-lg',
-            'ring-1 ring-zinc-950/5 dark:ring-white/15'
+            "max-h-full flex flex-col w-full rounded-t-2xl sm:rounded-lg overflow-hidden bg-overlay text-overlay-fg text-left align-middle shadow-lg",
+            "ring-1 ring-zinc-950/5 dark:ring-white/15"
           )}
           initial={{ y: h }}
           animate={{ y: 0 }}
@@ -107,8 +107,8 @@ const DrawerContentPrimitive = ({ children, ...props }: DrawerOverlayPrimitivePr
           transition={staticTransition}
           style={{
             y,
-            top: 'auto',
-            height: contentHeight > 0 ? `${contentHeight + drawerMargin}px` : 'auto',
+            top: "auto",
+            height: contentHeight > 0 ? `${contentHeight + drawerMargin}px` : "auto",
             maxHeight: `calc(100% - ${drawerMargin}px)`
           }}
           drag="y"
@@ -143,11 +143,11 @@ const DrawerContentPrimitive = ({ children, ...props }: DrawerOverlayPrimitivePr
   )
 }
 
-interface DrawerPrimitiveProps extends Omit<React.ComponentProps<typeof Modal>, 'children'> {
-  'aria-label'?: DialogProps['aria-label']
-  'aria-labelledby'?: DialogProps['aria-labelledby']
-  role?: DialogProps['role']
-  children?: DialogProps['children']
+interface DrawerPrimitiveProps extends Omit<React.ComponentProps<typeof Modal>, "children"> {
+  "aria-label"?: DialogProps["aria-label"]
+  "aria-labelledby"?: DialogProps["aria-labelledby"]
+  role?: DialogProps["role"]
+  children?: DialogProps["children"]
 }
 
 const DrawerPrimitive = (props: DrawerPrimitiveProps) => {
@@ -160,7 +160,7 @@ const DrawerPrimitive = (props: DrawerPrimitiveProps) => {
     <motion.div
       style={{
         borderRadius: bodyBorderRadius,
-        transformOrigin: 'center 0'
+        transformOrigin: "center 0"
       }}
     >
       <AnimatePresence>{isOpen && <>{props.children}</>}</AnimatePresence>
@@ -208,7 +208,7 @@ const Drawer = ({
     }
   }
 
-  if (typeof window === 'undefined') {
+  if (typeof window === "undefined") {
     return null
   }
 
@@ -228,12 +228,12 @@ const DrawerContent = ({
     <DrawerPrimitive>
       <DrawerContentPrimitive {...props}>
         <Dialog
-          role={props.role ?? 'dialog'}
-          aria-label={props['aria-label'] ?? undefined}
-          aria-labelledby={props['aria-labelledby'] ?? undefined}
+          role={props.role ?? "dialog"}
+          aria-label={props["aria-label"] ?? undefined}
+          aria-labelledby={props["aria-labelledby"] ?? undefined}
           className="sm:max-w-lg mx-auto"
         >
-          {(values) => <>{typeof children === 'function' ? children(values) : children}</>}
+          {(values) => <>{typeof children === "function" ? children(values) : children}</>}
         </Dialog>
       </DrawerContentPrimitive>
     </DrawerPrimitive>
@@ -241,7 +241,7 @@ const DrawerContent = ({
 }
 
 const DrawerHeader = ({ className, ...props }: React.ComponentProps<typeof Dialog.Header>) => (
-  <Dialog.Header className={twJoin('pt-2', className)} {...props} />
+  <Dialog.Header className={twJoin("pt-2", className)} {...props} />
 )
 
 const DrawerBody = ({
@@ -249,7 +249,7 @@ const DrawerBody = ({
   className,
   ...props
 }: React.ComponentProps<typeof Dialog.Body>) => (
-  <Dialog.Body {...props} className={twJoin('px-4', className)}>
+  <Dialog.Body {...props} className={twJoin("px-4", className)}>
     {children}
   </Dialog.Body>
 )
@@ -259,7 +259,7 @@ const DrawerFooter = ({
   className,
   ...props
 }: React.ComponentProps<typeof Dialog.Footer>) => (
-  <Dialog.Footer {...props} className={twJoin('pb-2', className)}>
+  <Dialog.Footer {...props} className={twJoin("pb-2", className)}>
     {children}
   </Dialog.Footer>
 )
diff --git a/components/ui/drop-zone.tsx b/components/ui/drop-zone.tsx
index 968ca52b..ff223cac 100644
--- a/components/ui/drop-zone.tsx
+++ b/components/ui/drop-zone.tsx
@@ -1,18 +1,18 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { DropZone as DropPrimitiveZone, type DropZoneProps } from 'react-aria-components'
-import { tv } from 'tailwind-variants'
+import { DropZone as DropPrimitiveZone, type DropZoneProps } from "react-aria-components"
+import { tv } from "tailwind-variants"
 
-import { cr, focusStyles } from './primitive'
+import { cr, focusStyles } from "./primitive"
 
 const dropZoneStyles = tv({
   extend: focusStyles,
-  base: 'group has-[slot=description]:text-center flex max-h-[200px] p-6 max-w-xl flex-col items-center justify-center gap-2 rounded-md border border-dashed text-sm',
+  base: "group has-[slot=description]:text-center flex max-h-[200px] p-6 max-w-xl flex-col items-center justify-center gap-2 rounded-md border border-dashed text-sm",
   variants: {
     isDropTarget: {
-      true: 'bg-primary/10 ring-4 ring-primary/20 [&_.text-muted-fg]:text-primary-fg border-solid border-primary'
+      true: "bg-primary/10 ring-4 ring-primary/20 [&_.text-muted-fg]:text-primary-fg border-solid border-primary"
     }
   }
 })
diff --git a/components/ui/dropdown.tsx b/components/ui/dropdown.tsx
index b265273b..86711d07 100644
--- a/components/ui/dropdown.tsx
+++ b/components/ui/dropdown.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { IconCheck } from 'justd-icons'
+import { IconCheck } from "justd-icons"
 import {
   Collection,
   Header,
@@ -10,30 +10,30 @@ import {
   type SectionProps,
   Text,
   type TextProps
-} from 'react-aria-components'
-import { tv } from 'tailwind-variants'
+} from "react-aria-components"
+import { tv } from "tailwind-variants"
 
-import { cr } from './primitive'
+import { cr } from "./primitive"
 
 const dropdownItemStyles = tv({
   base: [
-    'group flex cursor-default select-none items-center gap-x-1.5 rounded-md py-2 pl-2.5 pr-1 text-base outline outline-0 forced-color-adjust-none lg:text-sm',
-    '[&_[data-slot=avatar]]:-mr-0.5 [&_[data-slot=avatar]]:size-6 sm:[&_[data-slot=avatar]]:size-5',
-    '[&_[data-slot=icon]]:size-4',
-    'has-submenu:open:data-[danger=true]:bg-danger/20 has-submenu:open:data-[danger=true]:text-danger',
-    'has-submenu:open:bg-primary has-submenu:open:text-primary-fg'
+    "group flex cursor-default select-none items-center gap-x-1.5 rounded-md py-2 pl-2.5 pr-1 text-base outline outline-0 forced-color-adjust-none lg:text-sm",
+    "[&_[data-slot=avatar]]:-mr-0.5 [&_[data-slot=avatar]]:size-6 sm:[&_[data-slot=avatar]]:size-5",
+    "[&_[data-slot=icon]]:size-4",
+    "has-submenu:open:data-[danger=true]:bg-danger/20 has-submenu:open:data-[danger=true]:text-danger",
+    "has-submenu:open:bg-primary has-submenu:open:text-primary-fg"
   ],
   variants: {
     isDisabled: {
-      false: 'text-fg',
-      true: 'text-muted-fg forced-colors:text-[GrayText]'
+      false: "text-fg",
+      true: "text-muted-fg forced-colors:text-[GrayText]"
     },
     isFocused: {
-      false: 'data-[danger=true]:text-danger',
+      false: "data-[danger=true]:text-danger",
       true: [
-        'bg-primary text-primary-fg forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]',
-        'data-[danger=true]:bg-danger data-[danger=true]:text-danger-fg',
-        '[&_.text-muted-fg]:text-primary-fg/80 [&[data-slot=label]]:text-primary-fg [&[data-slot=description]]:text-primary-fg'
+        "bg-primary text-primary-fg forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]",
+        "data-[danger=true]:bg-danger data-[danger=true]:text-danger-fg",
+        "[&_.text-muted-fg]:text-primary-fg/80 [&[data-slot=label]]:text-primary-fg [&[data-slot=description]]:text-primary-fg"
       ]
     }
   },
@@ -41,7 +41,7 @@ const dropdownItemStyles = tv({
     {
       isFocused: false,
       isOpen: true,
-      className: 'bg-zinc-100 dark:bg-zinc-700/60'
+      className: "bg-zinc-100 dark:bg-zinc-700/60"
     }
   ]
 })
@@ -54,7 +54,7 @@ const dropdownSectionStyles = tv({
   slots: {
     base: "first:-mt-[5px] xss3 after:content-[''] after:block after:h-[5px]",
     header:
-      'text-sm font-medium text-muted-fg bg-tertiary px-4 py-2 truncate min-w-[--trigger-width] sticky -top-[5px] backdrop-blur -mt-px -mx-1 z-10 supports-[-moz-appearance:none]:bg-tertiary border-y [&+*]:mt-1'
+      "text-sm font-medium text-muted-fg bg-tertiary px-4 py-2 truncate min-w-[--trigger-width] sticky -top-[5px] backdrop-blur -mt-px -mx-1 z-10 supports-[-moz-appearance:none]:bg-tertiary border-y [&+*]:mt-1"
   }
 })
 
@@ -63,7 +63,7 @@ const { base, header } = dropdownSectionStyles()
 const DropdownSection = <T extends object>({ className, ...props }: DropdownSectionProps<T>) => {
   return (
     <Section className={base(className)}>
-      {'title' in props && <Header className={header()}>{props.title}</Header>}
+      {"title" in props && <Header className={header()}>{props.title}</Header>}
       <Collection items={props.items}>{props.children}</Collection>
     </Section>
   )
@@ -71,7 +71,7 @@ const DropdownSection = <T extends object>({ className, ...props }: DropdownSect
 
 const DropdownItem = ({ className, ...props }: ListBoxItemProps) => {
   const textValue =
-    props.textValue || (typeof props.children === 'string' ? props.children : undefined)
+    props.textValue || (typeof props.children === "string" ? props.children : undefined)
   return (
     <ListBoxItemPrimitive
       textValue={textValue}
@@ -95,8 +95,8 @@ const DropdownItem = ({ className, ...props }: ListBoxItemProps) => {
 }
 
 interface DropdownItemSlot extends TextProps {
-  label?: TextProps['children']
-  description?: TextProps['children']
+  label?: TextProps["children"]
+  description?: TextProps["children"]
 }
 
 const DropdownItemDetails = ({ label, description, ...props }: DropdownItemSlot) => {
diff --git a/components/ui/field.tsx b/components/ui/field.tsx
index 9e2df5ae..3760c70a 100644
--- a/components/ui/field.tsx
+++ b/components/ui/field.tsx
@@ -1,24 +1,16 @@
-'use client'
-
-import * as React from 'react'
-
-import {
-  FieldError as FieldErrorPrimitive,
-  type FieldErrorProps,
-  Group,
-  type GroupProps,
-  Input as InputPrimitive,
-  type InputProps,
-  Label as LabelPrimitive,
-  type LabelProps,
-  Text,
-  type TextFieldProps as TextFieldPrimitiveProps,
-  type TextProps,
-  type ValidationResult
-} from 'react-aria-components'
-import { tv } from 'tailwind-variants'
-
-import { cr, ctr } from './primitive'
+'use client';
+
+import * as React from 'react';
+
+
+
+import { FieldError as FieldErrorPrimitive, type FieldErrorProps, Group, type GroupProps, Input as InputPrimitive, type InputProps, Label as LabelPrimitive, type LabelProps, Text, type TextFieldProps as TextFieldPrimitiveProps, type TextProps, type ValidationResult } from 'react-aria-components';
+import { tv } from 'tailwind-variants';
+
+
+
+import { cr, ctr } from './primitive';
+
 
 // primitive styles
 
@@ -33,7 +25,7 @@ interface FieldProps {
 
 // primitive styles
 const fieldBorderStyles = tv({
-  base: 'group-focus-within:border-ring forced-colors:border-[Highlight]',
+  base: 'group-focus-within:border-ring/85 forced-colors:border-[Highlight]',
   variants: {
     isInvalid: {
       true: 'border-danger/70 group-focus-within:border-danger/70 forced-colors:border-[Mark]'
@@ -78,7 +70,7 @@ const FieldError = ({ className, ...props }: FieldErrorProps) => {
 const fieldGroupStyles = tv({
   base: [
     'group flex h-10 items-center overflow-hidden rounded-lg border border-input bg-background transition disabled:opacity-50 disabled:bg-secondary forced-colors:bg-[Field]',
-    'focus-within:border-ring focus-within:ring-4 focus-within:ring-ring/20',
+    'focus-within:border-ring/85 focus-within:ring-4 focus-within:ring-ring/20',
     'focus-within:invalid:border-danger focus-within:invalid:ring-4 focus-within:invalid:ring-danger/20',
     'invalid:border-danger',
     'has-[.isPfx]:pl-2.5 has-[.isSfx]:pr-2.5 [&_[data-slot=icon]]:size-4 has-[.atrs]:shrink-0 has-[.atrs]:text-muted-fg'
diff --git a/components/ui/file-trigger.tsx b/components/ui/file-trigger.tsx
index 3590f1e5..1915f375 100644
--- a/components/ui/file-trigger.tsx
+++ b/components/ui/file-trigger.tsx
@@ -1,38 +1,38 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { IconCamera, IconFolder, IconPaperclip } from 'justd-icons'
+import { IconCamera, IconFolder, IconPaperclip } from "justd-icons"
 import {
   FileTrigger as FileTriggerPrimitive,
   type FileTriggerProps as FileTriggerPrimitiveProps
-} from 'react-aria-components'
+} from "react-aria-components"
 
-import { Button } from './button'
+import { Button } from "./button"
 
 interface FileTriggerProps extends FileTriggerPrimitiveProps {
   withIcon?: boolean
   isDisabled?: boolean
   intent?:
-    | 'primary'
-    | 'secondary'
-    | 'danger'
-    | 'warning'
-    | 'info'
-    | 'light/dark'
-    | 'success'
-    | 'light'
-    | 'dark'
-  size?: 'medium' | 'large' | 'square-petite' | 'extra-small' | 'small'
-  shape?: 'square' | 'circle'
-  appearance?: 'solid' | 'outline' | 'plain'
+    | "primary"
+    | "secondary"
+    | "danger"
+    | "warning"
+    | "info"
+    | "light/dark"
+    | "success"
+    | "light"
+    | "dark"
+  size?: "medium" | "large" | "square-petite" | "extra-small" | "small"
+  shape?: "square" | "circle"
+  appearance?: "solid" | "outline" | "plain"
 }
 
 const FileTrigger = ({
-  intent = 'primary',
-  appearance = 'outline',
-  size = 'medium',
-  shape = 'square',
+  intent = "primary",
+  appearance = "outline",
+  size = "medium",
+  shape = "square",
   withIcon = true,
   ...props
 }: FileTriggerProps) => {
@@ -62,10 +62,10 @@ const FileTrigger = ({
           ) : (
             <>
               {props.allowsMultiple
-                ? 'Browse a files'
+                ? "Browse a files"
                 : props.acceptDirectory
-                  ? 'Browse'
-                  : 'Browse a file'}
+                  ? "Browse"
+                  : "Browse a file"}
               ...
             </>
           )}
diff --git a/components/ui/form.tsx b/components/ui/form.tsx
index bd055310..d3f7b471 100644
--- a/components/ui/form.tsx
+++ b/components/ui/form.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import type { FormProps as FormPrimitiveProps } from 'react-aria-components'
-import { Form as FormPrimitive } from 'react-aria-components'
+import type { FormProps as FormPrimitiveProps } from "react-aria-components"
+import { Form as FormPrimitive } from "react-aria-components"
 
 interface FormProps extends FormPrimitiveProps {}
 
diff --git a/components/ui/grid-list.tsx b/components/ui/grid-list.tsx
index 72018dbf..cf7a6556 100644
--- a/components/ui/grid-list.tsx
+++ b/components/ui/grid-list.tsx
@@ -1,22 +1,22 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { IconHamburger } from 'justd-icons'
+import { IconHamburger } from "justd-icons"
 import type {
   GridListItemProps,
   GridListProps as GridListPrimitiveProps
-} from 'react-aria-components'
-import { Button, GridList as GridListPrimitive, GridListItem } from 'react-aria-components'
-import { tv } from 'tailwind-variants'
+} from "react-aria-components"
+import { Button, GridList as GridListPrimitive, GridListItem } from "react-aria-components"
+import { tv } from "tailwind-variants"
 
-import { Checkbox } from './checkbox'
-import { composeTailwindRenderProps, focusRing } from './primitive'
+import { Checkbox } from "./checkbox"
+import { composeTailwindRenderProps, focusRing } from "./primitive"
 
 interface GridListProps<T extends object> extends GridListPrimitiveProps<T> {}
 
 const GridList = <T extends object>({
-  selectionMode = 'single',
+  selectionMode = "single",
   children,
   ...props
 }: GridListProps<T>) => (
@@ -25,7 +25,7 @@ const GridList = <T extends object>({
     {...props}
     className={composeTailwindRenderProps(
       props.className,
-      'relative overflow-auto rounded-lg border'
+      "relative overflow-auto rounded-lg border"
     )}
   >
     {children}
@@ -34,20 +34,20 @@ const GridList = <T extends object>({
 
 const itemStyles = tv({
   extend: focusRing,
-  base: 'relative -mb-px flex cursor-default select-none gap-3 border-y px-3 py-2 text-sm text-fg -outline-offset-2 first:rounded-t-md first:border-t-0 last:mb-0 last:rounded-b-md last:border-b-0',
+  base: "relative -mb-px flex cursor-default select-none gap-3 border-y px-3 py-2 text-sm text-fg -outline-offset-2 first:rounded-t-md first:border-t-0 last:mb-0 last:rounded-b-md last:border-b-0",
   variants: {
     isSelected: {
-      false: 'hover:bg-secondary',
-      true: 'z-20 border-y-primary/50 bg-primary/20'
+      false: "hover:bg-secondary",
+      true: "z-20 border-y-primary/50 bg-primary/20"
     },
     isDisabled: {
-      true: 'z-10 text-muted-fg forced-colors:text-[GrayText]'
+      true: "z-10 text-muted-fg forced-colors:text-[GrayText]"
     }
   }
 })
 
 const Item = ({ children, ...props }: GridListItemProps) => {
-  const textValue = typeof children === 'string' ? children : undefined
+  const textValue = typeof children === "string" ? children : undefined
   return (
     <GridListItem textValue={textValue} {...props} className={itemStyles}>
       {({ selectionMode, selectionBehavior, allowsDragging }) => (
@@ -57,7 +57,7 @@ const Item = ({ children, ...props }: GridListItemProps) => {
               <IconHamburger />
             </Button>
           )}
-          {selectionMode === 'multiple' && selectionBehavior === 'toggle' && (
+          {selectionMode === "multiple" && selectionBehavior === "toggle" && (
             <Checkbox slot="selection" />
           )}
           {children}
diff --git a/components/ui/grid.tsx b/components/ui/grid.tsx
index e93dbd27..53cd03a9 100644
--- a/components/ui/grid.tsx
+++ b/components/ui/grid.tsx
@@ -1,126 +1,126 @@
-'use client'
+"use client"
 
-import * as React from 'react'
+import * as React from "react"
 
-import { Collection } from 'react-aria-components'
-import { tv, type VariantProps } from 'tailwind-variants'
+import { Collection } from "react-aria-components"
+import { tv, type VariantProps } from "tailwind-variants"
 
-import { cn } from './primitive'
+import { cn } from "./primitive"
 
 const gridStyles = tv(
   {
-    base: 'grid',
+    base: "grid",
     variants: {
       // Columns
       columns: {
-        1: 'grid-cols-1',
-        2: 'grid-cols-2',
-        3: 'grid-cols-3',
-        4: 'grid-cols-4',
-        5: 'grid-cols-5',
-        6: 'grid-cols-6',
-        7: 'grid-cols-7',
-        8: 'grid-cols-8',
-        9: 'grid-cols-9',
-        10: 'grid-cols-10',
-        11: 'grid-cols-11',
-        12: 'grid-cols-12'
+        1: "grid-cols-1",
+        2: "grid-cols-2",
+        3: "grid-cols-3",
+        4: "grid-cols-4",
+        5: "grid-cols-5",
+        6: "grid-cols-6",
+        7: "grid-cols-7",
+        8: "grid-cols-8",
+        9: "grid-cols-9",
+        10: "grid-cols-10",
+        11: "grid-cols-11",
+        12: "grid-cols-12"
       },
 
       // Rows
       rows: {
-        1: 'grid-rows-1',
-        2: 'grid-rows-2',
-        3: 'grid-rows-3',
-        4: 'grid-rows-4',
-        5: 'grid-rows-5',
-        6: 'grid-rows-6',
-        7: 'grid-rows-7',
-        8: 'grid-rows-8',
-        9: 'grid-rows-9',
-        10: 'grid-rows-10',
-        11: 'grid-rows-11',
-        12: 'grid-rows-12'
+        1: "grid-rows-1",
+        2: "grid-rows-2",
+        3: "grid-rows-3",
+        4: "grid-rows-4",
+        5: "grid-rows-5",
+        6: "grid-rows-6",
+        7: "grid-rows-7",
+        8: "grid-rows-8",
+        9: "grid-rows-9",
+        10: "grid-rows-10",
+        11: "grid-rows-11",
+        12: "grid-rows-12"
       },
 
       // Flow
       flow: {
-        row: 'grid-flow-row',
-        col: 'grid-flow-col',
-        rowDense: 'grid-flow-row-dense',
-        colDense: 'grid-flow-col-dense',
-        dense: 'grid-flow-dense'
+        row: "grid-flow-row",
+        col: "grid-flow-col",
+        rowDense: "grid-flow-row-dense",
+        colDense: "grid-flow-col-dense",
+        dense: "grid-flow-dense"
       },
 
       // Gap
       gap: {
-        0: 'gap-0',
-        0.5: 'gap-0.5',
-        1: 'gap-1',
-        1.5: 'gap-1.5',
-        2: 'gap-2',
-        2.5: 'gap-2.5',
-        3: 'gap-3',
-        3.5: 'gap-3.5',
-        4: 'gap-4',
-        5: 'gap-5',
-        6: 'gap-6',
-        7: 'gap-7',
-        8: 'gap-8',
-        9: 'gap-9',
-        10: 'gap-10',
-        11: 'gap-11',
-        12: 'gap-12',
-        14: 'gap-14',
-        16: 'gap-16',
-        20: 'gap-20',
-        24: 'gap-24'
+        0: "gap-0",
+        0.5: "gap-0.5",
+        1: "gap-1",
+        1.5: "gap-1.5",
+        2: "gap-2",
+        2.5: "gap-2.5",
+        3: "gap-3",
+        3.5: "gap-3.5",
+        4: "gap-4",
+        5: "gap-5",
+        6: "gap-6",
+        7: "gap-7",
+        8: "gap-8",
+        9: "gap-9",
+        10: "gap-10",
+        11: "gap-11",
+        12: "gap-12",
+        14: "gap-14",
+        16: "gap-16",
+        20: "gap-20",
+        24: "gap-24"
       },
       gapX: {
-        0: 'gap-x-0',
-        0.5: 'gap-x-0.5',
-        1: 'gap-x-1',
-        1.5: 'gap-x-1.5',
-        2: 'gap-x-2',
-        2.5: 'gap-x-2.5',
-        3: 'gap-x-3',
-        3.5: 'gap-x-3.5',
-        4: 'gap-x-4',
-        5: 'gap-x-5',
-        6: 'gap-x-6',
-        7: 'gap-x-7',
-        8: 'gap-x-8',
-        9: 'gap-x-9',
-        10: 'gap-x-10',
-        11: 'gap-x-11',
-        12: 'gap-x-12',
-        14: 'gap-x-14',
-        16: 'gap-x-16',
-        20: 'gap-x-20',
-        24: 'gap-x-24'
+        0: "gap-x-0",
+        0.5: "gap-x-0.5",
+        1: "gap-x-1",
+        1.5: "gap-x-1.5",
+        2: "gap-x-2",
+        2.5: "gap-x-2.5",
+        3: "gap-x-3",
+        3.5: "gap-x-3.5",
+        4: "gap-x-4",
+        5: "gap-x-5",
+        6: "gap-x-6",
+        7: "gap-x-7",
+        8: "gap-x-8",
+        9: "gap-x-9",
+        10: "gap-x-10",
+        11: "gap-x-11",
+        12: "gap-x-12",
+        14: "gap-x-14",
+        16: "gap-x-16",
+        20: "gap-x-20",
+        24: "gap-x-24"
       },
       gapY: {
-        0: 'gap-y-0',
-        0.5: 'gap-y-0.5',
-        1: 'gap-y-1',
-        1.5: 'gap-y-1.5',
-        2: 'gap-y-2',
-        2.5: 'gap-y-2.5',
-        3: 'gap-y-3',
-        3.5: 'gap-y-3.5',
-        4: 'gap-y-4',
-        5: 'gap-y-5',
-        6: 'gap-y-6',
-        7: 'gap-y-7',
-        8: 'gap-y-8',
-        9: 'gap-y-9',
-        10: 'gap-y-10',
-        11: 'gap-y-11',
-        12: 'gap-y-12',
-        14: 'gap-y-14',
-        16: 'gap-y-16',
-        20: 'gap-y-20',
-        24: 'gap-y-24'
+        0: "gap-y-0",
+        0.5: "gap-y-0.5",
+        1: "gap-y-1",
+        1.5: "gap-y-1.5",
+        2: "gap-y-2",
+        2.5: "gap-y-2.5",
+        3: "gap-y-3",
+        3.5: "gap-y-3.5",
+        4: "gap-y-4",
+        5: "gap-y-5",
+        6: "gap-y-6",
+        7: "gap-y-7",
+        8: "gap-y-8",
+        9: "gap-y-9",
+        10: "gap-y-10",
+        11: "gap-y-11",
+        12: "gap-y-12",
+        14: "gap-y-14",
+        16: "gap-y-16",
+        20: "gap-y-20",
+        24: "gap-y-24"
       }
     },
     defaultVariants: {
@@ -140,17 +140,17 @@ interface GridProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<t
 const Grid = ({ className, gap, gapX, gapY, flow, columns, rows, ...props }: GridProps) => {
   return (
     <div
-      aria-label={props['aria-label'] || 'grid'}
+      aria-label={props["aria-label"] || "grid"}
       className={gridStyles({
         gap: gap ?? gapX ?? gapY,
         gapX: gapX ?? gap,
         gapY: gapY ?? gap,
-        flow: flow ?? 'row',
+        flow: flow ?? "row",
         columns: columns ?? 1,
         rows: rows ?? 1,
         className:
-          'debug' in props
-            ? cn('[&>.grid-cell]:border [&>.grid-cell]:border-warning', className)
+          "debug" in props
+            ? cn("[&>.grid-cell]:border [&>.grid-cell]:border-warning", className)
             : className
       })}
       {...props}
@@ -162,108 +162,108 @@ const Grid = ({ className, gap, gapX, gapY, flow, columns, rows, ...props }: Gri
 
 const gridItemStyles = tv(
   {
-    base: 'grid-cell focus:outline-none',
+    base: "grid-cell focus:outline-none",
     variants: {
       colSpan: {
-        auto: 'col-auto',
-        1: 'col-span-1',
-        2: 'col-span-2',
-        3: 'col-span-3',
-        4: 'col-span-4',
-        5: 'col-span-5',
-        6: 'col-span-6',
-        7: 'col-span-7',
-        8: 'col-span-8',
-        9: 'col-span-9',
-        10: 'col-span-10',
-        11: 'col-span-11',
-        12: 'col-span-12',
-        full: 'col-span-full'
+        auto: "col-auto",
+        1: "col-span-1",
+        2: "col-span-2",
+        3: "col-span-3",
+        4: "col-span-4",
+        5: "col-span-5",
+        6: "col-span-6",
+        7: "col-span-7",
+        8: "col-span-8",
+        9: "col-span-9",
+        10: "col-span-10",
+        11: "col-span-11",
+        12: "col-span-12",
+        full: "col-span-full"
       },
       colStart: {
-        1: 'col-start-1',
-        2: 'col-start-2',
-        3: 'col-start-3',
-        4: 'col-start-4',
-        5: 'col-start-5',
-        6: 'col-start-6',
-        7: 'col-start-7',
-        8: 'col-start-8',
-        9: 'col-start-9',
-        10: 'col-start-10',
-        11: 'col-start-11',
-        12: 'col-start-12',
-        13: 'col-start-13',
-        auto: 'col-start-auto'
+        1: "col-start-1",
+        2: "col-start-2",
+        3: "col-start-3",
+        4: "col-start-4",
+        5: "col-start-5",
+        6: "col-start-6",
+        7: "col-start-7",
+        8: "col-start-8",
+        9: "col-start-9",
+        10: "col-start-10",
+        11: "col-start-11",
+        12: "col-start-12",
+        13: "col-start-13",
+        auto: "col-start-auto"
       },
       colEnd: {
-        1: 'col-end-1',
-        2: 'col-end-2',
-        3: 'col-end-3',
-        4: 'col-end-4',
-        5: 'col-end-5',
-        6: 'col-end-6',
-        7: 'col-end-7',
-        8: 'col-end-8',
-        9: 'col-end-9',
-        10: 'col-end-10',
-        11: 'col-end-11',
-        12: 'col-end-12',
-        13: 'col-end-13',
-        auto: 'col-end-auto'
+        1: "col-end-1",
+        2: "col-end-2",
+        3: "col-end-3",
+        4: "col-end-4",
+        5: "col-end-5",
+        6: "col-end-6",
+        7: "col-end-7",
+        8: "col-end-8",
+        9: "col-end-9",
+        10: "col-end-10",
+        11: "col-end-11",
+        12: "col-end-12",
+        13: "col-end-13",
+        auto: "col-end-auto"
       },
       rowSpan: {
-        auto: 'row-auto',
-        1: 'row-span-1',
-        2: 'row-span-2',
-        3: 'row-span-3',
-        4: 'row-span-4',
-        5: 'row-span-5',
-        6: 'row-span-6',
-        7: 'row-span-7',
-        8: 'row-span-8',
-        9: 'row-span-9',
-        10: 'row-span-10',
-        11: 'row-span-11',
-        12: 'row-span-12',
-        full: 'row-span-full'
+        auto: "row-auto",
+        1: "row-span-1",
+        2: "row-span-2",
+        3: "row-span-3",
+        4: "row-span-4",
+        5: "row-span-5",
+        6: "row-span-6",
+        7: "row-span-7",
+        8: "row-span-8",
+        9: "row-span-9",
+        10: "row-span-10",
+        11: "row-span-11",
+        12: "row-span-12",
+        full: "row-span-full"
       },
       rowStart: {
-        1: 'row-start-1',
-        2: 'row-start-2',
-        3: 'row-start-3',
-        4: 'row-start-4',
-        5: 'row-start-5',
-        6: 'row-start-6',
-        7: 'row-start-7',
-        8: 'row-start-8',
-        9: 'row-start-9',
-        10: 'row-start-10',
-        11: 'row-start-11',
-        12: 'row-start-12',
-        13: 'row-start-13',
-        auto: 'row-start-auto'
+        1: "row-start-1",
+        2: "row-start-2",
+        3: "row-start-3",
+        4: "row-start-4",
+        5: "row-start-5",
+        6: "row-start-6",
+        7: "row-start-7",
+        8: "row-start-8",
+        9: "row-start-9",
+        10: "row-start-10",
+        11: "row-start-11",
+        12: "row-start-12",
+        13: "row-start-13",
+        auto: "row-start-auto"
       },
       rowEnd: {
-        1: 'row-end-1',
-        2: 'row-end-2',
-        3: 'row-end-3',
-        4: 'row-end-4',
-        5: 'row-end-5',
-        6: 'row-end-6',
-        7: 'row-end-7',
-        8: 'row-end-8',
-        9: 'row-end-9',
-        10: 'row-end-10',
-        11: 'row-end-11',
-        12: 'row-end-12',
-        13: 'row-end-13',
-        auto: 'row-end-auto'
+        1: "row-end-1",
+        2: "row-end-2",
+        3: "row-end-3",
+        4: "row-end-4",
+        5: "row-end-5",
+        6: "row-end-6",
+        7: "row-end-7",
+        8: "row-end-8",
+        9: "row-end-9",
+        10: "row-end-10",
+        11: "row-end-11",
+        12: "row-end-12",
+        13: "row-end-13",
+        auto: "row-end-auto"
       }
     }
   },
   {
-    responsiveVariants: ['sm', 'md', 'lg', 'xl', '2xl']
+    responsiveVariants: ["sm", "md", "lg", "xl", "2xl"]
   }
 )
 
diff --git a/components/ui/heading.tsx b/components/ui/heading.tsx
index c1a1faf0..39782d34 100644
--- a/components/ui/heading.tsx
+++ b/components/ui/heading.tsx
@@ -1,46 +1,46 @@
-'use client'
+"use client"
 
-import { Heading as HeadingPrimitive } from 'react-aria-components'
-import { tv } from 'tailwind-variants'
+import { Heading as HeadingPrimitive } from "react-aria-components"
+import { tv } from "tailwind-variants"
 
-import { isIos } from './primitive'
+import { isIos } from "./primitive"
 
 const headingStyles = tv({
-  base: 'font-sans tracking-tight text-fg',
+  base: "font-sans tracking-tight text-fg",
   variants: {
     level: {
-      1: 'font-bold text-2xl',
-      2: 'font-semibold text-lg sm:text-xl',
-      3: 'font-semibold text-base sm:text-lg',
-      4: 'font-medium text-base sm:text-sm'
+      1: "font-bold text-2xl",
+      2: "font-semibold text-lg sm:text-xl",
+      3: "font-semibold text-base sm:text-lg",
+      4: "font-medium text-base sm:text-sm"
     },
     tracking: {
-      tighter: 'tracking-tighter',
-      tight: 'tracking-tight',
-      normal: 'tracking-normal',
-      wide: 'tracking-wide',
-      wider: 'tracking-wider',
-      widest: 'tracking-widest'
+      tighter: "tracking-tighter",
+      tight: "tracking-tight",
+      normal: "tracking-normal",
+      wide: "tracking-wide",
+      wider: "tracking-wider",
+      widest: "tracking-widest"
     }
   }
 })
 type HeadingType = { level?: 1 | 2 | 3 | 4 } & React.ComponentPropsWithoutRef<
-  'h1' | 'h2' | 'h3' | 'h4'
+  "h1" | "h2" | "h3" | "h4"
 >
 
 interface HeadingProps extends HeadingType {
-  tracking?: 'tighter' | 'tight' | 'normal' | 'wide' | 'wider' | 'widest'
+  tracking?: "tighter" | "tight" | "normal" | "wide" | "wider" | "widest"
   className?: string | undefined
 }
 
-const Heading = ({ className, tracking = 'normal', level = 1, ...props }: HeadingProps) => {
+const Heading = ({ className, tracking = "normal", level = 1, ...props }: HeadingProps) => {
   return (
     <HeadingPrimitive
       level={level}
       className={headingStyles({
         level,
         tracking,
-        className: isIos() ? 'font-medium' : className
+        className: isIos() ? "font-medium" : className
       })}
       {...props}
     />
diff --git a/components/ui/input-otp.tsx b/components/ui/input-otp.tsx
index 6621c37a..423db08b 100644
--- a/components/ui/input-otp.tsx
+++ b/components/ui/input-otp.tsx
@@ -1,11 +1,11 @@
-'use client'
+"use client"
 
-import * as React from 'react'
+import * as React from "react"
 
-import { OTPInput, OTPInputContext } from 'input-otp'
-import { IconBulletFill } from 'justd-icons'
+import { OTPInput, OTPInputContext } from "input-otp"
+import { IconBulletFill } from "justd-icons"
 
-import { cn } from './primitive'
+import { cn } from "./primitive"
 
 const InputOTP = React.forwardRef<
   React.ElementRef<typeof OTPInput>,
@@ -15,26 +15,26 @@ const InputOTP = React.forwardRef<
     data-1p-ignore
     ref={ref}
     containerClassName={cn(
-      'flex items-center gap-2 has-[:disabled]:opacity-50',
+      "flex items-center gap-2 has-[:disabled]:opacity-50",
       containerClassName
     )}
-    className={cn('disabled:cursor-not-allowed', className)}
+    className={cn("disabled:cursor-not-allowed", className)}
     {...props}
   />
 ))
-InputOTP.displayName = 'InputOTP'
+InputOTP.displayName = "InputOTP"
 
 const InputOTPGroup = React.forwardRef<
-  React.ElementRef<'div'>,
-  React.ComponentPropsWithoutRef<'div'>
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div">
 >(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn('flex items-center gap-x-1.5', className)} {...props} />
+  <div ref={ref} className={cn("flex items-center gap-x-1.5", className)} {...props} />
 ))
-InputOTPGroup.displayName = 'InputOTPGroup'
+InputOTPGroup.displayName = "InputOTPGroup"
 
 const InputOTPSlot = React.forwardRef<
-  React.ElementRef<'div'>,
-  React.ComponentPropsWithoutRef<'div'> & { index: number }
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div"> & { index: number }
 >(({ index, className, ...props }, ref) => {
   const inputOTPContext = React.useContext(OTPInputContext)
   const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
@@ -43,8 +43,8 @@ const InputOTPSlot = React.forwardRef<
     <div
       ref={ref}
       className={cn(
-        'relative flex size-10 items-center justify-center rounded-md border border-input text-sm transition-all',
-        isActive && 'z-10 border-ring/70 ring-4 ring-ring/20',
+        "relative flex size-10 items-center justify-center rounded-md border border-input text-sm transition-all",
+        isActive && "z-10 border-ring/70 ring-4 ring-ring/20",
         className
       )}
       {...props}
@@ -58,16 +58,16 @@ const InputOTPSlot = React.forwardRef<
     </div>
   )
 })
-InputOTPSlot.displayName = 'InputOTPSlot'
+InputOTPSlot.displayName = "InputOTPSlot"
 
 const InputOTPSeparator = React.forwardRef<
-  React.ElementRef<'div'>,
-  React.ComponentPropsWithoutRef<'div'>
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div">
 >(({ ...props }, ref) => (
   <div ref={ref} role="separator" {...props}>
     <IconBulletFill className="size-2" />
   </div>
 ))
-InputOTPSeparator.displayName = 'InputOTPSeparator'
+InputOTPSeparator.displayName = "InputOTPSeparator"
 
 export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot }
diff --git a/components/ui/keyboard.tsx b/components/ui/keyboard.tsx
index 2622f5c4..8f7b9c5c 100644
--- a/components/ui/keyboard.tsx
+++ b/components/ui/keyboard.tsx
@@ -1,14 +1,14 @@
-import * as React from 'react'
+import * as React from "react"
 
-import { Keyboard as KeyboardPrimitive } from 'react-aria-components'
-import { tv } from 'tailwind-variants'
+import { Keyboard as KeyboardPrimitive } from "react-aria-components"
+import { tv } from "tailwind-variants"
 
 const keyboardStyles = tv({
   slots: {
-    base: '-mr-1 ml-auto hidden items-center gap-[0.25rem] px-1 lg:inline-flex',
+    base: "-mr-1 ml-auto hidden items-center gap-[0.25rem] px-1 lg:inline-flex",
     kbd: [
-      'text-center font-sans capitalize text-muted-fg group-focus:text-fg forced-colors:group-focus:text-[HighlightText]',
-      'inline-grid min-h-5 min-w-5 place-content-center rounded bg-background font-sans text-[.75rem] uppercase text-fg ring-1 ring-fg/10 group-focus:opacity-60'
+      "text-center font-sans capitalize text-muted-fg group-focus:text-fg forced-colors:group-focus:text-[HighlightText]",
+      "inline-grid min-h-5 min-w-5 place-content-center rounded bg-background font-sans text-[.75rem] uppercase text-fg ring-1 ring-fg/10 group-focus:opacity-60"
     ]
   }
 })
@@ -26,10 +26,10 @@ interface KeyboardProps extends React.HTMLAttributes<HTMLElement> {
 const Keyboard = ({ keys, classNames, className, ...props }: KeyboardProps) => {
   return (
     <KeyboardPrimitive className={base({ className: classNames?.base ?? className })} {...props}>
-      {(Array.isArray(keys) ? keys : keys.split('')).map((char, index) => (
+      {(Array.isArray(keys) ? keys : keys.split("")).map((char, index) => (
         <kbd
           key={index}
-          className={kbd({ className: index > 0 && char.length > 1 ? 'pl-1' : classNames?.kbd })}
+          className={kbd({ className: index > 0 && char.length > 1 ? "pl-1" : classNames?.kbd })}
         >
           {char}
         </kbd>
diff --git a/components/ui/link.tsx b/components/ui/link.tsx
index 034882c7..bdaba4a3 100644
--- a/components/ui/link.tsx
+++ b/components/ui/link.tsx
@@ -1,35 +1,35 @@
-'use client'
+"use client"
 
-import { Link as LinkPrimitive, type LinkProps as LinkPrimitiveProps } from 'react-aria-components'
-import { tv } from 'tailwind-variants'
+import { Link as LinkPrimitive, type LinkProps as LinkPrimitiveProps } from "react-aria-components"
+import { tv } from "tailwind-variants"
 
-import { cr } from './primitive'
+import { cr } from "./primitive"
 
 const linkStyles = tv({
-  base: 'forced-colors:outline-[Highlight] focus-visible:outline-2 outline outline-offset-2 disabled:focus-visible:outline-0 outline-0 outline-primary rounded disabled:opacity-60 forced-colors:disabled:text-[GrayText] border-transparent transition-colors disabled:cursor-default',
+  base: "forced-colors:outline-[Highlight] focus-visible:outline-2 outline outline-offset-2 disabled:focus-visible:outline-0 outline-0 outline-primary rounded disabled:opacity-60 forced-colors:disabled:text-[GrayText] border-transparent transition-colors disabled:cursor-default",
   variants: {
     intent: {
-      unstyled: 'text-fg',
-      primary: 'text-primary hover:text-primary/80 forced-colors:disabled:text-[GrayText]',
-      danger: 'text-danger hover:text-danger/80 forced-colors:disabled:text-[GrayText]',
-      'lad/primary':
-        'text-fg hover:text-primary dark:hover:text-primary/80 forced-colors:disabled:text-[GrayText]',
-      secondary: 'text-secondary-fg hover:text-secondary-fg/80'
+      unstyled: "text-fg",
+      primary: "text-primary hover:text-primary/80 forced-colors:disabled:text-[GrayText]",
+      danger: "text-danger hover:text-danger/80 forced-colors:disabled:text-[GrayText]",
+      "lad/primary":
+        "text-fg hover:text-primary dark:hover:text-primary/80 forced-colors:disabled:text-[GrayText]",
+      secondary: "text-secondary-fg hover:text-secondary-fg/80"
     }
   },
   defaultVariants: {
-    intent: 'unstyled'
+    intent: "unstyled"
   }
 })
 
 interface LinkProps extends LinkPrimitiveProps {
-  intent?: 'primary' | 'secondary' | 'danger' | 'lad/primary' | 'unstyled'
+  intent?: "primary" | "secondary" | "danger" | "lad/primary" | "unstyled"
 }
 
 const Link = ({ className, ...props }: LinkProps) => {
   return (
     <LinkPrimitive
-      aria-label={props['aria-label'] ?? 'Link'}
+      aria-label={props["aria-label"] ?? "Link"}
       {...props}
       className={cr(className, (className, ...renderProps) =>
         linkStyles({ ...renderProps, intent: props.intent, className })
diff --git a/components/ui/list-box.tsx b/components/ui/list-box.tsx
index 1d3fa054..3fe67942 100644
--- a/components/ui/list-box.tsx
+++ b/components/ui/list-box.tsx
@@ -1,21 +1,21 @@
-'use client'
+"use client"
 
-import * as React from 'react'
+import * as React from "react"
 
-import { IconHamburger } from 'justd-icons'
+import { IconHamburger } from "justd-icons"
 import {
   ListBox as ListBoxPrimitive,
   ListBoxItem as ListBoxItemPrimitive,
   type ListBoxItemProps as ListBoxItemPrimitiveProps,
   type ListBoxProps as ListBoxPrimitiveProps
-} from 'react-aria-components'
-import { tv } from 'tailwind-variants'
+} from "react-aria-components"
+import { tv } from "tailwind-variants"
 
-import { DropdownItemDetails, DropdownSection } from './dropdown'
-import { cn, cr } from './primitive'
+import { DropdownItemDetails, DropdownSection } from "./dropdown"
+import { cn, cr } from "./primitive"
 
 const listBoxStyles = tv({
-  base: 'flex max-h-96 w-full min-w-72 flex-col overflow-y-auto rounded-xl border p-1 shadow-xl outline-none'
+  base: "flex max-h-96 w-full min-w-72 flex-col overflow-y-auto rounded-xl border p-1 shadow-xl outline-none"
 })
 
 interface ListBoxProps<T> extends ListBoxPrimitiveProps<T> {
@@ -29,16 +29,16 @@ const ListBox = <T extends object>({ children, className, ...props }: ListBoxPro
 )
 
 const listBoxItemStyles = tv({
-  base: 'my-0.5 cursor-pointer rounded-md p-2 text-base outline-none transition lg:text-sm',
+  base: "my-0.5 cursor-pointer rounded-md p-2 text-base outline-none transition lg:text-sm",
   variants: {
-    isHovered: { true: 'bg-secondary text-secondary-fg' },
+    isHovered: { true: "bg-secondary text-secondary-fg" },
     isFocused: {
-      true: '[&_[data-slot=icon]]:text-primary-fg [&_[data-slot=label]]:text-primary-fg [&_.text-muted-fg]:text-primary-fg/80 bg-primary text-primary-fg'
+      true: "[&_[data-slot=icon]]:text-primary-fg [&_[data-slot=label]]:text-primary-fg [&_.text-muted-fg]:text-primary-fg/80 bg-primary text-primary-fg"
     },
-    isDragging: { true: 'cursor-grabbing bg-secondary text-secondary-fg' },
-    isSelected: { true: 'bg-primary text-primary-fg' },
+    isDragging: { true: "cursor-grabbing bg-secondary text-secondary-fg" },
+    isSelected: { true: "bg-primary text-primary-fg" },
     isDisabled: {
-      true: 'opacity-70 cursor-default text-muted-fg'
+      true: "opacity-70 cursor-default text-muted-fg"
     }
   }
 })
@@ -48,7 +48,7 @@ interface ListBoxItemProps<T extends Object> extends ListBoxItemPrimitiveProps<T
 }
 
 const ListBoxItem = <T extends object>({ children, className, ...props }: ListBoxItemProps<T>) => {
-  const textValue = typeof children === 'string' ? children : undefined
+  const textValue = typeof children === "string" ? children : undefined
 
   return (
     <ListBoxItemPrimitive
@@ -67,15 +67,15 @@ const ListBoxItem = <T extends object>({ children, className, ...props }: ListBo
             {values.allowsDragging && (
               <IconHamburger
                 className={cn(
-                  'size-4 shrink-0 text-muted-fg transition',
-                  values.isFocused && 'text-fg',
-                  values.isDragging && 'text-fg',
-                  values.isSelected && 'text-primary-fg/70'
+                  "size-4 shrink-0 text-muted-fg transition",
+                  values.isFocused && "text-fg",
+                  values.isDragging && "text-fg",
+                  values.isSelected && "text-primary-fg/70"
                 )}
               />
             )}
             <div className="flex flex-col">
-              {typeof children === 'function' ? children(values) : children}
+              {typeof children === "function" ? children(values) : children}
             </div>
           </>
         </div>
@@ -89,7 +89,7 @@ interface ListBoxPickerProps<T> extends ListBoxProps<T> {}
 const ListBoxPicker = <T extends object>({ className, ...props }: ListBoxPickerProps<T>) => {
   return (
     <ListBoxPrimitive
-      className={cn('max-h-72 overflow-auto p-1 outline-none', className)}
+      className={cn("max-h-72 overflow-auto p-1 outline-none", className)}
       {...props}
     />
   )
diff --git a/components/ui/loader.tsx b/components/ui/loader.tsx
index f1366445..0df25393 100644
--- a/components/ui/loader.tsx
+++ b/components/ui/loader.tsx
@@ -1,33 +1,33 @@
-import type { SVGProps } from 'react'
-import React from 'react'
+import type { SVGProps } from "react"
+import React from "react"
 
-import { IconLoader } from 'justd-icons'
-import type { VariantProps } from 'tailwind-variants'
-import { tv } from 'tailwind-variants'
+import { IconLoader } from "justd-icons"
+import type { VariantProps } from "tailwind-variants"
+import { tv } from "tailwind-variants"
 
-import { cn } from './primitive'
+import { cn } from "./primitive"
 
 const loaderStyles = tv({
-  base: 'relative',
+  base: "relative",
   variants: {
     intent: {
-      current: 'text-current',
-      primary: 'text-primary',
-      secondary: 'text-muted-fg',
-      success: 'text-success',
-      warning: 'text-warning',
-      danger: 'text-danger'
+      current: "text-current",
+      primary: "text-primary",
+      secondary: "text-muted-fg",
+      success: "text-success",
+      warning: "text-warning",
+      danger: "text-danger"
     },
     size: {
-      small: 'size-4',
-      medium: 'size-6',
-      large: 'size-8',
-      'extra-large': 'size-10'
+      small: "size-4",
+      medium: "size-6",
+      large: "size-8",
+      "extra-large": "size-10"
     }
   },
   defaultVariants: {
-    intent: 'current',
-    size: 'small'
+    intent: "current",
+    size: "small"
   }
 })
 
@@ -35,7 +35,7 @@ type LoaderVariantProps = VariantProps<typeof loaderStyles>
 
 const Bars = ({ className, ...props }: SVGProps<SVGSVGElement>) => (
   <svg
-    className={cn('size-4', className)}
+    className={cn("size-4", className)}
     data-slot="icon"
     viewBox="0 0 135 140"
     xmlns="http://www.w3.org/2000/svg"
@@ -136,7 +136,7 @@ const Bars = ({ className, ...props }: SVGProps<SVGSVGElement>) => (
 )
 const Ring = (props: SVGProps<SVGSVGElement>) => <IconLoader {...props} />
 const Spin = ({ className, ...props }: SVGProps<SVGSVGElement>) => (
-  <svg className={cn('size-4', className)} data-slot="icon" viewBox="0 0 2400 2400" {...props}>
+  <svg className={cn("size-4", className)} data-slot="icon" viewBox="0 0 2400 2400" {...props}>
     <g strokeWidth="200" strokeLinecap="round" fill="none">
       <line x1="1200" y1="600" x2="1200" y2="100" />
       <line opacity="0.5" x1="1200" y1="2300" x2="1200" y2="1800" />
@@ -171,10 +171,10 @@ const LOADERS = {
   spin: Spin
 }
 
-const DEFAULT_SPINNER = 'ring'
+const DEFAULT_SPINNER = "ring"
 
 export interface LoaderProps
-  extends Omit<React.ComponentPropsWithoutRef<'svg'>, 'display' | 'opacity' | 'intent'>,
+  extends Omit<React.ComponentPropsWithoutRef<"svg">, "display" | "opacity" | "intent">,
     LoaderVariantProps {
   variant?: keyof typeof LOADERS
 }
@@ -189,10 +189,10 @@ const Loader = (props: LoaderProps, ref: React.ForwardedRef<SVGSVGElement>) => {
       className={loaderStyles({
         intent,
         size,
-        className: ['ring'].includes(variant)
-          ? 'animate-spin'
-          : variant === 'spin'
-            ? 'stroke-current'
+        className: ["ring"].includes(variant)
+          ? "animate-spin"
+          : variant === "spin"
+            ? "stroke-current"
             : className
       })}
       ref={ref}
diff --git a/components/ui/loading-dots.tsx b/components/ui/loading-dots.tsx
index 255e1f9e..6f01ef8a 100644
--- a/components/ui/loading-dots.tsx
+++ b/components/ui/loading-dots.tsx
@@ -1,17 +1,17 @@
-'use client'
+"use client"
 
-import * as React from 'react'
+import * as React from "react"
 
-import { cn } from './primitive'
+import { cn } from "./primitive"
 
-const dots = 'mx-[1px] inline-block size-[0.3125rem] animate-blink rounded-md'
+const dots = "mx-[1px] inline-block size-[0.3125rem] animate-blink rounded-md"
 
 export const LoadingDots = ({ className }: { className: string }) => {
   return (
     <span className="mx-2 inline-flex items-center">
       <span className={cn(dots, className)} />
-      <span className={cn(dots, 'animation-delay-[200ms]', className)} />
-      <span className={cn(dots, 'animation-delay-[400ms]', className)} />
+      <span className={cn(dots, "animation-delay-[200ms]", className)} />
+      <span className={cn(dots, "animation-delay-[400ms]", className)} />
     </span>
   )
 }
diff --git a/components/ui/menu.tsx b/components/ui/menu.tsx
index c1370ac4..519da0c5 100644
--- a/components/ui/menu.tsx
+++ b/components/ui/menu.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import * as React from 'react'
+import * as React from "react"
 
-import { IconBulletFill, IconCheck, IconChevronLgRight } from 'justd-icons'
+import { IconBulletFill, IconCheck, IconChevronLgRight } from "justd-icons"
 import type {
   ButtonProps,
   MenuItemProps as MenuItemPrimitiveProps,
@@ -10,7 +10,7 @@ import type {
   MenuTriggerProps as MenuTriggerPrimitiveProps,
   PopoverProps,
   SeparatorProps
-} from 'react-aria-components'
+} from "react-aria-components"
 import {
   Button,
   Header,
@@ -19,14 +19,14 @@ import {
   MenuTrigger as MenuTriggerPrimitive,
   Separator,
   SubmenuTrigger as SubmenuTriggerPrimitive
-} from 'react-aria-components'
-import type { VariantProps } from 'tailwind-variants'
-import { tv } from 'tailwind-variants'
+} from "react-aria-components"
+import type { VariantProps } from "tailwind-variants"
+import { tv } from "tailwind-variants"
 
-import { DropdownItemDetails, dropdownItemStyles, DropdownSection } from './dropdown'
-import { Keyboard } from './keyboard'
-import { Popover } from './popover'
-import { cn, cr } from './primitive'
+import { DropdownItemDetails, dropdownItemStyles, DropdownSection } from "./dropdown"
+import { Keyboard } from "./keyboard"
+import { Popover } from "./popover"
+import { cn, cr } from "./primitive"
 
 interface MenuContextProps {
   respectScreen: boolean
@@ -56,10 +56,10 @@ const SubMenu = ({ delay = 0, ...props }) => (
 
 const menuStyles = tv({
   slots: {
-    menu: 'z32kk max-h-[calc(var(--visual-viewport-height)-10rem)] sm:max-h-[inherit] overflow-auto rounded-xl p-1 outline outline-0 [clip-path:inset(0_0_0_0_round_calc(var(--radius)-2px))]',
-    popover: 'z-50 min-w-40 p-0 outline-none shadow-sm',
+    menu: "z32kk max-h-[calc(var(--visual-viewport-height)-10rem)] sm:max-h-[inherit] overflow-auto rounded-xl p-1 outline outline-0 [clip-path:inset(0_0_0_0_round_calc(var(--radius)-2px))]",
+    popover: "z-50 min-w-40 p-0 outline-none shadow-sm",
     trigger: [
-      'inline text-left focus:outline-none focus-visible:ring-1 focus-visible:ring-primary-500 pressed:outline-none'
+      "inline text-left focus:outline-none focus-visible:ring-1 focus-visible:ring-primary-500 pressed:outline-none"
     ]
   }
 })
@@ -75,7 +75,7 @@ const Trigger = ({ className, ...props }: MenuTriggerProps) => (
 )
 
 interface MenuContentProps<T>
-  extends Omit<PopoverProps, 'children' | 'style'>,
+  extends Omit<PopoverProps, "children" | "style">,
     MenuPrimitiveProps<T> {
   className?: string
   popoverClassName?: string
@@ -104,13 +104,13 @@ const Content = <T extends object>({
 }
 
 interface MenuItemProps
-  extends Omit<MenuItemPrimitiveProps, 'isDanger'>,
+  extends Omit<MenuItemPrimitiveProps, "isDanger">,
     VariantProps<typeof dropdownItemStyles> {
   isDanger?: boolean
 }
 
 const Item = ({ className, isDanger = false, children, ...props }: MenuItemProps) => {
-  const textValue = props.textValue || (typeof children === 'string' ? children : undefined)
+  const textValue = props.textValue || (typeof children === "string" ? children : undefined)
   return (
     <MenuItem
       textValue={textValue}
@@ -120,12 +120,12 @@ const Item = ({ className, isDanger = false, children, ...props }: MenuItemProps
           className
         })
       )}
-      data-danger={isDanger ? 'true' : undefined}
+      data-danger={isDanger ? "true" : undefined}
       {...props}
     >
       {(values) => (
         <>
-          {typeof children === 'function' ? children(values) : children}
+          {typeof children === "function" ? children(values) : children}
           {values.hasSubmenu && <IconChevronLgRight className="gpfw ml-auto size-3.5" />}
         </>
       )}
@@ -141,8 +141,8 @@ export interface MenuHeaderProps extends React.ComponentProps<typeof Header> {
 const MenuHeader = ({ className, inset, separator = false, ...props }: MenuHeaderProps) => (
   <Header
     className={cn(
-      'p-2 text-base font-semibold sm:text-sm',
-      separator && '-mx-1 border-b border-b-border px-3 pb-[0.625rem]',
+      "p-2 text-base font-semibold sm:text-sm",
+      separator && "-mx-1 border-b border-b-border px-3 pb-[0.625rem]",
       className
     )}
     {...props}
@@ -150,11 +150,11 @@ const MenuHeader = ({ className, inset, separator = false, ...props }: MenuHeade
 )
 
 const MenuSeparator = ({ className, ...props }: SeparatorProps) => (
-  <Separator className={cn('-mx-1 my-1 h-px ms bg-muted', className)} {...props} />
+  <Separator className={cn("-mx-1 my-1 h-px ms bg-muted", className)} {...props} />
 )
 
 const Checkbox = ({ className, children, ...props }: MenuItemProps) => (
-  <Item className={cn('pl-8 relative', className)} {...props}>
+  <Item className={cn("pl-8 relative", className)} {...props}>
     {(values) => (
       <>
         {values.isSelected && (
@@ -163,14 +163,14 @@ const Checkbox = ({ className, children, ...props }: MenuItemProps) => (
           </span>
         )}
 
-        {typeof children === 'function' ? children(values) : children}
+        {typeof children === "function" ? children(values) : children}
       </>
     )}
   </Item>
 )
 
 const Radio = ({ className, children, ...props }: MenuItemProps) => (
-  <Item className={cn('pl-8 relative', className)} {...props}>
+  <Item className={cn("pl-8 relative", className)} {...props}>
     {(values) => (
       <>
         {values.isSelected && (
@@ -179,7 +179,7 @@ const Radio = ({ className, children, ...props }: MenuItemProps) => (
           </span>
         )}
 
-        {typeof children === 'function' ? children(values) : children}
+        {typeof children === "function" ? children(values) : children}
       </>
     )}
   </Item>
diff --git a/components/ui/meter.tsx b/components/ui/meter.tsx
index d6c3bb89..a2b6a048 100644
--- a/components/ui/meter.tsx
+++ b/components/ui/meter.tsx
@@ -1,14 +1,14 @@
-'use client'
+"use client"
 
-import * as React from 'react'
+import * as React from "react"
 
-import { motion } from 'framer-motion'
-import { IconTriangleInfoFill } from 'justd-icons'
-import type { MeterProps as AriaMeterProps } from 'react-aria-components'
-import { Meter as MeterPrimitive } from 'react-aria-components'
+import { motion } from "framer-motion"
+import { IconTriangleInfoFill } from "justd-icons"
+import type { MeterProps as AriaMeterProps } from "react-aria-components"
+import { Meter as MeterPrimitive } from "react-aria-components"
 
-import { Label } from './field'
-import { ctr } from './primitive'
+import { Label } from "./field"
+import { ctr } from "./primitive"
 
 export interface MeterProps extends AriaMeterProps {
   label?: string
@@ -16,25 +16,25 @@ export interface MeterProps extends AriaMeterProps {
 
 const Meter = ({ label, ...props }: MeterProps) => {
   return (
-    <MeterPrimitive {...props} className={ctr(props.className, 'flex flex-col gap-1')}>
+    <MeterPrimitive {...props} className={ctr(props.className, "flex flex-col gap-1")}>
       {({ percentage, valueText }) => (
         <>
           <div className="flex w-full justify-between gap-2">
             <Label>{label}</Label>
-            <span className={`text-sm ${percentage >= 80 ? 'text-danger' : 'text-muted-fg'}`}>
+            <span className={`text-sm ${percentage >= 80 ? "text-danger" : "text-muted-fg"}`}>
               {percentage >= 80 && (
                 <IconTriangleInfoFill
                   aria-label="Alert"
                   className="inline-block size-4 align-text-bottom"
                 />
               )}
-              {' ' + valueText}
+              {" " + valueText}
             </span>
           </div>
           <div className="relative h-2 min-w-64 rounded-full bg-muted outline outline-1 -outline-offset-1 outline-transparent">
             <motion.div
               className="absolute left-0 top-0 h-full rounded-full forced-colors:bg-[Highlight]"
-              initial={{ width: '0%', backgroundColor: getColor(0) }}
+              initial={{ width: "0%", backgroundColor: getColor(0) }}
               animate={{
                 width: `${percentage}%`,
                 backgroundColor: getColor(percentage)
@@ -50,22 +50,22 @@ const Meter = ({ label, ...props }: MeterProps) => {
 
 const getColor = (percentage: number) => {
   if (percentage < 30) {
-    return '#0d6efd' // Blue
+    return "#0d6efd" // Blue
   }
 
   if (percentage < 50) {
-    return '#198754' // Green
+    return "#198754" // Green
   }
 
   if (percentage < 70) {
-    return '#ffc107' // Yellow
+    return "#ffc107" // Yellow
   }
 
   if (percentage < 80) {
-    return '#f97316' // Orange
+    return "#f97316" // Orange
   }
 
-  return '#e11d48' // Red
+  return "#e11d48" // Red
 }
 
 export { Meter, getColor }
diff --git a/components/ui/modal.tsx b/components/ui/modal.tsx
index 2f683f5b..5077a414 100644
--- a/components/ui/modal.tsx
+++ b/components/ui/modal.tsx
@@ -1,94 +1,94 @@
-'use client'
+"use client"
 
-import * as React from 'react'
+import * as React from "react"
 
 import type {
   DialogTriggerProps,
   ModalOverlayProps as ModalOverlayPrimitiveProps
-} from 'react-aria-components'
+} from "react-aria-components"
 import {
   Button as ButtonPrimitive,
   type DialogProps,
   DialogTrigger as DialogTriggerPrimitive,
   Modal as ModalPrimitive,
   ModalOverlay as ModalOverlayPrimitive
-} from 'react-aria-components'
-import { tv, type VariantProps } from 'tailwind-variants'
+} from "react-aria-components"
+import { tv, type VariantProps } from "tailwind-variants"
 
-import { Dialog } from './dialog'
-import { cr } from './primitive'
+import { Dialog } from "./dialog"
+import { cr } from "./primitive"
 
 const modalOverlayStyles = tv({
   base: [
-    'fixed left-0 top-0 isolate z-50 h-[--visual-viewport-height] w-full',
-    'flex items-end text-center sm:items-center sm:justify-center',
-    '[--visual-viewport-vertical-padding:16px] sm:[--visual-viewport-vertical-padding:32px]'
+    "fixed left-0 top-0 isolate z-50 h-[--visual-viewport-height] w-full",
+    "flex items-end text-center sm:items-center sm:justify-center",
+    "[--visual-viewport-vertical-padding:16px] sm:[--visual-viewport-vertical-padding:32px]"
   ],
   variants: {
     isBlurred: {
-      true: 'backdrop-blur',
-      false: 'bg-black/15 dark:bg-black/40'
+      true: "backdrop-blur",
+      false: "bg-black/15 dark:bg-black/40"
     },
     isEntering: {
-      true: 'ease-out animate-in fade-in'
+      true: "ease-out animate-in fade-in"
     },
     isExiting: {
-      true: 'duration-200 ease-in animate-out fade-out'
+      true: "duration-200 ease-in animate-out fade-out"
     }
   }
 })
 const modalContentStyles = tv({
   base: [
-    'max-h-full w-full rounded-t-2xl ring-1 ring-dark/5 bg-overlay text-overlay-fg text-left align-middle shadow-lg',
-    'dark:ring-white/15 sm:rounded-xl overflow-hidden'
+    "max-h-full w-full rounded-t-2xl ring-1 ring-dark/5 bg-overlay text-overlay-fg text-left align-middle shadow-lg",
+    "dark:ring-light/15 sm:rounded-xl overflow-hidden"
   ],
   variants: {
     isEntering: {
       true: [
-        'animate-in duration-200 fade-in-0 slide-in-from-bottom-[20%]',
-        'sm:slide-in-from-bottom-auto sm:slide-in-from-top-[20%]'
+        "animate-in duration-200 fade-in-0 slide-in-from-bottom-[20%]",
+        "sm:slide-in-from-bottom-auto sm:slide-in-from-top-[20%]"
       ]
     },
     isExiting: {
       true: [
-        'duration-200 ease-in animate-out slide-out-to-bottom-56',
-        'sm:exiting:slide-out-to-top-[15%]'
+        "duration-200 ease-in animate-out slide-out-to-bottom-56",
+        "sm:exiting:slide-out-to-top-[15%]"
       ]
     },
     size: {
-      xs: 'sm:max-w-xs',
-      sm: 'sm:max-w-sm',
-      md: 'sm:max-w-md',
-      lg: 'sm:max-w-lg sm:has-[[role=alertdialog]]:max-w-lg sm:has-[[role=dialog]]:max-w-lg',
-      xl: 'sm:max-w-xl',
-      '2xl': 'sm:max-w-2xl',
-      '3xl': 'sm:max-w-3xl',
-      '4xl': 'sm:max-w-4xl',
-      '5xl': 'sm:max-w-5xl'
+      xs: "sm:max-w-xs",
+      sm: "sm:max-w-sm",
+      md: "sm:max-w-md",
+      lg: "sm:max-w-lg sm:has-[[role=alertdialog]]:max-w-lg sm:has-[[role=dialog]]:max-w-lg",
+      xl: "sm:max-w-xl",
+      "2xl": "sm:max-w-2xl",
+      "3xl": "sm:max-w-3xl",
+      "4xl": "sm:max-w-4xl",
+      "5xl": "sm:max-w-5xl"
     }
   },
   defaultVariants: {
-    size: 'lg'
+    size: "lg"
   }
 })
 
 interface ModalProps extends DialogTriggerProps {}
-const Modal = ({ children }: ModalProps) => {
-  return <DialogTriggerPrimitive>{children}</DialogTriggerPrimitive>
+const Modal = ({ children, ...props }: ModalProps) => {
+  return <DialogTriggerPrimitive {...props}>{children}</DialogTriggerPrimitive>
 }
 
 interface ModalContentProps
-  extends Omit<React.ComponentProps<typeof Modal>, 'children'>,
-    Omit<ModalOverlayPrimitiveProps, 'className'>,
+  extends Omit<React.ComponentProps<typeof Modal>, "children">,
+    Omit<ModalOverlayPrimitiveProps, "className">,
     VariantProps<typeof modalContentStyles> {
-  'aria-label'?: DialogProps['aria-label']
-  'aria-labelledby'?: DialogProps['aria-labelledby']
-  role?: DialogProps['role']
+  "aria-label"?: DialogProps["aria-label"]
+  "aria-labelledby"?: DialogProps["aria-labelledby"]
+  role?: DialogProps["role"]
   closeButton?: boolean
   isBlurred?: boolean
   classNames?: {
-    overlay?: ModalOverlayPrimitiveProps['className']
-    content?: ModalOverlayPrimitiveProps['className']
+    overlay?: ModalOverlayPrimitiveProps["className"]
+    content?: ModalOverlayPrimitiveProps["className"]
   }
 }
 
@@ -102,7 +102,7 @@ const ModalContent = ({
   closeButton = true,
   ...props
 }: ModalContentProps) => {
-  const _isDismissable = role === 'alertdialog' ? false : isDismissable
+  const _isDismissable = role === "alertdialog" ? false : isDismissable
   return (
     <ModalOverlayPrimitive
       isDismissable={_isDismissable}
diff --git a/components/ui/multiple-select.tsx b/components/ui/multiple-select.tsx
index e7bb31e7..412b1e87 100644
--- a/components/ui/multiple-select.tsx
+++ b/components/ui/multiple-select.tsx
@@ -1,39 +1,39 @@
-'use client'
-
-import * as React from 'react'
-
-import { IconChevronLgDown } from 'justd-icons'
-import { useFilter } from 'react-aria'
-import type { ComboBoxProps as ComboBoxPrimitiveProps, Key } from 'react-aria-components'
-import { ComboBox, Group } from 'react-aria-components'
-import type { ListData } from 'react-stately'
-import { useListData } from 'react-stately'
-import { tv } from 'tailwind-variants'
-
-import { Button } from './button'
-import type { FieldProps } from './field'
-import { Description, Input, Label } from './field'
-import { ListBox } from './list-box'
-import { Popover } from './popover'
-import { cn } from './primitive'
-import type { RestrictedIntent, TagGroupProps } from './tag-group'
-import { Tag } from './tag-group'
-import { VisuallyHidden } from './visually-hidden'
+"use client"
+
+import * as React from "react"
+
+import { IconChevronLgDown } from "justd-icons"
+import { useFilter } from "react-aria"
+import type { ComboBoxProps as ComboBoxPrimitiveProps, Key } from "react-aria-components"
+import { ComboBox, Group } from "react-aria-components"
+import type { ListData } from "react-stately"
+import { useListData } from "react-stately"
+import { tv } from "tailwind-variants"
+
+import { Button } from "./button"
+import type { FieldProps } from "./field"
+import { Description, Input, Label } from "./field"
+import { ListBox } from "./list-box"
+import { Popover } from "./popover"
+import { cn } from "./primitive"
+import type { RestrictedIntent, TagGroupProps } from "./tag-group"
+import { Tag } from "./tag-group"
+import { VisuallyHidden } from "./visually-hidden"
 
 const multiSelectStyles = tv({
   slots: {
-    multiSelectField: 'group flex w-full min-w-80 flex-col gap-1',
+    multiSelectField: "group flex w-full min-w-80 flex-col gap-1",
     multiSelect: [
-      'relative px-1 flex min-h-10 flex-row flex-wrap items-center rounded-lg shadow-sm border',
-      'has-[input[data-focused=true]]:border-primary',
-      'has-[input[data-invalid=true][data-focused=true]]:border-danger has-[input[data-invalid=true]]:border-danger has-[input[data-invalid=true]]:ring-danger/20',
-      'has-[input[data-focused=true]]:ring-4 has-[input[data-focused=true]]:ring-primary/20'
+      "relative px-1 flex min-h-10 flex-row flex-wrap items-center rounded-lg shadow-sm border",
+      "has-[input[data-focused=true]]:border-primary",
+      "has-[input[data-invalid=true][data-focused=true]]:border-danger has-[input[data-invalid=true]]:border-danger has-[input[data-invalid=true]]:ring-danger/20",
+      "has-[input[data-focused=true]]:ring-4 has-[input[data-focused=true]]:ring-primary/20"
     ],
     chevronButton:
-      'size-8 -mr-2 grid place-content-center rounded-sm hover:text-fg focus:text-fg text-muted-fg',
-    input: 'flex-1 py-1 px-0.5 ml-1 shadow-none ring-0',
-    comboBoxChild: 'inline-flex flex-1 flex-wrap items-center px-0',
-    comboBox: 'group peer flex flex-1'
+      "size-8 -mr-2 grid place-content-center rounded-sm hover:text-fg focus:text-fg text-muted-fg",
+    input: "flex-1 py-1 px-0.5 ml-1 shadow-none ring-0",
+    comboBoxChild: "inline-flex flex-1 flex-wrap items-center px-0",
+    comboBox: "group peer flex flex-1"
   }
 })
 
@@ -54,17 +54,17 @@ interface MultipleSelectProps<T extends object>
   extends FieldProps,
     Omit<
       ComboBoxPrimitiveProps<T>,
-      | 'children'
-      | 'validate'
-      | 'allowsEmptyCollection'
-      | 'selectedKey'
-      | 'inputValue'
-      | 'className'
-      | 'value'
-      | 'onSelectionChange'
-      | 'onInputChange'
+      | "children"
+      | "validate"
+      | "allowsEmptyCollection"
+      | "selectedKey"
+      | "inputValue"
+      | "className"
+      | "value"
+      | "onSelectionChange"
+      | "onInputChange"
     >,
-    Pick<TagGroupProps, 'shape'> {
+    Pick<TagGroupProps, "shape"> {
   intent?: RestrictedIntent
   items: Array<T>
   selectedItems: ListData<T>
@@ -94,7 +94,7 @@ const MultipleSelect = <T extends SelectedKey>({
   const triggerRef = React.useRef<HTMLDivElement | null>(null)
   const [width, setWidth] = React.useState(0)
 
-  const { contains } = useFilter({ sensitivity: 'base' })
+  const { contains } = useFilter({ sensitivity: "base" })
   const selectedKeys = selectedItems.items.map((i) => i.id)
 
   const existingTagCount = selectedItems.items.length
@@ -119,7 +119,7 @@ const MultipleSelect = <T extends SelectedKey>({
 
   const [fieldState, setFieldState] = React.useState<FieldState>({
     selectedKey: null,
-    inputValue: ''
+    inputValue: ""
   })
 
   const onRemove = React.useCallback(
@@ -128,7 +128,7 @@ const MultipleSelect = <T extends SelectedKey>({
 
       const key = keys.values().next().value
       selectedItems.remove(key)
-      setFieldState({ inputValue: '', selectedKey: null })
+      setFieldState({ inputValue: "", selectedKey: null })
       onItemCleared?.(key)
       updateInvalidState(selectedItems.items.length - 1)
     },
@@ -156,18 +156,18 @@ const MultipleSelect = <T extends SelectedKey>({
 
       selectedItems.append(item)
       setFieldState({
-        inputValue: '',
+        inputValue: "",
         selectedKey: id
       })
       onItemInserted?.(id)
     }
 
-    accessibleList.setFilterText('')
+    accessibleList.setFilterText("")
   }
   const onInputChange = (v: string) => {
     setFieldState((prevState) => ({
       inputValue: v,
-      selectedKey: v === '' ? null : prevState.selectedKey
+      selectedKey: v === "" ? null : prevState.selectedKey
     }))
 
     accessibleList.setFilterText(v)
@@ -190,14 +190,14 @@ const MultipleSelect = <T extends SelectedKey>({
     }
 
     setFieldState({
-      inputValue: '',
+      inputValue: "",
       selectedKey: null
     })
   }, [selectedItems, onItemCleared])
 
   const onKeyDownCapture = React.useCallback(
     (e: React.KeyboardEvent<HTMLInputElement>) => {
-      if (e.key === 'Backspace' && fieldState.inputValue === '') {
+      if (e.key === "Backspace" && fieldState.inputValue === "") {
         popLast()
       }
     },
@@ -225,7 +225,7 @@ const MultipleSelect = <T extends SelectedKey>({
   return (
     <div className={multiSelectField({ className })}>
       {props.label && <Label>{props.label}</Label>}
-      <Group className={props.isDisabled ? 'opacity-50' : ''}>
+      <Group className={props.isDisabled ? "opacity-50" : ""}>
         <div ref={triggerRef} className={multiSelect({ className })}>
           <Tag.Group
             shape={props.shape}
@@ -237,9 +237,9 @@ const MultipleSelect = <T extends SelectedKey>({
             <Tag.List
               items={selectedItems.items}
               className={cn(
-                selectedItems.items.length !== 0 && 'px-1 py-1.5',
-                'last:[&_.jdt3lr2x]:-mr-1 outline-none gap-1.5',
-                props.shape === 'square' && '[&_.jdt3lr2x]:rounded-[calc(var(--radius)-4px)]'
+                selectedItems.items.length !== 0 && "px-1 py-1.5",
+                "last:[&_.jdt3lr2x]:-mr-1 outline-none gap-1.5",
+                props.shape === "square" && "[&_.jdt3lr2x]:rounded-[calc(var(--radius)-4px)]"
               )}
             >
               {props.tag}
@@ -259,14 +259,14 @@ const MultipleSelect = <T extends SelectedKey>({
           >
             <div className={comboBoxChild({ className })}>
               <Input
-                placeholder={maxTagsToAdd <= 0 ? 'Remove one to add more' : props.placeholder}
+                placeholder={maxTagsToAdd <= 0 ? "Remove one to add more" : props.placeholder}
                 className={input()}
                 onBlur={() => {
                   setFieldState({
-                    inputValue: '',
+                    inputValue: "",
                     selectedKey: null
                   })
-                  accessibleList.setFilterText('')
+                  accessibleList.setFilterText("")
                 }}
                 onKeyDownCapture={onKeyDownCapture}
               />
@@ -297,7 +297,7 @@ const MultipleSelect = <T extends SelectedKey>({
                     <Description className="p-3 block">
                       {fieldState.inputValue ? (
                         <>
-                          No results found for:{' '}
+                          No results found for:{" "}
                           <strong className="font-medium text-fg">{fieldState.inputValue}</strong>
                         </>
                       ) : (
@@ -325,7 +325,7 @@ const MultipleSelect = <T extends SelectedKey>({
         </div>
       </Group>
       {props.description && <Description>{props.description}</Description>}
-      {name && <input hidden name={name} value={selectedKeys.join(',')} readOnly />}
+      {name && <input hidden name={name} value={selectedKeys.join(",")} readOnly />}
     </div>
   )
 }
diff --git a/components/ui/note.tsx b/components/ui/note.tsx
index aeddcebf..b65b5c5c 100644
--- a/components/ui/note.tsx
+++ b/components/ui/note.tsx
@@ -1,46 +1,46 @@
-'use client'
+"use client"
 
-import * as React from 'react'
+import * as React from "react"
 
-import { IconCircleCheck, IconCircleInfo, IconTriangleInfo } from 'justd-icons'
-import { Text } from 'react-aria-components'
-import { tv, type VariantProps } from 'tailwind-variants'
+import { IconCircleCheck, IconCircleInfo, IconTriangleInfo } from "justd-icons"
+import { Text } from "react-aria-components"
+import { tv, type VariantProps } from "tailwind-variants"
 
 const noteStyles = tv({
   base: [
-    'my-4 px-5 [&_.nd]:block [&_.nd]:text-sm py-4 overflow-hidden rounded-lg border [&_strong]:font-medium',
-    '[&_[data-slot=icon]]:size-5 [&_[data-slot=icon]]:shrink-0'
+    "my-4 px-5 [&_.nd]:block [&_.nd]:text-sm py-4 overflow-hidden rounded-lg border [&_strong]:font-medium",
+    "[&_[data-slot=icon]]:size-5 [&_[data-slot=icon]]:shrink-0"
   ],
   variants: {
     intent: {
       primary: [
-        'border-primary-500/20 [&_a]:text-primary-600 text-primary-800 bg-primary-50/50 [&_[data-slot=icon]]:text-primary-600 leading-4',
-        'dark:bg-primary-600/10 dark:text-primary-200 dark:[&_a]:text-primary-50 dark:[&_[data-slot=icon]]:text-primary-400'
+        "border-primary-500/20 [&_a]:text-primary-600 text-primary-800 bg-primary-50/50 [&_[data-slot=icon]]:text-primary-600 leading-4",
+        "dark:bg-primary-600/10 dark:text-primary-200 dark:[&_a]:text-primary-50 dark:[&_[data-slot=icon]]:text-primary-400"
       ],
       secondary: [
-        'border-zinc-500/20 [&_a]:text-zinc-600 text-zinc-900 bg-zinc-50/50 [&_[data-slot=icon]]:text-zinc-500 leading-4',
-        'dark:bg-zinc-500/10 dark:text-zinc-200 dark:[&_a]:text-zinc-50 dark:[&_[data-slot=icon]]:text-zinc-50'
+        "border-zinc-500/20 [&_a]:text-zinc-600 text-zinc-900 bg-zinc-50/50 [&_[data-slot=icon]]:text-zinc-500 leading-4",
+        "dark:bg-zinc-500/10 dark:text-zinc-200 dark:[&_a]:text-zinc-50 dark:[&_[data-slot=icon]]:text-zinc-50"
       ],
       info: [
-        'border-lime-500/20 [&_a]:text-lime-600 text-lime-800 bg-lime-50/50 [&_[data-slot=icon]]:text-lime-500 leading-4',
-        'dark:bg-lime-500/10 dark:text-lime-200 dark:[&_a]:text-lime-50 dark:[&_[data-slot=icon]]:text-lime-400'
+        "border-lime-500/20 [&_a]:text-lime-600 text-lime-800 bg-lime-50/50 [&_[data-slot=icon]]:text-lime-500 leading-4",
+        "dark:bg-lime-500/10 dark:text-lime-200 dark:[&_a]:text-lime-50 dark:[&_[data-slot=icon]]:text-lime-400"
       ],
       warning: [
-        'border-amber-500/20 [&_a]:text-amber-600 text-amber-800 bg-amber-50/50 [&_[data-slot=icon]]:text-amber-500 leading-4',
-        'dark:bg-amber-500/10 dark:text-amber-200 dark:[&_a]:text-amber-50 dark:[&_[data-slot=icon]]:text-amber-400'
+        "border-amber-500/20 [&_a]:text-amber-600 text-amber-800 bg-amber-50/50 [&_[data-slot=icon]]:text-amber-500 leading-4",
+        "dark:bg-amber-500/10 dark:text-amber-200 dark:[&_a]:text-amber-50 dark:[&_[data-slot=icon]]:text-amber-400"
       ],
       danger: [
-        'border-red-500/20 [&_a]:text-red-600 text-red-800 bg-red-50/50 [&_[data-slot=icon]]:text-red-500 leading-4',
-        'dark:bg-red-500/10 dark:text-red-200 dark:[&_a]:text-red-50 dark:[&_[data-slot=icon]]:text-red-400'
+        "border-red-500/20 [&_a]:text-red-600 text-red-800 bg-red-50/50 [&_[data-slot=icon]]:text-red-500 leading-4",
+        "dark:bg-red-500/10 dark:text-red-200 dark:[&_a]:text-red-50 dark:[&_[data-slot=icon]]:text-red-400"
       ],
       success: [
-        'border-emerald-500/20 [&_a]:text-emerald-600 text-emerald-900 bg-emerald-50/50 [&_[data-slot=icon]]:text-emerald-600 leading-4',
-        'dark:bg-emerald-500/10 dark:text-emerald-200 dark:[&_a]:text-emerald-50 dark:[&_[data-slot=icon]]:text-emerald-400'
+        "border-emerald-500/20 [&_a]:text-emerald-600 text-emerald-900 bg-emerald-50/50 [&_[data-slot=icon]]:text-emerald-600 leading-4",
+        "dark:bg-emerald-500/10 dark:text-emerald-200 dark:[&_a]:text-emerald-50 dark:[&_[data-slot=icon]]:text-emerald-400"
       ]
     }
   },
   defaultVariants: {
-    intent: 'primary'
+    intent: "primary"
   }
 })
 
@@ -50,15 +50,15 @@ interface NoteProps
   hideIndicator?: boolean
 }
 
-const Note = ({ hideIndicator = false, intent = 'primary', className, ...props }: NoteProps) => {
+const Note = ({ hideIndicator = false, intent = "primary", className, ...props }: NoteProps) => {
   return (
     <div className={noteStyles({ intent, className })} {...props}>
       <div className="flex items-start gap-x-2.5">
         {!hideIndicator && (
           <div className="w-5 shrink-0 mt-px">
-            {['info', 'primary', 'secondary'].includes(intent) ? (
+            {["info", "primary", "secondary"].includes(intent) ? (
               <IconCircleInfo />
-            ) : intent === 'success' ? (
+            ) : intent === "success" ? (
               <IconCircleCheck />
             ) : (
               <IconTriangleInfo />
diff --git a/components/ui/number-field.tsx b/components/ui/number-field.tsx
index 442a4e85..27a4d560 100644
--- a/components/ui/number-field.tsx
+++ b/components/ui/number-field.tsx
@@ -1,23 +1,23 @@
-'use client'
+"use client"
 
-import { IconChevronDown, IconChevronUp, IconMinus, IconPlus } from 'justd-icons'
+import { IconChevronDown, IconChevronUp, IconMinus, IconPlus } from "justd-icons"
 import {
   Button,
   type ButtonProps,
   NumberField as NumberFieldPrimitive,
   type NumberFieldProps as NumberFieldPrimitiveProps,
   type ValidationResult
-} from 'react-aria-components'
-import { tv } from 'tailwind-variants'
+} from "react-aria-components"
+import { tv } from "tailwind-variants"
 
-import { Description, fieldBorderStyles, FieldError, FieldGroup, Input, Label } from './field'
-import { ctr, useMediaQuery } from './primitive'
+import { Description, fieldBorderStyles, FieldError, FieldGroup, Input, Label } from "./field"
+import { ctr, useMediaQuery } from "./primitive"
 
 const numberFieldStyles = tv({
   slots: {
-    base: 'group flex flex-col gap-1',
+    base: "group flex flex-col gap-1",
     stepperButton:
-      'h-10 cursor-default px-2 text-muted-fg pressed:bg-primary pressed:text-primary-fg group-disabled:bg-secondary forced-colors:group-disabled:text-[GrayText]'
+      "h-10 cursor-default px-2 text-muted-fg pressed:bg-primary pressed:text-primary-fg group-disabled:bg-secondary forced-colors:group-disabled:text-[GrayText]"
   }
 })
 
@@ -38,7 +38,7 @@ const NumberField = ({
   errorMessage,
   ...props
 }: NumberFieldProps) => {
-  const isMobile = useMediaQuery('(max-width: 768px)')
+  const isMobile = useMediaQuery("(max-width: 768px)")
   return (
     <NumberFieldPrimitive {...props} className={ctr(className, base())}>
       <Label>{label}</Label>
@@ -50,7 +50,7 @@ const NumberField = ({
             <div
               className={fieldBorderStyles({
                 ...renderProps,
-                className: 'grid h-10 place-content-center border-s'
+                className: "grid h-10 place-content-center border-s"
               })}
             >
               {isMobile ? (
@@ -61,7 +61,7 @@ const NumberField = ({
                   <div
                     className={fieldBorderStyles({
                       ...renderProps,
-                      className: 'border-b'
+                      className: "border-b"
                     })}
                   />
                   <StepperButton slot="decrement" emblemType="chevron" className="h-5 px-1" />
@@ -78,25 +78,25 @@ const NumberField = ({
 }
 
 interface StepperButtonProps extends ButtonProps {
-  slot: 'increment' | 'decrement'
-  emblemType?: 'chevron' | 'default'
+  slot: "increment" | "decrement"
+  emblemType?: "chevron" | "default"
   className?: string
 }
 
 const StepperButton = ({
   slot,
   className,
-  emblemType = 'default',
+  emblemType = "default",
   ...props
 }: StepperButtonProps) => {
   const icon =
-    emblemType === 'chevron' ? (
-      slot === 'increment' ? (
+    emblemType === "chevron" ? (
+      slot === "increment" ? (
         <IconChevronUp className="size-5" />
       ) : (
         <IconChevronDown className="size-5" />
       )
-    ) : slot === 'increment' ? (
+    ) : slot === "increment" ? (
       <IconPlus />
     ) : (
       <IconMinus />
diff --git a/components/ui/pagination.tsx b/components/ui/pagination.tsx
index 73a2d44c..81087877 100644
--- a/components/ui/pagination.tsx
+++ b/components/ui/pagination.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import * as React from 'react'
+import * as React from "react"
 
 import {
   IconChevronLgLeft,
@@ -8,7 +8,7 @@ import {
   IconChevronsLgLeft,
   IconChevronsLgRight,
   IconDotsHorizontal
-} from 'justd-icons'
+} from "justd-icons"
 import {
   ListBox,
   ListBoxItem,
@@ -17,27 +17,27 @@ import {
   Section,
   type SectionProps,
   Separator
-} from 'react-aria-components'
-import { tv } from 'tailwind-variants'
+} from "react-aria-components"
+import { tv } from "tailwind-variants"
 
-import { buttonStyles } from './button'
-import { cn, cr } from './primitive'
+import { buttonStyles } from "./button"
+import { cn, cr } from "./primitive"
 
 const paginationStyles = tv({
   slots: {
-    pagination: 'mx-auto flex w-full justify-center gap-1',
-    section: 'flex h-9 gap-1',
-    list: 'flex flex-row items-center gap-1',
+    pagination: "mx-auto flex w-full justify-center gap-1",
+    section: "flex h-9 gap-1",
+    list: "flex flex-row items-center gap-1",
     itemButton:
-      'focus-visible:border-primary focus-visible:bg-primary/10 dark:focus-visible:text-primary-100 dark:[&>[data-slot=icon]]:text-primary-100 focus-visible:text-primary-900 [&>[data-slot=icon]]:text-primary-960 focus-visible:ring-4 focus-visible:ring-primary/20',
-    itemLabel: 'h-9 px-3.5 grid place-content-center',
-    itemSeparator: 'h-9 grid place-content-center',
+      "focus-visible:border-primary focus-visible:bg-primary/10 dark:focus-visible:text-primary-100 dark:[&>[data-slot=icon]]:text-primary-100 focus-visible:text-primary-900 [&>[data-slot=icon]]:text-primary-960 focus-visible:ring-4 focus-visible:ring-primary/20",
+    itemLabel: "h-9 px-3.5 grid place-content-center",
+    itemSeparator: "h-9 grid place-content-center",
     itemEllipsis:
-      'flex items-center justify-center focus-visible:border-primary rounded-lg border border-transparent focus:outline-none size-9 focus-visible:bg-primary/10 dark:focus-visible:text-primary-100 dark:[&>[data-slot=icon]]:text-primary-100 focus-visible:text-primary-900 [&>[data-slot=icon]]:text-primary-960 focus-visible:ring-4 focus-visible:ring-primary/20',
-    itemEllipsisIcon: 'flex size-9 items-center justify-center',
+      "flex items-center justify-center focus-visible:border-primary rounded-lg border border-transparent focus:outline-none size-9 focus-visible:bg-primary/10 dark:focus-visible:text-primary-100 dark:[&>[data-slot=icon]]:text-primary-100 focus-visible:text-primary-900 [&>[data-slot=icon]]:text-primary-960 focus-visible:ring-4 focus-visible:ring-primary/20",
+    itemEllipsisIcon: "flex size-9 items-center justify-center",
     defaultItem:
-      'focus-visible:border-primary disabled:cursor-default focus-visible:bg-primary/10 dark:focus-visible:text-primary-100 dark:[&>[data-slot=icon]]:text-primary-100 focus-visible:text-primary-900 [&>[data-slot=icon]]:text-primary-960 focus-visible:ring-4 focus-visible:ring-primary/20 disabled:opacity-100',
-    itemSeparatorLine: 'h-5 w-[1.5px] bg-zinc-300 dark:bg-zinc-700 rotate-[14deg] shrink-0'
+      "focus-visible:border-primary disabled:cursor-default focus-visible:bg-primary/10 dark:focus-visible:text-primary-100 dark:[&>[data-slot=icon]]:text-primary-100 focus-visible:text-primary-900 [&>[data-slot=icon]]:text-primary-960 focus-visible:ring-4 focus-visible:ring-primary/20 disabled:opacity-100",
+    itemSeparatorLine: "h-5 w-[1.5px] bg-zinc-300 dark:bg-zinc-700 rotate-[14deg] shrink-0"
   }
 })
 
@@ -54,7 +54,7 @@ const {
   itemSeparatorLine
 } = paginationStyles()
 
-const Pagination = ({ className, ...props }: React.ComponentProps<'nav'>) => (
+const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
   <nav role="navigation" aria-label="pagination" className={pagination({ className })} {...props} />
 )
 
@@ -66,7 +66,7 @@ const PaginationList = <T extends object>({ className, ...props }: ListBoxProps<
   return (
     <ListBox
       orientation="horizontal"
-      aria-label={props['aria-label'] || 'Pagination'}
+      aria-label={props["aria-label"] || "Pagination"}
       layout="grid"
       className={cr(className, (className) => list({ className }))}
       {...props}
@@ -77,7 +77,7 @@ const PaginationList = <T extends object>({ className, ...props }: ListBoxProps<
 const renderListItem = (
   props: ListBoxItemProps & {
     textValue?: string
-    'aria-current'?: string | undefined
+    "aria-current"?: string | undefined
     isDisabled?: boolean
     className?: string
   },
@@ -88,37 +88,37 @@ interface PaginationItemProps extends ListBoxItemProps {
   children?: React.ReactNode
   className?: string
   intent?:
-    | 'primary'
-    | 'secondary'
-    | 'danger'
-    | 'warning'
-    | 'info'
-    | 'light/dark'
-    | 'success'
-    | 'light'
-    | 'dark'
-  size?: 'medium' | 'large' | 'square-petite' | 'extra-small' | 'small'
-  shape?: 'square' | 'circle'
-  appearance?: 'solid' | 'outline' | 'plain'
+    | "primary"
+    | "secondary"
+    | "danger"
+    | "warning"
+    | "info"
+    | "light/dark"
+    | "success"
+    | "light"
+    | "dark"
+  size?: "medium" | "large" | "square-petite" | "extra-small" | "small"
+  shape?: "square" | "circle"
+  appearance?: "solid" | "outline" | "plain"
   isCurrent?: boolean
-  variant?: 'label' | 'separator' | 'ellipsis' | 'default' | 'last' | 'first' | 'previous' | 'next'
+  variant?: "label" | "separator" | "ellipsis" | "default" | "last" | "first" | "previous" | "next"
 }
 
 const PaginationItem = ({
-  variant = 'default',
-  size = 'square-petite',
-  appearance = 'outline',
+  variant = "default",
+  size = "square-petite",
+  appearance = "outline",
   intent,
-  shape = 'square',
+  shape = "square",
   className,
   isCurrent,
   children,
   ...props
 }: PaginationItemProps) => {
   const textValue =
-    typeof children === 'string'
+    typeof children === "string"
       ? children
-      : typeof children === 'number'
+      : typeof children === "number"
         ? children.toString()
         : undefined
 
@@ -126,12 +126,12 @@ const PaginationItem = ({
     renderListItem(
       {
         textValue: variant,
-        'aria-current': isCurrent ? 'page' : undefined,
+        "aria-current": isCurrent ? "page" : undefined,
         isDisabled: isCurrent,
         className: cn(
           buttonStyles({
-            appearance: 'outline',
-            size: 'square-petite',
+            appearance: "outline",
+            size: "square-petite",
             className: itemButton()
           }),
           className
@@ -142,7 +142,7 @@ const PaginationItem = ({
     )
 
   switch (variant) {
-    case 'label':
+    case "label":
       return renderListItem(
         {
           textValue: textValue,
@@ -151,19 +151,19 @@ const PaginationItem = ({
         },
         children
       )
-    case 'separator':
+    case "separator":
       return renderListItem(
         {
-          textValue: 'Separator',
+          textValue: "Separator",
           className: itemSeparator({ className }),
           ...props
         },
         <Separator orientation="vertical" className={itemSeparatorLine()} />
       )
-    case 'ellipsis':
+    case "ellipsis":
       return renderListItem(
         {
-          textValue: 'More pages',
+          textValue: "More pages",
           className: itemEllipsis({ className }),
           ...props
         },
@@ -171,24 +171,24 @@ const PaginationItem = ({
           <IconDotsHorizontal />
         </span>
       )
-    case 'previous':
+    case "previous":
       return renderPaginationIndicator(<IconChevronLgLeft />)
-    case 'next':
+    case "next":
       return renderPaginationIndicator(<IconChevronLgRight />)
-    case 'first':
+    case "first":
       return renderPaginationIndicator(<IconChevronsLgLeft />)
-    case 'last':
+    case "last":
       return renderPaginationIndicator(<IconChevronsLgRight />)
     default:
       return renderListItem(
         {
           textValue: textValue,
-          'aria-current': isCurrent ? 'page' : undefined,
+          "aria-current": isCurrent ? "page" : undefined,
           isDisabled: isCurrent,
           className: cn(
             buttonStyles({
-              intent: isCurrent ? 'primary' : intent,
-              appearance: isCurrent ? 'solid' : appearance,
+              intent: isCurrent ? "primary" : intent,
+              appearance: isCurrent ? "solid" : appearance,
               size,
               className: defaultItem({ className })
             }),
diff --git a/components/ui/popover.tsx b/components/ui/popover.tsx
index 0f425b61..46eb8d51 100644
--- a/components/ui/popover.tsx
+++ b/components/ui/popover.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import * as React from 'react'
+import * as React from "react"
 
-import type { ModalOverlayProps } from 'react-aria-components'
+import type { ModalOverlayProps } from "react-aria-components"
 import {
   Button,
   type DialogProps,
@@ -14,88 +14,88 @@ import {
   PopoverContext,
   type PopoverProps as PopoverPrimitiveProps,
   useSlottedContext
-} from 'react-aria-components'
-import { twJoin } from 'tailwind-merge'
-import { tv } from 'tailwind-variants'
+} from "react-aria-components"
+import { twJoin } from "tailwind-merge"
+import { tv } from "tailwind-variants"
 
-import { Dialog } from './dialog'
-import { cn, cr, useMediaQuery } from './primitive'
+import { Dialog } from "./dialog"
+import { cn, cr, useMediaQuery } from "./primitive"
 
-const Popover = ({ children }: { children: React.ReactNode }) => {
-  return <DialogTriggerPrimitive>{children}</DialogTriggerPrimitive>
+const Popover = ({ children, ...props }: { children: React.ReactNode }) => {
+  return <DialogTriggerPrimitive {...props}>{children}</DialogTriggerPrimitive>
 }
 
 const Title = ({ className, ...props }: React.ComponentProps<typeof Dialog.Title>) => (
-  <Dialog.Title className={cn('leading-none', className)} {...props} />
+  <Dialog.Title className={cn("leading-none", className)} {...props} />
 )
 
 const Header = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <Dialog.Header className={cn('p-0 sm:pt-0', className)} {...props} />
+  <Dialog.Header className={cn("p-0 sm:pt-0", className)} {...props} />
 )
 
 const Footer = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <Dialog.Footer className={cn('pt-4 pb-0 sm:pb-0', className)} {...props} />
+  <Dialog.Footer className={cn("pt-4 pb-0 sm:pb-0", className)} {...props} />
 )
 
 const Body = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <Dialog.Body className={cn('p-0', className)} {...props} />
+  <Dialog.Body className={cn("p-0", className)} {...props} />
 )
 
 const popoverContentStyles = tv({
   base: [
-    'max-w-xs min-w-80 p-4 rounded-xl border bg-overlay bg-clip-padding text-overlay-fg shadow-lg dark:backdrop-blur-2xl dark:backdrop-saturate-200 lg:text-sm sm:max-w-3xl forced-colors:bg-[Canvas]'
+    "max-w-xs min-w-80 p-4 rounded-xl border bg-overlay bg-clip-padding text-overlay-fg shadow-lg dark:backdrop-blur-2xl dark:backdrop-saturate-200 lg:text-sm sm:max-w-3xl forced-colors:bg-[Canvas]"
   ],
   variants: {
     isMenu: {
       true: {
-        true: 'p-0'
+        true: "p-0"
       }
     },
     isEntering: {
       true: [
-        'duration-50 ease-out animate-in fade-in placement-left:slide-in-from-right-1 placement-right:slide-in-from-left-1 placement-top:slide-in-from-bottom-1 placement-bottom:slide-in-from-top-1'
+        "duration-50 ease-out animate-in fade-in placement-left:slide-in-from-right-1 placement-right:slide-in-from-left-1 placement-top:slide-in-from-bottom-1 placement-bottom:slide-in-from-top-1"
       ]
     },
     isExiting: {
-      true: 'duration-50 ease-in animate-out fade-out placement-left:slide-out-to-right-1 placement-right:slide-out-to-left-1 placement-top:slide-out-to-bottom-1 placement-bottom:slide-out-to-top-1'
+      true: "duration-50 ease-in animate-out fade-out placement-left:slide-out-to-right-1 placement-right:slide-out-to-left-1 placement-top:slide-out-to-bottom-1 placement-bottom:slide-out-to-top-1"
     }
   }
 })
 
 const drawerStyles = tv({
   base: [
-    'fixed max-h-full bottom-0 top-auto z-50 w-full bg-overlay max-w-2xl border border-b-transparent outline-none'
+    "fixed max-h-full bottom-0 top-auto z-50 w-full bg-overlay max-w-2xl border border-b-transparent outline-none"
   ],
   variants: {
     isMenu: {
-      true: 'p-0 [&_[role=dialog]]:px-0 rounded-t-xl',
-      false: 'p-4 rounded-t-2xl'
+      true: "p-0 [&_[role=dialog]]:px-0 rounded-t-xl",
+      false: "p-4 rounded-t-2xl"
     },
     isEntering: {
       true: [
-        '[will-change:transform] [transition:transform_0.5s_cubic-bezier(0.32,_0.72,_0,_1)]',
-        'animate-in duration-200 fade-in-0 slide-in-from-bottom-56',
-        '[transition:translate3d(0,_100%,_0)]',
-        'sm:slide-in-from-bottom-auto sm:slide-in-from-top-[20%]'
+        "[will-change:transform] [transition:transform_0.5s_cubic-bezier(0.32,_0.72,_0,_1)]",
+        "animate-in duration-200 fade-in-0 slide-in-from-bottom-56",
+        "[transition:translate3d(0,_100%,_0)]",
+        "sm:slide-in-from-bottom-auto sm:slide-in-from-top-[20%]"
       ]
     },
     isExiting: {
-      true: 'duration-200 ease-in animate-out slide-out-to-bottom-56'
+      true: "duration-200 ease-in animate-out slide-out-to-bottom-56"
     }
   }
 })
 
 interface PopoverProps
-  extends Omit<React.ComponentProps<typeof Modal>, 'children'>,
-    Omit<PopoverPrimitiveProps, 'children' | 'className'>,
+  extends Omit<React.ComponentProps<typeof Modal>, "children">,
+    Omit<PopoverPrimitiveProps, "children" | "className">,
     ModalOverlayProps {
   children: React.ReactNode
   className?: string | ((values: any & { defaultClassName?: string }) => string)
   showArrow?: boolean
   style?: React.CSSProperties
   respectScreen?: boolean
-  'aria-label'?: DialogProps['aria-label']
-  'aria-labelledby'?: DialogProps['aria-labelledby']
+  "aria-label"?: DialogProps["aria-label"]
+  "aria-labelledby"?: DialogProps["aria-labelledby"]
 }
 
 const Content = ({
@@ -105,18 +105,18 @@ const Content = ({
   className,
   ...props
 }: PopoverProps) => {
-  const isMobile = useMediaQuery('(max-width: 600px)')
+  const isMobile = useMediaQuery("(max-width: 600px)")
   const popoverContext = useSlottedContext(PopoverContext)!
-  const isMenuTrigger = popoverContext?.trigger === 'MenuTrigger'
-  const isSubmenuTrigger = popoverContext?.trigger === 'SubmenuTrigger'
+  const isMenuTrigger = popoverContext?.trigger === "MenuTrigger"
+  const isSubmenuTrigger = popoverContext?.trigger === "SubmenuTrigger"
   const isMenu = isMenuTrigger || isSubmenuTrigger
   let offset = showArrow ? 12 : 8
   offset = isSubmenuTrigger ? offset - 6 : offset
   return isMobile && respectScreen ? (
     <ModalOverlay
       className={twJoin(
-        'fixed left-0 top-0 bg-overlay/10 isolate z-50 h-[--visual-viewport-height] w-full [--visual-viewport-vertical-padding:16px]',
-        isSubmenuTrigger ? 'bg-overlay/10' : ''
+        "fixed left-0 top-0 bg-overlay/10 isolate z-50 h-[--visual-viewport-height] w-full [--visual-viewport-vertical-padding:16px]",
+        isSubmenuTrigger ? "bg-overlay/10" : ""
       )}
       {...props}
       isDismissable
@@ -127,7 +127,7 @@ const Content = ({
         )}
       >
         <Dialog
-          aria-label={isMenu ? 'Menu' : props['aria-label']}
+          aria-label={isMenu ? "Menu" : props["aria-label"]}
           className="focus:outline-none touch-none"
         >
           {children}
@@ -169,7 +169,7 @@ const Picker = ({ children, className, ...props }: PopoverProps) => {
       className={cr(className, (className, renderProps) =>
         popoverContentStyles({
           ...renderProps,
-          className: cn('max-h-72 overflow-y-auto min-w-[--trigger-width] p-0', className)
+          className: cn("max-h-72 overflow-y-auto min-w-[--trigger-width] p-0", className)
         })
       )}
     >
diff --git a/components/ui/primitive.tsx b/components/ui/primitive.tsx
index bd037e74..aa8c367d 100644
--- a/components/ui/primitive.tsx
+++ b/components/ui/primitive.tsx
@@ -1,11 +1,11 @@
-'use client'
+"use client"
 
-import * as React from 'react'
+import * as React from "react"
 
-import { type ClassValue, clsx } from 'clsx'
-import { composeRenderProps } from 'react-aria-components'
-import { twMerge } from 'tailwind-merge'
-import { tv } from 'tailwind-variants'
+import { type ClassValue, clsx } from "clsx"
+import { composeRenderProps } from "react-aria-components"
+import { twMerge } from "tailwind-merge"
+import { tv } from "tailwind-variants"
 
 const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs))
 
@@ -17,18 +17,18 @@ const composeTailwindRenderProps = <T,>(
 }
 
 const focusRing = tv({
-  base: 'outline-none focus:outline-none forced-colors:outline-[Highlight]',
+  base: "outline-none focus:outline-none forced-colors:outline-[Highlight]",
   variants: {
-    isFocused: { true: 'ring-4 ring-ring/20' },
-    isInvalid: { true: 'ring-4 ring-danger/20' }
+    isFocused: { true: "ring-4 ring-ring/20" },
+    isInvalid: { true: "ring-4 ring-danger/20" }
   }
 })
 
 const isServerSide = (): boolean => {
-  if (typeof window !== 'undefined') {
+  if (typeof window !== "undefined") {
     return false
   }
-  if (typeof process !== 'undefined' && process.versions && process.versions.node) {
+  if (typeof process !== "undefined" && process.versions && process.versions.node) {
     return true
   }
   return true
@@ -43,17 +43,17 @@ const isIos = (userAgent?: string): boolean => {
 const focusStyles = tv({
   extend: focusRing,
   variants: {
-    isFocused: { true: 'border-ring' },
-    isInvalid: { true: 'border-danger' }
+    isFocused: { true: "border-ring" },
+    isInvalid: { true: "border-danger" }
   }
 })
 
 const focusButtonStyles = tv({
-  base: 'outline outline-ring forced-colors:outline-[Highlight] outline-offset-2',
+  base: "outline outline-ring forced-colors:outline-[Highlight] outline-offset-2",
   variants: {
     isFocusVisible: {
-      false: 'outline-0',
-      true: 'outline-2'
+      false: "outline-0",
+      true: "outline-2"
     }
   }
 })
@@ -67,10 +67,10 @@ const useMediaQuery = (query: string) => {
     }
 
     const result = matchMedia(query)
-    result.addEventListener('change', onChange)
+    result.addEventListener("change", onChange)
     setValue(result.matches)
 
-    return () => result.removeEventListener('change', onChange)
+    return () => result.removeEventListener("change", onChange)
   }, [query])
 
   return value
diff --git a/components/ui/progress-bar.tsx b/components/ui/progress-bar.tsx
index 4d300055..96a3e9e8 100644
--- a/components/ui/progress-bar.tsx
+++ b/components/ui/progress-bar.tsx
@@ -1,15 +1,15 @@
-'use client'
+"use client"
 
-import * as React from 'react'
+import * as React from "react"
 
-import { motion } from 'framer-motion'
+import { motion } from "framer-motion"
 import {
   ProgressBar as ProgressBarPrimitive,
   type ProgressBarProps as ProgressBarPrimitiveProps
-} from 'react-aria-components'
+} from "react-aria-components"
 
-import { Label } from './field'
-import { ctr } from './primitive'
+import { Label } from "./field"
+import { ctr } from "./primitive"
 
 interface ProgressBarProps extends ProgressBarPrimitiveProps {
   label?: string
@@ -17,7 +17,7 @@ interface ProgressBarProps extends ProgressBarPrimitiveProps {
 
 const ProgressBar = ({ label, ...props }: ProgressBarProps) => {
   return (
-    <ProgressBarPrimitive {...props} className={ctr(props.className, 'flex flex-col gap-1')}>
+    <ProgressBarPrimitive {...props} className={ctr(props.className, "flex flex-col gap-1")}>
       {({ percentage, valueText, isIndeterminate }) => (
         <>
           <div className="flex justify-between gap-2">
@@ -28,19 +28,19 @@ const ProgressBar = ({ label, ...props }: ProgressBarProps) => {
             {!isIndeterminate ? (
               <motion.div
                 className="absolute left-0 top-0 h-full rounded-full bg-primary forced-colors:bg-[Highlight]"
-                initial={{ width: '0%' }}
+                initial={{ width: "0%" }}
                 animate={{ width: `${percentage}%` }}
-                transition={{ duration: 0.5, ease: 'easeInOut' }}
+                transition={{ duration: 0.5, ease: "easeInOut" }}
               />
             ) : (
               <motion.div
                 className="absolute top-0 h-full rounded-full bg-primary forced-colors:bg-[Highlight]"
-                initial={{ left: '0%', width: '40%' }}
-                animate={{ left: ['0%', '100%', '0%'] }}
+                initial={{ left: "0%", width: "40%" }}
+                animate={{ left: ["0%", "100%", "0%"] }}
                 transition={{
                   repeat: Infinity,
                   duration: 2,
-                  ease: 'easeInOut'
+                  ease: "easeInOut"
                 }}
               />
             )}
diff --git a/components/ui/radio.tsx b/components/ui/radio.tsx
index 5d435052..653a31b5 100644
--- a/components/ui/radio.tsx
+++ b/components/ui/radio.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import * as React from 'react'
+import * as React from "react"
 
 import {
   Radio as RadioPrimitive,
@@ -8,13 +8,13 @@ import {
   type RadioGroupProps as RACRadioGroupProps,
   type RadioProps as RadioPrimitiveProps,
   type ValidationResult
-} from 'react-aria-components'
-import { tv } from 'tailwind-variants'
+} from "react-aria-components"
+import { tv } from "tailwind-variants"
 
-import { Description, FieldError, Label } from './field'
-import { ctr } from './primitive'
+import { Description, FieldError, Label } from "./field"
+import { ctr } from "./primitive"
 
-interface RadioGroupProps extends Omit<RACRadioGroupProps, 'children'> {
+interface RadioGroupProps extends Omit<RACRadioGroupProps, "children"> {
   label?: string
   children?: React.ReactNode
   description?: string
@@ -23,7 +23,7 @@ interface RadioGroupProps extends Omit<RACRadioGroupProps, 'children'> {
 
 const RadioGroup = ({ label, description, errorMessage, children, ...props }: RadioGroupProps) => {
   return (
-    <RadioGroupPrimitive {...props} className={ctr(props.className, 'group flex flex-col gap-2')}>
+    <RadioGroupPrimitive {...props} className={ctr(props.className, "group flex flex-col gap-2")}>
       {label && <Label>{label}</Label>}
       <div className="flex select-none gap-2 group-orientation-horizontal:flex-wrap group-orientation-horizontal:gap-2 sm:group-orientation-horizontal:gap-4 group-orientation-vertical:flex-col">
         {children}
@@ -35,23 +35,23 @@ const RadioGroup = ({ label, description, errorMessage, children, ...props }: Ra
 }
 
 const radioStyles = tv({
-  base: 'size-4 shrink-0 rounded-full border bg-secondary transition',
+  base: "size-4 shrink-0 rounded-full border bg-secondary transition",
   variants: {
     isSelected: {
-      false: 'border-toggle',
-      true: 'border-[4.5px] border-primary'
+      false: "border-toggle",
+      true: "border-[4.5px] border-primary"
     },
     isFocused: {
       true: [
-        'border-primary bg-primary/20 ring-4 ring-primary/20',
-        'group-invalid:border-danger/70 group-invalid:bg-danger/20 group-invalid:ring-danger/20'
+        "border-primary bg-primary/20 ring-4 ring-primary/20",
+        "group-invalid:border-danger/70 group-invalid:bg-danger/20 group-invalid:ring-danger/20"
       ]
     },
     isInvalid: {
-      true: 'border-danger/70 bg-danger/20'
+      true: "border-danger/70 bg-danger/20"
     },
     isDisabled: {
-      true: 'opacity-50'
+      true: "opacity-50"
     }
   }
 })
@@ -67,7 +67,7 @@ const Radio = ({ description, ...props }: RadioProps) => {
         {...props}
         className={ctr(
           props.className,
-          'group flex items-center gap-2 text-sm text-fg transition disabled:text-fg/50 forced-colors:disabled:text-[GrayText]'
+          "group flex items-center gap-2 text-sm text-fg transition disabled:text-fg/50 forced-colors:disabled:text-[GrayText]"
         )}
       >
         {(renderProps) => (
@@ -75,7 +75,7 @@ const Radio = ({ description, ...props }: RadioProps) => {
             <div
               className={radioStyles({
                 ...renderProps,
-                className: 'description' in props ? 'mt-1' : 'mt-0.5'
+                className: "description" in props ? "mt-1" : "mt-0.5"
               })}
             />
             <div className="flex flex-col gap-1">
diff --git a/components/ui/range-calendar.tsx b/components/ui/range-calendar.tsx
index 2214d505..19f3121a 100644
--- a/components/ui/range-calendar.tsx
+++ b/components/ui/range-calendar.tsx
@@ -1,44 +1,44 @@
-'use client'
+"use client"
 
 import type {
   DateValue,
   RangeCalendarProps as RangeCalendarPrimitiveProps
-} from 'react-aria-components'
+} from "react-aria-components"
 import {
   CalendarCell,
   CalendarGrid,
   CalendarGridBody,
   RangeCalendar as RangeCalendarPrimitive,
   Text
-} from 'react-aria-components'
-import { twJoin } from 'tailwind-merge'
-import { tv } from 'tailwind-variants'
+} from "react-aria-components"
+import { twJoin } from "tailwind-merge"
+import { tv } from "tailwind-variants"
 
-import { Calendar } from './calendar'
-import { ctr, focusRing } from './primitive'
+import { Calendar } from "./calendar"
+import { ctr, focusRing } from "./primitive"
 
 const cellRangeStyles = tv({
   extend: focusRing,
-  base: 'flex h-full w-full items-center font-medium justify-center rounded-md forced-color-adjust-none',
+  base: "flex h-full w-full items-center font-medium justify-center rounded-full forced-color-adjust-none",
   variants: {
     selectionState: {
-      none: 'group-hover:bg-gray-100 group-pressed:bg-gray-200 dark:group-hover:bg-zinc-700 dark:group-pressed:bg-zinc-600 forced-colors:group-pressed:bg-[Highlight]',
+      none: "group-hover:bg-secondary-fg/15 group-pressed:bg-secondary-fg/20 forced-colors:group-pressed:bg-[Highlight]",
       middle: [
-        'group-hover:bg-primary-200 dark:group-hover:bg-primary-900 forced-colors:group-hover:bg-[Highlight]',
-        'group-invalid:group-hover:bg-red-200 dark:group-invalid:group-hover:bg-red-900 forced-colors:group-invalid:group-hover:bg-[Mark]',
-        'group-pressed:bg-primary-300 dark:group-pressed:bg-primary-800 forced-colors:text-[HighlightText] forced-colors:group-pressed:bg-[Highlight]',
-        'group-invalid:group-pressed:bg-red-300 dark:group-invalid:group-pressed:bg-red-800 forced-colors:group-invalid:group-pressed:bg-[Mark]'
+        "group-hover:bg-primary/20 forced-colors:group-hover:bg-[Highlight]",
+        "group-invalid:group-hover:bg-red-200 dark:group-invalid:group-hover:bg-red-900 forced-colors:group-invalid:group-hover:bg-[Mark]",
+        "group-pressed:bg-primary-300 dark:group-pressed:bg-primary-800 forced-colors:text-[HighlightText] forced-colors:group-pressed:bg-[Highlight]",
+        "group-invalid:group-pressed:bg-red-300 dark:group-invalid:group-pressed:bg-red-800 forced-colors:group-invalid:group-pressed:bg-[Mark]"
       ],
-      cap: 'bg-primary text-primary-fg group-invalid:bg-danger group-invalid:text-danger-fg forced-colors:bg-[Highlight] forced-colors:text-[HighlightText] forced-colors:group-invalid:bg-[Mark]'
+      cap: "bg-primary text-primary-fg group-invalid:bg-danger group-invalid:text-danger-fg forced-colors:bg-[Highlight] forced-colors:text-[HighlightText] forced-colors:group-invalid:bg-[Mark]"
     },
     isDisabled: {
-      true: 'text-gray-300 dark:text-zinc-600 forced-colors:text-[GrayText]'
+      true: "text-muted-fg/70 forced-colors:text-[GrayText]"
     }
   }
 })
 
 interface RangeCalendarProps<T extends DateValue>
-  extends Omit<RangeCalendarPrimitiveProps<T>, 'visibleDuration'> {
+  extends Omit<RangeCalendarPrimitiveProps<T>, "visibleDuration"> {
   errorMessage?: string
 }
 
@@ -49,7 +49,7 @@ const RangeCalendar = <T extends DateValue>({
 }: RangeCalendarProps<T>) => {
   return (
     <RangeCalendarPrimitive
-      className={ctr(className, 'max-w-[17.5rem] sm:max-w-[15.8rem]')}
+      className={ctr(className, "max-w-[17.5rem] sm:max-w-[15.8rem]")}
       {...props}
     >
       <Calendar.Header />
@@ -60,10 +60,10 @@ const RangeCalendar = <T extends DateValue>({
             <CalendarCell
               date={date}
               className={twJoin([
-                'group size-10 lg:size-9 cursor-default lg:text-sm outline outline-0 outside-month:text-zinc-300 selection-start:rounded-s-md selection-end:rounded-e-md forced-colors:selected:bg-[Highlight] forced-colors:invalid:selected:bg-[Mark]',
-                'selected:bg-primary/10 dark:selected:bg-primary/20 selected:text-primary forced-colors:selected:text-[HighlightText]',
-                '[td:first-child_&]:rounded-s-md [td:last-child_&]:rounded-e-md',
-                'invalid:selected:bg-red-100 dark:invalid:selected:bg-red-700/30'
+                "group size-10 lg:size-9 cursor-default lg:text-sm outline outline-0 outside-month:text-zinc-300 selection-start:rounded-s-full selection-end:rounded-e-full forced-colors:selected:bg-[Highlight] forced-colors:invalid:selected:bg-[Mark]",
+                "selected:bg-primary/10 dark:selected:bg-primary/15 selected:text-primary forced-colors:selected:text-[HighlightText]",
+                "[td:first-child_&]:rounded-s-full [td:last-child_&]:rounded-e-full",
+                "invalid:selected:bg-red-100 dark:invalid:selected:bg-red-700/30"
               ])}
             >
               {({
@@ -78,10 +78,10 @@ const RangeCalendar = <T extends DateValue>({
                     ...renderProps,
                     selectionState:
                       isSelected && (isSelectionStart || isSelectionEnd)
-                        ? 'cap'
+                        ? "cap"
                         : isSelected
-                          ? 'middle'
-                          : 'none'
+                          ? "middle"
+                          : "none"
                   })}
                 >
                   {formattedDate}
diff --git a/components/ui/search-field.tsx b/components/ui/search-field.tsx
index b95d7492..e9853cd2 100644
--- a/components/ui/search-field.tsx
+++ b/components/ui/search-field.tsx
@@ -1,25 +1,25 @@
-'use client'
+"use client"
 
-import { IconSearch, IconX } from 'justd-icons'
+import { IconSearch, IconX } from "justd-icons"
 import {
   SearchField as SearchFieldPrimitive,
   type SearchFieldProps as SearchFieldPrimitiveProps,
   type ValidationResult
-} from 'react-aria-components'
-import { tv } from 'tailwind-variants'
+} from "react-aria-components"
+import { tv } from "tailwind-variants"
 
-import { Button } from './button'
-import { Description, FieldError, FieldGroup, Input, Label } from './field'
-import { ctr } from './primitive'
+import { Button } from "./button"
+import { Description, FieldError, FieldGroup, Input, Label } from "./field"
+import { ctr } from "./primitive"
 
 const searchFieldStyles = tv({
   slots: {
-    base: 'group flex min-w-10 flex-col gap-1',
+    base: "group flex min-w-10 flex-col gap-1",
     searchIcon:
-      'ml-2 size-4 shrink-0 text-muted-fg group-disabled:text-muted-fg/50 forced-colors:text-[ButtonText] forced-colors:group-disabled:text-[GrayText]',
+      "ml-2 size-4 shrink-0 text-muted-fg group-disabled:text-muted-fg/50 forced-colors:text-[ButtonText] forced-colors:group-disabled:text-[GrayText]",
     closeButton:
-      'mr-1 size-8 text-muted-fg group-empty:invisible hover:bg-transparent pressed:text-fg',
-    input: '[&::-webkit-search-cancel-button]:hidden'
+      "mr-1 size-8 text-muted-fg group-empty:invisible hover:bg-transparent pressed:text-fg",
+    input: "[&::-webkit-search-cancel-button]:hidden"
   }
 })
 
@@ -34,7 +34,7 @@ interface SearchFieldProps extends SearchFieldPrimitiveProps {
 
 const SearchField = ({
   className,
-  placeholder = 'Search',
+  placeholder = "Search",
   label,
   description,
   errorMessage,
diff --git a/components/ui/select.tsx b/components/ui/select.tsx
index 82ec9a63..d13a7afb 100644
--- a/components/ui/select.tsx
+++ b/components/ui/select.tsx
@@ -1,35 +1,35 @@
-'use client'
+"use client"
 
-import * as React from 'react'
+import * as React from "react"
 
-import type { Placement } from '@react-types/overlays'
-import { IconChevronLgDown } from 'justd-icons'
-import type { ButtonProps } from 'react-aria-components'
+import type { Placement } from "@react-types/overlays"
+import { IconChevronLgDown } from "justd-icons"
+import type { ButtonProps } from "react-aria-components"
 import {
   Button,
   Select as SelectPrimitive,
   type SelectProps as SelectPrimitiveProps,
   SelectValue,
   type ValidationResult
-} from 'react-aria-components'
-import { tv } from 'tailwind-variants'
+} from "react-aria-components"
+import { tv } from "tailwind-variants"
 
-import { DropdownItem, DropdownItemDetails, DropdownSection } from './dropdown'
-import { Description, FieldError, Label } from './field'
-import { ListBox } from './list-box'
-import { Popover } from './popover'
-import { cr, ctr, focusStyles } from './primitive'
+import { DropdownItem, DropdownItemDetails, DropdownSection } from "./dropdown"
+import { Description, FieldError, Label } from "./field"
+import { ListBox } from "./list-box"
+import { Popover } from "./popover"
+import { cr, ctr, focusStyles } from "./primitive"
 
 const selectTriggerStyles = tv({
   extend: focusStyles,
   base: [
-    'btr group-disabled:bg-secondary [&_[data-slot=icon]]:size-4 group-disabled:opacity-50 focus-visible:border-primary focus-visible:ring-4 focus-visible:ring-primary/20 group-open:border-primary group-open:ring-4 group-open:ring-primary/20 flex h-10 w-full cursor-default items-center gap-4 rounded-lg border border-input bg-background py-2 pl-3 pr-2 text-start shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1)] transition dark:shadow-none'
+    "btr group-disabled:bg-secondary [&_[data-slot=icon]]:size-4 group-disabled:opacity-50 focus-visible:border-primary focus-visible:ring-4 focus-visible:ring-primary/20 group-open:border-primary group-open:ring-4 group-open:ring-primary/20 flex h-10 w-full cursor-default items-center gap-4 rounded-lg border border-input bg-background py-2 pl-3 pr-2 text-start shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1)] transition dark:shadow-none"
   ],
   variants: {
     isDisabled: {
       false:
-        'text-fg group-invalid:border-danger group-invalid:ring-danger/20 forced-colors:group-invalid:border-[Mark]',
-      true: 'bg-secondary text-muted-fg forced-colors:border-[GrayText] forced-colors:text-[GrayText]'
+        "text-fg group-invalid:border-danger group-invalid:ring-danger/20 forced-colors:group-invalid:border-[Mark]",
+      true: "bg-secondary text-muted-fg forced-colors:border-[GrayText] forced-colors:text-[GrayText]"
     }
   }
 })
@@ -51,7 +51,7 @@ const Select = <T extends object>({
   ...props
 }: SelectProps<T>) => {
   return (
-    <SelectPrimitive {...props} className={ctr(className, 'group flex w-full flex-col gap-1')}>
+    <SelectPrimitive {...props} className={ctr(className, "group flex w-full flex-col gap-1")}>
       {label && <Label>{label}</Label>}
       <>{children}</>
       {description && <Description>{description}</Description>}
diff --git a/components/ui/separator.tsx b/components/ui/separator.tsx
index 23df3f2f..40b915e7 100644
--- a/components/ui/separator.tsx
+++ b/components/ui/separator.tsx
@@ -1,20 +1,20 @@
-'use client'
+"use client"
 
-import * as React from 'react'
+import * as React from "react"
 
-import { Separator as SeparatorPrimitive, type SeparatorProps } from 'react-aria-components'
-import { tv } from 'tailwind-variants'
+import { Separator as SeparatorPrimitive, type SeparatorProps } from "react-aria-components"
+import { tv } from "tailwind-variants"
 
 const separatorStyles = tv({
-  base: 'bg-muted shrink-0 forced-colors:bg-[ButtonBorder]',
+  base: "bg-muted-fg/40 shrink-0 forced-colors:bg-[ButtonBorder]",
   variants: {
     orientation: {
-      horizontal: 'h-px w-full',
-      vertical: 'w-px'
+      horizontal: "h-px w-full",
+      vertical: "w-px"
     }
   },
   defaultVariants: {
-    orientation: 'horizontal'
+    orientation: "horizontal"
   }
 })
 
diff --git a/components/ui/sheet.tsx b/components/ui/sheet.tsx
index c3c5b0ff..b79e8332 100644
--- a/components/ui/sheet.tsx
+++ b/components/ui/sheet.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import * as React from 'react'
+import * as React from "react"
 
-import type { DialogTriggerProps, Modal } from 'react-aria-components'
+import type { DialogTriggerProps, Modal } from "react-aria-components"
 import {
   Button,
   type DialogProps,
@@ -10,89 +10,89 @@ import {
   Modal as ModalPrimitive,
   ModalOverlay,
   type ModalOverlayProps as ModalOverlayPrimitiveProps
-} from 'react-aria-components'
-import { tv, type VariantProps } from 'tailwind-variants'
+} from "react-aria-components"
+import { tv, type VariantProps } from "tailwind-variants"
 
-import { Dialog } from './dialog'
-import { cr } from './primitive'
+import { Dialog } from "./dialog"
+import { cr } from "./primitive"
 
 const sheetOverlayStyles = tv({
   base: [
-    'fixed top-0 left-0 w-full h-[--visual-viewport-height] isolate z-50 flex items-center justify-center p-4'
+    "fixed top-0 left-0 w-full h-[--visual-viewport-height] isolate z-50 flex items-center justify-center p-4"
   ],
   variants: {
     isBlurred: {
-      true: 'backdrop-blur',
-      false: 'bg-black/25 dark:bg-black/60'
+      true: "backdrop-blur",
+      false: "bg-black/15 dark:bg-black/40"
     },
     isEntering: {
-      true: 'animate-in fade-in duration-200 ease-out'
+      true: "animate-in fade-in duration-200 ease-out"
     },
     isExiting: {
-      true: 'animate-out fade-out duration-200 ease-in'
+      true: "animate-out fade-out duration-200 ease-in"
     }
   }
 })
 
-type Sides = 'top' | 'bottom' | 'left' | 'right'
+type Sides = "top" | "bottom" | "left" | "right"
 const generateCompoundVariants = (sides: Array<Sides>) => {
   return sides.map((side) => ({
     side,
     isStack: true,
     className:
-      side === 'top'
-        ? 'top-2 inset-x-2 rounded-lg border'
-        : side === 'bottom'
-          ? 'bottom-2 inset-x-2 rounded-lg border'
-          : side === 'left'
-            ? 'left-2 inset-y-2 rounded-lg border'
-            : 'right-2 inset-y-2 rounded-lg border'
+      side === "top"
+        ? "top-2 inset-x-2 rounded-lg border"
+        : side === "bottom"
+          ? "bottom-2 inset-x-2 rounded-lg border"
+          : side === "left"
+            ? "left-2 inset-y-2 rounded-lg border"
+            : "right-2 inset-y-2 rounded-lg border"
   }))
 }
 
 const sheetContentStyles = tv({
-  base: 'fixed z-50 grid gap-4 bg-overlay text-overlay-fg shadow-lg transition ease-in-out',
+  base: "fixed z-50 grid gap-4 bg-overlay text-overlay-fg shadow-lg transition ease-in-out",
   variants: {
     isEntering: {
-      true: 'duration-300 animate-in '
+      true: "duration-300 animate-in "
     },
     isExiting: {
-      true: 'duration-200 animate-out'
+      true: "duration-200 animate-out"
     },
     side: {
-      top: 'inset-x-0 top-0 rounded-b-2xl border-b entering:slide-in-from-top exiting:slide-out-to-top',
+      top: "inset-x-0 top-0 rounded-b-2xl border-b entering:slide-in-from-top exiting:slide-out-to-top",
       bottom:
-        'inset-x-0 bottom-0 rounded-t-2xl border-t entering:slide-in-from-bottom exiting:slide-out-to-bottom',
-      left: 'inset-y-0 left-0 h-auto w-[19rem] sm:w-3/4 overflow-y-auto border-r entering:slide-in-from-left exiting:slide-out-to-left sm:max-w-xs',
+        "inset-x-0 bottom-0 rounded-t-2xl border-t entering:slide-in-from-bottom exiting:slide-out-to-bottom",
+      left: "inset-y-0 left-0 h-auto w-[19rem] sm:w-3/4 overflow-y-auto border-r entering:slide-in-from-left exiting:slide-out-to-left sm:max-w-xs",
       right:
-        'inset-y-0 right-0 h-auto w-[19rem] sm:w-3/4 overflow-y-auto border-l entering:slide-in-from-right exiting:slide-out-to-right sm:max-w-xs'
+        "inset-y-0 right-0 h-auto w-[19rem] sm:w-3/4 overflow-y-auto border-l entering:slide-in-from-right exiting:slide-out-to-right sm:max-w-xs"
     },
     isStack: {
-      true: '',
-      false: ''
+      true: "",
+      false: ""
     }
   },
-  compoundVariants: generateCompoundVariants(['top', 'bottom', 'left', 'right'])
+  compoundVariants: generateCompoundVariants(["top", "bottom", "left", "right"])
 })
 
-const Sheet = ({ children }: DialogTriggerProps) => {
-  return <DialogTriggerPrimitive>{children}</DialogTriggerPrimitive>
+const Sheet = ({ children, ...props }: DialogTriggerProps) => {
+  return <DialogTriggerPrimitive {...props}>{children}</DialogTriggerPrimitive>
 }
 
 interface SheetContentProps
-  extends Omit<React.ComponentProps<typeof Modal>, 'children' | 'className'>,
-    Omit<ModalOverlayPrimitiveProps, 'className'>,
+  extends Omit<React.ComponentProps<typeof Modal>, "children" | "className">,
+    Omit<ModalOverlayPrimitiveProps, "className">,
     VariantProps<typeof sheetOverlayStyles> {
-  'aria-label'?: DialogProps['aria-label']
-  'aria-labelledby'?: DialogProps['aria-labelledby']
-  role?: DialogProps['role']
+  "aria-label"?: DialogProps["aria-label"]
+  "aria-labelledby"?: DialogProps["aria-labelledby"]
+  role?: DialogProps["role"]
   closeButton?: boolean
   isBlurred?: boolean
   isStack?: boolean
   side?: Sides
   classNames?: {
-    overlay?: ModalOverlayPrimitiveProps['className']
-    content?: ModalOverlayPrimitiveProps['className']
+    overlay?: ModalOverlayPrimitiveProps["className"]
+    content?: ModalOverlayPrimitiveProps["className"]
   }
 }
 
@@ -100,13 +100,13 @@ const SheetContent = ({
   classNames,
   isBlurred = false,
   isDismissable = true,
-  side = 'right',
-  role = 'dialog',
+  side = "right",
+  role = "dialog",
   closeButton = true,
   isStack = true,
   ...props
 }: SheetContentProps) => {
-  const _isDismissable = role === 'alertdialog' ? false : isDismissable
+  const _isDismissable = role === "alertdialog" ? false : isDismissable
   return (
     <ModalOverlay
       isDismissable={_isDismissable}
diff --git a/components/ui/show-more.tsx b/components/ui/show-more.tsx
index 7b62ae8d..ae369fdf 100644
--- a/components/ui/show-more.tsx
+++ b/components/ui/show-more.tsx
@@ -1,54 +1,54 @@
-'use client'
+"use client"
 
-import { Text, ToggleButton } from 'react-aria-components'
-import { tv } from 'tailwind-variants'
+import { Text, ToggleButton } from "react-aria-components"
+import { tv } from "tailwind-variants"
 
-import { buttonStyles } from './button'
+import { buttonStyles } from "./button"
 
 const showMoreStyles = tv({
-  base: 'text-sm leading-6 after:border-muted before:border-muted',
+  base: "text-sm leading-6 after:border-muted before:border-muted",
   variants: {
     orientation: {
-      vertical: 'mx-1 h-auto self-stretch',
-      horizontal: 'my-0.5 h-px w-full self-stretch'
+      vertical: "mx-1 h-auto self-stretch",
+      horizontal: "my-0.5 h-px w-full self-stretch"
     }
   },
   compoundVariants: [
     {
-      orientation: 'vertical',
+      orientation: "vertical",
       className:
-        'mx-2 flex flex-col items-center before:border-l before:flex-1 before:mb-2 after:border-r after:flex-1 after:mt-2'
+        "mx-2 flex flex-col items-center before:border-l before:flex-1 before:mb-2 after:border-r after:flex-1 after:mt-2"
     },
     {
-      orientation: 'horizontal',
+      orientation: "horizontal",
       className:
-        'self-stretch my-2 flex items-center before:border-t before:flex-1 before:mr-2 after:border-t after:flex-1 after:ml-2'
+        "self-stretch my-2 flex items-center before:border-t before:flex-1 before:mr-2 after:border-t after:flex-1 after:ml-2"
     }
   ],
   defaultVariants: {
-    orientation: 'horizontal'
+    orientation: "horizontal"
   }
 })
 
 interface ShowMoreProps extends React.ComponentProps<typeof ToggleButton> {
   className?: string
-  orientation?: 'horizontal' | 'vertical'
-  as?: 'text' | 'button'
+  orientation?: "horizontal" | "vertical"
+  as?: "text" | "button"
   text?: string
 }
 
 const ShowMore = ({
-  as = 'button',
-  orientation = 'horizontal',
+  as = "button",
+  orientation = "horizontal",
   className,
   ...props
 }: ShowMoreProps) => {
   return (
     <div className={showMoreStyles({ orientation, className })}>
-      {as === 'button' ? (
+      {as === "button" ? (
         <ToggleButton
           {...props}
-          className={buttonStyles({ shape: 'circle', appearance: 'outline', size: 'small' })}
+          className={buttonStyles({ shape: "circle", appearance: "outline", size: "small" })}
         />
       ) : (
         <Text slot="description">{props.text}</Text>
diff --git a/components/ui/skeleton.tsx b/components/ui/skeleton.tsx
index b4ad6048..8ac77ee1 100644
--- a/components/ui/skeleton.tsx
+++ b/components/ui/skeleton.tsx
@@ -1,28 +1,28 @@
-import React from 'react'
+import React from "react"
 
-import { tv } from 'tailwind-variants'
+import { tv } from "tailwind-variants"
 
 const skeletonStyles = tv({
-  base: 'animate-pulse shrink-0',
+  base: "animate-pulse shrink-0",
   variants: {
     intent: {
-      muted: 'bg-fg/20',
-      lighter: 'bg-fg/15'
+      muted: "bg-fg/20",
+      lighter: "bg-fg/15"
     },
     shape: {
-      circle: 'rounded-full',
-      square: 'rounded-lg'
+      circle: "rounded-full",
+      square: "rounded-lg"
     }
   },
   defaultVariants: {
-    intent: 'muted',
-    shape: 'square'
+    intent: "muted",
+    shape: "square"
   }
 })
 
 interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
-  intent?: 'muted' | 'lighter'
-  shape?: 'circle' | 'square'
+  intent?: "muted" | "lighter"
+  shape?: "circle" | "square"
 }
 const Skeleton = ({ shape, intent, className, ...props }: SkeletonProps) => {
   return <div className={skeletonStyles({ shape, intent, className })} {...props} />
diff --git a/components/ui/slider.tsx b/components/ui/slider.tsx
index ef58a92a..486637e4 100644
--- a/components/ui/slider.tsx
+++ b/components/ui/slider.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import * as React from 'react'
+import * as React from "react"
 
-import { useSlotId } from '@react-aria/utils'
+import { useSlotId } from "@react-aria/utils"
 import type {
   LabelProps,
   SliderOutputProps,
@@ -10,7 +10,7 @@ import type {
   SliderThumbProps,
   SliderTrackProps,
   TextProps
-} from 'react-aria-components'
+} from "react-aria-components"
 import {
   Slider as SliderPrimitive,
   SliderOutput,
@@ -18,32 +18,32 @@ import {
   SliderThumb,
   SliderTrack,
   TextContext
-} from 'react-aria-components'
-import { tv, type VariantProps } from 'tailwind-variants'
+} from "react-aria-components"
+import { tv, type VariantProps } from "tailwind-variants"
 
-import { Description, Label } from './field'
-import { cr } from './primitive'
+import { Description, Label } from "./field"
+import { cr } from "./primitive"
 
 const sliderStyles = tv({
   slots: {
-    root: 'flex disabled:opacity-50 flex-col gap-2 orientation-horizontal:w-full orientation-vertical:h-56 orientation-vertical:items-center',
+    root: "flex disabled:opacity-50 flex-col gap-2 orientation-horizontal:w-full orientation-vertical:h-56 orientation-vertical:items-center",
     track: [
-      'relative group/track rounded-full bg-zinc-200 dark:bg-zinc-800 cursor-pointer disabled:cursor-default disabled:bg-bg-disabled',
-      'grow orientation-vertical:flex-1 orientation-vertical:w-1.5 orientation-horizontal:w-full orientation-horizontal:h-1.5'
+      "relative group/track rounded-full bg-zinc-200 dark:bg-zinc-800 cursor-pointer disabled:cursor-default disabled:bg-bg-disabled",
+      "grow orientation-vertical:flex-1 orientation-vertical:w-1.5 orientation-horizontal:w-full orientation-horizontal:h-1.5"
     ],
     filler: [
-      'rounded-full bg-primary group-disabled/track:bg-bg-disabled',
-      'pointer-events-none absolute group-orientation-horizontal/top-0 group-orientation-vertical/track:w-full group-orientation-vertical/track:bottom-0 group-orientation-horizontal/track:h-full'
+      "rounded-full bg-primary group-disabled/track:bg-bg-disabled",
+      "pointer-events-none absolute group-orientation-horizontal/top-0 group-orientation-vertical/track:w-full group-orientation-vertical/track:bottom-0 group-orientation-horizontal/track:h-full"
     ],
     thumb: [
-      'outline-none dragging:cursor-grabbing focus:ring-4 border border-zinc-200 focus:ring-primary/20 focus:border-primary focus:outline-none forced-colors:outline-[Highlight]',
-      'rounded-full bg-white transition-[width,height]',
-      'absolute left-[50%] top-[50%] block !-translate-x-1/2 !-translate-y-1/2',
-      'disabled:bg-bg-disabled disabled:border disabled:border-bg',
-      'orientation-vertical:w-2 orientation-horizontal:h-2',
-      'size-[1.15rem] dragging:size-[1.30rem] dragging:border-primary'
+      "outline-none dragging:cursor-grabbing focus:ring-4 border border-zinc-200 focus:ring-primary/20 focus:border-primary focus:outline-none forced-colors:outline-[Highlight]",
+      "rounded-full bg-white transition-[width,height]",
+      "absolute left-[50%] top-[50%] block !-translate-x-1/2 !-translate-y-1/2",
+      "disabled:bg-bg-disabled disabled:border disabled:border-bg",
+      "orientation-vertical:w-2 orientation-horizontal:h-2",
+      "size-[1.15rem] dragging:size-[1.30rem] dragging:border-primary"
     ],
-    valueLabel: 'text-muted-fg text-sm'
+    valueLabel: "text-muted-fg text-sm"
   }
 })
 
@@ -66,8 +66,8 @@ const Root = (props: SliderPrimitiveProps) => {
 }
 
 interface SliderProps extends SliderRootProps, VariantProps<typeof sliderStyles> {
-  label?: LabelProps['children']
-  description?: TextProps['children']
+  label?: LabelProps["children"]
+  description?: TextProps["children"]
   showValue?: boolean | ((value: number[]) => string)
 }
 
@@ -75,9 +75,9 @@ const Slider = ({ label, description, showValue = true, ...props }: SliderProps)
   <Root {...props}>
     <div className="flex items-center justify-between gap-2">
       {label && <Label>{label}</Label>}
-      {(showValue || typeof showValue === 'function') && (
+      {(showValue || typeof showValue === "function") && (
         <Output>
-          {({ state }) => (typeof showValue === 'function' ? showValue(state.values) : undefined)}
+          {({ state }) => (typeof showValue === "function" ? showValue(state.values) : undefined)}
         </Output>
       )}
     </div>
@@ -111,10 +111,10 @@ const Filler = (props: React.HTMLAttributes<HTMLDivElement>) => {
       {...props}
       style={
         values.length === 1
-          ? orientation === 'horizontal'
+          ? orientation === "horizontal"
             ? { width: `${getThumbPercent(0) * 100}%` }
             : { height: `${getThumbPercent(0) * 100}%` }
-          : orientation === 'horizontal'
+          : orientation === "horizontal"
             ? {
                 left: `${getThumbPercent(0) * 100}%`,
                 width: `${Math.abs(getThumbPercent(0) - getThumbPercent(1)) * 100}%`
@@ -139,7 +139,7 @@ const Output = ({ className, ...props }: SliderOutputProps) => {
       {cr(
         props.children,
         (children, { state }) =>
-          children ?? state.values.map((_, i) => state.getThumbValueLabel(i)).join(' - ')
+          children ?? state.values.map((_, i) => state.getThumbValueLabel(i)).join(" - ")
       )}
     </SliderOutput>
   )
diff --git a/components/ui/snippet.tsx b/components/ui/snippet.tsx
index d37f0b31..b4570191 100644
--- a/components/ui/snippet.tsx
+++ b/components/ui/snippet.tsx
@@ -1,14 +1,14 @@
-'use client'
+"use client"
 
-import * as React from 'react'
+import * as React from "react"
 
-import { AnimatePresence, motion } from 'framer-motion'
-import { IconCheck, IconDuplicate } from 'justd-icons'
-import { toast } from 'sonner'
-import { twMerge } from 'tailwind-merge'
+import { AnimatePresence, motion } from "framer-motion"
+import { IconCheck, IconDuplicate } from "justd-icons"
+import { toast } from "sonner"
+import { twMerge } from "tailwind-merge"
 
-import { Button, type ButtonProps } from './button'
-import { cn } from './primitive'
+import { Button, type ButtonProps } from "./button"
+import { cn } from "./primitive"
 
 const snippetVariants = {
   hidden: { opacity: 0, scale: 0.5 },
@@ -29,10 +29,10 @@ const Snippet: React.FC<SnippetProps> = ({ className, text, ...props }) => {
         setCopied(true)
         setTimeout(() => setCopied(false), 2000) // Reset the copied state after 2 seconds
       } catch (error) {
-        toast.error('Failed to copy to clipboard')
+        toast.error("Failed to copy to clipboard")
       }
     } else {
-      toast.error('Failed to copy to clipboard')
+      toast.error("Failed to copy to clipboard")
     }
   }
 
@@ -40,7 +40,7 @@ const Snippet: React.FC<SnippetProps> = ({ className, text, ...props }) => {
     <div
       {...props}
       className={twMerge(
-        'relative flex items-center justify-between rounded-lg border bg-[#0e0e10] text-white py-2.5 pl-3 pr-2.5 font-mono text-sm [&>svg:hover]:text-white [&>svg]:text-muted-fg [&>svg]:transition [&_svg]:shrink-0',
+        "relative flex items-center justify-between rounded-lg border bg-[#0e0e10] text-white py-2.5 pl-3 pr-2.5 font-mono text-sm [&>svg:hover]:text-white [&>svg]:text-muted-fg [&>svg]:transition [&_svg]:shrink-0",
         className
       )}
     >
@@ -91,7 +91,7 @@ interface CopyButtonProps extends ButtonProps {
 const CopyButton = ({
   initialIcon,
   copiedIcon,
-  ariaLabel = 'Copy',
+  ariaLabel = "Copy",
   isCopied,
   className,
   ...props
@@ -99,7 +99,7 @@ const CopyButton = ({
   return (
     <Button
       className={cn(
-        'size-7 backdrop-blur-lg rounded-md text-white bg-zinc-800 border hover:bg-zinc-700 border-zinc-700',
+        "size-7 backdrop-blur-lg rounded-md text-white bg-zinc-800 border hover:bg-zinc-700 border-zinc-700",
         className
       )}
       aria-label={ariaLabel}
diff --git a/components/ui/switch.tsx b/components/ui/switch.tsx
index 3ae0dba3..c5ebc1e3 100644
--- a/components/ui/switch.tsx
+++ b/components/ui/switch.tsx
@@ -1,36 +1,36 @@
-'use client'
+"use client"
 
 import {
   Switch as SwitchPrimitive,
   type SwitchProps as SwitchPrimitiveProps
-} from 'react-aria-components'
-import { tv, type VariantProps } from 'tailwind-variants'
-
-import { focusRing } from './primitive'
+} from "react-aria-components"
+import { tv, type VariantProps } from "tailwind-variants"
 
 const trackStyles = tv({
-  extend: focusRing,
-  base: 'mr-2 h-5 w-8 cursor-pointer rounded-full border-2 border-transparent bg-muted-fg/50 transition duration-200',
+  base: [
+    "mr-2 h-5 w-8 bg-muted-fg/40 cursor-pointer rounded-full border-2 border-transparent transition duration-200",
+    "group-focus:ring-4",
+    "group-focus:ring-4 group-invalid:ring-danger/20",
+    "group-disabled:cursor-default group-disabled:opacity-50"
+  ],
   variants: {
-    isDisabled: { true: 'opacity-50 cursor-default' },
     intent: {
-      primary: 'group-selected:bg-primary',
-      secondary: 'group-selected:bg-muted-fg',
-      success: 'group-selected:bg-success',
-      danger: 'group-selected:bg-danger',
-      warning: 'group-selected:bg-warning',
-      info: 'group-selected:bg-info'
+      primary: "group-selected:bg-primary group-focus:ring-primary/20",
+      secondary: "group-selected:bg-muted-fg group-focus:ring-muted-fg/20",
+      success: "group-selected:bg-success group-focus:ring-success/20",
+      danger: "group-selected:bg-danger group-focus:ring-danger/20",
+      warning: "group-selected:bg-warning group-focus:ring-warning/20"
     }
   },
   defaultVariants: {
-    intent: 'primary'
+    intent: "primary"
   }
 })
 
 const switchStyles = tv({
   slots: {
-    base: 'group inline-flex touch-none lg:text-sm items-center',
-    ball: 'forced-colors:disabled:outline-[GrayText] group-selected:ml-3 group-selected:group-data-[pressed]:ml-2 group-pressed:w-5 block size-4 origin-right rounded-full bg-white shadow transition-all duration-200'
+    base: "group inline-flex touch-none lg:text-sm items-center",
+    ball: "forced-colors:disabled:outline-[GrayText] group-selected:ml-3 group-selected:group-data-[pressed]:ml-2 group-pressed:w-5 block size-4 origin-right rounded-full bg-primary-fg shadow transition-all duration-200"
   }
 })
 
@@ -43,23 +43,16 @@ const Switch = ({ children, intent, className, ...props }: SwitchProps) => {
     <SwitchPrimitive
       {...props}
       className={(values) =>
-        base({ className: typeof className === 'function' ? className(values) : className })
+        base({ className: typeof className === "function" ? className(values) : className })
       }
-      style={{ WebkitTapHighlightColor: 'transparent' }}
+      style={{ WebkitTapHighlightColor: "transparent" }}
     >
       {(values) => (
         <>
-          <span
-            className={trackStyles({
-              isFocused: props.isFocused,
-              isInvalid: props.isInvalid,
-              isDisabled: props.isDisabled,
-              intent
-            })}
-          >
+          <span className={trackStyles({ intent })}>
             <span className={ball()} />
           </span>
-          {typeof children === 'function' ? children(values) : children}
+          {typeof children === "function" ? children(values) : children}
         </>
       )}
     </SwitchPrimitive>
diff --git a/components/ui/table.tsx b/components/ui/table.tsx
index 8c1335fa..1ed38dc3 100644
--- a/components/ui/table.tsx
+++ b/components/ui/table.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { IconChevronDown, IconChevronUp, IconHamburger } from 'justd-icons'
+import { IconChevronDown, IconChevronUp, IconHamburger } from "justd-icons"
 import type {
   CellProps as CellPrimitiveProps,
   ColumnProps as ColumnPrimitiveProps,
@@ -8,7 +8,7 @@ import type {
   TableBodyProps,
   TableHeaderProps as TableHeaderPrimitiveProps,
   TableProps as TablePrimitiveProps
-} from 'react-aria-components'
+} from "react-aria-components"
 import {
   Button,
   Cell as CellPrimitive,
@@ -19,20 +19,20 @@ import {
   TableBody as TableBodyPrimitive,
   TableHeader,
   useTableOptions
-} from 'react-aria-components'
-import { tv } from 'tailwind-variants'
+} from "react-aria-components"
+import { tv } from "tailwind-variants"
 
-import { Checkbox } from './checkbox'
-import { cn } from './primitive'
+import { Checkbox } from "./checkbox"
+import { cn } from "./primitive"
 
 const table = tv({
   slots: {
-    root: 'table w-full caption-bottom border-spacing-0 text-sm outline-none',
+    root: "table w-full caption-bottom border-spacing-0 text-sm outline-none",
     column:
-      'whitespace-nowrap allows-sorting:cursor-pointer px-3 py-3 text-left dragging:cursor-grabbing font-medium outline-none [&:has([slot=selection])]:pr-0',
-    header: 'border-b x32',
-    row: 'tr group relative cursor-default border-b text-fg/70 outline-none ring-primary focus-visible:ring-1 selected:bg-primary/15',
-    cell: 'whitespace-nowrap px-3 py-3 outline-none'
+      "whitespace-nowrap allows-sorting:cursor-pointer px-3 py-3 text-left dragging:cursor-grabbing font-medium outline-none [&:has([slot=selection])]:pr-0",
+    header: "border-b x32",
+    row: "tr group relative cursor-default border-b text-fg/70 outline-none ring-primary focus-visible:ring-1 selected:bg-primary/15",
+    cell: "whitespace-nowrap px-3 py-3 outline-none"
   }
 })
 
@@ -51,7 +51,7 @@ const Table = ({ children, className, ...props }: TableProps) => (
 )
 
 const Body = <T extends object>(props: TableBodyProps<T>) => (
-  <TableBodyPrimitive {...props} className={cn('[&_.tr:last-child]:border-0')} />
+  <TableBodyPrimitive {...props} className={cn("[&_.tr:last-child]:border-0")} />
 )
 
 interface CellProps extends CellPrimitiveProps {
@@ -77,7 +77,7 @@ const Column = ({ children, className, ...props }: ColumnProps) => (
           {allowsSorting &&
             (sortDirection === undefined ? (
               <span>daf</span>
-            ) : sortDirection === 'ascending' ? (
+            ) : sortDirection === "ascending" ? (
               <IconChevronUp />
             ) : (
               <IconChevronDown />
@@ -97,9 +97,9 @@ const Header = <T extends object>({ children, className, columns, ...props }: He
   return (
     <TableHeader {...props} className={header({ className })}>
       {allowsDragging && <Column />}
-      {selectionBehavior === 'toggle' && (
+      {selectionBehavior === "toggle" && (
         <Column className="pl-4">
-          {selectionMode === 'multiple' && <Checkbox slot="selection" />}
+          {selectionMode === "multiple" && <Checkbox slot="selection" />}
         </Column>
       )}
       <Collection items={columns}>{children}</Collection>
@@ -118,7 +118,7 @@ const Row = <T extends object>({ children, className, columns, id, ...props }: R
       id={id}
       {...props}
       className={row({
-        className: 'href' in props ? cn('cursor-pointer hover:bg-secondary/50', className) : ''
+        className: "href" in props ? cn("cursor-pointer hover:bg-secondary/50", className) : ""
       })}
     >
       {allowsDragging && (
@@ -131,7 +131,7 @@ const Row = <T extends object>({ children, className, columns, id, ...props }: R
           </Button>
         </Cell>
       )}
-      {selectionBehavior === 'toggle' && (
+      {selectionBehavior === "toggle" && (
         <Cell className="pl-4">
           <span
             aria-hidden
diff --git a/components/ui/tabs.tsx b/components/ui/tabs.tsx
index 06a71ab7..06598bdd 100644
--- a/components/ui/tabs.tsx
+++ b/components/ui/tabs.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import { useId } from 'react'
+import { useId } from "react"
 
-import { LayoutGroup, motion } from 'framer-motion'
+import { LayoutGroup, motion } from "framer-motion"
 import {
   Tab as TabPrimitive,
   TabList as TabListPrimitive,
@@ -12,18 +12,18 @@ import {
   type TabProps,
   Tabs as TabsPrimitive,
   type TabsProps
-} from 'react-aria-components'
-import { twJoin } from 'tailwind-merge'
-import { tv } from 'tailwind-variants'
+} from "react-aria-components"
+import { twJoin } from "tailwind-merge"
+import { tv } from "tailwind-variants"
 
-import { cn, cr } from './primitive'
+import { cn, cr } from "./primitive"
 
 const tabsStyles = tv({
-  base: 'group flex gap-4',
+  base: "group flex gap-4",
   variants: {
     orientation: {
-      horizontal: 'flex-col',
-      vertical: 'w-[800px] flex-row'
+      horizontal: "flex-col",
+      vertical: "w-[800px] flex-row"
     }
   }
 })
@@ -43,11 +43,11 @@ const Tabs = (props: TabsProps) => {
 }
 
 const tabListStyles = tv({
-  base: 'flex',
+  base: "flex",
   variants: {
     orientation: {
-      horizontal: 'flex-row gap-x-5 border-b',
-      vertical: 'flex-col items-start gap-y-4 border-l'
+      horizontal: "flex-row gap-x-5 border-b",
+      vertical: "flex-col items-start gap-y-4 border-l"
     }
   }
 })
@@ -68,20 +68,20 @@ const TabList = <T extends object>(props: TabListProps<T>) => {
 
 const tabStyles = tv({
   base: [
-    'relative flex whitespace-nowrap cursor-default items-center rounded-full text-sm font-medium outline-none transition forced-color-adjust-none hover:text-fg [&>[data-slot=icon]]:size-4 [&>[data-slot=icon]]:mr-2',
+    "relative flex whitespace-nowrap cursor-default items-center rounded-full text-sm font-medium outline-none transition forced-color-adjust-none hover:text-fg [&>[data-slot=icon]]:size-4 [&>[data-slot=icon]]:mr-2",
     // hor
-    'group-orientation-vertical:w-full group-orientation-vertical:py-0 group-orientation-vertical:pl-4 group-orientation-vertical:pr-2',
+    "group-orientation-vertical:w-full group-orientation-vertical:py-0 group-orientation-vertical:pl-4 group-orientation-vertical:pr-2",
     // ver
-    'group-orientation-horizontal:pb-3'
+    "group-orientation-horizontal:pb-3"
   ],
   variants: {
     isSelected: {
-      false: 'text-muted-fg',
-      true: 'text-fg forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]'
+      false: "text-muted-fg",
+      true: "text-fg forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]"
     },
-    isFocused: { false: 'ring-0', true: 'text-fg' },
+    isFocused: { false: "ring-0", true: "text-fg" },
     isDisabled: {
-      true: 'text-muted-fg/50 forced-colors:text-[GrayText] forced-colors:selected:bg-[GrayText] forced-colors:selected:text-[HighlightText]'
+      true: "text-muted-fg/50 forced-colors:text-[GrayText] forced-colors:selected:bg-[GrayText] forced-colors:selected:text-[HighlightText]"
     }
   }
 })
@@ -93,7 +93,7 @@ const Tab = ({ children, ...props }: TabProps) => {
       className={cr(props.className, (_className, renderProps) =>
         tabStyles({
           ...renderProps,
-          className: twJoin('href' in props && 'cursor-pointer', _className)
+          className: twJoin("href" in props && "cursor-pointer", _className)
         })
       )}
     >
@@ -103,14 +103,14 @@ const Tab = ({ children, ...props }: TabProps) => {
           {isSelected && (
             <motion.span
               className={cn(
-                'absolute rounded bg-fg',
+                "absolute rounded bg-fg",
                 // horizontal
-                'group-orientation-horizontal:inset-x-0 group-orientation-horizontal:-bottom-px group-orientation-horizontal:h-0.5 group-orientation-horizontal:w-full',
+                "group-orientation-horizontal:inset-x-0 group-orientation-horizontal:-bottom-px group-orientation-horizontal:h-0.5 group-orientation-horizontal:w-full",
                 // vertical
-                'group-orientation-vertical:left-0 group-orientation-vertical:h-[calc(100%-10%)] group-orientation-vertical:w-0.5 group-orientation-vertical:transform'
+                "group-orientation-vertical:left-0 group-orientation-vertical:h-[calc(100%-10%)] group-orientation-vertical:w-0.5 group-orientation-vertical:transform"
               )}
               layoutId="current-selected"
-              transition={{ type: 'spring', stiffness: 500, damping: 40 }}
+              transition={{ type: "spring", stiffness: 500, damping: 40 }}
             />
           )}
         </>
@@ -120,10 +120,10 @@ const Tab = ({ children, ...props }: TabProps) => {
 }
 
 const tabPanelStyles = tv({
-  base: 'flex-1 text-sm text-fg',
+  base: "flex-1 text-sm text-fg",
   variants: {
     isFocusVisible: {
-      true: 'outline-none'
+      true: "outline-none"
     }
   }
 })
diff --git a/components/ui/tag-field.tsx b/components/ui/tag-field.tsx
index 061aee43..f7831a3e 100644
--- a/components/ui/tag-field.tsx
+++ b/components/ui/tag-field.tsx
@@ -1,30 +1,30 @@
-'use client'
+"use client"
 
-import * as React from 'react'
+import * as React from "react"
 
-import type { Key } from 'react-aria-components'
-import { Group, TextField } from 'react-aria-components'
-import type { ListData } from 'react-stately'
-import { twJoin } from 'tailwind-merge'
-import { tv } from 'tailwind-variants'
+import type { Key } from "react-aria-components"
+import { Group, TextField } from "react-aria-components"
+import type { ListData } from "react-stately"
+import { twJoin } from "tailwind-merge"
+import { tv } from "tailwind-variants"
 
-import type { FieldProps } from './field'
-import { Description, Input, Label } from './field'
-import { cn } from './primitive'
-import type { RestrictedIntent, TagGroupProps } from './tag-group'
-import { Tag } from './tag-group'
+import type { FieldProps } from "./field"
+import { Description, Input, Label } from "./field"
+import { cn } from "./primitive"
+import type { RestrictedIntent, TagGroupProps } from "./tag-group"
+import { Tag } from "./tag-group"
 
 const tagFieldsStyles = tv({
-  base: ['relative flex min-h-10 flex-row flex-wrap items-center'],
+  base: ["relative flex min-h-10 flex-row flex-wrap items-center"],
   variants: {
     appearance: {
       outline: [
-        'px-1 rounded-lg shadow-sm border',
-        'has-[input[data-focused=true]]:border-primary',
-        'has-[input[data-invalid=true][data-focused=true]]:border-danger has-[input[data-invalid=true]]:border-danger has-[input[data-invalid=true]]:ring-danger/20',
-        'has-[input[data-focused=true]]:ring-4 has-[input[data-focused=true]]:ring-primary/20'
+        "px-1 rounded-lg shadow-sm border",
+        "has-[input[data-focused=true]]:border-primary",
+        "has-[input[data-invalid=true][data-focused=true]]:border-danger has-[input[data-invalid=true]]:border-danger has-[input[data-invalid=true]]:ring-danger/20",
+        "has-[input[data-focused=true]]:ring-4 has-[input[data-focused=true]]:ring-primary/20"
       ],
-      plain: ['has-[input[data-focused=true]]:border-transparent']
+      plain: ["has-[input[data-focused=true]]:border-transparent"]
     }
   }
 })
@@ -34,7 +34,7 @@ interface TagItemProps {
   name: string
 }
 
-interface TagFieldProps extends Pick<TagGroupProps, 'shape'>, FieldProps {
+interface TagFieldProps extends Pick<TagGroupProps, "shape">, FieldProps {
   intent?: RestrictedIntent
   isDisabled?: boolean
   max?: number
@@ -44,11 +44,11 @@ interface TagFieldProps extends Pick<TagGroupProps, 'shape'>, FieldProps {
   list: ListData<TagItemProps>
   onItemInserted?: (tag: TagItemProps) => void
   onItemCleared?: (tag: TagItemProps) => void
-  appearance?: 'outline' | 'plain'
+  appearance?: "outline" | "plain"
 }
 
 const TagField = ({
-  appearance = 'outline',
+  appearance = "outline",
   name,
   className,
   list,
@@ -57,7 +57,7 @@ const TagField = ({
   ...props
 }: TagFieldProps) => {
   const [isInvalid, setIsInvalid] = React.useState(false)
-  const [inputValue, setInputValue] = React.useState('')
+  const [inputValue, setInputValue] = React.useState("")
 
   const existingTagCount = list.items.length
   const maxTags = props.max !== undefined ? props.max : Infinity
@@ -67,7 +67,7 @@ const TagField = ({
     const tagNames = inputValue.split(/,/)
     if (maxTagsToAdd <= 0) {
       setIsInvalid(true)
-      setInputValue('')
+      setInputValue("")
       const timeoutId = setTimeout(() => {
         setIsInvalid(false)
       }, 2000)
@@ -78,8 +78,8 @@ const TagField = ({
     tagNames.slice(0, maxTagsToAdd).forEach((tagName) => {
       const formattedName = tagName
         .trim()
-        .replace(/\s+/g, ' ')
-        .replace(/[\t\r\n]/g, '')
+        .replace(/\s+/g, " ")
+        .replace(/[\t\r\n]/g, "")
 
       if (
         formattedName &&
@@ -95,7 +95,7 @@ const TagField = ({
       }
     })
 
-    setInputValue('')
+    setInputValue("")
   }
 
   const clearInvalidFeedback = () => {
@@ -111,12 +111,12 @@ const TagField = ({
   }
 
   const onKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter' || e.key === ',') {
+    if (e.key === "Enter" || e.key === ",") {
       e.preventDefault()
       insertTag()
     }
 
-    if (e.key === 'Backspace' && inputValue === '') {
+    if (e.key === "Backspace" && inputValue === "") {
       popLast()
       clearInvalidFeedback()
     }
@@ -136,9 +136,9 @@ const TagField = ({
   }, [list, onItemCleared])
 
   return (
-    <div className={cn('flex flex-col gap-1 w-full', className)}>
+    <div className={cn("flex flex-col gap-1 w-full", className)}>
       {props.label && <Label>{props.label}</Label>}
-      <Group className={twJoin('flex flex-col', props.isDisabled && 'opacity-50')}>
+      <Group className={twJoin("flex flex-col", props.isDisabled && "opacity-50")}>
         <Tag.Group
           intent={props.intent}
           shape={props.shape}
@@ -151,17 +151,17 @@ const TagField = ({
                 items={list.items}
                 className={twJoin(
                   list.items.length !== 0
-                    ? appearance === 'outline' && 'py-1.5 px-0.5 gap-1.5'
-                    : 'gap-0',
-                  props.shape === 'square' && '[&_.jdt3lr2x]:rounded-[calc(var(--radius)-4px)]',
-                  '[&_.jdt3lr2x]:cursor-default last:[&_.jdt3lr2x]:-mr-1 outline-none'
+                    ? appearance === "outline" && "py-1.5 px-0.5 gap-1.5"
+                    : "gap-0",
+                  props.shape === "square" && "[&_.jdt3lr2x]:rounded-[calc(var(--radius)-4px)]",
+                  "[&_.jdt3lr2x]:cursor-default last:[&_.jdt3lr2x]:-mr-1 outline-none"
                 )}
               >
                 {(item) => <Tag.Item>{item.name}</Tag.Item>}
               </Tag.List>
               <TextField
                 isDisabled={props.isDisabled}
-                aria-label={props?.label ?? (props['aria-label'] || props.placeholder)}
+                aria-label={props?.label ?? (props["aria-label"] || props.placeholder)}
                 isInvalid={isInvalid}
                 onKeyDown={onKeyDown}
                 onChange={setInputValue}
@@ -170,14 +170,14 @@ const TagField = ({
               >
                 <Input
                   className="w-auto inline"
-                  placeholder={maxTagsToAdd <= 0 ? 'Remove one to add more' : props.placeholder}
+                  placeholder={maxTagsToAdd <= 0 ? "Remove one to add more" : props.placeholder}
                 />
               </TextField>
             </div>
           </div>
         </Tag.Group>
         {name && (
-          <input hidden name={name} value={list.items.map((i) => i.name).join(',')} readOnly />
+          <input hidden name={name} value={list.items.map((i) => i.name).join(",")} readOnly />
         )}
       </Group>
       {props.description && <Description>{props.description}</Description>}
diff --git a/components/ui/tag-group.tsx b/components/ui/tag-group.tsx
index cec59249..0846cf77 100644
--- a/components/ui/tag-group.tsx
+++ b/components/ui/tag-group.tsx
@@ -1,81 +1,81 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
 import type {
   TagGroupProps as TagGroupPrimitiveProps,
   TagListProps,
   TagProps as TagPrimitiveProps
-} from 'react-aria-components'
+} from "react-aria-components"
 import {
   Button,
   Tag as TagPrimitive,
   TagGroup as TagGroupPrimitive,
   TagList as TagListPrimitive
-} from 'react-aria-components'
-import { twMerge } from 'tailwind-merge'
-import { tv } from 'tailwind-variants'
+} from "react-aria-components"
+import { twMerge } from "tailwind-merge"
+import { tv } from "tailwind-variants"
 
-import { badgeIntents, badgeShapes, badgeStyles } from './badge'
-import { Description, Label } from './field'
-import { cn, cr, ctr, focusStyles } from './primitive'
+import { badgeIntents, badgeShapes, badgeStyles } from "./badge"
+import { Description, Label } from "./field"
+import { cn, cr, ctr, focusStyles } from "./primitive"
 
 const intents = {
   primary: {
     base: [
       badgeIntents.primary,
-      '[&_[slot=remove]:hover]:bg-primary [&_[slot=remove]:hover]:text-primary-fg'
+      "[&_[slot=remove]:hover]:bg-primary [&_[slot=remove]:hover]:text-primary-fg"
     ],
     selected: [
-      'bg-primary dark:hover:bg-primary dark:bg-primary hover:bg-primary ring-primary ring-inset text-primary-fg dark:text-primary-fg hover:text-primary-fg',
-      '[&_[slot=remove]:hover]:bg-primary-fg/80 [&_[slot=remove]:hover]:text-primary'
+      "bg-primary dark:hover:bg-primary dark:bg-primary hover:bg-primary ring-primary ring-inset text-primary-fg dark:text-primary-fg hover:text-primary-fg",
+      "[&_[slot=remove]:hover]:bg-primary-fg/80 [&_[slot=remove]:hover]:text-primary"
     ]
   },
   secondary: {
     base: [
       badgeIntents.secondary,
-      '[&_[slot=remove]:hover]:bg-fg [&_[slot=remove]:hover]:text-background'
+      "[&_[slot=remove]:hover]:bg-fg [&_[slot=remove]:hover]:text-background"
     ],
     selected: [
-      'bg-fg ring-fg/50 text-background dark:bg-fg/90 dark:text-secondary ring-inset',
-      '[&_[slot=remove]:hover]:bg-background [&_[slot=remove]:hover]:text-secondary-fg'
+      "bg-fg ring-fg/50 text-background dark:bg-fg/90 dark:text-secondary ring-inset",
+      "[&_[slot=remove]:hover]:bg-background [&_[slot=remove]:hover]:text-secondary-fg"
     ]
   },
   success: {
     base: [
       badgeIntents.success,
-      '[&_[slot=remove]:hover]:bg-success [&_[slot=remove]:hover]:text-success-fg'
+      "[&_[slot=remove]:hover]:bg-success [&_[slot=remove]:hover]:text-success-fg"
     ],
     selected: [
-      'bg-success dark:bg-success ring-success ring-inset dark:text-success-fg dark:hover:bg-success hover:bg-success text-success-fg hover:text-success-fg',
-      '[&_[slot=remove]:hover]:bg-success-fg/80 [&_[slot=remove]:hover]:text-success'
+      "bg-success dark:bg-success ring-success ring-inset dark:text-success-fg dark:hover:bg-success hover:bg-success text-success-fg hover:text-success-fg",
+      "[&_[slot=remove]:hover]:bg-success-fg/80 [&_[slot=remove]:hover]:text-success"
     ]
   },
   warning: {
     base: [
       badgeIntents.warning,
-      '[&_[slot=remove]:hover]:bg-warning [&_[slot=remove]:hover]:text-warning-fg'
+      "[&_[slot=remove]:hover]:bg-warning [&_[slot=remove]:hover]:text-warning-fg"
     ],
     selected: [
-      'bg-warning dark:hover:bg-warning dark:bg-warning dark:text-background hover:bg-warning text-warning-fg hover:text-warning-fg',
-      '[&_[slot=remove]:hover]:bg-warning-fg/80 [&_[slot=remove]:hover]:text-warning'
+      "bg-warning dark:hover:bg-warning dark:bg-warning dark:text-background hover:bg-warning text-warning-fg hover:text-warning-fg",
+      "[&_[slot=remove]:hover]:bg-warning-fg/80 [&_[slot=remove]:hover]:text-warning"
     ]
   },
   danger: {
     base: [
       badgeIntents.danger,
-      '[&_[slot=remove]:hover]:bg-danger [&_[slot=remove]:hover]:text-danger-fg'
+      "[&_[slot=remove]:hover]:bg-danger [&_[slot=remove]:hover]:text-danger-fg"
     ],
     selected: [
-      'bg-danger dark:bg-danger dark:hover:bg-danger/90 hover:bg-danger text-danger-fg ring-danger hover:text-danger-fg',
-      '[&_[slot=remove]:hover]:bg-danger-fg/80 [&_[slot=remove]:hover]:text-danger'
+      "bg-danger dark:bg-danger dark:hover:bg-danger/90 hover:bg-danger text-danger-fg ring-danger hover:text-danger-fg",
+      "[&_[slot=remove]:hover]:bg-danger-fg/80 [&_[slot=remove]:hover]:text-danger"
     ]
   }
 }
 
-type RestrictedIntent = 'primary' | 'secondary'
+type RestrictedIntent = "primary" | "secondary"
 
-type Intent = 'primary' | 'secondary' | 'success' | 'warning' | 'danger'
+type Intent = "primary" | "secondary" | "success" | "warning" | "danger"
 
 type Shape = keyof typeof badgeShapes
 
@@ -85,13 +85,13 @@ type TagGroupContextValue = {
 }
 
 const TagGroupContext = React.createContext<TagGroupContextValue>({
-  intent: 'primary',
-  shape: 'square'
+  intent: "primary",
+  shape: "square"
 })
 
 export interface TagGroupProps extends TagGroupPrimitiveProps {
   intent?: Intent
-  shape?: 'square' | 'circle'
+  shape?: "square" | "circle"
   errorMessage?: string
   label?: string
   description?: string
@@ -101,12 +101,12 @@ const TagGroup = ({ children, ...props }: TagGroupProps) => {
   return (
     <TagGroupPrimitive
       {...props}
-      className={twMerge('flex flex-wrap flex-col gap-1', props.className)}
+      className={twMerge("flex flex-wrap flex-col gap-1", props.className)}
     >
       <TagGroupContext.Provider
         value={{
-          intent: props.intent || 'primary',
-          shape: props.shape || 'square'
+          intent: props.intent || "primary",
+          shape: props.shape || "square"
         }}
       >
         {props.label && <Label>{props.label}</Label>}
@@ -118,16 +118,16 @@ const TagGroup = ({ children, ...props }: TagGroupProps) => {
 }
 
 const TagList = <T extends object>({ className, ...props }: TagListProps<T>) => {
-  return <TagListPrimitive {...props} className={ctr(className, 'flex flex-wrap gap-2')} />
+  return <TagListPrimitive {...props} className={ctr(className, "flex flex-wrap gap-2")} />
 }
 
 const tagStyles = tv({
   extend: focusStyles,
-  base: [badgeStyles.base, 'cursor-pointer jdt3lr2x'],
+  base: [badgeStyles.base, "cursor-pointer jdt3lr2x"],
   variants: {
-    isFocused: { true: 'ring-1' },
-    isDisabled: { true: 'opacity-50 cursor-default' },
-    allowsRemoving: { true: 'pr-1' }
+    isFocused: { true: "ring-1" },
+    isDisabled: { true: "opacity-50 cursor-default" },
+    allowsRemoving: { true: "pr-1" }
   }
 })
 
@@ -137,7 +137,7 @@ interface TagProps extends TagPrimitiveProps {
 }
 
 const TagItem = ({ children, className, intent, shape, ...props }: TagProps) => {
-  const textValue = typeof children === 'string' ? children : undefined
+  const textValue = typeof children === "string" ? children : undefined
   const groupContext = React.useContext(TagGroupContext)
 
   return (
@@ -165,9 +165,9 @@ const TagItem = ({ children, className, intent, shape, ...props }: TagProps) =>
             {allowsRemoving && (
               <Button
                 slot="remove"
-                className={cr('', (className) => {
+                className={cr("", (className) => {
                   return twMerge(
-                    'rounded focus:outline-none size-3.5 grid place-content-center -mr-0.5 focus-visible:ring-1 focus-visible:ring-primary',
+                    "rounded focus:outline-none size-3.5 grid place-content-center -mr-0.5 focus-visible:ring-1 focus-visible:ring-primary",
                     className
                   )
                 })}
diff --git a/components/ui/text-field.tsx b/components/ui/text-field.tsx
index 84ead147..2ae7f747 100644
--- a/components/ui/text-field.tsx
+++ b/components/ui/text-field.tsx
@@ -1,22 +1,22 @@
-'use client'
+"use client"
 
-import * as React from 'react'
+import * as React from "react"
 
-import { IconLoader } from 'justd-icons'
+import { IconLoader } from "justd-icons"
 import {
   TextField as TextFieldPrimitive,
   type TextFieldProps as TextFieldPrimitiveProps
-} from 'react-aria-components'
+} from "react-aria-components"
 
-import type { FieldProps } from './field'
-import { Description, FieldError, FieldGroup, fieldGroupPrefixStyles, Input, Label } from './field'
-import { ctr } from './primitive'
+import type { FieldProps } from "./field"
+import { Description, FieldError, FieldGroup, fieldGroupPrefixStyles, Input, Label } from "./field"
+import { ctr } from "./primitive"
 
 interface TextFieldProps extends TextFieldPrimitiveProps, FieldProps {
   prefix?: React.ReactNode
   suffix?: React.ReactNode
   isLoading?: boolean
-  indicatorPlace?: 'prefix' | 'suffix'
+  indicatorPlace?: "prefix" | "suffix"
 }
 
 const TextField = ({
@@ -31,19 +31,19 @@ const TextField = ({
   ...props
 }: TextFieldProps) => {
   return (
-    <TextFieldPrimitive {...props} className={ctr(props.className, 'group flex flex-col gap-1')}>
+    <TextFieldPrimitive {...props} className={ctr(props.className, "group flex flex-col gap-1")}>
       {label && <Label>{label}</Label>}
       <FieldGroup
-        data-loading={isLoading ? 'true' : undefined}
+        data-loading={isLoading ? "true" : undefined}
         className={fieldGroupPrefixStyles()}
       >
-        {isLoading && indicatorPlace === 'prefix' ? (
+        {isLoading && indicatorPlace === "prefix" ? (
           <IconLoader className="animate-spin isPfx" />
         ) : prefix ? (
           <span className="atrs isPfx x2e2">{prefix}</span>
         ) : null}
         <Input className="px-2.5" placeholder={placeholder} />
-        {isLoading && indicatorPlace === 'suffix' ? (
+        {isLoading && indicatorPlace === "suffix" ? (
           <IconLoader className="animate-spin isSfx" />
         ) : suffix ? (
           <span className="atrs isSfx x2e2">{suffix}</span>
diff --git a/components/ui/textarea.tsx b/components/ui/textarea.tsx
index 438aeac9..26fe8cc1 100644
--- a/components/ui/textarea.tsx
+++ b/components/ui/textarea.tsx
@@ -1,21 +1,21 @@
-'use client'
+"use client"
 
-import * as React from 'react'
+import * as React from "react"
 
 import {
   TextArea as TextAreaPrimitive,
   TextField as TextFieldPrimitive,
   type TextFieldProps as TextFieldPrimitiveProps,
   type ValidationResult
-} from 'react-aria-components'
-import { tv } from 'tailwind-variants'
+} from "react-aria-components"
+import { tv } from "tailwind-variants"
 
-import { Description, FieldError, Label } from './field'
-import { cr, ctr, focusStyles } from './primitive'
+import { Description, FieldError, Label } from "./field"
+import { cr, ctr, focusStyles } from "./primitive"
 
 const textareaStyles = tv({
   extend: focusStyles,
-  base: 'w-full min-w-0 rounded-md border border-input bg-background px-2.5 py-2 text-base shadow-sm outline-none transition duration-200 disabled:bg-secondary disabled:opacity-50 sm:text-sm'
+  base: "w-full min-w-0 rounded-md border border-input bg-background px-2.5 py-2 text-base shadow-sm outline-none transition duration-200 disabled:bg-secondary disabled:opacity-50 sm:text-sm"
 })
 
 interface TextareaProps extends TextFieldPrimitiveProps {
@@ -36,7 +36,7 @@ const Textarea = ({
   ...props
 }: TextareaProps) => {
   return (
-    <TextFieldPrimitive {...props} className={ctr(className, 'group flex flex-col gap-1')}>
+    <TextFieldPrimitive {...props} className={ctr(className, "group flex flex-col gap-1")}>
       {label && <Label>{label}</Label>}
       <TextAreaPrimitive
         placeholder={placeholder}
diff --git a/components/ui/time-field.tsx b/components/ui/time-field.tsx
index 20466d9d..e9c9c21f 100644
--- a/components/ui/time-field.tsx
+++ b/components/ui/time-field.tsx
@@ -1,18 +1,18 @@
-'use client'
+"use client"
 
-import * as React from 'react'
+import * as React from "react"
 
 import {
   TimeField as TimeFieldPrimitive,
   type TimeFieldProps as TimeFieldPrimitiveProps,
   type TimeValue,
   type ValidationResult
-} from 'react-aria-components'
-import { tv } from 'tailwind-variants'
+} from "react-aria-components"
+import { tv } from "tailwind-variants"
 
-import { DateInput } from './date-field'
-import { Description, FieldError, fieldGroupStyles, Label } from './field'
-import { ctr } from './primitive'
+import { DateInput } from "./date-field"
+import { Description, FieldError, fieldGroupStyles, Label } from "./field"
+import { ctr } from "./primitive"
 
 export interface TimeFieldProps<T extends TimeValue> extends TimeFieldPrimitiveProps<T> {
   label?: string
@@ -22,7 +22,7 @@ export interface TimeFieldProps<T extends TimeValue> extends TimeFieldPrimitiveP
 
 const timeFieldStyles = tv({
   extend: fieldGroupStyles,
-  base: 'flex w-fit font-mono min-w-28 justify-around whitespace-nowrap p-2 lg:text-sm'
+  base: "flex w-fit font-mono min-w-28 justify-around whitespace-nowrap p-2 lg:text-sm"
 })
 
 const TimeField = <T extends TimeValue>({
@@ -33,7 +33,7 @@ const TimeField = <T extends TimeValue>({
   ...props
 }: TimeFieldProps<T>) => {
   return (
-    <TimeFieldPrimitive {...props} className={ctr(className, 'flex flex-col gap-1')}>
+    <TimeFieldPrimitive {...props} className={ctr(className, "flex flex-col gap-1")}>
       <Label>{label}</Label>
       <DateInput className={timeFieldStyles} />
       {description && <Description>{description}</Description>}
diff --git a/components/ui/toast.tsx b/components/ui/toast.tsx
index c70c44c5..789c7e83 100644
--- a/components/ui/toast.tsx
+++ b/components/ui/toast.tsx
@@ -1,20 +1,20 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { useTheme } from '@/components/theme-provider'
-import { IconCheck, IconCircleInfoFill, IconTriangleInfoFill } from 'justd-icons'
-import { Toaster as ToasterPrimitive, type ToasterProps } from 'sonner'
-import { twJoin } from 'tailwind-merge'
+import { useTheme } from "@/components/theme-provider"
+import { IconCheck, IconCircleInfoFill, IconTriangleInfoFill } from "justd-icons"
+import { Toaster as ToasterPrimitive, type ToasterProps } from "sonner"
+import { twJoin } from "tailwind-merge"
 
-import { buttonStyles } from './button'
-import { Loader } from './loader'
+import { buttonStyles } from "./button"
+import { Loader } from "./loader"
 
 const Toast = ({ ...props }: ToasterProps) => {
-  const { theme = 'system' } = useTheme()
+  const { theme = "system" } = useTheme()
   return (
     <ToasterPrimitive
-      theme={theme as ToasterProps['theme']}
+      theme={theme as ToasterProps["theme"]}
       className="toaster group"
       icons={{
         info: <IconCircleInfoFill />,
@@ -28,35 +28,35 @@ const Toast = ({ ...props }: ToasterProps) => {
         closeButton: true,
         classNames: {
           toast: twJoin(
-            'bg-background ring-1 ring-border dark:ring-inset sm:min-w-[22rem] rounded-xl text-fg overflow-hidden text-[0.925rem] backdrop-blur-xl px-4 py-3 font-normal sm:px-5 sm:py-5',
-            '[&:has([data-icon])_[data-content]]:ml-5',
+            "bg-background ring-1 ring-border dark:ring-inset sm:min-w-[22rem] rounded-xl text-fg overflow-hidden text-[0.925rem] backdrop-blur-xl px-4 py-3 font-normal sm:px-5 sm:py-5",
+            "[&:has([data-icon])_[data-content]]:ml-5",
             '[&:has([data-button])_[data-close-button="true"]]:hidden',
-            '[&:not([data-description])_[data-title]]:font-normal',
-            '[&:has([data-description])_[data-title]]:!font-medium [&:has([data-description])_[data-title]]:!text-lg',
-            '[&>[data-button]]:absolute [&>[data-button=true]]:bottom-4',
-            '[&>[data-action=true]]:right-4',
-            '[&>[data-cancel=true]]:left-4'
+            "[&:not([data-description])_[data-title]]:font-normal",
+            "[&:has([data-description])_[data-title]]:!font-medium [&:has([data-description])_[data-title]]:!text-lg",
+            "[&>[data-button]]:absolute [&>[data-button=true]]:bottom-4",
+            "[&>[data-action=true]]:right-4",
+            "[&>[data-cancel=true]]:left-4"
           ),
-          icon: 'absolute top-[1.50rem]',
-          content: '[&:not(:has(+button))]:pr-10 [&:has(+button)]:pb-11 md:[&:has(+button)]:pb-9',
+          icon: "absolute top-[1rem] sm:top-[1.50rem]",
+          content: "[&:not(:has(+button))]:pr-10 [&:has(+button)]:pb-11 md:[&:has(+button)]:pb-9",
           error:
-            'bg-danger text-white ring-white/10 text-danger-fg dark:ring-inset [&>[data-close-button=true]>svg]:text-white [&>[data-close-button=true]:hover]:bg-white/20',
-          info: 'bg-lime-600 ring-white/10 text-lime-50 dark:ring-inset [&>[data-close-button=true]>svg]:text-white [&>[data-close-button=true]:hover]:bg-white/20',
+            "bg-danger ring-danger-fg/10 text-white ring-inset [&>[data-close-button=true]>svg]:text-white [&>[data-close-button=true]:hover]:bg-white/20",
+          info: "bg-info ring-info-fg/10 text-info-fg ring-inset [&>[data-close-button=true]>svg]:text-info-fg [&>[data-close-button=true]:hover]:bg-white/20",
           warning:
-            'bg-warning text-warning-fg ring-white/10 dark:ring-inset [&>[data-close-button=true]>svg]:text-amber-950 [&>[data-close-button=true]:hover]:bg-white/20',
+            "bg-warning text-warning-fg ring-warning-fg/10 ring-inset [&>[data-close-button=true]>svg]:text-amber-950 [&>[data-close-button=true]:hover]:bg-white/20",
           success:
-            'bg-primary text-white ring-white/10 text-primary-fg dark:ring-inset [&>[data-close-button=true]>svg]:text-white [&>[data-close-button=true]:hover]:bg-white/20',
+            "bg-primary-600 ring-primary-700/50 text-white ring-inset [&>[data-close-button=true]>svg]:text-white [&>[data-close-button=true]:hover]:bg-white/20",
           cancelButton: buttonStyles({
-            className: '',
-            size: 'extra-small',
-            appearance: 'outline'
+            className: "",
+            size: "extra-small",
+            appearance: "outline"
           }),
           actionButton: buttonStyles({
-            className: 'self-end justify-self-end',
-            size: 'extra-small'
+            className: "self-end justify-self-end",
+            size: "extra-small"
           }),
           closeButton:
-            '[&_svg]:size-5 size-8 absolute top-1/2 transform -translate-y-1/2 right-2 lg:right-3 left-auto grid place-content-center rounded-md hover:bg-black/20 dark:hover:bg-white/20 border-0 [&_svg]:text-fg'
+            "[&_svg]:size-5 size-8 absolute top-1/2 transform -translate-y-1/2 right-2 lg:right-3 left-auto grid place-content-center rounded-md hover:bg-black/20 dark:hover:bg-white/20 border-0 [&_svg]:text-fg"
         }
       }}
       {...props}
diff --git a/components/ui/toggle.tsx b/components/ui/toggle.tsx
index 1cfc0407..d8563e8c 100644
--- a/components/ui/toggle.tsx
+++ b/components/ui/toggle.tsx
@@ -1,50 +1,50 @@
-'use client'
+"use client"
 
-import type { ToggleButtonProps } from 'react-aria-components'
-import { ToggleButton as ToggleButtonPrimitive } from 'react-aria-components'
-import { tv } from 'tailwind-variants'
+import type { ToggleButtonProps } from "react-aria-components"
+import { ToggleButton as ToggleButtonPrimitive } from "react-aria-components"
+import { tv } from "tailwind-variants"
 
-import { type ButtonProps } from './button'
-import { cr, focusButtonStyles } from './primitive'
+import { type ButtonProps } from "./button"
+import { cr, focusButtonStyles } from "./primitive"
 
 const toggleStyles = tv({
   extend: focusButtonStyles,
   base: [
-    'inline-flex items-center bg-transparent justify-center border border-transparent rounded-lg text-sm font-medium ring-offset-background transition-colors',
-    'hover:bg-muted hover:text-muted-fg'
+    "inline-flex items-center bg-transparent justify-center border border-transparent rounded-lg text-sm font-medium ring-offset-background transition-colors",
+    "hover:bg-muted hover:text-muted-fg"
   ],
   variants: {
     isDisabled: {
-      true: 'opacity-50 cursor-default forced-colors:border-[GrayText]'
+      true: "opacity-50 cursor-default forced-colors:border-[GrayText]"
     },
     appearance: {
-      plain: 'selected:bg-secondary selected:text-secondary-fg',
+      plain: "selected:bg-secondary selected:text-secondary-fg",
       solid:
-        'bg-white border-border hover:border-primary selected:border-primary hover:bg-primary hover:text-primary-fg text-zinc-900 selected:bg-primary selected:text-primary-fg',
+        "bg-white border-border hover:border-primary selected:border-primary hover:bg-primary hover:text-primary-fg text-zinc-900 selected:bg-primary selected:text-primary-fg",
       outline:
-        'border-border selected:bg-secondary selected:backdrop-blur-sm selected:text-secondary-fg hover:bg-secondary hover:text-secondary-fg'
+        "border-border selected:bg-secondary selected:backdrop-blur-sm selected:text-secondary-fg hover:bg-secondary hover:text-secondary-fg"
     },
     size: {
-      medium: 'h-10 px-3',
-      small: 'h-9 px-2.5',
-      large: 'h-11 px-5',
-      'square-petite': 'size-9 shrink-0'
+      medium: "h-10 px-3",
+      small: "h-9 px-2.5",
+      large: "h-11 px-5",
+      "square-petite": "size-9 shrink-0"
     },
     shape: {
-      square: 'rounded-lg',
-      circle: 'rounded-full'
+      square: "rounded-lg",
+      circle: "rounded-full"
     }
   },
   defaultVariants: {
-    size: 'small',
-    shape: 'square'
+    size: "small",
+    shape: "square"
   }
 })
 
 interface ToggleProps extends ToggleButtonProps {
-  appearance?: ButtonProps['appearance']
-  size?: 'small' | 'medium' | 'large' | 'square-petite'
-  shape?: ButtonProps['shape']
+  appearance?: ButtonProps["appearance"]
+  size?: "small" | "medium" | "large" | "square-petite"
+  shape?: ButtonProps["shape"]
 }
 
 const Toggle = ({ className, ...props }: ToggleProps) => {
diff --git a/components/ui/toolbar.tsx b/components/ui/toolbar.tsx
index 4810fdd6..0cb4b5ba 100644
--- a/components/ui/toolbar.tsx
+++ b/components/ui/toolbar.tsx
@@ -1,50 +1,50 @@
-'use client'
+"use client"
 
-import * as React from 'react'
+import * as React from "react"
 
 import type {
   GroupProps,
   SeparatorProps,
   ToolbarProps as ToolbarPrimitiveProps
-} from 'react-aria-components'
-import { Group, Toolbar as ToolbarPrimitive } from 'react-aria-components'
-import { tv } from 'tailwind-variants'
+} from "react-aria-components"
+import { Group, Toolbar as ToolbarPrimitive } from "react-aria-components"
+import { tv } from "tailwind-variants"
 
-import { cn, cr } from './primitive'
-import { Separator } from './separator'
-import type { ToggleProps } from './toggle'
-import { Toggle, toggleStyles } from './toggle'
+import { cn, cr } from "./primitive"
+import { Separator } from "./separator"
+import type { ToggleProps } from "./toggle"
+import { Toggle, toggleStyles } from "./toggle"
 
 const toolbarStyles = tv({
-  base: 'flex gap-2 group',
+  base: "flex gap-2 group",
   variants: {
     orientation: {
       horizontal:
-        'flex-row [&::-webkit-scrollbar]:hidden [scrollbar-width:none] [-ms-overflow-style:none]',
-      vertical: 'flex-col items-start'
+        "flex-row [&::-webkit-scrollbar]:hidden [scrollbar-width:none] [-ms-overflow-style:none]",
+      vertical: "flex-col items-start"
     }
   }
 })
 
 const ToolbarSeparator = ({ className, ...props }: SeparatorProps) => {
   const { orientation } = React.useContext(ToolbarContext)
-  const effectiveOrientation = orientation === 'vertical' ? 'horizontal' : 'vertical'
+  const effectiveOrientation = orientation === "vertical" ? "horizontal" : "vertical"
   return (
     <Separator
       orientation={effectiveOrientation}
-      className={cn(effectiveOrientation === 'vertical' ? 'mx-1.5' : 'my-1.5 w-9', className)}
+      className={cn(effectiveOrientation === "vertical" ? "mx-1.5" : "my-1.5 w-9", className)}
       {...props}
     />
   )
 }
 
-const ToolbarContext = React.createContext<{ orientation?: ToolbarProps['orientation'] }>({
-  orientation: 'horizontal'
+const ToolbarContext = React.createContext<{ orientation?: ToolbarProps["orientation"] }>({
+  orientation: "horizontal"
 })
 
 interface ToolbarProps extends ToolbarPrimitiveProps {}
 
-const Toolbar = ({ orientation = 'horizontal', ...props }: ToolbarProps) => {
+const Toolbar = ({ orientation = "horizontal", ...props }: ToolbarProps) => {
   return (
     <ToolbarContext.Provider value={{ orientation }}>
       <ToolbarPrimitive
@@ -59,7 +59,7 @@ const Toolbar = ({ orientation = 'horizontal', ...props }: ToolbarProps) => {
 }
 
 const toolbarGroupStyles = tv({
-  base: ['flex gap-2', 'group-orientation-vertical:flex-col group-orientation-vertical:items-start']
+  base: ["flex gap-2", "group-orientation-vertical:flex-col group-orientation-vertical:items-start"]
 })
 
 const ToolbarGroupContext = React.createContext<{ isDisabled?: boolean }>({})
diff --git a/components/ui/tooltip.tsx b/components/ui/tooltip.tsx
index 6fbd091c..fbb636f8 100644
--- a/components/ui/tooltip.tsx
+++ b/components/ui/tooltip.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
 import {
   Button,
@@ -8,26 +8,26 @@ import {
   Tooltip as TooltipPrimitive,
   type TooltipProps as TooltipPrimitiveProps,
   TooltipTrigger
-} from 'react-aria-components'
-import { tv } from 'tailwind-variants'
+} from "react-aria-components"
+import { tv } from "tailwind-variants"
 
-import { cr } from './primitive'
+import { cr } from "./primitive"
 
-interface TooltipProps extends Omit<TooltipPrimitiveProps, 'children'> {
+interface TooltipProps extends Omit<TooltipPrimitiveProps, "children"> {
   children: React.ReactNode
 }
 
 const tooltipStyles = tv({
   base: [
-    'group rounded-md [&_strong]:font-medium bg-fg border border-fg text-background px-2 py-1.5 text-sm will-change-transform dark:shadow-none',
-    'placement-left:slide-in-from-right-1 placement-right:slide-in-from-left-1 placement-top:slide-in-from-bottom-1 placement-bottom:slide-in-from-top-1'
+    "group rounded-md [&_strong]:font-medium bg-fg border border-fg text-background px-2 py-1.5 text-sm will-change-transform dark:shadow-none",
+    "placement-left:slide-in-from-right-1 placement-right:slide-in-from-left-1 placement-top:slide-in-from-bottom-1 placement-bottom:slide-in-from-top-1"
   ],
   variants: {
     isEntering: {
-      true: 'animate-in fade-in'
+      true: "animate-in fade-in"
     },
     isExiting: {
-      true: 'animate-in fade-in direction-reverse'
+      true: "animate-in fade-in direction-reverse"
     }
   }
 })
diff --git a/components/ui/visually-hidden.tsx b/components/ui/visually-hidden.tsx
index fa04249b..1d07dc82 100644
--- a/components/ui/visually-hidden.tsx
+++ b/components/ui/visually-hidden.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import * as React from 'react'
+import * as React from "react"
 
-import { useVisuallyHidden } from 'react-aria'
+import { useVisuallyHidden } from "react-aria"
 
 type VisuallyHiddenSpanProps = {
   children: React.ReactNode
diff --git a/resources/styles/app.css b/resources/styles/app.css
index 80f58de0..6ffcea96 100644
--- a/resources/styles/app.css
+++ b/resources/styles/app.css
@@ -12,7 +12,7 @@
         --overlay: 0 0% 100%;
         --overlay-fg: 240 10% 3.9%;
 
-        --primary: 216 98% 52%;
+        --primary: 216.74 100% 50%;
         --primary-fg: 0 0% 100%;
 
         --secondary: 240 4.8% 95.9%;
@@ -50,6 +50,9 @@
         --overlay: 240 6% 6%;
         --overlay-fg: 0 0% 98%;
 
+        --primary: 216 98% 52%;
+        --primary-fg: 0 0% 100%;
+
         --secondary: 240 3.7% 15.9%;
         --secondary-fg: 0 0% 98%;
 
@@ -95,12 +98,12 @@
     /* dark mode */
     .dark {
         scrollbar-width: thin;
-        scrollbar-color: #3f3f46 transparent;
+        scrollbar-color: var(--secondary) transparent;
 
         @media (prefers-color-scheme: dark) {
             * {
                 scrollbar-width: thin;
-                scrollbar-color: #3f3f46 transparent;
+                scrollbar-color: var(--secondary) transparent;
             }
         }
     }

From eddc046598c4ed891d5ca069b588bb74f35f872b Mon Sep 17 00:00:00 2001
From: "Irsyad A. Panjaitan" <irsyad@parsinta.com>
Date: Sat, 17 Aug 2024 02:42:40 +0700
Subject: [PATCH 4/6] import type fix

---
 app/(app)/themes/controller.tsx               |   2 +-
 app/(app)/themes/themes-list.ts               | 320 +++++++++---------
 components/command-palette.tsx                |  86 ++---
 components/doc-composed.tsx                   |  16 +-
 components/doc-how.tsx                        |  32 +-
 components/doc-note.tsx                       |  20 +-
 components/doc-refs.tsx                       |  56 +--
 .../docs/buttons/button-appearance-demo.tsx   |   6 +-
 components/docs/buttons/button-basic-demo.tsx |   6 +-
 .../docs/buttons/button-disabled-demo.tsx     |   4 +-
 .../docs/buttons/button-intent-demo.tsx       |   6 +-
 .../docs/buttons/button-loader-demo.tsx       |  32 +-
 .../docs/buttons/button-only-icon-demo.tsx    |   6 +-
 components/docs/buttons/button-shape-demo.tsx |   4 +-
 .../docs/buttons/file-trigger-avatar-demo.tsx |  20 +-
 .../docs/buttons/file-trigger-camera-demo.tsx |   4 +-
 .../buttons/file-trigger-controlled-demo.tsx  |   6 +-
 components/docs/buttons/file-trigger-demo.tsx |   6 +-
 .../buttons/file-trigger-disabled-demo.tsx    |   6 +-
 .../docs/buttons/file-trigger-folder-demo.tsx |   4 +-
 .../buttons/file-trigger-multiple-demo.tsx    |   4 +-
 .../docs/buttons/toggle-appearance-demo.tsx   |  10 +-
 .../docs/buttons/toggle-controlled-demo.tsx   |   8 +-
 .../docs/buttons/toggle-disabled-demo.tsx     |   8 +-
 components/docs/buttons/toggle-shape-demo.tsx |   6 +-
 components/docs/buttons/toggle-size-demo.tsx  |  12 +-
 components/docs/controls/slider-demo.tsx      |   4 +-
 components/docs/controls/switch-demo.tsx      |   8 +-
 components/docs/forms/checkbox-demo.tsx       |   4 +-
 components/docs/forms/form-demo.tsx           |   4 +-
 components/docs/forms/textarea-demo.tsx       |   4 +-
 components/docs/outside/option-preview.tsx    |   8 +-
 .../docs/pickers/combo-box-avatar-demo.tsx    |  28 +-
 .../pickers/combo-box-controlled-demo.tsx     |  26 +-
 components/docs/pickers/combo-box-demo.tsx    |  28 +-
 .../docs/pickers/combo-box-disabled-demo.tsx  |   6 +-
 .../docs/pickers/combo-box-invalid-demo.tsx   |   6 +-
 .../docs/pickers/combo-box-readonly-demo.tsx  |   6 +-
 .../docs/pickers/combo-box-section-demo.tsx   |  34 +-
 .../pickers/combo-box-validation-demo.tsx     |   6 +-
 .../multiple-select-controlled-demo.tsx       |  28 +-
 .../docs/pickers/multiple-select-demo.tsx     |  48 +--
 .../pickers/multiple-select-disabled-demo.tsx |  10 +-
 .../pickers/multiple-select-intent-demo.tsx   |  48 +--
 .../pickers/multiple-select-min-max-demo.tsx  |  28 +-
 .../pickers/multiple-select-shape-demo.tsx    |  48 +--
 .../docs/pickers/select-controlled-demo.tsx   |  20 +-
 components/docs/pickers/select-demo.tsx       |  14 +-
 .../docs/pickers/select-disabled-demo.tsx     |   6 +-
 .../docs/pickers/select-item-details-demo.tsx |  14 +-
 .../docs/pickers/select-section-demo.tsx      |  70 ++--
 .../docs/pickers/select-validation-demo.tsx   |   6 +-
 .../docs/surfaces/grid-collections-demo.tsx   |  28 +-
 .../docs/surfaces/heading-tracking-demo.tsx   |   2 +-
 .../surfaces/separator-orientation-demo.tsx   |   4 +-
 .../docs/surfaces/show-more-as-text-demo.tsx  |   6 +-
 .../surfaces/show-more-controlled-demo.tsx    |  12 +-
 .../surfaces/show-more-orientation-demo.tsx   |   6 +-
 components/experimental/cmd.tsx               |  32 +-
 components/header.tsx                         |   6 +-
 components/install-command.tsx                |  56 +--
 components/mdx-components.tsx                 |  24 +-
 components/nav-item.tsx                       |  18 +-
 components/navbar.tsx                         |  68 ++--
 components/providers.tsx                      |  12 +-
 components/resources.tsx                      |  30 +-
 components/responsive-aside.tsx               |  26 +-
 components/table-of-contents.tsx              |  26 +-
 components/take-current-url.tsx               |  30 +-
 components/theme-provider.tsx                 |   8 +-
 components/theme-switcher.tsx                 |  12 +-
 components/ui/field.tsx                       |  70 ++--
 resources/config/site.ts                      |  16 +-
 resources/hooks/use-mdx.ts                    |   2 +-
 resources/hooks/use-mounted.ts                |   2 +-
 resources/hooks/use-query-string.ts           |   4 +-
 resources/lib/colors.ts                       |  88 ++---
 resources/lib/utils.ts                        |  24 +-
 resources/scripts/create-pr-content.ts        |  40 +--
 resources/types/global.d.ts                   |   6 +-
 resources/types/index.ts                      |   4 +-
 tailwind.config.ts                            | 116 +++----
 velite.config.ts                              |  38 +--
 83 files changed, 1013 insertions(+), 1005 deletions(-)

diff --git a/app/(app)/themes/controller.tsx b/app/(app)/themes/controller.tsx
index 2d86916c..247b9951 100644
--- a/app/(app)/themes/controller.tsx
+++ b/app/(app)/themes/controller.tsx
@@ -1,6 +1,6 @@
 import React from "react"
 
-import { Key } from "react-aria-components"
+import type { Key } from "react-aria-components"
 import { toast } from "sonner"
 import { Button, Select, Sheet } from "ui"
 import { copyToClipboard } from "usemods"
diff --git a/app/(app)/themes/themes-list.ts b/app/(app)/themes/themes-list.ts
index 428cfc2d..34d55d0a 100644
--- a/app/(app)/themes/themes-list.ts
+++ b/app/(app)/themes/themes-list.ts
@@ -1,189 +1,189 @@
-type ThemeProps = 'default' | 'zinc' | 'regent' | 'slate'
+type ThemeProps = "default" | "zinc" | "regent" | "slate"
 type ThemeVariables = {
   [key: string]: string
 }
 const themesList: Record<ThemeProps, { root: ThemeVariables; dark: ThemeVariables }> = {
   default: {
     root: {
-      '--light': '0 0% 98.04%',
-      '--dark': '240 10% 6%',
-      '--background': '0 0% 100%',
-      '--fg': '240 10% 3.9%',
-      '--overlay': '0 0% 100%',
-      '--overlay-fg': '240 10% 3.9%',
-      '--primary': '216.74 100% 50%',
-      '--primary-fg': '0 0% 100%',
-      '--secondary': '240 4.8% 95.9%',
-      '--secondary-fg': '240 5.9% 10%',
-      '--tertiary': '0 0% 100%',
-      '--tertiary-fg': '240 4% 16%',
-      '--success': '152 69% 31%',
-      '--success-fg': '0 0% 100%',
-      '--info': '81.97 84.52% 67.06%',
-      '--info-fg': '89.27 80.39% 10%',
-      '--muted': '240 4.8% 95.9%',
-      '--muted-fg': '240 3.8% 46.1%',
-      '--danger': '0 72.22% 50.59%',
-      '--danger-fg': '0 85.71% 97.25%',
-      '--warning': '43.26 96.41% 56.27%',
-      '--warning-fg': '20.91 91.67% 14.12%',
-      '--border': '240 5.9% 90%',
-      '--input': '240 5.9% 90%',
-      '--ring': 'var(--primary)',
-      '--toggle': '240 5% 84%',
-      '--radius': '0.55rem'
+      "--light": "0 0% 98.04%",
+      "--dark": "240 10% 6%",
+      "--background": "0 0% 100%",
+      "--fg": "240 10% 3.9%",
+      "--overlay": "0 0% 100%",
+      "--overlay-fg": "240 10% 3.9%",
+      "--primary": "216.74 100% 50%",
+      "--primary-fg": "0 0% 100%",
+      "--secondary": "240 4.8% 95.9%",
+      "--secondary-fg": "240 5.9% 10%",
+      "--tertiary": "0 0% 100%",
+      "--tertiary-fg": "240 4% 16%",
+      "--success": "152 69% 31%",
+      "--success-fg": "0 0% 100%",
+      "--info": "81.97 84.52% 67.06%",
+      "--info-fg": "89.27 80.39% 10%",
+      "--muted": "240 4.8% 95.9%",
+      "--muted-fg": "240 3.8% 46.1%",
+      "--danger": "0 72.22% 50.59%",
+      "--danger-fg": "0 85.71% 97.25%",
+      "--warning": "43.26 96.41% 56.27%",
+      "--warning-fg": "20.91 91.67% 14.12%",
+      "--border": "240 5.9% 90%",
+      "--input": "240 5.9% 90%",
+      "--ring": "var(--primary)",
+      "--toggle": "240 5% 84%",
+      "--radius": "0.55rem"
     },
     dark: {
-      '--background': '0 0% 0%',
-      '--fg': '0 0% 98%',
-      '--overlay': '240 6% 6%',
-      '--overlay-fg': '0 0% 98%',
-      '--primary': '216 98% 52%',
-      '--primary-fg': '0 0% 100%',
-      '--secondary': '240 3.7% 15.9%',
-      '--secondary-fg': '0 0% 98%',
-      '--info': '84.91 100% 66.47%',
-      '--info-fg': '120 100% 13.14%',
-      '--tertiary': '240 10% 5.5%',
-      '--tertiary-fg': '240 5% 96%',
-      '--ring': 'var(--primary)',
-      '--muted': '240 3.7% 15.9%',
-      '--muted-fg': '240 5% 64.9%',
-      '--toggle': '240 5% 26%',
-      '--border': '240 7% 15%',
-      '--input': '240 3.7% 15.9%'
+      "--background": "0 0% 0%",
+      "--fg": "0 0% 98%",
+      "--overlay": "240 6% 6%",
+      "--overlay-fg": "0 0% 98%",
+      "--primary": "216 98% 52%",
+      "--primary-fg": "0 0% 100%",
+      "--secondary": "240 3.7% 15.9%",
+      "--secondary-fg": "0 0% 98%",
+      "--info": "84.91 100% 66.47%",
+      "--info-fg": "120 100% 13.14%",
+      "--tertiary": "240 10% 5.5%",
+      "--tertiary-fg": "240 5% 96%",
+      "--ring": "var(--primary)",
+      "--muted": "240 3.7% 15.9%",
+      "--muted-fg": "240 5% 64.9%",
+      "--toggle": "240 5% 26%",
+      "--border": "240 7% 15%",
+      "--input": "240 3.7% 15.9%"
     }
   },
   zinc: {
     root: {
-      '--light': '0 0% 98.04%',
-      '--dark': '240 10% 6%',
-      '--background': '0 0% 100%',
-      '--fg': '240 10% 3.9%',
-      '--overlay': '0 0% 100%',
-      '--overlay-fg': '240 10% 3.9%',
-      '--primary': '240 10% 3.92%',
-      '--primary-fg': '0 0% 98.04%',
-      '--secondary': '240 4.8% 95.9%',
-      '--secondary-fg': '240 5.9% 10%',
-      '--tertiary': '0 0% 100%',
-      '--tertiary-fg': '240 4% 16%',
-      '--success': '152 69% 31%',
-      '--success-fg': '0 0% 100%',
-      '--muted': '240 4.8% 95.9%',
-      '--muted-fg': '240 3.8% 46.1%',
-      '--border': '240 5.9% 90%',
-      '--input': '240 5.9% 90%',
-      '--ring': 'var(--primary)',
-      '--toggle': '240 5% 84%'
+      "--light": "0 0% 98.04%",
+      "--dark": "240 10% 6%",
+      "--background": "0 0% 100%",
+      "--fg": "240 10% 3.9%",
+      "--overlay": "0 0% 100%",
+      "--overlay-fg": "240 10% 3.9%",
+      "--primary": "240 10% 3.92%",
+      "--primary-fg": "0 0% 98.04%",
+      "--secondary": "240 4.8% 95.9%",
+      "--secondary-fg": "240 5.9% 10%",
+      "--tertiary": "0 0% 100%",
+      "--tertiary-fg": "240 4% 16%",
+      "--success": "152 69% 31%",
+      "--success-fg": "0 0% 100%",
+      "--muted": "240 4.8% 95.9%",
+      "--muted-fg": "240 3.8% 46.1%",
+      "--border": "240 5.9% 90%",
+      "--input": "240 5.9% 90%",
+      "--ring": "var(--primary)",
+      "--toggle": "240 5% 84%"
     },
     dark: {
-      '--background': '0 0% 0%',
-      '--fg': '0 0% 98.04%',
-      '--overlay': '240 6% 6%',
-      '--overlay-fg': '0 0% 98%',
-      '--primary': '0 0% 98.04%',
-      '--primary-fg': '240 10% 3.92%',
-      '--secondary': '240 3.7% 15.9%',
-      '--secondary-fg': '0 0% 98%',
-      '--info': '84.91 100% 66.47%',
-      '--info-fg': '120 100% 13.14%',
-      '--tertiary': '240 10% 5.5%',
-      '--tertiary-fg': '240 5% 96%',
-      '--ring': 'var(--primary)',
-      '--muted': '240 3.7% 15.9%',
-      '--muted-fg': '240 5% 64.9%',
-      '--toggle': '240 5% 26%',
-      '--border': '240 7% 15%',
-      '--input': '240 3.7% 15.9%'
+      "--background": "0 0% 0%",
+      "--fg": "0 0% 98.04%",
+      "--overlay": "240 6% 6%",
+      "--overlay-fg": "0 0% 98%",
+      "--primary": "0 0% 98.04%",
+      "--primary-fg": "240 10% 3.92%",
+      "--secondary": "240 3.7% 15.9%",
+      "--secondary-fg": "0 0% 98%",
+      "--info": "84.91 100% 66.47%",
+      "--info-fg": "120 100% 13.14%",
+      "--tertiary": "240 10% 5.5%",
+      "--tertiary-fg": "240 5% 96%",
+      "--ring": "var(--primary)",
+      "--muted": "240 3.7% 15.9%",
+      "--muted-fg": "240 5% 64.9%",
+      "--toggle": "240 5% 26%",
+      "--border": "240 7% 15%",
+      "--input": "240 3.7% 15.9%"
     }
   },
   slate: {
     root: {
-      '--light': '210 40% 98.04%',
-      '--dark': '228.57 84% 4.9%',
-      '--background': '0 0% 100%',
-      '--fg': '228.57 84% 4.9%',
-      '--overlay': '210 40% 98.04%',
-      '--overlay-fg': '222.22 47.37% 11.18%',
-      '--primary': '228.57 84% 4.9%',
-      '--primary-fg': '210 40% 96.08%',
-      '--secondary': '210 40% 96.08%',
-      '--secondary-fg': '222.22 47.37% 11.18%',
-      '--tertiary': '210 40% 96.08%',
-      '--tertiary-fg': '222.22 47.37% 11.18%',
-      '--success': '152 69% 31%',
-      '--success-fg': '0 0% 100%',
-      '--muted': '222.22 47.37% 11.18%',
-      '--muted-fg': '215.38 16.32% 46.86%',
-      '--border': '214.29 31.82% 91.37%',
-      '--input': '212.73 26.83% 88%',
-      '--ring': 'var(--primary)',
-      '--toggle': '212.73 26.83% 83.92%'
+      "--light": "210 40% 98.04%",
+      "--dark": "228.57 84% 4.9%",
+      "--background": "0 0% 100%",
+      "--fg": "228.57 84% 4.9%",
+      "--overlay": "210 40% 98.04%",
+      "--overlay-fg": "222.22 47.37% 11.18%",
+      "--primary": "228.57 84% 4.9%",
+      "--primary-fg": "210 40% 96.08%",
+      "--secondary": "210 40% 96.08%",
+      "--secondary-fg": "222.22 47.37% 11.18%",
+      "--tertiary": "210 40% 96.08%",
+      "--tertiary-fg": "222.22 47.37% 11.18%",
+      "--success": "152 69% 31%",
+      "--success-fg": "0 0% 100%",
+      "--muted": "222.22 47.37% 11.18%",
+      "--muted-fg": "215.38 16.32% 46.86%",
+      "--border": "214.29 31.82% 91.37%",
+      "--input": "212.73 26.83% 88%",
+      "--ring": "var(--primary)",
+      "--toggle": "212.73 26.83% 83.92%"
     },
     dark: {
-      '--background': '228.57 84% 3%',
-      '--fg': '210 40% 98.04%',
-      '--overlay': '228.57 84% 4.5%',
-      '--overlay-fg': '210 40% 98.04%',
-      '--primary': '210 40% 96.08%',
-      '--primary-fg': '222.22 47.37% 11.18%',
-      '--secondary': '222.22 47.37% 11.18%',
-      '--secondary-fg': '210 40% 96.08%',
-      '--info': '84.91 100% 66.47%',
-      '--info-fg': '120 100% 13.14%',
-      '--tertiary': '228.57 84% 4.5%',
-      '--tertiary-fg': '210 40% 96.08%',
-      '--ring': 'var(--primary)',
-      '--muted': '217.24 32.58% 17.45%',
-      '--muted-fg': '215 20.22% 65.1%',
-      '--toggle': '215.29 25% 23%',
-      '--border': '222.22 47.37% 13%',
-      '--input': '217.24 32.58% 17.45%'
+      "--background": "228.57 84% 3%",
+      "--fg": "210 40% 98.04%",
+      "--overlay": "228.57 84% 4.5%",
+      "--overlay-fg": "210 40% 98.04%",
+      "--primary": "210 40% 96.08%",
+      "--primary-fg": "222.22 47.37% 11.18%",
+      "--secondary": "222.22 47.37% 11.18%",
+      "--secondary-fg": "210 40% 96.08%",
+      "--info": "84.91 100% 66.47%",
+      "--info-fg": "120 100% 13.14%",
+      "--tertiary": "228.57 84% 4.5%",
+      "--tertiary-fg": "210 40% 96.08%",
+      "--ring": "var(--primary)",
+      "--muted": "217.24 32.58% 17.45%",
+      "--muted-fg": "215 20.22% 65.1%",
+      "--toggle": "215.29 25% 23%",
+      "--border": "222.22 47.37% 13%",
+      "--input": "217.24 32.58% 17.45%"
     }
   },
   regent: {
     root: {
-      '--light': '210 15% 92.16%',
-      '--dark': '210 13.64% 8.63%',
-      '--background': '0 0% 100%',
-      '--fg': '210 13.64% 8.63%',
-      '--overlay': '210 15% 99%',
-      '--overlay-fg': '210 13.64% 8.63%',
-      '--primary': '210 13.64% 8.63%',
-      '--primary-fg': '210 15% 92.16%',
-      '--secondary': '210 15% 97%',
-      '--secondary-fg': '210 13.33% 17.65%',
-      '--tertiary': '210 15% 92.16%',
-      '--tertiary-fg': '210 13.33% 17.65%',
-      '--success': '152 69% 31%',
-      '--success-fg': '0 0% 100%',
-      '--muted': '208.24 12.59% 26.47%',
-      '--muted-fg': '210 14.29% 53.33%',
-      '--border': '211.76 14.29% 90%',
-      '--input': '211.76 14.29% 85%',
-      '--ring': 'var(--primary)',
-      '--toggle': '211.76 14.29% 80%'
+      "--light": "210 15% 92.16%",
+      "--dark": "210 13.64% 8.63%",
+      "--background": "0 0% 100%",
+      "--fg": "210 13.64% 8.63%",
+      "--overlay": "210 15% 99%",
+      "--overlay-fg": "210 13.64% 8.63%",
+      "--primary": "210 13.64% 8.63%",
+      "--primary-fg": "210 15% 92.16%",
+      "--secondary": "210 15% 97%",
+      "--secondary-fg": "210 13.33% 17.65%",
+      "--tertiary": "210 15% 92.16%",
+      "--tertiary-fg": "210 13.33% 17.65%",
+      "--success": "152 69% 31%",
+      "--success-fg": "0 0% 100%",
+      "--muted": "208.24 12.59% 26.47%",
+      "--muted-fg": "210 14.29% 53.33%",
+      "--border": "211.76 14.29% 90%",
+      "--input": "211.76 14.29% 85%",
+      "--ring": "var(--primary)",
+      "--toggle": "211.76 14.29% 80%"
     },
     dark: {
-      '--background': '210 13.64% 4%',
-      '--fg': '210 15% 92.16%',
-      '--overlay': '240 6% 6%',
-      '--overlay-fg': '0 0% 98%',
-      '--primary': '210 40% 96.08%',
-      '--primary-fg': '222.22 47.37% 11.18%',
-      '--secondary': '210 13.33% 10%',
-      '--secondary-fg': '210 15% 84.31%',
-      '--info': '84.91 100% 66.47%',
-      '--info-fg': '120 100% 13.14%',
-      '--tertiary': '210 13.64% 6%',
-      '--tertiary-fg': '210 15% 84.31%',
-      '--ring': 'var(--primary)',
-      '--muted': '217.24 32.58% 17.45%',
-      '--muted-fg': '215 20.22% 65.1%',
-      '--toggle': '208.24 12.59% 26.47%',
-      '--border': '210 13.33% 13%',
-      '--input': '210 13.33% 17.65%'
+      "--background": "210 13.64% 4%",
+      "--fg": "210 15% 92.16%",
+      "--overlay": "240 6% 6%",
+      "--overlay-fg": "0 0% 98%",
+      "--primary": "210 40% 96.08%",
+      "--primary-fg": "222.22 47.37% 11.18%",
+      "--secondary": "210 13.33% 10%",
+      "--secondary-fg": "210 15% 84.31%",
+      "--info": "84.91 100% 66.47%",
+      "--info-fg": "120 100% 13.14%",
+      "--tertiary": "210 13.64% 6%",
+      "--tertiary-fg": "210 15% 84.31%",
+      "--ring": "var(--primary)",
+      "--muted": "217.24 32.58% 17.45%",
+      "--muted-fg": "215 20.22% 65.1%",
+      "--toggle": "208.24 12.59% 26.47%",
+      "--border": "210 13.33% 13%",
+      "--input": "210 13.33% 17.65%"
     }
   }
 }
diff --git a/components/command-palette.tsx b/components/command-palette.tsx
index 36029cea..85e779d5 100644
--- a/components/command-palette.tsx
+++ b/components/command-palette.tsx
@@ -1,15 +1,15 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { docs } from '#site/content'
-import type { Doc, HierarchyNode } from '@/components/aside'
-import { createHierarchy } from '@/components/aside'
-import { goodTitle } from '@/resources/lib/utils'
-import { IconBrandJustd, IconColors, IconCube, IconHome, IconNotes } from 'justd-icons'
-import Link from 'next/link'
-import { usePathname, useRouter } from 'next/navigation'
-import { CommandMenu, useMediaQuery } from 'ui'
+import { docs } from "#site/content"
+import type { Doc, HierarchyNode } from "@/components/aside"
+import { createHierarchy } from "@/components/aside"
+import { goodTitle } from "@/resources/lib/utils"
+import { IconBrandJustd, IconColors, IconCube, IconHome, IconNotes } from "justd-icons"
+import Link from "next/link"
+import { usePathname, useRouter } from "next/navigation"
+import { CommandMenu, useMediaQuery } from "ui"
 
 export interface OpenCloseProps {
   openCmd: boolean
@@ -21,16 +21,16 @@ export function CommandPalette({ openCmd, setOpen }: OpenCloseProps) {
   const pathname = usePathname()
   React.useEffect(() => {
     const down = (e: KeyboardEvent) => {
-      if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
+      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
         e.preventDefault()
         // @ts-ignore
         setOpen((open: boolean) => !open)
       }
     }
 
-    document.addEventListener('keydown', down)
+    document.addEventListener("keydown", down)
 
-    return () => document.removeEventListener('keydown', down)
+    return () => document.removeEventListener("keydown", down)
   }, [pathname, setOpen])
 
   React.useEffect(() => {
@@ -39,11 +39,11 @@ export function CommandPalette({ openCmd, setOpen }: OpenCloseProps) {
     }
   }, [pathname, setOpen])
 
-  const isDesktop = useMediaQuery('(min-width: 1024px)')
+  const isDesktop = useMediaQuery("(min-width: 1024px)")
 
   const data = createHierarchy(docs)
   const filteredNodeEntries = Object.entries(data).sort(([a], [b]) => {
-    const order = ['prologue', 'getting-started', 'dark-mode', 'components']
+    const order = ["prologue", "getting-started", "dark-mode", "components"]
     return order.indexOf(a) - order.indexOf(b)
   })
 
@@ -83,12 +83,12 @@ export function CommandPalette({ openCmd, setOpen }: OpenCloseProps) {
           <React.Fragment key={key}>
             <CommandMenu.Section
               key={`${key}-section`}
-              heading={key !== 'components' ? goodTitle(key) : undefined}
+              heading={key !== "components" ? goodTitle(key) : undefined}
             >
               {Object.entries(value as HierarchyNode).map(([subKey, subValue]) =>
-                typeof subValue === 'object' && 'title' in subValue ? (
+                typeof subValue === "object" && "title" in subValue ? (
                   <CommandMenu.Item
-                    value={goodTitle(key + ' ' + (subValue as Doc).title)}
+                    value={goodTitle(key + " " + (subValue as Doc).title)}
                     className="pl-[2rem] flex justify-between items-center"
                     key={`${key}-${subKey}`}
                     onSelect={() => router.push(`/${subValue.slug}`)}
@@ -97,19 +97,19 @@ export function CommandPalette({ openCmd, setOpen }: OpenCloseProps) {
                     {subValue.status && (
                       <CommandMenu.Description
                         intent={
-                          subValue?.status === 'wip'
-                            ? 'warning'
-                            : subValue.status === 'beta'
-                              ? 'warning'
-                              : subValue.status === 'alpha'
-                                ? 'danger'
-                                : subValue.status === 'new'
-                                  ? 'primary'
-                                  : 'secondary'
+                          subValue?.status === "wip"
+                            ? "warning"
+                            : subValue.status === "beta"
+                              ? "warning"
+                              : subValue.status === "alpha"
+                                ? "danger"
+                                : subValue.status === "new"
+                                  ? "primary"
+                                  : "secondary"
                         }
                         className="uppercase text-[0.65rem]"
                       >
-                        {subValue?.status as Doc['status']}
+                        {subValue?.status as Doc["status"]}
                       </CommandMenu.Description>
                     )}
                   </CommandMenu.Item>
@@ -118,20 +118,20 @@ export function CommandPalette({ openCmd, setOpen }: OpenCloseProps) {
             </CommandMenu.Section>
 
             {Object.entries(value as HierarchyNode).map(([subKey, subValue]) =>
-              typeof subValue === 'object' && 'title' in subValue ? null : (
+              typeof subValue === "object" && "title" in subValue ? null : (
                 <CommandMenu.Section
                   key={`${key}-${subKey}-section`}
                   value={goodTitle(subKey)}
                   heading={goodTitle(subKey)}
                 >
                   {Object.entries(subValue as HierarchyNode).map(([childKey, childValue]) =>
-                    typeof childValue === 'object' && 'title' in childValue ? (
+                    typeof childValue === "object" && "title" in childValue ? (
                       <CommandMenu.Item
                         className="justify-between"
                         value={
-                          childValue.title === 'Text Field'
-                            ? 'Text Field Input'
-                            : goodTitle(subKey + ' ' + (childValue as Doc).title)
+                          childValue.title === "Text Field"
+                            ? "Text Field Input"
+                            : goodTitle(subKey + " " + (childValue as Doc).title)
                         }
                         key={`${key}-${subKey}-${childKey}`}
                         onSelect={() => router.push(`/${childValue.slug}`)}
@@ -140,19 +140,19 @@ export function CommandPalette({ openCmd, setOpen }: OpenCloseProps) {
                         {childValue.status && (
                           <CommandMenu.Description
                             intent={
-                              childValue?.status === 'wip'
-                                ? 'primary'
-                                : childValue.status === 'beta'
-                                  ? 'warning'
-                                  : childValue.status === 'alpha'
-                                    ? 'danger'
-                                    : childValue.status === 'new'
-                                      ? 'primary'
-                                      : 'secondary'
+                              childValue?.status === "wip"
+                                ? "primary"
+                                : childValue.status === "beta"
+                                  ? "warning"
+                                  : childValue.status === "alpha"
+                                    ? "danger"
+                                    : childValue.status === "new"
+                                      ? "primary"
+                                      : "secondary"
                             }
                             className="uppercase text-[0.65rem]"
                           >
-                            {childValue?.status as Doc['status']}
+                            {childValue?.status as Doc["status"]}
                           </CommandMenu.Description>
                         )}
                       </CommandMenu.Item>
diff --git a/components/doc-composed.tsx b/components/doc-composed.tsx
index 7a5ac850..b029eeca 100644
--- a/components/doc-composed.tsx
+++ b/components/doc-composed.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import { docs } from '#site/content'
-import { usePathname } from 'next/navigation'
-import { Card, Grid, Link } from 'ui'
+import { docs } from "#site/content"
+import { usePathname } from "next/navigation"
+import { Card, Grid, Link } from "ui"
 
 const simplifiedDocs = docs.map(({ title, slug, description }) => ({ title, slug, description }))
 
@@ -16,8 +16,8 @@ export function DocComposed({
   const pathname = usePathname()
   const name = getLatestOfString(pathname)
   const filteredComponents = simplifiedDocs.filter((component) => {
-    const lastSegment = component.slug.split('/').pop()
-    return components.includes(lastSegment || '')
+    const lastSegment = component.slug.split("/").pop()
+    return components.includes(lastSegment || "")
   })
   return (
     <div className="not-prose">
@@ -71,6 +71,6 @@ export function DocComposed({
 }
 
 const getLatestOfString = (path: string): string => {
-  const lastSegment = path.split('/').pop() || ''
-  return lastSegment.replace(/-/g, ' ').replace(/\b\w/g, (letter) => letter.toUpperCase())
+  const lastSegment = path.split("/").pop() || ""
+  return lastSegment.replace(/-/g, " ").replace(/\b\w/g, (letter) => letter.toUpperCase())
 }
diff --git a/components/doc-how.tsx b/components/doc-how.tsx
index ee3b9170..552cdb03 100644
--- a/components/doc-how.tsx
+++ b/components/doc-how.tsx
@@ -1,17 +1,17 @@
-'use client'
+"use client"
 
-import * as React from 'react'
+import * as React from "react"
 
-import { previews } from '@/components/docs/generated/previews'
-import jsonPreviews from '@/components/docs/generated/previews.json'
-import { Code } from '@/components/docs/rehype/code'
-import { cn } from '@/resources/lib/utils'
-import { Loader, Tabs } from 'ui'
+import { previews } from "@/components/docs/generated/previews"
+import jsonPreviews from "@/components/docs/generated/previews.json"
+import { Code } from "@/components/docs/rehype/code"
+import { cn } from "@/resources/lib/utils"
+import { Loader, Tabs } from "ui"
 
 interface HowProps extends React.HTMLAttributes<HTMLDivElement> {
   toUse: string
   minW72?: boolean
-  align?: 'center' | 'start' | 'end'
+  align?: "center" | "start" | "end"
   description?: string
   isCenter?: boolean
   className?: string
@@ -24,7 +24,7 @@ export function DocHow({
   className,
   minW72 = false,
   isCenter = true,
-  align = 'center',
+  align = "center",
   description,
   withNoPadding = false,
   ...props
@@ -32,11 +32,11 @@ export function DocHow({
   const Preview = previews[toUse] ? previews[toUse].component : null
 
   // @ts-ignore
-  let codeString = jsonPreviews[toUse].raw ?? ''
+  let codeString = jsonPreviews[toUse].raw ?? ""
 
-  codeString = codeString.replace(/function\s+\w+\s*\(/g, 'function App(')
+  codeString = codeString.replace(/function\s+\w+\s*\(/g, "function App(")
   return (
-    <div className={cn('not-prose relative my-4', className)} {...props}>
+    <div className={cn("not-prose relative my-4", className)} {...props}>
       <Tabs aria-label="Packages">
         <Tabs.List>
           <Tabs.Tab id="preview">Preview</Tabs.Tab>
@@ -45,10 +45,10 @@ export function DocHow({
         <Tabs.Panel className="w-full" id="preview">
           <div
             className={cn(
-              !withNoPadding && 'relative gap-4 rounded-lg border bg-overlay p-6',
+              !withNoPadding && "relative gap-4 rounded-lg border bg-overlay p-6",
               isCenter &&
-                'flex min-h-56 lg:min-h-80 items-center justify-center py-6 preview sm:py-24',
-              'overflow-x-auto'
+                "flex min-h-56 lg:min-h-80 items-center justify-center py-6 preview sm:py-24",
+              "overflow-x-auto"
             )}
           >
             <React.Suspense
@@ -59,7 +59,7 @@ export function DocHow({
                 </div>
               }
             >
-              <div className={cn(minW72 && 'min-w-72', 'not-prose', className)}>
+              <div className={cn(minW72 && "min-w-72", "not-prose", className)}>
                 <Preview />
               </div>
             </React.Suspense>
diff --git a/components/doc-note.tsx b/components/doc-note.tsx
index 4cf93989..f52730a1 100644
--- a/components/doc-note.tsx
+++ b/components/doc-note.tsx
@@ -1,21 +1,21 @@
-import { cn } from '@/resources/lib/utils'
-import type { TextProps } from 'react-aria-components'
-import { Note, type NoteProps } from 'ui'
+import { cn } from "@/resources/lib/utils"
+import type { TextProps } from "react-aria-components"
+import { Note, type NoteProps } from "ui"
 
 interface DocsNoteProps extends NoteProps {
-  children: TextProps['children']
+  children: TextProps["children"]
 }
 
-export function DocNote({ intent = 'primary', children }: DocsNoteProps) {
+export function DocNote({ intent = "primary", children }: DocsNoteProps) {
   return (
     <div className="not-prose">
       <Note
         className={cn(
-          '[&_span[data-line]]:font-medium',
-          intent === 'warning' &&
-            'dark:[&_span[data-line]>span]:!text-amber-400 [&_span[data-line]>span]:!text-amber-950 [&_span[data-line]>span]:bg-amber-400/10 text-[0.6rem] [&_span[data-line]>span]:inline [&_span[data-line]>span]:rounded-sm [&_span[data-line]>span]:!px-1 [&_span[data-line]>span]:py-0.5',
-          intent === 'primary' &&
-            'dark:[&_span[data-line]>span]:!text-primary-40 [&_span[data-line]>span]:!text-primary-600 [&_span[data-line]>span]:bg-primary-400/10 text-[0.6rem] [&_span[data-line]>span]:inline [&_span[data-line]>span]:rounded-sm [&_span[data-line]>span]:!px-1 [&_span[data-line]>span]:py-0.5'
+          "[&_span[data-line]]:font-medium",
+          intent === "warning" &&
+            "dark:[&_span[data-line]>span]:!text-amber-400 [&_span[data-line]>span]:!text-amber-950 [&_span[data-line]>span]:bg-amber-400/10 text-[0.6rem] [&_span[data-line]>span]:inline [&_span[data-line]>span]:rounded-sm [&_span[data-line]>span]:!px-1 [&_span[data-line]>span]:py-0.5",
+          intent === "primary" &&
+            "dark:[&_span[data-line]>span]:!text-primary-40 [&_span[data-line]>span]:!text-primary-600 [&_span[data-line]>span]:bg-primary-400/10 text-[0.6rem] [&_span[data-line]>span]:inline [&_span[data-line]>span]:rounded-sm [&_span[data-line]>span]:!px-1 [&_span[data-line]>span]:py-0.5"
         )}
         intent={intent}
       >
diff --git a/components/doc-refs.tsx b/components/doc-refs.tsx
index 0fa1f666..74ec3c2a 100644
--- a/components/doc-refs.tsx
+++ b/components/doc-refs.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import type { FC, SVGProps } from 'react'
+import type { FC, SVGProps } from "react"
 
-import { Logo } from '@/components/logo'
-import { extractAndFormat } from '@/resources/lib/utils'
+import { Logo } from "@/components/logo"
+import { extractAndFormat } from "@/resources/lib/utils"
 import {
   IconBell,
   IconBrandAdobe,
@@ -11,46 +11,46 @@ import {
   IconBrandGithub,
   IconBrandJustd,
   IconCommandFill
-} from 'justd-icons'
-import { Menu, MenuItem } from 'react-aria-components'
-import { buttonStyles, cn } from 'ui'
+} from "justd-icons"
+import { Menu, MenuItem } from "react-aria-components"
+import { buttonStyles, cn } from "ui"
 
 export function DocRefs({ references }: any) {
   const urls = references.map((url: string) => {
-    let title = ''
+    let title = ""
     let icon: FC<SVGProps<SVGSVGElement>>
 
     switch (true) {
-      case url.includes('react-spectrum'):
-        title = extractAndFormat(url) + ' Props'
+      case url.includes("react-spectrum"):
+        title = extractAndFormat(url) + " Props"
         icon = IconBrandAdobe
         break
-      case url.includes('paranoid'):
-        title = 'Paranoid'
+      case url.includes("paranoid"):
+        title = "Paranoid"
         icon = IconBrandJustd
         break
-      case url.includes('framer'):
-        title = 'Framer Motion'
+      case url.includes("framer"):
+        title = "Framer Motion"
         icon = IconBrandFramer
         break
-      case url.includes('docs/components'):
-        title = 'Internal'
+      case url.includes("docs/components"):
+        title = "Internal"
         icon = Logo
         break
-      case url.includes('sonner'):
-        title = 'Toaster'
+      case url.includes("sonner"):
+        title = "Toaster"
         icon = IconBell
         break
-      case url.includes('cmdk'):
-        title = 'Cmdk'
+      case url.includes("cmdk"):
+        title = "Cmdk"
         icon = IconCommandFill
         break
-      case url.includes('github'):
-        title = 'Github'
+      case url.includes("github"):
+        title = "Github"
         icon = IconBrandGithub
         break
-      case url.includes('embla-carousel'):
-        title = 'Embla Carousel'
+      case url.includes("embla-carousel"):
+        title = "Embla Carousel"
         icon = IconEmblaCarousel
         break
       default:
@@ -71,16 +71,16 @@ export function DocRefs({ references }: any) {
           target="_blank"
           className={cn(
             buttonStyles({
-              appearance: 'outline',
-              size: 'small',
-              className: 'focus:outline-0'
+              appearance: "outline",
+              size: "small",
+              className: "focus:outline-0"
             })
           )}
           id={item.url}
           href={item.url}
         >
           <item.icon />
-          {item.title === 'Props Reference' ? (
+          {item.title === "Props Reference" ? (
             <span>
               Props <span className="sm:inline hidden">Reference</span>
             </span>
diff --git a/components/docs/buttons/button-appearance-demo.tsx b/components/docs/buttons/button-appearance-demo.tsx
index 71ea47da..07c139a8 100644
--- a/components/docs/buttons/button-appearance-demo.tsx
+++ b/components/docs/buttons/button-appearance-demo.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import title from 'title'
-import { Button, buttonStyles } from 'ui'
+import title from "title"
+import { Button, buttonStyles } from "ui"
 
 type Appearance = keyof typeof buttonStyles.variants.appearance
 
diff --git a/components/docs/buttons/button-basic-demo.tsx b/components/docs/buttons/button-basic-demo.tsx
index c2694bf7..06ffefd4 100644
--- a/components/docs/buttons/button-basic-demo.tsx
+++ b/components/docs/buttons/button-basic-demo.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { Button } from 'ui'
+import { Button } from "ui"
 
 export default function ButtonBasicDemo() {
-  return <Button onPress={() => alert('Pressed')}>Label</Button>
+  return <Button onPress={() => alert("Pressed")}>Label</Button>
 }
diff --git a/components/docs/buttons/button-disabled-demo.tsx b/components/docs/buttons/button-disabled-demo.tsx
index 363a7def..4ee54cee 100644
--- a/components/docs/buttons/button-disabled-demo.tsx
+++ b/components/docs/buttons/button-disabled-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Button } from 'ui'
+import { Button } from "ui"
 
 export default function ButtonDisabledDemo() {
   return <Button isDisabled>Label</Button>
diff --git a/components/docs/buttons/button-intent-demo.tsx b/components/docs/buttons/button-intent-demo.tsx
index 9d667223..ad9e884c 100644
--- a/components/docs/buttons/button-intent-demo.tsx
+++ b/components/docs/buttons/button-intent-demo.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { IconBackspace } from 'justd-icons'
-import { Button, gridStyles } from 'ui'
+import { IconBackspace } from "justd-icons"
+import { Button, gridStyles } from "ui"
 
 export default function ButtonIntentDemo() {
   return (
diff --git a/components/docs/buttons/button-loader-demo.tsx b/components/docs/buttons/button-loader-demo.tsx
index 205362bb..1328eb71 100644
--- a/components/docs/buttons/button-loader-demo.tsx
+++ b/components/docs/buttons/button-loader-demo.tsx
@@ -1,40 +1,40 @@
-'use client'
+"use client"
 
-import { useState } from 'react'
+import { useState } from "react"
 
-import { IconCircleCheckFill, IconKey } from 'justd-icons'
-import { Button, Loader } from 'ui'
+import { IconCircleCheckFill, IconKey } from "justd-icons"
+import { Button, Loader } from "ui"
 
 export default function ButtonLoaderDemo() {
-  const [loading, setLoading] = useState<'idle' | 'loading' | 'success'>('idle')
+  const [loading, setLoading] = useState<"idle" | "loading" | "success">("idle")
 
   const pressHandler = () => {
-    setLoading('loading')
+    setLoading("loading")
 
-    setTimeout(() => setLoading('success'), 3000)
+    setTimeout(() => setLoading("success"), 3000)
 
-    setTimeout(() => setLoading('idle'), 6000)
+    setTimeout(() => setLoading("idle"), 6000)
   }
 
   return (
     <Button
-      isDisabled={loading === 'loading'}
+      isDisabled={loading === "loading"}
       className="w-52 justify-between"
       onPress={pressHandler}
       intent="primary"
     >
-      {loading === 'success' ? (
+      {loading === "success" ? (
         <IconCircleCheckFill />
-      ) : loading === 'loading' ? (
+      ) : loading === "loading" ? (
         <Loader variant="spin" />
       ) : (
         <IconKey />
       )}
-      {loading === 'loading'
-        ? 'Generating Key...'
-        : loading === 'success'
-          ? 'Key Generated!'
-          : 'Generate API Key'}
+      {loading === "loading"
+        ? "Generating Key..."
+        : loading === "success"
+          ? "Key Generated!"
+          : "Generate API Key"}
     </Button>
   )
 }
diff --git a/components/docs/buttons/button-only-icon-demo.tsx b/components/docs/buttons/button-only-icon-demo.tsx
index 9341c657..77f38ac6 100644
--- a/components/docs/buttons/button-only-icon-demo.tsx
+++ b/components/docs/buttons/button-only-icon-demo.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { IconBrandParsinta } from 'justd-icons'
-import { Button } from 'ui'
+import { IconBrandParsinta } from "justd-icons"
+import { Button } from "ui"
 
 export default function ButtonOnlyIconDemo() {
   return (
diff --git a/components/docs/buttons/button-shape-demo.tsx b/components/docs/buttons/button-shape-demo.tsx
index 7e39504e..aaac29c3 100644
--- a/components/docs/buttons/button-shape-demo.tsx
+++ b/components/docs/buttons/button-shape-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Button } from 'ui'
+import { Button } from "ui"
 
 export default function ButtonShapeDemo() {
   return <Button shape="circle">Label</Button>
diff --git a/components/docs/buttons/file-trigger-avatar-demo.tsx b/components/docs/buttons/file-trigger-avatar-demo.tsx
index c4009209..aaf3ada5 100644
--- a/components/docs/buttons/file-trigger-avatar-demo.tsx
+++ b/components/docs/buttons/file-trigger-avatar-demo.tsx
@@ -1,11 +1,11 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import type { DropEvent } from '@react-types/shared'
-import { isFileDropItem } from 'react-aria-components'
-import { twJoin } from 'tailwind-merge'
-import { Avatar, DropZone, FileTrigger } from 'ui'
+import type { DropEvent } from "@react-types/shared"
+import { isFileDropItem } from "react-aria-components"
+import { twJoin } from "tailwind-merge"
+import { Avatar, DropZone, FileTrigger } from "ui"
 
 export default function FileTriggerAvatarDemo() {
   const [droppedImage, setDroppedImage] = React.useState<string | undefined>(undefined)
@@ -13,7 +13,7 @@ export default function FileTriggerAvatarDemo() {
   const onDropHandler = async (e: DropEvent) => {
     const item = e.items
       .filter(isFileDropItem)
-      .find((item) => item.type === 'image/jpeg' || item.type === 'image/png')
+      .find((item) => item.type === "image/jpeg" || item.type === "image/png")
     if (item) {
       const file = await item.getFile()
       setDroppedImage(URL.createObjectURL(file))
@@ -34,10 +34,10 @@ export default function FileTriggerAvatarDemo() {
   return (
     <div className="flex items-center gap-2">
       <DropZone
-        getDropOperation={() => 'copy'}
+        getDropOperation={() => "copy"}
         onDrop={onDropHandler}
         className={twJoin(
-          '[&_[data-slot=avatar]]:bg-transparent [&_[data-slot=avatar]]:outline-none rounded-full p-0 overflow-hidden size-10'
+          "[&_[data-slot=avatar]]:bg-transparent [&_[data-slot=avatar]]:outline-none rounded-full p-0 overflow-hidden size-10"
         )}
       >
         {droppedImage ? (
@@ -50,7 +50,7 @@ export default function FileTriggerAvatarDemo() {
       <FileTrigger
         size="small"
         withIcon={false}
-        acceptedFileTypes={['image/png', 'image/jpeg']}
+        acceptedFileTypes={["image/png", "image/jpeg"]}
         onSelect={onSelectHandler}
       >
         Upload avatar
diff --git a/components/docs/buttons/file-trigger-camera-demo.tsx b/components/docs/buttons/file-trigger-camera-demo.tsx
index 6307b3af..ee6fc49c 100644
--- a/components/docs/buttons/file-trigger-camera-demo.tsx
+++ b/components/docs/buttons/file-trigger-camera-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { FileTrigger } from 'ui'
+import { FileTrigger } from "ui"
 
 export default function FileTriggerCameraDemo() {
   return <FileTrigger defaultCamera="environment">Open a camera</FileTrigger>
diff --git a/components/docs/buttons/file-trigger-controlled-demo.tsx b/components/docs/buttons/file-trigger-controlled-demo.tsx
index 17a6e16d..6ebcfa23 100644
--- a/components/docs/buttons/file-trigger-controlled-demo.tsx
+++ b/components/docs/buttons/file-trigger-controlled-demo.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { Description, FileTrigger } from 'ui'
+import { Description, FileTrigger } from "ui"
 
 export default function FileTriggerDemo() {
   const [file, setFile] = React.useState<string[] | null>(null)
diff --git a/components/docs/buttons/file-trigger-demo.tsx b/components/docs/buttons/file-trigger-demo.tsx
index 50d8760e..d045929b 100644
--- a/components/docs/buttons/file-trigger-demo.tsx
+++ b/components/docs/buttons/file-trigger-demo.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { FileTrigger } from 'ui'
+import { FileTrigger } from "ui"
 
 export default function FileTriggerDemo() {
   return <FileTrigger />
diff --git a/components/docs/buttons/file-trigger-disabled-demo.tsx b/components/docs/buttons/file-trigger-disabled-demo.tsx
index 2a53dfc5..065a535a 100644
--- a/components/docs/buttons/file-trigger-disabled-demo.tsx
+++ b/components/docs/buttons/file-trigger-disabled-demo.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { Description, FileTrigger } from 'ui'
+import { Description, FileTrigger } from "ui"
 
 export default function FileTriggerDemo() {
   const [file, setFile] = React.useState<string[] | null>(null)
diff --git a/components/docs/buttons/file-trigger-folder-demo.tsx b/components/docs/buttons/file-trigger-folder-demo.tsx
index ac6ede0b..e44aa643 100644
--- a/components/docs/buttons/file-trigger-folder-demo.tsx
+++ b/components/docs/buttons/file-trigger-folder-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { FileTrigger } from 'ui'
+import { FileTrigger } from "ui"
 
 export default function FileTriggerFolderDemo() {
   return <FileTrigger acceptDirectory />
diff --git a/components/docs/buttons/file-trigger-multiple-demo.tsx b/components/docs/buttons/file-trigger-multiple-demo.tsx
index a009100f..abf03eeb 100644
--- a/components/docs/buttons/file-trigger-multiple-demo.tsx
+++ b/components/docs/buttons/file-trigger-multiple-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { FileTrigger } from 'ui'
+import { FileTrigger } from "ui"
 
 export default function FileTriggerMultipleDemo() {
   return <FileTrigger allowsMultiple />
diff --git a/components/docs/buttons/toggle-appearance-demo.tsx b/components/docs/buttons/toggle-appearance-demo.tsx
index dc2da2a8..9541442e 100644
--- a/components/docs/buttons/toggle-appearance-demo.tsx
+++ b/components/docs/buttons/toggle-appearance-demo.tsx
@@ -1,15 +1,15 @@
-'use client'
+"use client"
 
-import { Toggle } from 'ui'
+import { Toggle } from "ui"
 
 export default function ToggleAppearanceDemo() {
   return (
     <div className="flex gap-2">
-      <Toggle>{({ isSelected }) => <>{isSelected ? 'Unpin' : 'Pin'}</>}</Toggle>
+      <Toggle>{({ isSelected }) => <>{isSelected ? "Unpin" : "Pin"}</>}</Toggle>
       <Toggle appearance="outline">
-        {({ isSelected }) => <>{isSelected ? 'Unpin' : 'Pin'}</>}
+        {({ isSelected }) => <>{isSelected ? "Unpin" : "Pin"}</>}
       </Toggle>
-      <Toggle appearance="solid">{({ isSelected }) => <>{isSelected ? 'Unpin' : 'Pin'}</>}</Toggle>
+      <Toggle appearance="solid">{({ isSelected }) => <>{isSelected ? "Unpin" : "Pin"}</>}</Toggle>
     </div>
   )
 }
diff --git a/components/docs/buttons/toggle-controlled-demo.tsx b/components/docs/buttons/toggle-controlled-demo.tsx
index ff463971..5f1eeacd 100644
--- a/components/docs/buttons/toggle-controlled-demo.tsx
+++ b/components/docs/buttons/toggle-controlled-demo.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { IconPin, IconUnpin } from 'justd-icons'
-import { Toggle } from 'ui'
+import { IconPin, IconUnpin } from "justd-icons"
+import { Toggle } from "ui"
 
 export default function ToggleControlledDemo() {
   const [isSelected, setSelected] = React.useState(false)
diff --git a/components/docs/buttons/toggle-disabled-demo.tsx b/components/docs/buttons/toggle-disabled-demo.tsx
index f963e4ea..295edda2 100644
--- a/components/docs/buttons/toggle-disabled-demo.tsx
+++ b/components/docs/buttons/toggle-disabled-demo.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { IconPin } from 'justd-icons'
-import { Toggle } from 'ui'
+import { IconPin } from "justd-icons"
+import { Toggle } from "ui"
 
 export default function ToggleDisabledDemo() {
   return (
diff --git a/components/docs/buttons/toggle-shape-demo.tsx b/components/docs/buttons/toggle-shape-demo.tsx
index 4c3c95fe..4cc2f2e7 100644
--- a/components/docs/buttons/toggle-shape-demo.tsx
+++ b/components/docs/buttons/toggle-shape-demo.tsx
@@ -1,11 +1,11 @@
-'use client'
+"use client"
 
-import { Toggle } from 'ui'
+import { Toggle } from "ui"
 
 export default function ToggleShapeDemo() {
   return (
     <Toggle appearance="outline" shape="circle">
-      {({ isSelected }) => <>{isSelected ? 'Unpin' : 'Pin'}</>}
+      {({ isSelected }) => <>{isSelected ? "Unpin" : "Pin"}</>}
     </Toggle>
   )
 }
diff --git a/components/docs/buttons/toggle-size-demo.tsx b/components/docs/buttons/toggle-size-demo.tsx
index ed3c2b54..df94f3e1 100644
--- a/components/docs/buttons/toggle-size-demo.tsx
+++ b/components/docs/buttons/toggle-size-demo.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client"
 
-import { IconAccessible, IconAccessibleFill } from 'justd-icons'
-import { Toggle } from 'ui'
+import { IconAccessible, IconAccessibleFill } from "justd-icons"
+import { Toggle } from "ui"
 
 export default function ToggleSizeDemo() {
   return (
@@ -10,13 +10,13 @@ export default function ToggleSizeDemo() {
         {({ isSelected }) => <>{isSelected ? <IconAccessibleFill /> : <IconAccessible />}</>}
       </Toggle>
       <Toggle appearance="outline" size="small">
-        {({ isSelected }) => <>{isSelected ? 'Unpin' : 'Pin'}</>}
+        {({ isSelected }) => <>{isSelected ? "Unpin" : "Pin"}</>}
       </Toggle>
       <Toggle appearance="outline" size="medium">
-        {({ isSelected }) => <>{isSelected ? 'Unpin' : 'Pin'}</>}
+        {({ isSelected }) => <>{isSelected ? "Unpin" : "Pin"}</>}
       </Toggle>
       <Toggle appearance="outline" size="large">
-        {({ isSelected }) => <>{isSelected ? 'Unpin' : 'Pin'}</>}
+        {({ isSelected }) => <>{isSelected ? "Unpin" : "Pin"}</>}
       </Toggle>
     </div>
   )
diff --git a/components/docs/controls/slider-demo.tsx b/components/docs/controls/slider-demo.tsx
index 46907d56..b8fc5730 100644
--- a/components/docs/controls/slider-demo.tsx
+++ b/components/docs/controls/slider-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Slider } from 'ui'
+import { Slider } from "ui"
 
 export default function SliderDemo() {
   return <Slider label="Volume" />
diff --git a/components/docs/controls/switch-demo.tsx b/components/docs/controls/switch-demo.tsx
index a55f69fa..db9d650e 100644
--- a/components/docs/controls/switch-demo.tsx
+++ b/components/docs/controls/switch-demo.tsx
@@ -1,12 +1,12 @@
-'use client'
+"use client"
 
-import { useTheme } from 'next-themes'
-import { Switch } from 'ui'
+import { useTheme } from "next-themes"
+import { Switch } from "ui"
 
 export default function SwitchDemo() {
   const { resolvedTheme, setTheme } = useTheme()
   return (
-    <Switch onChange={() => setTheme(resolvedTheme === 'light' ? 'dark' : 'light')}>
+    <Switch onChange={() => setTheme(resolvedTheme === "light" ? "dark" : "light")}>
       Switch Theme
     </Switch>
   )
diff --git a/components/docs/forms/checkbox-demo.tsx b/components/docs/forms/checkbox-demo.tsx
index 59e635f9..0579ae20 100644
--- a/components/docs/forms/checkbox-demo.tsx
+++ b/components/docs/forms/checkbox-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Checkbox } from 'ui'
+import { Checkbox } from "ui"
 
 export default function CheckboxDemo() {
   return <Checkbox>Enable notifications</Checkbox>
diff --git a/components/docs/forms/form-demo.tsx b/components/docs/forms/form-demo.tsx
index 93e104ee..5895a171 100644
--- a/components/docs/forms/form-demo.tsx
+++ b/components/docs/forms/form-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Button, Form, Heading, TextField } from 'ui'
+import { Button, Form, Heading, TextField } from "ui"
 
 export default function FormDemo() {
   return (
diff --git a/components/docs/forms/textarea-demo.tsx b/components/docs/forms/textarea-demo.tsx
index 14a3b143..bdc24daa 100644
--- a/components/docs/forms/textarea-demo.tsx
+++ b/components/docs/forms/textarea-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Textarea } from 'ui'
+import { Textarea } from "ui"
 
 export default function TextareaDemo() {
   return <Textarea label="Address" />
diff --git a/components/docs/outside/option-preview.tsx b/components/docs/outside/option-preview.tsx
index 690b9073..daa372d1 100644
--- a/components/docs/outside/option-preview.tsx
+++ b/components/docs/outside/option-preview.tsx
@@ -1,13 +1,13 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { cn } from 'ui'
+import { cn } from "ui"
 
 export function OptionPreview({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div
-      className={cn('absolute left-4 top-4 inline-flex min-w-32 flex-col gap-1', className)}
+      className={cn("absolute left-4 top-4 inline-flex min-w-32 flex-col gap-1", className)}
       {...props}
     />
   )
diff --git a/components/docs/pickers/combo-box-avatar-demo.tsx b/components/docs/pickers/combo-box-avatar-demo.tsx
index 8a551fd4..f36a425a 100644
--- a/components/docs/pickers/combo-box-avatar-demo.tsx
+++ b/components/docs/pickers/combo-box-avatar-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Avatar, ComboBox } from 'ui'
+import { Avatar, ComboBox } from "ui"
 
 export default function ComboBoxAvatarDemo() {
   return (
@@ -19,22 +19,22 @@ export default function ComboBoxAvatarDemo() {
 }
 
 const users = [
-  { id: 1, name: 'Barbara Kirlin Sr.', image_url: 'https://i.pravatar.cc/150?img=1' },
-  { id: 2, name: 'Rosemarie Koch', image_url: 'https://i.pravatar.cc/150?img=2' },
-  { id: 3, name: 'Mrs. Reva Heaney Jr.', image_url: 'https://i.pravatar.cc/150?img=3' },
-  { id: 4, name: 'Ms. Ettie Abshire DVM', image_url: 'https://i.pravatar.cc/150?img=4' },
-  { id: 5, name: 'Bria Ziemann', image_url: 'https://i.pravatar.cc/150?img=5' },
-  { id: 6, name: 'Heloise Borer Sr.', image_url: 'https://i.pravatar.cc/150?img=6' },
+  { id: 1, name: "Barbara Kirlin Sr.", image_url: "https://i.pravatar.cc/150?img=1" },
+  { id: 2, name: "Rosemarie Koch", image_url: "https://i.pravatar.cc/150?img=2" },
+  { id: 3, name: "Mrs. Reva Heaney Jr.", image_url: "https://i.pravatar.cc/150?img=3" },
+  { id: 4, name: "Ms. Ettie Abshire DVM", image_url: "https://i.pravatar.cc/150?img=4" },
+  { id: 5, name: "Bria Ziemann", image_url: "https://i.pravatar.cc/150?img=5" },
+  { id: 6, name: "Heloise Borer Sr.", image_url: "https://i.pravatar.cc/150?img=6" },
   {
     id: 7,
-    name: 'Miss Jacinthe Gerlach DVM',
-    image_url: 'https://i.pravatar.cc/150?img=7'
+    name: "Miss Jacinthe Gerlach DVM",
+    image_url: "https://i.pravatar.cc/150?img=7"
   },
   {
     id: 8,
-    name: 'Miss Stephania Schaefer Sr.',
-    image_url: 'https://i.pravatar.cc/150?img=8'
+    name: "Miss Stephania Schaefer Sr.",
+    image_url: "https://i.pravatar.cc/150?img=8"
   },
-  { id: 9, name: 'Kevon Hackett MD', image_url: 'https://i.pravatar.cc/150?img=9' },
-  { id: 10, name: 'Tom Ledner', image_url: 'https://i.pravatar.cc/150?img=10' }
+  { id: 9, name: "Kevon Hackett MD", image_url: "https://i.pravatar.cc/150?img=9" },
+  { id: 10, name: "Tom Ledner", image_url: "https://i.pravatar.cc/150?img=10" }
 ]
diff --git a/components/docs/pickers/combo-box-controlled-demo.tsx b/components/docs/pickers/combo-box-controlled-demo.tsx
index 14f088f4..b3cca1f1 100644
--- a/components/docs/pickers/combo-box-controlled-demo.tsx
+++ b/components/docs/pickers/combo-box-controlled-demo.tsx
@@ -1,23 +1,23 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { ComboBox, Description } from 'ui'
+import { ComboBox, Description } from "ui"
 
 const sports = [
-  { id: 1, name: 'Football' },
-  { id: 2, name: 'Basketball' },
-  { id: 3, name: 'Baseball' },
-  { id: 4, name: 'Soccer' },
-  { id: 5, name: 'Tennis' },
-  { id: 6, name: 'Cricket' },
-  { id: 7, name: 'Hockey' },
-  { id: 8, name: 'Rugby' },
-  { id: 9, name: 'Golf' }
+  { id: 1, name: "Football" },
+  { id: 2, name: "Basketball" },
+  { id: 3, name: "Baseball" },
+  { id: 4, name: "Soccer" },
+  { id: 5, name: "Tennis" },
+  { id: 6, name: "Cricket" },
+  { id: 7, name: "Hockey" },
+  { id: 8, name: "Rugby" },
+  { id: 9, name: "Golf" }
 ]
 
 export default function ComboBoxControlledDemo() {
-  const [sport, setSport] = React.useState('')
+  const [sport, setSport] = React.useState("")
   return (
     <>
       <ComboBox
diff --git a/components/docs/pickers/combo-box-demo.tsx b/components/docs/pickers/combo-box-demo.tsx
index ec4b705d..ab2a853b 100644
--- a/components/docs/pickers/combo-box-demo.tsx
+++ b/components/docs/pickers/combo-box-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { ComboBox } from 'ui'
+import { ComboBox } from "ui"
 
 export default function ComboBoxDemo() {
   return (
@@ -18,22 +18,22 @@ export default function ComboBoxDemo() {
 }
 
 const users = [
-  { id: 1, name: 'Barbara Kirlin Sr.', image_url: 'https://i.pravatar.cc/150?img=1' },
-  { id: 2, name: 'Rosemarie Koch', image_url: 'https://i.pravatar.cc/150?img=2' },
-  { id: 3, name: 'Mrs. Reva Heaney Jr.', image_url: 'https://i.pravatar.cc/150?img=3' },
-  { id: 4, name: 'Ms. Ettie Abshire DVM', image_url: 'https://i.pravatar.cc/150?img=4' },
-  { id: 5, name: 'Bria Ziemann', image_url: 'https://i.pravatar.cc/150?img=5' },
-  { id: 6, name: 'Heloise Borer Sr.', image_url: 'https://i.pravatar.cc/150?img=6' },
+  { id: 1, name: "Barbara Kirlin Sr.", image_url: "https://i.pravatar.cc/150?img=1" },
+  { id: 2, name: "Rosemarie Koch", image_url: "https://i.pravatar.cc/150?img=2" },
+  { id: 3, name: "Mrs. Reva Heaney Jr.", image_url: "https://i.pravatar.cc/150?img=3" },
+  { id: 4, name: "Ms. Ettie Abshire DVM", image_url: "https://i.pravatar.cc/150?img=4" },
+  { id: 5, name: "Bria Ziemann", image_url: "https://i.pravatar.cc/150?img=5" },
+  { id: 6, name: "Heloise Borer Sr.", image_url: "https://i.pravatar.cc/150?img=6" },
   {
     id: 7,
-    name: 'Miss Jacinthe Gerlach DVM',
-    image_url: 'https://i.pravatar.cc/150?img=7'
+    name: "Miss Jacinthe Gerlach DVM",
+    image_url: "https://i.pravatar.cc/150?img=7"
   },
   {
     id: 8,
-    name: 'Miss Stephania Schaefer Sr.',
-    image_url: 'https://i.pravatar.cc/150?img=8'
+    name: "Miss Stephania Schaefer Sr.",
+    image_url: "https://i.pravatar.cc/150?img=8"
   },
-  { id: 9, name: 'Kevon Hackett MD', image_url: 'https://i.pravatar.cc/150?img=9' },
-  { id: 10, name: 'Tom Ledner', image_url: 'https://i.pravatar.cc/150?img=10' }
+  { id: 9, name: "Kevon Hackett MD", image_url: "https://i.pravatar.cc/150?img=9" },
+  { id: 10, name: "Tom Ledner", image_url: "https://i.pravatar.cc/150?img=10" }
 ]
diff --git a/components/docs/pickers/combo-box-disabled-demo.tsx b/components/docs/pickers/combo-box-disabled-demo.tsx
index 05a96e43..9fb7cd93 100644
--- a/components/docs/pickers/combo-box-disabled-demo.tsx
+++ b/components/docs/pickers/combo-box-disabled-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Avatar, ComboBox } from 'ui'
+import { Avatar, ComboBox } from "ui"
 
 export default function ComboBoxDisabledDemo() {
   return (
@@ -19,6 +19,6 @@ export default function ComboBoxDisabledDemo() {
 }
 
 const users = [
-  { id: 1, name: 'Barbara Kirlin Sr.', image_url: 'https://i.pravatar.cc/150?img=1' }
+  { id: 1, name: "Barbara Kirlin Sr.", image_url: "https://i.pravatar.cc/150?img=1" }
   //...
 ]
diff --git a/components/docs/pickers/combo-box-invalid-demo.tsx b/components/docs/pickers/combo-box-invalid-demo.tsx
index 49076ff1..660b0d09 100644
--- a/components/docs/pickers/combo-box-invalid-demo.tsx
+++ b/components/docs/pickers/combo-box-invalid-demo.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import { Avatar, ComboBox } from 'ui'
+import { Avatar, ComboBox } from "ui"
 
 const users = [
-  { id: 1, name: 'Barbara Kirlin Sr.', image_url: 'https://i.pravatar.cc/150?img=1' }
+  { id: 1, name: "Barbara Kirlin Sr.", image_url: "https://i.pravatar.cc/150?img=1" }
   //...
 ]
 export default function ComboBoxInvalidDemo() {
diff --git a/components/docs/pickers/combo-box-readonly-demo.tsx b/components/docs/pickers/combo-box-readonly-demo.tsx
index 631c66f7..64d5f0bc 100644
--- a/components/docs/pickers/combo-box-readonly-demo.tsx
+++ b/components/docs/pickers/combo-box-readonly-demo.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import { Avatar, ComboBox } from 'ui'
+import { Avatar, ComboBox } from "ui"
 
 const users = [
-  { id: 1, name: 'Barbara Kirlin Sr.', image_url: 'https://i.pravatar.cc/150?img=1' }
+  { id: 1, name: "Barbara Kirlin Sr.", image_url: "https://i.pravatar.cc/150?img=1" }
   //...
 ]
 export default function ComboBoxReadonlyDemo() {
diff --git a/components/docs/pickers/combo-box-section-demo.tsx b/components/docs/pickers/combo-box-section-demo.tsx
index 53ff7e84..ca34f96e 100644
--- a/components/docs/pickers/combo-box-section-demo.tsx
+++ b/components/docs/pickers/combo-box-section-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { ComboBox } from 'ui'
+import { ComboBox } from "ui"
 
 export default function ComboBoxSectionDemo() {
   return (
@@ -20,71 +20,71 @@ export default function ComboBoxSectionDemo() {
 const movies = [
   {
     id: 1,
-    title: 'Inception',
+    title: "Inception",
     genres: [
       {
         id: 101,
-        name: 'Sci-Fi'
+        name: "Sci-Fi"
       },
       {
         id: 102,
-        name: 'Thriller'
+        name: "Thriller"
       }
     ]
   },
   {
     id: 2,
-    title: 'Titanic',
+    title: "Titanic",
     genres: [
       {
         id: 201,
-        name: 'Romance'
+        name: "Romance"
       },
       {
         id: 202,
-        name: 'Drama'
+        name: "Drama"
       }
     ]
   },
   {
     id: 3,
-    title: 'The Matrix',
+    title: "The Matrix",
     genres: [
       {
         id: 301,
-        name: 'Action'
+        name: "Action"
       },
       {
         id: 302,
-        name: 'Sci-Fi'
+        name: "Sci-Fi"
       }
     ]
   },
   {
     id: 4,
-    title: 'Gladiator',
+    title: "Gladiator",
     genres: [
       {
         id: 401,
-        name: 'Action'
+        name: "Action"
       },
       {
         id: 402,
-        name: 'Drama'
+        name: "Drama"
       }
     ]
   },
   {
     id: 5,
-    title: 'Casablanca',
+    title: "Casablanca",
     genres: [
       {
         id: 501,
-        name: 'Romance'
+        name: "Romance"
       },
       {
         id: 502,
-        name: 'Drama'
+        name: "Drama"
       }
     ]
   }
diff --git a/components/docs/pickers/combo-box-validation-demo.tsx b/components/docs/pickers/combo-box-validation-demo.tsx
index c56de1dd..6e19b2d8 100644
--- a/components/docs/pickers/combo-box-validation-demo.tsx
+++ b/components/docs/pickers/combo-box-validation-demo.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import { Avatar, Button, ComboBox, Form } from 'ui'
+import { Avatar, Button, ComboBox, Form } from "ui"
 
 const users = [
-  { id: 1, name: 'Barbara Kirlin Sr.', image_url: 'https://i.pravatar.cc/150?img=1' }
+  { id: 1, name: "Barbara Kirlin Sr.", image_url: "https://i.pravatar.cc/150?img=1" }
   //...
 ]
 export default function ComboBoxValidationDemo() {
diff --git a/components/docs/pickers/multiple-select-controlled-demo.tsx b/components/docs/pickers/multiple-select-controlled-demo.tsx
index 6d6facac..4a4fc280 100644
--- a/components/docs/pickers/multiple-select-controlled-demo.tsx
+++ b/components/docs/pickers/multiple-select-controlled-demo.tsx
@@ -1,17 +1,17 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { useListData } from 'react-stately'
-import type { SelectedKey } from 'ui'
-import { Description, MultipleSelect, Tag } from 'ui'
+import { useListData } from "react-stately"
+import type { SelectedKey } from "ui"
+import { Description, MultipleSelect, Tag } from "ui"
 
 const tags = [
-  { id: 1, name: 'Travel' },
-  { id: 2, name: 'Food' },
-  { id: 3, name: 'Fashion' },
-  { id: 4, name: 'Music' },
-  { id: 5, name: 'Photography' }
+  { id: 1, name: "Travel" },
+  { id: 2, name: "Food" },
+  { id: 3, name: "Fashion" },
+  { id: 4, name: "Music" },
+  { id: 5, name: "Photography" }
 ]
 
 export default function MultipleSelectControlledDemo() {
@@ -23,8 +23,8 @@ export default function MultipleSelectControlledDemo() {
     <>
       <MultipleSelect
         className="max-w-xs"
-        onItemInserted={(key) => console.log('on item inserted', key)}
-        onItemCleared={(key) => console.log('on item cleared', key)}
+        onItemInserted={(key) => console.log("on item inserted", key)}
+        onItemCleared={(key) => console.log("on item cleared", key)}
         label="Select tags"
         selectedItems={selectedItems}
         items={tags}
@@ -40,8 +40,8 @@ export default function MultipleSelectControlledDemo() {
       </MultipleSelect>
       {selectedItems.items.length > 0 && (
         <Description className="mt-2 max-w-xs block [&>strong]:text-fg text-muted-fg">
-          You have selected:{' '}
-          <strong>{selectedItems.items.map((item) => item.name).join(', ')}</strong>
+          You have selected:{" "}
+          <strong>{selectedItems.items.map((item) => item.name).join(", ")}</strong>
         </Description>
       )}
     </>
diff --git a/components/docs/pickers/multiple-select-demo.tsx b/components/docs/pickers/multiple-select-demo.tsx
index c1996782..47bae3c2 100644
--- a/components/docs/pickers/multiple-select-demo.tsx
+++ b/components/docs/pickers/multiple-select-demo.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import { useListData } from 'react-stately'
-import type { SelectedKey } from 'ui'
-import { MultipleSelect, Tag } from 'ui'
+import { useListData } from "react-stately"
+import type { SelectedKey } from "ui"
+import { MultipleSelect, Tag } from "ui"
 
 export default function MultipleSelectDemo() {
   const selectedItems = useListData<SelectedKey>({
@@ -24,24 +24,24 @@ export default function MultipleSelectDemo() {
 }
 
 const fruits: SelectedKey[] = [
-  { id: 1, name: 'Apple' },
-  { id: 2, name: 'Banana' },
-  { id: 3, name: 'Cherry' },
-  { id: 4, name: 'Date' },
-  { id: 5, name: 'Elderberry' },
-  { id: 6, name: 'Fig' },
-  { id: 7, name: 'Grape' },
-  { id: 8, name: 'Honeydew' },
-  { id: 9, name: 'Kiwi' },
-  { id: 10, name: 'Lemon' },
-  { id: 11, name: 'Mango' },
-  { id: 12, name: 'Nectarine' },
-  { id: 13, name: 'Orange' },
-  { id: 14, name: 'Papaya' },
-  { id: 15, name: 'Quince' },
-  { id: 16, name: 'Raspberry' },
-  { id: 17, name: 'Strawberry' },
-  { id: 18, name: 'Tangerine' },
-  { id: 19, name: 'Ugli Fruit' },
-  { id: 20, name: 'Watermelon' }
+  { id: 1, name: "Apple" },
+  { id: 2, name: "Banana" },
+  { id: 3, name: "Cherry" },
+  { id: 4, name: "Date" },
+  { id: 5, name: "Elderberry" },
+  { id: 6, name: "Fig" },
+  { id: 7, name: "Grape" },
+  { id: 8, name: "Honeydew" },
+  { id: 9, name: "Kiwi" },
+  { id: 10, name: "Lemon" },
+  { id: 11, name: "Mango" },
+  { id: 12, name: "Nectarine" },
+  { id: 13, name: "Orange" },
+  { id: 14, name: "Papaya" },
+  { id: 15, name: "Quince" },
+  { id: 16, name: "Raspberry" },
+  { id: 17, name: "Strawberry" },
+  { id: 18, name: "Tangerine" },
+  { id: 19, name: "Ugli Fruit" },
+  { id: 20, name: "Watermelon" }
 ]
diff --git a/components/docs/pickers/multiple-select-disabled-demo.tsx b/components/docs/pickers/multiple-select-disabled-demo.tsx
index c8f63ae6..bdab15f3 100644
--- a/components/docs/pickers/multiple-select-disabled-demo.tsx
+++ b/components/docs/pickers/multiple-select-disabled-demo.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import { useListData } from 'react-stately'
-import type { SelectedKey } from 'ui'
-import { MultipleSelect, Tag } from 'ui'
+import { useListData } from "react-stately"
+import type { SelectedKey } from "ui"
+import { MultipleSelect, Tag } from "ui"
 
 export default function MultipleSelectDisabledDemo() {
   const selectedItems = useListData<SelectedKey>({
@@ -24,4 +24,4 @@ export default function MultipleSelectDisabledDemo() {
   )
 }
 
-const fruits: SelectedKey[] = [{ id: 1, name: 'Apple' }]
+const fruits: SelectedKey[] = [{ id: 1, name: "Apple" }]
diff --git a/components/docs/pickers/multiple-select-intent-demo.tsx b/components/docs/pickers/multiple-select-intent-demo.tsx
index f94a6afd..103bfbbc 100644
--- a/components/docs/pickers/multiple-select-intent-demo.tsx
+++ b/components/docs/pickers/multiple-select-intent-demo.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import { useListData } from 'react-stately'
-import type { SelectedKey } from 'ui'
-import { MultipleSelect, Tag } from 'ui'
+import { useListData } from "react-stately"
+import type { SelectedKey } from "ui"
+import { MultipleSelect, Tag } from "ui"
 
 export default function MultipleSelectIntentDemo() {
   const selectedItems = useListData<SelectedKey>({
@@ -25,24 +25,24 @@ export default function MultipleSelectIntentDemo() {
 }
 
 const fruits: SelectedKey[] = [
-  { id: 1, name: 'Apple' },
-  { id: 2, name: 'Banana' },
-  { id: 3, name: 'Cherry' },
-  { id: 4, name: 'Date' },
-  { id: 5, name: 'Elderberry' },
-  { id: 6, name: 'Fig' },
-  { id: 7, name: 'Grape' },
-  { id: 8, name: 'Honeydew' },
-  { id: 9, name: 'Kiwi' },
-  { id: 10, name: 'Lemon' },
-  { id: 11, name: 'Mango' },
-  { id: 12, name: 'Nectarine' },
-  { id: 13, name: 'Orange' },
-  { id: 14, name: 'Papaya' },
-  { id: 15, name: 'Quince' },
-  { id: 16, name: 'Raspberry' },
-  { id: 17, name: 'Strawberry' },
-  { id: 18, name: 'Tangerine' },
-  { id: 19, name: 'Ugli Fruit' },
-  { id: 20, name: 'Watermelon' }
+  { id: 1, name: "Apple" },
+  { id: 2, name: "Banana" },
+  { id: 3, name: "Cherry" },
+  { id: 4, name: "Date" },
+  { id: 5, name: "Elderberry" },
+  { id: 6, name: "Fig" },
+  { id: 7, name: "Grape" },
+  { id: 8, name: "Honeydew" },
+  { id: 9, name: "Kiwi" },
+  { id: 10, name: "Lemon" },
+  { id: 11, name: "Mango" },
+  { id: 12, name: "Nectarine" },
+  { id: 13, name: "Orange" },
+  { id: 14, name: "Papaya" },
+  { id: 15, name: "Quince" },
+  { id: 16, name: "Raspberry" },
+  { id: 17, name: "Strawberry" },
+  { id: 18, name: "Tangerine" },
+  { id: 19, name: "Ugli Fruit" },
+  { id: 20, name: "Watermelon" }
 ]
diff --git a/components/docs/pickers/multiple-select-min-max-demo.tsx b/components/docs/pickers/multiple-select-min-max-demo.tsx
index b4746340..4b32b110 100644
--- a/components/docs/pickers/multiple-select-min-max-demo.tsx
+++ b/components/docs/pickers/multiple-select-min-max-demo.tsx
@@ -1,20 +1,20 @@
-'use client'
+"use client"
 
-import { useListData } from 'react-stately'
-import type { SelectedKey } from 'ui'
-import { MultipleSelect, Tag } from 'ui'
+import { useListData } from "react-stately"
+import type { SelectedKey } from "ui"
+import { MultipleSelect, Tag } from "ui"
 
 const tags = [
-  { id: 1, name: 'Cooking' },
-  { id: 2, name: 'Gardening' },
-  { id: 3, name: 'Meditation' },
-  { id: 4, name: 'Parenting' },
-  { id: 5, name: 'DIY Projects' },
-  { id: 6, name: 'Mindfulness' },
-  { id: 7, name: 'Travel Tips' },
-  { id: 8, name: 'Pet Care' },
-  { id: 9, name: 'Home Decor' },
-  { id: 10, name: 'Sustainable Living' }
+  { id: 1, name: "Cooking" },
+  { id: 2, name: "Gardening" },
+  { id: 3, name: "Meditation" },
+  { id: 4, name: "Parenting" },
+  { id: 5, name: "DIY Projects" },
+  { id: 6, name: "Mindfulness" },
+  { id: 7, name: "Travel Tips" },
+  { id: 8, name: "Pet Care" },
+  { id: 9, name: "Home Decor" },
+  { id: 10, name: "Sustainable Living" }
 ]
 
 export default function MultipleSelectMinMaxDemo() {
diff --git a/components/docs/pickers/multiple-select-shape-demo.tsx b/components/docs/pickers/multiple-select-shape-demo.tsx
index 592adbc1..969dba5b 100644
--- a/components/docs/pickers/multiple-select-shape-demo.tsx
+++ b/components/docs/pickers/multiple-select-shape-demo.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import { useListData } from 'react-stately'
-import type { SelectedKey } from 'ui'
-import { MultipleSelect, Tag } from 'ui'
+import { useListData } from "react-stately"
+import type { SelectedKey } from "ui"
+import { MultipleSelect, Tag } from "ui"
 
 export default function MultipleSelectShapeDemo() {
   const selectedItems = useListData<SelectedKey>({
@@ -25,24 +25,24 @@ export default function MultipleSelectShapeDemo() {
 }
 
 const fruits: SelectedKey[] = [
-  { id: 1, name: 'Apple' },
-  { id: 2, name: 'Banana' },
-  { id: 3, name: 'Cherry' },
-  { id: 4, name: 'Date' },
-  { id: 5, name: 'Elderberry' },
-  { id: 6, name: 'Fig' },
-  { id: 7, name: 'Grape' },
-  { id: 8, name: 'Honeydew' },
-  { id: 9, name: 'Kiwi' },
-  { id: 10, name: 'Lemon' },
-  { id: 11, name: 'Mango' },
-  { id: 12, name: 'Nectarine' },
-  { id: 13, name: 'Orange' },
-  { id: 14, name: 'Papaya' },
-  { id: 15, name: 'Quince' },
-  { id: 16, name: 'Raspberry' },
-  { id: 17, name: 'Strawberry' },
-  { id: 18, name: 'Tangerine' },
-  { id: 19, name: 'Ugli Fruit' },
-  { id: 20, name: 'Watermelon' }
+  { id: 1, name: "Apple" },
+  { id: 2, name: "Banana" },
+  { id: 3, name: "Cherry" },
+  { id: 4, name: "Date" },
+  { id: 5, name: "Elderberry" },
+  { id: 6, name: "Fig" },
+  { id: 7, name: "Grape" },
+  { id: 8, name: "Honeydew" },
+  { id: 9, name: "Kiwi" },
+  { id: 10, name: "Lemon" },
+  { id: 11, name: "Mango" },
+  { id: 12, name: "Nectarine" },
+  { id: 13, name: "Orange" },
+  { id: 14, name: "Papaya" },
+  { id: 15, name: "Quince" },
+  { id: 16, name: "Raspberry" },
+  { id: 17, name: "Strawberry" },
+  { id: 18, name: "Tangerine" },
+  { id: 19, name: "Ugli Fruit" },
+  { id: 20, name: "Watermelon" }
 ]
diff --git a/components/docs/pickers/select-controlled-demo.tsx b/components/docs/pickers/select-controlled-demo.tsx
index ee4377e6..98d49883 100644
--- a/components/docs/pickers/select-controlled-demo.tsx
+++ b/components/docs/pickers/select-controlled-demo.tsx
@@ -1,20 +1,20 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import type { Key } from 'react-aria-components'
-import { Description, Select } from 'ui'
+import type { Key } from "react-aria-components"
+import { Description, Select } from "ui"
 
 export const movies = [
-  { id: 1, title: 'Inception' },
-  { id: 2, title: 'The Dark Knight' },
-  { id: 3, title: 'Interstellar' },
-  { id: 4, title: 'The Matrix' },
-  { id: 5, title: 'Pulp Fiction' }
+  { id: 1, title: "Inception" },
+  { id: 2, title: "The Dark Knight" },
+  { id: 3, title: "Interstellar" },
+  { id: 4, title: "The Matrix" },
+  { id: 5, title: "Pulp Fiction" }
 ]
 
 export default function SelectControlledDemo() {
-  const [movie, setMovie] = React.useState<Key>('')
+  const [movie, setMovie] = React.useState<Key>("")
   return (
     <>
       <Select
diff --git a/components/docs/pickers/select-demo.tsx b/components/docs/pickers/select-demo.tsx
index 4a7d85b6..8aff367d 100644
--- a/components/docs/pickers/select-demo.tsx
+++ b/components/docs/pickers/select-demo.tsx
@@ -1,13 +1,13 @@
-'use client'
+"use client"
 
-import { Select } from 'ui'
+import { Select } from "ui"
 
 export const software = [
-  { id: 1, name: 'Adobe Photoshop' },
-  { id: 2, name: 'Sketch' },
-  { id: 3, name: 'Figma' },
-  { id: 4, name: 'Adobe XD' },
-  { id: 5, name: 'InVision' }
+  { id: 1, name: "Adobe Photoshop" },
+  { id: 2, name: "Sketch" },
+  { id: 3, name: "Figma" },
+  { id: 4, name: "Adobe XD" },
+  { id: 5, name: "InVision" }
 ]
 export default function SelectDemo() {
   return (
diff --git a/components/docs/pickers/select-disabled-demo.tsx b/components/docs/pickers/select-disabled-demo.tsx
index c1879345..33a30023 100644
--- a/components/docs/pickers/select-disabled-demo.tsx
+++ b/components/docs/pickers/select-disabled-demo.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import { Select } from 'ui'
+import { Select } from "ui"
 
 const software = [
-  { id: 1, name: 'Adobe Photoshop' }
+  { id: 1, name: "Adobe Photoshop" }
   //...
 ]
 
diff --git a/components/docs/pickers/select-item-details-demo.tsx b/components/docs/pickers/select-item-details-demo.tsx
index b85d9900..65e9a28c 100644
--- a/components/docs/pickers/select-item-details-demo.tsx
+++ b/components/docs/pickers/select-item-details-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Select } from 'ui'
+import { Select } from "ui"
 
 export default function SelectItemDetailsDemo() {
   return (
@@ -18,9 +18,9 @@ export default function SelectItemDetailsDemo() {
 }
 
 const roles = [
-  { id: 1, name: 'Admin', description: 'Has full access to all resources' },
-  { id: 2, name: 'Editor', description: 'Can edit content but has limited access to settings' },
-  { id: 3, name: 'Viewer', description: 'Can view content but cannot make changes' },
-  { id: 4, name: 'Contributor', description: 'Can contribute content for review' },
-  { id: 5, name: 'Guest', description: 'Limited access, mostly for viewing purposes' }
+  { id: 1, name: "Admin", description: "Has full access to all resources" },
+  { id: 2, name: "Editor", description: "Can edit content but has limited access to settings" },
+  { id: 3, name: "Viewer", description: "Can view content but cannot make changes" },
+  { id: 4, name: "Contributor", description: "Can contribute content for review" },
+  { id: 5, name: "Guest", description: "Limited access, mostly for viewing purposes" }
 ]
diff --git a/components/docs/pickers/select-section-demo.tsx b/components/docs/pickers/select-section-demo.tsx
index 70ec427f..73332415 100644
--- a/components/docs/pickers/select-section-demo.tsx
+++ b/components/docs/pickers/select-section-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Select } from 'ui'
+import { Select } from "ui"
 
 export default function SelectSectionDemo() {
   return (
@@ -20,147 +20,147 @@ export default function SelectSectionDemo() {
 const countries = [
   {
     id: 1,
-    name: 'Egypt',
+    name: "Egypt",
     cities: [
       {
         id: 101,
-        name: 'Cairo'
+        name: "Cairo"
       },
       {
         id: 102,
-        name: 'Alexandria'
+        name: "Alexandria"
       },
       {
         id: 103,
-        name: 'Giza'
+        name: "Giza"
       },
       {
         id: 104,
-        name: 'Luxor'
+        name: "Luxor"
       }
     ]
   },
   {
     id: 2,
-    name: 'Indonesia',
+    name: "Indonesia",
     cities: [
       {
         id: 201,
-        name: 'Jakarta'
+        name: "Jakarta"
       },
       {
         id: 202,
-        name: 'Bali'
+        name: "Bali"
       },
       {
         id: 203,
-        name: 'Surabaya'
+        name: "Surabaya"
       },
       {
         id: 204,
-        name: 'Bandung'
+        name: "Bandung"
       },
       {
         id: 205,
-        name: 'Medan'
+        name: "Medan"
       }
     ]
   },
   {
     id: 3,
-    name: 'United States',
+    name: "United States",
     cities: [
       {
         id: 301,
-        name: 'New York City'
+        name: "New York City"
       },
       {
         id: 302,
-        name: 'Los Angeles'
+        name: "Los Angeles"
       },
       {
         id: 303,
-        name: 'Chicago'
+        name: "Chicago"
       },
       {
         id: 304,
-        name: 'Houston'
+        name: "Houston"
       }
     ]
   },
   {
     id: 4,
-    name: 'Canada',
+    name: "Canada",
     cities: [
       {
         id: 401,
-        name: 'Toronto'
+        name: "Toronto"
       },
       {
         id: 402,
-        name: 'Vancouver'
+        name: "Vancouver"
       },
       {
         id: 403,
-        name: 'Montreal'
+        name: "Montreal"
       }
     ]
   },
   {
     id: 5,
-    name: 'Australia',
+    name: "Australia",
     cities: [
       {
         id: 501,
-        name: 'Sydney'
+        name: "Sydney"
       },
       {
         id: 502,
-        name: 'Melbourne'
+        name: "Melbourne"
       },
       {
         id: 503,
-        name: 'Brisbane'
+        name: "Brisbane"
       }
     ]
   },
   {
     id: 6,
-    name: 'Germany',
+    name: "Germany",
     cities: [
       {
         id: 601,
-        name: 'Berlin'
+        name: "Berlin"
       },
       {
         id: 602,
-        name: 'Munich'
+        name: "Munich"
       },
       {
         id: 603,
-        name: 'Frankfurt'
+        name: "Frankfurt"
       },
       {
         id: 604,
-        name: 'Hamburg'
+        name: "Hamburg"
       }
     ]
   },
   {
     id: 7,
-    name: 'Japan',
+    name: "Japan",
     cities: [
       {
         id: 701,
-        name: 'Tokyo'
+        name: "Tokyo"
       },
       {
         id: 702,
-        name: 'Osaka'
+        name: "Osaka"
       },
       {
         id: 703,
-        name: 'Kyoto'
+        name: "Kyoto"
       }
     ]
   }
diff --git a/components/docs/pickers/select-validation-demo.tsx b/components/docs/pickers/select-validation-demo.tsx
index d820de99..d65968ec 100644
--- a/components/docs/pickers/select-validation-demo.tsx
+++ b/components/docs/pickers/select-validation-demo.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import { Button, Form, Select } from 'ui'
+import { Button, Form, Select } from "ui"
 
 const software = [
-  { id: 1, name: 'Adobe Photoshop' }
+  { id: 1, name: "Adobe Photoshop" }
   //...
 ]
 
diff --git a/components/docs/surfaces/grid-collections-demo.tsx b/components/docs/surfaces/grid-collections-demo.tsx
index 292c5029..090ede66 100644
--- a/components/docs/surfaces/grid-collections-demo.tsx
+++ b/components/docs/surfaces/grid-collections-demo.tsx
@@ -1,10 +1,10 @@
-'use client'
+"use client"
 
-import { Card, Grid } from 'ui'
+import { Card, Grid } from "ui"
 
 export default function GridCollectionsDemo() {
   return (
-    <Grid aria-label="List articles" columns={{ initial: 1, sm: 2, '2xl': 3 }} gap={2}>
+    <Grid aria-label="List articles" columns={{ initial: 1, sm: 2, "2xl": 3 }} gap={2}>
       <Grid.Collection items={articles}>
         {(item) => (
           <Grid.Item>
@@ -24,37 +24,37 @@ export default function GridCollectionsDemo() {
 const articles = [
   {
     id: 1,
-    title: 'Understanding React Hooks',
+    title: "Understanding React Hooks",
     description:
       "Get the lowdown on React Hooks, how to use 'em, and best practices for those sleek functional components."
   },
   {
     id: 2,
-    title: 'Mastering TypeScript',
+    title: "Mastering TypeScript",
     description:
-      'Dive deep into TypeScript, from basic stuff to pro features, for building rock-solid apps.'
+      "Dive deep into TypeScript, from basic stuff to pro features, for building rock-solid apps."
   },
   {
     id: 3,
-    title: 'Laravel Eloquent Tips',
+    title: "Laravel Eloquent Tips",
     description:
-      'Check out advanced tricks for using Laravel Eloquent ORM to make your database game strong.'
+      "Check out advanced tricks for using Laravel Eloquent ORM to make your database game strong."
   },
   {
     id: 4,
-    title: 'Building with Next.js',
+    title: "Building with Next.js",
     description:
-      'A full-on tutorial on creating server-rendered React apps with the Next.js framework.'
+      "A full-on tutorial on creating server-rendered React apps with the Next.js framework."
   },
   {
     id: 5,
-    title: 'Inertia.js for Full-Stack Devs',
+    title: "Inertia.js for Full-Stack Devs",
     description:
-      'Learn how Inertia.js smooths out the gap between client-side frameworks and server-side apps.'
+      "Learn how Inertia.js smooths out the gap between client-side frameworks and server-side apps."
   },
   {
     id: 6,
-    title: 'Optimizing Web Performance',
-    description: 'Tips and tricks to boost the performance and speed of your web apps.'
+    title: "Optimizing Web Performance",
+    description: "Tips and tricks to boost the performance and speed of your web apps."
   }
 ]
diff --git a/components/docs/surfaces/heading-tracking-demo.tsx b/components/docs/surfaces/heading-tracking-demo.tsx
index 79abe875..b36cc0a9 100644
--- a/components/docs/surfaces/heading-tracking-demo.tsx
+++ b/components/docs/surfaces/heading-tracking-demo.tsx
@@ -1,4 +1,4 @@
-import { Heading } from 'ui'
+import { Heading } from "ui"
 
 export default function HeadingTrackingDemo() {
   return <Heading tracking="tighter">The quick brown fox jumps over the lazy dog</Heading>
diff --git a/components/docs/surfaces/separator-orientation-demo.tsx b/components/docs/surfaces/separator-orientation-demo.tsx
index a0749922..60f617f6 100644
--- a/components/docs/surfaces/separator-orientation-demo.tsx
+++ b/components/docs/surfaces/separator-orientation-demo.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { Separator } from 'ui'
+import { Separator } from "ui"
 
 export default function SeparatorDemo() {
   return <Separator orientation="vertical" className="h-32" />
diff --git a/components/docs/surfaces/show-more-as-text-demo.tsx b/components/docs/surfaces/show-more-as-text-demo.tsx
index 16df4cd1..991afca1 100644
--- a/components/docs/surfaces/show-more-as-text-demo.tsx
+++ b/components/docs/surfaces/show-more-as-text-demo.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import * as React from 'react'
+import * as React from "react"
 
-import { ShowMore } from 'ui'
+import { ShowMore } from "ui"
 
 export default function ShowMoreAsTextDemo() {
   return (
diff --git a/components/docs/surfaces/show-more-controlled-demo.tsx b/components/docs/surfaces/show-more-controlled-demo.tsx
index e4222b31..10666098 100644
--- a/components/docs/surfaces/show-more-controlled-demo.tsx
+++ b/components/docs/surfaces/show-more-controlled-demo.tsx
@@ -1,18 +1,18 @@
-'use client'
+"use client"
 
-import * as React from 'react'
+import * as React from "react"
 
-import { IconChevronLgDown } from 'justd-icons'
-import { ShowMore } from 'ui'
+import { IconChevronLgDown } from "justd-icons"
+import { ShowMore } from "ui"
 
 export default function ShowMoreControlledDemo() {
   const [isExpanded, setIsExpanded] = React.useState(false)
   return (
     <div className="py-6">
       <ShowMore onChange={setIsExpanded} isSelected={isExpanded}>
-        {isExpanded ? 'Expand' : 'Collapse'}
+        {isExpanded ? "Expand" : "Collapse"}
         <IconChevronLgDown
-          className={`${isExpanded ? 'rotate-180' : ''} size-4 transition-transform duration-200`}
+          className={`${isExpanded ? "rotate-180" : ""} size-4 transition-transform duration-200`}
         />
       </ShowMore>
     </div>
diff --git a/components/docs/surfaces/show-more-orientation-demo.tsx b/components/docs/surfaces/show-more-orientation-demo.tsx
index c5dc4748..c064eabe 100644
--- a/components/docs/surfaces/show-more-orientation-demo.tsx
+++ b/components/docs/surfaces/show-more-orientation-demo.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import * as React from 'react'
+import * as React from "react"
 
-import { ShowMore } from 'ui'
+import { ShowMore } from "ui"
 
 export default function ShowMoreOrientationDemo() {
   return <ShowMore orientation="vertical" as="text" text="Or" className="h-56" />
diff --git a/components/experimental/cmd.tsx b/components/experimental/cmd.tsx
index 69340404..7ad9d0c2 100644
--- a/components/experimental/cmd.tsx
+++ b/components/experimental/cmd.tsx
@@ -1,6 +1,6 @@
-import { useEffect, useMemo, useRef, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from "react"
 
-import { useFilter } from 'react-aria'
+import { useFilter } from "react-aria"
 import {
   Button,
   ComboBox,
@@ -12,40 +12,40 @@ import {
   ModalOverlay,
   Popover,
   Text
-} from 'react-aria-components'
+} from "react-aria-components"
 
 const items = [
-  { id: 1, name: 'Open file...' },
-  { id: 2, name: 'Create folder...' },
-  { id: 3, name: 'Open email...' },
-  { id: 4, name: 'Empty trash' },
-  { id: 5, name: 'Switch workspace...' },
-  { id: 6, name: 'Add teammate...' },
-  { id: 7, name: 'Quit application' }
+  { id: 1, name: "Open file..." },
+  { id: 2, name: "Create folder..." },
+  { id: 3, name: "Open email..." },
+  { id: 4, name: "Empty trash" },
+  { id: 5, name: "Switch workspace..." },
+  { id: 6, name: "Add teammate..." },
+  { id: 7, name: "Quit application" }
 ]
 
 export function CmdK() {
   const [open, setOpen] = useState(false)
   const inputRef = useRef<HTMLInputElement>(null)
-  const [filterValue, setFilterValue] = useState('')
-  const { contains } = useFilter({ sensitivity: 'base' })
+  const [filterValue, setFilterValue] = useState("")
+  const { contains } = useFilter({ sensitivity: "base" })
   const filteredItems = useMemo(
     () => items.filter((i) => contains(i.name, filterValue)),
     [items, filterValue]
   )
 
   function toggle(e: KeyboardEvent) {
-    if (e.key === 'k' && e.metaKey) {
+    if (e.key === "k" && e.metaKey) {
       setOpen((o) => !o)
-    } else if (e.key === 'Escape') {
+    } else if (e.key === "Escape") {
       setOpen(false)
     }
   }
   useEffect(() => {
-    window.addEventListener('keydown', toggle, { capture: true })
+    window.addEventListener("keydown", toggle, { capture: true })
 
     return () => {
-      window.removeEventListener('keydown', toggle, { capture: true })
+      window.removeEventListener("keydown", toggle, { capture: true })
     }
   }, [])
 
diff --git a/components/header.tsx b/components/header.tsx
index 3c91be7c..1f01a747 100644
--- a/components/header.tsx
+++ b/components/header.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { Container, Heading } from 'ui'
+import { Container, Heading } from "ui"
 
 export function Header({ children }: { children: React.ReactNode }) {
   return (
diff --git a/components/install-command.tsx b/components/install-command.tsx
index 52cefb4f..192e8a21 100644
--- a/components/install-command.tsx
+++ b/components/install-command.tsx
@@ -1,11 +1,11 @@
-'use client'
+"use client"
 
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState } from "react"
 
-import { cn } from '@/resources/lib/utils'
-import { trackEvent } from '@openpanel/nextjs'
-import { CopyButton, Link, Menu } from 'ui'
-import { copyToClipboard } from 'usemods'
+import { cn } from "@/resources/lib/utils"
+import { trackEvent } from "@openpanel/nextjs"
+import { CopyButton, Link, Menu } from "ui"
+import { copyToClipboard } from "usemods"
 
 export interface InstallCommandProps {
   isAdd?: boolean
@@ -20,8 +20,8 @@ export interface InstallCommandProps {
 }
 
 const defaultText =
-  'Sometimes, using the CLI is the way to go, so make sure you install the necessary\n' +
-  '          dependencies for the components you want to use.'
+  "Sometimes, using the CLI is the way to go, so make sure you install the necessary\n" +
+  "          dependencies for the components you want to use."
 
 const InstallCommand: React.FC<InstallCommandProps> = ({
   text = defaultText,
@@ -34,10 +34,10 @@ const InstallCommand: React.FC<InstallCommandProps> = ({
   isDiff = false,
   className
 }) => {
-  const diffCommand = 'justd-cli@latest diff'
-  const addCommand = 'justd-cli@latest add'
-  const initCommand = 'justd-cli@latest init'
-  const commandArgs = items.join(' ')
+  const diffCommand = "justd-cli@latest diff"
+  const addCommand = "justd-cli@latest add"
+  const initCommand = "justd-cli@latest init"
+  const commandArgs = items.join(" ")
   const defaultCommand = isAdd
     ? `npx ${addCommand} ${commandArgs}`
     : isDiff
@@ -58,31 +58,31 @@ const InstallCommand: React.FC<InstallCommandProps> = ({
   }, [isCopied])
 
   const handleAction = (tool: string) => {
-    let newCommand = ''
+    let newCommand = ""
     if (isAdd) {
       const addMap = {
-        NPM: 'npx'
+        NPM: "npx"
       }
       // @ts-ignore
       newCommand = `${addMap[tool]} ${addCommand} ${commandArgs}`
     } else if (isInit) {
       const initMap = {
-        NPM: 'npx'
+        NPM: "npx"
       }
       // @ts-ignore
       newCommand = `${initMap[tool]} ${initCommand}`
     } else if (isDiff) {
       const initMap = {
-        NPM: 'npx'
+        NPM: "npx"
       }
       // @ts-ignore
       newCommand = `${diffCommand} ${commandArgs}`
     } else if (isInstall) {
       const installMap = {
-        Bun: 'bun add',
-        Yarn: 'yarn add',
-        PNPM: 'pnpm add',
-        NPM: 'npm i'
+        Bun: "bun add",
+        Yarn: "yarn add",
+        PNPM: "pnpm add",
+        NPM: "npm i"
       }
       // @ts-ignore
       newCommand = `${installMap[tool]} ${commandArgs}`
@@ -90,7 +90,7 @@ const InstallCommand: React.FC<InstallCommandProps> = ({
     setCommand(newCommand)
     copyToClipboard(newCommand).then(() => {
       setIsCopied(true)
-      trackEvent('cli pressed', { copy: newCommand })
+      trackEvent("cli pressed", { copy: newCommand })
     })
   }
 
@@ -98,7 +98,7 @@ const InstallCommand: React.FC<InstallCommandProps> = ({
     <>
       {isAdd && isInDocsComponent && (
         <p>
-          If you hit any issues, make sure you check out the installation guide{' '}
+          If you hit any issues, make sure you check out the installation guide{" "}
           <Link
             className="not-prose font-medium"
             intent="primary"
@@ -114,7 +114,7 @@ const InstallCommand: React.FC<InstallCommandProps> = ({
       {isManual && text && <p>{text}</p>}
       <div
         className={cn(
-          'not-prose relative flex items-center justify-between rounded-lg border bg-[#0e0e10] py-2.5 pl-4 pr-2.5 text-white font-mono text-sm [&>svg]:text-zinc-400 [&>svg]:transition [&_svg]:shrink-0',
+          "not-prose relative flex items-center justify-between rounded-lg border bg-[#0e0e10] py-2.5 pl-4 pr-2.5 text-white font-mono text-sm [&>svg]:text-zinc-400 [&>svg]:transition [&_svg]:shrink-0",
           className
         )}
       >
@@ -122,7 +122,7 @@ const InstallCommand: React.FC<InstallCommandProps> = ({
         <div className="pl-3 xd">
           {isInit || isDiff || isAdd ? (
             <CopyButton
-              onPress={() => handleAction('NPM')}
+              onPress={() => handleAction("NPM")}
               className="rounded-sm"
               ariaLabel={command}
               isCopied={isCopied}
@@ -131,10 +131,10 @@ const InstallCommand: React.FC<InstallCommandProps> = ({
             <Menu>
               <CopyButton className="rounded-sm" ariaLabel={command} isCopied={isCopied} />
               <Menu.Content showArrow placement="bottom end">
-                <Menu.Item onAction={() => handleAction('Bun')}>Bun</Menu.Item>
-                <Menu.Item onAction={() => handleAction('Yarn')}>Yarn</Menu.Item>
-                <Menu.Item onAction={() => handleAction('PNPM')}>PNPM</Menu.Item>
-                <Menu.Item onAction={() => handleAction('NPM')}>NPM</Menu.Item>
+                <Menu.Item onAction={() => handleAction("Bun")}>Bun</Menu.Item>
+                <Menu.Item onAction={() => handleAction("Yarn")}>Yarn</Menu.Item>
+                <Menu.Item onAction={() => handleAction("PNPM")}>PNPM</Menu.Item>
+                <Menu.Item onAction={() => handleAction("NPM")}>NPM</Menu.Item>
               </Menu.Content>
             </Menu>
           )}
diff --git a/components/mdx-components.tsx b/components/mdx-components.tsx
index ef059750..49c8b5db 100644
--- a/components/mdx-components.tsx
+++ b/components/mdx-components.tsx
@@ -1,16 +1,16 @@
-import { DocComposed } from '@/components/doc-composed'
-import { DocNote } from '@/components/doc-note'
-import type { CodeProps } from '@/components/docs/rehype/code'
-import { Code } from '@/components/docs/rehype/code'
-import { PlainCode } from '@/components/docs/rehype/plain-code'
-import { SourceCode } from '@/components/docs/rehype/source-code'
-import type { InstallCommandProps } from '@/components/install-command'
-import { InstallCommand } from '@/components/install-command'
-import { useMDXComponent } from '@/resources/hooks/use-mdx'
-import Image from 'next/image'
-import { Link, type LinkProps } from 'ui'
+import { DocComposed } from "@/components/doc-composed"
+import { DocNote } from "@/components/doc-note"
+import type { CodeProps } from "@/components/docs/rehype/code"
+import { Code } from "@/components/docs/rehype/code"
+import { PlainCode } from "@/components/docs/rehype/plain-code"
+import { SourceCode } from "@/components/docs/rehype/source-code"
+import type { InstallCommandProps } from "@/components/install-command"
+import { InstallCommand } from "@/components/install-command"
+import { useMDXComponent } from "@/resources/hooks/use-mdx"
+import Image from "next/image"
+import { Link, type LinkProps } from "ui"
 
-import { DocHow } from './doc-how'
+import { DocHow } from "./doc-how"
 
 interface MdxProps {
   code: string
diff --git a/components/nav-item.tsx b/components/nav-item.tsx
index ba685b41..5e1f0e54 100644
--- a/components/nav-item.tsx
+++ b/components/nav-item.tsx
@@ -1,18 +1,18 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { motion } from 'framer-motion'
-import { Link as NextLink } from 'next-view-transitions'
-import { tv } from 'tailwind-variants'
-import { LinkPrimitive } from 'ui'
+import { motion } from "framer-motion"
+import { Link as NextLink } from "next-view-transitions"
+import { tv } from "tailwind-variants"
+import { LinkPrimitive } from "ui"
 
 const navLinkStyles = tv({
-  base: 'relative flex focus-visible:text-fg items-center gap-x-3 tracking-tight py-2 text-sm text-muted-fg transition-colors focus:outline-none sm:py-3',
+  base: "relative flex focus-visible:text-fg items-center gap-x-3 tracking-tight py-2 text-sm text-muted-fg transition-colors focus:outline-none sm:py-3",
   variants: {
     isActive: {
-      true: 'text-fg',
-      false: 'text-muted-fg hover:text-fg'
+      true: "text-fg",
+      false: "text-muted-fg hover:text-fg"
     }
   }
 })
diff --git a/components/navbar.tsx b/components/navbar.tsx
index c04656c2..7418adbb 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -1,10 +1,10 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { ResponsiveAside } from '@/components/responsive-aside'
-import { siteConfig } from '@/resources/config/site'
-import { LayoutGroup } from 'framer-motion'
+import { ResponsiveAside } from "@/components/responsive-aside"
+import { siteConfig } from "@/resources/config/site"
+import { LayoutGroup } from "framer-motion"
 import {
   IconBrandAdobe,
   IconBrandD,
@@ -20,20 +20,20 @@ import {
   IconMoon,
   IconSearch,
   IconSun
-} from 'justd-icons'
-import { useTheme } from 'next-themes'
-import { usePathname } from 'next/navigation'
-import { Collection } from 'react-aria-components'
-import { Button, buttonStyles, ContextMenu, Link, Menu, Separator, useMediaQuery } from 'ui'
+} from "justd-icons"
+import { useTheme } from "next-themes"
+import { usePathname } from "next/navigation"
+import { Collection } from "react-aria-components"
+import { Button, buttonStyles, ContextMenu, Link, Menu, Separator, useMediaQuery } from "ui"
 
-import { CommandPalette } from './command-palette'
-import { NavLink } from './nav-item'
-import { TakeCurrentUrl } from './take-current-url'
-import { ThemeSwitcher } from './theme-switcher'
+import { CommandPalette } from "./command-palette"
+import { NavLink } from "./nav-item"
+import { TakeCurrentUrl } from "./take-current-url"
+import { ThemeSwitcher } from "./theme-switcher"
 
 const menuItems = [
-  { id: 1, label: 'Home', url: '/' },
-  { id: 2, label: 'Components', url: '/docs/getting-started/introduction' }
+  { id: 1, label: "Home", url: "/" },
+  { id: 2, label: "Components", url: "/docs/getting-started/introduction" }
 ]
 
 export function Navbar() {
@@ -41,7 +41,7 @@ export function Navbar() {
   const pathname = usePathname()
 
   const [open, setOpen] = React.useState(false)
-  const isDesktop = useMediaQuery('(min-width: 1024px)')
+  const isDesktop = useMediaQuery("(min-width: 1024px)")
   return (
     <>
       <CommandPalette setOpen={setOpen} openCmd={open} />
@@ -54,13 +54,13 @@ export function Navbar() {
                   {isDesktop ? <NavbarContextMenu /> : <NavbarDropdown />}
                   <Separator orientation="vertical" className="h-6" />
                   <Collection items={menuItems}>
-                    <NavLink isNextLink isActive={pathname === '/'} href="/">
+                    <NavLink isNextLink isActive={pathname === "/"} href="/">
                       Home
                     </NavLink>
                     <NavLink
                       isNextLink
                       isActive={
-                        pathname?.startsWith('/docs') && !pathname?.includes('/docs/components')
+                        pathname?.startsWith("/docs") && !pathname?.includes("/docs/components")
                       }
                       href="/docs/getting-started/introduction"
                     >
@@ -69,17 +69,17 @@ export function Navbar() {
                     <NavLink
                       isNextLink
                       isActive={
-                        pathname?.startsWith('/docs/components') || pathname === '/components'
+                        pathname?.startsWith("/docs/components") || pathname === "/components"
                       }
                       href="/components"
                     >
                       Components
                     </NavLink>
-                    <NavLink isNextLink isActive={pathname === '/colors'} href="/colors">
+                    <NavLink isNextLink isActive={pathname === "/colors"} href="/colors">
                       Colors
                     </NavLink>
                     <NavLink href="/icons">Icons</NavLink>
-                    <NavLink isActive={pathname === '/themes'} href="/themes">
+                    <NavLink isActive={pathname === "/themes"} href="/themes">
                       Themes
                     </NavLink>
                   </Collection>
@@ -108,9 +108,9 @@ export function Navbar() {
                     <Link
                       aria-label="Github Repository"
                       className={buttonStyles({
-                        appearance: 'outline',
-                        size: 'square-petite',
-                        className: '[&_[data-slot=icon]]:text-fg'
+                        appearance: "outline",
+                        size: "square-petite",
+                        className: "[&_[data-slot=icon]]:text-fg"
                       })}
                       target="_blank"
                       href={siteConfig.repo}
@@ -120,9 +120,9 @@ export function Navbar() {
                     <Link
                       aria-label="Follow Update on X"
                       className={buttonStyles({
-                        appearance: 'outline',
-                        size: 'square-petite',
-                        className: '[&_[data-slot=icon]]:text-fg'
+                        appearance: "outline",
+                        size: "square-petite",
+                        className: "[&_[data-slot=icon]]:text-fg"
                       })}
                       target="_blank"
                       href="https://x.com/irsyadadl"
@@ -198,9 +198,9 @@ export function NavbarDropdown() {
         <Menu.Separator />
         <Menu.Submenu>
           <Menu.Item>
-            {theme === 'system' ? (
+            {theme === "system" ? (
               <IconDeviceDesktop />
-            ) : theme === 'dark' ? (
+            ) : theme === "dark" ? (
               <IconMoon />
             ) : (
               <IconSun />
@@ -208,15 +208,15 @@ export function NavbarDropdown() {
             <span>Switch Theme</span>
           </Menu.Item>
           <Menu.Content>
-            <Menu.Item onAction={() => setTheme('system')}>
+            <Menu.Item onAction={() => setTheme("system")}>
               <IconDeviceDesktop />
               <span>System</span>
             </Menu.Item>
-            <Menu.Item onAction={() => setTheme('dark')}>
+            <Menu.Item onAction={() => setTheme("dark")}>
               <IconMoon />
               <span>Dark</span>
             </Menu.Item>
-            <Menu.Item onAction={() => setTheme('light')}>
+            <Menu.Item onAction={() => setTheme("light")}>
               <IconSun />
               <span>Light</span>
             </Menu.Item>
@@ -232,7 +232,7 @@ export function NavbarContextMenu() {
     <ContextMenu>
       <ContextMenu.Trigger
         aria-label="Context Menu."
-        className={buttonStyles({ appearance: 'plain' })}
+        className={buttonStyles({ appearance: "plain" })}
       >
         <span className="flex items-center gap-x-2">
           <IconBrandD className="-ml-1 size-6" />
diff --git a/components/providers.tsx b/components/providers.tsx
index 108d4198..45491005 100644
--- a/components/providers.tsx
+++ b/components/providers.tsx
@@ -1,12 +1,12 @@
-'use client'
+"use client"
 
-import { ThemeProvider } from '@/components/theme-provider'
-import { useRouter } from 'next/navigation'
-import { RouterProvider } from 'react-aria-components'
+import { ThemeProvider } from "@/components/theme-provider"
+import { useRouter } from "next/navigation"
+import { RouterProvider } from "react-aria-components"
 
-declare module 'react-aria-components' {
+declare module "react-aria-components" {
   interface RouterConfig {
-    routerOptions: NonNullable<Parameters<ReturnType<typeof useRouter>['push']>[1]>
+    routerOptions: NonNullable<Parameters<ReturnType<typeof useRouter>["push"]>[1]>
   }
 }
 
diff --git a/components/resources.tsx b/components/resources.tsx
index e0eeab7c..4acd8b89 100644
--- a/components/resources.tsx
+++ b/components/resources.tsx
@@ -1,31 +1,31 @@
-'use client'
+"use client"
 
-import { IconBrandJustd, IconBrandLaravel, IconBrandNextjs, IconBrandRemix } from 'justd-icons'
-import { Badge, Card, Grid, Heading, Link } from 'ui'
+import { IconBrandJustd, IconBrandLaravel, IconBrandNextjs, IconBrandRemix } from "justd-icons"
+import { Badge, Card, Grid, Heading, Link } from "ui"
 
 const resources = [
   {
     icon: IconBrandNextjs,
-    name: 'Next.js Starter Kit',
-    url: 'https://justd-next.netlify.app/',
+    name: "Next.js Starter Kit",
+    url: "https://justd-next.netlify.app/",
     description:
       "A Next.js starter kit with Justd installed. You don't need to set up anything, just run clone it and you're good to go!",
-    label: 'Starter Kit'
+    label: "Starter Kit"
   },
   {
     icon: IconBrandLaravel,
-    name: 'Laravel Starter Kit',
-    url: 'https://github.com/justdlabs/inertia.ts',
+    name: "Laravel Starter Kit",
+    url: "https://github.com/justdlabs/inertia.ts",
     description:
-      'A Laravel starter kit with Justd installed. It includes a authentication system out of the box.',
-    label: 'Starter Kit'
+      "A Laravel starter kit with Justd installed. It includes a authentication system out of the box.",
+    label: "Starter Kit"
   },
   {
     icon: IconBrandRemix,
-    name: 'Remix Starter Kit',
-    url: 'https://justd-remix.netlify.app/',
-    description: 'A Remix starter kit with Justd installed, ready for use in any application.',
-    label: 'Starter Kit'
+    name: "Remix Starter Kit",
+    url: "https://justd-remix.netlify.app/",
+    description: "A Remix starter kit with Justd installed, ready for use in any application.",
+    label: "Starter Kit"
   }
 ]
 
@@ -48,7 +48,7 @@ export function Resources() {
             {(item) => (
               <Grid.Item
                 aria-label={item.name}
-                id={item.name.toLowerCase().replaceAll(' ', '-')}
+                id={item.name.toLowerCase().replaceAll(" ", "-")}
                 className="relative focus:outline-none p-4 lg:p-6 h-full flex flex-col w-full focus-visible:outline-none focus-visible:outline-primary rounded-xl bg-tertiary shadow-[0px_0px_0px_1px_rgba(9,9,11,0.07),0px_2px_2px_0px_rgba(9,9,11,0.05)] dark:shadow-[0px_0px_0px_1px_rgba(255,255,255,0.1)] dark:before:pointer-events-none dark:before:absolute dark:before:-inset-px dark:before:rounded-xl dark:before:shadow-[0px_2px_8px_0px_rgba(0,_0,_0,_0.20),_0px_1px_0px_0px_rgba(255,_255,_255,_0.06)_inset] forced-colors:outline"
               >
                 <Link
diff --git a/components/responsive-aside.tsx b/components/responsive-aside.tsx
index e1b64bf6..c54600ee 100644
--- a/components/responsive-aside.tsx
+++ b/components/responsive-aside.tsx
@@ -1,16 +1,16 @@
-'use client'
+"use client"
 
-import React from 'react'
+import React from "react"
 
-import { LayoutGroup } from 'framer-motion'
-import { IconBrandJustd, IconBrandX, IconHamburger, IconSearch } from 'justd-icons'
-import { usePathname } from 'next/navigation'
-import { Button, buttonStyles, cn, Link, Sheet } from 'ui'
+import { LayoutGroup } from "framer-motion"
+import { IconBrandJustd, IconBrandX, IconHamburger, IconSearch } from "justd-icons"
+import { usePathname } from "next/navigation"
+import { Button, buttonStyles, cn, Link, Sheet } from "ui"
 
-import { Aside } from './aside'
-import { CommandPalette } from './command-palette'
-import { NavbarDropdown } from './navbar'
-import { ThemeSwitcher } from './theme-switcher'
+import { Aside } from "./aside"
+import { CommandPalette } from "./command-palette"
+import { NavbarDropdown } from "./navbar"
+import { ThemeSwitcher } from "./theme-switcher"
 
 export function ResponsiveAside({
   openCmd,
@@ -26,7 +26,7 @@ export function ResponsiveAside({
   return (
     <nav className="sm:hidden z-10 relative">
       <CommandPalette setOpen={setOpenCmd} openCmd={openCmd} />
-      <div className={cn('flex items-center justify-between pl-4 pr-2 -mb-2 pt-2')}>
+      <div className={cn("flex items-center justify-between pl-4 pr-2 -mb-2 pt-2")}>
         <Button
           aria-label="Open Menu."
           className="-ml-2 [&_[data-slot=icon]]:text-fg"
@@ -58,7 +58,7 @@ export function ResponsiveAside({
           <Link
             href="https://x.com/irsyadadl"
             aria-label="Follow me on twitter"
-            className={buttonStyles({ appearance: 'outline', size: 'square-petite' })}
+            className={buttonStyles({ appearance: "outline", size: "square-petite" })}
           >
             <IconBrandX />
           </Link>
@@ -67,7 +67,7 @@ export function ResponsiveAside({
       <Sheet.Content
         isOpen={openAside}
         onOpenChange={setOpenAside}
-        classNames={{ content: 'w-[19rem]' }}
+        classNames={{ content: "w-[19rem]" }}
         side="left"
         closeButton={true}
       >
diff --git a/components/table-of-contents.tsx b/components/table-of-contents.tsx
index b11e1a2a..e9c7c6a6 100644
--- a/components/table-of-contents.tsx
+++ b/components/table-of-contents.tsx
@@ -1,10 +1,10 @@
-'use client'
+"use client"
 
-import React, { Suspense } from 'react'
+import React, { Suspense } from "react"
 
-import { Heading } from 'react-aria-components'
-import { twJoin } from 'tailwind-merge'
-import { cn, Link, Skeleton } from 'ui'
+import { Heading } from "react-aria-components"
+import { twJoin } from "tailwind-merge"
+import { cn, Link, Skeleton } from "ui"
 
 interface TableOfContentsProps {
   title: string
@@ -20,12 +20,12 @@ export function TableOfContents({
   items: TableOfContentsProps[]
 }) {
   const ids = items.flatMap((item) => [
-    item.url.split('#')[1],
-    ...(item.items ? item.items.map((subItem) => subItem.url.split('#')[1]) : [])
+    item.url.split("#")[1],
+    ...(item.items ? item.items.map((subItem) => subItem.url.split("#")[1]) : [])
   ])
   const activeId = useActiveItem(ids)
   return (
-    <div className={twJoin('not-prose', className)}>
+    <div className={twJoin("not-prose", className)}>
       <aside className="xl:sticky xl:top-[1.75rem] xl:-mr-6 xl:h-[calc(100vh-4.75rem)] xl:flex-none xl:overflow-y-auto xl:py-16 xl:pr-6">
         <nav aria-labelledby="on-this-page-title" className="w-56">
           <Suspense
@@ -76,10 +76,10 @@ function TocLink({ item, activeId }: { item: TableOfContentsProps; activeId: str
     <li key={item.title}>
       <Link
         className={cn(
-          'outline-none block no-underline tracking-tight lg:text-[0.885rem] duration-200',
-          item.url.split('#')[1] === activeId
-            ? 'dark:text-primary-400 text-primary-600'
-            : 'text-muted-fg hover:text-primary-600 dark:hover:text-primary-400'
+          "outline-none block no-underline tracking-tight lg:text-[0.885rem] duration-200",
+          item.url.split("#")[1] === activeId
+            ? "dark:text-primary-400 text-primary-600"
+            : "text-muted-fg hover:text-primary-600 dark:hover:text-primary-400"
         )}
         href={item.url}
       >
@@ -109,7 +109,7 @@ export function useActiveItem(itemIds: string[]) {
           setActiveId(bestCandidate.target.id)
         }
       },
-      { rootMargin: '0% 0% -25% 0%', threshold: 0.1 }
+      { rootMargin: "0% 0% -25% 0%", threshold: 0.1 }
     )
 
     itemIds.forEach((id) => {
diff --git a/components/take-current-url.tsx b/components/take-current-url.tsx
index 4b697bfd..8bf222b0 100644
--- a/components/take-current-url.tsx
+++ b/components/take-current-url.tsx
@@ -1,36 +1,36 @@
-'use client'
+"use client"
 
-import * as React from 'react'
+import * as React from "react"
 
-import { AnimatePresence, motion } from 'framer-motion'
-import { IconCheck, IconDuplicate } from 'justd-icons'
-import { usePathname } from 'next/navigation'
-import { toast } from 'sonner'
-import { Button, snippetVariants } from 'ui'
+import { AnimatePresence, motion } from "framer-motion"
+import { IconCheck, IconDuplicate } from "justd-icons"
+import { usePathname } from "next/navigation"
+import { toast } from "sonner"
+import { Button, snippetVariants } from "ui"
 
 export function TakeCurrentUrl() {
   const [copied, setCopied] = React.useState(false)
   const pathname = usePathname()
-  const text = pathname.includes('/docs')
-    ? 'https://getjustd.com/d/' + pathname.split('/').pop()
-    : 'https://getjustd.com' + pathname
+  const text = pathname.includes("/docs")
+    ? "https://getjustd.com/d/" + pathname.split("/").pop()
+    : "https://getjustd.com" + pathname
   const handleCopy = async () => {
     if (navigator.clipboard && window.isSecureContext) {
       try {
         await navigator.clipboard.writeText(text as string)
         toast.success(`Copied ${text} to clipboard`, {
           classNames: {
-            toast: '[&:has([data-icon])_[data-content]]:!ml-0',
-            icon: 'hidden'
+            toast: "[&:has([data-icon])_[data-content]]:!ml-0",
+            icon: "hidden"
           }
         })
         setCopied(true)
         setTimeout(() => setCopied(false), 2000) // Reset the copied state after 2 seconds
       } catch (error) {
-        toast.error('Failed to copy to clipboard')
+        toast.error("Failed to copy to clipboard")
       }
     } else {
-      toast.error('Failed to copy to clipboard')
+      toast.error("Failed to copy to clipboard")
     }
   }
   return (
@@ -38,7 +38,7 @@ export function TakeCurrentUrl() {
       appearance="outline"
       size="square-petite"
       className="[&_[data-slot=icon]]:text-fg"
-      aria-label={'Copy ' + text + ' to clipboard'}
+      aria-label={"Copy " + text + " to clipboard"}
       onPress={handleCopy}
     >
       <AnimatePresence mode="wait" initial={false}>
diff --git a/components/theme-provider.tsx b/components/theme-provider.tsx
index f75a629f..e4895870 100644
--- a/components/theme-provider.tsx
+++ b/components/theme-provider.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import * as React from 'react'
+import * as React from "react"
 
-import { ThemeProvider as NextThemesProvider, useTheme } from 'next-themes'
-import { type ThemeProviderProps } from 'next-themes/dist/types'
+import { ThemeProvider as NextThemesProvider, useTheme } from "next-themes"
+import { type ThemeProviderProps } from "next-themes/dist/types"
 
 const ThemeProvider = ({ children, ...props }: ThemeProviderProps) => {
   return <NextThemesProvider {...props}>{children}</NextThemesProvider>
diff --git a/components/theme-switcher.tsx b/components/theme-switcher.tsx
index 576f0072..b05df9a3 100644
--- a/components/theme-switcher.tsx
+++ b/components/theme-switcher.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import { IconMoon, IconSun } from 'justd-icons'
-import { useTheme } from 'next-themes'
-import { Button } from 'ui'
+import { IconMoon, IconSun } from "justd-icons"
+import { useTheme } from "next-themes"
+import { Button } from "ui"
 
 export function ThemeSwitcher() {
   const { resolvedTheme, setTheme } = useTheme()
@@ -12,8 +12,8 @@ export function ThemeSwitcher() {
       appearance="outline"
       size="square-petite"
       className="[&_[data-slot=icon]]:text-fg"
-      aria-label={'Switch to ' + resolvedTheme === 'light' ? 'dark' : 'light' + 'mode'}
-      onPress={() => setTheme(resolvedTheme === 'light' ? 'dark' : 'light')}
+      aria-label={"Switch to " + resolvedTheme === "light" ? "dark" : "light" + "mode"}
+      onPress={() => setTheme(resolvedTheme === "light" ? "dark" : "light")}
     >
       <IconSun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
       <IconMoon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
diff --git a/components/ui/field.tsx b/components/ui/field.tsx
index 3760c70a..1c21ca5b 100644
--- a/components/ui/field.tsx
+++ b/components/ui/field.tsx
@@ -1,16 +1,24 @@
-'use client';
-
-import * as React from 'react';
-
-
-
-import { FieldError as FieldErrorPrimitive, type FieldErrorProps, Group, type GroupProps, Input as InputPrimitive, type InputProps, Label as LabelPrimitive, type LabelProps, Text, type TextFieldProps as TextFieldPrimitiveProps, type TextProps, type ValidationResult } from 'react-aria-components';
-import { tv } from 'tailwind-variants';
-
-
-
-import { cr, ctr } from './primitive';
-
+"use client"
+
+import * as React from "react"
+
+import {
+  FieldError as FieldErrorPrimitive,
+  type FieldErrorProps,
+  Group,
+  type GroupProps,
+  Input as InputPrimitive,
+  type InputProps,
+  Label as LabelPrimitive,
+  type LabelProps,
+  Text,
+  type TextFieldProps as TextFieldPrimitiveProps,
+  type TextProps,
+  type ValidationResult
+} from "react-aria-components"
+import { tv } from "tailwind-variants"
+
+import { cr, ctr } from "./primitive"
 
 // primitive styles
 
@@ -19,36 +27,36 @@ interface FieldProps {
   placeholder?: string
   description?: string
   errorMessage?: string | ((validation: ValidationResult) => string)
-  'aria-label'?: TextFieldPrimitiveProps['aria-label']
-  'aria-labelledby'?: TextFieldPrimitiveProps['aria-labelledby']
+  "aria-label"?: TextFieldPrimitiveProps["aria-label"]
+  "aria-labelledby"?: TextFieldPrimitiveProps["aria-labelledby"]
 }
 
 // primitive styles
 const fieldBorderStyles = tv({
-  base: 'group-focus-within:border-ring/85 forced-colors:border-[Highlight]',
+  base: "group-focus-within:border-ring/85 forced-colors:border-[Highlight]",
   variants: {
     isInvalid: {
-      true: 'border-danger/70 group-focus-within:border-danger/70 forced-colors:border-[Mark]'
+      true: "border-danger/70 group-focus-within:border-danger/70 forced-colors:border-[Mark]"
     }
   }
 })
 
 const fieldGroupPrefixStyles = tv({
   base: [
-    'flex group-invalid:border-danger group-disabled:bg-secondary group-disabled:opacity-50 items-center group-invalid:focus-within:ring-danger/20',
-    '[&>.x2e2>.kbt32x]:size-7 [&>.x2e2>.kbt32x]:rounded-sm [&>.x2e2:has(.kbt32x)]:size-9 [&>.x2e2:has(.kbt32x)]:grid [&>.x2e2:has(.kbt32x)]:place-items-center',
-    '[&>.x2e2>.kbt32x]:before:rounded-[calc(theme(borderRadius.sm)-1px)] [&>.x2e2>.kbt32x]:after:rounded-[calc(theme(borderRadius.sm)-1px)] dark:[&>.x2e2>.kbt32x]:after:rounded-sm',
-    '[&>.isSfx:has(.kbt32x)]:-mr-2 [&>.isPfx:has(.kbt32x)]:-ml-2 [&>.isSfx>.kbt32x]:mr-0.5 [&>.isPfx>.kbt32x]:ml-0.5'
+    "flex group-invalid:border-danger group-disabled:bg-secondary group-disabled:opacity-50 items-center group-invalid:focus-within:ring-danger/20",
+    "[&>.x2e2>.kbt32x]:size-7 [&>.x2e2>.kbt32x]:rounded-sm [&>.x2e2:has(.kbt32x)]:size-9 [&>.x2e2:has(.kbt32x)]:grid [&>.x2e2:has(.kbt32x)]:place-items-center",
+    "[&>.x2e2>.kbt32x]:before:rounded-[calc(theme(borderRadius.sm)-1px)] [&>.x2e2>.kbt32x]:after:rounded-[calc(theme(borderRadius.sm)-1px)] dark:[&>.x2e2>.kbt32x]:after:rounded-sm",
+    "[&>.isSfx:has(.kbt32x)]:-mr-2 [&>.isPfx:has(.kbt32x)]:-ml-2 [&>.isSfx>.kbt32x]:mr-0.5 [&>.isPfx>.kbt32x]:ml-0.5"
   ]
 })
 
 const fieldStyles = tv({
   slots: {
-    description: 'text-pretty text-base/6 text-muted-fg sm:text-sm/6',
-    label: 'w-fit cursor-default font-medium text-secondary-fg text-sm',
-    fieldError: 'text-sm text-danger forced-colors:text-[Mark]',
+    description: "text-pretty text-base/6 text-muted-fg sm:text-sm/6",
+    label: "w-fit cursor-default font-medium text-secondary-fg text-sm",
+    fieldError: "text-sm text-danger forced-colors:text-[Mark]",
     input: [
-      'w-full min-w-0 bg-transparent p-2 text-base text-fg placeholder-muted-fg outline-none focus:outline-none lg:text-sm'
+      "w-full min-w-0 bg-transparent p-2 text-base text-fg placeholder-muted-fg outline-none focus:outline-none lg:text-sm"
     ]
   }
 })
@@ -69,11 +77,11 @@ const FieldError = ({ className, ...props }: FieldErrorProps) => {
 
 const fieldGroupStyles = tv({
   base: [
-    'group flex h-10 items-center overflow-hidden rounded-lg border border-input bg-background transition disabled:opacity-50 disabled:bg-secondary forced-colors:bg-[Field]',
-    'focus-within:border-ring/85 focus-within:ring-4 focus-within:ring-ring/20',
-    'focus-within:invalid:border-danger focus-within:invalid:ring-4 focus-within:invalid:ring-danger/20',
-    'invalid:border-danger',
-    'has-[.isPfx]:pl-2.5 has-[.isSfx]:pr-2.5 [&_[data-slot=icon]]:size-4 has-[.atrs]:shrink-0 has-[.atrs]:text-muted-fg'
+    "group flex h-10 items-center overflow-hidden rounded-lg border border-input bg-background transition disabled:opacity-50 disabled:bg-secondary forced-colors:bg-[Field]",
+    "focus-within:border-ring/85 focus-within:ring-4 focus-within:ring-ring/20",
+    "focus-within:invalid:border-danger focus-within:invalid:ring-4 focus-within:invalid:ring-danger/20",
+    "invalid:border-danger",
+    "has-[.isPfx]:pl-2.5 has-[.isSfx]:pr-2.5 [&_[data-slot=icon]]:size-4 has-[.atrs]:shrink-0 has-[.atrs]:text-muted-fg"
   ]
 })
 
@@ -91,7 +99,7 @@ const FieldGroup = ({ className, ...props }: GroupProps) => {
 const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, ...props }, ref) => {
   return <InputPrimitive ref={ref} {...props} className={ctr(className, input())} />
 })
-Input.displayName = 'Input'
+Input.displayName = "Input"
 
 export {
   Description,
diff --git a/resources/config/site.ts b/resources/config/site.ts
index 941292a2..ea7b87da 100644
--- a/resources/config/site.ts
+++ b/resources/config/site.ts
@@ -1,15 +1,15 @@
 export const siteConfig = {
-  name: 'Just D.',
-  url: 'https://getjustd.com',
+  name: "Just D.",
+  url: "https://getjustd.com",
   description:
-    'Just D. is a chill set of React components, built on top of React Aria Components, all about keeping the web accessible. Easy to customize and just copy & paste into your React projects. Plus, it includes Tailwind CSS for sleek styling right out of the box.',
-  author: 'irsyadadl',
+    "Just D. is a chill set of React components, built on top of React Aria Components, all about keeping the web accessible. Easy to customize and just copy & paste into your React projects. Plus, it includes Tailwind CSS for sleek styling right out of the box.",
+  author: "irsyadadl",
   links: {
-    twitter: 'https://x.com/intent/follow?screen_name=getjustd',
-    github: 'https://github.com/justdlabs',
-    personalSite: 'https://irsyad.co'
+    twitter: "https://x.com/intent/follow?screen_name=getjustd",
+    github: "https://github.com/justdlabs",
+    personalSite: "https://irsyad.co"
   },
-  repo: 'https://github.com/justdlabs/justd'
+  repo: "https://github.com/justdlabs/justd"
 }
 
 export type SiteConfig = typeof siteConfig
diff --git a/resources/hooks/use-mdx.ts b/resources/hooks/use-mdx.ts
index 577c2d3e..544a57d5 100644
--- a/resources/hooks/use-mdx.ts
+++ b/resources/hooks/use-mdx.ts
@@ -1,4 +1,4 @@
-import * as runtime from 'react/jsx-runtime'
+import * as runtime from "react/jsx-runtime"
 
 export const useMDXComponent = (code: string) => {
   const fn = new Function(code)
diff --git a/resources/hooks/use-mounted.ts b/resources/hooks/use-mounted.ts
index 13256dce..3a20c62a 100644
--- a/resources/hooks/use-mounted.ts
+++ b/resources/hooks/use-mounted.ts
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import * as React from "react"
 
 export function useMounted() {
   const [mounted, setMounted] = React.useState(false)
diff --git a/resources/hooks/use-query-string.ts b/resources/hooks/use-query-string.ts
index 0ef1b8de..3e90ac2f 100644
--- a/resources/hooks/use-query-string.ts
+++ b/resources/hooks/use-query-string.ts
@@ -1,6 +1,6 @@
-import { useCallback } from 'react'
+import { useCallback } from "react"
 
-import { useSearchParams } from 'next/navigation'
+import { useSearchParams } from "next/navigation"
 
 export function useQueryString() {
   const searchParams = useSearchParams()
diff --git a/resources/lib/colors.ts b/resources/lib/colors.ts
index 02b44c24..a6b98114 100644
--- a/resources/lib/colors.ts
+++ b/resources/lib/colors.ts
@@ -1,26 +1,26 @@
-import type { FormatOnlyForTailwindVariableType } from '@/resources/types'
-import chroma from 'chroma-js'
-import ntc from 'ntcjs'
-import { slugify } from 'usemods'
+import type { FormatOnlyForTailwindVariableType } from "@/resources/types"
+import chroma from "chroma-js"
+import ntc from "ntcjs"
+import { slugify } from "usemods"
 
 const allFormats = [
-  { id: 1, format: 'hex' },
-  { id: 2, format: 'hexa' },
-  { id: 3, format: 'rgb' },
-  { id: 4, format: 'rgba' },
-  { id: 5, format: 'hsl' },
-  { id: 6, format: 'hsla' },
-  { id: 7, format: 'hsb' },
-  { id: 8, format: 'hsba' }
+  { id: 1, format: "hex" },
+  { id: 2, format: "hexa" },
+  { id: 3, format: "rgb" },
+  { id: 4, format: "rgba" },
+  { id: 5, format: "hsl" },
+  { id: 6, format: "hsla" },
+  { id: 7, format: "hsb" },
+  { id: 8, format: "hsba" }
 ] as const
 
 const formatOnlyForTailwindVariable = [
-  { id: 1, format: 'rgb' },
-  { id: 2, format: 'rgba' },
-  { id: 3, format: 'hsl' },
-  { id: 4, format: 'hsla' },
-  { id: 5, format: 'hsb' },
-  { id: 6, format: 'hsba' }
+  { id: 1, format: "rgb" },
+  { id: 2, format: "rgba" },
+  { id: 3, format: "hsl" },
+  { id: 4, format: "hsla" },
+  { id: 5, format: "hsb" },
+  { id: 6, format: "hsba" }
 ] as const
 
 const formatOnlyForTailwindVariableValues = formatOnlyForTailwindVariable.map(
@@ -33,9 +33,9 @@ const formatColorForTailwind = (
 ): string => {
   return formatOnlyForTailwindVariableValues.includes(format)
     ? colorString
-        .replace(/(rgb|rgba|hsl|hsla|hsb|hsba)[(a]?/g, '')
-        .replace(/[()]/g, '')
-        .replace(/,\s*/g, ' ')
+        .replace(/(rgb|rgba|hsl|hsla|hsb|hsba)[(a]?/g, "")
+        .replace(/[()]/g, "")
+        .replace(/,\s*/g, " ")
         .trim()
     : colorString
 }
@@ -70,32 +70,32 @@ const getColorName = (hex: string, slug = true) => {
 
 const textColorBasedOnBg = (bgColor: string): string => {
   const luminance = chroma(bgColor).luminance()
-  return luminance > 0.3 ? '#000000' : '#FFFFFF'
+  return luminance > 0.3 ? "#000000" : "#FFFFFF"
 }
 
 const tailwindColorNames = [
-  'slate',
-  'gray',
-  'zinc',
-  'neutral',
-  'stone',
-  'red',
-  'orange',
-  'amber',
-  'yellow',
-  'lime',
-  'green',
-  'emerald',
-  'teal',
-  'cyan',
-  'sky',
-  'blue',
-  'indigo',
-  'violet',
-  'purple',
-  'fuchsia',
-  'pink',
-  'rose'
+  "slate",
+  "gray",
+  "zinc",
+  "neutral",
+  "stone",
+  "red",
+  "orange",
+  "amber",
+  "yellow",
+  "lime",
+  "green",
+  "emerald",
+  "teal",
+  "cyan",
+  "sky",
+  "blue",
+  "indigo",
+  "violet",
+  "purple",
+  "fuchsia",
+  "pink",
+  "rose"
 ]
 
 export {
diff --git a/resources/lib/utils.ts b/resources/lib/utils.ts
index 6c9ecae2..f5396e03 100644
--- a/resources/lib/utils.ts
+++ b/resources/lib/utils.ts
@@ -1,8 +1,8 @@
-import { type Docs } from '@/.velite'
-import { type ClassValue, clsx } from 'clsx'
-import { slug } from 'github-slugger'
-import { twMerge } from 'tailwind-merge'
-import titlePrimitive from 'title'
+import { type Docs } from "@/.velite"
+import { type ClassValue, clsx } from "clsx"
+import { slug } from "github-slugger"
+import { twMerge } from "tailwind-merge"
+import titlePrimitive from "title"
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
@@ -10,10 +10,10 @@ export function cn(...inputs: ClassValue[]) {
 
 export function formatDate(input: string | number): string {
   const date = new Date(input)
-  return date.toLocaleDateString('en-US', {
-    month: 'long',
-    day: 'numeric',
-    year: 'numeric'
+  return date.toLocaleDateString("en-US", {
+    month: "long",
+    day: "numeric",
+    year: "numeric"
   })
 }
 
@@ -35,7 +35,7 @@ export function getAllRefs(docs: Array<Docs>) {
 }
 
 export function goodTitle(str: string) {
-  return titlePrimitive(str.replaceAll('-', ' '))
+  return titlePrimitive(str.replaceAll("-", " "))
 }
 
 export function wait(number: number) {
@@ -45,7 +45,7 @@ export function wait(number: number) {
 export function extractAndFormat(url: string): string {
   const match = url.match(/\/([^/]+)\.html/)
   if (match) {
-    return match[1].replace(/([a-z])([A-Z])/g, '$1 $2')
+    return match[1].replace(/([a-z])([A-Z])/g, "$1 $2")
   }
-  return ''
+  return ""
 }
diff --git a/resources/scripts/create-pr-content.ts b/resources/scripts/create-pr-content.ts
index 56e7696d..53a6630b 100644
--- a/resources/scripts/create-pr-content.ts
+++ b/resources/scripts/create-pr-content.ts
@@ -1,16 +1,16 @@
 // @ts-nocheck
-import * as fs from 'fs'
-import * as path from 'path'
+import * as fs from "fs"
+import * as path from "path"
 
-const baseDir = path.resolve(__dirname, '../../components')
-const docsDir = path.join(baseDir, 'docs')
-const uiDir = path.join(baseDir, 'ui')
-const outputMapFilePath = path.resolve(docsDir, 'generated/previews.ts')
-const jsonOutputFilePath = path.resolve(docsDir, 'generated/previews.json')
+const baseDir = path.resolve(__dirname, "../../components")
+const docsDir = path.join(baseDir, "docs")
+const uiDir = path.join(baseDir, "ui")
+const outputMapFilePath = path.resolve(docsDir, "generated/previews.ts")
+const jsonOutputFilePath = path.resolve(docsDir, "generated/previews.json")
 
 function getAllFiles(dirPath: string, arrayOfFiles: string[] = []) {
   // Exclude directories: 'rehype' in 'docs' and 'outside' in base directory
-  if (dirPath.endsWith(path.join('docs', 'rehype')) || dirPath.endsWith('outside')) {
+  if (dirPath.endsWith(path.join("docs", "rehype")) || dirPath.endsWith("outside")) {
     return arrayOfFiles // Skip these directories and their contents
   }
 
@@ -19,7 +19,7 @@ function getAllFiles(dirPath: string, arrayOfFiles: string[] = []) {
     const filePath = path.join(dirPath, file)
     if (fs.statSync(filePath).isDirectory()) {
       arrayOfFiles = getAllFiles(filePath, arrayOfFiles)
-    } else if (file.endsWith('.tsx')) {
+    } else if (file.endsWith(".tsx")) {
       arrayOfFiles.push(filePath)
     }
   })
@@ -27,16 +27,16 @@ function getAllFiles(dirPath: string, arrayOfFiles: string[] = []) {
 }
 
 const components = [...getAllFiles(docsDir), ...getAllFiles(uiDir)]
-  .filter((filePath) => !filePath.includes('/how') && !filePath.includes('/props')) // Exclude specific components
+  .filter((filePath) => !filePath.includes("/how") && !filePath.includes("/props")) // Exclude specific components
   .reduce(
     (acc, filePath) => {
-      const content = fs.readFileSync(filePath, 'utf8') // Read the file content
-      const relativePath = path.relative(baseDir, filePath).replace(/\\/g, '/').replace('.tsx', '')
+      const content = fs.readFileSync(filePath, "utf8") // Read the file content
+      const relativePath = path.relative(baseDir, filePath).replace(/\\/g, "/").replace(".tsx", "")
       const importPath = `@/components/${relativePath}`
-      const key = relativePath.split('/').slice(1).join('/')
-      const type = filePath.startsWith(docsDir) ? 'docs' : 'ui' // Determine type based on folder path
+      const key = relativePath.split("/").slice(1).join("/")
+      const type = filePath.startsWith(docsDir) ? "docs" : "ui" // Determine type based on folder path
 
-      if (type === 'docs') {
+      if (type === "docs") {
         acc.tsComponents[key] = {
           component: importPath
         }
@@ -53,17 +53,17 @@ const components = [...getAllFiles(docsDir), ...getAllFiles(uiDir)]
     { tsComponents: {}, jsonComponents: {} }
   )
 
-let previewsContent = '// @ts-nocheck\n'
-previewsContent += '// This file is autogenerated by scripts/create-pr-content.ts.\n'
-previewsContent += '// Do not edit this file directly.\n\n'
+let previewsContent = "// @ts-nocheck\n"
+previewsContent += "// This file is autogenerated by scripts/create-pr-content.ts.\n"
+previewsContent += "// Do not edit this file directly.\n\n"
 previewsContent += "import React from 'react';\n\n"
-previewsContent += 'export const previews: Record<string, any> = {\n'
+previewsContent += "export const previews: Record<string, any> = {\n"
 Object.entries(components.tsComponents).forEach(([key, { component }]) => {
   previewsContent += `  "${key}": {\n`
   previewsContent += `    component: React.lazy(() => import("${component}")),\n`
   previewsContent += `  },\n`
 })
-previewsContent += '};\n'
+previewsContent += "};\n"
 fs.writeFileSync(outputMapFilePath, previewsContent)
 console.log(`Component map generated into ${outputMapFilePath}`)
 
diff --git a/resources/types/global.d.ts b/resources/types/global.d.ts
index 5c636c20..7c015112 100644
--- a/resources/types/global.d.ts
+++ b/resources/types/global.d.ts
@@ -1,8 +1,8 @@
-import 'rehype-pretty-code'
+import "rehype-pretty-code"
 
-declare module 'react-syntax-highlighter/dist/esm/styles/prism'
+declare module "react-syntax-highlighter/dist/esm/styles/prism"
 
-declare module 'rehype-pretty-code' {
+declare module "rehype-pretty-code" {
   interface Options {
     theme?: string
     onVisitLine?: (node: any) => void
diff --git a/resources/types/index.ts b/resources/types/index.ts
index bed19dc9..b1262911 100644
--- a/resources/types/index.ts
+++ b/resources/types/index.ts
@@ -1,4 +1,4 @@
-import type { formatOnlyForTailwindVariable } from '@/resources/lib/colors'
+import type { formatOnlyForTailwindVariable } from "@/resources/lib/colors"
 
 export interface ColorShade {
   shade: string
@@ -11,4 +11,4 @@ export interface ColorItemProps {
 }
 
 export type FormatOnlyForTailwindVariableType =
-  (typeof formatOnlyForTailwindVariable)[number]['format']
+  (typeof formatOnlyForTailwindVariable)[number]["format"]
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 38af6dd7..637183cb 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,105 +1,105 @@
-import { withTV } from 'tailwind-variants/transformer'
-import type { Config } from 'tailwindcss'
-import { fontFamily } from 'tailwindcss/defaultTheme'
+import { withTV } from "tailwind-variants/transformer"
+import type { Config } from "tailwindcss"
+import { fontFamily } from "tailwindcss/defaultTheme"
 
 const config = withTV({
-  darkMode: ['class'],
+  darkMode: ["class"],
   content: [
-    './components/**/*.{ts,tsx}',
-    './app/**/*.{ts,tsx,.md,.mdx}',
-    './src/**/*.{ts,tsx,.md,.mdx}'
+    "./components/**/*.{ts,tsx}",
+    "./app/**/*.{ts,tsx,.md,.mdx}",
+    "./src/**/*.{ts,tsx,.md,.mdx}"
   ],
   theme: {
     container: {
       center: true,
-      padding: '2rem',
+      padding: "2rem",
       screens: {
-        '2xl': '1400px'
+        "2xl": "1400px"
       }
     },
     extend: {
       fontFamily: {
-        sans: ['var(--font-sans)', ...fontFamily.sans],
-        mono: ['var(--font-mono)', ...fontFamily.sans]
+        sans: ["var(--font-sans)", ...fontFamily.sans],
+        mono: ["var(--font-mono)", ...fontFamily.sans]
       },
       colors: {
-        light: 'hsl(var(--light))',
-        dark: 'hsl(var(--dark))',
-        border: 'hsl(var(--border))',
-        input: 'hsl(var(--input))',
-        ring: 'hsl(var(--ring))',
-        toggle: 'hsl(var(--toggle))',
-        background: 'hsl(var(--background))',
-        fg: 'hsl(var(--fg))',
+        light: "hsl(var(--light))",
+        dark: "hsl(var(--dark))",
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        toggle: "hsl(var(--toggle))",
+        background: "hsl(var(--background))",
+        fg: "hsl(var(--fg))",
         primary: {
-          DEFAULT: 'hsl(var(--primary))',
-          fg: 'hsl(var(--primary-fg))',
-          '50': '#eef8ff',
-          '100': '#d8eeff',
-          '200': '#b9e0ff',
-          '300': '#89cfff',
-          '400': '#52b4ff',
-          '500': '#2a91ff',
-          '600': '#0d6efd',
-          '700': '#0c5ae9',
-          '800': '#1149bc',
-          '900': '#144194',
-          '950': '#11295a'
+          DEFAULT: "hsl(var(--primary))",
+          fg: "hsl(var(--primary-fg))",
+          "50": "#eef8ff",
+          "100": "#d8eeff",
+          "200": "#b9e0ff",
+          "300": "#89cfff",
+          "400": "#52b4ff",
+          "500": "#2a91ff",
+          "600": "#0d6efd",
+          "700": "#0c5ae9",
+          "800": "#1149bc",
+          "900": "#144194",
+          "950": "#11295a"
         },
         secondary: {
-          DEFAULT: 'hsl(var(--secondary))',
-          fg: 'hsl(var(--secondary-fg))'
+          DEFAULT: "hsl(var(--secondary))",
+          fg: "hsl(var(--secondary-fg))"
         },
         tertiary: {
-          DEFAULT: 'hsl(var(--tertiary))',
-          fg: 'hsl(var(--tertiary-fg))'
+          DEFAULT: "hsl(var(--tertiary))",
+          fg: "hsl(var(--tertiary-fg))"
         },
         success: {
-          DEFAULT: 'hsl(var(--success))',
-          fg: 'hsl(var(--success-fg))'
+          DEFAULT: "hsl(var(--success))",
+          fg: "hsl(var(--success-fg))"
         },
         info: {
-          DEFAULT: 'hsl(var(--info))',
-          fg: 'hsl(var(--info-fg))'
+          DEFAULT: "hsl(var(--info))",
+          fg: "hsl(var(--info-fg))"
         },
         danger: {
-          DEFAULT: 'hsl(var(--danger))',
-          fg: 'hsl(var(--danger-fg))'
+          DEFAULT: "hsl(var(--danger))",
+          fg: "hsl(var(--danger-fg))"
         },
         warning: {
-          DEFAULT: 'hsl(var(--warning))',
-          fg: 'hsl(var(--warning-fg))'
+          DEFAULT: "hsl(var(--warning))",
+          fg: "hsl(var(--warning-fg))"
         },
         muted: {
-          DEFAULT: 'hsl(var(--muted))',
-          fg: 'hsl(var(--muted-fg))'
+          DEFAULT: "hsl(var(--muted))",
+          fg: "hsl(var(--muted-fg))"
         },
         overlay: {
-          DEFAULT: 'hsl(var(--overlay))',
-          fg: 'hsl(var(--overlay-fg))'
+          DEFAULT: "hsl(var(--overlay))",
+          fg: "hsl(var(--overlay-fg))"
         }
       },
       borderRadius: {
-        lg: 'var(--radius)',
-        md: 'calc(var(--radius) - 2px)',
-        sm: 'calc(var(--radius) - 4px)'
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)"
       },
       keyframes: {
         blink: {
-          '0%': { opacity: '0.2' },
-          '20%': { opacity: '1' },
-          '100% ': { opacity: '0.2' }
+          "0%": { opacity: "0.2" },
+          "20%": { opacity: "1" },
+          "100% ": { opacity: "0.2" }
         }
       },
       animation: {
-        blink: 'blink 1.4s both infinite'
+        blink: "blink 1.4s both infinite"
       }
     }
   },
   plugins: [
-    require('tailwindcss-animate'),
-    require('@tailwindcss/typography'),
-    require('tailwindcss-react-aria-components')
+    require("tailwindcss-animate"),
+    require("@tailwindcss/typography"),
+    require("tailwindcss-react-aria-components")
   ]
 }) satisfies Config
 
diff --git a/velite.config.ts b/velite.config.ts
index 8d258de4..2d65e769 100644
--- a/velite.config.ts
+++ b/velite.config.ts
@@ -1,17 +1,17 @@
-import { transformerNotationDiff } from '@shikijs/transformers'
-import rehypeAutolinkHeadings from 'rehype-autolink-headings'
-import rehypePrettyCode from 'rehype-pretty-code'
-import rehypeSlug from 'rehype-slug'
-import { defineCollection, defineConfig, s } from 'velite'
+import { transformerNotationDiff } from "@shikijs/transformers"
+import rehypeAutolinkHeadings from "rehype-autolink-headings"
+import rehypePrettyCode from "rehype-pretty-code"
+import rehypeSlug from "rehype-slug"
+import { defineCollection, defineConfig, s } from "velite"
 
 const computedFields = <T extends { slug: string }>(data: T) => ({
   ...data,
-  slugAsParams: data.slug.split('/').slice(1).join('/')
+  slugAsParams: data.slug.split("/").slice(1).join("/")
 })
 
 const docs = defineCollection({
-  name: 'Docs',
-  pattern: '**/*.mdx',
+  name: "Docs",
+  pattern: "**/*.mdx",
   schema: s
     .object({
       slug: s.path(),
@@ -28,12 +28,12 @@ const docs = defineCollection({
 })
 
 export default defineConfig({
-  root: 'resources/content',
+  root: "resources/content",
   output: {
-    data: '.velite',
-    assets: 'public/static',
-    base: '/static/',
-    name: '[name]-[hash:6].[ext]',
+    data: ".velite",
+    assets: "public/static",
+    base: "/static/",
+    name: "[name]-[hash:6].[ext]",
     clean: true
   },
   collections: { docs },
@@ -44,20 +44,20 @@ export default defineConfig({
         rehypePrettyCode,
         {
           transformers: [transformerNotationDiff()],
-          theme: 'vesper',
+          theme: "vesper",
           defaultLang: {
-            block: 'tsx',
-            inline: 'plaintext'
+            block: "tsx",
+            inline: "plaintext"
           }
         }
       ],
       [
         rehypeAutolinkHeadings,
         {
-          behavior: 'wrap',
+          behavior: "wrap",
           properties: {
-            className: ['not-prose subheading-anchor'],
-            ariaLabel: 'Link to section'
+            className: ["not-prose subheading-anchor"],
+            ariaLabel: "Link to section"
           }
         }
       ]

From ba1c7b43763e3641093d9a2210bb181ccb3af6c3 Mon Sep 17 00:00:00 2001
From: "Irsyad A. Panjaitan" <irsyad@parsinta.com>
Date: Sat, 17 Aug 2024 02:50:16 +0700
Subject: [PATCH 5/6] fix vpr

---
 .github/workflows/vercel-pull-request.yml | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/.github/workflows/vercel-pull-request.yml b/.github/workflows/vercel-pull-request.yml
index 9a630672..a57804bc 100644
--- a/.github/workflows/vercel-pull-request.yml
+++ b/.github/workflows/vercel-pull-request.yml
@@ -7,6 +7,18 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
+
+      - name: Install Bun
+        run: |
+          curl -fsSL https://bun.sh/install | bash
+          echo "$HOME/.bun/bin" >> $GITHUB_PATH
+
+      - name: Install Global Package with Bun
+        run: bun install --global vercel@latest
+
+      - name: Generate Source Code Preview
+        run: bun run generate-preview
+
       - uses: amondnet/vercel-action@v25
         id: vercel-deploy
         with:

From f2c0a1041b363e0b782e4f6cd2e10891323ba847 Mon Sep 17 00:00:00 2001
From: "Irsyad A. Panjaitan" <44585532+irsyadadl@users.noreply.github.com>
Date: Sat, 17 Aug 2024 02:58:39 +0700
Subject: [PATCH 6/6] Update vercel-pull-request.yml

---
 .github/workflows/vercel-pull-request.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/workflows/vercel-pull-request.yml b/.github/workflows/vercel-pull-request.yml
index a57804bc..0b2f96f1 100644
--- a/.github/workflows/vercel-pull-request.yml
+++ b/.github/workflows/vercel-pull-request.yml
@@ -5,6 +5,7 @@ on:
 jobs:
   build_and_deploy:
     runs-on: ubuntu-latest
+    permissions: write-all
     steps:
       - uses: actions/checkout@v4