@zentauri-ui/zentauri-components 1.6.3 → 1.7.1

package/src/ui/stepper/variants.ts

@@ -1,85 +1,40 @@
 import { cva } from "class-variance-authority";
 
-export const stepperVariants = cva("flex w-full", {
+import {
+  zuiStepperBase,
+  zuiStepperIndicatorAppearances,
+  zuiStepperIndicatorBase,
+  zuiStepperIndicatorSizes,
+  zuiStepperItemBase,
+  zuiStepperItemOrientations,
+  zuiStepperOrientations,
+} from "../../design-system/stepper";
+
+export const stepperVariants = cva(zuiStepperBase, {
   variants: {
-    orientation: {
-      horizontal: "flex-row flex-wrap items-start gap-4",
-      vertical: "flex-col gap-6",
-    },
+    orientation: zuiStepperOrientations,
   },
   defaultVariants: {
     orientation: "horizontal",
   },
 });
 
-export const stepperItemVariants = cva("relative flex gap-3", {
+export const stepperItemVariants = cva(zuiStepperItemBase, {
   variants: {
-    orientation: {
-      horizontal: "min-w-0 flex-col items-center text-center",
-      vertical: "flex-row items-center text-left",
-    },
+    orientation: zuiStepperItemOrientations,
   },
   defaultVariants: {
     orientation: "horizontal",
   },
 });
 
-export const stepperIndicatorVariants = cva(
-  "grid size-9 shrink-0 place-items-center rounded-full border text-sm font-semibold transition-colors",
-  {
-    variants: {
-      appearance: {
-        complete:
-          "border-emerald-500/60 bg-emerald-500/20 text-emerald-900 dark:text-emerald-100 ring-2 ring-emerald-400/30",
-        current:
-          "border-violet-600 dark:border-violet-400 bg-violet-500/20 text-slate-900 dark:text-white ring-2 ring-violet-400/50",
-        upcoming:
-          "border-black/15 dark:border-white/15 bg-black/5 dark:bg-white/5 text-slate-500 dark:text-slate-400",
-        sky: "border-sky-500/60 bg-sky-500/20 text-sky-900 dark:text-sky-100 ring-2 ring-sky-400/30",
-        rose: "border-rose-500/60 bg-rose-500/20 text-rose-900 dark:text-rose-100 ring-2 ring-rose-400/30",
-        purple:
-          "border-purple-500/60 bg-purple-500/20 text-purple-900 dark:text-purple-100 ring-2 ring-purple-400/30",
-        pink: "border-pink-500/60 bg-pink-500/20 text-pink-900 dark:text-pink-100 ring-2 ring-pink-400/30",
-        orange:
-          "border-orange-500/60 bg-orange-500/20 text-orange-900 dark:text-orange-100 ring-2 ring-orange-400/30",
-        yellow:
-          "border-yellow-500/60 bg-yellow-500/20 text-yellow-900 dark:text-yellow-100 ring-2 ring-yellow-400/30",
-        teal: "border-teal-500/60 bg-teal-500/20 text-teal-900 dark:text-teal-100 ring-2 ring-teal-400/30",
-        indigo:
-          "border-indigo-500/60 bg-indigo-500/20 text-indigo-900 dark:text-indigo-100 ring-2 ring-indigo-400/30",
-        emerald:
-          "border-emerald-500/60 bg-emerald-500/20 text-emerald-900 dark:text-emerald-100 ring-2 ring-emerald-400/30",
-        gray: "border-gray-500/60 bg-gray-500/20 text-gray-900 dark:text-gray-100 ring-2 ring-gray-400/30",
-        violet:
-          "border-violet-500/60 bg-violet-500/20 text-violet-900 dark:text-violet-100 ring-2 ring-violet-400/30",
-        "gradient-blue":
-          "border-blue-500/60 bg-blue-500/20 text-blue-900 dark:text-blue-100 ring-2 ring-blue-400/30",
-        "gradient-green":
-          "border-green-500/60 bg-green-500/20 text-green-900 dark:text-green-100 ring-2 ring-green-400/30",
-        "gradient-red":
-          "border-red-500/60 bg-red-500/20 text-red-900 dark:text-red-100 ring-2 ring-red-400/30",
-        "gradient-yellow":
-          "border-yellow-500/60 bg-yellow-500/20 text-yellow-900 dark:text-yellow-100 ring-2 ring-yellow-400/30",
-        "gradient-purple":
-          "border-purple-500/60 bg-purple-500/20 text-purple-900 dark:text-purple-100 ring-2 ring-purple-400/30",
-        "gradient-teal":
-          "border-teal-500/60 bg-teal-500/20 text-teal-900 dark:text-teal-100 ring-2 ring-teal-400/30",
-        "gradient-indigo":
-          "border-indigo-500/60 bg-indigo-500/20 text-indigo-900 dark:text-indigo-100 ring-2 ring-indigo-400/30",
-        "gradient-pink":
-          "border-pink-500/60 bg-pink-500/20 text-pink-900 dark:text-pink-100 ring-2 ring-pink-400/30",
-        "gradient-orange":
-          "border-orange-500/60 bg-orange-500/20 text-orange-900 dark:text-orange-100 ring-2 ring-orange-400/30",
-      },
-      size: {
-        sm: "size-8 text-xs",
-        md: "size-9 text-sm",
-        lg: "size-10 text-base",
-      },
-    },
-    defaultVariants: {
-      appearance: "upcoming",
-      size: "md",
-    },
+export const stepperIndicatorVariants = cva(zuiStepperIndicatorBase, {
+  variants: {
+    appearance: zuiStepperIndicatorAppearances,
+    size: zuiStepperIndicatorSizes,
   },
-);
+  defaultVariants: {
+    appearance: "upcoming",
+    size: "md",
+  },
+});

package/src/ui/table/variants.ts

@@ -1,113 +1,43 @@
 import { cva } from "class-variance-authority";
 
-export const tableVariants = cva(
-  "w-full table-auto border-collapse caption-bottom text-sm text-slate-700 dark:text-slate-200 md:table-fixed",
-  {
-    variants: {
-      appearance: {
-        default: "",
-        striped: "",
-        bordered: "border border-black/10 dark:border-white/10",
-        ghost: "",
-        sky: "border border-sky-800 dark:border-sky-600",
-        rose: "border border-rose-800 dark:border-rose-600",
-        purple: "border border-purple-800 dark:border-purple-600",
-        pink: "border border-pink-800 dark:border-pink-600",
-        orange: "border border-orange-800 dark:border-orange-600",
-        yellow: "border border-yellow-800 dark:border-yellow-600",
-        teal: "border border-teal-800 dark:border-teal-600",
-        indigo: "border border-indigo-800 dark:border-indigo-600",
-        emerald: "border border-emerald-800 dark:border-emerald-600",
-        gray: "border border-gray-800 dark:border-gray-600",
-        amber: "border border-amber-800 dark:border-amber-600",
-        violet: "border border-violet-800 dark:border-violet-600",
-      },
-      size: {
-        sm: "text-xs",
-        md: "text-sm",
-        lg: "text-base",
-      },
-      stickyHeader: {
-        true: "",
-        false: "",
-      },
-    },
-    defaultVariants: {
-      appearance: "default",
-      size: "md",
-      stickyHeader: false,
-    },
+import {
+  zuiTableAppearances,
+  zuiTableBase,
+  zuiTableCellAppearances,
+  zuiTableCellBase,
+  zuiTableCellSizes,
+  zuiTableRowAppearances,
+  zuiTableRowBase,
+  zuiTableSizes,
+  zuiTableStickyHeader,
+  zuiTableTextAlignments,
+} from "../../design-system/table";
+
+export const tableVariants = cva(zuiTableBase, {
+  variants: {
+    appearance: zuiTableAppearances,
+    size: zuiTableSizes,
+    stickyHeader: zuiTableStickyHeader,
+  },
+  defaultVariants: {
+    appearance: "default",
+    size: "md",
+    stickyHeader: false,
   },
-);
+});
 
-export const tableRowVariants = cva(
-  "border-b border-black/5 dark:border-white/5 transition-colors data-[state=selected]:bg-black/[0.06] dark:data-[state=selected]:bg-white/[0.06]",
-  {
-    variants: {
-      appearance: {
-        default: "",
-        striped: "odd:bg-black/[0.03] dark:odd:bg-white/[0.03]",
-        bordered: "",
-        ghost:
-          "border-transparent hover:bg-black/[0.03] dark:hover:bg-white/[0.03]",
-        sky: "border-sky-800 dark:border-sky-600 hover:bg-sky-800 dark:hover:bg-sky-600 hover:text-sky-100",
-        rose: "border-rose-800 dark:border-rose-600 hover:bg-rose-500 dark:hover:bg-rose-900 hover:text-rose-100",
-        purple:
-          "border-purple-800 dark:border-purple-600 hover:bg-purple-500 dark:hover:bg-purple-900 hover:text-purple-100",
-        pink: "border-pink-800 dark:border-pink-600 hover:bg-pink-500 dark:hover:bg-pink-900 hover:text-pink-100",
-        orange:
-          "border-orange-800 dark:border-orange-600 hover:bg-orange-500 dark:hover:bg-orange-900 hover:text-orange-100",
-        yellow:
-          "border-yellow-800 dark:border-yellow-600 hover:bg-yellow-500 dark:hover:bg-yellow-900 hover:text-yellow-100",
-        teal: "border-teal-800 dark:border-teal-600 hover:bg-teal-500 dark:hover:bg-teal-900 hover:text-teal-100",
-        indigo:
-          "border-indigo-800 dark:border-indigo-600 hover:bg-indigo-500 dark:hover:bg-indigo-900 hover:text-indigo-100",
-        emerald:
-          "border-emerald-800 dark:border-emerald-600 hover:bg-emerald-500 dark:hover:bg-emerald-900 hover:text-emerald-100",
-        gray: "border-gray-800 dark:border-gray-600 hover:bg-gray-500 dark:hover:bg-gray-900 hover:text-gray-100",
-        amber:
-          "border-amber-800 dark:border-amber-600 hover:bg-amber-500 dark:hover:bg-amber-900 hover:text-amber-100",
-        violet:
-          "border-violet-800 dark:border-violet-600 hover:bg-violet-500 dark:hover:bg-violet-900 hover:text-violet-100",
-      },
-    },
-    defaultVariants: { appearance: "default" },
+export const tableRowVariants = cva(zuiTableRowBase, {
+  variants: {
+    appearance: zuiTableRowAppearances,
   },
-);
+  defaultVariants: { appearance: "default" },
+});
 
-export const tableCellVariants = cva(
-  "min-w-0 border p-3 align-middle break-words",
-  {
-    variants: {
-      appearance: {
-        default: "border-black/10 dark:border-white/10",
-        striped: "border-black/10 dark:border-white/10",
-        bordered: "border-black/10 dark:border-white/10",
-        ghost: "border-black/10 dark:border-white/10",
-        sky: "border-sky-800 dark:border-sky-600",
-        rose: "border-rose-800 dark:border-rose-600",
-        purple: "border-purple-800 dark:border-purple-600",
-        pink: "border-pink-800 dark:border-pink-600",
-        orange: "border-orange-800 dark:border-orange-600",
-        yellow: "border-yellow-800 dark:border-yellow-600",
-        teal: "border-teal-800 dark:border-teal-600",
-        indigo: "border-indigo-800 dark:border-indigo-600",
-        emerald: "border-emerald-800 dark:border-emerald-600",
-        gray: "border-gray-800 dark:border-gray-600",
-        amber: "border-amber-800 dark:border-amber-600",
-        violet: "border-violet-800 dark:border-violet-600",
-      },
-      size: {
-        sm: "p-2",
-        md: "p-3",
-        lg: "p-4",
-      },
-      textAlign: {
-        left: "text-left",
-        center: "text-center",
-        right: "text-right",
-      },
-    },
-    defaultVariants: { appearance: "default", size: "md" },
+export const tableCellVariants = cva(zuiTableCellBase, {
+  variants: {
+    appearance: zuiTableCellAppearances,
+    size: zuiTableCellSizes,
+    textAlign: zuiTableTextAlignments,
   },
-);
+  defaultVariants: { appearance: "default", size: "md" },
+});

package/src/ui/tabs/variants.ts

@@ -1,21 +1,21 @@
 import { cva } from "class-variance-authority";
 
-export const tabsListVariants = cva("flex flex-wrap items-center gap-1", {
+import {
+  zuiTabsListBase,
+  zuiTabsListSizes,
+  zuiTabsListVariants,
+  zuiTabsOrientations,
+  zuiTabsTriggerAppearances,
+  zuiTabsTriggerBase,
+  zuiTabsTriggerSizes,
+  zuiTabsTriggerVariants,
+} from "../../design-system/tabs";
+
+export const tabsListVariants = cva(zuiTabsListBase, {
   variants: {
-    variant: {
-      default: "bg-transparent",
-      underline: "border-b-2 border-transparent",
-      pills: "rounded-md",
-    },
-    size: {
-      sm: "text-sm p-1",
-      md: "text-base p-1.5",
-      lg: "text-lg p-2",
-    },
-    orientation: {
-      horizontal: "flex-row",
-      vertical: "flex-col",
-    },
+    variant: zuiTabsListVariants,
+    size: zuiTabsListSizes,
+    orientation: zuiTabsOrientations,
   },
   defaultVariants: {
     size: "md",
@@ -24,62 +24,15 @@ export const tabsListVariants = cva("flex flex-wrap items-center gap-1", {
   },
 });
 
-export const tabsTriggerVariants = cva(
-  "px-3 py-1.5 rounded-md transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-  {
-    variants: {
-      appearance: {
-        default: "bg-transparent text-slate-900 dark:text-slate-50",
-        sky: "bg-sky-300 text-sky-900 dark:bg-sky-900 dark:text-sky-200 data-[state=active]:bg-sky-900 dark:data-[state=active]:bg-sky-700 data-[state=active]:text-sky-50 dark:data-[state=active]:text-sky-100",
-        rose: "bg-rose-300 text-rose-900 dark:bg-rose-900 dark:text-rose-200 data-[state=active]:bg-rose-900 dark:data-[state=active]:bg-rose-700 data-[state=active]:text-rose-50 dark:data-[state=active]:text-rose-100",
-        purple:
-          "bg-purple-300 text-purple-900 dark:bg-purple-900 dark:text-purple-200 data-[state=active]:bg-purple-900 dark:data-[state=active]:bg-purple-700 data-[state=active]:text-purple-50 dark:data-[state=active]:text-purple-100",
-        pink: "bg-pink-300 text-pink-900 dark:bg-pink-900 dark:text-pink-200 data-[state=active]:bg-pink-900 dark:data-[state=active]:bg-pink-700 data-[state=active]:text-pink-50 dark:data-[state=active]:text-pink-100",
-        orange:
-          "bg-orange-300 text-orange-900 dark:bg-orange-900 dark:text-orange-200 data-[state=active]:bg-orange-900 dark:data-[state=active]:bg-orange-700 data-[state=active]:text-orange-50 dark:data-[state=active]:text-orange-100",
-        yellow:
-          "bg-yellow-300 text-yellow-900 dark:bg-yellow-900 dark:text-yellow-200 data-[state=active]:bg-yellow-900 dark:data-[state=active]:bg-yellow-700 data-[state=active]:text-yellow-50 dark:data-[state=active]:text-yellow-100",
-        teal: "bg-teal-300 text-teal-900 dark:bg-teal-900 dark:text-teal-200 data-[state=active]:bg-teal-900 dark:data-[state=active]:bg-teal-700 data-[state=active]:text-teal-50 dark:data-[state=active]:text-teal-100",
-        indigo:
-          "bg-indigo-300 text-indigo-900 dark:bg-indigo-900 dark:text-indigo-200 data-[state=active]:bg-indigo-900 dark:data-[state=active]:bg-indigo-700 data-[state=active]:text-indigo-50 dark:data-[state=active]:text-indigo-100",
-        emerald:
-          "bg-emerald-300 text-emerald-900 dark:bg-emerald-900 dark:text-emerald-200 data-[state=active]:bg-emerald-900 dark:data-[state=active]:bg-emerald-700 data-[state=active]:text-emerald-50 dark:data-[state=active]:text-emerald-100",
-        gray: "bg-gray-300 text-gray-900 dark:bg-gray-900 dark:text-gray-200 data-[state=active]:bg-gray-900 dark:data-[state=active]:bg-gray-700 data-[state=active]:text-gray-50 dark:data-[state=active]:text-gray-100",
-        "gradient-blue":
-          "bg-linear-to-r from-blue-800 dark:from-blue-800 to-purple-800 dark:to-purple-800 text-blue-100 dark:text-blue-50 data-[state=active]:from-blue-600 dark:data-[state=active]:from-blue-600 data-[state=active]:to-purple-600 dark:data-[state=active]:to-purple-600 data-[state=active]:text-blue-100 dark:data-[state=active]:text-blue-100",
-        "gradient-green":
-          "bg-linear-to-r from-green-800 dark:from-green-800 to-lime-800 dark:to-lime-800 text-green-100 dark:text-green-50 data-[state=active]:from-green-600 dark:data-[state=active]:from-green-600 data-[state=active]:to-lime-600 dark:data-[state=active]:to-lime-600 data-[state=active]:text-green-100 dark:data-[state=active]:text-green-100",
-        "gradient-red":
-          "bg-linear-to-r from-red-800 dark:from-red-800 to-pink-800 dark:to-pink-800 text-red-100 dark:text-red-50 data-[state=active]:from-red-600 dark:data-[state=active]:from-red-600 data-[state=active]:to-pink-600 dark:data-[state=active]:to-pink-600 data-[state=active]:text-red-100 dark:data-[state=active]:text-red-100",
-        "gradient-yellow":
-          "bg-linear-to-r from-yellow-800 dark:from-yellow-800 to-orange-800 dark:to-orange-800 text-yellow-100 dark:text-yellow-50 data-[state=active]:from-yellow-600 dark:data-[state=active]:from-yellow-600 data-[state=active]:to-orange-600 dark:data-[state=active]:to-orange-600 data-[state=active]:text-yellow-100 dark:data-[state=active]:text-yellow-100",
-        "gradient-purple":
-          "bg-linear-to-r from-purple-800 dark:from-purple-800 to-pink-800 dark:to-pink-800 text-purple-100 dark:text-purple-50 data-[state=active]:from-purple-600 dark:data-[state=active]:from-purple-600 data-[state=active]:to-pink-600 dark:data-[state=active]:to-pink-600 data-[state=active]:text-purple-100 dark:data-[state=active]:text-purple-100",
-        "gradient-teal":
-          "bg-linear-to-r from-teal-800 dark:from-teal-800 to-cyan-800 dark:to-cyan-800 text-teal-100 dark:text-teal-50 data-[state=active]:from-teal-600 dark:data-[state=active]:from-teal-600 data-[state=active]:to-cyan-600 dark:data-[state=active]:to-cyan-600 data-[state=active]:text-teal-100 dark:data-[state=active]:text-teal-100",
-        "gradient-indigo":
-          "bg-linear-to-r from-indigo-800 dark:from-indigo-800 to-purple-800 dark:to-purple-800 text-indigo-100 dark:text-indigo-50 data-[state=active]:from-indigo-600 dark:data-[state=active]:from-indigo-600 data-[state=active]:to-purple-600 dark:data-[state=active]:to-purple-600 data-[state=active]:text-indigo-100 dark:data-[state=active]:text-indigo-100",
-        "gradient-pink":
-          "bg-linear-to-r from-pink-800 dark:from-pink-800 to-rose-800 dark:to-rose-800 text-pink-100 dark:text-pink-50 data-[state=active]:from-pink-600 dark:data-[state=active]:from-pink-600 data-[state=active]:to-rose-600 dark:data-[state=active]:to-rose-600 data-[state=active]:text-pink-100 dark:data-[state=active]:text-pink-100",
-        "gradient-orange":
-          "bg-linear-to-r from-orange-800 dark:from-orange-800 to-red-800 dark:to-red-800 text-orange-100 dark:text-orange-50 data-[state=active]:from-orange-600 dark:data-[state=active]:from-orange-600 data-[state=active]:to-red-600 dark:data-[state=active]:to-red-600 data-[state=active]:text-orange-100 dark:data-[state=active]:text-orange-100",
-      },
-      variant: {
-        default: "data-[state=active]:bg-background",
-        underline:
-          "border-b-2 border-transparent data-[state=active]:border-current rounded-none",
-        pills: "",
-      },
-      size: {
-        sm: "px-2 py-1",
-        md: "px-3 py-1.5",
-        lg: "px-4 py-2",
-      },
-    },
-    defaultVariants: {
-      appearance: "default",
-      variant: "pills",
-      size: "md",
-    },
+export const tabsTriggerVariants = cva(zuiTabsTriggerBase, {
+  variants: {
+    appearance: zuiTabsTriggerAppearances,
+    variant: zuiTabsTriggerVariants,
+    size: zuiTabsTriggerSizes,
   },
-);
+  defaultVariants: {
+    appearance: "default",
+    variant: "pills",
+    size: "md",
+  },
+});

package/src/ui/toast/variants.ts

@@ -1,80 +1,29 @@
 import { cva } from "class-variance-authority";
 
-export const toastViewportVariants = cva(
-  "fixed z-[60] flex max-h-screen flex-col gap-2 p-4",
-  {
-    variants: {
-      position: {
-        "top-left": "left-0 top-0 items-start",
-        "top-center": "left-1/2 top-0 -translate-x-1/2 items-center",
-        "top-right": "right-0 top-0 items-end",
-        "bottom-left": "bottom-0 left-0 items-start",
-        "bottom-center": "bottom-0 left-1/2 -translate-x-1/2 items-center",
-        "bottom-right": "bottom-0 right-0 items-end",
-      },
-    },
-    defaultVariants: {
-      position: "bottom-right",
-    },
+import {
+  zuiToastRootAppearances,
+  zuiToastRootBase,
+  zuiToastRootSizes,
+  zuiToastViewportBase,
+  zuiToastViewportPositions,
+} from "../../design-system/toast";
+
+export const toastViewportVariants = cva(zuiToastViewportBase, {
+  variants: {
+    position: zuiToastViewportPositions,
+  },
+  defaultVariants: {
+    position: "bottom-right",
   },
-);
+});
 
-export const toastRootVariants = cva(
-  "pointer-events-auto w-[min(100vw-2rem,380px)] rounded-xl border bg-slate-50 p-4 text-slate-900 dark:text-slate-50 shadow-[0_8px_24px_rgba(15,23,42,0.12)] dark:shadow-[0_18px_48px_rgba(15,23,42,0.45)]",
-  {
-    variants: {
-      appearance: {
-        default: "bg-slate-950 text-slate-50",
-        success: "border-emerald-500/40 bg-emerald-950 text-emerald-50",
-        warning: "border-amber-500/40 bg-amber-950 text-amber-50",
-        error: "border-rose-500/50 bg-rose-950 text-rose-50",
-        info: "border-sky-500/40 bg-sky-950 text-sky-50",
-        ghost: "border-transparent bg-transparent text-slate-900",
-        purple:
-          "border-purple-800 dark:border-purple-600 bg-purple-950 backdrop-blur-xl text-purple-50",
-        pink: "border-pink-800 dark:border-pink-600 bg-pink-950 backdrop-blur-xl text-pink-50",
-        orange:
-          "border-orange-800 dark:border-orange-600 bg-orange-950 backdrop-blur-xl text-orange-50",
-        yellow:
-          "border-yellow-800 dark:border-yellow-600 bg-yellow-950 backdrop-blur-xl text-yellow-50",
-        teal: "border-teal-800 dark:border-teal-600 bg-teal-950 backdrop-blur-xl text-teal-50",
-        indigo:
-          "border-indigo-800 dark:border-indigo-600 bg-indigo-950 backdrop-blur-xl text-indigo-50",
-        emerald:
-          "border-emerald-800 dark:border-emerald-600 bg-emerald-950 backdrop-blur-xl text-emerald-50",
-        gray: "border-gray-800 dark:border-gray-600 bg-gray-950 backdrop-blur-xl text-gray-50",
-        amber:
-          "border-amber-800 dark:border-amber-600 bg-amber-950 backdrop-blur-xl text-amber-50",
-        violet:
-          "border-violet-800 dark:border-violet-600 bg-violet-950 backdrop-blur-xl text-violet-50",
-        "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",
-      },
-      size: {
-        sm: "p-3 text-xs",
-        md: "p-4 text-sm",
-        lg: "p-5 text-base",
-      },
-    },
-    defaultVariants: {
-      appearance: "default",
-      size: "md",
-    },
+export const toastRootVariants = cva(zuiToastRootBase, {
+  variants: {
+    appearance: zuiToastRootAppearances,
+    size: zuiToastRootSizes,
+  },
+  defaultVariants: {
+    appearance: "default",
+    size: "md",
   },
-);
+});

package/src/ui/toggle/animated/toggle-animated.tsx

@@ -1,13 +1,14 @@
 "use client";
 
 import { motion } from "framer-motion";
-import { useCallback, useState } from "react";
+import { useCallback, useId, useState } from "react";
 
 import { cn } from "../../../lib/utils";
 
 import { toggleThumbAnimationPresets } from "./animations";
 import type { ToggleAnimatedProps } from "./types";
 import { toggleThumbVariants, toggleTrackVariants } from "../variants";
+import { hasToggleLabelChildren } from "../toggle-base";
 
 export function ToggleAnimated(props: ToggleAnimatedProps) {
   const {
@@ -25,6 +26,7 @@ export function ToggleAnimated(props: ToggleAnimatedProps) {
     children,
     ...rest
   } = props;
+  const toggleLabelId = useId();
   const isControlled = checked !== undefined;
   const [uncontrolled, setUncontrolled] = useState(defaultChecked);
   const resolved = isControlled ? Boolean(checked) : uncontrolled;
@@ -40,7 +42,15 @@ export function ToggleAnimated(props: ToggleAnimatedProps) {
     [isControlled, onCheckedChange],
   );
 
-  const thumbShiftPx = size === "sm" ? 14 : size === "lg" ? 24 : 18;
+  const thumbShiftPx = size === "sm" ? 16 : size === "lg" ? 24 : 20;
+  const labeledByChildren = hasToggleLabelChildren(children);
+  const labeling = labeledByChildren
+    ? {
+        "aria-labelledby": toggleLabelId,
+      }
+    : {
+        "aria-label": ariaLabel ?? "Toggle",
+      };
 
   return (
     <button
@@ -49,9 +59,9 @@ export function ToggleAnimated(props: ToggleAnimatedProps) {
       role="switch"
       data-slot="toggle"
       aria-checked={resolved}
-      aria-label={ariaLabel}
       data-state={resolved ? "checked" : "unchecked"}
       disabled={disabled}
+      {...labeling}
       className={cn(toggleTrackVariants({ size, appearance }), className)}
       onClick={() => {
         if (!disabled) {
@@ -60,7 +70,7 @@ export function ToggleAnimated(props: ToggleAnimatedProps) {
       }}
       {...rest}
     >
-      <span className="sr-only">{children}</span>
+      <span className="sr-only" id={labeledByChildren ? toggleLabelId : undefined}>{children}</span>
       <motion.span
         className={cn(
           toggleThumbVariants({ size, thumbColor }),

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

@@ -7,7 +7,7 @@ import { cn } from "../../lib/utils";
 import type { ToggleProps } from "./types";
 import { toggleThumbVariants, toggleTrackVariants } from "./variants";
 
-function hasToggleLabelChildren(node: ReactNode): boolean {
+export function hasToggleLabelChildren(node: ReactNode): boolean {
   if (node === undefined || node === null) {
     return false;
   }
@@ -56,7 +56,7 @@ export function ToggleBase(props: ToggleProps) {
     [isControlled, onCheckedChange],
   );
 
-  const thumbShiftPx = size === "sm" ? 14 : size === "lg" ? 24 : 19;
+  const thumbShiftPx = size === "sm" ? 16 : size === "lg" ? 24 : 20;
   const labeledByChildren = hasToggleLabelChildren(children);
   const labeling = labeledByChildren
     ? {
@@ -84,11 +84,7 @@ export function ToggleBase(props: ToggleProps) {
       }}
       {...rest}
     >
-      {labeledByChildren ? (
-        <span id={toggleLabelId} className="sr-only">
-          {children}
-        </span>
-      ) : null}
+      <span className="sr-only" id={labeledByChildren ? toggleLabelId : undefined}>{children}</span>
       <span
         className={cn(
           toggleThumbVariants({ size, thumbColor }),