@xenide-io/the-old-ui-theme 0.7.1 → 0.9.0

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

@@ -1,10 +1,12 @@
 import { useState } from "react";
-import { render, screen } from "@testing-library/react";
+import { cleanup, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { describe, expect, it, vi } from "vitest";
+import { afterEach, describe, expect, it, vi } from "vitest";
 import { CommandPalette } from "@/components/ui/CommandPalette";
 
 describe("command palette", () => {
+  afterEach(cleanup);
+
   it("behaves as a modal dialog and restores focus when dismissed", async () => {
     const user = userEvent.setup();
     const onSelect = vi.fn();
@@ -19,6 +21,7 @@ describe("command palette", () => {
           <CommandPalette
             isOpen={open}
             onClose={() => setOpen(false)}
+            dataTest="command-palette-overlay"
             items={[
               { id: "reports", label: "Open reports", onSelect },
             ]}
@@ -31,11 +34,95 @@ describe("command palette", () => {
     const trigger = screen.getByRole("button", { name: "Open commands" });
     await user.click(trigger);
 
-    expect(screen.getByRole("dialog", { name: "Command palette" })).toBeInTheDocument();
-    expect(screen.getByRole("textbox", { name: "Search commands" })).toHaveFocus();
+    const dialog = screen.getByRole("dialog", { name: "Command palette" });
+    const input = screen.getByRole("combobox", { name: "Search commands" });
+    expect(dialog.parentElement).toBe(document.body);
+    expect(trigger.parentElement).toHaveAttribute("aria-hidden", "true");
+    expect(input).toHaveFocus();
+
+    await user.tab();
+    expect(input).toHaveFocus();
 
     await user.keyboard("{Escape}");
     expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
     expect(trigger).toHaveFocus();
   });
+
+  it("dismisses through the Radix overlay and restores focus", async () => {
+    const user = userEvent.setup();
+
+    function Fixture() {
+      const [open, setOpen] = useState(false);
+      return (
+        <>
+          <button type="button" onClick={() => setOpen(true)}>
+            Open commands
+          </button>
+          <CommandPalette
+            isOpen={open}
+            onClose={() => setOpen(false)}
+            dataTest="command-palette-overlay"
+            items={[{ id: "reports", label: "Open reports", onSelect: vi.fn() }]}
+          />
+        </>
+      );
+    }
+
+    render(<Fixture />);
+    const trigger = screen.getByRole("button", { name: "Open commands" });
+    await user.click(trigger);
+
+    await user.click(document.querySelector('[data-test="command-palette-overlay"]')!);
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    expect(trigger).toHaveFocus();
+  });
+
+  it("keeps focus on the search input while navigating and selecting listbox options", async () => {
+    const user = userEvent.setup();
+    const onReports = vi.fn();
+    const onSettings = vi.fn();
+
+    function Fixture() {
+      const [open, setOpen] = useState(false);
+      return (
+        <>
+          <button type="button" onClick={() => setOpen(true)}>
+            Open commands
+          </button>
+          <CommandPalette
+            isOpen={open}
+            onClose={() => setOpen(false)}
+            items={[
+              { id: "reports", label: "Open reports", onSelect: onReports },
+              { id: "settings", label: "Open settings", onSelect: onSettings },
+            ]}
+          />
+        </>
+      );
+    }
+
+    render(<Fixture />);
+    const trigger = screen.getByRole("button", { name: "Open commands" });
+    await user.click(trigger);
+
+    const input = screen.getByRole("combobox", { name: "Search commands" });
+    const listbox = screen.getByRole("listbox", { name: "Commands" });
+    const reports = screen.getByRole("option", { name: "Open reports" });
+    const settings = screen.getByRole("option", { name: "Open settings" });
+
+    expect(input).toHaveAttribute("aria-controls", listbox.id);
+    expect(input).toHaveAttribute("aria-activedescendant", reports.id);
+    expect(reports).toHaveAttribute("aria-selected", "true");
+
+    await user.keyboard("{ArrowDown}");
+    expect(input).toHaveFocus();
+    expect(input).toHaveAttribute("aria-activedescendant", settings.id);
+    expect(settings).toHaveAttribute("aria-selected", "true");
+
+    await user.keyboard("{Enter}");
+    expect(onSettings).toHaveBeenCalledTimes(1);
+    expect(onReports).not.toHaveBeenCalled();
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    expect(trigger).toHaveFocus();
+  });
 });

package/src/components/ui/CommandPalette.tsx

@@ -1,10 +1,11 @@
 "use client";
 
-import { useState, useEffect, useRef } from "react";
+import { useEffect, useId, useRef, useState } from "react";
+import * as Dialog from "@radix-ui/react-dialog";
 import { cn } from "@/lib/cn";
 import { IconSearch } from "@/components/icons";
 
-interface CommandItem {
+export interface CommandItem {
   id: string;
   label: string;
   shortcut?: string;
@@ -12,7 +13,7 @@ interface CommandItem {
   onSelect: () => void;
 }
 
-interface CommandPaletteProps {
+export interface CommandPaletteProps {
   items: CommandItem[];
   isOpen: boolean;
   onClose: () => void;
@@ -38,149 +39,158 @@ export function CommandPalette({
   const [query, setQuery] = useState("");
   const [selectedIndex, setSelectedIndex] = useState(0);
   const inputRef = useRef<HTMLInputElement>(null);
-  const panelRef = useRef<HTMLDivElement>(null);
-  const previousFocusRef = useRef<HTMLElement | null>(null);
+  const listboxRef = useRef<HTMLDivElement>(null);
+  const restoreFocusRef = useRef<HTMLElement | null>(null);
+  const generatedId = useId();
+  const listboxId = `${id ?? `command-palette-${generatedId}`}-listbox`;
 
   const filtered = items.filter((item) =>
     item.label.toLowerCase().includes(query.toLowerCase()),
   );
+  const activeIndex = filtered.length
+    ? Math.min(selectedIndex, filtered.length - 1)
+    : 0;
+  const activeItem = filtered[activeIndex];
 
   useEffect(() => {
     if (!isOpen) return;
-    previousFocusRef.current =
-      document.activeElement instanceof HTMLElement
-        ? document.activeElement
-        : null;
     setQuery("");
     setSelectedIndex(0);
-    inputRef.current?.focus();
-
-    return () => previousFocusRef.current?.focus();
   }, [isOpen]);
 
   useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (!isOpen) return;
-
-      switch (e.key) {
-        case "ArrowDown":
-          if (!filtered.length) break;
-          e.preventDefault();
-          setSelectedIndex((i) => (i + 1) % filtered.length);
-          break;
-        case "ArrowUp":
-          if (!filtered.length) break;
-          e.preventDefault();
-          setSelectedIndex((i) => (i - 1 + filtered.length) % filtered.length);
-          break;
-        case "Enter":
-          e.preventDefault();
-          filtered[selectedIndex]?.onSelect();
-          onClose();
-          break;
-        case "Escape":
-          onClose();
-          break;
-        case "Tab": {
-          const focusable = panelRef.current?.querySelectorAll<HTMLElement>(
-            'input, button, [href], [tabindex]:not([tabindex="-1"])',
-          );
-          if (!focusable?.length) break;
-          const first = focusable[0];
-          const last = focusable[focusable.length - 1];
-          if (e.shiftKey && document.activeElement === first) {
-            e.preventDefault();
-            last.focus();
-          } else if (!e.shiftKey && document.activeElement === last) {
-            e.preventDefault();
-            first.focus();
-          }
-          break;
-        }
-      }
-    };
+    setSelectedIndex((current) => Math.min(current, Math.max(filtered.length - 1, 0)));
+  }, [filtered.length]);
 
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [isOpen, filtered, selectedIndex, onClose]);
+  useEffect(() => {
+    if (!isOpen || !activeItem) return;
+    listboxRef.current
+      ?.querySelectorAll<HTMLElement>('[role="option"]')
+      [activeIndex]
+      ?.scrollIntoView({ block: "nearest" });
+  }, [activeIndex, activeItem, isOpen]);
 
-  if (!isOpen) return null;
+  const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    switch (event.key) {
+      case "ArrowDown":
+        if (!filtered.length) return;
+        event.preventDefault();
+        setSelectedIndex((current) => (current + 1) % filtered.length);
+        return;
+      case "ArrowUp":
+        if (!filtered.length) return;
+        event.preventDefault();
+        setSelectedIndex((current) =>
+          (current - 1 + filtered.length) % filtered.length,
+        );
+        return;
+      case "Enter":
+        if (!activeItem) return;
+        event.preventDefault();
+        activeItem.onSelect();
+        onClose();
+        return;
+      default:
+        return;
+    }
+  };
 
   return (
-    <div
-      id={id}
-      data-test={dataTest}
-      className="fixed inset-0 z-50 flex items-start justify-center bg-black/40 pt-[20vh] backdrop-blur-sm"
-      onMouseDown={(event) => {
-        if (event.target === event.currentTarget) onClose();
+    <Dialog.Root
+      open={isOpen}
+      onOpenChange={(nextOpen) => {
+        if (!nextOpen) onClose();
       }}
     >
-      <div
-        ref={panelRef}
-        role="dialog"
-        aria-modal="true"
-        aria-label="Command palette"
-        className={cn(
-          "w-full max-w-xl overflow-hidden rounded-xl border border-ph-border bg-ph-surface shadow-ph-md",
-          className,
-        )}
-      >
-        <div className="flex items-center gap-3 border-b border-ph-border px-4 py-3">
-          <IconSearch className="h-5 w-5 text-ph-mutedtext" />
-          <input
-            ref={inputRef}
-            id={inputId}
-            data-test={inputDataTest}
-            type="text"
-            aria-label="Search commands"
-            value={query}
-            onChange={(e) => {
-              setQuery(e.target.value);
-              setSelectedIndex(0);
-            }}
-            placeholder={placeholder}
-            className="flex-1 bg-transparent text-ph-ink outline-none placeholder:text-ph-mutedtext"
-          />
-          <kbd className="rounded border border-ph-border bg-ph-muted px-1.5 py-0.5 text-xs text-ph-mutedtext">
-            ESC
-          </kbd>
-        </div>
-        <div className="max-h-[50vh] overflow-y-auto py-2">
-          {filtered.length === 0 ? (
-            <div className="px-4 py-8 text-center text-sm text-ph-mutedtext">
-              No results found.
-            </div>
-          ) : (
-            filtered.map((item, index) => (
-              <button
-                key={item.id}
-                type="button"
-                id={`command-${item.id}`}
-                data-test={`command-${item.id}`}
-                onClick={() => {
-                  item.onSelect();
-                  onClose();
-                }}
-                onMouseEnter={() => setSelectedIndex(index)}
-                className={cn(
-                  "flex w-full items-center gap-3 px-4 py-2.5 text-left text-sm transition-colors",
-                  index === selectedIndex
-                    ? "bg-ph-muted text-ph-ink"
-                    : "text-ph-subtle",
-                )}
-              >
-                {item.icon && <span className="h-5 w-5">{item.icon}</span>}
-                <span className="flex-1">{item.label}</span>
-                {item.shortcut && (
-                  <kbd className="rounded border border-ph-border bg-ph-surface px-1.5 py-0.5 text-xs text-ph-mutedtext">
-                    {item.shortcut}
-                  </kbd>
-                )}
-              </button>
-            ))
+      <Dialog.Portal>
+        <Dialog.Overlay
+          id={id}
+          data-test={dataTest}
+          className="fixed inset-0 z-50 bg-black/40 backdrop-blur-sm"
+        />
+        <Dialog.Content
+          className={cn(
+            "fixed left-1/2 top-[20vh] z-50 w-full max-w-xl -translate-x-1/2 overflow-hidden rounded-xl border border-ph-border bg-ph-surface shadow-ph-md",
+            className,
           )}
-        </div>
-      </div>
-    </div>
+          onOpenAutoFocus={(event) => {
+            restoreFocusRef.current =
+              document.activeElement instanceof HTMLElement
+                ? document.activeElement
+                : null;
+            event.preventDefault();
+            inputRef.current?.focus();
+          }}
+          onCloseAutoFocus={(event) => {
+            event.preventDefault();
+            restoreFocusRef.current?.focus();
+          }}
+        >
+          <Dialog.Title className="sr-only">Command palette</Dialog.Title>
+          <div className="flex items-center gap-3 border-b border-ph-border px-4 py-3">
+            <IconSearch className="h-5 w-5 text-ph-mutedtext" />
+            <input
+              ref={inputRef}
+              id={inputId}
+              data-test={inputDataTest}
+              type="text"
+              role="combobox"
+              aria-label="Search commands"
+              aria-autocomplete="list"
+              aria-controls={listboxId}
+              aria-expanded="true"
+              aria-activedescendant={activeItem ? `command-${activeItem.id}` : undefined}
+              value={query}
+              onChange={(event) => {
+                setQuery(event.target.value);
+                setSelectedIndex(0);
+              }}
+              onKeyDown={handleInputKeyDown}
+              placeholder={placeholder}
+              className="flex-1 bg-transparent text-ph-ink outline-none placeholder:text-ph-mutedtext"
+            />
+            <kbd aria-hidden="true" className="rounded border border-ph-border bg-ph-muted px-1.5 py-0.5 text-xs text-ph-mutedtext">
+              ESC
+            </kbd>
+          </div>
+          <div ref={listboxRef} id={listboxId} role="listbox" aria-label="Commands" className="max-h-[50vh] overflow-y-auto py-2">
+            {filtered.length === 0 ? (
+              <div role="status" className="px-4 py-8 text-center text-sm text-ph-mutedtext">
+                No results found.
+              </div>
+            ) : (
+              filtered.map((item, index) => (
+                <div
+                  key={item.id}
+                  id={`command-${item.id}`}
+                  data-test={`command-${item.id}`}
+                  role="option"
+                  aria-selected={index === activeIndex}
+                  onClick={() => {
+                    item.onSelect();
+                    onClose();
+                  }}
+                  onMouseEnter={() => setSelectedIndex(index)}
+                  className={cn(
+                    "flex w-full cursor-pointer items-center gap-3 px-4 py-2.5 text-left text-sm transition-colors",
+                    index === activeIndex
+                      ? "bg-ph-muted text-ph-ink"
+                      : "text-ph-subtle",
+                  )}
+                >
+                  {item.icon && <span aria-hidden="true" className="h-5 w-5">{item.icon}</span>}
+                  <span className="flex-1">{item.label}</span>
+                  {item.shortcut && (
+                    <kbd aria-hidden="true" className="rounded border border-ph-border bg-ph-surface px-1.5 py-0.5 text-xs text-ph-mutedtext">
+                      {item.shortcut}
+                    </kbd>
+                  )}
+                </div>
+              ))
+            )}
+          </div>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
   );
 }

package/src/components/ui/EmptyState.tsx

@@ -2,7 +2,7 @@
 
 import { cn } from "@/lib/cn";
 
-interface EmptyStateProps {
+export interface EmptyStateProps {
   icon?: React.ReactNode;
   title: string;
   description?: string;
@@ -23,7 +23,7 @@ export function EmptyState({ icon, title, description, action, className }: Empt
           {icon}
         </div>
       )}
-      <h3 className="text-base font-semibold text-ph-ink">{title}</h3>
+      <h2 className="text-base font-semibold text-ph-ink">{title}</h2>
       {description && (
         <p className="mt-1 max-w-sm text-sm text-ph-subtle">{description}</p>
       )}

package/src/components/ui/FormField.tsx

@@ -37,7 +37,7 @@ export function FormField({
   const errorId = error ? `${id}-error` : undefined;
   const controlProps: FormFieldControlProps = {
     id,
-    "aria-describedby": descriptionId,
+    "aria-describedby": errorId ?? descriptionId,
     "aria-errormessage": errorId,
     "aria-invalid": error ? true : undefined,
   };

package/src/components/ui/Input.tsx

@@ -1,4 +1,5 @@
-import { forwardRef, useId, type ComponentPropsWithoutRef, type ReactNode } from "react";
+import { forwardRef, useId, useState, type ComponentPropsWithoutRef, type ReactNode } from "react";
+import { Eye, EyeClosed } from "iconoir-react";
 import { FormField } from "@/components/ui/FormField";
 import { IconCheck } from "@/components/icons";
 import { cn } from "@/lib/cn";
@@ -35,6 +36,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input({
   helperText,
   size = "md",
   variant = "default",
+  type = "text",
   className,
   wrapperClassName,
   disabled,
@@ -45,6 +47,8 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input({
   const autoId = useId();
   const id = idProp ?? autoId;
   const hasError = Boolean(error);
+  const isPassword = type === "password";
+  const [revealed, setRevealed] = useState(false);
 
   return (
     <FormField
@@ -58,22 +62,42 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input({
       className={wrapperClassName}
     >
       {(fieldProps) => (
-        <input
-          {...fieldProps}
-          ref={ref}
-          disabled={disabled}
-          required={required}
-          aria-describedby={joinIds(ariaDescribedBy, fieldProps["aria-describedby"])}
-          className={cn(
-            "ph-input w-full",
-            sizeMap[size],
-            variant === "ghost" && "ph-input-ghost",
-            hasError && "ph-input-error",
-            disabled && "cursor-not-allowed opacity-60",
-            className
-          )}
-          {...props}
-        />
+        <div className="relative">
+          <input
+            {...fieldProps}
+            ref={ref}
+            type={isPassword && revealed ? "text" : type}
+            disabled={disabled}
+            required={required}
+            aria-describedby={joinIds(ariaDescribedBy, fieldProps["aria-describedby"])}
+            className={cn(
+              "ph-input w-full",
+              isPassword && "pr-10",
+              sizeMap[size],
+              variant === "ghost" && "ph-input-ghost",
+              hasError && "ph-input-error",
+              disabled && "cursor-not-allowed opacity-60",
+              className
+            )}
+            {...props}
+          />
+          {isPassword ? (
+            <button
+              type="button"
+              onClick={() => setRevealed((current) => !current)}
+              aria-label={revealed ? "Hide password" : "Show password"}
+              aria-pressed={revealed}
+              disabled={disabled}
+              className="absolute inset-y-0 right-0 flex w-10 items-center justify-center rounded-r-[var(--ph-radius-control)] text-ph-mutedtext transition-colors hover:text-ph-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-focus disabled:opacity-40"
+            >
+              {revealed ? (
+                <EyeClosed className="h-4 w-4" aria-hidden />
+              ) : (
+                <Eye className="h-4 w-4" aria-hidden />
+              )}
+            </button>
+          ) : null}
+        </div>
       )}
     </FormField>
   );
@@ -222,7 +246,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Che
           type="checkbox"
           disabled={disabled}
           aria-invalid={hasError || undefined}
-          aria-describedby={joinIds(ariaDescribedBy, descriptionId)}
+          aria-describedby={joinIds(ariaDescribedBy, descriptionId, errorId)}
           aria-errormessage={errorId}
           className={cn(
             "ph-checkbox",

package/src/components/ui/Kbd.tsx

@@ -65,7 +65,12 @@ export function Kbd({
 }: KbdProps) {
   if (variant === "token") {
     return (
-      <code className={cn("ph-code-token ph-kbd", className)} aria-label={ariaLabel} {...props}>
+      <code
+        className={cn("ph-code-token ph-kbd", className)}
+        role={ariaLabel ? "img" : undefined}
+        aria-label={ariaLabel}
+        {...props}
+      >
         {children}
       </code>
     );
@@ -77,14 +82,24 @@ export function Kbd({
 
   if (variant === "key") {
     return (
-      <kbd className={cn("ph-keycap", className)} aria-label={accessibleLabel} {...props}>
+      <kbd
+        className={cn("ph-keycap", className)}
+        role={accessibleLabel ? "img" : undefined}
+        aria-label={accessibleLabel}
+        {...props}
+      >
         {displayKeys[0]}
       </kbd>
     );
   }
 
   return (
-    <kbd className={cn("ph-shortcut-group ph-keycap", className)} aria-label={accessibleLabel} {...props}>
+    <kbd
+      className={cn("ph-shortcut-group ph-keycap", className)}
+      role={accessibleLabel ? "img" : undefined}
+      aria-label={accessibleLabel}
+      {...props}
+    >
       {displayKeys.map((key, index) => (
         <span key={index} className="contents">
           {index > 0 && separator != null ? <span className="ph-shortcut-separator" aria-hidden="true">{separator}</span> : null}

package/src/components/ui/Modal.tsx

@@ -16,6 +16,7 @@ export interface ModalProps {
   footer?: ReactNode;
   size?: ModalSize;
   className?: string;
+  bodyClassName?: string;
   customLayout?: boolean;
   showCloseButton?: boolean;
   closeOnOutsideClick?: boolean;
@@ -45,6 +46,7 @@ export function Modal({
   footer,
   size = "md",
   className,
+  bodyClassName,
   customLayout = false,
   showCloseButton = true,
   closeOnOutsideClick = true,
@@ -138,7 +140,7 @@ export function Modal({
                   ) : null}
                 </header>
               ) : null}
-              <div className="ph-modal-body">{children}</div>
+              <div className={cn("ph-modal-body", bodyClassName)}>{children}</div>
               {footer ? <div className="ph-modal-footer">{footer}</div> : null}
             </>
           )}

package/src/components/ui/Progress.tsx

@@ -1,4 +1,4 @@
-import type { ComponentPropsWithoutRef } from "react";
+import { useId, type ComponentPropsWithoutRef } from "react";
 import { cn } from "@/lib/cn";
 
 export interface ProgressProps extends ComponentPropsWithoutRef<"div"> {
@@ -30,15 +30,22 @@ export function Progress({
   showPercentage = false,
   size = "md",
   className,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
   ...props
 }: ProgressProps) {
-  const percentage = Math.min(100, Math.max(0, (value / max) * 100));
+  const labelId = useId();
+  const safeMax = Number.isFinite(max) && max > 0 ? max : 100;
+  const safeValue = Number.isFinite(value)
+    ? Math.min(safeMax, Math.max(0, value))
+    : 0;
+  const percentage = (safeValue / safeMax) * 100;
 
   return (
     <div className={cn("w-full", className)} {...props}>
       {(label || showPercentage) && (
         <div className="mb-1.5 flex justify-between text-sm text-ph-subtle">
-          {label && <span>{label}</span>}
+          {label && <span id={labelId}>{label}</span>}
           {showPercentage && (
             <span className="tabular-nums">{Math.round(percentage)}%</span>
           )}
@@ -49,9 +56,11 @@ export function Progress({
           className={cn("ph-progress-bar", color)}
           style={{ width: `${percentage}%` }}
           role="progressbar"
-          aria-valuenow={value}
+          aria-valuenow={safeValue}
           aria-valuemin={0}
-          aria-valuemax={max}
+          aria-valuemax={safeMax}
+          aria-label={label ? undefined : (ariaLabel ?? "Progress")}
+          aria-labelledby={label ? (ariaLabelledBy ?? labelId) : ariaLabelledBy}
         />
       </div>
     </div>

package/src/components/ui/SegmentedControl.tsx

@@ -2,13 +2,13 @@
 
 import { cn } from "@/lib/cn";
 
-interface SegmentedControlOption {
+export interface SegmentedControlOption {
   value: string;
   label: string;
   icon?: React.ReactNode;
 }
 
-interface SegmentedControlProps {
+export interface SegmentedControlProps {
   options: SegmentedControlOption[];
   value: string;
   onChange: (value: string) => void;