New Stat Stats

dist/sigpro-ui.esm.js

@@ -31,6 +31,8 @@ __export(exports_sigpro_components, {
   Swap: () => Swap,
   Steps: () => Steps,
   Step: () => Step,
+  Stats: () => Stats,
+  Stat: () => Stat,
   Stack: () => Stack,
   SkeletonText: () => SkeletonText,
   Skeleton: () => Skeleton,
@@ -1033,6 +1035,12 @@ var Select = (p2, c) => {
 var Skeleton = (p2) => O("div", { ...p2, class: cls("skeleton", p2.class) });
 var SkeletonText = (p2) => O("span", { ...p2, class: cls("skeleton skeleton-text", p2.class) });
 var Stack = (p2, c) => O("div", { ...p2, class: cls("stack", p2.class) }, c);
+var Stats = (p2, c) => O("div", { ...p2, class: cls("stats shadow", p2.class) }, c);
+var Stat = (p2) => O("div", { ...p2, class: cls("stat", p2.class) }, [
+  p2.title ? O("div", { class: "stat-title" }, p2.title) : null,
+  p2.value ? O("div", { class: "stat-value" }, p2.value) : null,
+  p2.desc ? O("div", { class: "stat-desc" }, p2.desc) : null
+]);
 var Steps = (p2, c) => O("ul", { ...p2, class: cls("steps", p2.class) }, c);
 var Step = (p2, c) => O("li", { ...p2, class: cls("step", p2.class), "data-content": p2.dataContent }, c);
 var Swap = (p2, c) => O("label", { ...p2, class: cls("swap", p2.class) }, c);

dist/sigpro-ui.js

@@ -62,6 +62,8 @@
     Swap: () => Swap,
     Steps: () => Steps,
     Step: () => Step,
+    Stats: () => Stats,
+    Stat: () => Stat,
     Stack: () => Stack,
     SkeletonText: () => SkeletonText,
     Skeleton: () => Skeleton,
@@ -1064,6 +1066,12 @@
   var Skeleton = (p2) => O("div", { ...p2, class: cls("skeleton", p2.class) });
   var SkeletonText = (p2) => O("span", { ...p2, class: cls("skeleton skeleton-text", p2.class) });
   var Stack = (p2, c) => O("div", { ...p2, class: cls("stack", p2.class) }, c);
+  var Stats = (p2, c) => O("div", { ...p2, class: cls("stats shadow", p2.class) }, c);
+  var Stat = (p2) => O("div", { ...p2, class: cls("stat", p2.class) }, [
+    p2.title ? O("div", { class: "stat-title" }, p2.title) : null,
+    p2.value ? O("div", { class: "stat-value" }, p2.value) : null,
+    p2.desc ? O("div", { class: "stat-desc" }, p2.desc) : null
+  ]);
   var Steps = (p2, c) => O("ul", { ...p2, class: cls("steps", p2.class) }, c);
   var Step = (p2, c) => O("li", { ...p2, class: cls("step", p2.class), "data-content": p2.dataContent }, c);
   var Swap = (p2, c) => O("label", { ...p2, class: cls("swap", p2.class) }, c);

docs/demo_display.md

@@ -77,16 +77,13 @@ mount(
 <div id="demo-stat"></div>
 
 ```js
-// Stat is a simple wrapper for the DaisyUI stat component
-const Stat = (p, c) => div({ ...p, class: cls('stat', p.class) }, c)
-
 mount(
-  div({ class: 'stats shadow' },
+  Stats({},
-    Stat({ class: 'stat' }, [
+    Stat({
-      div({ class: 'stat-title' }, 'Total Downloads'),
+      title: 'Total Downloads',
-      div({ class: 'stat-value' }, '12.5K'),
+      value: '12.5K',
-      div({ class: 'stat-desc' }, '21% more than last month')
+      desc: '21% more than last month'
-    ])
+    })
   ),
   '#demo-stat'
 )

sigpro-components.js

@@ -455,6 +455,12 @@ export const Select = (p, c) => {
 export const Skeleton = (p) => h("div", { ...p, class: cls("skeleton", p.class) });
 export const SkeletonText = (p) => h("span", { ...p, class: cls("skeleton skeleton-text", p.class) });
 export const Stack = (p, c) => h("div", { ...p, class: cls("stack", p.class) }, c);
+export const Stats = (p, c) => h('div', { ...p, class: cls('stats shadow', p.class) }, c)
+export const Stat = (p) => h('div', { ...p, class: cls('stat', p.class) }, [
+  p.title ? h('div', { class: 'stat-title' }, p.title) : null,
+  p.value ? h('div', { class: 'stat-value' }, p.value) : null,
+  p.desc ? h('div', { class: 'stat-desc' }, p.desc) : null
+])
 export const Steps = (p, c) => h("ul", { ...p, class: cls("steps", p.class) }, c);
 export const Step = (p, c) => h("li", { ...p, class: cls("step", p.class), "data-content": p.dataContent }, c);
 export const Swap = (p, c) => h('label', { ...p, class: cls('swap', p.class) }, c)