@theguild/components 9.4.1-alpha-20250218190438-86a2d0a4bdb74ea4b281ae762590f72922860408 → 9.4.1-alpha-20250219120016-a6edf280cd7709965a9fbcbcf6f0c0d5f6bc913d

package/dist/components/comparison-table/index.d.mts

@@ -1,7 +1,15 @@
 import * as react from 'react';
 import { FC } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
-declare const ComparisonTable: FC<react.DetailedHTMLProps<react.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>> & {
+interface ComparisonTableProps extends React.HTMLAttributes<HTMLTableElement> {
+    scheme?: 'green' | 'neutral';
+}
+/**
+ * It's exported under the name `ComparisonTable`
+ * because we also reexport `Table` from nextra.
+ */
+declare const ComparisonTable: (({ className, scheme, ...props }: ComparisonTableProps) => react_jsx_runtime.JSX.Element) & {
     Row: FC<react.ClassAttributes<HTMLTableRowElement> & react.HTMLAttributes<HTMLTableRowElement> & {
         highlight?: boolean;
     }>;
@@ -9,4 +17,4 @@ declare const ComparisonTable: FC<react.DetailedHTMLProps<react.TableHTMLAttribu
     Cell: FC<react.DetailedHTMLProps<react.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>>;
 };
 
-export { ComparisonTable };
+export { ComparisonTable, type ComparisonTableProps };

package/dist/components/comparison-table/index.js

@@ -1,11 +1,13 @@
 import { jsx } from "react/jsx-runtime";
 import { cn } from "@theguild/components";
-const Table = ({ className, ...props }) => {
+const Table = ({ className, scheme = "green", ...props }) => {
   return /* @__PURE__ */ jsx(
     "table",
     {
       className: cn(
-        "x:block x:overflow-x-auto nextra-scrollbar overflow-x-auto rounded-2xl border border-green-200",
+        "x:block x:overflow-x-auto nextra-scrollbar overflow-x-auto rounded-2xl border border-[--border]",
+        scheme === "green" && "[--border:theme(colors.green.200)] [--highlight-bg:theme(colors.green.100)]",
+        scheme === "neutral" && "[--border:theme(colors.beige.400)] [--highlight-bg:theme(colors.beige.100)] dark:[--border:theme(colors.neutral.800)]",
         className
       ),
       ...props
@@ -17,15 +19,20 @@ const TableRow = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx("tr", { className: cn(highlight && "bg-green-100", className), ...props });
+  return /* @__PURE__ */ jsx(
+    "tr",
+    {
+      className: cn(
+        "bg-[--highlight,var(--highlight-bg)] [--highlight:0]",
+        highlight && "[--highlight:initial]",
+        className
+      ),
+      ...props
+    }
+  );
 };
 const cellStyle = cn(
-  "border border-green-200 p-4 first:border-l-0 last:border-r-0",
-  "[tbody_&]:border-b-0 [thead_&]:border-t-0",
-  "first:sticky",
-  "first:left-0",
-  "max-sm:first:drop-shadow-2xl",
-  "first:bg-[rgb(var(--nextra-bg))]"
+  "border border-[--border] p-4 first:sticky first:left-0 first:border-l-0 first:bg-[--highlight,var(--highlight-bg)] last:border-r-0 max-sm:first:drop-shadow-2xl [tbody_&]:border-b-0 [thead_&]:border-t-0"
 );
 const TableHeader = ({ className, ...props }) => {
   return /* @__PURE__ */ jsx("th", { className: cn(cellStyle, "font-medium", className), ...props });

package/dist/index.d.mts

@@ -59,6 +59,11 @@ import 'react-player';
 import 'clsx';
 import './types/utility.mjs';
 
+/**
+ * @deprecated Consider using `ComparisonTable` instead.
+ * This name was kept for back-compat, because the public
+ * API differs,
+ */
 declare module 'react' {
     interface CSSProperties {
         [key: `--${string}`]: string | number | undefined;

package/dist/index.js

@@ -7,11 +7,11 @@ import {
   Mermaid,
   Steps,
   Tabs,
-  Table,
   Bleed,
   Collapse,
   Search,
-  Banner
+  Banner,
+  Table
 } from "nextra/components";
 import { useMounted } from "nextra/hooks";
 export * from "./components";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@theguild/components",
-  "version": "9.4.1-alpha-20250218190438-86a2d0a4bdb74ea4b281ae762590f72922860408",
+  "version": "9.4.1-alpha-20250219120016-a6edf280cd7709965a9fbcbcf6f0c0d5f6bc913d",
   "repository": {
     "url": "https://github.com/the-guild-org/docs",
     "directory": "packages/components"