@smwb/ui-solid 0.1.0

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

@@ -0,0 +1,134 @@
+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 '../../../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 $ 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;
+  return n(T, A({
+    get component() {
+      return l.as ?? "div";
+    },
+    get href() {
+      return l.href;
+    },
+    role: "menuitem",
+    get class() {
+      return $("sidebar__nav__item", "smwb-nav-item", l.variant, {
+        active: l.isActive
+      });
+    },
+    onPointerDown: (t) => {
+      m?.onRipple(t);
+    }
+  }, e, {
+    get children() {
+      return [n(v, {
+        get when() {
+          return l.icon;
+        },
+        get children() {
+          var t = F();
+          return c(t, () => l.icon), t;
+        }
+      }), n(v, {
+        get when() {
+          return l.title;
+        },
+        get children() {
+          var t = M();
+          return c(t, () => l.title), t;
+        }
+      }), n(E, {
+        actionRef: (t) => m = t
+      })];
+    }
+  }));
+}
+function U(u) {
+  const l = 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({
+    value: () => e.activeItem,
+    defaultValue: e.defaultActiveItem,
+    onChange: (r) => {
+      r !== null && e.onActiveItemChange?.(r);
+    }
+  }), [s, P] = w({
+    value: () => e.collapsed,
+    defaultValue: e.defaultCollapsed,
+    onChange: (r) => e.onCollapsedChange?.(r)
+  }), d = () => e.collapsible && s() ? "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, {
+      get class() {
+        return $("smwb-sidebar", e.class, `smwb-${d()}`, {
+          "smwb-sidebar_collapsible": e.collapsible,
+          "smwb-sidebar_collapsed": e.collapsible && s()
+        });
+      },
+      role: "menubar"
+    }), !1, !0), c(r, n(v, {
+      get when() {
+        return e.collapsible;
+      },
+      get children() {
+        var a = N(), i = a.firstChild;
+        return i.$$click = () => P(!s()), c(i, n(z, {
+          get name() {
+            return s() ? "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;
+        }, {
+          e: void 0,
+          t: void 0
+        }), a;
+      }
+    }), g), c(g, n(S, {
+      get each() {
+        return e.menuItems ?? [];
+      },
+      children: (a, i) => n(q, {
+        get as() {
+          return a.as;
+        },
+        get isActive() {
+          return f() === i();
+        },
+        onClick: (o) => {
+          t(i()), typeof a.onClick == "function" && a.onClick(o);
+        },
+        get icon() {
+          return a.icon;
+        },
+        get title() {
+          return a.title;
+        },
+        get href() {
+          return a.href;
+        },
+        get variant() {
+          return d();
+        }
+      })
+    })), r;
+  })();
+}
+D(["click"]);
+export {
+  U as Sidebar
+};
+//# sourceMappingURL=sidebar.js.map

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

@@ -0,0 +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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"}

package/dist/components/navigation/stepper/index.d.ts

@@ -0,0 +1,2 @@
+export { Stepper, default } from "./stepper";
+export type { StepperProps, StepItem } from "./stepper";

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

@@ -0,0 +1,26 @@
+import { type JSX } from "solid-js";
+import { type Ref } from "../../../primitives/mergeRefs";
+export interface StepItem {
+    label: JSX.Element;
+    description?: JSX.Element;
+    optional?: JSX.Element;
+    /** Marks the step as errored. */
+    error?: boolean;
+    /** Disables interaction with the step. */
+    disabled?: boolean;
+    /** Custom icon overriding the default number/check. */
+    icon?: JSX.Element;
+}
+export interface StepperProps extends JSX.HTMLAttributes<HTMLDivElement> {
+    steps: StepItem[];
+    /** Index of the active (current) step. */
+    activeStep: number;
+    orientation?: "horizontal" | "vertical";
+    /** Place the label under the icon (horizontal only). */
+    alternativeLabel?: boolean;
+    /** Makes steps clickable; receives the clicked step index. */
+    onStepClick?: (index: number) => void;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function Stepper(props: StepperProps): JSX.Element;
+export default Stepper;

package/dist/components/navigation/stepper/stepper.js

@@ -0,0 +1,96 @@
+import { use as A, spread as B, mergeProps as D, insert as s, createComponent as o, addEventListener as $, memo as S, effect as F, className as I, setAttribute as c, template as n, delegateEvents as N } from "solid-js/web";
+import '../../../assets/styles/less/components/stepper/stepper.entry.css';/* empty css                                                         */
+import { mergeProps as R, splitProps as j, For as q, Show as d } from "solid-js";
+import C from "clsx";
+import { mergeRefs as G } from "../../../primitives/mergeRefs.js";
+import { Icon as H } from "../../base/icon/icon.js";
+var J = /* @__PURE__ */ n("<div>"), K = /* @__PURE__ */ n("<span class=smwb-stepper__optional>"), M = /* @__PURE__ */ n("<span class=smwb-stepper__description>"), O = /* @__PURE__ */ n("<div><div class=smwb-stepper__icon aria-hidden=true></div><div class=smwb-stepper__text><span class=smwb-stepper__label>"), Q = /* @__PURE__ */ n("<div class=smwb-stepper__connector aria-hidden=true>"), T = /* @__PURE__ */ n("<span>");
+function x(y) {
+  const L = R({
+    orientation: "horizontal",
+    alternativeLabel: !1
+  }, y), [t, P] = j(L, ["class", "steps", "activeStep", "orientation", "alternativeLabel", "onStepClick", "ref"]);
+  return (() => {
+    var p = J(), _ = G(t.ref);
+    return typeof _ == "function" && A(_, p), B(p, D(P, {
+      "data-testid": "stepper",
+      get class() {
+        return C("smwb-stepper", `smwb-stepper_${t.orientation}`, {
+          "smwb-stepper_alt-label": t.alternativeLabel && t.orientation === "horizontal"
+        }, t.class);
+      }
+    }), !1, !0), s(p, o(q, {
+      get each() {
+        return t.steps;
+      },
+      children: (r, a) => {
+        const v = () => a() < t.activeStep, b = () => a() === t.activeStep, z = () => a() === t.steps.length - 1, l = () => !!t.onStepClick && !r.disabled;
+        return [(() => {
+          var i = O(), u = i.firstChild, m = u.nextSibling, E = m.firstChild;
+          return $(i, "keydown", l() ? (e) => {
+            (e.key === "Enter" || e.key === " ") && (e.preventDefault(), t.onStepClick?.(a()));
+          } : void 0, !0), $(i, "click", l() ? () => t.onStepClick?.(a()) : void 0, !0), s(u, o(d, {
+            get when() {
+              return r.icon;
+            },
+            get fallback() {
+              return S(() => !!v())() ? o(H, {
+                name: "check",
+                size: 16
+              }) : (() => {
+                var e = T();
+                return s(e, () => a() + 1), e;
+              })();
+            },
+            get children() {
+              return r.icon;
+            }
+          })), s(E, () => r.label), s(m, o(d, {
+            get when() {
+              return r.optional;
+            },
+            get children() {
+              var e = K();
+              return s(e, () => r.optional), e;
+            }
+          }), null), s(m, o(d, {
+            get when() {
+              return S(() => !!r.description)() && t.orientation === "vertical";
+            },
+            get children() {
+              var e = M();
+              return s(e, () => r.description), e;
+            }
+          }), null), F((e) => {
+            var w = C("smwb-stepper__step", {
+              "smwb-stepper__step_active": b(),
+              "smwb-stepper__step_completed": v(),
+              "smwb-stepper__step_error": r.error,
+              "smwb-stepper__step_disabled": r.disabled,
+              "smwb-stepper__step_clickable": l()
+            }), f = b() ? "step" : void 0, g = r.disabled || void 0, h = l() ? "button" : void 0, k = l() ? 0 : void 0;
+            return w !== e.e && I(i, e.e = w), f !== e.t && c(i, "aria-current", e.t = f), g !== e.a && c(i, "aria-disabled", e.a = g), h !== e.o && c(i, "role", e.o = h), k !== e.i && c(i, "tabindex", e.i = k), e;
+          }, {
+            e: void 0,
+            t: void 0,
+            a: void 0,
+            o: void 0,
+            i: void 0
+          }), i;
+        })(), o(d, {
+          get when() {
+            return !z();
+          },
+          get children() {
+            return Q();
+          }
+        })];
+      }
+    })), p;
+  })();
+}
+N(["click", "keydown"]);
+export {
+  x as Stepper
+};
+//# sourceMappingURL=stepper.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.js","sources":["../../../../src/components/navigation/stepper/stepper.tsx"],"sourcesContent":["import { type JSX, For, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface StepItem {\n  label: JSX.Element;\n  description?: JSX.Element;\n  optional?: JSX.Element;\n  /** Marks the step as errored. */\n  error?: boolean;\n  /** Disables interaction with the step. */\n  disabled?: boolean;\n  /** Custom icon overriding the default number/check. */\n  icon?: JSX.Element;\n}\n\nexport interface StepperProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  steps: StepItem[];\n  /** Index of the active (current) step. */\n  activeStep: number;\n  orientation?: \"horizontal\" | \"vertical\";\n  /** Place the label under the icon (horizontal only). */\n  alternativeLabel?: boolean;\n  /** Makes steps clickable; receives the clicked step index. */\n  onStepClick?: (index: number) => void;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function Stepper(props: StepperProps): JSX.Element {\n  const merged = mergeProps({ orientation: \"horizontal\" as const, alternativeLabel: false }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"steps\",\n    \"activeStep\",\n    \"orientation\",\n    \"alternativeLabel\",\n    \"onStepClick\",\n    \"ref\",\n  ]);\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid=\"stepper\"\n      class={cn(\n        \"smwb-stepper\",\n        `smwb-stepper_${local.orientation}`,\n        { \"smwb-stepper_alt-label\": local.alternativeLabel && local.orientation === \"horizontal\" },\n        local.class\n      )}\n    >\n      <For each={local.steps}>\n        {(step, index) => {\n          const completed = (): boolean => index() < local.activeStep;\n          const active = (): boolean => index() === local.activeStep;\n          const isLast = (): boolean => index() === local.steps.length - 1;\n          const clickable = (): boolean => Boolean(local.onStepClick) && !step.disabled;\n\n          return (\n            <>\n              <div\n                class={cn(\"smwb-stepper__step\", {\n                  \"smwb-stepper__step_active\": active(),\n                  \"smwb-stepper__step_completed\": completed(),\n                  \"smwb-stepper__step_error\": step.error,\n                  \"smwb-stepper__step_disabled\": step.disabled,\n                  \"smwb-stepper__step_clickable\": clickable(),\n                })}\n                aria-current={active() ? \"step\" : undefined}\n                aria-disabled={step.disabled || undefined}\n                role={clickable() ? \"button\" : undefined}\n                tabindex={clickable() ? 0 : undefined}\n                onClick={clickable() ? () => local.onStepClick?.(index()) : undefined}\n                onKeyDown={\n                  clickable()\n                    ? (event) => {\n                        if (event.key === \"Enter\" || event.key === \" \") {\n                          event.preventDefault();\n                          local.onStepClick?.(index());\n                        }\n                      }\n                    : undefined\n                }\n              >\n                <div class=\"smwb-stepper__icon\" aria-hidden=\"true\">\n                  <Show when={step.icon} fallback={completed() ? <Icon name=\"check\" size={16} /> : <span>{index() + 1}</span>}>\n                    {step.icon}\n                  </Show>\n                </div>\n                <div class=\"smwb-stepper__text\">\n                  <span class=\"smwb-stepper__label\">{step.label}</span>\n                  <Show when={step.optional}>\n                    <span class=\"smwb-stepper__optional\">{step.optional}</span>\n                  </Show>\n                  <Show when={step.description && local.orientation === \"vertical\"}>\n                    <span class=\"smwb-stepper__description\">{step.description}</span>\n                  </Show>\n                </div>\n              </div>\n              <Show when={!isLast()}>\n                <div class=\"smwb-stepper__connector\" aria-hidden=\"true\" />\n              </Show>\n            </>\n          );\n        }}\n      </For>\n    </div>\n  );\n}\n\nexport default Stepper;\n"],"names":["Stepper","props","merged","mergeProps","orientation","alternativeLabel","local","rest","splitProps","_el$","_tmpl$","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","_$insert","_$createComponent","For","each","steps","children","step","index","completed","activeStep","active","isLast","length","clickable","Boolean","onStepClick","disabled","_el$2","_tmpl$4","_el$3","firstChild","_el$4","nextSibling","_el$5","_$addEventListener","event","key","preventDefault","undefined","Show","when","icon","fallback","_$memo","Icon","name","size","_el$9","_tmpl$6","label","optional","_el$6","_tmpl$2","description","_el$7","_tmpl$3","_$effect","_p$","_v$","error","_v$2","_v$3","_v$4","_v$5","e","_$className","t","_$setAttribute","a","o","i","_tmpl$5","_$delegateEvents"],"mappings":"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"}

package/dist/components/navigation/tabs/index.d.ts

@@ -0,0 +1,6 @@
+export { Tabs } from "./tabs";
+export type { TabsProps } from "./tabs";
+export { Tab } from "./tab/tab";
+export type { TabProps } from "./tab/tab";
+export { TabsContext, useTabsContext } from "./tabsContext";
+export type { TabsContextValue } from "./tabsContext";

package/dist/components/navigation/tabs/tab/tab.d.ts

@@ -0,0 +1,14 @@
+import { type JSX, type ParentProps } from "solid-js";
+import { type Ref } from "../../../../primitives/mergeRefs";
+export interface TabProps extends JSX.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {
+    label?: JSX.Element;
+    isActive?: boolean;
+    contentRef?: Ref<HTMLSpanElement>;
+    icon?: JSX.Element;
+    stacked?: boolean;
+    tag?: string;
+    disabled?: boolean;
+    ref?: Ref<HTMLButtonElement | HTMLAnchorElement>;
+}
+export declare function Tab(props: ParentProps<TabProps>): JSX.Element;
+export default Tab;

package/dist/components/navigation/tabs/tab/tab.js

@@ -0,0 +1,86 @@
+import { createComponent as o, Dynamic as w, mergeProps as h, use as $, insert as s, memo as C, template as c } from "solid-js/web";
+import '../../../../assets/styles/less/components/tabs/tab/tab.entry.css';/* empty css                                                         */
+import { mergeProps as k, splitProps as R, Show as p } from "solid-js";
+import x from "clsx";
+import { useTabsContext as P } from "../tabsContext.js";
+import { mergeRefs as d } from "../../../../primitives/mergeRefs.js";
+import { callHandler as A } from "../../../../primitives/callHandler.js";
+import { Ripple as y } from "../../../base/ripple/ripple.js";
+var T = /* @__PURE__ */ c("<span class=smwb-tab__icon>"), D = /* @__PURE__ */ c("<span class=smwb-tab__text-label>"), H = /* @__PURE__ */ c("<span class=smwb-tab__content>");
+function I(f) {
+  const r = P(), i = r ? r.registerTab() : -1, u = k({
+    isActive: !1,
+    stacked: !1
+  }, f), [e, g] = R(u, ["class", "label", "isActive", "contentRef", "icon", "stacked", "tag", "disabled", "onClick", "ref"]);
+  let m;
+  const l = () => r ? r.value() === i : e.isActive, _ = (t) => {
+    r ? r.onChange(t, i) : A(e.onClick, t);
+  }, v = (t) => {
+    m?.onRipple(t);
+  }, b = () => e.tag ?? "button";
+  return o(w, h({
+    get component() {
+      return b();
+    }
+  }, g, {
+    ref(t) {
+      var a = d(e.ref);
+      typeof a == "function" && a(t);
+    },
+    get class() {
+      return x("smwb-tab", e.class, {
+        "smwb-tab--active": l(),
+        "smwb-tab--stacked": e.stacked,
+        "smwb-tab--disabled": e.disabled
+      });
+    },
+    onClick: _,
+    onPointerDown: v,
+    role: "tab",
+    get "aria-selected"() {
+      return l();
+    },
+    get "aria-disabled"() {
+      return e.disabled || void 0;
+    },
+    get tabindex() {
+      return l() ? 0 : -1;
+    },
+    get disabled() {
+      return C(() => b() === "button")() ? e.disabled : void 0;
+    },
+    get children() {
+      return [(() => {
+        var t = H(), a = d(e.contentRef, (n) => {
+          r?.indicatorContent && r.setContentRef(i, n);
+        });
+        return typeof a == "function" && $(a, t), s(t, o(p, {
+          get when() {
+            return e.icon;
+          },
+          get children() {
+            var n = T();
+            return s(n, () => e.icon), n;
+          }
+        }), null), s(t, o(p, {
+          get when() {
+            return e.label;
+          },
+          get children() {
+            var n = D();
+            return s(n, () => e.label), n;
+          }
+        }), null), t;
+      })(), o(y, {
+        actionRef: (t) => m = t,
+        classes: {
+          child: "tab__ripple-child"
+        }
+      })];
+    }
+  }));
+}
+export {
+  I as Tab
+};
+//# sourceMappingURL=tab.js.map

package/dist/components/navigation/tabs/tab/tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab.js","sources":["../../../../../src/components/navigation/tabs/tab/tab.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, mergeProps, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { Ripple, type RippleActionsRef } from \"../../../base/ripple\";\nimport { useTabsContext } from \"../tabsContext\";\nimport { mergeRefs, type Ref } from \"../../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../../primitives/callHandler\";\n\nexport interface TabProps extends JSX.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {\n  label?: JSX.Element;\n  isActive?: boolean;\n  contentRef?: Ref<HTMLSpanElement>;\n  icon?: JSX.Element;\n  stacked?: boolean;\n  tag?: string;\n  disabled?: boolean;\n  ref?: Ref<HTMLButtonElement | HTMLAnchorElement>;\n}\n\nexport function Tab(props: ParentProps<TabProps>): JSX.Element {\n  const ctx = useTabsContext();\n  const index = ctx ? ctx.registerTab() : -1;\n  const merged = mergeProps({ isActive: false, stacked: false }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"label\",\n    \"isActive\",\n    \"contentRef\",\n    \"icon\",\n    \"stacked\",\n    \"tag\",\n    \"disabled\",\n    \"onClick\",\n    \"ref\",\n  ]);\n\n  let rippleActions: RippleActionsRef | undefined;\n\n  const active = (): boolean => (ctx ? ctx.value() === index : local.isActive);\n\n  const onClick: JSX.EventHandler<HTMLButtonElement | HTMLAnchorElement, MouseEvent> = (event) => {\n    if (ctx) {\n      ctx.onChange(event, index);\n    } else {\n      callHandler(local.onClick, event);\n    }\n  };\n\n  const onPointerDown = (event: PointerEvent): void => {\n    rippleActions?.onRipple(event);\n  };\n\n  const tag = (): string => local.tag ?? \"button\";\n\n  return (\n    <Dynamic\n      component={tag()}\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-tab\", local.class, {\n        \"smwb-tab--active\": active(),\n        \"smwb-tab--stacked\": local.stacked,\n        \"smwb-tab--disabled\": local.disabled,\n      })}\n      onClick={onClick}\n      onPointerDown={onPointerDown}\n      role=\"tab\"\n      aria-selected={active()}\n      aria-disabled={local.disabled || undefined}\n      tabindex={active() ? 0 : -1}\n      disabled={tag() === \"button\" ? local.disabled : undefined}\n    >\n      <span\n        class=\"smwb-tab__content\"\n        ref={mergeRefs(local.contentRef, (el) => {\n          if (ctx?.indicatorContent) ctx.setContentRef(index, el as HTMLSpanElement);\n        })}\n      >\n        <Show when={local.icon}>\n          <span class=\"smwb-tab__icon\">{local.icon}</span>\n        </Show>\n        <Show when={local.label}>\n          <span class=\"smwb-tab__text-label\">{local.label}</span>\n        </Show>\n      </span>\n      <Ripple actionRef={(actions) => (rippleActions = actions)} classes={{ child: \"tab__ripple-child\" }} />\n    </Dynamic>\n  );\n}\n\nexport default Tab;\n"],"names":["Tab","props","ctx","useTabsContext","index","registerTab","merged","mergeProps","isActive","stacked","local","rest","splitProps","rippleActions","active","value","onClick","event","onChange","callHandler","onPointerDown","onRipple","tag","_$createComponent","Dynamic","_$mergeProps","component","ref","r$","_ref$","mergeRefs","cn","class","disabled","role","undefined","tabindex","_$memo","children","_el$","_tmpl$3","_ref$2","contentRef","el","indicatorContent","setContentRef","_$use","_$insert","Show","when","icon","_el$2","_tmpl$","label","_el$3","_tmpl$2","Ripple","actionRef","actions","classes","child"],"mappings":"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"}

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

@@ -0,0 +1,20 @@
+import { type JSX, type ParentProps } from "solid-js";
+import { Tab } from "./tab/tab";
+import { type Ref } from "../../../primitives/mergeRefs";
+export interface TabsProps {
+    value: number;
+    onChange: (event: MouseEvent & {
+        currentTarget: HTMLElement;
+        target: Element;
+    }, index: number) => void;
+    indicatorContent?: boolean;
+    scrollable?: boolean;
+    class?: string;
+    children?: JSX.Element;
+    "aria-label"?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function Tabs(props: ParentProps<TabsProps>): JSX.Element;
+export { Tab };
+export type { TabProps } from "./tab/tab";
+export default Tabs;

package/dist/components/navigation/tabs/tabs.js

@@ -0,0 +1,135 @@
+import { createComponent as C, use as b, spread as W, mergeProps as N, insert as p, effect as _, setStyleProperty as M, style as X, className as D, setAttribute as j, template as x } from "solid-js/web";
+import '../../../assets/styles/less/components/tabs/tabs.entry.css';/* empty css                                                   */
+import { mergeProps as k, splitProps as q, createSignal as L, onMount as R, createEffect as S, on as F, onCleanup as G, Show as H } from "solid-js";
+import y from "clsx";
+import { debounce as J } from "../../../utils/debounce.js";
+import { animate as K } from "../../../utils/animate.js";
+import { TabsContext as Q } from "./tabsContext.js";
+import { mergeRefs as U } from "../../../primitives/mergeRefs.js";
+var Y = /* @__PURE__ */ x("<span class=smwb-tabs__indicator><span class=smwb-tabs__indicator-content>"), Z = /* @__PURE__ */ x("<div><div><div class=smwb-tabs__scroll-area role=tablist>");
+const E = 40;
+function st(z) {
+  const P = k({
+    indicatorContent: !1,
+    scrollable: !1
+  }, z), [o, $] = q(P, ["class", "children", "onChange", "value", "indicatorContent", "scrollable", "aria-label", "ref"]), [T, V] = L(!1), [c, u] = L({
+    root: {}
+  });
+  let i, d, B = 0;
+  const h = [], v = () => {
+    let t;
+    if (i) {
+      const l = i.getBoundingClientRect();
+      t = {
+        clientWidth: i.clientWidth,
+        scrollLeft: i.scrollLeft,
+        left: l.left,
+        right: l.right
+      };
+    }
+    let e = null, n = null;
+    if (i && d && d.children.length > 0) {
+      const l = d.children[o.value];
+      e = l ? l.getBoundingClientRect() : null, o.indicatorContent && (n = h[o.value]?.getBoundingClientRect() ?? null);
+    }
+    return {
+      tabsMeta: t,
+      tabMeta: e,
+      tabContentMeta: n
+    };
+  }, m = () => {
+    const {
+      tabsMeta: t,
+      tabMeta: e,
+      tabContentMeta: n
+    } = v();
+    let l = 0;
+    e && t && (l = e.left - t.left + t.scrollLeft);
+    const r = {
+      root: {
+        left: l,
+        width: e ? e.width : 0
+      }
+    };
+    o.indicatorContent && n && (r.content = {
+      width: n.width
+    });
+    const s = c();
+    if (s.root.left === void 0 || s.root.width === void 0) {
+      u(r);
+      return;
+    }
+    const a = Math.abs((s.root.left ?? 0) - (r.root.left ?? 0)), f = Math.abs((s.root.width ?? 0) - (r.root.width ?? 0));
+    (a >= 1 || f >= 1) && u(r);
+  }, g = (t) => {
+    i && K(i, "scrollLeft", t, {
+      duration: 300
+    });
+  }, I = () => {
+    const {
+      tabsMeta: t,
+      tabMeta: e
+    } = v();
+    !e || !t || (e.left < t.left ? g(t.scrollLeft + (e.left - t.left) - E) : e.right > t.right && g(t.scrollLeft + (e.right - t.right) + E));
+  };
+  R(() => V(!0)), S(F(() => o.value, () => m())), R(() => {
+    const t = J(() => m(), 166), e = i?.ownerDocument.defaultView;
+    e?.addEventListener("resize", t);
+    let n;
+    typeof ResizeObserver < "u" && d && (n = new ResizeObserver(t), Array.from(d.children).forEach((l) => n?.observe(l))), G(() => {
+      t.cancel(), e?.removeEventListener("resize", t), n?.disconnect();
+    });
+  }), S(() => {
+    c(), I();
+  });
+  const A = {
+    value: () => o.value,
+    onChange: o.onChange,
+    indicatorContent: o.indicatorContent,
+    registerTab: () => B++,
+    setContentRef: (t, e) => {
+      h[t] = e;
+    }
+  };
+  return C(Q.Provider, {
+    value: A,
+    get children() {
+      var t = Z(), e = t.firstChild, n = e.firstChild, l = U(o.ref);
+      return typeof l == "function" && b(l, t), W(t, N($, {
+        get class() {
+          return y("smwb-tabs", o.class);
+        },
+        role: "tabpanel"
+      }), !1, !0), b((r) => i = r, e), b((r) => d = r, n), p(n, () => o.children), p(e, C(H, {
+        get when() {
+          return T();
+        },
+        get children() {
+          var r = Y(), s = r.firstChild;
+          return _((a) => {
+            var f = `${c().root.left ?? 0}px`, w = `${c().root.width ?? 0}px`, O = c().content ? {
+              width: `${c().content?.width ?? 0}px`
+            } : {};
+            return f !== a.e && M(r, "left", a.e = f), w !== a.t && M(r, "width", a.t = w), a.a = X(s, O, a.a), a;
+          }, {
+            e: void 0,
+            t: void 0,
+            a: void 0
+          }), r;
+        }
+      }), null), _((r) => {
+        var s = y("smwb-tabs__scroller", {
+          "smwb-tabs__scroller--scrollable": o.scrollable
+        }), a = o["aria-label"];
+        return s !== r.e && D(e, r.e = s), a !== r.t && j(n, "aria-label", r.t = a), r;
+      }, {
+        e: void 0,
+        t: void 0
+      }), t;
+    }
+  });
+}
+export {
+  st as Tabs
+};
+//# sourceMappingURL=tabs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","sources":["../../../../src/components/navigation/tabs/tabs.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, createEffect, createSignal, mergeProps, on, onCleanup, onMount, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { debounce } from \"../../../utils/debounce\";\nimport { animate } from \"../../../utils/animate\";\nimport { TabsContext, type TabsContextValue } from \"./tabsContext\";\nimport { Tab } from \"./tab/tab\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface TabsProps {\n  value: number;\n  onChange: (event: MouseEvent & { currentTarget: HTMLElement; target: Element }, index: number) => void;\n  indicatorContent?: boolean;\n  scrollable?: boolean;\n  class?: string;\n  children?: JSX.Element;\n  \"aria-label\"?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\ninterface IndicatorStyle {\n  root: { left?: number; width?: number };\n  content?: { width: number };\n}\n\nconst VIEW_NEXT_TAB_PX = 40;\n\nexport function Tabs(props: ParentProps<TabsProps>): JSX.Element {\n  const merged = mergeProps({ indicatorContent: false, scrollable: false }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"children\",\n    \"onChange\",\n    \"value\",\n    \"indicatorContent\",\n    \"scrollable\",\n    \"aria-label\",\n    \"ref\",\n  ]);\n\n  const [mounted, setMounted] = createSignal(false);\n  const [indicatorStyle, setIndicatorStyle] = createSignal<IndicatorStyle>({ root: {} });\n\n  let tabsEl: HTMLDivElement | undefined;\n  let tabListEl: HTMLDivElement | undefined;\n  let tabCounter = 0;\n  const contentRefs: HTMLSpanElement[] = [];\n\n  const getTabsMeta = () => {\n    let tabsMeta: { clientWidth: number; scrollLeft: number; left: number; right: number } | undefined;\n    if (tabsEl) {\n      const rect = tabsEl.getBoundingClientRect();\n      tabsMeta = { clientWidth: tabsEl.clientWidth, scrollLeft: tabsEl.scrollLeft, left: rect.left, right: rect.right };\n    }\n    let tabMeta: DOMRect | null = null;\n    let tabContentMeta: DOMRect | null = null;\n    if (tabsEl && tabListEl && tabListEl.children.length > 0) {\n      const tab = tabListEl.children[local.value];\n      tabMeta = tab ? tab.getBoundingClientRect() : null;\n      if (local.indicatorContent) {\n        tabContentMeta = contentRefs[local.value]?.getBoundingClientRect() ?? null;\n      }\n    }\n    return { tabsMeta, tabMeta, tabContentMeta };\n  };\n\n  const updateIndicatorState = (): void => {\n    const { tabsMeta, tabMeta, tabContentMeta } = getTabsMeta();\n    let startValue = 0;\n    if (tabMeta && tabsMeta) {\n      startValue = tabMeta.left - tabsMeta.left + tabsMeta.scrollLeft;\n    }\n    const next: IndicatorStyle = { root: { left: startValue, width: tabMeta ? tabMeta.width : 0 } };\n    if (local.indicatorContent && tabContentMeta) {\n      next.content = { width: tabContentMeta.width };\n    }\n    const prev = indicatorStyle();\n    if (prev.root.left === undefined || prev.root.width === undefined) {\n      setIndicatorStyle(next);\n      return;\n    }\n    const dStart = Math.abs((prev.root.left ?? 0) - (next.root.left ?? 0));\n    const dSize = Math.abs((prev.root.width ?? 0) - (next.root.width ?? 0));\n    if (dStart >= 1 || dSize >= 1) {\n      setIndicatorStyle(next);\n    }\n  };\n\n  const scroll = (scrollValue: number): void => {\n    if (!tabsEl) return;\n    animate(tabsEl, \"scrollLeft\", scrollValue, { duration: 300 });\n  };\n\n  const scrollSelectedIntoView = (): void => {\n    const { tabsMeta, tabMeta } = getTabsMeta();\n    if (!tabMeta || !tabsMeta) return;\n    if (tabMeta.left < tabsMeta.left) {\n      scroll(tabsMeta.scrollLeft + (tabMeta.left - tabsMeta.left) - VIEW_NEXT_TAB_PX);\n    } else if (tabMeta.right > tabsMeta.right) {\n      scroll(tabsMeta.scrollLeft + (tabMeta.right - tabsMeta.right) + VIEW_NEXT_TAB_PX);\n    }\n  };\n\n  onMount(() => setMounted(true));\n\n  // Re-measure when the active value changes (and on mount).\n  createEffect(on(() => local.value, () => updateIndicatorState()));\n\n  // Keep the indicator in sync with resize.\n  onMount(() => {\n    const onResize = debounce(() => updateIndicatorState(), 166);\n    const view = tabsEl?.ownerDocument.defaultView;\n    view?.addEventListener(\"resize\", onResize);\n    let resizeObserver: ResizeObserver | undefined;\n    if (typeof ResizeObserver !== \"undefined\" && tabListEl) {\n      resizeObserver = new ResizeObserver(onResize);\n      Array.from(tabListEl.children).forEach((child) => resizeObserver?.observe(child));\n    }\n    onCleanup(() => {\n      onResize.cancel();\n      view?.removeEventListener(\"resize\", onResize);\n      resizeObserver?.disconnect();\n    });\n  });\n\n  // Scroll the selected tab into view when the indicator moves.\n  createEffect(() => {\n    indicatorStyle();\n    scrollSelectedIntoView();\n  });\n\n  const contextValue: TabsContextValue = {\n    value: () => local.value,\n    onChange: local.onChange,\n    indicatorContent: local.indicatorContent,\n    registerTab: () => tabCounter++,\n    setContentRef: (index, el) => {\n      contentRefs[index] = el;\n    },\n  };\n\n  return (\n    <TabsContext.Provider value={contextValue}>\n      <div {...rest} class={cn(\"smwb-tabs\", local.class)} role=\"tabpanel\" ref={mergeRefs(local.ref)}>\n        <div\n          class={cn(\"smwb-tabs__scroller\", { \"smwb-tabs__scroller--scrollable\": local.scrollable })}\n          ref={(el) => (tabsEl = el)}\n        >\n          <div class=\"smwb-tabs__scroll-area\" ref={(el) => (tabListEl = el)} role=\"tablist\" aria-label={local[\"aria-label\"]}>\n            {local.children}\n          </div>\n          <Show when={mounted()}>\n            <span\n              class=\"smwb-tabs__indicator\"\n              style={{\n                left: `${indicatorStyle().root.left ?? 0}px`,\n                width: `${indicatorStyle().root.width ?? 0}px`,\n              }}\n            >\n              <span\n                class=\"smwb-tabs__indicator-content\"\n                style={indicatorStyle().content ? { width: `${indicatorStyle().content?.width ?? 0}px` } : {}}\n              />\n            </span>\n          </Show>\n        </div>\n      </div>\n    </TabsContext.Provider>\n  );\n}\n\nexport { Tab };\nexport type { TabProps } from \"./tab/tab\";\nexport default Tabs;\n"],"names":["VIEW_NEXT_TAB_PX","Tabs","props","merged","mergeProps","indicatorContent","scrollable","local","rest","splitProps","mounted","setMounted","createSignal","indicatorStyle","setIndicatorStyle","root","tabsEl","tabListEl","tabCounter","contentRefs","getTabsMeta","tabsMeta","rect","getBoundingClientRect","clientWidth","scrollLeft","left","right","tabMeta","tabContentMeta","children","length","tab","value","updateIndicatorState","startValue","next","width","content","prev","undefined","dStart","Math","abs","dSize","scroll","scrollValue","animate","duration","scrollSelectedIntoView","onMount","createEffect","on","onResize","debounce","view","ownerDocument","defaultView","addEventListener","resizeObserver","ResizeObserver","Array","from","forEach","child","observe","onCleanup","cancel","removeEventListener","disconnect","contextValue","onChange","registerTab","setContentRef","index","el","_$createComponent","TabsContext","Provider","_el$","_tmpl$2","_el$2","firstChild","_el$3","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","_$insert","Show","when","_el$4","_tmpl$","_el$5","_$effect","_p$","_v$","_v$2","_v$3","e","_$setStyleProperty","t","a","_$style","_v$4","_v$5","_$className","_$setAttribute"],"mappings":"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"}

package/dist/components/navigation/tabs/tabsContext.d.ts

@@ -0,0 +1,14 @@
+import { type Accessor } from "solid-js";
+export interface TabsContextValue {
+    value: Accessor<number>;
+    onChange: (event: MouseEvent & {
+        currentTarget: HTMLElement;
+        target: Element;
+    }, index: number) => void;
+    indicatorContent: boolean;
+    /** Each Tab registers on setup to learn its index (in DOM order). */
+    registerTab: () => number;
+    setContentRef: (index: number, el: HTMLSpanElement) => void;
+}
+export declare const TabsContext: import("solid-js").Context<TabsContextValue | undefined>;
+export declare const useTabsContext: () => TabsContextValue | undefined;

package/dist/components/navigation/tabs/tabsContext.js

@@ -0,0 +1,7 @@
+import { createContext as t, useContext as e } from "solid-js";
+const o = t(), s = () => e(o);
+export {
+  o as TabsContext,
+  s as useTabsContext
+};
+//# sourceMappingURL=tabsContext.js.map