@xenide-io/the-old-ui-theme 0.7.0 → 0.9.0

package/scripts/package-smoke.mjs

@@ -0,0 +1,43 @@
+import { execFileSync } from "node:child_process";
+import { createRequire } from "node:module";
+import { readFileSync } from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const packageRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..");
+const packageJson = JSON.parse(readFileSync(path.join(packageRoot, "package.json"), "utf8"));
+const packed = JSON.parse(
+  execFileSync("npm", ["pack", "--dry-run", "--json"], {
+    cwd: packageRoot,
+    encoding: "utf8",
+  }),
+)[0];
+const packedPaths = new Set(packed.files.map(({ path: filePath }) => filePath));
+
+const expectedFiles = [
+  "README.md",
+  "docs/README.md",
+  "public/fonts/OpenRunde-Regular.woff2",
+  "public/fonts/OpenRunde-Medium.woff2",
+  "public/fonts/OpenRunde-Semibold.woff2",
+  "public/fonts/OpenRunde-Bold.woff2",
+];
+
+for (const [subpath, target] of Object.entries(packageJson.exports)) {
+  const targets = typeof target === "string" ? [target] : Object.values(target);
+
+  for (const exportTarget of targets) {
+    expectedFiles.push(exportTarget.replace(/^\.\//, ""));
+  }
+
+  if (typeof target !== "string" && target.require) {
+    const requirePackage = createRequire(import.meta.url);
+    requirePackage(`${packageJson.name}${subpath === "." ? "" : subpath.slice(1)}`);
+  }
+}
+
+const missingFiles = expectedFiles.filter((filePath) => !packedPaths.has(filePath));
+
+if (missingFiles.length > 0) {
+  throw new Error(`npm package is missing required files:\n${missingFiles.join("\n")}`);
+}

package/src/app/globals.css

@@ -847,6 +847,7 @@ body {
   .ph-checkbox-icon {
     @apply pointer-events-none absolute inset-0 h-4 w-4 scale-75 opacity-0;
     color: var(--ph-on-accent);
+    stroke-width: 3;
     transition: opacity var(--ph-motion-fast) ease;
   }
 
@@ -1788,7 +1789,7 @@ body {
     @apply space-y-5;
   }
 
-  .ph-settings-nav__group h3 {
+  .ph-settings-nav__heading {
     @apply mb-1 px-2 text-[10px] font-semibold uppercase tracking-wider text-ph-mutedtext;
   }
 

package/src/components/ui/Accordion.tsx

@@ -1,16 +1,16 @@
 "use client";
 
-import { useState } from "react";
+import { useId, useState } from "react";
 import { cn } from "@/lib/cn";
 import { IconChevronDown } from "@/components/icons";
 
-interface AccordionItem {
+export interface AccordionItem {
   id: string;
   title: string;
   content: React.ReactNode;
 }
 
-interface AccordionProps {
+export interface AccordionProps {
   items: AccordionItem[];
   allowMultiple?: boolean;
   defaultOpen?: string[];
@@ -24,6 +24,7 @@ export function Accordion({
   className,
 }: AccordionProps) {
   const [openItems, setOpenItems] = useState<Set<string>>(new Set(defaultOpen));
+  const idPrefix = useId();
 
   const toggleItem = (id: string) => {
     setOpenItems((prev) => {
@@ -41,28 +42,41 @@ export function Accordion({
   };
 
   return (
-    <div className={cn("divide-y divide-ph-border rounded-xl border border-ph-border bg-ph-surface", className)}>
+    <div
+      className={cn(
+        "divide-y divide-ph-border rounded-xl border border-ph-border bg-ph-surface",
+        className,
+      )}
+    >
       {items.map((item) => {
         const isOpen = openItems.has(item.id);
+        const contentId = `accordion-${idPrefix}-${item.id}-content`;
         return (
           <div key={item.id} className="first:rounded-t-xl last:rounded-b-xl">
             <button
               type="button"
               onClick={() => toggleItem(item.id)}
+              aria-expanded={isOpen}
+              aria-controls={contentId}
               className="flex w-full items-center justify-between px-5 py-4 text-left transition hover:bg-ph-muted"
             >
               <span className="font-semibold text-ph-ink">{item.title}</span>
               <IconChevronDown
                 className={cn(
                   "h-5 w-5 text-ph-mutedtext transition-transform duration-200",
-                  isOpen && "rotate-180"
+                  isOpen && "rotate-180",
                 )}
               />
             </button>
             <div
+              id={contentId}
+              aria-hidden={!isOpen}
+              ref={(node) => {
+                if (node) node.toggleAttribute("inert", !isOpen);
+              }}
               className={cn(
                 "grid transition-all duration-200",
-                isOpen ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+                isOpen ? "grid-rows-[1fr]" : "grid-rows-[0fr]",
               )}
             >
               <div className="overflow-hidden">

package/src/components/ui/Avatar.tsx

@@ -28,9 +28,9 @@ const sizeMap: Record<AvatarSize, string> = {
 };
 
 const statusMap: Record<AvatarStatus, string> = {
-  online: "bg-emerald-500",
+  online: "bg-ph-success",
   offline: "bg-ph-mutedtext",
-  away: "bg-amber-400",
+  away: "bg-ph-warning",
   busy: "bg-ph-danger",
 };
 
@@ -57,8 +57,10 @@ export function Avatar({
       </div>
       {status && (
         <span
+          role="img"
+          aria-label={`${status} status`}
           className={cn(
-            "absolute bottom-0 right-1 h-2.5 w-2.5 rounded-full border-2 border-white",
+            "absolute bottom-0 right-1 h-2.5 w-2.5 rounded-full border-2 border-ph-surface",
             statusMap[status],
           )}
         />

package/src/components/ui/Calendar.tsx

@@ -1,62 +1,159 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useId, useRef, useState } from "react";
 import { IconChevronLeft, IconChevronRight } from "@/components/icons";
 import { cn } from "@/lib/cn";
 
-interface CalendarProps {
+export interface CalendarProps {
   value?: Date;
   onChange?: (date: Date) => void;
   className?: string;
 }
 
-export function Calendar({ value, onChange, className }: CalendarProps) {
-  const [currentMonth, setCurrentMonth] = useState(value || new Date());
-  const today = new Date();
+const monthNames = [
+  "January", "February", "March", "April", "May", "June",
+  "July", "August", "September", "October", "November", "December",
+];
+const weekDays = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+const fullWeekDays = [
+  "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday",
+];
 
-  const year = currentMonth.getFullYear();
-  const month = currentMonth.getMonth();
+function startOfDay(date: Date) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
 
-  const firstDay = new Date(year, month, 1).getDay();
-  const daysInMonth = new Date(year, month + 1, 0).getDate();
+function startOfMonth(date: Date) {
+  return new Date(date.getFullYear(), date.getMonth(), 1);
+}
 
-  const prevMonth = () => setCurrentMonth(new Date(year, month - 1, 1));
-  const nextMonth = () => setCurrentMonth(new Date(year, month + 1, 1));
+function isSameDay(first: Date, second: Date) {
+  return (
+    first.getFullYear() === second.getFullYear() &&
+    first.getMonth() === second.getMonth() &&
+    first.getDate() === second.getDate()
+  );
+}
+
+function addDays(date: Date, amount: number) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate() + amount);
+}
+
+function addMonths(date: Date, amount: number) {
+  const targetMonth = new Date(date.getFullYear(), date.getMonth() + amount, 1);
+  const lastDay = new Date(
+    targetMonth.getFullYear(),
+    targetMonth.getMonth() + 1,
+    0,
+  ).getDate();
 
-  const monthNames = [
-    "January", "February", "March", "April", "May", "June",
-    "July", "August", "September", "October", "November", "December",
-  ];
+  return new Date(
+    targetMonth.getFullYear(), targetMonth.getMonth(), Math.min(date.getDate(), lastDay));
+}
+
+function dateKey(date: Date) {
+  return `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;
+}
 
-  const weekDays = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+function dateLabel(date: Date) {
+  return `${fullWeekDays[date.getDay()]}, ${date.getDate()} ${monthNames[date.getMonth()]} ${date.getFullYear()}`;
+}
 
-  const isSelected = (day: number) => {
-    if (!value) return false;
-    return (
-      value.getDate() === day &&
-      value.getMonth() === month &&
-      value.getFullYear() === year
-    );
+export function Calendar({ value, onChange, className }: CalendarProps) {
+  const [currentMonth, setCurrentMonth] = useState(() => startOfMonth(value ?? new Date()));
+  const [focusedDate, setFocusedDate] = useState(() => startOfDay(value ?? new Date()));
+  const gridRef = useRef<HTMLDivElement>(null);
+  const shouldFocusDateRef = useRef(false);
+  const monthLabelId = useId();
+  const today = startOfDay(new Date());
+
+  useEffect(() => {
+    if (!value) return;
+    const nextDate = startOfDay(value);
+    setCurrentMonth(startOfMonth(nextDate));
+    setFocusedDate(nextDate);
+  }, [value]);
+
+  useEffect(() => {
+    if (!shouldFocusDateRef.current) return;
+    gridRef.current
+      ?.querySelector<HTMLButtonElement>(`[data-date="${dateKey(focusedDate)}"]`)
+      ?.focus();
+    shouldFocusDateRef.current = false;
+  }, [currentMonth, focusedDate]);
+
+  const year = currentMonth.getFullYear();
+  const month = currentMonth.getMonth();
+
+  const changeMonth = (amount: number) => {
+    const nextDate = addMonths(focusedDate, amount);
+    setFocusedDate(nextDate);
+    setCurrentMonth(startOfMonth(nextDate));
   };
 
-  const isToday = (day: number) => {
-    return (
-      today.getDate() === day &&
-      today.getMonth() === month &&
-      today.getFullYear() === year
-    );
+  const moveFocus = (nextDate: Date) => {
+    shouldFocusDateRef.current = true;
+    setFocusedDate(nextDate);
+    setCurrentMonth(startOfMonth(nextDate));
   };
 
-  const handleSelect = (day: number) => {
-    onChange?.(new Date(year, month, day));
+  const handleSelect = (date: Date) => {
+    setFocusedDate(date);
+    onChange?.(startOfDay(date));
   };
 
-  const days = [];
-  for (let i = 0; i < firstDay; i++) {
-    days.push(null);
+  const handleDayKeyDown = (
+    event: React.KeyboardEvent<HTMLButtonElement>,
+    date: Date,
+  ) => {
+    let nextDate: Date | undefined;
+
+    switch (event.key) {
+      case "ArrowLeft":
+        nextDate = addDays(date, -1);
+        break;
+      case "ArrowRight":
+        nextDate = addDays(date, 1);
+        break;
+      case "ArrowUp":
+        nextDate = addDays(date, -7);
+        break;
+      case "ArrowDown":
+        nextDate = addDays(date, 7);
+        break;
+      case "Home":
+        nextDate = addDays(date, -date.getDay());
+        break;
+      case "End":
+        nextDate = addDays(date, 6 - date.getDay());
+        break;
+      case "PageUp":
+        nextDate = addMonths(date, event.shiftKey ? -12 : -1);
+        break;
+      case "PageDown":
+        nextDate = addMonths(date, event.shiftKey ? 12 : 1);
+        break;
+      case "Enter":
+      case " ":
+        event.preventDefault();
+        handleSelect(date);
+        return;
+      default:
+        return;
+    }
+
+    event.preventDefault();
+    moveFocus(nextDate);
+  };
+
+  const firstDay = new Date(year, month, 1).getDay();
+  const daysInMonth = new Date(year, month + 1, 0).getDate();
+  const days: Array<Date | null> = Array.from({ length: firstDay }, () => null);
+  for (let day = 1; day <= daysInMonth; day++) {
+    days.push(new Date(year, month, day));
   }
-  for (let i = 1; i <= daysInMonth; i++) {
-    days.push(i);
+  while (days.length < 42) {
+    days.push(null);
   }
 
   return (
@@ -64,18 +161,18 @@ export function Calendar({ value, onChange, className }: CalendarProps) {
       <div className="mb-4 flex items-center justify-between">
         <button
           type="button"
-          onClick={prevMonth}
+          onClick={() => changeMonth(-1)}
           aria-label="Previous month"
           className="rounded-lg p-1 text-ph-subtle transition hover:bg-ph-muted hover:text-ph-ink"
         >
           <IconChevronLeft className="h-5 w-5" aria-hidden />
         </button>
-        <span className="text-sm font-semibold text-ph-ink">
+        <span id={monthLabelId} aria-live="polite" className="text-sm font-semibold text-ph-ink">
           {monthNames[month]} {year}
         </span>
         <button
           type="button"
-          onClick={nextMonth}
+          onClick={() => changeMonth(1)}
           aria-label="Next month"
           className="rounded-lg p-1 text-ph-subtle transition hover:bg-ph-muted hover:text-ph-ink"
         >
@@ -83,32 +180,59 @@ export function Calendar({ value, onChange, className }: CalendarProps) {
         </button>
       </div>
 
-      <div className="grid grid-cols-7 gap-1">
-        {weekDays.map((day) => (
-          <div key={day} className="py-1 text-center text-xs font-medium text-ph-mutedtext">
-            {day}
-          </div>
-        ))}
-        {days.map((day, index) => (
-          <div key={index} className="aspect-square">
-            {day && (
-              <button
-                type="button"
-                onClick={() => handleSelect(day)}
-                className={cn(
-                  "flex h-full w-full items-center justify-center rounded-lg text-sm transition-colors",
-                  isSelected(day)
-                    ? "bg-ph-brand font-semibold text-[var(--ph-on-accent)] shadow-ph"
-                    : isToday(day)
-                    ? "bg-ph-muted font-semibold text-ph-brand ring-1 ring-ph-brand/30"
-                    : "text-ph-ink hover:bg-ph-muted"
-                )}
-              >
-                {day}
-              </button>
+      <div ref={gridRef} role="grid" aria-labelledby={monthLabelId}>
+        <div role="row" className="grid grid-cols-7 gap-1">
+          {weekDays.map((day, index) => (
+            <div
+              key={day}
+              role="columnheader"
+              aria-label={fullWeekDays[index]}
+              className="py-1 text-center text-xs font-medium text-ph-mutedtext"
+            >
+              {day}
+            </div>
+          ))}
+        </div>
+        {Array.from({ length: 6 }, (_, week) => {
+          const weekDates = days.slice(week * 7, week * 7 + 7);
+          if (weekDates.length === 0 || weekDates.every((date) => !date)) return null;
+          return (
+          <div key={week} role="row" className="grid grid-cols-7 gap-1">
+            {weekDates.map((date, day) =>
+              date ? (
+                <div
+                  key={dateKey(date)}
+                  role="gridcell"
+                  aria-selected={value ? isSameDay(value, date) : false}
+                  className="aspect-square"
+                >
+                  <button
+                    type="button"
+                    data-date={dateKey(date)}
+                    aria-label={dateLabel(date)}
+                    aria-current={isSameDay(today, date) ? "date" : undefined}
+                    tabIndex={isSameDay(focusedDate, date) ? 0 : -1}
+                    onClick={() => handleSelect(date)}
+                    onKeyDown={(event) => handleDayKeyDown(event, date)}
+                    className={cn(
+                      "flex h-full w-full items-center justify-center rounded-lg text-sm transition-colors",
+                      value && isSameDay(value, date)
+                        ? "bg-ph-brand font-semibold text-[var(--ph-on-accent)] shadow-ph"
+                        : isSameDay(today, date)
+                          ? "bg-ph-muted font-semibold text-ph-brand ring-1 ring-ph-brand/30"
+                          : "text-ph-ink hover:bg-ph-muted",
+                    )}
+                  >
+                    {date.getDate()}
+                  </button>
+                </div>
+              ) : (
+                <div key={`empty-${week}-${day}`} role="gridcell" aria-hidden="true" className="aspect-square" />
+              ),
             )}
           </div>
-        ))}
+          );
+        })}
       </div>
     </div>
   );

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

@@ -0,0 +1,38 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { Card } from "@/components/ui/Card";
+
+describe("Card", () => {
+  it("renders an onClick card as a keyboard-operable button", async () => {
+    const user = userEvent.setup();
+    const onClick = vi.fn();
+
+    render(<Card title="Open report" onClick={onClick} />);
+
+    const card = screen.getByRole("button", { name: "Open report" });
+    expect(card).toHaveAttribute("type", "button");
+    expect(card).toHaveClass("ph-card-interactive");
+
+    await user.tab();
+    await user.keyboard("{Enter}");
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders an href card as a link", () => {
+    render(<Card title="Project settings" href="/settings" target="_blank" />);
+
+    const card = screen.getByRole("link", { name: "Project settings" });
+    expect(card).toHaveAttribute("href", "/settings");
+    expect(card).toHaveAttribute("target", "_blank");
+    expect(card).toHaveClass("ph-card-interactive");
+  });
+
+  it("keeps visual-only interactive cards as non-interactive containers", () => {
+    render(<Card title="Card with actions" interactive />);
+
+    expect(screen.getByText("Card with actions").closest(".ph-card")).toBeInstanceOf(
+      HTMLDivElement,
+    );
+  });
+});

package/src/components/ui/Card.tsx

@@ -1,9 +1,17 @@
-import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
+import {
+  forwardRef,
+  type AnchorHTMLAttributes,
+  type ButtonHTMLAttributes,
+  type HTMLAttributes,
+  type MouseEventHandler,
+  type Ref,
+  type ReactNode,
+} from "react";
 import { cn } from "@/lib/cn";
 
 export type CardVariant = "default" | "outlined" | "elevated" | "highlighted";
 
-export interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+export interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "onClick"> {
   children?: ReactNode;
   title?: ReactNode;
   description?: ReactNode;
@@ -13,7 +21,22 @@ export interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, "title">
   variant?: CardVariant;
   className?: string;
   bodyClassName?: string;
+  /**
+   * Applies interactive chrome to a card containing its own semantic control.
+   * This alone does not make the card clickable; use `href` or `onClick` for a
+   * full-card action.
+   */
   interactive?: boolean;
+  /** Renders the full card as a semantic link. Do not combine with nested controls. */
+  href?: string;
+  /** Renders the full card as a semantic button. Do not combine with nested controls. */
+  onClick?: MouseEventHandler<HTMLElement>;
+  /** Link target, used when `href` is provided. */
+  target?: string;
+  /** Link relationship, used when `href` is provided. */
+  rel?: string;
+  /** Button behaviour, used when `onClick` is provided without `href`. */
+  type?: "button" | "submit" | "reset";
   titleAs?: "h2" | "h3" | "h4";
 }
 
@@ -24,7 +47,7 @@ const variantMap: Record<CardVariant, string> = {
   highlighted: "ph-card-highlighted",
 };
 
-export const Card = forwardRef<HTMLDivElement, CardProps>(function Card({
+export const Card = forwardRef<HTMLElement, CardProps>(function Card({
   children,
   title,
   description,
@@ -35,20 +58,24 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(function Card({
   className,
   bodyClassName,
   interactive = false,
+  href,
+  onClick,
+  target,
+  rel,
+  type,
   titleAs: Title = "h3",
   ...props
 }, ref) {
-  return (
-    <div
-      ref={ref}
-      className={cn(
-        "ph-card",
-        variantMap[variant],
-        interactive && "ph-card-interactive",
-        className
-      )}
-      {...props}
-    >
+  const isLink = href !== undefined;
+  const isButton = onClick !== undefined && !isLink;
+  const cardClassName = cn(
+    "ph-card",
+    variantMap[variant],
+    (interactive || isLink || isButton) && "ph-card-interactive",
+    className,
+  );
+  const cardContent = (
+    <>
       {media && <div className="ph-card-media">{media}</div>}
       <div className={cn("ph-card-body", bodyClassName)}>
         {title && (
@@ -63,6 +90,42 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(function Card({
       {footer && (
         <div className="border-t border-ph-border px-6 py-4 text-xs text-ph-subtle">{footer}</div>
       )}
+    </>
+  );
+
+  if (isLink) {
+    return (
+      <a
+        ref={ref as Ref<HTMLAnchorElement>}
+        className={cardClassName}
+        href={href}
+        target={target}
+        rel={rel}
+        onClick={onClick}
+        {...(props as AnchorHTMLAttributes<HTMLAnchorElement>)}
+      >
+        {cardContent}
+      </a>
+    );
+  }
+
+  if (isButton) {
+    return (
+      <button
+        ref={ref as Ref<HTMLButtonElement>}
+        type={type ?? "button"}
+        className={cardClassName}
+        onClick={onClick}
+        {...(props as ButtonHTMLAttributes<HTMLButtonElement>)}
+      >
+        {cardContent}
+      </button>
+    );
+  }
+
+  return (
+    <div ref={ref as Ref<HTMLDivElement>} className={cardClassName} {...props}>
+      {cardContent}
     </div>
   );
 });

package/src/components/ui/CollapsibleSection.tsx

@@ -4,14 +4,19 @@ import { useId, useState } from "react";
 import { IconChevronDown } from "@/components/icons";
 import { cn } from "@/lib/cn";
 
-interface CollapsibleSectionProps {
+export interface CollapsibleSectionProps {
   title: string;
   children: React.ReactNode;
   defaultOpen?: boolean;
   id?: string;
 }
 
-export function CollapsibleSection({ title, children, defaultOpen = true, id }: CollapsibleSectionProps) {
+export function CollapsibleSection({
+  title,
+  children,
+  defaultOpen = true,
+  id,
+}: CollapsibleSectionProps) {
   const [isOpen, setIsOpen] = useState(defaultOpen);
   const generatedId = useId();
   const contentId = `${id ?? generatedId}-content`;
@@ -29,7 +34,7 @@ export function CollapsibleSection({ title, children, defaultOpen = true, id }:
         <IconChevronDown
           className={cn(
             "h-5 w-5 text-ph-subtle transition-transform duration-200",
-            isOpen && "rotate-180"
+            isOpen && "rotate-180",
           )}
           aria-hidden
         />
@@ -37,9 +42,12 @@ export function CollapsibleSection({ title, children, defaultOpen = true, id }:
       <div
         id={contentId}
         aria-hidden={!isOpen}
+        ref={(node) => {
+          if (node) node.toggleAttribute("inert", !isOpen);
+        }}
         className={cn(
           "overflow-hidden transition-all duration-300",
-          isOpen ? "max-h-[50000px] opacity-100" : "max-h-0 opacity-0"
+          isOpen ? "max-h-[50000px] opacity-100" : "max-h-0 opacity-0",
         )}
       >
         {children}