@smwb/ui-solid 0.4.1 → 0.6.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"chipGroup.js","sources":["../../../../../src/components/dataDisplay/chipGroup/chipGroup.tsx"],"sourcesContent":["import { type JSX, For, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Chip, type ChipColor } from \"../chip\";\n\nexport interface ChipGroupOption {\n  value: string;\n  label: string;\n  icon?: JSX.Element;\n  disabled?: boolean;\n}\n\nexport interface ChipGroupProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  options: ChipGroupOption[];\n  /** Selected value (single) or values (when `multiple`). */\n  value?: string | string[];\n  /** Allow more than one selected chip (value becomes a string[]). */\n  multiple?: boolean;\n  onChange?: (value: string | string[]) => void;\n  size?: \"small\" | \"medium\";\n  color?: ChipColor;\n  disabled?: boolean;\n}\n\n/**\n * A multi/single-select toggle group built on `Chip` — the \"chip as a toggle\"\n * loop (selected → filled, else outlined; `role=group`) that apps re-hand-roll\n * for filters / segmented controls. Pass an `options` array and a controlled\n * `value`; `onChange` returns the next value (string, or string[] when multiple).\n */\nexport function ChipGroup(props: ChipGroupProps): JSX.Element {\n  const merged = mergeProps({ size: \"medium\" as const, color: \"primary\" as ChipColor }, props);\n  const [local, rest] = splitProps(merged, [\n    \"options\",\n    \"value\",\n    \"multiple\",\n    \"onChange\",\n    \"size\",\n    \"color\",\n    \"disabled\",\n    \"class\",\n  ]);\n\n  const selectedValues = (): string[] => {\n    if (local.value == null) return [];\n    return Array.isArray(local.value) ? local.value : [local.value];\n  };\n  const isSelected = (value: string): boolean => selectedValues().includes(value);\n\n  const toggle = (value: string): void => {\n    if (local.multiple) {\n      const current = selectedValues();\n      const next = current.includes(value) ? current.filter((v) => v !== value) : [...current, value];\n      local.onChange?.(next);\n    } else {\n      local.onChange?.(value);\n    }\n  };\n\n  return (\n    <div {...rest} role=\"group\" class={cn(\"smwb-chip-group\", local.class)}>\n      <For each={local.options}>\n        {(option) => (\n          <Chip\n            label={option.label}\n            size={local.size}\n            color={local.color}\n            selected={isSelected(option.value)}\n            variant={isSelected(option.value) ? \"filled\" : \"outlined\"}\n            disabled={!!(local.disabled || option.disabled)}\n            onClick={() => toggle(option.value)}\n            {...(option.icon ? { icon: option.icon } : {})}\n          />\n        )}\n      </For>\n    </div>\n  );\n}\n\nexport default ChipGroup;\n"],"names":["ChipGroup","props","merged","mergeProps","size","color","local","rest","splitProps","selectedValues","value","Array","isArray","isSelected","includes","toggle","multiple","current","next","filter","v","onChange","_el$","_tmpl$","_$spread","_$mergeProps","cn","class","_$insert","_$createComponent","For","each","options","children","option","Chip","label","selected","variant","disabled","onClick","icon"],"mappings":";;;;;AA6BO,SAASA,EAAUC,GAAoC;AAC5D,QAAMC,IAASC,EAAW;AAAA,IAAEC,MAAM;AAAA,IAAmBC,OAAO;AAAA,EAAA,GAA0BJ,CAAK,GACrF,CAACK,GAAOC,CAAI,IAAIC,EAAWN,GAAQ,CACvC,WACA,SACA,YACA,YACA,QACA,SACA,YACA,OAAO,CACR,GAEKO,IAAiBA,MACjBH,EAAMI,SAAS,OAAa,CAAA,IACzBC,MAAMC,QAAQN,EAAMI,KAAK,IAAIJ,EAAMI,QAAQ,CAACJ,EAAMI,KAAK,GAE1DG,IAAaA,CAACH,MAA2BD,EAAAA,EAAiBK,SAASJ,CAAK,GAExEK,IAASA,CAACL,MAAwB;AACtC,QAAIJ,EAAMU,UAAU;AAClB,YAAMC,IAAUR,EAAAA,GACVS,IAAOD,EAAQH,SAASJ,CAAK,IAAIO,EAAQE,OAAQC,CAAAA,MAAMA,MAAMV,CAAK,IAAI,CAAC,GAAGO,GAASP,CAAK;AAC9FJ,MAAAA,EAAMe,WAAWH,CAAI;AAAA,IACvB;AACEZ,MAAAA,EAAMe,WAAWX,CAAK;AAAA,EAE1B;AAEA,UAAA,MAAA;AAAA,QAAAY,IAAAC,EAAAA;AAAAC,WAAAA,EAAAF,GAAAG,EACWlB,GAAI;AAAA,MAAA,MAAO;AAAA,MAAO,IAAA,QAAA;AAAA,eAAQmB,EAAG,mBAAmBpB,EAAMqB,KAAK;AAAA,MAAC;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAC,EAAAN,GAAAO,EAClEC,GAAG;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEzB,EAAM0B;AAAAA,MAAO;AAAA,MAAAC,UACpBC,CAAAA,MAAML,EACLM,GAAIV,EAAA;AAAA,QAAA,IACHW,QAAK;AAAA,iBAAEF,EAAOE;AAAAA,QAAK;AAAA,QAAA,IACnBhC,OAAI;AAAA,iBAAEE,EAAMF;AAAAA,QAAI;AAAA,QAAA,IAChBC,QAAK;AAAA,iBAAEC,EAAMD;AAAAA,QAAK;AAAA,QAAA,IAClBgC,WAAQ;AAAA,iBAAExB,EAAWqB,EAAOxB,KAAK;AAAA,QAAC;AAAA,QAAA,IAClC4B,UAAO;AAAA,iBAAEzB,EAAWqB,EAAOxB,KAAK,IAAI,WAAW;AAAA,QAAU;AAAA,QAAA,IACzD6B,WAAQ;AAAA,iBAAE,CAAC,EAAEjC,EAAMiC,YAAYL,EAAOK;AAAAA,QAAS;AAAA,QAC/CC,SAASA,MAAMzB,EAAOmB,EAAOxB,KAAK;AAAA,MAAA,GAAC,MAC9BwB,EAAOO,OAAO;AAAA,QAAEA,MAAMP,EAAOO;AAAAA,MAAAA,IAAS,EAAE,CAAA;AAAA,IAAA,CAEhD,CAAA,GAAAnB;AAAAA,EAAA,GAAA;AAIT;"}

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

@@ -0,0 +1,72 @@
+import { insert as o, createComponent as u, memo as $, use as h, spread as k, mergeProps as E, effect as I, className as P, style as R, template as i } from "solid-js/web";
+import { mergeProps as S, splitProps as C, createSignal as g, onMount as F, Show as p, onCleanup as O } from "solid-js";
+import x from "clsx";
+import { mergeRefs as L } from "../../../primitives/mergeRefs.js";
+var M = /* @__PURE__ */ i("<span class=smwb-lazy-image__fallback>"), N = /* @__PURE__ */ i("<img>", !0, !1, !1), V = /* @__PURE__ */ i("<span>");
+function D(d) {
+  const c = S({
+    lazy: !0
+  }, d), [r, v] = C(c, ["src", "alt", "fallback", "lazy", "aspectRatio", "class", "onError", "ref"]), [y, b] = g(!1), [m, f] = g(!c.lazy);
+  let s;
+  F(() => {
+    if (!r.lazy || m() || !s) return;
+    if (typeof IntersectionObserver > "u") {
+      f(!0);
+      return;
+    }
+    const t = new IntersectionObserver((e) => {
+      e.some((a) => a.isIntersecting) && (f(!0), t.disconnect());
+    });
+    t.observe(s), O(() => t.disconnect());
+  });
+  const z = (t) => {
+    b(!0), r.onError?.(t);
+  }, n = () => y() || !r.src, w = () => m() ? r.src : void 0, _ = () => r.aspectRatio != null ? {
+    "aspect-ratio": String(r.aspectRatio)
+  } : void 0;
+  return (() => {
+    var t = V();
+    return o(t, u(p, {
+      get when() {
+        return $(() => !!n())() && r.fallback;
+      },
+      get children() {
+        var e = M();
+        return o(e, () => r.fallback), e;
+      }
+    }), null), o(t, u(p, {
+      get when() {
+        return !n();
+      },
+      get children() {
+        var e = N(), a = L(r.ref, (l) => s = l);
+        return typeof a == "function" && h(a, e), k(e, E(v, {
+          class: "smwb-lazy-image__img",
+          get src() {
+            return w();
+          },
+          get alt() {
+            return r.alt ?? "";
+          },
+          get loading() {
+            return r.lazy ? "lazy" : void 0;
+          },
+          decoding: "async",
+          onError: z
+        }), !1, !1), e;
+      }
+    }), null), I((e) => {
+      var a = x("smwb-lazy-image", r.class, {
+        "smwb-lazy-image--empty": n()
+      }), l = _();
+      return a !== e.e && P(t, e.e = a), e.t = R(t, l, e.t), e;
+    }, {
+      e: void 0,
+      t: void 0
+    }), t;
+  })();
+}
+export {
+  D as LazyImage
+};
+//# sourceMappingURL=lazyImage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lazyImage.js","sources":["../../../../../src/components/dataDisplay/lazyImage/lazyImage.tsx"],"sourcesContent":["import { type JSX, Show, createSignal, mergeProps, onCleanup, onMount, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface LazyImageProps extends Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, \"onError\"> {\n  /** Image URL. When absent (or after a load error) the `fallback` is shown. */\n  src?: string | undefined;\n  alt?: string | undefined;\n  /** Rendered in place of the image when it is missing or fails to load. */\n  fallback?: JSX.Element | undefined;\n  /** Defer loading until the image scrolls into view (IntersectionObserver). Default true. */\n  lazy?: boolean;\n  /** CSS `aspect-ratio` for the wrapper (e.g. `1`, `\"4 / 3\"`) to reserve space before load. */\n  aspectRatio?: string | number;\n  /** Fires on a load error (after the fallback is swapped in). */\n  onError?: (event: Event) => void;\n  ref?: Ref<HTMLImageElement>;\n}\n\n/**\n * An `<img>` with a built-in `onError` fallback and optional in-viewport lazy\n * loading — the `<img decoding=async onError=…>` + `<Show>` dance hand-rolled in\n * every gallery, in one primitive. SSR-safe: renders the image markup on the\n * server; the IntersectionObserver only runs after mount on the client.\n */\nexport function LazyImage(props: LazyImageProps): JSX.Element {\n  const merged = mergeProps({ lazy: true }, props);\n  const [local, rest] = splitProps(merged, [\n    \"src\",\n    \"alt\",\n    \"fallback\",\n    \"lazy\",\n    \"aspectRatio\",\n    \"class\",\n    \"onError\",\n    \"ref\",\n  ]);\n\n  const [failed, setFailed] = createSignal(false);\n  // When lazy, hold the real src back until the element scrolls into view.\n  const [visible, setVisible] = createSignal(!merged.lazy);\n  let imgEl: HTMLImageElement | undefined;\n\n  onMount(() => {\n    if (!local.lazy || visible() || !imgEl) return;\n    if (typeof IntersectionObserver === \"undefined\") {\n      setVisible(true);\n      return;\n    }\n    const io = new IntersectionObserver((entries) => {\n      if (entries.some((entry) => entry.isIntersecting)) {\n        setVisible(true);\n        io.disconnect();\n      }\n    });\n    io.observe(imgEl);\n    onCleanup(() => io.disconnect());\n  });\n\n  const onError = (event: Event): void => {\n    setFailed(true);\n    local.onError?.(event);\n  };\n\n  const showFallback = (): boolean => failed() || !local.src;\n  const resolvedSrc = (): string | undefined => (visible() ? local.src : undefined);\n  const style = (): JSX.CSSProperties | undefined =>\n    local.aspectRatio != null ? { \"aspect-ratio\": String(local.aspectRatio) } : undefined;\n\n  return (\n    <span class={cn(\"smwb-lazy-image\", local.class, { \"smwb-lazy-image--empty\": showFallback() })} style={style()}>\n      <Show when={showFallback() && local.fallback}>\n        <span class=\"smwb-lazy-image__fallback\">{local.fallback}</span>\n      </Show>\n      <Show when={!showFallback()}>\n        <img\n          {...rest}\n          ref={mergeRefs(local.ref, (el) => (imgEl = el as HTMLImageElement))}\n          class=\"smwb-lazy-image__img\"\n          src={resolvedSrc()}\n          alt={local.alt ?? \"\"}\n          loading={local.lazy ? \"lazy\" : undefined}\n          decoding=\"async\"\n          onError={onError}\n        />\n      </Show>\n    </span>\n  );\n}\n\nexport default LazyImage;\n"],"names":["LazyImage","props","merged","mergeProps","lazy","local","rest","splitProps","failed","setFailed","createSignal","visible","setVisible","imgEl","onMount","IntersectionObserver","io","entries","some","entry","isIntersecting","disconnect","observe","onCleanup","onError","event","showFallback","src","resolvedSrc","undefined","style","aspectRatio","String","_el$","_tmpl$3","_$insert","_$createComponent","Show","when","_$memo","fallback","children","_el$2","_tmpl$","_el$3","_tmpl$2","_ref$","mergeRefs","ref","el","_$use","_$spread","_$mergeProps","alt","loading","_$effect","_p$","_v$","cn","class","_v$2","e","_$className","t","_$style"],"mappings":"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"}

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

@@ -0,0 +1,113 @@
+import { use as h, spread as D, mergeProps as E, memo as g, insert as l, createComponent as n, Portal as z, effect as f, setAttribute as C, style as T, isServer as L, template as a } from "solid-js/web";
+import { mergeProps as x, splitProps as F, createSignal as K, onCleanup as M, Show as c } from "solid-js";
+import O from "clsx";
+import { createFloating as R } from "../../../primitives/createFloating.js";
+import { mergeRefs as A } from "../../../primitives/mergeRefs.js";
+import { LazyImage as I } from "../lazyImage/lazyImage.js";
+var j = /* @__PURE__ */ a('<div class="smwb-thumb-card__slot smwb-thumb-card__slot--start">'), q = /* @__PURE__ */ a('<div class="smwb-thumb-card__slot smwb-thumb-card__slot--end">'), B = /* @__PURE__ */ a("<div class=smwb-thumb-card__caption>"), G = /* @__PURE__ */ a("<div class=smwb-thumb-card__preview>"), H = /* @__PURE__ */ a("<div><div class=smwb-thumb-card__media>"), J = /* @__PURE__ */ a("<img alt>");
+function Y(_) {
+  const w = x({
+    lazy: !0,
+    hoverDelay: 350
+  }, _), [e, y] = F(w, ["src", "caption", "selected", "onSelect", "fallback", "hoverPreview", "topStart", "topEnd", "lazy", "disabled", "hoverDelay", "class", "ref"]), m = R({
+    placement: () => "right"
+  }), [$, v] = K(!1);
+  let i;
+  const d = () => {
+    i && (clearTimeout(i), i = void 0);
+  }, S = () => {
+    e.hoverPreview == null || e.disabled || (d(), i = setTimeout(() => v(!0), e.hoverDelay));
+  }, P = () => {
+    d(), v(!1);
+  };
+  M(d);
+  const o = () => !!e.onSelect && !e.disabled, k = (r) => {
+    o() && (r.key === "Enter" || r.key === " ") && (r.preventDefault(), e.onSelect?.());
+  };
+  return (() => {
+    var r = H(), u = r.firstChild, p = A(e.ref, (t) => m.setReference(t));
+    return typeof p == "function" && h(p, r), D(r, E(y, {
+      get class() {
+        return O("smwb-thumb-card", e.class, {
+          "smwb-thumb-card--selected": e.selected,
+          "smwb-thumb-card--disabled": e.disabled,
+          "smwb-thumb-card--interactive": o()
+        });
+      },
+      get role() {
+        return o() ? "button" : void 0;
+      },
+      get tabindex() {
+        return o() ? 0 : void 0;
+      },
+      get "aria-pressed"() {
+        return g(() => !!e.onSelect)() ? e.selected ?? !1 : void 0;
+      },
+      get "aria-disabled"() {
+        return e.disabled || void 0;
+      },
+      get onClick() {
+        return o() ? () => e.onSelect?.() : void 0;
+      },
+      onKeyDown: k,
+      onMouseEnter: S,
+      onMouseLeave: P
+    }), !1, !0), l(u, n(I, {
+      get src() {
+        return e.src;
+      },
+      get lazy() {
+        return e.lazy;
+      },
+      get fallback() {
+        return e.fallback;
+      }
+    }), null), l(u, n(c, {
+      get when() {
+        return e.topStart;
+      },
+      get children() {
+        var t = j();
+        return l(t, () => e.topStart), t;
+      }
+    }), null), l(u, n(c, {
+      get when() {
+        return e.topEnd;
+      },
+      get children() {
+        var t = q();
+        return l(t, () => e.topEnd), t;
+      }
+    }), null), l(r, n(c, {
+      get when() {
+        return e.caption;
+      },
+      get children() {
+        var t = B();
+        return l(t, () => e.caption), t;
+      }
+    }), null), l(r, n(c, {
+      get when() {
+        return $() && !L;
+      },
+      get children() {
+        return n(z, {
+          get children() {
+            var t = G();
+            return h((s) => m.setFloating(s), t), l(t, (() => {
+              var s = g(() => typeof e.hoverPreview == "string");
+              return () => s() ? (() => {
+                var b = J();
+                return f(() => C(b, "src", e.hoverPreview)), b;
+              })() : e.hoverPreview;
+            })()), f((s) => T(t, m.floatingStyles(), s)), t;
+          }
+        });
+      }
+    }), null), r;
+  })();
+}
+export {
+  Y as ThumbCard
+};
+//# sourceMappingURL=thumbCard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"thumbCard.js","sources":["../../../../../src/components/dataDisplay/thumbCard/thumbCard.tsx"],"sourcesContent":["import { type JSX, Show, createSignal, mergeProps, onCleanup, splitProps } from \"solid-js\";\nimport { Portal, isServer } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { createFloating } from \"../../../primitives/createFloating\";\nimport { LazyImage } from \"../lazyImage\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface ThumbCardProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n  /** Thumbnail URL; falls back to `fallback` when missing / failed. */\n  src?: string;\n  caption?: JSX.Element;\n  selected?: boolean;\n  /** Makes the card a selectable button (keyboard + `aria-pressed`). */\n  onSelect?: () => void;\n  /** Shown in place of the image when `src` is missing / fails. */\n  fallback?: JSX.Element;\n  /** A larger preview shown in a floating popup after a hover delay. */\n  hoverPreview?: JSX.Element | string;\n  /** Top-left overlay slot (e.g. a favourite star). */\n  topStart?: JSX.Element;\n  /** Top-right overlay slot (e.g. a kebab menu). */\n  topEnd?: JSX.Element;\n  lazy?: boolean;\n  disabled?: boolean;\n  /** Delay (ms) before the hover preview appears. Default 350. */\n  hoverDelay?: number;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * A selectable gallery card: image with an `onError` fallback + optional lazy\n * load, keyboard/`aria-pressed` selection, corner action slots, and a delayed\n * floating hover-preview. The generic gallery-card behaviour every app rebuilds\n * on top of the primitives. SSR-safe — the hover preview is client-only.\n */\nexport function ThumbCard(props: ThumbCardProps): JSX.Element {\n  const merged = mergeProps({ lazy: true, hoverDelay: 350 }, props);\n  const [local, rest] = splitProps(merged, [\n    \"src\",\n    \"caption\",\n    \"selected\",\n    \"onSelect\",\n    \"fallback\",\n    \"hoverPreview\",\n    \"topStart\",\n    \"topEnd\",\n    \"lazy\",\n    \"disabled\",\n    \"hoverDelay\",\n    \"class\",\n    \"ref\",\n  ]);\n\n  const floating = createFloating({ placement: () => \"right\" });\n  const [previewOpen, setPreviewOpen] = createSignal(false);\n  let hoverTimer: ReturnType<typeof setTimeout> | undefined;\n\n  const clearTimer = (): void => {\n    if (hoverTimer) {\n      clearTimeout(hoverTimer);\n      hoverTimer = undefined;\n    }\n  };\n  const onEnter = (): void => {\n    if (local.hoverPreview == null || local.disabled) return;\n    clearTimer();\n    hoverTimer = setTimeout(() => setPreviewOpen(true), local.hoverDelay);\n  };\n  const onLeave = (): void => {\n    clearTimer();\n    setPreviewOpen(false);\n  };\n  onCleanup(clearTimer);\n\n  const interactive = (): boolean => !!local.onSelect && !local.disabled;\n  const onKeyDown: JSX.EventHandler<HTMLDivElement, KeyboardEvent> = (event) => {\n    if (interactive() && (event.key === \"Enter\" || event.key === \" \")) {\n      event.preventDefault();\n      local.onSelect?.();\n    }\n  };\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref, (el) => floating.setReference(el))}\n      class={cn(\"smwb-thumb-card\", local.class, {\n        \"smwb-thumb-card--selected\": local.selected,\n        \"smwb-thumb-card--disabled\": local.disabled,\n        \"smwb-thumb-card--interactive\": interactive(),\n      })}\n      role={interactive() ? \"button\" : undefined}\n      tabindex={interactive() ? 0 : undefined}\n      aria-pressed={local.onSelect ? (local.selected ?? false) : undefined}\n      aria-disabled={local.disabled || undefined}\n      onClick={interactive() ? () => local.onSelect?.() : undefined}\n      onKeyDown={onKeyDown}\n      onMouseEnter={onEnter}\n      onMouseLeave={onLeave}\n    >\n      <div class=\"smwb-thumb-card__media\">\n        <LazyImage src={local.src} lazy={local.lazy} fallback={local.fallback} />\n        <Show when={local.topStart}>\n          <div class=\"smwb-thumb-card__slot smwb-thumb-card__slot--start\">{local.topStart}</div>\n        </Show>\n        <Show when={local.topEnd}>\n          <div class=\"smwb-thumb-card__slot smwb-thumb-card__slot--end\">{local.topEnd}</div>\n        </Show>\n      </div>\n      <Show when={local.caption}>\n        <div class=\"smwb-thumb-card__caption\">{local.caption}</div>\n      </Show>\n      <Show when={previewOpen() && !isServer}>\n        <Portal>\n          <div class=\"smwb-thumb-card__preview\" ref={(el) => floating.setFloating(el)} style={floating.floatingStyles()}>\n            {typeof local.hoverPreview === \"string\" ? (\n              <img src={local.hoverPreview} alt=\"\" />\n            ) : (\n              (local.hoverPreview as JSX.Element)\n            )}\n          </div>\n        </Portal>\n      </Show>\n    </div>\n  );\n}\n\nexport default ThumbCard;\n"],"names":["ThumbCard","props","merged","mergeProps","lazy","hoverDelay","local","rest","splitProps","floating","createFloating","placement","previewOpen","setPreviewOpen","createSignal","hoverTimer","clearTimer","clearTimeout","undefined","onEnter","hoverPreview","disabled","setTimeout","onLeave","onCleanup","interactive","onSelect","onKeyDown","event","key","preventDefault","_el$","_tmpl$5","_el$2","firstChild","_ref$","mergeRefs","ref","el","setReference","_$use","_$spread","_$mergeProps","cn","class","selected","role","tabindex","_$memo","onClick","_$insert","_$createComponent","LazyImage","src","fallback","Show","when","topStart","children","_el$3","_tmpl$","topEnd","_el$4","_tmpl$2","caption","_el$5","_tmpl$3","isServer","Portal","_el$6","_tmpl$4","setFloating","_c$","_el$7","_tmpl$6","_$effect","_$setAttribute","_$p","_$style","floatingStyles"],"mappings":"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"}

package/dist/headless/components/feedBack/saveAssetDialog/saveAssetDialog.js

@@ -0,0 +1,100 @@
+import { createComponent as r, insert as l, effect as s, setAttribute as g, className as p, template as u } from "solid-js/web";
+import { splitProps as b, Show as o } from "solid-js";
+import v from "clsx";
+import { Modal as a } from "../modal/modal.js";
+import { TextField as C } from "../../inputs/textField/textField.js";
+import { Button as i } from "../../inputs/button/button.js";
+var h = /* @__PURE__ */ u("<div class=smwb-save-asset-dialog__preview><img alt>"), f = /* @__PURE__ */ u("<div>");
+function $(c) {
+  const [e] = b(c, ["open", "title", "nameLabel", "name", "onNameChange", "previewSrc", "onCapture", "captureLabel", "busy", "confirmLabel", "cancelLabel", "onConfirm", "onClose", "children", "class"]), m = () => e.onNameChange !== void 0 || e.name !== void 0;
+  return r(a, {
+    get open() {
+      return e.open;
+    },
+    get onClose() {
+      return e.onClose;
+    },
+    size: "small",
+    get children() {
+      return [r(a.Header, {
+        get children() {
+          return e.title ?? "Save";
+        }
+      }), r(a.Content, {
+        get children() {
+          var t = f();
+          return l(t, r(o, {
+            get when() {
+              return m();
+            },
+            get children() {
+              return r(C, {
+                get label() {
+                  return e.nameLabel ?? "Name";
+                },
+                get value() {
+                  return e.name ?? "";
+                },
+                get disabled() {
+                  return !!e.busy;
+                },
+                onChange: (n) => e.onNameChange?.(n.currentTarget.value)
+              });
+            }
+          }), null), l(t, r(o, {
+            get when() {
+              return e.previewSrc;
+            },
+            get children() {
+              var n = h(), d = n.firstChild;
+              return s(() => g(d, "src", e.previewSrc)), n;
+            }
+          }), null), l(t, r(o, {
+            get when() {
+              return e.onCapture;
+            },
+            get children() {
+              return r(i, {
+                variant: "outlined",
+                size: "small",
+                get disabled() {
+                  return !!e.busy;
+                },
+                onClick: () => e.onCapture?.(),
+                get label() {
+                  return e.captureLabel ?? "Capture preview";
+                }
+              });
+            }
+          }), null), l(t, () => e.children, null), s(() => p(t, v("smwb-save-asset-dialog__body", e.class))), t;
+        }
+      }), r(a.Footer, {
+        get children() {
+          return [r(i, {
+            variant: "text",
+            get disabled() {
+              return !!e.busy;
+            },
+            onClick: () => e.onClose(),
+            get label() {
+              return e.cancelLabel ?? "Cancel";
+            }
+          }), r(i, {
+            variant: "contained",
+            get disabled() {
+              return !!e.busy;
+            },
+            onClick: () => e.onConfirm(),
+            get label() {
+              return e.confirmLabel ?? "Save";
+            }
+          })];
+        }
+      })];
+    }
+  });
+}
+export {
+  $ as SaveAssetDialog
+};
+//# sourceMappingURL=saveAssetDialog.js.map

package/dist/headless/components/feedBack/saveAssetDialog/saveAssetDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"saveAssetDialog.js","sources":["../../../../../src/components/feedBack/saveAssetDialog/saveAssetDialog.tsx"],"sourcesContent":["import { type JSX, Show, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Modal } from \"../modal\";\nimport { Button } from \"../../inputs/button\";\nimport { TextField } from \"../../inputs/textField\";\n\nexport interface SaveAssetDialogProps {\n  open: boolean;\n  title?: string;\n  /** Label for the name field. Omit `onNameChange` AND `name` to hide the field. */\n  nameLabel?: string;\n  name?: string;\n  onNameChange?: (name: string) => void;\n  /** Preview image URL (e.g. a freshly captured thumbnail). */\n  previewSrc?: string;\n  /** Shows a Capture button when provided. */\n  onCapture?: () => void;\n  captureLabel?: string;\n  /** Disables the actions + name field while a save/capture is in flight. */\n  busy?: boolean;\n  confirmLabel?: string;\n  cancelLabel?: string;\n  onConfirm: () => void;\n  onClose: () => void;\n  /** Extra content between the name field/preview and the actions. */\n  children?: JSX.Element;\n  class?: string;\n}\n\n/**\n * A \"name it / preview a thumbnail / confirm-cancel\" dialog on `Modal` — the\n * save/capture flow apps hand-build for every asset. Pairs with srv-solid's\n * asset store: `onConfirm` uploads the captured `previewSrc`.\n */\nexport function SaveAssetDialog(props: SaveAssetDialogProps): JSX.Element {\n  const [local] = splitProps(props, [\n    \"open\",\n    \"title\",\n    \"nameLabel\",\n    \"name\",\n    \"onNameChange\",\n    \"previewSrc\",\n    \"onCapture\",\n    \"captureLabel\",\n    \"busy\",\n    \"confirmLabel\",\n    \"cancelLabel\",\n    \"onConfirm\",\n    \"onClose\",\n    \"children\",\n    \"class\",\n  ]);\n\n  const showNameField = (): boolean => local.onNameChange !== undefined || local.name !== undefined;\n\n  return (\n    <Modal open={local.open} onClose={local.onClose} size=\"small\">\n      <Modal.Header>{local.title ?? \"Save\"}</Modal.Header>\n      <Modal.Content>\n        <div class={cn(\"smwb-save-asset-dialog__body\", local.class)}>\n          <Show when={showNameField()}>\n            <TextField\n              label={local.nameLabel ?? \"Name\"}\n              value={local.name ?? \"\"}\n              disabled={!!local.busy}\n              onChange={(event) => local.onNameChange?.((event.currentTarget as HTMLInputElement).value)}\n            />\n          </Show>\n          <Show when={local.previewSrc}>\n            <div class=\"smwb-save-asset-dialog__preview\">\n              <img src={local.previewSrc} alt=\"\" />\n            </div>\n          </Show>\n          <Show when={local.onCapture}>\n            <Button\n              variant=\"outlined\"\n              size=\"small\"\n              disabled={!!local.busy}\n              onClick={() => local.onCapture?.()}\n              label={local.captureLabel ?? \"Capture preview\"}\n            />\n          </Show>\n          {local.children}\n        </div>\n      </Modal.Content>\n      <Modal.Footer>\n        <Button variant=\"text\" disabled={!!local.busy} onClick={() => local.onClose()} label={local.cancelLabel ?? \"Cancel\"} />\n        <Button variant=\"contained\" disabled={!!local.busy} onClick={() => local.onConfirm()} label={local.confirmLabel ?? \"Save\"} />\n      </Modal.Footer>\n    </Modal>\n  );\n}\n\nexport default SaveAssetDialog;\n"],"names":["SaveAssetDialog","props","local","splitProps","showNameField","onNameChange","undefined","name","_$createComponent","Modal","open","onClose","size","children","Header","title","Content","_el$","_tmpl$2","_$insert","Show","when","TextField","label","nameLabel","value","disabled","busy","onChange","event","currentTarget","previewSrc","_el$2","_tmpl$","_el$3","firstChild","_$effect","_$setAttribute","onCapture","Button","variant","onClick","captureLabel","_$className","cn","class","Footer","cancelLabel","onConfirm","confirmLabel"],"mappings":"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"}

package/dist/headless/components/inputs/valueSlider/valueSlider.js

@@ -0,0 +1,56 @@
+import { insert as t, createComponent as s, effect as v, setAttribute as _, className as f, template as a, delegateEvents as w } from "solid-js/web";
+import { splitProps as $, Show as d } from "solid-js";
+import g from "clsx";
+import { Slider as R } from "../slider/slider.js";
+var k = /* @__PURE__ */ a("<span class=smwb-value-slider__label>"), A = /* @__PURE__ */ a("<span class=smwb-value-slider__readout>"), y = /* @__PURE__ */ a('<button type=button class=smwb-value-slider__reset><svg viewBox="0 0 24 24"width=16 height=16 aria-hidden=true fill=none stroke=currentColor stroke-width=2><path d="M3 12a9 9 0 1 0 3-6.7M3 4v4h4"stroke-linecap=round stroke-linejoin=round>'), S = /* @__PURE__ */ a("<div class=smwb-value-slider__header><span class=smwb-value-slider__spacer>"), C = /* @__PURE__ */ a("<div>");
+const x = (o, e) => typeof o == "function" ? o(e) : Array.isArray(e) ? `${e[0]} – ${e[1]}` : e == null ? "" : String(e);
+function B(o) {
+  const [e, u] = $(o, ["readout", "endAdornment", "onReset", "resetLabel", "label", "class"]), c = () => e.readout !== void 0 && e.readout !== !1, b = () => e.label != null || c() || e.endAdornment != null || e.onReset != null;
+  return (() => {
+    var i = C();
+    return t(i, s(d, {
+      get when() {
+        return b();
+      },
+      get children() {
+        var l = S(), p = l.firstChild;
+        return t(l, s(d, {
+          get when() {
+            return e.label != null;
+          },
+          get children() {
+            var r = k();
+            return t(r, () => e.label), r;
+          }
+        }), p), t(l, s(d, {
+          get when() {
+            return c();
+          },
+          get children() {
+            var r = A();
+            return t(r, () => x(e.readout, u.value)), r;
+          }
+        }), null), t(l, () => e.endAdornment, null), t(l, s(d, {
+          get when() {
+            return e.onReset != null;
+          },
+          get children() {
+            var r = y();
+            return r.$$click = () => e.onReset?.(), v((n) => {
+              var m = e.resetLabel ?? "Reset", h = u.disabled;
+              return m !== n.e && _(r, "aria-label", n.e = m), h !== n.t && (r.disabled = n.t = h), n;
+            }, {
+              e: void 0,
+              t: void 0
+            }), r;
+          }
+        }), null), l;
+      }
+    }), null), t(i, s(R, u), null), v(() => f(i, g("smwb-value-slider", e.class))), i;
+  })();
+}
+w(["click"]);
+export {
+  B as ValueSlider
+};
+//# sourceMappingURL=valueSlider.js.map

package/dist/headless/components/inputs/valueSlider/valueSlider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"valueSlider.js","sources":["../../../../../src/components/inputs/valueSlider/valueSlider.tsx"],"sourcesContent":["import { type JSX, Show, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Slider, type SliderProps, type SliderValue } from \"../slider\";\n\nexport interface ValueSliderProps extends SliderProps {\n  /**\n   * Read-only value readout beside the label. `true` shows the raw value; pass a\n   * formatter for units/precision (e.g. `(v) => `${v}%``). Reflects `props.value`.\n   */\n  readout?: boolean | ((value: SliderValue | undefined) => string);\n  /** Content at the end of the header row — a reset button, a favourite star, etc. */\n  endAdornment?: JSX.Element;\n  /** Renders a built-in reset control in the header; called on click. */\n  onReset?: () => void;\n  /** Accessible label for the reset control. */\n  resetLabel?: string;\n}\n\nconst formatReadout = (\n  readout: ValueSliderProps[\"readout\"],\n  value: SliderValue | undefined,\n): string => {\n  if (typeof readout === \"function\") return readout(value);\n  if (Array.isArray(value)) return `${value[0]} – ${value[1]}`;\n  return value == null ? \"\" : String(value);\n};\n\n/**\n * `Slider` plus the value-readout + adornment header row every app rebuilds: a\n * read-only formatted value next to the label, an optional reset \"eraser\", and an\n * `endAdornment` slot (favourite star, etc.). A drop-in preset — all `Slider`\n * props pass through; the label is rendered in the header instead of inside Slider.\n */\nexport function ValueSlider(props: ValueSliderProps): JSX.Element {\n  const [local, sliderProps] = splitProps(props, [\n    \"readout\",\n    \"endAdornment\",\n    \"onReset\",\n    \"resetLabel\",\n    \"label\",\n    \"class\",\n  ]);\n\n  const hasReadout = (): boolean => local.readout !== undefined && local.readout !== false;\n  const showHeader = (): boolean =>\n    local.label != null || hasReadout() || local.endAdornment != null || local.onReset != null;\n\n  return (\n    <div class={cn(\"smwb-value-slider\", local.class)}>\n      <Show when={showHeader()}>\n        <div class=\"smwb-value-slider__header\">\n          <Show when={local.label != null}>\n            <span class=\"smwb-value-slider__label\">{local.label}</span>\n          </Show>\n          <span class=\"smwb-value-slider__spacer\" />\n          <Show when={hasReadout()}>\n            <span class=\"smwb-value-slider__readout\">{formatReadout(local.readout, sliderProps.value)}</span>\n          </Show>\n          {local.endAdornment}\n          <Show when={local.onReset != null}>\n            <button\n              type=\"button\"\n              class=\"smwb-value-slider__reset\"\n              aria-label={local.resetLabel ?? \"Reset\"}\n              disabled={sliderProps.disabled}\n              onClick={() => local.onReset?.()}\n            >\n              <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" aria-hidden=\"true\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M3 12a9 9 0 1 0 3-6.7M3 4v4h4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              </svg>\n            </button>\n          </Show>\n        </div>\n      </Show>\n      <Slider {...sliderProps} />\n    </div>\n  );\n}\n\nexport default ValueSlider;\n"],"names":["formatReadout","readout","value","Array","isArray","String","ValueSlider","props","local","sliderProps","splitProps","hasReadout","undefined","showHeader","label","endAdornment","onReset","_el$","_tmpl$5","_$insert","_$createComponent","Show","when","children","_el$2","_tmpl$4","_el$4","firstChild","_el$3","_tmpl$","_el$5","_tmpl$2","_el$6","_tmpl$3","$$click","_$effect","_p$","_v$","resetLabel","_v$2","disabled","e","_$setAttribute","t","Slider","_$className","cn","class","_$delegateEvents"],"mappings":";;;;;AAkBA,MAAMA,IAAgBA,CACpBC,GACAC,MAEI,OAAOD,KAAY,aAAmBA,EAAQC,CAAK,IACnDC,MAAMC,QAAQF,CAAK,IAAU,GAAGA,EAAM,CAAC,CAAC,MAAMA,EAAM,CAAC,CAAC,KACnDA,KAAS,OAAO,KAAKG,OAAOH,CAAK;AASnC,SAASI,EAAYC,GAAsC;AAChE,QAAM,CAACC,GAAOC,CAAW,IAAIC,EAAWH,GAAO,CAC7C,WACA,gBACA,WACA,cACA,SACA,OAAO,CACR,GAEKI,IAAaA,MAAeH,EAAMP,YAAYW,UAAaJ,EAAMP,YAAY,IAC7EY,IAAaA,MACjBL,EAAMM,SAAS,QAAQH,OAAgBH,EAAMO,gBAAgB,QAAQP,EAAMQ,WAAW;AAExF,UAAA,MAAA;AAAA,QAAAC,IAAAC,EAAAA;AAAAC,WAAAA,EAAAF,GAAAG,EAEKC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAET,EAAAA;AAAAA,MAAY;AAAA,MAAA,IAAAU,WAAA;AAAA,YAAAC,IAAAC,EAAAA,GAAAC,IAAAF,EAAAG;AAAAR,eAAAA,EAAAK,GAAAJ,EAEnBC,GAAI;AAAA,UAAA,IAACC,OAAI;AAAA,mBAAEd,EAAMM,SAAS;AAAA,UAAI;AAAA,UAAA,IAAAS,WAAA;AAAA,gBAAAK,IAAAC,EAAAA;AAAAV,mBAAAA,EAAAS,GAAA,MACWpB,EAAMM,KAAK,GAAAc;AAAAA,UAAA;AAAA,QAAA,CAAA,GAAAF,CAAA,GAAAP,EAAAK,GAAAJ,EAGpDC,GAAI;AAAA,UAAA,IAACC,OAAI;AAAA,mBAAEX,EAAAA;AAAAA,UAAY;AAAA,UAAA,IAAAY,WAAA;AAAA,gBAAAO,IAAAC,EAAAA;AAAAZ,mBAAAA,EAAAW,GAAA,MACoB9B,EAAcQ,EAAMP,SAASQ,EAAYP,KAAK,CAAC,GAAA4B;AAAAA,UAAA;AAAA,QAAA,CAAA,GAAA,IAAA,GAAAX,EAAAK,GAAA,MAE1FhB,EAAMO,cAAY,IAAA,GAAAI,EAAAK,GAAAJ,EAClBC,GAAI;AAAA,UAAA,IAACC,OAAI;AAAA,mBAAEd,EAAMQ,WAAW;AAAA,UAAI;AAAA,UAAA,IAAAO,WAAA;AAAA,gBAAAS,IAAAC,EAAAA;AAAAD,mBAAAA,EAAAE,UAMpB,MAAM1B,EAAMQ,UAAAA,GAAWmB,EAAAC,CAAAA,MAAA;AAAA,kBAAAC,IAFpB7B,EAAM8B,cAAc,SAAOC,IAC7B9B,EAAY+B;AAAQH,qBAAAA,MAAAD,EAAAK,KAAAC,EAAAV,GAAA,cAAAI,EAAAK,IAAAJ,CAAA,GAAAE,MAAAH,EAAAO,MAAAX,EAAAQ,WAAAJ,EAAAO,IAAAJ,IAAAH;AAAAA,YAAA,GAAA;AAAA,cAAAK,GAAA7B;AAAAA,cAAA+B,GAAA/B;AAAAA,YAAAA,CAAA,GAAAoB;AAAAA,UAAA;AAAA,QAAA,CAAA,GAAA,IAAA,GAAAR;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAL,EAAAF,GAAAG,EAUrCwB,GAAWnC,CAAW,GAAA,IAAA,GAAA0B,EAAA,MAAAU,EAAA5B,GA1Bb6B,EAAG,qBAAqBtC,EAAMuC,KAAK,CAAC,CAAA,GAAA9B;AAAAA,EAAA,GAAA;AA6BpD;AAE2B+B,EAAA,CAAA,OAAA,CAAA;"}

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

@@ -0,0 +1,87 @@
+import { insert as a, createComponent as t, mergeProps as b, memo as s, effect as h, className as v, template as w } from "solid-js/web";
+import { mergeProps as C, splitProps as _, createSignal as c, For as M, Show as P } from "solid-js";
+import i from "clsx";
+import { Button as k } from "../../inputs/button/button.js";
+import { Menu as I } from "../menu/menu.js";
+import { MenuItem as O } from "../menu/menuItem.js";
+import { Icon as S } from "../../base/icon/icon.js";
+var $ = /* @__PURE__ */ w("<span>");
+function N(m) {
+  const p = C({
+    icon: "more_vert"
+  }, m), [r] = _(p, ["items", "icon", "placement", "aria-label", "disabled", "class"]), [u, g] = c(null), [d, o] = c(!1), l = () => {
+    o(!1);
+  }, f = (n) => {
+    n.disabled || (n.onSelect?.(), l());
+  };
+  return (() => {
+    var n = $();
+    return a(n, t(k, {
+      ref: (e) => {
+        g(e);
+      },
+      variant: "text",
+      size: "small",
+      get icon() {
+        return r.icon;
+      },
+      get "aria-label"() {
+        return r["aria-label"] ?? "More actions";
+      },
+      "aria-haspopup": "menu",
+      get disabled() {
+        return !!r.disabled;
+      },
+      onClick: () => {
+        o((e) => !e);
+      }
+    }), null), a(n, t(I, b({
+      get isOpen() {
+        return d();
+      },
+      onClose: l,
+      get anchorElement() {
+        return u();
+      }
+    }, () => r.placement ? {
+      placement: r.placement
+    } : {}, {
+      get children() {
+        return t(M, {
+          get each() {
+            return r.items;
+          },
+          children: (e) => t(O, {
+            get class() {
+              return i({
+                "smwb-overflow-menu__item--danger": e.danger
+              });
+            },
+            get disabled() {
+              return e.disabled;
+            },
+            onClick: () => f(e),
+            get children() {
+              return [t(P, {
+                get when() {
+                  return e.icon;
+                },
+                get children() {
+                  return s(() => typeof e.icon == "string")() ? t(S, {
+                    get name() {
+                      return e.icon;
+                    }
+                  }) : e.icon;
+                }
+              }), s(() => e.label)];
+            }
+          })
+        });
+      }
+    })), null), h(() => v(n, i("smwb-overflow-menu", r.class))), n;
+  })();
+}
+export {
+  N as OverflowMenu
+};
+//# sourceMappingURL=overflowMenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"overflowMenu.js","sources":["../../../../../src/components/navigation/overflowMenu/overflowMenu.tsx"],"sourcesContent":["import { type JSX, For, Show, createSignal, mergeProps, splitProps } from \"solid-js\";\nimport type { Placement } from \"@floating-ui/dom\";\nimport cn from \"clsx\";\nimport { Button } from \"../../inputs/button\";\nimport { Icon } from \"../../base/icon\";\nimport { Menu, MenuItem } from \"../menu\";\n\nexport interface OverflowMenuItem {\n  id: string;\n  label: string;\n  icon?: JSX.Element | string;\n  danger?: boolean;\n  disabled?: boolean;\n  onSelect?: () => void;\n}\n\nexport interface OverflowMenuProps {\n  items: OverflowMenuItem[];\n  /** Trigger icon name (default `more_vert`). */\n  icon?: string;\n  placement?: Placement;\n  \"aria-label\"?: string;\n  disabled?: boolean;\n  class?: string;\n}\n\n/**\n * A one-shot kebab / overflow menu: a trigger icon button wired to a floating\n * `Menu` over an `items` array, with open/close state baked in. The card 3-dot\n * menu every app hand-builds (button + absolutely-positioned surface + open\n * state) collapses to passing an items list.\n */\nexport function OverflowMenu(props: OverflowMenuProps): JSX.Element {\n  const merged = mergeProps({ icon: \"more_vert\" }, props);\n  const [local] = splitProps(merged, [\"items\", \"icon\", \"placement\", \"aria-label\", \"disabled\", \"class\"]);\n\n  const [anchor, setAnchor] = createSignal<HTMLElement | null>(null);\n  const [open, setOpen] = createSignal(false);\n  const close = (): void => {\n    setOpen(false);\n  };\n\n  const onItemClick = (item: OverflowMenuItem): void => {\n    if (item.disabled) return;\n    item.onSelect?.();\n    close();\n  };\n\n  return (\n    <span class={cn(\"smwb-overflow-menu\", local.class)}>\n      <Button\n        ref={(el) => {\n          setAnchor(el as HTMLElement);\n        }}\n        variant=\"text\"\n        size=\"small\"\n        icon={local.icon}\n        aria-label={local[\"aria-label\"] ?? \"More actions\"}\n        aria-haspopup=\"menu\"\n        disabled={!!local.disabled}\n        onClick={() => {\n          setOpen((value) => !value);\n        }}\n      />\n      <Menu\n        isOpen={open()}\n        onClose={close}\n        anchorElement={anchor()}\n        {...(local.placement ? { placement: local.placement } : {})}\n      >\n        <For each={local.items}>\n          {(item) => (\n            <MenuItem\n              class={cn({ \"smwb-overflow-menu__item--danger\": item.danger })}\n              disabled={item.disabled}\n              onClick={() => onItemClick(item)}\n            >\n              <Show when={item.icon}>\n                {typeof item.icon === \"string\" ? <Icon name={item.icon} /> : (item.icon as JSX.Element)}\n              </Show>\n              {item.label}\n            </MenuItem>\n          )}\n        </For>\n      </Menu>\n    </span>\n  );\n}\n\nexport default OverflowMenu;\n"],"names":["OverflowMenu","props","merged","mergeProps","icon","local","splitProps","anchor","setAnchor","createSignal","open","setOpen","close","onItemClick","item","disabled","onSelect","_el$","_tmpl$","_$insert","_$createComponent","Button","ref","el","variant","size","onClick","value","Menu","_$mergeProps","isOpen","onClose","anchorElement","placement","children","For","each","items","MenuItem","cn","danger","Show","when","_$memo","Icon","name","label","_$effect","_$className","class"],"mappings":";;;;;;;;AAgCO,SAASA,EAAaC,GAAuC;AAClE,QAAMC,IAASC,EAAW;AAAA,IAAEC,MAAM;AAAA,EAAA,GAAeH,CAAK,GAChD,CAACI,CAAK,IAAIC,EAAWJ,GAAQ,CAAC,SAAS,QAAQ,aAAa,cAAc,YAAY,OAAO,CAAC,GAE9F,CAACK,GAAQC,CAAS,IAAIC,EAAiC,IAAI,GAC3D,CAACC,GAAMC,CAAO,IAAIF,EAAa,EAAK,GACpCG,IAAQA,MAAY;AACxBD,IAAAA,EAAQ,EAAK;AAAA,EACf,GAEME,IAAcA,CAACC,MAAiC;AACpD,IAAIA,EAAKC,aACTD,EAAKE,WAAAA,GACLJ,EAAAA;AAAAA,EACF;AAEA,UAAA,MAAA;AAAA,QAAAK,IAAAC,EAAAA;AAAAC,WAAAA,EAAAF,GAAAG,EAEKC,GAAM;AAAA,MAAAC,KACCC,CAAAA,MAAO;AACXf,QAAAA,EAAUe,CAAiB;AAAA,MAC7B;AAAA,MACAC,SAAO;AAAA,MACPC,MAAI;AAAA,MAAA,IACJrB,OAAI;AAAA,eAAEC,EAAMD;AAAAA,MAAI;AAAA,MAAA,IAAA,eAAA;AAAA,eACJC,EAAM,YAAY,KAAK;AAAA,MAAc;AAAA,MAAA,iBAAA;AAAA,MAAA,IAEjDU,WAAQ;AAAA,eAAE,CAAC,CAACV,EAAMU;AAAAA,MAAQ;AAAA,MAC1BW,SAASA,MAAM;AACbf,QAAAA,EAASgB,CAAAA,MAAU,CAACA,CAAK;AAAA,MAC3B;AAAA,IAAA,CAAC,GAAA,IAAA,GAAAR,EAAAF,GAAAG,EAEFQ,GAAIC,EAAA;AAAA,MAAA,IACHC,SAAM;AAAA,eAAEpB,EAAAA;AAAAA,MAAM;AAAA,MACdqB,SAASnB;AAAAA,MAAK,IACdoB,gBAAa;AAAA,eAAEzB,EAAAA;AAAAA,MAAQ;AAAA,IAAA,GAAA,MAClBF,EAAM4B,YAAY;AAAA,MAAEA,WAAW5B,EAAM4B;AAAAA,IAAAA,IAAc,IAAE;AAAA,MAAA,IAAAC,WAAA;AAAA,eAAAd,EAEzDe,GAAG;AAAA,UAAA,IAACC,OAAI;AAAA,mBAAE/B,EAAMgC;AAAAA,UAAK;AAAA,UAAAH,UAClBpB,CAAAA,MAAIM,EACHkB,GAAQ;AAAA,YAAA,IAAA,QAAA;AAAA,qBACAC,EAAG;AAAA,gBAAE,oCAAoCzB,EAAK0B;AAAAA,cAAAA,CAAQ;AAAA,YAAC;AAAA,YAAA,IAC9DzB,WAAQ;AAAA,qBAAED,EAAKC;AAAAA,YAAQ;AAAA,YACvBW,SAASA,MAAMb,EAAYC,CAAI;AAAA,YAAC,IAAAoB,WAAA;AAAA,qBAAA,CAAAd,EAE/BqB,GAAI;AAAA,gBAAA,IAACC,OAAI;AAAA,yBAAE5B,EAAKV;AAAAA,gBAAI;AAAA,gBAAA,IAAA8B,WAAA;AAAA,yBAClBS,EAAA,MAAA,OAAO7B,EAAKV,QAAS,QAAQ,EAAA,IAAAgB,EAAIwB,GAAI;AAAA,oBAAA,IAACC,OAAI;AAAA,6BAAE/B,EAAKV;AAAAA,oBAAI;AAAA,kBAAA,CAAA,IAAQU,EAAKV;AAAAA,gBAAoB;AAAA,cAAA,CAAA,GAAAuC,EAAA,MAExF7B,EAAKgC,KAAK,CAAA;AAAA,YAAA;AAAA,UAAA,CAAA;AAAA,QAAA,CAEd;AAAA,MAAA;AAAA,IAAA,CAAA,CAAA,GAAA,IAAA,GAAAC,EAAA,MAAAC,EAAA/B,GAjCMsB,EAAG,sBAAsBlC,EAAM4C,KAAK,CAAC,CAAA,GAAAhC;AAAAA,EAAA,GAAA;AAsCtD;"}