@yuno-payments/dashboard-design-system 0.0.187 → 0.0.188
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.
|
@@ -17,6 +17,16 @@ export interface FieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
|
|
|
17
17
|
* Error message displayed below the input (overrides description)
|
|
18
18
|
*/
|
|
19
19
|
error?: string;
|
|
20
|
+
/**
|
|
21
|
+
* Info text displayed in a tooltip next to the label
|
|
22
|
+
*/
|
|
23
|
+
info?: string;
|
|
24
|
+
/**
|
|
25
|
+
* Indicator to show at the right of the label.
|
|
26
|
+
* - Pass `true` to automatically show "Required" or "Optional" based on the `required` prop
|
|
27
|
+
* - Pass a custom string to display that text instead
|
|
28
|
+
*/
|
|
29
|
+
requiredIndicator?: boolean | string;
|
|
20
30
|
/**
|
|
21
31
|
* Optional button to display next to the input
|
|
22
32
|
*/
|
|
@@ -61,11 +71,19 @@ export interface FieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
|
|
|
61
71
|
* placeholder="Enter your email"
|
|
62
72
|
* startIcon="Envelope"
|
|
63
73
|
* description="We'll never share your email"
|
|
74
|
+
* info="Your email will be used for account recovery"
|
|
75
|
+
* required
|
|
76
|
+
* requiredIndicator
|
|
77
|
+
* />
|
|
78
|
+
* <Field
|
|
79
|
+
* label="Phone"
|
|
80
|
+
* placeholder="Enter your phone"
|
|
81
|
+
* requiredIndicator
|
|
64
82
|
* />
|
|
65
83
|
* <Field
|
|
66
|
-
* label="
|
|
67
|
-
*
|
|
68
|
-
*
|
|
84
|
+
* label="Username"
|
|
85
|
+
* placeholder="Choose a username"
|
|
86
|
+
* requiredIndicator="Recommended"
|
|
69
87
|
* />
|
|
70
88
|
* ```
|
|
71
89
|
*/
|
|
@@ -1,98 +1,123 @@
|
|
|
1
1
|
import { j as e } from "../../../_virtual/jsx-runtime.js";
|
|
2
|
-
import { forwardRef as
|
|
3
|
-
import { InputGroup as
|
|
4
|
-
import { cn as
|
|
5
|
-
import { Button as
|
|
6
|
-
import { Icon as
|
|
7
|
-
import { Field as
|
|
8
|
-
|
|
2
|
+
import { forwardRef as w, useId as z } from "react";
|
|
3
|
+
import { InputGroup as E, InputGroupAddon as h, InputGroupInput as G } from "../../../vendor/shadcn/input-group.js";
|
|
4
|
+
import { cn as t } from "../../../lib/utils.js";
|
|
5
|
+
import { Button as B } from "../button/button.js";
|
|
6
|
+
import { Icon as c } from "../icon/icon.js";
|
|
7
|
+
import { Field as I, FieldLabel as T, FieldDescription as A, FieldError as D } from "../../../vendor/shadcn/field.js";
|
|
8
|
+
import { Tooltip as L } from "../tooltip/tooltip.js";
|
|
9
|
+
const O = w(
|
|
9
10
|
({
|
|
10
|
-
className:
|
|
11
|
-
orientation:
|
|
12
|
-
label:
|
|
13
|
-
description:
|
|
14
|
-
error:
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
11
|
+
className: v,
|
|
12
|
+
orientation: F = "vertical",
|
|
13
|
+
label: u,
|
|
14
|
+
description: r,
|
|
15
|
+
error: s,
|
|
16
|
+
info: x,
|
|
17
|
+
requiredIndicator: l,
|
|
18
|
+
required: f,
|
|
19
|
+
id: y,
|
|
20
|
+
button: p,
|
|
21
|
+
disabled: a,
|
|
22
|
+
startIcon: j,
|
|
23
|
+
startIconProps: n,
|
|
24
|
+
endIcon: N,
|
|
25
|
+
endIconProps: d,
|
|
26
|
+
inputProps: m,
|
|
27
|
+
...R
|
|
28
|
+
}, $) => {
|
|
29
|
+
const b = z(), i = y || m?.id || b, o = !!s, g = () => l ? typeof l == "string" ? l : f ? "Required" : "Optional" : null;
|
|
26
30
|
return /* @__PURE__ */ e.jsxs(
|
|
27
|
-
|
|
31
|
+
I,
|
|
28
32
|
{
|
|
29
|
-
orientation:
|
|
30
|
-
"data-invalid":
|
|
31
|
-
className:
|
|
33
|
+
orientation: F,
|
|
34
|
+
"data-invalid": o,
|
|
35
|
+
className: t("w-full", v),
|
|
32
36
|
children: [
|
|
33
|
-
|
|
34
|
-
|
|
37
|
+
u && /* @__PURE__ */ e.jsxs(
|
|
38
|
+
T,
|
|
35
39
|
{
|
|
36
|
-
htmlFor:
|
|
37
|
-
className:
|
|
38
|
-
|
|
40
|
+
htmlFor: i,
|
|
41
|
+
className: t(
|
|
42
|
+
"flex items-center justify-between gap-2",
|
|
43
|
+
a && "text-muted-foreground"
|
|
44
|
+
),
|
|
45
|
+
children: [
|
|
46
|
+
/* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-1", children: [
|
|
47
|
+
u,
|
|
48
|
+
x && /* @__PURE__ */ e.jsx(L, { content: x, children: /* @__PURE__ */ e.jsx(
|
|
49
|
+
c,
|
|
50
|
+
{
|
|
51
|
+
name: "Info",
|
|
52
|
+
size: "sm",
|
|
53
|
+
className: "cursor-default text-muted-foreground"
|
|
54
|
+
}
|
|
55
|
+
) })
|
|
56
|
+
] }),
|
|
57
|
+
g() && /* @__PURE__ */ e.jsxs("span", { className: "text-sm text-muted-foreground font-normal", children: [
|
|
58
|
+
"(",
|
|
59
|
+
g(),
|
|
60
|
+
")"
|
|
61
|
+
] })
|
|
62
|
+
]
|
|
39
63
|
}
|
|
40
64
|
),
|
|
41
65
|
/* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-2 flex-1", children: [
|
|
42
66
|
/* @__PURE__ */ e.jsxs("div", { className: "flex gap-2 items-center", children: [
|
|
43
|
-
/* @__PURE__ */ e.jsxs(
|
|
44
|
-
|
|
45
|
-
|
|
67
|
+
/* @__PURE__ */ e.jsxs(E, { className: "flex-1", children: [
|
|
68
|
+
j && /* @__PURE__ */ e.jsx(h, { align: "inline-start", children: /* @__PURE__ */ e.jsx(
|
|
69
|
+
c,
|
|
46
70
|
{
|
|
47
|
-
name:
|
|
71
|
+
name: n?.name || j,
|
|
48
72
|
size: "sm",
|
|
49
|
-
...
|
|
50
|
-
className:
|
|
73
|
+
...n,
|
|
74
|
+
className: t(
|
|
51
75
|
"cursor-default text-muted-foreground",
|
|
52
|
-
|
|
76
|
+
n?.className
|
|
53
77
|
)
|
|
54
78
|
}
|
|
55
79
|
) }),
|
|
56
80
|
/* @__PURE__ */ e.jsx(
|
|
57
|
-
|
|
81
|
+
G,
|
|
58
82
|
{
|
|
59
|
-
ref:
|
|
60
|
-
disabled:
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
83
|
+
ref: $,
|
|
84
|
+
disabled: a,
|
|
85
|
+
required: f,
|
|
86
|
+
className: t(
|
|
87
|
+
o && "border-destructive focus-visible:border-destructive",
|
|
88
|
+
m?.className
|
|
64
89
|
),
|
|
65
|
-
"aria-invalid":
|
|
66
|
-
"aria-describedby":
|
|
67
|
-
...
|
|
68
|
-
...
|
|
69
|
-
id:
|
|
90
|
+
"aria-invalid": o ? !0 : void 0,
|
|
91
|
+
"aria-describedby": r || s ? `${i}-description` : void 0,
|
|
92
|
+
...R,
|
|
93
|
+
...m,
|
|
94
|
+
id: i
|
|
70
95
|
}
|
|
71
96
|
),
|
|
72
|
-
|
|
73
|
-
|
|
97
|
+
N && /* @__PURE__ */ e.jsx(h, { align: "inline-end", children: /* @__PURE__ */ e.jsx(
|
|
98
|
+
c,
|
|
74
99
|
{
|
|
75
|
-
name:
|
|
100
|
+
name: d?.name || N,
|
|
76
101
|
size: "sm",
|
|
77
|
-
...
|
|
78
|
-
className:
|
|
102
|
+
...d,
|
|
103
|
+
className: t(
|
|
79
104
|
"cursor-default text-muted-foreground",
|
|
80
|
-
|
|
105
|
+
d?.className
|
|
81
106
|
)
|
|
82
107
|
}
|
|
83
108
|
) })
|
|
84
109
|
] }),
|
|
85
|
-
|
|
110
|
+
p && /* @__PURE__ */ e.jsx(B, { disabled: a, ...p })
|
|
86
111
|
] }),
|
|
87
|
-
|
|
88
|
-
|
|
112
|
+
r && !s && /* @__PURE__ */ e.jsx(A, { id: `${i}-description`, children: r }),
|
|
113
|
+
s && /* @__PURE__ */ e.jsx(D, { id: `${i}-description`, children: s })
|
|
89
114
|
] })
|
|
90
115
|
]
|
|
91
116
|
}
|
|
92
117
|
);
|
|
93
118
|
}
|
|
94
119
|
);
|
|
95
|
-
|
|
120
|
+
O.displayName = "Field";
|
|
96
121
|
export {
|
|
97
|
-
|
|
122
|
+
O as Field
|
|
98
123
|
};
|
|
@@ -45,9 +45,25 @@ export interface SelectProps {
|
|
|
45
45
|
* Error message displayed below the select
|
|
46
46
|
*/
|
|
47
47
|
error?: string;
|
|
48
|
+
/**
|
|
49
|
+
* Info text displayed in a tooltip next to the label
|
|
50
|
+
*/
|
|
51
|
+
info?: string;
|
|
52
|
+
/**
|
|
53
|
+
* Indicator to show at the right of the label.
|
|
54
|
+
* - Pass `true` to automatically show "Required" or "Optional" based on the `required` prop
|
|
55
|
+
* - Pass a custom string to display that text instead
|
|
56
|
+
*/
|
|
57
|
+
requiredIndicator?: boolean | string;
|
|
58
|
+
/**
|
|
59
|
+
* Whether the select is required
|
|
60
|
+
* @default false
|
|
61
|
+
*/
|
|
62
|
+
required?: boolean;
|
|
48
63
|
/**
|
|
49
64
|
* Whether to show "(Optional)" next to the label
|
|
50
65
|
* @default false
|
|
66
|
+
* @deprecated Use requiredIndicator instead
|
|
51
67
|
*/
|
|
52
68
|
optional?: boolean;
|
|
53
69
|
/**
|
|
@@ -90,7 +106,7 @@ export interface SelectProps {
|
|
|
90
106
|
id?: string;
|
|
91
107
|
}
|
|
92
108
|
/**
|
|
93
|
-
* Select dropdown component with label, description, error handling, and grouped options support.
|
|
109
|
+
* Select dropdown component with label, description, error handling, info tooltips, required indicators, and grouped options support.
|
|
94
110
|
*
|
|
95
111
|
* @example
|
|
96
112
|
* ```tsx
|
|
@@ -102,6 +118,9 @@ export interface SelectProps {
|
|
|
102
118
|
* { value: 'mx', label: 'Mexico' }
|
|
103
119
|
* ]}
|
|
104
120
|
* onChange={(value) => console.log(value)}
|
|
121
|
+
* required
|
|
122
|
+
* requiredIndicator
|
|
123
|
+
* info="Select your country of residence"
|
|
105
124
|
* />
|
|
106
125
|
* ```
|
|
107
126
|
*/
|
|
@@ -1,83 +1,103 @@
|
|
|
1
1
|
import { j as e } from "../../../_virtual/jsx-runtime.js";
|
|
2
|
-
import * as
|
|
3
|
-
import { cn as
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
|
|
2
|
+
import * as O from "react";
|
|
3
|
+
import { cn as n } from "../../../lib/utils.js";
|
|
4
|
+
import { Icon as C } from "../icon/icon.js";
|
|
5
|
+
import { Select as G, SelectTrigger as L, SelectValue as V, SelectContent as z, SelectGroup as E, SelectLabel as F, SelectItem as h } from "../../../vendor/shadcn/select.js";
|
|
6
|
+
import { Label as I } from "../label/label.js";
|
|
7
|
+
import { Tooltip as $ } from "../tooltip/tooltip.js";
|
|
8
|
+
import { Typography as r } from "../typography/typography.js";
|
|
9
|
+
const k = O.forwardRef(
|
|
8
10
|
({
|
|
9
|
-
label:
|
|
10
|
-
description:
|
|
11
|
-
error:
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
11
|
+
label: m,
|
|
12
|
+
description: i,
|
|
13
|
+
error: t,
|
|
14
|
+
info: x,
|
|
15
|
+
requiredIndicator: a,
|
|
16
|
+
required: j = !1,
|
|
17
|
+
optional: p = !1,
|
|
18
|
+
placeholder: v = "Select an option",
|
|
19
|
+
value: N,
|
|
20
|
+
defaultValue: g,
|
|
21
|
+
onChange: S,
|
|
22
|
+
disabled: c = !1,
|
|
23
|
+
options: o = [],
|
|
24
|
+
groups: f = [],
|
|
25
|
+
className: b,
|
|
26
|
+
id: d
|
|
27
|
+
}, y) => {
|
|
28
|
+
const R = f.length > 0, T = o.length > 0, u = () => a ? typeof a == "string" ? a : j ? "Required" : "Optional" : null;
|
|
29
|
+
return /* @__PURE__ */ e.jsxs("div", { className: n("w-full", b), children: [
|
|
30
|
+
m && /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-between gap-2 mb-2", children: [
|
|
31
|
+
/* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-1", children: [
|
|
32
|
+
/* @__PURE__ */ e.jsx(I, { htmlFor: d, className: n(c && "opacity-50"), children: m }),
|
|
33
|
+
x && /* @__PURE__ */ e.jsx($, { content: x, children: /* @__PURE__ */ e.jsx(
|
|
34
|
+
C,
|
|
35
|
+
{
|
|
36
|
+
name: "Info",
|
|
37
|
+
size: "sm",
|
|
38
|
+
className: "cursor-default text-muted-foreground"
|
|
39
|
+
}
|
|
40
|
+
) }),
|
|
41
|
+
p && !a && /* @__PURE__ */ e.jsx(r, { variant: "sm", className: "text-muted-foreground", children: "(Optional)" })
|
|
42
|
+
] }),
|
|
43
|
+
u() && /* @__PURE__ */ e.jsxs("span", { className: "text-sm text-muted-foreground font-normal", children: [
|
|
44
|
+
"(",
|
|
45
|
+
u(),
|
|
46
|
+
")"
|
|
47
|
+
] })
|
|
28
48
|
] }),
|
|
29
|
-
|
|
30
|
-
|
|
49
|
+
i && !t && /* @__PURE__ */ e.jsx(
|
|
50
|
+
r,
|
|
31
51
|
{
|
|
32
52
|
variant: "sm",
|
|
33
|
-
className:
|
|
53
|
+
className: n(
|
|
34
54
|
"text-muted-foreground mb-2",
|
|
35
|
-
|
|
55
|
+
c && "opacity-50"
|
|
36
56
|
),
|
|
37
|
-
children:
|
|
57
|
+
children: i
|
|
38
58
|
}
|
|
39
59
|
),
|
|
40
60
|
/* @__PURE__ */ e.jsxs(
|
|
41
|
-
|
|
61
|
+
G,
|
|
42
62
|
{
|
|
43
|
-
value:
|
|
44
|
-
defaultValue:
|
|
45
|
-
onValueChange:
|
|
46
|
-
disabled:
|
|
63
|
+
value: N,
|
|
64
|
+
defaultValue: g,
|
|
65
|
+
onValueChange: S,
|
|
66
|
+
disabled: c,
|
|
47
67
|
children: [
|
|
48
68
|
/* @__PURE__ */ e.jsx(
|
|
49
|
-
|
|
69
|
+
L,
|
|
50
70
|
{
|
|
51
|
-
ref:
|
|
52
|
-
id:
|
|
53
|
-
className:
|
|
54
|
-
children: /* @__PURE__ */ e.jsx(
|
|
71
|
+
ref: y,
|
|
72
|
+
id: d,
|
|
73
|
+
className: n(t && "border-destructive"),
|
|
74
|
+
children: /* @__PURE__ */ e.jsx(V, { placeholder: v })
|
|
55
75
|
}
|
|
56
76
|
),
|
|
57
|
-
/* @__PURE__ */ e.jsx(
|
|
77
|
+
/* @__PURE__ */ e.jsx(z, { children: R ? (
|
|
58
78
|
// Render grouped options
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
] },
|
|
65
|
-
] },
|
|
66
|
-
) :
|
|
79
|
+
f.map((s, w) => /* @__PURE__ */ e.jsxs(E, { children: [
|
|
80
|
+
s.label && /* @__PURE__ */ e.jsx(F, { children: s.label }),
|
|
81
|
+
s.options.map((l) => /* @__PURE__ */ e.jsxs(h, { value: l.value, children: [
|
|
82
|
+
l.icon && /* @__PURE__ */ e.jsx("span", { className: "mr-2 inline-flex items-center", children: l.icon }),
|
|
83
|
+
l.label
|
|
84
|
+
] }, l.value))
|
|
85
|
+
] }, w))
|
|
86
|
+
) : T ? (
|
|
67
87
|
// Render flat options
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
] }) },
|
|
88
|
+
o.map((s) => /* @__PURE__ */ e.jsx(h, { value: s.value, children: /* @__PURE__ */ e.jsxs("span", { className: "flex items-center", children: [
|
|
89
|
+
s.icon && /* @__PURE__ */ e.jsx("span", { className: "mr-2 inline-flex items-center", children: s.icon }),
|
|
90
|
+
s.label
|
|
91
|
+
] }) }, s.value))
|
|
72
92
|
) : null })
|
|
73
93
|
]
|
|
74
94
|
}
|
|
75
95
|
),
|
|
76
|
-
|
|
96
|
+
t && /* @__PURE__ */ e.jsx(r, { variant: "sm", className: "text-destructive mt-2", children: t })
|
|
77
97
|
] });
|
|
78
98
|
}
|
|
79
99
|
);
|
|
80
|
-
|
|
100
|
+
k.displayName = "Select";
|
|
81
101
|
export {
|
|
82
|
-
|
|
102
|
+
k as Select
|
|
83
103
|
};
|