@zyncat/ui 0.8.0

package/src/components/internal/icon/Icon.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import './icon.css';
+import {
+  ArrowUp,
+  Calendar,
+  CalendarDot,
+  CaretDown,
+  CaretLeft,
+  CaretRight,
+  CaretUp,
+  Check,
+  CheckCircle,
+  Clock,
+  Globe,
+  Info,
+  MagnifyingGlass,
+  Warning,
+  WarningCircle,
+  X,
+} from '@phosphor-icons/react';
+import type { IconWeight } from '@phosphor-icons/react';
+import { cx } from '../utils/cx';
+
+type Glyph = typeof X;
+
+const REGISTRY = {
+  x: X,
+  close: X,
+  check: Check,
+  'arrow-up': ArrowUp,
+  'caret-up': CaretUp,
+  'caret-down': CaretDown,
+  'caret-left': CaretLeft,
+  'caret-right': CaretRight,
+  'magnifying-glass': MagnifyingGlass,
+  calendar: Calendar,
+  'calendar-dot': CalendarDot,
+  clock: Clock,
+  globe: Globe,
+  info: Info,
+  warning: Warning,
+  'warning-circle': WarningCircle,
+  'check-circle': CheckCircle,
+} satisfies Record<string, Glyph>;
+
+export type IconName = keyof typeof REGISTRY;
+export type IconSize = 'sm' | 'md' | 'lg';
+export type { IconWeight };
+
+export interface IconProps {
+  name: IconName;
+  size?: IconSize;
+  weight?: IconWeight;
+  label?: string;
+  /** Extra class(es) merged onto the root element. */
+  className?: string;
+}
+
+const SIZE_PX: Record<IconSize, number> = { sm: 16, md: 20, lg: 24 };
+
+export function Icon({ name, size = 'md', weight = 'regular', label, className = '' }: IconProps) {
+  const Glyph = REGISTRY[name];
+  const a11y = label ? { role: 'img', 'aria-label': label } : { 'aria-hidden': true };
+  return <Glyph size={SIZE_PX[size]} weight={weight} className={cx('icon', className)} {...a11y} />;
+}

package/src/components/internal/icon/IconSlot.tsx

@@ -0,0 +1,10 @@
+'use client';
+
+import './icon.css';
+import type { ReactNode } from 'react';
+import type { IconSize } from './Icon';
+
+export function IconSlot({ size = 'md', children }: { size?: IconSize; children?: ReactNode }) {
+  if (!children) return null;
+  return <span className={`icon-slot icon-slot--${size}`}>{children}</span>;
+}

package/src/components/internal/icon/icon.css

@@ -0,0 +1,33 @@
+/* Icon - base layout (inline/flex seating); size and color come from props/tokens. */
+
+.icon {
+  flex: none;
+  vertical-align: middle;
+}
+
+/* icon-slot - locks a consumer icon node to the token size and currentColor. */
+.icon-slot {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  color: currentColor;
+}
+.icon-slot--sm {
+  width: var(--icon-sm);
+  height: var(--icon-sm);
+}
+.icon-slot--md {
+  width: var(--icon-md);
+  height: var(--icon-md);
+}
+.icon-slot--lg {
+  width: var(--icon-lg);
+  height: var(--icon-lg);
+}
+.icon-slot > svg,
+.icon-slot > img {
+  width: 100%;
+  height: 100%;
+  display: block;
+}

package/src/components/internal/overlay/focus.ts

@@ -0,0 +1,68 @@
+'use client';
+
+import { useEffect, type RefObject } from 'react';
+import { type OverlayEntry, ovIsTop, ovInOverlayAbove } from './layer';
+
+export function useReturnFocus(nodeRef: RefObject<HTMLElement>) {
+  useEffect(() => {
+    const prev = document.activeElement as HTMLElement | null;
+    return () => {
+      const a = document.activeElement;
+      const orphaned = !a || a === document.body || (nodeRef.current && nodeRef.current.contains(a));
+      if (orphaned && prev && prev.isConnected && typeof prev.focus === 'function') {
+        queueMicrotask(() => {
+          if (prev.isConnected) prev.focus({ preventScroll: true });
+        });
+      }
+    };
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+}
+
+const OV_FOCUSABLE =
+  'a[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), ' +
+  'select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
+export function useFocusTrap({ panelRef, entry }: { panelRef: RefObject<HTMLElement>; entry: OverlayEntry }) {
+  useEffect(() => {
+    const panel = panelRef.current;
+    if (!panel) return undefined;
+    const focusables = () =>
+      Array.from(panel.querySelectorAll<HTMLElement>(OV_FOCUSABLE)).filter(
+        (el) => el.offsetParent !== null || el === document.activeElement,
+      );
+
+    const seed = panel.querySelector<HTMLElement>('[autofocus], [data-autofocus]') || focusables()[0] || panel;
+    seed.focus({ preventScroll: true });
+
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key !== 'Tab') return;
+      const f = focusables();
+      if (f.length === 0) {
+        e.preventDefault();
+        return;
+      }
+      const cur = document.activeElement;
+      if (e.shiftKey) {
+        if (cur === f[0] || cur === panel) {
+          e.preventDefault();
+          f[f.length - 1].focus();
+        }
+      } else if (cur === f[f.length - 1]) {
+        e.preventDefault();
+        f[0].focus();
+      }
+    };
+    const onFocusIn = (e: FocusEvent) => {
+      if (panel.contains(e.target as Node)) return;
+      if (!ovIsTop(entry) || ovInOverlayAbove(entry, e.target)) return;
+      (focusables()[0] || panel).focus({ preventScroll: true });
+    };
+
+    panel.addEventListener('keydown', onKeyDown);
+    document.addEventListener('focusin', onFocusIn);
+    return () => {
+      panel.removeEventListener('keydown', onKeyDown);
+      document.removeEventListener('focusin', onFocusIn);
+    };
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+}

package/src/components/internal/overlay/layer.tsx

@@ -0,0 +1,149 @@
+'use client';
+
+import {
+  cloneElement,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  type ReactElement,
+  type ReactNode,
+  type Ref,
+  type RefObject,
+} from 'react';
+import { createPortal } from 'react-dom';
+
+interface OverlayEntry {
+  contains: (t: EventTarget | null) => boolean;
+  isDismissible: () => boolean;
+  requestClose: () => void;
+  _dismissible?: boolean;
+  _close?: () => void;
+}
+
+const ovStack: OverlayEntry[] = [];
+
+function ovOnDocKeyDown(e: KeyboardEvent) {
+  if (e.key !== 'Escape' || e.defaultPrevented || ovStack.length === 0) return;
+  const top = ovStack[ovStack.length - 1];
+  if (!top.isDismissible()) return;
+  e.preventDefault();
+  top.requestClose();
+}
+
+function ovIsTop(entry: OverlayEntry) {
+  return ovStack[ovStack.length - 1] === entry;
+}
+
+function ovInOverlayAbove(entry: OverlayEntry, target: EventTarget | null) {
+  const i = ovStack.indexOf(entry);
+  return i >= 0 && ovStack.slice(i + 1).some((e) => e.contains(target));
+}
+
+function useOverlayEntry({
+  nodeRef,
+  dismissible,
+  requestClose,
+}: {
+  nodeRef: RefObject<HTMLElement>;
+  dismissible: boolean;
+  requestClose: () => void;
+}): OverlayEntry {
+  const ref = useRef<OverlayEntry>(null);
+  if (!ref.current) {
+    ref.current = {
+      contains: (t) => Boolean(nodeRef.current && nodeRef.current.contains(t as Node)),
+      isDismissible: () => ref.current._dismissible,
+      requestClose: () => ref.current._close(),
+    };
+  }
+  ref.current._dismissible = dismissible;
+  ref.current._close = requestClose;
+
+  useLayoutEffect(() => {
+    const entry = ref.current;
+    if (ovStack.length === 0) document.addEventListener('keydown', ovOnDocKeyDown);
+    ovStack.push(entry);
+    if (nodeRef.current) nodeRef.current.style.zIndex = 'calc(var(--layer-overlay) + ' + (ovStack.length - 1) + ')';
+    return () => {
+      const i = ovStack.indexOf(entry);
+      if (i >= 0) ovStack.splice(i, 1);
+      if (ovStack.length === 0) document.removeEventListener('keydown', ovOnDocKeyDown);
+    };
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return ref.current;
+}
+
+function useOutsidePress({
+  entry,
+  refs,
+  enabled,
+  onPress,
+}: {
+  entry: OverlayEntry;
+  refs: RefObject<HTMLElement>[];
+  enabled: boolean;
+  onPress: () => void;
+}) {
+  const latest = useRef<{ enabled: boolean; onPress: () => void }>(null);
+  latest.current = { enabled, onPress };
+  useEffect(() => {
+    const onDown = (e: PointerEvent) => {
+      if (!latest.current.enabled) return;
+      const t = e.target;
+      if (refs.some((r) => r.current && r.current.contains(t as Node))) return;
+      if (ovInOverlayAbove(entry, t)) return;
+      latest.current.onPress();
+    };
+    document.addEventListener('pointerdown', onDown, true);
+    return () => document.removeEventListener('pointerdown', onDown, true);
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+}
+
+function ovCloneTrigger(
+  trigger: ReactElement | null,
+  {
+    open,
+    onPress,
+    panelId,
+    haspopup,
+    triggerRef,
+  }: { open: boolean; onPress: () => void; panelId: string; haspopup: string; triggerRef: RefObject<HTMLElement> },
+): ReactElement | null {
+  if (!trigger) return null;
+  const own = trigger.props as { onClick?: (...args: unknown[]) => void };
+  const ownRef = (trigger as ReactElement & { ref?: Ref<HTMLElement> }).ref;
+  return cloneElement(trigger, {
+    'aria-haspopup': haspopup,
+    'aria-expanded': open,
+    'aria-controls': open ? panelId : undefined,
+    onClick: (...args: unknown[]) => {
+      own.onClick?.(...args);
+      onPress();
+    },
+    ref: (node: HTMLElement | null) => {
+      triggerRef.current = node;
+      if (typeof ownRef === 'function') ownRef(node);
+      else if (ownRef) ownRef.current = node;
+    },
+  } as Partial<typeof trigger.props>);
+}
+
+function OverlayPortal({ children }: { children: ReactNode }) {
+  const hostRef = useRef<HTMLDivElement | null>(null);
+  if (typeof document !== 'undefined' && !hostRef.current) {
+    hostRef.current = document.createElement('div');
+    hostRef.current.setAttribute('data-overlay-root', '');
+  }
+  useLayoutEffect(() => {
+    const el = hostRef.current;
+    if (!el) return;
+    document.body.appendChild(el);
+    return () => el.remove();
+  }, []);
+  if (!hostRef.current) return null;
+  return createPortal(children, hostRef.current);
+}
+
+export { ovIsTop, ovInOverlayAbove, useOverlayEntry, useOutsidePress, ovCloneTrigger, OverlayPortal };
+export type { OverlayEntry };

package/src/components/internal/overlay/modal.tsx

@@ -0,0 +1,141 @@
+'use client';
+
+import './overlay.css';
+import { useEffect, useRef, type ReactNode, type RefObject } from 'react';
+import { animate, type Layer, type Playback } from '../../../engine';
+import { useMotion, run, type MotionSpec, type MotionSpecs } from '../../../motion/use-motion';
+import { UIMotion } from '../../../tokens/motion-tokens';
+import { useOverlayEntry } from './layer';
+import { useReturnFocus, useFocusTrap } from './focus';
+import { cx } from '../utils/cx';
+
+const SM = UIMotion;
+
+let ovLocks = 0;
+let ovSavedOverflow = '';
+let ovSavedPad = '';
+function useScrollLock() {
+  useEffect(() => {
+    if (++ovLocks === 1) {
+      const body = document.body;
+      const gutter = window.innerWidth - document.documentElement.clientWidth;
+      ovSavedOverflow = body.style.overflow;
+      ovSavedPad = body.style.paddingRight;
+      body.style.overflow = 'hidden';
+      if (gutter > 0) body.style.paddingRight = (parseFloat(getComputedStyle(body).paddingRight) || 0) + gutter + 'px';
+    }
+    return () => {
+      if (--ovLocks === 0) {
+        document.body.style.overflow = ovSavedOverflow;
+        document.body.style.paddingRight = ovSavedPad;
+      }
+    };
+  }, []);
+}
+
+let ovInertCount = 0;
+const ovInerted = new Set<HTMLElement>();
+function useInertOutside() {
+  useEffect(() => {
+    if (++ovInertCount === 1) {
+      for (const el of Array.from(document.body.children) as HTMLElement[]) {
+        if (el.hasAttribute('data-overlay-root') || el.tagName === 'SCRIPT' || el.tagName === 'STYLE' || el.inert)
+          continue;
+        el.inert = true;
+        ovInerted.add(el);
+      }
+    }
+    return () => {
+      if (--ovInertCount === 0) {
+        ovInerted.forEach((el) => {
+          el.inert = false;
+        });
+        ovInerted.clear();
+      }
+    };
+  }, []);
+}
+
+const ovScrimTiming = {
+  open: { duration: SM.dur.slow, ease: SM.ease.entrance },
+  close: { duration: SM.dur.base, ease: SM.ease.standard },
+};
+
+function OverlayScrim({
+  dismissible,
+  onPress,
+  scrimRef,
+}: {
+  dismissible: boolean;
+  onPress: () => void;
+  scrimRef: RefObject<HTMLDivElement | null>;
+}) {
+  const down = useRef(false);
+  return (
+    <div
+      ref={scrimRef}
+      className="overlay-scrim"
+      aria-hidden="true"
+      onPointerDown={(e) => {
+        down.current = e.target === e.currentTarget;
+      }}
+      onClick={(e) => {
+        if (dismissible && down.current && e.target === e.currentTarget) onPress();
+      }}
+    ></div>
+  );
+}
+
+export function ModalShell({
+  layerClass,
+  panelClass,
+  panelId,
+  dismissible,
+  requestClose,
+  panelRef: externalPanelRef = null,
+  panelProps = {},
+  animate: animateSpec,
+  exit,
+  children,
+}: {
+  layerClass: string;
+  panelClass: string;
+  panelId: string;
+  dismissible: boolean;
+  requestClose: () => void;
+  panelRef?: RefObject<HTMLElement> | null;
+  panelProps?: Record<string, any>;
+  children: ReactNode;
+} & MotionSpecs) {
+  const layerRef = useRef<HTMLDivElement>(null);
+  const scrimRef = useRef<HTMLDivElement>(null);
+  const internalPanelRef = useRef<HTMLElement>(null);
+  const panelRef = externalPanelRef || internalPanelRef;
+  const entry = useOverlayEntry({ nodeRef: layerRef, dismissible, requestClose });
+
+  const withScrim = (dir: 'open' | 'close', panelSpec: MotionSpec | undefined) => (): Playback[] => {
+    const fade: Layer = { opacity: dir === 'open' ? [0, 1] : [0], timing: ovScrimTiming[dir] };
+    const plays = scrimRef.current ? [animate(scrimRef.current, fade)] : [];
+    return panelRef.current ? plays.concat(run(panelSpec, panelRef.current)) : plays;
+  };
+
+  useMotion(layerRef, { animate: withScrim('open', animateSpec), exit: withScrim('close', exit) });
+  useScrollLock();
+  useInertOutside();
+  useReturnFocus(layerRef);
+  useFocusTrap({ panelRef, entry });
+  return (
+    <div ref={layerRef} className={'overlay-layer ' + layerClass}>
+      <OverlayScrim dismissible={dismissible} onPress={requestClose} scrimRef={scrimRef} />
+      <div
+        id={panelId}
+        tabIndex={-1}
+        {...panelProps}
+        ref={panelRef as RefObject<HTMLDivElement>}
+        className={cx('overlay-panel', panelClass, panelProps.className)}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}

package/src/components/internal/overlay/overlay.css

@@ -0,0 +1,23 @@
+/* overlay.css - the modal shell geometry shared by dialog and sheet: a fixed
+   full-viewport layer, the scrim filling it, and the grid cell the panel
+   mounts in (min 0 + max 100% give a scroll constraint chain). Per-component
+   placement lives with each consumer (dialog.css, sheet.css); the popover
+   paints itself entirely from popover.css. */
+.overlay-layer {
+  position: fixed;
+  inset: 0;
+  display: grid;
+}
+.overlay-scrim {
+  position: absolute;
+  inset: 0;
+  background: var(--bg-overlay);
+}
+
+.overlay-panel {
+  position: relative;
+  display: grid;
+  outline: none;
+  min-width: 0;
+  min-height: 0;
+}

package/src/components/internal/overlay/position.ts

@@ -0,0 +1,103 @@
+'use client';
+
+import { useLayoutEffect, type RefObject } from 'react';
+import { tokenPx } from '../utils/token-px';
+
+interface UseAnchorPositionProps {
+  side: 'top' | 'bottom' | 'left' | 'right';
+  align: 'start' | 'center' | 'end';
+  arrow: boolean;
+  triggerRef: RefObject<HTMLElement>;
+  panelRef: RefObject<HTMLElement>;
+}
+
+export function useAnchorPosition({ side, align, arrow, triggerRef, panelRef }: UseAnchorPositionProps) {
+  useLayoutEffect(() => {
+    const place = () => {
+      const t = triggerRef.current;
+      const p = panelRef.current;
+      if (!t || !p) return;
+
+      const r = t.getBoundingClientRect();
+      const pw = p.offsetWidth;
+      const ph = p.offsetHeight;
+
+      const edge = tokenPx('--space-2');
+
+      const gap = arrow ? tokenPx('--space-2') + 3 : 0;
+
+      const vw = window.innerWidth;
+      const vh = window.innerHeight;
+
+      const room: Record<string, number> = { top: r.top, bottom: vh - r.bottom, left: r.left, right: vw - r.right };
+
+      const opposite: Record<string, 'top' | 'bottom' | 'left' | 'right'> = {
+        top: 'bottom',
+        bottom: 'top',
+        left: 'right',
+        right: 'left',
+      };
+
+      const vertical = side === 'top' || side === 'bottom';
+
+      let s = side;
+      if (room[s] < (vertical ? ph : pw) + gap && room[opposite[s]] > room[s]) {
+        s = opposite[s];
+      }
+
+      let x: number;
+      let y: number;
+
+      if (vertical) {
+        y = s === 'top' ? r.top - ph - gap : r.bottom + gap;
+
+        x = align === 'start' ? r.left : align === 'end' ? r.right - pw : r.left + (r.width - pw) / 2;
+
+        x = Math.min(Math.max(x, edge), vw - pw - edge);
+
+        y = Math.max(Math.min(y, vh - ph - edge), edge);
+      } else {
+        x = s === 'left' ? r.left - pw - gap : r.right + gap;
+
+        y = align === 'start' ? r.top : align === 'end' ? r.bottom - ph : r.top + (r.height - ph) / 2;
+
+        y = Math.min(Math.max(y, edge), vh - ph - edge);
+        x = Math.max(Math.min(x, vw - pw - edge), edge);
+      }
+
+      p.style.left = Math.round(x) + 'px';
+      p.style.top = Math.round(y) + 'px';
+
+      p.setAttribute('data-side', s);
+      p.setAttribute('data-align', align);
+
+      if (arrow) {
+        if (vertical) {
+          p.style.setProperty(
+            '--overlay-arrow-x',
+            Math.round(Math.min(Math.max(r.left + r.width / 2 - x, 12), pw - 12)) + 'px',
+          );
+        } else {
+          p.style.setProperty(
+            '--overlay-arrow-y',
+            Math.round(Math.min(Math.max(r.top + r.height / 2 - y, 12), ph - 12)) + 'px',
+          );
+        }
+      }
+    };
+
+    place();
+
+    window.addEventListener('scroll', place, true);
+    window.addEventListener('resize', place);
+
+    const ro = new ResizeObserver(place);
+    ro.observe(panelRef.current!);
+
+    return () => {
+      window.removeEventListener('scroll', place, true);
+      window.removeEventListener('resize', place);
+      ro.disconnect();
+    };
+  }, [side, align, arrow]); // eslint-disable-line react-hooks/exhaustive-deps
+}

package/src/components/internal/utils/cx.ts

@@ -0,0 +1,3 @@
+export function cx(...parts: Array<string | false | null | undefined>): string {
+  return parts.filter(Boolean).join(' ');
+}

package/src/components/internal/utils/token-px.ts

@@ -0,0 +1,8 @@
+export function tokenPx(token: string, fallback = 0): number {
+  if (typeof document === 'undefined') return fallback;
+  const root = document.documentElement;
+  const v = getComputedStyle(root).getPropertyValue(token).trim();
+  const n = parseFloat(v);
+  if (Number.isNaN(n)) return fallback;
+  return v.endsWith('rem') ? n * parseFloat(getComputedStyle(root).fontSize) : n;
+}