@zyncat/ui 0.8.0 → 0.9.1

package/src/components/primitives/button/Button.tsx

@@ -19,10 +19,6 @@ interface ButtonOwnProps {
   disabled?: boolean;
   /** Loading - swaps content for a spinner and makes the button inert. */
   loading?: boolean;
-  /** Leading icon node (e.g. a 16px <Icon>). Sized & aligned by the component. */
-  iconLeft?: ReactNode;
-  /** Trailing icon node. */
-  iconRight?: ReactNode;
   /** Stretch to fill the container width. */
   fullWidth?: boolean;
   /** Extra class(es) merged onto the button. */
@@ -51,8 +47,6 @@ export function Button({
   type = 'button',
   disabled = false,
   loading = false,
-  iconLeft = null,
-  iconRight = null,
   fullWidth = false,
   className = '',
   style,
@@ -85,17 +79,7 @@ export function Button({
       {...rest}
       {...htmlProps}
     >
-      {iconLeft ? (
-        <span className="btn__icon" aria-hidden="true">
-          {iconLeft}
-        </span>
-      ) : null}
       <span className="btn__label">{children}</span>
-      {iconRight ? (
-        <span className="btn__icon" aria-hidden="true">
-          {iconRight}
-        </span>
-      ) : null}
       {loading ? <span className="btn__spinner" aria-hidden="true" /> : null}
     </button>
   );

package/src/components/primitives/button/button.css

@@ -16,13 +16,14 @@
 .btn {
   --btn-shadow: none;
   --btn-ring: var(--ring-accent);
+  --btn-gap: var(--space-2);
 
   position: relative;
   isolation: isolate;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: var(--space-2);
+  gap: var(--btn-gap);
 
   height: var(--control-height);
   padding: 0 var(--space-4);
@@ -64,7 +65,7 @@
   padding: 0 var(--space-3);
   font-size: var(--size-caption);
   border-radius: var(--radius-sm);
-  gap: var(--space-1);
+  --btn-gap: var(--space-1);
 }
 .btn--lg {
   height: var(--control-height-lg);
@@ -77,9 +78,16 @@
 .btn--icon {
   width: var(--control-height-sm);
   height: var(--control-height-sm);
+  padding: 0;
   border-radius: var(--radius-sm);
 }
 
+.btn__label {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--btn-gap);
+}
+
 .btn__icon {
   display: inline-flex;
   flex: none;

package/src/components/primitives/radio-group/RadioGroup.tsx

@@ -6,13 +6,15 @@ import { Icon } from '../../internal/icon/Icon';
 import { IconSlot } from '../../internal/icon/IconSlot';
 import { Collapse } from '../collapse/Collapse';
 import { GlidePill, useGlide } from '../../../motion/glide';
-import { useSharedFlip } from '../../../motion/flip';
+import { Motion } from '../../../motion/element';
 import { UIMotion } from '../../../tokens/motion-tokens';
 import type { DataAttributes } from '../../../dom-props';
 import { cx } from '../../internal/utils/cx';
 import type { FieldRequirementProps } from '../input/field-chrome';
 
 const SM = UIMotion;
+const LAYOUT_FLIP = { timing: SM.t.layout };
+const HOVER_FLIP = { scale: false, timing: SM.t.layout };
 
 export interface RadioOption {
   /** The stored value - what `onChange` returns and `value` matches. */
@@ -83,9 +85,6 @@ export function RadioGroup({
   const [hovered, setHovered] = useState<string | null>(null);
   const optionsRef = useRef<HTMLDivElement>(null);
   const glide = useGlide(optionsRef);
-  const markerRef = useSharedFlip<HTMLSpanElement>(groupId + ':marker', { timing: SM.t.layout });
-  const fillRef = useSharedFlip<HTMLSpanElement>(groupId + ':card-fill', { timing: SM.t.layout });
-  const cardHoverRef = useSharedFlip<HTMLSpanElement>(groupId + ':card-hover', { scale: false, timing: SM.t.layout });
 
   const cls = cx(
     'rg',
@@ -148,10 +147,22 @@ export function RadioGroup({
                 onChange={() => onChange && onChange(opt.value)}
               />
               {variant === 'cards' && hovered === opt.value && !selected && (
-                <span className="rg__card-hover" aria-hidden="true" ref={cardHoverRef}></span>
+                <Motion
+                  as="span"
+                  layoutId={groupId + ':card-hover'}
+                  layoutTransition={HOVER_FLIP}
+                  className="rg__card-hover"
+                  aria-hidden="true"
+                />
               )}
               {variant === 'cards' && selected && (
-                <span className="rg__card-fill" aria-hidden="true" ref={fillRef}></span>
+                <Motion
+                  as="span"
+                  layoutId={groupId + ':card-fill'}
+                  layoutTransition={LAYOUT_FLIP}
+                  className="rg__card-fill"
+                  aria-hidden="true"
+                />
               )}
               {variant === 'cards' && opt.icon && (
                 <span className="rg-opt__icon">
@@ -160,7 +171,15 @@ export function RadioGroup({
               )}
               <span className="rg-opt__control">
                 <span className="rg-opt__dot">
-                  {selected && <span className="rg__marker" aria-hidden="true" ref={markerRef}></span>}
+                  {selected && (
+                    <Motion
+                      as="span"
+                      layoutId={groupId + ':marker'}
+                      layoutTransition={LAYOUT_FLIP}
+                      className="rg__marker"
+                      aria-hidden="true"
+                    />
+                  )}
                 </span>
               </span>
               <span className="rg-opt__body">

package/src/components/primitives/tag/Tag.tsx

@@ -102,7 +102,8 @@ export function Tag({
       ref={ref}
       animate={group?.animate}
       exit={group?.exit}
-      layout={group?.layout}
+      layout={!!group}
+      layoutTransition={group?.layout}
       className={cls}
       style={style}
       data-disabled={disabled ? 'true' : undefined}

package/src/engine/ease.ts

@@ -14,40 +14,13 @@ const NAMED: Record<string, Bezier> = {
   anticipate: [0.38, -0.4, 0.88, 1.08],
 };
 
-const bezierCurve = (a: number, b: number, t: number) => {
-  const u = 1 - t;
-  return 3 * a * u * u * t + 3 * b * u * t * t + t * t * t;
-};
-
-const bezierSlope = (a: number, b: number, t: number) => {
-  const u = 1 - t;
-  return 3 * a * (u * u - 2 * t * u) + 3 * b * (2 * t * u - t * t) + 3 * t * t;
-};
-
-export function bezierAt(b: Bezier, x: number): number {
-  const [x1, y1, x2, y2] = b;
-  if (x1 === y1 && x2 === y2) return x;
-  if (x <= 0) return 0;
-  if (x >= 1) return 1;
-  let t = x;
-  for (let i = 0; i < 8; i++) {
-    const err = bezierCurve(x1, x2, t) - x;
-    if (err < 1e-4 && err > -1e-4) break;
-    const slope = bezierSlope(x1, x2, t);
-    if (slope < 1e-6 && slope > -1e-6) break;
-    t -= err / slope;
-  }
-  return bezierCurve(y1, y2, t);
-}
-
 export type EaseValue = NonNullable<MotionTransition['ease']>;
 
-export const toBezier = (ease: EaseValue): Bezier =>
-  typeof ease === 'string' ? (NAMED[ease] ?? NAMED.easeInOut) : ease;
+const toBezier = (ease: EaseValue): Bezier => (typeof ease === 'string' ? (NAMED[ease] ?? NAMED.easeInOut) : ease);
 
-export const cssBezier = (ease: EaseValue): string => `cubic-bezier(${toBezier(ease).join(',')})`;
+const cssBezier = (ease: EaseValue): string => `cubic-bezier(${toBezier(ease).join(',')})`;
 
-export const isSegmented = (ease: unknown): ease is EaseValue[] =>
+const isSegmented = (ease: unknown): ease is EaseValue[] =>
   Array.isArray(ease) && (Array.isArray(ease[0]) || typeof ease[0] === 'string');
 
 const ARRIVAL = 0.99;
@@ -103,7 +76,6 @@ function toLinearEasing(at: (progress: number) => number, durationMs: number): s
 interface SpringCurve {
   duration: number;
   easing: string;
-  at(progress: number): number;
 }
 
 const springCache = new Map<string, SpringCurve>();
@@ -117,7 +89,7 @@ function springCurve(visual: number, bounce: number): SpringCurve {
   const seconds = settleSeconds(zeta, omega, visual);
   const duration = seconds * 1000;
   const at = (progress: number) => (progress >= 1 ? 1 : springAt(zeta, omega, progress * seconds));
-  const curve: SpringCurve = { duration, easing: toLinearEasing(at, duration), at };
+  const curve: SpringCurve = { duration, easing: toLinearEasing(at, duration) };
   springCache.set(key, curve);
   return curve;
 }
@@ -133,7 +105,6 @@ export interface ResolvedTiming {
   delay: number;
   easing: string;
   segments: string[] | null;
-  at(progress: number): number;
 }
 
 export function resolveTiming(timing: Timing = {}): ResolvedTiming {
@@ -142,14 +113,11 @@ export function resolveTiming(timing: Timing = {}): ResolvedTiming {
   if (spring) {
     const visual = Math.max(timing.visualDuration ?? timing.duration ?? 0.3, 0.01);
     const curve = springCurve(visual, timing.bounce ?? 0);
-    return { duration: curve.duration, delay, easing: curve.easing, segments: null, at: curve.at };
+    return { duration: curve.duration, delay, easing: curve.easing, segments: null };
   }
   const duration = (timing.duration ?? 0.3) * 1000;
   const ease = timing.ease;
-  if (isSegmented(ease)) {
-    const first = toBezier(ease[0]);
-    return { duration, delay, easing: 'linear', segments: ease.map(cssBezier), at: (p) => bezierAt(first, p) };
-  }
+  if (isSegmented(ease)) return { duration, delay, easing: 'linear', segments: ease.map(cssBezier) };
   const bezier = ease === undefined ? NAMED.easeInOut : toBezier(ease);
-  return { duration, delay, easing: cssBezier(bezier), segments: null, at: (p) => bezierAt(bezier, p) };
+  return { duration, delay, easing: cssBezier(bezier), segments: null };
 }

package/src/engine/index.ts

@@ -1,13 +1,3 @@
-export { animate, clock, type Layer, type Playback, type Size } from './animate';
-export {
-  bezierAt,
-  cssBezier,
-  isSegmented,
-  resolveTiming,
-  toBezier,
-  type EaseValue,
-  type ResolvedTiming,
-  type Timing,
-} from './ease';
+export { animate, clock, type Layer, type Playback } from './animate';
 export { flip, measure, keepShared, readShared, dropShared, type Box, type FlipOptions } from './flip';
 export { startDrag, type PanInfo } from './drag';

package/src/motion/element.tsx

@@ -1,16 +1,18 @@
 'use client';
 
 import { createElement, useCallback, useRef, type ReactNode, type Ref } from 'react';
-import { useSelfFlip, useSharedFlip, type FlipTuning } from './flip';
+import { useFlip, type FlipTuning } from './flip';
 import { useMotion, type MotionSpecs } from './use-motion';
 
 export interface MotionProps extends MotionSpecs {
   /** Tag for the element this renders. @default 'div' */
   as?: string;
-  /** FLIP this element from its previous box on every render; an object tunes the timing. */
-  layout?: boolean | FlipTuning;
+  /** FLIP this element from its previous box on every render. Implied by `layoutId`. */
+  layout?: boolean;
   /** FLIP from whatever element last held this id, so the box travels between nodes. */
   layoutId?: string;
+  /** Tunes whichever layout animation is active; ignored without `layout` or `layoutId`. */
+  layoutTransition?: FlipTuning;
   ref?: Ref<HTMLElement | null>;
   children?: ReactNode;
   [prop: string]: unknown;
@@ -24,13 +26,12 @@ export function Motion({
   deps,
   layout,
   layoutId,
+  layoutTransition,
   ref,
   children,
   ...rest
 }: MotionProps) {
-  const tuning = typeof layout === 'object' ? layout : {};
-  const selfRef = useSelfFlip<HTMLElement>(tuning, !!layout && !layoutId);
-  const sharedRef = useSharedFlip<HTMLElement>(layoutId ?? '', tuning, !!layoutId);
+  const flipRef = useFlip<HTMLElement>(layoutId ?? null, layoutTransition, !!layoutId || !!layout);
   const host = useRef<HTMLElement | null>(null);
   const forwarded = useRef(ref);
   forwarded.current = ref;
@@ -40,13 +41,12 @@ export function Motion({
   const attach = useCallback(
     (el: HTMLElement | null) => {
       host.current = el;
-      selfRef.current = el;
-      sharedRef.current = el;
+      flipRef.current = el;
       const outer = forwarded.current;
       if (typeof outer === 'function') outer(el);
       else if (outer) outer.current = el;
     },
-    [selfRef, sharedRef],
+    [flipRef],
   );
 
   return createElement(as, { ...rest, ref: attach }, children);

package/src/motion/flip.ts

@@ -0,0 +1,61 @@
+'use client';
+
+import { useLayoutEffect, useRef, type RefObject } from 'react';
+import {
+  dropShared,
+  flip,
+  keepShared,
+  measure,
+  readShared,
+  type Box,
+  type FlipOptions,
+  type Playback,
+} from '../engine';
+import { UIMotion } from '../tokens/motion-tokens';
+
+export type FlipTuning = FlipOptions;
+
+export function useFlip<T extends HTMLElement>(
+  sharedId: string | null,
+  tuning: FlipTuning = {},
+  enabled = true,
+): RefObject<T | null> {
+  const ref = useRef<T | null>(null);
+  const privateBox = useRef<Box | null>(null);
+  const playing = useRef<{ play: Playback; el: T } | null>(null);
+  const { scale, timing } = tuning;
+
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el || !enabled) return;
+    const live = playing.current;
+    const from = live && live.el === el ? measure(el) : sharedId === null ? privateBox.current : readShared(sharedId);
+    live?.play.stop();
+    const settled = measure(el);
+    if (sharedId === null) privateBox.current = settled;
+    else keepShared(sharedId, settled);
+    const next = from && !UIMotion.reduced ? flip(el, from, { scale, timing }) : null;
+    playing.current = next ? { play: next, el } : null;
+    next?.finished.then(() => {
+      if (playing.current?.play === next) playing.current = null;
+    });
+  });
+
+  useLayoutEffect(() => {
+    if (!enabled || sharedId === null) return;
+    return () => {
+      const live = playing.current;
+      if (live) {
+        const box = measure(live.el);
+        if (box.width && box.height) keepShared(sharedId, box);
+        live.play.stop();
+      }
+      const mine = readShared(sharedId);
+      queueMicrotask(() => {
+        if (readShared(sharedId) === mine) dropShared(sharedId);
+      });
+    };
+  }, [sharedId, enabled]);
+
+  return ref;
+}

package/src/motion/presence-context.ts

@@ -7,11 +7,12 @@ export interface PresenceState {
   isPresent: boolean;
   /** False for children present at the Presence's own first paint when `initial={false}`. */
   initial: boolean;
-  /** Called by the child when its exit has finished; lets Presence drop it from the tree. */
-  safeToRemove: () => void;
+  /** Claims responsibility for animating this child out; call the returned release once the
+   *  exit has finished. A child nobody claims is dropped as soon as it leaves `children`. */
+  claimExit: () => () => void;
 }
 
-const DETACHED: PresenceState = { isPresent: true, initial: true, safeToRemove: () => {} };
+const DETACHED: PresenceState = { isPresent: true, initial: true, claimExit: () => () => {} };
 
 export const PresenceContext = createContext<PresenceState>(DETACHED);
 

package/src/motion/presence.tsx

@@ -47,6 +47,29 @@ export function Presence({ children, initial = true, mode = 'sync', onExitComple
   const wasExiting = useRef(false);
   const complete = useRef(onExitComplete);
   complete.current = onExitComplete;
+  const claims = useRef(new Map<string, Set<object>>());
+
+  const drop = (key: string) =>
+    setShown((previous) => {
+      const next = previous.filter((entry) => entry.key !== key || !entry.exiting);
+      return next.length === previous.length ? previous : next;
+    });
+
+  const claimExit = (key: string) => (): (() => void) => {
+    let tokens = claims.current.get(key);
+    if (!tokens) {
+      tokens = new Set<object>();
+      claims.current.set(key, tokens);
+    }
+    const token = {};
+    const held = tokens;
+    held.add(token);
+    return () => {
+      if (!held.delete(token) || held.size) return;
+      if (claims.current.get(key) === held) claims.current.delete(key);
+      drop(key);
+    };
+  };
 
   useLayoutEffect(() => {
     setShown((previous) => {
@@ -54,6 +77,7 @@ export function Presence({ children, initial = true, mode = 'sync', onExitComple
       const merged: Entry[] = incoming.map((entry) => ({ ...entry }));
       previous.forEach((entry, index) => {
         if (live.has(entry.key)) return;
+        if (!claims.current.get(entry.key)?.size) return;
         merged.splice(index, 0, entry.exiting ? entry : { ...entry, exiting: true });
       });
       return merged;
@@ -81,7 +105,7 @@ export function Presence({ children, initial = true, mode = 'sync', onExitComple
           value: {
             isPresent: !entry.exiting,
             initial: initial || !bornAtMount.current.has(entry.key),
-            safeToRemove: () => setShown((previous) => previous.filter((e) => e.key !== entry.key || !e.exiting)),
+            claimExit: claimExit(entry.key),
           },
         },
         fresh.get(entry.key) ?? entry.node,

package/src/motion/use-motion.ts

@@ -36,12 +36,23 @@ export function useMotion(ref: RefObject<HTMLElement | null>, { animate, exit, i
   const mounted = useRef(false);
   const spec = useRef({ animate, exit, initial });
   spec.current = { animate, exit, initial };
+  const release = useRef<(() => void) | null>(null);
+  const ownsExit = !!exit;
 
   const stop = () => {
     for (const play of playing.current) play.stop();
     playing.current = [];
   };
 
+  useLayoutEffect(() => {
+    if (!ownsExit) return;
+    release.current = presence.claimExit();
+    return () => {
+      release.current?.();
+      release.current = null;
+    };
+  }, [ownsExit]); // eslint-disable-line react-hooks/exhaustive-deps
+
   useLayoutEffect(() => {
     const el = ref.current;
     const atMount = !mounted.current;
@@ -53,11 +64,11 @@ export function useMotion(ref: RefObject<HTMLElement | null>, { animate, exit, i
   }, deps ?? []); // eslint-disable-line react-hooks/exhaustive-deps
 
   useLayoutEffect(() => {
-    if (presence.isPresent) return;
+    if (presence.isPresent || !ownsExit) return;
     const el = ref.current;
     stop();
     playing.current = el ? run(spec.current.exit, el) : [];
-    allSettled(playing.current).then(presence.safeToRemove);
+    allSettled(playing.current).then(() => release.current?.());
   }, [presence.isPresent]); // eslint-disable-line react-hooks/exhaustive-deps
 
   useLayoutEffect(() => stop, []);

package/dist/chunk-2HORSLXJ.js.map

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

package/dist/chunk-36WVAQKL.js

@@ -1,40 +0,0 @@
-'use client';import { useMotion } from './chunk-W3SHPKSB.js';
-import { useSelfFlip, useSharedFlip } from './chunk-JSKXZMLH.js';
-import { useRef, useCallback, createElement } from 'react';
-
-function Motion({
-  as = "div",
-  animate,
-  exit,
-  initial,
-  deps,
-  layout,
-  layoutId,
-  ref,
-  children,
-  ...rest
-}) {
-  const tuning = typeof layout === "object" ? layout : {};
-  const selfRef = useSelfFlip(tuning, !!layout && !layoutId);
-  const sharedRef = useSharedFlip(layoutId ?? "", tuning, !!layoutId);
-  const host = useRef(null);
-  const forwarded = useRef(ref);
-  forwarded.current = ref;
-  useMotion(host, { animate, exit, initial, deps });
-  const attach = useCallback(
-    (el) => {
-      host.current = el;
-      selfRef.current = el;
-      sharedRef.current = el;
-      const outer = forwarded.current;
-      if (typeof outer === "function") outer(el);
-      else if (outer) outer.current = el;
-    },
-    [selfRef, sharedRef]
-  );
-  return createElement(as, { ...rest, ref: attach }, children);
-}
-
-export { Motion };
-//# sourceMappingURL=chunk-36WVAQKL.js.map
-//# sourceMappingURL=chunk-36WVAQKL.js.map

package/dist/chunk-36WVAQKL.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/motion/element.tsx"],"names":[],"mappings":";;;;AAkBO,SAAS,MAAA,CAAO;AAAA,EACrB,EAAA,GAAK,KAAA;AAAA,EACL,OAAA;AAAA,EACA,IAAA;AAAA,EACA,OAAA;AAAA,EACA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAgB;AACd,EAAA,MAAM,MAAA,GAAS,OAAO,MAAA,KAAW,QAAA,GAAW,SAAS,EAAC;AACtD,EAAA,MAAM,UAAU,WAAA,CAAyB,MAAA,EAAQ,CAAC,CAAC,MAAA,IAAU,CAAC,QAAQ,CAAA;AACtE,EAAA,MAAM,YAAY,aAAA,CAA2B,QAAA,IAAY,IAAI,MAAA,EAAQ,CAAC,CAAC,QAAQ,CAAA;AAC/E,EAAA,MAAM,IAAA,GAAO,OAA2B,IAAI,CAAA;AAC5C,EAAA,MAAM,SAAA,GAAY,OAAO,GAAG,CAAA;AAC5B,EAAA,SAAA,CAAU,OAAA,GAAU,GAAA;AAEpB,EAAA,SAAA,CAAU,MAAM,EAAE,OAAA,EAAS,IAAA,EAAM,OAAA,EAAS,MAAM,CAAA;AAEhD,EAAA,MAAM,MAAA,GAAS,WAAA;AAAA,IACb,CAAC,EAAA,KAA2B;AAC1B,MAAA,IAAA,CAAK,OAAA,GAAU,EAAA;AACf,MAAA,OAAA,CAAQ,OAAA,GAAU,EAAA;AAClB,MAAA,SAAA,CAAU,OAAA,GAAU,EAAA;AACpB,MAAA,MAAM,QAAQ,SAAA,CAAU,OAAA;AACxB,MAAA,IAAI,OAAO,KAAA,KAAU,UAAA,EAAY,KAAA,CAAM,EAAE,CAAA;AAAA,WAAA,IAChC,KAAA,QAAa,OAAA,GAAU,EAAA;AAAA,IAClC,CAAA;AAAA,IACA,CAAC,SAAS,SAAS;AAAA,GACrB;AAEA,EAAA,OAAO,aAAA,CAAc,IAAI,EAAE,GAAG,MAAM,GAAA,EAAK,MAAA,IAAU,QAAQ,CAAA;AAC7D","file":"chunk-36WVAQKL.js","sourcesContent":["'use client';\n\nimport { createElement, useCallback, useRef, type ReactNode, type Ref } from 'react';\nimport { useSelfFlip, useSharedFlip, type FlipTuning } from './flip';\nimport { useMotion, type MotionSpecs } from './use-motion';\n\nexport interface MotionProps extends MotionSpecs {\n  /** Tag for the element this renders. @default 'div' */\n  as?: string;\n  /** FLIP this element from its previous box on every render; an object tunes the timing. */\n  layout?: boolean | FlipTuning;\n  /** FLIP from whatever element last held this id, so the box travels between nodes. */\n  layoutId?: string;\n  ref?: Ref<HTMLElement | null>;\n  children?: ReactNode;\n  [prop: string]: unknown;\n}\n\nexport function Motion({\n  as = 'div',\n  animate,\n  exit,\n  initial,\n  deps,\n  layout,\n  layoutId,\n  ref,\n  children,\n  ...rest\n}: MotionProps) {\n  const tuning = typeof layout === 'object' ? layout : {};\n  const selfRef = useSelfFlip<HTMLElement>(tuning, !!layout && !layoutId);\n  const sharedRef = useSharedFlip<HTMLElement>(layoutId ?? '', tuning, !!layoutId);\n  const host = useRef<HTMLElement | null>(null);\n  const forwarded = useRef(ref);\n  forwarded.current = ref;\n\n  useMotion(host, { animate, exit, initial, deps });\n\n  const attach = useCallback(\n    (el: HTMLElement | null) => {\n      host.current = el;\n      selfRef.current = el;\n      sharedRef.current = el;\n      const outer = forwarded.current;\n      if (typeof outer === 'function') outer(el);\n      else if (outer) outer.current = el;\n    },\n    [selfRef, sharedRef],\n  );\n\n  return createElement(as, { ...rest, ref: attach }, children);\n}\n"]}

package/dist/chunk-JSKXZMLH.js

@@ -1,67 +0,0 @@
-'use client';import { measure, flip, readShared, keepShared, dropShared } from './chunk-L3Q3VDIW.js';
-import { UIMotion } from './chunk-S5ZTZANS.js';
-import { useRef, useLayoutEffect } from 'react';
-
-function useSelfFlip(tuning = {}, enabled = true) {
-  const ref = useRef(null);
-  const previous = useRef(null);
-  const playing = useRef(null);
-  const { scale, timing } = tuning;
-  useLayoutEffect(() => {
-    const el = ref.current;
-    if (!el || !enabled) return;
-    const from = playing.current ? measure(el) : previous.current;
-    playing.current?.stop();
-    previous.current = measure(el);
-    const next = from && !UIMotion.reduced ? flip(el, from, { scale, timing }) : null;
-    playing.current = next;
-    next?.finished.then(() => {
-      if (playing.current === next) playing.current = null;
-    });
-  });
-  useLayoutEffect(
-    () => () => {
-      playing.current?.stop();
-    },
-    []
-  );
-  return ref;
-}
-function useSharedFlip(id, tuning = {}, enabled = true) {
-  const ref = useRef(null);
-  const playing = useRef(null);
-  const { scale, timing } = tuning;
-  useLayoutEffect(() => {
-    const el = ref.current;
-    if (!el || !enabled) return;
-    const live = playing.current;
-    const from = live && live.el === el ? measure(el) : readShared(id);
-    live?.play.stop();
-    keepShared(id, measure(el));
-    const next = from && !UIMotion.reduced ? flip(el, from, { scale, timing }) : null;
-    playing.current = next ? { play: next, el } : null;
-    next?.finished.then(() => {
-      if (playing.current?.play === next) playing.current = null;
-    });
-  });
-  useLayoutEffect(() => {
-    if (!enabled) return;
-    return () => {
-      const live = playing.current;
-      if (live) {
-        const box = measure(live.el);
-        if (box.width && box.height) keepShared(id, box);
-        live.play.stop();
-      }
-      const mine = readShared(id);
-      queueMicrotask(() => {
-        if (readShared(id) === mine) dropShared(id);
-      });
-    };
-  }, [id, enabled]);
-  return ref;
-}
-
-export { useSelfFlip, useSharedFlip };
-//# sourceMappingURL=chunk-JSKXZMLH.js.map
-//# sourceMappingURL=chunk-JSKXZMLH.js.map

package/dist/chunk-JSKXZMLH.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/motion/flip.tsx"],"names":[],"mappings":"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","file":"chunk-JSKXZMLH.js","sourcesContent":["'use client';\n\nimport { useLayoutEffect, useRef, type RefObject } from 'react';\nimport {\n  dropShared,\n  flip,\n  keepShared,\n  measure,\n  readShared,\n  type Box,\n  type FlipOptions,\n  type Playback,\n} from '../engine';\nimport { UIMotion } from '../tokens/motion-tokens';\n\nexport type FlipTuning = FlipOptions;\n\nexport function useSelfFlip<T extends HTMLElement>(tuning: FlipTuning = {}, enabled = true): RefObject<T | null> {\n  const ref = useRef<T | null>(null);\n  const previous = useRef<Box | null>(null);\n  const playing = useRef<Playback | null>(null);\n  const { scale, timing } = tuning;\n\n  useLayoutEffect(() => {\n    const el = ref.current;\n    if (!el || !enabled) return;\n    const from = playing.current ? measure(el) : previous.current;\n    playing.current?.stop();\n    previous.current = measure(el);\n    const next = from && !UIMotion.reduced ? flip(el, from, { scale, timing }) : null;\n    playing.current = next;\n    next?.finished.then(() => {\n      if (playing.current === next) playing.current = null;\n    });\n  });\n\n  useLayoutEffect(\n    () => () => {\n      playing.current?.stop();\n    },\n    [],\n  );\n\n  return ref;\n}\n\nexport function useSharedFlip<T extends HTMLElement>(\n  id: string,\n  tuning: FlipTuning = {},\n  enabled = true,\n): RefObject<T | null> {\n  const ref = useRef<T | null>(null);\n  const playing = useRef<{ play: Playback; el: T } | null>(null);\n  const { scale, timing } = tuning;\n\n  useLayoutEffect(() => {\n    const el = ref.current;\n    if (!el || !enabled) return;\n    const live = playing.current;\n    const from = live && live.el === el ? measure(el) : readShared(id);\n    live?.play.stop();\n    keepShared(id, measure(el));\n    const next = from && !UIMotion.reduced ? flip(el, from, { scale, timing }) : null;\n    playing.current = next ? { play: next, el } : null;\n    next?.finished.then(() => {\n      if (playing.current?.play === next) playing.current = null;\n    });\n  });\n\n  useLayoutEffect(() => {\n    if (!enabled) return;\n    return () => {\n      const live = playing.current;\n      if (live) {\n        const box = measure(live.el);\n        if (box.width && box.height) keepShared(id, box);\n        live.play.stop();\n      }\n      const mine = readShared(id);\n      queueMicrotask(() => {\n        if (readShared(id) === mine) dropShared(id);\n      });\n    };\n  }, [id, enabled]);\n\n  return ref;\n}\n"]}