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

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

@@ -0,0 +1,136 @@
+"use client";
+
+import { useState, type ReactNode } from "react";
+import { cn } from "@/lib/cn";
+import { CodeBlock } from "@/components/ui";
+
+interface ShowcaseWrapperProps {
+  id?: string;
+  title: string;
+  description?: string;
+  docs?: ReactNode;
+  code: string;
+  filename?: string;
+  children: ReactNode;
+  className?: string;
+}
+
+export function ShowcaseWrapper({
+  id,
+  title,
+  description,
+  docs,
+  code,
+  filename = "Example.tsx",
+  children,
+  className,
+}: ShowcaseWrapperProps) {
+  const [showCode, setShowCode] = useState(false);
+  const fallbackId = titleIdMap[title] ?? title.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+
+  return (
+    <section id={id ?? fallbackId} className={cn("scroll-mt-20", className)}>
+      <div className="ph-h2-rule mb-8">
+        <div className="flex items-center gap-1.5">
+          <h2>{title}</h2>
+          <button
+            type="button"
+            onClick={() => setShowCode(!showCode)}
+            className={cn(
+              "flex h-10 w-10 items-center justify-center rounded-full border transition-all",
+              showCode
+                ? "border-ph-brand bg-ph-brand text-white shadow-lg shadow-ph-brand/25"
+                : "border-ph-border bg-ph-surface text-ph-subtle hover:border-ph-brand hover:text-ph-brand"
+            )}
+            title={showCode ? "Hide code" : "Show code"}
+          >
+            <svg
+              className="h-5 w-5"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <rect x="2" y="3" width="20" height="14" rx="2" ry="2" />
+              <line x1="8" y1="21" x2="16" y2="21" />
+              <line x1="12" y1="17" x2="12" y2="21" />
+              <line x1="6" y1="8" x2="6" y2="8" />
+              <line x1="10" y1="8" x2="10" y2="8" />
+            </svg>
+          </button>
+        </div>
+        <hr />
+      </div>
+
+      {description && (
+        <p className="mb-6 text-sm text-ph-subtle">{description}</p>
+      )}
+
+      {docs && <div className="mb-6">{docs}</div>}
+
+      <div
+        className={cn(
+          "gap-6",
+          showCode ? "lg:grid lg:grid-cols-[1fr,minmax(360px,420px)]" : "block"
+        )}
+      >
+        <div className={cn("min-w-0", showCode && "lg:pr-2")}>{children}</div>
+
+        <div
+          className={cn(
+            "transition-all duration-300",
+            showCode
+              ? "block opacity-100"
+              : "hidden opacity-0 lg:hidden"
+          )}
+        >
+          <div className="sticky top-20">
+            <CodeBlock code={code} filename={filename} />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+const titleIdMap: Record<string, string> = {
+  "Icons": "icons",
+  "Colour tokens": "colors",
+  "Buttons": "buttons",
+  "Badges": "badges",
+  "Alerts": "alerts",
+  "Toasts": "toasts",
+  "Cards": "cards",
+  "Forms": "forms",
+  "Inputs & Forms": "forms",
+  "Tables": "tables",
+  "Accordion": "accordion",
+  "Calendar": "calendar",
+  "Hover Card": "hovercard",
+  "Modals": "modals",
+  "Drawers": "drawers",
+  "Navigation chrome": "navigation",
+  "Navigation utilities": "utilities",
+  "Stepper": "stepper",
+  "Command Palette": "command",
+  "Filter Chips": "filters",
+  "Empty State": "emptystate",
+  "Charts (PostHog-style)": "charts",
+  "Dashboard shells": "dashboard",
+  "Tabs": "tabs",
+  "Dropdowns": "dropdowns",
+  "Progress & loading": "progress",
+  "Tooltip": "tooltip",
+  "Avatars": "avatars",
+  "Stats & conversational UI": "stats",
+  "Timeline": "timeline",
+  "Countdown motif": "countdown",
+  "Keyboard glyphs": "kbd",
+  "Icon swap": "swap",
+  "Stacked surfaces": "stack",
+  "Diff slider": "diff",
+  "Badge hotspots": "indicator",
+  "Terminal capture": "code-mockup",
+};

package/src/components/ui/Stat.tsx

@@ -0,0 +1,39 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import { cn } from "@/lib/cn";
+
+export type StatTone = "default" | "brand" | "blue" | "purple" | "warning";
+
+export interface StatProps extends ComponentPropsWithoutRef<"article"> {
+  icon?: ReactNode;
+  label: ReactNode;
+  value: ReactNode;
+  footer?: ReactNode;
+  tone?: StatTone;
+}
+
+const toneMap: Record<StatTone, string> = {
+  default: "text-ph-ink",
+  brand: "text-ph-brand",
+  blue: "text-ph-blue",
+  purple: "text-ph-purple",
+  warning: "text-amber-900",
+};
+
+const statMap: Record<StatTone, string> = {
+  default: "",
+  brand: "",
+  blue: "",
+  purple: "",
+  warning: "border-amber-200 bg-amber-50/70",
+};
+
+export function Stat({ icon, label, value, footer, tone = "default", className, ...props }: StatProps) {
+  return (
+    <article className={cn("ph-stat", statMap[tone], className)} {...props}>
+      {icon && <div className={cn("mb-2 h-7 w-7", toneMap[tone])}>{icon}</div>}
+      <div className={cn("ph-stat-label", tone === "warning" && toneMap[tone])}>{label}</div>
+      <div className={cn("ph-stat-val", toneMap[tone])}>{value}</div>
+      {footer && <p className="text-xs text-ph-subtle">{footer}</p>}
+    </article>
+  );
+}

package/src/components/ui/Stepper.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { cn } from "@/lib/cn";
+
+interface Step {
+  id: string;
+  label: string;
+  description?: string;
+  status?: "pending" | "current" | "completed" | "error";
+}
+
+interface StepperProps {
+  steps: Step[];
+  currentStep: number;
+  className?: string;
+}
+
+export function Stepper({ steps, currentStep, className }: StepperProps) {
+  return (
+    <div className={cn("flex items-start gap-2", className)}>
+      {steps.map((step, index) => {
+        const isCompleted = index < currentStep;
+        const isCurrent = index === currentStep;
+        const isPending = index > currentStep;
+        const isError = step.status === "error";
+
+        return (
+          <div key={step.id} className="flex flex-1 items-start gap-2">
+            <div className="flex flex-1 flex-col items-center">
+              <div
+                className={cn(
+                  "flex h-9 w-9 items-center justify-center rounded-full text-sm font-bold transition-colors",
+                  isCompleted && "bg-ph-success text-white",
+                  isCurrent && !isError && "bg-ph-brand text-white ring-4 ring-ph-brand/20",
+                  isCurrent && isError && "bg-ph-danger text-white",
+                  isPending && "bg-ph-muted text-ph-mutedtext"
+                )}
+              >
+                {isCompleted ? (
+                  <svg className="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3">
+                    <path d="M5 13l4 4L19 7" />
+                  </svg>
+                ) : (
+                  index + 1
+                )}
+              </div>
+              <div className="mt-2 text-center">
+                <p
+                  className={cn(
+                    "text-sm font-semibold",
+                    isCurrent && "text-ph-ink",
+                    !isCurrent && "text-ph-mutedtext"
+                  )}
+                >
+                  {step.label}
+                </p>
+                {step.description && (
+                  <p className="mt-0.5 text-xs text-ph-mutedtext">{step.description}</p>
+                )}
+              </div>
+            </div>
+            {index < steps.length - 1 && (
+              <div
+                className={cn(
+                  "mt-4 h-0.5 flex-1 rounded-full transition-colors",
+                  isCompleted ? "bg-ph-success" : "bg-ph-border"
+                )}
+              />
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/ui/Table.tsx

@@ -0,0 +1,55 @@
+import type { CSSProperties, ReactNode } from "react";
+import { cn } from "@/lib/cn";
+
+export interface TableColumn<T> {
+  key: string;
+  header: ReactNode;
+  cell: (row: T) => ReactNode;
+  className?: string;
+}
+
+export interface TableProps<T> {
+  data: T[];
+  columns: TableColumn<T>[];
+  zebra?: boolean;
+  compact?: boolean;
+  ribbon?: boolean;
+  getRowStyle?: (row: T) => CSSProperties | undefined;
+  className?: string;
+  caption?: string;
+}
+
+export function Table<T>({
+  data,
+  columns,
+  zebra = false,
+  compact = false,
+  ribbon = false,
+  getRowStyle,
+  className,
+  caption,
+}: TableProps<T>) {
+  return (
+    <div className={cn("ph-table-wrap", compact && "ph-table-compact", className)}>
+      <table className={cn("ph-table", zebra && "ph-table-zebra", ribbon && "ph-table--ribbon")}>
+        {caption && <caption className="sr-only">{caption}</caption>}
+        <thead>
+          <tr>
+            {columns.map((col) => (
+              <th key={col.key} className={col.className}>{col.header}</th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {data.map((row, i) => (
+            <tr key={i} style={getRowStyle?.(row)}>
+              {columns.map((col) => (
+                <td key={col.key} className={col.className}>{col.cell(row)}</td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}