From 444a8565b3d80dec0a51b847108d7ba9828bc103 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Wed, 23 Aug 2023 16:50:56 +0800
Subject: [PATCH] feat: add button, input, label basic components

---
 .eslintrc.cjs                                 |    1 +
 apps/www/package.json                         |    1 +
 apps/www/src/lib/registry/default/colors.ts   | 1556 +++++++++++++++++
 .../default/examples/AccordionDemo.vue        |    3 +-
 .../registry/default/examples/PopoverDemo.vue |   33 +-
 apps/www/src/lib/registry/default/theme.ts    |  636 +++++++
 .../www/src/lib/registry/default/ui/button.ts |   41 +
 apps/www/src/lib/registry/default/ui/input.ts |   11 +
 apps/www/src/lib/registry/default/ui/label.ts |   17 +
 apps/www/tailwind.config.js                   |    5 +-
 pnpm-lock.yaml                                |   79 +-
 11 files changed, 2298 insertions(+), 85 deletions(-)
 create mode 100644 apps/www/src/lib/registry/default/colors.ts
 create mode 100644 apps/www/src/lib/registry/default/theme.ts
 create mode 100644 apps/www/src/lib/registry/default/ui/button.ts
 create mode 100644 apps/www/src/lib/registry/default/ui/input.ts
 create mode 100644 apps/www/src/lib/registry/default/ui/label.ts

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 742657e8..9466ea4a 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -6,6 +6,7 @@ module.exports = {
   extends: '@antfu',
 
   rules: {
+    'vue/no-reserved-component-names': 'off',
     'symbol-description': 'off',
     'no-console': 'warn',
     'no-tabs': 'off',
diff --git a/apps/www/package.json b/apps/www/package.json
index 86e36904..06030894 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -26,6 +26,7 @@
     "clsx": "^2.0.0",
     "lucide-vue-next": "^0.268.0",
     "radix-vue": "file:../../../radix-vue/packages/radix-vue",
+    "tailwindcss-animate": "^1.0.6",
     "vue": "^3.3.4"
   },
   "devDependencies": {
diff --git a/apps/www/src/lib/registry/default/colors.ts b/apps/www/src/lib/registry/default/colors.ts
new file mode 100644
index 00000000..e089777f
--- /dev/null
+++ b/apps/www/src/lib/registry/default/colors.ts
@@ -0,0 +1,1556 @@
+export const colors = {
+  inherit: 'inherit',
+  current: 'currentColor',
+  transparent: 'transparent',
+  black: {
+    hex: '#000000',
+    rgb: 'rgb(0,0,0)',
+    hsl: 'hsl(0,0%,0%)',
+  },
+  white: {
+    hex: '#ffffff',
+    rgb: 'rgb(255,255,255)',
+    hsl: 'hsl(0,0%,100%)',
+  },
+  slate: [
+    {
+      scale: 50,
+      hex: '#f8fafc',
+      rgb: 'rgb(248,250,252)',
+      hsl: 'hsl(210,40%,98%)',
+    },
+    {
+      scale: 100,
+      hex: '#f1f5f9',
+      rgb: 'rgb(241,245,249)',
+      hsl: 'hsl(210,40%,96.1%)',
+    },
+    {
+      scale: 200,
+      hex: '#e2e8f0',
+      rgb: 'rgb(226,232,240)',
+      hsl: 'hsl(214.3,31.8%,91.4%)',
+    },
+    {
+      scale: 300,
+      hex: '#cbd5e1',
+      rgb: 'rgb(203,213,225)',
+      hsl: 'hsl(212.7,26.8%,83.9%)',
+    },
+    {
+      scale: 400,
+      hex: '#94a3b8',
+      rgb: 'rgb(148,163,184)',
+      hsl: 'hsl(215,20.2%,65.1%)',
+    },
+    {
+      scale: 500,
+      hex: '#64748b',
+      rgb: 'rgb(100,116,139)',
+      hsl: 'hsl(215.4,16.3%,46.9%)',
+    },
+    {
+      scale: 600,
+      hex: '#475569',
+      rgb: 'rgb(71,85,105)',
+      hsl: 'hsl(215.3,19.3%,34.5%)',
+    },
+    {
+      scale: 700,
+      hex: '#334155',
+      rgb: 'rgb(51,65,85)',
+      hsl: 'hsl(215.3,25%,26.7%)',
+    },
+    {
+      scale: 800,
+      hex: '#1e293b',
+      rgb: 'rgb(30,41,59)',
+      hsl: 'hsl(217.2,32.6%,17.5%)',
+    },
+    {
+      scale: 900,
+      hex: '#0f172a',
+      rgb: 'rgb(15,23,42)',
+      hsl: 'hsl(222.2,47.4%,11.2%)',
+    },
+    {
+      scale: 950,
+      hex: '#020617',
+      rgb: 'rgb(2,6,23)',
+      hsl: 'hsl(222.2,84%,4.9%)',
+    },
+  ],
+  gray: [
+    {
+      scale: 50,
+      hex: '#f9fafb',
+      rgb: 'rgb(249,250,251)',
+      hsl: 'hsl(210,20%,98%)',
+    },
+    {
+      scale: 100,
+      hex: '#f3f4f6',
+      rgb: 'rgb(243,244,246)',
+      hsl: 'hsl(220,14.3%,95.9%)',
+    },
+    {
+      scale: 200,
+      hex: '#e5e7eb',
+      rgb: 'rgb(229,231,235)',
+      hsl: 'hsl(220,13%,91%)',
+    },
+    {
+      scale: 300,
+      hex: '#d1d5db',
+      rgb: 'rgb(209,213,219)',
+      hsl: 'hsl(216,12.2%,83.9%)',
+    },
+    {
+      scale: 400,
+      hex: '#9ca3af',
+      rgb: 'rgb(156,163,175)',
+      hsl: 'hsl(217.9,10.6%,64.9%)',
+    },
+    {
+      scale: 500,
+      hex: '#6b7280',
+      rgb: 'rgb(107,114,128)',
+      hsl: 'hsl(220,8.9%,46.1%)',
+    },
+    {
+      scale: 600,
+      hex: '#4b5563',
+      rgb: 'rgb(75,85,99)',
+      hsl: 'hsl(215,13.8%,34.1%)',
+    },
+    {
+      scale: 700,
+      hex: '#374151',
+      rgb: 'rgb(55,65,81)',
+      hsl: 'hsl(216.9,19.1%,26.7%)',
+    },
+    {
+      scale: 800,
+      hex: '#1f2937',
+      rgb: 'rgb(31,41,55)',
+      hsl: 'hsl(215,27.9%,16.9%)',
+    },
+    {
+      scale: 900,
+      hex: '#111827',
+      rgb: 'rgb(17,24,39)',
+      hsl: 'hsl(220.9,39.3%,11%)',
+    },
+    {
+      scale: 950,
+      hex: '#030712',
+      rgb: 'rgb(3,7,18)',
+      hsl: 'hsl(224,71.4%,4.1%)',
+    },
+  ],
+  zinc: [
+    {
+      scale: 50,
+      hex: '#fafafa',
+      rgb: 'rgb(250,250,250)',
+      hsl: 'hsl(0,0%,98%)',
+    },
+    {
+      scale: 100,
+      hex: '#f4f4f5',
+      rgb: 'rgb(244,244,245)',
+      hsl: 'hsl(240,4.8%,95.9%)',
+    },
+    {
+      scale: 200,
+      hex: '#e4e4e7',
+      rgb: 'rgb(228,228,231)',
+      hsl: 'hsl(240,5.9%,90%)',
+    },
+    {
+      scale: 300,
+      hex: '#d4d4d8',
+      rgb: 'rgb(212,212,216)',
+      hsl: 'hsl(240,4.9%,83.9%)',
+    },
+    {
+      scale: 400,
+      hex: '#a1a1aa',
+      rgb: 'rgb(161,161,170)',
+      hsl: 'hsl(240,5%,64.9%)',
+    },
+    {
+      scale: 500,
+      hex: '#71717a',
+      rgb: 'rgb(113,113,122)',
+      hsl: 'hsl(240,3.8%,46.1%)',
+    },
+    {
+      scale: 600,
+      hex: '#52525b',
+      rgb: 'rgb(82,82,91)',
+      hsl: 'hsl(240,5.2%,33.9%)',
+    },
+    {
+      scale: 700,
+      hex: '#3f3f46',
+      rgb: 'rgb(63,63,70)',
+      hsl: 'hsl(240,5.3%,26.1%)',
+    },
+    {
+      scale: 800,
+      hex: '#27272a',
+      rgb: 'rgb(39,39,42)',
+      hsl: 'hsl(240,3.7%,15.9%)',
+    },
+    {
+      scale: 900,
+      hex: '#18181b',
+      rgb: 'rgb(24,24,27)',
+      hsl: 'hsl(240,5.9%,10%)',
+    },
+    {
+      scale: 950,
+      hex: '#09090b',
+      rgb: 'rgb(9,9,11)',
+      hsl: 'hsl(240,10%,3.9%)',
+    },
+  ],
+  neutral: [
+    {
+      scale: 50,
+      hex: '#fafafa',
+      rgb: 'rgb(250,250,250)',
+      hsl: 'hsl(0,0%,98%)',
+    },
+    {
+      scale: 100,
+      hex: '#f5f5f5',
+      rgb: 'rgb(245,245,245)',
+      hsl: 'hsl(0,0%,96.1%)',
+    },
+    {
+      scale: 200,
+      hex: '#e5e5e5',
+      rgb: 'rgb(229,229,229)',
+      hsl: 'hsl(0,0%,89.8%)',
+    },
+    {
+      scale: 300,
+      hex: '#d4d4d4',
+      rgb: 'rgb(212,212,212)',
+      hsl: 'hsl(0,0%,83.1%)',
+    },
+    {
+      scale: 400,
+      hex: '#a3a3a3',
+      rgb: 'rgb(163,163,163)',
+      hsl: 'hsl(0,0%,63.9%)',
+    },
+    {
+      scale: 500,
+      hex: '#737373',
+      rgb: 'rgb(115,115,115)',
+      hsl: 'hsl(0,0%,45.1%)',
+    },
+    {
+      scale: 600,
+      hex: '#525252',
+      rgb: 'rgb(82,82,82)',
+      hsl: 'hsl(0,0%,32.2%)',
+    },
+    {
+      scale: 700,
+      hex: '#404040',
+      rgb: 'rgb(64,64,64)',
+      hsl: 'hsl(0,0%,25.1%)',
+    },
+    {
+      scale: 800,
+      hex: '#262626',
+      rgb: 'rgb(38,38,38)',
+      hsl: 'hsl(0,0%,14.9%)',
+    },
+    {
+      scale: 900,
+      hex: '#171717',
+      rgb: 'rgb(23,23,23)',
+      hsl: 'hsl(0,0%,9%)',
+    },
+    {
+      scale: 950,
+      hex: '#0a0a0a',
+      rgb: 'rgb(10,10,10)',
+      hsl: 'hsl(0,0%,3.9%)',
+    },
+  ],
+  stone: [
+    {
+      scale: 50,
+      hex: '#fafaf9',
+      rgb: 'rgb(250,250,249)',
+      hsl: 'hsl(60,9.1%,97.8%)',
+    },
+    {
+      scale: 100,
+      hex: '#f5f5f4',
+      rgb: 'rgb(245,245,244)',
+      hsl: 'hsl(60,4.8%,95.9%)',
+    },
+    {
+      scale: 200,
+      hex: '#e7e5e4',
+      rgb: 'rgb(231,229,228)',
+      hsl: 'hsl(20,5.9%,90%)',
+    },
+    {
+      scale: 300,
+      hex: '#d6d3d1',
+      rgb: 'rgb(214,211,209)',
+      hsl: 'hsl(24,5.7%,82.9%)',
+    },
+    {
+      scale: 400,
+      hex: '#a8a29e',
+      rgb: 'rgb(168,162,158)',
+      hsl: 'hsl(24,5.4%,63.9%)',
+    },
+    {
+      scale: 500,
+      hex: '#78716c',
+      rgb: 'rgb(120,113,108)',
+      hsl: 'hsl(25,5.3%,44.7%)',
+    },
+    {
+      scale: 600,
+      hex: '#57534e',
+      rgb: 'rgb(87,83,78)',
+      hsl: 'hsl(33.3,5.5%,32.4%)',
+    },
+    {
+      scale: 700,
+      hex: '#44403c',
+      rgb: 'rgb(68,64,60)',
+      hsl: 'hsl(30,6.3%,25.1%)',
+    },
+    {
+      scale: 800,
+      hex: '#292524',
+      rgb: 'rgb(41,37,36)',
+      hsl: 'hsl(12,6.5%,15.1%)',
+    },
+    {
+      scale: 900,
+      hex: '#1c1917',
+      rgb: 'rgb(28,25,23)',
+      hsl: 'hsl(24,9.8%,10%)',
+    },
+    {
+      scale: 950,
+      hex: '#0c0a09',
+      rgb: 'rgb(12,10,9)',
+      hsl: 'hsl(20,14.3%,4.1%)',
+    },
+  ],
+  red: [
+    {
+      scale: 50,
+      hex: '#fef2f2',
+      rgb: 'rgb(254,242,242)',
+      hsl: 'hsl(0,85.7%,97.3%)',
+    },
+    {
+      scale: 100,
+      hex: '#fee2e2',
+      rgb: 'rgb(254,226,226)',
+      hsl: 'hsl(0,93.3%,94.1%)',
+    },
+    {
+      scale: 200,
+      hex: '#fecaca',
+      rgb: 'rgb(254,202,202)',
+      hsl: 'hsl(0,96.3%,89.4%)',
+    },
+    {
+      scale: 300,
+      hex: '#fca5a5',
+      rgb: 'rgb(252,165,165)',
+      hsl: 'hsl(0,93.5%,81.8%)',
+    },
+    {
+      scale: 400,
+      hex: '#f87171',
+      rgb: 'rgb(248,113,113)',
+      hsl: 'hsl(0,90.6%,70.8%)',
+    },
+    {
+      scale: 500,
+      hex: '#ef4444',
+      rgb: 'rgb(239,68,68)',
+      hsl: 'hsl(0,84.2%,60.2%)',
+    },
+    {
+      scale: 600,
+      hex: '#dc2626',
+      rgb: 'rgb(220,38,38)',
+      hsl: 'hsl(0,72.2%,50.6%)',
+    },
+    {
+      scale: 700,
+      hex: '#b91c1c',
+      rgb: 'rgb(185,28,28)',
+      hsl: 'hsl(0,73.7%,41.8%)',
+    },
+    {
+      scale: 800,
+      hex: '#991b1b',
+      rgb: 'rgb(153,27,27)',
+      hsl: 'hsl(0,70%,35.3%)',
+    },
+    {
+      scale: 900,
+      hex: '#7f1d1d',
+      rgb: 'rgb(127,29,29)',
+      hsl: 'hsl(0,62.8%,30.6%)',
+    },
+    {
+      scale: 950,
+      hex: '#450a0a',
+      rgb: 'rgb(69,10,10)',
+      hsl: 'hsl(0,74.7%,15.5%)',
+    },
+  ],
+  orange: [
+    {
+      scale: 50,
+      hex: '#fff7ed',
+      rgb: 'rgb(255,247,237)',
+      hsl: 'hsl(33.3,100%,96.5%)',
+    },
+    {
+      scale: 100,
+      hex: '#ffedd5',
+      rgb: 'rgb(255,237,213)',
+      hsl: 'hsl(34.3,100%,91.8%)',
+    },
+    {
+      scale: 200,
+      hex: '#fed7aa',
+      rgb: 'rgb(254,215,170)',
+      hsl: 'hsl(32.1,97.7%,83.1%)',
+    },
+    {
+      scale: 300,
+      hex: '#fdba74',
+      rgb: 'rgb(253,186,116)',
+      hsl: 'hsl(30.7,97.2%,72.4%)',
+    },
+    {
+      scale: 400,
+      hex: '#fb923c',
+      rgb: 'rgb(251,146,60)',
+      hsl: 'hsl(27,96%,61%)',
+    },
+    {
+      scale: 500,
+      hex: '#f97316',
+      rgb: 'rgb(249,115,22)',
+      hsl: 'hsl(24.6,95%,53.1%)',
+    },
+    {
+      scale: 600,
+      hex: '#ea580c',
+      rgb: 'rgb(234,88,12)',
+      hsl: 'hsl(20.5,90.2%,48.2%)',
+    },
+    {
+      scale: 700,
+      hex: '#c2410c',
+      rgb: 'rgb(194,65,12)',
+      hsl: 'hsl(17.5,88.3%,40.4%)',
+    },
+    {
+      scale: 800,
+      hex: '#9a3412',
+      rgb: 'rgb(154,52,18)',
+      hsl: 'hsl(15,79.1%,33.7%)',
+    },
+    {
+      scale: 900,
+      hex: '#7c2d12',
+      rgb: 'rgb(124,45,18)',
+      hsl: 'hsl(15.3,74.6%,27.8%)',
+    },
+    {
+      scale: 950,
+      hex: '#431407',
+      rgb: 'rgb(67,20,7)',
+      hsl: 'hsl(13,81.1%,14.5%)',
+    },
+  ],
+  amber: [
+    {
+      scale: 50,
+      hex: '#fffbeb',
+      rgb: 'rgb(255,251,235)',
+      hsl: 'hsl(48,100%,96.1%)',
+    },
+    {
+      scale: 100,
+      hex: '#fef3c7',
+      rgb: 'rgb(254,243,199)',
+      hsl: 'hsl(48,96.5%,88.8%)',
+    },
+    {
+      scale: 200,
+      hex: '#fde68a',
+      rgb: 'rgb(253,230,138)',
+      hsl: 'hsl(48,96.6%,76.7%)',
+    },
+    {
+      scale: 300,
+      hex: '#fcd34d',
+      rgb: 'rgb(252,211,77)',
+      hsl: 'hsl(45.9,96.7%,64.5%)',
+    },
+    {
+      scale: 400,
+      hex: '#fbbf24',
+      rgb: 'rgb(251,191,36)',
+      hsl: 'hsl(43.3,96.4%,56.3%)',
+    },
+    {
+      scale: 500,
+      hex: '#f59e0b',
+      rgb: 'rgb(245,158,11)',
+      hsl: 'hsl(37.7,92.1%,50.2%)',
+    },
+    {
+      scale: 600,
+      hex: '#d97706',
+      rgb: 'rgb(217,119,6)',
+      hsl: 'hsl(32.1,94.6%,43.7%)',
+    },
+    {
+      scale: 700,
+      hex: '#b45309',
+      rgb: 'rgb(180,83,9)',
+      hsl: 'hsl(26,90.5%,37.1%)',
+    },
+    {
+      scale: 800,
+      hex: '#92400e',
+      rgb: 'rgb(146,64,14)',
+      hsl: 'hsl(22.7,82.5%,31.4%)',
+    },
+    {
+      scale: 900,
+      hex: '#78350f',
+      rgb: 'rgb(120,53,15)',
+      hsl: 'hsl(21.7,77.8%,26.5%)',
+    },
+    {
+      scale: 950,
+      hex: '#451a03',
+      rgb: 'rgb(69,26,3)',
+      hsl: 'hsl(20.9,91.7%,14.1%)',
+    },
+  ],
+  yellow: [
+    {
+      scale: 50,
+      hex: '#fefce8',
+      rgb: 'rgb(254,252,232)',
+      hsl: 'hsl(54.5,91.7%,95.3%)',
+    },
+    {
+      scale: 100,
+      hex: '#fef9c3',
+      rgb: 'rgb(254,249,195)',
+      hsl: 'hsl(54.9,96.7%,88%)',
+    },
+    {
+      scale: 200,
+      hex: '#fef08a',
+      rgb: 'rgb(254,240,138)',
+      hsl: 'hsl(52.8,98.3%,76.9%)',
+    },
+    {
+      scale: 300,
+      hex: '#fde047',
+      rgb: 'rgb(253,224,71)',
+      hsl: 'hsl(50.4,97.8%,63.5%)',
+    },
+    {
+      scale: 400,
+      hex: '#facc15',
+      rgb: 'rgb(250,204,21)',
+      hsl: 'hsl(47.9,95.8%,53.1%)',
+    },
+    {
+      scale: 500,
+      hex: '#eab308',
+      rgb: 'rgb(234,179,8)',
+      hsl: 'hsl(45.4,93.4%,47.5%)',
+    },
+    {
+      scale: 600,
+      hex: '#ca8a04',
+      rgb: 'rgb(202,138,4)',
+      hsl: 'hsl(40.6,96.1%,40.4%)',
+    },
+    {
+      scale: 700,
+      hex: '#a16207',
+      rgb: 'rgb(161,98,7)',
+      hsl: 'hsl(35.5,91.7%,32.9%)',
+    },
+    {
+      scale: 800,
+      hex: '#854d0e',
+      rgb: 'rgb(133,77,14)',
+      hsl: 'hsl(31.8,81%,28.8%)',
+    },
+    {
+      scale: 900,
+      hex: '#713f12',
+      rgb: 'rgb(113,63,18)',
+      hsl: 'hsl(28.4,72.5%,25.7%)',
+    },
+    {
+      scale: 950,
+      hex: '#422006',
+      rgb: 'rgb(66,32,6)',
+      hsl: 'hsl(26,83.3%,14.1%)',
+    },
+  ],
+  lime: [
+    {
+      scale: 50,
+      hex: '#f7fee7',
+      rgb: 'rgb(247,254,231)',
+      hsl: 'hsl(78.3,92%,95.1%)',
+    },
+    {
+      scale: 100,
+      hex: '#ecfccb',
+      rgb: 'rgb(236,252,203)',
+      hsl: 'hsl(79.6,89.1%,89.2%)',
+    },
+    {
+      scale: 200,
+      hex: '#d9f99d',
+      rgb: 'rgb(217,249,157)',
+      hsl: 'hsl(80.9,88.5%,79.6%)',
+    },
+    {
+      scale: 300,
+      hex: '#bef264',
+      rgb: 'rgb(190,242,100)',
+      hsl: 'hsl(82,84.5%,67.1%)',
+    },
+    {
+      scale: 400,
+      hex: '#a3e635',
+      rgb: 'rgb(163,230,53)',
+      hsl: 'hsl(82.7,78%,55.5%)',
+    },
+    {
+      scale: 500,
+      hex: '#84cc16',
+      rgb: 'rgb(132,204,22)',
+      hsl: 'hsl(83.7,80.5%,44.3%)',
+    },
+    {
+      scale: 600,
+      hex: '#65a30d',
+      rgb: 'rgb(101,163,13)',
+      hsl: 'hsl(84.8,85.2%,34.5%)',
+    },
+    {
+      scale: 700,
+      hex: '#4d7c0f',
+      rgb: 'rgb(77,124,15)',
+      hsl: 'hsl(85.9,78.4%,27.3%)',
+    },
+    {
+      scale: 800,
+      hex: '#3f6212',
+      rgb: 'rgb(63,98,18)',
+      hsl: 'hsl(86.3,69%,22.7%)',
+    },
+    {
+      scale: 900,
+      hex: '#365314',
+      rgb: 'rgb(54,83,20)',
+      hsl: 'hsl(87.6,61.2%,20.2%)',
+    },
+    {
+      scale: 950,
+      hex: '#1a2e05',
+      rgb: 'rgb(26,46,5)',
+      hsl: 'hsl(89.3,80.4%,10%)',
+    },
+  ],
+  green: [
+    {
+      scale: 50,
+      hex: '#f0fdf4',
+      rgb: 'rgb(240,253,244)',
+      hsl: 'hsl(138.5,76.5%,96.7%)',
+    },
+    {
+      scale: 100,
+      hex: '#dcfce7',
+      rgb: 'rgb(220,252,231)',
+      hsl: 'hsl(140.6,84.2%,92.5%)',
+    },
+    {
+      scale: 200,
+      hex: '#bbf7d0',
+      rgb: 'rgb(187,247,208)',
+      hsl: 'hsl(141,78.9%,85.1%)',
+    },
+    {
+      scale: 300,
+      hex: '#86efac',
+      rgb: 'rgb(134,239,172)',
+      hsl: 'hsl(141.7,76.6%,73.1%)',
+    },
+    {
+      scale: 400,
+      hex: '#4ade80',
+      rgb: 'rgb(74,222,128)',
+      hsl: 'hsl(141.9,69.2%,58%)',
+    },
+    {
+      scale: 500,
+      hex: '#22c55e',
+      rgb: 'rgb(34,197,94)',
+      hsl: 'hsl(142.1,70.6%,45.3%)',
+    },
+    {
+      scale: 600,
+      hex: '#16a34a',
+      rgb: 'rgb(22,163,74)',
+      hsl: 'hsl(142.1,76.2%,36.3%)',
+    },
+    {
+      scale: 700,
+      hex: '#15803d',
+      rgb: 'rgb(21,128,61)',
+      hsl: 'hsl(142.4,71.8%,29.2%)',
+    },
+    {
+      scale: 800,
+      hex: '#166534',
+      rgb: 'rgb(22,101,52)',
+      hsl: 'hsl(142.8,64.2%,24.1%)',
+    },
+    {
+      scale: 900,
+      hex: '#14532d',
+      rgb: 'rgb(20,83,45)',
+      hsl: 'hsl(143.8,61.2%,20.2%)',
+    },
+    {
+      scale: 950,
+      hex: '#052e16',
+      rgb: 'rgb(5,46,22)',
+      hsl: 'hsl(144.9,80.4%,10%)',
+    },
+  ],
+  emerald: [
+    {
+      scale: 50,
+      hex: '#ecfdf5',
+      rgb: 'rgb(236,253,245)',
+      hsl: 'hsl(151.8,81%,95.9%)',
+    },
+    {
+      scale: 100,
+      hex: '#d1fae5',
+      rgb: 'rgb(209,250,229)',
+      hsl: 'hsl(149.3,80.4%,90%)',
+    },
+    {
+      scale: 200,
+      hex: '#a7f3d0',
+      rgb: 'rgb(167,243,208)',
+      hsl: 'hsl(152.4,76%,80.4%)',
+    },
+    {
+      scale: 300,
+      hex: '#6ee7b7',
+      rgb: 'rgb(110,231,183)',
+      hsl: 'hsl(156.2,71.6%,66.9%)',
+    },
+    {
+      scale: 400,
+      hex: '#34d399',
+      rgb: 'rgb(52,211,153)',
+      hsl: 'hsl(158.1,64.4%,51.6%)',
+    },
+    {
+      scale: 500,
+      hex: '#10b981',
+      rgb: 'rgb(16,185,129)',
+      hsl: 'hsl(160.1,84.1%,39.4%)',
+    },
+    {
+      scale: 600,
+      hex: '#059669',
+      rgb: 'rgb(5,150,105)',
+      hsl: 'hsl(161.4,93.5%,30.4%)',
+    },
+    {
+      scale: 700,
+      hex: '#047857',
+      rgb: 'rgb(4,120,87)',
+      hsl: 'hsl(162.9,93.5%,24.3%)',
+    },
+    {
+      scale: 800,
+      hex: '#065f46',
+      rgb: 'rgb(6,95,70)',
+      hsl: 'hsl(163.1,88.1%,19.8%)',
+    },
+    {
+      scale: 900,
+      hex: '#064e3b',
+      rgb: 'rgb(6,78,59)',
+      hsl: 'hsl(164.2,85.7%,16.5%)',
+    },
+    {
+      scale: 950,
+      hex: '#022c22',
+      rgb: 'rgb(2,44,34)',
+      hsl: 'hsl(165.7,91.3%,9%)',
+    },
+  ],
+  teal: [
+    {
+      scale: 50,
+      hex: '#f0fdfa',
+      rgb: 'rgb(240,253,250)',
+      hsl: 'hsl(166.2,76.5%,96.7%)',
+    },
+    {
+      scale: 100,
+      hex: '#ccfbf1',
+      rgb: 'rgb(204,251,241)',
+      hsl: 'hsl(167.2,85.5%,89.2%)',
+    },
+    {
+      scale: 200,
+      hex: '#99f6e4',
+      rgb: 'rgb(153,246,228)',
+      hsl: 'hsl(168.4,83.8%,78.2%)',
+    },
+    {
+      scale: 300,
+      hex: '#5eead4',
+      rgb: 'rgb(94,234,212)',
+      hsl: 'hsl(170.6,76.9%,64.3%)',
+    },
+    {
+      scale: 400,
+      hex: '#2dd4bf',
+      rgb: 'rgb(45,212,191)',
+      hsl: 'hsl(172.5,66%,50.4%)',
+    },
+    {
+      scale: 500,
+      hex: '#14b8a6',
+      rgb: 'rgb(20,184,166)',
+      hsl: 'hsl(173.4,80.4%,40%)',
+    },
+    {
+      scale: 600,
+      hex: '#0d9488',
+      rgb: 'rgb(13,148,136)',
+      hsl: 'hsl(174.7,83.9%,31.6%)',
+    },
+    {
+      scale: 700,
+      hex: '#0f766e',
+      rgb: 'rgb(15,118,110)',
+      hsl: 'hsl(175.3,77.4%,26.1%)',
+    },
+    {
+      scale: 800,
+      hex: '#115e59',
+      rgb: 'rgb(17,94,89)',
+      hsl: 'hsl(176.1,69.4%,21.8%)',
+    },
+    {
+      scale: 900,
+      hex: '#134e4a',
+      rgb: 'rgb(19,78,74)',
+      hsl: 'hsl(175.9,60.8%,19%)',
+    },
+    {
+      scale: 950,
+      hex: '#042f2e',
+      rgb: 'rgb(4,47,46)',
+      hsl: 'hsl(178.6,84.3%,10%)',
+    },
+  ],
+  cyan: [
+    {
+      scale: 50,
+      hex: '#ecfeff',
+      rgb: 'rgb(236,254,255)',
+      hsl: 'hsl(183.2,100%,96.3%)',
+    },
+    {
+      scale: 100,
+      hex: '#cffafe',
+      rgb: 'rgb(207,250,254)',
+      hsl: 'hsl(185.1,95.9%,90.4%)',
+    },
+    {
+      scale: 200,
+      hex: '#a5f3fc',
+      rgb: 'rgb(165,243,252)',
+      hsl: 'hsl(186.2,93.5%,81.8%)',
+    },
+    {
+      scale: 300,
+      hex: '#67e8f9',
+      rgb: 'rgb(103,232,249)',
+      hsl: 'hsl(187,92.4%,69%)',
+    },
+    {
+      scale: 400,
+      hex: '#22d3ee',
+      rgb: 'rgb(34,211,238)',
+      hsl: 'hsl(187.9,85.7%,53.3%)',
+    },
+    {
+      scale: 500,
+      hex: '#06b6d4',
+      rgb: 'rgb(6,182,212)',
+      hsl: 'hsl(188.7,94.5%,42.7%)',
+    },
+    {
+      scale: 600,
+      hex: '#0891b2',
+      rgb: 'rgb(8,145,178)',
+      hsl: 'hsl(191.6,91.4%,36.5%)',
+    },
+    {
+      scale: 700,
+      hex: '#0e7490',
+      rgb: 'rgb(14,116,144)',
+      hsl: 'hsl(192.9,82.3%,31%)',
+    },
+    {
+      scale: 800,
+      hex: '#155e75',
+      rgb: 'rgb(21,94,117)',
+      hsl: 'hsl(194.4,69.6%,27.1%)',
+    },
+    {
+      scale: 900,
+      hex: '#164e63',
+      rgb: 'rgb(22,78,99)',
+      hsl: 'hsl(196.4,63.6%,23.7%)',
+    },
+    {
+      scale: 950,
+      hex: '#083344',
+      rgb: 'rgb(8,51,68)',
+      hsl: 'hsl(197,78.9%,14.9%)',
+    },
+  ],
+  sky: [
+    {
+      scale: 50,
+      hex: '#f0f9ff',
+      rgb: 'rgb(240,249,255)',
+      hsl: 'hsl(204,100%,97.1%)',
+    },
+    {
+      scale: 100,
+      hex: '#e0f2fe',
+      rgb: 'rgb(224,242,254)',
+      hsl: 'hsl(204,93.8%,93.7%)',
+    },
+    {
+      scale: 200,
+      hex: '#bae6fd',
+      rgb: 'rgb(186,230,253)',
+      hsl: 'hsl(200.6,94.4%,86.1%)',
+    },
+    {
+      scale: 300,
+      hex: '#7dd3fc',
+      rgb: 'rgb(125,211,252)',
+      hsl: 'hsl(199.4,95.5%,73.9%)',
+    },
+    {
+      scale: 400,
+      hex: '#38bdf8',
+      rgb: 'rgb(56,189,248)',
+      hsl: 'hsl(198.4,93.2%,59.6%)',
+    },
+    {
+      scale: 500,
+      hex: '#0ea5e9',
+      rgb: 'rgb(14,165,233)',
+      hsl: 'hsl(198.6,88.7%,48.4%)',
+    },
+    {
+      scale: 600,
+      hex: '#0284c7',
+      rgb: 'rgb(2,132,199)',
+      hsl: 'hsl(200.4,98%,39.4%)',
+    },
+    {
+      scale: 700,
+      hex: '#0369a1',
+      rgb: 'rgb(3,105,161)',
+      hsl: 'hsl(201.3,96.3%,32.2%)',
+    },
+    {
+      scale: 800,
+      hex: '#075985',
+      rgb: 'rgb(7,89,133)',
+      hsl: 'hsl(201,90%,27.5%)',
+    },
+    {
+      scale: 900,
+      hex: '#0c4a6e',
+      rgb: 'rgb(12,74,110)',
+      hsl: 'hsl(202,80.3%,23.9%)',
+    },
+    {
+      scale: 950,
+      hex: '#082f49',
+      rgb: 'rgb(8,47,73)',
+      hsl: 'hsl(204,80.2%,15.9%)',
+    },
+  ],
+  blue: [
+    {
+      scale: 50,
+      hex: '#eff6ff',
+      rgb: 'rgb(239,246,255)',
+      hsl: 'hsl(213.8,100%,96.9%)',
+    },
+    {
+      scale: 100,
+      hex: '#dbeafe',
+      rgb: 'rgb(219,234,254)',
+      hsl: 'hsl(214.3,94.6%,92.7%)',
+    },
+    {
+      scale: 200,
+      hex: '#bfdbfe',
+      rgb: 'rgb(191,219,254)',
+      hsl: 'hsl(213.3,96.9%,87.3%)',
+    },
+    {
+      scale: 300,
+      hex: '#93c5fd',
+      rgb: 'rgb(147,197,253)',
+      hsl: 'hsl(211.7,96.4%,78.4%)',
+    },
+    {
+      scale: 400,
+      hex: '#60a5fa',
+      rgb: 'rgb(96,165,250)',
+      hsl: 'hsl(213.1,93.9%,67.8%)',
+    },
+    {
+      scale: 500,
+      hex: '#3b82f6',
+      rgb: 'rgb(59,130,246)',
+      hsl: 'hsl(217.2,91.2%,59.8%)',
+    },
+    {
+      scale: 600,
+      hex: '#2563eb',
+      rgb: 'rgb(37,99,235)',
+      hsl: 'hsl(221.2,83.2%,53.3%)',
+    },
+    {
+      scale: 700,
+      hex: '#1d4ed8',
+      rgb: 'rgb(29,78,216)',
+      hsl: 'hsl(224.3,76.3%,48%)',
+    },
+    {
+      scale: 800,
+      hex: '#1e40af',
+      rgb: 'rgb(30,64,175)',
+      hsl: 'hsl(225.9,70.7%,40.2%)',
+    },
+    {
+      scale: 900,
+      hex: '#1e3a8a',
+      rgb: 'rgb(30,58,138)',
+      hsl: 'hsl(224.4,64.3%,32.9%)',
+    },
+    {
+      scale: 950,
+      hex: '#172554',
+      rgb: 'rgb(23,37,84)',
+      hsl: 'hsl(226.2,57%,21%)',
+    },
+  ],
+  indigo: [
+    {
+      scale: 50,
+      hex: '#eef2ff',
+      rgb: 'rgb(238,242,255)',
+      hsl: 'hsl(225.9,100%,96.7%)',
+    },
+    {
+      scale: 100,
+      hex: '#e0e7ff',
+      rgb: 'rgb(224,231,255)',
+      hsl: 'hsl(226.5,100%,93.9%)',
+    },
+    {
+      scale: 200,
+      hex: '#c7d2fe',
+      rgb: 'rgb(199,210,254)',
+      hsl: 'hsl(228,96.5%,88.8%)',
+    },
+    {
+      scale: 300,
+      hex: '#a5b4fc',
+      rgb: 'rgb(165,180,252)',
+      hsl: 'hsl(229.7,93.5%,81.8%)',
+    },
+    {
+      scale: 400,
+      hex: '#818cf8',
+      rgb: 'rgb(129,140,248)',
+      hsl: 'hsl(234.5,89.5%,73.9%)',
+    },
+    {
+      scale: 500,
+      hex: '#6366f1',
+      rgb: 'rgb(99,102,241)',
+      hsl: 'hsl(238.7,83.5%,66.7%)',
+    },
+    {
+      scale: 600,
+      hex: '#4f46e5',
+      rgb: 'rgb(79,70,229)',
+      hsl: 'hsl(243.4,75.4%,58.6%)',
+    },
+    {
+      scale: 700,
+      hex: '#4338ca',
+      rgb: 'rgb(67,56,202)',
+      hsl: 'hsl(244.5,57.9%,50.6%)',
+    },
+    {
+      scale: 800,
+      hex: '#3730a3',
+      rgb: 'rgb(55,48,163)',
+      hsl: 'hsl(243.7,54.5%,41.4%)',
+    },
+    {
+      scale: 900,
+      hex: '#312e81',
+      rgb: 'rgb(49,46,129)',
+      hsl: 'hsl(242.2,47.4%,34.3%)',
+    },
+    {
+      scale: 950,
+      hex: '#1e1b4b',
+      rgb: 'rgb(30,27,75)',
+      hsl: 'hsl(243.8,47.1%,20%)',
+    },
+  ],
+  violet: [
+    {
+      scale: 50,
+      hex: '#f5f3ff',
+      rgb: 'rgb(245,243,255)',
+      hsl: 'hsl(250,100%,97.6%)',
+    },
+    {
+      scale: 100,
+      hex: '#ede9fe',
+      rgb: 'rgb(237,233,254)',
+      hsl: 'hsl(251.4,91.3%,95.5%)',
+    },
+    {
+      scale: 200,
+      hex: '#ddd6fe',
+      rgb: 'rgb(221,214,254)',
+      hsl: 'hsl(250.5,95.2%,91.8%)',
+    },
+    {
+      scale: 300,
+      hex: '#c4b5fd',
+      rgb: 'rgb(196,181,253)',
+      hsl: 'hsl(252.5,94.7%,85.1%)',
+    },
+    {
+      scale: 400,
+      hex: '#a78bfa',
+      rgb: 'rgb(167,139,250)',
+      hsl: 'hsl(255.1,91.7%,76.3%)',
+    },
+    {
+      scale: 500,
+      hex: '#8b5cf6',
+      rgb: 'rgb(139,92,246)',
+      hsl: 'hsl(258.3,89.5%,66.3%)',
+    },
+    {
+      scale: 600,
+      hex: '#7c3aed',
+      rgb: 'rgb(124,58,237)',
+      hsl: 'hsl(262.1,83.3%,57.8%)',
+    },
+    {
+      scale: 700,
+      hex: '#6d28d9',
+      rgb: 'rgb(109,40,217)',
+      hsl: 'hsl(263.4,70%,50.4%)',
+    },
+    {
+      scale: 800,
+      hex: '#5b21b6',
+      rgb: 'rgb(91,33,182)',
+      hsl: 'hsl(263.4,69.3%,42.2%)',
+    },
+    {
+      scale: 900,
+      hex: '#4c1d95',
+      rgb: 'rgb(76,29,149)',
+      hsl: 'hsl(263.5,67.4%,34.9%)',
+    },
+    {
+      scale: 950,
+      hex: '#1e1b4b',
+      rgb: 'rgb(46,16,101)',
+      hsl: 'hsl(261.2,72.6%,22.9%)',
+    },
+  ],
+  purple: [
+    {
+      scale: 50,
+      hex: '#faf5ff',
+      rgb: 'rgb(250,245,255)',
+      hsl: 'hsl(270,100%,98%)',
+    },
+    {
+      scale: 100,
+      hex: '#f3e8ff',
+      rgb: 'rgb(243,232,255)',
+      hsl: 'hsl(268.7,100%,95.5%)',
+    },
+    {
+      scale: 200,
+      hex: '#e9d5ff',
+      rgb: 'rgb(233,213,255)',
+      hsl: 'hsl(268.6,100%,91.8%)',
+    },
+    {
+      scale: 300,
+      hex: '#d8b4fe',
+      rgb: 'rgb(216,180,254)',
+      hsl: 'hsl(269.2,97.4%,85.1%)',
+    },
+    {
+      scale: 400,
+      hex: '#c084fc',
+      rgb: 'rgb(192,132,252)',
+      hsl: 'hsl(270,95.2%,75.3%)',
+    },
+    {
+      scale: 500,
+      hex: '#a855f7',
+      rgb: 'rgb(168,85,247)',
+      hsl: 'hsl(270.7,91%,65.1%)',
+    },
+    {
+      scale: 600,
+      hex: '#9333ea',
+      rgb: 'rgb(147,51,234)',
+      hsl: 'hsl(271.5,81.3%,55.9%)',
+    },
+    {
+      scale: 700,
+      hex: '#7e22ce',
+      rgb: 'rgb(126,34,206)',
+      hsl: 'hsl(272.1,71.7%,47.1%)',
+    },
+    {
+      scale: 800,
+      hex: '#6b21a8',
+      rgb: 'rgb(107,33,168)',
+      hsl: 'hsl(272.9,67.2%,39.4%)',
+    },
+    {
+      scale: 900,
+      hex: '#581c87',
+      rgb: 'rgb(88,28,135)',
+      hsl: 'hsl(273.6,65.6%,32%)',
+    },
+    {
+      scale: 950,
+      hex: '#3b0764',
+      rgb: 'rgb(59,7,100)',
+      hsl: 'hsl(273.5,86.9%,21%)',
+    },
+  ],
+  fuchsia: [
+    {
+      scale: 50,
+      hex: '#fdf4ff',
+      rgb: 'rgb(253,244,255)',
+      hsl: 'hsl(289.1,100%,97.8%)',
+    },
+    {
+      scale: 100,
+      hex: '#fae8ff',
+      rgb: 'rgb(250,232,255)',
+      hsl: 'hsl(287,100%,95.5%)',
+    },
+    {
+      scale: 200,
+      hex: '#f5d0fe',
+      rgb: 'rgb(245,208,254)',
+      hsl: 'hsl(288.3,95.8%,90.6%)',
+    },
+    {
+      scale: 300,
+      hex: '#f0abfc',
+      rgb: 'rgb(240,171,252)',
+      hsl: 'hsl(291.1,93.1%,82.9%)',
+    },
+    {
+      scale: 400,
+      hex: '#e879f9',
+      rgb: 'rgb(232,121,249)',
+      hsl: 'hsl(292,91.4%,72.5%)',
+    },
+    {
+      scale: 500,
+      hex: '#d946ef',
+      rgb: 'rgb(217,70,239)',
+      hsl: 'hsl(292.2,84.1%,60.6%)',
+    },
+    {
+      scale: 600,
+      hex: '#c026d3',
+      rgb: 'rgb(192,38,211)',
+      hsl: 'hsl(293.4,69.5%,48.8%)',
+    },
+    {
+      scale: 700,
+      hex: '#a21caf',
+      rgb: 'rgb(162,28,175)',
+      hsl: 'hsl(294.7,72.4%,39.8%)',
+    },
+    {
+      scale: 800,
+      hex: '#86198f',
+      rgb: 'rgb(134,25,143)',
+      hsl: 'hsl(295.4,70.2%,32.9%)',
+    },
+    {
+      scale: 900,
+      hex: '#701a75',
+      rgb: 'rgb(112,26,117)',
+      hsl: 'hsl(296.7,63.6%,28%)',
+    },
+    {
+      scale: 950,
+      hex: '#4a044e',
+      rgb: 'rgb(74,4,78)',
+      hsl: 'hsl(296.8,90.2%,16.1%)',
+    },
+  ],
+  pink: [
+    {
+      scale: 50,
+      hex: '#fdf2f8',
+      rgb: 'rgb(253,242,248)',
+      hsl: 'hsl(327.3,73.3%,97.1%)',
+    },
+    {
+      scale: 100,
+      hex: '#fce7f3',
+      rgb: 'rgb(252,231,243)',
+      hsl: 'hsl(325.7,77.8%,94.7%)',
+    },
+    {
+      scale: 200,
+      hex: '#fbcfe8',
+      rgb: 'rgb(251,207,232)',
+      hsl: 'hsl(325.9,84.6%,89.8%)',
+    },
+    {
+      scale: 300,
+      hex: '#f9a8d4',
+      rgb: 'rgb(249,168,212)',
+      hsl: 'hsl(327.4,87.1%,81.8%)',
+    },
+    {
+      scale: 400,
+      hex: '#f472b6',
+      rgb: 'rgb(244,114,182)',
+      hsl: 'hsl(328.6,85.5%,70.2%)',
+    },
+    {
+      scale: 500,
+      hex: '#ec4899',
+      rgb: 'rgb(236,72,153)',
+      hsl: 'hsl(330.4,81.2%,60.4%)',
+    },
+    {
+      scale: 600,
+      hex: '#db2777',
+      rgb: 'rgb(219,39,119)',
+      hsl: 'hsl(333.3,71.4%,50.6%)',
+    },
+    {
+      scale: 700,
+      hex: '#be185d',
+      rgb: 'rgb(190,24,93)',
+      hsl: 'hsl(335.1,77.6%,42%)',
+    },
+    {
+      scale: 800,
+      hex: '#9d174d',
+      rgb: 'rgb(157,23,77)',
+      hsl: 'hsl(335.8,74.4%,35.3%)',
+    },
+    {
+      scale: 900,
+      hex: '#831843',
+      rgb: 'rgb(131,24,67)',
+      hsl: 'hsl(335.9,69%,30.4%)',
+    },
+    {
+      scale: 950,
+      hex: '#500724',
+      rgb: 'rgb(80,7,36)',
+      hsl: 'hsl(336.2,83.9%,17.1%)',
+    },
+  ],
+  rose: [
+    {
+      scale: 50,
+      hex: '#fff1f2',
+      rgb: 'rgb(255,241,242)',
+      hsl: 'hsl(355.7,100%,97.3%)',
+    },
+    {
+      scale: 100,
+      hex: '#ffe4e6',
+      rgb: 'rgb(255,228,230)',
+      hsl: 'hsl(355.6,100%,94.7%)',
+    },
+    {
+      scale: 200,
+      hex: '#fecdd3',
+      rgb: 'rgb(254,205,211)',
+      hsl: 'hsl(352.7,96.1%,90%)',
+    },
+    {
+      scale: 300,
+      hex: '#fda4af',
+      rgb: 'rgb(253,164,175)',
+      hsl: 'hsl(352.6,95.7%,81.8%)',
+    },
+    {
+      scale: 400,
+      hex: '#fb7185',
+      rgb: 'rgb(251,113,133)',
+      hsl: 'hsl(351.3,94.5%,71.4%)',
+    },
+    {
+      scale: 500,
+      hex: '#f43f5e',
+      rgb: 'rgb(244,63,94)',
+      hsl: 'hsl(349.7,89.2%,60.2%)',
+    },
+    {
+      scale: 600,
+      hex: '#e11d48',
+      rgb: 'rgb(225,29,72)',
+      hsl: 'hsl(346.8,77.2%,49.8%)',
+    },
+    {
+      scale: 700,
+      hex: '#be123c',
+      rgb: 'rgb(190,18,60)',
+      hsl: 'hsl(345.3,82.7%,40.8%)',
+    },
+    {
+      scale: 800,
+      hex: '#9f1239',
+      rgb: 'rgb(159,18,57)',
+      hsl: 'hsl(343.4,79.7%,34.7%)',
+    },
+    {
+      scale: 900,
+      hex: '#881337',
+      rgb: 'rgb(136,19,55)',
+      hsl: 'hsl(341.5,75.5%,30.4%)',
+    },
+    {
+      scale: 950,
+      hex: '#4c0519',
+      rgb: 'rgb(76,5,25)',
+      hsl: 'hsl(343.1,87.7%,15.9%)',
+    },
+  ],
+}
+
+export const colorMapping = {
+  light: {
+    'background': 'white',
+    'foreground': '{{base}}-950',
+    'card': 'white',
+    'card-foreground': '{{base}}-950',
+    'popover': 'white',
+    'popover-foreground': '{{base}}-950',
+    'primary': '{{base}}-900',
+    'primary-foreground': '{{base}}-50',
+    'secondary': '{{base}}-100',
+    'secondary-foreground': '{{base}}-900',
+    'muted': '{{base}}-100',
+    'muted-foreground': '{{base}}-500',
+    'accent': '{{base}}-100',
+    'accent-foreground': '{{base}}-900',
+    'destructive': 'red-500',
+    'destructive-foreground': '{{base}}-50',
+    'border': '{{base}}-200',
+    'input': '{{base}}-200',
+    'ring': '{{base}}-950',
+  },
+  dark: {
+    'background': '{{base}}-950',
+    'foreground': '{{base}}-50',
+    'card': '{{base}}-950',
+    'card-foreground': '{{base}}-50',
+    'popover': '{{base}}-950',
+    'popover-foreground': '{{base}}-50',
+    'primary': '{{base}}-50',
+    'primary-foreground': '{{base}}-900',
+    'secondary': '{{base}}-800',
+    'secondary-foreground': '{{base}}-50',
+    'muted': '{{base}}-800',
+    'muted-foreground': '{{base}}-400',
+    'accent': '{{base}}-800',
+    'accent-foreground': '{{base}}-50',
+    'destructive': 'red-900',
+    'destructive-foreground': '{{base}}-50',
+    'border': '{{base}}-800',
+    'input': '{{base}}-800',
+    'ring': '{{base}}-300',
+  },
+} as const
diff --git a/apps/www/src/lib/registry/default/examples/AccordionDemo.vue b/apps/www/src/lib/registry/default/examples/AccordionDemo.vue
index e1b0f0d9..32b32472 100644
--- a/apps/www/src/lib/registry/default/examples/AccordionDemo.vue
+++ b/apps/www/src/lib/registry/default/examples/AccordionDemo.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '../ui/accordion'
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/registry/default/ui/accordion'
 
 const defaultValue = 'item-1'
 
@@ -32,4 +32,3 @@ const accordionItems = [
     </AccordionItem>
   </Accordion>
 </template>
-../ui/accordion
diff --git a/apps/www/src/lib/registry/default/examples/PopoverDemo.vue b/apps/www/src/lib/registry/default/examples/PopoverDemo.vue
index 86cc4d0b..b6a0f614 100644
--- a/apps/www/src/lib/registry/default/examples/PopoverDemo.vue
+++ b/apps/www/src/lib/registry/default/examples/PopoverDemo.vue
@@ -3,15 +3,18 @@ import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '../ui/popover'
+} from '@/registry/default/ui/popover'
+import { Button } from '@/registry/default/ui/button'
+import { Label } from '@/registry/default/ui/label'
+import { Input } from '@/registry/default/ui/input'
 </script>
 
 <template>
   <Popover>
     <PopoverTrigger as-child>
-      <button>
+      <Button variant="outline">
         Open popover
-      </button>
+      </Button>
     </PopoverTrigger>
     <PopoverContent class="w-80" @open-auto-focus.prevent>
       <div class="grid gap-4">
@@ -25,40 +28,40 @@ import {
         </div>
         <div class="grid gap-2">
           <div class="grid grid-cols-3 items-center gap-4">
-            <label for="width">Width</label>
-            <input
+            <Label for="width">Width</Label>
+            <Input
               id="width"
               type="text"
               default-value="100%"
               class="col-span-2 h-8"
-            >
+            />
           </div>
           <div class="grid grid-cols-3 items-center gap-4">
-            <label for="maxWidth">Max. width</label>
-            <input
+            <Label for="maxWidth">Max. width</Label>
+            <Input
               id="maxWidth"
               type="text"
               default-value="300px"
               class="col-span-2 h-8"
-            >
+            />
           </div>
           <div class="grid grid-cols-3 items-center gap-4">
-            <label for="height">Height</label>
-            <input
+            <Label for="height">Height</Label>
+            <Input
               id="height"
               type="text"
               default-value="25px"
               class="col-span-2 h-8"
-            >
+            />
           </div>
           <div class="grid grid-cols-3 items-center gap-4">
-            <label for="maxHeight">Max. height</label>
-            <input
+            <Label for="maxHeight">Max. height</Label>
+            <Input
               id="maxHeight"
               type="text"
               default-value="none"
               class="col-span-2 h-8"
-            >
+            />
           </div>
         </div>
       </div>
diff --git a/apps/www/src/lib/registry/default/theme.ts b/apps/www/src/lib/registry/default/theme.ts
new file mode 100644
index 00000000..cdc2103e
--- /dev/null
+++ b/apps/www/src/lib/registry/default/theme.ts
@@ -0,0 +1,636 @@
+export const themes = [
+  {
+    name: 'zinc',
+    label: 'Zinc',
+    activeColor: {
+      light: '240 5.9% 10%',
+      dark: '240 5.2% 33.9%',
+    },
+    cssVars: {
+      light: {
+        'background': '0 0% 100%',
+        'foreground': '240 10% 3.9%',
+        'card': '0 0% 100%',
+        'card-foreground': '240 10% 3.9%',
+        'popover': '0 0% 100%',
+        'popover-foreground': '240 10% 3.9%',
+        'primary': '240 5.9% 10%',
+        'primary-foreground': '0 0% 98%',
+        'secondary': '240 4.8% 95.9%',
+        'secondary-foreground': '240 5.9% 10%',
+        'muted': '240 4.8% 95.9%',
+        'muted-foreground': '240 3.8% 46.1%',
+        'accent': '240 4.8% 95.9%',
+        'accent-foreground': '240 5.9% 10%',
+        'destructive': '0 84.2% 60.2%',
+        'destructive-foreground': '0 0% 98%',
+        'border': '240 5.9% 90%',
+        'input': '240 5.9% 90%',
+        'ring': '240 5.9% 10%',
+        'radius': '0.5rem',
+      },
+      dark: {
+        'background': '240 10% 3.9%',
+        'foreground': '0 0% 98%',
+        'card': '240 10% 3.9%',
+        'card-foreground': '0 0% 98%',
+        'popover': '240 10% 3.9%',
+        'popover-foreground': '0 0% 98%',
+        'primary': '0 0% 98%',
+        'primary-foreground': '240 5.9% 10%',
+        'secondary': '240 3.7% 15.9%',
+        'secondary-foreground': '0 0% 98%',
+        'muted': '240 3.7% 15.9%',
+        'muted-foreground': '240 5% 64.9%',
+        'accent': '240 3.7% 15.9%',
+        'accent-foreground': '0 0% 98%',
+        'destructive': '0 62.8% 30.6%',
+        'destructive-foreground': '0 0% 98%',
+        'border': '240 3.7% 15.9%',
+        'input': '240 3.7% 15.9%',
+        'ring': '240 4.9% 83.9%',
+      },
+    },
+  },
+  {
+    name: 'slate',
+    label: 'Slate',
+    activeColor: {
+      light: '215.4 16.3% 46.9%',
+      dark: '215.3 19.3% 34.5%',
+    },
+    cssVars: {
+      light: {
+        'background': '0 0% 100%',
+        'foreground': '222.2 84% 4.9%',
+        'card': '0 0% 100%',
+        'card-foreground': '222.2 84% 4.9%',
+        'popover': '0 0% 100%',
+        'popover-foreground': '222.2 84% 4.9%',
+        'primary': '222.2 47.4% 11.2%',
+        'primary-foreground': '210 40% 98%',
+        'secondary': '210 40% 96.1%',
+        'secondary-foreground': '222.2 47.4% 11.2%',
+        'muted': '210 40% 96.1%',
+        'muted-foreground': '215.4 16.3% 46.9%',
+        'accent': '210 40% 96.1%',
+        'accent-foreground': '222.2 47.4% 11.2%',
+        'destructive': '0 84.2% 60.2%',
+        'destructive-foreground': '210 40% 98%',
+        'border': '214.3 31.8% 91.4%',
+        'input': '214.3 31.8% 91.4%',
+        'ring': '222.2 84% 4.9%',
+        'radius': '0.5rem',
+      },
+      dark: {
+        'background': '222.2 84% 4.9%',
+        'foreground': '210 40% 98%',
+        'card': '222.2 84% 4.9%',
+        'card-foreground': '210 40% 98%',
+        'popover': '222.2 84% 4.9%',
+        'popover-foreground': '210 40% 98%',
+        'primary': '210 40% 98%',
+        'primary-foreground': '222.2 47.4% 11.2%',
+        'secondary': '217.2 32.6% 17.5%',
+        'secondary-foreground': '210 40% 98%',
+        'muted': '217.2 32.6% 17.5%',
+        'muted-foreground': '215 20.2% 65.1%',
+        'accent': '217.2 32.6% 17.5%',
+        'accent-foreground': '210 40% 98%',
+        'destructive': '0 62.8% 30.6%',
+        'destructive-foreground': '210 40% 98%',
+        'border': '217.2 32.6% 17.5%',
+        'input': '217.2 32.6% 17.5%',
+        'ring': '212.7 26.8% 83.9',
+      },
+    },
+  },
+  {
+    name: 'stone',
+    label: 'Stone',
+    activeColor: {
+      light: '25 5.3% 44.7%',
+      dark: '33.3 5.5% 32.4%',
+    },
+    cssVars: {
+      light: {
+        'background': '0 0% 100%',
+        'foreground': '20 14.3% 4.1%',
+        'card': '0 0% 100%',
+        'card-foreground': '20 14.3% 4.1%',
+        'popover': '0 0% 100%',
+        'popover-foreground': '20 14.3% 4.1%',
+        'primary': '24 9.8% 10%',
+        'primary-foreground': '60 9.1% 97.8%',
+        'secondary': '60 4.8% 95.9%',
+        'secondary-foreground': '24 9.8% 10%',
+        'muted': '60 4.8% 95.9%',
+        'muted-foreground': '25 5.3% 44.7%',
+        'accent': '60 4.8% 95.9%',
+        'accent-foreground': '24 9.8% 10%',
+        'destructive': '0 84.2% 60.2%',
+        'destructive-foreground': '60 9.1% 97.8%',
+        'border': '20 5.9% 90%',
+        'input': '20 5.9% 90%',
+        'ring': '20 14.3% 4.1%',
+        'radius': '0.95rem',
+      },
+      dark: {
+        'background': '20 14.3% 4.1%',
+        'foreground': '60 9.1% 97.8%',
+        'card': '20 14.3% 4.1%',
+        'card-foreground': '60 9.1% 97.8%',
+        'popover': '20 14.3% 4.1%',
+        'popover-foreground': '60 9.1% 97.8%',
+        'primary': '60 9.1% 97.8%',
+        'primary-foreground': '24 9.8% 10%',
+        'secondary': '12 6.5% 15.1%',
+        'secondary-foreground': '60 9.1% 97.8%',
+        'muted': '12 6.5% 15.1%',
+        'muted-foreground': '24 5.4% 63.9%',
+        'accent': '12 6.5% 15.1%',
+        'accent-foreground': '60 9.1% 97.8%',
+        'destructive': '0 62.8% 30.6%',
+        'destructive-foreground': '60 9.1% 97.8%',
+        'border': '12 6.5% 15.1%',
+        'input': '12 6.5% 15.1%',
+        'ring': '24 5.7% 82.9%',
+      },
+    },
+  },
+  {
+    name: 'gray',
+    label: 'Gray',
+    activeColor: {
+      light: '220 8.9% 46.1%',
+      dark: '215 13.8% 34.1%',
+    },
+    cssVars: {
+      light: {
+        'background': '0 0% 100%',
+        'foreground': '224 71.4% 4.1%',
+        'card': '0 0% 100%',
+        'card-foreground': '224 71.4% 4.1%',
+        'popover': '0 0% 100%',
+        'popover-foreground': '224 71.4% 4.1%',
+        'primary': '220.9 39.3% 11%',
+        'primary-foreground': '210 20% 98%',
+        'secondary': '220 14.3% 95.9%',
+        'secondary-foreground': '220.9 39.3% 11%',
+        'muted': '220 14.3% 95.9%',
+        'muted-foreground': '220 8.9% 46.1%',
+        'accent': '220 14.3% 95.9%',
+        'accent-foreground': '220.9 39.3% 11%',
+        'destructive': '0 84.2% 60.2%',
+        'destructive-foreground': '210 20% 98%',
+        'border': '220 13% 91%',
+        'input': '220 13% 91%',
+        'ring': '224 71.4% 4.1%',
+        'radius': '0.35rem',
+      },
+      dark: {
+        'background': '224 71.4% 4.1%',
+        'foreground': '210 20% 98%',
+        'card': '224 71.4% 4.1%',
+        'card-foreground': '210 20% 98%',
+        'popover': '224 71.4% 4.1%',
+        'popover-foreground': '210 20% 98%',
+        'primary': '210 20% 98%',
+        'primary-foreground': '220.9 39.3% 11%',
+        'secondary': '215 27.9% 16.9%',
+        'secondary-foreground': '210 20% 98%',
+        'muted': '215 27.9% 16.9%',
+        'muted-foreground': '217.9 10.6% 64.9%',
+        'accent': '215 27.9% 16.9%',
+        'accent-foreground': '210 20% 98%',
+        'destructive': '0 62.8% 30.6%',
+        'destructive-foreground': '210 20% 98%',
+        'border': '215 27.9% 16.9%',
+        'input': '215 27.9% 16.9%',
+        'ring': '216 12.2% 83.9%',
+      },
+    },
+  },
+  {
+    name: 'neutral',
+    label: 'Neutral',
+    activeColor: {
+      light: '0 0% 45.1%',
+      dark: '0 0% 32.2%',
+    },
+    cssVars: {
+      light: {
+        'background': '0 0% 100%',
+        'foreground': '0 0% 3.9%',
+        'card': '0 0% 100%',
+        'card-foreground': '0 0% 3.9%',
+        'popover': '0 0% 100%',
+        'popover-foreground': '0 0% 3.9%',
+        'primary': '0 0% 9%',
+        'primary-foreground': '0 0% 98%',
+        'secondary': '0 0% 96.1%',
+        'secondary-foreground': '0 0% 9%',
+        'muted': '0 0% 96.1%',
+        'muted-foreground': '0 0% 45.1%',
+        'accent': '0 0% 96.1%',
+        'accent-foreground': '0 0% 9%',
+        'destructive': '0 84.2% 60.2%',
+        'destructive-foreground': '0 0% 98%',
+        'border': '0 0% 89.8%',
+        'input': '0 0% 89.8%',
+        'ring': '0 0% 3.9%',
+      },
+      dark: {
+        'background': '0 0% 3.9%',
+        'foreground': '0 0% 98%',
+        'card': '0 0% 3.9%',
+        'card-foreground': '0 0% 98%',
+        'popover': '0 0% 3.9%',
+        'popover-foreground': '0 0% 98%',
+        'primary': '0 0% 98%',
+        'primary-foreground': '0 0% 9%',
+        'secondary': '0 0% 14.9%',
+        'secondary-foreground': '0 0% 98%',
+        'muted': '0 0% 14.9%',
+        'muted-foreground': '0 0% 63.9%',
+        'accent': '0 0% 14.9%',
+        'accent-foreground': '0 0% 98%',
+        'destructive': '0 62.8% 30.6%',
+        'destructive-foreground': '0 0% 98%',
+        'border': '0 0% 14.9%',
+        'input': '0 0% 14.9%',
+        'ring': '0 0% 83.1%',
+      },
+    },
+  },
+  {
+    name: 'red',
+    label: 'Red',
+    activeColor: {
+      light: '0 72.2% 50.6%',
+      dark: '0 72.2% 50.6%',
+    },
+    cssVars: {
+      light: {
+        'background': '0 0% 100%',
+        'foreground': '0 0% 3.9%',
+        'card': '0 0% 100%',
+        'card-foreground': '0 0% 3.9%',
+        'popover': '0 0% 100%',
+        'popover-foreground': '0 0% 3.9%',
+        'primary': '0 72.2% 50.6%',
+        'primary-foreground': '0 85.7% 97.3%',
+        'secondary': '0 0% 96.1%',
+        'secondary-foreground': '0 0% 9%',
+        'muted': '0 0% 96.1%',
+        'muted-foreground': '0 0% 45.1%',
+        'accent': '0 0% 96.1%',
+        'accent-foreground': '0 0% 9%',
+        'destructive': '0 84.2% 60.2%',
+        'destructive-foreground': '0 0% 98%',
+        'border': '0 0% 89.8%',
+        'input': '0 0% 89.8%',
+        'ring': '0 72.2% 50.6%',
+        'radius': '0.4rem',
+      },
+      dark: {
+        'background': '0 0% 3.9%',
+        'foreground': '0 0% 98%',
+        'card': '0 0% 3.9%',
+        'card-foreground': '0 0% 98%',
+        'popover': '0 0% 3.9%',
+        'popover-foreground': '0 0% 98%',
+        'primary': '0 72.2% 50.6%',
+        'primary-foreground': '0 85.7% 97.3%',
+        'secondary': '0 0% 14.9%',
+        'secondary-foreground': '0 0% 98%',
+        'muted': '0 0% 14.9%',
+        'muted-foreground': '0 0% 63.9%',
+        'accent': '0 0% 14.9%',
+        'accent-foreground': '0 0% 98%',
+        'destructive': '0 62.8% 30.6%',
+        'destructive-foreground': '0 0% 98%',
+        'border': '0 0% 14.9%',
+        'input': '0 0% 14.9%',
+        'ring': '0 72.2% 50.6%',
+      },
+    },
+  },
+  {
+    name: 'rose',
+    label: 'Rose',
+    activeColor: {
+      light: '346.8 77.2% 49.8%',
+      dark: '346.8 77.2% 49.8%',
+    },
+    cssVars: {
+      light: {
+        'background': '0 0% 100%',
+        'foreground': '240 10% 3.9%',
+        'card': '0 0% 100%',
+        'card-foreground': '240 10% 3.9%',
+        'popover': '0 0% 100%',
+        'popover-foreground': '240 10% 3.9%',
+        'primary': '346.8 77.2% 49.8%',
+        'primary-foreground': '355.7 100% 97.3%',
+        'secondary': '240 4.8% 95.9%',
+        'secondary-foreground': '240 5.9% 10%',
+        'muted': '240 4.8% 95.9%',
+        'muted-foreground': '240 3.8% 46.1%',
+        'accent': '240 4.8% 95.9%',
+        'accent-foreground': '240 5.9% 10%',
+        'destructive': '0 84.2% 60.2%',
+        'destructive-foreground': '0 0% 98%',
+        'border': '240 5.9% 90%',
+        'input': '240 5.9% 90%',
+        'ring': '346.8 77.2% 49.8%',
+        'radius': '0.5rem',
+      },
+      dark: {
+        'background': '20 14.3% 4.1%',
+        'foreground': '0 0% 95%',
+        'popover': '0 0% 9%',
+        'popover-foreground': '0 0% 95%',
+        'card': '24 9.8% 10%',
+        'card-foreground': '0 0% 95%',
+        'primary': '346.8 77.2% 49.8%',
+        'primary-foreground': '355.7 100% 97.3%',
+        'secondary': '240 3.7% 15.9%',
+        'secondary-foreground': '0 0% 98%',
+        'muted': '0 0% 15%',
+        'muted-foreground': '240 5% 64.9%',
+        'accent': '12 6.5% 15.1%',
+        'accent-foreground': '0 0% 98%',
+        'destructive': '0 62.8% 30.6%',
+        'destructive-foreground': '0 85.7% 97.3%',
+        'border': '240 3.7% 15.9%',
+        'input': '240 3.7% 15.9%',
+        'ring': '346.8 77.2% 49.8%',
+      },
+    },
+  },
+  {
+    name: 'orange',
+    label: 'Orange',
+    activeColor: {
+      light: '24.6 95% 53.1%',
+      dark: '20.5 90.2% 48.2%',
+    },
+    cssVars: {
+      light: {
+        'background': '0 0% 100%',
+        'foreground': '20 14.3% 4.1%',
+        'card': '0 0% 100%',
+        'card-foreground': '20 14.3% 4.1%',
+        'popover': '0 0% 100%',
+        'popover-foreground': '20 14.3% 4.1%',
+        'primary': '24.6 95% 53.1%',
+        'primary-foreground': '60 9.1% 97.8%',
+        'secondary': '60 4.8% 95.9%',
+        'secondary-foreground': '24 9.8% 10%',
+        'muted': '60 4.8% 95.9%',
+        'muted-foreground': '25 5.3% 44.7%',
+        'accent': '60 4.8% 95.9%',
+        'accent-foreground': '24 9.8% 10%',
+        'destructive': '0 84.2% 60.2%',
+        'destructive-foreground': '60 9.1% 97.8%',
+        'border': '20 5.9% 90%',
+        'input': '20 5.9% 90%',
+        'ring': '24.6 95% 53.1%',
+        'radius': '0.95rem',
+      },
+      dark: {
+        'background': '20 14.3% 4.1%',
+        'foreground': '60 9.1% 97.8%',
+        'card': '20 14.3% 4.1%',
+        'card-foreground': '60 9.1% 97.8%',
+        'popover': '20 14.3% 4.1%',
+        'popover-foreground': '60 9.1% 97.8%',
+        'primary': '20.5 90.2% 48.2%',
+        'primary-foreground': '60 9.1% 97.8%',
+        'secondary': '12 6.5% 15.1%',
+        'secondary-foreground': '60 9.1% 97.8%',
+        'muted': '12 6.5% 15.1%',
+        'muted-foreground': '24 5.4% 63.9%',
+        'accent': '12 6.5% 15.1%',
+        'accent-foreground': '60 9.1% 97.8%',
+        'destructive': '0 72.2% 50.6%',
+        'destructive-foreground': '60 9.1% 97.8%',
+        'border': '12 6.5% 15.1%',
+        'input': '12 6.5% 15.1%',
+        'ring': '20.5 90.2% 48.2%',
+      },
+    },
+  },
+  {
+    name: 'green',
+    label: 'Green',
+    activeColor: {
+      light: '142.1 76.2% 36.3%',
+      dark: '142.1 70.6% 45.3%',
+    },
+    cssVars: {
+      light: {
+        'background': '0 0% 100%',
+        'foreground': '240 10% 3.9%',
+        'card': '0 0% 100%',
+        'card-foreground': '240 10% 3.9%',
+        'popover': '0 0% 100%',
+        'popover-foreground': '240 10% 3.9%',
+        'primary': '142.1 76.2% 36.3%',
+        'primary-foreground': '355.7 100% 97.3%',
+        'secondary': '240 4.8% 95.9%',
+        'secondary-foreground': '240 5.9% 10%',
+        'muted': '240 4.8% 95.9%',
+        'muted-foreground': '240 3.8% 46.1%',
+        'accent': '240 4.8% 95.9%',
+        'accent-foreground': '240 5.9% 10%',
+        'destructive': '0 84.2% 60.2%',
+        'destructive-foreground': '0 0% 98%',
+        'border': '240 5.9% 90%',
+        'input': '240 5.9% 90%',
+        'ring': '142.1 76.2% 36.3%',
+      },
+      dark: {
+        'background': '20 14.3% 4.1%',
+        'foreground': '0 0% 95%',
+        'popover': '0 0% 9%',
+        'popover-foreground': '0 0% 95%',
+        'card': '24 9.8% 10%',
+        'card-foreground': '0 0% 95%',
+        'primary': '142.1 70.6% 45.3%',
+        'primary-foreground': '144.9 80.4% 10%',
+        'secondary': '240 3.7% 15.9%',
+        'secondary-foreground': '0 0% 98%',
+        'muted': '0 0% 15%',
+        'muted-foreground': '240 5% 64.9%',
+        'accent': '12 6.5% 15.1%',
+        'accent-foreground': '0 0% 98%',
+        'destructive': '0 62.8% 30.6%',
+        'destructive-foreground': '0 85.7% 97.3%',
+        'border': '240 3.7% 15.9%',
+        'input': '240 3.7% 15.9%',
+        'ring': '142.4 71.8% 29.2%',
+      },
+    },
+  },
+  {
+    name: 'blue',
+    label: 'Blue',
+    activeColor: {
+      light: '221.2 83.2% 53.3%',
+      dark: '217.2 91.2% 59.8%',
+    },
+    cssVars: {
+      light: {
+        'background': '0 0% 100%',
+        'foreground': '222.2 84% 4.9%',
+        'card': '0 0% 100%',
+        'card-foreground': '222.2 84% 4.9%',
+        'popover': '0 0% 100%',
+        'popover-foreground': '222.2 84% 4.9%',
+        'primary': '221.2 83.2% 53.3%',
+        'primary-foreground': '210 40% 98%',
+        'secondary': '210 40% 96.1%',
+        'secondary-foreground': '222.2 47.4% 11.2%',
+        'muted': '210 40% 96.1%',
+        'muted-foreground': '215.4 16.3% 46.9%',
+        'accent': '210 40% 96.1%',
+        'accent-foreground': '222.2 47.4% 11.2%',
+        'destructive': '0 84.2% 60.2%',
+        'destructive-foreground': '210 40% 98%',
+        'border': '214.3 31.8% 91.4%',
+        'input': '214.3 31.8% 91.4%',
+        'ring': '221.2 83.2% 53.3%',
+      },
+      dark: {
+        'background': '222.2 84% 4.9%',
+        'foreground': '210 40% 98%',
+        'card': '222.2 84% 4.9%',
+        'card-foreground': '210 40% 98%',
+        'popover': '222.2 84% 4.9%',
+        'popover-foreground': '210 40% 98%',
+        'primary': '217.2 91.2% 59.8%',
+        'primary-foreground': '222.2 47.4% 11.2%',
+        'secondary': '217.2 32.6% 17.5%',
+        'secondary-foreground': '210 40% 98%',
+        'muted': '217.2 32.6% 17.5%',
+        'muted-foreground': '215 20.2% 65.1%',
+        'accent': '217.2 32.6% 17.5%',
+        'accent-foreground': '210 40% 98%',
+        'destructive': '0 62.8% 30.6%',
+        'destructive-foreground': '210 40% 98%',
+        'border': '217.2 32.6% 17.5%',
+        'input': '217.2 32.6% 17.5%',
+        'ring': '224.3 76.3% 48%',
+      },
+    },
+  },
+  {
+    name: 'yellow',
+    label: 'Yellow',
+    activeColor: {
+      light: '47.9 95.8% 53.1%',
+      dark: '47.9 95.8% 53.1%',
+    },
+    cssVars: {
+      light: {
+        'background': '0 0% 100%',
+        'foreground': '20 14.3% 4.1%',
+        'card': '0 0% 100%',
+        'card-foreground': '20 14.3% 4.1%',
+        'popover': '0 0% 100%',
+        'popover-foreground': '20 14.3% 4.1%',
+        'primary': '47.9 95.8% 53.1%',
+        'primary-foreground': '26 83.3% 14.1%',
+        'secondary': '60 4.8% 95.9%',
+        'secondary-foreground': '24 9.8% 10%',
+        'muted': '60 4.8% 95.9%',
+        'muted-foreground': '25 5.3% 44.7%',
+        'accent': '60 4.8% 95.9%',
+        'accent-foreground': '24 9.8% 10%',
+        'destructive': '0 84.2% 60.2%',
+        'destructive-foreground': '60 9.1% 97.8%',
+        'border': '20 5.9% 90%',
+        'input': '20 5.9% 90%',
+        'ring': '20 14.3% 4.1%',
+        'radius': '0.95rem',
+      },
+      dark: {
+        'background': '20 14.3% 4.1%',
+        'foreground': '60 9.1% 97.8%',
+        'card': '20 14.3% 4.1%',
+        'card-foreground': '60 9.1% 97.8%',
+        'popover': '20 14.3% 4.1%',
+        'popover-foreground': '60 9.1% 97.8%',
+        'primary': '47.9 95.8% 53.1%',
+        'primary-foreground': '26 83.3% 14.1%',
+        'secondary': '12 6.5% 15.1%',
+        'secondary-foreground': '60 9.1% 97.8%',
+        'muted': '12 6.5% 15.1%',
+        'muted-foreground': '24 5.4% 63.9%',
+        'accent': '12 6.5% 15.1%',
+        'accent-foreground': '60 9.1% 97.8%',
+        'destructive': '0 62.8% 30.6%',
+        'destructive-foreground': '60 9.1% 97.8%',
+        'border': '12 6.5% 15.1%',
+        'input': '12 6.5% 15.1%',
+        'ring': '35.5 91.7% 32.9%',
+      },
+    },
+  },
+  {
+    name: 'violet',
+    label: 'Violet',
+    activeColor: {
+      light: '262.1 83.3% 57.8%',
+      dark: '263.4 70% 50.4%',
+    },
+    cssVars: {
+      light: {
+        'background': '0 0% 100%',
+        'foreground': '224 71.4% 4.1%',
+        'card': '0 0% 100%',
+        'card-foreground': '224 71.4% 4.1%',
+        'popover': '0 0% 100%',
+        'popover-foreground': '224 71.4% 4.1%',
+        'primary': '262.1 83.3% 57.8%',
+        'primary-foreground': '210 20% 98%',
+        'secondary': '220 14.3% 95.9%',
+        'secondary-foreground': '220.9 39.3% 11%',
+        'muted': '220 14.3% 95.9%',
+        'muted-foreground': '220 8.9% 46.1%',
+        'accent': '220 14.3% 95.9%',
+        'accent-foreground': '220.9 39.3% 11%',
+        'destructive': '0 84.2% 60.2%',
+        'destructive-foreground': '210 20% 98%',
+        'border': '220 13% 91%',
+        'input': '220 13% 91%',
+        'ring': '262.1 83.3% 57.8%',
+      },
+      dark: {
+        'background': '224 71.4% 4.1%',
+        'foreground': '210 20% 98%',
+        'card': '224 71.4% 4.1%',
+        'card-foreground': '210 20% 98%',
+        'popover': '224 71.4% 4.1%',
+        'popover-foreground': '210 20% 98%',
+        'primary': '263.4 70% 50.4%',
+        'primary-foreground': '210 20% 98%',
+        'secondary': '215 27.9% 16.9%',
+        'secondary-foreground': '210 20% 98%',
+        'muted': '215 27.9% 16.9%',
+        'muted-foreground': '217.9 10.6% 64.9%',
+        'accent': '215 27.9% 16.9%',
+        'accent-foreground': '210 20% 98%',
+        'destructive': '0 62.8% 30.6%',
+        'destructive-foreground': '210 20% 98%',
+        'border': '215 27.9% 16.9%',
+        'input': '215 27.9% 16.9%',
+        'ring': '263.4 70% 50.4%',
+      },
+    },
+  },
+] as const
+
+export type Theme = (typeof themes)[number]
diff --git a/apps/www/src/lib/registry/default/ui/button.ts b/apps/www/src/lib/registry/default/ui/button.ts
new file mode 100644
index 00000000..c4741cc1
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/button.ts
@@ -0,0 +1,41 @@
+import { defineComponent, h } from 'vue'
+import { type VariantProps, cva } from 'class-variance-authority'
+import { cn } from '@/utils'
+
+export const buttonVariants = cva(
+  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+interface ButtonProps extends VariantProps<typeof buttonVariants> {}
+
+export const Button = defineComponent<ButtonProps>(
+  (props, { attrs, slots }) => {
+    return () => h('button', { class: cn(buttonVariants(props), attrs.class ?? '') }, slots)
+  },
+  { name: 'Button', props: ['size', 'variant'] },
+)
diff --git a/apps/www/src/lib/registry/default/ui/input.ts b/apps/www/src/lib/registry/default/ui/input.ts
new file mode 100644
index 00000000..9f3b58dc
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/input.ts
@@ -0,0 +1,11 @@
+import { defineComponent, h } from 'vue'
+import { cn } from '@/utils'
+
+export const Input = defineComponent(
+  (_props, { attrs, slots }) => {
+    return () => h('input',
+      { class: cn('flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', attrs.class ?? '') },
+      slots)
+  },
+  { name: 'Input' },
+)
diff --git a/apps/www/src/lib/registry/default/ui/label.ts b/apps/www/src/lib/registry/default/ui/label.ts
new file mode 100644
index 00000000..8df77c27
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/label.ts
@@ -0,0 +1,17 @@
+import { defineComponent, h } from 'vue'
+import { type VariantProps, cva } from 'class-variance-authority'
+import { type LabelProps } from 'radix-vue'
+import { cn } from '@/utils'
+
+export const labelVariants = cva(
+  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+)
+
+interface Props extends LabelProps, VariantProps<typeof labelVariants> {}
+
+export const Label = defineComponent<Props>(
+  (props, { attrs, slots }) => {
+    return () => h('label', { class: cn(labelVariants(), attrs.class ?? ''), ...props }, slots)
+  },
+  { name: 'Label' },
+)
diff --git a/apps/www/tailwind.config.js b/apps/www/tailwind.config.js
index 98133ca5..00a05299 100644
--- a/apps/www/tailwind.config.js
+++ b/apps/www/tailwind.config.js
@@ -1,5 +1,8 @@
+import tailwindcssAnimate from 'tailwindcss-animate'
+
 /** @type {import('tailwindcss').Config} */
 export default {
+  darkMode: ['class'],
   content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
   theme: {
     container: {
@@ -70,5 +73,5 @@ export default {
       },
     },
   },
-  plugins: [],
+  plugins: [tailwindcssAnimate],
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3baa12ba..ee7b23b4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -50,6 +50,9 @@ importers:
       radix-vue:
         specifier: file:../../../radix-vue/packages/radix-vue
         version: file:../radix-vue/packages/radix-vue(vue@3.3.4)
+      tailwindcss-animate:
+        specifier: ^1.0.6
+        version: 1.0.6(tailwindcss@3.3.2)
       vue:
         specifier: ^3.3.4
         version: 3.3.4
@@ -92,7 +95,6 @@ packages:
   /@alloc/quick-lru@5.2.0:
     resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
     engines: {node: '>=10'}
-    dev: true
 
   /@ampproject/remapping@2.2.1:
     resolution: {integrity: sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==}
@@ -579,7 +581,6 @@ packages:
     engines: {node: '>=12'}
     dependencies:
       '@jridgewell/trace-mapping': 0.3.9
-    dev: true
 
   /@esbuild/android-arm64@0.17.19:
     resolution: {integrity: sha512-KBMWvEZooR7+kzY0BtbTQn0OAYY7CsiydT63pVEaPtVYF0hXbUaOyZog37DKxK7NF3XacBJOpYT4adIJh+avxA==}
@@ -1010,19 +1011,15 @@ packages:
 
   /@tsconfig/node10@1.0.9:
     resolution: {integrity: sha512-jNsYVVxU8v5g43Erja32laIDHXeoNvFEpX33OK4d6hljo3jDhCBDhx5dhCCTMWUojscpAagGiRkBKxpdl9fxqA==}
-    dev: true
 
   /@tsconfig/node12@1.0.11:
     resolution: {integrity: sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==}
-    dev: true
 
   /@tsconfig/node14@1.0.3:
     resolution: {integrity: sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==}
-    dev: true
 
   /@tsconfig/node16@1.0.4:
     resolution: {integrity: sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==}
-    dev: true
 
   /@types/estree@1.0.1:
     resolution: {integrity: sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==}
@@ -1044,7 +1041,6 @@ packages:
 
   /@types/node@20.4.7:
     resolution: {integrity: sha512-bUBrPjEry2QUTsnuEjzjbS7voGWCc30W0qzgMf90GPeDGFRakvrz47ju+oqDAKCXLUCe39u57/ORMl/O/04/9g==}
-    dev: true
 
   /@types/normalize-package-data@2.4.1:
     resolution: {integrity: sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==}
@@ -1364,7 +1360,6 @@ packages:
   /acorn-walk@8.2.0:
     resolution: {integrity: sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==}
     engines: {node: '>=0.4.0'}
-    dev: true
 
   /acorn@8.10.0:
     resolution: {integrity: sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==}
@@ -1441,7 +1436,6 @@ packages:
 
   /any-promise@1.3.0:
     resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
-    dev: true
 
   /anymatch@3.1.3:
     resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
@@ -1452,11 +1446,9 @@ packages:
 
   /arg@4.1.3:
     resolution: {integrity: sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==}
-    dev: true
 
   /arg@5.0.2:
     resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
-    dev: true
 
   /argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
@@ -1549,7 +1541,6 @@ packages:
 
   /balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
-    dev: true
 
   /binary-extensions@2.2.0:
     resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
@@ -1564,7 +1555,6 @@ packages:
     dependencies:
       balanced-match: 1.0.2
       concat-map: 0.0.1
-    dev: true
 
   /brace-expansion@2.0.1:
     resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
@@ -1632,7 +1622,6 @@ packages:
   /camelcase-css@2.0.1:
     resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
     engines: {node: '>= 6'}
-    dev: true
 
   /camelcase-keys@6.2.2:
     resolution: {integrity: sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==}
@@ -1785,7 +1774,6 @@ packages:
   /commander@4.1.1:
     resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
     engines: {node: '>= 6'}
-    dev: true
 
   /compare-func@2.0.0:
     resolution: {integrity: sha512-zHig5N+tPWARooBnb0Zx1MFcdfpyJrfTJ3Y5L+IFvUm8rM74hHz66z0gw0x4tijh5CorKkKUCnW82R2vmpeCRA==}
@@ -1796,7 +1784,6 @@ packages:
 
   /concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
-    dev: true
 
   /consola@3.2.3:
     resolution: {integrity: sha512-I5qxpzLv+sJhTVEoLYNcTW+bThDCPsit0vLNKShZx6rLtpilNpmmeTPaeqJb9ZE9dV3DGaeby6Vuhrw38WjeyQ==}
@@ -1863,7 +1850,6 @@ packages:
 
   /create-require@1.1.1:
     resolution: {integrity: sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==}
-    dev: true
 
   /cross-spawn@7.0.3:
     resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
@@ -1878,7 +1864,6 @@ packages:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
     engines: {node: '>=4'}
     hasBin: true
-    dev: true
 
   /csstype@3.1.2:
     resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==}
@@ -1949,12 +1934,10 @@ packages:
 
   /didyoumean@1.2.2:
     resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
-    dev: true
 
   /diff@4.0.2:
     resolution: {integrity: sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==}
     engines: {node: '>=0.3.1'}
-    dev: true
 
   /dir-glob@3.0.1:
     resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
@@ -1964,7 +1947,6 @@ packages:
 
   /dlv@1.1.3:
     resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
-    dev: true
 
   /doctrine@2.1.0:
     resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
@@ -2276,7 +2258,7 @@ packages:
       minimatch: 3.1.2
       object.values: 1.1.6
       resolve: 1.22.4
-      semver: 6.3.0
+      semver: 6.3.1
     transitivePeerDependencies:
       - '@typescript-eslint/parser'
       - eslint-import-resolver-typescript
@@ -2709,7 +2691,6 @@ packages:
 
   /fs.realpath@1.0.0:
     resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
-    dev: true
 
   /fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
@@ -2720,7 +2701,6 @@ packages:
 
   /function-bind@1.1.1:
     resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==}
-    dev: true
 
   /function.prototype.name@1.1.5:
     resolution: {integrity: sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==}
@@ -2812,7 +2792,6 @@ packages:
     engines: {node: '>=10.13.0'}
     dependencies:
       is-glob: 4.0.3
-    dev: true
 
   /glob@7.1.6:
     resolution: {integrity: sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==}
@@ -2823,7 +2802,6 @@ packages:
       minimatch: 3.1.2
       once: 1.4.0
       path-is-absolute: 1.0.1
-    dev: true
 
   /global-dirs@0.1.1:
     resolution: {integrity: sha512-NknMLn7F2J7aflwFOlGdNIuCDpN3VGoSoB+aap3KABFWbHVn1TCgFC+np23J8W2BiZbjfEw3BFBycSMv1AFblg==}
@@ -2933,7 +2911,6 @@ packages:
     engines: {node: '>= 0.4.0'}
     dependencies:
       function-bind: 1.1.1
-    dev: true
 
   /hash-sum@2.0.0:
     resolution: {integrity: sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==}
@@ -3015,7 +2992,6 @@ packages:
     dependencies:
       once: 1.4.0
       wrappy: 1.0.2
-    dev: true
 
   /inherits@2.0.4:
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
@@ -3098,7 +3074,6 @@ packages:
     resolution: {integrity: sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ==}
     dependencies:
       has: 1.0.3
-    dev: true
 
   /is-date-object@1.0.5:
     resolution: {integrity: sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==}
@@ -3336,11 +3311,9 @@ packages:
   /lilconfig@2.1.0:
     resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
     engines: {node: '>=10'}
-    dev: true
 
   /lines-and-columns@1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
-    dev: true
 
   /lint-staged@14.0.0:
     resolution: {integrity: sha512-0tLf0pqZYkar/wu3nTctk4rVIG+d7PanDYv4/IQR4qwdqfQkTDziLRFnqMcLuLBTuUqmcLwsHPD2EjQ18d/oaA==}
@@ -3480,7 +3453,6 @@ packages:
 
   /make-error@1.3.6:
     resolution: {integrity: sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==}
-    dev: true
 
   /map-obj@1.0.1:
     resolution: {integrity: sha512-7N/q3lyZ+LVCp7PzuxrJr4KMbBE2hW7BT7YNia330OFxIf4d3r5zVpicP2650l7CPN6RM9zOJRl3NGpqSiw3Eg==}
@@ -3576,7 +3548,6 @@ packages:
     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
     dependencies:
       brace-expansion: 1.1.11
-    dev: true
 
   /minimatch@9.0.3:
     resolution: {integrity: sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==}
@@ -3651,7 +3622,6 @@ packages:
       any-promise: 1.3.0
       object-assign: 4.1.1
       thenify-all: 1.6.0
-    dev: true
 
   /nanoid@3.3.6:
     resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==}
@@ -3724,12 +3694,10 @@ packages:
   /object-assign@4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /object-hash@3.0.0:
     resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
     engines: {node: '>= 6'}
-    dev: true
 
   /object-inspect@1.12.3:
     resolution: {integrity: sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==}
@@ -3767,7 +3735,6 @@ packages:
     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
     dependencies:
       wrappy: 1.0.2
-    dev: true
 
   /onetime@5.1.2:
     resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
@@ -3864,7 +3831,6 @@ packages:
   /path-is-absolute@1.0.1:
     resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /path-key@3.1.1:
     resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
@@ -3878,7 +3844,6 @@ packages:
 
   /path-parse@1.0.7:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
-    dev: true
 
   /path-type@4.0.0:
     resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
@@ -3908,12 +3873,10 @@ packages:
   /pify@2.3.0:
     resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /pirates@4.0.6:
     resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
     engines: {node: '>= 6'}
-    dev: true
 
   /pkg-types@1.0.3:
     resolution: {integrity: sha512-nN7pYi0AQqJnoLPC9eHFQ8AcyaixBUOwvqc5TDnIKCMEE6I0y8P7OKA7fPexsXGCGxQDl/cmrLAp26LhcwxZ4A==}
@@ -3950,7 +3913,6 @@ packages:
       postcss-value-parser: 4.2.0
       read-cache: 1.0.0
       resolve: 1.22.4
-    dev: true
 
   /postcss-js@4.0.1(postcss@8.4.24):
     resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
@@ -3960,7 +3922,6 @@ packages:
     dependencies:
       camelcase-css: 2.0.1
       postcss: 8.4.24
-    dev: true
 
   /postcss-load-config@4.0.1(postcss@8.4.24)(ts-node@10.9.1):
     resolution: {integrity: sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==}
@@ -3978,7 +3939,6 @@ packages:
       postcss: 8.4.24
       ts-node: 10.9.1(@types/node@20.4.7)(typescript@5.0.2)
       yaml: 2.3.1
-    dev: true
 
   /postcss-nested@6.0.1(postcss@8.4.24):
     resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==}
@@ -3988,7 +3948,6 @@ packages:
     dependencies:
       postcss: 8.4.24
       postcss-selector-parser: 6.0.13
-    dev: true
 
   /postcss-selector-parser@6.0.13:
     resolution: {integrity: sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==}
@@ -3996,11 +3955,9 @@ packages:
     dependencies:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
-    dev: true
 
   /postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
-    dev: true
 
   /postcss@8.4.24:
     resolution: {integrity: sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==}
@@ -4048,7 +4005,6 @@ packages:
     resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
     dependencies:
       pify: 2.3.0
-    dev: true
 
   /read-pkg-up@7.0.1:
     resolution: {integrity: sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==}
@@ -4172,7 +4128,6 @@ packages:
       is-core-module: 2.13.0
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
-    dev: true
 
   /restore-cursor@4.0.0:
     resolution: {integrity: sha512-I9fPXU9geO9bHOt9pHHOhOkYerIMsmVaWB0rA2AI9ERh/+x/i7MV5HKBNrg+ljO5eoPVgCcnFuRjJ9uH6I/3eg==}
@@ -4246,15 +4201,9 @@ packages:
     hasBin: true
     dev: true
 
-  /semver@6.3.0:
-    resolution: {integrity: sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==}
-    hasBin: true
-    dev: true
-
   /semver@6.3.1:
     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
     hasBin: true
-    dev: false
 
   /semver@7.5.3:
     resolution: {integrity: sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==}
@@ -4462,7 +4411,6 @@ packages:
       mz: 2.7.0
       pirates: 4.0.6
       ts-interface-checker: 0.1.13
-    dev: true
 
   /supports-color@5.5.0:
     resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
@@ -4480,12 +4428,19 @@ packages:
   /supports-preserve-symlinks-flag@1.0.0:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
-    dev: true
 
   /tailwind-merge@1.14.0:
     resolution: {integrity: sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==}
     dev: true
 
+  /tailwindcss-animate@1.0.6(tailwindcss@3.3.2):
+    resolution: {integrity: sha512-4WigSGMvbl3gCCact62ZvOngA+PRqhAn7si3TQ3/ZuPuQZcIEtVap+ENSXbzWhpojKB8CpvnIsrwBu8/RnHtuw==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || insiders'
+    dependencies:
+      tailwindcss: 3.3.2(ts-node@10.9.1)
+    dev: false
+
   /tailwindcss@3.3.2(ts-node@10.9.1):
     resolution: {integrity: sha512-9jPkMiIBXvPc2KywkraqsUfbfj+dHDb+JPWtSJa9MLFdrPyazI7q6WX2sUrm7R9eVR7qqv3Pas7EvQFzxKnI6w==}
     engines: {node: '>=14.0.0'}
@@ -4516,7 +4471,6 @@ packages:
       sucrase: 3.34.0
     transitivePeerDependencies:
       - ts-node
-    dev: true
 
   /tapable@1.1.3:
     resolution: {integrity: sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==}
@@ -4549,13 +4503,11 @@ packages:
     engines: {node: '>=0.8'}
     dependencies:
       thenify: 3.3.1
-    dev: true
 
   /thenify@3.3.1:
     resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
     dependencies:
       any-promise: 1.3.0
-    dev: true
 
   /through2@4.0.2:
     resolution: {integrity: sha512-iOqSav00cVxEEICeD7TjLB1sueEL+81Wpzp2bY17uZjZN0pWZPuo4suZ/61VujxmqSGFfgOcNuTZ85QJwNZQpw==}
@@ -4584,7 +4536,6 @@ packages:
 
   /ts-interface-checker@0.1.13:
     resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
-    dev: true
 
   /ts-node@10.9.1(@types/node@20.4.7)(typescript@5.0.2):
     resolution: {integrity: sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==}
@@ -4615,7 +4566,6 @@ packages:
       typescript: 5.0.2
       v8-compile-cache-lib: 3.0.1
       yn: 3.1.1
-    dev: true
 
   /tslib@1.14.1:
     resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
@@ -4710,7 +4660,6 @@ packages:
     resolution: {integrity: sha512-wVORMBGO/FAs/++blGNeAVdbNKtIh1rbBL2EyQ1+J9lClJ93KiiKe8PmFIVdXhHcyv44SL9oglmfeSsndo0jRw==}
     engines: {node: '>=12.20'}
     hasBin: true
-    dev: true
 
   /ufo@1.2.0:
     resolution: {integrity: sha512-RsPyTbqORDNDxqAdQPQBpgqhWle1VcTSou/FraClYlHf6TZnQcGslpLcAphNR+sQW4q5lLWLbOsRlh9j24baQg==}
@@ -4808,7 +4757,6 @@ packages:
 
   /v8-compile-cache-lib@3.0.1:
     resolution: {integrity: sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==}
-    dev: true
 
   /validate-npm-package-license@3.0.4:
     resolution: {integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==}
@@ -4969,7 +4917,6 @@ packages:
 
   /wrappy@1.0.2:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
-    dev: true
 
   /xml-name-validator@4.0.0:
     resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==}
@@ -5000,7 +4947,6 @@ packages:
   /yaml@2.3.1:
     resolution: {integrity: sha512-2eHWfjaoXgTBC2jNM1LRef62VQa0umtvRiDSk6HSzW7RvS5YtkabJrwYLLEKWBc8a5U2PTSCs+dJjUTJdlHsWQ==}
     engines: {node: '>= 14'}
-    dev: true
 
   /yargs-parser@20.2.9:
     resolution: {integrity: sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==}
@@ -5028,7 +4974,6 @@ packages:
   /yn@3.1.1:
     resolution: {integrity: sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==}
     engines: {node: '>=6'}
-    dev: true
 
   /yocto-queue@0.1.0:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}