@zyncat/ui 0.11.0 → 0.13.0

package/src/components/composites/alert/alert.css

@@ -1,132 +1,137 @@
-/* alert.css - the persistent in-flow status message: a lit tinted pane per tone. */
+@layer zyncat.tokens, zyncat.components;
 
-.alert-shell {
-  overflow: hidden;
-}
+@layer zyncat.components {
+  /* alert.css - the persistent in-flow status message: a lit tinted pane per tone. */
 
-.alert {
-  /* tone hooks - repointed by [data-tone] below; info is the default */
-  --alert-hue: var(--info);
-  --alert-fg: var(--info-text);
-  --alert-bg: var(--info-subtle);
-  --alert-wash: var(--accent-wash); /* info's wash = accent (teal) */
+  .alert-shell {
+    overflow: hidden;
+  }
 
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  gap: var(--space-3);
-  padding: var(--space-3) var(--space-4);
-  /* the lit pane: top-light gradient over the tint + 1px inner highlight (Button's lighting model) */
-  background: linear-gradient(180deg, color-mix(in oklab, var(--bg-surface) 45%, var(--alert-bg)), var(--alert-bg));
-  border: var(--border-hairline) solid color-mix(in oklab, var(--alert-hue) 30%, transparent);
-  border-radius: var(--radius-lg);
-  box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.55);
-}
+  .alert {
+    /* tone hooks - repointed by [data-tone] below; info is the default */
+    --alert-hue: var(--info);
+    --alert-fg: var(--info-text);
+    --alert-bg: var(--info-subtle);
+    --alert-wash: var(--accent-wash); /* info's wash = accent (teal) */
+    --alert-sheen: rgb(255 255 255 / 0.55);
 
-.alert[data-tone='success'] {
-  --alert-hue: var(--success);
-  --alert-fg: var(--success-text);
-  --alert-bg: var(--success-subtle);
-  --alert-wash: var(--success-wash);
-}
-.alert[data-tone='warning'] {
-  --alert-hue: var(--warning);
-  --alert-fg: var(--warning-text);
-  --alert-bg: var(--warning-subtle);
-  --alert-wash: var(--warning-wash);
-}
-.alert[data-tone='danger'] {
-  --alert-hue: var(--danger);
-  --alert-fg: var(--danger-text);
-  --alert-bg: var(--danger-subtle);
-  --alert-wash: var(--danger-wash);
-}
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    padding: var(--space-3) var(--space-4);
+    /* the lit pane: top-light gradient over the tint + 1px inner highlight (Button's lighting model) */
+    background: linear-gradient(180deg, color-mix(in oklab, var(--bg-surface) 45%, var(--alert-bg)), var(--alert-bg));
+    border: var(--border-hairline) solid color-mix(in oklab, var(--alert-hue) 30%, transparent);
+    border-radius: var(--radius-lg);
+    box-shadow: inset 0 1px 0 0 var(--alert-sheen);
+  }
 
-/* with a description: glyph rides the title line, controls stay centered */
-.alert:has(.alert__desc) {
-  align-items: flex-start;
-}
-.alert:has(.alert__desc) .alert__action,
-.alert:has(.alert__desc) .alert__close {
-  align-self: center;
-}
+  .alert[data-tone='success'] {
+    --alert-hue: var(--success);
+    --alert-fg: var(--success-text);
+    --alert-bg: var(--success-subtle);
+    --alert-wash: var(--success-wash);
+  }
+  .alert[data-tone='warning'] {
+    --alert-hue: var(--warning);
+    --alert-fg: var(--warning-text);
+    --alert-bg: var(--warning-subtle);
+    --alert-wash: var(--warning-wash);
+  }
+  .alert[data-tone='danger'] {
+    --alert-hue: var(--danger);
+    --alert-fg: var(--danger-text);
+    --alert-bg: var(--danger-subtle);
+    --alert-wash: var(--danger-wash);
+  }
 
-.alert--banner {
-  border-radius: 0;
-  border-block-start: 0;
-  border-inline: 0;
-  padding-inline: var(--space-6);
-}
+  /* with a description: glyph rides the title line, controls stay centered */
+  .alert:has(.alert__desc) {
+    align-items: flex-start;
+  }
+  .alert:has(.alert__desc) .alert__action,
+  .alert:has(.alert__desc) .alert__close {
+    align-self: center;
+  }
 
-/* Glyph - one --leading-body tall so it centers on the title line. */
-.alert__icon {
-  flex: none;
-  display: grid;
-  place-items: center;
-  height: var(--leading-body);
-  color: var(--alert-hue);
-}
+  .alert--banner {
+    border-radius: 0;
+    border-block-start: 0;
+    border-inline: 0;
+    padding-inline: var(--space-6);
+  }
 
-.alert__body {
-  flex: 1 1 auto;
-  min-width: 0;
-}
-.alert__title {
-  margin: 0;
-  font: var(--type-label);
-  color: var(--alert-fg);
-  text-wrap: pretty;
-}
-.alert__desc {
-  margin: var(--space-1) 0 0;
-  font: var(--type-caption);
-  color: color-mix(in oklab, var(--alert-fg) 56%, var(--text-body));
-  text-wrap: pretty;
-}
+  /* Glyph - one --leading-body tall so it centers on the title line. */
+  .alert__icon {
+    flex: none;
+    display: grid;
+    place-items: center;
+    height: var(--leading-body);
+    color: var(--alert-hue);
+  }
 
-/* Action - the system .btn .btn--sm re-skinned to the pane's tone (alert-local chrome, not a global Button variant). */
-.alert__action {
-  flex: none;
-  color: var(--alert-fg);
-  background: transparent;
-}
-.alert__action:hover:not(:disabled) {
-  color: var(--alert-fg);
-  background: var(--alert-wash);
-}
-.alert__action:active:not(:disabled) {
-  background: color-mix(in oklab, var(--alert-hue) 16%, transparent);
-  transform: translateY(var(--space-px));
-}
-.alert[data-tone='danger'] .alert__action {
-  --btn-ring: var(--ring-danger);
-}
+  .alert__body {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+  .alert__title {
+    margin: 0;
+    font: var(--type-label);
+    color: var(--alert-fg);
+    text-wrap: pretty;
+  }
+  .alert__desc {
+    margin: var(--space-1) 0 0;
+    font: var(--type-caption);
+    color: color-mix(in oklab, var(--alert-fg) 56%, var(--text-body));
+    text-wrap: pretty;
+  }
 
-/* Dismiss - always visible (alerts persist; no hover-reveal like toast). */
-.alert__close {
-  flex: none;
-  appearance: none;
-  display: grid;
-  place-items: center;
-  width: var(--space-6);
-  height: var(--space-6);
-  margin: 0;
-  padding: 0;
-  border: none;
-  border-radius: var(--radius-sm);
-  background: transparent;
-  color: color-mix(in oklab, var(--alert-fg) 64%, transparent);
-  cursor: pointer;
-  transition: var(--transition-control);
-}
-.alert__close:hover {
-  background: color-mix(in oklab, var(--alert-fg) 9%, transparent);
-  color: var(--alert-fg);
-}
-.alert__close:active {
-  background: color-mix(in oklab, var(--alert-fg) 14%, transparent);
-}
-.alert__close:focus-visible {
-  outline: none;
-  box-shadow: var(--focus-ring);
+  /* Action - the system .btn .btn--sm re-skinned to the pane's tone (alert-local chrome, not a global Button variant). */
+  .alert__action {
+    flex: none;
+    color: var(--alert-fg);
+    background: transparent;
+  }
+  .alert__action:hover:not(:disabled) {
+    color: var(--alert-fg);
+    background: var(--alert-wash);
+  }
+  .alert__action:active:not(:disabled) {
+    background: color-mix(in oklab, var(--alert-hue) 16%, transparent);
+    transform: translateY(var(--space-px));
+  }
+  .alert[data-tone='danger'] .alert__action {
+    --btn-ring: var(--ring-danger);
+  }
+
+  /* Dismiss - always visible (alerts persist; no hover-reveal like toast). */
+  .alert__close {
+    flex: none;
+    appearance: none;
+    display: grid;
+    place-items: center;
+    width: var(--space-6);
+    height: var(--space-6);
+    margin: 0;
+    padding: 0;
+    border: none;
+    border-radius: var(--radius-sm);
+    background: transparent;
+    color: color-mix(in oklab, var(--alert-fg) 64%, transparent);
+    cursor: pointer;
+    transition: var(--transition-control);
+  }
+  .alert__close:hover {
+    background: color-mix(in oklab, var(--alert-fg) 9%, transparent);
+    color: var(--alert-fg);
+  }
+  .alert__close:active {
+    background: color-mix(in oklab, var(--alert-fg) 14%, transparent);
+  }
+  .alert__close:focus-visible {
+    outline: none;
+    box-shadow: var(--focus-ring);
+  }
 }

package/src/components/composites/date-picker/DateField.tsx

@@ -1,12 +1,14 @@
 'use client';
 
 import './date-picker.css';
+
 import { useState } from 'react';
-import { Popover } from '../popover/Popover';
-import { FieldShell, FieldTrigger, type DateFieldBaseProps } from './field-shell';
+
 import { useControllable } from '../../internal/hooks/use-controllable';
+import { Popover } from '../popover/Popover';
 import { DtpPanel } from './calendar-panel';
 import { displayDay } from './date-utils';
+import { FieldShell, FieldTrigger, type DateFieldBaseProps } from './field-shell';
 
 export interface DateFieldProps extends DateFieldBaseProps {
   /** Controlled value, 'YYYY-MM-DD'. */
@@ -40,6 +42,7 @@ export function DateField({
   disabled = false,
   className = '',
   htmlProps,
+  activateOn = 'pointerdown',
   animation,
 }: DateFieldProps) {
   const [val, commit] = useControllable(value, defaultValue, onChange);
@@ -61,6 +64,7 @@ export function DateField({
         trigger={trigger}
         side="bottom"
         align="start"
+        activateOn={activateOn}
         animation={animation}
         open={pickerOpen}
         onOpenChange={setPickerOpen}
@@ -73,6 +77,7 @@ export function DateField({
           max={max}
           timezone={timezone}
           label={label}
+          activateOn={activateOn}
         />
       </Popover>
     </FieldShell>

package/src/components/composites/date-picker/DateField.usage.md

@@ -0,0 +1,10 @@
+# DateField - @zyncat/ui/date-field
+
+Group: date-time
+Docs: https://ui.zyncat.app/date-field
+
+Month calendar in a popover; value 'YYYY-MM-DD'.
+
+```tsx
+<DateField label="Start date" value={d} onChange={setD} timezone="Europe/Riga" min="2026-06-01" />
+```

package/src/components/composites/date-picker/DateRangeField.tsx

@@ -1,27 +1,19 @@
 'use client';
 
 import './date-picker.css';
-import { useEffect, useState } from 'react';
+
+import { useState } from 'react';
+
+import { useControllable } from '../../internal/hooks/use-controllable';
+import { useMediaQuery } from '../../internal/hooks/use-media-query';
 import { Popover } from '../popover/Popover';
 import { Sheet } from '../sheet/Sheet';
 import { FieldShell, FieldTrigger, type DateFieldBaseProps } from './field-shell';
-import { useControllable } from '../../internal/hooks/use-controllable';
 import { DrpPanel, drpRangeText, type DateRange } from './range-panel';
 
 export type { DateRange };
 
-function useNarrowViewport(query?: string): boolean {
-  const q = query || '(max-width: 640px)';
-  const [narrow, setNarrow] = useState(() => (typeof matchMedia === 'function' ? matchMedia(q).matches : false));
-  useEffect(() => {
-    const mq = matchMedia(q);
-    const fn = (e: MediaQueryListEvent) => setNarrow(e.matches);
-    mq.addEventListener('change', fn);
-    setNarrow(mq.matches);
-    return () => mq.removeEventListener('change', fn);
-  }, [q]);
-  return narrow;
-}
+const NARROW_VIEWPORT = '(max-width: 640px)';
 
 export interface DateRangeFieldProps extends DateFieldBaseProps {
   /** Controlled value - both endpoints, or null when empty. */
@@ -55,11 +47,12 @@ export function DateRangeField({
   disabled = false,
   className = '',
   htmlProps,
+  activateOn = 'pointerdown',
   animation,
 }: DateRangeFieldProps) {
   const [val, commit] = useControllable(value, defaultValue, onChange);
 
-  const narrow = useNarrowViewport();
+  const narrow = useMediaQuery(NARROW_VIEWPORT);
   const [pickerOpen, setPickerOpen] = useState(false);
 
   const display = val && val.start && val.end ? drpRangeText(val.start, val.end) : null;
@@ -75,6 +68,7 @@ export function DateRangeField({
       label={label}
       months={narrow ? 1 : 2}
       layout={narrow ? 'sheet' : 'popover'}
+      activateOn={activateOn}
     />
   );
 
@@ -90,7 +84,14 @@ export function DateRangeField({
       htmlProps={htmlProps}
     >
       {narrow ? (
-        <Sheet trigger={trigger} side="bottom" open={pickerOpen} onOpenChange={setPickerOpen} animation={animation}>
+        <Sheet
+          trigger={trigger}
+          side="bottom"
+          open={pickerOpen}
+          onOpenChange={setPickerOpen}
+          activateOn={activateOn}
+          animation={animation}
+        >
           {panel}
         </Sheet>
       ) : (
@@ -100,6 +101,7 @@ export function DateRangeField({
           align="start"
           open={pickerOpen}
           onOpenChange={setPickerOpen}
+          activateOn={activateOn}
           animation={animation}
         >
           {panel}

package/src/components/composites/date-picker/DateRangeField.usage.md

@@ -0,0 +1,10 @@
+# DateRangeField - @zyncat/ui/date-range-field
+
+Group: date-time
+Docs: https://ui.zyncat.app/date-range
+
+Two-tap auto-ordering window; value DateRange { start, end } | null; commits when both ends exist.
+
+```tsx
+<DateRangeField label="Reporting period" value={r} onChange={setR} />
+```

package/src/components/composites/date-picker/DateTimeField.tsx

@@ -1,13 +1,15 @@
 'use client';
 
 import './date-picker.css';
-import { useState, useEffect } from 'react';
-import { Popover } from '../popover/Popover';
-import { FieldShell, FieldTrigger, type DateFieldBaseProps } from './field-shell';
+
+import { useEffect, useState } from 'react';
+
 import { useControllable } from '../../internal/hooks/use-controllable';
-import { TimeSegments, disp12 } from './time-core';
+import { Popover } from '../popover/Popover';
 import { DtpPanel } from './calendar-panel';
-import { pad, displayDay } from './date-utils';
+import { displayDay, pad } from './date-utils';
+import { FieldShell, FieldTrigger, type DateFieldBaseProps } from './field-shell';
+import { disp12, TimeSegments } from './time-core';
 
 interface DateTimeParts {
   date: string | null;
@@ -64,6 +66,7 @@ export function DateTimeField({
   disabled = false,
   className = '',
   htmlProps,
+  activateOn = 'pointerdown',
   animation,
 }: DateTimeFieldProps) {
   const [val, commit] = useControllable<string | null>(
@@ -125,6 +128,7 @@ export function DateTimeField({
         trigger={trigger}
         side="bottom"
         align="start"
+        activateOn={activateOn}
         animation={animation}
         open={pickerOpen}
         onOpenChange={setPickerOpen}
@@ -137,6 +141,7 @@ export function DateTimeField({
           max={maxL.date}
           timezone={timezone}
           label={label}
+          activateOn={activateOn}
           slot={
             <div className="dtp__time">
               <span className="dtp__timeLabel">Time</span>

package/src/components/composites/date-picker/DateTimeField.usage.md

@@ -0,0 +1,12 @@
+# DateTimeField - @zyncat/ui/datetime-field
+
+Group: date-time
+Docs: https://ui.zyncat.app/datetime-field
+
+Calendar + segmented HH:MM; value 'YYYY-MM-DDTHH:mm'.
+
+format 12h|24h, minuteStep.
+
+```tsx
+<DateTimeField label="Due at" value={v} onChange={setV} format="12h" minuteStep={15} />
+```

package/src/components/composites/date-picker/TimeField.tsx

@@ -1,9 +1,11 @@
 'use client';
 
 import './date-picker.css';
+
 import type { PointerEvent } from 'react';
-import { FieldShell, type DateFieldBaseProps } from './field-shell';
+
 import { useControllable } from '../../internal/hooks/use-controllable';
+import { FieldShell, type DateFieldBaseProps } from './field-shell';
 import { TimeSegments } from './time-core';
 
 export interface TimeFieldProps extends DateFieldBaseProps {

package/src/components/composites/date-picker/TimeField.usage.md

@@ -0,0 +1,12 @@
+# TimeField - @zyncat/ui/time-field
+
+Group: date-time
+Docs: https://ui.zyncat.app/time-field
+
+Standalone segmented time; value 'HH:mm'; bounds saturate.
+
+format, minuteStep.
+
+```tsx
+<TimeField label="Send at" value={t} onChange={setT} format="12h" minuteStep={15} />
+```

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

@@ -1,16 +1,20 @@
 'use client';
 
 import './date-picker.css';
+
 import { useEffect, useId, useRef, useState, type KeyboardEvent, type ReactNode } from 'react';
+
 import { animate } from '../../../engine';
+import { Motion } from '../../../motion/element';
+import { GlidePill, useGlide } from '../../../motion/glide';
+import { slideIn } from '../../../motion/presets';
 import { UIMotion } from '../../../tokens/motion-tokens';
 import { Icon } from '../../internal/icon/Icon';
+import { activationProps, type ActivateOn } from '../../internal/utils/activation';
+import { cx } from '../../internal/utils/cx';
 import { Button } from '../../primitives/button/Button';
-import { GlidePill, useGlide } from '../../../motion/glide';
-import { Motion } from '../../../motion/element';
+import { col, DOW, grid, MONTHS, parse, today, toKey, tzLabel, within } from './date-utils';
 import { useDayFocus } from './use-day-focus';
-import { MONTHS, DOW, toKey, parse, col, today, grid, tzLabel, within } from './date-utils';
-import { cx } from '../../internal/utils/cx';
 
 const PILL_FLIP = { timing: UIMotion.t.settle };
 
@@ -23,9 +27,10 @@ interface DtpPanelProps {
   timezone?: string;
   label?: string;
   slot?: ReactNode;
+  activateOn?: ActivateOn;
 }
 
-export function DtpPanel({ val, commit, min, max, timezone, label, close, slot }: DtpPanelProps) {
+export function DtpPanel({ val, commit, min, max, timezone, label, close, slot, activateOn }: DtpPanelProps) {
   const seed = val ? parse(val) : new Date();
   const [view, setView] = useState<{ y: number; m: number }>({ y: seed.getFullYear(), m: seed.getMonth() });
   const [focusKey, setFocusKey] = useState<string>(val || today());
@@ -72,7 +77,7 @@ export function DtpPanel({ val, commit, min, max, timezone, label, close, slot }
     const el = daysRef.current;
     if (prev == null || prev === viewIdx || !el) return;
     const dir = viewIdx > prev ? 1 : -1;
-    animate(el, { x: [dir * 16, 0], opacity: [0, 1], timing: UIMotion.t.enter });
+    animate(el, slideIn(dir * UIMotion.dist.md, UIMotion.t.enter));
   }, [viewIdx]);
 
   function moveFocus(deltaDays: number, deltaMonths: number) {
@@ -133,7 +138,7 @@ export function DtpPanel({ val, commit, min, max, timezone, label, close, slot }
               className="dtp__nav"
               aria-label="Previous month"
               disabled={!canPrev}
-              onClick={() => nav(-1)}
+              {...activationProps<HTMLButtonElement>(() => nav(-1), { on: activateOn })}
             >
               <Icon name="caret-left" size="sm" />
             </button>
@@ -142,7 +147,7 @@ export function DtpPanel({ val, commit, min, max, timezone, label, close, slot }
               className="dtp__nav"
               aria-label="Go to today"
               disabled={viewIsCurrent}
-              onClick={goToToday}
+              {...activationProps<HTMLButtonElement>(goToToday, { on: activateOn })}
             >
               <Icon name="calendar-dot" size="sm" />
             </button>
@@ -151,7 +156,7 @@ export function DtpPanel({ val, commit, min, max, timezone, label, close, slot }
               className="dtp__nav"
               aria-label="Next month"
               disabled={!canNext}
-              onClick={() => nav(1)}
+              {...activationProps<HTMLButtonElement>(() => nav(1), { on: activateOn })}
             >
               <Icon name="caret-right" size="sm" />
             </button>
@@ -188,7 +193,7 @@ export function DtpPanel({ val, commit, min, max, timezone, label, close, slot }
                     tabIndex={key === tabKey ? 0 : -1}
                     aria-selected={sel || undefined}
                     aria-label={MONTHS[d.getMonth()] + ' ' + d.getDate() + ', ' + d.getFullYear()}
-                    onClick={() => pickDay(key)}
+                    {...activationProps<HTMLButtonElement>(() => pickDay(key), { on: activateOn })}
                     onPointerEnter={(e) => glide.enter(e.currentTarget)}
                   >
                     {sel ? (