@zyncat/ui 0.11.0 → 0.12.0

package/src/components/composites/date-picker/field-shell.tsx

@@ -1,12 +1,15 @@
 'use client';
 
 import './date-picker.css';
+
 import type { ButtonHTMLAttributes, HTMLAttributes, ReactNode, Ref } from 'react';
-import { Icon, type IconName } from '../../internal/icon/Icon';
-import { FieldLabel, FieldMessage } from '../../primitives/input/field-chrome';
-import type { DisableableAnimation } from '../../../motion/timing';
+
 import type { DataAttributes } from '../../../dom-props';
+import type { DisableableAnimation } from '../../../motion/timing';
+import { Icon, type IconName } from '../../internal/icon/Icon';
+import type { ActivateOn } from '../../internal/utils/activation';
 import { cx } from '../../internal/utils/cx';
+import { FieldLabel, FieldMessage } from '../../primitives/input/field-chrome';
 
 export interface DateFieldBaseProps {
   /** Field label rendered above the trigger. */
@@ -23,6 +26,9 @@ export interface DateFieldBaseProps {
   className?: string;
   /** Standard <div> attributes (style, data-*, aria-*, ...) forwarded to the field shell root. */
   htmlProps?: HTMLAttributes<HTMLDivElement> & DataAttributes;
+  /** Whether the trigger, the day cells and the panel controls fire on `pointerdown` (snappier) or
+   *  wait for `click`. (Not used by TimeField, which is inline.) @default 'pointerdown' */
+  activateOn?: ActivateOn;
   /** Popover open/close timing - motion tokens only, or `null` to disable. (Not used by TimeField, which is inline.) */
   animation?: DisableableAnimation;
 }

package/src/components/composites/date-picker/range-panel.tsx

@@ -1,14 +1,17 @@
 'use client';
 
 import './date-picker.css';
+
 import { Fragment, useEffect, useId, useRef, useState, type KeyboardEvent } from 'react';
+
+import { Motion } from '../../../motion/element';
+import { GlidePill, useGlide } from '../../../motion/glide';
 import { UIMotion } from '../../../tokens/motion-tokens';
 import { Icon } from '../../internal/icon/Icon';
+import { activationProps, type ActivateOn } from '../../internal/utils/activation';
 import { Button } from '../../primitives/button/Button';
-import { GlidePill, useGlide } from '../../../motion/glide';
-import { Motion } from '../../../motion/element';
+import { add, col, DOW, grid, MONTHS, pad, parse, today, toKey, tzLabel, within } from './date-utils';
 import { useDayFocus } from './use-day-focus';
-import { MONTHS, DOW, pad, toKey, parse, today, add, col, grid, tzLabel, within } from './date-utils';
 
 const CAP_FLIP = { timing: UIMotion.t.settle };
 
@@ -70,9 +73,21 @@ interface DrpPanelProps {
   label?: string;
   months: number;
   layout: 'popover' | 'sheet';
+  activateOn?: ActivateOn;
 }
 
-export function DrpPanel({ value, commit, close, min, max, timezone, label, months, layout }: DrpPanelProps) {
+export function DrpPanel({
+  value,
+  commit,
+  close,
+  min,
+  max,
+  timezone,
+  label,
+  months,
+  layout,
+  activateOn,
+}: DrpPanelProps) {
   const seedKey = (value && value.start) || today();
   const seed = parse(seedKey);
   const [view, setView] = useState<{ y: number; m: number }>({ y: seed.getFullYear(), m: seed.getMonth() });
@@ -220,7 +235,7 @@ export function DrpPanel({ value, commit, close, min, max, timezone, label, mont
         tabIndex={key === focusKey ? 0 : -1}
         aria-label={MONTHS[d.getMonth()] + ' ' + d.getDate() + ', ' + d.getFullYear()}
         aria-selected={isLo || isHi || undefined}
-        onClick={() => pickDay(key)}
+        {...activationProps<HTMLButtonElement>(() => pickDay(key), { on: activateOn })}
         onPointerEnter={(e) => {
           setHoverKey(key);
           if (!anchor && !disabled) gridGlide.enter(e.currentTarget);
@@ -268,7 +283,7 @@ export function DrpPanel({ value, commit, close, min, max, timezone, label, mont
               className="dtp__nav"
               aria-label="Previous month"
               disabled={min && prevEnd < min}
-              onClick={() => nav(-1)}
+              {...activationProps<HTMLButtonElement>(() => nav(-1), { on: activateOn })}
             >
               <Icon name="caret-left" size="sm" />
             </button>
@@ -282,7 +297,7 @@ export function DrpPanel({ value, commit, close, min, max, timezone, label, mont
               className="dtp__nav"
               aria-label="Next month"
               disabled={max && nextStart > max}
-              onClick={() => nav(1)}
+              {...activationProps<HTMLButtonElement>(() => nav(1), { on: activateOn })}
             >
               <Icon name="caret-right" size="sm" />
             </button>
@@ -331,7 +346,7 @@ export function DrpPanel({ value, commit, close, min, max, timezone, label, mont
               type="button"
               className={'drp__preset' + (presetActive(p) ? ' is-active' : '')}
               onPointerEnter={(e) => presetGlide.enter(e.currentTarget)}
-              onClick={() => applyPreset(p)}
+              {...activationProps<HTMLButtonElement>(() => applyPreset(p), { on: activateOn })}
             >
               {p.label}
             </button>

package/src/components/composites/date-picker/time-core.tsx

@@ -1,7 +1,9 @@
 'use client';
 
 import './date-picker.css';
+
 import { useEffect, useRef, useState, type ClipboardEvent, type KeyboardEvent, type RefObject } from 'react';
+
 import { cx } from '../../internal/utils/cx';
 import { pad } from './date-utils';
 

package/src/components/composites/dialog/Dialog.tsx

@@ -1,24 +1,23 @@
 'use client';
 
 import './dialog.css';
+
 import { Fragment, useId, useRef, type HTMLAttributes, type ReactElement, type ReactNode } from 'react';
-import { Presence } from '../../../motion/presence';
+
+import type { DataAttributes } from '../../../dom-props';
 import { resolveMotionTiming } from '../../../motion/motion-timing';
+import { Presence } from '../../../motion/presence';
 import type { DisableableAnimation } from '../../../motion/timing';
+import { UIMotion } from '../../../tokens/motion-tokens';
 import { useControllable } from '../../internal/hooks/use-controllable';
-import { ovCloneTrigger, OverlayPortal } from '../../internal/overlay/layer';
-import { ModalShell } from '../../internal/overlay/modal';
+import { useScrollEdges } from '../../internal/hooks/use-scroll-edges';
 import { Icon } from '../../internal/icon/Icon';
 import { IconSlot } from '../../internal/icon/IconSlot';
-import { useScrollEdges } from '../../internal/hooks/use-scroll-edges';
-import type { DataAttributes } from '../../../dom-props';
+import { ovCloneTrigger, OverlayPortal } from '../../internal/overlay/layer';
+import { ModalShell, OV_TAKEOVER_TIMING } from '../../internal/overlay/modal';
+import type { ActivateOn } from '../../internal/utils/activation';
 import { cx } from '../../internal/utils/cx';
 
-const DIALOG_TIMING = {
-  open: { duration: 'slow', ease: 'entrance' },
-  close: { duration: 'base', ease: 'standard' },
-} as const;
-
 export interface DialogProps {
   /** Controlled open state. Omit for uncontrolled (use defaultOpen + trigger). */
   open?: boolean;
@@ -26,8 +25,10 @@ export interface DialogProps {
   defaultOpen?: boolean;
   /** Fires whenever the open state changes. Pair with `open` for controlled use. */
   onOpenChange?: (open: boolean) => void;
-  /** Optional element cloned to open the dialog on click (uncontrolled ergonomics). */
+  /** Optional element cloned to open the dialog (uncontrolled ergonomics). */
   trigger?: ReactElement | null;
+  /** Whether the trigger fires on `pointerdown` (snappier) or waits for `click`. @default 'click' */
+  activateOn?: ActivateOn;
   /** Header title - rendered as the `<h2>` and wired to `aria-labelledby`. */
   title?: ReactNode;
   /** Subtext under the title - wired to `aria-describedby`. @default null */
@@ -144,6 +145,7 @@ export function Dialog({
   defaultOpen = false,
   onOpenChange,
   trigger = null,
+  activateOn,
   title,
   description = null,
   size = 'md',
@@ -163,18 +165,31 @@ export function Dialog({
   const triggerRef = useRef<HTMLElement>(null);
   const close = () => setOpen(false);
 
-  const timings = resolveMotionTiming(animation, DIALOG_TIMING);
+  const timings = resolveMotionTiming(animation, OV_TAKEOVER_TIMING);
 
   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 && (
             <ModalShell
               key="dialog"
-              animate={{ y: [6, 0], scale: [0.98, 1], opacity: [0, 1], timing: timings.open }}
-              exit={{ y: [6], scale: [0.98], opacity: [0], timing: timings.close }}
+              timings={timings}
+              animate={{
+                y: [UIMotion.dist.sm, 0],
+                scale: [UIMotion.scale.panel, 1],
+                opacity: [0, 1],
+                timing: timings.open,
+              }}
+              exit={{ y: [UIMotion.dist.sm], scale: [UIMotion.scale.panel], opacity: [0], timing: timings.close }}
               layerClass="overlay-layer--dialog"
               panelClass="overlay-panel--dialog"
               panelId={panelId}

package/src/components/composites/dialog/Dialog.usage.md

@@ -0,0 +1,17 @@
+# Dialog - @zyncat/ui/dialog
+
+Group: overlays
+Docs: https://ui.zyncat.app/dialog
+
+DEFAULT CHOICE for modals - the styled surface: header (icon/title/description/close), scrolling body, footer actions, on top of scrim + focus trap + scroll lock.
+
+Reach for Modal only if this chrome is wrong. open/onOpenChange, tone, icon, title, description,
+footer: (close) => node. Header is omitted entirely when there is no icon/title/description and
+dismissible={false}. container mounts 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
+<Dialog open={o} onOpenChange={setO} tone="danger" title="Delete this project?" footer={(close) => <>...</>}>
+  ...
+</Dialog>
+```

package/src/components/composites/dialog/dialog.css

@@ -1,183 +1,187 @@
-/* dialog.css - the styled dialog surface (the modal shell owns modality + motion). */
+@layer zyncat.tokens, zyncat.components;
 
-/* Modal placement - the shell layer centers the panel with breathing room. */
-.overlay-layer--dialog {
-  place-items: center;
-  padding: var(--space-6);
-}
-.overlay-panel--dialog {
-  max-width: 100%;
-  max-height: 100%;
-}
+@layer zyncat.components {
+  /* dialog.css - the styled dialog surface (the modal shell owns modality + motion). */
 
-/* The panel - flex column so the body scrolls between a pinned header + footer; padding lives on the parts. */
-.dialog {
-  --dialog-w: 32rem;
-  position: relative;
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  width: var(--dialog-w);
-  max-width: 100%;
-  max-height: min(85dvh, 44rem);
-  padding: 0;
-  overflow: hidden;
-  background: var(--bg-surface);
-  border: var(--border-hairline) solid var(--border-default);
-  border-radius: var(--radius-xl);
-  box-shadow: var(--shadow-xl);
-  color: var(--text-body);
-  font-family: var(--font-sans);
-}
+  /* Modal placement - the shell layer centers the panel with breathing room. */
+  .overlay-layer--dialog {
+    place-items: center;
+    padding: var(--space-6);
+  }
+  .overlay-panel--dialog {
+    max-width: 100%;
+    max-height: 100%;
+  }
 
-.dialog[data-size='sm'] {
-  --dialog-w: 25rem;
-}
-.dialog[data-size='lg'] {
-  --dialog-w: 40rem;
-}
+  /* The panel - flex column so the body scrolls between a pinned header + footer; padding lives on the parts. */
+  .dialog {
+    --dialog-w: 32rem;
+    position: relative;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    width: var(--dialog-w);
+    max-width: 100%;
+    max-height: min(85dvh, 44rem);
+    padding: 0;
+    overflow: hidden;
+    background: var(--bg-surface);
+    border: var(--border-hairline) solid var(--border-default);
+    border-radius: var(--radius-xl);
+    box-shadow: var(--shadow-xl);
+    color: var(--text-body);
+    font-family: var(--font-sans);
+  }
 
-/* Header - icon - heading - close; flex-start keeps a tall heading top-aligned with the badge. */
-.dialog__header {
-  flex: 0 0 auto;
-  display: flex;
-  align-items: flex-start;
-  gap: var(--space-3);
-  padding: var(--space-5) var(--space-5) var(--space-4);
-  transition:
-    border-color var(--duration-base) var(--ease-standard),
-    box-shadow var(--duration-base) var(--ease-standard);
-  border-bottom: var(--border-hairline) solid transparent;
-}
-/* divider + faint lift appears only once the body is scrolled under it */
-.dialog:has(.dialog__body[data-scroll-top]) .dialog__header {
-  border-bottom-color: var(--border-subtle);
-  box-shadow: var(--shadow-xs);
-}
+  .dialog[data-size='sm'] {
+    --dialog-w: 25rem;
+  }
+  .dialog[data-size='lg'] {
+    --dialog-w: 40rem;
+  }
 
-.dialog__icon {
-  flex: 0 0 auto;
-  display: grid;
-  place-items: center;
-  width: 2.25rem;
-  height: 2.25rem;
-  border-radius: var(--radius-md);
-  background: var(--accent-subtle);
-  color: var(--text-accent);
-  font-size: var(--icon-md);
-}
-.dialog[data-tone='danger'] .dialog__icon {
-  background: var(--danger-subtle);
-  color: var(--danger-text);
-}
+  /* Header - icon - heading - close; flex-start keeps a tall heading top-aligned with the badge. */
+  .dialog__header {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: flex-start;
+    gap: var(--space-3);
+    padding: var(--space-5) var(--space-5) var(--space-4);
+    transition:
+      border-color var(--duration-base) var(--ease-standard),
+      box-shadow var(--duration-base) var(--ease-standard);
+    border-bottom: var(--border-hairline) solid transparent;
+  }
+  /* divider + faint lift appears only once the body is scrolled under it */
+  .dialog:has(.dialog__body[data-scroll-top]) .dialog__header {
+    border-bottom-color: var(--border-subtle);
+    box-shadow: var(--shadow-xs);
+  }
 
-.dialog__heading {
-  flex: 1 1 auto;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-1);
-  /* nudge text to optical-center against the 36px icon badge when present */
-  padding-top: var(--space-px);
-}
-.dialog__title {
-  margin: 0;
-  color: var(--text-strong);
-  font: var(--weight-semibold) var(--size-heading)/var(--leading-heading) var(--font-sans);
-  letter-spacing: var(--tracking-tight);
-  text-wrap: pretty;
-}
-.dialog__desc {
-  margin: 0;
-  color: var(--text-muted);
-  font: var(--type-body);
-  text-wrap: pretty;
-}
+  .dialog__icon {
+    flex: 0 0 auto;
+    display: grid;
+    place-items: center;
+    width: 2.25rem;
+    height: 2.25rem;
+    border-radius: var(--radius-md);
+    background: var(--accent-subtle);
+    color: var(--text-accent);
+    font-size: var(--icon-md);
+  }
+  .dialog[data-tone='danger'] .dialog__icon {
+    background: var(--danger-subtle);
+    color: var(--danger-text);
+  }
 
-/* close - a quiet ghost icon button; the hit box is bigger than the glyph */
-.dialog__close {
-  flex: 0 0 auto;
-  appearance: none;
-  margin: calc(var(--space-1) * -1) calc(var(--space-1) * -1) 0 0;
-  display: grid;
-  place-items: center;
-  width: 1.75rem;
-  height: 1.75rem;
-  padding: 0;
-  border: none;
-  border-radius: var(--radius-md);
-  background: transparent;
-  color: var(--text-subtle);
-  cursor: pointer;
-  font-size: var(--icon-sm);
-  transition: var(--transition-control);
-}
-.dialog__close:hover {
-  background: var(--neutral-wash);
-  color: var(--text-strong);
-}
-.dialog__close:active {
-  background: var(--bg-muted);
-}
-.dialog__close:focus-visible {
-  outline: none;
-  color: var(--text-strong);
-  box-shadow: var(--ring-accent);
-}
+  .dialog__heading {
+    flex: 1 1 auto;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    /* nudge text to optical-center against the 36px icon badge when present */
+    padding-top: var(--space-px);
+  }
+  .dialog__title {
+    margin: 0;
+    color: var(--text-strong);
+    font: var(--weight-semibold) var(--size-heading)/var(--leading-heading) var(--font-sans);
+    letter-spacing: var(--tracking-tight);
+    text-wrap: pretty;
+  }
+  .dialog__desc {
+    margin: 0;
+    color: var(--text-muted);
+    font: var(--type-body);
+    text-wrap: pretty;
+  }
 
-/* Body - the scroll region; min-height:0 lets it shrink so header/footer stay pinned. */
-.dialog__body {
-  flex: 1 1 auto;
-  min-height: 0;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  padding: 0 var(--space-5) var(--space-5);
-  color: var(--text-body);
-  font: var(--type-body);
-}
-.dialog__body:first-child {
-  padding-top: var(--space-5);
-}
-.dialog:has(.dialog__icon) .dialog__body {
-  padding-left: calc(var(--space-5) + 2.25rem + var(--space-3));
-}
-.dialog:has(.dialog__footer) .dialog__body {
-  padding-bottom: var(--space-4);
-}
-.dialog__body > :first-child {
-  margin-top: 0;
-}
-.dialog__body > :last-child {
-  margin-bottom: 0;
-}
+  /* close - a quiet ghost icon button; the hit box is bigger than the glyph */
+  .dialog__close {
+    flex: 0 0 auto;
+    appearance: none;
+    margin: calc(var(--space-1) * -1) calc(var(--space-1) * -1) 0 0;
+    display: grid;
+    place-items: center;
+    width: 1.75rem;
+    height: 1.75rem;
+    padding: 0;
+    border: none;
+    border-radius: var(--radius-md);
+    background: transparent;
+    color: var(--text-subtle);
+    cursor: pointer;
+    font-size: var(--icon-sm);
+    transition: var(--transition-control);
+  }
+  .dialog__close:hover {
+    background: var(--neutral-wash);
+    color: var(--text-strong);
+  }
+  .dialog__close:active {
+    background: var(--bg-muted);
+  }
+  .dialog__close:focus-visible {
+    outline: none;
+    color: var(--text-strong);
+    box-shadow: var(--ring-accent);
+  }
 
-.dialog__body {
-  scrollbar-width: thin;
-  scrollbar-color: var(--border-strong) transparent;
-}
-.dialog__body::-webkit-scrollbar {
-  width: 10px;
-}
-.dialog__body::-webkit-scrollbar-thumb {
-  background: var(--border-strong);
-  border-radius: var(--radius-full);
-  border: 3px solid var(--bg-surface);
-  background-clip: padding-box;
-}
+  /* Body - the scroll region; min-height:0 lets it shrink so header/footer stay pinned. */
+  .dialog__body {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    padding: 0 var(--space-5) var(--space-5);
+    color: var(--text-body);
+    font: var(--type-body);
+  }
+  .dialog__body:first-child {
+    padding-top: var(--space-5);
+  }
+  .dialog:has(.dialog__icon) .dialog__body {
+    padding-left: calc(var(--space-5) + 2.25rem + var(--space-3));
+  }
+  .dialog:has(.dialog__footer) .dialog__body {
+    padding-bottom: var(--space-4);
+  }
+  .dialog__body > :first-child {
+    margin-top: 0;
+  }
+  .dialog__body > :last-child {
+    margin-bottom: 0;
+  }
 
-/* Footer - right-aligned actions; gains a top divider only when the body scrolls under it. */
-.dialog__footer {
-  flex: 0 0 auto;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: var(--space-2);
-  flex-wrap: wrap;
-  padding: var(--space-4) var(--space-5) var(--space-5);
-  border-top: var(--border-hairline) solid transparent;
-  transition: border-color var(--duration-base) var(--ease-standard);
-}
-.dialog:has(.dialog__body[data-scroll-bottom]) .dialog__footer {
-  border-top-color: var(--border-subtle);
+  .dialog__body {
+    scrollbar-width: thin;
+    scrollbar-color: var(--border-strong) transparent;
+  }
+  .dialog__body::-webkit-scrollbar {
+    width: 10px;
+  }
+  .dialog__body::-webkit-scrollbar-thumb {
+    background: var(--border-strong);
+    border-radius: var(--radius-full);
+    border: 3px solid var(--bg-surface);
+    background-clip: padding-box;
+  }
+
+  /* Footer - right-aligned actions; gains a top divider only when the body scrolls under it. */
+  .dialog__footer {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--space-2);
+    flex-wrap: wrap;
+    padding: var(--space-4) var(--space-5) var(--space-5);
+    border-top: var(--border-hairline) solid transparent;
+    transition: border-color var(--duration-base) var(--ease-standard);
+  }
+  .dialog:has(.dialog__body[data-scroll-bottom]) .dialog__footer {
+    border-top-color: var(--border-subtle);
+  }
 }