@smwb/ui-react 2.0.0

package/dist/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/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/hooks/useRovingTabIndex.d.ts

@@ -0,0 +1,22 @@
+import { KeyboardEvent } from "react";
+export interface UseRovingTabIndexOptions {
+    /** Number of focusable items. */
+    count: number;
+    /** Current active index. */
+    activeIndex: number;
+    /** Called with the next index when navigation keys are pressed. */
+    onMove: (nextIndex: number) => void;
+    /** Arrow-key axis. */
+    orientation?: "horizontal" | "vertical" | "both";
+    /** Wrap around the ends (default true). */
+    loop?: boolean;
+    /** Optional predicate to skip disabled items. */
+    isDisabled?: (index: number) => boolean;
+}
+/**
+ * Keyboard navigation for composite widgets (tabs, menus, trees, pagination).
+ * Returns an `onKeyDown` handler implementing Arrow/Home/End with optional
+ * looping and disabled-skipping. The consumer owns focus/activation.
+ */
+export declare function useRovingTabIndex({ count, activeIndex, onMove, orientation, loop, isDisabled, }: UseRovingTabIndexOptions): (event: KeyboardEvent) => void;
+export default useRovingTabIndex;

package/dist/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/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/hooks/useSafeLayoutEffect.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const useSafeLayoutEffect: typeof React.useEffect;

package/dist/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/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/hooks/useTheme.d.ts

@@ -0,0 +1,9 @@
+export declare enum Theme {
+    dark = "dark",
+    light = "light"
+}
+declare const useTheme: () => {
+    theme: Theme;
+    setTheme: (value: Theme) => void;
+};
+export default useTheme;

package/dist/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/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/hooks/useThrottleCallback.d.ts

@@ -0,0 +1 @@
+export declare function useThrottleCallback<T>(callback: (value: T) => void, throttleDelayMs: number): (value: T) => void;

package/dist/hooks/useVirtualList.d.ts

@@ -0,0 +1,34 @@
+export interface UseVirtualListParams {
+    /** Total number of items. */
+    itemCount: number;
+    /** Fixed height (px) of a single item. */
+    itemHeight: number;
+    /** Visible viewport height (px). */
+    viewportHeight: number;
+    /** Extra rows rendered above/below the viewport. */
+    overscan?: number;
+}
+export interface UseVirtualListResult {
+    /** First (inclusive) index to render. */
+    startIndex: number;
+    /** Last (exclusive) index to render. */
+    endIndex: number;
+    /** Total scrollable height (px) for the spacer. */
+    totalHeight: number;
+    /** Pixel offset of the first rendered item (translateY). */
+    offsetY: number;
+    /** Attach to the scroll container's `onScroll`. */
+    onScroll: (event: {
+        currentTarget: {
+            scrollTop: number;
+        };
+    }) => void;
+}
+/**
+ * Minimal fixed-height windowing helper (no dependencies).
+ *
+ * Render only `[startIndex, endIndex)` inside a `position: relative`
+ * container of `totalHeight`, translated by `offsetY`.
+ */
+export declare function useVirtualList({ itemCount, itemHeight, viewportHeight, overscan, }: UseVirtualListParams): UseVirtualListResult;
+export default useVirtualList;

package/dist/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/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;"}