@zyncat/ui 0.8.0

package/src/components/composites/select/select.css

@@ -0,0 +1,416 @@
+/* Select family - <Select> (single) + <MultiSelect>, one .select__* vocabulary (no native <select>). */
+
+.select {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  font-family: var(--font-sans);
+}
+
+.select__trigger {
+  appearance: none;
+  margin: 0;
+  font-family: inherit;
+  cursor: pointer;
+  text-align: left;
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  width: 100%;
+  height: var(--control-height);
+  padding: 0 var(--space-3);
+  background: var(--bg-inset);
+  border: var(--border-hairline) solid var(--border-default);
+  border-radius: var(--radius-md);
+  color: var(--text-body);
+  font-size: var(--size-body);
+  line-height: var(--leading-body);
+  font-weight: var(--weight-regular);
+  transition:
+    color var(--duration-base) var(--ease-standard),
+    background-color var(--duration-base) var(--ease-standard),
+    border-color var(--duration-base) var(--ease-standard),
+    box-shadow var(--duration-base) var(--ease-standard);
+}
+.select__trigger:hover {
+  border-color: var(--border-strong);
+  background-color: var(--gray-wash-strong);
+}
+.select__trigger:focus-visible {
+  outline: none;
+  border-color: var(--accent);
+  background: var(--bg-surface);
+  box-shadow: var(--ring-accent);
+}
+.select[data-open='true'] .select__trigger {
+  border-color: var(--accent);
+  background: var(--bg-surface);
+  box-shadow: var(--ring-accent);
+}
+
+.select[data-size='sm'] .select__trigger {
+  height: var(--control-height-sm);
+  padding: 0 var(--space-2);
+  font-size: var(--size-caption);
+  line-height: var(--leading-caption);
+  gap: var(--space-1);
+}
+.select[data-size='lg'] .select__trigger {
+  height: var(--control-height-lg);
+  padding: 0 var(--space-4);
+}
+
+.select[data-invalid='true'] .select__trigger {
+  border-color: var(--danger);
+}
+.select[data-invalid='true'] .select__trigger:focus-visible,
+.select[data-invalid='true'][data-open='true'] .select__trigger {
+  border-color: var(--danger);
+  box-shadow: var(--ring-danger);
+}
+
+.select[data-disabled='true'] .select__trigger {
+  cursor: not-allowed;
+  background: var(--bg-muted);
+  border-color: var(--border-subtle);
+  color: var(--text-disabled);
+  box-shadow: none;
+}
+.select[data-disabled='true'] .select__value,
+.select[data-disabled='true'] .select__leading,
+.select[data-disabled='true'] .select__caret {
+  color: var(--text-disabled);
+}
+
+.select[data-loading='true'] .select__value {
+  color: var(--text-muted);
+}
+
+.select__leading {
+  display: inline-flex;
+  flex: 0 0 auto;
+  font-size: var(--icon-sm);
+  color: var(--text-muted);
+}
+.select__value {
+  flex: 1 1 auto;
+  min-width: 0;
+  color: var(--text-body);
+}
+.select__value[data-placeholder='true'] {
+  color: var(--text-disabled);
+}
+.select__caret {
+  display: inline-flex;
+  flex: 0 0 auto;
+  font-size: var(--icon-sm);
+  color: var(--text-subtle);
+  transition:
+    transform var(--duration-base) var(--ease-entrance),
+    color var(--duration-fast) var(--ease-standard);
+}
+.select[data-open='true'] .select__caret {
+  transform: rotate(180deg);
+  color: var(--text-muted);
+}
+.select__count {
+  flex: 0 0 auto;
+  font-family: var(--font-mono);
+  font-size: var(--size-micro);
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+  color: var(--text-accent);
+  background: var(--accent-wash);
+  padding: var(--space-px) var(--space-1);
+  border-radius: var(--radius-sm);
+}
+
+.select__value,
+.select__option-label,
+.select__option-desc {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Menu enter/exit are Motion-owned inline styles (selectMenuVariants); this sheet only sets the look + transform-origin. */
+.select__menu {
+  position: fixed;
+  margin: 0;
+  inset: auto; /* JS sets top/left/min-width - anchor() needs the top layer, which we don't use */
+  z-index: var(
+    --layer-overlay
+  ); /* base of the overlay band (tokens/layers.css) - plain React-owned node, not the top layer */
+  width: max-content;
+  max-width: min(22rem, 92vw);
+  background: var(--bg-surface-raised);
+  border: var(--border-hairline) solid var(--border-default);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  padding: var(--space-1);
+  transform-origin: top left;
+}
+/* flipped above the trigger (data-side from useAnchorPosition) - scale from the anchored edge */
+.select__menu[data-side='top'] {
+  transform-origin: bottom left;
+}
+
+.select__search {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2);
+  margin: 0 0 var(--space-1);
+  border-bottom: var(--border-hairline) solid var(--border-subtle);
+  font-size: var(--icon-sm);
+  color: var(--text-subtle);
+}
+.select__search-input {
+  appearance: none;
+  border: none;
+  outline: none;
+  background: transparent;
+  width: 100%;
+  padding: 0;
+  font-family: var(--font-sans);
+  font-size: var(--size-body);
+  line-height: var(--leading-body);
+  color: var(--text-body);
+}
+.select__search-input::placeholder {
+  color: var(--text-disabled);
+}
+
+/* Row-height motion is the Collapse primitive, not this scroll container.
+   position: relative anchors the glide pill (a single absolute child) to the scrolled content. */
+.select__list {
+  position: relative;
+  max-height: 16.5rem;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scroll-behavior: smooth;
+  scrollbar-width: none;
+}
+.select__list::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  display: none;
+}
+
+.select__group-label {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: var(--bg-surface-raised);
+  padding: var(--space-2) var(--space-2) var(--space-1);
+  font: var(--type-micro);
+  text-transform: uppercase;
+  letter-spacing: var(--tracking-caps);
+  color: var(--text-subtle);
+}
+.select__group + .select__group .select__group-label {
+  border-top: var(--border-hairline) solid var(--border-subtle);
+  margin-top: var(--space-1);
+}
+
+.select__option {
+  padding: var(--option-padding);
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  color: var(--text-body);
+  user-select: none;
+  transition:
+    background-color var(--duration-base) var(--ease-standard),
+    color var(--duration-base) var(--ease-standard);
+}
+
+.select__option[data-size='sm'] {
+  --option-padding: var(--space-1);
+}
+
+.select__option[data-size='md'] {
+  --option-padding: var(--space-2);
+}
+
+.select__option[data-size='lg'] {
+  --option-padding: var(--space-4);
+}
+
+.select__option-icon {
+  display: inline-flex;
+  flex: 0 0 auto;
+  font-size: var(--icon-sm);
+  color: var(--text-muted);
+}
+.select__option-text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-px);
+  min-width: 0;
+  flex: 1 1 auto;
+}
+.select__option-label {
+  font-size: var(--size-body);
+  line-height: var(--leading-body);
+}
+.select__option-desc {
+  font: var(--type-caption);
+  color: var(--text-subtle);
+}
+.select__option-check {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  min-width: var(--icon-sm);
+  font-size: var(--icon-sm);
+  color: var(--accent);
+  opacity: 0;
+  transition: var(--transition-opacity);
+}
+
+/* Hover pill - one persistent fill in the list (../motion/glide) that travels to the active row and
+   animates its real size, so it's never clipped by the searchable rows' collapse and never scales.
+   GlidePill sets x/y/width/height inline; the option (position: relative) paints above it. */
+.select__glide {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 0;
+  border-radius: var(--radius-md);
+  background: var(--neutral-wash);
+  pointer-events: none;
+}
+
+/* Active row: the pill carries the fill; here we only lift the text. Selected rules follow, so source order wins. */
+.select__option[data-active='true'] {
+  color: var(--text-strong);
+}
+.select__option[data-active='true'] .select__option-icon {
+  color: var(--text-body);
+}
+.select__option[data-selected='true'] {
+  background-color: var(--accent-wash);
+}
+.select__option[data-selected='true'] .select__option-label {
+  color: var(--text-accent);
+  font-weight: var(--weight-medium);
+}
+.select__option[data-selected='true'] .select__option-icon {
+  color: var(--text-accent);
+}
+.select__option[data-selected='true'] .select__option-check {
+  opacity: 1;
+}
+.select__option[data-disabled='true'] {
+  cursor: not-allowed;
+  color: var(--text-disabled);
+}
+.select__option[data-disabled='true'] .select__option-icon {
+  color: var(--text-disabled);
+}
+
+/* check lands with a spring when a row becomes selected (remounts via React key) */
+.select__option[data-selected='true'] .select__option-check :is(i, svg) {
+  animation: select-check-in var(--duration-base) var(--ease-spring);
+}
+@keyframes select-check-in {
+  from {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* Multi-select: the reused Checkbox box IS the indicator - no row fill (avoid double-encoding); strip the .cbx standalone chrome. */
+.select__menu[data-multiple='true'] .select__option-check {
+  opacity: 1;
+}
+.select__menu[data-multiple='true'] .select__option .cbx {
+  padding: 0;
+  gap: 0;
+  pointer-events: none;
+}
+.select__menu[data-multiple='true'] .select__option .cbx__box {
+  margin-top: 0;
+}
+
+/* Row owns the press (.cbx is pointer-events:none): dip the box on press - explicit transform,
+   so a checked box (whose resting scale would otherwise dilute --press) still scales from center. */
+.select__menu[data-multiple='true'] .select__option:active:not([data-disabled='true']) .cbx__box {
+  transform: scale(0.86);
+}
+.select__menu[data-multiple='true'] .select__option[data-selected='true'] {
+  background-color: transparent;
+}
+
+.select__empty {
+  padding: var(--space-4) var(--space-3);
+  text-align: center;
+  font: var(--type-caption);
+  color: var(--text-subtle);
+}
+
+.select__loading {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  padding: var(--space-1);
+}
+.select__skeleton {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2);
+}
+.select__skeleton-dot {
+  width: var(--icon-sm);
+  height: var(--icon-sm);
+  border-radius: var(--radius-full);
+  background: var(--bg-muted);
+  flex: 0 0 auto;
+}
+.select__skeleton-bar {
+  height: 0.5rem;
+  border-radius: var(--radius-full);
+  background: var(--bg-muted);
+  flex: 1 1 auto;
+  max-width: 11rem;
+}
+.select__skeleton:nth-child(2) .select__skeleton-bar {
+  max-width: 7rem;
+}
+.select__skeleton:nth-child(3) .select__skeleton-bar {
+  max-width: 9rem;
+}
+.select__loading [data-pulse] {
+  animation: select-pulse var(--duration-spin) var(--ease-standard) infinite alternate;
+}
+@keyframes select-pulse {
+  from {
+    opacity: 0.55;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .select__list {
+    scroll-behavior: auto;
+  }
+  .select__option-check :is(i, svg),
+  .select__loading [data-pulse] {
+    animation: none;
+  }
+  .select__loading [data-pulse] {
+    opacity: 0.7;
+  }
+}

package/src/components/composites/sheet/Sheet.tsx

@@ -0,0 +1,135 @@
+'use client';
+
+import './sheet.css';
+import { Fragment, useId, useRef, type HTMLAttributes, type ReactElement, type ReactNode } from 'react';
+import { animate, type Layer } from '../../../engine';
+import { Presence } from '../../../motion/presence';
+import type { MotionSpecs } from '../../../motion/use-motion';
+import { resolveMotionTiming } from '../../../motion/motion-timing';
+import type { DisableableAnimation } from '../../../motion/timing';
+import { useControllable } from '../../internal/hooks/use-controllable';
+import { ovCloneTrigger, OverlayPortal } from '../../internal/overlay/layer';
+import { ModalShell } from '../../internal/overlay/modal';
+import { useSheetDrag, sheetSpan } from './use-sheet-drag';
+import type { DataAttributes } from '../../../dom-props';
+
+const SHEET_TIMING = {
+  open: { duration: 'slow', ease: 'entrance' },
+  close: { duration: 'base', ease: 'exit' },
+} as const;
+
+export interface SheetProps {
+  /** Controlled open state. Omit to stay uncontrolled. */
+  open?: boolean;
+  /** Initial state when uncontrolled. Default false. */
+  defaultOpen?: boolean;
+  /** Fires whenever the open state changes. Pair with `open` for controlled use. */
+  onOpenChange?: (open: boolean) => void;
+
+  /** Cloned to open the sheet on click. */
+  trigger?: ReactElement | null;
+
+  /** Edge the sheet slides in from. Default 'right'. */
+  side?: 'right' | 'bottom';
+
+  /** Scrim/Esc dismissal + drag-to-edge. Default true. */
+  dismissible?: boolean;
+
+  /** Base id for the panel; drives the trigger's `aria-controls`. Auto-generated when omitted. */
+  id?: string;
+  /** Standard attributes (className, style, data-*, ...) forwarded to the sheet panel. */
+  htmlProps?: HTMLAttributes<HTMLDivElement> & DataAttributes;
+  /** Open/close timing - motion tokens only, or `null` to disable. @default open 'slow'/'entrance', close 'base'/'exit' */
+  animation?: DisableableAnimation;
+  /** The ENTIRE surface - paint AND semantics. Drive dismissal with `open`/`onOpenChange`. */
+  children: ReactNode;
+}
+
+function sheetSlide(slot: HTMLElement, side: 'right' | 'bottom', at: number[]): Layer {
+  const frames = at.map((ratio) => ratio * sheetSpan(slot, side));
+  return side === 'bottom' ? { y: frames } : { x: frames };
+}
+
+function SheetShell({
+  side,
+  panelId,
+  dismissible,
+  requestClose,
+  htmlProps,
+  animate,
+  exit,
+  children,
+}: {
+  side: 'right' | 'bottom';
+  panelId: string;
+  dismissible: boolean;
+  requestClose: () => void;
+  htmlProps?: HTMLAttributes<HTMLDivElement> & DataAttributes;
+  children: ReactNode;
+} & MotionSpecs) {
+  const panelRef = useRef<HTMLElement>(null);
+  const dragProps = useSheetDrag({ side, panelRef, enabled: dismissible, requestClose });
+  return (
+    <ModalShell
+      animate={animate}
+      exit={exit}
+      layerClass={'overlay-layer--sheet-' + side}
+      panelClass={'overlay-panel--sheet-' + side}
+      panelId={panelId}
+      dismissible={dismissible}
+      requestClose={requestClose}
+      panelRef={panelRef}
+      panelProps={{ ...htmlProps, ...dragProps }}
+    >
+      {children}
+    </ModalShell>
+  );
+}
+
+export function Sheet({
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  trigger = null,
+  side = 'right',
+  dismissible = true,
+  id,
+  htmlProps,
+  animation,
+  children,
+}: SheetProps) {
+  const [open, setOpen] = useControllable(controlledOpen, defaultOpen, onOpenChange);
+  const triggerRef = useRef<HTMLElement>(null);
+  const autoId = useId();
+  const panelId = id || 'sheet-' + autoId;
+  const close = () => setOpen(false);
+  const timings = resolveMotionTiming(animation, SHEET_TIMING);
+
+  return (
+    <Fragment>
+      {ovCloneTrigger(trigger, { open, onPress: () => setOpen(true), panelId, haspopup: 'dialog', triggerRef })}
+      <OverlayPortal>
+        <Presence>
+          {open && (
+            <SheetShell
+              key="sheet"
+              animate={(slot) => {
+                const play = animate(slot, { ...sheetSlide(slot, side, [1, 0]), timing: timings.open });
+                play.finished.then(() => play.stop());
+                return play;
+              }}
+              exit={(slot) => animate(slot, { ...sheetSlide(slot, side, [1]), timing: timings.close })}
+              side={side}
+              panelId={panelId}
+              dismissible={dismissible}
+              requestClose={close}
+              htmlProps={htmlProps}
+            >
+              {children}
+            </SheetShell>
+          )}
+        </Presence>
+      </OverlayPortal>
+    </Fragment>
+  );
+}

package/src/components/composites/sheet/sheet.css

@@ -0,0 +1,26 @@
+/* sheet.css - edge-docked placement on the modal shell: sheets dock flush (no layer padding); the panel spans the docked edge. */
+.overlay-layer--sheet-right {
+  align-items: stretch;
+  justify-items: end;
+}
+.overlay-panel--sheet-right {
+  height: 100%;
+  max-width: 100%;
+}
+
+.overlay-layer--sheet-bottom {
+  align-items: end;
+  justify-items: stretch;
+}
+.overlay-panel--sheet-bottom {
+  width: 100%;
+  max-height: 100%;
+}
+
+/* Drag stretch scales the panel away from the edge it is docked to. */
+.overlay-panel--sheet-right {
+  transform-origin: 100% 50%;
+}
+.overlay-panel--sheet-bottom {
+  transform-origin: 50% 100%;
+}

package/src/components/composites/sheet/use-sheet-drag.ts

@@ -0,0 +1,126 @@
+'use client';
+
+import { useEffect, useRef, type PointerEvent as ReactPointerEvent, type RefObject } from 'react';
+import { animate, startDrag, type PanInfo } from '../../../engine';
+import { UIMotion } from '../../../tokens/motion-tokens';
+
+const SM = UIMotion;
+
+const DISMISS_RATIO = 0.4;
+const DISMISS_VELOCITY = 500;
+const INTENT_PX = 4;
+const STRETCH_MAX = 0.06;
+
+function findScrollable(node: EventTarget | null, stop: HTMLElement | null): HTMLElement | null {
+  let el = node instanceof Element ? node : null;
+  while (el && el !== stop) {
+    const s = getComputedStyle(el);
+    if (
+      /(auto|scroll)/.test(s.overflowY + s.overflowX) &&
+      (el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth)
+    )
+      return el as HTMLElement;
+    el = el.parentElement;
+  }
+  return null;
+}
+
+function sheetScrim(panel: HTMLElement | null): HTMLElement | null {
+  return panel?.parentElement?.querySelector<HTMLElement>('.overlay-scrim') ?? null;
+}
+
+export function sheetSpan(panel: HTMLElement, side: 'right' | 'bottom'): number {
+  return side === 'bottom' ? panel.offsetHeight : panel.offsetWidth;
+}
+
+export function useSheetDrag({
+  side,
+  panelRef,
+  enabled,
+  requestClose,
+}: {
+  side: 'right' | 'bottom';
+  panelRef: RefObject<HTMLElement>;
+  enabled: boolean;
+  requestClose: () => void;
+}) {
+  const axis = side === 'bottom' ? 'y' : 'x';
+  const savedUserSelect = useRef<string | null>(null);
+
+  function suspendSelection() {
+    const sel = window.getSelection();
+    if (sel) sel.removeAllRanges();
+    savedUserSelect.current = document.body.style.userSelect;
+    document.body.style.userSelect = 'none';
+  }
+  function restoreSelection() {
+    if (savedUserSelect.current === null) return;
+    document.body.style.userSelect = savedUserSelect.current;
+    savedUserSelect.current = null;
+  }
+  useEffect(() => restoreSelection, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  function paint(el: HTMLElement, travel: number, stretch: number) {
+    const span = sheetSpan(el, side);
+    el.style.translate = axis === 'y' ? `0px ${travel}px` : `${travel}px 0px`;
+    el.style.scale = axis === 'y' ? `1 ${stretch}` : `${stretch} 1`;
+    const scrim = sheetScrim(el);
+    if (scrim) scrim.style.opacity = String(1 - Math.min(Math.max(travel / span, 0), 1));
+  }
+
+  function onPointerDown(e: ReactPointerEvent) {
+    if (e.button !== 0) return;
+    const startX = e.clientX,
+      startY = e.clientY;
+    const scrollable = findScrollable(e.target, panelRef.current);
+
+    const onMove = (ev: PointerEvent) => {
+      const dx = ev.clientX - startX,
+        dy = ev.clientY - startY;
+      if (Math.max(Math.abs(dx), Math.abs(dy)) < INTENT_PX) return;
+      cleanup();
+      const along = axis === 'y' ? dy : dx;
+      const cross = axis === 'y' ? dx : dy;
+      if (Math.abs(along) <= Math.abs(cross)) return;
+      if (scrollable) {
+        if (along < 0) return;
+        if (axis === 'y' ? scrollable.scrollTop > 0 : scrollable.scrollLeft > 0) return;
+      }
+      suspendSelection();
+      startDrag(ev, { onMove: onDrag, onEnd: onDragEnd });
+    };
+
+    const cleanup = () => {
+      window.removeEventListener('pointermove', onMove);
+      window.removeEventListener('pointerup', cleanup);
+      window.removeEventListener('pointercancel', cleanup);
+    };
+    window.addEventListener('pointermove', onMove);
+    window.addEventListener('pointerup', cleanup);
+    window.addEventListener('pointercancel', cleanup);
+  }
+
+  function onDrag(info: PanInfo) {
+    const el = panelRef.current;
+    if (!el) return;
+    const o = info.offset[axis];
+    const span = sheetSpan(el, side);
+    paint(el, Math.max(o, 0), o < 0 ? 1 + Math.min(-o / span, 1) * STRETCH_MAX : 1);
+  }
+
+  function onDragEnd(info: PanInfo) {
+    restoreSelection();
+    const el = panelRef.current;
+    if (!el) return;
+    const span = sheetSpan(el, side);
+    if (info.offset[axis] > span * DISMISS_RATIO || info.velocity[axis] > DISMISS_VELOCITY) {
+      requestClose();
+      return;
+    }
+    animate(el, { x: [0], y: [0], scale: [[1, 1]], timing: SM.t.settle });
+    const scrim = sheetScrim(el);
+    if (scrim) animate(scrim, { opacity: [1], timing: SM.t.settle });
+  }
+
+  return enabled ? { onPointerDown } : {};
+}