@refraction-ui/react 0.22.0 → 0.23.1

package/dist/internal/react-stat-grid/index.d.ts

@@ -1,28 +1,39 @@
 import * as React from 'react';
-export { StatItem, statColumns } from '../stat-grid/index.js';
+import { StatTone, StatGridColumns, StatGridVariant, StatGridLayout } from '../stat-grid/index.js';
+export { StatGridColumns, StatGridLayout, StatGridVariant, StatItem, StatTone, statColumns } from '../stat-grid/index.js';
 
 interface StatGridItem {
     /** The primary value displayed prominently. Allows rich content in React. */
     value: React.ReactNode;
-    /** The descriptive label shown below the value. */
+    /** The descriptive label. */
     label: React.ReactNode;
+    /** Stable key; defaults to the index. */
+    id?: string;
+    /** Optional line explaining the figure (how it was computed, a delta). */
+    description?: React.ReactNode;
+    /** Colour of the value. Defaults to `default`. */
+    tone?: StatTone;
+    /** Extra attributes for this item's element (`data-*`, `aria-*`, `title`, className). */
+    props?: React.HTMLAttributes<HTMLDivElement>;
 }
 interface StatGridProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'content'> {
     /** The stat items to display in the grid. */
     items: StatGridItem[];
     /**
-     * Number of columns. Defaults to `statColumns(items.length)`:
-     * 1 item → 1, 2 items → 2, 3+ items → 3.
+     * Maximum columns (reflows to fewer on narrow screens), or `auto` to fit as
+     * many ~12rem items as the width allows. Defaults to
+     * `statColumns(items.length)`: 1 → 1, 2 → 2, 3+ → 3.
      */
-    columns?: number;
+    columns?: StatGridColumns;
+    /** `plain` marketing callouts (default) or bordered `card` KPIs. */
+    variant?: StatGridVariant;
+    /** `value-first` (default) or `label-first` (dashboard KPI order). */
+    layout?: StatGridLayout;
 }
 /**
- * StatGrid — a marketing-style grid of stat callouts.
- *
- * Each item shows a large bold value and a small muted label. The grid
- * automatically computes the column count from the number of items, or you can
- * override it with `columns`. Uses `role="list"` / `role="listitem"` for
- * accessible enumeration.
+ * StatGrid — a responsive grid of stats: marketing callouts (`plain`) or
+ * dashboard KPI cards (`card`), value- or label-first, with an optional
+ * description and a tone per item. Uses `role="list"` / `role="listitem"`.
  */
 declare const StatGrid: React.ForwardRefExoticComponent<StatGridProps & React.RefAttributes<HTMLDivElement>>;
 

package/dist/internal/react-table/index.d.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { TableDensity, TableHeadTone, TableAlign } from '../table/index.js';
+export { TableAlign, TableDensity, TableHeadTone } from '../table/index.js';
+
+interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
+    /** Cell padding for every cell. Defaults to `default`. */
+    density?: TableDensity;
+    /** Look of every header cell. Defaults to `default`. */
+    headTone?: TableHeadTone;
+    /** Fixed layout: column widths come from the header row. */
+    fixed?: boolean;
+    /** Class for the horizontal scroll container around the table. */
+    containerClassName?: string;
+}
+/**
+ * Table — composable, semantic table primitives for cells that hold
+ * components (badges, buttons, links). The parts map one-to-one to the HTML
+ * table elements. For a data-driven table with sorting/filtering use DataTable.
+ */
+declare const Table: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<HTMLTableElement>>;
+declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
+interface TableHeadProps extends Omit<React.ThHTMLAttributes<HTMLTableCellElement>, 'align'> {
+    /** Horizontal alignment. Defaults to `start`. */
+    align?: TableAlign;
+}
+/** Header cell. `scope` defaults to `col`. */
+declare const TableHead: React.ForwardRefExoticComponent<TableHeadProps & React.RefAttributes<HTMLTableCellElement>>;
+interface TableCellProps extends Omit<React.TdHTMLAttributes<HTMLTableCellElement>, 'align'> {
+    /** Horizontal alignment. Defaults to `start`. */
+    align?: TableAlign;
+    /** Tabular figures, no wrapping — for numbers. */
+    numeric?: boolean;
+}
+declare const TableCell: React.ForwardRefExoticComponent<TableCellProps & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
+
+export { Table, TableBody, TableCaption, TableCell, type TableCellProps, TableHead, type TableHeadProps, TableHeader, type TableProps, TableRow };

package/dist/internal/stat-grid/index.d.ts

@@ -1,9 +1,23 @@
+/** Semantic colour of a stat's value. */
+type StatTone = 'default' | 'positive' | 'negative' | 'caution';
+/** `plain` = marketing callouts; `card` = bordered dashboard KPI cards. */
+type StatGridVariant = 'plain' | 'card';
+/** Whether the label sits under the value (callout) or above it (KPI). */
+type StatGridLayout = 'value-first' | 'label-first';
+/** Column count: a fixed maximum that reflows down on narrow screens, or `auto`. */
+type StatGridColumns = 1 | 2 | 3 | 4 | 'auto';
 /** A single stat callout displayed in the grid. */
 type StatItem = {
     /** The primary value displayed prominently (e.g. "10k+", "$4.2M"). */
     value: string;
-    /** The descriptive label shown below the value. */
+    /** The descriptive label. */
     label: string;
+    /** Stable key; defaults to the index. */
+    id?: string;
+    /** Optional line explaining the figure (how it was computed, a delta). */
+    description?: string;
+    /** Colour of the value. Defaults to `default`. */
+    tone?: StatTone;
 };
 interface StatGridAPI {
     /** ARIA attributes to spread on the grid container element (`role="list"`). */
@@ -20,7 +34,9 @@ interface StatGridAPI {
  * - 2 items → 2 columns
  * - 3 or more items → capped at `max` (default 3)
  */
-declare function statColumns(count: number, max?: number): number;
+declare function statColumns(count: number, max?: number): 1 | 2 | 3 | 4;
+/** The cva key for a column setting (clamped to the supported 1–4). */
+declare function statColumnsKey(columns: StatGridColumns): '1' | '2' | '3' | '4' | 'auto';
 /**
  * Build the framework-agnostic container props for a stat grid.
  *
@@ -29,17 +45,43 @@ declare function statColumns(count: number, max?: number): number;
  */
 declare function createStatGrid(): StatGridAPI;
 
-/** Grid container that lays out stat items. */
+/**
+ * Grid container. Column counts are responsive (one column on a phone, more
+ * as the width allows) — never a fixed inline template that cannot reflow.
+ * `auto` fits as many ~12rem items per row as the width allows.
+ */
 declare const statGridVariants: (props?: ({
-    columns?: "1" | "2" | "3" | undefined;
+    columns?: "auto" | "1" | "2" | "3" | "4" | undefined;
+    variant?: "plain" | "card" | undefined;
 } & {
     className?: string;
 }) | undefined) => string;
 /** Individual stat item container (role="listitem"). */
+declare const statItemVariants: (props?: ({
+    variant?: "plain" | "card" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/** @deprecated Use `statItemVariants()`; kept for existing imports. */
 declare const statItemClass = "flex flex-col";
-/** The large bold value of the stat. */
+/** The value of a stat, by variant and tone. */
+declare const statValueVariants: (props?: ({
+    variant?: "plain" | "card" | undefined;
+    tone?: "default" | "positive" | "negative" | "caution" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/** @deprecated Use `statValueVariants()`; kept for existing imports. */
 declare const statValueClass = "text-xl sm:text-2xl font-bold text-primary";
-/** The descriptive label below the value. */
+/** The descriptive label. Above the value it reads as a small caption. */
+declare const statLabelVariants: (props?: ({
+    layout?: "value-first" | "label-first" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/** @deprecated Use `statLabelVariants()`; kept for existing imports. */
 declare const statLabelClass = "mt-1 text-sm text-muted-foreground leading-snug";
+/** Optional line under a stat explaining how it was computed. */
+declare const statDescriptionClass = "text-xs leading-snug text-muted-foreground";
 
-export { type StatGridAPI, type StatItem, createStatGrid, statColumns, statGridVariants, statItemClass, statLabelClass, statValueClass };
+export { type StatGridAPI, type StatGridColumns, type StatGridLayout, type StatGridVariant, type StatItem, type StatTone, createStatGrid, statColumns, statColumnsKey, statDescriptionClass, statGridVariants, statItemClass, statItemVariants, statLabelClass, statLabelVariants, statValueClass, statValueVariants };

package/dist/internal/table/index.d.ts

@@ -0,0 +1,46 @@
+/** Cell padding for every cell of a table. */
+type TableDensity = 'compact' | 'default';
+/** Horizontal alignment of a header or data cell (logical, RTL-safe). */
+type TableAlign = 'start' | 'center' | 'end';
+/** Look of header cells: `eyebrow` is small uppercase tracked text. */
+type TableHeadTone = 'default' | 'eyebrow';
+interface TableAPI {
+    /** Data attributes for styling hooks. */
+    dataAttributes: Record<string, string>;
+}
+/** Framework-agnostic data attributes for the table root. */
+declare function createTable(props?: {
+    density?: TableDensity;
+    headTone?: TableHeadTone;
+}): TableAPI;
+
+/** Scroll container: a wide table scrolls inside it instead of the page. */
+declare const tableContainerClass = "relative w-full overflow-x-auto";
+/** The `<table>`. `fixed` pins column widths to the header row. */
+declare const tableRootVariants: (props?: ({
+    fixed?: "true" | "false" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/** Caption under the table. */
+declare const tableCaptionClass = "mt-2 text-xs text-muted-foreground";
+/** Body rows: a hairline between rows, none after the last. */
+declare const tableRowClass = "border-b border-border-subtle last:border-b-0";
+/** Header cell: subtle surface, rule under it. */
+declare const tableHeadVariants: (props?: ({
+    align?: "start" | "center" | "end" | undefined;
+    tone?: "default" | "eyebrow" | undefined;
+    density?: "compact" | "default" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/** Data cell. */
+declare const tableCellVariants: (props?: ({
+    align?: "start" | "center" | "end" | undefined;
+    density?: "compact" | "default" | undefined;
+    numeric?: "true" | "false" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type TableAPI, type TableAlign, type TableDensity, type TableHeadTone, createTable, tableCaptionClass, tableCellVariants, tableContainerClass, tableHeadVariants, tableRootVariants, tableRowClass };

package/dist/react-accordion.js

@@ -5,7 +5,7 @@ import {
 import {
   cn,
   devWarn
-} from "./chunk-2Q6HHFAN.js";
+} from "./chunk-75BKRTPO.js";
 
 // ../react-accordion/dist/index.js
 import * as React from "react";

package/dist/react-action-list.js

@@ -1,7 +1,7 @@
 import {
   cn,
   cva
-} from "./chunk-2Q6HHFAN.js";
+} from "./chunk-75BKRTPO.js";
 
 // ../react-action-list/dist/index.js
 import * as React from "react";

package/dist/react-ai.js

@@ -1,6 +1,6 @@
 import {
   devWarn
-} from "./chunk-2Q6HHFAN.js";
+} from "./chunk-75BKRTPO.js";
 
 // ../react-ai/dist/index.js
 import * as React from "react";

package/dist/react-analytics.js

@@ -1,6 +1,6 @@
 import {
   devWarn
-} from "./chunk-2Q6HHFAN.js";
+} from "./chunk-75BKRTPO.js";
 
 // ../react-analytics/dist/index.js
 import * as React from "react";
@@ -1144,7 +1144,11 @@ function createClientSdkSink(opts) {
         });
         return instance;
       }
-      const mod = await import(appInsightsWebSpecifier);
+      const mod = await import(
+        /* webpackIgnore: true */
+        /* @vite-ignore */
+        appInsightsWebSpecifier
+      );
       const ai = new mod.ApplicationInsights({
         config: {
           connectionString: opts.connectionString,
@@ -1495,7 +1499,11 @@ function createPostHogHttpSink(options) {
 }
 var posthogJsSpecifier = "posthog-js";
 async function defaultLoad() {
-  const mod = await import(posthogJsSpecifier);
+  const mod = await import(
+    /* webpackIgnore: true */
+    /* @vite-ignore */
+    posthogJsSpecifier
+  );
   return "default" in mod ? mod.default : mod;
 }
 function createPostHogClientSdkSink(options) {
@@ -1587,7 +1595,11 @@ function createPostHogSink(options) {
 // ../analytics-sink-posthog/dist/replay.js
 var posthogJsSpecifier2 = "posthog-js";
 async function defaultLoad2() {
-  const mod = await import(posthogJsSpecifier2);
+  const mod = await import(
+    /* webpackIgnore: true */
+    /* @vite-ignore */
+    posthogJsSpecifier2
+  );
   return "default" in mod ? mod.default : mod;
 }
 async function startSessionReplay(options) {