@zyncat/ui 0.8.0

package/dist/chunk-XZAEIQDR.js

@@ -0,0 +1,188 @@
+'use client';import { ModalShell } from './chunk-4R2GQO43.js';
+import { ovCloneTrigger, OverlayPortal } from './chunk-GY7JOPUQ.js';
+import { resolveMotionTiming } from './chunk-NEF5XAHG.js';
+import { Presence } from './chunk-MXOPCFWR.js';
+import { animate, startDrag } from './chunk-L3Q3VDIW.js';
+import { useControllable } from './chunk-MMRIQNEN.js';
+import { UIMotion } from './chunk-S5ZTZANS.js';
+import './sheet.css';
+import { useRef, useId, Fragment, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var SM = UIMotion;
+var DISMISS_RATIO = 0.4;
+var DISMISS_VELOCITY = 500;
+var INTENT_PX = 4;
+var STRETCH_MAX = 0.06;
+function findScrollable(node, stop) {
+  let el = node instanceof Element ? node : null;
+  while (el && el !== stop) {
+    const s = getComputedStyle(el);
+    if (/(auto|scroll)/.test(s.overflowY + s.overflowX) && (el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth))
+      return el;
+    el = el.parentElement;
+  }
+  return null;
+}
+function sheetScrim(panel) {
+  return panel?.parentElement?.querySelector(".overlay-scrim") ?? null;
+}
+function sheetSpan(panel, side) {
+  return side === "bottom" ? panel.offsetHeight : panel.offsetWidth;
+}
+function useSheetDrag({
+  side,
+  panelRef,
+  enabled,
+  requestClose
+}) {
+  const axis = side === "bottom" ? "y" : "x";
+  const savedUserSelect = useRef(null);
+  function suspendSelection() {
+    const sel = window.getSelection();
+    if (sel) sel.removeAllRanges();
+    savedUserSelect.current = document.body.style.userSelect;
+    document.body.style.userSelect = "none";
+  }
+  function restoreSelection() {
+    if (savedUserSelect.current === null) return;
+    document.body.style.userSelect = savedUserSelect.current;
+    savedUserSelect.current = null;
+  }
+  useEffect(() => restoreSelection, []);
+  function paint(el, travel, stretch) {
+    const span = sheetSpan(el, side);
+    el.style.translate = axis === "y" ? `0px ${travel}px` : `${travel}px 0px`;
+    el.style.scale = axis === "y" ? `1 ${stretch}` : `${stretch} 1`;
+    const scrim = sheetScrim(el);
+    if (scrim) scrim.style.opacity = String(1 - Math.min(Math.max(travel / span, 0), 1));
+  }
+  function onPointerDown(e) {
+    if (e.button !== 0) return;
+    const startX = e.clientX, startY = e.clientY;
+    const scrollable = findScrollable(e.target, panelRef.current);
+    const onMove = (ev) => {
+      const dx = ev.clientX - startX, dy = ev.clientY - startY;
+      if (Math.max(Math.abs(dx), Math.abs(dy)) < INTENT_PX) return;
+      cleanup();
+      const along = axis === "y" ? dy : dx;
+      const cross = axis === "y" ? dx : dy;
+      if (Math.abs(along) <= Math.abs(cross)) return;
+      if (scrollable) {
+        if (along < 0) return;
+        if (axis === "y" ? scrollable.scrollTop > 0 : scrollable.scrollLeft > 0) return;
+      }
+      suspendSelection();
+      startDrag(ev, { onMove: onDrag, onEnd: onDragEnd });
+    };
+    const cleanup = () => {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", cleanup);
+      window.removeEventListener("pointercancel", cleanup);
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", cleanup);
+    window.addEventListener("pointercancel", cleanup);
+  }
+  function onDrag(info) {
+    const el = panelRef.current;
+    if (!el) return;
+    const o = info.offset[axis];
+    const span = sheetSpan(el, side);
+    paint(el, Math.max(o, 0), o < 0 ? 1 + Math.min(-o / span, 1) * STRETCH_MAX : 1);
+  }
+  function onDragEnd(info) {
+    restoreSelection();
+    const el = panelRef.current;
+    if (!el) return;
+    const span = sheetSpan(el, side);
+    if (info.offset[axis] > span * DISMISS_RATIO || info.velocity[axis] > DISMISS_VELOCITY) {
+      requestClose();
+      return;
+    }
+    animate(el, { x: [0], y: [0], scale: [[1, 1]], timing: SM.t.settle });
+    const scrim = sheetScrim(el);
+    if (scrim) animate(scrim, { opacity: [1], timing: SM.t.settle });
+  }
+  return enabled ? { onPointerDown } : {};
+}
+var SHEET_TIMING = {
+  open: { duration: "slow", ease: "entrance" },
+  close: { duration: "base", ease: "exit" }
+};
+function sheetSlide(slot, side, at) {
+  const frames = at.map((ratio) => ratio * sheetSpan(slot, side));
+  return side === "bottom" ? { y: frames } : { x: frames };
+}
+function SheetShell({
+  side,
+  panelId,
+  dismissible,
+  requestClose,
+  htmlProps,
+  animate: animate2,
+  exit,
+  children
+}) {
+  const panelRef = useRef(null);
+  const dragProps = useSheetDrag({ side, panelRef, enabled: dismissible, requestClose });
+  return /* @__PURE__ */ jsx(
+    ModalShell,
+    {
+      animate: animate2,
+      exit,
+      layerClass: "overlay-layer--sheet-" + side,
+      panelClass: "overlay-panel--sheet-" + side,
+      panelId,
+      dismissible,
+      requestClose,
+      panelRef,
+      panelProps: { ...htmlProps, ...dragProps },
+      children
+    }
+  );
+}
+function Sheet({
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  trigger = null,
+  side = "right",
+  dismissible = true,
+  id,
+  htmlProps,
+  animation,
+  children
+}) {
+  const [open, setOpen] = useControllable(controlledOpen, defaultOpen, onOpenChange);
+  const triggerRef = useRef(null);
+  const autoId = useId();
+  const panelId = id || "sheet-" + autoId;
+  const close = () => setOpen(false);
+  const timings = resolveMotionTiming(animation, SHEET_TIMING);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    ovCloneTrigger(trigger, { open, onPress: () => setOpen(true), panelId, haspopup: "dialog", triggerRef }),
+    /* @__PURE__ */ jsx(OverlayPortal, { children: /* @__PURE__ */ jsx(Presence, { children: open && /* @__PURE__ */ jsx(
+      SheetShell,
+      {
+        animate: (slot) => {
+          const play = animate(slot, { ...sheetSlide(slot, side, [1, 0]), timing: timings.open });
+          play.finished.then(() => play.stop());
+          return play;
+        },
+        exit: (slot) => animate(slot, { ...sheetSlide(slot, side, [1]), timing: timings.close }),
+        side,
+        panelId,
+        dismissible,
+        requestClose: close,
+        htmlProps,
+        children
+      },
+      "sheet"
+    ) }) })
+  ] });
+}
+
+export { Sheet };
+//# sourceMappingURL=chunk-XZAEIQDR.js.map
+//# sourceMappingURL=chunk-XZAEIQDR.js.map

package/dist/chunk-XZAEIQDR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/composites/sheet/use-sheet-drag.ts","../src/components/composites/sheet/Sheet.tsx"],"names":["animate","useRef"],"mappings":"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","file":"chunk-XZAEIQDR.js","sourcesContent":["'use client';\n\nimport { useEffect, useRef, type PointerEvent as ReactPointerEvent, type RefObject } from 'react';\nimport { animate, startDrag, type PanInfo } from '../../../engine';\nimport { UIMotion } from '../../../tokens/motion-tokens';\n\nconst SM = UIMotion;\n\nconst DISMISS_RATIO = 0.4;\nconst DISMISS_VELOCITY = 500;\nconst INTENT_PX = 4;\nconst STRETCH_MAX = 0.06;\n\nfunction findScrollable(node: EventTarget | null, stop: HTMLElement | null): HTMLElement | null {\n  let el = node instanceof Element ? node : null;\n  while (el && el !== stop) {\n    const s = getComputedStyle(el);\n    if (\n      /(auto|scroll)/.test(s.overflowY + s.overflowX) &&\n      (el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth)\n    )\n      return el as HTMLElement;\n    el = el.parentElement;\n  }\n  return null;\n}\n\nfunction sheetScrim(panel: HTMLElement | null): HTMLElement | null {\n  return panel?.parentElement?.querySelector<HTMLElement>('.overlay-scrim') ?? null;\n}\n\nexport function sheetSpan(panel: HTMLElement, side: 'right' | 'bottom'): number {\n  return side === 'bottom' ? panel.offsetHeight : panel.offsetWidth;\n}\n\nexport function useSheetDrag({\n  side,\n  panelRef,\n  enabled,\n  requestClose,\n}: {\n  side: 'right' | 'bottom';\n  panelRef: RefObject<HTMLElement>;\n  enabled: boolean;\n  requestClose: () => void;\n}) {\n  const axis = side === 'bottom' ? 'y' : 'x';\n  const savedUserSelect = useRef<string | null>(null);\n\n  function suspendSelection() {\n    const sel = window.getSelection();\n    if (sel) sel.removeAllRanges();\n    savedUserSelect.current = document.body.style.userSelect;\n    document.body.style.userSelect = 'none';\n  }\n  function restoreSelection() {\n    if (savedUserSelect.current === null) return;\n    document.body.style.userSelect = savedUserSelect.current;\n    savedUserSelect.current = null;\n  }\n  useEffect(() => restoreSelection, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n  function paint(el: HTMLElement, travel: number, stretch: number) {\n    const span = sheetSpan(el, side);\n    el.style.translate = axis === 'y' ? `0px ${travel}px` : `${travel}px 0px`;\n    el.style.scale = axis === 'y' ? `1 ${stretch}` : `${stretch} 1`;\n    const scrim = sheetScrim(el);\n    if (scrim) scrim.style.opacity = String(1 - Math.min(Math.max(travel / span, 0), 1));\n  }\n\n  function onPointerDown(e: ReactPointerEvent) {\n    if (e.button !== 0) return;\n    const startX = e.clientX,\n      startY = e.clientY;\n    const scrollable = findScrollable(e.target, panelRef.current);\n\n    const onMove = (ev: PointerEvent) => {\n      const dx = ev.clientX - startX,\n        dy = ev.clientY - startY;\n      if (Math.max(Math.abs(dx), Math.abs(dy)) < INTENT_PX) return;\n      cleanup();\n      const along = axis === 'y' ? dy : dx;\n      const cross = axis === 'y' ? dx : dy;\n      if (Math.abs(along) <= Math.abs(cross)) return;\n      if (scrollable) {\n        if (along < 0) return;\n        if (axis === 'y' ? scrollable.scrollTop > 0 : scrollable.scrollLeft > 0) return;\n      }\n      suspendSelection();\n      startDrag(ev, { onMove: onDrag, onEnd: onDragEnd });\n    };\n\n    const cleanup = () => {\n      window.removeEventListener('pointermove', onMove);\n      window.removeEventListener('pointerup', cleanup);\n      window.removeEventListener('pointercancel', cleanup);\n    };\n    window.addEventListener('pointermove', onMove);\n    window.addEventListener('pointerup', cleanup);\n    window.addEventListener('pointercancel', cleanup);\n  }\n\n  function onDrag(info: PanInfo) {\n    const el = panelRef.current;\n    if (!el) return;\n    const o = info.offset[axis];\n    const span = sheetSpan(el, side);\n    paint(el, Math.max(o, 0), o < 0 ? 1 + Math.min(-o / span, 1) * STRETCH_MAX : 1);\n  }\n\n  function onDragEnd(info: PanInfo) {\n    restoreSelection();\n    const el = panelRef.current;\n    if (!el) return;\n    const span = sheetSpan(el, side);\n    if (info.offset[axis] > span * DISMISS_RATIO || info.velocity[axis] > DISMISS_VELOCITY) {\n      requestClose();\n      return;\n    }\n    animate(el, { x: [0], y: [0], scale: [[1, 1]], timing: SM.t.settle });\n    const scrim = sheetScrim(el);\n    if (scrim) animate(scrim, { opacity: [1], timing: SM.t.settle });\n  }\n\n  return enabled ? { onPointerDown } : {};\n}\n","'use client';\n\nimport './sheet.css';\nimport { Fragment, useId, useRef, type HTMLAttributes, type ReactElement, type ReactNode } from 'react';\nimport { animate, type Layer } from '../../../engine';\nimport { Presence } from '../../../motion/presence';\nimport type { MotionSpecs } from '../../../motion/use-motion';\nimport { resolveMotionTiming } from '../../../motion/motion-timing';\nimport type { DisableableAnimation } from '../../../motion/timing';\nimport { useControllable } from '../../internal/hooks/use-controllable';\nimport { ovCloneTrigger, OverlayPortal } from '../../internal/overlay/layer';\nimport { ModalShell } from '../../internal/overlay/modal';\nimport { useSheetDrag, sheetSpan } from './use-sheet-drag';\nimport type { DataAttributes } from '../../../dom-props';\n\nconst SHEET_TIMING = {\n  open: { duration: 'slow', ease: 'entrance' },\n  close: { duration: 'base', ease: 'exit' },\n} as const;\n\nexport interface SheetProps {\n  /** Controlled open state. Omit to stay uncontrolled. */\n  open?: boolean;\n  /** Initial state when uncontrolled. Default false. */\n  defaultOpen?: boolean;\n  /** Fires whenever the open state changes. Pair with `open` for controlled use. */\n  onOpenChange?: (open: boolean) => void;\n\n  /** Cloned to open the sheet on click. */\n  trigger?: ReactElement | null;\n\n  /** Edge the sheet slides in from. Default 'right'. */\n  side?: 'right' | 'bottom';\n\n  /** Scrim/Esc dismissal + drag-to-edge. Default true. */\n  dismissible?: boolean;\n\n  /** Base id for the panel; drives the trigger's `aria-controls`. Auto-generated when omitted. */\n  id?: string;\n  /** Standard attributes (className, style, data-*, ...) forwarded to the sheet panel. */\n  htmlProps?: HTMLAttributes<HTMLDivElement> & DataAttributes;\n  /** Open/close timing - motion tokens only, or `null` to disable. @default open 'slow'/'entrance', close 'base'/'exit' */\n  animation?: DisableableAnimation;\n  /** The ENTIRE surface - paint AND semantics. Drive dismissal with `open`/`onOpenChange`. */\n  children: ReactNode;\n}\n\nfunction sheetSlide(slot: HTMLElement, side: 'right' | 'bottom', at: number[]): Layer {\n  const frames = at.map((ratio) => ratio * sheetSpan(slot, side));\n  return side === 'bottom' ? { y: frames } : { x: frames };\n}\n\nfunction SheetShell({\n  side,\n  panelId,\n  dismissible,\n  requestClose,\n  htmlProps,\n  animate,\n  exit,\n  children,\n}: {\n  side: 'right' | 'bottom';\n  panelId: string;\n  dismissible: boolean;\n  requestClose: () => void;\n  htmlProps?: HTMLAttributes<HTMLDivElement> & DataAttributes;\n  children: ReactNode;\n} & MotionSpecs) {\n  const panelRef = useRef<HTMLElement>(null);\n  const dragProps = useSheetDrag({ side, panelRef, enabled: dismissible, requestClose });\n  return (\n    <ModalShell\n      animate={animate}\n      exit={exit}\n      layerClass={'overlay-layer--sheet-' + side}\n      panelClass={'overlay-panel--sheet-' + side}\n      panelId={panelId}\n      dismissible={dismissible}\n      requestClose={requestClose}\n      panelRef={panelRef}\n      panelProps={{ ...htmlProps, ...dragProps }}\n    >\n      {children}\n    </ModalShell>\n  );\n}\n\nexport function Sheet({\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  trigger = null,\n  side = 'right',\n  dismissible = true,\n  id,\n  htmlProps,\n  animation,\n  children,\n}: SheetProps) {\n  const [open, setOpen] = useControllable(controlledOpen, defaultOpen, onOpenChange);\n  const triggerRef = useRef<HTMLElement>(null);\n  const autoId = useId();\n  const panelId = id || 'sheet-' + autoId;\n  const close = () => setOpen(false);\n  const timings = resolveMotionTiming(animation, SHEET_TIMING);\n\n  return (\n    <Fragment>\n      {ovCloneTrigger(trigger, { open, onPress: () => setOpen(true), panelId, haspopup: 'dialog', triggerRef })}\n      <OverlayPortal>\n        <Presence>\n          {open && (\n            <SheetShell\n              key=\"sheet\"\n              animate={(slot) => {\n                const play = animate(slot, { ...sheetSlide(slot, side, [1, 0]), timing: timings.open });\n                play.finished.then(() => play.stop());\n                return play;\n              }}\n              exit={(slot) => animate(slot, { ...sheetSlide(slot, side, [1]), timing: timings.close })}\n              side={side}\n              panelId={panelId}\n              dismissible={dismissible}\n              requestClose={close}\n              htmlProps={htmlProps}\n            >\n              {children}\n            </SheetShell>\n          )}\n        </Presence>\n      </OverlayPortal>\n    </Fragment>\n  );\n}\n"]}

package/dist/chunk-YGGCQNNU.js

@@ -0,0 +1,92 @@
+'use client';import { FieldLabel, FieldMessage } from './chunk-I4XQ4PV2.js';
+import { Icon } from './chunk-3SBCBYB7.js';
+import { cx } from './chunk-QGNC7LH5.js';
+import './date-picker.css';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function FieldShell({
+  variant,
+  label,
+  required,
+  invalid,
+  message,
+  icon,
+  className,
+  htmlProps,
+  children
+}) {
+  const cls = cx("fld", variant, "fld--has-lead", invalid && "is-error", className, htmlProps?.className);
+  return /* @__PURE__ */ jsxs("div", { ...htmlProps, className: cls, children: [
+    /* @__PURE__ */ jsx(FieldLabel, { label, required }),
+    /* @__PURE__ */ jsxs("div", { className: "fld__control", children: [
+      children,
+      /* @__PURE__ */ jsx("span", { className: "fld__icon fld__icon--lead", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Icon, { name: icon, size: "md" }) })
+    ] }),
+    /* @__PURE__ */ jsx(FieldMessage, { message: message ? /* @__PURE__ */ jsx("span", { children: message }) : null })
+  ] });
+}
+function FieldTrigger({
+  display,
+  placeholder,
+  disabled,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx("button", { type: "button", className: "fld__input dtf__trigger", disabled, ...rest, children: display ? /* @__PURE__ */ jsx("span", { className: "dtf__value", children: display }) : /* @__PURE__ */ jsx("span", { className: "dtf__placeholder", children: placeholder }) });
+}
+
+// src/components/composites/date-picker/date-utils.ts
+var MONTHS = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+var DOW = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
+var pad = (n) => String(n).padStart(2, "0");
+var toKey = (d) => d.getFullYear() + "-" + pad(d.getMonth() + 1) + "-" + pad(d.getDate());
+function parse(k) {
+  const p = k.split("-").map(Number);
+  return new Date(p[0], p[1] - 1, p[2]);
+}
+var today = () => toKey(/* @__PURE__ */ new Date());
+var add = (k, days) => {
+  const d = parse(k);
+  d.setDate(d.getDate() + days);
+  return toKey(d);
+};
+var col = (d) => (d.getDay() + 6) % 7;
+var within = (k, min, max) => (!min || k >= min) && (!max || k <= max);
+function displayDay(k) {
+  if (!k) return null;
+  const d = parse(k);
+  const year = d.getFullYear() === (/* @__PURE__ */ new Date()).getFullYear() ? "" : ", " + d.getFullYear();
+  return MONTHS[d.getMonth()].slice(0, 3) + " " + pad(d.getDate()) + year;
+}
+function grid(y, m) {
+  const lead = (new Date(y, m, 1).getDay() + 6) % 7;
+  const days = [];
+  for (let i = 0; i < 42; i++) days.push(new Date(y, m, 1 - lead + i));
+  return days;
+}
+function tzLabel(tz, dateKey) {
+  try {
+    const at = dateKey ? parse(dateKey) : /* @__PURE__ */ new Date();
+    const parts = new Intl.DateTimeFormat("en-US", { timeZone: tz, timeZoneName: "shortOffset" }).formatToParts(at);
+    const name = parts.find((p) => p.type === "timeZoneName");
+    return tz.replace(/_/g, " ") + (name ? " - " + name.value : "");
+  } catch (_e) {
+    return tz;
+  }
+}
+
+export { DOW, FieldShell, FieldTrigger, MONTHS, add, col, displayDay, grid, pad, parse, toKey, today, tzLabel, within };
+//# sourceMappingURL=chunk-YGGCQNNU.js.map
+//# sourceMappingURL=chunk-YGGCQNNU.js.map

package/dist/chunk-YGGCQNNU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/composites/date-picker/field-shell.tsx","../src/components/composites/date-picker/date-utils.ts"],"names":[],"mappings":"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","file":"chunk-YGGCQNNU.js","sourcesContent":["'use client';\n\nimport './date-picker.css';\nimport type { ButtonHTMLAttributes, HTMLAttributes, ReactNode, Ref } from 'react';\nimport { Icon, type IconName } from '../../internal/icon/Icon';\nimport { FieldLabel, FieldMessage } from '../../primitives/input/field-chrome';\nimport type { DisableableAnimation } from '../../../motion/timing';\nimport type { DataAttributes } from '../../../dom-props';\nimport { cx } from '../../internal/utils/cx';\n\nexport interface DateFieldBaseProps {\n  /** Field label rendered above the trigger. */\n  label?: string;\n  /** Asterisk on the label. @default false */\n  required?: boolean;\n  /** Danger border + message color (.fld is-error). @default false */\n  invalid?: boolean;\n  /** Helper / error text under the field. */\n  message?: string;\n  /** Disable the field. @default false */\n  disabled?: boolean;\n  /** Extra class on the field shell root. */\n  className?: string;\n  /** Standard <div> attributes (style, data-*, aria-*, ...) forwarded to the field shell root. */\n  htmlProps?: HTMLAttributes<HTMLDivElement> & DataAttributes;\n  /** Popover open/close timing - motion tokens only, or `null` to disable. (Not used by TimeField, which is inline.) */\n  animation?: DisableableAnimation;\n}\n\nexport interface FieldShellProps {\n  variant: string;\n  label?: string;\n  required?: boolean;\n  invalid?: boolean;\n  message?: ReactNode;\n  icon: IconName;\n  className?: string;\n  htmlProps?: HTMLAttributes<HTMLDivElement> & DataAttributes;\n  children?: ReactNode;\n}\n\nexport function FieldShell({\n  variant,\n  label,\n  required,\n  invalid,\n  message,\n  icon,\n  className,\n  htmlProps,\n  children,\n}: FieldShellProps) {\n  const cls = cx('fld', variant, 'fld--has-lead', invalid && 'is-error', className, htmlProps?.className);\n  return (\n    <div {...htmlProps} className={cls}>\n      <FieldLabel label={label} required={required} />\n      <div className=\"fld__control\">\n        {children}\n        <span className=\"fld__icon fld__icon--lead\" aria-hidden=\"true\">\n          <Icon name={icon} size=\"md\" />\n        </span>\n      </div>\n      <FieldMessage message={message ? <span>{message}</span> : null} />\n    </div>\n  );\n}\n\nexport function FieldTrigger({\n  display,\n  placeholder,\n  disabled,\n  ...rest\n}: { display: string | null; placeholder: string; disabled?: boolean } & ButtonHTMLAttributes<HTMLButtonElement> & {\n    ref?: Ref<HTMLButtonElement>;\n  }) {\n  return (\n    <button type=\"button\" className=\"fld__input dtf__trigger\" disabled={disabled} {...rest}>\n      {display ? (\n        <span className=\"dtf__value\">{display}</span>\n      ) : (\n        <span className=\"dtf__placeholder\">{placeholder}</span>\n      )}\n    </button>\n  );\n}\n","export const MONTHS: string[] = [\n  'January',\n  'February',\n  'March',\n  'April',\n  'May',\n  'June',\n  'July',\n  'August',\n  'September',\n  'October',\n  'November',\n  'December',\n];\nexport const DOW: string[] = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];\n\nexport const pad = (n: number): string => String(n).padStart(2, '0');\nexport const toKey = (d: Date): string => d.getFullYear() + '-' + pad(d.getMonth() + 1) + '-' + pad(d.getDate());\nexport function parse(k: string): Date {\n  const p = k.split('-').map(Number);\n  return new Date(p[0], p[1] - 1, p[2]);\n}\nexport const today = (): string => toKey(new Date());\nexport const add = (k: string, days: number): string => {\n  const d = parse(k);\n  d.setDate(d.getDate() + days);\n  return toKey(d);\n};\nexport const col = (d: Date): number => (d.getDay() + 6) % 7;\n\nexport const within = (k: string, min?: string, max?: string): boolean => (!min || k >= min) && (!max || k <= max);\n\nexport function displayDay(k: string | null): string | null {\n  if (!k) return null;\n  const d = parse(k);\n  const year = d.getFullYear() === new Date().getFullYear() ? '' : ', ' + d.getFullYear();\n  return MONTHS[d.getMonth()].slice(0, 3) + ' ' + pad(d.getDate()) + year;\n}\n\nexport function grid(y: number, m: number): Date[] {\n  const lead = (new Date(y, m, 1).getDay() + 6) % 7;\n  const days: Date[] = [];\n  for (let i = 0; i < 42; i++) days.push(new Date(y, m, 1 - lead + i));\n  return days;\n}\n\nexport function tzLabel(tz: string, dateKey?: string): string {\n  try {\n    const at = dateKey ? parse(dateKey) : new Date();\n    const parts = new Intl.DateTimeFormat('en-US', { timeZone: tz, timeZoneName: 'shortOffset' }).formatToParts(at);\n    const name = parts.find((p) => p.type === 'timeZoneName');\n    return tz.replace(/_/g, ' ') + (name ? ' - ' + name.value : '');\n  } catch (_e) {\n    return tz;\n  }\n}\n"]}

package/dist/collapse.css

@@ -0,0 +1,88 @@
+/* Collapse - animates open/closed via a grid track interpolating 0fr and 1fr (never `auto`).
+
+   Closed content leaves the page semantics, not just the paint: the root turns
+   visibility:hidden, dropping children out of the tab order, the accessibility tree and
+   hit-testing. The flip is directional by construction. Closing lists visibility with a
+   delay equal to the size duration, so removal lands only after the exit finishes and
+   nothing pops. Opening omits visibility from its transition list entirely, so content is
+   focusable the same frame it opens, before the entrance runs. The delay rides the duration
+   tokens, so the global reduced-motion collapse (~1ms) applies to it as well. The open state
+   deliberately declares no `visibility: visible` - it inherits instead, so a Collapse nested
+   inside a closed ancestor cannot poke a focusable hole through it. */
+
+/* Timing overrides - set inline by Collapse.tsx from the token-typed duration/ease props.
+   Registered non-inheriting so one Collapse's timing can never leak into a Collapse nested
+   inside it; where unset they resolve invalid and the var() fallbacks supply the defaults. */
+@property --collapse-dur-open {
+  syntax: '*';
+  inherits: false;
+}
+@property --collapse-dur-close {
+  syntax: '*';
+  inherits: false;
+}
+@property --collapse-ease-open {
+  syntax: '*';
+  inherits: false;
+}
+@property --collapse-ease-close {
+  syntax: '*';
+  inherits: false;
+}
+
+.collapse {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition:
+    grid-template-rows var(--collapse-dur-close, var(--duration-slow)) var(--collapse-ease-close, var(--ease-entrance)),
+    grid-template-columns var(--collapse-dur-close, var(--duration-slow))
+      var(--collapse-ease-close, var(--ease-entrance)),
+    visibility 0s linear var(--collapse-dur-close, var(--duration-slow));
+}
+.collapse[data-open='false'] {
+  visibility: hidden;
+}
+.collapse[data-open='true'] {
+  grid-template-rows: 1fr;
+  transition:
+    grid-template-rows var(--collapse-dur-open, var(--duration-slow)) var(--collapse-ease-open, var(--ease-entrance)),
+    grid-template-columns var(--collapse-dur-open, var(--duration-slow)) var(--collapse-ease-open, var(--ease-entrance));
+}
+
+.collapse[data-axis='width'] {
+  grid-template-rows: 1fr;
+  grid-template-columns: 0fr;
+}
+.collapse[data-axis='width'][data-open='true'] {
+  grid-template-columns: 1fr;
+}
+
+/* min-size:0 is what lets the grid track collapse to 0. */
+.collapse__inner {
+  overflow: hidden;
+  min-height: 0;
+  min-width: 0;
+}
+
+.collapse--fade .collapse__inner {
+  opacity: 0;
+  transition: opacity var(--collapse-dur-close, var(--duration-base)) var(--collapse-ease-close, var(--ease-standard));
+}
+.collapse--fade[data-open='true'] .collapse__inner {
+  opacity: 1;
+  /* fade in slightly after the size opens */
+  transition: opacity var(--collapse-dur-open, var(--duration-slow)) var(--collapse-ease-open, var(--ease-entrance))
+    60ms;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .collapse,
+  .collapse--fade .collapse__inner {
+    transition-duration: 1ms;
+  }
+  /* drop the fade-in stagger so content is visible immediately; the visibility delay needs
+     no override - it rides the duration tokens, which this media query collapses to 1ms */
+  .collapse--fade .collapse__inner {
+    transition-delay: 0ms;
+  }
+}

package/dist/collapse.d.ts

@@ -0,0 +1,46 @@
+import { JSX, CSSProperties, ReactNode, HTMLAttributes } from 'react';
+import { D as DataAttributes } from './dom-props-C0jrllBw.js';
+import { D as DurationToken, E as EaseToken } from './motion-scale-Canq4stZ.js';
+import { T as TimingProps, D as DisableableAnimation, A as AnimationTiming, a as DirectionalToken } from './timing-7JA_zQHP.js';
+
+/** Motion-scale duration tokens - the only values Collapse timing accepts. */
+type CollapseDuration = DurationToken;
+/** Motion-scale ease tokens - the only values Collapse timing accepts. */
+type CollapseEase = EaseToken;
+/** One token for both directions, or split per direction; an omitted direction keeps its default. */
+type CollapseTiming<Token extends string> = DirectionalToken<Token>;
+/** Grouped `{ duration, ease }` timing for the size/fade transition. */
+type CollapseAnimation = AnimationTiming;
+interface CollapseOwnProps extends TimingProps {
+    /** Open/closed state. Closed content is also removed from the tab order, the accessibility
+     *  tree and hit-testing once the exit transition completes; reopening restores it before
+     *  the entrance runs. */
+    open?: boolean;
+    /** Axis to animate. @default 'height' */
+    axis?: 'height' | 'width';
+    /** Also cross-fade contents while resizing; follows `duration` / `ease`. */
+    fade?: boolean;
+    /** Class applied to the inner measured wrapper - the clipping element (overflow: hidden).
+     *  Content whose focus ring sits flush to its edge needs padding there, or the ring clips. */
+    innerClassName?: string;
+    /** Size (and fade) transition timing - motion tokens only, each field one token or
+     *  `{ open, close }`, e.g. `{ duration: { close: 'fast' }, ease: { close: 'exit' } }`.
+     *  `null` disables the transition (open/close snap instantly).
+     *  @default duration 'slow' + ease 'entrance' (fade-out: 'base' + 'standard') */
+    animation?: DisableableAnimation;
+    /** Tag to render as. @default 'div' */
+    as?: keyof JSX.IntrinsicElements;
+    /** Extra class(es) merged onto the root. */
+    className?: string;
+    /** Inline styles merged onto the root (composed with the timing custom properties). */
+    style?: CSSProperties;
+    /** The collapsing content. */
+    children?: ReactNode;
+}
+interface CollapseProps extends CollapseOwnProps {
+    /** Standard <div> attributes (aria-*, data-*, ...) forwarded to the root. */
+    htmlProps?: Omit<HTMLAttributes<HTMLDivElement>, keyof CollapseOwnProps> & DataAttributes;
+}
+declare function Collapse({ open, axis, fade, animation, className, innerClassName, style, children, as: As, htmlProps, }: CollapseProps): JSX.Element;
+
+export { Collapse, type CollapseAnimation, type CollapseDuration, type CollapseEase, type CollapseProps, type CollapseTiming };

package/dist/collapse.js

@@ -0,0 +1,5 @@
+'use client';export { Collapse } from './chunk-7SZCJ7WI.js';
+import './chunk-VTJTGVZZ.js';
+import './chunk-QGNC7LH5.js';
+//# sourceMappingURL=collapse.js.map
+//# sourceMappingURL=collapse.js.map

package/dist/collapse.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"collapse.js"}

package/dist/count-badge.d.ts

@@ -0,0 +1,13 @@
+import * as react from 'react';
+import { BadgeProps } from './badge.js';
+import './dom-props-C0jrllBw.js';
+
+interface CountBadgeProps extends Omit<BadgeProps, 'children'> {
+    /** The chip content - stringified; in `roll` mode each digit becomes an odometer column. */
+    value: string | number;
+    /** Odometer: digits roll vertically on change. */
+    roll?: boolean;
+}
+declare function CountBadge({ value, tone, roll, ...rest }: CountBadgeProps): react.JSX.Element;
+
+export { CountBadge, type CountBadgeProps };

package/dist/count-badge.js

@@ -0,0 +1,13 @@
+'use client';import { Odometer } from './chunk-CONSWNIV.js';
+import { Badge } from './chunk-PMECHR3A.js';
+import './chunk-QGNC7LH5.js';
+import { jsx } from 'react/jsx-runtime';
+
+function CountBadge({ value, tone = "neutral", roll = false, ...rest }) {
+  const str = String(value);
+  return /* @__PURE__ */ jsx(Badge, { tone, ...rest, children: roll ? /* @__PURE__ */ jsx(Odometer, { value: str }) : str });
+}
+
+export { CountBadge };
+//# sourceMappingURL=count-badge.js.map
+//# sourceMappingURL=count-badge.js.map

package/dist/count-badge.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/badge/CountBadge.tsx"],"names":[],"mappings":";;;;;AAYO,SAAS,UAAA,CAAW,EAAE,KAAA,EAAO,IAAA,GAAO,WAAW,IAAA,GAAO,KAAA,EAAO,GAAG,IAAA,EAAK,EAAoB;AAC9F,EAAA,MAAM,GAAA,GAAM,OAAO,KAAK,CAAA;AACxB,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAM,IAAA,EAAa,GAAG,IAAA,EACpB,QAAA,EAAA,IAAA,mBAAO,GAAA,CAAC,QAAA,EAAA,EAAS,KAAA,EAAO,GAAA,EAAK,CAAA,GAAK,GAAA,EACrC,CAAA;AAEJ","file":"count-badge.js","sourcesContent":["'use client';\n\nimport { Badge, type BadgeProps } from './Badge';\nimport { Odometer } from './odometer';\n\nexport interface CountBadgeProps extends Omit<BadgeProps, 'children'> {\n  /** The chip content - stringified; in `roll` mode each digit becomes an odometer column. */\n  value: string | number;\n  /** Odometer: digits roll vertically on change. */\n  roll?: boolean;\n}\n\nexport function CountBadge({ value, tone = 'neutral', roll = false, ...rest }: CountBadgeProps) {\n  const str = String(value);\n  return (\n    <Badge tone={tone} {...rest}>\n      {roll ? <Odometer value={str} /> : str}\n    </Badge>\n  );\n}\n"]}

package/dist/date-field.d.ts

@@ -0,0 +1,25 @@
+import * as react from 'react';
+import { D as DateFieldBaseProps } from './field-shell-Cuda-feL.js';
+import './timing-7JA_zQHP.js';
+import './motion-scale-Canq4stZ.js';
+import './dom-props-C0jrllBw.js';
+
+interface DateFieldProps extends DateFieldBaseProps {
+    /** Controlled value, 'YYYY-MM-DD'. */
+    value?: string | null;
+    /** Uncontrolled initial value, 'YYYY-MM-DD'. Use instead of `value`. @default null */
+    defaultValue?: string | null;
+    /** Fires on each day pick (commit is live), with the picked 'YYYY-MM-DD'. */
+    onChange?: (value: string) => void;
+    /** Trigger text shown when no date is picked. @default 'Pick a date' */
+    placeholder?: string;
+    /** IANA timezone name (e.g. 'Europe/Riga') - display context only, shown with its GMT offset in the footer. */
+    timezone?: string;
+    /** Earliest pickable date, 'YYYY-MM-DD', inclusive. */
+    min?: string;
+    /** Latest pickable date, 'YYYY-MM-DD', inclusive. */
+    max?: string;
+}
+declare function DateField({ value, defaultValue, onChange, label, placeholder, timezone, min, max, required, invalid, message, disabled, className, htmlProps, animation, }: DateFieldProps): react.JSX.Element;
+
+export { DateField, type DateFieldProps };

package/dist/date-field.js

@@ -0,0 +1,87 @@
+'use client';import { DtpPanel } from './chunk-2HORSLXJ.js';
+import './chunk-TCUCYFT7.js';
+import { FieldTrigger, displayDay, FieldShell } from './chunk-YGGCQNNU.js';
+import { Popover } from './chunk-O4N2OBTR.js';
+import './chunk-EQ32F2QJ.js';
+import './chunk-LDC3RIYA.js';
+import './chunk-GY7JOPUQ.js';
+import './chunk-UE63OOVG.js';
+import './chunk-MKIQFK7S.js';
+import './chunk-NEF5XAHG.js';
+import './chunk-MXOPCFWR.js';
+import './chunk-W3SHPKSB.js';
+import './chunk-JSKXZMLH.js';
+import './chunk-L3Q3VDIW.js';
+import './chunk-I4XQ4PV2.js';
+import './chunk-3SBCBYB7.js';
+import { useControllable } from './chunk-MMRIQNEN.js';
+import './chunk-S5ZTZANS.js';
+import './chunk-U5QQZC3U.js';
+import './chunk-7SZCJ7WI.js';
+import './chunk-VTJTGVZZ.js';
+import './chunk-QGNC7LH5.js';
+import './date-picker.css';
+import { useState } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+function DateField({
+  value,
+  defaultValue = null,
+  onChange,
+  label,
+  placeholder = "Pick a date",
+  timezone,
+  min,
+  max,
+  required = false,
+  invalid = false,
+  message,
+  disabled = false,
+  className = "",
+  htmlProps,
+  animation
+}) {
+  const [val, commit] = useControllable(value, defaultValue, onChange);
+  const [pickerOpen, setPickerOpen] = useState(false);
+  const trigger = /* @__PURE__ */ jsx(FieldTrigger, { display: displayDay(val), placeholder, disabled });
+  return /* @__PURE__ */ jsx(
+    FieldShell,
+    {
+      variant: "dtf",
+      label,
+      required,
+      invalid,
+      message,
+      icon: "calendar",
+      className,
+      htmlProps,
+      children: /* @__PURE__ */ jsx(
+        Popover,
+        {
+          trigger,
+          side: "bottom",
+          align: "start",
+          animation,
+          open: pickerOpen,
+          onOpenChange: setPickerOpen,
+          children: /* @__PURE__ */ jsx(
+            DtpPanel,
+            {
+              val,
+              commit,
+              close: () => setPickerOpen(false),
+              min,
+              max,
+              timezone,
+              label
+            }
+          )
+        }
+      )
+    }
+  );
+}
+
+export { DateField };
+//# sourceMappingURL=date-field.js.map
+//# sourceMappingURL=date-field.js.map

package/dist/date-field.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/composites/date-picker/DateField.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA2BO,SAAS,SAAA,CAAU;AAAA,EACxB,KAAA;AAAA,EACA,YAAA,GAAe,IAAA;AAAA,EACf,QAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAA,GAAc,aAAA;AAAA,EACd,QAAA;AAAA,EACA,GAAA;AAAA,EACA,GAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,OAAA,GAAU,KAAA;AAAA,EACV,OAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,SAAA,GAAY,EAAA;AAAA,EACZ,SAAA;AAAA,EACA;AACF,CAAA,EAAmB;AACjB,EAAA,MAAM,CAAC,GAAA,EAAK,MAAM,IAAI,eAAA,CAAgB,KAAA,EAAO,cAAc,QAAQ,CAAA;AACnE,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAAS,KAAK,CAAA;AAClD,EAAA,MAAM,OAAA,uBAAW,YAAA,EAAA,EAAa,OAAA,EAAS,WAAW,GAAG,CAAA,EAAG,aAA0B,QAAA,EAAoB,CAAA;AAEtG,EAAA,uBACE,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,OAAA,EAAQ,KAAA;AAAA,MACR,KAAA;AAAA,MACA,QAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA,IAAA,EAAK,UAAA;AAAA,MACL,SAAA;AAAA,MACA,SAAA;AAAA,MAEA,QAAA,kBAAA,GAAA;AAAA,QAAC,OAAA;AAAA,QAAA;AAAA,UACC,OAAA;AAAA,UACA,IAAA,EAAK,QAAA;AAAA,UACL,KAAA,EAAM,OAAA;AAAA,UACN,SAAA;AAAA,UACA,IAAA,EAAM,UAAA;AAAA,UACN,YAAA,EAAc,aAAA;AAAA,UAEd,QAAA,kBAAA,GAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,GAAA;AAAA,cACA,MAAA;AAAA,cACA,KAAA,EAAO,MAAM,aAAA,CAAc,KAAK,CAAA;AAAA,cAChC,GAAA;AAAA,cACA,GAAA;AAAA,cACA,QAAA;AAAA,cACA;AAAA;AAAA;AACF;AAAA;AACF;AAAA,GACF;AAEJ","file":"date-field.js","sourcesContent":["'use client';\n\nimport './date-picker.css';\nimport { useState } from 'react';\nimport { Popover } from '../popover/Popover';\nimport { FieldShell, FieldTrigger, type DateFieldBaseProps } from './field-shell';\nimport { useControllable } from '../../internal/hooks/use-controllable';\nimport { DtpPanel } from './calendar-panel';\nimport { displayDay } from './date-utils';\n\nexport interface DateFieldProps extends DateFieldBaseProps {\n  /** Controlled value, 'YYYY-MM-DD'. */\n  value?: string | null;\n  /** Uncontrolled initial value, 'YYYY-MM-DD'. Use instead of `value`. @default null */\n  defaultValue?: string | null;\n  /** Fires on each day pick (commit is live), with the picked 'YYYY-MM-DD'. */\n  onChange?: (value: string) => void;\n  /** Trigger text shown when no date is picked. @default 'Pick a date' */\n  placeholder?: string;\n  /** IANA timezone name (e.g. 'Europe/Riga') - display context only, shown with its GMT offset in the footer. */\n  timezone?: string;\n  /** Earliest pickable date, 'YYYY-MM-DD', inclusive. */\n  min?: string;\n  /** Latest pickable date, 'YYYY-MM-DD', inclusive. */\n  max?: string;\n}\n\nexport function DateField({\n  value,\n  defaultValue = null,\n  onChange,\n  label,\n  placeholder = 'Pick a date',\n  timezone,\n  min,\n  max,\n  required = false,\n  invalid = false,\n  message,\n  disabled = false,\n  className = '',\n  htmlProps,\n  animation,\n}: DateFieldProps) {\n  const [val, commit] = useControllable(value, defaultValue, onChange);\n  const [pickerOpen, setPickerOpen] = useState(false);\n  const trigger = <FieldTrigger display={displayDay(val)} placeholder={placeholder} disabled={disabled} />;\n\n  return (\n    <FieldShell\n      variant=\"dtf\"\n      label={label}\n      required={required}\n      invalid={invalid}\n      message={message}\n      icon=\"calendar\"\n      className={className}\n      htmlProps={htmlProps}\n    >\n      <Popover\n        trigger={trigger}\n        side=\"bottom\"\n        align=\"start\"\n        animation={animation}\n        open={pickerOpen}\n        onOpenChange={setPickerOpen}\n      >\n        <DtpPanel\n          val={val}\n          commit={commit}\n          close={() => setPickerOpen(false)}\n          min={min}\n          max={max}\n          timezone={timezone}\n          label={label}\n        />\n      </Popover>\n    </FieldShell>\n  );\n}\n"]}