@gearbox-protocol/permissionless-ui 1.2.17 → 1.2.19

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.
@@ -37,25 +37,40 @@ __export(card_exports, {
37
37
  });
38
38
  module.exports = __toCommonJS(card_exports);
39
39
  var import_jsx_runtime = require("react/jsx-runtime");
40
+ var import_class_variance_authority = require("class-variance-authority");
40
41
  var React = __toESM(require("react"));
41
42
  var import_utils = __toESM(require('../utils/index.js'));
42
- const Card = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
43
- "div",
43
+ const cardVariants = (0, import_class_variance_authority.cva)(
44
+ "rounded-xl border bg-card text-card-foreground shadow",
44
45
  {
45
- ref,
46
- className: (0, import_utils.default)(
47
- "rounded-xl border bg-card text-card-foreground shadow",
48
- className
49
- ),
50
- ...props
46
+ variants: {
47
+ variant: {
48
+ default: "",
49
+ transparent: "bg-card/0",
50
+ interactive: "hover:bg-accent/50 transition-colors cursor-pointer"
51
+ }
52
+ },
53
+ defaultVariants: {
54
+ variant: "default"
55
+ }
51
56
  }
52
- ));
57
+ );
58
+ const Card = React.forwardRef(
59
+ ({ className, variant, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
60
+ "div",
61
+ {
62
+ ref,
63
+ className: (0, import_utils.default)(cardVariants({ variant, className })),
64
+ ...props
65
+ }
66
+ )
67
+ );
53
68
  Card.displayName = "Card";
54
69
  const CardHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
55
70
  "div",
56
71
  {
57
72
  ref,
58
- className: (0, import_utils.default)("flex flex-col space-y-1.5 p-6", className),
73
+ className: (0, import_utils.default)("flex items-center py-2 px-4 border-b", className),
59
74
  ...props
60
75
  }
61
76
  ));
@@ -65,7 +80,7 @@ const CardTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE_
65
80
  {
66
81
  ref,
67
82
  className: (0, import_utils.default)(
68
- "font-semibold leading-none tracking-tight text-2xl",
83
+ "font-semibold leading-none tracking-tight text-lg",
69
84
  className
70
85
  ),
71
86
  ...props
@@ -81,13 +96,13 @@ const CardDescription = React.forwardRef(({ className, ...props }, ref) => /* @_
81
96
  }
82
97
  ));
83
98
  CardDescription.displayName = "CardDescription";
84
- const CardContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref, className: (0, import_utils.default)("p-6 pt-0", className), ...props }));
99
+ const CardContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref, className: (0, import_utils.default)("p-4", className), ...props }));
85
100
  CardContent.displayName = "CardContent";
86
101
  const CardFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
87
102
  "div",
88
103
  {
89
104
  ref,
90
- className: (0, import_utils.default)("flex items-center p-6 pt-0", className),
105
+ className: (0, import_utils.default)("flex items-center p-4 border-t", className),
91
106
  ...props
92
107
  }
93
108
  ));
@@ -117,7 +117,7 @@ function TableEditable({
117
117
  ))
118
118
  ] }) })
119
119
  ] }),
120
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "rounded-lg border", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_table.Table, { children }) })
120
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_table.Table, { children })
121
121
  ] });
122
122
  }
123
123
  // Annotate the CommonJS export names for ESM import in node:
@@ -1,23 +1,38 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
+ import { cva } from "class-variance-authority";
2
3
  import * as React from "react";
3
4
  import cn from "../utils/index.js";
4
- const Card = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
5
- "div",
5
+ const cardVariants = cva(
6
+ "rounded-xl border bg-card text-card-foreground shadow",
6
7
  {
7
- ref,
8
- className: cn(
9
- "rounded-xl border bg-card text-card-foreground shadow",
10
- className
11
- ),
12
- ...props
8
+ variants: {
9
+ variant: {
10
+ default: "",
11
+ transparent: "bg-card/0",
12
+ interactive: "hover:bg-accent/50 transition-colors cursor-pointer"
13
+ }
14
+ },
15
+ defaultVariants: {
16
+ variant: "default"
17
+ }
13
18
  }
14
- ));
19
+ );
20
+ const Card = React.forwardRef(
21
+ ({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx(
22
+ "div",
23
+ {
24
+ ref,
25
+ className: cn(cardVariants({ variant, className })),
26
+ ...props
27
+ }
28
+ )
29
+ );
15
30
  Card.displayName = "Card";
16
31
  const CardHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
17
32
  "div",
18
33
  {
19
34
  ref,
20
- className: cn("flex flex-col space-y-1.5 p-6", className),
35
+ className: cn("flex items-center py-2 px-4 border-b", className),
21
36
  ...props
22
37
  }
23
38
  ));
@@ -27,7 +42,7 @@ const CardTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE_
27
42
  {
28
43
  ref,
29
44
  className: cn(
30
- "font-semibold leading-none tracking-tight text-2xl",
45
+ "font-semibold leading-none tracking-tight text-lg",
31
46
  className
32
47
  ),
33
48
  ...props
@@ -43,13 +58,13 @@ const CardDescription = React.forwardRef(({ className, ...props }, ref) => /* @_
43
58
  }
44
59
  ));
45
60
  CardDescription.displayName = "CardDescription";
46
- const CardContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
61
+ const CardContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-4", className), ...props }));
47
62
  CardContent.displayName = "CardContent";
48
63
  const CardFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
49
64
  "div",
50
65
  {
51
66
  ref,
52
- className: cn("flex items-center p-6 pt-0", className),
67
+ className: cn("flex items-center p-4 border-t", className),
53
68
  ...props
54
69
  }
55
70
  ));
@@ -92,7 +92,7 @@ function TableEditable({
92
92
  ))
93
93
  ] }) })
94
94
  ] }),
95
- /* @__PURE__ */ jsx("div", { className: "rounded-lg border", children: /* @__PURE__ */ jsx(Table, { children }) })
95
+ /* @__PURE__ */ jsx(Table, { children })
96
96
  ] });
97
97
  }
98
98
  export {
@@ -1,5 +1,12 @@
1
+ import { type VariantProps } from "class-variance-authority";
1
2
  import * as React from "react";
2
- declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
3
+ declare const cardVariants: (props?: ({
4
+ variant?: "default" | "transparent" | "interactive" | null | undefined;
5
+ } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
6
+ export interface CardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {
7
+ asChild?: boolean;
8
+ }
9
+ declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
3
10
  declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
4
11
  declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
5
12
  declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gearbox-protocol/permissionless-ui",
3
- "version": "1.2.17",
3
+ "version": "1.2.19",
4
4
  "description": "Internal UI components",
5
5
  "license": "MIT",
6
6
  "main": "./dist/cjs/index.js",