@smwb/ui-solid 0.1.0

package/dist/headless/components/layout/sheet/sheet.js

@@ -0,0 +1,260 @@
+import { createComponent as o, Portal as j, insert as d, effect as _, className as H, template as v, mergeProps as L, use as V, spread as q, setAttribute as w, memo as F, delegateEvents as G } from "solid-js/web";
+import { mergeProps as T, splitProps as R, createSignal as B, createEffect as M, onCleanup as J, Show as g } from "solid-js";
+import C from "clsx";
+import { createCssTransition as I } from "../../../primitives/createCssTransition.js";
+import { mergeRefs as Q } from "../../../primitives/mergeRefs.js";
+import { ClickAwayListener as Z } from "../../clickAwayListener/clickAwayListener.js";
+import { Button as P } from "../../inputs/button/button.js";
+import { Icon as E } from "../../base/icon/icon.js";
+var ee = /* @__PURE__ */ v("<div class=smwb-sheet__drag-handle data-testid=sheet-drag-handle role=separator tabindex=0><span class=smwb-sheet__drag-handle-bar>"), te = /* @__PURE__ */ v("<div class=smwb-sheet__header>"), ne = /* @__PURE__ */ v("<div class=smwb-sheet__inner>"), x = /* @__PURE__ */ v("<div>");
+const re = (m) => m === "bottom" || m === "top";
+function ie(m) {
+  const S = T({
+    size: "60%",
+    withSizeToggle: !0,
+    hideHeaderActions: !1,
+    reverseHeaderActions: !1,
+    resizable: !1,
+    minSize: 80,
+    resizeStep: 24,
+    resizeHandleAriaLabel: "Resize sheet"
+  }, m), [e, y] = R(S, ["isOpen", "placement", "class", "mode", "size", "variant", "onClose", "withSizeToggle", "hideHeaderActions", "reverseHeaderActions", "resizable", "minSize", "maxSize", "resizeStep", "resizeHandleAriaLabel", "onResize", "style", "handleClose", "handleSizeButton", "children", "ref"]);
+  let p;
+  const [c, u] = B(null), a = () => re(e.placement), f = I({
+    in: () => e.isOpen,
+    timeout: {
+      enter: 120,
+      exit: 120
+    },
+    classNames: {
+      enterDone: "smwb-sheet_entered"
+    },
+    appear: !0
+  }), z = (t) => {
+    const s = a() ? window.innerHeight : window.innerWidth, n = e.maxSize ?? s;
+    return Math.max(e.minSize, Math.min(n, t));
+  }, r = () => {
+    const t = p?.getBoundingClientRect();
+    return t ? a() ? t.height : t.width : e.minSize;
+  }, l = (t) => {
+    const s = z(t);
+    u(s), e.onResize?.(s);
+  };
+  let h = null;
+  const K = (t) => {
+    t.preventDefault(), h = {
+      start: a() ? t.clientY : t.clientX,
+      size: r()
+    };
+    try {
+      t.currentTarget.setPointerCapture?.(t.pointerId);
+    } catch {
+    }
+  }, N = (t) => {
+    if (!h) return;
+    const n = (a() ? t.clientY : t.clientX) - h.start, i = e.placement === "bottom" || e.placement === "right" ? -n : n;
+    l(h.size + i);
+  }, A = (t) => {
+    h = null, t.currentTarget.hasPointerCapture?.(t.pointerId) && t.currentTarget.releasePointerCapture?.(t.pointerId);
+  }, W = (t) => {
+    const s = c() ?? r(), n = e.maxSize ?? (a() ? window.innerHeight : window.innerWidth), i = e.placement === "bottom" ? "ArrowUp" : e.placement === "top" ? "ArrowDown" : e.placement === "left" ? "ArrowRight" : "ArrowLeft", b = e.placement === "bottom" ? "ArrowDown" : e.placement === "top" ? "ArrowUp" : e.placement === "left" ? "ArrowLeft" : "ArrowRight";
+    t.key === i ? (t.preventDefault(), l(s + e.resizeStep)) : t.key === b ? (t.preventDefault(), l(s - e.resizeStep)) : t.key === "Home" ? (t.preventDefault(), l(e.minSize)) : t.key === "End" && (t.preventDefault(), l(n));
+  };
+  M(() => {
+    if (!e.isOpen) {
+      u(null);
+      return;
+    }
+    p?.focus();
+  });
+  const U = () => !e.hideHeaderActions && (!!e.onClose || e.withSizeToggle), X = () => {
+    const t = [];
+    return e.withSizeToggle && t.push(o(P, {
+      variant: "outlined",
+      size: "small",
+      get onClick() {
+        return e.handleSizeButton;
+      },
+      get children() {
+        return o(E, {
+          name: "open_in_full"
+        });
+      }
+    })), e.onClose && t.push(o(P, {
+      variant: "outlined",
+      size: "small",
+      get onClick() {
+        return e.handleClose;
+      },
+      get children() {
+        return o(E, {
+          name: "close"
+        });
+      }
+    })), e.reverseHeaderActions && t.reverse(), t;
+  }, Y = () => {
+    if (e.resizable && c() !== null) {
+      const t = `${c()}px`;
+      return {
+        ...a() ? {
+          height: t
+        } : {
+          width: t
+        },
+        transition: "none"
+      };
+    }
+    return {};
+  };
+  return (() => {
+    var t = x(), s = Q(e.ref, (n) => p = n);
+    return typeof s == "function" && V(s, t), q(t, L(y, {
+      "data-testid": "sheet",
+      tabindex: -1,
+      role: "dialog",
+      get "aria-modal"() {
+        return e.variant === "modal" || void 0;
+      },
+      get class() {
+        return C("smwb-sheet", e.class, `smwb-sheet_${e.variant}`, `smwb-${e.placement}`, f.classes(), {
+          "smwb-expanded": e.mode === "expanded",
+          "smwb-small": e.mode === "small",
+          "smwb-sheet_resizable": e.resizable
+        });
+      },
+      get style() {
+        return {
+          "--sizeProp": e.size,
+          ...Y(),
+          ...typeof e.style == "object" && e.style ? e.style : {}
+        };
+      }
+    }), !1, !0), d(t, o(g, {
+      get when() {
+        return e.resizable;
+      },
+      get children() {
+        var n = ee();
+        return n.$$keydown = W, n.addEventListener("pointercancel", A), n.$$pointerup = A, n.$$pointermove = N, n.$$pointerdown = K, _((i) => {
+          var b = a() ? "horizontal" : "vertical", k = e.resizeHandleAriaLabel, $ = e.minSize, O = Math.round(e.maxSize ?? (a() ? window.innerHeight : window.innerWidth)), D = Math.round(c() ?? r());
+          return b !== i.e && w(n, "aria-orientation", i.e = b), k !== i.t && w(n, "aria-label", i.t = k), $ !== i.a && w(n, "aria-valuemin", i.a = $), O !== i.o && w(n, "aria-valuemax", i.o = O), D !== i.i && w(n, "aria-valuenow", i.i = D), i;
+        }, {
+          e: void 0,
+          t: void 0,
+          a: void 0,
+          o: void 0,
+          i: void 0
+        }), n;
+      }
+    }), null), d(t, o(g, {
+      get when() {
+        return U();
+      },
+      get children() {
+        var n = te();
+        return d(n, X), n;
+      }
+    }), null), d(t, o(g, {
+      get when() {
+        return F(() => !!e.isOpen)() && e.mode !== "small";
+      },
+      get children() {
+        var n = ne();
+        return d(n, () => e.children), n;
+      }
+    }), null), t;
+  })();
+}
+function pe(m) {
+  const S = T({
+    variant: "default",
+    placement: "bottom",
+    closeOnEsc: !0
+  }, m), [e, y] = R(S, ["isOpen", "onClose", "variant", "children", "placement", "disableOutsideClick", "closeOnEsc", "ref"]), [p, c] = B(null), u = I({
+    in: () => e.isOpen,
+    timeout: {
+      enter: 70,
+      exit: 70
+    },
+    classNames: {
+      enterDone: "smwb-entered"
+    },
+    appear: !0
+  });
+  M(() => {
+    if (!e.isOpen || !e.closeOnEsc || !e.onClose) return;
+    const r = (l) => {
+      l.key === "Escape" && e.onClose?.();
+    };
+    document.addEventListener("keydown", r), J(() => document.removeEventListener("keydown", r));
+  });
+  const a = () => {
+    c((r) => r === "expanded" ? "small" : r === null ? "expanded" : null);
+  }, f = () => {
+    e.onClose?.(), c(null);
+  }, z = () => o(ie, L(y, {
+    ref(r) {
+      var l = e.ref;
+      typeof l == "function" ? l(r) : e.ref = r;
+    },
+    get isOpen() {
+      return e.isOpen;
+    },
+    get onClose() {
+      return e.onClose;
+    },
+    handleSizeButton: a,
+    handleClose: f,
+    get mode() {
+      return p();
+    },
+    get placement() {
+      return e.placement;
+    },
+    get variant() {
+      return e.variant;
+    },
+    get children() {
+      return e.children;
+    }
+  }));
+  return o(g, {
+    get when() {
+      return u.mounted();
+    },
+    get children() {
+      return o(j, {
+        get mount() {
+          return document.body;
+        },
+        get children() {
+          return o(g, {
+            get when() {
+              return e.variant === "default";
+            },
+            get fallback() {
+              return (() => {
+                var r = x();
+                return d(r, o(Z, {
+                  onClickAway: () => !e.disableOutsideClick && f(),
+                  get children() {
+                    return z();
+                  }
+                })), _(() => H(r, C("smwb-sheet__overlay", "smwb-dark", `smwb-${e.placement}`, `smwb-sheet_${e.variant}`, u.classes()))), r;
+              })();
+            },
+            get children() {
+              var r = x();
+              return d(r, z), _(() => H(r, C(e.disableOutsideClick ? "smwb-sheet__overlay" : "smwb-sheet__default", u.classes()))), r;
+            }
+          });
+        }
+      });
+    }
+  });
+}
+G(["pointerdown", "pointermove", "pointerup", "keydown"]);
+export {
+  pe as Sheet
+};
+//# sourceMappingURL=sheet.js.map

package/dist/headless/components/layout/sheet/sheet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sheet.js","sources":["../../../../../src/components/layout/sheet/sheet.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, createEffect, createSignal, mergeProps, onCleanup, splitProps } from \"solid-js\";\nimport { Portal } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { Button } from \"../../inputs/button\";\nimport { Icon } from \"../../base/icon\";\nimport { ClickAwayListener } from \"../../clickAwayListener\";\nimport { createCssTransition } from \"../../../primitives/createCssTransition\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface SheetProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"onResize\"> {\n  placement?: \"top\" | \"bottom\" | \"right\" | \"left\";\n  isOpen: boolean;\n  onClose?: (() => void) | undefined;\n  variant?: \"default\" | \"modal\";\n  withSizeToggle?: boolean;\n  /** Hide built-in header actions; onClose still handles Esc and backdrop. */\n  hideHeaderActions?: boolean;\n  reverseHeaderActions?: boolean;\n  size?: string;\n  disableOutsideClick?: boolean;\n  /** Close the sheet when Escape is pressed. */\n  closeOnEsc?: boolean;\n  /** Allow drag-to-resize (mobile bottom-sheet style). Off by default. */\n  resizable?: boolean;\n  /** Minimum size in px while resizing (default 80). */\n  minSize?: number;\n  /** Maximum size in px while resizing (default: viewport dimension). */\n  maxSize?: number;\n  /** Step in px for keyboard resizing (default 24). */\n  resizeStep?: number;\n  /** Accessible label for the resize handle. */\n  resizeHandleAriaLabel?: string;\n  /** Called with the new size in px while/after resizing. */\n  onResize?: (size: number) => void;\n  \"aria-label\"?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\ntype Mode = \"small\" | \"expanded\" | null;\n\nconst isVerticalAxis = (placement: SheetProps[\"placement\"]): boolean => placement === \"bottom\" || placement === \"top\";\n\ninterface SheetBlockProps extends ParentProps<SheetProps> {\n  mode: Mode;\n  handleSizeButton: () => void;\n  handleClose: () => void;\n}\n\nfunction SheetBlock(props: SheetBlockProps): JSX.Element {\n  const merged = mergeProps(\n    {\n      size: \"60%\",\n      withSizeToggle: true,\n      hideHeaderActions: false,\n      reverseHeaderActions: false,\n      resizable: false,\n      minSize: 80,\n      resizeStep: 24,\n      resizeHandleAriaLabel: \"Resize sheet\",\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"isOpen\",\n    \"placement\",\n    \"class\",\n    \"mode\",\n    \"size\",\n    \"variant\",\n    \"onClose\",\n    \"withSizeToggle\",\n    \"hideHeaderActions\",\n    \"reverseHeaderActions\",\n    \"resizable\",\n    \"minSize\",\n    \"maxSize\",\n    \"resizeStep\",\n    \"resizeHandleAriaLabel\",\n    \"onResize\",\n    \"style\",\n    \"handleClose\",\n    \"handleSizeButton\",\n    \"children\",\n    \"ref\",\n  ]);\n\n  let rootEl: HTMLDivElement | undefined;\n  const [dragSize, setDragSize] = createSignal<number | null>(null);\n  const vertical = (): boolean => isVerticalAxis(local.placement);\n\n  const inner = createCssTransition({\n    in: () => local.isOpen,\n    timeout: { enter: 120, exit: 120 },\n    classNames: { enterDone: \"smwb-sheet_entered\" },\n    appear: true,\n  });\n\n  const clamp = (px: number): number => {\n    const viewport = vertical() ? window.innerHeight : window.innerWidth;\n    const max = local.maxSize ?? viewport;\n    return Math.max(local.minSize, Math.min(max, px));\n  };\n\n  const currentSizePx = (): number => {\n    const rect = rootEl?.getBoundingClientRect();\n    if (!rect) return local.minSize;\n    return vertical() ? rect.height : rect.width;\n  };\n\n  const applySize = (px: number): void => {\n    const next = clamp(px);\n    setDragSize(next);\n    local.onResize?.(next);\n  };\n\n  let drag: { start: number; size: number } | null = null;\n\n  const onPointerDown = (event: PointerEvent & { currentTarget: HTMLDivElement }): void => {\n    event.preventDefault();\n    drag = { start: vertical() ? event.clientY : event.clientX, size: currentSizePx() };\n    try {\n      event.currentTarget.setPointerCapture?.(event.pointerId);\n    } catch {\n      /* best-effort */\n    }\n  };\n\n  const onPointerMove = (event: PointerEvent): void => {\n    if (!drag) return;\n    const pos = vertical() ? event.clientY : event.clientX;\n    const delta = pos - drag.start;\n    const grow = local.placement === \"bottom\" || local.placement === \"right\" ? -delta : delta;\n    applySize(drag.size + grow);\n  };\n\n  const endDrag = (event: PointerEvent & { currentTarget: HTMLDivElement }): void => {\n    drag = null;\n    if (event.currentTarget.hasPointerCapture?.(event.pointerId)) {\n      event.currentTarget.releasePointerCapture?.(event.pointerId);\n    }\n  };\n\n  const onHandleKeyDown: JSX.EventHandler<HTMLDivElement, KeyboardEvent> = (event) => {\n    const base = dragSize() ?? currentSizePx();\n    const max = local.maxSize ?? (vertical() ? window.innerHeight : window.innerWidth);\n    const incKey =\n      local.placement === \"bottom\" ? \"ArrowUp\" : local.placement === \"top\" ? \"ArrowDown\" : local.placement === \"left\" ? \"ArrowRight\" : \"ArrowLeft\";\n    const decKey =\n      local.placement === \"bottom\" ? \"ArrowDown\" : local.placement === \"top\" ? \"ArrowUp\" : local.placement === \"left\" ? \"ArrowLeft\" : \"ArrowRight\";\n    if (event.key === incKey) {\n      event.preventDefault();\n      applySize(base + local.resizeStep);\n    } else if (event.key === decKey) {\n      event.preventDefault();\n      applySize(base - local.resizeStep);\n    } else if (event.key === \"Home\") {\n      event.preventDefault();\n      applySize(local.minSize);\n    } else if (event.key === \"End\") {\n      event.preventDefault();\n      applySize(max);\n    }\n  };\n\n  createEffect(() => {\n    if (!local.isOpen) {\n      setDragSize(null);\n      return;\n    }\n    rootEl?.focus();\n  });\n\n  const showActions = (): boolean => !local.hideHeaderActions && (!!local.onClose || local.withSizeToggle);\n  const actionNodes = (): JSX.Element[] => {\n    const nodes: JSX.Element[] = [];\n    if (local.withSizeToggle) {\n      nodes.push(\n        <Button variant=\"outlined\" size=\"small\" onClick={local.handleSizeButton}>\n          <Icon name=\"open_in_full\" />\n        </Button>\n      );\n    }\n    if (local.onClose) {\n      nodes.push(\n        <Button variant=\"outlined\" size=\"small\" onClick={local.handleClose}>\n          <Icon name=\"close\" />\n        </Button>\n      );\n    }\n    if (local.reverseHeaderActions) nodes.reverse();\n    return nodes;\n  };\n\n  const sizeStyle = (): JSX.CSSProperties => {\n    if (local.resizable && dragSize() !== null) {\n      const px = `${dragSize()}px`;\n      return { ...(vertical() ? { height: px } : { width: px }), transition: \"none\" };\n    }\n    return {};\n  };\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref, (el) => (rootEl = el as HTMLDivElement))}\n      data-testid=\"sheet\"\n      tabindex={-1}\n      role=\"dialog\"\n      aria-modal={local.variant === \"modal\" || undefined}\n      class={cn(\"smwb-sheet\", local.class, `smwb-sheet_${local.variant}`, `smwb-${local.placement}`, inner.classes(), {\n        \"smwb-expanded\": local.mode === \"expanded\",\n        \"smwb-small\": local.mode === \"small\",\n        \"smwb-sheet_resizable\": local.resizable,\n      })}\n      style={{\n        \"--sizeProp\": local.size,\n        ...sizeStyle(),\n        ...(typeof local.style === \"object\" && local.style ? local.style : {}),\n      }}\n    >\n      <Show when={local.resizable}>\n        <div\n          class=\"smwb-sheet__drag-handle\"\n          data-testid=\"sheet-drag-handle\"\n          role=\"separator\"\n          tabindex={0}\n          aria-orientation={vertical() ? \"horizontal\" : \"vertical\"}\n          aria-label={local.resizeHandleAriaLabel}\n          aria-valuemin={local.minSize}\n          aria-valuemax={Math.round(local.maxSize ?? (vertical() ? window.innerHeight : window.innerWidth))}\n          aria-valuenow={Math.round(dragSize() ?? currentSizePx())}\n          onPointerDown={onPointerDown}\n          onPointerMove={onPointerMove}\n          onPointerUp={endDrag}\n          onPointerCancel={endDrag}\n          onKeyDown={onHandleKeyDown}\n        >\n          <span class=\"smwb-sheet__drag-handle-bar\" />\n        </div>\n      </Show>\n      <Show when={showActions()}>\n        <div class=\"smwb-sheet__header\">{actionNodes()}</div>\n      </Show>\n      <Show when={local.isOpen && local.mode !== \"small\"}>\n        <div class=\"smwb-sheet__inner\">{local.children}</div>\n      </Show>\n    </div>\n  );\n}\n\nexport function Sheet(props: ParentProps<SheetProps>): JSX.Element {\n  const merged = mergeProps({ variant: \"default\" as const, placement: \"bottom\" as const, closeOnEsc: true }, props);\n  const [local, rest] = splitProps(merged, [\n    \"isOpen\",\n    \"onClose\",\n    \"variant\",\n    \"children\",\n    \"placement\",\n    \"disableOutsideClick\",\n    \"closeOnEsc\",\n    \"ref\",\n  ]);\n\n  const [mode, setMode] = createSignal<Mode>(null);\n\n  const outer = createCssTransition({\n    in: () => local.isOpen,\n    timeout: { enter: 70, exit: 70 },\n    classNames: { enterDone: \"smwb-entered\" },\n    appear: true,\n  });\n\n  createEffect(() => {\n    if (!local.isOpen || !local.closeOnEsc || !local.onClose) return;\n    const onKeyDown = (event: KeyboardEvent): void => {\n      if (event.key === \"Escape\") local.onClose?.();\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n    onCleanup(() => document.removeEventListener(\"keydown\", onKeyDown));\n  });\n\n  const handleSizeButton = (): void => {\n    setMode((prev) => (prev === \"expanded\" ? \"small\" : prev === null ? \"expanded\" : null));\n  };\n  const handleClose = (): void => {\n    local.onClose?.();\n    setMode(null);\n  };\n\n  const block = (): JSX.Element => (\n    <SheetBlock\n      {...rest}\n      ref={local.ref}\n      isOpen={local.isOpen}\n      onClose={local.onClose}\n      handleSizeButton={handleSizeButton}\n      handleClose={handleClose}\n      mode={mode()}\n      placement={local.placement}\n      variant={local.variant}\n    >\n      {local.children}\n    </SheetBlock>\n  );\n\n  return (\n    <Show when={outer.mounted()}>\n      <Portal mount={document.body}>\n        <Show\n          when={local.variant === \"default\"}\n          fallback={\n            <div class={cn(\"smwb-sheet__overlay\", \"smwb-dark\", `smwb-${local.placement}`, `smwb-sheet_${local.variant}`, outer.classes())}>\n              <ClickAwayListener onClickAway={() => !local.disableOutsideClick && handleClose()}>\n                {block()}\n              </ClickAwayListener>\n            </div>\n          }\n        >\n          <div class={cn(local.disableOutsideClick ? \"smwb-sheet__overlay\" : \"smwb-sheet__default\", outer.classes())}>\n            {block()}\n          </div>\n        </Show>\n      </Portal>\n    </Show>\n  );\n}\n\nexport default Sheet;\n"],"names":["isVerticalAxis","placement","SheetBlock","props","merged","mergeProps","size","withSizeToggle","hideHeaderActions","reverseHeaderActions","resizable","minSize","resizeStep","resizeHandleAriaLabel","local","rest","splitProps","rootEl","dragSize","setDragSize","createSignal","vertical","inner","createCssTransition","in","isOpen","timeout","enter","exit","classNames","enterDone","appear","clamp","px","viewport","window","innerHeight","innerWidth","max","maxSize","Math","min","currentSizePx","rect","getBoundingClientRect","height","width","applySize","next","onResize","drag","onPointerDown","event","preventDefault","start","clientY","clientX","currentTarget","setPointerCapture","pointerId","onPointerMove","delta","grow","endDrag","hasPointerCapture","releasePointerCapture","onHandleKeyDown","base","incKey","decKey","key","createEffect","focus","showActions","onClose","actionNodes","nodes","push","_$createComponent","Button","variant","onClick","handleSizeButton","children","Icon","name","handleClose","reverse","sizeStyle","transition","_el$","_tmpl$4","_ref$","mergeRefs","ref","el","_$use","_$spread","_$mergeProps","undefined","cn","class","classes","mode","style","_$insert","Show","when","_el$2","_tmpl$","$$keydown","addEventListener","$$pointerup","$$pointermove","$$pointerdown","_$effect","_p$","_v$","_v$2","_v$3","_v$4","round","_v$5","e","_$setAttribute","t","a","o","i","_el$3","_tmpl$2","_$memo","_el$4","_tmpl$3","Sheet","closeOnEsc","setMode","outer","onKeyDown","document","onCleanup","removeEventListener","prev","block","r$","_ref$2","mounted","Portal","mount","body","fallback","_el$6","ClickAwayListener","onClickAway","disableOutsideClick","_$className","_el$5","_$delegateEvents"],"mappings":"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"}

package/dist/headless/components/layout/stack/stack.js

@@ -0,0 +1,59 @@
+import { use as u, spread as y, mergeProps as v, insert as a, createComponent as n, template as o } from "solid-js/web";
+import { mergeProps as h, splitProps as w, children as $, Show as c, For as x } from "solid-js";
+import _ from "clsx";
+import { mergeRefs as b } from "../../../primitives/mergeRefs.js";
+var k = /* @__PURE__ */ o("<div>"), j = /* @__PURE__ */ o("<div class=smwb-stack__divider>");
+const l = (r) => r === "start" || r === "end" ? `flex-${r}` : r, P = (r) => typeof r == "number" ? `calc(var(--smui-spacing-unit, 4px) * ${r})` : r === "none" ? "0" : `var(--smui-space-${r})`;
+function G(r) {
+  const p = h({
+    direction: "column",
+    spacing: "md"
+  }, r), [e, d] = w(p, ["direction", "spacing", "align", "justify", "wrap", "divider", "class", "style", "children", "ref"]), m = $(() => e.children);
+  return (() => {
+    var t = k(), i = b(e.ref);
+    return typeof i == "function" && u(i, t), y(t, v(d, {
+      "data-testid": "stack",
+      get class() {
+        return _("smwb-stack", e.class);
+      },
+      get style() {
+        return {
+          display: "flex",
+          "flex-direction": e.direction,
+          "flex-wrap": e.wrap ? "wrap" : void 0,
+          "align-items": l(e.align),
+          "justify-content": l(e.justify),
+          gap: P(e.spacing),
+          ...typeof e.style == "object" && e.style ? e.style : {}
+        };
+      }
+    }), !1, !0), a(t, n(c, {
+      get when() {
+        return e.divider;
+      },
+      get fallback() {
+        return e.children;
+      },
+      get children() {
+        return n(x, {
+          get each() {
+            return m.toArray();
+          },
+          children: (f, g) => [n(c, {
+            get when() {
+              return g() > 0;
+            },
+            get children() {
+              var s = j();
+              return a(s, () => e.divider), s;
+            }
+          }), f]
+        });
+      }
+    })), t;
+  })();
+}
+export {
+  G as Stack
+};
+//# sourceMappingURL=stack.js.map

package/dist/headless/components/layout/stack/stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack.js","sources":["../../../../../src/components/layout/stack/stack.tsx"],"sourcesContent":["import { type JSX, type ParentProps, For, Show, children as resolveChildren, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type StackSpacing = number | \"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"xxxl\";\n\nexport interface StackProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  direction?: \"row\" | \"row-reverse\" | \"column\" | \"column-reverse\";\n  /** Gap between items: scale keyword, or a number = N × spacing unit. */\n  spacing?: StackSpacing;\n  align?: \"start\" | \"center\" | \"end\" | \"stretch\" | \"baseline\";\n  justify?: \"start\" | \"center\" | \"end\" | \"space-between\" | \"space-around\" | \"space-evenly\";\n  wrap?: boolean;\n  /** Optional element rendered between each child. */\n  divider?: JSX.Element;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst flexAlign = (v?: string): string | undefined => (v === \"start\" || v === \"end\" ? `flex-${v}` : v);\n\nconst resolveGap = (s: StackSpacing): string =>\n  typeof s === \"number\" ? `calc(var(--smui-spacing-unit, 4px) * ${s})` : s === \"none\" ? \"0\" : `var(--smui-space-${s})`;\n\nexport function Stack(props: ParentProps<StackProps>): JSX.Element {\n  const merged = mergeProps({ direction: \"column\" as const, spacing: \"md\" as StackSpacing }, props);\n  const [local, rest] = splitProps(merged, [\n    \"direction\",\n    \"spacing\",\n    \"align\",\n    \"justify\",\n    \"wrap\",\n    \"divider\",\n    \"class\",\n    \"style\",\n    \"children\",\n    \"ref\",\n  ]);\n\n  const resolved = resolveChildren(() => local.children);\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid=\"stack\"\n      class={cn(\"smwb-stack\", local.class)}\n      style={{\n        display: \"flex\",\n        \"flex-direction\": local.direction,\n        \"flex-wrap\": local.wrap ? \"wrap\" : undefined,\n        \"align-items\": flexAlign(local.align),\n        \"justify-content\": flexAlign(local.justify),\n        gap: resolveGap(local.spacing),\n        ...(typeof local.style === \"object\" && local.style ? local.style : {}),\n      }}\n    >\n      <Show when={local.divider} fallback={local.children}>\n        <For each={resolved.toArray()}>\n          {(child, index) => (\n            <>\n              <Show when={index() > 0}>\n                <div class=\"smwb-stack__divider\">{local.divider}</div>\n              </Show>\n              {child}\n            </>\n          )}\n        </For>\n      </Show>\n    </div>\n  );\n}\n\nexport default Stack;\n"],"names":["flexAlign","v","resolveGap","s","Stack","props","merged","mergeProps","direction","spacing","local","rest","splitProps","resolved","resolveChildren","children","_el$","_tmpl$","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","style","display","wrap","undefined","align","justify","gap","_$insert","_$createComponent","Show","when","divider","fallback","For","each","toArray","child","index","_el$2","_tmpl$2"],"mappings":";;;;;AAkBA,MAAMA,IAAYA,CAACC,MAAoCA,MAAM,WAAWA,MAAM,QAAQ,QAAQA,CAAC,KAAKA,GAE9FC,IAAaA,CAACC,MAClB,OAAOA,KAAM,WAAW,wCAAwCA,CAAC,MAAMA,MAAM,SAAS,MAAM,oBAAoBA,CAAC;AAE5G,SAASC,EAAMC,GAA6C;AACjE,QAAMC,IAASC,EAAW;AAAA,IAAEC,WAAW;AAAA,IAAmBC,SAAS;AAAA,EAAA,GAAwBJ,CAAK,GAC1F,CAACK,GAAOC,CAAI,IAAIC,EAAWN,GAAQ,CACvC,aACA,WACA,SACA,WACA,QACA,WACA,SACA,SACA,YACA,KAAK,CACN,GAEKO,IAAWC,EAAgB,MAAMJ,EAAMK,QAAQ;AAErD,UAAA,MAAA;AAAA,QAAAC,IAAAC,EAAAA,GAAAC,IAGSC,EAAUT,EAAMU,GAAG;AAAC,kBAAAF,KAAA,cAAAG,EAAAH,GAAAF,CAAA,GAAAM,EAAAN,GAAAO,EADrBZ,GAAI;AAAA,MAAA,eAEI;AAAA,MAAO,IAAA,QAAA;AAAA,eACZa,EAAG,cAAcd,EAAMe,KAAK;AAAA,MAAC;AAAA,MAAA,IACpCC,QAAK;AAAA,eAAE;AAAA,UACLC,SAAS;AAAA,UACT,kBAAkBjB,EAAMF;AAAAA,UACxB,aAAaE,EAAMkB,OAAO,SAASC;AAAAA,UACnC,eAAe7B,EAAUU,EAAMoB,KAAK;AAAA,UACpC,mBAAmB9B,EAAUU,EAAMqB,OAAO;AAAA,UAC1CC,KAAK9B,EAAWQ,EAAMD,OAAO;AAAA,UAC7B,GAAI,OAAOC,EAAMgB,SAAU,YAAYhB,EAAMgB,QAAQhB,EAAMgB,QAAQ,CAAA;AAAA,QAAC;AAAA,MACrE;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAO,EAAAjB,GAAAkB,EAEAC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAE1B,EAAM2B;AAAAA,MAAO;AAAA,MAAA,IAAEC,WAAQ;AAAA,eAAE5B,EAAMK;AAAAA,MAAQ;AAAA,MAAA,IAAAA,WAAA;AAAA,eAAAmB,EAChDK,GAAG;AAAA,UAAA,IAACC,OAAI;AAAA,mBAAE3B,EAAS4B,QAAAA;AAAAA,UAAS;AAAA,UAAA1B,UAC1BA,CAAC2B,GAAOC,MAAK,CAAAT,EAETC,GAAI;AAAA,YAAA,IAACC,OAAI;AAAA,qBAAEO,MAAU;AAAA,YAAC;AAAA,YAAA,IAAA5B,WAAA;AAAA,kBAAA6B,IAAAC,EAAAA;AAAAZ,qBAAAA,EAAAW,GAAA,MACalC,EAAM2B,OAAO,GAAAO;AAAAA,YAAA;AAAA,UAAA,CAAA,GAEhDF,CAAK;AAAA,QAAA,CAET;AAAA,MAAA;AAAA,IAAA,CAAA,CAAA,GAAA1B;AAAAA,EAAA,GAAA;AAKX;"}

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

@@ -0,0 +1,57 @@
+import { createComponent as i, Dynamic as b, mergeProps as g, insert as r, effect as _, className as u, template as p } from "solid-js/web";
+import { mergeProps as h, splitProps as w, Show as a } from "solid-js";
+import s from "clsx";
+import { mergeRefs as $ } from "../../../primitives/mergeRefs.js";
+var v = /* @__PURE__ */ p("<div class=smwb-appbar__left__title>"), C = /* @__PURE__ */ p("<div class=smwb-appbar__inner><div class=smwb-appbar__left></div><div></div><div class=smwb-appbar__right>");
+function y(m) {
+  const c = h({
+    position: "static",
+    placement: "top",
+    midContentAlign: "middle",
+    color: "default"
+  }, m), [e, d] = w(c, ["class", "children", "dense", "position", "placement", "leftContent", "midContent", "midContentAlign", "rightContent", "title", "color", "ref"]);
+  return i(b, g({
+    get component() {
+      return e.placement === "top" ? "header" : "footer";
+    }
+  }, d, {
+    ref(n) {
+      var t = $(e.ref);
+      typeof t == "function" && t(n);
+    },
+    "data-testid": "app-bar",
+    get class() {
+      return s("smwb-appbar", e.class, `smwb-${e.position}`, `smwb-${e.placement}`, {
+        "smwb-dense": e.dense
+      }, e.color !== "default" && `smwb-appbar_color-${e.color}`);
+    },
+    get children() {
+      return i(a, {
+        get when() {
+          return e.children;
+        },
+        get fallback() {
+          return (() => {
+            var n = C(), t = n.firstChild, l = t.nextSibling, f = l.nextSibling;
+            return r(t, i(a, {
+              get when() {
+                return e.title;
+              },
+              get children() {
+                var o = v();
+                return r(o, () => e.title), o;
+              }
+            }), null), r(t, () => e.leftContent, null), r(l, () => e.midContent), r(f, () => e.rightContent), _(() => u(l, s("smwb-appbar__mid", `smwb-${e.midContentAlign}`))), n;
+          })();
+        },
+        get children() {
+          return e.children;
+        }
+      });
+    }
+  }));
+}
+export {
+  y as AppBar
+};
+//# sourceMappingURL=appBar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"appBar.js","sources":["../../../../../src/components/navigation/appBar/appBar.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, mergeProps, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type AppBarColor = \"default\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface AppBarProps extends Omit<JSX.HTMLAttributes<HTMLElement>, \"title\"> {\n  dense?: boolean;\n  position?: \"relative\" | \"static\" | \"absolute\" | \"sticky\" | \"fixed\";\n  placement?: \"top\" | \"bottom\";\n  leftContent?: JSX.Element;\n  midContent?: JSX.Element;\n  rightContent?: JSX.Element;\n  title?: JSX.Element | string;\n  midContentAlign?: \"middle\" | \"left\" | \"right\";\n  /** Semantic background color. */\n  color?: AppBarColor;\n  ref?: Ref<HTMLElement>;\n}\n\nexport function AppBar(props: ParentProps<AppBarProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      position: \"static\" as const,\n      placement: \"top\" as const,\n      midContentAlign: \"middle\" as const,\n      color: \"default\" as AppBarColor,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"children\",\n    \"dense\",\n    \"position\",\n    \"placement\",\n    \"leftContent\",\n    \"midContent\",\n    \"midContentAlign\",\n    \"rightContent\",\n    \"title\",\n    \"color\",\n    \"ref\",\n  ]);\n\n  return (\n    <Dynamic\n      component={local.placement === \"top\" ? \"header\" : \"footer\"}\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid=\"app-bar\"\n      class={cn(\n        \"smwb-appbar\",\n        local.class,\n        `smwb-${local.position}`,\n        `smwb-${local.placement}`,\n        { \"smwb-dense\": local.dense },\n        local.color !== \"default\" && `smwb-appbar_color-${local.color}`\n      )}\n    >\n      <Show\n        when={local.children}\n        fallback={\n          <div class=\"smwb-appbar__inner\">\n            <div class=\"smwb-appbar__left\">\n              <Show when={local.title}>\n                <div class=\"smwb-appbar__left__title\">{local.title}</div>\n              </Show>\n              {local.leftContent}\n            </div>\n            <div class={cn(\"smwb-appbar__mid\", `smwb-${local.midContentAlign}`)}>{local.midContent}</div>\n            <div class=\"smwb-appbar__right\">{local.rightContent}</div>\n          </div>\n        }\n      >\n        {local.children}\n      </Show>\n    </Dynamic>\n  );\n}\n\nexport default AppBar;\n"],"names":["AppBar","props","merged","mergeProps","position","placement","midContentAlign","color","local","rest","splitProps","_$createComponent","Dynamic","_$mergeProps","component","ref","r$","_ref$","mergeRefs","cn","class","dense","children","Show","when","fallback","_el$","_tmpl$2","_el$2","firstChild","_el$4","nextSibling","_el$5","_$insert","title","_el$3","_tmpl$","leftContent","midContent","rightContent","_$effect","_$className"],"mappings":";;;;;AAqBO,SAASA,EAAOC,GAA8C;AACnE,QAAMC,IAASC,EACb;AAAA,IACEC,UAAU;AAAA,IACVC,WAAW;AAAA,IACXC,iBAAiB;AAAA,IACjBC,OAAO;AAAA,EAAA,GAETN,CACF,GACM,CAACO,GAAOC,CAAI,IAAIC,EAAWR,GAAQ,CACvC,SACA,YACA,SACA,YACA,aACA,eACA,cACA,mBACA,gBACA,SACA,SACA,KAAK,CACN;AAED,SAAAS,EACGC,GAAOC,EAAA;AAAA,IAAA,IACNC,YAAS;AAAA,aAAEN,EAAMH,cAAc,QAAQ,WAAW;AAAA,IAAQ;AAAA,EAAA,GACtDI,GAAI;AAAA,IAAAM,IAAAC,GAAA;AAAA,UAAAC,IACHC,EAAUV,EAAMO,GAAG;AAAC,aAAAE,KAAA,cAAAA,EAAAD,CAAA;AAAA,IAAA;AAAA,IAAA,eAAA;AAAA,IAAA,IAAA,QAAA;AAAA,aAElBG,EACL,eACAX,EAAMY,OACN,QAAQZ,EAAMJ,QAAQ,IACtB,QAAQI,EAAMH,SAAS,IACvB;AAAA,QAAE,cAAcG,EAAMa;AAAAA,MAAAA,GACtBb,EAAMD,UAAU,aAAa,qBAAqBC,EAAMD,KAAK,EAC/D;AAAA,IAAC;AAAA,IAAA,IAAAe,WAAA;AAAA,aAAAX,EAEAY,GAAI;AAAA,QAAA,IACHC,OAAI;AAAA,iBAAEhB,EAAMc;AAAAA,QAAQ;AAAA,QAAA,IACpBG,WAAQ;AAAA,kBAAA,MAAA;AAAA,gBAAAC,IAAAC,KAAAC,IAAAF,EAAAG,YAAAC,IAAAF,EAAAG,aAAAC,IAAAF,EAAAC;AAAAE,mBAAAA,EAAAL,GAAAjB,EAGDY,GAAI;AAAA,cAAA,IAACC,OAAI;AAAA,uBAAEhB,EAAM0B;AAAAA,cAAK;AAAA,cAAA,IAAAZ,WAAA;AAAA,oBAAAa,IAAAC,EAAAA;AAAAH,uBAAAA,EAAAE,GAAA,MACkB3B,EAAM0B,KAAK,GAAAC;AAAAA,cAAA;AAAA,YAAA,CAAA,GAAA,IAAA,GAAAF,EAAAL,GAAA,MAEnDpB,EAAM6B,aAAW,IAAA,GAAAJ,EAAAH,GAAA,MAEkDtB,EAAM8B,UAAU,GAAAL,EAAAD,GAAA,MACrDxB,EAAM+B,YAAY,GAAAC,EAAA,MAAAC,EAAAX,GADvCX,EAAG,oBAAoB,QAAQX,EAAMF,eAAe,EAAE,CAAC,CAAA,GAAAoB;AAAAA,UAAA,GAAA;AAAA,QAAA;AAAA,QAAA,IAAAJ,WAAA;AAAA,iBAKtEd,EAAMc;AAAAA,QAAQ;AAAA,MAAA,CAAA;AAAA,IAAA;AAAA,EAAA,CAAA,CAAA;AAIvB;"}

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

@@ -0,0 +1,196 @@
+import { use as L, spread as S, mergeProps as M, insert as c, createComponent as t, template as b, Dynamic as V } from "solid-js/web";
+import { mergeProps as z, splitProps as O, createSignal as _, For as A, Show as s } from "solid-js";
+import P from "clsx";
+import { createControllableState as E } from "../../../primitives/createControllableState.js";
+import { mergeRefs as k } from "../../../primitives/mergeRefs.js";
+import { callHandler as C } from "../../../primitives/callHandler.js";
+import { Icon as F } from "../../base/icon/icon.js";
+import { Menu as H } from "../menu/menu.js";
+import { MenuItem as T } from "../menu/menuItem.js";
+import { MenuItemIcon as j } from "../menu/menuItemIcon.js";
+import { MenuItemText as q } from "../menu/menuItemText.js";
+import { Ripple as G } from "../../base/ripple/ripple.js";
+var J = /* @__PURE__ */ b("<span class=smwb-bottom-bar__item-icon>"), K = /* @__PURE__ */ b("<span class=smwb-bottom-bar__item-title>"), N = /* @__PURE__ */ b("<nav><div class=smwb-bottom-bar__nav role=menubar>");
+function $(p) {
+  const [o, n] = O(p, ["isActive", "icon", "title", "as", "href", "ref"]);
+  let u;
+  return t(V, M({
+    get component() {
+      return o.as ?? "div";
+    },
+    ref(r) {
+      var a = k(o.ref);
+      typeof a == "function" && a(r);
+    },
+    get href() {
+      return o.href;
+    },
+    role: "menuitem",
+    get class() {
+      return P("smwb-bottom-bar__item", {
+        "smwb-bottom-bar__item_active": o.isActive
+      });
+    },
+    onPointerDown: (r) => {
+      u?.onRipple(r);
+    }
+  }, n, {
+    get children() {
+      return [t(s, {
+        get when() {
+          return o.icon;
+        },
+        get children() {
+          var r = J();
+          return c(r, () => o.icon), r;
+        }
+      }), t(s, {
+        get when() {
+          return o.title;
+        },
+        get children() {
+          var r = K();
+          return c(r, () => o.title), r;
+        }
+      }), t(G, {
+        actionRef: (r) => u = r
+      })];
+    }
+  }));
+}
+function ie(p) {
+  const o = z({
+    menuItems: [],
+    visibleCount: 4,
+    defaultActiveItem: null,
+    overflowMenuAriaLabel: "More navigation"
+  }, p), [n, u] = O(o, ["class", "menuItems", "visibleCount", "activeItem", "defaultActiveItem", "onActiveItemChange", "overflowMenuAriaLabel", "ref"]), [i, r] = E({
+    value: () => n.activeItem,
+    defaultValue: n.defaultActiveItem,
+    onChange: (l) => {
+      l !== null && n.onActiveItemChange?.(l);
+    }
+  }), [a, v] = _(!1), [R, x] = _(null), m = () => Math.max(0, n.visibleCount), y = () => n.menuItems.slice(0, m()), d = () => n.menuItems.slice(m()), h = () => d().length > 0, B = () => h() && i() !== null && i() >= m();
+  return (() => {
+    var l = N(), w = l.firstChild, I = k(n.ref);
+    return typeof I == "function" && L(I, l), S(l, M(u, {
+      get class() {
+        return P("smwb-bottom-bar", n.class);
+      },
+      role: "navigation"
+    }), !1, !0), c(w, t(A, {
+      get each() {
+        return y();
+      },
+      children: (e, f) => t($, {
+        get as() {
+          return e.as;
+        },
+        get isActive() {
+          return i() === f();
+        },
+        onClick: (g) => {
+          r(f()), C(e.onClick, g);
+        },
+        get icon() {
+          return e.icon;
+        },
+        get title() {
+          return e.title;
+        },
+        get href() {
+          return e.href;
+        }
+      })
+    }), null), c(w, t(s, {
+      get when() {
+        return h();
+      },
+      get children() {
+        return t($, {
+          ref: (e) => x(e),
+          get isActive() {
+            return B();
+          },
+          onClick: () => v((e) => !e),
+          get icon() {
+            return t(F, {
+              name: "menu",
+              size: 24
+            });
+          },
+          get "aria-label"() {
+            return n.overflowMenuAriaLabel;
+          },
+          "aria-haspopup": "menu",
+          get "aria-expanded"() {
+            return a();
+          }
+        });
+      }
+    }), null), c(l, t(s, {
+      get when() {
+        return h();
+      },
+      get children() {
+        return t(H, {
+          get isOpen() {
+            return a();
+          },
+          onClose: () => v(!1),
+          get anchorElement() {
+            return R();
+          },
+          placement: "top",
+          dense: !0,
+          get children() {
+            return t(A, {
+              get each() {
+                return d();
+              },
+              children: (e, f) => {
+                const g = () => m() + f();
+                return t(T, {
+                  get selected() {
+                    return i() === g();
+                  },
+                  get href() {
+                    return e.href;
+                  },
+                  onClick: (D) => {
+                    r(g()), C(e.onClick, D), v(!1);
+                  },
+                  get children() {
+                    return [t(s, {
+                      get when() {
+                        return e.icon;
+                      },
+                      get children() {
+                        return t(j, {
+                          get children() {
+                            return e.icon;
+                          }
+                        });
+                      }
+                    }), t(q, {
+                      get inset() {
+                        return !e.icon;
+                      },
+                      get children() {
+                        return e.title;
+                      }
+                    })];
+                  }
+                });
+              }
+            });
+          }
+        });
+      }
+    }), null), l;
+  })();
+}
+export {
+  ie as BottomBar
+};
+//# sourceMappingURL=bottomBar.js.map