@zentauri-ui/zentauri-components 1.3.1 → 1.4.0

package/src/ui/accordion/accordion.test.tsx

@@ -0,0 +1,146 @@
+import { useState } from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "./accordion";
+
+describe("Accordion", () => {
+  describe("public contract and metadata", () => {
+    it("should expose displayName on compound parts", () => {
+      expect(Accordion.displayName).toBe("Accordion");
+      expect(AccordionItem.displayName).toBe("AccordionItem");
+      expect(AccordionTrigger.displayName).toBe("AccordionTrigger");
+      expect(AccordionContent.displayName).toBe("AccordionContent");
+    });
+
+    it("should stamp data-slot on the root container", () => {
+      render(
+        <Accordion defaultValue="one">
+          <AccordionItem value="one">
+            <AccordionTrigger>One</AccordionTrigger>
+            <AccordionContent>Panel one</AccordionContent>
+          </AccordionItem>
+        </Accordion>,
+      );
+      const root = document.querySelector('[data-slot="accordion"]');
+      expect(root).toBeTruthy();
+      expect(root?.getAttribute("data-slot")).toBe("accordion");
+    });
+  });
+
+  describe("single mode", () => {
+    it("should show panel content when defaultValue matches", () => {
+      render(
+        <Accordion defaultValue="a">
+          <AccordionItem value="a">
+            <AccordionTrigger>Item A</AccordionTrigger>
+            <AccordionContent>Content A</AccordionContent>
+          </AccordionItem>
+        </Accordion>,
+      );
+      expect(screen.getByRole("region")).toHaveTextContent("Content A");
+      expect(screen.getByRole("button", { name: "Item A" })).toHaveAttribute(
+        "aria-expanded",
+        "true",
+      );
+    });
+
+    it("should toggle aria-expanded and panel visibility when the trigger is clicked", async () => {
+      const user = userEvent.setup();
+      render(
+        <Accordion defaultValue="a">
+          <AccordionItem value="a">
+            <AccordionTrigger>Item A</AccordionTrigger>
+            <AccordionContent>Content A</AccordionContent>
+          </AccordionItem>
+        </Accordion>,
+      );
+      await user.click(screen.getByRole("button", { name: "Item A" }));
+      expect(screen.getByRole("button", { name: "Item A" })).toHaveAttribute(
+        "aria-expanded",
+        "false",
+      );
+      expect(screen.queryByRole("region")).not.toBeInTheDocument();
+    });
+
+    it("should wire aria-controls to the panel id", () => {
+      render(
+        <Accordion defaultValue="x">
+          <AccordionItem value="x">
+            <AccordionTrigger>Open</AccordionTrigger>
+            <AccordionContent>Inside</AccordionContent>
+          </AccordionItem>
+        </Accordion>,
+      );
+      const trigger = screen.getByRole("button", { name: "Open" });
+      const controls = trigger.getAttribute("aria-controls");
+      expect(controls).toBe("x-panel");
+      expect(document.getElementById("x-panel")).toBe(
+        screen.getByRole("region"),
+      );
+    });
+  });
+
+  describe("multiple mode", () => {
+    it("should allow more than one panel open when type is multiple", async () => {
+      const user = userEvent.setup();
+      render(
+        <Accordion type="multiple" defaultValues={["a"]}>
+          <AccordionItem value="a">
+            <AccordionTrigger>A</AccordionTrigger>
+            <AccordionContent>Panel A</AccordionContent>
+          </AccordionItem>
+          <AccordionItem value="b">
+            <AccordionTrigger>B</AccordionTrigger>
+            <AccordionContent>Panel B</AccordionContent>
+          </AccordionItem>
+        </Accordion>,
+      );
+      await user.click(screen.getByRole("button", { name: "B" }));
+      expect(screen.getByRole("button", { name: "A" })).toHaveAttribute(
+        "aria-expanded",
+        "true",
+      );
+      expect(screen.getByRole("button", { name: "B" })).toHaveAttribute(
+        "aria-expanded",
+        "true",
+      );
+      expect(screen.getByText("Panel A")).toBeInTheDocument();
+      expect(screen.getByText("Panel B")).toBeInTheDocument();
+    });
+  });
+
+  describe("controlled single mode", () => {
+    it("should reflect external value changes and invoke onValueChange", async () => {
+      const user = userEvent.setup();
+      function Controlled() {
+        const [value, setValue] = useState<string | undefined>("a");
+        return (
+          <Accordion type="single" value={value} onValueChange={setValue}>
+            <AccordionItem value="a">
+              <AccordionTrigger>A</AccordionTrigger>
+              <AccordionContent>Panel A</AccordionContent>
+            </AccordionItem>
+            <AccordionItem value="b">
+              <AccordionTrigger>B</AccordionTrigger>
+              <AccordionContent>Panel B</AccordionContent>
+            </AccordionItem>
+          </Accordion>
+        );
+      }
+      render(<Controlled />);
+      await user.click(screen.getByRole("button", { name: "B" }));
+      expect(screen.getByRole("button", { name: "B" })).toHaveAttribute(
+        "aria-expanded",
+        "true",
+      );
+      expect(screen.getByText("Panel B")).toBeInTheDocument();
+    });
+  });
+});

package/src/ui/accordion/accordion.tsx

@@ -0,0 +1,11 @@
+// accordion.tsx — default static entry (no framer-motion on content)
+import { AccordionBase, AccordionContent, AccordionItem, AccordionTrigger } from "./accordion-base";
+import type { AccordionProps } from "./types";
+
+export function Accordion(props: AccordionProps) {
+  return <AccordionBase {...props} />;
+}
+
+Accordion.displayName = "Accordion";
+
+export { AccordionContent, AccordionItem, AccordionTrigger };

package/src/ui/accordion/animated/accordion-content-animated.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+import { cn } from "../../../lib/utils";
+
+import { accordionContentTransitionPresets } from "./animations";
+import { useAccordionContext, useAccordionItemValue } from "../accordion-base";
+import { accordionContentVariants } from "../variants";
+import { AccordionContentAnimatedProps } from "./types";
+
+export function AccordionContentAnimated({
+  className,
+  children,
+  transitionVariant = "default",
+  ref,
+}: AccordionContentAnimatedProps) {
+  const itemValue = useAccordionItemValue("AccordionContent");
+  const {
+    isOpen,
+    size,
+  } = useAccordionContext("AccordionContent");
+  const open = isOpen(itemValue);
+  const panelId = `${itemValue}-panel`;
+  const transitionConfig = accordionContentTransitionPresets[transitionVariant];
+  const motionless = transitionVariant === "none";
+
+  return open ? (
+    <motion.div
+      key={itemValue}
+      ref={ref}
+      id={panelId}
+      role="region"
+      data-slot="accordion-content"
+      className={cn(accordionContentVariants({ size }), className)}
+      initial={motionless ? false : { opacity: 0 }}
+      animate={motionless ? undefined : { opacity: 1 }}
+      exit={motionless ? undefined : { opacity: 0 }}
+      transition={transitionConfig}
+    >
+      {children}
+    </motion.div>
+  ) : null;
+}
+
+AccordionContentAnimated.displayName = "AccordionContentAnimated";

package/src/ui/accordion/animated/accordion-root-animated.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+import { AccordionBase } from "../accordion-base";
+import type { AccordionAnimatedProps } from "./types";
+
+export function Accordion(props: AccordionAnimatedProps) {
+  return <AccordionBase {...props} />;
+}
+
+Accordion.displayName = "Accordion";

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

@@ -0,0 +1,16 @@
+import type { Transition } from "framer-motion";
+
+/** Easing and duration presets for accordion panel open/close (opacity only). */
+export type AccordionTransition = "none" | "default" | "smooth" | "slow";
+
+export type AccordionTransitionPresets = Record<
+  AccordionTransition,
+  Transition
+>;
+
+export const accordionContentTransitionPresets: AccordionTransitionPresets = {
+  none: { duration: 0 },
+  default: { duration: 0.2, ease: [0.4, 0, 0.2, 1] },
+  smooth: { duration: 0.28, ease: [0.22, 1, 0.36, 1] },
+  slow: { duration: 0.38, ease: [0.4, 0, 0.2, 1] },
+};

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

@@ -0,0 +1,7 @@
+"use client";
+
+export { Accordion } from "./accordion-root-animated";
+export { AccordionItem, AccordionTrigger } from "../accordion-base";
+export { AccordionContentAnimated } from "./accordion-content-animated";
+export type { AccordionAnimatedProps, AccordionContentAnimatedProps } from "./types";
+export { accordionContentTransitionPresets } from "./animations";

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

@@ -0,0 +1,7 @@
+import type { AccordionBaseProps, AccordionContentProps, AccordionTransition } from "../types";
+
+export type AccordionAnimatedProps = AccordionBaseProps;
+
+export type AccordionContentAnimatedProps = AccordionContentProps & {
+  transitionVariant?: AccordionTransition;
+};

package/src/ui/accordion/index.ts

@@ -0,0 +1,23 @@
+"use client";
+
+export {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "./accordion";
+export type { AccordionBaseProps } from "./types";
+export type {
+  AccordionContentProps,
+  AccordionItemProps,
+  AccordionProps,
+  AccordionTransition,
+  AccordionTriggerProps,
+  AccordionType,
+} from "./types";
+export {
+  accordionVariants,
+  accordionItemVariants,
+  accordionTriggerVariants,
+  accordionContentVariants,
+} from "./variants";

package/src/ui/accordion/types.ts

@@ -0,0 +1,48 @@
+import type { VariantProps } from "class-variance-authority";
+import type { HTMLAttributes, ReactNode, Ref } from "react";
+
+import type { AccordionTransition } from "./animated/animations";
+import type { accordionVariants } from "./variants";
+
+export type { AccordionTransition };
+
+type AccordionVariantProps = VariantProps<typeof accordionVariants>;
+
+export type AccordionType = "single" | "multiple";
+
+export type AccordionBaseProps = AccordionVariantProps & {
+  type?: AccordionType;
+  /** Controlled value for `single` mode. */
+  value?: string;
+  /** Controlled values for `multiple` mode. */
+  values?: string[];
+  defaultValue?: string;
+  defaultValues?: string[];
+  onValueChange?: (value: string | undefined) => void;
+  onValuesChange?: (values: string[]) => void;
+  className?: string;
+  children?: ReactNode;
+};
+
+export type AccordionProps = AccordionBaseProps;
+
+export type AccordionItemProps = HTMLAttributes<HTMLDivElement> & {
+  value: string;
+  ref?: Ref<HTMLDivElement>;
+};
+
+export type AccordionTriggerProps = HTMLAttributes<HTMLButtonElement> & {
+  ref?: Ref<HTMLButtonElement>;
+};
+
+export type AccordionContentProps = HTMLAttributes<HTMLDivElement> & {
+  ref?: Ref<HTMLDivElement>;
+};
+
+export type AccordionCtx = {
+  type: NonNullable<AccordionProps["type"]>;
+  appearance: NonNullable<AccordionProps["appearance"]>;
+  size: NonNullable<AccordionProps["size"]>;
+  isOpen: (value: string) => boolean;
+  toggle: (value: string) => void;
+};

package/src/ui/accordion/variants.ts

@@ -0,0 +1,115 @@
+import { cva } from "class-variance-authority";
+
+export const accordionVariants = cva("w-full", {
+  variants: {
+    appearance: {
+      default: "divide-y divide-white/10 rounded-xl border border-white/10",
+      outline: "divide-y divide-white/10 rounded-xl border border-white/15",
+      ghost: "divide-y divide-white/5",
+      card: "space-y-2",
+      separated: "space-y-3",
+      sky: "divide-y divide-sky-600 rounded-xl border border-sky-600",
+      rose: "divide-y divide-rose-600 rounded-xl border border-rose-600",
+      purple: "divide-y divide-purple-600 rounded-xl border border-purple-600",
+      pink: "divide-y divide-pink-600 rounded-xl border border-pink-600",
+      orange: "divide-y divide-orange-600 rounded-xl border border-orange-600",
+      yellow: "divide-y divide-yellow-600 rounded-xl border border-yellow-600",
+      teal: "divide-y divide-teal-600 rounded-xl border border-teal-600",
+      indigo: "divide-y divide-indigo-600 rounded-xl border border-indigo-600",
+      emerald:
+        "divide-y divide-emerald-600 rounded-xl border border-emerald-600",
+      "gradient-blue":
+        "divide-y divide-gradient-to-r from-blue-600 to-purple-600 rounded-xl border border-gradient-to-r from-blue-600 to-purple-600",
+      "gradient-green":
+        "divide-y divide-gradient-to-r from-green-600 to-lime-600 rounded-xl border border-gradient-to-r from-green-600 to-lime-600",
+      "gradient-red":
+        "divide-y divide-gradient-to-r from-red-600 to-pink-600 rounded-xl border border-gradient-to-r from-red-600 to-pink-600",
+      "gradient-yellow":
+        "divide-y divide-gradient-to-r from-yellow-600 to-orange-600 rounded-xl border border-gradient-to-r from-yellow-600 to-orange-600",
+      "gradient-purple":
+        "divide-y divide-gradient-to-r from-purple-600 to-pink-600 rounded-xl border border-gradient-to-r from-purple-600 to-pink-600",
+      "gradient-teal":
+        "divide-y divide-gradient-to-r from-teal-600 to-cyan-600 rounded-xl border border-gradient-to-r from-teal-600 to-cyan-600",
+      "gradient-indigo":
+        "divide-y divide-gradient-to-r from-indigo-600 to-purple-600 rounded-xl border border-gradient-to-r from-indigo-600 to-purple-600",
+      "gradient-pink":
+        "divide-y divide-gradient-to-r from-pink-600 to-rose-600 rounded-xl border border-gradient-to-r from-pink-600 to-rose-600",
+      "gradient-orange":
+        "divide-y divide-gradient-to-r from-orange-600 to-red-600 rounded-xl border border-gradient-to-r from-orange-600 to-red-600",
+    },
+    size: {
+      sm: "px-3 py-2 text-sm",
+      md: "px-4 py-3 text-sm",
+      lg: "px-5 py-4 text-base",
+    },
+  },
+  defaultVariants: {
+    appearance: "default",
+    size: "md",
+  },
+});
+
+export const accordionItemVariants = cva("", {
+  variants: {
+    appearance: {
+      default: "",
+      outline: "",
+      ghost: "",
+      card: "rounded-xl border border-white/10 bg-white/[0.03] p-2",
+      separated: "rounded-xl border border-white/10 bg-slate-950/40 p-2",
+      sky: "rounded-xl border border-sky-600 bg-sky-600/[0.03] p-2",
+      rose: "rounded-xl border border-rose-600 bg-rose-600/[0.03] p-2",
+      purple: "rounded-xl border border-purple-600 bg-purple-600/[0.03] p-2",
+      pink: "rounded-xl border border-pink-600 bg-pink-600/[0.03] p-2",
+      orange: "rounded-xl border border-orange-600 bg-orange-600/[0.03] p-2",
+      yellow: "rounded-xl border border-yellow-600 bg-yellow-600/[0.03] p-2",
+      teal: "rounded-xl border border-teal-600 bg-teal-600/[0.03] p-2",
+      indigo: "rounded-xl border border-indigo-600 bg-indigo-600/[0.03] p-2",
+      emerald: "rounded-xl border border-emerald-600 bg-emerald-600/[0.03] p-2",
+      "gradient-blue":
+        "rounded-xl bg-linear-to-r from-blue-600 to-purple-600/[0.03] p-2 text-white",
+      "gradient-green":
+        "rounded-xl bg-linear-to-r from-green-600 to-lime-600/[0.03] p-2 text-white",
+      "gradient-red":
+        "rounded-xl bg-linear-to-r from-red-600 to-pink-600/[0.03] p-2 text-white",
+      "gradient-yellow":
+        "rounded-xl bg-linear-to-r from-yellow-600 to-orange-600/[0.03] p-2 text-white",
+      "gradient-purple":
+        "rounded-xl bg-linear-to-r from-purple-600 to-pink-600/[0.03] p-2 text-white",
+      "gradient-teal":
+        "rounded-xl bg-linear-to-r from-teal-600 to-cyan-600/[0.03] p-2 text-white",
+      "gradient-indigo":
+        "rounded-xl bg-linear-to-r from-indigo-600 to-purple-600/[0.03] p-2 text-white",
+      "gradient-pink":
+        "rounded-xl bg-linear-to-r from-pink-600 to-rose-600/[0.03] p-2 text-white",
+      "gradient-orange":
+        "rounded-xl bg-linear-to-r from-orange-600 to-red-600/[0.03] p-2 text-white",
+    },
+  },
+  defaultVariants: { appearance: "default" },
+});
+
+export const accordionTriggerVariants = cva(
+  "flex w-full items-center justify-between gap-3 py-3 text-left font-medium text-slate-50 outline-none transition hover:text-white focus-visible:ring-2 focus-visible:ring-white/30",
+  {
+    variants: {
+      size: {
+        sm: "py-2 text-sm",
+        md: "py-3 text-sm",
+        lg: "py-4 text-base",
+      },
+    },
+    defaultVariants: { size: "md" },
+  },
+);
+
+export const accordionContentVariants = cva("pb-3 text-sm", {
+  variants: {
+    size: {
+      sm: "pb-2 text-xs",
+      md: "pb-3 text-sm",
+      lg: "pb-4 text-base",
+    },
+  },
+  defaultVariants: { size: "md" },
+});

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

@@ -0,0 +1,157 @@
+"use client";
+
+import { createContext, useContext, useMemo } from "react";
+import {
+  HiExclamationTriangle,
+  HiInformationCircle,
+  HiXMark,
+} from "react-icons/hi2";
+
+import { cn } from "../../lib/utils";
+
+import type { AlertBaseProps, AlertProps, AlertSectionProps, AlertSize } from "./types";
+import {
+  alertDescriptionVariants,
+  alertTitleVariants,
+  alertVariants,
+} from "./variants";
+
+const AlertSizeContext = createContext<AlertSize>("md");
+
+function useAlertSize(): AlertSize {
+  const ctx = useContext(AlertSizeContext);
+  if (!ctx) {
+    throw new Error("useAlertSize must be used within an Alert");
+  }
+  return ctx;
+}
+
+export function AlertBase(props: AlertBaseProps) {
+  const {
+    className,
+    triggerClassName,
+    appearance = "default",
+    size = "md",
+    closable = false,
+    onClose,
+    closeLabel = "Dismiss alert",
+    children,
+    ref,
+    as: Wrapper = "div",
+    ...rest
+  } = props;
+
+  const live = appearance === "error" ? "assertive" : "polite";
+  const ctx = useMemo(() => size ?? "md", [size]);
+
+  return (
+    <AlertSizeContext.Provider value={ctx}>
+      <Wrapper
+        ref={ref}
+        data-slot="alert"
+        role="alert"
+        aria-live={live}
+        className={cn(
+          alertVariants({ appearance, size }),
+          closable ? "pr-12" : "",
+          className,
+        )}
+        {...rest}
+      >
+        {children}
+        {closable ? (
+          <button
+            type="button"
+            data-slot="alert-close"
+            aria-label={closeLabel}
+            onClick={onClose}
+            className={cn(
+              "absolute right-3 top-3 inline-flex size-8 items-center justify-center rounded-md text-slate-200 transition hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/30",
+              triggerClassName,
+            )}
+          >
+            <HiXMark className="size-4" aria-hidden />
+          </button>
+        ) : null}
+      </Wrapper>
+    </AlertSizeContext.Provider>
+  );
+}
+
+AlertBase.displayName = "AlertBase";
+
+export function AlertIcon({ className, children }: AlertSectionProps) {
+  return (
+    <span
+      data-slot="alert-icon"
+      className={cn("mt-0.5 shrink-0 text-current", className)}
+    >
+      {children}
+    </span>
+  );
+}
+
+AlertIcon.displayName = "AlertIcon";
+
+export function AlertTitle({ className, children }: AlertSectionProps) {
+  const size = useAlertSize();
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(alertTitleVariants({ size }), className)}
+    >
+      {children}
+    </div>
+  );
+}
+
+AlertTitle.displayName = "AlertTitle";
+
+export function AlertDescription({ className, children }: AlertSectionProps) {
+  const size = useAlertSize();
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(alertDescriptionVariants({ size }), className)}
+    >
+      {children}
+    </div>
+  );
+}
+
+AlertDescription.displayName = "AlertDescription";
+
+export function AlertClose({
+  className,
+  children,
+  "aria-label": ariaLabel = "Dismiss alert",
+  onClick,
+}: AlertSectionProps & { onClick?: () => void; "aria-label"?: string }) {
+  return (
+    <button
+      type="button"
+      data-slot="alert-close"
+      aria-label={ariaLabel}
+      onClick={onClick}
+      className={cn(
+        "inline-flex size-8 items-center justify-center rounded-md text-slate-200 transition hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/30",
+        className,
+      )}
+    >
+      {children ?? <HiXMark className="size-4" aria-hidden />}
+    </button>
+  );
+}
+
+AlertClose.displayName = "AlertClose";
+
+export function AlertDefaultIcon({
+  appearance,
+}: {
+  appearance?: AlertProps["appearance"];
+}) {
+  if (appearance === "error") {
+    return <HiExclamationTriangle className="size-5" aria-hidden />;
+  }
+  return <HiInformationCircle className="size-5" aria-hidden />;
+}