@zentauri-ui/zentauri-components 1.3.0 → 1.4.0

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

@@ -0,0 +1,223 @@
+"use client";
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useId,
+  useMemo,
+  useState,
+} from "react";
+
+import { cn } from "../../lib/utils";
+
+import type {
+  AccordionBaseProps,
+  AccordionContentProps,
+  AccordionCtx,
+  AccordionItemProps,
+  AccordionTriggerProps,
+} from "./types";
+import {
+  accordionContentVariants,
+  accordionItemVariants,
+  accordionTriggerVariants,
+  accordionVariants,
+} from "./variants";
+
+const AccordionContext = createContext<AccordionCtx | null>(null);
+
+const AccordionItemValueContext = createContext<string | null>(null);
+
+export function useAccordionContext(component: string): AccordionCtx {
+  const ctx = useContext(AccordionContext);
+  if (!ctx) {
+    throw new Error(`${component} must be used within <Accordion>`);
+  }
+  return ctx;
+}
+
+export function useAccordionItemValue(component: string): string {
+  const value = useContext(AccordionItemValueContext);
+  if (!value) {
+    throw new Error(`${component} must be used within <AccordionItem>`);
+  }
+  return value;
+}
+
+export function AccordionBase({
+  type = "single",
+  value,
+  values,
+  defaultValue,
+  defaultValues,
+  onValueChange,
+  onValuesChange,
+  appearance = "default",
+  size = "md",
+  className,
+  children,
+}: AccordionBaseProps) {
+  const isSingleControlled = value !== undefined;
+  const isMultipleControlled = values !== undefined;
+  const [singleUncontrolled, setSingleUncontrolled] = useState<
+    string | undefined
+  >(defaultValue);
+  const [multipleUncontrolled, setMultipleUncontrolled] = useState<string[]>(
+    defaultValues ?? [],
+  );
+
+  const singleValue = isSingleControlled ? value : singleUncontrolled;
+  const multipleValues = useMemo(
+    () => (isMultipleControlled ? (values ?? []) : multipleUncontrolled),
+    [isMultipleControlled, values, multipleUncontrolled],
+  );
+
+  const isOpen = useCallback(
+    (itemValue: string) => {
+      if (type === "single") {
+        return singleValue === itemValue;
+      }
+      return multipleValues.includes(itemValue);
+    },
+    [multipleValues, singleValue, type],
+  );
+
+  const toggle = useCallback(
+    (itemValue: string) => {
+      if (type === "single") {
+        const next = singleValue === itemValue ? undefined : itemValue;
+        if (!isSingleControlled) {
+          setSingleUncontrolled(next);
+        }
+        onValueChange?.(next);
+        return;
+      }
+      const exists = multipleValues.includes(itemValue);
+      const next = exists
+        ? multipleValues.filter((entry) => entry !== itemValue)
+        : [...multipleValues, itemValue];
+      if (!isMultipleControlled) {
+        setMultipleUncontrolled(next);
+      }
+      onValuesChange?.(next);
+    },
+    [
+      isMultipleControlled,
+      isSingleControlled,
+      multipleValues,
+      onValueChange,
+      onValuesChange,
+      singleValue,
+      type,
+    ],
+  );
+
+  const ctx = useMemo(
+    () => ({
+      type,
+      appearance: appearance ?? "default",
+      size: size ?? "md",
+      isOpen,
+      toggle,
+    }),
+    [appearance, isOpen, size, toggle, type],
+  );
+
+  return (
+    <AccordionContext.Provider value={ctx}>
+      <div
+        data-slot="accordion"
+        className={cn(accordionVariants({ appearance, size }), className)}
+      >
+        {children}
+      </div>
+    </AccordionContext.Provider>
+  );
+}
+
+AccordionBase.displayName = "Accordion";
+
+export function AccordionItem({
+  className,
+  value,
+  children,
+  ref,
+  ...rest
+}: AccordionItemProps) {
+  const { appearance } = useAccordionContext("AccordionItem");
+  return (
+    <AccordionItemValueContext.Provider value={value}>
+      <div
+        ref={ref}
+        data-slot="accordion-item"
+        data-value={value}
+        className={cn(accordionItemVariants({ appearance }), className)}
+        {...rest}
+      >
+        {children}
+      </div>
+    </AccordionItemValueContext.Provider>
+  );
+}
+
+AccordionItem.displayName = "AccordionItem";
+
+export function AccordionTrigger({
+  className,
+  children,
+  ref,
+  ...rest
+}: AccordionTriggerProps) {
+  const itemValue = useAccordionItemValue("AccordionTrigger");
+  const { isOpen, toggle, size } = useAccordionContext("AccordionTrigger");
+  const open = isOpen(itemValue);
+  const panelId = `${itemValue}-panel`;
+  const baseId = useId();
+
+  return (
+    <h3 className="m-0">
+      <button
+        ref={ref}
+        type="button"
+        data-slot="accordion-trigger"
+        id={`${baseId}-trigger-${itemValue}`}
+        aria-expanded={open}
+        aria-controls={panelId}
+        className={cn(accordionTriggerVariants({ size }), className)}
+        onClick={() => toggle(itemValue)}
+        {...rest}
+      >
+        {children}
+      </button>
+    </h3>
+  );
+}
+
+AccordionTrigger.displayName = "AccordionTrigger";
+
+export function AccordionContent({
+  className,
+  children,
+  ref,
+}: AccordionContentProps) {
+  const itemValue = useAccordionItemValue("AccordionContent");
+  const { isOpen, size } = useAccordionContext("AccordionContent");
+  const open = isOpen(itemValue);
+  const panelId = `${itemValue}-panel`;
+
+  return open ? (
+    <div
+      key={itemValue}
+      ref={ref}
+      id={panelId}
+      role="region"
+      data-slot="accordion-content"
+      className={cn(accordionContentVariants({ size }), className)}
+    >
+      {children}
+    </div>
+  ) : null;
+}
+
+AccordionContent.displayName = "AccordionContent";

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