@stackframe/dashboard-ui-components 2.8.84 → 2.8.86

package/dist/esm/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/esm/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/esm/components/analytics-chart/types.js

@@ -0,0 +1,18 @@
+//#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
+export { cssIdent, pointValue };
+//# sourceMappingURL=types.js.map

package/dist/esm/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/esm/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/esm/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/esm/components/badge.js

@@ -39,6 +39,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/esm/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,qBAAC;EACC,WAAW,GACT,6DALe,mBAAmB,aAAa,OAAO,cAAc,EAOpE,YACD;EACD,OAAO,CAAC,YAAY,QAAQ;EAC5B,cAAY;aAEX,YAAY,QAAQ,oBAAC,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,qBAAC;EACC,WAAW,GACT,6DALe,mBAAmB,aAAa,OAAO,cAAc,EAOpE,YACD;EACD,OAAO,CAAC,YAAY,QAAQ;EAC5B,cAAY;aAEX,YAAY,QAAQ,oBAAC,QAAK,WAAU,YAAY,EAChD,YAAY,QAAQ;GACjB"}

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

@@ -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/esm/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/esm/components/button.js

@@ -43,6 +43,20 @@ const DesignOriginalButton = forwardRefIfNeeded(({ className, variant, size, asC
 	});
 });
 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 = forwardRefIfNeeded(({ onClick, loading: loadingProp, loadingStyle = "spinner", children, size, ...props }, ref) => {
 	const [handleClick, isLoading] = useAsyncCallback(async (e) => {
 		await onClick?.(e);

package/dist/esm/components/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","names":[],"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,uBAAuB,IAC3B,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,uBAAuB,oBAC1B,EAAE,WAAW,SAAS,MAAM,UAAU,OAAO,GAAG,SAAS,QAAQ;AAEhE,QACE,oBAFW,UAAU,OAAO;EAG1B,WAAW,GAAG,qBAAqB;GAAE;GAAS;GAAM;GAAW,CAAC,CAAC;EAC5D;EACL,GAAI;GACJ;EAGP;AACD,qBAAqB,cAAc;AAQnC,MAAa,eAAe,oBACzB,EAAE,SAAS,SAAS,aAAa,eAAe,WAAW,UAAU,MAAM,GAAG,SAAS,QAAQ;CAC9F,MAAM,CAAC,aAAa,aAAa,iBAAiB,OAAO,MAA2C;AAClG,QAAM,UAAU,EAAE;IACjB,CAAC,QAAQ,CAAC;CAEb,MAAM,UAAU,eAAe;AAE/B,QACE,qBAAC;EACC,GAAI;EACC;EACL,UAAU,MAAM,YAAY;EAC5B,UAAU,MAAM,2BAA2B,YAAY,EAAE,CAAC;EACpD;EACN,WAAW,GAAG,YAAY,WAAW,mEAAmE,MAAM,UAAU;aAEvH,iBAAiB,aAAa,oBAAC,WAAQ,WAAW,GAAG,gGAAgG,CAAC,WAAW,YAAY,GAAI,EAClL,oBAAC,uBACE,OAAO,aAAa,WAAW,oBAAC,UAAM,WAAgB,GAAG,WAChD;GACS;EAG5B;AACD,aAAa,cAAc"}
+{"version":3,"file":"button.js","names":[],"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,uBAAuB,IAC3B,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,uBAAuB,oBAC1B,EAAE,WAAW,SAAS,MAAM,UAAU,OAAO,GAAG,SAAS,QAAQ;AAEhE,QACE,oBAFW,UAAU,OAAO;EAG1B,WAAW,GAAG,qBAAqB;GAAE;GAAS;GAAM;GAAW,CAAC,CAAC;EAC5D;EACL,GAAI;GACJ;EAGP;AACD,qBAAqB,cAAc;;;;;;;;;;;;;;;AAsBnC,MAAa,eAAe,oBACzB,EAAE,SAAS,SAAS,aAAa,eAAe,WAAW,UAAU,MAAM,GAAG,SAAS,QAAQ;CAC9F,MAAM,CAAC,aAAa,aAAa,iBAAiB,OAAO,MAA2C;AAClG,QAAM,UAAU,EAAE;IACjB,CAAC,QAAQ,CAAC;CAEb,MAAM,UAAU,eAAe;AAE/B,QACE,qBAAC;EACC,GAAI;EACC;EACL,UAAU,MAAM,YAAY;EAC5B,UAAU,MAAM,2BAA2B,YAAY,EAAE,CAAC;EACpD;EACN,WAAW,GAAG,YAAY,WAAW,mEAAmE,MAAM,UAAU;aAEvH,iBAAiB,aAAa,oBAAC,WAAQ,WAAW,GAAG,gGAAgG,CAAC,WAAW,YAAY,GAAI,EAClL,oBAAC,uBACE,OAAO,aAAa,WAAW,oBAAC,UAAM,WAAgB,GAAG,WAChD;GACS;EAG5B;AACD,aAAa,cAAc"}

package/dist/esm/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/esm/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/esm/components/card.js

@@ -39,6 +39,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/esm/components/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","names":[],"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,2BAA2B,MAAM,cAAc,MAAM;;;;;AAM3D,SAAgB,sBAA+B;AAC7C,QAAO,MAAM,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,aAAa,MAAM,SAAS,MAAM,SAAS,GAAG;CAGpD,MAAM,UAAU,SAAS,OACpB,YAAY,OAAO,WAAW,YAC/B;AAEJ,QACE,oBAAC,yBAAyB;EAAS,OAAO;YACxC,qBAAC;GACC,WAAW,GACT,8CACA,gBAAgB;IACd;IACA;IACA;IACD,EACD,gBAAgB,YAAY,cAAc,oDAC1C,UACD;GACD,GAAI;cAEH,gBACC,4CACE,oBAAC,SAAI,WAAW,GACd,wIACA,YAAY,cAAc,cAC3B,GAAI,EACJ,YAAY,cACX,oBAAC,SACC,WAAW,GACT,+GACA,eACD,GACD,IAEH,EAEL,qBAAC;IAAI,WAAU;;KACZ,YAAY,YACX,oBAAC;MAAI,WAAW;gBACd,qBAAC;OAAI,WAAU;kBACb,qBAAC;QAAI,WAAU;mBACb,qBAAC;SAAI,WAAU;oBACZ,QACC,oBAAC;UAAI,WAAU;oBACb,oBAAC,QAAK,WAAU,8DAA8D;WAC1E,EAER,oBAAC;UAAK,WAAU;oBACb;WACI;UACH,EACL,YACC,oBAAC;SAAE,WAAU;mBACV;UACC;SAEF,EACL,WACC,oBAAC;QAAI,WAAU;kBACZ;SACG;QAEJ;OACF;KAEP,YAAY,aACX,qBAAC;MAAI,WAAU;iBACb,qBAAC;OAAI,WAAU;kBACZ,QACC,oBAAC;QAAI,WAAU;kBACb,oBAAC,QAAK,WAAU,sCAAsC;SAClD,EAER,oBAAC;QAAK,WAAU;kBACb;SACI;QACH,EACL,WACC,oBAAC;OAAI,WAAU;iBACZ;QACG;OAEJ;KAEP,cACC,oBAAC;MACC,WAAW,GACT,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,qBAAC;EACC,WAAW,GACT,6IACA,sGACA,+BACA,UACD;EACD,GAAI;;GAEJ,oBAAC,SAAI,WAAU,yIAAyI;GACxJ,oBAAC,SACC,WAAW,GACT,oHACA,UACD,GACD;GACF,oBAAC;IAAI,WAAU;IACZ;KACG;;GACF"}
+{"version":3,"file":"card.js","names":[],"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,2BAA2B,MAAM,cAAc,MAAM;;;;;AAM3D,SAAgB,sBAA+B;AAC7C,QAAO,MAAM,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,aAAa,MAAM,SAAS,MAAM,SAAS,GAAG;CAGpD,MAAM,UAAU,SAAS,OACpB,YAAY,OAAO,WAAW,YAC/B;AAEJ,QACE,oBAAC,yBAAyB;EAAS,OAAO;YACxC,qBAAC;GACC,WAAW,GACT,8CACA,gBAAgB;IACd;IACA;IACA;IACD,EACD,gBAAgB,YAAY,cAAc,oDAC1C,UACD;GACD,GAAI;cAEH,gBACC,4CACE,oBAAC,SAAI,WAAW,GACd,wIACA,YAAY,cAAc,cAC3B,GAAI,EACJ,YAAY,cACX,oBAAC,SACC,WAAW,GACT,+GACA,eACD,GACD,IAEH,EAEL,qBAAC;IAAI,WAAU;;KACZ,YAAY,YACX,oBAAC;MAAI,WAAW;gBACd,qBAAC;OAAI,WAAU;kBACb,qBAAC;QAAI,WAAU;mBACb,qBAAC;SAAI,WAAU;oBACZ,QACC,oBAAC;UAAI,WAAU;oBACb,oBAAC,QAAK,WAAU,8DAA8D;WAC1E,EAER,oBAAC;UAAK,WAAU;oBACb;WACI;UACH,EACL,YACC,oBAAC;SAAE,WAAU;mBACV;UACC;SAEF,EACL,WACC,oBAAC;QAAI,WAAU;kBACZ;SACG;QAEJ;OACF;KAEP,YAAY,aACX,qBAAC;MAAI,WAAU;iBACb,qBAAC;OAAI,WAAU;kBACZ,QACC,oBAAC;QAAI,WAAU;kBACb,oBAAC,QAAK,WAAU,sCAAsC;SAClD,EAER,oBAAC;QAAK,WAAU;kBACb;SACI;QACH,EACL,WACC,oBAAC;OAAI,WAAU;iBACZ;QACG;OAEJ;KAEP,cACC,oBAAC;MACC,WAAW,GACT,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,qBAAC;EACC,WAAW,GACT,6IACA,sGACA,+BACA,UACD;EACD,GAAI;;GAEJ,oBAAC,SAAI,WAAU,yIAAyI;GACxJ,oBAAC,SACC,WAAW,GACT,oHACA,UACD,GACD;GACF,oBAAC;IAAI,WAAU;IACZ;KACG;;GACF"}

package/dist/esm/components/chart-card.d.ts

@@ -8,6 +8,35 @@ type DesignChartCardProps = {
   title?: React.ReactNode;
   description?: React.ReactNode;
 } & Omit<React.ComponentProps<"div">, "title">;
+/**
+ * Card chrome (title + description + border) for a chart. Wrap every
+ * `AnalyticsChart` in this so the chart has context. Also used around raw
+ * Recharts components paired with `DesignChartContainer` for non-time-series
+ * fallbacks.
+ *
+ * ```tsx
+ * // Time-series chart (preferred):
+ * <DesignChartCard title="Signups" description="Last 30 days">
+ *   <AnalyticsChart data={data} state={state} onChange={setState} />
+ * </DesignChartCard>
+ *
+ * // Non-time-series fallback (static ranking, distribution, etc.):
+ * <DesignChartCard title="Top referrers" description="This month">
+ *   <DesignChartContainer config={chartConfig} maxHeight={300}>
+ *     <Recharts.BarChart data={data}>
+ *       <Recharts.CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />
+ *       <Recharts.XAxis dataKey="name" tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 12 }} />
+ *       <Recharts.YAxis tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 12 }} />
+ *       <Recharts.Tooltip content={<DesignChartTooltipContent />} />
+ *       <Recharts.Bar dataKey="count" fill={getDesignChartColor(0)} radius={[4, 4, 0, 0]} />
+ *     </Recharts.BarChart>
+ *   </DesignChartContainer>
+ * </DesignChartCard>
+ * ```
+ *
+ * `chartConfig` for `DesignChartContainer` maps each `dataKey` to its label and color:
+ * `{ count: { label: "Count", color: getDesignChartColor(0) } }`.
+ */
 declare function DesignChartCard({
   gradient,
   title,

package/dist/esm/components/chart-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chart-card.d.ts","names":[],"sources":["../../../src/components/chart-card.tsx"],"mappings":";;;;KAKK,uBAAA;AAAA,KAWO,oBAAA;EACV,QAAA,GAAW,uBAAA;EACX,KAAA,GAAQ,KAAA,CAAM,SAAA;EACd,WAAA,GAAc,KAAA,CAAM,SAAA;AAAA,IAClB,IAAA,CAAK,KAAA,CAAM,cAAA;AAAA,iBAEC,eAAA,CAAA;EACd,QAAA;EACA,KAAA;EACA,WAAA;EACA,SAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,oBAAA,GAAoB,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"chart-card.d.ts","names":[],"sources":["../../../src/components/chart-card.tsx"],"mappings":";;;;KAKK,uBAAA;AAAA,KAWO,oBAAA;EACV,QAAA,GAAW,uBAAA;EACX,KAAA,GAAQ,KAAA,CAAM,SAAA;EACd,WAAA,GAAc,KAAA,CAAM,SAAA;AAAA,IAClB,IAAA,CAAK,KAAA,CAAM,cAAA;;;AAJf;;;;;;;;;;;;;;;;;;;;;;;AAmCA;;;;iBAAgB,eAAA,CAAA;EACd,QAAA;EACA,KAAA;EACA,WAAA;EACA,SAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,oBAAA,GAAoB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/esm/components/chart-card.js

@@ -13,6 +13,35 @@ const hoverTintClasses = new Map([
 	["orange", "group-hover:bg-orange-500/[0.03]"],
 	["default", "group-hover:bg-slate-500/[0.02]"]
 ]);
+/**
+* Card chrome (title + description + border) for a chart. Wrap every
+* `AnalyticsChart` in this so the chart has context. Also used around raw
+* Recharts components paired with `DesignChartContainer` for non-time-series
+* fallbacks.
+*
+* ```tsx
+* // Time-series chart (preferred):
+* <DesignChartCard title="Signups" description="Last 30 days">
+*   <AnalyticsChart data={data} state={state} onChange={setState} />
+* </DesignChartCard>
+*
+* // Non-time-series fallback (static ranking, distribution, etc.):
+* <DesignChartCard title="Top referrers" description="This month">
+*   <DesignChartContainer config={chartConfig} maxHeight={300}>
+*     <Recharts.BarChart data={data}>
+*       <Recharts.CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />
+*       <Recharts.XAxis dataKey="name" tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 12 }} />
+*       <Recharts.YAxis tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 12 }} />
+*       <Recharts.Tooltip content={<DesignChartTooltipContent />} />
+*       <Recharts.Bar dataKey="count" fill={getDesignChartColor(0)} radius={[4, 4, 0, 0]} />
+*     </Recharts.BarChart>
+*   </DesignChartContainer>
+* </DesignChartCard>
+* ```
+*
+* `chartConfig` for `DesignChartContainer` maps each `dataKey` to its label and color:
+* `{ count: { label: "Count", color: getDesignChartColor(0) } }`.
+*/
 function DesignChartCard({ gradient = "default", title, description, className, children, ...props }) {
 	const hoverTintClass = hoverTintClasses.get(gradient) ?? "group-hover:bg-slate-500/[0.02]";
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: `

package/dist/esm/components/chart-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"chart-card.js","names":[],"sources":["../../../src/components/chart-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"@stackframe/stack-ui\";\nimport React from \"react\";\n\ntype DesignChartCardGradient = \"blue\" | \"cyan\" | \"purple\" | \"green\" | \"orange\" | \"default\";\n\nconst hoverTintClasses = new Map<DesignChartCardGradient, string>([\n  [\"blue\", \"group-hover:bg-blue-500/[0.03]\"],\n  [\"cyan\", \"group-hover:bg-cyan-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]);\n\nexport type DesignChartCardProps = {\n  gradient?: DesignChartCardGradient,\n  title?: React.ReactNode,\n  description?: React.ReactNode,\n} & Omit<React.ComponentProps<\"div\">, \"title\">;\n\nexport function DesignChartCard({\n  gradient = \"default\",\n  title,\n  description,\n  className,\n  children,\n  ...props\n}: DesignChartCardProps) {\n  const hoverTintClass = hoverTintClasses.get(gradient) ?? \"group-hover:bg-slate-500/[0.02]\";\n\n  return (\n    <>\n      <style dangerouslySetInnerHTML={{ __html: `\n        .design-chart-card-tooltip-escape .recharts-tooltip-wrapper {\n          z-index: 9999 !important;\n          overflow: visible !important;\n        }\n        .design-chart-card-tooltip-escape .recharts-tooltip-wrapper > * {\n          overflow: visible !important;\n        }\n      ` }} />\n      <div\n        className={cn(\n          \"group relative rounded-2xl bg-white/90 dark:bg-background/60 backdrop-blur-xl transition-all duration-150 hover:transition-none design-chart-card-tooltip-escape\",\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-sm hover:shadow-md hover:z-10\",\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 overflow-hidden\" />\n        <div\n          className={cn(\n            \"absolute inset-0 transition-colors duration-150 group-hover:transition-none pointer-events-none rounded-2xl overflow-hidden\",\n            hoverTintClass\n          )}\n        />\n        <div className=\"relative h-full flex flex-col p-4\">\n          {(title || description) && (\n            <div className=\"mb-3\">\n              {title && <h3 className=\"text-sm font-semibold text-foreground\">{title}</h3>}\n              {description && <p className=\"text-xs text-muted-foreground mt-0.5\">{description}</p>}\n            </div>\n          )}\n          {children}\n        </div>\n      </div>\n    </>\n  );\n}\n"],"mappings":";;;;;;;AAOA,MAAM,mBAAmB,IAAI,IAAqC;CAChE,CAAC,QAAQ,iCAAiC;CAC1C,CAAC,QAAQ,iCAAiC;CAC1C,CAAC,UAAU,mCAAmC;CAC9C,CAAC,SAAS,oCAAoC;CAC9C,CAAC,UAAU,mCAAmC;CAC9C,CAAC,WAAW,kCAAkC;CAC/C,CAAC;AAQF,SAAgB,gBAAgB,EAC9B,WAAW,WACX,OACA,aACA,WACA,UACA,GAAG,SACoB;CACvB,MAAM,iBAAiB,iBAAiB,IAAI,SAAS,IAAI;AAEzD,QACE,4CACE,oBAAC,WAAM,yBAAyB,EAAE,QAAQ;;;;;;;;SAQvC,GAAI,EACP,qBAAC;EACC,WAAW,GACT,oKACA,sGACA,wCACA,UACD;EACD,GAAI;;GAEJ,oBAAC,SAAI,WAAU,yJAAyJ;GACxK,oBAAC,SACC,WAAW,GACT,+HACA,eACD,GACD;GACF,qBAAC;IAAI,WAAU;gBACX,SAAS,gBACT,qBAAC;KAAI,WAAU;gBACZ,SAAS,oBAAC;MAAG,WAAU;gBAAyC;OAAW,EAC3E,eAAe,oBAAC;MAAE,WAAU;gBAAwC;OAAgB;MACjF,EAEP;KACG;;GACF,IACL"}
+{"version":3,"file":"chart-card.js","names":[],"sources":["../../../src/components/chart-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"@stackframe/stack-ui\";\nimport React from \"react\";\n\ntype DesignChartCardGradient = \"blue\" | \"cyan\" | \"purple\" | \"green\" | \"orange\" | \"default\";\n\nconst hoverTintClasses = new Map<DesignChartCardGradient, string>([\n  [\"blue\", \"group-hover:bg-blue-500/[0.03]\"],\n  [\"cyan\", \"group-hover:bg-cyan-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]);\n\nexport type DesignChartCardProps = {\n  gradient?: DesignChartCardGradient,\n  title?: React.ReactNode,\n  description?: React.ReactNode,\n} & Omit<React.ComponentProps<\"div\">, \"title\">;\n\n/**\n * Card chrome (title + description + border) for a chart. Wrap every\n * `AnalyticsChart` in this so the chart has context. Also used around raw\n * Recharts components paired with `DesignChartContainer` for non-time-series\n * fallbacks.\n *\n * ```tsx\n * // Time-series chart (preferred):\n * <DesignChartCard title=\"Signups\" description=\"Last 30 days\">\n *   <AnalyticsChart data={data} state={state} onChange={setState} />\n * </DesignChartCard>\n *\n * // Non-time-series fallback (static ranking, distribution, etc.):\n * <DesignChartCard title=\"Top referrers\" description=\"This month\">\n *   <DesignChartContainer config={chartConfig} maxHeight={300}>\n *     <Recharts.BarChart data={data}>\n *       <Recharts.CartesianGrid strokeDasharray=\"3 3\" stroke=\"hsl(var(--border))\" />\n *       <Recharts.XAxis dataKey=\"name\" tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 12 }} />\n *       <Recharts.YAxis tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 12 }} />\n *       <Recharts.Tooltip content={<DesignChartTooltipContent />} />\n *       <Recharts.Bar dataKey=\"count\" fill={getDesignChartColor(0)} radius={[4, 4, 0, 0]} />\n *     </Recharts.BarChart>\n *   </DesignChartContainer>\n * </DesignChartCard>\n * ```\n *\n * `chartConfig` for `DesignChartContainer` maps each `dataKey` to its label and color:\n * `{ count: { label: \"Count\", color: getDesignChartColor(0) } }`.\n */\nexport function DesignChartCard({\n  gradient = \"default\",\n  title,\n  description,\n  className,\n  children,\n  ...props\n}: DesignChartCardProps) {\n  const hoverTintClass = hoverTintClasses.get(gradient) ?? \"group-hover:bg-slate-500/[0.02]\";\n\n  return (\n    <>\n      <style dangerouslySetInnerHTML={{ __html: `\n        .design-chart-card-tooltip-escape .recharts-tooltip-wrapper {\n          z-index: 9999 !important;\n          overflow: visible !important;\n        }\n        .design-chart-card-tooltip-escape .recharts-tooltip-wrapper > * {\n          overflow: visible !important;\n        }\n      ` }} />\n      <div\n        className={cn(\n          \"group relative rounded-2xl bg-white/90 dark:bg-background/60 backdrop-blur-xl transition-all duration-150 hover:transition-none design-chart-card-tooltip-escape\",\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-sm hover:shadow-md hover:z-10\",\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 overflow-hidden\" />\n        <div\n          className={cn(\n            \"absolute inset-0 transition-colors duration-150 group-hover:transition-none pointer-events-none rounded-2xl overflow-hidden\",\n            hoverTintClass\n          )}\n        />\n        <div className=\"relative h-full flex flex-col p-4\">\n          {(title || description) && (\n            <div className=\"mb-3\">\n              {title && <h3 className=\"text-sm font-semibold text-foreground\">{title}</h3>}\n              {description && <p className=\"text-xs text-muted-foreground mt-0.5\">{description}</p>}\n            </div>\n          )}\n          {children}\n        </div>\n      </div>\n    </>\n  );\n}\n"],"mappings":";;;;;;;AAOA,MAAM,mBAAmB,IAAI,IAAqC;CAChE,CAAC,QAAQ,iCAAiC;CAC1C,CAAC,QAAQ,iCAAiC;CAC1C,CAAC,UAAU,mCAAmC;CAC9C,CAAC,SAAS,oCAAoC;CAC9C,CAAC,UAAU,mCAAmC;CAC9C,CAAC,WAAW,kCAAkC;CAC/C,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCF,SAAgB,gBAAgB,EAC9B,WAAW,WACX,OACA,aACA,WACA,UACA,GAAG,SACoB;CACvB,MAAM,iBAAiB,iBAAiB,IAAI,SAAS,IAAI;AAEzD,QACE,4CACE,oBAAC,WAAM,yBAAyB,EAAE,QAAQ;;;;;;;;SAQvC,GAAI,EACP,qBAAC;EACC,WAAW,GACT,oKACA,sGACA,wCACA,UACD;EACD,GAAI;;GAEJ,oBAAC,SAAI,WAAU,yJAAyJ;GACxK,oBAAC,SACC,WAAW,GACT,+HACA,eACD,GACD;GACF,qBAAC;IAAI,WAAU;gBACX,SAAS,gBACT,qBAAC;KAAI,WAAU;gBACZ,SAAS,oBAAC;MAAG,WAAU;gBAAyC;OAAW,EAC3E,eAAe,oBAAC;MAAE,WAAU;gBAAwC;OAAgB;MACjF,EAEP;KACG;;GACF,IACL"}

package/dist/esm/components/chart-legend.d.ts

@@ -2,11 +2,10 @@ import * as React$1 from "react";
 import * as RechartsPrimitive from "recharts";
 
 //#region src/components/chart-legend.d.ts
-declare const DesignChartLegend: typeof RechartsPrimitive.Legend;
 declare const DesignChartLegendContent: React$1.ForwardRefExoticComponent<Omit<React$1.ClassAttributes<HTMLDivElement> & React$1.HTMLAttributes<HTMLDivElement> & Pick<RechartsPrimitive.LegendProps, "verticalAlign" | "payload"> & {
   hideIcon?: boolean;
   nameKey?: string;
 }, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 //#endregion
-export { DesignChartLegend, DesignChartLegendContent };
+export { DesignChartLegendContent };
 //# sourceMappingURL=chart-legend.d.ts.map