@gearbox-protocol/permissionless-ui 1.2.14 → 1.2.16

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.
Files changed (13) hide show
  1. package/dist/cjs/components/buttons/button.js +2 -0
  2. package/dist/cjs/components/buttons/copy-button.js +4 -7
  3. package/dist/cjs/components/buttons/external-button.js +3 -7
  4. package/dist/cjs/components/buttons/navigation-button.js +1 -1
  5. package/dist/cjs/components/table.js +40 -35
  6. package/dist/esm/components/buttons/button.js +2 -0
  7. package/dist/esm/components/buttons/copy-button.js +4 -7
  8. package/dist/esm/components/buttons/external-button.js +3 -7
  9. package/dist/esm/components/buttons/navigation-button.js +1 -1
  10. package/dist/esm/components/table.js +45 -35
  11. package/dist/types/components/buttons/button.d.ts +2 -2
  12. package/dist/types/components/table.d.ts +1 -0
  13. package/package.json +1 -1
package/dist/cjs/components/buttons/button.js CHANGED
@@ -48,12 +48,14 @@ const buttonVariants = (0, import_class_variance_authority.cva)(
48
48
  secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
49
49
  ghost: "hover:bg-accent hover:text-accent-foreground",
50
50
  link: "text-primary underline-offset-4 hover:underline",
51
+ text: "text-muted-foreground hover:text-white",
51
52
  pink: "bg-pink-700 hover:bg-pink-600 disabled:bg-pink-700 text-white",
52
53
  "pink-outline": "border border-pink-700 hover:border-pink-600 disabled:border-pink-700 text-white",
53
54
  blue: "bg-blue-800 hover:bg-blue-700 disabled:bg-blue-700 text-white",
54
55
  "blue-outline": "border border-blue-800 hover:border-blue-700 disabled:border-blue-800 text-white"
55
56
  },
56
57
  size: {
58
+ auto: "h-auto p-0",
57
59
  xs: "rounded-full px-3 py-0.5 text-xs",
58
60
  sm: "h-8 rounded-md px-3 text-xs",
59
61
  default: "h-9 px-4 py-2",
package/dist/cjs/components/buttons/copy-button.js CHANGED
@@ -34,7 +34,7 @@ module.exports = __toCommonJS(copy_button_exports);
34
34
  var import_jsx_runtime = require("react/jsx-runtime");
35
35
  var import_lucide_react = require("lucide-react");
36
36
  var React = __toESM(require("react"));
37
- var import_utils = __toESM(require('../../utils/index.js'));
37
+ var import_utils = require('../../utils/index.js');
38
38
  var import_button = require('./button.js');
39
39
  const CopyButton = React.forwardRef(
40
40
  ({ text, name, className, size = "3.5", ...props }, ref) => {
@@ -42,12 +42,9 @@ const CopyButton = React.forwardRef(
42
42
  import_button.Button,
43
43
  {
44
44
  ref,
45
- variant: "ghost",
46
- size: "sm",
47
- className: (0, import_utils.default)(
48
- "text-muted-foreground hover:text-white hover:bg-accent/0 p-0 h-auto",
49
- className
50
- ),
45
+ variant: "text",
46
+ size: "auto",
47
+ className,
51
48
  onClick: () => (0, import_utils.copyToClipboard)({ text, name }),
52
49
  ...props,
53
50
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Copy, { className: `h-${size} w-${size}` })
package/dist/cjs/components/buttons/external-button.js CHANGED
@@ -34,7 +34,6 @@ module.exports = __toCommonJS(external_button_exports);
34
34
  var import_jsx_runtime = require("react/jsx-runtime");
35
35
  var import_lucide_react = require("lucide-react");
36
36
  var React = __toESM(require("react"));
37
- var import_utils = __toESM(require('../../utils/index.js'));
38
37
  var import_button = require('./button.js');
39
38
  const ExternalButton = React.forwardRef(
40
39
  ({ url, className, size = "3.5", ...props }, ref) => {
@@ -42,12 +41,9 @@ const ExternalButton = React.forwardRef(
42
41
  import_button.Button,
43
42
  {
44
43
  ref,
45
- variant: "ghost",
46
- size: "sm",
47
- className: (0, import_utils.default)(
48
- "text-muted-foreground hover:text-white hover:bg-accent/0 p-0 h-auto",
49
- className
50
- ),
44
+ variant: "text",
45
+ size: "auto",
46
+ className,
51
47
  onClick: () => window.open(url, "_blank"),
52
48
  ...props,
53
49
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ExternalLink, { className: `h-${size} w-${size}` })
package/dist/cjs/components/buttons/navigation-button.js CHANGED
@@ -42,7 +42,7 @@ const NavigationButton = import_react.default.forwardRef(({ href, text, isActive
42
42
  href,
43
43
  ref,
44
44
  className: (0, import_utils.default)(
45
- "text-foreground px-2 py-1 rounded transition-colors duration-200 ease-in-out ",
45
+ "text-foreground px-2 py-1 rounded transition-colors duration-200 ease-in-out",
46
46
  isActive ? "bg-muted" : "hover:bg-muted"
47
47
  ),
48
48
  ...props,
package/dist/cjs/components/table.js CHANGED
@@ -44,6 +44,7 @@ var import_lucide_react = require("lucide-react");
44
44
  var React = __toESM(require("react"));
45
45
  var import_utils = __toESM(require('../utils/index.js'));
46
46
  var import_button = require('./buttons/button.js');
47
+ var import_tooltip = require('./tooltip.js');
47
48
  const Table = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "rounded-xl border relative w-full overflow-auto", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
48
49
  "table",
49
50
  {
@@ -113,6 +114,7 @@ const TableCaption = React.forwardRef(({ className, ...props }, ref) => /* @__PU
113
114
  TableCaption.displayName = "TableCaption";
114
115
  const SortingTableHead = React.forwardRef(
115
116
  ({
117
+ title,
116
118
  isSorted,
117
119
  direction,
118
120
  setSort,
@@ -120,42 +122,45 @@ const SortingTableHead = React.forwardRef(
120
122
  children,
121
123
  className,
122
124
  ...props
123
- }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableHead, { ref, className, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
124
- "div",
125
- {
126
- className: (0, import_utils.default)(
127
- "group flex items-center gap-1 w-fit cursor-pointer hover:text-white",
128
- placement === "left" ? "flex-row-reverse" : "flex-row"
129
- ),
130
- onClick: () => setSort(direction === "asc" ? "desc" : "asc"),
131
- children: [
132
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children }),
133
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
134
- import_button.Button,
135
- {
136
- variant: "ghost",
137
- size: "sm",
138
- className: (0, import_utils.default)(
139
- "hover:bg-accent/0 group-hover:text-white p-0 h-auto",
140
- isSorted ? void 0 : "opacity-0 group-hover:opacity-100"
141
- ),
142
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
143
- import_lucide_react.ArrowDown,
144
- {
145
- className: (0, import_utils.default)(
146
- `h-${4} w-${4}`,
147
- direction === "desc" ? "rotate-180" : "",
148
- "transition-transform duration-200 ease-in-out"
149
- )
150
- }
151
- )
152
- }
153
- )
154
- ]
155
- }
156
- ) })
125
+ }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableHead, { ref, className, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tooltip.TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tooltip.Tooltip, { delayDuration: 200, children: [
126
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
127
+ "div",
128
+ {
129
+ className: (0, import_utils.default)(
130
+ "group flex items-center gap-1 w-fit cursor-pointer hover:text-white",
131
+ placement === "left" ? "flex-row-reverse" : "flex-row"
132
+ ),
133
+ onClick: () => setSort(direction === "asc" ? "desc" : "asc"),
134
+ children: [
135
+ children,
136
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
137
+ import_button.Button,
138
+ {
139
+ variant: "text",
140
+ size: "auto",
141
+ className: isSorted ? void 0 : "opacity-0 group-hover:opacity-100",
142
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
143
+ import_lucide_react.ArrowDown,
144
+ {
145
+ className: (0, import_utils.default)(
146
+ `h-${4} w-${4}`,
147
+ direction === "desc" ? "rotate-180" : "",
148
+ "transition-transform duration-200 ease-in-out"
149
+ )
150
+ }
151
+ )
152
+ }
153
+ )
154
+ ]
155
+ }
156
+ ) }),
157
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tooltip.TooltipContent, { side: "top", children: [
158
+ "Sort by ",
159
+ title
160
+ ] })
161
+ ] }) }) })
157
162
  );
158
- SortingTableHead.displayName = "SortTableHead";
163
+ SortingTableHead.displayName = "SortingTableHead";
159
164
  // Annotate the CommonJS export names for ESM import in node:
160
165
  0 && (module.exports = {
161
166
  SortingTableHead,
package/dist/esm/components/buttons/button.js CHANGED
@@ -14,12 +14,14 @@ const buttonVariants = cva(
14
14
  secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
15
15
  ghost: "hover:bg-accent hover:text-accent-foreground",
16
16
  link: "text-primary underline-offset-4 hover:underline",
17
+ text: "text-muted-foreground hover:text-white",
17
18
  pink: "bg-pink-700 hover:bg-pink-600 disabled:bg-pink-700 text-white",
18
19
  "pink-outline": "border border-pink-700 hover:border-pink-600 disabled:border-pink-700 text-white",
19
20
  blue: "bg-blue-800 hover:bg-blue-700 disabled:bg-blue-700 text-white",
20
21
  "blue-outline": "border border-blue-800 hover:border-blue-700 disabled:border-blue-800 text-white"
21
22
  },
22
23
  size: {
24
+ auto: "h-auto p-0",
23
25
  xs: "rounded-full px-3 py-0.5 text-xs",
24
26
  sm: "h-8 rounded-md px-3 text-xs",
25
27
  default: "h-9 px-4 py-2",
package/dist/esm/components/buttons/copy-button.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
2
  import { Copy } from "lucide-react";
3
3
  import * as React from "react";
4
- import cn, { copyToClipboard } from "../../utils/index.js";
4
+ import { copyToClipboard } from "../../utils/index.js";
5
5
  import { Button } from "./button.js";
6
6
  const CopyButton = React.forwardRef(
7
7
  ({ text, name, className, size = "3.5", ...props }, ref) => {
@@ -9,12 +9,9 @@ const CopyButton = React.forwardRef(
9
9
  Button,
10
10
  {
11
11
  ref,
12
- variant: "ghost",
13
- size: "sm",
14
- className: cn(
15
- "text-muted-foreground hover:text-white hover:bg-accent/0 p-0 h-auto",
16
- className
17
- ),
12
+ variant: "text",
13
+ size: "auto",
14
+ className,
18
15
  onClick: () => copyToClipboard({ text, name }),
19
16
  ...props,
20
17
  children: /* @__PURE__ */ jsx(Copy, { className: `h-${size} w-${size}` })
package/dist/esm/components/buttons/external-button.js CHANGED
@@ -1,7 +1,6 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
2
  import { ExternalLink } from "lucide-react";
3
3
  import * as React from "react";
4
- import cn from "../../utils/index.js";
5
4
  import { Button } from "./button.js";
6
5
  const ExternalButton = React.forwardRef(
7
6
  ({ url, className, size = "3.5", ...props }, ref) => {
@@ -9,12 +8,9 @@ const ExternalButton = React.forwardRef(
9
8
  Button,
10
9
  {
11
10
  ref,
12
- variant: "ghost",
13
- size: "sm",
14
- className: cn(
15
- "text-muted-foreground hover:text-white hover:bg-accent/0 p-0 h-auto",
16
- className
17
- ),
11
+ variant: "text",
12
+ size: "auto",
13
+ className,
18
14
  onClick: () => window.open(url, "_blank"),
19
15
  ...props,
20
16
  children: /* @__PURE__ */ jsx(ExternalLink, { className: `h-${size} w-${size}` })
package/dist/esm/components/buttons/navigation-button.js CHANGED
@@ -9,7 +9,7 @@ const NavigationButton = React.forwardRef(({ href, text, isActive, ...props }, r
9
9
  href,
10
10
  ref,
11
11
  className: cn(
12
- "text-foreground px-2 py-1 rounded transition-colors duration-200 ease-in-out ",
12
+ "text-foreground px-2 py-1 rounded transition-colors duration-200 ease-in-out",
13
13
  isActive ? "bg-muted" : "hover:bg-muted"
14
14
  ),
15
15
  ...props,
package/dist/esm/components/table.js CHANGED
@@ -3,6 +3,12 @@ import { ArrowDown } from "lucide-react";
3
3
  import * as React from "react";
4
4
  import cn from "../utils/index.js";
5
5
  import { Button } from "./buttons/button.js";
6
+ import {
7
+ Tooltip,
8
+ TooltipContent,
9
+ TooltipProvider,
10
+ TooltipTrigger
11
+ } from "./tooltip.js";
6
12
  const Table = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "rounded-xl border relative w-full overflow-auto", children: /* @__PURE__ */ jsx(
7
13
  "table",
8
14
  {
@@ -72,6 +78,7 @@ const TableCaption = React.forwardRef(({ className, ...props }, ref) => /* @__PU
72
78
  TableCaption.displayName = "TableCaption";
73
79
  const SortingTableHead = React.forwardRef(
74
80
  ({
81
+ title,
75
82
  isSorted,
76
83
  direction,
77
84
  setSort,
@@ -79,42 +86,45 @@ const SortingTableHead = React.forwardRef(
79
86
  children,
80
87
  className,
81
88
  ...props
82
- }, ref) => /* @__PURE__ */ jsx(TableHead, { ref, className, ...props, children: /* @__PURE__ */ jsxs(
83
- "div",
84
- {
85
- className: cn(
86
- "group flex items-center gap-1 w-fit cursor-pointer hover:text-white",
87
- placement === "left" ? "flex-row-reverse" : "flex-row"
88
- ),
89
- onClick: () => setSort(direction === "asc" ? "desc" : "asc"),
90
- children: [
91
- /* @__PURE__ */ jsx("span", { children }),
92
- /* @__PURE__ */ jsx(
93
- Button,
94
- {
95
- variant: "ghost",
96
- size: "sm",
97
- className: cn(
98
- "hover:bg-accent/0 group-hover:text-white p-0 h-auto",
99
- isSorted ? void 0 : "opacity-0 group-hover:opacity-100"
100
- ),
101
- children: /* @__PURE__ */ jsx(
102
- ArrowDown,
103
- {
104
- className: cn(
105
- `h-${4} w-${4}`,
106
- direction === "desc" ? "rotate-180" : "",
107
- "transition-transform duration-200 ease-in-out"
108
- )
109
- }
110
- )
111
- }
112
- )
113
- ]
114
- }
115
- ) })
89
+ }, ref) => /* @__PURE__ */ jsx(TableHead, { ref, className, ...props, children: /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 200, children: [
90
+ /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
91
+ "div",
92
+ {
93
+ className: cn(
94
+ "group flex items-center gap-1 w-fit cursor-pointer hover:text-white",
95
+ placement === "left" ? "flex-row-reverse" : "flex-row"
96
+ ),
97
+ onClick: () => setSort(direction === "asc" ? "desc" : "asc"),
98
+ children: [
99
+ children,
100
+ /* @__PURE__ */ jsx(
101
+ Button,
102
+ {
103
+ variant: "text",
104
+ size: "auto",
105
+ className: isSorted ? void 0 : "opacity-0 group-hover:opacity-100",
106
+ children: /* @__PURE__ */ jsx(
107
+ ArrowDown,
108
+ {
109
+ className: cn(
110
+ `h-${4} w-${4}`,
111
+ direction === "desc" ? "rotate-180" : "",
112
+ "transition-transform duration-200 ease-in-out"
113
+ )
114
+ }
115
+ )
116
+ }
117
+ )
118
+ ]
119
+ }
120
+ ) }),
121
+ /* @__PURE__ */ jsxs(TooltipContent, { side: "top", children: [
122
+ "Sort by ",
123
+ title
124
+ ] })
125
+ ] }) }) })
116
126
  );
117
- SortingTableHead.displayName = "SortTableHead";
127
+ SortingTableHead.displayName = "SortingTableHead";
118
128
  export {
119
129
  SortingTableHead,
120
130
  Table,
package/dist/types/components/buttons/button.d.ts CHANGED
@@ -1,8 +1,8 @@
1
1
  import { type VariantProps } from "class-variance-authority";
2
2
  import * as React from "react";
3
3
  declare const buttonVariants: (props?: ({
4
- variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | "pink" | "pink-outline" | "blue" | "blue-outline" | null | undefined;
5
- size?: "default" | "xs" | "sm" | "lg" | "icon" | null | undefined;
4
+ variant?: "text" | "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | "pink" | "pink-outline" | "blue" | "blue-outline" | null | undefined;
5
+ size?: "default" | "auto" | "xs" | "sm" | "lg" | "icon" | null | undefined;
6
6
  } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
7
7
  export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
8
8
  asChild?: boolean;
package/dist/types/components/table.d.ts CHANGED
@@ -8,6 +8,7 @@ declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<
8
8
  declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
9
9
  declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
10
10
  export interface SortTableHeadProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
11
+ title: string;
11
12
  isSorted: boolean;
12
13
  direction: "asc" | "desc";
13
14
  setSort: (direction: "asc" | "desc") => void;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gearbox-protocol/permissionless-ui",
3
- "version": "1.2.14",
3
+ "version": "1.2.16",
4
4
  "description": "Internal UI components",
5
5
  "license": "MIT",
6
6
  "main": "./dist/cjs/index.js",