@boxcustodia/library 2.0.0-alpha.2 → 2.0.0-alpha.20

package/src/components/tooltip/tooltip.test.tsx

@@ -0,0 +1,155 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { Button } from "../../components/button";
+import {
+  Tooltip,
+  TooltipArrow,
+  TooltipPopup,
+  TooltipPrimitive,
+  TooltipProvider,
+  TooltipRoot,
+  TooltipTrigger,
+} from ".";
+
+describe("Tooltip component", () => {
+  const content = "Tooltip content";
+
+  it("should toggle the tooltip onFocus", async () => {
+    render(
+      <Tooltip content={content}>
+        <Button>Focus me</Button>
+      </Tooltip>,
+    );
+
+    const button = screen.getByText("Focus me");
+    fireEvent.focus(button);
+
+    const toooltip = screen.getByText(content);
+    expect(toooltip).toBeInTheDocument();
+
+    fireEvent.blur(button);
+    waitFor(() => {
+      expect(toooltip).not.toBeInTheDocument();
+    });
+  });
+
+  it("should toggle the tooltip onHover", async () => {
+    const user = userEvent.setup();
+    render(
+      <Tooltip content={content}>
+        <Button>Hover me</Button>
+      </Tooltip>,
+    );
+
+    const button = screen.getByText("Hover me");
+    await user.hover(button);
+
+    const toooltip = await screen.findByText(content);
+    expect(toooltip).toBeInTheDocument();
+
+    await user.unhover(button);
+    await waitFor(() => {
+      expect(screen.queryByText(content)).not.toBeInTheDocument();
+    });
+  });
+});
+
+describe("Tooltip data-slots", () => {
+  it("sets data-slot='tooltip-trigger' on trigger", () => {
+    render(
+      <Tooltip content="tip">
+        <Button>Hover</Button>
+      </Tooltip>,
+    );
+    expect(
+      document.querySelector('[data-slot="tooltip-trigger"]'),
+    ).toBeInTheDocument();
+  });
+
+  it("sets data-slot='tooltip-popup' when open", () => {
+    render(
+      <Tooltip content="tip" defaultOpen>
+        <Button>Hover</Button>
+      </Tooltip>,
+    );
+    expect(
+      document.querySelector('[data-slot="tooltip-popup"]'),
+    ).toBeInTheDocument();
+  });
+
+  it("sets data-slot='tooltip-arrow' when open", () => {
+    render(
+      <Tooltip content="tip" defaultOpen>
+        <Button>Hover</Button>
+      </Tooltip>,
+    );
+    expect(
+      document.querySelector('[data-slot="tooltip-arrow"]'),
+    ).toBeInTheDocument();
+  });
+});
+
+describe("Tooltip controlled", () => {
+  it("opens immediately with defaultOpen", () => {
+    render(
+      <Tooltip content="Visible tip" defaultOpen>
+        <Button>Hover</Button>
+      </Tooltip>,
+    );
+    expect(screen.getByText("Visible tip")).toBeInTheDocument();
+  });
+
+  it("fires onOpenChange when tooltip opens on focus", () => {
+    const onOpenChange = vi.fn();
+    render(
+      <Tooltip content="tip" onOpenChange={onOpenChange}>
+        <Button>Focus me</Button>
+      </Tooltip>,
+    );
+    fireEvent.focus(screen.getByText("Focus me"));
+    expect(onOpenChange).toHaveBeenCalled();
+    expect(onOpenChange.mock.calls[0][0]).toBe(true);
+  });
+});
+
+describe("Tooltip classNames", () => {
+  it("applies className to popup", () => {
+    render(
+      <Tooltip content="tip" defaultOpen className="custom-popup">
+        <Button>t</Button>
+      </Tooltip>,
+    );
+    expect(document.querySelector('[data-slot="tooltip-popup"]')).toHaveClass(
+      "custom-popup",
+    );
+  });
+
+  it("applies classNames.arrow to arrow", () => {
+    render(
+      <Tooltip content="tip" defaultOpen classNames={{ arrow: "custom-arrow" }}>
+        <Button>t</Button>
+      </Tooltip>,
+    );
+    expect(document.querySelector('[data-slot="tooltip-arrow"]')).toHaveClass(
+      "custom-arrow",
+    );
+  });
+});
+
+describe("Tooltip exports", () => {
+  it("exports TooltipPrimitive", () => {
+    expect(TooltipPrimitive).toBeDefined();
+  });
+
+  it("exports TooltipProvider", () => {
+    expect(TooltipProvider).toBeDefined();
+  });
+
+  it("exports TooltipRoot, TooltipTrigger, TooltipPopup, TooltipArrow", () => {
+    expect(TooltipRoot).toBeDefined();
+    expect(TooltipTrigger).toBeDefined();
+    expect(TooltipPopup).toBeDefined();
+    expect(TooltipArrow).toBeDefined();
+  });
+});

package/src/components/tooltip/tooltip.tsx

@@ -0,0 +1,175 @@
+"use client";
+
+import { Tooltip as TooltipBase } from "@base-ui/react/tooltip";
+import type { ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
+import { cn } from "../../lib";
+
+// ── Types ────────────────────────────────────────────────────────────────────
+
+type RootProps = ComponentPropsWithoutRef<typeof TooltipBase.Root>;
+type TriggerProps = ComponentPropsWithoutRef<typeof TooltipBase.Trigger>;
+type PopupProps = ComponentPropsWithoutRef<typeof TooltipBase.Popup>;
+type ArrowProps = ComponentPropsWithoutRef<typeof TooltipBase.Arrow>;
+type ProviderProps = ComponentPropsWithoutRef<typeof TooltipBase.Provider>;
+
+// ── Arrow SVG ─────────────────────────────────────────────────────────────────
+
+function ArrowSvg(props: React.ComponentProps<"svg">) {
+  return (
+    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
+      <path
+        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+// ── Primitives ────────────────────────────────────────────────────────────────
+
+/** Enables shared hover intent and delay grouping across multiple tooltips. */
+export function TooltipProvider(props: ProviderProps) {
+  return <TooltipBase.Provider {...props} />;
+}
+
+export function TooltipRoot(props: RootProps) {
+  return <TooltipBase.Root {...props} />;
+}
+
+export function TooltipTrigger({ className, ...props }: TriggerProps) {
+  return (
+    <TooltipBase.Trigger
+      data-slot="tooltip-trigger"
+      className={cn(className)}
+      {...props}
+    />
+  );
+}
+
+export function TooltipPopup({ className, ...props }: PopupProps) {
+  return (
+    <TooltipBase.Popup
+      data-slot="tooltip-popup"
+      className={cn(
+        "flex origin-[var(--transform-origin)] flex-col rounded-md bg-popover px-2.5 py-1.5 text-xs text-popover-foreground drop-shadow-md",
+        "transition-[scale,opacity] duration-150 ease-out",
+        "data-starting-style:scale-98 data-starting-style:opacity-0",
+        "data-ending-style:scale-98 data-ending-style:opacity-0",
+        "data-instant:duration-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function TooltipArrow({ className, ...props }: ArrowProps) {
+  return (
+    <TooltipBase.Arrow
+      data-slot="tooltip-arrow"
+      className={cn(
+        "flex text-popover",
+        "data-[side=bottom]:top-[-8px]",
+        "data-[side=left]:right-[-13px] data-[side=left]:rotate-90",
+        "data-[side=right]:left-[-13px] data-[side=right]:-rotate-90",
+        "data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180",
+        className,
+      )}
+      {...props}
+    >
+      <ArrowSvg />
+    </TooltipBase.Arrow>
+  );
+}
+
+// ── Composite ─────────────────────────────────────────────────────────────────
+
+export type TooltipProps = Omit<RootProps, "children"> &
+  Omit<
+    TriggerProps,
+    "render" | "delay" | "closeDelay" | "className" | "content"
+  > & {
+    /** The element that triggers the tooltip on hover/focus. */
+    children: ReactElement;
+    /** Content displayed inside the tooltip popup. */
+    content: ReactNode;
+    /** Preferred side of the trigger to render the tooltip. @default "top" */
+    side?: "top" | "bottom" | "left" | "right";
+    /** Alignment on the axis perpendicular to `side`. @default "center" */
+    align?: "start" | "center" | "end";
+    /** Distance in pixels between the tooltip and the trigger. @default 10 */
+    offset?: number;
+    /** Delay in ms before the tooltip opens. @default 600 */
+    delay?: TriggerProps["delay"];
+    /** Delay in ms before the tooltip closes. @default 0 */
+    closeDelay?: TriggerProps["closeDelay"];
+    /** Additional classes applied to the tooltip popup (visual root). */
+    className?: string;
+    /** Styles applied to each internal slot. */
+    classNames?: {
+      /**
+       * Arrow that points at the trigger. Pass a `text-*` class to change the
+       * arrow color when overriding the popup background.
+       */
+      arrow?: string;
+    };
+  };
+
+/**
+ * Accessible popup that shows additional information on hover/focus.
+ * Wrap your app or section with `<TooltipProvider>` to enable delay grouping.
+ *
+ * @example
+ * ```tsx
+ * <Tooltip content="Save changes">
+ *   <Button>Save</Button>
+ * </Tooltip>
+ * ```
+ */
+export function Tooltip({
+  content,
+  children,
+  open,
+  defaultOpen,
+  onOpenChange,
+  side = "top",
+  align,
+  offset = 10,
+  delay,
+  closeDelay,
+  className,
+  classNames,
+  ...triggerProps
+}: TooltipProps) {
+  return (
+    <TooltipRoot
+      open={open}
+      defaultOpen={defaultOpen}
+      onOpenChange={onOpenChange}
+    >
+      <TooltipTrigger
+        delay={delay}
+        closeDelay={closeDelay}
+        render={children}
+        {...triggerProps}
+      />
+      <TooltipBase.Portal>
+        <TooltipBase.Positioner
+          side={side}
+          align={align}
+          sideOffset={offset}
+          className="z-float"
+        >
+          <TooltipPopup className={className}>
+            <TooltipArrow className={classNames?.arrow} />
+            {content}
+          </TooltipPopup>
+        </TooltipBase.Positioner>
+      </TooltipBase.Portal>
+    </TooltipRoot>
+  );
+}
+
+// ── Primitive escape hatch ────────────────────────────────────────────────────
+
+export { TooltipBase as TooltipPrimitive };

package/src/components/tree/index.ts

@@ -0,0 +1 @@
+export * from "./tree";