@signalflare-ai/ui 0.5.0 → 1.0.0

package/dist/stat-card-CEZscNh8.js

@@ -0,0 +1,103 @@
+"use client";
+import { t as cn } from "./cn-YROP2_ox.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/stat-card/stat-card.tsx
+/** StatCard variant definitions (indexed by variant name) */
+var SF_STAT_CARD_VARIANTS = { size: {
+	sm: {
+		root: "gap-1 p-3",
+		label: "text-xs",
+		value: "text-xl",
+		hint: "text-xs"
+	},
+	base: {
+		root: "gap-2 p-4",
+		label: "text-sm",
+		value: "text-3xl",
+		hint: "text-xs"
+	}
+} };
+/** Default variants applied when none are passed explicitly. */
+var SF_STAT_CARD_DEFAULT_VARIANTS = { size: "base" };
+function inferDirection(value, override) {
+	if (override) return override;
+	if (value > 0) return "up";
+	if (value < 0) return "down";
+	return "flat";
+}
+function deltaColor(direction, positiveDirection) {
+	if (direction === "flat") return "text-sf-subtle";
+	return direction === positiveDirection ? "text-sf-success" : "text-sf-danger";
+}
+function deltaArrow(direction) {
+	if (direction === "up") return "↑";
+	if (direction === "down") return "↓";
+	return "→";
+}
+/**
+* StatCard — compact KPI tile displaying a label, a primary value, and an
+* optional delta + trend sparkline.
+*
+* @example
+* ```tsx
+* <StatCard
+*   label="Active users"
+*   value="12,384"
+*   delta={{ value: 0.12, label: "vs last week" }}
+* />
+* ```
+*/
+var StatCard = forwardRef(function StatCard({ label, value, hint, delta, trend, loading, size = SF_STAT_CARD_DEFAULT_VARIANTS.size, className }, ref) {
+	const sizeClasses = SF_STAT_CARD_VARIANTS.size[size];
+	const direction = delta ? inferDirection(delta.value, delta.direction) : void 0;
+	const deltaClass = delta && direction ? deltaColor(direction, delta.positiveDirection ?? "up") : void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn("flex flex-col rounded-lg bg-sf-elevated text-sf-default", sizeClasses.root, className),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: cn("text-sf-subtle", sizeClasses.label),
+			children: label
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-start justify-between gap-3",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-1",
+				children: [
+					loading ? /* @__PURE__ */ jsx("div", {
+						"aria-busy": "true",
+						className: cn("h-8 w-24 animate-pulse rounded-md bg-sf-fill", size === "sm" && "h-6 w-20")
+					}) : /* @__PURE__ */ jsx("div", {
+						className: cn("font-semibold tabular-nums text-sf-strong", sizeClasses.value),
+						children: value
+					}),
+					delta && !loading ? /* @__PURE__ */ jsxs("div", {
+						className: cn("flex items-baseline gap-1 tabular-nums", sizeClasses.hint),
+						children: [/* @__PURE__ */ jsxs("span", {
+							className: cn("font-medium", deltaClass),
+							children: [
+								deltaArrow(direction),
+								" ",
+								Math.abs(delta.value).toLocaleString(void 0, { maximumFractionDigits: 2 })
+							]
+						}), delta.label ? /* @__PURE__ */ jsx("span", {
+							className: "text-sf-subtle",
+							children: delta.label
+						}) : null]
+					}) : null,
+					hint && !loading ? /* @__PURE__ */ jsx("div", {
+						className: cn("text-sf-subtle", sizeClasses.hint),
+						children: hint
+					}) : null
+				]
+			}), trend ? /* @__PURE__ */ jsx("div", {
+				className: "pointer-events-none shrink-0",
+				children: trend
+			}) : null]
+		})]
+	});
+});
+StatCard.displayName = "StatCard";
+//#endregion
+export { SF_STAT_CARD_VARIANTS as n, StatCard as r, SF_STAT_CARD_DEFAULT_VARIANTS as t };
+
+//# sourceMappingURL=stat-card-CEZscNh8.js.map

package/dist/stat-card-CEZscNh8.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stat-card-CEZscNh8.js","names":[],"sources":["../src/components/stat-card/stat-card.tsx"],"sourcesContent":["import { forwardRef, type ReactNode } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\n\n/** StatCard variant definitions (indexed by variant name) */\nexport const SF_STAT_CARD_VARIANTS = {\n  size: {\n    sm: {\n      root: \"gap-1 p-3\",\n      label: \"text-xs\",\n      value: \"text-xl\",\n      hint: \"text-xs\",\n    },\n    base: {\n      root: \"gap-2 p-4\",\n      label: \"text-sm\",\n      value: \"text-3xl\",\n      hint: \"text-xs\",\n    },\n  },\n} as const;\n\n/** Default variants applied when none are passed explicitly. */\nexport const SF_STAT_CARD_DEFAULT_VARIANTS = {\n  size: \"base\",\n} as const;\n\nexport interface SFStatCardVariantsProps {\n  /** Size of the card. Defaults to `\"base\"`. */\n  size?: keyof typeof SF_STAT_CARD_VARIANTS.size;\n}\n\n/** Describes a change in the metric over a comparison period. */\nexport interface StatCardDelta {\n  /** Numeric delta (e.g. `0.12` for +12% or `-4` for a drop of 4). */\n  value: number;\n  /**\n   * Override the arrow direction. By default, direction is inferred from the\n   * sign of `value`.\n   */\n  direction?: \"up\" | \"down\" | \"flat\";\n  /** Optional context label shown after the delta (e.g. `\"vs last week\"`). */\n  label?: string;\n  /**\n   * Whether an \"up\" direction means \"good\" (green) or \"bad\" (red). For metrics\n   * like error rate, set this to `\"down\"` so downward movement is coloured\n   * green.\n   * @default \"up\"\n   */\n  positiveDirection?: \"up\" | \"down\";\n}\n\n/** Props for `StatCard` */\nexport interface StatCardProps extends SFStatCardVariantsProps {\n  /** Short descriptive label (e.g. `\"Active users\"`). */\n  label: ReactNode;\n  /** Primary value to emphasise (pre-formatted). */\n  value: ReactNode;\n  /** Optional secondary text displayed under the value. */\n  hint?: ReactNode;\n  /** Optional change indicator (arrow + number + label). */\n  delta?: StatCardDelta;\n  /**\n   * Optional content slot rendered on the right-hand side — typically a\n   * `Sparkline` showing the metric's trend.\n   */\n  trend?: ReactNode;\n  /** When `true`, renders a skeleton placeholder in place of value + delta. */\n  loading?: boolean;\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n}\n\nfunction inferDirection(\n  value: number,\n  override?: \"up\" | \"down\" | \"flat\"\n): \"up\" | \"down\" | \"flat\" {\n  if (override) return override;\n  if (value > 0) return \"up\";\n  if (value < 0) return \"down\";\n  return \"flat\";\n}\n\nfunction deltaColor(\n  direction: \"up\" | \"down\" | \"flat\",\n  positiveDirection: \"up\" | \"down\"\n): string {\n  if (direction === \"flat\") return \"text-sf-subtle\";\n  const isPositive = direction === positiveDirection;\n  return isPositive ? \"text-sf-success\" : \"text-sf-danger\";\n}\n\nfunction deltaArrow(direction: \"up\" | \"down\" | \"flat\"): string {\n  if (direction === \"up\") return \"↑\";\n  if (direction === \"down\") return \"↓\";\n  return \"→\";\n}\n\n/**\n * StatCard — compact KPI tile displaying a label, a primary value, and an\n * optional delta + trend sparkline.\n *\n * @example\n * ```tsx\n * <StatCard\n *   label=\"Active users\"\n *   value=\"12,384\"\n *   delta={{ value: 0.12, label: \"vs last week\" }}\n * />\n * ```\n */\nexport const StatCard = forwardRef<HTMLDivElement, StatCardProps>(\n  function StatCard(\n    {\n      label,\n      value,\n      hint,\n      delta,\n      trend,\n      loading,\n      size = SF_STAT_CARD_DEFAULT_VARIANTS.size,\n      className,\n    },\n    ref\n  ) {\n    const sizeClasses = SF_STAT_CARD_VARIANTS.size[size];\n    const direction = delta\n      ? inferDirection(delta.value, delta.direction)\n      : undefined;\n    const deltaClass =\n      delta && direction\n        ? deltaColor(direction, delta.positiveDirection ?? \"up\")\n        : undefined;\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"flex flex-col rounded-lg bg-sf-elevated text-sf-default\",\n          sizeClasses.root,\n          className\n        )}\n      >\n        <div className={cn(\"text-sf-subtle\", sizeClasses.label)}>{label}</div>\n        <div className=\"flex items-start justify-between gap-3\">\n          <div className=\"flex flex-col gap-1\">\n            {loading ? (\n              <div\n                aria-busy=\"true\"\n                className={cn(\n                  \"h-8 w-24 animate-pulse rounded-md bg-sf-fill\",\n                  size === \"sm\" && \"h-6 w-20\"\n                )}\n              />\n            ) : (\n              <div\n                className={cn(\n                  \"font-semibold tabular-nums text-sf-strong\",\n                  sizeClasses.value\n                )}\n              >\n                {value}\n              </div>\n            )}\n            {delta && !loading ? (\n              <div\n                className={cn(\n                  \"flex items-baseline gap-1 tabular-nums\",\n                  sizeClasses.hint\n                )}\n              >\n                <span className={cn(\"font-medium\", deltaClass)}>\n                  {deltaArrow(direction!)}{\" \"}\n                  {Math.abs(delta.value).toLocaleString(undefined, {\n                    maximumFractionDigits: 2,\n                  })}\n                </span>\n                {delta.label ? (\n                  <span className=\"text-sf-subtle\">{delta.label}</span>\n                ) : null}\n              </div>\n            ) : null}\n            {hint && !loading ? (\n              <div className={cn(\"text-sf-subtle\", sizeClasses.hint)}>\n                {hint}\n              </div>\n            ) : null}\n          </div>\n          {trend ? (\n            <div className=\"pointer-events-none shrink-0\">{trend}</div>\n          ) : null}\n        </div>\n      </div>\n    );\n  }\n);\n\nStatCard.displayName = \"StatCard\";\n"],"mappings":";;;;;;AAKA,IAAa,wBAAwB,EACnC,MAAM;CACJ,IAAI;EACF,MAAM;EACN,OAAO;EACP,OAAO;EACP,MAAM;EACP;CACD,MAAM;EACJ,MAAM;EACN,OAAO;EACP,OAAO;EACP,MAAM;EACP;CACF,EACF;;AAGD,IAAa,gCAAgC,EAC3C,MAAM,QACP;AAgDD,SAAS,eACP,OACA,UACwB;AACxB,KAAI,SAAU,QAAO;AACrB,KAAI,QAAQ,EAAG,QAAO;AACtB,KAAI,QAAQ,EAAG,QAAO;AACtB,QAAO;;AAGT,SAAS,WACP,WACA,mBACQ;AACR,KAAI,cAAc,OAAQ,QAAO;AAEjC,QADmB,cAAc,oBACb,oBAAoB;;AAG1C,SAAS,WAAW,WAA2C;AAC7D,KAAI,cAAc,KAAM,QAAO;AAC/B,KAAI,cAAc,OAAQ,QAAO;AACjC,QAAO;;;;;;;;;;;;;;;AAgBT,IAAa,WAAW,WACtB,SAAS,SACP,EACE,OACA,OACA,MACA,OACA,OACA,SACA,OAAO,8BAA8B,MACrC,aAEF,KACA;CACA,MAAM,cAAc,sBAAsB,KAAK;CAC/C,MAAM,YAAY,QACd,eAAe,MAAM,OAAO,MAAM,UAAU,GAC5C,KAAA;CACJ,MAAM,aACJ,SAAS,YACL,WAAW,WAAW,MAAM,qBAAqB,KAAK,GACtD,KAAA;AAEN,QACE,qBAAC,OAAD;EACO;EACL,WAAW,GACT,2DACA,YAAY,MACZ,UACD;YANH,CAQE,oBAAC,OAAD;GAAK,WAAW,GAAG,kBAAkB,YAAY,MAAM;aAAG;GAAY,CAAA,EACtE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,qBAAC,OAAD;IAAK,WAAU;cAAf;KACG,UACC,oBAAC,OAAD;MACE,aAAU;MACV,WAAW,GACT,gDACA,SAAS,QAAQ,WAClB;MACD,CAAA,GAEF,oBAAC,OAAD;MACE,WAAW,GACT,6CACA,YAAY,MACb;gBAEA;MACG,CAAA;KAEP,SAAS,CAAC,UACT,qBAAC,OAAD;MACE,WAAW,GACT,0CACA,YAAY,KACb;gBAJH,CAME,qBAAC,QAAD;OAAM,WAAW,GAAG,eAAe,WAAW;iBAA9C;QACG,WAAW,UAAW;QAAE;QACxB,KAAK,IAAI,MAAM,MAAM,CAAC,eAAe,KAAA,GAAW,EAC/C,uBAAuB,GACxB,CAAC;QACG;UACN,MAAM,QACL,oBAAC,QAAD;OAAM,WAAU;iBAAkB,MAAM;OAAa,CAAA,GACnD,KACA;UACJ;KACH,QAAQ,CAAC,UACR,oBAAC,OAAD;MAAK,WAAW,GAAG,kBAAkB,YAAY,KAAK;gBACnD;MACG,CAAA,GACJ;KACA;OACL,QACC,oBAAC,OAAD;IAAK,WAAU;cAAgC;IAAY,CAAA,GACzD,KACA;KACF;;EAGX;AAED,SAAS,cAAc"}

package/dist/styles/sf-binding.css

@@ -1,73 +1,31 @@
 @import "./theme-sf.css";
 @import "./theme-fedramp.css";
 @import "./theme-minimal.css";
-@import "./theme-navigator.css";
+@import "./theme-blue-tint.css";
 
 /*
- * Navigator-compatible defaults for bare CSS variables referenced by theme-sf.css.
- * These provide sane out-of-the-box values so sf-* tokens resolve without
- * requiring the host app to define them. Host apps (e.g. navigator) can
- * override any of these — later declarations in the cascade win naturally.
+ * The shadcn compatibility layer (--background, --foreground, --border, …) is
+ * opt-in. Consumers who copy-paste shadcn/TanStack/navigator components import
+ * it explicitly via `@signalflare-ai/ui/styles/shadcn`. The default SF bundle
+ * stays free of shadcn-named variables.
  */
 
-@layer base {
-  :root {
-    /* sugar-high syntax token colours — light mode */
-    --sh-keyword: oklch(0.52 0.2 265); /* blue — const, return, if */
-    --sh-identifier: oklch(0.38 0.13 150); /* green — variable names */
-    --sh-string: oklch(0.48 0.16 25); /* orange/brown — strings */
-    --sh-comment: oklch(0.62 0 0); /* grey — comments */
-    --sh-jsxliterals: oklch(0.52 0.2 265); /* blue — JSX tags */
-    --sh-property: oklch(0.38 0.12 220); /* teal — object keys */
-    --sh-entity: oklch(0.46 0.18 30); /* orange — class names */
-    --sh-sign: oklch(0.45 0 0); /* dark grey — punctuation */
-    --sh-space: inherit;
-
-    --background: oklch(1 0 0);
-    --foreground: oklch(0.145 0 0);
-    --primary: oklch(0.205 0 0);
-    --primary-foreground: oklch(0.985 0 0);
-    --muted: oklch(0.96 0 0);
-    --muted-foreground: oklch(0.556 0 0);
-    --destructive: oklch(0.577 0.245 27.325);
-    --border: oklch(0.922 0 0);
-    --ring: oklch(0.708 0 0);
-    /* Streamdown uses bg-sidebar for code block containers */
-    --sidebar: oklch(0.99 0 0);
-    --sidebar-foreground: oklch(0.145 0 0);
-    --sidebar-border: oklch(0.922 0 0);
-    --card: oklch(1 0 0);
-    --card-foreground: oklch(0.145 0 0);
-  }
+/* ─── sugar-high syntax bridge ───────────────────────────────────────── */
+/*
+ * sugar-high injects inline `style="color: var(--sh-*)"` on its tokens.
+ * Aliased to sf-syntax-* tokens so themes can override in one place.
+ */
 
-  [data-mode="dark"] {
-    /* sugar-high syntax token colours — dark mode */
-    --sh-keyword: oklch(0.72 0.19 255); /* bright blue */
-    --sh-identifier: oklch(0.75 0.15 155); /* bright green */
-    --sh-string: oklch(0.72 0.14 60); /* warm yellow */
-    --sh-comment: oklch(0.55 0 0); /* mid grey */
-    --sh-jsxliterals: oklch(0.72 0.19 255); /* bright blue */
-    --sh-property: oklch(0.72 0.12 215); /* teal */
-    --sh-entity: oklch(0.75 0.15 55); /* bright orange */
-    --sh-sign: oklch(0.7 0 0); /* light grey */
-    --sh-space: inherit;
-
-    --background: oklch(0.21 0.005 252);
-    --foreground: oklch(0.985 0 0);
-    --primary: oklch(0.55 0.01 40);
-    --primary-foreground: oklch(0.98 0 0);
-    --muted: oklch(0.27 0.005 252);
-    --muted-foreground: oklch(0.65 0 0);
-    --destructive: oklch(0.55 0.18 25);
-    --border: oklch(0.3 0.015 250);
-    --ring: oklch(0.439 0 0);
-    /* Streamdown uses bg-sidebar for code block containers */
-    --sidebar: oklch(0.24 0.005 252);
-    --sidebar-foreground: oklch(0.985 0 0);
-    --sidebar-border: oklch(0.3 0.015 250);
-    --card: oklch(0.24 0.005 252);
-    --card-foreground: oklch(0.985 0 0);
-  }
+:root {
+  --sh-keyword: var(--color-sf-syntax-keyword);
+  --sh-identifier: var(--color-sf-syntax-identifier);
+  --sh-string: var(--color-sf-syntax-string);
+  --sh-comment: var(--color-sf-syntax-comment);
+  --sh-jsxliterals: var(--color-sf-syntax-jsxliterals);
+  --sh-property: var(--color-sf-syntax-property);
+  --sh-entity: var(--color-sf-syntax-entity);
+  --sh-sign: var(--color-sf-syntax-sign);
+  --sh-space: inherit;
 }
 
 @theme {