@zyncat/ui 0.8.0

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

@@ -0,0 +1,110 @@
+'use client';
+
+import './date-picker.css';
+import { useEffect, useState } from 'react';
+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;
+}
+
+export interface DateRangeFieldProps extends DateFieldBaseProps {
+  /** Controlled value - both endpoints, or null when empty. */
+  value?: DateRange | null;
+  /** Uncontrolled initial range. Use instead of `value`. @default null */
+  defaultValue?: DateRange | null;
+  /** Fires only on a COMPLETE range (a lone anchor never commits). */
+  onChange?: (value: DateRange) => void;
+  /** Trigger text shown when no range is picked. @default 'Pick a date range' */
+  placeholder?: string;
+  /** IANA timezone (e.g. 'Europe/Riga') - display context, shown in the footer. */
+  timezone?: string;
+  /** Earliest pickable date, 'YYYY-MM-DD', inclusive. */
+  min?: string;
+  /** Latest pickable date, 'YYYY-MM-DD', inclusive. */
+  max?: string;
+}
+
+export function DateRangeField({
+  value,
+  defaultValue = null,
+  onChange,
+  label,
+  placeholder = 'Pick a date range',
+  timezone,
+  min,
+  max,
+  required = false,
+  invalid = false,
+  message,
+  disabled = false,
+  className = '',
+  htmlProps,
+  animation,
+}: DateRangeFieldProps) {
+  const [val, commit] = useControllable(value, defaultValue, onChange);
+
+  const narrow = useNarrowViewport();
+  const [pickerOpen, setPickerOpen] = useState(false);
+
+  const display = val && val.start && val.end ? drpRangeText(val.start, val.end) : null;
+  const trigger = <FieldTrigger display={display} placeholder={placeholder} disabled={disabled} />;
+  const panel = (
+    <DrpPanel
+      value={val}
+      commit={commit}
+      close={() => setPickerOpen(false)}
+      min={min}
+      max={max}
+      timezone={timezone}
+      label={label}
+      months={narrow ? 1 : 2}
+      layout={narrow ? 'sheet' : 'popover'}
+    />
+  );
+
+  return (
+    <FieldShell
+      variant="dtf"
+      label={label}
+      required={required}
+      invalid={invalid}
+      message={message}
+      icon="calendar"
+      className={className}
+      htmlProps={htmlProps}
+    >
+      {narrow ? (
+        <Sheet trigger={trigger} side="bottom" open={pickerOpen} onOpenChange={setPickerOpen} animation={animation}>
+          {panel}
+        </Sheet>
+      ) : (
+        <Popover
+          trigger={trigger}
+          side="bottom"
+          align="start"
+          open={pickerOpen}
+          onOpenChange={setPickerOpen}
+          animation={animation}
+        >
+          {panel}
+        </Popover>
+      )}
+    </FieldShell>
+  );
+}

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

@@ -0,0 +1,162 @@
+'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 { useControllable } from '../../internal/hooks/use-controllable';
+import { TimeSegments, disp12 } from './time-core';
+import { DtpPanel } from './calendar-panel';
+import { pad, displayDay } from './date-utils';
+
+interface DateTimeParts {
+  date: string | null;
+  time: string | null;
+}
+
+function displayTime(t: string, format?: '24h' | '12h'): string {
+  if (format !== '12h') return t;
+  const p = t.split(':').map(Number);
+  const mer = p[0] >= 12 ? 'PM' : 'AM';
+  return disp12(p[0]) + ':' + pad(p[1]) + ' ' + mer;
+}
+function dttfSplit(v: string | null | undefined): DateTimeParts {
+  if (!v) return { date: null, time: null };
+  const i = v.indexOf('T');
+  return i < 0 ? { date: v, time: null } : { date: v.slice(0, i), time: v.slice(i + 1) };
+}
+
+export interface DateTimeFieldProps extends DateFieldBaseProps {
+  /** Controlled value, 'YYYY-MM-DDTHH:mm'. */
+  value?: string | null;
+  /** Uncontrolled initial value, 'YYYY-MM-DDTHH:mm'. Use instead of `value`. @default null */
+  defaultValue?: string | null;
+  /** Fires once both date and time are set, with 'YYYY-MM-DDTHH:mm' (an incomplete half never commits). */
+  onChange?: (value: string) => void;
+  /** Trigger text shown when no value is picked. @default 'Pick date & time' */
+  placeholder?: string;
+  /** IANA timezone (e.g. 'Europe/Riga') - display context, shown in the footer. */
+  timezone?: string;
+  /** Lower bound - 'YYYY-MM-DD' or 'YYYY-MM-DDTHH:mm', inclusive. */
+  min?: string;
+  /** Upper bound - 'YYYY-MM-DD' or 'YYYY-MM-DDTHH:mm', inclusive. */
+  max?: string;
+  /** Time display only; storage stays 24h. Default '24h'. */
+  format?: '24h' | '12h';
+  /** ↑/↓ step granularity in minutes (typing is exact). Default 5. */
+  minuteStep?: number;
+}
+
+export function DateTimeField({
+  value,
+  defaultValue = null,
+  onChange,
+  label,
+  placeholder = 'Pick date & time',
+  timezone,
+  min,
+  max,
+  format = '24h',
+  minuteStep = 5,
+  required = false,
+  invalid = false,
+  message,
+  disabled = false,
+  className = '',
+  htmlProps,
+  animation,
+}: DateTimeFieldProps) {
+  const [val, commit] = useControllable<string | null>(
+    value,
+    defaultValue,
+    onChange as ((next: string | null) => void) | undefined,
+  );
+  const parts = dttfSplit(val);
+
+  const [pickerOpen, setPickerOpen] = useState(false);
+  const [pendDate, setPendDate] = useState<string | null>(null);
+  const [pendTime, setPendTime] = useState<string | null>(null);
+  useEffect(() => {
+    setPendDate(null);
+    setPendTime(null);
+  }, [val]);
+
+  const date = pendDate != null ? pendDate : parts.date;
+  const time = pendTime != null ? pendTime : parts.time;
+
+  const minL = dttfSplit(min);
+  const maxL = dttfSplit(max);
+  const minTime = date && date === minL.date ? minL.time : null;
+  const maxTime = date && date === maxL.date ? maxL.time : null;
+
+  function commitIf(d: string | null, t: string | null) {
+    if (!d || !t) return;
+    let tt = t;
+    if (minL.time && d === minL.date && tt < minL.time) tt = minL.time;
+    if (maxL.time && d === maxL.date && tt > maxL.time) tt = maxL.time;
+    if (tt !== t) setPendTime(tt);
+    const next = d + 'T' + tt;
+    if (next !== val) commit(next);
+  }
+  function handleDate(d: string) {
+    setPendDate(d);
+    commitIf(d, time);
+  }
+  function handleTime(t: string) {
+    setPendTime(t);
+    commitIf(date, t);
+  }
+
+  const display = date ? displayDay(date) + ', ' + (time ? displayTime(time, format) : '--:--') : null;
+  const trigger = <FieldTrigger display={display} placeholder={placeholder} disabled={disabled} />;
+
+  return (
+    <FieldShell
+      variant="dtf"
+      label={label}
+      required={required}
+      invalid={invalid}
+      message={message}
+      icon="calendar"
+      className={className}
+      htmlProps={htmlProps}
+    >
+      <Popover
+        trigger={trigger}
+        side="bottom"
+        align="start"
+        animation={animation}
+        open={pickerOpen}
+        onOpenChange={setPickerOpen}
+      >
+        <DtpPanel
+          val={date}
+          commit={handleDate}
+          close={() => setPickerOpen(false)}
+          min={minL.date}
+          max={maxL.date}
+          timezone={timezone}
+          label={label}
+          slot={
+            <div className="dtp__time">
+              <span className="dtp__timeLabel">Time</span>
+              <span className="dtp__timeHint" aria-hidden="true">
+                <kbd>↑</kbd>
+                <kbd>↓</kbd>
+              </span>
+              <TimeSegments
+                value={time}
+                onCommit={handleTime}
+                format={format}
+                minuteStep={minuteStep}
+                min={minTime}
+                max={maxTime}
+                ariaLabel="Time"
+              />
+            </div>
+          }
+        />
+      </Popover>
+    </FieldShell>
+  );
+}

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

@@ -0,0 +1,78 @@
+'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 { TimeSegments } from './time-core';
+
+export interface TimeFieldProps extends DateFieldBaseProps {
+  /** Controlled value, canonical 'HH:mm' (24h). */
+  value?: string | null;
+  /** Uncontrolled initial value, 'HH:mm' (24h). Use instead of `value`. @default null */
+  defaultValue?: string | null;
+  /** Fires live - the instant both segments exist. */
+  onChange?: (value: string) => void;
+  /** Field label rendered above the box; also the segments' `aria-label` fallback. */
+  label?: string;
+  /** Display only; storage stays 24h. Default '24h'. */
+  format?: '24h' | '12h';
+  /** ↑/↓ step granularity in minutes (typing is exact). Default 5. */
+  minuteStep?: number;
+  /** Lower bound 'HH:mm' - saturates, never errors. */
+  min?: string;
+  /** Upper bound 'HH:mm' - saturates, never errors. */
+  max?: string;
+}
+
+export function TimeField({
+  value, // controlled: 'HH:mm' | null
+  defaultValue = null,
+  onChange,
+  label,
+  format = '24h',
+  minuteStep = 5,
+  min,
+  max,
+  required = false,
+  invalid = false,
+  message,
+  disabled = false,
+  className = '',
+  htmlProps,
+}: TimeFieldProps) {
+  const [val, commit] = useControllable(value, defaultValue, onChange);
+
+  function onBoxPointerDown(e: PointerEvent<HTMLDivElement>) {
+    if (disabled || (e.target as HTMLElement).closest('.tsg__seg')) return;
+    e.preventDefault();
+    const seg = e.currentTarget.querySelector('.tsg__seg') as HTMLElement | null;
+    if (seg) seg.focus();
+  }
+
+  return (
+    <FieldShell
+      variant="tfd"
+      label={label}
+      required={required}
+      invalid={invalid}
+      message={message}
+      icon="clock"
+      className={className}
+      htmlProps={htmlProps}
+    >
+      <div className={'fld__input tfd__box' + (disabled ? ' is-disabled' : '')} onPointerDown={onBoxPointerDown}>
+        <TimeSegments
+          value={val}
+          onCommit={commit}
+          format={format}
+          minuteStep={minuteStep}
+          min={min}
+          max={max}
+          disabled={disabled}
+          ariaLabel={label || 'Time'}
+        />
+      </div>
+    </FieldShell>
+  );
+}

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

@@ -0,0 +1,216 @@
+'use client';
+
+import './date-picker.css';
+import { useEffect, useId, useRef, useState, type KeyboardEvent, type ReactNode } from 'react';
+import { animate } from '../../../engine';
+import { UIMotion } from '../../../tokens/motion-tokens';
+import { Icon } from '../../internal/icon/Icon';
+import { Button } from '../../primitives/button/Button';
+import { GlidePill, useGlide } from '../../../motion/glide';
+import { useSharedFlip } from '../../../motion/flip';
+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';
+
+interface DtpPanelProps {
+  val: string | null;
+  commit: (key: string) => void;
+  close: () => void;
+  min?: string;
+  max?: string;
+  timezone?: string;
+  label?: string;
+  slot?: ReactNode;
+}
+
+export function DtpPanel({ val, commit, min, max, timezone, label, close, slot }: 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());
+
+  const daysRef = useRef<HTMLDivElement>(null);
+  const prevViewRef = useRef<number | null>(null);
+  const uid = useId();
+  const pillId = 'dtp-pill-' + uid;
+
+  const glide = useGlide(daysRef);
+  const pillRef = useSharedFlip<HTMLSpanElement>(pillId, { timing: UIMotion.t.settle });
+
+  const inRange = (key: string): boolean => within(key, min, max);
+
+  function pickDay(key: string) {
+    if (!inRange(key)) return;
+    armFocus();
+    setFocusKey(key);
+    const d = parse(key);
+    goToMonth(d.getFullYear(), d.getMonth());
+    commit(key);
+  }
+
+  function goToMonth(y: number, m: number) {
+    setView((v) => (v.y === y && v.m === m ? v : { y: y, m: m }));
+  }
+  function nav(dir: number) {
+    const d = new Date(view.y, view.m + dir, 1);
+    goToMonth(d.getFullYear(), d.getMonth());
+  }
+  const now = new Date();
+  const viewIsCurrent = view.y === now.getFullYear() && view.m === now.getMonth();
+  function goToToday() {
+    const key = today();
+    const d = parse(key);
+    armFocus();
+    setFocusKey(key);
+    goToMonth(d.getFullYear(), d.getMonth());
+  }
+  const viewIdx = view.y * 12 + view.m;
+  const armFocus = useDayFocus(daysRef, focusKey, viewIdx, '[tabindex="0"]:not(:disabled)');
+  useEffect(() => {
+    const prev = prevViewRef.current;
+    prevViewRef.current = viewIdx;
+    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 });
+  }, [viewIdx]);
+
+  function moveFocus(deltaDays: number, deltaMonths: number) {
+    const d = parse(focusKey);
+    if (deltaMonths) d.setMonth(d.getMonth() + deltaMonths);
+    if (deltaDays) d.setDate(d.getDate() + deltaDays);
+    const key = toKey(d);
+    armFocus();
+    setFocusKey(key);
+    goToMonth(d.getFullYear(), d.getMonth());
+  }
+  function onGridKeyDown(e: KeyboardEvent<HTMLDivElement>) {
+    const k = e.key;
+    if (k === 'ArrowLeft') moveFocus(-1, 0);
+    else if (k === 'ArrowRight') moveFocus(1, 0);
+    else if (k === 'ArrowUp') moveFocus(-7, 0);
+    else if (k === 'ArrowDown') moveFocus(7, 0);
+    else if (k === 'PageUp') moveFocus(0, -1);
+    else if (k === 'PageDown') moveFocus(0, 1);
+    else if (k === 'Home') moveFocus(-col(parse(focusKey)), 0);
+    else if (k === 'End') moveFocus(6 - col(parse(focusKey)), 0);
+    else if (k === 'Enter' || k === ' ') pickDay(focusKey);
+    else return;
+    e.preventDefault();
+  }
+
+  const days = grid(view.y, view.m);
+  const todayKey = today();
+  const selKey = val || null;
+  const gridKeys = days.map(toKey);
+  const tabKey =
+    gridKeys.indexOf(focusKey) >= 0
+      ? focusKey
+      : selKey && gridKeys.indexOf(selKey) >= 0
+        ? selKey
+        : gridKeys.indexOf(todayKey) >= 0
+          ? todayKey
+          : toKey(new Date(view.y, view.m, 1));
+
+  const prevEnd = toKey(new Date(view.y, view.m, 0));
+  const nextStart = toKey(new Date(view.y, view.m + 1, 1));
+  const canPrev = !min || prevEnd >= min;
+  const canNext = !max || nextStart <= max;
+
+  const weeks: Date[][] = [];
+  for (let w = 0; w < 6; w++) weeks.push(days.slice(w * 7, w * 7 + 7));
+
+  return (
+    <div className="dtp" role="dialog" aria-label={label || 'Pick a date'}>
+      <div className="dtp__cal">
+        <div className="dtp__head">
+          <span className="dtp__month" aria-live="polite">
+            {MONTHS[view.m]} <span className="dtp__year">{view.y}</span>
+          </span>
+          <div className="dtp__navs">
+            <button
+              type="button"
+              className="dtp__nav"
+              aria-label="Previous month"
+              disabled={!canPrev}
+              onClick={() => nav(-1)}
+            >
+              <Icon name="caret-left" size="sm" />
+            </button>
+            <button
+              type="button"
+              className="dtp__nav"
+              aria-label="Go to today"
+              disabled={viewIsCurrent}
+              onClick={goToToday}
+            >
+              <Icon name="calendar-dot" size="sm" />
+            </button>
+            <button
+              type="button"
+              className="dtp__nav"
+              aria-label="Next month"
+              disabled={!canNext}
+              onClick={() => nav(1)}
+            >
+              <Icon name="caret-right" size="sm" />
+            </button>
+          </div>
+        </div>
+        <div className="dtp__dow" aria-hidden="true">
+          {DOW.map((d) => (
+            <span key={d}>{d}</span>
+          ))}
+        </div>
+        <div
+          className="dtp__days"
+          ref={daysRef}
+          role="grid"
+          aria-label="Calendar"
+          onKeyDown={onGridKeyDown}
+          onPointerLeave={glide.leave}
+        >
+          {weeks.map((week, wi) => (
+            <div key={wi} role="row" className="dtp__row">
+              {week.map((d) => {
+                const key = toKey(d);
+                const out = d.getMonth() !== view.m;
+                const sel = key === selKey;
+                const cls = cx('dtp__day', out && 'is-out', sel && 'is-selected', key === todayKey && 'is-today');
+                return (
+                  <button
+                    key={key}
+                    type="button"
+                    role="gridcell"
+                    data-key={key}
+                    className={cls}
+                    disabled={!inRange(key)}
+                    tabIndex={key === tabKey ? 0 : -1}
+                    aria-selected={sel || undefined}
+                    aria-label={MONTHS[d.getMonth()] + ' ' + d.getDate() + ', ' + d.getFullYear()}
+                    onClick={() => pickDay(key)}
+                    onPointerEnter={(e) => glide.enter(e.currentTarget)}
+                  >
+                    {sel ? <span className="dtp__pill" aria-hidden="true" ref={pillRef}></span> : null}
+                    <span className="dtp__num">{d.getDate()}</span>
+                    {key === todayKey ? <span className="dtp__dot" aria-hidden="true"></span> : null}
+                  </button>
+                );
+              })}
+            </div>
+          ))}
+          <GlidePill className="dtp__hover" glide={glide} />
+        </div>
+      </div>
+
+      {slot || null}
+
+      <div className="dtp__foot">
+        {timezone ? <span className="dtp__tz">{tzLabel(timezone, selKey)}</span> : null}
+        <span className="dtp__footSpacer"></span>
+        <Button variant="primary" size="sm" onClick={close}>
+          Done
+        </Button>
+      </div>
+    </div>
+  );
+}