@usetheo/ui 0.13.2 → 0.14.0

package/dist/chunk-CFVSXYVT.js

@@ -1,59 +0,0 @@
-import { Card } from './chunk-UJAWV6LM.js';
-import { cn } from './chunk-EWDN56AS.js';
-import { TrendingUp, TrendingDown, Minus } from 'lucide-react';
-import { forwardRef } from 'react';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-function trendColor(trend, invert) {
-  if (trend === "neutral") return "text-muted-foreground";
-  const isPositive = invert ? trend === "down" : trend === "up";
-  return isPositive ? "text-success" : "text-destructive";
-}
-function TrendIcon({ trend, className }) {
-  if (trend === "up") return /* @__PURE__ */ jsx(TrendingUp, { className: cn("size-3.5", className), "aria-hidden": true });
-  if (trend === "down") return /* @__PURE__ */ jsx(TrendingDown, { className: cn("size-3.5", className), "aria-hidden": true });
-  return /* @__PURE__ */ jsx(Minus, { className: cn("size-3.5", className), "aria-hidden": true });
-}
-var MetricCard = forwardRef(
-  ({ title, value, delta, hint, icon, invertTrend = false, className, ...rest }, ref) => {
-    return /* @__PURE__ */ jsxs(
-      Card,
-      {
-        "data-slot": "metric-card",
-        ref,
-        className: cn("@container/metric-card flex w-full flex-col gap-2 p-4", className),
-        "data-testid": "metric-card",
-        ...rest,
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
-            /* @__PURE__ */ jsx("span", { className: "font-medium text-muted-foreground text-xs uppercase tracking-wide", children: title }),
-            icon !== void 0 && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", "aria-hidden": true, children: icon })
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "font-semibold @sm/metric-card:text-3xl text-2xl text-foreground tracking-tight", children: value }),
-          (delta !== void 0 || hint !== void 0) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs", children: [
-            delta !== void 0 && /* @__PURE__ */ jsxs(
-              "span",
-              {
-                className: cn(
-                  "inline-flex items-center gap-1 font-medium",
-                  trendColor(delta.trend, invertTrend)
-                ),
-                "data-trend": delta.trend,
-                children: [
-                  /* @__PURE__ */ jsx(TrendIcon, { trend: delta.trend }),
-                  delta.value
-                ]
-              }
-            ),
-            hint !== void 0 && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: hint })
-          ] })
-        ]
-      }
-    );
-  }
-);
-MetricCard.displayName = "MetricCard";
-
-export { MetricCard };
-//# sourceMappingURL=chunk-CFVSXYVT.js.map
-//# sourceMappingURL=chunk-CFVSXYVT.js.map

package/dist/chunk-CFVSXYVT.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/composites/metric-card/metric-card.tsx"],"names":[],"mappings":";;;;;;AAsDA,SAAS,UAAA,CAAW,OAAwB,MAAA,EAAyB;AACnE,EAAA,IAAI,KAAA,KAAU,WAAW,OAAO,uBAAA;AAChC,EAAA,MAAM,UAAA,GAAa,MAAA,GAAS,KAAA,KAAU,MAAA,GAAS,KAAA,KAAU,IAAA;AACzD,EAAA,OAAO,aAAa,cAAA,GAAiB,kBAAA;AACvC;AAEA,SAAS,SAAA,CAAU,EAAE,KAAA,EAAO,SAAA,EAAU,EAAmD;AACvF,EAAA,IAAI,KAAA,KAAU,IAAA,EAAM,uBAAO,GAAA,CAAC,UAAA,EAAA,EAAW,SAAA,EAAW,EAAA,CAAG,UAAA,EAAY,SAAS,CAAA,EAAG,aAAA,EAAW,IAAA,EAAC,CAAA;AACzF,EAAA,IAAI,KAAA,KAAU,MAAA,EAAQ,uBAAO,GAAA,CAAC,YAAA,EAAA,EAAa,SAAA,EAAW,EAAA,CAAG,UAAA,EAAY,SAAS,CAAA,EAAG,aAAA,EAAW,IAAA,EAAC,CAAA;AAC7F,EAAA,uBAAO,GAAA,CAAC,SAAM,SAAA,EAAW,EAAA,CAAG,YAAY,SAAS,CAAA,EAAG,eAAW,IAAA,EAAC,CAAA;AAClE;AAEO,IAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CAAC,EAAE,KAAA,EAAO,KAAA,EAAO,KAAA,EAAO,IAAA,EAAM,IAAA,EAAM,WAAA,GAAc,KAAA,EAAO,SAAA,EAAW,GAAG,IAAA,IAAQ,GAAA,KAAQ;AACrF,IAAA,uBACE,IAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,WAAA,EAAU,aAAA;AAAA,QACV,GAAA;AAAA,QAQA,SAAA,EAAW,EAAA,CAAG,uDAAA,EAAyD,SAAS,CAAA;AAAA,QAChF,aAAA,EAAY,aAAA;AAAA,QACX,GAAG,IAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,wCAAA,EACb,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,mEAAA,EACb,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,YACC,IAAA,KAAS,0BACR,GAAA,CAAC,MAAA,EAAA,EAAK,WAAU,uBAAA,EAAwB,aAAA,EAAW,MAChD,QAAA,EAAA,IAAA,EACH;AAAA,WAAA,EAEJ,CAAA;AAAA,0BAEA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gFAAA,EACZ,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,UAAA,CACE,UAAU,MAAA,IAAa,IAAA,KAAS,2BAChC,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,iCAAA,EACZ,QAAA,EAAA;AAAA,YAAA,KAAA,KAAU,MAAA,oBACT,IAAA;AAAA,cAAC,MAAA;AAAA,cAAA;AAAA,gBACC,SAAA,EAAW,EAAA;AAAA,kBACT,4CAAA;AAAA,kBACA,UAAA,CAAW,KAAA,CAAM,KAAA,EAAO,WAAW;AAAA,iBACrC;AAAA,gBACA,cAAY,KAAA,CAAM,KAAA;AAAA,gBAElB,QAAA,EAAA;AAAA,kCAAA,GAAA,CAAC,SAAA,EAAA,EAAU,KAAA,EAAO,KAAA,CAAM,KAAA,EAAO,CAAA;AAAA,kBAC9B,KAAA,CAAM;AAAA;AAAA;AAAA,aACT;AAAA,YAED,SAAS,MAAA,oBAAa,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,yBAAyB,QAAA,EAAA,IAAA,EAAK;AAAA,WAAA,EACvE;AAAA;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;AACA,UAAA,CAAW,WAAA,GAAc,YAAA","file":"chunk-CFVSXYVT.js","sourcesContent":["import { Minus, TrendingDown, TrendingUp } from \"lucide-react\";\nimport { type HTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport { cn } from \"../../../lib/cn.js\";\nimport { Card } from \"../../primitives/card/index.js\";\n\n/**\n * MetricCard — dashboard metric tile (composite).\n *\n * Pattern recurrente \"Card + CardHeader + value + delta + trend icon\" promoted\n * to a first-class composite per ADR-0007 community-best-practices plan.\n *\n * Trend → token mapping (default `invertTrend=false`):\n *   up    → text-success     (positive growth)\n *   down  → text-destructive (negative growth)\n *   neutral → text-muted-foreground\n *\n * EC-17 absorbed: pass `invertTrend` for metrics where \"up is bad\" (cost,\n * churn, latency). The mapping inverts cleanly:\n *   up    → text-destructive (cost growing = bad)\n *   down  → text-success     (cost dropping = good)\n *\n * @example\n *   <MetricCard title=\"Revenue\" value=\"$12,345\" delta={{ value: \"+12%\", trend: \"up\" }} />\n *   <MetricCard title=\"Monthly Cost\" value=\"$3,200\" delta={{ value: \"+18%\", trend: \"up\" }} invertTrend />\n */\n\nexport type MetricCardTrend = \"up\" | \"down\" | \"neutral\";\n\nexport interface MetricCardDelta {\n  /** Display text (e.g., `\"+12%\"`, `\"-3.4 pp\"`, `\"unchanged\"`). */\n  value: string;\n  /** Trend direction — drives icon and color (subject to `invertTrend`). */\n  trend: MetricCardTrend;\n}\n\nexport interface MetricCardProps extends HTMLAttributes<HTMLDivElement> {\n  /** Metric label (e.g., \"Revenue\", \"Active Users\"). */\n  title: string;\n  /** Headline value (e.g., \"$12,345\", \"1,234\"). */\n  value: ReactNode;\n  /** Optional delta with trend direction. */\n  delta?: MetricCardDelta;\n  /** Optional subtle context line below the value (e.g., \"vs last month\"). */\n  hint?: ReactNode;\n  /** Optional icon rendered top-right (e.g., `<DollarSign />`). */\n  icon?: ReactNode;\n  /**\n   * EC-17: invert default trend semantics. Use for Cost / Churn / Latency\n   * metrics where \"up\" is bad. Default `false` (Revenue / Users / Conversions).\n   */\n  invertTrend?: boolean;\n}\n\nfunction trendColor(trend: MetricCardTrend, invert: boolean): string {\n  if (trend === \"neutral\") return \"text-muted-foreground\";\n  const isPositive = invert ? trend === \"down\" : trend === \"up\";\n  return isPositive ? \"text-success\" : \"text-destructive\";\n}\n\nfunction TrendIcon({ trend, className }: { trend: MetricCardTrend; className?: string }) {\n  if (trend === \"up\") return <TrendingUp className={cn(\"size-3.5\", className)} aria-hidden />;\n  if (trend === \"down\") return <TrendingDown className={cn(\"size-3.5\", className)} aria-hidden />;\n  return <Minus className={cn(\"size-3.5\", className)} aria-hidden />;\n}\n\nexport const MetricCard = forwardRef<HTMLDivElement, MetricCardProps>(\n  ({ title, value, delta, hint, icon, invertTrend = false, className, ...rest }, ref) => {\n    return (\n      <Card\n        data-slot=\"metric-card\"\n        ref={ref}\n        // T5.5: `@container/metric-card` makes the tile responsive to its PARENT\n        // width, not the viewport. Consumers can drop multiple cards into any\n        // grid and child elements scale via `@sm:`, `@md:`, `@lg:` variants.\n        // `w-full` is the right default for a tile: consumers always wrap in a\n        // grid/flex parent (grid-cols-N, flex). Without it, the flex-col card\n        // collapses to min-content (~150px) when used in isolation — a real\n        // regression observed in the docs site preview pane.\n        className={cn(\"@container/metric-card flex w-full flex-col gap-2 p-4\", className)}\n        data-testid=\"metric-card\"\n        {...rest}\n      >\n        <div className=\"flex items-start justify-between gap-3\">\n          <span className=\"font-medium text-muted-foreground text-xs uppercase tracking-wide\">\n            {title}\n          </span>\n          {icon !== undefined && (\n            <span className=\"text-muted-foreground\" aria-hidden>\n              {icon}\n            </span>\n          )}\n        </div>\n        {/* Value scales 2xl → 3xl when the card container exceeds 18rem. */}\n        <div className=\"font-semibold @sm/metric-card:text-3xl text-2xl text-foreground tracking-tight\">\n          {value}\n        </div>\n        {(delta !== undefined || hint !== undefined) && (\n          <div className=\"flex items-center gap-2 text-xs\">\n            {delta !== undefined && (\n              <span\n                className={cn(\n                  \"inline-flex items-center gap-1 font-medium\",\n                  trendColor(delta.trend, invertTrend),\n                )}\n                data-trend={delta.trend}\n              >\n                <TrendIcon trend={delta.trend} />\n                {delta.value}\n              </span>\n            )}\n            {hint !== undefined && <span className=\"text-muted-foreground\">{hint}</span>}\n          </div>\n        )}\n      </Card>\n    );\n  },\n);\nMetricCard.displayName = \"MetricCard\";\n"]}

package/dist/chunk-CGWIOIEO.js

@@ -1,27 +0,0 @@
-import { useInLiveRegion } from './chunk-UGKI466V.js';
-import { cn } from './chunk-EWDN56AS.js';
-import { forwardRef } from 'react';
-import { jsx } from 'react/jsx-runtime';
-
-var Skeleton = forwardRef(
-  ({ className, ...props }, ref) => {
-    const inLiveRegion = useInLiveRegion();
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        "data-slot": "skeleton",
-        ref,
-        role: inLiveRegion ? void 0 : "status",
-        "aria-live": inLiveRegion ? void 0 : "polite",
-        "aria-label": inLiveRegion ? void 0 : "Loading",
-        className: cn("animate-pulse rounded-md bg-muted", className),
-        ...props
-      }
-    );
-  }
-);
-Skeleton.displayName = "Skeleton";
-
-export { Skeleton };
-//# sourceMappingURL=chunk-CGWIOIEO.js.map
-//# sourceMappingURL=chunk-CGWIOIEO.js.map

package/dist/chunk-CGWIOIEO.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/primitives/skeleton/skeleton.tsx"],"names":[],"mappings":";;;;;AAuBA,IAAM,QAAA,GAAW,UAAA;AAAA,EACf,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,IAAS,GAAA,KAAQ;AAIhC,IAAA,MAAM,eAAe,eAAA,EAAgB;AACrC,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,WAAA,EAAU,UAAA;AAAA,QACV,GAAA;AAAA,QACA,IAAA,EAAM,eAAe,MAAA,GAAY,QAAA;AAAA,QACjC,WAAA,EAAW,eAAe,MAAA,GAAY,QAAA;AAAA,QACtC,YAAA,EAAY,eAAe,MAAA,GAAY,SAAA;AAAA,QACvC,SAAA,EAAW,EAAA,CAAG,mCAAA,EAAqC,SAAS,CAAA;AAAA,QAC3D,GAAG;AAAA;AAAA,KACN;AAAA,EAEJ;AACF;AACA,QAAA,CAAS,WAAA,GAAc,UAAA","file":"chunk-CGWIOIEO.js","sourcesContent":["import { forwardRef } from \"react\";\nimport type { HTMLAttributes } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\nimport { useInLiveRegion } from \"../../../lib/live-region-context.js\";\n\n/**\n * Skeleton — placeholder block shown while content is loading.\n *\n * Uses --muted as base + a subtle shimmer that respects the violet theme.\n * Compose multiple Skeletons to mirror your component layout while loading.\n *\n * Accessibility (LOW-004): the default `role=\"status\"` + `aria-live=\"polite\"`\n * announces \"Loading\" to screen readers. In loops or grids where many\n * Skeletons mount simultaneously, this can be noisy. Override per-instance\n * with `aria-live=\"off\"` and/or `aria-hidden` when only one container-level\n * loading announcement is desired:\n *\n *   <div role=\"status\" aria-live=\"polite\" aria-label=\"Loading deployments\">\n *     {placeholders.map(id => (\n *       <Skeleton key={id} aria-live=\"off\" aria-hidden=\"true\" className=\"h-8\" />\n *     ))}\n *   </div>\n */\nconst Skeleton = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => {\n    // T4.1 (MF-4): when nested inside a container live region (BuildLogStream,\n    // ChatThread, etc.), omit role/aria-live so AT doesn't announce every\n    // placeholder mount as a separate \"loading\" event.\n    const inLiveRegion = useInLiveRegion();\n    return (\n      <div\n        data-slot=\"skeleton\"\n        ref={ref}\n        role={inLiveRegion ? undefined : \"status\"}\n        aria-live={inLiveRegion ? undefined : \"polite\"}\n        aria-label={inLiveRegion ? undefined : \"Loading\"}\n        className={cn(\"animate-pulse rounded-md bg-muted\", className)}\n        {...props}\n      />\n    );\n  },\n);\nSkeleton.displayName = \"Skeleton\";\n\nexport { Skeleton };\n"]}