@zentauri-ui/zentauri-components 1.3.0 → 1.4.0

package/src/ui/divider/variants.ts

@@ -0,0 +1,98 @@
+import { cva } from "class-variance-authority";
+
+const APPEARANCES = {
+  default: "text-slate-200",
+  muted: "text-slate-500",
+  primary: "text-cyan-300",
+  destructive: "text-rose-400",
+  ghost: "text-slate-600",
+  sky: "text-sky-400",
+  rose: "text-rose-400",
+  purple: "text-purple-400",
+  pink: "text-pink-400",
+  orange: "text-orange-400",
+  yellow: "text-yellow-400",
+  teal: "text-teal-400",
+  indigo: "text-indigo-400",
+  emerald: "text-emerald-400",
+  gray: "text-gray-400",
+  amber: "text-amber-400",
+  violet: "text-violet-400",
+  "gradient-blue": "text-blue-400",
+  "gradient-green": "text-green-400",
+  "gradient-red": "text-red-400",
+  "gradient-yellow": "text-yellow-400",
+  "gradient-purple": "text-purple-400",
+  "gradient-teal": "text-teal-400",
+  "gradient-indigo": "text-indigo-400",
+  "gradient-pink": "text-pink-400",
+  "gradient-orange": "text-orange-400",
+};
+
+export const dividerToneVariants = cva("", {
+  variants: {
+    appearance: APPEARANCES,
+  },
+  defaultVariants: { appearance: "default" },
+});
+
+export const dividerVariants = cva("flex w-full items-center gap-3", {
+  variants: {
+    appearance: APPEARANCES,
+    orientation: {
+      horizontal: "w-full flex-row",
+      vertical: "h-full min-h-[2rem] w-auto flex-col self-stretch",
+    },
+    size: {
+      sm: "",
+      md: "",
+      lg: "",
+    },
+  },
+  compoundVariants: [
+    { orientation: "horizontal", size: "sm", class: "min-h-px" },
+    { orientation: "horizontal", size: "md", class: "min-h-[2px]" },
+    { orientation: "horizontal", size: "lg", class: "min-h-[3px]" },
+    { orientation: "vertical", size: "sm", class: "min-w-px" },
+    { orientation: "vertical", size: "md", class: "min-w-[2px]" },
+    { orientation: "vertical", size: "lg", class: "min-w-[3px]" },
+  ],
+  defaultVariants: {
+    appearance: "default",
+    orientation: "horizontal",
+    size: "md",
+  },
+});
+
+export const dividerLineVariants = cva(
+  "shrink grow rounded-full bg-current opacity-80",
+  {
+    variants: {
+      orientation: {
+        horizontal: "h-px",
+        vertical: "w-px flex-1",
+      },
+      size: {
+        sm: "",
+        md: "",
+        lg: "",
+      },
+    },
+    compoundVariants: [
+      { orientation: "horizontal", size: "sm", class: "h-px" },
+      { orientation: "horizontal", size: "md", class: "h-0.5" },
+      { orientation: "horizontal", size: "lg", class: "h-1" },
+      { orientation: "vertical", size: "sm", class: "w-px" },
+      { orientation: "vertical", size: "md", class: "w-0.5" },
+      { orientation: "vertical", size: "lg", class: "w-1" },
+    ],
+    defaultVariants: {
+      orientation: "horizontal",
+      size: "md",
+    },
+  },
+);
+
+export const dividerLabelVariants = cva(
+  "shrink-0 text-xs font-medium uppercase tracking-wide text-current",
+);

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

@@ -0,0 +1,39 @@
+import { DrawerAnimationPresets } from "./types";
+
+export const drawerPanelPresets = (
+  side: "left" | "right" | "top" | "bottom",
+): DrawerAnimationPresets => ({
+  none: {},
+  fade: {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    exit: { opacity: 0 },
+    transition: { duration: 0.2 },
+  },
+  scale: {
+    initial: { opacity: 0, scale: 0.98 },
+    animate: { opacity: 1, scale: 1 },
+    exit: { opacity: 0, scale: 0.98 },
+    transition: { type: "spring", stiffness: 420, damping: 32 },
+  },
+  slide: {
+    initial:
+      side === "left"
+        ? { x: -24, opacity: 0 }
+        : side === "right"
+          ? { x: 24, opacity: 0 }
+          : side === "top"
+            ? { y: -24, opacity: 0 }
+            : { y: 24, opacity: 0 },
+    animate: { x: 0, y: 0, opacity: 1 },
+    exit:
+      side === "left"
+        ? { x: -16, opacity: 0 }
+        : side === "right"
+          ? { x: 16, opacity: 0 }
+          : side === "top"
+            ? { y: -16, opacity: 0 }
+            : { y: 16, opacity: 0 },
+    transition: { type: "spring", stiffness: 380, damping: 30 },
+  },
+});

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

@@ -0,0 +1,101 @@
+"use client";
+
+import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
+import type { MutableRefObject } from "react";
+import { createPortal } from "react-dom";
+
+import { cn } from "../../../lib/utils";
+import { useFocusManagement } from "../../../hooks/useFocusManagement";
+
+import { drawerPanelPresets } from "./animations";
+import { useDrawerContext } from "../drawer-base";
+import {
+  drawerContentVariants,
+  drawerOverlayVariants,
+} from "../variants";
+import type { DrawerContentAnimatedProps } from "./types";
+
+export function DrawerContentAnimated({
+  className,
+  side = "right",
+  size,
+  appearance,
+  animation = "slide",
+  children,
+  ref,
+  id,
+  style,
+}: DrawerContentAnimatedProps) {
+  const { open, setOpen, titleId, descriptionId, contentRef } =
+    useDrawerContext("DrawerContent");
+  const resolvedSide = side ?? "right";
+  const reduceMotion = useReducedMotion();
+  const overlayMotion =
+    drawerPanelPresets(resolvedSide)[reduceMotion ? "fade" : animation];
+  const panelMotion =
+    drawerPanelPresets(resolvedSide)[reduceMotion ? "fade" : animation];
+
+  useFocusManagement({
+    open,
+    setOpen,
+    contentRef,
+  });
+
+  const portalTarget = typeof document !== "undefined" ? document.body : null;
+  if (!portalTarget) {
+    return null;
+  }
+
+  return createPortal(
+    <AnimatePresence>
+      {open ? (
+        <div className="fixed inset-0 z-50" data-slot="drawer-portal">
+          <motion.button
+            type="button"
+            aria-hidden
+            tabIndex={-1}
+            data-slot="drawer-overlay"
+            className={drawerOverlayVariants()}
+            onClick={() => setOpen(false)}
+            initial={animation === "none" ? false : overlayMotion.initial}
+            animate={animation === "none" ? undefined : overlayMotion.animate}
+            exit={animation === "none" ? undefined : overlayMotion.exit}
+            transition={overlayMotion.transition}
+          />
+          <motion.div
+            ref={(node) => {
+              contentRef.current = node;
+              if (typeof ref === "function") {
+                ref(node);
+              } else if (ref) {
+                (ref as MutableRefObject<HTMLDivElement | null>).current =
+                  node;
+              }
+            }}
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby={titleId}
+            aria-describedby={descriptionId}
+            data-slot="drawer-content"
+            tabIndex={-1}
+            className={cn(
+              drawerContentVariants({ side: resolvedSide, size, appearance }),
+              className,
+            )}
+            initial={animation === "none" ? false : panelMotion.initial}
+            animate={animation === "none" ? undefined : panelMotion.animate}
+            exit={animation === "none" ? undefined : panelMotion.exit}
+            transition={panelMotion.transition}
+            id={id}
+            style={style}
+          >
+            {children}
+          </motion.div>
+        </div>
+      ) : null}
+    </AnimatePresence>,
+    portalTarget,
+  );
+}
+
+DrawerContentAnimated.displayName = "DrawerContent";

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

@@ -0,0 +1,14 @@
+"use client";
+
+export {
+  Drawer,
+  DrawerBody,
+  DrawerClose,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "../drawer-base";
+export { DrawerContentAnimated } from "./drawer-content-animated";
+export type { DrawerContentAnimatedProps, DrawerAnimation, DrawerPresetMotionProps, DrawerAnimationPresets } from "./types";
+export { drawerPanelPresets } from "./animations";

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

@@ -0,0 +1,18 @@
+import { HTMLMotionProps } from "framer-motion";
+import type { DrawerContentProps } from "../types";
+
+export type DrawerContentAnimatedProps = DrawerContentProps & {
+  animation?: DrawerAnimation;
+};
+
+export type DrawerAnimation = "none" | "fade" | "scale" | "slide";
+
+export type DrawerPresetMotionProps = Pick<
+  HTMLMotionProps<"div">,
+  "initial" | "animate" | "exit" | "transition"
+>;
+
+export type DrawerAnimationPresets = Record<
+  DrawerAnimation,
+  DrawerPresetMotionProps
+>;

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

@@ -0,0 +1,259 @@
+"use client";
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+  type RefObject,
+} from "react";
+import { createPortal } from "react-dom";
+
+import { cn } from "../../lib/utils";
+import { useFocusManagement } from "../../hooks/useFocusManagement";
+
+import type {
+  DrawerContentProps,
+  DrawerCtx,
+  DrawerProps,
+  DrawerSectionProps,
+  DrawerTriggerProps,
+} from "./types";
+import {
+  drawerContentVariants,
+  drawerOverlayVariants,
+  drawerTriggerVariants,
+} from "./variants";
+
+const DrawerContext = createContext<DrawerCtx | null>(null);
+
+export function useDrawerContext(component: string): DrawerCtx {
+  const ctx = useContext(DrawerContext);
+  if (!ctx) {
+    throw new Error(`${component} must be used within <Drawer>`);
+  }
+  return ctx;
+}
+
+export function Drawer({
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  children,
+}: DrawerProps) {
+  const isControlled = open !== undefined;
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+  const resolvedOpen = isControlled ? Boolean(open) : uncontrolledOpen;
+
+  const setOpen = useCallback(
+    (next: boolean) => {
+      if (!isControlled) {
+        setUncontrolledOpen(next);
+      }
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange],
+  );
+
+  const baseId = useId();
+  const titleId = `${baseId}-title`;
+  const descriptionId = `${baseId}-description`;
+  const contentRef = useRef<HTMLDivElement | null>(null);
+
+  const ctx = useMemo(
+    () => ({
+      open: resolvedOpen,
+      setOpen,
+      titleId,
+      descriptionId,
+      contentRef,
+    }),
+    [descriptionId, resolvedOpen, setOpen, titleId],
+  );
+
+  return (
+    <DrawerContext.Provider value={ctx}>{children}</DrawerContext.Provider>
+  );
+}
+
+Drawer.displayName = "Drawer";
+
+export function DrawerTrigger({
+  className,
+  children,
+  appearance,
+  onClick,
+  ref,
+  ...rest
+}: DrawerTriggerProps) {
+  const { setOpen } = useDrawerContext("DrawerTrigger");
+  return (
+    <button
+      ref={ref}
+      type="button"
+      data-slot="drawer-trigger"
+      className={cn(drawerTriggerVariants({ appearance }), className)}
+      onClick={(event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) {
+          setOpen(true);
+        }
+      }}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+}
+
+DrawerTrigger.displayName = "DrawerTrigger";
+
+export function DrawerContent({
+  className,
+  side = "right",
+  size,
+  appearance,
+  children,
+  ref,
+  id,
+  style,
+}: DrawerContentProps) {
+  const { open, setOpen, titleId, descriptionId, contentRef } =
+    useDrawerContext("DrawerContent");
+  const resolvedSide = side ?? "right";
+
+  useFocusManagement({
+    open,
+    setOpen,
+    contentRef,
+  });
+
+  const portalTarget = typeof document !== "undefined" ? document.body : null;
+  if (!portalTarget) {
+    return null;
+  }
+
+  return createPortal(
+    open ? (
+      <div className="fixed inset-0 z-50" data-slot="drawer-portal">
+        <button
+          type="button"
+          aria-hidden
+          tabIndex={-1}
+          data-slot="drawer-overlay"
+          className={drawerOverlayVariants()}
+          onClick={() => setOpen(false)}
+        />
+        <div
+          ref={(node) => {
+            contentRef.current = node;
+            if (typeof ref === "function") {
+              ref(node);
+            } else if (ref) {
+              (ref as RefObject<HTMLDivElement | null>).current = node;
+            }
+          }}
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby={titleId}
+          aria-describedby={descriptionId}
+          data-slot="drawer-content"
+          tabIndex={-1}
+          className={cn(
+            drawerContentVariants({ side: resolvedSide, size, appearance }),
+            className,
+          )}
+          id={id}
+          style={style}
+        >
+          {children}
+        </div>
+      </div>
+    ) : null,
+    portalTarget,
+  );
+}
+
+DrawerContent.displayName = "DrawerContent";
+
+export function DrawerHeader({ className, children }: DrawerSectionProps) {
+  return (
+    <header
+      data-slot="drawer-header"
+      className={cn("mb-4 flex flex-col gap-2", className)}
+    >
+      {children}
+    </header>
+  );
+}
+
+DrawerHeader.displayName = "DrawerHeader";
+
+export function DrawerBody({ className, children }: DrawerSectionProps) {
+  return (
+    <div
+      data-slot="drawer-body"
+      className={cn("flex-1 text-sm text-slate-300", className)}
+    >
+      {children}
+    </div>
+  );
+}
+
+DrawerBody.displayName = "DrawerBody";
+
+export function DrawerFooter({ className, children }: DrawerSectionProps) {
+  return (
+    <footer
+      data-slot="drawer-footer"
+      className={cn("mt-6 flex justify-end gap-2", className)}
+    >
+      {children}
+    </footer>
+  );
+}
+
+DrawerFooter.displayName = "DrawerFooter";
+
+export function DrawerTitle({ className, children }: DrawerSectionProps) {
+  const { titleId } = useDrawerContext("DrawerTitle");
+  return (
+    <h2
+      id={titleId}
+      data-slot="drawer-title"
+      className={cn("text-lg font-semibold", className)}
+    >
+      {children}
+    </h2>
+  );
+}
+
+DrawerTitle.displayName = "DrawerTitle";
+
+export function DrawerClose({
+  className,
+  children,
+  ...rest
+}: DrawerSectionProps) {
+  const { setOpen } = useDrawerContext("DrawerClose");
+  return (
+    <button
+      type="button"
+      data-slot="drawer-close"
+      className={cn(
+        "absolute right-4 top-4 inline-flex size-9 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,
+      )}
+      aria-label="Close drawer"
+      onClick={() => setOpen(false)}
+      {...rest}
+    >
+      {children ?? "×"}
+    </button>
+  );
+}
+
+DrawerClose.displayName = "DrawerClose";

package/src/ui/drawer/drawer.test.tsx

@@ -0,0 +1,132 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import {
+  Drawer,
+  DrawerBody,
+  DrawerClose,
+  DrawerContent,
+  DrawerTitle,
+  DrawerTrigger,
+} from "./drawer";
+
+describe("Drawer", () => {
+  it("should expose displayName on exported parts", () => {
+    expect(Drawer.displayName).toBe("Drawer");
+    expect(DrawerTrigger.displayName).toBe("DrawerTrigger");
+    expect(DrawerContent.displayName).toBe("DrawerContent");
+    expect(DrawerTitle.displayName).toBe("DrawerTitle");
+    expect(DrawerBody.displayName).toBe("DrawerBody");
+    expect(DrawerClose.displayName).toBe("DrawerClose");
+  });
+
+  it("should open from the trigger and render a dialog in the portal", async () => {
+    const user = userEvent.setup();
+    render(
+      <Drawer>
+        <DrawerTrigger>Open</DrawerTrigger>
+        <DrawerContent>
+          <DrawerTitle>Settings</DrawerTitle>
+          <DrawerBody>Drawer content</DrawerBody>
+        </DrawerContent>
+      </Drawer>,
+    );
+    await user.click(screen.getByRole("button", { name: "Open" }));
+    await waitFor(() => {
+      expect(screen.getByRole("dialog")).toBeInTheDocument();
+    });
+    expect(screen.getByText("Drawer content")).toBeInTheDocument();
+    expect(document.querySelector('[data-slot="drawer-content"]')).toBeTruthy();
+  });
+
+  it("should stamp data-slot on trigger and portal shell", async () => {
+    const user = userEvent.setup();
+    render(
+      <Drawer>
+        <DrawerTrigger>Go</DrawerTrigger>
+        <DrawerContent>
+          <DrawerTitle>T</DrawerTitle>
+        </DrawerContent>
+      </Drawer>,
+    );
+    expect(
+      screen.getByRole("button", { name: "Go" }).getAttribute("data-slot"),
+    ).toBe("drawer-trigger");
+    await user.click(screen.getByRole("button", { name: "Go" }));
+    await waitFor(() => {
+      expect(
+        document.querySelector('[data-slot="drawer-portal"]'),
+      ).toBeTruthy();
+    });
+  });
+
+  it("should close when the overlay is clicked", async () => {
+    const user = userEvent.setup();
+    render(
+      <Drawer defaultOpen>
+        <DrawerContent>
+          <DrawerTitle>Panel</DrawerTitle>
+        </DrawerContent>
+      </Drawer>,
+    );
+    await waitFor(() => expect(screen.getByRole("dialog")).toBeInTheDocument());
+    const overlay = document.querySelector(
+      '[data-slot="drawer-overlay"]',
+    ) as HTMLElement;
+    await user.click(overlay);
+    await waitFor(() => {
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    });
+  });
+
+  it("should close when Escape is pressed", async () => {
+    const user = userEvent.setup();
+    render(
+      <Drawer defaultOpen>
+        <DrawerContent>
+          <DrawerTitle>Panel</DrawerTitle>
+        </DrawerContent>
+      </Drawer>,
+    );
+    await waitFor(() => expect(screen.getByRole("dialog")).toBeInTheDocument());
+    await user.keyboard("{Escape}");
+    await waitFor(() => {
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    });
+  });
+
+  it("should close when DrawerClose is activated", async () => {
+    const user = userEvent.setup();
+    render(
+      <Drawer defaultOpen>
+        <DrawerContent>
+          <DrawerTitle>Panel</DrawerTitle>
+          <DrawerClose />
+        </DrawerContent>
+      </Drawer>,
+    );
+    await waitFor(() => expect(screen.getByRole("dialog")).toBeInTheDocument());
+    await user.click(screen.getByRole("button", { name: /close drawer/i }));
+    await waitFor(() => {
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    });
+  });
+
+  it("should call onOpenChange when opening and closing", async () => {
+    const user = userEvent.setup();
+    const handleChange = vi.fn();
+    render(
+      <Drawer onOpenChange={handleChange}>
+        <DrawerTrigger>Open</DrawerTrigger>
+        <DrawerContent>
+          <DrawerTitle>T</DrawerTitle>
+        </DrawerContent>
+      </Drawer>,
+    );
+    await user.click(screen.getByRole("button", { name: "Open" }));
+    await waitFor(() => expect(handleChange).toHaveBeenLastCalledWith(true));
+    await user.keyboard("{Escape}");
+    await waitFor(() => expect(handleChange).toHaveBeenLastCalledWith(false));
+  });
+});

package/src/ui/drawer/drawer.tsx

@@ -0,0 +1,11 @@
+// drawer.tsx — default static entry (no framer-motion)
+export {
+  Drawer,
+  DrawerBody,
+  DrawerClose,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "./drawer-base";

package/src/ui/drawer/index.ts

@@ -0,0 +1,21 @@
+"use client";
+
+export {
+  Drawer,
+  DrawerBody,
+  DrawerClose,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "./drawer";
+export type {
+  DrawerContentVariantProps,
+  DrawerContentProps,
+  DrawerProps,
+  DrawerSectionProps,
+  DrawerTriggerProps,
+  DrawerCtx,
+} from "./types";
+export { drawerContentVariants, drawerOverlayVariants } from "./variants";