@zentauri-ui/zentauri-components 1.3.1 → 1.4.0

package/src/ui/avatar/types.ts

@@ -0,0 +1,36 @@
+import type { VariantProps } from "class-variance-authority";
+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;
+}
+
+export type AvatarProps = Omit<AvatarBaseProps, "as">;
+
+export type AvatarImageProps = ComponentPropsWithoutRef<"img">;
+
+export type AvatarFallbackProps = ComponentPropsWithoutRef<"span"> & {
+  delayMs?: number;
+};
+
+export type AvatarGroupProps = ComponentPropsWithoutRef<"div"> & {
+  /** Max avatars before +N overflow label */
+  max?: number;
+};
+
+export type ImageStatus = "idle" | "loaded" | "error";
+
+export type AvatarCtx = {
+  imageStatus: ImageStatus;
+  setImageStatus: (v: ImageStatus) => void;
+};

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/src/ui/badge/animated/index.ts

@@ -0,0 +1,5 @@
+"use client";
+
+export { BadgeAnimated } from "./badge-animated";
+export type { BadgeAnimatedProps, BadgeAnimation, BadgeAnimationPresets } from "./types";
+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/src/ui/badge/index.ts

@@ -0,0 +1,5 @@
+"use client";
+
+export { Badge } from "./badge";
+export type { BadgeBaseProps, BadgeProps, BadgeVariantProps } from "./types";
+export { badgeVariants, badgeCloseButtonVariants } from "./variants";

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" },
+  },
+);

package/src/ui/breadcrumb/breadcrumb.test.tsx

@@ -0,0 +1,62 @@
+import { createRef } from "react";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "./breadcrumb";
+
+describe("Breadcrumb", () => {
+  it("should expose displayName on primitives", () => {
+    expect(Breadcrumb.displayName).toBe("Breadcrumb");
+    expect(BreadcrumbList.displayName).toBe("BreadcrumbList");
+    expect(BreadcrumbItem.displayName).toBe("BreadcrumbItem");
+    expect(BreadcrumbLink.displayName).toBe("BreadcrumbLink");
+    expect(BreadcrumbPage.displayName).toBe("BreadcrumbPage");
+    expect(BreadcrumbSeparator.displayName).toBe("BreadcrumbSeparator");
+  });
+
+  it("should stamp data-slot on breadcrumb root", () => {
+    render(
+      <Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <BreadcrumbLink href="/">Home</BreadcrumbLink>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>,
+    );
+    expect(document.querySelector('[data-slot="breadcrumb"]')).toBeTruthy();
+  });
+
+  it("should mark current page with aria-current", () => {
+    render(
+      <Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <BreadcrumbPage>Settings</BreadcrumbPage>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>,
+    );
+    expect(screen.getByText("Settings")).toHaveAttribute(
+      "aria-current",
+      "page",
+    );
+  });
+
+  it("should forward ref on Breadcrumb", () => {
+    const ref = createRef<HTMLElement>();
+    render(
+      <Breadcrumb ref={ref}>
+        <BreadcrumbList />
+      </Breadcrumb>,
+    );
+    expect(ref.current?.getAttribute("data-slot")).toBe("breadcrumb");
+  });
+});

package/src/ui/breadcrumb/breadcrumb.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+import type { Ref } from "react";
+
+import { cn } from "../../lib/utils";
+
+import type {
+  BreadcrumbItemProps,
+  BreadcrumbLinkProps,
+  BreadcrumbListProps,
+  BreadcrumbPageProps,
+  BreadcrumbProps,
+  BreadcrumbSeparatorProps,
+} from "./types";
+import {
+  breadcrumbItemVariants,
+  breadcrumbLinkVariants,
+  breadcrumbListVariants,
+  breadcrumbNavVariants,
+  breadcrumbPageVariants,
+  breadcrumbSeparatorVariants,
+} from "./variants";
+
+export function Breadcrumb({
+  className,
+  ref,
+  "aria-label": ariaLabel = "Breadcrumb",
+  ...rest
+}: BreadcrumbProps) {
+  return (
+    <nav
+      ref={ref}
+      data-slot="breadcrumb"
+      aria-label={ariaLabel}
+      className={cn(className)}
+      {...rest}
+    />
+  );
+}
+
+Breadcrumb.displayName = "Breadcrumb";
+
+export function BreadcrumbList({
+  className,
+  ref,
+  ...rest
+}: BreadcrumbListProps & { ref?: Ref<HTMLOListElement> }) {
+  return (
+    <ol
+      ref={ref}
+      data-slot="breadcrumb-list"
+      className={cn(breadcrumbListVariants(), className)}
+      {...rest}
+    />
+  );
+}
+
+BreadcrumbList.displayName = "BreadcrumbList";
+
+export function BreadcrumbItem({
+  className,
+  ref,
+  ...rest
+}: BreadcrumbItemProps & { ref?: Ref<HTMLLIElement> }) {
+  return (
+    <li
+      ref={ref}
+      data-slot="breadcrumb-item"
+      className={cn(breadcrumbItemVariants(), className)}
+      {...rest}
+    />
+  );
+}
+
+BreadcrumbItem.displayName = "BreadcrumbItem";
+
+export function BreadcrumbLink({
+  className,
+  ref,
+  appearance = "default",
+  ...rest
+}: BreadcrumbLinkProps) {
+  return (
+    <a
+      ref={ref}
+      data-slot="breadcrumb-link"
+      className={cn(breadcrumbLinkVariants(), breadcrumbNavVariants({ appearance }), className)}
+      {...rest}
+    />
+  );
+}
+
+BreadcrumbLink.displayName = "BreadcrumbLink";
+
+export function BreadcrumbPage({
+  className,
+  ref,
+  appearance = "default",
+  ...rest
+}: BreadcrumbPageProps) {
+  return (
+    <span
+      ref={ref}
+      data-slot="breadcrumb-page"
+      aria-current="page"
+      className={cn(breadcrumbPageVariants(), breadcrumbNavVariants({ appearance }), className)}
+      {...rest}
+    />
+  );
+}
+
+BreadcrumbPage.displayName = "BreadcrumbPage";
+
+export function BreadcrumbSeparator({
+  className,
+  size,
+  children = "/",
+  ref,
+  ...rest
+}: BreadcrumbSeparatorProps & { ref?: Ref<HTMLSpanElement> }) {
+  return (
+    <span
+      ref={ref}
+      data-slot="breadcrumb-separator"
+      aria-hidden
+      role="presentation"
+      className={cn(breadcrumbSeparatorVariants({ size }), className)}
+      {...rest}
+    >
+      {children}
+    </span>
+  );
+}
+
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";

package/src/ui/breadcrumb/index.ts

@@ -0,0 +1,28 @@
+"use client";
+
+export {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "./breadcrumb";
+export type {
+  SeparatorVariantProps,
+  BreadcrumbItemProps,
+  BreadcrumbLinkProps,
+  BreadcrumbListProps,
+  BreadcrumbPageProps,
+  BreadcrumbProps,
+  BreadcrumbSeparatorProps,
+  BreadcrumbAppearance,
+} from "./types";
+export {
+  breadcrumbItemVariants,
+  breadcrumbLinkVariants,
+  breadcrumbListVariants,
+  breadcrumbNavVariants,
+  breadcrumbPageVariants,
+  breadcrumbSeparatorVariants,
+} from "./variants";

package/src/ui/breadcrumb/types.ts

@@ -0,0 +1,29 @@
+import type { VariantProps } from "class-variance-authority";
+import type { ComponentPropsWithoutRef, ReactNode, Ref } from "react";
+
+import type { breadcrumbSeparatorVariants, breadcrumbNavVariants, breadcrumbLinkVariants, breadcrumbPageVariants } from "./variants";
+
+export type BreadcrumbProps = ComponentPropsWithoutRef<"nav"> & {
+  "aria-label"?: string;
+} & { ref?: Ref<HTMLElement> };
+
+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 BreadcrumbPageProps = ComponentPropsWithoutRef<"span"> & VariantProps<typeof breadcrumbPageVariants> & {
+  appearance?: BreadcrumbAppearance;
+} & { ref?: Ref<HTMLSpanElement> };
+
+export type SeparatorVariantProps = VariantProps<typeof breadcrumbSeparatorVariants>;
+
+export type BreadcrumbAppearance = NonNullable<VariantProps<typeof breadcrumbNavVariants>["appearance"]>;
+
+export type BreadcrumbSeparatorProps = ComponentPropsWithoutRef<"span"> &
+  SeparatorVariantProps & {
+    children?: ReactNode;
+  };