@smwb/ui-solid 0.12.1 → 0.14.0

package/dist/components/dataDisplay/stat/stat.js

@@ -1,21 +1,22 @@
-import { createComponent as l, Dynamic as b, mergeProps as d, insert as s, memo as y, use as I, spread as W, template as a } from "solid-js/web";
+import { createComponent as l, Dynamic as w, mergeProps as d, insert as s, memo as y, use as I, spread as x, template as a } from "solid-js/web";
 import '../../../assets/styles/less/components/stat/stat.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                   */
-import { mergeProps as x, splitProps as $, children as m, Show as p } from "solid-js";
-import g from "clsx";
+import { mergeProps as P, splitProps as g, children as m, Show as u } from "solid-js";
+import $ from "clsx";
 import { mergeRefs as v } from "../../../primitives/mergeRefs.js";
-import { Icon as P } from "../../base/icon/icon.js";
-var S = /* @__PURE__ */ a("<span class=smwb-stat__label>"), k = /* @__PURE__ */ a("<span class=smwb-stat__value>"), z = /* @__PURE__ */ a("<span class=smwb-stat__hint>"), C = /* @__PURE__ */ a("<div class=smwb-stat__extra>"), D = /* @__PURE__ */ a("<span class=smwb-stat__icon aria-hidden=true>"), G = /* @__PURE__ */ a("<div>");
-function H(c) {
-  const r = x({
+import { mergeStyle as S } from "../../../primitives/mergeStyle.js";
+import { Icon as W } from "../../base/icon/icon.js";
+var k = /* @__PURE__ */ a("<span class=smwb-stat__label>"), z = /* @__PURE__ */ a("<span class=smwb-stat__value>"), C = /* @__PURE__ */ a("<span class=smwb-stat__hint>"), D = /* @__PURE__ */ a("<div class=smwb-stat__extra>"), G = /* @__PURE__ */ a("<span class=smwb-stat__icon aria-hidden=true>"), R = /* @__PURE__ */ a("<div>");
+function K(c) {
+  const r = P({
     tone: "neutral",
     variant: "tile"
-  }, c), [e, u] = $(r, ["class", "label", "value", "hint", "icon", "tone", "variant", "href", "children", "ref"]), n = m(() => e.label), o = m(() => e.value), f = m(() => e.hint), h = m(() => e.icon), _ = m(() => e.children);
-  return l(b, d({
+  }, c), [e, p] = g(r, ["class", "label", "value", "hint", "icon", "tone", "variant", "href", "children", "ref", "data-testid"]), n = m(() => e.label), o = m(() => e.value), _ = m(() => e.hint), f = m(() => e.icon), h = m(() => e.children);
+  return l(w, d({
     get component() {
       return e.href ? "a" : "div";
     }
-  }, u, {
+  }, p, {
     ref(t) {
       var i = v(e.ref);
       typeof i == "function" && i(t);
@@ -23,23 +24,25 @@ function H(c) {
     get href() {
       return e.href;
     },
-    "data-testid": "stat",
+    get "data-testid"() {
+      return e["data-testid"] ?? "stat";
+    },
     get class() {
-      return g("smwb-stat", `smwb-stat_${e.variant}`, `smwb-stat_tone-${e.tone}`, {
+      return $("smwb-stat", `smwb-stat_${e.variant}`, `smwb-stat_tone-${e.tone}`, {
         "smwb-stat_link": !!e.href,
-        "smwb-stat_with-icon": !!h()
+        "smwb-stat_with-icon": !!f()
       }, e.class);
     },
     get children() {
-      return [l(p, {
+      return [l(u, {
         get when() {
-          return h();
+          return f();
         },
         children: (t) => (() => {
-          var i = D();
+          var i = G();
           return s(i, (() => {
-            var w = y(() => typeof t() == "string");
-            return () => w() ? l(P, {
+            var b = y(() => typeof t() == "string");
+            return () => b() ? l(W, {
               get name() {
                 return t();
               },
@@ -48,54 +51,49 @@ function H(c) {
           })()), i;
         })()
       }), (() => {
-        var t = S();
+        var t = k();
         return s(t, n), t;
       })(), (() => {
-        var t = k();
+        var t = z();
         return s(t, o), t;
-      })(), l(p, {
+      })(), l(u, {
         get when() {
-          return f();
+          return _();
         },
         get children() {
-          var t = z();
-          return s(t, f), t;
+          var t = C();
+          return s(t, _), t;
         }
-      }), l(p, {
+      }), l(u, {
         get when() {
-          return _();
+          return h();
         },
         get children() {
-          var t = C();
-          return s(t, _), t;
+          var t = D();
+          return s(t, h), t;
         }
       })];
     }
   }));
 }
-function J(c) {
-  const [r, e] = $(c, ["class", "style", "minItemWidth", "children", "ref"]), u = () => {
-    if (r.minItemWidth === void 0) return r.style;
-    const n = typeof r.minItemWidth == "number" ? `${r.minItemWidth}px` : r.minItemWidth;
-    return typeof r.style == "string" ? `${r.style};--smwb-stat-min:${n}` : {
-      ...r.style,
-      "--smwb-stat-min": n
-    };
-  };
+function L(c) {
+  const [r, e] = g(c, ["class", "style", "minItemWidth", "children", "ref"]), p = () => S(r.style, {
+    "--smwb-stat-min": typeof r.minItemWidth == "number" ? `${r.minItemWidth}px` : r.minItemWidth
+  });
   return (() => {
-    var n = G(), o = v(r.ref);
-    return typeof o == "function" && I(o, n), W(n, d(e, {
+    var n = R(), o = v(r.ref);
+    return typeof o == "function" && I(o, n), x(n, d(e, {
       get class() {
-        return g("smwb-stat-group", r.class);
+        return $("smwb-stat-group", r.class);
       },
       get style() {
-        return u();
+        return p();
       }
     }), !1, !0), s(n, () => r.children), n;
   })();
 }
 export {
-  H as Stat,
-  J as StatGroup
+  K as Stat,
+  L as StatGroup
 };
 //# sourceMappingURL=stat.js.map

package/dist/components/dataDisplay/stat/stat.js.map

@@ -1 +1 @@
-{"version":3,"file":"stat.js","sources":["../../../../src/components/dataDisplay/stat/stat.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type StatTone = \"neutral\" | \"info\" | \"success\" | \"warning\" | \"error\";\n\nexport interface StatProps extends JSX.HTMLAttributes<HTMLElement> {\n  /** What the figure counts. */\n  label: JSX.Element;\n  /** The figure — a number, or a short value such as \"3 / 14\". */\n  value: JSX.Element;\n  /** A line under the value: a comparison, a period, a caveat. */\n  hint?: JSX.Element;\n  /** An icon beside the figure: a Material Symbols name or an element. */\n  icon?: string | JSX.Element;\n  /** Colour of the accent (a tile's edge, the icon). `warning` and `error` colour the figure too. */\n  tone?: StatTone;\n  /** `tile`: a bordered card with an accent edge, for KPIs. `plain`: text only, for rows of small figures. */\n  variant?: \"tile\" | \"plain\";\n  /** Make the whole stat a link to what the figure is made of. */\n  href?: string;\n  ref?: Ref<HTMLElement>;\n}\n\n/**\n * A figure with its label: a KPI tile on a dashboard, or a small stat in a row.\n * Children go under it — a meter, a sparkline, a note.\n */\nexport function Stat(props: ParentProps<StatProps>): JSX.Element {\n  const merged = mergeProps({ tone: \"neutral\" as StatTone, variant: \"tile\" as const }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"label\",\n    \"value\",\n    \"hint\",\n    \"icon\",\n    \"tone\",\n    \"variant\",\n    \"href\",\n    \"children\",\n    \"ref\",\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 label = children(() => local.label);\n  const value = children(() => local.value);\n  const hint = children(() => local.hint);\n  const icon = children(() => local.icon);\n  const extra = children(() => local.children);\n\n  return (\n    <Dynamic\n      component={local.href ? \"a\" : \"div\"}\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      href={local.href}\n      data-testid=\"stat\"\n      class={cn(\n        \"smwb-stat\",\n        `smwb-stat_${local.variant}`,\n        `smwb-stat_tone-${local.tone}`,\n        { \"smwb-stat_link\": !!local.href, \"smwb-stat_with-icon\": !!icon() },\n        local.class\n      )}\n    >\n      <Show when={icon()}>\n        {(resolved) => (\n          <span class=\"smwb-stat__icon\" aria-hidden=\"true\">\n            {typeof resolved() === \"string\" ? <Icon name={resolved() as string} size={20} /> : resolved()}\n          </span>\n        )}\n      </Show>\n      <span class=\"smwb-stat__label\">{label()}</span>\n      <span class=\"smwb-stat__value\">{value()}</span>\n      <Show when={hint()}>\n        <span class=\"smwb-stat__hint\">{hint()}</span>\n      </Show>\n      <Show when={extra()}>\n        <div class=\"smwb-stat__extra\">{extra()}</div>\n      </Show>\n    </Dynamic>\n  );\n}\n\nexport interface StatGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /** Narrowest a stat may get before the row wraps; a CSS length or px. 9rem by default. */\n  minItemWidth?: number | string;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/** A responsive row of stats: as many columns as fit, each at least `minItemWidth` wide. */\nexport function StatGroup(props: ParentProps<StatGroupProps>): JSX.Element {\n  const [local, rest] = splitProps(props, [\"class\", \"style\", \"minItemWidth\", \"children\", \"ref\"]);\n  const style = (): JSX.CSSProperties | string | undefined => {\n    if (local.minItemWidth === undefined) return local.style;\n    const width = typeof local.minItemWidth === \"number\" ? `${local.minItemWidth}px` : local.minItemWidth;\n    if (typeof local.style === \"string\") return `${local.style};--smwb-stat-min:${width}`;\n    return { ...local.style, \"--smwb-stat-min\": width };\n  };\n  return (\n    <div {...rest} ref={mergeRefs(local.ref)} class={cn(\"smwb-stat-group\", local.class)} style={style()}>\n      {local.children}\n    </div>\n  );\n}\n\nexport default Stat;\n"],"names":["Stat","props","merged","mergeProps","tone","variant","local","rest","splitProps","label","children","value","hint","icon","extra","_$createComponent","Dynamic","_$mergeProps","component","href","ref","r$","_ref$","mergeRefs","cn","class","Show","when","resolved","_el$5","_tmpl$5","_$insert","_c$","_$memo","Icon","name","size","_el$","_tmpl$","_el$2","_tmpl$2","_el$3","_tmpl$3","_el$4","_tmpl$4","StatGroup","style","minItemWidth","undefined","width","_el$6","_tmpl$6","_ref$2","_$use","_$spread"],"mappings":"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"}
+{"version":3,"file":"stat.js","sources":["../../../../src/components/dataDisplay/stat/stat.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { mergeStyle } from \"../../../primitives/mergeStyle\";\n\nexport type StatTone = \"neutral\" | \"info\" | \"success\" | \"warning\" | \"error\";\n\nexport interface StatProps extends JSX.HTMLAttributes<HTMLElement> {\n  /** What the figure counts. */\n  label: JSX.Element;\n  /** The figure — a number, or a short value such as \"3 / 14\". */\n  value: JSX.Element;\n  /** A line under the value: a comparison, a period, a caveat. */\n  hint?: JSX.Element;\n  /** An icon beside the figure: a Material Symbols name or an element. */\n  icon?: string | JSX.Element;\n  /** Colour of the accent (a tile's edge, the icon). `warning` and `error` colour the figure too. */\n  tone?: StatTone;\n  /** `tile`: a bordered card with an accent edge, for KPIs. `plain`: text only, for rows of small figures. */\n  variant?: \"tile\" | \"plain\";\n  /** Make the whole stat a link to what the figure is made of. */\n  href?: string;\n  /** Test id of the root; `stat` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLElement>;\n}\n\n/**\n * A figure with its label: a KPI tile on a dashboard, or a small stat in a row.\n * Children go under it — a meter, a sparkline, a note.\n */\nexport function Stat(props: ParentProps<StatProps>): JSX.Element {\n  const merged = mergeProps({ tone: \"neutral\" as StatTone, variant: \"tile\" as const }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"label\",\n    \"value\",\n    \"hint\",\n    \"icon\",\n    \"tone\",\n    \"variant\",\n    \"href\",\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 label = children(() => local.label);\n  const value = children(() => local.value);\n  const hint = children(() => local.hint);\n  const icon = children(() => local.icon);\n  const extra = children(() => local.children);\n\n  return (\n    <Dynamic\n      component={local.href ? \"a\" : \"div\"}\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      href={local.href}\n      data-testid={local[\"data-testid\"] ?? \"stat\"}\n      class={cn(\n        \"smwb-stat\",\n        `smwb-stat_${local.variant}`,\n        `smwb-stat_tone-${local.tone}`,\n        { \"smwb-stat_link\": !!local.href, \"smwb-stat_with-icon\": !!icon() },\n        local.class\n      )}\n    >\n      <Show when={icon()}>\n        {(resolved) => (\n          <span class=\"smwb-stat__icon\" aria-hidden=\"true\">\n            {typeof resolved() === \"string\" ? <Icon name={resolved() as string} size={20} /> : resolved()}\n          </span>\n        )}\n      </Show>\n      <span class=\"smwb-stat__label\">{label()}</span>\n      <span class=\"smwb-stat__value\">{value()}</span>\n      <Show when={hint()}>\n        <span class=\"smwb-stat__hint\">{hint()}</span>\n      </Show>\n      <Show when={extra()}>\n        <div class=\"smwb-stat__extra\">{extra()}</div>\n      </Show>\n    </Dynamic>\n  );\n}\n\nexport interface StatGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /** Narrowest a stat may get before the row wraps; a CSS length or px. 9rem by default. */\n  minItemWidth?: number | string;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/** A responsive row of stats: as many columns as fit, each at least `minItemWidth` wide. */\nexport function StatGroup(props: ParentProps<StatGroupProps>): JSX.Element {\n  const [local, rest] = splitProps(props, [\"class\", \"style\", \"minItemWidth\", \"children\", \"ref\"]);\n  const style = (): JSX.CSSProperties | string | undefined =>\n    mergeStyle(local.style, {\n      \"--smwb-stat-min\": typeof local.minItemWidth === \"number\" ? `${local.minItemWidth}px` : local.minItemWidth,\n    });\n  return (\n    <div {...rest} ref={mergeRefs(local.ref)} class={cn(\"smwb-stat-group\", local.class)} style={style()}>\n      {local.children}\n    </div>\n  );\n}\n\nexport default Stat;\n"],"names":["Stat","props","merged","mergeProps","tone","variant","local","rest","splitProps","label","children","value","hint","icon","extra","_$createComponent","Dynamic","_$mergeProps","component","href","ref","r$","_ref$","mergeRefs","cn","class","Show","when","resolved","_el$5","_tmpl$5","_$insert","_c$","_$memo","Icon","name","size","_el$","_tmpl$","_el$2","_tmpl$2","_el$3","_tmpl$3","_el$4","_tmpl$4","StatGroup","style","mergeStyle","minItemWidth","_el$6","_tmpl$6","_ref$2","_$use","_$spread"],"mappings":"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"}

package/dist/components/dataDisplay/statusDot/index.d.ts

@@ -0,0 +1,2 @@
+export { StatusDot, default } from "./statusDot";
+export type { StatusDotProps, StatusDotStatus, StatusDotColor, StatusDotSize } from "./statusDot";

package/dist/components/dataDisplay/statusDot/statusDot.d.ts

@@ -0,0 +1,35 @@
+import type { JSX } from "solid-js";
+import { type Ref } from "../../../primitives/mergeRefs";
+/** What the marker says: `active` is under way, `attention` waits for someone, `idle` rests, `done` is finished. */
+export type StatusDotStatus = "active" | "attention" | "idle" | "done" | "error" | "unknown";
+/** The theme colour names `Chip` takes; `default` is the neutral on-surface colour. */
+export type StatusDotColor = "default" | "primary" | "secondary" | "error" | "success" | "warning" | "info";
+export type StatusDotSize = "sm" | "md";
+export interface StatusDotProps extends Omit<JSX.HTMLAttributes<HTMLSpanElement>, "role" | "children" | "aria-label"> {
+    /**
+     * What the dot says, and so its colour: `active` info, `attention` warning, `idle` neutral, `done` success,
+     * `error` error. `unknown` is a ring in the outline colour. Without `status` (and without `color`) the dot is
+     * `unknown`.
+     */
+    status?: StatusDotStatus | undefined;
+    /**
+     * A theme colour instead of the status's own, or on its own with no `status` (a plain disc). Given with a
+     * `status`, the status still sets the shape.
+     */
+    color?: StatusDotColor | undefined;
+    /** `md` (12px) unless given; `sm` is 8px. */
+    size?: StatusDotSize | undefined;
+    /**
+     * A ring spreads from the dot. On unless given for `active`, off for every other status. Never drawn while the
+     * user prefers reduced motion.
+     */
+    pulse?: boolean | undefined;
+    /** What the dot means in words, e.g. "Working": the accessible name, read by assistive technology. */
+    label: string;
+    /** Test id of the root; `status-dot` unless given. */
+    "data-testid"?: string | undefined;
+    ref?: Ref<HTMLSpanElement>;
+}
+/** A small status marker: a dot coloured and shaped by `status`, named by `label`. */
+export declare function StatusDot(props: StatusDotProps): JSX.Element;
+export default StatusDot;

package/dist/components/dataDisplay/statusDot/statusDot.js

@@ -0,0 +1,31 @@
+import { use as l, spread as u, mergeProps as m, template as i } from "solid-js/web";
+import '../../../assets/styles/less/components/statusDot/statusDot.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                             */
+import { splitProps as p } from "solid-js";
+import n from "clsx";
+import { mergeRefs as d } from "../../../primitives/mergeRefs.js";
+var c = /* @__PURE__ */ i("<span>");
+function $(r) {
+  const [t, a] = p(r, ["class", "status", "color", "size", "pulse", "label", "ref", "data-testid"]), o = () => t.status ?? (t.color === void 0 ? "unknown" : void 0);
+  return (() => {
+    var s = c(), e = d(t.ref);
+    return typeof e == "function" && l(e, s), u(s, m(a, {
+      role: "img",
+      get "aria-label"() {
+        return t.label;
+      },
+      get "data-testid"() {
+        return t["data-testid"] ?? "status-dot";
+      },
+      get class() {
+        return n("smwb-status-dot", `smwb-status-dot_size-${t.size ?? "md"}`, o() && `smwb-status-dot_status-${o()}`, t.color && `smwb-status-dot_color-${t.color}`, {
+          "smwb-status-dot_pulse": t.pulse ?? t.status === "active"
+        }, t.class);
+      }
+    }), !1, !1), s;
+  })();
+}
+export {
+  $ as StatusDot
+};
+//# sourceMappingURL=statusDot.js.map

package/dist/components/dataDisplay/statusDot/statusDot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"statusDot.js","sources":["../../../../src/components/dataDisplay/statusDot/statusDot.tsx"],"sourcesContent":["import type { JSX } from \"solid-js\";\nimport { splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\n/** What the marker says: `active` is under way, `attention` waits for someone, `idle` rests, `done` is finished. */\nexport type StatusDotStatus = \"active\" | \"attention\" | \"idle\" | \"done\" | \"error\" | \"unknown\";\n\n/** The theme colour names `Chip` takes; `default` is the neutral on-surface colour. */\nexport type StatusDotColor = \"default\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport type StatusDotSize = \"sm\" | \"md\";\n\nexport interface StatusDotProps extends Omit<JSX.HTMLAttributes<HTMLSpanElement>, \"role\" | \"children\" | \"aria-label\"> {\n  /**\n   * What the dot says, and so its colour: `active` info, `attention` warning, `idle` neutral, `done` success,\n   * `error` error. `unknown` is a ring in the outline colour. Without `status` (and without `color`) the dot is\n   * `unknown`.\n   */\n  status?: StatusDotStatus | undefined;\n  /**\n   * A theme colour instead of the status's own, or on its own with no `status` (a plain disc). Given with a\n   * `status`, the status still sets the shape.\n   */\n  color?: StatusDotColor | undefined;\n  /** `md` (12px) unless given; `sm` is 8px. */\n  size?: StatusDotSize | undefined;\n  /**\n   * A ring spreads from the dot. On unless given for `active`, off for every other status. Never drawn while the\n   * user prefers reduced motion.\n   */\n  pulse?: boolean | undefined;\n  /** What the dot means in words, e.g. \"Working\": the accessible name, read by assistive technology. */\n  label: string;\n  /** Test id of the root; `status-dot` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLSpanElement>;\n}\n\n/** A small status marker: a dot coloured and shaped by `status`, named by `label`. */\nexport function StatusDot(props: StatusDotProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\"class\", \"status\", \"color\", \"size\", \"pulse\", \"label\", \"ref\", \"data-testid\"]);\n\n  // A bare colour is a plain disc; with neither, the dot is \"unknown\".\n  const shown = (): StatusDotStatus | undefined => local.status ?? (local.color === undefined ? \"unknown\" : undefined);\n\n  return (\n    <span\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      role=\"img\"\n      aria-label={local.label}\n      data-testid={local[\"data-testid\"] ?? \"status-dot\"}\n      class={cn(\n        \"smwb-status-dot\",\n        `smwb-status-dot_size-${local.size ?? \"md\"}`,\n        shown() && `smwb-status-dot_status-${shown()}`,\n        local.color && `smwb-status-dot_color-${local.color}`,\n        { \"smwb-status-dot_pulse\": local.pulse ?? local.status === \"active\" },\n        local.class\n      )}\n    />\n  );\n}\n\nexport default StatusDot;\n"],"names":["StatusDot","props","local","rest","splitProps","shown","status","color","undefined","_el$","_tmpl$","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","label","cn","size","pulse","class"],"mappings":";;;;;;;AA0CO,SAASA,EAAUC,GAAoC;AAC5D,QAAM,CAACC,GAAOC,CAAI,IAAIC,EAAWH,GAAO,CAAC,SAAS,UAAU,SAAS,QAAQ,SAAS,SAAS,OAAO,aAAa,CAAC,GAG9GI,IAAQA,MAAmCH,EAAMI,WAAWJ,EAAMK,UAAUC,SAAY,YAAYA;AAE1G,UAAA,MAAA;AAAA,QAAAC,IAAAC,EAAAA,GAAAC,IAGSC,EAAUV,EAAMW,GAAG;AAAC,kBAAAF,KAAA,cAAAG,EAAAH,GAAAF,CAAA,GAAAM,EAAAN,GAAAO,EADrBb,GAAI;AAAA,MAAA,MAEH;AAAA,MAAK,IAAA,eAAA;AAAA,eACED,EAAMe;AAAAA,MAAK;AAAA,MAAA,IAAA,gBAAA;AAAA,eACVf,EAAM,aAAa,KAAK;AAAA,MAAY;AAAA,MAAA,IAAA,QAAA;AAAA,eAC1CgB,EACL,mBACA,wBAAwBhB,EAAMiB,QAAQ,IAAI,IAC1Cd,EAAAA,KAAW,0BAA0BA,EAAAA,CAAO,IAC5CH,EAAMK,SAAS,yBAAyBL,EAAMK,KAAK,IACnD;AAAA,UAAE,yBAAyBL,EAAMkB,SAASlB,EAAMI,WAAW;AAAA,QAAA,GAC3DJ,EAAMmB,KACR;AAAA,MAAC;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAZ;AAAAA,EAAA,GAAA;AAGP;"}

package/dist/components/dataDisplay/swimlanes/index.d.ts

@@ -0,0 +1,2 @@
+export { Swimlanes, default, SWIMLANES_DEFAULT_ROW_HEIGHT, SWIMLANES_DEFAULT_HEIGHT, SWIMLANES_DEFAULT_OVERSCAN, } from "./swimlanes";
+export type { SwimlanesProps, SwimlanesLane } from "./swimlanes";

package/dist/components/dataDisplay/swimlanes/swimlanes.d.ts

@@ -0,0 +1,75 @@
+import { type JSX } from "solid-js";
+import { type Ref } from "../../../primitives/mergeRefs";
+/** Every lane is this tall; the window maths needs a fixed height. */
+export declare const SWIMLANES_DEFAULT_ROW_HEIGHT = 64;
+/** The grid's height in pixels when neither the prop nor the caller's CSS sets one. */
+export declare const SWIMLANES_DEFAULT_HEIGHT = 480;
+/** Lanes rendered above and below the visible ones. */
+export declare const SWIMLANES_DEFAULT_OVERSCAN = 4;
+export interface SwimlanesLane {
+    /** Stable, unique id: keys the row, the selection and the Tab stop. */
+    id: string;
+    /**
+     * The lane's header (avatar, name, role); drawn in the fixed left column,
+     * `role="rowheader"`. Called when the row mounts, and again on each remount,
+     * so the rows that scrolling brings back are built then and not up front;
+     * called again, too, when a refreshed lane brings a new function.
+     */
+    header: () => JSX.Element;
+    /**
+     * The lane's content (current item, progress, last signal, budget);
+     * `role="gridcell"`. Called when the row mounts, and again on each remount.
+     * A refreshed lane that brings a new function rebuilds the content, and focus
+     * on a control inside it goes to the page: keep the function stable per id.
+     */
+    content: () => JSX.Element;
+    /** A disabled lane can be focused but not selected (`aria-disabled`). */
+    disabled?: boolean | undefined;
+}
+export interface SwimlanesProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "onSelect" | "role" | "children"> {
+    /** The lanes, one row each, in the order they are shown. */
+    lanes: readonly SwimlanesLane[];
+    /** Accessible name of the grid (`aria-label`); `aria-labelledby` wins when given. */
+    label?: string | undefined;
+    /** The selected lane's id (controlled); `null` selects nothing. */
+    selectedId?: string | null | undefined;
+    /** The lane selected at first (uncontrolled). */
+    defaultSelectedId?: string | null | undefined;
+    /** A lane was selected (its id) or the selection was cleared (`null`). */
+    onSelectedChange?: ((id: string | null) => void) | undefined;
+    /**
+     * Whether lanes can be selected; true by default. False: no `aria-selected`, no selected look,
+     * and Enter, Space, Escape and a click select nothing; a `selectedId` given anyway is ignored.
+     */
+    selectable?: boolean | undefined;
+    /** Row height in px (every lane is this tall; virtualisation needs a fixed height). 64 by default. */
+    rowHeight?: number | undefined;
+    /** Width of the fixed header column: px or any CSS length; 240px by default from the stylesheet. */
+    headerWidth?: number | string | undefined;
+    /** Narrowest width of the content column; when the grid is narrower, it scrolls sideways. 0 by default. */
+    contentMinWidth?: number | string | undefined;
+    /**
+     * Height of the grid (the scroller): a number of pixels or any CSS length;
+     * 480 by default, from the stylesheet, so a height in `style` works too.
+     */
+    height?: number | string | undefined;
+    /** Lanes rendered above and below the visible ones. 4 by default. Read once, when the grid mounts. */
+    overscan?: number | undefined;
+    /** Shown instead of the grid when `lanes` is empty. */
+    emptyLabel?: JSX.Element;
+    /** Test id of the root `<div>`; `swimlanes` unless given. */
+    "data-testid"?: string | undefined;
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * Participant lanes: one row per participant, with the header (avatar, name,
+ * role) in a column that stays put while the content beside it (the current
+ * item, progress, the last signal, the budget) scrolls sideways under it. The
+ * rows are virtualised, so 200 lanes cost a window of about twenty rows, and
+ * the lane that holds the Tab stop is always among them, so focus survives
+ * scrolling. Lanes are selected by a click or the keyboard, under the library's
+ * controlled-state rule; the grid is one Tab stop, and a lane's own links and
+ * buttons are reachable from it.
+ */
+export declare function Swimlanes(props: SwimlanesProps): JSX.Element;
+export default Swimlanes;