@handled-ai/design-system 0.18.4 → 0.18.6

package/dist/components/linked-entity-cell.js

@@ -0,0 +1,96 @@
+"use client"
+
+"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ExternalLink } from "lucide-react";
+import { cn } from "../lib/utils.js";
+function LinkedEntityCell(_a) {
+  var _b = _a, {
+    name,
+    href,
+    subtitle,
+    meta,
+    icon,
+    external = false,
+    onNavigate,
+    className
+  } = _b, props = __objRest(_b, [
+    "name",
+    "href",
+    "subtitle",
+    "meta",
+    "icon",
+    "external",
+    "onNavigate",
+    "className"
+  ]);
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: "truncate", children: name }),
+    external ? /* @__PURE__ */ jsx(ExternalLink, { className: "h-3 w-3 shrink-0 opacity-60", "aria-hidden": "true" }) : null
+  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    __spreadProps(__spreadValues({
+      "data-slot": "linked-entity-cell",
+      className: cn("flex min-w-0 items-center gap-2", className)
+    }, props), {
+      children: [
+        icon ? /* @__PURE__ */ jsx("span", { "data-slot": "linked-entity-cell-icon", className: "shrink-0 text-muted-foreground", children: icon }) : null,
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          href ? /* @__PURE__ */ jsx(
+            "a",
+            {
+              "data-slot": "linked-entity-cell-link",
+              href,
+              target: external ? "_blank" : void 0,
+              rel: external ? "noreferrer" : void 0,
+              onClick: onNavigate,
+              className: "inline-flex max-w-full items-center gap-1 truncate font-medium text-foreground underline-offset-4 hover:text-primary hover:underline",
+              children: content
+            }
+          ) : /* @__PURE__ */ jsx("span", { "data-slot": "linked-entity-cell-name", className: "block truncate font-medium text-foreground", children: name }),
+          subtitle || meta ? /* @__PURE__ */ jsxs("div", { "data-slot": "linked-entity-cell-meta", className: "mt-0.5 truncate text-xs text-muted-foreground", children: [
+            subtitle,
+            subtitle && meta ? /* @__PURE__ */ jsx("span", { className: "px-1", children: "\xB7" }) : null,
+            meta
+          ] }) : null
+        ] })
+      ]
+    })
+  );
+}
+export {
+  LinkedEntityCell
+};
+//# sourceMappingURL=linked-entity-cell.js.map

package/dist/components/linked-entity-cell.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/linked-entity-cell.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { ExternalLink } from \"lucide-react\"\n\nimport { cn } from \"../lib/utils\"\n\nexport interface LinkedEntityCellProps extends React.HTMLAttributes<HTMLDivElement> {\n  name: React.ReactNode\n  href?: string\n  subtitle?: React.ReactNode\n  meta?: React.ReactNode\n  icon?: React.ReactNode\n  external?: boolean\n  onNavigate?: () => void\n}\n\nexport function LinkedEntityCell({\n  name,\n  href,\n  subtitle,\n  meta,\n  icon,\n  external = false,\n  onNavigate,\n  className,\n  ...props\n}: LinkedEntityCellProps) {\n  const content = (\n    <>\n      <span className=\"truncate\">{name}</span>\n      {external ? <ExternalLink className=\"h-3 w-3 shrink-0 opacity-60\" aria-hidden=\"true\" /> : null}\n    </>\n  )\n\n  return (\n    <div\n      data-slot=\"linked-entity-cell\"\n      className={cn(\"flex min-w-0 items-center gap-2\", className)}\n      {...props}\n    >\n      {icon ? (\n        <span data-slot=\"linked-entity-cell-icon\" className=\"shrink-0 text-muted-foreground\">\n          {icon}\n        </span>\n      ) : null}\n      <div className=\"min-w-0 flex-1\">\n        {href ? (\n          <a\n            data-slot=\"linked-entity-cell-link\"\n            href={href}\n            target={external ? \"_blank\" : undefined}\n            rel={external ? \"noreferrer\" : undefined}\n            onClick={onNavigate}\n            className=\"inline-flex max-w-full items-center gap-1 truncate font-medium text-foreground underline-offset-4 hover:text-primary hover:underline\"\n          >\n            {content}\n          </a>\n        ) : (\n          <span data-slot=\"linked-entity-cell-name\" className=\"block truncate font-medium text-foreground\">\n            {name}\n          </span>\n        )}\n        {subtitle || meta ? (\n          <div data-slot=\"linked-entity-cell-meta\" className=\"mt-0.5 truncate text-xs text-muted-foreground\">\n            {subtitle}\n            {subtitle && meta ? <span className=\"px-1\">·</span> : null}\n            {meta}\n          </div>\n        ) : null}\n      </div>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BI,mBACE,KADF;AA1BJ,SAAS,oBAAoB;AAE7B,SAAS,UAAU;AAYZ,SAAS,iBAAiB,IAUP;AAVO,eAC/B;AAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,EAzBF,IAiBiC,IAS5B,kBAT4B,IAS5B;AAAA,IARH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM,UACJ,iCACE;AAAA,wBAAC,UAAK,WAAU,YAAY,gBAAK;AAAA,IAChC,WAAW,oBAAC,gBAAa,WAAU,+BAA8B,eAAY,QAAO,IAAK;AAAA,KAC5F;AAGF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,mCAAmC,SAAS;AAAA,OACtD,QAHL;AAAA,MAKE;AAAA,eACC,oBAAC,UAAK,aAAU,2BAA0B,WAAU,kCACjD,gBACH,IACE;AAAA,QACJ,qBAAC,SAAI,WAAU,kBACZ;AAAA,iBACC;AAAA,YAAC;AAAA;AAAA,cACC,aAAU;AAAA,cACV;AAAA,cACA,QAAQ,WAAW,WAAW;AAAA,cAC9B,KAAK,WAAW,eAAe;AAAA,cAC/B,SAAS;AAAA,cACT,WAAU;AAAA,cAET;AAAA;AAAA,UACH,IAEA,oBAAC,UAAK,aAAU,2BAA0B,WAAU,8CACjD,gBACH;AAAA,UAED,YAAY,OACX,qBAAC,SAAI,aAAU,2BAA0B,WAAU,iDAChD;AAAA;AAAA,YACA,YAAY,OAAO,oBAAC,UAAK,WAAU,QAAO,kBAAC,IAAU;AAAA,YACrD;AAAA,aACH,IACE;AAAA,WACN;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/metric-card.d.ts

@@ -20,6 +20,19 @@ interface MetricCardProps {
     showExternalLink?: boolean;
     showInfo?: boolean;
 }
+interface KpiStripItem {
+    id?: string;
+    label: React.ReactNode;
+    value: React.ReactNode;
+    unit?: React.ReactNode;
+    subtitle?: React.ReactNode;
+    change?: MetricCardProps["change"];
+}
+interface KpiStripProps extends React.HTMLAttributes<HTMLDivElement> {
+    items: KpiStripItem[];
+    columns?: 2 | 3 | 4;
+}
+declare function KpiStrip({ items, columns, className, ...props }: KpiStripProps): React.JSX.Element;
 declare function MetricCard({ title, value, unit, subtitle, change, footerText, dataPoints, showExternalLink, showInfo, }: MetricCardProps): React.JSX.Element;
 
-export { MetricCard, type MetricCardProps, type MetricDataPoint };
+export { KpiStrip, type KpiStripItem, type KpiStripProps, MetricCard, type MetricCardProps, type MetricDataPoint };

package/dist/components/metric-card.js

@@ -1,6 +1,102 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ArrowUp, ArrowDown, Info, ExternalLink } from "lucide-react";
 import { cn } from "../lib/utils.js";
+function getChangePresentation(change) {
+  if (!change) return null;
+  if (change.direction === "neutral") {
+    return { icon: null, className: "text-muted-foreground" };
+  }
+  const isGoodDirection = change.isGood !== void 0 ? change.isGood : change.direction === "up";
+  return {
+    icon: change.direction === "down" ? ArrowDown : ArrowUp,
+    className: isGoodDirection ? "text-emerald-600" : "text-red-600"
+  };
+}
+function KpiStrip(_a) {
+  var _b = _a, { items, columns = 4, className } = _b, props = __objRest(_b, ["items", "columns", "className"]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    __spreadProps(__spreadValues({
+      "data-slot": "kpi-strip",
+      className: cn(
+        "grid gap-3 rounded-xl border border-border bg-card p-3 shadow-sm",
+        columns === 2 && "sm:grid-cols-2",
+        columns === 3 && "sm:grid-cols-3",
+        columns === 4 && "sm:grid-cols-2 lg:grid-cols-4",
+        className
+      )
+    }, props), {
+      children: items.map((item, index) => {
+        var _a2;
+        const changePresentation = getChangePresentation(item.change);
+        const ChangeIcon = changePresentation == null ? void 0 : changePresentation.icon;
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-slot": "kpi-strip-item",
+            className: "min-w-0 rounded-lg bg-muted/40 px-3 py-2",
+            children: [
+              /* @__PURE__ */ jsx("div", { "data-slot": "kpi-strip-label", className: "truncate text-xs font-medium text-muted-foreground", children: item.label }),
+              /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-baseline gap-1", children: [
+                /* @__PURE__ */ jsx("span", { "data-slot": "kpi-strip-value", className: "truncate text-2xl font-bold tracking-tight text-foreground", children: item.value }),
+                item.unit ? /* @__PURE__ */ jsx("span", { "data-slot": "kpi-strip-unit", className: "text-sm font-semibold text-muted-foreground", children: item.unit }) : null
+              ] }),
+              item.subtitle || item.change ? /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-2 text-xs", children: [
+                item.change ? /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    "data-slot": "kpi-strip-change",
+                    className: cn(
+                      "inline-flex items-center gap-0.5 font-semibold",
+                      changePresentation == null ? void 0 : changePresentation.className
+                    ),
+                    children: [
+                      ChangeIcon ? /* @__PURE__ */ jsx(ChangeIcon, { className: "h-3 w-3 stroke-[3]" }) : null,
+                      item.change.value
+                    ]
+                  }
+                ) : null,
+                item.subtitle ? /* @__PURE__ */ jsx("span", { "data-slot": "kpi-strip-subtitle", className: "truncate text-muted-foreground", children: item.subtitle }) : null
+              ] }) : null
+            ]
+          },
+          (_a2 = item.id) != null ? _a2 : index
+        );
+      })
+    })
+  );
+}
 function MetricCard({
   title,
   value,
@@ -102,6 +198,7 @@ function MetricCard({
   ] });
 }
 export {
+  KpiStrip,
   MetricCard
 };
 //# sourceMappingURL=metric-card.js.map

package/dist/components/metric-card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/metric-card.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { ArrowUp, ArrowDown, Info, ExternalLink } from \"lucide-react\"\nimport { cn } from \"../lib/utils\"\n\nexport interface MetricDataPoint {\n  label: string\n  value: number | string\n  color?: string\n}\n\nexport interface MetricCardProps {\n  title: string\n  value?: string | number\n  unit?: string\n  subtitle?: string\n  change?: { \n    value: string\n    direction: \"up\" | \"down\" | \"neutral\"\n    isGood?: boolean // if true, up is green. if false, up is red (e.g. churn).\n  }\n  footerText?: string\n  dataPoints?: MetricDataPoint[]\n  showExternalLink?: boolean\n  showInfo?: boolean\n}\n\nexport function MetricCard({\n  title,\n  value,\n  unit,\n  subtitle,\n  change,\n  footerText,\n  dataPoints,\n  showExternalLink,\n  showInfo = true,\n}: MetricCardProps) {\n  // SVG Donut Chart logic for variants with dataPoints\n  const renderDonut = () => {\n    if (!dataPoints || dataPoints.length === 0 || value === undefined) return null\n\n    // Simple pseudo-donut chart logic assuming specific colors from the image\n    // In a real prod environment we'd use recharts/visx, but for this standalone component\n    // we can draw an SVG circle with stroke-dasharray based on the data\n    const size = 80\n    const strokeWidth = 12\n    const radius = (size - strokeWidth) / 2\n    const circumference = 2 * Math.PI * radius\n    \n    // Calculate total to distribute the circle\n    const total = dataPoints.reduce((sum, dp) => sum + (typeof dp.value === 'number' ? dp.value : 0), 0)\n    let currentOffset = 0\n\n    return (\n      <div className=\"relative\" style={{ width: size, height: size }}>\n        <svg width={size} height={size} className=\"transform -rotate-90\">\n          {dataPoints.map((dp, i) => {\n            const val = typeof dp.value === 'number' ? dp.value : 0\n            const percentage = val / total\n            const strokeLength = percentage * circumference\n            const offset = currentOffset\n            currentOffset += strokeLength\n\n            // Fallback colors matching the image's teal/green palette\n            const colors = [\"#166534\", \"#22c55e\", \"#6ee7b7\", \"#ccfbf1\", \"#f1f5f9\"]\n            const color = dp.color || colors[i % colors.length]\n\n            return (\n              <circle\n                key={dp.label}\n                cx={size / 2}\n                cy={size / 2}\n                r={radius}\n                fill=\"none\"\n                stroke={color}\n                strokeWidth={strokeWidth}\n                strokeDasharray={`${Math.max(strokeLength - 2, 0)} ${circumference}`}\n                strokeDashoffset={-offset}\n                className=\"transition-all duration-300\"\n              />\n            )\n          })}\n        </svg>\n        <div className=\"absolute inset-0 flex items-center justify-center flex-col\">\n          <span className=\"text-xl font-bold text-foreground leading-none\">{value}</span>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <div className=\"flex flex-col rounded-xl border border-border bg-card p-5 shadow-sm h-full w-full\">\n      <div className={cn(\"flex justify-between items-start\", title ? \"mb-4\" : \"mb-4\")}>\n        {title ? (\n          <h3 className=\"font-semibold text-sm text-foreground/80\">{title}</h3>\n        ) : (\n          <div className=\"flex flex-col\">\n            <div className=\"flex items-baseline gap-1\">\n              <span className=\"text-3xl font-bold tracking-tight text-foreground\">{value}</span>\n              {unit && <span className=\"text-2xl font-bold tracking-tight text-foreground\">{unit}</span>}\n            </div>\n            {subtitle && (\n              <p className=\"text-sm font-medium text-muted-foreground mt-2\">{subtitle}</p>\n            )}\n          </div>\n        )}\n        <div className=\"flex items-center gap-1.5 text-muted-foreground shrink-0 mt-0.5\">\n          {showExternalLink && <ExternalLink className=\"w-3.5 h-3.5 cursor-pointer hover:text-foreground transition-colors\" />}\n          {showInfo && <Info className=\"w-3.5 h-3.5 cursor-pointer hover:text-foreground transition-colors\" />}\n        </div>\n      </div>\n\n      <div className=\"flex-1 flex flex-col min-w-0\">\n        {dataPoints && dataPoints.length > 0 ? (\n          // Donut Chart Variant\n          <div className=\"flex items-center gap-4 mt-2 mb-6\">\n            <div className=\"shrink-0\">\n              {renderDonut()}\n            </div>\n            <div className=\"flex flex-col gap-2 flex-1 min-w-0\">\n              {dataPoints.slice(0, 5).map((dp, i) => {\n                const colors = [\"bg-[#166534]\", \"bg-[#22c55e]\", \"bg-[#6ee7b7]\", \"bg-[#ccfbf1]\", \"bg-[#f1f5f9]\"]\n                return (\n                  <div key={dp.label} className=\"flex items-center justify-between gap-2 text-[11px] font-medium min-w-0\">\n                    <div className=\"flex items-center gap-1.5 text-muted-foreground min-w-0\">\n                      <div className={cn(\"w-1.5 h-1.5 rounded-full shrink-0\", dp.color ? \"\" : colors[i % colors.length])} style={dp.color ? { backgroundColor: dp.color } : {}} />\n                      <span className=\"whitespace-nowrap\">{dp.label}</span>\n                    </div>\n                    <span className=\"text-foreground font-semibold shrink-0\">{dp.value}</span>\n                  </div>\n                )\n              })}\n            </div>\n          </div>\n        ) : title && (\n          // Standard Big Number Variant (only if title exists)\n          <div className=\"mb-6\">\n            <div className=\"flex items-baseline gap-1\">\n              <span className=\"text-4xl font-bold tracking-tight text-foreground\">{value}</span>\n              {unit && <span className=\"text-2xl font-bold tracking-tight text-foreground\">{unit}</span>}\n            </div>\n            {subtitle && (\n              <p className=\"text-sm font-medium text-muted-foreground mt-1\">{subtitle}</p>\n            )}\n          </div>\n        )}\n\n        {/* Footer section (Change indicator & extra text) */}\n        <div className=\"mt-auto flex flex-col gap-1.5\">\n          {change && (\n            <div className=\"flex items-center gap-1\">\n              {(() => {\n                // Determine color based on isGood property\n                // By default, up is green (good), down is red (bad)\n                const isGoodDirection = change.isGood !== undefined \n                  ? change.isGood \n                  : change.direction === \"up\";\n                \n                const colorClass = isGoodDirection ? \"text-emerald-600\" : \"text-red-600\";\n                const Icon = change.direction === \"down\" ? ArrowDown : ArrowUp;\n                \n                return (\n                  <span className={cn(\"text-xs font-semibold flex items-center gap-0.5\", colorClass)}>\n                    <Icon className=\"w-3 h-3 stroke-[3]\" />\n                    {change.value}\n                  </span>\n                )\n              })()}\n            </div>\n          )}\n          {footerText && (\n            <span className=\"text-[11px] text-muted-foreground font-medium\">{footerText}</span>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"mappings":"AAsDM,SAcQ,KAdR;AArDN,SAAS,SAAS,WAAW,MAAM,oBAAoB;AACvD,SAAS,UAAU;AAwBZ,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AACb,GAAoB;AAElB,QAAM,cAAc,MAAM;AACxB,QAAI,CAAC,cAAc,WAAW,WAAW,KAAK,UAAU,OAAW,QAAO;AAK1E,UAAM,OAAO;AACb,UAAM,cAAc;AACpB,UAAM,UAAU,OAAO,eAAe;AACtC,UAAM,gBAAgB,IAAI,KAAK,KAAK;AAGpC,UAAM,QAAQ,WAAW,OAAO,CAAC,KAAK,OAAO,OAAO,OAAO,GAAG,UAAU,WAAW,GAAG,QAAQ,IAAI,CAAC;AACnG,QAAI,gBAAgB;AAEpB,WACE,qBAAC,SAAI,WAAU,YAAW,OAAO,EAAE,OAAO,MAAM,QAAQ,KAAK,GAC3D;AAAA,0BAAC,SAAI,OAAO,MAAM,QAAQ,MAAM,WAAU,wBACvC,qBAAW,IAAI,CAAC,IAAI,MAAM;AACzB,cAAM,MAAM,OAAO,GAAG,UAAU,WAAW,GAAG,QAAQ;AACtD,cAAM,aAAa,MAAM;AACzB,cAAM,eAAe,aAAa;AAClC,cAAM,SAAS;AACf,yBAAiB;AAGjB,cAAM,SAAS,CAAC,WAAW,WAAW,WAAW,WAAW,SAAS;AACrE,cAAM,QAAQ,GAAG,SAAS,OAAO,IAAI,OAAO,MAAM;AAElD,eACE;AAAA,UAAC;AAAA;AAAA,YAEC,IAAI,OAAO;AAAA,YACX,IAAI,OAAO;AAAA,YACX,GAAG;AAAA,YACH,MAAK;AAAA,YACL,QAAQ;AAAA,YACR;AAAA,YACA,iBAAiB,GAAG,KAAK,IAAI,eAAe,GAAG,CAAC,CAAC,IAAI,aAAa;AAAA,YAClE,kBAAkB,CAAC;AAAA,YACnB,WAAU;AAAA;AAAA,UATL,GAAG;AAAA,QAUV;AAAA,MAEJ,CAAC,GACH;AAAA,MACA,oBAAC,SAAI,WAAU,8DACb,8BAAC,UAAK,WAAU,kDAAkD,iBAAM,GAC1E;AAAA,OACF;AAAA,EAEJ;AAEA,SACE,qBAAC,SAAI,WAAU,qFACb;AAAA,yBAAC,SAAI,WAAW,GAAG,oCAAoC,QAAQ,SAAS,MAAM,GAC3E;AAAA,cACC,oBAAC,QAAG,WAAU,4CAA4C,iBAAM,IAEhE,qBAAC,SAAI,WAAU,iBACb;AAAA,6BAAC,SAAI,WAAU,6BACb;AAAA,8BAAC,UAAK,WAAU,qDAAqD,iBAAM;AAAA,UAC1E,QAAQ,oBAAC,UAAK,WAAU,qDAAqD,gBAAK;AAAA,WACrF;AAAA,QACC,YACC,oBAAC,OAAE,WAAU,kDAAkD,oBAAS;AAAA,SAE5E;AAAA,MAEF,qBAAC,SAAI,WAAU,mEACZ;AAAA,4BAAoB,oBAAC,gBAAa,WAAU,sEAAqE;AAAA,QACjH,YAAY,oBAAC,QAAK,WAAU,sEAAqE;AAAA,SACpG;AAAA,OACF;AAAA,IAEA,qBAAC,SAAI,WAAU,gCACZ;AAAA,oBAAc,WAAW,SAAS;AAAA;AAAA,QAEjC,qBAAC,SAAI,WAAU,qCACb;AAAA,8BAAC,SAAI,WAAU,YACZ,sBAAY,GACf;AAAA,UACA,oBAAC,SAAI,WAAU,sCACZ,qBAAW,MAAM,GAAG,CAAC,EAAE,IAAI,CAAC,IAAI,MAAM;AACrC,kBAAM,SAAS,CAAC,gBAAgB,gBAAgB,gBAAgB,gBAAgB,cAAc;AAC9F,mBACE,qBAAC,SAAmB,WAAU,2EAC5B;AAAA,mCAAC,SAAI,WAAU,2DACb;AAAA,oCAAC,SAAI,WAAW,GAAG,qCAAqC,GAAG,QAAQ,KAAK,OAAO,IAAI,OAAO,MAAM,CAAC,GAAG,OAAO,GAAG,QAAQ,EAAE,iBAAiB,GAAG,MAAM,IAAI,CAAC,GAAG;AAAA,gBAC1J,oBAAC,UAAK,WAAU,qBAAqB,aAAG,OAAM;AAAA,iBAChD;AAAA,cACA,oBAAC,UAAK,WAAU,0CAA0C,aAAG,OAAM;AAAA,iBAL3D,GAAG,KAMb;AAAA,UAEJ,CAAC,GACH;AAAA,WACF;AAAA,UACE;AAAA,MAEF,qBAAC,SAAI,WAAU,QACb;AAAA,6BAAC,SAAI,WAAU,6BACb;AAAA,8BAAC,UAAK,WAAU,qDAAqD,iBAAM;AAAA,UAC1E,QAAQ,oBAAC,UAAK,WAAU,qDAAqD,gBAAK;AAAA,WACrF;AAAA,QACC,YACC,oBAAC,OAAE,WAAU,kDAAkD,oBAAS;AAAA,SAE5E;AAAA,MAIF,qBAAC,SAAI,WAAU,iCACZ;AAAA,kBACC,oBAAC,SAAI,WAAU,2BACX,iBAAM;AAGN,gBAAM,kBAAkB,OAAO,WAAW,SACtC,OAAO,SACP,OAAO,cAAc;AAEzB,gBAAM,aAAa,kBAAkB,qBAAqB;AAC1D,gBAAM,OAAO,OAAO,cAAc,SAAS,YAAY;AAEvD,iBACE,qBAAC,UAAK,WAAW,GAAG,mDAAmD,UAAU,GAC/E;AAAA,gCAAC,QAAK,WAAU,sBAAqB;AAAA,YACpC,OAAO;AAAA,aACV;AAAA,QAEJ,GAAG,GACL;AAAA,QAED,cACC,oBAAC,UAAK,WAAU,iDAAiD,sBAAW;AAAA,SAEhF;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/metric-card.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { ArrowUp, ArrowDown, Info, ExternalLink } from \"lucide-react\"\nimport type { LucideIcon } from \"lucide-react\"\nimport { cn } from \"../lib/utils\"\n\nexport interface MetricDataPoint {\n  label: string\n  value: number | string\n  color?: string\n}\n\nexport interface MetricCardProps {\n  title: string\n  value?: string | number\n  unit?: string\n  subtitle?: string\n  change?: { \n    value: string\n    direction: \"up\" | \"down\" | \"neutral\"\n    isGood?: boolean // if true, up is green. if false, up is red (e.g. churn).\n  }\n  footerText?: string\n  dataPoints?: MetricDataPoint[]\n  showExternalLink?: boolean\n  showInfo?: boolean\n}\n\nexport interface KpiStripItem {\n  id?: string\n  label: React.ReactNode\n  value: React.ReactNode\n  unit?: React.ReactNode\n  subtitle?: React.ReactNode\n  change?: MetricCardProps[\"change\"]\n}\n\nexport interface KpiStripProps extends React.HTMLAttributes<HTMLDivElement> {\n  items: KpiStripItem[]\n  columns?: 2 | 3 | 4\n}\n\nfunction getChangePresentation(change: MetricCardProps[\"change\"]): {\n  icon: LucideIcon | null\n  className: string\n} | null {\n  if (!change) return null\n  if (change.direction === \"neutral\") {\n    return { icon: null, className: \"text-muted-foreground\" }\n  }\n\n  const isGoodDirection = change.isGood !== undefined\n    ? change.isGood\n    : change.direction === \"up\"\n\n  return {\n    icon: change.direction === \"down\" ? ArrowDown : ArrowUp,\n    className: isGoodDirection ? \"text-emerald-600\" : \"text-red-600\",\n  }\n}\n\nexport function KpiStrip({ items, columns = 4, className, ...props }: KpiStripProps) {\n  return (\n    <div\n      data-slot=\"kpi-strip\"\n      className={cn(\n        \"grid gap-3 rounded-xl border border-border bg-card p-3 shadow-sm\",\n        columns === 2 && \"sm:grid-cols-2\",\n        columns === 3 && \"sm:grid-cols-3\",\n        columns === 4 && \"sm:grid-cols-2 lg:grid-cols-4\",\n        className\n      )}\n      {...props}\n    >\n      {items.map((item, index) => {\n        const changePresentation = getChangePresentation(item.change)\n        const ChangeIcon = changePresentation?.icon\n\n        return (\n          <div\n            key={item.id ?? index}\n            data-slot=\"kpi-strip-item\"\n            className=\"min-w-0 rounded-lg bg-muted/40 px-3 py-2\"\n          >\n            <div data-slot=\"kpi-strip-label\" className=\"truncate text-xs font-medium text-muted-foreground\">\n              {item.label}\n            </div>\n            <div className=\"mt-1 flex items-baseline gap-1\">\n              <span data-slot=\"kpi-strip-value\" className=\"truncate text-2xl font-bold tracking-tight text-foreground\">\n                {item.value}\n              </span>\n              {item.unit ? (\n                <span data-slot=\"kpi-strip-unit\" className=\"text-sm font-semibold text-muted-foreground\">\n                  {item.unit}\n                </span>\n              ) : null}\n            </div>\n            {item.subtitle || item.change ? (\n              <div className=\"mt-1 flex items-center gap-2 text-xs\">\n                {item.change ? (\n                  <span\n                    data-slot=\"kpi-strip-change\"\n                    className={cn(\n                      \"inline-flex items-center gap-0.5 font-semibold\",\n                      changePresentation?.className\n                    )}\n                  >\n                    {ChangeIcon ? <ChangeIcon className=\"h-3 w-3 stroke-[3]\" /> : null}\n                    {item.change.value}\n                  </span>\n                ) : null}\n                {item.subtitle ? (\n                  <span data-slot=\"kpi-strip-subtitle\" className=\"truncate text-muted-foreground\">\n                    {item.subtitle}\n                  </span>\n                ) : null}\n              </div>\n            ) : null}\n          </div>\n        )\n      })}\n    </div>\n  )\n}\n\nexport function MetricCard({\n  title,\n  value,\n  unit,\n  subtitle,\n  change,\n  footerText,\n  dataPoints,\n  showExternalLink,\n  showInfo = true,\n}: MetricCardProps) {\n  // SVG Donut Chart logic for variants with dataPoints\n  const renderDonut = () => {\n    if (!dataPoints || dataPoints.length === 0 || value === undefined) return null\n\n    // Simple pseudo-donut chart logic assuming specific colors from the image\n    // In a real prod environment we'd use recharts/visx, but for this standalone component\n    // we can draw an SVG circle with stroke-dasharray based on the data\n    const size = 80\n    const strokeWidth = 12\n    const radius = (size - strokeWidth) / 2\n    const circumference = 2 * Math.PI * radius\n    \n    // Calculate total to distribute the circle\n    const total = dataPoints.reduce((sum, dp) => sum + (typeof dp.value === 'number' ? dp.value : 0), 0)\n    let currentOffset = 0\n\n    return (\n      <div className=\"relative\" style={{ width: size, height: size }}>\n        <svg width={size} height={size} className=\"transform -rotate-90\">\n          {dataPoints.map((dp, i) => {\n            const val = typeof dp.value === 'number' ? dp.value : 0\n            const percentage = val / total\n            const strokeLength = percentage * circumference\n            const offset = currentOffset\n            currentOffset += strokeLength\n\n            // Fallback colors matching the image's teal/green palette\n            const colors = [\"#166534\", \"#22c55e\", \"#6ee7b7\", \"#ccfbf1\", \"#f1f5f9\"]\n            const color = dp.color || colors[i % colors.length]\n\n            return (\n              <circle\n                key={dp.label}\n                cx={size / 2}\n                cy={size / 2}\n                r={radius}\n                fill=\"none\"\n                stroke={color}\n                strokeWidth={strokeWidth}\n                strokeDasharray={`${Math.max(strokeLength - 2, 0)} ${circumference}`}\n                strokeDashoffset={-offset}\n                className=\"transition-all duration-300\"\n              />\n            )\n          })}\n        </svg>\n        <div className=\"absolute inset-0 flex items-center justify-center flex-col\">\n          <span className=\"text-xl font-bold text-foreground leading-none\">{value}</span>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <div className=\"flex flex-col rounded-xl border border-border bg-card p-5 shadow-sm h-full w-full\">\n      <div className={cn(\"flex justify-between items-start\", title ? \"mb-4\" : \"mb-4\")}>\n        {title ? (\n          <h3 className=\"font-semibold text-sm text-foreground/80\">{title}</h3>\n        ) : (\n          <div className=\"flex flex-col\">\n            <div className=\"flex items-baseline gap-1\">\n              <span className=\"text-3xl font-bold tracking-tight text-foreground\">{value}</span>\n              {unit && <span className=\"text-2xl font-bold tracking-tight text-foreground\">{unit}</span>}\n            </div>\n            {subtitle && (\n              <p className=\"text-sm font-medium text-muted-foreground mt-2\">{subtitle}</p>\n            )}\n          </div>\n        )}\n        <div className=\"flex items-center gap-1.5 text-muted-foreground shrink-0 mt-0.5\">\n          {showExternalLink && <ExternalLink className=\"w-3.5 h-3.5 cursor-pointer hover:text-foreground transition-colors\" />}\n          {showInfo && <Info className=\"w-3.5 h-3.5 cursor-pointer hover:text-foreground transition-colors\" />}\n        </div>\n      </div>\n\n      <div className=\"flex-1 flex flex-col min-w-0\">\n        {dataPoints && dataPoints.length > 0 ? (\n          // Donut Chart Variant\n          <div className=\"flex items-center gap-4 mt-2 mb-6\">\n            <div className=\"shrink-0\">\n              {renderDonut()}\n            </div>\n            <div className=\"flex flex-col gap-2 flex-1 min-w-0\">\n              {dataPoints.slice(0, 5).map((dp, i) => {\n                const colors = [\"bg-[#166534]\", \"bg-[#22c55e]\", \"bg-[#6ee7b7]\", \"bg-[#ccfbf1]\", \"bg-[#f1f5f9]\"]\n                return (\n                  <div key={dp.label} className=\"flex items-center justify-between gap-2 text-[11px] font-medium min-w-0\">\n                    <div className=\"flex items-center gap-1.5 text-muted-foreground min-w-0\">\n                      <div className={cn(\"w-1.5 h-1.5 rounded-full shrink-0\", dp.color ? \"\" : colors[i % colors.length])} style={dp.color ? { backgroundColor: dp.color } : {}} />\n                      <span className=\"whitespace-nowrap\">{dp.label}</span>\n                    </div>\n                    <span className=\"text-foreground font-semibold shrink-0\">{dp.value}</span>\n                  </div>\n                )\n              })}\n            </div>\n          </div>\n        ) : title && (\n          // Standard Big Number Variant (only if title exists)\n          <div className=\"mb-6\">\n            <div className=\"flex items-baseline gap-1\">\n              <span className=\"text-4xl font-bold tracking-tight text-foreground\">{value}</span>\n              {unit && <span className=\"text-2xl font-bold tracking-tight text-foreground\">{unit}</span>}\n            </div>\n            {subtitle && (\n              <p className=\"text-sm font-medium text-muted-foreground mt-1\">{subtitle}</p>\n            )}\n          </div>\n        )}\n\n        {/* Footer section (Change indicator & extra text) */}\n        <div className=\"mt-auto flex flex-col gap-1.5\">\n          {change && (\n            <div className=\"flex items-center gap-1\">\n              {(() => {\n                // Determine color based on isGood property\n                // By default, up is green (good), down is red (bad)\n                const isGoodDirection = change.isGood !== undefined \n                  ? change.isGood \n                  : change.direction === \"up\";\n                \n                const colorClass = isGoodDirection ? \"text-emerald-600\" : \"text-red-600\";\n                const Icon = change.direction === \"down\" ? ArrowDown : ArrowUp;\n                \n                return (\n                  <span className={cn(\"text-xs font-semibold flex items-center gap-0.5\", colorClass)}>\n                    <Icon className=\"w-3 h-3 stroke-[3]\" />\n                    {change.value}\n                  </span>\n                )\n              })()}\n            </div>\n          )}\n          {footerText && (\n            <span className=\"text-[11px] text-muted-foreground font-medium\">{footerText}</span>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","names":["_a"]}

package/dist/components/pill.d.ts

@@ -0,0 +1,26 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+/**
+ * Insights-friendly pill convenience wrappers.
+ *
+ * Pill and StatusPill are small, rounded wrappers for dense Insights surfaces
+ * such as tables, KPI strips, and filter summaries. They intentionally wrap the
+ * existing Badge/StatusBadge visual language and are not a replacement for all
+ * Badge usage across the design system.
+ */
+type PillStatus = "success" | "warning" | "error" | "neutral" | "info";
+declare const pillVariants: (props?: ({
+    variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "error" | "neutral" | "info" | "warning" | "success" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface PillProps extends React.ComponentProps<"span">, VariantProps<typeof pillVariants> {
+}
+declare function Pill({ className, variant, ...props }: PillProps): React.JSX.Element;
+interface StatusPillProps extends Omit<PillProps, "variant"> {
+    status: React.ReactNode;
+    intent?: PillStatus;
+}
+declare function StatusPill({ status, intent, children, ...props }: StatusPillProps): React.JSX.Element;
+
+export { Pill, type PillProps, type PillStatus, StatusPill, type StatusPillProps, pillVariants };

package/dist/components/pill.js

@@ -0,0 +1,77 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/utils.js";
+const pillVariants = cva(
+  "inline-flex w-fit shrink-0 items-center justify-center gap-1 whitespace-nowrap rounded-full border px-2.5 py-0.5 text-xs font-medium transition-colors [&>svg]:size-3",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground",
+        secondary: "border-transparent bg-secondary text-secondary-foreground",
+        destructive: "border-transparent bg-destructive text-white dark:bg-destructive/60",
+        outline: "border-border bg-background text-foreground",
+        ghost: "border-transparent bg-transparent text-muted-foreground",
+        success: "border-transparent bg-green-100 text-green-950 dark:bg-green-950 dark:text-green-100",
+        warning: "border-transparent bg-yellow-100 text-yellow-950 dark:bg-yellow-950 dark:text-yellow-100",
+        error: "border-transparent bg-red-100 text-red-950 dark:bg-red-950 dark:text-red-100",
+        neutral: "border-transparent bg-muted text-foreground",
+        info: "border-transparent bg-blue-100 text-blue-950 dark:bg-blue-950 dark:text-blue-100"
+      }
+    },
+    defaultVariants: {
+      variant: "neutral"
+    }
+  }
+);
+function Pill(_a) {
+  var _b = _a, { className, variant = "neutral" } = _b, props = __objRest(_b, ["className", "variant"]);
+  return /* @__PURE__ */ jsx(
+    "span",
+    __spreadValues({
+      "data-slot": "pill",
+      "data-variant": variant,
+      className: cn(pillVariants({ variant }), className)
+    }, props)
+  );
+}
+function StatusPill(_c) {
+  var _d = _c, { status, intent = "neutral", children } = _d, props = __objRest(_d, ["status", "intent", "children"]);
+  return /* @__PURE__ */ jsx(Pill, __spreadProps(__spreadValues({ "data-slot": "status-pill", variant: intent }, props), { children: children != null ? children : status }));
+}
+export {
+  Pill,
+  StatusPill,
+  pillVariants
+};
+//# sourceMappingURL=pill.js.map

package/dist/components/pill.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/pill.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"../lib/utils\"\n\n/**\n * Insights-friendly pill convenience wrappers.\n *\n * Pill and StatusPill are small, rounded wrappers for dense Insights surfaces\n * such as tables, KPI strips, and filter summaries. They intentionally wrap the\n * existing Badge/StatusBadge visual language and are not a replacement for all\n * Badge usage across the design system.\n */\nexport type PillStatus = \"success\" | \"warning\" | \"error\" | \"neutral\" | \"info\"\n\nconst pillVariants = cva(\n  \"inline-flex w-fit shrink-0 items-center justify-center gap-1 whitespace-nowrap rounded-full border px-2.5 py-0.5 text-xs font-medium transition-colors [&>svg]:size-3\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent bg-primary text-primary-foreground\",\n        secondary: \"border-transparent bg-secondary text-secondary-foreground\",\n        destructive: \"border-transparent bg-destructive text-white dark:bg-destructive/60\",\n        outline: \"border-border bg-background text-foreground\",\n        ghost: \"border-transparent bg-transparent text-muted-foreground\",\n        success: \"border-transparent bg-green-100 text-green-950 dark:bg-green-950 dark:text-green-100\",\n        warning: \"border-transparent bg-yellow-100 text-yellow-950 dark:bg-yellow-950 dark:text-yellow-100\",\n        error: \"border-transparent bg-red-100 text-red-950 dark:bg-red-950 dark:text-red-100\",\n        neutral: \"border-transparent bg-muted text-foreground\",\n        info: \"border-transparent bg-blue-100 text-blue-950 dark:bg-blue-950 dark:text-blue-100\",\n      },\n    },\n    defaultVariants: {\n      variant: \"neutral\",\n    },\n  }\n)\n\nexport interface PillProps\n  extends React.ComponentProps<\"span\">,\n    VariantProps<typeof pillVariants> {}\n\nexport function Pill({ className, variant = \"neutral\", ...props }: PillProps) {\n  return (\n    <span\n      data-slot=\"pill\"\n      data-variant={variant}\n      className={cn(pillVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nexport interface StatusPillProps extends Omit<PillProps, \"variant\"> {\n  status: React.ReactNode\n  intent?: PillStatus\n}\n\nexport function StatusPill({ status, intent = \"neutral\", children, ...props }: StatusPillProps) {\n  return (\n    <Pill data-slot=\"status-pill\" variant={intent} {...props}>\n      {children ?? status}\n    </Pill>\n  )\n}\n\nexport { pillVariants }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CI;AA3CJ,SAAS,WAA8B;AAEvC,SAAS,UAAU;AAYnB,MAAM,eAAe;AAAA,EACnB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,WAAW;AAAA,QACX,aAAa;AAAA,QACb,SAAS;AAAA,QACT,OAAO;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA,QACT,OAAO;AAAA,QACP,SAAS;AAAA,QACT,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,IACX;AAAA,EACF;AACF;AAMO,SAAS,KAAK,IAAyD;AAAzD,eAAE,aAAW,UAAU,UA1C5C,IA0CqB,IAAqC,kBAArC,IAAqC,CAAnC,aAAW;AAChC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,gBAAc;AAAA,MACd,WAAW,GAAG,aAAa,EAAE,QAAQ,CAAC,GAAG,SAAS;AAAA,OAC9C;AAAA,EACN;AAEJ;AAOO,SAAS,WAAW,IAAqE;AAArE,eAAE,UAAQ,SAAS,WAAW,SA1DzD,IA0D2B,IAA2C,kBAA3C,IAA2C,CAAzC,UAAQ,UAAoB;AACvD,SACE,oBAAC,qCAAK,aAAU,eAAc,SAAS,UAAY,QAAlD,EACE,wCAAY,SACf;AAEJ;","names":[]}

package/dist/components/quick-segment.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+interface QuickSegmentProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onSelect" | "value"> {
+    label: React.ReactNode;
+    value: string;
+    selected?: boolean;
+    count?: number | string;
+    description?: React.ReactNode;
+    onSelect?: (value: string) => void;
+}
+declare function QuickSegment({ label, value, selected, count, description, onSelect, className, type, ...props }: QuickSegmentProps): React.JSX.Element;
+
+export { QuickSegment, type QuickSegmentProps };

package/dist/components/quick-segment.js

@@ -0,0 +1,96 @@
+"use client"
+
+"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+function QuickSegment(_a) {
+  var _b = _a, {
+    label,
+    value,
+    selected = false,
+    count,
+    description,
+    onSelect,
+    className,
+    type = "button"
+  } = _b, props = __objRest(_b, [
+    "label",
+    "value",
+    "selected",
+    "count",
+    "description",
+    "onSelect",
+    "className",
+    "type"
+  ]);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    __spreadProps(__spreadValues({
+      "data-slot": "quick-segment",
+      "data-selected": selected ? "true" : "false",
+      type,
+      "aria-pressed": selected,
+      className: cn(
+        "inline-flex min-h-8 items-center gap-2 rounded-full border px-3 py-1.5 text-sm font-medium transition-colors",
+        selected ? "border-primary bg-primary text-primary-foreground shadow-sm" : "border-border bg-background text-muted-foreground hover:bg-muted hover:text-foreground",
+        className
+      ),
+      onClick: (event) => {
+        var _a2;
+        (_a2 = props.onClick) == null ? void 0 : _a2.call(props, event);
+        if (!event.defaultPrevented) onSelect == null ? void 0 : onSelect(value);
+      }
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsx("span", { "data-slot": "quick-segment-label", children: label }),
+        count !== void 0 ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-slot": "quick-segment-count",
+            className: cn(
+              "rounded-full px-1.5 py-0.5 text-[11px] leading-none",
+              selected ? "bg-primary-foreground/20 text-primary-foreground" : "bg-muted text-muted-foreground"
+            ),
+            children: count
+          }
+        ) : null,
+        description ? /* @__PURE__ */ jsx("span", { "data-slot": "quick-segment-description", className: "sr-only", children: description }) : null
+      ]
+    })
+  );
+}
+export {
+  QuickSegment
+};
+//# sourceMappingURL=quick-segment.js.map

package/dist/components/quick-segment.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/quick-segment.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"../lib/utils\"\n\nexport interface QuickSegmentProps\n  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"onSelect\" | \"value\"> {\n  label: React.ReactNode\n  value: string\n  selected?: boolean\n  count?: number | string\n  description?: React.ReactNode\n  onSelect?: (value: string) => void\n}\n\nexport function QuickSegment({\n  label,\n  value,\n  selected = false,\n  count,\n  description,\n  onSelect,\n  className,\n  type = \"button\",\n  ...props\n}: QuickSegmentProps) {\n  return (\n    <button\n      data-slot=\"quick-segment\"\n      data-selected={selected ? \"true\" : \"false\"}\n      type={type}\n      aria-pressed={selected}\n      className={cn(\n        \"inline-flex min-h-8 items-center gap-2 rounded-full border px-3 py-1.5 text-sm font-medium transition-colors\",\n        selected\n          ? \"border-primary bg-primary text-primary-foreground shadow-sm\"\n          : \"border-border bg-background text-muted-foreground hover:bg-muted hover:text-foreground\",\n        className\n      )}\n      onClick={(event) => {\n        props.onClick?.(event)\n        if (!event.defaultPrevented) onSelect?.(value)\n      }}\n      {...props}\n    >\n      <span data-slot=\"quick-segment-label\">{label}</span>\n      {count !== undefined ? (\n        <span\n          data-slot=\"quick-segment-count\"\n          className={cn(\n            \"rounded-full px-1.5 py-0.5 text-[11px] leading-none\",\n            selected\n              ? \"bg-primary-foreground/20 text-primary-foreground\"\n              : \"bg-muted text-muted-foreground\"\n          )}\n        >\n          {count}\n        </span>\n      ) : null}\n      {description ? (\n        <span data-slot=\"quick-segment-description\" className=\"sr-only\">\n          {description}\n        </span>\n      ) : null}\n    </button>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BI,SAkBE,KAlBF;AAxBJ,SAAS,UAAU;AAYZ,SAAS,aAAa,IAUP;AAVO,eAC3B;AAAA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,EAxBT,IAgB6B,IASxB,kBATwB,IASxB;AAAA,IARH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,iBAAe,WAAW,SAAS;AAAA,MACnC;AAAA,MACA,gBAAc;AAAA,MACd,WAAW;AAAA,QACT;AAAA,QACA,WACI,gEACA;AAAA,QACJ;AAAA,MACF;AAAA,MACA,SAAS,CAAC,UAAU;AAxC1B,YAAAA;AAyCQ,SAAAA,MAAA,MAAM,YAAN,gBAAAA,IAAA,YAAgB;AAChB,YAAI,CAAC,MAAM,iBAAkB,sCAAW;AAAA,MAC1C;AAAA,OACI,QAhBL;AAAA,MAkBC;AAAA,4BAAC,UAAK,aAAU,uBAAuB,iBAAM;AAAA,QAC5C,UAAU,SACT;AAAA,UAAC;AAAA;AAAA,YACC,aAAU;AAAA,YACV,WAAW;AAAA,cACT;AAAA,cACA,WACI,qDACA;AAAA,YACN;AAAA,YAEC;AAAA;AAAA,QACH,IACE;AAAA,QACH,cACC,oBAAC,UAAK,aAAU,6BAA4B,WAAU,WACnD,uBACH,IACE;AAAA;AAAA;AAAA,EACN;AAEJ;","names":["_a"]}

package/dist/index.d.ts

@@ -23,6 +23,7 @@ export { DataTableFilter, DataTableFilterCategory, DataTableFilterProps, FilterO
 export { DataTableQuickViewValue, DataTableQuickViews } from './components/data-table-quick-views.js';
 export { DataTableToolbar } from './components/data-table-toolbar.js';
 export { Citation, DetailViewHeader, DetailViewSummary, DetailViewThread, SourceDef, SourceList, ThreadMessage } from './components/detail-view.js';
+export { DetailDrawer, DetailDrawerProps } from './components/detail-drawer.js';
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from './components/dialog.js';
 export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from './components/dropdown-menu.js';
 export { EmptyState, EmptyStateProps } from './components/empty-state.js';
@@ -35,6 +36,8 @@ export { AssigneeFilter, InboxFilterCategory, InboxToolbar, InboxToolbarProps }
 export { InlineBanner, InlineBannerProps } from './components/inline-banner.js';
 export { Input } from './components/input.js';
 export { FilterDefinition, InsightsFilterBar, InsightsFilterBarProps } from './components/insights-filter-bar.js';
+export { DaysOpenCell, DaysOpenCellProps, getDaysOpenIntent } from './components/days-open-cell.js';
+export { LinkedEntityCell, LinkedEntityCellProps } from './components/linked-entity-cell.js';
 export { GroupedListGroup, GroupedListView, GroupedListViewProps, ItemList } from './components/item-list.js';
 export { ItemListDisplay, ItemListDisplayState, ItemListGrouping, ItemListViewMode } from './components/item-list-display.js';
 export { ItemListFilter, ItemListFilterCategory } from './components/item-list-filter.js';
@@ -42,11 +45,13 @@ export { ItemListQuickView, ItemListToolbar } from './components/item-list-toolb
 export { KbdHint } from './components/kbd-hint.js';
 export { Label } from './components/label.js';
 export { Message, MessageAvatar, MessageAvatarProps, MessageContent, MessageContentProps, MessageProps } from './components/message.js';
-export { MetricCard, MetricCardProps, MetricDataPoint } from './components/metric-card.js';
+export { KpiStrip, KpiStripItem, KpiStripProps, MetricCard, MetricCardProps, MetricDataPoint } from './components/metric-card.js';
 export { PerformanceMetricsTable, PerformanceMetricsTableRow, PerformanceMetricsTableSortOption } from './components/performance-metrics-table.js';
+export { Pill, PillProps, PillStatus, StatusPill, StatusPillProps, pillVariants } from './components/pill.js';
 export { PreviewList, PreviewListItem, PreviewListItemProps } from './components/preview-list.js';
 export { Progress } from './components/progress.js';
 export { QuickActionChatArea, QuickActionSubmitPayload } from './components/quick-action-chat-area.js';
+export { QuickSegment, QuickSegmentProps } from './components/quick-segment.js';
 export { QuickActionModal, QuickActionPriority, QuickActionTaskDraft, QuickActionTemplate } from './components/quick-action-modal.js';
 export { ActiveVariant, QuickActionSidebarNav, SidebarNavItem, SidebarNavSection, SidebarUserProfile, UserMenuItem } from './components/quick-action-sidebar-nav.js';
 export { RecommendedAction, RecommendedActionsSection } from './components/recommended-actions-section.js';
@@ -92,6 +97,7 @@ export { VolumeAnalysisChart, VolumeAnalysisChartProps, VolumeDataKey } from './
 export { MetricCardData, TopLineMetrics, TopLineMetricsProps } from './charts/top-line-metrics.js';
 export { PipelineFilterBreakdown, PipelineOverview, PipelineOverviewProps, PipelineStage, PipelineStageMetrics, PipelineStageTiming } from './charts/pipeline-overview.js';
 export { SankeyChart, SankeyData, SankeyDropOff, SankeyHoverCardData, SankeyLink, SankeyNode, SankeyStageMetrics } from './charts/sankey-chart.js';
+export { EmptyChartState, EmptyChartStateProps } from './charts/empty-chart-state.js';
 export { PrototypeShell, PrototypeShellProps } from './prototype/prototype-shell.js';
 export { DetailView, DetailViewProps, PrototypeInboxView, PrototypeInboxViewProps } from './prototype/prototype-inbox-view.js';
 export { PrototypeInsightsView, PrototypeInsightsViewProps } from './prototype/prototype-insights-view.js';

package/dist/index.js

@@ -23,6 +23,7 @@ export * from "./components/data-table-filter.js";
 export * from "./components/data-table-quick-views.js";
 export * from "./components/data-table-toolbar.js";
 export * from "./components/detail-view.js";
+export * from "./components/detail-drawer.js";
 export * from "./components/dialog.js";
 export * from "./components/dropdown-menu.js";
 export * from "./components/empty-state.js";
@@ -35,6 +36,8 @@ export * from "./components/inbox-toolbar.js";
 export * from "./components/inline-banner.js";
 export * from "./components/input.js";
 export * from "./components/insights-filter-bar.js";
+export * from "./components/days-open-cell.js";
+export * from "./components/linked-entity-cell.js";
 export * from "./components/item-list.js";
 export * from "./components/item-list-display.js";
 export * from "./components/item-list-filter.js";
@@ -44,9 +47,11 @@ export * from "./components/label.js";
 export * from "./components/message.js";
 export * from "./components/metric-card.js";
 export * from "./components/performance-metrics-table.js";
+export * from "./components/pill.js";
 export * from "./components/preview-list.js";
 export * from "./components/progress.js";
 export * from "./components/quick-action-chat-area.js";
+export * from "./components/quick-segment.js";
 import {
   QuickActionModal
 } from "./components/quick-action-modal.js";