@zyncat/ui 0.8.0

package/dist/tooltip.js

@@ -0,0 +1,268 @@
+'use client';import { tokenPx } from './chunk-UE63OOVG.js';
+import { Presence } from './chunk-MXOPCFWR.js';
+import { useMotion } from './chunk-W3SHPKSB.js';
+import { animate } from './chunk-L3Q3VDIW.js';
+import { UIMotion } from './chunk-S5ZTZANS.js';
+import { cx } from './chunk-QGNC7LH5.js';
+import './tooltip.css';
+import { useRef, useId, useEffect, Fragment, useSyncExternalStore, useState, useLayoutEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var OPEN_DELAY = 350;
+var CLOSE_GRACE = 140;
+var TOOLTIP_DOM_ID = "pds-tooltip";
+var WARM_WINDOW = 300;
+var store = {
+  active: null,
+  closeTimer: 0,
+  warmUntil: 0,
+  listeners: /* @__PURE__ */ new Set(),
+  get: () => store.active,
+  subscribe(l) {
+    store.listeners.add(l);
+    return () => store.listeners.delete(l);
+  },
+  emit() {
+    store.listeners.forEach((l) => l());
+  },
+  isWarm: () => store.active !== null || performance.now() < store.warmUntil,
+  open(payload) {
+    clearTimeout(store.closeTimer);
+    store.active = payload;
+    store.emit();
+  },
+  close(id, grace = CLOSE_GRACE) {
+    clearTimeout(store.closeTimer);
+    store.closeTimer = setTimeout(() => {
+      if (store.active && store.active.id === id) store.closeNow();
+    }, grace);
+  },
+  closeNow() {
+    clearTimeout(store.closeTimer);
+    if (!store.active) return;
+    store.warmUntil = performance.now() + WARM_WINDOW;
+    store.active = null;
+    store.emit();
+  }
+};
+var hostReg = {
+  keys: [],
+  listeners: /* @__PURE__ */ new Set(),
+  subscribe(l) {
+    hostReg.listeners.add(l);
+    return () => hostReg.listeners.delete(l);
+  },
+  register(k) {
+    hostReg.keys.push(k);
+    hostReg.listeners.forEach((l) => l());
+    return () => {
+      const i = hostReg.keys.indexOf(k);
+      if (i >= 0) hostReg.keys.splice(i, 1);
+      hostReg.listeners.forEach((l) => l());
+    };
+  }
+};
+function useHostElection() {
+  const keyRef = useRef(null);
+  if (!keyRef.current) keyRef.current = /* @__PURE__ */ Symbol("tip-host");
+  useEffect(() => hostReg.register(keyRef.current), []);
+  return useSyncExternalStore(
+    hostReg.subscribe,
+    () => hostReg.keys[0] === keyRef.current,
+    () => false
+  );
+}
+var SM = UIMotion;
+function targetBox(size, t, want) {
+  const vw = window.innerWidth, vh = window.innerHeight, TIP_GAP = tokenPx("--space-2", 8) || 8, M = TIP_GAP;
+  let p = want;
+  if (p === "top" && t.top - size.h - TIP_GAP < M) p = "bottom";
+  else if (p === "bottom" && t.bottom + size.h + TIP_GAP > vh - M) p = "top";
+  else if (p === "left" && t.left - size.w - TIP_GAP < M) p = "right";
+  else if (p === "right" && t.right + size.w + TIP_GAP > vw - M) p = "left";
+  let x, y;
+  if (p === "top") {
+    x = t.left + t.width / 2 - size.w / 2;
+    y = t.top - size.h - TIP_GAP;
+  } else if (p === "bottom") {
+    x = t.left + t.width / 2 - size.w / 2;
+    y = t.bottom + TIP_GAP;
+  } else if (p === "left") {
+    x = t.left - size.w - TIP_GAP;
+    y = t.top + t.height / 2 - size.h / 2;
+  } else {
+    x = t.right + TIP_GAP;
+    y = t.top + t.height / 2 - size.h / 2;
+  }
+  return {
+    x: Math.round(Math.min(Math.max(x, M), vw - size.w - M)),
+    y: Math.round(Math.min(Math.max(y, M), vh - size.h - M)),
+    w: size.w,
+    h: size.h,
+    placement: p
+  };
+}
+var fromEdge = (p) => ({
+  x: p === "left" ? 4 : p === "right" ? -4 : 0,
+  y: p === "top" ? 4 : p === "bottom" ? -4 : 0
+});
+function Body({ a, width }) {
+  return /* @__PURE__ */ jsx("span", { className: "tooltip__body", style: width ? { width } : void 0, children: a.shortcut ? /* @__PURE__ */ jsxs("span", { className: "tooltip__row", children: [
+    /* @__PURE__ */ jsx("span", { children: a.content }),
+    /* @__PURE__ */ jsx("kbd", { className: "tooltip__shortcut", children: a.shortcut })
+  ] }) : a.content });
+}
+function TipSurface({ a, box, animate: animateSpec, exit }) {
+  const ref = useRef(null);
+  const bodyRef = useRef(null);
+  const settled = useRef(false);
+  useMotion(ref, { animate: animateSpec, exit });
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    if (!settled.current) {
+      settled.current = true;
+      return;
+    }
+    animate(el, { x: [box.x], y: [box.y], width: [box.w], height: [box.h], timing: SM.t.layout });
+  }, [box.x, box.y, box.w, box.h]);
+  useLayoutEffect(() => {
+    if (bodyRef.current) animate(bodyRef.current, { opacity: [0, 1], timing: SM.t.enter });
+  }, [a.id]);
+  return /* @__PURE__ */ jsx("div", { ref, className: "tooltip", id: TOOLTIP_DOM_ID, role: "tooltip", "data-placement": box.placement, children: /* @__PURE__ */ jsx("span", { ref: bodyRef, children: /* @__PURE__ */ jsx(Body, { a, width: box.bodyW }) }) });
+}
+function TooltipHost() {
+  const active = useSyncExternalStore(store.subscribe, store.get);
+  const measureRef = useRef(null);
+  const [box, setBox] = useState(null);
+  useLayoutEffect(() => {
+    if (!active) {
+      setBox(null);
+      return;
+    }
+    const r = measureRef.current.getBoundingClientRect();
+    const b = measureRef.current.firstChild.getBoundingClientRect();
+    setBox({
+      ...targetBox({ w: Math.ceil(r.width), h: Math.ceil(r.height) }, active.rect(), active.placement),
+      bodyW: Math.ceil(b.width)
+    });
+  }, [active]);
+  useEffect(() => {
+    if (!active) return void 0;
+    const onKey = (e) => {
+      if (e.key === "Escape") store.closeNow();
+    };
+    const onScroll = () => store.closeNow();
+    document.addEventListener("keydown", onKey);
+    window.addEventListener("scroll", onScroll, true);
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      window.removeEventListener("scroll", onScroll, true);
+    };
+  }, [active]);
+  const shown = useRef(null);
+  if (box) shown.current = { box, off: fromEdge(box.placement) };
+  return createPortal(
+    /* @__PURE__ */ jsxs(Fragment, { children: [
+      active && /* @__PURE__ */ jsx("div", { className: "tooltip tooltip--measure", ref: measureRef, "aria-hidden": "true", children: /* @__PURE__ */ jsx(Body, { a: active }) }),
+      /* @__PURE__ */ jsx(Presence, { children: active && box && /* @__PURE__ */ jsx(
+        TipSurface,
+        {
+          a: active,
+          box,
+          animate: (el) => {
+            const at = shown.current;
+            if (!at) return null;
+            return animate(
+              el,
+              { width: [at.box.w], height: [at.box.h], timing: { duration: 0 } },
+              { x: [at.box.x + at.off.x, at.box.x], y: [at.box.y + at.off.y, at.box.y], timing: SM.t.layout },
+              { opacity: [0, 1], scale: [0.96, 1], timing: SM.t.enter }
+            );
+          },
+          exit: (el) => {
+            const at = shown.current;
+            if (!at) return null;
+            return animate(el, {
+              x: [at.box.x + at.off.x],
+              y: [at.box.y + at.off.y],
+              opacity: [0],
+              scale: [0.96],
+              timing: SM.t.exit
+            });
+          }
+        },
+        "tip"
+      ) })
+    ] }),
+    document.body
+  );
+}
+function Tooltip({
+  content,
+  shortcut = null,
+  placement = "top",
+  disabled = false,
+  openDelay = OPEN_DELAY,
+  closeDelay = CLOSE_GRACE,
+  id,
+  children,
+  htmlProps
+}) {
+  const wrapRef = useRef(null);
+  const openTimer = useRef(0);
+  const myId = id || "tip-" + useId();
+  const isHost = useHostElection();
+  const anchorEl = () => wrapRef.current?.firstElementChild ?? null;
+  useEffect(
+    () => () => {
+      clearTimeout(openTimer.current);
+      store.close(myId, 0);
+    },
+    []
+  );
+  function show(immediate) {
+    if (disabled) return;
+    clearTimeout(openTimer.current);
+    const el = anchorEl();
+    if (!el) return;
+    el.setAttribute("aria-describedby", TOOLTIP_DOM_ID);
+    const open = () => store.open({ id: myId, content, shortcut, placement, rect: () => anchorEl().getBoundingClientRect() });
+    if (immediate || store.isWarm()) open();
+    else openTimer.current = setTimeout(open, openDelay);
+  }
+  function hide() {
+    clearTimeout(openTimer.current);
+    const el = anchorEl();
+    if (el) el.removeAttribute("aria-describedby");
+    store.close(myId, closeDelay);
+  }
+  const onEnter = (e) => {
+    if (e.pointerType !== "touch") show(false);
+  };
+  const onFocusIn = (e) => {
+    if (e.target.matches(":focus-visible")) show(true);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        ...htmlProps,
+        ref: wrapRef,
+        className: cx("tooltip-anchor", htmlProps?.className),
+        onPointerEnter: onEnter,
+        onPointerLeave: hide,
+        onPointerDown: hide,
+        onFocus: onFocusIn,
+        onBlur: hide,
+        children
+      }
+    ),
+    isHost && /* @__PURE__ */ jsx(TooltipHost, {})
+  ] });
+}
+
+export { Tooltip };
+//# sourceMappingURL=tooltip.js.map
+//# sourceMappingURL=tooltip.js.map

package/dist/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/composites/tooltip/tooltip-store.ts","../src/components/composites/tooltip/tooltip-host.tsx","../src/components/composites/tooltip/Tooltip.tsx"],"names":["useRef","useSyncExternalStore","useEffect","jsxs","Fragment","jsx"],"mappings":"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","file":"tooltip.js","sourcesContent":["'use client';\n\nimport { useEffect, useRef, useSyncExternalStore, type ReactNode } from 'react';\n\nexport type Placement = 'top' | 'bottom' | 'left' | 'right';\n\nexport interface ActivePayload {\n  id: string;\n  content: ReactNode;\n  shortcut?: string | null;\n  placement: Placement;\n  rect: () => DOMRect;\n}\n\nexport const OPEN_DELAY = 350;\nexport const CLOSE_GRACE = 140;\nexport const TOOLTIP_DOM_ID = 'pds-tooltip';\nconst WARM_WINDOW = 300;\n\nexport const store = {\n  active: null as ActivePayload | null,\n  closeTimer: 0 as ReturnType<typeof setTimeout> | 0,\n  warmUntil: 0,\n  listeners: new Set<() => void>(),\n  get: () => store.active,\n  subscribe(l: () => void) {\n    store.listeners.add(l);\n    return () => store.listeners.delete(l);\n  },\n  emit() {\n    store.listeners.forEach((l) => l());\n  },\n  isWarm: () => store.active !== null || performance.now() < store.warmUntil,\n  open(payload: ActivePayload) {\n    clearTimeout(store.closeTimer);\n    store.active = payload;\n    store.emit();\n  },\n  close(id: string, grace = CLOSE_GRACE) {\n    clearTimeout(store.closeTimer);\n    store.closeTimer = setTimeout(() => {\n      if (store.active && store.active.id === id) store.closeNow();\n    }, grace);\n  },\n  closeNow() {\n    clearTimeout(store.closeTimer);\n    if (!store.active) return;\n    store.warmUntil = performance.now() + WARM_WINDOW;\n    store.active = null;\n    store.emit();\n  },\n};\n\nconst hostReg = {\n  keys: [] as symbol[],\n  listeners: new Set<() => void>(),\n  subscribe(l: () => void) {\n    hostReg.listeners.add(l);\n    return () => hostReg.listeners.delete(l);\n  },\n  register(k: symbol) {\n    hostReg.keys.push(k);\n    hostReg.listeners.forEach((l) => l());\n    return () => {\n      const i = hostReg.keys.indexOf(k);\n      if (i >= 0) hostReg.keys.splice(i, 1);\n      hostReg.listeners.forEach((l) => l());\n    };\n  },\n};\n\nexport function useHostElection(): boolean {\n  const keyRef = useRef<symbol | null>(null);\n  if (!keyRef.current) keyRef.current = Symbol('tip-host');\n  useEffect(() => hostReg.register(keyRef.current!), []);\n  return useSyncExternalStore(\n    hostReg.subscribe,\n    () => hostReg.keys[0] === keyRef.current,\n    () => false,\n  );\n}\n","'use client';\n\nimport { Fragment, useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } from 'react';\nimport { createPortal } from 'react-dom';\nimport { animate } from '../../../engine';\nimport { Presence } from '../../../motion/presence';\nimport { useMotion, type MotionSpecs } from '../../../motion/use-motion';\nimport { UIMotion } from '../../../tokens/motion-tokens';\nimport { tokenPx } from '../../internal/utils/token-px';\nimport { store, TOOLTIP_DOM_ID, type ActivePayload, type Placement } from './tooltip-store';\n\nconst SM = UIMotion;\n\ninterface Size {\n  w: number;\n  h: number;\n}\ninterface TargetBox extends Size {\n  x: number;\n  y: number;\n  placement: Placement;\n}\ninterface RenderedBox extends TargetBox {\n  bodyW: number;\n}\n\nfunction targetBox(size: Size, t: DOMRect, want: Placement): TargetBox {\n  const vw = window.innerWidth,\n    vh = window.innerHeight,\n    TIP_GAP = tokenPx('--space-2', 8) || 8,\n    M = TIP_GAP;\n  let p = want;\n  if (p === 'top' && t.top - size.h - TIP_GAP < M) p = 'bottom';\n  else if (p === 'bottom' && t.bottom + size.h + TIP_GAP > vh - M) p = 'top';\n  else if (p === 'left' && t.left - size.w - TIP_GAP < M) p = 'right';\n  else if (p === 'right' && t.right + size.w + TIP_GAP > vw - M) p = 'left';\n  let x, y;\n  if (p === 'top') {\n    x = t.left + t.width / 2 - size.w / 2;\n    y = t.top - size.h - TIP_GAP;\n  } else if (p === 'bottom') {\n    x = t.left + t.width / 2 - size.w / 2;\n    y = t.bottom + TIP_GAP;\n  } else if (p === 'left') {\n    x = t.left - size.w - TIP_GAP;\n    y = t.top + t.height / 2 - size.h / 2;\n  } else {\n    x = t.right + TIP_GAP;\n    y = t.top + t.height / 2 - size.h / 2;\n  }\n  return {\n    x: Math.round(Math.min(Math.max(x, M), vw - size.w - M)),\n    y: Math.round(Math.min(Math.max(y, M), vh - size.h - M)),\n    w: size.w,\n    h: size.h,\n    placement: p,\n  };\n}\n\nconst fromEdge = (p: Placement) => ({\n  x: p === 'left' ? 4 : p === 'right' ? -4 : 0,\n  y: p === 'top' ? 4 : p === 'bottom' ? -4 : 0,\n});\n\nfunction Body({ a, width }: { a: ActivePayload; width?: number }) {\n  return (\n    <span className=\"tooltip__body\" style={width ? { width } : undefined}>\n      {a.shortcut ? (\n        <span className=\"tooltip__row\">\n          <span>{a.content}</span>\n          <kbd className=\"tooltip__shortcut\">{a.shortcut}</kbd>\n        </span>\n      ) : (\n        a.content\n      )}\n    </span>\n  );\n}\n\nfunction TipSurface({ a, box, animate: animateSpec, exit }: { a: ActivePayload; box: RenderedBox } & MotionSpecs) {\n  const ref = useRef<HTMLDivElement>(null);\n  const bodyRef = useRef<HTMLSpanElement>(null);\n  const settled = useRef(false);\n  useMotion(ref, { animate: animateSpec, exit });\n\n  useLayoutEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n    if (!settled.current) {\n      settled.current = true;\n      return;\n    }\n    animate(el, { x: [box.x], y: [box.y], width: [box.w], height: [box.h], timing: SM.t.layout });\n  }, [box.x, box.y, box.w, box.h]);\n\n  useLayoutEffect(() => {\n    if (bodyRef.current) animate(bodyRef.current, { opacity: [0, 1], timing: SM.t.enter });\n  }, [a.id]);\n\n  return (\n    <div ref={ref} className=\"tooltip\" id={TOOLTIP_DOM_ID} role=\"tooltip\" data-placement={box.placement}>\n      <span ref={bodyRef}>\n        <Body a={a} width={box.bodyW} />\n      </span>\n    </div>\n  );\n}\n\nexport function TooltipHost() {\n  const active = useSyncExternalStore(store.subscribe, store.get);\n  const measureRef = useRef<HTMLDivElement>(null);\n  const [box, setBox] = useState<RenderedBox | null>(null);\n\n  useLayoutEffect(() => {\n    if (!active) {\n      setBox(null);\n      return;\n    }\n    const r = measureRef.current.getBoundingClientRect();\n    const b = (measureRef.current.firstChild as HTMLElement).getBoundingClientRect();\n    setBox({\n      ...targetBox({ w: Math.ceil(r.width), h: Math.ceil(r.height) }, active.rect(), active.placement),\n      bodyW: Math.ceil(b.width),\n    });\n  }, [active]);\n\n  useEffect(() => {\n    if (!active) return undefined;\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') store.closeNow();\n    };\n    const onScroll = () => store.closeNow();\n    document.addEventListener('keydown', onKey);\n    window.addEventListener('scroll', onScroll, true);\n    return () => {\n      document.removeEventListener('keydown', onKey);\n      window.removeEventListener('scroll', onScroll, true);\n    };\n  }, [active]);\n\n  const shown = useRef<{ box: RenderedBox; off: { x: number; y: number } } | null>(null);\n  if (box) shown.current = { box, off: fromEdge(box.placement) };\n\n  return createPortal(\n    <Fragment>\n      {active && (\n        <div className=\"tooltip tooltip--measure\" ref={measureRef} aria-hidden=\"true\">\n          <Body a={active} />\n        </div>\n      )}\n      <Presence>\n        {active && box && (\n          <TipSurface\n            key=\"tip\"\n            a={active}\n            box={box}\n            animate={(el) => {\n              const at = shown.current;\n              if (!at) return null;\n              return animate(\n                el,\n                { width: [at.box.w], height: [at.box.h], timing: { duration: 0 } },\n                { x: [at.box.x + at.off.x, at.box.x], y: [at.box.y + at.off.y, at.box.y], timing: SM.t.layout },\n                { opacity: [0, 1], scale: [0.96, 1], timing: SM.t.enter },\n              );\n            }}\n            exit={(el) => {\n              const at = shown.current;\n              if (!at) return null;\n              return animate(el, {\n                x: [at.box.x + at.off.x],\n                y: [at.box.y + at.off.y],\n                opacity: [0],\n                scale: [0.96],\n                timing: SM.t.exit,\n              });\n            }}\n          />\n        )}\n      </Presence>\n    </Fragment>,\n    document.body,\n  );\n}\n","'use client';\n\nimport './tooltip.css';\nimport {\n  Fragment,\n  useEffect,\n  useId,\n  useRef,\n  type FocusEvent,\n  type HTMLAttributes,\n  type PointerEvent,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\nimport { store, useHostElection, OPEN_DELAY, CLOSE_GRACE, TOOLTIP_DOM_ID, type Placement } from './tooltip-store';\nimport { TooltipHost } from './tooltip-host';\nimport type { DataAttributes } from '../../../dom-props';\nimport { cx } from '../../internal/utils/cx';\n\nexport interface TooltipProps {\n  /** The hint - a string or small node; never interactive content. */\n  content: ReactNode;\n  /** Optional keyboard hint, rendered as mono metadata (\"⌘↩\", \"S\"). */\n  shortcut?: string | null;\n  /** Preferred side; flips automatically when out of viewport room. */\n  placement?: Placement;\n  /** Suppress the tooltip entirely (trigger renders untouched). */\n  disabled?: boolean;\n  /** ms before a cold hover shows; warm hovers + focus are instant. Default 350. */\n  openDelay?: number;\n  /** ms the bubble lingers after leaving (bridges moving to a neighbour). Default 140. */\n  closeDelay?: number;\n  /** Stable id for this trigger's store entry - lets overlapping triggers race safely under\n   *  the one shared tooltip host. Not rendered to the DOM. Auto-generated when omitted. */\n  id?: string;\n  /** Exactly one element. */\n  children: ReactElement;\n  /** Standard <span> attributes forwarded to the anchor wrapper. */\n  htmlProps?: HTMLAttributes<HTMLSpanElement> & DataAttributes;\n}\n\nexport function Tooltip({\n  content,\n  shortcut = null,\n  placement = 'top',\n  disabled = false,\n  openDelay = OPEN_DELAY,\n  closeDelay = CLOSE_GRACE,\n  id,\n  children,\n  htmlProps,\n}: TooltipProps) {\n  const wrapRef = useRef<HTMLSpanElement | null>(null);\n  const openTimer = useRef<ReturnType<typeof setTimeout> | 0>(0);\n  const myId = id || 'tip-' + useId();\n  const isHost = useHostElection();\n\n  const anchorEl = (): HTMLElement | null => (wrapRef.current?.firstElementChild as HTMLElement) ?? null;\n\n  useEffect(\n    () => () => {\n      clearTimeout(openTimer.current);\n      store.close(myId, 0);\n    },\n    [],\n  ); // eslint-disable-line react-hooks/exhaustive-deps\n\n  function show(immediate: boolean) {\n    if (disabled) return;\n    clearTimeout(openTimer.current);\n    const el = anchorEl();\n    if (!el) return;\n    el.setAttribute('aria-describedby', TOOLTIP_DOM_ID);\n    const open = () =>\n      store.open({ id: myId, content, shortcut, placement, rect: () => anchorEl()!.getBoundingClientRect() });\n    if (immediate || store.isWarm()) open();\n    else openTimer.current = setTimeout(open, openDelay);\n  }\n  function hide() {\n    clearTimeout(openTimer.current);\n    const el = anchorEl();\n    if (el) el.removeAttribute('aria-describedby');\n    store.close(myId, closeDelay);\n  }\n\n  const onEnter = (e: PointerEvent) => {\n    if (e.pointerType !== 'touch') show(false);\n  };\n  const onFocusIn = (e: FocusEvent) => {\n    if ((e.target as HTMLElement).matches(':focus-visible')) show(true);\n  };\n\n  return (\n    <Fragment>\n      <span\n        {...htmlProps}\n        ref={wrapRef}\n        className={cx('tooltip-anchor', htmlProps?.className)}\n        onPointerEnter={onEnter}\n        onPointerLeave={hide}\n        onPointerDown={hide}\n        onFocus={onFocusIn}\n        onBlur={hide}\n      >\n        {children}\n      </span>\n      {isHost && <TooltipHost />}\n    </Fragment>\n  );\n}\n"]}

package/dist/types-SGMShK7R.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+
+interface SelectOption {
+    /** The stored value - what `onChange` returns and `value` matches; must be unique. */
+    value: string;
+    /** Primary row text, and the trigger label once selected; also matched by `searchable`. */
+    label: ReactNode;
+    /** Optional secondary line under the label; also matched by `searchable`. */
+    description?: string;
+    /** Your own icon node shown before the label. */
+    icon?: ReactNode;
+    /** Not selectable - skipped by keyboard nav and typeahead, and marked `aria-disabled`. @default false */
+    disabled?: boolean;
+}
+interface SelectGroup {
+    /** Section heading rendered above the options; omit for an unlabeled group. */
+    label?: string;
+    /** The options in this section. */
+    options: SelectOption[];
+}
+
+export type { SelectOption as S, SelectGroup as a };

package/llms.txt

@@ -0,0 +1,196 @@
+# Zyncat UI - LLM usage guide
+
+Premium React 19 design system, shipped as built ESM + types. This is a compact per-component
+index; full prop types (with docs) live in node_modules/@zyncat/ui/dist/*.d.ts.
+
+Setup:
+  import { Button } from '@zyncat/ui/button';   // one subpath per component - there is no barrel entry
+  import '@zyncat/ui/styles.css';               // base layer (fonts+tokens) - link ONCE; each component lazy-loads its own CSS
+Peers: react, react-dom. (The curated Phosphor glyphs used internally are bundled in - not a peer.)
+Animation is built in - a ~2.5 kB WAAPI engine, no animation library to install.
+No bundler/transpile config - built ESM keeps 'use client' intact for the Next.js App Router.
+
+Conventions:
+- Sentence case everywhere; no emoji or exclamation marks in UI. One primary <Button> per view.
+- Numbers, times, IDs, status read mono + tabular. Status words: Scheduled, Draft, Published, Failed.
+- Status hues (info/success/warning/danger) only for genuine status; hierarchy from the neutral ramp.
+- Icons: Zyncat UI renders its own glyphs from a bundled curated Phosphor set, but does NOT
+  export an Icon component. Where an example below shows <Icon name="..." />, that is YOUR OWN icon
+  node - any ReactNode you pass into the prop (e.g. an @phosphor-icons/react element).
+
+Every named export is also a subpath: @zyncat/ui/<kebab-name> (e.g. @zyncat/ui/status-badge).
+
+Agents: prefer the bundled MCP server over scanning this file or node_modules - register
+  { "mcpServers": { "zyncat-ui": { "command": "node", "args": ["./node_modules/@zyncat/ui/dist/mcp.js"] } } }
+  then use list_components / get_component / search_api / get_tokens.
+
+============================================================ PRIMITIVES
+
+Button - @zyncat/ui/button
+  One control for every click; exactly one primary per view. variant primary|secondary|ghost|danger|link, size sm|md|lg, iconLeft/iconRight (ReactNode), loading, disabled.
+  <Button variant="primary" iconLeft={<Icon name="plus" size="sm" />}>Schedule post</Button>
+
+Collapse - @zyncat/ui/collapse
+  Layout-transition primitive; eases height open/closed, never teleports. Closed content also
+  leaves the tab order, accessibility tree and hit-testing once the exit completes; reopening is
+  focusable immediately. animation takes motion tokens ONLY - { duration, ease }, each one token
+  (fast|base|slow|slower|slowest / standard|entrance|exit|spring|glide) or per-direction { open, close }.
+  <Collapse open={open} animation={{ duration: { close: 'fast' }, ease: { close: 'exit' } }}><div>...revealed content...</div></Collapse>
+
+Glide / GlidePill - @zyncat/ui/glide
+  A persistent background pill that glides smoothly between hovered/active elements. Container must be `position: relative`.
+  const glide = useGlide(containerRef);
+  <nav ref={containerRef} onPointerLeave={glide.leave}>
+    <GlidePill rect={glide.rect} active={glide.active} className="my-pill" />
+    <button onPointerEnter={(e) => glide.enter(e.currentTarget)}>Item 1</button>
+  </nav>
+
+Badge - @zyncat/ui/badge
+  Glass or outline chip. tone neutral|info|success|warning|danger, dot, live, variant="outline", pill, size="sm".
+  <Badge tone="success" pill>Published</Badge>
+
+StatusBadge - @zyncat/ui/status-badge
+  Canonical post status - tone + one-word label. status draft|scheduled|processing|published|failed; add `morph` to animate in place as status changes.
+  <StatusBadge status="published" />
+  <StatusBadge status={s} morph />
+
+CountBadge - @zyncat/ui/count-badge
+  Mono tabular count; `roll` animates digits like an odometer. value: number | string.
+  <CountBadge value="7 / 10" />
+  <CountBadge value={count} roll tone="info" />
+
+============================================================ FORMS
+(all take label, helper/error/warning/success, size sm|md|lg, disabled)
+
+TextField - @zyncat/ui/text-field
+  Base text input; states disclose via Collapse. leadingIcon, clearable, optional/required.
+  <TextField id="ws" label="Workspace name" required value={v} onChange={(e) => set(e.target.value)} />
+  <TextField id="h" label="Username" error="Must be at least 4 characters." value={v} onChange={...} />
+
+NumberField - @zyncat/ui/number-field
+  Tabular figures, caret steppers, unit suffix, clamp to [min,max]. onChange(value: number).
+  <NumberField id="seats" label="Seats" unit="users" min={1} max={50} value={n} onChange={setN} />
+
+OtpField - @zyncat/ui/otp-field
+  Segmented one-time code; auto-advance, paste-to-fill. length, group, error, size.
+  <OtpField length={6} group={3} value={code} onChange={setCode} />
+
+Textarea - @zyncat/ui/textarea
+  Auto-grow, char meter (max), ⌘/Ctrl+↵ submit (onSubmit). minRows/maxRows.
+  <Textarea id="bio" label="Bio" max={280} minRows={4} value={v} onChange={(e) => set(e.target.value)} onSubmit={save} />
+
+Checkbox - @zyncat/ui/checkbox
+  Stages a choice. label, description, indeterminate, invalid, required, disabled. Standard checked/onChange.
+  <Checkbox label="Email me about product updates" checked={on} onChange={(e) => set(e.target.checked)} />
+
+Toggle - @zyncat/ui/toggle
+  Actuates a setting on the spot. label, description; checked/onChange like a checkbox.
+  <Toggle label="Auto-save drafts" checked={on} onChange={(e) => set(e.target.checked)} />
+
+RadioGroup - @zyncat/ui/radio-group
+  Pick exactly one. options: RadioOption[] ({ value, label, description?, icon?, disabled? }); variant rows|cards, orientation; value/onChange(value).
+  <RadioGroup name="role" label="Member role" value={role} onChange={setRole} options={ROLES} />
+
+Select - @zyncat/ui/select
+  Single-select listbox. options: SelectOption[]; value: string|null, onChange(value); searchable, leadingIcon, placeholder, invalid, loading, ariaLabel.
+  <Select options={TIMEZONES} value={tz} onChange={setTz} searchable placeholder="Choose a time zone" ariaLabel="Time zone" />
+
+MultiSelect - @zyncat/ui/multi-select
+  Many-of listbox; stays open while toggling, trigger summarises as first +N. value: string[], onChange(string[]); searchable.
+  <MultiSelect options={PEOPLE} value={ids} onChange={setIds} placeholder="Choose members" ariaLabel="Members" />
+
+============================================================ DATA DISPLAY
+
+Avatar - @zyncat/ui/avatar
+  Identity mark: image, initials, or silhouette. name, src, size xs|sm|md|lg|xl, status online|away|busy|offline, shape, paletteIndex, icon.
+  <Avatar name="Ana Ng" src="..." status="online" />
+
+AvatarGroup - @zyncat/ui/avatar-group
+  Overlapping avatars with +N overflow. max, size; children are <Avatar>s.
+  <AvatarGroup max={4} size="sm"><Avatar name="Ana Ng" />...</AvatarGroup>
+
+Tag / TagGroup - @zyncat/ui/tag
+  User-owned label (a control, not a status). icon, size, disabled, onRemove + removeLabel (removable). TagGroup wraps a labelled set.
+  <Tag icon={<Icon name="hash" />} onRemove={fn} removeLabel="Remove design">design</Tag>
+
+ToggleTag - @zyncat/ui/toggle-tag
+  Many-of-many filter chip. selected/onChange(next) or defaultSelected; icon, count.
+  <ToggleTag selected={on} onChange={setOn} icon={<Icon name="star" />} count={48}>Starred</ToggleTag>
+
+Table - @zyncat/ui/table
+  Declare columns + rows; owns sort, selection, stickiness, overflow. columns: TableColumn<T>[] ({ key, label, render?, sortable?, sortBy?, align?, mono?, strong?, grow? }); selectable, defaultSort, footer.
+  <Table<Invoice> label="Invoices" columns={COLUMNS} rows={INVOICES} selectable defaultSort={{ key: 'amount', dir: 'desc' }} />
+
+Pagination - @zyncat/ui/pagination
+  Cursor strip: mono range readout + prev/next pair. range: [from,to], total?, hasPrev/hasNext, onPrev/onNext.
+  <Pagination label="Rows" range={[from, to]} total={312} hasPrev hasNext onPrev={...} onNext={...} />
+
+============================================================ DATE, TIME & TABS
+(value is a string; onChange(value | null); timezone, min/max, disabled)
+
+DateField - @zyncat/ui/date-field
+  Month calendar in a popover; value 'YYYY-MM-DD'.
+  <DateField label="Start date" value={d} onChange={setD} timezone="Europe/Riga" min="2026-06-01" />
+
+DateTimeField - @zyncat/ui/datetime-field
+  Calendar + segmented HH:MM; value 'YYYY-MM-DDTHH:mm'. format 12h|24h, minuteStep.
+  <DateTimeField label="Due at" value={v} onChange={setV} format="12h" minuteStep={15} />
+
+DateRangeField - @zyncat/ui/date-range-field
+  Two-tap auto-ordering window; value DateRange { start, end } | null; commits when both ends exist.
+  <DateRangeField label="Reporting period" value={r} onChange={setR} />
+
+TimeField - @zyncat/ui/time-field
+  Standalone segmented time; value 'HH:mm'; bounds saturate. format, minuteStep.
+  <TimeField label="Send at" value={t} onChange={setT} format="12h" minuteStep={15} />
+
+Tabs / TabPanel - @zyncat/ui/tabs
+  Line tabs; the ink reaches then releases; panels enter from the side you moved toward. items: TabItem[]; value/onChange(value, dir). Pair with <TabPanel name tab dir>.
+  <Tabs name="views" label="Workspace views" value={view} onChange={(v, d) => { setView(v); setDir(d); }} items={items} />
+  <TabPanel name="views" tab={view} dir={dir}>...</TabPanel>
+
+============================================================ OVERLAYS & FEEDBACK
+
+Alert - @zyncat/ui/alert
+  Persistent, in-flow status. tone, title, children (body), action { label, onClick }, dismissible, banner, open/onDismiss (controlled).
+  <Alert tone="warning" title="Your trial ends in 5 days" action={{ label: 'Upgrade', onClick: fn }}>Add a plan...</Alert>
+
+Toast - @zyncat/ui/toast  (imperative; mount <Toaster /> once at the app root, then call toast() from anywhere)
+  <Toaster /> props: position ('bottom-right' default), duration, visibleToasts, gap, offset, expand. Without it, toast() no-ops.
+  toast(msg) - toast.success/error/warning/info(msg, { description, action }) - toast.promise(p, { loading, success, error }) - toast.loading - toast.dismiss().
+  import { Toaster, toast } from '@zyncat/ui/toast';
+  // once at the root: <Toaster position="bottom-right" />
+  toast.success('Changes saved', { description: 'Synced to the cloud' });
+  toast.promise(save(), { loading: 'Saving...', success: (v) => `Saved - ${v.count}`, error: (e) => `Failed - ${e.message}` });
+
+Tooltip - @zyncat/ui/tooltip
+  Transient hint on hover/focus; wraps any child (no ref wiring needed). content, shortcut, placement top|bottom|left|right.
+  <Tooltip content="Save changes" shortcut="⌘S"><Button>Save</Button></Tooltip>
+
+Dialog - @zyncat/ui/dialog
+  Styled modal: scrim, focus trap, scroll lock. open/onOpenChange, tone, icon, title, description, footer: (close) => node.
+  <Dialog open={o} onOpenChange={setO} tone="danger" title="Delete this project?" footer={(close) => <>...</>}>...</Dialog>
+
+Popover - @zyncat/ui/popover
+  Headless anchored panel, non-modal. side, align, arrow, trigger (node), asChild; children: ({ close }) => node.
+  <Popover side="bottom" align="start" trigger={<Button>Actions</Button>}>{({ close }) => <menu>...</menu>}</Popover>
+
+Sheet - @zyncat/ui/sheet
+  Edge-docked modal panel, drag-to-dismiss. side right|bottom, trigger (node), asChild; children: ({ close }) => node.
+  <Sheet side="right" trigger={<Button>Filters</Button>}>{({ close }) => <div role="dialog">...</div>}</Sheet>
+
+============================================================ DEV TOOLS
+
+MotionDevtools - @zyncat/ui/motion-devtools
+  Dev-only floating panel that slows or freezes EVERY animation at once (CSS and WAAPI)
+  for motion debugging. Mount once at the app root - no provider, touches no other component.
+  Gate behind a dev check; keep it out of production.
+  placement top-left|top-right|bottom-left|bottom-right, offset, presets, maxFactor, defaultFactor,
+  scaleTimers, persist, defaultOpen. Also exports motionSlowmo for console/hotkey control.
+  {import.meta.env.DEV && <MotionDevtools placement="bottom-right" />}
+
+============================================================ THEMING
+  Re-skin by overriding the CSS custom properties (tokens) in your own stylesheet, loaded after
+  @zyncat/ui/styles.css - never fork the source. Token groups: spacing --space-*, type --type-*,
+  color (--bg-*, --text-*, --border-*, --accent), --radius-*, elevation --shadow-*, motion
+  (--duration-*, --ease-*).

package/next.d.mts

@@ -0,0 +1,7 @@
+import type { NextConfig } from 'next';
+
+/**
+ * Next.js plugin that configures Turbopack to resolve @zyncat/ui
+ * imports to TypeScript source, enabling live HMR without a build step.
+ */
+export declare function withZyncatUI(nextConfig?: NextConfig): NextConfig;

package/next.mjs

@@ -0,0 +1,59 @@
+// @ts-check
+import { readFileSync } from 'node:fs';
+import { dirname, relative, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+/**
+ * Next.js plugin that configures Turbopack to resolve @zyncat/ui
+ * component imports to TypeScript source, enabling live HMR without
+ * a build step.
+ *
+ * Sets `turbopack.root` to the common ancestor of the consuming project
+ * and the @zyncat/ui package so Turbopack's filesystem scope includes
+ * the source tree (which may live outside the project when linked).
+ *
+ * @param {import('next').NextConfig} nextConfig
+ * @returns {import('next').NextConfig}
+ */
+export function withZyncatUI(nextConfig = {}) {
+  const pkgDir = dirname(fileURLToPath(import.meta.url));
+  const pkg = JSON.parse(readFileSync(resolve(pkgDir, 'package.json'), 'utf-8'));
+
+  const projectDir = process.cwd();
+  const root = commonAncestor(projectDir, pkgDir);
+
+  /** @type {Record<string, string>} */
+  const aliases = {};
+
+  for (const [subpath, conditions] of Object.entries(pkg.exports)) {
+    if (typeof conditions === 'object' && conditions !== null && 'source' in conditions) {
+      const bare = subpath.slice(2);
+      const abs = resolve(pkgDir, conditions.source);
+      const rel = relative(projectDir, abs);
+      aliases[`@zyncat/ui/${bare}`] = rel.startsWith('..') ? rel : `./${rel}`;
+    }
+  }
+
+  return {
+    ...nextConfig,
+    transpilePackages: Array.from(new Set([...(nextConfig.transpilePackages ?? []), '@zyncat/ui'])),
+    turbopack: { ...nextConfig.turbopack, root, resolveAlias: { ...nextConfig.turbopack?.resolveAlias, ...aliases } },
+  };
+}
+
+/**
+ * Returns the deepest directory that is an ancestor of both paths.
+ * @param {string} a
+ * @param {string} b
+ * @returns {string}
+ */
+function commonAncestor(a, b) {
+  const aParts = a.split('/');
+  const bParts = b.split('/');
+  const common = [];
+  for (let i = 0; i < Math.min(aParts.length, bParts.length); i++) {
+    if (aParts[i] === bParts[i]) common.push(aParts[i]);
+    else break;
+  }
+  return common.join('/') || '/';
+}