@zentauri-ui/zentauri-components 1.4.62 → 1.4.64

package/src/ui/select/variants.ts

@@ -19,23 +19,23 @@ export const selectTriggerVariants = cva(
         emerald: "border-emerald-600 text-emerald-600",
         glass: "border-white/15 bg-white/10 text-white backdrop-blur-md",
         "gradient-blue":
-          "bg-linear-to-r from-blue-600 to-purple-600 bg-gradient-to-r from-blue-950/70 to-purple-950/70 backdrop-blur-xl text-white",
+          "bg-linear-to-r from-blue-600 to-purple-600 backdrop-blur-xl text-white",
         "gradient-green":
-          "bg-linear-to-r from-green-600 to-lime-600 bg-gradient-to-r from-green-950/70 to-lime-950/70 backdrop-blur-xl text-white",
+          "bg-linear-to-r from-green-600 to-lime-600 backdrop-blur-xl text-white",
         "gradient-red":
-          "bg-linear-to-r from-red-600 to-pink-600 bg-gradient-to-r from-red-950/70 to-pink-950/70 backdrop-blur-xl text-white",
+          "bg-linear-to-r from-red-600 to-pink-600 backdrop-blur-xl text-white",
         "gradient-yellow":
-          "bg-linear-to-r from-yellow-600 to-orange-600 bg-gradient-to-r from-yellow-950/70 to-orange-950/70 backdrop-blur-xl text-white",
+          "bg-linear-to-r from-yellow-600 to-orange-600 backdrop-blur-xl text-white",
         "gradient-purple":
-          "bg-linear-to-r from-purple-600 to-pink-600 bg-gradient-to-r from-purple-950/70 to-pink-950/70 backdrop-blur-xl text-white",
+          "bg-linear-to-r from-purple-600 to-pink-600 backdrop-blur-xl text-white",
         "gradient-teal":
-          "bg-linear-to-r from-teal-600 to-cyan-600 bg-gradient-to-r from-teal-950/70 to-cyan-950/70 backdrop-blur-xl text-white",
+          "bg-linear-to-r from-teal-600 to-cyan-600 backdrop-blur-xl text-white",
         "gradient-indigo":
-          "bg-linear-to-r from-indigo-600 to-purple-600 bg-gradient-to-r from-indigo-950/70 to-purple-950/70 backdrop-blur-xl text-white",
+          "bg-linear-to-r from-indigo-600 to-purple-600 backdrop-blur-xl text-white",
         "gradient-pink":
-          "bg-linear-to-r from-pink-600 to-rose-600 bg-gradient-to-r from-pink-950/70 to-rose-950/70 backdrop-blur-xl text-white",
+          "bg-linear-to-r from-pink-600 to-rose-600 backdrop-blur-xl text-white",
         "gradient-orange":
-          "bg-linear-to-r from-orange-600 to-red-600 bg-gradient-to-r from-orange-950/70 to-red-950/70 backdrop-blur-xl text-white",
+          "bg-linear-to-r from-orange-600 to-red-600 backdrop-blur-xl text-white",
       },
       size: {
         sm: "px-2 py-1 text-sm",
@@ -54,56 +54,57 @@ export const selectItemVariants = cva(
   "cursor-pointer px-3 py-2 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 focus-visible:ring-inset",
   {
     variants: {
-    appearance: {
-      default:
-        "bg-white text-gray-900 data-[selected=true]:bg-gray-200 data-[selected=true]:text-gray-900",
-      glass:
-        "bg-white/10 text-gray-100 data-[selected=true]:bg-white/10 data-[selected=true]:text-gray-100",
-      outline:
-        "border-2 border-gray-500 text-gray-900 data-[selected=true]:border-2 data-[selected=true]:border-gray-500 data-[selected=true]:bg-gray-200 data-[selected=true]:text-gray-900",
-      ghost:
-        "border-transparent text-gray-900 data-[selected=true]:border-transparent data-[selected=true]:bg-transparent data-[selected=true]:text-gray-900",
-      sky: "border-sky-600 text-sky-800 data-[selected=true]:border-sky-600 data-[selected=true]:bg-sky-200 data-[selected=true]:text-sky-800",
-      rose: "border-rose-600 text-rose-800 data-[selected=true]:border-rose-600 data-[selected=true]:bg-rose-200 data-[selected=true]:text-rose-800",
-      purple:
-        "border-purple-600 text-purple-800 data-[selected=true]:border-purple-600 data-[selected=true]:bg-purple-200 data-[selected=true]:text-purple-800",
-      pink: "border-pink-600 text-pink-800 data-[selected=true]:border-pink-600 data-[selected=true]:bg-pink-200 data-[selected=true]:text-pink-800",
-      orange:
-        "border-orange-600 text-orange-800 data-[selected=true]:border-orange-600 data-[selected=true]:bg-orange-200 data-[selected=true]:text-orange-800",
-      yellow:
-        "border-yellow-600 text-yellow-800 data-[selected=true]:border-yellow-600 data-[selected=true]:bg-yellow-200 data-[selected=true]:text-yellow-800",
-      teal: "border-teal-600 text-teal-800 data-[selected=true]:border-teal-600 data-[selected=true]:bg-teal-200 data-[selected=true]:text-teal-800",
-      indigo:
-        "border-indigo-600 text-indigo-800 data-[selected=true]:border-indigo-600 data-[selected=true]:bg-indigo-200 data-[selected=true]:text-indigo-800",
-      emerald:
-        "border-emerald-600 text-emerald-800 data-[selected=true]:border-emerald-600 data-[selected=true]:bg-emerald-200 data-[selected=true]:text-emerald-800",
-      "gradient-blue":
-        "bg-gradient-to-r from-blue-600 to-purple-600 bg-gradient-to-r from-blue-950/70 to-purple-950/70 backdrop-blur-xl text-blue-50 data-[selected=true]:bg-gradient-to-r from-blue-600 to-purple-600 bg-gradient-to-r from-blue-950/70 to-purple-950/70 backdrop-blur-xl data-[selected=true]:text-blue-100",
-      "gradient-green":
-        "bg-gradient-to-r from-green-600 to-lime-600 bg-gradient-to-r from-green-950/70 to-lime-950/70 backdrop-blur-xl text-green-50 data-[selected=true]:bg-gradient-to-r from-green-600 to-lime-600 bg-gradient-to-r from-green-950/70 to-lime-950/70 backdrop-blur-xl data-[selected=true]:text-green-100",
-      "gradient-red":
-        "bg-gradient-to-r from-red-600 to-pink-600 bg-gradient-to-r from-red-950/70 to-pink-950/70 backdrop-blur-xl text-red-50 data-[selected=true]:bg-gradient-to-r from-red-600 to-pink-600 bg-gradient-to-r from-red-950/70 to-pink-950/70 backdrop-blur-xl data-[selected=true]:text-red-100",
-      "gradient-yellow":
-        "bg-gradient-to-r from-yellow-600 to-orange-600 bg-gradient-to-r from-yellow-950/70 to-orange-950/70 backdrop-blur-xl text-yellow-50 data-[selected=true]:bg-gradient-to-r from-yellow-600 to-orange-600 bg-gradient-to-r from-yellow-950/70 to-orange-950/70 backdrop-blur-xl data-[selected=true]:text-yellow-100",
-      "gradient-purple":
-        "bg-gradient-to-r from-purple-600 to-pink-600 bg-gradient-to-r from-purple-950/70 to-pink-950/70 backdrop-blur-xl text-purple-50 data-[selected=true]:bg-gradient-to-r from-purple-600 to-pink-600 bg-gradient-to-r from-purple-950/70 to-pink-950/70 backdrop-blur-xl data-[selected=true]:text-purple-100",
-      "gradient-teal":
-        "bg-gradient-to-r from-teal-600 to-cyan-600 bg-gradient-to-r from-teal-950/70 to-cyan-950/70 backdrop-blur-xl text-teal-50 data-[selected=true]:bg-gradient-to-r from-teal-600 to-cyan-600 bg-gradient-to-r from-teal-950/70 to-cyan-950/70 backdrop-blur-xl data-[selected=true]:text-teal-100",
-      "gradient-indigo":
-        "bg-gradient-to-r from-indigo-600 to-purple-600 bg-gradient-to-r from-indigo-950/70 to-purple-950/70 backdrop-blur-xl text-indigo-50 data-[selected=true]:bg-gradient-to-r from-indigo-600 to-purple-600 bg-gradient-to-r from-indigo-950/70 to-purple-950/70 backdrop-blur-xl data-[selected=true]:text-indigo-100",
-      "gradient-pink":
-        "bg-gradient-to-r from-pink-600 to-rose-600 bg-gradient-to-r from-pink-950/70 to-rose-950/70 backdrop-blur-xl text-pink-50 data-[selected=true]:bg-gradient-to-r from-pink-600 to-rose-600 bg-gradient-to-r from-pink-950/70 to-rose-950/70 backdrop-blur-xl data-[selected=true]:text-pink-100",
-      "gradient-orange":
-        "bg-gradient-to-r from-orange-600 to-red-600 bg-gradient-to-r from-orange-950/70 to-red-950/70 backdrop-blur-xl text-orange-50 data-[selected=true]:bg-gradient-to-r from-orange-600 to-red-600 bg-gradient-to-r from-orange-950/70 to-red-950/70 backdrop-blur-xl data-[selected=true]:text-orange-100",
+      appearance: {
+        default:
+          "bg-white text-gray-900 data-[selected=true]:bg-gray-200 data-[selected=true]:text-gray-900",
+        glass:
+          "bg-white/10 text-gray-100 data-[selected=true]:bg-white/10 data-[selected=true]:text-gray-100",
+        outline:
+          "border-2 border-gray-500 text-gray-900 data-[selected=true]:border-2 data-[selected=true]:border-gray-500 data-[selected=true]:bg-gray-200 data-[selected=true]:text-gray-900",
+        ghost:
+          "border-transparent text-gray-900 data-[selected=true]:border-transparent data-[selected=true]:bg-transparent data-[selected=true]:text-gray-900",
+        sky: "border-sky-600 text-sky-800 data-[selected=true]:border-sky-600 data-[selected=true]:bg-sky-200 data-[selected=true]:text-sky-800",
+        rose: "border-rose-600 text-rose-800 data-[selected=true]:border-rose-600 data-[selected=true]:bg-rose-200 data-[selected=true]:text-rose-800",
+        purple:
+          "border-purple-600 text-purple-800 data-[selected=true]:border-purple-600 data-[selected=true]:bg-purple-200 data-[selected=true]:text-purple-800",
+        pink: "border-pink-600 text-pink-800 data-[selected=true]:border-pink-600 data-[selected=true]:bg-pink-200 data-[selected=true]:text-pink-800",
+        orange:
+          "border-orange-600 text-orange-800 data-[selected=true]:border-orange-600 data-[selected=true]:bg-orange-200 data-[selected=true]:text-orange-800",
+        yellow:
+          "border-yellow-600 text-yellow-800 data-[selected=true]:border-yellow-600 data-[selected=true]:bg-yellow-200 data-[selected=true]:text-yellow-800",
+        teal: "border-teal-600 text-teal-800 data-[selected=true]:border-teal-600 data-[selected=true]:bg-teal-200 data-[selected=true]:text-teal-800",
+        indigo:
+          "border-indigo-600 text-indigo-800 data-[selected=true]:border-indigo-600 data-[selected=true]:bg-indigo-200 data-[selected=true]:text-indigo-800",
+        emerald:
+          "border-emerald-600 text-emerald-800 data-[selected=true]:border-emerald-600 data-[selected=true]:bg-emerald-200 data-[selected=true]:text-emerald-800",
+        "gradient-blue":
+          "bg-linear-to-r from-blue-950/70 to-purple-950/70 backdrop-blur-xl text-blue-50 data-[selected=true]:bg-linear-to-r data-[selected=true]:from-blue-600 data-[selected=true]:to-purple-600 data-[selected=true]:text-blue-100",
+        "gradient-green":
+          "bg-linear-to-r from-green-950/70 to-lime-950/70 backdrop-blur-xl text-green-50 data-[selected=true]:bg-linear-to-r data-[selected=true]:from-green-600 data-[selected=true]:to-lime-600 data-[selected=true]:text-green-100",
+        "gradient-red":
+          "bg-linear-to-r from-red-950/70 to-pink-950/70 backdrop-blur-xl text-red-50 data-[selected=true]:bg-linear-to-r data-[selected=true]:from-red-600 data-[selected=true]:to-pink-600 data-[selected=true]:text-red-100",
+        "gradient-yellow":
+          "bg-linear-to-r from-yellow-950/70 to-orange-950/70 backdrop-blur-xl text-yellow-50 data-[selected=true]:bg-linear-to-r data-[selected=true]:from-yellow-600 data-[selected=true]:to-orange-600 data-[selected=true]:text-yellow-100",
+        "gradient-purple":
+          "bg-linear-to-r from-purple-950/70 to-pink-950/70 backdrop-blur-xl text-purple-50 data-[selected=true]:bg-linear-to-r data-[selected=true]:from-purple-600 data-[selected=true]:to-pink-600 data-[selected=true]:text-purple-100",
+        "gradient-teal":
+          "bg-linear-to-r from-teal-950/70 to-cyan-950/70 backdrop-blur-xl text-teal-50 data-[selected=true]:bg-linear-to-r data-[selected=true]:from-teal-600 data-[selected=true]:to-cyan-600 data-[selected=true]:text-teal-100",
+        "gradient-indigo":
+          "bg-linear-to-r from-indigo-950/70 to-purple-950/70 backdrop-blur-xl text-indigo-50 data-[selected=true]:bg-linear-to-r data-[selected=true]:from-indigo-600 data-[selected=true]:to-purple-600 data-[selected=true]:text-indigo-100",
+        "gradient-pink":
+          "bg-linear-to-r from-pink-950/70 to-rose-950/70 backdrop-blur-xl text-pink-50 data-[selected=true]:bg-linear-to-r data-[selected=true]:from-pink-600 data-[selected=true]:to-rose-600 data-[selected=true]:text-pink-100",
+        "gradient-orange":
+          "bg-linear-to-r from-orange-950/70 to-red-950/70 backdrop-blur-xl text-orange-50 data-[selected=true]:bg-linear-to-r data-[selected=true]:from-orange-600 data-[selected=true]:to-red-600 data-[selected=true]:text-orange-100",
+      },
+      disabled: {
+        true: "opacity-50 cursor-not-allowed",
+      },
     },
-    disabled: {
-      true: "opacity-50 cursor-not-allowed",
+    defaultVariants: {
+      appearance: "default",
     },
   },
-  defaultVariants: {
-    appearance: "default",
-  },
-});
+);
 
 export const selectContentVariants = cva(
   "absolute z-10 mt-2 w-full rounded-md border bg-white shadow-md",
@@ -124,23 +125,23 @@ export const selectContentVariants = cva(
         indigo: "border-indigo-600",
         emerald: "border-emerald-600",
         "gradient-blue":
-          "bg-gradient-to-r from-blue-600 to-purple-600 bg-gradient-to-r from-blue-950/70 to-purple-950/70 backdrop-blur-xl",
+          "bg-linear-to-r from-blue-600 to-purple-600 backdrop-blur-xl",
         "gradient-green":
-          "bg-gradient-to-r from-green-600 to-lime-600 bg-gradient-to-r from-green-950/70 to-lime-950/70 backdrop-blur-xl",
+          "bg-linear-to-r from-green-600 to-lime-600 backdrop-blur-xl",
         "gradient-red":
-          "bg-gradient-to-r from-red-600 to-pink-600 bg-gradient-to-r from-red-950/70 to-pink-950/70 backdrop-blur-xl",
+          "bg-linear-to-r from-red-600 to-pink-600 backdrop-blur-xl",
         "gradient-yellow":
-          "bg-gradient-to-r from-yellow-600 to-orange-600 bg-gradient-to-r from-yellow-950/70 to-orange-950/70 backdrop-blur-xl",
+          "bg-linear-to-r from-yellow-600 to-orange-600 backdrop-blur-xl",
         "gradient-purple":
-          "bg-gradient-to-r from-purple-600 to-pink-600 bg-gradient-to-r from-purple-950/70 to-pink-950/70 backdrop-blur-xl",
+          "bg-linear-to-r from-purple-600 to-pink-600 backdrop-blur-xl",
         "gradient-teal":
-          "bg-gradient-to-r from-teal-600 to-cyan-600 bg-gradient-to-r from-teal-950/70 to-cyan-950/70 backdrop-blur-xl",
+          "bg-linear-to-r from-teal-600 to-cyan-600 backdrop-blur-xl",
         "gradient-indigo":
-          "bg-gradient-to-r from-indigo-600 to-purple-600 bg-gradient-to-r from-indigo-950/70 to-purple-950/70 backdrop-blur-xl",
+          "bg-linear-to-r from-indigo-600 to-purple-600 backdrop-blur-xl",
         "gradient-pink":
-          "bg-gradient-to-r from-pink-600 to-rose-600 bg-gradient-to-r from-pink-950/70 to-rose-950/70 backdrop-blur-xl",
+          "bg-linear-to-r from-pink-600 to-rose-600 backdrop-blur-xl",
         "gradient-orange":
-          "bg-gradient-to-r from-orange-600 to-red-600 bg-gradient-to-r from-orange-950/70 to-red-950/70 backdrop-blur-xl",
+          "bg-linear-to-r from-orange-600 to-red-600 backdrop-blur-xl",
       },
       size: {
         sm: "px-2 py-1 text-sm",

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

@@ -35,7 +35,14 @@ export function SkeletonTextAnimated(props: SkeletonTextAnimatedProps) {
   const effectiveAnimation = useSkeletonAnimation(animation);
   const motionProps = skeletonAnimationPresets[effectiveAnimation];
 
-  return <SkeletonTextBase {...props} as={motion.div} initial={false} {...motionProps} />;
+  return (
+    <SkeletonTextBase
+      {...props}
+      as={motion.div}
+      initial={false}
+      {...motionProps}
+    />
+  );
 }
 
 SkeletonTextAnimated.displayName = "SkeletonText";
@@ -44,7 +51,14 @@ export function SkeletonAvatarAnimated(props: SkeletonAvatarAnimatedProps) {
   const { animation = "shimmer" } = props;
   const effectiveAnimation = useSkeletonAnimation(animation);
   const motionProps = skeletonAnimationPresets[effectiveAnimation];
-  return <SkeletonAvatarBase {...props} as={motion.div} initial={false} {...motionProps} />;
+  return (
+    <SkeletonAvatarBase
+      {...props}
+      as={motion.div}
+      initial={false}
+      {...motionProps}
+    />
+  );
 }
 
 SkeletonAvatarAnimated.displayName = "SkeletonAvatar";
@@ -113,7 +127,14 @@ export function SkeletonButtonAnimated(props: SkeletonButtonAnimatedProps) {
   const { animation = "shimmer" } = props;
   const effectiveAnimation = useSkeletonAnimation(animation);
   const motionProps = skeletonAnimationPresets[effectiveAnimation];
-  return <SkeletonButtonBase {...props} as={motion.div} initial={false} {...motionProps} />;
+  return (
+    <SkeletonButtonBase
+      {...props}
+      as={motion.div}
+      initial={false}
+      {...motionProps}
+    />
+  );
 }
 
-SkeletonButtonAnimated.displayName = "SkeletonButton";
+SkeletonButtonAnimated.displayName = "SkeletonButton";

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

@@ -17,7 +17,6 @@ export type SkeletonAnimationPresets = Record<
   SkeletonPresetMotionProps
 >;
 
-
 export type SkeletonAnimatedProps = SkeletonVariantProps &
   Omit<HTMLMotionProps<"div">, "children"> & {
     animation?: SkeletonAnimation;

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

@@ -43,7 +43,7 @@ export function SkeletonBase(props: SkeletonProps) {
     busy,
     children,
     ref,
-    as:Wrapper = "div",
+    as: Wrapper = "div",
     ...rest
   } = props;
   const ctx = useMemo(() => animation, [animation]);
@@ -87,7 +87,7 @@ export function SkeletonTextBase(props: SkeletonTextProps) {
     shimmerTone,
     busy,
     ref,
-    as:Wrapper = "div",
+    as: Wrapper = "div",
   } = props;
   const effectiveAnimation = useSkeletonAnimation(animation);
   const motionClass = skeletonMotionClass(effectiveAnimation);
@@ -146,7 +146,7 @@ export function SkeletonAvatarBase(props: SkeletonAvatarProps) {
     shimmerTone,
     busy,
     ref,
-    as:Wrapper = "div",
+    as: Wrapper = "div",
     ...rest
   } = props;
   const effectiveAnimation = useSkeletonAnimation(animation ?? "shimmer");

package/src/ui/skeleton/variants.ts

@@ -52,15 +52,15 @@ export const skeletonVariants = cva(
         gray: "bg-gray-500/10",
         amber: "bg-amber-500/10",
         violet: "bg-violet-500/10",
-        "gradient-blue": "bg-gradient-to-r from-blue-600 to-purple-600",
-        "gradient-green": "bg-gradient-to-r from-green-600 to-lime-600",
-        "gradient-red": "bg-gradient-to-r from-red-600 to-pink-600",
-        "gradient-yellow": "bg-gradient-to-r from-yellow-600 to-orange-600",
-        "gradient-purple": "bg-gradient-to-r from-purple-600 to-pink-600",
-        "gradient-teal": "bg-gradient-to-r from-teal-600 to-cyan-600",
-        "gradient-indigo": "bg-gradient-to-r from-indigo-600 to-purple-600",
-        "gradient-pink": "bg-gradient-to-r from-pink-600 to-rose-600",
-        "gradient-orange": "bg-gradient-to-r from-orange-600 to-red-600",
+        "gradient-blue": "bg-linear-to-r from-blue-600 to-purple-600",
+        "gradient-green": "bg-linear-to-r from-green-600 to-lime-600",
+        "gradient-red": "bg-linear-to-r from-red-600 to-pink-600",
+        "gradient-yellow": "bg-linear-to-r from-yellow-600 to-orange-600",
+        "gradient-purple": "bg-linear-to-r from-purple-600 to-pink-600",
+        "gradient-teal": "bg-linear-to-r from-teal-600 to-cyan-600",
+        "gradient-indigo": "bg-linear-to-r from-indigo-600 to-purple-600",
+        "gradient-pink": "bg-linear-to-r from-pink-600 to-rose-600",
+        "gradient-orange": "bg-linear-to-r from-orange-600 to-red-600",
       },
       size: {
         sm: "min-h-3",

package/src/ui/slider/slider.test.tsx

@@ -78,19 +78,12 @@ describe("Slider", () => {
 
 describe("RangeSlider", () => {
   it("should stamp data-slot on range slider", () => {
-    render(
-      <RangeSlider
-        aria-label="Budget"
-        defaultValue={[20, 80]}
-      />,
-    );
+    render(<RangeSlider aria-label="Budget" defaultValue={[20, 80]} />);
     expect(document.querySelector('[data-slot="range-slider"]')).toBeTruthy();
   });
 
   it("should render two slider thumbs", () => {
-    render(
-      <RangeSlider defaultValue={[10, 90]} aria-label="Range" />,
-    );
+    render(<RangeSlider defaultValue={[10, 90]} aria-label="Range" />);
     expect(screen.getAllByRole("slider")).toHaveLength(2);
   });
 
@@ -105,10 +98,7 @@ describe("RangeSlider", () => {
     render(
       <>
         <span id="range-lbl">Volume band</span>
-        <RangeSlider
-          defaultValue={[10, 90]}
-          aria-labelledby="range-lbl"
-        />
+        <RangeSlider defaultValue={[10, 90]} aria-labelledby="range-lbl" />
       </>,
     );
     const thumbs = screen.getAllByRole("slider");

package/src/ui/slider/types.ts

@@ -69,4 +69,4 @@ export type SliderCtx = {
   "aria-label"?: string;
   /** Mirrored from `<Slider>` so the focusable thumb exposes an accessible name. */
   "aria-labelledby"?: string;
-};
+};

package/src/ui/slider/variants.ts

@@ -30,7 +30,7 @@ export const sliderTrackVariants = cva(
 );
 
 export const sliderRangeVariants = cva(
-  "absolute h-full rounded-full bg-gradient-to-r from-violet-500 to-indigo-400",
+  "absolute h-full rounded-full bg-linear-to-r from-violet-500 to-indigo-400",
   {
     variants: {
       appearance: {

package/src/ui/spinner/animated/spinner.tsx

@@ -112,9 +112,8 @@ export function Spinner(props: SpinnerProps) {
     xl: "w-2",
   };
 
-  const barWidth =
-    barWidths[size as keyof typeof barWidths];
-    
+  const barWidth = barWidths[size as keyof typeof barWidths];
+
   return (
     <motion.span
       ref={ref}

package/src/ui/stepper/stepper.test.tsx

@@ -31,9 +31,9 @@ describe("Stepper", () => {
     const root = document.querySelector('[data-slot="stepper"]');
     expect(root).toBeTruthy();
     expect(root?.tagName).toBe("OL");
-    expect(
-      document.querySelector('[data-slot="stepper-item"]')?.tagName,
-    ).toBe("LI");
+    expect(document.querySelector('[data-slot="stepper-item"]')?.tagName).toBe(
+      "LI",
+    );
   });
 
   it("should apply default upcoming appearance to indicators", () => {

package/src/ui/stepper/stepper.tsx

@@ -24,7 +24,6 @@ import {
   stepperVariants,
 } from "./variants";
 
-
 const StepperContext = createContext<StepperCtx | null>(null);
 
 function useStepper(component: string): StepperCtx {
@@ -45,7 +44,6 @@ function useStepperIndex(component: string): number {
   return index;
 }
 
-
 export function Stepper({
   className,
   orientation = "horizontal",
@@ -144,10 +142,7 @@ export function StepperTitle({
     <div
       ref={ref}
       data-slot="stepper-title"
-      className={cn(
-        "mt-3 text-sm font-semibold",
-        className,
-      )}
+      className={cn("mt-3 text-sm font-semibold", className)}
       {...rest}
     />
   );

package/src/ui/stepper/types.ts

@@ -27,10 +27,12 @@ export type StepperTitleProps = ComponentPropsWithoutRef<"div">;
 
 export type StepperDescriptionProps = ComponentPropsWithoutRef<"p">;
 
-export type StepperAppearance = VariantProps<typeof stepperIndicatorVariants>["appearance"];
+export type StepperAppearance = VariantProps<
+  typeof stepperIndicatorVariants
+>["appearance"];
 
 export type StepperCtx = {
   orientation: NonNullable<StepperProps["orientation"]>;
   size: NonNullable<StepperProps["size"]>;
   total: number;
-};
+};

package/src/ui/stepper/variants.ts

@@ -36,24 +36,39 @@ export const stepperIndicatorVariants = cva(
         upcoming: "border-white/15 bg-white/5 text-slate-400",
         sky: "border-sky-500/60 bg-sky-500/20 text-sky-100 ring-2 ring-sky-400/30",
         rose: "border-rose-500/60 bg-rose-500/20 text-rose-100 ring-2 ring-rose-400/30",
-        purple: "border-purple-500/60 bg-purple-500/20 text-purple-100 ring-2 ring-purple-400/30",
+        purple:
+          "border-purple-500/60 bg-purple-500/20 text-purple-100 ring-2 ring-purple-400/30",
         pink: "border-pink-500/60 bg-pink-500/20 text-pink-100 ring-2 ring-pink-400/30",
-        orange: "border-orange-500/60 bg-orange-500/20 text-orange-100 ring-2 ring-orange-400/30",
-        yellow: "border-yellow-500/60 bg-yellow-500/20 text-yellow-100 ring-2 ring-yellow-400/30",
+        orange:
+          "border-orange-500/60 bg-orange-500/20 text-orange-100 ring-2 ring-orange-400/30",
+        yellow:
+          "border-yellow-500/60 bg-yellow-500/20 text-yellow-100 ring-2 ring-yellow-400/30",
         teal: "border-teal-500/60 bg-teal-500/20 text-teal-100 ring-2 ring-teal-400/30",
-        indigo: "border-indigo-500/60 bg-indigo-500/20 text-indigo-100 ring-2 ring-indigo-400/30",
-        emerald: "border-emerald-500/60 bg-emerald-500/20 text-emerald-100 ring-2 ring-emerald-400/30",
+        indigo:
+          "border-indigo-500/60 bg-indigo-500/20 text-indigo-100 ring-2 ring-indigo-400/30",
+        emerald:
+          "border-emerald-500/60 bg-emerald-500/20 text-emerald-100 ring-2 ring-emerald-400/30",
         gray: "border-gray-500/60 bg-gray-500/20 text-gray-100 ring-2 ring-gray-400/30",
-        violet: "border-violet-500/60 bg-violet-500/20 text-violet-100 ring-2 ring-violet-400/30",
-        "gradient-blue": "border-blue-500/60 bg-blue-500/20 text-blue-100 ring-2 ring-blue-400/30",
-        "gradient-green": "border-green-500/60 bg-green-500/20 text-green-100 ring-2 ring-green-400/30",
-        "gradient-red": "border-red-500/60 bg-red-500/20 text-red-100 ring-2 ring-red-400/30",
-        "gradient-yellow": "border-yellow-500/60 bg-yellow-500/20 text-yellow-100 ring-2 ring-yellow-400/30",
-        "gradient-purple": "border-purple-500/60 bg-purple-500/20 text-purple-100 ring-2 ring-purple-400/30",
-        "gradient-teal": "border-teal-500/60 bg-teal-500/20 text-teal-100 ring-2 ring-teal-400/30",
-        "gradient-indigo": "border-indigo-500/60 bg-indigo-500/20 text-indigo-100 ring-2 ring-indigo-400/30",
-        "gradient-pink": "border-pink-500/60 bg-pink-500/20 text-pink-100 ring-2 ring-pink-400/30",
-        "gradient-orange": "border-orange-500/60 bg-orange-500/20 text-orange-100 ring-2 ring-orange-400/30",
+        violet:
+          "border-violet-500/60 bg-violet-500/20 text-violet-100 ring-2 ring-violet-400/30",
+        "gradient-blue":
+          "border-blue-500/60 bg-blue-500/20 text-blue-100 ring-2 ring-blue-400/30",
+        "gradient-green":
+          "border-green-500/60 bg-green-500/20 text-green-100 ring-2 ring-green-400/30",
+        "gradient-red":
+          "border-red-500/60 bg-red-500/20 text-red-100 ring-2 ring-red-400/30",
+        "gradient-yellow":
+          "border-yellow-500/60 bg-yellow-500/20 text-yellow-100 ring-2 ring-yellow-400/30",
+        "gradient-purple":
+          "border-purple-500/60 bg-purple-500/20 text-purple-100 ring-2 ring-purple-400/30",
+        "gradient-teal":
+          "border-teal-500/60 bg-teal-500/20 text-teal-100 ring-2 ring-teal-400/30",
+        "gradient-indigo":
+          "border-indigo-500/60 bg-indigo-500/20 text-indigo-100 ring-2 ring-indigo-400/30",
+        "gradient-pink":
+          "border-pink-500/60 bg-pink-500/20 text-pink-100 ring-2 ring-pink-400/30",
+        "gradient-orange":
+          "border-orange-500/60 bg-orange-500/20 text-orange-100 ring-2 ring-orange-400/30",
       },
       size: {
         sm: "size-8 text-xs",

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

@@ -9,7 +9,9 @@ export {
   TableHeader,
 } from "../table-base";
 export { TableRowAnimated } from "./table-animated";
-export type { TableAnimatedProps, TableRowAnimationPresets, TableRowPresetMotionProps } from "./types";
-export {
-  tableAnimationPresets,
-} from "./animations";
+export type {
+  TableAnimatedProps,
+  TableRowAnimationPresets,
+  TableRowPresetMotionProps,
+} from "./types";
+export { tableAnimationPresets } from "./animations";

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

@@ -196,12 +196,7 @@ export function TableCell({
   }
 
   return (
-    <td
-      ref={ref}
-      data-slot="table-cell"
-      className={cellClassName}
-      {...rest}
-    >
+    <td ref={ref} data-slot="table-cell" className={cellClassName} {...rest}>
       {children}
     </td>
   );

package/src/ui/tabs/animated/animations.ts

@@ -1,4 +1,8 @@
-import type { TabsAnimationPresets, TabsOrientation, TabsPresetMotionProps } from "./types";
+import type {
+  TabsAnimationPresets,
+  TabsOrientation,
+  TabsPresetMotionProps,
+} from "./types";
 import type { TabsAnimation } from "./types";
 
 const easeOutExpo: [number, number, number, number] = [0.16, 1, 0.3, 1];

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

@@ -1,7 +1,13 @@
 "use client";
 
 export { TabsContentAnimated } from "./tabs-content-animated";
-export type { TabsContentAnimatedProps, TabsAnimation, TabsAnimationPresets, TabsOrientation, TabsPresetMotionProps } from "./types";
+export type {
+  TabsContentAnimatedProps,
+  TabsAnimation,
+  TabsAnimationPresets,
+  TabsOrientation,
+  TabsPresetMotionProps,
+} from "./types";
 export {
   getTabsContentMotionProps,
   tabsContentAnimationPresets,

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

@@ -6,10 +6,10 @@ export type TabsAnimation = "none" | "fade" | "slide";
 
 export type TabsPresetMotionProps = Pick<
   HTMLMotionProps<"div">,
-    "initial" | "animate" | "transition"
-  >;
+  "initial" | "animate" | "transition"
+>;
 
-  export type TabsAnimationPresets = Record<TabsAnimation, TabsPresetMotionProps>;
+export type TabsAnimationPresets = Record<TabsAnimation, TabsPresetMotionProps>;
 
 export type TabsOrientation = "horizontal" | "vertical";
 

package/src/ui/tabs/index.ts

@@ -1,6 +1,13 @@
 "use client";
 
-export { Tabs, TabsContent, TabsList, TabsTrigger, TabsContext, useTabs } from "./tabs";
+export {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  TabsContext,
+  useTabs,
+} from "./tabs";
 export type {
   TabsContentProps,
   TabsListProps,

package/src/ui/tabs/tabs.tsx

@@ -1,2 +1,9 @@
 // tabs.tsx — default static entry (no framer-motion on content)
-export { Tabs, TabsContent, TabsList, TabsTrigger, TabsContext, useTabs } from "./tabs-base";
+export {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  TabsContext,
+  useTabs,
+} from "./tabs-base";

package/src/ui/tabs/variants.ts

@@ -39,15 +39,15 @@ export const tabsTriggerVariants = cva(
         indigo: "bg-indigo-500/75",
         emerald: "bg-emerald-500/75",
         gray: "bg-gray-500/75",
-        "gradient-blue": "bg-gradient-to-r from-blue-600 to-purple-600",
-        "gradient-green": "bg-gradient-to-r from-green-600 to-lime-600",
-        "gradient-red": "bg-gradient-to-r from-red-600 to-pink-600",
-        "gradient-yellow": "bg-gradient-to-r from-yellow-600 to-orange-600",
-        "gradient-purple": "bg-gradient-to-r from-purple-600 to-pink-600",
-        "gradient-teal": "bg-gradient-to-r from-teal-600 to-cyan-600",
-        "gradient-indigo": "bg-gradient-to-r from-indigo-600 to-purple-600",
-        "gradient-pink": "bg-gradient-to-r from-pink-600 to-rose-600",
-        "gradient-orange": "bg-gradient-to-r from-orange-600 to-red-600",
+        "gradient-blue": "bg-linear-to-r from-blue-600 to-purple-600",
+        "gradient-green": "bg-linear-to-r from-green-600 to-lime-600",
+        "gradient-red": "bg-linear-to-r from-red-600 to-pink-600",
+        "gradient-yellow": "bg-linear-to-r from-yellow-600 to-orange-600",
+        "gradient-purple": "bg-linear-to-r from-purple-600 to-pink-600",
+        "gradient-teal": "bg-linear-to-r from-teal-600 to-cyan-600",
+        "gradient-indigo": "bg-linear-to-r from-indigo-600 to-purple-600",
+        "gradient-pink": "bg-linear-to-r from-pink-600 to-rose-600",
+        "gradient-orange": "bg-linear-to-r from-orange-600 to-red-600",
       },
       variant: {
         default: "data-[state=active]:bg-background",

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

@@ -22,7 +22,9 @@ export function ToastViewportAnimated({
 }: ToastViewportProps) {
   const ctx = useContext(ToastStoreContext);
   if (!ctx) {
-    throw new Error("ToastViewportAnimated must be used within <ToastProvider>");
+    throw new Error(
+      "ToastViewportAnimated must be used within <ToastProvider>",
+    );
   }
 
   const portalTarget = typeof document !== "undefined" ? document.body : null;

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

@@ -10,4 +10,4 @@ export type ToastPresetMotionProps = Pick<
 export type ToastAnimationPresets = Record<
   ToastAnimation,
   ToastPresetMotionProps
->;  
+>;

package/src/ui/toast/types.ts

@@ -5,7 +5,9 @@ import type { toastRootVariants, toastViewportVariants } from "./variants";
 
 export type ToastAnimation = "none" | "slide" | "fade";
 
-export type ToastViewportVariantProps = VariantProps<typeof toastViewportVariants>;
+export type ToastViewportVariantProps = VariantProps<
+  typeof toastViewportVariants
+>;
 export type ToastRootVariantProps = VariantProps<typeof toastRootVariants>;
 
 export type ToastPosition = NonNullable<ToastViewportVariantProps["position"]>;