@zentauri-ui/zentauri-components 1.3.1 → 1.4.1

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

@@ -0,0 +1,184 @@
+"use client";
+
+import {
+  Children,
+  createContext,
+  isValidElement,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  type Ref,
+} from "react";
+
+import { cn } from "../../lib/utils";
+
+import type {
+  AvatarBaseProps,
+  AvatarCtx,
+  AvatarFallbackProps,
+  AvatarGroupProps,
+  AvatarImageProps,
+  ImageStatus,
+} from "./types";
+import {
+  avatarFallbackVariants,
+  avatarGroupVariants,
+  avatarImageVariants,
+  avatarVariants,
+} from "./variants";
+
+const AvatarContext = createContext<AvatarCtx | null>(null);
+
+function useAvatarContext(component: string): AvatarCtx {
+  const ctx = useContext(AvatarContext);
+  if (!ctx) {
+    throw new Error(`${component} must be used within <Avatar>`);
+  }
+  return ctx;
+}
+
+export function AvatarBase({
+  className,
+  size,
+  appearance,
+  children,
+  ref,
+  as: Wrapper = "span",
+  ...rest
+}: AvatarBaseProps) {
+  const [imageStatus, setImageStatus] = useState<ImageStatus>("idle");
+  const ctx = useMemo(
+    () => ({ imageStatus, setImageStatus }),
+    [imageStatus],
+  );
+
+  return (
+    <AvatarContext.Provider value={ctx}>
+      <Wrapper
+        ref={ref}
+        data-slot="avatar"
+        className={cn(avatarVariants({ size, appearance }), className)}
+        {...rest}
+      >
+        {children}
+      </Wrapper>
+    </AvatarContext.Provider>
+  );
+}
+
+AvatarBase.displayName = "Avatar";
+
+export function AvatarImage({
+  className,
+  onLoad,
+  onError,
+  ref,
+  ...rest
+}: AvatarImageProps & { ref?: Ref<HTMLImageElement> }) {
+  const { setImageStatus } = useAvatarContext("AvatarImage");
+
+  return (
+    <img
+      ref={ref}
+      data-slot="avatar-image"
+      className={cn(avatarImageVariants(), className)}
+      onLoad={(e) => {
+        setImageStatus("loaded");
+        onLoad?.(e);
+      }}
+      onError={(e) => {
+        setImageStatus("error");
+        onError?.(e);
+      }}
+      {...rest}
+    />
+  );
+}
+
+AvatarImage.displayName = "AvatarImage";
+
+export function AvatarFallback({
+  className,
+  delayMs = 0,
+  ref,
+  ...rest
+}: AvatarFallbackProps & { ref?: Ref<HTMLSpanElement> }) {
+  const { imageStatus } = useAvatarContext("AvatarFallback");
+  const [show, setShow] = useState(delayMs === 0);
+
+  useEffect(() => {
+    if (imageStatus === "loaded") {
+      setShow(false);
+      return;
+    }
+    if (imageStatus === "error") {
+      setShow(true);
+      return;
+    }
+    if (delayMs <= 0) {
+      setShow(true);
+      return;
+    }
+    const t = window.setTimeout(() => setShow(true), delayMs);
+    return () => window.clearTimeout(t);
+  }, [delayMs, imageStatus]);
+
+  if (!show) {
+    return null;
+  }
+
+  return (
+    <span
+      ref={ref}
+      data-slot="avatar-fallback"
+      className={cn(avatarFallbackVariants(), className)}
+      {...rest}
+    />
+  );
+}
+
+AvatarFallback.displayName = "AvatarFallback";
+
+export function AvatarGroup({
+  className,
+  max,
+  children,
+  ref,
+  ...rest
+}: AvatarGroupProps & { ref?: Ref<HTMLDivElement> }) {
+  const childArray = useMemo(
+    () => Children.toArray(children).filter(isValidElement),
+    [children],
+  );
+  const visible = max !== undefined ? childArray.slice(0, max) : childArray;
+  const overflow =
+    max !== undefined && childArray.length > max
+      ? childArray.length - max
+      : 0;
+
+  return (
+    <div
+      ref={ref}
+      data-slot="avatar-group"
+      className={cn(avatarGroupVariants(), className)}
+      {...rest}
+    >
+      {visible}
+      {overflow > 0 ? (
+        <span
+          data-slot="avatar-group-overflow"
+          className={cn(
+            avatarVariants({ size: "md" }),
+            "z-10 grid place-items-center bg-slate-800 text-xs font-semibold text-white",
+          )}
+          aria-label={`${overflow} more`}
+        >
+          +{overflow}
+        </span>
+      ) : null}
+    </div>
+  );
+}
+
+AvatarGroup.displayName = "AvatarGroup";

package/src/ui/avatar/avatar.test.tsx

@@ -0,0 +1,51 @@
+import { createRef } from "react";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { Avatar, AvatarFallback, AvatarGroup, AvatarImage } from "./avatar";
+
+describe("Avatar", () => {
+  it("should expose displayName", () => {
+    expect(Avatar.displayName).toBe("Avatar");
+    expect(AvatarImage.displayName).toBe("AvatarImage");
+    expect(AvatarFallback.displayName).toBe("AvatarFallback");
+    expect(AvatarGroup.displayName).toBe("AvatarGroup");
+  });
+
+  it("should stamp data-slot on avatar root", () => {
+    render(
+      <Avatar>
+        <AvatarFallback>AB</AvatarFallback>
+      </Avatar>,
+    );
+    expect(document.querySelector('[data-slot="avatar"]')).toBeTruthy();
+  });
+
+  it("should forward ref on Avatar", () => {
+    const ref = createRef<HTMLSpanElement>();
+    render(
+      <Avatar ref={ref}>
+        <AvatarFallback>Z</AvatarFallback>
+      </Avatar>,
+    );
+    expect(ref.current?.getAttribute("data-slot")).toBe("avatar");
+  });
+
+  it("should render overflow count in AvatarGroup", () => {
+    render(
+      <AvatarGroup max={2}>
+        <Avatar>
+          <AvatarFallback>A</AvatarFallback>
+        </Avatar>
+        <Avatar>
+          <AvatarFallback>B</AvatarFallback>
+        </Avatar>
+        <Avatar>
+          <AvatarFallback>C</AvatarFallback>
+        </Avatar>
+      </AvatarGroup>,
+    );
+    expect(screen.getByLabelText("1 more")).toBeInTheDocument();
+    expect(screen.getByText("+1")).toBeInTheDocument();
+  });
+});

package/src/ui/avatar/avatar.tsx

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

package/src/ui/avatar/index.ts

@@ -0,0 +1,16 @@
+"use client";
+
+export { Avatar, AvatarFallback, AvatarGroup, AvatarImage } from "./avatar";
+export type { AvatarBaseProps } from "./types";
+export type {
+  AvatarFallbackProps,
+  AvatarGroupProps,
+  AvatarImageProps,
+  AvatarProps,
+} from "./types";
+export {
+  avatarFallbackVariants,
+  avatarGroupVariants,
+  avatarImageVariants,
+  avatarVariants,
+} from "./variants";

package/{dist/ui/avatar/types.d.ts → src/ui/avatar/types.ts}

@@ -1,25 +1,36 @@
 import type { VariantProps } from "class-variance-authority";
-import type { ComponentPropsWithRef, ComponentPropsWithoutRef, ElementType } from "react";
+import type {
+  ComponentPropsWithRef,
+  ComponentPropsWithoutRef,
+  ElementType,
+} from "react";
+
 import type { avatarVariants } from "./variants";
+
 type AvatarVariantProps = VariantProps<typeof avatarVariants>;
+
 export interface AvatarBaseProps extends ComponentPropsWithRef<"span"> {
-    size?: AvatarVariantProps["size"];
-    appearance?: AvatarVariantProps["appearance"];
-    as?: ElementType;
+  size?: AvatarVariantProps["size"];
+  appearance?: AvatarVariantProps["appearance"];
+  as?: ElementType;
 }
+
 export type AvatarProps = Omit<AvatarBaseProps, "as">;
+
 export type AvatarImageProps = ComponentPropsWithoutRef<"img">;
+
 export type AvatarFallbackProps = ComponentPropsWithoutRef<"span"> & {
-    delayMs?: number;
+  delayMs?: number;
 };
+
 export type AvatarGroupProps = ComponentPropsWithoutRef<"div"> & {
-    /** Max avatars before +N overflow label */
-    max?: number;
+  /** Max avatars before +N overflow label */
+  max?: number;
 };
+
 export type ImageStatus = "idle" | "loaded" | "error";
+
 export type AvatarCtx = {
-    imageStatus: ImageStatus;
-    setImageStatus: (v: ImageStatus) => void;
+  imageStatus: ImageStatus;
+  setImageStatus: (v: ImageStatus) => void;
 };
-export {};
-//# sourceMappingURL=types.d.ts.map

package/src/ui/avatar/variants.ts

@@ -0,0 +1,52 @@
+import { cva } from "class-variance-authority";
+
+export const avatarVariants = cva(
+  "relative flex shrink-0 overflow-hidden rounded-full border border-white/10 bg-white/10 text-slate-200",
+  {
+    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",
+        sky: "border-sky-600 bg-sky-600/[0.03] text-slate-200",
+        rose: "border-rose-600 bg-rose-600/[0.03] text-slate-200",
+        purple: "border-purple-600 bg-purple-600/[0.03] text-slate-200",
+        pink: "border-pink-600 bg-pink-600/[0.03] text-slate-200",
+        orange: "border-orange-600 bg-orange-600/[0.03] text-slate-200",
+        yellow: "border-yellow-600 bg-yellow-600/[0.03] text-slate-200",
+        teal: "border-teal-600 bg-teal-600/[0.03] text-slate-200",
+        indigo: "border-indigo-600 bg-indigo-600/[0.03] text-slate-200",
+        emerald: "border-emerald-600 bg-emerald-600/[0.03] text-slate-200",
+        gray: "border-gray-600 bg-gray-600/[0.03] text-slate-200",
+        amber: "border-amber-600 bg-amber-600/[0.03] text-slate-200",
+        violet: "border-violet-600 bg-violet-600/[0.03] text-slate-200",
+        "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",
+        md: "size-10 text-sm",
+        lg: "size-12 text-base",
+        xl: "size-16 text-lg",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+      appearance: "default",
+    },
+  },
+);
+
+export const avatarImageVariants = cva("aspect-square size-full object-cover");
+
+export const avatarFallbackVariants = cva(
+  "flex size-full items-center justify-center bg-slate-800 font-medium text-slate-100",
+);
+
+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/animations.ts

@@ -0,0 +1,20 @@
+import { BadgeAnimationPresets } from "./types";
+
+export const badgeAnimationPresets: BadgeAnimationPresets = {
+  none: {},
+  pop: {
+    initial: { scale: 0.92, opacity: 0 },
+    animate: { scale: 1, opacity: 1 },
+    transition: { type: "spring", stiffness: 520, damping: 28 },
+  },
+  bounce: {
+    whileHover: { y: -2, scale: 1.04 },
+    whileTap: { scale: 0.96 },
+    transition: { type: "spring", bounce: 0.45, stiffness: 420, damping: 18 },
+  },
+  fade: {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    transition: { duration: 0.2 },
+  },
+};

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

@@ -0,0 +1,28 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+import { badgeAnimationPresets } from "./animations";
+import { BadgeBase } from "../badge-base";
+import type { BadgeBaseProps } from "../types";
+import type { BadgeAnimatedProps } from "./types";
+
+export function BadgeAnimated({
+  animation = "none",
+  ...props
+}: BadgeAnimatedProps) {
+  const motionProps = badgeAnimationPresets[animation];
+
+  return (
+    <BadgeBase
+      {...({
+        as: motion.span,
+        initial: animation === "none" ? false : undefined,
+        ...motionProps,
+        ...props,
+      } as BadgeBaseProps)}
+    />
+  );
+}
+
+BadgeAnimated.displayName = "BadgeAnimated";

package/{dist/ui/badge/animated/index.d.ts → src/ui/badge/animated/index.ts}

@@ -1,4 +1,5 @@
+"use client";
+
 export { BadgeAnimated } from "./badge-animated";
 export type { BadgeAnimatedProps, BadgeAnimation, BadgeAnimationPresets } from "./types";
-export { badgeAnimationPresets } from "./animations";
-//# sourceMappingURL=index.d.ts.map
+export { badgeAnimationPresets } from "./animations";

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

@@ -0,0 +1,18 @@
+import { HTMLMotionProps } from "framer-motion";
+import type { BadgeBaseProps } from "../types";
+
+export type BadgeAnimatedProps = Omit<BadgeBaseProps, "as"> & {
+  animation?: BadgeAnimation;
+};
+export type BadgeAnimation = "none" | "pop" | "bounce" | "fade";
+
+
+type BadgePresetMotionProps = Pick<
+  HTMLMotionProps<"span">,
+  "style" | "transition" | "whileHover" | "whileTap" | "animate" | "initial"
+>;
+
+export type BadgeAnimationPresets = Record<
+  BadgeAnimation,
+  BadgePresetMotionProps
+>;

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

@@ -0,0 +1,53 @@
+"use client";
+
+import { HiXMark } from "react-icons/hi2";
+
+import { cn } from "../../lib/utils";
+
+import type { BadgeBaseProps } from "./types";
+import { badgeCloseButtonVariants, badgeVariants } from "./variants";
+
+export function BadgeBase({
+  className,
+  appearance,
+  size,
+  shape,
+  closable = false,
+  onClose,
+  closeLabel = "Remove",
+  children,
+  ref,
+  "aria-label": ariaLabel,
+  as: Wrapper = "span",
+  ...rest
+}: BadgeBaseProps) {
+  const isDot = shape === "dot";
+  const resolvedAriaLabel =
+    ariaLabel ?? (isDot ? "Status indicator" : undefined);
+
+  return (
+    <Wrapper
+      ref={ref}
+      role="status"
+      data-slot="badge"
+      aria-label={resolvedAriaLabel}
+      className={cn(badgeVariants({ appearance, size, shape }), className)}
+      {...rest}
+    >
+      {!isDot ? children : null}
+      {closable ? (
+        <button
+          type="button"
+          data-slot="badge-close"
+          aria-label={closeLabel}
+          onClick={onClose}
+          className={badgeCloseButtonVariants({ size })}
+        >
+          <HiXMark className="size-3.5" aria-hidden />
+        </button>
+      ) : null}
+    </Wrapper>
+  );
+}
+
+BadgeBase.displayName = "Badge";

package/src/ui/badge/badge.test.tsx

@@ -0,0 +1,48 @@
+import { createRef } from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import { Badge } from "./badge";
+
+describe("Badge", () => {
+  it("should expose displayName", () => {
+    expect(Badge.displayName).toBe("Badge");
+  });
+
+  it("should stamp data-slot", () => {
+    render(<Badge>Tag</Badge>);
+    const root = document.querySelector('[data-slot="badge"]');
+    expect(root).toBeTruthy();
+    expect(root?.getAttribute("data-slot")).toBe("badge");
+  });
+
+  it("should apply secondary appearance", () => {
+    render(<Badge appearance="secondary">S</Badge>);
+    const root = document.querySelector('[data-slot="badge"]') as HTMLElement;
+    expect(root.className).toMatch(/bg-slate-800/);
+  });
+
+  it("should call onClose when closable", async () => {
+    const user = userEvent.setup();
+    const onClose = vi.fn();
+    render(
+      <Badge closable onClose={onClose}>
+        X
+      </Badge>,
+    );
+    await user.click(screen.getByRole("button", { name: "Remove" }));
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it("should forward ref", () => {
+    const ref = createRef<HTMLSpanElement>();
+    render(<Badge ref={ref}>R</Badge>);
+    expect(ref.current?.getAttribute("data-slot")).toBe("badge");
+  });
+
+  it("should set aria-label for dot variant by default", () => {
+    render(<Badge shape="dot" appearance="emerald" />);
+    expect(screen.getByLabelText("Status indicator")).toBeInTheDocument();
+  });
+});

package/src/ui/badge/badge.tsx

@@ -0,0 +1,9 @@
+// badge.tsx — default static entry (no framer-motion)
+import { BadgeBase } from "./badge-base";
+import type { BadgeProps } from "./types";
+
+export function Badge(props: BadgeProps) {
+  return <BadgeBase {...props} />;
+}
+
+Badge.displayName = "Badge";

package/{dist/ui/badge/index.d.ts → src/ui/badge/index.ts}

@@ -1,4 +1,5 @@
+"use client";
+
 export { Badge } from "./badge";
 export type { BadgeBaseProps, BadgeProps, BadgeVariantProps } from "./types";
 export { badgeVariants, badgeCloseButtonVariants } from "./variants";
-//# sourceMappingURL=index.d.ts.map

package/src/ui/badge/types.ts

@@ -0,0 +1,25 @@
+import type { VariantProps } from "class-variance-authority";
+import type {
+  ComponentPropsWithRef,
+  ElementType,
+  MouseEventHandler,
+  ReactNode,
+} from "react";
+
+import type { badgeVariants } from "./variants";
+
+export type BadgeVariantProps = VariantProps<typeof badgeVariants>;
+
+export interface BadgeBaseProps extends ComponentPropsWithRef<"span"> {
+  appearance?: BadgeVariantProps["appearance"];
+  size?: BadgeVariantProps["size"];
+  shape?: BadgeVariantProps["shape"];
+  closable?: boolean;
+  onClose?: MouseEventHandler<HTMLButtonElement>;
+  closeLabel?: string;
+  children?: ReactNode;
+  "aria-label"?: string;
+  as?: ElementType;
+}
+
+export type BadgeProps = Omit<BadgeBaseProps, "as">;

package/src/ui/badge/variants.ts

@@ -0,0 +1,85 @@
+import { cva } from "class-variance-authority";
+
+/**
+ * Tailwind class maps mirroring `buttons/variants.ts` appearance tokens.
+ * Reused by primitives that should stay visually aligned with Button.
+ */
+export const buttonLikeSolidAppearances = {
+  default: "bg-slate-50 text-slate-950 shadow-[0_1px_2px_rgba(15,23,42,0.12)]",
+  secondary: "bg-slate-800 text-slate-50",
+  destructive: "bg-rose-600 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",
+  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",
+} as const;
+
+export type ButtonLikeSolidAppearance = keyof typeof buttonLikeSolidAppearances;
+
+const badgeAppearances = {
+  ...buttonLikeSolidAppearances,
+  outline: "border border-white/15 bg-transparent text-slate-200 shadow-none",
+  ghost: "bg-transparent text-slate-300 shadow-none",
+} as const;
+
+export const badgeVariants = cva(
+  [
+    "inline-flex max-w-full items-center justify-center gap-1 font-medium",
+    "whitespace-nowrap ring-offset-slate-950 transition-colors",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300 focus-visible:ring-offset-2",
+    "select-none",
+  ],
+  {
+    variants: {
+      appearance: badgeAppearances,
+      size: {
+        sm: "h-6 min-h-6 px-2 text-[0.65rem] leading-none",
+        md: "h-7 min-h-7 px-2.5 text-xs leading-none",
+        lg: "h-8 min-h-8 px-3 text-sm leading-none",
+      },
+      shape: {
+        pill: "rounded-full",
+        square: "rounded-md",
+        dot: "h-2.5 min-h-2.5 w-2.5 min-w-2.5 rounded-full p-0 px-0 text-[0]",
+      },
+    },
+    defaultVariants: {
+      appearance: "default",
+      size: "md",
+      shape: "pill",
+    },
+  },
+);
+
+export const badgeCloseButtonVariants = cva(
+  "inline-flex shrink-0 items-center justify-center rounded-md p-0.5 text-current opacity-70 transition hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40",
+  {
+    variants: {
+      size: {
+        sm: "size-4",
+        md: "size-5",
+        lg: "size-6",
+      },
+    },
+    defaultVariants: { size: "md" },
+  },
+);