@gearbox-protocol/permissionless-ui 1.2.16 → 1.2.18

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
  ));
@@ -87,6 +87,9 @@ const tailwindConfig = {
87
87
  lg: "var(--radius)",
88
88
  md: "calc(var(--radius) - 2px)",
89
89
  sm: "calc(var(--radius) - 4px)"
90
+ },
91
+ fontFamily: {
92
+ mono: ["var(--font-geist-mono)", "monospace"]
90
93
  }
91
94
  }
92
95
  },
@@ -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
  ));
@@ -54,6 +54,9 @@ const tailwindConfig = {
54
54
  lg: "var(--radius)",
55
55
  md: "calc(var(--radius) - 2px)",
56
56
  sm: "calc(var(--radius) - 4px)"
57
+ },
58
+ fontFamily: {
59
+ mono: ["var(--font-geist-mono)", "monospace"]
57
60
  }
58
61
  }
59
62
  },
package/dist/globals.css CHANGED
@@ -78,9 +78,6 @@
78
78
  body {
79
79
  @apply bg-background text-foreground;
80
80
  }
81
- .font-mono {
82
- line-height: 1;
83
- }
84
81
  }
85
82
 
86
83
  /* Add these styles to fix white background under scroll */
@@ -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.16",
3
+ "version": "1.2.18",
4
4
  "description": "Internal UI components",
5
5
  "license": "MIT",
6
6
  "main": "./dist/cjs/index.js",