@smwb/ui-solid 0.1.0

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

@@ -0,0 +1,103 @@
+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 '../../../assets/styles/less/components/appLayout/appLayout.entry.css';/* empty css                                                             */
+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 = (i) => typeof i == "number" ? `${i}px` : i;
+function U(i) {
+  const v = L({
+    sidebarWidth: 260,
+    defaultSidebarCollapsed: !1,
+    collapsible: !1,
+    collapseToggleAriaLabel: "Toggle navigation",
+    sidebarCollapsedWidth: 72,
+    stickyHeader: !0
+  }, i), [e, C] = P(v, ["header", "sidebar", "footer", "sidebarWidth", "sidebarCollapsed", "defaultSidebarCollapsed", "onSidebarCollapsedChange", "collapsible", "collapseToggle", "collapseToggleAriaLabel", "sidebarCollapsedWidth", "stickyHeader", "class", "style", "children", "ref"]), [d, w] = H({
+    value: () => e.sidebarCollapsed,
+    defaultValue: e.defaultSidebarCollapsed,
+    onChange: (t) => e.onSidebarCollapsedChange?.(t)
+  }), m = I(), $ = () => ({
+    "--smui-app-sidebar-w": d() ? 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": d()
+        }, 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(!d()), c(r, "aria-controls", m), a(r, s(z, {
+                    get name() {
+                      return d() ? "chevron_right" : "chevron_left";
+                    },
+                    size: 20
+                  })), W((p) => {
+                    var h = e.collapseToggleAriaLabel, _ = !d();
+                    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 {
+  U as AppLayout
+};
+//# sourceMappingURL=appLayout.js.map

package/dist/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/components/layout/appLayout/index.d.ts

@@ -0,0 +1,2 @@
+export { AppLayout, default } from "./appLayout";
+export type { AppLayoutProps } from "./appLayout";

package/dist/components/layout/divider/divider.d.ts

@@ -0,0 +1,20 @@
+import { type JSX, type ParentProps } from "solid-js";
+import { type Ref } from "../../../primitives/mergeRefs";
+export type DividerColor = "default" | "primary" | "secondary" | "error" | "success" | "warning" | "info";
+export interface DividerProps extends JSX.HTMLAttributes<HTMLDivElement> {
+    /** Direction of the divider line. */
+    orientation?: "horizontal" | "vertical";
+    /** Inset behaviour of the line relative to its container. */
+    variant?: "fullWidth" | "inset" | "middle";
+    /** Horizontal alignment of the optional text content. */
+    textAlign?: "left" | "center" | "right";
+    /** Line color (semantic token). */
+    color?: DividerColor;
+    /** Line thickness (number = px, or any CSS length). */
+    thickness?: number | string;
+    /** Stretch to fill a flex container along the cross axis. */
+    flexItem?: boolean;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function Divider(props: ParentProps<DividerProps>): JSX.Element;
+export default Divider;

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

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

package/dist/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":";;;;;;AAuBA,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/components/layout/divider/index.d.ts

@@ -0,0 +1,2 @@
+export { Divider, default } from "./divider";
+export type { DividerProps, DividerColor } from "./divider";

package/dist/components/layout/grid/grid.d.ts

@@ -0,0 +1,52 @@
+import { type JSX } from "solid-js";
+import { type Ref } from "../../../primitives/mergeRefs";
+type DivProps = JSX.HTMLAttributes<HTMLDivElement> & {
+    ref?: Ref<HTMLDivElement>;
+};
+export declare function Grid(props: DivProps): JSX.Element;
+export type ColumnSpan = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+/** Column width per breakpoint: 1–12 grid units, `"auto"` (fit content) or `true` (fill remaining). */
+export type BreakpointType = ColumnSpan | "auto" | true;
+/** Column offset (empty leading columns) per breakpoint: 0–11. */
+export type OffsetType = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11;
+export type Breakpoint = "xs" | "sm" | "md" | "lg" | "xl";
+export type ResponsiveBool = boolean | Partial<Record<Breakpoint, boolean>>;
+export declare const wrapOptions: readonly ["wrap", "nowrap", "wrap-reverse"];
+export declare const justifyContentOptions: readonly ["flex-start", "center", "flex-end", "space-between", "space-around", "space-evenly"];
+export declare const alignItemsOptions: readonly ["flex-start", "center", "flex-end", "stretch", "baseline"];
+export declare const directionOptions: readonly ["row", "row-reverse", "column", "column-reverse"];
+export interface RowProps extends JSX.HTMLAttributes<HTMLDivElement> {
+    wrap?: (typeof wrapOptions)[number];
+    justifyContent?: (typeof justifyContentOptions)[number];
+    alignItems?: (typeof alignItemsOptions)[number];
+    direction?: (typeof directionOptions)[number];
+    spacing?: number;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function Row(props: RowProps): JSX.Element;
+export interface ColumnProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "hidden"> {
+    xs?: BreakpointType;
+    sm?: BreakpointType;
+    md?: BreakpointType;
+    lg?: BreakpointType;
+    xl?: BreakpointType;
+    xsOffset?: OffsetType;
+    smOffset?: OffsetType;
+    mdOffset?: OffsetType;
+    lgOffset?: OffsetType;
+    xlOffset?: OffsetType;
+    /** Hide column: boolean (always) or per breakpoint `{ xs:true, md:false }`. */
+    hidden?: ResponsiveBool;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function Column(props: ColumnProps): JSX.Element;
+export type ContainerMaxWidth = "sm" | "md" | "lg" | "xl" | false;
+export interface ContainerProps extends JSX.HTMLAttributes<HTMLDivElement> {
+    /** Max-width breakpoint cap; `false` = fluid full width. */
+    maxWidth?: ContainerMaxWidth;
+    /** Remove horizontal gutters. */
+    disableGutters?: boolean;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function Container(props: ContainerProps): JSX.Element;
+export {};

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

@@ -0,0 +1,93 @@
+import { use as f, spread as a, mergeProps as c, template as _ } from "solid-js/web";
+import '../../../assets/styles/less/components/grid/grid.entry.css';/* empty css                                                   */
+import { splitProps as m } from "solid-js";
+import d from "clsx";
+import { mergeRefs as u } from "../../../primitives/mergeRefs.js";
+var g = /* @__PURE__ */ _("<div>");
+function I(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 h(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 W(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 G(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 {
+  W as Column,
+  G as Container,
+  I as Grid,
+  h as Row,
+  b as alignItemsOptions,
+  x as directionOptions,
+  p as justifyContentOptions,
+  w as wrapOptions
+};
+//# sourceMappingURL=grid.js.map

package/dist/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":";;;;;;AAOO,SAASA,EAAKC,GAA8B;AACjD,QAAM,CAACC,GAAOC,CAAI,IAAIC,EAAWH,GAAO,CAAC,SAAS,KAAK,CAAC;AACxD,UAAA,MAAA;AAAA,QAAAI,IAAAC,EAAAA,GAAAC,IAA2BC,EAAUN,EAAMO,GAAG;AAAC,kBAAAF,KAAA,cAAAG,EAAAH,GAAAF,CAAA,GAAAM,EAAAN,GAAAO,EAA/BT,GAAI;AAAA,MAAA,eAAyC;AAAA,MAAM,IAAA,QAAA;AAAA,eAAQU,EAAG,aAAaX,EAAMY,KAAK;AAAA,MAAC;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAT;AAAAA,EAAA,GAAA;AACzG;AAUO,MAAMU,IAAc,CAAC,QAAQ,UAAU,cAAc,GAC/CC,IAAwB,CACnC,cACA,UACA,YACA,iBACA,gBACA,cAAc,GAEHC,IAAoB,CAAC,cAAc,UAAU,YAAY,WAAW,UAAU,GAC9EC,IAAmB,CAAC,OAAO,eAAe,UAAU,gBAAgB;AAW1E,SAASC,EAAIlB,GAA8B;AAChD,QAAM,CAACC,GAAOC,CAAI,IAAIC,EAAWH,GAAO,CACtC,SACA,kBACA,cACA,aACA,QACA,WACA,KAAK,CACN,GAEKmB,IAAUA,MAAc;AAC5B,UAAMC,IACJnB,EAAMoB,kBAAkBN,EAAsBO,SAASrB,EAAMoB,cAAc,KAAKpB,EAAMoB,mBAAmB,cACrGE,IAAetB,EAAMuB,cAAcR,EAAkBM,SAASrB,EAAMuB,UAAU,KAAKvB,EAAMuB,eAAe,cACxGC,IAAcxB,EAAMyB,aAAaT,EAAiBK,SAASrB,EAAMyB,SAAS,KAAKzB,EAAMyB,cAAc,OACnGC,IAAa1B,EAAM2B,QAAQd,EAAYQ,SAASrB,EAAM2B,IAAI,KAAK3B,EAAM2B,SAAS;AACpF,WAAOhB,EAAG,kBAAkBX,EAAMY,OAAO;AAAA,MACvC,CAAC,2BAA2BZ,EAAM4B,OAAO,EAAE,GAAG5B,EAAM4B;AAAAA,MACpD,CAAC,kCAAkC5B,EAAMoB,cAAc,EAAE,GAAGD;AAAAA,MAC5D,CAAC,8BAA8BnB,EAAMuB,UAAU,EAAE,GAAGD;AAAAA,MACpD,CAAC,6BAA6BtB,EAAMyB,SAAS,EAAE,GAAGD;AAAAA,MAClD,CAAC,mBAAmBxB,EAAM2B,IAAI,EAAE,GAAGD;AAAAA,IAAAA,CACpC;AAAA,EACH;AAEA,UAAA,MAAA;AAAA,QAAAG,IAAAzB,EAAAA,GAAA0B,IAA2BxB,EAAUN,EAAMO,GAAG;AAAC,kBAAAuB,KAAA,cAAAtB,EAAAsB,GAAAD,CAAA,GAAApB,EAAAoB,GAAAnB,EAA/BT,GAAI;AAAA,MAAA,eAAyC;AAAA,MAAU,IAAA,QAAA;AAAA,eAAQiB,EAAAA;AAAAA,MAAS;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAW;AAAAA,EAAA,GAAA;AAC1F;AAkBA,MAAME,IAAgBA,CAACC,MACjBA,MAAWC,SACN,CAAA,IAEL,OAAOD,KAAW,YACb;AAAA,EAAE,6BAA6BA;AAAAA,IAEhCE,OAAOC,KAAKH,CAAM,EAAmBI,OAAgC,CAACC,GAAKC,OACjFD,EAAI,6BAA6BC,CAAE,EAAE,IAAIN,EAAOM,CAAE,MAAM,IACxDD,EAAI,8BAA8BC,CAAE,EAAE,IAAIN,EAAOM,CAAE,MAAM,IAClDD,IACN,CAAA,CAAE;AAGA,SAASE,EAAOxC,GAAiC;AACtD,QAAM,CAACC,GAAOC,CAAI,IAAIC,EAAWH,GAAO,CACtC,SACA,MACA,MACA,MACA,MACA,MACA,YACA,YACA,YACA,YACA,YACA,UACA,KAAK,CACN,GAEKmB,IAAUA,MACdP,EAAG,qBAAqBX,EAAMY,OAAO;AAAA,IACnC,CAAC,yBAAyBZ,EAAMwC,EAAE,EAAE,GAAGxC,EAAMwC;AAAAA,IAC7C,CAAC,yBAAyBxC,EAAMyC,EAAE,EAAE,GAAGzC,EAAMyC;AAAAA,IAC7C,CAAC,yBAAyBzC,EAAM0C,EAAE,EAAE,GAAG1C,EAAM0C;AAAAA,IAC7C,CAAC,yBAAyB1C,EAAM2C,EAAE,EAAE,GAAG3C,EAAM2C;AAAAA,IAC7C,CAAC,yBAAyB3C,EAAM4C,EAAE,EAAE,GAAG5C,EAAM4C;AAAAA,IAC7C,CAAC,gCAAgC5C,EAAM6C,QAAQ,EAAE,GAAG7C,EAAM6C;AAAAA,IAC1D,CAAC,gCAAgC7C,EAAM8C,QAAQ,EAAE,GAAG9C,EAAM8C;AAAAA,IAC1D,CAAC,gCAAgC9C,EAAM+C,QAAQ,EAAE,GAAG/C,EAAM+C;AAAAA,IAC1D,CAAC,gCAAgC/C,EAAMgD,QAAQ,EAAE,GAAGhD,EAAMgD;AAAAA,IAC1D,CAAC,gCAAgChD,EAAMiD,QAAQ,EAAE,GAAGjD,EAAMiD;AAAAA,IAC1D,GAAGlB,EAAc/B,EAAMgC,MAAM;AAAA,EAAA,CAC9B;AAEH,UAAA,MAAA;AAAA,QAAAkB,IAAA9C,EAAAA,GAAA+C,IAA2B7C,EAAUN,EAAMO,GAAG;AAAC,kBAAA4C,KAAA,cAAA3C,EAAA2C,GAAAD,CAAA,GAAAzC,EAAAyC,GAAAxC,EAA/BT,GAAI;AAAA,MAAA,IAAA,QAAA;AAAA,eAAoCiB,EAAAA;AAAAA,MAAS;AAAA,MAAA,eAAc;AAAA,IAAA,CAAU,GAAA,IAAA,EAAA,GAAAgC;AAAAA,EAAA,GAAA;AAC3F;AAWO,SAASE,EAAUrD,GAAoC;AAC5D,QAAMsD,IAAStD,GACT,CAACC,GAAOC,CAAI,IAAIC,EAAWmD,GAAQ,CAAC,SAAS,YAAY,kBAAkB,KAAK,CAAC,GACjFC,IAAWA,MAAyBtD,EAAMsD,YAAY,MACtDpC,IAAUA,MACdP,EACE,kBACA;AAAA,IACE,CAAC,mBAAmB2C,EAAAA,CAAU,EAAE,GAAGA,QAAe;AAAA,IAClD,8BAA8BtD,EAAMuD;AAAAA,EAAAA,GAEtCvD,EAAMY,KACR;AACF,UAAA,MAAA;AAAA,QAAA4C,IAAApD,EAAAA,GAAAqD,IAA2BnD,EAAUN,EAAMO,GAAG;AAAC,kBAAAkD,KAAA,cAAAjD,EAAAiD,GAAAD,CAAA,GAAA/C,EAAA+C,GAAA9C,EAA/BT,GAAI;AAAA,MAAA,eAAyC;AAAA,MAAgB,IAAA,QAAA;AAAA,eAAQiB,EAAAA;AAAAA,MAAS;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAsC;AAAAA,EAAA,GAAA;AAChG;"}

package/dist/components/layout/grid/index.d.ts

@@ -0,0 +1,2 @@
+export { Grid, Row, Column, Container } from "./grid";
+export type { RowProps, ColumnProps, ContainerProps, BreakpointType, ColumnSpan, OffsetType, Breakpoint, ResponsiveBool, ContainerMaxWidth, } from "./grid";

package/dist/components/layout/page/index.d.ts

@@ -0,0 +1,2 @@
+export { Page, default } from "./page";
+export type { PageProps, PageMaxWidth } from "./page";

package/dist/components/layout/page/page.d.ts

@@ -0,0 +1,14 @@
+import { type JSX, type ParentProps } from "solid-js";
+import { type Ref } from "../../../primitives/mergeRefs";
+export type PageMaxWidth = "sm" | "md" | "lg" | "xl" | "full";
+export interface PageProps extends JSX.HTMLAttributes<HTMLElement> {
+    /** Content max-width cap; `full` = fluid. */
+    maxWidth?: PageMaxWidth;
+    /** Remove the page padding. */
+    disableGutters?: boolean;
+    /** Render as a different element (default `main`). */
+    component?: string;
+    ref?: Ref<HTMLElement>;
+}
+export declare function Page(props: ParentProps<PageProps>): JSX.Element;
+export default Page;

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

@@ -0,0 +1,36 @@
+import { createComponent as o, Dynamic as n, mergeProps as i, insert as p, template as l } from "solid-js/web";
+import '../../../assets/styles/less/components/page/page.entry.css';/* empty css                                                   */
+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 $(s) {
+  const m = c({
+    maxWidth: "lg",
+    disableGutters: !1
+  }, s), [e, a] = g(m, ["maxWidth", "disableGutters", "component", "class", "children", "ref"]);
+  return o(n, i({
+    get component() {
+      return e.component ?? "main";
+    }
+  }, a, {
+    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 {
+  $ as Page
+};
+//# sourceMappingURL=page.js.map

package/dist/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":";;;;;;AAkBO,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/components/layout/pageHeader/index.d.ts

@@ -0,0 +1,2 @@
+export { PageHeader, default } from "./pageHeader";
+export type { PageHeaderProps } from "./pageHeader";

package/dist/components/layout/pageHeader/pageHeader.d.ts

@@ -0,0 +1,15 @@
+import { type JSX } from "solid-js";
+import { type Ref } from "../../../primitives/mergeRefs";
+export interface PageHeaderProps extends Omit<JSX.HTMLAttributes<HTMLElement>, "title"> {
+    title: JSX.Element | string;
+    subtitle?: JSX.Element | string;
+    /** Slot above the title (e.g. <Breadcrumbs />). */
+    breadcrumbs?: JSX.Element;
+    /** Slot on the trailing side (e.g. action buttons). */
+    actions?: JSX.Element;
+    /** Render a divider below the header. */
+    divider?: boolean;
+    ref?: Ref<HTMLElement>;
+}
+export declare function PageHeader(props: PageHeaderProps): JSX.Element;
+export default PageHeader;

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

@@ -0,0 +1,77 @@
+import { use as u, spread as h, mergeProps as _, insert as t, createComponent as a, template as i } from "solid-js/web";
+import '../../../assets/styles/less/components/pageHeader/pageHeader.entry.css';/* empty css                                                               */
+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 m } 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 j(c) {
+  const p = b({
+    divider: !1
+  }, c), [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(m, {
+          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(m, {
+          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 {
+  j as PageHeader
+};
+//# sourceMappingURL=pageHeader.js.map

package/dist/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":";;;;;;;AAkBO,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/components/layout/screenDivider/index.d.ts

@@ -0,0 +1,2 @@
+export { ScreenDivider, default } from "./screenDivider";
+export type { ScreenDividerProps } from "./screenDivider";

package/dist/components/layout/screenDivider/screenDivider.d.ts

@@ -0,0 +1,17 @@
+import { type JSX, type ParentProps } from "solid-js";
+import { type Ref } from "../../../primitives/mergeRefs";
+export interface ScreenDividerProps {
+    sizeFirst?: number;
+    sizeSecond?: number;
+    class?: string;
+    orientation?: "horizontal" | "vertical";
+    /** Called with the first pane size (percent) whenever it changes. */
+    onSizeChange?: (sizeFirst: number) => void;
+    /** Step (in percent) applied on arrow-key resize. */
+    keyboardStep?: number;
+    /** Accessible label for the resizer handle. */
+    resizerAriaLabel?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function ScreenDivider(props: ParentProps<ScreenDividerProps>): JSX.Element;
+export default ScreenDivider;