@smwb/ui-solid 0.1.0

package/dist/headless/components/dataDisplay/chip/chip.js

@@ -0,0 +1,124 @@
+import { createComponent as o, use as b, spread as g, mergeProps as w, insert as l, memo as $, template as i, addEventListener as D, effect as P, setAttribute as C, delegateEvents as y } from "solid-js/web";
+import { mergeProps as L, splitProps as z, Show as s } from "solid-js";
+import A from "clsx";
+import { mergeRefs as h } from "../../../primitives/mergeRefs.js";
+import { callHandler as R } from "../../../primitives/callHandler.js";
+import { Icon as I } from "../../base/icon/icon.js";
+import { Ripple as E } from "../../base/ripple/ripple.js";
+var M = /* @__PURE__ */ i("<span class=smwb-chip__icon>"), x = /* @__PURE__ */ i("<span class=smwb-chip__label>"), H = /* @__PURE__ */ i("<button type=button class=smwb-chip__delete-icon>"), K = /* @__PURE__ */ i("<a>"), S = /* @__PURE__ */ i("<span>");
+function O(v) {
+  const _ = L({
+    target: "_blank",
+    variant: "filled",
+    size: "medium",
+    color: "default",
+    disabled: !1,
+    deleteAriaLabel: "Remove"
+  }, v), [e, c] = z(_, ["label", "class", "deleteIcon", "icon", "onDelete", "onDeleteMouseDown", "asLink", "href", "target", "selected", "variant", "size", "color", "disabled", "onClick", "deleteAriaLabel", "ref"]);
+  let d;
+  const m = (t) => {
+    e.disabled || d?.onRipple(t);
+  }, k = (t) => {
+    R(e.onDeleteMouseDown, t), t.stopPropagation();
+  }, u = () => A("smwb-chip", `smwb-${e.variant}`, `smwb-chip_size-${e.size}`, e.color !== "default" && `smwb-chip_color-${e.color}`, e.class, {
+    "smwb-disabled": e.disabled,
+    "smwb-selected": e.selected
+  }), a = () => !!e.onClick && !e.disabled, p = () => [o(s, {
+    get when() {
+      return e.icon;
+    },
+    get children() {
+      var t = M();
+      return l(t, () => e.icon), t;
+    }
+  }), (() => {
+    var t = x();
+    return l(t, () => e.label), t;
+  })(), o(s, {
+    get when() {
+      return e.onDelete;
+    },
+    get children() {
+      var t = H();
+      return t.$$mousedown = k, D(t, "click", e.onDelete, !0), l(t, o(s, {
+        get when() {
+          return e.deleteIcon;
+        },
+        get fallback() {
+          return o(I, {
+            name: "cancel",
+            size: 18,
+            fill: 1
+          });
+        },
+        get children() {
+          return e.deleteIcon;
+        }
+      })), P((r) => {
+        var n = e.deleteAriaLabel, f = e.disabled;
+        return n !== r.e && C(t, "aria-label", r.e = n), f !== r.t && (t.disabled = r.t = f), r;
+      }, {
+        e: void 0,
+        t: void 0
+      }), t;
+    }
+  }), o(E, {
+    actionRef: (t) => d = t
+  })];
+  return o(s, {
+    get when() {
+      return $(() => !!e.asLink)() && e.href;
+    },
+    get fallback() {
+      return (() => {
+        var t = S(), r = h(e.ref);
+        return typeof r == "function" && b(r, t), g(t, w(c, {
+          "data-testid": "chip",
+          get class() {
+            return u();
+          },
+          get role() {
+            return a() ? "button" : void 0;
+          },
+          get tabindex() {
+            return a() ? 0 : void 0;
+          },
+          get "aria-disabled"() {
+            return e.disabled || void 0;
+          },
+          get onClick() {
+            return a() ? () => e.onClick?.() : void 0;
+          },
+          get onKeyDown() {
+            return a() ? (n) => {
+              (n.key === "Enter" || n.key === " ") && (n.preventDefault(), e.onClick?.());
+            } : void 0;
+          },
+          onPointerDown: m
+        }), !1, !0), l(t, p), t;
+      })();
+    },
+    get children() {
+      var t = K(), r = h(e.ref);
+      return typeof r == "function" && b(r, t), g(t, w(c, {
+        "data-testid": "chip-link",
+        get class() {
+          return u();
+        },
+        get href() {
+          return e.href;
+        },
+        onPointerDown: m,
+        get target() {
+          return e.target;
+        },
+        rel: "noreferrer"
+      }), !1, !0), l(t, p), t;
+    }
+  });
+}
+y(["click", "mousedown"]);
+export {
+  O as Chip
+};
+//# sourceMappingURL=chip.js.map

package/dist/headless/components/dataDisplay/chip/chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.js","sources":["../../../../../src/components/dataDisplay/chip/chip.tsx"],"sourcesContent":["import { type JSX, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Ripple, type RippleActionsRef } from \"../../base/ripple\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../primitives/callHandler\";\n\nexport type ChipColor = \"default\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface ChipProps extends JSX.HTMLAttributes<HTMLSpanElement | HTMLAnchorElement> {\n  variant?: \"filled\" | \"outlined\";\n  size?: \"small\" | \"medium\";\n  color?: ChipColor;\n  onDelete?: (event: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }) => void;\n  icon?: JSX.Element;\n  deleteIcon?: JSX.Element;\n  label: string;\n  onClick?: () => void;\n  onDeleteMouseDown?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>;\n  disabled?: boolean;\n  asLink?: boolean;\n  href?: string;\n  /** Open the link in a new tab (asLink only). */\n  target?: string;\n  selected?: boolean;\n  /** Accessible label for the delete control. */\n  deleteAriaLabel?: string;\n  ref?: Ref<HTMLSpanElement | HTMLAnchorElement>;\n}\n\nexport function Chip(props: ChipProps): JSX.Element {\n  const merged = mergeProps(\n    {\n      target: \"_blank\",\n      variant: \"filled\" as const,\n      size: \"medium\" as const,\n      color: \"default\" as ChipColor,\n      disabled: false,\n      deleteAriaLabel: \"Remove\",\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"label\",\n    \"class\",\n    \"deleteIcon\",\n    \"icon\",\n    \"onDelete\",\n    \"onDeleteMouseDown\",\n    \"asLink\",\n    \"href\",\n    \"target\",\n    \"selected\",\n    \"variant\",\n    \"size\",\n    \"color\",\n    \"disabled\",\n    \"onClick\",\n    \"deleteAriaLabel\",\n    \"ref\",\n  ]);\n\n  let rippleActions: RippleActionsRef | undefined;\n\n  const onPointerDown = (event: PointerEvent): void => {\n    if (!local.disabled) {\n      rippleActions?.onRipple(event);\n    }\n  };\n\n  const onDeleteMouseDown: JSX.EventHandler<HTMLButtonElement, MouseEvent> = (event) => {\n    callHandler(local.onDeleteMouseDown, event);\n    event.stopPropagation();\n  };\n\n  const classes = (): string =>\n    cn(\n      \"smwb-chip\",\n      `smwb-${local.variant}`,\n      `smwb-chip_size-${local.size}`,\n      local.color !== \"default\" && `smwb-chip_color-${local.color}`,\n      local.class,\n      { \"smwb-disabled\": local.disabled, \"smwb-selected\": local.selected }\n    );\n\n  const clickable = (): boolean => !!local.onClick && !local.disabled;\n\n  const inner = (): JSX.Element => (\n    <>\n      <Show when={local.icon}>\n        <span class=\"smwb-chip__icon\">{local.icon}</span>\n      </Show>\n      <span class=\"smwb-chip__label\">{local.label}</span>\n      <Show when={local.onDelete}>\n        <button\n          type=\"button\"\n          class=\"smwb-chip__delete-icon\"\n          aria-label={local.deleteAriaLabel}\n          disabled={local.disabled}\n          onClick={local.onDelete}\n          onMouseDown={onDeleteMouseDown}\n        >\n          <Show when={local.deleteIcon} fallback={<Icon name=\"cancel\" size={18} fill={1} />}>\n            {local.deleteIcon}\n          </Show>\n        </button>\n      </Show>\n      <Ripple actionRef={(actions) => (rippleActions = actions)} />\n    </>\n  );\n\n  return (\n    <Show\n      when={local.asLink && local.href}\n      fallback={\n        <span\n          {...rest}\n          ref={mergeRefs(local.ref)}\n          data-testid=\"chip\"\n          class={classes()}\n          role={clickable() ? \"button\" : undefined}\n          tabindex={clickable() ? 0 : undefined}\n          aria-disabled={local.disabled || undefined}\n          onClick={clickable() ? () => local.onClick?.() : undefined}\n          onKeyDown={\n            clickable()\n              ? (event) => {\n                  if (event.key === \"Enter\" || event.key === \" \") {\n                    event.preventDefault();\n                    local.onClick?.();\n                  }\n                }\n              : undefined\n          }\n          onPointerDown={onPointerDown}\n        >\n          {inner()}\n        </span>\n      }\n    >\n      <a\n        {...rest}\n        ref={mergeRefs(local.ref)}\n        data-testid=\"chip-link\"\n        class={classes()}\n        href={local.href}\n        onPointerDown={onPointerDown}\n        target={local.target}\n        rel=\"noreferrer\"\n      >\n        {inner()}\n      </a>\n    </Show>\n  );\n}\n\nexport default Chip;\n"],"names":["Chip","props","merged","mergeProps","target","variant","size","color","disabled","deleteAriaLabel","local","rest","splitProps","rippleActions","onPointerDown","event","onRipple","onDeleteMouseDown","callHandler","stopPropagation","classes","cn","class","selected","clickable","onClick","inner","_$createComponent","Show","when","icon","children","_el$","_tmpl$","_$insert","_el$2","_tmpl$2","label","onDelete","_el$3","_tmpl$3","$$mousedown","_$addEventListener","deleteIcon","fallback","Icon","name","fill","_$effect","_p$","_v$","_v$2","e","_$setAttribute","t","undefined","Ripple","actionRef","actions","_$memo","asLink","href","_el$5","_tmpl$5","_ref$2","mergeRefs","ref","_$use","_$spread","_$mergeProps","role","tabindex","onKeyDown","key","preventDefault","_el$4","_tmpl$4","_ref$","_$delegateEvents"],"mappings":"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"}

package/dist/headless/components/dataDisplay/expansionPanel/expansionPanel.js

@@ -0,0 +1,173 @@
+import { createComponent as o, insert as r, Portal as L, addEventListener as P, template as m, use as S, effect as B, className as A, memo as h, delegateEvents as D } from "solid-js/web";
+import { mergeProps as T, splitProps as I, createEffect as y, onCleanup as E, Show as $ } from "solid-js";
+import K from "clsx";
+import { createControllableState as N } from "../../../primitives/createControllableState.js";
+import { mergeRefs as U } from "../../../primitives/mergeRefs.js";
+import { Button as p } from "../../inputs/button/button.js";
+import { Icon as _ } from "../../base/icon/icon.js";
+var V = /* @__PURE__ */ m("<div class=smwb-expansion-panel__controls>"), j = /* @__PURE__ */ m("<div data-testid=expansion-panel><div class=smwb-expansion-panel__head><div class=smwb-expansion-panel__header></div></div><div class=smwb-expansion-panel__body>"), q = /* @__PURE__ */ m("<div class=smwb-expansion-panel__placeholder data-testid=expansion-panel-placeholder><span>"), G = /* @__PURE__ */ m('<div class="smwb-expansion-panel__overlay smwb-dark"role=dialog aria-modal=true data-testid=expansion-panel-overlay><div class=smwb-expansion-panel__dialog><div class=smwb-expansion-panel__head><div class=smwb-expansion-panel__header></div></div><div class="smwb-expansion-panel__body smwb-expansion-panel__body_fullscreen">');
+const H = {
+  expandRow: "Expand to full row",
+  collapseRow: "Collapse to grid",
+  expandFullscreen: "Expand to fullscreen",
+  closeFullscreen: "Close fullscreen",
+  placeholder: "Panel is open in fullscreen",
+  placeholderClose: "Close"
+};
+function ne(F) {
+  const k = T({
+    defaultMode: "tile",
+    disableExpand: !1,
+    noControls: !1,
+    closeOnOutsideClick: !0,
+    closeOnEsc: !0
+  }, F), [n] = I(k, ["class", "header", "mode", "defaultMode", "onModeChange", "disableExpand", "noControls", "renderControls", "closeOnOutsideClick", "closeOnEsc", "labels", "children", "ref"]), [R, s] = N({
+    value: () => n.mode,
+    defaultValue: n.defaultMode,
+    onChange: (e) => n.onModeChange?.(e)
+  }), t = () => ({
+    ...H,
+    ...n.labels
+  }), c = () => n.disableExpand ? "tile" : R(), a = () => c() === "row", f = () => c() === "fullscreen", b = () => s((e) => e === "row" ? "tile" : "row"), w = () => s("fullscreen"), x = () => s("tile"), O = (e) => ({
+    mode: c(),
+    isFullscreen: e,
+    isFullRow: e ? !1 : a(),
+    setMode: s,
+    toggleRow: b,
+    openFullscreen: w,
+    closeFullscreen: x,
+    labels: t()
+  }), v = (e) => {
+    const l = {
+      mode: c(),
+      isFullscreen: e,
+      isFullRow: e ? !1 : a()
+    };
+    return typeof n.children == "function" ? n.children(l) : n.children;
+  }, z = (e) => e ? o(p, {
+    type: "button",
+    variant: "outlined",
+    size: "small",
+    get "aria-label"() {
+      return t().closeFullscreen;
+    },
+    get title() {
+      return t().closeFullscreen;
+    },
+    onClick: x,
+    "data-testid": "expansion-panel-close",
+    get icon() {
+      return o(_, {
+        name: "close",
+        size: 18
+      });
+    }
+  }) : [o(p, {
+    type: "button",
+    variant: "outlined",
+    size: "small",
+    get "aria-pressed"() {
+      return a();
+    },
+    get "aria-label"() {
+      return h(() => !!a())() ? t().collapseRow : t().expandRow;
+    },
+    get title() {
+      return h(() => !!a())() ? t().collapseRow : t().expandRow;
+    },
+    onClick: b,
+    "data-testid": "expansion-panel-row",
+    get icon() {
+      return o(_, {
+        get name() {
+          return a() ? "grid_view" : "table_rows";
+        },
+        size: 18
+      });
+    }
+  }), o(p, {
+    type: "button",
+    variant: "outlined",
+    size: "small",
+    get "aria-label"() {
+      return t().expandFullscreen;
+    },
+    get title() {
+      return t().expandFullscreen;
+    },
+    onClick: w,
+    "data-testid": "expansion-panel-fullscreen",
+    get icon() {
+      return o(_, {
+        name: "open_in_full",
+        size: 18
+      });
+    }
+  })], C = (e) => {
+    if (n.disableExpand || n.noControls) return null;
+    const l = n.renderControls ? typeof n.renderControls == "function" ? n.renderControls(O(e)) : n.renderControls : z(e);
+    return o($, {
+      when: l,
+      children: (i) => (() => {
+        var d = V();
+        return r(d, () => i()), d;
+      })()
+    });
+  };
+  y(() => {
+    if (!f()) return;
+    const e = document.body.style.overflow;
+    document.body.style.overflow = "hidden", E(() => {
+      document.body.style.overflow = e;
+    });
+  }), y(() => {
+    if (!f() || !n.closeOnEsc) return;
+    const e = (l) => {
+      l.key === "Escape" && s("tile");
+    };
+    document.addEventListener("keydown", e), E(() => document.removeEventListener("keydown", e));
+  });
+  const M = () => (() => {
+    var e = j(), l = e.firstChild, i = l.firstChild, d = l.nextSibling, u = U(n.ref);
+    return typeof u == "function" && S(u, e), r(i, () => n.header), r(l, () => C(!1), null), r(d, () => v(!1)), B(() => A(e, K("smwb-expansion-panel", {
+      "smwb-expansion-panel_row": a()
+    }, n.class))), e;
+  })();
+  return o($, {
+    get when() {
+      return f();
+    },
+    get fallback() {
+      return M();
+    },
+    get children() {
+      return [(() => {
+        var e = q(), l = e.firstChild;
+        return r(l, () => t().placeholder), r(e, o(p, {
+          type: "button",
+          variant: "outlined",
+          size: "small",
+          get label() {
+            return t().placeholderClose;
+          },
+          onClick: () => s("tile")
+        }), null), e;
+      })(), o(L, {
+        get mount() {
+          return document.body;
+        },
+        get children() {
+          var e = G(), l = e.firstChild, i = l.firstChild, d = i.firstChild, u = i.nextSibling;
+          return P(e, "click", n.closeOnOutsideClick ? (g) => {
+            g.target === g.currentTarget && s("tile");
+          } : void 0, !0), r(d, () => n.header), r(i, () => C(!0), null), r(u, () => v(!0)), e;
+        }
+      })];
+    }
+  });
+}
+D(["click"]);
+export {
+  ne as ExpansionPanel
+};
+//# sourceMappingURL=expansionPanel.js.map

package/dist/headless/components/dataDisplay/expansionPanel/expansionPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"expansionPanel.js","sources":["../../../../../src/components/dataDisplay/expansionPanel/expansionPanel.tsx"],"sourcesContent":["import { type JSX, Show, createEffect, 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 { createControllableState } from \"../../../primitives/createControllableState\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type ExpansionMode = \"tile\" | \"row\" | \"fullscreen\";\n\nexport interface ExpansionPanelLabels {\n  expandRow?: string;\n  collapseRow?: string;\n  expandFullscreen?: string;\n  closeFullscreen?: string;\n  placeholder?: string;\n  placeholderClose?: string;\n}\n\nexport interface ExpansionPanelRenderContext {\n  mode: ExpansionMode;\n  isFullscreen: boolean;\n  isFullRow: boolean;\n}\n\nexport interface ExpansionPanelControlsContext extends ExpansionPanelRenderContext {\n  setMode: (next: ExpansionMode | ((current: ExpansionMode) => ExpansionMode)) => void;\n  toggleRow: () => void;\n  openFullscreen: () => void;\n  closeFullscreen: () => void;\n  labels: Required<ExpansionPanelLabels>;\n}\n\ntype ExpansionPanelChildren = JSX.Element | ((ctx: ExpansionPanelRenderContext) => JSX.Element);\ntype ExpansionPanelControls = JSX.Element | ((ctx: ExpansionPanelControlsContext) => JSX.Element);\n\nexport interface ExpansionPanelProps {\n  class?: string;\n  header?: JSX.Element;\n  mode?: ExpansionMode;\n  defaultMode?: ExpansionMode;\n  onModeChange?: (mode: ExpansionMode) => void;\n  disableExpand?: boolean;\n  noControls?: boolean;\n  renderControls?: ExpansionPanelControls;\n  closeOnOutsideClick?: boolean;\n  closeOnEsc?: boolean;\n  labels?: ExpansionPanelLabels;\n  children?: ExpansionPanelChildren;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst DEFAULT_LABELS: Required<ExpansionPanelLabels> = {\n  expandRow: \"Expand to full row\",\n  collapseRow: \"Collapse to grid\",\n  expandFullscreen: \"Expand to fullscreen\",\n  closeFullscreen: \"Close fullscreen\",\n  placeholder: \"Panel is open in fullscreen\",\n  placeholderClose: \"Close\",\n};\n\nexport function ExpansionPanel(props: ExpansionPanelProps): JSX.Element {\n  const merged = mergeProps(\n    { defaultMode: \"tile\" as ExpansionMode, disableExpand: false, noControls: false, closeOnOutsideClick: true, closeOnEsc: true },\n    props\n  );\n  const [local] = splitProps(merged, [\n    \"class\",\n    \"header\",\n    \"mode\",\n    \"defaultMode\",\n    \"onModeChange\",\n    \"disableExpand\",\n    \"noControls\",\n    \"renderControls\",\n    \"closeOnOutsideClick\",\n    \"closeOnEsc\",\n    \"labels\",\n    \"children\",\n    \"ref\",\n  ]);\n\n  const [mode, setMode] = createControllableState<ExpansionMode>({\n    value: () => local.mode,\n    defaultValue: local.defaultMode,\n    onChange: (next) => local.onModeChange?.(next),\n  });\n\n  const labels = (): Required<ExpansionPanelLabels> => ({ ...DEFAULT_LABELS, ...local.labels });\n  const effectiveMode = (): ExpansionMode => (local.disableExpand ? \"tile\" : mode());\n  const isFullRow = (): boolean => effectiveMode() === \"row\";\n  const isFullscreen = (): boolean => effectiveMode() === \"fullscreen\";\n\n  const toggleRow = (): void => setMode((current) => (current === \"row\" ? \"tile\" : \"row\"));\n  const openFullscreen = (): void => setMode(\"fullscreen\");\n  const closeFullscreen = (): void => setMode(\"tile\");\n\n  const controlsContext = (overlay: boolean): ExpansionPanelControlsContext => ({\n    mode: effectiveMode(),\n    isFullscreen: overlay,\n    isFullRow: overlay ? false : isFullRow(),\n    setMode,\n    toggleRow,\n    openFullscreen,\n    closeFullscreen,\n    labels: labels(),\n  });\n\n  const renderChildren = (overlay: boolean): JSX.Element => {\n    const ctx: ExpansionPanelRenderContext = { mode: effectiveMode(), isFullscreen: overlay, isFullRow: overlay ? false : isFullRow() };\n    return typeof local.children === \"function\" ? local.children(ctx) : local.children;\n  };\n\n  const defaultControls = (overlay: boolean): JSX.Element => {\n    if (overlay) {\n      return (\n        <Button\n          type=\"button\"\n          variant=\"outlined\"\n          size=\"small\"\n          aria-label={labels().closeFullscreen}\n          title={labels().closeFullscreen}\n          onClick={closeFullscreen}\n          data-testid=\"expansion-panel-close\"\n          icon={<Icon name=\"close\" size={18} />}\n        />\n      );\n    }\n    return (\n      <>\n        <Button\n          type=\"button\"\n          variant=\"outlined\"\n          size=\"small\"\n          aria-pressed={isFullRow()}\n          aria-label={isFullRow() ? labels().collapseRow : labels().expandRow}\n          title={isFullRow() ? labels().collapseRow : labels().expandRow}\n          onClick={toggleRow}\n          data-testid=\"expansion-panel-row\"\n          icon={<Icon name={isFullRow() ? \"grid_view\" : \"table_rows\"} size={18} />}\n        />\n        <Button\n          type=\"button\"\n          variant=\"outlined\"\n          size=\"small\"\n          aria-label={labels().expandFullscreen}\n          title={labels().expandFullscreen}\n          onClick={openFullscreen}\n          data-testid=\"expansion-panel-fullscreen\"\n          icon={<Icon name=\"open_in_full\" size={18} />}\n        />\n      </>\n    );\n  };\n\n  const controlBar = (overlay: boolean): JSX.Element => {\n    if (local.disableExpand || local.noControls) return null;\n    const content = local.renderControls\n      ? typeof local.renderControls === \"function\"\n        ? local.renderControls(controlsContext(overlay))\n        : local.renderControls\n      : defaultControls(overlay);\n    return <Show when={content}>{(c) => <div class=\"smwb-expansion-panel__controls\">{c() as JSX.Element}</div>}</Show>;\n  };\n\n  // Lock body scroll while fullscreen.\n  createEffect(() => {\n    if (!isFullscreen()) return;\n    const prev = document.body.style.overflow;\n    document.body.style.overflow = \"hidden\";\n    onCleanup(() => {\n      document.body.style.overflow = prev;\n    });\n  });\n\n  // Escape closes fullscreen.\n  createEffect(() => {\n    if (!isFullscreen() || !local.closeOnEsc) return;\n    const onKeyDown = (event: KeyboardEvent): void => {\n      if (event.key === \"Escape\") setMode(\"tile\");\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n    onCleanup(() => document.removeEventListener(\"keydown\", onKeyDown));\n  });\n\n  const card = (): JSX.Element => (\n    <div\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-expansion-panel\", { \"smwb-expansion-panel_row\": isFullRow() }, local.class)}\n      data-testid=\"expansion-panel\"\n    >\n      <div class=\"smwb-expansion-panel__head\">\n        <div class=\"smwb-expansion-panel__header\">{local.header}</div>\n        {controlBar(false)}\n      </div>\n      <div class=\"smwb-expansion-panel__body\">{renderChildren(false)}</div>\n    </div>\n  );\n\n  return (\n    <Show when={isFullscreen()} fallback={card()}>\n      <>\n        <div class=\"smwb-expansion-panel__placeholder\" data-testid=\"expansion-panel-placeholder\">\n          <span>{labels().placeholder}</span>\n          <Button type=\"button\" variant=\"outlined\" size=\"small\" label={labels().placeholderClose} onClick={() => setMode(\"tile\")} />\n        </div>\n        <Portal mount={document.body}>\n          <div\n            class=\"smwb-expansion-panel__overlay smwb-dark\"\n            role=\"dialog\"\n            aria-modal=\"true\"\n            data-testid=\"expansion-panel-overlay\"\n            onClick={\n              local.closeOnOutsideClick\n                ? (event) => {\n                    if (event.target === event.currentTarget) setMode(\"tile\");\n                  }\n                : undefined\n            }\n          >\n            <div class=\"smwb-expansion-panel__dialog\">\n              <div class=\"smwb-expansion-panel__head\">\n                <div class=\"smwb-expansion-panel__header\">{local.header}</div>\n                {controlBar(true)}\n              </div>\n              <div class=\"smwb-expansion-panel__body smwb-expansion-panel__body_fullscreen\">{renderChildren(true)}</div>\n            </div>\n          </div>\n        </Portal>\n      </>\n    </Show>\n  );\n}\n\nexport default ExpansionPanel;\n"],"names":["DEFAULT_LABELS","expandRow","collapseRow","expandFullscreen","closeFullscreen","placeholder","placeholderClose","ExpansionPanel","props","merged","mergeProps","defaultMode","disableExpand","noControls","closeOnOutsideClick","closeOnEsc","local","splitProps","mode","setMode","createControllableState","value","defaultValue","onChange","next","onModeChange","labels","effectiveMode","isFullRow","isFullscreen","toggleRow","current","openFullscreen","controlsContext","overlay","renderChildren","ctx","children","defaultControls","_$createComponent","Button","type","variant","size","title","onClick","icon","Icon","name","_$memo","controlBar","content","renderControls","Show","when","c","_el$","_tmpl$","_$insert","createEffect","prev","document","body","style","overflow","onCleanup","onKeyDown","event","key","addEventListener","removeEventListener","card","_el$2","_tmpl$2","_el$3","firstChild","_el$4","_el$5","nextSibling","_ref$","mergeRefs","ref","_$use","header","_$effect","_$className","cn","class","fallback","_el$6","_tmpl$3","_el$7","label","Portal","mount","_el$8","_tmpl$4","_el$9","_el$0","_el$1","_el$10","_$addEventListener","target","currentTarget","undefined","_$delegateEvents"],"mappings":"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"}

package/dist/headless/components/dataDisplay/imagesList/imagesList.js

@@ -0,0 +1,40 @@
+import { createComponent as b, use as p, insert as w, effect as y, className as c, setAttribute as d, setStyleProperty as g, template as H } from "solid-js/web";
+import { mergeProps as P, splitProps as x } from "solid-js";
+import f from "clsx";
+import { ImagesListContext as C } from "./imagesListContext.js";
+import { mergeRefs as I } from "../../../primitives/mergeRefs.js";
+var L = /* @__PURE__ */ H("<div data-testid=images-list><ul>");
+function j(u) {
+  const h = P({
+    gap: 4,
+    cols: 3,
+    rowsHeight: 0,
+    variant: "default"
+  }, u), [r] = x(h, ["class", "children", "gap", "cols", "rowsHeight", "variant", "aria-label", "id", "ref"]);
+  return b(C.Provider, {
+    get value() {
+      return {
+        rowsHeight: r.rowsHeight,
+        variant: r.variant
+      };
+    },
+    get children() {
+      var t = L(), i = t.firstChild, a = I(r.ref);
+      return typeof a == "function" && p(a, t), w(i, () => r.children), y((e) => {
+        var o = f("smwb-gallery", r.class), s = r.id, l = r["aria-label"], n = f("smwb-gallery__list", `smwb-${r.variant}`), v = `${r.cols}`, m = `${r.gap}px`;
+        return o !== e.e && c(t, e.e = o), s !== e.t && d(t, "id", e.t = s), l !== e.a && d(i, "aria-label", e.a = l), n !== e.o && c(i, e.o = n), v !== e.i && g(i, "--cols-count", e.i = v), m !== e.n && g(i, "--gap", e.n = m), e;
+      }, {
+        e: void 0,
+        t: void 0,
+        a: void 0,
+        o: void 0,
+        i: void 0,
+        n: void 0
+      }), t;
+    }
+  });
+}
+export {
+  j as ImagesList
+};
+//# sourceMappingURL=imagesList.js.map

package/dist/headless/components/dataDisplay/imagesList/imagesList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"imagesList.js","sources":["../../../../../src/components/dataDisplay/imagesList/imagesList.tsx"],"sourcesContent":["import { type JSX, type ParentProps, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { ImagesListContext } from \"./imagesListContext\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface ImagesListProps {\n  class?: string;\n  rowsHeight?: number;\n  cols: number;\n  variant?: \"woven\" | \"masonry\" | \"default\";\n  gap?: number;\n  \"aria-label\"?: string;\n  id?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function ImagesList(props: ParentProps<ImagesListProps>): JSX.Element {\n  const merged = mergeProps({ gap: 4, cols: 3, rowsHeight: 0, variant: \"default\" as const }, props);\n  const [local] = splitProps(merged, [\"class\", \"children\", \"gap\", \"cols\", \"rowsHeight\", \"variant\", \"aria-label\", \"id\", \"ref\"]);\n\n  return (\n    <ImagesListContext.Provider value={{ rowsHeight: local.rowsHeight, variant: local.variant }}>\n      <div class={cn(\"smwb-gallery\", local.class)} data-testid=\"images-list\" ref={mergeRefs(local.ref)} id={local.id}>\n        <ul\n          aria-label={local[\"aria-label\"]}\n          class={cn(\"smwb-gallery__list\", `smwb-${local.variant}`)}\n          style={{ \"--cols-count\": `${local.cols}`, \"--gap\": `${local.gap}px` }}\n        >\n          {local.children}\n        </ul>\n      </div>\n    </ImagesListContext.Provider>\n  );\n}\n\nexport default ImagesList;\n"],"names":["ImagesList","props","merged","mergeProps","gap","cols","rowsHeight","variant","local","splitProps","_$createComponent","ImagesListContext","Provider","value","children","_el$","_tmpl$","_el$2","firstChild","_ref$","mergeRefs","ref","_$use","_$insert","_$effect","_p$","_v$","cn","class","_v$2","id","_v$3","_v$4","_v$5","_v$6","e","_$className","t","_$setAttribute","a","o","i","_$setStyleProperty","n","undefined"],"mappings":";;;;;;AAgBO,SAASA,EAAWC,GAAkD;AAC3E,QAAMC,IAASC,EAAW;AAAA,IAAEC,KAAK;AAAA,IAAGC,MAAM;AAAA,IAAGC,YAAY;AAAA,IAAGC,SAAS;AAAA,EAAA,GAAsBN,CAAK,GAC1F,CAACO,CAAK,IAAIC,EAAWP,GAAQ,CAAC,SAAS,YAAY,OAAO,QAAQ,cAAc,WAAW,cAAc,MAAM,KAAK,CAAC;AAE3H,SAAAQ,EACGC,EAAkBC,UAAQ;AAAA,IAAA,IAACC,QAAK;AAAA,aAAE;AAAA,QAAEP,YAAYE,EAAMF;AAAAA,QAAYC,SAASC,EAAMD;AAAAA,MAAAA;AAAAA,IAAS;AAAA,IAAA,IAAAO,WAAA;AAAA,UAAAC,IAAAC,EAAAA,GAAAC,IAAAF,EAAAG,YAAAC,IACbC,EAAUZ,EAAMa,GAAG;AAAC,oBAAAF,KAAA,cAAAG,EAAAH,GAAAJ,CAAA,GAAAQ,EAAAN,GAAA,MAM3FT,EAAMM,QAAQ,GAAAU,EAAAC,CAAAA,MAAA;AAAA,YAAAC,IANPC,EAAG,gBAAgBnB,EAAMoB,KAAK,GAACC,IAA2DrB,EAAMsB,IAAEC,IAE9FvB,EAAM,YAAY,GAACwB,IACxBL,EAAG,sBAAsB,QAAQnB,EAAMD,OAAO,EAAE,GAAC0B,IAC/B,GAAGzB,EAAMH,IAAI,IAAE6B,IAAW,GAAG1B,EAAMJ,GAAG;AAAIsB,eAAAA,MAAAD,EAAAU,KAAAC,EAAArB,GAAAU,EAAAU,IAAAT,CAAA,GAAAG,MAAAJ,EAAAY,KAAAC,EAAAvB,GAAA,MAAAU,EAAAY,IAAAR,CAAA,GAAAE,MAAAN,EAAAc,KAAAD,EAAArB,GAAA,cAAAQ,EAAAc,IAAAR,CAAA,GAAAC,MAAAP,EAAAe,KAAAJ,EAAAnB,GAAAQ,EAAAe,IAAAR,CAAA,GAAAC,MAAAR,EAAAgB,KAAAC,EAAAzB,GAAA,gBAAAQ,EAAAgB,IAAAR,CAAA,GAAAC,MAAAT,EAAAkB,KAAAD,EAAAzB,GAAA,SAAAQ,EAAAkB,IAAAT,CAAA,GAAAT;AAAAA,MAAA,GAAA;AAAA,QAAAU,GAAAS;AAAAA,QAAAP,GAAAO;AAAAA,QAAAL,GAAAK;AAAAA,QAAAJ,GAAAI;AAAAA,QAAAH,GAAAG;AAAAA,QAAAD,GAAAC;AAAAA,MAAAA,CAAA,GAAA7B;AAAAA,IAAA;AAAA,EAAA,CAAA;AAO7E;"}

package/dist/headless/components/dataDisplay/imagesList/imagesListContext.js

@@ -0,0 +1,7 @@
+import { createContext as t, useContext as e } from "solid-js";
+const o = t({ rowsHeight: 0 }), n = () => e(o);
+export {
+  o as ImagesListContext,
+  n as useImagesListContext
+};
+//# sourceMappingURL=imagesListContext.js.map

package/dist/headless/components/dataDisplay/imagesList/imagesListContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"imagesListContext.js","sources":["../../../../../src/components/dataDisplay/imagesList/imagesListContext.ts"],"sourcesContent":["import { createContext, useContext } from \"solid-js\";\n\nexport interface ImagesListContextValue {\n  rowsHeight?: number;\n  variant?: \"woven\" | \"masonry\" | \"default\" | null;\n}\n\nexport const ImagesListContext = createContext<ImagesListContextValue>({ rowsHeight: 0 });\n\nexport const useImagesListContext = (): ImagesListContextValue => useContext(ImagesListContext);\n"],"names":["ImagesListContext","createContext","useImagesListContext","useContext"],"mappings":";AAOO,MAAMA,IAAoBC,EAAsC,EAAE,YAAY,GAAG,GAE3EC,IAAuB,MAA8BC,EAAWH,CAAiB;"}

package/dist/headless/components/dataDisplay/imagesList/imagesListItem/imagesListItem.js

@@ -0,0 +1,60 @@
+import { insert as u, createComponent as v, effect as f, className as l, style as B, setAttribute as b, template as _, delegateEvents as I } from "solid-js/web";
+import { mergeProps as P, splitProps as x, createSignal as L, createEffect as O, Show as k } from "solid-js";
+import o from "clsx";
+import { ImagesListItemModal as E } from "./imagesListItemModal.js";
+import { useImagesListContext as H } from "../imagesListContext.js";
+var S = /* @__PURE__ */ _("<div>"), A = /* @__PURE__ */ _("<li data-testid=images-list-item><div class=smwb-gallery-item__inner><div class=smwb-gallery-item__img-wrapper><img>");
+function D(h) {
+  const p = P({
+    cols: 1,
+    rows: 1,
+    itemBarPlacement: "bottom",
+    alt: "image"
+  }, h), [t] = x(p, ["class", "src", "rounded", "itemBarContent", "cols", "rows", "itemBarPlacement", "alt"]), s = H(), [a, m] = L(!1);
+  O(() => {
+    document.body.style.overflow = a() ? "hidden" : "auto";
+  });
+  const y = () => ({
+    height: s.rowsHeight ? `${s.rowsHeight * t.rows}px` : "",
+    "grid-row-end": `span ${t.rows}`,
+    "grid-column-end": `span ${t.cols}`
+  });
+  return [(() => {
+    var r = A(), n = r.firstChild, $ = n.firstChild, i = $.firstChild;
+    return r.$$click = () => m(!0), u(n, v(k, {
+      get when() {
+        return t.itemBarContent;
+      },
+      get children() {
+        var e = S();
+        return u(e, () => t.itemBarContent), f(() => l(e, o("smwb-gallery-item__bar", t.class, `smwb-${t.itemBarPlacement}`, {
+          "smwb-rounded": t.rounded
+        }))), e;
+      }
+    }), null), f((e) => {
+      var c = o("smwb-gallery__list__item", t.class, "smwb-gallery-item", `smwb-${s.variant}`), C = y(), d = t.src, g = t.alt || "image", w = o("smwb-gallery-item__img", {
+        "smwb-rounded": t.rounded
+      });
+      return c !== e.e && l(r, e.e = c), e.t = B(r, C, e.t), d !== e.a && b(i, "src", e.a = d), g !== e.o && b(i, "alt", e.o = g), w !== e.i && l(i, e.i = w), e;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0
+    }), r;
+  })(), v(E, {
+    get src() {
+      return t.src;
+    },
+    onClose: () => m(!1),
+    get isOpen() {
+      return a();
+    }
+  })];
+}
+I(["click"]);
+export {
+  D as ImagesListItem
+};
+//# sourceMappingURL=imagesListItem.js.map

package/dist/headless/components/dataDisplay/imagesList/imagesListItem/imagesListItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"imagesListItem.js","sources":["../../../../../../src/components/dataDisplay/imagesList/imagesListItem/imagesListItem.tsx"],"sourcesContent":["import { type JSX, Show, createEffect, createSignal, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { ImagesListItemModal } from \"./imagesListItemModal\";\nimport { useImagesListContext } from \"../imagesListContext\";\n\nexport interface ImagesListItemProps {\n  class?: string;\n  src: string;\n  rowsHeight?: number;\n  cols: number;\n  rows: number;\n  rounded?: boolean;\n  itemBarPlacement?: \"top\" | \"bottom\" | \"under\";\n  itemBarContent?: JSX.Element;\n  alt?: string;\n}\n\nexport function ImagesListItem(props: ImagesListItemProps): JSX.Element {\n  const merged = mergeProps({ cols: 1, rows: 1, itemBarPlacement: \"bottom\" as const, alt: \"image\" }, props);\n  const [local] = splitProps(merged, [\n    \"class\",\n    \"src\",\n    \"rounded\",\n    \"itemBarContent\",\n    \"cols\",\n    \"rows\",\n    \"itemBarPlacement\",\n    \"alt\",\n  ]);\n\n  const ctx = useImagesListContext();\n  const [isOpen, setIsOpen] = createSignal(false);\n\n  createEffect(() => {\n    document.body.style.overflow = isOpen() ? \"hidden\" : \"auto\";\n  });\n\n  const style = (): JSX.CSSProperties => ({\n    height: ctx.rowsHeight ? `${ctx.rowsHeight * local.rows}px` : \"\",\n    \"grid-row-end\": `span ${local.rows}`,\n    \"grid-column-end\": `span ${local.cols}`,\n  });\n\n  return (\n    <>\n      <li\n        data-testid=\"images-list-item\"\n        class={cn(\"smwb-gallery__list__item\", local.class, \"smwb-gallery-item\", `smwb-${ctx.variant}`)}\n        onClick={() => setIsOpen(true)}\n        style={style()}\n      >\n        <div class=\"smwb-gallery-item__inner\">\n          <div class=\"smwb-gallery-item__img-wrapper\">\n            <img src={local.src} alt={local.alt || \"image\"} class={cn(\"smwb-gallery-item__img\", { \"smwb-rounded\": local.rounded })} />\n          </div>\n          <Show when={local.itemBarContent}>\n            <div\n              class={cn(\"smwb-gallery-item__bar\", local.class, `smwb-${local.itemBarPlacement}`, { \"smwb-rounded\": local.rounded })}\n            >\n              {local.itemBarContent}\n            </div>\n          </Show>\n        </div>\n      </li>\n      <ImagesListItemModal src={local.src} onClose={() => setIsOpen(false)} isOpen={isOpen()} />\n    </>\n  );\n}\n\nexport default ImagesListItem;\n"],"names":["ImagesListItem","props","merged","mergeProps","cols","rows","itemBarPlacement","alt","local","splitProps","ctx","useImagesListContext","isOpen","setIsOpen","createSignal","createEffect","document","body","style","overflow","height","rowsHeight","_el$","_tmpl$2","_el$2","firstChild","_el$3","_el$4","$$click","_$insert","_$createComponent","Show","when","itemBarContent","children","_el$5","_tmpl$","_$effect","_$className","cn","class","rounded","_p$","_v$","variant","_v$2","_v$3","src","_v$4","_v$5","e","t","_$style","a","_$setAttribute","o","i","undefined","ImagesListItemModal","onClose","_$delegateEvents"],"mappings":";;;;;;AAiBO,SAASA,EAAeC,GAAyC;AACtE,QAAMC,IAASC,EAAW;AAAA,IAAEC,MAAM;AAAA,IAAGC,MAAM;AAAA,IAAGC,kBAAkB;AAAA,IAAmBC,KAAK;AAAA,EAAA,GAAWN,CAAK,GAClG,CAACO,CAAK,IAAIC,EAAWP,GAAQ,CACjC,SACA,OACA,WACA,kBACA,QACA,QACA,oBACA,KAAK,CACN,GAEKQ,IAAMC,EAAAA,GACN,CAACC,GAAQC,CAAS,IAAIC,EAAa,EAAK;AAE9CC,EAAAA,EAAa,MAAM;AACjBC,aAASC,KAAKC,MAAMC,WAAWP,EAAAA,IAAW,WAAW;AAAA,EACvD,CAAC;AAED,QAAMM,IAAQA,OAA0B;AAAA,IACtCE,QAAQV,EAAIW,aAAa,GAAGX,EAAIW,aAAab,EAAMH,IAAI,OAAO;AAAA,IAC9D,gBAAgB,QAAQG,EAAMH,IAAI;AAAA,IAClC,mBAAmB,QAAQG,EAAMJ,IAAI;AAAA,EAAA;AAGvC,SAAA,EAAA,MAAA;AAAA,QAAAkB,IAAAC,KAAAC,IAAAF,EAAAG,YAAAC,IAAAF,EAAAC,YAAAE,IAAAD,EAAAD;AAAAH,WAAAA,EAAAM,UAKe,MAAMf,EAAU,EAAI,GAACgB,EAAAL,GAAAM,EAO3BC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAExB,EAAMyB;AAAAA,MAAc;AAAA,MAAA,IAAAC,WAAA;AAAA,YAAAC,IAAAC,EAAAA;AAAAP,eAAAA,EAAAM,GAAA,MAI3B3B,EAAMyB,cAAc,GAAAI,QAAAC,EAAAH,GAFdI,EAAG,0BAA0B/B,EAAMgC,OAAO,QAAQhC,EAAMF,gBAAgB,IAAI;AAAA,UAAE,gBAAgBE,EAAMiC;AAAAA,QAAAA,CAAS,CAAC,CAAA,GAAAN;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAE,EAAAK,CAAAA,MAAA;AAAA,UAAAC,IAVpHJ,EAAG,4BAA4B/B,EAAMgC,OAAO,qBAAqB,QAAQ9B,EAAIkC,OAAO,EAAE,GAACC,IAEvF3B,KAAO4B,IAIAtC,EAAMuC,KAAGC,IAAOxC,EAAMD,OAAO,SAAO0C,IAASV,EAAG,0BAA0B;AAAA,QAAE,gBAAgB/B,EAAMiC;AAAAA,MAAAA,CAAS;AAACE,aAAAA,MAAAD,EAAAQ,KAAAZ,EAAAhB,GAAAoB,EAAAQ,IAAAP,CAAA,GAAAD,EAAAS,IAAAC,EAAA9B,GAAAuB,GAAAH,EAAAS,CAAA,GAAAL,MAAAJ,EAAAW,KAAAC,EAAA3B,GAAA,OAAAe,EAAAW,IAAAP,CAAA,GAAAE,MAAAN,EAAAa,KAAAD,EAAA3B,GAAA,OAAAe,EAAAa,IAAAP,CAAA,GAAAC,MAAAP,EAAAc,KAAAlB,EAAAX,GAAAe,EAAAc,IAAAP,CAAA,GAAAP;AAAAA,IAAA,GAAA;AAAA,MAAAQ,GAAAO;AAAAA,MAAAN,GAAAM;AAAAA,MAAAJ,GAAAI;AAAAA,MAAAF,GAAAE;AAAAA,MAAAD,GAAAC;AAAAA,IAAAA,CAAA,GAAAnC;AAAAA,EAAA,GAAA,GAAAQ,EAW3H4B,GAAmB;AAAA,IAAA,IAACX,MAAG;AAAA,aAAEvC,EAAMuC;AAAAA,IAAG;AAAA,IAAEY,SAASA,MAAM9C,EAAU,EAAK;AAAA,IAAC,IAAED,SAAM;AAAA,aAAEA,EAAAA;AAAAA,IAAQ;AAAA,EAAA,CAAA,CAAA;AAG5F;AAE8BgD,EAAA,CAAA,OAAA,CAAA;"}

package/dist/headless/components/dataDisplay/imagesList/imagesListItem/imagesListItemModal.js

@@ -0,0 +1,46 @@
+import { createComponent as n, Portal as l, effect as c, className as d, setAttribute as v, template as g, delegateEvents as u } from "solid-js/web";
+import { Show as f } from "solid-js";
+import _ from "clsx";
+import { createCssTransition as b } from "../../../../primitives/createCssTransition.js";
+var w = /* @__PURE__ */ g("<div><div class=smwb-image-modal><img alt class=smwb-image-modal__img>");
+function y(r) {
+  const a = b({
+    in: () => r.isOpen,
+    timeout: {
+      enter: 100,
+      exit: 100
+    },
+    classNames: {
+      enterActive: "smwb-image-modal__overlay-enter-active",
+      enterDone: "smwb-image-modal__overlay-enter-done"
+    },
+    appear: !1
+  });
+  return n(f, {
+    get when() {
+      return a.mounted();
+    },
+    get children() {
+      return n(l, {
+        get mount() {
+          return document.body;
+        },
+        get children() {
+          var t = w(), i = t.firstChild, s = i.firstChild;
+          return t.$$click = () => r.onClose(), i.$$click = (e) => e.stopPropagation(), c((e) => {
+            var o = _("smwb-image-modal__overlay", a.classes()), m = r.src;
+            return o !== e.e && d(t, e.e = o), m !== e.t && v(s, "src", e.t = m), e;
+          }, {
+            e: void 0,
+            t: void 0
+          }), t;
+        }
+      });
+    }
+  });
+}
+u(["click"]);
+export {
+  y as ImagesListItemModal
+};
+//# sourceMappingURL=imagesListItemModal.js.map

package/dist/headless/components/dataDisplay/imagesList/imagesListItem/imagesListItemModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"imagesListItemModal.js","sources":["../../../../../../src/components/dataDisplay/imagesList/imagesListItem/imagesListItemModal.tsx"],"sourcesContent":["import { type JSX, Show } from \"solid-js\";\nimport { Portal } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { createCssTransition } from \"../../../../primitives/createCssTransition\";\n\nexport interface ImagesListItemModalProps {\n  src: string;\n  onClose: () => void;\n  isOpen: boolean;\n}\n\nexport function ImagesListItemModal(props: ImagesListItemModalProps): JSX.Element {\n  const transition = createCssTransition({\n    in: () => props.isOpen,\n    timeout: { enter: 100, exit: 100 },\n    classNames: {\n      enterActive: \"smwb-image-modal__overlay-enter-active\",\n      enterDone: \"smwb-image-modal__overlay-enter-done\",\n    },\n    appear: false,\n  });\n\n  return (\n    <Show when={transition.mounted()}>\n      <Portal mount={document.body}>\n        <div class={cn(\"smwb-image-modal__overlay\", transition.classes())} onClick={() => props.onClose()}>\n          <div class=\"smwb-image-modal\" onClick={(event) => event.stopPropagation()}>\n            <img src={props.src} alt=\"\" class=\"smwb-image-modal__img\" />\n          </div>\n        </div>\n      </Portal>\n    </Show>\n  );\n}\n\nexport default ImagesListItemModal;\n"],"names":["ImagesListItemModal","props","transition","createCssTransition","in","isOpen","timeout","enter","exit","classNames","enterActive","enterDone","appear","_$createComponent","Show","when","mounted","children","Portal","mount","document","body","_el$","_tmpl$","_el$2","firstChild","_el$3","$$click","onClose","event","stopPropagation","_$effect","_p$","_v$","cn","classes","_v$2","src","e","_$className","t","_$setAttribute","undefined","_$delegateEvents"],"mappings":";;;;;AAWO,SAASA,EAAoBC,GAA8C;AAChF,QAAMC,IAAaC,EAAoB;AAAA,IACrCC,IAAIA,MAAMH,EAAMI;AAAAA,IAChBC,SAAS;AAAA,MAAEC,OAAO;AAAA,MAAKC,MAAM;AAAA,IAAA;AAAA,IAC7BC,YAAY;AAAA,MACVC,aAAa;AAAA,MACbC,WAAW;AAAA,IAAA;AAAA,IAEbC,QAAQ;AAAA,EAAA,CACT;AAED,SAAAC,EACGC,GAAI;AAAA,IAAA,IAACC,OAAI;AAAA,aAAEb,EAAWc,QAAAA;AAAAA,IAAS;AAAA,IAAA,IAAAC,WAAA;AAAA,aAAAJ,EAC7BK,GAAM;AAAA,QAAA,IAACC,QAAK;AAAA,iBAAEC,SAASC;AAAAA,QAAI;AAAA,QAAA,IAAAJ,WAAA;AAAA,cAAAK,IAAAC,EAAAA,GAAAC,IAAAF,EAAAG,YAAAC,IAAAF,EAAAC;AAAAH,iBAAAA,EAAAK,UACkD,MAAM1B,EAAM2B,QAAAA,GAASJ,EAAAG,UACvDE,CAAAA,MAAUA,EAAMC,gBAAAA,GAAiBC,EAAAC,CAAAA,MAAA;AAAA,gBAAAC,IAD/DC,EAAG,6BAA6BhC,EAAWiC,SAAS,GAACC,IAEnDnC,EAAMoC;AAAGJ,mBAAAA,MAAAD,EAAAM,KAAAC,EAAAjB,GAAAU,EAAAM,IAAAL,CAAA,GAAAG,MAAAJ,EAAAQ,KAAAC,EAAAf,GAAA,OAAAM,EAAAQ,IAAAJ,CAAA,GAAAJ;AAAAA,UAAA,GAAA;AAAA,YAAAM,GAAAI;AAAAA,YAAAF,GAAAE;AAAAA,UAAAA,CAAA,GAAApB;AAAAA,QAAA;AAAA,MAAA,CAAA;AAAA,IAAA;AAAA,EAAA,CAAA;AAM/B;AAEmCqB,EAAA,CAAA,OAAA,CAAA;"}

package/dist/headless/components/dataDisplay/list/list.js

@@ -0,0 +1,32 @@
+import { use as i, spread as m, mergeProps as u, insert as t, createComponent as p, template as n } from "solid-js/web";
+import { splitProps as c, Show as d } from "solid-js";
+import f from "clsx";
+import { mergeRefs as h } from "../../../primitives/mergeRefs.js";
+var _ = /* @__PURE__ */ n("<li class=smwb-list__subheader>"), b = /* @__PURE__ */ n("<ul>");
+function P(o) {
+  const [e, a] = c(o, ["class", "dense", "subheader", "children", "ref"]);
+  return (() => {
+    var r = b(), s = h(e.ref);
+    return typeof s == "function" && i(s, r), m(r, u(a, {
+      "data-testid": "list",
+      role: "list",
+      get class() {
+        return f("smwb-list", {
+          "smwb-list_dense": e.dense
+        }, e.class);
+      }
+    }), !1, !0), t(r, p(d, {
+      get when() {
+        return e.subheader;
+      },
+      get children() {
+        var l = _();
+        return t(l, () => e.subheader), l;
+      }
+    }), null), t(r, () => e.children, null), r;
+  })();
+}
+export {
+  P as List
+};
+//# sourceMappingURL=list.js.map

package/dist/headless/components/dataDisplay/list/list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list.js","sources":["../../../../../src/components/dataDisplay/list/list.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface ListProps extends JSX.HTMLAttributes<HTMLUListElement> {\n  /** Compact vertical rhythm. */\n  dense?: boolean;\n  /** Section subheader rendered before the items. */\n  subheader?: JSX.Element;\n  ref?: Ref<HTMLUListElement>;\n}\n\nexport function List(props: ParentProps<ListProps>): JSX.Element {\n  const [local, rest] = splitProps(props, [\"class\", \"dense\", \"subheader\", \"children\", \"ref\"]);\n  return (\n    <ul\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid=\"list\"\n      role=\"list\"\n      class={cn(\"smwb-list\", { \"smwb-list_dense\": local.dense }, local.class)}\n    >\n      <Show when={local.subheader}>\n        <li class=\"smwb-list__subheader\">{local.subheader}</li>\n      </Show>\n      {local.children}\n    </ul>\n  );\n}\n\nexport default List;\n"],"names":["List","props","local","rest","splitProps","_el$","_tmpl$2","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","dense","class","_$insert","_$createComponent","Show","when","subheader","children","_el$2","_tmpl$"],"mappings":";;;;;AAYO,SAASA,EAAKC,GAA4C;AAC/D,QAAM,CAACC,GAAOC,CAAI,IAAIC,EAAWH,GAAO,CAAC,SAAS,SAAS,aAAa,YAAY,KAAK,CAAC;AAC1F,UAAA,MAAA;AAAA,QAAAI,IAAAC,EAAAA,GAAAC,IAGSC,EAAUN,EAAMO,GAAG;AAAC,kBAAAF,KAAA,cAAAG,EAAAH,GAAAF,CAAA,GAAAM,EAAAN,GAAAO,EADrBT,GAAI;AAAA,MAAA,eAEI;AAAA,MAAM,MACb;AAAA,MAAM,IAAA,QAAA;AAAA,eACJU,EAAG,aAAa;AAAA,UAAE,mBAAmBX,EAAMY;AAAAA,QAAAA,GAASZ,EAAMa,KAAK;AAAA,MAAC;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAC,EAAAX,GAAAY,EAEtEC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEjB,EAAMkB;AAAAA,MAAS;AAAA,MAAA,IAAAC,WAAA;AAAA,YAAAC,IAAAC,EAAAA;AAAAP,eAAAA,EAAAM,GAAA,MACSpB,EAAMkB,SAAS,GAAAE;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAN,EAAAX,GAAA,MAElDH,EAAMmB,UAAQ,IAAA,GAAAhB;AAAAA,EAAA,GAAA;AAGrB;"}

package/dist/headless/components/dataDisplay/list/listItem.js

@@ -0,0 +1,35 @@
+import { addEventListener as v, use as k, insert as s, effect as u, setAttribute as d, className as w, template as p, delegateEvents as y } from "solid-js/web";
+import { splitProps as A } from "solid-js";
+import C from "clsx";
+import { mergeRefs as g } from "../../../primitives/mergeRefs.js";
+import { callHandler as x } from "../../../primitives/callHandler.js";
+var h = /* @__PURE__ */ p("<li role=listitem data-testid=list-item><span class=smwb-list__item__start></span><span class=smwb-list__item__main></span><span class=smwb-list__item__end>");
+function H(b) {
+  const [e] = A(b, ["class", "children", "disabled", "selected", "dense", "divider", "startAdornment", "endAdornment", "onClick", "ref"]), l = () => !!e.onClick && !e.disabled;
+  return (() => {
+    var i = h(), r = i.firstChild, n = r.nextSibling, f = n.nextSibling;
+    v(i, "keydown", l() ? (t) => {
+      (t.key === "Enter" || t.key === " ") && (t.preventDefault(), x(e.onClick, t));
+    } : void 0, !0), v(i, "click", e.disabled ? void 0 : e.onClick, !0);
+    var a = g(e.ref);
+    return typeof a == "function" && k(a, i), s(r, () => e.startAdornment), s(n, () => e.children), s(f, () => e.endAdornment), u((t) => {
+      var o = l() ? 0 : void 0, m = e.disabled || void 0, c = e.selected || void 0, _ = C("smwb-list__item", e.class, {
+        "smwb-disabled": e.disabled,
+        "smwb-selected": e.selected,
+        "smwb-list__item_dense": e.dense,
+        "smwb-list__item_divider": e.divider
+      });
+      return o !== t.e && d(i, "tabindex", t.e = o), m !== t.t && d(i, "aria-disabled", t.t = m), c !== t.a && d(i, "aria-selected", t.a = c), _ !== t.o && w(i, t.o = _), t;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0
+    }), i;
+  })();
+}
+y(["click", "keydown"]);
+export {
+  H as ListItem
+};
+//# sourceMappingURL=listItem.js.map