@kanso-protocol/stat-card 0.1.0

package/fesm2022/kanso-protocol-stat-card.mjs

@@ -0,0 +1,140 @@
+import * as i0 from '@angular/core';
+import { Input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { KpIconComponent } from '@kanso-protocol/icon';
+
+/**
+ * Kanso Protocol — StatCard
+ *
+ * Single-metric tile with label, big value, optional icon, optional
+ * trend (direction + delta + description), optional sparkline placeholder.
+ * Designed to live in a dashboard grid.
+ *
+ * Slot: `[kpStatCardSparkline]` — drop in your real chart (e.g. recharts);
+ * the placeholder shows a styled rectangle when empty.
+ *
+ * @example
+ * <kp-stat-card label="Total revenue" value="$12,482" trendValue="+12.5%" trendDescription="from last month"/>
+ */
+class KpStatCardComponent {
+    size = 'md';
+    label = 'Total revenue';
+    value = '$12,482';
+    showIcon = false;
+    icon = 'trending-up';
+    showTrend = true;
+    trendDirection = 'up';
+    trendAppearance = 'positive';
+    trendValue = '+12.5%';
+    trendDescription = 'from last month';
+    showSparkline = false;
+    get trendIconName() {
+        if (this.trendDirection === 'up')
+            return 'trending-up';
+        if (this.trendDirection === 'down')
+            return 'trending-down';
+        return 'minus';
+    }
+    get trendTone() {
+        if (this.trendDirection === 'neutral')
+            return 'neutral';
+        const goodWhenUp = this.trendAppearance === 'positive';
+        const isUp = this.trendDirection === 'up';
+        return (isUp === goodWhenUp) ? 'good' : 'bad';
+    }
+    get hostClasses() {
+        return `kp-stat kp-stat--${this.size}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: KpStatCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: KpStatCardComponent, isStandalone: true, selector: "kp-stat-card", inputs: { size: "size", label: "label", value: "value", showIcon: "showIcon", icon: "icon", showTrend: "showTrend", trendDirection: "trendDirection", trendAppearance: "trendAppearance", trendValue: "trendValue", trendDescription: "trendDescription", showSparkline: "showSparkline" }, host: { properties: { "class": "hostClasses" } }, ngImport: i0, template: `
+    <div class="kp-stat__header">
+      <span class="kp-stat__label">{{ label }}</span>
+      @if (showIcon && icon) {
+        <span class="kp-stat__icon" aria-hidden="true">
+          <kp-icon [name]="icon" />
+        </span>
+      }
+    </div>
+
+    <span class="kp-stat__value">{{ value }}</span>
+
+    @if (showTrend) {
+      <div class="kp-stat__trend" [attr.data-tone]="trendTone">
+        <kp-icon class="kp-stat__trend-icon" [name]="trendIconName" />
+        <span class="kp-stat__trend-value">{{ trendValue }}</span>
+        @if (trendDescription) {
+          <span class="kp-stat__trend-desc">{{ trendDescription }}</span>
+        }
+      </div>
+    }
+
+    @if (showSparkline) {
+      <div class="kp-stat__sparkline">
+        <ng-content select="[kpStatCardSparkline]">
+          <div class="kp-stat__sparkline-placeholder" aria-hidden="true"></div>
+        </ng-content>
+      </div>
+    }
+  `, isInline: true, styles: [":host{box-sizing:border-box;display:flex;flex-direction:column;gap:var(--kp-stat-gap, 12px);padding:var(--kp-stat-pad, 20px);background:var(--kp-color-white, var(--kp-color-white));border:1px solid var(--kp-color-gray-200, var(--kp-color-gray-200));border-radius:12px;font-family:var(--kp-font-family-sans, \"Onest\", system-ui, sans-serif)}:host(.kp-stat--sm){--kp-stat-pad: 16px;--kp-stat-gap: 8px;--kp-stat-value-size: 18px;--kp-stat-label-size: 12px}:host(.kp-stat--md){--kp-stat-pad: 20px;--kp-stat-gap: 12px;--kp-stat-value-size: 24px;--kp-stat-label-size: 13px}:host(.kp-stat--lg){--kp-stat-pad: 24px;--kp-stat-gap: 16px;--kp-stat-value-size: 32px;--kp-stat-label-size: 14px}.kp-stat__header{display:flex;align-items:center;justify-content:space-between;gap:12px}.kp-stat__label{font-size:var(--kp-stat-label-size, 13px);color:var(--kp-color-gray-600, var(--kp-color-gray-600));font-weight:500}.kp-stat__icon{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--kp-color-blue-50, var(--kp-color-blue-50));color:var(--kp-color-blue-600, var(--kp-color-blue-600))}.kp-stat__icon .ti{font-size:18px;line-height:1}.kp-stat__value{font-size:var(--kp-stat-value-size, 24px);font-weight:600;color:var(--kp-color-gray-900, var(--kp-color-gray-900));font-variant-numeric:tabular-nums;line-height:1.1}.kp-stat__trend{display:flex;align-items:center;gap:6px}.kp-stat__trend-icon{font-size:14px;line-height:1}.kp-stat__trend-value{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}.kp-stat__trend-desc{font-size:12px;color:var(--kp-color-gray-500, var(--kp-color-gray-500))}.kp-stat__trend[data-tone=good]{color:var(--kp-color-green-600, var(--kp-color-green-600))}.kp-stat__trend[data-tone=bad]{color:var(--kp-color-red-600, var(--kp-color-red-600))}.kp-stat__trend[data-tone=neutral]{color:var(--kp-color-gray-500, var(--kp-color-gray-500))}.kp-stat__sparkline{margin-top:4px}.kp-stat__sparkline-placeholder{height:32px;background:var(--kp-color-gray-100, var(--kp-color-gray-100));border-radius:4px}\n"], dependencies: [{ kind: "component", type: KpIconComponent, selector: "kp-icon", inputs: ["name", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: KpStatCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kp-stat-card', imports: [KpIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class]': 'hostClasses' }, template: `
+    <div class="kp-stat__header">
+      <span class="kp-stat__label">{{ label }}</span>
+      @if (showIcon && icon) {
+        <span class="kp-stat__icon" aria-hidden="true">
+          <kp-icon [name]="icon" />
+        </span>
+      }
+    </div>
+
+    <span class="kp-stat__value">{{ value }}</span>
+
+    @if (showTrend) {
+      <div class="kp-stat__trend" [attr.data-tone]="trendTone">
+        <kp-icon class="kp-stat__trend-icon" [name]="trendIconName" />
+        <span class="kp-stat__trend-value">{{ trendValue }}</span>
+        @if (trendDescription) {
+          <span class="kp-stat__trend-desc">{{ trendDescription }}</span>
+        }
+      </div>
+    }
+
+    @if (showSparkline) {
+      <div class="kp-stat__sparkline">
+        <ng-content select="[kpStatCardSparkline]">
+          <div class="kp-stat__sparkline-placeholder" aria-hidden="true"></div>
+        </ng-content>
+      </div>
+    }
+  `, styles: [":host{box-sizing:border-box;display:flex;flex-direction:column;gap:var(--kp-stat-gap, 12px);padding:var(--kp-stat-pad, 20px);background:var(--kp-color-white, var(--kp-color-white));border:1px solid var(--kp-color-gray-200, var(--kp-color-gray-200));border-radius:12px;font-family:var(--kp-font-family-sans, \"Onest\", system-ui, sans-serif)}:host(.kp-stat--sm){--kp-stat-pad: 16px;--kp-stat-gap: 8px;--kp-stat-value-size: 18px;--kp-stat-label-size: 12px}:host(.kp-stat--md){--kp-stat-pad: 20px;--kp-stat-gap: 12px;--kp-stat-value-size: 24px;--kp-stat-label-size: 13px}:host(.kp-stat--lg){--kp-stat-pad: 24px;--kp-stat-gap: 16px;--kp-stat-value-size: 32px;--kp-stat-label-size: 14px}.kp-stat__header{display:flex;align-items:center;justify-content:space-between;gap:12px}.kp-stat__label{font-size:var(--kp-stat-label-size, 13px);color:var(--kp-color-gray-600, var(--kp-color-gray-600));font-weight:500}.kp-stat__icon{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--kp-color-blue-50, var(--kp-color-blue-50));color:var(--kp-color-blue-600, var(--kp-color-blue-600))}.kp-stat__icon .ti{font-size:18px;line-height:1}.kp-stat__value{font-size:var(--kp-stat-value-size, 24px);font-weight:600;color:var(--kp-color-gray-900, var(--kp-color-gray-900));font-variant-numeric:tabular-nums;line-height:1.1}.kp-stat__trend{display:flex;align-items:center;gap:6px}.kp-stat__trend-icon{font-size:14px;line-height:1}.kp-stat__trend-value{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}.kp-stat__trend-desc{font-size:12px;color:var(--kp-color-gray-500, var(--kp-color-gray-500))}.kp-stat__trend[data-tone=good]{color:var(--kp-color-green-600, var(--kp-color-green-600))}.kp-stat__trend[data-tone=bad]{color:var(--kp-color-red-600, var(--kp-color-red-600))}.kp-stat__trend[data-tone=neutral]{color:var(--kp-color-gray-500, var(--kp-color-gray-500))}.kp-stat__sparkline{margin-top:4px}.kp-stat__sparkline-placeholder{height:32px;background:var(--kp-color-gray-100, var(--kp-color-gray-100));border-radius:4px}\n"] }]
+        }], propDecorators: { size: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], showIcon: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], showTrend: [{
+                type: Input
+            }], trendDirection: [{
+                type: Input
+            }], trendAppearance: [{
+                type: Input
+            }], trendValue: [{
+                type: Input
+            }], trendDescription: [{
+                type: Input
+            }], showSparkline: [{
+                type: Input
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { KpStatCardComponent };
+//# sourceMappingURL=kanso-protocol-stat-card.mjs.map

package/fesm2022/kanso-protocol-stat-card.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"kanso-protocol-stat-card.mjs","sources":["../../../../../packages/patterns/stat-card/src/stat-card.component.ts","../../../../../packages/patterns/stat-card/src/kanso-protocol-stat-card.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  Input,\n} from '@angular/core';\nimport { KpIconComponent } from '@kanso-protocol/icon';\n\nexport type KpStatCardSize = 'sm' | 'md' | 'lg';\nexport type KpStatTrendDirection = 'up' | 'down' | 'neutral';\n/**\n * `positive` — up = good (green), down = bad (red).\n * `negative` — up = bad (red), down = good (green) — for inverse metrics like error rate.\n */\nexport type KpStatTrendAppearance = 'positive' | 'negative';\n\n/**\n * Kanso Protocol — StatCard\n *\n * Single-metric tile with label, big value, optional icon, optional\n * trend (direction + delta + description), optional sparkline placeholder.\n * Designed to live in a dashboard grid.\n *\n * Slot: `[kpStatCardSparkline]` — drop in your real chart (e.g. recharts);\n * the placeholder shows a styled rectangle when empty.\n *\n * @example\n * <kp-stat-card label=\"Total revenue\" value=\"$12,482\" trendValue=\"+12.5%\" trendDescription=\"from last month\"/>\n */\n@Component({\n  selector: 'kp-stat-card',\n  imports: [KpIconComponent],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: { '[class]': 'hostClasses' },\n  template: `\n    <div class=\"kp-stat__header\">\n      <span class=\"kp-stat__label\">{{ label }}</span>\n      @if (showIcon && icon) {\n        <span class=\"kp-stat__icon\" aria-hidden=\"true\">\n          <kp-icon [name]=\"icon\" />\n        </span>\n      }\n    </div>\n\n    <span class=\"kp-stat__value\">{{ value }}</span>\n\n    @if (showTrend) {\n      <div class=\"kp-stat__trend\" [attr.data-tone]=\"trendTone\">\n        <kp-icon class=\"kp-stat__trend-icon\" [name]=\"trendIconName\" />\n        <span class=\"kp-stat__trend-value\">{{ trendValue }}</span>\n        @if (trendDescription) {\n          <span class=\"kp-stat__trend-desc\">{{ trendDescription }}</span>\n        }\n      </div>\n    }\n\n    @if (showSparkline) {\n      <div class=\"kp-stat__sparkline\">\n        <ng-content select=\"[kpStatCardSparkline]\">\n          <div class=\"kp-stat__sparkline-placeholder\" aria-hidden=\"true\"></div>\n        </ng-content>\n      </div>\n    }\n  `,\n  styles: [`\n    :host {\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: column;\n      gap: var(--kp-stat-gap, 12px);\n      padding: var(--kp-stat-pad, 20px);\n      background: var(--kp-color-white, var(--kp-color-white));\n      border: 1px solid var(--kp-color-gray-200, var(--kp-color-gray-200));\n      border-radius: 12px;\n      font-family: var(--kp-font-family-sans, 'Onest', system-ui, sans-serif);\n    }\n\n    :host(.kp-stat--sm) { --kp-stat-pad: 16px; --kp-stat-gap: 8px; --kp-stat-value-size: 18px; --kp-stat-label-size: 12px; }\n    :host(.kp-stat--md) { --kp-stat-pad: 20px; --kp-stat-gap: 12px; --kp-stat-value-size: 24px; --kp-stat-label-size: 13px; }\n    :host(.kp-stat--lg) { --kp-stat-pad: 24px; --kp-stat-gap: 16px; --kp-stat-value-size: 32px; --kp-stat-label-size: 14px; }\n\n    .kp-stat__header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: 12px;\n    }\n    .kp-stat__label {\n      font-size: var(--kp-stat-label-size, 13px);\n      color: var(--kp-color-gray-600, var(--kp-color-gray-600));\n      font-weight: 500;\n    }\n    .kp-stat__icon {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: 36px;\n      height: 36px;\n      border-radius: 50%;\n      background: var(--kp-color-blue-50, var(--kp-color-blue-50));\n      color: var(--kp-color-blue-600, var(--kp-color-blue-600));\n    }\n    .kp-stat__icon .ti { font-size: 18px; line-height: 1; }\n\n    .kp-stat__value {\n      font-size: var(--kp-stat-value-size, 24px);\n      font-weight: 600;\n      color: var(--kp-color-gray-900, var(--kp-color-gray-900));\n      font-variant-numeric: tabular-nums;\n      line-height: 1.1;\n    }\n\n    .kp-stat__trend {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n    .kp-stat__trend-icon { font-size: 14px; line-height: 1; }\n    .kp-stat__trend-value { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }\n    .kp-stat__trend-desc { font-size: 12px; color: var(--kp-color-gray-500, var(--kp-color-gray-500)); }\n    .kp-stat__trend[data-tone='good']    { color: var(--kp-color-green-600, var(--kp-color-green-600)); }\n    .kp-stat__trend[data-tone='bad']     { color: var(--kp-color-red-600, var(--kp-color-red-600)); }\n    .kp-stat__trend[data-tone='neutral'] { color: var(--kp-color-gray-500, var(--kp-color-gray-500)); }\n\n    .kp-stat__sparkline { margin-top: 4px; }\n    .kp-stat__sparkline-placeholder {\n      height: 32px;\n      background: var(--kp-color-gray-100, var(--kp-color-gray-100));\n      border-radius: 4px;\n    }\n  `],\n})\nexport class KpStatCardComponent {\n  @Input() size: KpStatCardSize = 'md';\n  @Input() label = 'Total revenue';\n  @Input() value: string | number = '$12,482';\n\n  @Input() showIcon = false;\n  @Input() icon: string | null = 'trending-up';\n\n  @Input() showTrend = true;\n  @Input() trendDirection: KpStatTrendDirection = 'up';\n  @Input() trendAppearance: KpStatTrendAppearance = 'positive';\n  @Input() trendValue: string | null = '+12.5%';\n  @Input() trendDescription: string | null = 'from last month';\n\n  @Input() showSparkline = false;\n\n  get trendIconName(): string {\n    if (this.trendDirection === 'up') return 'trending-up';\n    if (this.trendDirection === 'down') return 'trending-down';\n    return 'minus';\n  }\n\n  get trendTone(): 'good' | 'bad' | 'neutral' {\n    if (this.trendDirection === 'neutral') return 'neutral';\n    const goodWhenUp = this.trendAppearance === 'positive';\n    const isUp = this.trendDirection === 'up';\n    return (isUp === goodWhenUp) ? 'good' : 'bad';\n  }\n\n  get hostClasses(): string {\n    return `kp-stat kp-stat--${this.size}`;\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@kanso-protocol/stat-card",
+  "version": "0.1.0",
+  "license": "MIT",
+  "peerDependencies": {
+    "@angular/core": "^18.0.0",
+    "@angular/common": "^18.0.0",
+    "@kanso-protocol/core": "^0.0.1"
+  },
+  "description": "Kanso Protocol — stat-card (pattern).",
+  "author": "GregNBlack",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/GregNBlack/kanso-protocol.git",
+    "directory": "packages/patterns/stat-card"
+  },
+  "homepage": "https://gregnblack.github.io/kanso-protocol/?path=/docs/patterns-statcard--docs",
+  "bugs": "https://github.com/GregNBlack/kanso-protocol/issues",
+  "keywords": [
+    "design-system",
+    "angular",
+    "kanso",
+    "stat-card"
+  ],
+  "sideEffects": false,
+  "module": "fesm2022/kanso-protocol-stat-card.mjs",
+  "typings": "types/kanso-protocol-stat-card.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/kanso-protocol-stat-card.d.ts",
+      "default": "./fesm2022/kanso-protocol-stat-card.mjs"
+    }
+  },
+  "type": "module",
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}

package/types/kanso-protocol-stat-card.d.ts

@@ -0,0 +1,43 @@
+import * as i0 from '@angular/core';
+
+type KpStatCardSize = 'sm' | 'md' | 'lg';
+type KpStatTrendDirection = 'up' | 'down' | 'neutral';
+/**
+ * `positive` — up = good (green), down = bad (red).
+ * `negative` — up = bad (red), down = good (green) — for inverse metrics like error rate.
+ */
+type KpStatTrendAppearance = 'positive' | 'negative';
+/**
+ * Kanso Protocol — StatCard
+ *
+ * Single-metric tile with label, big value, optional icon, optional
+ * trend (direction + delta + description), optional sparkline placeholder.
+ * Designed to live in a dashboard grid.
+ *
+ * Slot: `[kpStatCardSparkline]` — drop in your real chart (e.g. recharts);
+ * the placeholder shows a styled rectangle when empty.
+ *
+ * @example
+ * <kp-stat-card label="Total revenue" value="$12,482" trendValue="+12.5%" trendDescription="from last month"/>
+ */
+declare class KpStatCardComponent {
+    size: KpStatCardSize;
+    label: string;
+    value: string | number;
+    showIcon: boolean;
+    icon: string | null;
+    showTrend: boolean;
+    trendDirection: KpStatTrendDirection;
+    trendAppearance: KpStatTrendAppearance;
+    trendValue: string | null;
+    trendDescription: string | null;
+    showSparkline: boolean;
+    get trendIconName(): string;
+    get trendTone(): 'good' | 'bad' | 'neutral';
+    get hostClasses(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KpStatCardComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KpStatCardComponent, "kp-stat-card", never, { "size": { "alias": "size"; "required": false; }; "label": { "alias": "label"; "required": false; }; "value": { "alias": "value"; "required": false; }; "showIcon": { "alias": "showIcon"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "showTrend": { "alias": "showTrend"; "required": false; }; "trendDirection": { "alias": "trendDirection"; "required": false; }; "trendAppearance": { "alias": "trendAppearance"; "required": false; }; "trendValue": { "alias": "trendValue"; "required": false; }; "trendDescription": { "alias": "trendDescription"; "required": false; }; "showSparkline": { "alias": "showSparkline"; "required": false; }; }, {}, never, ["[kpStatCardSparkline]"], true, never>;
+}
+
+export { KpStatCardComponent };
+export type { KpStatCardSize, KpStatTrendAppearance, KpStatTrendDirection };