@zyncat/ui 0.11.0 → 0.12.0

package/dist/tabs.js

@@ -1,10 +1,13 @@
 'use client';import { useScrollEdges } from './chunk-BIDVNLJO.js';
-import { useGlide, GlidePill } from './chunk-WM5J5TDI.js';
-import { resolveMotionTiming } from './chunk-NEF5XAHG.js';
-import { animate } from './chunk-YGCVWGUG.js';
-import { IconSlot } from './chunk-2ERBBFZS.js';
-import { UIMotion } from './chunk-S5ZTZANS.js';
-import './chunk-VTJTGVZZ.js';
+import { activationProps } from './chunk-JY6A2ZJZ.js';
+import { useGlide, GlidePill } from './chunk-CNWTIMIP.js';
+import { resolveMotionTiming } from './chunk-TUTXXC3W.js';
+import { Motion } from './chunk-5PZ43DCG.js';
+import './chunk-M43IOM5C.js';
+import { set, animate } from './chunk-IJS7TPGV.js';
+import { IconSlot } from './chunk-3MPF7FZV.js';
+import { UIMotion } from './chunk-7IZJERGA.js';
+import './chunk-DMX2F6B4.js';
 import { cx } from './chunk-QGNC7LH5.js';
 import './tabs.css';
 import { useId, useRef, useLayoutEffect } from 'react';
@@ -13,7 +16,17 @@ 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 }) {
+function Tabs({
+  items = [],
+  value,
+  onChange,
+  name,
+  ariaLabel,
+  activateOn = "pointerdown",
+  className = "",
+  style,
+  htmlProps
+}) {
   const autoId = useId();
   const base = name || autoId;
   const listRef = useRef(null);
@@ -35,7 +48,7 @@ function Tabs({ items = [], value, onChange, name, ariaLabel, className = "", st
     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 } });
+      set(ink, { x: [next.x], width: [next.w] });
     } else {
       const lr = list.getBoundingClientRect();
       const ir = ink.getBoundingClientRect();
@@ -130,7 +143,7 @@ function Tabs({ items = [], value, onChange, name, ariaLabel, className = "", st
               ref: (el) => {
                 tabRefs.current[it.value] = el;
               },
-              onClick: () => select(it.value),
+              ...activationProps(() => select(it.value), { on: activateOn }),
               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 }),
@@ -152,18 +165,11 @@ var TABPANEL_TIMING = {
 };
 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",
+    Motion,
     {
+      layout: true,
+      layoutTransition: { size: "morph", timing: enter },
       role: "tabpanel",
       tabIndex: 0,
       id: name ? `${name}-panel-${tab}` : void 0,
@@ -171,7 +177,7 @@ function TabPanel({ tab, name, dir = 0, className = "", style, children, animati
       className: cx("tab-panel", className),
       style,
       ...htmlProps,
-      children: /* @__PURE__ */ jsx("div", { ref: innerRef, className: "tab-panel__inner", children })
+      children: /* @__PURE__ */ jsx(Motion, { className: "tab-panel__inner", animate: { x: [dir * TABS_ENTER_X, 0], timing: enter }, deps: [tab], children })
     }
   );
 }

package/dist/tabs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/composites/tabs/Tabs.tsx"],"names":[],"mappings":"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","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"]}
+{"version":3,"sources":["../src/components/composites/tabs/Tabs.tsx"],"names":[],"mappings":"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","file":"tabs.js","sourcesContent":["'use client';\n\nimport './tabs.css';\n\nimport {\n  useId,\n  useLayoutEffect,\n  useRef,\n  type CSSProperties,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n} from 'react';\n\nimport type { DataAttributes } from '../../../dom-props';\nimport { animate, set } from '../../../engine';\nimport { Motion } from '../../../motion/element';\nimport { GlidePill, useGlide } from '../../../motion/glide';\nimport { resolveMotionTiming } from '../../../motion/motion-timing';\nimport { type DisableableAnimation } from '../../../motion/timing';\nimport { UIMotion } from '../../../tokens/motion-tokens';\nimport { useScrollEdges } from '../../internal/hooks/use-scroll-edges';\nimport { IconSlot } from '../../internal/icon/IconSlot';\nimport { activationProps, type ActivateOn } from '../../internal/utils/activation';\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  /** Whether a tab switches on `pointerdown` (snappier) or waits for `click`. @default 'pointerdown' */\n  activateOn?: ActivateOn;\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({\n  items = [],\n  value,\n  onChange,\n  name,\n  ariaLabel,\n  activateOn = 'pointerdown',\n  className = '',\n  style,\n  htmlProps,\n}: 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      set(ink, { x: [next.x], width: [next.w] });\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              {...activationProps<HTMLButtonElement>(() => select(it.value), { on: activateOn })}\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\n  return (\n    <Motion\n      layout\n      layoutTransition={{ size: 'morph', timing: enter }}\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      <Motion className=\"tab-panel__inner\" animate={{ x: [dir * TABS_ENTER_X, 0], timing: enter }} deps={[tab]}>\n        {children}\n      </Motion>\n    </Motion>\n  );\n}\n"]}

package/dist/tag.css

@@ -1,248 +1,226 @@
-/* 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;
-}
+@layer zyncat.tokens, zyncat.components;
+
+@layer zyncat.components {
+  /* Tag / chip - interactive label (button-family chrome): base .tag + .tag--toggle sibling. */
+
+  .tag {
+    --tag-check-delay: 60ms;
+
+    --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);
+  }
 
-/* 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__label {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 
-.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--sm {
+    --tag-h: var(--space-5);
+    font-size: var(--size-micro);
+  }
 
-.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__icon {
+    display: inline-flex;
+    flex: none;
+  }
+  .tag__icon svg,
+  .tag__icon i {
+    display: block;
+  }
 
-.tag:has(.tag__remove:hover):not([data-disabled]),
-.tag:has(.tag__remove:focus-visible) {
-  color: var(--text-muted);
-  border-color: var(--border-strong);
-}
+  .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--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);
-}
+  .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);
+  }
 
-/* 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;
-}
+  .tag:has(.tag__remove:hover):not([data-disabled]),
+  .tag:has(.tag__remove:focus-visible) {
+    color: var(--text-muted);
+    border-color: var(--border-strong);
+  }
 
-/* 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--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);
+  }
 
-.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);
-}
+  /* 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;
+  }
 
-.tag-group {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--space-2);
-}
+  /* 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) var(--tag-check-delay);
+  }
 
-@media (prefers-reduced-motion: reduce) {
-  .tag__remove svg {
-    transition: none;
+  .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__remove:hover svg {
-    transform: none;
+  .tag[data-disabled] .tag__count,
+  .tag--toggle:disabled .tag__count {
+    color: var(--text-disabled);
   }
-  .tag__remove:active {
-    transform: none;
+  .tag[data-disabled] .tag__remove {
+    color: var(--text-disabled);
+    background: transparent;
+    cursor: default;
+    pointer-events: none;
   }
-  .tag--toggle:active:not(:disabled) {
+  .tag--toggle:disabled {
     transform: none;
   }
-  .tag__icon--dual > :is(i, svg) {
-    transition: 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;
+    }
   }
 }