@zentauri-ui/zentauri-components 1.4.62 → 1.4.63

package/src/hooks/useLocalStorage/useLocalStorage.test.ts

@@ -14,27 +14,21 @@ describe("useLocalStorage", () => {
   it("should read existing JSON value on mount", () => {
     const key = `${keyPrefix}-read`;
     localStorage.setItem(key, JSON.stringify({ count: 2 }));
-    const { result } = renderHook(() =>
-      useLocalStorage(key, { count: 0 }),
-    );
+    const { result } = renderHook(() => useLocalStorage(key, { count: 0 }));
     const value = result.current[0];
     expect(value).toEqual({ count: 2 });
   });
 
   it("should fall back to initialValue when key missing", () => {
     const key = `${keyPrefix}-missing`;
-    const { result } = renderHook(() =>
-      useLocalStorage(key, { count: 0 }),
-    );
+    const { result } = renderHook(() => useLocalStorage(key, { count: 0 }));
     const value = result.current[0];
     expect(value).toEqual({ count: 0 });
   });
 
   it("should persist setValue and support functional updates", () => {
     const key = `${keyPrefix}-set`;
-    const { result } = renderHook(() =>
-      useLocalStorage(key, { count: 0 }),
-    );
+    const { result } = renderHook(() => useLocalStorage(key, { count: 0 }));
     act(() => {
       result.current[1]({ count: 5 });
     });
@@ -49,9 +43,7 @@ describe("useLocalStorage", () => {
   it("should remove key and reset to initialValue", () => {
     const key = `${keyPrefix}-remove`;
     localStorage.setItem(key, JSON.stringify({ ok: true }));
-    const { result } = renderHook(() =>
-      useLocalStorage(key, { ok: false }),
-    );
+    const { result } = renderHook(() => useLocalStorage(key, { ok: false }));
     const remove = result.current[2];
     act(() => {
       remove();
@@ -62,9 +54,7 @@ describe("useLocalStorage", () => {
 
   it("should reconcile when storage event fires for same key", () => {
     const key = `${keyPrefix}-storage`;
-    const { result } = renderHook(() =>
-      useLocalStorage(key, { v: 0 }),
-    );
+    const { result } = renderHook(() => useLocalStorage(key, { v: 0 }));
     act(() => {
       window.dispatchEvent(
         new StorageEvent("storage", {
@@ -74,16 +64,14 @@ describe("useLocalStorage", () => {
         }),
       );
     });
-    const value= result.current[0];
+    const value = result.current[0];
     expect(value).toEqual({ v: 99 });
   });
 
   it("should reset to initial when storage event clears key", () => {
     const key = `${keyPrefix}-cleared`;
     localStorage.setItem(key, JSON.stringify({ v: 1 }));
-    const { result } = renderHook(() =>
-      useLocalStorage(key, { v: 0 }),
-    );
+    const { result } = renderHook(() => useLocalStorage(key, { v: 0 }));
     act(() => {
       window.dispatchEvent(
         new StorageEvent("storage", {
@@ -93,7 +81,7 @@ describe("useLocalStorage", () => {
         }),
       );
     });
-    const value= result.current[0];
+    const value = result.current[0];
     expect(value).toEqual({ v: 0 });
   });
 });

package/src/hooks/useLocalStorage/useLocalStorage.ts

@@ -41,15 +41,15 @@ export function useLocalStorage<T>(
   key: string,
   initialValue: T,
 ): UseLocalStorageResult<T> {
-  const [stored, setStored] = useState<T>(() =>
-    readValue(key, initialValue),
-  );
+  const [stored, setStored] = useState<T>(() => readValue(key, initialValue));
 
   const setValue = useCallback(
     (value: T | ((previous: T) => T)) => {
       setStored((previous) => {
         const next =
-          typeof value === "function" ? (value as (p: T) => T)(previous) : value;
+          typeof value === "function"
+            ? (value as (p: T) => T)(previous)
+            : value;
         try {
           if (typeof window !== "undefined") {
             window.localStorage.setItem(key, JSON.stringify(next));

package/src/hooks/useMediaQuery/useMediaQuery.ts

@@ -12,10 +12,7 @@ import { useEffect, useState } from "react";
  * @param defaultValue - Value to use before hydration or when `matchMedia` is unavailable (default `false`).
  * @returns Current `matches` boolean for the query.
  */
-export function useMediaQuery(
-  query: string,
-  defaultValue = false,
-): boolean {
+export function useMediaQuery(query: string, defaultValue = false): boolean {
   const [matches, setMatches] = useState(defaultValue);
 
   useEffect(() => {

package/src/hooks/usePrefersReducedMotion/usePrefersReducedMotion.test.ts

@@ -21,7 +21,9 @@ describe("usePrefersReducedMotion", () => {
         }) as unknown as MediaQueryList,
     );
     const { result } = renderHook(() => usePrefersReducedMotion());
-    expect(matchMediaSpy).toHaveBeenCalledWith("(prefers-reduced-motion: reduce)");
+    expect(matchMediaSpy).toHaveBeenCalledWith(
+      "(prefers-reduced-motion: reduce)",
+    );
     expect(result.current).toBe(true);
   });
 });

package/src/hooks/useResizeObserver/index.ts

@@ -1,4 +1 @@
-export {
-  useResizeObserver,
-  type ElementSize,
-} from "./useResizeObserver";
+export { useResizeObserver, type ElementSize } from "./useResizeObserver";

package/src/hooks/useSessionStorage/useSessionStorage.test.ts

@@ -19,18 +19,14 @@ describe("useSessionStorage", () => {
   it("should apply stored value from sessionStorage after mount", async () => {
     const key = `${keyPrefix}-hydrate`;
     sessionStorage.setItem(key, JSON.stringify("stored"));
-    const { result } = renderHook(() =>
-      useSessionStorage(key, "initial"),
-    );
+    const { result } = renderHook(() => useSessionStorage(key, "initial"));
     await flushEffects();
     expect(result.current[0]).toBe("stored");
   });
 
   it("should persist setValue to sessionStorage", async () => {
     const key = `${keyPrefix}-persist`;
-    const { result } = renderHook(() =>
-      useSessionStorage(key, { n: 0 }),
-    );
+    const { result } = renderHook(() => useSessionStorage(key, { n: 0 }));
     await flushEffects();
     act(() => {
       result.current[1]({ n: 3 });

package/src/hooks/useSessionStorage/useSessionStorage.ts

@@ -47,7 +47,9 @@ export function useSessionStorage<T>(
     (value: T | ((previous: T) => T)) => {
       setStored((previous) => {
         const next =
-          typeof value === "function" ? (value as (p: T) => T)(previous) : value;
+          typeof value === "function"
+            ? (value as (p: T) => T)(previous)
+            : value;
         try {
           if (typeof window !== "undefined") {
             window.sessionStorage.setItem(key, JSON.stringify(next));
@@ -74,7 +76,7 @@ export function useSessionStorage<T>(
 
   useEffect(() => {
     const next = readValue(key, initialValue);
-  
+
     setStored((prev) => {
       return JSON.stringify(prev) === JSON.stringify(next) ? prev : next;
     });

package/src/hooks/useThrottledCallback/useThrottledCallback.ts

@@ -13,9 +13,10 @@ import { useCallback, useEffect, useRef } from "react";
  * @param intervalMs - Minimum milliseconds between invocations.
  * @returns Throttled function with the same call signature as `callback`.
  */
-export function useThrottledCallback<
-  T extends (...args: any[]) => void,
->(callback: T, intervalMs: number): T {
+export function useThrottledCallback<T extends (...args: any[]) => void>(
+  callback: T,
+  intervalMs: number,
+): T {
   const callbackRef = useRef(callback);
   const lastRunRef = useRef(0);
 

package/src/hooks/useWindowSize/useWindowSize.ts

@@ -26,7 +26,10 @@ export function useWindowSize(): WindowSize {
 
   useEffect(() => {
     const onResize = () => {
-      setSize({ width: window.innerWidth || 0, height: window.innerHeight || 0 });
+      setSize({
+        width: window.innerWidth || 0,
+        height: window.innerHeight || 0,
+      });
     };
     onResize();
     window.addEventListener("resize", onResize);

package/src/lib/utils.ts

@@ -10,7 +10,7 @@ export const clampPage = (page: number, pageCount: number): number => {
     return 1;
   }
   return Math.min(pageCount, Math.max(1, Math.floor(page)));
-}
+};
 
 export const range = (from: number, to: number): number[] => {
   const out: number[] = [];
@@ -18,8 +18,8 @@ export const range = (from: number, to: number): number[] => {
     out.push(i);
   }
   return out;
-}
+};
 
 export const clamp = (value: number, min: number, max: number) => {
   return Math.min(max, Math.max(min, value));
-}
+};

package/src/ui/accordion/accordion.tsx

@@ -1,5 +1,10 @@
 // accordion.tsx — default static entry (no framer-motion on content)
-import { AccordionBase, AccordionContent, AccordionItem, AccordionTrigger } from "./accordion-base";
+import {
+  AccordionBase,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "./accordion-base";
 import type { AccordionProps } from "./types";
 
 export function Accordion(props: AccordionProps) {

package/src/ui/accordion/animated/accordion-content-animated.tsx

@@ -16,10 +16,7 @@ export function AccordionContentAnimated({
   ref,
 }: AccordionContentAnimatedProps) {
   const itemValue = useAccordionItemValue("AccordionContent");
-  const {
-    isOpen,
-    size,
-  } = useAccordionContext("AccordionContent");
+  const { isOpen, size } = useAccordionContext("AccordionContent");
   const open = isOpen(itemValue);
   const panelId = `${itemValue}-panel`;
   const transitionConfig = accordionContentTransitionPresets[transitionVariant];

package/src/ui/accordion/animated/index.ts

@@ -3,5 +3,8 @@
 export { Accordion } from "./accordion-root-animated";
 export { AccordionItem, AccordionTrigger } from "../accordion-base";
 export { AccordionContentAnimated } from "./accordion-content-animated";
-export type { AccordionAnimatedProps, AccordionContentAnimatedProps } from "./types";
+export type {
+  AccordionAnimatedProps,
+  AccordionContentAnimatedProps,
+} from "./types";
 export { accordionContentTransitionPresets } from "./animations";

package/src/ui/accordion/animated/types.ts

@@ -1,7 +1,11 @@
-import type { AccordionBaseProps, AccordionContentProps, AccordionTransition } from "../types";
+import type {
+  AccordionBaseProps,
+  AccordionContentProps,
+  AccordionTransition,
+} from "../types";
 
 export type AccordionAnimatedProps = AccordionBaseProps;
 
 export type AccordionContentAnimatedProps = AccordionContentProps & {
   transitionVariant?: AccordionTransition;
-};
+};

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

@@ -9,7 +9,12 @@ import {
 
 import { cn } from "../../lib/utils";
 
-import type { AlertBaseProps, AlertProps, AlertSectionProps, AlertSize } from "./types";
+import type {
+  AlertBaseProps,
+  AlertProps,
+  AlertSectionProps,
+  AlertSize,
+} from "./types";
 import {
   alertDescriptionVariants,
   alertTitleVariants,

package/src/ui/alert/alert.tsx

@@ -4,6 +4,6 @@ import type { AlertProps } from "./types";
 
 export const Alert = (props: AlertProps) => {
   return <AlertBase {...props} />;
-}
+};
 
-Alert.displayName = "Alert";
+Alert.displayName = "Alert";

package/src/ui/alert/animated/index.ts

@@ -1,3 +1,3 @@
 export { AlertAnimated } from "./alert-animated";
-export type { AlertAnimatedProps} from "./types";
-export { alertAnimationPresets } from "./animations";
+export type { AlertAnimatedProps } from "./types";
+export { alertAnimationPresets } from "./animations";

package/src/ui/alert/animated/types.ts

@@ -13,4 +13,4 @@ export type AlertPresetMotionProps = Pick<
 export type AlertAnimationPresets = Record<
   AlertAnimation,
   AlertPresetMotionProps
->;
+>;

package/src/ui/alert/types.ts

@@ -4,7 +4,7 @@ import type { ComponentPropsWithRef, ElementType, ReactNode } from "react";
 import type { alertVariants } from "./variants";
 
 export type AlertAnimation = "none" | "slide-down" | "fade" | "pop";
-export type AlertAppearance = VariantProps<typeof alertVariants>["appearance"]; 
+export type AlertAppearance = VariantProps<typeof alertVariants>["appearance"];
 export type AlertSize = VariantProps<typeof alertVariants>["size"];
 
 export interface AlertBaseProps extends ComponentPropsWithRef<"div"> {
@@ -18,11 +18,9 @@ export interface AlertBaseProps extends ComponentPropsWithRef<"div"> {
   as?: ElementType;
 }
 
-
 export type AlertSectionProps = {
   className?: string;
   children?: ReactNode;
 };
 
 export type AlertProps = Omit<AlertBaseProps, "as">;
-

package/src/ui/alert/variants.ts

@@ -20,23 +20,23 @@ export const alertVariants = cva(
         gray: "border-gray-600 bg-gray-950/70 backdrop-blur-xl",
         violet: "border-violet-600 bg-violet-950/70 backdrop-blur-xl",
         "gradient-blue":
-          "border-gradient-to-r from-blue-600 to-purple-600 bg-gradient-to-r from-blue-950/70 to-purple-950/70 backdrop-blur-xl",
+          "border-gradient-to-r from-blue-600 to-purple-600 bg-linear-to-r from-blue-950/70 to-purple-950/70 backdrop-blur-xl",
         "gradient-green":
-          "border-gradient-to-r from-green-600 to-lime-600 bg-gradient-to-r from-green-950/70 to-lime-950/70 backdrop-blur-xl",
+          "border-gradient-to-r from-green-600 to-lime-600 bg-linear-to-r from-green-950/70 to-lime-950/70 backdrop-blur-xl",
         "gradient-red":
-          "border-gradient-to-r from-red-600 to-pink-600 bg-gradient-to-r from-red-950/70 to-pink-950/70 backdrop-blur-xl",
+          "border-gradient-to-r from-red-600 to-pink-600 bg-linear-to-r from-red-950/70 to-pink-950/70 backdrop-blur-xl",
         "gradient-yellow":
-          "border-gradient-to-r from-yellow-600 to-orange-600 bg-gradient-to-r from-yellow-950/70 to-orange-950/70 backdrop-blur-xl",
+          "border-gradient-to-r from-yellow-600 to-orange-600 bg-linear-to-r from-yellow-950/70 to-orange-950/70 backdrop-blur-xl",
         "gradient-purple":
-          "border-gradient-to-r from-purple-600 to-pink-600 bg-gradient-to-r from-purple-950/70 to-pink-950/70 backdrop-blur-xl",
+          "border-gradient-to-r from-purple-600 to-pink-600 bg-linear-to-r from-purple-950/70 to-pink-950/70 backdrop-blur-xl",
         "gradient-teal":
-          "border-gradient-to-r from-teal-600 to-cyan-600 bg-gradient-to-r from-teal-950/70 to-cyan-950/70 backdrop-blur-xl",
+          "border-gradient-to-r from-teal-600 to-cyan-600 bg-linear-to-r from-teal-950/70 to-cyan-950/70 backdrop-blur-xl",
         "gradient-indigo":
-          "border-gradient-to-r from-indigo-600 to-purple-600 bg-gradient-to-r from-indigo-950/70 to-purple-950/70 backdrop-blur-xl",
+          "border-gradient-to-r from-indigo-600 to-purple-600 bg-linear-to-r from-indigo-950/70 to-purple-950/70 backdrop-blur-xl",
         "gradient-pink":
-          "border-gradient-to-r from-pink-600 to-rose-600 bg-gradient-to-r from-pink-950/70 to-rose-950/70 backdrop-blur-xl",
+          "border-gradient-to-r from-pink-600 to-rose-600 bg-linear-to-r from-pink-950/70 to-rose-950/70 backdrop-blur-xl",
         "gradient-orange":
-          "border-gradient-to-r from-orange-600 to-red-600 bg-gradient-to-r from-orange-950/70 to-red-950/70 backdrop-blur-xl",
+          "border-gradient-to-r from-orange-600 to-red-600 bg-linear-to-r from-orange-950/70 to-red-950/70 backdrop-blur-xl",
       },
       size: {
         sm: "rounded-lg p-3",

package/src/ui/avatar/animated/index.ts

@@ -2,5 +2,9 @@
 
 export { AvatarAnimated } from "./avatar-animated";
 export { AvatarFallback, AvatarGroup, AvatarImage } from "../avatar-base";
-export type { AvatarAnimatedProps, AvatarAnimation, AvatarAnimationPresets } from "./types";
-export { avatarAnimationPresets } from "./animations";
+export type {
+  AvatarAnimatedProps,
+  AvatarAnimation,
+  AvatarAnimationPresets,
+} from "./types";
+export { avatarAnimationPresets } from "./animations";

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

@@ -48,10 +48,7 @@ export function AvatarBase({
   ...rest
 }: AvatarBaseProps) {
   const [imageStatus, setImageStatus] = useState<ImageStatus>("idle");
-  const ctx = useMemo(
-    () => ({ imageStatus, setImageStatus }),
-    [imageStatus],
-  );
+  const ctx = useMemo(() => ({ imageStatus, setImageStatus }), [imageStatus]);
 
   return (
     <AvatarContext.Provider value={ctx}>
@@ -153,9 +150,7 @@ export function AvatarGroup({
   );
   const visible = max !== undefined ? childArray.slice(0, max) : childArray;
   const overflow =
-    max !== undefined && childArray.length > max
-      ? childArray.length - max
-      : 0;
+    max !== undefined && childArray.length > max ? childArray.length - max : 0;
 
   return (
     <div

package/src/ui/avatar/avatar.tsx

@@ -1,5 +1,10 @@
 // avatar.tsx — default static entry (no framer-motion)
-import { AvatarBase, AvatarFallback, AvatarGroup, AvatarImage } from "./avatar-base";
+import {
+  AvatarBase,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarImage,
+} from "./avatar-base";
 import type { AvatarProps } from "./types";
 
 export function Avatar(props: AvatarProps) {

package/src/ui/avatar/variants.ts

@@ -6,7 +6,8 @@ export const avatarVariants = cva(
     variants: {
       appearance: {
         default: "border-white/10 bg-white/10 text-slate-200",
-        muted: "border-black/40 bg-slate-950 dark:border-white/10 dark:bg-slate-950/40 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",
@@ -19,15 +20,24 @@ export const avatarVariants = cva(
         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",
-        "gradient-blue": "bg-linear-to-r from-blue-950/70 to-purple-950/70 backdrop-blur-xl text-slate-200",
-        "gradient-green": "bg-linear-to-r from-green-950/70 to-lime-950/70 backdrop-blur-xl text-slate-200",
-        "gradient-red": "bg-linear-to-r from-red-950/70 to-pink-950/70 backdrop-blur-xl text-slate-200",
-        "gradient-yellow": "bg-linear-to-r from-yellow-950/70 to-orange-950/70 backdrop-blur-xl text-slate-200",
-        "gradient-purple": "bg-linear-to-r from-purple-950/70 to-pink-950/70 backdrop-blur-xl text-slate-200",
-        "gradient-teal": "bg-linear-to-r from-teal-950/70 to-cyan-950/70 backdrop-blur-xl text-slate-200",
-        "gradient-indigo": "bg-linear-to-r from-indigo-950/70 to-purple-950/70 backdrop-blur-xl text-slate-200",
-        "gradient-pink": "bg-linear-to-r from-pink-950/70 to-rose-950/70 backdrop-blur-xl text-slate-200",
-        "gradient-orange": "bg-linear-to-r from-orange-950/70 to-red-950/70 backdrop-blur-xl text-slate-200",
+        "gradient-blue":
+          "bg-linear-to-r from-blue-950/70 to-purple-950/70 backdrop-blur-xl text-slate-200",
+        "gradient-green":
+          "bg-linear-to-r from-green-950/70 to-lime-950/70 backdrop-blur-xl text-slate-200",
+        "gradient-red":
+          "bg-linear-to-r from-red-950/70 to-pink-950/70 backdrop-blur-xl text-slate-200",
+        "gradient-yellow":
+          "bg-linear-to-r from-yellow-950/70 to-orange-950/70 backdrop-blur-xl text-slate-200",
+        "gradient-purple":
+          "bg-linear-to-r from-purple-950/70 to-pink-950/70 backdrop-blur-xl text-slate-200",
+        "gradient-teal":
+          "bg-linear-to-r from-teal-950/70 to-cyan-950/70 backdrop-blur-xl text-slate-200",
+        "gradient-indigo":
+          "bg-linear-to-r from-indigo-950/70 to-purple-950/70 backdrop-blur-xl text-slate-200",
+        "gradient-pink":
+          "bg-linear-to-r from-pink-950/70 to-rose-950/70 backdrop-blur-xl text-slate-200",
+        "gradient-orange":
+          "bg-linear-to-r from-orange-950/70 to-red-950/70 backdrop-blur-xl text-slate-200",
       },
       size: {
         sm: "size-8 text-xs",
@@ -49,4 +59,6 @@ export const avatarFallbackVariants = cva(
   "flex size-full items-center justify-center bg-slate-800 font-medium 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");
+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",
+);

package/src/ui/badge/animated/index.ts

@@ -1,5 +1,9 @@
 "use client";
 
 export { BadgeAnimated } from "./badge-animated";
-export type { BadgeAnimatedProps, BadgeAnimation, BadgeAnimationPresets } from "./types";
-export { badgeAnimationPresets } from "./animations";
+export type {
+  BadgeAnimatedProps,
+  BadgeAnimation,
+  BadgeAnimationPresets,
+} from "./types";
+export { badgeAnimationPresets } from "./animations";

package/src/ui/badge/animated/types.ts

@@ -6,7 +6,6 @@ export type BadgeAnimatedProps = Omit<BadgeBaseProps, "as"> & {
 };
 export type BadgeAnimation = "none" | "pop" | "bounce" | "fade";
 
-
 type BadgePresetMotionProps = Pick<
   HTMLMotionProps<"span">,
   "style" | "transition" | "whileHover" | "whileTap" | "animate" | "initial"
@@ -15,4 +14,4 @@ type BadgePresetMotionProps = Pick<
 export type BadgeAnimationPresets = Record<
   BadgeAnimation,
   BadgePresetMotionProps
->;
+>;

package/src/ui/badge/variants.ts

@@ -20,17 +20,15 @@ export const buttonLikeSolidAppearances = {
   teal: "bg-teal-700 text-white",
   yellow: "bg-yellow-800 text-white",
   orange: "bg-orange-800 text-white",
-  "gradient-blue": "bg-gradient-to-r from-blue-600 to-purple-600 text-white",
-  "gradient-green": "bg-gradient-to-r from-green-600 to-lime-600 text-white",
-  "gradient-red": "bg-gradient-to-r from-red-600 to-pink-600 text-white",
-  "gradient-yellow":
-    "bg-gradient-to-r from-yellow-600 to-orange-600 text-white",
-  "gradient-purple": "bg-gradient-to-r from-purple-600 to-pink-600 text-white",
-  "gradient-teal": "bg-gradient-to-r from-teal-600 to-cyan-600 text-white",
-  "gradient-indigo":
-    "bg-gradient-to-r from-indigo-600 to-purple-600 text-white",
-  "gradient-pink": "bg-gradient-to-r from-pink-600 to-rose-600 text-white",
-  "gradient-orange": "bg-gradient-to-r from-orange-600 to-red-600 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",
 } as const;
 
 export type ButtonLikeSolidAppearance = keyof typeof buttonLikeSolidAppearances;

package/src/ui/breadcrumb/breadcrumb.tsx

@@ -84,7 +84,11 @@ export function BreadcrumbLink({
     <a
       ref={ref}
       data-slot="breadcrumb-link"
-      className={cn(breadcrumbLinkVariants(), breadcrumbNavVariants({ appearance }), className)}
+      className={cn(
+        breadcrumbLinkVariants(),
+        breadcrumbNavVariants({ appearance }),
+        className,
+      )}
       {...rest}
     />
   );
@@ -103,7 +107,11 @@ export function BreadcrumbPage({
       ref={ref}
       data-slot="breadcrumb-page"
       aria-current="page"
-      className={cn(breadcrumbPageVariants(), breadcrumbNavVariants({ appearance }), className)}
+      className={cn(
+        breadcrumbPageVariants(),
+        breadcrumbNavVariants({ appearance }),
+        className,
+      )}
       {...rest}
     />
   );

package/src/ui/breadcrumb/types.ts

@@ -1,7 +1,12 @@
 import type { VariantProps } from "class-variance-authority";
 import type { ComponentPropsWithoutRef, ReactNode, Ref } from "react";
 
-import type { breadcrumbSeparatorVariants, breadcrumbNavVariants, breadcrumbLinkVariants, breadcrumbPageVariants } from "./variants";
+import type {
+  breadcrumbSeparatorVariants,
+  breadcrumbNavVariants,
+  breadcrumbLinkVariants,
+  breadcrumbPageVariants,
+} from "./variants";
 
 export type BreadcrumbProps = ComponentPropsWithoutRef<"nav"> & {
   "aria-label"?: string;
@@ -11,17 +16,23 @@ export type BreadcrumbListProps = ComponentPropsWithoutRef<"ol">;
 
 export type BreadcrumbItemProps = ComponentPropsWithoutRef<"li">;
 
-export type BreadcrumbLinkProps = ComponentPropsWithoutRef<"a"> & VariantProps<typeof breadcrumbLinkVariants> & {
-  appearance?: BreadcrumbAppearance;
-} & { ref?: Ref<HTMLAnchorElement> };
+export type BreadcrumbLinkProps = ComponentPropsWithoutRef<"a"> &
+  VariantProps<typeof breadcrumbLinkVariants> & {
+    appearance?: BreadcrumbAppearance;
+  } & { ref?: Ref<HTMLAnchorElement> };
 
-export type BreadcrumbPageProps = ComponentPropsWithoutRef<"span"> & VariantProps<typeof breadcrumbPageVariants> & {
-  appearance?: BreadcrumbAppearance;
-} & { ref?: Ref<HTMLSpanElement> };
+export type BreadcrumbPageProps = ComponentPropsWithoutRef<"span"> &
+  VariantProps<typeof breadcrumbPageVariants> & {
+    appearance?: BreadcrumbAppearance;
+  } & { ref?: Ref<HTMLSpanElement> };
 
-export type SeparatorVariantProps = VariantProps<typeof breadcrumbSeparatorVariants>;
+export type SeparatorVariantProps = VariantProps<
+  typeof breadcrumbSeparatorVariants
+>;
 
-export type BreadcrumbAppearance = NonNullable<VariantProps<typeof breadcrumbNavVariants>["appearance"]>;
+export type BreadcrumbAppearance = NonNullable<
+  VariantProps<typeof breadcrumbNavVariants>["appearance"]
+>;
 
 export type BreadcrumbSeparatorProps = ComponentPropsWithoutRef<"span"> &
   SeparatorVariantProps & {