@smwb/ui-solid 0.9.0 → 0.11.0

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/primitives/createHoverPopover.d.ts

@@ -0,0 +1,73 @@
+import { type Accessor, type JSX } from "solid-js";
+import type { Middleware } from "@floating-ui/dom";
+import { type Placement } from "../utils/floating";
+export interface CreateHoverPopoverOptions {
+    /** Placement of the popover relative to its anchor. Default `"bottom-start"`. */
+    placement?: Placement;
+    /** Offset (px) applied on both axes between the anchor and the popover. Default `4`. */
+    offsetPx?: number;
+    /** Delay (ms) before opening after pointer enter. Default `0`. */
+    openDelay?: number;
+    /** Delay (ms) before closing after pointer leave. Default `0`. */
+    closeDelay?: number;
+    /** Extra floating-ui middleware appended after the smwb defaults. */
+    middleware?: Middleware[];
+}
+/** A pointer position in viewport (client) coordinates. */
+export interface HoverPopoverPoint {
+    x: number;
+    y: number;
+}
+export interface HoverPopoverReferenceProps {
+    onPointerEnter: (event: PointerEvent) => void;
+    onPointerMove: (event: PointerEvent) => void;
+    onPointerLeave: (event: PointerEvent) => void;
+}
+export interface HoverPopoverFloatingProps {
+    ref: (node: HTMLElement) => void;
+    style: JSX.CSSProperties;
+    onPointerEnter: () => void;
+    onPointerLeave: () => void;
+}
+export interface HoverPopoverState {
+    /** Whether the popover is currently open. */
+    open: Accessor<boolean>;
+    /**
+     * Pointer handlers for the trigger element(s). Spread on a single anchor, or on EVERY
+     * row of a list/table to share one popover across many triggers. By default the popover
+     * is anchored to the cursor position frozen when it opens. Pass your own handlers to
+     * compose them (e.g. to mark which row is active).
+     */
+    getReferenceProps: (userHandlers?: Partial<HoverPopoverReferenceProps>) => HoverPopoverReferenceProps;
+    /** Props for the single floating element; keeps it open while it is hovered. */
+    getFloatingProps: (userProps?: {
+        style?: JSX.CSSProperties;
+    }) => HoverPopoverFloatingProps;
+    /** Anchor the popover to a real element instead of the cursor (`null` clears it). */
+    setAnchorEl: (element: Element | null) => void;
+    /** Anchor the popover to an explicit point, e.g. an external cursor source. */
+    setVirtualAnchor: (point: HoverPopoverPoint) => void;
+    /** Open immediately, ignoring `openDelay`. */
+    openNow: () => void;
+    /** Open after `openDelay`. */
+    scheduleOpen: () => void;
+    /** Close after `closeDelay`. */
+    scheduleClose: () => void;
+    /** Close immediately. */
+    close: () => void;
+}
+/**
+ * Headless hover-popover positioning — the Solid twin of ui-react's `useHoverPopover`.
+ *
+ * Wraps {@link createFloating} with the smwb placement / offset / flip / shift conventions
+ * but imposes NO DOM structure: spread `getReferenceProps()` on any trigger (including a
+ * `<tr>`, which the wrapper-based `<Tooltip>` cannot do) and `getFloatingProps()` on a
+ * single floating element you render yourself.
+ *
+ * The default anchor is the cursor point frozen when the popover opens (a floating-ui
+ * virtual element), so ONE instance can serve a whole table/list — call
+ * `getReferenceProps()` on every row and render one shared popover instead of mounting one
+ * floating engine per row. Use `setAnchorEl` to anchor to a real element instead.
+ */
+export declare function createHoverPopover(options?: CreateHoverPopoverOptions): HoverPopoverState;
+export default createHoverPopover;

package/dist/primitives/createHoverPopover.js

@@ -0,0 +1,80 @@
+import { createSignal as F, createMemo as y, onCleanup as D, createEffect as x } from "solid-js";
+import { offset as v, flip as L, shift as w } from "@floating-ui/dom";
+import { resolvePlacement as M } from "../utils/floating.js";
+import { createFloating as R } from "./createFloating.js";
+const _ = "bottom-start", C = 4, S = 8, X = ({ x: t, y: l }) => ({ x: t, y: l, top: l, left: t, right: t, bottom: l, width: 0, height: 0 });
+function G(t = {}) {
+  const l = t.offsetPx ?? C, P = t.openDelay ?? 0, g = t.closeDelay ?? 0, [h, n] = F(!1);
+  let f = { x: 0, y: 0 }, u = { x: 0, y: 0 }, c = null, s = null, i = null;
+  const d = y(() => M(t.placement ?? _)), a = R({
+    placement: () => d().placement,
+    middleware: () => [
+      v({ mainAxis: l, crossAxis: l }),
+      d().autoMiddleware ?? L(),
+      w({ padding: S }),
+      ...t.middleware ?? []
+    ]
+  }), T = { getBoundingClientRect: () => X(u) }, r = () => {
+    s !== null && (clearTimeout(s), s = null), i !== null && (clearTimeout(i), i = null);
+  };
+  D(r), x(() => {
+    h() && (a.setReference(c ?? T), a.update());
+  });
+  const m = () => {
+    c === null && (u = f);
+  }, A = () => {
+    r(), m(), n(!0);
+  }, E = () => {
+    if (r(), P <= 0) {
+      m(), n(!0);
+      return;
+    }
+    s = setTimeout(() => {
+      m(), n(!0);
+    }, P);
+  }, p = () => {
+    if (r(), g <= 0) {
+      n(!1);
+      return;
+    }
+    i = setTimeout(() => n(!1), g);
+  };
+  return {
+    open: h,
+    getReferenceProps: (o) => ({
+      onPointerEnter: (e) => {
+        o?.onPointerEnter?.(e), f = { x: e.clientX, y: e.clientY }, E();
+      },
+      onPointerMove: (e) => {
+        o?.onPointerMove?.(e), f = { x: e.clientX, y: e.clientY };
+      },
+      onPointerLeave: (e) => {
+        o?.onPointerLeave?.(e), p();
+      }
+    }),
+    getFloatingProps: (o) => ({
+      ref: (e) => a.setFloating(e),
+      style: { ...a.floatingStyles(), ...o?.style ?? {} },
+      onPointerEnter: () => {
+        r(), n(!0);
+      },
+      onPointerLeave: p
+    }),
+    setAnchorEl: (o) => {
+      c = o;
+    },
+    setVirtualAnchor: (o) => {
+      c = null, u = o;
+    },
+    openNow: A,
+    scheduleOpen: E,
+    scheduleClose: p,
+    close: () => {
+      r(), n(!1);
+    }
+  };
+}
+export {
+  G as createHoverPopover
+};
+//# sourceMappingURL=createHoverPopover.js.map

package/dist/primitives/createHoverPopover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createHoverPopover.js","sources":["../../src/primitives/createHoverPopover.ts"],"sourcesContent":["import { type Accessor, type JSX, createEffect, createMemo, createSignal, onCleanup } from \"solid-js\";\nimport { flip, offset, shift } from \"@floating-ui/dom\";\nimport type { Middleware, VirtualElement } from \"@floating-ui/dom\";\nimport { type Placement, resolvePlacement } from \"../utils/floating\";\nimport { createFloating } from \"./createFloating\";\n\nexport interface CreateHoverPopoverOptions {\n  /** Placement of the popover relative to its anchor. Default `\"bottom-start\"`. */\n  placement?: Placement;\n  /** Offset (px) applied on both axes between the anchor and the popover. Default `4`. */\n  offsetPx?: number;\n  /** Delay (ms) before opening after pointer enter. Default `0`. */\n  openDelay?: number;\n  /** Delay (ms) before closing after pointer leave. Default `0`. */\n  closeDelay?: number;\n  /** Extra floating-ui middleware appended after the smwb defaults. */\n  middleware?: Middleware[];\n}\n\n/** A pointer position in viewport (client) coordinates. */\nexport interface HoverPopoverPoint {\n  x: number;\n  y: number;\n}\n\nexport interface HoverPopoverReferenceProps {\n  onPointerEnter: (event: PointerEvent) => void;\n  onPointerMove: (event: PointerEvent) => void;\n  onPointerLeave: (event: PointerEvent) => void;\n}\n\nexport interface HoverPopoverFloatingProps {\n  ref: (node: HTMLElement) => void;\n  style: JSX.CSSProperties;\n  onPointerEnter: () => void;\n  onPointerLeave: () => void;\n}\n\nexport interface HoverPopoverState {\n  /** Whether the popover is currently open. */\n  open: Accessor<boolean>;\n  /**\n   * Pointer handlers for the trigger element(s). Spread on a single anchor, or on EVERY\n   * row of a list/table to share one popover across many triggers. By default the popover\n   * is anchored to the cursor position frozen when it opens. Pass your own handlers to\n   * compose them (e.g. to mark which row is active).\n   */\n  getReferenceProps: (userHandlers?: Partial<HoverPopoverReferenceProps>) => HoverPopoverReferenceProps;\n  /** Props for the single floating element; keeps it open while it is hovered. */\n  getFloatingProps: (userProps?: { style?: JSX.CSSProperties }) => HoverPopoverFloatingProps;\n  /** Anchor the popover to a real element instead of the cursor (`null` clears it). */\n  setAnchorEl: (element: Element | null) => void;\n  /** Anchor the popover to an explicit point, e.g. an external cursor source. */\n  setVirtualAnchor: (point: HoverPopoverPoint) => void;\n  /** Open immediately, ignoring `openDelay`. */\n  openNow: () => void;\n  /** Open after `openDelay`. */\n  scheduleOpen: () => void;\n  /** Close after `closeDelay`. */\n  scheduleClose: () => void;\n  /** Close immediately. */\n  close: () => void;\n}\n\nconst DEFAULT_PLACEMENT: Placement = \"bottom-start\";\nconst DEFAULT_OFFSET_PX = 4;\nconst SHIFT_PADDING_PX = 8;\n\nconst rectFromPoint = ({ x, y }: HoverPopoverPoint): DOMRect =>\n  ({ x, y, top: y, left: x, right: x, bottom: y, width: 0, height: 0 }) as DOMRect;\n\n/**\n * Headless hover-popover positioning — the Solid twin of ui-react's `useHoverPopover`.\n *\n * Wraps {@link createFloating} with the smwb placement / offset / flip / shift conventions\n * but imposes NO DOM structure: spread `getReferenceProps()` on any trigger (including a\n * `<tr>`, which the wrapper-based `<Tooltip>` cannot do) and `getFloatingProps()` on a\n * single floating element you render yourself.\n *\n * The default anchor is the cursor point frozen when the popover opens (a floating-ui\n * virtual element), so ONE instance can serve a whole table/list — call\n * `getReferenceProps()` on every row and render one shared popover instead of mounting one\n * floating engine per row. Use `setAnchorEl` to anchor to a real element instead.\n */\nexport function createHoverPopover(options: CreateHoverPopoverOptions = {}): HoverPopoverState {\n  const offsetPx = options.offsetPx ?? DEFAULT_OFFSET_PX;\n  const openDelay = options.openDelay ?? 0;\n  const closeDelay = options.closeDelay ?? 0;\n\n  const [open, setOpen] = createSignal(false);\n\n  let cursor: HoverPopoverPoint = { x: 0, y: 0 };\n  let anchor: HoverPopoverPoint = { x: 0, y: 0 };\n  let anchorEl: Element | null = null;\n  let openTimer: ReturnType<typeof setTimeout> | null = null;\n  let closeTimer: ReturnType<typeof setTimeout> | null = null;\n\n  const resolved = createMemo(() => resolvePlacement(options.placement ?? DEFAULT_PLACEMENT));\n\n  const floating = createFloating({\n    placement: () => resolved().placement,\n    middleware: () => [\n      offset({ mainAxis: offsetPx, crossAxis: offsetPx }),\n      resolved().autoMiddleware ?? flip(),\n      shift({ padding: SHIFT_PADDING_PX }),\n      ...(options.middleware ?? []),\n    ],\n  });\n\n  // The virtual reference reads `anchor` LAZILY, so freezing the cursor is just a field\n  // write — no need to rebuild the reference on every pointer move.\n  const virtualReference: VirtualElement = { getBoundingClientRect: () => rectFromPoint(anchor) };\n\n  const clearTimers = (): void => {\n    if (openTimer !== null) {\n      clearTimeout(openTimer);\n      openTimer = null;\n    }\n    if (closeTimer !== null) {\n      clearTimeout(closeTimer);\n      closeTimer = null;\n    }\n  };\n\n  onCleanup(clearTimers);\n\n  // Apply the active anchor (element or frozen cursor) whenever the popover opens;\n  // createFloating's autoUpdate keeps it positioned while the floating element is mounted.\n  createEffect(() => {\n    if (!open()) return;\n    floating.setReference(anchorEl ?? virtualReference);\n    floating.update();\n  });\n\n  const freezeAnchor = (): void => {\n    if (anchorEl === null) anchor = cursor;\n  };\n\n  const openNow = (): void => {\n    clearTimers();\n    freezeAnchor();\n    setOpen(true);\n  };\n\n  const scheduleOpen = (): void => {\n    clearTimers();\n    if (openDelay <= 0) {\n      freezeAnchor();\n      setOpen(true);\n      return;\n    }\n    openTimer = setTimeout(() => {\n      freezeAnchor();\n      setOpen(true);\n    }, openDelay);\n  };\n\n  const scheduleClose = (): void => {\n    clearTimers();\n    if (closeDelay <= 0) {\n      setOpen(false);\n      return;\n    }\n    closeTimer = setTimeout(() => setOpen(false), closeDelay);\n  };\n\n  const close = (): void => {\n    clearTimers();\n    setOpen(false);\n  };\n\n  const setVirtualAnchor = (point: HoverPopoverPoint): void => {\n    anchorEl = null;\n    anchor = point;\n  };\n\n  const setAnchorEl = (element: Element | null): void => {\n    anchorEl = element;\n  };\n\n  const getReferenceProps = (userHandlers?: Partial<HoverPopoverReferenceProps>): HoverPopoverReferenceProps => ({\n    onPointerEnter: (event) => {\n      userHandlers?.onPointerEnter?.(event);\n      cursor = { x: event.clientX, y: event.clientY };\n      scheduleOpen();\n    },\n    onPointerMove: (event) => {\n      userHandlers?.onPointerMove?.(event);\n      cursor = { x: event.clientX, y: event.clientY };\n    },\n    onPointerLeave: (event) => {\n      userHandlers?.onPointerLeave?.(event);\n      scheduleClose();\n    },\n  });\n\n  const getFloatingProps = (userProps?: { style?: JSX.CSSProperties }): HoverPopoverFloatingProps => ({\n    ref: (node) => floating.setFloating(node),\n    style: { ...floating.floatingStyles(), ...(userProps?.style ?? {}) },\n    onPointerEnter: () => {\n      clearTimers();\n      setOpen(true);\n    },\n    onPointerLeave: scheduleClose,\n  });\n\n  return {\n    open,\n    getReferenceProps,\n    getFloatingProps,\n    setAnchorEl,\n    setVirtualAnchor,\n    openNow,\n    scheduleOpen,\n    scheduleClose,\n    close,\n  };\n}\n\nexport default createHoverPopover;\n"],"names":["DEFAULT_PLACEMENT","DEFAULT_OFFSET_PX","SHIFT_PADDING_PX","rectFromPoint","x","y","createHoverPopover","options","offsetPx","openDelay","closeDelay","open","setOpen","createSignal","cursor","anchor","anchorEl","openTimer","closeTimer","resolved","createMemo","resolvePlacement","floating","createFloating","offset","flip","shift","virtualReference","clearTimers","onCleanup","createEffect","freezeAnchor","openNow","scheduleOpen","scheduleClose","userHandlers","event","userProps","node","element","point"],"mappings":";;;;AAgEA,MAAMA,IAA+B,gBAC/BC,IAAoB,GACpBC,IAAmB,GAEnBC,IAAgB,CAAC,EAAE,GAAAC,GAAG,GAAAC,SACzB,EAAE,GAAAD,GAAG,GAAAC,GAAG,KAAKA,GAAG,MAAMD,GAAG,OAAOA,GAAG,QAAQC,GAAG,OAAO,GAAG,QAAQ;AAe5D,SAASC,EAAmBC,IAAqC,IAAuB;AAC7F,QAAMC,IAAWD,EAAQ,YAAYN,GAC/BQ,IAAYF,EAAQ,aAAa,GACjCG,IAAaH,EAAQ,cAAc,GAEnC,CAACI,GAAMC,CAAO,IAAIC,EAAa,EAAK;AAE1C,MAAIC,IAA4B,EAAE,GAAG,GAAG,GAAG,EAAA,GACvCC,IAA4B,EAAE,GAAG,GAAG,GAAG,EAAA,GACvCC,IAA2B,MAC3BC,IAAkD,MAClDC,IAAmD;AAEvD,QAAMC,IAAWC,EAAW,MAAMC,EAAiBd,EAAQ,aAAaP,CAAiB,CAAC,GAEpFsB,IAAWC,EAAe;AAAA,IAC9B,WAAW,MAAMJ,EAAA,EAAW;AAAA,IAC5B,YAAY,MAAM;AAAA,MAChBK,EAAO,EAAE,UAAUhB,GAAU,WAAWA,GAAU;AAAA,MAClDW,EAAA,EAAW,kBAAkBM,EAAA;AAAA,MAC7BC,EAAM,EAAE,SAASxB,GAAkB;AAAA,MACnC,GAAIK,EAAQ,cAAc,CAAA;AAAA,IAAC;AAAA,EAC7B,CACD,GAIKoB,IAAmC,EAAE,uBAAuB,MAAMxB,EAAcY,CAAM,EAAA,GAEtFa,IAAc,MAAY;AAC9B,IAAIX,MAAc,SAChB,aAAaA,CAAS,GACtBA,IAAY,OAEVC,MAAe,SACjB,aAAaA,CAAU,GACvBA,IAAa;AAAA,EAEjB;AAEA,EAAAW,EAAUD,CAAW,GAIrBE,EAAa,MAAM;AACjB,IAAKnB,QACLW,EAAS,aAAaN,KAAYW,CAAgB,GAClDL,EAAS,OAAA;AAAA,EACX,CAAC;AAED,QAAMS,IAAe,MAAY;AAC/B,IAAIf,MAAa,SAAMD,IAASD;AAAA,EAClC,GAEMkB,IAAU,MAAY;AAC1B,IAAAJ,EAAA,GACAG,EAAA,GACAnB,EAAQ,EAAI;AAAA,EACd,GAEMqB,IAAe,MAAY;AAE/B,QADAL,EAAA,GACInB,KAAa,GAAG;AAClB,MAAAsB,EAAA,GACAnB,EAAQ,EAAI;AACZ;AAAA,IACF;AACA,IAAAK,IAAY,WAAW,MAAM;AAC3B,MAAAc,EAAA,GACAnB,EAAQ,EAAI;AAAA,IACd,GAAGH,CAAS;AAAA,EACd,GAEMyB,IAAgB,MAAY;AAEhC,QADAN,EAAA,GACIlB,KAAc,GAAG;AACnB,MAAAE,EAAQ,EAAK;AACb;AAAA,IACF;AACA,IAAAM,IAAa,WAAW,MAAMN,EAAQ,EAAK,GAAGF,CAAU;AAAA,EAC1D;AA0CA,SAAO;AAAA,IACL,MAAAC;AAAA,IACA,mBA5BwB,CAACwB,OAAoF;AAAA,MAC7G,gBAAgB,CAACC,MAAU;AACzB,QAAAD,GAAc,iBAAiBC,CAAK,GACpCtB,IAAS,EAAE,GAAGsB,EAAM,SAAS,GAAGA,EAAM,QAAA,GACtCH,EAAA;AAAA,MACF;AAAA,MACA,eAAe,CAACG,MAAU;AACxB,QAAAD,GAAc,gBAAgBC,CAAK,GACnCtB,IAAS,EAAE,GAAGsB,EAAM,SAAS,GAAGA,EAAM,QAAA;AAAA,MACxC;AAAA,MACA,gBAAgB,CAACA,MAAU;AACzB,QAAAD,GAAc,iBAAiBC,CAAK,GACpCF,EAAA;AAAA,MACF;AAAA,IAAA;AAAA,IAgBA,kBAbuB,CAACG,OAA0E;AAAA,MAClG,KAAK,CAACC,MAAShB,EAAS,YAAYgB,CAAI;AAAA,MACxC,OAAO,EAAE,GAAGhB,EAAS,eAAA,GAAkB,GAAIe,GAAW,SAAS,GAAC;AAAA,MAChE,gBAAgB,MAAM;AACpB,QAAAT,EAAA,GACAhB,EAAQ,EAAI;AAAA,MACd;AAAA,MACA,gBAAgBsB;AAAA,IAAA;AAAA,IAOhB,aAlCkB,CAACK,MAAkC;AACrD,MAAAvB,IAAWuB;AAAA,IACb;AAAA,IAiCE,kBAxCuB,CAACC,MAAmC;AAC3D,MAAAxB,IAAW,MACXD,IAASyB;AAAA,IACX;AAAA,IAsCE,SAAAR;AAAA,IACA,cAAAC;AAAA,IACA,eAAAC;AAAA,IACA,OAjDY,MAAY;AACxB,MAAAN,EAAA,GACAhB,EAAQ,EAAK;AAAA,IACf;AAAA,EA8CE;AAEJ;"}

package/dist/primitives/createRovingTabIndex.d.ts

@@ -0,0 +1,26 @@
+import type { JSX } from "solid-js";
+export interface CreateRovingTabIndexOptions {
+    /** Number of focusable items. */
+    count: number | (() => number);
+    /** Current active index. */
+    activeIndex: number | (() => 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) — the Solid
+ * twin of ui-react's `useRovingTabIndex`. Returns an `onKeyDown` handler implementing
+ * Arrow/Home/End with optional looping and disabled-skipping. The consumer owns focus and
+ * activation.
+ *
+ * `count`/`activeIndex` accept an accessor so the handler — attached once — always reads
+ * the live value instead of the one captured when it was created.
+ */
+export declare function createRovingTabIndex(options: CreateRovingTabIndexOptions): JSX.EventHandler<HTMLElement, KeyboardEvent>;
+export default createRovingTabIndex;

package/dist/primitives/createRovingTabIndex.js

@@ -0,0 +1,25 @@
+const h = (o) => typeof o == "function" ? o() : o;
+function w(o) {
+  return (e) => {
+    const r = h(o.count);
+    if (r === 0) return;
+    const a = h(o.activeIndex), i = o.orientation ?? "horizontal", d = o.loop ?? !0, l = i === "horizontal" || i === "both", s = i === "vertical" || i === "both", f = l && e.key === "ArrowRight" || s && e.key === "ArrowDown", y = l && e.key === "ArrowLeft" || s && e.key === "ArrowUp";
+    let t = null;
+    if (f ? t = a + 1 : y ? t = a - 1 : e.key === "Home" ? t = 0 : e.key === "End" && (t = r - 1), t === null) return;
+    const u = (n) => d ? (n + r) % r : Math.max(0, Math.min(r - 1, n));
+    t = u(t);
+    const c = o.isDisabled;
+    if (c) {
+      let n = 0;
+      const k = f || e.key === "Home" ? 1 : -1;
+      for (; c(t) && n < r; )
+        t = u(t + k), n += 1;
+      if (c(t)) return;
+    }
+    e.preventDefault(), o.onMove(t);
+  };
+}
+export {
+  w as createRovingTabIndex
+};
+//# sourceMappingURL=createRovingTabIndex.js.map

package/dist/primitives/createRovingTabIndex.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createRovingTabIndex.js","sources":["../../src/primitives/createRovingTabIndex.ts"],"sourcesContent":["import type { JSX } from \"solid-js\";\n\nexport interface CreateRovingTabIndexOptions {\n  /** Number of focusable items. */\n  count: number | (() => number);\n  /** Current active index. */\n  activeIndex: number | (() => 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\nconst read = (value: number | (() => number)): number => (typeof value === \"function\" ? value() : value);\n\n/**\n * Keyboard navigation for composite widgets (tabs, menus, trees, pagination) — the Solid\n * twin of ui-react's `useRovingTabIndex`. Returns an `onKeyDown` handler implementing\n * Arrow/Home/End with optional looping and disabled-skipping. The consumer owns focus and\n * activation.\n *\n * `count`/`activeIndex` accept an accessor so the handler — attached once — always reads\n * the live value instead of the one captured when it was created.\n */\nexport function createRovingTabIndex(\n  options: CreateRovingTabIndexOptions,\n): JSX.EventHandler<HTMLElement, KeyboardEvent> {\n  return (event) => {\n    const count = read(options.count);\n    if (count === 0) return;\n\n    const activeIndex = read(options.activeIndex);\n    const orientation = options.orientation ?? \"horizontal\";\n    const loop = options.loop ?? true;\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) return;\n\n    const clamp = (i: number): number => (loop ? (i + count) % count : Math.max(0, Math.min(count - 1, i)));\n    target = clamp(target);\n\n    const isDisabled = options.isDisabled;\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)) return;\n    }\n\n    event.preventDefault();\n    options.onMove(target);\n  };\n}\n\nexport default createRovingTabIndex;\n"],"names":["read","value","createRovingTabIndex","options","event","count","activeIndex","orientation","loop","horiz","vert","next","prev","target","clamp","i","isDisabled","guard","step"],"mappings":"AAiBA,MAAMA,IAAO,CAACC,MAA4C,OAAOA,KAAU,aAAaA,MAAUA;AAW3F,SAASC,EACdC,GAC8C;AAC9C,SAAO,CAACC,MAAU;AAChB,UAAMC,IAAQL,EAAKG,EAAQ,KAAK;AAChC,QAAIE,MAAU,EAAG;AAEjB,UAAMC,IAAcN,EAAKG,EAAQ,WAAW,GACtCI,IAAcJ,EAAQ,eAAe,cACrCK,IAAOL,EAAQ,QAAQ,IACvBM,IAAQF,MAAgB,gBAAgBA,MAAgB,QACxDG,IAAOH,MAAgB,cAAcA,MAAgB,QACrDI,IAAQF,KAASL,EAAM,QAAQ,gBAAkBM,KAAQN,EAAM,QAAQ,aACvEQ,IAAQH,KAASL,EAAM,QAAQ,eAAiBM,KAAQN,EAAM,QAAQ;AAE5E,QAAIS,IAAwB;AAU5B,QATIF,IACFE,IAASP,IAAc,IACdM,IACTC,IAASP,IAAc,IACdF,EAAM,QAAQ,SACvBS,IAAS,IACAT,EAAM,QAAQ,UACvBS,IAASR,IAAQ,IAEfQ,MAAW,KAAM;AAErB,UAAMC,IAAQ,CAACC,MAAuBP,KAAQO,IAAIV,KAASA,IAAQ,KAAK,IAAI,GAAG,KAAK,IAAIA,IAAQ,GAAGU,CAAC,CAAC;AACrG,IAAAF,IAASC,EAAMD,CAAM;AAErB,UAAMG,IAAab,EAAQ;AAC3B,QAAIa,GAAY;AACd,UAAIC,IAAQ;AACZ,YAAMC,IAAOP,KAAQP,EAAM,QAAQ,SAAS,IAAI;AAChD,aAAOY,EAAWH,CAAM,KAAKI,IAAQZ;AACnC,QAAAQ,IAASC,EAAMD,IAASK,CAAI,GAC5BD,KAAS;AAEX,UAAID,EAAWH,CAAM,EAAG;AAAA,IAC1B;AAEA,IAAAT,EAAM,eAAA,GACND,EAAQ,OAAOU,CAAM;AAAA,EACvB;AACF;"}

package/dist/source/components/layout/floatingWindow/floatingWindow.jsx

@@ -0,0 +1,404 @@
+import "@smwb/ui-styles/less/components/floatingWindow/floatingWindow.entry.less";
+import {
+  For,
+  Show,
+  createEffect,
+  createMemo,
+  createSignal,
+  mergeProps,
+  onCleanup,
+  splitProps
+} from "solid-js";
+import { Portal, isServer } from "solid-js/web";
+import cn from "clsx";
+import { Icon } from "../../base/icon";
+import { createCssTransition } from "../../../primitives/createCssTransition";
+import { createControllableState } from "../../../primitives/createControllableState";
+import { createId } from "../../../primitives/createId";
+import { mergeRefs } from "../../../primitives/mergeRefs";
+const RESIZE_DIRS = {
+  n: { dx: 0, dy: 1, dw: 0, dh: -1 },
+  s: { dx: 0, dy: 0, dw: 0, dh: 1 },
+  e: { dx: 0, dy: 0, dw: 1, dh: 0 },
+  w: { dx: 1, dy: 0, dw: -1, dh: 0 },
+  ne: { dx: 0, dy: 1, dw: 1, dh: -1 },
+  nw: { dx: 1, dy: 1, dw: -1, dh: -1 },
+  se: { dx: 0, dy: 0, dw: 1, dh: 1 },
+  sw: { dx: 1, dy: 0, dw: -1, dh: 1 }
+};
+const RESIZE_ORDER = ["n", "s", "e", "w", "ne", "nw", "se", "sw"];
+const viewportOf = () => typeof window === "undefined" ? { width: 0, height: 0 } : { width: window.innerWidth, height: window.innerHeight };
+function FloatingWindow(props) {
+  const merged = mergeProps(
+    {
+      minWidth: 200,
+      minHeight: 120,
+      keepVisible: 56,
+      moveStep: 24,
+      resizeStep: 24,
+      collapsible: true,
+      movable: true,
+      resizable: true,
+      closeOnEsc: false,
+      defaultPosition: { x: 24, y: 24 },
+      defaultSize: { width: 360, height: 420 },
+      defaultCollapsed: false,
+      moveHandleAriaLabel: "Move window",
+      resizeHandleAriaLabel: "Resize window",
+      closeAriaLabel: "Close window",
+      collapseAriaLabel: "Collapse window",
+      expandAriaLabel: "Expand window"
+    },
+    props
+  );
+  const [local, rest] = splitProps(merged, [
+    "open",
+    "title",
+    "headerActions",
+    "position",
+    "defaultPosition",
+    "onPositionChange",
+    "onMoveEnd",
+    "size",
+    "defaultSize",
+    "onResize",
+    "onResizeEnd",
+    "minWidth",
+    "minHeight",
+    "maxWidth",
+    "maxHeight",
+    "keepVisible",
+    "moveStep",
+    "resizeStep",
+    "zIndex",
+    "onActivate",
+    "collapsed",
+    "defaultCollapsed",
+    "onCollapsedChange",
+    "collapsible",
+    "movable",
+    "resizable",
+    "closeOnEsc",
+    "onClose",
+    "moveHandleAriaLabel",
+    "resizeHandleAriaLabel",
+    "closeAriaLabel",
+    "collapseAriaLabel",
+    "expandAriaLabel",
+    "class",
+    "style",
+    "children",
+    "ref"
+  ]);
+  let rootEl;
+  const titleId = createId(void 0, "smwb-floating-window-title");
+  const transition = createCssTransition({
+    in: () => local.open,
+    timeout: { enter: 120, exit: 120 },
+    classNames: { enterDone: "smwb-floating-window_entered" },
+    appear: true
+  });
+  const [position, setPosition] = createControllableState({
+    value: () => local.position,
+    defaultValue: local.defaultPosition,
+    onChange: (next) => local.onPositionChange?.(next)
+  });
+  const [size, setSize] = createControllableState({
+    value: () => local.size,
+    defaultValue: local.defaultSize,
+    onChange: (next) => local.onResize?.(next)
+  });
+  const [collapsed, setCollapsed] = createControllableState({
+    value: () => local.collapsed,
+    defaultValue: local.defaultCollapsed,
+    onChange: (next) => local.onCollapsedChange?.(next)
+  });
+  const clampRect = (rect2, vp) => {
+    const maxW = local.maxWidth ?? vp.width;
+    const maxH = local.maxHeight ?? vp.height;
+    const width = Math.max(local.minWidth, Math.min(maxW, rect2.width));
+    const height = Math.max(local.minHeight, Math.min(maxH, rect2.height));
+    const keep = Math.min(local.keepVisible, width);
+    const x = Math.max(keep - width, Math.min(vp.width - keep, rect2.x));
+    const y = Math.max(0, Math.min(Math.max(0, vp.height - keep), rect2.y));
+    return { x, y, width, height };
+  };
+  const fitRect = (rect2, vp) => {
+    const clamped = clampRect(rect2, vp);
+    return {
+      ...clamped,
+      x: Math.max(0, Math.min(clamped.x, vp.width - clamped.width)),
+      y: Math.max(0, Math.min(clamped.y, vp.height - clamped.height))
+    };
+  };
+  const [placed, setPlaced] = createSignal(false);
+  const rect = createMemo(() => {
+    const current = { x: position().x, y: position().y, width: size().width, height: size().height };
+    return placed() ? clampRect(current, viewportOf()) : fitRect(current, viewportOf());
+  });
+  const commitRect = (next, gesture = true) => {
+    if (gesture) setPlaced(true);
+    const clamped = clampRect(next, viewportOf());
+    const pos = position();
+    const dim = size();
+    if (clamped.x !== pos.x || clamped.y !== pos.y) setPosition({ x: clamped.x, y: clamped.y });
+    if (clamped.width !== dim.width || clamped.height !== dim.height) {
+      setSize({ width: clamped.width, height: clamped.height });
+    }
+  };
+  createEffect(() => {
+    if (!local.open) setPlaced(false);
+  });
+  createEffect(() => {
+    if (isServer || !local.open) return;
+    const onViewportResize = () => commitRect(rect(), false);
+    window.addEventListener("resize", onViewportResize);
+    onCleanup(() => window.removeEventListener("resize", onViewportResize));
+  });
+  createEffect(() => {
+    if (isServer || !local.open || !local.closeOnEsc || !local.onClose) return;
+    const onKeyDown = (event) => {
+      if (event.key !== "Escape") return;
+      if (!rootEl || !rootEl.contains(document.activeElement)) return;
+      local.onClose?.();
+    };
+    document.addEventListener("keydown", onKeyDown);
+    onCleanup(() => document.removeEventListener("keydown", onKeyDown));
+  });
+  const activate = () => {
+    local.onActivate?.();
+    if (rootEl && !rootEl.contains(document.activeElement)) rootEl.focus({ preventScroll: true });
+  };
+  let move = null;
+  const onMoveHandlePointerDown = (event) => {
+    if (!local.movable) return;
+    if (event.target?.closest("button,[data-no-drag]")) return;
+    event.preventDefault();
+    const current = rect();
+    move = { px: event.clientX, py: event.clientY, x: current.x, y: current.y };
+    try {
+      event.currentTarget.setPointerCapture?.(event.pointerId);
+    } catch {
+    }
+  };
+  const onMoveHandlePointerMove = (event) => {
+    if (!move) return;
+    const current = rect();
+    commitRect({
+      ...current,
+      x: move.x + event.clientX - move.px,
+      y: move.y + event.clientY - move.py
+    });
+  };
+  const endMove = (event) => {
+    if (move) {
+      move = null;
+      const current = rect();
+      local.onMoveEnd?.({ x: current.x, y: current.y });
+    }
+    if (event.currentTarget.hasPointerCapture?.(event.pointerId)) {
+      event.currentTarget.releasePointerCapture?.(event.pointerId);
+    }
+  };
+  let resize = null;
+  const onResizePointerDown = (dir, event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    resize = { dir, px: event.clientX, py: event.clientY, rect: rect() };
+    activate();
+    try {
+      event.currentTarget.setPointerCapture?.(event.pointerId);
+    } catch {
+    }
+  };
+  const onResizePointerMove = (event) => {
+    if (!resize) return;
+    const sign = RESIZE_DIRS[resize.dir];
+    const dx = event.clientX - resize.px;
+    const dy = event.clientY - resize.py;
+    const start = resize.rect;
+    const vp = viewportOf();
+    const maxW = local.maxWidth ?? vp.width;
+    const maxH = local.maxHeight ?? vp.height;
+    const width = Math.min(maxW, Math.max(local.minWidth, start.width + sign.dw * dx));
+    const height = Math.min(maxH, Math.max(local.minHeight, start.height + sign.dh * dy));
+    commitRect({
+      x: sign.dx ? start.x + start.width - width : start.x,
+      y: sign.dy ? start.y + start.height - height : start.y,
+      width,
+      height
+    });
+  };
+  const endResize = (event) => {
+    if (resize) {
+      resize = null;
+      const current = rect();
+      local.onResizeEnd?.({ width: current.width, height: current.height });
+    }
+    if (event.currentTarget.hasPointerCapture?.(event.pointerId)) {
+      event.currentTarget.releasePointerCapture?.(event.pointerId);
+    }
+  };
+  const endKeyboardGesture = (resized) => {
+    const current = rect();
+    if (resized) local.onResizeEnd?.({ width: current.width, height: current.height });
+    else local.onMoveEnd?.({ x: current.x, y: current.y });
+  };
+  const onMoveHandleKeyDown = (event) => {
+    const current = rect();
+    const step = event.shiftKey ? local.resizeStep : local.moveStep;
+    const delta = {
+      ArrowLeft: [-step, 0],
+      ArrowRight: [step, 0],
+      ArrowUp: [0, -step],
+      ArrowDown: [0, step]
+    };
+    const d = delta[event.key];
+    if (!d) return;
+    event.preventDefault();
+    if (event.shiftKey) {
+      commitRect({ ...current, width: current.width + d[0], height: current.height + d[1] });
+    } else {
+      commitRect({ ...current, x: current.x + d[0], y: current.y + d[1] });
+    }
+    endKeyboardGesture(event.shiftKey);
+  };
+  const onResizeHandleKeyDown = (event) => {
+    const current = rect();
+    const vp = viewportOf();
+    if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+      event.preventDefault();
+      const dir = event.key === "ArrowRight" ? 1 : -1;
+      commitRect({ ...current, width: current.width + dir * local.resizeStep });
+    } else if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+      event.preventDefault();
+      const dir = event.key === "ArrowDown" ? 1 : -1;
+      commitRect({ ...current, height: current.height + dir * local.resizeStep });
+    } else if (event.key === "Home") {
+      event.preventDefault();
+      commitRect({ ...current, width: local.minWidth, height: local.minHeight });
+    } else if (event.key === "End") {
+      event.preventDefault();
+      commitRect({ ...current, width: local.maxWidth ?? vp.width, height: local.maxHeight ?? vp.height });
+    } else {
+      return;
+    }
+    endKeyboardGesture(true);
+  };
+  const toggleCollapsed = () => setCollapsed((prev) => !prev);
+  return <Show when={transition.mounted()}>
+      <Portal mount={isServer ? void 0 : document.body}>
+        <div
+    {...rest}
+    ref={mergeRefs(local.ref, (el) => rootEl = el)}
+    data-testid="floating-window"
+    role="dialog"
+    tabindex={-1}
+    aria-labelledby={local.title ? titleId : void 0}
+    class={cn("smwb-floating-window", local.class, transition.classes(), {
+      "smwb-collapsed": collapsed()
+    })}
+    style={{
+      left: `${rect().x}px`,
+      top: `${rect().y}px`,
+      width: `${rect().width}px`,
+      ...collapsed() ? {} : { height: `${rect().height}px` },
+      ...local.zIndex === void 0 ? {} : { "z-index": local.zIndex },
+      ...typeof local.style === "object" && local.style ? local.style : {}
+    }}
+    on:pointerdown={activate}
+  >
+          <div
+    class="smwb-floating-window__header"
+    data-testid="floating-window-header"
+    onPointerDown={onMoveHandlePointerDown}
+    onPointerMove={onMoveHandlePointerMove}
+    onPointerUp={endMove}
+    onPointerCancel={endMove}
+  >
+            {
+    /* The move affordance is the grip, not the header: the header also hosts the
+       collapse/close buttons and any consumer `headerActions`, and nesting those
+       inside a role="button" is an a11y violation. Pointer drag still works
+       anywhere on the header; only the keyboard affordance lives here. */
+  }
+            <span
+    class="smwb-floating-window__grip"
+    data-testid="floating-window-move"
+    role="button"
+    tabindex={0}
+    aria-label={local.moveHandleAriaLabel}
+    onKeyDown={onMoveHandleKeyDown}
+  >
+              <Icon name="drag_indicator" />
+            </span>
+            <Show when={local.title}>
+              <span class="smwb-floating-window__title" id={titleId}>
+                {local.title}
+              </span>
+            </Show>
+            <div class="smwb-floating-window__actions" data-no-drag>
+              {local.headerActions}
+              <Show when={local.collapsible}>
+                <button
+    type="button"
+    class="smwb-floating-window__action"
+    data-testid="floating-window-collapse"
+    aria-label={collapsed() ? local.expandAriaLabel : local.collapseAriaLabel}
+    aria-expanded={!collapsed()}
+    onClick={toggleCollapsed}
+  >
+                  <Icon name={collapsed() ? "open_in_full" : "close_fullscreen"} />
+                </button>
+              </Show>
+              <Show when={local.onClose}>
+                <button
+    type="button"
+    class="smwb-floating-window__action"
+    data-testid="floating-window-close"
+    aria-label={local.closeAriaLabel}
+    onClick={() => local.onClose?.()}
+  >
+                  <Icon name="close" />
+                </button>
+              </Show>
+            </div>
+          </div>
+
+          <Show when={!collapsed()}>
+            <div class="smwb-floating-window__body" data-testid="floating-window-body">
+              {local.children}
+            </div>
+          </Show>
+
+          <Show when={local.resizable && !collapsed()}>
+            <For each={RESIZE_ORDER}>
+              {(dir) => <div
+    class={cn("smwb-floating-window__resize", `smwb-floating-window__resize_${dir}`)}
+    data-testid={`floating-window-resize-${dir}`}
+    {...dir === "se" ? {
+      role: "separator",
+      tabindex: 0,
+      "aria-label": local.resizeHandleAriaLabel,
+      "aria-valuemin": local.minWidth,
+      "aria-valuemax": Math.round(local.maxWidth ?? viewportOf().width),
+      "aria-valuenow": Math.round(rect().width),
+      onKeyDown: onResizeHandleKeyDown
+    } : { "aria-hidden": true, tabindex: -1 }}
+    onPointerDown={(event) => onResizePointerDown(dir, event)}
+    onPointerMove={onResizePointerMove}
+    onPointerUp={endResize}
+    onPointerCancel={endResize}
+  />}
+            </For>
+          </Show>
+        </div>
+      </Portal>
+    </Show>;
+}
+var floatingWindow_default = FloatingWindow;
+export {
+  FloatingWindow,
+  floatingWindow_default as default
+};
+//# sourceMappingURL=floatingWindow.jsx.map