@zentauri-ui/zentauri-components 1.6.2 → 1.7.0

package/src/ui/select/variants.ts

@@ -1,172 +1,47 @@
 import { cva } from "class-variance-authority";
 
-export const selectTriggerVariants = cva(
-  "flex items-center cursor-pointer justify-between rounded-md border transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-600 dark:focus-visible:ring-gray-400 focus-visible:ring-offset-2",
-  {
-    variants: {
-      variant: {
-        default:
-          "border-gray-300 dark:border-gray-300 bg-white dark:bg-black text-gray-950 dark:text-white",
-        outline: "border-2 border-gray-500 text-gray-950 dark:text-gray-100",
-        ghost: "border-transparent text-gray-950 dark:text-gray-100",
-        sky: "border-sky-800 dark:border-sky-600 text-sky-950 dark:text-sky-600",
-        rose: "border-rose-800 dark:border-rose-600 text-rose-950 dark:text-rose-600",
-        purple:
-          "border-purple-800 dark:border-purple-600 text-purple-950 dark:text-purple-600",
-        pink: "border-pink-800 dark:border-pink-600 text-pink-950 dark:text-pink-600",
-        orange:
-          "border-orange-800 dark:border-orange-600 text-orange-950 dark:text-orange-600",
-        yellow:
-          "border-yellow-800 dark:border-yellow-600 text-yellow-950 dark:text-yellow-600",
-        teal: "border-teal-800 dark:border-teal-600 text-teal-950 dark:text-teal-600",
-        indigo: "border-indigo-500 text-indigo-950",
-        emerald:
-          "border-emerald-800 dark:border-emerald-600 text-emerald-950 dark:text-emerald-600",
-        glass:
-          "border-black/15 dark:border-white/15 bg-black/10 dark:bg-white/10 text-gray-950 dark:text-white backdrop-blur-md",
-        "gradient-blue":
-          "bg-linear-to-r from-blue-900 dark:from-blue-600 to-purple-900 dark:to-purple-600 backdrop-blur-xl text-white",
-        "gradient-green":
-          "bg-linear-to-r from-green-900 dark:from-green-600 to-lime-900 dark:to-lime-600 backdrop-blur-xl text-white",
-        "gradient-red":
-          "bg-linear-to-r from-red-900 dark:from-red-600 to-pink-900 dark:to-pink-600 backdrop-blur-xl text-white",
-        "gradient-yellow":
-          "bg-linear-to-r from-yellow-900 dark:from-yellow-600 to-orange-900 dark:to-orange-600 backdrop-blur-xl text-white",
-        "gradient-purple":
-          "bg-linear-to-r from-purple-900 dark:from-purple-600 to-pink-900 dark:to-pink-600 backdrop-blur-xl text-white",
-        "gradient-teal":
-          "bg-linear-to-r from-teal-900 dark:from-teal-600 to-cyan-900 dark:to-cyan-600 backdrop-blur-xl text-white",
-        "gradient-indigo":
-          "bg-linear-to-r from-indigo-900 dark:from-indigo-600 to-purple-900 dark:to-purple-600 backdrop-blur-xl text-white",
-        "gradient-pink":
-          "bg-linear-to-r from-pink-900 dark:from-pink-600 to-rose-900 dark:to-rose-600 backdrop-blur-xl text-white",
-        "gradient-orange":
-          "bg-linear-to-r from-orange-900 dark:from-orange-600 to-red-900 dark:to-red-600 backdrop-blur-xl text-white",
-      },
-      size: {
-        sm: "px-2 py-1 text-sm",
-        md: "px-3 py-2",
-        lg: "px-4 py-3 text-lg",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "md",
-    },
+import {
+  zuiSelectContentAppearances,
+  zuiSelectContentBase,
+  zuiSelectDisabled,
+  zuiSelectItemAppearances,
+  zuiSelectItemBase,
+  zuiSelectSizes,
+  zuiSelectSpacing,
+  zuiSelectTriggerBase,
+  zuiSelectTriggerVariants,
+} from "../../design-system/select";
+
+export const selectTriggerVariants = cva(zuiSelectTriggerBase, {
+  variants: {
+    variant: zuiSelectTriggerVariants,
+    size: zuiSelectSizes,
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "md",
   },
-);
+});
 
-export const selectItemVariants = cva(
-  "cursor-pointer px-3 py-2 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-600 dark:focus-visible:ring-gray-400 focus-visible:ring-inset",
-  {
-    variants: {
-      appearance: {
-        default:
-          "bg-white dark:bg-black text-gray-900 dark:text-gray-200 data-[selected=true]:bg-gray-200 data-[selected=true]:text-gray-700 dark:data-[selected=true]:text-gray-900",
-        glass:
-          "bg-black/10 dark:bg-white/10 text-gray-700 dark:text-gray-900 data-[selected=true]:bg-black/10 dark:data-[selected=true]:bg-white/10 data-[selected=true]:text-gray-700 dark:data-[selected=true]:text-gray-900",
-        outline:
-          "border-2 border-gray-500 text-gray-900 dark:text-gray-100 data-[selected=true]:border-2 data-[selected=true]:border-gray-500 data-[selected=true]:bg-gray-200 data-[selected=true]:text-gray-900 dark:data-[selected=true]:text-gray-900",
-        ghost:
-          "border-transparent text-gray-900 dark:text-gray-100 data-[selected=true]:border-transparent data-[selected=true]:bg-transparent data-[selected=true]:text-gray-900 dark:data-[selected=true]:text-gray-100",
-        sky: "border-sky-900 dark:border-sky-600 text-sky-900 dark:text-sky-200 data-[selected=true]:border-sky-900 dark:data-[selected=true]:border-sky-600 data-[selected=true]:bg-sky-200 data-[selected=true]:text-sky-900 dark:data-[selected=true]:text-sky-900",
-        rose: "border-rose-900 dark:border-rose-600 text-rose-900 dark:text-rose-200 data-[selected=true]:border-rose-900 dark:data-[selected=true]:border-rose-600 data-[selected=true]:bg-rose-200 data-[selected=true]:text-rose-900 dark:data-[selected=true]:text-rose-900",
-        purple:
-          "border-purple-900 dark:border-purple-600 text-purple-900 dark:text-purple-200 data-[selected=true]:border-purple-900 dark:data-[selected=true]:border-purple-600 data-[selected=true]:bg-purple-200 data-[selected=true]:text-purple-900 dark:data-[selected=true]:text-purple-900",
-        pink: "border-pink-900 dark:border-pink-600 text-pink-900 dark:text-pink-200 data-[selected=true]:border-pink-900 dark:data-[selected=true]:border-pink-600 data-[selected=true]:bg-pink-200 data-[selected=true]:text-pink-900 dark:data-[selected=true]:text-pink-900",
-        orange:
-          "border-orange-900 dark:border-orange-600 text-orange-900 dark:text-orange-200 data-[selected=true]:border-orange-900 dark:data-[selected=true]:border-orange-600 data-[selected=true]:bg-orange-200 data-[selected=true]:text-orange-900 dark:data-[selected=true]:text-orange-900",
-        yellow:
-          "border-yellow-900 dark:border-yellow-600 text-yellow-900 dark:text-yellow-200 data-[selected=true]:border-yellow-900 dark:data-[selected=true]:border-yellow-600 data-[selected=true]:bg-yellow-200 data-[selected=true]:text-yellow-900 dark:data-[selected=true]:text-yellow-900",
-        teal: "border-teal-900 dark:border-teal-600 text-teal-900 dark:text-teal-200 data-[selected=true]:border-teal-900 dark:data-[selected=true]:border-teal-600 data-[selected=true]:bg-teal-200 data-[selected=true]:text-teal-900 dark:data-[selected=true]:text-teal-900",
-        indigo:
-          "border-indigo-900 dark:border-indigo-600 text-indigo-900 dark:text-indigo-200 data-[selected=true]:border-indigo-900 dark:data-[selected=true]:border-indigo-600 data-[selected=true]:bg-indigo-200 data-[selected=true]:text-indigo-900 dark:data-[selected=true]:text-indigo-900",
-        emerald:
-          "border-emerald-900 dark:border-emerald-600 text-emerald-900 dark:text-emerald-200 data-[selected=true]:border-emerald-900 dark:data-[selected=true]:border-emerald-600 data-[selected=true]:bg-emerald-200 data-[selected=true]:text-emerald-900 dark:data-[selected=true]:text-emerald-900",
-        "gradient-blue":
-          "bg-transparent backdrop-blur-xl text-blue-50 dark:text-blue-50 data-[selected=true]:bg-linear-to-r data-[selected=true]:from-blue-50 dark:data-[selected=true]:from-blue-50 data-[selected=true]:to-purple-50 dark:data-[selected=true]:to-purple-50 data-[selected=true]:text-blue-900",
-        "gradient-green":
-          "bg-transparent backdrop-blur-xl text-green-50 dark:text-green-50 data-[selected=true]:bg-linear-to-r data-[selected=true]:from-green-50 dark:data-[selected=true]:from-green-50 data-[selected=true]:to-lime-50 dark:data-[selected=true]:to-lime-50 data-[selected=true]:text-green-900",
-        "gradient-red":
-          "bg-transparent backdrop-blur-xl text-red-50 dark:text-red-50 data-[selected=true]:bg-linear-to-r data-[selected=true]:from-red-50 dark:data-[selected=true]:from-red-50 data-[selected=true]:to-pink-50 dark:data-[selected=true]:to-pink-50 data-[selected=true]:text-red-900",
-        "gradient-yellow":
-          "bg-transparent backdrop-blur-xl text-yellow-50 dark:text-yellow-50 data-[selected=true]:bg-linear-to-r data-[selected=true]:from-yellow-50 dark:data-[selected=true]:from-yellow-50 data-[selected=true]:to-orange-50 dark:data-[selected=true]:to-orange-50 data-[selected=true]:text-yellow-900",
-        "gradient-purple":
-          "bg-transparent backdrop-blur-xl text-purple-50 dark:text-purple-50 data-[selected=true]:bg-linear-to-r data-[selected=true]:from-purple-50 dark:data-[selected=true]:from-purple-50 data-[selected=true]:to-pink-50 dark:data-[selected=true]:to-pink-50 data-[selected=true]:text-purple-900",
-        "gradient-teal":
-          "bg-transparent backdrop-blur-xl text-teal-50 dark:text-teal-50 data-[selected=true]:bg-linear-to-r data-[selected=true]:from-teal-50 dark:data-[selected=true]:from-teal-50 data-[selected=true]:to-cyan-50 dark:data-[selected=true]:to-cyan-50 data-[selected=true]:text-teal-900",
-        "gradient-indigo":
-          "bg-transparent backdrop-blur-xl text-indigo-50 dark:text-indigo-50 data-[selected=true]:bg-linear-to-r data-[selected=true]:from-indigo-50 dark:data-[selected=true]:from-indigo-50 data-[selected=true]:to-purple-50 dark:data-[selected=true]:to-purple-50 data-[selected=true]:text-indigo-900",
-        "gradient-pink":
-          "bg-transparent backdrop-blur-xl text-pink-50 dark:text-pink-50 data-[selected=true]:bg-linear-to-r data-[selected=true]:from-pink-50 dark:data-[selected=true]:from-pink-50 data-[selected=true]:to-rose-50 dark:data-[selected=true]:to-rose-50 data-[selected=true]:text-pink-900",
-        "gradient-orange":
-          "bg-transparent backdrop-blur-xl text-orange-50 dark:text-orange-50 data-[selected=true]:bg-linear-to-r data-[selected=true]:from-orange-50 dark:data-[selected=true]:from-orange-50 data-[selected=true]:to-red-50 dark:data-[selected=true]:to-red-50 data-[selected=true]:text-orange-900",
-      },
-      disabled: {
-        true: "opacity-50 cursor-not-allowed",
-      },
-    },
-    defaultVariants: {
-      appearance: "default",
-    },
+export const selectItemVariants = cva(zuiSelectItemBase, {
+  variants: {
+    appearance: zuiSelectItemAppearances,
+    disabled: zuiSelectDisabled,
   },
-);
+  defaultVariants: {
+    appearance: "default",
+  },
+});
 
-export const selectContentVariants = cva(
-  "absolute z-10 mt-2 w-full rounded-md border bg-white dark:bg-black shadow-md",
-  {
-    variants: {
-      appearance: {
-        default: "bg-white dark:bg-black shadow-md",
-        glass: "bg-black/10 dark:bg-white/10 backdrop-blur-md",
-        outline: "border-2 border-gray-500",
-        ghost: "border-transparent",
-        sky: "border-sky-900 dark:border-sky-600",
-        rose: "border-rose-900 dark:border-rose-600",
-        purple: "border-purple-900 dark:border-purple-600",
-        pink: "border-pink-900 dark:border-pink-600",
-        orange: "border-orange-900 dark:border-orange-600",
-        yellow: "border-yellow-900 dark:border-yellow-600",
-        teal: "border-teal-900 dark:border-teal-600",
-        indigo: "border-indigo-900 dark:border-indigo-600",
-        emerald: "border-emerald-900 dark:border-emerald-600",
-        "gradient-blue":
-          "bg-linear-to-r from-blue-900 dark:from-blue-600 to-purple-900 dark:to-purple-600 backdrop-blur-xl",
-        "gradient-green":
-          "bg-linear-to-r from-green-900 dark:from-green-600 to-lime-900 dark:to-lime-600 backdrop-blur-xl",
-        "gradient-red":
-          "bg-linear-to-r from-red-900 dark:from-red-600 to-pink-900 dark:to-pink-600 backdrop-blur-xl",
-        "gradient-yellow":
-          "bg-linear-to-r from-yellow-900 dark:from-yellow-600 to-orange-900 dark:to-orange-600 backdrop-blur-xl",
-        "gradient-purple":
-          "bg-linear-to-r from-purple-900 dark:from-purple-600 to-pink-900 dark:to-pink-600 backdrop-blur-xl",
-        "gradient-teal":
-          "bg-linear-to-r from-teal-900 dark:from-teal-600 to-cyan-900 dark:to-cyan-600 backdrop-blur-xl",
-        "gradient-indigo":
-          "bg-linear-to-r from-indigo-900 dark:from-indigo-600 to-purple-900 dark:to-purple-600 backdrop-blur-xl",
-        "gradient-pink":
-          "bg-linear-to-r from-pink-900 dark:from-pink-600 to-rose-900 dark:to-rose-600 backdrop-blur-xl",
-        "gradient-orange":
-          "bg-linear-to-r from-orange-900 dark:from-orange-600 to-red-900 dark:to-red-600 backdrop-blur-xl",
-      },
-      size: {
-        sm: "px-2 py-1 text-sm",
-        md: "px-3 py-2",
-        lg: "px-4 py-3 text-lg",
-      },
-      spacing: {
-        none: "space-y-0",
-        default: "space-y-1",
-        sm: "space-y-2",
-        md: "space-y-3",
-        lg: "space-y-4",
-        xl: "space-y-5",
-      },
-    },
-    defaultVariants: {
-      appearance: "default",
-      size: "md",
-      spacing: "default",
-    },
+export const selectContentVariants = cva(zuiSelectContentBase, {
+  variants: {
+    appearance: zuiSelectContentAppearances,
+    size: zuiSelectSizes,
+    spacing: zuiSelectSpacing,
+  },
+  defaultVariants: {
+    appearance: "default",
+    size: "md",
+    spacing: "default",
   },
-);
+});

package/src/ui/skeleton/variants.ts

@@ -1,263 +1,167 @@
 import { cva } from "class-variance-authority";
 
-const shimmerLayer =
-  "[background-size:220%_100%] [background-repeat:no-repeat] [background-position:100%_0%]";
+import {
+  zuiSkeletonAnimations,
+  zuiSkeletonAppearances,
+  zuiSkeletonBase,
+  zuiSkeletonRounded,
+  zuiSkeletonShimmerGradientClasses,
+  zuiSkeletonShimmerTones,
+  zuiSkeletonSizes,
+  zuiSkeletonTextLineBase,
+  zuiSkeletonTextLineSizes,
+  type ZuiSkeletonShimmerTone,
+} from "../../design-system/skeleton";
 
-export const skeletonShimmerGradientClasses = {
-  default: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(255,255,255,0.04),rgba(255,255,255,0.22),rgba(255,255,255,0.04))]`,
-  subtle: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(255,255,255,0.03),rgba(255,255,255,0.14),rgba(255,255,255,0.03))]`,
-  muted: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(255,255,255,0.02),rgba(255,255,255,0.1),rgba(255,255,255,0.02))]`,
-  sky: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(56,189,248,0.1),rgba(56,189,248,0.42),rgba(56,189,248,0.1))]`,
-  rose: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(251,113,133,0.1),rgba(251,113,133,0.42),rgba(251,113,133,0.1))]`,
-  purple: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(192,132,252,0.1),rgba(192,132,252,0.42),rgba(192,132,252,0.1))]`,
-  pink: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(244,114,182,0.1),rgba(244,114,182,0.42),rgba(244,114,182,0.1))]`,
-  orange: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(251,146,60,0.1),rgba(251,146,60,0.42),rgba(251,146,60,0.1))]`,
-  yellow: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(250,204,21,0.12),rgba(250,204,21,0.4),rgba(250,204,21,0.12))]`,
-  teal: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(45,212,191,0.1),rgba(45,212,191,0.42),rgba(45,212,191,0.1))]`,
-  indigo: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(129,140,248,0.1),rgba(129,140,248,0.42),rgba(129,140,248,0.1))]`,
-  emerald: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(52,211,153,0.1),rgba(52,211,153,0.42),rgba(52,211,153,0.1))]`,
-  gray: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(161,161,170,0.1),rgba(161,161,170,0.38),rgba(161,161,170,0.1))]`,
-  amber: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(251,191,36,0.12),rgba(251,191,36,0.42),rgba(251,191,36,0.12))]`,
-  violet: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(167,139,250,0.1),rgba(167,139,250,0.42),rgba(167,139,250,0.1))]`,
-  "gradient-blue": `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(100,149,237,0.1),rgba(100,149,237,0.42),rgba(100,149,237,0.1))]`,
-  "gradient-green": `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(52,211,153,0.1),rgba(52,211,153,0.42),rgba(52,211,153,0.1))]`,
-  "gradient-red": `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(239,68,68,0.1),rgba(239,68,68,0.42),rgba(239,68,68,0.1))]`,
-  "gradient-yellow": `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(250,204,21,0.12),rgba(250,204,21,0.42),rgba(250,204,21,0.12))]`,
-  "gradient-purple": `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(167,139,250,0.1),rgba(167,139,250,0.42),rgba(167,139,250,0.1))]`,
-  "gradient-teal": `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(45,212,191,0.1),rgba(45,212,191,0.42),rgba(45,212,191,0.1))]`,
-  "gradient-indigo": `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(129,140,248,0.1),rgba(129,140,248,0.42),rgba(129,140,248,0.1))]`,
-  "gradient-pink": `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(244,114,182,0.1),rgba(244,114,182,0.42),rgba(244,114,182,0.1))]`,
-  "gradient-orange": `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(251,146,60,0.1),rgba(251,146,60,0.42),rgba(251,146,60,0.1))]`,
-} as const;
+export const skeletonShimmerGradientClasses = zuiSkeletonShimmerGradientClasses;
+export type SkeletonShimmerTone = ZuiSkeletonShimmerTone;
 
-export type SkeletonShimmerTone = keyof typeof skeletonShimmerGradientClasses;
-
-export const skeletonVariants = cva(
-  "relative overflow-hidden bg-black/10 dark:bg-white/10 text-transparent",
-  {
-    variants: {
-      appearance: {
-        default: "bg-black/10 dark:bg-white/10",
-        subtle: "bg-black/[0.07] dark:bg-white/[0.07]",
-        muted: "bg-slate-200/80 dark:bg-slate-800/80",
-        sky: "bg-sky-500/10",
-        rose: "bg-rose-500/10",
-        purple: "bg-purple-500/10",
-        pink: "bg-pink-500/10",
-        orange: "bg-orange-500/10",
-        yellow: "bg-yellow-500/10",
-        teal: "bg-teal-500/10",
-        indigo: "bg-indigo-500/10",
-        emerald: "bg-emerald-500/10",
-        gray: "bg-gray-500/10",
-        amber: "bg-amber-500/10",
-        violet: "bg-violet-500/10",
-        "gradient-blue":
-          "bg-linear-to-r from-blue-800 dark:from-blue-600 to-purple-800 dark:to-purple-600",
-        "gradient-green":
-          "bg-linear-to-r from-green-800 dark:from-green-600 to-lime-800 dark:to-lime-600",
-        "gradient-red":
-          "bg-linear-to-r from-red-800 dark:from-red-600 to-pink-800 dark:to-pink-600",
-        "gradient-yellow":
-          "bg-linear-to-r from-yellow-800 dark:from-yellow-600 to-orange-800 dark:to-orange-600",
-        "gradient-purple":
-          "bg-linear-to-r from-purple-800 dark:from-purple-600 to-pink-800 dark:to-pink-600",
-        "gradient-teal":
-          "bg-linear-to-r from-teal-800 dark:from-teal-600 to-cyan-800 dark:to-cyan-600",
-        "gradient-indigo":
-          "bg-linear-to-r from-indigo-800 dark:from-indigo-600 to-purple-800 dark:to-purple-600",
-        "gradient-pink":
-          "bg-linear-to-r from-pink-800 dark:from-pink-600 to-rose-800 dark:to-rose-600",
-        "gradient-orange":
-          "bg-linear-to-r from-orange-800 dark:from-orange-600 to-red-800 dark:to-red-600",
-      },
-      size: {
-        sm: "min-h-3",
-        md: "min-h-4",
-        lg: "min-h-6",
-      },
-      rounded: {
-        none: "rounded-none",
-        sm: "rounded-md",
-        md: "rounded-lg",
-        lg: "rounded-xl",
-        full: "rounded-full",
-      },
-      animation: {
-        none: "",
-        shimmer: "",
-        pulse: "",
-      },
-      shimmerTone: {
-        default: "",
-        subtle: "",
-        muted: "",
-        sky: "",
-        rose: "",
-        purple: "",
-        pink: "",
-        orange: "",
-        yellow: "",
-        teal: "",
-        indigo: "",
-        emerald: "",
-        gray: "",
-        amber: "",
-        violet: "",
-        "gradient-blue": "",
-        "gradient-green": "",
-        "gradient-red": "",
-        "gradient-yellow": "",
-        "gradient-purple": "",
-        "gradient-teal": "",
-        "gradient-indigo": "",
-        "gradient-pink": "",
-        "gradient-orange": "",
-      },
-    },
-    compoundVariants: [
-      {
-        animation: "shimmer",
-        shimmerTone: "default",
-        class: skeletonShimmerGradientClasses.default,
-      },
-      {
-        animation: "shimmer",
-        shimmerTone: "muted",
-        class: skeletonShimmerGradientClasses.subtle,
-      },
-      {
-        animation: "shimmer",
-        shimmerTone: "subtle",
-        class: skeletonShimmerGradientClasses.subtle,
-      },
-      {
-        animation: "shimmer",
-        shimmerTone: "sky",
-        class: skeletonShimmerGradientClasses.sky,
-      },
-      {
-        animation: "shimmer",
-        shimmerTone: "rose",
-        class: skeletonShimmerGradientClasses.rose,
-      },
-      {
-        animation: "shimmer",
-        shimmerTone: "purple",
-        class: skeletonShimmerGradientClasses.purple,
-      },
-      {
-        animation: "shimmer",
-        shimmerTone: "pink",
-        class: skeletonShimmerGradientClasses.pink,
-      },
-      {
-        animation: "shimmer",
-        shimmerTone: "orange",
-        class: skeletonShimmerGradientClasses.orange,
-      },
-      {
-        animation: "shimmer",
-        shimmerTone: "yellow",
-        class: skeletonShimmerGradientClasses.yellow,
-      },
-      {
-        animation: "shimmer",
-        shimmerTone: "teal",
-        class: skeletonShimmerGradientClasses.teal,
-      },
-      {
-        animation: "shimmer",
-        shimmerTone: "indigo",
-        class: skeletonShimmerGradientClasses.indigo,
-      },
-      {
-        animation: "shimmer",
-        shimmerTone: "emerald",
-        class: skeletonShimmerGradientClasses.emerald,
-      },
-      {
-        animation: "shimmer",
-        shimmerTone: "gray",
-        class: skeletonShimmerGradientClasses.gray,
-      },
-      {
-        animation: "shimmer",
-        shimmerTone: "amber",
-        class: skeletonShimmerGradientClasses.amber,
-      },
-      {
-        animation: "shimmer",
-        shimmerTone: "violet",
-        class: skeletonShimmerGradientClasses.violet,
-      },
-      {
-        animation: "shimmer",
-        shimmerTone: "gradient-blue",
-        class: skeletonShimmerGradientClasses["gradient-blue"],
-      },
-      {
-        animation: "shimmer",
-        shimmerTone: "gradient-green",
-        class: skeletonShimmerGradientClasses["gradient-green"],
-      },
-      {
-        animation: "shimmer",
-        shimmerTone: "gradient-red",
-        class: skeletonShimmerGradientClasses["gradient-red"],
-      },
-      {
-        animation: "shimmer",
-        shimmerTone: "gradient-yellow",
-        class: skeletonShimmerGradientClasses["gradient-yellow"],
-      },
-      {
-        animation: "shimmer",
-        shimmerTone: "gradient-purple",
-        class: skeletonShimmerGradientClasses["gradient-purple"],
-      },
-      {
-        animation: "shimmer",
-        shimmerTone: "gradient-teal",
-        class: skeletonShimmerGradientClasses["gradient-teal"],
-      },
-      {
-        animation: "shimmer",
-        shimmerTone: "gradient-indigo",
-        class: skeletonShimmerGradientClasses["gradient-indigo"],
-      },
-      {
-        animation: "shimmer",
-        shimmerTone: "gradient-pink",
-        class: skeletonShimmerGradientClasses["gradient-pink"],
-      },
-      {
-        animation: "shimmer",
-        shimmerTone: "gradient-orange",
-        class: skeletonShimmerGradientClasses["gradient-orange"],
-      },
-      {
-        animation: "pulse",
-        class: "",
-      },
-    ],
-    defaultVariants: {
-      appearance: "default",
-      size: "md",
-      rounded: "md",
+export const skeletonVariants = cva(zuiSkeletonBase, {
+  variants: {
+    appearance: zuiSkeletonAppearances,
+    size: zuiSkeletonSizes,
+    rounded: zuiSkeletonRounded,
+    animation: zuiSkeletonAnimations,
+    shimmerTone: zuiSkeletonShimmerTones,
+  },
+  compoundVariants: [
+    {
       animation: "shimmer",
       shimmerTone: "default",
+      class: skeletonShimmerGradientClasses.default,
+    },
+    {
+      animation: "shimmer",
+      shimmerTone: "muted",
+      class: skeletonShimmerGradientClasses.subtle,
+    },
+    {
+      animation: "shimmer",
+      shimmerTone: "subtle",
+      class: skeletonShimmerGradientClasses.subtle,
+    },
+    {
+      animation: "shimmer",
+      shimmerTone: "sky",
+      class: skeletonShimmerGradientClasses.sky,
+    },
+    {
+      animation: "shimmer",
+      shimmerTone: "rose",
+      class: skeletonShimmerGradientClasses.rose,
+    },
+    {
+      animation: "shimmer",
+      shimmerTone: "purple",
+      class: skeletonShimmerGradientClasses.purple,
     },
+    {
+      animation: "shimmer",
+      shimmerTone: "pink",
+      class: skeletonShimmerGradientClasses.pink,
+    },
+    {
+      animation: "shimmer",
+      shimmerTone: "orange",
+      class: skeletonShimmerGradientClasses.orange,
+    },
+    {
+      animation: "shimmer",
+      shimmerTone: "yellow",
+      class: skeletonShimmerGradientClasses.yellow,
+    },
+    {
+      animation: "shimmer",
+      shimmerTone: "teal",
+      class: skeletonShimmerGradientClasses.teal,
+    },
+    {
+      animation: "shimmer",
+      shimmerTone: "indigo",
+      class: skeletonShimmerGradientClasses.indigo,
+    },
+    {
+      animation: "shimmer",
+      shimmerTone: "emerald",
+      class: skeletonShimmerGradientClasses.emerald,
+    },
+    {
+      animation: "shimmer",
+      shimmerTone: "gray",
+      class: skeletonShimmerGradientClasses.gray,
+    },
+    {
+      animation: "shimmer",
+      shimmerTone: "amber",
+      class: skeletonShimmerGradientClasses.amber,
+    },
+    {
+      animation: "shimmer",
+      shimmerTone: "violet",
+      class: skeletonShimmerGradientClasses.violet,
+    },
+    {
+      animation: "shimmer",
+      shimmerTone: "gradient-blue",
+      class: skeletonShimmerGradientClasses["gradient-blue"],
+    },
+    {
+      animation: "shimmer",
+      shimmerTone: "gradient-green",
+      class: skeletonShimmerGradientClasses["gradient-green"],
+    },
+    {
+      animation: "shimmer",
+      shimmerTone: "gradient-red",
+      class: skeletonShimmerGradientClasses["gradient-red"],
+    },
+    {
+      animation: "shimmer",
+      shimmerTone: "gradient-yellow",
+      class: skeletonShimmerGradientClasses["gradient-yellow"],
+    },
+    {
+      animation: "shimmer",
+      shimmerTone: "gradient-purple",
+      class: skeletonShimmerGradientClasses["gradient-purple"],
+    },
+    {
+      animation: "shimmer",
+      shimmerTone: "gradient-teal",
+      class: skeletonShimmerGradientClasses["gradient-teal"],
+    },
+    {
+      animation: "shimmer",
+      shimmerTone: "gradient-indigo",
+      class: skeletonShimmerGradientClasses["gradient-indigo"],
+    },
+    {
+      animation: "shimmer",
+      shimmerTone: "gradient-pink",
+      class: skeletonShimmerGradientClasses["gradient-pink"],
+    },
+    {
+      animation: "shimmer",
+      shimmerTone: "gradient-orange",
+      class: skeletonShimmerGradientClasses["gradient-orange"],
+    },
+    {
+      animation: "pulse",
+      class: "",
+    },
+  ],
+  defaultVariants: {
+    appearance: "default",
+    size: "md",
+    rounded: "md",
+    animation: "shimmer",
+    shimmerTone: "default",
   },
-);
+});
 
-export const skeletonTextLineVariants = cva("block w-full", {
+export const skeletonTextLineVariants = cva(zuiSkeletonTextLineBase, {
   variants: {
-    size: {
-      sm: "h-2.5",
-      md: "h-3",
-      lg: "h-4",
-    },
+    size: zuiSkeletonTextLineSizes,
   },
   defaultVariants: { size: "md" },
 });