@refraction-ui/react 0.21.0 → 0.23.0

package/dist/react-slot-picker.js

@@ -1,7 +1,7 @@
 import {
   cn,
   cva
-} from "./chunk-ZF3OHCGV.js";
+} from "./chunk-2Q6HHFAN.js";
 
 // ../react-slot-picker/dist/index.js
 import * as React from "react";

package/dist/react-social-auth-button.js

@@ -1,11 +1,11 @@
 import {
   Button
-} from "./chunk-NKCWOPNX.js";
-import "./chunk-WK2IIUFO.js";
+} from "./chunk-Z5IHYNQD.js";
+import "./chunk-QDMLIDYN.js";
 import {
   cn,
   cva
-} from "./chunk-ZF3OHCGV.js";
+} from "./chunk-2Q6HHFAN.js";
 
 // ../react-social-auth-button/dist/index.js
 import * as React from "react";

package/dist/react-sortable-list.js

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

package/dist/react-stat-grid.js

@@ -1,17 +1,20 @@
 import {
   cn,
   cva
-} from "./chunk-ZF3OHCGV.js";
+} from "./chunk-2Q6HHFAN.js";
 
 // ../react-stat-grid/dist/index.js
 import * as React from "react";
 
 // ../stat-grid/dist/index.js
 function statColumns(count, max = 3) {
-  if (count <= 0) return 1;
-  if (count === 1) return 1;
+  if (count <= 1) return 1;
   if (count === 2) return 2;
-  return Math.min(count, max);
+  return Math.min(count, max, 4);
+}
+function statColumnsKey(columns) {
+  if (columns === "auto") return "auto";
+  return String(Math.min(Math.max(Math.round(columns), 1), 4));
 }
 function createStatGrid() {
   return {
@@ -20,44 +23,110 @@ function createStatGrid() {
   };
 }
 var statGridVariants = cva({
-  base: "grid gap-8",
+  base: "grid",
   variants: {
     columns: {
       "1": "grid-cols-1",
-      "2": "grid-cols-2",
-      "3": "grid-cols-3"
+      "2": "grid-cols-1 sm:grid-cols-2",
+      "3": "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+      "4": "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4",
+      auto: "grid-cols-[repeat(auto-fill,minmax(12rem,1fr))]"
+    },
+    variant: {
+      plain: "gap-8",
+      card: "gap-3"
+    }
+  },
+  defaultVariants: {
+    columns: "3",
+    variant: "plain"
+  }
+});
+var statItemVariants = cva({
+  base: "flex min-w-0 flex-col",
+  variants: {
+    variant: {
+      plain: "",
+      card: "gap-1 rounded-lg border border-border bg-card p-4 text-card-foreground"
+    }
+  },
+  defaultVariants: {
+    variant: "plain"
+  }
+});
+var statValueVariants = cva({
+  base: "font-bold tabular-nums",
+  variants: {
+    variant: {
+      plain: "text-xl sm:text-2xl",
+      card: "text-2xl leading-tight"
+    },
+    tone: {
+      default: "",
+      positive: "text-success",
+      negative: "text-destructive",
+      caution: "text-warning"
+    }
+  },
+  compoundVariants: [
+    { variant: "plain", tone: "default", class: "text-primary" },
+    { variant: "card", tone: "default", class: "text-foreground" }
+  ],
+  defaultVariants: {
+    variant: "plain",
+    tone: "default"
+  }
+});
+var statLabelVariants = cva({
+  base: "text-muted-foreground",
+  variants: {
+    layout: {
+      "value-first": "mt-1 text-sm leading-snug",
+      "label-first": "text-xs uppercase tracking-wide"
     }
   },
   defaultVariants: {
-    columns: "3"
+    layout: "value-first"
   }
 });
-var statItemClass = "flex flex-col";
-var statValueClass = "text-xl sm:text-2xl font-bold text-primary";
-var statLabelClass = "mt-1 text-sm text-muted-foreground leading-snug";
+var statDescriptionClass = "text-xs leading-snug text-muted-foreground";
 
 // ../react-stat-grid/dist/index.js
 import { jsx, jsxs } from "react/jsx-runtime";
 var StatGrid = React.forwardRef(
-  function StatGrid2({ items, columns, className, ...props }, ref) {
-    const cols = columns ?? statColumns(items.length);
+  function StatGrid2({ items, columns, variant = "plain", layout = "value-first", className, ...props }, ref) {
+    const cols = statColumnsKey(columns ?? statColumns(items.length));
     const { ariaProps, dataAttributes } = createStatGrid();
     return /* @__PURE__ */ jsx(
       "div",
       {
         ref,
-        className: cn(
-          statGridVariants({ columns: String(cols) }),
-          className
-        ),
-        style: { gridTemplateColumns: `repeat(${cols}, 1fr)` },
+        className: cn(statGridVariants({ columns: cols, variant }), className),
+        "data-variant": variant,
+        "data-layout": layout,
         ...ariaProps,
         ...dataAttributes,
         ...props,
-        children: items.map((item, index) => /* @__PURE__ */ jsxs("div", { role: "listitem", className: statItemClass, children: [
-          /* @__PURE__ */ jsx("span", { className: statValueClass, children: item.value }),
-          /* @__PURE__ */ jsx("span", { className: statLabelClass, children: item.label })
-        ] }, index))
+        children: items.map((item, index) => {
+          const { className: itemClassName, ...itemProps } = item.props ?? {};
+          const label = /* @__PURE__ */ jsx("span", { className: statLabelVariants({ layout }), children: item.label });
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              role: "listitem",
+              className: cn(statItemVariants({ variant }), itemClassName),
+              "data-tone": item.tone ?? "default",
+              ...itemProps,
+              children: [
+                layout === "label-first" && label,
+                /* @__PURE__ */ jsx("span", { className: statValueVariants({ variant, tone: item.tone ?? "default" }), children: item.value }),
+                layout === "value-first" && label,
+                item.description != null && /* @__PURE__ */ jsx("span", { className: statDescriptionClass, children: item.description })
+              ]
+            },
+            item.id ?? index
+          );
+        })
       }
     );
   }

package/dist/react-stat-grid.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../stat-grid/src/stat-grid.ts", "../../stat-grid/src/stat-grid.styles.ts", "../../react-stat-grid/src/stat-grid.tsx"],
-  "sourcesContent": ["/** A single stat callout displayed in the grid. */\nexport type StatItem = {\n  /** The primary value displayed prominently (e.g. \"10k+\", \"$4.2M\"). */\n  value: string\n  /** The descriptive label shown below the value. */\n  label: string\n}\n\nexport interface StatGridAPI {\n  /** ARIA attributes to spread on the grid container element (`role=\"list\"`). */\n  ariaProps: { role: 'list' }\n  /** Data attributes for styling hooks. */\n  dataAttributes: Record<string, string>\n}\n\n/**\n * Compute the number of grid columns for a stat grid.\n *\n * - 1 item  → 1 column\n * - 2 items → 2 columns\n * - 3 or more items → capped at `max` (default 3)\n */\nexport function statColumns(count: number, max = 3): number {\n  if (count <= 0) return 1\n  if (count === 1) return 1\n  if (count === 2) return 2\n  return Math.min(count, max)\n}\n\n/**\n * Build the framework-agnostic container props for a stat grid.\n *\n * Returns `role=\"list\"` and data attributes; adapters spread these onto their\n * container element and render the items themselves.\n */\nexport function createStatGrid(): StatGridAPI {\n  return {\n    ariaProps: { role: 'list' },\n    dataAttributes: {},\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\n\n/** Grid container that lays out stat items. */\nexport const statGridVariants = cva({\n  base: 'grid gap-8',\n  variants: {\n    columns: {\n      '1': 'grid-cols-1',\n      '2': 'grid-cols-2',\n      '3': 'grid-cols-3',\n    },\n  },\n  defaultVariants: {\n    columns: '3',\n  },\n})\n\n/** Individual stat item container (role=\"listitem\"). */\nexport const statItemClass = 'flex flex-col'\n\n/** The large bold value of the stat. */\nexport const statValueClass = 'text-xl sm:text-2xl font-bold text-primary'\n\n/** The descriptive label below the value. */\nexport const statLabelClass = 'mt-1 text-sm text-muted-foreground leading-snug'\n", "import * as React from 'react'\nimport {\n  createStatGrid,\n  statColumns,\n  statGridVariants,\n  statItemClass,\n  statValueClass,\n  statLabelClass,\n} from '@refraction-ui/stat-grid'\nimport { cn } from '@refraction-ui/shared'\n\nexport type { StatItem } from '@refraction-ui/stat-grid'\n\nexport interface StatGridItem {\n  /** The primary value displayed prominently. Allows rich content in React. */\n  value: React.ReactNode\n  /** The descriptive label shown below the value. */\n  label: React.ReactNode\n}\n\nexport interface StatGridProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'content'> {\n  /** The stat items to display in the grid. */\n  items: StatGridItem[]\n  /**\n   * Number of columns. Defaults to `statColumns(items.length)`:\n   * 1 item → 1, 2 items → 2, 3+ items → 3.\n   */\n  columns?: number\n}\n\n/**\n * StatGrid — a marketing-style grid of stat callouts.\n *\n * Each item shows a large bold value and a small muted label. The grid\n * automatically computes the column count from the number of items, or you can\n * override it with `columns`. Uses `role=\"list\"` / `role=\"listitem\"` for\n * accessible enumeration.\n */\nexport const StatGrid = React.forwardRef<HTMLDivElement, StatGridProps>(\n  function StatGrid({ items, columns, className, ...props }, ref) {\n    const cols = columns ?? statColumns(items.length)\n    const { ariaProps, dataAttributes } = createStatGrid()\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          statGridVariants({ columns: String(cols) as '1' | '2' | '3' }),\n          className,\n        )}\n        style={{ gridTemplateColumns: `repeat(${cols}, 1fr)` }}\n        {...ariaProps}\n        {...dataAttributes}\n        {...props}\n      >\n        {items.map((item, index) => (\n          <div key={index} role=\"listitem\" className={statItemClass}>\n            <span className={statValueClass}>{item.value}</span>\n            <span className={statLabelClass}>{item.label}</span>\n          </div>\n        ))}\n      </div>\n    )\n  },\n)\n"],
-  "mappings": ";;;;;;;;;AAsBO,SAAS,YAAY,OAAe,MAAM,GAAW;AAC1D,MAAI,SAAS,EAAG,QAAO;AACvB,MAAI,UAAU,EAAG,QAAO;AACxB,MAAI,UAAU,EAAG,QAAO;AACxB,SAAO,KAAK,IAAI,OAAO,GAAG;AAC5B;AAQO,SAAS,iBAA8B;AAC5C,SAAO;IACL,WAAW,EAAE,MAAM,OAAA;IACnB,gBAAgB,CAAA;EAAC;AAErB;ACrCO,IAAM,mBAAmB,IAAI;EAClC,MAAM;EACN,UAAU;IACR,SAAS;MACP,KAAK;MACL,KAAK;MACL,KAAK;IAAA;EACP;EAEF,iBAAiB;IACf,SAAS;EAAA;AAEb,CAAC;AAGM,IAAM,gBAAgB;AAGtB,IAAM,iBAAiB;AAGvB,IAAM,iBAAiB;;;;ACevB,IAAM,WAAiB;EAC5B,SAASA,UAAS,EAAE,OAAO,SAAS,WAAW,GAAG,MAAA,GAAS,KAAK;AAC9D,UAAM,OAAO,WAAW,YAAY,MAAM,MAAM;AAChD,UAAM,EAAE,WAAW,eAAA,IAAmB,eAAA;AAEtC,WACE;MAAC;MAAA;QACC;QACA,WAAW;UACT,iBAAiB,EAAE,SAAS,OAAO,IAAI,EAAA,CAAsB;UAC7D;QAAA;QAEF,OAAO,EAAE,qBAAqB,UAAU,IAAI,SAAA;QAC3C,GAAG;QACH,GAAG;QACH,GAAG;QAEH,UAAA,MAAM,IAAI,CAAC,MAAM,UAAA,qBACf,OAAA,EAAgB,MAAK,YAAW,WAAW,eAC1C,UAAA;UAAA,oBAAC,QAAA,EAAK,WAAW,gBAAiB,UAAA,KAAK,MAAA,CAAM;UAC7C,oBAAC,QAAA,EAAK,WAAW,gBAAiB,UAAA,KAAK,MAAA,CAAM;QAAA,EAAA,GAFrC,KAGV,CACD;MAAA;IAAA;EAGP;AACF;",
+  "sourcesContent": ["/** Semantic colour of a stat's value. */\nexport type StatTone = 'default' | 'positive' | 'negative' | 'caution'\n/** `plain` = marketing callouts; `card` = bordered dashboard KPI cards. */\nexport type StatGridVariant = 'plain' | 'card'\n/** Whether the label sits under the value (callout) or above it (KPI). */\nexport type StatGridLayout = 'value-first' | 'label-first'\n/** Column count: a fixed maximum that reflows down on narrow screens, or `auto`. */\nexport type StatGridColumns = 1 | 2 | 3 | 4 | 'auto'\n\n/** A single stat callout displayed in the grid. */\nexport type StatItem = {\n  /** The primary value displayed prominently (e.g. \"10k+\", \"$4.2M\"). */\n  value: string\n  /** The descriptive label. */\n  label: string\n  /** Stable key; defaults to the index. */\n  id?: string\n  /** Optional line explaining the figure (how it was computed, a delta). */\n  description?: string\n  /** Colour of the value. Defaults to `default`. */\n  tone?: StatTone\n}\n\nexport interface StatGridAPI {\n  /** ARIA attributes to spread on the grid container element (`role=\"list\"`). */\n  ariaProps: { role: 'list' }\n  /** Data attributes for styling hooks. */\n  dataAttributes: Record<string, string>\n}\n\n/**\n * Compute the number of grid columns for a stat grid.\n *\n * - 1 item  → 1 column\n * - 2 items → 2 columns\n * - 3 or more items → capped at `max` (default 3)\n */\nexport function statColumns(count: number, max = 3): 1 | 2 | 3 | 4 {\n  if (count <= 1) return 1\n  if (count === 2) return 2\n  return Math.min(count, max, 4) as 3 | 4\n}\n\n/** The cva key for a column setting (clamped to the supported 1–4). */\nexport function statColumnsKey(columns: StatGridColumns): '1' | '2' | '3' | '4' | 'auto' {\n  if (columns === 'auto') return 'auto'\n  return String(Math.min(Math.max(Math.round(columns), 1), 4)) as '1' | '2' | '3' | '4'\n}\n\n/**\n * Build the framework-agnostic container props for a stat grid.\n *\n * Returns `role=\"list\"` and data attributes; adapters spread these onto their\n * container element and render the items themselves.\n */\nexport function createStatGrid(): StatGridAPI {\n  return {\n    ariaProps: { role: 'list' },\n    dataAttributes: {},\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\n\n/**\n * Grid container. Column counts are responsive (one column on a phone, more\n * as the width allows) — never a fixed inline template that cannot reflow.\n * `auto` fits as many ~12rem items per row as the width allows.\n */\nexport const statGridVariants = cva({\n  base: 'grid',\n  variants: {\n    columns: {\n      '1': 'grid-cols-1',\n      '2': 'grid-cols-1 sm:grid-cols-2',\n      '3': 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',\n      '4': 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',\n      auto: 'grid-cols-[repeat(auto-fill,minmax(12rem,1fr))]',\n    },\n    variant: {\n      plain: 'gap-8',\n      card: 'gap-3',\n    },\n  },\n  defaultVariants: {\n    columns: '3',\n    variant: 'plain',\n  },\n})\n\n/** Individual stat item container (role=\"listitem\"). */\nexport const statItemVariants = cva({\n  base: 'flex min-w-0 flex-col',\n  variants: {\n    variant: {\n      plain: '',\n      card: 'gap-1 rounded-lg border border-border bg-card p-4 text-card-foreground',\n    },\n  },\n  defaultVariants: {\n    variant: 'plain',\n  },\n})\n\n/** @deprecated Use `statItemVariants()`; kept for existing imports. */\nexport const statItemClass = 'flex flex-col'\n\n/** The value of a stat, by variant and tone. */\nexport const statValueVariants = cva({\n  base: 'font-bold tabular-nums',\n  variants: {\n    variant: {\n      plain: 'text-xl sm:text-2xl',\n      card: 'text-2xl leading-tight',\n    },\n    tone: {\n      default: '',\n      positive: 'text-success',\n      negative: 'text-destructive',\n      caution: 'text-warning',\n    },\n  },\n  compoundVariants: [\n    { variant: 'plain', tone: 'default', class: 'text-primary' },\n    { variant: 'card', tone: 'default', class: 'text-foreground' },\n  ],\n  defaultVariants: {\n    variant: 'plain',\n    tone: 'default',\n  },\n})\n\n/** @deprecated Use `statValueVariants()`; kept for existing imports. */\nexport const statValueClass = 'text-xl sm:text-2xl font-bold text-primary'\n\n/** The descriptive label. Above the value it reads as a small caption. */\nexport const statLabelVariants = cva({\n  base: 'text-muted-foreground',\n  variants: {\n    layout: {\n      'value-first': 'mt-1 text-sm leading-snug',\n      'label-first': 'text-xs uppercase tracking-wide',\n    },\n  },\n  defaultVariants: {\n    layout: 'value-first',\n  },\n})\n\n/** @deprecated Use `statLabelVariants()`; kept for existing imports. */\nexport const statLabelClass = 'mt-1 text-sm text-muted-foreground leading-snug'\n\n/** Optional line under a stat explaining how it was computed. */\nexport const statDescriptionClass = 'text-xs leading-snug text-muted-foreground'\n", "import * as React from 'react'\nimport {\n  createStatGrid,\n  statColumns,\n  statColumnsKey,\n  statGridVariants,\n  statItemVariants,\n  statValueVariants,\n  statLabelVariants,\n  statDescriptionClass,\n  type StatTone,\n  type StatGridVariant,\n  type StatGridLayout,\n  type StatGridColumns,\n} from '@refraction-ui/stat-grid'\nimport { cn } from '@refraction-ui/shared'\n\nexport type { StatItem, StatTone, StatGridVariant, StatGridLayout, StatGridColumns } from '@refraction-ui/stat-grid'\n\nexport interface StatGridItem {\n  /** The primary value displayed prominently. Allows rich content in React. */\n  value: React.ReactNode\n  /** The descriptive label. */\n  label: React.ReactNode\n  /** Stable key; defaults to the index. */\n  id?: string\n  /** Optional line explaining the figure (how it was computed, a delta). */\n  description?: React.ReactNode\n  /** Colour of the value. Defaults to `default`. */\n  tone?: StatTone\n  /** Extra attributes for this item's element (`data-*`, `aria-*`, `title`, className). */\n  props?: React.HTMLAttributes<HTMLDivElement>\n}\n\nexport interface StatGridProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'content'> {\n  /** The stat items to display in the grid. */\n  items: StatGridItem[]\n  /**\n   * Maximum columns (reflows to fewer on narrow screens), or `auto` to fit as\n   * many ~12rem items as the width allows. Defaults to\n   * `statColumns(items.length)`: 1 → 1, 2 → 2, 3+ → 3.\n   */\n  columns?: StatGridColumns\n  /** `plain` marketing callouts (default) or bordered `card` KPIs. */\n  variant?: StatGridVariant\n  /** `value-first` (default) or `label-first` (dashboard KPI order). */\n  layout?: StatGridLayout\n}\n\n/**\n * StatGrid — a responsive grid of stats: marketing callouts (`plain`) or\n * dashboard KPI cards (`card`), value- or label-first, with an optional\n * description and a tone per item. Uses `role=\"list\"` / `role=\"listitem\"`.\n */\nexport const StatGrid = React.forwardRef<HTMLDivElement, StatGridProps>(\n  function StatGrid(\n    { items, columns, variant = 'plain', layout = 'value-first', className, ...props },\n    ref,\n  ) {\n    const cols = statColumnsKey(columns ?? statColumns(items.length))\n    const { ariaProps, dataAttributes } = createStatGrid()\n\n    return (\n      <div\n        ref={ref}\n        className={cn(statGridVariants({ columns: cols, variant }), className)}\n        data-variant={variant}\n        data-layout={layout}\n        {...ariaProps}\n        {...dataAttributes}\n        {...props}\n      >\n        {items.map((item, index) => {\n          const { className: itemClassName, ...itemProps } = item.props ?? {}\n          const label = <span className={statLabelVariants({ layout })}>{item.label}</span>\n          return (\n            <div\n              key={item.id ?? index}\n              role=\"listitem\"\n              className={cn(statItemVariants({ variant }), itemClassName)}\n              data-tone={item.tone ?? 'default'}\n              {...itemProps}\n            >\n              {layout === 'label-first' && label}\n              <span className={statValueVariants({ variant, tone: item.tone ?? 'default' })}>{item.value}</span>\n              {layout === 'value-first' && label}\n              {item.description != null && <span className={statDescriptionClass}>{item.description}</span>}\n            </div>\n          )\n        })}\n      </div>\n    )\n  },\n)\n"],
+  "mappings": ";;;;;;;;;AAqCO,SAAS,YAAY,OAAe,MAAM,GAAkB;AACjE,MAAI,SAAS,EAAG,QAAO;AACvB,MAAI,UAAU,EAAG,QAAO;AACxB,SAAO,KAAK,IAAI,OAAO,KAAK,CAAC;AAC/B;AAGO,SAAS,eAAe,SAA0D;AACvF,MAAI,YAAY,OAAQ,QAAO;AAC/B,SAAO,OAAO,KAAK,IAAI,KAAK,IAAI,KAAK,MAAM,OAAO,GAAG,CAAC,GAAG,CAAC,CAAC;AAC7D;AAQO,SAAS,iBAA8B;AAC5C,SAAO;IACL,WAAW,EAAE,MAAM,OAAA;IACnB,gBAAgB,CAAA;EAAC;AAErB;ACrDO,IAAM,mBAAmB,IAAI;EAClC,MAAM;EACN,UAAU;IACR,SAAS;MACP,KAAK;MACL,KAAK;MACL,KAAK;MACL,KAAK;MACL,MAAM;IAAA;IAER,SAAS;MACP,OAAO;MACP,MAAM;IAAA;EACR;EAEF,iBAAiB;IACf,SAAS;IACT,SAAS;EAAA;AAEb,CAAC;AAGM,IAAM,mBAAmB,IAAI;EAClC,MAAM;EACN,UAAU;IACR,SAAS;MACP,OAAO;MACP,MAAM;IAAA;EACR;EAEF,iBAAiB;IACf,SAAS;EAAA;AAEb,CAAC;AAMM,IAAM,oBAAoB,IAAI;EACnC,MAAM;EACN,UAAU;IACR,SAAS;MACP,OAAO;MACP,MAAM;IAAA;IAER,MAAM;MACJ,SAAS;MACT,UAAU;MACV,UAAU;MACV,SAAS;IAAA;EACX;EAEF,kBAAkB;IAChB,EAAE,SAAS,SAAS,MAAM,WAAW,OAAO,eAAA;IAC5C,EAAE,SAAS,QAAQ,MAAM,WAAW,OAAO,kBAAA;EAAkB;EAE/D,iBAAiB;IACf,SAAS;IACT,MAAM;EAAA;AAEV,CAAC;AAMM,IAAM,oBAAoB,IAAI;EACnC,MAAM;EACN,UAAU;IACR,QAAQ;MACN,eAAe;MACf,eAAe;IAAA;EACjB;EAEF,iBAAiB;IACf,QAAQ;EAAA;AAEZ,CAAC;AAMM,IAAM,uBAAuB;;;;ACpC7B,IAAM,WAAiB;EAC5B,SAASA,UACP,EAAE,OAAO,SAAS,UAAU,SAAS,SAAS,eAAe,WAAW,GAAG,MAAA,GAC3E,KACA;AACA,UAAM,OAAO,eAAe,WAAW,YAAY,MAAM,MAAM,CAAC;AAChE,UAAM,EAAE,WAAW,eAAA,IAAmB,eAAA;AAEtC,WACE;MAAC;MAAA;QACC;QACA,WAAW,GAAG,iBAAiB,EAAE,SAAS,MAAM,QAAA,CAAS,GAAG,SAAS;QACrE,gBAAc;QACd,eAAa;QACZ,GAAG;QACH,GAAG;QACH,GAAG;QAEH,UAAA,MAAM,IAAI,CAAC,MAAM,UAAU;AAC1B,gBAAM,EAAE,WAAW,eAAe,GAAG,UAAA,IAAc,KAAK,SAAS,CAAA;AACjE,gBAAM,QAAQ,oBAAC,QAAA,EAAK,WAAW,kBAAkB,EAAE,OAAA,CAAQ,GAAI,UAAA,KAAK,MAAA,CAAM;AAC1E,iBACE;YAAC;YAAA;cAEC,MAAK;cACL,WAAW,GAAG,iBAAiB,EAAE,QAAA,CAAS,GAAG,aAAa;cAC1D,aAAW,KAAK,QAAQ;cACvB,GAAG;cAEH,UAAA;gBAAA,WAAW,iBAAiB;gBAC7B,oBAAC,QAAA,EAAK,WAAW,kBAAkB,EAAE,SAAS,MAAM,KAAK,QAAQ,UAAA,CAAW,GAAI,UAAA,KAAK,MAAA,CAAM;gBAC1F,WAAW,iBAAiB;gBAC5B,KAAK,eAAe,QAAQ,oBAAC,QAAA,EAAK,WAAW,sBAAuB,UAAA,KAAK,YAAA,CAAY;cAAA;YAAA;YATjF,KAAK,MAAM;UAAA;QAYtB,CAAC;MAAA;IAAA;EAGP;AACF;",
   "names": ["StatGrid"]
 }

package/dist/react-status-indicator.js

@@ -1,7 +1,7 @@
 import {
   cn,
   cva
-} from "./chunk-ZF3OHCGV.js";
+} from "./chunk-2Q6HHFAN.js";
 
 // ../react-status-indicator/dist/index.js
 import * as React from "react";

package/dist/react-steps.js

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

package/dist/react-sticky-note.js

@@ -1,7 +1,7 @@
 import {
   cn,
   cva
-} from "./chunk-ZF3OHCGV.js";
+} from "./chunk-2Q6HHFAN.js";
 
 // ../react-sticky-note/dist/index.js
 import * as React from "react";

package/dist/react-switch.js

@@ -2,7 +2,7 @@ import {
   Keys,
   cn,
   cva
-} from "./chunk-ZF3OHCGV.js";
+} from "./chunk-2Q6HHFAN.js";
 
 // ../react-switch/dist/index.js
 import * as React from "react";

package/dist/react-table-of-contents.js

@@ -1,6 +1,6 @@
 import {
   cn
-} from "./chunk-ZF3OHCGV.js";
+} from "./chunk-2Q6HHFAN.js";
 
 // ../react-table-of-contents/dist/index.js
 import * as React from "react";

package/dist/react-table.js

@@ -0,0 +1,148 @@
+import {
+  cn,
+  cva
+} from "./chunk-2Q6HHFAN.js";
+
+// ../react-table/dist/index.js
+import * as React from "react";
+
+// ../table/dist/index.js
+function createTable(props = {}) {
+  return {
+    dataAttributes: {
+      "data-slot": "table",
+      "data-density": props.density ?? "default",
+      "data-head-tone": props.headTone ?? "default"
+    }
+  };
+}
+var tableContainerClass = "relative w-full overflow-x-auto";
+var tableRootVariants = cva({
+  base: "w-full caption-bottom border-collapse text-sm",
+  variants: {
+    fixed: {
+      true: "table-fixed",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    fixed: "false"
+  }
+});
+var tableCaptionClass = "mt-2 text-xs text-muted-foreground";
+var tableRowClass = "border-b border-border-subtle last:border-b-0";
+var align = {
+  start: "text-start",
+  center: "text-center",
+  end: "text-end"
+};
+var tableHeadVariants = cva({
+  base: "border-b border-border-subtle bg-surface-subtle align-middle",
+  variants: {
+    align,
+    tone: {
+      default: "text-xs font-medium text-muted-foreground",
+      eyebrow: "text-[11px] font-semibold uppercase tracking-wider text-muted-foreground"
+    },
+    density: {
+      compact: "h-8 px-2",
+      default: "h-9 px-3"
+    }
+  },
+  defaultVariants: {
+    align: "start",
+    tone: "default",
+    density: "default"
+  }
+});
+var tableCellVariants = cva({
+  base: "align-middle",
+  variants: {
+    align,
+    density: {
+      compact: "px-2 py-1.5",
+      default: "px-3 py-2.5"
+    },
+    numeric: {
+      true: "tabular-nums whitespace-nowrap",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    align: "start",
+    density: "default",
+    numeric: "false"
+  }
+});
+
+// ../react-table/dist/index.js
+import { jsx } from "react/jsx-runtime";
+var TableContext = React.createContext({ density: "default", headTone: "default" });
+var Table = React.forwardRef(function Table2({ density = "default", headTone = "default", fixed = false, containerClassName, className, ...props }, ref) {
+  const ctx = React.useMemo(() => ({ density, headTone }), [density, headTone]);
+  const { dataAttributes } = createTable({ density, headTone });
+  return /* @__PURE__ */ jsx(TableContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx("div", { className: cn(tableContainerClass, containerClassName), "data-slot": "table-container", children: /* @__PURE__ */ jsx(
+    "table",
+    {
+      ref,
+      className: cn(tableRootVariants({ fixed: fixed ? "true" : "false" }), className),
+      ...dataAttributes,
+      ...props
+    }
+  ) }) });
+});
+var TableHeader = React.forwardRef(
+  function TableHeader2(props, ref) {
+    return /* @__PURE__ */ jsx("thead", { ref, "data-slot": "table-header", ...props });
+  }
+);
+var TableBody = React.forwardRef(
+  function TableBody2(props, ref) {
+    return /* @__PURE__ */ jsx("tbody", { ref, "data-slot": "table-body", ...props });
+  }
+);
+var TableRow = React.forwardRef(
+  function TableRow2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("tr", { ref, className: cn(tableRowClass, className), "data-slot": "table-row", ...props });
+  }
+);
+var TableHead = React.forwardRef(function TableHead2({ align: align2, scope = "col", className, ...props }, ref) {
+  const { density, headTone } = React.useContext(TableContext);
+  return /* @__PURE__ */ jsx(
+    "th",
+    {
+      ref,
+      scope,
+      className: cn(tableHeadVariants({ align: align2, density, tone: headTone }), className),
+      "data-slot": "table-head",
+      ...props
+    }
+  );
+});
+var TableCell = React.forwardRef(function TableCell2({ align: align2, numeric = false, className, ...props }, ref) {
+  const { density } = React.useContext(TableContext);
+  return /* @__PURE__ */ jsx(
+    "td",
+    {
+      ref,
+      className: cn(tableCellVariants({ align: align2, density, numeric: numeric ? "true" : "false" }), className),
+      "data-slot": "table-cell",
+      ...props
+    }
+  );
+});
+var TableCaption = React.forwardRef(
+  function TableCaption2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("caption", { ref, className: cn(tableCaptionClass, className), "data-slot": "table-caption", ...props });
+  }
+);
+export {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+};
+//# sourceMappingURL=react-table.js.map

package/dist/react-table.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../table/src/table.ts", "../../table/src/table.styles.ts", "../../react-table/src/table.tsx"],
+  "sourcesContent": ["/** Cell padding for every cell of a table. */\nexport type TableDensity = 'compact' | 'default'\n/** Horizontal alignment of a header or data cell (logical, RTL-safe). */\nexport type TableAlign = 'start' | 'center' | 'end'\n/** Look of header cells: `eyebrow` is small uppercase tracked text. */\nexport type TableHeadTone = 'default' | 'eyebrow'\n\nexport interface TableAPI {\n  /** Data attributes for styling hooks. */\n  dataAttributes: Record<string, string>\n}\n\n/** Framework-agnostic data attributes for the table root. */\nexport function createTable(\n  props: { density?: TableDensity; headTone?: TableHeadTone } = {},\n): TableAPI {\n  return {\n    dataAttributes: {\n      'data-slot': 'table',\n      'data-density': props.density ?? 'default',\n      'data-head-tone': props.headTone ?? 'default',\n    },\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\n\n/** Scroll container: a wide table scrolls inside it instead of the page. */\nexport const tableContainerClass = 'relative w-full overflow-x-auto'\n\n/** The `<table>`. `fixed` pins column widths to the header row. */\nexport const tableRootVariants = cva({\n  base: 'w-full caption-bottom border-collapse text-sm',\n  variants: {\n    fixed: {\n      true: 'table-fixed',\n      false: '',\n    },\n  },\n  defaultVariants: {\n    fixed: 'false',\n  },\n})\n\n/** Caption under the table. */\nexport const tableCaptionClass = 'mt-2 text-xs text-muted-foreground'\n\n/** Body rows: a hairline between rows, none after the last. */\nexport const tableRowClass = 'border-b border-border-subtle last:border-b-0'\n\nconst align = {\n  start: 'text-start',\n  center: 'text-center',\n  end: 'text-end',\n}\n\n/** Header cell: subtle surface, rule under it. */\nexport const tableHeadVariants = cva({\n  base: 'border-b border-border-subtle bg-surface-subtle align-middle',\n  variants: {\n    align,\n    tone: {\n      default: 'text-xs font-medium text-muted-foreground',\n      eyebrow: 'text-[11px] font-semibold uppercase tracking-wider text-muted-foreground',\n    },\n    density: {\n      compact: 'h-8 px-2',\n      default: 'h-9 px-3',\n    },\n  },\n  defaultVariants: {\n    align: 'start',\n    tone: 'default',\n    density: 'default',\n  },\n})\n\n/** Data cell. */\nexport const tableCellVariants = cva({\n  base: 'align-middle',\n  variants: {\n    align,\n    density: {\n      compact: 'px-2 py-1.5',\n      default: 'px-3 py-2.5',\n    },\n    numeric: {\n      true: 'tabular-nums whitespace-nowrap',\n      false: '',\n    },\n  },\n  defaultVariants: {\n    align: 'start',\n    density: 'default',\n    numeric: 'false',\n  },\n})\n", "import * as React from 'react'\nimport {\n  createTable,\n  tableContainerClass,\n  tableRootVariants,\n  tableCaptionClass,\n  tableRowClass,\n  tableHeadVariants,\n  tableCellVariants,\n  type TableAlign,\n  type TableDensity,\n  type TableHeadTone,\n} from '@refraction-ui/table'\nimport { cn } from '@refraction-ui/shared'\n\nexport type { TableAlign, TableDensity, TableHeadTone }\n\ninterface TableContextValue {\n  density: TableDensity\n  headTone: TableHeadTone\n}\n\nconst TableContext = React.createContext<TableContextValue>({ density: 'default', headTone: 'default' })\n\nexport interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {\n  /** Cell padding for every cell. Defaults to `default`. */\n  density?: TableDensity\n  /** Look of every header cell. Defaults to `default`. */\n  headTone?: TableHeadTone\n  /** Fixed layout: column widths come from the header row. */\n  fixed?: boolean\n  /** Class for the horizontal scroll container around the table. */\n  containerClassName?: string\n}\n\n/**\n * Table — composable, semantic table primitives for cells that hold\n * components (badges, buttons, links). The parts map one-to-one to the HTML\n * table elements. For a data-driven table with sorting/filtering use DataTable.\n */\nexport const Table = React.forwardRef<HTMLTableElement, TableProps>(function Table(\n  { density = 'default', headTone = 'default', fixed = false, containerClassName, className, ...props },\n  ref,\n) {\n  const ctx = React.useMemo(() => ({ density, headTone }), [density, headTone])\n  const { dataAttributes } = createTable({ density, headTone })\n  return (\n    <TableContext.Provider value={ctx}>\n      <div className={cn(tableContainerClass, containerClassName)} data-slot=\"table-container\">\n        <table\n          ref={ref}\n          className={cn(tableRootVariants({ fixed: fixed ? 'true' : 'false' }), className)}\n          {...dataAttributes}\n          {...props}\n        />\n      </div>\n    </TableContext.Provider>\n  )\n})\n\nexport const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(\n  function TableHeader(props, ref) {\n    return <thead ref={ref} data-slot=\"table-header\" {...props} />\n  },\n)\n\nexport const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(\n  function TableBody(props, ref) {\n    return <tbody ref={ref} data-slot=\"table-body\" {...props} />\n  },\n)\n\nexport const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(\n  function TableRow({ className, ...props }, ref) {\n    return <tr ref={ref} className={cn(tableRowClass, className)} data-slot=\"table-row\" {...props} />\n  },\n)\n\nexport interface TableHeadProps extends Omit<React.ThHTMLAttributes<HTMLTableCellElement>, 'align'> {\n  /** Horizontal alignment. Defaults to `start`. */\n  align?: TableAlign\n}\n\n/** Header cell. `scope` defaults to `col`. */\nexport const TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(function TableHead(\n  { align, scope = 'col', className, ...props },\n  ref,\n) {\n  const { density, headTone } = React.useContext(TableContext)\n  return (\n    <th\n      ref={ref}\n      scope={scope}\n      className={cn(tableHeadVariants({ align, density, tone: headTone }), className)}\n      data-slot=\"table-head\"\n      {...props}\n    />\n  )\n})\n\nexport interface TableCellProps extends Omit<React.TdHTMLAttributes<HTMLTableCellElement>, 'align'> {\n  /** Horizontal alignment. Defaults to `start`. */\n  align?: TableAlign\n  /** Tabular figures, no wrapping — for numbers. */\n  numeric?: boolean\n}\n\nexport const TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(function TableCell(\n  { align, numeric = false, className, ...props },\n  ref,\n) {\n  const { density } = React.useContext(TableContext)\n  return (\n    <td\n      ref={ref}\n      className={cn(tableCellVariants({ align, density, numeric: numeric ? 'true' : 'false' }), className)}\n      data-slot=\"table-cell\"\n      {...props}\n    />\n  )\n})\n\nexport const TableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(\n  function TableCaption({ className, ...props }, ref) {\n    return <caption ref={ref} className={cn(tableCaptionClass, className)} data-slot=\"table-caption\" {...props} />\n  },\n)\n"],
+  "mappings": "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",
+  "names": ["Table", "TableHeader", "TableBody", "TableRow", "TableHead", "align", "TableCell", "TableCaption"]
+}

package/dist/react-tabs.js

@@ -4,7 +4,7 @@ import {
   cva,
   devWarn,
   generateId
-} from "./chunk-ZF3OHCGV.js";
+} from "./chunk-2Q6HHFAN.js";
 
 // ../react-tabs/dist/index.js
 import * as React from "react";
@@ -96,6 +96,23 @@ function createTabs(props = {}) {
     idPrefix
   };
 }
+function getNextTabIndex(current, key, count, orientation = "horizontal") {
+  if (count === 0) return null;
+  const prev = orientation === "horizontal" ? "ArrowLeft" : "ArrowUp";
+  const next = orientation === "horizontal" ? "ArrowRight" : "ArrowDown";
+  switch (key) {
+    case next:
+      return current < 0 ? 0 : (current + 1) % count;
+    case prev:
+      return current < 0 ? count - 1 : (current - 1 + count) % count;
+    case "Home":
+      return 0;
+    case "End":
+      return count - 1;
+    default:
+      return null;
+  }
+}
 var tabsListVariants = cva({
   base: "inline-flex max-w-full overflow-x-auto items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground"
 });
@@ -135,14 +152,31 @@ var Tabs = React.forwardRef(
       apiRef.current = createTabs({ value, orientation });
     }
     const api = apiRef.current;
+    const [panels, setPanels] = React.useState(() => /* @__PURE__ */ new Set());
+    const registerPanel = React.useCallback((panelValue) => {
+      setPanels((prev) => prev.has(panelValue) ? prev : new Set(prev).add(panelValue));
+      return () => setPanels((prev) => {
+        if (!prev.has(panelValue)) return prev;
+        const next = new Set(prev);
+        next.delete(panelValue);
+        return next;
+      });
+    }, []);
+    const allPanels = React.useMemo(() => {
+      const found = new Set(panels);
+      collectPanelValues(children, found);
+      return found;
+    }, [children, panels]);
     const ctx = React.useMemo(
       () => ({
         value,
         onValueChange: handleValueChange,
         orientation,
-        idPrefix: api.idPrefix
+        idPrefix: api.idPrefix,
+        panels: allPanels,
+        registerPanel
       }),
-      [value, handleValueChange, orientation, api.idPrefix]
+      [value, handleValueChange, orientation, api.idPrefix, allPanels, registerPanel]
     );
     return React.createElement(
       "div",
@@ -151,21 +185,62 @@ var Tabs = React.forwardRef(
     );
   }
 );
+function collectPanelValues(node, into) {
+  React.Children.forEach(node, (child) => {
+    if (!React.isValidElement(child)) return;
+    if (child.type === TabsContent && typeof child.props.value === "string") {
+      into.add(child.props.value);
+      return;
+    }
+    collectPanelValues(child.props.children, into);
+  });
+}
 var TabsList = React.forwardRef(
-  function TabsList2({ className, ...props }, ref) {
+  function TabsList2({ className, onKeyDown, ...props }, forwardedRef) {
     const { orientation } = useTabsContext();
+    const listRef = React.useRef(null);
+    const ref = React.useCallback(
+      (node) => {
+        listRef.current = node;
+        if (typeof forwardedRef === "function") forwardedRef(node);
+        else if (forwardedRef) forwardedRef.current = node;
+      },
+      [forwardedRef]
+    );
+    React.useEffect(() => {
+      const tabs = enabledTabs(listRef.current);
+      const stop = tabs.find((tab) => tab.getAttribute("aria-selected") === "true") ?? tabs[0];
+      for (const tab of tabs) tab.tabIndex = tab === stop ? 0 : -1;
+    });
+    const handleKeyDown = (e) => {
+      onKeyDown?.(e);
+      if (e.defaultPrevented) return;
+      const tabs = enabledTabs(listRef.current);
+      const current = tabs.indexOf(e.target);
+      if (current === -1) return;
+      const next = getNextTabIndex(current, e.key, tabs.length, orientation);
+      if (next === null) return;
+      e.preventDefault();
+      tabs[next].focus();
+      tabs[next].click();
+    };
     return React.createElement("div", {
       ref,
       role: "tablist",
       "aria-orientation": orientation,
       className: cn(tabsListVariants(), className),
+      onKeyDown: handleKeyDown,
       ...props
     });
   }
 );
+function enabledTabs(list) {
+  if (!list) return [];
+  return Array.from(list.querySelectorAll('[role="tab"]:not([disabled])'));
+}
 var TabsTrigger = React.forwardRef(
   function TabsTrigger2({ value, className, onClick, onKeyDown, children, ...props }, ref) {
-    const { value: activeValue, onValueChange, orientation, idPrefix } = useTabsContext();
+    const { value: activeValue, onValueChange, idPrefix, panels } = useTabsContext();
     const isSelected = activeValue === value;
     const tabId = `${idPrefix}-tab-${value}`;
     const panelId = `${idPrefix}-panel-${value}`;
@@ -183,7 +258,8 @@ var TabsTrigger = React.forwardRef(
         type: "button",
         role: "tab",
         "aria-selected": isSelected,
-        "aria-controls": panelId,
+        // Only the selected panel is rendered; never reference a missing element.
+        "aria-controls": isSelected && panels.has(value) ? panelId : void 0,
         tabIndex: isSelected ? 0 : -1,
         id: tabId,
         "data-state": isSelected ? "active" : "inactive",
@@ -198,7 +274,8 @@ var TabsTrigger = React.forwardRef(
 );
 var TabsContent = React.forwardRef(
   function TabsContent2({ value, className, children, ...props }, ref) {
-    const { value: activeValue, idPrefix } = useTabsContext();
+    const { value: activeValue, idPrefix, registerPanel } = useTabsContext();
+    React.useEffect(() => registerPanel(value), [registerPanel, value]);
     const isSelected = activeValue === value;
     const tabId = `${idPrefix}-tab-${value}`;
     const panelId = `${idPrefix}-panel-${value}`;