@smwb/ui-solid 0.12.0 → 0.13.0

package/dist/headless/components/dataDisplay/treeView/treeView.js.map

@@ -1 +1 @@
-{"version":3,"file":"treeView.js","sources":["../../../../../src/components/dataDisplay/treeView/treeView.tsx"],"sourcesContent":["import { 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"],"names":["TreeContext","createContext","TreeNode","props","ctx","useContext","nodeId","item","id","path","resolvedChildren","children","loadedChildren","isLazy","hasLoader","hasChildren","hasChildNodes","length","isOpen","expandedIds","includes","isSelected","selectedIds","isLoading","loadingIds","onLabelClick","ensureLoaded","toggleExpanded","selectable","toggleSelected","onKeyDown","event","key","preventDefault","setOpen","_el$","_tmpl$3","_el$2","firstChild","_el$4","$$keydown","$$click","_$insert","_$createComponent","Show","when","checkboxes","_el$3","_tmpl$","addEventListener","e","stopPropagation","_$effect","_$setAttribute","label","checked","fallback","Icon","name","listIcon","size","_$memo","nodeIcon","opened","closed","fill","_c$","renderLabel","_el$5","_tmpl$2","_tmpl$4","For","each","child","idx","_p$","_v$","cn","_v$2","undefined","_v$3","_$className","t","a","TreeView","merged","mergeProps","data","defaultExpanded","defaultSelected","local","rest","splitProps","setLoadedChildren","createSignal","setLoadingIds","setExpandedIds","createControllableState","value","expanded","defaultValue","onChange","next","onExpandedChange","lastToggled","setSelectedIds","selected","changed","onSelectedChange","contextValue","prev","filter","x","open","has","loadChildren","then","finally","Provider","_el$7","_tmpl$5","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","class","node","_el$8","_tmpl$6","_$delegateEvents"],"mappings":"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"}
+{"version":3,"file":"treeView.js","sources":["../../../../../src/components/dataDisplay/treeView/treeView.tsx"],"sourcesContent":["import { 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  /** Test id of the root `<div>`; `tree-view` unless given. */\n  \"data-testid\"?: string | undefined;\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    \"data-testid\",\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\n        {...rest}\n        data-testid={local[\"data-testid\"] ?? \"tree-view\"}\n        ref={mergeRefs(local.ref)}\n        role=\"tree\"\n        class={cn(\"smwb-tree\", local.class)}\n      >\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"],"names":["TreeContext","createContext","TreeNode","props","ctx","useContext","nodeId","item","id","path","resolvedChildren","children","loadedChildren","isLazy","hasLoader","hasChildren","hasChildNodes","length","isOpen","expandedIds","includes","isSelected","selectedIds","isLoading","loadingIds","onLabelClick","ensureLoaded","toggleExpanded","selectable","toggleSelected","onKeyDown","event","key","preventDefault","setOpen","_el$","_tmpl$3","_el$2","firstChild","_el$4","$$keydown","$$click","_$insert","_$createComponent","Show","when","checkboxes","_el$3","_tmpl$","addEventListener","e","stopPropagation","_$effect","_$setAttribute","label","checked","fallback","Icon","name","listIcon","size","_$memo","nodeIcon","opened","closed","fill","_c$","renderLabel","_el$5","_tmpl$2","_tmpl$4","For","each","child","idx","_p$","_v$","cn","_v$2","undefined","_v$3","_$className","t","a","TreeView","merged","mergeProps","data","defaultExpanded","defaultSelected","local","rest","splitProps","setLoadedChildren","createSignal","setLoadingIds","setExpandedIds","createControllableState","value","expanded","defaultValue","onChange","next","onExpandedChange","lastToggled","setSelectedIds","selected","changed","onSelectedChange","contextValue","prev","filter","x","open","has","loadChildren","then","finally","Provider","_el$7","_tmpl$5","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","class","node","_el$8","_tmpl$6","_$delegateEvents"],"mappings":"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"}

package/dist/headless/components/dataDisplay/typography/typography.js

@@ -1,8 +1,9 @@
-import { createComponent as l, Dynamic as i, mergeProps as m } from "solid-js/web";
+import { createComponent as l, Dynamic as m, mergeProps as i } from "solid-js/web";
 import { mergeProps as y, splitProps as g } from "solid-js";
 import c from "clsx";
 import { mergeRefs as h } from "../../../primitives/mergeRefs.js";
-const u = {
+import { mergeStyle as u } from "../../../primitives/mergeStyle.js";
+const b = {
   h1: "h1",
   h2: "h2",
   h3: "h3",
@@ -18,44 +19,39 @@ const u = {
   overline: "span",
   button: "span"
 };
-function _(n) {
-  const s = y({
+function $(e) {
+  const n = y({
     variant: "body1",
     color: "inherit"
-  }, n), [t, p] = g(s, ["variant", "color", "align", "gutterBottom", "noWrap", "lines", "tabularNums", "component", "class", "style", "children", "ref"]), o = () => t.lines !== void 0 && t.lines > 0, a = () => {
-    if (!o()) return t.style;
-    const r = String(t.lines);
-    return typeof t.style == "string" ? `${t.style};--smwb-typography-lines:${r}` : {
-      ...t.style,
-      "--smwb-typography-lines": r
-    };
-  };
-  return l(i, m({
+  }, e), [r, p] = g(n, ["variant", "color", "align", "gutterBottom", "noWrap", "lines", "tabularNums", "component", "class", "style", "children", "ref"]), t = () => r.lines !== void 0 && r.lines > 0, a = () => u(r.style, {
+    "--smwb-typography-lines": t() ? String(r.lines) : void 0
+  });
+  return l(m, i({
     get component() {
-      return t.component ?? u[t.variant];
+      return r.component ?? b[r.variant];
     },
-    ref(r) {
-      var e = h(t.ref);
-      typeof e == "function" && e(r);
+    ref(s) {
+      var o = h(r.ref);
+      typeof o == "function" && o(s);
     },
     get class() {
-      return c("smwb-typography", `smwb-typography_${t.variant}`, t.color !== "inherit" && `smwb-typography_color-${t.color}`, t.align && `smwb-typography_align-${t.align}`, {
-        "smwb-typography_gutter": t.gutterBottom,
-        "smwb-typography_nowrap": t.noWrap,
-        "smwb-typography_clamp": o(),
-        "smwb-typography_tabular-nums": t.tabularNums
-      }, t.class);
+      return c("smwb-typography", `smwb-typography_${r.variant}`, r.color !== "inherit" && `smwb-typography_color-${r.color}`, r.align && `smwb-typography_align-${r.align}`, {
+        "smwb-typography_gutter": r.gutterBottom,
+        "smwb-typography_nowrap": r.noWrap,
+        "smwb-typography_clamp": t(),
+        "smwb-typography_tabular-nums": r.tabularNums
+      }, r.class);
     },
     get style() {
       return a();
     }
   }, p, {
     get children() {
-      return t.children;
+      return r.children;
     }
   }));
 }
 export {
-  _ as Typography
+  $ as Typography
 };
 //# sourceMappingURL=typography.js.map

package/dist/headless/components/dataDisplay/typography/typography.js.map

@@ -1 +1 @@
-{"version":3,"file":"typography.js","sources":["../../../../../src/components/dataDisplay/typography/typography.tsx"],"sourcesContent":["import { type JSX, type ParentProps, mergeProps, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type 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"],"names":["defaultTag","h1","h2","h3","h4","h5","h6","subtitle1","subtitle2","body1","body2","caption","overline","button","Typography","props","merged","mergeProps","variant","color","local","rest","splitProps","clamped","lines","undefined","style","String","_$createComponent","Dynamic","_$mergeProps","component","ref","r$","_ref$","mergeRefs","cn","align","gutterBottom","noWrap","tabularNums","class","children"],"mappings":";;;;AAgCA,MAAMA,IAAgD;AAAA,EACpDC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA;AAAA,EAEJC,WAAW;AAAA,EACXC,WAAW;AAAA,EACXC,OAAO;AAAA,EACPC,OAAO;AAAA,EACPC,SAAS;AAAA,EACTC,UAAU;AAAA,EACVC,QAAQ;AACV;AAmBO,SAASC,EAAWC,GAAkD;AAC3E,QAAMC,IAASC,EAAW;AAAA,IAAEC,SAAS;AAAA,IAA8BC,OAAO;AAAA,EAAA,GAAgCJ,CAAK,GACzG,CAACK,GAAOC,CAAI,IAAIC,EAAWN,GAAQ,CACvC,WACA,SACA,SACA,gBACA,UACA,SACA,eACA,aACA,SACA,SACA,YACA,KAAK,CACN,GAEKO,IAAUA,MAAeH,EAAMI,UAAUC,UAAaL,EAAMI,QAAQ,GAEpEE,IAAQA,MAA8C;AAC1D,QAAI,CAACH,EAAAA,EAAW,QAAOH,EAAMM;AAC7B,UAAMF,IAAQG,OAAOP,EAAMI,KAAK;AAChC,WAAI,OAAOJ,EAAMM,SAAU,WAAiB,GAAGN,EAAMM,KAAK,4BAA4BF,CAAK,KACpF;AAAA,MAAE,GAAGJ,EAAMM;AAAAA,MAAO,2BAA2BF;AAAAA,IAAAA;AAAAA,EACtD;AAEA,SAAAI,EACGC,GAAOC,EAAA;AAAA,IAAA,IACNC,YAAS;AAAA,aAAEX,EAAMW,aAAa/B,EAAWoB,EAAMF,OAAO;AAAA,IAAC;AAAA,IAAAc,IAAAC,GAAA;AAAA,UAAAC,IAClDC,EAAUf,EAAMY,GAAG;AAAC,aAAAE,KAAA,cAAAA,EAAAD,CAAA;AAAA,IAAA;AAAA,IAAA,IAAA,QAAA;AAAA,aAClBG,EACL,mBACA,mBAAmBhB,EAAMF,OAAO,IAChCE,EAAMD,UAAU,aAAa,yBAAyBC,EAAMD,KAAK,IACjEC,EAAMiB,SAAS,yBAAyBjB,EAAMiB,KAAK,IACnD;AAAA,QACE,0BAA0BjB,EAAMkB;AAAAA,QAChC,0BAA0BlB,EAAMmB;AAAAA,QAChC,yBAAyBhB,EAAAA;AAAAA,QACzB,gCAAgCH,EAAMoB;AAAAA,MAAAA,GAExCpB,EAAMqB,KACR;AAAA,IAAC;AAAA,IAAA,IACDf,QAAK;AAAA,aAAEA,EAAAA;AAAAA,IAAO;AAAA,EAAA,GACVL,GAAI;AAAA,IAAA,IAAAqB,WAAA;AAAA,aAEPtB,EAAMsB;AAAAA,IAAQ;AAAA,EAAA,CAAA,CAAA;AAGrB;"}
+{"version":3,"file":"typography.js","sources":["../../../../../src/components/dataDisplay/typography/typography.tsx"],"sourcesContent":["import { type JSX, type ParentProps, mergeProps, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { mergeStyle } from \"../../../primitives/mergeStyle\";\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    mergeStyle(local.style, { \"--smwb-typography-lines\": clamped() ? String(local.lines) : undefined });\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"],"names":["defaultTag","h1","h2","h3","h4","h5","h6","subtitle1","subtitle2","body1","body2","caption","overline","button","Typography","props","merged","mergeProps","variant","color","local","rest","splitProps","clamped","lines","undefined","style","mergeStyle","String","_$createComponent","Dynamic","_$mergeProps","component","ref","r$","_ref$","mergeRefs","cn","align","gutterBottom","noWrap","tabularNums","class","children"],"mappings":";;;;;AAiCA,MAAMA,IAAgD;AAAA,EACpDC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA;AAAA,EAEJC,WAAW;AAAA,EACXC,WAAW;AAAA,EACXC,OAAO;AAAA,EACPC,OAAO;AAAA,EACPC,SAAS;AAAA,EACTC,UAAU;AAAA,EACVC,QAAQ;AACV;AAmBO,SAASC,EAAWC,GAAkD;AAC3E,QAAMC,IAASC,EAAW;AAAA,IAAEC,SAAS;AAAA,IAA8BC,OAAO;AAAA,EAAA,GAAgCJ,CAAK,GACzG,CAACK,GAAOC,CAAI,IAAIC,EAAWN,GAAQ,CACvC,WACA,SACA,SACA,gBACA,UACA,SACA,eACA,aACA,SACA,SACA,YACA,KAAK,CACN,GAEKO,IAAUA,MAAeH,EAAMI,UAAUC,UAAaL,EAAMI,QAAQ,GAEpEE,IAAQA,MACZC,EAAWP,EAAMM,OAAO;AAAA,IAAE,2BAA2BH,EAAAA,IAAYK,OAAOR,EAAMI,KAAK,IAAIC;AAAAA,EAAAA,CAAW;AAEpG,SAAAI,EACGC,GAAOC,EAAA;AAAA,IAAA,IACNC,YAAS;AAAA,aAAEZ,EAAMY,aAAahC,EAAWoB,EAAMF,OAAO;AAAA,IAAC;AAAA,IAAAe,IAAAC,GAAA;AAAA,UAAAC,IAClDC,EAAUhB,EAAMa,GAAG;AAAC,aAAAE,KAAA,cAAAA,EAAAD,CAAA;AAAA,IAAA;AAAA,IAAA,IAAA,QAAA;AAAA,aAClBG,EACL,mBACA,mBAAmBjB,EAAMF,OAAO,IAChCE,EAAMD,UAAU,aAAa,yBAAyBC,EAAMD,KAAK,IACjEC,EAAMkB,SAAS,yBAAyBlB,EAAMkB,KAAK,IACnD;AAAA,QACE,0BAA0BlB,EAAMmB;AAAAA,QAChC,0BAA0BnB,EAAMoB;AAAAA,QAChC,yBAAyBjB,EAAAA;AAAAA,QACzB,gCAAgCH,EAAMqB;AAAAA,MAAAA,GAExCrB,EAAMsB,KACR;AAAA,IAAC;AAAA,IAAA,IACDhB,QAAK;AAAA,aAAEA,EAAAA;AAAAA,IAAO;AAAA,EAAA,GACVL,GAAI;AAAA,IAAA,IAAAsB,WAAA;AAAA,aAEPvB,EAAMuB;AAAAA,IAAQ;AAAA,EAAA,CAAA,CAAA;AAGrB;"}

package/dist/headless/components/feedBack/emptyState/emptyState.js

@@ -3,7 +3,7 @@ import { mergeProps as b, splitProps as z, children as m, Show as a } from "soli
 import P from "clsx";
 import { mergeRefs as k } from "../../../primitives/mergeRefs.js";
 import { Icon as I } from "../../base/icon/icon.js";
-var S = /* @__PURE__ */ l("<span class=smwb-empty-state__icon aria-hidden=true>"), A = /* @__PURE__ */ l("<div class=smwb-empty-state__title>"), C = /* @__PURE__ */ l("<div class=smwb-empty-state__description>"), E = /* @__PURE__ */ l("<div class=smwb-empty-state__actions>"), N = /* @__PURE__ */ l("<div data-testid=empty-state>");
+var S = /* @__PURE__ */ l("<span class=smwb-empty-state__icon aria-hidden=true>"), A = /* @__PURE__ */ l("<div class=smwb-empty-state__title>"), C = /* @__PURE__ */ l("<div class=smwb-empty-state__description>"), E = /* @__PURE__ */ l("<div class=smwb-empty-state__actions>"), N = /* @__PURE__ */ l("<div>");
 const x = {
   block: {
     medium: 32,
@@ -15,16 +15,20 @@ const x = {
   }
 }, o = (n) => n != null && n !== !1 && n !== "" && !(Array.isArray(n) && n.length === 0);
 function B(n) {
-  const g = b({
+  const _ = b({
     variant: "block",
     size: "medium"
-  }, n), [t, f] = z(g, ["class", "title", "icon", "actions", "variant", "size", "children", "ref"]), c = m(() => t.icon), p = m(() => t.title), d = m(() => t.children), u = m(() => t.actions), h = () => {
+  }, n), [t, f] = z(_, ["class", "title", "icon", "actions", "variant", "size", "children", "ref", "data-testid"]), c = m(() => t.icon), p = m(() => t.title), d = m(() => t.children), u = m(() => t.actions), h = () => {
     const r = c();
     return typeof r == "string" ? r : void 0;
   };
   return (() => {
-    var r = N(), _ = k(t.ref);
-    return typeof _ == "function" && v(_, r), w(r, y(f, {
+    var r = N(), g = k(t.ref);
+    return typeof g == "function" && v(g, r), w(r, y({
+      get "data-testid"() {
+        return t["data-testid"] ?? "empty-state";
+      }
+    }, f, {
       get class() {
         return P("smwb-empty-state", `smwb-empty-state_${t.variant}`, `smwb-empty-state_${t.size}`, t.class);
       }

package/dist/headless/components/feedBack/emptyState/emptyState.js.map

@@ -1 +1 @@
-{"version":3,"file":"emptyState.js","sources":["../../../../../src/components/feedBack/emptyState/emptyState.tsx"],"sourcesContent":["import { 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"],"names":["ICON_SIZE","block","medium","small","inline","present","value","Array","isArray","length","EmptyState","props","merged","mergeProps","variant","size","local","rest","splitProps","icon","children","title","message","actions","iconName","resolved","undefined","_el$","_tmpl$5","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","_$insert","_$createComponent","Show","when","_el$2","_tmpl$","fallback","name","Icon","_el$3","_tmpl$2","_el$4","_tmpl$3","_el$5","_tmpl$4"],"mappings":";;;;;;AAuBA,MAAMA,IAAY;AAAA,EAAEC,OAAO;AAAA,IAAEC,QAAQ;AAAA,IAAIC,OAAO;AAAA,EAAA;AAAA,EAAMC,QAAQ;AAAA,IAAEF,QAAQ;AAAA,IAAIC,OAAO;AAAA,EAAA;AAAK,GAElFE,IAAUA,CAACC,MAEfA,KAAU,QACVA,MAAU,MACVA,MAAU,MACV,EAAEC,MAAMC,QAAQF,CAAK,KAAKA,EAAMG,WAAW;AAMtC,SAASC,EAAWC,GAAkD;AAC3E,QAAMC,IAASC,EAAW;AAAA,IAAEC,SAAS;AAAA,IAAkBC,MAAM;AAAA,EAAA,GAAqBJ,CAAK,GACjF,CAACK,GAAOC,CAAI,IAAIC,EAAWN,GAAQ,CAAC,SAAS,SAAS,QAAQ,WAAW,WAAW,QAAQ,YAAY,KAAK,CAAC,GAI9GO,IAAOC,EAAS,MAAMJ,EAAMG,IAAI,GAChCE,IAAQD,EAAS,MAAMJ,EAAMK,KAAK,GAClCC,IAAUF,EAAS,MAAMJ,EAAMI,QAAQ,GACvCG,IAAUH,EAAS,MAAMJ,EAAMO,OAAO,GACtCC,IAAWA,MAA0B;AACzC,UAAMC,IAAWN,EAAAA;AACjB,WAAO,OAAOM,KAAa,WAAWA,IAAWC;AAAAA,EACnD;AAEA,UAAA,MAAA;AAAA,QAAAC,IAAAC,EAAAA,GAAAC,IAISC,EAAUd,EAAMe,GAAG;AAAC,kBAAAF,KAAA,cAAAG,EAAAH,GAAAF,CAAA,GAAAM,EAAAN,GAAAO,EADrBjB,GAAI;AAAA,MAAA,IAAA,QAAA;AAAA,eAEDkB,EAAG,oBAAoB,oBAAoBnB,EAAMF,OAAO,IAAI,oBAAoBE,EAAMD,IAAI,IAAIC,EAAMoB,KAAK;AAAA,MAAC;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAC,EAAAV,GAAAW,EAEhHC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEnC,EAAQc,GAAM;AAAA,MAAC;AAAA,MAAA,IAAAC,WAAA;AAAA,YAAAqB,IAAAC,EAAAA;AAAAL,eAAAA,EAAAI,GAAAH,EAEtBC,GAAI;AAAA,UAAA,IAACC,OAAI;AAAA,mBAAEhB,EAAAA;AAAAA,UAAU;AAAA,UAAA,IAAEmB,WAAQ;AAAA,mBAAExB,EAAAA;AAAAA,UAAM;AAAA,UAAAC,UACpCwB,CAAAA,MAAIN,EAAMO,GAAI;AAAA,YAAA,IAACD,OAAI;AAAA,qBAAEA,EAAAA;AAAAA,YAAM;AAAA,YAAA,IAAE7B,OAAI;AAAA,qBAAEf,EAAUgB,EAAMF,OAAO,EAAEE,EAAMD,IAAI;AAAA,YAAC;AAAA,UAAA,CAAA;AAAA,QAAA,CAAI,CAAA,GAAA0B;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAJ,EAAAV,GAAAW,EAIlFC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEnC,EAAQgB,GAAO;AAAA,MAAC;AAAA,MAAA,IAAAD,WAAA;AAAA,YAAA0B,IAAAC,EAAAA;AAAAV,eAAAA,EAAAS,GACYzB,CAAK,GAAAyB;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAT,EAAAV,GAAAW,EAE5CC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEnC,EAAQiB,GAAS;AAAA,MAAC;AAAA,MAAA,IAAAF,WAAA;AAAA,YAAA4B,IAAAC,EAAAA;AAAAZ,eAAAA,EAAAW,GACgB1B,CAAO,GAAA0B;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAX,EAAAV,GAAAW,EAEpDC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEnC,EAAQkB,GAAS;AAAA,MAAC;AAAA,MAAA,IAAAH,WAAA;AAAA,YAAA8B,IAAAC,EAAAA;AAAAd,eAAAA,EAAAa,GACY3B,CAAO,GAAA2B;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAvB;AAAAA,EAAA,GAAA;AAIvD;"}
+{"version":3,"file":"emptyState.js","sources":["../../../../../src/components/feedBack/emptyState/emptyState.tsx"],"sourcesContent":["import { 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  /** Test id of the root `<div>`; `empty-state` unless given. */\n  \"data-testid\"?: string | undefined;\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, [\n    \"class\",\n    \"title\",\n    \"icon\",\n    \"actions\",\n    \"variant\",\n    \"size\",\n    \"children\",\n    \"ref\",\n    \"data-testid\",\n  ]);\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={local[\"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"],"names":["ICON_SIZE","block","medium","small","inline","present","value","Array","isArray","length","EmptyState","props","merged","mergeProps","variant","size","local","rest","splitProps","icon","children","title","message","actions","iconName","resolved","undefined","_el$","_tmpl$5","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","_$insert","_$createComponent","Show","when","_el$2","_tmpl$","fallback","name","Icon","_el$3","_tmpl$2","_el$4","_tmpl$3","_el$5","_tmpl$4"],"mappings":"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"}

package/dist/headless/components/feedBack/message/message.js

@@ -1,37 +1,41 @@
-import { use as p, spread as g, mergeProps as u, insert as a, createComponent as m, effect as f, setAttribute as v, template as n, delegateEvents as d } from "solid-js/web";
+import { use as g, spread as p, mergeProps as u, insert as a, createComponent as c, effect as d, setAttribute as v, template as i, delegateEvents as f } from "solid-js/web";
 import { mergeProps as b, splitProps as _, Show as $ } from "solid-js";
 import h from "clsx";
 import { mergeRefs as w } from "../../../primitives/mergeRefs.js";
 import { Icon as y } from "../../base/icon/icon.js";
-var C = /* @__PURE__ */ n("<button class=smwb-message__close-btn type=button>"), A = /* @__PURE__ */ n("<div>"), P = /* @__PURE__ */ n("<div class=smwb-message__header>");
+var C = /* @__PURE__ */ i("<button class=smwb-message__close-btn type=button>"), A = /* @__PURE__ */ i("<div>"), P = /* @__PURE__ */ i("<div class=smwb-message__header>");
 function L(l) {
   const t = b({
     variant: "filled",
     closeAriaLabel: "Close"
-  }, l), [e, c] = _(t, ["class", "children", "type", "severity", "variant", "onClose", "closeAriaLabel", "ref"]), o = () => e.severity ?? e.type;
+  }, l), [e, o] = _(t, ["class", "children", "type", "severity", "variant", "onClose", "closeAriaLabel", "ref", "data-testid"]), n = () => e.severity ?? e.type;
   return (() => {
-    var r = A(), i = w(e.ref);
-    return typeof i == "function" && p(i, r), g(r, u(c, {
-      "data-testid": "message",
-      role: "alert",
+    var r = A(), m = w(e.ref);
+    return typeof m == "function" && g(m, r), p(r, u(o, {
+      get "data-testid"() {
+        return e["data-testid"] ?? "message";
+      },
+      get role() {
+        return o.role ?? "alert";
+      },
       get "aria-live"() {
-        return o() === "error" ? "assertive" : "polite";
+        return o["aria-live"] ?? (n() === "error" ? "assertive" : "polite");
       },
       get class() {
         return h("smwb-message", `smwb-message_${e.variant}`, e.class, {
-          [`smwb-message_${o()}`]: !!o()
+          [`smwb-message_${n()}`]: !!n()
         });
       }
-    }), !1, !0), a(r, () => e.children, null), a(r, m($, {
+    }), !1, !0), a(r, () => e.children, null), a(r, c($, {
       get when() {
         return e.onClose;
       },
       get children() {
         var s = C();
-        return s.$$click = () => e.onClose?.(), a(s, m(y, {
+        return s.$$click = () => e.onClose?.(), a(s, c(y, {
           name: "close",
           weight: 1e3
-        })), f(() => v(s, "aria-label", e.closeAriaLabel)), s;
+        })), d(() => v(s, "aria-label", e.closeAriaLabel)), s;
       }
     }), null), r;
   })();
@@ -45,7 +49,7 @@ function k(l) {
 const E = Object.assign(L, {
   Header: k
 });
-d(["click"]);
+f(["click"]);
 export {
   E as Message,
   L as MessageContainer

package/dist/headless/components/feedBack/message/message.js.map

@@ -1 +1 @@
-{"version":3,"file":"message.js","sources":["../../../../../src/components/feedBack/message/message.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 MessageSeverity = \"success\" | \"error\" | \"warning\" | \"info\";\n\nexport interface MessageProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  variant?: \"outlined\" | \"filled\" | \"left-accent\";\n  onClose?: () => void;\n  /** @deprecated use `severity`. */\n  type?: MessageSeverity;\n  /** Semantic severity of the message. */\n  severity?: MessageSeverity;\n  /** Accessible label for the close button. */\n  closeAriaLabel?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function MessageContainer(props: ParentProps<MessageProps>): JSX.Element {\n  const merged = mergeProps({ variant: \"filled\" as const, closeAriaLabel: \"Close\" }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"children\",\n    \"type\",\n    \"severity\",\n    \"variant\",\n    \"onClose\",\n    \"closeAriaLabel\",\n    \"ref\",\n  ]);\n\n  const resolvedSeverity = (): MessageSeverity | undefined => local.severity ?? local.type;\n\n  return (\n    <div\n      {...rest}\n      data-testid=\"message\"\n      role=\"alert\"\n      aria-live={resolvedSeverity() === \"error\" ? \"assertive\" : \"polite\"}\n      class={cn(\"smwb-message\", `smwb-message_${local.variant}`, local.class, {\n        [`smwb-message_${resolvedSeverity()}`]: Boolean(resolvedSeverity()),\n      })}\n      ref={mergeRefs(local.ref)}\n    >\n      {local.children}\n      <Show when={local.onClose}>\n        <button\n          class=\"smwb-message__close-btn\"\n          onClick={() => local.onClose?.()}\n          aria-label={local.closeAriaLabel}\n          type=\"button\"\n        >\n          <Icon name=\"close\" weight={1000} />\n        </button>\n      </Show>\n    </div>\n  );\n}\n\nfunction Header(props: ParentProps): JSX.Element {\n  return <div class=\"smwb-message__header\">{props.children}</div>;\n}\n\nexport const Message = Object.assign(MessageContainer, { Header });\n\nexport default Message;\n"],"names":["MessageContainer","props","merged","mergeProps","variant","closeAriaLabel","local","rest","splitProps","resolvedSeverity","severity","type","_el$","_tmpl$2","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","Boolean","_$insert","children","_$createComponent","Show","when","onClose","_el$2","_tmpl$","$$click","Icon","name","weight","_$effect","_$setAttribute","Header","_el$3","_tmpl$3","Message","Object","assign","_$delegateEvents"],"mappings":";;;;;;AAmBO,SAASA,EAAiBC,GAA+C;AAC9E,QAAMC,IAASC,EAAW;AAAA,IAAEC,SAAS;AAAA,IAAmBC,gBAAgB;AAAA,EAAA,GAAWJ,CAAK,GAClF,CAACK,GAAOC,CAAI,IAAIC,EAAWN,GAAQ,CACvC,SACA,YACA,QACA,YACA,WACA,WACA,kBACA,KAAK,CACN,GAEKO,IAAmBA,MAAmCH,EAAMI,YAAYJ,EAAMK;AAEpF,UAAA,MAAA;AAAA,QAAAC,IAAAC,EAAAA,GAAAC,IASSC,EAAUT,EAAMU,GAAG;AAAC,kBAAAF,KAAA,cAAAG,EAAAH,GAAAF,CAAA,GAAAM,EAAAN,GAAAO,EAPrBZ,GAAI;AAAA,MAAA,eACI;AAAA,MAAS,MAChB;AAAA,MAAO,IAAA,cAAA;AAAA,eACDE,EAAAA,MAAuB,UAAU,cAAc;AAAA,MAAQ;AAAA,MAAA,IAAA,QAAA;AAAA,eAC3DW,EAAG,gBAAgB,gBAAgBd,EAAMF,OAAO,IAAIE,EAAMe,OAAO;AAAA,UACtE,CAAC,gBAAgBZ,EAAAA,CAAkB,EAAE,GAAGa,EAAQb;QAAkB,CACnE;AAAA,MAAC;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAc,EAAAX,GAAA,MAGDN,EAAMkB,UAAQ,IAAA,GAAAD,EAAAX,GAAAa,EACdC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAErB,EAAMsB;AAAAA,MAAO;AAAA,MAAA,IAAAJ,WAAA;AAAA,YAAAK,IAAAC,EAAAA;AAAAD,eAAAA,EAAAE,UAGZ,MAAMzB,EAAMsB,UAAAA,GAAWL,EAAAM,GAAAJ,EAI/BO,GAAI;AAAA,UAACC,MAAI;AAAA,UAASC,QAAQ;AAAA,QAAA,CAAI,CAAA,GAAAC,QAAAC,EAAAP,GAAA,cAHnBvB,EAAMD,cAAc,CAAA,GAAAwB;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAjB;AAAAA,EAAA,GAAA;AAQ1C;AAEA,SAASyB,EAAOpC,GAAiC;AAC/C,UAAA,MAAA;AAAA,QAAAqC,IAAAC,EAAAA;AAAAhB,WAAAA,EAAAe,GAAA,MAA0CrC,EAAMuB,QAAQ,GAAAc;AAAAA,EAAA,GAAA;AAC1D;AAEO,MAAME,IAAUC,OAAOC,OAAO1C,GAAkB;AAAA,EAAEqC,QAAAA;AAAO,CAAC;AAE1CM,EAAA,CAAA,OAAA,CAAA;"}
+{"version":3,"file":"message.js","sources":["../../../../../src/components/feedBack/message/message.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 MessageSeverity = \"success\" | \"error\" | \"warning\" | \"info\";\n\nexport interface MessageProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  variant?: \"outlined\" | \"filled\" | \"left-accent\";\n  onClose?: () => void;\n  /** @deprecated use `severity`. */\n  type?: MessageSeverity;\n  /** Semantic severity of the message. */\n  severity?: MessageSeverity;\n  /** Accessible label for the close button. */\n  closeAriaLabel?: string;\n  /** Test id of the root `<div>`; `message` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function MessageContainer(props: ParentProps<MessageProps>): JSX.Element {\n  const merged = mergeProps({ variant: \"filled\" as const, closeAriaLabel: \"Close\" }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"children\",\n    \"type\",\n    \"severity\",\n    \"variant\",\n    \"onClose\",\n    \"closeAriaLabel\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  const resolvedSeverity = (): MessageSeverity | undefined => local.severity ?? local.type;\n\n  return (\n    <div\n      {...rest}\n      data-testid={local[\"data-testid\"] ?? \"message\"}\n      // Defaults: the caller's own role and aria-live win, and an explicit\n      // undefined keeps these.\n      role={rest.role ?? \"alert\"}\n      aria-live={rest[\"aria-live\"] ?? (resolvedSeverity() === \"error\" ? \"assertive\" : \"polite\")}\n      class={cn(\"smwb-message\", `smwb-message_${local.variant}`, local.class, {\n        [`smwb-message_${resolvedSeverity()}`]: Boolean(resolvedSeverity()),\n      })}\n      ref={mergeRefs(local.ref)}\n    >\n      {local.children}\n      <Show when={local.onClose}>\n        <button\n          class=\"smwb-message__close-btn\"\n          onClick={() => local.onClose?.()}\n          aria-label={local.closeAriaLabel}\n          type=\"button\"\n        >\n          <Icon name=\"close\" weight={1000} />\n        </button>\n      </Show>\n    </div>\n  );\n}\n\nfunction Header(props: ParentProps): JSX.Element {\n  return <div class=\"smwb-message__header\">{props.children}</div>;\n}\n\nexport const Message = Object.assign(MessageContainer, { Header });\n\nexport default Message;\n"],"names":["MessageContainer","props","merged","mergeProps","variant","closeAriaLabel","local","rest","splitProps","resolvedSeverity","severity","type","_el$","_tmpl$2","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","role","cn","class","Boolean","_$insert","children","_$createComponent","Show","when","onClose","_el$2","_tmpl$","$$click","Icon","name","weight","_$effect","_$setAttribute","Header","_el$3","_tmpl$3","Message","Object","assign","_$delegateEvents"],"mappings":";;;;;;AAqBO,SAASA,EAAiBC,GAA+C;AAC9E,QAAMC,IAASC,EAAW;AAAA,IAAEC,SAAS;AAAA,IAAmBC,gBAAgB;AAAA,EAAA,GAAWJ,CAAK,GAClF,CAACK,GAAOC,CAAI,IAAIC,EAAWN,GAAQ,CACvC,SACA,YACA,QACA,YACA,WACA,WACA,kBACA,OACA,aAAa,CACd,GAEKO,IAAmBA,MAAmCH,EAAMI,YAAYJ,EAAMK;AAEpF,UAAA,MAAA;AAAA,QAAAC,IAAAC,EAAAA,GAAAC,IAWSC,EAAUT,EAAMU,GAAG;AAAC,kBAAAF,KAAA,cAAAG,EAAAH,GAAAF,CAAA,GAAAM,EAAAN,GAAAO,EATrBZ,GAAI;AAAA,MAAA,IAAA,gBAAA;AAAA,eACKD,EAAM,aAAa,KAAK;AAAA,MAAS;AAAA,MAAA,IAG9Cc,OAAI;AAAA,eAAEb,EAAKa,QAAQ;AAAA,MAAO;AAAA,MAAA,IAAA,cAAA;AAAA,eACfb,EAAK,WAAW,MAAME,EAAAA,MAAuB,UAAU,cAAc;AAAA,MAAS;AAAA,MAAA,IAAA,QAAA;AAAA,eAClFY,EAAG,gBAAgB,gBAAgBf,EAAMF,OAAO,IAAIE,EAAMgB,OAAO;AAAA,UACtE,CAAC,gBAAgBb,EAAAA,CAAkB,EAAE,GAAGc,EAAQd;QAAkB,CACnE;AAAA,MAAC;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAe,EAAAZ,GAAA,MAGDN,EAAMmB,UAAQ,IAAA,GAAAD,EAAAZ,GAAAc,EACdC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEtB,EAAMuB;AAAAA,MAAO;AAAA,MAAA,IAAAJ,WAAA;AAAA,YAAAK,IAAAC,EAAAA;AAAAD,eAAAA,EAAAE,UAGZ,MAAM1B,EAAMuB,UAAAA,GAAWL,EAAAM,GAAAJ,EAI/BO,GAAI;AAAA,UAACC,MAAI;AAAA,UAASC,QAAQ;AAAA,QAAA,CAAI,CAAA,GAAAC,QAAAC,EAAAP,GAAA,cAHnBxB,EAAMD,cAAc,CAAA,GAAAyB;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAlB;AAAAA,EAAA,GAAA;AAQ1C;AAEA,SAAS0B,EAAOrC,GAAiC;AAC/C,UAAA,MAAA;AAAA,QAAAsC,IAAAC,EAAAA;AAAAhB,WAAAA,EAAAe,GAAA,MAA0CtC,EAAMwB,QAAQ,GAAAc;AAAAA,EAAA,GAAA;AAC1D;AAEO,MAAME,IAAUC,OAAOC,OAAO3C,GAAkB;AAAA,EAAEsC,QAAAA;AAAO,CAAC;AAE1CM,EAAA,CAAA,OAAA,CAAA;"}

package/dist/headless/components/feedBack/modal/modal.js

@@ -1,8 +1,8 @@
-import { createComponent as c, Portal as w, addEventListener as y, use as g, insert as s, Dynamic as C, mergeProps as k, effect as l, className as i, isServer as E, template as _, delegateEvents as A } from "solid-js/web";
-import { mergeProps as O, splitProps as $, createEffect as h, onCleanup as x, Show as L } from "solid-js";
+import { createComponent as c, Portal as y, use as g, insert as s, Dynamic as k, mergeProps as C, effect as l, className as i, isServer as $, template as _, delegateEvents as O } from "solid-js/web";
+import { mergeProps as A, splitProps as E, createEffect as h, onCleanup as P, Show as x } from "solid-js";
 import n from "clsx";
-import { createCssTransition as P } from "../../../primitives/createCssTransition.js";
-import { createFocusTrap as F } from "../../../primitives/createFocusTrap.js";
+import { createCssTransition as F } from "../../../primitives/createCssTransition.js";
+import { createFocusTrap as L } from "../../../primitives/createFocusTrap.js";
 import { isTopOverlayLayer as S } from "../../../primitives/overlayLayer.js";
 import { mergeRefs as z } from "../../../primitives/mergeRefs.js";
 var D = /* @__PURE__ */ _("<div data-smwb-overlay-layer>"), d = /* @__PURE__ */ _("<div>");
@@ -17,7 +17,7 @@ const M = {
   exitActive: "smwb-modal__overlay-exit-active"
 };
 function N(o) {
-  const r = O({
+  const r = A({
     animation: "fade",
     backdrop: "dark",
     size: "large",
@@ -26,9 +26,9 @@ function N(o) {
     disableAppearAnimation: !1,
     role: "dialog",
     closeOnEsc: !0
-  }, o), [e, f] = $(r, ["children", "onClose", "open", "class", "animation", "backdrop", "size", "closeOnOutsideClick", "asForm", "disableAppearAnimation", "role", "closeOnEsc", "ref"]);
+  }, o), [e, f] = E(r, ["children", "onClose", "open", "class", "animation", "backdrop", "size", "closeOnOutsideClick", "asForm", "disableAppearAnimation", "role", "closeOnEsc", "ref"]);
   let p, u;
-  const m = P({
+  const m = F({
     in: () => e.open,
     timeout: {
       appear: 225,
@@ -38,33 +38,37 @@ function N(o) {
     classNames: M,
     appear: !e.disableAppearAnimation
   });
-  return F({
+  L({
     active: () => e.open && m.mounted(),
     container: () => p
   }), h(() => {
     if (!e.open || !e.closeOnEsc || !e.onClose) return;
     const t = (a) => {
-      a.key === "Escape" && S(u) && e.onClose?.();
+      a.key === "Escape" && !a.defaultPrevented && S(u) && e.onClose?.();
     };
-    document.addEventListener("keydown", t), x(() => document.removeEventListener("keydown", t));
-  }), c(L, {
+    document.addEventListener("keydown", t), P(() => document.removeEventListener("keydown", t));
+  });
+  const b = () => {
+    e.closeOnOutsideClick && e.onClose?.();
+  };
+  return c(x, {
     get when() {
       return m.mounted();
     },
     get children() {
-      return c(w, {
+      return c(y, {
         get mount() {
-          return E ? void 0 : document.body;
+          return $ ? void 0 : document.body;
         },
         get children() {
           var t = D();
-          return y(t, "click", e.closeOnOutsideClick && e.onClose ? () => e.onClose?.() : void 0, !0), g((a) => u = a, t), s(t, c(C, k({
+          return t.$$click = b, g((a) => u = a, t), s(t, c(k, C({
             get component() {
               return e.asForm ? "form" : "div";
             }
           }, f, {
             ref(a) {
-              var v = z(e.ref, (b) => p = b);
+              var v = z(e.ref, (w) => p = w);
               typeof v == "function" && v(a);
             },
             get class() {
@@ -107,7 +111,7 @@ const I = Object.assign(N, {
   Header: T,
   Content: R
 });
-A(["click"]);
+O(["click"]);
 export {
   R as Content,
   j as Footer,

package/dist/headless/components/feedBack/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sources":["../../../../../src/components/feedBack/modal/modal.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, createEffect, mergeProps, onCleanup, splitProps } from \"solid-js\";\nimport { Dynamic, Portal, isServer } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { createCssTransition } from \"../../../primitives/createCssTransition\";\nimport { createFocusTrap } from \"../../../primitives/createFocusTrap\";\nimport { isTopOverlayLayer } from \"../../../primitives/overlayLayer\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface ModalProps {\n  size?: \"small\" | \"medium\" | \"large\" | \"fullscreen\";\n  closeOnOutsideClick?: boolean;\n  onClose?: () => void;\n  open: boolean;\n  animation?: \"fade\" | \"scale\" | \"drop\";\n  class?: string;\n  backdrop?: \"blured\" | \"dark\" | \"transparent\" | \"darkBlured\";\n  asForm?: boolean;\n  disableAppearAnimation?: boolean;\n  /** ARIA role of the dialog. */\n  role?: \"dialog\" | \"alertdialog\";\n  /** Close the modal when Escape is pressed. */\n  closeOnEsc?: boolean;\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n  \"aria-describedby\"?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst OVERLAY_CLASSNAMES = {\n  appear: \"smwb-modal__overlay-appear\",\n  appearActive: \"smwb-modal__overlay-appear-active\",\n  appearDone: \"smwb-modal__overlay-appear-done\",\n  enter: \"smwb-modal__overlay-enter\",\n  enterActive: \"smwb-modal__overlay-enter-active\",\n  enterDone: \"smwb-modal__overlay-enter-done\",\n  exit: \"smwb-modal__overlay-exit\",\n  exitActive: \"smwb-modal__overlay-exit-active\",\n};\n\nfunction ModalBase(props: ParentProps<ModalProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      animation: \"fade\" as const,\n      backdrop: \"dark\" as const,\n      size: \"large\" as const,\n      closeOnOutsideClick: true,\n      asForm: false,\n      disableAppearAnimation: false,\n      role: \"dialog\" as const,\n      closeOnEsc: true,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"children\",\n    \"onClose\",\n    \"open\",\n    \"class\",\n    \"animation\",\n    \"backdrop\",\n    \"size\",\n    \"closeOnOutsideClick\",\n    \"asForm\",\n    \"disableAppearAnimation\",\n    \"role\",\n    \"closeOnEsc\",\n    \"ref\",\n  ]);\n\n  let contentEl: HTMLDivElement | undefined;\n  let overlayEl: HTMLDivElement | undefined;\n\n  const transition = createCssTransition({\n    in: () => local.open,\n    timeout: { appear: 225, enter: 225, exit: 150 },\n    classNames: OVERLAY_CLASSNAMES,\n    appear: !local.disableAppearAnimation,\n  });\n\n  createFocusTrap({ active: () => local.open && transition.mounted(), container: () => contentEl });\n\n  createEffect(() => {\n    if (!local.open || !local.closeOnEsc || !local.onClose) return;\n    const onKeyDown = (event: KeyboardEvent): void => {\n      // Only the topmost overlay layer reacts to Escape.\n      if (event.key === \"Escape\" && isTopOverlayLayer(overlayEl)) local.onClose?.();\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n    onCleanup(() => document.removeEventListener(\"keydown\", onKeyDown));\n  });\n\n  return (\n    <Show when={transition.mounted()}>\n      <Portal mount={(isServer ? undefined : document.body) as Node}>\n        <div\n          ref={(el) => (overlayEl = el)}\n          data-smwb-overlay-layer\n          class={cn(\"smwb-modal__overlay\", `smwb-${local.backdrop}`, `smwb-${local.size}`, transition.classes())}\n          onClick={local.closeOnOutsideClick && local.onClose ? () => local.onClose?.() : undefined}\n        >\n          <Dynamic\n            component={local.asForm ? \"form\" : \"div\"}\n            {...rest}\n            ref={mergeRefs(local.ref, (el) => (contentEl = el as HTMLDivElement))}\n            class={cn(\"smwb-modal\", `smwb-${local.size}`, `smwb-${local.animation}`, local.class)}\n            onClick={(event: MouseEvent) => event.stopPropagation()}\n            role={local.role}\n            aria-modal=\"true\"\n          >\n            {local.children}\n          </Dynamic>\n        </div>\n      </Portal>\n    </Show>\n  );\n}\n\nexport interface ModalSlotProps {\n  class?: string;\n}\n\nexport function Header(props: ParentProps<ModalSlotProps>): JSX.Element {\n  return <div class={cn(\"smwb-modal__header\", props.class)}>{props.children}</div>;\n}\n\nexport function Content(props: ParentProps<ModalSlotProps>): JSX.Element {\n  return <div class={cn(\"smwb-modal__content\", props.class)}>{props.children}</div>;\n}\n\nexport function Footer(props: ParentProps<ModalSlotProps>): JSX.Element {\n  return <div class={cn(\"smwb-modal__footer\", props.class)}>{props.children}</div>;\n}\n\nexport const Modal = Object.assign(ModalBase, { Footer, Header, Content });\n\nexport default Modal;\n"],"names":["OVERLAY_CLASSNAMES","appear","appearActive","appearDone","enter","enterActive","enterDone","exit","exitActive","ModalBase","props","merged","mergeProps","animation","backdrop","size","closeOnOutsideClick","asForm","disableAppearAnimation","role","closeOnEsc","local","rest","splitProps","contentEl","overlayEl","transition","createCssTransition","in","open","timeout","classNames","createFocusTrap","active","mounted","container","createEffect","onClose","onKeyDown","event","key","isTopOverlayLayer","document","addEventListener","onCleanup","removeEventListener","_$createComponent","Show","when","children","Portal","mount","isServer","undefined","body","_el$","_tmpl$","_$addEventListener","_$use","el","_$insert","Dynamic","_$mergeProps","component","ref","r$","_ref$","mergeRefs","cn","class","onClick","stopPropagation","_$effect","_$className","classes","Header","_el$2","_tmpl$2","Content","_el$3","Footer","_el$4","Modal","Object","assign","_$delegateEvents"],"mappings":"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"}
+{"version":3,"file":"modal.js","sources":["../../../../../src/components/feedBack/modal/modal.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, createEffect, mergeProps, onCleanup, splitProps } from \"solid-js\";\nimport { Dynamic, Portal, isServer } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { createCssTransition } from \"../../../primitives/createCssTransition\";\nimport { createFocusTrap } from \"../../../primitives/createFocusTrap\";\nimport { isTopOverlayLayer } from \"../../../primitives/overlayLayer\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface ModalProps {\n  size?: \"small\" | \"medium\" | \"large\" | \"fullscreen\";\n  closeOnOutsideClick?: boolean;\n  onClose?: () => void;\n  open: boolean;\n  animation?: \"fade\" | \"scale\" | \"drop\";\n  class?: string;\n  backdrop?: \"blured\" | \"dark\" | \"transparent\" | \"darkBlured\";\n  asForm?: boolean;\n  disableAppearAnimation?: boolean;\n  /** ARIA role of the dialog. */\n  role?: \"dialog\" | \"alertdialog\";\n  /** Close the modal when Escape is pressed. */\n  closeOnEsc?: boolean;\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n  \"aria-describedby\"?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst OVERLAY_CLASSNAMES = {\n  appear: \"smwb-modal__overlay-appear\",\n  appearActive: \"smwb-modal__overlay-appear-active\",\n  appearDone: \"smwb-modal__overlay-appear-done\",\n  enter: \"smwb-modal__overlay-enter\",\n  enterActive: \"smwb-modal__overlay-enter-active\",\n  enterDone: \"smwb-modal__overlay-enter-done\",\n  exit: \"smwb-modal__overlay-exit\",\n  exitActive: \"smwb-modal__overlay-exit-active\",\n};\n\nfunction ModalBase(props: ParentProps<ModalProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      animation: \"fade\" as const,\n      backdrop: \"dark\" as const,\n      size: \"large\" as const,\n      closeOnOutsideClick: true,\n      asForm: false,\n      disableAppearAnimation: false,\n      role: \"dialog\" as const,\n      closeOnEsc: true,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"children\",\n    \"onClose\",\n    \"open\",\n    \"class\",\n    \"animation\",\n    \"backdrop\",\n    \"size\",\n    \"closeOnOutsideClick\",\n    \"asForm\",\n    \"disableAppearAnimation\",\n    \"role\",\n    \"closeOnEsc\",\n    \"ref\",\n  ]);\n\n  let contentEl: HTMLDivElement | undefined;\n  let overlayEl: HTMLDivElement | undefined;\n\n  const transition = createCssTransition({\n    in: () => local.open,\n    timeout: { appear: 225, enter: 225, exit: 150 },\n    classNames: OVERLAY_CLASSNAMES,\n    appear: !local.disableAppearAnimation,\n  });\n\n  createFocusTrap({ active: () => local.open && transition.mounted(), container: () => contentEl });\n\n  createEffect(() => {\n    if (!local.open || !local.closeOnEsc || !local.onClose) return;\n    const onKeyDown = (event: KeyboardEvent): void => {\n      // Only the topmost overlay layer reacts to Escape, and not to one handled inside\n      // it, e.g. by a menu closing on it.\n      if (event.key === \"Escape\" && !event.defaultPrevented && isTopOverlayLayer(overlayEl)) local.onClose?.();\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n    onCleanup(() => document.removeEventListener(\"keydown\", onKeyDown));\n  });\n\n  // Always attached and checks the props itself. Solid binds event handlers\n  // once, and the portal builds the overlay in a tracked scope, so choosing the\n  // handler by these props there would rebuild the dialog, content included,\n  // whenever one of them changes.\n  const onOverlayClick = (): void => {\n    if (local.closeOnOutsideClick) local.onClose?.();\n  };\n\n  return (\n    <Show when={transition.mounted()}>\n      <Portal mount={(isServer ? undefined : document.body) as Node}>\n        <div\n          ref={(el) => (overlayEl = el)}\n          data-smwb-overlay-layer\n          class={cn(\"smwb-modal__overlay\", `smwb-${local.backdrop}`, `smwb-${local.size}`, transition.classes())}\n          onClick={onOverlayClick}\n        >\n          <Dynamic\n            component={local.asForm ? \"form\" : \"div\"}\n            {...rest}\n            ref={mergeRefs(local.ref, (el) => (contentEl = el as HTMLDivElement))}\n            class={cn(\"smwb-modal\", `smwb-${local.size}`, `smwb-${local.animation}`, local.class)}\n            onClick={(event: MouseEvent) => event.stopPropagation()}\n            role={local.role}\n            aria-modal=\"true\"\n          >\n            {local.children}\n          </Dynamic>\n        </div>\n      </Portal>\n    </Show>\n  );\n}\n\nexport interface ModalSlotProps {\n  class?: string;\n}\n\nexport function Header(props: ParentProps<ModalSlotProps>): JSX.Element {\n  return <div class={cn(\"smwb-modal__header\", props.class)}>{props.children}</div>;\n}\n\nexport function Content(props: ParentProps<ModalSlotProps>): JSX.Element {\n  return <div class={cn(\"smwb-modal__content\", props.class)}>{props.children}</div>;\n}\n\nexport function Footer(props: ParentProps<ModalSlotProps>): JSX.Element {\n  return <div class={cn(\"smwb-modal__footer\", props.class)}>{props.children}</div>;\n}\n\nexport const Modal = Object.assign(ModalBase, { Footer, Header, Content });\n\nexport default Modal;\n"],"names":["OVERLAY_CLASSNAMES","appear","appearActive","appearDone","enter","enterActive","enterDone","exit","exitActive","ModalBase","props","merged","mergeProps","animation","backdrop","size","closeOnOutsideClick","asForm","disableAppearAnimation","role","closeOnEsc","local","rest","splitProps","contentEl","overlayEl","transition","createCssTransition","in","open","timeout","classNames","createFocusTrap","active","mounted","container","createEffect","onClose","onKeyDown","event","key","defaultPrevented","isTopOverlayLayer","document","addEventListener","onCleanup","removeEventListener","onOverlayClick","_$createComponent","Show","when","children","Portal","mount","isServer","undefined","body","_el$","_tmpl$","$$click","_$use","el","_$insert","Dynamic","_$mergeProps","component","ref","r$","_ref$","mergeRefs","cn","class","onClick","stopPropagation","_$effect","_$className","classes","Header","_el$2","_tmpl$2","Content","_el$3","Footer","_el$4","Modal","Object","assign","_$delegateEvents"],"mappings":"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"}