@zentauri-ui/zentauri-components 1.6.3 → 1.7.0

package/src/ui/buttons/variants.ts

@@ -1,87 +1,18 @@
 import { cva } from "class-variance-authority";
 
-export const buttonVariants = cva(
-  [
-    "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl",
-    "text-sm font-medium ring-offset-slate-50 dark:ring-offset-slate-950 transition-colors",
-    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-600 dark:focus-visible:ring-slate-300 focus-visible:ring-offset-2",
-    "disabled:pointer-events-none disabled:opacity-50",
-    "select-none",
-  ],
-  {
-    variants: {
-      appearance: {
-        default:
-          "bg-slate-900 dark:bg-slate-50 text-slate-50 dark:text-slate-950 shadow-[0_1px_2px_rgba(15,23,42,0.08)] dark:shadow-[0_1px_2px_rgba(15,23,42,0.12)] hover:bg-black dark:hover:bg-white",
-        secondary:
-          "bg-slate-200 dark:bg-slate-800 text-slate-900 dark:text-slate-50 hover:bg-slate-300 dark:hover:bg-slate-700",
-        destructive:
-          "bg-rose-500 dark:bg-rose-700 text-white hover:bg-rose-500 dark:hover:bg-rose-800",
-        outline:
-          "border border-black/10 dark:border-white/10 bg-black/5 dark:bg-white/5 text-slate-900 dark:text-slate-50 hover:bg-black/10 dark:hover:bg-white/10",
-        ghost:
-          "bg-transparent text-slate-700 dark:text-slate-200 hover:bg-black/5 dark:hover:bg-white/5",
-        link: "bg-transparent text-cyan-700 dark:text-cyan-300 underline-offset-4 hover:underline",
-        glass:
-          "border border-black/15 dark:border-white/15 bg-black/10 dark:bg-white/10 text-slate-900 dark:text-white backdrop-blur-md hover:bg-black/15 dark:hover:bg-white/15",
-        emerald:
-          "bg-emerald-500 dark:bg-emerald-800 text-white hover:bg-emerald-500 dark:hover:bg-emerald-900",
-        indigo:
-          "bg-indigo-800 dark:bg-indigo-600 text-white hover:bg-indigo-800 dark:hover:bg-indigo-600",
-        purple:
-          "bg-purple-800 dark:bg-purple-600 text-white hover:bg-purple-800 dark:hover:bg-purple-600",
-        pink: "bg-pink-800 dark:bg-pink-600 text-white hover:bg-pink-800 dark:hover:bg-pink-600",
-        rose: "bg-rose-800 dark:bg-rose-600 text-white hover:bg-rose-800 dark:hover:bg-rose-600",
-        sky: "bg-sky-500 dark:bg-sky-700 text-white hover:bg-sky-500 dark:hover:bg-sky-800",
-        teal: "bg-teal-500 dark:bg-teal-700 text-white hover:bg-teal-500 dark:hover:bg-teal-800",
-        yellow:
-          "bg-yellow-500 dark:bg-yellow-800 text-white hover:bg-yellow-500 dark:hover:bg-yellow-900",
-        orange:
-          "bg-orange-500 dark:bg-orange-800 text-white hover:bg-orange-500 dark:hover:bg-orange-900",
-        gray: "bg-gray-500 dark:bg-gray-700 text-white hover:bg-gray-500 dark:hover:bg-gray-800",
-        amber:
-          "bg-amber-500 dark:bg-amber-800 text-white hover:bg-amber-500 dark:hover:bg-amber-900",
-        violet:
-          "bg-violet-800 dark:bg-violet-600 text-white hover:bg-violet-800 dark:hover:bg-violet-600",
-        "gradient-blue":
-          "bg-linear-to-r from-blue-800 dark:from-blue-600 to-purple-800 dark:to-purple-600 text-white hover:from-blue-800 dark:hover:from-blue-600 hover:to-purple-800 dark:hover:to-purple-600",
-        "gradient-green":
-          "bg-linear-to-r from-green-800 dark:from-green-600 to-lime-800 dark:to-lime-600 text-white hover:from-green-800 dark:hover:from-green-600 hover:to-lime-800 dark:hover:to-lime-600",
-        "gradient-red":
-          "bg-linear-to-r from-red-800 dark:from-red-600 to-pink-800 dark:to-pink-600 text-white hover:from-red-800 dark:hover:from-red-600 hover:to-pink-800 dark:hover:to-pink-600",
-        "gradient-yellow":
-          "bg-linear-to-r from-yellow-800 dark:from-yellow-600 to-orange-800 dark:to-orange-600 text-white hover:from-yellow-800 dark:hover:from-yellow-600 hover:to-orange-800 dark:hover:to-orange-600",
-        "gradient-purple":
-          "bg-linear-to-r from-purple-800 dark:from-purple-600 to-pink-800 dark:to-pink-600 text-white hover:from-purple-800 dark:hover:from-purple-600 hover:to-pink-800 dark:hover:to-pink-600",
-        "gradient-teal":
-          "bg-linear-to-r from-teal-800 dark:from-teal-600 to-cyan-800 dark:to-cyan-600 text-white hover:from-teal-800 dark:hover:from-teal-600 hover:to-cyan-800 dark:hover:to-cyan-600",
-        "gradient-indigo":
-          "bg-linear-to-r from-indigo-800 dark:from-indigo-600 to-purple-800 dark:to-purple-600 text-white hover:from-indigo-800 dark:hover:from-indigo-600 hover:to-purple-800 dark:hover:to-purple-600",
-        "gradient-pink":
-          "bg-linear-to-r from-pink-800 dark:from-pink-600 to-rose-800 dark:to-rose-600 text-white hover:from-pink-800 dark:hover:from-pink-600 hover:to-rose-800 dark:hover:to-rose-600",
-        "gradient-orange":
-          "bg-linear-to-r from-orange-800 dark:from-orange-600 to-red-800 dark:to-red-600 text-white hover:from-orange-800 dark:hover:from-orange-600 hover:to-red-800 dark:hover:to-red-600",
-      },
-      size: {
-        sm: "h-7 md:h-9 px-3 text-xs",
-        md: "h-9 md:h-11 px-4",
-        lg: "h-10 md:h-12 px-5 text-base",
-        xl: "h-12 md:h-14 px-6 text-lg",
-        "2xl": "h-14 md:h-16 px-6 md:px-8 text-xl",
-        "3xl": "h-16 md:h-18 px-8 md:px-10 text-2xl",
-        "4xl": "h-18 md:h-20 px-10 md:px-12 text-2xl",
-        "5xl": "h-20 md:h-22 px-12 md:px-14 text-2xl",
-        "6xl": "h-22 md:h-24 px-14 md:px-16 text-2xl",
-        "7xl": "h-24 md:h-26 px-16 md:px-18 text-2xl",
-        "8xl": "h-26 md:h-28 px-20 text-2xl",
-        "9xl": "h-24 md:h-30 px-18 md:px-22 text-2xl",
-        "10xl": "h-26 md:h-32 px-20 md:px-24 text-2xl",
-        icon: "h-10 w-10",
-      },
-    },
-    defaultVariants: {
-      appearance: "default",
-      size: "md",
-    },
+import {
+  zuiButtonAppearances,
+  zuiButtonBase,
+  zuiButtonSizes,
+} from "../../design-system";
+
+export const buttonVariants = cva(zuiButtonBase, {
+  variants: {
+    appearance: zuiButtonAppearances,
+    size: zuiButtonSizes,
+  },
+  defaultVariants: {
+    appearance: "default",
+    size: "md",
   },
-);
+});

package/src/ui/card/card.test.tsx

@@ -42,7 +42,7 @@ describe("Card", () => {
 
   it("should apply default appearance classes", () => {
     render(<Card>Inner</Card>);
-    expect(getCardRoot().className).toMatch(/border-white\/10/);
+    expect(getCardRoot().className).toMatch(/--zui-card-default-border/);
   });
 
   it("should apply glass appearance when requested", () => {

package/src/ui/card/variants.ts

@@ -1,132 +1,57 @@
 import { cva } from "class-variance-authority";
 
-export const cardVariants = cva(
-  [
-    "relative flex w-full flex-col overflow-hidden text-slate-900 dark:text-slate-50",
-    "ring-offset-slate-50 dark:ring-offset-slate-950 transition-colors",
-    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-600 dark:focus-visible:ring-slate-300 focus-visible:ring-offset-2",
-  ],
-  {
-    variants: {
-      appearance: {
-        default:
-          "border border-black/10 dark:border-white/10 bg-black/5 dark:bg-white/5 shadow-[0_1px_2px_rgba(15,23,42,0.08)] dark:shadow-[0_1px_2px_rgba(15,23,42,0.12)]",
-        glass:
-          "border border-black/15 dark:border-white/15 bg-black/10 dark:bg-white/10 backdrop-blur-md shadow-[0_8px_24px_rgba(15,23,42,0.12)] dark:shadow-[0_18px_48px_rgba(15,23,42,0.35)]",
-        outline: "border border-black/15 dark:border-white/15 bg-transparent",
-        ghost: "border border-transparent bg-transparent",
-        elevated:
-          "border border-black/10 dark:border-white/10 bg-slate-100/80 dark:bg-slate-900/80 shadow-[0_12px_32px_rgba(15,23,42,0.12)] dark:shadow-[0_24px_64px_rgba(15,23,42,0.45)]",
-        sky: "border border-sky-800 dark:border-sky-600 bg-sky-50 dark:bg-sky-950/70 backdrop-blur-xl",
-        rose: "border border-rose-800 dark:border-rose-600 bg-rose-50 dark:bg-rose-950/70 backdrop-blur-xl",
-        purple:
-          "border border-purple-800 dark:border-purple-600 bg-purple-50 dark:bg-purple-950/70 backdrop-blur-xl",
-        pink: "border border-pink-800 dark:border-pink-600 bg-pink-50 dark:bg-pink-950/70 backdrop-blur-xl",
-        orange:
-          "border border-orange-800 dark:border-orange-600 bg-orange-50 dark:bg-orange-950/70 backdrop-blur-xl",
-        yellow:
-          "border border-yellow-800 dark:border-yellow-600 bg-yellow-50 dark:bg-yellow-950/70 backdrop-blur-xl",
-        teal: "border border-teal-800 dark:border-teal-600 bg-teal-50 dark:bg-teal-950/70 backdrop-blur-xl",
-        indigo:
-          "border border-indigo-800 dark:border-indigo-600 bg-indigo-50 dark:bg-indigo-950/70 backdrop-blur-xl",
-        emerald:
-          "border border-emerald-800 dark:border-emerald-600 bg-emerald-50 dark:bg-emerald-950/70 backdrop-blur-xl",
-        gray: "border border-gray-800 dark:border-gray-600 bg-gray-50 dark:bg-gray-950/70 backdrop-blur-xl",
-        amber:
-          "border border-amber-800 dark:border-amber-600 bg-amber-50 dark:bg-amber-950/70 backdrop-blur-xl",
-        violet:
-          "border border-violet-800 dark:border-violet-600 bg-violet-50 dark:bg-violet-950/70 backdrop-blur-xl",
-        "gradient-blue":
-          "border border-blue-800 dark:border-blue-600 bg-linear-to-r from-blue-50 dark:from-blue-950/70 to-purple-50 dark:to-purple-950/70 backdrop-blur-xl",
-        "gradient-green":
-          "border border-green-800 dark:border-green-600 bg-linear-to-r from-green-50 dark:from-green-950/70 to-lime-50 dark:to-lime-950/70 backdrop-blur-xl",
-        "gradient-red":
-          "border border-red-800 dark:border-red-600 bg-linear-to-r from-red-50 dark:from-red-950/70 to-pink-50 dark:to-pink-950/70 backdrop-blur-xl",
-        "gradient-yellow":
-          "border border-yellow-800 dark:border-yellow-600 bg-linear-to-r from-yellow-50 dark:from-yellow-950/70 to-orange-50 dark:to-orange-950/70 backdrop-blur-xl",
-        "gradient-purple":
-          "border border-purple-800 dark:border-purple-600 bg-linear-to-r from-purple-50 dark:from-purple-950/70 to-pink-50 dark:to-pink-950/70 backdrop-blur-xl",
-        "gradient-teal":
-          "border border-teal-800 dark:border-teal-600 bg-linear-to-r from-teal-50 dark:from-teal-950/70 to-cyan-50 dark:to-cyan-950/70 backdrop-blur-xl",
-        "gradient-indigo":
-          "border border-indigo-800 dark:border-indigo-600 bg-linear-to-r from-indigo-50 dark:from-indigo-950/70 to-purple-50 dark:to-purple-950/70 backdrop-blur-xl",
-        "gradient-pink":
-          "border border-pink-800 dark:border-pink-600 bg-linear-to-r from-pink-50 dark:from-pink-950/70 to-rose-50 dark:to-rose-950/70 backdrop-blur-xl",
-        "gradient-orange":
-          "border border-orange-800 dark:border-orange-600 bg-linear-to-r from-orange-50 dark:from-orange-950/70 to-red-50 dark:to-red-950/70 backdrop-blur-xl",
-      },
-      size: {
-        sm: "gap-2 p-3 text-sm",
-        md: "gap-3 p-4 text-sm",
-        lg: "gap-4 p-6 text-base",
-      },
-      rounded: {
-        sm: "rounded-lg",
-        md: "rounded-xl",
-        lg: "rounded-2xl",
-        full: "rounded-3xl",
-      },
-    },
-    defaultVariants: {
-      appearance: "default",
-      size: "md",
-      rounded: "md",
-    },
+import {
+  zuiCardAppearances,
+  zuiCardBase,
+  zuiCardDescriptionBase,
+  zuiCardDescriptionSizes,
+  zuiCardFooterBase,
+  zuiCardFooterSizes,
+  zuiCardHeaderBase,
+  zuiCardHeaderSizes,
+  zuiCardRounded,
+  zuiCardSizes,
+  zuiCardTitleBase,
+  zuiCardTitleSizes,
+} from "../../design-system/card";
+
+export const cardVariants = cva(zuiCardBase, {
+  variants: {
+    appearance: zuiCardAppearances,
+    size: zuiCardSizes,
+    rounded: zuiCardRounded,
+  },
+  defaultVariants: {
+    appearance: "default",
+    size: "md",
+    rounded: "md",
   },
-);
+});
 
-export const cardHeaderVariants = cva(
-  "flex flex-col gap-1 border-b border-black/10 dark:border-white/10 pb-3",
-  {
-    variants: {
-      size: {
-        sm: "pb-2",
-        md: "pb-3",
-        lg: "pb-4",
-      },
-    },
-    defaultVariants: { size: "md" },
+export const cardHeaderVariants = cva(zuiCardHeaderBase, {
+  variants: {
+    size: zuiCardHeaderSizes,
   },
-);
+  defaultVariants: { size: "md" },
+});
 
-export const cardFooterVariants = cva(
-  "flex flex-col gap-2 border-t border-black/10 dark:border-white/10 pt-3",
-  {
-    variants: {
-      size: {
-        sm: "pt-2",
-        md: "pt-3",
-        lg: "pt-4",
-      },
-    },
-    defaultVariants: { size: "md" },
+export const cardFooterVariants = cva(zuiCardFooterBase, {
+  variants: {
+    size: zuiCardFooterSizes,
   },
-);
+  defaultVariants: { size: "md" },
+});
 
-export const cardTitleVariants = cva(
-  "font-semibold tracking-tight text-slate-950 dark:text-white",
-  {
-    variants: {
-      size: {
-        sm: "text-sm",
-        md: "text-base",
-        lg: "text-lg",
-      },
-    },
-    defaultVariants: { size: "md" },
+export const cardTitleVariants = cva(zuiCardTitleBase, {
+  variants: {
+    size: zuiCardTitleSizes,
   },
-);
+  defaultVariants: { size: "md" },
+});
 
-export const cardDescriptionVariants = cva(
-  "text-slate-500 dark:text-slate-50",
-  {
-    variants: {
-      size: {
-        sm: "text-xs",
-        md: "text-sm",
-        lg: "text-base",
-      },
-    },
-    defaultVariants: { size: "md" },
+export const cardDescriptionVariants = cva(zuiCardDescriptionBase, {
+  variants: {
+    size: zuiCardDescriptionSizes,
   },
-);
+  defaultVariants: { size: "md" },
+});

package/src/ui/divider/variants.ts

@@ -1,53 +1,27 @@
 import { cva } from "class-variance-authority";
 
-const APPEARANCES = {
-  default: "text-slate-700 dark:text-slate-200",
-  muted: "text-slate-500 dark:text-slate-500",
-  primary: "text-cyan-700 dark:text-cyan-300",
-  destructive: "text-rose-600 dark:text-rose-400",
-  ghost: "text-slate-400 dark:text-slate-600",
-  sky: "text-sky-600 dark:text-sky-400",
-  rose: "text-rose-600 dark:text-rose-400",
-  purple: "text-purple-600 dark:text-purple-400",
-  pink: "text-pink-600 dark:text-pink-400",
-  orange: "text-orange-600 dark:text-orange-400",
-  yellow: "text-yellow-600 dark:text-yellow-400",
-  teal: "text-teal-600 dark:text-teal-400",
-  indigo: "text-indigo-600 dark:text-indigo-400",
-  emerald: "text-emerald-600 dark:text-emerald-400",
-  gray: "text-gray-600 dark:text-gray-400",
-  amber: "text-amber-600 dark:text-amber-400",
-  violet: "text-violet-600 dark:text-violet-400",
-  "gradient-blue": "text-blue-600 dark:text-blue-400",
-  "gradient-green": "text-green-600 dark:text-green-400",
-  "gradient-red": "text-red-600 dark:text-red-400",
-  "gradient-yellow": "text-yellow-600 dark:text-yellow-400",
-  "gradient-purple": "text-purple-600 dark:text-purple-400",
-  "gradient-teal": "text-teal-600 dark:text-teal-400",
-  "gradient-indigo": "text-indigo-600 dark:text-indigo-400",
-  "gradient-pink": "text-pink-600 dark:text-pink-400",
-  "gradient-orange": "text-orange-600 dark:text-orange-400",
-};
+import {
+  zuiDividerAppearances,
+  zuiDividerBase,
+  zuiDividerLabelBase,
+  zuiDividerLineBase,
+  zuiDividerLineOrientations,
+  zuiDividerOrientations,
+  zuiDividerSizes,
+} from "../../design-system/divider";
 
 export const dividerToneVariants = cva("", {
   variants: {
-    appearance: APPEARANCES,
+    appearance: zuiDividerAppearances,
   },
   defaultVariants: { appearance: "default" },
 });
 
-export const dividerVariants = cva("flex w-full items-center gap-3", {
+export const dividerVariants = cva(zuiDividerBase, {
   variants: {
-    appearance: APPEARANCES,
-    orientation: {
-      horizontal: "w-full flex-row",
-      vertical: "h-full min-h-[2rem] w-auto flex-col self-stretch",
-    },
-    size: {
-      sm: "",
-      md: "",
-      lg: "",
-    },
+    appearance: zuiDividerAppearances,
+    orientation: zuiDividerOrientations,
+    size: zuiDividerSizes,
   },
   compoundVariants: [
     { orientation: "horizontal", size: "sm", class: "min-h-px" },
@@ -64,35 +38,23 @@ export const dividerVariants = cva("flex w-full items-center gap-3", {
   },
 });
 
-export const dividerLineVariants = cva(
-  "shrink grow rounded-full bg-current opacity-80",
-  {
-    variants: {
-      orientation: {
-        horizontal: "h-px",
-        vertical: "w-px flex-1",
-      },
-      size: {
-        sm: "",
-        md: "",
-        lg: "",
-      },
-    },
-    compoundVariants: [
-      { orientation: "horizontal", size: "sm", class: "h-px" },
-      { orientation: "horizontal", size: "md", class: "h-0.5" },
-      { orientation: "horizontal", size: "lg", class: "h-1" },
-      { orientation: "vertical", size: "sm", class: "w-px" },
-      { orientation: "vertical", size: "md", class: "w-0.5" },
-      { orientation: "vertical", size: "lg", class: "w-1" },
-    ],
-    defaultVariants: {
-      orientation: "horizontal",
-      size: "md",
-    },
+export const dividerLineVariants = cva(zuiDividerLineBase, {
+  variants: {
+    orientation: zuiDividerLineOrientations,
+    size: zuiDividerSizes,
+  },
+  compoundVariants: [
+    { orientation: "horizontal", size: "sm", class: "h-px" },
+    { orientation: "horizontal", size: "md", class: "h-0.5" },
+    { orientation: "horizontal", size: "lg", class: "h-1" },
+    { orientation: "vertical", size: "sm", class: "w-px" },
+    { orientation: "vertical", size: "md", class: "w-0.5" },
+    { orientation: "vertical", size: "lg", class: "w-1" },
+  ],
+  defaultVariants: {
+    orientation: "horizontal",
+    size: "md",
   },
-);
+});
 
-export const dividerLabelVariants = cva(
-  "shrink-0 text-xs font-medium uppercase tracking-wide text-current",
-);
+export const dividerLabelVariants = cva(zuiDividerLabelBase);

package/src/ui/drawer/drawer-base.tsx

@@ -148,7 +148,7 @@ export function DrawerContent({
 
   return createPortal(
     open ? (
-      <div className="fixed inset-0 z-50" data-slot="drawer-portal">
+      <div className="fixed inset-0 z-101" data-slot="drawer-portal">
         <div
           role="presentation"
           data-slot="drawer-overlay"

package/src/ui/drawer/variants.ts

@@ -1,138 +1,47 @@
 import { cva } from "class-variance-authority";
 
-export const drawerOverlayVariants = cva(
-  "fixed inset-0 z-50 bg-slate-50/70 dark:bg-slate-950/70 backdrop-blur-sm",
-);
+import {
+  zuiDrawerContentAppearances,
+  zuiDrawerContentBase,
+  zuiDrawerContentSides,
+  zuiDrawerContentSizes,
+  zuiDrawerOverlayBase,
+  zuiDrawerTriggerAppearances,
+  zuiDrawerTriggerBase,
+} from "../../design-system/drawer";
 
-export const drawerTriggerVariants = cva(
-  "relative inline-flex shrink-0 cursor-pointer border rounded px-3 py-1.5",
-  {
-    variants: {
-      appearance: {
-        default: "bg-slate-950",
-        glass:
-          "border-black/15 dark:border-white/15 bg-slate-50/70 dark:bg-slate-950/70 backdrop-blur-xl text-slate-900 dark:text-white",
-        sky: "border-sky-800 dark:border-sky-600 bg-sky-50 dark:bg-sky-950/70 backdrop-blur-xl text-sky-800 dark:text-white",
-        rose: "border-rose-800 dark:border-rose-600 bg-rose-50 dark:bg-rose-950/70 backdrop-blur-xl text-rose-800 dark:text-white",
-        purple:
-          "border-purple-800 dark:border-purple-600 bg-purple-50 dark:bg-purple-950/70 backdrop-blur-xl text-purple-800 dark:text-white",
-        pink: "border-pink-800 dark:border-pink-600 bg-pink-50 dark:bg-pink-950/70 backdrop-blur-xl text-pink-800 dark:text-white",
-        orange:
-          "border-orange-800 dark:border-orange-600 bg-orange-50 dark:bg-orange-950/70 backdrop-blur-xl text-orange-800 dark:text-white",
-        yellow:
-          "border-yellow-800 dark:border-yellow-600 bg-yellow-50 dark:bg-yellow-950/70 backdrop-blur-xl text-yellow-800 dark:text-white",
-        teal: "border-teal-800 dark:border-teal-600 bg-teal-50 dark:bg-teal-950/70 backdrop-blur-xl text-teal-800 dark:text-white",
-        indigo:
-          "border-indigo-800 dark:border-indigo-600 bg-indigo-50 dark:bg-indigo-950/70 backdrop-blur-xl text-indigo-800 dark:text-white",
-        emerald:
-          "border-emerald-800 dark:border-emerald-600 bg-emerald-50 dark:bg-emerald-950/70 backdrop-blur-xl text-emerald-800 dark:text-white",
-        gray: "border-gray-800 dark:border-gray-600 bg-gray-50 dark:bg-gray-950/70 backdrop-blur-xl text-gray-800 dark:text-white",
-        amber:
-          "border-amber-800 dark:border-amber-600 bg-amber-50 dark:bg-amber-950/70 backdrop-blur-xl text-amber-800 dark:text-white",
-        violet:
-          "border-violet-800 dark:border-violet-600 bg-violet-50 dark:bg-violet-950/70 backdrop-blur-xl text-violet-800 dark:text-white",
-        "gradient-blue":
-          "border-blue-800 dark:border-blue-600 bg-linear-to-r from-blue-50 dark:from-blue-950/70 to-purple-50 dark:to-purple-950/70 backdrop-blur-xl text-blue-800 dark:text-white",
-        "gradient-green":
-          "border-green-800 dark:border-green-600 bg-linear-to-r from-green-50 dark:from-green-950/70 to-lime-50 dark:to-lime-950/70 backdrop-blur-xl text-green-800 dark:text-white",
-        "gradient-red":
-          "border-red-800 dark:border-red-600 bg-linear-to-r from-red-50 dark:from-red-950/70 to-pink-50 dark:to-pink-950/70 backdrop-blur-xl text-red-800 dark:text-white",
-        "gradient-yellow":
-          "border-yellow-800 dark:border-yellow-600 bg-linear-to-r from-yellow-50 dark:from-yellow-950/70 to-orange-50 dark:to-orange-950/70 backdrop-blur-xl text-yellow-800 dark:text-white",
-        "gradient-purple":
-          "border-purple-800 dark:border-purple-600 bg-linear-to-r from-purple-50 dark:from-purple-950/70 to-pink-50 dark:to-pink-950/70 backdrop-blur-xl text-purple-800 dark:text-white",
-        "gradient-teal":
-          "border-teal-800 dark:border-teal-600 bg-linear-to-r from-teal-50 dark:from-teal-950/70 to-cyan-50 dark:to-cyan-950/70 backdrop-blur-xl text-teal-800 dark:text-white",
-        "gradient-indigo":
-          "border-indigo-800 dark:border-indigo-600 bg-linear-to-r from-indigo-50 dark:from-indigo-950/70 to-purple-50 dark:to-purple-950/70 backdrop-blur-xl text-indigo-800 dark:text-white",
-        "gradient-pink":
-          "border-pink-800 dark:border-pink-600 bg-linear-to-r from-pink-50 dark:from-pink-950/70 to-rose-50 dark:to-rose-950/70 backdrop-blur-xl text-pink-800 dark:text-white",
-        "gradient-orange":
-          "border-orange-800 dark:border-orange-600 bg-linear-to-r from-orange-50 dark:from-orange-950/70 to-red-50 dark:to-red-950/70 backdrop-blur-xl text-orange-800 dark:text-white",
-      },
-    },
-    defaultVariants: {
-      appearance: "default",
-    },
+export const drawerOverlayVariants = cva(zuiDrawerOverlayBase);
+
+export const drawerTriggerVariants = cva(zuiDrawerTriggerBase, {
+  variants: {
+    appearance: zuiDrawerTriggerAppearances,
+  },
+  defaultVariants: {
+    appearance: "default",
   },
-);
+});
 
-export const drawerContentVariants = cva(
-  "fixed z-50 flex max-h-[min(92vh,900px)] flex-col border border-black/10 dark:border-white/10 bg-slate-50 dark:bg-slate-950 p-6 text-slate-900 dark:text-slate-50 shadow-[0_12px_40px_rgba(15,23,42,0.14)] dark:shadow-[0_24px_80px_rgba(15,23,42,0.55)] focus:outline-none",
-  {
-    variants: {
-      side: {
-        left: "left-0 top-0 h-full w-[min(100%,420px)]",
-        right: "right-0 top-0 h-full w-[min(100%,420px)]",
-        top: "left-0 top-0 w-full max-h-[min(92vh,520px)]",
-        bottom: "bottom-0 left-0 w-full max-h-[min(92vh,520px)]",
-      },
-      size: {
-        sm: "",
-        md: "",
-        lg: "",
-        xl: "",
-        full: "",
-      },
-      appearance: {
-        default: "bg-slate-50 dark:bg-slate-950 text-slate-900 dark:text-white",
-        glass:
-          "border-black/15 dark:border-white/15 bg-slate-50/70 dark:bg-slate-950/70 backdrop-blur-xl",
-        sky: "border-sky-800 dark:border-sky-600 bg-sky-50 dark:bg-sky-950/70 backdrop-blur-xl",
-        rose: "border-rose-800 dark:border-rose-600 bg-rose-50 dark:bg-rose-950/70 backdrop-blur-xl",
-        purple:
-          "border-purple-800 dark:border-purple-600 bg-purple-50 dark:bg-purple-950/70 backdrop-blur-xl",
-        pink: "border-pink-800 dark:border-pink-600 bg-pink-50 dark:bg-pink-950/70 backdrop-blur-xl",
-        orange:
-          "border-orange-800 dark:border-orange-600 bg-orange-50 dark:bg-orange-950/70 backdrop-blur-xl",
-        yellow:
-          "border-yellow-800 dark:border-yellow-600 bg-yellow-50 dark:bg-yellow-950/70 backdrop-blur-xl",
-        teal: "border-teal-800 dark:border-teal-600 bg-teal-50 dark:bg-teal-950/70 backdrop-blur-xl",
-        indigo:
-          "border-indigo-800 dark:border-indigo-600 bg-indigo-50 dark:bg-indigo-950/70 backdrop-blur-xl",
-        emerald:
-          "border-emerald-800 dark:border-emerald-600 bg-emerald-50 dark:bg-emerald-950/70 backdrop-blur-xl",
-        gray: "border-gray-800 dark:border-gray-600 bg-gray-50 dark:bg-gray-950/70 backdrop-blur-xl",
-        amber:
-          "border-amber-800 dark:border-amber-600 bg-amber-50 dark:bg-amber-950/70 backdrop-blur-xl",
-        violet:
-          "border-violet-800 dark:border-violet-600 bg-violet-50 dark:bg-violet-950/70 backdrop-blur-xl",
-        "gradient-blue":
-          "border-blue-800 dark:border-blue-600 bg-linear-to-r from-blue-50 dark:from-blue-950/70 to-purple-50 dark:to-purple-950/70 backdrop-blur-xl",
-        "gradient-green":
-          "border-green-800 dark:border-green-600 bg-linear-to-r from-green-50 dark:from-green-950/70 to-lime-50 dark:to-lime-950/70 backdrop-blur-xl",
-        "gradient-red":
-          "border-red-800 dark:border-red-600 bg-linear-to-r from-red-50 dark:from-red-950/70 to-pink-50 dark:to-pink-950/70 backdrop-blur-xl",
-        "gradient-yellow":
-          "border-yellow-800 dark:border-yellow-600 bg-linear-to-r from-yellow-50 dark:from-yellow-950/70 to-orange-50 dark:to-orange-950/70 backdrop-blur-xl",
-        "gradient-purple":
-          "border-purple-800 dark:border-purple-600 bg-linear-to-r from-purple-50 dark:from-purple-950/70 to-pink-50 dark:to-pink-950/70 backdrop-blur-xl",
-        "gradient-teal":
-          "border-teal-800 dark:border-teal-600 bg-linear-to-r from-teal-50 dark:from-teal-950/70 to-cyan-50 dark:to-cyan-950/70 backdrop-blur-xl",
-        "gradient-indigo":
-          "border-indigo-800 dark:border-indigo-600 bg-linear-to-r from-indigo-50 dark:from-indigo-950/70 to-purple-50 dark:to-purple-950/70 backdrop-blur-xl",
-        "gradient-pink":
-          "border-pink-800 dark:border-pink-600 bg-linear-to-r from-pink-50 dark:from-pink-950/70 to-rose-50 dark:to-rose-950/70 backdrop-blur-xl",
-        "gradient-orange":
-          "border-orange-800 dark:border-orange-600 bg-linear-to-r from-orange-50 dark:from-orange-950/70 to-red-50 dark:to-red-950/70 backdrop-blur-xl",
-      },
-    },
-    compoundVariants: [
-      { side: "left", size: "sm", class: "w-[min(100%,320px)]" },
-      { side: "left", size: "md", class: "w-[min(100%,420px)]" },
-      { side: "left", size: "lg", class: "w-[min(100%,520px)]" },
-      { side: "left", size: "xl", class: "w-[min(100%,640px)]" },
-      { side: "left", size: "full", class: "w-full max-w-none" },
-      { side: "right", size: "sm", class: "w-[min(100%,320px)]" },
-      { side: "right", size: "md", class: "w-[min(100%,420px)]" },
-      { side: "right", size: "lg", class: "w-[min(100%,520px)]" },
-      { side: "right", size: "xl", class: "w-[min(100%,640px)]" },
-      { side: "right", size: "full", class: "w-full max-w-none" },
-    ],
-    defaultVariants: {
-      side: "right",
-      size: "md",
-      appearance: "default",
-    },
+export const drawerContentVariants = cva(zuiDrawerContentBase, {
+  variants: {
+    side: zuiDrawerContentSides,
+    size: zuiDrawerContentSizes,
+    appearance: zuiDrawerContentAppearances,
+  },
+  compoundVariants: [
+    { side: "left", size: "sm", class: "w-[min(100%,320px)]" },
+    { side: "left", size: "md", class: "w-[min(100%,420px)]" },
+    { side: "left", size: "lg", class: "w-[min(100%,520px)]" },
+    { side: "left", size: "xl", class: "w-[min(100%,640px)]" },
+    { side: "left", size: "full", class: "w-full max-w-none" },
+    { side: "right", size: "sm", class: "w-[min(100%,320px)]" },
+    { side: "right", size: "md", class: "w-[min(100%,420px)]" },
+    { side: "right", size: "lg", class: "w-[min(100%,520px)]" },
+    { side: "right", size: "xl", class: "w-[min(100%,640px)]" },
+    { side: "right", size: "full", class: "w-full max-w-none" },
+  ],
+  defaultVariants: {
+    side: "right",
+    size: "md",
+    appearance: "default",
   },
-);
+});