@theguild/components 9.4.1-alpha-20250218135306-18822612b27954d8418126424e9bc1834451838f → 9.4.1-alpha-20250218181659-02d1f5fc3413009fa09c3ca8ec3659a2e706d50a

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,7 +1,15 @@
1
1
  import * as react from 'react';
2
2
  import { FC } from 'react';
3
+ import * as react_jsx_runtime from 'react/jsx-runtime';
3
4
 
4
- declare const ComparisonTable: FC<react.DetailedHTMLProps<react.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>> & {
5
+ interface ComparisonTableProps extends React.HTMLAttributes<HTMLTableElement> {
6
+ scheme?: 'green' | 'neutral';
7
+ }
8
+ /**
9
+ * It's exported under the name `ComparisonTable`
10
+ * because we also reexport `Table` from nextra.
11
+ */
12
+ declare const ComparisonTable: (({ className, scheme, ...props }: ComparisonTableProps) => react_jsx_runtime.JSX.Element) & {
5
13
  Row: FC<react.ClassAttributes<HTMLTableRowElement> & react.HTMLAttributes<HTMLTableRowElement> & {
6
14
  highlight?: boolean;
7
15
  }>;
@@ -9,4 +17,4 @@ declare const ComparisonTable: FC<react.DetailedHTMLProps<react.TableHTMLAttribu
9
17
  Cell: FC<react.DetailedHTMLProps<react.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>>;
10
18
  };
11
19
 
12
- export { ComparisonTable };
20
+ export { ComparisonTable, type ComparisonTableProps };
@@ -1,11 +1,13 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
2
  import { cn } from "@theguild/components";
3
- const Table = ({ className, ...props }) => {
3
+ const Table = ({ className, scheme = "green", ...props }) => {
4
4
  return /* @__PURE__ */ jsx(
5
5
  "table",
6
6
  {
7
7
  className: cn(
8
- "x:block x:overflow-x-auto nextra-scrollbar overflow-x-auto rounded-2xl border border-green-200",
8
+ "x:block x:overflow-x-auto nextra-scrollbar overflow-x-auto rounded-2xl border border-[--border]",
9
+ scheme === "green" && "[--border:theme(colors.green.200)] [--highlight-bg:theme(colors.green.100)]",
10
+ scheme === "neutral" && "[--border:theme(colors.beige.400)] [--highlight-bg:theme(colors.beige.100)] dark:[--border:theme(colors.neutral.800)]",
9
11
  className
10
12
  ),
11
13
  ...props
@@ -17,15 +19,20 @@ const TableRow = ({
17
19
  className,
18
20
  ...props
19
21
  }) => {
20
- return /* @__PURE__ */ jsx("tr", { className: cn(highlight && "bg-green-100", className), ...props });
22
+ return /* @__PURE__ */ jsx(
23
+ "tr",
24
+ {
25
+ className: cn(
26
+ "bg-[--highlight,var(--highlight-bg)] [--highlight:0]",
27
+ highlight && "[--highlight:initial]",
28
+ className
29
+ ),
30
+ ...props
31
+ }
32
+ );
21
33
  };
22
34
  const cellStyle = cn(
23
- "border border-green-200 p-4 first:border-l-0 last:border-r-0",
24
- "[tbody_&]:border-b-0 [thead_&]:border-t-0",
25
- "first:sticky",
26
- "first:left-0",
27
- "max-sm:first:drop-shadow-2xl",
28
- "first:bg-[rgb(var(--nextra-bg))]"
35
+ "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"
29
36
  );
30
37
  const TableHeader = ({ className, ...props }) => {
31
38
  return /* @__PURE__ */ jsx("th", { className: cn(cellStyle, "font-medium", className), ...props });
@@ -135,8 +135,7 @@ function MarketplaceSearchInput({
135
135
  {
136
136
  onClick: () => onChange(""),
137
137
  tabIndex: -1,
138
- className: "flex size-6 items-center justify-center rounded-sm [input:placeholder-shown+&]:hidden",
139
- "aria-label": "Clear input",
138
+ className: "flex size-6 items-center justify-center rounded-sm",
140
139
  children: /* @__PURE__ */ jsx(CloseIcon, { className: "size-5 text-[--fg-80]" })
141
140
  }
142
141
  )
package/dist/index.d.mts CHANGED
@@ -59,6 +59,11 @@ import 'react-player';
59
59
  import 'clsx';
60
60
  import './types/utility.mjs';
61
61
 
62
+ /**
63
+ * @deprecated Consider using `ComparisonTable` instead.
64
+ * This name was kept for back-compat, because the public
65
+ * API differs,
66
+ */
62
67
  declare module 'react' {
63
68
  interface CSSProperties {
64
69
  [key: `--${string}`]: string | number | undefined;
package/dist/index.js CHANGED
@@ -7,11 +7,11 @@ import {
7
7
  Mermaid,
8
8
  Steps,
9
9
  Tabs,
10
- Table,
11
10
  Bleed,
12
11
  Collapse,
13
12
  Search,
14
- Banner
13
+ Banner,
14
+ Table
15
15
  } from "nextra/components";
16
16
  import { useMounted } from "nextra/hooks";
17
17
  export * from "./components";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@theguild/components",
3
- "version": "9.4.1-alpha-20250218135306-18822612b27954d8418126424e9bc1834451838f",
3
+ "version": "9.4.1-alpha-20250218181659-02d1f5fc3413009fa09c3ca8ec3659a2e706d50a",
4
4
  "repository": {
5
5
  "url": "https://github.com/the-guild-org/docs",
6
6
  "directory": "packages/components"