@smwb/ui-react 2.0.0

package/dist/headless/components/inputs/toggle/toggle.js

@@ -0,0 +1,69 @@
+import { jsx as a, jsxs as g } from "react/jsx-runtime";
+import k from "react";
+import b from "clsx";
+import { useId as v } from "../../../hooks/useId.js";
+import { TextFieldWrapper as y } from "../textField/textFieldWrapper.js";
+const F = k.forwardRef(function(e, h) {
+  const {
+    disabled: l,
+    readOnly: r,
+    required: t,
+    checked: o,
+    className: w,
+    id: _,
+    label: c,
+    labelPlacement: m,
+    size: f = "medium",
+    color: u = "primary",
+    helperText: p,
+    error: i,
+    ...x
+  } = e, n = v(_), N = (s) => {
+    var d;
+    if (r) {
+      s.preventDefault();
+      return;
+    }
+    (d = e.onChange) == null || d.call(e, s, s.target.checked, e);
+  };
+  return /* @__PURE__ */ a(y, { helperText: p, disabled: l, error: i, className: "smwb-text-field-checkbox", children: /* @__PURE__ */ g("span", { className: b("smwb-toggle__wrapper", m && `smwb-toggle__wrapper_label-${m}`), children: [
+    c ? /* @__PURE__ */ a("label", { htmlFor: n, className: "smwb-toggle__label", children: c }) : null,
+    /* @__PURE__ */ g(
+      "label",
+      {
+        className: b("smwb-toggle", `smwb-toggle_size-${f}`, `smwb-toggle_color-${u}`, w, {
+          "smwb-disabled": l,
+          "smwb-readonly": r
+        }),
+        children: [
+          /* @__PURE__ */ a(
+            "input",
+            {
+              type: "checkbox",
+              id: n,
+              className: "smwb-toggle__checkbox",
+              "aria-checked": o,
+              "aria-invalid": i || void 0,
+              "aria-required": t || void 0,
+              role: "switch",
+              checked: o,
+              disabled: l,
+              readOnly: r,
+              required: t,
+              ref: h,
+              ...x,
+              onChange: N
+            }
+          ),
+          /* @__PURE__ */ a("span", { className: "smwb-toggle__track" }),
+          /* @__PURE__ */ a("span", { className: "smwb-toggle__thumb" })
+        ]
+      }
+    )
+  ] }) });
+});
+export {
+  F as Toggle,
+  F as default
+};
+//# sourceMappingURL=toggle.js.map

package/dist/headless/components/inputs/toggle/toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.js","sources":["../../../../../src/components/inputs/toggle/toggle.tsx"],"sourcesContent":["import React, { InputHTMLAttributes } from \"react\";\nimport cn from \"clsx\";\nimport { TextFieldWrapper } from \"../textField\";\nimport { useId } from \"../../../hooks/useId\";\nimport type { SelectionControlColor, SelectionControlSize } from \"../checkbox/checkbox\";\n\nexport interface ToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, \"onChange\" | \"size\"> {\n  disabled?: boolean;\n  readOnly?: boolean;\n  required?: boolean;\n  checked?: boolean;\n  className?: string;\n  id?: string;\n  label?: string;\n  labelPlacement?: \"top\" | \"left\" | \"right\";\n  size?: SelectionControlSize;\n  color?: SelectionControlColor;\n  /** Unified handler: `(event, checked, data)`. */\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean, data: ToggleProps) => void;\n  helperText?: React.ReactNode;\n  error?: boolean;\n}\n\nexport const Toggle = React.forwardRef<HTMLInputElement, ToggleProps>(function Toggle(props, ref) {\n  const {\n    disabled,\n    readOnly,\n    required,\n    checked,\n    className,\n    id: idProp,\n    label,\n    labelPlacement,\n    size = \"medium\",\n    color = \"primary\",\n    helperText,\n    error,\n    ...args\n  } = props;\n  const id = useId(idProp);\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (readOnly) {\n      e.preventDefault();\n      return;\n    }\n    props.onChange?.(e, e.target.checked, props);\n  };\n\n  return (\n    <TextFieldWrapper helperText={helperText} disabled={disabled} error={error} className=\"smwb-text-field-checkbox\">\n      <span className={cn(\"smwb-toggle__wrapper\", labelPlacement && `smwb-toggle__wrapper_label-${labelPlacement}`)}>\n        {label ? (\n          <label htmlFor={id} className=\"smwb-toggle__label\">\n            {label}\n          </label>\n        ) : null}\n        <label\n          className={cn(\"smwb-toggle\", `smwb-toggle_size-${size}`, `smwb-toggle_color-${color}`, className, {\n            \"smwb-disabled\": disabled,\n            \"smwb-readonly\": readOnly,\n          })}\n        >\n          <input\n            type=\"checkbox\"\n            id={id}\n            className=\"smwb-toggle__checkbox\"\n            aria-checked={checked}\n            aria-invalid={error || undefined}\n            aria-required={required || undefined}\n            role={\"switch\"}\n            checked={checked}\n            disabled={disabled}\n            readOnly={readOnly}\n            required={required}\n            ref={ref}\n            {...args}\n            onChange={handleChange}\n          />\n          <span className=\"smwb-toggle__track\"></span>\n          <span className=\"smwb-toggle__thumb\"></span>\n        </label>\n      </span>\n    </TextFieldWrapper>\n  );\n});\n\nexport default Toggle;\n"],"names":["Toggle","React","props","ref","disabled","readOnly","required","checked","className","idProp","label","labelPlacement","size","color","helperText","error","args","id","useId","handleChange","e","_a","TextFieldWrapper","jsxs","cn","jsx"],"mappings":";;;;;AAuBO,MAAMA,IAASC,EAAM,WAA0C,SAAgBC,GAAOC,GAAK;AAChG,QAAM;AAAA,IACJ,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC;AAAA,IACA,WAAAC;AAAA,IACA,IAAIC;AAAA,IACJ,OAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,OAAAC,IAAQ;AAAA,IACR,YAAAC;AAAA,IACA,OAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDd,GACEe,IAAKC,EAAMT,CAAM,GAEjBU,IAAe,CAACC,MAA2C;;AAC/D,QAAIf,GAAU;AACZ,MAAAe,EAAE,eAAA;AACF;AAAA,IACF;AACA,KAAAC,IAAAnB,EAAM,aAAN,QAAAmB,EAAA,KAAAnB,GAAiBkB,GAAGA,EAAE,OAAO,SAASlB;AAAA,EACxC;AAEA,2BACGoB,GAAA,EAAiB,YAAAR,GAAwB,UAAAV,GAAoB,OAAAW,GAAc,WAAU,4BACpF,UAAA,gBAAAQ,EAAC,QAAA,EAAK,WAAWC,EAAG,wBAAwBb,KAAkB,8BAA8BA,CAAc,EAAE,GACzG,UAAA;AAAA,IAAAD,sBACE,SAAA,EAAM,SAASO,GAAI,WAAU,sBAC3B,aACH,IACE;AAAA,IACJ,gBAAAM;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC,EAAG,eAAe,oBAAoBZ,CAAI,IAAI,qBAAqBC,CAAK,IAAIL,GAAW;AAAA,UAChG,iBAAiBJ;AAAA,UACjB,iBAAiBC;AAAA,QAAA,CAClB;AAAA,QAED,UAAA;AAAA,UAAA,gBAAAoB;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,IAAAR;AAAA,cACA,WAAU;AAAA,cACV,gBAAcV;AAAA,cACd,gBAAcQ,KAAS;AAAA,cACvB,iBAAeT,KAAY;AAAA,cAC3B,MAAM;AAAA,cACN,SAAAC;AAAA,cACA,UAAAH;AAAA,cACA,UAAAC;AAAA,cACA,UAAAC;AAAA,cACA,KAAAH;AAAA,cACC,GAAGa;AAAA,cACJ,UAAUG;AAAA,YAAA;AAAA,UAAA;AAAA,UAEZ,gBAAAM,EAAC,QAAA,EAAK,WAAU,qBAAA,CAAqB;AAAA,UACrC,gBAAAA,EAAC,QAAA,EAAK,WAAU,qBAAA,CAAqB;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACvC,EAAA,CACF,EAAA,CACF;AAEJ,CAAC;"}

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

@@ -0,0 +1,74 @@
+import { jsxs as e, jsx as s } from "react/jsx-runtime";
+import j, { useId as k } from "react";
+import A from "clsx";
+import { Icon as L } from "../../base/icon/icon.js";
+import { useControllableState as R } from "../../../hooks/useControllableState.js";
+const i = (t) => typeof t == "number" ? `${t}px` : t, B = j.forwardRef(function({
+  header: o,
+  sidebar: n,
+  footer: p,
+  sidebarWidth: c = 260,
+  sidebarCollapsed: d,
+  defaultSidebarCollapsed: m = !1,
+  onSidebarCollapsedChange: u,
+  collapsible: b = !1,
+  collapseToggle: l,
+  collapseToggleAriaLabel: y = "Toggle navigation",
+  sidebarCollapsedWidth: _ = 72,
+  stickyHeader: f = !0,
+  className: h,
+  style: w,
+  children: v,
+  ...N
+}, x) {
+  const [a, C] = R({
+    value: d,
+    defaultValue: m,
+    onChange: u
+  }), r = k(), I = {
+    "--smui-app-sidebar-w": i(a ? _ : c)
+  };
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      ref: x,
+      "data-testid": "app-layout",
+      className: A(
+        "smwb-app-layout",
+        { "smwb-app-layout_sticky-header": f, "smwb-app-layout_collapsed": a },
+        h
+      ),
+      style: { ...I, ...w },
+      ...N,
+      children: [
+        o ? /* @__PURE__ */ s("div", { className: "smwb-app-layout__header", children: o }) : null,
+        /* @__PURE__ */ e("div", { className: "smwb-app-layout__body", children: [
+          n ? /* @__PURE__ */ e("aside", { id: r, className: "smwb-app-layout__sidebar", children: [
+            b ? /* @__PURE__ */ s("div", { className: "smwb-app-layout__collapse", children: l != null ? l : /* @__PURE__ */ s(
+              "button",
+              {
+                type: "button",
+                className: "smwb-app-layout__collapse-btn",
+                "aria-label": y,
+                "aria-expanded": !a,
+                "aria-controls": r,
+                onClick: () => C(!a),
+                children: /* @__PURE__ */ s(L, { name: a ? "chevron_right" : "chevron_left", size: 20 })
+              }
+            ) }) : null,
+            n
+          ] }) : null,
+          /* @__PURE__ */ e("div", { className: "smwb-app-layout__content", children: [
+            v,
+            p ? /* @__PURE__ */ s("div", { className: "smwb-app-layout__footer", children: p }) : null
+          ] })
+        ] })
+      ]
+    }
+  );
+});
+export {
+  B as AppLayout,
+  B as default
+};
+//# 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 React, { CSSProperties, HTMLAttributes, PropsWithChildren, ReactNode, useId } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\nimport { useControllableState } from \"../../../hooks/useControllableState\";\n\nexport interface AppLayoutProps extends HTMLAttributes<HTMLDivElement> {\n  /** Top bar slot (e.g. <AppBar />). Spans full width. */\n  header?: ReactNode;\n  /** Side navigation slot (e.g. <Sidebar />). */\n  sidebar?: ReactNode;\n  /** Footer slot, below the content. */\n  footer?: ReactNode;\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?: ReactNode;\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  className?: string;\n}\n\nconst len = (v: number | string) => (typeof v === \"number\" ? `${v}px` : v);\n\nexport const AppLayout = React.forwardRef<HTMLDivElement, PropsWithChildren<AppLayoutProps>>(function AppLayout(\n  {\n    header,\n    sidebar,\n    footer,\n    sidebarWidth = 260,\n    sidebarCollapsed,\n    defaultSidebarCollapsed = false,\n    onSidebarCollapsedChange,\n    collapsible = false,\n    collapseToggle,\n    collapseToggleAriaLabel = \"Toggle navigation\",\n    sidebarCollapsedWidth = 72,\n    stickyHeader = true,\n    className,\n    style,\n    children,\n    ...rest\n  },\n  ref\n) {\n  const [collapsed, setCollapsed] = useControllableState<boolean>({\n    value: sidebarCollapsed,\n    defaultValue: defaultSidebarCollapsed,\n    onChange: onSidebarCollapsedChange,\n  });\n\n  const sidebarId = useId();\n\n  const cssVars = {\n    \"--smui-app-sidebar-w\": collapsed ? len(sidebarCollapsedWidth) : len(sidebarWidth),\n  } as CSSProperties;\n\n  return (\n    <div\n      ref={ref}\n      data-testid=\"app-layout\"\n      className={cn(\n        \"smwb-app-layout\",\n        { \"smwb-app-layout_sticky-header\": stickyHeader, \"smwb-app-layout_collapsed\": collapsed },\n        className\n      )}\n      style={{ ...cssVars, ...style }}\n      {...rest}\n    >\n      {header ? <div className=\"smwb-app-layout__header\">{header}</div> : null}\n      <div className=\"smwb-app-layout__body\">\n        {sidebar ? (\n          <aside id={sidebarId} className=\"smwb-app-layout__sidebar\">\n            {collapsible ? (\n              <div className=\"smwb-app-layout__collapse\">\n                {collapseToggle ?? (\n                  <button\n                    type=\"button\"\n                    className=\"smwb-app-layout__collapse-btn\"\n                    aria-label={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              </div>\n            ) : null}\n            {sidebar}\n          </aside>\n        ) : null}\n        <div className=\"smwb-app-layout__content\">\n          {children}\n          {footer ? <div className=\"smwb-app-layout__footer\">{footer}</div> : null}\n        </div>\n      </div>\n    </div>\n  );\n});\n\nexport default AppLayout;\n"],"names":["len","v","AppLayout","React","header","sidebar","footer","sidebarWidth","sidebarCollapsed","defaultSidebarCollapsed","onSidebarCollapsedChange","collapsible","collapseToggle","collapseToggleAriaLabel","sidebarCollapsedWidth","stickyHeader","className","style","children","rest","ref","collapsed","setCollapsed","useControllableState","sidebarId","useId","cssVars","jsxs","cn","jsx","Icon"],"mappings":";;;;;AAiCA,MAAMA,IAAM,CAACC,MAAwB,OAAOA,KAAM,WAAW,GAAGA,CAAC,OAAOA,GAE3DC,IAAYC,EAAM,WAA8D,SAC3F;AAAA,EACE,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,kBAAAC;AAAA,EACA,yBAAAC,IAA0B;AAAA,EAC1B,0BAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,gBAAAC;AAAA,EACA,yBAAAC,IAA0B;AAAA,EAC1B,uBAAAC,IAAwB;AAAA,EACxB,cAAAC,IAAe;AAAA,EACf,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAA8B;AAAA,IAC9D,OAAOf;AAAA,IACP,cAAcC;AAAA,IACd,UAAUC;AAAA,EAAA,CACX,GAEKc,IAAYC,EAAA,GAEZC,IAAU;AAAA,IACd,wBAAoC1B,EAAZqB,IAAgBP,IAA6BP,CAAR;AAAA,EAAoB;AAGnF,SACE,gBAAAoB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAP;AAAA,MACA,eAAY;AAAA,MACZ,WAAWQ;AAAA,QACT;AAAA,QACA,EAAE,iCAAiCb,GAAc,6BAA6BM,EAAA;AAAA,QAC9EL;AAAA,MAAA;AAAA,MAEF,OAAO,EAAE,GAAGU,GAAS,GAAGT,EAAA;AAAA,MACvB,GAAGE;AAAA,MAEH,UAAA;AAAA,QAAAf,IAAS,gBAAAyB,EAAC,OAAA,EAAI,WAAU,2BAA2B,aAAO,IAAS;AAAA,QACpE,gBAAAF,EAAC,OAAA,EAAI,WAAU,yBACZ,UAAA;AAAA,UAAAtB,IACC,gBAAAsB,EAAC,SAAA,EAAM,IAAIH,GAAW,WAAU,4BAC7B,UAAA;AAAA,YAAAb,IACC,gBAAAkB,EAAC,OAAA,EAAI,WAAU,6BACZ,UAAAjB,KAAA,OAAAA,IACC,gBAAAiB;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,WAAU;AAAA,gBACV,cAAYhB;AAAA,gBACZ,iBAAe,CAACQ;AAAA,gBAChB,iBAAeG;AAAA,gBACf,SAAS,MAAMF,EAAa,CAACD,CAAS;AAAA,gBAEtC,4BAACS,GAAA,EAAK,MAAMT,IAAY,kBAAkB,gBAAgB,MAAM,GAAA,CAAI;AAAA,cAAA;AAAA,YAAA,GAG1E,IACE;AAAA,YACHhB;AAAA,UAAA,EAAA,CACH,IACE;AAAA,UACJ,gBAAAsB,EAAC,OAAA,EAAI,WAAU,4BACZ,UAAA;AAAA,YAAAT;AAAA,YACAZ,IAAS,gBAAAuB,EAAC,OAAA,EAAI,WAAU,2BAA2B,aAAO,IAAS;AAAA,UAAA,EAAA,CACtE;AAAA,QAAA,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}

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

@@ -0,0 +1,57 @@
+import { jsx as a } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import C from "clsx";
+const x = {
+  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)"
+}, $ = p(function({
+  className: t,
+  orientation: r = "horizontal",
+  variant: l = "fullWidth",
+  textAlign: m = "center",
+  color: v = "default",
+  thickness: i,
+  flexItem: c,
+  style: n,
+  children: o,
+  ...u
+}, f) {
+  const e = o != null && o !== !1, d = x[v], s = typeof i == "number" ? `${i}px` : i, b = {
+    ...n,
+    ...d ? { borderColor: d } : {},
+    ...s ? r === "vertical" ? { borderLeftWidth: s } : { borderBottomWidth: s } : {}
+  }, w = C(
+    "smwb-divider",
+    `smwb-divider_${r}`,
+    `smwb-divider_${l}`,
+    {
+      "smwb-divider_with-text": e && r === "horizontal",
+      [`smwb-divider_align-${m}`]: e && r === "horizontal",
+      "smwb-divider_flex-item": c
+    },
+    t
+  );
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      ...u,
+      ref: f,
+      "data-testid": "divider",
+      role: "separator",
+      "aria-orientation": r,
+      className: w,
+      style: b,
+      children: e && r === "horizontal" ? /* @__PURE__ */ a("span", { className: "smwb-divider__text", children: o }) : null
+    }
+  );
+});
+export {
+  $ as Divider,
+  $ as default
+};
+//# 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 { CSSProperties, forwardRef, HTMLAttributes, PropsWithChildren } from \"react\";\nimport cn from \"clsx\";\n\nexport type DividerColor = \"default\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface DividerProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\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}\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 const Divider = forwardRef<HTMLDivElement, PropsWithChildren<DividerProps>>(function Divider(\n  {\n    className,\n    orientation = \"horizontal\",\n    variant = \"fullWidth\",\n    textAlign = \"center\",\n    color = \"default\",\n    thickness,\n    flexItem,\n    style,\n    children,\n    ...props\n  },\n  ref\n) {\n  const hasText = children !== undefined && children !== null && children !== false;\n  const c = colorVar[color];\n  const t = typeof thickness === \"number\" ? `${thickness}px` : thickness;\n\n  const dividerStyle: CSSProperties = {\n    ...style,\n    ...(c ? { borderColor: c } : {}),\n    ...(t ? (orientation === \"vertical\" ? { borderLeftWidth: t } : { borderBottomWidth: t }) : {}),\n  };\n\n  const dividerClassName = cn(\n    \"smwb-divider\",\n    `smwb-divider_${orientation}`,\n    `smwb-divider_${variant}`,\n    {\n      \"smwb-divider_with-text\": hasText && orientation === \"horizontal\",\n      [`smwb-divider_align-${textAlign}`]: hasText && orientation === \"horizontal\",\n      \"smwb-divider_flex-item\": flexItem,\n    },\n    className\n  );\n\n  return (\n    <div\n      {...props}\n      ref={ref}\n      data-testid=\"divider\"\n      role=\"separator\"\n      aria-orientation={orientation}\n      className={dividerClassName}\n      style={dividerStyle}\n    >\n      {hasText && orientation === \"horizontal\" ? <span className=\"smwb-divider__text\">{children}</span> : null}\n    </div>\n  );\n});\n\nexport default Divider;\n"],"names":["colorVar","Divider","forwardRef","className","orientation","variant","textAlign","color","thickness","flexItem","style","children","props","ref","hasText","c","t","dividerStyle","dividerClassName","cn","jsx"],"mappings":";;;AAqBA,MAAMA,IAAqD;AAAA,EACzD,SAAS;AAAA,EACT,SAAS;AAAA,EACT,WAAW;AAAA,EACX,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,MAAM;AACR,GAEaC,IAAUC,EAA4D,SACjF;AAAA,EACE,WAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,SAAAC,IAAU;AAAA,EACV,WAAAC,IAAY;AAAA,EACZ,OAAAC,IAAQ;AAAA,EACR,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAoCH,KAAa,QAAQA,MAAa,IACtEI,IAAIf,EAASO,CAAK,GAClBS,IAAI,OAAOR,KAAc,WAAW,GAAGA,CAAS,OAAOA,GAEvDS,IAA8B;AAAA,IAClC,GAAGP;AAAA,IACH,GAAIK,IAAI,EAAE,aAAaA,EAAA,IAAM,CAAA;AAAA,IAC7B,GAAIC,IAAKZ,MAAgB,aAAa,EAAE,iBAAiBY,MAAM,EAAE,mBAAmBA,MAAO,CAAA;AAAA,EAAC,GAGxFE,IAAmBC;AAAA,IACvB;AAAA,IACA,gBAAgBf,CAAW;AAAA,IAC3B,gBAAgBC,CAAO;AAAA,IACvB;AAAA,MACE,0BAA0BS,KAAWV,MAAgB;AAAA,MACrD,CAAC,sBAAsBE,CAAS,EAAE,GAAGQ,KAAWV,MAAgB;AAAA,MAChE,0BAA0BK;AAAA,IAAA;AAAA,IAE5BN;AAAA,EAAA;AAGF,SACE,gBAAAiB;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGR;AAAA,MACJ,KAAAC;AAAA,MACA,eAAY;AAAA,MACZ,MAAK;AAAA,MACL,oBAAkBT;AAAA,MAClB,WAAWc;AAAA,MACX,OAAOD;AAAA,MAEN,UAAAH,KAAWV,MAAgB,eAAe,gBAAAgB,EAAC,UAAK,WAAU,sBAAsB,UAAAT,GAAS,IAAU;AAAA,IAAA;AAAA,EAAA;AAG1G,CAAC;"}

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

@@ -0,0 +1,58 @@
+import { jsx as w } from "react/jsx-runtime";
+import _ from "react";
+import u from "clsx";
+const j = _.forwardRef(function({ className: r, ...s }, o) {
+  return /* @__PURE__ */ w("div", { ref: o, "data-testid": "grid", className: u("smwb-grid", r), ...s });
+}), p = ["wrap", "nowrap", "wrap-reverse"], v = [
+  "flex-start",
+  "center",
+  "flex-end",
+  "space-between",
+  "space-around",
+  "space-evenly"
+], x = ["flex-start", "center", "flex-end", "stretch", "baseline"], R = ["row", "row-reverse", "column", "column-reverse"], k = _.forwardRef(function({ className: r, justifyContent: s, alignItems: o, direction: n, wrap: t, spacing: i, ...c }, m) {
+  const l = s && v.includes(s) && s !== "flex-start", d = o && x.includes(o) && o !== "flex-start", a = n && R.includes(n) && n !== "row", f = t && p.includes(t) && t !== "wrap", g = u("smwb-grid__row", r, {
+    [`smwb-grid__row--spacing-${i}`]: i,
+    [`smwb-grid__row--justifyContent-${s}`]: l,
+    [`smwb-grid__row--alignItems-${o}`]: d,
+    [`smwb-grid__row--direction-${n}`]: a,
+    [`smwb-grid__row--${t}`]: f
+  });
+  return /* @__PURE__ */ w("div", { ref: m, "data-testid": "grid-row", className: g, ...c });
+}), C = (e) => e === void 0 ? {} : typeof e == "boolean" ? { "smwb-grid__column--hidden": e } : Object.keys(e).reduce((r, s) => (r[`smwb-grid__column--hidden-${s}`] = e[s] === !0, r[`smwb-grid__column--visible-${s}`] = e[s] === !1, r), {}), A = _.forwardRef(function({ className: r, xs: s, sm: o, md: n, lg: t, xl: i, xsOffset: c, smOffset: m, mdOffset: l, lgOffset: d, xlOffset: a, hidden: f, ...g }, b) {
+  const $ = u("smwb-grid__column", r, {
+    [`smwb-grid__column--xs-${s}`]: s,
+    [`smwb-grid__column--sm-${o}`]: o,
+    [`smwb-grid__column--md-${n}`]: n,
+    [`smwb-grid__column--lg-${t}`]: t,
+    [`smwb-grid__column--xl-${i}`]: i,
+    [`smwb-grid__column--xs-offset-${c}`]: c,
+    [`smwb-grid__column--sm-offset-${m}`]: m,
+    [`smwb-grid__column--md-offset-${l}`]: l,
+    [`smwb-grid__column--lg-offset-${d}`]: d,
+    [`smwb-grid__column--xl-offset-${a}`]: a,
+    ...C(f)
+  });
+  return /* @__PURE__ */ w("div", { ref: b, className: $, "data-testid": "grid-col", ...g });
+}), D = _.forwardRef(function({ className: r, maxWidth: s = "lg", disableGutters: o = !1, ...n }, t) {
+  const i = u(
+    "smwb-container",
+    {
+      [`smwb-container--${s}`]: s !== !1,
+      "smwb-container--gutterless": o
+    },
+    r
+  );
+  return /* @__PURE__ */ w("div", { ref: t, "data-testid": "grid-container", className: i, ...n });
+});
+export {
+  A as Column,
+  D as Container,
+  j as Grid,
+  k as Row,
+  x as alignItemsOptions,
+  R as directionOptions,
+  v as justifyContentOptions,
+  p 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 React from \"react\";\nimport cn from \"clsx\";\n\nexport const Grid = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(function Grid(\n  { className, ...rest },\n  ref\n) {\n  return <div ref={ref} data-testid=\"grid\" className={cn(\"smwb-grid\", className)} {...rest} />;\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 React.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}\n\nexport const Row = React.forwardRef<HTMLDivElement, RowProps>(function Row(\n  { className, justifyContent, alignItems, direction, wrap, spacing, ...rest },\n  ref\n) {\n  const isJustifyContent =\n    justifyContent && justifyContentOptions.includes(justifyContent) && justifyContent !== \"flex-start\";\n  const isAlignItems = alignItems && alignItemsOptions.includes(alignItems) && alignItems !== \"flex-start\";\n  const isDirection = direction && directionOptions.includes(direction) && direction !== \"row\";\n  const isFlexWrap = wrap && wrapOptions.includes(wrap) && wrap !== \"wrap\";\n\n  const classes = cn(\"smwb-grid__row\", className, {\n    [`smwb-grid__row--spacing-${spacing}`]: spacing,\n    [`smwb-grid__row--justifyContent-${justifyContent}`]: isJustifyContent,\n    [`smwb-grid__row--alignItems-${alignItems}`]: isAlignItems,\n    [`smwb-grid__row--direction-${direction}`]: isDirection,\n    [`smwb-grid__row--${wrap}`]: isFlexWrap,\n  });\n\n  return <div ref={ref} data-testid=\"grid-row\" className={classes} {...rest} />;\n});\n\nexport type ColumnProps = React.HTMLAttributes<HTMLDivElement> & {\n  /** Ширина на точке остановы: 1–12 из 12, `\"auto\"` (по контенту) или `true` (заполнить). */\n  xs?: BreakpointType;\n  sm?: BreakpointType;\n  md?: BreakpointType;\n  lg?: BreakpointType;\n  xl?: BreakpointType;\n  /** Сдвиг (пустые ведущие колонки) на точке остановы, 0–11. */\n  xsOffset?: OffsetType;\n  smOffset?: OffsetType;\n  mdOffset?: OffsetType;\n  lgOffset?: OffsetType;\n  xlOffset?: OffsetType;\n  /** Скрыть колонку: булево (всегда) или по точкам остановы `{ xs:true, md:false }`. */\n  hidden?: ResponsiveBool;\n};\n\nconst hiddenClasses = (hidden?: ResponsiveBool) => {\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 const Column = React.forwardRef<HTMLDivElement, ColumnProps>(function Column(\n  { className, xs, sm, md, lg, xl, xsOffset, smOffset, mdOffset, lgOffset, xlOffset, hidden, ...rest },\n  ref\n) {\n  const classes = cn(\"smwb-grid__column\", className, {\n    [`smwb-grid__column--xs-${xs}`]: xs,\n    [`smwb-grid__column--sm-${sm}`]: sm,\n    [`smwb-grid__column--md-${md}`]: md,\n    [`smwb-grid__column--lg-${lg}`]: lg,\n    [`smwb-grid__column--xl-${xl}`]: xl,\n    [`smwb-grid__column--xs-offset-${xsOffset}`]: xsOffset,\n    [`smwb-grid__column--sm-offset-${smOffset}`]: smOffset,\n    [`smwb-grid__column--md-offset-${mdOffset}`]: mdOffset,\n    [`smwb-grid__column--lg-offset-${lgOffset}`]: lgOffset,\n    [`smwb-grid__column--xl-offset-${xlOffset}`]: xlOffset,\n    ...hiddenClasses(hidden),\n  });\n\n  return <div ref={ref} className={classes} data-testid=\"grid-col\" {...rest} />;\n});\n\nexport type ContainerMaxWidth = \"sm\" | \"md\" | \"lg\" | \"xl\" | false;\nexport interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Max-width breakpoint cap; `false` = fluid full width. */\n  maxWidth?: ContainerMaxWidth;\n  /** Remove horizontal gutters. */\n  disableGutters?: boolean;\n}\n\nexport const Container = React.forwardRef<HTMLDivElement, ContainerProps>(function Container(\n  { className, maxWidth = \"lg\", disableGutters = false, ...rest },\n  ref\n) {\n  const classes = cn(\n    \"smwb-container\",\n    {\n      [`smwb-container--${maxWidth}`]: maxWidth !== false,\n      \"smwb-container--gutterless\": disableGutters,\n    },\n    className\n  );\n  return <div ref={ref} data-testid=\"grid-container\" className={classes} {...rest} />;\n});\n"],"names":["Grid","React","className","rest","ref","jsx","cn","wrapOptions","justifyContentOptions","alignItemsOptions","directionOptions","Row","justifyContent","alignItems","direction","wrap","spacing","isJustifyContent","isAlignItems","isDirection","isFlexWrap","classes","hiddenClasses","hidden","acc","bp","Column","xs","sm","md","lg","xl","xsOffset","smOffset","mdOffset","lgOffset","xlOffset","Container","maxWidth","disableGutters"],"mappings":";;;AAGO,MAAMA,IAAOC,EAAM,WAAiE,SACzF,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAChBC,GACA;AACA,SAAO,gBAAAC,EAAC,OAAA,EAAI,KAAAD,GAAU,eAAY,QAAO,WAAWE,EAAG,aAAaJ,CAAS,GAAI,GAAGC,EAAA,CAAM;AAC5F,CAAC,GAUYI,IAAc,CAAC,QAAQ,UAAU,cAAc,GAC/CC,IAAwB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GACaC,IAAoB,CAAC,cAAc,UAAU,YAAY,WAAW,UAAU,GAC9EC,IAAmB,CAAC,OAAO,eAAe,UAAU,gBAAgB,GAUpEC,IAAMV,EAAM,WAAqC,SAC5D,EAAE,WAAAC,GAAW,gBAAAU,GAAgB,YAAAC,GAAY,WAAAC,GAAW,MAAAC,GAAM,SAAAC,GAAS,GAAGb,EAAA,GACtEC,GACA;AACA,QAAMa,IACJL,KAAkBJ,EAAsB,SAASI,CAAc,KAAKA,MAAmB,cACnFM,IAAeL,KAAcJ,EAAkB,SAASI,CAAU,KAAKA,MAAe,cACtFM,IAAcL,KAAaJ,EAAiB,SAASI,CAAS,KAAKA,MAAc,OACjFM,IAAaL,KAAQR,EAAY,SAASQ,CAAI,KAAKA,MAAS,QAE5DM,IAAUf,EAAG,kBAAkBJ,GAAW;AAAA,IAC9C,CAAC,2BAA2Bc,CAAO,EAAE,GAAGA;AAAA,IACxC,CAAC,kCAAkCJ,CAAc,EAAE,GAAGK;AAAA,IACtD,CAAC,8BAA8BJ,CAAU,EAAE,GAAGK;AAAA,IAC9C,CAAC,6BAA6BJ,CAAS,EAAE,GAAGK;AAAA,IAC5C,CAAC,mBAAmBJ,CAAI,EAAE,GAAGK;AAAA,EAAA,CAC9B;AAED,SAAO,gBAAAf,EAAC,SAAI,KAAAD,GAAU,eAAY,YAAW,WAAWiB,GAAU,GAAGlB,GAAM;AAC7E,CAAC,GAmBKmB,IAAgB,CAACC,MACjBA,MAAW,SACN,CAAA,IAEL,OAAOA,KAAW,YACb,EAAE,6BAA6BA,EAAA,IAEhC,OAAO,KAAKA,CAAM,EAAmB,OAAgC,CAACC,GAAKC,OACjFD,EAAI,6BAA6BC,CAAE,EAAE,IAAIF,EAAOE,CAAE,MAAM,IACxDD,EAAI,8BAA8BC,CAAE,EAAE,IAAIF,EAAOE,CAAE,MAAM,IAClDD,IACN,CAAA,CAAE,GAGME,IAASzB,EAAM,WAAwC,SAClE,EAAE,WAAAC,GAAW,IAAAyB,GAAI,IAAAC,GAAI,IAAAC,GAAI,IAAAC,GAAI,IAAAC,GAAI,UAAAC,GAAU,UAAAC,GAAU,UAAAC,GAAU,UAAAC,GAAU,UAAAC,GAAU,QAAAb,GAAQ,GAAGpB,EAAA,GAC9FC,GACA;AACA,QAAMiB,IAAUf,EAAG,qBAAqBJ,GAAW;AAAA,IACjD,CAAC,yBAAyByB,CAAE,EAAE,GAAGA;AAAA,IACjC,CAAC,yBAAyBC,CAAE,EAAE,GAAGA;AAAA,IACjC,CAAC,yBAAyBC,CAAE,EAAE,GAAGA;AAAA,IACjC,CAAC,yBAAyBC,CAAE,EAAE,GAAGA;AAAA,IACjC,CAAC,yBAAyBC,CAAE,EAAE,GAAGA;AAAA,IACjC,CAAC,gCAAgCC,CAAQ,EAAE,GAAGA;AAAA,IAC9C,CAAC,gCAAgCC,CAAQ,EAAE,GAAGA;AAAA,IAC9C,CAAC,gCAAgCC,CAAQ,EAAE,GAAGA;AAAA,IAC9C,CAAC,gCAAgCC,CAAQ,EAAE,GAAGA;AAAA,IAC9C,CAAC,gCAAgCC,CAAQ,EAAE,GAAGA;AAAA,IAC9C,GAAGd,EAAcC,CAAM;AAAA,EAAA,CACxB;AAED,SAAO,gBAAAlB,EAAC,SAAI,KAAAD,GAAU,WAAWiB,GAAS,eAAY,YAAY,GAAGlB,GAAM;AAC7E,CAAC,GAUYkC,IAAYpC,EAAM,WAA2C,SACxE,EAAE,WAAAC,GAAW,UAAAoC,IAAW,MAAM,gBAAAC,IAAiB,IAAO,GAAGpC,EAAA,GACzDC,GACA;AACA,QAAMiB,IAAUf;AAAA,IACd;AAAA,IACA;AAAA,MACE,CAAC,mBAAmBgC,CAAQ,EAAE,GAAGA,MAAa;AAAA,MAC9C,8BAA8BC;AAAA,IAAA;AAAA,IAEhCrC;AAAA,EAAA;AAEF,SAAO,gBAAAG,EAAC,SAAI,KAAAD,GAAU,eAAY,kBAAiB,WAAWiB,GAAU,GAAGlB,GAAM;AACnF,CAAC;"}

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

@@ -0,0 +1,21 @@
+import { jsx as e } from "react/jsx-runtime";
+import l from "react";
+import d from "clsx";
+const u = l.forwardRef(function({ maxWidth: s = "lg", disableGutters: r = !1, component: a, className: t, children: g, ...m }, i) {
+  const f = a != null ? a : "main";
+  return /* @__PURE__ */ e(
+    f,
+    {
+      ref: i,
+      "data-testid": "page",
+      className: d("smwb-page", `smwb-page_max-${s}`, { "smwb-page_gutterless": r }, t),
+      ...m,
+      children: /* @__PURE__ */ e("div", { className: "smwb-page__inner", children: g })
+    }
+  );
+});
+export {
+  u as Page,
+  u as default
+};
+//# 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 React, { HTMLAttributes, PropsWithChildren } from \"react\";\nimport cn from \"clsx\";\n\nexport type PageMaxWidth = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\";\n\nexport interface PageProps extends 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?: keyof JSX.IntrinsicElements;\n  className?: string;\n}\n\nexport const Page = React.forwardRef<HTMLElement, PropsWithChildren<PageProps>>(function Page(\n  { maxWidth = \"lg\", disableGutters = false, component, className, children, ...rest },\n  ref\n) {\n  const Tag = (component ?? \"main\") as \"main\";\n  return (\n    <Tag\n      ref={ref}\n      data-testid=\"page\"\n      className={cn(\"smwb-page\", `smwb-page_max-${maxWidth}`, { \"smwb-page_gutterless\": disableGutters }, className)}\n      {...rest}\n    >\n      <div className=\"smwb-page__inner\">{children}</div>\n    </Tag>\n  );\n});\n\nexport default Page;\n"],"names":["Page","React","maxWidth","disableGutters","component","className","children","rest","ref","Tag","jsx","cn"],"mappings":";;;AAeO,MAAMA,IAAOC,EAAM,WAAsD,SAC9E,EAAE,UAAAC,IAAW,MAAM,gBAAAC,IAAiB,IAAO,WAAAC,GAAW,WAAAC,GAAW,UAAAC,GAAU,GAAGC,EAAA,GAC9EC,GACA;AACA,QAAMC,IAAOL,KAAA,OAAAA,IAAa;AAC1B,SACE,gBAAAM;AAAA,IAACD;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,eAAY;AAAA,MACZ,WAAWG,EAAG,aAAa,iBAAiBT,CAAQ,IAAI,EAAE,wBAAwBC,EAAA,GAAkBE,CAAS;AAAA,MAC5G,GAAGE;AAAA,MAEJ,UAAA,gBAAAG,EAAC,OAAA,EAAI,WAAU,oBAAoB,UAAAJ,EAAA,CAAS;AAAA,IAAA;AAAA,EAAA;AAGlD,CAAC;"}

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

@@ -0,0 +1,30 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import t from "react";
+import o from "clsx";
+import { Typography as m } from "../../dataDisplay/typography/typography.js";
+const f = t.forwardRef(function({ title: a, subtitle: d, breadcrumbs: s, actions: l, divider: i = !1, className: c, ...h }, n) {
+  return /* @__PURE__ */ r(
+    "header",
+    {
+      ref: n,
+      "data-testid": "page-header",
+      className: o("smwb-page-header", { "smwb-page-header_divider": i }, c),
+      ...h,
+      children: [
+        s ? /* @__PURE__ */ e("div", { className: "smwb-page-header__breadcrumbs", children: s }) : null,
+        /* @__PURE__ */ r("div", { className: "smwb-page-header__row", children: [
+          /* @__PURE__ */ r("div", { className: "smwb-page-header__titles", children: [
+            typeof a == "string" ? /* @__PURE__ */ e(m, { variant: "h4", component: "h1", className: "smwb-page-header__title", children: a }) : /* @__PURE__ */ e("div", { className: "smwb-page-header__title", children: a }),
+            d ? /* @__PURE__ */ e(m, { variant: "body2", color: "textSecondary", className: "smwb-page-header__subtitle", children: d }) : null
+          ] }),
+          l ? /* @__PURE__ */ e("div", { className: "smwb-page-header__actions", children: l }) : null
+        ] })
+      ]
+    }
+  );
+});
+export {
+  f as PageHeader,
+  f as default
+};
+//# 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 React, { HTMLAttributes, ReactNode } from \"react\";\nimport cn from \"clsx\";\nimport Typography from \"../../dataDisplay/typography/typography\";\n\nexport interface PageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n  title: ReactNode;\n  subtitle?: ReactNode;\n  /** Slot above the title (e.g. <Breadcrumbs />). */\n  breadcrumbs?: ReactNode;\n  /** Slot on the trailing side (e.g. action buttons). */\n  actions?: ReactNode;\n  /** Render a divider below the header. */\n  divider?: boolean;\n  className?: string;\n}\n\nexport const PageHeader = React.forwardRef<HTMLElement, PageHeaderProps>(function PageHeader(\n  { title, subtitle, breadcrumbs, actions, divider = false, className, ...rest },\n  ref\n) {\n  return (\n    <header\n      ref={ref}\n      data-testid=\"page-header\"\n      className={cn(\"smwb-page-header\", { \"smwb-page-header_divider\": divider }, className)}\n      {...rest}\n    >\n      {breadcrumbs ? <div className=\"smwb-page-header__breadcrumbs\">{breadcrumbs}</div> : null}\n      <div className=\"smwb-page-header__row\">\n        <div className=\"smwb-page-header__titles\">\n          {typeof title === \"string\" ? (\n            <Typography variant=\"h4\" component=\"h1\" className=\"smwb-page-header__title\">\n              {title}\n            </Typography>\n          ) : (\n            <div className=\"smwb-page-header__title\">{title}</div>\n          )}\n          {subtitle ? (\n            <Typography variant=\"body2\" color=\"textSecondary\" className=\"smwb-page-header__subtitle\">\n              {subtitle}\n            </Typography>\n          ) : null}\n        </div>\n        {actions ? <div className=\"smwb-page-header__actions\">{actions}</div> : null}\n      </div>\n    </header>\n  );\n});\n\nexport default PageHeader;\n"],"names":["PageHeader","React","title","subtitle","breadcrumbs","actions","divider","className","rest","ref","jsxs","cn","jsx","Typography"],"mappings":";;;;AAgBO,MAAMA,IAAaC,EAAM,WAAyC,SACvE,EAAE,OAAAC,GAAO,UAAAC,GAAU,aAAAC,GAAa,SAAAC,GAAS,SAAAC,IAAU,IAAO,WAAAC,GAAW,GAAGC,EAAA,GACxEC,GACA;AACA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,eAAY;AAAA,MACZ,WAAWE,EAAG,oBAAoB,EAAE,4BAA4BL,EAAA,GAAWC,CAAS;AAAA,MACnF,GAAGC;AAAA,MAEH,UAAA;AAAA,QAAAJ,IAAc,gBAAAQ,EAAC,OAAA,EAAI,WAAU,iCAAiC,aAAY,IAAS;AAAA,QACpF,gBAAAF,EAAC,OAAA,EAAI,WAAU,yBACb,UAAA;AAAA,UAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,4BACZ,UAAA;AAAA,YAAA,OAAOR,KAAU,WAChB,gBAAAU,EAACC,GAAA,EAAW,SAAQ,MAAK,WAAU,MAAK,WAAU,2BAC/C,aACH,IAEA,gBAAAD,EAAC,OAAA,EAAI,WAAU,2BAA2B,UAAAV,GAAM;AAAA,YAEjDC,IACC,gBAAAS,EAACC,GAAA,EAAW,SAAQ,SAAQ,OAAM,iBAAgB,WAAU,8BACzD,UAAAV,EAAA,CACH,IACE;AAAA,UAAA,GACN;AAAA,UACCE,IAAU,gBAAAO,EAAC,OAAA,EAAI,WAAU,6BAA6B,aAAQ,IAAS;AAAA,QAAA,EAAA,CAC1E;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}

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

@@ -0,0 +1,88 @@
+import { jsxs as I, jsx as h } from "react/jsx-runtime";
+import { forwardRef as j, useRef as P, useState as y, useEffect as b, Children as X, useMemo as Y, useCallback as O } from "react";
+import D from "clsx";
+import { throttle as T } from "../../../utils/throttle.js";
+import { useForkRef as U } from "../../../hooks/useForkRef.js";
+const _ = (o, d) => d * (o / 100), x = (o, d) => !o && d ? 100 - d : o || 50, Q = j(function({
+  className: d,
+  orientation: e = "horizontal",
+  sizeFirst: m,
+  sizeSecond: v,
+  children: $,
+  onSizeChange: a,
+  keyboardStep: g = 5,
+  resizerAriaLabel: k = "Resize panels"
+}, A) {
+  const p = P(null), M = U(A, p), [i, l] = y(x(m, v)), [E, L] = y(null), [f, R] = y(!1);
+  b(() => {
+    l(x(m, v));
+  }, [m, v]);
+  const w = X.toArray($);
+  if (w.length > 2)
+    throw new Error("Allowed not more than 2 children");
+  const K = () => {
+    L(p.current), R(!0);
+  }, c = Y(
+    () => T((r) => {
+      if (!f) return;
+      const n = p.current;
+      if (!(!n || n !== E))
+        if (e === "vertical") {
+          let s = r.clientY - n.offsetTop;
+          s < 0 && (s = 0);
+          const t = s / n.clientHeight * 100;
+          _(t, n.clientWidth) > 5 && t < 101 && l(t - 7);
+        } else {
+          let s = r.clientX - n.offsetLeft;
+          s < 0 && (s = 0);
+          const t = s / n.clientWidth * 100;
+          _(t, n.clientWidth) > 5 && t < 101 && l(t);
+        }
+    }, 1e3 / 60),
+    [f, E, e]
+  ), u = O(() => {
+    L(null), R(!1), document.body.removeEventListener("pointerup", u), document.body.removeEventListener("pointermove", c);
+  }, [c]);
+  b(() => {
+    a == null || a(i);
+  }, [i, a]);
+  const N = (r) => {
+    const n = e === "vertical" ? "ArrowUp" : "ArrowLeft", s = e === "vertical" ? "ArrowDown" : "ArrowRight";
+    r.key === n ? (r.preventDefault(), l((t) => Math.max(0, t - g))) : r.key === s ? (r.preventDefault(), l((t) => Math.min(100, t + g))) : r.key === "Home" ? (r.preventDefault(), l(0)) : r.key === "End" && (r.preventDefault(), l(100));
+  }, W = e === "vertical" ? { height: `${100 - i}%` } : { width: `${100 - i}%` }, H = e === "vertical" ? { height: `${i}%` } : { width: `${i}%` };
+  return b(() => (f ? (document.body.addEventListener("pointerup", u), document.body.addEventListener("pointermove", c), document.body.style.cursor = e === "horizontal" ? "e-resize" : "n-resize") : document.body.style.cursor = "default", () => {
+    document.body.removeEventListener("pointerup", u), document.body.removeEventListener("pointermove", c);
+  }), [c, u, f, e]), /* @__PURE__ */ I(
+    "div",
+    {
+      className: D("smwb-screen-divider__wrapper", `smwb-${e}`, d),
+      ref: M,
+      "data-testid": "screen-divider",
+      children: [
+        /* @__PURE__ */ h("div", { className: D("smwb-screen-divider__first", `smwb-${e}`), style: H, children: w[0] || "" }),
+        /* @__PURE__ */ h(
+          "span",
+          {
+            className: "smwb-screen-divider__resizer",
+            onPointerDown: K,
+            draggable: !1,
+            role: "separator",
+            "aria-orientation": e === "vertical" ? "horizontal" : "vertical",
+            "aria-valuenow": Math.round(i),
+            "aria-valuemin": 0,
+            "aria-valuemax": 100,
+            "aria-label": k,
+            tabIndex: 0,
+            onKeyDown: N
+          }
+        ),
+        /* @__PURE__ */ h("div", { className: D("smwb-screen-divider__second", `smwb-${e}`), style: W, children: w[1] || "" })
+      ]
+    }
+  );
+});
+export {
+  Q as ScreenDivider,
+  Q as default
+};
+//# 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 React, {\n  Children,\n  forwardRef,\n  KeyboardEvent,\n  PropsWithChildren,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport cn from \"clsx\";\nimport { throttle } from \"../../../utils/throttle\";\nimport { useForkRef } from \"../../../hooks/useForkRef\";\n\nexport interface ScreenDividerProps {\n  sizeFirst?: number;\n  sizeSecond?: number;\n  className?: 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}\n\nconst toPixels = (percent: number, parentSize: number) => {\n  return parentSize * (percent / 100);\n};\n\nconst getInitialDivider = (sizeFirst?: number | null, sizeSecond?: number | null) => {\n  if (!sizeFirst && sizeSecond) {\n    return 100 - sizeSecond;\n  }\n  if (sizeFirst) {\n    return sizeFirst;\n  }\n  return 50;\n};\n\nexport const ScreenDivider = forwardRef<HTMLDivElement, PropsWithChildren<ScreenDividerProps>>(function ScreenDivider(\n  {\n    className,\n    orientation = \"horizontal\",\n    sizeFirst,\n    sizeSecond,\n    children,\n    onSizeChange,\n    keyboardStep = 5,\n    resizerAriaLabel = \"Resize panels\",\n  },\n  ref\n) {\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const forkedWrapperRef = useForkRef<HTMLDivElement>(ref, wrapperRef);\n  const [divider, setDivider] = useState<number>(getInitialDivider(sizeFirst, sizeSecond));\n  const [currentElement, setCurrentElement] = useState<HTMLDivElement | null>(null);\n  const [isDragging, setIsDragging] = useState(false);\n\n  useEffect(() => {\n    setDivider(getInitialDivider(sizeFirst, sizeSecond));\n  }, [sizeFirst, sizeSecond]);\n\n  const child = Children.toArray(children);\n  if (child.length > 2) {\n    throw new Error(\"Allowed not more than 2 children\");\n  }\n\n  const handleDragStart = () => {\n    setCurrentElement(wrapperRef.current);\n    setIsDragging(true);\n  };\n\n  const dragOverHandler = useMemo(\n    () =>\n      throttle((e: PointerEvent) => {\n        if (!isDragging) return;\n\n        const wrapper = wrapperRef.current;\n        if (!wrapper || wrapper !== currentElement) return;\n        if (orientation === \"vertical\") {\n          let relativeMouseY = e.clientY - wrapper.offsetTop;\n          if (relativeMouseY < 0) {\n            relativeMouseY = 0;\n          }\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 = e.clientX - wrapper.offsetLeft;\n          if (relativeMouseX < 0) {\n            relativeMouseX = 0;\n          }\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    [isDragging, currentElement, orientation]\n  );\n\n  const handleDragEnd = useCallback(() => {\n    setCurrentElement(null);\n    setIsDragging(false);\n    document.body.removeEventListener(\"pointerup\", handleDragEnd);\n    document.body.removeEventListener(\"pointermove\", dragOverHandler);\n  }, [dragOverHandler]);\n\n  useEffect(() => {\n    onSizeChange?.(divider);\n  }, [divider, onSizeChange]);\n\n  const onResizerKeyDown = (event: KeyboardEvent<HTMLSpanElement>) => {\n    const decreaseKey = orientation === \"vertical\" ? \"ArrowUp\" : \"ArrowLeft\";\n    const increaseKey = orientation === \"vertical\" ? \"ArrowDown\" : \"ArrowRight\";\n\n    if (event.key === decreaseKey) {\n      event.preventDefault();\n      setDivider((prev) => Math.max(0, prev - keyboardStep));\n    } else if (event.key === increaseKey) {\n      event.preventDefault();\n      setDivider((prev) => Math.min(100, prev + 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 secondChildStyle =\n    orientation === \"vertical\" ? { height: `${100 - divider}%` } : { width: `${100 - divider}%` };\n\n  const firstChildStyle = orientation === \"vertical\" ? { height: `${divider}%` } : { width: `${divider}%` };\n\n  useEffect(() => {\n    if (isDragging) {\n      document.body.addEventListener(\"pointerup\", handleDragEnd);\n      document.body.addEventListener(\"pointermove\", dragOverHandler);\n      document.body.style.cursor = orientation === \"horizontal\" ? \"e-resize\" : \"n-resize\";\n    } else {\n      document.body.style.cursor = \"default\";\n    }\n\n    return () => {\n      document.body.removeEventListener(\"pointerup\", handleDragEnd);\n      document.body.removeEventListener(\"pointermove\", dragOverHandler);\n    };\n  }, [dragOverHandler, handleDragEnd, isDragging, orientation]);\n\n  return (\n    <div\n      className={cn(\"smwb-screen-divider__wrapper\", `smwb-${orientation}`, className)}\n      ref={forkedWrapperRef}\n      data-testid=\"screen-divider\"\n    >\n      <div className={cn(\"smwb-screen-divider__first\", `smwb-${orientation}`)} style={firstChildStyle}>\n        {child[0] || \"\"}\n      </div>\n      <span\n        className=\"smwb-screen-divider__resizer\"\n        onPointerDown={handleDragStart}\n        draggable={false}\n        role=\"separator\"\n        aria-orientation={orientation === \"vertical\" ? \"horizontal\" : \"vertical\"}\n        aria-valuenow={Math.round(divider)}\n        aria-valuemin={0}\n        aria-valuemax={100}\n        aria-label={resizerAriaLabel}\n        tabIndex={0}\n        onKeyDown={onResizerKeyDown}\n      />\n      <div className={cn(\"smwb-screen-divider__second\", `smwb-${orientation}`)} style={secondChildStyle}>\n        {child[1] || \"\"}\n      </div>\n    </div>\n  );\n});\n\nexport default ScreenDivider;\n"],"names":["toPixels","percent","parentSize","getInitialDivider","sizeFirst","sizeSecond","ScreenDivider","forwardRef","className","orientation","children","onSizeChange","keyboardStep","resizerAriaLabel","ref","wrapperRef","useRef","forkedWrapperRef","useForkRef","divider","setDivider","useState","currentElement","setCurrentElement","isDragging","setIsDragging","useEffect","child","Children","handleDragStart","dragOverHandler","useMemo","throttle","e","wrapper","relativeMouseY","newDivider","relativeMouseX","handleDragEnd","useCallback","onResizerKeyDown","event","decreaseKey","increaseKey","prev","secondChildStyle","firstChildStyle","jsxs","cn","jsx"],"mappings":"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"}