@zentauri-ui/zentauri-components 1.4.61 → 1.4.63

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/badge-base.tsx

@@ -13,6 +13,7 @@ export function BadgeBase({
   size,
   shape,
   closable = false,
+  liveRegion = false,
   onClose,
   closeLabel = "Remove",
   children,
@@ -24,11 +25,13 @@ export function BadgeBase({
   const isDot = shape === "dot";
   const resolvedAriaLabel =
     ariaLabel ?? (isDot ? "Status indicator" : undefined);
+  const landmarkRole =
+    liveRegion === true || isDot ? ("status" as const) : undefined;
 
   return (
     <Wrapper
       ref={ref}
-      role="status"
+      role={landmarkRole}
       data-slot="badge"
       aria-label={resolvedAriaLabel}
       className={cn(badgeVariants({ appearance, size, shape }), className)}

package/src/ui/badge/types.ts

@@ -15,6 +15,7 @@ export interface BadgeBaseProps extends ComponentPropsWithRef<"span"> {
   size?: BadgeVariantProps["size"];
   shape?: BadgeVariantProps["shape"];
   closable?: boolean;
+  liveRegion?: boolean;
   onClose?: MouseEventHandler<HTMLButtonElement>;
   closeLabel?: string;
   children?: ReactNode;

package/src/ui/badge/variants.ts

@@ -7,30 +7,28 @@ import { cva } from "class-variance-authority";
 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-600 text-white",
+  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-600 text-white",
+  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-600 text-white",
-  sky: "bg-sky-600 text-white",
-  teal: "bg-teal-600 text-white",
-  yellow: "bg-yellow-600 text-white",
-  orange: "bg-orange-600 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",
+  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",
 } 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 & {

package/src/ui/breadcrumb/variants.ts

@@ -1,33 +1,32 @@
 import { cva } from "class-variance-authority";
 
-export const breadcrumbNavVariants = cva(
-  "text-sm",
-  {
-    variants: {
-      appearance: {
-        default: "text-slate-300",
-        muted: "text-slate-400",
-        sky: "text-sky-600",
-        rose: "text-rose-600",
-        purple: "text-purple-600",
-        pink: "text-pink-600",
-        orange: "text-orange-600",
-        yellow: "text-yellow-600",
-        teal: "text-teal-600",
-        indigo: "text-indigo-600",
-        emerald: "text-emerald-600",
-        gray: "text-gray-600",
-        amber: "text-amber-600",
-        violet: "text-violet-600",
-      },
+export const breadcrumbNavVariants = cva("text-sm", {
+  variants: {
+    appearance: {
+      default: "text-slate-300",
+      muted: "text-slate-400",
+      sky: "text-sky-600",
+      rose: "text-rose-600",
+      purple: "text-purple-600",
+      pink: "text-pink-600",
+      orange: "text-orange-600",
+      yellow: "text-yellow-600",
+      teal: "text-teal-600",
+      indigo: "text-indigo-600",
+      emerald: "text-emerald-600",
+      gray: "text-gray-600",
+      amber: "text-amber-600",
+      violet: "text-violet-600",
     },
-    defaultVariants: {
-      appearance: "default",
-    },
-  }
-);
+  },
+  defaultVariants: {
+    appearance: "default",
+  },
+});
 
-export const breadcrumbListVariants = cva("flex flex-wrap items-center gap-1.5");
+export const breadcrumbListVariants = cva(
+  "flex flex-wrap items-center gap-1.5",
+);
 
 export const breadcrumbItemVariants = cva("inline-flex items-center gap-1.5");
 
@@ -37,17 +36,14 @@ export const breadcrumbLinkVariants = cva(
 
 export const breadcrumbPageVariants = cva("font-medium text-slate-100");
 
-export const breadcrumbSeparatorVariants = cva(
-  "select-none text-slate-600",
-  {
-    variants: {
-      size: {
-        sm: "text-xs",
-        md: "text-sm",
-      },
-    },
-    defaultVariants: {
-      size: "md",
+export const breadcrumbSeparatorVariants = cva("select-none text-slate-600", {
+  variants: {
+    size: {
+      sm: "text-xs",
+      md: "text-sm",
     },
   },
-);
+  defaultVariants: {
+    size: "md",
+  },
+});

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

@@ -1,5 +1,11 @@
 "use client";
 
 export { ButtonAnimated } from "./button-animated";
-export type { ButtonAnimatedProps, ButtonSharedAnimated, ButtonPresetMotionProps, AnimationPresets, ButtonAnimation } from "./types";
+export type {
+  ButtonAnimatedProps,
+  ButtonSharedAnimated,
+  ButtonPresetMotionProps,
+  AnimationPresets,
+  ButtonAnimation,
+} from "./types";
 export { buttonAnimationPresets } from "./animations";

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

@@ -25,5 +25,4 @@ export type ButtonPresetMotionProps = Pick<
   "style" | "transition" | "whileHover" | "whileTap"
 >;
 
-
 export type AnimationPresets = Record<ButtonAnimation, ButtonPresetMotionProps>;

package/src/ui/buttons/button.test.tsx

@@ -129,7 +129,7 @@ describe("Button (component library)", () => {
       expect(
         root.className,
         "Destructive appearance must surface danger styling",
-      ).toMatch(/bg-rose-600/);
+      ).toMatch(/bg-rose-700/);
     });
 
     it("should apply outline appearance when appearance='outline'", () => {
@@ -147,7 +147,7 @@ describe("Button (component library)", () => {
       expect(
         root.className,
         "Gradient-blue appearance must include directional gradient utilities",
-      ).toMatch(/bg-gradient-to-r/);
+      ).toMatch(/bg-linear-to-r/);
     });
   });
 

package/src/ui/buttons/types.ts

@@ -6,9 +6,8 @@ import type { buttonVariants } from "./variants";
 export type ButtonSharedStatic = VariantProps<typeof buttonVariants>;
 
 export type ButtonProps =
-  | (ButtonSharedStatic & ComponentPropsWithRef<"button"> & {
-      as?: "button";
-    })
+  | (ButtonSharedStatic &
+      ComponentPropsWithRef<"button"> & {
+        as?: "button";
+      })
   | (ButtonSharedStatic & ComponentPropsWithRef<"a"> & { as: "link" });
-
-

package/src/ui/buttons/variants.ts

@@ -14,43 +14,43 @@ export const buttonVariants = cva(
         default:
           "bg-slate-50 text-slate-950 shadow-[0_1px_2px_rgba(15,23,42,0.12)] hover:bg-white",
         secondary: "bg-slate-800 text-slate-50 hover:bg-slate-700",
-        destructive: "bg-rose-600 text-white hover:bg-rose-600",
+        destructive: "bg-rose-700 text-white hover:bg-rose-800",
         outline:
           "border border-white/10 bg-white/5 text-slate-50 hover:bg-white/10",
         ghost: "bg-transparent text-slate-200 hover:bg-white/5",
         link: "bg-transparent text-cyan-300 underline-offset-4 hover:underline",
         glass:
           "border border-white/15 bg-white/10 text-white backdrop-blur-md hover:bg-white/15",
-        emerald: "bg-emerald-600 text-white hover:bg-emerald-600",
+        emerald: "bg-emerald-800 text-white hover:bg-emerald-900",
         indigo: "bg-indigo-600 text-white hover:bg-indigo-600",
         purple: "bg-purple-600 text-white hover:bg-purple-600",
         pink: "bg-pink-600 text-white hover:bg-pink-600",
         rose: "bg-rose-600 text-white hover:bg-rose-600",
-        sky: "bg-sky-600 text-white hover:bg-sky-600",
-        teal: "bg-teal-600 text-white hover:bg-teal-600",
-        yellow: "bg-yellow-600 text-white hover:bg-yellow-600",
-        orange: "bg-orange-600 text-white hover:bg-orange-600",
-        gray: "bg-gray-600 text-white hover:bg-gray-600",
-        amber: "bg-amber-600 text-white hover:bg-amber-600",
+        sky: "bg-sky-700 text-white hover:bg-sky-800",
+        teal: "bg-teal-700 text-white hover:bg-teal-800",
+        yellow: "bg-yellow-800 text-white hover:bg-yellow-900",
+        orange: "bg-orange-800 text-white hover:bg-orange-900",
+        gray: "bg-gray-700 text-white hover:bg-gray-800",
+        amber: "bg-amber-800 text-white hover:bg-amber-900",
         violet: "bg-violet-600 text-white hover:bg-violet-600",
         "gradient-blue":
-          "bg-gradient-to-r from-blue-600 to-purple-600 text-white hover:from-blue-600 hover:to-purple-600",
+          "bg-linear-to-r from-blue-600 to-purple-600 text-white hover:from-blue-600 hover:to-purple-600",
         "gradient-green":
-          "bg-gradient-to-r from-green-600 to-lime-600 text-white hover:from-green-600 hover:to-lime-600",
+          "bg-linear-to-r from-green-600 to-lime-600 text-white hover:from-green-600 hover:to-lime-600",
         "gradient-red":
-          "bg-gradient-to-r from-red-600 to-pink-600 text-white hover:from-red-600 hover:to-pink-600",
+          "bg-linear-to-r from-red-600 to-pink-600 text-white hover:from-red-600 hover:to-pink-600",
         "gradient-yellow":
-          "bg-gradient-to-r from-yellow-600 to-orange-600 text-white hover:from-yellow-600 hover:to-orange-600",
+          "bg-linear-to-r from-yellow-600 to-orange-600 text-white hover:from-yellow-600 hover:to-orange-600",
         "gradient-purple":
-          "bg-gradient-to-r from-purple-600 to-pink-600 text-white hover:from-purple-600 hover:to-pink-600",
+          "bg-linear-to-r from-purple-600 to-pink-600 text-white hover:from-purple-600 hover:to-pink-600",
         "gradient-teal":
-          "bg-gradient-to-r from-teal-600 to-cyan-600 text-white hover:from-teal-600 hover:to-cyan-600",
+          "bg-linear-to-r from-teal-600 to-cyan-600 text-white hover:from-teal-600 hover:to-cyan-600",
         "gradient-indigo":
-          "bg-gradient-to-r from-indigo-600 to-purple-600 text-white hover:from-indigo-600 hover:to-purple-600",
+          "bg-linear-to-r from-indigo-600 to-purple-600 text-white hover:from-indigo-600 hover:to-purple-600",
         "gradient-pink":
-          "bg-gradient-to-r from-pink-600 to-rose-600 text-white hover:from-pink-600 hover:to-rose-600",
+          "bg-linear-to-r from-pink-600 to-rose-600 text-white hover:from-pink-600 hover:to-rose-600",
         "gradient-orange":
-          "bg-gradient-to-r from-orange-600 to-red-600 text-white hover:from-orange-600 hover:to-red-600",
+          "bg-linear-to-r from-orange-600 to-red-600 text-white hover:from-orange-600 hover:to-red-600",
       },
       size: {
         sm: "h-7 md:h-9 px-3 text-xs",

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

@@ -5,4 +5,3 @@ export type CardAnimation = "none" | "lift" | "glow" | "tilt";
 export type CardAnimatedProps = Omit<CardBaseProps, "as"> & {
   animation?: CardAnimation;
 };
-

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

@@ -1,11 +1,6 @@
 "use client";
 
-import {
-  createContext,
-  useContext,
-  useMemo,
-  type ElementType,
-} from "react";
+import { createContext, useContext, useMemo, type ElementType } from "react";
 
 import { cn } from "../../lib/utils";
 

package/src/ui/card/card.test.tsx

@@ -2,10 +2,14 @@ import { createRef } from "react";
 import { render, screen } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
 
+import { Card } from "./card";
 import {
-  Card,
-} from "./card";
-import { CardBody, CardDescription, CardFooter, CardHeader, CardTitle } from "./card-base";
+  CardBody,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "./card-base";
 
 const CARD_SLOT = '[data-slot="card"]';
 

package/src/ui/card/card.tsx

@@ -1,7 +1,5 @@
 // card.tsx — default static entry (no framer-motion)
-import {
-  CardBase,
-} from "./card-base";
+import { CardBase } from "./card-base";
 import type { CardProps } from "./types";
 
 export function Card(props: CardProps) {

package/src/ui/card/index.ts

@@ -1,9 +1,13 @@
 "use client";
 
+export { Card } from "./card";
 export {
-  Card,
-} from "./card";
-export { CardBody, CardDescription, CardFooter, CardHeader, CardTitle } from "./card-base";
+  CardBody,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "./card-base";
 export type {
   CardBaseProps,
   CardVariantProps,

package/src/ui/card/types.ts

@@ -39,4 +39,4 @@ export type CardDescriptionProps = {
   ref?: Ref<HTMLElement>;
 } & Omit<HTMLAttributes<HTMLElement>, "className" | "children">;
 
-export type CardSize = NonNullable<CardProps["size"]>;
+export type CardSize = NonNullable<CardProps["size"]>;

package/src/ui/card/variants.ts

@@ -30,23 +30,23 @@ export const cardVariants = cva(
         amber: "border border-amber-600 bg-amber-950/70 backdrop-blur-xl",
         violet: "border border-violet-600 bg-violet-950/70 backdrop-blur-xl",
         "gradient-blue":
-          "border 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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: "gap-2 p-3 text-sm",