@stackframe/dashboard-ui-components 2.8.84 → 2.8.86

package/dist/esm/components/empty-state.d.ts

@@ -9,6 +9,22 @@ type DesignEmptyStateProps = {
   children?: React.ReactNode;
   className?: string;
 };
+/**
+ * Centered "no data" placeholder. Show this inside a `DataGrid` via the
+ * `emptyState` prop, inside a chart when a query returns zero rows, or
+ * inside a card when a section has nothing to display.
+ *
+ * ```tsx
+ * <DesignEmptyState
+ *   icon={SearchIcon}
+ *   title="No results"
+ *   description="Try adjusting your filters."
+ * />
+ * ```
+ *
+ * Prefer this over a raw "No data" div — it handles spacing, typography,
+ * and the optional icon for you. `icon` is a component type, not a rendered node.
+ */
 declare function DesignEmptyState({
   icon: Icon,
   title,

package/dist/esm/components/empty-state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"empty-state.d.ts","names":[],"sources":["../../../src/components/empty-state.tsx"],"mappings":";;;;KAKY,qBAAA;EACV,IAAA,GAAO,KAAA,CAAM,WAAA;EACb,KAAA;EACA,WAAA;EACA,QAAA,GAAW,KAAA,CAAM,SAAA;EACjB,SAAA;AAAA;AAAA,iBAGc,gBAAA,CAAA;EACd,IAAA,EAAM,IAAA;EACN,KAAA;EACA,WAAA;EACA,QAAA;EACA;AAAA,GACC,qBAAA,GAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"empty-state.d.ts","names":[],"sources":["../../../src/components/empty-state.tsx"],"mappings":";;;;KAKY,qBAAA;EACV,IAAA,GAAO,KAAA,CAAM,WAAA;EACb,KAAA;EACA,WAAA;EACA,QAAA,GAAW,KAAA,CAAM,SAAA;EACjB,SAAA;AAAA;;;;;;;;;;;;AAmBF;;;;;iBAAgB,gBAAA,CAAA;EACd,IAAA,EAAM,IAAA;EACN,KAAA;EACA,WAAA;EACA,QAAA;EACA;AAAA,GACC,qBAAA,GAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/esm/components/empty-state.js

@@ -5,6 +5,22 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
 
 //#region src/components/empty-state.tsx
+/**
+* Centered "no data" placeholder. Show this inside a `DataGrid` via the
+* `emptyState` prop, inside a chart when a query returns zero rows, or
+* inside a card when a section has nothing to display.
+*
+* ```tsx
+* <DesignEmptyState
+*   icon={SearchIcon}
+*   title="No results"
+*   description="Try adjusting your filters."
+* />
+* ```
+*
+* Prefer this over a raw "No data" div — it handles spacing, typography,
+* and the optional icon for you. `icon` is a component type, not a rendered node.
+*/
 function DesignEmptyState({ icon: Icon, title = "No data available", description, children, className }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("flex flex-col items-center justify-center py-12 px-6 text-center", className),

package/dist/esm/components/empty-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"empty-state.js","names":[],"sources":["../../../src/components/empty-state.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"@stackframe/stack-ui\";\nimport React from \"react\";\n\nexport type DesignEmptyStateProps = {\n  icon?: React.ElementType,\n  title?: string,\n  description?: string,\n  children?: React.ReactNode,\n  className?: string,\n};\n\nexport function DesignEmptyState({\n  icon: Icon,\n  title = \"No data available\",\n  description,\n  children,\n  className,\n}: DesignEmptyStateProps) {\n  return (\n    <div\n      className={cn(\n        \"flex flex-col items-center justify-center py-12 px-6 text-center\",\n        className\n      )}\n    >\n      {Icon && (\n        <div className=\"mb-4\">\n          <Icon className=\"h-10 w-10 text-muted-foreground/30\" />\n        </div>\n      )}\n      <h3 className=\"text-sm font-medium text-foreground\">\n        {title}\n      </h3>\n      {description && (\n        <p className=\"mt-1 text-xs text-muted-foreground max-w-[280px]\">\n          {description}\n        </p>\n      )}\n      {children && (\n        <div className=\"mt-4\">\n          {children}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAaA,SAAgB,iBAAiB,EAC/B,MAAM,MACN,QAAQ,qBACR,aACA,UACA,aACwB;AACxB,QACE,qBAAC;EACC,WAAW,GACT,oEACA,UACD;;GAEA,QACC,oBAAC;IAAI,WAAU;cACb,oBAAC,QAAK,WAAU,uCAAuC;KACnD;GAER,oBAAC;IAAG,WAAU;cACX;KACE;GACJ,eACC,oBAAC;IAAE,WAAU;cACV;KACC;GAEL,YACC,oBAAC;IAAI,WAAU;IACZ;KACG;;GAEJ"}
+{"version":3,"file":"empty-state.js","names":[],"sources":["../../../src/components/empty-state.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"@stackframe/stack-ui\";\nimport React from \"react\";\n\nexport type DesignEmptyStateProps = {\n  icon?: React.ElementType,\n  title?: string,\n  description?: string,\n  children?: React.ReactNode,\n  className?: string,\n};\n\n/**\n * Centered \"no data\" placeholder. Show this inside a `DataGrid` via the\n * `emptyState` prop, inside a chart when a query returns zero rows, or\n * inside a card when a section has nothing to display.\n *\n * ```tsx\n * <DesignEmptyState\n *   icon={SearchIcon}\n *   title=\"No results\"\n *   description=\"Try adjusting your filters.\"\n * />\n * ```\n *\n * Prefer this over a raw \"No data\" div — it handles spacing, typography,\n * and the optional icon for you. `icon` is a component type, not a rendered node.\n */\nexport function DesignEmptyState({\n  icon: Icon,\n  title = \"No data available\",\n  description,\n  children,\n  className,\n}: DesignEmptyStateProps) {\n  return (\n    <div\n      className={cn(\n        \"flex flex-col items-center justify-center py-12 px-6 text-center\",\n        className\n      )}\n    >\n      {Icon && (\n        <div className=\"mb-4\">\n          <Icon className=\"h-10 w-10 text-muted-foreground/30\" />\n        </div>\n      )}\n      <h3 className=\"text-sm font-medium text-foreground\">\n        {title}\n      </h3>\n      {description && (\n        <p className=\"mt-1 text-xs text-muted-foreground max-w-[280px]\">\n          {description}\n        </p>\n      )}\n      {children && (\n        <div className=\"mt-4\">\n          {children}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA6BA,SAAgB,iBAAiB,EAC/B,MAAM,MACN,QAAQ,qBACR,aACA,UACA,aACwB;AACxB,QACE,qBAAC;EACC,WAAW,GACT,oEACA,UACD;;GAEA,QACC,oBAAC;IAAI,WAAU;cACb,oBAAC,QAAK,WAAU,uCAAuC;KACnD;GAER,oBAAC;IAAG,WAAU;cACX;KACE;GACJ,eACC,oBAAC;IAAE,WAAU;cACV;KACC;GAEL,YACC,oBAAC;IAAI,WAAU;IACZ;KACG;;GAEJ"}

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

@@ -16,6 +16,30 @@ type DesignMetricCardProps = {
   icon?: React.ElementType;
   gradient?: DesignMetricCardGradient;
 } & Omit<React.ComponentProps<"div">, "children">;
+/**
+ * KPI card for big-number metrics (users, revenue, signups, etc.).
+ * Use this instead of a plain `DesignCard` when the value is the focal point.
+ *
+ * ```tsx
+ * <DesignMetricCard
+ *   label="Total Users"
+ *   value="1,234"
+ *   description="+12% from last month"
+ *   trend={{ direction: "up", value: 12, label: "vs. last period" }}
+ *   icon={UsersIcon}
+ *   gradient="blue"
+ * />
+ * ```
+ *
+ * Notes:
+ * - `label` is the short caption (NOT `title`).
+ * - `value` can be a pre-formatted string ("1,234") or a number — prefer
+ *   strings so you control the format.
+ * - `description` is the subline (NOT `subtitle`).
+ * - `trend.value` is a NUMBER, not a pre-formatted "12%" string. The card
+ *   renders the arrow and formatting.
+ * - `icon` is a component type (e.g. `UsersIcon`), not a rendered node.
+ */
 declare function DesignMetricCard({
   label,
   value,

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

@@ -1 +1 @@
-{"version":3,"file":"metric-card.d.ts","names":[],"sources":["../../../src/components/metric-card.tsx"],"mappings":";;;;KAKK,wBAAA;AAAA,KAWO,qBAAA;EACV,KAAA;EACA,SAAA;EACA,KAAA;AAAA;AAAA,KAGU,qBAAA;EACV,KAAA;EACA,KAAA;EACA,WAAA;EACA,KAAA,GAAQ,qBAAA;EACR,IAAA,GAAO,KAAA,CAAM,WAAA;EACb,QAAA,GAAW,wBAAA;AAAA,IACT,IAAA,CAAK,KAAA,CAAM,cAAA;AAAA,iBAEC,gBAAA,CAAA;EACd,KAAA;EACA,KAAA;EACA,WAAA;EACA,KAAA;EACA,IAAA,EAAM,IAAA;EACN,QAAA;EACA,SAAA;EAAA,GACG;AAAA,GACF,qBAAA,GAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"metric-card.d.ts","names":[],"sources":["../../../src/components/metric-card.tsx"],"mappings":";;;;KAKK,wBAAA;AAAA,KAWO,qBAAA;EACV,KAAA;EACA,SAAA;EACA,KAAA;AAAA;AAAA,KAGU,qBAAA;EACV,KAAA;EACA,KAAA;EACA,WAAA;EACA,KAAA,GAAQ,qBAAA;EACR,IAAA,GAAO,KAAA,CAAM,WAAA;EACb,QAAA,GAAW,wBAAA;AAAA,IACT,IAAA,CAAK,KAAA,CAAM,cAAA;;;;AAPf;;;;;;;;;;;;;;;;;;;;;iBAiCgB,gBAAA,CAAA;EACd,KAAA;EACA,KAAA;EACA,WAAA;EACA,KAAA;EACA,IAAA,EAAM,IAAA;EACN,QAAA;EACA,SAAA;EAAA,GACG;AAAA,GACF,qBAAA,GAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

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

@@ -13,6 +13,30 @@ const hoverTintClasses = new Map([
 	["orange", "group-hover:bg-orange-500/[0.03]"],
 	["default", "group-hover:bg-slate-500/[0.02]"]
 ]);
+/**
+* KPI card for big-number metrics (users, revenue, signups, etc.).
+* Use this instead of a plain `DesignCard` when the value is the focal point.
+*
+* ```tsx
+* <DesignMetricCard
+*   label="Total Users"
+*   value="1,234"
+*   description="+12% from last month"
+*   trend={{ direction: "up", value: 12, label: "vs. last period" }}
+*   icon={UsersIcon}
+*   gradient="blue"
+* />
+* ```
+*
+* Notes:
+* - `label` is the short caption (NOT `title`).
+* - `value` can be a pre-formatted string ("1,234") or a number — prefer
+*   strings so you control the format.
+* - `description` is the subline (NOT `subtitle`).
+* - `trend.value` is a NUMBER, not a pre-formatted "12%" string. The card
+*   renders the arrow and formatting.
+* - `icon` is a component type (e.g. `UsersIcon`), not a rendered node.
+*/
 function DesignMetricCard({ label, value, description, trend, icon: Icon, gradient = "default", className, ...props }) {
 	const hoverTintClass = hoverTintClasses.get(gradient) ?? "group-hover:bg-slate-500/[0.02]";
 	return /* @__PURE__ */ jsxs("div", {

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

@@ -1 +1 @@
-{"version":3,"file":"metric-card.js","names":[],"sources":["../../../src/components/metric-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"@stackframe/stack-ui\";\nimport React from \"react\";\n\ntype DesignMetricCardGradient = \"blue\" | \"cyan\" | \"purple\" | \"green\" | \"orange\" | \"default\";\n\nconst hoverTintClasses = new Map<DesignMetricCardGradient, 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 DesignMetricCardTrend = {\n  value: number,\n  direction: \"up\" | \"down\",\n  label?: string,\n};\n\nexport type DesignMetricCardProps = {\n  label: string,\n  value: string | number,\n  description?: string,\n  trend?: DesignMetricCardTrend,\n  icon?: React.ElementType,\n  gradient?: DesignMetricCardGradient,\n} & Omit<React.ComponentProps<\"div\">, \"children\">;\n\nexport function DesignMetricCard({\n  label,\n  value,\n  description,\n  trend,\n  icon: Icon,\n  gradient = \"default\",\n  className,\n  ...props\n}: DesignMetricCardProps) {\n  const hoverTintClass = hoverTintClasses.get(gradient) ?? \"group-hover:bg-slate-500/[0.02]\";\n\n  return (\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 overflow-hidden\",\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\",\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:transition-none pointer-events-none rounded-2xl\",\n          hoverTintClass\n        )}\n      />\n      <div className=\"relative p-5\">\n        <div className=\"flex items-start justify-between gap-3\">\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-muted-foreground uppercase tracking-wider\">\n                {label}\n              </span>\n            </div>\n            <div className=\"mt-3 flex items-baseline gap-2\">\n              <span className=\"text-3xl font-bold tabular-nums text-foreground\">\n                {typeof value === \"number\" ? value.toLocaleString() : value}\n              </span>\n              {trend && (\n                <span\n                  className={cn(\n                    \"inline-flex items-center gap-0.5 text-xs font-medium\",\n                    trend.direction === \"up\"\n                      ? \"text-emerald-600 dark:text-emerald-400\"\n                      : \"text-red-600 dark:text-red-400\"\n                  )}\n                >\n                  <svg\n                    className={cn(\"h-3 w-3\", trend.direction === \"down\" && \"rotate-180\")}\n                    viewBox=\"0 0 12 12\"\n                    fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                  >\n                    <path\n                      d=\"M6 2.5V9.5M6 2.5L3 5.5M6 2.5L9 5.5\"\n                      stroke=\"currentColor\"\n                      strokeWidth=\"1.5\"\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                    />\n                  </svg>\n                  {trend.value}%\n                  {trend.label && (\n                    <span className=\"text-muted-foreground ml-0.5\">{trend.label}</span>\n                  )}\n                </span>\n              )}\n            </div>\n            {description && (\n              <p className=\"mt-1 text-xs text-muted-foreground\">\n                {description}\n              </p>\n            )}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAOA,MAAM,mBAAmB,IAAI,IAAsC;CACjE,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;AAiBF,SAAgB,iBAAiB,EAC/B,OACA,OACA,aACA,OACA,MAAM,MACN,WAAW,WACX,WACA,GAAG,SACqB;CACxB,MAAM,iBAAiB,iBAAiB,IAAI,SAAS,IAAI;AAEzD,QACE,qBAAC;EACC,WAAW,GACT,mJACA,sGACA,6BACA,UACD;EACD,GAAI;;GAEJ,oBAAC,SAAI,WAAU,yIAAyI;GACxJ,oBAAC,SACC,WAAW,GACT,+GACA,eACD,GACD;GACF,oBAAC;IAAI,WAAU;cACb,oBAAC;KAAI,WAAU;eACb,qBAAC;MAAI,WAAU;;OACb,qBAAC;QAAI,WAAU;mBACZ,QACC,oBAAC;SAAI,WAAU;mBACb,oBAAC,QAAK,WAAU,8DAA8D;UAC1E,EAER,oBAAC;SAAK,WAAU;mBACb;UACI;SACH;OACN,qBAAC;QAAI,WAAU;mBACb,oBAAC;SAAK,WAAU;mBACb,OAAO,UAAU,WAAW,MAAM,gBAAgB,GAAG;UACjD,EACN,SACC,qBAAC;SACC,WAAW,GACT,wDACA,MAAM,cAAc,OAChB,2CACA,iCACL;;UAED,oBAAC;WACC,WAAW,GAAG,WAAW,MAAM,cAAc,UAAU,aAAa;WACpE,SAAQ;WACR,MAAK;WACL,OAAM;qBAEN,oBAAC;YACC,GAAE;YACF,QAAO;YACP,aAAY;YACZ,eAAc;YACd,gBAAe;aACf;YACE;UACL,MAAM;UAAM;UACZ,MAAM,SACL,oBAAC;WAAK,WAAU;qBAAgC,MAAM;YAAa;;UAEhE;SAEL;OACL,eACC,oBAAC;QAAE,WAAU;kBACV;SACC;;OAEF;MACF;KACF;;GACF"}
+{"version":3,"file":"metric-card.js","names":[],"sources":["../../../src/components/metric-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"@stackframe/stack-ui\";\nimport React from \"react\";\n\ntype DesignMetricCardGradient = \"blue\" | \"cyan\" | \"purple\" | \"green\" | \"orange\" | \"default\";\n\nconst hoverTintClasses = new Map<DesignMetricCardGradient, 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 DesignMetricCardTrend = {\n  value: number,\n  direction: \"up\" | \"down\",\n  label?: string,\n};\n\nexport type DesignMetricCardProps = {\n  label: string,\n  value: string | number,\n  description?: string,\n  trend?: DesignMetricCardTrend,\n  icon?: React.ElementType,\n  gradient?: DesignMetricCardGradient,\n} & Omit<React.ComponentProps<\"div\">, \"children\">;\n\n/**\n * KPI card for big-number metrics (users, revenue, signups, etc.).\n * Use this instead of a plain `DesignCard` when the value is the focal point.\n *\n * ```tsx\n * <DesignMetricCard\n *   label=\"Total Users\"\n *   value=\"1,234\"\n *   description=\"+12% from last month\"\n *   trend={{ direction: \"up\", value: 12, label: \"vs. last period\" }}\n *   icon={UsersIcon}\n *   gradient=\"blue\"\n * />\n * ```\n *\n * Notes:\n * - `label` is the short caption (NOT `title`).\n * - `value` can be a pre-formatted string (\"1,234\") or a number — prefer\n *   strings so you control the format.\n * - `description` is the subline (NOT `subtitle`).\n * - `trend.value` is a NUMBER, not a pre-formatted \"12%\" string. The card\n *   renders the arrow and formatting.\n * - `icon` is a component type (e.g. `UsersIcon`), not a rendered node.\n */\nexport function DesignMetricCard({\n  label,\n  value,\n  description,\n  trend,\n  icon: Icon,\n  gradient = \"default\",\n  className,\n  ...props\n}: DesignMetricCardProps) {\n  const hoverTintClass = hoverTintClasses.get(gradient) ?? \"group-hover:bg-slate-500/[0.02]\";\n\n  return (\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 overflow-hidden\",\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\",\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:transition-none pointer-events-none rounded-2xl\",\n          hoverTintClass\n        )}\n      />\n      <div className=\"relative p-5\">\n        <div className=\"flex items-start justify-between gap-3\">\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-muted-foreground uppercase tracking-wider\">\n                {label}\n              </span>\n            </div>\n            <div className=\"mt-3 flex items-baseline gap-2\">\n              <span className=\"text-3xl font-bold tabular-nums text-foreground\">\n                {typeof value === \"number\" ? value.toLocaleString() : value}\n              </span>\n              {trend && (\n                <span\n                  className={cn(\n                    \"inline-flex items-center gap-0.5 text-xs font-medium\",\n                    trend.direction === \"up\"\n                      ? \"text-emerald-600 dark:text-emerald-400\"\n                      : \"text-red-600 dark:text-red-400\"\n                  )}\n                >\n                  <svg\n                    className={cn(\"h-3 w-3\", trend.direction === \"down\" && \"rotate-180\")}\n                    viewBox=\"0 0 12 12\"\n                    fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                  >\n                    <path\n                      d=\"M6 2.5V9.5M6 2.5L3 5.5M6 2.5L9 5.5\"\n                      stroke=\"currentColor\"\n                      strokeWidth=\"1.5\"\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                    />\n                  </svg>\n                  {trend.value}%\n                  {trend.label && (\n                    <span className=\"text-muted-foreground ml-0.5\">{trend.label}</span>\n                  )}\n                </span>\n              )}\n            </div>\n            {description && (\n              <p className=\"mt-1 text-xs text-muted-foreground\">\n                {description}\n              </p>\n            )}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAOA,MAAM,mBAAmB,IAAI,IAAsC;CACjE,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;;;;;;;;;;;;;;;;;;;;;;;;;AAyCF,SAAgB,iBAAiB,EAC/B,OACA,OACA,aACA,OACA,MAAM,MACN,WAAW,WACX,WACA,GAAG,SACqB;CACxB,MAAM,iBAAiB,iBAAiB,IAAI,SAAS,IAAI;AAEzD,QACE,qBAAC;EACC,WAAW,GACT,mJACA,sGACA,6BACA,UACD;EACD,GAAI;;GAEJ,oBAAC,SAAI,WAAU,yIAAyI;GACxJ,oBAAC,SACC,WAAW,GACT,+GACA,eACD,GACD;GACF,oBAAC;IAAI,WAAU;cACb,oBAAC;KAAI,WAAU;eACb,qBAAC;MAAI,WAAU;;OACb,qBAAC;QAAI,WAAU;mBACZ,QACC,oBAAC;SAAI,WAAU;mBACb,oBAAC,QAAK,WAAU,8DAA8D;UAC1E,EAER,oBAAC;SAAK,WAAU;mBACb;UACI;SACH;OACN,qBAAC;QAAI,WAAU;mBACb,oBAAC;SAAK,WAAU;mBACb,OAAO,UAAU,WAAW,MAAM,gBAAgB,GAAG;UACjD,EACN,SACC,qBAAC;SACC,WAAW,GACT,wDACA,MAAM,cAAc,OAChB,2CACA,iCACL;;UAED,oBAAC;WACC,WAAW,GAAG,WAAW,MAAM,cAAc,UAAU,aAAa;WACpE,SAAQ;WACR,MAAK;WACL,OAAM;qBAEN,oBAAC;YACC,GAAE;YACF,QAAO;YACP,aAAY;YACZ,eAAc;YACd,gBAAe;aACf;YACE;UACL,MAAM;UAAM;UACZ,MAAM,SACL,oBAAC;WAAK,WAAU;qBAAgC,MAAM;YAAa;;UAEhE;SAEL;OACL,eACC,oBAAC;QAAE,WAAU;kBACV;SACC;;OAEF;MACF;KACF;;GACF"}

package/dist/esm/components/progress-bar.d.ts

@@ -11,6 +11,16 @@ type DesignProgressBarProps = {
   size?: "sm" | "md" | "lg";
   className?: string;
 };
+/**
+ * Horizontal progress bar for quota / fill-level indicators. Takes a
+ * `value` and optional `max` (defaults to 100 — pass raw values, the
+ * component computes the percentage). Optional label + percentage display.
+ *
+ * ```tsx
+ * <DesignProgressBar value={usedSeats} max={totalSeats} label="Seats used" showPercentage />
+ * <DesignProgressBar value={75} gradient="green" />
+ * ```
+ */
 declare function DesignProgressBar({
   value,
   max,

package/dist/esm/components/progress-bar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"progress-bar.d.ts","names":[],"sources":["../../../src/components/progress-bar.tsx"],"mappings":";;;KAIK,yBAAA;AAAA,KAWO,sBAAA;EACV,KAAA;EACA,GAAA;EACA,QAAA,GAAW,yBAAA;EACX,KAAA;EACA,cAAA;EACA,IAAA;EACA,SAAA;AAAA;AAAA,iBAGc,iBAAA,CAAA;EACd,KAAA;EACA,GAAA;EACA,QAAA;EACA,KAAA;EACA,cAAA;EACA,IAAA;EACA;AAAA,GACC,sBAAA,GAAsB,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"progress-bar.d.ts","names":[],"sources":["../../../src/components/progress-bar.tsx"],"mappings":";;;KAIK,yBAAA;AAAA,KAWO,sBAAA;EACV,KAAA;EACA,GAAA;EACA,QAAA,GAAW,yBAAA;EACX,KAAA;EACA,cAAA;EACA,IAAA;EACA,SAAA;AAAA;;;;;;;;;;;iBAac,iBAAA,CAAA;EACd,KAAA;EACA,GAAA;EACA,QAAA;EACA,KAAA;EACA,cAAA;EACA,IAAA;EACA;AAAA,GACC,sBAAA,GAAsB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/esm/components/progress-bar.js

@@ -12,6 +12,16 @@ const fillClasses = new Map([
 	["orange", "bg-amber-500 dark:bg-amber-400"],
 	["default", "bg-foreground/60"]
 ]);
+/**
+* Horizontal progress bar for quota / fill-level indicators. Takes a
+* `value` and optional `max` (defaults to 100 — pass raw values, the
+* component computes the percentage). Optional label + percentage display.
+*
+* ```tsx
+* <DesignProgressBar value={usedSeats} max={totalSeats} label="Seats used" showPercentage />
+* <DesignProgressBar value={75} gradient="green" />
+* ```
+*/
 function DesignProgressBar({ value, max = 100, gradient = "default", label, showPercentage = false, size = "md", className }) {
 	const percentage = max > 0 ? Math.min(Math.max(value / max * 100, 0), 100) : 0;
 	const fillClass = fillClasses.get(gradient) ?? "bg-foreground/60";

package/dist/esm/components/progress-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-bar.js","names":[],"sources":["../../../src/components/progress-bar.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"@stackframe/stack-ui\";\n\ntype DesignProgressBarGradient = \"blue\" | \"cyan\" | \"purple\" | \"green\" | \"orange\" | \"default\";\n\nconst fillClasses = new Map<DesignProgressBarGradient, string>([\n  [\"blue\", \"bg-blue-500 dark:bg-blue-400\"],\n  [\"cyan\", \"bg-cyan-500 dark:bg-cyan-400\"],\n  [\"purple\", \"bg-purple-500 dark:bg-purple-400\"],\n  [\"green\", \"bg-emerald-500 dark:bg-emerald-400\"],\n  [\"orange\", \"bg-amber-500 dark:bg-amber-400\"],\n  [\"default\", \"bg-foreground/60\"],\n]);\n\nexport type DesignProgressBarProps = {\n  value: number,\n  max?: number,\n  gradient?: DesignProgressBarGradient,\n  label?: string,\n  showPercentage?: boolean,\n  size?: \"sm\" | \"md\" | \"lg\",\n  className?: string,\n};\n\nexport function DesignProgressBar({\n  value,\n  max = 100,\n  gradient = \"default\",\n  label,\n  showPercentage = false,\n  size = \"md\",\n  className,\n}: DesignProgressBarProps) {\n  const percentage = max > 0 ? Math.min(Math.max((value / max) * 100, 0), 100) : 0;\n  const fillClass = fillClasses.get(gradient) ?? \"bg-foreground/60\";\n\n  const trackHeight = size === \"sm\" ? \"h-1.5\" : size === \"lg\" ? \"h-3\" : \"h-2\";\n\n  return (\n    <div className={cn(\"w-full\", className)}>\n      {(label || showPercentage) && (\n        <div className=\"flex items-center justify-between mb-2\">\n          {label && (\n            <span className=\"text-xs font-medium text-muted-foreground\">\n              {label}\n            </span>\n          )}\n          {showPercentage && (\n            <span className=\"text-xs font-medium tabular-nums text-foreground\">\n              {Math.round(percentage)}%\n            </span>\n          )}\n        </div>\n      )}\n      <div\n        className={cn(\n          \"w-full rounded-full bg-black/[0.06] dark:bg-white/[0.06] overflow-hidden\",\n          trackHeight\n        )}\n      >\n        <div\n          className={cn(\n            \"h-full rounded-full transition-all duration-300 ease-out\",\n            fillClass\n          )}\n          style={{ width: `${percentage}%` }}\n        />\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAMA,MAAM,cAAc,IAAI,IAAuC;CAC7D,CAAC,QAAQ,+BAA+B;CACxC,CAAC,QAAQ,+BAA+B;CACxC,CAAC,UAAU,mCAAmC;CAC9C,CAAC,SAAS,qCAAqC;CAC/C,CAAC,UAAU,iCAAiC;CAC5C,CAAC,WAAW,mBAAmB;CAChC,CAAC;AAYF,SAAgB,kBAAkB,EAChC,OACA,MAAM,KACN,WAAW,WACX,OACA,iBAAiB,OACjB,OAAO,MACP,aACyB;CACzB,MAAM,aAAa,MAAM,IAAI,KAAK,IAAI,KAAK,IAAK,QAAQ,MAAO,KAAK,EAAE,EAAE,IAAI,GAAG;CAC/E,MAAM,YAAY,YAAY,IAAI,SAAS,IAAI;CAE/C,MAAM,cAAc,SAAS,OAAO,UAAU,SAAS,OAAO,QAAQ;AAEtE,QACE,qBAAC;EAAI,WAAW,GAAG,UAAU,UAAU;cACnC,SAAS,mBACT,qBAAC;GAAI,WAAU;cACZ,SACC,oBAAC;IAAK,WAAU;cACb;KACI,EAER,kBACC,qBAAC;IAAK,WAAU;eACb,KAAK,MAAM,WAAW,EAAC;KACnB;IAEL,EAER,oBAAC;GACC,WAAW,GACT,4EACA,YACD;aAED,oBAAC;IACC,WAAW,GACT,4DACA,UACD;IACD,OAAO,EAAE,OAAO,GAAG,WAAW,IAAI;KAClC;IACE;GACF"}
+{"version":3,"file":"progress-bar.js","names":[],"sources":["../../../src/components/progress-bar.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"@stackframe/stack-ui\";\n\ntype DesignProgressBarGradient = \"blue\" | \"cyan\" | \"purple\" | \"green\" | \"orange\" | \"default\";\n\nconst fillClasses = new Map<DesignProgressBarGradient, string>([\n  [\"blue\", \"bg-blue-500 dark:bg-blue-400\"],\n  [\"cyan\", \"bg-cyan-500 dark:bg-cyan-400\"],\n  [\"purple\", \"bg-purple-500 dark:bg-purple-400\"],\n  [\"green\", \"bg-emerald-500 dark:bg-emerald-400\"],\n  [\"orange\", \"bg-amber-500 dark:bg-amber-400\"],\n  [\"default\", \"bg-foreground/60\"],\n]);\n\nexport type DesignProgressBarProps = {\n  value: number,\n  max?: number,\n  gradient?: DesignProgressBarGradient,\n  label?: string,\n  showPercentage?: boolean,\n  size?: \"sm\" | \"md\" | \"lg\",\n  className?: string,\n};\n\n/**\n * Horizontal progress bar for quota / fill-level indicators. Takes a\n * `value` and optional `max` (defaults to 100 — pass raw values, the\n * component computes the percentage). Optional label + percentage display.\n *\n * ```tsx\n * <DesignProgressBar value={usedSeats} max={totalSeats} label=\"Seats used\" showPercentage />\n * <DesignProgressBar value={75} gradient=\"green\" />\n * ```\n */\nexport function DesignProgressBar({\n  value,\n  max = 100,\n  gradient = \"default\",\n  label,\n  showPercentage = false,\n  size = \"md\",\n  className,\n}: DesignProgressBarProps) {\n  const percentage = max > 0 ? Math.min(Math.max((value / max) * 100, 0), 100) : 0;\n  const fillClass = fillClasses.get(gradient) ?? \"bg-foreground/60\";\n\n  const trackHeight = size === \"sm\" ? \"h-1.5\" : size === \"lg\" ? \"h-3\" : \"h-2\";\n\n  return (\n    <div className={cn(\"w-full\", className)}>\n      {(label || showPercentage) && (\n        <div className=\"flex items-center justify-between mb-2\">\n          {label && (\n            <span className=\"text-xs font-medium text-muted-foreground\">\n              {label}\n            </span>\n          )}\n          {showPercentage && (\n            <span className=\"text-xs font-medium tabular-nums text-foreground\">\n              {Math.round(percentage)}%\n            </span>\n          )}\n        </div>\n      )}\n      <div\n        className={cn(\n          \"w-full rounded-full bg-black/[0.06] dark:bg-white/[0.06] overflow-hidden\",\n          trackHeight\n        )}\n      >\n        <div\n          className={cn(\n            \"h-full rounded-full transition-all duration-300 ease-out\",\n            fillClass\n          )}\n          style={{ width: `${percentage}%` }}\n        />\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAMA,MAAM,cAAc,IAAI,IAAuC;CAC7D,CAAC,QAAQ,+BAA+B;CACxC,CAAC,QAAQ,+BAA+B;CACxC,CAAC,UAAU,mCAAmC;CAC9C,CAAC,SAAS,qCAAqC;CAC/C,CAAC,UAAU,iCAAiC;CAC5C,CAAC,WAAW,mBAAmB;CAChC,CAAC;;;;;;;;;;;AAsBF,SAAgB,kBAAkB,EAChC,OACA,MAAM,KACN,WAAW,WACX,OACA,iBAAiB,OACjB,OAAO,MACP,aACyB;CACzB,MAAM,aAAa,MAAM,IAAI,KAAK,IAAI,KAAK,IAAK,QAAQ,MAAO,KAAK,EAAE,EAAE,IAAI,GAAG;CAC/E,MAAM,YAAY,YAAY,IAAI,SAAS,IAAI;CAE/C,MAAM,cAAc,SAAS,OAAO,UAAU,SAAS,OAAO,QAAQ;AAEtE,QACE,qBAAC;EAAI,WAAW,GAAG,UAAU,UAAU;cACnC,SAAS,mBACT,qBAAC;GAAI,WAAU;cACZ,SACC,oBAAC;IAAK,WAAU;cACb;KACI,EAER,kBACC,qBAAC;IAAK,WAAU;eACb,KAAK,MAAM,WAAW,EAAC;KACnB;IAEL,EAER,oBAAC;GACC,WAAW,GACT,4EACA,YACD;aAED,oBAAC;IACC,WAAW,GACT,4DACA,UACD;IACD,OAAO,EAAE,OAAO,GAAG,WAAW,IAAI;KAClC;IACE;GACF"}

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

@@ -4,6 +4,15 @@ import * as react_jsx_runtime0 from "react/jsx-runtime";
 type DesignSeparatorProps = {
   orientation?: "horizontal" | "vertical";
 } & React.HTMLAttributes<HTMLDivElement>;
+/**
+ * Thin divider line. Use `orientation="vertical"` inside a flex row to
+ * separate inline groups, or omit for a horizontal rule between sections.
+ *
+ * ```tsx
+ * <DesignSeparator />
+ * <DesignSeparator orientation="vertical" className="h-6" />
+ * ```
+ */
 declare function DesignSeparator({
   orientation,
   className,

package/dist/esm/components/separator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"separator.d.ts","names":[],"sources":["../../../src/components/separator.tsx"],"mappings":";;;KAIY,oBAAA;EACV,WAAA;AAAA,IACE,KAAA,CAAM,cAAA,CAAe,cAAA;AAAA,iBAET,eAAA,CAAA;EACd,WAAA;EACA,SAAA;EAAA,GACG;AAAA,GACF,oBAAA,GAAoB,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"separator.d.ts","names":[],"sources":["../../../src/components/separator.tsx"],"mappings":";;;KAIY,oBAAA;EACV,WAAA;AAAA,IACE,KAAA,CAAM,cAAA,CAAe,cAAA;AAFzB;;;;;;;;;AAAA,iBAagB,eAAA,CAAA;EACd,WAAA;EACA,SAAA;EAAA,GACG;AAAA,GACF,oBAAA,GAAoB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/esm/components/separator.js

@@ -4,6 +4,15 @@ import { cn } from "@stackframe/stack-ui";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/separator.tsx
+/**
+* Thin divider line. Use `orientation="vertical"` inside a flex row to
+* separate inline groups, or omit for a horizontal rule between sections.
+*
+* ```tsx
+* <DesignSeparator />
+* <DesignSeparator orientation="vertical" className="h-6" />
+* ```
+*/
 function DesignSeparator({ orientation = "horizontal", className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		role: "separator",

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

@@ -1 +1 @@
-{"version":3,"file":"separator.js","names":[],"sources":["../../../src/components/separator.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"@stackframe/stack-ui\";\n\nexport type DesignSeparatorProps = {\n  orientation?: \"horizontal\" | \"vertical\",\n} & React.HTMLAttributes<HTMLDivElement>;\n\nexport function DesignSeparator({\n  orientation = \"horizontal\",\n  className,\n  ...props\n}: DesignSeparatorProps) {\n  return (\n    <div\n      role=\"separator\"\n      aria-orientation={orientation}\n      className={cn(\n        orientation === \"horizontal\"\n          ? \"h-[1px] w-full bg-black/[0.08] dark:bg-white/[0.06]\"\n          : \"w-[1px] h-full bg-black/[0.08] dark:bg-white/[0.06]\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n"],"mappings":";;;;;;AAQA,SAAgB,gBAAgB,EAC9B,cAAc,cACd,WACA,GAAG,SACoB;AACvB,QACE,oBAAC;EACC,MAAK;EACL,oBAAkB;EAClB,WAAW,GACT,gBAAgB,eACZ,wDACA,uDACJ,UACD;EACD,GAAI;GACJ"}
+{"version":3,"file":"separator.js","names":[],"sources":["../../../src/components/separator.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"@stackframe/stack-ui\";\n\nexport type DesignSeparatorProps = {\n  orientation?: \"horizontal\" | \"vertical\",\n} & React.HTMLAttributes<HTMLDivElement>;\n\n/**\n * Thin divider line. Use `orientation=\"vertical\"` inside a flex row to\n * separate inline groups, or omit for a horizontal rule between sections.\n *\n * ```tsx\n * <DesignSeparator />\n * <DesignSeparator orientation=\"vertical\" className=\"h-6\" />\n * ```\n */\nexport function DesignSeparator({\n  orientation = \"horizontal\",\n  className,\n  ...props\n}: DesignSeparatorProps) {\n  return (\n    <div\n      role=\"separator\"\n      aria-orientation={orientation}\n      className={cn(\n        orientation === \"horizontal\"\n          ? \"h-[1px] w-full bg-black/[0.08] dark:bg-white/[0.06]\"\n          : \"w-[1px] h-full bg-black/[0.08] dark:bg-white/[0.06]\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;AAiBA,SAAgB,gBAAgB,EAC9B,cAAc,cACd,WACA,GAAG,SACoB;AACvB,QACE,oBAAC;EACC,MAAK;EACL,oBAAkB;EAClB,WAAW,GACT,gBAAgB,eACZ,wDACA,uDACJ,UACD;EACD,GAAI;GACJ"}

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

@@ -3,6 +3,18 @@ import React from "react";
 
 //#region src/components/skeleton.d.ts
 type DesignSkeletonProps = React.HTMLAttributes<HTMLDivElement>;
+/**
+ * Animated placeholder block. Use while data is loading — size it via
+ * `className` to match the content it's standing in for.
+ *
+ * ```tsx
+ * <DesignSkeleton className="h-4 w-[200px]" />
+ * <DesignSkeleton className="h-24 w-full rounded-lg" />
+ * ```
+ *
+ * Rule: always show a skeleton during initial load, not a spinner or
+ * "Loading..." text. Skeletons preserve layout and feel faster.
+ */
 declare function DesignSkeleton({
   className,
   ...props

package/dist/esm/components/skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.d.ts","names":[],"sources":["../../../src/components/skeleton.tsx"],"mappings":";;;;KAKY,mBAAA,GAAsB,KAAA,CAAM,cAAA,CAAe,cAAA;AAAA,iBAEvC,cAAA,CAAA;EAAiB,SAAA;EAAA,GAAc;AAAA,GAAS,mBAAA,GAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"skeleton.d.ts","names":[],"sources":["../../../src/components/skeleton.tsx"],"mappings":";;;;KAKY,mBAAA,GAAsB,KAAA,CAAM,cAAA,CAAe,cAAA;;;AAAvD;;;;;;;;;AAcA;iBAAgB,cAAA,CAAA;EAAiB,SAAA;EAAA,GAAc;AAAA,GAAS,mBAAA,GAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/esm/components/skeleton.js

@@ -4,6 +4,18 @@ import { cn } from "@stackframe/stack-ui";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/skeleton.tsx
+/**
+* Animated placeholder block. Use while data is loading — size it via
+* `className` to match the content it's standing in for.
+*
+* ```tsx
+* <DesignSkeleton className="h-4 w-[200px]" />
+* <DesignSkeleton className="h-24 w-full rounded-lg" />
+* ```
+*
+* Rule: always show a skeleton during initial load, not a spinner or
+* "Loading..." text. Skeletons preserve layout and feel faster.
+*/
 function DesignSkeleton({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		className: cn("animate-pulse rounded-md bg-black/[0.06] dark:bg-white/[0.06]", className),

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

@@ -1 +1 @@
-{"version":3,"file":"skeleton.js","names":[],"sources":["../../../src/components/skeleton.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"@stackframe/stack-ui\";\nimport type React from \"react\";\n\nexport type DesignSkeletonProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport function DesignSkeleton({ className, ...props }: DesignSkeletonProps) {\n  return (\n    <div\n      className={cn(\n        \"animate-pulse rounded-md bg-black/[0.06] dark:bg-white/[0.06]\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n"],"mappings":";;;;;;AAOA,SAAgB,eAAe,EAAE,WAAW,GAAG,SAA8B;AAC3E,QACE,oBAAC;EACC,WAAW,GACT,iEACA,UACD;EACD,GAAI;GACJ"}
+{"version":3,"file":"skeleton.js","names":[],"sources":["../../../src/components/skeleton.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"@stackframe/stack-ui\";\nimport type React from \"react\";\n\nexport type DesignSkeletonProps = React.HTMLAttributes<HTMLDivElement>;\n\n/**\n * Animated placeholder block. Use while data is loading — size it via\n * `className` to match the content it's standing in for.\n *\n * ```tsx\n * <DesignSkeleton className=\"h-4 w-[200px]\" />\n * <DesignSkeleton className=\"h-24 w-full rounded-lg\" />\n * ```\n *\n * Rule: always show a skeleton during initial load, not a spinner or\n * \"Loading...\" text. Skeletons preserve layout and feel faster.\n */\nexport function DesignSkeleton({ className, ...props }: DesignSkeletonProps) {\n  return (\n    <div\n      className={cn(\n        \"animate-pulse rounded-md bg-black/[0.06] dark:bg-white/[0.06]\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAmBA,SAAgB,eAAe,EAAE,WAAW,GAAG,SAA8B;AAC3E,QACE,oBAAC;EACC,WAAW,GACT,iEACA,UACD;EACD,GAAI;GACJ"}

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

@@ -1,6 +1,31 @@
 import React from "react";
 
 //#region src/components/table.d.ts
+/**
+ * Simple static table — header + rows + cells. Use this for small,
+ * read-only lists (< 20 rows, no interaction). For anything that needs
+ * sorting, filtering, pagination, or virtualization, use `DataGrid` +
+ * `useDataSource` instead.
+ *
+ * ```tsx
+ * <DesignTable>
+ *   <DesignTableHeader>
+ *     <DesignTableRow>
+ *       <DesignTableHead>Name</DesignTableHead>
+ *       <DesignTableHead>Email</DesignTableHead>
+ *     </DesignTableRow>
+ *   </DesignTableHeader>
+ *   <DesignTableBody>
+ *     {rows.map(row => (
+ *       <DesignTableRow key={row.id}>
+ *         <DesignTableCell>{row.name}</DesignTableCell>
+ *         <DesignTableCell>{row.email}</DesignTableCell>
+ *       </DesignTableRow>
+ *     ))}
+ *   </DesignTableBody>
+ * </DesignTable>
+ * ```
+ */
 declare const DesignTable: React.FC<React.HTMLAttributes<HTMLTableElement> & {
   ref?: React.Ref<HTMLTableElement> | undefined;
 }>;

package/dist/esm/components/table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table.d.ts","names":[],"sources":["../../../src/components/table.tsx"],"mappings":";;;cAMa,WAAA,EAAW,KAAA,CAAA,EAAA,CAAA,KAAA,CAAA,cAAA,CAAA,gBAAA;;;cAcX,iBAAA,EAAiB,KAAA,CAAA,EAAA,CAAA,KAAA,CAAA,cAAA,CAAA,uBAAA;;;cAYjB,eAAA,EAAe,KAAA,CAAA,EAAA,CAAA,KAAA,CAAA,cAAA,CAAA,uBAAA;;;cAYf,cAAA,EAAc,KAAA,CAAA,EAAA,CAAA,KAAA,CAAA,cAAA,CAAA,mBAAA;;;cAed,eAAA,EAAe,KAAA,CAAA,EAAA,CAAA,KAAA,CAAA,gBAAA,CAAA,oBAAA;;;cAef,eAAA,EAAe,KAAA,CAAA,EAAA,CAAA,KAAA,CAAA,gBAAA,CAAA,oBAAA"}
+{"version":3,"file":"table.d.ts","names":[],"sources":["../../../src/components/table.tsx"],"mappings":";;;;;AA+BA;;;;;;;;;;;;;;;;;;;;;AAcA;;cAda,WAAA,EAAW,KAAA,CAAA,EAAA,CAAA,KAAA,CAAA,cAAA,CAAA,gBAAA;;;cAcX,iBAAA,EAAiB,KAAA,CAAA,EAAA,CAAA,KAAA,CAAA,cAAA,CAAA,uBAAA;;;cAYjB,eAAA,EAAe,KAAA,CAAA,EAAA,CAAA,KAAA,CAAA,cAAA,CAAA,uBAAA;;;cAYf,cAAA,EAAc,KAAA,CAAA,EAAA,CAAA,KAAA,CAAA,cAAA,CAAA,mBAAA;;;cAed,eAAA,EAAe,KAAA,CAAA,EAAA,CAAA,KAAA,CAAA,gBAAA,CAAA,oBAAA;;;cAef,eAAA,EAAe,KAAA,CAAA,EAAA,CAAA,KAAA,CAAA,gBAAA,CAAA,oBAAA"}

package/dist/esm/components/table.js

@@ -6,6 +6,31 @@ import { forwardRefIfNeeded } from "@stackframe/stack-shared/dist/utils/react";
 import React from "react";
 
 //#region src/components/table.tsx
+/**
+* Simple static table — header + rows + cells. Use this for small,
+* read-only lists (< 20 rows, no interaction). For anything that needs
+* sorting, filtering, pagination, or virtualization, use `DataGrid` +
+* `useDataSource` instead.
+*
+* ```tsx
+* <DesignTable>
+*   <DesignTableHeader>
+*     <DesignTableRow>
+*       <DesignTableHead>Name</DesignTableHead>
+*       <DesignTableHead>Email</DesignTableHead>
+*     </DesignTableRow>
+*   </DesignTableHeader>
+*   <DesignTableBody>
+*     {rows.map(row => (
+*       <DesignTableRow key={row.id}>
+*         <DesignTableCell>{row.name}</DesignTableCell>
+*         <DesignTableCell>{row.email}</DesignTableCell>
+*       </DesignTableRow>
+*     ))}
+*   </DesignTableBody>
+* </DesignTable>
+* ```
+*/
 const DesignTable = forwardRefIfNeeded(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
 	className: "relative w-full overflow-auto",
 	children: /* @__PURE__ */ jsx("table", {

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

@@ -1 +1 @@
-{"version":3,"file":"table.js","names":[],"sources":["../../../src/components/table.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRefIfNeeded } from \"@stackframe/stack-shared/dist/utils/react\";\nimport { cn } from \"@stackframe/stack-ui\";\nimport React from \"react\";\n\nexport const DesignTable = forwardRefIfNeeded<\n  HTMLTableElement,\n  React.HTMLAttributes<HTMLTableElement>\n>(({ className, ...props }, ref) => (\n  <div className=\"relative w-full overflow-auto\">\n    <table\n      ref={ref}\n      className={cn(\"w-full caption-bottom text-sm\", className)}\n      {...props}\n    />\n  </div>\n));\nDesignTable.displayName = \"DesignTable\";\n\nexport const DesignTableHeader = forwardRefIfNeeded<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <thead\n    ref={ref}\n    className={cn(\"bg-foreground/[0.02] [&_tr]:border-b [&_tr]:border-black/[0.06] dark:[&_tr]:border-white/[0.06]\", className)}\n    {...props}\n  />\n));\nDesignTableHeader.displayName = \"DesignTableHeader\";\n\nexport const DesignTableBody = forwardRefIfNeeded<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tbody\n    ref={ref}\n    className={cn(\"[&_tr:last-child]:border-0\", className)}\n    {...props}\n  />\n));\nDesignTableBody.displayName = \"DesignTableBody\";\n\nexport const DesignTableRow = forwardRefIfNeeded<\n  HTMLTableRowElement,\n  React.HTMLAttributes<HTMLTableRowElement>\n>(({ className, ...props }, ref) => (\n  <tr\n    ref={ref}\n    className={cn(\n      \"border-b border-black/[0.06] dark:border-white/[0.06] transition-colors duration-150 hover:transition-none hover:bg-foreground/[0.04] data-[state=selected]:bg-foreground/[0.06]\",\n      className\n    )}\n    {...props}\n  />\n));\nDesignTableRow.displayName = \"DesignTableRow\";\n\nexport const DesignTableHead = forwardRefIfNeeded<\n  HTMLTableCellElement,\n  React.ThHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n  <th\n    ref={ref}\n    className={cn(\n      \"h-10 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n      className\n    )}\n    {...props}\n  />\n));\nDesignTableHead.displayName = \"DesignTableHead\";\n\nexport const DesignTableCell = forwardRefIfNeeded<\n  HTMLTableCellElement,\n  React.TdHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n  <td\n    ref={ref}\n    className={cn(\n      \"p-4 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n      className\n    )}\n    {...props}\n  />\n));\nDesignTableCell.displayName = \"DesignTableCell\";\n"],"mappings":";;;;;;;;AAMA,MAAa,cAAc,oBAGxB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC;CAAI,WAAU;WACb,oBAAC;EACM;EACL,WAAW,GAAG,iCAAiC,UAAU;EACzD,GAAI;GACJ;EACE,CACN;AACF,YAAY,cAAc;AAE1B,MAAa,oBAAoB,oBAG9B,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC;CACM;CACL,WAAW,GAAG,mGAAmG,UAAU;CAC3H,GAAI;EACJ,CACF;AACF,kBAAkB,cAAc;AAEhC,MAAa,kBAAkB,oBAG5B,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC;CACM;CACL,WAAW,GAAG,8BAA8B,UAAU;CACtD,GAAI;EACJ,CACF;AACF,gBAAgB,cAAc;AAE9B,MAAa,iBAAiB,oBAG3B,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC;CACM;CACL,WAAW,GACT,oLACA,UACD;CACD,GAAI;EACJ,CACF;AACF,eAAe,cAAc;AAE7B,MAAa,kBAAkB,oBAG5B,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC;CACM;CACL,WAAW,GACT,0IACA,UACD;CACD,GAAI;EACJ,CACF;AACF,gBAAgB,cAAc;AAE9B,MAAa,kBAAkB,oBAG5B,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC;CACM;CACL,WAAW,GACT,wFACA,UACD;CACD,GAAI;EACJ,CACF;AACF,gBAAgB,cAAc"}
+{"version":3,"file":"table.js","names":[],"sources":["../../../src/components/table.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRefIfNeeded } from \"@stackframe/stack-shared/dist/utils/react\";\nimport { cn } from \"@stackframe/stack-ui\";\nimport React from \"react\";\n\n/**\n * Simple static table — header + rows + cells. Use this for small,\n * read-only lists (< 20 rows, no interaction). For anything that needs\n * sorting, filtering, pagination, or virtualization, use `DataGrid` +\n * `useDataSource` instead.\n *\n * ```tsx\n * <DesignTable>\n *   <DesignTableHeader>\n *     <DesignTableRow>\n *       <DesignTableHead>Name</DesignTableHead>\n *       <DesignTableHead>Email</DesignTableHead>\n *     </DesignTableRow>\n *   </DesignTableHeader>\n *   <DesignTableBody>\n *     {rows.map(row => (\n *       <DesignTableRow key={row.id}>\n *         <DesignTableCell>{row.name}</DesignTableCell>\n *         <DesignTableCell>{row.email}</DesignTableCell>\n *       </DesignTableRow>\n *     ))}\n *   </DesignTableBody>\n * </DesignTable>\n * ```\n */\nexport const DesignTable = forwardRefIfNeeded<\n  HTMLTableElement,\n  React.HTMLAttributes<HTMLTableElement>\n>(({ className, ...props }, ref) => (\n  <div className=\"relative w-full overflow-auto\">\n    <table\n      ref={ref}\n      className={cn(\"w-full caption-bottom text-sm\", className)}\n      {...props}\n    />\n  </div>\n));\nDesignTable.displayName = \"DesignTable\";\n\nexport const DesignTableHeader = forwardRefIfNeeded<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <thead\n    ref={ref}\n    className={cn(\"bg-foreground/[0.02] [&_tr]:border-b [&_tr]:border-black/[0.06] dark:[&_tr]:border-white/[0.06]\", className)}\n    {...props}\n  />\n));\nDesignTableHeader.displayName = \"DesignTableHeader\";\n\nexport const DesignTableBody = forwardRefIfNeeded<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tbody\n    ref={ref}\n    className={cn(\"[&_tr:last-child]:border-0\", className)}\n    {...props}\n  />\n));\nDesignTableBody.displayName = \"DesignTableBody\";\n\nexport const DesignTableRow = forwardRefIfNeeded<\n  HTMLTableRowElement,\n  React.HTMLAttributes<HTMLTableRowElement>\n>(({ className, ...props }, ref) => (\n  <tr\n    ref={ref}\n    className={cn(\n      \"border-b border-black/[0.06] dark:border-white/[0.06] transition-colors duration-150 hover:transition-none hover:bg-foreground/[0.04] data-[state=selected]:bg-foreground/[0.06]\",\n      className\n    )}\n    {...props}\n  />\n));\nDesignTableRow.displayName = \"DesignTableRow\";\n\nexport const DesignTableHead = forwardRefIfNeeded<\n  HTMLTableCellElement,\n  React.ThHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n  <th\n    ref={ref}\n    className={cn(\n      \"h-10 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n      className\n    )}\n    {...props}\n  />\n));\nDesignTableHead.displayName = \"DesignTableHead\";\n\nexport const DesignTableCell = forwardRefIfNeeded<\n  HTMLTableCellElement,\n  React.TdHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n  <td\n    ref={ref}\n    className={cn(\n      \"p-4 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n      className\n    )}\n    {...props}\n  />\n));\nDesignTableCell.displayName = \"DesignTableCell\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,MAAa,cAAc,oBAGxB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC;CAAI,WAAU;WACb,oBAAC;EACM;EACL,WAAW,GAAG,iCAAiC,UAAU;EACzD,GAAI;GACJ;EACE,CACN;AACF,YAAY,cAAc;AAE1B,MAAa,oBAAoB,oBAG9B,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC;CACM;CACL,WAAW,GAAG,mGAAmG,UAAU;CAC3H,GAAI;EACJ,CACF;AACF,kBAAkB,cAAc;AAEhC,MAAa,kBAAkB,oBAG5B,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC;CACM;CACL,WAAW,GAAG,8BAA8B,UAAU;CACtD,GAAI;EACJ,CACF;AACF,gBAAgB,cAAc;AAE9B,MAAa,iBAAiB,oBAG3B,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC;CACM;CACL,WAAW,GACT,oLACA,UACD;CACD,GAAI;EACJ,CACF;AACF,eAAe,cAAc;AAE7B,MAAa,kBAAkB,oBAG5B,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC;CACM;CACL,WAAW,GACT,0IACA,UACD;CACD,GAAI;EACJ,CACF;AACF,gBAAgB,cAAc;AAE9B,MAAa,kBAAkB,oBAG5B,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC;CACM;CACL,WAAW,GACT,wFACA,UACD;CACD,GAAI;EACJ,CACF;AACF,gBAAgB,cAAc"}

package/dist/esm/index.d.ts

@@ -13,9 +13,11 @@ import { DesignCategoryTabItem, DesignCategoryTabs, DesignCategoryTabsProps } fr
 import { DESIGN_CHART_AXIS_TICK_STYLE, DESIGN_CHART_COLORS, DESIGN_CHART_GRID_COLOR, DesignChartColorEntry, DesignChartColorName, getDesignChartColor } from "./components/chart-theme";
 import { DesignChartConfig, DesignChartContainer, DesignChartStyle, getPayloadConfigFromPayload, useDesignChart } from "./components/chart-container";
 import { DesignChartTooltip, DesignChartTooltipContent } from "./components/chart-tooltip";
-import { DesignChartLegend, DesignChartLegendContent } from "./components/chart-legend";
+import { DesignChartLegendContent } from "./components/chart-legend";
 import { DesignChartCard, DesignChartCardProps } from "./components/chart-card";
 import { DesignMetricCard, DesignMetricCardProps, DesignMetricCardTrend } from "./components/metric-card";
 import { DesignProgressBar, DesignProgressBarProps } from "./components/progress-bar";
 import { DesignEmptyState, DesignEmptyStateProps } from "./components/empty-state";
-export { CursorBlastEffect, type CursorBlastEffectProps, DESIGN_CHART_AXIS_TICK_STYLE, DESIGN_CHART_COLORS, DESIGN_CHART_GRID_COLOR, DesignAlert, type DesignAlertProps, DesignBadge, type DesignBadgeColor, type DesignBadgeContentMode, type DesignBadgeProps, type DesignBadgeSize, DesignButton, type DesignButtonProps, DesignCard, type DesignCardProps, DesignCardTint, type DesignCardTintProps, type DesignCategoryTabItem, DesignCategoryTabs, type DesignCategoryTabsProps, DesignChartCard, type DesignChartCardProps, type DesignChartColorEntry, type DesignChartColorName, type DesignChartConfig, DesignChartContainer, DesignChartLegend, DesignChartLegendContent, DesignChartStyle, DesignChartTooltip, DesignChartTooltipContent, DesignEditMode, DesignEmptyState, type DesignEmptyStateProps, DesignInput, type DesignInputProps, DesignMetricCard, type DesignMetricCardProps, type DesignMetricCardTrend, type DesignOriginalButtonProps, DesignPillToggle, type DesignPillToggleOption, type DesignPillToggleProps, DesignProgressBar, type DesignProgressBarProps, DesignSeparator, type DesignSeparatorProps, DesignSkeleton, type DesignSkeletonProps, DesignTable, DesignTableBody, DesignTableCell, DesignTableHead, DesignTableHeader, DesignTableRow, getDesignChartColor, getPayloadConfigFromPayload, useDesignChart, useDesignEditMode, useGlassmorphicDefault, useInsideDesignCard };
+export * from "./components/analytics-chart";
+export * from "./components/data-grid";
+export { CursorBlastEffect, type CursorBlastEffectProps, DESIGN_CHART_AXIS_TICK_STYLE, DESIGN_CHART_COLORS, DESIGN_CHART_GRID_COLOR, DesignAlert, type DesignAlertProps, DesignBadge, type DesignBadgeColor, type DesignBadgeContentMode, type DesignBadgeProps, type DesignBadgeSize, DesignButton, type DesignButtonProps, DesignCard, type DesignCardProps, DesignCardTint, type DesignCardTintProps, type DesignCategoryTabItem, DesignCategoryTabs, type DesignCategoryTabsProps, DesignChartCard, type DesignChartCardProps, type DesignChartColorEntry, type DesignChartColorName, type DesignChartConfig, DesignChartContainer, DesignChartLegendContent, DesignChartStyle, DesignChartTooltip, DesignChartTooltipContent, DesignEditMode, DesignEmptyState, type DesignEmptyStateProps, DesignInput, type DesignInputProps, DesignMetricCard, type DesignMetricCardProps, type DesignMetricCardTrend, type DesignOriginalButtonProps, DesignPillToggle, type DesignPillToggleOption, type DesignPillToggleProps, DesignProgressBar, type DesignProgressBarProps, DesignSeparator, type DesignSeparatorProps, DesignSkeleton, type DesignSkeletonProps, DesignTable, DesignTableBody, DesignTableCell, DesignTableHead, DesignTableHeader, DesignTableRow, getDesignChartColor, getPayloadConfigFromPayload, useDesignChart, useDesignEditMode, useGlassmorphicDefault, useInsideDesignCard };

package/dist/esm/index.js

@@ -13,10 +13,14 @@ import { DesignCategoryTabs } from "./components/tabs.js";
 import { DESIGN_CHART_AXIS_TICK_STYLE, DESIGN_CHART_COLORS, DESIGN_CHART_GRID_COLOR, getDesignChartColor } from "./components/chart-theme.js";
 import { DesignChartContainer, DesignChartStyle, getPayloadConfigFromPayload, useDesignChart } from "./components/chart-container.js";
 import { DesignChartTooltip, DesignChartTooltipContent } from "./components/chart-tooltip.js";
-import { DesignChartLegend, DesignChartLegendContent } from "./components/chart-legend.js";
+import { DesignChartLegendContent } from "./components/chart-legend.js";
 import { DesignChartCard } from "./components/chart-card.js";
 import { DesignMetricCard } from "./components/metric-card.js";
 import { DesignProgressBar } from "./components/progress-bar.js";
 import { DesignEmptyState } from "./components/empty-state.js";
 
-export { CursorBlastEffect, DESIGN_CHART_AXIS_TICK_STYLE, DESIGN_CHART_COLORS, DESIGN_CHART_GRID_COLOR, DesignAlert, DesignBadge, DesignButton, DesignCard, DesignCardTint, DesignCategoryTabs, DesignChartCard, DesignChartContainer, DesignChartLegend, DesignChartLegendContent, DesignChartStyle, DesignChartTooltip, DesignChartTooltipContent, DesignEditMode, DesignEmptyState, DesignInput, DesignMetricCard, DesignPillToggle, DesignProgressBar, DesignSeparator, DesignSkeleton, DesignTable, DesignTableBody, DesignTableCell, DesignTableHead, DesignTableHeader, DesignTableRow, getDesignChartColor, getPayloadConfigFromPayload, useDesignChart, useDesignEditMode, useGlassmorphicDefault, useInsideDesignCard };
+export * from "./components/analytics-chart/index.js"
+
+export * from "./components/data-grid/index.js"
+
+export { CursorBlastEffect, DESIGN_CHART_AXIS_TICK_STYLE, DESIGN_CHART_COLORS, DESIGN_CHART_GRID_COLOR, DesignAlert, DesignBadge, DesignButton, DesignCard, DesignCardTint, DesignCategoryTabs, DesignChartCard, DesignChartContainer, DesignChartLegendContent, DesignChartStyle, DesignChartTooltip, DesignChartTooltipContent, DesignEditMode, DesignEmptyState, DesignInput, DesignMetricCard, DesignPillToggle, DesignProgressBar, DesignSeparator, DesignSkeleton, DesignTable, DesignTableBody, DesignTableCell, DesignTableHead, DesignTableHeader, DesignTableRow, getDesignChartColor, getPayloadConfigFromPayload, useDesignChart, useDesignEditMode, useGlassmorphicDefault, useInsideDesignCard };

package/dist/index.d.ts

@@ -1,13 +1,26 @@
 import { DesignAlert, DesignAlertProps } from "./components/alert.js";
+import { ANALYTICS_CHART_DEFAULT_STRINGS, AnalyticsChartStrings, resolveAnalyticsChartStrings } from "./components/analytics-chart/strings.js";
+import { 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, pointValue } from "./components/analytics-chart/types.js";
+import { AnalyticsChartTooltipContext, AnalyticsChartTooltipLayerView, AnalyticsChartTooltipSegmentRow, DefaultAnalyticsChartTooltip, DefaultAnalyticsChartTooltipProps, TrendPill } from "./components/analytics-chart/default-analytics-chart-tooltip.js";
+import { AnalyticsChart, AnalyticsChartProps, Margin } from "./components/analytics-chart/analytics-chart.js";
+import { DEFAULT_FORMAT_KIND, FORMAT_KIND_TYPES, formatDelta, formatValue } from "./components/analytics-chart/format.js";
+import { ANALYTICS_CHART_DEFAULT_PALETTE, buildRampColors, buildSegmentThemeMap, resolveAnalyticsChartPalette } from "./components/analytics-chart/palette.js";
+import { ANALYTICS_CHART_DEFAULT_LAYERS, ANALYTICS_CHART_DEFAULT_STATE, EMPTY_MATRIX, EMPTY_SERIES, ResolvedDataLayerStyle, STROKE_DASHARRAY, computeLocalInProgressIdx, findAnnotationsLayer, findCompareLayer, findLayerById, findPrimaryLayer, isAnalyticsChartDataLayer, isTimeseriesState, patchLayerById, resolveDataLayerStyle, setLayerById } from "./components/analytics-chart/state.js";
 import { DesignBadge, DesignBadgeColor, DesignBadgeContentMode, DesignBadgeProps, DesignBadgeSize } from "./components/badge.js";
 import { DesignButton, DesignButtonProps, DesignOriginalButtonProps } from "./components/button.js";
 import { DesignCard, DesignCardProps, DesignCardTint, DesignCardTintProps, useGlassmorphicDefault, useInsideDesignCard } from "./components/card.js";
 import { DesignChartCard, DesignChartCardProps } from "./components/chart-card.js";
 import { DesignChartConfig, DesignChartContainer, DesignChartStyle, getPayloadConfigFromPayload, useDesignChart } from "./components/chart-container.js";
-import { DesignChartLegend, DesignChartLegendContent } from "./components/chart-legend.js";
+import { DesignChartLegendContent } from "./components/chart-legend.js";
 import { DESIGN_CHART_AXIS_TICK_STYLE, DESIGN_CHART_COLORS, DESIGN_CHART_GRID_COLOR, DesignChartColorEntry, DesignChartColorName, getDesignChartColor } from "./components/chart-theme.js";
 import { DesignChartTooltip, DesignChartTooltipContent } from "./components/chart-tooltip.js";
 import { CursorBlastEffect, CursorBlastEffectProps } from "./components/cursor-blast-effect.js";
+import { DataGridCallbacks, DataGridCellContext, DataGridColumnAlign, DataGridColumnDef, DataGridColumnPin, DataGridColumnPinning, DataGridColumnType, DataGridColumnVisibility, DataGridDataPaginationMode, DataGridDataSource, DataGridDateDisplay, DataGridDateFormat, DataGridFetchParams, DataGridFetchResult, DataGridFooterContext, DataGridHeaderContext, DataGridPaginationMode, DataGridPaginationModel, DataGridProps, DataGridSelectOption, DataGridSelectionMode, DataGridSelectionModel, DataGridSortItem, DataGridSortModel, DataGridState, DataGridStrings, DataGridToolbarContext, RowId } from "./components/data-grid/types.js";
+import { DataGridToolbar } from "./components/data-grid/data-grid-toolbar.js";
+import { DataGrid } from "./components/data-grid/data-grid.js";
+import { UseDataSourceResult, useDataSource } from "./components/data-grid/use-data-source.js";
+import { DEFAULT_PAGINATION, EMPTY_SELECTION, EMPTY_SORT_MODEL, applyQuickSearch, buildRowComparator, clearSelection, createDefaultDataGridState, defaultFormatAbsolute, defaultFormatRelative, defaultMatchRow, defaultParseDate, exportToCsv, formatGridDate, getSortDirection, getSortIndex, getTotalPages, isColumnVisible, paginateRows, resolveColumnValue, resolveColumnWidth, selectAll, toggleRowSelection, toggleSort } from "./components/data-grid/state.js";
+import { DATA_GRID_DEFAULT_STRINGS, resolveDataGridStrings } from "./components/data-grid/strings.js";
 import { DesignEditMode, useDesignEditMode } from "./components/edit-mode.js";
 import { DesignEmptyState, DesignEmptyStateProps } from "./components/empty-state.js";
 import { DesignInput, DesignInputProps } from "./components/input.js";
@@ -18,4 +31,4 @@ import { DesignSeparator, DesignSeparatorProps } from "./components/separator.js
 import { DesignSkeleton, DesignSkeletonProps } from "./components/skeleton.js";
 import { DesignTable, DesignTableBody, DesignTableCell, DesignTableHead, DesignTableHeader, DesignTableRow } from "./components/table.js";
 import { DesignCategoryTabItem, DesignCategoryTabs, DesignCategoryTabsProps } from "./components/tabs.js";
-export { CursorBlastEffect, type CursorBlastEffectProps, DESIGN_CHART_AXIS_TICK_STYLE, DESIGN_CHART_COLORS, DESIGN_CHART_GRID_COLOR, DesignAlert, type DesignAlertProps, DesignBadge, type DesignBadgeColor, type DesignBadgeContentMode, type DesignBadgeProps, type DesignBadgeSize, DesignButton, type DesignButtonProps, DesignCard, type DesignCardProps, DesignCardTint, type DesignCardTintProps, type DesignCategoryTabItem, DesignCategoryTabs, type DesignCategoryTabsProps, DesignChartCard, type DesignChartCardProps, type DesignChartColorEntry, type DesignChartColorName, type DesignChartConfig, DesignChartContainer, DesignChartLegend, DesignChartLegendContent, DesignChartStyle, DesignChartTooltip, DesignChartTooltipContent, DesignEditMode, DesignEmptyState, type DesignEmptyStateProps, DesignInput, type DesignInputProps, DesignMetricCard, type DesignMetricCardProps, type DesignMetricCardTrend, type DesignOriginalButtonProps, DesignPillToggle, type DesignPillToggleOption, type DesignPillToggleProps, DesignProgressBar, type DesignProgressBarProps, DesignSeparator, type DesignSeparatorProps, DesignSkeleton, type DesignSkeletonProps, DesignTable, DesignTableBody, DesignTableCell, DesignTableHead, DesignTableHeader, DesignTableRow, getDesignChartColor, getPayloadConfigFromPayload, useDesignChart, useDesignEditMode, useGlassmorphicDefault, useInsideDesignCard };
+export { ANALYTICS_CHART_DEFAULT_LAYERS, ANALYTICS_CHART_DEFAULT_PALETTE, ANALYTICS_CHART_DEFAULT_STATE, ANALYTICS_CHART_DEFAULT_STRINGS, AnalyticsChart, AnalyticsChartAnnotationsLayer, AnalyticsChartAreaLayer, AnalyticsChartBarLayer, AnalyticsChartDataLayer, AnalyticsChartDelta, AnalyticsChartLayer, AnalyticsChartLayerType, AnalyticsChartLayers, AnalyticsChartLineLayer, AnalyticsChartPalette, AnalyticsChartPieProps, AnalyticsChartPieState, AnalyticsChartProps, AnalyticsChartSegmentRamp, AnalyticsChartSeries, AnalyticsChartState, AnalyticsChartStrings, AnalyticsChartStrokeStyle, AnalyticsChartTimeseriesState, AnalyticsChartTooltipContext, AnalyticsChartTooltipLayerView, AnalyticsChartTooltipSegmentRow, AnalyticsChartView, Annotation, CursorBlastEffect, type CursorBlastEffectProps, DATA_GRID_DEFAULT_STRINGS, DEFAULT_FORMAT_KIND, DEFAULT_PAGINATION, DESIGN_CHART_AXIS_TICK_STYLE, DESIGN_CHART_COLORS, DESIGN_CHART_GRID_COLOR, DataGrid, DataGridCallbacks, DataGridCellContext, DataGridColumnAlign, DataGridColumnDef, DataGridColumnPin, DataGridColumnPinning, DataGridColumnType, DataGridColumnVisibility, DataGridDataPaginationMode, DataGridDataSource, DataGridDateDisplay, DataGridDateFormat, DataGridFetchParams, DataGridFetchResult, DataGridFooterContext, DataGridHeaderContext, DataGridPaginationMode, DataGridPaginationModel, DataGridProps, DataGridSelectOption, DataGridSelectionMode, DataGridSelectionModel, DataGridSortItem, DataGridSortModel, DataGridState, DataGridStrings, DataGridToolbar, DataGridToolbarContext, DefaultAnalyticsChartTooltip, DefaultAnalyticsChartTooltipProps, DesignAlert, type DesignAlertProps, DesignBadge, type DesignBadgeColor, type DesignBadgeContentMode, type DesignBadgeProps, type DesignBadgeSize, DesignButton, type DesignButtonProps, DesignCard, type DesignCardProps, DesignCardTint, type DesignCardTintProps, type DesignCategoryTabItem, DesignCategoryTabs, type DesignCategoryTabsProps, DesignChartCard, type DesignChartCardProps, type DesignChartColorEntry, type DesignChartColorName, type DesignChartConfig, DesignChartContainer, DesignChartLegendContent, DesignChartStyle, DesignChartTooltip, DesignChartTooltipContent, DesignEditMode, DesignEmptyState, type DesignEmptyStateProps, DesignInput, type DesignInputProps, DesignMetricCard, type DesignMetricCardProps, type DesignMetricCardTrend, type DesignOriginalButtonProps, DesignPillToggle, type DesignPillToggleOption, type DesignPillToggleProps, DesignProgressBar, type DesignProgressBarProps, DesignSeparator, type DesignSeparatorProps, DesignSkeleton, type DesignSkeletonProps, DesignTable, DesignTableBody, DesignTableCell, DesignTableHead, DesignTableHeader, DesignTableRow, EMPTY_MATRIX, EMPTY_SELECTION, EMPTY_SERIES, EMPTY_SORT_MODEL, FORMAT_KIND_TYPES, FormatKind, FormatKindCurrency, FormatKindDatetime, FormatKindDuration, FormatKindNumeric, FormatKindPercent, FormatKindShort, FormatKindType, Margin, Point, ResolvedDataLayerStyle, RowId, STROKE_DASHARRAY, TrendPill, UseDataSourceResult, applyQuickSearch, buildRampColors, buildRowComparator, buildSegmentThemeMap, clearSelection, computeLocalInProgressIdx, createDefaultDataGridState, defaultFormatAbsolute, defaultFormatRelative, defaultMatchRow, defaultParseDate, exportToCsv, findAnnotationsLayer, findCompareLayer, findLayerById, findPrimaryLayer, formatDelta, formatGridDate, formatValue, getDesignChartColor, getPayloadConfigFromPayload, getSortDirection, getSortIndex, getTotalPages, isAnalyticsChartDataLayer, isColumnVisible, isTimeseriesState, paginateRows, patchLayerById, pointValue, resolveAnalyticsChartPalette, resolveAnalyticsChartStrings, resolveColumnValue, resolveColumnWidth, resolveDataGridStrings, resolveDataLayerStyle, selectAll, setLayerById, toggleRowSelection, toggleSort, useDataSource, useDesignChart, useDesignEditMode, useGlassmorphicDefault, useInsideDesignCard };

package/dist/index.js

@@ -93,12 +93,6 @@ Object.defineProperty(exports, 'DesignChartContainer', {
     return __components_chart_container_js.DesignChartContainer;
   }
 });
-Object.defineProperty(exports, 'DesignChartLegend', {
-  enumerable: true,
-  get: function () {
-    return __components_chart_legend_js.DesignChartLegend;
-  }
-});
 Object.defineProperty(exports, 'DesignChartLegendContent', {
   enumerable: true,
   get: function () {
@@ -242,4 +236,19 @@ Object.defineProperty(exports, 'useInsideDesignCard', {
   get: function () {
     return __components_card_js.useInsideDesignCard;
   }
-});
+});
+var __components_analytics_chart_index_js = require("./components/analytics-chart/index.js");
+Object.keys(__components_analytics_chart_index_js).forEach(function (k) {
+  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: function () { return __components_analytics_chart_index_js[k]; }
+  });
+});
+
+var __components_data_grid_index_js = require("./components/data-grid/index.js");
+Object.keys(__components_data_grid_index_js).forEach(function (k) {
+  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: function () { return __components_data_grid_index_js[k]; }
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stackframe/dashboard-ui-components",
-  "version": "2.8.84",
+  "version": "2.8.86",
   "repository": "https://github.com/stack-auth/stack-auth",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -46,9 +46,10 @@
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.3",
     "@react-hook/resize-observer": "^2.0.2",
+    "@tanstack/react-virtual": "^3.13.0",
     "class-variance-authority": "^0.7.0",
-    "@stackframe/stack-shared": "2.8.84",
-    "@stackframe/stack-ui": "2.8.84"
+    "@stackframe/stack-shared": "2.8.86",
+    "@stackframe/stack-ui": "2.8.86"
   },
   "devDependencies": {
     "@types/react": "^19.0.0",