@nexub/react 1.7.0 → 1.9.0

package/dist/{chunk-C6JRJ6JW.js → chunk-22BGPRJZ.js}

@@ -3,7 +3,7 @@ import {
   disabledContainer,
   disabledText,
   pressable
-} from "./chunk-7SXR4PGO.js";
+} from "./chunk-5W3AOOYS.js";
 import {
   glassSurfaceClass
 } from "./chunk-DEIBF3P7.js";

package/dist/{chunk-NGQKBDHA.js → chunk-322WR6EU.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   toneTextClasses
-} from "./chunk-C6JRJ6JW.js";
+} from "./chunk-22BGPRJZ.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";

package/dist/{chunk-24ZFAXB2.js → chunk-3MSIO7KM.js}

@@ -60,7 +60,35 @@ var defaultMessages = {
   sources: "Sources",
   source: (n) => `Source ${n}`,
   jumpToLatest: "Jump to latest",
-  conversation: "Conversation"
+  conversation: "Conversation",
+  pageOf: (page, total) => `Page ${page} of ${total}`,
+  previous: "Previous",
+  next: "Next",
+  search: "Search",
+  searchProduct: (productName) => `Search ${productName}`,
+  keyboardShortcut: (shortcut) => `Keyboard shortcut: ${shortcut}`,
+  commandKey: "Command",
+  controlKey: "Control",
+  searching: "Searching\u2026",
+  searchFailed: "Search failed. Try again.",
+  noResultsFor: (query) => `No results for \u201C${query}\u201D`,
+  typeToSearch: "Type to search",
+  switchOrganization: (name) => `${name}, switch organization`,
+  organizations: "Organizations",
+  switchToLightTheme: "Switch to light theme",
+  switchToDarkTheme: "Switch to dark theme",
+  glass: "Glass",
+  glassClear: "Clear",
+  glassBalanced: "Balanced",
+  glassTinted: "Tinted",
+  glassSolid: "Solid",
+  accountMenu: (name) => `Account: ${name}`,
+  manageAccount: "Manage your Nexub Account",
+  privacyPolicy: "Privacy policy",
+  termsOfService: "Terms of service",
+  signOut: "Sign out",
+  signingOut: "Signing out\u2026",
+  accountAndApps: "Account and apps"
 };
 var NexubContext = React.createContext({
   locale: void 0,

package/dist/{chunk-AEBYQKLS.js → chunk-3XX45SUC.js}

@@ -36,6 +36,64 @@ function readGlass(key, fallback) {
   }
   return fallback;
 }
+var CONTRAST_QUERY = "(prefers-contrast: more)";
+function readContrast(root) {
+  const attr = root.getAttribute("data-contrast");
+  if (attr === "standard" || attr === "medium" || attr === "high") return attr;
+  return window.matchMedia(CONTRAST_QUERY).matches ? "high" : "standard";
+}
+function useSeedTheme(seed, target) {
+  React.useEffect(() => {
+    if (!seed) return;
+    const color = seed;
+    const root = document.documentElement;
+    const mq = window.matchMedia(CONTRAST_QUERY);
+    const observer = new MutationObserver(() => update());
+    let applied = [];
+    let create;
+    let done = false;
+    const clear = () => {
+      for (const name of applied) root.style.removeProperty(name);
+      applied = [];
+    };
+    const stop = () => {
+      done = true;
+      observer.disconnect();
+      mq.removeEventListener("change", update);
+    };
+    function update() {
+      if (done || !create) return;
+      let vars;
+      try {
+        vars = create(color, { contrast: readContrast(root), target });
+      } catch (error) {
+        console.error(error);
+        clear();
+        stop();
+        return;
+      }
+      clear();
+      for (const [name, value] of Object.entries(vars)) root.style.setProperty(name, value);
+      applied = Object.keys(vars);
+    }
+    observer.observe(root, { attributes: true, attributeFilter: ["data-contrast"] });
+    mq.addEventListener("change", update);
+    import("@nexub/tokens/seed").then(
+      (mod) => {
+        create = mod.createSeedTheme;
+        update();
+      },
+      (error) => {
+        console.error(error);
+        stop();
+      }
+    );
+    return () => {
+      stop();
+      clear();
+    };
+  }, [seed, target]);
+}
 function writeStorage(key, value) {
   if (typeof window === "undefined") return;
   try {
@@ -48,8 +106,11 @@ function ThemeProvider({
   defaultTheme = "system",
   storageKey = "nexub-theme",
   defaultGlass = "balanced",
-  glassStorageKey = "nexub-glass"
+  glassStorageKey = "nexub-glass",
+  seed,
+  seedTarget = "primary"
 }) {
+  useSeedTheme(seed, seedTarget);
   const [theme, setThemeState] = React.useState(defaultTheme);
   const [systemTheme, setSystemTheme] = React.useState("light");
   const [glass, setGlassState] = React.useState(defaultGlass);

package/dist/chunk-4B4XWDAH.js

@@ -0,0 +1 @@
+'use client';

package/dist/{chunk-AGYGWU6C.js → chunk-4MEV2WHD.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   useIntlLocale
-} from "./chunk-24ZFAXB2.js";
+} from "./chunk-3MSIO7KM.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";
@@ -22,6 +22,26 @@ var SHIFT = [
   "-translate-y-[90%]"
 ];
 var DIGITS = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
+var isDigit = (c) => c !== void 0 && /^[0-9]$/.test(c);
+var RTL = /[\u0590-\u08FF\u200F\u061C\uFB1D-\uFDFF\uFE70-\uFEFF]/;
+function digitRuns(items) {
+  const out = [];
+  let run = [];
+  const flush = () => {
+    if (run.length) out.push(/* @__PURE__ */ jsx("span", { dir: "ltr", children: run.map((r) => r.node) }, `run${run[run.length - 1].key}`));
+    run = [];
+  };
+  items.forEach((it, i) => {
+    const inRun = isDigit(it.char) || run.length > 0 && isDigit(items[i + 1]?.char) && /^[.,\u00A0\u202F' ]$/.test(it.char);
+    if (inRun) run.push(it);
+    else {
+      flush();
+      out.push(it.node);
+    }
+  });
+  flush();
+  return out;
+}
 function Char({ char, className, enter }) {
   const [entering] = React.useState(enter);
   const motion = entering ? { "data-motion": "from-fade" } : {};
@@ -61,6 +81,11 @@ var NumberTicker = React.forwardRef(
     React.useEffect(() => {
       mounted.current = true;
     }, []);
+    const rendered = chars.map(({ char, className: cls }, i) => {
+      const key = `${chars.length - 1 - i}${isDigit(char) ? "d" : `s${char}`}`;
+      return { char, key, node: /* @__PURE__ */ jsx(Char, { char, className: cls, enter: mounted.current }, key) };
+    });
+    const rtlText = RTL.test(text);
     return /* @__PURE__ */ jsxs(
       "span",
       {
@@ -71,11 +96,7 @@ var NumberTicker = React.forwardRef(
         ...props,
         children: [
           /* @__PURE__ */ jsx("span", { className: "sr-only", children: text }),
-          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: chars.map(({ char, className: cls }, i) => {
-            const fromEnd = chars.length - 1 - i;
-            const kind = /^[0-9]$/.test(char) ? "d" : `s${char}`;
-            return /* @__PURE__ */ jsx(Char, { char, className: cls, enter: mounted.current }, `${fromEnd}${kind}`);
-          }) })
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", dir: rtlText ? "rtl" : "ltr", children: rtlText ? digitRuns(rendered) : rendered.map((r) => r.node) })
         ]
       }
     );

package/dist/{chunk-FLZD7HQY.js → chunk-5FWJXSXT.js}

@@ -12,7 +12,7 @@ var menuItem = [
 ].join(" ");
 var menuSeparator = "-mx-1.5 my-1.5 h-px bg-[var(--color-outline-variant)]";
 var menuLabel = "px-2.5 py-1.5 text-label-sm text-[var(--color-on-surface-muted)]";
-var scrim = "bg-[color-mix(in_srgb,var(--color-scrim,#000)_40%,transparent)]";
+var scrim = "bg-[color-mix(in_srgb,var(--color-scrim)_40%,transparent)]";
 
 export {
   overlaySurface,

package/dist/{chunk-NYWD5SI4.js → chunk-5GN2GFW3.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   useNexubMessages
-} from "./chunk-24ZFAXB2.js";
+} from "./chunk-3MSIO7KM.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";

package/dist/{chunk-LESI7J7B.js → chunk-5NKIGEDZ.js}

@@ -12,6 +12,7 @@ var Kbd = React.forwardRef(
       "kbd",
       {
         ref,
+        dir: "ltr",
         className: cn(
           "inline-flex items-center justify-center font-mono text-xs",
           "px-1.5 py-0.5 min-w-[1.5rem]",

package/dist/{chunk-7SXR4PGO.js → chunk-5W3AOOYS.js}

@@ -2,7 +2,7 @@
 
 // src/utils/control.ts
 var field = [
-  "rounded-shape-field border border-[var(--color-border-input)]",
+  "rounded-shape-field border border-[var(--color-outline)]",
   "bg-[var(--color-surface-container-lowest)] text-[var(--color-on-surface)]",
   "transition-[border-color,box-shadow] duration-effects-fast ease-effects-fast",
   "hover:border-[var(--color-on-surface-variant)]"

package/dist/{chunk-NZR4UGUZ.js → chunk-6U5WQERX.js}

@@ -1,17 +1,17 @@
 'use client';
 import {
   useCalendarLocale
-} from "./chunk-MYP5ZTC3.js";
+} from "./chunk-HSM7RXUF.js";
 import {
   floatingSurface
-} from "./chunk-FLZD7HQY.js";
+} from "./chunk-5FWJXSXT.js";
 import {
   field,
   fieldFocusVisible
-} from "./chunk-7SXR4PGO.js";
+} from "./chunk-5W3AOOYS.js";
 import {
   useNexubMessages
-} from "./chunk-24ZFAXB2.js";
+} from "./chunk-3MSIO7KM.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";

package/dist/{chunk-NZT4TTNV.js → chunk-7BAIEYUW.js}

@@ -1,8 +1,14 @@
 'use client';
+import {
+  Table
+} from "./chunk-BU5QD2FS.js";
 import {
   disabledContainer,
   pressable
-} from "./chunk-7SXR4PGO.js";
+} from "./chunk-5W3AOOYS.js";
+import {
+  useNexubMessages
+} from "./chunk-3MSIO7KM.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";
@@ -19,20 +25,22 @@ import {
 } from "@tanstack/react-table";
 import { ArrowUp, ArrowDown, ChevronsUpDown } from "@nexub/icons";
 import { jsx, jsxs } from "react/jsx-runtime";
+var alignText = {
+  start: "text-start",
+  end: "text-end",
+  center: "text-center"
+};
+var alignJustify = {
+  start: "justify-start",
+  end: "justify-end",
+  center: "justify-center"
+};
 var pagerButton = cn(
   pressable,
   "border border-[var(--color-outline-variant)] bg-transparent px-4 py-2 min-h-[44px] text-label-lg text-[var(--color-on-surface)]",
   disabledContainer
 );
-var TableRoot = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "w-full overflow-auto", children: /* @__PURE__ */ jsx(
-  "table",
-  {
-    ref,
-    className: cn("w-full caption-bottom text-sm", className),
-    ...props
-  }
-) }));
-TableRoot.displayName = "DataTable.TableRoot";
+var TableRoot = Table.Root;
 var TableHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "thead",
   {
@@ -42,26 +50,21 @@ var TableHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 TableHeader.displayName = "DataTable.TableHeader";
-var TableBody = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  "tbody",
-  {
-    ref,
-    className: cn("[&_tr:last-child]:border-0", className),
-    ...props
-  }
-));
+var TableBody = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tbody", { ref, className: cn("[&_tr:last-child]:border-0", className), ...props }));
 TableBody.displayName = "DataTable.TableBody";
-var TableRow = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  "tr",
-  {
-    ref,
-    className: cn(
-      "border-b border-[var(--color-outline-variant)] transition-colors hover:bg-[color-mix(in_srgb,var(--color-on-surface)_8%,transparent)] data-[state=selected]:bg-[var(--color-surface-container-low)]",
-      className
-    ),
-    ...props
-  }
-));
+var TableRow = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "tr",
+    {
+      ref,
+      className: cn(
+        "border-b border-[var(--color-outline-variant)] transition-colors hover:bg-[color-mix(in_srgb,var(--color-on-surface)_8%,transparent)] data-[state=selected]:bg-[var(--color-surface-container-low)]",
+        className
+      ),
+      ...props
+    }
+  )
+);
 TableRow.displayName = "DataTable.TableRow";
 var TableHead = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "th",
@@ -93,9 +96,14 @@ function DataTable({
   enableSorting = false,
   enableRowSelection = false,
   pagination,
+  caption,
+  captionHidden = false,
   className,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
   ...props
 }) {
+  const messages = useNexubMessages();
   const [sorting, setSorting] = React.useState([]);
   const [rowSelection, setRowSelection] = React.useState({});
   const [paginationState, setPaginationState] = React.useState({
@@ -125,30 +133,46 @@ function DataTable({
     manualPagination: false
   });
   return /* @__PURE__ */ jsxs("div", { className: cn("space-y-4", className), ...props, children: [
-    /* @__PURE__ */ jsxs(TableRoot, { children: [
-      /* @__PURE__ */ jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { className: "hover:bg-transparent", children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(
-        TableHead,
-        {
-          "aria-sort": enableSorting && header.column.getCanSort() ? header.column.getIsSorted() === "asc" ? "ascending" : header.column.getIsSorted() === "desc" ? "descending" : "none" : void 0,
-          children: header.isPlaceholder ? null : enableSorting && header.column.getCanSort() ? /* @__PURE__ */ jsxs(
-            "button",
-            {
-              onClick: header.column.getToggleSortingHandler(),
-              className: "inline-flex items-center gap-1 hover:text-[var(--color-on-surface)]",
-              children: [
-                flexRender(header.column.columnDef.header, header.getContext()),
-                header.column.getIsSorted() === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { size: "xs", "aria-hidden": "true" }) : header.column.getIsSorted() === "desc" ? /* @__PURE__ */ jsx(ArrowDown, { size: "xs", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronsUpDown, { size: "xs", className: "opacity-40", "aria-hidden": "true" })
-              ]
-            }
-          ) : flexRender(header.column.columnDef.header, header.getContext())
-        },
-        header.id
-      )) }, headerGroup.id)) }),
+    /* @__PURE__ */ jsxs(TableRoot, { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children: [
+      caption != null && /* @__PURE__ */ jsx(Table.Caption, { className: cn(captionHidden && "sr-only"), children: caption }),
+      /* @__PURE__ */ jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { className: "hover:bg-transparent", children: headerGroup.headers.map((header) => {
+        const align = header.column.columnDef.meta?.align ?? "start";
+        return /* @__PURE__ */ jsx(
+          TableHead,
+          {
+            className: alignText[align],
+            "aria-sort": enableSorting && header.column.getCanSort() ? header.column.getIsSorted() === "asc" ? "ascending" : header.column.getIsSorted() === "desc" ? "descending" : "none" : void 0,
+            children: header.isPlaceholder ? null : enableSorting && header.column.getCanSort() ? /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: header.column.getToggleSortingHandler(),
+                className: cn(
+                  "flex w-full items-center gap-1 hover:text-[var(--color-on-surface)]",
+                  alignJustify[align]
+                ),
+                children: [
+                  flexRender(header.column.columnDef.header, header.getContext()),
+                  header.column.getIsSorted() === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { size: "xs", "aria-hidden": "true" }) : header.column.getIsSorted() === "desc" ? /* @__PURE__ */ jsx(ArrowDown, { size: "xs", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronsUpDown, { size: "xs", className: "opacity-40", "aria-hidden": "true" })
+                ]
+              }
+            ) : flexRender(header.column.columnDef.header, header.getContext())
+          },
+          header.id
+        );
+      }) }, headerGroup.id)) }),
       /* @__PURE__ */ jsx(TableBody, { children: table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(
         TableRow,
         {
           "data-state": enableRowSelection && row.getIsSelected() ? "selected" : void 0,
-          children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
+          children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(
+            TableCell,
+            {
+              className: alignText[cell.column.columnDef.meta?.align ?? "start"],
+              children: flexRender(cell.column.columnDef.cell, cell.getContext())
+            },
+            cell.id
+          ))
         },
         row.id
       )) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(
@@ -156,34 +180,31 @@ function DataTable({
         {
           colSpan: columns.length,
           className: "h-24 text-center text-[var(--color-on-surface-muted)]",
-          children: "No results."
+          children: messages.noResults
         }
       ) }) })
     ] }),
     pagination && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2 text-sm text-[var(--color-on-surface-muted)]", children: [
-      /* @__PURE__ */ jsxs("span", { children: [
-        "Page ",
-        table.getState().pagination.pageIndex + 1,
-        " of ",
-        table.getPageCount()
-      ] }),
+      /* @__PURE__ */ jsx("span", { children: messages.pageOf(table.getState().pagination.pageIndex + 1, table.getPageCount()) }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx(
           "button",
           {
+            type: "button",
             onClick: () => table.previousPage(),
             disabled: !table.getCanPreviousPage(),
             className: pagerButton,
-            children: "Previous"
+            children: messages.previous
           }
         ),
         /* @__PURE__ */ jsx(
           "button",
           {
+            type: "button",
             onClick: () => table.nextPage(),
             disabled: !table.getCanNextPage(),
             className: pagerButton,
-            children: "Next"
+            children: messages.next
           }
         )
       ] })

package/dist/{chunk-NQPGELMP.js → chunk-A4QLUIFN.js}

@@ -5,7 +5,7 @@ import {
   menuItem,
   menuLabel,
   menuSeparator
-} from "./chunk-FLZD7HQY.js";
+} from "./chunk-5FWJXSXT.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";

package/dist/{chunk-PGDXFBKT.js → chunk-BEOHZKPQ.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   floatingSurface
-} from "./chunk-FLZD7HQY.js";
+} from "./chunk-5FWJXSXT.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";

package/dist/{chunk-4UBVU53C.js → chunk-BIAYWCDE.js}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-JLUCMNVS.js";
 import {
   useNexubMessages
-} from "./chunk-24ZFAXB2.js";
+} from "./chunk-3MSIO7KM.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";

package/dist/{chunk-YNU6VRD5.js → chunk-BSKEBC2Q.js}

@@ -3,7 +3,7 @@ import {
   field,
   fieldFocusVisible,
   fieldInvalid
-} from "./chunk-7SXR4PGO.js";
+} from "./chunk-5W3AOOYS.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";

package/dist/chunk-BU5QD2FS.js

@@ -0,0 +1,148 @@
+'use client';
+import {
+  cn
+} from "./chunk-Q7G5WGYV.js";
+
+// src/components/Table/Table.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var CaptionIdContext = React.createContext(void 0);
+var Root = React.forwardRef(
+  ({ className, scrollLabel, ...props }, ref) => {
+    const wrapperRef = React.useRef(null);
+    const tableRef = React.useRef(null);
+    const captionId = React.useId();
+    const [overflow, setOverflow] = React.useState(null);
+    React.useEffect(() => {
+      const wrapper = wrapperRef.current;
+      if (!wrapper) return;
+      const measure = () => {
+        if (wrapper.scrollWidth > wrapper.clientWidth) {
+          const id = tableRef.current?.caption?.id || null;
+          setOverflow((prev) => prev && prev.captionId === id ? prev : { captionId: id });
+        } else {
+          setOverflow(null);
+        }
+      };
+      measure();
+      if (typeof ResizeObserver === "undefined") return;
+      const ro = new ResizeObserver(measure);
+      ro.observe(wrapper);
+      if (tableRef.current) ro.observe(tableRef.current);
+      return () => ro.disconnect();
+    }, []);
+    const setRefs = (el) => {
+      tableRef.current = el;
+      if (typeof ref === "function") ref(el);
+      else if (ref) ref.current = el;
+    };
+    const label = scrollLabel ?? props["aria-label"];
+    const labelledBy = label ? void 0 : props["aria-labelledby"] ?? overflow?.captionId ?? void 0;
+    const named = Boolean(label || labelledBy);
+    return /* @__PURE__ */ jsx(CaptionIdContext.Provider, { value: captionId, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: wrapperRef,
+        className: "relative w-full overflow-auto",
+        ...overflow ? {
+          tabIndex: 0,
+          ...named ? { role: "region", "aria-label": label, "aria-labelledby": labelledBy } : {}
+        } : {},
+        children: /* @__PURE__ */ jsx(
+          "table",
+          {
+            ref: setRefs,
+            className: cn("w-full caption-bottom text-sm tabular-nums", className),
+            ...props
+          }
+        )
+      }
+    ) });
+  }
+);
+Root.displayName = "Table.Root";
+var Header = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
+Header.displayName = "Table.Header";
+var Body = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tbody", { ref, className: cn("[&_tr:last-child]:border-0", className), ...props }));
+Body.displayName = "Table.Body";
+var TableFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tfoot",
+  {
+    ref,
+    className: cn(
+      "border-t bg-[var(--color-surface-container-low)] font-medium [&>tr]:last:border-b-0",
+      className
+    ),
+    ...props
+  }
+));
+TableFooter.displayName = "Table.Footer";
+var Row = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "tr",
+    {
+      ref,
+      className: cn(
+        "border-b border-[var(--color-outline-variant)] transition-colors hover:bg-[color-mix(in_srgb,var(--color-surface-container-low)_50%,transparent)] data-[state=selected]:bg-[var(--color-surface-container-low)]",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Row.displayName = "Table.Row";
+var Head = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "th",
+    {
+      ref,
+      className: cn(
+        "h-10 px-4 text-start align-middle font-medium text-[var(--color-on-surface-muted)] [&:has([role=checkbox])]:pe-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Head.displayName = "Table.Head";
+var Cell = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "td",
+    {
+      ref,
+      className: cn(
+        "p-4 align-middle [&:has([role=checkbox])]:pe-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Cell.displayName = "Table.Cell";
+var Caption = React.forwardRef(({ className, id, ...props }, ref) => {
+  const contextId = React.useContext(CaptionIdContext);
+  return /* @__PURE__ */ jsx(
+    "caption",
+    {
+      ref,
+      id: id ?? contextId,
+      className: cn("mt-4 text-sm text-[var(--color-on-surface-muted)]", className),
+      ...props
+    }
+  );
+});
+Caption.displayName = "Table.Caption";
+var Table = {
+  Root,
+  Header,
+  Body,
+  Footer: TableFooter,
+  Row,
+  Head,
+  Cell,
+  Caption
+};
+
+export {
+  Table
+};