@xenide-io/the-old-ui-theme 0.2.9 → 0.3.1

package/src/components/ui/Kbd.tsx

@@ -2,37 +2,112 @@ import type { HTMLAttributes, ReactNode } from "react";
 import { cn } from "@/lib/cn";
 
 export type KbdVariant = "shortcut" | "key" | "token";
+export type KbdPlatform = "text" | "mac" | "windows";
 
 export interface KbdProps extends HTMLAttributes<HTMLElement> {
   variant?: KbdVariant;
-  keys?: ReactNode[];
+  keys?: readonly ReactNode[];
+  platform?: KbdPlatform;
+  separator?: ReactNode;
   children?: ReactNode;
 }
 
-export function Kbd({ variant = "shortcut", keys, children, className, ...props }: KbdProps) {
+const platformLabels: Record<KbdPlatform, Record<string, string>> = {
+  text: {
+    command: "Command",
+    cmd: "Command",
+    option: "Option",
+    alt: "Alt",
+    control: "Control",
+    ctrl: "Control",
+    shift: "Shift",
+  },
+  mac: {
+    command: "⌘",
+    cmd: "⌘",
+    option: "⌥",
+    alt: "⌥",
+    control: "⌃",
+    ctrl: "⌃",
+    shift: "⇧",
+  },
+  windows: {
+    command: "Win",
+    cmd: "Win",
+    option: "Alt",
+    alt: "Alt",
+    control: "Ctrl",
+    ctrl: "Ctrl",
+    shift: "Shift",
+  },
+};
+
+const spokenLabels: Record<string, string> = {
+  "⌘": "Command",
+  "⌥": "Option",
+  "⌃": "Control",
+  "⇧": "Shift",
+  "↵": "Enter",
+  "⏎": "Enter",
+  "⌫": "Backspace",
+  "⎋": "Escape",
+};
+
+export function Kbd({
+  variant = "shortcut",
+  keys,
+  platform = "text",
+  separator,
+  children,
+  className,
+  "aria-label": ariaLabel,
+  ...props
+}: KbdProps) {
   if (variant === "token") {
     return (
-      <code className={cn("ph-kbd text-ph-ink", className)} {...props}>
+      <code className={cn("ph-code-token ph-kbd", className)} aria-label={ariaLabel} {...props}>
         {children}
       </code>
     );
   }
 
-  const content = keys?.length ? keys.join(" ") : normalizeShortcut(children);
+  const sourceKeys = keys?.length ? keys : children != null ? [children] : [];
+  const displayKeys = sourceKeys.map((key) => formatKey(key, platform));
+  const accessibleLabel = ariaLabel ?? getShortcutLabel(displayKeys);
+
+  if (variant === "key") {
+    return (
+      <kbd className={cn("ph-keycap", className)} aria-label={accessibleLabel} {...props}>
+        {displayKeys[0]}
+      </kbd>
+    );
+  }
 
   return (
-    <kbd className={cn("ph-shortcut", className)} {...props}>
-      {content}
+    <kbd className={cn("ph-shortcut-group ph-keycap", className)} 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}
+          <span className="ph-shortcut-key" aria-hidden={accessibleLabel ? true : undefined}>{key}</span>
+        </span>
+      ))}
     </kbd>
   );
 }
 
-function normalizeShortcut(children: ReactNode) {
-  if (typeof children !== "string") return children;
+function formatKey(key: ReactNode, platform: KbdPlatform) {
+  if (typeof key !== "string") return key;
+  return platformLabels[platform][key.toLowerCase()] ?? key;
+}
+
+function getShortcutLabel(keys: ReactNode[]) {
+  const labels = keys.map((key) => {
+    if (typeof key !== "string" && typeof key !== "number") return null;
+    const value = String(key);
+    return spokenLabels[value] ?? value;
+  });
 
-  return children
-    .replace(/\bCommand\b|\bCmd\b/g, "⌘")
-    .replace(/\bOption\b|\bAlt\b/g, "⌥")
-    .replace(/\bShift\b/g, "⇧")
-    .replace(/\bControl\b|\bCtrl\b/g, "⌃");
+  return labels.every((label): label is string => label != null)
+    ? labels.join(" + ")
+    : undefined;
 }

package/src/components/ui/Lettermark.tsx

@@ -0,0 +1,47 @@
+import { forwardRef, type HTMLAttributes } from "react";
+import { cn } from "@/lib/cn";
+
+export interface LettermarkProps extends HTMLAttributes<HTMLDivElement> {
+  name?: string | number | null;
+  index?: number;
+  rounded?: boolean;
+  outlined?: boolean;
+  size?: "xs" | "sm" | "md" | "lg";
+}
+
+export const Lettermark = forwardRef<HTMLDivElement, LettermarkProps>(function Lettermark({
+  name,
+  index,
+  outlined = false,
+  rounded = false,
+  size = "md",
+  className,
+  ...props
+}, ref) {
+  const letter = name
+    ? typeof name === "number"
+      ? String(Math.floor(name))
+      : String.fromCodePoint(name.codePointAt(0)!).toLocaleUpperCase()
+    : "?";
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "ph-lettermark",
+        `ph-lettermark--${size}`,
+        typeof index === "number" && `ph-lettermark--v-${(index % 8) + 1}`,
+        outlined && "ph-lettermark--outlined",
+        rounded && "ph-lettermark--rounded",
+        letter === "?" && "ph-lettermark--unknown",
+        className
+      )}
+      aria-hidden="true"
+      {...props}
+    >
+      {letter}
+    </div>
+  );
+});
+
+Lettermark.displayName = "Lettermark";

package/src/components/ui/Link.tsx

@@ -0,0 +1,32 @@
+import { forwardRef, type AnchorHTMLAttributes, type ReactNode } from "react";
+import { cn } from "@/lib/cn";
+
+export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  children: ReactNode;
+  disabled?: boolean;
+}
+
+export const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link({
+  className,
+  disabled = false,
+  children,
+  ...props
+}, ref) {
+  return (
+    <a
+      ref={ref}
+      className={cn(
+        "ph-link",
+        disabled && "ph-link--disabled pointer-events-none opacity-50",
+        className
+      )}
+      tabIndex={disabled ? -1 : undefined}
+      aria-disabled={disabled || undefined}
+      {...props}
+    >
+      {children}
+    </a>
+  );
+});
+
+Link.displayName = "Link";

package/src/components/ui/Loader.tsx

@@ -0,0 +1,96 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import { cn } from "@/lib/cn";
+
+export type LoaderVariant = "spinner" | "dots" | "pulse";
+export type LoaderSize = "sm" | "md" | "lg";
+export type SkeletonShape = "title" | "text" | "short-text" | "avatar" | "button" | "block";
+
+export interface LoaderProps extends Omit<ComponentPropsWithoutRef<"span">, "children"> {
+  variant?: LoaderVariant;
+  size?: LoaderSize;
+  label?: string;
+}
+
+export interface SkeletonProps extends ComponentPropsWithoutRef<"span"> {
+  shape?: SkeletonShape;
+}
+
+export interface LoadingStateProps extends Omit<ComponentPropsWithoutRef<"div">, "title"> {
+  label?: string;
+  title?: ReactNode;
+  description?: ReactNode;
+  variant?: LoaderVariant;
+  size?: LoaderSize;
+}
+
+const loaderSizeClass: Record<LoaderSize, string> = {
+  sm: "ph-loader-sm",
+  md: "ph-loader-md",
+  lg: "ph-loader-lg",
+};
+
+const skeletonShapeClass: Record<SkeletonShape, string> = {
+  title: "ph-skeleton-title",
+  text: "ph-skeleton-text",
+  "short-text": "ph-skeleton-text-short",
+  avatar: "ph-skeleton-avatar",
+  button: "ph-skeleton-button",
+  block: "ph-skeleton-block",
+};
+
+export function Loader({
+  variant = "spinner",
+  size = "md",
+  label = "Loading",
+  className,
+  ...props
+}: LoaderProps) {
+  return (
+    <span
+      role="status"
+      aria-label={label}
+      className={cn("ph-loader", loaderSizeClass[size], className)}
+      {...props}
+    >
+      {variant === "spinner" ? <span className="ph-loading" aria-hidden /> : null}
+      {variant === "dots" ? (
+        <span className="ph-loading-dots" aria-hidden>
+          <span />
+          <span />
+          <span />
+        </span>
+      ) : null}
+      {variant === "pulse" ? <span className="ph-loading-pulse" aria-hidden /> : null}
+    </span>
+  );
+}
+
+export function Skeleton({ shape = "text", className, ...props }: SkeletonProps) {
+  return (
+    <span
+      className={cn("ph-skeleton", skeletonShapeClass[shape], className)}
+      aria-hidden="true"
+      {...props}
+    />
+  );
+}
+
+export function LoadingState({
+  label = "Loading",
+  title = "Loading",
+  description,
+  variant = "spinner",
+  size = "lg",
+  className,
+  ...props
+}: LoadingStateProps) {
+  return (
+    <div className={cn("ph-loading-state", className)} role="status" aria-label={label} {...props}>
+      <Loader variant={variant} size={size} label={label} aria-hidden="true" />
+      <div className="ph-loading-state__copy">
+        <strong>{title}</strong>
+        {description ? <span>{description}</span> : null}
+      </div>
+    </div>
+  );
+}

package/src/components/ui/LoadingBar.tsx

@@ -0,0 +1,25 @@
+import type { HTMLAttributes } from "react";
+import { cn } from "@/lib/cn";
+
+export interface LoadingBarProps extends HTMLAttributes<HTMLDivElement> {
+  active?: boolean;
+}
+
+export function LoadingBar({ active = true, className, ...props }: LoadingBarProps) {
+  return (
+    <div
+      className={cn(
+        "ph-loading-bar",
+        active && "ph-loading-bar--active",
+        className
+      )}
+      role="progressbar"
+      aria-label="Loading"
+      {...props}
+    >
+      <div className="ph-loading-bar__fill" />
+    </div>
+  );
+}
+
+LoadingBar.displayName = "LoadingBar";

package/src/components/ui/Menubar.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { useState, useRef, useEffect, type ReactNode, type HTMLAttributes } from "react";
+import { cn } from "@/lib/cn";
+
+export interface MenubarItem {
+  label: string;
+  items?: { label: string; onClick?: () => void; disabled?: boolean; separator?: boolean }[];
+}
+
+export interface MenubarProps extends HTMLAttributes<HTMLDivElement> {
+  items: MenubarItem[];
+}
+
+export function Menubar({ items, className, ...props }: MenubarProps) {
+  const [openIndex, setOpenIndex] = useState(-1);
+  const barRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (openIndex < 0) return;
+    const handle = (e: MouseEvent) => {
+      if (barRef.current && !barRef.current.contains(e.target as Node)) {
+        setOpenIndex(-1);
+      }
+    };
+    document.addEventListener("mousedown", handle);
+    return () => document.removeEventListener("mousedown", handle);
+  }, [openIndex]);
+
+  return (
+    <div ref={barRef} className={cn("ph-menubar", className)} {...props}>
+      {items.map((item, i) => (
+        <div key={i} className="ph-menubar__item">
+          <button
+            type="button"
+            onClick={() => setOpenIndex(openIndex === i ? -1 : i)}
+            className={cn("ph-menubar__trigger", openIndex === i && "ph-menubar__trigger--open")}
+          >
+            {item.label}
+          </button>
+          {openIndex === i && item.items && (
+            <div className="ph-menubar__dropdown">
+              {item.items.map((sub, j) =>
+                sub.separator ? (
+                  <div key={j} className="ph-menubar__separator" />
+                ) : (
+                  <button
+                    key={j}
+                    type="button"
+                    disabled={sub.disabled}
+                    onClick={() => { sub.onClick?.(); setOpenIndex(-1); }}
+                    className="ph-menubar__sub-item"
+                  >
+                    {sub.label}
+                  </button>
+                )
+              )}
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+Menubar.displayName = "Menubar";

package/src/components/ui/Metric.tsx

@@ -0,0 +1,34 @@
+import { type ReactNode, type HTMLAttributes } from "react";
+import { cn } from "@/lib/cn";
+
+export interface MetricProps extends HTMLAttributes<HTMLDivElement> {
+  value: string | number;
+  label: string;
+  badge?: ReactNode;
+  trend?: ReactNode;
+  icon?: ReactNode;
+}
+
+export function Metric({
+  value,
+  label,
+  badge,
+  trend,
+  icon,
+  className,
+  ...props
+}: MetricProps) {
+  return (
+    <div className={cn("ph-metric", className)} {...props}>
+      <div className="ph-metric__header">
+        {icon && <span className="ph-metric__icon">{icon}</span>}
+        <span className="ph-metric__label">{label}</span>
+        {badge && <span className="ph-metric__badge">{badge}</span>}
+      </div>
+      <div className="ph-metric__value">{value}</div>
+      {trend && <div className="ph-metric__trend">{trend}</div>}
+    </div>
+  );
+}
+
+Metric.displayName = "Metric";

package/src/components/ui/Modal.tsx

@@ -1,4 +1,7 @@
-import type { ReactNode } from "react";
+"use client";
+
+import * as Dialog from "@radix-ui/react-dialog";
+import { useRef, type ReactNode } from "react";
 import { IconClose } from "@/components/icons";
 import { cn } from "@/lib/cn";
 
@@ -14,6 +17,9 @@ export interface ModalProps {
   size?: ModalSize;
   className?: string;
   showCloseButton?: boolean;
+  closeOnOutsideClick?: boolean;
+  closeOnEscape?: boolean;
+  "aria-label"?: string;
 }
 
 const sizeMap: Record<ModalSize, string> = {
@@ -21,7 +27,7 @@ const sizeMap: Record<ModalSize, string> = {
   md: "max-w-lg",
   lg: "max-w-2xl",
   xl: "max-w-4xl",
-  full: "max-w-[calc(100%-2rem)]",
+  full: "max-w-none",
 };
 
 export function Modal({
@@ -34,42 +40,66 @@ export function Modal({
   size = "md",
   className,
   showCloseButton = true,
+  closeOnOutsideClick = true,
+  closeOnEscape = true,
+  "aria-label": ariaLabel,
 }: ModalProps) {
-  if (!open) return null;
+  const canDismiss = Boolean(onClose);
+  const restoreFocusRef = useRef<HTMLElement | null>(null);
 
   return (
-    <div className="ph-modal-overlay" role="presentation" onClick={onClose}>
-      <div
-        role="dialog"
-        aria-modal
-        className={cn(
-          "ph-modal-panel",
-          sizeMap[size],
-          className
-        )}
-        onClick={(e) => e.stopPropagation()}
-      >
-        {(title || showCloseButton) && (
-          <header className="flex items-start justify-between gap-4">
-            <div>
-              {title && <h3 className="text-lg font-bold text-ph-ink">{title}</h3>}
-              {description && <p className="mt-1 text-sm text-ph-subtle">{description}</p>}
-            </div>
-            {showCloseButton && onClose && (
-              <button
-                type="button"
-                onClick={onClose}
-                className="shrink-0 rounded-md p-1 text-ph-subtle hover:bg-black/5 hover:text-ph-ink"
-                aria-label="Close"
-              >
-                <IconClose className="h-5 w-5" />
-              </button>
-            )}
-          </header>
-        )}
-        <div className="mt-4">{children}</div>
-        {footer && <div className="mt-6 flex justify-end gap-2 border-t border-ph-border pt-5">{footer}</div>}
-      </div>
-    </div>
+    <Dialog.Root
+      open={open}
+      onOpenChange={(nextOpen) => {
+        if (!nextOpen) onClose?.();
+      }}
+    >
+      <Dialog.Portal>
+        <Dialog.Overlay className="ph-modal-overlay" />
+        <Dialog.Content
+          className={cn("ph-modal-panel", sizeMap[size], className)}
+          aria-label={ariaLabel}
+          {...(description ? {} : { "aria-describedby": undefined })}
+          onOpenAutoFocus={() => {
+            restoreFocusRef.current = document.activeElement instanceof HTMLElement
+              ? document.activeElement
+              : null;
+          }}
+          onCloseAutoFocus={(event) => {
+            event.preventDefault();
+            restoreFocusRef.current?.focus();
+          }}
+          onEscapeKeyDown={(event) => {
+            if (!canDismiss || !closeOnEscape) event.preventDefault();
+          }}
+          onPointerDownOutside={(event) => {
+            if (!canDismiss || !closeOnOutsideClick) event.preventDefault();
+          }}
+        >
+          {title ? null : <Dialog.Title className="sr-only">{ariaLabel ?? "Dialog"}</Dialog.Title>}
+          {(title || description || (showCloseButton && canDismiss)) ? (
+            <header className="ph-modal-header">
+              <div className="min-w-0">
+                {title ? <Dialog.Title className="text-lg font-bold text-ph-ink">{title}</Dialog.Title> : null}
+                {description ? (
+                  <Dialog.Description className="mt-1 text-sm text-ph-subtle">
+                    {description}
+                  </Dialog.Description>
+                ) : null}
+              </div>
+              {showCloseButton && canDismiss ? (
+                <Dialog.Close asChild>
+                  <button type="button" className="ph-modal-close" aria-label="Close dialog">
+                    <IconClose className="h-5 w-5" aria-hidden />
+                  </button>
+                </Dialog.Close>
+              ) : null}
+            </header>
+          ) : null}
+          <div className="ph-modal-body">{children}</div>
+          {footer ? <div className="ph-modal-footer">{footer}</div> : null}
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
   );
 }

package/src/components/ui/NumberField.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { useState, type InputHTMLAttributes } from "react";
+import { cn } from "@/lib/cn";
+
+export interface NumberFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "onChange"> {
+  value?: number;
+  onChange?: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  label?: string;
+}
+
+export function NumberField({
+  value: controlledValue,
+  onChange,
+  min,
+  max,
+  step = 1,
+  label,
+  className,
+  disabled,
+  defaultValue,
+  ...inputProps
+}: NumberFieldProps) {
+  const [internal, setInternal] = useState(controlledValue ?? 0);
+  const value = controlledValue ?? internal;
+
+  const set = (v: number) => {
+    const clamped = Math.max(min ?? -Infinity, Math.min(max ?? Infinity, v));
+    setInternal(clamped);
+    onChange?.(clamped);
+  };
+
+  return (
+    <div className={cn("ph-number-field", className)}>
+      {label && <label className="ph-label">{label}</label>}
+      <div className="ph-number-field__control">
+        <button
+          type="button"
+          disabled={disabled || (min !== undefined && value <= min)}
+          onClick={() => set(value - step)}
+          className="ph-number-field__btn"
+          aria-label="Decrease"
+        >
+          <svg width="12" height="2" viewBox="0 0 12 2" fill="currentColor"><rect y="0" width="12" height="2" rx="1" /></svg>
+        </button>
+        <input
+          type="number"
+          value={value}
+          onChange={(e) => set(Number(e.target.value))}
+          disabled={disabled}
+          min={min}
+          max={max}
+          step={step}
+          className="ph-number-field__input"
+          {...inputProps}
+        />
+        <button
+          type="button"
+          disabled={disabled || (max !== undefined && value >= max)}
+          onClick={() => set(value + step)}
+          className="ph-number-field__btn"
+          aria-label="Increase"
+        >
+          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+            <path d="M6 2v8M2 6h8" />
+          </svg>
+        </button>
+      </div>
+    </div>
+  );
+}
+
+NumberField.displayName = "NumberField";