@smwb/ui-solid 0.11.2 → 0.12.0

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

@@ -0,0 +1,87 @@
+import { use as d, spread as b, mergeProps as $, insert as r, createComponent as c, template as s } from "solid-js/web";
+import { splitProps as g, mergeProps as P, children as u, Show as f } from "solid-js";
+import h from "clsx";
+import { mergeRefs as w } from "../../../primitives/mergeRefs.js";
+import { Icon as x } from "../../base/icon/icon.js";
+var S = /* @__PURE__ */ s("<ol>"), T = /* @__PURE__ */ s("<li><div class=smwb-timeline__label></div><ol class=smwb-timeline__items>"), I = /* @__PURE__ */ s("<div class=smwb-timeline__meta>"), L = /* @__PURE__ */ s("<div class=smwb-timeline__content>"), z = /* @__PURE__ */ s("<div class=smwb-timeline__time>"), G = /* @__PURE__ */ s("<li><span class=smwb-timeline__mark aria-hidden=true></span><div class=smwb-timeline__body><div class=smwb-timeline__title>"), R = /* @__PURE__ */ s("<span class=smwb-timeline__dot>");
+function E(m) {
+  const [e, t] = g(m, ["class", "dense", "stickyLabels", "children", "ref"]);
+  return (() => {
+    var n = S(), i = w(e.ref);
+    return typeof i == "function" && d(i, n), b(n, $(t, {
+      get class() {
+        return h("smwb-timeline", {
+          "smwb-timeline_dense": e.dense,
+          "smwb-timeline_sticky-labels": e.stickyLabels
+        }, e.class);
+      }
+    }), !1, !0), r(n, () => e.children), n;
+  })();
+}
+function F(m) {
+  const [e, t] = g(m, ["class", "label", "children", "ref"]);
+  return (() => {
+    var n = T(), i = n.firstChild, o = i.nextSibling, _ = w(e.ref);
+    return typeof _ == "function" && d(_, n), b(n, $(t, {
+      get class() {
+        return h("smwb-timeline__group", e.class);
+      }
+    }), !1, !0), r(i, () => e.label), r(o, () => e.children), n;
+  })();
+}
+function H(m) {
+  const e = P({
+    tone: "neutral"
+  }, m), [t, n] = g(e, ["class", "title", "meta", "time", "icon", "tone", "children", "ref"]), i = u(() => t.meta), o = u(() => t.time), _ = u(() => t.icon), v = u(() => t.children);
+  return (() => {
+    var a = G(), y = a.firstChild, p = y.nextSibling, C = p.firstChild, k = w(t.ref);
+    return typeof k == "function" && d(k, a), b(a, $(n, {
+      get class() {
+        return h("smwb-timeline__item", `smwb-timeline__item_tone-${t.tone}`, t.class);
+      }
+    }), !1, !0), r(y, c(f, {
+      get when() {
+        return _();
+      },
+      get fallback() {
+        return R();
+      },
+      children: (l) => typeof l() == "string" ? c(x, {
+        get name() {
+          return l();
+        },
+        size: 16
+      }) : l()
+    })), r(C, () => t.title), r(p, c(f, {
+      get when() {
+        return i();
+      },
+      get children() {
+        var l = I();
+        return r(l, i), l;
+      }
+    }), null), r(p, c(f, {
+      get when() {
+        return v();
+      },
+      get children() {
+        var l = L();
+        return r(l, v), l;
+      }
+    }), null), r(a, c(f, {
+      get when() {
+        return o();
+      },
+      get children() {
+        var l = z();
+        return r(l, o), l;
+      }
+    }), null), a;
+  })();
+}
+export {
+  E as Timeline,
+  F as TimelineGroup,
+  H as TimelineItem
+};
+//# sourceMappingURL=timeline.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"timeline.js","sources":["../../../../../src/components/dataDisplay/timeline/timeline.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 type TimelineTone = \"neutral\" | \"info\" | \"success\" | \"warning\" | \"error\";\n\nexport interface TimelineProps extends JSX.HTMLAttributes<HTMLOListElement> {\n  /** Tighter rows, for side panels. */\n  dense?: boolean;\n  /** Keep a group's label in view while its events scroll past (in a scrolling container). */\n  stickyLabels?: boolean;\n  ref?: Ref<HTMLOListElement>;\n}\n\nexport interface TimelineGroupProps extends Omit<JSX.HTMLAttributes<HTMLLIElement>, \"title\"> {\n  /** What groups the events — a day, a week, a stage. */\n  label: JSX.Element;\n  ref?: Ref<HTMLLIElement>;\n}\n\nexport interface TimelineItemProps extends Omit<JSX.HTMLAttributes<HTMLLIElement>, \"title\"> {\n  /** The event itself: a line of text, usually a link. */\n  title: JSX.Element;\n  /** A second line: who, what kind, where. */\n  meta?: JSX.Element;\n  /** When: a time or a date, at the end of the row. */\n  time?: JSX.Element;\n  /** The event's mark on the line: a Material Symbols name or an element. A dot without it. */\n  icon?: string | JSX.Element;\n  /** Colour of the mark. */\n  tone?: TimelineTone;\n  ref?: Ref<HTMLLIElement>;\n}\n\n/**\n * Events on a line, newest or oldest first as given: TimelineItem children,\n * optionally grouped by TimelineGroup (a day, a week).\n */\nexport function Timeline(props: ParentProps<TimelineProps>): JSX.Element {\n  const [local, rest] = splitProps(props, [\"class\", \"dense\", \"stickyLabels\", \"children\", \"ref\"]);\n  return (\n    <ol\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\n        \"smwb-timeline\",\n        { \"smwb-timeline_dense\": local.dense, \"smwb-timeline_sticky-labels\": local.stickyLabels },\n        local.class\n      )}\n    >\n      {local.children}\n    </ol>\n  );\n}\n\n/** A labelled run of events: the label, then its TimelineItem children on the line. */\nexport function TimelineGroup(props: ParentProps<TimelineGroupProps>): JSX.Element {\n  const [local, rest] = splitProps(props, [\"class\", \"label\", \"children\", \"ref\"]);\n  return (\n    <li {...rest} ref={mergeRefs(local.ref)} class={cn(\"smwb-timeline__group\", local.class)}>\n      <div class=\"smwb-timeline__label\">{local.label}</div>\n      <ol class=\"smwb-timeline__items\">{local.children}</ol>\n    </li>\n  );\n}\n\n/** One event: its mark on the line, the title and meta lines, the time; children below. */\nexport function TimelineItem(props: ParentProps<TimelineItemProps>): JSX.Element {\n  const merged = mergeProps({ tone: \"neutral\" as TimelineTone }, props);\n  const [local, rest] = splitProps(merged, [\"class\", \"title\", \"meta\", \"time\", \"icon\", \"tone\", \"children\", \"ref\"]);\n\n  // Read each slot once: markup passed as a prop is created anew on every read,\n  // and during hydration the copy made for a <Show> test has no server DOM node.\n  const meta = children(() => local.meta);\n  const time = children(() => local.time);\n  const icon = children(() => local.icon);\n  const content = children(() => local.children);\n\n  return (\n    <li\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-timeline__item\", `smwb-timeline__item_tone-${local.tone}`, local.class)}\n    >\n      <span class=\"smwb-timeline__mark\" aria-hidden=\"true\">\n        <Show when={icon()} fallback={<span class=\"smwb-timeline__dot\" />}>\n          {(resolved) => (typeof resolved() === \"string\" ? <Icon name={resolved() as string} size={16} /> : resolved())}\n        </Show>\n      </span>\n      <div class=\"smwb-timeline__body\">\n        <div class=\"smwb-timeline__title\">{local.title}</div>\n        <Show when={meta()}>\n          <div class=\"smwb-timeline__meta\">{meta()}</div>\n        </Show>\n        <Show when={content()}>\n          <div class=\"smwb-timeline__content\">{content()}</div>\n        </Show>\n      </div>\n      <Show when={time()}>\n        <div class=\"smwb-timeline__time\">{time()}</div>\n      </Show>\n    </li>\n  );\n}\n\nexport default Timeline;\n"],"names":["Timeline","props","local","rest","splitProps","_el$","_tmpl$","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","dense","stickyLabels","class","_$insert","children","TimelineGroup","_el$2","_tmpl$2","_el$3","firstChild","_el$4","nextSibling","_ref$2","label","TimelineItem","merged","mergeProps","tone","meta","time","icon","content","_el$5","_tmpl$6","_el$6","_el$7","_el$8","_ref$3","_$createComponent","Show","when","fallback","_tmpl$7","resolved","Icon","name","size","title","_el$9","_tmpl$3","_el$0","_tmpl$4","_el$1","_tmpl$5"],"mappings":";;;;;;AAuCO,SAASA,EAASC,GAAgD;AACvE,QAAM,CAACC,GAAOC,CAAI,IAAIC,EAAWH,GAAO,CAAC,SAAS,SAAS,gBAAgB,YAAY,KAAK,CAAC;AAC7F,UAAA,MAAA;AAAA,QAAAI,IAAAC,EAAAA,GAAAC,IAGSC,EAAUN,EAAMO,GAAG;AAAC,kBAAAF,KAAA,cAAAG,EAAAH,GAAAF,CAAA,GAAAM,EAAAN,GAAAO,EADrBT,GAAI;AAAA,MAAA,IAAA,QAAA;AAAA,eAEDU,EACL,iBACA;AAAA,UAAE,uBAAuBX,EAAMY;AAAAA,UAAO,+BAA+BZ,EAAMa;AAAAA,QAAAA,GAC3Eb,EAAMc,KACR;AAAA,MAAC;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAC,EAAAZ,GAAA,MAEAH,EAAMgB,QAAQ,GAAAb;AAAAA,EAAA,GAAA;AAGrB;AAGO,SAASc,EAAclB,GAAqD;AACjF,QAAM,CAACC,GAAOC,CAAI,IAAIC,EAAWH,GAAO,CAAC,SAAS,SAAS,YAAY,KAAK,CAAC;AAC7E,UAAA,MAAA;AAAA,QAAAmB,IAAAC,EAAAA,GAAAC,IAAAF,EAAAG,YAAAC,IAAAF,EAAAG,aAAAC,IACqBlB,EAAUN,EAAMO,GAAG;AAAC,kBAAAiB,KAAA,cAAAhB,EAAAgB,GAAAN,CAAA,GAAAT,EAAAS,GAAAR,EAA/BT,GAAI;AAAA,MAAA,IAAA,QAAA;AAAA,eAAoCU,EAAG,wBAAwBX,EAAMc,KAAK;AAAA,MAAC;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAC,EAAAK,GAAA,MAClDpB,EAAMyB,KAAK,GAAAV,EAAAO,GAAA,MACZtB,EAAMgB,QAAQ,GAAAE;AAAAA,EAAA,GAAA;AAGtD;AAGO,SAASQ,EAAa3B,GAAoD;AAC/E,QAAM4B,IAASC,EAAW;AAAA,IAAEC,MAAM;AAAA,EAAA,GAA6B9B,CAAK,GAC9D,CAACC,GAAOC,CAAI,IAAIC,EAAWyB,GAAQ,CAAC,SAAS,SAAS,QAAQ,QAAQ,QAAQ,QAAQ,YAAY,KAAK,CAAC,GAIxGG,IAAOd,EAAS,MAAMhB,EAAM8B,IAAI,GAChCC,IAAOf,EAAS,MAAMhB,EAAM+B,IAAI,GAChCC,IAAOhB,EAAS,MAAMhB,EAAMgC,IAAI,GAChCC,IAAUjB,EAAS,MAAMhB,EAAMgB,QAAQ;AAE7C,UAAA,MAAA;AAAA,QAAAkB,IAAAC,KAAAC,IAAAF,EAAAb,YAAAgB,IAAAD,EAAAb,aAAAe,IAAAD,EAAAhB,YAAAkB,IAGSjC,EAAUN,EAAMO,GAAG;AAAC,kBAAAgC,KAAA,cAAA/B,EAAA+B,GAAAL,CAAA,GAAAzB,EAAAyB,GAAAxB,EADrBT,GAAI;AAAA,MAAA,IAAA,QAAA;AAAA,eAEDU,EAAG,uBAAuB,4BAA4BX,EAAM6B,IAAI,IAAI7B,EAAMc,KAAK;AAAA,MAAC;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAC,EAAAqB,GAAAI,EAGpFC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEV,EAAAA;AAAAA,MAAM;AAAA,MAAA,IAAEW,WAAQ;AAAA,eAAAC,EAAAA;AAAAA,MAAA;AAAA,MAAA5B,UACxB6B,CAAAA,MAAc,OAAOA,OAAe,WAAQL,EAAIM,GAAI;AAAA,QAAA,IAACC,OAAI;AAAA,iBAAEF,EAAAA;AAAAA,QAAoB;AAAA,QAAEG,MAAM;AAAA,MAAA,CAAE,IAAOH,EAAAA;AAAAA,IAAS,CAAE,CAAA,GAAA9B,EAAAuB,GAAA,MAI5EtC,EAAMiD,KAAK,GAAAlC,EAAAsB,GAAAG,EAC7CC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEZ,EAAAA;AAAAA,MAAM;AAAA,MAAA,IAAAd,WAAA;AAAA,YAAAkC,IAAAC,EAAAA;AAAApC,eAAAA,EAAAmC,GACkBpB,CAAI,GAAAoB;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAnC,EAAAsB,GAAAG,EAEvCC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAET,EAAAA;AAAAA,MAAS;AAAA,MAAA,IAAAjB,WAAA;AAAA,YAAAoC,IAAAC,EAAAA;AAAAtC,eAAAA,EAAAqC,GACkBnB,CAAO,GAAAmB;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAArC,EAAAmB,GAAAM,EAG/CC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEX,EAAAA;AAAAA,MAAM;AAAA,MAAA,IAAAf,WAAA;AAAA,YAAAsC,IAAAC,EAAAA;AAAAxC,eAAAA,EAAAuC,GACkBvB,CAAI,GAAAuB;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAApB;AAAAA,EAAA,GAAA;AAI9C;"}

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

@@ -1,48 +1,61 @@
-import { createComponent as a, Dynamic as s, mergeProps as i } from "solid-js/web";
-import { mergeProps as h, splitProps as m } from "solid-js";
+import { createComponent as l, Dynamic as i, mergeProps as m } from "solid-js/web";
+import { mergeProps as y, splitProps as g } from "solid-js";
 import c from "clsx";
-import { mergeRefs as g } from "../../../primitives/mergeRefs.js";
-const l = {
+import { mergeRefs as h } from "../../../primitives/mergeRefs.js";
+const u = {
   h1: "h1",
   h2: "h2",
   h3: "h3",
   h4: "h4",
   h5: "h5",
   h6: "h6",
-  subtitle1: "h6",
-  subtitle2: "h6",
+  // A subtitle is not a heading: as h6 it would break the page's outline.
+  subtitle1: "p",
+  subtitle2: "p",
   body1: "p",
   body2: "p",
   caption: "span",
   overline: "span",
   button: "span"
 };
-function d(t) {
-  const e = h({
+function _(n) {
+  const s = y({
     variant: "body1",
     color: "inherit"
-  }, t), [r, n] = m(e, ["variant", "color", "align", "gutterBottom", "noWrap", "component", "class", "children", "ref"]);
-  return a(s, i({
+  }, 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({
     get component() {
-      return r.component ?? l[r.variant];
+      return t.component ?? u[t.variant];
     },
-    ref(p) {
-      var o = g(r.ref);
-      typeof o == "function" && o(p);
+    ref(r) {
+      var e = h(t.ref);
+      typeof e == "function" && e(r);
     },
     get 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
-      }, r.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);
+    },
+    get style() {
+      return a();
     }
-  }, n, {
+  }, p, {
     get children() {
-      return r.children;
+      return t.children;
     }
   }));
 }
 export {
-  d 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  subtitle1: \"h6\",\n  subtitle2: \"h6\",\n  body1: \"p\",\n  body2: \"p\",\n  caption: \"span\",\n  overline: \"span\",\n  button: \"span\",\n};\n\nexport interface TypographyProps extends JSX.HTMLAttributes<HTMLElement> {\n  variant?: TypographyVariant;\n  color?: TypographyColor;\n  align?: \"left\" | \"center\" | \"right\" | \"justify\";\n  /** Add a bottom margin (block rhythm). */\n  gutterBottom?: boolean;\n  /** Truncate with an ellipsis on a single line. */\n  noWrap?: boolean;\n  /** Render as a different element. */\n  component?: string;\n  ref?: Ref<HTMLElement>;\n}\n\nexport function Typography(props: ParentProps<TypographyProps>): JSX.Element {\n  const merged = mergeProps({ variant: \"body1\" as TypographyVariant, color: \"inherit\" as TypographyColor }, props);\n  const [local, rest] = splitProps(merged, [\n    \"variant\",\n    \"color\",\n    \"align\",\n    \"gutterBottom\",\n    \"noWrap\",\n    \"component\",\n    \"class\",\n    \"children\",\n    \"ref\",\n  ]);\n\n  return (\n    <Dynamic\n      component={local.component ?? defaultTag[local.variant]}\n      ref={mergeRefs(local.ref)}\n      class={cn(\n        \"smwb-typography\",\n        `smwb-typography_${local.variant}`,\n        local.color !== \"inherit\" && `smwb-typography_color-${local.color}`,\n        local.align && `smwb-typography_align-${local.align}`,\n        {\n          \"smwb-typography_gutter\": local.gutterBottom,\n          \"smwb-typography_nowrap\": local.noWrap,\n        },\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </Dynamic>\n  );\n}\n\nexport default Typography;\n"],"names":["defaultTag","h1","h2","h3","h4","h5","h6","subtitle1","subtitle2","body1","body2","caption","overline","button","Typography","props","merged","mergeProps","variant","color","local","rest","splitProps","_$createComponent","Dynamic","_$mergeProps","component","ref","r$","_ref$","mergeRefs","cn","align","gutterBottom","noWrap","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,EACJC,WAAW;AAAA,EACXC,WAAW;AAAA,EACXC,OAAO;AAAA,EACPC,OAAO;AAAA,EACPC,SAAS;AAAA,EACTC,UAAU;AAAA,EACVC,QAAQ;AACV;AAeO,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,aACA,SACA,YACA,KAAK,CACN;AAED,SAAAO,EACGC,GAAOC,EAAA;AAAA,IAAA,IACNC,YAAS;AAAA,aAAEN,EAAMM,aAAa1B,EAAWoB,EAAMF,OAAO;AAAA,IAAC;AAAA,IAAAS,IAAAC,GAAA;AAAA,UAAAC,IAClDC,EAAUV,EAAMO,GAAG;AAAC,aAAAE,KAAA,cAAAA,EAAAD,CAAA;AAAA,IAAA;AAAA,IAAA,IAAA,QAAA;AAAA,aAClBG,EACL,mBACA,mBAAmBX,EAAMF,OAAO,IAChCE,EAAMD,UAAU,aAAa,yBAAyBC,EAAMD,KAAK,IACjEC,EAAMY,SAAS,yBAAyBZ,EAAMY,KAAK,IACnD;AAAA,QACE,0BAA0BZ,EAAMa;AAAAA,QAChC,0BAA0Bb,EAAMc;AAAAA,MAAAA,GAElCd,EAAMe,KACR;AAAA,IAAC;AAAA,EAAA,GACGd,GAAI;AAAA,IAAA,IAAAe,WAAA;AAAA,aAEPhB,EAAMgB;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\";\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;"}

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

@@ -0,0 +1,84 @@
+import { use as v, spread as w, mergeProps as y, insert as s, createComponent as i, template as l } from "solid-js/web";
+import { mergeProps as b, splitProps as z, children as m, Show as a } from "solid-js";
+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>");
+const x = {
+  block: {
+    medium: 32,
+    small: 24
+  },
+  inline: {
+    medium: 18,
+    small: 16
+  }
+}, o = (n) => n != null && n !== !1 && n !== "" && !(Array.isArray(n) && n.length === 0);
+function B(n) {
+  const g = 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 = () => {
+    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, {
+      get class() {
+        return P("smwb-empty-state", `smwb-empty-state_${t.variant}`, `smwb-empty-state_${t.size}`, t.class);
+      }
+    }), !1, !0), s(r, i(a, {
+      get when() {
+        return o(c());
+      },
+      get children() {
+        var e = S();
+        return s(e, i(a, {
+          get when() {
+            return h();
+          },
+          get fallback() {
+            return c();
+          },
+          children: ($) => i(I, {
+            get name() {
+              return $();
+            },
+            get size() {
+              return x[t.variant][t.size];
+            }
+          })
+        })), e;
+      }
+    }), null), s(r, i(a, {
+      get when() {
+        return o(p());
+      },
+      get children() {
+        var e = A();
+        return s(e, p), e;
+      }
+    }), null), s(r, i(a, {
+      get when() {
+        return o(d());
+      },
+      get children() {
+        var e = C();
+        return s(e, d), e;
+      }
+    }), null), s(r, i(a, {
+      get when() {
+        return o(u());
+      },
+      get children() {
+        var e = E();
+        return s(e, u), e;
+      }
+    }), null), r;
+  })();
+}
+export {
+  B as EmptyState
+};
+//# sourceMappingURL=emptyState.js.map

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

@@ -0,0 +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":"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"}

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

@@ -1,79 +1,111 @@
-import { createComponent as c, spread as n, mergeProps as u, insert as _, effect as f, style as b, template as i, use as v } from "solid-js/web";
-import { createEffect as $, mergeProps as w, splitProps as h, Show as m } from "solid-js";
-import p from "clsx";
-var y = /* @__PURE__ */ i("<svg class=smwb-indicator_circular__svg><circle class=smwb-indicator_circular__circle cx=24 cy=24 r=22>"), l = /* @__PURE__ */ i("<div>"), P = /* @__PURE__ */ i("<div><div class=smwb-indicator_linear__thumb>"), V = /* @__PURE__ */ i("<div class=smwb-indicator_circular__thumb>");
-function C(o) {
+import { createComponent as u, spread as h, mergeProps as w, insert as d, effect as $, className as C, style as y, template as n, use as z } from "solid-js/web";
+import { createEffect as k, mergeProps as L, splitProps as M, Show as p } from "solid-js";
+import g from "clsx";
+var D = /* @__PURE__ */ n("<svg class=smwb-indicator_circular__svg><circle class=smwb-indicator_circular__circle cx=24 cy=24 r=22>"), I = /* @__PURE__ */ n("<div><div class=smwb-indicator_linear__thumb>"), m = /* @__PURE__ */ n("<div>"), S = /* @__PURE__ */ n("<div><span class=smwb-indicator__value>"), W = /* @__PURE__ */ n("<div class=smwb-indicator_circular__thumb>");
+function B(l) {
   let a;
-  return $(() => {
-    const r = o.progressValue ?? 0;
+  return k(() => {
+    const e = l.progressValue ?? 0;
     if (!a || !a.r) return;
-    const t = a.r.baseVal.value;
-    if (t) {
-      const e = 2 * Math.PI * t;
-      a.style.strokeDasharray = `${e} ${e}`, a.style.strokeDashoffset = `${e - r / 100 * e}`;
+    const s = a.r.baseVal.value;
+    if (s) {
+      const t = 2 * Math.PI * s;
+      a.style.strokeDasharray = `${t} ${t}`, a.style.strokeDashoffset = `${t - e / 100 * t}`;
     }
   }), (() => {
-    var r = y(), t = r.firstChild, e = a;
-    return typeof e == "function" ? v(e, t) : a = t, r;
+    var e = D(), s = e.firstChild, t = a;
+    return typeof t == "function" ? z(t, s) : a = s, e;
   })();
 }
-function D(o) {
-  const a = w({
+const E = (l) => typeof l == "number" ? `${l}px` : l;
+function q(l) {
+  const a = L({
     progressValue: 0,
+    max: 100,
     color: "primary",
     size: "medium"
-  }, o), [r] = h(a, ["type", "variant", "class", "progressValue", "color", "size", "aria-label", "id"]), t = () => r.color !== "primary" ? `smwb-indicator_color-${r.color}` : void 0, e = () => ({
+  }, l), [e] = M(a, ["type", "variant", "class", "progressValue", "max", "color", "size", "fullWidth", "width", "valueLabel", "aria-label", "id"]), s = () => e.color !== "primary" ? `smwb-indicator_color-${e.color}` : void 0, t = () => {
+    const r = e.max > 0 ? e.progressValue / e.max : 0;
+    return Math.min(100, Math.max(0, r * 100));
+  }, x = () => !!e.valueLabel && e.type === "determinate", V = () => {
+    const r = e.valueLabel;
+    return typeof r == "function" ? r(e.progressValue, e.max) : e.max === 100 ? `${Math.round(e.progressValue)}%` : `${e.progressValue} / ${e.max}`;
+  }, f = () => ({
+    "smwb-indicator_full-width": e.fullWidth
+  }), v = () => e.width !== void 0 ? {
+    width: E(e.width)
+  } : void 0, _ = () => ({
     role: "progressbar",
-    "aria-label": r["aria-label"],
-    id: r.id,
-    ...r.type === "determinate" ? {
-      "aria-valuenow": r.progressValue,
+    "aria-label": e["aria-label"],
+    id: e.id,
+    ...e.type === "determinate" ? {
+      "aria-valuenow": e.progressValue,
       "aria-valuemin": 0,
-      "aria-valuemax": 100
+      "aria-valuemax": e.max
     } : {}
-  });
-  return c(m, {
+  }), b = (r) => (() => {
+    var o = I(), i = o.firstChild;
+    return h(o, w(_, {
+      get class() {
+        return g("smwb-indicator_linear", `smwb-${e.type}`, s(), r && f(), r && e.class);
+      },
+      get style() {
+        return r ? v() : void 0;
+      }
+    }), !1, !0), $((c) => y(i, e.type === "determinate" ? {
+      width: `${t()}%`
+    } : {}, c)), o;
+  })();
+  return u(p, {
     get when() {
-      return r.variant === "circular";
+      return e.variant === "circular";
     },
     get fallback() {
-      return (() => {
-        var s = P(), d = s.firstChild;
-        return n(s, u(e, {
-          get class() {
-            return p("smwb-indicator_linear", `smwb-${r.type}`, t(), r.class);
-          }
-        }), !1, !0), f((g) => b(d, r.type === "determinate" ? {
-          width: `${r.progressValue}%`
-        } : {}, g)), s;
-      })();
+      return u(p, {
+        get when() {
+          return x();
+        },
+        get fallback() {
+          return b(!0);
+        },
+        get children() {
+          var r = S(), o = r.firstChild;
+          return d(r, () => b(!1), o), d(o, V), $((i) => {
+            var c = g("smwb-indicator_labeled", f(), e.class), P = v();
+            return c !== i.e && C(r, i.e = c), i.t = y(r, P, i.t), i;
+          }, {
+            e: void 0,
+            t: void 0
+          }), r;
+        }
+      });
     },
     get children() {
-      var s = l();
-      return n(s, u(e, {
+      var r = m();
+      return h(r, w(_, {
         get class() {
-          return p("smwb-indicator_circular", `smwb-${r.type}`, t(), `smwb-indicator_size-${r.size}`, r.class);
+          return g("smwb-indicator_circular", `smwb-${e.type}`, s(), `smwb-indicator_size-${e.size}`, e.class);
         }
-      }), !1, !0), _(s, c(m, {
+      }), !1, !0), d(r, u(p, {
         get when() {
-          return r.type === "determinate";
+          return e.type === "determinate";
         },
         get fallback() {
-          return [V(), l(), l(), l()];
+          return [W(), m(), m(), m()];
         },
         get children() {
-          return c(C, {
+          return u(B, {
             get progressValue() {
-              return r.progressValue;
+              return t();
             }
           });
         }
-      })), s;
+      })), r;
     }
   });
 }
 export {
-  C as CircularProgress,
-  D as ProgressIndicator
+  B as CircularProgress,
+  q as ProgressIndicator
 };
 //# sourceMappingURL=progressIndicator.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"progressIndicator.js","sources":["../../../../../src/components/feedBack/progressIndicator/progressIndicator.tsx"],"sourcesContent":["import { type JSX, Show, createEffect, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\n\nexport type ProgressColor = \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface ProgressIndicatorProps {\n  class?: string;\n  variant: \"circular\" | \"linear\";\n  type: \"determinate\" | \"indeterminate\";\n  progressValue?: number;\n  /** Semantic color. */\n  color?: ProgressColor;\n  /** Circular size preset. */\n  size?: \"small\" | \"medium\" | \"large\";\n  /** Accessible name for the progress bar. */\n  \"aria-label\"?: string;\n  id?: string;\n}\n\nexport interface CircularProgressProps {\n  progressValue?: number;\n}\n\nexport function CircularProgress(props: CircularProgressProps): JSX.Element {\n  let circle: SVGCircleElement | undefined;\n\n  createEffect(() => {\n    const value = props.progressValue ?? 0;\n    if (!circle || !circle.r) return;\n    const radius = circle.r.baseVal.value;\n    if (radius) {\n      const length = 2 * Math.PI * radius;\n      circle.style.strokeDasharray = `${length} ${length}`;\n      circle.style.strokeDashoffset = `${length - (value / 100) * length}`;\n    }\n  });\n\n  return (\n    <svg class=\"smwb-indicator_circular__svg\">\n      <circle class=\"smwb-indicator_circular__circle\" cx=\"24\" cy=\"24\" r=\"22\" ref={circle} />\n    </svg>\n  );\n}\n\nexport function ProgressIndicator(props: ProgressIndicatorProps): JSX.Element {\n  const merged = mergeProps({ progressValue: 0, color: \"primary\" as ProgressColor, size: \"medium\" as const }, props);\n  const [local] = splitProps(merged, [\"type\", \"variant\", \"class\", \"progressValue\", \"color\", \"size\", \"aria-label\", \"id\"]);\n\n  const colorClass = (): string | undefined =>\n    local.color !== \"primary\" ? `smwb-indicator_color-${local.color}` : undefined;\n\n  const ariaProps = (): JSX.HTMLAttributes<HTMLDivElement> => ({\n    role: \"progressbar\",\n    \"aria-label\": local[\"aria-label\"],\n    id: local.id,\n    ...(local.type === \"determinate\"\n      ? { \"aria-valuenow\": local.progressValue, \"aria-valuemin\": 0, \"aria-valuemax\": 100 }\n      : {}),\n  });\n\n  return (\n    <Show\n      when={local.variant === \"circular\"}\n      fallback={\n        <div {...ariaProps()} class={cn(\"smwb-indicator_linear\", `smwb-${local.type}`, colorClass(), local.class)}>\n          <div\n            class=\"smwb-indicator_linear__thumb\"\n            style={local.type === \"determinate\" ? { width: `${local.progressValue}%` } : {}}\n          />\n        </div>\n      }\n    >\n      <div\n        {...ariaProps()}\n        class={cn(\n          \"smwb-indicator_circular\",\n          `smwb-${local.type}`,\n          colorClass(),\n          `smwb-indicator_size-${local.size}`,\n          local.class\n        )}\n      >\n        <Show\n          when={local.type === \"determinate\"}\n          fallback={\n            <>\n              <div class=\"smwb-indicator_circular__thumb\" />\n              <div />\n              <div />\n              <div />\n            </>\n          }\n        >\n          <CircularProgress progressValue={local.progressValue} />\n        </Show>\n      </div>\n    </Show>\n  );\n}\n\nexport default ProgressIndicator;\n"],"names":["CircularProgress","props","circle","createEffect","value","progressValue","r","radius","baseVal","length","Math","PI","style","strokeDasharray","strokeDashoffset","_el$","_tmpl$","_el$2","firstChild","_ref$","_$use","ProgressIndicator","merged","mergeProps","color","size","local","splitProps","colorClass","undefined","ariaProps","role","id","type","_$createComponent","Show","when","variant","fallback","_el$4","_tmpl$3","_el$5","_$spread","_$mergeProps","cn","class","_$effect","_$p","_$style","width","children","_el$3","_tmpl$2","_$insert","_tmpl$4"],"mappings":"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"}
+{"version":3,"file":"progressIndicator.js","sources":["../../../../../src/components/feedBack/progressIndicator/progressIndicator.tsx"],"sourcesContent":["import { type JSX, Show, createEffect, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\n\nexport type ProgressColor = \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface ProgressIndicatorProps {\n  class?: string;\n  variant: \"circular\" | \"linear\";\n  type: \"determinate\" | \"indeterminate\";\n  progressValue?: number;\n  /** Upper bound of `progressValue` (100 by default): with `max={14}`, `progressValue={3}` is 3 of 14. */\n  max?: number;\n  /** Semantic color. */\n  color?: ProgressColor;\n  /** Circular size preset. */\n  size?: \"small\" | \"medium\" | \"large\";\n  /** Linear: fill the container's width instead of the fixed 240px track. */\n  fullWidth?: boolean;\n  /** Linear: the width, in px or any CSS length. */\n  width?: number | string;\n  /**\n   * Linear, determinate: the value as text beside the bar. `true` shows a\n   * percentage — or \"3 / 14\" with a custom `max`; a function formats it, e.g.\n   * `(value, max) => <>{value} of {max}</>`.\n   */\n  valueLabel?: boolean | ((value: number, max: number) => JSX.Element);\n  /** Accessible name for the progress bar. */\n  \"aria-label\"?: string;\n  id?: string;\n}\n\nexport interface CircularProgressProps {\n  /** Percent, 0–100. */\n  progressValue?: number;\n}\n\nexport function CircularProgress(props: CircularProgressProps): JSX.Element {\n  let circle: SVGCircleElement | undefined;\n\n  createEffect(() => {\n    const value = props.progressValue ?? 0;\n    if (!circle || !circle.r) return;\n    const radius = circle.r.baseVal.value;\n    if (radius) {\n      const length = 2 * Math.PI * radius;\n      circle.style.strokeDasharray = `${length} ${length}`;\n      circle.style.strokeDashoffset = `${length - (value / 100) * length}`;\n    }\n  });\n\n  return (\n    <svg class=\"smwb-indicator_circular__svg\">\n      <circle class=\"smwb-indicator_circular__circle\" cx=\"24\" cy=\"24\" r=\"22\" ref={circle} />\n    </svg>\n  );\n}\n\nconst cssLength = (value: number | string): string => (typeof value === \"number\" ? `${value}px` : value);\n\nexport function ProgressIndicator(props: ProgressIndicatorProps): JSX.Element {\n  const merged = mergeProps(\n    { progressValue: 0, max: 100, color: \"primary\" as ProgressColor, size: \"medium\" as const },\n    props\n  );\n  const [local] = splitProps(merged, [\n    \"type\",\n    \"variant\",\n    \"class\",\n    \"progressValue\",\n    \"max\",\n    \"color\",\n    \"size\",\n    \"fullWidth\",\n    \"width\",\n    \"valueLabel\",\n    \"aria-label\",\n    \"id\",\n  ]);\n\n  const colorClass = (): string | undefined =>\n    local.color !== \"primary\" ? `smwb-indicator_color-${local.color}` : undefined;\n  const percent = (): number => {\n    const ratio = local.max > 0 ? local.progressValue / local.max : 0;\n    return Math.min(100, Math.max(0, ratio * 100));\n  };\n  const labeled = (): boolean => Boolean(local.valueLabel) && local.type === \"determinate\";\n  const valueText = (): JSX.Element => {\n    const label = local.valueLabel;\n    if (typeof label === \"function\") return label(local.progressValue, local.max);\n    return local.max === 100 ? `${Math.round(local.progressValue)}%` : `${local.progressValue} / ${local.max}`;\n  };\n  // Width classes and style go on the outermost element: the bar, or the\n  // wrapper that also holds the value label.\n  const sizeClass = (): Record<string, boolean | undefined> => ({ \"smwb-indicator_full-width\": local.fullWidth });\n  const sizeStyle = (): JSX.CSSProperties | undefined =>\n    local.width !== undefined ? { width: cssLength(local.width) } : undefined;\n\n  const ariaProps = (): JSX.HTMLAttributes<HTMLDivElement> => ({\n    role: \"progressbar\",\n    \"aria-label\": local[\"aria-label\"],\n    id: local.id,\n    ...(local.type === \"determinate\"\n      ? { \"aria-valuenow\": local.progressValue, \"aria-valuemin\": 0, \"aria-valuemax\": local.max }\n      : {}),\n  });\n\n  const linear = (outer: boolean): JSX.Element => (\n    <div\n      {...ariaProps()}\n      class={cn(\n        \"smwb-indicator_linear\",\n        `smwb-${local.type}`,\n        colorClass(),\n        outer && sizeClass(),\n        outer && local.class\n      )}\n      style={outer ? sizeStyle() : undefined}\n    >\n      <div class=\"smwb-indicator_linear__thumb\" style={local.type === \"determinate\" ? { width: `${percent()}%` } : {}} />\n    </div>\n  );\n\n  return (\n    <Show\n      when={local.variant === \"circular\"}\n      fallback={\n        <Show when={labeled()} fallback={linear(true)}>\n          <div class={cn(\"smwb-indicator_labeled\", sizeClass(), local.class)} style={sizeStyle()}>\n            {linear(false)}\n            <span class=\"smwb-indicator__value\">{valueText()}</span>\n          </div>\n        </Show>\n      }\n    >\n      <div\n        {...ariaProps()}\n        class={cn(\n          \"smwb-indicator_circular\",\n          `smwb-${local.type}`,\n          colorClass(),\n          `smwb-indicator_size-${local.size}`,\n          local.class\n        )}\n      >\n        <Show\n          when={local.type === \"determinate\"}\n          fallback={\n            <>\n              <div class=\"smwb-indicator_circular__thumb\" />\n              <div />\n              <div />\n              <div />\n            </>\n          }\n        >\n          <CircularProgress progressValue={percent()} />\n        </Show>\n      </div>\n    </Show>\n  );\n}\n\nexport default ProgressIndicator;\n"],"names":["CircularProgress","props","circle","createEffect","value","progressValue","r","radius","baseVal","length","Math","PI","style","strokeDasharray","strokeDashoffset","_el$","_tmpl$","_el$2","firstChild","_ref$","_$use","cssLength","ProgressIndicator","merged","mergeProps","max","color","size","local","splitProps","colorClass","undefined","percent","ratio","min","labeled","Boolean","valueLabel","type","valueText","label","round","sizeClass","fullWidth","sizeStyle","width","ariaProps","role","id","linear","outer","_el$3","_tmpl$2","_el$4","_$spread","_$mergeProps","cn","class","_$effect","_$p","_$style","_$createComponent","Show","when","variant","fallback","children","_el$6","_tmpl$4","_el$7","_$insert","_p$","_v$","_v$2","e","_$className","t","_el$5","_tmpl$3","_tmpl$5"],"mappings":"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"}

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

@@ -1,12 +1,12 @@
-import { createComponent as r, insert as l, effect as u, setAttribute as g, className as p, template as s } from "solid-js/web";
-import { splitProps as b, Show as o } from "solid-js";
-import v from "clsx";
+import { createComponent as r, insert as l, effect as s, setAttribute as p, className as b, template as c } from "solid-js/web";
+import { splitProps as v, Show as o } from "solid-js";
+import h from "clsx";
 import { Modal as a } from "../modal/modal.js";
 import { TextField as C } from "../../inputs/textField/textField.js";
 import { Button as i } from "../../inputs/button/button.js";
-var h = /* @__PURE__ */ s("<div class=smwb-save-asset-dialog__preview><img alt>"), f = /* @__PURE__ */ s("<div>");
-function $(c) {
-  const [e] = b(c, ["open", "title", "nameLabel", "name", "onNameChange", "previewSrc", "onCapture", "captureLabel", "busy", "confirmLabel", "cancelLabel", "onConfirm", "onClose", "children", "class"]), m = () => e.onNameChange !== void 0 || e.name !== void 0;
+var f = /* @__PURE__ */ c("<div class=smwb-save-asset-dialog__preview><img alt>"), w = /* @__PURE__ */ c("<div>");
+function k(m) {
+  const [e] = v(m, ["open", "title", "nameLabel", "name", "onNameChange", "previewSrc", "onCapture", "captureLabel", "busy", "confirmLabel", "cancelLabel", "onConfirm", "onClose", "children", "class"]), d = () => e.onNameChange !== void 0 || e.name !== void 0, u = () => e.title ?? "Save";
   return r(a, {
     get open() {
       return e.open;
@@ -15,17 +15,20 @@ function $(c) {
       return e.onClose;
     },
     size: "medium",
+    get "aria-label"() {
+      return u();
+    },
     get children() {
       return [r(a.Header, {
         get children() {
-          return e.title ?? "Save";
+          return u();
         }
       }), r(a.Content, {
         get children() {
-          var t = f();
+          var t = w();
           return l(t, r(o, {
             get when() {
-              return m();
+              return d();
             },
             get children() {
               return r(C, {
@@ -47,8 +50,8 @@ function $(c) {
               return e.previewSrc;
             },
             get children() {
-              var n = h(), d = n.firstChild;
-              return u(() => g(d, "src", e.previewSrc)), n;
+              var n = f(), g = n.firstChild;
+              return s(() => p(g, "src", e.previewSrc)), n;
             }
           }), null), l(t, r(o, {
             get when() {
@@ -67,7 +70,7 @@ function $(c) {
                 }
               });
             }
-          }), null), l(t, () => e.children, null), u(() => p(t, v("smwb-save-asset-dialog__body", e.class))), t;
+          }), null), l(t, () => e.children, null), s(() => b(t, h("smwb-save-asset-dialog__body", e.class))), t;
         }
       }), r(a.Footer, {
         get children() {
@@ -96,6 +99,6 @@ function $(c) {
   });
 }
 export {
-  $ as SaveAssetDialog
+  k as SaveAssetDialog
 };
 //# sourceMappingURL=saveAssetDialog.js.map