@smwb/ui-solid 0.4.0 → 0.5.0

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

@@ -1,20 +1,21 @@
 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 '../../../assets/styles/less/components/bottomBar/bottomBar.entry.css';/* empty css                                                             */
-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";
@@ -39,41 +40,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 ae(p) {
+function ce(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);
@@ -91,7 +92,7 @@ function ae(p) {
           return i() === f();
         },
         onClick: (g) => {
-          r(f()), C(e.onClick, g);
+          v(f()), C(e.onClick, g);
         },
         get icon() {
           return e.icon;
@@ -113,9 +114,9 @@ function ae(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
             });
@@ -125,7 +126,7 @@ function ae(p) {
           },
           "aria-haspopup": "menu",
           get "aria-expanded"() {
-            return a();
+            return r();
           }
         });
       }
@@ -134,11 +135,11 @@ function ae(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();
           },
@@ -151,7 +152,7 @@ function ae(p) {
               },
               children: (e, f) => {
                 const g = () => m() + f();
-                return t(T, {
+                return t(j, {
                   get selected() {
                     return i() === g();
                   },
@@ -159,7 +160,7 @@ function ae(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, {
@@ -167,13 +168,13 @@ function ae(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;
                       },
@@ -192,6 +193,6 @@ function ae(p) {
   })();
 }
 export {
-  ae as BottomBar
+  ce as BottomBar
 };
 //# sourceMappingURL=bottomBar.js.map

package/dist/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":"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"}
+{"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/components/navigation/overflowMenu/index.d.ts

@@ -0,0 +1,2 @@
+export { OverflowMenu } from "./overflowMenu";
+export type { OverflowMenuProps, OverflowMenuItem } from "./overflowMenu";

package/dist/components/navigation/overflowMenu/overflowMenu.d.ts

@@ -0,0 +1,27 @@
+import { type JSX } from "solid-js";
+import type { Placement } from "@floating-ui/dom";
+export interface OverflowMenuItem {
+    id: string;
+    label: string;
+    icon?: JSX.Element | string;
+    danger?: boolean;
+    disabled?: boolean;
+    onSelect?: () => void;
+}
+export interface OverflowMenuProps {
+    items: OverflowMenuItem[];
+    /** Trigger icon name (default `more_vert`). */
+    icon?: string;
+    placement?: Placement;
+    "aria-label"?: string;
+    disabled?: boolean;
+    class?: string;
+}
+/**
+ * A one-shot kebab / overflow menu: a trigger icon button wired to a floating
+ * `Menu` over an `items` array, with open/close state baked in. The card 3-dot
+ * menu every app hand-builds (button + absolutely-positioned surface + open
+ * state) collapses to passing an items list.
+ */
+export declare function OverflowMenu(props: OverflowMenuProps): JSX.Element;
+export default OverflowMenu;

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

@@ -0,0 +1,88 @@
+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 '../../../assets/styles/less/components/overflowMenu/overflowMenu.entry.css';/* empty css                                                                   */
+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 j(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 {
+  j as OverflowMenu
+};
+//# sourceMappingURL=overflowMenu.js.map

package/dist/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":";;;;;;;;;AAiCO,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;"}

package/dist/components/navigation/sidebar/sidebar.js

@@ -1,115 +1,116 @@
-import { use as k, spread as y, mergeProps as A, insert as c, createComponent as n, effect as R, setAttribute as C, template as p, Dynamic as T, delegateEvents as D } from "solid-js/web";
+import { use as k, spread as y, mergeProps as A, insert as s, createComponent as n, effect as R, setAttribute as C, template as p, Dynamic as T, delegateEvents as D } from "solid-js/web";
 import '../../../assets/styles/less/components/sidebar/sidebar.entry.css';/* empty css                                                         */
-import { mergeProps as L, splitProps as I, Show as v, For as S } from "solid-js";
+import { mergeProps as L, splitProps as I, Show as v, For as S, children as V } from "solid-js";
 import $ from "clsx";
 import { createControllableState as w } from "../../../primitives/createControllableState.js";
-import { mergeRefs as V } from "../../../primitives/mergeRefs.js";
-import { Icon as z } from "../../base/icon/icon.js";
-import { Ripple as E } from "../../base/ripple/ripple.js";
-var F = /* @__PURE__ */ p("<span class=smwb-nav-item__icon>"), M = /* @__PURE__ */ p("<span class=smwb-nav-item__title>"), N = /* @__PURE__ */ p("<div class=smwb-sidebar__collapse><button type=button class=smwb-sidebar__collapse-btn>"), j = /* @__PURE__ */ p("<aside><nav class=smwb-sidebar__nav>");
-function q(u) {
-  const [l, e] = I(u, ["isActive", "icon", "title", "as", "href", "variant"]);
-  let m;
+import { mergeRefs as z } from "../../../primitives/mergeRefs.js";
+import { Icon as E } from "../../base/icon/icon.js";
+import { Ripple as F } from "../../base/ripple/ripple.js";
+var M = /* @__PURE__ */ p("<span class=smwb-nav-item__icon>"), N = /* @__PURE__ */ p("<span class=smwb-nav-item__title>"), j = /* @__PURE__ */ p("<div class=smwb-sidebar__collapse><button type=button class=smwb-sidebar__collapse-btn>"), q = /* @__PURE__ */ p("<aside><nav class=smwb-sidebar__nav>");
+function x(u) {
+  const [r, e] = I(u, ["isActive", "icon", "title", "as", "href", "variant"]);
+  let c;
+  const m = V(() => r.icon);
   return n(T, A({
     get component() {
-      return l.as ?? "div";
+      return r.as ?? "div";
     },
     get href() {
-      return l.href;
+      return r.href;
     },
     role: "menuitem",
     get class() {
-      return $("sidebar__nav__item", "smwb-nav-item", l.variant, {
-        active: l.isActive
+      return $("sidebar__nav__item", "smwb-nav-item", r.variant, {
+        active: r.isActive
       });
     },
     onPointerDown: (t) => {
-      m?.onRipple(t);
+      c?.onRipple(t);
     }
   }, e, {
     get children() {
       return [n(v, {
         get when() {
-          return l.icon;
+          return m();
         },
         get children() {
-          var t = F();
-          return c(t, () => l.icon), t;
+          var t = M();
+          return s(t, m), t;
         }
       }), n(v, {
         get when() {
-          return l.title;
+          return r.title;
         },
         get children() {
-          var t = M();
-          return c(t, () => l.title), t;
+          var t = N();
+          return s(t, () => r.title), t;
         }
-      }), n(E, {
-        actionRef: (t) => m = t
+      }), n(F, {
+        actionRef: (t) => c = t
       })];
     }
   }));
 }
-function U(u) {
-  const l = L({
+function W(u) {
+  const r = L({
     variant: "default",
     defaultActiveItem: null,
     collapsible: !1,
     defaultCollapsed: !1,
     collapseToggleAriaLabel: "Toggle navigation"
-  }, u), [e, m] = I(l, ["class", "variant", "menuItems", "activeItem", "defaultActiveItem", "onActiveItemChange", "collapsible", "collapsed", "defaultCollapsed", "onCollapsedChange", "collapseToggleAriaLabel", "ref"]), [f, t] = w({
+  }, u), [e, c] = I(r, ["class", "variant", "menuItems", "activeItem", "defaultActiveItem", "onActiveItemChange", "collapsible", "collapsed", "defaultCollapsed", "onCollapsedChange", "collapseToggleAriaLabel", "ref"]), [m, d] = w({
     value: () => e.activeItem,
     defaultValue: e.defaultActiveItem,
-    onChange: (r) => {
-      r !== null && e.onActiveItemChange?.(r);
+    onChange: (l) => {
+      l !== null && e.onActiveItemChange?.(l);
     }
-  }), [s, P] = w({
+  }), [t, P] = w({
     value: () => e.collapsed,
     defaultValue: e.defaultCollapsed,
-    onChange: (r) => e.onCollapsedChange?.(r)
-  }), d = () => e.collapsible && s() ? "compactMini" : e.variant;
+    onChange: (l) => e.onCollapsedChange?.(l)
+  }), f = () => e.collapsible && t() ? "compactMini" : e.variant;
   return (() => {
-    var r = j(), g = r.firstChild, b = V(e.ref);
-    return typeof b == "function" && k(b, r), y(r, A(m, {
+    var l = q(), g = l.firstChild, b = z(e.ref);
+    return typeof b == "function" && k(b, l), y(l, A(c, {
       get class() {
-        return $("smwb-sidebar", e.class, `smwb-${d()}`, {
+        return $("smwb-sidebar", e.class, `smwb-${f()}`, {
           "smwb-sidebar_collapsible": e.collapsible,
-          "smwb-sidebar_collapsed": e.collapsible && s()
+          "smwb-sidebar_collapsed": e.collapsible && t()
         });
       },
       role: "menubar"
-    }), !1, !0), c(r, n(v, {
+    }), !1, !0), s(l, n(v, {
       get when() {
         return e.collapsible;
       },
       get children() {
-        var a = N(), i = a.firstChild;
-        return i.$$click = () => P(!s()), c(i, n(z, {
+        var a = j(), i = a.firstChild;
+        return i.$$click = () => P(!t()), s(i, n(E, {
           get name() {
-            return s() ? "chevron_right" : "chevron_left";
+            return t() ? "chevron_right" : "chevron_left";
           },
           size: 20
         })), R((o) => {
-          var _ = e.collapseToggleAriaLabel, h = !s();
-          return _ !== o.e && C(i, "aria-label", o.e = _), h !== o.t && C(i, "aria-expanded", o.t = h), o;
+          var h = e.collapseToggleAriaLabel, _ = !t();
+          return h !== o.e && C(i, "aria-label", o.e = h), _ !== o.t && C(i, "aria-expanded", o.t = _), o;
         }, {
           e: void 0,
           t: void 0
         }), a;
       }
-    }), g), c(g, n(S, {
+    }), g), s(g, n(S, {
       get each() {
         return e.menuItems ?? [];
       },
-      children: (a, i) => n(q, {
+      children: (a, i) => n(x, {
         get as() {
           return a.as;
         },
         get isActive() {
-          return f() === i();
+          return m() === i();
         },
         onClick: (o) => {
-          t(i()), typeof a.onClick == "function" && a.onClick(o);
+          d(i()), typeof a.onClick == "function" && a.onClick(o);
         },
         get icon() {
           return a.icon;
@@ -121,14 +122,14 @@ function U(u) {
           return a.href;
         },
         get variant() {
-          return d();
+          return f();
         }
       })
-    })), r;
+    })), l;
   })();
 }
 D(["click"]);
 export {
-  U as Sidebar
+  W as Sidebar
 };
 //# sourceMappingURL=sidebar.js.map

package/dist/components/navigation/sidebar/sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.js","sources":["../../../../src/components/navigation/sidebar/sidebar.tsx"],"sourcesContent":["import { type JSX, For, Show, mergeProps, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { Ripple, type RippleActionsRef } from \"../../base/ripple\";\nimport { Icon } from \"../../base/icon\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type SidebarVariant = \"compact\" | \"default\" | \"compactMini\";\n\nexport interface SidebarMenuItemProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  icon?: JSX.Element;\n  title: string;\n  isActive?: boolean;\n  onClick?: JSX.EventHandlerUnion<HTMLDivElement, MouseEvent>;\n  as?: string | undefined;\n  href?: string | undefined;\n  variant?: SidebarVariant | undefined;\n}\n\nexport interface SidebarProps extends JSX.HTMLAttributes<HTMLElement> {\n  variant?: SidebarVariant;\n  menuItems?: SidebarMenuItemProps[];\n  /** Controlled index of the active menu item. */\n  activeItem?: number | null;\n  /** Default active index (uncontrolled). */\n  defaultActiveItem?: number | null;\n  /** Called with the index of the activated item. */\n  onActiveItemChange?: (index: number) => void;\n  /** Render a built-in toggle that collapses the rail to an icon-only mini rail. */\n  collapsible?: boolean;\n  /** Controlled collapsed state. */\n  collapsed?: boolean;\n  /** Initial collapsed state (uncontrolled). */\n  defaultCollapsed?: boolean;\n  /** Called whenever the collapsed state changes. */\n  onCollapsedChange?: (collapsed: boolean) => void;\n  /** Accessible label for the built-in collapse toggle. */\n  collapseToggleAriaLabel?: string;\n  ref?: Ref<HTMLElement>;\n}\n\nfunction NavItem(props: SidebarMenuItemProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\"isActive\", \"icon\", \"title\", \"as\", \"href\", \"variant\"]);\n  let rippleActions: RippleActionsRef | undefined;\n\n  const onPointerDown = (event: PointerEvent): void => {\n    rippleActions?.onRipple(event);\n  };\n\n  return (\n    <Dynamic\n      component={local.as ?? \"div\"}\n      href={local.href}\n      role=\"menuitem\"\n      class={cn(\"sidebar__nav__item\", \"smwb-nav-item\", local.variant, { active: local.isActive })}\n      onPointerDown={onPointerDown}\n      {...rest}\n    >\n      <Show when={local.icon}>\n        <span class=\"smwb-nav-item__icon\">{local.icon}</span>\n      </Show>\n      <Show when={local.title}>\n        <span class=\"smwb-nav-item__title\">{local.title}</span>\n      </Show>\n      <Ripple actionRef={(actions) => (rippleActions = actions)} />\n    </Dynamic>\n  );\n}\n\nexport function Sidebar(props: SidebarProps): JSX.Element {\n  const merged = mergeProps(\n    {\n      variant: \"default\" as SidebarVariant,\n      defaultActiveItem: null as number | null,\n      collapsible: false,\n      defaultCollapsed: false,\n      collapseToggleAriaLabel: \"Toggle navigation\",\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"variant\",\n    \"menuItems\",\n    \"activeItem\",\n    \"defaultActiveItem\",\n    \"onActiveItemChange\",\n    \"collapsible\",\n    \"collapsed\",\n    \"defaultCollapsed\",\n    \"onCollapsedChange\",\n    \"collapseToggleAriaLabel\",\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\n  const [collapsed, setCollapsed] = createControllableState<boolean>({\n    value: () => local.collapsed,\n    defaultValue: local.defaultCollapsed,\n    onChange: (next) => local.onCollapsedChange?.(next),\n  });\n\n  // When collapsed the rail always shows the icon-only mini variant.\n  const effectiveVariant = (): SidebarVariant => (local.collapsible && collapsed() ? \"compactMini\" : local.variant);\n\n  return (\n    <aside\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-sidebar\", local.class, `smwb-${effectiveVariant()}`, {\n        \"smwb-sidebar_collapsible\": local.collapsible,\n        \"smwb-sidebar_collapsed\": local.collapsible && collapsed(),\n      })}\n      role=\"menubar\"\n    >\n      <Show when={local.collapsible}>\n        <div class=\"smwb-sidebar__collapse\">\n          <button\n            type=\"button\"\n            class=\"smwb-sidebar__collapse-btn\"\n            aria-label={local.collapseToggleAriaLabel}\n            aria-expanded={!collapsed()}\n            onClick={() => setCollapsed(!collapsed())}\n          >\n            <Icon name={collapsed() ? \"chevron_right\" : \"chevron_left\"} size={20} />\n          </button>\n        </div>\n      </Show>\n      <nav class=\"smwb-sidebar__nav\">\n        <For each={local.menuItems ?? []}>\n          {(item, idx) => (\n            <NavItem\n              as={item.as}\n              isActive={activeItem() === idx()}\n              onClick={(event) => {\n                setActiveItem(idx());\n                if (typeof item.onClick === \"function\") item.onClick(event);\n              }}\n              icon={item.icon}\n              title={item.title}\n              href={item.href}\n              variant={effectiveVariant()}\n            />\n          )}\n        </For>\n      </nav>\n    </aside>\n  );\n}\n\nexport default Sidebar;\n"],"names":["NavItem","props","local","rest","splitProps","rippleActions","_$createComponent","Dynamic","_$mergeProps","component","as","href","role","cn","variant","active","isActive","onPointerDown","event","onRipple","children","Show","when","icon","_el$","_tmpl$","_$insert","title","_el$2","_tmpl$2","Ripple","actionRef","actions","Sidebar","merged","mergeProps","defaultActiveItem","collapsible","defaultCollapsed","collapseToggleAriaLabel","activeItem","setActiveItem","createControllableState","value","defaultValue","onChange","next","onActiveItemChange","collapsed","setCollapsed","onCollapsedChange","effectiveVariant","_el$3","_tmpl$4","_el$6","firstChild","_ref$","mergeRefs","ref","_$use","_$spread","class","_el$4","_tmpl$3","_el$5","$$click","Icon","name","size","_$effect","_p$","_v$","_v$2","e","_$setAttribute","t","undefined","For","each","menuItems","item","idx","onClick","_$delegateEvents"],"mappings":"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"}
+{"version":3,"file":"sidebar.js","sources":["../../../../src/components/navigation/sidebar/sidebar.tsx"],"sourcesContent":["import { type JSX, For, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { Ripple, type RippleActionsRef } from \"../../base/ripple\";\nimport { Icon } from \"../../base/icon\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type SidebarVariant = \"compact\" | \"default\" | \"compactMini\";\n\nexport interface SidebarMenuItemProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  icon?: JSX.Element;\n  title: string;\n  isActive?: boolean;\n  onClick?: JSX.EventHandlerUnion<HTMLDivElement, MouseEvent>;\n  as?: string | undefined;\n  href?: string | undefined;\n  variant?: SidebarVariant | undefined;\n}\n\nexport interface SidebarProps extends JSX.HTMLAttributes<HTMLElement> {\n  variant?: SidebarVariant;\n  menuItems?: SidebarMenuItemProps[];\n  /** Controlled index of the active menu item. */\n  activeItem?: number | null;\n  /** Default active index (uncontrolled). */\n  defaultActiveItem?: number | null;\n  /** Called with the index of the activated item. */\n  onActiveItemChange?: (index: number) => void;\n  /** Render a built-in toggle that collapses the rail to an icon-only mini rail. */\n  collapsible?: boolean;\n  /** Controlled collapsed state. */\n  collapsed?: boolean;\n  /** Initial collapsed state (uncontrolled). */\n  defaultCollapsed?: boolean;\n  /** Called whenever the collapsed state changes. */\n  onCollapsedChange?: (collapsed: boolean) => void;\n  /** Accessible label for the built-in collapse toggle. */\n  collapseToggleAriaLabel?: string;\n  ref?: Ref<HTMLElement>;\n}\n\nfunction NavItem(props: SidebarMenuItemProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\"isActive\", \"icon\", \"title\", \"as\", \"href\", \"variant\"]);\n  let rippleActions: RippleActionsRef | undefined;\n\n  // Resolve the icon in THIS item's context. A pre-created element passed via\n  // menuItems is keyed at the consumer's position but rendered here, so under\n  // SSR the hydration walk can't find it; children() realigns the key sequence.\n  const icon = children(() => local.icon);\n\n  const onPointerDown = (event: PointerEvent): void => {\n    rippleActions?.onRipple(event);\n  };\n\n  return (\n    <Dynamic\n      component={local.as ?? \"div\"}\n      href={local.href}\n      role=\"menuitem\"\n      class={cn(\"sidebar__nav__item\", \"smwb-nav-item\", local.variant, { active: local.isActive })}\n      onPointerDown={onPointerDown}\n      {...rest}\n    >\n      <Show when={icon()}>\n        <span class=\"smwb-nav-item__icon\">{icon()}</span>\n      </Show>\n      <Show when={local.title}>\n        <span class=\"smwb-nav-item__title\">{local.title}</span>\n      </Show>\n      <Ripple actionRef={(actions) => (rippleActions = actions)} />\n    </Dynamic>\n  );\n}\n\nexport function Sidebar(props: SidebarProps): JSX.Element {\n  const merged = mergeProps(\n    {\n      variant: \"default\" as SidebarVariant,\n      defaultActiveItem: null as number | null,\n      collapsible: false,\n      defaultCollapsed: false,\n      collapseToggleAriaLabel: \"Toggle navigation\",\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"variant\",\n    \"menuItems\",\n    \"activeItem\",\n    \"defaultActiveItem\",\n    \"onActiveItemChange\",\n    \"collapsible\",\n    \"collapsed\",\n    \"defaultCollapsed\",\n    \"onCollapsedChange\",\n    \"collapseToggleAriaLabel\",\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\n  const [collapsed, setCollapsed] = createControllableState<boolean>({\n    value: () => local.collapsed,\n    defaultValue: local.defaultCollapsed,\n    onChange: (next) => local.onCollapsedChange?.(next),\n  });\n\n  // When collapsed the rail always shows the icon-only mini variant.\n  const effectiveVariant = (): SidebarVariant => (local.collapsible && collapsed() ? \"compactMini\" : local.variant);\n\n  return (\n    <aside\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-sidebar\", local.class, `smwb-${effectiveVariant()}`, {\n        \"smwb-sidebar_collapsible\": local.collapsible,\n        \"smwb-sidebar_collapsed\": local.collapsible && collapsed(),\n      })}\n      role=\"menubar\"\n    >\n      <Show when={local.collapsible}>\n        <div class=\"smwb-sidebar__collapse\">\n          <button\n            type=\"button\"\n            class=\"smwb-sidebar__collapse-btn\"\n            aria-label={local.collapseToggleAriaLabel}\n            aria-expanded={!collapsed()}\n            onClick={() => setCollapsed(!collapsed())}\n          >\n            <Icon name={collapsed() ? \"chevron_right\" : \"chevron_left\"} size={20} />\n          </button>\n        </div>\n      </Show>\n      <nav class=\"smwb-sidebar__nav\">\n        <For each={local.menuItems ?? []}>\n          {(item, idx) => (\n            <NavItem\n              as={item.as}\n              isActive={activeItem() === idx()}\n              onClick={(event) => {\n                setActiveItem(idx());\n                if (typeof item.onClick === \"function\") item.onClick(event);\n              }}\n              icon={item.icon}\n              title={item.title}\n              href={item.href}\n              variant={effectiveVariant()}\n            />\n          )}\n        </For>\n      </nav>\n    </aside>\n  );\n}\n\nexport default Sidebar;\n"],"names":["NavItem","props","local","rest","splitProps","rippleActions","icon","children","_$createComponent","Dynamic","_$mergeProps","component","as","href","role","cn","variant","active","isActive","onPointerDown","event","onRipple","Show","when","_el$","_tmpl$","_$insert","title","_el$2","_tmpl$2","Ripple","actionRef","actions","Sidebar","merged","mergeProps","defaultActiveItem","collapsible","defaultCollapsed","collapseToggleAriaLabel","activeItem","setActiveItem","createControllableState","value","defaultValue","onChange","next","onActiveItemChange","collapsed","setCollapsed","onCollapsedChange","effectiveVariant","_el$3","_tmpl$4","_el$6","firstChild","_ref$","mergeRefs","ref","_$use","_$spread","class","_el$4","_tmpl$3","_el$5","$$click","Icon","name","size","_$effect","_p$","_v$","_v$2","e","_$setAttribute","t","undefined","For","each","menuItems","item","idx","onClick","_$delegateEvents"],"mappings":"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"}