@smwb/ui-solid 0.11.1 → 0.12.0

package/dist/source/components/dataDisplay/table/tableCell.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/dataDisplay/table/tableCell.tsx"],"sourcesContent":["import { type JSX, type ParentProps, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface TableCellProps extends JSX.TdHTMLAttributes<HTMLTableCellElement> {\n  cellAlign?: \"left\" | \"right\" | \"center\";\n  ref?: Ref<HTMLTableCellElement>;\n}\n\nexport function TableCell(props: ParentProps<TableCellProps>): JSX.Element {\n  const merged = mergeProps({ cellAlign: \"left\" as const }, props);\n  const [local, rest] = splitProps(merged, [\"children\", \"cellAlign\", \"class\", \"ref\"]);\n  return (\n    <td {...rest} ref={mergeRefs(local.ref)} class={cn(\"smwb-table__cell\", local.class)} align={local.cellAlign || \"left\"}>\n      {local.children}\n    </td>\n  );\n}\n\nexport default TableCell;\n"],"mappings":"AAAA,SAAqC,YAAY,kBAAkB;AACnE,OAAO,QAAQ;AACf,SAAS,iBAA2B;AAO7B,SAAS,UAAU,OAAiD;AACzE,QAAM,SAAS,WAAW,EAAE,WAAW,OAAgB,GAAG,KAAK;AAC/D,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ,CAAC,YAAY,aAAa,SAAS,KAAK,CAAC;AAClF,SACE,CAAC,OAAO,MAAM,KAAK,UAAU,MAAM,GAAG,GAAG,OAAO,GAAG,oBAAoB,MAAM,KAAK,GAAG,OAAO,MAAM,aAAa,QAAQ;AAAA,OACpH,MAAM,SAAS;AAAA,IAClB,EAFC;AAIL;AAEA,IAAO,oBAAQ;","names":[],"file":"tableCell.jsx"}
+{"version":3,"sources":["../../../../../src/components/dataDisplay/table/tableCell.tsx"],"sourcesContent":["import { type JSX, type ParentProps, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface TableCellProps extends JSX.TdHTMLAttributes<HTMLTableCellElement> {\n  cellAlign?: \"left\" | \"right\" | \"center\";\n  /** The column's name, shown next to the value when the table stacks rows as cards (`Table stackBelow`). */\n  label?: string;\n  ref?: Ref<HTMLTableCellElement>;\n}\n\nexport function TableCell(props: ParentProps<TableCellProps>): JSX.Element {\n  const merged = mergeProps({ cellAlign: \"left\" as const }, props);\n  const [local, rest] = splitProps(merged, [\"children\", \"cellAlign\", \"class\", \"label\", \"ref\"]);\n  return (\n    <td\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-table__cell\", local.class)}\n      align={local.cellAlign || \"left\"}\n      data-label={local.label}\n    >\n      {local.children}\n    </td>\n  );\n}\n\nexport default TableCell;\n"],"mappings":"AAAA,SAAqC,YAAY,kBAAkB;AACnE,OAAO,QAAQ;AACf,SAAS,iBAA2B;AAS7B,SAAS,UAAU,OAAiD;AACzE,QAAM,SAAS,WAAW,EAAE,WAAW,OAAgB,GAAG,KAAK;AAC/D,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ,CAAC,YAAY,aAAa,SAAS,SAAS,KAAK,CAAC;AAC3F,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,OAAO,GAAG,oBAAoB,MAAM,KAAK;AAAA,IACzC,OAAO,MAAM,aAAa;AAAA,IAC1B,YAAY,MAAM;AAAA,GACnB;AAAA,OACE,MAAM,SAAS;AAAA,IAClB,EARC;AAUL;AAEA,IAAO,oBAAQ;","names":[],"file":"tableCell.jsx"}

package/dist/source/components/dataDisplay/table/tableHeadCell.jsx

@@ -2,6 +2,34 @@ import { Show, mergeProps, splitProps } from "solid-js";
 import cn from "clsx";
 import { Icon } from "../../base/icon";
 import { mergeRefs } from "../../../primitives/mergeRefs";
+const INTERACTIVE = [
+  "a[href]",
+  "button",
+  "input",
+  "select",
+  "textarea",
+  "label",
+  "summary",
+  "[tabindex]",
+  "[contenteditable]:not([contenteditable='false'])",
+  ...[
+    "button",
+    "link",
+    "checkbox",
+    "radio",
+    "switch",
+    "textbox",
+    "searchbox",
+    "combobox",
+    "spinbutton",
+    "slider",
+    "menuitem",
+    "menuitemcheckbox",
+    "menuitemradio",
+    "option",
+    "tab"
+  ].map((role) => `[role='${role}']`)
+].join(",");
 function TableHeadCell(props) {
   const merged = mergeProps({ cellAlign: "left" }, props);
   const [local, rest] = splitProps(merged, [
@@ -19,11 +47,17 @@ function TableHeadCell(props) {
   const ariaSort = () => local.sortable ? direction() === "asc" ? "ascending" : direction() === "desc" ? "descending" : "none" : void 0;
   const iconName = () => direction() === "asc" ? "expand_more" : direction() === "desc" ? "expand_less" : "unfold_more";
   const onKeyDown = (event) => {
-    if (local.sortable && local.onSort && (event.key === "Enter" || event.key === " ")) {
+    if (!local.sortable || event.target !== event.currentTarget) return;
+    if (local.onSort && (event.key === "Enter" || event.key === " ")) {
       event.preventDefault();
       local.onSort();
     }
   };
+  const onClick = (event) => {
+    if (!local.sortable || event.defaultPrevented) return;
+    if (event.target?.closest(INTERACTIVE) !== event.currentTarget) return;
+    local.onSort?.();
+  };
   return <th
     {...rest}
     ref={mergeRefs(local.ref)}
@@ -36,8 +70,8 @@ function TableHeadCell(props) {
   >
       <span
     class="smwb-head-cell__content"
-    onClick={local.sortable ? () => local.onSort?.() : void 0}
-    onKeyDown={local.sortable ? onKeyDown : void 0}
+    onClick={onClick}
+    onKeyDown={onKeyDown}
     role={local.sortable ? "button" : void 0}
     tabindex={local.sortable ? 0 : void 0}
   >

package/dist/source/components/dataDisplay/table/tableHeadCell.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/dataDisplay/table/tableHeadCell.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type SortDirection = \"asc\" | \"desc\" | false;\n\nexport interface TableHeadCellProps extends JSX.ThHTMLAttributes<HTMLTableCellElement> {\n  cellAlign?: \"left\" | \"right\" | \"center\";\n  /** @deprecated use `sortDirection=\"desc\"`. */\n  isSortedByDesc?: boolean;\n  /** @deprecated use `sortDirection=\"asc\"`. */\n  isSortedByAsc?: boolean;\n  /** Enables the interactive sort affordance with keyboard/aria support. */\n  sortable?: boolean;\n  /** Current sort direction for this column. */\n  sortDirection?: SortDirection;\n  /** Invoked when the user activates the sort control. */\n  onSort?: () => void;\n  ref?: Ref<HTMLTableCellElement>;\n}\n\nexport function TableHeadCell(props: ParentProps<TableHeadCellProps>): JSX.Element {\n  const merged = mergeProps({ cellAlign: \"left\" as const }, props);\n  const [local, rest] = splitProps(merged, [\n    \"children\",\n    \"class\",\n    \"cellAlign\",\n    \"isSortedByAsc\",\n    \"isSortedByDesc\",\n    \"sortable\",\n    \"sortDirection\",\n    \"onSort\",\n    \"ref\",\n  ]);\n\n  const direction = (): SortDirection =>\n    local.sortDirection !== undefined ? local.sortDirection : local.isSortedByAsc ? \"asc\" : local.isSortedByDesc ? \"desc\" : false;\n\n  const ariaSort = (): \"ascending\" | \"descending\" | \"none\" | undefined =>\n    local.sortable ? (direction() === \"asc\" ? \"ascending\" : direction() === \"desc\" ? \"descending\" : \"none\") : undefined;\n\n  /**\n   * A sortable column always shows a marker: the current direction once sorted,\n   * and `unfold_more` before that — otherwise nothing tells the reader the column\n   * can be sorted at all. A cell that is not sortable shows nothing; it used to\n   * render an `<Icon name=\"\">`, which reserved a gap and warned about a missing\n   * icon under `source: \"smwb\"`.\n   */\n  const iconName = (): string =>\n    direction() === \"asc\" ? \"expand_more\" : direction() === \"desc\" ? \"expand_less\" : \"unfold_more\";\n\n  const onKeyDown: JSX.EventHandler<HTMLSpanElement, KeyboardEvent> = (event) => {\n    if (local.sortable && local.onSort && (event.key === \"Enter\" || event.key === \" \")) {\n      event.preventDefault();\n      local.onSort();\n    }\n  };\n\n  return (\n    <th\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      aria-sort={ariaSort()}\n      class={cn(\"smwb-table__cell\", \"smwb-head-cell\", local.class, {\n        [`smwb-align_${local.cellAlign}`]: !!local.cellAlign,\n        \"smwb-head-cell_sortable\": local.sortable,\n        \"smwb-head-cell_sorted\": !!local.sortable && direction() !== false,\n      })}\n    >\n      <span\n        class=\"smwb-head-cell__content\"\n        onClick={local.sortable ? () => local.onSort?.() : undefined}\n        onKeyDown={local.sortable ? onKeyDown : undefined}\n        role={local.sortable ? \"button\" : undefined}\n        tabindex={local.sortable ? 0 : undefined}\n      >\n        {local.children}\n        <Show when={local.sortable}>\n          <Icon class=\"smwb-head-cell__icon\" name={iconName()} size={18} weight={800} />\n        </Show>\n      </span>\n    </th>\n  );\n}\n\nexport default TableHeadCell;\n"],"mappings":"AAAA,SAAqC,MAAM,YAAY,kBAAkB;AACzE,OAAO,QAAQ;AACf,SAAS,YAAY;AACrB,SAAS,iBAA2B;AAmB7B,SAAS,cAAc,OAAqD;AACjF,QAAM,SAAS,WAAW,EAAE,WAAW,OAAgB,GAAG,KAAK;AAC/D,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,YAAY,MAChB,MAAM,kBAAkB,SAAY,MAAM,gBAAgB,MAAM,gBAAgB,QAAQ,MAAM,iBAAiB,SAAS;AAE1H,QAAM,WAAW,MACf,MAAM,WAAY,UAAU,MAAM,QAAQ,cAAc,UAAU,MAAM,SAAS,eAAe,SAAU;AAS5G,QAAM,WAAW,MACf,UAAU,MAAM,QAAQ,gBAAgB,UAAU,MAAM,SAAS,gBAAgB;AAEnF,QAAM,YAA8D,CAAC,UAAU;AAC7E,QAAI,MAAM,YAAY,MAAM,WAAW,MAAM,QAAQ,WAAW,MAAM,QAAQ,MAAM;AAClF,YAAM,eAAe;AACrB,YAAM,OAAO;AAAA,IACf;AAAA,EACF;AAEA,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,WAAW,SAAS;AAAA,IACpB,OAAO,GAAG,oBAAoB,kBAAkB,MAAM,OAAO;AAAA,MAC3D,CAAC,cAAc,MAAM,SAAS,EAAE,GAAG,CAAC,CAAC,MAAM;AAAA,MAC3C,2BAA2B,MAAM;AAAA,MACjC,yBAAyB,CAAC,CAAC,MAAM,YAAY,UAAU,MAAM;AAAA,IAC/D,CAAC;AAAA,GACF;AAAA,MACC,CAAC;AAAA,IACC,MAAM;AAAA,IACN,SAAS,MAAM,WAAW,MAAM,MAAM,SAAS,IAAI;AAAA,IACnD,WAAW,MAAM,WAAW,YAAY;AAAA,IACxC,MAAM,MAAM,WAAW,WAAW;AAAA,IAClC,UAAU,MAAM,WAAW,IAAI;AAAA,GAChC;AAAA,SACE,MAAM,SAAS;AAAA,QAChB,CAAC,KAAK,MAAM,MAAM,UAAU;AAAA,UAC1B,CAAC,KAAK,MAAM,uBAAuB,MAAM,SAAS,GAAG,MAAM,IAAI,QAAQ,KAAK,EAAE;AAAA,QAChF,EAFC,KAEM;AAAA,MACT,EAXC,KAWM;AAAA,IACT,EAtBC;AAwBL;AAEA,IAAO,wBAAQ;","names":[],"file":"tableHeadCell.jsx"}
+{"version":3,"sources":["../../../../../src/components/dataDisplay/table/tableHeadCell.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type SortDirection = \"asc\" | \"desc\" | false;\n\nexport interface TableHeadCellProps extends JSX.ThHTMLAttributes<HTMLTableCellElement> {\n  cellAlign?: \"left\" | \"right\" | \"center\";\n  /** @deprecated use `sortDirection=\"desc\"`. */\n  isSortedByDesc?: boolean;\n  /** @deprecated use `sortDirection=\"asc\"`. */\n  isSortedByAsc?: boolean;\n  /**\n   * Enables the interactive sort affordance with keyboard/aria support.\n   *\n   * The children sit inside the sort control, and controls among them keep\n   * their own input: Enter and Space sort only while the sort control itself\n   * has focus, and a click sorts unless it lands in a nested control (input,\n   * button, link, label, anything focusable) or in a portal. Content that is not\n   * a control, such as click-to-edit text, keeps its click from sorting by\n   * calling `preventDefault()` on it. A nested control's name, or its value,\n   * becomes part of the sort control's accessible name.\n   */\n  sortable?: boolean;\n  /** Current sort direction for this column. */\n  sortDirection?: SortDirection;\n  /** Invoked when the user activates the sort control. */\n  onSort?: () => void;\n  ref?: Ref<HTMLTableCellElement>;\n}\n\n/**\n * Whatever takes a click of its own inside the sort control. The control\n * matches too (`role=\"button\"`), so it is the nearest match for a click on the\n * header's text or marker, and only then does the click sort.\n */\nconst INTERACTIVE = [\n  \"a[href]\",\n  \"button\",\n  \"input\",\n  \"select\",\n  \"textarea\",\n  \"label\",\n  \"summary\",\n  \"[tabindex]\",\n  \"[contenteditable]:not([contenteditable='false'])\",\n  ...[\n    \"button\",\n    \"link\",\n    \"checkbox\",\n    \"radio\",\n    \"switch\",\n    \"textbox\",\n    \"searchbox\",\n    \"combobox\",\n    \"spinbutton\",\n    \"slider\",\n    \"menuitem\",\n    \"menuitemcheckbox\",\n    \"menuitemradio\",\n    \"option\",\n    \"tab\",\n  ].map((role) => `[role='${role}']`),\n].join(\",\");\n\nexport function TableHeadCell(props: ParentProps<TableHeadCellProps>): JSX.Element {\n  const merged = mergeProps({ cellAlign: \"left\" as const }, props);\n  const [local, rest] = splitProps(merged, [\n    \"children\",\n    \"class\",\n    \"cellAlign\",\n    \"isSortedByAsc\",\n    \"isSortedByDesc\",\n    \"sortable\",\n    \"sortDirection\",\n    \"onSort\",\n    \"ref\",\n  ]);\n\n  const direction = (): SortDirection =>\n    local.sortDirection !== undefined ? local.sortDirection : local.isSortedByAsc ? \"asc\" : local.isSortedByDesc ? \"desc\" : false;\n\n  const ariaSort = (): \"ascending\" | \"descending\" | \"none\" | undefined =>\n    local.sortable ? (direction() === \"asc\" ? \"ascending\" : direction() === \"desc\" ? \"descending\" : \"none\") : undefined;\n\n  /**\n   * A sortable column always shows a marker: the current direction once sorted,\n   * and `unfold_more` before that — otherwise nothing tells the reader the column\n   * can be sorted at all. A cell that is not sortable shows nothing; it used to\n   * render an `<Icon name=\"\">`, which reserved a gap and warned about a missing\n   * icon under `source: \"smwb\"`.\n   */\n  const iconName = (): string =>\n    direction() === \"asc\" ? \"expand_more\" : direction() === \"desc\" ? \"expand_less\" : \"unfold_more\";\n\n  // Solid binds event handlers once, so both are always attached and check\n  // `sortable` themselves: a cell can turn sortable, or stop, after it renders.\n\n  // Keys typed into an input or pressed on a button inside bubble up here too;\n  // only the control's own keys sort.\n  const onKeyDown: JSX.EventHandler<HTMLSpanElement, KeyboardEvent> = (event) => {\n    if (!local.sortable || event.target !== event.currentTarget) return;\n    if (local.onSort && (event.key === \"Enter\" || event.key === \" \")) {\n      event.preventDefault();\n      local.onSort();\n    }\n  };\n\n  // A click sorts only when the control is the nearest thing that takes it. A\n  // click in a Portal rendered inside fails that too: Solid delivers it here,\n  // though it landed outside the control.\n  const onClick: JSX.EventHandler<HTMLSpanElement, MouseEvent> = (event) => {\n    if (!local.sortable || event.defaultPrevented) return;\n    if ((event.target as Element | null)?.closest(INTERACTIVE) !== event.currentTarget) return;\n    local.onSort?.();\n  };\n\n  return (\n    <th\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      aria-sort={ariaSort()}\n      class={cn(\"smwb-table__cell\", \"smwb-head-cell\", local.class, {\n        [`smwb-align_${local.cellAlign}`]: !!local.cellAlign,\n        \"smwb-head-cell_sortable\": local.sortable,\n        \"smwb-head-cell_sorted\": !!local.sortable && direction() !== false,\n      })}\n    >\n      <span\n        class=\"smwb-head-cell__content\"\n        onClick={onClick}\n        onKeyDown={onKeyDown}\n        role={local.sortable ? \"button\" : undefined}\n        tabindex={local.sortable ? 0 : undefined}\n      >\n        {local.children}\n        <Show when={local.sortable}>\n          <Icon class=\"smwb-head-cell__icon\" name={iconName()} size={18} weight={800} />\n        </Show>\n      </span>\n    </th>\n  );\n}\n\nexport default TableHeadCell;\n"],"mappings":"AAAA,SAAqC,MAAM,YAAY,kBAAkB;AACzE,OAAO,QAAQ;AACf,SAAS,YAAY;AACrB,SAAS,iBAA2B;AAkCpC,MAAM,cAAc;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,EAAE,IAAI,CAAC,SAAS,UAAU,IAAI,IAAI;AACpC,EAAE,KAAK,GAAG;AAEH,SAAS,cAAc,OAAqD;AACjF,QAAM,SAAS,WAAW,EAAE,WAAW,OAAgB,GAAG,KAAK;AAC/D,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,YAAY,MAChB,MAAM,kBAAkB,SAAY,MAAM,gBAAgB,MAAM,gBAAgB,QAAQ,MAAM,iBAAiB,SAAS;AAE1H,QAAM,WAAW,MACf,MAAM,WAAY,UAAU,MAAM,QAAQ,cAAc,UAAU,MAAM,SAAS,eAAe,SAAU;AAS5G,QAAM,WAAW,MACf,UAAU,MAAM,QAAQ,gBAAgB,UAAU,MAAM,SAAS,gBAAgB;AAOnF,QAAM,YAA8D,CAAC,UAAU;AAC7E,QAAI,CAAC,MAAM,YAAY,MAAM,WAAW,MAAM,cAAe;AAC7D,QAAI,MAAM,WAAW,MAAM,QAAQ,WAAW,MAAM,QAAQ,MAAM;AAChE,YAAM,eAAe;AACrB,YAAM,OAAO;AAAA,IACf;AAAA,EACF;AAKA,QAAM,UAAyD,CAAC,UAAU;AACxE,QAAI,CAAC,MAAM,YAAY,MAAM,iBAAkB;AAC/C,QAAK,MAAM,QAA2B,QAAQ,WAAW,MAAM,MAAM,cAAe;AACpF,UAAM,SAAS;AAAA,EACjB;AAEA,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,WAAW,SAAS;AAAA,IACpB,OAAO,GAAG,oBAAoB,kBAAkB,MAAM,OAAO;AAAA,MAC3D,CAAC,cAAc,MAAM,SAAS,EAAE,GAAG,CAAC,CAAC,MAAM;AAAA,MAC3C,2BAA2B,MAAM;AAAA,MACjC,yBAAyB,CAAC,CAAC,MAAM,YAAY,UAAU,MAAM;AAAA,IAC/D,CAAC;AAAA,GACF;AAAA,MACC,CAAC;AAAA,IACC,MAAM;AAAA,IACN,SAAS;AAAA,IACT,WAAW;AAAA,IACX,MAAM,MAAM,WAAW,WAAW;AAAA,IAClC,UAAU,MAAM,WAAW,IAAI;AAAA,GAChC;AAAA,SACE,MAAM,SAAS;AAAA,QAChB,CAAC,KAAK,MAAM,MAAM,UAAU;AAAA,UAC1B,CAAC,KAAK,MAAM,uBAAuB,MAAM,SAAS,GAAG,MAAM,IAAI,QAAQ,KAAK,EAAE;AAAA,QAChF,EAFC,KAEM;AAAA,MACT,EAXC,KAWM;AAAA,IACT,EAtBC;AAwBL;AAEA,IAAO,wBAAQ;","names":[],"file":"tableHeadCell.jsx"}

package/dist/source/components/dataDisplay/table/tablePagination/tablePagination.jsx

@@ -1,3 +1,4 @@
+import "@smwb/ui-styles/less/tokens.entry.less";
 import "@smwb/ui-styles/less/components/table/tablePagination/tablePagination.entry.less";
 import { For, Show } from "solid-js";
 import cn from "clsx";

package/dist/source/components/dataDisplay/table/tablePagination/tablePagination.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/dataDisplay/table/tablePagination/tablePagination.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/components/table/tablePagination/tablePagination.entry.less\";\nimport { type JSX, For, Show } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../../base/icon\";\n\nexport interface BaseTablePaginationProps {\n  page: number;\n  limit: number;\n  onPrev?: () => void;\n  onNext?: () => void;\n  limitOptions?: number[];\n  onLimitChange?: (limit: number) => void;\n}\n\ninterface WithTotalCount extends BaseTablePaginationProps {\n  totalCount: number;\n  hasNextPage?: never;\n}\n\ninterface WithHasNextPage extends BaseTablePaginationProps {\n  totalCount?: never;\n  hasNextPage: boolean;\n}\n\nexport type TablePaginationProps = WithTotalCount | WithHasNextPage;\n\nexport function TablePagination(props: TablePaginationProps): JSX.Element {\n  const isInfiniteMode = (): boolean => typeof props.totalCount === \"undefined\";\n  const isDisabledNext = (): boolean =>\n    isInfiniteMode() ? !props.hasNextPage : props.page === Math.ceil((props.totalCount as number) / props.limit);\n\n  const countText = (): string => {\n    const from = props.page * props.limit - props.limit;\n    const to = props.page * props.limit;\n    return `${from}–${to}` + (isInfiniteMode() ? \"\" : ` of ${props.totalCount}`);\n  };\n\n  const onLimitChange: JSX.EventHandler<HTMLSelectElement, Event> = (event) => {\n    props.onLimitChange?.(+event.currentTarget.value);\n  };\n\n  return (\n    <div class=\"smwb-table__pagination\">\n      <div class=\"smwb-table__pagination__controls\">\n        <Show when={props.limitOptions && props.limitOptions.length > 1}>\n          <div class=\"smwb-table__pagination__rows\">\n            <span>Rows per page</span>\n            <select id=\"rows\" class=\"smwb-table__pagination__select\" onChange={onLimitChange} value={props.limit}>\n              <For each={props.limitOptions}>\n                {(opt) => (\n                  <option value={opt} class={cn(\"smwb-select-option\", { selected: opt === props.limit })}>\n                    {opt}\n                  </option>\n                )}\n              </For>\n            </select>\n          </div>\n        </Show>\n        <div class=\"smwb-table__pagination__current-count\">{countText()}</div>\n        <div class=\"smwb-table__pagination__buttons\">\n          <button class=\"smwb-table__pagination__control\" onClick={() => props.onPrev?.()} disabled={props.page === 1}>\n            <Icon name=\"chevron_left\" size={24} weight={600} />\n          </button>\n          <span class=\"smwb-table__pagination__page\">{props.page}</span>\n          <button class=\"smwb-table__pagination__control\" onClick={() => props.onNext?.()} disabled={isDisabledNext()}>\n            <Icon name=\"chevron_right\" size={24} weight={600} />\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default TablePagination;\n"],"mappings":"AAAA,OAAO;AACP,SAAmB,KAAK,YAAY;AACpC,OAAO,QAAQ;AACf,SAAS,YAAY;AAuBd,SAAS,gBAAgB,OAA0C;AACxE,QAAM,iBAAiB,MAAe,OAAO,MAAM,eAAe;AAClE,QAAM,iBAAiB,MACrB,eAAe,IAAI,CAAC,MAAM,cAAc,MAAM,SAAS,KAAK,KAAM,MAAM,aAAwB,MAAM,KAAK;AAE7G,QAAM,YAAY,MAAc;AAC9B,UAAM,OAAO,MAAM,OAAO,MAAM,QAAQ,MAAM;AAC9C,UAAM,KAAK,MAAM,OAAO,MAAM;AAC9B,WAAO,GAAG,IAAI,SAAI,EAAE,MAAM,eAAe,IAAI,KAAK,OAAO,MAAM,UAAU;AAAA,EAC3E;AAEA,QAAM,gBAA4D,CAAC,UAAU;AAC3E,UAAM,gBAAgB,CAAC,MAAM,cAAc,KAAK;AAAA,EAClD;AAEA,SACE,CAAC,IAAI,MAAM,yBAAyB;AAAA,MAClC,CAAC,IAAI,MAAM,mCAAmC;AAAA,QAC5C,CAAC,KAAK,MAAM,MAAM,gBAAgB,MAAM,aAAa,SAAS,GAAG;AAAA,UAC/D,CAAC,IAAI,MAAM,+BAA+B;AAAA,YACxC,CAAC,KAAK,aAAa,EAAlB,KAAyB;AAAA,YAC1B,CAAC,OAAO,GAAG,OAAO,MAAM,iCAAiC,UAAU,eAAe,OAAO,MAAM,OAAO;AAAA,cACpG,CAAC,IAAI,MAAM,MAAM,cAAc;AAAA,iBAC5B,CAAC,QACA,CAAC,OAAO,OAAO,KAAK,OAAO,GAAG,sBAAsB,EAAE,UAAU,QAAQ,MAAM,MAAM,CAAC,GAAG;AAAA,qBACrF,IAAI;AAAA,kBACP,EAFC,QAGD;AAAA,cACJ,EANC,IAMK;AAAA,YACR,EARC,OAQQ;AAAA,UACX,EAXC,IAWK;AAAA,QACR,EAbC,KAaM;AAAA,QACP,CAAC,IAAI,MAAM,yCAAyC,UAAU,EAAE,EAA/D,IAAqE;AAAA,QACtE,CAAC,IAAI,MAAM,kCAAkC;AAAA,UAC3C,CAAC,OAAO,MAAM,kCAAkC,SAAS,MAAM,MAAM,SAAS,GAAG,UAAU,MAAM,SAAS,GAAG;AAAA,YAC3G,CAAC,KAAK,KAAK,eAAe,MAAM,IAAI,QAAQ,KAAK,EAAE;AAAA,UACrD,EAFC,OAEQ;AAAA,UACT,CAAC,KAAK,MAAM,gCAAgC,MAAM,KAAK,EAAtD,KAA6D;AAAA,UAC9D,CAAC,OAAO,MAAM,kCAAkC,SAAS,MAAM,MAAM,SAAS,GAAG,UAAU,eAAe,GAAG;AAAA,YAC3G,CAAC,KAAK,KAAK,gBAAgB,MAAM,IAAI,QAAQ,KAAK,EAAE;AAAA,UACtD,EAFC,OAEQ;AAAA,QACX,EARC,IAQK;AAAA,MACR,EAzBC,IAyBK;AAAA,IACR,EA3BC;AA6BL;AAEA,IAAO,0BAAQ;","names":[],"file":"tablePagination.jsx"}
+{"version":3,"sources":["../../../../../../src/components/dataDisplay/table/tablePagination/tablePagination.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/table/tablePagination/tablePagination.entry.less\";\nimport { type JSX, For, Show } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../../base/icon\";\n\nexport interface BaseTablePaginationProps {\n  page: number;\n  limit: number;\n  onPrev?: () => void;\n  onNext?: () => void;\n  limitOptions?: number[];\n  onLimitChange?: (limit: number) => void;\n}\n\ninterface WithTotalCount extends BaseTablePaginationProps {\n  totalCount: number;\n  hasNextPage?: never;\n}\n\ninterface WithHasNextPage extends BaseTablePaginationProps {\n  totalCount?: never;\n  hasNextPage: boolean;\n}\n\nexport type TablePaginationProps = WithTotalCount | WithHasNextPage;\n\nexport function TablePagination(props: TablePaginationProps): JSX.Element {\n  const isInfiniteMode = (): boolean => typeof props.totalCount === \"undefined\";\n  const isDisabledNext = (): boolean =>\n    isInfiniteMode() ? !props.hasNextPage : props.page === Math.ceil((props.totalCount as number) / props.limit);\n\n  const countText = (): string => {\n    const from = props.page * props.limit - props.limit;\n    const to = props.page * props.limit;\n    return `${from}–${to}` + (isInfiniteMode() ? \"\" : ` of ${props.totalCount}`);\n  };\n\n  const onLimitChange: JSX.EventHandler<HTMLSelectElement, Event> = (event) => {\n    props.onLimitChange?.(+event.currentTarget.value);\n  };\n\n  return (\n    <div class=\"smwb-table__pagination\">\n      <div class=\"smwb-table__pagination__controls\">\n        <Show when={props.limitOptions && props.limitOptions.length > 1}>\n          <div class=\"smwb-table__pagination__rows\">\n            <span>Rows per page</span>\n            <select id=\"rows\" class=\"smwb-table__pagination__select\" onChange={onLimitChange} value={props.limit}>\n              <For each={props.limitOptions}>\n                {(opt) => (\n                  <option value={opt} class={cn(\"smwb-select-option\", { selected: opt === props.limit })}>\n                    {opt}\n                  </option>\n                )}\n              </For>\n            </select>\n          </div>\n        </Show>\n        <div class=\"smwb-table__pagination__current-count\">{countText()}</div>\n        <div class=\"smwb-table__pagination__buttons\">\n          <button class=\"smwb-table__pagination__control\" onClick={() => props.onPrev?.()} disabled={props.page === 1}>\n            <Icon name=\"chevron_left\" size={24} weight={600} />\n          </button>\n          <span class=\"smwb-table__pagination__page\">{props.page}</span>\n          <button class=\"smwb-table__pagination__control\" onClick={() => props.onNext?.()} disabled={isDisabledNext()}>\n            <Icon name=\"chevron_right\" size={24} weight={600} />\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default TablePagination;\n"],"mappings":"AAAA,OAAO;AACP,OAAO;AACP,SAAmB,KAAK,YAAY;AACpC,OAAO,QAAQ;AACf,SAAS,YAAY;AAuBd,SAAS,gBAAgB,OAA0C;AACxE,QAAM,iBAAiB,MAAe,OAAO,MAAM,eAAe;AAClE,QAAM,iBAAiB,MACrB,eAAe,IAAI,CAAC,MAAM,cAAc,MAAM,SAAS,KAAK,KAAM,MAAM,aAAwB,MAAM,KAAK;AAE7G,QAAM,YAAY,MAAc;AAC9B,UAAM,OAAO,MAAM,OAAO,MAAM,QAAQ,MAAM;AAC9C,UAAM,KAAK,MAAM,OAAO,MAAM;AAC9B,WAAO,GAAG,IAAI,SAAI,EAAE,MAAM,eAAe,IAAI,KAAK,OAAO,MAAM,UAAU;AAAA,EAC3E;AAEA,QAAM,gBAA4D,CAAC,UAAU;AAC3E,UAAM,gBAAgB,CAAC,MAAM,cAAc,KAAK;AAAA,EAClD;AAEA,SACE,CAAC,IAAI,MAAM,yBAAyB;AAAA,MAClC,CAAC,IAAI,MAAM,mCAAmC;AAAA,QAC5C,CAAC,KAAK,MAAM,MAAM,gBAAgB,MAAM,aAAa,SAAS,GAAG;AAAA,UAC/D,CAAC,IAAI,MAAM,+BAA+B;AAAA,YACxC,CAAC,KAAK,aAAa,EAAlB,KAAyB;AAAA,YAC1B,CAAC,OAAO,GAAG,OAAO,MAAM,iCAAiC,UAAU,eAAe,OAAO,MAAM,OAAO;AAAA,cACpG,CAAC,IAAI,MAAM,MAAM,cAAc;AAAA,iBAC5B,CAAC,QACA,CAAC,OAAO,OAAO,KAAK,OAAO,GAAG,sBAAsB,EAAE,UAAU,QAAQ,MAAM,MAAM,CAAC,GAAG;AAAA,qBACrF,IAAI;AAAA,kBACP,EAFC,QAGD;AAAA,cACJ,EANC,IAMK;AAAA,YACR,EARC,OAQQ;AAAA,UACX,EAXC,IAWK;AAAA,QACR,EAbC,KAaM;AAAA,QACP,CAAC,IAAI,MAAM,yCAAyC,UAAU,EAAE,EAA/D,IAAqE;AAAA,QACtE,CAAC,IAAI,MAAM,kCAAkC;AAAA,UAC3C,CAAC,OAAO,MAAM,kCAAkC,SAAS,MAAM,MAAM,SAAS,GAAG,UAAU,MAAM,SAAS,GAAG;AAAA,YAC3G,CAAC,KAAK,KAAK,eAAe,MAAM,IAAI,QAAQ,KAAK,EAAE;AAAA,UACrD,EAFC,OAEQ;AAAA,UACT,CAAC,KAAK,MAAM,gCAAgC,MAAM,KAAK,EAAtD,KAA6D;AAAA,UAC9D,CAAC,OAAO,MAAM,kCAAkC,SAAS,MAAM,MAAM,SAAS,GAAG,UAAU,eAAe,GAAG;AAAA,YAC3G,CAAC,KAAK,KAAK,gBAAgB,MAAM,IAAI,QAAQ,KAAK,EAAE;AAAA,UACtD,EAFC,OAEQ;AAAA,QACX,EARC,IAQK;AAAA,MACR,EAzBC,IAyBK;AAAA,IACR,EA3BC;AA6BL;AAEA,IAAO,0BAAQ;","names":[],"file":"tablePagination.jsx"}

package/dist/source/components/dataDisplay/thumbCard/thumbCard.jsx

@@ -1,5 +1,6 @@
+import "@smwb/ui-styles/less/tokens.entry.less";
 import "@smwb/ui-styles/less/components/thumbCard/thumbCard.entry.less";
-import { Show, createSignal, mergeProps, onCleanup, splitProps } from "solid-js";
+import { Show, children, createSignal, mergeProps, onCleanup, splitProps } from "solid-js";
 import { Portal, isServer } from "solid-js/web";
 import cn from "clsx";
 import { createFloating } from "../../../primitives/createFloating";
@@ -22,6 +23,9 @@ function ThumbCard(props) {
     "class",
     "ref"
   ]);
+  const topStart = children(() => local.topStart);
+  const topEnd = children(() => local.topEnd);
+  const caption = children(() => local.caption);
   const floating = createFloating({ placement: () => "right" });
   const [previewOpen, setPreviewOpen] = createSignal(false);
   let hoverTimer;
@@ -67,15 +71,15 @@ function ThumbCard(props) {
   >
       <div class="smwb-thumb-card__media">
         <LazyImage src={local.src} lazy={local.lazy} fallback={local.fallback} />
-        <Show when={local.topStart}>
-          <div class="smwb-thumb-card__slot smwb-thumb-card__slot--start">{local.topStart}</div>
+        <Show when={topStart()}>
+          <div class="smwb-thumb-card__slot smwb-thumb-card__slot--start">{topStart()}</div>
         </Show>
-        <Show when={local.topEnd}>
-          <div class="smwb-thumb-card__slot smwb-thumb-card__slot--end">{local.topEnd}</div>
+        <Show when={topEnd()}>
+          <div class="smwb-thumb-card__slot smwb-thumb-card__slot--end">{topEnd()}</div>
         </Show>
       </div>
-      <Show when={local.caption}>
-        <div class="smwb-thumb-card__caption">{local.caption}</div>
+      <Show when={caption()}>
+        <div class="smwb-thumb-card__caption">{caption()}</div>
       </Show>
       <Show when={previewOpen() && !isServer}>
         <Portal>

package/dist/source/components/dataDisplay/thumbCard/thumbCard.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/dataDisplay/thumbCard/thumbCard.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/components/thumbCard/thumbCard.entry.less\";\nimport { type JSX, Show, createSignal, mergeProps, onCleanup, splitProps } from \"solid-js\";\nimport { Portal, isServer } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { createFloating } from \"../../../primitives/createFloating\";\nimport { LazyImage } from \"../lazyImage\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface ThumbCardProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n  /** Thumbnail URL; falls back to `fallback` when missing / failed. */\n  src?: string;\n  caption?: JSX.Element;\n  selected?: boolean;\n  /** Makes the card a selectable button (keyboard + `aria-pressed`). */\n  onSelect?: () => void;\n  /** Shown in place of the image when `src` is missing / fails. */\n  fallback?: JSX.Element;\n  /** A larger preview shown in a floating popup after a hover delay. */\n  hoverPreview?: JSX.Element | string;\n  /** Top-left overlay slot (e.g. a favourite star). */\n  topStart?: JSX.Element;\n  /** Top-right overlay slot (e.g. a kebab menu). */\n  topEnd?: JSX.Element;\n  lazy?: boolean;\n  disabled?: boolean;\n  /** Delay (ms) before the hover preview appears. Default 350. */\n  hoverDelay?: number;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * A selectable gallery card: image with an `onError` fallback + optional lazy\n * load, keyboard/`aria-pressed` selection, corner action slots, and a delayed\n * floating hover-preview. The generic gallery-card behaviour every app rebuilds\n * on top of the primitives. SSR-safe — the hover preview is client-only.\n */\nexport function ThumbCard(props: ThumbCardProps): JSX.Element {\n  const merged = mergeProps({ lazy: true, hoverDelay: 350 }, props);\n  const [local, rest] = splitProps(merged, [\n    \"src\",\n    \"caption\",\n    \"selected\",\n    \"onSelect\",\n    \"fallback\",\n    \"hoverPreview\",\n    \"topStart\",\n    \"topEnd\",\n    \"lazy\",\n    \"disabled\",\n    \"hoverDelay\",\n    \"class\",\n    \"ref\",\n  ]);\n\n  const floating = createFloating({ placement: () => \"right\" });\n  const [previewOpen, setPreviewOpen] = createSignal(false);\n  let hoverTimer: ReturnType<typeof setTimeout> | undefined;\n\n  const clearTimer = (): void => {\n    if (hoverTimer) {\n      clearTimeout(hoverTimer);\n      hoverTimer = undefined;\n    }\n  };\n  const onEnter = (): void => {\n    if (local.hoverPreview == null || local.disabled) return;\n    clearTimer();\n    hoverTimer = setTimeout(() => setPreviewOpen(true), local.hoverDelay);\n  };\n  const onLeave = (): void => {\n    clearTimer();\n    setPreviewOpen(false);\n  };\n  onCleanup(clearTimer);\n\n  const interactive = (): boolean => !!local.onSelect && !local.disabled;\n  const onKeyDown: JSX.EventHandler<HTMLDivElement, KeyboardEvent> = (event) => {\n    if (interactive() && (event.key === \"Enter\" || event.key === \" \")) {\n      event.preventDefault();\n      local.onSelect?.();\n    }\n  };\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref, (el) => floating.setReference(el))}\n      class={cn(\"smwb-thumb-card\", local.class, {\n        \"smwb-thumb-card--selected\": local.selected,\n        \"smwb-thumb-card--disabled\": local.disabled,\n        \"smwb-thumb-card--interactive\": interactive(),\n      })}\n      role={interactive() ? \"button\" : undefined}\n      tabindex={interactive() ? 0 : undefined}\n      aria-pressed={local.onSelect ? (local.selected ?? false) : undefined}\n      aria-disabled={local.disabled || undefined}\n      onClick={interactive() ? () => local.onSelect?.() : undefined}\n      onKeyDown={onKeyDown}\n      onMouseEnter={onEnter}\n      onMouseLeave={onLeave}\n    >\n      <div class=\"smwb-thumb-card__media\">\n        <LazyImage src={local.src} lazy={local.lazy} fallback={local.fallback} />\n        <Show when={local.topStart}>\n          <div class=\"smwb-thumb-card__slot smwb-thumb-card__slot--start\">{local.topStart}</div>\n        </Show>\n        <Show when={local.topEnd}>\n          <div class=\"smwb-thumb-card__slot smwb-thumb-card__slot--end\">{local.topEnd}</div>\n        </Show>\n      </div>\n      <Show when={local.caption}>\n        <div class=\"smwb-thumb-card__caption\">{local.caption}</div>\n      </Show>\n      <Show when={previewOpen() && !isServer}>\n        <Portal>\n          <div class=\"smwb-thumb-card__preview\" ref={(el) => floating.setFloating(el)} style={floating.floatingStyles()}>\n            {typeof local.hoverPreview === \"string\" ? (\n              <img src={local.hoverPreview} alt=\"\" />\n            ) : (\n              (local.hoverPreview as JSX.Element)\n            )}\n          </div>\n        </Portal>\n      </Show>\n    </div>\n  );\n}\n\nexport default ThumbCard;\n"],"mappings":"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","names":[],"file":"thumbCard.jsx"}
+{"version":3,"sources":["../../../../../src/components/dataDisplay/thumbCard/thumbCard.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/thumbCard/thumbCard.entry.less\";\nimport { type JSX, Show, children, createSignal, mergeProps, onCleanup, splitProps } from \"solid-js\";\nimport { Portal, isServer } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { createFloating } from \"../../../primitives/createFloating\";\nimport { LazyImage } from \"../lazyImage\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface ThumbCardProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n  /** Thumbnail URL; falls back to `fallback` when missing / failed. */\n  src?: string;\n  caption?: JSX.Element;\n  selected?: boolean;\n  /** Makes the card a selectable button (keyboard + `aria-pressed`). */\n  onSelect?: () => void;\n  /** Shown in place of the image when `src` is missing / fails. */\n  fallback?: JSX.Element;\n  /** A larger preview shown in a floating popup after a hover delay. */\n  hoverPreview?: JSX.Element | string;\n  /** Top-left overlay slot (e.g. a favourite star). */\n  topStart?: JSX.Element;\n  /** Top-right overlay slot (e.g. a kebab menu). */\n  topEnd?: JSX.Element;\n  lazy?: boolean;\n  disabled?: boolean;\n  /** Delay (ms) before the hover preview appears. Default 350. */\n  hoverDelay?: number;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * A selectable gallery card: image with an `onError` fallback + optional lazy\n * load, keyboard/`aria-pressed` selection, corner action slots, and a delayed\n * floating hover-preview. The generic gallery-card behaviour every app rebuilds\n * on top of the primitives. SSR-safe — the hover preview is client-only.\n */\nexport function ThumbCard(props: ThumbCardProps): JSX.Element {\n  const merged = mergeProps({ lazy: true, hoverDelay: 350 }, props);\n  const [local, rest] = splitProps(merged, [\n    \"src\",\n    \"caption\",\n    \"selected\",\n    \"onSelect\",\n    \"fallback\",\n    \"hoverPreview\",\n    \"topStart\",\n    \"topEnd\",\n    \"lazy\",\n    \"disabled\",\n    \"hoverDelay\",\n    \"class\",\n    \"ref\",\n  ]);\n\n  // Read each slot once: markup passed as a prop is created anew on every read,\n  // and during hydration a copy the server never rendered has no DOM node.\n  // (The hover preview is read on hover only, after hydration.)\n  const topStart = children(() => local.topStart);\n  const topEnd = children(() => local.topEnd);\n  const caption = children(() => local.caption);\n\n  const floating = createFloating({ placement: () => \"right\" });\n  const [previewOpen, setPreviewOpen] = createSignal(false);\n  let hoverTimer: ReturnType<typeof setTimeout> | undefined;\n\n  const clearTimer = (): void => {\n    if (hoverTimer) {\n      clearTimeout(hoverTimer);\n      hoverTimer = undefined;\n    }\n  };\n  const onEnter = (): void => {\n    if (local.hoverPreview == null || local.disabled) return;\n    clearTimer();\n    hoverTimer = setTimeout(() => setPreviewOpen(true), local.hoverDelay);\n  };\n  const onLeave = (): void => {\n    clearTimer();\n    setPreviewOpen(false);\n  };\n  onCleanup(clearTimer);\n\n  const interactive = (): boolean => !!local.onSelect && !local.disabled;\n  const onKeyDown: JSX.EventHandler<HTMLDivElement, KeyboardEvent> = (event) => {\n    if (interactive() && (event.key === \"Enter\" || event.key === \" \")) {\n      event.preventDefault();\n      local.onSelect?.();\n    }\n  };\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref, (el) => floating.setReference(el))}\n      class={cn(\"smwb-thumb-card\", local.class, {\n        \"smwb-thumb-card--selected\": local.selected,\n        \"smwb-thumb-card--disabled\": local.disabled,\n        \"smwb-thumb-card--interactive\": interactive(),\n      })}\n      role={interactive() ? \"button\" : undefined}\n      tabindex={interactive() ? 0 : undefined}\n      aria-pressed={local.onSelect ? (local.selected ?? false) : undefined}\n      aria-disabled={local.disabled || undefined}\n      onClick={interactive() ? () => local.onSelect?.() : undefined}\n      onKeyDown={onKeyDown}\n      onMouseEnter={onEnter}\n      onMouseLeave={onLeave}\n    >\n      <div class=\"smwb-thumb-card__media\">\n        <LazyImage src={local.src} lazy={local.lazy} fallback={local.fallback} />\n        <Show when={topStart()}>\n          <div class=\"smwb-thumb-card__slot smwb-thumb-card__slot--start\">{topStart()}</div>\n        </Show>\n        <Show when={topEnd()}>\n          <div class=\"smwb-thumb-card__slot smwb-thumb-card__slot--end\">{topEnd()}</div>\n        </Show>\n      </div>\n      <Show when={caption()}>\n        <div class=\"smwb-thumb-card__caption\">{caption()}</div>\n      </Show>\n      <Show when={previewOpen() && !isServer}>\n        <Portal>\n          <div class=\"smwb-thumb-card__preview\" ref={(el) => floating.setFloating(el)} style={floating.floatingStyles()}>\n            {typeof local.hoverPreview === \"string\" ? (\n              <img src={local.hoverPreview} alt=\"\" />\n            ) : (\n              (local.hoverPreview as JSX.Element)\n            )}\n          </div>\n        </Portal>\n      </Show>\n    </div>\n  );\n}\n\nexport default ThumbCard;\n"],"mappings":"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","names":[],"file":"thumbCard.jsx"}

package/dist/source/components/dataDisplay/timeline/index.js

@@ -0,0 +1,8 @@
+import { Timeline, TimelineGroup, TimelineItem, default as default2 } from "./timeline";
+export {
+  Timeline,
+  TimelineGroup,
+  TimelineItem,
+  default2 as default
+};
+//# sourceMappingURL=index.js.map

package/dist/source/components/dataDisplay/timeline/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/dataDisplay/timeline/index.ts"],
+  "sourcesContent": ["export { Timeline, TimelineGroup, TimelineItem, default } from \"./timeline\";\nexport type { TimelineProps, TimelineGroupProps, TimelineItemProps, TimelineTone } from \"./timeline\";\n"],
+  "mappings": "AAAA,SAAS,UAAU,eAAe,cAAc,WAAAA,gBAAe;",
+  "names": ["default"]
+}

package/dist/source/components/dataDisplay/timeline/timeline.jsx

@@ -0,0 +1,66 @@
+import "@smwb/ui-styles/less/tokens.entry.less";
+import "@smwb/ui-styles/less/components/timeline/timeline.entry.less";
+import { Show, children, mergeProps, splitProps } from "solid-js";
+import cn from "clsx";
+import { Icon } from "../../base/icon";
+import { mergeRefs } from "../../../primitives/mergeRefs";
+function Timeline(props) {
+  const [local, rest] = splitProps(props, ["class", "dense", "stickyLabels", "children", "ref"]);
+  return <ol
+    {...rest}
+    ref={mergeRefs(local.ref)}
+    class={cn(
+      "smwb-timeline",
+      { "smwb-timeline_dense": local.dense, "smwb-timeline_sticky-labels": local.stickyLabels },
+      local.class
+    )}
+  >
+      {local.children}
+    </ol>;
+}
+function TimelineGroup(props) {
+  const [local, rest] = splitProps(props, ["class", "label", "children", "ref"]);
+  return <li {...rest} ref={mergeRefs(local.ref)} class={cn("smwb-timeline__group", local.class)}>
+      <div class="smwb-timeline__label">{local.label}</div>
+      <ol class="smwb-timeline__items">{local.children}</ol>
+    </li>;
+}
+function TimelineItem(props) {
+  const merged = mergeProps({ tone: "neutral" }, props);
+  const [local, rest] = splitProps(merged, ["class", "title", "meta", "time", "icon", "tone", "children", "ref"]);
+  const meta = children(() => local.meta);
+  const time = children(() => local.time);
+  const icon = children(() => local.icon);
+  const content = children(() => local.children);
+  return <li
+    {...rest}
+    ref={mergeRefs(local.ref)}
+    class={cn("smwb-timeline__item", `smwb-timeline__item_tone-${local.tone}`, local.class)}
+  >
+      <span class="smwb-timeline__mark" aria-hidden="true">
+        <Show when={icon()} fallback={<span class="smwb-timeline__dot" />}>
+          {(resolved) => typeof resolved() === "string" ? <Icon name={resolved()} size={16} /> : resolved()}
+        </Show>
+      </span>
+      <div class="smwb-timeline__body">
+        <div class="smwb-timeline__title">{local.title}</div>
+        <Show when={meta()}>
+          <div class="smwb-timeline__meta">{meta()}</div>
+        </Show>
+        <Show when={content()}>
+          <div class="smwb-timeline__content">{content()}</div>
+        </Show>
+      </div>
+      <Show when={time()}>
+        <div class="smwb-timeline__time">{time()}</div>
+      </Show>
+    </li>;
+}
+var timeline_default = Timeline;
+export {
+  Timeline,
+  TimelineGroup,
+  TimelineItem,
+  timeline_default as default
+};
+//# sourceMappingURL=timeline.jsx.map

package/dist/source/components/dataDisplay/timeline/timeline.jsx.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/dataDisplay/timeline/timeline.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/timeline/timeline.entry.less\";\nimport { type JSX, type ParentProps, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type TimelineTone = \"neutral\" | \"info\" | \"success\" | \"warning\" | \"error\";\n\nexport interface TimelineProps extends JSX.HTMLAttributes<HTMLOListElement> {\n  /** Tighter rows, for side panels. */\n  dense?: boolean;\n  /** Keep a group's label in view while its events scroll past (in a scrolling container). */\n  stickyLabels?: boolean;\n  ref?: Ref<HTMLOListElement>;\n}\n\nexport interface TimelineGroupProps extends Omit<JSX.HTMLAttributes<HTMLLIElement>, \"title\"> {\n  /** What groups the events — a day, a week, a stage. */\n  label: JSX.Element;\n  ref?: Ref<HTMLLIElement>;\n}\n\nexport interface TimelineItemProps extends Omit<JSX.HTMLAttributes<HTMLLIElement>, \"title\"> {\n  /** The event itself: a line of text, usually a link. */\n  title: JSX.Element;\n  /** A second line: who, what kind, where. */\n  meta?: JSX.Element;\n  /** When: a time or a date, at the end of the row. */\n  time?: JSX.Element;\n  /** The event's mark on the line: a Material Symbols name or an element. A dot without it. */\n  icon?: string | JSX.Element;\n  /** Colour of the mark. */\n  tone?: TimelineTone;\n  ref?: Ref<HTMLLIElement>;\n}\n\n/**\n * Events on a line, newest or oldest first as given: TimelineItem children,\n * optionally grouped by TimelineGroup (a day, a week).\n */\nexport function Timeline(props: ParentProps<TimelineProps>): JSX.Element {\n  const [local, rest] = splitProps(props, [\"class\", \"dense\", \"stickyLabels\", \"children\", \"ref\"]);\n  return (\n    <ol\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\n        \"smwb-timeline\",\n        { \"smwb-timeline_dense\": local.dense, \"smwb-timeline_sticky-labels\": local.stickyLabels },\n        local.class\n      )}\n    >\n      {local.children}\n    </ol>\n  );\n}\n\n/** A labelled run of events: the label, then its TimelineItem children on the line. */\nexport function TimelineGroup(props: ParentProps<TimelineGroupProps>): JSX.Element {\n  const [local, rest] = splitProps(props, [\"class\", \"label\", \"children\", \"ref\"]);\n  return (\n    <li {...rest} ref={mergeRefs(local.ref)} class={cn(\"smwb-timeline__group\", local.class)}>\n      <div class=\"smwb-timeline__label\">{local.label}</div>\n      <ol class=\"smwb-timeline__items\">{local.children}</ol>\n    </li>\n  );\n}\n\n/** One event: its mark on the line, the title and meta lines, the time; children below. */\nexport function TimelineItem(props: ParentProps<TimelineItemProps>): JSX.Element {\n  const merged = mergeProps({ tone: \"neutral\" as TimelineTone }, props);\n  const [local, rest] = splitProps(merged, [\"class\", \"title\", \"meta\", \"time\", \"icon\", \"tone\", \"children\", \"ref\"]);\n\n  // Read each slot once: markup passed as a prop is created anew on every read,\n  // and during hydration the copy made for a <Show> test has no server DOM node.\n  const meta = children(() => local.meta);\n  const time = children(() => local.time);\n  const icon = children(() => local.icon);\n  const content = children(() => local.children);\n\n  return (\n    <li\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-timeline__item\", `smwb-timeline__item_tone-${local.tone}`, local.class)}\n    >\n      <span class=\"smwb-timeline__mark\" aria-hidden=\"true\">\n        <Show when={icon()} fallback={<span class=\"smwb-timeline__dot\" />}>\n          {(resolved) => (typeof resolved() === \"string\" ? <Icon name={resolved() as string} size={16} /> : resolved())}\n        </Show>\n      </span>\n      <div class=\"smwb-timeline__body\">\n        <div class=\"smwb-timeline__title\">{local.title}</div>\n        <Show when={meta()}>\n          <div class=\"smwb-timeline__meta\">{meta()}</div>\n        </Show>\n        <Show when={content()}>\n          <div class=\"smwb-timeline__content\">{content()}</div>\n        </Show>\n      </div>\n      <Show when={time()}>\n        <div class=\"smwb-timeline__time\">{time()}</div>\n      </Show>\n    </li>\n  );\n}\n\nexport default Timeline;\n"],"mappings":"AAAA,OAAO;AACP,OAAO;AACP,SAAqC,MAAM,UAAU,YAAY,kBAAkB;AACnF,OAAO,QAAQ;AACf,SAAS,YAAY;AACrB,SAAS,iBAA2B;AAoC7B,SAAS,SAAS,OAAgD;AACvE,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO,CAAC,SAAS,SAAS,gBAAgB,YAAY,KAAK,CAAC;AAC7F,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,OAAO;AAAA,MACL;AAAA,MACA,EAAE,uBAAuB,MAAM,OAAO,+BAA+B,MAAM,aAAa;AAAA,MACxF,MAAM;AAAA,IACR;AAAA,GACD;AAAA,OACE,MAAM,SAAS;AAAA,IAClB,EAVC;AAYL;AAGO,SAAS,cAAc,OAAqD;AACjF,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO,CAAC,SAAS,SAAS,YAAY,KAAK,CAAC;AAC7E,SACE,CAAC,OAAO,MAAM,KAAK,UAAU,MAAM,GAAG,GAAG,OAAO,GAAG,wBAAwB,MAAM,KAAK,GAAG;AAAA,MACvF,CAAC,IAAI,MAAM,wBAAwB,MAAM,MAAM,EAA9C,IAAoD;AAAA,MACrD,CAAC,GAAG,MAAM,wBAAwB,MAAM,SAAS,EAAhD,GAAqD;AAAA,IACxD,EAHC;AAKL;AAGO,SAAS,aAAa,OAAoD;AAC/E,QAAM,SAAS,WAAW,EAAE,MAAM,UAA0B,GAAG,KAAK;AACpE,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ,CAAC,SAAS,SAAS,QAAQ,QAAQ,QAAQ,QAAQ,YAAY,KAAK,CAAC;AAI9G,QAAM,OAAO,SAAS,MAAM,MAAM,IAAI;AACtC,QAAM,OAAO,SAAS,MAAM,MAAM,IAAI;AACtC,QAAM,OAAO,SAAS,MAAM,MAAM,IAAI;AACtC,QAAM,UAAU,SAAS,MAAM,MAAM,QAAQ;AAE7C,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,OAAO,GAAG,uBAAuB,4BAA4B,MAAM,IAAI,IAAI,MAAM,KAAK;AAAA,GACvF;AAAA,MACC,CAAC,KAAK,MAAM,sBAAsB,YAAY,OAAO;AAAA,QACnD,CAAC,KAAK,MAAM,KAAK,GAAG,UAAU,CAAC,KAAK,MAAM,qBAAqB,IAAI;AAAA,WAChE,CAAC,aAAc,OAAO,SAAS,MAAM,WAAW,CAAC,KAAK,MAAM,SAAS,GAAa,MAAM,IAAI,KAAK,SAAS,EAAG;AAAA,QAChH,EAFC,KAEM;AAAA,MACT,EAJC,KAIM;AAAA,MACP,CAAC,IAAI,MAAM,sBAAsB;AAAA,QAC/B,CAAC,IAAI,MAAM,wBAAwB,MAAM,MAAM,EAA9C,IAAoD;AAAA,QACrD,CAAC,KAAK,MAAM,KAAK,GAAG;AAAA,UAClB,CAAC,IAAI,MAAM,uBAAuB,KAAK,EAAE,EAAxC,IAA8C;AAAA,QACjD,EAFC,KAEM;AAAA,QACP,CAAC,KAAK,MAAM,QAAQ,GAAG;AAAA,UACrB,CAAC,IAAI,MAAM,0BAA0B,QAAQ,EAAE,EAA9C,IAAoD;AAAA,QACvD,EAFC,KAEM;AAAA,MACT,EARC,IAQK;AAAA,MACN,CAAC,KAAK,MAAM,KAAK,GAAG;AAAA,QAClB,CAAC,IAAI,MAAM,uBAAuB,KAAK,EAAE,EAAxC,IAA8C;AAAA,MACjD,EAFC,KAEM;AAAA,IACT,EAtBC;AAwBL;AAEA,IAAO,mBAAQ;","names":[],"file":"timeline.jsx"}

package/dist/source/components/dataDisplay/treeView/treeView.jsx

@@ -1,3 +1,4 @@
+import "@smwb/ui-styles/less/tokens.entry.less";
 import "@smwb/ui-styles/less/components/treeView/treeView.entry.less";
 import { For, Show, createContext, createSignal, mergeProps, splitProps, useContext } from "solid-js";
 import cn from "clsx";

package/dist/source/components/dataDisplay/treeView/treeView.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/dataDisplay/treeView/treeView.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/components/treeView/treeView.entry.less\";\nimport { type Accessor, type JSX, For, Show, createContext, createSignal, mergeProps, splitProps, useContext } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface ITreeNodeItem {\n  /** Stable identifier. Falls back to the positional path when omitted. */\n  id?: string;\n  label: string;\n  children?: ITreeNodeItem[];\n  /** Hint that the node is expandable even before its children are loaded. */\n  hasChildren?: boolean;\n}\n\nexport interface TreeViewProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n  nodeIcon?: { opened?: string; closed?: string };\n  listIcon?: string;\n  data: ITreeNodeItem[];\n  expanded?: string[];\n  defaultExpanded?: string[];\n  onExpandedChange?: (expanded: string[]) => void;\n  selected?: string[];\n  defaultSelected?: string[];\n  /** Reports the full selection plus, for user toggles, the node that just changed. */\n  onSelectedChange?: (selected: string[], changed?: { id: string; selected: boolean }) => void;\n  selectable?: boolean;\n  checkboxes?: boolean;\n  renderLabel?: (item: ITreeNodeItem, nodeId: string) => JSX.Element;\n  loadChildren?: (item: ITreeNodeItem, nodeId: string) => Promise<ITreeNodeItem[]>;\n  ref?: Ref<HTMLDivElement>;\n}\n\ninterface TreeContextValue {\n  expandedIds: Accessor<string[]>;\n  selectedIds: Accessor<string[]>;\n  loadedChildren: Accessor<Record<string, ITreeNodeItem[]>>;\n  loadingIds: Accessor<string[]>;\n  toggleExpanded: (id: string) => void;\n  setOpen: (id: string, open: boolean) => void;\n  toggleSelected: (id: string) => void;\n  ensureLoaded: (item: ITreeNodeItem, nodeId: string) => void;\n  selectable: boolean;\n  checkboxes: boolean;\n  nodeIcon: { opened?: string; closed?: string };\n  listIcon: string;\n  renderLabel: ((item: ITreeNodeItem, nodeId: string) => JSX.Element) | undefined;\n  hasLoader: boolean;\n}\n\nconst TreeContext = createContext<TreeContextValue>();\n\nfunction TreeNode(props: { item: ITreeNodeItem; path: string }): JSX.Element {\n  const ctx = useContext(TreeContext)!;\n  const nodeId = (): string => props.item.id ?? props.path;\n  const resolvedChildren = (): ITreeNodeItem[] | undefined => props.item.children ?? ctx.loadedChildren()[nodeId()];\n  const isLazy = (): boolean => ctx.hasLoader && (!!props.item.hasChildren || !!ctx.loadedChildren()[nodeId()]);\n  const hasChildNodes = (): boolean => (!!resolvedChildren() && (resolvedChildren()?.length ?? 0) > 0) || isLazy();\n  const isOpen = (): boolean => ctx.expandedIds().includes(nodeId());\n  const isSelected = (): boolean => ctx.selectedIds().includes(nodeId());\n  const isLoading = (): boolean => ctx.loadingIds().includes(nodeId());\n\n  const onLabelClick = (): void => {\n    if (hasChildNodes()) {\n      if (!isOpen()) ctx.ensureLoaded(props.item, nodeId());\n      ctx.toggleExpanded(nodeId());\n    }\n    if (ctx.selectable) ctx.toggleSelected(nodeId());\n  };\n\n  const onKeyDown: JSX.EventHandler<HTMLSpanElement, KeyboardEvent> = (event) => {\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n      onLabelClick();\n    } else if (event.key === \"ArrowRight\" && hasChildNodes()) {\n      ctx.ensureLoaded(props.item, nodeId());\n      ctx.setOpen(nodeId(), true);\n    } else if (event.key === \"ArrowLeft\" && hasChildNodes()) {\n      ctx.setOpen(nodeId(), false);\n    }\n  };\n\n  return (\n    <div\n      class={cn(\"smwb-tree__node\", { \"smwb-tree__node_selected\": isSelected() })}\n      role=\"treeitem\"\n      aria-expanded={hasChildNodes() ? isOpen() : undefined}\n      aria-selected={ctx.selectable || ctx.checkboxes ? isSelected() : undefined}\n    >\n      <span class=\"smwb-tree__node__content\" onClick={onLabelClick} onKeyDown={onKeyDown} tabindex={0} role=\"button\">\n        <Show when={ctx.checkboxes}>\n          <input\n            type=\"checkbox\"\n            class=\"smwb-tree__node__checkbox\"\n            checked={isSelected()}\n            onClick={(e) => e.stopPropagation()}\n            onChange={() => ctx.toggleSelected(nodeId())}\n            aria-label={props.item.label}\n          />\n        </Show>\n        <span class=\"smwb-tree__node__label\">\n          <Show when={hasChildNodes()} fallback={<Icon name={ctx.listIcon} size={20} />}>\n            <Icon name={isOpen() ? ctx.nodeIcon.opened ?? \"folder_open\" : ctx.nodeIcon.closed ?? \"folder\"} fill={1} size={20} />\n          </Show>\n          {ctx.renderLabel ? ctx.renderLabel(props.item, nodeId()) : props.item.label}\n        </span>\n      </span>\n      <Show when={hasChildNodes() && isOpen()}>\n        <div role=\"group\">\n          <Show\n            when={!(isLoading() && !resolvedChildren())}\n            fallback={\n              <div class=\"smwb-tree__node__loading\" role=\"status\">\n                Загрузка…\n              </div>\n            }\n          >\n            <For each={resolvedChildren() ?? []}>\n              {(child, idx) => <TreeNode item={child} path={`${props.path}.${idx()}`} />}\n            </For>\n          </Show>\n        </div>\n      </Show>\n    </div>\n  );\n}\n\nexport function TreeView(props: TreeViewProps): JSX.Element {\n  const merged = mergeProps(\n    {\n      listIcon: \"draft\",\n      nodeIcon: { closed: \"folder\", opened: \"folder_open\" } as { opened?: string; closed?: string },\n      data: [] as ITreeNodeItem[],\n      defaultExpanded: [] as string[],\n      defaultSelected: [] as string[],\n      selectable: false,\n      checkboxes: false,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"listIcon\",\n    \"nodeIcon\",\n    \"data\",\n    \"expanded\",\n    \"defaultExpanded\",\n    \"onExpandedChange\",\n    \"selected\",\n    \"defaultSelected\",\n    \"onSelectedChange\",\n    \"selectable\",\n    \"checkboxes\",\n    \"renderLabel\",\n    \"loadChildren\",\n    \"ref\",\n  ]);\n\n  const [loadedChildren, setLoadedChildren] = createSignal<Record<string, ITreeNodeItem[]>>({});\n  const [loadingIds, setLoadingIds] = createSignal<string[]>([]);\n  const [expandedIds, setExpandedIds] = createControllableState<string[]>({\n    value: () => local.expanded,\n    defaultValue: local.defaultExpanded,\n    onChange: (next) => local.onExpandedChange?.(next),\n  });\n  let lastToggled: { id: string; selected: boolean } | undefined;\n  const [selectedIds, setSelectedIds] = createControllableState<string[]>({\n    value: () => local.selected,\n    defaultValue: local.defaultSelected,\n    onChange: (next) => {\n      // createControllableState calls onChange synchronously from the setter,\n      // so lastToggled still refers to the toggle that caused this change.\n      const changed = lastToggled;\n      lastToggled = undefined;\n      local.onSelectedChange?.(next, changed);\n    },\n  });\n\n  const toggleExpanded = (id: string): void =>\n    setExpandedIds((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));\n\n  const setOpen = (id: string, open: boolean): void =>\n    setExpandedIds((prev) => {\n      const has = prev.includes(id);\n      if (open && !has) return [...prev, id];\n      if (!open && has) return prev.filter((x) => x !== id);\n      return prev;\n    });\n\n  const toggleSelected = (id: string): void => {\n    lastToggled = { id, selected: !selectedIds().includes(id) };\n    setSelectedIds((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));\n  };\n\n  const ensureLoaded = (item: ITreeNodeItem, nodeId: string): void => {\n    if (!local.loadChildren || loadedChildren()[nodeId] || (item.children && item.children.length > 0)) return;\n    setLoadingIds((prev) => (prev.includes(nodeId) ? prev : [...prev, nodeId]));\n    void local\n      .loadChildren(item, nodeId)\n      .then((children) => setLoadedChildren((prev) => ({ ...prev, [nodeId]: children })))\n      .finally(() => setLoadingIds((prev) => prev.filter((x) => x !== nodeId)));\n  };\n\n  const contextValue: TreeContextValue = {\n    expandedIds,\n    selectedIds,\n    loadedChildren,\n    loadingIds,\n    toggleExpanded,\n    setOpen,\n    toggleSelected,\n    ensureLoaded,\n    get selectable() {\n      return local.selectable;\n    },\n    get checkboxes() {\n      return local.checkboxes;\n    },\n    get nodeIcon() {\n      return local.nodeIcon;\n    },\n    get listIcon() {\n      return local.listIcon;\n    },\n    get renderLabel() {\n      return local.renderLabel;\n    },\n    get hasLoader() {\n      return !!local.loadChildren;\n    },\n  };\n\n  return (\n    <TreeContext.Provider value={contextValue}>\n      <div {...rest} data-testid=\"tree-view\" ref={mergeRefs(local.ref)} role=\"tree\" class={cn(\"smwb-tree\", local.class)}>\n        <For each={local.data}>\n          {(node, idx) => (\n            <div class=\"smwb-tree__wrapper\" role=\"presentation\">\n              <TreeNode item={node} path={`${idx()}`} />\n            </div>\n          )}\n        </For>\n      </div>\n    </TreeContext.Provider>\n  );\n}\n\nexport default TreeView;\n"],"mappings":"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","names":[],"file":"treeView.jsx"}
+{"version":3,"sources":["../../../../../src/components/dataDisplay/treeView/treeView.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/treeView/treeView.entry.less\";\nimport { type Accessor, type JSX, For, Show, createContext, createSignal, mergeProps, splitProps, useContext } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface ITreeNodeItem {\n  /** Stable identifier. Falls back to the positional path when omitted. */\n  id?: string;\n  label: string;\n  children?: ITreeNodeItem[];\n  /** Hint that the node is expandable even before its children are loaded. */\n  hasChildren?: boolean;\n}\n\nexport interface TreeViewProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n  nodeIcon?: { opened?: string; closed?: string };\n  listIcon?: string;\n  data: ITreeNodeItem[];\n  expanded?: string[];\n  defaultExpanded?: string[];\n  onExpandedChange?: (expanded: string[]) => void;\n  selected?: string[];\n  defaultSelected?: string[];\n  /** Reports the full selection plus, for user toggles, the node that just changed. */\n  onSelectedChange?: (selected: string[], changed?: { id: string; selected: boolean }) => void;\n  selectable?: boolean;\n  checkboxes?: boolean;\n  renderLabel?: (item: ITreeNodeItem, nodeId: string) => JSX.Element;\n  loadChildren?: (item: ITreeNodeItem, nodeId: string) => Promise<ITreeNodeItem[]>;\n  ref?: Ref<HTMLDivElement>;\n}\n\ninterface TreeContextValue {\n  expandedIds: Accessor<string[]>;\n  selectedIds: Accessor<string[]>;\n  loadedChildren: Accessor<Record<string, ITreeNodeItem[]>>;\n  loadingIds: Accessor<string[]>;\n  toggleExpanded: (id: string) => void;\n  setOpen: (id: string, open: boolean) => void;\n  toggleSelected: (id: string) => void;\n  ensureLoaded: (item: ITreeNodeItem, nodeId: string) => void;\n  selectable: boolean;\n  checkboxes: boolean;\n  nodeIcon: { opened?: string; closed?: string };\n  listIcon: string;\n  renderLabel: ((item: ITreeNodeItem, nodeId: string) => JSX.Element) | undefined;\n  hasLoader: boolean;\n}\n\nconst TreeContext = createContext<TreeContextValue>();\n\nfunction TreeNode(props: { item: ITreeNodeItem; path: string }): JSX.Element {\n  const ctx = useContext(TreeContext)!;\n  const nodeId = (): string => props.item.id ?? props.path;\n  const resolvedChildren = (): ITreeNodeItem[] | undefined => props.item.children ?? ctx.loadedChildren()[nodeId()];\n  const isLazy = (): boolean => ctx.hasLoader && (!!props.item.hasChildren || !!ctx.loadedChildren()[nodeId()]);\n  const hasChildNodes = (): boolean => (!!resolvedChildren() && (resolvedChildren()?.length ?? 0) > 0) || isLazy();\n  const isOpen = (): boolean => ctx.expandedIds().includes(nodeId());\n  const isSelected = (): boolean => ctx.selectedIds().includes(nodeId());\n  const isLoading = (): boolean => ctx.loadingIds().includes(nodeId());\n\n  const onLabelClick = (): void => {\n    if (hasChildNodes()) {\n      if (!isOpen()) ctx.ensureLoaded(props.item, nodeId());\n      ctx.toggleExpanded(nodeId());\n    }\n    if (ctx.selectable) ctx.toggleSelected(nodeId());\n  };\n\n  const onKeyDown: JSX.EventHandler<HTMLSpanElement, KeyboardEvent> = (event) => {\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n      onLabelClick();\n    } else if (event.key === \"ArrowRight\" && hasChildNodes()) {\n      ctx.ensureLoaded(props.item, nodeId());\n      ctx.setOpen(nodeId(), true);\n    } else if (event.key === \"ArrowLeft\" && hasChildNodes()) {\n      ctx.setOpen(nodeId(), false);\n    }\n  };\n\n  return (\n    <div\n      class={cn(\"smwb-tree__node\", { \"smwb-tree__node_selected\": isSelected() })}\n      role=\"treeitem\"\n      aria-expanded={hasChildNodes() ? isOpen() : undefined}\n      aria-selected={ctx.selectable || ctx.checkboxes ? isSelected() : undefined}\n    >\n      <span class=\"smwb-tree__node__content\" onClick={onLabelClick} onKeyDown={onKeyDown} tabindex={0} role=\"button\">\n        <Show when={ctx.checkboxes}>\n          <input\n            type=\"checkbox\"\n            class=\"smwb-tree__node__checkbox\"\n            checked={isSelected()}\n            onClick={(e) => e.stopPropagation()}\n            onChange={() => ctx.toggleSelected(nodeId())}\n            aria-label={props.item.label}\n          />\n        </Show>\n        <span class=\"smwb-tree__node__label\">\n          <Show when={hasChildNodes()} fallback={<Icon name={ctx.listIcon} size={20} />}>\n            <Icon name={isOpen() ? ctx.nodeIcon.opened ?? \"folder_open\" : ctx.nodeIcon.closed ?? \"folder\"} fill={1} size={20} />\n          </Show>\n          {ctx.renderLabel ? ctx.renderLabel(props.item, nodeId()) : props.item.label}\n        </span>\n      </span>\n      <Show when={hasChildNodes() && isOpen()}>\n        <div role=\"group\">\n          <Show\n            when={!(isLoading() && !resolvedChildren())}\n            fallback={\n              <div class=\"smwb-tree__node__loading\" role=\"status\">\n                Загрузка…\n              </div>\n            }\n          >\n            <For each={resolvedChildren() ?? []}>\n              {(child, idx) => <TreeNode item={child} path={`${props.path}.${idx()}`} />}\n            </For>\n          </Show>\n        </div>\n      </Show>\n    </div>\n  );\n}\n\nexport function TreeView(props: TreeViewProps): JSX.Element {\n  const merged = mergeProps(\n    {\n      listIcon: \"draft\",\n      nodeIcon: { closed: \"folder\", opened: \"folder_open\" } as { opened?: string; closed?: string },\n      data: [] as ITreeNodeItem[],\n      defaultExpanded: [] as string[],\n      defaultSelected: [] as string[],\n      selectable: false,\n      checkboxes: false,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"listIcon\",\n    \"nodeIcon\",\n    \"data\",\n    \"expanded\",\n    \"defaultExpanded\",\n    \"onExpandedChange\",\n    \"selected\",\n    \"defaultSelected\",\n    \"onSelectedChange\",\n    \"selectable\",\n    \"checkboxes\",\n    \"renderLabel\",\n    \"loadChildren\",\n    \"ref\",\n  ]);\n\n  const [loadedChildren, setLoadedChildren] = createSignal<Record<string, ITreeNodeItem[]>>({});\n  const [loadingIds, setLoadingIds] = createSignal<string[]>([]);\n  const [expandedIds, setExpandedIds] = createControllableState<string[]>({\n    value: () => local.expanded,\n    defaultValue: local.defaultExpanded,\n    onChange: (next) => local.onExpandedChange?.(next),\n  });\n  let lastToggled: { id: string; selected: boolean } | undefined;\n  const [selectedIds, setSelectedIds] = createControllableState<string[]>({\n    value: () => local.selected,\n    defaultValue: local.defaultSelected,\n    onChange: (next) => {\n      // createControllableState calls onChange synchronously from the setter,\n      // so lastToggled still refers to the toggle that caused this change.\n      const changed = lastToggled;\n      lastToggled = undefined;\n      local.onSelectedChange?.(next, changed);\n    },\n  });\n\n  const toggleExpanded = (id: string): void =>\n    setExpandedIds((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));\n\n  const setOpen = (id: string, open: boolean): void =>\n    setExpandedIds((prev) => {\n      const has = prev.includes(id);\n      if (open && !has) return [...prev, id];\n      if (!open && has) return prev.filter((x) => x !== id);\n      return prev;\n    });\n\n  const toggleSelected = (id: string): void => {\n    lastToggled = { id, selected: !selectedIds().includes(id) };\n    setSelectedIds((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));\n  };\n\n  const ensureLoaded = (item: ITreeNodeItem, nodeId: string): void => {\n    if (!local.loadChildren || loadedChildren()[nodeId] || (item.children && item.children.length > 0)) return;\n    setLoadingIds((prev) => (prev.includes(nodeId) ? prev : [...prev, nodeId]));\n    void local\n      .loadChildren(item, nodeId)\n      .then((children) => setLoadedChildren((prev) => ({ ...prev, [nodeId]: children })))\n      .finally(() => setLoadingIds((prev) => prev.filter((x) => x !== nodeId)));\n  };\n\n  const contextValue: TreeContextValue = {\n    expandedIds,\n    selectedIds,\n    loadedChildren,\n    loadingIds,\n    toggleExpanded,\n    setOpen,\n    toggleSelected,\n    ensureLoaded,\n    get selectable() {\n      return local.selectable;\n    },\n    get checkboxes() {\n      return local.checkboxes;\n    },\n    get nodeIcon() {\n      return local.nodeIcon;\n    },\n    get listIcon() {\n      return local.listIcon;\n    },\n    get renderLabel() {\n      return local.renderLabel;\n    },\n    get hasLoader() {\n      return !!local.loadChildren;\n    },\n  };\n\n  return (\n    <TreeContext.Provider value={contextValue}>\n      <div {...rest} data-testid=\"tree-view\" ref={mergeRefs(local.ref)} role=\"tree\" class={cn(\"smwb-tree\", local.class)}>\n        <For each={local.data}>\n          {(node, idx) => (\n            <div class=\"smwb-tree__wrapper\" role=\"presentation\">\n              <TreeNode item={node} path={`${idx()}`} />\n            </div>\n          )}\n        </For>\n      </div>\n    </TreeContext.Provider>\n  );\n}\n\nexport default TreeView;\n"],"mappings":"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","names":[],"file":"treeView.jsx"}

package/dist/source/components/dataDisplay/typography/typography.jsx

@@ -1,3 +1,4 @@
+import "@smwb/ui-styles/less/tokens.entry.less";
 import "@smwb/ui-styles/less/components/typography/typography.entry.less";
 import { mergeProps, splitProps } from "solid-js";
 import { Dynamic } from "solid-js/web";
@@ -10,8 +11,9 @@ const defaultTag = {
   h4: "h4",
   h5: "h5",
   h6: "h6",
-  subtitle1: "h6",
-  subtitle2: "h6",
+  // A subtitle is not a heading: as h6 it would break the page's outline.
+  subtitle1: "p",
+  subtitle2: "p",
   body1: "p",
   body2: "p",
   caption: "span",
@@ -26,11 +28,21 @@ function Typography(props) {
     "align",
     "gutterBottom",
     "noWrap",
+    "lines",
+    "tabularNums",
     "component",
     "class",
+    "style",
     "children",
     "ref"
   ]);
+  const clamped = () => local.lines !== void 0 && local.lines > 0;
+  const style = () => {
+    if (!clamped()) return local.style;
+    const lines = String(local.lines);
+    if (typeof local.style === "string") return `${local.style};--smwb-typography-lines:${lines}`;
+    return { ...local.style, "--smwb-typography-lines": lines };
+  };
   return <Dynamic
     component={local.component ?? defaultTag[local.variant]}
     ref={mergeRefs(local.ref)}
@@ -41,10 +53,13 @@ function Typography(props) {
       local.align && `smwb-typography_align-${local.align}`,
       {
         "smwb-typography_gutter": local.gutterBottom,
-        "smwb-typography_nowrap": local.noWrap
+        "smwb-typography_nowrap": local.noWrap,
+        "smwb-typography_clamp": clamped(),
+        "smwb-typography_tabular-nums": local.tabularNums
       },
       local.class
     )}
+    style={style()}
     {...rest}
   >
       {local.children}

package/dist/source/components/dataDisplay/typography/typography.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/dataDisplay/typography/typography.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/components/typography/typography.entry.less\";\nimport { 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 TypographyVariant =\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"h5\"\n  | \"h6\"\n  | \"subtitle1\"\n  | \"subtitle2\"\n  | \"body1\"\n  | \"body2\"\n  | \"caption\"\n  | \"overline\"\n  | \"button\";\n\nexport type TypographyColor =\n  | \"inherit\"\n  | \"primary\"\n  | \"secondary\"\n  | \"error\"\n  | \"success\"\n  | \"warning\"\n  | \"info\"\n  | \"textPrimary\"\n  | \"textSecondary\"\n  | \"disabled\";\n\nconst defaultTag: Record<TypographyVariant, string> = {\n  h1: \"h1\",\n  h2: \"h2\",\n  h3: \"h3\",\n  h4: \"h4\",\n  h5: \"h5\",\n  h6: \"h6\",\n  subtitle1: \"h6\",\n  subtitle2: \"h6\",\n  body1: \"p\",\n  body2: \"p\",\n  caption: \"span\",\n  overline: \"span\",\n  button: \"span\",\n};\n\nexport interface TypographyProps extends JSX.HTMLAttributes<HTMLElement> {\n  variant?: TypographyVariant;\n  color?: TypographyColor;\n  align?: \"left\" | \"center\" | \"right\" | \"justify\";\n  /** Add a bottom margin (block rhythm). */\n  gutterBottom?: boolean;\n  /** Truncate with an ellipsis on a single line. */\n  noWrap?: boolean;\n  /** Render as a different element. */\n  component?: string;\n  ref?: Ref<HTMLElement>;\n}\n\nexport function Typography(props: ParentProps<TypographyProps>): JSX.Element {\n  const merged = mergeProps({ variant: \"body1\" as TypographyVariant, color: \"inherit\" as TypographyColor }, props);\n  const [local, rest] = splitProps(merged, [\n    \"variant\",\n    \"color\",\n    \"align\",\n    \"gutterBottom\",\n    \"noWrap\",\n    \"component\",\n    \"class\",\n    \"children\",\n    \"ref\",\n  ]);\n\n  return (\n    <Dynamic\n      component={local.component ?? defaultTag[local.variant]}\n      ref={mergeRefs(local.ref)}\n      class={cn(\n        \"smwb-typography\",\n        `smwb-typography_${local.variant}`,\n        local.color !== \"inherit\" && `smwb-typography_color-${local.color}`,\n        local.align && `smwb-typography_align-${local.align}`,\n        {\n          \"smwb-typography_gutter\": local.gutterBottom,\n          \"smwb-typography_nowrap\": local.noWrap,\n        },\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </Dynamic>\n  );\n}\n\nexport default Typography;\n"],"mappings":"AAAA,OAAO;AACP,SAAqC,YAAY,kBAAkB;AACnE,SAAS,eAAe;AACxB,OAAO,QAAQ;AACf,SAAS,iBAA2B;AA6BpC,MAAM,aAAgD;AAAA,EACpD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,WAAW;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AAAA,EACP,OAAO;AAAA,EACP,SAAS;AAAA,EACT,UAAU;AAAA,EACV,QAAQ;AACV;AAeO,SAAS,WAAW,OAAkD;AAC3E,QAAM,SAAS,WAAW,EAAE,SAAS,SAA8B,OAAO,UAA6B,GAAG,KAAK;AAC/G,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE,CAAC;AAAA,IACC,WAAW,MAAM,aAAa,WAAW,MAAM,OAAO;AAAA,IACtD,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,OAAO;AAAA,MACL;AAAA,MACA,mBAAmB,MAAM,OAAO;AAAA,MAChC,MAAM,UAAU,aAAa,yBAAyB,MAAM,KAAK;AAAA,MACjE,MAAM,SAAS,yBAAyB,MAAM,KAAK;AAAA,MACnD;AAAA,QACE,0BAA0B,MAAM;AAAA,QAChC,0BAA0B,MAAM;AAAA,MAClC;AAAA,MACA,MAAM;AAAA,IACR;AAAA,QACI;AAAA,GACL;AAAA,OACE,MAAM,SAAS;AAAA,IAClB,EAjBC;AAmBL;AAEA,IAAO,qBAAQ;","names":[],"file":"typography.jsx"}
+{"version":3,"sources":["../../../../../src/components/dataDisplay/typography/typography.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/typography/typography.entry.less\";\nimport { 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 TypographyVariant =\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"h5\"\n  | \"h6\"\n  | \"subtitle1\"\n  | \"subtitle2\"\n  | \"body1\"\n  | \"body2\"\n  | \"caption\"\n  | \"overline\"\n  | \"button\";\n\nexport type TypographyColor =\n  | \"inherit\"\n  | \"primary\"\n  | \"secondary\"\n  | \"error\"\n  | \"success\"\n  | \"warning\"\n  | \"info\"\n  | \"textPrimary\"\n  | \"textSecondary\"\n  | \"disabled\";\n\nconst defaultTag: Record<TypographyVariant, string> = {\n  h1: \"h1\",\n  h2: \"h2\",\n  h3: \"h3\",\n  h4: \"h4\",\n  h5: \"h5\",\n  h6: \"h6\",\n  // A subtitle is not a heading: as h6 it would break the page's outline.\n  subtitle1: \"p\",\n  subtitle2: \"p\",\n  body1: \"p\",\n  body2: \"p\",\n  caption: \"span\",\n  overline: \"span\",\n  button: \"span\",\n};\n\nexport interface TypographyProps extends JSX.HTMLAttributes<HTMLElement> {\n  variant?: TypographyVariant;\n  color?: TypographyColor;\n  align?: \"left\" | \"center\" | \"right\" | \"justify\";\n  /** Add a bottom margin (block rhythm). */\n  gutterBottom?: boolean;\n  /** Truncate with an ellipsis on a single line. */\n  noWrap?: boolean;\n  /** Truncate with an ellipsis after this many lines. */\n  lines?: number;\n  /** Digits of equal width (`tabular-nums`), so figures line up in KPIs and tables. */\n  tabularNums?: boolean;\n  /** Render as a different element. */\n  component?: string;\n  ref?: Ref<HTMLElement>;\n}\n\nexport function Typography(props: ParentProps<TypographyProps>): JSX.Element {\n  const merged = mergeProps({ variant: \"body1\" as TypographyVariant, color: \"inherit\" as TypographyColor }, props);\n  const [local, rest] = splitProps(merged, [\n    \"variant\",\n    \"color\",\n    \"align\",\n    \"gutterBottom\",\n    \"noWrap\",\n    \"lines\",\n    \"tabularNums\",\n    \"component\",\n    \"class\",\n    \"style\",\n    \"children\",\n    \"ref\",\n  ]);\n\n  const clamped = (): boolean => local.lines !== undefined && local.lines > 0;\n  // The line count travels as a custom property, merged into the caller's style.\n  const style = (): JSX.CSSProperties | string | undefined => {\n    if (!clamped()) return local.style;\n    const lines = String(local.lines);\n    if (typeof local.style === \"string\") return `${local.style};--smwb-typography-lines:${lines}`;\n    return { ...local.style, \"--smwb-typography-lines\": lines };\n  };\n\n  return (\n    <Dynamic\n      component={local.component ?? defaultTag[local.variant]}\n      ref={mergeRefs(local.ref)}\n      class={cn(\n        \"smwb-typography\",\n        `smwb-typography_${local.variant}`,\n        local.color !== \"inherit\" && `smwb-typography_color-${local.color}`,\n        local.align && `smwb-typography_align-${local.align}`,\n        {\n          \"smwb-typography_gutter\": local.gutterBottom,\n          \"smwb-typography_nowrap\": local.noWrap,\n          \"smwb-typography_clamp\": clamped(),\n          \"smwb-typography_tabular-nums\": local.tabularNums,\n        },\n        local.class\n      )}\n      style={style()}\n      {...rest}\n    >\n      {local.children}\n    </Dynamic>\n  );\n}\n\nexport default Typography;\n"],"mappings":"AAAA,OAAO;AACP,OAAO;AACP,SAAqC,YAAY,kBAAkB;AACnE,SAAS,eAAe;AACxB,OAAO,QAAQ;AACf,SAAS,iBAA2B;AA6BpC,MAAM,aAAgD;AAAA,EACpD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA;AAAA,EAEJ,WAAW;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AAAA,EACP,OAAO;AAAA,EACP,SAAS;AAAA,EACT,UAAU;AAAA,EACV,QAAQ;AACV;AAmBO,SAAS,WAAW,OAAkD;AAC3E,QAAM,SAAS,WAAW,EAAE,SAAS,SAA8B,OAAO,UAA6B,GAAG,KAAK;AAC/G,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,UAAU,MAAe,MAAM,UAAU,UAAa,MAAM,QAAQ;AAE1E,QAAM,QAAQ,MAA8C;AAC1D,QAAI,CAAC,QAAQ,EAAG,QAAO,MAAM;AAC7B,UAAM,QAAQ,OAAO,MAAM,KAAK;AAChC,QAAI,OAAO,MAAM,UAAU,SAAU,QAAO,GAAG,MAAM,KAAK,4BAA4B,KAAK;AAC3F,WAAO,EAAE,GAAG,MAAM,OAAO,2BAA2B,MAAM;AAAA,EAC5D;AAEA,SACE,CAAC;AAAA,IACC,WAAW,MAAM,aAAa,WAAW,MAAM,OAAO;AAAA,IACtD,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,OAAO;AAAA,MACL;AAAA,MACA,mBAAmB,MAAM,OAAO;AAAA,MAChC,MAAM,UAAU,aAAa,yBAAyB,MAAM,KAAK;AAAA,MACjE,MAAM,SAAS,yBAAyB,MAAM,KAAK;AAAA,MACnD;AAAA,QACE,0BAA0B,MAAM;AAAA,QAChC,0BAA0B,MAAM;AAAA,QAChC,yBAAyB,QAAQ;AAAA,QACjC,gCAAgC,MAAM;AAAA,MACxC;AAAA,MACA,MAAM;AAAA,IACR;AAAA,IACA,OAAO,MAAM;AAAA,QACT;AAAA,GACL;AAAA,OACE,MAAM,SAAS;AAAA,IAClB,EApBC;AAsBL;AAEA,IAAO,qBAAQ;","names":[],"file":"typography.jsx"}

package/dist/source/components/feedBack/confirmDialog/confirmDialog.jsx

@@ -1,3 +1,4 @@
+import "@smwb/ui-styles/less/tokens.entry.less";
 import "@smwb/ui-styles/less/components/confirmDialog/confirmDialog.entry.less";
 import { Show, splitProps, createUniqueId } from "solid-js";
 import cn from "clsx";
@@ -27,7 +28,7 @@ function ConfirmDialog(props) {
   return <Modal
     open={local.open}
     onClose={() => local.onCancel()}
-    size="small"
+    size="medium"
     role="alertdialog"
     backdrop="dark"
     closeOnEsc={!local.busy}

package/dist/source/components/feedBack/confirmDialog/confirmDialog.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/feedBack/confirmDialog/confirmDialog.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/components/confirmDialog/confirmDialog.entry.less\";\nimport { type JSX, Show, splitProps, createUniqueId } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Modal } from \"../modal\";\nimport { Button } from \"../../inputs/button\";\nimport { Typography } from \"../../dataDisplay/typography\";\n\nexport interface ConfirmDialogProps {\n  open: boolean;\n  title: string;\n  /** The subject of the action, shown emphasised on its own line (e.g. the asset name). */\n  subject?: string;\n  /** A secondary explanatory line (e.g. \"can't be undone\"). */\n  message?: string;\n  confirmLabel: string;\n  cancelLabel?: string;\n  /** Style the confirm button as destructive (red). */\n  danger?: boolean;\n  /** Disable the actions + gate Esc/outside-click while a confirm is in flight. */\n  busy?: boolean;\n  onConfirm: () => void;\n  onCancel: () => void;\n  class?: string;\n}\n\n/**\n * An alert/confirm dialog built on {@link Modal}: a title, an optional emphasised subject + secondary\n * message, and Cancel / Confirm actions. `role=\"alertdialog\"` with the subject + message wired to\n * `aria-describedby` so a screen reader announces the consequence, not just the title. While `busy`,\n * Escape + outside-click are gated and the buttons disabled. Pure presentation — the caller owns the\n * open state and the confirm/cancel handlers (and supplies localised labels).\n */\nexport function ConfirmDialog(props: ConfirmDialogProps): JSX.Element {\n  const [local] = splitProps(props, [\n    \"open\",\n    \"title\",\n    \"subject\",\n    \"message\",\n    \"confirmLabel\",\n    \"cancelLabel\",\n    \"danger\",\n    \"busy\",\n    \"onConfirm\",\n    \"onCancel\",\n    \"class\",\n  ]);\n  const subjectId = createUniqueId();\n  const messageId = createUniqueId();\n  // Only include aria-describedby when there's something to describe (the lib's exactOptionalPropertyTypes\n  // forbids passing an explicit `undefined` to Modal's optional prop, so spread a precisely-typed object).\n  const ariaDescribed = (): { \"aria-describedby\"?: string } => {\n    const ids = [local.subject ? subjectId : \"\", local.message ? messageId : \"\"].filter(Boolean).join(\" \");\n    return ids ? { \"aria-describedby\": ids } : {};\n  };\n\n  return (\n    <Modal\n      open={local.open}\n      onClose={() => local.onCancel()}\n      size=\"small\"\n      role=\"alertdialog\"\n      backdrop=\"dark\"\n      closeOnEsc={!local.busy}\n      closeOnOutsideClick={!local.busy}\n      aria-label={local.title}\n      {...ariaDescribed()}\n    >\n      <Modal.Header>{local.title}</Modal.Header>\n      <Modal.Content>\n        <div class={cn(\"smwb-confirm-dialog__body\", local.class)}>\n          <Show when={local.subject}>\n            <Typography id={subjectId} variant=\"body2\" color=\"textPrimary\" component=\"span\">\n              {local.subject}\n            </Typography>\n          </Show>\n          <Show when={local.message}>\n            <Typography id={messageId} variant=\"caption\" color=\"textSecondary\" component=\"span\">\n              {local.message}\n            </Typography>\n          </Show>\n        </div>\n      </Modal.Content>\n      <Modal.Footer>\n        <Button\n          variant=\"text\"\n          size=\"small\"\n          disabled={!!local.busy}\n          onClick={() => local.onCancel()}\n          label={local.cancelLabel ?? \"Cancel\"}\n        />\n        <Button\n          variant=\"contained\"\n          size=\"small\"\n          color={local.danger ? \"error\" : \"primary\"}\n          disabled={!!local.busy}\n          onClick={() => local.onConfirm()}\n          label={local.confirmLabel}\n        />\n      </Modal.Footer>\n    </Modal>\n  );\n}\n\nexport default ConfirmDialog;\n"],"mappings":"AAAA,OAAO;AACP,SAAmB,MAAM,YAAY,sBAAsB;AAC3D,OAAO,QAAQ;AACf,SAAS,aAAa;AACtB,SAAS,cAAc;AACvB,SAAS,kBAAkB;AA2BpB,SAAS,cAAc,OAAwC;AACpE,QAAM,CAAC,KAAK,IAAI,WAAW,OAAO;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,YAAY,eAAe;AACjC,QAAM,YAAY,eAAe;AAGjC,QAAM,gBAAgB,MAAuC;AAC3D,UAAM,MAAM,CAAC,MAAM,UAAU,YAAY,IAAI,MAAM,UAAU,YAAY,EAAE,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AACrG,WAAO,MAAM,EAAE,oBAAoB,IAAI,IAAI,CAAC;AAAA,EAC9C;AAEA,SACE,CAAC;AAAA,IACC,MAAM,MAAM;AAAA,IACZ,SAAS,MAAM,MAAM,SAAS;AAAA,IAC9B,KAAK;AAAA,IACL,KAAK;AAAA,IACL,SAAS;AAAA,IACT,YAAY,CAAC,MAAM;AAAA,IACnB,qBAAqB,CAAC,MAAM;AAAA,IAC5B,YAAY,MAAM;AAAA,QACd,cAAc;AAAA,GACnB;AAAA,MACC,CAAC,MAAM,QAAQ,MAAM,MAAM,EAA1B,MAAM,OAAmC;AAAA,MAC1C,CAAC,MAAM,QAAQ;AAAA,QACb,CAAC,IAAI,OAAO,GAAG,6BAA6B,MAAM,KAAK,GAAG;AAAA,UACxD,CAAC,KAAK,MAAM,MAAM,SAAS;AAAA,YACzB,CAAC,WAAW,IAAI,WAAW,QAAQ,QAAQ,MAAM,cAAc,UAAU,OAAO;AAAA,eAC7E,MAAM,QAAQ;AAAA,YACjB,EAFC,WAEY;AAAA,UACf,EAJC,KAIM;AAAA,UACP,CAAC,KAAK,MAAM,MAAM,SAAS;AAAA,YACzB,CAAC,WAAW,IAAI,WAAW,QAAQ,UAAU,MAAM,gBAAgB,UAAU,OAAO;AAAA,eACjF,MAAM,QAAQ;AAAA,YACjB,EAFC,WAEY;AAAA,UACf,EAJC,KAIM;AAAA,QACT,EAXC,IAWK;AAAA,MACR,EAbC,MAAM,QAaS;AAAA,MAChB,CAAC,MAAM,OAAO;AAAA,QACZ,CAAC;AAAA,IACC,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,UAAU,CAAC,CAAC,MAAM;AAAA,IAClB,SAAS,MAAM,MAAM,SAAS;AAAA,IAC9B,OAAO,MAAM,eAAe;AAAA,EAC9B,EAAE;AAAA,QACF,CAAC;AAAA,IACC,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,OAAO,MAAM,SAAS,UAAU;AAAA,IAChC,UAAU,CAAC,CAAC,MAAM;AAAA,IAClB,SAAS,MAAM,MAAM,UAAU;AAAA,IAC/B,OAAO,MAAM;AAAA,EACf,EAAE;AAAA,MACJ,EAhBC,MAAM,OAgBQ;AAAA,IACjB,EA3CC;AA6CL;AAEA,IAAO,wBAAQ;","names":[],"file":"confirmDialog.jsx"}
+{"version":3,"sources":["../../../../../src/components/feedBack/confirmDialog/confirmDialog.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/confirmDialog/confirmDialog.entry.less\";\nimport { type JSX, Show, splitProps, createUniqueId } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Modal } from \"../modal\";\nimport { Button } from \"../../inputs/button\";\nimport { Typography } from \"../../dataDisplay/typography\";\n\nexport interface ConfirmDialogProps {\n  open: boolean;\n  title: string;\n  /** The subject of the action, shown emphasised on its own line (e.g. the asset name). */\n  subject?: string;\n  /** A secondary explanatory line (e.g. \"can't be undone\"). */\n  message?: string;\n  confirmLabel: string;\n  cancelLabel?: string;\n  /** Style the confirm button as destructive (red). */\n  danger?: boolean;\n  /** Disable the actions + gate Esc/outside-click while a confirm is in flight. */\n  busy?: boolean;\n  onConfirm: () => void;\n  onCancel: () => void;\n  class?: string;\n}\n\n/**\n * An alert/confirm dialog built on {@link Modal}: a title, an optional emphasised subject + secondary\n * message, and Cancel / Confirm actions. `role=\"alertdialog\"` with the subject + message wired to\n * `aria-describedby` so a screen reader announces the consequence, not just the title. While `busy`,\n * Escape + outside-click are gated and the buttons disabled. Pure presentation — the caller owns the\n * open state and the confirm/cancel handlers (and supplies localised labels).\n */\nexport function ConfirmDialog(props: ConfirmDialogProps): JSX.Element {\n  const [local] = splitProps(props, [\n    \"open\",\n    \"title\",\n    \"subject\",\n    \"message\",\n    \"confirmLabel\",\n    \"cancelLabel\",\n    \"danger\",\n    \"busy\",\n    \"onConfirm\",\n    \"onCancel\",\n    \"class\",\n  ]);\n  const subjectId = createUniqueId();\n  const messageId = createUniqueId();\n  // Only include aria-describedby when there's something to describe (the lib's exactOptionalPropertyTypes\n  // forbids passing an explicit `undefined` to Modal's optional prop, so spread a precisely-typed object).\n  const ariaDescribed = (): { \"aria-describedby\"?: string } => {\n    const ids = [local.subject ? subjectId : \"\", local.message ? messageId : \"\"].filter(Boolean).join(\" \");\n    return ids ? { \"aria-describedby\": ids } : {};\n  };\n\n  return (\n    <Modal\n      open={local.open}\n      onClose={() => local.onCancel()}\n      size=\"medium\"\n      role=\"alertdialog\"\n      backdrop=\"dark\"\n      closeOnEsc={!local.busy}\n      closeOnOutsideClick={!local.busy}\n      aria-label={local.title}\n      {...ariaDescribed()}\n    >\n      <Modal.Header>{local.title}</Modal.Header>\n      <Modal.Content>\n        <div class={cn(\"smwb-confirm-dialog__body\", local.class)}>\n          <Show when={local.subject}>\n            <Typography id={subjectId} variant=\"body2\" color=\"textPrimary\" component=\"span\">\n              {local.subject}\n            </Typography>\n          </Show>\n          <Show when={local.message}>\n            <Typography id={messageId} variant=\"caption\" color=\"textSecondary\" component=\"span\">\n              {local.message}\n            </Typography>\n          </Show>\n        </div>\n      </Modal.Content>\n      <Modal.Footer>\n        <Button\n          variant=\"text\"\n          size=\"small\"\n          disabled={!!local.busy}\n          onClick={() => local.onCancel()}\n          label={local.cancelLabel ?? \"Cancel\"}\n        />\n        <Button\n          variant=\"contained\"\n          size=\"small\"\n          color={local.danger ? \"error\" : \"primary\"}\n          disabled={!!local.busy}\n          onClick={() => local.onConfirm()}\n          label={local.confirmLabel}\n        />\n      </Modal.Footer>\n    </Modal>\n  );\n}\n\nexport default ConfirmDialog;\n"],"mappings":"AAAA,OAAO;AACP,OAAO;AACP,SAAmB,MAAM,YAAY,sBAAsB;AAC3D,OAAO,QAAQ;AACf,SAAS,aAAa;AACtB,SAAS,cAAc;AACvB,SAAS,kBAAkB;AA2BpB,SAAS,cAAc,OAAwC;AACpE,QAAM,CAAC,KAAK,IAAI,WAAW,OAAO;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,YAAY,eAAe;AACjC,QAAM,YAAY,eAAe;AAGjC,QAAM,gBAAgB,MAAuC;AAC3D,UAAM,MAAM,CAAC,MAAM,UAAU,YAAY,IAAI,MAAM,UAAU,YAAY,EAAE,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AACrG,WAAO,MAAM,EAAE,oBAAoB,IAAI,IAAI,CAAC;AAAA,EAC9C;AAEA,SACE,CAAC;AAAA,IACC,MAAM,MAAM;AAAA,IACZ,SAAS,MAAM,MAAM,SAAS;AAAA,IAC9B,KAAK;AAAA,IACL,KAAK;AAAA,IACL,SAAS;AAAA,IACT,YAAY,CAAC,MAAM;AAAA,IACnB,qBAAqB,CAAC,MAAM;AAAA,IAC5B,YAAY,MAAM;AAAA,QACd,cAAc;AAAA,GACnB;AAAA,MACC,CAAC,MAAM,QAAQ,MAAM,MAAM,EAA1B,MAAM,OAAmC;AAAA,MAC1C,CAAC,MAAM,QAAQ;AAAA,QACb,CAAC,IAAI,OAAO,GAAG,6BAA6B,MAAM,KAAK,GAAG;AAAA,UACxD,CAAC,KAAK,MAAM,MAAM,SAAS;AAAA,YACzB,CAAC,WAAW,IAAI,WAAW,QAAQ,QAAQ,MAAM,cAAc,UAAU,OAAO;AAAA,eAC7E,MAAM,QAAQ;AAAA,YACjB,EAFC,WAEY;AAAA,UACf,EAJC,KAIM;AAAA,UACP,CAAC,KAAK,MAAM,MAAM,SAAS;AAAA,YACzB,CAAC,WAAW,IAAI,WAAW,QAAQ,UAAU,MAAM,gBAAgB,UAAU,OAAO;AAAA,eACjF,MAAM,QAAQ;AAAA,YACjB,EAFC,WAEY;AAAA,UACf,EAJC,KAIM;AAAA,QACT,EAXC,IAWK;AAAA,MACR,EAbC,MAAM,QAaS;AAAA,MAChB,CAAC,MAAM,OAAO;AAAA,QACZ,CAAC;AAAA,IACC,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,UAAU,CAAC,CAAC,MAAM;AAAA,IAClB,SAAS,MAAM,MAAM,SAAS;AAAA,IAC9B,OAAO,MAAM,eAAe;AAAA,EAC9B,EAAE;AAAA,QACF,CAAC;AAAA,IACC,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,OAAO,MAAM,SAAS,UAAU;AAAA,IAChC,UAAU,CAAC,CAAC,MAAM;AAAA,IAClB,SAAS,MAAM,MAAM,UAAU;AAAA,IAC/B,OAAO,MAAM;AAAA,EACf,EAAE;AAAA,MACJ,EAhBC,MAAM,OAgBQ;AAAA,IACjB,EA3CC;AA6CL;AAEA,IAAO,wBAAQ;","names":[],"file":"confirmDialog.jsx"}

package/dist/source/components/feedBack/emptyState/emptyState.jsx

@@ -0,0 +1,49 @@
+import "@smwb/ui-styles/less/tokens.entry.less";
+import "@smwb/ui-styles/less/components/emptyState/emptyState.entry.less";
+import { Show, children, mergeProps, splitProps } from "solid-js";
+import cn from "clsx";
+import { Icon } from "../../base/icon";
+import { mergeRefs } from "../../../primitives/mergeRefs";
+const ICON_SIZE = { block: { medium: 32, small: 24 }, inline: { medium: 18, small: 16 } };
+const present = (value) => value !== void 0 && value !== null && value !== false && value !== "" && !(Array.isArray(value) && value.length === 0);
+function EmptyState(props) {
+  const merged = mergeProps({ variant: "block", size: "medium" }, props);
+  const [local, rest] = splitProps(merged, ["class", "title", "icon", "actions", "variant", "size", "children", "ref"]);
+  const icon = children(() => local.icon);
+  const title = children(() => local.title);
+  const message = children(() => local.children);
+  const actions = children(() => local.actions);
+  const iconName = () => {
+    const resolved = icon();
+    return typeof resolved === "string" ? resolved : void 0;
+  };
+  return <div
+    data-testid="empty-state"
+    {...rest}
+    ref={mergeRefs(local.ref)}
+    class={cn("smwb-empty-state", `smwb-empty-state_${local.variant}`, `smwb-empty-state_${local.size}`, local.class)}
+  >
+      <Show when={present(icon())}>
+        <span class="smwb-empty-state__icon" aria-hidden="true">
+          <Show when={iconName()} fallback={icon()}>
+            {(name) => <Icon name={name()} size={ICON_SIZE[local.variant][local.size]} />}
+          </Show>
+        </span>
+      </Show>
+      <Show when={present(title())}>
+        <div class="smwb-empty-state__title">{title()}</div>
+      </Show>
+      <Show when={present(message())}>
+        <div class="smwb-empty-state__description">{message()}</div>
+      </Show>
+      <Show when={present(actions())}>
+        <div class="smwb-empty-state__actions">{actions()}</div>
+      </Show>
+    </div>;
+}
+var emptyState_default = EmptyState;
+export {
+  EmptyState,
+  emptyState_default as default
+};
+//# sourceMappingURL=emptyState.jsx.map

package/dist/source/components/feedBack/emptyState/emptyState.jsx.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/feedBack/emptyState/emptyState.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/emptyState/emptyState.entry.less\";\nimport { type JSX, type ParentProps, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface EmptyStateProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  /** What is empty, e.g. \"No works yet\". */\n  title?: JSX.Element;\n  /** An icon name, or an icon element. Decorative: the title and the message say it all. */\n  icon?: JSX.Element | string;\n  /** What the reader can do about it: buttons or links. */\n  actions?: JSX.Element;\n  /**\n   * `block` (default): centred, for an empty page, panel or card.\n   * `inline`: a muted line of text, for a list, a table or a column that came\n   * out empty; an action follows the last word.\n   */\n  variant?: \"block\" | \"inline\";\n  /** `small`: tighter, for a narrow column or a card. */\n  size?: \"small\" | \"medium\";\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst ICON_SIZE = { block: { medium: 32, small: 24 }, inline: { medium: 18, small: 16 } } as const;\n\nconst present = (value: unknown): boolean =>\n  value !== undefined &&\n  value !== null &&\n  value !== false &&\n  value !== \"\" &&\n  !(Array.isArray(value) && value.length === 0);\n\n/**\n * What a list, a table or a panel shows when it has nothing: an icon, a title,\n * the message (the children) and actions.\n */\nexport function EmptyState(props: ParentProps<EmptyStateProps>): JSX.Element {\n  const merged = mergeProps({ variant: \"block\" as const, size: \"medium\" as const }, props);\n  const [local, rest] = splitProps(merged, [\"class\", \"title\", \"icon\", \"actions\", \"variant\", \"size\", \"children\", \"ref\"]);\n\n  // Read each slot once: markup passed as a prop is created anew on every read,\n  // and during hydration the copy made for a <Show> test has no server DOM node.\n  const icon = children(() => local.icon);\n  const title = children(() => local.title);\n  const message = children(() => local.children);\n  const actions = children(() => local.actions);\n  const iconName = (): string | undefined => {\n    const resolved = icon();\n    return typeof resolved === \"string\" ? resolved : undefined;\n  };\n\n  return (\n    <div\n      data-testid=\"empty-state\"\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-empty-state\", `smwb-empty-state_${local.variant}`, `smwb-empty-state_${local.size}`, local.class)}\n    >\n      <Show when={present(icon())}>\n        <span class=\"smwb-empty-state__icon\" aria-hidden=\"true\">\n          <Show when={iconName()} fallback={icon()}>\n            {(name) => <Icon name={name()} size={ICON_SIZE[local.variant][local.size]} />}\n          </Show>\n        </span>\n      </Show>\n      <Show when={present(title())}>\n        <div class=\"smwb-empty-state__title\">{title()}</div>\n      </Show>\n      <Show when={present(message())}>\n        <div class=\"smwb-empty-state__description\">{message()}</div>\n      </Show>\n      <Show when={present(actions())}>\n        <div class=\"smwb-empty-state__actions\">{actions()}</div>\n      </Show>\n    </div>\n  );\n}\n\nexport default EmptyState;\n"],"mappings":"AAAA,OAAO;AACP,OAAO;AACP,SAAqC,MAAM,UAAU,YAAY,kBAAkB;AACnF,OAAO,QAAQ;AACf,SAAS,YAAY;AACrB,SAAS,iBAA2B;AAoBpC,MAAM,YAAY,EAAE,OAAO,EAAE,QAAQ,IAAI,OAAO,GAAG,GAAG,QAAQ,EAAE,QAAQ,IAAI,OAAO,GAAG,EAAE;AAExF,MAAM,UAAU,CAAC,UACf,UAAU,UACV,UAAU,QACV,UAAU,SACV,UAAU,MACV,EAAE,MAAM,QAAQ,KAAK,KAAK,MAAM,WAAW;AAMtC,SAAS,WAAW,OAAkD;AAC3E,QAAM,SAAS,WAAW,EAAE,SAAS,SAAkB,MAAM,SAAkB,GAAG,KAAK;AACvF,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ,CAAC,SAAS,SAAS,QAAQ,WAAW,WAAW,QAAQ,YAAY,KAAK,CAAC;AAIpH,QAAM,OAAO,SAAS,MAAM,MAAM,IAAI;AACtC,QAAM,QAAQ,SAAS,MAAM,MAAM,KAAK;AACxC,QAAM,UAAU,SAAS,MAAM,MAAM,QAAQ;AAC7C,QAAM,UAAU,SAAS,MAAM,MAAM,OAAO;AAC5C,QAAM,WAAW,MAA0B;AACzC,UAAM,WAAW,KAAK;AACtB,WAAO,OAAO,aAAa,WAAW,WAAW;AAAA,EACnD;AAEA,SACE,CAAC;AAAA,IACC,YAAY;AAAA,QACR;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,OAAO,GAAG,oBAAoB,oBAAoB,MAAM,OAAO,IAAI,oBAAoB,MAAM,IAAI,IAAI,MAAM,KAAK;AAAA,GACjH;AAAA,MACC,CAAC,KAAK,MAAM,QAAQ,KAAK,CAAC,GAAG;AAAA,QAC3B,CAAC,KAAK,MAAM,yBAAyB,YAAY,OAAO;AAAA,UACtD,CAAC,KAAK,MAAM,SAAS,GAAG,UAAU,KAAK,GAAG;AAAA,aACvC,CAAC,SAAS,CAAC,KAAK,MAAM,KAAK,GAAG,MAAM,UAAU,MAAM,OAAO,EAAE,MAAM,IAAI,GAAG,GAAG;AAAA,UAChF,EAFC,KAEM;AAAA,QACT,EAJC,KAIM;AAAA,MACT,EANC,KAMM;AAAA,MACP,CAAC,KAAK,MAAM,QAAQ,MAAM,CAAC,GAAG;AAAA,QAC5B,CAAC,IAAI,MAAM,2BAA2B,MAAM,EAAE,EAA7C,IAAmD;AAAA,MACtD,EAFC,KAEM;AAAA,MACP,CAAC,KAAK,MAAM,QAAQ,QAAQ,CAAC,GAAG;AAAA,QAC9B,CAAC,IAAI,MAAM,iCAAiC,QAAQ,EAAE,EAArD,IAA2D;AAAA,MAC9D,EAFC,KAEM;AAAA,MACP,CAAC,KAAK,MAAM,QAAQ,QAAQ,CAAC,GAAG;AAAA,QAC9B,CAAC,IAAI,MAAM,6BAA6B,QAAQ,EAAE,EAAjD,IAAuD;AAAA,MAC1D,EAFC,KAEM;AAAA,IACT,EAtBC;AAwBL;AAEA,IAAO,qBAAQ;","names":[],"file":"emptyState.jsx"}