@zentauri-ui/zentauri-components 1.3.0 → 1.4.0

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

@@ -0,0 +1,279 @@
+"use client";
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { createPortal } from "react-dom";
+
+import { cn } from "../../lib/utils";
+import { useFocusManagement } from "../../hooks/useFocusManagement";
+
+import type {
+  ModalContentProps,
+  ModalProps,
+  ModalSectionProps,
+  ModalTriggerProps,
+} from "./types";
+import {
+  modalContentVariants,
+  modalOverlayVariants,
+  modalTriggerVariants,
+} from "./variants";
+
+type ModalCtx = {
+  open: boolean;
+  setOpen: (next: boolean) => void;
+  titleId: string;
+  descriptionId: string;
+  contentRef: React.RefObject<HTMLDivElement | null>;
+};
+
+const ModalContext = createContext<ModalCtx | null>(null);
+
+export function useModalContext(component: string): ModalCtx {
+  const ctx = useContext(ModalContext);
+  if (!ctx) {
+    throw new Error(`${component} must be used within <Modal>`);
+  }
+  return ctx;
+}
+
+export function Modal({
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  children,
+}: ModalProps) {
+  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 <ModalContext.Provider value={ctx}>{children}</ModalContext.Provider>;
+}
+
+Modal.displayName = "Modal";
+
+export function ModalTrigger({
+  className,
+  children,
+  appearance,
+  onClick,
+  ref,
+  ...rest
+}: ModalTriggerProps) {
+  const { setOpen } = useModalContext("ModalTrigger");
+  return (
+    <button
+      ref={ref}
+      type="button"
+      data-slot="modal-trigger"
+      className={cn(modalTriggerVariants({ appearance }), className)}
+      onClick={(event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) {
+          setOpen(true);
+        }
+      }}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+}
+
+ModalTrigger.displayName = "ModalTrigger";
+
+
+export function ModalContent({
+  className,
+  size,
+  position,
+  appearance,
+  children,
+  ref,
+  id,
+  style,
+}: ModalContentProps) {
+  const { open, setOpen, titleId, descriptionId, contentRef } =
+    useModalContext("ModalContent");
+
+  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="modal-portal">
+        <button
+          type="button"
+          aria-hidden
+          tabIndex={-1}
+          data-slot="modal-overlay"
+          className={modalOverlayVariants()}
+          onClick={() => setOpen(false)}
+        />
+        <div
+          ref={(node) => {
+            contentRef.current = node;
+            if (typeof ref === "function") {
+              ref(node);
+            } else if (ref) {
+              (ref as React.RefObject<HTMLDivElement | null>).current = node;
+            }
+          }}
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby={titleId}
+          aria-describedby={descriptionId}
+          data-slot="modal-content"
+          tabIndex={-1}
+          className={cn(
+            modalContentVariants({ size, position, appearance }),
+            className,
+          )}
+          id={id}
+          style={style}
+        >
+          {children}
+        </div>
+      </div>
+    ) : null,
+    portalTarget,
+  );
+}
+
+ModalContent.displayName = "ModalContent";
+
+export function ModalHeader({ className, children }: ModalSectionProps) {
+  return (
+    <header
+      data-slot="modal-header"
+      className={cn("mb-4 flex flex-col gap-2", className)}
+    >
+      {children}
+    </header>
+  );
+}
+
+ModalHeader.displayName = "ModalHeader";
+
+export function ModalBody({ className, children }: ModalSectionProps) {
+  return (
+    <div
+      data-slot="modal-body"
+      className={cn("text-sm text-slate-300", className)}
+    >
+      {children}
+    </div>
+  );
+}
+
+ModalBody.displayName = "ModalBody";
+
+export function ModalFooter({ className, children }: ModalSectionProps) {
+  return (
+    <footer
+      data-slot="modal-footer"
+      className={cn("mt-6 flex justify-end gap-2", className)}
+    >
+      {children}
+    </footer>
+  );
+}
+
+ModalFooter.displayName = "ModalFooter";
+
+export function ModalTitle({ className, children }: ModalSectionProps) {
+  const { titleId } = useModalContext("ModalTitle");
+  return (
+    <h2
+      id={titleId}
+      data-slot="modal-title"
+      className={cn("text-lg font-semibold", className)}
+    >
+      {children}
+    </h2>
+  );
+}
+
+ModalTitle.displayName = "ModalTitle";
+
+export function ModalDescription({ className, children }: ModalSectionProps) {
+  const { descriptionId } = useModalContext("ModalDescription");
+  return (
+    <p
+      id={descriptionId}
+      data-slot="modal-description"
+      className={cn("text-sm text-slate-400", className)}
+    >
+      {children}
+    </p>
+  );
+}
+
+ModalDescription.displayName = "ModalDescription";
+
+export function ModalClose({
+  className,
+  children,
+  ...rest
+}: ModalSectionProps) {
+  const { setOpen } = useModalContext("ModalClose");
+  return (
+    <button
+      type="button"
+      data-slot="modal-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 dialog"
+      onClick={() => setOpen(false)}
+      {...rest}
+    >
+      {children ?? "×"}
+    </button>
+  );
+}
+
+ModalClose.displayName = "ModalClose";

package/src/ui/modal/modal.test.tsx

@@ -0,0 +1,129 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import {
+  Modal,
+} from "./modal";
+import { ModalTrigger, ModalContent, ModalTitle, ModalBody, ModalDescription, ModalClose } from "./modal-base";
+
+
+describe("Modal", () => {
+  it("should expose displayName on exported parts", () => {
+    expect(Modal.displayName).toBe("Modal");
+    expect(ModalTrigger.displayName).toBe("ModalTrigger");
+    expect(ModalContent.displayName).toBe("ModalContent");
+    expect(ModalTitle.displayName).toBe("ModalTitle");
+    expect(ModalBody.displayName).toBe("ModalBody");
+    expect(ModalDescription.displayName).toBe("ModalDescription");
+    expect(ModalClose.displayName).toBe("ModalClose");
+  });
+
+  it("should open from the trigger and render a dialog in the portal", async () => {
+    const user = userEvent.setup();
+    render(
+      <Modal>
+        <ModalTrigger>Open</ModalTrigger>
+        <ModalContent>
+          <ModalTitle>Confirm</ModalTitle>
+          <ModalDescription>Please review</ModalDescription>
+          <ModalBody>Details</ModalBody>
+        </ModalContent>
+      </Modal>,
+    );
+    await user.click(screen.getByRole("button", { name: "Open" }));
+    await waitFor(() => {
+      expect(screen.getByRole("dialog")).toBeInTheDocument();
+    });
+    expect(screen.getByText("Details")).toBeInTheDocument();
+    expect(document.querySelector('[data-slot="modal-content"]')).toBeTruthy();
+  });
+
+  it("should stamp data-slot on trigger and portal shell", async () => {
+    const user = userEvent.setup();
+    render(
+      <Modal>
+        <ModalTrigger>Go</ModalTrigger>
+        <ModalContent>
+          <ModalTitle>T</ModalTitle>
+        </ModalContent>
+      </Modal>,
+    );
+    expect(
+      screen.getByRole("button", { name: "Go" }).getAttribute("data-slot"),
+    ).toBe("modal-trigger");
+    await user.click(screen.getByRole("button", { name: "Go" }));
+    await waitFor(() => {
+      expect(document.querySelector('[data-slot="modal-portal"]')).toBeTruthy();
+    });
+  });
+
+  it("should close when the overlay is clicked", async () => {
+    const user = userEvent.setup();
+    render(
+      <Modal defaultOpen>
+        <ModalContent>
+          <ModalTitle>Panel</ModalTitle>
+        </ModalContent>
+      </Modal>,
+    );
+    await waitFor(() => expect(screen.getByRole("dialog")).toBeInTheDocument());
+    const overlay = document.querySelector(
+      '[data-slot="modal-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(
+      <Modal defaultOpen>
+        <ModalContent>
+          <ModalTitle>Panel</ModalTitle>
+        </ModalContent>
+      </Modal>,
+    );
+    await waitFor(() => expect(screen.getByRole("dialog")).toBeInTheDocument());
+    await user.keyboard("{Escape}");
+    await waitFor(() => {
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    });
+  });
+
+  it("should close when ModalClose is activated", async () => {
+    const user = userEvent.setup();
+    render(
+      <Modal defaultOpen>
+        <ModalContent>
+          <ModalTitle>Panel</ModalTitle>
+          <ModalClose />
+        </ModalContent>
+      </Modal>,
+    );
+    await waitFor(() => expect(screen.getByRole("dialog")).toBeInTheDocument());
+    await user.click(screen.getByRole("button", { name: /close dialog/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(
+      <Modal onOpenChange={handleChange}>
+        <ModalTrigger>Open</ModalTrigger>
+        <ModalContent>
+          <ModalTitle>T</ModalTitle>
+        </ModalContent>
+      </Modal>,
+    );
+    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/modal/modal.tsx

@@ -0,0 +1,8 @@
+import { Modal as ModalBase } from "./modal-base";
+import type { ModalProps } from "./types";
+
+export const Modal = (props: ModalProps) => {
+  return <ModalBase {...props} />;
+};
+
+Modal.displayName = "Modal";

package/src/ui/modal/types.ts

@@ -0,0 +1,31 @@
+import type { VariantProps } from "class-variance-authority";
+import type { CSSProperties, ElementType, HTMLAttributes, ReactNode, Ref } from "react";
+
+import type { modalContentVariants, modalTriggerVariants } from "./variants";
+
+export type ModalContentVariantProps = VariantProps<typeof modalContentVariants>;
+
+export type ModalProps = {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  children?: ReactNode;
+};
+
+export type ModalTriggerProps = HTMLAttributes<HTMLButtonElement> & {
+  ref?: Ref<HTMLButtonElement>;
+  appearance?: VariantProps<typeof modalTriggerVariants>["appearance"];
+};
+
+export type ModalContentProps = ModalContentVariantProps & {
+  className?: string;
+  children?: ReactNode;
+  ref?: Ref<HTMLDivElement>;
+  id?: string;
+  style?: CSSProperties;
+};
+
+export type ModalSectionProps = {
+  className?: string;
+  children?: ReactNode;
+};

package/src/ui/modal/variants.ts

@@ -0,0 +1,109 @@
+import { cva } from "class-variance-authority";
+
+export const modalOverlayVariants = cva(
+  "fixed inset-0 z-50 bg-slate-950/70 backdrop-blur-sm data-[state=open]:animate-in",
+);
+
+export const modalTriggerVariants = cva(
+  "relative inline-flex shrink-0 cursor-pointer rounded-md border",
+  {
+    variants: {
+      appearance: {
+        default: "bg-slate-950",
+        glass: "border-white/15 bg-slate-950/70 backdrop-blur-xl",
+        sky: "border-sky-600 bg-sky-950/70 backdrop-blur-xl",
+        rose: "border-rose-600 bg-rose-950/70 backdrop-blur-xl",
+        purple: "border-purple-600 bg-purple-950/70 backdrop-blur-xl",
+        pink: "border-pink-600 bg-pink-950/70 backdrop-blur-xl",
+        orange: "border-orange-600 bg-orange-950/70 backdrop-blur-xl",
+        yellow: "border-yellow-600 bg-yellow-950/70 backdrop-blur-xl",
+        teal: "border-teal-600 bg-teal-950/70 backdrop-blur-xl",
+        indigo: "border-indigo-600 bg-indigo-950/70 backdrop-blur-xl",
+        emerald: "border-emerald-600 bg-emerald-950/70 backdrop-blur-xl",
+        gray: "border-gray-600 bg-gray-950/70 backdrop-blur-xl",
+        amber: "border-amber-600 bg-amber-950/70 backdrop-blur-xl",
+        violet: "border-violet-600 bg-violet-950/70 backdrop-blur-xl",
+        "gradient-blue":
+          "border-gradient-to-r from-blue-600 to-purple-600 bg-gradient-to-r from-blue-950/70 to-purple-950/70 backdrop-blur-xl",
+        "gradient-green":
+          "border-gradient-to-r from-green-600 to-lime-600 bg-gradient-to-r from-green-950/70 to-lime-950/70 backdrop-blur-xl",
+        "gradient-red":
+          "border-gradient-to-r from-red-600 to-pink-600 bg-gradient-to-r from-red-950/70 to-pink-950/70 backdrop-blur-xl",
+        "gradient-yellow":
+          "border-gradient-to-r from-yellow-600 to-orange-600 bg-gradient-to-r from-yellow-950/70 to-orange-950/70 backdrop-blur-xl",
+        "gradient-purple":
+          "border-gradient-to-r from-purple-600 to-pink-600 bg-gradient-to-r from-purple-950/70 to-pink-950/70 backdrop-blur-xl",
+        "gradient-teal":
+          "border-gradient-to-r from-teal-600 to-cyan-600 bg-gradient-to-r from-teal-950/70 to-cyan-950/70 backdrop-blur-xl",
+        "gradient-indigo":
+          "border-gradient-to-r from-indigo-600 to-purple-600 bg-gradient-to-r from-indigo-950/70 to-purple-950/70 backdrop-blur-xl",
+        "gradient-pink":
+          "border-gradient-to-r from-pink-600 to-rose-600 bg-gradient-to-r from-pink-950/70 to-rose-950/70 backdrop-blur-xl",
+        "gradient-orange":
+          "border-gradient-to-r from-orange-600 to-red-600 bg-gradient-to-r from-orange-950/70 to-red-950/70 backdrop-blur-xl",
+      },
+    },
+    defaultVariants: {
+      appearance: "default",
+    },
+  },
+);
+
+export const modalContentVariants = cva(
+  "fixed left-1/2 z-50 w-[calc(100%-2rem)] max-h-[min(90vh,720px)] translate-x-[-50%] overflow-y-auto border border-white/10 bg-slate-950 p-6 text-slate-50 shadow-[0_24px_80px_rgba(15,23,42,0.55)] focus:outline-none",
+  {
+    variants: {
+      size: {
+        sm: "max-w-md",
+        md: "max-w-lg",
+        lg: "max-w-2xl",
+        xl: "max-w-4xl",
+        full: "max-w-[calc(100%-2rem)]",
+      },
+      position: {
+        center: "top-1/2 translate-y-[-50%]",
+        top: "top-10 translate-y-0",
+        bottom: "bottom-10 translate-y-0",
+      },
+      appearance: {
+        default: "bg-slate-950",
+        glass: "border-white/15 bg-slate-950/70 backdrop-blur-xl",
+        sky: "border-sky-600 bg-sky-950/70 backdrop-blur-xl",
+        rose: "border-rose-600 bg-rose-950/70 backdrop-blur-xl",
+        purple: "border-purple-600 bg-purple-950/70 backdrop-blur-xl",
+        pink: "border-pink-600 bg-pink-950/70 backdrop-blur-xl",
+        orange: "border-orange-600 bg-orange-950/70 backdrop-blur-xl",
+        yellow: "border-yellow-600 bg-yellow-950/70 backdrop-blur-xl",
+        teal: "border-teal-600 bg-teal-950/70 backdrop-blur-xl",
+        indigo: "border-indigo-600 bg-indigo-950/70 backdrop-blur-xl",
+        emerald: "border-emerald-600 bg-emerald-950/70 backdrop-blur-xl",
+        gray: "border-gray-600 bg-gray-950/70 backdrop-blur-xl",
+        amber: "border-amber-600 bg-amber-950/70 backdrop-blur-xl",
+        violet: "border-violet-600 bg-violet-950/70 backdrop-blur-xl",
+        "gradient-blue":
+          "border-gradient-to-r from-blue-600 to-purple-600 bg-gradient-to-r from-blue-950/70 to-purple-950/70 backdrop-blur-xl",
+        "gradient-green":
+          "border-gradient-to-r from-green-600 to-lime-600 bg-gradient-to-r from-green-950/70 to-lime-950/70 backdrop-blur-xl",
+        "gradient-red":
+          "border-gradient-to-r from-red-600 to-pink-600 bg-gradient-to-r from-red-950/70 to-pink-950/70 backdrop-blur-xl",
+        "gradient-yellow":
+          "border-gradient-to-r from-yellow-600 to-orange-600 bg-gradient-to-r from-yellow-950/70 to-orange-950/70 backdrop-blur-xl",
+        "gradient-purple":
+          "border-gradient-to-r from-purple-600 to-pink-600 bg-gradient-to-r from-purple-950/70 to-pink-950/70 backdrop-blur-xl",
+        "gradient-teal":
+          "border-gradient-to-r from-teal-600 to-cyan-600 bg-gradient-to-r from-teal-950/70 to-cyan-950/70 backdrop-blur-xl",
+        "gradient-indigo":
+          "border-gradient-to-r from-indigo-600 to-purple-600 bg-gradient-to-r from-indigo-950/70 to-purple-950/70 backdrop-blur-xl",
+        "gradient-pink":
+          "border-gradient-to-r from-pink-600 to-rose-600 bg-gradient-to-r from-pink-950/70 to-rose-950/70 backdrop-blur-xl",
+        "gradient-orange":
+          "border-gradient-to-r from-orange-600 to-red-600 bg-gradient-to-r from-orange-950/70 to-red-950/70 backdrop-blur-xl",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+      position: "center",
+      appearance: "default",
+    },
+  },
+);

package/src/ui/pagination/index.ts

@@ -0,0 +1,13 @@
+"use client";
+
+export { Pagination } from "./pagination";
+export { usePagination } from "../../hooks/usePagination";
+export type {
+  PaginationProps,
+  PaginationAppearance,
+  PaginationSize,
+  PaginationPageItem,
+  UsePaginationParams,
+  UsePaginationResult,
+} from "./types";
+export { paginationListVariants, paginationEllipsisVariants } from "./variants";