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

package/src/components/ui/ShowcaseWrapper.tsx

@@ -0,0 +1,124 @@
+"use client";
+
+import { useState, type ReactNode } from "react";
+import { cn } from "@/lib/cn";
+import { CodeBlock } from "@/components/ui";
+import { IconCodePreview } from "@/components/icons";
+
+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-[var(--ph-on-accent)] 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"}
+            aria-label={showCode ? "Hide code" : "Show code"}
+          >
+            <IconCodePreview className="h-5 w-5" aria-hidden />
+          </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,74 @@
+"use client";
+
+import { cn } from "@/lib/cn";
+import { IconCheck } from "@/components/icons";
+
+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-[var(--ph-on-success)]",
+                  isCurrent && !isError && "bg-ph-brand text-[var(--ph-on-accent)] ring-4 ring-ph-brand/20",
+                  isCurrent && isError && "bg-ph-danger text-[var(--ph-on-danger)]",
+                  isPending && "bg-ph-muted text-ph-mutedtext"
+                )}
+              >
+                {isCompleted ? (
+                  <IconCheck className="h-5 w-5" aria-hidden />
+                ) : (
+                  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>
+  );
+}

package/src/components/ui/Tabs.tsx

@@ -0,0 +1,53 @@
+import { cn } from "@/lib/cn";
+
+export interface TabItem {
+  value: string;
+  label: string;
+}
+
+export type TabsVariant = "pill" | "underline";
+
+export interface TabsProps {
+  items: TabItem[];
+  value: string;
+  onChange: (value: string) => void;
+  variant?: TabsVariant;
+  className?: string;
+}
+
+export function Tabs({ items, value, onChange, variant = "pill", className }: TabsProps) {
+  if (variant === "underline") {
+    return (
+      <div className={cn("flex gap-6 border-b border-ph-border", className)}>
+        {items.map((item) => (
+          <button
+            key={item.value}
+            type="button"
+            onClick={() => onChange(item.value)}
+            className={cn(
+              "-mb-px border-b-2 pb-2 text-sm font-semibold transition",
+              value === item.value ? "border-ph-brand text-ph-ink" : "border-transparent text-ph-mutedtext hover:text-ph-ink"
+            )}
+          >
+            {item.label}
+          </button>
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn("ph-tabs-row inline-flex", className)}>
+      {items.map((item) => (
+        <button
+          key={item.value}
+          type="button"
+          onClick={() => onChange(item.value)}
+          className={cn("ph-tab", value === item.value && "ph-tab-active")}
+        >
+          {item.label}
+        </button>
+      ))}
+    </div>
+  );
+}

package/src/components/ui/Terminal.tsx

@@ -0,0 +1,54 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import { cn } from "@/lib/cn";
+
+export interface TerminalProps extends ComponentPropsWithoutRef<"div"> {
+  /** Window title */
+  title?: string;
+  /** Terminal lines — array of { text, color? } or plain strings */
+  lines?: Array<{ text: string; color?: string } | string>;
+  /** Custom content instead of lines */
+  children?: ReactNode;
+}
+
+export function Terminal({
+  title = "sandbox",
+  lines,
+  children,
+  className,
+  ...props
+}: TerminalProps) {
+  return (
+    <div
+      className={cn(
+        "overflow-hidden rounded-xl border border-ph-border shadow-ph-md",
+        className,
+      )}
+      {...props}
+    >
+      <header className="flex items-center gap-2 border-b border-ph-border bg-ph-muted px-4 py-3">
+        <div className="h-3 w-3 rounded-full bg-red-400" />
+        <div className="h-3 w-3 rounded-full bg-amber-400" />
+        <div className="h-3 w-3 rounded-full bg-emerald-400" />
+        {title && (
+          <span className="text-xs font-medium text-ph-mutedtext">{title}</span>
+        )}
+      </header>
+      <div className="ph-code rounded-none border-x-0 border-b-0 text-[13px] leading-relaxed">
+        {children || (
+          <>
+            {lines?.map((line, i) => {
+              const text = typeof line === "string" ? line : line.text;
+              const color = typeof line === "string" ? undefined : line.color;
+              return (
+                <span key={i}>
+                  <span className={color || "text-neutral-600"}>{text}</span>
+                  {i < lines.length - 1 && <br />}
+                </span>
+              );
+            })}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/ui/ThemeDomSync.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import { useLayoutEffect } from "react";
+import { persistTheme, readStoredTheme } from "@/themes";
+
+/**
+ * Re-applies `html[data-theme]` after React commits. Hydration can clear attributes
+ * that were set only by `THEME_INIT_SCRIPT` — without this sync, `:root`-scoped
+ * light tokens effectively win visually.
+ */
+export function ThemeDomSync() {
+  useLayoutEffect(() => {
+    persistTheme(readStoredTheme());
+  }, []);
+
+  return null;
+}

package/src/components/ui/ThemeManager.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { useLayoutEffect } from "react";
+import { persistTheme, readStoredTheme } from "@/themes";
+
+export interface ThemeManagerProps {
+  children?: ReactNode;
+}
+
+/** Client wrapper that keeps html[data-theme] synced with localStorage. */
+export function ThemeManager({ children }: ThemeManagerProps) {
+  useLayoutEffect(() => {
+    persistTheme(readStoredTheme());
+  }, []);
+
+  return <>{children}</>;
+}

package/src/components/ui/ThemeSwitcher.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { persistTheme, readStoredTheme, THEME_GROUPS, THEMES, type ThemeId } from "@/themes";
+import { cn } from "@/lib/cn";
+
+export interface ThemeSwitcherProps {
+  className?: string;
+}
+
+/** Colour-only theme picker — persists to localStorage and sets html[data-theme]. */
+export function ThemeSwitcher({ className }: ThemeSwitcherProps) {
+  const [themeId, setThemeId] = useState<ThemeId>("hedgehog-light");
+
+  useEffect(() => {
+    const id = readStoredTheme() as ThemeId;
+    persistTheme(id);
+    setThemeId(id);
+  }, []);
+
+  return (
+    <label className={cn("flex min-w-0 items-center gap-2", className)}>
+      <span className="shrink-0 text-xs font-medium text-ph-mutedtext sm:text-sm">Theme</span>
+      <select
+        className="ph-select max-w-[11rem] !min-h-[2rem] py-1 pl-2.5 pr-8 text-xs sm:max-w-[14rem] sm:text-sm"
+        value={themeId}
+        aria-label="Colour theme"
+        onChange={(event) => {
+          const next = event.target.value as ThemeId;
+          persistTheme(next);
+          setThemeId(next);
+        }}
+      >
+        {THEME_GROUPS.map((group) => (
+          <optgroup key={group} label={group}>
+            {THEMES.filter((theme) => theme.group === group).map((theme) => (
+              <option key={theme.id} value={theme.id}>
+                {theme.name}
+              </option>
+            ))}
+          </optgroup>
+        ))}
+      </select>
+    </label>
+  );
+}

package/src/components/ui/Timeline.tsx

@@ -0,0 +1,60 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import { cn } from "@/lib/cn";
+
+export interface TimelineEvent {
+  id: string;
+  title: string;
+  description?: string;
+  time?: string;
+  icon?: ReactNode;
+  color?: string;
+}
+
+export interface TimelineProps extends ComponentPropsWithoutRef<"ol"> {
+  events: TimelineEvent[];
+  /** Alternate left/right layout on large screens */
+  alternate?: boolean;
+}
+
+export function Timeline({
+  events,
+  alternate = false,
+  className,
+  ...props
+}: TimelineProps) {
+  return (
+    <ol
+      className={cn("relative space-y-8", className)}
+      {...props}
+    >
+      {events.map((event, idx) => {
+        const align = alternate && idx % 2 !== 0 ? "lg:flex-row-reverse" : "";
+        return (
+          <li key={event.id} className={cn("relative flex gap-6", align)}>
+            <div
+              className={cn(
+                "relative z-10 flex h-12 w-12 shrink-0 items-center justify-center rounded-full ring-8 ring-ph-muted shadow-md",
+                event.color || "bg-ph-brand text-white",
+              )}
+            >
+              {event.icon}
+            </div>
+            <article className="flex-1 rounded-xl border border-ph-border bg-ph-surface p-4 shadow-ph">
+              <div className="flex flex-wrap items-baseline gap-3">
+                <h4 className="text-base font-semibold text-ph-ink">{event.title}</h4>
+                {event.time && (
+                  <time className="text-[11px] font-semibold uppercase tracking-wide text-ph-mutedtext">
+                    {event.time}
+                  </time>
+                )}
+              </div>
+              {event.description && (
+                <p className="mt-2 text-sm text-ph-subtle">{event.description}</p>
+              )}
+            </article>
+          </li>
+        );
+      })}
+    </ol>
+  );
+}

package/src/components/ui/Toast.tsx

@@ -0,0 +1,70 @@
+import type { ReactNode } from "react";
+import {
+  IconCancel,
+  IconCheckCircle,
+  IconClose,
+  IconErrorOutline,
+  IconExclamation,
+} from "@/components/icons";
+import { cn } from "@/lib/cn";
+
+export type ToastStatus = "info" | "success" | "warning" | "danger";
+
+export interface ToastProps {
+  status?: ToastStatus;
+  title: string;
+  description?: string;
+  onDismiss?: () => void;
+  className?: string;
+}
+
+const statusConfig: Record<ToastStatus, { icon: typeof IconErrorOutline; color: string; bg: string } > = {
+  info: { icon: IconErrorOutline, color: "text-ph-info", bg: "ph-toast-info" },
+  success: { icon: IconCheckCircle, color: "text-ph-success", bg: "ph-toast-success" },
+  warning: { icon: IconExclamation, color: "text-ph-warning", bg: "ph-toast-warning" },
+  danger: { icon: IconCancel, color: "text-ph-danger", bg: "ph-toast-danger" },
+};
+
+export function Toast({
+  status = "info",
+  title,
+  description,
+  onDismiss,
+  className,
+}: ToastProps) {
+  const config = statusConfig[status];
+  const Icon = config.icon;
+
+  return (
+    <div className={cn("ph-toast", config.bg, className)}>
+      <Icon className={cn("mt-0.5 h-5 w-5 shrink-0", config.color)} aria-hidden />
+      <div className="pr-8">
+        <div className="font-semibold">{title}</div>
+        {description && <p className="mt-1 text-xs text-ph-subtle">{description}</p>}
+      </div>
+      {onDismiss && (
+        <button
+          type="button"
+          aria-label={`Dismiss ${title}`}
+          className="absolute right-2 top-2 ph-btn ph-btn-ghost ph-btn-xs ph-btn-circle"
+          onClick={onDismiss}
+        >
+          <IconClose className="h-4 w-4" />
+        </button>
+      )}
+    </div>
+  );
+}
+
+export interface ToastStackProps {
+  children?: ReactNode;
+  className?: string;
+}
+
+export function ToastStack({ children, className }: ToastStackProps) {
+  return (
+    <div className={cn("ph-toast-stack", className)}>
+      {children}
+    </div>
+  );
+}