@stackframe/dashboard-ui-components 2.8.84 → 2.8.86

package/dist/components/analytics-chart/state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"state.js","names":["DEFAULT_FORMAT_KIND"],"sources":["../../../src/components/analytics-chart/state.ts"],"sourcesContent":["import { DEFAULT_FORMAT_KIND } from \"./format\";\nimport type {\n  AnalyticsChartAnnotationsLayer,\n  AnalyticsChartDataLayer,\n  AnalyticsChartLayer,\n  AnalyticsChartLayers,\n  AnalyticsChartLayerType,\n  AnalyticsChartSeries,\n  AnalyticsChartState,\n  AnalyticsChartStrokeStyle,\n  AnalyticsChartTimeseriesState,\n} from \"./types\";\n\nexport const STROKE_DASHARRAY: Record<AnalyticsChartStrokeStyle, string | undefined> = {\n  solid: undefined,\n  dashed: \"5 4\",\n  dotted: \"1 4\",\n};\n\nexport const EMPTY_SERIES: readonly AnalyticsChartSeries[] = [];\nexport const EMPTY_MATRIX: readonly (readonly number[])[] = [];\n\n/** Generic non-segmented defaults; demos swap in segment data. */\nexport const ANALYTICS_CHART_DEFAULT_LAYERS: AnalyticsChartLayers = [\n  {\n    id: \"primary\",\n    kind: \"primary\",\n    label: \"Current\",\n    visible: true,\n    color: \"#2563eb\",\n    segmented: false,\n    type: \"area\",\n    strokeStyle: \"solid\",\n    fillOpacity: 0.22,\n    inProgressFromIndex: null,\n  },\n  {\n    id: \"compare\",\n    kind: \"compare\",\n    label: \"Previous period\",\n    visible: true,\n    color: \"#f59e0b\",\n    segmented: false,\n    type: \"line\",\n    strokeStyle: \"dashed\",\n    inProgressFromIndex: null,\n  },\n  { id: \"annotations\", kind: \"annotations\", label: \"Annotations\", visible: true, color: \"#f59e0b\" },\n];\n\n/**\n * Default state for `AnalyticsChart`. ALWAYS spread from this when\n * initializing state; never build the state object by hand. Ships with\n * three pre-configured layers (primary, compare, annotations) — map over\n * `layers` to override individual ones.\n *\n * ```tsx\n * const [state, setState] = React.useState({\n *   ...ANALYTICS_CHART_DEFAULT_STATE,\n *   layers: ANALYTICS_CHART_DEFAULT_STATE.layers.map(l =>\n *     l.kind === \"compare\" ? { ...l, visible: false } : l\n *   ),\n * });\n * ```\n *\n * See the JSDoc on `AnalyticsChart` for the full contract, examples, and\n * the segment data format.\n */\nexport const ANALYTICS_CHART_DEFAULT_STATE: AnalyticsChartState = {\n  view: \"timeseries\",\n  layers: ANALYTICS_CHART_DEFAULT_LAYERS,\n  xFormatKind: DEFAULT_FORMAT_KIND.datetime,\n  yFormatKind: DEFAULT_FORMAT_KIND.short,\n  showGrid: true,\n  showXAxis: true,\n  showYAxis: true,\n  zoomRange: null,\n  pinnedIndex: null,\n};\n\nexport function findPrimaryLayer(layers: AnalyticsChartLayers): AnalyticsChartDataLayer | undefined {\n  const l = layers.find((x) => x.kind === \"primary\");\n  return l as AnalyticsChartDataLayer | undefined;\n}\nexport function findCompareLayer(layers: AnalyticsChartLayers): AnalyticsChartDataLayer | undefined {\n  const l = layers.find((x) => x.kind === \"compare\");\n  return l as AnalyticsChartDataLayer | undefined;\n}\nexport function findAnnotationsLayer(layers: AnalyticsChartLayers): AnalyticsChartAnnotationsLayer | undefined {\n  const l = layers.find((x) => x.kind === \"annotations\");\n  return l as AnalyticsChartAnnotationsLayer | undefined;\n}\n\nexport function findLayerById(\n  layers: AnalyticsChartLayers,\n  id: string,\n): AnalyticsChartLayer | undefined {\n  return layers.find((l) => l.id === id);\n}\n\nexport function isAnalyticsChartDataLayer(l: AnalyticsChartLayer): l is AnalyticsChartDataLayer {\n  return l.kind === \"primary\" || l.kind === \"compare\";\n}\n\nexport function isTimeseriesState(\n  state: AnalyticsChartState,\n): state is AnalyticsChartTimeseriesState {\n  return state.view === \"timeseries\";\n}\n\n/** Replace a single layer (looked up by id) with a new layer object. */\nexport function setLayerById(\n  layers: AnalyticsChartLayers,\n  id: string,\n  next: AnalyticsChartLayer,\n): AnalyticsChartLayers {\n  return layers.map((l) => (l.id === id ? next : l));\n}\n\n/** Shallow-patch fields on a layer by id. The patch type is deliberately\n * loose — callers are trusted to supply only fields the layer's\n * `kind`/`type` actually owns. */\nexport function patchLayerById(\n  layers: AnalyticsChartLayers,\n  id: string,\n  patch: Record<string, unknown>,\n): AnalyticsChartLayers {\n  return layers.map((l) => (l.id === id ? ({ ...l, ...patch } as AnalyticsChartLayer) : l));\n}\n\nexport type ResolvedDataLayerStyle = {\n  color: string,\n  type: AnalyticsChartLayerType,\n  strokeStyle: AnalyticsChartStrokeStyle,\n  fillOpacity: number,\n};\n\nexport function resolveDataLayerStyle(\n  layer: AnalyticsChartDataLayer,\n): ResolvedDataLayerStyle {\n  return {\n    color: layer.color,\n    type: layer.type,\n    // Bars have no stroke pattern — default to solid for the underline.\n    strokeStyle: layer.type === \"bar\" ? \"solid\" : layer.strokeStyle,\n    // Lines have no fill — default to 0 so gradient overlays sit flat.\n    fillOpacity: layer.type === \"line\" ? 0 : layer.fillOpacity,\n  };\n}\n\n/** Translate a layer's absolute `inProgressFromIndex` into a local index\n * inside the visible window. Returns `null` when the marker sits beyond\n * the visible window, `0` when it sits before the window (whole window\n * is dashed), or the clamped local index otherwise. */\nexport function computeLocalInProgressIdx(\n  absIdx: number | null | undefined,\n  visibleStart: number,\n  visibleEnd: number,\n): number | null {\n  if (absIdx == null) return null;\n  const local = absIdx - visibleStart;\n  if (local >= visibleEnd - visibleStart + 1) return null; // beyond window\n  if (local < 0) return 0; // before window — whole window is dashed\n  return local;\n}\n"],"mappings":";;;;;AAaA,MAAa,mBAA0E;CACrF,OAAO;CACP,QAAQ;CACR,QAAQ;CACT;AAED,MAAa,eAAgD,EAAE;AAC/D,MAAa,eAA+C,EAAE;;AAG9D,MAAa,iCAAuD;CAClE;EACE,IAAI;EACJ,MAAM;EACN,OAAO;EACP,SAAS;EACT,OAAO;EACP,WAAW;EACX,MAAM;EACN,aAAa;EACb,aAAa;EACb,qBAAqB;EACtB;CACD;EACE,IAAI;EACJ,MAAM;EACN,OAAO;EACP,SAAS;EACT,OAAO;EACP,WAAW;EACX,MAAM;EACN,aAAa;EACb,qBAAqB;EACtB;CACD;EAAE,IAAI;EAAe,MAAM;EAAe,OAAO;EAAe,SAAS;EAAM,OAAO;EAAW;CAClG;;;;;;;;;;;;;;;;;;;AAoBD,MAAa,gCAAqD;CAChE,MAAM;CACN,QAAQ;CACR,aAAaA,gCAAoB;CACjC,aAAaA,gCAAoB;CACjC,UAAU;CACV,WAAW;CACX,WAAW;CACX,WAAW;CACX,aAAa;CACd;AAED,SAAgB,iBAAiB,QAAmE;AAElG,QADU,OAAO,MAAM,MAAM,EAAE,SAAS,UAAU;;AAGpD,SAAgB,iBAAiB,QAAmE;AAElG,QADU,OAAO,MAAM,MAAM,EAAE,SAAS,UAAU;;AAGpD,SAAgB,qBAAqB,QAA0E;AAE7G,QADU,OAAO,MAAM,MAAM,EAAE,SAAS,cAAc;;AAIxD,SAAgB,cACd,QACA,IACiC;AACjC,QAAO,OAAO,MAAM,MAAM,EAAE,OAAO,GAAG;;AAGxC,SAAgB,0BAA0B,GAAsD;AAC9F,QAAO,EAAE,SAAS,aAAa,EAAE,SAAS;;AAG5C,SAAgB,kBACd,OACwC;AACxC,QAAO,MAAM,SAAS;;;AAIxB,SAAgB,aACd,QACA,IACA,MACsB;AACtB,QAAO,OAAO,KAAK,MAAO,EAAE,OAAO,KAAK,OAAO,EAAG;;;;;AAMpD,SAAgB,eACd,QACA,IACA,OACsB;AACtB,QAAO,OAAO,KAAK,MAAO,EAAE,OAAO,KAAM;EAAE,GAAG;EAAG,GAAG;EAAO,GAA2B,EAAG;;AAU3F,SAAgB,sBACd,OACwB;AACxB,QAAO;EACL,OAAO,MAAM;EACb,MAAM,MAAM;EAEZ,aAAa,MAAM,SAAS,QAAQ,UAAU,MAAM;EAEpD,aAAa,MAAM,SAAS,SAAS,IAAI,MAAM;EAChD;;;;;;AAOH,SAAgB,0BACd,QACA,cACA,YACe;AACf,KAAI,UAAU,KAAM,QAAO;CAC3B,MAAM,QAAQ,SAAS;AACvB,KAAI,SAAS,aAAa,eAAe,EAAG,QAAO;AACnD,KAAI,QAAQ,EAAG,QAAO;AACtB,QAAO"}

package/dist/components/analytics-chart/strings.d.ts

@@ -0,0 +1,33 @@
+//#region src/components/analytics-chart/strings.d.ts
+type AnalyticsChartStrings = {
+  /** Reset-zoom badge in the top-right corner when `state.zoomRange` is set. */resetZoom: string; /** Header label above the timestamps in the live range-brush popup. */
+  rangeLabel: string; /** Formatted day-count suffix used by the brush + action-bar. */
+  daysShort: (days: number) => string; /** "Zoom in" button inside the committed-range action bar. */
+  zoomIn: string; /** "Annotate" button inside the committed-range action bar. */
+  annotate: string; /** Placeholder for the annotation label input. */
+  annotationPlaceholder: string; /** `aria-label` for the annotation label input. */
+  annotationLabelAria: string; /** Save button in the annotation form. */
+  save: string; /** Cancel button in the annotation form. */
+  cancel: string; /** `aria-label` for the X button that clears the committed range. */
+  clearSelection: string; /** Pinned badge shown in the tooltip header when the tooltip is pinned. */
+  pinnedBadge: string; /** "Δ vs prev" row label in the tooltip (both segmented and flat modes). */
+  deltaVsPrev: string;
+  /** Suffix appended to a layer's label in the per-layer totals section
+   * (e.g. "Sign-ups" → "Sign-ups total"). */
+  layerTotalSuffix: string; /** Hint row shown in the tooltip while it is floating (not pinned). */
+  hintClickToPin: string; /** Hint row shown in the tooltip while it is pinned. */
+  hintClickAnywhereUnpin: string; /** Center-stat heading shown in the pie when no segment is hovered. */
+  pieTotalCenter: string; /** Label on the TrendPill in the pie center. */
+  pieVsPrev: string; /** `aria-label` for the PieChart SVG. */
+  pieAriaLabel: (ctx: {
+    segmentCount: number;
+    windowDays: number;
+  }) => string; /** Percentage-of-total caption shown under an active pie slice. */
+  piePercentOfTotal: (pct: number) => string;
+};
+declare const ANALYTICS_CHART_DEFAULT_STRINGS: AnalyticsChartStrings;
+/** Shallow merge — every field is a primitive or a flat function. */
+declare function resolveAnalyticsChartStrings(override: Partial<AnalyticsChartStrings> | undefined): AnalyticsChartStrings;
+//#endregion
+export { ANALYTICS_CHART_DEFAULT_STRINGS, AnalyticsChartStrings, resolveAnalyticsChartStrings };
+//# sourceMappingURL=strings.d.ts.map

package/dist/components/analytics-chart/strings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"strings.d.ts","names":[],"sources":["../../../src/components/analytics-chart/strings.ts"],"mappings":";KAAY,qBAAA;EAAA,8EAEV,SAAA;EAEA,UAAA,UAFA;EAIA,SAAA,GAAY,IAAA,qBAAZ;EAEA,MAAA;EAEA,QAAA,UAEA;EAAA,qBAAA,UAIA;EAFA,mBAAA,UAMA;EAJA,IAAA,UAQA;EANA,MAAA,UAWA;EATA,cAAA,UAaA;EAXA,WAAA,UAeA;EAbA,WAAA;EAa4C;;EAV5C,gBAAA,UAYoB;EAVpB,cAAA,UAU+B;EAR/B,sBAAA,UAgCD;EA9BC,cAAA,UAS4C;EAP5C,SAAA,UA+Bc;EA7Bd,YAAA,GAAe,GAAA;IAAO,YAAA;IAAsB,UAAA;EAAA,cA+B3C;EA7BD,iBAAA,GAAoB,GAAA;AAAA;AAAA,cAGT,+BAAA,EAAiC,qBAAA;;iBAwB9B,4BAAA,CACd,QAAA,EAAU,OAAA,CAAQ,qBAAA,gBACjB,qBAAA"}

package/dist/components/analytics-chart/strings.js

@@ -0,0 +1,37 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+//#region src/components/analytics-chart/strings.ts
+const ANALYTICS_CHART_DEFAULT_STRINGS = {
+	resetZoom: "Reset zoom",
+	rangeLabel: "Range",
+	daysShort: (days) => `${days}d`,
+	zoomIn: "Zoom in",
+	annotate: "Annotate",
+	annotationPlaceholder: "Label this range…",
+	annotationLabelAria: "Annotation label",
+	save: "Save",
+	cancel: "Cancel",
+	clearSelection: "Clear selection",
+	pinnedBadge: "Pinned",
+	deltaVsPrev: "Δ vs prev",
+	layerTotalSuffix: " total",
+	hintClickToPin: "Click to pin this point",
+	hintClickAnywhereUnpin: "Click anywhere · Esc\xA0to unpin",
+	pieTotalCenter: "Total",
+	pieVsPrev: "vs prev",
+	pieAriaLabel: ({ segmentCount, windowDays }) => `${segmentCount} segment share-of-total over the visible ${windowDays}-day range`,
+	piePercentOfTotal: (pct) => `${(pct * 100).toFixed(1)}% of total`
+};
+/** Shallow merge — every field is a primitive or a flat function. */
+function resolveAnalyticsChartStrings(override) {
+	if (!override) return ANALYTICS_CHART_DEFAULT_STRINGS;
+	return {
+		...ANALYTICS_CHART_DEFAULT_STRINGS,
+		...override
+	};
+}
+
+//#endregion
+exports.ANALYTICS_CHART_DEFAULT_STRINGS = ANALYTICS_CHART_DEFAULT_STRINGS;
+exports.resolveAnalyticsChartStrings = resolveAnalyticsChartStrings;
+//# sourceMappingURL=strings.js.map

package/dist/components/analytics-chart/strings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"strings.js","names":[],"sources":["../../../src/components/analytics-chart/strings.ts"],"sourcesContent":["export type AnalyticsChartStrings = {\n  /** Reset-zoom badge in the top-right corner when `state.zoomRange` is set. */\n  resetZoom: string,\n  /** Header label above the timestamps in the live range-brush popup. */\n  rangeLabel: string,\n  /** Formatted day-count suffix used by the brush + action-bar. */\n  daysShort: (days: number) => string,\n  /** \"Zoom in\" button inside the committed-range action bar. */\n  zoomIn: string,\n  /** \"Annotate\" button inside the committed-range action bar. */\n  annotate: string,\n  /** Placeholder for the annotation label input. */\n  annotationPlaceholder: string,\n  /** `aria-label` for the annotation label input. */\n  annotationLabelAria: string,\n  /** Save button in the annotation form. */\n  save: string,\n  /** Cancel button in the annotation form. */\n  cancel: string,\n  /** `aria-label` for the X button that clears the committed range. */\n  clearSelection: string,\n  /** Pinned badge shown in the tooltip header when the tooltip is pinned. */\n  pinnedBadge: string,\n  /** \"Δ vs prev\" row label in the tooltip (both segmented and flat modes). */\n  deltaVsPrev: string,\n  /** Suffix appended to a layer's label in the per-layer totals section\n   * (e.g. \"Sign-ups\" → \"Sign-ups total\"). */\n  layerTotalSuffix: string,\n  /** Hint row shown in the tooltip while it is floating (not pinned). */\n  hintClickToPin: string,\n  /** Hint row shown in the tooltip while it is pinned. */\n  hintClickAnywhereUnpin: string,\n  /** Center-stat heading shown in the pie when no segment is hovered. */\n  pieTotalCenter: string,\n  /** Label on the TrendPill in the pie center. */\n  pieVsPrev: string,\n  /** `aria-label` for the PieChart SVG. */\n  pieAriaLabel: (ctx: { segmentCount: number, windowDays: number }) => string,\n  /** Percentage-of-total caption shown under an active pie slice. */\n  piePercentOfTotal: (pct: number) => string,\n};\n\nexport const ANALYTICS_CHART_DEFAULT_STRINGS: AnalyticsChartStrings = {\n  resetZoom: \"Reset zoom\",\n  rangeLabel: \"Range\",\n  daysShort: (days) => `${days}d`,\n  zoomIn: \"Zoom in\",\n  annotate: \"Annotate\",\n  annotationPlaceholder: \"Label this range…\",\n  annotationLabelAria: \"Annotation label\",\n  save: \"Save\",\n  cancel: \"Cancel\",\n  clearSelection: \"Clear selection\",\n  pinnedBadge: \"Pinned\",\n  deltaVsPrev: \"Δ vs prev\",\n  layerTotalSuffix: \" total\",\n  hintClickToPin: \"Click to pin this point\",\n  hintClickAnywhereUnpin: \"Click anywhere · Esc\\u00A0to unpin\",\n  pieTotalCenter: \"Total\",\n  pieVsPrev: \"vs prev\",\n  pieAriaLabel: ({ segmentCount, windowDays }) =>\n    `${segmentCount} segment share-of-total over the visible ${windowDays}-day range`,\n  piePercentOfTotal: (pct) => `${(pct * 100).toFixed(1)}% of total`,\n};\n\n/** Shallow merge — every field is a primitive or a flat function. */\nexport function resolveAnalyticsChartStrings(\n  override: Partial<AnalyticsChartStrings> | undefined,\n): AnalyticsChartStrings {\n  if (!override) return ANALYTICS_CHART_DEFAULT_STRINGS;\n  return { ...ANALYTICS_CHART_DEFAULT_STRINGS, ...override };\n}\n"],"mappings":";;;AA0CA,MAAa,kCAAyD;CACpE,WAAW;CACX,YAAY;CACZ,YAAY,SAAS,GAAG,KAAK;CAC7B,QAAQ;CACR,UAAU;CACV,uBAAuB;CACvB,qBAAqB;CACrB,MAAM;CACN,QAAQ;CACR,gBAAgB;CAChB,aAAa;CACb,aAAa;CACb,kBAAkB;CAClB,gBAAgB;CAChB,wBAAwB;CACxB,gBAAgB;CAChB,WAAW;CACX,eAAe,EAAE,cAAc,iBAC7B,GAAG,aAAa,2CAA2C,WAAW;CACxE,oBAAoB,QAAQ,IAAI,MAAM,KAAK,QAAQ,EAAE,CAAC;CACvD;;AAGD,SAAgB,6BACd,UACuB;AACvB,KAAI,CAAC,SAAU,QAAO;AACtB,QAAO;EAAE,GAAG;EAAiC,GAAG;EAAU"}

package/dist/components/analytics-chart/types.d.ts

@@ -0,0 +1,157 @@
+//#region src/components/analytics-chart/types.d.ts
+/** Time-series point. `values` is keyed by layer id. */
+type Point = {
+  ts: number;
+  values: Record<string, number>;
+};
+/** Missing or non-finite values become 0. */
+declare function pointValue(p: Point, id: string): number;
+/** Sanitize a string into a valid CSS `<ident>` token.
+ *  Replaces characters not allowed in CSS identifiers (like `$`, spaces,
+ *  slashes, dots) with underscores. Used to build safe `var(--color-xxx)`
+ *  custom property names from arbitrary segment keys. */
+declare function cssIdent(raw: string): string;
+type Annotation = {
+  index: number;
+  label: string;
+  description: string;
+};
+/** Breakdown category definition — `{ key, label }` tuple. */
+type AnalyticsChartSeries = {
+  key: string;
+  label: string;
+};
+type FormatKindType = "numeric" | "short" | "currency" | "duration" | "datetime" | "percent";
+type FormatKindNumeric = {
+  type: "numeric"; /** Locale used for grouping and digit separators. Defaults to "en-US". */
+  locale?: string; /** Fixed decimal places (0-4). Defaults to 0. */
+  decimals?: number;
+};
+type FormatKindShort = {
+  type: "short"; /** Decimal places after the unit suffix (1.2K vs 1.20K). Defaults to 1. */
+  precision?: number;
+  locale?: string;
+};
+type FormatKindCurrency = {
+  type: "currency"; /** ISO 4217 code. Defaults to "USD". */
+  currency?: string; /** Divisor applied before formatting — e.g. 100 for cents → dollars. Defaults to 1. */
+  divisor?: number;
+  locale?: string;
+};
+type FormatKindDuration = {
+  type: "duration"; /** Source unit of the input value. Defaults to "s". */
+  unit?: "ms" | "s" | "m" | "h"; /** Show the smallest unit even when zero. Defaults to false. */
+  showZero?: boolean;
+};
+type FormatKindDatetime = {
+  type: "datetime"; /** Render style. Defaults to "short". */
+  style?: "short" | "long" | "iso" | "relative";
+  locale?: string;
+};
+type FormatKindPercent = {
+  type: "percent";
+  /** How to interpret the input value:
+   * - "fraction" → 0..1     → multiply by 100  (default)
+   * - "basis"    → 0..10000 → divide by 100
+   * - "whole"    → 0..100   → no scaling
+   */
+  source?: "fraction" | "basis" | "whole"; /** Decimal places. Defaults to 1. */
+  decimals?: number;
+};
+type FormatKind = FormatKindNumeric | FormatKindShort | FormatKindCurrency | FormatKindDuration | FormatKindDatetime | FormatKindPercent;
+type AnalyticsChartView = "timeseries" | "pie";
+type AnalyticsChartLayerType = "line" | "area" | "bar";
+type AnalyticsChartStrokeStyle = "solid" | "dashed" | "dotted";
+type AnalyticsChartDataLayerCommon = {
+  id: string;
+  kind: "primary" | "compare";
+  label: string;
+  visible: boolean;
+  color: string;
+  segmented: boolean;
+  /** Per-day per-category values. Outer index is the day (matches the
+   * chart data array index); inner index is the category (matches
+   * `segmentSeries`). Rows should sum to `point.values[layer.id]`. */
+  segments?: readonly (readonly number[])[];
+  /** Breakdown category definitions ordered to match the inner index of
+   * `segments`. */
+  segmentSeries?: readonly AnalyticsChartSeries[];
+  /** Absolute index into the full data array at which this layer's values
+   * become "in progress" (incomplete and still changing). Points from this
+   * index onward render with a dashed overlay so users don't panic at a
+   * half-filled bucket. Applies to line and area rendering only. */
+  inProgressFromIndex?: number | null;
+};
+type AnalyticsChartLineLayer = AnalyticsChartDataLayerCommon & {
+  type: "line";
+  strokeStyle: AnalyticsChartStrokeStyle;
+};
+type AnalyticsChartAreaLayer = AnalyticsChartDataLayerCommon & {
+  type: "area";
+  strokeStyle: AnalyticsChartStrokeStyle;
+  fillOpacity: number;
+};
+type AnalyticsChartBarLayer = AnalyticsChartDataLayerCommon & {
+  type: "bar";
+  fillOpacity: number;
+};
+type AnalyticsChartDataLayer = AnalyticsChartLineLayer | AnalyticsChartAreaLayer | AnalyticsChartBarLayer;
+type AnalyticsChartAnnotationsLayer = {
+  id: string;
+  kind: "annotations";
+  label: string;
+  visible: boolean;
+  color: string;
+};
+type AnalyticsChartLayer = AnalyticsChartDataLayer | AnalyticsChartAnnotationsLayer;
+type AnalyticsChartLayers = readonly AnalyticsChartLayer[];
+type AnalyticsChartTimeseriesState = {
+  view: "timeseries";
+  layers: AnalyticsChartLayers; /** Format applied to every x-axis value. Defaults to `datetime / short`. */
+  xFormatKind: FormatKind; /** Format applied to every y-axis value. Defaults to `short`. */
+  yFormatKind: FormatKind;
+  showGrid: boolean;
+  showXAxis: boolean;
+  showYAxis: boolean;
+  zoomRange: [number, number] | null;
+  pinnedIndex: number | null;
+};
+type AnalyticsChartPieState = {
+  view: "pie";
+  layers: AnalyticsChartLayers;
+  xFormatKind: FormatKind;
+  yFormatKind: FormatKind;
+};
+type AnalyticsChartState = AnalyticsChartTimeseriesState | AnalyticsChartPieState;
+type AnalyticsChartDelta = {
+  pct: number | null;
+  sign: "up" | "down" | "flat" | "na";
+};
+/** Grouped pie config — collapses the formerly-separate
+ * `pieInnerRadius` / `pieOuterRadius` / `pieCompareInnerRadius` /
+ * `pieCompareOuterRadius` / `pieContainerClassName` props into one object. */
+type AnalyticsChartPieProps = {
+  innerRadius?: number;
+  outerRadius?: number;
+  compareInnerRadius?: number;
+  compareOuterRadius?: number;
+  className?: string;
+};
+type AnalyticsChartSegmentRamp = {
+  kind: "procedural"; /** HSL hue (0-360). */
+  hue: number; /** HSL saturation percent (0-100). */
+  sat: number; /** Lightness range `[start, end]` for the light theme (0-100). */
+  shadeRangeLight: [number, number]; /** Lightness range `[start, end]` for the dark theme (0-100). */
+  shadeRangeDark: [number, number];
+} | {
+  kind: "explicit"; /** Concrete light-theme color list. Indexed by segment. */
+  light: readonly string[]; /** Concrete dark-theme color list. Indexed by segment. */
+  dark: readonly string[];
+};
+type AnalyticsChartPalette = {
+  /** Color ramp for the primary data layer (current period). */primary: AnalyticsChartSegmentRamp; /** Color ramp for the compare data layer (previous period). */
+  compare: AnalyticsChartSegmentRamp;
+};
+//#endregion
+export { AnalyticsChartAnnotationsLayer, AnalyticsChartAreaLayer, AnalyticsChartBarLayer, AnalyticsChartDataLayer, AnalyticsChartDelta, AnalyticsChartLayer, AnalyticsChartLayerType, AnalyticsChartLayers, AnalyticsChartLineLayer, AnalyticsChartPalette, AnalyticsChartPieProps, AnalyticsChartPieState, AnalyticsChartSegmentRamp, AnalyticsChartSeries, AnalyticsChartState, AnalyticsChartStrokeStyle, AnalyticsChartTimeseriesState, AnalyticsChartView, Annotation, FormatKind, FormatKindCurrency, FormatKindDatetime, FormatKindDuration, FormatKindNumeric, FormatKindPercent, FormatKindShort, FormatKindType, Point, cssIdent, pointValue };
+//# sourceMappingURL=types.d.ts.map

package/dist/components/analytics-chart/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","names":[],"sources":["../../../src/components/analytics-chart/types.ts"],"mappings":";;KACY,KAAA;EACV,EAAA;EACA,MAAA,EAAQ,MAAA;AAAA;;iBAIM,UAAA,CAAW,CAAA,EAAG,KAAA,EAAO,EAAA;;;;AAArC;iBASgB,QAAA,CAAS,GAAA;AAAA,KAOb,UAAA;EACV,KAAA;EACA,KAAA;EACA,WAAA;AAAA;;KAIU,oBAAA;EACV,GAAA;EACA,KAAA;AAAA;AAAA,KAGU,cAAA;AAAA,KAQA,iBAAA;EACV,IAAA,aArBoB;EAuBpB,MAAA,WAvBoB;EAyBpB,QAAA;AAAA;AAAA,KAEU,eAAA;EACV,IAAA,WAzBW;EA2BX,SAAA;EACA,MAAA;AAAA;AAAA,KAEU,kBAAA;EACV,IAAA,cAtBU;EAwBV,QAAA;EAEA,OAAA;EACA,MAAA;AAAA;AAAA,KAEU,kBAAA;EACV,IAAA,cAtB2B;EAwB3B,IAAA,2BArBA;EAuBA,QAAA;AAAA;AAAA,KAEU,kBAAA;EACV,IAAA,cAtByB;EAwBzB,KAAA;EACA,MAAA;AAAA;AAAA,KAEU,iBAAA;EACV,IAAA;EAxBM;;AAER;;;EA4BE,MAAA,mCA3BA;EA6BA,QAAA;AAAA;AAAA,KAGU,UAAA,GACR,iBAAA,GACA,eAAA,GACA,kBAAA,GACA,kBAAA,GACA,kBAAA,GACA,iBAAA;AAAA,KAEQ,kBAAA;AAAA,KACA,uBAAA;AAAA,KACA,yBAAA;AAAA,KAEP,6BAAA;EACH,EAAA;EACA,IAAA;EACA,KAAA;EACA,OAAA;EACA,KAAA;EACA,SAAA;EAtCQ;AAEV;;EAwCE,QAAA;EAxC4B;;EA2C5B,aAAA,YAAyB,oBAAA;EAvCzB;;;AAEF;EA0CE,mBAAA;AAAA;AAAA,KAEU,uBAAA,GAA0B,6BAAA;EACpC,IAAA;EACA,WAAA,EAAa,yBAAA;AAAA;AAAA,KAEH,uBAAA,GAA0B,6BAAA;EACpC,IAAA;EACA,WAAA,EAAa,yBAAA;EACb,WAAA;AAAA;AAAA,KAEU,sBAAA,GAAyB,6BAAA;EACnC,IAAA;EACA,WAAA;AAAA;AAAA,KAGU,uBAAA,GACR,uBAAA,GACA,uBAAA,GACA,sBAAA;AAAA,KAEQ,8BAAA;EACV,EAAA;EACA,IAAA;EACA,KAAA;EACA,OAAA;EACA,KAAA;AAAA;AAAA,KAGU,mBAAA,GACR,uBAAA,GACA,8BAAA;AAAA,KAEQ,oBAAA,YAAgC,mBAAA;AAAA,KAEhC,6BAAA;EACV,IAAA;EACA,MAAA,EAAQ,oBAAA,EA3DoB;EA6D5B,WAAA,EAAa,UAAA,EA7De;EA+D5B,WAAA,EAAa,UAAA;EACb,QAAA;EACA,SAAA;EACA,SAAA;EACA,SAAA;EACA,WAAA;AAAA;AAAA,KAEU,sBAAA;EACV,IAAA;EACA,MAAA,EAAQ,oBAAA;EACR,WAAA,EAAa,UAAA;EACb,WAAA,EAAa,UAAA;AAAA;AAAA,KAEH,mBAAA,GACR,6BAAA,GACA,sBAAA;AAAA,KAEQ,mBAAA;EACV,GAAA;EACA,IAAA;AAAA;;;;KAMU,sBAAA;EACV,WAAA;EACA,WAAA;EACA,kBAAA;EACA,kBAAA;EACA,SAAA;AAAA;AAAA,KAGU,yBAAA;EAER,IAAA,gBAxEoC;EA0EpC,GAAA,UA3EF;EA6EE,GAAA,UA5EW;EA8EX,eAAA,oBA9EoC;EAgFpC,cAAA;AAAA;EAGA,IAAA,cA/EoC;EAiFpC,KAAA,qBAlFF;EAoFE,IAAA;AAAA;AAAA,KAGQ,qBAAA;EArFC,8DAuFX,OAAA,EAAS,yBAAA,EArFC;EAuFV,OAAA,EAAS,yBAAA;AAAA"}

package/dist/components/analytics-chart/types.js

@@ -0,0 +1,21 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+//#region src/components/analytics-chart/types.ts
+/** Missing or non-finite values become 0. */
+function pointValue(p, id) {
+	const v = p.values[id];
+	return typeof v === "number" && Number.isFinite(v) ? v : 0;
+}
+/** Sanitize a string into a valid CSS `<ident>` token.
+*  Replaces characters not allowed in CSS identifiers (like `$`, spaces,
+*  slashes, dots) with underscores. Used to build safe `var(--color-xxx)`
+*  custom property names from arbitrary segment keys. */
+function cssIdent(raw) {
+	const cleaned = raw.replace(/[^a-zA-Z0-9_-]/g, "_");
+	return /^\d/.test(cleaned) ? `_${cleaned}` : cleaned;
+}
+
+//#endregion
+exports.cssIdent = cssIdent;
+exports.pointValue = pointValue;
+//# sourceMappingURL=types.js.map

package/dist/components/analytics-chart/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/components/analytics-chart/types.ts"],"sourcesContent":["/** Time-series point. `values` is keyed by layer id. */\nexport type Point = {\n  ts: number,\n  values: Record<string, number>,\n};\n\n/** Missing or non-finite values become 0. */\nexport function pointValue(p: Point, id: string): number {\n  const v = p.values[id];\n  return typeof v === \"number\" && Number.isFinite(v) ? v : 0;\n}\n\n/** Sanitize a string into a valid CSS `<ident>` token.\n *  Replaces characters not allowed in CSS identifiers (like `$`, spaces,\n *  slashes, dots) with underscores. Used to build safe `var(--color-xxx)`\n *  custom property names from arbitrary segment keys. */\nexport function cssIdent(raw: string): string {\n  // Replace everything that isn't a letter, digit, hyphen, or underscore.\n  // Prefix with `_` if the result starts with a digit (not valid as ident start).\n  const cleaned = raw.replace(/[^a-zA-Z0-9_-]/g, \"_\");\n  return /^\\d/.test(cleaned) ? `_${cleaned}` : cleaned;\n}\n\nexport type Annotation = {\n  index: number,\n  label: string,\n  description: string,\n};\n\n/** Breakdown category definition — `{ key, label }` tuple. */\nexport type AnalyticsChartSeries = {\n  key: string,\n  label: string,\n};\n\nexport type FormatKindType =\n  | \"numeric\"\n  | \"short\"\n  | \"currency\"\n  | \"duration\"\n  | \"datetime\"\n  | \"percent\";\n\nexport type FormatKindNumeric = {\n  type: \"numeric\",\n  /** Locale used for grouping and digit separators. Defaults to \"en-US\". */\n  locale?: string,\n  /** Fixed decimal places (0-4). Defaults to 0. */\n  decimals?: number,\n};\nexport type FormatKindShort = {\n  type: \"short\",\n  /** Decimal places after the unit suffix (1.2K vs 1.20K). Defaults to 1. */\n  precision?: number,\n  locale?: string,\n};\nexport type FormatKindCurrency = {\n  type: \"currency\",\n  /** ISO 4217 code. Defaults to \"USD\". */\n  currency?: string,\n  /** Divisor applied before formatting — e.g. 100 for cents → dollars. Defaults to 1. */\n  divisor?: number,\n  locale?: string,\n};\nexport type FormatKindDuration = {\n  type: \"duration\",\n  /** Source unit of the input value. Defaults to \"s\". */\n  unit?: \"ms\" | \"s\" | \"m\" | \"h\",\n  /** Show the smallest unit even when zero. Defaults to false. */\n  showZero?: boolean,\n};\nexport type FormatKindDatetime = {\n  type: \"datetime\",\n  /** Render style. Defaults to \"short\". */\n  style?: \"short\" | \"long\" | \"iso\" | \"relative\",\n  locale?: string,\n};\nexport type FormatKindPercent = {\n  type: \"percent\",\n  /** How to interpret the input value:\n   * - \"fraction\" → 0..1     → multiply by 100  (default)\n   * - \"basis\"    → 0..10000 → divide by 100\n   * - \"whole\"    → 0..100   → no scaling\n   */\n  source?: \"fraction\" | \"basis\" | \"whole\",\n  /** Decimal places. Defaults to 1. */\n  decimals?: number,\n};\n\nexport type FormatKind =\n  | FormatKindNumeric\n  | FormatKindShort\n  | FormatKindCurrency\n  | FormatKindDuration\n  | FormatKindDatetime\n  | FormatKindPercent;\n\nexport type AnalyticsChartView = \"timeseries\" | \"pie\";\nexport type AnalyticsChartLayerType = \"line\" | \"area\" | \"bar\";\nexport type AnalyticsChartStrokeStyle = \"solid\" | \"dashed\" | \"dotted\";\n\ntype AnalyticsChartDataLayerCommon = {\n  id: string,\n  kind: \"primary\" | \"compare\",\n  label: string,\n  visible: boolean,\n  color: string,\n  segmented: boolean,\n  /** Per-day per-category values. Outer index is the day (matches the\n   * chart data array index); inner index is the category (matches\n   * `segmentSeries`). Rows should sum to `point.values[layer.id]`. */\n  segments?: readonly (readonly number[])[],\n  /** Breakdown category definitions ordered to match the inner index of\n   * `segments`. */\n  segmentSeries?: readonly AnalyticsChartSeries[],\n  /** Absolute index into the full data array at which this layer's values\n   * become \"in progress\" (incomplete and still changing). Points from this\n   * index onward render with a dashed overlay so users don't panic at a\n   * half-filled bucket. Applies to line and area rendering only. */\n  inProgressFromIndex?: number | null,\n};\nexport type AnalyticsChartLineLayer = AnalyticsChartDataLayerCommon & {\n  type: \"line\",\n  strokeStyle: AnalyticsChartStrokeStyle,\n};\nexport type AnalyticsChartAreaLayer = AnalyticsChartDataLayerCommon & {\n  type: \"area\",\n  strokeStyle: AnalyticsChartStrokeStyle,\n  fillOpacity: number,\n};\nexport type AnalyticsChartBarLayer = AnalyticsChartDataLayerCommon & {\n  type: \"bar\",\n  fillOpacity: number,\n};\n\nexport type AnalyticsChartDataLayer =\n  | AnalyticsChartLineLayer\n  | AnalyticsChartAreaLayer\n  | AnalyticsChartBarLayer;\n\nexport type AnalyticsChartAnnotationsLayer = {\n  id: string,\n  kind: \"annotations\",\n  label: string,\n  visible: boolean,\n  color: string,\n};\n\nexport type AnalyticsChartLayer =\n  | AnalyticsChartDataLayer\n  | AnalyticsChartAnnotationsLayer;\n\nexport type AnalyticsChartLayers = readonly AnalyticsChartLayer[];\n\nexport type AnalyticsChartTimeseriesState = {\n  view: \"timeseries\",\n  layers: AnalyticsChartLayers,\n  /** Format applied to every x-axis value. Defaults to `datetime / short`. */\n  xFormatKind: FormatKind,\n  /** Format applied to every y-axis value. Defaults to `short`. */\n  yFormatKind: FormatKind,\n  showGrid: boolean,\n  showXAxis: boolean,\n  showYAxis: boolean,\n  zoomRange: [number, number] | null,\n  pinnedIndex: number | null,\n};\nexport type AnalyticsChartPieState = {\n  view: \"pie\",\n  layers: AnalyticsChartLayers,\n  xFormatKind: FormatKind,\n  yFormatKind: FormatKind,\n};\nexport type AnalyticsChartState =\n  | AnalyticsChartTimeseriesState\n  | AnalyticsChartPieState;\n\nexport type AnalyticsChartDelta = {\n  pct: number | null,\n  sign: \"up\" | \"down\" | \"flat\" | \"na\",\n};\n\n/** Grouped pie config — collapses the formerly-separate\n * `pieInnerRadius` / `pieOuterRadius` / `pieCompareInnerRadius` /\n * `pieCompareOuterRadius` / `pieContainerClassName` props into one object. */\nexport type AnalyticsChartPieProps = {\n  innerRadius?: number,\n  outerRadius?: number,\n  compareInnerRadius?: number,\n  compareOuterRadius?: number,\n  className?: string,\n};\n\nexport type AnalyticsChartSegmentRamp =\n  | {\n    kind: \"procedural\",\n    /** HSL hue (0-360). */\n    hue: number,\n    /** HSL saturation percent (0-100). */\n    sat: number,\n    /** Lightness range `[start, end]` for the light theme (0-100). */\n    shadeRangeLight: [number, number],\n    /** Lightness range `[start, end]` for the dark theme (0-100). */\n    shadeRangeDark: [number, number],\n  }\n  | {\n    kind: \"explicit\",\n    /** Concrete light-theme color list. Indexed by segment. */\n    light: readonly string[],\n    /** Concrete dark-theme color list. Indexed by segment. */\n    dark: readonly string[],\n  };\n\nexport type AnalyticsChartPalette = {\n  /** Color ramp for the primary data layer (current period). */\n  primary: AnalyticsChartSegmentRamp,\n  /** Color ramp for the compare data layer (previous period). */\n  compare: AnalyticsChartSegmentRamp,\n};\n"],"mappings":";;;;AAOA,SAAgB,WAAW,GAAU,IAAoB;CACvD,MAAM,IAAI,EAAE,OAAO;AACnB,QAAO,OAAO,MAAM,YAAY,OAAO,SAAS,EAAE,GAAG,IAAI;;;;;;AAO3D,SAAgB,SAAS,KAAqB;CAG5C,MAAM,UAAU,IAAI,QAAQ,mBAAmB,IAAI;AACnD,QAAO,MAAM,KAAK,QAAQ,GAAG,IAAI,YAAY"}

package/dist/components/badge.d.ts

@@ -12,6 +12,22 @@ type DesignBadgeProps = {
   size?: DesignBadgeSize; /** What to display: "both" (default), "text" (label only), or "icon" (icon only; requires icon prop). */
   contentMode?: DesignBadgeContentMode;
 };
+/**
+ * Small pill used for status tags, roles, categories, and other short
+ * labels. Not a variant-based component — pick a semantic `color` and
+ * optionally pass an `icon` (as a component type, not a rendered node).
+ *
+ * ```tsx
+ * <DesignBadge label="Verified" color="green" icon={CheckIcon} />
+ * <DesignBadge label="Beta" color="purple" />
+ * <DesignBadge label="Error" color="red" size="sm" />
+ * ```
+ *
+ * Notes:
+ * - Props are `label` + `color`, NOT `variant` + children.
+ * - `color` is one of: `"blue" | "cyan" | "purple" | "green" | "orange" | "red"`.
+ * - `icon` is optional but, if set via `contentMode: "icon"`, is required.
+ */
 declare function DesignBadge({
   label,
   color,

package/dist/components/badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"badge.d.ts","names":[],"sources":["../../src/components/badge.tsx"],"mappings":";;;KAIY,gBAAA;AAAA,KACA,eAAA;;KAoBA,sBAAA;AAAA,KAEA,gBAAA;EACV,KAAA;EACA,KAAA,EAAO,gBAAA;EACP,IAAA,GAAO,KAAA,CAAM,WAAA;EACb,IAAA,GAAO,eAAA,EA1BkB;EA4BzB,WAAA,GAAc,sBAAA;AAAA;AAAA,iBA2BA,WAAA,CAAA;EACd,KAAA;EACA,KAAA;EACA,IAAA;EACA,IAAA;EACA;AAAA,GACC,gBAAA,GAAgB,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"badge.d.ts","names":[],"sources":["../../src/components/badge.tsx"],"mappings":";;;KAIY,gBAAA;AAAA,KACA,eAAA;;KAoBA,sBAAA;AAAA,KAEA,gBAAA;EACV,KAAA;EACA,KAAA,EAAO,gBAAA;EACP,IAAA,GAAO,KAAA,CAAM,WAAA;EACb,IAAA,GAAO,eAAA,EA1BkB;EA4BzB,WAAA,GAAc,sBAAA;AAAA;;AARhB;;;;;AAEA;;;;;;;;;;iBAiDgB,WAAA,CAAA;EACd,KAAA;EACA,KAAA;EACA,IAAA;EACA,IAAA;EACA;AAAA,GACC,gBAAA,GAAgB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/badge.js

@@ -41,6 +41,22 @@ function getShowLabelShowIcon(contentMode, hasIcon) {
 		}
 	}
 }
+/**
+* Small pill used for status tags, roles, categories, and other short
+* labels. Not a variant-based component — pick a semantic `color` and
+* optionally pass an `icon` (as a component type, not a rendered node).
+*
+* ```tsx
+* <DesignBadge label="Verified" color="green" icon={CheckIcon} />
+* <DesignBadge label="Beta" color="purple" />
+* <DesignBadge label="Error" color="red" size="sm" />
+* ```
+*
+* Notes:
+* - Props are `label` + `color`, NOT `variant` + children.
+* - `color` is one of: `"blue" | "cyan" | "purple" | "green" | "orange" | "red"`.
+* - `icon` is optional but, if set via `contentMode: "icon"`, is required.
+*/
 function DesignBadge({ label, color, icon, size = "md", contentMode = "both" }) {
 	const Icon = icon;
 	const { showLabel, showIcon } = getShowLabelShowIcon(contentMode, !!Icon);

package/dist/components/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","names":[],"sources":["../../src/components/badge.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"@stackframe/stack-ui\";\n\nexport type DesignBadgeColor = \"blue\" | \"cyan\" | \"purple\" | \"green\" | \"orange\" | \"red\";\nexport type DesignBadgeSize = \"sm\" | \"md\";\n\nconst badgeStyles = new Map<DesignBadgeColor, string>([\n  [\"blue\", \"text-blue-700 dark:text-blue-400 bg-blue-500/20 dark:bg-blue-500/10 ring-1 ring-blue-500/30 dark:ring-blue-500/20\"],\n  [\"cyan\", \"text-cyan-700 dark:text-cyan-400 bg-cyan-500/20 dark:bg-cyan-500/10 ring-1 ring-cyan-500/30 dark:ring-cyan-500/20\"],\n  [\"purple\", \"text-purple-700 dark:text-purple-400 bg-purple-500/20 dark:bg-purple-500/10 ring-1 ring-purple-500/30 dark:ring-purple-500/20\"],\n  [\"green\", \"text-emerald-700 dark:text-emerald-400 bg-emerald-500/20 dark:bg-emerald-500/10 ring-1 ring-emerald-500/30 dark:ring-emerald-500/20\"],\n  [\"orange\", \"text-amber-700 dark:text-amber-300 bg-amber-500/20 dark:bg-amber-500/10 ring-1 ring-amber-500/30 dark:ring-amber-500/20\"],\n  [\"red\", \"text-red-700 dark:text-red-400 bg-red-500/20 dark:bg-red-500/10 ring-1 ring-red-500/30 dark:ring-red-500/20\"],\n]);\n\nfunction getMapValueOrThrow<TKey, TValue>(map: Map<TKey, TValue>, key: TKey, mapName: string) {\n  const value = map.get(key);\n  if (!value) {\n    throw new Error(`Missing ${mapName} entry for key \"${String(key)}\"`);\n  }\n  return value;\n}\n\n/** At least one of showLabel or showIcon must be true. */\nexport type DesignBadgeContentMode = \"both\" | \"text\" | \"icon\";\n\nexport type DesignBadgeProps = {\n  label: string,\n  color: DesignBadgeColor,\n  icon?: React.ElementType,\n  size?: DesignBadgeSize,\n  /** What to display: \"both\" (default), \"text\" (label only), or \"icon\" (icon only; requires icon prop). */\n  contentMode?: DesignBadgeContentMode,\n};\n\nfunction getShowLabelShowIcon(\n  contentMode: DesignBadgeContentMode,\n  hasIcon: boolean,\n): { showLabel: boolean, showIcon: boolean } {\n  switch (contentMode) {\n    case \"both\": {\n      return { showLabel: true, showIcon: hasIcon };\n    }\n    case \"text\": {\n      return { showLabel: true, showIcon: false };\n    }\n    case \"icon\": {\n      if (!hasIcon) {\n        throw new Error(\"DesignBadge contentMode 'icon' requires the icon prop to be provided.\");\n      }\n      return { showLabel: false, showIcon: true };\n    }\n    default: {\n      const _exhaustive: never = contentMode;\n      throw new Error(`Unknown contentMode: ${String(_exhaustive)}`);\n    }\n  }\n}\n\nexport function DesignBadge({\n  label,\n  color,\n  icon,\n  size = \"md\",\n  contentMode = \"both\",\n}: DesignBadgeProps) {\n  const Icon = icon;\n  const { showLabel, showIcon } = getShowLabelShowIcon(contentMode, !!Icon);\n  if (!showLabel && !showIcon) {\n    throw new Error(\"DesignBadge must show at least label or icon.\");\n  }\n  const sizeClasses = size === \"sm\"\n    ? \"px-2 py-0.5 text-[10px]\"\n    : \"px-2.5 py-1 text-[11px]\";\n  const colorClasses = getMapValueOrThrow(badgeStyles, color, \"badgeStyles\");\n\n  return (\n    <div\n      className={cn(\n        \"inline-flex items-center gap-1.5 rounded-full font-medium\",\n        colorClasses,\n        sizeClasses\n      )}\n      title={!showLabel ? label : undefined}\n      aria-label={label}\n    >\n      {showIcon && Icon && <Icon className=\"h-3 w-3\" />}\n      {showLabel ? label : null}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;AAOA,MAAM,cAAc,IAAI,IAA8B;CACpD,CAAC,QAAQ,oHAAoH;CAC7H,CAAC,QAAQ,oHAAoH;CAC7H,CAAC,UAAU,gIAAgI;CAC3I,CAAC,SAAS,sIAAsI;CAChJ,CAAC,UAAU,0HAA0H;CACrI,CAAC,OAAO,8GAA8G;CACvH,CAAC;AAEF,SAAS,mBAAiC,KAAwB,KAAW,SAAiB;CAC5F,MAAM,QAAQ,IAAI,IAAI,IAAI;AAC1B,KAAI,CAAC,MACH,OAAM,IAAI,MAAM,WAAW,QAAQ,kBAAkB,OAAO,IAAI,CAAC,GAAG;AAEtE,QAAO;;AAeT,SAAS,qBACP,aACA,SAC2C;AAC3C,SAAQ,aAAR;EACE,KAAK,OACH,QAAO;GAAE,WAAW;GAAM,UAAU;GAAS;EAE/C,KAAK,OACH,QAAO;GAAE,WAAW;GAAM,UAAU;GAAO;EAE7C,KAAK;AACH,OAAI,CAAC,QACH,OAAM,IAAI,MAAM,wEAAwE;AAE1F,UAAO;IAAE,WAAW;IAAO,UAAU;IAAM;EAE7C,SAAS;GACP,MAAM,cAAqB;AAC3B,SAAM,IAAI,MAAM,wBAAwB,OAAO,YAAY,GAAG;;;;AAKpE,SAAgB,YAAY,EAC1B,OACA,OACA,MACA,OAAO,MACP,cAAc,UACK;CACnB,MAAM,OAAO;CACb,MAAM,EAAE,WAAW,aAAa,qBAAqB,aAAa,CAAC,CAAC,KAAK;AACzE,KAAI,CAAC,aAAa,CAAC,SACjB,OAAM,IAAI,MAAM,gDAAgD;CAElE,MAAM,cAAc,SAAS,OACzB,4BACA;AAGJ,QACE,4CAAC;EACC,wCACE,6DALe,mBAAmB,aAAa,OAAO,cAAc,EAOpE,YACD;EACD,OAAO,CAAC,YAAY,QAAQ;EAC5B,cAAY;aAEX,YAAY,QAAQ,2CAAC,QAAK,WAAU,YAAY,EAChD,YAAY,QAAQ;GACjB"}
+{"version":3,"file":"badge.js","names":[],"sources":["../../src/components/badge.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"@stackframe/stack-ui\";\n\nexport type DesignBadgeColor = \"blue\" | \"cyan\" | \"purple\" | \"green\" | \"orange\" | \"red\";\nexport type DesignBadgeSize = \"sm\" | \"md\";\n\nconst badgeStyles = new Map<DesignBadgeColor, string>([\n  [\"blue\", \"text-blue-700 dark:text-blue-400 bg-blue-500/20 dark:bg-blue-500/10 ring-1 ring-blue-500/30 dark:ring-blue-500/20\"],\n  [\"cyan\", \"text-cyan-700 dark:text-cyan-400 bg-cyan-500/20 dark:bg-cyan-500/10 ring-1 ring-cyan-500/30 dark:ring-cyan-500/20\"],\n  [\"purple\", \"text-purple-700 dark:text-purple-400 bg-purple-500/20 dark:bg-purple-500/10 ring-1 ring-purple-500/30 dark:ring-purple-500/20\"],\n  [\"green\", \"text-emerald-700 dark:text-emerald-400 bg-emerald-500/20 dark:bg-emerald-500/10 ring-1 ring-emerald-500/30 dark:ring-emerald-500/20\"],\n  [\"orange\", \"text-amber-700 dark:text-amber-300 bg-amber-500/20 dark:bg-amber-500/10 ring-1 ring-amber-500/30 dark:ring-amber-500/20\"],\n  [\"red\", \"text-red-700 dark:text-red-400 bg-red-500/20 dark:bg-red-500/10 ring-1 ring-red-500/30 dark:ring-red-500/20\"],\n]);\n\nfunction getMapValueOrThrow<TKey, TValue>(map: Map<TKey, TValue>, key: TKey, mapName: string) {\n  const value = map.get(key);\n  if (!value) {\n    throw new Error(`Missing ${mapName} entry for key \"${String(key)}\"`);\n  }\n  return value;\n}\n\n/** At least one of showLabel or showIcon must be true. */\nexport type DesignBadgeContentMode = \"both\" | \"text\" | \"icon\";\n\nexport type DesignBadgeProps = {\n  label: string,\n  color: DesignBadgeColor,\n  icon?: React.ElementType,\n  size?: DesignBadgeSize,\n  /** What to display: \"both\" (default), \"text\" (label only), or \"icon\" (icon only; requires icon prop). */\n  contentMode?: DesignBadgeContentMode,\n};\n\nfunction getShowLabelShowIcon(\n  contentMode: DesignBadgeContentMode,\n  hasIcon: boolean,\n): { showLabel: boolean, showIcon: boolean } {\n  switch (contentMode) {\n    case \"both\": {\n      return { showLabel: true, showIcon: hasIcon };\n    }\n    case \"text\": {\n      return { showLabel: true, showIcon: false };\n    }\n    case \"icon\": {\n      if (!hasIcon) {\n        throw new Error(\"DesignBadge contentMode 'icon' requires the icon prop to be provided.\");\n      }\n      return { showLabel: false, showIcon: true };\n    }\n    default: {\n      const _exhaustive: never = contentMode;\n      throw new Error(`Unknown contentMode: ${String(_exhaustive)}`);\n    }\n  }\n}\n\n/**\n * Small pill used for status tags, roles, categories, and other short\n * labels. Not a variant-based component — pick a semantic `color` and\n * optionally pass an `icon` (as a component type, not a rendered node).\n *\n * ```tsx\n * <DesignBadge label=\"Verified\" color=\"green\" icon={CheckIcon} />\n * <DesignBadge label=\"Beta\" color=\"purple\" />\n * <DesignBadge label=\"Error\" color=\"red\" size=\"sm\" />\n * ```\n *\n * Notes:\n * - Props are `label` + `color`, NOT `variant` + children.\n * - `color` is one of: `\"blue\" | \"cyan\" | \"purple\" | \"green\" | \"orange\" | \"red\"`.\n * - `icon` is optional but, if set via `contentMode: \"icon\"`, is required.\n */\nexport function DesignBadge({\n  label,\n  color,\n  icon,\n  size = \"md\",\n  contentMode = \"both\",\n}: DesignBadgeProps) {\n  const Icon = icon;\n  const { showLabel, showIcon } = getShowLabelShowIcon(contentMode, !!Icon);\n  if (!showLabel && !showIcon) {\n    throw new Error(\"DesignBadge must show at least label or icon.\");\n  }\n  const sizeClasses = size === \"sm\"\n    ? \"px-2 py-0.5 text-[10px]\"\n    : \"px-2.5 py-1 text-[11px]\";\n  const colorClasses = getMapValueOrThrow(badgeStyles, color, \"badgeStyles\");\n\n  return (\n    <div\n      className={cn(\n        \"inline-flex items-center gap-1.5 rounded-full font-medium\",\n        colorClasses,\n        sizeClasses\n      )}\n      title={!showLabel ? label : undefined}\n      aria-label={label}\n    >\n      {showIcon && Icon && <Icon className=\"h-3 w-3\" />}\n      {showLabel ? label : null}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;AAOA,MAAM,cAAc,IAAI,IAA8B;CACpD,CAAC,QAAQ,oHAAoH;CAC7H,CAAC,QAAQ,oHAAoH;CAC7H,CAAC,UAAU,gIAAgI;CAC3I,CAAC,SAAS,sIAAsI;CAChJ,CAAC,UAAU,0HAA0H;CACrI,CAAC,OAAO,8GAA8G;CACvH,CAAC;AAEF,SAAS,mBAAiC,KAAwB,KAAW,SAAiB;CAC5F,MAAM,QAAQ,IAAI,IAAI,IAAI;AAC1B,KAAI,CAAC,MACH,OAAM,IAAI,MAAM,WAAW,QAAQ,kBAAkB,OAAO,IAAI,CAAC,GAAG;AAEtE,QAAO;;AAeT,SAAS,qBACP,aACA,SAC2C;AAC3C,SAAQ,aAAR;EACE,KAAK,OACH,QAAO;GAAE,WAAW;GAAM,UAAU;GAAS;EAE/C,KAAK,OACH,QAAO;GAAE,WAAW;GAAM,UAAU;GAAO;EAE7C,KAAK;AACH,OAAI,CAAC,QACH,OAAM,IAAI,MAAM,wEAAwE;AAE1F,UAAO;IAAE,WAAW;IAAO,UAAU;IAAM;EAE7C,SAAS;GACP,MAAM,cAAqB;AAC3B,SAAM,IAAI,MAAM,wBAAwB,OAAO,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;AAqBpE,SAAgB,YAAY,EAC1B,OACA,OACA,MACA,OAAO,MACP,cAAc,UACK;CACnB,MAAM,OAAO;CACb,MAAM,EAAE,WAAW,aAAa,qBAAqB,aAAa,CAAC,CAAC,KAAK;AACzE,KAAI,CAAC,aAAa,CAAC,SACjB,OAAM,IAAI,MAAM,gDAAgD;CAElE,MAAM,cAAc,SAAS,OACzB,4BACA;AAGJ,QACE,4CAAC;EACC,wCACE,6DALe,mBAAmB,aAAa,OAAO,cAAc,EAOpE,YACD;EACD,OAAO,CAAC,YAAY,QAAQ;EAC5B,cAAY;aAEX,YAAY,QAAQ,2CAAC,QAAK,WAAU,YAAY,EAChD,YAAY,QAAQ;GACjB"}

package/dist/components/button.d.ts

@@ -1,6 +1,6 @@
+import React from "react";
 import * as class_variance_authority_types0 from "class-variance-authority/types";
 import { VariantProps } from "class-variance-authority";
-import React from "react";
 
 //#region src/components/button.d.ts
 declare const designButtonVariants: (props?: ({
@@ -15,6 +15,20 @@ type DesignButtonProps = {
   loading?: boolean;
   loadingStyle?: "spinner" | "disabled";
 } & DesignOriginalButtonProps;
+/**
+ * Standard button. Variants: `default | destructive | outline | secondary | ghost | link | plain`.
+ * Sizes: `default | sm | lg | icon`.
+ *
+ * ```tsx
+ * <DesignButton variant="default" onClick={handleSave}>Save</DesignButton>
+ * <DesignButton variant="outline" size="sm" onClick={handleCancel}>Cancel</DesignButton>
+ * <DesignButton variant="ghost" size="icon"><PlusIcon className="h-4 w-4" /></DesignButton>
+ * ```
+ *
+ * Pass an async `onClick` and the button will automatically show a spinner
+ * while the promise is pending (set `loadingStyle="disabled"` if you prefer
+ * a simple disabled state instead).
+ */
 declare const DesignButton: React.FC<{
   onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void | Promise<void>;
   loading?: boolean;

package/dist/components/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","names":[],"sources":["../../src/components/button.tsx"],"mappings":";;;;;cASM,oBAAA,GAAoB,KAAA;;;IA6BzB,+BAAA,CAAA,SAAA;AAAA,KAEW,yBAAA;EACV,OAAA;AAAA,IACE,KAAA,CAAM,oBAAA,CAAqB,iBAAA,IAAqB,YAAA,QAAoB,oBAAA;AAAA,KAgB5D,iBAAA;EACV,OAAA,IAAW,CAAA,EAAG,KAAA,CAAM,UAAA,CAAW,iBAAA,aAA8B,OAAA;EAC7D,OAAA;EACA,YAAA;AAAA,IACE,yBAAA;AAAA,cAES,YAAA,EAAY,KAAA,CAAA,EAAA;aALZ,CAAA,EAAG,KAAA,CAAM,UAAA,CAAW,iBAAA,aAA8B,OAAA"}
+{"version":3,"file":"button.d.ts","names":[],"sources":["../../src/components/button.tsx"],"mappings":";;;;;cASM,oBAAA,GAAoB,KAAA;;;IA6BzB,+BAAA,CAAA,SAAA;AAAA,KAEW,yBAAA;EACV,OAAA;AAAA,IACE,KAAA,CAAM,oBAAA,CAAqB,iBAAA,IAAqB,YAAA,QAAoB,oBAAA;AAAA,KAgB5D,iBAAA;EACV,OAAA,IAAW,CAAA,EAAG,KAAA,CAAM,UAAA,CAAW,iBAAA,aAA8B,OAAA;EAC7D,OAAA;EACA,YAAA;AAAA,IACE,yBAAA;;AAtBJ;;;;;;;;;;;;;cAsCa,YAAA,EAAY,KAAA,CAAA,EAAA;aAnBZ,CAAA,EAAG,KAAA,CAAM,UAAA,CAAW,iBAAA,aAA8B,OAAA"}

package/dist/components/button.js

@@ -46,6 +46,20 @@ const DesignOriginalButton = (0, _stackframe_stack_shared_dist_utils_react.forwa
 	});
 });
 DesignOriginalButton.displayName = "DesignButton";
+/**
+* Standard button. Variants: `default | destructive | outline | secondary | ghost | link | plain`.
+* Sizes: `default | sm | lg | icon`.
+*
+* ```tsx
+* <DesignButton variant="default" onClick={handleSave}>Save</DesignButton>
+* <DesignButton variant="outline" size="sm" onClick={handleCancel}>Cancel</DesignButton>
+* <DesignButton variant="ghost" size="icon"><PlusIcon className="h-4 w-4" /></DesignButton>
+* ```
+*
+* Pass an async `onClick` and the button will automatically show a spinner
+* while the promise is pending (set `loadingStyle="disabled"` if you prefer
+* a simple disabled state instead).
+*/
 const DesignButton = (0, _stackframe_stack_shared_dist_utils_react.forwardRefIfNeeded)(({ onClick, loading: loadingProp, loadingStyle = "spinner", children, size, ...props }, ref) => {
 	const [handleClick, isLoading] = (0, _stackframe_stack_shared_dist_hooks_use_async_callback.useAsyncCallback)(async (e) => {
 		await onClick?.(e);

package/dist/components/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","names":["Slot","Spinner","Slottable"],"sources":["../../src/components/button.tsx"],"sourcesContent":["import { Slot, Slottable } from \"@radix-ui/react-slot\";\nimport { forwardRefIfNeeded } from \"@stackframe/stack-shared/dist/utils/react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport React from \"react\";\n\nimport { cn, Spinner } from \"@stackframe/stack-ui\";\nimport { useAsyncCallback } from \"@stackframe/stack-shared/dist/hooks/use-async-callback\";\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\n\nconst designButtonVariants = cva(\n  \"stack-scope inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"bg-primary text-primary-foreground hover:bg-primary/90\",\n        destructive:\n          \"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\n        outline:\n          \"border border-input bg-white/85 dark:bg-background hover:bg-white dark:hover:bg-accent hover:text-accent-foreground\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n        ghost: \"hover:bg-accent hover:text-accent-foreground\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n        plain: \"\",\n      },\n      size: {\n        default: \"h-9 px-4 py-2\",\n        sm: \"h-8 rounded-md px-3 text-xs\",\n        lg: \"h-10 rounded-md px-8\",\n        icon: \"h-9 w-9\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n);\n\nexport type DesignOriginalButtonProps = {\n  asChild?: boolean,\n} & React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof designButtonVariants>;\n\nconst DesignOriginalButton = forwardRefIfNeeded<HTMLButtonElement, DesignOriginalButtonProps>(\n  ({ className, variant, size, asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"button\";\n    return (\n      <Comp\n        className={cn(designButtonVariants({ variant, size, className }))}\n        ref={ref}\n        {...props}\n      />\n    );\n  }\n);\nDesignOriginalButton.displayName = \"DesignButton\";\n\nexport type DesignButtonProps = {\n  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void | Promise<void>,\n  loading?: boolean,\n  loadingStyle?: \"spinner\" | \"disabled\",\n} & DesignOriginalButtonProps;\n\nexport const DesignButton = forwardRefIfNeeded<HTMLButtonElement, DesignButtonProps>(\n  ({ onClick, loading: loadingProp, loadingStyle = \"spinner\", children, size, ...props }, ref) => {\n    const [handleClick, isLoading] = useAsyncCallback(async (e: React.MouseEvent<HTMLButtonElement>) => {\n      await onClick?.(e);\n    }, [onClick]);\n\n    const loading = loadingProp || isLoading;\n\n    return (\n      <DesignOriginalButton\n        {...props}\n        ref={ref}\n        disabled={props.disabled || loading}\n        onClick={(e) => runAsynchronouslyWithAlert(handleClick(e))}\n        size={size}\n        className={cn(\"relative\", loading && \"[&>:not(.stack-button-do-not-hide-when-siblings-are)]:invisible\", props.className)}\n      >\n        {loadingStyle === \"spinner\" && <Spinner className={cn(\"absolute inset-0 flex items-center justify-center stack-button-do-not-hide-when-siblings-are\", !loading && \"invisible\")} />}\n        <Slottable>\n          {typeof children === \"string\" ? <span>{children}</span> : children}\n        </Slottable>\n      </DesignOriginalButton>\n    );\n  }\n);\nDesignButton.displayName = \"DesignButton\";\n"],"mappings":";;;;;;;;;;;;;AASA,MAAM,yDACJ,iOACA;CACE,UAAU;EACR,SAAS;GACP,SACE;GACF,aACE;GACF,SACE;GACF,WACE;GACF,OAAO;GACP,MAAM;GACN,OAAO;GACR;EACD,MAAM;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,MAAM;GACP;EACF;CACD,iBAAiB;EACf,SAAS;EACT,MAAM;EACP;CACF,CACF;AAMD,MAAM,0FACH,EAAE,WAAW,SAAS,MAAM,UAAU,OAAO,GAAG,SAAS,QAAQ;AAEhE,QACE,2CAFW,UAAUA,4BAAO;EAG1B,wCAAc,qBAAqB;GAAE;GAAS;GAAM;GAAW,CAAC,CAAC;EAC5D;EACL,GAAI;GACJ;EAGP;AACD,qBAAqB,cAAc;AAQnC,MAAa,kFACV,EAAE,SAAS,SAAS,aAAa,eAAe,WAAW,UAAU,MAAM,GAAG,SAAS,QAAQ;CAC9F,MAAM,CAAC,aAAa,0FAA8B,OAAO,MAA2C;AAClG,QAAM,UAAU,EAAE;IACjB,CAAC,QAAQ,CAAC;CAEb,MAAM,UAAU,eAAe;AAE/B,QACE,4CAAC;EACC,GAAI;EACC;EACL,UAAU,MAAM,YAAY;EAC5B,UAAU,mFAAiC,YAAY,EAAE,CAAC;EACpD;EACN,wCAAc,YAAY,WAAW,mEAAmE,MAAM,UAAU;aAEvH,iBAAiB,aAAa,2CAACC,gCAAQ,wCAAc,gGAAgG,CAAC,WAAW,YAAY,GAAI,EAClL,2CAACC,4CACE,OAAO,aAAa,WAAW,2CAAC,UAAM,WAAgB,GAAG,WAChD;GACS;EAG5B;AACD,aAAa,cAAc"}
+{"version":3,"file":"button.js","names":["Slot","Spinner","Slottable"],"sources":["../../src/components/button.tsx"],"sourcesContent":["import { Slot, Slottable } from \"@radix-ui/react-slot\";\nimport { forwardRefIfNeeded } from \"@stackframe/stack-shared/dist/utils/react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport React from \"react\";\n\nimport { cn, Spinner } from \"@stackframe/stack-ui\";\nimport { useAsyncCallback } from \"@stackframe/stack-shared/dist/hooks/use-async-callback\";\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\n\nconst designButtonVariants = cva(\n  \"stack-scope inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"bg-primary text-primary-foreground hover:bg-primary/90\",\n        destructive:\n          \"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\n        outline:\n          \"border border-input bg-white/85 dark:bg-background hover:bg-white dark:hover:bg-accent hover:text-accent-foreground\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n        ghost: \"hover:bg-accent hover:text-accent-foreground\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n        plain: \"\",\n      },\n      size: {\n        default: \"h-9 px-4 py-2\",\n        sm: \"h-8 rounded-md px-3 text-xs\",\n        lg: \"h-10 rounded-md px-8\",\n        icon: \"h-9 w-9\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n);\n\nexport type DesignOriginalButtonProps = {\n  asChild?: boolean,\n} & React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof designButtonVariants>;\n\nconst DesignOriginalButton = forwardRefIfNeeded<HTMLButtonElement, DesignOriginalButtonProps>(\n  ({ className, variant, size, asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"button\";\n    return (\n      <Comp\n        className={cn(designButtonVariants({ variant, size, className }))}\n        ref={ref}\n        {...props}\n      />\n    );\n  }\n);\nDesignOriginalButton.displayName = \"DesignButton\";\n\nexport type DesignButtonProps = {\n  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void | Promise<void>,\n  loading?: boolean,\n  loadingStyle?: \"spinner\" | \"disabled\",\n} & DesignOriginalButtonProps;\n\n/**\n * Standard button. Variants: `default | destructive | outline | secondary | ghost | link | plain`.\n * Sizes: `default | sm | lg | icon`.\n *\n * ```tsx\n * <DesignButton variant=\"default\" onClick={handleSave}>Save</DesignButton>\n * <DesignButton variant=\"outline\" size=\"sm\" onClick={handleCancel}>Cancel</DesignButton>\n * <DesignButton variant=\"ghost\" size=\"icon\"><PlusIcon className=\"h-4 w-4\" /></DesignButton>\n * ```\n *\n * Pass an async `onClick` and the button will automatically show a spinner\n * while the promise is pending (set `loadingStyle=\"disabled\"` if you prefer\n * a simple disabled state instead).\n */\nexport const DesignButton = forwardRefIfNeeded<HTMLButtonElement, DesignButtonProps>(\n  ({ onClick, loading: loadingProp, loadingStyle = \"spinner\", children, size, ...props }, ref) => {\n    const [handleClick, isLoading] = useAsyncCallback(async (e: React.MouseEvent<HTMLButtonElement>) => {\n      await onClick?.(e);\n    }, [onClick]);\n\n    const loading = loadingProp || isLoading;\n\n    return (\n      <DesignOriginalButton\n        {...props}\n        ref={ref}\n        disabled={props.disabled || loading}\n        onClick={(e) => runAsynchronouslyWithAlert(handleClick(e))}\n        size={size}\n        className={cn(\"relative\", loading && \"[&>:not(.stack-button-do-not-hide-when-siblings-are)]:invisible\", props.className)}\n      >\n        {loadingStyle === \"spinner\" && <Spinner className={cn(\"absolute inset-0 flex items-center justify-center stack-button-do-not-hide-when-siblings-are\", !loading && \"invisible\")} />}\n        <Slottable>\n          {typeof children === \"string\" ? <span>{children}</span> : children}\n        </Slottable>\n      </DesignOriginalButton>\n    );\n  }\n);\nDesignButton.displayName = \"DesignButton\";\n"],"mappings":";;;;;;;;;;;;;AASA,MAAM,yDACJ,iOACA;CACE,UAAU;EACR,SAAS;GACP,SACE;GACF,aACE;GACF,SACE;GACF,WACE;GACF,OAAO;GACP,MAAM;GACN,OAAO;GACR;EACD,MAAM;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,MAAM;GACP;EACF;CACD,iBAAiB;EACf,SAAS;EACT,MAAM;EACP;CACF,CACF;AAMD,MAAM,0FACH,EAAE,WAAW,SAAS,MAAM,UAAU,OAAO,GAAG,SAAS,QAAQ;AAEhE,QACE,2CAFW,UAAUA,4BAAO;EAG1B,wCAAc,qBAAqB;GAAE;GAAS;GAAM;GAAW,CAAC,CAAC;EAC5D;EACL,GAAI;GACJ;EAGP;AACD,qBAAqB,cAAc;;;;;;;;;;;;;;;AAsBnC,MAAa,kFACV,EAAE,SAAS,SAAS,aAAa,eAAe,WAAW,UAAU,MAAM,GAAG,SAAS,QAAQ;CAC9F,MAAM,CAAC,aAAa,0FAA8B,OAAO,MAA2C;AAClG,QAAM,UAAU,EAAE;IACjB,CAAC,QAAQ,CAAC;CAEb,MAAM,UAAU,eAAe;AAE/B,QACE,4CAAC;EACC,GAAI;EACC;EACL,UAAU,MAAM,YAAY;EAC5B,UAAU,mFAAiC,YAAY,EAAE,CAAC;EACpD;EACN,wCAAc,YAAY,WAAW,mEAAmE,MAAM,UAAU;aAEvH,iBAAiB,aAAa,2CAACC,gCAAQ,wCAAc,gGAAgG,CAAC,WAAW,YAAY,GAAI,EAClL,2CAACC,4CACE,OAAO,aAAa,WAAW,2CAAC,UAAM,WAAgB,GAAG,WAChD;GACS;EAG5B;AACD,aAAa,cAAc"}

package/dist/components/card.d.ts

@@ -33,6 +33,34 @@ type WithoutTitleProps = {
   actions?: never;
 };
 type DesignCardProps = DesignCardBaseProps & (WithTitleProps | WithoutTitleProps);
+/**
+ * General-purpose card for grouping related content: section headers,
+ * description blocks, chart-less panels, etc. If the content is a
+ * big-number metric, use `DesignMetricCard` instead. If it contains a
+ * chart, wrap it in `DesignChartCard`.
+ *
+ * Two shapes, picked automatically by the props you pass:
+ *
+ * ```tsx
+ * // With a header (title requires icon):
+ * <DesignCard title="Recent activity" icon={ActivityIcon}>
+ *   ...body...
+ * </DesignCard>
+ *
+ * // Body-only (no header):
+ * <DesignCard>
+ *   <h2 className="text-2xl font-semibold">Dashboard</h2>
+ *   <p className="text-muted-foreground">Overview of your user base</p>
+ * </DesignCard>
+ * ```
+ *
+ * Rules:
+ * - DO NOT add padding classes (`p-6`, `p-5`, etc.) to `className` — the
+ *   component already has built-in padding and extra padding will look wrong.
+ * - If you set `title`, you MUST also set `icon`. The TS types enforce this,
+ *   but writing `title` without `icon` will fail.
+ * - Body-only cards (no `title`) automatically go transparent in dark mode.
+ */
 declare function DesignCard({
   title,
   subtitle,

package/dist/components/card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"card.d.ts","names":[],"sources":["../../src/components/card.tsx"],"mappings":";;;;;;;;AAiBA;iBAAgB,mBAAA,CAAA;;;;AAShB;;iBAAgB,sBAAA,CAAuB,QAAA;AAAA,KAKlC,kBAAA;AAAA,KA6BA,mBAAA;EACH,YAAA;EACA,QAAA,GAAW,kBAAA;EACX,gBAAA;AAAA,IACE,IAAA,CAAK,KAAA,CAAM,cAAA,QAAsB,IAAA;AAAA,KAEhC,cAAA;EACH,KAAA,EAAO,KAAA,CAAM,SAAA;EACb,QAAA,GAAW,KAAA,CAAM,SAAA;EACjB,IAAA,EAAM,KAAA,CAAM,WAAA;EACZ,OAAA,GAAU,KAAA,CAAM,SAAA;AAAA;AAAA,KAGb,iBAAA;EACH,KAAA;EACA,QAAA;EACA,IAAA;EACA,OAAA;AAAA;AAAA,KAGU,eAAA,GAAkB,mBAAA,IAAuB,cAAA,GAAiB,iBAAA;AAAA,iBAEtD,UAAA,CAAA;EACd,KAAA;EACA,QAAA;EACA,IAAA,EAAM,IAAA;EACN,OAAA;EACA,YAAA,EAAc,gBAAA;EACd,QAAA;EACA,QAAA;EACA,SAAA;EACA,gBAAA;EAAA,GACG;AAAA,GACF,eAAA,GAAe,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,KA2GN,mBAAA;EACV,QAAA,EAAU,kBAAA;AAAA,IACR,KAAA,CAAM,cAAA;AAAA,iBAEM,cAAA,CAAA;EACd,QAAA;EACA,SAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,mBAAA,GAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"card.d.ts","names":[],"sources":["../../src/components/card.tsx"],"mappings":";;;;;;;;AAiBA;iBAAgB,mBAAA,CAAA;;;;AAShB;;iBAAgB,sBAAA,CAAuB,QAAA;AAAA,KAKlC,kBAAA;AAAA,KA6BA,mBAAA;EACH,YAAA;EACA,QAAA,GAAW,kBAAA;EACX,gBAAA;AAAA,IACE,IAAA,CAAK,KAAA,CAAM,cAAA,QAAsB,IAAA;AAAA,KAEhC,cAAA;EACH,KAAA,EAAO,KAAA,CAAM,SAAA;EACb,QAAA,GAAW,KAAA,CAAM,SAAA;EACjB,IAAA,EAAM,KAAA,CAAM,WAAA;EACZ,OAAA,GAAU,KAAA,CAAM,SAAA;AAAA;AAAA,KAGb,iBAAA;EACH,KAAA;EACA,QAAA;EACA,IAAA;EACA,OAAA;AAAA;AAAA,KAGU,eAAA,GAAkB,mBAAA,IAAuB,cAAA,GAAiB,iBAAA;;;;;;;;AAhB7B;;;;;;;;;;;;;;;;;;;;;iBA8CzB,UAAA,CAAA;EACd,KAAA;EACA,QAAA;EACA,IAAA,EAAM,IAAA;EACN,OAAA;EACA,YAAA,EAAc,gBAAA;EACd,QAAA;EACA,QAAA;EACA,SAAA;EACA,gBAAA;EAAA,GACG;AAAA,GACF,eAAA,GAAe,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,KA2GN,mBAAA;EACV,QAAA,EAAU,kBAAA;AAAA,IACR,KAAA,CAAM,cAAA;AAAA,iBAEM,cAAA,CAAA;EACd,QAAA;EACA,SAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,mBAAA,GAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/card.js

@@ -42,6 +42,34 @@ const demoTintClasses = new Map([
 	["cyan", "group-hover/tint:bg-cyan-500/[0.02]"]
 ]);
 const bodyPaddingClass = "p-5";
+/**
+* General-purpose card for grouping related content: section headers,
+* description blocks, chart-less panels, etc. If the content is a
+* big-number metric, use `DesignMetricCard` instead. If it contains a
+* chart, wrap it in `DesignChartCard`.
+*
+* Two shapes, picked automatically by the props you pass:
+*
+* ```tsx
+* // With a header (title requires icon):
+* <DesignCard title="Recent activity" icon={ActivityIcon}>
+*   ...body...
+* </DesignCard>
+*
+* // Body-only (no header):
+* <DesignCard>
+*   <h2 className="text-2xl font-semibold">Dashboard</h2>
+*   <p className="text-muted-foreground">Overview of your user base</p>
+* </DesignCard>
+* ```
+*
+* Rules:
+* - DO NOT add padding classes (`p-6`, `p-5`, etc.) to `className` — the
+*   component already has built-in padding and extra padding will look wrong.
+* - If you set `title`, you MUST also set `icon`. The TS types enforce this,
+*   but writing `title` without `icon` will fail.
+* - Body-only cards (no `title`) automatically go transparent in dark mode.
+*/
 function DesignCard({ title, subtitle, icon: Icon, actions, glassmorphic: glassmorphicProp, gradient = "default", children, className, contentClassName, ...props }) {
 	const glassmorphic = glassmorphicProp ?? true;
 	const hoverTintClass = hoverTintClasses.get(gradient) ?? "group-hover:bg-slate-500/[0.02]";

package/dist/components/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","names":["React","Card"],"sources":["../../src/components/card.tsx"],"sourcesContent":["\"use client\";\n\nimport { Card } from \"@stackframe/stack-ui\";\nimport { cn } from \"@stackframe/stack-ui\";\nimport React from \"react\";\n\n// ─── Card nesting context ────────────────────────────────────────────────────\n// Components with a `glassmorphic` prop use this to auto-detect whether they\n// sit inside a DesignCard.  When they do, glassmorphic defaults to `true`;\n// when they don't, it defaults to `false`.\n\nconst DesignCardNestingContext = React.createContext(false);\n\n/**\n * Returns `true` when the calling component is rendered inside a DesignCard.\n * Useful for deriving a glassmorphic default.\n */\nexport function useInsideDesignCard(): boolean {\n  return React.useContext(DesignCardNestingContext);\n}\n\n/**\n * Resolve the effective glassmorphic value.\n * - If the caller passed an explicit boolean → honour it.\n * - Otherwise → fall back to whether we're inside a DesignCard.\n */\nexport function useGlassmorphicDefault(explicit: boolean | undefined): boolean {\n  const insideCard = useInsideDesignCard();\n  return explicit ?? insideCard;\n}\n\ntype DesignCardGradient = \"blue\" | \"cyan\" | \"purple\" | \"green\" | \"orange\" | \"default\";\n\nconst hoverTintClasses = new Map<DesignCardGradient, string>([\n  [\"blue\", \"group-hover:bg-blue-500/[0.03]\"],\n  [\"purple\", \"group-hover:bg-purple-500/[0.03]\"],\n  [\"green\", \"group-hover:bg-emerald-500/[0.03]\"],\n  [\"orange\", \"group-hover:bg-orange-500/[0.03]\"],\n  [\"default\", \"group-hover:bg-slate-500/[0.02]\"],\n  [\"cyan\", \"group-hover:bg-cyan-500/[0.03]\"],\n]);\n\nconst demoTintClasses = new Map<DesignCardGradient, string>([\n  [\"blue\", \"group-hover/tint:bg-blue-500/[0.02]\"],\n  [\"purple\", \"group-hover/tint:bg-purple-500/[0.02]\"],\n  [\"green\", \"group-hover/tint:bg-emerald-500/[0.02]\"],\n  [\"orange\", \"group-hover/tint:bg-orange-500/[0.02]\"],\n  [\"default\", \"group-hover/tint:bg-slate-500/[0.015]\"],\n  [\"cyan\", \"group-hover/tint:bg-cyan-500/[0.02]\"],\n]);\n\nconst bodyPaddingClass = \"p-5\";\n\n// ─── Discriminated props ──────────────────────────────────────────────────\n// - If title is given, icon is required.\n// - The layout is derived automatically:\n//     title + subtitle → \"header\"   (full header block with subtitle)\n//     title only       → \"compact\"  (slim bar with border-b)\n//     no title         → \"bodyOnly\" (just the body)\n\ntype DesignCardBaseProps = {\n  glassmorphic?: boolean,\n  gradient?: DesignCardGradient,\n  contentClassName?: string,\n} & Omit<React.ComponentProps<typeof Card>, \"title\">;\n\ntype WithTitleProps = {\n  title: React.ReactNode,\n  subtitle?: React.ReactNode,\n  icon: React.ElementType,\n  actions?: React.ReactNode,\n};\n\ntype WithoutTitleProps = {\n  title?: never,\n  subtitle?: never,\n  icon?: never,\n  actions?: never,\n};\n\nexport type DesignCardProps = DesignCardBaseProps & (WithTitleProps | WithoutTitleProps);\n\nexport function DesignCard({\n  title,\n  subtitle,\n  icon: Icon,\n  actions,\n  glassmorphic: glassmorphicProp,\n  gradient = \"default\",\n  children,\n  className,\n  contentClassName,\n  ...props\n}: DesignCardProps) {\n  const glassmorphic = glassmorphicProp ?? true;\n  const hoverTintClass = hoverTintClasses.get(gradient) ?? \"group-hover:bg-slate-500/[0.02]\";\n  const hasContent = React.Children.count(children) > 0;\n\n  // Derive layout from which props were provided\n  const variant = title != null\n    ? (subtitle != null ? \"header\" : \"compact\")\n    : \"bodyOnly\";\n\n  return (\n    <DesignCardNestingContext.Provider value={true}>\n      <Card\n        className={cn(\n          \"group relative rounded-2xl overflow-hidden\",\n          glassmorphic && [\n            \"bg-white/90 dark:bg-background/60 dark:backdrop-blur-xl border-0 transition-all duration-150 hover:transition-none\",\n            \"ring-1 ring-black/[0.06] hover:ring-black/[0.1] dark:ring-white/[0.06] dark:hover:ring-white/[0.1]\",\n            \"shadow-none\",\n          ],\n          glassmorphic && variant === \"bodyOnly\" && \"dark:bg-transparent dark:ring-0 dark:shadow-none\",\n          className\n        )}\n        {...props}\n      >\n        {glassmorphic && (\n          <>\n            <div className={cn(\n              \"absolute inset-0 bg-gradient-to-br from-foreground/[0.04] dark:from-foreground/[0.02] to-transparent pointer-events-none rounded-2xl\",\n              variant === \"bodyOnly\" && \"dark:hidden\"\n            )} />\n            {variant !== \"bodyOnly\" && (\n              <div\n                className={cn(\n                  \"absolute inset-0 transition-colors duration-150 group-hover:transition-none pointer-events-none rounded-2xl\",\n                  hoverTintClass\n                )}\n              />\n            )}\n          </>\n        )}\n        <div className=\"relative\">\n          {variant === \"header\" && (\n            <div className={bodyPaddingClass}>\n              <div className=\"flex items-start justify-between gap-4\">\n                <div className=\"flex-1 min-w-0\">\n                  <div className=\"flex items-center gap-2\">\n                    {Icon && (\n                      <div className=\"p-1.5 rounded-lg bg-foreground/[0.06] dark:bg-foreground/[0.04]\">\n                        <Icon className=\"h-3.5 w-3.5 text-foreground/70 dark:text-muted-foreground\" />\n                      </div>\n                    )}\n                    <span className=\"text-xs font-semibold text-foreground uppercase tracking-wider\">\n                      {title}\n                    </span>\n                  </div>\n                  {subtitle && (\n                    <p className=\"text-sm text-muted-foreground mt-1\">\n                      {subtitle}\n                    </p>\n                  )}\n                </div>\n                {actions && (\n                  <div className=\"flex-shrink-0\">\n                    {actions}\n                  </div>\n                )}\n              </div>\n            </div>\n          )}\n          {variant === \"compact\" && (\n            <div className=\"p-5 flex items-center justify-between gap-4 border-b border-black/[0.12] dark:border-white/[0.06]\">\n              <div className=\"flex items-center gap-2 min-w-0\">\n                {Icon && (\n                  <div className=\"p-1.5 rounded-lg bg-foreground/[0.04]\">\n                    <Icon className=\"h-3.5 w-3.5 text-muted-foreground\" />\n                  </div>\n                )}\n                <span className=\"text-xs font-semibold text-foreground uppercase tracking-wider\">\n                  {title}\n                </span>\n              </div>\n              {actions && (\n                <div className=\"flex-shrink-0\">\n                  {actions}\n                </div>\n              )}\n            </div>\n          )}\n          {hasContent && (\n            <div\n              className={cn(\n                variant === \"header\" ? \"border-t border-black/[0.12] dark:border-white/[0.06]\" : \"\",\n                variant === \"compact\" ? \"px-5 py-4\" : \"\",\n                variant === \"bodyOnly\" || variant === \"header\" ? bodyPaddingClass : \"\",\n                contentClassName\n              )}\n            >\n              {children}\n            </div>\n          )}\n        </div>\n      </Card>\n    </DesignCardNestingContext.Provider>\n  );\n}\n\nexport type DesignCardTintProps = {\n  gradient: DesignCardGradient,\n} & React.ComponentProps<\"div\">\n\nexport function DesignCardTint({\n  gradient,\n  className,\n  children,\n  ...props\n}: DesignCardTintProps) {\n  const tintClass = demoTintClasses.get(gradient) ?? \"group-hover/tint:bg-slate-500/[0.015]\";\n\n  return (\n    <div\n      className={cn(\n        \"group/tint relative rounded-2xl bg-white/90 dark:bg-background/60 dark:backdrop-blur-xl transition-all duration-150 hover:transition-none\",\n        \"ring-1 ring-black/[0.06] hover:ring-black/[0.1] dark:ring-white/[0.06] dark:hover:ring-white/[0.1]\",\n        \"shadow-none overflow-hidden\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"absolute inset-0 bg-gradient-to-br from-foreground/[0.04] dark:from-foreground/[0.02] to-transparent pointer-events-none rounded-2xl\" />\n      <div\n        className={cn(\n          \"absolute inset-0 transition-colors duration-150 group-hover/tint:transition-none pointer-events-none rounded-2xl\",\n          tintClass\n        )}\n      />\n      <div className=\"relative\">\n        {children}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;AAWA,MAAM,2BAA2BA,cAAM,cAAc,MAAM;;;;;AAM3D,SAAgB,sBAA+B;AAC7C,QAAOA,cAAM,WAAW,yBAAyB;;;;;;;AAQnD,SAAgB,uBAAuB,UAAwC;CAC7E,MAAM,aAAa,qBAAqB;AACxC,QAAO,YAAY;;AAKrB,MAAM,mBAAmB,IAAI,IAAgC;CAC3D,CAAC,QAAQ,iCAAiC;CAC1C,CAAC,UAAU,mCAAmC;CAC9C,CAAC,SAAS,oCAAoC;CAC9C,CAAC,UAAU,mCAAmC;CAC9C,CAAC,WAAW,kCAAkC;CAC9C,CAAC,QAAQ,iCAAiC;CAC3C,CAAC;AAEF,MAAM,kBAAkB,IAAI,IAAgC;CAC1D,CAAC,QAAQ,sCAAsC;CAC/C,CAAC,UAAU,wCAAwC;CACnD,CAAC,SAAS,yCAAyC;CACnD,CAAC,UAAU,wCAAwC;CACnD,CAAC,WAAW,wCAAwC;CACpD,CAAC,QAAQ,sCAAsC;CAChD,CAAC;AAEF,MAAM,mBAAmB;AA+BzB,SAAgB,WAAW,EACzB,OACA,UACA,MAAM,MACN,SACA,cAAc,kBACd,WAAW,WACX,UACA,WACA,kBACA,GAAG,SACe;CAClB,MAAM,eAAe,oBAAoB;CACzC,MAAM,iBAAiB,iBAAiB,IAAI,SAAS,IAAI;CACzD,MAAM,aAAaA,cAAM,SAAS,MAAM,SAAS,GAAG;CAGpD,MAAM,UAAU,SAAS,OACpB,YAAY,OAAO,WAAW,YAC/B;AAEJ,QACE,2CAAC,yBAAyB;EAAS,OAAO;YACxC,4CAACC;GACC,wCACE,8CACA,gBAAgB;IACd;IACA;IACA;IACD,EACD,gBAAgB,YAAY,cAAc,oDAC1C,UACD;GACD,GAAI;cAEH,gBACC,qFACE,2CAAC,SAAI,wCACH,wIACA,YAAY,cAAc,cAC3B,GAAI,EACJ,YAAY,cACX,2CAAC,SACC,wCACE,+GACA,eACD,GACD,IAEH,EAEL,4CAAC;IAAI,WAAU;;KACZ,YAAY,YACX,2CAAC;MAAI,WAAW;gBACd,4CAAC;OAAI,WAAU;kBACb,4CAAC;QAAI,WAAU;mBACb,4CAAC;SAAI,WAAU;oBACZ,QACC,2CAAC;UAAI,WAAU;oBACb,2CAAC,QAAK,WAAU,8DAA8D;WAC1E,EAER,2CAAC;UAAK,WAAU;oBACb;WACI;UACH,EACL,YACC,2CAAC;SAAE,WAAU;mBACV;UACC;SAEF,EACL,WACC,2CAAC;QAAI,WAAU;kBACZ;SACG;QAEJ;OACF;KAEP,YAAY,aACX,4CAAC;MAAI,WAAU;iBACb,4CAAC;OAAI,WAAU;kBACZ,QACC,2CAAC;QAAI,WAAU;kBACb,2CAAC,QAAK,WAAU,sCAAsC;SAClD,EAER,2CAAC;QAAK,WAAU;kBACb;SACI;QACH,EACL,WACC,2CAAC;OAAI,WAAU;iBACZ;QACG;OAEJ;KAEP,cACC,2CAAC;MACC,wCACE,YAAY,WAAW,0DAA0D,IACjF,YAAY,YAAY,cAAc,IACtC,YAAY,cAAc,YAAY,WAAW,mBAAmB,IACpE,iBACD;MAEA;OACG;;KAEJ;IACD;GAC2B;;AAQxC,SAAgB,eAAe,EAC7B,UACA,WACA,UACA,GAAG,SACmB;CACtB,MAAM,YAAY,gBAAgB,IAAI,SAAS,IAAI;AAEnD,QACE,4CAAC;EACC,wCACE,6IACA,sGACA,+BACA,UACD;EACD,GAAI;;GAEJ,2CAAC,SAAI,WAAU,yIAAyI;GACxJ,2CAAC,SACC,wCACE,oHACA,UACD,GACD;GACF,2CAAC;IAAI,WAAU;IACZ;KACG;;GACF"}
+{"version":3,"file":"card.js","names":["React","Card"],"sources":["../../src/components/card.tsx"],"sourcesContent":["\"use client\";\n\nimport { Card } from \"@stackframe/stack-ui\";\nimport { cn } from \"@stackframe/stack-ui\";\nimport React from \"react\";\n\n// ─── Card nesting context ────────────────────────────────────────────────────\n// Components with a `glassmorphic` prop use this to auto-detect whether they\n// sit inside a DesignCard.  When they do, glassmorphic defaults to `true`;\n// when they don't, it defaults to `false`.\n\nconst DesignCardNestingContext = React.createContext(false);\n\n/**\n * Returns `true` when the calling component is rendered inside a DesignCard.\n * Useful for deriving a glassmorphic default.\n */\nexport function useInsideDesignCard(): boolean {\n  return React.useContext(DesignCardNestingContext);\n}\n\n/**\n * Resolve the effective glassmorphic value.\n * - If the caller passed an explicit boolean → honour it.\n * - Otherwise → fall back to whether we're inside a DesignCard.\n */\nexport function useGlassmorphicDefault(explicit: boolean | undefined): boolean {\n  const insideCard = useInsideDesignCard();\n  return explicit ?? insideCard;\n}\n\ntype DesignCardGradient = \"blue\" | \"cyan\" | \"purple\" | \"green\" | \"orange\" | \"default\";\n\nconst hoverTintClasses = new Map<DesignCardGradient, string>([\n  [\"blue\", \"group-hover:bg-blue-500/[0.03]\"],\n  [\"purple\", \"group-hover:bg-purple-500/[0.03]\"],\n  [\"green\", \"group-hover:bg-emerald-500/[0.03]\"],\n  [\"orange\", \"group-hover:bg-orange-500/[0.03]\"],\n  [\"default\", \"group-hover:bg-slate-500/[0.02]\"],\n  [\"cyan\", \"group-hover:bg-cyan-500/[0.03]\"],\n]);\n\nconst demoTintClasses = new Map<DesignCardGradient, string>([\n  [\"blue\", \"group-hover/tint:bg-blue-500/[0.02]\"],\n  [\"purple\", \"group-hover/tint:bg-purple-500/[0.02]\"],\n  [\"green\", \"group-hover/tint:bg-emerald-500/[0.02]\"],\n  [\"orange\", \"group-hover/tint:bg-orange-500/[0.02]\"],\n  [\"default\", \"group-hover/tint:bg-slate-500/[0.015]\"],\n  [\"cyan\", \"group-hover/tint:bg-cyan-500/[0.02]\"],\n]);\n\nconst bodyPaddingClass = \"p-5\";\n\n// ─── Discriminated props ──────────────────────────────────────────────────\n// - If title is given, icon is required.\n// - The layout is derived automatically:\n//     title + subtitle → \"header\"   (full header block with subtitle)\n//     title only       → \"compact\"  (slim bar with border-b)\n//     no title         → \"bodyOnly\" (just the body)\n\ntype DesignCardBaseProps = {\n  glassmorphic?: boolean,\n  gradient?: DesignCardGradient,\n  contentClassName?: string,\n} & Omit<React.ComponentProps<typeof Card>, \"title\">;\n\ntype WithTitleProps = {\n  title: React.ReactNode,\n  subtitle?: React.ReactNode,\n  icon: React.ElementType,\n  actions?: React.ReactNode,\n};\n\ntype WithoutTitleProps = {\n  title?: never,\n  subtitle?: never,\n  icon?: never,\n  actions?: never,\n};\n\nexport type DesignCardProps = DesignCardBaseProps & (WithTitleProps | WithoutTitleProps);\n\n/**\n * General-purpose card for grouping related content: section headers,\n * description blocks, chart-less panels, etc. If the content is a\n * big-number metric, use `DesignMetricCard` instead. If it contains a\n * chart, wrap it in `DesignChartCard`.\n *\n * Two shapes, picked automatically by the props you pass:\n *\n * ```tsx\n * // With a header (title requires icon):\n * <DesignCard title=\"Recent activity\" icon={ActivityIcon}>\n *   ...body...\n * </DesignCard>\n *\n * // Body-only (no header):\n * <DesignCard>\n *   <h2 className=\"text-2xl font-semibold\">Dashboard</h2>\n *   <p className=\"text-muted-foreground\">Overview of your user base</p>\n * </DesignCard>\n * ```\n *\n * Rules:\n * - DO NOT add padding classes (`p-6`, `p-5`, etc.) to `className` — the\n *   component already has built-in padding and extra padding will look wrong.\n * - If you set `title`, you MUST also set `icon`. The TS types enforce this,\n *   but writing `title` without `icon` will fail.\n * - Body-only cards (no `title`) automatically go transparent in dark mode.\n */\nexport function DesignCard({\n  title,\n  subtitle,\n  icon: Icon,\n  actions,\n  glassmorphic: glassmorphicProp,\n  gradient = \"default\",\n  children,\n  className,\n  contentClassName,\n  ...props\n}: DesignCardProps) {\n  const glassmorphic = glassmorphicProp ?? true;\n  const hoverTintClass = hoverTintClasses.get(gradient) ?? \"group-hover:bg-slate-500/[0.02]\";\n  const hasContent = React.Children.count(children) > 0;\n\n  // Derive layout from which props were provided\n  const variant = title != null\n    ? (subtitle != null ? \"header\" : \"compact\")\n    : \"bodyOnly\";\n\n  return (\n    <DesignCardNestingContext.Provider value={true}>\n      <Card\n        className={cn(\n          \"group relative rounded-2xl overflow-hidden\",\n          glassmorphic && [\n            \"bg-white/90 dark:bg-background/60 dark:backdrop-blur-xl border-0 transition-all duration-150 hover:transition-none\",\n            \"ring-1 ring-black/[0.06] hover:ring-black/[0.1] dark:ring-white/[0.06] dark:hover:ring-white/[0.1]\",\n            \"shadow-none\",\n          ],\n          glassmorphic && variant === \"bodyOnly\" && \"dark:bg-transparent dark:ring-0 dark:shadow-none\",\n          className\n        )}\n        {...props}\n      >\n        {glassmorphic && (\n          <>\n            <div className={cn(\n              \"absolute inset-0 bg-gradient-to-br from-foreground/[0.04] dark:from-foreground/[0.02] to-transparent pointer-events-none rounded-2xl\",\n              variant === \"bodyOnly\" && \"dark:hidden\"\n            )} />\n            {variant !== \"bodyOnly\" && (\n              <div\n                className={cn(\n                  \"absolute inset-0 transition-colors duration-150 group-hover:transition-none pointer-events-none rounded-2xl\",\n                  hoverTintClass\n                )}\n              />\n            )}\n          </>\n        )}\n        <div className=\"relative\">\n          {variant === \"header\" && (\n            <div className={bodyPaddingClass}>\n              <div className=\"flex items-start justify-between gap-4\">\n                <div className=\"flex-1 min-w-0\">\n                  <div className=\"flex items-center gap-2\">\n                    {Icon && (\n                      <div className=\"p-1.5 rounded-lg bg-foreground/[0.06] dark:bg-foreground/[0.04]\">\n                        <Icon className=\"h-3.5 w-3.5 text-foreground/70 dark:text-muted-foreground\" />\n                      </div>\n                    )}\n                    <span className=\"text-xs font-semibold text-foreground uppercase tracking-wider\">\n                      {title}\n                    </span>\n                  </div>\n                  {subtitle && (\n                    <p className=\"text-sm text-muted-foreground mt-1\">\n                      {subtitle}\n                    </p>\n                  )}\n                </div>\n                {actions && (\n                  <div className=\"flex-shrink-0\">\n                    {actions}\n                  </div>\n                )}\n              </div>\n            </div>\n          )}\n          {variant === \"compact\" && (\n            <div className=\"p-5 flex items-center justify-between gap-4 border-b border-black/[0.12] dark:border-white/[0.06]\">\n              <div className=\"flex items-center gap-2 min-w-0\">\n                {Icon && (\n                  <div className=\"p-1.5 rounded-lg bg-foreground/[0.04]\">\n                    <Icon className=\"h-3.5 w-3.5 text-muted-foreground\" />\n                  </div>\n                )}\n                <span className=\"text-xs font-semibold text-foreground uppercase tracking-wider\">\n                  {title}\n                </span>\n              </div>\n              {actions && (\n                <div className=\"flex-shrink-0\">\n                  {actions}\n                </div>\n              )}\n            </div>\n          )}\n          {hasContent && (\n            <div\n              className={cn(\n                variant === \"header\" ? \"border-t border-black/[0.12] dark:border-white/[0.06]\" : \"\",\n                variant === \"compact\" ? \"px-5 py-4\" : \"\",\n                variant === \"bodyOnly\" || variant === \"header\" ? bodyPaddingClass : \"\",\n                contentClassName\n              )}\n            >\n              {children}\n            </div>\n          )}\n        </div>\n      </Card>\n    </DesignCardNestingContext.Provider>\n  );\n}\n\nexport type DesignCardTintProps = {\n  gradient: DesignCardGradient,\n} & React.ComponentProps<\"div\">\n\nexport function DesignCardTint({\n  gradient,\n  className,\n  children,\n  ...props\n}: DesignCardTintProps) {\n  const tintClass = demoTintClasses.get(gradient) ?? \"group-hover/tint:bg-slate-500/[0.015]\";\n\n  return (\n    <div\n      className={cn(\n        \"group/tint relative rounded-2xl bg-white/90 dark:bg-background/60 dark:backdrop-blur-xl transition-all duration-150 hover:transition-none\",\n        \"ring-1 ring-black/[0.06] hover:ring-black/[0.1] dark:ring-white/[0.06] dark:hover:ring-white/[0.1]\",\n        \"shadow-none overflow-hidden\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"absolute inset-0 bg-gradient-to-br from-foreground/[0.04] dark:from-foreground/[0.02] to-transparent pointer-events-none rounded-2xl\" />\n      <div\n        className={cn(\n          \"absolute inset-0 transition-colors duration-150 group-hover/tint:transition-none pointer-events-none rounded-2xl\",\n          tintClass\n        )}\n      />\n      <div className=\"relative\">\n        {children}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;AAWA,MAAM,2BAA2BA,cAAM,cAAc,MAAM;;;;;AAM3D,SAAgB,sBAA+B;AAC7C,QAAOA,cAAM,WAAW,yBAAyB;;;;;;;AAQnD,SAAgB,uBAAuB,UAAwC;CAC7E,MAAM,aAAa,qBAAqB;AACxC,QAAO,YAAY;;AAKrB,MAAM,mBAAmB,IAAI,IAAgC;CAC3D,CAAC,QAAQ,iCAAiC;CAC1C,CAAC,UAAU,mCAAmC;CAC9C,CAAC,SAAS,oCAAoC;CAC9C,CAAC,UAAU,mCAAmC;CAC9C,CAAC,WAAW,kCAAkC;CAC9C,CAAC,QAAQ,iCAAiC;CAC3C,CAAC;AAEF,MAAM,kBAAkB,IAAI,IAAgC;CAC1D,CAAC,QAAQ,sCAAsC;CAC/C,CAAC,UAAU,wCAAwC;CACnD,CAAC,SAAS,yCAAyC;CACnD,CAAC,UAAU,wCAAwC;CACnD,CAAC,WAAW,wCAAwC;CACpD,CAAC,QAAQ,sCAAsC;CAChD,CAAC;AAEF,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2DzB,SAAgB,WAAW,EACzB,OACA,UACA,MAAM,MACN,SACA,cAAc,kBACd,WAAW,WACX,UACA,WACA,kBACA,GAAG,SACe;CAClB,MAAM,eAAe,oBAAoB;CACzC,MAAM,iBAAiB,iBAAiB,IAAI,SAAS,IAAI;CACzD,MAAM,aAAaA,cAAM,SAAS,MAAM,SAAS,GAAG;CAGpD,MAAM,UAAU,SAAS,OACpB,YAAY,OAAO,WAAW,YAC/B;AAEJ,QACE,2CAAC,yBAAyB;EAAS,OAAO;YACxC,4CAACC;GACC,wCACE,8CACA,gBAAgB;IACd;IACA;IACA;IACD,EACD,gBAAgB,YAAY,cAAc,oDAC1C,UACD;GACD,GAAI;cAEH,gBACC,qFACE,2CAAC,SAAI,wCACH,wIACA,YAAY,cAAc,cAC3B,GAAI,EACJ,YAAY,cACX,2CAAC,SACC,wCACE,+GACA,eACD,GACD,IAEH,EAEL,4CAAC;IAAI,WAAU;;KACZ,YAAY,YACX,2CAAC;MAAI,WAAW;gBACd,4CAAC;OAAI,WAAU;kBACb,4CAAC;QAAI,WAAU;mBACb,4CAAC;SAAI,WAAU;oBACZ,QACC,2CAAC;UAAI,WAAU;oBACb,2CAAC,QAAK,WAAU,8DAA8D;WAC1E,EAER,2CAAC;UAAK,WAAU;oBACb;WACI;UACH,EACL,YACC,2CAAC;SAAE,WAAU;mBACV;UACC;SAEF,EACL,WACC,2CAAC;QAAI,WAAU;kBACZ;SACG;QAEJ;OACF;KAEP,YAAY,aACX,4CAAC;MAAI,WAAU;iBACb,4CAAC;OAAI,WAAU;kBACZ,QACC,2CAAC;QAAI,WAAU;kBACb,2CAAC,QAAK,WAAU,sCAAsC;SAClD,EAER,2CAAC;QAAK,WAAU;kBACb;SACI;QACH,EACL,WACC,2CAAC;OAAI,WAAU;iBACZ;QACG;OAEJ;KAEP,cACC,2CAAC;MACC,wCACE,YAAY,WAAW,0DAA0D,IACjF,YAAY,YAAY,cAAc,IACtC,YAAY,cAAc,YAAY,WAAW,mBAAmB,IACpE,iBACD;MAEA;OACG;;KAEJ;IACD;GAC2B;;AAQxC,SAAgB,eAAe,EAC7B,UACA,WACA,UACA,GAAG,SACmB;CACtB,MAAM,YAAY,gBAAgB,IAAI,SAAS,IAAI;AAEnD,QACE,4CAAC;EACC,wCACE,6IACA,sGACA,+BACA,UACD;EACD,GAAI;;GAEJ,2CAAC,SAAI,WAAU,yIAAyI;GACxJ,2CAAC,SACC,wCACE,oHACA,UACD,GACD;GACF,2CAAC;IAAI,WAAU;IACZ;KACG;;GACF"}