@xenide-io/the-old-ui-theme 0.3.2 → 0.4.3

package/src/suite/components/suite-layout.tsx

@@ -0,0 +1,285 @@
+'use client';
+
+import type { ComponentType, ElementType, ReactNode, SVGProps } from 'react';
+import { cn } from '../lib/cn';
+import { TodayTimeIcon } from './today-ui';
+
+type LucideIcon = ComponentType<SVGProps<SVGSVGElement>>;
+
+const WIDTHS = {
+  full: 'max-w-none',
+  wide: 'max-w-7xl',
+  content: 'max-w-6xl',
+  narrow: 'max-w-4xl',
+} as const;
+
+export type SuitePageWidth = keyof typeof WIDTHS;
+
+export interface SuiteBreadcrumbsProps {
+  items: { label: ReactNode; href?: string }[];
+  className?: string;
+}
+
+/** Minimal slash-separated breadcrumb line. */
+export function SuiteBreadcrumbs({ items, className }: SuiteBreadcrumbsProps) {
+  return (
+    <nav aria-label="Breadcrumb" className={className}>
+      <ol className="flex min-w-0 items-center gap-1.5">
+        {items.map((item, index) => {
+          const isLast = index === items.length - 1;
+          return (
+            <li key={index} className="flex min-w-0 items-center gap-1.5">
+              {index > 0 ? (
+                <span className="select-none text-ph-border" aria-hidden="true">
+                  /
+                </span>
+              ) : null}
+              {item.href && !isLast ? (
+                <a
+                  href={item.href}
+                  className="truncate transition hover:text-ph-ink"
+                >
+                  {item.label}
+                </a>
+              ) : (
+                <span
+                  className={cn(
+                    'truncate',
+                    isLast ? 'font-medium text-ph-ink' : 'text-ph-subtle',
+                  )}
+                  aria-current={isLast ? 'page' : undefined}
+                >
+                  {item.label}
+                </span>
+              )}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+}
+
+export function SuitePage({
+  children,
+  width = 'wide',
+  inset = true,
+  className,
+  as: Component = 'div',
+  dataTest,
+  id,
+  role,
+  'aria-live': ariaLive,
+}: {
+  children: ReactNode;
+  width?: SuitePageWidth;
+  inset?: boolean;
+  className?: string;
+  as?: ElementType;
+  dataTest?: string;
+  id?: string;
+  role?: string;
+  'aria-live'?: React.AriaAttributes['aria-live'];
+}) {
+  return (
+    <Component
+      id={id}
+      data-test={dataTest}
+      role={role}
+      aria-live={ariaLive}
+      className={cn(
+        'mx-auto flex w-full min-w-0 flex-col',
+        WIDTHS[width],
+        // Tight inset keeps page titles aligned without excessive whitespace.
+        inset && 'px-4 pb-6 pt-4 sm:px-6 sm:pb-7 sm:pt-5 lg:px-8',
+        className,
+      )}
+    >
+      {children}
+    </Component>
+  );
+}
+
+export function SuitePageHeader({
+  title,
+  description,
+  eyebrow,
+  actions,
+  className,
+  titleClassName,
+  dataTest,
+  /** Optional icon rendered before the title. */
+  icon,
+  /** Use the animated sun/moon icon from the Today page. */
+  todayIcon,
+  todayIconClassName,
+  /** Small badge/pill next to the title (e.g. "Beta", org name). */
+  badge,
+  /** Breadcrumb line rendered above the title. */
+  breadcrumb,
+}: {
+  title: ReactNode;
+  description?: ReactNode;
+  eyebrow?: ReactNode;
+  actions?: ReactNode;
+  className?: string;
+  titleClassName?: string;
+  dataTest?: string;
+  icon?: ReactNode;
+  todayIcon?: boolean;
+  todayIconClassName?: string;
+  badge?: ReactNode;
+  breadcrumb?: ReactNode;
+}) {
+  const resolvedIcon = todayIcon ? (
+    <TodayTimeIcon
+      className={cn(
+        'h-6 w-6 sm:h-7 sm:w-7 text-amber-500',
+        todayIconClassName,
+      )}
+    />
+  ) : (
+    icon
+  );
+
+  return (
+    <header
+      data-test={dataTest}
+      className={cn(
+        'flex items-start justify-between gap-4 pb-4 sm:pb-5',
+        className,
+      )}
+    >
+      <div className="flex min-w-0 items-start gap-3">
+        {resolvedIcon ? (
+          <div
+            className="hidden shrink-0 pt-1 sm:block"
+            aria-hidden="true"
+          >
+            {resolvedIcon}
+          </div>
+        ) : null}
+        <div className="flex min-w-0 flex-col gap-1">
+          {eyebrow ? (
+            <div className="mb-0.5 flex min-w-0 items-center gap-1.5 text-xs text-ph-subtle">
+              {eyebrow}
+            </div>
+          ) : null}
+          {breadcrumb ? (
+            <div className="mb-0.5 flex min-w-0 items-center gap-1.5 text-xs text-ph-subtle">
+              {breadcrumb}
+            </div>
+          ) : null}
+          <div className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1">
+            <h1
+              className={cn(
+                'font-display text-[1.625rem] font-bold leading-tight tracking-tight text-ph-ink sm:text-[2.25rem]',
+                titleClassName,
+              )}
+            >
+              {title}
+            </h1>
+            {badge ? (
+              <span className="rounded-md bg-ph-muted px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide text-ph-subtle">
+                {badge}
+              </span>
+            ) : null}
+          </div>
+          {description ? (
+            <div className="mt-1 max-w-2xl text-pretty text-sm leading-5 text-ph-subtle">
+              {description}
+            </div>
+          ) : null}
+        </div>
+      </div>
+      {actions ? (
+        <div className="flex shrink-0 items-center gap-2 pt-1">
+          {actions}
+        </div>
+      ) : null}
+    </header>
+  );
+}
+
+export function SuiteToolbar({
+  children,
+  className,
+  label = 'Page tools',
+  dataTest,
+}: {
+  children: ReactNode;
+  className?: string;
+  label?: string;
+  dataTest?: string;
+}) {
+  return (
+    <div
+      role="toolbar"
+      aria-label={label}
+      data-test={dataTest}
+      className={cn('flex min-w-0 flex-wrap items-center gap-2', className)}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function SuiteTabList({
+  children,
+  className,
+  label,
+  dataTest,
+}: {
+  children: ReactNode;
+  className?: string;
+  label: string;
+  dataTest?: string;
+}) {
+  return (
+    <nav
+      aria-label={label}
+      data-test={dataTest}
+      className={cn(
+        'flex min-w-0 flex-wrap gap-2 [&_a]:min-h-[48px] [&_button]:min-h-[48px] sm:[&_a]:min-h-[44px] sm:[&_button]:min-h-[44px]',
+        className,
+      )}
+    >
+      {children}
+    </nav>
+  );
+}
+
+export function SuiteSectionHeader({
+  title,
+  description,
+  action,
+  className,
+}: {
+  title: ReactNode;
+  description?: ReactNode;
+  action?: ReactNode;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        'flex min-w-0 flex-col gap-4 sm:flex-row sm:items-end sm:justify-between',
+        className,
+      )}
+    >
+      <div className="min-w-0">
+        <h2 className="font-display text-balance text-lg font-semibold tracking-tight text-ph-ink sm:text-xl">
+          {title}
+        </h2>
+        {description ? (
+          <div className="mt-1 max-w-2xl text-pretty text-sm leading-5 text-ph-subtle">
+            {description}
+          </div>
+        ) : null}
+      </div>
+      {action ? (
+        <div className="flex min-h-[44px] shrink-0 items-center">{action}</div>
+      ) : null}
+    </div>
+  );
+}

package/src/suite/components/suite-mobile-drawer.tsx

@@ -0,0 +1,150 @@
+'use client';
+
+import { useEffect, useRef, useState, type ReactNode } from 'react';
+import { Xmark as X } from 'iconoir-react';
+
+import { cn } from '../lib/cn';
+
+/**
+ * Suite mobile navigation drawer. Backdrop fade + panel slide, Escape to
+ * close, body scroll-lock and focus hand-off while open. Nav content stays
+ * app-side via `children`.
+ */
+export function SuiteMobileDrawer({
+  open,
+  onClose,
+  children,
+  side = 'left',
+  showCloseButton = false,
+  closeLabel = 'Close navigation',
+  backdropLabel = 'Close navigation',
+  dialogLabel = 'Navigation',
+  durationMs = 200,
+  dataTest,
+  panelDataTest,
+  panelClassName,
+}: {
+  open: boolean;
+  onClose: () => void;
+  children: ReactNode;
+  /** Edge the panel slides in from. */
+  side?: 'left' | 'right';
+  /** Standard close row (h-14, trailing X button) above the content. */
+  showCloseButton?: boolean;
+  closeLabel?: string;
+  backdropLabel?: string;
+  /** Accessible name for the dialog panel. */
+  dialogLabel?: string;
+  /** Slide/fade duration; also the close-transition unmount delay. */
+  durationMs?: number;
+  dataTest?: string;
+  panelDataTest?: string;
+  /** Panel surface overrides (e.g. `bg-ph-canvas`). */
+  panelClassName?: string;
+}) {
+  // `rendered` keeps the drawer mounted through the close transition;
+  // `shown` drives the slide/fade end-state.
+  const [rendered, setRendered] = useState(open);
+  const [shown, setShown] = useState(open);
+  const panelRef = useRef<HTMLElement | null>(null);
+  const onCloseRef = useRef(onClose);
+
+  useEffect(() => {
+    onCloseRef.current = onClose;
+  }, [onClose]);
+
+  useEffect(() => {
+    if (open) {
+      queueMicrotask(() => setRendered(true));
+      // Double rAF: paint the off-canvas frame before transitioning in.
+      let inner = 0;
+      const outer = requestAnimationFrame(() => {
+        inner = requestAnimationFrame(() => setShown(true));
+      });
+      return () => {
+        cancelAnimationFrame(outer);
+        cancelAnimationFrame(inner);
+      };
+    }
+    queueMicrotask(() => setShown(false));
+    const timeout = window.setTimeout(() => setRendered(false), durationMs);
+    return () => window.clearTimeout(timeout);
+  }, [open, durationMs]);
+
+  // Escape to close, body scroll-lock, and focus inside while open.
+  useEffect(() => {
+    if (!open) return;
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') onCloseRef.current();
+    };
+    window.addEventListener('keydown', onKeyDown);
+
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+
+    const previouslyFocused =
+      document.activeElement instanceof HTMLElement
+        ? document.activeElement
+        : null;
+    const frame = requestAnimationFrame(() => panelRef.current?.focus());
+
+    return () => {
+      window.removeEventListener('keydown', onKeyDown);
+      document.body.style.overflow = previousOverflow;
+      cancelAnimationFrame(frame);
+      if (previouslyFocused?.isConnected) previouslyFocused.focus();
+    };
+  }, [open]);
+
+  if (!rendered) return null;
+
+  return (
+    <div data-test={dataTest} className="no-print fixed inset-0 z-50 lg:hidden">
+      <button
+        type="button"
+        tabIndex={-1}
+        className={cn(
+          'absolute inset-0 bg-black/25 backdrop-blur-sm motion-safe:transition-opacity motion-safe:ease-spring-subtle',
+          shown ? 'opacity-100' : 'opacity-0',
+        )}
+        style={{ transitionDuration: `${durationMs}ms` }}
+        onClick={onClose}
+        aria-label={backdropLabel}
+      />
+      <aside
+        ref={panelRef}
+        role="dialog"
+        aria-modal="true"
+        aria-label={dialogLabel}
+        tabIndex={-1}
+        data-test={panelDataTest}
+        className={cn(
+          'suite-scroll-lock relative flex h-full w-[86%] max-w-64 flex-col overflow-hidden bg-ph-surface shadow-xl outline-none motion-safe:transition-transform motion-safe:ease-spring-fast',
+          side === 'right' && 'ml-auto',
+          shown
+            ? 'translate-x-0'
+            : side === 'right'
+              ? 'translate-x-full'
+              : '-translate-x-full',
+          panelClassName,
+        )}
+        style={{ transitionDuration: `${durationMs}ms` }}
+      >
+        {showCloseButton ? (
+          <div className="flex h-14 shrink-0 items-center justify-end border-b border-ph-border px-3">
+            <button
+              type="button"
+              onClick={onClose}
+              className="-mr-1.5 inline-flex h-11 w-11 items-center justify-center rounded-lg text-ph-mutedtext transition-colors hover:bg-ph-muted hover:text-ph-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-brand"
+              aria-label={closeLabel}
+            >
+              <X className="h-4 w-4" aria-hidden />
+            </button>
+          </div>
+        ) : null}
+        {children}
+      </aside>
+    </div>
+  );
+}

package/src/suite/components/suite-mobile-header.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+import type { ComponentType, ReactNode } from 'react';
+import { Menu } from 'iconoir-react';
+
+import { cn } from '../lib/cn';
+
+type SuiteMenuIcon = ComponentType<{ className?: string; 'aria-hidden'?: boolean | 'true' | 'false' }>;
+
+/**
+ * Suite mobile app bar — the standardized top of every app on phone/tablet.
+ * Fixed slot order across the suite: [menu] [brand/context] … [actions].
+ * Translucent + blurred (suite-skin.css `.suite-app-bar`), safe-area aware,
+ * 44px minimum touch targets. Desktop chrome (rail/top bar) stays app-side.
+ */
+export function SuiteMobileHeader({
+  onMenuClick,
+  menuIcon: MenuIcon = Menu,
+  title,
+  actions,
+  menuLabel = 'Open navigation',
+  menuDataTest,
+  dataTest,
+  className,
+}: {
+  /** Optional — omit to drop the hamburger (bottom-nav apps don't need one). */
+  onMenuClick?: () => void;
+  /** Leading button glyph — defaults to Menu; browse-style drawers can swap it. */
+  menuIcon?: SuiteMenuIcon;
+  /** Brand/context slot — app mark + title or app switcher. */
+  title?: ReactNode;
+  /** Right-hand slot — search, bell, avatar (keep this order). */
+  actions?: ReactNode;
+  menuLabel?: string;
+  menuDataTest?: string;
+  dataTest?: string;
+  className?: string;
+}) {
+  return (
+    <header
+      data-test={dataTest}
+      className={cn(
+        'suite-app-bar no-print sticky top-0 z-30 flex min-h-[56px] shrink-0 items-center gap-1 border-b border-ph-border px-2 lg:hidden',
+        className,
+      )}
+    >
+      {onMenuClick ? (
+        <button
+          type="button"
+          data-test={menuDataTest}
+          className="suite-press inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-xl text-ph-ink transition-colors hover:bg-ph-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-brand"
+          onClick={onMenuClick}
+          aria-label={menuLabel}
+        >
+          <MenuIcon className="h-5 w-5" aria-hidden />
+        </button>
+      ) : null}
+      <div
+        className={cn(
+          'flex min-w-0 flex-1 items-center',
+          !onMenuClick && 'pl-2',
+        )}
+      >
+        {title}
+      </div>
+      {actions ? (
+        <div className="flex shrink-0 items-center gap-1">{actions}</div>
+      ) : null}
+    </header>
+  );
+}