@xenide-io/the-old-ui-theme 0.3.0 → 0.3.2

package/src/components/ui/Tooltip.test.tsx

@@ -0,0 +1,58 @@
+import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it } from "vitest";
+import { Tooltip, TooltipProvider } from "@/components/ui/Tooltip";
+
+afterEach(cleanup);
+
+describe("Tooltip", () => {
+  it("opens when its trigger is hovered", async () => {
+    const user = userEvent.setup();
+    render(
+      <Tooltip content="Hover details" delayDuration={0}>
+        <button type="button">Hover target</button>
+      </Tooltip>,
+    );
+
+    await user.hover(screen.getByRole("button", { name: "Hover target" }));
+
+    expect(await screen.findByRole("tooltip")).toHaveTextContent("Hover details");
+  });
+
+  it("opens on keyboard focus and exposes its description to assistive technology", async () => {
+    const user = userEvent.setup();
+    render(
+      <TooltipProvider delayDuration={0}>
+        <Tooltip content="Keyboard details" side="bottom">
+          <button type="button">Focus target</button>
+        </Tooltip>
+      </TooltipProvider>,
+    );
+
+    await user.tab();
+
+    const trigger = screen.getByRole("button", { name: "Focus target" });
+    const tooltip = await screen.findByRole("tooltip");
+    expect(trigger).toHaveFocus();
+    expect(tooltip).toHaveTextContent("Keyboard details");
+    expect(trigger).toHaveAttribute("aria-describedby", tooltip.id);
+  });
+
+  it("dismisses an open tooltip with Escape without moving focus", async () => {
+    const user = userEvent.setup();
+    render(
+      <Tooltip content="Dismissible details">
+        <button type="button">Dismiss target</button>
+      </Tooltip>,
+    );
+
+    await user.tab();
+    const trigger = screen.getByRole("button", { name: "Dismiss target" });
+    expect(await screen.findByRole("tooltip")).toBeInTheDocument();
+
+    await user.keyboard("{Escape}");
+
+    await waitFor(() => expect(screen.queryByRole("tooltip")).not.toBeInTheDocument());
+    expect(trigger).toHaveFocus();
+  });
+});

package/src/components/ui/Tooltip.tsx

@@ -0,0 +1,211 @@
+"use client";
+
+import {
+  cloneElement,
+  createContext,
+  useContext,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+  type HTMLAttributes,
+  type ReactElement,
+  type ReactNode,
+} from "react";
+import { createPortal } from "react-dom";
+import { cn } from "@/lib/cn";
+
+export type TooltipSide = "top" | "right" | "bottom" | "left";
+export type TooltipAlign = "start" | "center" | "end";
+
+export interface TooltipProviderProps {
+  children: ReactNode;
+  delayDuration?: number;
+}
+
+export interface TooltipProps {
+  content: ReactNode;
+  children: ReactElement<HTMLAttributes<HTMLElement>>;
+  side?: TooltipSide;
+  align?: TooltipAlign;
+  sideOffset?: number;
+  collisionPadding?: number;
+  className?: string;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  delayDuration?: number;
+  disableHoverableContent?: boolean;
+}
+
+const TooltipDelayContext = createContext(0);
+
+export function TooltipProvider({
+  children,
+  delayDuration = 0,
+}: TooltipProviderProps) {
+  return (
+    <TooltipDelayContext.Provider value={delayDuration}>
+      {children}
+    </TooltipDelayContext.Provider>
+  );
+}
+
+function tooltipPosition(
+  trigger: DOMRect,
+  side: TooltipSide,
+  align: TooltipAlign,
+  offset: number,
+) {
+  const horizontal =
+    align === "start"
+      ? trigger.left
+      : align === "end"
+        ? trigger.right
+        : trigger.left + trigger.width / 2;
+  const vertical =
+    align === "start"
+      ? trigger.top
+      : align === "end"
+        ? trigger.bottom
+        : trigger.top + trigger.height / 2;
+  if (side === "top")
+    return {
+      left: horizontal,
+      top: trigger.top - offset,
+      transform: "translate(-50%, -100%)",
+    };
+  if (side === "bottom")
+    return {
+      left: horizontal,
+      top: trigger.bottom + offset,
+      transform: "translate(-50%, 0)",
+    };
+  if (side === "left")
+    return {
+      left: trigger.left - offset,
+      top: vertical,
+      transform: "translate(-100%, -50%)",
+    };
+  return {
+    left: trigger.right + offset,
+    top: vertical,
+    transform: "translate(0, -50%)",
+  };
+}
+
+export function Tooltip({
+  content,
+  children,
+  side = "top",
+  align = "center",
+  sideOffset = 7,
+  className,
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  delayDuration,
+}: TooltipProps) {
+  const providerDelay = useContext(TooltipDelayContext);
+  const generatedId = useId().replace(/:/g, "");
+  const triggerRef = useRef<HTMLSpanElement>(null);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const [position, setPosition] = useState<ReturnType<
+    typeof tooltipPosition
+  > | null>(null);
+  const isOpen = open ?? internalOpen;
+  const triggerId = children.props.id;
+  const tooltipId = triggerId
+    ? `${triggerId}-tooltip`
+    : `ph-tooltip-${generatedId}`;
+
+  function setOpen(next: boolean) {
+    if (open === undefined) setInternalOpen(next);
+    onOpenChange?.(next);
+  }
+
+  function clearTimer() {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    timerRef.current = null;
+  }
+
+  function updatePosition() {
+    if (!triggerRef.current) return;
+    setPosition(
+      tooltipPosition(
+        triggerRef.current.getBoundingClientRect(),
+        side,
+        align,
+        sideOffset,
+      ),
+    );
+  }
+
+  function show(immediate: boolean) {
+    clearTimer();
+    updatePosition();
+    const delay = immediate ? 0 : (delayDuration ?? providerDelay);
+    if (!delay) setOpen(true);
+    else timerRef.current = setTimeout(() => setOpen(true), delay);
+  }
+
+  function hide() {
+    clearTimer();
+    setOpen(false);
+  }
+
+  useEffect(() => {
+    if (!isOpen) return;
+    const reposition = () => updatePosition();
+    window.addEventListener("resize", reposition);
+    window.addEventListener("scroll", reposition, true);
+    return () => {
+      window.removeEventListener("resize", reposition);
+      window.removeEventListener("scroll", reposition, true);
+    };
+  });
+
+  useEffect(() => () => clearTimer(), []);
+
+  const describedBy = [children.props["aria-describedby"], tooltipId]
+    .filter(Boolean)
+    .join(" ");
+  const trigger = cloneElement(children, { "aria-describedby": describedBy });
+
+  return (
+    <>
+      <span
+        ref={triggerRef}
+        className="inline-flex"
+        onMouseEnter={() => show(false)}
+        onMouseLeave={hide}
+        onFocusCapture={() => show(true)}
+        onBlurCapture={hide}
+        onKeyDown={(event) => {
+          if (event.key === "Escape") hide();
+        }}
+      >
+        {trigger}
+      </span>
+      {isOpen && position && typeof document !== "undefined"
+        ? createPortal(
+            <span
+              style={{ position: "fixed", ...position }}
+              className="pointer-events-none z-[200]"
+            >
+              <span
+                id={tooltipId}
+                role="tooltip"
+                data-side={side}
+                className={cn("ph-tooltip-content", className)}
+              >
+                {content}
+              </span>
+            </span>,
+            document.body,
+          )
+        : null}
+    </>
+  );
+}

package/src/components/ui/Widget.tsx

@@ -0,0 +1,31 @@
+import { type ReactNode } from "react";
+import { cn } from "@/lib/cn";
+
+export interface WidgetProps {
+  title: ReactNode;
+  onClose?: () => void;
+  actions?: ReactNode;
+  children?: ReactNode;
+  className?: string;
+}
+
+export function Widget({ title, onClose, actions, children, className }: WidgetProps) {
+  return (
+    <div className={cn("ph-widget", className)}>
+      <div className="ph-widget__header">
+        <span className="ph-widget__title">{title}</span>
+        {actions}
+        {onClose && (
+          <button type="button" onClick={onClose} className="ph-widget__close" aria-label="Close">
+            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+              <path d="M3 3l8 8M11 3l-8 8" />
+            </svg>
+          </button>
+        )}
+      </div>
+      <div className="ph-widget__content">{children}</div>
+    </div>
+  );
+}
+
+Widget.displayName = "Widget";

package/src/components/ui/index.ts

@@ -1,10 +1,44 @@
-export { Button as Button, type ButtonProps as ButtonProps, type ButtonShape as ButtonShape, type ButtonSize as ButtonSize, type ButtonVariant as ButtonVariant } from "@/components/ui/Button";
-export { ButtonChrome as ButtonChrome, type ButtonChromeProps as ButtonChromeProps } from "@/components/ui/ButtonChrome";
-export { Alert as Alert, type AlertProps as AlertProps, type AlertStatus as AlertStatus } from "@/components/ui/Alert";
-export { Badge as Badge, type BadgeProps as BadgeProps, type BadgeSize as BadgeSize, type BadgeVariant as BadgeVariant } from "@/components/ui/Badge";
-export { Card as Card, type CardProps as CardProps, type CardVariant as CardVariant } from "@/components/ui/Card";
-export { Drawer as Drawer, type DrawerProps as DrawerProps, type DrawerSide as DrawerSide, type DrawerSize as DrawerSize } from "@/components/ui/Drawer";
-export { Kbd as Kbd, type KbdPlatform as KbdPlatform, type KbdProps as KbdProps, type KbdVariant as KbdVariant } from "@/components/ui/Kbd";
+"use client";
+
+export {
+  Button as Button,
+  type ButtonProps as ButtonProps,
+  type ButtonShape as ButtonShape,
+  type ButtonSize as ButtonSize,
+  type ButtonVariant as ButtonVariant,
+} from "@/components/ui/Button";
+export {
+  ButtonChrome as ButtonChrome,
+  type ButtonChromeProps as ButtonChromeProps,
+} from "@/components/ui/ButtonChrome";
+export {
+  Alert as Alert,
+  type AlertProps as AlertProps,
+  type AlertStatus as AlertStatus,
+} from "@/components/ui/Alert";
+export {
+  Badge as Badge,
+  type BadgeProps as BadgeProps,
+  type BadgeSize as BadgeSize,
+  type BadgeVariant as BadgeVariant,
+} from "@/components/ui/Badge";
+export {
+  Card as Card,
+  type CardProps as CardProps,
+  type CardVariant as CardVariant,
+} from "@/components/ui/Card";
+export {
+  Drawer as Drawer,
+  type DrawerProps as DrawerProps,
+  type DrawerSide as DrawerSide,
+  type DrawerSize as DrawerSize,
+} from "@/components/ui/Drawer";
+export {
+  Kbd as Kbd,
+  type KbdPlatform as KbdPlatform,
+  type KbdProps as KbdProps,
+  type KbdVariant as KbdVariant,
+} from "@/components/ui/Kbd";
 export {
   Loader,
   LoadingState,
@@ -71,18 +105,64 @@ export {
   type FormFieldControlProps as FormFieldControlProps,
   type FormFieldProps as FormFieldProps,
 } from "@/components/ui/FormField";
-export { Modal as Modal, type ModalProps as ModalProps, type ModalSize as ModalSize } from "@/components/ui/Modal";
-export { Breadcrumbs as Breadcrumbs, Pagination as Pagination, type BreadcrumbItem as BreadcrumbItem, type BreadcrumbsProps as BreadcrumbsProps, type PaginationProps as PaginationProps } from "@/components/ui/Navigation";
-export { Panel as Panel, type PanelProps as PanelProps } from "@/components/ui/Panel";
-export { Rating as Rating, type RatingProps as RatingProps } from "@/components/ui/Rating";
-export { SearchGroup as SearchGroup, SearchInput as SearchInput, type SearchGroupProps as SearchGroupProps, type SearchInputProps as SearchInputProps } from "@/components/ui/SearchInput";
-export { Table as Table, type TableColumn as TableColumn, type TableProps as TableProps } from "@/components/ui/Table";
-export { Stat as Stat, type StatProps as StatProps, type StatTone as StatTone } from "@/components/ui/Stat";
-export { Toast as Toast, ToastStack as ToastStack, type ToastProps as ToastProps, type ToastStackProps as ToastStackProps, type ToastStatus as ToastStatus } from "@/components/ui/Toast";
-export { Tabs as Tabs, type TabItem as TabItem, type TabsProps as TabsProps, type TabsVariant as TabsVariant } from "@/components/ui/Tabs";
+export {
+  Modal as Modal,
+  type ModalProps as ModalProps,
+  type ModalSize as ModalSize,
+} from "@/components/ui/Modal";
+export {
+  Breadcrumbs as Breadcrumbs,
+  Pagination as Pagination,
+  type BreadcrumbItem as BreadcrumbItem,
+  type BreadcrumbsProps as BreadcrumbsProps,
+  type PaginationProps as PaginationProps,
+} from "@/components/ui/Navigation";
+export {
+  Panel as Panel,
+  type PanelProps as PanelProps,
+} from "@/components/ui/Panel";
+export {
+  Rating as Rating,
+  type RatingProps as RatingProps,
+} from "@/components/ui/Rating";
+export {
+  SearchGroup as SearchGroup,
+  SearchInput as SearchInput,
+  type SearchGroupProps as SearchGroupProps,
+  type SearchInputProps as SearchInputProps,
+} from "@/components/ui/SearchInput";
+export {
+  Table as Table,
+  type TableColumn as TableColumn,
+  type TableProps as TableProps,
+} from "@/components/ui/Table";
+export {
+  Stat as Stat,
+  type StatProps as StatProps,
+  type StatTone as StatTone,
+} from "@/components/ui/Stat";
+export {
+  Toast as Toast,
+  ToastStack as ToastStack,
+  type ToastProps as ToastProps,
+  type ToastStackProps as ToastStackProps,
+  type ToastStatus as ToastStatus,
+} from "@/components/ui/Toast";
+export {
+  Tabs as Tabs,
+  type TabItem as TabItem,
+  type TabsProps as TabsProps,
+  type TabsVariant as TabsVariant,
+} from "@/components/ui/Tabs";
 export { ThemeDomSync } from "@/components/ui/ThemeDomSync";
-export { ThemeManager, type ThemeManagerProps } from "@/components/ui/ThemeManager";
-export { ThemeSwitcher, type ThemeSwitcherProps } from "@/components/ui/ThemeSwitcher";
+export {
+  ThemeManager,
+  type ThemeManagerProps,
+} from "@/components/ui/ThemeManager";
+export {
+  ThemeSwitcher,
+  type ThemeSwitcherProps,
+} from "@/components/ui/ThemeSwitcher";
 export {
   IconBase as Icon,
   IconByName as IconByName,
@@ -97,6 +177,14 @@ export { SegmentedControl } from "@/components/ui/SegmentedControl";
 export { CommandPalette } from "@/components/ui/CommandPalette";
 export { Calendar } from "@/components/ui/Calendar";
 export { HoverCard } from "@/components/ui/HoverCard";
+export {
+  Tooltip,
+  TooltipProvider,
+  type TooltipAlign,
+  type TooltipProps,
+  type TooltipProviderProps,
+  type TooltipSide,
+} from "@/components/ui/Tooltip";
 export { EmptyState } from "@/components/ui/EmptyState";
 export {
   FilterChips,
@@ -112,12 +200,33 @@ export {
   type FilterMenuProps,
   type SortMenuProps,
 } from "@/components/ui/FilterBar";
-export { FilterControls, type FilterControlsProps } from "@/components/ui/FilterControls";
+export {
+  FilterControls,
+  type FilterControlsProps,
+} from "@/components/ui/FilterControls";
 export { CodeBlock } from "@/components/ui/CodeBlock";
-export { ComponentDocs, type ComponentDocsProps, type ComponentPropRow } from "@/components/ui/ComponentDocs";
+export {
+  ComponentDocs,
+  type ComponentDocsProps,
+  type ComponentPropRow,
+} from "@/components/ui/ComponentDocs";
 export { ShowcaseWrapper } from "@/components/ui/ShowcaseWrapper";
 export { CollapsibleSection } from "@/components/ui/CollapsibleSection";
-export { Display, H1, H2, H3, H4, H5, P, Small, Caption, Overline, Lead, Mono, Label } from "@/components/ui/Typography";
+export {
+  Display,
+  H1,
+  H2,
+  H3,
+  H4,
+  H5,
+  P,
+  Small,
+  Caption,
+  Overline,
+  Lead,
+  Mono,
+  Label,
+} from "@/components/ui/Typography";
 export {
   Avatar as Avatar,
   AvatarGroup as AvatarGroup,
@@ -149,3 +258,148 @@ export {
   type TimelineProps as TimelineProps,
   type TimelineEvent as TimelineEvent,
 } from "@/components/ui/Timeline";
+export {
+  Banner as Banner,
+  type BannerProps as BannerProps,
+  type BannerType as BannerType,
+} from "@/components/ui/Banner";
+export {
+  Dialog as Dialog,
+  type DialogProps as DialogProps,
+} from "@/components/ui/Dialog";
+export {
+  Divider as Divider,
+  type DividerProps as DividerProps,
+} from "@/components/ui/Divider";
+export {
+  Tag as Tag,
+  type TagProps as TagProps,
+  type TagType as TagType,
+} from "@/components/ui/Tag";
+export {
+  ProgressCircle as ProgressCircle,
+  type ProgressCircleProps as ProgressCircleProps,
+} from "@/components/ui/ProgressCircle";
+export {
+  Row as Row,
+  type RowProps as RowProps,
+} from "@/components/ui/Row";
+export {
+  Widget as Widget,
+  type WidgetProps as WidgetProps,
+} from "@/components/ui/Widget";
+export {
+  Lettermark as Lettermark,
+  type LettermarkProps as LettermarkProps,
+} from "@/components/ui/Lettermark";
+export {
+  Splotch as Splotch,
+  type SplotchProps as SplotchProps,
+  type SplotchColor as SplotchColor,
+} from "@/components/ui/Splotch";
+export {
+  Popover as Popover,
+  type PopoverProps as PopoverProps,
+} from "@/components/ui/Popover";
+export {
+  LoadingBar as LoadingBar,
+  type LoadingBarProps as LoadingBarProps,
+} from "@/components/ui/LoadingBar";
+export {
+  Link as Link,
+  type LinkProps as LinkProps,
+} from "@/components/ui/Link";
+export {
+  Spinner as Spinner,
+  type SpinnerProps as SpinnerProps,
+} from "@/components/ui/Spinner";
+export {
+  Snack as Snack,
+  type SnackProps as SnackProps,
+} from "@/components/ui/Snack";
+export {
+  Combobox as Combobox,
+  type ComboboxProps as ComboboxProps,
+  type ComboboxOption as ComboboxOption,
+} from "@/components/ui/Combobox";
+export {
+  Autocomplete as Autocomplete,
+  type AutocompleteProps as AutocompleteProps,
+  type AutocompleteOption as AutocompleteOption,
+} from "@/components/ui/Autocomplete";
+export {
+  ContextMenu as ContextMenu,
+  type ContextMenuProps as ContextMenuProps,
+  type ContextMenuItem as ContextMenuItem,
+} from "@/components/ui/ContextMenu";
+export {
+  Resizable as Resizable,
+  type ResizableProps as ResizableProps,
+} from "@/components/ui/Resizable";
+export {
+  ScrollArea as ScrollArea,
+  type ScrollAreaProps as ScrollAreaProps,
+} from "@/components/ui/ScrollArea";
+export {
+  NumberField as NumberField,
+  type NumberFieldProps as NumberFieldProps,
+} from "@/components/ui/NumberField";
+export {
+  InputGroup as InputGroup,
+  type InputGroupProps as InputGroupProps,
+} from "@/components/ui/InputGroup";
+export {
+  ButtonGroup as ButtonGroup,
+  type ButtonGroupProps as ButtonGroupProps,
+} from "@/components/ui/ButtonGroup";
+export {
+  ToggleButton as ToggleButton,
+  ToggleGroup as ToggleGroup,
+  type ToggleButtonProps as ToggleButtonProps,
+  type ToggleGroupProps as ToggleGroupProps,
+} from "@/components/ui/Toggle";
+export {
+  Menubar as Menubar,
+  type MenubarProps as MenubarProps,
+  type MenubarItem as MenubarItem,
+} from "@/components/ui/Menubar";
+export {
+  AlertDialog as AlertDialog,
+  type AlertDialogProps as AlertDialogProps,
+} from "@/components/ui/AlertDialog";
+export {
+  Dot as Dot,
+  type DotProps as DotProps,
+} from "@/components/ui/Dot";
+export {
+  Collapsible as Collapsible,
+  type CollapsibleProps as CollapsibleProps,
+} from "@/components/ui/Collapsible";
+export {
+  Metric as Metric,
+  type MetricProps as MetricProps,
+} from "@/components/ui/Metric";
+export {
+  Chip as Chip,
+  type ChipProps as ChipProps,
+} from "@/components/ui/Chip";
+export {
+  DataTable as DataTable,
+  type DataTableProps as DataTableProps,
+  type DataTableColumn as DataTableColumn,
+} from "@/components/ui/DataTable";
+export {
+  DatePicker as DatePicker,
+  type DatePickerProps as DatePickerProps,
+} from "@/components/ui/DatePicker";
+export {
+  AppLayout as AppLayout,
+  type AppLayoutProps as AppLayoutProps,
+} from "@/components/ui/AppLayout";
+
+export {
+  Sidebar as Sidebar,
+  type SidebarProps as SidebarProps,
+  type SidebarGroup as SidebarGroup,
+  type SidebarItemDef as SidebarItemDef,
+} from "@/components/ui/Sidebar";