@c2n/stat 0.0.7

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Nguyen Thai Vinh
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,17 @@
+# Stat
+
+A compact KPI block with slots for an icon, formatted value, label, trend and supporting description.
+
+```bash
+npm install @c2n/stat
+```
+
+```html
+<script type="module">
+  import '@c2n/stat'
+</script>
+
+<c2-stat value="$18.4M" label="Assets under management" tone="positive">
+  <span slot="trend">+12%</span>
+</c2-stat>
+```

package/dist/stat.js

@@ -0,0 +1,49 @@
+import { LitElement, html, unsafeCSS } from "lit";
+import { property } from "lit/decorators.js";
+import { customElement } from "@c2n/core/element-helper.js";
+//#region src/stat.scss?inline
+var stat_default = "/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  display: block;\n}\n\n.c2-stat {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--c2-stat--gap,12px);\n  padding: var(--c2-stat--padding,16px);\n  color: var(--c2-stat--color,#18181b);\n  background: var(--c2-stat--background,#ffffff);\n  border: var(--c2-stat--border,1px solid #e4e4e7);\n  border-radius: var(--c2-stat--border-radius,8px);\n  box-shadow: var(--c2-stat--box-shadow,none);\n}\n\n.icon {\n  display: grid;\n  width: var(--c2-stat__icon--size,40px);\n  height: var(--c2-stat__icon--size,40px);\n  flex: 0 0 var(--c2-stat__icon--size,40px);\n  place-items: center;\n  color: var(--c2-stat__icon--color,#71717a);\n  background: var(--c2-stat__icon--background,#f4f4f5);\n  border-radius: var(--c2-stat__icon--border-radius,8px);\n}\n.icon ::slotted(*) {\n  width: 50%;\n  height: 50%;\n}\n\n:host(:not(:has(> [slot=icon]))) .icon,\n:host(:not(:has(> [slot=description]))) .description {\n  display: none;\n}\n\n.content {\n  min-width: 0;\n  margin: 0;\n}\n\n.value-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.value,\n.trend,\n.description {\n  margin: 0;\n}\n\n.value {\n  font-size: var(--c2-stat__value--font-size,24px);\n  font-weight: var(--c2-stat__value--font-weight,600);\n  line-height: var(--c2-stat__value--line-height,32px);\n}\n\n.label {\n  color: var(--c2-stat__label--color,#71717a);\n  font-size: var(--c2-stat__label--font-size,14px);\n}\n\n.description {\n  margin-top: 4px;\n  color: var(--c2-stat__description--color,#71717a);\n  font-size: var(--c2-stat__description--font-size,12px);\n}\n\n:host([tone=positive]) .icon {\n  color: var(--c2-stat__icon__positive--color,#15803d);\n  background: var(--c2-stat__icon__positive--background,#dcfce7);\n}\n\n:host([tone=negative]) .icon {\n  color: var(--c2-stat__icon__negative--color,#b91c1c);\n  background: var(--c2-stat__icon__negative--background,#fee2e2);\n}\n\n:host([tone=warning]) .icon {\n  color: var(--c2-stat__icon__warning--color,#a16207);\n  background: var(--c2-stat__icon__warning--background,#fef3c7);\n}";
+//#endregion
+//#region \0@oxc-project+runtime@0.148.0/helpers/esm/decorate.js
+function __decorate(decorators, target, key, desc) {
+	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+	else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+	return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+//#endregion
+//#region src/stat.ts
+var Stat = class Stat extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.value = "";
+		this.label = "";
+		this.tone = "neutral";
+	}
+	static {
+		this.styles = unsafeCSS(stat_default);
+	}
+	render() {
+		return html`
+      <div class="c2-stat" part="container">
+        <span class="icon" part="icon" aria-hidden="true"><slot name="icon"></slot></span>
+        <div class="content">
+          <div class="value-row">
+            <div class="value" part="value"><slot name="value">${this.value}</slot></div>
+            <div class="trend" part="trend"><slot name="trend"></slot></div>
+          </div>
+          <div class="label" part="label"><slot name="label">${this.label}</slot></div>
+          <div class="description" part="description">
+            <slot name="description"></slot>
+          </div>
+        </div>
+      </div>
+    `;
+	}
+};
+__decorate([property()], Stat.prototype, "value", void 0);
+__decorate([property()], Stat.prototype, "label", void 0);
+__decorate([property({ reflect: true })], Stat.prototype, "tone", void 0);
+Stat = __decorate([customElement("c2-stat")], Stat);
+//#endregion
+export { Stat };

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@c2n/stat",
+  "version": "0.0.7",
+  "type": "module",
+  "main": "dist/stat.js",
+  "exports": {
+    ".": {
+      "types": "./types/src/stat.d.ts",
+      "default": "./dist/stat.js"
+    },
+    "./react": {
+      "types": "./react.d.ts",
+      "default": "./react.js"
+    },
+    "./vue": {
+      "types": "./vue.d.ts",
+      "default": "./vue.js"
+    },
+    "./custom-elements.json": "./custom-elements.json"
+  },
+  "files": [
+    "dist",
+    "types",
+    "react.d.ts",
+    "react.js",
+    "vue.d.ts",
+    "vue.js"
+  ],
+  "keywords": [
+    "stat",
+    "web component",
+    "lit"
+  ],
+  "license": "MIT",
+  "author": "code2nguyen@gmail.com",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/code2nguyen/web-components.git"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "wireit",
+    "build:only": "vite build",
+    "type-check": "wireit"
+  },
+  "wireit": {
+    "type-check": {
+      "dependencies": [
+        "../../core:build"
+      ],
+      "command": "tsc -p tsconfig.lib.json --composite false"
+    },
+    "build": {
+      "dependencies": [
+        "type-check"
+      ],
+      "command": "vite build"
+    }
+  },
+  "dependencies": {
+    "@c2n/core": "0.0.7",
+    "lit": "3.3.3"
+  },
+  "devDependencies": {
+    "@c2n/config": "*"
+  },
+  "customElements": "custom-elements.json",
+  "gitHead": "c8db398a27f7cd417d665fdf5da455fee2d4e910"
+}

package/react.d.ts

@@ -0,0 +1,24 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+//
+// JSX types for the custom elements of @c2n/stat. Import once, anywhere in the program:
+//
+//     import '@c2n/stat/react'
+//
+// Register the elements at module scope before React renders, or React writes an object prop as an
+// attribute and it stringifies.
+
+import type { DetailedHTMLProps, HTMLAttributes } from 'react'
+import type { Stat } from '@c2n/stat'
+
+/** Standard React host-element attributes plus the element's own public properties. */
+type C2Props<T> = DetailedHTMLProps<HTMLAttributes<T>, T> & Partial<Omit<T, keyof HTMLElement>>
+
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'c2-stat': C2Props<Stat>
+    }
+  }
+}
+
+export {}

package/react.js

@@ -0,0 +1,3 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+// Types only — see the matching .d.ts.
+export {}

package/types/src/stat.d.ts

@@ -0,0 +1,53 @@
+import { LitElement } from 'lit';
+export type StatTone = 'neutral' | 'positive' | 'negative' | 'warning';
+/**
+ * A compact KPI block with an optional icon and trend. Text can be supplied through attributes for simple cases or
+ * replaced with slots when the value needs richer formatting.
+ *
+ * @tag c2-stat
+ * @slot value - Replaces the `value` text.
+ * @slot label - Replaces the `label` text.
+ * @slot icon - Icon shown in the tinted leading container.
+ * @slot trend - Badge or short trend text shown beside the value.
+ * @slot description - Supporting context below the label.
+ * @cssproperty {padding} [--c2-stat--padding=16px]
+ * @cssproperty {pixel} [--c2-stat--gap=12px]
+ * @cssproperty {color} [--c2-stat--background=#ffffff]
+ * @cssproperty {color} [--c2-stat--color=#18181b]
+ * @cssproperty {border} [--c2-stat--border=1px solid #e4e4e7]
+ * @cssproperty {border-radius} [--c2-stat--border-radius=8px]
+ * @cssproperty {box-shadow} [--c2-stat--box-shadow=none]
+ * @cssproperty {pixel} [--c2-stat__icon--size=40px]
+ * @cssproperty {color} [--c2-stat__icon--background=#f4f4f5]
+ * @cssproperty {color} [--c2-stat__icon--color=#71717a]
+ * @cssproperty {border-radius} [--c2-stat__icon--border-radius=8px]
+ * @cssproperty {color} [--c2-stat__icon__positive--background=#dcfce7]
+ * @cssproperty {color} [--c2-stat__icon__positive--color=#15803d]
+ * @cssproperty {color} [--c2-stat__icon__negative--background=#fee2e2]
+ * @cssproperty {color} [--c2-stat__icon__negative--color=#b91c1c]
+ * @cssproperty {color} [--c2-stat__icon__warning--background=#fef3c7]
+ * @cssproperty {color} [--c2-stat__icon__warning--color=#a16207]
+ * @cssproperty {font-size} [--c2-stat__value--font-size=24px]
+ * @cssproperty {font-weight} [--c2-stat__value--font-weight=600]
+ * @cssproperty {pixel} [--c2-stat__value--line-height=32px]
+ * @cssproperty {font-size} [--c2-stat__label--font-size=14px]
+ * @cssproperty {color} [--c2-stat__label--color=#71717a]
+ * @cssproperty {font-size} [--c2-stat__description--font-size=12px]
+ * @cssproperty {color} [--c2-stat__description--color=#71717a]
+ */
+export declare class Stat extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Plain-text metric. Use the `value` slot for formatted markup. */
+    value: string;
+    /** Plain-text label. Use the `label` slot for formatted markup. */
+    label: string;
+    /** Semantic colour applied to the icon container. */
+    tone: StatTone;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'c2-stat': Stat;
+    }
+}
+//# sourceMappingURL=stat.d.ts.map

package/types/src/stat.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stat.d.ts","sourceRoot":"","sources":["../../src/stat.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAA;AAKjD,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,CAAA;AAEtE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,qBACa,IAAK,SAAQ,UAAU;IAClC,OAAgB,MAAM,0BAAoB;IAE1C,oEAAoE;IACxD,KAAK,SAAK;IAEtB,mEAAmE;IACvD,KAAK,SAAK;IAEtB,qDAAqD;IACxB,IAAI,EAAE,QAAQ,CAAY;IAE9C,MAAM;CAiBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAA;KAChB;CACF"}

package/vue.d.ts

@@ -0,0 +1,29 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+//
+// Vue template types for the custom elements of @c2n/stat. Import once, anywhere in the program:
+//
+//     import '@c2n/stat/vue'
+//
+// Tell the compiler about the tags as well, or every c2-* tag is resolved as a Vue component and renders
+// nothing: template.compilerOptions.isCustomElement = (tag) => tag.startsWith('c2-') in vite.config.ts.
+
+import type { DefineComponent, HTMLAttributes } from 'vue'
+import type { Stat } from '@c2n/stat'
+
+/** The element's own public properties, plus every attribute Vue understands on a host element. */
+type C2Props<T> = Partial<Omit<T, keyof HTMLElement>> & HTMLAttributes
+
+declare module 'vue' {
+  interface GlobalComponents {
+    'c2-stat': DefineComponent<C2Props<Stat>>
+  }
+}
+
+declare module '@vue/runtime-dom' {
+  interface HTMLAttributes {
+    /** Vue's own definition omits it, and slotting a plain element into a component needs it. */
+    slot?: string
+  }
+}
+
+export {}

package/vue.js

@@ -0,0 +1,3 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+// Types only — see the matching .d.ts.
+export {}