next-helios-fe 1.8.51 → 1.8.53
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.
- package/dist/components/button/index.d.ts +1 -3
- package/dist/components/tooltip/index.d.ts +5 -2
- package/dist/index.js +1 -1
- package/dist/index.js.LICENSE.txt +0 -7
- package/package.json +1 -2
- package/src/components/button/index.tsx +34 -9
- package/src/components/form/input/checkbox.tsx +9 -6
- package/src/components/form/input/color.tsx +9 -6
- package/src/components/form/input/date.tsx +10 -7
- package/src/components/form/input/email.tsx +7 -3
- package/src/components/form/input/file.tsx +7 -6
- package/src/components/form/input/number.tsx +7 -3
- package/src/components/form/input/password.tsx +7 -3
- package/src/components/form/input/radio.tsx +9 -6
- package/src/components/form/input/range.tsx +7 -3
- package/src/components/form/input/text.tsx +7 -3
- package/src/components/form/input/time.tsx +10 -7
- package/src/components/form/other/autocomplete.tsx +9 -6
- package/src/components/form/other/multipleSelect.tsx +10 -7
- package/src/components/form/other/phoneNumber.tsx +10 -7
- package/src/components/form/other/pin.tsx +9 -6
- package/src/components/form/other/rating.tsx +9 -6
- package/src/components/form/other/secret.tsx +9 -6
- package/src/components/form/other/select.tsx +10 -7
- package/src/components/form/other/textarea.tsx +7 -3
- package/src/components/tooltip/index.tsx +212 -16
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "next-helios-fe",
|
|
3
|
-
"version": "1.8.
|
|
3
|
+
"version": "1.8.53",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -32,7 +32,6 @@
|
|
|
32
32
|
"react-leaflet": "^4.2.1",
|
|
33
33
|
"react-pin-field": "^3.1.5",
|
|
34
34
|
"react-syntax-highlighter": "^15.5.0",
|
|
35
|
-
"react-tooltip": "^5.28.0",
|
|
36
35
|
"sass": "^1.77.8",
|
|
37
36
|
"xlsx": "^0.18.5"
|
|
38
37
|
},
|
|
@@ -18,7 +18,7 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
|
18
18
|
position?: "left" | "center" | "right";
|
|
19
19
|
border?: boolean;
|
|
20
20
|
};
|
|
21
|
-
tooltip?:
|
|
21
|
+
tooltip?: string | React.ReactNode;
|
|
22
22
|
loading?: boolean;
|
|
23
23
|
active?: boolean;
|
|
24
24
|
}
|
|
@@ -34,19 +34,19 @@ export const Button: React.FC<ButtonProps> = ({
|
|
|
34
34
|
}) => {
|
|
35
35
|
const variant =
|
|
36
36
|
options?.variant === "primary"
|
|
37
|
-
? "text-white bg-primary shadow-sm
|
|
37
|
+
? "text-white bg-primary shadow-sm hover:bg-primary-dark disabled:bg-secondary-dark"
|
|
38
38
|
: options?.variant === "secondary"
|
|
39
|
-
? "text-white bg-secondary shadow-sm
|
|
39
|
+
? "text-white bg-secondary shadow-sm hover:bg-secondary-dark disabled:bg-secondary-dark"
|
|
40
40
|
: options?.variant === "success"
|
|
41
|
-
? "text-white bg-success shadow-sm
|
|
41
|
+
? "text-white bg-success shadow-sm hover:bg-success-dark disabled:bg-secondary-dark"
|
|
42
42
|
: options?.variant === "warning"
|
|
43
|
-
? "text-white bg-warning shadow-sm
|
|
43
|
+
? "text-white bg-warning shadow-sm hover:bg-warning-dark disabled:bg-secondary-dark"
|
|
44
44
|
: options?.variant === "danger"
|
|
45
|
-
? "text-white bg-danger shadow-sm
|
|
45
|
+
? "text-white bg-danger shadow-sm hover:bg-danger-dark disabled:bg-secondary-dark"
|
|
46
46
|
: `text-default hover:bg-secondary-light ${
|
|
47
47
|
loading
|
|
48
48
|
? ""
|
|
49
|
-
: "disabled:bg-primary disabled:text-white disabled:shadow-sm
|
|
49
|
+
: "disabled:bg-primary disabled:text-white disabled:shadow-sm"
|
|
50
50
|
}`;
|
|
51
51
|
const width = options?.width === "fit" ? "w-fit" : "w-full";
|
|
52
52
|
const height =
|
|
@@ -67,7 +67,33 @@ export const Button: React.FC<ButtonProps> = ({
|
|
|
67
67
|
? "bg-secondary-light shadow-sm shadow-secondary-light"
|
|
68
68
|
: "";
|
|
69
69
|
|
|
70
|
-
return (
|
|
70
|
+
return tooltip ? (
|
|
71
|
+
<Tooltip content={tooltip}>
|
|
72
|
+
<button
|
|
73
|
+
className={`relative ${width} px-3 ${height} rounded-md text-left ${variant} ${border} ${isActive} select-none disabled:pointer-events-none ${className}`}
|
|
74
|
+
disabled={loading || rest.disabled}
|
|
75
|
+
{...rest}
|
|
76
|
+
>
|
|
77
|
+
<div
|
|
78
|
+
className={`flex ${position} items-center ${gap} w-full h-full ${
|
|
79
|
+
loading && "invisible"
|
|
80
|
+
}`}
|
|
81
|
+
>
|
|
82
|
+
{children}
|
|
83
|
+
</div>
|
|
84
|
+
{loading && (
|
|
85
|
+
<div className="absolute left-0 top-0 flex justify-center items-center w-full h-full">
|
|
86
|
+
<Icon
|
|
87
|
+
icon="mingcute:loading-fill"
|
|
88
|
+
className={`animate-spin ${
|
|
89
|
+
options?.height === "high" ? "text-2xl" : "text-xl"
|
|
90
|
+
}`}
|
|
91
|
+
/>
|
|
92
|
+
</div>
|
|
93
|
+
)}
|
|
94
|
+
</button>
|
|
95
|
+
</Tooltip>
|
|
96
|
+
) : (
|
|
71
97
|
<button
|
|
72
98
|
className={`relative ${width} px-3 ${height} rounded-md text-left ${variant} ${border} ${isActive} select-none disabled:pointer-events-none ${className}`}
|
|
73
99
|
disabled={loading || rest.disabled}
|
|
@@ -90,7 +116,6 @@ export const Button: React.FC<ButtonProps> = ({
|
|
|
90
116
|
/>
|
|
91
117
|
</div>
|
|
92
118
|
)}
|
|
93
|
-
{tooltip && <Tooltip id={rest.id as string} content={tooltip.content} />}
|
|
94
119
|
</button>
|
|
95
120
|
);
|
|
96
121
|
};
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import React from "react";
|
|
3
|
+
import { Tooltip } from "../../../components";
|
|
3
4
|
import { Icon } from "@iconify/react";
|
|
4
5
|
|
|
5
6
|
export interface CheckboxProps
|
|
@@ -53,12 +54,14 @@ export const Checkbox: React.FC<CheckboxProps> = ({
|
|
|
53
54
|
{label}
|
|
54
55
|
</span>
|
|
55
56
|
{description && (
|
|
56
|
-
<
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
57
|
+
<div className="ms-auto">
|
|
58
|
+
<Tooltip content={description}>
|
|
59
|
+
<Icon
|
|
60
|
+
icon="octicon:info-16"
|
|
61
|
+
className="text-sm text-primary-dark"
|
|
62
|
+
/>
|
|
63
|
+
</Tooltip>
|
|
64
|
+
</div>
|
|
62
65
|
)}
|
|
63
66
|
</div>
|
|
64
67
|
)}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import React, { useState, useEffect, useRef } from "react";
|
|
3
|
+
import { Tooltip } from "../../../components";
|
|
3
4
|
import { Icon } from "@iconify/react";
|
|
4
5
|
|
|
5
6
|
export interface ColorProps
|
|
@@ -62,12 +63,14 @@ export const Color: React.FC<ColorProps> = ({
|
|
|
62
63
|
</span>
|
|
63
64
|
)}
|
|
64
65
|
{description && (
|
|
65
|
-
<
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
66
|
+
<div className="ms-auto">
|
|
67
|
+
<Tooltip content={description}>
|
|
68
|
+
<Icon
|
|
69
|
+
icon="octicon:info-16"
|
|
70
|
+
className="text-sm text-primary-dark"
|
|
71
|
+
/>
|
|
72
|
+
</Tooltip>
|
|
73
|
+
</div>
|
|
71
74
|
)}
|
|
72
75
|
</div>
|
|
73
76
|
)}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import React, { useState, useEffect, useRef } from "react";
|
|
3
|
-
import { Dropdown, Calendar } from "../../../components";
|
|
3
|
+
import { Tooltip, Dropdown, Calendar } from "../../../components";
|
|
4
4
|
import { Icon } from "@iconify/react";
|
|
5
5
|
import dayjs from "dayjs";
|
|
6
6
|
|
|
@@ -100,12 +100,14 @@ export const Date: React.FC<DateProps> = ({
|
|
|
100
100
|
</span>
|
|
101
101
|
)}
|
|
102
102
|
{description && (
|
|
103
|
-
<
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
103
|
+
<div className="ms-auto">
|
|
104
|
+
<Tooltip content={description}>
|
|
105
|
+
<Icon
|
|
106
|
+
icon="octicon:info-16"
|
|
107
|
+
className="text-sm text-primary-dark"
|
|
108
|
+
/>
|
|
109
|
+
</Tooltip>
|
|
110
|
+
</div>
|
|
109
111
|
)}
|
|
110
112
|
</div>
|
|
111
113
|
)}
|
|
@@ -157,6 +159,7 @@ export const Date: React.FC<DateProps> = ({
|
|
|
157
159
|
type="button"
|
|
158
160
|
ref={dropdownRef}
|
|
159
161
|
className={`w-0 my-0.5 ${height}`}
|
|
162
|
+
tabIndex={-1}
|
|
160
163
|
>
|
|
161
164
|
1
|
|
162
165
|
</button>
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import React from "react";
|
|
3
|
+
import { Tooltip } from "../../../components";
|
|
3
4
|
import { Icon } from "@iconify/react";
|
|
4
5
|
|
|
5
6
|
export interface EmailProps
|
|
@@ -51,9 +52,12 @@ export const Email: React.FC<EmailProps> = ({
|
|
|
51
52
|
</span>
|
|
52
53
|
)}
|
|
53
54
|
{description && (
|
|
54
|
-
<
|
|
55
|
-
<Icon
|
|
56
|
-
|
|
55
|
+
<Tooltip content={description}>
|
|
56
|
+
<Icon
|
|
57
|
+
icon="octicon:info-16"
|
|
58
|
+
className="text-sm text-primary-dark"
|
|
59
|
+
/>
|
|
60
|
+
</Tooltip>
|
|
57
61
|
)}
|
|
58
62
|
</div>
|
|
59
63
|
)}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import React, { useState, useEffect, useRef } from "react";
|
|
3
|
+
import { Tooltip } from "../../../components";
|
|
3
4
|
import { Icon } from "@iconify/react";
|
|
4
5
|
|
|
5
6
|
export interface FileProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
@@ -84,12 +85,12 @@ export const File: React.FC<FileProps> = ({
|
|
|
84
85
|
</span>
|
|
85
86
|
)}
|
|
86
87
|
{description && (
|
|
87
|
-
<
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
</
|
|
88
|
+
<Tooltip content={description}>
|
|
89
|
+
<Icon
|
|
90
|
+
icon="octicon:info-16"
|
|
91
|
+
className="text-sm text-primary-dark"
|
|
92
|
+
/>
|
|
93
|
+
</Tooltip>
|
|
93
94
|
)}
|
|
94
95
|
</div>
|
|
95
96
|
)}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import React, { useRef } from "react";
|
|
3
|
+
import { Tooltip } from "../../../components";
|
|
3
4
|
import { Icon } from "@iconify/react";
|
|
4
5
|
|
|
5
6
|
export interface NumberProps
|
|
@@ -53,9 +54,12 @@ export const Number: React.FC<NumberProps> = ({
|
|
|
53
54
|
</span>
|
|
54
55
|
)}
|
|
55
56
|
{description && (
|
|
56
|
-
<
|
|
57
|
-
<Icon
|
|
58
|
-
|
|
57
|
+
<Tooltip content={description}>
|
|
58
|
+
<Icon
|
|
59
|
+
icon="octicon:info-16"
|
|
60
|
+
className="text-sm text-primary-dark"
|
|
61
|
+
/>
|
|
62
|
+
</Tooltip>
|
|
59
63
|
)}
|
|
60
64
|
</div>
|
|
61
65
|
)}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import React, { useState } from "react";
|
|
3
|
+
import { Tooltip } from "../../../components";
|
|
3
4
|
import { Icon } from "@iconify/react";
|
|
4
5
|
|
|
5
6
|
export interface PasswordProps
|
|
@@ -52,9 +53,12 @@ export const Password: React.FC<PasswordProps> = ({
|
|
|
52
53
|
</span>
|
|
53
54
|
)}
|
|
54
55
|
{description && (
|
|
55
|
-
<
|
|
56
|
-
<Icon
|
|
57
|
-
|
|
56
|
+
<Tooltip content={description}>
|
|
57
|
+
<Icon
|
|
58
|
+
icon="octicon:info-16"
|
|
59
|
+
className="text-sm text-primary-dark"
|
|
60
|
+
/>
|
|
61
|
+
</Tooltip>
|
|
58
62
|
)}
|
|
59
63
|
</div>
|
|
60
64
|
)}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import React from "react";
|
|
3
|
+
import { Tooltip } from "../../../components";
|
|
3
4
|
import { Icon } from "@iconify/react";
|
|
4
5
|
|
|
5
6
|
export interface RadioProps
|
|
@@ -52,12 +53,14 @@ export const Radio: React.FC<RadioProps> = ({
|
|
|
52
53
|
{label}
|
|
53
54
|
</span>
|
|
54
55
|
{description && (
|
|
55
|
-
<
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
56
|
+
<div className="ms-auto">
|
|
57
|
+
<Tooltip content={description}>
|
|
58
|
+
<Icon
|
|
59
|
+
icon="octicon:info-16"
|
|
60
|
+
className="text-sm text-primary-dark"
|
|
61
|
+
/>
|
|
62
|
+
</Tooltip>
|
|
63
|
+
</div>
|
|
61
64
|
)}
|
|
62
65
|
</div>
|
|
63
66
|
)}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import React, { useRef } from "react";
|
|
3
|
+
import { Tooltip } from "../../../components";
|
|
3
4
|
import { Icon } from "@iconify/react";
|
|
4
5
|
|
|
5
6
|
export interface RangeProps
|
|
@@ -47,9 +48,12 @@ export const Range: React.FC<RangeProps> = ({
|
|
|
47
48
|
</span>
|
|
48
49
|
)}
|
|
49
50
|
{description && (
|
|
50
|
-
<
|
|
51
|
-
<Icon
|
|
52
|
-
|
|
51
|
+
<Tooltip content={description}>
|
|
52
|
+
<Icon
|
|
53
|
+
icon="octicon:info-16"
|
|
54
|
+
className="text-sm text-primary-dark"
|
|
55
|
+
/>
|
|
56
|
+
</Tooltip>
|
|
53
57
|
)}
|
|
54
58
|
</div>
|
|
55
59
|
)}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import React from "react";
|
|
3
|
+
import { Tooltip } from "../../../components";
|
|
3
4
|
import { Icon } from "@iconify/react";
|
|
4
5
|
|
|
5
6
|
export interface TextProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
@@ -50,9 +51,12 @@ export const Text: React.FC<TextProps> = ({
|
|
|
50
51
|
</span>
|
|
51
52
|
)}
|
|
52
53
|
{description && (
|
|
53
|
-
<
|
|
54
|
-
<Icon
|
|
55
|
-
|
|
54
|
+
<Tooltip content={description}>
|
|
55
|
+
<Icon
|
|
56
|
+
icon="octicon:info-16"
|
|
57
|
+
className="text-sm text-primary-dark"
|
|
58
|
+
/>
|
|
59
|
+
</Tooltip>
|
|
56
60
|
)}
|
|
57
61
|
</div>
|
|
58
62
|
)}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import React, { useState, useEffect, useRef } from "react";
|
|
3
|
-
import { Dropdown } from "../../../components";
|
|
3
|
+
import { Tooltip, Dropdown } from "../../../components";
|
|
4
4
|
import { Icon } from "@iconify/react";
|
|
5
5
|
import dayjs from "dayjs";
|
|
6
6
|
|
|
@@ -172,12 +172,14 @@ export const Time: React.FC<TimeProps> = ({
|
|
|
172
172
|
</span>
|
|
173
173
|
)}
|
|
174
174
|
{description && (
|
|
175
|
-
<
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
175
|
+
<div className="ms-auto">
|
|
176
|
+
<Tooltip content={description}>
|
|
177
|
+
<Icon
|
|
178
|
+
icon="octicon:info-16"
|
|
179
|
+
className="text-sm text-primary-dark"
|
|
180
|
+
/>
|
|
181
|
+
</Tooltip>
|
|
182
|
+
</div>
|
|
181
183
|
)}
|
|
182
184
|
</div>
|
|
183
185
|
)}
|
|
@@ -214,6 +216,7 @@ export const Time: React.FC<TimeProps> = ({
|
|
|
214
216
|
type="button"
|
|
215
217
|
ref={dropdownRef}
|
|
216
218
|
className={`w-0 my-0.5 ${height}`}
|
|
219
|
+
tabIndex={-1}
|
|
217
220
|
>
|
|
218
221
|
1
|
|
219
222
|
</button>
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import React, { useState, useEffect, useRef } from "react";
|
|
3
|
+
import { Tooltip } from "../../../components";
|
|
3
4
|
import { createPortal } from "react-dom";
|
|
4
5
|
import { Icon } from "@iconify/react";
|
|
5
6
|
|
|
@@ -122,12 +123,14 @@ export const Autocomplete: React.FC<AutocompleteProps> = ({
|
|
|
122
123
|
</span>
|
|
123
124
|
)}
|
|
124
125
|
{description && (
|
|
125
|
-
<
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
126
|
+
<div className="ms-auto">
|
|
127
|
+
<Tooltip content={description}>
|
|
128
|
+
<Icon
|
|
129
|
+
icon="octicon:info-16"
|
|
130
|
+
className="text-sm text-primary-dark"
|
|
131
|
+
/>
|
|
132
|
+
</Tooltip>
|
|
133
|
+
</div>
|
|
131
134
|
)}
|
|
132
135
|
</div>
|
|
133
136
|
)}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import React, { useState, useEffect, useRef } from "react";
|
|
3
|
-
import { Dropdown } from "../../../components";
|
|
3
|
+
import { Tooltip, Dropdown } from "../../../components";
|
|
4
4
|
import { Icon } from "@iconify/react";
|
|
5
5
|
|
|
6
6
|
export interface MultipleSelectProps
|
|
@@ -116,12 +116,14 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
|
|
|
116
116
|
</span>
|
|
117
117
|
)}
|
|
118
118
|
{description && (
|
|
119
|
-
<
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
119
|
+
<div className="ms-auto">
|
|
120
|
+
<Tooltip content={description}>
|
|
121
|
+
<Icon
|
|
122
|
+
icon="octicon:info-16"
|
|
123
|
+
className="text-sm text-primary-dark"
|
|
124
|
+
/>
|
|
125
|
+
</Tooltip>
|
|
126
|
+
</div>
|
|
125
127
|
)}
|
|
126
128
|
</div>
|
|
127
129
|
)}
|
|
@@ -248,6 +250,7 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
|
|
|
248
250
|
style={{
|
|
249
251
|
height: dropdownHeight,
|
|
250
252
|
}}
|
|
253
|
+
tabIndex={-1}
|
|
251
254
|
>
|
|
252
255
|
1
|
|
253
256
|
</button>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import React, { useState, useEffect, useRef } from "react";
|
|
3
|
-
import { Dropdown } from "../../../components";
|
|
3
|
+
import { Tooltip, Dropdown } from "../../../components";
|
|
4
4
|
import { Icon } from "@iconify/react";
|
|
5
5
|
|
|
6
6
|
const countryPhoneCode = [
|
|
@@ -1527,12 +1527,14 @@ export const PhoneNumber: React.FC<PhoneNumberProps> = ({
|
|
|
1527
1527
|
</span>
|
|
1528
1528
|
)}
|
|
1529
1529
|
{description && (
|
|
1530
|
-
<
|
|
1531
|
-
|
|
1532
|
-
|
|
1533
|
-
|
|
1534
|
-
|
|
1535
|
-
|
|
1530
|
+
<div className="ms-auto">
|
|
1531
|
+
<Tooltip content={description}>
|
|
1532
|
+
<Icon
|
|
1533
|
+
icon="octicon:info-16"
|
|
1534
|
+
className="text-sm text-primary-dark"
|
|
1535
|
+
/>
|
|
1536
|
+
</Tooltip>
|
|
1537
|
+
</div>
|
|
1536
1538
|
)}
|
|
1537
1539
|
</div>
|
|
1538
1540
|
)}
|
|
@@ -1602,6 +1604,7 @@ export const PhoneNumber: React.FC<PhoneNumberProps> = ({
|
|
|
1602
1604
|
type="button"
|
|
1603
1605
|
ref={dropdownRef}
|
|
1604
1606
|
className={`w-0 my-0.5 ${height}`}
|
|
1607
|
+
tabIndex={-1}
|
|
1605
1608
|
>
|
|
1606
1609
|
1
|
|
1607
1610
|
</button>
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import React from "react";
|
|
3
|
+
import { Tooltip } from "../../../components";
|
|
3
4
|
import { PinField } from "react-pin-field";
|
|
4
5
|
import { Icon } from "@iconify/react";
|
|
5
6
|
|
|
@@ -42,12 +43,14 @@ export const Pin: React.FC<PinProps> = ({
|
|
|
42
43
|
</span>
|
|
43
44
|
)}
|
|
44
45
|
{description && (
|
|
45
|
-
<
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
46
|
+
<div className="ms-auto">
|
|
47
|
+
<Tooltip content={description}>
|
|
48
|
+
<Icon
|
|
49
|
+
icon="octicon:info-16"
|
|
50
|
+
className="text-sm text-primary-dark"
|
|
51
|
+
/>
|
|
52
|
+
</Tooltip>
|
|
53
|
+
</div>
|
|
51
54
|
)}
|
|
52
55
|
</div>
|
|
53
56
|
)}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import React, { useState, useEffect } from "react";
|
|
3
|
+
import { Tooltip } from "../../../components";
|
|
3
4
|
import { Icon } from "@iconify/react";
|
|
4
5
|
|
|
5
6
|
export interface RatingProps
|
|
@@ -57,12 +58,14 @@ export const Rating: React.FC<RatingProps> = ({
|
|
|
57
58
|
</span>
|
|
58
59
|
)}
|
|
59
60
|
{description && (
|
|
60
|
-
<
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
61
|
+
<div className="ms-auto">
|
|
62
|
+
<Tooltip content={description}>
|
|
63
|
+
<Icon
|
|
64
|
+
icon="octicon:info-16"
|
|
65
|
+
className="text-sm text-primary-dark"
|
|
66
|
+
/>
|
|
67
|
+
</Tooltip>
|
|
68
|
+
</div>
|
|
66
69
|
)}
|
|
67
70
|
</div>
|
|
68
71
|
)}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import React, { useState } from "react";
|
|
3
|
+
import { Tooltip } from "../../../components";
|
|
3
4
|
import { Icon } from "@iconify/react";
|
|
4
5
|
|
|
5
6
|
export interface SecretProps
|
|
@@ -46,12 +47,14 @@ export const Secret: React.FC<SecretProps> = ({
|
|
|
46
47
|
</span>
|
|
47
48
|
)}
|
|
48
49
|
{description && (
|
|
49
|
-
<
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
50
|
+
<div className="ms-auto">
|
|
51
|
+
<Tooltip content={description}>
|
|
52
|
+
<Icon
|
|
53
|
+
icon="octicon:info-16"
|
|
54
|
+
className="text-sm text-primary-dark"
|
|
55
|
+
/>
|
|
56
|
+
</Tooltip>
|
|
57
|
+
</div>
|
|
55
58
|
)}
|
|
56
59
|
</div>
|
|
57
60
|
)}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import React, { useState, useEffect, useRef } from "react";
|
|
3
|
-
import { Dropdown } from "../../../components";
|
|
3
|
+
import { Tooltip, Dropdown } from "../../../components";
|
|
4
4
|
import { Icon } from "@iconify/react";
|
|
5
5
|
|
|
6
6
|
export interface SelectProps
|
|
@@ -89,12 +89,14 @@ export const Select: React.FC<SelectProps> = ({
|
|
|
89
89
|
</span>
|
|
90
90
|
)}
|
|
91
91
|
{description && (
|
|
92
|
-
<
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
92
|
+
<div className="ms-auto">
|
|
93
|
+
<Tooltip content={description}>
|
|
94
|
+
<Icon
|
|
95
|
+
icon="octicon:info-16"
|
|
96
|
+
className="text-sm text-primary-dark"
|
|
97
|
+
/>
|
|
98
|
+
</Tooltip>
|
|
99
|
+
</div>
|
|
98
100
|
)}
|
|
99
101
|
</div>
|
|
100
102
|
)}
|
|
@@ -145,6 +147,7 @@ export const Select: React.FC<SelectProps> = ({
|
|
|
145
147
|
type="button"
|
|
146
148
|
ref={dropdownRef}
|
|
147
149
|
className={`w-0 my-0.5 ${height}`}
|
|
150
|
+
tabIndex={-1}
|
|
148
151
|
>
|
|
149
152
|
1
|
|
150
153
|
</button>
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import React from "react";
|
|
3
|
+
import { Tooltip } from "../../../components";
|
|
3
4
|
import { Icon } from "@iconify/react";
|
|
4
5
|
|
|
5
6
|
export interface TextareaProps
|
|
@@ -51,9 +52,12 @@ export const Textarea: React.FC<TextareaProps> = ({
|
|
|
51
52
|
</span>
|
|
52
53
|
)}
|
|
53
54
|
{description && (
|
|
54
|
-
<
|
|
55
|
-
<Icon
|
|
56
|
-
|
|
55
|
+
<Tooltip content={description}>
|
|
56
|
+
<Icon
|
|
57
|
+
icon="octicon:info-16"
|
|
58
|
+
className="text-sm text-primary-dark"
|
|
59
|
+
/>
|
|
60
|
+
</Tooltip>
|
|
57
61
|
)}
|
|
58
62
|
</div>
|
|
59
63
|
)}
|