@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
|
-
|
|
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-
|
|
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(
|
|
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-
|
|
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
|
|
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
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@theguild/components",
|
|
3
|
-
"version": "9.4.1-alpha-
|
|
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"
|