@k2b/ui 0.1.0-rc.0

package/dist/browser/surfaces/NoticeCard.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["For","Show","splitProps","NOTICE_CARD_CLASSES","root","inner","icon","content","title","description","body","NOTICE_CARD_ICONS","neutral","info","success","warning","danger","NoticeCardComponent","props","local","articleProps","tone","_el$","_$getNextElement","_tmpl$2","_el$2","firstChild","_el$1","_el$10","_co$4","_$getNextMarker","nextSibling","_el$4","_el$5","_el$6","_co$","_el$7","_el$8","_co$2","_el$9","_el$0","_co$3","_$spread","_$mergeProps","class","data-tone","_$insert","_$createComponent","when","children","_el$3","_tmpl$","_$effect","_$className","_el$11","_tmpl$3","detail","_el$12","_el$13","_tmpl$4","bodyClass","_p$","_v$","_v$2","e","t","undefined","_$runHydrationEvents","NoticeGrid","columns","items","length","_el$14","each","item","_v$3","_v$4","_$setAttribute","NoticeCard","Object","assign","Grid"],"sources":["surfaces/NoticeCard.tsx"],"sourcesContent":["import { For, type JSX, Show, splitProps } from \"solid-js\";\nimport type { IntentTone } from \"../semantics\";\n\nexport type NoticeTone = Extract<IntentTone, \"neutral\" | \"info\" | \"success\" | \"warning\" | \"danger\">;\n\ntype NoticeCardContentProps =\n  | { title: JSX.Element; detail?: JSX.Element; children?: JSX.Element }\n  | { title?: never; detail?: never; children: JSX.Element };\n\nexport type NoticeCardProps = Omit<JSX.HTMLAttributes<HTMLElement>, \"children\" | \"class\" | \"title\"> &\n  NoticeCardContentProps & {\n    tone?: NoticeTone;\n    icon?: string | false;\n    class?: string;\n    bodyClass?: string;\n  };\n\nexport const NOTICE_CARD_CLASSES = {\n  root: \"k2b-notice-card\",\n  inner: \"k2b-notice-card__inner\",\n  icon: \"k2b-notice-card__icon\",\n  content: \"k2b-notice-card__content\",\n  title: \"k2b-notice-card__title\",\n  description: \"k2b-notice-card__description\",\n  body: \"k2b-notice-card__body\",\n} as const;\n\nexport const NOTICE_CARD_ICONS: Readonly<Record<NoticeTone, string>> = {\n  neutral: \"ti ti-note\",\n  info: \"ti ti-info-circle\",\n  success: \"ti ti-circle-check\",\n  warning: \"ti ti-alert-triangle\",\n  danger: \"ti ti-alert-circle\",\n};\n\nfunction NoticeCardComponent(props: NoticeCardProps): JSX.Element {\n  const [local, articleProps] = splitProps(props, [\"tone\", \"title\", \"detail\", \"children\", \"icon\", \"class\", \"bodyClass\"]);\n  const tone = () => local.tone ?? \"warning\";\n  return (\n    <article {...articleProps} class={`${NOTICE_CARD_CLASSES.root} ${local.class ?? \"\"}`} data-tone={tone()}>\n      <div class={NOTICE_CARD_CLASSES.inner}>\n        <Show when={local.icon !== false}>\n          <i\n            class={`${typeof local.icon === \"string\" ? local.icon : NOTICE_CARD_ICONS[tone()]} ${NOTICE_CARD_CLASSES.icon}`}\n            aria-hidden=\"true\"\n          />\n        </Show>\n        <div class={NOTICE_CARD_CLASSES.content}>\n          <Show when={local.title}>{(title) => <p class={NOTICE_CARD_CLASSES.title}>{title()}</p>}</Show>\n          <Show when={local.detail}>{(detail) => <p class={NOTICE_CARD_CLASSES.description}>{detail()}</p>}</Show>\n          <Show when={local.children}>{(body) => <div class={`${NOTICE_CARD_CLASSES.body} ${local.bodyClass ?? \"\"}`}>{body()}</div>}</Show>\n        </div>\n      </div>\n    </article>\n  );\n}\n\nexport type NoticeGridProps<T> = {\n  items: readonly T[];\n  children: (item: T) => JSX.Element;\n  class?: string;\n};\n\nfunction NoticeGrid<T>(props: NoticeGridProps<T>): JSX.Element {\n  const columns = () => (props.items.length <= 1 ? \"one\" : props.items.length === 2 ? \"two\" : \"three\");\n  return (\n    <Show when={props.items.length > 0}>\n      <div class={`k2b-notice-grid ${props.class ?? \"\"}`} data-columns={columns()}>\n        <For each={props.items}>{(item) => props.children(item)}</For>\n      </div>\n    </Show>\n  );\n}\n\nexport const NoticeCard = Object.assign(NoticeCardComponent, { Grid: NoticeGrid });\nexport default NoticeCard;\n"],"mappings":";;;;;;;;;;;;;;;AAAA,SAASA,GAAG,EAAYC,IAAI,EAAEC,UAAU,QAAQ,UAAU;AAiB1D,OAAO,MAAMC,mBAAmB,GAAG;EACjCC,IAAI,EAAE,iBAAiB;EACvBC,KAAK,EAAE,wBAAwB;EAC/BC,IAAI,EAAE,uBAAuB;EAC7BC,OAAO,EAAE,0BAA0B;EACnCC,KAAK,EAAE,wBAAwB;EAC/BC,WAAW,EAAE,8BAA8B;EAC3CC,IAAI,EAAE;AACR,CAAU;AAEV,OAAO,MAAMC,iBAAuD,GAAG;EACrEC,OAAO,EAAE,YAAY;EACrBC,IAAI,EAAE,mBAAmB;EACzBC,OAAO,EAAE,oBAAoB;EAC7BC,OAAO,EAAE,sBAAsB;EAC/BC,MAAM,EAAE;AACV,CAAC;AAED,SAASC,mBAAmBA,CAACC,KAAsB,EAAe;EAChE,MAAM,CAACC,KAAK,EAAEC,YAAY,CAAC,GAAGlB,UAAU,CAACgB,KAAK,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,CAAC,CAAC;EACtH,MAAMG,IAAI,GAAGA,CAAA,KAAMF,KAAK,CAACE,IAAI,IAAI,SAAS;EAC1C;IAAA,IAAAC,IAAA,GAAAC,gBAAA,CAAAC,OAAA;MAAAC,KAAA,GAAAH,IAAA,CAAAI,UAAA;MAAAC,KAAA,GAAAF,KAAA,CAAAC,UAAA;MAAA,CAAAE,MAAA,EAAAC,KAAA,IAAAC,eAAA,CAAAH,KAAA,CAAAI,WAAA;MAAAC,KAAA,GAAAJ,MAAA,CAAAG,WAAA;MAAAE,KAAA,GAAAD,KAAA,CAAAN,UAAA;MAAA,CAAAQ,KAAA,EAAAC,IAAA,IAAAL,eAAA,CAAAG,KAAA,CAAAF,WAAA;MAAAK,KAAA,GAAAF,KAAA,CAAAH,WAAA;MAAA,CAAAM,KAAA,EAAAC,KAAA,IAAAR,eAAA,CAAAM,KAAA,CAAAL,WAAA;MAAAQ,KAAA,GAAAF,KAAA,CAAAN,WAAA;MAAA,CAAAS,KAAA,EAAAC,KAAA,IAAAX,eAAA,CAAAS,KAAA,CAAAR,WAAA;IAAAW,QAAA,CAAApB,IAAA,EAAAqB,YAAA,CACevB,YAAY;MAAA,aAAAwB,CAAA;QAAA,OAAS,GAAGzC,mBAAmB,CAACC,IAAI,IAAIe,KAAK,CAACyB,KAAK,IAAI,EAAE,EAAE;MAAA;MAAA,iBAAAC,CAAA;QAAA,OAAaxB,IAAI,CAAC,CAAC;MAAA;IAAA;IAAAyB,QAAA,CAAArB,KAAA,EAAAsB,iBAAA,CAElG9C,IAAI;MAAA,IAAC+C,IAAIA,CAAA;QAAA,OAAE7B,KAAK,CAACb,IAAI,KAAK,KAAK;MAAA;MAAA,IAAA2C,SAAA;QAAA,IAAAC,KAAA,GAAA3B,gBAAA,CAAA4B,MAAA;QAAAC,QAAA,OAAAC,WAAA,CAAAH,KAAA,EAErB,GAAG,OAAO/B,KAAK,CAACb,IAAI,KAAK,QAAQ,GAAGa,KAAK,CAACb,IAAI,GAAGK,iBAAiB,CAACU,IAAI,CAAC,CAAC,CAAC,IAAIlB,mBAAmB,CAACG,IAAI,EAAE;QAAA,OAAA4C,KAAA;MAAA;IAAA,IAAAtB,MAAA,EAAAC,KAAA;IAAAiB,QAAA,CAAAd,KAAA,EAAAe,iBAAA,CAKhH9C,IAAI;MAAA,IAAC+C,IAAIA,CAAA;QAAA,OAAE7B,KAAK,CAACX,KAAK;MAAA;MAAAyC,QAAA,EAAIzC,KAAK;QAAA,IAAA8C,MAAA,GAAA/B,gBAAA,CAAAgC,OAAA;QAAAT,QAAA,CAAAQ,MAAA,EAA2C9C,KAAK;QAAA4C,QAAA,OAAAC,WAAA,CAAAC,MAAA,EAAjCnD,mBAAmB,CAACK,KAAK;QAAA,OAAA8C,MAAA;MAAA;IAAe,IAAApB,KAAA,EAAAC,IAAA;IAAAW,QAAA,CAAAd,KAAA,EAAAe,iBAAA,CACtF9C,IAAI;MAAA,IAAC+C,IAAIA,CAAA;QAAA,OAAE7B,KAAK,CAACqC,MAAM;MAAA;MAAAP,QAAA,EAAIO,MAAM;QAAA,IAAAC,MAAA,GAAAlC,gBAAA,CAAAgC,OAAA;QAAAT,QAAA,CAAAW,MAAA,EAAiDD,MAAM;QAAAJ,QAAA,OAAAC,WAAA,CAAAI,MAAA,EAAxCtD,mBAAmB,CAACM,WAAW;QAAA,OAAAgD,MAAA;MAAA;IAAgB,IAAApB,KAAA,EAAAC,KAAA;IAAAQ,QAAA,CAAAd,KAAA,EAAAe,iBAAA,CAC/F9C,IAAI;MAAA,IAAC+C,IAAIA,CAAA;QAAA,OAAE7B,KAAK,CAAC8B,QAAQ;MAAA;MAAAA,QAAA,EAAIvC,IAAI;QAAA,IAAAgD,MAAA,GAAAnC,gBAAA,CAAAoC,OAAA;QAAAb,QAAA,CAAAY,MAAA,EAA0EhD,IAAI;QAAA0C,QAAA,OAAAC,WAAA,CAAAK,MAAA,EAA7D,GAAGvD,mBAAmB,CAACO,IAAI,IAAIS,KAAK,CAACyC,SAAS,IAAI,EAAE,EAAE;QAAA,OAAAF,MAAA;MAAA;IAAgB,IAAAlB,KAAA,EAAAC,KAAA;IAAAW,QAAA,CAAAS,GAAA;MAAA,IAAAC,GAAA,GAVjH3D,mBAAmB,CAACE,KAAK;QAAA0D,IAAA,GAOvB5D,mBAAmB,CAACI,OAAO;MAAAuD,GAAA,KAAAD,GAAA,CAAAG,CAAA,IAAAX,WAAA,CAAA5B,KAAA,EAAAoC,GAAA,CAAAG,CAAA,GAAAF,GAAA;MAAAC,IAAA,KAAAF,GAAA,CAAAI,CAAA,IAAAZ,WAAA,CAAArB,KAAA,EAAA6B,GAAA,CAAAI,CAAA,GAAAF,IAAA;MAAA,OAAAF,GAAA;IAAA;MAAAG,CAAA,EAAAE,SAAA;MAAAD,CAAA,EAAAC;IAAA;IAAAC,oBAAA;IAAA,OAAA7C,IAAA;EAAA;AAQ/C;AAQA,SAAS8C,UAAUA,CAAIlD,KAAyB,EAAe;EAC7D,MAAMmD,OAAO,GAAGA,CAAA,KAAOnD,KAAK,CAACoD,KAAK,CAACC,MAAM,IAAI,CAAC,GAAG,KAAK,GAAGrD,KAAK,CAACoD,KAAK,CAACC,MAAM,KAAK,CAAC,GAAG,KAAK,GAAG,OAAQ;EACpG,OAAAxB,iBAAA,CACG9C,IAAI;IAAA,IAAC+C,IAAIA,CAAA;MAAA,OAAE9B,KAAK,CAACoD,KAAK,CAACC,MAAM,GAAG,CAAC;IAAA;IAAA,IAAAtB,SAAA;MAAA,IAAAuB,MAAA,GAAAjD,gBAAA,CAAAoC,OAAA;MAAAb,QAAA,CAAA0B,MAAA,EAAAzB,iBAAA,CAE7B/C,GAAG;QAAA,IAACyE,IAAIA,CAAA;UAAA,OAAEvD,KAAK,CAACoD,KAAK;QAAA;QAAArB,QAAA,EAAIyB,IAAI,IAAKxD,KAAK,CAAC+B,QAAQ,CAACyB,IAAI;MAAC;MAAAtB,QAAA,CAAAS,GAAA;QAAA,IAAAc,IAAA,GAD7C,mBAAmBzD,KAAK,CAAC0B,KAAK,IAAI,EAAE,EAAE;UAAAgC,IAAA,GAAgBP,OAAO,CAAC,CAAC;QAAAM,IAAA,KAAAd,GAAA,CAAAG,CAAA,IAAAX,WAAA,CAAAmB,MAAA,EAAAX,GAAA,CAAAG,CAAA,GAAAW,IAAA;QAAAC,IAAA,KAAAf,GAAA,CAAAI,CAAA,IAAAY,cAAA,CAAAL,MAAA,kBAAAX,GAAA,CAAAI,CAAA,GAAAW,IAAA;QAAA,OAAAf,GAAA;MAAA;QAAAG,CAAA,EAAAE,SAAA;QAAAD,CAAA,EAAAC;MAAA;MAAA,OAAAM,MAAA;IAAA;EAAA;AAKjF;AAEA,OAAO,MAAMM,UAAU,GAAGC,MAAM,CAACC,MAAM,CAAC/D,mBAAmB,EAAE;EAAEgE,IAAI,EAAEb;AAAW,CAAC,CAAC;AAClF,eAAeU,UAAU","ignoreList":[]}

package/dist/browser/surfaces/Paper.js

@@ -0,0 +1,33 @@
+import { createComponent as _$createComponent } from "solid-js/web";
+import { mergeProps as _$mergeProps } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+import { splitProps } from "solid-js";
+import { Dynamic } from "solid-js/web";
+const PaperElement = Dynamic;
+export function Paper(props) {
+  const [local, elementProps] = splitProps(props, ["as", "children", "class", "elevated", "interactive", "tabIndex"]);
+  const className = () => local.class?.trim();
+  return _$createComponent(PaperElement, _$mergeProps({
+    get component() {
+      return local.as ?? "div";
+    }
+  }, elementProps, {
+    get ["class"]() {
+      return _$memo(() => !!className())() ? `k2b-paper ${className()}` : "k2b-paper";
+    },
+    get ["data-elevated"]() {
+      return local.elevated ? "true" : undefined;
+    },
+    get ["data-interactive"]() {
+      return local.interactive ? "true" : undefined;
+    },
+    get tabindex() {
+      return local.tabIndex;
+    },
+    get children() {
+      return local.children;
+    }
+  }));
+}
+export default Paper;
+//# sourceMappingURL=Paper.js.map

package/dist/browser/surfaces/Paper.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["splitProps","Dynamic","PaperElement","Paper","props","local","elementProps","className","class","trim","_$createComponent","_$mergeProps","component","as","_$memo","data-elevated","elevated","undefined","data-interactive","interactive","tabindex","tabIndex","children"],"sources":["surfaces/Paper.tsx"],"sourcesContent":["import { type JSX, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\n\nexport type PaperTag = \"div\" | \"section\" | \"article\" | \"a\";\n\ntype PaperOwnProps<T extends PaperTag> = {\n  as?: T;\n  children?: JSX.Element;\n  class?: string;\n  elevated?: boolean;\n  interactive?: boolean;\n  tabIndex?: number;\n};\n\nexport type PaperProps<T extends PaperTag = \"div\"> = PaperOwnProps<T> & Omit<JSX.IntrinsicElements[T], keyof PaperOwnProps<T>>;\n\nconst PaperElement = Dynamic as unknown as (props: Record<string, unknown>) => JSX.Element;\n\nexport function Paper<T extends PaperTag = \"div\">(props: PaperProps<T>): JSX.Element {\n  const [local, elementProps] = splitProps(props, [\"as\", \"children\", \"class\", \"elevated\", \"interactive\", \"tabIndex\"]);\n  const className = () => local.class?.trim();\n\n  return (\n    <PaperElement\n      component={local.as ?? \"div\"}\n      {...elementProps}\n      class={className() ? `k2b-paper ${className()}` : \"k2b-paper\"}\n      data-elevated={local.elevated ? \"true\" : undefined}\n      data-interactive={local.interactive ? \"true\" : undefined}\n      tabindex={local.tabIndex}\n    >\n      {local.children}\n    </PaperElement>\n  );\n}\n\nexport default Paper;\n"],"mappings":";;;AAAA,SAAmBA,UAAU,QAAQ,UAAU;AAC/C,SAASC,OAAO,QAAQ,cAAc;AAetC,MAAMC,YAAY,GAAGD,OAAqE;AAE1F,OAAO,SAASE,KAAKA,CAA6BC,KAAoB,EAAe;EACnF,MAAM,CAACC,KAAK,EAAEC,YAAY,CAAC,GAAGN,UAAU,CAACI,KAAK,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,UAAU,CAAC,CAAC;EACnH,MAAMG,SAAS,GAAGA,CAAA,KAAMF,KAAK,CAACG,KAAK,EAAEC,IAAI,CAAC,CAAC;EAE3C,OAAAC,iBAAA,CACGR,YAAY,EAAAS,YAAA;IAAA,IACXC,SAASA,CAAA;MAAA,OAAEP,KAAK,CAACQ,EAAE,IAAI,KAAK;IAAA;EAAA,GACxBP,YAAY;IAAA,aAAAE,CAAA;MAAA,OACTM,MAAA,SAAAP,SAAS,CAAC,CAAC,MAAG,aAAaA,SAAS,CAAC,CAAC,EAAE,GAAG,WAAW;IAAA;IAAA,qBAAAQ,CAAA;MAAA,OAC9CV,KAAK,CAACW,QAAQ,GAAG,MAAM,GAAGC,SAAS;IAAA;IAAA,wBAAAC,CAAA;MAAA,OAChCb,KAAK,CAACc,WAAW,GAAG,MAAM,GAAGF,SAAS;IAAA;IAAA,IACxDG,QAAQA,CAAA;MAAA,OAAEf,KAAK,CAACgB,QAAQ;IAAA;IAAA,IAAAC,SAAA;MAAA,OAEvBjB,KAAK,CAACiB,QAAQ;IAAA;EAAA;AAGrB;AAEA,eAAenB,KAAK","ignoreList":[]}

package/dist/browser/surfaces/Placeholder.js

@@ -0,0 +1,90 @@
+import { template as _$template } from "solid-js/web";
+import { className as _$className } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { getNextElement as _$getNextElement } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<p class=k2b-placeholder__title>`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<div class=k2b-placeholder__description>`),
+  _tmpl$3 = /*#__PURE__*/_$template(`<div class=k2b-placeholder__action>`),
+  _tmpl$4 = /*#__PURE__*/_$template(`<span class=k2b-placeholder__icon><i aria-hidden=true>`);
+import { Show } from "solid-js";
+import { Dynamic } from "solid-js/web";
+import { Paper } from "./Paper";
+export default function Placeholder(props) {
+  const align = () => props.align ?? "center";
+  const state = () => props.state ?? "empty";
+  const variant = () => props.variant ?? "compact";
+  const icon = () => props.icon ?? (state() === "loading" ? "ti ti-loader-2" : state() === "error" ? "ti ti-alert-circle" : undefined);
+  return _$createComponent(Dynamic, {
+    get component() {
+      return props.surface === "paper" ? Paper : "div";
+    },
+    get ["class"]() {
+      return `k2b-placeholder ${props.class ?? ""}`;
+    },
+    get ["data-align"]() {
+      return align();
+    },
+    get ["data-state"]() {
+      return state();
+    },
+    get ["data-surface"]() {
+      return props.surface ?? "none";
+    },
+    get ["data-variant"]() {
+      return variant();
+    },
+    get role() {
+      return _$memo(() => state() === "error")() ? "alert" : state() === "loading" ? "status" : undefined;
+    },
+    get ["aria-live"]() {
+      return state() === "loading" ? "polite" : undefined;
+    },
+    get ["aria-busy"]() {
+      return state() === "loading" ? "true" : undefined;
+    },
+    get children() {
+      return [_$createComponent(Show, {
+        get when() {
+          return icon();
+        },
+        children: iconClass => (() => {
+          var _el$4 = _$getNextElement(_tmpl$4),
+            _el$5 = _el$4.firstChild;
+          _$effect(() => _$className(_el$5, iconClass()));
+          return _el$4;
+        })()
+      }), _$createComponent(Show, {
+        get when() {
+          return props.title;
+        },
+        get children() {
+          var _el$ = _$getNextElement(_tmpl$);
+          _$insert(_el$, () => props.title);
+          return _el$;
+        }
+      }), _$createComponent(Show, {
+        get when() {
+          return props.description;
+        },
+        get children() {
+          var _el$2 = _$getNextElement(_tmpl$2);
+          _$insert(_el$2, () => props.description);
+          return _el$2;
+        }
+      }), _$createComponent(Show, {
+        get when() {
+          return props.action;
+        },
+        get children() {
+          var _el$3 = _$getNextElement(_tmpl$3);
+          _$insert(_el$3, () => props.action);
+          return _el$3;
+        }
+      })];
+    }
+  });
+}
+//# sourceMappingURL=Placeholder.js.map

package/dist/browser/surfaces/Placeholder.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Show","Dynamic","Paper","Placeholder","props","align","state","variant","icon","undefined","_$createComponent","component","surface","class","data-align","data-state","data-surface","data-variant","role","_$memo","aria-live","aria-busy","children","when","iconClass","_el$4","_$getNextElement","_tmpl$4","_el$5","firstChild","_$effect","_$className","title","_el$","_tmpl$","_$insert","description","_el$2","_tmpl$2","action","_el$3","_tmpl$3"],"sources":["surfaces/Placeholder.tsx"],"sourcesContent":["import { type JSX, Show } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport { Paper } from \"./Paper\";\n\nexport type PlaceholderAlign = \"center\" | \"left\";\nexport type PlaceholderSurface = \"none\" | \"paper\";\nexport type PlaceholderState = \"empty\" | \"loading\" | \"error\";\nexport type PlaceholderVariant = \"compact\" | \"panel\";\n\nexport type PlaceholderProps = {\n  title?: JSX.Element;\n  description?: JSX.Element;\n  icon?: string;\n  action?: JSX.Element;\n  align?: PlaceholderAlign;\n  surface?: PlaceholderSurface;\n  state?: PlaceholderState;\n  variant?: PlaceholderVariant;\n  class?: string;\n};\n\nexport default function Placeholder(props: PlaceholderProps): JSX.Element {\n  const align = () => props.align ?? \"center\";\n  const state = () => props.state ?? \"empty\";\n  const variant = () => props.variant ?? \"compact\";\n  const icon = () => props.icon ?? (state() === \"loading\" ? \"ti ti-loader-2\" : state() === \"error\" ? \"ti ti-alert-circle\" : undefined);\n\n  return (\n    <Dynamic\n      component={props.surface === \"paper\" ? Paper : \"div\"}\n      class={`k2b-placeholder ${props.class ?? \"\"}`}\n      data-align={align()}\n      data-state={state()}\n      data-surface={props.surface ?? \"none\"}\n      data-variant={variant()}\n      role={state() === \"error\" ? \"alert\" : state() === \"loading\" ? \"status\" : undefined}\n      aria-live={state() === \"loading\" ? \"polite\" : undefined}\n      aria-busy={state() === \"loading\" ? \"true\" : undefined}\n    >\n      <Show when={icon()}>\n        {(iconClass) => (\n          <span class=\"k2b-placeholder__icon\">\n            <i class={iconClass()} aria-hidden=\"true\" />\n          </span>\n        )}\n      </Show>\n      <Show when={props.title}>\n        <p class=\"k2b-placeholder__title\">{props.title}</p>\n      </Show>\n      <Show when={props.description}>\n        <div class=\"k2b-placeholder__description\">{props.description}</div>\n      </Show>\n      <Show when={props.action}>\n        <div class=\"k2b-placeholder__action\">{props.action}</div>\n      </Show>\n    </Dynamic>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/browser/surfaces/ProgressBar.js

@@ -0,0 +1,58 @@
+import { template as _$template } from "solid-js/web";
+import { style as _$style } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
+import { className as _$className } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { getNextElement as _$getNextElement } from "solid-js/web";
+import { getNextMarker as _$getNextMarker } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<div><div class=k2b-progress__track role=progressbar aria-valuemin=0 aria-valuemax=100><div class=k2b-progress__value></div></div><!$><!/>`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<span class=k2b-progress__percent><!$><!/>%`);
+const clamp = value => Number.isFinite(value) ? Math.max(0, Math.min(100, Math.round(value))) : 0;
+export function ProgressBar(props) {
+  const percent = () => clamp(props.value);
+  return (() => {
+    var _el$ = _$getNextElement(_tmpl$),
+      _el$2 = _el$.firstChild,
+      _el$3 = _el$2.firstChild,
+      _el$4 = _el$2.nextSibling,
+      [_el$5, _co$] = _$getNextMarker(_el$4.nextSibling);
+    _$insert(_el$, (() => {
+      var _c$ = _$memo(() => !!props.showValue);
+      return () => _c$() ? (() => {
+        var _el$6 = _$getNextElement(_tmpl$2),
+          _el$8 = _el$6.firstChild,
+          [_el$9, _co$2] = _$getNextMarker(_el$8.nextSibling),
+          _el$7 = _el$9.nextSibling;
+        _$insert(_el$6, percent, _el$9, _co$2);
+        return _el$6;
+      })() : null;
+    })(), _el$5, _co$);
+    _$effect(_p$ => {
+      var _v$ = `k2b-progress ${props.class ?? ""}`,
+        _v$2 = props.size ?? "md",
+        _v$3 = props.tone ?? "info",
+        _v$4 = props.label,
+        _v$5 = percent(),
+        _v$6 = `width: ${percent()}%`;
+      _v$ !== _p$.e && _$className(_el$, _p$.e = _v$);
+      _v$2 !== _p$.t && _$setAttribute(_el$, "data-size", _p$.t = _v$2);
+      _v$3 !== _p$.a && _$setAttribute(_el$, "data-tone", _p$.a = _v$3);
+      _v$4 !== _p$.o && _$setAttribute(_el$2, "aria-label", _p$.o = _v$4);
+      _v$5 !== _p$.i && _$setAttribute(_el$2, "aria-valuenow", _p$.i = _v$5);
+      _p$.n = _$style(_el$3, _v$6, _p$.n);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined,
+      i: undefined,
+      n: undefined
+    });
+    return _el$;
+  })();
+}
+export default ProgressBar;
+//# sourceMappingURL=ProgressBar.js.map

package/dist/browser/surfaces/ProgressBar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["clamp","value","Number","isFinite","Math","max","min","round","ProgressBar","props","percent","_el$","_$getNextElement","_tmpl$","_el$2","firstChild","_el$3","_el$4","nextSibling","_el$5","_co$","_$getNextMarker","_$insert","_c$","_$memo","showValue","_el$6","_tmpl$2","_el$8","_el$9","_co$2","_el$7","_$effect","_p$","_v$","class","_v$2","size","_v$3","tone","_v$4","label","_v$5","_v$6","e","_$className","t","_$setAttribute","a","o","i","n","_$style","undefined"],"sources":["surfaces/ProgressBar.tsx"],"sourcesContent":["import type { JSX } from \"solid-js\";\nimport type { IntentTone } from \"../semantics\";\n\nexport type ProgressBarTone = Extract<IntentTone, \"info\" | \"success\" | \"danger\">;\n\nexport type ProgressBarProps = {\n  value: number;\n  size?: \"xs\" | \"sm\" | \"md\";\n  tone?: ProgressBarTone;\n  showValue?: boolean;\n  label: string;\n  class?: string;\n};\n\nconst clamp = (value: number) => (Number.isFinite(value) ? Math.max(0, Math.min(100, Math.round(value))) : 0);\n\nexport function ProgressBar(props: ProgressBarProps): JSX.Element {\n  const percent = () => clamp(props.value);\n  return (\n    <div class={`k2b-progress ${props.class ?? \"\"}`} data-size={props.size ?? \"md\"} data-tone={props.tone ?? \"info\"}>\n      <div\n        class=\"k2b-progress__track\"\n        role=\"progressbar\"\n        aria-label={props.label}\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        aria-valuenow={percent()}\n      >\n        <div class=\"k2b-progress__value\" style={`width: ${percent()}%`} />\n      </div>\n      {props.showValue ? <span class=\"k2b-progress__percent\">{percent()}%</span> : null}\n    </div>\n  );\n}\n\nexport default ProgressBar;\n"],"mappings":";;;;;;;;;;;AAcA,MAAMA,KAAK,GAAIC,KAAa,IAAMC,MAAM,CAACC,QAAQ,CAACF,KAAK,CAAC,GAAGG,IAAI,CAACC,GAAG,CAAC,CAAC,EAAED,IAAI,CAACE,GAAG,CAAC,GAAG,EAAEF,IAAI,CAACG,KAAK,CAACN,KAAK,CAAC,CAAC,CAAC,GAAG,CAAE;AAE7G,OAAO,SAASO,WAAWA,CAACC,KAAuB,EAAe;EAChE,MAAMC,OAAO,GAAGA,CAAA,KAAMV,KAAK,CAACS,KAAK,CAACR,KAAK,CAAC;EACxC;IAAA,IAAAU,IAAA,GAAAC,gBAAA,CAAAC,MAAA;MAAAC,KAAA,GAAAH,IAAA,CAAAI,UAAA;MAAAC,KAAA,GAAAF,KAAA,CAAAC,UAAA;MAAAE,KAAA,GAAAH,KAAA,CAAAI,WAAA;MAAA,CAAAC,KAAA,EAAAC,IAAA,IAAAC,eAAA,CAAAJ,KAAA,CAAAC,WAAA;IAAAI,QAAA,CAAAX,IAAA;MAAA,IAAAY,GAAA,GAAAC,MAAA,SAYKf,KAAK,CAACgB,SAAS;MAAA,aAAfF,GAAA;QAAA,IAAAG,KAAA,GAAAd,gBAAA,CAAAe,OAAA;UAAAC,KAAA,GAAAF,KAAA,CAAAX,UAAA;UAAA,CAAAc,KAAA,EAAAC,KAAA,IAAAT,eAAA,CAAAO,KAAA,CAAAV,WAAA;UAAAa,KAAA,GAAAF,KAAA,CAAAX,WAAA;QAAAI,QAAA,CAAAI,KAAA,EAAuDhB,OAAO,EAAAmB,KAAA,EAAAC,KAAA;QAAA,OAAAJ,KAAA;MAAA,OAAc,IAAI;IAAA,MAAAP,KAAA,EAAAC,IAAA;IAAAY,QAAA,CAAAC,GAAA;MAAA,IAAAC,GAAA,GAXvE,gBAAgBzB,KAAK,CAAC0B,KAAK,IAAI,EAAE,EAAE;QAAAC,IAAA,GAAa3B,KAAK,CAAC4B,IAAI,IAAI,IAAI;QAAAC,IAAA,GAAa7B,KAAK,CAAC8B,IAAI,IAAI,MAAM;QAAAC,IAAA,GAI/F/B,KAAK,CAACgC,KAAK;QAAAC,IAAA,GAGRhC,OAAO,CAAC,CAAC;QAAAiC,IAAA,GAEgB,UAAUjC,OAAO,CAAC,CAAC,GAAG;MAAAwB,GAAA,KAAAD,GAAA,CAAAW,CAAA,IAAAC,WAAA,CAAAlC,IAAA,EAAAsB,GAAA,CAAAW,CAAA,GAAAV,GAAA;MAAAE,IAAA,KAAAH,GAAA,CAAAa,CAAA,IAAAC,cAAA,CAAApC,IAAA,eAAAsB,GAAA,CAAAa,CAAA,GAAAV,IAAA;MAAAE,IAAA,KAAAL,GAAA,CAAAe,CAAA,IAAAD,cAAA,CAAApC,IAAA,eAAAsB,GAAA,CAAAe,CAAA,GAAAV,IAAA;MAAAE,IAAA,KAAAP,GAAA,CAAAgB,CAAA,IAAAF,cAAA,CAAAjC,KAAA,gBAAAmB,GAAA,CAAAgB,CAAA,GAAAT,IAAA;MAAAE,IAAA,KAAAT,GAAA,CAAAiB,CAAA,IAAAH,cAAA,CAAAjC,KAAA,mBAAAmB,GAAA,CAAAiB,CAAA,GAAAR,IAAA;MAAAT,GAAA,CAAAkB,CAAA,GAAAC,OAAA,CAAApC,KAAA,EAAA2B,IAAA,EAAAV,GAAA,CAAAkB,CAAA;MAAA,OAAAlB,GAAA;IAAA;MAAAW,CAAA,EAAAS,SAAA;MAAAP,CAAA,EAAAO,SAAA;MAAAL,CAAA,EAAAK,SAAA;MAAAJ,CAAA,EAAAI,SAAA;MAAAH,CAAA,EAAAG,SAAA;MAAAF,CAAA,EAAAE;IAAA;IAAA,OAAA1C,IAAA;EAAA;AAKtE;AAEA,eAAeH,WAAW","ignoreList":[]}

package/dist/browser/surfaces/StatCell.js

@@ -0,0 +1,172 @@
+import { template as _$template } from "solid-js/web";
+import { getNextMarker as _$getNextMarker } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+import { className as _$className } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { getNextElement as _$getNextElement } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<span class=k2b-stat-cell__label>`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<span>`),
+  _tmpl$3 = /*#__PURE__*/_$template(`<div class=k2b-stat-cell__support><!$><!/><!$><!/>`),
+  _tmpl$4 = /*#__PURE__*/_$template(`<span class=k2b-stat-cell__sub>`),
+  _tmpl$5 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
+  _tmpl$6 = /*#__PURE__*/_$template(`<span class=k2b-stat-cell__accent><i aria-hidden=true></i><!$><!/>`),
+  _tmpl$7 = /*#__PURE__*/_$template(`<div class=k2b-stat-cell>`),
+  _tmpl$8 = /*#__PURE__*/_$template(`<a class="k2b-stat-cell k2b-stat-cell--link"><i class="ti ti-external-link k2b-stat-cell__link-icon"aria-hidden=true></i><!$><!/>`);
+import { Show } from "solid-js";
+import Chart from "../content/Chart";
+import { useStatGridSize, useStatGridSurface } from "./StatGrid";
+function Body(props) {
+  const gridSize = useStatGridSize();
+  const size = () => props.size ?? gridSize;
+  const accent = () => props.accent;
+  return [(() => {
+    var _el$ = _$getNextElement(_tmpl$);
+    _$insert(_el$, () => props.label);
+    _$effect(() => _$setAttribute(_el$, "data-size", size()));
+    return _el$;
+  })(), (() => {
+    var _el$2 = _$getNextElement(_tmpl$2);
+    _$insert(_el$2, () => props.value);
+    _$effect(_p$ => {
+      var _v$ = `k2b-stat-cell__value ${props.valueClass ?? ""}`,
+        _v$2 = size(),
+        _v$3 = props.title;
+      _v$ !== _p$.e && _$className(_el$2, _p$.e = _v$);
+      _v$2 !== _p$.t && _$setAttribute(_el$2, "data-size", _p$.t = _v$2);
+      _v$3 !== _p$.a && _$setAttribute(_el$2, "title", _p$.a = _v$3);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined
+    });
+    return _el$2;
+  })(), _$createComponent(Show, {
+    get when() {
+      return _$memo(() => !!props.trend)() && props.trend.length > 1;
+    },
+    get children() {
+      return _$createComponent(Chart, {
+        kind: "sparkline",
+        "class": "k2b-stat-cell__trend",
+        style: {
+          height: "32px"
+        },
+        get data() {
+          return Array.from(props.trend ?? []);
+        },
+        showLast: true,
+        showMinMax: true
+      });
+    }
+  }), _$createComponent(Show, {
+    get when() {
+      return props.sub || accent();
+    },
+    get children() {
+      var _el$3 = _$getNextElement(_tmpl$3),
+        _el$4 = _el$3.firstChild,
+        [_el$5, _co$] = _$getNextMarker(_el$4.nextSibling),
+        _el$6 = _el$5.nextSibling,
+        [_el$7, _co$2] = _$getNextMarker(_el$6.nextSibling);
+      _$insert(_el$3, _$createComponent(Show, {
+        get when() {
+          return props.sub;
+        },
+        children: sub => (() => {
+          var _el$8 = _$getNextElement(_tmpl$4);
+          _$insert(_el$8, sub);
+          return _el$8;
+        })()
+      }), _el$5, _co$);
+      _$insert(_el$3, _$createComponent(Show, {
+        get when() {
+          return accent();
+        },
+        children: value => _$createComponent(Show, {
+          get when() {
+            return value().text;
+          },
+          get fallback() {
+            return (() => {
+              var _el$9 = _$getNextElement(_tmpl$5);
+              _$effect(_p$ => {
+                var _v$4 = `${value().icon} k2b-stat-cell__accent-icon`,
+                  _v$5 = value().tone;
+                _v$4 !== _p$.e && _$className(_el$9, _p$.e = _v$4);
+                _v$5 !== _p$.t && _$setAttribute(_el$9, "data-tone", _p$.t = _v$5);
+                return _p$;
+              }, {
+                e: undefined,
+                t: undefined
+              });
+              return _el$9;
+            })();
+          },
+          children: text => (() => {
+            var _el$0 = _$getNextElement(_tmpl$6),
+              _el$1 = _el$0.firstChild,
+              _el$10 = _el$1.nextSibling,
+              [_el$11, _co$3] = _$getNextMarker(_el$10.nextSibling);
+            _$insert(_el$0, text, _el$11, _co$3);
+            _$effect(_p$ => {
+              var _v$6 = value().tone,
+                _v$7 = value().icon;
+              _v$6 !== _p$.e && _$setAttribute(_el$0, "data-tone", _p$.e = _v$6);
+              _v$7 !== _p$.t && _$className(_el$1, _p$.t = _v$7);
+              return _p$;
+            }, {
+              e: undefined,
+              t: undefined
+            });
+            return _el$0;
+          })()
+        })
+      }), _el$7, _co$2);
+      return _el$3;
+    }
+  })];
+}
+export function StatCell(props) {
+  const gridSize = useStatGridSize();
+  const size = () => props.size ?? gridSize;
+  const surface = useStatGridSurface();
+  return _$createComponent(Show, {
+    get when() {
+      return props.href;
+    },
+    get fallback() {
+      return (() => {
+        var _el$12 = _$getNextElement(_tmpl$7);
+        _$setAttribute(_el$12, "data-surface", surface);
+        _$insert(_el$12, _$createComponent(Body, props));
+        _$effect(() => _$setAttribute(_el$12, "data-size", size()));
+        return _el$12;
+      })();
+    },
+    children: href => (() => {
+      var _el$13 = _$getNextElement(_tmpl$8),
+        _el$14 = _el$13.firstChild,
+        _el$15 = _el$14.nextSibling,
+        [_el$16, _co$4] = _$getNextMarker(_el$15.nextSibling);
+      _$setAttribute(_el$13, "data-surface", surface);
+      _$insert(_el$13, _$createComponent(Body, props), _el$16, _co$4);
+      _$effect(_p$ => {
+        var _v$8 = href(),
+          _v$9 = size();
+        _v$8 !== _p$.e && _$setAttribute(_el$13, "href", _p$.e = _v$8);
+        _v$9 !== _p$.t && _$setAttribute(_el$13, "data-size", _p$.t = _v$9);
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined
+      });
+      return _el$13;
+    })()
+  });
+}
+export default StatCell;
+//# sourceMappingURL=StatCell.js.map

package/dist/browser/surfaces/StatCell.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Show","Chart","useStatGridSize","useStatGridSurface","Body","props","gridSize","size","accent","_el$","_$getNextElement","_tmpl$","_$insert","label","_$effect","_$setAttribute","_el$2","_tmpl$2","value","_p$","_v$","valueClass","_v$2","_v$3","title","e","_$className","t","a","undefined","_$createComponent","when","_$memo","trend","length","children","kind","style","height","data","Array","from","showLast","showMinMax","sub","_el$3","_tmpl$3","_el$4","firstChild","_el$5","_co$","_$getNextMarker","nextSibling","_el$6","_el$7","_co$2","_el$8","_tmpl$4","text","fallback","_el$9","_tmpl$5","_v$4","icon","_v$5","tone","_el$0","_tmpl$6","_el$1","_el$10","_el$11","_co$3","_v$6","_v$7","StatCell","surface","href","_el$12","_tmpl$7","_el$13","_tmpl$8","_el$14","_el$15","_el$16","_co$4","_v$8","_v$9"],"sources":["surfaces/StatCell.tsx"],"sourcesContent":["import { type JSX, Show } from \"solid-js\";\nimport Chart from \"../content/Chart\";\nimport type { AccentColor } from \"../semantics\";\nimport { type StatGridSize, useStatGridSize, useStatGridSurface } from \"./StatGrid\";\n\nexport type StatCellTone = AccentColor;\n\nexport type StatCellAccent = {\n  tone: StatCellTone;\n  icon: string;\n  text?: string;\n};\n\nexport type StatCellProps = {\n  label: string;\n  value: string | number | JSX.Element;\n  sub?: string;\n  valueClass?: string;\n  accent?: StatCellAccent;\n  href?: string;\n  title?: string;\n  trend?: readonly number[];\n  size?: StatGridSize;\n};\n\nfunction Body(props: StatCellProps): JSX.Element {\n  const gridSize = useStatGridSize();\n  const size = () => props.size ?? gridSize;\n  const accent = () => props.accent;\n  return (\n    <>\n      <span class=\"k2b-stat-cell__label\" data-size={size()}>\n        {props.label}\n      </span>\n      <span class={`k2b-stat-cell__value ${props.valueClass ?? \"\"}`} data-size={size()} title={props.title}>\n        {props.value}\n      </span>\n      <Show when={props.trend && props.trend.length > 1}>\n        <Chart\n          kind=\"sparkline\"\n          class=\"k2b-stat-cell__trend\"\n          style={{ height: \"32px\" }}\n          data={Array.from(props.trend ?? [])}\n          showLast\n          showMinMax\n        />\n      </Show>\n      <Show when={props.sub || accent()}>\n        <div class=\"k2b-stat-cell__support\">\n          <Show when={props.sub}>{(sub) => <span class=\"k2b-stat-cell__sub\">{sub()}</span>}</Show>\n          <Show when={accent()}>\n            {(value) => (\n              <Show\n                when={value().text}\n                fallback={<i class={`${value().icon} k2b-stat-cell__accent-icon`} data-tone={value().tone} aria-hidden=\"true\" />}\n              >\n                {(text) => (\n                  <span class=\"k2b-stat-cell__accent\" data-tone={value().tone}>\n                    <i class={value().icon} aria-hidden=\"true\" />\n                    {text()}\n                  </span>\n                )}\n              </Show>\n            )}\n          </Show>\n        </div>\n      </Show>\n    </>\n  );\n}\n\nexport function StatCell(props: StatCellProps): JSX.Element {\n  const gridSize = useStatGridSize();\n  const size = () => props.size ?? gridSize;\n  const surface = useStatGridSurface();\n  return (\n    <Show\n      when={props.href}\n      fallback={\n        <div class=\"k2b-stat-cell\" data-size={size()} data-surface={surface}>\n          <Body {...props} />\n        </div>\n      }\n    >\n      {(href) => (\n        <a href={href()} class=\"k2b-stat-cell k2b-stat-cell--link\" data-size={size()} data-surface={surface}>\n          <i class=\"ti ti-external-link k2b-stat-cell__link-icon\" aria-hidden=\"true\" />\n          <Body {...props} />\n        </a>\n      )}\n    </Show>\n  );\n}\n\nexport default StatCell;\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA,SAAmBA,IAAI,QAAQ,UAAU;AACzC,OAAOC,KAAK,MAAM,kBAAkB;AAEpC,SAA4BC,eAAe,EAAEC,kBAAkB,QAAQ,YAAY;AAsBnF,SAASC,IAAIA,CAACC,KAAoB,EAAe;EAC/C,MAAMC,QAAQ,GAAGJ,eAAe,CAAC,CAAC;EAClC,MAAMK,IAAI,GAAGA,CAAA,KAAMF,KAAK,CAACE,IAAI,IAAID,QAAQ;EACzC,MAAME,MAAM,GAAGA,CAAA,KAAMH,KAAK,CAACG,MAAM;EACjC;IAAA,IAAAC,IAAA,GAAAC,gBAAA,CAAAC,MAAA;IAAAC,QAAA,CAAAH,IAAA,QAGOJ,KAAK,CAACQ,KAAK;IAAAC,QAAA,OAAAC,cAAA,CAAAN,IAAA,eADgCF,IAAI,CAAC,CAAC;IAAA,OAAAE,IAAA;EAAA;IAAA,IAAAO,KAAA,GAAAN,gBAAA,CAAAO,OAAA;IAAAL,QAAA,CAAAI,KAAA,QAIjDX,KAAK,CAACa,KAAK;IAAAJ,QAAA,CAAAK,GAAA;MAAA,IAAAC,GAAA,GADD,wBAAwBf,KAAK,CAACgB,UAAU,IAAI,EAAE,EAAE;QAAAC,IAAA,GAAaf,IAAI,CAAC,CAAC;QAAAgB,IAAA,GAASlB,KAAK,CAACmB,KAAK;MAAAJ,GAAA,KAAAD,GAAA,CAAAM,CAAA,IAAAC,WAAA,CAAAV,KAAA,EAAAG,GAAA,CAAAM,CAAA,GAAAL,GAAA;MAAAE,IAAA,KAAAH,GAAA,CAAAQ,CAAA,IAAAZ,cAAA,CAAAC,KAAA,eAAAG,GAAA,CAAAQ,CAAA,GAAAL,IAAA;MAAAC,IAAA,KAAAJ,GAAA,CAAAS,CAAA,IAAAb,cAAA,CAAAC,KAAA,WAAAG,GAAA,CAAAS,CAAA,GAAAL,IAAA;MAAA,OAAAJ,GAAA;IAAA;MAAAM,CAAA,EAAAI,SAAA;MAAAF,CAAA,EAAAE,SAAA;MAAAD,CAAA,EAAAC;IAAA;IAAA,OAAAb,KAAA;EAAA,MAAAc,iBAAA,CAGnG9B,IAAI;IAAA,IAAC+B,IAAIA,CAAA;MAAA,OAAEC,MAAA,SAAA3B,KAAK,CAAC4B,KAAK,OAAI5B,KAAK,CAAC4B,KAAK,CAACC,MAAM,GAAG,CAAC;IAAA;IAAA,IAAAC,SAAA;MAAA,OAAAL,iBAAA,CAC9C7B,KAAK;QACJmC,IAAI;QAAA;QAEJC,KAAK,EAAE;UAAEC,MAAM,EAAE;QAAO,CAAC;QAAA,IACzBC,IAAIA,CAAA;UAAA,OAAEC,KAAK,CAACC,IAAI,CAACpC,KAAK,CAAC4B,KAAK,IAAI,EAAE,CAAC;QAAA;QACnCS,QAAQ;QACRC,UAAU;MAAA;IAAA;EAAA,IAAAb,iBAAA,CAGb9B,IAAI;IAAA,IAAC+B,IAAIA,CAAA;MAAA,OAAE1B,KAAK,CAACuC,GAAG,IAAIpC,MAAM,CAAC,CAAC;IAAA;IAAA,IAAA2B,SAAA;MAAA,IAAAU,KAAA,GAAAnC,gBAAA,CAAAoC,OAAA;QAAAC,KAAA,GAAAF,KAAA,CAAAG,UAAA;QAAA,CAAAC,KAAA,EAAAC,IAAA,IAAAC,eAAA,CAAAJ,KAAA,CAAAK,WAAA;QAAAC,KAAA,GAAAJ,KAAA,CAAAG,WAAA;QAAA,CAAAE,KAAA,EAAAC,KAAA,IAAAJ,eAAA,CAAAE,KAAA,CAAAD,WAAA;MAAAxC,QAAA,CAAAiC,KAAA,EAAAf,iBAAA,CAE5B9B,IAAI;QAAA,IAAC+B,IAAIA,CAAA;UAAA,OAAE1B,KAAK,CAACuC,GAAG;QAAA;QAAAT,QAAA,EAAIS,GAAG;UAAA,IAAAY,KAAA,GAAA9C,gBAAA,CAAA+C,OAAA;UAAA7C,QAAA,CAAA4C,KAAA,EAAuCZ,GAAG;UAAA,OAAAY,KAAA;QAAA;MAAU,IAAAP,KAAA,EAAAC,IAAA;MAAAtC,QAAA,CAAAiC,KAAA,EAAAf,iBAAA,CAC/E9B,IAAI;QAAA,IAAC+B,IAAIA,CAAA;UAAA,OAAEvB,MAAM,CAAC,CAAC;QAAA;QAAA2B,QAAA,EAChBjB,KAAK,IAAAY,iBAAA,CACJ9B,IAAI;UAAA,IACH+B,IAAIA,CAAA;YAAA,OAAEb,KAAK,CAAC,CAAC,CAACwC,IAAI;UAAA;UAAA,IAClBC,QAAQA,CAAA;YAAA;cAAA,IAAAC,KAAA,GAAAlD,gBAAA,CAAAmD,OAAA;cAAA/C,QAAA,CAAAK,GAAA;gBAAA,IAAA2C,IAAA,GAAY,GAAG5C,KAAK,CAAC,CAAC,CAAC6C,IAAI,6BAA6B;kBAAAC,IAAA,GAAa9C,KAAK,CAAC,CAAC,CAAC+C,IAAI;gBAAAH,IAAA,KAAA3C,GAAA,CAAAM,CAAA,IAAAC,WAAA,CAAAkC,KAAA,EAAAzC,GAAA,CAAAM,CAAA,GAAAqC,IAAA;gBAAAE,IAAA,KAAA7C,GAAA,CAAAQ,CAAA,IAAAZ,cAAA,CAAA6C,KAAA,eAAAzC,GAAA,CAAAQ,CAAA,GAAAqC,IAAA;gBAAA,OAAA7C,GAAA;cAAA;gBAAAM,CAAA,EAAAI,SAAA;gBAAAF,CAAA,EAAAE;cAAA;cAAA,OAAA+B,KAAA;YAAA;UAAA;UAAAzB,QAAA,EAEvFuB,IAAI;YAAA,IAAAQ,KAAA,GAAAxD,gBAAA,CAAAyD,OAAA;cAAAC,KAAA,GAAAF,KAAA,CAAAlB,UAAA;cAAAqB,MAAA,GAAAD,KAAA,CAAAhB,WAAA;cAAA,CAAAkB,MAAA,EAAAC,KAAA,IAAApB,eAAA,CAAAkB,MAAA,CAAAjB,WAAA;YAAAxC,QAAA,CAAAsD,KAAA,EAGDR,IAAI,EAAAY,MAAA,EAAAC,KAAA;YAAAzD,QAAA,CAAAK,GAAA;cAAA,IAAAqD,IAAA,GAFwCtD,KAAK,CAAC,CAAC,CAAC+C,IAAI;gBAAAQ,IAAA,GAC/CvD,KAAK,CAAC,CAAC,CAAC6C,IAAI;cAAAS,IAAA,KAAArD,GAAA,CAAAM,CAAA,IAAAV,cAAA,CAAAmD,KAAA,eAAA/C,GAAA,CAAAM,CAAA,GAAA+C,IAAA;cAAAC,IAAA,KAAAtD,GAAA,CAAAQ,CAAA,IAAAD,WAAA,CAAA0C,KAAA,EAAAjD,GAAA,CAAAQ,CAAA,GAAA8C,IAAA;cAAA,OAAAtD,GAAA;YAAA;cAAAM,CAAA,EAAAI,SAAA;cAAAF,CAAA,EAAAE;YAAA;YAAA,OAAAqC,KAAA;UAAA;QAGzB;MAEJ,IAAAZ,KAAA,EAAAC,KAAA;MAAA,OAAAV,KAAA;IAAA;EAAA;AAMb;AAEA,OAAO,SAAS6B,QAAQA,CAACrE,KAAoB,EAAe;EAC1D,MAAMC,QAAQ,GAAGJ,eAAe,CAAC,CAAC;EAClC,MAAMK,IAAI,GAAGA,CAAA,KAAMF,KAAK,CAACE,IAAI,IAAID,QAAQ;EACzC,MAAMqE,OAAO,GAAGxE,kBAAkB,CAAC,CAAC;EACpC,OAAA2B,iBAAA,CACG9B,IAAI;IAAA,IACH+B,IAAIA,CAAA;MAAA,OAAE1B,KAAK,CAACuE,IAAI;IAAA;IAAA,IAChBjB,QAAQA,CAAA;MAAA;QAAA,IAAAkB,MAAA,GAAAnE,gBAAA,CAAAoE,OAAA;QAAA/D,cAAA,CAAA8D,MAAA,kBACsDF,OAAO;QAAA/D,QAAA,CAAAiE,MAAA,EAAA/C,iBAAA,CAChE1B,IAAI,EAAKC,KAAK;QAAAS,QAAA,OAAAC,cAAA,CAAA8D,MAAA,eADqBtE,IAAI,CAAC,CAAC;QAAA,OAAAsE,MAAA;MAAA;IAAA;IAAA1C,QAAA,EAK5CyC,IAAI;MAAA,IAAAG,MAAA,GAAArE,gBAAA,CAAAsE,OAAA;QAAAC,MAAA,GAAAF,MAAA,CAAA/B,UAAA;QAAAkC,MAAA,GAAAD,MAAA,CAAA7B,WAAA;QAAA,CAAA+B,MAAA,EAAAC,KAAA,IAAAjC,eAAA,CAAA+B,MAAA,CAAA9B,WAAA;MAAArC,cAAA,CAAAgE,MAAA,kBACwFJ,OAAO;MAAA/D,QAAA,CAAAmE,MAAA,EAAAjD,iBAAA,CAEhG1B,IAAI,EAAKC,KAAK,GAAA8E,MAAA,EAAAC,KAAA;MAAAtE,QAAA,CAAAK,GAAA;QAAA,IAAAkE,IAAA,GAFRT,IAAI,CAAC,CAAC;UAAAU,IAAA,GAAuD/E,IAAI,CAAC,CAAC;QAAA8E,IAAA,KAAAlE,GAAA,CAAAM,CAAA,IAAAV,cAAA,CAAAgE,MAAA,UAAA5D,GAAA,CAAAM,CAAA,GAAA4D,IAAA;QAAAC,IAAA,KAAAnE,GAAA,CAAAQ,CAAA,IAAAZ,cAAA,CAAAgE,MAAA,eAAA5D,GAAA,CAAAQ,CAAA,GAAA2D,IAAA;QAAA,OAAAnE,GAAA;MAAA;QAAAM,CAAA,EAAAI,SAAA;QAAAF,CAAA,EAAAE;MAAA;MAAA,OAAAkD,MAAA;IAAA;EAI7E;AAGP;AAEA,eAAeL,QAAQ","ignoreList":[]}

package/dist/browser/surfaces/StatGrid.js

@@ -0,0 +1,80 @@
+import { template as _$template } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+import { getNextElement as _$getNextElement } from "solid-js/web";
+import { getNextMarker as _$getNextMarker } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<header class=k2b-stat-grid__header><span class=k2b-stat-grid__title></span><!$><!/>`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<div class=k2b-stat-grid__body>`),
+  _tmpl$3 = /*#__PURE__*/_$template(`<a class=k2b-stat-grid__action><span></span><i class="ti ti-arrow-up-right"aria-hidden=true>`);
+import { createContext, Show, useContext } from "solid-js";
+import { Paper } from "./Paper";
+const StatGridSizeContext = createContext("md");
+const StatGridSurfaceContext = createContext("white");
+export const useStatGridSize = () => useContext(StatGridSizeContext);
+export const useStatGridSurface = () => useContext(StatGridSurfaceContext);
+const columnValue = columns => {
+  if (columns && Number.isInteger(columns) && columns >= 1 && columns <= 6) return columns;
+  return 6;
+};
+export function StatGrid(props) {
+  const surface = () => props.surface ?? "white";
+  return _$createComponent(Paper, {
+    get ["class"]() {
+      return `k2b-stat-grid ${props.class ?? ""}`;
+    },
+    get ["data-columns"]() {
+      return columnValue(props.columns);
+    },
+    get ["data-surface"]() {
+      return surface();
+    },
+    get children() {
+      return [_$createComponent(Show, {
+        get when() {
+          return props.title;
+        },
+        get children() {
+          var _el$ = _$getNextElement(_tmpl$),
+            _el$2 = _el$.firstChild,
+            _el$3 = _el$2.nextSibling,
+            [_el$4, _co$] = _$getNextMarker(_el$3.nextSibling);
+          _$insert(_el$2, () => props.title);
+          _$insert(_el$, _$createComponent(Show, {
+            get when() {
+              return props.action;
+            },
+            children: action => (() => {
+              var _el$6 = _$getNextElement(_tmpl$3),
+                _el$7 = _el$6.firstChild;
+              _$insert(_el$7, () => action().label);
+              _$effect(() => _$setAttribute(_el$6, "href", action().href));
+              return _el$6;
+            })()
+          }), _el$4, _co$);
+          return _el$;
+        }
+      }), _$createComponent(StatGridSizeContext.Provider, {
+        get value() {
+          return props.size ?? "md";
+        },
+        get children() {
+          return _$createComponent(StatGridSurfaceContext.Provider, {
+            get value() {
+              return surface();
+            },
+            get children() {
+              var _el$5 = _$getNextElement(_tmpl$2);
+              _$insert(_el$5, () => props.children);
+              return _el$5;
+            }
+          });
+        }
+      })];
+    }
+  });
+}
+export default StatGrid;
+//# sourceMappingURL=StatGrid.js.map

package/dist/browser/surfaces/StatGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createContext","Show","useContext","Paper","StatGridSizeContext","StatGridSurfaceContext","useStatGridSize","useStatGridSurface","columnValue","columns","Number","isInteger","StatGrid","props","surface","_$createComponent","class","data-columns","data-surface","children","when","title","_el$","_$getNextElement","_tmpl$","_el$2","firstChild","_el$3","nextSibling","_el$4","_co$","_$getNextMarker","_$insert","action","_el$6","_tmpl$3","_el$7","label","_$effect","_$setAttribute","href","Provider","value","size","_el$5","_tmpl$2"],"sources":["surfaces/StatGrid.tsx"],"sourcesContent":["import { createContext, type JSX, Show, useContext } from \"solid-js\";\nimport { Paper } from \"./Paper\";\n\nexport type StatGridSize = \"md\" | \"sm\";\nexport type StatGridSurface = \"white\" | \"muted\";\nexport type StatGridColumns = 1 | 2 | 3 | 4 | 5 | 6;\nexport type StatGridAction = { label: string; href: string };\n\nexport type StatGridProps = {\n  children: JSX.Element;\n  title?: string;\n  action?: StatGridAction;\n  columns?: StatGridColumns;\n  size?: StatGridSize;\n  surface?: StatGridSurface;\n  class?: string;\n};\n\nconst StatGridSizeContext = createContext<StatGridSize>(\"md\");\nconst StatGridSurfaceContext = createContext<StatGridSurface>(\"white\");\n\nexport const useStatGridSize = (): StatGridSize => useContext(StatGridSizeContext);\nexport const useStatGridSurface = (): StatGridSurface => useContext(StatGridSurfaceContext);\n\nconst columnValue = (columns?: StatGridColumns): StatGridColumns => {\n  if (columns && Number.isInteger(columns) && columns >= 1 && columns <= 6) return columns;\n  return 6;\n};\n\nexport function StatGrid(props: StatGridProps): JSX.Element {\n  const surface = () => props.surface ?? \"white\";\n  return (\n    <Paper class={`k2b-stat-grid ${props.class ?? \"\"}`} data-columns={columnValue(props.columns)} data-surface={surface()}>\n      <Show when={props.title}>\n        <header class=\"k2b-stat-grid__header\">\n          <span class=\"k2b-stat-grid__title\">{props.title}</span>\n          <Show when={props.action}>\n            {(action) => (\n              <a href={action().href} class=\"k2b-stat-grid__action\">\n                <span>{action().label}</span>\n                <i class=\"ti ti-arrow-up-right\" aria-hidden=\"true\" />\n              </a>\n            )}\n          </Show>\n        </header>\n      </Show>\n      <StatGridSizeContext.Provider value={props.size ?? \"md\"}>\n        <StatGridSurfaceContext.Provider value={surface()}>\n          <div class=\"k2b-stat-grid__body\">{props.children}</div>\n        </StatGridSurfaceContext.Provider>\n      </StatGridSizeContext.Provider>\n    </Paper>\n  );\n}\n\nexport default StatGrid;\n"],"mappings":";;;;;;;;;;;AAAA,SAASA,aAAa,EAAYC,IAAI,EAAEC,UAAU,QAAQ,UAAU;AACpE,SAASC,KAAK,QAAQ,SAAS;AAiB/B,MAAMC,mBAAmB,GAAGJ,aAAa,CAAe,IAAI,CAAC;AAC7D,MAAMK,sBAAsB,GAAGL,aAAa,CAAkB,OAAO,CAAC;AAEtE,OAAO,MAAMM,eAAe,GAAGA,CAAA,KAAoBJ,UAAU,CAACE,mBAAmB,CAAC;AAClF,OAAO,MAAMG,kBAAkB,GAAGA,CAAA,KAAuBL,UAAU,CAACG,sBAAsB,CAAC;AAE3F,MAAMG,WAAW,GAAIC,OAAyB,IAAsB;EAClE,IAAIA,OAAO,IAAIC,MAAM,CAACC,SAAS,CAACF,OAAO,CAAC,IAAIA,OAAO,IAAI,CAAC,IAAIA,OAAO,IAAI,CAAC,EAAE,OAAOA,OAAO;EACxF,OAAO,CAAC;AACV,CAAC;AAED,OAAO,SAASG,QAAQA,CAACC,KAAoB,EAAe;EAC1D,MAAMC,OAAO,GAAGA,CAAA,KAAMD,KAAK,CAACC,OAAO,IAAI,OAAO;EAC9C,OAAAC,iBAAA,CACGZ,KAAK;IAAA,aAAAa,CAAA;MAAA,OAAQ,iBAAiBH,KAAK,CAACG,KAAK,IAAI,EAAE,EAAE;IAAA;IAAA,oBAAAC,CAAA;MAAA,OAAgBT,WAAW,CAACK,KAAK,CAACJ,OAAO,CAAC;IAAA;IAAA,oBAAAS,CAAA;MAAA,OAAgBJ,OAAO,CAAC,CAAC;IAAA;IAAA,IAAAK,SAAA;MAAA,QAAAJ,iBAAA,CAClHd,IAAI;QAAA,IAACmB,IAAIA,CAAA;UAAA,OAAEP,KAAK,CAACQ,KAAK;QAAA;QAAA,IAAAF,SAAA;UAAA,IAAAG,IAAA,GAAAC,gBAAA,CAAAC,MAAA;YAAAC,KAAA,GAAAH,IAAA,CAAAI,UAAA;YAAAC,KAAA,GAAAF,KAAA,CAAAG,WAAA;YAAA,CAAAC,KAAA,EAAAC,IAAA,IAAAC,eAAA,CAAAJ,KAAA,CAAAC,WAAA;UAAAI,QAAA,CAAAP,KAAA,QAEiBZ,KAAK,CAACQ,KAAK;UAAAW,QAAA,CAAAV,IAAA,EAAAP,iBAAA,CAC9Cd,IAAI;YAAA,IAACmB,IAAIA,CAAA;cAAA,OAAEP,KAAK,CAACoB,MAAM;YAAA;YAAAd,QAAA,EACpBc,MAAM;cAAA,IAAAC,KAAA,GAAAX,gBAAA,CAAAY,OAAA;gBAAAC,KAAA,GAAAF,KAAA,CAAAR,UAAA;cAAAM,QAAA,CAAAI,KAAA,QAEGH,MAAM,CAAC,CAAC,CAACI,KAAK;cAAAC,QAAA,OAAAC,cAAA,CAAAL,KAAA,UADdD,MAAM,CAAC,CAAC,CAACO,IAAI;cAAA,OAAAN,KAAA;YAAA;UAIvB,IAAAL,KAAA,EAAAC,IAAA;UAAA,OAAAR,IAAA;QAAA;MAAA,IAAAP,iBAAA,CAINX,mBAAmB,CAACqC,QAAQ;QAAA,IAACC,KAAKA,CAAA;UAAA,OAAE7B,KAAK,CAAC8B,IAAI,IAAI,IAAI;QAAA;QAAA,IAAAxB,SAAA;UAAA,OAAAJ,iBAAA,CACpDV,sBAAsB,CAACoC,QAAQ;YAAA,IAACC,KAAKA,CAAA;cAAA,OAAE5B,OAAO,CAAC,CAAC;YAAA;YAAA,IAAAK,SAAA;cAAA,IAAAyB,KAAA,GAAArB,gBAAA,CAAAsB,OAAA;cAAAb,QAAA,CAAAY,KAAA,QACb/B,KAAK,CAACM,QAAQ;cAAA,OAAAyB,KAAA;YAAA;UAAA;QAAA;MAAA;IAAA;EAAA;AAK1D;AAEA,eAAehC,QAAQ","ignoreList":[]}

package/dist/browser/surfaces/StatusBadge.js

@@ -0,0 +1,70 @@
+import { template as _$template } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
+import { className as _$className } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { getNextElement as _$getNextElement } from "solid-js/web";
+import { getNextMarker as _$getNextMarker } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<span><!$><!/><span class=k2b-status-badge__label>`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<span class=k2b-status-badge__dot aria-hidden=true>`),
+  _tmpl$3 = /*#__PURE__*/_$template(`<i aria-hidden=true>`);
+import { Show } from "solid-js";
+const DEFAULT_ICONS = {
+  ok: "ti ti-check",
+  warning: "ti ti-alert-triangle",
+  error: "ti ti-alert-circle",
+  degraded: "ti ti-plug-connected-x",
+  running: "ti ti-loader-2",
+  neutral: "ti ti-minus"
+};
+export function StatusBadge(props) {
+  const variant = () => props.variant ?? "chip";
+  const icon = () => props.icon === null ? undefined : props.icon ?? DEFAULT_ICONS[props.tone];
+  return (() => {
+    var _el$ = _$getNextElement(_tmpl$),
+      _el$3 = _el$.firstChild,
+      [_el$4, _co$] = _$getNextMarker(_el$3.nextSibling),
+      _el$2 = _el$4.nextSibling;
+    _$insert(_el$, _$createComponent(Show, {
+      get when() {
+        return variant() !== "dot";
+      },
+      get fallback() {
+        return _$getNextElement(_tmpl$2);
+      },
+      get children() {
+        return _$createComponent(Show, {
+          get when() {
+            return icon();
+          },
+          children: glyph => (() => {
+            var _el$6 = _$getNextElement(_tmpl$3);
+            _$effect(() => _$className(_el$6, glyph()));
+            return _el$6;
+          })()
+        });
+      }
+    }), _el$4, _co$);
+    _$insert(_el$2, () => props.label);
+    _$effect(_p$ => {
+      var _v$ = `k2b-status-badge ${props.class ?? ""}`,
+        _v$2 = props.tone,
+        _v$3 = variant(),
+        _v$4 = props.title;
+      _v$ !== _p$.e && _$className(_el$, _p$.e = _v$);
+      _v$2 !== _p$.t && _$setAttribute(_el$, "data-tone", _p$.t = _v$2);
+      _v$3 !== _p$.a && _$setAttribute(_el$, "data-variant", _p$.a = _v$3);
+      _v$4 !== _p$.o && _$setAttribute(_el$, "title", _p$.o = _v$4);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined
+    });
+    return _el$;
+  })();
+}
+export default StatusBadge;
+//# sourceMappingURL=StatusBadge.js.map

package/dist/browser/surfaces/StatusBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Show","DEFAULT_ICONS","ok","warning","error","degraded","running","neutral","StatusBadge","props","variant","icon","undefined","tone","_el$","_$getNextElement","_tmpl$","_el$3","firstChild","_el$4","_co$","_$getNextMarker","nextSibling","_el$2","_$insert","_$createComponent","when","fallback","_tmpl$2","children","glyph","_el$6","_tmpl$3","_$effect","_$className","label","_p$","_v$","class","_v$2","_v$3","_v$4","title","e","t","_$setAttribute","a","o"],"sources":["surfaces/StatusBadge.tsx"],"sourcesContent":["import { type JSX, Show } from \"solid-js\";\n\nexport type StatusTone = \"ok\" | \"warning\" | \"error\" | \"degraded\" | \"running\" | \"neutral\";\n\nexport type StatusBadgeProps = {\n  tone: StatusTone;\n  label: JSX.Element;\n  icon?: string | null;\n  variant?: \"chip\" | \"dot\" | \"text\";\n  title?: string;\n  class?: string;\n};\n\nconst DEFAULT_ICONS: Record<StatusTone, string> = {\n  ok: \"ti ti-check\",\n  warning: \"ti ti-alert-triangle\",\n  error: \"ti ti-alert-circle\",\n  degraded: \"ti ti-plug-connected-x\",\n  running: \"ti ti-loader-2\",\n  neutral: \"ti ti-minus\",\n};\n\nexport function StatusBadge(props: StatusBadgeProps): JSX.Element {\n  const variant = () => props.variant ?? \"chip\";\n  const icon = () => (props.icon === null ? undefined : (props.icon ?? DEFAULT_ICONS[props.tone]));\n  return (\n    <span class={`k2b-status-badge ${props.class ?? \"\"}`} data-tone={props.tone} data-variant={variant()} title={props.title}>\n      <Show when={variant() !== \"dot\"} fallback={<span class=\"k2b-status-badge__dot\" aria-hidden=\"true\" />}>\n        <Show when={icon()}>{(glyph) => <i class={glyph()} aria-hidden=\"true\" />}</Show>\n      </Show>\n      <span class=\"k2b-status-badge__label\">{props.label}</span>\n    </span>\n  );\n}\n\nexport default StatusBadge;\n"],"mappings":";;;;;;;;;;;AAAA,SAAmBA,IAAI,QAAQ,UAAU;AAazC,MAAMC,aAAyC,GAAG;EAChDC,EAAE,EAAE,aAAa;EACjBC,OAAO,EAAE,sBAAsB;EAC/BC,KAAK,EAAE,oBAAoB;EAC3BC,QAAQ,EAAE,wBAAwB;EAClCC,OAAO,EAAE,gBAAgB;EACzBC,OAAO,EAAE;AACX,CAAC;AAED,OAAO,SAASC,WAAWA,CAACC,KAAuB,EAAe;EAChE,MAAMC,OAAO,GAAGA,CAAA,KAAMD,KAAK,CAACC,OAAO,IAAI,MAAM;EAC7C,MAAMC,IAAI,GAAGA,CAAA,KAAOF,KAAK,CAACE,IAAI,KAAK,IAAI,GAAGC,SAAS,GAAIH,KAAK,CAACE,IAAI,IAAIV,aAAa,CAACQ,KAAK,CAACI,IAAI,CAAG;EAChG;IAAA,IAAAC,IAAA,GAAAC,gBAAA,CAAAC,MAAA;MAAAC,KAAA,GAAAH,IAAA,CAAAI,UAAA;MAAA,CAAAC,KAAA,EAAAC,IAAA,IAAAC,eAAA,CAAAJ,KAAA,CAAAK,WAAA;MAAAC,KAAA,GAAAJ,KAAA,CAAAG,WAAA;IAAAE,QAAA,CAAAV,IAAA,EAAAW,iBAAA,CAEKzB,IAAI;MAAA,IAAC0B,IAAIA,CAAA;QAAA,OAAEhB,OAAO,CAAC,CAAC,KAAK,KAAK;MAAA;MAAA,IAAEiB,QAAQA,CAAA;QAAA,OAAAZ,gBAAA,CAAAa,OAAA;MAAA;MAAA,IAAAC,SAAA;QAAA,OAAAJ,iBAAA,CACtCzB,IAAI;UAAA,IAAC0B,IAAIA,CAAA;YAAA,OAAEf,IAAI,CAAC,CAAC;UAAA;UAAAkB,QAAA,EAAIC,KAAK;YAAA,IAAAC,KAAA,GAAAhB,gBAAA,CAAAiB,OAAA;YAAAC,QAAA,OAAAC,WAAA,CAAAH,KAAA,EAAeD,KAAK,CAAC,CAAC;YAAA,OAAAC,KAAA;UAAA;QAAuB;MAAA;IAAA,IAAAZ,KAAA,EAAAC,IAAA;IAAAI,QAAA,CAAAD,KAAA,QAEnCd,KAAK,CAAC0B,KAAK;IAAAF,QAAA,CAAAG,GAAA;MAAA,IAAAC,GAAA,GAJvC,oBAAoB5B,KAAK,CAAC6B,KAAK,IAAI,EAAE,EAAE;QAAAC,IAAA,GAAa9B,KAAK,CAACI,IAAI;QAAA2B,IAAA,GAAgB9B,OAAO,CAAC,CAAC;QAAA+B,IAAA,GAAShC,KAAK,CAACiC,KAAK;MAAAL,GAAA,KAAAD,GAAA,CAAAO,CAAA,IAAAT,WAAA,CAAApB,IAAA,EAAAsB,GAAA,CAAAO,CAAA,GAAAN,GAAA;MAAAE,IAAA,KAAAH,GAAA,CAAAQ,CAAA,IAAAC,cAAA,CAAA/B,IAAA,eAAAsB,GAAA,CAAAQ,CAAA,GAAAL,IAAA;MAAAC,IAAA,KAAAJ,GAAA,CAAAU,CAAA,IAAAD,cAAA,CAAA/B,IAAA,kBAAAsB,GAAA,CAAAU,CAAA,GAAAN,IAAA;MAAAC,IAAA,KAAAL,GAAA,CAAAW,CAAA,IAAAF,cAAA,CAAA/B,IAAA,WAAAsB,GAAA,CAAAW,CAAA,GAAAN,IAAA;MAAA,OAAAL,GAAA;IAAA;MAAAO,CAAA,EAAA/B,SAAA;MAAAgC,CAAA,EAAAhC,SAAA;MAAAkC,CAAA,EAAAlC,SAAA;MAAAmC,CAAA,EAAAnC;IAAA;IAAA,OAAAE,IAAA;EAAA;AAO5H;AAEA,eAAeN,WAAW","ignoreList":[]}