@zyncat/ui 0.8.0

package/dist/tabs.js

@@ -0,0 +1,181 @@
+'use client';import { useScrollEdges } from './chunk-BIDVNLJO.js';
+import { useGlide, GlidePill } from './chunk-MKIQFK7S.js';
+import { resolveMotionTiming } from './chunk-NEF5XAHG.js';
+import { animate } from './chunk-L3Q3VDIW.js';
+import { IconSlot } from './chunk-2ERBBFZS.js';
+import { UIMotion } from './chunk-S5ZTZANS.js';
+import './chunk-VTJTGVZZ.js';
+import { cx } from './chunk-QGNC7LH5.js';
+import './tabs.css';
+import { useId, useRef, useLayoutEffect } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var SM = UIMotion;
+var TABS_EDGE_PAD = 24;
+var TABS_ENTER_X = 20;
+function Tabs({ items = [], value, onChange, name, ariaLabel, className = "", style, htmlProps }) {
+  const autoId = useId();
+  const base = name || autoId;
+  const listRef = useRef(null);
+  const inkRef = useRef(null);
+  const tabRefs = useRef({});
+  const placedRef = useRef(false);
+  const valueRef = useRef(value);
+  valueRef.current = value;
+  const glide = useGlide(listRef);
+  const place = (animated) => {
+    const list = listRef.current, ink = inkRef.current;
+    const el = valueRef.current != null ? tabRefs.current[valueRef.current] : null;
+    if (!list || !ink) return;
+    if (!el) {
+      ink.style.opacity = "0";
+      placedRef.current = false;
+      return;
+    }
+    const next = { x: el.offsetLeft, w: el.offsetWidth };
+    ink.style.opacity = "1";
+    if (!animated || !placedRef.current || SM.reduced) {
+      animate(ink, { x: [next.x], width: [next.w], timing: { duration: 0 } });
+    } else {
+      const lr = list.getBoundingClientRect();
+      const ir = ink.getBoundingClientRect();
+      const cur = { x: ir.left - lr.left + list.scrollLeft, w: ir.width };
+      if (Math.abs(cur.x - next.x) > 0.5 || Math.abs(cur.w - next.w) > 0.5) {
+        const dir = next.x + next.w / 2 >= cur.x + cur.w / 2 ? 1 : -1;
+        const span = dir === 1 ? next.x + next.w - cur.x : cur.x + cur.w - next.x;
+        const lead = dir === 1 ? cur.x : next.x;
+        animate(ink, {
+          x: [cur.x, lead, next.x],
+          width: [cur.w, span, next.w],
+          timing: { duration: SM.dur.slow, times: [0, 0.55, 1], ease: [SM.ease.standard, SM.ease.entrance] }
+        });
+      }
+    }
+    placedRef.current = true;
+  };
+  const syncEdges = useScrollEdges(listRef, (edges, el) => {
+    el.dataset.fade = ((edges.left ? "start " : "") + (edges.right ? "end" : "")).trim();
+  });
+  useLayoutEffect(() => {
+    place(true);
+    const l = listRef.current, el = value != null ? tabRefs.current[value] : null;
+    if (l && el && l.scrollWidth > l.clientWidth) {
+      const behavior = SM.reduced ? "auto" : "smooth";
+      if (el.offsetLeft < l.scrollLeft + TABS_EDGE_PAD) {
+        l.scrollTo({ left: el.offsetLeft - TABS_EDGE_PAD, behavior });
+      } else if (el.offsetLeft + el.offsetWidth > l.scrollLeft + l.clientWidth - TABS_EDGE_PAD) {
+        l.scrollTo({ left: el.offsetLeft + el.offsetWidth - l.clientWidth + TABS_EDGE_PAD, behavior });
+      }
+    }
+  }, [value]);
+  useLayoutEffect(() => {
+    const ro = new ResizeObserver(() => {
+      place(false);
+      syncEdges();
+    });
+    if (listRef.current) ro.observe(listRef.current);
+    Object.values(tabRefs.current).forEach((el) => el && ro.observe(el));
+    syncEdges();
+    return () => ro.disconnect();
+  }, [items.length]);
+  const select = (v) => {
+    if (v === value || !onChange) return;
+    const idx = (x) => items.findIndex((i) => i.value === x);
+    onChange(v, idx(v) >= idx(value) ? 1 : -1);
+  };
+  const onKeyDown = (e) => {
+    const enabled = items.filter((i) => !i.disabled);
+    if (!enabled.length) return;
+    let next = null;
+    if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
+      const step = e.key === "ArrowRight" ? 1 : -1;
+      const i = enabled.findIndex((it) => it.value === value);
+      next = enabled[(i + step + enabled.length) % enabled.length];
+    } else if (e.key === "Home") {
+      next = enabled[0];
+    } else if (e.key === "End") {
+      next = enabled[enabled.length - 1];
+    }
+    if (!next) return;
+    e.preventDefault();
+    select(next.value);
+    const el = tabRefs.current[next.value];
+    if (el) el.focus();
+  };
+  const focusValue = items.some((i) => i.value === value && !i.disabled) ? value : (items.find((i) => !i.disabled) || {}).value;
+  return /* @__PURE__ */ jsx("div", { className: cx("tabs", className), style, ...htmlProps, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "tabs__list",
+      role: "tablist",
+      "aria-label": ariaLabel,
+      ref: listRef,
+      onKeyDown,
+      onPointerLeave: glide.leave,
+      children: [
+        /* @__PURE__ */ jsx(GlidePill, { className: "tab__hover", glide }),
+        items.map((it) => {
+          const selected = it.value === value;
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              role: "tab",
+              id: base + "-tab-" + it.value,
+              "aria-selected": selected,
+              "aria-controls": name ? name + "-panel-" + it.value : void 0,
+              tabIndex: it.value === focusValue ? 0 : -1,
+              disabled: it.disabled,
+              className: "tab" + (selected ? " is-selected" : ""),
+              ref: (el) => {
+                tabRefs.current[it.value] = el;
+              },
+              onClick: () => select(it.value),
+              onPointerEnter: it.disabled ? void 0 : (e) => glide.enter(e.currentTarget.firstElementChild),
+              children: /* @__PURE__ */ jsxs("span", { className: "tab__pad", children: [
+                it.icon && /* @__PURE__ */ jsx(IconSlot, { size: "sm", children: it.icon }),
+                /* @__PURE__ */ jsx("span", { className: "tab__label", children: it.label }),
+                it.count != null && /* @__PURE__ */ jsx("span", { className: "tab__count", children: it.count })
+              ] })
+            },
+            it.value
+          );
+        }),
+        /* @__PURE__ */ jsx("span", { className: "tabs__ink", ref: inkRef, "aria-hidden": "true" }, "ink")
+      ]
+    }
+  ) });
+}
+var TABPANEL_TIMING = {
+  open: { duration: "base", ease: "entrance" },
+  close: { duration: "base", ease: "entrance" }
+};
+function TabPanel({ tab, name, dir = 0, className = "", style, children, animation, htmlProps }) {
+  const enter = resolveMotionTiming(animation, TABPANEL_TIMING).open;
+  const innerRef = useRef(null);
+  const enterRef = useRef(null);
+  useLayoutEffect(() => {
+    const el = innerRef.current;
+    if (!el) return;
+    enterRef.current?.stop();
+    enterRef.current = animate(el, { x: [dir * TABS_ENTER_X, 0], y: [4, 0], timing: enter });
+    return () => enterRef.current?.stop();
+  }, [tab]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "tabpanel",
+      tabIndex: 0,
+      id: name ? `${name}-panel-${tab}` : void 0,
+      "aria-labelledby": name ? `${name}-tab-${tab}` : void 0,
+      className: cx("tab-panel", className),
+      style,
+      ...htmlProps,
+      children: /* @__PURE__ */ jsx("div", { ref: innerRef, className: "tab-panel__inner", children })
+    }
+  );
+}
+
+export { TabPanel, Tabs };
+//# sourceMappingURL=tabs.js.map
+//# sourceMappingURL=tabs.js.map

package/dist/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/composites/tabs/Tabs.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAsBA,IAAM,EAAA,GAAK,QAAA;AA6CX,IAAM,aAAA,GAAgB,EAAA;AACtB,IAAM,YAAA,GAAe,EAAA;AAEd,SAAS,IAAA,CAAK,EAAE,KAAA,GAAQ,EAAC,EAAG,KAAA,EAAO,QAAA,EAAU,IAAA,EAAM,SAAA,EAAW,SAAA,GAAY,EAAA,EAAI,KAAA,EAAO,WAAU,EAAc;AAClH,EAAA,MAAM,SAAS,KAAA,EAAM;AACrB,EAAA,MAAM,OAAO,IAAA,IAAQ,MAAA;AAErB,EAAA,MAAM,OAAA,GAAU,OAAuB,IAAI,CAAA;AAC3C,EAAA,MAAM,MAAA,GAAS,OAAwB,IAAI,CAAA;AAC3C,EAAA,MAAM,OAAA,GAAU,MAAA,CAAiD,EAAE,CAAA;AACnE,EAAA,MAAM,SAAA,GAAY,OAAO,KAAK,CAAA;AAC9B,EAAA,MAAM,QAAA,GAAW,OAAO,KAAK,CAAA;AAC7B,EAAA,QAAA,CAAS,OAAA,GAAU,KAAA;AAEnB,EAAA,MAAM,KAAA,GAAQ,SAAS,OAAO,CAAA;AAE9B,EAAA,MAAM,KAAA,GAAQ,CAAC,QAAA,KAAsB;AACnC,IAAA,MAAM,IAAA,GAAO,OAAA,CAAQ,OAAA,EACnB,GAAA,GAAM,MAAA,CAAO,OAAA;AACf,IAAA,MAAM,EAAA,GAAK,SAAS,OAAA,IAAW,IAAA,GAAO,QAAQ,OAAA,CAAQ,QAAA,CAAS,OAAO,CAAA,GAAI,IAAA;AAC1E,IAAA,IAAI,CAAC,IAAA,IAAQ,CAAC,GAAA,EAAK;AACnB,IAAA,IAAI,CAAC,EAAA,EAAI;AACP,MAAA,GAAA,CAAI,MAAM,OAAA,GAAU,GAAA;AACpB,MAAA,SAAA,CAAU,OAAA,GAAU,KAAA;AACpB,MAAA;AAAA,IACF;AACA,IAAA,MAAM,OAAO,EAAE,CAAA,EAAG,GAAG,UAAA,EAAY,CAAA,EAAG,GAAG,WAAA,EAAY;AACnD,IAAA,GAAA,CAAI,MAAM,OAAA,GAAU,GAAA;AAEpB,IAAA,IAAI,CAAC,QAAA,IAAY,CAAC,SAAA,CAAU,OAAA,IAAW,GAAG,OAAA,EAAS;AACjD,MAAA,OAAA,CAAQ,KAAK,EAAE,CAAA,EAAG,CAAC,IAAA,CAAK,CAAC,CAAA,EAAG,KAAA,EAAO,CAAC,IAAA,CAAK,CAAC,CAAA,EAAG,MAAA,EAAQ,EAAE,QAAA,EAAU,CAAA,IAAK,CAAA;AAAA,IACxE,CAAA,MAAO;AACL,MAAA,MAAM,EAAA,GAAK,KAAK,qBAAA,EAAsB;AACtC,MAAA,MAAM,EAAA,GAAK,IAAI,qBAAA,EAAsB;AACrC,MAAA,MAAM,GAAA,GAAM,EAAE,CAAA,EAAG,EAAA,CAAG,IAAA,GAAO,EAAA,CAAG,IAAA,GAAO,IAAA,CAAK,UAAA,EAAY,CAAA,EAAG,EAAA,CAAG,KAAA,EAAM;AAClE,MAAA,IAAI,IAAA,CAAK,GAAA,CAAI,GAAA,CAAI,CAAA,GAAI,KAAK,CAAC,CAAA,GAAI,GAAA,IAAO,IAAA,CAAK,IAAI,GAAA,CAAI,CAAA,GAAI,IAAA,CAAK,CAAC,IAAI,GAAA,EAAK;AACpE,QAAA,MAAM,GAAA,GAAM,IAAA,CAAK,CAAA,GAAI,IAAA,CAAK,CAAA,GAAI,CAAA,IAAK,GAAA,CAAI,CAAA,GAAI,GAAA,CAAI,CAAA,GAAI,CAAA,GAAI,CAAA,GAAI,EAAA;AAC3D,QAAA,MAAM,IAAA,GAAO,GAAA,KAAQ,CAAA,GAAI,IAAA,CAAK,CAAA,GAAI,IAAA,CAAK,CAAA,GAAI,GAAA,CAAI,CAAA,GAAI,GAAA,CAAI,CAAA,GAAI,GAAA,CAAI,IAAI,IAAA,CAAK,CAAA;AACxE,QAAA,MAAM,IAAA,GAAO,GAAA,KAAQ,CAAA,GAAI,GAAA,CAAI,IAAI,IAAA,CAAK,CAAA;AACtC,QAAA,OAAA,CAAQ,GAAA,EAAK;AAAA,UACX,GAAG,CAAC,GAAA,CAAI,CAAA,EAAG,IAAA,EAAM,KAAK,CAAC,CAAA;AAAA,UACvB,OAAO,CAAC,GAAA,CAAI,CAAA,EAAG,IAAA,EAAM,KAAK,CAAC,CAAA;AAAA,UAC3B,MAAA,EAAQ,EAAE,QAAA,EAAU,EAAA,CAAG,IAAI,IAAA,EAAM,KAAA,EAAO,CAAC,CAAA,EAAG,IAAA,EAAM,CAAC,CAAA,EAAG,IAAA,EAAM,CAAC,EAAA,CAAG,IAAA,CAAK,UAAU,EAAA,CAAG,IAAA,CAAK,QAAQ,CAAA;AAAE,SAClG,CAAA;AAAA,MACH;AAAA,IACF;AACA,IAAA,SAAA,CAAU,OAAA,GAAU,IAAA;AAAA,EACtB,CAAA;AAEA,EAAA,MAAM,SAAA,GAAY,cAAA,CAAe,OAAA,EAAS,CAAC,OAAO,EAAA,KAAO;AACvD,IAAA,EAAA,CAAG,OAAA,CAAQ,IAAA,GAAA,CAAA,CAAS,KAAA,CAAM,IAAA,GAAO,QAAA,GAAW,OAAO,KAAA,CAAM,KAAA,GAAQ,KAAA,GAAQ,EAAA,CAAA,EAAK,IAAA,EAAK;AAAA,EACrF,CAAC,CAAA;AAED,EAAA,eAAA,CAAgB,MAAM;AACpB,IAAA,KAAA,CAAM,IAAI,CAAA;AACV,IAAA,MAAM,CAAA,GAAI,QAAQ,OAAA,EAChB,EAAA,GAAK,SAAS,IAAA,GAAO,OAAA,CAAQ,OAAA,CAAQ,KAAK,CAAA,GAAI,IAAA;AAChD,IAAA,IAAI,CAAA,IAAK,EAAA,IAAM,CAAA,CAAE,WAAA,GAAc,EAAE,WAAA,EAAa;AAC5C,MAAA,MAAM,QAAA,GAA2B,EAAA,CAAG,OAAA,GAAU,MAAA,GAAS,QAAA;AACvD,MAAA,IAAI,EAAA,CAAG,UAAA,GAAa,CAAA,CAAE,UAAA,GAAa,aAAA,EAAe;AAChD,QAAA,CAAA,CAAE,SAAS,EAAE,IAAA,EAAM,GAAG,UAAA,GAAa,aAAA,EAAe,UAAU,CAAA;AAAA,MAC9D,CAAA,MAAA,IAAW,GAAG,UAAA,GAAa,EAAA,CAAG,cAAc,CAAA,CAAE,UAAA,GAAa,CAAA,CAAE,WAAA,GAAc,aAAA,EAAe;AACxF,QAAA,CAAA,CAAE,QAAA,CAAS,EAAE,IAAA,EAAM,EAAA,CAAG,UAAA,GAAa,EAAA,CAAG,WAAA,GAAc,CAAA,CAAE,WAAA,GAAc,aAAA,EAAe,QAAA,EAAU,CAAA;AAAA,MAC/F;AAAA,IACF;AAAA,EACF,CAAA,EAAG,CAAC,KAAK,CAAC,CAAA;AAEV,EAAA,eAAA,CAAgB,MAAM;AACpB,IAAA,MAAM,EAAA,GAAK,IAAI,cAAA,CAAe,MAAM;AAClC,MAAA,KAAA,CAAM,KAAK,CAAA;AACX,MAAA,SAAA,EAAU;AAAA,IACZ,CAAC,CAAA;AACD,IAAA,IAAI,OAAA,CAAQ,OAAA,EAAS,EAAA,CAAG,OAAA,CAAQ,QAAQ,OAAO,CAAA;AAC/C,IAAA,MAAA,CAAO,MAAA,CAAO,OAAA,CAAQ,OAAO,CAAA,CAAE,OAAA,CAAQ,CAAC,EAAA,KAAO,EAAA,IAAM,EAAA,CAAG,OAAA,CAAQ,EAAE,CAAC,CAAA;AACnE,IAAA,SAAA,EAAU;AACV,IAAA,OAAO,MAAM,GAAG,UAAA,EAAW;AAAA,EAC7B,CAAA,EAAG,CAAC,KAAA,CAAM,MAAM,CAAC,CAAA;AAEjB,EAAA,MAAM,MAAA,GAAS,CAAC,CAAA,KAAc;AAC5B,IAAA,IAAI,CAAA,KAAM,KAAA,IAAS,CAAC,QAAA,EAAU;AAC9B,IAAA,MAAM,GAAA,GAAM,CAAC,CAAA,KAAiC,KAAA,CAAM,UAAU,CAAC,CAAA,KAAM,CAAA,CAAE,KAAA,KAAU,CAAC,CAAA;AAClF,IAAA,QAAA,CAAS,CAAA,EAAG,IAAI,CAAC,CAAA,IAAK,IAAI,KAAK,CAAA,GAAI,IAAI,EAAE,CAAA;AAAA,EAC3C,CAAA;AAEA,EAAA,MAAM,SAAA,GAAY,CAAC,CAAA,KAAqB;AACtC,IAAA,MAAM,UAAU,KAAA,CAAM,MAAA,CAAO,CAAC,CAAA,KAAM,CAAC,EAAE,QAAQ,CAAA;AAC/C,IAAA,IAAI,CAAC,QAAQ,MAAA,EAAQ;AACrB,IAAA,IAAI,IAAA,GAAuB,IAAA;AAC3B,IAAA,IAAI,CAAA,CAAE,GAAA,KAAQ,YAAA,IAAgB,CAAA,CAAE,QAAQ,WAAA,EAAa;AACnD,MAAA,MAAM,IAAA,GAAO,CAAA,CAAE,GAAA,KAAQ,YAAA,GAAe,CAAA,GAAI,EAAA;AAC1C,MAAA,MAAM,IAAI,OAAA,CAAQ,SAAA,CAAU,CAAC,EAAA,KAAO,EAAA,CAAG,UAAU,KAAK,CAAA;AACtD,MAAA,IAAA,GAAO,SAAS,CAAA,GAAI,IAAA,GAAO,OAAA,CAAQ,MAAA,IAAU,QAAQ,MAAM,CAAA;AAAA,IAC7D,CAAA,MAAA,IAAW,CAAA,CAAE,GAAA,KAAQ,MAAA,EAAQ;AAC3B,MAAA,IAAA,GAAO,QAAQ,CAAC,CAAA;AAAA,IAClB,CAAA,MAAA,IAAW,CAAA,CAAE,GAAA,KAAQ,KAAA,EAAO;AAC1B,MAAA,IAAA,GAAO,OAAA,CAAQ,OAAA,CAAQ,MAAA,GAAS,CAAC,CAAA;AAAA,IACnC;AACA,IAAA,IAAI,CAAC,IAAA,EAAM;AACX,IAAA,CAAA,CAAE,cAAA,EAAe;AACjB,IAAA,MAAA,CAAO,KAAK,KAAK,CAAA;AACjB,IAAA,MAAM,EAAA,GAAK,OAAA,CAAQ,OAAA,CAAQ,IAAA,CAAK,KAAK,CAAA;AACrC,IAAA,IAAI,EAAA,KAAO,KAAA,EAAM;AAAA,EACnB,CAAA;AAEA,EAAA,MAAM,UAAA,GAAa,MAAM,IAAA,CAAK,CAAC,MAAM,CAAA,CAAE,KAAA,KAAU,KAAA,IAAS,CAAC,CAAA,CAAE,QAAQ,IACjE,KAAA,GAAA,CACC,KAAA,CAAM,KAAK,CAAC,CAAA,KAAM,CAAC,CAAA,CAAE,QAAQ,CAAA,IAAM,EAAC,EAAwB,KAAA;AAEjE,EAAA,uBACE,GAAA,CAAC,SAAI,SAAA,EAAW,EAAA,CAAG,QAAQ,SAAS,CAAA,EAAG,KAAA,EAAe,GAAG,SAAA,EACvD,QAAA,kBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAU,YAAA;AAAA,MACV,IAAA,EAAK,SAAA;AAAA,MACL,YAAA,EAAY,SAAA;AAAA,MACZ,GAAA,EAAK,OAAA;AAAA,MACL,SAAA;AAAA,MACA,gBAAgB,KAAA,CAAM,KAAA;AAAA,MAEtB,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,SAAA,EAAA,EAAU,SAAA,EAAU,YAAA,EAAa,KAAA,EAAc,CAAA;AAAA,QAC/C,KAAA,CAAM,GAAA,CAAI,CAAC,EAAA,KAAO;AACjB,UAAA,MAAM,QAAA,GAAW,GAAG,KAAA,KAAU,KAAA;AAC9B,UAAA,uBACE,GAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cAEC,IAAA,EAAK,QAAA;AAAA,cACL,IAAA,EAAK,KAAA;AAAA,cACL,EAAA,EAAI,IAAA,GAAO,OAAA,GAAU,EAAA,CAAG,KAAA;AAAA,cACxB,eAAA,EAAe,QAAA;AAAA,cACf,eAAA,EAAe,IAAA,GAAO,IAAA,GAAO,SAAA,GAAY,GAAG,KAAA,GAAQ,MAAA;AAAA,cACpD,QAAA,EAAU,EAAA,CAAG,KAAA,KAAU,UAAA,GAAa,CAAA,GAAI,EAAA;AAAA,cACxC,UAAU,EAAA,CAAG,QAAA;AAAA,cACb,SAAA,EAAW,KAAA,IAAS,QAAA,GAAW,cAAA,GAAiB,EAAA,CAAA;AAAA,cAChD,GAAA,EAAK,CAAC,EAAA,KAAO;AACX,gBAAA,OAAA,CAAQ,OAAA,CAAQ,EAAA,CAAG,KAAK,CAAA,GAAI,EAAA;AAAA,cAC9B,CAAA;AAAA,cACA,OAAA,EAAS,MAAM,MAAA,CAAO,EAAA,CAAG,KAAK,CAAA;AAAA,cAC9B,cAAA,EACE,EAAA,CAAG,QAAA,GAAW,MAAA,GAAY,CAAC,MAAM,KAAA,CAAM,KAAA,CAAM,CAAA,CAAE,aAAA,CAAc,iBAAgC,CAAA;AAAA,cAG/F,QAAA,kBAAA,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,UAAA,EACb,QAAA,EAAA;AAAA,gBAAA,EAAA,CAAG,wBAAQ,GAAA,CAAC,QAAA,EAAA,EAAS,IAAA,EAAK,IAAA,EAAM,aAAG,IAAA,EAAK,CAAA;AAAA,gCACzC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,YAAA,EAAc,aAAG,KAAA,EAAM,CAAA;AAAA,gBACtC,EAAA,CAAG,SAAS,IAAA,oBAAQ,GAAA,CAAC,UAAK,SAAA,EAAU,YAAA,EAAc,aAAG,KAAA,EAAM;AAAA,eAAA,EAC9D;AAAA,aAAA;AAAA,YArBK,EAAA,CAAG;AAAA,WAsBV;AAAA,QAEJ,CAAC,CAAA;AAAA,wBACD,GAAA,CAAC,UAAK,SAAA,EAAU,WAAA,EAAsB,KAAK,MAAA,EAAQ,aAAA,EAAY,UAA/B,KAAsC;AAAA;AAAA;AAAA,GACxE,EACF,CAAA;AAEJ;AAyBA,IAAM,eAAA,GAAkB;AAAA,EACtB,IAAA,EAAM,EAAE,QAAA,EAAU,MAAA,EAAQ,MAAM,UAAA,EAAW;AAAA,EAC3C,KAAA,EAAO,EAAE,QAAA,EAAU,MAAA,EAAQ,MAAM,UAAA;AACnC,CAAA;AAEO,SAAS,QAAA,CAAS,EAAE,GAAA,EAAK,IAAA,EAAM,GAAA,GAAM,CAAA,EAAG,SAAA,GAAY,EAAA,EAAI,KAAA,EAAO,QAAA,EAAU,SAAA,EAAW,SAAA,EAAU,EAAkB;AACrH,EAAA,MAAM,KAAA,GAAQ,mBAAA,CAAoB,SAAA,EAAW,eAAe,CAAA,CAAE,IAAA;AAC9D,EAAA,MAAM,QAAA,GAAW,OAA8B,IAAI,CAAA;AACnD,EAAA,MAAM,QAAA,GAAW,OAA0C,IAAI,CAAA;AAE/D,EAAA,eAAA,CAAgB,MAAM;AACpB,IAAA,MAAM,KAAK,QAAA,CAAS,OAAA;AACpB,IAAA,IAAI,CAAC,EAAA,EAAI;AACT,IAAA,QAAA,CAAS,SAAS,IAAA,EAAK;AACvB,IAAA,QAAA,CAAS,UAAU,OAAA,CAAQ,EAAA,EAAI,EAAE,CAAA,EAAG,CAAC,GAAA,GAAM,YAAA,EAAc,CAAC,CAAA,EAAG,GAAG,CAAC,CAAA,EAAG,CAAC,CAAA,EAAG,MAAA,EAAQ,OAAO,CAAA;AACvF,IAAA,OAAO,MAAM,QAAA,CAAS,OAAA,EAAS,IAAA,EAAK;AAAA,EACtC,CAAA,EAAG,CAAC,GAAG,CAAC,CAAA;AAER,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,UAAA;AAAA,MACL,QAAA,EAAU,CAAA;AAAA,MACV,IAAI,IAAA,GAAO,CAAA,EAAG,IAAI,CAAA,OAAA,EAAU,GAAG,CAAA,CAAA,GAAK,MAAA;AAAA,MACpC,mBAAiB,IAAA,GAAO,CAAA,EAAG,IAAI,CAAA,KAAA,EAAQ,GAAG,CAAA,CAAA,GAAK,MAAA;AAAA,MAC/C,SAAA,EAAW,EAAA,CAAG,WAAA,EAAa,SAAS,CAAA;AAAA,MACpC,KAAA;AAAA,MACC,GAAG,SAAA;AAAA,MAEJ,8BAAC,KAAA,EAAA,EAAI,GAAA,EAAK,QAAA,EAAU,SAAA,EAAU,oBAC3B,QAAA,EACH;AAAA;AAAA,GACF;AAEJ","file":"tabs.js","sourcesContent":["'use client';\n\nimport './tabs.css';\nimport {\n  useId,\n  useLayoutEffect,\n  useRef,\n  type CSSProperties,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n} from 'react';\nimport { animate } from '../../../engine';\nimport { UIMotion } from '../../../tokens/motion-tokens';\nimport { IconSlot } from '../../internal/icon/IconSlot';\nimport { GlidePill, useGlide } from '../../../motion/glide';\nimport { useScrollEdges } from '../../internal/hooks/use-scroll-edges';\nimport { type DisableableAnimation } from '../../../motion/timing';\nimport { resolveMotionTiming } from '../../../motion/motion-timing';\nimport type { DataAttributes } from '../../../dom-props';\nimport { cx } from '../../internal/utils/cx';\n\nconst SM = UIMotion;\n\n/** One tab in the row. */\nexport interface TabItem {\n  /** Stable identity - also used in the tab/panel id pair. */\n  value: string;\n  /** Visible tab text. */\n  label: ReactNode;\n  /** Leading icon - your own node. */\n  icon?: ReactNode;\n  /** Rendered mono + tabular. Pass a number or a preformatted string. */\n  count?: number | string;\n  /** Dims the tab, blocks selection, and skips it during arrow-key travel. */\n  disabled?: boolean;\n}\n\ninterface TabsOwnProps {\n  /** The tab row, in order. @default [] */\n  items: TabItem[];\n  /** Controlled - the value of the active tab (null/undefined hides the ink). */\n  value: string | null | undefined;\n  /**\n   * Fires on click and on arrow-key travel (automatic activation).\n   * `dir` is the direction of travel (+1 right / -1 left) - hand it to\n   * TabPanel so content enters from the side the user moved toward.\n   */\n  onChange?: (value: string, dir: 1 | -1) => void;\n  /**\n   * Shared id prefix wiring tab and panel aria. Give Tabs and its TabPanel the\n   * same `name`; omit it when the tabs have no managed panel.\n   */\n  name?: string;\n  /** Accessible name for the tablist (e.g. \"Section views\"). */\n  ariaLabel?: string;\n  /** Extra class(es) merged onto the root. */\n  className?: string;\n  /** Inline styles merged onto the root. */\n  style?: CSSProperties;\n}\n\nexport interface TabsProps extends TabsOwnProps {\n  /** Standard <div> attributes (data-*, aria-*, ...) forwarded to the root. */\n  htmlProps?: Omit<HTMLAttributes<HTMLDivElement>, keyof TabsOwnProps> & DataAttributes;\n}\n\nconst TABS_EDGE_PAD = 24;\nconst TABS_ENTER_X = 20;\n\nexport function Tabs({ items = [], value, onChange, name, ariaLabel, className = '', style, htmlProps }: TabsProps) {\n  const autoId = useId();\n  const base = name || autoId;\n\n  const listRef = useRef<HTMLDivElement>(null);\n  const inkRef = useRef<HTMLSpanElement>(null);\n  const tabRefs = useRef<Record<string, HTMLButtonElement | null>>({});\n  const placedRef = useRef(false);\n  const valueRef = useRef(value);\n  valueRef.current = value;\n\n  const glide = useGlide(listRef);\n\n  const place = (animated: boolean) => {\n    const list = listRef.current,\n      ink = inkRef.current;\n    const el = valueRef.current != null ? tabRefs.current[valueRef.current] : null;\n    if (!list || !ink) return;\n    if (!el) {\n      ink.style.opacity = '0';\n      placedRef.current = false;\n      return;\n    }\n    const next = { x: el.offsetLeft, w: el.offsetWidth };\n    ink.style.opacity = '1';\n\n    if (!animated || !placedRef.current || SM.reduced) {\n      animate(ink, { x: [next.x], width: [next.w], timing: { duration: 0 } });\n    } else {\n      const lr = list.getBoundingClientRect();\n      const ir = ink.getBoundingClientRect();\n      const cur = { x: ir.left - lr.left + list.scrollLeft, w: ir.width };\n      if (Math.abs(cur.x - next.x) > 0.5 || Math.abs(cur.w - next.w) > 0.5) {\n        const dir = next.x + next.w / 2 >= cur.x + cur.w / 2 ? 1 : -1;\n        const span = dir === 1 ? next.x + next.w - cur.x : cur.x + cur.w - next.x;\n        const lead = dir === 1 ? cur.x : next.x;\n        animate(ink, {\n          x: [cur.x, lead, next.x],\n          width: [cur.w, span, next.w],\n          timing: { duration: SM.dur.slow, times: [0, 0.55, 1], ease: [SM.ease.standard, SM.ease.entrance] },\n        });\n      }\n    }\n    placedRef.current = true;\n  };\n\n  const syncEdges = useScrollEdges(listRef, (edges, el) => {\n    el.dataset.fade = ((edges.left ? 'start ' : '') + (edges.right ? 'end' : '')).trim();\n  });\n\n  useLayoutEffect(() => {\n    place(true);\n    const l = listRef.current,\n      el = value != null ? tabRefs.current[value] : null;\n    if (l && el && l.scrollWidth > l.clientWidth) {\n      const behavior: ScrollBehavior = SM.reduced ? 'auto' : 'smooth';\n      if (el.offsetLeft < l.scrollLeft + TABS_EDGE_PAD) {\n        l.scrollTo({ left: el.offsetLeft - TABS_EDGE_PAD, behavior });\n      } else if (el.offsetLeft + el.offsetWidth > l.scrollLeft + l.clientWidth - TABS_EDGE_PAD) {\n        l.scrollTo({ left: el.offsetLeft + el.offsetWidth - l.clientWidth + TABS_EDGE_PAD, behavior });\n      }\n    }\n  }, [value]);\n\n  useLayoutEffect(() => {\n    const ro = new ResizeObserver(() => {\n      place(false);\n      syncEdges();\n    });\n    if (listRef.current) ro.observe(listRef.current);\n    Object.values(tabRefs.current).forEach((el) => el && ro.observe(el));\n    syncEdges();\n    return () => ro.disconnect();\n  }, [items.length]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  const select = (v: string) => {\n    if (v === value || !onChange) return;\n    const idx = (x: string | null | undefined) => items.findIndex((i) => i.value === x);\n    onChange(v, idx(v) >= idx(value) ? 1 : -1);\n  };\n\n  const onKeyDown = (e: KeyboardEvent) => {\n    const enabled = items.filter((i) => !i.disabled);\n    if (!enabled.length) return;\n    let next: TabItem | null = null;\n    if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {\n      const step = e.key === 'ArrowRight' ? 1 : -1;\n      const i = enabled.findIndex((it) => it.value === value);\n      next = enabled[(i + step + enabled.length) % enabled.length];\n    } else if (e.key === 'Home') {\n      next = enabled[0];\n    } else if (e.key === 'End') {\n      next = enabled[enabled.length - 1];\n    }\n    if (!next) return;\n    e.preventDefault();\n    select(next.value);\n    const el = tabRefs.current[next.value];\n    if (el) el.focus();\n  };\n\n  const focusValue = items.some((i) => i.value === value && !i.disabled)\n    ? value\n    : (items.find((i) => !i.disabled) || ({} as Partial<TabItem>)).value;\n\n  return (\n    <div className={cx('tabs', className)} style={style} {...htmlProps}>\n      <div\n        className=\"tabs__list\"\n        role=\"tablist\"\n        aria-label={ariaLabel}\n        ref={listRef}\n        onKeyDown={onKeyDown}\n        onPointerLeave={glide.leave}\n      >\n        <GlidePill className=\"tab__hover\" glide={glide} />\n        {items.map((it) => {\n          const selected = it.value === value;\n          return (\n            <button\n              key={it.value}\n              type=\"button\"\n              role=\"tab\"\n              id={base + '-tab-' + it.value}\n              aria-selected={selected}\n              aria-controls={name ? name + '-panel-' + it.value : undefined}\n              tabIndex={it.value === focusValue ? 0 : -1}\n              disabled={it.disabled}\n              className={'tab' + (selected ? ' is-selected' : '')}\n              ref={(el) => {\n                tabRefs.current[it.value] = el;\n              }}\n              onClick={() => select(it.value)}\n              onPointerEnter={\n                it.disabled ? undefined : (e) => glide.enter(e.currentTarget.firstElementChild as HTMLElement)\n              }\n            >\n              <span className=\"tab__pad\">\n                {it.icon && <IconSlot size=\"sm\">{it.icon}</IconSlot>}\n                <span className=\"tab__label\">{it.label}</span>\n                {it.count != null && <span className=\"tab__count\">{it.count}</span>}\n              </span>\n            </button>\n          );\n        })}\n        <span className=\"tabs__ink\" key=\"ink\" ref={inkRef} aria-hidden=\"true\"></span>\n      </div>\n    </div>\n  );\n}\n\ninterface TabPanelOwnProps {\n  /** The active tab's value - changing it cuts to the new content. */\n  tab: string;\n  /** Same `name` as the paired Tabs - wires role/id/aria-labelledby. */\n  name?: string;\n  /** Direction of travel from Tabs' onChange; 0 = plain fade. */\n  dir?: -1 | 0 | 1;\n  /** Panel content - only this inner node animates in on `tab` change; the root chrome stays static. */\n  children?: ReactNode;\n  /** Entrance timing for the inner content - motion tokens only, or `null` to disable.\n   *  @default duration 'base' + ease 'entrance' */\n  animation?: DisableableAnimation;\n  /** Extra class(es) merged onto the root. */\n  className?: string;\n  /** Inline styles merged onto the root. */\n  style?: CSSProperties;\n}\n\nexport interface TabPanelProps extends TabPanelOwnProps {\n  /** Standard <div> attributes (data-*, aria-*, ...) forwarded to the root. */\n  htmlProps?: Omit<HTMLAttributes<HTMLDivElement>, keyof TabPanelOwnProps> & DataAttributes;\n}\n\nconst TABPANEL_TIMING = {\n  open: { duration: 'base', ease: 'entrance' },\n  close: { duration: 'base', ease: 'entrance' },\n} as const;\n\nexport function TabPanel({ tab, name, dir = 0, className = '', style, children, animation, htmlProps }: TabPanelProps) {\n  const enter = resolveMotionTiming(animation, TABPANEL_TIMING).open;\n  const innerRef = useRef<HTMLDivElement | null>(null);\n  const enterRef = useRef<ReturnType<typeof animate> | null>(null);\n\n  useLayoutEffect(() => {\n    const el = innerRef.current;\n    if (!el) return;\n    enterRef.current?.stop();\n    enterRef.current = animate(el, { x: [dir * TABS_ENTER_X, 0], y: [4, 0], timing: enter });\n    return () => enterRef.current?.stop();\n  }, [tab]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  return (\n    <div\n      role=\"tabpanel\"\n      tabIndex={0}\n      id={name ? `${name}-panel-${tab}` : undefined}\n      aria-labelledby={name ? `${name}-tab-${tab}` : undefined}\n      className={cx('tab-panel', className)}\n      style={style}\n      {...htmlProps}\n    >\n      <div ref={innerRef} className=\"tab-panel__inner\">\n        {children}\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/tag.css

@@ -0,0 +1,248 @@
+/* Tag / chip - interactive label (button-family chrome): base .tag + .tag--toggle sibling. */
+
+.tag {
+  --tag-h: var(--control-height-sm);
+  /* button-family DNA: lit from above + a contact shadow (.btn--secondary) */
+  --tag-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.6), 0 1px 2px 0 rgb(var(--shadow-rgb) / 0.05);
+
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  height: var(--tag-h);
+  max-width: 100%;
+  padding-inline: var(--space-2);
+  border: var(--border-hairline) solid var(--border-default);
+  border-radius: var(--radius-sm);
+  background: var(--bg-surface);
+  color: var(--text-body);
+
+  font-family: var(--font-sans);
+  font-size: var(--size-caption);
+  line-height: 1;
+  font-weight: var(--weight-medium);
+  letter-spacing: var(--tracking-normal);
+  white-space: nowrap;
+  vertical-align: middle;
+  user-select: none;
+  -webkit-user-select: none;
+  box-shadow: var(--tag-shadow);
+
+  /* no transform transition here - Motion writes transforms on grouped tags (section C) */
+  transition: var(--transition-control);
+}
+
+.tag__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.tag--sm {
+  --tag-h: var(--space-5);
+  font-size: var(--size-micro);
+}
+
+.tag__icon {
+  display: inline-flex;
+  flex: none;
+}
+.tag__icon svg,
+.tag__icon i {
+  display: block;
+}
+
+/* Dual-weight icon crossfade - transitions, not animations, so nothing plays on first paint. */
+.tag__icon--dual {
+  display: inline-grid;
+}
+.tag__icon--dual > :is(i, svg) {
+  grid-area: 1 / 1;
+  transition:
+    opacity var(--duration-base) var(--ease-standard),
+    transform var(--duration-base) var(--ease-standard);
+}
+.tag__icon--dual > :is(i, svg):last-child {
+  opacity: 0;
+  transform: scale(0.6);
+}
+.tag--toggle[aria-pressed='true'] .tag__icon--dual > :is(i, svg):first-child {
+  opacity: 0;
+}
+.tag--toggle[aria-pressed='true'] .tag__icon--dual > :is(i, svg):last-child {
+  opacity: 1;
+  transform: scale(1);
+  transition:
+    opacity var(--duration-fast) var(--ease-standard),
+    transform var(--duration-slow) var(--ease-spring);
+}
+
+.tag__count {
+  font-family: var(--font-mono);
+  font-size: var(--size-micro);
+  font-variant-numeric: tabular-nums;
+  color: var(--text-subtle);
+  transition: color var(--duration-fast) var(--ease-standard);
+}
+
+.tag__remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: calc(var(--tag-h) - var(--space-2));
+  height: calc(var(--tag-h) - var(--space-2));
+  margin-right: calc(var(--space-1) * -1);
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-full);
+  background: transparent;
+  color: var(--text-subtle);
+  cursor: pointer;
+  appearance: none;
+  -webkit-tap-highlight-color: transparent;
+  transition:
+    color var(--duration-fast) var(--ease-standard),
+    background-color var(--duration-fast) var(--ease-standard),
+    transform var(--duration-fast) var(--ease-standard);
+}
+.tag__remove svg {
+  display: block;
+  width: var(--space-3);
+  height: var(--space-3);
+  transition: transform var(--duration-base) var(--ease-standard);
+}
+.tag__remove:hover {
+  color: var(--text-strong);
+  background: var(--bg-muted);
+}
+.tag__remove:hover svg {
+  transform: rotate(30deg);
+}
+.tag__remove:active {
+  transform: scale(0.9);
+}
+.tag__remove:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.tag:has(.tag__remove:hover):not([data-disabled]),
+.tag:has(.tag__remove:focus-visible) {
+  color: var(--text-muted);
+  border-color: var(--border-strong);
+}
+
+.tag--toggle {
+  cursor: pointer;
+  appearance: none;
+  -webkit-tap-highlight-color: transparent;
+  transition:
+    var(--transition-control),
+    transform var(--duration-fast) var(--ease-standard);
+}
+.tag--toggle:hover:not(:disabled) {
+  color: var(--text-strong);
+  border-color: var(--border-strong);
+  background: var(--neutral-wash);
+}
+.tag--toggle:active:not(:disabled) {
+  transform: translateY(var(--space-px));
+  background: var(--bg-muted);
+  --tag-shadow: inset 0 1px 2px 0 rgb(var(--shadow-rgb) / 0.07);
+}
+/* composed ring - never erases the resting shadow (.btn pattern) */
+.tag--toggle:focus-visible {
+  outline: none;
+  box-shadow: var(--tag-shadow), var(--focus-ring);
+}
+
+/* Selected = accent wash, never a solid fill; the top sheen comes off (matte), the contact shadow stays. */
+.tag--toggle[aria-pressed='true'] {
+  color: var(--text-accent);
+  border-color: var(--accent-border);
+  background: var(--accent-wash);
+  --tag-shadow: 0 1px 2px 0 rgb(var(--shadow-rgb) / 0.05);
+}
+.tag--toggle[aria-pressed='true']:hover:not(:disabled) {
+  color: var(--accent-active);
+  border-color: var(--accent-border);
+  background: var(--accent-wash);
+}
+.tag--toggle[aria-pressed='true']:active:not(:disabled) {
+  background: var(--accent-subtle);
+}
+.tag--toggle[aria-pressed='true'] .tag__count {
+  color: inherit;
+}
+
+/* Tick slot (Collapse width mechanism); the negative margin cancels the flex gap while collapsed, the inner margin restores it when open. */
+.tag__check {
+  margin-right: calc(var(--space-1) * -1);
+}
+.tag__check svg {
+  display: block;
+  width: var(--space-3);
+  height: var(--space-3);
+  margin-right: var(--space-1);
+}
+.tag__check path {
+  stroke: currentColor;
+  stroke-dasharray: 1;
+  stroke-dashoffset: 1;
+  transition: stroke-dashoffset var(--duration-base) var(--ease-standard);
+}
+.tag--toggle[aria-pressed='true'] .tag__check path {
+  stroke-dashoffset: 0;
+  transition: stroke-dashoffset var(--duration-slow) var(--ease-entrance) 60ms;
+}
+
+.tag[data-disabled],
+.tag--toggle:disabled {
+  color: var(--text-disabled);
+  border-color: var(--border-subtle);
+  background: var(--bg-surface);
+  cursor: default;
+  --tag-shadow: none;
+}
+.tag[data-disabled] .tag__count,
+.tag--toggle:disabled .tag__count {
+  color: var(--text-disabled);
+}
+.tag[data-disabled] .tag__remove {
+  color: var(--text-disabled);
+  background: transparent;
+  cursor: default;
+  pointer-events: none;
+}
+.tag--toggle:disabled {
+  transform: none;
+}
+.tag--toggle:disabled[aria-pressed='true'] {
+  background: var(--bg-muted);
+  border-color: var(--border-subtle);
+}
+
+.tag-group {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tag__remove svg {
+    transition: none;
+  }
+  .tag__remove:hover svg {
+    transform: none;
+  }
+  .tag__remove:active {
+    transform: none;
+  }
+  .tag--toggle:active:not(:disabled) {
+    transform: none;
+  }
+  .tag__icon--dual > :is(i, svg) {
+    transition: none;
+  }
+}

package/dist/tag.d.ts

@@ -0,0 +1,52 @@
+import * as react from 'react';
+import { ReactNode, CSSProperties, HTMLAttributes, Ref } from 'react';
+import { D as DisableableAnimation } from './timing-7JA_zQHP.js';
+import { D as DataAttributes } from './dom-props-C0jrllBw.js';
+import './motion-scale-Canq4stZ.js';
+
+interface TagOwnProps {
+    /** Tag content; a string label also seeds the default remove-button `aria-label`. */
+    children: ReactNode;
+    /** Your own icon node, sized small and tinted to the tag's text. */
+    icon?: ReactNode | null;
+    /** Presence adds the remove button; called on click - remove the item yourself. */
+    onRemove?: (() => void) | null;
+    /** Accessible label for the remove button. Defaults to "Remove {label}" for string labels. */
+    removeLabel?: string;
+    /** 'md' = 28px (default) - 'sm' = 24px for dense rows. */
+    size?: 'md' | 'sm';
+    /** Set `data-disabled` on the tag and disable its remove button. @default false */
+    disabled?: boolean;
+    /** Extra class(es) merged onto the root element. */
+    className?: string;
+    /** Inline styles merged onto the root element. */
+    style?: CSSProperties;
+}
+/** Tag - the removable, editable label (stateless; the parent owns the list). */
+interface TagProps extends TagOwnProps {
+    /** Standard <span> attributes forwarded to the tag root. */
+    htmlProps?: Omit<HTMLAttributes<HTMLSpanElement>, keyof TagOwnProps> & DataAttributes;
+    /** Ref to the tag root span. */
+    ref?: Ref<HTMLSpanElement>;
+}
+interface TagGroupOwnProps {
+    /** Accessible name for the group (role="group"). */
+    ariaLabel?: string;
+    /** The `Tag`s; adds, removals and reflow are animated. */
+    children?: ReactNode;
+    /** Extra class(es) merged onto the group wrapper. */
+    className?: string;
+    /** Inline styles merged onto the group wrapper. */
+    style?: CSSProperties;
+    /** Add/remove/reflow timing for the member tags - motion tokens only, or `null` to disable. */
+    animation?: DisableableAnimation;
+}
+/** TagGroup - wrapping flex row + removal/insertion choreography. */
+interface TagGroupProps extends TagGroupOwnProps {
+    /** Standard <div> attributes forwarded to the group wrapper. */
+    htmlProps?: Omit<HTMLAttributes<HTMLDivElement>, keyof TagGroupOwnProps> & DataAttributes;
+}
+declare function Tag({ children, icon, onRemove, removeLabel, size, disabled, className, style, htmlProps, ref, }: TagProps): react.JSX.Element;
+declare function TagGroup({ ariaLabel, className, style, children, htmlProps, animation }: TagGroupProps): react.JSX.Element;
+
+export { Tag, TagGroup, type TagGroupProps, type TagProps };

package/dist/tag.js

@@ -0,0 +1,72 @@
+'use client';import { Motion } from './chunk-36WVAQKL.js';
+import { resolveMotionTiming } from './chunk-NEF5XAHG.js';
+import { Presence } from './chunk-MXOPCFWR.js';
+import './chunk-W3SHPKSB.js';
+import './chunk-JSKXZMLH.js';
+import './chunk-L3Q3VDIW.js';
+import { IconSlot } from './chunk-2ERBBFZS.js';
+import './chunk-S5ZTZANS.js';
+import './chunk-VTJTGVZZ.js';
+import { cx } from './chunk-QGNC7LH5.js';
+import './tag.css';
+import { createContext, useContext } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var TAG_TIMING = { open: { duration: "base", ease: "entrance" }, close: { duration: "fast", ease: "exit" } };
+var TAG_LAYOUT_TIMING = {
+  open: { duration: "slow", ease: "entrance" },
+  close: { duration: "slow", ease: "entrance" }
+};
+var TagGroupContext = createContext(null);
+function TagRemoveGlyph() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M3 3 L9 9 M9 3 L3 9", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) });
+}
+function Tag({
+  children,
+  icon = null,
+  onRemove = null,
+  removeLabel,
+  size = "md",
+  disabled = false,
+  className = "",
+  style,
+  htmlProps,
+  ref
+}) {
+  const cls = cx("tag", size === "sm" && "tag--sm", className);
+  const xLabel = removeLabel || (typeof children === "string" ? "Remove " + children : "Remove");
+  const group = useContext(TagGroupContext);
+  return /* @__PURE__ */ jsxs(
+    Motion,
+    {
+      as: "span",
+      ref,
+      animate: group?.animate,
+      exit: group?.exit,
+      layout: group?.layout,
+      className: cls,
+      style,
+      "data-disabled": disabled ? "true" : void 0,
+      ...htmlProps,
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "tag__icon", children: /* @__PURE__ */ jsx(IconSlot, { size: "sm", children: icon }) }),
+        /* @__PURE__ */ jsx("span", { className: "tag__label", children }),
+        onRemove && /* @__PURE__ */ jsx("button", { type: "button", className: "tag__remove", "aria-label": xLabel, disabled, onClick: onRemove, children: /* @__PURE__ */ jsx(TagRemoveGlyph, {}) })
+      ]
+    }
+  );
+}
+function TagGroup({ ariaLabel, className = "", style, children, htmlProps, animation }) {
+  const step = resolveMotionTiming(animation, TAG_TIMING);
+  const layout = resolveMotionTiming(animation, TAG_LAYOUT_TIMING).open;
+  const motion = {
+    animate: { opacity: [0, 1], scale: [0.9, 1], timing: step.open },
+    exit: { opacity: [1, 0], scale: [1, 0.9], timing: step.close },
+    layout: { timing: layout }
+  };
+  return /* @__PURE__ */ jsx("div", { className: cx("tag-group", className), style, role: "group", "aria-label": ariaLabel, ...htmlProps, children: /* @__PURE__ */ jsx(TagGroupContext.Provider, { value: motion, children: /* @__PURE__ */ jsx(Presence, { initial: false, children }) }) });
+}
+
+export { Tag, TagGroup };
+//# sourceMappingURL=tag.js.map
+//# sourceMappingURL=tag.js.map

package/dist/tag.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/tag/Tag.tsx"],"names":[],"mappings":"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","file":"tag.js","sourcesContent":["'use client';\n\nimport './tag.css';\nimport { createContext, useContext, type CSSProperties, type HTMLAttributes, type ReactNode, type Ref } from 'react';\nimport { Presence } from '../../../motion/presence';\nimport { Motion } from '../../../motion/element';\nimport { resolveMotionTiming } from '../../../motion/motion-timing';\nimport type { DisableableAnimation } from '../../../motion/timing';\nimport type { FlipTuning } from '../../../motion/flip';\nimport type { Layer } from '../../../engine';\nimport { IconSlot } from '../../internal/icon/IconSlot';\nimport type { DataAttributes } from '../../../dom-props';\nimport { cx } from '../../internal/utils/cx';\n\nconst TAG_TIMING = { open: { duration: 'base', ease: 'entrance' }, close: { duration: 'fast', ease: 'exit' } } as const;\nconst TAG_LAYOUT_TIMING = {\n  open: { duration: 'slow', ease: 'entrance' },\n  close: { duration: 'slow', ease: 'entrance' },\n} as const;\n\ninterface TagGroupMotion {\n  animate: Layer;\n  exit: Layer;\n  layout: FlipTuning;\n}\n\nconst TagGroupContext = createContext<TagGroupMotion | null>(null);\n\ninterface TagOwnProps {\n  /** Tag content; a string label also seeds the default remove-button `aria-label`. */\n  children: ReactNode;\n  /** Your own icon node, sized small and tinted to the tag's text. */\n  icon?: ReactNode | null;\n  /** Presence adds the remove button; called on click - remove the item yourself. */\n  onRemove?: (() => void) | null;\n  /** Accessible label for the remove button. Defaults to \"Remove {label}\" for string labels. */\n  removeLabel?: string;\n  /** 'md' = 28px (default) - 'sm' = 24px for dense rows. */\n  size?: 'md' | 'sm';\n  /** Set `data-disabled` on the tag and disable its remove button. @default false */\n  disabled?: boolean;\n  /** Extra class(es) merged onto the root element. */\n  className?: string;\n  /** Inline styles merged onto the root element. */\n  style?: CSSProperties;\n}\n\n/** Tag - the removable, editable label (stateless; the parent owns the list). */\nexport interface TagProps extends TagOwnProps {\n  /** Standard <span> attributes forwarded to the tag root. */\n  htmlProps?: Omit<HTMLAttributes<HTMLSpanElement>, keyof TagOwnProps> & DataAttributes;\n  /** Ref to the tag root span. */\n  ref?: Ref<HTMLSpanElement>;\n}\n\ninterface TagGroupOwnProps {\n  /** Accessible name for the group (role=\"group\"). */\n  ariaLabel?: string;\n  /** The `Tag`s; adds, removals and reflow are animated. */\n  children?: ReactNode;\n  /** Extra class(es) merged onto the group wrapper. */\n  className?: string;\n  /** Inline styles merged onto the group wrapper. */\n  style?: CSSProperties;\n  /** Add/remove/reflow timing for the member tags - motion tokens only, or `null` to disable. */\n  animation?: DisableableAnimation;\n}\n\n/** TagGroup - wrapping flex row + removal/insertion choreography. */\nexport interface TagGroupProps extends TagGroupOwnProps {\n  /** Standard <div> attributes forwarded to the group wrapper. */\n  htmlProps?: Omit<HTMLAttributes<HTMLDivElement>, keyof TagGroupOwnProps> & DataAttributes;\n}\n\nfunction TagRemoveGlyph() {\n  return (\n    <svg viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n      <path d=\"M3 3 L9 9 M9 3 L3 9\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n    </svg>\n  );\n}\n\nexport function Tag({\n  children,\n  icon = null,\n  onRemove = null,\n  removeLabel,\n  size = 'md',\n  disabled = false,\n  className = '',\n  style,\n  htmlProps,\n  ref,\n}: TagProps) {\n  const cls = cx('tag', size === 'sm' && 'tag--sm', className);\n  const xLabel = removeLabel || (typeof children === 'string' ? 'Remove ' + children : 'Remove');\n  const group = useContext(TagGroupContext);\n\n  return (\n    <Motion\n      as=\"span\"\n      ref={ref}\n      animate={group?.animate}\n      exit={group?.exit}\n      layout={group?.layout}\n      className={cls}\n      style={style}\n      data-disabled={disabled ? 'true' : undefined}\n      {...htmlProps}\n    >\n      {icon && (\n        <span className=\"tag__icon\">\n          <IconSlot size=\"sm\">{icon}</IconSlot>\n        </span>\n      )}\n      <span className=\"tag__label\">{children}</span>\n      {onRemove && (\n        <button type=\"button\" className=\"tag__remove\" aria-label={xLabel} disabled={disabled} onClick={onRemove}>\n          <TagRemoveGlyph />\n        </button>\n      )}\n    </Motion>\n  );\n}\n\nexport function TagGroup({ ariaLabel, className = '', style, children, htmlProps, animation }: TagGroupProps) {\n  const step = resolveMotionTiming(animation, TAG_TIMING);\n  const layout = resolveMotionTiming(animation, TAG_LAYOUT_TIMING).open;\n\n  const motion = {\n    animate: { opacity: [0, 1], scale: [0.9, 1], timing: step.open },\n    exit: { opacity: [1, 0], scale: [1, 0.9], timing: step.close },\n    layout: { timing: layout },\n  };\n\n  return (\n    <div className={cx('tag-group', className)} style={style} role=\"group\" aria-label={ariaLabel} {...htmlProps}>\n      <TagGroupContext.Provider value={motion}>\n        <Presence initial={false}>{children}</Presence>\n      </TagGroupContext.Provider>\n    </div>\n  );\n}\n"]}

package/dist/text-field.d.ts

@@ -0,0 +1,28 @@
+import * as react from 'react';
+import { InputHTMLAttributes, ReactNode, CSSProperties } from 'react';
+import { b as FieldMessagingProps } from './field-chrome-CMPOQSLs.js';
+import { D as DataAttributes } from './dom-props-C0jrllBw.js';
+
+/** The native <input> props TextField surfaces at the top level (the rest live in `htmlProps`). */
+type TextFieldNative = Pick<InputHTMLAttributes<HTMLInputElement>, 'placeholder' | 'value' | 'onChange' | 'disabled' | 'readOnly' | 'maxLength' | 'minLength' | 'hidden' | 'pattern' | 'onKeyDown'>;
+interface TextFieldOwnProps extends FieldMessagingProps, TextFieldNative {
+    /** Leading icon - your own icon node (sized to the control). Decorative. */
+    leadingIcon?: ReactNode;
+    /** Show a clear button when there's a value. */
+    clearable?: boolean;
+    /** Control height: sm 28 - md 36 (default) - lg 40. */
+    size?: 'sm' | 'md' | 'lg';
+    /** Extra class(es) merged onto the field root. */
+    className?: string;
+    /** Inline styles merged onto the field root. */
+    style?: CSSProperties;
+    /** Available text like types */
+    type?: 'text' | 'search' | 'email' | 'url' | 'password';
+}
+interface TextFieldProps extends TextFieldOwnProps {
+    /** Standard <input> attributes (name, autoComplete, maxLength, aria-*, ...) forwarded to the input. */
+    htmlProps?: Omit<InputHTMLAttributes<HTMLInputElement>, keyof TextFieldOwnProps | 'size'> & DataAttributes;
+}
+declare function TextField({ label, helper, error, warning, success, leadingIcon, clearable, size, value, htmlProps, className, style, optional, ...rest }: TextFieldProps): react.JSX.Element;
+
+export { TextField, type TextFieldProps };