@smwb/ui-react 2.7.0 → 2.8.0

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

@@ -1,14 +1,14 @@
-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({
+import { jsxs as e, jsx as t } from "react/jsx-runtime";
+import k, { useId as A } from "react";
+import L from "clsx";
+import { Icon as R } from "../../base/icon/icon.js";
+import { useControllableState as V } from "../../../hooks/useControllableState.js";
+const i = (s) => typeof s == "number" ? `${s}px` : s, D = k.forwardRef(function({
   header: o,
   sidebar: n,
   footer: p,
-  sidebarWidth: c = 260,
-  sidebarCollapsed: d,
+  sidebarWidth: d = 260,
+  sidebarCollapsed: c,
   defaultSidebarCollapsed: m = !1,
   onSidebarCollapsedChange: u,
   collapsible: b = !1,
@@ -19,32 +19,33 @@ const i = (t) => typeof t == "number" ? `${t}px` : t, B = j.forwardRef(function(
   className: h,
   style: w,
   children: v,
-  ...N
-}, x) {
-  const [a, C] = R({
-    value: d,
+  "data-testid": N = "app-layout",
+  ...x
+}, C) {
+  const [a, I] = V({
+    value: c,
     defaultValue: m,
     onChange: u
-  }), r = k(), I = {
-    "--smui-app-sidebar-w": i(a ? _ : c)
+  }), r = A(), j = {
+    "--smui-app-sidebar-w": i(a ? _ : d)
   };
   return /* @__PURE__ */ e(
     "div",
     {
-      ref: x,
-      "data-testid": "app-layout",
-      className: A(
+      ref: C,
+      "data-testid": N,
+      className: L(
         "smwb-app-layout",
         { "smwb-app-layout_sticky-header": f, "smwb-app-layout_collapsed": a },
         h
       ),
-      style: { ...I, ...w },
-      ...N,
+      style: { ...j, ...w },
+      ...x,
       children: [
-        o ? /* @__PURE__ */ s("div", { className: "smwb-app-layout__header", children: o }) : null,
+        o ? /* @__PURE__ */ t("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(
+            b ? /* @__PURE__ */ t("div", { className: "smwb-app-layout__collapse", children: l != null ? l : /* @__PURE__ */ t(
               "button",
               {
                 type: "button",
@@ -52,15 +53,15 @@ const i = (t) => typeof t == "number" ? `${t}px` : t, B = j.forwardRef(function(
                 "aria-label": y,
                 "aria-expanded": !a,
                 "aria-controls": r,
-                onClick: () => C(!a),
-                children: /* @__PURE__ */ s(L, { name: a ? "chevron_right" : "chevron_left", size: 20 })
+                onClick: () => I(!a),
+                children: /* @__PURE__ */ t(R, { 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
+            p ? /* @__PURE__ */ t("div", { className: "smwb-app-layout__footer", children: p }) : null
           ] })
         ] })
       ]
@@ -68,7 +69,7 @@ const i = (t) => typeof t == "number" ? `${t}px` : t, B = j.forwardRef(function(
   );
 });
 export {
-  B as AppLayout,
-  B as default
+  D as AppLayout,
+  D as default
 };
 //# sourceMappingURL=appLayout.js.map

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

@@ -1 +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;"}
+{"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  /** Test id of the root `<div>`; `app-layout` unless given. */\n  \"data-testid\"?: 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    \"data-testid\": dataTestId = \"app-layout\",\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={dataTestId}\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","dataTestId","rest","ref","collapsed","setCollapsed","useControllableState","sidebarId","useId","cssVars","jsxs","cn","jsx","Icon"],"mappings":";;;;;AAmCA,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,eAAeC,IAAa;AAAA,EAC5B,GAAGC;AACL,GACAC,GACA;AACA,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAA8B;AAAA,IAC9D,OAAOhB;AAAA,IACP,cAAcC;AAAA,IACd,UAAUC;AAAA,EAAA,CACX,GAEKe,IAAYC,EAAA,GAEZC,IAAU;AAAA,IACd,wBAAoC3B,EAAZsB,IAAgBR,IAA6BP,CAAR;AAAA,EAAoB;AAGnF,SACE,gBAAAqB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAP;AAAA,MACA,eAAaF;AAAA,MACb,WAAWU;AAAA,QACT;AAAA,QACA,EAAE,iCAAiCd,GAAc,6BAA6BO,EAAA;AAAA,QAC9EN;AAAA,MAAA;AAAA,MAEF,OAAO,EAAE,GAAGW,GAAS,GAAGV,EAAA;AAAA,MACvB,GAAGG;AAAA,MAEH,UAAA;AAAA,QAAAhB,IAAS,gBAAA0B,EAAC,OAAA,EAAI,WAAU,2BAA2B,aAAO,IAAS;AAAA,QACpE,gBAAAF,EAAC,OAAA,EAAI,WAAU,yBACZ,UAAA;AAAA,UAAAvB,IACC,gBAAAuB,EAAC,SAAA,EAAM,IAAIH,GAAW,WAAU,4BAC7B,UAAA;AAAA,YAAAd,IACC,gBAAAmB,EAAC,OAAA,EAAI,WAAU,6BACZ,UAAAlB,KAAA,OAAAA,IACC,gBAAAkB;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,WAAU;AAAA,gBACV,cAAYjB;AAAA,gBACZ,iBAAe,CAACS;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,YACHjB;AAAA,UAAA,EAAA,CACH,IACE;AAAA,UACJ,gBAAAuB,EAAC,OAAA,EAAI,WAAU,4BACZ,UAAA;AAAA,YAAAV;AAAA,YACAZ,IAAS,gBAAAwB,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

@@ -1,7 +1,7 @@
 import { jsx as a } from "react/jsx-runtime";
-import { forwardRef as p } from "react";
-import C from "clsx";
-const x = {
+import { forwardRef as C } from "react";
+import x from "clsx";
+const y = {
   default: void 0,
   primary: "var(--smui-primaryColor)",
   secondary: "var(--smui-secondaryColor)",
@@ -9,7 +9,7 @@ const x = {
   success: "var(--smui-successColor)",
   warning: "var(--smui-warningColor)",
   info: "var(--smui-infoColor)"
-}, $ = p(function({
+}, g = C(function({
   className: t,
   orientation: r = "horizontal",
   variant: l = "fullWidth",
@@ -19,13 +19,14 @@ const x = {
   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 = {
+  "data-testid": u = "divider",
+  ...f
+}, b) {
+  const e = o != null && o !== !1, s = y[v], d = typeof i == "number" ? `${i}px` : i, w = {
     ...n,
-    ...d ? { borderColor: d } : {},
-    ...s ? r === "vertical" ? { borderLeftWidth: s } : { borderBottomWidth: s } : {}
-  }, w = C(
+    ...s ? { borderColor: s } : {},
+    ...d ? r === "vertical" ? { borderLeftWidth: d } : { borderBottomWidth: d } : {}
+  }, p = x(
     "smwb-divider",
     `smwb-divider_${r}`,
     `smwb-divider_${l}`,
@@ -39,19 +40,19 @@ const x = {
   return /* @__PURE__ */ a(
     "div",
     {
-      ...u,
-      ref: f,
-      "data-testid": "divider",
+      ...f,
+      ref: b,
+      "data-testid": u,
       role: "separator",
       "aria-orientation": r,
-      className: w,
-      style: b,
+      className: p,
+      style: w,
       children: e && r === "horizontal" ? /* @__PURE__ */ a("span", { className: "smwb-divider__text", children: o }) : null
     }
   );
 });
 export {
-  $ as Divider,
-  $ as default
+  g as Divider,
+  g as default
 };
 //# sourceMappingURL=divider.js.map

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

@@ -1 +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;"}
+{"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  /** Test id of the root `<div>`; `divider` unless given. */\n  \"data-testid\"?: string;\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    \"data-testid\": dataTestId = \"divider\",\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={dataTestId}\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","dataTestId","props","ref","hasText","c","t","dividerStyle","dividerClassName","cn","jsx"],"mappings":";;;AAuBA,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,eAAeC,IAAa;AAAA,EAC5B,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAoCJ,KAAa,QAAQA,MAAa,IACtEK,IAAIhB,EAASO,CAAK,GAClBU,IAAI,OAAOT,KAAc,WAAW,GAAGA,CAAS,OAAOA,GAEvDU,IAA8B;AAAA,IAClC,GAAGR;AAAA,IACH,GAAIM,IAAI,EAAE,aAAaA,EAAA,IAAM,CAAA;AAAA,IAC7B,GAAIC,IAAKb,MAAgB,aAAa,EAAE,iBAAiBa,MAAM,EAAE,mBAAmBA,MAAO,CAAA;AAAA,EAAC,GAGxFE,IAAmBC;AAAA,IACvB;AAAA,IACA,gBAAgBhB,CAAW;AAAA,IAC3B,gBAAgBC,CAAO;AAAA,IACvB;AAAA,MACE,0BAA0BU,KAAWX,MAAgB;AAAA,MACrD,CAAC,sBAAsBE,CAAS,EAAE,GAAGS,KAAWX,MAAgB;AAAA,MAChE,0BAA0BK;AAAA,IAAA;AAAA,IAE5BN;AAAA,EAAA;AAGF,SACE,gBAAAkB;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGR;AAAA,MACJ,KAAAC;AAAA,MACA,eAAaF;AAAA,MACb,MAAK;AAAA,MACL,oBAAkBR;AAAA,MAClB,WAAWe;AAAA,MACX,OAAOD;AAAA,MAEN,UAAAH,KAAWX,MAAgB,eAAe,gBAAAiB,EAAC,UAAK,WAAU,sBAAsB,UAAAV,GAAS,IAAU;AAAA,IAAA;AAAA,EAAA;AAG1G,CAAC;"}