@smwb/ui-solid 0.1.0

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"appLayout.js","sources":["../../../../../src/components/layout/appLayout/appLayout.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { createId } from \"../../../primitives/createId\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface AppLayoutProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /** Top bar slot (e.g. <AppBar />). Spans full width. */\n  header?: JSX.Element;\n  /** Side navigation slot (e.g. <Sidebar />). */\n  sidebar?: JSX.Element;\n  /** Footer slot, below the content. */\n  footer?: JSX.Element;\n  /** Sidebar width (px or any CSS length). */\n  sidebarWidth?: number | string;\n  /** Controlled collapsed state of the sidebar rail. */\n  sidebarCollapsed?: boolean;\n  /** Initial collapsed state (uncontrolled). */\n  defaultSidebarCollapsed?: boolean;\n  /** Called whenever the collapsed state changes. */\n  onSidebarCollapsedChange?: (collapsed: boolean) => void;\n  /** Renders a built-in toggle button to collapse/expand the sidebar. */\n  collapsible?: boolean;\n  /** Custom toggle node replacing the default icon button. */\n  collapseToggle?: JSX.Element;\n  /** Accessible label for the default toggle button. */\n  collapseToggleAriaLabel?: string;\n  /** Sidebar collapsed width. */\n  sidebarCollapsedWidth?: number | string;\n  /** Keep the header pinned while content scrolls. */\n  stickyHeader?: boolean;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst len = (v: number | string): string => (typeof v === \"number\" ? `${v}px` : v);\n\nexport function AppLayout(props: ParentProps<AppLayoutProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      sidebarWidth: 260 as number | string,\n      defaultSidebarCollapsed: false,\n      collapsible: false,\n      collapseToggleAriaLabel: \"Toggle navigation\",\n      sidebarCollapsedWidth: 72 as number | string,\n      stickyHeader: true,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"header\",\n    \"sidebar\",\n    \"footer\",\n    \"sidebarWidth\",\n    \"sidebarCollapsed\",\n    \"defaultSidebarCollapsed\",\n    \"onSidebarCollapsedChange\",\n    \"collapsible\",\n    \"collapseToggle\",\n    \"collapseToggleAriaLabel\",\n    \"sidebarCollapsedWidth\",\n    \"stickyHeader\",\n    \"class\",\n    \"style\",\n    \"children\",\n    \"ref\",\n  ]);\n\n  const [collapsed, setCollapsed] = createControllableState<boolean>({\n    value: () => local.sidebarCollapsed,\n    defaultValue: local.defaultSidebarCollapsed,\n    onChange: (next) => local.onSidebarCollapsedChange?.(next),\n  });\n\n  const sidebarId = createId();\n\n  const style = (): JSX.CSSProperties => ({\n    \"--smui-app-sidebar-w\": collapsed() ? len(local.sidebarCollapsedWidth) : len(local.sidebarWidth),\n    ...(typeof local.style === \"object\" && local.style ? local.style : {}),\n  });\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid=\"app-layout\"\n      class={cn(\n        \"smwb-app-layout\",\n        { \"smwb-app-layout_sticky-header\": local.stickyHeader, \"smwb-app-layout_collapsed\": collapsed() },\n        local.class\n      )}\n      style={style()}\n    >\n      <Show when={local.header}>\n        <div class=\"smwb-app-layout__header\">{local.header}</div>\n      </Show>\n      <div class=\"smwb-app-layout__body\">\n        <Show when={local.sidebar}>\n          <aside id={sidebarId} class=\"smwb-app-layout__sidebar\">\n            <Show when={local.collapsible}>\n              <div class=\"smwb-app-layout__collapse\">\n                <Show\n                  when={local.collapseToggle}\n                  fallback={\n                    <button\n                      type=\"button\"\n                      class=\"smwb-app-layout__collapse-btn\"\n                      aria-label={local.collapseToggleAriaLabel}\n                      aria-expanded={!collapsed()}\n                      aria-controls={sidebarId}\n                      onClick={() => setCollapsed(!collapsed())}\n                    >\n                      <Icon name={collapsed() ? \"chevron_right\" : \"chevron_left\"} size={20} />\n                    </button>\n                  }\n                >\n                  {local.collapseToggle}\n                </Show>\n              </div>\n            </Show>\n            {local.sidebar}\n          </aside>\n        </Show>\n        <div class=\"smwb-app-layout__content\">\n          {local.children}\n          <Show when={local.footer}>\n            <div class=\"smwb-app-layout__footer\">{local.footer}</div>\n          </Show>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default AppLayout;\n"],"names":["len","v","AppLayout","props","merged","mergeProps","sidebarWidth","defaultSidebarCollapsed","collapsible","collapseToggleAriaLabel","sidebarCollapsedWidth","stickyHeader","local","rest","splitProps","collapsed","setCollapsed","createControllableState","value","sidebarCollapsed","defaultValue","onChange","next","onSidebarCollapsedChange","sidebarId","createId","style","_el$","_tmpl$5","_el$3","firstChild","_el$6","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","_$insert","_$createComponent","Show","when","header","children","_el$2","_tmpl$","sidebar","_el$4","_tmpl$3","_$setAttribute","_el$5","_tmpl$2","collapseToggle","fallback","_el$8","_tmpl$6","$$click","Icon","name","size","_$effect","_p$","_v$","_v$2","e","t","undefined","footer","_el$7","_tmpl$4","_$delegateEvents"],"mappings":"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"}

package/dist/headless/components/layout/divider/divider.js

@@ -0,0 +1,67 @@
+import { use as m, spread as v, mergeProps as u, insert as n, createComponent as f, memo as p, template as s } from "solid-js/web";
+import { mergeProps as h, splitProps as g, Show as w } from "solid-js";
+import b from "clsx";
+import { mergeRefs as y } from "../../../primitives/mergeRefs.js";
+var _ = /* @__PURE__ */ s("<span class=smwb-divider__text>"), x = /* @__PURE__ */ s("<div>");
+const $ = {
+  default: void 0,
+  primary: "var(--smui-primaryColor)",
+  secondary: "var(--smui-secondaryColor)",
+  error: "var(--smui-errorColor)",
+  success: "var(--smui-successColor)",
+  warning: "var(--smui-warningColor)",
+  info: "var(--smui-infoColor)"
+};
+function A(a) {
+  const l = h({
+    orientation: "horizontal",
+    variant: "fullWidth",
+    textAlign: "center",
+    color: "default"
+  }, a), [r, d] = g(l, ["class", "orientation", "variant", "textAlign", "color", "thickness", "flexItem", "style", "children", "ref"]), o = () => r.children !== void 0 && r.children !== null && r.children !== !1, c = () => {
+    const e = $[r.color], t = typeof r.thickness == "number" ? `${r.thickness}px` : r.thickness;
+    return {
+      ...typeof r.style == "object" && r.style ? r.style : {},
+      ...e ? {
+        "border-color": e
+      } : {},
+      ...t ? r.orientation === "vertical" ? {
+        "border-left-width": t
+      } : {
+        "border-bottom-width": t
+      } : {}
+    };
+  };
+  return (() => {
+    var e = x(), t = y(r.ref);
+    return typeof t == "function" && m(t, e), v(e, u(d, {
+      "data-testid": "divider",
+      role: "separator",
+      get "aria-orientation"() {
+        return r.orientation;
+      },
+      get class() {
+        return b("smwb-divider", `smwb-divider_${r.orientation}`, `smwb-divider_${r.variant}`, {
+          "smwb-divider_with-text": o() && r.orientation === "horizontal",
+          [`smwb-divider_align-${r.textAlign}`]: o() && r.orientation === "horizontal",
+          "smwb-divider_flex-item": r.flexItem
+        }, r.class);
+      },
+      get style() {
+        return c();
+      }
+    }), !1, !0), n(e, f(w, {
+      get when() {
+        return p(() => !!o())() && r.orientation === "horizontal";
+      },
+      get children() {
+        var i = _();
+        return n(i, () => r.children), i;
+      }
+    })), e;
+  })();
+}
+export {
+  A as Divider
+};
+//# sourceMappingURL=divider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"divider.js","sources":["../../../../../src/components/layout/divider/divider.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type DividerColor = \"default\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface DividerProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /** Direction of the divider line. */\n  orientation?: \"horizontal\" | \"vertical\";\n  /** Inset behaviour of the line relative to its container. */\n  variant?: \"fullWidth\" | \"inset\" | \"middle\";\n  /** Horizontal alignment of the optional text content. */\n  textAlign?: \"left\" | \"center\" | \"right\";\n  /** Line color (semantic token). */\n  color?: DividerColor;\n  /** Line thickness (number = px, or any CSS length). */\n  thickness?: number | string;\n  /** Stretch to fill a flex container along the cross axis. */\n  flexItem?: boolean;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst colorVar: Record<DividerColor, string | undefined> = {\n  default: undefined,\n  primary: \"var(--smui-primaryColor)\",\n  secondary: \"var(--smui-secondaryColor)\",\n  error: \"var(--smui-errorColor)\",\n  success: \"var(--smui-successColor)\",\n  warning: \"var(--smui-warningColor)\",\n  info: \"var(--smui-infoColor)\",\n};\n\nexport function Divider(props: ParentProps<DividerProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      orientation: \"horizontal\" as const,\n      variant: \"fullWidth\" as const,\n      textAlign: \"center\" as const,\n      color: \"default\" as DividerColor,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"orientation\",\n    \"variant\",\n    \"textAlign\",\n    \"color\",\n    \"thickness\",\n    \"flexItem\",\n    \"style\",\n    \"children\",\n    \"ref\",\n  ]);\n\n  const hasText = (): boolean =>\n    local.children !== undefined && local.children !== null && (local.children as unknown) !== false;\n\n  const dividerStyle = (): JSX.CSSProperties => {\n    const c = colorVar[local.color];\n    const t = typeof local.thickness === \"number\" ? `${local.thickness}px` : local.thickness;\n    return {\n      ...(typeof local.style === \"object\" && local.style ? local.style : {}),\n      ...(c ? { \"border-color\": c } : {}),\n      ...(t ? (local.orientation === \"vertical\" ? { \"border-left-width\": t } : { \"border-bottom-width\": t }) : {}),\n    };\n  };\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid=\"divider\"\n      role=\"separator\"\n      aria-orientation={local.orientation}\n      class={cn(\"smwb-divider\", `smwb-divider_${local.orientation}`, `smwb-divider_${local.variant}`, {\n        \"smwb-divider_with-text\": hasText() && local.orientation === \"horizontal\",\n        [`smwb-divider_align-${local.textAlign}`]: hasText() && local.orientation === \"horizontal\",\n        \"smwb-divider_flex-item\": local.flexItem,\n      }, local.class)}\n      style={dividerStyle()}\n    >\n      <Show when={hasText() && local.orientation === \"horizontal\"}>\n        <span class=\"smwb-divider__text\">{local.children}</span>\n      </Show>\n    </div>\n  );\n}\n\nexport default Divider;\n"],"names":["colorVar","default","undefined","primary","secondary","error","success","warning","info","Divider","props","merged","mergeProps","orientation","variant","textAlign","color","local","rest","splitProps","hasText","children","dividerStyle","c","t","thickness","style","_el$","_tmpl$2","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","flexItem","class","_$insert","_$createComponent","Show","when","_$memo","_el$2","_tmpl$"],"mappings":";;;;;AAsBA,MAAMA,IAAqD;AAAA,EACzDC,SAASC;AAAAA,EACTC,SAAS;AAAA,EACTC,WAAW;AAAA,EACXC,OAAO;AAAA,EACPC,SAAS;AAAA,EACTC,SAAS;AAAA,EACTC,MAAM;AACR;AAEO,SAASC,EAAQC,GAA+C;AACrE,QAAMC,IAASC,EACb;AAAA,IACEC,aAAa;AAAA,IACbC,SAAS;AAAA,IACTC,WAAW;AAAA,IACXC,OAAO;AAAA,EAAA,GAETN,CACF,GACM,CAACO,GAAOC,CAAI,IAAIC,EAAWR,GAAQ,CACvC,SACA,eACA,WACA,aACA,SACA,aACA,YACA,SACA,YACA,KAAK,CACN,GAEKS,IAAUA,MACdH,EAAMI,aAAanB,UAAae,EAAMI,aAAa,QAASJ,EAAMI,aAAyB,IAEvFC,IAAeA,MAAyB;AAC5C,UAAMC,IAAIvB,EAASiB,EAAMD,KAAK,GACxBQ,IAAI,OAAOP,EAAMQ,aAAc,WAAW,GAAGR,EAAMQ,SAAS,OAAOR,EAAMQ;AAC/E,WAAO;AAAA,MACL,GAAI,OAAOR,EAAMS,SAAU,YAAYT,EAAMS,QAAQT,EAAMS,QAAQ,CAAA;AAAA,MACnE,GAAIH,IAAI;AAAA,QAAE,gBAAgBA;AAAAA,MAAAA,IAAM,CAAA;AAAA,MAChC,GAAIC,IAAKP,EAAMJ,gBAAgB,aAAa;AAAA,QAAE,qBAAqBW;AAAAA,MAAAA,IAAM;AAAA,QAAE,uBAAuBA;AAAAA,MAAAA,IAAO,CAAA;AAAA,IAAC;AAAA,EAE9G;AAEA,UAAA,MAAA;AAAA,QAAAG,IAAAC,EAAAA,GAAAC,IAGSC,EAAUb,EAAMc,GAAG;AAAC,kBAAAF,KAAA,cAAAG,EAAAH,GAAAF,CAAA,GAAAM,EAAAN,GAAAO,EADrBhB,GAAI;AAAA,MAAA,eAEI;AAAA,MAAS,MAChB;AAAA,MAAW,IAAA,qBAAA;AAAA,eACED,EAAMJ;AAAAA,MAAW;AAAA,MAAA,IAAA,QAAA;AAAA,eAC5BsB,EAAG,gBAAgB,gBAAgBlB,EAAMJ,WAAW,IAAI,gBAAgBI,EAAMH,OAAO,IAAI;AAAA,UAC9F,0BAA0BM,EAAAA,KAAaH,EAAMJ,gBAAgB;AAAA,UAC7D,CAAC,sBAAsBI,EAAMF,SAAS,EAAE,GAAGK,EAAAA,KAAaH,EAAMJ,gBAAgB;AAAA,UAC9E,0BAA0BI,EAAMmB;AAAAA,QAAAA,GAC/BnB,EAAMoB,KAAK;AAAA,MAAC;AAAA,MAAA,IACfX,QAAK;AAAA,eAAEJ,EAAAA;AAAAA,MAAc;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAgB,EAAAX,GAAAY,EAEpBC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEC,EAAA,MAAA,CAAA,CAAAtB,GAAS,OAAIH,EAAMJ,gBAAgB;AAAA,MAAY;AAAA,MAAA,IAAAQ,WAAA;AAAA,YAAAsB,IAAAC,EAAAA;AAAAN,eAAAA,EAAAK,GAAA,MACvB1B,EAAMI,QAAQ,GAAAsB;AAAAA,MAAA;AAAA,IAAA,CAAA,CAAA,GAAAhB;AAAAA,EAAA,GAAA;AAIxD;"}

package/dist/headless/components/layout/grid/grid.js

@@ -0,0 +1,92 @@
+import { use as f, spread as a, mergeProps as c, template as _ } from "solid-js/web";
+import { splitProps as m } from "solid-js";
+import d from "clsx";
+import { mergeRefs as u } from "../../../primitives/mergeRefs.js";
+var g = /* @__PURE__ */ _("<div>");
+function j(r) {
+  const [s, e] = m(r, ["class", "ref"]);
+  return (() => {
+    var n = g(), t = u(s.ref);
+    return typeof t == "function" && f(t, n), a(n, c(e, {
+      "data-testid": "grid",
+      get class() {
+        return d("smwb-grid", s.class);
+      }
+    }), !1, !1), n;
+  })();
+}
+const w = ["wrap", "nowrap", "wrap-reverse"], p = ["flex-start", "center", "flex-end", "space-between", "space-around", "space-evenly"], b = ["flex-start", "center", "flex-end", "stretch", "baseline"], x = ["row", "row-reverse", "column", "column-reverse"];
+function I(r) {
+  const [s, e] = m(r, ["class", "justifyContent", "alignItems", "direction", "wrap", "spacing", "ref"]), n = () => {
+    const t = s.justifyContent && p.includes(s.justifyContent) && s.justifyContent !== "flex-start", o = s.alignItems && b.includes(s.alignItems) && s.alignItems !== "flex-start", i = s.direction && x.includes(s.direction) && s.direction !== "row", l = s.wrap && w.includes(s.wrap) && s.wrap !== "wrap";
+    return d("smwb-grid__row", s.class, {
+      [`smwb-grid__row--spacing-${s.spacing}`]: s.spacing,
+      [`smwb-grid__row--justifyContent-${s.justifyContent}`]: t,
+      [`smwb-grid__row--alignItems-${s.alignItems}`]: o,
+      [`smwb-grid__row--direction-${s.direction}`]: i,
+      [`smwb-grid__row--${s.wrap}`]: l
+    });
+  };
+  return (() => {
+    var t = g(), o = u(s.ref);
+    return typeof o == "function" && f(o, t), a(t, c(e, {
+      "data-testid": "grid-row",
+      get class() {
+        return n();
+      }
+    }), !1, !1), t;
+  })();
+}
+const $ = (r) => r === void 0 ? {} : typeof r == "boolean" ? {
+  "smwb-grid__column--hidden": r
+} : Object.keys(r).reduce((s, e) => (s[`smwb-grid__column--hidden-${e}`] = r[e] === !0, s[`smwb-grid__column--visible-${e}`] = r[e] === !1, s), {});
+function h(r) {
+  const [s, e] = m(r, ["class", "xs", "sm", "md", "lg", "xl", "xsOffset", "smOffset", "mdOffset", "lgOffset", "xlOffset", "hidden", "ref"]), n = () => d("smwb-grid__column", s.class, {
+    [`smwb-grid__column--xs-${s.xs}`]: s.xs,
+    [`smwb-grid__column--sm-${s.sm}`]: s.sm,
+    [`smwb-grid__column--md-${s.md}`]: s.md,
+    [`smwb-grid__column--lg-${s.lg}`]: s.lg,
+    [`smwb-grid__column--xl-${s.xl}`]: s.xl,
+    [`smwb-grid__column--xs-offset-${s.xsOffset}`]: s.xsOffset,
+    [`smwb-grid__column--sm-offset-${s.smOffset}`]: s.smOffset,
+    [`smwb-grid__column--md-offset-${s.mdOffset}`]: s.mdOffset,
+    [`smwb-grid__column--lg-offset-${s.lgOffset}`]: s.lgOffset,
+    [`smwb-grid__column--xl-offset-${s.xlOffset}`]: s.xlOffset,
+    ...$(s.hidden)
+  });
+  return (() => {
+    var t = g(), o = u(s.ref);
+    return typeof o == "function" && f(o, t), a(t, c(e, {
+      get class() {
+        return n();
+      },
+      "data-testid": "grid-col"
+    }), !1, !1), t;
+  })();
+}
+function W(r) {
+  const s = r, [e, n] = m(s, ["class", "maxWidth", "disableGutters", "ref"]), t = () => e.maxWidth ?? "lg", o = () => d("smwb-container", {
+    [`smwb-container--${t()}`]: t() !== !1,
+    "smwb-container--gutterless": e.disableGutters
+  }, e.class);
+  return (() => {
+    var i = g(), l = u(e.ref);
+    return typeof l == "function" && f(l, i), a(i, c(n, {
+      "data-testid": "grid-container",
+      get class() {
+        return o();
+      }
+    }), !1, !1), i;
+  })();
+}
+export {
+  h as Column,
+  W as Container,
+  j as Grid,
+  I as Row,
+  b as alignItemsOptions,
+  x as directionOptions,
+  p as justifyContentOptions,
+  w as wrapOptions
+};
+//# sourceMappingURL=grid.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"grid.js","sources":["../../../../../src/components/layout/grid/grid.tsx"],"sourcesContent":["import { type JSX, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\ntype DivProps = JSX.HTMLAttributes<HTMLDivElement> & { ref?: Ref<HTMLDivElement> };\n\nexport function Grid(props: DivProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\"class\", \"ref\"]);\n  return <div {...rest} ref={mergeRefs(local.ref)} data-testid=\"grid\" class={cn(\"smwb-grid\", local.class)} />;\n}\n\nexport type ColumnSpan = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n/** Column width per breakpoint: 1–12 grid units, `\"auto\"` (fit content) or `true` (fill remaining). */\nexport type BreakpointType = ColumnSpan | \"auto\" | true;\n/** Column offset (empty leading columns) per breakpoint: 0–11. */\nexport type OffsetType = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11;\nexport type Breakpoint = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\nexport type ResponsiveBool = boolean | Partial<Record<Breakpoint, boolean>>;\n\nexport const wrapOptions = [\"wrap\", \"nowrap\", \"wrap-reverse\"] as const;\nexport const justifyContentOptions = [\n  \"flex-start\",\n  \"center\",\n  \"flex-end\",\n  \"space-between\",\n  \"space-around\",\n  \"space-evenly\",\n] as const;\nexport const alignItemsOptions = [\"flex-start\", \"center\", \"flex-end\", \"stretch\", \"baseline\"] as const;\nexport const directionOptions = [\"row\", \"row-reverse\", \"column\", \"column-reverse\"] as const;\n\nexport interface RowProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  wrap?: (typeof wrapOptions)[number];\n  justifyContent?: (typeof justifyContentOptions)[number];\n  alignItems?: (typeof alignItemsOptions)[number];\n  direction?: (typeof directionOptions)[number];\n  spacing?: number;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function Row(props: RowProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"class\",\n    \"justifyContent\",\n    \"alignItems\",\n    \"direction\",\n    \"wrap\",\n    \"spacing\",\n    \"ref\",\n  ]);\n\n  const classes = (): string => {\n    const isJustifyContent =\n      local.justifyContent && justifyContentOptions.includes(local.justifyContent) && local.justifyContent !== \"flex-start\";\n    const isAlignItems = local.alignItems && alignItemsOptions.includes(local.alignItems) && local.alignItems !== \"flex-start\";\n    const isDirection = local.direction && directionOptions.includes(local.direction) && local.direction !== \"row\";\n    const isFlexWrap = local.wrap && wrapOptions.includes(local.wrap) && local.wrap !== \"wrap\";\n    return cn(\"smwb-grid__row\", local.class, {\n      [`smwb-grid__row--spacing-${local.spacing}`]: local.spacing,\n      [`smwb-grid__row--justifyContent-${local.justifyContent}`]: isJustifyContent,\n      [`smwb-grid__row--alignItems-${local.alignItems}`]: isAlignItems,\n      [`smwb-grid__row--direction-${local.direction}`]: isDirection,\n      [`smwb-grid__row--${local.wrap}`]: isFlexWrap,\n    });\n  };\n\n  return <div {...rest} ref={mergeRefs(local.ref)} data-testid=\"grid-row\" class={classes()} />;\n}\n\nexport interface ColumnProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"hidden\"> {\n  xs?: BreakpointType;\n  sm?: BreakpointType;\n  md?: BreakpointType;\n  lg?: BreakpointType;\n  xl?: BreakpointType;\n  xsOffset?: OffsetType;\n  smOffset?: OffsetType;\n  mdOffset?: OffsetType;\n  lgOffset?: OffsetType;\n  xlOffset?: OffsetType;\n  /** Hide column: boolean (always) or per breakpoint `{ xs:true, md:false }`. */\n  hidden?: ResponsiveBool;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst hiddenClasses = (hidden?: ResponsiveBool): Record<string, boolean> => {\n  if (hidden === undefined) {\n    return {};\n  }\n  if (typeof hidden === \"boolean\") {\n    return { \"smwb-grid__column--hidden\": hidden };\n  }\n  return (Object.keys(hidden) as Breakpoint[]).reduce<Record<string, boolean>>((acc, bp) => {\n    acc[`smwb-grid__column--hidden-${bp}`] = hidden[bp] === true;\n    acc[`smwb-grid__column--visible-${bp}`] = hidden[bp] === false;\n    return acc;\n  }, {});\n};\n\nexport function Column(props: ColumnProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"class\",\n    \"xs\",\n    \"sm\",\n    \"md\",\n    \"lg\",\n    \"xl\",\n    \"xsOffset\",\n    \"smOffset\",\n    \"mdOffset\",\n    \"lgOffset\",\n    \"xlOffset\",\n    \"hidden\",\n    \"ref\",\n  ]);\n\n  const classes = (): string =>\n    cn(\"smwb-grid__column\", local.class, {\n      [`smwb-grid__column--xs-${local.xs}`]: local.xs,\n      [`smwb-grid__column--sm-${local.sm}`]: local.sm,\n      [`smwb-grid__column--md-${local.md}`]: local.md,\n      [`smwb-grid__column--lg-${local.lg}`]: local.lg,\n      [`smwb-grid__column--xl-${local.xl}`]: local.xl,\n      [`smwb-grid__column--xs-offset-${local.xsOffset}`]: local.xsOffset,\n      [`smwb-grid__column--sm-offset-${local.smOffset}`]: local.smOffset,\n      [`smwb-grid__column--md-offset-${local.mdOffset}`]: local.mdOffset,\n      [`smwb-grid__column--lg-offset-${local.lgOffset}`]: local.lgOffset,\n      [`smwb-grid__column--xl-offset-${local.xlOffset}`]: local.xlOffset,\n      ...hiddenClasses(local.hidden),\n    });\n\n  return <div {...rest} ref={mergeRefs(local.ref)} class={classes()} data-testid=\"grid-col\" />;\n}\n\nexport type ContainerMaxWidth = \"sm\" | \"md\" | \"lg\" | \"xl\" | false;\nexport interface ContainerProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /** Max-width breakpoint cap; `false` = fluid full width. */\n  maxWidth?: ContainerMaxWidth;\n  /** Remove horizontal gutters. */\n  disableGutters?: boolean;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function Container(props: ContainerProps): JSX.Element {\n  const merged = props;\n  const [local, rest] = splitProps(merged, [\"class\", \"maxWidth\", \"disableGutters\", \"ref\"]);\n  const maxWidth = (): ContainerMaxWidth => local.maxWidth ?? \"lg\";\n  const classes = (): string =>\n    cn(\n      \"smwb-container\",\n      {\n        [`smwb-container--${maxWidth()}`]: maxWidth() !== false,\n        \"smwb-container--gutterless\": local.disableGutters,\n      },\n      local.class\n    );\n  return <div {...rest} ref={mergeRefs(local.ref)} data-testid=\"grid-container\" class={classes()} />;\n}\n"],"names":["Grid","props","local","rest","splitProps","_el$","_tmpl$","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","wrapOptions","justifyContentOptions","alignItemsOptions","directionOptions","Row","classes","isJustifyContent","justifyContent","includes","isAlignItems","alignItems","isDirection","direction","isFlexWrap","wrap","spacing","_el$2","_ref$2","hiddenClasses","hidden","undefined","Object","keys","reduce","acc","bp","Column","xs","sm","md","lg","xl","xsOffset","smOffset","mdOffset","lgOffset","xlOffset","_el$3","_ref$3","Container","merged","maxWidth","disableGutters","_el$4","_ref$4"],"mappings":"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"}

package/dist/headless/components/layout/page/page.js

@@ -0,0 +1,35 @@
+import { createComponent as n, Dynamic as o, mergeProps as i, insert as p, template as l } from "solid-js/web";
+import { mergeProps as c, splitProps as g } from "solid-js";
+import d from "clsx";
+import { mergeRefs as f } from "../../../primitives/mergeRefs.js";
+var u = /* @__PURE__ */ l("<div class=smwb-page__inner>");
+function P(s) {
+  const a = c({
+    maxWidth: "lg",
+    disableGutters: !1
+  }, s), [e, m] = g(a, ["maxWidth", "disableGutters", "component", "class", "children", "ref"]);
+  return n(o, i({
+    get component() {
+      return e.component ?? "main";
+    }
+  }, m, {
+    ref(r) {
+      var t = f(e.ref);
+      typeof t == "function" && t(r);
+    },
+    "data-testid": "page",
+    get class() {
+      return d("smwb-page", `smwb-page_max-${e.maxWidth}`, {
+        "smwb-page_gutterless": e.disableGutters
+      }, e.class);
+    },
+    get children() {
+      var r = u();
+      return p(r, () => e.children), r;
+    }
+  }));
+}
+export {
+  P as Page
+};
+//# sourceMappingURL=page.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"page.js","sources":["../../../../../src/components/layout/page/page.tsx"],"sourcesContent":["import { type JSX, type ParentProps, 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 PageMaxWidth = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\";\n\nexport interface PageProps extends JSX.HTMLAttributes<HTMLElement> {\n  /** Content max-width cap; `full` = fluid. */\n  maxWidth?: PageMaxWidth;\n  /** Remove the page padding. */\n  disableGutters?: boolean;\n  /** Render as a different element (default `main`). */\n  component?: string;\n  ref?: Ref<HTMLElement>;\n}\n\nexport function Page(props: ParentProps<PageProps>): JSX.Element {\n  const merged = mergeProps({ maxWidth: \"lg\" as PageMaxWidth, disableGutters: false }, props);\n  const [local, rest] = splitProps(merged, [\"maxWidth\", \"disableGutters\", \"component\", \"class\", \"children\", \"ref\"]);\n  return (\n    <Dynamic\n      component={local.component ?? \"main\"}\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid=\"page\"\n      class={cn(\n        \"smwb-page\",\n        `smwb-page_max-${local.maxWidth}`,\n        { \"smwb-page_gutterless\": local.disableGutters },\n        local.class\n      )}\n    >\n      <div class=\"smwb-page__inner\">{local.children}</div>\n    </Dynamic>\n  );\n}\n\nexport default Page;\n"],"names":["Page","props","merged","mergeProps","maxWidth","disableGutters","local","rest","splitProps","_$createComponent","Dynamic","_$mergeProps","component","ref","r$","_ref$","mergeRefs","cn","class","children","_el$","_tmpl$","_$insert"],"mappings":";;;;;AAiBO,SAASA,EAAKC,GAA4C;AAC/D,QAAMC,IAASC,EAAW;AAAA,IAAEC,UAAU;AAAA,IAAsBC,gBAAgB;AAAA,EAAA,GAASJ,CAAK,GACpF,CAACK,GAAOC,CAAI,IAAIC,EAAWN,GAAQ,CAAC,YAAY,kBAAkB,aAAa,SAAS,YAAY,KAAK,CAAC;AAChH,SAAAO,EACGC,GAAOC,EAAA;AAAA,IAAA,IACNC,YAAS;AAAA,aAAEN,EAAMM,aAAa;AAAA,IAAM;AAAA,EAAA,GAChCL,GAAI;AAAA,IAAAM,IAAAC,GAAA;AAAA,UAAAC,IACHC,EAAUV,EAAMO,GAAG;AAAC,aAAAE,KAAA,cAAAA,EAAAD,CAAA;AAAA,IAAA;AAAA,IAAA,eAAA;AAAA,IAAA,IAAA,QAAA;AAAA,aAElBG,EACL,aACA,iBAAiBX,EAAMF,QAAQ,IAC/B;AAAA,QAAE,wBAAwBE,EAAMD;AAAAA,MAAAA,GAChCC,EAAMY,KACR;AAAA,IAAC;AAAA,IAAA,IAAAC,WAAA;AAAA,UAAAC,IAAAC,EAAAA;AAAAC,aAAAA,EAAAF,GAAA,MAE8Bd,EAAMa,QAAQ,GAAAC;AAAAA,IAAA;AAAA,EAAA,CAAA,CAAA;AAGnD;"}

package/dist/headless/components/layout/pageHeader/pageHeader.js

@@ -0,0 +1,76 @@
+import { use as u, spread as h, mergeProps as _, insert as t, createComponent as a, template as i } from "solid-js/web";
+import { mergeProps as b, splitProps as f, Show as l } from "solid-js";
+import v from "clsx";
+import { mergeRefs as w } from "../../../primitives/mergeRefs.js";
+import { Typography as c } from "../../dataDisplay/typography/typography.js";
+var $ = /* @__PURE__ */ i("<div class=smwb-page-header__breadcrumbs>"), y = /* @__PURE__ */ i("<div class=smwb-page-header__actions>"), P = /* @__PURE__ */ i("<header><div class=smwb-page-header__row><div class=smwb-page-header__titles>"), C = /* @__PURE__ */ i("<div class=smwb-page-header__title>");
+function T(m) {
+  const p = b({
+    divider: !1
+  }, m), [e, g] = f(p, ["title", "subtitle", "breadcrumbs", "actions", "divider", "class", "ref"]);
+  return (() => {
+    var s = P(), n = s.firstChild, d = n.firstChild, o = w(e.ref);
+    return typeof o == "function" && u(o, s), h(s, _(g, {
+      "data-testid": "page-header",
+      get class() {
+        return v("smwb-page-header", {
+          "smwb-page-header_divider": e.divider
+        }, e.class);
+      }
+    }), !1, !0), t(s, a(l, {
+      get when() {
+        return e.breadcrumbs;
+      },
+      get children() {
+        var r = $();
+        return t(r, () => e.breadcrumbs), r;
+      }
+    }), n), t(d, a(l, {
+      get when() {
+        return typeof e.title == "string";
+      },
+      get fallback() {
+        return (() => {
+          var r = C();
+          return t(r, () => e.title), r;
+        })();
+      },
+      get children() {
+        return a(c, {
+          variant: "h4",
+          component: "h1",
+          class: "smwb-page-header__title",
+          get children() {
+            return e.title;
+          }
+        });
+      }
+    }), null), t(d, a(l, {
+      get when() {
+        return e.subtitle;
+      },
+      get children() {
+        return a(c, {
+          variant: "body2",
+          color: "textSecondary",
+          class: "smwb-page-header__subtitle",
+          get children() {
+            return e.subtitle;
+          }
+        });
+      }
+    }), null), t(n, a(l, {
+      get when() {
+        return e.actions;
+      },
+      get children() {
+        var r = y();
+        return t(r, () => e.actions), r;
+      }
+    }), null), s;
+  })();
+}
+export {
+  T as PageHeader
+};
+//# sourceMappingURL=pageHeader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pageHeader.js","sources":["../../../../../src/components/layout/pageHeader/pageHeader.tsx"],"sourcesContent":["import { type JSX, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Typography } from \"../../dataDisplay/typography\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface PageHeaderProps extends Omit<JSX.HTMLAttributes<HTMLElement>, \"title\"> {\n  title: JSX.Element | string;\n  subtitle?: JSX.Element | string;\n  /** Slot above the title (e.g. <Breadcrumbs />). */\n  breadcrumbs?: JSX.Element;\n  /** Slot on the trailing side (e.g. action buttons). */\n  actions?: JSX.Element;\n  /** Render a divider below the header. */\n  divider?: boolean;\n  ref?: Ref<HTMLElement>;\n}\n\nexport function PageHeader(props: PageHeaderProps): JSX.Element {\n  const merged = mergeProps({ divider: false }, props);\n  const [local, rest] = splitProps(merged, [\n    \"title\",\n    \"subtitle\",\n    \"breadcrumbs\",\n    \"actions\",\n    \"divider\",\n    \"class\",\n    \"ref\",\n  ]);\n\n  return (\n    <header\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid=\"page-header\"\n      class={cn(\"smwb-page-header\", { \"smwb-page-header_divider\": local.divider }, local.class)}\n    >\n      <Show when={local.breadcrumbs}>\n        <div class=\"smwb-page-header__breadcrumbs\">{local.breadcrumbs}</div>\n      </Show>\n      <div class=\"smwb-page-header__row\">\n        <div class=\"smwb-page-header__titles\">\n          <Show\n            when={typeof local.title === \"string\"}\n            fallback={<div class=\"smwb-page-header__title\">{local.title}</div>}\n          >\n            <Typography variant=\"h4\" component=\"h1\" class=\"smwb-page-header__title\">\n              {local.title}\n            </Typography>\n          </Show>\n          <Show when={local.subtitle}>\n            <Typography variant=\"body2\" color=\"textSecondary\" class=\"smwb-page-header__subtitle\">\n              {local.subtitle}\n            </Typography>\n          </Show>\n        </div>\n        <Show when={local.actions}>\n          <div class=\"smwb-page-header__actions\">{local.actions}</div>\n        </Show>\n      </div>\n    </header>\n  );\n}\n\nexport default PageHeader;\n"],"names":["PageHeader","props","merged","mergeProps","divider","local","rest","splitProps","_el$","_tmpl$3","_el$3","firstChild","_el$4","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","_$insert","_$createComponent","Show","when","breadcrumbs","children","_el$2","_tmpl$","title","fallback","_el$6","_tmpl$4","Typography","variant","component","subtitle","color","actions","_el$5","_tmpl$2"],"mappings":";;;;;;AAiBO,SAASA,EAAWC,GAAqC;AAC9D,QAAMC,IAASC,EAAW;AAAA,IAAEC,SAAS;AAAA,EAAA,GAASH,CAAK,GAC7C,CAACI,GAAOC,CAAI,IAAIC,EAAWL,GAAQ,CACvC,SACA,YACA,eACA,WACA,WACA,SACA,KAAK,CACN;AAED,UAAA,MAAA;AAAA,QAAAM,IAAAC,EAAAA,GAAAC,IAAAF,EAAAG,YAAAC,IAAAF,EAAAC,YAAAE,IAGSC,EAAUT,EAAMU,GAAG;AAAC,kBAAAF,KAAA,cAAAG,EAAAH,GAAAL,CAAA,GAAAS,EAAAT,GAAAU,EADrBZ,GAAI;AAAA,MAAA,eAEI;AAAA,MAAa,IAAA,QAAA;AAAA,eAClBa,EAAG,oBAAoB;AAAA,UAAE,4BAA4Bd,EAAMD;AAAAA,QAAAA,GAAWC,EAAMe,KAAK;AAAA,MAAC;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAC,EAAAb,GAAAc,EAExFC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEnB,EAAMoB;AAAAA,MAAW;AAAA,MAAA,IAAAC,WAAA;AAAA,YAAAC,IAAAC,EAAAA;AAAAP,eAAAA,EAAAM,GAAA,MACiBtB,EAAMoB,WAAW,GAAAE;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAAjB,CAAA,GAAAW,EAAAT,GAAAU,EAI1DC,GAAI;AAAA,MAAA,IACHC,OAAI;AAAA,eAAE,OAAOnB,EAAMwB,SAAU;AAAA,MAAQ;AAAA,MAAA,IACrCC,WAAQ;AAAA,gBAAA,MAAA;AAAA,cAAAC,IAAAC,EAAAA;AAAAX,iBAAAA,EAAAU,GAAA,MAAwC1B,EAAMwB,KAAK,GAAAE;AAAAA,QAAA,GAAA;AAAA,MAAA;AAAA,MAAA,IAAAL,WAAA;AAAA,eAAAJ,EAE1DW,GAAU;AAAA,UAACC,SAAO;AAAA,UAAMC,WAAS;AAAA,UAAA,OAAA;AAAA,UAAA,IAAAT,WAAA;AAAA,mBAC/BrB,EAAMwB;AAAAA,UAAK;AAAA,QAAA,CAAA;AAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAR,EAAAT,GAAAU,EAGfC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEnB,EAAM+B;AAAAA,MAAQ;AAAA,MAAA,IAAAV,WAAA;AAAA,eAAAJ,EACvBW,GAAU;AAAA,UAACC,SAAO;AAAA,UAASG,OAAK;AAAA,UAAA,OAAA;AAAA,UAAA,IAAAX,WAAA;AAAA,mBAC9BrB,EAAM+B;AAAAA,UAAQ;AAAA,QAAA,CAAA;AAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAf,EAAAX,GAAAY,EAIpBC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEnB,EAAMiC;AAAAA,MAAO;AAAA,MAAA,IAAAZ,WAAA;AAAA,YAAAa,IAAAC,EAAAA;AAAAnB,eAAAA,EAAAkB,GAAA,MACiBlC,EAAMiC,OAAO,GAAAC;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAA/B;AAAAA,EAAA,GAAA;AAK/D;"}

package/dist/headless/components/layout/screenDivider/screenDivider.js

@@ -0,0 +1,79 @@
+import { isServer as X, use as Y, insert as L, setAttribute as c, effect as F, className as v, style as $, template as N, delegateEvents as O } from "solid-js/web";
+import { mergeProps as T, splitProps as U, createSignal as x, createEffect as f, children as j, onCleanup as q } from "solid-js";
+import m from "clsx";
+import { throttle as B } from "../../../utils/throttle.js";
+import { mergeRefs as G } from "../../../primitives/mergeRefs.js";
+var J = /* @__PURE__ */ N("<div data-testid=screen-divider><div></div><span class=smwb-screen-divider__resizer role=separator aria-valuemin=0 aria-valuemax=100 tabindex=0></span><div>");
+const C = (a, d) => d * (a / 100), _ = (a, d) => !a && d ? 100 - d : a || 50;
+function re(a) {
+  const d = T({
+    orientation: "horizontal",
+    keyboardStep: 5,
+    resizerAriaLabel: "Resize panels"
+  }, a), [e] = U(d, ["class", "orientation", "sizeFirst", "sizeSecond", "children", "onSizeChange", "keyboardStep", "resizerAriaLabel", "ref"]);
+  let u;
+  const [l, s] = x(_(e.sizeFirst, e.sizeSecond)), [h, b] = x(!1);
+  f(() => {
+    s(_(e.sizeFirst, e.sizeSecond));
+  }), f(() => {
+    e.onSizeChange?.(l());
+  });
+  const M = j(() => e.children), y = () => M.toArray(), g = B((t) => {
+    if (!h()) return;
+    const o = u;
+    if (o)
+      if (e.orientation === "vertical") {
+        let r = t.clientY - o.offsetTop;
+        r < 0 && (r = 0);
+        const n = r / o.clientHeight * 100;
+        C(n, o.clientWidth) > 5 && n < 101 && s(n - 7);
+      } else {
+        let r = t.clientX - o.offsetLeft;
+        r < 0 && (r = 0);
+        const n = r / o.clientWidth * 100;
+        C(n, o.clientWidth) > 5 && n < 101 && s(n);
+      }
+  }, 1e3 / 60), R = () => {
+    b(!0);
+  }, p = () => {
+    b(!1);
+  };
+  f(() => {
+    X || (h() ? (document.body.addEventListener("pointerup", p), document.body.addEventListener("pointermove", g), document.body.style.cursor = e.orientation === "horizontal" ? "e-resize" : "n-resize") : document.body.style.cursor = "default", q(() => {
+      document.body.removeEventListener("pointerup", p), document.body.removeEventListener("pointermove", g);
+    }));
+  });
+  const K = (t) => {
+    const o = e.orientation === "vertical" ? "ArrowUp" : "ArrowLeft", r = e.orientation === "vertical" ? "ArrowDown" : "ArrowRight";
+    t.key === o ? (t.preventDefault(), s((n) => Math.max(0, n - e.keyboardStep))) : t.key === r ? (t.preventDefault(), s((n) => Math.min(100, n + e.keyboardStep))) : t.key === "Home" ? (t.preventDefault(), s(0)) : t.key === "End" && (t.preventDefault(), s(100));
+  }, P = () => e.orientation === "vertical" ? {
+    height: `${l()}%`
+  } : {
+    width: `${l()}%`
+  }, W = () => e.orientation === "vertical" ? {
+    height: `${100 - l()}%`
+  } : {
+    width: `${100 - l()}%`
+  };
+  return (() => {
+    var t = J(), o = t.firstChild, r = o.nextSibling, n = r.nextSibling, w = G(e.ref, (i) => u = i);
+    return typeof w == "function" && Y(w, t), L(o, () => y()[0] ?? ""), r.$$keydown = K, r.$$pointerdown = R, c(r, "draggable", !1), L(n, () => y()[1] ?? ""), F((i) => {
+      var z = m("smwb-screen-divider__wrapper", `smwb-${e.orientation}`, e.class), S = m("smwb-screen-divider__first", `smwb-${e.orientation}`), H = P(), D = e.orientation === "vertical" ? "horizontal" : "vertical", k = Math.round(l()), A = e.resizerAriaLabel, E = m("smwb-screen-divider__second", `smwb-${e.orientation}`), I = W();
+      return z !== i.e && v(t, i.e = z), S !== i.t && v(o, i.t = S), i.a = $(o, H, i.a), D !== i.o && c(r, "aria-orientation", i.o = D), k !== i.i && c(r, "aria-valuenow", i.i = k), A !== i.n && c(r, "aria-label", i.n = A), E !== i.s && v(n, i.s = E), i.h = $(n, I, i.h), i;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0,
+      n: void 0,
+      s: void 0,
+      h: void 0
+    }), t;
+  })();
+}
+O(["pointerdown", "keydown"]);
+export {
+  re as ScreenDivider
+};
+//# sourceMappingURL=screenDivider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"screenDivider.js","sources":["../../../../../src/components/layout/screenDivider/screenDivider.tsx"],"sourcesContent":["import {\n  type JSX,\n  type ParentProps,\n  children as resolveChildren,\n  createEffect,\n  createSignal,\n  mergeProps,\n  onCleanup,\n  splitProps,\n} from \"solid-js\";\nimport { isServer } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { throttle } from \"../../../utils/throttle\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface ScreenDividerProps {\n  sizeFirst?: number;\n  sizeSecond?: number;\n  class?: string;\n  orientation?: \"horizontal\" | \"vertical\";\n  /** Called with the first pane size (percent) whenever it changes. */\n  onSizeChange?: (sizeFirst: number) => void;\n  /** Step (in percent) applied on arrow-key resize. */\n  keyboardStep?: number;\n  /** Accessible label for the resizer handle. */\n  resizerAriaLabel?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst toPixels = (percent: number, parentSize: number): number => parentSize * (percent / 100);\n\nconst getInitialDivider = (sizeFirst?: number | null, sizeSecond?: number | null): number => {\n  if (!sizeFirst && sizeSecond) {\n    return 100 - sizeSecond;\n  }\n  if (sizeFirst) {\n    return sizeFirst;\n  }\n  return 50;\n};\n\nexport function ScreenDivider(props: ParentProps<ScreenDividerProps>): JSX.Element {\n  const merged = mergeProps(\n    { orientation: \"horizontal\" as const, keyboardStep: 5, resizerAriaLabel: \"Resize panels\" },\n    props\n  );\n  const [local] = splitProps(merged, [\n    \"class\",\n    \"orientation\",\n    \"sizeFirst\",\n    \"sizeSecond\",\n    \"children\",\n    \"onSizeChange\",\n    \"keyboardStep\",\n    \"resizerAriaLabel\",\n    \"ref\",\n  ]);\n\n  let wrapperEl: HTMLDivElement | undefined;\n  const [divider, setDivider] = createSignal(getInitialDivider(local.sizeFirst, local.sizeSecond));\n  const [isDragging, setIsDragging] = createSignal(false);\n\n  // Sync with controlled size props.\n  createEffect(() => {\n    setDivider(getInitialDivider(local.sizeFirst, local.sizeSecond));\n  });\n\n  // Report size changes.\n  createEffect(() => {\n    local.onSizeChange?.(divider());\n  });\n\n  const resolved = resolveChildren(() => local.children);\n  const child = (): unknown[] => resolved.toArray();\n\n  const dragOver = throttle((event: PointerEvent) => {\n    if (!isDragging()) return;\n    const wrapper = wrapperEl;\n    if (!wrapper) return;\n    if (local.orientation === \"vertical\") {\n      let relativeMouseY = event.clientY - wrapper.offsetTop;\n      if (relativeMouseY < 0) relativeMouseY = 0;\n      const newDivider = (relativeMouseY / wrapper.clientHeight) * 100;\n      if (toPixels(newDivider, wrapper.clientWidth) > 5 && newDivider < 101) {\n        setDivider(newDivider - 7);\n      }\n    } else {\n      let relativeMouseX = event.clientX - wrapper.offsetLeft;\n      if (relativeMouseX < 0) relativeMouseX = 0;\n      const newDivider = (relativeMouseX / wrapper.clientWidth) * 100;\n      if (toPixels(newDivider, wrapper.clientWidth) > 5 && newDivider < 101) {\n        setDivider(newDivider);\n      }\n    }\n  }, 1000 / 60);\n\n  const handleDragStart = (): void => {\n    setIsDragging(true);\n  };\n  const handleDragEnd = (): void => {\n    setIsDragging(false);\n  };\n\n  createEffect(() => {\n    if (isServer) return;\n    if (isDragging()) {\n      document.body.addEventListener(\"pointerup\", handleDragEnd);\n      document.body.addEventListener(\"pointermove\", dragOver);\n      document.body.style.cursor = local.orientation === \"horizontal\" ? \"e-resize\" : \"n-resize\";\n    } else {\n      document.body.style.cursor = \"default\";\n    }\n    onCleanup(() => {\n      document.body.removeEventListener(\"pointerup\", handleDragEnd);\n      document.body.removeEventListener(\"pointermove\", dragOver);\n    });\n  });\n\n  const onResizerKeyDown: JSX.EventHandler<HTMLSpanElement, KeyboardEvent> = (event) => {\n    const decreaseKey = local.orientation === \"vertical\" ? \"ArrowUp\" : \"ArrowLeft\";\n    const increaseKey = local.orientation === \"vertical\" ? \"ArrowDown\" : \"ArrowRight\";\n    if (event.key === decreaseKey) {\n      event.preventDefault();\n      setDivider((prev) => Math.max(0, prev - local.keyboardStep));\n    } else if (event.key === increaseKey) {\n      event.preventDefault();\n      setDivider((prev) => Math.min(100, prev + local.keyboardStep));\n    } else if (event.key === \"Home\") {\n      event.preventDefault();\n      setDivider(0);\n    } else if (event.key === \"End\") {\n      event.preventDefault();\n      setDivider(100);\n    }\n  };\n\n  const firstChildStyle = (): JSX.CSSProperties =>\n    local.orientation === \"vertical\" ? { height: `${divider()}%` } : { width: `${divider()}%` };\n  const secondChildStyle = (): JSX.CSSProperties =>\n    local.orientation === \"vertical\" ? { height: `${100 - divider()}%` } : { width: `${100 - divider()}%` };\n\n  return (\n    <div\n      class={cn(\"smwb-screen-divider__wrapper\", `smwb-${local.orientation}`, local.class)}\n      ref={mergeRefs(local.ref, (el) => (wrapperEl = el))}\n      data-testid=\"screen-divider\"\n    >\n      <div class={cn(\"smwb-screen-divider__first\", `smwb-${local.orientation}`)} style={firstChildStyle()}>\n        {(child()[0] ?? \"\") as JSX.Element}\n      </div>\n      <span\n        class=\"smwb-screen-divider__resizer\"\n        onPointerDown={handleDragStart}\n        draggable={false}\n        role=\"separator\"\n        aria-orientation={local.orientation === \"vertical\" ? \"horizontal\" : \"vertical\"}\n        aria-valuenow={Math.round(divider())}\n        aria-valuemin={0}\n        aria-valuemax={100}\n        aria-label={local.resizerAriaLabel}\n        tabindex={0}\n        onKeyDown={onResizerKeyDown}\n      />\n      <div class={cn(\"smwb-screen-divider__second\", `smwb-${local.orientation}`)} style={secondChildStyle()}>\n        {(child()[1] ?? \"\") as JSX.Element}\n      </div>\n    </div>\n  );\n}\n\nexport default ScreenDivider;\n"],"names":["toPixels","percent","parentSize","getInitialDivider","sizeFirst","sizeSecond","ScreenDivider","props","merged","mergeProps","orientation","keyboardStep","resizerAriaLabel","local","splitProps","wrapperEl","divider","setDivider","createSignal","isDragging","setIsDragging","createEffect","onSizeChange","resolved","resolveChildren","children","child","toArray","dragOver","throttle","event","wrapper","relativeMouseY","clientY","offsetTop","newDivider","clientHeight","clientWidth","relativeMouseX","clientX","offsetLeft","handleDragStart","handleDragEnd","isServer","document","body","addEventListener","style","cursor","onCleanup","removeEventListener","onResizerKeyDown","decreaseKey","increaseKey","key","preventDefault","prev","Math","max","min","firstChildStyle","height","width","secondChildStyle","_el$","_tmpl$","_el$2","firstChild","_el$3","nextSibling","_el$4","_ref$","mergeRefs","ref","el","_$use","_$insert","$$keydown","$$pointerdown","_$setAttribute","_$effect","_p$","_v$","cn","class","_v$2","_v$3","_v$4","_v$5","round","_v$6","_v$7","_v$8","e","_$className","t","a","_$style","o","i","n","s","h","undefined","_$delegateEvents"],"mappings":"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"}