@zentauri-ui/zentauri-components 1.3.0 → 1.4.0

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;
+  };

package/src/ui/breadcrumb/variants.ts

@@ -0,0 +1,53 @@
+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",
+      },
+    },
+    defaultVariants: {
+      appearance: "default",
+    },
+  }
+);
+
+export const breadcrumbListVariants = cva("flex flex-wrap items-center gap-1.5");
+
+export const breadcrumbItemVariants = cva("inline-flex items-center gap-1.5");
+
+export const breadcrumbLinkVariants = cva(
+  "rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/30 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950",
+);
+
+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",
+    },
+  },
+);

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

@@ -0,0 +1,34 @@
+import type { AnimationPresets } from "./types";
+
+export const buttonAnimationPresets: AnimationPresets = {
+  none: {},
+  lift: {
+    whileHover: { y: -2, scale: 1.02 },
+    whileTap: { y: 0, scale: 0.98 },
+    transition: { type: "spring", stiffness: 420, damping: 28 },
+  },
+  press: {
+    whileTap: { scale: 0.96 },
+    transition: { type: "spring", stiffness: 520, damping: 30 },
+  },
+  glow: {
+    whileHover: {
+      boxShadow:
+        "0 0 0 1px rgba(255,255,255,0.25), 0 18px 42px rgba(15,23,42,0.35)",
+      scale: 1.01,
+    },
+    whileTap: { scale: 0.98 },
+    transition: { duration: 0.2, ease: "easeOut" },
+  },
+  tilt: {
+    whileHover: { rotateX: 6, rotateY: -6, scale: 1.01 },
+    whileTap: { scale: 0.98, rotateX: 0, rotateY: 0 },
+    transition: { type: "spring", stiffness: 300, damping: 20 },
+    style: { transformStyle: "preserve-3d" },
+  },
+  bounce: {
+    whileHover: { y: -4, scale: 1.03 },
+    whileTap: { y: 0, scale: 0.97 },
+    transition: { type: "spring", bounce: 0.45, duration: 0.45 },
+  },
+};

package/src/ui/buttons/animated/button-animated.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+import { cn } from "../../../lib/utils";
+
+import { buttonAnimationPresets } from "./animations";
+import type { ButtonAnimatedProps } from "./types";
+import { buttonVariants } from "../variants";
+
+export const ButtonAnimated = (props: ButtonAnimatedProps) => {
+  if (props.as === "link") {
+    const {
+      className,
+      appearance,
+      size,
+      children,
+      ref,
+      href,
+      target,
+      animation = "none",
+      ...rest
+    } = props;
+    const motionProps = buttonAnimationPresets[animation];
+
+    return (
+      <motion.a
+        ref={ref}
+        href={href}
+        target={target}
+        rel={target === "_blank" ? "noopener noreferrer" : undefined}
+        data-slot="button"
+        className={cn(buttonVariants({ appearance, size }), className)}
+        initial={false}
+        {...motionProps}
+        {...rest}
+      >
+        {children}
+      </motion.a>
+    );
+  }
+
+  const {
+    className,
+    appearance,
+    size,
+    type = "button",
+    children,
+    ref,
+    animation = "none",
+    ...rest
+  } = props;
+  const motionProps = buttonAnimationPresets[animation];
+
+  return (
+    <motion.button
+      ref={ref}
+      type={type}
+      data-slot="button"
+      className={cn(buttonVariants({ appearance, size }), className)}
+      initial={false}
+      {...motionProps}
+      {...rest}
+    >
+      {children}
+    </motion.button>
+  );
+};
+
+ButtonAnimated.displayName = "ButtonAnimated";

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

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

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

@@ -0,0 +1,29 @@
+import type { VariantProps } from "class-variance-authority";
+import type { HTMLMotionProps } from "framer-motion";
+
+import type { buttonVariants } from "../variants";
+
+export type ButtonAnimation =
+  | "none"
+  | "lift"
+  | "press"
+  | "glow"
+  | "tilt"
+  | "bounce";
+
+export type ButtonSharedAnimated = VariantProps<typeof buttonVariants> & {
+  animation?: ButtonAnimation;
+};
+
+export type ButtonAnimatedProps =
+  | (ButtonSharedAnimated & HTMLMotionProps<"button"> & { as?: "button" })
+  | (ButtonSharedAnimated & HTMLMotionProps<"a"> & { as: "link" });
+
+/** Motion props applied by presets; valid on both `motion.button` and `motion.a`. */
+export type ButtonPresetMotionProps = Pick<
+  HTMLMotionProps<"button">,
+  "style" | "transition" | "whileHover" | "whileTap"
+>;
+
+
+export type AnimationPresets = Record<ButtonAnimation, ButtonPresetMotionProps>;

package/src/ui/buttons/button-base.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { cn } from "../../lib/utils";
+
+import type { ButtonProps } from "./types";
+import { buttonVariants } from "./variants";
+
+export const ButtonBase = (props: ButtonProps) => {
+  if (props.as === "link") {
+    const {
+      className,
+      appearance,
+      size,
+      children,
+      ref,
+      href,
+      target,
+      ...rest
+    } = props;
+
+    return (
+      <a
+        ref={ref}
+        href={href}
+        target={target}
+        rel={target === "_blank" ? "noopener noreferrer" : undefined}
+        data-slot="button"
+        className={cn(buttonVariants({ appearance, size }), className)}
+        {...rest}
+      >
+        {children}
+      </a>
+    );
+  }
+
+  const {
+    className,
+    appearance,
+    size,
+    type = "button",
+    children,
+    ref,
+    ...rest
+  } = props;
+
+  return (
+    <button
+      ref={ref}
+      type={type}
+      data-slot="button"
+      className={cn(buttonVariants({ appearance, size }), className)}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+};
+
+ButtonBase.displayName = "Button";