@zentauri-ui/zentauri-components 1.8.3 → 1.8.41

package/src/animations/scale-out/index.ts

@@ -0,0 +1,5 @@
+"use client";
+
+export { ScaleOut } from "./scale-out";
+export { scaleOutPreset } from "./presets";
+export type { ScaleOutProps } from "./types";

package/src/animations/scale-out/presets.ts

@@ -0,0 +1,8 @@
+import type { MotionAnimationPreset } from "../shared";
+
+export const scaleOutPreset = {
+  initial: { opacity: 1, scale: 1 },
+  animate: { opacity: 0, scale: 0.96 },
+  exit: { opacity: 0, scale: 0.96 },
+  transition: { duration: 0.65, ease: "easeInOut" },
+} satisfies MotionAnimationPreset;

package/src/animations/scale-out/scale-out.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { createMotionAnimation } from "../shared";
+
+import { scaleOutPreset } from "./presets";
+
+export const ScaleOut = createMotionAnimation(
+  "ScaleOut",
+  "animation-scale-out",
+  scaleOutPreset,
+);

package/src/animations/scale-out/types.ts

@@ -0,0 +1,3 @@
+import type { MotionAnimationProps } from "../shared";
+
+export type ScaleOutProps = MotionAnimationProps;

package/src/animations/shake/index.ts

@@ -0,0 +1,5 @@
+"use client";
+
+export { Shake } from "./shake";
+export { shakePreset } from "./presets";
+export type { ShakeProps } from "./types";

package/src/animations/shake/presets.ts

@@ -0,0 +1,13 @@
+import type { MotionAnimationPreset } from "../shared";
+
+export const shakePreset = {
+  initial: { x: 0 },
+  animate: { x: [0, -8, 8, -6, 6, -3, 3, 0] },
+  exit: { opacity: 0, x: 0 },
+  transition: {
+    duration: 0.6,
+    ease: "easeInOut",
+    repeat: Infinity,
+    repeatDelay: 1.2,
+  },
+} satisfies MotionAnimationPreset;

package/src/animations/shake/shake.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { createMotionAnimation } from "../shared";
+
+import { shakePreset } from "./presets";
+
+export const Shake = createMotionAnimation(
+  "Shake",
+  "animation-shake",
+  shakePreset,
+);

package/src/animations/shake/types.ts

@@ -0,0 +1,3 @@
+import type { MotionAnimationProps } from "../shared";
+
+export type ShakeProps = MotionAnimationProps;

package/src/animations/shared/create-motion-animation.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import { motion, useReducedMotion } from "framer-motion";
+
+import { cn } from "../../lib/utils";
+
+import type {
+  MotionAnimationPreset,
+  MotionAnimationProps,
+  MotionAnimationTargetOverrides,
+} from "./types";
+
+function formatBlurValue(value: number | string) {
+  if (typeof value === "number") {
+    return `blur(${value}px)`;
+  }
+  return value.includes("(") ? value : `blur(${value})`;
+}
+
+function mergeTargetOverrides(
+  target: MotionAnimationPreset["initial"] | undefined,
+  overrides: MotionAnimationTargetOverrides | undefined,
+) {
+  if (!overrides) {
+    return target;
+  }
+
+  const { blur, ...rest } = overrides;
+  return {
+    ...(target ?? {}),
+    ...rest,
+    ...(blur === undefined ? null : { filter: formatBlurValue(blur) }),
+  };
+}
+
+function isTargetObject(
+  target: NonNullable<MotionAnimationProps["whileInView"]>,
+): target is MotionAnimationPreset["animate"] {
+  return target !== null && typeof target === "object" && !Array.isArray(target);
+}
+
+export function createMotionAnimation(
+  displayName: string,
+  slot: string,
+  preset: MotionAnimationPreset,
+) {
+  function MotionAnimation(props: MotionAnimationProps) {
+    const {
+      children,
+      className,
+      initial,
+      animate,
+      exit,
+      transition,
+      layout,
+      whileHover,
+      whileInView,
+      whileTap,
+      from,
+      to,
+      exitTo,
+      ...rest
+    } = props;
+    const shouldReduceMotion = useReducedMotion();
+    const resolvedAnimateTarget = mergeTargetOverrides(preset.animate, to);
+    const resolvedAnimate = animate ?? resolvedAnimateTarget;
+    const shouldAnimateInView = whileInView !== undefined;
+    const usesPresetWhileInView = whileInView === true;
+    const resolvedWhileInView =
+      whileInView === undefined
+        ? undefined
+        : usesPresetWhileInView
+          ? resolvedAnimateTarget
+          : isTargetObject(whileInView)
+            ? { ...resolvedAnimateTarget, ...whileInView }
+            : whileInView;
+    const reducedMotionTarget = shouldAnimateInView
+      ? resolvedWhileInView
+      : resolvedAnimate;
+    const resolvedInitial =
+      initial ??
+      (shouldReduceMotion
+        ? reducedMotionTarget
+        : mergeTargetOverrides(preset.initial, from));
+    const resolvedExit = exit ?? mergeTargetOverrides(preset.exit, exitTo);
+    const resolvedTransition = transition
+      ? { ...preset.transition, ...transition }
+      : preset.transition;
+    const shouldDisableAnimate =
+      usesPresetWhileInView || (shouldReduceMotion && shouldAnimateInView);
+
+    return (
+      <motion.div
+        data-slot={slot}
+        className={cn(className)}
+        initial={resolvedInitial}
+        animate={shouldDisableAnimate ? undefined : resolvedAnimate}
+        exit={resolvedExit}
+        layout={layout ?? preset.layout}
+        whileHover={whileHover ?? preset.whileHover}
+        whileInView={
+          shouldReduceMotion
+            ? undefined
+            : shouldAnimateInView
+              ? resolvedWhileInView
+              : undefined
+        }
+        whileTap={whileTap ?? preset.whileTap}
+        transition={resolvedTransition}
+        {...rest}
+      >
+        {children}
+      </motion.div>
+    );
+  }
+
+  MotionAnimation.displayName = displayName;
+  return MotionAnimation;
+}

package/src/animations/shared/index.ts

@@ -0,0 +1,6 @@
+export { createMotionAnimation } from "./create-motion-animation";
+export type {
+  MotionAnimationPreset,
+  MotionAnimationProps,
+  MotionAnimationWhileInView,
+} from "./types";

package/src/animations/shared/types.ts

@@ -0,0 +1,42 @@
+import type {
+  HTMLMotionProps,
+  TargetAndTransition,
+  Transition,
+} from "framer-motion";
+
+export type MotionAnimationPreset = {
+  initial: TargetAndTransition;
+  animate: TargetAndTransition;
+  exit?: TargetAndTransition;
+  layout?: HTMLMotionProps<"div">["layout"];
+  whileHover?: TargetAndTransition;
+  whileTap?: TargetAndTransition;
+  transition: Transition;
+};
+
+export type MotionAnimationTargetOverrides = {
+  opacity?: number;
+  x?: number | string;
+  y?: number | string;
+  scale?: number;
+  scaleX?: number;
+  scaleY?: number;
+  rotate?: number | string;
+  rotateX?: number | string;
+  rotateY?: number | string;
+  blur?: number | string;
+};
+
+export type MotionAnimationWhileInView =
+  | true
+  | HTMLMotionProps<"div">["whileInView"];
+
+export type MotionAnimationProps = Omit<
+  HTMLMotionProps<"div">,
+  "whileInView"
+> & {
+  from?: MotionAnimationTargetOverrides;
+  to?: MotionAnimationTargetOverrides;
+  exitTo?: MotionAnimationTargetOverrides;
+  whileInView?: MotionAnimationWhileInView;
+};

package/src/animations/skeleton-shimmer/index.ts

@@ -0,0 +1,5 @@
+"use client";
+
+export { SkeletonShimmer } from "./skeleton-shimmer";
+export { skeletonShimmerPreset } from "./presets";
+export type { SkeletonShimmerProps } from "./types";

package/src/animations/skeleton-shimmer/presets.ts

@@ -0,0 +1,8 @@
+import type { MotionAnimationPreset } from "../shared";
+
+export const skeletonShimmerPreset = {
+  initial: { opacity: 1, backgroundPosition: "200% 0" },
+  animate: { opacity: 1, backgroundPosition: "-200% 0" },
+  exit: { opacity: 0 },
+  transition: { duration: 1.35, ease: "linear", repeat: Infinity },
+} satisfies MotionAnimationPreset;

package/src/animations/skeleton-shimmer/skeleton-shimmer.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { createMotionAnimation } from "../shared";
+
+import { skeletonShimmerPreset } from "./presets";
+
+export const SkeletonShimmer = createMotionAnimation(
+  "SkeletonShimmer",
+  "animation-skeleton-shimmer",
+  skeletonShimmerPreset,
+);

package/src/animations/skeleton-shimmer/types.ts

@@ -0,0 +1,3 @@
+import type { MotionAnimationProps } from "../shared";
+
+export type SkeletonShimmerProps = MotionAnimationProps;

package/src/animations/slide-down/index.ts

@@ -0,0 +1,5 @@
+"use client";
+
+export { SlideDown } from "./slide-down";
+export { slideDownPreset } from "./presets";
+export type { SlideDownProps } from "./types";

package/src/animations/slide-down/presets.ts

@@ -0,0 +1,8 @@
+import type { MotionAnimationPreset } from "../shared";
+
+export const slideDownPreset = {
+  initial: { y: -24 },
+  animate: { y: 0 },
+  exit: { y: -12 },
+  transition: { duration: 0.34, ease: "easeOut" },
+} satisfies MotionAnimationPreset;

package/src/animations/slide-down/slide-down.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { createMotionAnimation } from "../shared";
+
+import { slideDownPreset } from "./presets";
+
+export const SlideDown = createMotionAnimation(
+  "SlideDown",
+  "animation-slide-down",
+  slideDownPreset,
+);

package/src/animations/slide-down/types.ts

@@ -0,0 +1,3 @@
+import type { MotionAnimationProps } from "../shared";
+
+export type SlideDownProps = MotionAnimationProps;

package/src/animations/slide-left/index.ts

@@ -0,0 +1,5 @@
+"use client";
+
+export { SlideLeft } from "./slide-left";
+export { slideLeftPreset } from "./presets";
+export type { SlideLeftProps } from "./types";

package/src/animations/slide-left/presets.ts

@@ -0,0 +1,8 @@
+import type { MotionAnimationPreset } from "../shared";
+
+export const slideLeftPreset = {
+  initial: { x: 24 },
+  animate: { x: 0 },
+  exit: { x: 12 },
+  transition: { duration: 0.34, ease: "easeOut" },
+} satisfies MotionAnimationPreset;

package/src/animations/slide-left/slide-left.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { createMotionAnimation } from "../shared";
+
+import { slideLeftPreset } from "./presets";
+
+export const SlideLeft = createMotionAnimation(
+  "SlideLeft",
+  "animation-slide-left",
+  slideLeftPreset,
+);

package/src/animations/slide-left/types.ts

@@ -0,0 +1,3 @@
+import type { MotionAnimationProps } from "../shared";
+
+export type SlideLeftProps = MotionAnimationProps;

package/src/animations/slide-right/index.ts

@@ -0,0 +1,5 @@
+"use client";
+
+export { SlideRight } from "./slide-right";
+export { slideRightPreset } from "./presets";
+export type { SlideRightProps } from "./types";

package/src/animations/slide-right/presets.ts

@@ -0,0 +1,8 @@
+import type { MotionAnimationPreset } from "../shared";
+
+export const slideRightPreset = {
+  initial: { x: -24 },
+  animate: { x: 0 },
+  exit: { x: -12 },
+  transition: { duration: 0.34, ease: "easeOut" },
+} satisfies MotionAnimationPreset;

package/src/animations/slide-right/slide-right.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { createMotionAnimation } from "../shared";
+
+import { slideRightPreset } from "./presets";
+
+export const SlideRight = createMotionAnimation(
+  "SlideRight",
+  "animation-slide-right",
+  slideRightPreset,
+);

package/src/animations/slide-right/types.ts

@@ -0,0 +1,3 @@
+import type { MotionAnimationProps } from "../shared";
+
+export type SlideRightProps = MotionAnimationProps;

package/src/animations/slide-up/index.ts

@@ -0,0 +1,5 @@
+"use client";
+
+export { SlideUp } from "./slide-up";
+export { slideUpPreset } from "./presets";
+export type { SlideUpProps } from "./types";

package/src/animations/slide-up/presets.ts

@@ -0,0 +1,8 @@
+import type { MotionAnimationPreset } from "../shared";
+
+export const slideUpPreset = {
+  initial: { y: 24 },
+  animate: { y: 0 },
+  exit: { y: 12 },
+  transition: { duration: 0.34, ease: "easeOut" },
+} satisfies MotionAnimationPreset;

package/src/animations/slide-up/slide-up.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { createMotionAnimation } from "../shared";
+
+import { slideUpPreset } from "./presets";
+
+export const SlideUp = createMotionAnimation(
+  "SlideUp",
+  "animation-slide-up",
+  slideUpPreset,
+);

package/src/animations/slide-up/types.ts

@@ -0,0 +1,3 @@
+import type { MotionAnimationProps } from "../shared";
+
+export type SlideUpProps = MotionAnimationProps;

package/src/animations/spin/index.ts

@@ -0,0 +1,5 @@
+"use client";
+
+export { Spin } from "./spin";
+export { spinPreset } from "./presets";
+export type { SpinProps } from "./types";

package/src/animations/spin/presets.ts

@@ -0,0 +1,8 @@
+import type { MotionAnimationPreset } from "../shared";
+
+export const spinPreset = {
+  initial: { rotate: 0 },
+  animate: { rotate: 360 },
+  exit: { opacity: 0, rotate: 360 },
+  transition: { duration: 2, ease: "linear", repeat: Infinity },
+} satisfies MotionAnimationPreset;

package/src/animations/spin/spin.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import { createMotionAnimation } from "../shared";
+
+import { spinPreset } from "./presets";
+
+export const Spin = createMotionAnimation("Spin", "animation-spin", spinPreset);

package/src/animations/spin/types.ts

@@ -0,0 +1,3 @@
+import type { MotionAnimationProps } from "../shared";
+
+export type SpinProps = MotionAnimationProps;

package/src/animations/text-reveal/index.ts

@@ -0,0 +1,5 @@
+"use client";
+
+export { TextReveal } from "./text-reveal";
+export { textRevealPreset } from "./presets";
+export type { TextRevealProps } from "./types";

package/src/animations/text-reveal/presets.ts

@@ -0,0 +1,8 @@
+import type { MotionAnimationPreset } from "../shared";
+
+export const textRevealPreset = {
+  initial: { opacity: 0, y: 18, filter: "blur(6px)" },
+  animate: { opacity: 1, y: 0, filter: "blur(0px)" },
+  exit: { opacity: 0, y: 8, filter: "blur(4px)" },
+  transition: { duration: 0.42, ease: [0.16, 1, 0.3, 1] },
+} satisfies MotionAnimationPreset;

package/src/animations/text-reveal/text-reveal.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { createMotionAnimation } from "../shared";
+
+import { textRevealPreset } from "./presets";
+
+export const TextReveal = createMotionAnimation(
+  "TextReveal",
+  "animation-text-reveal",
+  textRevealPreset,
+);

package/src/animations/text-reveal/types.ts

@@ -0,0 +1,3 @@
+import type { MotionAnimationProps } from "../shared";
+
+export type TextRevealProps = MotionAnimationProps;

package/src/animations/text-shimmer/index.ts

@@ -0,0 +1,5 @@
+"use client";
+
+export { TextShimmer } from "./text-shimmer";
+export { textShimmerPreset } from "./presets";
+export type { TextShimmerProps } from "./types";

package/src/animations/text-shimmer/presets.ts

@@ -0,0 +1,8 @@
+import type { MotionAnimationPreset } from "../shared";
+
+export const textShimmerPreset = {
+  initial: { opacity: 0, backgroundPosition: "200% 0" },
+  animate: { opacity: 1, backgroundPosition: "-200% 0" },
+  exit: { opacity: 0, backgroundPosition: "-200% 0" },
+  transition: { duration: 1.2, ease: "easeInOut" },
+} satisfies MotionAnimationPreset;

package/src/animations/text-shimmer/text-shimmer.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { createMotionAnimation } from "../shared";
+
+import { textShimmerPreset } from "./presets";
+
+export const TextShimmer = createMotionAnimation(
+  "TextShimmer",
+  "animation-text-shimmer",
+  textShimmerPreset,
+);

package/src/animations/text-shimmer/types.ts

@@ -0,0 +1,3 @@
+import type { MotionAnimationProps } from "../shared";
+
+export type TextShimmerProps = MotionAnimationProps;

package/src/animations/tilt/index.ts

@@ -0,0 +1,5 @@
+"use client";
+
+export { Tilt } from "./tilt";
+export { tiltPreset } from "./presets";
+export type { TiltProps } from "./types";

package/src/animations/tilt/presets.ts

@@ -0,0 +1,12 @@
+import type { MotionAnimationPreset } from "../shared";
+
+export const tiltPreset = {
+  initial: { rotateX: 0, rotateY: 0, transformPerspective: 900 },
+  animate: {
+    rotateX: [0, 3, -3, 0],
+    rotateY: [0, -5, 5, 0],
+    transformPerspective: 900,
+  },
+  exit: { opacity: 0, rotateX: 0, rotateY: 0, transformPerspective: 900 },
+  transition: { duration: 2, ease: "easeInOut", repeat: Infinity },
+} satisfies MotionAnimationPreset;

package/src/animations/tilt/tilt.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import { createMotionAnimation } from "../shared";
+
+import { tiltPreset } from "./presets";
+
+export const Tilt = createMotionAnimation("Tilt", "animation-tilt", tiltPreset);

package/src/animations/tilt/types.ts

@@ -0,0 +1,3 @@
+import type { MotionAnimationProps } from "../shared";
+
+export type TiltProps = MotionAnimationProps;

package/src/animations/wiggle/index.ts

@@ -0,0 +1,5 @@
+"use client";
+
+export { Wiggle } from "./wiggle";
+export { wigglePreset } from "./presets";
+export type { WiggleProps } from "./types";

package/src/animations/wiggle/presets.ts

@@ -0,0 +1,13 @@
+import type { MotionAnimationPreset } from "../shared";
+
+export const wigglePreset = {
+  initial: { rotate: 0 },
+  animate: { rotate: [0, -4, 4, -3, 3, 0] },
+  exit: { opacity: 0, rotate: 0 },
+  transition: {
+    duration: 0.75,
+    ease: "easeInOut",
+    repeat: Infinity,
+    repeatDelay: 1,
+  },
+} satisfies MotionAnimationPreset;

package/src/animations/wiggle/types.ts

@@ -0,0 +1,3 @@
+import type { MotionAnimationProps } from "../shared";
+
+export type WiggleProps = MotionAnimationProps;

package/src/animations/wiggle/wiggle.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { createMotionAnimation } from "../shared";
+
+import { wigglePreset } from "./presets";
+
+export const Wiggle = createMotionAnimation(
+  "Wiggle",
+  "animation-wiggle",
+  wigglePreset,
+);

package/src/design-system/copy-button.ts

@@ -26,20 +26,15 @@ export const zuiCopyButtonAppearances = {
     "bg-[var(--zui-copy-button-indigo-bg,#3730a3)] dark:bg-[var(--zui-copy-button-indigo-bg-dark,#4f46e5)] text-[color:var(--zui-copy-button-indigo-fg,#ffffff)] dark:text-[color:var(--zui-copy-button-indigo-fg-dark,#ffffff)] hover:bg-[var(--zui-copy-button-indigo-bg-hover,#3730a3)] dark:hover:bg-[var(--zui-copy-button-indigo-bg-hover-dark,#4f46e5)]",
   purple:
     "bg-[var(--zui-copy-button-purple-bg,#6b21a8)] dark:bg-[var(--zui-copy-button-purple-bg-dark,#9333ea)] text-[color:var(--zui-copy-button-purple-fg,#ffffff)] dark:text-[color:var(--zui-copy-button-purple-fg-dark,#ffffff)] hover:bg-[var(--zui-copy-button-purple-bg-hover,#6b21a8)] dark:hover:bg-[var(--zui-copy-button-purple-bg-hover-dark,#9333ea)]",
-  pink:
-    "bg-[var(--zui-copy-button-pink-bg,#9d174d)] dark:bg-[var(--zui-copy-button-pink-bg-dark,#db2777)] text-[color:var(--zui-copy-button-pink-fg,#ffffff)] dark:text-[color:var(--zui-copy-button-pink-fg-dark,#ffffff)] hover:bg-[var(--zui-copy-button-pink-bg-hover,#9d174d)] dark:hover:bg-[var(--zui-copy-button-pink-bg-hover-dark,#db2777)]",
-  rose:
-    "bg-[var(--zui-copy-button-rose-bg,#9f1239)] dark:bg-[var(--zui-copy-button-rose-bg-dark,#e11d48)] text-[color:var(--zui-copy-button-rose-fg,#ffffff)] dark:text-[color:var(--zui-copy-button-rose-fg-dark,#ffffff)] hover:bg-[var(--zui-copy-button-rose-bg-hover,#9f1239)] dark:hover:bg-[var(--zui-copy-button-rose-bg-hover-dark,#e11d48)]",
-  sky:
-    "bg-[var(--zui-copy-button-sky-bg,#0ea5e9)] dark:bg-[var(--zui-copy-button-sky-bg-dark,#0369a1)] text-[color:var(--zui-copy-button-sky-fg,#ffffff)] dark:text-[color:var(--zui-copy-button-sky-fg-dark,#ffffff)] hover:bg-[var(--zui-copy-button-sky-bg-hover,#0ea5e9)] dark:hover:bg-[var(--zui-copy-button-sky-bg-hover-dark,#075985)]",
-  teal:
-    "bg-[var(--zui-copy-button-teal-bg,#14b8a6)] dark:bg-[var(--zui-copy-button-teal-bg-dark,#0f766e)] text-[color:var(--zui-copy-button-teal-fg,#ffffff)] dark:text-[color:var(--zui-copy-button-teal-fg-dark,#ffffff)] hover:bg-[var(--zui-copy-button-teal-bg-hover,#14b8a6)] dark:hover:bg-[var(--zui-copy-button-teal-bg-hover-dark,#115e59)]",
+  pink: "bg-[var(--zui-copy-button-pink-bg,#9d174d)] dark:bg-[var(--zui-copy-button-pink-bg-dark,#db2777)] text-[color:var(--zui-copy-button-pink-fg,#ffffff)] dark:text-[color:var(--zui-copy-button-pink-fg-dark,#ffffff)] hover:bg-[var(--zui-copy-button-pink-bg-hover,#9d174d)] dark:hover:bg-[var(--zui-copy-button-pink-bg-hover-dark,#db2777)]",
+  rose: "bg-[var(--zui-copy-button-rose-bg,#9f1239)] dark:bg-[var(--zui-copy-button-rose-bg-dark,#e11d48)] text-[color:var(--zui-copy-button-rose-fg,#ffffff)] dark:text-[color:var(--zui-copy-button-rose-fg-dark,#ffffff)] hover:bg-[var(--zui-copy-button-rose-bg-hover,#9f1239)] dark:hover:bg-[var(--zui-copy-button-rose-bg-hover-dark,#e11d48)]",
+  sky: "bg-[var(--zui-copy-button-sky-bg,#0ea5e9)] dark:bg-[var(--zui-copy-button-sky-bg-dark,#0369a1)] text-[color:var(--zui-copy-button-sky-fg,#ffffff)] dark:text-[color:var(--zui-copy-button-sky-fg-dark,#ffffff)] hover:bg-[var(--zui-copy-button-sky-bg-hover,#0ea5e9)] dark:hover:bg-[var(--zui-copy-button-sky-bg-hover-dark,#075985)]",
+  teal: "bg-[var(--zui-copy-button-teal-bg,#14b8a6)] dark:bg-[var(--zui-copy-button-teal-bg-dark,#0f766e)] text-[color:var(--zui-copy-button-teal-fg,#ffffff)] dark:text-[color:var(--zui-copy-button-teal-fg-dark,#ffffff)] hover:bg-[var(--zui-copy-button-teal-bg-hover,#14b8a6)] dark:hover:bg-[var(--zui-copy-button-teal-bg-hover-dark,#115e59)]",
   yellow:
     "bg-[var(--zui-copy-button-yellow-bg,#eab308)] dark:bg-[var(--zui-copy-button-yellow-bg-dark,#854d0e)] text-[color:var(--zui-copy-button-yellow-fg,#ffffff)] dark:text-[color:var(--zui-copy-button-yellow-fg-dark,#ffffff)] hover:bg-[var(--zui-copy-button-yellow-bg-hover,#eab308)] dark:hover:bg-[var(--zui-copy-button-yellow-bg-hover-dark,#713f12)]",
   orange:
     "bg-[var(--zui-copy-button-orange-bg,#f97316)] dark:bg-[var(--zui-copy-button-orange-bg-dark,#9a3412)] text-[color:var(--zui-copy-button-orange-fg,#ffffff)] dark:text-[color:var(--zui-copy-button-orange-fg-dark,#ffffff)] hover:bg-[var(--zui-copy-button-orange-bg-hover,#f97316)] dark:hover:bg-[var(--zui-copy-button-orange-bg-hover-dark,#7c2d12)]",
-  gray:
-    "bg-[var(--zui-copy-button-gray-bg,#6b7280)] dark:bg-[var(--zui-copy-button-gray-bg-dark,#374151)] text-[color:var(--zui-copy-button-gray-fg,#ffffff)] dark:text-[color:var(--zui-copy-button-gray-fg-dark,#ffffff)] hover:bg-[var(--zui-copy-button-gray-bg-hover,#6b7280)] dark:hover:bg-[var(--zui-copy-button-gray-bg-hover-dark,#1f2937)]",
+  gray: "bg-[var(--zui-copy-button-gray-bg,#6b7280)] dark:bg-[var(--zui-copy-button-gray-bg-dark,#374151)] text-[color:var(--zui-copy-button-gray-fg,#ffffff)] dark:text-[color:var(--zui-copy-button-gray-fg-dark,#ffffff)] hover:bg-[var(--zui-copy-button-gray-bg-hover,#6b7280)] dark:hover:bg-[var(--zui-copy-button-gray-bg-hover-dark,#1f2937)]",
   amber:
     "bg-[var(--zui-copy-button-amber-bg,#f59e0b)] dark:bg-[var(--zui-copy-button-amber-bg-dark,#92400e)] text-[color:var(--zui-copy-button-amber-fg,#ffffff)] dark:text-[color:var(--zui-copy-button-amber-fg-dark,#ffffff)] hover:bg-[var(--zui-copy-button-amber-bg-hover,#f59e0b)] dark:hover:bg-[var(--zui-copy-button-amber-bg-hover-dark,#78350f)]",
   violet: