@zyncat/ui 0.8.0

package/dist/chunk-2HORSLXJ.js

@@ -0,0 +1,191 @@
+'use client';import { useDayFocus } from './chunk-TCUCYFT7.js';
+import { parse, today, grid, toKey, MONTHS, DOW, tzLabel, within, col } from './chunk-YGGCQNNU.js';
+import { useGlide, GlidePill } from './chunk-MKIQFK7S.js';
+import { useSharedFlip } from './chunk-JSKXZMLH.js';
+import { animate } from './chunk-L3Q3VDIW.js';
+import { Icon } from './chunk-3SBCBYB7.js';
+import { UIMotion } from './chunk-S5ZTZANS.js';
+import { Button } from './chunk-U5QQZC3U.js';
+import { cx } from './chunk-QGNC7LH5.js';
+import './date-picker.css';
+import { useState, useRef, useId, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function DtpPanel({ val, commit, min, max, timezone, label, close, slot }) {
+  const seed = val ? parse(val) : /* @__PURE__ */ new Date();
+  const [view, setView] = useState({ y: seed.getFullYear(), m: seed.getMonth() });
+  const [focusKey, setFocusKey] = useState(val || today());
+  const daysRef = useRef(null);
+  const prevViewRef = useRef(null);
+  const uid = useId();
+  const pillId = "dtp-pill-" + uid;
+  const glide = useGlide(daysRef);
+  const pillRef = useSharedFlip(pillId, { timing: UIMotion.t.settle });
+  const inRange = (key) => within(key, min, max);
+  function pickDay(key) {
+    if (!inRange(key)) return;
+    armFocus();
+    setFocusKey(key);
+    const d = parse(key);
+    goToMonth(d.getFullYear(), d.getMonth());
+    commit(key);
+  }
+  function goToMonth(y, m) {
+    setView((v) => v.y === y && v.m === m ? v : { y, m });
+  }
+  function nav(dir) {
+    const d = new Date(view.y, view.m + dir, 1);
+    goToMonth(d.getFullYear(), d.getMonth());
+  }
+  const now = /* @__PURE__ */ 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, deltaMonths) {
+    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) {
+    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 = [];
+  for (let w = 0; w < 6; w++) weeks.push(days.slice(w * 7, w * 7 + 7));
+  return /* @__PURE__ */ jsxs("div", { className: "dtp", role: "dialog", "aria-label": label || "Pick a date", children: [
+    /* @__PURE__ */ jsxs("div", { className: "dtp__cal", children: [
+      /* @__PURE__ */ jsxs("div", { className: "dtp__head", children: [
+        /* @__PURE__ */ jsxs("span", { className: "dtp__month", "aria-live": "polite", children: [
+          MONTHS[view.m],
+          " ",
+          /* @__PURE__ */ jsx("span", { className: "dtp__year", children: view.y })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "dtp__navs", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "dtp__nav",
+              "aria-label": "Previous month",
+              disabled: !canPrev,
+              onClick: () => nav(-1),
+              children: /* @__PURE__ */ jsx(Icon, { name: "caret-left", size: "sm" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "dtp__nav",
+              "aria-label": "Go to today",
+              disabled: viewIsCurrent,
+              onClick: goToToday,
+              children: /* @__PURE__ */ jsx(Icon, { name: "calendar-dot", size: "sm" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "dtp__nav",
+              "aria-label": "Next month",
+              disabled: !canNext,
+              onClick: () => nav(1),
+              children: /* @__PURE__ */ jsx(Icon, { name: "caret-right", size: "sm" })
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "dtp__dow", "aria-hidden": "true", children: DOW.map((d) => /* @__PURE__ */ jsx("span", { children: d }, d)) }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "dtp__days",
+          ref: daysRef,
+          role: "grid",
+          "aria-label": "Calendar",
+          onKeyDown: onGridKeyDown,
+          onPointerLeave: glide.leave,
+          children: [
+            weeks.map((week, wi) => /* @__PURE__ */ jsx("div", { role: "row", className: "dtp__row", children: 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 /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  role: "gridcell",
+                  "data-key": key,
+                  className: cls,
+                  disabled: !inRange(key),
+                  tabIndex: key === tabKey ? 0 : -1,
+                  "aria-selected": sel || void 0,
+                  "aria-label": MONTHS[d.getMonth()] + " " + d.getDate() + ", " + d.getFullYear(),
+                  onClick: () => pickDay(key),
+                  onPointerEnter: (e) => glide.enter(e.currentTarget),
+                  children: [
+                    sel ? /* @__PURE__ */ jsx("span", { className: "dtp__pill", "aria-hidden": "true", ref: pillRef }) : null,
+                    /* @__PURE__ */ jsx("span", { className: "dtp__num", children: d.getDate() }),
+                    key === todayKey ? /* @__PURE__ */ jsx("span", { className: "dtp__dot", "aria-hidden": "true" }) : null
+                  ]
+                },
+                key
+              );
+            }) }, wi)),
+            /* @__PURE__ */ jsx(GlidePill, { className: "dtp__hover", glide })
+          ]
+        }
+      )
+    ] }),
+    slot || null,
+    /* @__PURE__ */ jsxs("div", { className: "dtp__foot", children: [
+      timezone ? /* @__PURE__ */ jsx("span", { className: "dtp__tz", children: tzLabel(timezone, selKey) }) : null,
+      /* @__PURE__ */ jsx("span", { className: "dtp__footSpacer" }),
+      /* @__PURE__ */ jsx(Button, { variant: "primary", size: "sm", onClick: close, children: "Done" })
+    ] })
+  ] });
+}
+
+export { DtpPanel };
+//# sourceMappingURL=chunk-2HORSLXJ.js.map
+//# sourceMappingURL=chunk-2HORSLXJ.js.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,40 @@
+'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

@@ -0,0 +1 @@
+{"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"]}