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

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/Modal.tsx

@@ -0,0 +1,105 @@
+"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";
+
+export type ModalSize = "sm" | "md" | "lg" | "xl" | "full";
+
+export interface ModalProps {
+  open?: boolean;
+  onClose?: () => void;
+  title?: string;
+  description?: string;
+  children?: ReactNode;
+  footer?: ReactNode;
+  size?: ModalSize;
+  className?: string;
+  showCloseButton?: boolean;
+  closeOnOutsideClick?: boolean;
+  closeOnEscape?: boolean;
+  "aria-label"?: string;
+}
+
+const sizeMap: Record<ModalSize, string> = {
+  sm: "max-w-sm",
+  md: "max-w-lg",
+  lg: "max-w-2xl",
+  xl: "max-w-4xl",
+  full: "max-w-none",
+};
+
+export function Modal({
+  open = false,
+  onClose,
+  title,
+  description,
+  children,
+  footer,
+  size = "md",
+  className,
+  showCloseButton = true,
+  closeOnOutsideClick = true,
+  closeOnEscape = true,
+  "aria-label": ariaLabel,
+}: ModalProps) {
+  const canDismiss = Boolean(onClose);
+  const restoreFocusRef = useRef<HTMLElement | null>(null);
+
+  return (
+    <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/Navigation.tsx

@@ -0,0 +1,94 @@
+import { IconChevronLeft, IconChevronRight } from "@/components/icons";
+import { cn } from "@/lib/cn";
+
+export interface BreadcrumbItem {
+  label: string;
+  href?: string;
+  current?: boolean;
+}
+
+export interface BreadcrumbsProps {
+  items: BreadcrumbItem[];
+  label?: string;
+  className?: string;
+}
+
+export function Breadcrumbs({ items, label = "Breadcrumb", className }: BreadcrumbsProps) {
+  return (
+    <nav aria-label={label} className={cn("ph-breadcrumbs", className)}>
+      {items.map((item, index) => (
+        <span key={`${item.label}-${index}`} className="contents">
+          {index > 0 ? <span className="ph-breadcrumb-sep" aria-hidden="true">/</span> : null}
+          {item.current || !item.href ? (
+            <span className="ph-breadcrumb-current" aria-current={item.current ? "page" : undefined}>
+              {item.label}
+            </span>
+          ) : (
+            <a href={item.href} className="ph-breadcrumb-link">
+              {item.label}
+            </a>
+          )}
+        </span>
+      ))}
+    </nav>
+  );
+}
+
+export interface PaginationProps {
+  page: number;
+  totalPages: number;
+  onPageChange?: (page: number) => void;
+  label?: string;
+  compact?: boolean;
+  className?: string;
+}
+
+export function Pagination({
+  page,
+  totalPages,
+  onPageChange,
+  label = "Pagination",
+  compact = false,
+  className,
+}: PaginationProps) {
+  const pages = compact ? [Math.max(1, page - 1), page, Math.min(totalPages, page + 1)] : [1, 2, 3, totalPages];
+  const uniquePages = Array.from(new Set(pages)).filter((n) => n >= 1 && n <= totalPages);
+
+  return (
+    <nav aria-label={label} className={cn("ph-pagination", className)}>
+      <button
+        type="button"
+        className="ph-pagination-btn"
+        disabled={page <= 1}
+        aria-label="Previous page"
+        onClick={() => onPageChange?.(page - 1)}
+      >
+        <IconChevronLeft className="mx-auto h-4 w-4" aria-hidden />
+      </button>
+      {uniquePages.map((pageNumber, index) => (
+        <span key={pageNumber} className="contents">
+          {!compact && index === uniquePages.length - 1 && pageNumber > 4 ? (
+            <span className="ph-pagination-ellipsis" aria-hidden="true">...</span>
+          ) : null}
+          <button
+            type="button"
+            className={cn("ph-pagination-btn", pageNumber === page && "ph-pagination-btn-active")}
+            aria-current={pageNumber === page ? "page" : undefined}
+            onClick={() => onPageChange?.(pageNumber)}
+          >
+            {pageNumber}
+          </button>
+        </span>
+      ))}
+      <button
+        type="button"
+        className="ph-pagination-btn"
+        disabled={page >= totalPages}
+        aria-label="Next page"
+        onClick={() => onPageChange?.(page + 1)}
+      >
+        <IconChevronRight className="mx-auto h-4 w-4" aria-hidden />
+      </button>
+    </nav>
+  );
+}

package/src/components/ui/Panel.tsx

@@ -0,0 +1,18 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import { cn } from "@/lib/cn";
+
+export interface PanelProps extends Omit<ComponentPropsWithoutRef<"div">, "title"> {
+  title?: ReactNode;
+  description?: ReactNode;
+  children?: ReactNode;
+}
+
+export function Panel({ title, description, children, className, ...props }: PanelProps) {
+  return (
+    <div className={cn("ph-panel", className)} {...props}>
+      {title && <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">{title}</h3>}
+      {description && <p className="text-sm text-ph-subtle">{description}</p>}
+      {children}
+    </div>
+  );
+}

package/src/components/ui/Progress.tsx

@@ -0,0 +1,59 @@
+import type { ComponentPropsWithoutRef } from "react";
+import { cn } from "@/lib/cn";
+
+export interface ProgressProps extends ComponentPropsWithoutRef<"div"> {
+  /** Current value (0-100) */
+  value: number;
+  /** Maximum value (default 100) */
+  max?: number;
+  /** Color class for the bar */
+  color?: string;
+  /** Optional label shown above */
+  label?: string;
+  /** Show percentage text */
+  showPercentage?: boolean;
+  /** Size variant */
+  size?: "sm" | "md" | "lg";
+}
+
+const sizeMap = {
+  sm: "h-1",
+  md: "h-2",
+  lg: "h-3",
+};
+
+export function Progress({
+  value,
+  max = 100,
+  color = "bg-ph-brand",
+  label,
+  showPercentage = false,
+  size = "md",
+  className,
+  ...props
+}: ProgressProps) {
+  const percentage = Math.min(100, Math.max(0, (value / max) * 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>}
+          {showPercentage && (
+            <span className="tabular-nums">{Math.round(percentage)}%</span>
+          )}
+        </div>
+      )}
+      <div className={cn("ph-progress", sizeMap[size])}>
+        <div
+          className={cn("ph-progress-bar", color)}
+          style={{ width: `${percentage}%` }}
+          role="progressbar"
+          aria-valuenow={value}
+          aria-valuemin={0}
+          aria-valuemax={max}
+        />
+      </div>
+    </div>
+  );
+}

package/src/components/ui/Rating.tsx

@@ -0,0 +1,65 @@
+import type { ComponentPropsWithoutRef } from "react";
+import { IconStar } from "@/components/icons";
+import { cn } from "@/lib/cn";
+
+export interface RatingProps extends Omit<ComponentPropsWithoutRef<"div">, "onChange"> {
+  label?: string;
+  value?: number;
+  max?: number;
+  readOnly?: boolean;
+  onChange?: (value: number) => void;
+  wrapperClassName?: string;
+}
+
+export function Rating({
+  label,
+  value = 0,
+  max = 5,
+  readOnly = true,
+  onChange,
+  className,
+  wrapperClassName,
+  ...props
+}: RatingProps) {
+  const stars = Array.from({ length: max }, (_, index) => index + 1);
+
+  return (
+    <div className={cn("ph-field", wrapperClassName)}>
+      {label && <span className="ph-label">{label}</span>}
+      <div
+        className={cn("ph-rating flex", className)}
+        role={readOnly ? "img" : "radiogroup"}
+        aria-label={label ?? `Rating: ${value} out of ${max}`}
+        {...props}
+      >
+        {stars.map((star) => {
+          const active = star <= value;
+
+          if (readOnly) {
+            return (
+              <IconStar
+                key={star}
+                className={cn("h-6 w-6", active ? "text-amber-500" : "text-ph-border")}
+                aria-hidden
+              />
+            );
+          }
+
+          return (
+            <button
+              key={star}
+              type="button"
+              className="rounded p-0.5 transition hover:scale-105 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ph-brand"
+              role="radio"
+              aria-checked={active}
+              aria-label={`${star} out of ${max}`}
+              onClick={() => onChange?.(star)}
+            >
+              <IconStar className={cn("h-6 w-6", active ? "text-amber-500" : "text-ph-border")} />
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/src/components/ui/SearchInput.tsx

@@ -0,0 +1,106 @@
+import type { ComponentPropsWithoutRef } from "react";
+import { useId } from "react";
+import { IconSearch } from "@/components/icons";
+import { cn } from "@/lib/cn";
+import { Button } from "@/components/ui/Button";
+
+export interface SearchInputProps extends Omit<ComponentPropsWithoutRef<"input">, "type"> {
+  /** Associated label text — always rendered (visually hidden when `hideLabel`) */
+  label?: string;
+  hideLabel?: boolean;
+  /** Optional shortcut hint shown inside the field (e.g. "⌘K") */
+  shortcut?: string;
+  density?: "default" | "compact";
+  wrapperClassName?: string;
+}
+
+/** Labelled search field — use in nav bars and toolbars. */
+export function SearchInput({
+  id: idProp,
+  label = "Search",
+  hideLabel = false,
+  shortcut,
+  density = "default",
+  className,
+  wrapperClassName,
+  placeholder,
+  ...props
+}: SearchInputProps) {
+  const autoId = useId();
+  const id = idProp ?? autoId;
+
+  return (
+    <div className={cn("relative", wrapperClassName)}>
+      <label htmlFor={id} className={hideLabel ? "sr-only" : "ph-label mb-1.5 block"}>
+        {label}
+      </label>
+      <div className="relative">
+        {shortcut != null ? (
+          <span
+            className="ph-shortcut pointer-events-none absolute left-3 top-1/2 z-10 -translate-y-1/2 text-xs"
+            aria-hidden
+          >
+            {shortcut}
+          </span>
+        ) : null}
+        <input
+          id={id}
+          type="search"
+          placeholder={placeholder}
+          aria-label={hideLabel ? label : undefined}
+          className={cn(
+            "ph-input w-full",
+            density === "compact" && "max-w-xs !min-h-[2rem] py-1.5 text-sm",
+            shortcut != null && "pl-[3.25rem]",
+            className,
+          )}
+          {...props}
+        />
+      </div>
+    </div>
+  );
+}
+
+export interface SearchGroupProps extends Omit<ComponentPropsWithoutRef<"input">, "type"> {
+  label?: string;
+  submitLabel?: string;
+  wrapperClassName?: string;
+}
+
+/** Input + primary search — one control shell, 1px vertical seam, matched height to `ph-input`. */
+export function SearchGroup({
+  id: idProp,
+  label = "Search records",
+  submitLabel = "Search",
+  placeholder = "Persons, actions, flags…",
+  wrapperClassName,
+  className,
+  ...props
+}: SearchGroupProps) {
+  const autoId = useId();
+  const id = idProp ?? autoId;
+
+  return (
+    <div className={cn("ph-field", wrapperClassName)}>
+      <label htmlFor={id} className="ph-label">
+        {label}
+      </label>
+      <div className="ph-search-group flex w-full max-w-lg min-h-[2.3125rem] items-stretch divide-x divide-ph-border">
+        <input
+          id={id}
+          type="search"
+          placeholder={placeholder}
+          className={cn("ph-input ph-input-group-field min-w-0 flex-1", className)}
+          {...props}
+        />
+        <Button
+          type="submit"
+          variant="primary"
+          icon={<IconSearch className="h-4 w-4" aria-hidden />}
+          className="ph-search-group__submit"
+          aria-label={submitLabel}
+        />
+      </div>
+    </div>
+  );
+}

package/src/components/ui/SegmentedControl.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { cn } from "@/lib/cn";
+
+interface SegmentedControlOption {
+  value: string;
+  label: string;
+  icon?: React.ReactNode;
+}
+
+interface SegmentedControlProps {
+  options: SegmentedControlOption[];
+  value: string;
+  onChange: (value: string) => void;
+  className?: string;
+}
+
+export function SegmentedControl({ options, value, onChange, className }: SegmentedControlProps) {
+  return (
+    <div
+      className={cn(
+        "inline-flex rounded-lg bg-ph-muted p-1",
+        className
+      )}
+    >
+      {options.map((option) => (
+        <button
+          key={option.value}
+          type="button"
+          onClick={() => onChange(option.value)}
+          className={cn(
+            "relative flex items-center gap-1.5 rounded-md px-3.5 py-1.5 text-sm font-medium transition-all",
+            value === option.value
+              ? "bg-ph-surface text-ph-ink shadow-ph"
+              : "text-ph-subtle hover:text-ph-ink"
+          )}
+        >
+          {option.icon && <span className="h-4 w-4">{option.icon}</span>}
+          {option.label}
+        </button>
+      ))}
+    </div>
+  );
+}

package/src/components/ui/SettingsLayout.tsx

@@ -0,0 +1,94 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import { IconTuning } from "@/components/icons";
+import { cn } from "@/lib/cn";
+
+export interface SettingsNavItem {
+  id: string;
+  label: ReactNode;
+  href: string;
+  icon?: ReactNode;
+  active?: boolean;
+  badge?: ReactNode;
+}
+
+export interface SettingsNavGroup {
+  label: ReactNode;
+  items: readonly SettingsNavItem[];
+}
+
+export interface SettingsNavProps extends ComponentPropsWithoutRef<"div"> {
+  groups: readonly SettingsNavGroup[];
+}
+
+export interface SettingsLayoutProps extends Omit<ComponentPropsWithoutRef<"section">, "title"> {
+  title: ReactNode;
+  description?: ReactNode;
+  actions?: ReactNode;
+  navigation: ReactNode;
+  navigationLabel?: string;
+  children: ReactNode;
+}
+
+export function SettingsNav({ groups, className, ...props }: SettingsNavProps) {
+  return (
+    <div className={cn("ph-settings-nav", className)} {...props}>
+      {groups.map((group, index) => (
+        <div className="ph-settings-nav__group" key={index}>
+          <h3>{group.label}</h3>
+          <div className="ph-settings-nav__items">
+            {group.items.map((item) => (
+              <a
+                key={item.id}
+                href={item.href}
+                className={cn("ph-settings-nav__item", item.active && "ph-settings-nav__item--active")}
+                aria-current={item.active ? "page" : undefined}
+              >
+                {item.icon ? <span className="ph-settings-nav__icon">{item.icon}</span> : null}
+                <span>{item.label}</span>
+                {item.badge ? <span className="ph-settings-nav__badge">{item.badge}</span> : null}
+              </a>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function SettingsLayout({
+  title,
+  description,
+  actions,
+  navigation,
+  navigationLabel = "Settings",
+  children,
+  className,
+  ...props
+}: SettingsLayoutProps) {
+  return (
+    <section className={cn("ph-settings-layout", className)} {...props}>
+      <header className="ph-settings-layout__header">
+        <div>
+          <h2>{title}</h2>
+          {description ? <p>{description}</p> : null}
+        </div>
+        {actions ? <div className="ph-settings-layout__actions">{actions}</div> : null}
+      </header>
+
+      <details className="ph-settings-layout__mobile-nav">
+        <summary>
+          <IconTuning className="h-4 w-4" aria-hidden />
+          Settings menu
+        </summary>
+        <nav aria-label={navigationLabel}>{navigation}</nav>
+      </details>
+
+      <div className="ph-settings-layout__grid">
+        <aside className="ph-settings-layout__sidebar">
+          <nav aria-label={navigationLabel}>{navigation}</nav>
+        </aside>
+        <div className="ph-settings-layout__content">{children}</div>
+      </div>
+    </section>
+  );
+}