@smwb/ui-react 2.0.0

package/dist/headless/components/navigation/stepper/stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.js","sources":["../../../../../src/components/navigation/stepper/stepper.tsx"],"sourcesContent":["import { forwardRef, Fragment, HTMLAttributes, KeyboardEvent, ReactNode } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\n\nexport interface StepItem {\n  label: ReactNode;\n  description?: ReactNode;\n  optional?: ReactNode;\n  /** Marks the step as errored. */\n  error?: boolean;\n  /** Disables interaction with the step. */\n  disabled?: boolean;\n  /** Custom icon overriding the default number/check. */\n  icon?: ReactNode;\n}\n\nexport interface StepperProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  steps: StepItem[];\n  /** Index of the active (current) step. */\n  activeStep: number;\n  orientation?: \"horizontal\" | \"vertical\";\n  /** Place the label under the icon (horizontal only). */\n  alternativeLabel?: boolean;\n  /** Makes steps clickable; receives the clicked step index. */\n  onStepClick?: (index: number) => void;\n}\n\nexport const Stepper = forwardRef<HTMLDivElement, StepperProps>(function Stepper(\n  { className, steps, activeStep, orientation = \"horizontal\", alternativeLabel = false, onStepClick, ...props },\n  ref\n) {\n  return (\n    <div\n      {...props}\n      ref={ref}\n      data-testid=\"stepper\"\n      className={cn(\n        \"smwb-stepper\",\n        `smwb-stepper_${orientation}`,\n        { \"smwb-stepper_alt-label\": alternativeLabel && orientation === \"horizontal\" },\n        className\n      )}\n    >\n      {steps.map((step, index) => {\n        const completed = index < activeStep;\n        const active = index === activeStep;\n        const isLast = index === steps.length - 1;\n        const clickable = Boolean(onStepClick) && !step.disabled;\n\n        const onStepKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n          if (clickable && (event.key === \"Enter\" || event.key === \" \")) {\n            event.preventDefault();\n            onStepClick?.(index);\n          }\n        };\n\n        return (\n          <Fragment key={index}>\n            <div\n              className={cn(\"smwb-stepper__step\", {\n                \"smwb-stepper__step_active\": active,\n                \"smwb-stepper__step_completed\": completed,\n                \"smwb-stepper__step_error\": step.error,\n                \"smwb-stepper__step_disabled\": step.disabled,\n                \"smwb-stepper__step_clickable\": clickable,\n              })}\n              aria-current={active ? \"step\" : undefined}\n              aria-disabled={step.disabled || undefined}\n              role={clickable ? \"button\" : undefined}\n              tabIndex={clickable ? 0 : undefined}\n              onClick={clickable ? () => onStepClick?.(index) : undefined}\n              onKeyDown={clickable ? onStepKeyDown : undefined}\n            >\n              <div className=\"smwb-stepper__icon\" aria-hidden=\"true\">\n                {step.icon ?? (completed ? <Icon name=\"check\" size={16} /> : <span>{index + 1}</span>)}\n              </div>\n              <div className=\"smwb-stepper__text\">\n                <span className=\"smwb-stepper__label\">{step.label}</span>\n                {step.optional ? <span className=\"smwb-stepper__optional\">{step.optional}</span> : null}\n                {step.description && orientation === \"vertical\" ? (\n                  <span className=\"smwb-stepper__description\">{step.description}</span>\n                ) : null}\n              </div>\n            </div>\n            {!isLast ? <div className=\"smwb-stepper__connector\" aria-hidden=\"true\" /> : null}\n          </Fragment>\n        );\n      })}\n    </div>\n  );\n});\n\nexport default Stepper;\n"],"names":["Stepper","forwardRef","className","steps","activeStep","orientation","alternativeLabel","onStepClick","props","ref","jsx","cn","step","index","completed","active","isLast","clickable","onStepKeyDown","event","Fragment","jsxs","_a","Icon"],"mappings":";;;;AA4BO,MAAMA,IAAUC,EAAyC,SAC9D,EAAE,WAAAC,GAAW,OAAAC,GAAO,YAAAC,GAAY,aAAAC,IAAc,cAAc,kBAAAC,IAAmB,IAAO,aAAAC,GAAa,GAAGC,EAAA,GACtGC,GACA;AACA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGF;AAAA,MACJ,KAAAC;AAAA,MACA,eAAY;AAAA,MACZ,WAAWE;AAAA,QACT;AAAA,QACA,gBAAgBN,CAAW;AAAA,QAC3B,EAAE,0BAA0BC,KAAoBD,MAAgB,aAAA;AAAA,QAChEH;AAAA,MAAA;AAAA,MAGD,UAAAC,EAAM,IAAI,CAACS,GAAMC,MAAU;;AAC1B,cAAMC,IAAYD,IAAQT,GACpBW,IAASF,MAAUT,GACnBY,IAASH,MAAUV,EAAM,SAAS,GAClCc,IAAY,EAAQV,KAAgB,CAACK,EAAK,UAE1CM,IAAgB,CAACC,MAAyC;AAC9D,UAAIF,MAAcE,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SACvDA,EAAM,eAAA,GACNZ,KAAA,QAAAA,EAAcM;AAAA,QAElB;AAEA,iCACGO,GAAA,EACC,UAAA;AAAA,UAAA,gBAAAC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWV,EAAG,sBAAsB;AAAA,gBAClC,6BAA6BI;AAAA,gBAC7B,gCAAgCD;AAAA,gBAChC,4BAA4BF,EAAK;AAAA,gBACjC,+BAA+BA,EAAK;AAAA,gBACpC,gCAAgCK;AAAA,cAAA,CACjC;AAAA,cACD,gBAAcF,IAAS,SAAS;AAAA,cAChC,iBAAeH,EAAK,YAAY;AAAA,cAChC,MAAMK,IAAY,WAAW;AAAA,cAC7B,UAAUA,IAAY,IAAI;AAAA,cAC1B,SAASA,IAAY,MAAMV,KAAA,gBAAAA,EAAcM,KAAS;AAAA,cAClD,WAAWI,IAAYC,IAAgB;AAAA,cAEvC,UAAA;AAAA,gBAAA,gBAAAR,EAAC,SAAI,WAAU,sBAAqB,eAAY,QAC7C,WAAAY,IAAAV,EAAK,SAAL,OAAAU,IAAcR,IAAY,gBAAAJ,EAACa,KAAK,MAAK,SAAQ,MAAM,GAAA,CAAI,sBAAM,QAAA,EAAM,UAAAV,IAAQ,GAAE,EAAA,CAChF;AAAA,gBACA,gBAAAQ,EAAC,OAAA,EAAI,WAAU,sBACb,UAAA;AAAA,kBAAA,gBAAAX,EAAC,QAAA,EAAK,WAAU,uBAAuB,UAAAE,EAAK,OAAM;AAAA,kBACjDA,EAAK,WAAW,gBAAAF,EAAC,QAAA,EAAK,WAAU,0BAA0B,UAAAE,EAAK,UAAS,IAAU;AAAA,kBAClFA,EAAK,eAAeP,MAAgB,aACnC,gBAAAK,EAAC,UAAK,WAAU,6BAA6B,UAAAE,EAAK,YAAA,CAAY,IAC5D;AAAA,gBAAA,EAAA,CACN;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAEAI,IAA0E,OAAjE,gBAAAN,EAAC,OAAA,EAAI,WAAU,2BAA0B,eAAY,QAAO;AAAA,QAAK,EAAA,GA3B/DG,CA4Bf;AAAA,MAEJ,CAAC;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/headless/components/navigation/tabs/tab/tab.js

@@ -0,0 +1,53 @@
+import { jsxs as d, jsx as c } from "react/jsx-runtime";
+import m from "react";
+import v from "clsx";
+import { Ripple as T } from "../../../base/ripple/ripple.js";
+const M = m.forwardRef(function(p, f) {
+  const {
+    className: w,
+    label: o,
+    isActive: s = !1,
+    contentRef: u,
+    icon: l,
+    stacked: R = !1,
+    tag: e,
+    disabled: a,
+    onMouseDown: t,
+    ..._
+  } = p, i = m.useRef(null), h = (n) => {
+    t == null || t(n);
+  }, x = (n) => {
+    var r;
+    (r = i.current) == null || r.onRipple(n);
+  }, b = e != null ? e : e || "button", N = v("smwb-tab", w, {
+    "smwb-tab--active": s,
+    "smwb-tab--stacked": R,
+    "smwb-tab--disabled": a
+  });
+  return /* @__PURE__ */ d(
+    b,
+    {
+      ref: f,
+      className: N,
+      onMouseDown: h,
+      onPointerDown: x,
+      role: "tab",
+      "aria-selected": s,
+      "aria-disabled": a || void 0,
+      tabIndex: s ? 0 : -1,
+      disabled: b === "button" ? a : void 0,
+      ..._,
+      children: [
+        /* @__PURE__ */ d("span", { className: "smwb-tab__content", ref: u, children: [
+          l && /* @__PURE__ */ c("span", { className: "smwb-tab__icon", children: l }),
+          o && /* @__PURE__ */ c("span", { className: "smwb-tab__text-label", children: o })
+        ] }),
+        /* @__PURE__ */ c(T, { actionRef: i, classes: { child: "tab__ripple-child" } })
+      ]
+    }
+  );
+});
+export {
+  M as Tab
+};
+//# sourceMappingURL=tab.js.map

package/dist/headless/components/navigation/tabs/tab/tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab.js","sources":["../../../../../../src/components/navigation/tabs/tab/tab.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"clsx\";\nimport { Ripple, RippleActionsRef } from \"../../../base/ripple/ripple\";\n\nexport interface TabProps extends React.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {\n  label?: string | React.ReactNode;\n  isActive?: boolean;\n  contentRef?: React.Ref<unknown>;\n  icon?: React.ReactNode;\n  stacked?: boolean;\n  tag?: React.ElementType;\n  disabled?: boolean;\n}\n\nexport const Tab = React.forwardRef<HTMLButtonElement | HTMLAnchorElement, TabProps>(function Tab(props, ref) {\n  const {\n    className,\n    label,\n    isActive = false,\n    contentRef,\n    icon,\n    stacked = false,\n    tag,\n    disabled,\n    onMouseDown: onMouseDownProp,\n    ...rest\n  } = props;\n  const rippleRef = React.useRef<RippleActionsRef>(null);\n\n  const onMouseDown = (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n    onMouseDownProp?.(event);\n  };\n\n  // Ripple on pointerdown so it fires for touch and pen, not just mouse.\n  const onPointerDown = (event: React.PointerEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n    rippleRef.current?.onRipple(event);\n  };\n\n  const Tag = tag ?? (tag || \"button\");\n  const classes = cn(\"smwb-tab\", className, {\n    \"smwb-tab--active\": isActive,\n    \"smwb-tab--stacked\": stacked,\n    \"smwb-tab--disabled\": disabled,\n  });\n\n  return (\n    <Tag\n      ref={ref}\n      className={classes}\n      onMouseDown={onMouseDown}\n      onPointerDown={onPointerDown}\n      role={\"tab\"}\n      aria-selected={isActive}\n      aria-disabled={disabled || undefined}\n      tabIndex={isActive ? 0 : -1}\n      disabled={Tag === \"button\" ? disabled : undefined}\n      {...rest}\n    >\n      <span className=\"smwb-tab__content\" ref={contentRef as React.Ref<HTMLSpanElement>}>\n        {icon && <span className=\"smwb-tab__icon\">{icon}</span>}\n        {label && <span className=\"smwb-tab__text-label\">{label}</span>}\n      </span>\n      <Ripple actionRef={rippleRef} classes={{ child: \"tab__ripple-child\" }} />\n    </Tag>\n  );\n});\n"],"names":["Tab","React","props","ref","className","label","isActive","contentRef","icon","stacked","tag","disabled","onMouseDownProp","rest","rippleRef","onMouseDown","event","onPointerDown","_a","Tag","classes","cn","jsxs","jsx","Ripple"],"mappings":";;;;AAcO,MAAMA,IAAMC,EAAM,WAA4D,SAAaC,GAAOC,GAAK;AAC5G,QAAM;AAAA,IACJ,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,YAAAC;AAAA,IACA,MAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,KAAAC;AAAA,IACA,UAAAC;AAAA,IACA,aAAaC;AAAA,IACb,GAAGC;AAAA,EAAA,IACDX,GACEY,IAAYb,EAAM,OAAyB,IAAI,GAE/Cc,IAAc,CAACC,MAAmE;AACtF,IAAAJ,KAAA,QAAAA,EAAkBI;AAAA,EACpB,GAGMC,IAAgB,CAACD,MAAqE;;AAC1F,KAAAE,IAAAJ,EAAU,YAAV,QAAAI,EAAmB,SAASF;AAAA,EAC9B,GAEMG,IAAMT,KAAA,OAAAA,IAAQA,KAAO,UACrBU,IAAUC,EAAG,YAAYjB,GAAW;AAAA,IACxC,oBAAoBE;AAAA,IACpB,qBAAqBG;AAAA,IACrB,sBAAsBE;AAAA,EAAA,CACvB;AAED,SACE,gBAAAW;AAAA,IAACH;AAAA,IAAA;AAAA,MACC,KAAAhB;AAAA,MACA,WAAWiB;AAAA,MACX,aAAAL;AAAA,MACA,eAAAE;AAAA,MACA,MAAM;AAAA,MACN,iBAAeX;AAAA,MACf,iBAAeK,KAAY;AAAA,MAC3B,UAAUL,IAAW,IAAI;AAAA,MACzB,UAAUa,MAAQ,WAAWR,IAAW;AAAA,MACvC,GAAGE;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAS,EAAC,QAAA,EAAK,WAAU,qBAAoB,KAAKf,GACtC,UAAA;AAAA,UAAAC,KAAQ,gBAAAe,EAAC,QAAA,EAAK,WAAU,kBAAkB,UAAAf,GAAK;AAAA,UAC/CH,KAAS,gBAAAkB,EAAC,QAAA,EAAK,WAAU,wBAAwB,UAAAlB,EAAA,CAAM;AAAA,QAAA,GAC1D;AAAA,QACA,gBAAAkB,EAACC,KAAO,WAAWV,GAAW,SAAS,EAAE,OAAO,sBAAoB,CAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG7E,CAAC;"}

package/dist/headless/components/navigation/tabs/tabs.js

@@ -0,0 +1,136 @@
+import { jsx as u, jsxs as B } from "react/jsx-runtime";
+import s from "react";
+import v from "clsx";
+import { debounce as D } from "../../../utils/debounce.js";
+import { useEventCallback as S } from "../../../hooks/useEventCallback.js";
+import { setRef as O } from "../../../utils/setRef.js";
+import { animate as j } from "../../../utils/animate.js";
+const L = {
+  root: {},
+  content: {}
+}, K = s.forwardRef(function(M, N) {
+  const {
+    className: C,
+    children: _,
+    onChange: E,
+    value: f,
+    indicatorContent: d = !1,
+    scrollable: y = !1,
+    "aria-label": z,
+    ...T
+  } = M, [x, I] = s.useState(!1), [c, h] = s.useState(L), l = s.useRef(null), a = s.useRef(null), b = s.useRef([]), w = 40, p = () => {
+    const t = l.current;
+    let e;
+    if (t) {
+      const n = t.getBoundingClientRect();
+      e = {
+        clientWidth: t.clientWidth,
+        scrollLeft: t.scrollLeft,
+        scrollTop: t.scrollTop,
+        scrollWidth: t.scrollWidth,
+        top: n.top,
+        bottom: n.bottom,
+        left: n.left,
+        right: n.right
+      };
+    }
+    let r = null, o = null;
+    if (a.current || console.error("tabListRef.current is undefined"), t && a.current) {
+      const n = a.current.children;
+      if (n.length > 0) {
+        const i = n[f];
+        r = i ? i.getBoundingClientRect() : null, d && (o = b.current[f] ? b.current[f].getBoundingClientRect() : null);
+      }
+    }
+    return { tabsMeta: e, tabMeta: r, tabContentMeta: o };
+  }, m = S(() => {
+    const { tabsMeta: t, tabMeta: e, tabContentMeta: r } = p();
+    let o = 0;
+    e && t && (o = 1 * (e.left - t.left + t.scrollLeft));
+    const n = {
+      root: {
+        left: o,
+        width: e ? e.width : 0
+      }
+    };
+    if (d && r && (n.content = {
+      width: r.width
+    }), isNaN(c.root.left) || isNaN(c.root.width))
+      h(n);
+    else {
+      const i = Math.abs(c.root.left - n.root.left), W = Math.abs(c.root.width - n.root.width);
+      (i >= 1 || W >= 1) && h(n);
+    }
+  }), R = (t, { animation: e = !0 } = {}) => {
+    l.current && (e ? j(l.current, "scrollLeft", t, {
+      duration: 300
+    }) : l.current.scrollLeft = t);
+  }, g = S((t) => {
+    const { tabsMeta: e, tabMeta: r } = p();
+    if (!(!r || !e)) {
+      if (r.left < e.left) {
+        const o = e.scrollLeft + (r.left - e.left);
+        R(o - w, { animation: t });
+      } else if (r.right > e.right) {
+        const o = e.scrollLeft + (r.right - e.right);
+        R(o + w, { animation: t });
+      }
+    }
+  });
+  s.useEffect(() => {
+    I(!0);
+  }, []), s.useEffect(() => {
+    m();
+  }), s.useEffect(() => {
+    var o, n;
+    const t = D(() => {
+      l.current && m();
+    }, 166);
+    if (!l.current || !l.current.ownerDocument.defaultView) {
+      console.error("tabsRef.current.ownerDocument.defaultView is undefined");
+      return;
+    }
+    const e = l.current.ownerDocument.defaultView;
+    e.addEventListener("resize", t);
+    let r;
+    return typeof ResizeObserver != "undefined" && (r = new ResizeObserver(t), Array.from((n = (o = a.current) == null ? void 0 : o.children) != null ? n : []).forEach((i) => {
+      r.observe(i);
+    })), () => {
+      t.cancel(), e.removeEventListener("resize", t), r && r.disconnect();
+    };
+  }, [m]), s.useEffect(() => {
+    g(L !== c);
+  }, [g, c]);
+  const V = s.Children.map(
+    _,
+    (t, e) => s.cloneElement(t, {
+      isActive: f === e,
+      onClick: (r) => {
+        E(r, e);
+      },
+      ...d && {
+        contentRef: (r) => {
+          const { contentRef: o } = t.props;
+          b.current.push(r), o && O(o, r);
+        }
+      }
+    })
+  );
+  return /* @__PURE__ */ u("div", { className: v("smwb-tabs", C), role: "tabpanel", ref: N, ...T, children: /* @__PURE__ */ B(
+    "div",
+    {
+      className: v("smwb-tabs__scroller", {
+        "smwb-tabs__scroller--scrollable": y
+      }),
+      ref: l,
+      children: [
+        /* @__PURE__ */ u("div", { className: "smwb-tabs__scroll-area", ref: a, role: "tablist", "aria-label": z, children: V }),
+        x && /* @__PURE__ */ u("span", { className: "smwb-tabs__indicator", style: c.root, children: /* @__PURE__ */ u("span", { className: "smwb-tabs__indicator-content", style: c.content }) })
+      ]
+    }
+  ) });
+});
+export {
+  K as Tabs
+};
+//# sourceMappingURL=tabs.js.map

package/dist/headless/components/navigation/tabs/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","sources":["../../../../../src/components/navigation/tabs/tabs.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"clsx\";\nimport { debounce } from \"../../../utils/debounce\";\nimport { Tab, TabProps } from \"./tab/tab\";\nimport { useEventCallback } from \"../../../hooks/useEventCallback\";\nimport { setRef } from \"../../../utils/setRef\";\nimport { animate } from \"../../../utils/animate\";\n\nexport interface TabsProps {\n  value: number;\n  onChange: (e: React.MouseEvent<HTMLButtonElement>, index: number) => void;\n  indicatorContent?: boolean;\n  scrollable?: boolean;\n  className?: string;\n  children?: React.ReactNode;\n  /** Accessible label for the tab list. */\n  \"aria-label\"?: string;\n}\n\ninterface IndicatorStyle {\n  root: {\n    left: number;\n    width: number;\n  };\n  content?: {\n    width: number;\n  };\n}\n\nconst defaultIndicatorStyle = {\n  root: {},\n  content: {},\n} as IndicatorStyle;\n\nexport const Tabs = React.forwardRef<HTMLDivElement, TabsProps>(function Tabs(props, ref) {\n  const {\n    className,\n    children,\n    onChange,\n    value,\n    indicatorContent = false,\n    scrollable = false,\n    \"aria-label\": ariaLabel,\n    ...rest\n  } = props;\n  const [mounted, setMounted] = React.useState(false);\n  const [indicatorStyle, setIndicatorStyle] = React.useState<IndicatorStyle>(defaultIndicatorStyle);\n\n  const tabsRef = React.useRef<HTMLDivElement>(null);\n  const tabListRef = React.useRef<HTMLDivElement>(null);\n  const contentTabsRef = React.useRef<HTMLSpanElement[]>([]);\n\n  // Видимость следующего таба в пикселях\n  const viewNextTabInPixels = 40;\n\n  const getTabsMeta = () => {\n    const tabsNode = tabsRef.current;\n\n    let tabsMeta;\n\n    if (tabsNode) {\n      const rect = tabsNode.getBoundingClientRect();\n\n      tabsMeta = {\n        clientWidth: tabsNode.clientWidth,\n        scrollLeft: tabsNode.scrollLeft,\n        scrollTop: tabsNode.scrollTop,\n        scrollWidth: tabsNode.scrollWidth,\n        top: rect.top,\n        bottom: rect.bottom,\n        left: rect.left,\n        right: rect.right,\n      };\n    }\n\n    let tabMeta: DOMRect | null = null;\n    let tabContentMeta: DOMRect | null = null;\n\n    if (!tabListRef.current) {\n      console.error(\"tabListRef.current is undefined\");\n    }\n    if (tabsNode && tabListRef.current) {\n      const children = tabListRef.current.children;\n\n      if (children.length > 0) {\n        const tab = children[value];\n\n        tabMeta = tab ? tab.getBoundingClientRect() : null;\n\n        if (indicatorContent) {\n          tabContentMeta = contentTabsRef.current[value] ? contentTabsRef.current[value].getBoundingClientRect() : null;\n        }\n      }\n    }\n    return { tabsMeta, tabMeta, tabContentMeta };\n  };\n\n  const updateIndicatorState = useEventCallback(() => {\n    const { tabsMeta, tabMeta, tabContentMeta } = getTabsMeta();\n    let startValue = 0;\n\n    if (tabMeta && tabsMeta) {\n      startValue = 1 * (tabMeta.left - tabsMeta.left + tabsMeta.scrollLeft);\n    }\n\n    const newIndicatorStyle: IndicatorStyle = {\n      root: {\n        left: startValue,\n        width: tabMeta ? tabMeta.width : 0,\n      },\n    };\n\n    if (indicatorContent && tabContentMeta) {\n      newIndicatorStyle.content = {\n        width: tabContentMeta.width,\n      };\n    }\n\n    if (isNaN(indicatorStyle.root.left) || isNaN(indicatorStyle.root.width)) {\n      setIndicatorStyle(newIndicatorStyle);\n    } else {\n      const dStart = Math.abs(indicatorStyle.root.left - newIndicatorStyle.root.left);\n      const dSize = Math.abs(indicatorStyle.root.width - newIndicatorStyle.root.width);\n\n      if (dStart >= 1 || dSize >= 1) {\n        setIndicatorStyle(newIndicatorStyle);\n      }\n    }\n  });\n\n  const scroll = (scrollValue: number, { animation = true } = {}) => {\n    if (!tabsRef.current) {\n      return;\n    }\n    if (animation) {\n      animate(tabsRef.current, \"scrollLeft\", scrollValue, {\n        duration: 300,\n      });\n    } else {\n      tabsRef.current.scrollLeft = scrollValue;\n    }\n  };\n\n  const scrollSelectedIntoView = useEventCallback((animation: boolean) => {\n    const { tabsMeta, tabMeta } = getTabsMeta();\n\n    if (!tabMeta || !tabsMeta) {\n      return;\n    }\n\n    if (tabMeta.left < tabsMeta.left) {\n      // Левая сторона таба не видна.\n      const nextScrollStart = tabsMeta.scrollLeft + (tabMeta.left - tabsMeta.left);\n      scroll(nextScrollStart - viewNextTabInPixels, { animation });\n    } else if (tabMeta.right > tabsMeta.right) {\n      // Правая сторона таба не видна.\n      const nextScrollStart = tabsMeta.scrollLeft + (tabMeta.right - tabsMeta.right);\n      scroll(nextScrollStart + viewNextTabInPixels, { animation });\n    }\n  });\n\n  React.useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  React.useEffect(() => {\n    updateIndicatorState();\n  });\n\n  React.useEffect(() => {\n    const onResize = debounce(() => {\n      if (tabsRef.current) {\n        updateIndicatorState();\n      }\n    }, 166);\n    if (!tabsRef.current || !tabsRef.current.ownerDocument.defaultView) {\n      console.error(`tabsRef.current.ownerDocument.defaultView is undefined`);\n      return;\n    }\n    const window: Window & typeof globalThis = tabsRef.current.ownerDocument.defaultView;\n\n    window.addEventListener(\"resize\", onResize);\n\n    let resizeObserver: ResizeObserver;\n\n    if (typeof ResizeObserver !== \"undefined\") {\n      resizeObserver = new ResizeObserver(onResize);\n\n      Array.from(tabListRef.current?.children ?? []).forEach((child) => {\n        resizeObserver.observe(child);\n      });\n    }\n\n    return () => {\n      onResize.cancel();\n\n      window.removeEventListener(\"resize\", onResize);\n\n      if (resizeObserver) {\n        resizeObserver.disconnect();\n      }\n    };\n  }, [updateIndicatorState]);\n\n  React.useEffect(() => {\n    // Не анимировать при первом рендере\n    scrollSelectedIntoView(defaultIndicatorStyle !== indicatorStyle);\n  }, [scrollSelectedIntoView, indicatorStyle]);\n\n  const tabs = React.Children.map(\n    children as React.ReactElement<TabProps>[],\n    (child: React.ReactElement<TabProps>, index) =>\n      React.cloneElement(child, {\n        isActive: value === index,\n        onClick: (event: React.MouseEvent<HTMLButtonElement>) => {\n          onChange(event, index);\n        },\n        ...(indicatorContent && {\n          contentRef: (ref: HTMLSpanElement) => {\n            const { contentRef } = child.props;\n\n            contentTabsRef.current.push(ref);\n\n            if (contentRef) {\n              setRef(contentRef as React.Ref<unknown>, ref);\n            }\n          },\n        }),\n      } as TabProps)\n  );\n\n  return (\n    <div className={cn(\"smwb-tabs\", className)} role={\"tabpanel\"} ref={ref} {...rest}>\n      <div\n        className={cn(\"smwb-tabs__scroller\", {\n          \"smwb-tabs__scroller--scrollable\": scrollable,\n        })}\n        ref={tabsRef}\n      >\n        <div className=\"smwb-tabs__scroll-area\" ref={tabListRef} role=\"tablist\" aria-label={ariaLabel}>\n          {tabs}\n        </div>\n        {mounted && (\n          <span className=\"smwb-tabs__indicator\" style={indicatorStyle.root}>\n            <span className=\"smwb-tabs__indicator-content\" style={indicatorStyle.content} />\n          </span>\n        )}\n      </div>\n    </div>\n  );\n});\n\nexport { Tab };\nexport type { TabProps };\n"],"names":["defaultIndicatorStyle","Tabs","React","props","ref","className","children","onChange","value","indicatorContent","scrollable","ariaLabel","rest","mounted","setMounted","indicatorStyle","setIndicatorStyle","tabsRef","tabListRef","contentTabsRef","viewNextTabInPixels","getTabsMeta","tabsNode","tabsMeta","rect","tabMeta","tabContentMeta","tab","updateIndicatorState","useEventCallback","startValue","newIndicatorStyle","dStart","dSize","scroll","scrollValue","animation","animate","scrollSelectedIntoView","nextScrollStart","onResize","debounce","window","resizeObserver","_b","_a","child","tabs","index","event","contentRef","setRef","jsx","cn","jsxs"],"mappings":";;;;;;;AA6BA,MAAMA,IAAwB;AAAA,EAC5B,MAAM,CAAA;AAAA,EACN,SAAS,CAAA;AACX,GAEaC,IAAOC,EAAM,WAAsC,SAAcC,GAAOC,GAAK;AACxF,QAAM;AAAA,IACJ,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,kBAAAC,IAAmB;AAAA,IACnB,YAAAC,IAAa;AAAA,IACb,cAAcC;AAAA,IACd,GAAGC;AAAA,EAAA,IACDT,GACE,CAACU,GAASC,CAAU,IAAIZ,EAAM,SAAS,EAAK,GAC5C,CAACa,GAAgBC,CAAiB,IAAId,EAAM,SAAyBF,CAAqB,GAE1FiB,IAAUf,EAAM,OAAuB,IAAI,GAC3CgB,IAAahB,EAAM,OAAuB,IAAI,GAC9CiB,IAAiBjB,EAAM,OAA0B,EAAE,GAGnDkB,IAAsB,IAEtBC,IAAc,MAAM;AACxB,UAAMC,IAAWL,EAAQ;AAEzB,QAAIM;AAEJ,QAAID,GAAU;AACZ,YAAME,IAAOF,EAAS,sBAAA;AAEtB,MAAAC,IAAW;AAAA,QACT,aAAaD,EAAS;AAAA,QACtB,YAAYA,EAAS;AAAA,QACrB,WAAWA,EAAS;AAAA,QACpB,aAAaA,EAAS;AAAA,QACtB,KAAKE,EAAK;AAAA,QACV,QAAQA,EAAK;AAAA,QACb,MAAMA,EAAK;AAAA,QACX,OAAOA,EAAK;AAAA,MAAA;AAAA,IAEhB;AAEA,QAAIC,IAA0B,MAC1BC,IAAiC;AAKrC,QAHKR,EAAW,WACd,QAAQ,MAAM,iCAAiC,GAE7CI,KAAYJ,EAAW,SAAS;AAClC,YAAMZ,IAAWY,EAAW,QAAQ;AAEpC,UAAIZ,EAAS,SAAS,GAAG;AACvB,cAAMqB,IAAMrB,EAASE,CAAK;AAE1B,QAAAiB,IAAUE,IAAMA,EAAI,sBAAA,IAA0B,MAE1ClB,MACFiB,IAAiBP,EAAe,QAAQX,CAAK,IAAIW,EAAe,QAAQX,CAAK,EAAE,sBAAA,IAA0B;AAAA,MAE7G;AAAA,IACF;AACA,WAAO,EAAE,UAAAe,GAAU,SAAAE,GAAS,gBAAAC,EAAA;AAAA,EAC9B,GAEME,IAAuBC,EAAiB,MAAM;AAClD,UAAM,EAAE,UAAAN,GAAU,SAAAE,GAAS,gBAAAC,EAAA,IAAmBL,EAAA;AAC9C,QAAIS,IAAa;AAEjB,IAAIL,KAAWF,MACbO,IAAa,KAAKL,EAAQ,OAAOF,EAAS,OAAOA,EAAS;AAG5D,UAAMQ,IAAoC;AAAA,MACxC,MAAM;AAAA,QACJ,MAAMD;AAAA,QACN,OAAOL,IAAUA,EAAQ,QAAQ;AAAA,MAAA;AAAA,IACnC;AASF,QANIhB,KAAoBiB,MACtBK,EAAkB,UAAU;AAAA,MAC1B,OAAOL,EAAe;AAAA,IAAA,IAItB,MAAMX,EAAe,KAAK,IAAI,KAAK,MAAMA,EAAe,KAAK,KAAK;AACpE,MAAAC,EAAkBe,CAAiB;AAAA,SAC9B;AACL,YAAMC,IAAS,KAAK,IAAIjB,EAAe,KAAK,OAAOgB,EAAkB,KAAK,IAAI,GACxEE,IAAQ,KAAK,IAAIlB,EAAe,KAAK,QAAQgB,EAAkB,KAAK,KAAK;AAE/E,OAAIC,KAAU,KAAKC,KAAS,MAC1BjB,EAAkBe,CAAiB;AAAA,IAEvC;AAAA,EACF,CAAC,GAEKG,IAAS,CAACC,GAAqB,EAAE,WAAAC,IAAY,GAAA,IAAS,OAAO;AACjE,IAAKnB,EAAQ,YAGTmB,IACFC,EAAQpB,EAAQ,SAAS,cAAckB,GAAa;AAAA,MAClD,UAAU;AAAA,IAAA,CACX,IAEDlB,EAAQ,QAAQ,aAAakB;AAAA,EAEjC,GAEMG,IAAyBT,EAAiB,CAACO,MAAuB;AACtE,UAAM,EAAE,UAAAb,GAAU,SAAAE,EAAA,IAAYJ,EAAA;AAE9B,QAAI,GAACI,KAAW,CAACF;AAIjB,UAAIE,EAAQ,OAAOF,EAAS,MAAM;AAEhC,cAAMgB,IAAkBhB,EAAS,cAAcE,EAAQ,OAAOF,EAAS;AACvE,QAAAW,EAAOK,IAAkBnB,GAAqB,EAAE,WAAAgB,EAAA,CAAW;AAAA,MAC7D,WAAWX,EAAQ,QAAQF,EAAS,OAAO;AAEzC,cAAMgB,IAAkBhB,EAAS,cAAcE,EAAQ,QAAQF,EAAS;AACxE,QAAAW,EAAOK,IAAkBnB,GAAqB,EAAE,WAAAgB,EAAA,CAAW;AAAA,MAC7D;AAAA;AAAA,EACF,CAAC;AAED,EAAAlC,EAAM,UAAU,MAAM;AACpB,IAAAY,EAAW,EAAI;AAAA,EACjB,GAAG,CAAA,CAAE,GAELZ,EAAM,UAAU,MAAM;AACpB,IAAA0B,EAAA;AAAA,EACF,CAAC,GAED1B,EAAM,UAAU,MAAM;;AACpB,UAAMsC,IAAWC,EAAS,MAAM;AAC9B,MAAIxB,EAAQ,WACVW,EAAA;AAAA,IAEJ,GAAG,GAAG;AACN,QAAI,CAACX,EAAQ,WAAW,CAACA,EAAQ,QAAQ,cAAc,aAAa;AAClE,cAAQ,MAAM,wDAAwD;AACtE;AAAA,IACF;AACA,UAAMyB,IAAqCzB,EAAQ,QAAQ,cAAc;AAEzE,IAAAyB,EAAO,iBAAiB,UAAUF,CAAQ;AAE1C,QAAIG;AAEJ,WAAI,OAAO,kBAAmB,gBAC5BA,IAAiB,IAAI,eAAeH,CAAQ,GAE5C,MAAM,MAAKI,KAAAC,IAAA3B,EAAW,YAAX,gBAAA2B,EAAoB,aAApB,OAAAD,IAAgC,EAAE,EAAE,QAAQ,CAACE,MAAU;AAChE,MAAAH,EAAe,QAAQG,CAAK;AAAA,IAC9B,CAAC,IAGI,MAAM;AACX,MAAAN,EAAS,OAAA,GAETE,EAAO,oBAAoB,UAAUF,CAAQ,GAEzCG,KACFA,EAAe,WAAA;AAAA,IAEnB;AAAA,EACF,GAAG,CAACf,CAAoB,CAAC,GAEzB1B,EAAM,UAAU,MAAM;AAEpB,IAAAoC,EAAuBtC,MAA0Be,CAAc;AAAA,EACjE,GAAG,CAACuB,GAAwBvB,CAAc,CAAC;AAE3C,QAAMgC,IAAO7C,EAAM,SAAS;AAAA,IAC1BI;AAAA,IACA,CAACwC,GAAqCE,MACpC9C,EAAM,aAAa4C,GAAO;AAAA,MACxB,UAAUtC,MAAUwC;AAAA,MACpB,SAAS,CAACC,MAA+C;AACvD,QAAA1C,EAAS0C,GAAOD,CAAK;AAAA,MACvB;AAAA,MACA,GAAIvC,KAAoB;AAAA,QACtB,YAAY,CAACL,MAAyB;AACpC,gBAAM,EAAE,YAAA8C,MAAeJ,EAAM;AAE7B,UAAA3B,EAAe,QAAQ,KAAKf,CAAG,GAE3B8C,KACFC,EAAOD,GAAkC9C,CAAG;AAAA,QAEhD;AAAA,MAAA;AAAA,IACF,CACW;AAAA,EAAA;AAGjB,SACE,gBAAAgD,EAAC,OAAA,EAAI,WAAWC,EAAG,aAAahD,CAAS,GAAG,MAAM,YAAY,KAAAD,GAAW,GAAGQ,GAC1E,UAAA,gBAAA0C;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWD,EAAG,uBAAuB;AAAA,QACnC,mCAAmC3C;AAAA,MAAA,CACpC;AAAA,MACD,KAAKO;AAAA,MAEL,UAAA;AAAA,QAAA,gBAAAmC,EAAC,OAAA,EAAI,WAAU,0BAAyB,KAAKlC,GAAY,MAAK,WAAU,cAAYP,GACjF,UAAAoC,EAAA,CACH;AAAA,QACClC,KACC,gBAAAuC,EAAC,QAAA,EAAK,WAAU,wBAAuB,OAAOrC,EAAe,MAC3D,UAAA,gBAAAqC,EAAC,UAAK,WAAU,gCAA+B,OAAOrC,EAAe,SAAS,EAAA,CAChF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAGN;AAEJ,CAAC;"}

package/dist/headless/hooks/useControllableState.js

@@ -0,0 +1,24 @@
+import { useState as m, useRef as i, useCallback as v } from "react";
+function k({
+  value: o,
+  defaultValue: f,
+  onChange: c
+}) {
+  const r = o !== void 0, [a, p] = m(f), e = r ? o : a, s = i(e);
+  s.current = e;
+  const t = i(c);
+  t.current = c;
+  const d = v(
+    (n) => {
+      var l;
+      const b = s.current, u = typeof n == "function" ? n(b) : n;
+      r || p(u), (l = t.current) == null || l.call(t, u);
+    },
+    [r]
+  );
+  return [e, d];
+}
+export {
+  k as useControllableState
+};
+//# sourceMappingURL=useControllableState.js.map

package/dist/headless/hooks/useControllableState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useControllableState.js","sources":["../../../src/hooks/useControllableState.ts"],"sourcesContent":["import { useCallback, useRef, useState } from \"react\";\n\ntype Updater<T> = T | ((prev: T) => T);\n\nexport interface UseControllableStateParams<T> {\n  /** Controlled value. When defined the hook is in controlled mode. */\n  value?: T;\n  /** Initial value for uncontrolled mode. */\n  defaultValue: T;\n  /** Called whenever the value should change (both modes). */\n  onChange?: (next: T) => void;\n}\n\n/**\n * Controlled/uncontrolled state helper.\n *\n * - If `value` is provided the hook is controlled: it always returns `value`\n *   and `setValue` only calls `onChange`.\n * - Otherwise it keeps internal state seeded from `defaultValue` and also\n *   calls `onChange`.\n *\n * @returns `[value, setValue]`\n */\nexport function useControllableState<T>({\n  value,\n  defaultValue,\n  onChange,\n}: UseControllableStateParams<T>): [T, (next: Updater<T>) => void] {\n  const isControlled = value !== undefined;\n  const [internal, setInternal] = useState<T>(defaultValue);\n\n  const current = isControlled ? (value as T) : internal;\n\n  // keep latest value / onChange without resubscribing consumers\n  const currentRef = useRef(current);\n  currentRef.current = current;\n  const onChangeRef = useRef(onChange);\n  onChangeRef.current = onChange;\n\n  const setValue = useCallback(\n    (next: Updater<T>) => {\n      const prev = currentRef.current;\n      const resolved = typeof next === \"function\" ? (next as (p: T) => T)(prev) : next;\n\n      if (!isControlled) {\n        setInternal(resolved);\n      }\n      onChangeRef.current?.(resolved);\n    },\n    [isControlled]\n  );\n\n  return [current, setValue];\n}\n\nexport default useControllableState;\n"],"names":["useControllableState","value","defaultValue","onChange","isControlled","internal","setInternal","useState","current","currentRef","useRef","onChangeRef","setValue","useCallback","next","prev","resolved","_a"],"mappings":";AAuBO,SAASA,EAAwB;AAAA,EACtC,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AACF,GAAmE;AACjE,QAAMC,IAAeH,MAAU,QACzB,CAACI,GAAUC,CAAW,IAAIC,EAAYL,CAAY,GAElDM,IAAUJ,IAAgBH,IAAcI,GAGxCI,IAAaC,EAAOF,CAAO;AACjC,EAAAC,EAAW,UAAUD;AACrB,QAAMG,IAAcD,EAAOP,CAAQ;AACnC,EAAAQ,EAAY,UAAUR;AAEtB,QAAMS,IAAWC;AAAA,IACf,CAACC,MAAqB;;AACpB,YAAMC,IAAON,EAAW,SAClBO,IAAW,OAAOF,KAAS,aAAcA,EAAqBC,CAAI,IAAID;AAE5E,MAAKV,KACHE,EAAYU,CAAQ,IAEtBC,IAAAN,EAAY,YAAZ,QAAAM,EAAA,KAAAN,GAAsBK;AAAA,IACxB;AAAA,IACA,CAACZ,CAAY;AAAA,EAAA;AAGf,SAAO,CAACI,GAASI,CAAQ;AAC3B;"}

package/dist/headless/hooks/useEventCallback.js

@@ -0,0 +1,11 @@
+import e from "react";
+function a(t) {
+  const r = e.useRef(t);
+  return e.useLayoutEffect(() => {
+    r.current = t;
+  }), e.useCallback((...u) => (0, r.current)(...u), []);
+}
+export {
+  a as useEventCallback
+};
+//# sourceMappingURL=useEventCallback.js.map

package/dist/headless/hooks/useEventCallback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEventCallback.js","sources":["../../../src/hooks/useEventCallback.ts"],"sourcesContent":["import React from \"react\";\n\n/**\n * https://github.com/facebook/react/issues/14099#issuecomment-440013892\n */\nexport function useEventCallback<Args extends unknown[], Return>(\n  fn: (...args: Args) => Return\n): (...args: Args) => Return {\n  const ref = React.useRef(fn);\n\n  React.useLayoutEffect(() => {\n    ref.current = fn;\n  });\n\n  return React.useCallback((...args: Args) => (0, ref.current)(...args), []);\n}\n"],"names":["useEventCallback","fn","ref","React","args"],"mappings":";AAKO,SAASA,EACdC,GAC2B;AAC3B,QAAMC,IAAMC,EAAM,OAAOF,CAAE;AAE3B,SAAAE,EAAM,gBAAgB,MAAM;AAC1B,IAAAD,EAAI,UAAUD;AAAA,EAChB,CAAC,GAEME,EAAM,YAAY,IAAIC,UAAmBF,EAAI,SAAS,GAAGE,CAAI,GAAG,EAAE;AAC3E;"}

package/dist/headless/hooks/useFocusTrap.js

@@ -0,0 +1,38 @@
+import { useRef as m, useEffect as p } from "react";
+const b = 'a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex="-1"])';
+function E(c, { active: s, restoreFocus: f = !0, autoFocus: l = !0 }) {
+  const r = m(null);
+  p(() => {
+    if (!s)
+      return;
+    const t = c.current;
+    if (!t)
+      return;
+    r.current = document.activeElement;
+    const i = () => Array.from(t.querySelectorAll(b)).filter(
+      (e) => e.offsetParent !== null || e === document.activeElement
+    );
+    if (l) {
+      const e = i()[0];
+      (e != null ? e : t).focus({ preventScroll: !0 });
+    }
+    const a = (e) => {
+      if (e.key !== "Tab")
+        return;
+      const n = i();
+      if (n.length === 0) {
+        e.preventDefault();
+        return;
+      }
+      const o = n[0], d = n[n.length - 1], u = document.activeElement;
+      e.shiftKey && u === o ? (e.preventDefault(), d.focus()) : !e.shiftKey && u === d ? (e.preventDefault(), o.focus()) : t.contains(u) || (e.preventDefault(), o.focus());
+    };
+    return document.addEventListener("keydown", a, !0), () => {
+      document.removeEventListener("keydown", a, !0), f && r.current && r.current.focus({ preventScroll: !0 });
+    };
+  }, [s, l, f, c]);
+}
+export {
+  E as useFocusTrap
+};
+//# sourceMappingURL=useFocusTrap.js.map

package/dist/headless/hooks/useFocusTrap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFocusTrap.js","sources":["../../../src/hooks/useFocusTrap.ts"],"sourcesContent":["import { RefObject, useEffect, useRef } from \"react\";\n\nconst FOCUSABLE =\n  'a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex=\"-1\"])';\n\nexport interface UseFocusTrapOptions {\n  /** Trap is active only while true. */\n  active: boolean;\n  /** Restore focus to the previously focused element on deactivate. */\n  restoreFocus?: boolean;\n  /** Focus the first focusable element on activate. */\n  autoFocus?: boolean;\n}\n\n/**\n * Confines Tab/Shift+Tab focus within `containerRef` while `active`.\n * Restores focus to the previously focused element on teardown.\n */\nexport function useFocusTrap<T extends HTMLElement>(\n  containerRef: RefObject<T>,\n  { active, restoreFocus = true, autoFocus = true }: UseFocusTrapOptions\n): void {\n  const prevFocused = useRef<HTMLElement | null>(null);\n\n  useEffect(() => {\n    if (!active) {\n      return;\n    }\n    const container = containerRef.current;\n    if (!container) {\n      return;\n    }\n\n    prevFocused.current = document.activeElement as HTMLElement | null;\n\n    const focusables = () =>\n      Array.from(container.querySelectorAll<HTMLElement>(FOCUSABLE)).filter(\n        (el) => el.offsetParent !== null || el === document.activeElement\n      );\n\n    if (autoFocus) {\n      const first = focusables()[0];\n      (first ?? container).focus({ preventScroll: true });\n    }\n\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key !== \"Tab\") {\n        return;\n      }\n      const items = focusables();\n      if (items.length === 0) {\n        event.preventDefault();\n        return;\n      }\n      const first = items[0];\n      const last = items[items.length - 1];\n      const activeEl = document.activeElement;\n\n      if (event.shiftKey && activeEl === first) {\n        event.preventDefault();\n        last.focus();\n      } else if (!event.shiftKey && activeEl === last) {\n        event.preventDefault();\n        first.focus();\n      } else if (!container.contains(activeEl)) {\n        event.preventDefault();\n        first.focus();\n      }\n    };\n\n    document.addEventListener(\"keydown\", onKeyDown, true);\n    return () => {\n      document.removeEventListener(\"keydown\", onKeyDown, true);\n      if (restoreFocus && prevFocused.current) {\n        prevFocused.current.focus({ preventScroll: true });\n      }\n    };\n  }, [active, autoFocus, restoreFocus, containerRef]);\n}\n\nexport default useFocusTrap;\n"],"names":["FOCUSABLE","useFocusTrap","containerRef","active","restoreFocus","autoFocus","prevFocused","useRef","useEffect","container","focusables","el","first","onKeyDown","event","items","last","activeEl"],"mappings":";AAEA,MAAMA,IACJ;AAeK,SAASC,EACdC,GACA,EAAE,QAAAC,GAAQ,cAAAC,IAAe,IAAM,WAAAC,IAAY,MACrC;AACN,QAAMC,IAAcC,EAA2B,IAAI;AAEnD,EAAAC,EAAU,MAAM;AACd,QAAI,CAACL;AACH;AAEF,UAAMM,IAAYP,EAAa;AAC/B,QAAI,CAACO;AACH;AAGF,IAAAH,EAAY,UAAU,SAAS;AAE/B,UAAMI,IAAa,MACjB,MAAM,KAAKD,EAAU,iBAA8BT,CAAS,CAAC,EAAE;AAAA,MAC7D,CAACW,MAAOA,EAAG,iBAAiB,QAAQA,MAAO,SAAS;AAAA,IAAA;AAGxD,QAAIN,GAAW;AACb,YAAMO,IAAQF,EAAA,EAAa,CAAC;AAC5B,OAACE,KAAA,OAAAA,IAASH,GAAW,MAAM,EAAE,eAAe,IAAM;AAAA,IACpD;AAEA,UAAMI,IAAY,CAACC,MAAyB;AAC1C,UAAIA,EAAM,QAAQ;AAChB;AAEF,YAAMC,IAAQL,EAAA;AACd,UAAIK,EAAM,WAAW,GAAG;AACtB,QAAAD,EAAM,eAAA;AACN;AAAA,MACF;AACA,YAAMF,IAAQG,EAAM,CAAC,GACfC,IAAOD,EAAMA,EAAM,SAAS,CAAC,GAC7BE,IAAW,SAAS;AAE1B,MAAIH,EAAM,YAAYG,MAAaL,KACjCE,EAAM,eAAA,GACNE,EAAK,MAAA,KACI,CAACF,EAAM,YAAYG,MAAaD,KACzCF,EAAM,eAAA,GACNF,EAAM,MAAA,KACIH,EAAU,SAASQ,CAAQ,MACrCH,EAAM,eAAA,GACNF,EAAM,MAAA;AAAA,IAEV;AAEA,oBAAS,iBAAiB,WAAWC,GAAW,EAAI,GAC7C,MAAM;AACX,eAAS,oBAAoB,WAAWA,GAAW,EAAI,GACnDT,KAAgBE,EAAY,WAC9BA,EAAY,QAAQ,MAAM,EAAE,eAAe,IAAM;AAAA,IAErD;AAAA,EACF,GAAG,CAACH,GAAQE,GAAWD,GAAcF,CAAY,CAAC;AACpD;"}

package/dist/headless/hooks/useForkRef.js

@@ -0,0 +1,13 @@
+import t from "react";
+import { setRef as u } from "../utils/setRef.js";
+function m(...r) {
+  return t.useMemo(() => r.every((e) => e == null) ? null : (e) => {
+    r.forEach((o) => {
+      u(o, e);
+    });
+  }, r);
+}
+export {
+  m as useForkRef
+};
+//# sourceMappingURL=useForkRef.js.map

package/dist/headless/hooks/useForkRef.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useForkRef.js","sources":["../../../src/hooks/useForkRef.ts"],"sourcesContent":["import React from \"react\";\nimport { setRef } from \"../utils/setRef\";\n\nexport function useForkRef<Instance>(\n  ...refs: Array<React.Ref<Instance> | undefined>\n): React.RefCallback<Instance> | null {\n  /**\n   * This will create a new function if the refs passed to this hook change and are all defined.\n   * This means react will call the old forkRef with `null` and the new forkRef\n   * with the ref. Cleanup naturally emerges from this behavior.\n   */\n  return React.useMemo(() => {\n    if (refs.every((ref) => ref == null)) {\n      return null;\n    }\n\n    return (instance) => {\n      refs.forEach((ref) => {\n        setRef(ref, instance);\n      });\n    };\n    // TODO need qualification\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, refs);\n}\n"],"names":["useForkRef","refs","React","ref","instance","setRef"],"mappings":";;AAGO,SAASA,KACXC,GACiC;AAMpC,SAAOC,EAAM,QAAQ,MACfD,EAAK,MAAM,CAACE,MAAQA,KAAO,IAAI,IAC1B,OAGF,CAACC,MAAa;AACnB,IAAAH,EAAK,QAAQ,CAACE,MAAQ;AACpB,MAAAE,EAAOF,GAAKC,CAAQ;AAAA,IACtB,CAAC;AAAA,EACH,GAGCH,CAAI;AACT;"}

package/dist/headless/hooks/useId.js

@@ -0,0 +1,9 @@
+import { useId as n } from "react";
+function a(e, s = "smwb") {
+  const t = n();
+  return e != null ? e : `${s}-${t.replace(/[:]/g, "")}`;
+}
+export {
+  a as useId
+};
+//# sourceMappingURL=useId.js.map

package/dist/headless/hooks/useId.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useId.js","sources":["../../../src/hooks/useId.ts"],"sourcesContent":["import { useId as useReactId } from \"react\";\n\n/**\n * Stable unique id for ARIA wiring (label htmlFor, aria-describedby,\n * aria-controls, …). Wraps React 18's `useId` and:\n *  - returns the caller-supplied `idProp` verbatim when provided, so an\n *    explicit `id` always wins;\n *  - otherwise produces a deterministic, SSR-safe id, optionally prefixed.\n */\nexport function useId(idProp?: string, prefix = \"smwb\"): string {\n  const generated = useReactId();\n  return idProp ?? `${prefix}-${generated.replace(/[:]/g, \"\")}`;\n}\n\nexport default useId;\n"],"names":["useId","idProp","prefix","generated","useReactId"],"mappings":";AASO,SAASA,EAAMC,GAAiBC,IAAS,QAAgB;AAC9D,QAAMC,IAAYC,EAAA;AAClB,SAAOH,KAAA,OAAAA,IAAU,GAAGC,CAAM,IAAIC,EAAU,QAAQ,QAAQ,EAAE,CAAC;AAC7D;"}

package/dist/headless/hooks/useModalState.js

@@ -0,0 +1,13 @@
+import { useState as a, useCallback as s } from "react";
+const r = () => {
+  const [t, e] = a(!1), o = s(() => {
+    e(!1);
+  }, []), n = s(() => {
+    e(!0);
+  }, []);
+  return { onClose: o, onOpen: n, isOpen: t };
+};
+export {
+  r as useModalState
+};
+//# sourceMappingURL=useModalState.js.map

package/dist/headless/hooks/useModalState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useModalState.js","sources":["../../../src/hooks/useModalState.ts"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\nexport const useModalState = () => {\n  const [isOpen, setIsOpen] = useState(false);\n\n  const onClose = useCallback(() => {\n    setIsOpen(false);\n  }, []);\n\n  const onOpen = useCallback(() => {\n    setIsOpen(true);\n  }, []);\n\n  return { onClose, onOpen, isOpen };\n};\n"],"names":["useModalState","isOpen","setIsOpen","useState","onClose","useCallback","onOpen"],"mappings":";AAEO,MAAMA,IAAgB,MAAM;AACjC,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK,GAEpCC,IAAUC,EAAY,MAAM;AAChC,IAAAH,EAAU,EAAK;AAAA,EACjB,GAAG,CAAA,CAAE,GAECI,IAASD,EAAY,MAAM;AAC/B,IAAAH,EAAU,EAAI;AAAA,EAChB,GAAG,CAAA,CAAE;AAEL,SAAO,EAAE,SAAAE,GAAS,QAAAE,GAAQ,QAAAL,EAAA;AAC5B;"}

package/dist/headless/hooks/useObservable.js

@@ -0,0 +1,9 @@
+import { useState as r, useEffect as n } from "react";
+function c(t) {
+  const [e, u] = r(t.value);
+  return n(() => (u(t.value), t.subscribe(u)), [t]), e;
+}
+export {
+  c as useObservable
+};
+//# sourceMappingURL=useObservable.js.map

package/dist/headless/hooks/useObservable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useObservable.js","sources":["../../../src/hooks/useObservable.ts"],"sourcesContent":["import { useState, useEffect } from \"react\";\nimport { Observable } from \"../utils/observable\";\nexport function useObservable<T>(observable: Observable<T>): T {\n  const [val, setVal] = useState<T>(observable.value);\n  useEffect(() => {\n    setVal(observable.value);\n    return observable.subscribe(setVal);\n  }, [observable]);\n  return val;\n}\n"],"names":["useObservable","observable","val","setVal","useState","useEffect"],"mappings":";AAEO,SAASA,EAAiBC,GAA8B;AAC7D,QAAM,CAACC,GAAKC,CAAM,IAAIC,EAAYH,EAAW,KAAK;AAClD,SAAAI,EAAU,OACRF,EAAOF,EAAW,KAAK,GAChBA,EAAW,UAAUE,CAAM,IACjC,CAACF,CAAU,CAAC,GACRC;AACT;"}

package/dist/headless/hooks/useRovingTabIndex.js

@@ -0,0 +1,35 @@
+import { useCallback as g } from "react";
+function z({
+  count: f,
+  activeIndex: k,
+  onMove: m,
+  orientation: e = "horizontal",
+  loop: o = !0,
+  isDisabled: t
+}) {
+  return g(
+    (l) => {
+      if (f === 0)
+        return;
+      const y = e === "horizontal" || e === "both", p = e === "vertical" || e === "both", s = y && l.key === "ArrowRight" || p && l.key === "ArrowDown", w = y && l.key === "ArrowLeft" || p && l.key === "ArrowUp";
+      let r = null;
+      if (s ? r = k + 1 : w ? r = k - 1 : l.key === "Home" ? r = 0 : l.key === "End" && (r = f - 1), r === null)
+        return;
+      const u = (h) => o ? (h + f) % f : Math.max(0, Math.min(f - 1, h));
+      if (r = u(r), t) {
+        let h = 0;
+        const a = s || l.key === "Home" ? 1 : -1;
+        for (; t(r) && h < f; )
+          r = u(r + a), h += 1;
+        if (t(r))
+          return;
+      }
+      l.preventDefault(), m(r);
+    },
+    [f, k, m, e, o, t]
+  );
+}
+export {
+  z as useRovingTabIndex
+};
+//# sourceMappingURL=useRovingTabIndex.js.map

package/dist/headless/hooks/useRovingTabIndex.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRovingTabIndex.js","sources":["../../../src/hooks/useRovingTabIndex.ts"],"sourcesContent":["import { KeyboardEvent, useCallback } from \"react\";\n\nexport interface UseRovingTabIndexOptions {\n  /** Number of focusable items. */\n  count: number;\n  /** Current active index. */\n  activeIndex: number;\n  /** Called with the next index when navigation keys are pressed. */\n  onMove: (nextIndex: number) => void;\n  /** Arrow-key axis. */\n  orientation?: \"horizontal\" | \"vertical\" | \"both\";\n  /** Wrap around the ends (default true). */\n  loop?: boolean;\n  /** Optional predicate to skip disabled items. */\n  isDisabled?: (index: number) => boolean;\n}\n\n/**\n * Keyboard navigation for composite widgets (tabs, menus, trees, pagination).\n * Returns an `onKeyDown` handler implementing Arrow/Home/End with optional\n * looping and disabled-skipping. The consumer owns focus/activation.\n */\nexport function useRovingTabIndex({\n  count,\n  activeIndex,\n  onMove,\n  orientation = \"horizontal\",\n  loop = true,\n  isDisabled,\n}: UseRovingTabIndexOptions) {\n  return useCallback(\n    (event: KeyboardEvent) => {\n      if (count === 0) {\n        return;\n      }\n      const horiz = orientation === \"horizontal\" || orientation === \"both\";\n      const vert = orientation === \"vertical\" || orientation === \"both\";\n      const next = (horiz && event.key === \"ArrowRight\") || (vert && event.key === \"ArrowDown\");\n      const prev = (horiz && event.key === \"ArrowLeft\") || (vert && event.key === \"ArrowUp\");\n\n      let target: number | null = null;\n      if (next) {\n        target = activeIndex + 1;\n      } else if (prev) {\n        target = activeIndex - 1;\n      } else if (event.key === \"Home\") {\n        target = 0;\n      } else if (event.key === \"End\") {\n        target = count - 1;\n      }\n      if (target === null) {\n        return;\n      }\n\n      const clamp = (i: number) => (loop ? (i + count) % count : Math.max(0, Math.min(count - 1, i)));\n      target = clamp(target);\n\n      if (isDisabled) {\n        let guard = 0;\n        const step = next || event.key === \"Home\" ? 1 : -1;\n        while (isDisabled(target) && guard < count) {\n          target = clamp(target + step);\n          guard += 1;\n        }\n        if (isDisabled(target)) {\n          return;\n        }\n      }\n\n      event.preventDefault();\n      onMove(target);\n    },\n    [count, activeIndex, onMove, orientation, loop, isDisabled]\n  );\n}\n\nexport default useRovingTabIndex;\n"],"names":["useRovingTabIndex","count","activeIndex","onMove","orientation","loop","isDisabled","useCallback","event","horiz","vert","next","prev","target","clamp","i","guard","step"],"mappings":";AAsBO,SAASA,EAAkB;AAAA,EAChC,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,QAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,MAAAC,IAAO;AAAA,EACP,YAAAC;AACF,GAA6B;AAC3B,SAAOC;AAAA,IACL,CAACC,MAAyB;AACxB,UAAIP,MAAU;AACZ;AAEF,YAAMQ,IAAQL,MAAgB,gBAAgBA,MAAgB,QACxDM,IAAON,MAAgB,cAAcA,MAAgB,QACrDO,IAAQF,KAASD,EAAM,QAAQ,gBAAkBE,KAAQF,EAAM,QAAQ,aACvEI,IAAQH,KAASD,EAAM,QAAQ,eAAiBE,KAAQF,EAAM,QAAQ;AAE5E,UAAIK,IAAwB;AAU5B,UATIF,IACFE,IAASX,IAAc,IACdU,IACTC,IAASX,IAAc,IACdM,EAAM,QAAQ,SACvBK,IAAS,IACAL,EAAM,QAAQ,UACvBK,IAASZ,IAAQ,IAEfY,MAAW;AACb;AAGF,YAAMC,IAAQ,CAACC,MAAeV,KAAQU,IAAId,KAASA,IAAQ,KAAK,IAAI,GAAG,KAAK,IAAIA,IAAQ,GAAGc,CAAC,CAAC;AAG7F,UAFAF,IAASC,EAAMD,CAAM,GAEjBP,GAAY;AACd,YAAIU,IAAQ;AACZ,cAAMC,IAAON,KAAQH,EAAM,QAAQ,SAAS,IAAI;AAChD,eAAOF,EAAWO,CAAM,KAAKG,IAAQf;AACnC,UAAAY,IAASC,EAAMD,IAASI,CAAI,GAC5BD,KAAS;AAEX,YAAIV,EAAWO,CAAM;AACnB;AAAA,MAEJ;AAEA,MAAAL,EAAM,eAAA,GACNL,EAAOU,CAAM;AAAA,IACf;AAAA,IACA,CAACZ,GAAOC,GAAaC,GAAQC,GAAaC,GAAMC,CAAU;AAAA,EAAA;AAE9D;"}

package/dist/headless/hooks/useSafeLayoutEffect.js

@@ -0,0 +1,6 @@
+import e from "react";
+const t = typeof window == "undefined" ? e.useEffect : e.useLayoutEffect;
+export {
+  t as useSafeLayoutEffect
+};
+//# sourceMappingURL=useSafeLayoutEffect.js.map

package/dist/headless/hooks/useSafeLayoutEffect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSafeLayoutEffect.js","sources":["../../../src/hooks/useSafeLayoutEffect.ts"],"sourcesContent":["import React from \"react\";\n\nexport const useSafeLayoutEffect = typeof window === \"undefined\" ? React.useEffect : React.useLayoutEffect;\n"],"names":["useSafeLayoutEffect","React"],"mappings":";AAEO,MAAMA,IAAsB,OAAO,UAAW,cAAcC,EAAM,YAAYA,EAAM;"}

package/dist/headless/hooks/useTheme.js

@@ -0,0 +1,37 @@
+import { useRef as n, useLayoutEffect as c, useEffect as l } from "react";
+import { Observable as d } from "../utils/observable.js";
+import { useObservable as u } from "./useObservable.js";
+var i = /* @__PURE__ */ ((t) => (t.dark = "dark", t.light = "light", t))(i || {});
+const s = "smui-theme", a = new d(
+  "light"
+  /* light */
+), E = () => {
+  const t = u(a), r = n(!0);
+  c(() => {
+    const e = localStorage.getItem(s);
+    if (r.current)
+      if (r.current = !1, e)
+        a.setValue(e), document.documentElement.dataset.theme = e;
+      else {
+        const o = window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
+        e !== t && a.setValue(o), localStorage.setItem(s, o), document.documentElement.dataset.theme = o;
+      }
+  }, [t]);
+  const m = function(e) {
+    if (e.storageArea === localStorage) {
+      const o = localStorage.getItem(s);
+      document.documentElement.dataset.theme = o, a.setValue(o);
+    }
+  };
+  return l(() => (window.addEventListener("storage", m), () => window.removeEventListener("storage", m)), []), {
+    theme: t,
+    setTheme: (e) => {
+      localStorage.setItem(s, e), a.setValue.bind(a)(e), document.documentElement.dataset.theme = e;
+    }
+  };
+};
+export {
+  i as Theme,
+  E as default
+};
+//# sourceMappingURL=useTheme.js.map

package/dist/headless/hooks/useTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTheme.js","sources":["../../../src/hooks/useTheme.ts"],"sourcesContent":["import { useEffect, useLayoutEffect, useRef } from \"react\";\nimport { Observable } from \"../utils/observable\";\nimport { useObservable } from \"./useObservable\";\n\nexport enum Theme {\n  dark = \"dark\",\n  light = \"light\",\n}\n\nconst themeStorageKey = \"smui-theme\";\n\nconst themeObservable = new Observable<Theme>(Theme.light);\n\nconst useTheme = () => {\n  const theme = useObservable(themeObservable);\n  // Начальная инициализация\n  const firstUpdate = useRef(true);\n  useLayoutEffect(() => {\n    const savedTheme = localStorage.getItem(themeStorageKey) as Theme;\n    if (firstUpdate.current) {\n      firstUpdate.current = false;\n      if (savedTheme) {\n        themeObservable.setValue(savedTheme);\n        document.documentElement.dataset.theme = savedTheme;\n      } else {\n        const defaultTheme: Theme = window.matchMedia(\"(prefers-color-scheme: light)\").matches\n          ? Theme.light\n          : Theme.dark;\n        if (savedTheme !== theme) {\n          themeObservable.setValue(defaultTheme);\n        }\n        localStorage.setItem(themeStorageKey, defaultTheme);\n        document.documentElement.dataset.theme = defaultTheme;\n      }\n    }\n  }, [theme]);\n\n  const themeListener = function (event: StorageEvent) {\n    if (event.storageArea === localStorage) {\n      const savedTheme = localStorage.getItem(themeStorageKey) as Theme;\n      document.documentElement.dataset.theme = savedTheme;\n      themeObservable.setValue(savedTheme);\n    }\n  };\n\n  useEffect(() => {\n    window.addEventListener(\"storage\", themeListener);\n    return () => window.removeEventListener(\"storage\", themeListener);\n  }, []);\n\n  return {\n    theme,\n    setTheme: (value: Theme) => {\n      localStorage.setItem(themeStorageKey, value);\n      themeObservable.setValue.bind(themeObservable)(value);\n      document.documentElement.dataset.theme = value;\n    },\n  };\n};\n\nexport default useTheme;\n"],"names":["Theme","themeStorageKey","themeObservable","Observable","useTheme","theme","useObservable","firstUpdate","useRef","useLayoutEffect","savedTheme","defaultTheme","themeListener","event","useEffect","value"],"mappings":";;;AAIO,IAAKA,sBAAAA,OACVA,EAAA,OAAO,QACPA,EAAA,QAAQ,SAFEA,IAAAA,KAAA,CAAA,CAAA;AAKZ,MAAMC,IAAkB,cAElBC,IAAkB,IAAIC;AAAA,EAAkB;AAAA;AAAA,GAExCC,IAAW,MAAM;AACrB,QAAMC,IAAQC,EAAcJ,CAAe,GAErCK,IAAcC,EAAO,EAAI;AAC/B,EAAAC,EAAgB,MAAM;AACpB,UAAMC,IAAa,aAAa,QAAQT,CAAe;AACvD,QAAIM,EAAY;AAEd,UADAA,EAAY,UAAU,IAClBG;AACF,QAAAR,EAAgB,SAASQ,CAAU,GACnC,SAAS,gBAAgB,QAAQ,QAAQA;AAAA,WACpC;AACL,cAAMC,IAAsB,OAAO,WAAW,+BAA+B,EAAE,UAC3E,UACA;AACJ,QAAID,MAAeL,KACjBH,EAAgB,SAASS,CAAY,GAEvC,aAAa,QAAQV,GAAiBU,CAAY,GAClD,SAAS,gBAAgB,QAAQ,QAAQA;AAAA,MAC3C;AAAA,EAEJ,GAAG,CAACN,CAAK,CAAC;AAEV,QAAMO,IAAgB,SAAUC,GAAqB;AACnD,QAAIA,EAAM,gBAAgB,cAAc;AACtC,YAAMH,IAAa,aAAa,QAAQT,CAAe;AACvD,eAAS,gBAAgB,QAAQ,QAAQS,GACzCR,EAAgB,SAASQ,CAAU;AAAA,IACrC;AAAA,EACF;AAEA,SAAAI,EAAU,OACR,OAAO,iBAAiB,WAAWF,CAAa,GACzC,MAAM,OAAO,oBAAoB,WAAWA,CAAa,IAC/D,CAAA,CAAE,GAEE;AAAA,IACL,OAAAP;AAAA,IACA,UAAU,CAACU,MAAiB;AAC1B,mBAAa,QAAQd,GAAiBc,CAAK,GAC3Cb,EAAgB,SAAS,KAAKA,CAAe,EAAEa,CAAK,GACpD,SAAS,gBAAgB,QAAQ,QAAQA;AAAA,IAC3C;AAAA,EAAA;AAEJ;"}

package/dist/headless/hooks/useVirtualList.js

@@ -0,0 +1,25 @@
+import { useState as M, useCallback as p, useMemo as x } from "react";
+function d({
+  itemCount: o,
+  itemHeight: s,
+  viewportHeight: n,
+  overscan: l = 4
+}) {
+  const [c, a] = M(0), e = p((t) => {
+    a(t.currentTarget.scrollTop);
+  }, []);
+  return x(() => {
+    const t = s > 0 ? s : 1, u = Math.ceil(n / t), r = Math.max(0, Math.floor(c / t) - l), f = Math.min(o, r + u + l * 2);
+    return {
+      startIndex: r,
+      endIndex: f,
+      totalHeight: o * t,
+      offsetY: r * t,
+      onScroll: e
+    };
+  }, [o, s, n, l, c, e]);
+}
+export {
+  d as useVirtualList
+};
+//# sourceMappingURL=useVirtualList.js.map

package/dist/headless/hooks/useVirtualList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useVirtualList.js","sources":["../../../src/hooks/useVirtualList.ts"],"sourcesContent":["import { useCallback, useMemo, useState } from \"react\";\n\nexport interface UseVirtualListParams {\n  /** Total number of items. */\n  itemCount: number;\n  /** Fixed height (px) of a single item. */\n  itemHeight: number;\n  /** Visible viewport height (px). */\n  viewportHeight: number;\n  /** Extra rows rendered above/below the viewport. */\n  overscan?: number;\n}\n\nexport interface UseVirtualListResult {\n  /** First (inclusive) index to render. */\n  startIndex: number;\n  /** Last (exclusive) index to render. */\n  endIndex: number;\n  /** Total scrollable height (px) for the spacer. */\n  totalHeight: number;\n  /** Pixel offset of the first rendered item (translateY). */\n  offsetY: number;\n  /** Attach to the scroll container's `onScroll`. */\n  onScroll: (event: { currentTarget: { scrollTop: number } }) => void;\n}\n\n/**\n * Minimal fixed-height windowing helper (no dependencies).\n *\n * Render only `[startIndex, endIndex)` inside a `position: relative`\n * container of `totalHeight`, translated by `offsetY`.\n */\nexport function useVirtualList({\n  itemCount,\n  itemHeight,\n  viewportHeight,\n  overscan = 4,\n}: UseVirtualListParams): UseVirtualListResult {\n  const [scrollTop, setScrollTop] = useState(0);\n\n  const onScroll = useCallback((event: { currentTarget: { scrollTop: number } }) => {\n    setScrollTop(event.currentTarget.scrollTop);\n  }, []);\n\n  return useMemo(() => {\n    const safeItemHeight = itemHeight > 0 ? itemHeight : 1;\n    const visibleCount = Math.ceil(viewportHeight / safeItemHeight);\n    const startIndex = Math.max(0, Math.floor(scrollTop / safeItemHeight) - overscan);\n    const endIndex = Math.min(itemCount, startIndex + visibleCount + overscan * 2);\n\n    return {\n      startIndex,\n      endIndex,\n      totalHeight: itemCount * safeItemHeight,\n      offsetY: startIndex * safeItemHeight,\n      onScroll,\n    };\n  }, [itemCount, itemHeight, viewportHeight, overscan, scrollTop, onScroll]);\n}\n\nexport default useVirtualList;\n"],"names":["useVirtualList","itemCount","itemHeight","viewportHeight","overscan","scrollTop","setScrollTop","useState","onScroll","useCallback","event","useMemo","safeItemHeight","visibleCount","startIndex","endIndex"],"mappings":";AAgCO,SAASA,EAAe;AAAA,EAC7B,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,UAAAC,IAAW;AACb,GAA+C;AAC7C,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAAS,CAAC,GAEtCC,IAAWC,EAAY,CAACC,MAAoD;AAChF,IAAAJ,EAAaI,EAAM,cAAc,SAAS;AAAA,EAC5C,GAAG,CAAA,CAAE;AAEL,SAAOC,EAAQ,MAAM;AACnB,UAAMC,IAAiBV,IAAa,IAAIA,IAAa,GAC/CW,IAAe,KAAK,KAAKV,IAAiBS,CAAc,GACxDE,IAAa,KAAK,IAAI,GAAG,KAAK,MAAMT,IAAYO,CAAc,IAAIR,CAAQ,GAC1EW,IAAW,KAAK,IAAId,GAAWa,IAAaD,IAAeT,IAAW,CAAC;AAE7E,WAAO;AAAA,MACL,YAAAU;AAAA,MACA,UAAAC;AAAA,MACA,aAAad,IAAYW;AAAA,MACzB,SAASE,IAAaF;AAAA,MACtB,UAAAJ;AAAA,IAAA;AAAA,EAEJ,GAAG,CAACP,GAAWC,GAAYC,GAAgBC,GAAUC,GAAWG,CAAQ,CAAC;AAC3E;"}