@deepfuture/dui-templates 1.0.0

package/metrics/stat-card.js

@@ -0,0 +1,230 @@
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+import { css, html, LitElement, nothing } from "lit";
+import { property } from "lit/decorators.js";
+import { base } from "@deepfuture/dui-core/base";
+import "@deepfuture/dui-components/icon";
+/** Map trend direction to color tokens and arrow SVG paths. */
+const TREND_CONFIG = {
+    up: {
+        color: "var(--accent-text)",
+        path: "M12 19V5M5 12l7-7 7 7",
+    },
+    down: {
+        color: "var(--destructive-text)",
+        path: "M12 5v14M19 12l-7 7-7-7",
+    },
+    stable: {
+        color: "var(--text-3)",
+        path: "M5 12h14",
+    },
+};
+const styles = css `
+  :host {
+    display: block;
+  }
+
+  article {
+    display: flex;
+    flex-direction: column;
+    gap: none;
+    padding: var(--space-3);
+    border: var(--border-width-thin) solid var(--border);
+    border-radius: var(--radius-md);
+    background: var(--surface-1);
+  }
+
+  .label {
+    font-family: var(--font-sans);
+    font-size: var(--text-xs);
+    font-weight: var(--font-weight-medium);
+    letter-spacing: var(--letter-spacing-wide);
+    line-height: var(--line-height-normal);
+    color: var(--text-2);
+  }
+
+  .value-row {
+    display: flex;
+    flex-direction: column;
+    gap: none;
+  }
+
+  .value {
+    font-family: var(--font-sans);
+    font-size: var(--text-2xl);
+    font-weight: var(--font-weight-semibold);
+    letter-spacing: var(--letter-spacing-normal);
+    line-height: var(--line-height-tight);
+    color: var(--foreground);
+  }
+
+  .trend {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-0_5);
+    font-family: var(--font-sans);
+    font-size: var(--text-xs);
+    font-weight: var(--font-weight-medium);
+    letter-spacing: var(--letter-spacing-wide);
+    line-height: var(--line-height-normal);
+  }
+
+  .description {
+    font-family: var(--font-sans);
+    font-size: var(--text-xs);
+    letter-spacing: var(--letter-spacing-wide);
+    line-height: var(--line-height-normal);
+    color: var(--text-3);
+    margin: 0;
+  }
+
+  .actions {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding-top: var(--space-2);
+  }
+
+  .actions[hidden] {
+    display: none;
+  }
+`;
+/**
+ * `<dui-stat-card>` — A single metric card displaying a label, prominent value,
+ * optional trend indicator, and description text.
+ *
+ * @slot actions - Optional action buttons or links.
+ * @csspart article - The outer container.
+ * @csspart label - The metric label.
+ * @csspart value - The metric value.
+ * @csspart trend - The trend indicator.
+ * @csspart description - The description text.
+ */
+let DuiStatCard = (() => {
+    let _classSuper = LitElement;
+    let _label_decorators;
+    let _label_initializers = [];
+    let _label_extraInitializers = [];
+    let _value_decorators;
+    let _value_initializers = [];
+    let _value_extraInitializers = [];
+    let _trend_decorators;
+    let _trend_initializers = [];
+    let _trend_extraInitializers = [];
+    let _trendDirection_decorators;
+    let _trendDirection_initializers = [];
+    let _trendDirection_extraInitializers = [];
+    let _description_decorators;
+    let _description_initializers = [];
+    let _description_extraInitializers = [];
+    return class DuiStatCard extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _label_decorators = [property()];
+            _value_decorators = [property()];
+            _trend_decorators = [property()];
+            _trendDirection_decorators = [property({ attribute: "trend-direction" })];
+            _description_decorators = [property()];
+            __esDecorate(this, null, _label_decorators, { kind: "accessor", name: "label", static: false, private: false, access: { has: obj => "label" in obj, get: obj => obj.label, set: (obj, value) => { obj.label = value; } }, metadata: _metadata }, _label_initializers, _label_extraInitializers);
+            __esDecorate(this, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
+            __esDecorate(this, null, _trend_decorators, { kind: "accessor", name: "trend", static: false, private: false, access: { has: obj => "trend" in obj, get: obj => obj.trend, set: (obj, value) => { obj.trend = value; } }, metadata: _metadata }, _trend_initializers, _trend_extraInitializers);
+            __esDecorate(this, null, _trendDirection_decorators, { kind: "accessor", name: "trendDirection", static: false, private: false, access: { has: obj => "trendDirection" in obj, get: obj => obj.trendDirection, set: (obj, value) => { obj.trendDirection = value; } }, metadata: _metadata }, _trendDirection_initializers, _trendDirection_extraInitializers);
+            __esDecorate(this, null, _description_decorators, { kind: "accessor", name: "description", static: false, private: false, access: { has: obj => "description" in obj, get: obj => obj.description, set: (obj, value) => { obj.description = value; } }, metadata: _metadata }, _description_initializers, _description_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static tagName = "dui-stat-card";
+        static styles = [base, styles];
+        #label_accessor_storage = __runInitializers(this, _label_initializers, "");
+        /** Metric label (e.g. "Total Events", "Response Time"). */
+        get label() { return this.#label_accessor_storage; }
+        set label(value) { this.#label_accessor_storage = value; }
+        #value_accessor_storage = (__runInitializers(this, _label_extraInitializers), __runInitializers(this, _value_initializers, ""));
+        /** Primary metric value (e.g. "1,284", "$42.5K", "99.9%"). */
+        get value() { return this.#value_accessor_storage; }
+        set value(value) { this.#value_accessor_storage = value; }
+        #trend_accessor_storage = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _trend_initializers, ""));
+        /** Trend text (e.g. "+12%", "-3.2%", "0%"). */
+        get trend() { return this.#trend_accessor_storage; }
+        set trend(value) { this.#trend_accessor_storage = value; }
+        #trendDirection_accessor_storage = (__runInitializers(this, _trend_extraInitializers), __runInitializers(this, _trendDirection_initializers, ""));
+        /** Trend direction — determines arrow and color (up | down | stable). */
+        get trendDirection() { return this.#trendDirection_accessor_storage; }
+        set trendDirection(value) { this.#trendDirection_accessor_storage = value; }
+        #description_accessor_storage = (__runInitializers(this, _trendDirection_extraInitializers), __runInitializers(this, _description_initializers, ""));
+        /** Supporting context text. */
+        get description() { return this.#description_accessor_storage; }
+        set description(value) { this.#description_accessor_storage = value; }
+        #onSlotChange(e) {
+            const slot = e.target;
+            slot.parentElement.hidden = slot.assignedElements().length === 0;
+        }
+        render() {
+            const cfg = TREND_CONFIG[this.trendDirection.toLowerCase()];
+            return html `
+      <article part="article">
+        ${this.label
+                ? html `<span class="label" part="label">${this.label}</span>`
+                : nothing}
+
+        <div class="value-row">
+          <span class="value" part="value">${this.value}</span>
+          ${this.trend && cfg
+                ? html `<span class="trend" part="trend" style="color: ${cfg.color}">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
+                  stroke="currentColor" stroke-width="2.5" stroke-linecap="round"
+                  stroke-linejoin="round"><path d="${cfg.path}"/></svg>
+                ${this.trend}
+              </span>`
+                : nothing}
+        </div>
+
+        ${this.description
+                ? html `<p class="description" part="description">${this.description}</p>`
+                : nothing}
+
+        <div class="actions" hidden>
+          <slot name="actions" @slotchange=${this.#onSlotChange}></slot>
+        </div>
+      </article>
+    `;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _description_extraInitializers);
+        }
+    };
+})();
+export { DuiStatCard };
+customElements.define(DuiStatCard.tagName, DuiStatCard);

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@deepfuture/dui-templates",
+  "version": "1.0.0",
+  "description": "DUI templates — pre-composed UI patterns built from DUI components",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/deepfuturenow/dui.git",
+    "directory": "packages/templates"
+  },
+  "exports": {
+    "./feed": {
+      "import": "./feed/index.js",
+      "types": "./feed/index.d.ts"
+    },
+    "./dashboard": {
+      "import": "./dashboard/index.js",
+      "types": "./dashboard/index.d.ts"
+    },
+    "./metrics": {
+      "import": "./metrics/index.js",
+      "types": "./metrics/index.d.ts"
+    },
+    "./data": {
+      "import": "./data/index.js",
+      "types": "./data/index.d.ts"
+    },
+    "./content": {
+      "import": "./content/index.js",
+      "types": "./content/index.d.ts"
+    },
+    "./media": {
+      "import": "./media/index.js",
+      "types": "./media/index.d.ts"
+    },
+    "./all": {
+      "import": "./all.js",
+      "types": "./all.d.ts"
+    }
+  },
+  "files": [
+    "**/*.js",
+    "**/*.d.ts",
+    "**/*.css",
+    "README.md"
+  ],
+  "dependencies": {
+    "@deepfuture/dui-core": "1.0.0",
+    "@deepfuture/dui-components": "1.0.0",
+    "lit": "^3.3.2"
+  },
+  "keywords": [
+    "web-components",
+    "lit",
+    "unstyled",
+    "components",
+    "dui",
+    "theme"
+  ]
+}