@zyncat/ui 0.11.0 → 0.13.0

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

@@ -1,23 +1,27 @@
 'use client';
 
 import './sheet.css';
+
 import { Fragment, useId, useRef, type HTMLAttributes, type ReactElement, type ReactNode } from 'react';
-import { animate, type Layer } from '../../../engine';
+
+import type { DataAttributes } from '../../../dom-props';
+import { resolveMotionTiming, type MotionTimings } from '../../../motion/motion-timing';
 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 type { MotionSpecs } from '../../../motion/use-motion';
 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';
+import type { ActivateOn } from '../../internal/utils/activation';
+import { useSheetDrag } from './use-sheet-drag';
 
 const SHEET_TIMING = {
   open: { duration: 'slow', ease: 'entrance' },
   close: { duration: 'base', ease: 'exit' },
 } as const;
 
+const SHEET_REST_SCALE: [number, number][] = [[1, 1]];
+
 export interface SheetProps {
   /** Controlled open state. Omit to stay uncontrolled. */
   open?: boolean;
@@ -26,8 +30,10 @@ export interface SheetProps {
   /** Fires whenever the open state changes. Pair with `open` for controlled use. */
   onOpenChange?: (open: boolean) => void;
 
-  /** Cloned to open the sheet on click. */
+  /** Cloned to open the sheet. */
   trigger?: ReactElement | null;
+  /** Whether the trigger fires on `pointerdown` (snappier) or waits for `click`. @default 'click' */
+  activateOn?: ActivateOn;
 
   /** Edge the sheet slides in from. Default 'right'. */
   side?: 'right' | 'bottom';
@@ -49,11 +55,6 @@ export interface SheetProps {
   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,
@@ -61,6 +62,7 @@ function SheetShell({
   container,
   requestClose,
   htmlProps,
+  timings,
   animate,
   exit,
   children,
@@ -71,12 +73,14 @@ function SheetShell({
   container?: HTMLElement | null;
   requestClose: () => void;
   htmlProps?: HTMLAttributes<HTMLDivElement> & DataAttributes;
+  timings: MotionTimings;
   children: ReactNode;
 } & MotionSpecs) {
   const panelRef = useRef<HTMLElement>(null);
   const dragProps = useSheetDrag({ side, panelRef, enabled: dismissible, requestClose });
   return (
     <ModalShell
+      timings={timings}
       animate={animate}
       exit={exit}
       layerClass={'overlay-layer--sheet-' + side}
@@ -98,6 +102,7 @@ export function Sheet({
   defaultOpen = false,
   onOpenChange,
   trigger = null,
+  activateOn,
   side = 'right',
   dismissible = true,
   container = null,
@@ -112,21 +117,26 @@ export function Sheet({
   const panelId = id || 'sheet-' + autoId;
   const close = () => setOpen(false);
   const timings = resolveMotionTiming(animation, SHEET_TIMING);
+  const axis = side === 'bottom' ? 'y' : 'x';
 
   return (
     <Fragment>
-      {ovCloneTrigger(trigger, { open, onPress: () => setOpen(true), panelId, haspopup: 'dialog', triggerRef })}
+      {ovCloneTrigger(trigger, {
+        open,
+        onPress: () => setOpen(true),
+        panelId,
+        haspopup: 'dialog',
+        triggerRef,
+        activateOn,
+      })}
       <OverlayPortal container={container}>
         <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 })}
+              timings={timings}
+              animate={{ [axis]: ['100%', 0], timing: { ...timings.open, release: true } }}
+              exit={{ [axis]: ['100%'], scale: SHEET_REST_SCALE, timing: timings.close }}
               side={side}
               panelId={panelId}
               dismissible={dismissible}

package/src/components/composites/sheet/Sheet.usage.md

@@ -0,0 +1,15 @@
+# Sheet - @zyncat/ui/sheet
+
+Group: overlays
+Docs: https://ui.zyncat.app/sheet
+
+Edge-docked modal panel, drag-to-dismiss.
+
+side right|bottom, trigger (node), dismissible. container docks it inside a positioned element
+instead of the viewport; scrim, scroll lock and inert then scope to that box and the rest of the
+page stays live.
+
+```tsx
+<Sheet side="right" trigger={<Button>Filters</Button>}><div role="dialog">...</div></Sheet>
+<Sheet side="bottom" container={panel} open={o} onOpenChange={setO}><div role="dialog">...</div></Sheet>
+```

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

@@ -1,26 +1,50 @@
-/* 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%;
-}
+@layer zyncat.tokens, zyncat.components;
 
-.overlay-layer--sheet-bottom {
-  align-items: end;
-  justify-items: stretch;
-}
-.overlay-panel--sheet-bottom {
-  width: 100%;
-  max-height: 100%;
-}
+@layer zyncat.components {
+  /* 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%;
+  }
 
-/* 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%;
+  .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%;
+  }
+
+  .overlay-panel--sheet-right[data-drag] {
+    touch-action: pan-y;
+  }
+  .overlay-panel--sheet-bottom[data-drag] {
+    touch-action: none;
+  }
+
+  .overlay-panel--sheet-right,
+  .overlay-panel--sheet-bottom {
+    background: var(--bg-surface);
+    color: var(--text-body);
+    box-shadow: var(--shadow-xl);
+  }
+  .overlay-panel--sheet-right {
+    border-inline-start: var(--border-hairline) solid var(--border-default);
+  }
+  .overlay-panel--sheet-bottom {
+    border-block-start: var(--border-hairline) solid var(--border-default);
+  }
 }

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

@@ -1,7 +1,8 @@
 'use client';
 
 import { useEffect, useRef, type PointerEvent as ReactPointerEvent, type RefObject } from 'react';
-import { animate, startDrag, type PanInfo } from '../../../engine';
+
+import { animate, set, startDrag, type PanInfo } from '../../../engine';
 import { UIMotion } from '../../../tokens/motion-tokens';
 
 const SM = UIMotion;
@@ -9,6 +10,7 @@ const SM = UIMotion;
 const DISMISS_RATIO = 0.4;
 const DISMISS_VELOCITY = 500;
 const INTENT_PX = 4;
+const TOUCH_INTENT_PX = 8;
 const STRETCH_MAX = 0.06;
 
 function findScrollable(node: EventTarget | null, stop: HTMLElement | null): HTMLElement | null {
@@ -29,7 +31,7 @@ function sheetScrim(panel: HTMLElement | null): HTMLElement | null {
   return panel?.parentElement?.querySelector<HTMLElement>('.overlay-scrim') ?? null;
 }
 
-export function sheetSpan(panel: HTMLElement, side: 'right' | 'bottom'): number {
+function sheetSpan(panel: HTMLElement, side: 'right' | 'bottom'): number {
   return side === 'bottom' ? panel.offsetHeight : panel.offsetWidth;
 }
 
@@ -46,6 +48,7 @@ export function useSheetDrag({
 }) {
   const axis = side === 'bottom' ? 'y' : 'x';
   const savedUserSelect = useRef<string | null>(null);
+  const span = useRef(1);
 
   function suspendSelection() {
     const sel = window.getSelection();
@@ -61,23 +64,23 @@ export function useSheetDrag({
   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 stretched: [number, number] = axis === 'y' ? [1, stretch] : [stretch, 1];
+    set(el, { x: [axis === 'y' ? 0 : travel], y: [axis === 'y' ? travel : 0], scale: [stretched] });
     const scrim = sheetScrim(el);
-    if (scrim) scrim.style.opacity = String(1 - Math.min(Math.max(travel / span, 0), 1));
+    if (scrim) set(scrim, { opacity: [1 - Math.min(Math.max(travel / span.current, 0), 1)] });
   }
 
   function onPointerDown(e: ReactPointerEvent) {
-    if (e.button !== 0) return;
+    if (e.button !== 0 || !e.isPrimary) return;
     const startX = e.clientX,
       startY = e.clientY;
+    const intent = e.pointerType === 'touch' ? TOUCH_INTENT_PX : INTENT_PX;
     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;
+      if (Math.max(Math.abs(dx), Math.abs(dy)) < intent) return;
       cleanup();
       const along = axis === 'y' ? dy : dx;
       const cross = axis === 'y' ? dx : dy;
@@ -86,6 +89,8 @@ export function useSheetDrag({
         if (along < 0) return;
         if (axis === 'y' ? scrollable.scrollTop > 0 : scrollable.scrollLeft > 0) return;
       }
+      if (!panelRef.current) return;
+      span.current = sheetSpan(panelRef.current, side);
       suspendSelection();
       startDrag(ev, { onMove: onDrag, onEnd: onDragEnd });
     };
@@ -104,23 +109,22 @@ export function useSheetDrag({
     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);
+    paint(el, Math.max(o, 0), o < 0 ? 1 + Math.min(-o / span.current, 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) {
+    if (info.offset[axis] > span.current * DISMISS_RATIO || info.velocity[axis] > DISMISS_VELOCITY) {
       requestClose();
       return;
     }
-    animate(el, { x: [0], y: [0], scale: [[1, 1]], timing: SM.t.settle });
+    const settle = { ...SM.t.settle, release: true };
+    animate(el, { x: [0], y: [0], scale: [[1, 1]], timing: settle });
     const scrim = sheetScrim(el);
-    if (scrim) animate(scrim, { opacity: [1], timing: SM.t.settle });
+    if (scrim) animate(scrim, { opacity: [1], timing: settle });
   }
 
-  return enabled ? { onPointerDown } : {};
+  return enabled ? { onPointerDown, 'data-drag': '' } : {};
 }

package/src/components/composites/table/Table.tsx

@@ -1,16 +1,19 @@
 'use client';
 
 import './table.css';
+
 import { useMemo, useRef, useState, type HTMLAttributes, type ReactNode } from 'react';
+
+import type { DataAttributes } from '../../../dom-props';
 import { Motion } from '../../../motion/element';
 import { UIMotion } from '../../../tokens/motion-tokens';
+import { useScrollEdges } from '../../internal/hooks/use-scroll-edges';
 import { Icon } from '../../internal/icon/Icon';
-import type { DataAttributes } from '../../../dom-props';
+import { activationProps, type ActivateOn } from '../../internal/utils/activation';
+import { cx } from '../../internal/utils/cx';
+import { DigitStrip } from '../../primitives/badge/digit-strip';
 import { Button } from '../../primitives/button/Button';
 import { Checkbox } from '../../primitives/checkbox/Checkbox';
-import { Odometer } from '../../primitives/badge/odometer';
-import { useScrollEdges } from '../../internal/hooks/use-scroll-edges';
-import { cx } from '../../internal/utils/cx';
 
 const ROW_FLIP = { timing: UIMotion.t.layout };
 
@@ -85,6 +88,8 @@ export interface TableProps<Row = any> {
 
   /** Makes rows clickable (checkbox cell excluded). */
   onRowClick?: (row: Row) => void;
+  /** Whether a sortable header fires on `pointerdown` (snappier) or waits for `click`. @default 'pointerdown' */
+  activateOn?: ActivateOn;
   /** Size the table here - the internal scroller absorbs the constraint. */
   className?: string;
   /** Standard <div> attributes (style, data-*, aria-*, ...) forwarded to the table wrapper. */
@@ -116,6 +121,7 @@ export function Table<Row = any>({
   empty,
   footer,
   onRowClick,
+  activateOn = 'pointerdown',
   className = '',
   htmlProps,
 }: TableProps<Row>) {
@@ -199,6 +205,7 @@ export function Table<Row = any>({
         else w.removeAttribute(attr);
       };
       set('data-scrolled', el.scrollTop > 0);
+      set('data-y-scroll', el.scrollHeight > el.clientHeight);
       set('data-x-back', edges.left);
       set('data-x-more', edges.right);
     },
@@ -254,7 +261,7 @@ export function Table<Row = any>({
             onChange={toggleAll}
           />
           <span className="tbl__bulkCount" aria-live="polite" aria-atomic="true">
-            <Odometer value={bulkOpen ? selected.size : lastCountRef.current} />
+            <DigitStrip value={bulkOpen ? selected.size : lastCountRef.current} />
             <span> selected</span>
           </span>
           <span className="tbl__bulkSpacer"></span>
@@ -293,7 +300,11 @@ export function Table<Row = any>({
                       aria-sort={active ? (sort.dir === 'asc' ? 'ascending' : 'descending') : undefined}
                     >
                       {c.sortable ? (
-                        <button type="button" className="tbl__sort" onClick={() => cycleSort(c)}>
+                        <button
+                          type="button"
+                          className="tbl__sort"
+                          {...activationProps<HTMLButtonElement>(() => cycleSort(c), { on: activateOn })}
+                        >
                           <span className="tbl__sortLbl">{c.label}</span>
                           <span
                             className={

package/src/components/composites/table/Table.usage.md

@@ -0,0 +1,19 @@
+# Table - @zyncat/ui/table
+
+Group: data-display
+Docs: https://ui.zyncat.app/table
+
+Declare columns + rows; owns sort, selection, stickiness, overflow.
+
+columns: TableColumn<T>[] ({ key, label, render?, sortable?, sortBy?, align?, mono?, strong?, grow?
+}); selectable, defaultSort, footer.
+
+```tsx
+<Table<Invoice>
+  ariaLabel="Invoices"
+  columns={COLUMNS}
+  rows={INVOICES}
+  selectable
+  defaultSort={{ key: 'amount', dir: 'desc' }}
+/>
+```