@k2b/ui 0.22.0 → 0.23.0

package/dist/ssr/surfaces/StatCell.js

@@ -72,9 +72,9 @@ export function StatCell(props) {
       return props.href;
     },
     get fallback() {
-      return _$ssr(_tmpl$7, _$ssrAttribute("data-size", _$escape(size(), true), false) + _$ssrAttribute("data-surface", _$escape(surface, true), false), _$escape(_$createComponent(Body, props)));
+      return _$ssr(_tmpl$7, _$ssrAttribute("data-size", _$escape(size(), true), false) + _$ssrAttribute("data-surface", _$escape(surface, true), false) + _$ssrAttribute("data-wrap", _$escape(props.wrap || undefined, true), false), _$escape(_$createComponent(Body, props)));
     },
-    children: href => _$ssr(_tmpl$8, _$ssrAttribute("href", _$escape(href(), true), false), _$ssrAttribute("data-size", _$escape(size(), true), false) + _$ssrAttribute("data-surface", _$escape(surface, true), false), _$escape(_$createComponent(Body, props)))
+    children: href => _$ssr(_tmpl$8, _$ssrAttribute("href", _$escape(href(), true), false), _$ssrAttribute("data-size", _$escape(size(), true), false) + _$ssrAttribute("data-surface", _$escape(surface, true), false) + _$ssrAttribute("data-wrap", _$escape(props.wrap || undefined, true), false), _$escape(_$createComponent(Body, props)))
   });
 }
 export default StatCell;

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

@@ -1 +1 @@
-{"version":3,"names":[],"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,SAAmB,IAAI,QAAQ,UAAU;AACzC,OAAO,KAAK,MAAM,kBAAkB;AAEpC,SAA4B,eAAe,EAAE,kBAAkB,QAAQ,YAAY;AAsBnF,SAAS,IAAI,CAAC,KAAoB,EAAe;EAC/C,MAAM,QAAQ,GAAG,eAAe,CAAC,CAAC;EAClC,MAAM,IAAI,GAAG,MAAM,KAAK,CAAC,IAAI,IAAI,QAAQ;EACzC,MAAM,MAAM,GAAG,MAAM,KAAK,CAAC,MAAM;EACjC,2DAEkD,IAAI,CAAC,CAAC,0BACjD,KAAK,CAAC,KAAK,mBAED,iCAAwB,KAAK,CAAC,UAAU,IAAI,EAAE,SAAE,uCAAa,IAAI,CAAC,CAAC,mDAAS,KAAK,CAAC,KAAK,0BACjG,KAAK,CAAC,KAAK,sBAEb,IAAI;IAAA,IAAC,IAAI;MAAA,OAAE,oBAAK,CAAC,KAAK,OAAI,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC;IAAA;IAAA;MAAA,yBAC9C,KAAK;QACJ,IAAI;QAAA;QAEJ,KAAK,EAAE;UAAE,MAAM,EAAE;QAAO,CAAC;QAAA,IACzB,IAAI;UAAA,OAAE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;QAAA;QACnC,QAAQ;QACR,UAAU;MAAA;IAAA;EAAA,sBAGb,IAAI;IAAA,IAAC,IAAI;MAAA,OAAE,KAAK,CAAC,GAAG,IAAI,MAAM,CAAC,CAAC;IAAA;IAAA;MAAA,iDAE5B,IAAI;QAAA,IAAC,IAAI;UAAA,OAAE,KAAK,CAAC,GAAG;QAAA;QAAA,UAAI,GAAG,4BAAuC,GAAG,CAAC,CAAC;MAAQ,gCAC/E,IAAI;QAAA,IAAC,IAAI;UAAA,OAAE,MAAM,CAAC,CAAC;QAAA;QAAA,UAChB,KAAK,sBACJ,IAAI;UAAA,IACH,IAAI;YAAA,OAAE,KAAK,CAAC,CAAC,CAAC,IAAI;UAAA;UAAA,IAClB,QAAQ;YAAA,sBAAY,YAAG,KAAK,CAAC,CAAC,CAAC,IAAI,oCAA6B,uCAAa,KAAK,CAAC,CAAC,CAAC,IAAI;UAAA;UAAA,UAEvF,IAAI,wDAC2C,KAAK,CAAC,CAAC,CAAC,IAAI,kDAC/C,KAAK,CAAC,CAAC,CAAC,IAAI,0BACrB,IAAI,CAAC,CAAC;QAEV;MAEJ;IAAA;EAAA;AAMb;AAEA,OAAO,SAAS,QAAQ,CAAC,KAAoB,EAAe;EAC1D,MAAM,QAAQ,GAAG,eAAe,CAAC,CAAC;EAClC,MAAM,IAAI,GAAG,MAAM,KAAK,CAAC,IAAI,IAAI,QAAQ;EACzC,MAAM,OAAO,GAAG,kBAAkB,CAAC,CAAC;EACpC,yBACG,IAAI;IAAA,IACH,IAAI;MAAA,OAAE,KAAK,CAAC,IAAI;IAAA;IAAA,IAChB,QAAQ;MAAA,2DACgC,IAAI,CAAC,CAAC,0DAAgB,OAAO,4CAChE,IAAI,EAAK,KAAK;IAAA;IAAA,UAIjB,IAAI,mDACK,IAAI,CAAC,CAAC,sDAAuD,IAAI,CAAC,CAAC,0DAAgB,OAAO,4CAEhG,IAAI,EAAK,KAAK;EAElB;AAGP;AAEA,eAAe,QAAQ","ignoreList":[]}
+{"version":3,"names":[],"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   * Wraps the label, value and support line instead of truncating them. Use it for a cell whose height nothing\n   * reserves, such as one figure on its own; cells compared in a row keep one line each.\n   */\n  wrap?: boolean;\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} data-wrap={props.wrap || undefined}>\n          <Body {...props} />\n        </div>\n      }\n    >\n      {(href) => (\n        <a\n          href={href()}\n          class=\"k2b-stat-cell k2b-stat-cell--link\"\n          data-size={size()}\n          data-surface={surface}\n          data-wrap={props.wrap || undefined}\n        >\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,SAAmB,IAAI,QAAQ,UAAU;AACzC,OAAO,KAAK,MAAM,kBAAkB;AAEpC,SAA4B,eAAe,EAAE,kBAAkB,QAAQ,YAAY;AA2BnF,SAAS,IAAI,CAAC,KAAoB,EAAe;EAC/C,MAAM,QAAQ,GAAG,eAAe,CAAC,CAAC;EAClC,MAAM,IAAI,GAAG,MAAM,KAAK,CAAC,IAAI,IAAI,QAAQ;EACzC,MAAM,MAAM,GAAG,MAAM,KAAK,CAAC,MAAM;EACjC,2DAEkD,IAAI,CAAC,CAAC,0BACjD,KAAK,CAAC,KAAK,mBAED,iCAAwB,KAAK,CAAC,UAAU,IAAI,EAAE,SAAE,uCAAa,IAAI,CAAC,CAAC,mDAAS,KAAK,CAAC,KAAK,0BACjG,KAAK,CAAC,KAAK,sBAEb,IAAI;IAAA,IAAC,IAAI;MAAA,OAAE,oBAAK,CAAC,KAAK,OAAI,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC;IAAA;IAAA;MAAA,yBAC9C,KAAK;QACJ,IAAI;QAAA;QAEJ,KAAK,EAAE;UAAE,MAAM,EAAE;QAAO,CAAC;QAAA,IACzB,IAAI;UAAA,OAAE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;QAAA;QACnC,QAAQ;QACR,UAAU;MAAA;IAAA;EAAA,sBAGb,IAAI;IAAA,IAAC,IAAI;MAAA,OAAE,KAAK,CAAC,GAAG,IAAI,MAAM,CAAC,CAAC;IAAA;IAAA;MAAA,iDAE5B,IAAI;QAAA,IAAC,IAAI;UAAA,OAAE,KAAK,CAAC,GAAG;QAAA;QAAA,UAAI,GAAG,4BAAuC,GAAG,CAAC,CAAC;MAAQ,gCAC/E,IAAI;QAAA,IAAC,IAAI;UAAA,OAAE,MAAM,CAAC,CAAC;QAAA;QAAA,UAChB,KAAK,sBACJ,IAAI;UAAA,IACH,IAAI;YAAA,OAAE,KAAK,CAAC,CAAC,CAAC,IAAI;UAAA;UAAA,IAClB,QAAQ;YAAA,sBAAY,YAAG,KAAK,CAAC,CAAC,CAAC,IAAI,oCAA6B,uCAAa,KAAK,CAAC,CAAC,CAAC,IAAI;UAAA;UAAA,UAEvF,IAAI,wDAC2C,KAAK,CAAC,CAAC,CAAC,IAAI,kDAC/C,KAAK,CAAC,CAAC,CAAC,IAAI,0BACrB,IAAI,CAAC,CAAC;QAEV;MAEJ;IAAA;EAAA;AAMb;AAEA,OAAO,SAAS,QAAQ,CAAC,KAAoB,EAAe;EAC1D,MAAM,QAAQ,GAAG,eAAe,CAAC,CAAC;EAClC,MAAM,IAAI,GAAG,MAAM,KAAK,CAAC,IAAI,IAAI,QAAQ;EACzC,MAAM,OAAO,GAAG,kBAAkB,CAAC,CAAC;EACpC,yBACG,IAAI;IAAA,IACH,IAAI;MAAA,OAAE,KAAK,CAAC,IAAI;IAAA;IAAA,IAChB,QAAQ;MAAA,2DACgC,IAAI,CAAC,CAAC,0DAAgB,OAAO,uDAAa,KAAK,CAAC,IAAI,IAAI,SAAS,4CACpG,IAAI,EAAK,KAAK;IAAA;IAAA,UAIjB,IAAI,mDAEI,IAAI,CAAC,CAAC,sDAED,IAAI,CAAC,CAAC,0DACH,OAAO,uDACV,KAAK,CAAC,IAAI,IAAI,SAAS,4CAGjC,IAAI,EAAK,KAAK;EAElB;AAGP;AAEA,eAAe,QAAQ","ignoreList":[]}