@zentauri-ui/zentauri-components 1.5.22 → 1.6.0

package/src/hooks/useDynamicStepper/useDynamicStepper.test.ts

@@ -0,0 +1,107 @@
+import { act, renderHook } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+import { useDynamicStepper } from "./useDynamicStepper";
+
+describe("useDynamicStepper", () => {
+  it("should use internal state when uncontrolled", () => {
+    const { result } = renderHook(() =>
+      useDynamicStepper({ stepCount: 3, defaultActiveStep: 1 }),
+    );
+    expect(result.current.activeStep).toBe(1);
+    expect(result.current.canGoPrevious).toBe(true);
+    expect(result.current.canGoNext).toBe(true);
+    act(() => {
+      result.current.goNext();
+    });
+    expect(result.current.activeStep).toBe(2);
+    act(() => {
+      result.current.goPrevious();
+    });
+    expect(result.current.activeStep).toBe(1);
+  });
+
+  it("should clamp defaultActiveStep when uncontrolled", () => {
+    const { result } = renderHook(() =>
+      useDynamicStepper({ stepCount: 2, defaultActiveStep: 99 }),
+    );
+    expect(result.current.activeStep).toBe(1);
+  });
+
+  it("should not navigate past bounds", () => {
+    const { result } = renderHook(() =>
+      useDynamicStepper({ stepCount: 2, defaultActiveStep: 0 }),
+    );
+    expect(result.current.canGoPrevious).toBe(false);
+    act(() => {
+      result.current.goPrevious();
+    });
+    expect(result.current.activeStep).toBe(0);
+    act(() => {
+      result.current.goNext();
+    });
+    act(() => {
+      result.current.goNext();
+    });
+    expect(result.current.activeStep).toBe(1);
+    expect(result.current.canGoNext).toBe(false);
+  });
+
+  it("should respect controlled activeStep", () => {
+    const { result, rerender } = renderHook(
+      ({ step }: { step: number }) =>
+        useDynamicStepper({ stepCount: 3, activeStep: step }),
+      { initialProps: { step: 0 } },
+    );
+    expect(result.current.activeStep).toBe(0);
+    rerender({ step: 2 });
+    expect(result.current.activeStep).toBe(2);
+  });
+
+  it("should call onActiveStepChange when navigating uncontrolled", () => {
+    const onActiveStepChange = vi.fn();
+    const onNext = vi.fn();
+    const { result } = renderHook(() =>
+      useDynamicStepper({
+        stepCount: 3,
+        defaultActiveStep: 0,
+        onActiveStepChange,
+        onNext,
+      }),
+    );
+    act(() => {
+      result.current.goNext();
+    });
+    expect(onActiveStepChange).toHaveBeenCalledWith(1);
+    expect(onNext).toHaveBeenCalledWith(1);
+  });
+
+  it("should call onPrevious when going back", () => {
+    const onPrevious = vi.fn();
+    const { result } = renderHook(() =>
+      useDynamicStepper({
+        stepCount: 3,
+        defaultActiveStep: 1,
+        onPrevious,
+      }),
+    );
+    act(() => {
+      result.current.goPrevious();
+    });
+    expect(onPrevious).toHaveBeenCalledWith(0);
+  });
+
+  it("should expose safe flags when stepCount is zero", () => {
+    const { result } = renderHook(() =>
+      useDynamicStepper({ stepCount: 0, defaultActiveStep: 0 }),
+    );
+    expect(result.current.activeStep).toBe(0);
+    expect(result.current.canGoPrevious).toBe(false);
+    expect(result.current.canGoNext).toBe(false);
+    act(() => {
+      result.current.goNext();
+      result.current.goPrevious();
+    });
+    expect(result.current.activeStep).toBe(0);
+  });
+});

package/src/hooks/useDynamicStepper/useDynamicStepper.ts

@@ -0,0 +1,85 @@
+"use client";
+
+import { useCallback, useMemo } from "react";
+
+import { useControllableState } from "../useControllableState/useControllableState";
+
+import type {
+  UseDynamicStepperParams,
+  UseDynamicStepperResult,
+} from "../../ui/dynamic-stepper/types";
+
+function clampDynamicStepperIndex(index: number, stepCount: number): number {
+  if (stepCount <= 0) {
+    return 0;
+  }
+  return Math.min(Math.max(index, 0), stepCount - 1);
+}
+
+/**
+ * Headless multi-step index with prev/next navigation.
+ *
+ * @param params.stepCount - Number of steps (0-based count semantics via indices).
+ * @returns Active step, setter, navigation helpers, and boundary flags.
+ */
+export function useDynamicStepper({
+  stepCount,
+  activeStep: activeStepProp,
+  defaultActiveStep = 0,
+  onActiveStepChange,
+  onPrevious,
+  onNext,
+}: UseDynamicStepperParams): UseDynamicStepperResult {
+  const [storedStep, setStoredStep] = useControllableState<number>({
+    value: activeStepProp,
+    defaultValue: clampDynamicStepperIndex(defaultActiveStep, stepCount),
+    onChange: onActiveStepChange,
+  });
+
+  const activeStep = useMemo(
+    () => clampDynamicStepperIndex(storedStep, stepCount),
+    [storedStep, stepCount],
+  );
+
+  const canGoPrevious = stepCount > 0 && activeStep > 0;
+  const canGoNext = stepCount > 0 && activeStep < stepCount - 1;
+
+  const setActiveStep = useCallback(
+    (next: number | ((prev: number) => number)) => {
+      const resolved =
+        typeof next === "function"
+          ? (next as (prev: number) => number)(activeStep)
+          : next;
+      setStoredStep(clampDynamicStepperIndex(resolved, stepCount));
+    },
+    [activeStep, setStoredStep, stepCount],
+  );
+
+  const goPrevious = useCallback(() => {
+    if (!canGoPrevious) {
+      return;
+    }
+    const nextStep = clampDynamicStepperIndex(activeStep - 1, stepCount);
+    setStoredStep(nextStep);
+    onPrevious?.(nextStep);
+  }, [activeStep, canGoPrevious, onPrevious, setStoredStep, stepCount]);
+
+  const goNext = useCallback(() => {
+    if (!canGoNext) {
+      return;
+    }
+    const nextStep = clampDynamicStepperIndex(activeStep + 1, stepCount);
+    setStoredStep(nextStep);
+    onNext?.(nextStep);
+  }, [activeStep, canGoNext, onNext, setStoredStep, stepCount]);
+
+  return {
+    activeStep,
+    setActiveStep,
+    goPrevious,
+    goNext,
+    canGoPrevious,
+    canGoNext,
+    stepCount,
+  };
+}

package/src/ui/accordion/variants.ts

@@ -3,39 +3,45 @@ import { cva } from "class-variance-authority";
 export const accordionVariants = cva("w-full", {
   variants: {
     appearance: {
-      default: "divide-y divide-white/10 rounded-xl border border-white/10",
-      outline: "divide-y divide-white/10 rounded-xl border border-white/15",
-      ghost: "divide-y divide-white/5",
+      default:
+        "divide-y divide-black/10 dark:divide-white/10 rounded-xl border border-black/10 dark:border-white/10",
+      outline:
+        "divide-y divide-black/10 dark:divide-white/10 rounded-xl border border-black/15 dark:border-white/15",
+      ghost: "divide-y divide-black/5 dark:divide-white/5",
       card: "space-y-2",
       separated: "space-y-3",
-      sky: "divide-y divide-sky-600 rounded-xl border border-sky-600",
-      rose: "divide-y divide-rose-600 rounded-xl border border-rose-600",
-      purple: "divide-y divide-purple-600 rounded-xl border border-purple-600",
-      pink: "divide-y divide-pink-600 rounded-xl border border-pink-600",
-      orange: "divide-y divide-orange-600 rounded-xl border border-orange-600",
-      yellow: "divide-y divide-yellow-600 rounded-xl border border-yellow-600",
-      teal: "divide-y divide-teal-600 rounded-xl border border-teal-600",
-      indigo: "divide-y divide-indigo-600 rounded-xl border border-indigo-600",
+      sky: "divide-y divide-sky-800 dark:divide-sky-600 rounded-xl border border-sky-800 dark:border-sky-600",
+      rose: "divide-y divide-rose-800 dark:divide-rose-600 rounded-xl border border-rose-800 dark:border-rose-600",
+      purple:
+        "divide-y divide-purple-800 dark:divide-purple-600 rounded-xl border border-purple-800 dark:border-purple-600",
+      pink: "divide-y divide-pink-800 dark:divide-pink-600 rounded-xl border border-pink-800 dark:border-pink-600",
+      orange:
+        "divide-y divide-orange-800 dark:divide-orange-600 rounded-xl border border-orange-800 dark:border-orange-600",
+      yellow:
+        "divide-y divide-yellow-800 dark:divide-yellow-600 rounded-xl border border-yellow-800 dark:border-yellow-600",
+      teal: "divide-y divide-teal-800 dark:divide-teal-600 rounded-xl border border-teal-800 dark:border-teal-600",
+      indigo:
+        "divide-y divide-indigo-800 dark:divide-indigo-600 rounded-xl border border-indigo-800 dark:border-indigo-600",
       emerald:
-        "divide-y divide-emerald-600 rounded-xl border border-emerald-600",
+        "divide-y divide-emerald-800 dark:divide-emerald-600 rounded-xl border border-emerald-800 dark:border-emerald-600",
       "gradient-blue":
-        "divide-y divide-blue-600 rounded-xl border border-blue-600",
+        "divide-y divide-blue-800 dark:divide-blue-600 rounded-xl border border-blue-800 dark:border-blue-600",
       "gradient-green":
-        "divide-y divide-green-600 rounded-xl border border-green-600",
+        "divide-y divide-green-800 dark:divide-green-600 rounded-xl border border-green-800 dark:border-green-600",
       "gradient-red":
-        "divide-y divide-red-600 rounded-xl border border-red-600",
+        "divide-y divide-red-800 dark:divide-red-600 rounded-xl border border-red-800 dark:border-red-600",
       "gradient-yellow":
-        "divide-y divide-yellow-600 rounded-xl border border-yellow-600",
+        "divide-y divide-yellow-800 dark:divide-yellow-600 rounded-xl border border-yellow-800 dark:border-yellow-600",
       "gradient-purple":
-        "divide-y divide-purple-600 rounded-xl border border-purple-600",
+        "divide-y divide-purple-800 dark:divide-purple-600 rounded-xl border border-purple-800 dark:border-purple-600",
       "gradient-teal":
-        "divide-y divide-teal-600 rounded-xl border border-teal-600",
+        "divide-y divide-teal-800 dark:divide-teal-600 rounded-xl border border-teal-800 dark:border-teal-600",
       "gradient-indigo":
-        "divide-y divide-indigo-600 rounded-xl border border-indigo-600",
+        "divide-y divide-indigo-800 dark:divide-indigo-600 rounded-xl border border-indigo-800 dark:border-indigo-600",
       "gradient-pink":
-        "divide-y divide-pink-600 rounded-xl border border-pink-600",
+        "divide-y divide-pink-800 dark:divide-pink-600 rounded-xl border border-pink-800 dark:border-pink-600",
       "gradient-orange":
-        "divide-y divide-orange-600 rounded-xl border border-orange-600",
+        "divide-y divide-orange-800 dark:divide-orange-600 rounded-xl border border-orange-800 dark:border-orange-600",
     },
     size: {
       sm: "px-3 py-2 text-sm",
@@ -49,48 +55,54 @@ export const accordionVariants = cva("w-full", {
   },
 });
 
-export const accordionItemVariants = cva("", {
+export const accordionItemVariants = cva("text-slate-900 dark:text-slate-200", {
   variants: {
     appearance: {
       default: "",
       outline: "",
       ghost: "",
-      card: "rounded-xl border border-white/10 bg-white/[0.03] p-2",
-      separated: "rounded-xl border border-white/10 bg-slate-950/40 p-2",
-      sky: "rounded-xl border border-sky-600 bg-sky-600/[0.03] p-2",
-      rose: "rounded-xl border border-rose-600 bg-rose-600/[0.03] p-2",
-      purple: "rounded-xl border border-purple-600 bg-purple-600/[0.03] p-2",
-      pink: "rounded-xl border border-pink-600 bg-pink-600/[0.03] p-2",
-      orange: "rounded-xl border border-orange-600 bg-orange-600/[0.03] p-2",
-      yellow: "rounded-xl border border-yellow-600 bg-yellow-600/[0.03] p-2",
-      teal: "rounded-xl border border-teal-600 bg-teal-600/[0.03] p-2",
-      indigo: "rounded-xl border border-indigo-600 bg-indigo-600/[0.03] p-2",
-      emerald: "rounded-xl border border-emerald-600 bg-emerald-600/[0.03] p-2",
+      card: "rounded-xl border border-black/10 bg-black/5 p-2",
+      separated:
+        "rounded-xl border border-black/10 dark:border-white/10 bg-slate-50/40 dark:bg-slate-950/40 p-2",
+      sky: "rounded-xl border border-sky-800 dark:border-sky-600 bg-sky-100/50 dark:bg-sky-600/[0.03] p-2",
+      rose: "rounded-xl border border-rose-800 dark:border-rose-600 bg-rose-100/50 dark:bg-rose-600/[0.03] p-2",
+      purple:
+        "rounded-xl border border-purple-800 dark:border-purple-600 bg-purple-100/50 dark:bg-purple-600/[0.03] p-2",
+      pink: "rounded-xl border border-pink-800 dark:border-pink-600 bg-pink-100/50 dark:bg-pink-600/[0.03] p-2",
+      orange:
+        "rounded-xl border border-orange-800 dark:border-orange-600 bg-orange-100/50 dark:bg-orange-600/[0.03] p-2",
+      yellow:
+        "rounded-xl border border-yellow-800 dark:border-yellow-600 bg-yellow-100/50 dark:bg-yellow-600/[0.03] p-2",
+      teal: "rounded-xl border border-teal-800 dark:border-teal-600 bg-teal-100/50 dark:bg-teal-600/[0.03] p-2",
+      indigo:
+        "rounded-xl border border-indigo-800 dark:border-indigo-600 bg-indigo-100/50 dark:bg-indigo-600/[0.03] p-2",
+      emerald:
+        "rounded-xl border border-emerald-800 dark:border-emerald-600 bg-emerald-100/50 dark:bg-emerald-600/[0.03] p-2",
       "gradient-blue":
-        "rounded-xl bg-linear-to-r from-blue-600 to-purple-600/[0.03] p-2 text-white",
+        "rounded-xl bg-linear-to-r from-blue-300 dark:from-blue-600 to-purple-300 dark:to-purple-600 p-2",
       "gradient-green":
-        "rounded-xl bg-linear-to-r from-green-600 to-lime-600/[0.03] p-2 text-white",
+        "rounded-xl bg-linear-to-r from-green-300 dark:from-green-600 to-lime-300 dark:to-lime-600 p-2",
       "gradient-red":
-        "rounded-xl bg-linear-to-r from-red-600 to-pink-600/[0.03] p-2 text-white",
+        "rounded-xl bg-linear-to-r from-red-300 dark:from-red-600 to-pink-300 dark:to-pink-600 p-2",
       "gradient-yellow":
-        "rounded-xl bg-linear-to-r from-yellow-600 to-orange-600/[0.03] p-2 text-white",
+        "rounded-xl bg-linear-to-r from-yellow-300 dark:from-yellow-600 to-orange-300 dark:to-orange-600 p-2",
       "gradient-purple":
-        "rounded-xl bg-linear-to-r from-purple-600 to-pink-600/[0.03] p-2 text-white",
+        "rounded-xl bg-linear-to-r from-purple-300 dark:from-purple-600 to-pink-300 dark:to-pink-600 p-2",
       "gradient-teal":
-        "rounded-xl bg-linear-to-r from-teal-600 to-cyan-600/[0.03] p-2 text-white",
+        "rounded-xl bg-linear-to-r from-teal-300 dark:from-teal-600 to-cyan-300 dark:to-cyan-600 p-2",
       "gradient-indigo":
-        "rounded-xl bg-linear-to-r from-indigo-600 to-purple-600/[0.03] p-2 text-white",
+        "rounded-xl bg-linear-to-r from-indigo-300 dark:from-indigo-600 to-purple-300 dark:to-purple-600 p-2",
       "gradient-pink":
-        "rounded-xl bg-linear-to-r from-pink-600 to-rose-600/[0.03] p-2 text-white",
+        "rounded-xl bg-linear-to-r from-pink-300 dark:from-pink-600 to-rose-300 dark:to-rose-600 p-2",
       "gradient-orange":
-        "rounded-xl bg-linear-to-r from-orange-600 to-red-600/[0.03] p-2 text-white",
+        "rounded-xl bg-linear-to-r from-orange-300 dark:from-orange-600 to-red-300 dark:to-red-600 p-2",
     },
   },
   defaultVariants: { appearance: "default" },
 });
 
 export const accordionTriggerVariants = cva(
-  "flex w-full items-center justify-between gap-3 py-3 text-left font-medium text-slate-50 outline-none transition hover:text-white focus-visible:ring-2 focus-visible:ring-white/30",
+  "flex w-full items-center justify-between gap-3 py-3 text-left font-medium text-slate-800 dark:text-slate-200 outline-none transition hover:text-slate-900 dark:hover:text-white focus-visible:ring-2 focus-visible:ring-black/30 dark:focus-visible:ring-white/30",
   {
     variants: {
       size: {

package/src/ui/alert/variants.ts

@@ -1,42 +1,52 @@
 import { cva } from "class-variance-authority";
 
 export const alertVariants = cva(
-  "relative flex w-full gap-3 border text-sm ring-offset-slate-950 transition-colors",
+  "relative flex w-full gap-3 border text-sm ring-offset-slate-50 dark:ring-offset-slate-950 transition-colors",
   {
     variants: {
       appearance: {
-        default: "border-white/10 bg-white/5 text-slate-50",
-        success: "border-emerald-500/40 bg-emerald-500/10 text-emerald-50",
-        warning: "border-amber-500/40 bg-amber-500/10 text-amber-50",
-        error: "border-rose-500/50 bg-rose-500/10 text-rose-50",
-        info: "border-sky-500/40 bg-sky-500/10 text-sky-50",
-        ghost: "border-transparent bg-transparent text-slate-200",
-        purple: "border-purple-600 bg-purple-950/70 backdrop-blur-xl",
-        pink: "border-pink-600 bg-pink-950/70 backdrop-blur-xl",
-        orange: "border-orange-600 bg-orange-950/70 backdrop-blur-xl",
-        yellow: "border-yellow-600 bg-yellow-950/70 backdrop-blur-xl",
-        teal: "border-teal-600 bg-teal-950/70 backdrop-blur-xl",
-        indigo: "border-indigo-600 bg-indigo-950/70 backdrop-blur-xl",
-        gray: "border-gray-600 bg-gray-950/70 backdrop-blur-xl",
-        violet: "border-violet-600 bg-violet-950/70 backdrop-blur-xl",
+        default:
+          "border-black/10 dark:border-white/10 bg-black/5 dark:bg-white/5 text-slate-900 dark:text-slate-50",
+        success:
+          "border-emerald-500/40 bg-emerald-500/10 text-emerald-950 dark:text-emerald-50",
+        warning:
+          "border-amber-500/40 bg-amber-500/10 text-amber-950 dark:text-amber-50",
+        error:
+          "border-rose-500/50 bg-rose-500/10 text-rose-950 dark:text-rose-50",
+        info: "border-sky-500/40 bg-sky-500/10 text-sky-950 dark:text-sky-50",
+        ghost:
+          "border-transparent bg-transparent text-slate-700 dark:text-slate-200",
+        purple:
+          "border-purple-800 dark:border-purple-600 bg-purple-50 dark:bg-purple-950/70 backdrop-blur-xl text-slate-900 dark:text-slate-50",
+        pink: "border-pink-800 dark:border-pink-600 bg-pink-50 dark:bg-pink-950/70 backdrop-blur-xl text-slate-900 dark:text-slate-50",
+        orange:
+          "border-orange-800 dark:border-orange-600 bg-orange-50 dark:bg-orange-950/70 backdrop-blur-xl text-slate-900 dark:text-slate-50",
+        yellow:
+          "border-yellow-800 dark:border-yellow-600 bg-yellow-50 dark:bg-yellow-950/70 backdrop-blur-xl text-slate-900 dark:text-slate-50",
+        teal: "border-teal-800 dark:border-teal-600 bg-teal-50 dark:bg-teal-950/70 backdrop-blur-xl text-slate-900 dark:text-slate-50",
+        indigo:
+          "border-indigo-800 dark:border-indigo-600 bg-indigo-50 dark:bg-indigo-950/70 backdrop-blur-xl text-slate-900 dark:text-slate-50",
+        gray: "border-gray-800 dark:border-gray-600 bg-gray-50 dark:bg-gray-950/70 backdrop-blur-xl text-slate-900 dark:text-slate-50",
+        violet:
+          "border-violet-800 dark:border-violet-600 bg-violet-50 dark:bg-violet-950/70 backdrop-blur-xl text-slate-900 dark:text-slate-50",
         "gradient-blue":
-          "border-blue-600 bg-linear-to-r from-blue-950/70 to-purple-950/70 backdrop-blur-xl",
+          "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-slate-900 dark:text-slate-50",
         "gradient-green":
-          "border-green-600 bg-linear-to-r from-green-950/70 to-lime-950/70 backdrop-blur-xl",
+          "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-slate-900 dark:text-slate-50",
         "gradient-red":
-          "border-red-600 bg-linear-to-r from-red-950/70 to-pink-950/70 backdrop-blur-xl",
+          "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-slate-900 dark:text-slate-50",
         "gradient-yellow":
-          "border-yellow-600 bg-linear-to-r from-yellow-950/70 to-orange-950/70 backdrop-blur-xl",
+          "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-slate-900 dark:text-slate-50",
         "gradient-purple":
-          "border-purple-600 bg-linear-to-r from-purple-950/70 to-pink-950/70 backdrop-blur-xl",
+          "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-slate-900 dark:text-slate-50",
         "gradient-teal":
-          "border-teal-600 bg-linear-to-r from-teal-950/70 to-cyan-950/70 backdrop-blur-xl",
+          "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-slate-900 dark:text-slate-50",
         "gradient-indigo":
-          "border-indigo-600 bg-linear-to-r from-indigo-950/70 to-purple-950/70 backdrop-blur-xl",
+          "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-slate-900 dark:text-slate-50",
         "gradient-pink":
-          "border-pink-600 bg-linear-to-r from-pink-950/70 to-rose-950/70 backdrop-blur-xl",
+          "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-slate-900 dark:text-slate-50",
         "gradient-orange":
-          "border-orange-600 bg-linear-to-r from-orange-950/70 to-red-950/70 backdrop-blur-xl",
+          "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-slate-900 dark:text-slate-50",
       },
       size: {
         sm: "rounded-lg p-3",
@@ -62,13 +72,16 @@ export const alertTitleVariants = cva("font-semibold leading-tight", {
   defaultVariants: { size: "md" },
 });
 
-export const alertDescriptionVariants = cva("text-slate-300", {
-  variants: {
-    size: {
-      sm: "text-xs md:text-sm",
-      md: "text-xs md:text-sm",
-      lg: "text-xs md:text-sm",
+export const alertDescriptionVariants = cva(
+  "text-slate-600 dark:text-slate-300",
+  {
+    variants: {
+      size: {
+        sm: "text-xs md:text-sm",
+        md: "text-xs md:text-sm",
+        lg: "text-xs md:text-sm",
+      },
     },
+    defaultVariants: { size: "md" },
   },
-  defaultVariants: { size: "md" },
-});
+);

package/src/ui/avatar/variants.ts

@@ -1,43 +1,51 @@
 import { cva } from "class-variance-authority";
 
 export const avatarVariants = cva(
-  "relative flex shrink-0 overflow-hidden rounded-full border border-white/10 bg-white/10 text-slate-200",
+  "relative flex shrink-0 overflow-hidden rounded-full border border-black/10 dark:border-white/10 text-slate-700 dark:text-slate-200",
   {
     variants: {
       appearance: {
-        default: "border-white/10 bg-white/10 text-slate-200",
+        default:
+          "border-black/10 dark:border-white/10 bg-black/10 dark:bg-white/10 text-slate-700 dark:text-slate-200",
         muted:
-          "border-black/40 bg-slate-950 dark:border-white/10 dark:bg-slate-950/40 text-slate-200",
-        sky: "border-sky-600 bg-sky-600/[0.03] text-slate-200",
-        rose: "border-rose-600 bg-rose-600/[0.03] text-slate-200",
-        purple: "border-purple-600 bg-purple-600/[0.03] text-slate-200",
-        pink: "border-pink-600 bg-pink-600/[0.03] text-slate-200",
-        orange: "border-orange-600 bg-orange-600/[0.03] text-slate-200",
-        yellow: "border-yellow-600 bg-yellow-600/[0.03] text-slate-200",
-        teal: "border-teal-600 bg-teal-600/[0.03] text-slate-200",
-        indigo: "border-indigo-600 bg-indigo-600/[0.03] text-slate-200",
-        emerald: "border-emerald-600 bg-emerald-600/[0.03] text-slate-200",
-        gray: "border-gray-600 bg-gray-600/[0.03] text-slate-200",
-        amber: "border-amber-600 bg-amber-600/[0.03] text-slate-200",
-        violet: "border-violet-600 bg-violet-600/[0.03] text-slate-200",
+          "border-black/40 bg-slate-50 dark:border-white/10 dark:bg-slate-950/40 text-slate-700 dark:text-slate-200",
+        sky: "border-sky-800 dark:border-sky-600 bg-sky-100/50 dark:bg-sky-600/[0.03] text-slate-700 dark:text-slate-200",
+        rose: "border-rose-800 dark:border-rose-600 bg-rose-100/50 dark:bg-rose-600/[0.03] text-slate-700 dark:text-slate-200",
+        purple:
+          "border-purple-800 dark:border-purple-600 bg-purple-100/50 dark:bg-purple-600/[0.03] text-slate-700 dark:text-slate-200",
+        pink: "border-pink-800 dark:border-pink-600 bg-pink-100/50 dark:bg-pink-600/[0.03] text-slate-700 dark:text-slate-200",
+        orange:
+          "border-orange-800 dark:border-orange-600 bg-orange-100/50 dark:bg-orange-600/[0.03] text-slate-700 dark:text-slate-200",
+        yellow:
+          "border-yellow-800 dark:border-yellow-600 bg-yellow-100/50 dark:bg-yellow-600/[0.03] text-slate-700 dark:text-slate-200",
+        teal: "border-teal-800 dark:border-teal-600 bg-teal-100/50 dark:bg-teal-600/[0.03] text-slate-700 dark:text-slate-200",
+        indigo:
+          "border-indigo-800 dark:border-indigo-600 bg-indigo-100/50 dark:bg-indigo-600/[0.03] text-slate-700 dark:text-slate-200",
+        emerald:
+          "border-emerald-800 dark:border-emerald-600 bg-emerald-100/50 dark:bg-emerald-600/[0.03] text-slate-700 dark:text-slate-200",
+        gray: "border-gray-800 dark:border-gray-600 bg-gray-100/50 dark:bg-gray-600/[0.03] text-slate-700 dark:text-slate-200",
+        amber:
+          "border-amber-800 dark:border-amber-600 bg-amber-100/50 dark:bg-amber-600/[0.03] text-slate-700 dark:text-slate-200",
+        violet:
+          "border-violet-800 dark:border-violet-600 bg-violet-100/50 dark:bg-violet-600/[0.03] text-slate-700 dark:text-slate-200",
         "gradient-blue":
-          "bg-linear-to-r from-blue-950/70 to-purple-950/70 backdrop-blur-xl text-slate-200",
+          "bg-linear-to-r from-blue-500 dark:from-blue-600 to-purple-500 dark:to-purple-600 backdrop-blur-xl text-slate-700 dark:text-slate-200",
         "gradient-green":
-          "bg-linear-to-r from-green-950/70 to-lime-950/70 backdrop-blur-xl text-slate-200",
+          "bg-linear-to-r from-green-500 dark:from-green-600 to-lime-500 dark:to-lime-600 backdrop-blur-xl text-slate-700 dark:text-slate-200",
         "gradient-red":
-          "bg-linear-to-r from-red-950/70 to-pink-950/70 backdrop-blur-xl text-slate-200",
+          "bg-linear-to-r from-red-500 dark:from-red-600 to-pink-500 dark:to-pink-600 backdrop-blur-xl text-slate-700 dark:text-slate-200",
         "gradient-yellow":
-          "bg-linear-to-r from-yellow-950/70 to-orange-950/70 backdrop-blur-xl text-slate-200",
+          "bg-linear-to-r from-yellow-500 dark:from-yellow-600 to-orange-500 dark:to-orange-600 backdrop-blur-xl text-slate-700 dark:text-slate-200",
         "gradient-purple":
-          "bg-linear-to-r from-purple-950/70 to-pink-950/70 backdrop-blur-xl text-slate-200",
+          "bg-linear-to-r from-purple-500 dark:from-purple-600 to-pink-500 dark:to-pink-600 backdrop-blur-xl text-slate-700 dark:text-slate-200",
         "gradient-teal":
-          "bg-linear-to-r from-teal-950/70 to-cyan-950/70 backdrop-blur-xl text-slate-200",
+          "bg-linear-to-r from-teal-500 dark:from-teal-600 to-cyan-500 dark:to-cyan-600 backdrop-blur-xl text-slate-700 dark:text-slate-200",
         "gradient-indigo":
-          "bg-linear-to-r from-indigo-950/70 to-purple-950/70 backdrop-blur-xl text-slate-200",
+          "bg-linear-to-r from-indigo-500 dark:from-indigo-600 to-purple-500 dark:to-purple-600 backdrop-blur-xl text-slate-700 dark:text-slate-200",
         "gradient-pink":
-          "bg-linear-to-r from-pink-950/70 to-rose-950/70 backdrop-blur-xl text-slate-200",
+          "bg-linear-to-r from-pink-500 dark:from-pink-600 to-rose-500 dark:to-rose-600 backdrop-blur-xl text-slate-700 dark:text-slate-200",
         "gradient-orange":
-          "bg-linear-to-r from-orange-950/70 to-red-950/70 backdrop-blur-xl text-slate-200",
+          "bg-linear-to-r from-orange-500 dark:from-orange-600 to-red-500 dark:to-red-600 backdrop-blur-xl text-slate-700 dark:text-slate-200",
       },
       size: {
         sm: "size-8 text-xs",
@@ -56,9 +64,9 @@ export const avatarVariants = cva(
 export const avatarImageVariants = cva("aspect-square size-full object-cover");
 
 export const avatarFallbackVariants = cva(
-  "flex size-full items-center justify-center bg-slate-800 font-medium text-slate-100",
+  "flex size-full items-center justify-center bg-slate-200 dark:bg-slate-800 font-medium text-slate-800 dark:text-slate-100",
 );
 
 export const avatarGroupVariants = cva(
-  "flex items-center [&_[data-slot=avatar]]:-ml-2 [&_[data-slot=avatar]]:ring-2 [&_[data-slot=avatar]]:ring-slate-950 [&_[data-slot=avatar]]:first:ml-0",
+  "flex items-center [&_[data-slot=avatar]]:-ml-2 [&_[data-slot=avatar]]:ring-2 [&_[data-slot=avatar]]:ring-white dark:[&_[data-slot=avatar]]:ring-slate-950 [&_[data-slot=avatar]]:first:ml-0",
 );

package/src/ui/badge/variants.ts

@@ -5,45 +5,58 @@ import { cva } from "class-variance-authority";
  * Reused by primitives that should stay visually aligned with Button.
  */
 export const buttonLikeSolidAppearances = {
-  default: "bg-slate-50 text-slate-950 shadow-[0_1px_2px_rgba(15,23,42,0.12)]",
-  secondary: "bg-slate-800 text-slate-50",
-  destructive: "bg-rose-700 text-white",
-  outline: "border border-white/10 bg-white/5 text-slate-50",
-  ghost: "bg-transparent text-slate-200",
-  glass: "border border-white/15 bg-white/10 text-white backdrop-blur-md",
-  emerald: "bg-emerald-800 text-white",
-  indigo: "bg-indigo-600 text-white",
-  purple: "bg-purple-600 text-white",
-  pink: "bg-pink-600 text-white",
-  rose: "bg-rose-700 text-white",
-  sky: "bg-sky-700 text-white",
-  teal: "bg-teal-700 text-white",
-  yellow: "bg-yellow-800 text-white",
-  orange: "bg-orange-800 text-white",
-  "gradient-blue": "bg-linear-to-r from-blue-600 to-purple-600 text-white",
-  "gradient-green": "bg-linear-to-r from-green-600 to-lime-600 text-white",
-  "gradient-red": "bg-linear-to-r from-red-600 to-pink-600 text-white",
-  "gradient-yellow": "bg-linear-to-r from-yellow-600 to-orange-600 text-white",
-  "gradient-purple": "bg-linear-to-r from-purple-600 to-pink-600 text-white",
-  "gradient-teal": "bg-linear-to-r from-teal-600 to-cyan-600 text-white",
-  "gradient-indigo": "bg-linear-to-r from-indigo-600 to-purple-600 text-white",
-  "gradient-pink": "bg-linear-to-r from-pink-600 to-rose-600 text-white",
-  "gradient-orange": "bg-linear-to-r from-orange-600 to-red-600 text-white",
+  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)]",
+  secondary: "bg-slate-200 dark:bg-slate-800 text-slate-900 dark:text-slate-50",
+  destructive: "bg-rose-500 dark:bg-rose-700 text-slate-900 dark:text-white",
+  outline:
+    "border border-black/10 dark:border-white/10 bg-black/5 dark:bg-white/5 text-slate-900 dark:text-slate-50",
+  ghost: "bg-transparent text-slate-700 dark:text-slate-200",
+  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",
+  emerald: "bg-emerald-500 dark:bg-emerald-800 text-slate-100 dark:text-white",
+  indigo: "bg-indigo-800 dark:bg-indigo-600 text-slate-100 dark:text-white",
+  purple: "bg-purple-800 dark:bg-purple-600 text-slate-100 dark:text-white",
+  pink: "bg-pink-800 dark:bg-pink-600 text-slate-100 dark:text-white",
+  rose: "bg-rose-500 dark:bg-rose-700 text-slate-100 dark:text-white",
+  sky: "bg-sky-500 dark:bg-sky-700 text-slate-100 dark:text-white",
+  teal: "bg-teal-500 dark:bg-teal-700 text-slate-100 dark:text-white",
+  yellow: "bg-yellow-500 dark:bg-yellow-800 text-slate-100 dark:text-white",
+  orange: "bg-orange-500 dark:bg-orange-800 text-slate-100 dark:text-white",
+  "gradient-blue":
+    "bg-linear-to-r from-blue-800 dark:from-blue-600 to-purple-800 dark:to-purple-600 text-slate-100 dark:text-white",
+  "gradient-green":
+    "bg-linear-to-r from-green-800 dark:from-green-600 to-lime-800 dark:to-lime-600 text-slate-100 dark:text-white",
+  "gradient-red":
+    "bg-linear-to-r from-red-800 dark:from-red-600 to-pink-800 dark:to-pink-600 text-slate-100 dark:text-white",
+  "gradient-yellow":
+    "bg-linear-to-r from-yellow-800 dark:from-yellow-600 to-orange-800 dark:to-orange-600 text-slate-100 dark:text-white",
+  "gradient-purple":
+    "bg-linear-to-r from-purple-800 dark:from-purple-600 to-pink-800 dark:to-pink-600 text-slate-100 dark:text-white",
+  "gradient-teal":
+    "bg-linear-to-r from-teal-800 dark:from-teal-600 to-cyan-800 dark:to-cyan-600 text-slate-100 dark:text-white",
+  "gradient-indigo":
+    "bg-linear-to-r from-indigo-800 dark:from-indigo-600 to-purple-800 dark:to-purple-600 text-slate-100 dark:text-white",
+  "gradient-pink":
+    "bg-linear-to-r from-pink-800 dark:from-pink-600 to-rose-800 dark:to-rose-600 text-slate-100 dark:text-white",
+  "gradient-orange":
+    "bg-linear-to-r from-orange-800 dark:from-orange-600 to-red-800 dark:to-red-600 text-slate-100 dark:text-white",
 } as const;
 
 export type ButtonLikeSolidAppearance = keyof typeof buttonLikeSolidAppearances;
 
 const badgeAppearances = {
   ...buttonLikeSolidAppearances,
-  outline: "border border-white/15 bg-transparent text-slate-200 shadow-none",
-  ghost: "bg-transparent text-slate-300 shadow-none",
+  outline:
+    "border border-black/15 dark:border-white/15 bg-transparent text-slate-700 dark:text-slate-200 shadow-none",
+  ghost: "bg-transparent text-slate-600 dark:text-slate-300 shadow-none",
 } as const;
 
 export const badgeVariants = cva(
   [
     "inline-flex max-w-full items-center justify-center gap-1 font-medium",
-    "whitespace-nowrap ring-offset-slate-950 transition-colors",
-    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300 focus-visible:ring-offset-2",
+    "whitespace-nowrap 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",
     "select-none",
   ],
   {
@@ -69,7 +82,7 @@ export const badgeVariants = cva(
 );
 
 export const badgeCloseButtonVariants = cva(
-  "inline-flex shrink-0 items-center justify-center rounded-md p-0.5 text-current opacity-70 transition hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40",
+  "inline-flex shrink-0 items-center justify-center rounded-md p-0.5 text-current transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black/40 dark:focus-visible:ring-white/40",
   {
     variants: {
       size: {