@smwb/ui-solid 0.4.0 → 0.5.0

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/layout/appLayout/appLayout.js

@@ -1,76 +1,76 @@
-import { use as k, spread as S, mergeProps as T, insert as a, createComponent as s, setAttribute as c, effect as W, template as o, delegateEvents as A } from "solid-js/web";
-import { mergeProps as L, splitProps as P, Show as n } from "solid-js";
-import x from "clsx";
-import { createControllableState as H } from "../../../primitives/createControllableState.js";
-import { createId as I } from "../../../primitives/createId.js";
-import { mergeRefs as j } from "../../../primitives/mergeRefs.js";
-import { Icon as z } from "../../base/icon/icon.js";
-var E = /* @__PURE__ */ o("<div class=smwb-app-layout__header>"), R = /* @__PURE__ */ o("<div class=smwb-app-layout__collapse>"), V = /* @__PURE__ */ o("<aside class=smwb-app-layout__sidebar>"), q = /* @__PURE__ */ o("<div class=smwb-app-layout__footer>"), B = /* @__PURE__ */ o("<div><div class=smwb-app-layout__body><div class=smwb-app-layout__content>"), D = /* @__PURE__ */ o("<button type=button class=smwb-app-layout__collapse-btn>");
-const y = (d) => typeof d == "number" ? `${d}px` : d;
-function Q(d) {
-  const v = L({
+import { use as A, spread as L, mergeProps as P, insert as t, createComponent as s, setAttribute as c, effect as x, template as o, delegateEvents as H } from "solid-js/web";
+import { mergeProps as I, splitProps as j, children as m, Show as p } from "solid-js";
+import z from "clsx";
+import { createControllableState as E } from "../../../primitives/createControllableState.js";
+import { createId as R } from "../../../primitives/createId.js";
+import { mergeRefs as V } from "../../../primitives/mergeRefs.js";
+import { Icon as q } from "../../base/icon/icon.js";
+var B = /* @__PURE__ */ o("<div class=smwb-app-layout__header>"), D = /* @__PURE__ */ o("<div class=smwb-app-layout__collapse>"), F = /* @__PURE__ */ o("<aside class=smwb-app-layout__sidebar>"), G = /* @__PURE__ */ o("<div class=smwb-app-layout__footer>"), J = /* @__PURE__ */ o("<div><div class=smwb-app-layout__body><div class=smwb-app-layout__content>"), K = /* @__PURE__ */ o("<button type=button class=smwb-app-layout__collapse-btn>");
+const $ = (d) => typeof d == "number" ? `${d}px` : d;
+function Z(d) {
+  const S = I({
     sidebarWidth: 260,
     defaultSidebarCollapsed: !1,
     collapsible: !1,
     collapseToggleAriaLabel: "Toggle navigation",
     sidebarCollapsedWidth: 72,
     stickyHeader: !0
-  }, d), [e, C] = P(v, ["header", "sidebar", "footer", "sidebarWidth", "sidebarCollapsed", "defaultSidebarCollapsed", "onSidebarCollapsedChange", "collapsible", "collapseToggle", "collapseToggleAriaLabel", "sidebarCollapsedWidth", "stickyHeader", "class", "style", "children", "ref"]), [i, w] = H({
+  }, d), [e, k] = j(S, ["header", "sidebar", "footer", "sidebarWidth", "sidebarCollapsed", "defaultSidebarCollapsed", "onSidebarCollapsedChange", "collapsible", "collapseToggle", "collapseToggleAriaLabel", "sidebarCollapsedWidth", "stickyHeader", "class", "style", "children", "ref"]), [i, T] = E({
     value: () => e.sidebarCollapsed,
     defaultValue: e.defaultSidebarCollapsed,
-    onChange: (t) => e.onSidebarCollapsedChange?.(t)
-  }), m = I(), $ = () => ({
-    "--smui-app-sidebar-w": i() ? y(e.sidebarCollapsedWidth) : y(e.sidebarWidth),
+    onChange: (a) => e.onSidebarCollapsedChange?.(a)
+  }), g = R(), f = m(() => e.header), h = m(() => e.sidebar), _ = m(() => e.footer), W = () => ({
+    "--smui-app-sidebar-w": i() ? $(e.sidebarCollapsedWidth) : $(e.sidebarWidth),
     ...typeof e.style == "object" && e.style ? e.style : {}
   });
   return (() => {
-    var t = B(), u = t.firstChild, b = u.firstChild, g = j(e.ref);
-    return typeof g == "function" && k(g, t), S(t, T(C, {
+    var a = J(), u = a.firstChild, b = u.firstChild, y = V(e.ref);
+    return typeof y == "function" && A(y, a), L(a, P(k, {
       "data-testid": "app-layout",
       get class() {
-        return x("smwb-app-layout", {
+        return z("smwb-app-layout", {
           "smwb-app-layout_sticky-header": e.stickyHeader,
           "smwb-app-layout_collapsed": i()
         }, e.class);
       },
       get style() {
-        return $();
+        return W();
       }
-    }), !1, !0), a(t, s(n, {
+    }), !1, !0), t(a, s(p, {
       get when() {
-        return e.header;
+        return f();
       },
       get children() {
-        var l = E();
-        return a(l, () => e.header), l;
+        var l = B();
+        return t(l, f), l;
       }
-    }), u), a(u, s(n, {
+    }), u), t(u, s(p, {
       get when() {
-        return e.sidebar;
+        return h();
       },
       get children() {
-        var l = V();
-        return c(l, "id", m), a(l, s(n, {
+        var l = F();
+        return c(l, "id", g), t(l, s(p, {
           get when() {
             return e.collapsible;
           },
           get children() {
-            var f = R();
-            return a(f, s(n, {
+            var v = D();
+            return t(v, s(p, {
               get when() {
                 return e.collapseToggle;
               },
               get fallback() {
                 return (() => {
-                  var r = D();
-                  return r.$$click = () => w(!i()), c(r, "aria-controls", m), a(r, s(z, {
+                  var r = K();
+                  return r.$$click = () => T(!i()), c(r, "aria-controls", g), t(r, s(q, {
                     get name() {
                       return i() ? "chevron_right" : "chevron_left";
                     },
                     size: 20
-                  })), W((p) => {
-                    var h = e.collapseToggleAriaLabel, _ = !i();
-                    return h !== p.e && c(r, "aria-label", p.e = h), _ !== p.t && c(r, "aria-expanded", p.t = _), p;
+                  })), x((n) => {
+                    var C = e.collapseToggleAriaLabel, w = !i();
+                    return C !== n.e && c(r, "aria-label", n.e = C), w !== n.t && c(r, "aria-expanded", n.t = w), n;
                   }, {
                     e: void 0,
                     t: void 0
@@ -80,23 +80,23 @@ function Q(d) {
               get children() {
                 return e.collapseToggle;
               }
-            })), f;
+            })), v;
           }
-        }), null), a(l, () => e.sidebar, null), l;
+        }), null), t(l, h, null), l;
       }
-    }), b), a(b, () => e.children, null), a(b, s(n, {
+    }), b), t(b, () => e.children, null), t(b, s(p, {
       get when() {
-        return e.footer;
+        return _();
       },
       get children() {
-        var l = q();
-        return a(l, () => e.footer), l;
+        var l = G();
+        return t(l, _), l;
       }
-    }), null), t;
+    }), null), a;
   })();
 }
-A(["click"]);
+H(["click"]);
 export {
-  Q as AppLayout
+  Z as AppLayout
 };
 //# sourceMappingURL=appLayout.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"appLayout.js","sources":["../../../../../src/components/layout/appLayout/appLayout.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { createId } from \"../../../primitives/createId\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface AppLayoutProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /** Top bar slot (e.g. <AppBar />). Spans full width. */\n  header?: JSX.Element;\n  /** Side navigation slot (e.g. <Sidebar />). */\n  sidebar?: JSX.Element;\n  /** Footer slot, below the content. */\n  footer?: JSX.Element;\n  /** Sidebar width (px or any CSS length). */\n  sidebarWidth?: number | string;\n  /** Controlled collapsed state of the sidebar rail. */\n  sidebarCollapsed?: boolean;\n  /** Initial collapsed state (uncontrolled). */\n  defaultSidebarCollapsed?: boolean;\n  /** Called whenever the collapsed state changes. */\n  onSidebarCollapsedChange?: (collapsed: boolean) => void;\n  /** Renders a built-in toggle button to collapse/expand the sidebar. */\n  collapsible?: boolean;\n  /** Custom toggle node replacing the default icon button. */\n  collapseToggle?: JSX.Element;\n  /** Accessible label for the default toggle button. */\n  collapseToggleAriaLabel?: string;\n  /** Sidebar collapsed width. */\n  sidebarCollapsedWidth?: number | string;\n  /** Keep the header pinned while content scrolls. */\n  stickyHeader?: boolean;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst len = (v: number | string): string => (typeof v === \"number\" ? `${v}px` : v);\n\nexport function AppLayout(props: ParentProps<AppLayoutProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      sidebarWidth: 260 as number | string,\n      defaultSidebarCollapsed: false,\n      collapsible: false,\n      collapseToggleAriaLabel: \"Toggle navigation\",\n      sidebarCollapsedWidth: 72 as number | string,\n      stickyHeader: true,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"header\",\n    \"sidebar\",\n    \"footer\",\n    \"sidebarWidth\",\n    \"sidebarCollapsed\",\n    \"defaultSidebarCollapsed\",\n    \"onSidebarCollapsedChange\",\n    \"collapsible\",\n    \"collapseToggle\",\n    \"collapseToggleAriaLabel\",\n    \"sidebarCollapsedWidth\",\n    \"stickyHeader\",\n    \"class\",\n    \"style\",\n    \"children\",\n    \"ref\",\n  ]);\n\n  const [collapsed, setCollapsed] = createControllableState<boolean>({\n    value: () => local.sidebarCollapsed,\n    defaultValue: local.defaultSidebarCollapsed,\n    onChange: (next) => local.onSidebarCollapsedChange?.(next),\n  });\n\n  const sidebarId = createId();\n\n  const style = (): JSX.CSSProperties => ({\n    \"--smui-app-sidebar-w\": collapsed() ? len(local.sidebarCollapsedWidth) : len(local.sidebarWidth),\n    ...(typeof local.style === \"object\" && local.style ? local.style : {}),\n  });\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid=\"app-layout\"\n      class={cn(\n        \"smwb-app-layout\",\n        { \"smwb-app-layout_sticky-header\": local.stickyHeader, \"smwb-app-layout_collapsed\": collapsed() },\n        local.class\n      )}\n      style={style()}\n    >\n      <Show when={local.header}>\n        <div class=\"smwb-app-layout__header\">{local.header}</div>\n      </Show>\n      <div class=\"smwb-app-layout__body\">\n        <Show when={local.sidebar}>\n          <aside id={sidebarId} class=\"smwb-app-layout__sidebar\">\n            <Show when={local.collapsible}>\n              <div class=\"smwb-app-layout__collapse\">\n                <Show\n                  when={local.collapseToggle}\n                  fallback={\n                    <button\n                      type=\"button\"\n                      class=\"smwb-app-layout__collapse-btn\"\n                      aria-label={local.collapseToggleAriaLabel}\n                      aria-expanded={!collapsed()}\n                      aria-controls={sidebarId}\n                      onClick={() => setCollapsed(!collapsed())}\n                    >\n                      <Icon name={collapsed() ? \"chevron_right\" : \"chevron_left\"} size={20} />\n                    </button>\n                  }\n                >\n                  {local.collapseToggle}\n                </Show>\n              </div>\n            </Show>\n            {local.sidebar}\n          </aside>\n        </Show>\n        <div class=\"smwb-app-layout__content\">\n          {local.children}\n          <Show when={local.footer}>\n            <div class=\"smwb-app-layout__footer\">{local.footer}</div>\n          </Show>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default AppLayout;\n"],"names":["len","v","AppLayout","props","merged","mergeProps","sidebarWidth","defaultSidebarCollapsed","collapsible","collapseToggleAriaLabel","sidebarCollapsedWidth","stickyHeader","local","rest","splitProps","collapsed","setCollapsed","createControllableState","value","sidebarCollapsed","defaultValue","onChange","next","onSidebarCollapsedChange","sidebarId","createId","style","_el$","_tmpl$5","_el$3","firstChild","_el$6","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","_$insert","_$createComponent","Show","when","header","children","_el$2","_tmpl$","sidebar","_el$4","_tmpl$3","_$setAttribute","_el$5","_tmpl$2","collapseToggle","fallback","_el$8","_tmpl$6","$$click","Icon","name","size","_$effect","_p$","_v$","_v$2","e","t","undefined","footer","_el$7","_tmpl$4","_$delegateEvents"],"mappings":";;;;;;;;AAmCA,MAAMA,IAAMA,CAACC,MAAgC,OAAOA,KAAM,WAAW,GAAGA,CAAC,OAAOA;AAEzE,SAASC,EAAUC,GAAiD;AACzE,QAAMC,IAASC,EACb;AAAA,IACEC,cAAc;AAAA,IACdC,yBAAyB;AAAA,IACzBC,aAAa;AAAA,IACbC,yBAAyB;AAAA,IACzBC,uBAAuB;AAAA,IACvBC,cAAc;AAAA,EAAA,GAEhBR,CACF,GACM,CAACS,GAAOC,CAAI,IAAIC,EAAWV,GAAQ,CACvC,UACA,WACA,UACA,gBACA,oBACA,2BACA,4BACA,eACA,kBACA,2BACA,yBACA,gBACA,SACA,SACA,YACA,KAAK,CACN,GAEK,CAACW,GAAWC,CAAY,IAAIC,EAAiC;AAAA,IACjEC,OAAOA,MAAMN,EAAMO;AAAAA,IACnBC,cAAcR,EAAML;AAAAA,IACpBc,UAAWC,CAAAA,MAASV,EAAMW,2BAA2BD,CAAI;AAAA,EAAA,CAC1D,GAEKE,IAAYC,EAAAA,GAEZC,IAAQA,OAA0B;AAAA,IACtC,wBAAwBX,MAAcf,EAAIY,EAAMF,qBAAqB,IAAIV,EAAIY,EAAMN,YAAY;AAAA,IAC/F,GAAI,OAAOM,EAAMc,SAAU,YAAYd,EAAMc,QAAQd,EAAMc,QAAQ,CAAA;AAAA,EAAC;AAGtE,UAAA,MAAA;AAAA,QAAAC,IAAAC,EAAAA,GAAAC,IAAAF,EAAAG,YAAAC,IAAAF,EAAAC,YAAAE,IAGSC,EAAUrB,EAAMsB,GAAG;AAAC,kBAAAF,KAAA,cAAAG,EAAAH,GAAAL,CAAA,GAAAS,EAAAT,GAAAU,EADrBxB,GAAI;AAAA,MAAA,eAEI;AAAA,MAAY,IAAA,QAAA;AAAA,eACjByB,EACL,mBACA;AAAA,UAAE,iCAAiC1B,EAAMD;AAAAA,UAAc,6BAA6BI,EAAAA;AAAAA,QAAU,GAC9FH,EAAM2B,KACR;AAAA,MAAC;AAAA,MAAA,IACDb,QAAK;AAAA,eAAEA,EAAAA;AAAAA,MAAO;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAc,EAAAb,GAAAc,EAEbC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAE/B,EAAMgC;AAAAA,MAAM;AAAA,MAAA,IAAAC,WAAA;AAAA,YAAAC,IAAAC,EAAAA;AAAAP,eAAAA,EAAAM,GAAA,MACgBlC,EAAMgC,MAAM,GAAAE;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAAjB,CAAA,GAAAW,EAAAX,GAAAY,EAGjDC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAE/B,EAAMoC;AAAAA,MAAO;AAAA,MAAA,IAAAH,WAAA;AAAA,YAAAI,IAAAC,EAAAA;AAAAC,eAAAA,EAAAF,GAAA,MACZzB,CAAS,GAAAgB,EAAAS,GAAAR,EACjBC,GAAI;AAAA,UAAA,IAACC,OAAI;AAAA,mBAAE/B,EAAMJ;AAAAA,UAAW;AAAA,UAAA,IAAAqC,WAAA;AAAA,gBAAAO,IAAAC,EAAAA;AAAAb,mBAAAA,EAAAY,GAAAX,EAExBC,GAAI;AAAA,cAAA,IACHC,OAAI;AAAA,uBAAE/B,EAAM0C;AAAAA,cAAc;AAAA,cAAA,IAC1BC,WAAQ;AAAA,wBAAA,MAAA;AAAA,sBAAAC,IAAAC,EAAAA;AAAAD,yBAAAA,EAAAE,UAOK,MAAM1C,EAAa,CAACD,GAAW,GAACoC,EAAAK,GAAA,iBAD1BhC,CAAS,GAAAgB,EAAAgB,GAAAf,EAGvBkB,GAAI;AAAA,oBAAA,IAACC,OAAI;AAAA,6BAAE7C,EAAAA,IAAc,kBAAkB;AAAA,oBAAc;AAAA,oBAAE8C,MAAM;AAAA,kBAAA,CAAE,CAAA,GAAAC,EAAAC,CAAAA,MAAA;AAAA,wBAAAC,IALxDpD,EAAMH,yBAAuBwD,IAC1B,CAAClD,EAAAA;AAAWiD,2BAAAA,MAAAD,EAAAG,KAAAf,EAAAK,GAAA,cAAAO,EAAAG,IAAAF,CAAA,GAAAC,MAAAF,EAAAI,KAAAhB,EAAAK,GAAA,iBAAAO,EAAAI,IAAAF,CAAA,GAAAF;AAAAA,kBAAA,GAAA;AAAA,oBAAAG,GAAAE;AAAAA,oBAAAD,GAAAC;AAAAA,kBAAAA,CAAA,GAAAZ;AAAAA,gBAAA,GAAA;AAAA,cAAA;AAAA,cAAA,IAAAX,WAAA;AAAA,uBAQ9BjC,EAAM0C;AAAAA,cAAc;AAAA,YAAA,CAAA,CAAA,GAAAF;AAAAA,UAAA;AAAA,QAAA,CAAA,GAAA,IAAA,GAAAZ,EAAAS,GAAA,MAI1BrC,EAAMoC,SAAO,IAAA,GAAAC;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAAlB,CAAA,GAAAS,EAAAT,GAAA,MAIfnB,EAAMiC,UAAQ,IAAA,GAAAL,EAAAT,GAAAU,EACdC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAE/B,EAAMyD;AAAAA,MAAM;AAAA,MAAA,IAAAxB,WAAA;AAAA,YAAAyB,IAAAC,EAAAA;AAAA/B,eAAAA,EAAA8B,GAAA,MACgB1D,EAAMyD,MAAM,GAAAC;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAA3C;AAAAA,EAAA,GAAA;AAM9D;AAEyB6C,EAAA,CAAA,OAAA,CAAA;"}
+{"version":3,"file":"appLayout.js","sources":["../../../../../src/components/layout/appLayout/appLayout.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { createId } from \"../../../primitives/createId\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface AppLayoutProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /** Top bar slot (e.g. <AppBar />). Spans full width. */\n  header?: JSX.Element;\n  /** Side navigation slot (e.g. <Sidebar />). */\n  sidebar?: JSX.Element;\n  /** Footer slot, below the content. */\n  footer?: JSX.Element;\n  /** Sidebar width (px or any CSS length). */\n  sidebarWidth?: number | string;\n  /** Controlled collapsed state of the sidebar rail. */\n  sidebarCollapsed?: boolean;\n  /** Initial collapsed state (uncontrolled). */\n  defaultSidebarCollapsed?: boolean;\n  /** Called whenever the collapsed state changes. */\n  onSidebarCollapsedChange?: (collapsed: boolean) => void;\n  /** Renders a built-in toggle button to collapse/expand the sidebar. */\n  collapsible?: boolean;\n  /** Custom toggle node replacing the default icon button. */\n  collapseToggle?: JSX.Element;\n  /** Accessible label for the default toggle button. */\n  collapseToggleAriaLabel?: string;\n  /** Sidebar collapsed width. */\n  sidebarCollapsedWidth?: number | string;\n  /** Keep the header pinned while content scrolls. */\n  stickyHeader?: boolean;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst len = (v: number | string): string => (typeof v === \"number\" ? `${v}px` : v);\n\nexport function AppLayout(props: ParentProps<AppLayoutProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      sidebarWidth: 260 as number | string,\n      defaultSidebarCollapsed: false,\n      collapsible: false,\n      collapseToggleAriaLabel: \"Toggle navigation\",\n      sidebarCollapsedWidth: 72 as number | string,\n      stickyHeader: true,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"header\",\n    \"sidebar\",\n    \"footer\",\n    \"sidebarWidth\",\n    \"sidebarCollapsed\",\n    \"defaultSidebarCollapsed\",\n    \"onSidebarCollapsedChange\",\n    \"collapsible\",\n    \"collapseToggle\",\n    \"collapseToggleAriaLabel\",\n    \"sidebarCollapsedWidth\",\n    \"stickyHeader\",\n    \"class\",\n    \"style\",\n    \"children\",\n    \"ref\",\n  ]);\n\n  const [collapsed, setCollapsed] = createControllableState<boolean>({\n    value: () => local.sidebarCollapsed,\n    defaultValue: local.defaultSidebarCollapsed,\n    onChange: (next) => local.onSidebarCollapsedChange?.(next),\n  });\n\n  const sidebarId = createId();\n\n  // Resolve slot props through `children()` so each is created once, in THIS\n  // component's reactive context. A pre-created element passed straight into a\n  // <Show> gets its hydration key at the caller's position but renders at the\n  // Show's, so the hydration walk can't find it (\"Unable to find DOM nodes for\n  // key\"). Resolving here keeps the key sequence aligned on server and client.\n  const headerSlot = children(() => local.header);\n  const sidebarSlot = children(() => local.sidebar);\n  const footerSlot = children(() => local.footer);\n\n  const style = (): JSX.CSSProperties => ({\n    \"--smui-app-sidebar-w\": collapsed() ? len(local.sidebarCollapsedWidth) : len(local.sidebarWidth),\n    ...(typeof local.style === \"object\" && local.style ? local.style : {}),\n  });\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid=\"app-layout\"\n      class={cn(\n        \"smwb-app-layout\",\n        { \"smwb-app-layout_sticky-header\": local.stickyHeader, \"smwb-app-layout_collapsed\": collapsed() },\n        local.class\n      )}\n      style={style()}\n    >\n      <Show when={headerSlot()}>\n        <div class=\"smwb-app-layout__header\">{headerSlot()}</div>\n      </Show>\n      <div class=\"smwb-app-layout__body\">\n        <Show when={sidebarSlot()}>\n          <aside id={sidebarId} class=\"smwb-app-layout__sidebar\">\n            <Show when={local.collapsible}>\n              <div class=\"smwb-app-layout__collapse\">\n                <Show\n                  when={local.collapseToggle}\n                  fallback={\n                    <button\n                      type=\"button\"\n                      class=\"smwb-app-layout__collapse-btn\"\n                      aria-label={local.collapseToggleAriaLabel}\n                      aria-expanded={!collapsed()}\n                      aria-controls={sidebarId}\n                      onClick={() => setCollapsed(!collapsed())}\n                    >\n                      <Icon name={collapsed() ? \"chevron_right\" : \"chevron_left\"} size={20} />\n                    </button>\n                  }\n                >\n                  {local.collapseToggle}\n                </Show>\n              </div>\n            </Show>\n            {sidebarSlot()}\n          </aside>\n        </Show>\n        <div class=\"smwb-app-layout__content\">\n          {local.children}\n          <Show when={footerSlot()}>\n            <div class=\"smwb-app-layout__footer\">{footerSlot()}</div>\n          </Show>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default AppLayout;\n"],"names":["len","v","AppLayout","props","merged","mergeProps","sidebarWidth","defaultSidebarCollapsed","collapsible","collapseToggleAriaLabel","sidebarCollapsedWidth","stickyHeader","local","rest","splitProps","collapsed","setCollapsed","createControllableState","value","sidebarCollapsed","defaultValue","onChange","next","onSidebarCollapsedChange","sidebarId","createId","headerSlot","children","header","sidebarSlot","sidebar","footerSlot","footer","style","_el$","_tmpl$5","_el$3","firstChild","_el$6","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","_$insert","_$createComponent","Show","when","_el$2","_tmpl$","_el$4","_tmpl$3","_$setAttribute","_el$5","_tmpl$2","collapseToggle","fallback","_el$8","_tmpl$6","$$click","Icon","name","size","_$effect","_p$","_v$","_v$2","e","t","undefined","_el$7","_tmpl$4","_$delegateEvents"],"mappings":"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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"bottomBar.js","sources":["../../../../../src/components/navigation/bottomBar/bottomBar.tsx"],"sourcesContent":["import { type JSX, For, Show, createSignal, mergeProps, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { Ripple, type RippleActionsRef } from \"../../base/ripple\";\nimport { Menu, MenuItem, MenuItemIcon, MenuItemText } from \"../menu\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../primitives/callHandler\";\nimport type { SidebarMenuItemProps } from \"../sidebar/sidebar\";\n\nexport type BottomBarMenuItemProps = SidebarMenuItemProps;\n\nexport interface BottomBarProps extends JSX.HTMLAttributes<HTMLElement> {\n  menuItems?: SidebarMenuItemProps[];\n  visibleCount?: number;\n  activeItem?: number | null;\n  defaultActiveItem?: number | null;\n  onActiveItemChange?: (index: number) => void;\n  overflowMenuAriaLabel?: string;\n  ref?: Ref<HTMLElement>;\n}\n\ninterface BarItemProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  icon?: JSX.Element;\n  title?: string;\n  isActive?: boolean;\n  as?: string | undefined;\n  href?: string | undefined;\n  ref?: Ref<HTMLDivElement>;\n}\n\nfunction BarItem(props: BarItemProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\"isActive\", \"icon\", \"title\", \"as\", \"href\", \"ref\"]);\n  let rippleActions: RippleActionsRef | undefined;\n  const onPointerDown = (event: PointerEvent): void => {\n    rippleActions?.onRipple(event);\n  };\n  return (\n    <Dynamic\n      component={local.as ?? \"div\"}\n      ref={mergeRefs(local.ref)}\n      href={local.href}\n      role=\"menuitem\"\n      class={cn(\"smwb-bottom-bar__item\", { \"smwb-bottom-bar__item_active\": local.isActive })}\n      onPointerDown={onPointerDown}\n      {...rest}\n    >\n      <Show when={local.icon}>\n        <span class=\"smwb-bottom-bar__item-icon\">{local.icon}</span>\n      </Show>\n      <Show when={local.title}>\n        <span class=\"smwb-bottom-bar__item-title\">{local.title}</span>\n      </Show>\n      <Ripple actionRef={(actions) => (rippleActions = actions)} />\n    </Dynamic>\n  );\n}\n\nexport function BottomBar(props: BottomBarProps): JSX.Element {\n  const merged = mergeProps(\n    {\n      menuItems: [] as SidebarMenuItemProps[],\n      visibleCount: 4,\n      defaultActiveItem: null as number | null,\n      overflowMenuAriaLabel: \"More navigation\",\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"menuItems\",\n    \"visibleCount\",\n    \"activeItem\",\n    \"defaultActiveItem\",\n    \"onActiveItemChange\",\n    \"overflowMenuAriaLabel\",\n    \"ref\",\n  ]);\n\n  const [activeItem, setActiveItem] = createControllableState<number | null>({\n    value: () => local.activeItem,\n    defaultValue: local.defaultActiveItem,\n    onChange: (next) => {\n      if (next !== null) local.onActiveItemChange?.(next);\n    },\n  });\n  const [overflowOpen, setOverflowOpen] = createSignal(false);\n  const [overflowAnchor, setOverflowAnchor] = createSignal<HTMLElement | null>(null);\n\n  const safeVisibleCount = (): number => Math.max(0, local.visibleCount);\n  const visibleItems = (): SidebarMenuItemProps[] => local.menuItems.slice(0, safeVisibleCount());\n  const overflowItems = (): SidebarMenuItemProps[] => local.menuItems.slice(safeVisibleCount());\n  const hasOverflow = (): boolean => overflowItems().length > 0;\n  const overflowActive = (): boolean =>\n    hasOverflow() && activeItem() !== null && (activeItem() as number) >= safeVisibleCount();\n\n  return (\n    <nav {...rest} ref={mergeRefs(local.ref)} class={cn(\"smwb-bottom-bar\", local.class)} role=\"navigation\">\n      <div class=\"smwb-bottom-bar__nav\" role=\"menubar\">\n        <For each={visibleItems()}>\n          {(item, idx) => (\n            <BarItem\n              as={item.as}\n              isActive={activeItem() === idx()}\n              onClick={(event) => {\n                setActiveItem(idx());\n                callHandler(item.onClick, event);\n              }}\n              icon={item.icon}\n              title={item.title}\n              href={item.href}\n            />\n          )}\n        </For>\n        <Show when={hasOverflow()}>\n          <BarItem\n            ref={(el) => setOverflowAnchor(el as HTMLElement)}\n            isActive={overflowActive()}\n            onClick={() => setOverflowOpen((prev) => !prev)}\n            icon={<Icon name=\"menu\" size={24} />}\n            aria-label={local.overflowMenuAriaLabel}\n            aria-haspopup=\"menu\"\n            aria-expanded={overflowOpen()}\n          />\n        </Show>\n      </div>\n      <Show when={hasOverflow()}>\n        <Menu\n          isOpen={overflowOpen()}\n          onClose={() => setOverflowOpen(false)}\n          anchorElement={overflowAnchor()}\n          placement=\"top\"\n          dense\n        >\n          <For each={overflowItems()}>\n            {(item, idx) => {\n              const itemIndex = (): number => safeVisibleCount() + idx();\n              return (\n                <MenuItem\n                  selected={activeItem() === itemIndex()}\n                  href={item.href}\n                  onClick={(event) => {\n                    setActiveItem(itemIndex());\n                    callHandler(\n                      item.onClick,\n                      event as unknown as MouseEvent & { currentTarget: HTMLDivElement; target: Element }\n                    );\n                    setOverflowOpen(false);\n                  }}\n                >\n                  <Show when={item.icon}>\n                    <MenuItemIcon>{item.icon}</MenuItemIcon>\n                  </Show>\n                  <MenuItemText inset={!item.icon}>{item.title}</MenuItemText>\n                </MenuItem>\n              );\n            }}\n          </For>\n        </Menu>\n      </Show>\n    </nav>\n  );\n}\n\nexport default BottomBar;\n"],"names":["BarItem","props","local","rest","splitProps","rippleActions","_$createComponent","Dynamic","_$mergeProps","component","as","ref","r$","_ref$","mergeRefs","href","role","cn","isActive","onPointerDown","event","onRipple","children","Show","when","icon","_el$","_tmpl$","_$insert","title","_el$2","_tmpl$2","Ripple","actionRef","actions","BottomBar","merged","mergeProps","menuItems","visibleCount","defaultActiveItem","overflowMenuAriaLabel","activeItem","setActiveItem","createControllableState","value","defaultValue","onChange","next","onActiveItemChange","overflowOpen","setOverflowOpen","createSignal","overflowAnchor","setOverflowAnchor","safeVisibleCount","Math","max","visibleItems","slice","overflowItems","hasOverflow","length","overflowActive","_el$3","_tmpl$3","_el$4","firstChild","_ref$2","_$use","_$spread","class","For","each","item","idx","onClick","callHandler","el","prev","Icon","name","size","Menu","isOpen","onClose","anchorElement","placement","dense","itemIndex","MenuItem","selected","MenuItemIcon","MenuItemText","inset"],"mappings":";;;;;;;;;;;;;AAgCA,SAASA,EAAQC,GAAkC;AACjD,QAAM,CAACC,GAAOC,CAAI,IAAIC,EAAWH,GAAO,CAAC,YAAY,QAAQ,SAAS,MAAM,QAAQ,KAAK,CAAC;AAC1F,MAAII;AAIJ,SAAAC,EACGC,GAAOC,EAAA;AAAA,IAAA,IACNC,YAAS;AAAA,aAAEP,EAAMQ,MAAM;AAAA,IAAK;AAAA,IAAAC,IAAAC,GAAA;AAAA,UAAAC,IACvBC,EAAUZ,EAAMS,GAAG;AAAC,aAAAE,KAAA,cAAAA,EAAAD,CAAA;AAAA,IAAA;AAAA,IAAA,IACzBG,OAAI;AAAA,aAAEb,EAAMa;AAAAA,IAAI;AAAA,IAChBC,MAAI;AAAA,IAAA,IAAA,QAAA;AAAA,aACGC,EAAG,yBAAyB;AAAA,QAAE,gCAAgCf,EAAMgB;AAAAA,MAAAA,CAAU;AAAA,IAAC;AAAA,IACtFC,eAVkBA,CAACC,MAA8B;AACnDf,MAAAA,GAAegB,SAASD,CAAK;AAAA,IAC/B;AAAA,EAQID,GACIhB,GAAI;AAAA,IAAA,IAAAmB,WAAA;AAAA,aAAA,CAAAhB,EAEPiB,GAAI;AAAA,QAAA,IAACC,OAAI;AAAA,iBAAEtB,EAAMuB;AAAAA,QAAI;AAAA,QAAA,IAAAH,WAAA;AAAA,cAAAI,IAAAC,EAAAA;AAAAC,iBAAAA,EAAAF,GAAA,MACsBxB,EAAMuB,IAAI,GAAAC;AAAAA,QAAA;AAAA,MAAA,CAAA,GAAApB,EAErDiB,GAAI;AAAA,QAAA,IAACC,OAAI;AAAA,iBAAEtB,EAAM2B;AAAAA,QAAK;AAAA,QAAA,IAAAP,WAAA;AAAA,cAAAQ,IAAAC,EAAAA;AAAAH,iBAAAA,EAAAE,GAAA,MACsB5B,EAAM2B,KAAK,GAAAC;AAAAA,QAAA;AAAA,MAAA,CAAA,GAAAxB,EAEvD0B,GAAM;AAAA,QAACC,WAAYC,OAAa7B,IAAgB6B;AAAAA,MAAAA,CAAQ,CAAA;AAAA,IAAA;AAAA,EAAA,CAAA,CAAA;AAG/D;AAEO,SAASC,GAAUlC,GAAoC;AAC5D,QAAMmC,IAASC,EACb;AAAA,IACEC,WAAW,CAAA;AAAA,IACXC,cAAc;AAAA,IACdC,mBAAmB;AAAA,IACnBC,uBAAuB;AAAA,EAAA,GAEzBxC,CACF,GACM,CAACC,GAAOC,CAAI,IAAIC,EAAWgC,GAAQ,CACvC,SACA,aACA,gBACA,cACA,qBACA,sBACA,yBACA,KAAK,CACN,GAEK,CAACM,GAAYC,CAAa,IAAIC,EAAuC;AAAA,IACzEC,OAAOA,MAAM3C,EAAMwC;AAAAA,IACnBI,cAAc5C,EAAMsC;AAAAA,IACpBO,UAAWC,CAAAA,MAAS;AAClB,MAAIA,MAAS,QAAM9C,EAAM+C,qBAAqBD,CAAI;AAAA,IACpD;AAAA,EAAA,CACD,GACK,CAACE,GAAcC,CAAe,IAAIC,EAAa,EAAK,GACpD,CAACC,GAAgBC,CAAiB,IAAIF,EAAiC,IAAI,GAE3EG,IAAmBA,MAAcC,KAAKC,IAAI,GAAGvD,EAAMqC,YAAY,GAC/DmB,IAAeA,MAA8BxD,EAAMoC,UAAUqB,MAAM,GAAGJ,GAAkB,GACxFK,IAAgBA,MAA8B1D,EAAMoC,UAAUqB,MAAMJ,GAAkB,GACtFM,IAAcA,MAAeD,EAAAA,EAAgBE,SAAS,GACtDC,IAAiBA,MACrBF,OAAiBnB,QAAiB,QAASA,EAAAA,KAA2Ba,EAAAA;AAExE,UAAA,MAAA;AAAA,QAAAS,IAAAC,EAAAA,GAAAC,IAAAF,EAAAG,YAAAC,IACsBtD,EAAUZ,EAAMS,GAAG;AAAC,kBAAAyD,KAAA,cAAAC,EAAAD,GAAAJ,CAAA,GAAAM,EAAAN,GAAAxD,EAA/BL,GAAI;AAAA,MAAA,IAAA,QAAA;AAAA,eAAoCc,EAAG,mBAAmBf,EAAMqE,KAAK;AAAA,MAAC;AAAA,MAAA,MAAO;AAAA,IAAA,CAAY,GAAA,IAAA,EAAA,GAAA3C,EAAAsC,GAAA5D,EAEjGkE,GAAG;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEf,EAAAA;AAAAA,MAAc;AAAA,MAAApC,UACtBA,CAACoD,GAAMC,MAAGrE,EACRN,GAAO;AAAA,QAAA,IACNU,KAAE;AAAA,iBAAEgE,EAAKhE;AAAAA,QAAE;AAAA,QAAA,IACXQ,WAAQ;AAAA,iBAAEwB,EAAAA,MAAiBiC,EAAAA;AAAAA,QAAK;AAAA,QAChCC,SAAUxD,CAAAA,MAAU;AAClBuB,UAAAA,EAAcgC,GAAK,GACnBE,EAAYH,EAAKE,SAASxD,CAAK;AAAA,QACjC;AAAA,QAAC,IACDK,OAAI;AAAA,iBAAEiD,EAAKjD;AAAAA,QAAI;AAAA,QAAA,IACfI,QAAK;AAAA,iBAAE6C,EAAK7C;AAAAA,QAAK;AAAA,QAAA,IACjBd,OAAI;AAAA,iBAAE2D,EAAK3D;AAAAA,QAAI;AAAA,MAAA,CAAA;AAAA,IAAA,CAElB,GAAA,IAAA,GAAAa,EAAAsC,GAAA5D,EAEFiB,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEqC,EAAAA;AAAAA,MAAa;AAAA,MAAA,IAAAvC,WAAA;AAAA,eAAAhB,EACtBN,GAAO;AAAA,UAAAW,KACAmE,CAAAA,MAAOxB,EAAkBwB,CAAiB;AAAA,UAAC,IACjD5D,WAAQ;AAAA,mBAAE6C,EAAAA;AAAAA,UAAgB;AAAA,UAC1Ba,SAASA,MAAMzB,EAAiB4B,CAAAA,MAAS,CAACA,CAAI;AAAA,UAAC,IAC/CtD,OAAI;AAAA,mBAAAnB,EAAG0E,GAAI;AAAA,cAACC,MAAI;AAAA,cAAQC,MAAM;AAAA,YAAA,CAAE;AAAA,UAAA;AAAA,UAAA,IAAA,eAAA;AAAA,mBACpBhF,EAAMuC;AAAAA,UAAqB;AAAA,UAAA,iBAAA;AAAA,UAAA,IAAA,kBAAA;AAAA,mBAExBS,EAAAA;AAAAA,UAAc;AAAA,QAAA,CAAA;AAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAtB,EAAAoC,GAAA1D,EAIlCiB,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEqC,EAAAA;AAAAA,MAAa;AAAA,MAAA,IAAAvC,WAAA;AAAA,eAAAhB,EACtB6E,GAAI;AAAA,UAAA,IACHC,SAAM;AAAA,mBAAElC,EAAAA;AAAAA,UAAc;AAAA,UACtBmC,SAASA,MAAMlC,EAAgB,EAAK;AAAA,UAAC,IACrCmC,gBAAa;AAAA,mBAAEjC,EAAAA;AAAAA,UAAgB;AAAA,UAC/BkC,WAAS;AAAA,UACTC,OAAK;AAAA,UAAA,IAAAlE,WAAA;AAAA,mBAAAhB,EAEJkE,GAAG;AAAA,cAAA,IAACC,OAAI;AAAA,uBAAEb,EAAAA;AAAAA,cAAe;AAAA,cAAAtC,UACvBA,CAACoD,GAAMC,MAAQ;AACd,sBAAMc,IAAYA,MAAclC,EAAAA,IAAqBoB,EAAAA;AACrD,uBAAArE,EACGoF,GAAQ;AAAA,kBAAA,IACPC,WAAQ;AAAA,2BAAEjD,EAAAA,MAAiB+C,EAAAA;AAAAA,kBAAW;AAAA,kBAAA,IACtC1E,OAAI;AAAA,2BAAE2D,EAAK3D;AAAAA,kBAAI;AAAA,kBACf6D,SAAUxD,CAAAA,MAAU;AAClBuB,oBAAAA,EAAc8C,GAAW,GACzBZ,EACEH,EAAKE,SACLxD,CACF,GACA+B,EAAgB,EAAK;AAAA,kBACvB;AAAA,kBAAC,IAAA7B,WAAA;AAAA,2BAAA,CAAAhB,EAEAiB,GAAI;AAAA,sBAAA,IAACC,OAAI;AAAA,+BAAEkD,EAAKjD;AAAAA,sBAAI;AAAA,sBAAA,IAAAH,WAAA;AAAA,+BAAAhB,EAClBsF,GAAY;AAAA,0BAAA,IAAAtE,WAAA;AAAA,mCAAEoD,EAAKjD;AAAAA,0BAAI;AAAA,wBAAA,CAAA;AAAA,sBAAA;AAAA,oBAAA,CAAA,GAAAnB,EAEzBuF,GAAY;AAAA,sBAAA,IAACC,QAAK;AAAA,+BAAE,CAACpB,EAAKjD;AAAAA,sBAAI;AAAA,sBAAA,IAAAH,WAAA;AAAA,+BAAGoD,EAAK7C;AAAAA,sBAAK;AAAA,oBAAA,CAAA,CAAA;AAAA,kBAAA;AAAA,gBAAA,CAAA;AAAA,cAGlD;AAAA,YAAA,CAAC;AAAA,UAAA;AAAA,QAAA,CAAA;AAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAmC;AAAAA,EAAA,GAAA;AAMb;"}
+{"version":3,"file":"bottomBar.js","sources":["../../../../../src/components/navigation/bottomBar/bottomBar.tsx"],"sourcesContent":["import { type JSX, For, Show, children, createSignal, mergeProps, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { Ripple, type RippleActionsRef } from \"../../base/ripple\";\nimport { Menu, MenuItem, MenuItemIcon, MenuItemText } from \"../menu\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../primitives/callHandler\";\nimport type { SidebarMenuItemProps } from \"../sidebar/sidebar\";\n\nexport type BottomBarMenuItemProps = SidebarMenuItemProps;\n\nexport interface BottomBarProps extends JSX.HTMLAttributes<HTMLElement> {\n  menuItems?: SidebarMenuItemProps[];\n  visibleCount?: number;\n  activeItem?: number | null;\n  defaultActiveItem?: number | null;\n  onActiveItemChange?: (index: number) => void;\n  overflowMenuAriaLabel?: string;\n  ref?: Ref<HTMLElement>;\n}\n\ninterface BarItemProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  icon?: JSX.Element;\n  title?: string;\n  isActive?: boolean;\n  as?: string | undefined;\n  href?: string | undefined;\n  ref?: Ref<HTMLDivElement>;\n}\n\nfunction BarItem(props: BarItemProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\"isActive\", \"icon\", \"title\", \"as\", \"href\", \"ref\"]);\n  let rippleActions: RippleActionsRef | undefined;\n  // Resolve the icon in this item's context so a pre-created element passed via\n  // menuItems hydrates (see the same fix in Sidebar/AppLayout).\n  const icon = children(() => local.icon);\n  const onPointerDown = (event: PointerEvent): void => {\n    rippleActions?.onRipple(event);\n  };\n  return (\n    <Dynamic\n      component={local.as ?? \"div\"}\n      ref={mergeRefs(local.ref)}\n      href={local.href}\n      role=\"menuitem\"\n      class={cn(\"smwb-bottom-bar__item\", { \"smwb-bottom-bar__item_active\": local.isActive })}\n      onPointerDown={onPointerDown}\n      {...rest}\n    >\n      <Show when={icon()}>\n        <span class=\"smwb-bottom-bar__item-icon\">{icon()}</span>\n      </Show>\n      <Show when={local.title}>\n        <span class=\"smwb-bottom-bar__item-title\">{local.title}</span>\n      </Show>\n      <Ripple actionRef={(actions) => (rippleActions = actions)} />\n    </Dynamic>\n  );\n}\n\nexport function BottomBar(props: BottomBarProps): JSX.Element {\n  const merged = mergeProps(\n    {\n      menuItems: [] as SidebarMenuItemProps[],\n      visibleCount: 4,\n      defaultActiveItem: null as number | null,\n      overflowMenuAriaLabel: \"More navigation\",\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"menuItems\",\n    \"visibleCount\",\n    \"activeItem\",\n    \"defaultActiveItem\",\n    \"onActiveItemChange\",\n    \"overflowMenuAriaLabel\",\n    \"ref\",\n  ]);\n\n  const [activeItem, setActiveItem] = createControllableState<number | null>({\n    value: () => local.activeItem,\n    defaultValue: local.defaultActiveItem,\n    onChange: (next) => {\n      if (next !== null) local.onActiveItemChange?.(next);\n    },\n  });\n  const [overflowOpen, setOverflowOpen] = createSignal(false);\n  const [overflowAnchor, setOverflowAnchor] = createSignal<HTMLElement | null>(null);\n\n  const safeVisibleCount = (): number => Math.max(0, local.visibleCount);\n  const visibleItems = (): SidebarMenuItemProps[] => local.menuItems.slice(0, safeVisibleCount());\n  const overflowItems = (): SidebarMenuItemProps[] => local.menuItems.slice(safeVisibleCount());\n  const hasOverflow = (): boolean => overflowItems().length > 0;\n  const overflowActive = (): boolean =>\n    hasOverflow() && activeItem() !== null && (activeItem() as number) >= safeVisibleCount();\n\n  return (\n    <nav {...rest} ref={mergeRefs(local.ref)} class={cn(\"smwb-bottom-bar\", local.class)} role=\"navigation\">\n      <div class=\"smwb-bottom-bar__nav\" role=\"menubar\">\n        <For each={visibleItems()}>\n          {(item, idx) => (\n            <BarItem\n              as={item.as}\n              isActive={activeItem() === idx()}\n              onClick={(event) => {\n                setActiveItem(idx());\n                callHandler(item.onClick, event);\n              }}\n              icon={item.icon}\n              title={item.title}\n              href={item.href}\n            />\n          )}\n        </For>\n        <Show when={hasOverflow()}>\n          <BarItem\n            ref={(el) => setOverflowAnchor(el as HTMLElement)}\n            isActive={overflowActive()}\n            onClick={() => setOverflowOpen((prev) => !prev)}\n            icon={<Icon name=\"menu\" size={24} />}\n            aria-label={local.overflowMenuAriaLabel}\n            aria-haspopup=\"menu\"\n            aria-expanded={overflowOpen()}\n          />\n        </Show>\n      </div>\n      <Show when={hasOverflow()}>\n        <Menu\n          isOpen={overflowOpen()}\n          onClose={() => setOverflowOpen(false)}\n          anchorElement={overflowAnchor()}\n          placement=\"top\"\n          dense\n        >\n          <For each={overflowItems()}>\n            {(item, idx) => {\n              const itemIndex = (): number => safeVisibleCount() + idx();\n              return (\n                <MenuItem\n                  selected={activeItem() === itemIndex()}\n                  href={item.href}\n                  onClick={(event) => {\n                    setActiveItem(itemIndex());\n                    callHandler(\n                      item.onClick,\n                      event as unknown as MouseEvent & { currentTarget: HTMLDivElement; target: Element }\n                    );\n                    setOverflowOpen(false);\n                  }}\n                >\n                  <Show when={item.icon}>\n                    <MenuItemIcon>{item.icon}</MenuItemIcon>\n                  </Show>\n                  <MenuItemText inset={!item.icon}>{item.title}</MenuItemText>\n                </MenuItem>\n              );\n            }}\n          </For>\n        </Menu>\n      </Show>\n    </nav>\n  );\n}\n\nexport default BottomBar;\n"],"names":["BarItem","props","local","rest","splitProps","rippleActions","icon","children","_$createComponent","Dynamic","_$mergeProps","component","as","ref","r$","_ref$","mergeRefs","href","role","cn","isActive","onPointerDown","event","onRipple","Show","when","_el$","_tmpl$","_$insert","title","_el$2","_tmpl$2","Ripple","actionRef","actions","BottomBar","merged","mergeProps","menuItems","visibleCount","defaultActiveItem","overflowMenuAriaLabel","activeItem","setActiveItem","createControllableState","value","defaultValue","onChange","next","onActiveItemChange","overflowOpen","setOverflowOpen","createSignal","overflowAnchor","setOverflowAnchor","safeVisibleCount","Math","max","visibleItems","slice","overflowItems","hasOverflow","length","overflowActive","_el$3","_tmpl$3","_el$4","firstChild","_ref$2","_$use","_$spread","class","For","each","item","idx","onClick","callHandler","el","prev","Icon","name","size","Menu","isOpen","onClose","anchorElement","placement","dense","itemIndex","MenuItem","selected","MenuItemIcon","MenuItemText","inset"],"mappings":"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"}

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;"}