@smwb/ui-solid 0.1.0

package/dist/primitives/createFocusTrap.js

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

package/dist/primitives/createFocusTrap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createFocusTrap.js","sources":["../../src/primitives/createFocusTrap.ts"],"sourcesContent":["import { type Accessor, createEffect, onCleanup } from \"solid-js\";\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 CreateFocusTrapOptions {\n  /** Trap is active only while this returns true. */\n  active: Accessor<boolean>;\n  /** The element whose focusable descendants are trapped. */\n  container: Accessor<HTMLElement | undefined>;\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 `container` while `active`. Restores\n * focus to the previously focused element on teardown. Solid port of\n * summer-ui's useFocusTrap.\n */\nexport function createFocusTrap(options: CreateFocusTrapOptions): void {\n  const restoreFocus = options.restoreFocus ?? true;\n  const autoFocus = options.autoFocus ?? true;\n\n  createEffect(() => {\n    if (!options.active()) return;\n    const container = options.container();\n    if (!container) return;\n\n    const prevFocused = document.activeElement as HTMLElement | null;\n\n    const focusables = (): HTMLElement[] =>\n      Array.from(container.querySelectorAll<HTMLElement>(FOCUSABLE)).filter(\n        (el) => el.offsetParent !== null || el === document.activeElement\n      );\n\n    if (autoFocus) {\n      (focusables()[0] ?? container).focus({ preventScroll: true });\n    }\n\n    const onKeyDown = (event: KeyboardEvent): void => {\n      if (event.key !== \"Tab\") return;\n      const items = focusables();\n      const first = items[0];\n      const last = items[items.length - 1];\n      if (!first || !last) {\n        event.preventDefault();\n        return;\n      }\n      const activeEl = document.activeElement;\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    onCleanup(() => {\n      document.removeEventListener(\"keydown\", onKeyDown, true);\n      if (restoreFocus && prevFocused) {\n        prevFocused.focus({ preventScroll: true });\n      }\n    });\n  });\n}\n"],"names":["FOCUSABLE","createFocusTrap","options","restoreFocus","autoFocus","createEffect","container","prevFocused","focusables","el","onKeyDown","event","items","first","last","activeEl","onCleanup"],"mappings":";AAEA,MAAMA,IACJ;AAkBK,SAASC,EAAgBC,GAAuC;AACrE,QAAMC,IAAeD,EAAQ,gBAAgB,IACvCE,IAAYF,EAAQ,aAAa;AAEvC,EAAAG,EAAa,MAAM;AACjB,QAAI,CAACH,EAAQ,SAAU;AACvB,UAAMI,IAAYJ,EAAQ,UAAA;AAC1B,QAAI,CAACI,EAAW;AAEhB,UAAMC,IAAc,SAAS,eAEvBC,IAAa,MACjB,MAAM,KAAKF,EAAU,iBAA8BN,CAAS,CAAC,EAAE;AAAA,MAC7D,CAACS,MAAOA,EAAG,iBAAiB,QAAQA,MAAO,SAAS;AAAA,IAAA;AAGxD,IAAIL,MACDI,EAAA,EAAa,CAAC,KAAKF,GAAW,MAAM,EAAE,eAAe,IAAM;AAG9D,UAAMI,IAAY,CAACC,MAA+B;AAChD,UAAIA,EAAM,QAAQ,MAAO;AACzB,YAAMC,IAAQJ,EAAA,GACRK,IAAQD,EAAM,CAAC,GACfE,IAAOF,EAAMA,EAAM,SAAS,CAAC;AACnC,UAAI,CAACC,KAAS,CAACC,GAAM;AACnB,QAAAH,EAAM,eAAA;AACN;AAAA,MACF;AACA,YAAMI,IAAW,SAAS;AAC1B,MAAIJ,EAAM,YAAYI,MAAaF,KACjCF,EAAM,eAAA,GACNG,EAAK,MAAA,KACI,CAACH,EAAM,YAAYI,MAAaD,KACzCH,EAAM,eAAA,GACNE,EAAM,MAAA,KACIP,EAAU,SAASS,CAAQ,MACrCJ,EAAM,eAAA,GACNE,EAAM,MAAA;AAAA,IAEV;AAEA,aAAS,iBAAiB,WAAWH,GAAW,EAAI,GACpDM,EAAU,MAAM;AACd,eAAS,oBAAoB,WAAWN,GAAW,EAAI,GACnDP,KAAgBI,KAClBA,EAAY,MAAM,EAAE,eAAe,GAAA,CAAM;AAAA,IAE7C,CAAC;AAAA,EACH,CAAC;AACH;"}

package/dist/primitives/createId.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Stable unique id for ARIA wiring (label `for`, aria-describedby,
+ * aria-controls, …). Replaces React 18's `useId`:
+ *  - returns the caller-supplied `idProp` verbatim when provided, so an
+ *    explicit `id` always wins;
+ *  - otherwise produces a deterministic id, optionally prefixed.
+ *
+ * Must be called during component setup (it relies on the owner context).
+ * For an id that must react to a changing `id` prop, wrap the call site in a
+ * memo over `props.id`.
+ */
+export declare function createId(idProp?: string, prefix?: string): string;

package/dist/primitives/createId.js

@@ -0,0 +1,9 @@
+import { createUniqueId as n } from "solid-js";
+function c(e, r = "smwb") {
+  const t = n();
+  return e ?? `${r}-${t}`;
+}
+export {
+  c as createId
+};
+//# sourceMappingURL=createId.js.map

package/dist/primitives/createId.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createId.js","sources":["../../src/primitives/createId.ts"],"sourcesContent":["import { createUniqueId } from \"solid-js\";\n\n/**\n * Stable unique id for ARIA wiring (label `for`, aria-describedby,\n * aria-controls, …). Replaces React 18's `useId`:\n *  - returns the caller-supplied `idProp` verbatim when provided, so an\n *    explicit `id` always wins;\n *  - otherwise produces a deterministic id, optionally prefixed.\n *\n * Must be called during component setup (it relies on the owner context).\n * For an id that must react to a changing `id` prop, wrap the call site in a\n * memo over `props.id`.\n */\nexport function createId(idProp?: string, prefix = \"smwb\"): string {\n  const generated = createUniqueId();\n  return idProp ?? `${prefix}-${generated}`;\n}\n"],"names":["createId","idProp","prefix","generated","createUniqueId"],"mappings":";AAaO,SAASA,EAASC,GAAiBC,IAAS,QAAgB;AACjE,QAAMC,IAAYC,EAAA;AAClB,SAAOH,KAAU,GAAGC,CAAM,IAAIC,CAAS;AACzC;"}

package/dist/primitives/createMaskedInput.d.ts

@@ -0,0 +1,23 @@
+import type { Accessor } from "solid-js";
+export interface CreateMaskedInputOptions {
+    /** Controlled display value (the formatted string). */
+    value: Accessor<string>;
+    /** Called with the next formatted value as the user types. */
+    onChange: (value: string) => void;
+    /** Formats a raw input string into the masked output. */
+    format: (value: string) => string;
+}
+export interface MaskedInputState {
+    value: Accessor<string>;
+    onInput: (event: InputEvent & {
+        currentTarget: HTMLInputElement;
+        target: Element;
+    }) => void;
+    ref: (el: HTMLInputElement) => void;
+}
+/**
+ * Controlled masked-input helper — the Solid replacement for rifm's useRifm.
+ * Re-formats on input, calls back with the formatted value, and restores the
+ * caret based on how many digits preceded it (works for date/time digit masks).
+ */
+export declare function createMaskedInput(options: CreateMaskedInputOptions): MaskedInputState;

package/dist/primitives/createMaskedInput.js

@@ -0,0 +1,27 @@
+function f(t, n) {
+  if (n <= 0) return 0;
+  let r = 0;
+  for (let e = 0; e < t.length; e++)
+    if (/\d/.test(t[e] ?? "") && (r++, r >= n))
+      return e + 1;
+  return t.length;
+}
+function s(t) {
+  let n;
+  const r = (e) => {
+    const a = e.currentTarget, c = a.value, l = a.selectionStart ?? c.length, o = c.slice(0, l).replace(/\D/g, "").length, i = t.format(c);
+    t.onChange(i), queueMicrotask(() => {
+      if (!n) return;
+      const u = f(n.value, o);
+      try {
+        n.setSelectionRange(u, u);
+      } catch {
+      }
+    });
+  };
+  return { value: t.value, onInput: r, ref: (e) => n = e };
+}
+export {
+  s as createMaskedInput
+};
+//# sourceMappingURL=createMaskedInput.js.map

package/dist/primitives/createMaskedInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createMaskedInput.js","sources":["../../src/primitives/createMaskedInput.ts"],"sourcesContent":["import type { Accessor } from \"solid-js\";\n\nexport interface CreateMaskedInputOptions {\n  /** Controlled display value (the formatted string). */\n  value: Accessor<string>;\n  /** Called with the next formatted value as the user types. */\n  onChange: (value: string) => void;\n  /** Formats a raw input string into the masked output. */\n  format: (value: string) => string;\n}\n\nexport interface MaskedInputState {\n  value: Accessor<string>;\n  onInput: (event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => void;\n  ref: (el: HTMLInputElement) => void;\n}\n\n/** Place the caret just after the `n`-th digit in `str`. */\nfunction caretAfterDigits(str: string, n: number): number {\n  if (n <= 0) return 0;\n  let count = 0;\n  for (let i = 0; i < str.length; i++) {\n    if (/\\d/.test(str[i] ?? \"\")) {\n      count++;\n      if (count >= n) return i + 1;\n    }\n  }\n  return str.length;\n}\n\n/**\n * Controlled masked-input helper — the Solid replacement for rifm's useRifm.\n * Re-formats on input, calls back with the formatted value, and restores the\n * caret based on how many digits preceded it (works for date/time digit masks).\n */\nexport function createMaskedInput(options: CreateMaskedInputOptions): MaskedInputState {\n  let inputEl: HTMLInputElement | undefined;\n\n  const onInput = (event: InputEvent & { currentTarget: HTMLInputElement; target: Element }): void => {\n    const el = event.currentTarget;\n    const raw = el.value;\n    const caret = el.selectionStart ?? raw.length;\n    const digitsBeforeCaret = raw.slice(0, caret).replace(/\\D/g, \"\").length;\n    const formatted = options.format(raw);\n    options.onChange(formatted);\n    queueMicrotask(() => {\n      if (!inputEl) return;\n      const pos = caretAfterDigits(inputEl.value, digitsBeforeCaret);\n      try {\n        inputEl.setSelectionRange(pos, pos);\n      } catch {\n        /* setSelectionRange unsupported for some input types */\n      }\n    });\n  };\n\n  return { value: options.value, onInput, ref: (el) => (inputEl = el) };\n}\n"],"names":["caretAfterDigits","str","count","i","createMaskedInput","options","inputEl","onInput","event","el","raw","caret","digitsBeforeCaret","formatted","pos"],"mappings":"AAkBA,SAASA,EAAiBC,GAAa,GAAmB;AACxD,MAAI,KAAK,EAAG,QAAO;AACnB,MAAIC,IAAQ;AACZ,WAASC,IAAI,GAAGA,IAAIF,EAAI,QAAQE;AAC9B,QAAI,KAAK,KAAKF,EAAIE,CAAC,KAAK,EAAE,MACxBD,KACIA,KAAS;AAAG,aAAOC,IAAI;AAG/B,SAAOF,EAAI;AACb;AAOO,SAASG,EAAkBC,GAAqD;AACrF,MAAIC;AAEJ,QAAMC,IAAU,CAACC,MAAmF;AAClG,UAAMC,IAAKD,EAAM,eACXE,IAAMD,EAAG,OACTE,IAAQF,EAAG,kBAAkBC,EAAI,QACjCE,IAAoBF,EAAI,MAAM,GAAGC,CAAK,EAAE,QAAQ,OAAO,EAAE,EAAE,QAC3DE,IAAYR,EAAQ,OAAOK,CAAG;AACpC,IAAAL,EAAQ,SAASQ,CAAS,GAC1B,eAAe,MAAM;AACnB,UAAI,CAACP,EAAS;AACd,YAAMQ,IAAMd,EAAiBM,EAAQ,OAAOM,CAAiB;AAC7D,UAAI;AACF,QAAAN,EAAQ,kBAAkBQ,GAAKA,CAAG;AAAA,MACpC,QAAQ;AAAA,MAER;AAAA,IACF,CAAC;AAAA,EACH;AAEA,SAAO,EAAE,OAAOT,EAAQ,OAAO,SAAAE,GAAS,KAAK,CAACE,MAAQH,IAAUG,EAAA;AAClE;"}

package/dist/primitives/createTheme.d.ts

@@ -0,0 +1,10 @@
+import { type Accessor } from "solid-js";
+export declare enum Theme {
+    dark = "dark",
+    light = "light"
+}
+export interface CreateThemeResult {
+    theme: Accessor<Theme>;
+    setTheme: (value: Theme) => void;
+}
+export declare function createTheme(): CreateThemeResult;

package/dist/primitives/createTheme.js

@@ -0,0 +1,38 @@
+import { onMount as m, onCleanup as s, createSignal as c } from "solid-js";
+import { isServer as i } from "solid-js/web";
+var l = /* @__PURE__ */ ((e) => (e.dark = "dark", e.light = "light", e))(l || {});
+const o = "smui-theme", [g, h] = c(
+  "light"
+  /* light */
+);
+function r(e) {
+  h(e), i || (document.documentElement.dataset.theme = e);
+}
+function S() {
+  return m(() => {
+    const e = localStorage.getItem(o);
+    if (e)
+      r(e);
+    else {
+      const t = window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
+      localStorage.setItem(o, t), r(t);
+    }
+    const a = (t) => {
+      if (t.storageArea === localStorage) {
+        const n = localStorage.getItem(o);
+        n && r(n);
+      }
+    };
+    window.addEventListener("storage", a), s(() => window.removeEventListener("storage", a));
+  }), {
+    theme: g,
+    setTheme: (e) => {
+      i || localStorage.setItem(o, e), r(e);
+    }
+  };
+}
+export {
+  l as Theme,
+  S as createTheme
+};
+//# sourceMappingURL=createTheme.js.map

package/dist/primitives/createTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createTheme.js","sources":["../../src/primitives/createTheme.ts"],"sourcesContent":["import { type Accessor, createSignal, onCleanup, onMount } from \"solid-js\";\nimport { isServer } from \"solid-js/web\";\n\nexport enum Theme {\n  dark = \"dark\",\n  light = \"light\",\n}\n\nconst themeStorageKey = \"smui-theme\";\n\n// Module-level signal acts as the shared theme store (the Solid analogue of\n// summer-ui's Observable singleton), so every createTheme() consumer stays in\n// sync.\nconst [theme, setThemeSignal] = createSignal<Theme>(Theme.light);\n\nfunction applyTheme(value: Theme): void {\n  setThemeSignal(value);\n  if (!isServer) {\n    document.documentElement.dataset.theme = value;\n  }\n}\n\nexport interface CreateThemeResult {\n  theme: Accessor<Theme>;\n  setTheme: (value: Theme) => void;\n}\n\nexport function createTheme(): CreateThemeResult {\n  onMount(() => {\n    const saved = localStorage.getItem(themeStorageKey) as Theme | null;\n    if (saved) {\n      applyTheme(saved);\n    } else {\n      const preferred: Theme = window.matchMedia(\"(prefers-color-scheme: light)\").matches ? Theme.light : Theme.dark;\n      localStorage.setItem(themeStorageKey, preferred);\n      applyTheme(preferred);\n    }\n\n    const onStorage = (event: StorageEvent): void => {\n      if (event.storageArea === localStorage) {\n        const next = localStorage.getItem(themeStorageKey) as Theme | null;\n        if (next) {\n          applyTheme(next);\n        }\n      }\n    };\n    window.addEventListener(\"storage\", onStorage);\n    onCleanup(() => window.removeEventListener(\"storage\", onStorage));\n  });\n\n  return {\n    theme,\n    setTheme: (value: Theme) => {\n      if (!isServer) {\n        localStorage.setItem(themeStorageKey, value);\n      }\n      applyTheme(value);\n    },\n  };\n}\n"],"names":["Theme","themeStorageKey","theme","setThemeSignal","createSignal","applyTheme","value","isServer","createTheme","onMount","saved","preferred","onStorage","event","next","onCleanup"],"mappings":";;AAGO,IAAKA,sBAAAA,OACVA,EAAA,OAAO,QACPA,EAAA,QAAQ,SAFEA,IAAAA,KAAA,CAAA,CAAA;AAKZ,MAAMC,IAAkB,cAKlB,CAACC,GAAOC,CAAc,IAAIC;AAAA,EAAoB;AAAA;AAAA;AAEpD,SAASC,EAAWC,GAAoB;AACtC,EAAAH,EAAeG,CAAK,GACfC,MACH,SAAS,gBAAgB,QAAQ,QAAQD;AAE7C;AAOO,SAASE,IAAiC;AAC/C,SAAAC,EAAQ,MAAM;AACZ,UAAMC,IAAQ,aAAa,QAAQT,CAAe;AAClD,QAAIS;AACF,MAAAL,EAAWK,CAAK;AAAA,SACX;AACL,YAAMC,IAAmB,OAAO,WAAW,+BAA+B,EAAE,UAAU,UAAc;AACpG,mBAAa,QAAQV,GAAiBU,CAAS,GAC/CN,EAAWM,CAAS;AAAA,IACtB;AAEA,UAAMC,IAAY,CAACC,MAA8B;AAC/C,UAAIA,EAAM,gBAAgB,cAAc;AACtC,cAAMC,IAAO,aAAa,QAAQb,CAAe;AACjD,QAAIa,KACFT,EAAWS,CAAI;AAAA,MAEnB;AAAA,IACF;AACA,WAAO,iBAAiB,WAAWF,CAAS,GAC5CG,EAAU,MAAM,OAAO,oBAAoB,WAAWH,CAAS,CAAC;AAAA,EAClE,CAAC,GAEM;AAAA,IACL,OAAAV;AAAA,IACA,UAAU,CAACI,MAAiB;AAC1B,MAAKC,KACH,aAAa,QAAQN,GAAiBK,CAAK,GAE7CD,EAAWC,CAAK;AAAA,IAClB;AAAA,EAAA;AAEJ;"}

package/dist/primitives/createVirtualList.d.ts

@@ -0,0 +1,28 @@
+import { type Accessor } from "solid-js";
+export interface CreateVirtualListParams {
+    /** Total number of items (reactive). */
+    itemCount: Accessor<number>;
+    /** Fixed height (px) of a single item (reactive). */
+    itemHeight: Accessor<number>;
+    /** Visible viewport height (px) (reactive). */
+    viewportHeight: Accessor<number>;
+    /** Extra rows rendered above/below the viewport. */
+    overscan?: number;
+}
+export interface VirtualListResult {
+    startIndex: Accessor<number>;
+    endIndex: Accessor<number>;
+    totalHeight: Accessor<number>;
+    offsetY: Accessor<number>;
+    onScroll: (event: {
+        currentTarget: {
+            scrollTop: number;
+        };
+    }) => void;
+}
+/**
+ * Minimal fixed-height windowing helper (no dependencies). Render only
+ * `[startIndex, endIndex)` inside a relative container of `totalHeight`,
+ * translated by `offsetY`. Solid port of summer-ui's useVirtualList.
+ */
+export declare function createVirtualList(params: CreateVirtualListParams): VirtualListResult;

package/dist/primitives/createVirtualList.js

@@ -0,0 +1,11 @@
+import { createSignal as h } from "solid-js";
+function H(t) {
+  const n = t.overscan ?? 4, [c, i] = h(0), l = (s) => {
+    i(s.currentTarget.scrollTop);
+  }, e = () => t.itemHeight() > 0 ? t.itemHeight() : 1, r = () => Math.ceil(t.viewportHeight() / e()), o = () => Math.max(0, Math.floor(c() / e()) - n);
+  return { startIndex: o, endIndex: () => Math.min(t.itemCount(), o() + r() + n * 2), totalHeight: () => t.itemCount() * e(), offsetY: () => o() * e(), onScroll: l };
+}
+export {
+  H as createVirtualList
+};
+//# sourceMappingURL=createVirtualList.js.map

package/dist/primitives/createVirtualList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createVirtualList.js","sources":["../../src/primitives/createVirtualList.ts"],"sourcesContent":["import { type Accessor, createSignal } from \"solid-js\";\n\nexport interface CreateVirtualListParams {\n  /** Total number of items (reactive). */\n  itemCount: Accessor<number>;\n  /** Fixed height (px) of a single item (reactive). */\n  itemHeight: Accessor<number>;\n  /** Visible viewport height (px) (reactive). */\n  viewportHeight: Accessor<number>;\n  /** Extra rows rendered above/below the viewport. */\n  overscan?: number;\n}\n\nexport interface VirtualListResult {\n  startIndex: Accessor<number>;\n  endIndex: Accessor<number>;\n  totalHeight: Accessor<number>;\n  offsetY: Accessor<number>;\n  onScroll: (event: { currentTarget: { scrollTop: number } }) => void;\n}\n\n/**\n * Minimal fixed-height windowing helper (no dependencies). Render only\n * `[startIndex, endIndex)` inside a relative container of `totalHeight`,\n * translated by `offsetY`. Solid port of summer-ui's useVirtualList.\n */\nexport function createVirtualList(params: CreateVirtualListParams): VirtualListResult {\n  const overscan = params.overscan ?? 4;\n  const [scrollTop, setScrollTop] = createSignal(0);\n\n  const onScroll = (event: { currentTarget: { scrollTop: number } }): void => {\n    setScrollTop(event.currentTarget.scrollTop);\n  };\n\n  const safeItemHeight = (): number => (params.itemHeight() > 0 ? params.itemHeight() : 1);\n  const visibleCount = (): number => Math.ceil(params.viewportHeight() / safeItemHeight());\n  const startIndex = (): number => Math.max(0, Math.floor(scrollTop() / safeItemHeight()) - overscan);\n  const endIndex = (): number => Math.min(params.itemCount(), startIndex() + visibleCount() + overscan * 2);\n  const totalHeight = (): number => params.itemCount() * safeItemHeight();\n  const offsetY = (): number => startIndex() * safeItemHeight();\n\n  return { startIndex, endIndex, totalHeight, offsetY, onScroll };\n}\n"],"names":["createVirtualList","params","overscan","scrollTop","setScrollTop","createSignal","onScroll","event","safeItemHeight","visibleCount","startIndex"],"mappings":";AA0BO,SAASA,EAAkBC,GAAoD;AACpF,QAAMC,IAAWD,EAAO,YAAY,GAC9B,CAACE,GAAWC,CAAY,IAAIC,EAAa,CAAC,GAE1CC,IAAW,CAACC,MAA0D;AAC1E,IAAAH,EAAaG,EAAM,cAAc,SAAS;AAAA,EAC5C,GAEMC,IAAiB,MAAeP,EAAO,WAAA,IAAe,IAAIA,EAAO,eAAe,GAChFQ,IAAe,MAAc,KAAK,KAAKR,EAAO,eAAA,IAAmBO,GAAgB,GACjFE,IAAa,MAAc,KAAK,IAAI,GAAG,KAAK,MAAMP,EAAA,IAAcK,EAAA,CAAgB,IAAIN,CAAQ;AAKlG,SAAO,EAAE,YAAAQ,GAAY,UAJJ,MAAc,KAAK,IAAIT,EAAO,aAAaS,MAAeD,MAAiBP,IAAW,CAAC,GAIzE,aAHX,MAAcD,EAAO,UAAA,IAAcO,EAAA,GAGX,SAF5B,MAAcE,EAAA,IAAeF,EAAA,GAEQ,UAAAF,EAAA;AACvD;"}

package/dist/primitives/mergeRefs.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Solid `ref` props are always compiled to callbacks (or `undefined`), so a
+ * forwarded `props.ref` plus a local `let el` can both be satisfied by calling
+ * each function ref. Replaces React's useForkRef/setRef.
+ *
+ * Usage: `<div ref={mergeRefs(props.ref, (el) => (local = el))} />`
+ */
+export type RefCallback<T> = (el: T) => void;
+export type Ref<T> = RefCallback<T> | T | undefined;
+export declare function mergeRefs<T>(...refs: Array<Ref<T>>): RefCallback<T>;

package/dist/primitives/mergeRefs.js

@@ -0,0 +1,10 @@
+function n(...e) {
+  return (o) => {
+    for (const f of e)
+      typeof f == "function" && f(o);
+  };
+}
+export {
+  n as mergeRefs
+};
+//# sourceMappingURL=mergeRefs.js.map

package/dist/primitives/mergeRefs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mergeRefs.js","sources":["../../src/primitives/mergeRefs.ts"],"sourcesContent":["/**\n * Solid `ref` props are always compiled to callbacks (or `undefined`), so a\n * forwarded `props.ref` plus a local `let el` can both be satisfied by calling\n * each function ref. Replaces React's useForkRef/setRef.\n *\n * Usage: `<div ref={mergeRefs(props.ref, (el) => (local = el))} />`\n */\nexport type RefCallback<T> = (el: T) => void;\nexport type Ref<T> = RefCallback<T> | T | undefined;\n\nexport function mergeRefs<T>(...refs: Array<Ref<T>>): RefCallback<T> {\n  return (el: T) => {\n    for (const ref of refs) {\n      if (typeof ref === \"function\") {\n        (ref as RefCallback<T>)(el);\n      }\n    }\n  };\n}\n"],"names":["mergeRefs","refs","el","ref"],"mappings":"AAUO,SAASA,KAAgBC,GAAqC;AACnE,SAAO,CAACC,MAAU;AAChB,eAAWC,KAAOF;AAChB,MAAI,OAAOE,KAAQ,cAChBA,EAAuBD,CAAE;AAAA,EAGhC;AACF;"}

package/dist/utils/animate.d.ts

@@ -0,0 +1,10 @@
+interface AnimateOptions {
+    ease?: (time: number) => number;
+    duration?: number;
+}
+/**
+ * rAF-based numeric property tween (used for smooth tab scrolling). Returns a
+ * cancel function. Narrowed to scroll properties — the only use sites.
+ */
+export declare function animate(element: HTMLElement, property: "scrollLeft" | "scrollTop", to: number, options?: AnimateOptions, cb?: (arg: null | Error) => void): () => void;
+export {};

package/dist/utils/animate.js

@@ -0,0 +1,28 @@
+const h = (n) => (1 + Math.sin(Math.PI * n - Math.PI / 2)) / 2;
+function A(n, r, i, o = {}, t = () => {
+}) {
+  const f = o.ease ?? h, d = o.duration ?? 300;
+  let e = null;
+  const a = n[r];
+  let s = !1;
+  const l = () => {
+    s = !0;
+  }, u = (c) => {
+    if (s) {
+      t(new Error("Animation cancelled"));
+      return;
+    }
+    e === null && (e = c);
+    const m = Math.min(1, (c - e) / d);
+    if (n[r] = f(m) * (i - a) + a, m >= 1) {
+      requestAnimationFrame(() => t(null));
+      return;
+    }
+    requestAnimationFrame(u);
+  };
+  return a === i ? (t(new Error("Element already at target position")), l) : (requestAnimationFrame(u), l);
+}
+export {
+  A as animate
+};
+//# sourceMappingURL=animate.js.map

package/dist/utils/animate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animate.js","sources":["../../src/utils/animate.ts"],"sourcesContent":["const easeInOutSin = (time: number): number => (1 + Math.sin(Math.PI * time - Math.PI / 2)) / 2;\n\ninterface AnimateOptions {\n  ease?: (time: number) => number;\n  duration?: number;\n}\n\n/**\n * rAF-based numeric property tween (used for smooth tab scrolling). Returns a\n * cancel function. Narrowed to scroll properties — the only use sites.\n */\nexport function animate(\n  element: HTMLElement,\n  property: \"scrollLeft\" | \"scrollTop\",\n  to: number,\n  options: AnimateOptions = {},\n  cb: (arg: null | Error) => void = () => undefined\n): () => void {\n  const ease = options.ease ?? easeInOutSin;\n  const duration = options.duration ?? 300;\n\n  let start: number | null = null;\n  const from = element[property];\n  let cancelled = false;\n\n  const cancel = (): void => {\n    cancelled = true;\n  };\n\n  const step = (timestamp: number): void => {\n    if (cancelled) {\n      cb(new Error(\"Animation cancelled\"));\n      return;\n    }\n    if (start === null) start = timestamp;\n    const time = Math.min(1, (timestamp - start) / duration);\n    element[property] = ease(time) * (to - from) + from;\n    if (time >= 1) {\n      requestAnimationFrame(() => cb(null));\n      return;\n    }\n    requestAnimationFrame(step);\n  };\n\n  if (from === to) {\n    cb(new Error(\"Element already at target position\"));\n    return cancel;\n  }\n\n  requestAnimationFrame(step);\n  return cancel;\n}\n"],"names":["easeInOutSin","time","animate","element","property","to","options","cb","ease","duration","start","from","cancelled","cancel","step","timestamp"],"mappings":"AAAA,MAAMA,IAAe,CAACC,OAA0B,IAAI,KAAK,IAAI,KAAK,KAAKA,IAAO,KAAK,KAAK,CAAC,KAAK;AAWvF,SAASC,EACdC,GACAC,GACAC,GACAC,IAA0B,IAC1BC,IAAkC,MAAA;AAAA,GACtB;AACZ,QAAMC,IAAOF,EAAQ,QAAQN,GACvBS,IAAWH,EAAQ,YAAY;AAErC,MAAII,IAAuB;AAC3B,QAAMC,IAAOR,EAAQC,CAAQ;AAC7B,MAAIQ,IAAY;AAEhB,QAAMC,IAAS,MAAY;AACzB,IAAAD,IAAY;AAAA,EACd,GAEME,IAAO,CAACC,MAA4B;AACxC,QAAIH,GAAW;AACb,MAAAL,EAAG,IAAI,MAAM,qBAAqB,CAAC;AACnC;AAAA,IACF;AACA,IAAIG,MAAU,SAAMA,IAAQK;AAC5B,UAAMd,IAAO,KAAK,IAAI,IAAIc,IAAYL,KAASD,CAAQ;AAEvD,QADAN,EAAQC,CAAQ,IAAII,EAAKP,CAAI,KAAKI,IAAKM,KAAQA,GAC3CV,KAAQ,GAAG;AACb,4BAAsB,MAAMM,EAAG,IAAI,CAAC;AACpC;AAAA,IACF;AACA,0BAAsBO,CAAI;AAAA,EAC5B;AAEA,SAAIH,MAASN,KACXE,EAAG,IAAI,MAAM,oCAAoC,CAAC,GAC3CM,MAGT,sBAAsBC,CAAI,GACnBD;AACT;"}

package/dist/utils/debounce.d.ts

@@ -0,0 +1,5 @@
+export interface DebouncedFunction<A extends unknown[]> {
+    (...args: A): void;
+    cancel(): void;
+}
+export declare function debounce<A extends unknown[]>(fn: (...args: A) => void, wait: number): DebouncedFunction<A>;

package/dist/utils/debounce.js

@@ -0,0 +1,15 @@
+function d(i, t) {
+  let e;
+  const o = (...c) => {
+    e !== void 0 && clearTimeout(e), e = setTimeout(() => {
+      e = void 0, i(...c);
+    }, t);
+  };
+  return o.cancel = () => {
+    e !== void 0 && (clearTimeout(e), e = void 0);
+  }, o;
+}
+export {
+  d as debounce
+};
+//# sourceMappingURL=debounce.js.map

package/dist/utils/debounce.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"debounce.js","sources":["../../src/utils/debounce.ts"],"sourcesContent":["export interface DebouncedFunction<A extends unknown[]> {\n  (...args: A): void;\n  cancel(): void;\n}\n\nexport function debounce<A extends unknown[]>(fn: (...args: A) => void, wait: number): DebouncedFunction<A> {\n  let timer: ReturnType<typeof setTimeout> | undefined;\n\n  const debounced = (...args: A): void => {\n    if (timer !== undefined) {\n      clearTimeout(timer);\n    }\n    timer = setTimeout(() => {\n      timer = undefined;\n      fn(...args);\n    }, wait);\n  };\n\n  debounced.cancel = (): void => {\n    if (timer !== undefined) {\n      clearTimeout(timer);\n      timer = undefined;\n    }\n  };\n\n  return debounced;\n}\n"],"names":["debounce","fn","wait","timer","debounced","args"],"mappings":"AAKO,SAASA,EAA8BC,GAA0BC,GAAoC;AAC1G,MAAIC;AAEJ,QAAMC,IAAY,IAAIC,MAAkB;AACtC,IAAIF,MAAU,UACZ,aAAaA,CAAK,GAEpBA,IAAQ,WAAW,MAAM;AACvB,MAAAA,IAAQ,QACRF,EAAG,GAAGI,CAAI;AAAA,IACZ,GAAGH,CAAI;AAAA,EACT;AAEA,SAAAE,EAAU,SAAS,MAAY;AAC7B,IAAID,MAAU,WACZ,aAAaA,CAAK,GAClBA,IAAQ;AAAA,EAEZ,GAEOC;AACT;"}

package/dist/utils/floating.d.ts

@@ -0,0 +1,9 @@
+import { type Middleware, type Placement as FloatingUiPlacement } from "@floating-ui/dom";
+export type Placement = FloatingUiPlacement | "auto" | "auto-start" | "auto-end";
+export declare const placements: Placement[];
+export interface ResolvedPlacement {
+    placement?: FloatingUiPlacement;
+    autoMiddleware?: Middleware;
+}
+export declare function resolvePlacement(placement: Placement): ResolvedPlacement;
+export declare function buildFloatingMiddleware(resolved: ResolvedPlacement, custom?: Middleware[]): Middleware[];

package/dist/utils/floating.js

@@ -0,0 +1,31 @@
+import { flip as r, shift as n, offset as e, autoPlacement as i } from "@floating-ui/dom";
+const s = [
+  "auto",
+  "auto-start",
+  "auto-end",
+  "top",
+  "top-start",
+  "top-end",
+  "bottom",
+  "bottom-start",
+  "bottom-end",
+  "right",
+  "right-start",
+  "right-end",
+  "left",
+  "left-start",
+  "left-end"
+];
+function f(t) {
+  return t === "auto" || t === "auto-start" || t === "auto-end" ? { autoMiddleware: i({ alignment: t === "auto-start" ? "start" : t === "auto-end" ? "end" : null }) } : { placement: t };
+}
+const d = 4, a = 8;
+function l(t, o) {
+  return o?.length ? [...o, r(), n({ padding: a })] : t.autoMiddleware ? [e(d), n({ padding: a }), t.autoMiddleware] : [e(d), r(), n({ padding: a })];
+}
+export {
+  l as buildFloatingMiddleware,
+  s as placements,
+  f as resolvePlacement
+};
+//# sourceMappingURL=floating.js.map

package/dist/utils/floating.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"floating.js","sources":["../../src/utils/floating.ts"],"sourcesContent":["import { autoPlacement, flip, type Middleware, offset, type Placement as FloatingUiPlacement, shift } from \"@floating-ui/dom\";\n\nexport type Placement = FloatingUiPlacement | \"auto\" | \"auto-start\" | \"auto-end\";\n\nexport const placements: Placement[] = [\n  \"auto\",\n  \"auto-start\",\n  \"auto-end\",\n  \"top\",\n  \"top-start\",\n  \"top-end\",\n  \"bottom\",\n  \"bottom-start\",\n  \"bottom-end\",\n  \"right\",\n  \"right-start\",\n  \"right-end\",\n  \"left\",\n  \"left-start\",\n  \"left-end\",\n];\n\nexport interface ResolvedPlacement {\n  placement?: FloatingUiPlacement;\n  autoMiddleware?: Middleware;\n}\n\nexport function resolvePlacement(placement: Placement): ResolvedPlacement {\n  if (placement === \"auto\" || placement === \"auto-start\" || placement === \"auto-end\") {\n    const alignment = placement === \"auto-start\" ? \"start\" : placement === \"auto-end\" ? \"end\" : null;\n    return { autoMiddleware: autoPlacement({ alignment }) };\n  }\n  return { placement };\n}\n\nconst FLOATING_OFFSET_PX = 4;\nconst FLOATING_SHIFT_PADDING_PX = 8;\n\nexport function buildFloatingMiddleware(resolved: ResolvedPlacement, custom?: Middleware[]): Middleware[] {\n  if (custom?.length) {\n    return [...custom, flip(), shift({ padding: FLOATING_SHIFT_PADDING_PX })];\n  }\n  if (resolved.autoMiddleware) {\n    return [offset(FLOATING_OFFSET_PX), shift({ padding: FLOATING_SHIFT_PADDING_PX }), resolved.autoMiddleware];\n  }\n  return [offset(FLOATING_OFFSET_PX), flip(), shift({ padding: FLOATING_SHIFT_PADDING_PX })];\n}\n"],"names":["placements","resolvePlacement","placement","autoPlacement","FLOATING_OFFSET_PX","FLOATING_SHIFT_PADDING_PX","buildFloatingMiddleware","resolved","custom","flip","shift","offset"],"mappings":";AAIO,MAAMA,IAA0B;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAOO,SAASC,EAAiBC,GAAyC;AACxE,SAAIA,MAAc,UAAUA,MAAc,gBAAgBA,MAAc,aAE/D,EAAE,gBAAgBC,EAAc,EAAE,WADvBD,MAAc,eAAe,UAAUA,MAAc,aAAa,QAAQ,KACnD,CAAW,EAAA,IAE/C,EAAE,WAAAA,EAAA;AACX;AAEA,MAAME,IAAqB,GACrBC,IAA4B;AAE3B,SAASC,EAAwBC,GAA6BC,GAAqC;AACxG,SAAIA,GAAQ,SACH,CAAC,GAAGA,GAAQC,EAAA,GAAQC,EAAM,EAAE,SAASL,EAAA,CAA2B,CAAC,IAEtEE,EAAS,iBACJ,CAACI,EAAOP,CAAkB,GAAGM,EAAM,EAAE,SAASL,EAAA,CAA2B,GAAGE,EAAS,cAAc,IAErG,CAACI,EAAOP,CAAkB,GAAGK,EAAA,GAAQC,EAAM,EAAE,SAASL,EAAA,CAA2B,CAAC;AAC3F;"}

package/dist/utils/throttle.d.ts

@@ -0,0 +1,5 @@
+export interface ThrottledFunction<A extends unknown[]> {
+    (...args: A): void;
+    cancel(): void;
+}
+export declare function throttle<A extends unknown[]>(fn: (...args: A) => void, wait: number): ThrottledFunction<A>;

package/dist/utils/throttle.js

@@ -0,0 +1,18 @@
+function s(v, c) {
+  let n = 0, t, o;
+  const d = (e, i) => {
+    n = e, v(...i);
+  }, r = (...e) => {
+    const i = Date.now(), l = c - (i - n);
+    o = e, l <= 0 || l > c ? (t !== void 0 && (clearTimeout(t), t = void 0), d(i, e)) : t === void 0 && (t = setTimeout(() => {
+      t = void 0, o !== void 0 && d(Date.now(), o);
+    }, l));
+  };
+  return r.cancel = () => {
+    t !== void 0 && (clearTimeout(t), t = void 0), n = 0, o = void 0;
+  }, r;
+}
+export {
+  s as throttle
+};
+//# sourceMappingURL=throttle.js.map

package/dist/utils/throttle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"throttle.js","sources":["../../src/utils/throttle.ts"],"sourcesContent":["export interface ThrottledFunction<A extends unknown[]> {\n  (...args: A): void;\n  cancel(): void;\n}\n\nexport function throttle<A extends unknown[]>(fn: (...args: A) => void, wait: number): ThrottledFunction<A> {\n  let lastCall = 0;\n  let timer: ReturnType<typeof setTimeout> | undefined;\n  let lastArgs: A | undefined;\n\n  const invoke = (time: number, args: A): void => {\n    lastCall = time;\n    fn(...args);\n  };\n\n  const throttled = (...args: A): void => {\n    const now = Date.now();\n    const remaining = wait - (now - lastCall);\n    lastArgs = args;\n\n    if (remaining <= 0 || remaining > wait) {\n      if (timer !== undefined) {\n        clearTimeout(timer);\n        timer = undefined;\n      }\n      invoke(now, args);\n    } else if (timer === undefined) {\n      timer = setTimeout(() => {\n        timer = undefined;\n        if (lastArgs !== undefined) {\n          invoke(Date.now(), lastArgs);\n        }\n      }, remaining);\n    }\n  };\n\n  throttled.cancel = (): void => {\n    if (timer !== undefined) {\n      clearTimeout(timer);\n      timer = undefined;\n    }\n    lastCall = 0;\n    lastArgs = undefined;\n  };\n\n  return throttled;\n}\n"],"names":["throttle","fn","wait","lastCall","timer","lastArgs","invoke","time","args","throttled","now","remaining"],"mappings":"AAKO,SAASA,EAA8BC,GAA0BC,GAAoC;AAC1G,MAAIC,IAAW,GACXC,GACAC;AAEJ,QAAMC,IAAS,CAACC,GAAcC,MAAkB;AAC9C,IAAAL,IAAWI,GACXN,EAAG,GAAGO,CAAI;AAAA,EACZ,GAEMC,IAAY,IAAID,MAAkB;AACtC,UAAME,IAAM,KAAK,IAAA,GACXC,IAAYT,KAAQQ,IAAMP;AAChC,IAAAE,IAAWG,GAEPG,KAAa,KAAKA,IAAYT,KAC5BE,MAAU,WACZ,aAAaA,CAAK,GAClBA,IAAQ,SAEVE,EAAOI,GAAKF,CAAI,KACPJ,MAAU,WACnBA,IAAQ,WAAW,MAAM;AACvB,MAAAA,IAAQ,QACJC,MAAa,UACfC,EAAO,KAAK,IAAA,GAAOD,CAAQ;AAAA,IAE/B,GAAGM,CAAS;AAAA,EAEhB;AAEA,SAAAF,EAAU,SAAS,MAAY;AAC7B,IAAIL,MAAU,WACZ,aAAaA,CAAK,GAClBA,IAAQ,SAEVD,IAAW,GACXE,IAAW;AAAA,EACb,GAEOI;AACT;"}

package/package.json

@@ -0,0 +1,87 @@
+{
+  "name": "@smwb/ui-solid",
+  "version": "0.1.0",
+  "description": "SolidJS port of summer-ui: strict, tree-shakeable Material-style component library sharing the @smwb/ui-styles design system.",
+  "license": "MIT",
+  "type": "module",
+  "engines": {
+    "node": ">=20"
+  },
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "sideEffects": [
+    "**/*.css",
+    "**/*.less"
+  ],
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./headless": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/headless/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "npm run build:esm && npm run build:headless && npm run build:types",
+    "build:esm": "vite build",
+    "build:headless": "vite build --config vite.config.headless.ts",
+    "build:types": "tsc -p configs/ts/tsconfig.prod.json --emitDeclarationOnly --declaration --outDir dist",
+    "typecheck": "tsc -p configs/ts/tsconfig.full.json --noEmit",
+    "test": "npm run lint && npm run jest",
+    "jest": "vitest run",
+    "test:watch": "vitest",
+    "test:storybook": "test-storybook --url http://127.0.0.1:6006",
+    "lint": "eslint . --max-warnings=0",
+    "prettier:check": "prettier --check .",
+    "prettier:fix": "prettier --write .",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": {
+    "@floating-ui/dom": "^1.7.0",
+    "clsx": "^2.1.1",
+    "zod": "^4.4.3"
+  },
+  "peerDependencies": {
+    "solid-js": ">=1.8"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.0",
+    "@smwb/ui-styles": "^1.0.0",
+    "@storybook/addon-docs": "^10.4.0",
+    "@storybook/addon-links": "^10.4.0",
+    "@storybook/test-runner": "^0.24.4",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/user-event": "^14.6.1",
+    "@solidjs/testing-library": "^0.8.10",
+    "@types/node": "^22.19.19",
+    "concurrently": "^9.2.1",
+    "eslint": "^9.39.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-solid": "^0.14.5",
+    "eslint-plugin-storybook": "^10.4.0",
+    "glob": "^13.0.6",
+    "globals": "^17.6.0",
+    "http-server": "^14.1.1",
+    "jsdom": "^26.1.0",
+    "less": "^4.6.4",
+    "playwright": "^1.60.0",
+    "prettier": "^3.8.3",
+    "solid-js": "^1.9.13",
+    "storybook": "^10.4.0",
+    "storybook-solidjs-vite": "^10.1.1",
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.59.3",
+    "vite": "^6.4.2",
+    "vite-plugin-lib-inject-css": "^2.2.2",
+    "vite-plugin-solid": "^2.11.12",
+    "vitest": "^2.1.9",
+    "wait-on": "^8.0.5"
+  }
+}