@smwb/ui-solid 0.2.2 → 0.4.0

package/dist/source/components/layout/sheet/sheet.jsx

@@ -0,0 +1,262 @@
+import "/sourcecraft/workspace/packages/styles/less/components/sheet/sheet.entry.less";
+import { Show, createEffect, createSignal, mergeProps, onCleanup, splitProps } from "solid-js";
+import { Portal, isServer } from "solid-js/web";
+import cn from "clsx";
+import { Button } from "../../inputs/button";
+import { Icon } from "../../base/icon";
+import { ClickAwayListener } from "../../clickAwayListener";
+import { createCssTransition } from "../../../primitives/createCssTransition";
+import { mergeRefs } from "../../../primitives/mergeRefs";
+const isVerticalAxis = (placement) => placement === "bottom" || placement === "top";
+function SheetBlock(props) {
+  const merged = mergeProps(
+    {
+      size: "60%",
+      withSizeToggle: true,
+      hideHeaderActions: false,
+      reverseHeaderActions: false,
+      resizable: false,
+      minSize: 80,
+      resizeStep: 24,
+      resizeHandleAriaLabel: "Resize sheet"
+    },
+    props
+  );
+  const [local, rest] = splitProps(merged, [
+    "isOpen",
+    "placement",
+    "class",
+    "mode",
+    "size",
+    "variant",
+    "onClose",
+    "withSizeToggle",
+    "hideHeaderActions",
+    "reverseHeaderActions",
+    "resizable",
+    "minSize",
+    "maxSize",
+    "resizeStep",
+    "resizeHandleAriaLabel",
+    "onResize",
+    "style",
+    "handleClose",
+    "handleSizeButton",
+    "children",
+    "ref"
+  ]);
+  let rootEl;
+  const [dragSize, setDragSize] = createSignal(null);
+  const vertical = () => isVerticalAxis(local.placement);
+  const inner = createCssTransition({
+    in: () => local.isOpen,
+    timeout: { enter: 120, exit: 120 },
+    classNames: { enterDone: "smwb-sheet_entered" },
+    appear: true
+  });
+  const clamp = (px) => {
+    const viewport = vertical() ? window.innerHeight : window.innerWidth;
+    const max = local.maxSize ?? viewport;
+    return Math.max(local.minSize, Math.min(max, px));
+  };
+  const currentSizePx = () => {
+    const rect = rootEl?.getBoundingClientRect();
+    if (!rect) return local.minSize;
+    return vertical() ? rect.height : rect.width;
+  };
+  const applySize = (px) => {
+    const next = clamp(px);
+    setDragSize(next);
+    local.onResize?.(next);
+  };
+  let drag = null;
+  const onPointerDown = (event) => {
+    event.preventDefault();
+    drag = { start: vertical() ? event.clientY : event.clientX, size: currentSizePx() };
+    try {
+      event.currentTarget.setPointerCapture?.(event.pointerId);
+    } catch {
+    }
+  };
+  const onPointerMove = (event) => {
+    if (!drag) return;
+    const pos = vertical() ? event.clientY : event.clientX;
+    const delta = pos - drag.start;
+    const grow = local.placement === "bottom" || local.placement === "right" ? -delta : delta;
+    applySize(drag.size + grow);
+  };
+  const endDrag = (event) => {
+    drag = null;
+    if (event.currentTarget.hasPointerCapture?.(event.pointerId)) {
+      event.currentTarget.releasePointerCapture?.(event.pointerId);
+    }
+  };
+  const onHandleKeyDown = (event) => {
+    const base = dragSize() ?? currentSizePx();
+    const max = local.maxSize ?? (vertical() ? window.innerHeight : window.innerWidth);
+    const incKey = local.placement === "bottom" ? "ArrowUp" : local.placement === "top" ? "ArrowDown" : local.placement === "left" ? "ArrowRight" : "ArrowLeft";
+    const decKey = local.placement === "bottom" ? "ArrowDown" : local.placement === "top" ? "ArrowUp" : local.placement === "left" ? "ArrowLeft" : "ArrowRight";
+    if (event.key === incKey) {
+      event.preventDefault();
+      applySize(base + local.resizeStep);
+    } else if (event.key === decKey) {
+      event.preventDefault();
+      applySize(base - local.resizeStep);
+    } else if (event.key === "Home") {
+      event.preventDefault();
+      applySize(local.minSize);
+    } else if (event.key === "End") {
+      event.preventDefault();
+      applySize(max);
+    }
+  };
+  createEffect(() => {
+    if (!local.isOpen) {
+      setDragSize(null);
+      return;
+    }
+    rootEl?.focus();
+  });
+  const showActions = () => !local.hideHeaderActions && (!!local.onClose || local.withSizeToggle);
+  const actionNodes = () => {
+    const nodes = [];
+    if (local.withSizeToggle) {
+      nodes.push(
+        <Button variant="outlined" size="small" onClick={local.handleSizeButton}>
+          <Icon name="open_in_full" />
+        </Button>
+      );
+    }
+    if (local.onClose) {
+      nodes.push(
+        <Button variant="outlined" size="small" onClick={local.handleClose}>
+          <Icon name="close" />
+        </Button>
+      );
+    }
+    if (local.reverseHeaderActions) nodes.reverse();
+    return nodes;
+  };
+  const sizeStyle = () => {
+    if (local.resizable && dragSize() !== null) {
+      const px = `${dragSize()}px`;
+      return { ...vertical() ? { height: px } : { width: px }, transition: "none" };
+    }
+    return {};
+  };
+  return <div
+    {...rest}
+    ref={mergeRefs(local.ref, (el) => rootEl = el)}
+    data-testid="sheet"
+    tabindex={-1}
+    role="dialog"
+    aria-modal={local.variant === "modal" || void 0}
+    class={cn("smwb-sheet", local.class, `smwb-sheet_${local.variant}`, `smwb-${local.placement}`, inner.classes(), {
+      "smwb-expanded": local.mode === "expanded",
+      "smwb-small": local.mode === "small",
+      "smwb-sheet_resizable": local.resizable
+    })}
+    style={{
+      "--sizeProp": local.size,
+      ...sizeStyle(),
+      ...typeof local.style === "object" && local.style ? local.style : {}
+    }}
+  >
+      <Show when={local.resizable}>
+        <div
+    class="smwb-sheet__drag-handle"
+    data-testid="sheet-drag-handle"
+    role="separator"
+    tabindex={0}
+    aria-orientation={vertical() ? "horizontal" : "vertical"}
+    aria-label={local.resizeHandleAriaLabel}
+    aria-valuemin={local.minSize}
+    aria-valuemax={Math.round(local.maxSize ?? (vertical() ? window.innerHeight : window.innerWidth))}
+    aria-valuenow={Math.round(dragSize() ?? currentSizePx())}
+    onPointerDown={onPointerDown}
+    onPointerMove={onPointerMove}
+    onPointerUp={endDrag}
+    onPointerCancel={endDrag}
+    onKeyDown={onHandleKeyDown}
+  >
+          <span class="smwb-sheet__drag-handle-bar" />
+        </div>
+      </Show>
+      <Show when={showActions()}>
+        <div class="smwb-sheet__header">{actionNodes()}</div>
+      </Show>
+      <Show when={local.isOpen && local.mode !== "small"}>
+        <div class="smwb-sheet__inner">{local.children}</div>
+      </Show>
+    </div>;
+}
+function Sheet(props) {
+  const merged = mergeProps({ variant: "default", placement: "bottom", closeOnEsc: true }, props);
+  const [local, rest] = splitProps(merged, [
+    "isOpen",
+    "onClose",
+    "variant",
+    "children",
+    "placement",
+    "disableOutsideClick",
+    "closeOnEsc",
+    "ref"
+  ]);
+  const [mode, setMode] = createSignal(null);
+  const outer = createCssTransition({
+    in: () => local.isOpen,
+    timeout: { enter: 70, exit: 70 },
+    classNames: { enterDone: "smwb-entered" },
+    appear: true
+  });
+  createEffect(() => {
+    if (!local.isOpen || !local.closeOnEsc || !local.onClose) return;
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") local.onClose?.();
+    };
+    document.addEventListener("keydown", onKeyDown);
+    onCleanup(() => document.removeEventListener("keydown", onKeyDown));
+  });
+  const handleSizeButton = () => {
+    setMode((prev) => prev === "expanded" ? "small" : prev === null ? "expanded" : null);
+  };
+  const handleClose = () => {
+    local.onClose?.();
+    setMode(null);
+  };
+  const block = () => <SheetBlock
+    {...rest}
+    ref={local.ref}
+    isOpen={local.isOpen}
+    onClose={local.onClose}
+    handleSizeButton={handleSizeButton}
+    handleClose={handleClose}
+    mode={mode()}
+    placement={local.placement}
+    variant={local.variant}
+  >
+      {local.children}
+    </SheetBlock>;
+  return <Show when={outer.mounted()}>
+      <Portal mount={isServer ? void 0 : document.body}>
+        <Show
+    when={local.variant === "default"}
+    fallback={<div class={cn("smwb-sheet__overlay", "smwb-dark", `smwb-${local.placement}`, `smwb-sheet_${local.variant}`, outer.classes())}>
+              <ClickAwayListener onClickAway={() => !local.disableOutsideClick && handleClose()}>
+                {block()}
+              </ClickAwayListener>
+            </div>}
+  >
+          <div class={cn(local.disableOutsideClick ? "smwb-sheet__overlay" : "smwb-sheet__default", outer.classes())}>
+            {block()}
+          </div>
+        </Show>
+      </Portal>
+    </Show>;
+}
+var sheet_default = Sheet;
+export {
+  Sheet,
+  sheet_default as default
+};
+//# sourceMappingURL=sheet.js.map

package/dist/source/components/layout/sheet/sheet.jsx.map

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

package/dist/source/components/layout/stack/index.js

@@ -0,0 +1,6 @@
+import { Stack, default as default2 } from "./stack";
+export {
+  Stack,
+  default2 as default
+};
+//# sourceMappingURL=index.js.map

package/dist/source/components/layout/stack/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/layout/stack/index.ts"],
+  "sourcesContent": ["export { Stack, default } from \"./stack\";\nexport type { StackProps, StackSpacing } from \"./stack\";\n"],
+  "mappings": "AAAA,SAAS,OAAO,WAAAA,gBAAe;",
+  "names": ["default"]
+}

package/dist/source/components/layout/stack/stack.jsx

@@ -0,0 +1,54 @@
+import "/sourcecraft/workspace/packages/styles/less/components/stack/stack.entry.less";
+import { For, Show, children as resolveChildren, mergeProps, splitProps } from "solid-js";
+import cn from "clsx";
+import { mergeRefs } from "../../../primitives/mergeRefs";
+const flexAlign = (v) => v === "start" || v === "end" ? `flex-${v}` : v;
+const resolveGap = (s) => typeof s === "number" ? `calc(var(--smui-spacing-unit, 4px) * ${s})` : s === "none" ? "0" : `var(--smui-space-${s})`;
+function Stack(props) {
+  const merged = mergeProps({ direction: "column", spacing: "md" }, props);
+  const [local, rest] = splitProps(merged, [
+    "direction",
+    "spacing",
+    "align",
+    "justify",
+    "wrap",
+    "divider",
+    "class",
+    "style",
+    "children",
+    "ref"
+  ]);
+  const resolved = resolveChildren(() => local.children);
+  return <div
+    {...rest}
+    ref={mergeRefs(local.ref)}
+    data-testid="stack"
+    class={cn("smwb-stack", local.class)}
+    style={{
+      display: "flex",
+      "flex-direction": local.direction,
+      "flex-wrap": local.wrap ? "wrap" : void 0,
+      "align-items": flexAlign(local.align),
+      "justify-content": flexAlign(local.justify),
+      gap: resolveGap(local.spacing),
+      ...typeof local.style === "object" && local.style ? local.style : {}
+    }}
+  >
+      <Show when={local.divider} fallback={local.children}>
+        <For each={resolved.toArray()}>
+          {(child, index) => <>
+              <Show when={index() > 0}>
+                <div class="smwb-stack__divider">{local.divider}</div>
+              </Show>
+              {child}
+            </>}
+        </For>
+      </Show>
+    </div>;
+}
+var stack_default = Stack;
+export {
+  Stack,
+  stack_default as default
+};
+//# sourceMappingURL=stack.js.map

package/dist/source/components/layout/stack/stack.jsx.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/layout/stack/stack.tsx"],"sourcesContent":["import \"/sourcecraft/workspace/packages/styles/less/components/stack/stack.entry.less\";\nimport { type JSX, type ParentProps, For, Show, children as resolveChildren, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type StackSpacing = number | \"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"xxxl\";\n\nexport interface StackProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  direction?: \"row\" | \"row-reverse\" | \"column\" | \"column-reverse\";\n  /** Gap between items: scale keyword, or a number = N × spacing unit. */\n  spacing?: StackSpacing;\n  align?: \"start\" | \"center\" | \"end\" | \"stretch\" | \"baseline\";\n  justify?: \"start\" | \"center\" | \"end\" | \"space-between\" | \"space-around\" | \"space-evenly\";\n  wrap?: boolean;\n  /** Optional element rendered between each child. */\n  divider?: JSX.Element;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst flexAlign = (v?: string): string | undefined => (v === \"start\" || v === \"end\" ? `flex-${v}` : v);\n\nconst resolveGap = (s: StackSpacing): string =>\n  typeof s === \"number\" ? `calc(var(--smui-spacing-unit, 4px) * ${s})` : s === \"none\" ? \"0\" : `var(--smui-space-${s})`;\n\nexport function Stack(props: ParentProps<StackProps>): JSX.Element {\n  const merged = mergeProps({ direction: \"column\" as const, spacing: \"md\" as StackSpacing }, props);\n  const [local, rest] = splitProps(merged, [\n    \"direction\",\n    \"spacing\",\n    \"align\",\n    \"justify\",\n    \"wrap\",\n    \"divider\",\n    \"class\",\n    \"style\",\n    \"children\",\n    \"ref\",\n  ]);\n\n  const resolved = resolveChildren(() => local.children);\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid=\"stack\"\n      class={cn(\"smwb-stack\", local.class)}\n      style={{\n        display: \"flex\",\n        \"flex-direction\": local.direction,\n        \"flex-wrap\": local.wrap ? \"wrap\" : undefined,\n        \"align-items\": flexAlign(local.align),\n        \"justify-content\": flexAlign(local.justify),\n        gap: resolveGap(local.spacing),\n        ...(typeof local.style === \"object\" && local.style ? local.style : {}),\n      }}\n    >\n      <Show when={local.divider} fallback={local.children}>\n        <For each={resolved.toArray()}>\n          {(child, index) => (\n            <>\n              <Show when={index() > 0}>\n                <div class=\"smwb-stack__divider\">{local.divider}</div>\n              </Show>\n              {child}\n            </>\n          )}\n        </For>\n      </Show>\n    </div>\n  );\n}\n\nexport default Stack;\n"],"mappings":"AAAA,OAAO;AACP,SAAqC,KAAK,MAAM,YAAY,iBAAiB,YAAY,kBAAkB;AAC3G,OAAO,QAAQ;AACf,SAAS,iBAA2B;AAgBpC,MAAM,YAAY,CAAC,MAAoC,MAAM,WAAW,MAAM,QAAQ,QAAQ,CAAC,KAAK;AAEpG,MAAM,aAAa,CAAC,MAClB,OAAO,MAAM,WAAW,wCAAwC,CAAC,MAAM,MAAM,SAAS,MAAM,oBAAoB,CAAC;AAE5G,SAAS,MAAM,OAA6C;AACjE,QAAM,SAAS,WAAW,EAAE,WAAW,UAAmB,SAAS,KAAqB,GAAG,KAAK;AAChG,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,WAAW,gBAAgB,MAAM,MAAM,QAAQ;AAErD,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,YAAY;AAAA,IACZ,OAAO,GAAG,cAAc,MAAM,KAAK;AAAA,IACnC,OAAO;AAAA,MACL,SAAS;AAAA,MACT,kBAAkB,MAAM;AAAA,MACxB,aAAa,MAAM,OAAO,SAAS;AAAA,MACnC,eAAe,UAAU,MAAM,KAAK;AAAA,MACpC,mBAAmB,UAAU,MAAM,OAAO;AAAA,MAC1C,KAAK,WAAW,MAAM,OAAO;AAAA,MAC7B,GAAI,OAAO,MAAM,UAAU,YAAY,MAAM,QAAQ,MAAM,QAAQ,CAAC;AAAA,IACtE;AAAA,GACD;AAAA,MACC,CAAC,KAAK,MAAM,MAAM,SAAS,UAAU,MAAM,UAAU;AAAA,QACnD,CAAC,IAAI,MAAM,SAAS,QAAQ,GAAG;AAAA,WAC5B,CAAC,OAAO,UACP,EAAE;AAAA,cACA,CAAC,KAAK,MAAM,MAAM,IAAI,GAAG;AAAA,gBACvB,CAAC,IAAI,MAAM,uBAAuB,MAAM,QAAQ,EAA/C,IAAqD;AAAA,cACxD,EAFC,KAEM;AAAA,eACN,MAAM;AAAA,YACT,IACA;AAAA,QACJ,EATC,IASK;AAAA,MACR,EAXC,KAWM;AAAA,IACT,EA3BC;AA6BL;AAEA,IAAO,gBAAQ;","names":[],"file":"stack.jsx"}

package/dist/source/components/navigation/appBar/appBar.jsx

@@ -0,0 +1,66 @@
+import "/sourcecraft/workspace/packages/styles/less/components/appBar/appBar.entry.less";
+import { Show, mergeProps, splitProps } from "solid-js";
+import { Dynamic } from "solid-js/web";
+import cn from "clsx";
+import { mergeRefs } from "../../../primitives/mergeRefs";
+function AppBar(props) {
+  const merged = mergeProps(
+    {
+      position: "static",
+      placement: "top",
+      midContentAlign: "middle",
+      color: "default"
+    },
+    props
+  );
+  const [local, rest] = splitProps(merged, [
+    "class",
+    "children",
+    "dense",
+    "position",
+    "placement",
+    "leftContent",
+    "midContent",
+    "midContentAlign",
+    "rightContent",
+    "title",
+    "color",
+    "ref"
+  ]);
+  return <Dynamic
+    component={local.placement === "top" ? "header" : "footer"}
+    {...rest}
+    ref={mergeRefs(local.ref)}
+    data-testid="app-bar"
+    class={cn(
+      "smwb-appbar",
+      local.class,
+      `smwb-${local.position}`,
+      `smwb-${local.placement}`,
+      { "smwb-dense": local.dense },
+      local.color !== "default" && `smwb-appbar_color-${local.color}`
+    )}
+  >
+      <Show
+    when={local.children}
+    fallback={<div class="smwb-appbar__inner">
+            <div class="smwb-appbar__left">
+              <Show when={local.title}>
+                <div class="smwb-appbar__left__title">{local.title}</div>
+              </Show>
+              {local.leftContent}
+            </div>
+            <div class={cn("smwb-appbar__mid", `smwb-${local.midContentAlign}`)}>{local.midContent}</div>
+            <div class="smwb-appbar__right">{local.rightContent}</div>
+          </div>}
+  >
+        {local.children}
+      </Show>
+    </Dynamic>;
+}
+var appBar_default = AppBar;
+export {
+  AppBar,
+  appBar_default as default
+};
+//# sourceMappingURL=appBar.js.map

package/dist/source/components/navigation/appBar/appBar.jsx.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/navigation/appBar/appBar.tsx"],"sourcesContent":["import \"/sourcecraft/workspace/packages/styles/less/components/appBar/appBar.entry.less\";\nimport { type JSX, type ParentProps, Show, mergeProps, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type AppBarColor = \"default\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface AppBarProps extends Omit<JSX.HTMLAttributes<HTMLElement>, \"title\"> {\n  dense?: boolean;\n  position?: \"relative\" | \"static\" | \"absolute\" | \"sticky\" | \"fixed\";\n  placement?: \"top\" | \"bottom\";\n  leftContent?: JSX.Element;\n  midContent?: JSX.Element;\n  rightContent?: JSX.Element;\n  title?: JSX.Element | string;\n  midContentAlign?: \"middle\" | \"left\" | \"right\";\n  /** Semantic background color. */\n  color?: AppBarColor;\n  ref?: Ref<HTMLElement>;\n}\n\nexport function AppBar(props: ParentProps<AppBarProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      position: \"static\" as const,\n      placement: \"top\" as const,\n      midContentAlign: \"middle\" as const,\n      color: \"default\" as AppBarColor,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"children\",\n    \"dense\",\n    \"position\",\n    \"placement\",\n    \"leftContent\",\n    \"midContent\",\n    \"midContentAlign\",\n    \"rightContent\",\n    \"title\",\n    \"color\",\n    \"ref\",\n  ]);\n\n  return (\n    <Dynamic\n      component={local.placement === \"top\" ? \"header\" : \"footer\"}\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid=\"app-bar\"\n      class={cn(\n        \"smwb-appbar\",\n        local.class,\n        `smwb-${local.position}`,\n        `smwb-${local.placement}`,\n        { \"smwb-dense\": local.dense },\n        local.color !== \"default\" && `smwb-appbar_color-${local.color}`\n      )}\n    >\n      <Show\n        when={local.children}\n        fallback={\n          <div class=\"smwb-appbar__inner\">\n            <div class=\"smwb-appbar__left\">\n              <Show when={local.title}>\n                <div class=\"smwb-appbar__left__title\">{local.title}</div>\n              </Show>\n              {local.leftContent}\n            </div>\n            <div class={cn(\"smwb-appbar__mid\", `smwb-${local.midContentAlign}`)}>{local.midContent}</div>\n            <div class=\"smwb-appbar__right\">{local.rightContent}</div>\n          </div>\n        }\n      >\n        {local.children}\n      </Show>\n    </Dynamic>\n  );\n}\n\nexport default AppBar;\n"],"mappings":"AAAA,OAAO;AACP,SAAqC,MAAM,YAAY,kBAAkB;AACzE,SAAS,eAAe;AACxB,OAAO,QAAQ;AACf,SAAS,iBAA2B;AAkB7B,SAAS,OAAO,OAA8C;AACnE,QAAM,SAAS;AAAA,IACb;AAAA,MACE,UAAU;AAAA,MACV,WAAW;AAAA,MACX,iBAAiB;AAAA,MACjB,OAAO;AAAA,IACT;AAAA,IACA;AAAA,EACF;AACA,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE,CAAC;AAAA,IACC,WAAW,MAAM,cAAc,QAAQ,WAAW;AAAA,QAC9C;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,YAAY;AAAA,IACZ,OAAO;AAAA,MACL;AAAA,MACA,MAAM;AAAA,MACN,QAAQ,MAAM,QAAQ;AAAA,MACtB,QAAQ,MAAM,SAAS;AAAA,MACvB,EAAE,cAAc,MAAM,MAAM;AAAA,MAC5B,MAAM,UAAU,aAAa,qBAAqB,MAAM,KAAK;AAAA,IAC/D;AAAA,GACD;AAAA,MACC,CAAC;AAAA,IACC,MAAM,MAAM;AAAA,IACZ,UACE,CAAC,IAAI,MAAM,qBAAqB;AAAA,YAC9B,CAAC,IAAI,MAAM,oBAAoB;AAAA,cAC7B,CAAC,KAAK,MAAM,MAAM,OAAO;AAAA,gBACvB,CAAC,IAAI,MAAM,4BAA4B,MAAM,MAAM,EAAlD,IAAwD;AAAA,cAC3D,EAFC,KAEM;AAAA,eACN,MAAM,YAAY;AAAA,YACrB,EALC,IAKK;AAAA,YACN,CAAC,IAAI,OAAO,GAAG,oBAAoB,QAAQ,MAAM,eAAe,EAAE,IAAI,MAAM,WAAW,EAAtF,IAA4F;AAAA,YAC7F,CAAC,IAAI,MAAM,sBAAsB,MAAM,aAAa,EAAnD,IAAyD;AAAA,UAC5D,EATC;AAAA,GAWJ;AAAA,SACE,MAAM,SAAS;AAAA,MAClB,EAhBC,KAgBM;AAAA,IACT,EA/BC;AAiCL;AAEA,IAAO,iBAAQ;","names":[],"file":"appBar.jsx"}

package/dist/source/components/navigation/appBar/index.js

@@ -0,0 +1,6 @@
+import { AppBar, default as default2 } from "./appBar";
+export {
+  AppBar,
+  default2 as default
+};
+//# sourceMappingURL=index.js.map

package/dist/source/components/navigation/appBar/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/navigation/appBar/index.ts"],
+  "sourcesContent": ["export { AppBar, default } from \"./appBar\";\nexport type { AppBarProps, AppBarColor } from \"./appBar\";\n"],
+  "mappings": "AAAA,SAAS,QAAQ,WAAAA,gBAAe;",
+  "names": ["default"]
+}

package/dist/source/components/navigation/bottomBar/bottomBar.jsx

@@ -0,0 +1,135 @@
+import "/sourcecraft/workspace/packages/styles/less/components/bottomBar/bottomBar.entry.less";
+import { For, Show, createSignal, mergeProps, splitProps } from "solid-js";
+import { Dynamic } from "solid-js/web";
+import cn from "clsx";
+import { Icon } from "../../base/icon";
+import { Ripple } from "../../base/ripple";
+import { Menu, MenuItem, MenuItemIcon, MenuItemText } from "../menu";
+import { createControllableState } from "../../../primitives/createControllableState";
+import { mergeRefs } from "../../../primitives/mergeRefs";
+import { callHandler } from "../../../primitives/callHandler";
+function BarItem(props) {
+  const [local, rest] = splitProps(props, ["isActive", "icon", "title", "as", "href", "ref"]);
+  let rippleActions;
+  const onPointerDown = (event) => {
+    rippleActions?.onRipple(event);
+  };
+  return <Dynamic
+    component={local.as ?? "div"}
+    ref={mergeRefs(local.ref)}
+    href={local.href}
+    role="menuitem"
+    class={cn("smwb-bottom-bar__item", { "smwb-bottom-bar__item_active": local.isActive })}
+    onPointerDown={onPointerDown}
+    {...rest}
+  >
+      <Show when={local.icon}>
+        <span class="smwb-bottom-bar__item-icon">{local.icon}</span>
+      </Show>
+      <Show when={local.title}>
+        <span class="smwb-bottom-bar__item-title">{local.title}</span>
+      </Show>
+      <Ripple actionRef={(actions) => rippleActions = actions} />
+    </Dynamic>;
+}
+function BottomBar(props) {
+  const merged = mergeProps(
+    {
+      menuItems: [],
+      visibleCount: 4,
+      defaultActiveItem: null,
+      overflowMenuAriaLabel: "More navigation"
+    },
+    props
+  );
+  const [local, rest] = splitProps(merged, [
+    "class",
+    "menuItems",
+    "visibleCount",
+    "activeItem",
+    "defaultActiveItem",
+    "onActiveItemChange",
+    "overflowMenuAriaLabel",
+    "ref"
+  ]);
+  const [activeItem, setActiveItem] = createControllableState({
+    value: () => local.activeItem,
+    defaultValue: local.defaultActiveItem,
+    onChange: (next) => {
+      if (next !== null) local.onActiveItemChange?.(next);
+    }
+  });
+  const [overflowOpen, setOverflowOpen] = createSignal(false);
+  const [overflowAnchor, setOverflowAnchor] = createSignal(null);
+  const safeVisibleCount = () => Math.max(0, local.visibleCount);
+  const visibleItems = () => local.menuItems.slice(0, safeVisibleCount());
+  const overflowItems = () => local.menuItems.slice(safeVisibleCount());
+  const hasOverflow = () => overflowItems().length > 0;
+  const overflowActive = () => hasOverflow() && activeItem() !== null && activeItem() >= safeVisibleCount();
+  return <nav {...rest} ref={mergeRefs(local.ref)} class={cn("smwb-bottom-bar", local.class)} role="navigation">
+      <div class="smwb-bottom-bar__nav" role="menubar">
+        <For each={visibleItems()}>
+          {(item, idx) => <BarItem
+    as={item.as}
+    isActive={activeItem() === idx()}
+    onClick={(event) => {
+      setActiveItem(idx());
+      callHandler(item.onClick, event);
+    }}
+    icon={item.icon}
+    title={item.title}
+    href={item.href}
+  />}
+        </For>
+        <Show when={hasOverflow()}>
+          <BarItem
+    ref={(el) => setOverflowAnchor(el)}
+    isActive={overflowActive()}
+    onClick={() => setOverflowOpen((prev) => !prev)}
+    icon={<Icon name="menu" size={24} />}
+    aria-label={local.overflowMenuAriaLabel}
+    aria-haspopup="menu"
+    aria-expanded={overflowOpen()}
+  />
+        </Show>
+      </div>
+      <Show when={hasOverflow()}>
+        <Menu
+    isOpen={overflowOpen()}
+    onClose={() => setOverflowOpen(false)}
+    anchorElement={overflowAnchor()}
+    placement="top"
+    dense
+  >
+          <For each={overflowItems()}>
+            {(item, idx) => {
+    const itemIndex = () => safeVisibleCount() + idx();
+    return <MenuItem
+      selected={activeItem() === itemIndex()}
+      href={item.href}
+      onClick={(event) => {
+        setActiveItem(itemIndex());
+        callHandler(
+          item.onClick,
+          event
+        );
+        setOverflowOpen(false);
+      }}
+    >
+                  <Show when={item.icon}>
+                    <MenuItemIcon>{item.icon}</MenuItemIcon>
+                  </Show>
+                  <MenuItemText inset={!item.icon}>{item.title}</MenuItemText>
+                </MenuItem>;
+  }}
+          </For>
+        </Menu>
+      </Show>
+    </nav>;
+}
+var bottomBar_default = BottomBar;
+export {
+  BottomBar,
+  bottomBar_default as default
+};
+//# sourceMappingURL=bottomBar.js.map

package/dist/source/components/navigation/bottomBar/bottomBar.jsx.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/navigation/bottomBar/bottomBar.tsx"],"sourcesContent":["import \"/sourcecraft/workspace/packages/styles/less/components/bottomBar/bottomBar.entry.less\";\nimport { 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"],"mappings":"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","names":[],"file":"bottomBar.jsx"}

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

@@ -0,0 +1,6 @@
+import { BottomBar, default as default2 } from "./bottomBar";
+export {
+  BottomBar,
+  default2 as default
+};
+//# sourceMappingURL=index.js.map

package/dist/source/components/navigation/bottomBar/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/navigation/bottomBar/index.ts"],
+  "sourcesContent": ["export { BottomBar, default } from \"./bottomBar\";\nexport type { BottomBarProps, BottomBarMenuItemProps } from \"./bottomBar\";\n"],
+  "mappings": "AAAA,SAAS,WAAW,WAAAA,gBAAe;",
+  "names": ["default"]
+}