@xenide-io/the-old-ui-theme 0.9.18 → 0.10.0

package/src/components/ui/SegmentedControl.tsx

@@ -1,11 +1,12 @@
 "use client";
 
+import { useRef, type KeyboardEvent, type ReactNode } from "react";
 import { cn } from "@/lib/cn";
 
 export interface SegmentedControlOption {
   value: string;
   label: string;
-  icon?: React.ReactNode;
+  icon?: ReactNode;
 }
 
 export interface SegmentedControlProps {
@@ -13,30 +14,75 @@ export interface SegmentedControlProps {
   value: string;
   onChange: (value: string) => void;
   className?: string;
+  "aria-label"?: string;
 }
 
-export function SegmentedControl({ options, value, onChange, className }: SegmentedControlProps) {
+export function SegmentedControl({
+  options,
+  value,
+  onChange,
+  className,
+  "aria-label": ariaLabel,
+}: SegmentedControlProps) {
+  const itemRefs = useRef<Array<HTMLButtonElement | null>>([]);
+  const selectedIndex = options.findIndex((option) => option.value === value);
+
+  const handleKeyDown = (
+    event: KeyboardEvent<HTMLButtonElement>,
+    index: number,
+  ) => {
+    let nextIndex: number;
+
+    switch (event.key) {
+      case "ArrowLeft":
+      case "ArrowUp":
+        nextIndex = (index - 1 + options.length) % options.length;
+        break;
+      case "ArrowRight":
+      case "ArrowDown":
+        nextIndex = (index + 1) % options.length;
+        break;
+      case "Home":
+        nextIndex = 0;
+        break;
+      case "End":
+        nextIndex = options.length - 1;
+        break;
+      default:
+        return;
+    }
+
+    event.preventDefault();
+    const nextOption = options[nextIndex];
+    if (!nextOption) return;
+    onChange(nextOption.value);
+    itemRefs.current[nextIndex]?.focus();
+  };
+
   return (
     <div
-      className={cn(
-        "inline-flex rounded-lg bg-ph-muted p-1",
-        className
-      )}
+      role="radiogroup"
+      aria-label={ariaLabel}
+      className={cn("ph-segmented-control", className)}
     >
-      {options.map((option) => (
+      {options.map((option, index) => (
         <button
           key={option.value}
+          ref={(node) => {
+            itemRefs.current[index] = node;
+          }}
           type="button"
-          aria-pressed={value === option.value}
+          role="radio"
+          aria-checked={value === option.value}
+          tabIndex={selectedIndex === index || (selectedIndex < 0 && index === 0) ? 0 : -1}
           onClick={() => onChange(option.value)}
+          onKeyDown={(event) => handleKeyDown(event, index)}
           className={cn(
-            "relative flex min-h-11 items-center gap-1.5 rounded-md px-3.5 py-1.5 text-sm font-medium transition-all sm:min-h-9",
-            value === option.value
-              ? "bg-ph-surface text-ph-ink shadow-ph"
-              : "text-ph-subtle hover:text-ph-ink"
+            "ph-segmented-control__item",
+            value === option.value && "ph-segmented-control__item--selected",
           )}
         >
-          {option.icon && <span className="h-4 w-4">{option.icon}</span>}
+          {option.icon && <span className="h-4 w-4" aria-hidden>{option.icon}</span>}
           {option.label}
         </button>
       ))}

package/src/components/ui/ShowcaseWrapper.tsx

@@ -38,9 +38,9 @@ export function ShowcaseWrapper({
             type="button"
             onClick={() => setShowCode(!showCode)}
             className={cn(
-              "flex h-10 w-10 items-center justify-center rounded-full border transition-all",
+              "ph-showcase-toggle flex h-10 w-10 items-center justify-center rounded-full border transition-colors",
               showCode
-                ? "border-ph-brand bg-ph-brand text-[var(--ph-on-accent)] shadow-lg shadow-ph-brand/25"
+                ? "border-ph-brand bg-ph-brand text-[var(--ph-on-accent)] shadow-[var(--ph-shadow-control)]"
                 : "border-ph-border bg-ph-surface text-ph-subtle hover:border-ph-brand hover:text-ph-brand"
             )}
             title={showCode ? "Hide code" : "Show code"}
@@ -68,7 +68,7 @@ export function ShowcaseWrapper({
 
         <div
           className={cn(
-            "transition-all duration-300",
+            "transition-opacity duration-200",
             showCode
               ? "block opacity-100"
               : "hidden opacity-0 lg:hidden"

package/src/components/ui/Table.tsx

@@ -20,6 +20,7 @@ export interface TableProps<T> {
   getRowKey?: (row: T, index: number) => Key;
   className?: string;
   caption?: string;
+  emptyState?: ReactNode;
 }
 
 export function Table<T>({
@@ -32,10 +33,13 @@ export function Table<T>({
   getRowKey,
   className,
   caption,
+  emptyState = "No data available.",
 }: TableProps<T>) {
   return (
     <div
       className={cn("ph-table-wrap", compact && "ph-table-compact", className)}
+      role="region"
+      aria-label={caption ?? "Data table"}
       tabIndex={0}
     >
       <table className={cn("ph-table", zebra && "ph-table-zebra", ribbon && "ph-table--ribbon")}>
@@ -48,13 +52,21 @@ export function Table<T>({
           </tr>
         </thead>
         <tbody>
-          {data.map((row, i) => (
-            <tr key={getRowKey?.(row, i) ?? i} style={getRowStyle?.(row)}>
-              {columns.map((col) => (
-                <td key={col.key} className={col.className}>{col.cell(row)}</td>
-              ))}
+          {data.length === 0 ? (
+            <tr>
+              <td colSpan={columns.length} className="ph-table-empty">
+                {emptyState}
+              </td>
             </tr>
-          ))}
+          ) : (
+            data.map((row, i) => (
+              <tr key={getRowKey?.(row, i) ?? 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/Typography.tsx

@@ -99,7 +99,7 @@ export const H1 = forwardRef<HTMLHeadingElement, H1Props>(function H1(
   { children, tone = "default", weight, truncate, className, ...props },
   ref,
 ) {
-  return <h1 ref={ref} {...props} className={textClass("text-3xl font-bold tracking-tight md:text-4xl", tone, weight, truncate, className)}>{children}</h1>;
+  return <h1 ref={ref} {...props} className={textClass("ph-page-title font-bold", tone, weight, truncate, className)}>{children}</h1>;
 });
 
 /** H2 — section title */
@@ -107,7 +107,7 @@ export const H2 = forwardRef<HTMLHeadingElement, H2Props>(function H2(
   { children, tone = "default", weight, truncate, className, ...props },
   ref,
 ) {
-  return <h2 ref={ref} {...props} className={textClass("text-2xl font-bold tracking-tight", tone, weight, truncate, className)}>{children}</h2>;
+  return <h2 ref={ref} {...props} className={textClass("text-2xl font-semibold tracking-tight", tone, weight, truncate, className)}>{children}</h2>;
 });
 
 /** H3 — subsection title */
@@ -155,7 +155,7 @@ export const Caption = forwardRef<HTMLSpanElement, CaptionProps>(function Captio
   { children, tone = "muted", weight, truncate, className, ...props },
   ref,
 ) {
-  return <span ref={ref} {...props} className={textClass("text-[11px] font-medium uppercase tracking-wider", tone, weight, truncate, className)}>{children}</span>;
+  return <span ref={ref} {...props} className={textClass("text-xs font-medium", tone, weight, truncate, className)}>{children}</span>;
 });
 
 /** Overline — tiny eyebrow text */
@@ -163,7 +163,7 @@ export const Overline = forwardRef<HTMLSpanElement, OverlineProps>(function Over
   { children, tone = "muted", weight, truncate, className, ...props },
   ref,
 ) {
-  return <span ref={ref} {...props} className={textClass("text-[10px] font-bold uppercase tracking-[0.15em]", tone, weight, truncate, className)}>{children}</span>;
+  return <span ref={ref} {...props} className={textClass("text-[length:var(--ph-type-overline)] font-semibold uppercase tracking-[0.08em]", tone, weight, truncate, className)}>{children}</span>;
 });
 
 /** Lead — intro paragraph under a Display/SectionTitle; measure-capped for readability */

package/src/components/ui/avatar-stat.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
-import { Avatar } from "@/components/ui/Avatar";
+import { Avatar, AvatarGroup } from "@/components/ui/Avatar";
 import { Stat } from "@/components/ui/Stat";
 
 describe("Avatar status", () => {
@@ -10,6 +10,19 @@ describe("Avatar status", () => {
     const status = screen.getByRole("img", { name: "online status" });
     expect(status).toHaveClass("bg-ph-success", "border-ph-surface");
   });
+
+  it("uses semantic accent contrast and counts grouped children", () => {
+    const { container } = render(
+      <AvatarGroup max={1}>
+        <Avatar label="JD" />
+        <Avatar label="AR" />
+      </AvatarGroup>,
+    );
+
+    expect(container.querySelector(".ph-avatar")).toHaveClass("text-[var(--ph-on-accent)]");
+    expect(screen.getByText("+1")).toBeInTheDocument();
+    expect(container.querySelectorAll(".ph-avatar")).toHaveLength(2);
+  });
 });
 
 describe("Stat warning", () => {

package/src/components/ui/index.ts

@@ -17,6 +17,16 @@ export {
   ButtonChrome as ButtonChrome,
   type ButtonChromeProps as ButtonChromeProps,
 } from "@/components/ui/ButtonChrome";
+export {
+  MarketingHeader,
+  MarketingLink,
+  MarketingMotionControl,
+  MarketingReveal,
+} from "@/components/ui/Marketing";
+export {
+  AiWritingIllustration,
+  IntegrationBridgeIllustration,
+} from "@/components/ui/MarketingIllustrations";
 export {
   Alert as Alert,
   type AlertProps as AlertProps,
@@ -158,10 +168,7 @@ export {
   type CommandItem,
   type CommandPaletteProps,
 } from "@/components/ui/CommandPalette";
-export {
-  Calendar,
-  type CalendarProps,
-} from "@/components/ui/Calendar";
+export { Calendar, type CalendarProps } from "@/components/ui/Calendar";
 export {
   Tooltip,
   TooltipProvider,
@@ -170,10 +177,7 @@ export {
   type TooltipProviderProps,
   type TooltipSide,
 } from "@/components/ui/Tooltip";
-export {
-  EmptyState,
-  type EmptyStateProps,
-} from "@/components/ui/EmptyState";
+export { EmptyState, type EmptyStateProps } from "@/components/ui/EmptyState";
 export {
   FilterChips,
   type FilterChip,
@@ -256,10 +260,7 @@ export {
   Spinner as Spinner,
   type SpinnerProps as SpinnerProps,
 } from "@/components/ui/Spinner";
-export {
-  Dot as Dot,
-  type DotProps as DotProps,
-} from "@/components/ui/Dot";
+export { Dot as Dot, type DotProps as DotProps } from "@/components/ui/Dot";
 export {
   Chip as Chip,
   type ChipProps as ChipProps,

package/src/components/ui/interaction-primitives.test.tsx

@@ -97,13 +97,14 @@ describe("chip", () => {
 });
 
 describe("segmented control", () => {
-  it("exposes and updates the selected option as a pressed button", async () => {
+  it("exposes a radio group and moves selection with arrow keys", async () => {
     const user = userEvent.setup();
 
     function Fixture() {
       const [value, setValue] = useState("board");
       return (
         <SegmentedControl
+          aria-label="View"
           value={value}
           onChange={setValue}
           options={[
@@ -115,15 +116,20 @@ describe("segmented control", () => {
     }
 
     render(<Fixture />);
-    expect(screen.getByRole("button", { name: "Board" })).toHaveAttribute(
-      "aria-pressed",
+    expect(screen.getByRole("radiogroup", { name: "View" })).toBeInTheDocument();
+    const board = screen.getByRole("radio", { name: "Board" });
+    expect(board).toHaveAttribute(
+      "aria-checked",
       "true",
     );
 
-    await user.click(screen.getByRole("button", { name: "List" }));
-    expect(screen.getByRole("button", { name: "List" })).toHaveAttribute(
-      "aria-pressed",
+    await user.click(board);
+    await user.keyboard("{ArrowRight}");
+    const list = screen.getByRole("radio", { name: "List" });
+    expect(list).toHaveAttribute(
+      "aria-checked",
       "true",
     );
+    expect(list).toHaveFocus();
   });
 });

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

@@ -0,0 +1,39 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it } from "vitest";
+
+import { MarketingHeader, MarketingMotionControl } from "./Marketing";
+
+afterEach(() => {
+  cleanup();
+  document.documentElement.removeAttribute("data-marketing-paused");
+});
+
+describe("marketing controls", () => {
+  it("names navigation and exposes shared focus targets", () => {
+    render(
+      <MarketingHeader
+        brand={<a href="https://example.com">ShellStack</a>}
+        navigation={<a href="https://example.com/features">Features</a>}
+        actions={<a href="https://example.com/login">Log in</a>}
+      />,
+    );
+
+    expect(screen.getByRole("navigation", { name: "Product navigation" })).toBeInTheDocument();
+    expect(screen.getByRole("link", { name: "ShellStack" })).toBeInTheDocument();
+  });
+
+  it("pauses and resumes landing animation state", async () => {
+    const user = userEvent.setup();
+    render(<MarketingMotionControl />);
+
+    const control = screen.getByRole("button", { name: "Pause landing animations" });
+    await user.click(control);
+    expect(control).toHaveAttribute("aria-pressed", "true");
+    expect(document.documentElement).toHaveAttribute("data-marketing-paused");
+
+    await user.click(control);
+    expect(control).toHaveAttribute("aria-pressed", "false");
+    expect(document.documentElement).not.toHaveAttribute("data-marketing-paused");
+  });
+});

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

@@ -0,0 +1,20 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { Table } from "./Table";
+
+describe("Table", () => {
+  it("names its scroll region and renders a custom empty state", () => {
+    render(
+      <Table
+        data={[] as Array<{ name: string }>}
+        columns={[{ key: "name", header: "Name", cell: (row) => row.name }]}
+        caption="People"
+        emptyState="No people yet."
+      />,
+    );
+
+    expect(screen.getByRole("region", { name: "People" })).toHaveAttribute("tabindex", "0");
+    expect(screen.getByRole("cell", { name: "No people yet." })).toHaveAttribute("colspan", "1");
+  });
+});