@cryptlex/web-components 1.3.5 → 1.4.1

package/lib/tailwind.preset.css

@@ -0,0 +1,220 @@
+/** https://tailwindcss.com/docs/theme#theme-variable-namespaces */
+
+@plugin "tailwindcss-animate";
+
+@theme {
+    /* Radius */
+    --radius: 0.25rem;
+    --radius-lg: var(--radius);
+    --radius-md: calc(var(--radius) - 2px);
+    --radius-sm: calc(var(--radius) - 4px);
+
+    /* Text Sizes */
+    --text-sm: 0.875rem;
+    --text-base: 1rem;
+    --text-md: 1.125rem;
+    --text-lg: 1.25rem;
+    --text-xl: 1.5rem;
+    --text-2xl: 1.75rem;
+    --text-3xl: 2rem;
+
+    /* Colors */
+    --color-*: initial;
+    --color-primary-1: var(--primary-1);
+    --color-primary-2: var(--primary-2);
+    --color-primary-3: var(--primary-3);
+    --color-primary-4: var(--primary-4);
+    --color-primary-5: var(--primary-5);
+    --color-primary-6: var(--primary-6);
+    --color-primary-7: var(--primary-7);
+    --color-primary-8: var(--primary-8);
+    --color-primary-9: var(--primary-9);
+    --color-primary-10: var(--primary-10);
+
+    --color-secondary-1: var(--secondary-1);
+    --color-secondary-2: var(--secondary-2);
+    --color-secondary-3: var(--secondary-3);
+    --color-secondary-4: var(--secondary-4);
+    --color-secondary-5: var(--secondary-5);
+    --color-secondary-6: var(--secondary-6);
+    --color-secondary-7: var(--secondary-7);
+    --color-secondary-8: var(--secondary-8);
+    --color-secondary-9: var(--secondary-9);
+    --color-secondary-10: var(--secondary-10);
+
+    --color-neutral-1: var(--neutral-1);
+    --color-neutral-2: var(--neutral-2);
+    --color-neutral-3: var(--neutral-3);
+    --color-neutral-4: var(--neutral-4);
+    --color-neutral-5: var(--neutral-5);
+    --color-neutral-6: var(--neutral-6);
+    --color-neutral-7: var(--neutral-7);
+    --color-neutral-8: var(--neutral-8);
+    --color-neutral-9: var(--neutral-9);
+    --color-neutral-10: var(--neutral-10);
+
+    --color-destructive-1: var(--destructive-1);
+    --color-destructive-2: var(--destructive-2);
+    --color-destructive-3: var(--destructive-3);
+    --color-destructive-4: var(--destructive-4);
+    --color-destructive-5: var(--destructive-5);
+    --color-destructive-6: var(--destructive-6);
+    --color-destructive-7: var(--destructive-7);
+    --color-destructive-8: var(--destructive-8);
+    --color-destructive-9: var(--destructive-9);
+    --color-destructive-10: var(--destructive-10);
+
+    --color-success-1: var(--success-1);
+    --color-success-2: var(--success-2);
+    --color-success-3: var(--success-3);
+    --color-success-4: var(--success-4);
+    --color-success-5: var(--success-5);
+    --color-success-6: var(--success-6);
+    --color-success-7: var(--success-7);
+    --color-success-8: var(--success-8);
+    --color-success-9: var(--success-9);
+    --color-success-10: var(--success-10);
+
+    --color-background: var(--color-neutral-2);
+    --color-foreground: var(--color-neutral-9);
+
+    --color-card: var(--color-neutral-1);
+    --color-card-foreground: var(--color-foreground);
+
+    --color-popover: var(--color-card);
+    --color-popover-foreground: var(--color-foreground);
+
+    --color-primary: var(--color-primary-8);
+    --color-primary-foreground: var(--color-primary-2);
+    --color-secondary: var(--color-secondary-8);
+    --color-secondary-foreground: var(--color-secondary-2);
+    --color-muted: var(--color-neutral-7);
+    --color-muted-foreground: var(--color-neutral-4);
+    --color-accent: var(--color-neutral-7);
+    --color-accent-foreground: var(--color-neutral-4);
+    --color-destructive: var(--color-destructive-8);
+    --color-destructive-foreground: var(--color-destructive-2);
+    --color-success: var(--color-success-8);
+    --color-success-foreground: var(--color-success-2);
+
+    --color-border: var(--color-neutral-3);
+    --color-input: var(--color-border);
+    --color-ring: var(--color-neutral-5);
+
+    --color-chart-1: var(--color-primary-5);
+    --color-chart-2: var(--color-primary-4);
+    --color-chart-3: var(--color-secondary-5);
+    --color-chart-4: var(--color-secondary-4);
+    --color-chart-5: var(--color-secondary-2);
+
+    --color-sidebar-background: var(--color-background);
+    --color-sidebar-foreground: var(--color-foreground);
+    /* // TODO */
+    --color-sidebar-primary: 240 5.9% 10%;
+    --color-sidebar-primary-foreground: 0 0% 98%;
+
+    --color-sidebar-accent: 240 4.8% 95.9%;
+    --color-sidebar-accent-foreground: 240 5.9% 10%;
+
+    --color-sidebar-border: var(--color-border);
+    --color-sidebar-ring: var(--color-ring);
+
+    /** TODO Grid Tokens */
+    /* --grid-fluid-min: 16rem;
+    gridTemplateColumns: {
+        fluid: 'repeat(auto-fill, minmax(var(--grid-fluid-min), 1fr))',
+      }, */
+
+    --animate-accordion-down: accordion-down 0.2s ease-out;
+
+    @keyframes accordion-down {
+        from {
+            height: 0;
+        }
+
+        to {
+            height: var(--radix-accordion-content-height);
+        }
+    }
+
+    --animate-accordion-up: accordion-up 0.2s ease-out;
+
+    @keyframes accordion-up {
+        from {
+            height: var(--radix-accordion-content-height);
+        }
+
+        to {
+            height: 0;
+        }
+    }
+
+    --animate-collapsible-down: collapsible-down 0.2s ease-out;
+
+    @keyframes collapsible-down {
+        from {
+            height: 0;
+        }
+
+        to {
+            height: var(--radix-collapsible-content-height);
+        }
+    }
+
+    --animate-collapsible-up: collapsible-up 0.2s ease-out;
+
+    @keyframes collapsible-up {
+        from {
+            height: var(--radix-collapsible-content-height);
+        }
+
+        to {
+            height: 0;
+        }
+    }
+}
+
+@utility text-caption {
+    @apply text-sm;
+}
+
+
+@utility text-body {
+    @apply text-base;
+    /* lineHeight: '1.6', */
+}
+
+@utility text-heading-6 {
+    @apply text-base;
+    /* fontWeight: 700, */
+    /* lineHeight: '1.2', */
+
+}
+
+@utility text-heading-5 {
+    @apply text-md;
+    /* lineHeight: '1.2', */
+}
+
+@utility text-heading-4 {
+    @apply text-lg;
+    /* lineHeight: '1.2', */
+    /* fontWeight: 500, */
+}
+
+@utlility text-heading-3 {
+    @apply text-xl;
+}
+
+@utility text-heading-2 {
+    @apply text-2xl;
+    /* lineHeight: '1', */
+    /* fontWeight: 300, */
+}
+
+@utility text-heading-1 {
+    @apply text-3xl;
+    /* lineHeight: '1', */
+}
+
+@layer components {}

package/lib/tokens.css

@@ -4,16 +4,16 @@
 */
 :root {
   --primary-hue: 240;
-  --xprimary-1: 0.99 0.01 var(--primary-hue);
-  --xprimary-2: 0.97 0.03 var(--primary-hue);
-  --xprimary-3: 0.9 0.04 var(--primary-hue);
-  --xprimary-4: 0.72 0.13 var(--primary-hue);
-  --xprimary-5: 0.67 0.13 var(--primary-hue);
-  --xprimary-6: 0.5 0.13 var(--primary-hue);
-  --xprimary-7: 0.35 0.13 var(--primary-hue);
-  --xprimary-8: 0.25 0.13 var(--primary-hue);
-  --xprimary-9: 0.20 0.09 var(--primary-hue);
-  --xprimary-10: 0.10 0.03 var(--primary-hue);
+  --xprimary-1: oklch(0.99 0.01 var(--primary-hue));
+  --xprimary-2: oklch(0.97 0.03 var(--primary-hue));
+  --xprimary-3: oklch(0.9 0.04 var(--primary-hue));
+  --xprimary-4: oklch(0.72 0.13 var(--primary-hue));
+  --xprimary-5: oklch(0.67 0.13 var(--primary-hue));
+  --xprimary-6: oklch(0.5 0.13 var(--primary-hue));
+  --xprimary-7: oklch(0.35 0.13 var(--primary-hue));
+  --xprimary-8: oklch(0.25 0.13 var(--primary-hue));
+  --xprimary-9: oklch(0.2 0.09 var(--primary-hue));
+  --xprimary-10: oklch(0.1 0.03 var(--primary-hue));
   --primary-1: var(--xprimary-1);
   --primary-2: var(--xprimary-2);
   --primary-3: var(--xprimary-3);
@@ -24,17 +24,17 @@
   --primary-8: var(--xprimary-8);
   --primary-9: var(--xprimary-9);
   --primary-10: var(--xprimary-10);
-  --secondary-hue: calc(var(--primary-hue) + 60);
-  --xsecondary-1: 0.99 0.01 var(--secondary-hue);
-  --xsecondary-2: 0.97 0.03 var(--secondary-hue);
-  --xsecondary-3: 0.9 0.04 var(--secondary-hue);
-  --xsecondary-4: 0.72 0.13 var(--secondary-hue);
-  --xsecondary-5: 0.67 0.13 var(--secondary-hue);
-  --xsecondary-6: 0.5 0.13 var(--secondary-hue);
-  --xsecondary-7: 0.35 0.13 var(--secondary-hue);
-  --xsecondary-8: 0.25 0.13 var(--secondary-hue);
-  --xsecondary-9: 0.20 0.09 var(--secondary-hue);
-  --xsecondary-10: 0.10 0.03 var(--secondary-hue);
+  --secondary-hue: calc(var(--primary-hue) + 30);
+  --xsecondary-1: oklch(0.99 0.01 var(--secondary-hue));
+  --xsecondary-2: oklch(0.97 0.03 var(--secondary-hue));
+  --xsecondary-3: oklch(0.9 0.04 var(--secondary-hue));
+  --xsecondary-4: oklch(0.72 0.13 var(--secondary-hue));
+  --xsecondary-5: oklch(0.67 0.13 var(--secondary-hue));
+  --xsecondary-6: oklch(0.5 0.13 var(--secondary-hue));
+  --xsecondary-7: oklch(0.35 0.13 var(--secondary-hue));
+  --xsecondary-8: oklch(0.25 0.13 var(--secondary-hue));
+  --xsecondary-9: oklch(0.2 0.09 var(--secondary-hue));
+  --xsecondary-10: oklch(0.1 0.03 var(--secondary-hue));
   --secondary-1: var(--xsecondary-1);
   --secondary-2: var(--xsecondary-2);
   --secondary-3: var(--xsecondary-3);
@@ -45,17 +45,17 @@
   --secondary-8: var(--xsecondary-8);
   --secondary-9: var(--xsecondary-9);
   --secondary-10: var(--xsecondary-10);
-  --destructive-hue: 10;
-  --xdestructive-1: 0.99 0.01 var(--destructive-hue);
-  --xdestructive-2: 0.97 0.03 var(--destructive-hue);
-  --xdestructive-3: 0.9 0.04 var(--destructive-hue);
-  --xdestructive-4: 0.72 0.13 var(--destructive-hue);
-  --xdestructive-5: 0.67 0.13 var(--destructive-hue);
-  --xdestructive-6: 0.5 0.13 var(--destructive-hue);
-  --xdestructive-7: 0.35 0.13 var(--destructive-hue);
-  --xdestructive-8: 0.25 0.13 var(--destructive-hue);
-  --xdestructive-9: 0.20 0.09 var(--destructive-hue);
-  --xdestructive-10: 0.10 0.03 var(--destructive-hue);
+  --destructive-hue: calc(var(--primary-hue) - 230);
+  --xdestructive-1: oklch(0.99 0.01 var(--destructive-hue));
+  --xdestructive-2: oklch(0.97 0.03 var(--destructive-hue));
+  --xdestructive-3: oklch(0.9 0.04 var(--destructive-hue));
+  --xdestructive-4: oklch(0.72 0.13 var(--destructive-hue));
+  --xdestructive-5: oklch(0.67 0.13 var(--destructive-hue));
+  --xdestructive-6: oklch(0.5 0.13 var(--destructive-hue));
+  --xdestructive-7: oklch(0.35 0.13 var(--destructive-hue));
+  --xdestructive-8: oklch(0.25 0.13 var(--destructive-hue));
+  --xdestructive-9: oklch(0.2 0.09 var(--destructive-hue));
+  --xdestructive-10: oklch(0.1 0.03 var(--destructive-hue));
   --destructive-1: var(--xdestructive-1);
   --destructive-2: var(--xdestructive-2);
   --destructive-3: var(--xdestructive-3);
@@ -66,17 +66,17 @@
   --destructive-8: var(--xdestructive-8);
   --destructive-9: var(--xdestructive-9);
   --destructive-10: var(--xdestructive-10);
-  --success-hue: 152;
-  --xsuccess-1: 0.99 0.01 var(--success-hue);
-  --xsuccess-2: 0.97 0.03 var(--success-hue);
-  --xsuccess-3: 0.9 0.04 var(--success-hue);
-  --xsuccess-4: 0.72 0.13 var(--success-hue);
-  --xsuccess-5: 0.67 0.13 var(--success-hue);
-  --xsuccess-6: 0.5 0.13 var(--success-hue);
-  --xsuccess-7: 0.35 0.13 var(--success-hue);
-  --xsuccess-8: 0.25 0.13 var(--success-hue);
-  --xsuccess-9: 0.20 0.09 var(--success-hue);
-  --xsuccess-10: 0.10 0.03 var(--success-hue);
+  --success-hue: calc(var(--primary-hue) - 90);
+  --xsuccess-1: oklch(0.99 0.01 var(--success-hue));
+  --xsuccess-2: oklch(0.97 0.03 var(--success-hue));
+  --xsuccess-3: oklch(0.9 0.04 var(--success-hue));
+  --xsuccess-4: oklch(0.72 0.13 var(--success-hue));
+  --xsuccess-5: oklch(0.67 0.13 var(--success-hue));
+  --xsuccess-6: oklch(0.5 0.13 var(--success-hue));
+  --xsuccess-7: oklch(0.35 0.13 var(--success-hue));
+  --xsuccess-8: oklch(0.25 0.13 var(--success-hue));
+  --xsuccess-9: oklch(0.2 0.09 var(--success-hue));
+  --xsuccess-10: oklch(0.1 0.03 var(--success-hue));
   --success-1: var(--xsuccess-1);
   --success-2: var(--xsuccess-2);
   --success-3: var(--xsuccess-3);
@@ -88,17 +88,17 @@
   --success-9: var(--xsuccess-9);
   --success-10: var(--xsuccess-10);
   --neutral-hue: var(--primary-hue);
-  --neutral-s: 0.01;
-  --xneutral-1: 0.99 var(--neutral-s) var(--neutral-hue);
-  --xneutral-2: 0.97 var(--neutral-s) var(--neutral-hue);
-  --xneutral-3: 0.9 var(--neutral-s) var(--neutral-hue);
-  --xneutral-4: 0.72 var(--neutral-s) var(--neutral-hue);
-  --xneutral-5: 0.67 var(--neutral-s) var(--neutral-hue);
-  --xneutral-6: 0.5 var(--neutral-s) var(--neutral-hue);
-  --xneutral-7: 0.4 var(--neutral-s) var(--neutral-hue);
-  --xneutral-8: 0.35 var(--neutral-s) var(--neutral-hue);
-  --xneutral-9: 0.33 var(--neutral-s) var(--neutral-hue);
-  --xneutral-10: 0.25 var(--neutral-s) var(--neutral-hue);
+  --neutral-s: 0.005;
+  --xneutral-1: oklch(0.985 var(--neutral-s) var(--neutral-hue));
+  --xneutral-2: oklch(0.97 var(--neutral-s) var(--neutral-hue));
+  --xneutral-3: oklch(0.922 var(--neutral-s) var(--neutral-hue));
+  --xneutral-4: oklch(0.87 var(--neutral-s) var(--neutral-hue));
+  --xneutral-5: oklch(0.708 var(--neutral-s) var(--neutral-hue));
+  --xneutral-6: oklch(0.556 var(--neutral-s) var(--neutral-hue));
+  --xneutral-7: oklch(0.439 var(--neutral-s) var(--neutral-hue));
+  --xneutral-8: oklch(0.35 var(--neutral-s) var(--neutral-hue));
+  --xneutral-9: oklch(0.269 var(--neutral-s) var(--neutral-hue));
+  --xneutral-10: oklch(0.205 var(--neutral-s) var(--neutral-hue));
   --neutral-1: var(--xneutral-1);
   --neutral-2: var(--xneutral-2);
   --neutral-3: var(--xneutral-3);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cryptlex/web-components",
-  "version": "1.3.5",
+  "version": "1.4.1",
   "description": "React component library for Cryptlex web applications",
   "author": "Cryptlex",
   "type": "module",
@@ -15,11 +15,11 @@
     },
     "./index.css": "./lib/index.css",
     "./tokens.css": "./lib/tokens.css",
-    "./tailwind-preset": "./tailwind.preset.ts"
+    "./tailwind.preset.css": "./lib/tailwind.preset.css"
   },
   "files": [
     "dist",
-    "tailwind.preset.ts",
+    "lib/tailwind.preset.css",
     "lib/tokens.css",
     "lib/index.css"
   ],
@@ -58,6 +58,7 @@
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-tabs": "^1.1.1",
     "@radix-ui/react-tooltip": "^1.1.3",
+    "@tailwindcss/vite": "^4.0.6",
     "@tanstack/react-query": "^5.62.3",
     "@tanstack/react-router": "^1.87.1",
     "@tanstack/react-table": "^8.20.5",
@@ -76,11 +77,12 @@
     "recharts": "^2.13.0",
     "rollup-preserve-directives": "^1.1.3",
     "sonner": "^1.7.0",
-    "tailwindcss": "^3.4.14",
+    "tailwindcss": "^4.0.6",
     "tailwindcss-animate": "^1.0.7",
     "use-debounce": "^10.0.4",
     "vaul": "^1.1.1",
-    "zod": "^3.24.1"
+    "zod": "^3.24.1",
+    "@hookform/resolvers": "^4.0.0"
   },
   "dependencies": {
     "@cryptlex/web-api-types": "^1.17.0"
@@ -101,13 +103,11 @@
     "@types/react": "^18.3.10",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.2",
-    "autoprefixer": "^10.4.20",
     "eslint": "^9.11.1",
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "eslint-plugin-react-refresh": "^0.4.12",
     "eslint-plugin-storybook": "^0.11.0",
     "globals": "^15.9.0",
-    "postcss": "^8.4.47",
     "sass": "^1.80.6",
     "storybook": "^8.4.2",
     "typescript": "^5.5.3",

package/tailwind.preset.ts

@@ -1,191 +0,0 @@
-import type { Config } from 'tailwindcss';
-
-const tokenRamps = (paletteName: string) => {
-  const ramps: Record<number, string> = {};
-  for (let i = 1; i <= 10; i++) {
-    ramps[i] = `oklch(var(--${paletteName}-${i}) / <alpha-value>)`
-  }
-  return ramps;
-}
-export default {
-  // Enable dark mode based on class.
-  darkMode: ['class'],
-  // The preset does not define content, this is done in the host.
-  content: [],
-  theme: {
-    borderRadius: {
-      lg: 'var(--radius)',
-      md: 'calc(var(--radius) - 2px)',
-      sm: 'calc(var(--radius) - 4px)',
-    },
-    fontSize: {
-      // text-caption
-      'caption': [
-        'var(--font-sm)',
-        {
-          lineHeight: '1.5',
-        },
-      ],
-      // text-body
-      'body': [
-        'var(--font-base)',
-        {
-          lineHeight: '1.6',
-        },
-      ],
-      // text-heading-6
-      'heading-6': [
-        'var(--font-base)',
-        {
-          lineHeight: '1.2',
-          fontWeight: 700,
-        },
-      ],
-      // text-heading-5
-      'heading-5': [
-        'var(--font-md)',
-        {
-          lineHeight: '1.2',
-        },
-      ],
-      // text-heading-4
-      'heading-4': [
-        'var(--font-lg)',
-        {
-          lineHeight: '1.2',
-          fontWeight: 500,
-        },
-      ],
-      // text-heading-3
-      'heading-3': [
-        'var(--font-xl)',
-        {
-          lineHeight: '1.1',
-          fontWeight: 500,
-        },
-      ],
-
-      // text-heading-2
-      'heading-2': [
-        'var(--font-2xl)',
-        {
-          lineHeight: '1',
-          fontWeight: 300,
-        },
-      ],
-
-      // text-heading-1
-      'heading-1': [
-        'var(--font-3xl)',
-        {
-          lineHeight: '1',
-        },
-      ],
-    },
-    colors: {
-      transparent: 'transparent',
-      current: 'currentColor',
-      white: '#ffffff',
-      black: '#000000',
-      background: 'oklch(var(--background) / <alpha-value>)',
-      foreground: 'oklch(var(--foreground) / <alpha-value>)',
-      card: {
-        DEFAULT: 'oklch(var(--card) / <alpha-value>)',
-        foreground: 'oklch(var(--card-foreground) / <alpha-value>)',
-      },
-      popover: {
-        DEFAULT: 'oklch(var(--popover) / <alpha-value>)',
-        foreground: 'oklch(var(--popover-foreground) / <alpha-value>)',
-      },
-      primary: {
-        DEFAULT: 'oklch(var(--primary) / <alpha-value>)',
-        foreground: 'oklch(var(--primary-foreground) / <alpha-value>)',
-        ...tokenRamps('primary'),
-      },
-      secondary: {
-        DEFAULT: 'oklch(var(--secondary) / <alpha-value>)',
-        foreground: 'oklch(var(--secondary-foreground) / <alpha-value>)',
-        ...tokenRamps('secondary'),
-      },
-      neutral: {
-        ...tokenRamps('neutral'),
-      },
-      muted: {
-        DEFAULT: 'oklch(var(--muted) / <alpha-value>)',
-        foreground: 'oklch(var(--muted-foreground) / <alpha-value>)',
-      },
-      accent: {
-        DEFAULT: 'oklch(var(--accent) / <alpha-value>)',
-        foreground: 'oklch(var(--accent-foreground) / <alpha-value>)',
-      },
-      destructive: {
-        DEFAULT: 'oklch(var(--destructive) / <alpha-value>)',
-        foreground: 'oklch(var(--destructive-foreground) / <alpha-value>)',
-        ...tokenRamps('destructive'),
-      },
-      success: {
-        DEFAULT: 'oklch(var(--success) / <alpha-value>)',
-        foreground: 'oklch(var(--success-foreground) / <alpha-value>)',
-        ...tokenRamps('success'),
-      },
-      border: 'oklch(var(--border) / <alpha-value>)',
-      input: 'oklch(var(--input) / <alpha-value>)',
-      ring: 'oklch(var(--ring) / <alpha-value>)',
-      chart: {
-        1: 'oklch(var(--chart-1) / <alpha-value>)',
-        2: 'oklch(var(--chart-2) / <alpha-value>)',
-        3: 'oklch(var(--chart-3) / <alpha-value>)',
-        4: 'oklch(var(--chart-4) / <alpha-value>)',
-        5: 'oklch(var(--chart-5) / <alpha-value>)',
-      },
-      sidebar: {
-        DEFAULT: 'oklch(var(--sidebar-background) / <alpha-value>)',
-        foreground: 'oklch(var(--sidebar-foreground) / <alpha-value>)',
-        primary: 'oklch(var(--sidebar-primary) / <alpha-value>)',
-        primaryForeground: 'oklch(var(--sidebar-primary-foreground) / <alpha-value>)',
-        accent: 'oklch(var(--sidebar-accent) / <alpha-value>)',
-        accentForeground: 'oklch(var(--sidebar-accent-foreground) / <alpha-value>)',
-        border: 'oklch(var(--sidebar-border) / <alpha-value>)',
-        ring: 'oklch(var(--sidebar-ring) / <alpha-value>)',
-      },
-    },
-    extend: {
-      gridTemplateColumns: {
-        fluid: 'repeat(auto-fill, minmax(var(--grid-fluid-min), 1fr))',
-      },
-      keyframes: {
-        'accordion-down': {
-          from: {
-            height: '0',
-          },
-          to: {
-            height: 'var(--radix-accordion-content-height)',
-          },
-        },
-        'accordion-up': {
-          from: {
-            height: 'var(--radix-accordion-content-height)',
-          },
-          to: {
-            height: '0',
-          },
-        },
-        'collapsible-down': {
-          from: { height: '0' },
-          to: { height: 'var(--radix-collapsible-content-height)' },
-        },
-        'collapsible-up': {
-          from: { height: 'var(--radix-collapsible-content-height)' },
-          to: { height: '0' },
-        },
-      },
-      animation: {
-        'accordion-down': 'accordion-down 0.2s ease-out',
-        'accordion-up': 'accordion-up 0.2s ease-out',
-        'collapsible-down': 'collapsible-down 0.2s ease-out',
-        'collapsible-up': 'collapsible-up 0.2s ease-out',
-      },
-    },
-  },
-  plugins: [require('tailwindcss-animate')], // Include any plugins you need
-} satisfies Config;