@payfit/unity-components 2.28.2 → 2.28.3
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/esm/components/button/Button.d.ts +16 -5
- package/dist/esm/components/button/Button.js +78 -49
- package/dist/esm/components/button/Button.variants.d.ts +3 -1
- package/dist/esm/components/button/Button.variants.js +57 -39
- package/dist/esm/components/link-button/RawLinkButton.d.ts +9 -3
- package/dist/esm/components/link-button/RawLinkButton.js +96 -62
- package/dist/esm/components/list-view/parts/RawListViewItem.d.ts +3 -3
- package/package.json +8 -8
|
@@ -7,7 +7,7 @@ type UnityButtonProps = AriaButtonProps & ButtonBase & {
|
|
|
7
7
|
* The button's appearance. It can be one of the following: 'primary', 'secondary', 'ghost'.
|
|
8
8
|
* @default 'primary'
|
|
9
9
|
*/
|
|
10
|
-
variant: 'primary' | 'secondary' | 'ghost';
|
|
10
|
+
variant: 'primary' | 'secondary' | 'ghost' | 'outlined';
|
|
11
11
|
/**
|
|
12
12
|
* The button size. It can be full size or default size (min-content).
|
|
13
13
|
* @default 'default'
|
|
@@ -18,15 +18,24 @@ type UnityButtonProps = AriaButtonProps & ButtonBase & {
|
|
|
18
18
|
* @default 'primary'
|
|
19
19
|
*/
|
|
20
20
|
color?: ButtonFilled['color'] | ButtonOutlined['color'] | ButtonGhost['color'];
|
|
21
|
+
/**
|
|
22
|
+
* The loading state of the button.
|
|
23
|
+
* @default false
|
|
24
|
+
*/
|
|
25
|
+
isLoading?: boolean;
|
|
21
26
|
/**
|
|
22
27
|
* The button's prefix icon. It has to be one of the icons from the Unity Icons package.
|
|
23
28
|
*/
|
|
24
29
|
prefixIcon?: UnityIcon;
|
|
25
30
|
/**
|
|
26
|
-
* The
|
|
27
|
-
* @default
|
|
31
|
+
* The button's suffix icon. It has to be one of the icons from the Unity Icons package.
|
|
32
|
+
* @default undefined
|
|
33
|
+
*/
|
|
34
|
+
suffixIcon?: UnityIcon;
|
|
35
|
+
/**
|
|
36
|
+
* The length of the label in characters before truncation applies. Truncation won't happen by default unless you specify this prop
|
|
37
|
+
* @default undefined
|
|
28
38
|
*/
|
|
29
|
-
isLoading?: boolean;
|
|
30
39
|
truncateLabelLength?: number;
|
|
31
40
|
};
|
|
32
41
|
type UnionButtonProps = (UnityButtonProps & {
|
|
@@ -35,7 +44,9 @@ type UnionButtonProps = (UnityButtonProps & {
|
|
|
35
44
|
variant: 'secondary';
|
|
36
45
|
} & ButtonOutlined) | (UnityButtonProps & {
|
|
37
46
|
variant: 'ghost';
|
|
38
|
-
} & ButtonGhost)
|
|
47
|
+
} & ButtonGhost) | (UnityButtonProps & {
|
|
48
|
+
variant: 'outlined';
|
|
49
|
+
} & ButtonOutlined);
|
|
39
50
|
export type ButtonProps = PropsWithChildren<Omit<UnionButtonProps, 'style'>>;
|
|
40
51
|
/**
|
|
41
52
|
* Buttons allow users to take actions, and make choices, with a single tap.
|
|
@@ -1,78 +1,107 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { forwardRef as
|
|
3
|
-
import { uyMerge as
|
|
4
|
-
import { Button as
|
|
5
|
-
import { Icon as
|
|
6
|
-
import { Spinner as
|
|
7
|
-
import {
|
|
8
|
-
const
|
|
1
|
+
import { jsx as a, jsxs as B } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef as N, useMemo as j } from "react";
|
|
3
|
+
import { useUnityTheme as z, uyMerge as o } from "@payfit/unity-themes";
|
|
4
|
+
import { Button as C } from "react-aria-components/Button";
|
|
5
|
+
import { Icon as f } from "../icon/Icon.js";
|
|
6
|
+
import { Spinner as M } from "../spinner/Spinner.js";
|
|
7
|
+
import { buttonOutlined as y, buttonGhost as $, buttonFilled as d } from "./Button.variants.js";
|
|
8
|
+
const A = (s, r) => s ? /* @__PURE__ */ a(M, { size: "small", color: "inherit", label: "Loading..." }) : r ? /* @__PURE__ */ a(
|
|
9
|
+
f,
|
|
10
|
+
{
|
|
11
|
+
src: r,
|
|
12
|
+
size: 20,
|
|
13
|
+
color: "inherit",
|
|
14
|
+
role: "presentation",
|
|
15
|
+
"data-unity-icon": "prefix"
|
|
16
|
+
}
|
|
17
|
+
) : null, F = N(
|
|
9
18
|
({
|
|
10
|
-
variant:
|
|
19
|
+
variant: s,
|
|
11
20
|
children: r,
|
|
12
|
-
color:
|
|
13
|
-
size:
|
|
14
|
-
isDisabled:
|
|
21
|
+
color: e = "primary",
|
|
22
|
+
size: m = "default",
|
|
23
|
+
isDisabled: i = !1,
|
|
15
24
|
isLoading: t = !1,
|
|
16
|
-
prefixIcon:
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
25
|
+
prefixIcon: h,
|
|
26
|
+
suffixIcon: c,
|
|
27
|
+
truncateLabelLength: l,
|
|
28
|
+
...b
|
|
29
|
+
}, w) => {
|
|
30
|
+
const { theme: p } = z(), x = j(() => {
|
|
31
|
+
const n = { size: m, isDisabled: i, isLoading: t };
|
|
32
|
+
switch (s) {
|
|
23
33
|
case "primary": {
|
|
24
|
-
const
|
|
25
|
-
...
|
|
26
|
-
color:
|
|
27
|
-
};
|
|
28
|
-
return m(I(n));
|
|
29
|
-
}
|
|
30
|
-
case "secondary": {
|
|
31
|
-
const n = {
|
|
32
|
-
...l,
|
|
33
|
-
color: o
|
|
34
|
+
const u = {
|
|
35
|
+
...n,
|
|
36
|
+
color: e
|
|
34
37
|
};
|
|
35
|
-
return
|
|
38
|
+
return o(d(u));
|
|
36
39
|
}
|
|
40
|
+
case "secondary":
|
|
41
|
+
return p === "rebrand" ? o(
|
|
42
|
+
d({ ...n, color: e === "inverted" ? "inverted.low" : "neutral" })
|
|
43
|
+
) : o(
|
|
44
|
+
y({
|
|
45
|
+
...n,
|
|
46
|
+
color: e
|
|
47
|
+
})
|
|
48
|
+
);
|
|
37
49
|
case "ghost": {
|
|
38
|
-
const
|
|
39
|
-
...
|
|
40
|
-
color:
|
|
50
|
+
const u = {
|
|
51
|
+
...n,
|
|
52
|
+
color: e
|
|
41
53
|
};
|
|
42
|
-
return
|
|
54
|
+
return o($(u));
|
|
43
55
|
}
|
|
56
|
+
case "outlined":
|
|
57
|
+
return o(
|
|
58
|
+
y({
|
|
59
|
+
...n,
|
|
60
|
+
color: e
|
|
61
|
+
})
|
|
62
|
+
);
|
|
44
63
|
}
|
|
45
|
-
}, [e,
|
|
64
|
+
}, [s, e, m, i, t, p]), v = {
|
|
46
65
|
...t && { "data-loading": t }
|
|
47
66
|
};
|
|
48
|
-
return /* @__PURE__ */
|
|
49
|
-
|
|
67
|
+
return /* @__PURE__ */ a(
|
|
68
|
+
C,
|
|
50
69
|
{
|
|
51
70
|
"data-dd-privacy": "allow",
|
|
52
|
-
...
|
|
53
|
-
ref:
|
|
54
|
-
isDisabled:
|
|
71
|
+
...b,
|
|
72
|
+
ref: w,
|
|
73
|
+
isDisabled: i || t,
|
|
55
74
|
isPending: t,
|
|
56
|
-
className:
|
|
57
|
-
...
|
|
58
|
-
children: /* @__PURE__ */
|
|
59
|
-
|
|
60
|
-
|
|
75
|
+
className: x,
|
|
76
|
+
...v,
|
|
77
|
+
children: /* @__PURE__ */ B("span", { className: "uy:inline-flex uy:gap-50 uy:items-center", children: [
|
|
78
|
+
A(t, h),
|
|
79
|
+
l && l > 0 ? /* @__PURE__ */ a(
|
|
61
80
|
"span",
|
|
62
81
|
{
|
|
63
82
|
style: {
|
|
64
|
-
"--uy-button-label-truncation-length": `${
|
|
83
|
+
"--uy-button-label-truncation-length": `${l}ch`
|
|
65
84
|
},
|
|
66
85
|
className: "uy:truncate uy:min-w-0 uy:w-(--uy-button-label-truncation-length)",
|
|
67
86
|
children: r
|
|
68
87
|
}
|
|
69
|
-
) : r
|
|
88
|
+
) : r,
|
|
89
|
+
c && /* @__PURE__ */ a(
|
|
90
|
+
f,
|
|
91
|
+
{
|
|
92
|
+
src: c,
|
|
93
|
+
size: 20,
|
|
94
|
+
color: "inherit",
|
|
95
|
+
role: "presentation",
|
|
96
|
+
"data-unity-icon": "suffix"
|
|
97
|
+
}
|
|
98
|
+
)
|
|
70
99
|
] })
|
|
71
100
|
}
|
|
72
101
|
);
|
|
73
102
|
}
|
|
74
103
|
);
|
|
75
|
-
|
|
104
|
+
F.displayName = "Button";
|
|
76
105
|
export {
|
|
77
|
-
|
|
106
|
+
F as Button
|
|
78
107
|
};
|
|
@@ -44,7 +44,9 @@ export declare const buttonFilled: import('tailwind-variants').TVReturnType<{
|
|
|
44
44
|
primary: string[];
|
|
45
45
|
warning: string[];
|
|
46
46
|
danger: string[];
|
|
47
|
+
neutral: string[];
|
|
47
48
|
inverted: string[];
|
|
49
|
+
'inverted.low': string[];
|
|
48
50
|
};
|
|
49
51
|
isDisabled: {
|
|
50
52
|
true: string;
|
|
@@ -119,7 +121,7 @@ export declare const buttonOutlined: import('tailwind-variants').TVReturnType<{
|
|
|
119
121
|
isLoading: {
|
|
120
122
|
true: string;
|
|
121
123
|
};
|
|
122
|
-
}, undefined, "uy:border uy:border-solid", {
|
|
124
|
+
}, undefined, "uy:border uy:border-solid uy:bg-transparent", {
|
|
123
125
|
isDisabled: {
|
|
124
126
|
true: string;
|
|
125
127
|
false: string;
|
|
@@ -2,8 +2,11 @@ import { uyTv as e } from "@payfit/unity-themes";
|
|
|
2
2
|
const t = e({
|
|
3
3
|
base: [
|
|
4
4
|
"uy:group",
|
|
5
|
-
"uy:cursor-pointer uy:rounded-100 uy:sm:rounded-75 uy:
|
|
6
|
-
|
|
5
|
+
"uy:cursor-pointer uy:rounded-100 uy:sm:rounded-75 uy:py-125 uy:sm:py-100 uy:sm:h-500 uy:inline-flex uy:items-center uy:justify-center uy:whitespace-nowrap uy:typography-action uy:transition-colors",
|
|
6
|
+
'uy:has-data-[unity-icon="prefix"]:pl-100 uy:has-data-[unity-icon="prefix"]:pr-200',
|
|
7
|
+
'uy:has-data-[unity-icon="suffix"]:pl-200 uy:has-data-[unity-icon="suffix"]:pr-100',
|
|
8
|
+
'uy:px-200 uy:has-data-[unity-icon="prefix"]:has-data-[unity-icon="suffix"]:px-100',
|
|
9
|
+
'uy:data-[focus-visible="true"]:outline-2 uy:data-[focus-visible="true"]:outline-solid uy:data-[focus-visible="true"]:outline-offset-2 uy:data-[focus-visible="true"]:outline-utility-focus-ring'
|
|
7
10
|
],
|
|
8
11
|
variants: {
|
|
9
12
|
isDisabled: {
|
|
@@ -29,10 +32,10 @@ const t = e({
|
|
|
29
32
|
variants: {
|
|
30
33
|
color: {
|
|
31
34
|
primary: [
|
|
32
|
-
"uy:bg-surface-primary-enabled uy:text-content-inverted-enabled",
|
|
33
|
-
'uy:data-[hovered="true"]:bg-surface-primary-hover uy:data-[hovered="true"]:text-content-inverted-hover',
|
|
34
|
-
"uy:active:bg-surface-primary-active uy:active:text-content-inverted-hover",
|
|
35
|
-
"uy:data-[pressed]:bg-surface-primary-pressed uy:data-[pressed]:text-content-inverted-pressed"
|
|
35
|
+
"uy:theme-legacy:bg-surface-primary-enabled uy:theme-rebrand:bg-surface-neutral-highest-enabled uy:text-content-inverted-enabled",
|
|
36
|
+
'uy:theme-legacy:data-[hovered="true"]:bg-surface-primary-hover uy:theme-rebrand:data-[hovered="true"]:bg-surface-neutral-highest-hover uy:data-[hovered="true"]:text-content-inverted-hover',
|
|
37
|
+
"uy:theme-legacy:active:bg-surface-primary-active uy:theme-rebrand:active:bg-surface-neutral-highest-active uy:active:text-content-inverted-hover",
|
|
38
|
+
"uy:theme-legacy:data-[pressed]:bg-surface-primary-pressed uy:theme-rebrand:data-[pressed]:bg-surface-neutral-highest-pressed uy:data-[pressed]:text-content-inverted-pressed"
|
|
36
39
|
],
|
|
37
40
|
warning: [
|
|
38
41
|
"uy:bg-surface-warning-enabled uy:text-content-neutral-enabled",
|
|
@@ -41,10 +44,16 @@ const t = e({
|
|
|
41
44
|
"uy:data-[pressed]:bg-surface-warning-pressed uy:data-[pressed]:text-content-neutral-pressed"
|
|
42
45
|
],
|
|
43
46
|
danger: [
|
|
44
|
-
"uy:bg-surface-danger-enabled uy:text-content-inverted-enabled",
|
|
45
|
-
'uy:data-[hovered="true"]:bg-surface-danger-hover uy:data-[hovered="true"]:text-content-inverted-hover',
|
|
46
|
-
"uy:active:bg-surface-danger-active uy:active:text-content-inverted",
|
|
47
|
-
"uy:data-[pressed]:bg-surface-danger-pressed uy:data-[pressed]:text-content-inverted"
|
|
47
|
+
"uy:bg-surface-danger-enabled uy:theme-legacy:text-content-inverted-enabled uy:theme-rebrand:text-content-inverted",
|
|
48
|
+
'uy:data-[hovered="true"]:bg-surface-danger-hover uy:theme-legacy:data-[hovered="true"]:text-content-inverted-hover',
|
|
49
|
+
"uy:active:bg-surface-danger-active uy:theme-legacy:active:text-content-inverted",
|
|
50
|
+
"uy:data-[pressed]:bg-surface-danger-pressed uy:theme-legacy:data-[pressed]:text-content-inverted"
|
|
51
|
+
],
|
|
52
|
+
neutral: [
|
|
53
|
+
"uy:bg-surface-neutral-low-enabled uy:text-content-neutral-enabled",
|
|
54
|
+
'uy:data-[hovered="true"]:bg-surface-neutral-low-hover uy:data-[hovered="true"]:text-content-neutral-hover',
|
|
55
|
+
"uy:active:bg-surface-neutral-low-active uy:active:text-content-neutral-active",
|
|
56
|
+
"uy:data-[pressed]:bg-surface-neutral-low-pressed uy:data-[pressed]:text-content-neutral-pressed"
|
|
48
57
|
],
|
|
49
58
|
inverted: [
|
|
50
59
|
"uy:bg-surface-neutral-enabled uy:text-content-neutral-enabled",
|
|
@@ -52,6 +61,13 @@ const t = e({
|
|
|
52
61
|
"uy:active:bg-surface-neutral-active uy:active:text-content-neutral-active",
|
|
53
62
|
"uy:data-[pressed]:bg-surface-neutral-active uy:data-[pressed]:text-content-neutral-pressed",
|
|
54
63
|
"uy:data-[focus-visible]:outline-utility-inverted-focus-ring uy:data-[focus-visible]:text-content-neutral-focus uy:data-[focus-visible]:bg-surface-neutral-focus"
|
|
64
|
+
],
|
|
65
|
+
"inverted.low": [
|
|
66
|
+
"uy:bg-surface-inverted-low-enabled uy:text-content-inverted-enabled",
|
|
67
|
+
'uy:data-[hovered="true"]:bg-surface-inverted-low-hover uy:data-[hovered="true"]:text-content-inverted-hover',
|
|
68
|
+
"uy:active:bg-surface-inverted-low-active uy:active:text-content-inverted-active",
|
|
69
|
+
'uy:data-[pressed="true"]:bg-surface-inverted-low-pressed uy:data-[pressed="true"]:text-content-inverted-pressed',
|
|
70
|
+
'uy:data-[focus-visible="true"]:outline-utility-inverted-focus-ring uy:data-[focus-visible="true"]:text-content-inverted-focus uy:data-[focus-visible="true"]:bg-surface-inverted-low-focus'
|
|
55
71
|
]
|
|
56
72
|
},
|
|
57
73
|
isDisabled: {
|
|
@@ -63,75 +79,77 @@ const t = e({
|
|
|
63
79
|
false: ""
|
|
64
80
|
}
|
|
65
81
|
}
|
|
66
|
-
}),
|
|
82
|
+
}), u = e({
|
|
67
83
|
extend: t,
|
|
68
|
-
base: "uy:border uy:border-solid",
|
|
84
|
+
base: "uy:border uy:border-solid uy:bg-transparent",
|
|
69
85
|
variants: {
|
|
70
86
|
color: {
|
|
71
87
|
primary: [
|
|
72
|
-
"uy:
|
|
88
|
+
"uy:text-content-neutral-enabled uy:border-border-neutral-high-enabled",
|
|
73
89
|
'uy:data-[hovered="true"]:text-content-neutral-hover uy:data-[hovered="true"]:border-border-neutral-high-hover',
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
90
|
+
'uy:theme-legacy:data-[pressed="true"]:text-content-neutral-high-pressed uy:theme-legacy:data-[pressed="true"]:border-border-neutral-high-pressed',
|
|
91
|
+
'uy:theme-rebrand:data-[pressed="true"]:text-content-neutral-pressed uy:theme-rebrand:data-[pressed="true"]:bg-surface-neutral-low-pressed uy:theme-rebrand:data-[pressed="true"]:border-surface-neutral-low-pressed',
|
|
92
|
+
'uy:data-[focus-visible="true"]:border-border-neutral-high-focus uy:data-[focus-visible="true"]:text-content-neutral-focus'
|
|
77
93
|
],
|
|
78
94
|
inverted: [
|
|
79
|
-
"uy:
|
|
95
|
+
"uy:text-content-inverted-enabled uy:border-border-inverted-enabled",
|
|
96
|
+
'uy:theme-legacy:data-[pressed="true"]:text-content-inverted-pressed uy:theme-legacy:data-[pressed="true"]:border-border-inverted-pressed',
|
|
97
|
+
'uy:theme-rebrand:data-[pressed="true"]:text-content-neutral-pressed uy:theme-rebrand:data-[pressed="true"]:bg-surface-neutral-low-pressed uy:theme-rebrand:data-[pressed="true"]:border-surface-neutral-low-pressed',
|
|
80
98
|
"uy:data-[focus-visible]:outline-utility-inverted-focus-ring"
|
|
81
99
|
]
|
|
82
100
|
},
|
|
83
101
|
isDisabled: {
|
|
84
|
-
true: "uy:disabled:text-content-neutral-disabled uy:disabled:border-border-neutral-disabled",
|
|
102
|
+
true: "uy:disabled:text-content-neutral-disabled uy:disabled:border-border-neutral-disabled uy:data-[disabled]:border-border-neutral-disabled",
|
|
85
103
|
false: ""
|
|
86
104
|
},
|
|
87
105
|
isLoading: {
|
|
88
106
|
true: "uy:data-[loading]:text-content-neutral-disabled uy:data-[loading]:border-border-neutral-disabled"
|
|
89
107
|
}
|
|
90
108
|
}
|
|
91
|
-
}),
|
|
109
|
+
}), n = e({
|
|
92
110
|
extend: t,
|
|
93
111
|
variants: {
|
|
94
112
|
color: {
|
|
95
113
|
primary: [
|
|
96
114
|
"uy:bg-transparent uy:text-content-primary-enabled",
|
|
97
|
-
|
|
98
|
-
"uy:
|
|
99
|
-
"uy:
|
|
115
|
+
'uy:data-[hovered="true"]:bg-surface-primary-lowest-hover uy:data-[hovered="true"]:text-content-primary-hover',
|
|
116
|
+
"uy:active:bg-surface-primary-lowest-active uy:active:text-content-primary-active",
|
|
117
|
+
"uy:data-[pressed=true]:bg-surface-primary-lowest-pressed uy:data-[pressed=true]:text-content-primary-pressed",
|
|
100
118
|
"uy:data-[focus-visible]:bg-transparent"
|
|
101
119
|
],
|
|
102
120
|
warning: [
|
|
103
121
|
"uy:bg-transparent uy:text-content-warning-enabled",
|
|
104
|
-
|
|
105
|
-
"uy:
|
|
106
|
-
"uy:
|
|
122
|
+
'uy:data-[hovered="true"]:bg-surface-warning-lowest-hover uy:data-[hovered="true"]:text-content-warning-hover',
|
|
123
|
+
"uy:active:bg-surface-warning-lowest-active uy:active:text-content-warning-active",
|
|
124
|
+
"uy:data-[pressed=true]:bg-surface-warning-lowest-pressed uy:data-[pressed=true]:text-content-warning-pressed",
|
|
107
125
|
"uy:data-[focus-visible]:bg-transparent"
|
|
108
126
|
],
|
|
109
127
|
danger: [
|
|
110
128
|
"uy:bg-transparent uy:text-content-danger-enabled",
|
|
111
|
-
|
|
112
|
-
"uy:
|
|
113
|
-
"uy:
|
|
129
|
+
'uy:data-[hovered="true"]:bg-surface-danger-lowest-hover uy:data-[hovered="true"]:text-content-danger-hover',
|
|
130
|
+
"uy:active:bg-surface-danger-lowest-active uy:active:text-content-danger-active",
|
|
131
|
+
"uy:data-[pressed=true]:bg-surface-danger-lowest-pressed uy:data-[pressed=true]:text-content-danger-pressed",
|
|
114
132
|
"uy:data-[focus-visible]:bg-transparent"
|
|
115
133
|
],
|
|
116
134
|
neutral: [
|
|
117
135
|
"uy:bg-transparent uy:text-content-neutral-enabled",
|
|
118
|
-
|
|
119
|
-
"uy:
|
|
120
|
-
"uy:
|
|
136
|
+
'uy:data-[hovered="true"]:bg-surface-neutral-hover uy:data-[hovered="true"]:text-content-neutral-hover',
|
|
137
|
+
"uy:active:bg-surface-neutral-active uy:active:text-content-neutral-active",
|
|
138
|
+
"uy:data-[pressed=true]:bg-surface-neutral-pressed uy:data-[pressed=true]:text-content-neutral-pressed",
|
|
121
139
|
"uy:data-[focus-visible]:bg-transparent"
|
|
122
140
|
],
|
|
123
141
|
"neutral.lowest": [
|
|
124
142
|
"uy:bg-transparent uy:text-content-neutral-enabled",
|
|
125
|
-
|
|
126
|
-
"uy:
|
|
127
|
-
"uy:
|
|
143
|
+
'uy:data-[hovered="true"]:bg-surface-neutral-lowest-hover uy:data-[hovered="true"]:text-content-neutral-hover',
|
|
144
|
+
"uy:active:bg-surface-neutral-lowest-active uy:active:text-content-neutral-active",
|
|
145
|
+
"uy:data-[pressed=true]:bg-surface-neutral-lowest-pressed uy:data-[pressed=true]:text-content-neutral-pressed",
|
|
128
146
|
"uy:data-[focus-visible]:bg-transparent"
|
|
129
147
|
],
|
|
130
148
|
inverted: [
|
|
131
149
|
"uy:bg-transparent uy:text-content-inverted-enabled",
|
|
132
|
-
|
|
133
|
-
"uy:
|
|
134
|
-
"uy:
|
|
150
|
+
'uy:data-[hovered="true"]:bg-surface-inverted-hover uy:data-[hovered="true"]:text-content-inverted-hover',
|
|
151
|
+
"uy:active:bg-surface-inverted-active uy:active:text-content-inverted-active",
|
|
152
|
+
"uy:data-[pressed=true]:bg-surface-inverted-pressed uy:data-[pressed=true]:text-content-inverted-pressed",
|
|
135
153
|
"uy:data-[focus-visible]:outline-utility-inverted-focus-ring uy:data-[focus-visible]:bg-transparent"
|
|
136
154
|
]
|
|
137
155
|
},
|
|
@@ -159,6 +177,6 @@ const t = e({
|
|
|
159
177
|
});
|
|
160
178
|
export {
|
|
161
179
|
r as buttonFilled,
|
|
162
|
-
|
|
163
|
-
|
|
180
|
+
n as buttonGhost,
|
|
181
|
+
u as buttonOutlined
|
|
164
182
|
};
|
|
@@ -4,10 +4,10 @@ import { LinkProps as AriaLinkProps } from 'react-aria-components/Link';
|
|
|
4
4
|
import { ButtonBase, ButtonFilled, ButtonGhost, ButtonOutlined } from '../button/Button.variants.js';
|
|
5
5
|
type UnityLinkButtonProps = Omit<AriaLinkProps, 'style' | 'className'> & ButtonBase & {
|
|
6
6
|
/**
|
|
7
|
-
* The link button's appearance. It can be one of the following: 'primary', 'secondary', 'ghost'.
|
|
7
|
+
* The link button's appearance. It can be one of the following: 'primary', 'secondary', 'ghost', 'outlined'.
|
|
8
8
|
* @default 'primary'
|
|
9
9
|
*/
|
|
10
|
-
variant: 'primary' | 'secondary' | 'ghost';
|
|
10
|
+
variant: 'primary' | 'secondary' | 'ghost' | 'outlined';
|
|
11
11
|
/**
|
|
12
12
|
* The link button size. It can be full size or default size (min-content).
|
|
13
13
|
*/
|
|
@@ -21,6 +21,10 @@ type UnityLinkButtonProps = Omit<AriaLinkProps, 'style' | 'className'> & ButtonB
|
|
|
21
21
|
* The link button's prefix icon. It has to be one of the icons from the Unity Icons package.
|
|
22
22
|
*/
|
|
23
23
|
prefixIcon?: UnityIcon;
|
|
24
|
+
/**
|
|
25
|
+
* The link button's suffix icon. It has to be one of the icons from the Unity Icons package.
|
|
26
|
+
*/
|
|
27
|
+
suffixIcon?: UnityIcon;
|
|
24
28
|
/**
|
|
25
29
|
* The loading state of the link button.
|
|
26
30
|
* @default false
|
|
@@ -42,7 +46,9 @@ type UnionLinkButtonProps = (UnityLinkButtonProps & {
|
|
|
42
46
|
variant: 'secondary';
|
|
43
47
|
} & ButtonOutlined) | (UnityLinkButtonProps & {
|
|
44
48
|
variant: 'ghost';
|
|
45
|
-
} & ButtonGhost)
|
|
49
|
+
} & ButtonGhost) | (UnityLinkButtonProps & {
|
|
50
|
+
variant: 'outlined';
|
|
51
|
+
} & ButtonOutlined);
|
|
46
52
|
export type RawLinkButtonProps = PropsWithChildren<Omit<UnionLinkButtonProps, 'style'>>;
|
|
47
53
|
/**
|
|
48
54
|
* A link that visually looks like a button. Use it when you need navigation semantics with button appearance.
|
|
@@ -1,93 +1,127 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { forwardRef as
|
|
3
|
-
import {
|
|
4
|
-
import { Link as
|
|
5
|
-
import {
|
|
6
|
-
import { Icon as
|
|
1
|
+
import { jsx as s, jsxs as C } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef as E, useMemo as F } from "react";
|
|
3
|
+
import { useUnityTheme as R, uyMerge as n } from "@payfit/unity-themes";
|
|
4
|
+
import { Link as j } from "react-aria-components/Link";
|
|
5
|
+
import { buttonOutlined as f, buttonGhost as z, buttonFilled as h } from "../button/Button.variants.js";
|
|
6
|
+
import { Icon as k } from "../icon/Icon.js";
|
|
7
7
|
import { isExternalUrl as M } from "../link/utils.js";
|
|
8
|
-
import { Spinner as
|
|
9
|
-
const
|
|
8
|
+
import { Spinner as U } from "../spinner/Spinner.js";
|
|
9
|
+
const $ = (r, l) => r ? /* @__PURE__ */ s(U, { size: "small", color: "inherit", label: "Loading..." }) : l ? /* @__PURE__ */ s(
|
|
10
|
+
k,
|
|
11
|
+
{
|
|
12
|
+
src: l,
|
|
13
|
+
size: 20,
|
|
14
|
+
color: "inherit",
|
|
15
|
+
role: "presentation",
|
|
16
|
+
"data-unity-icon": "prefix"
|
|
17
|
+
}
|
|
18
|
+
) : null, v = E(
|
|
10
19
|
({
|
|
11
|
-
variant:
|
|
12
|
-
href:
|
|
13
|
-
children:
|
|
14
|
-
color:
|
|
20
|
+
variant: r,
|
|
21
|
+
href: l,
|
|
22
|
+
children: m,
|
|
23
|
+
color: t = "primary",
|
|
15
24
|
size: p = "default",
|
|
16
|
-
isDisabled:
|
|
17
|
-
isLoading:
|
|
18
|
-
prefixIcon:
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
25
|
+
isDisabled: u = !1,
|
|
26
|
+
isLoading: e = !1,
|
|
27
|
+
prefixIcon: x,
|
|
28
|
+
suffixIcon: y,
|
|
29
|
+
truncateLabelLength: d,
|
|
30
|
+
isExternal: w,
|
|
31
|
+
...i
|
|
32
|
+
}, g) => {
|
|
33
|
+
const b = w ?? M(l), { theme: c } = R(), B = F(() => {
|
|
34
|
+
const o = { size: p, isDisabled: u, isLoading: e };
|
|
35
|
+
let a;
|
|
36
|
+
switch (r) {
|
|
27
37
|
case "primary": {
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
38
|
+
a = n(
|
|
39
|
+
h({
|
|
40
|
+
...o,
|
|
41
|
+
color: t
|
|
42
|
+
})
|
|
43
|
+
);
|
|
33
44
|
break;
|
|
34
45
|
}
|
|
35
46
|
case "secondary": {
|
|
36
|
-
|
|
37
|
-
...
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
47
|
+
c === "rebrand" ? a = n(
|
|
48
|
+
h({ ...o, color: t === "inverted" ? "inverted.low" : "neutral" })
|
|
49
|
+
) : a = n(
|
|
50
|
+
f({
|
|
51
|
+
...o,
|
|
52
|
+
color: t
|
|
53
|
+
})
|
|
54
|
+
);
|
|
41
55
|
break;
|
|
42
56
|
}
|
|
43
57
|
case "ghost": {
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
58
|
+
a = n(
|
|
59
|
+
z({
|
|
60
|
+
...o,
|
|
61
|
+
color: t
|
|
62
|
+
})
|
|
63
|
+
);
|
|
64
|
+
break;
|
|
65
|
+
}
|
|
66
|
+
case "outlined": {
|
|
67
|
+
a = n(
|
|
68
|
+
f({
|
|
69
|
+
...o,
|
|
70
|
+
color: t
|
|
71
|
+
})
|
|
72
|
+
);
|
|
49
73
|
break;
|
|
50
74
|
}
|
|
51
75
|
}
|
|
52
|
-
return
|
|
53
|
-
|
|
76
|
+
return n(
|
|
77
|
+
a,
|
|
54
78
|
"uy:no-underline",
|
|
55
|
-
|
|
56
|
-
|
|
79
|
+
u || e ? `${r === "primary" || r === "secondary" && c === "rebrand" ? "uy:data-[disabled]:bg-surface-neutral-disabled" : "uy:data-[disabled]:bg-transparent"} uy:data-[disabled]:text-content-neutral-disabled uy:data-[disabled]:cursor-not-allowed` : "",
|
|
80
|
+
e ? "uy:data-[disabled]:cursor-progress" : ""
|
|
57
81
|
);
|
|
58
|
-
}, [
|
|
59
|
-
...
|
|
82
|
+
}, [r, t, p, u, e, c]), N = {
|
|
83
|
+
...e && { "data-loading": e }
|
|
60
84
|
};
|
|
61
|
-
return /* @__PURE__ */
|
|
62
|
-
|
|
85
|
+
return /* @__PURE__ */ s(
|
|
86
|
+
j,
|
|
63
87
|
{
|
|
64
88
|
"data-dd-privacy": "allow",
|
|
65
|
-
...
|
|
66
|
-
href:
|
|
67
|
-
ref:
|
|
68
|
-
isDisabled:
|
|
69
|
-
className:
|
|
70
|
-
target:
|
|
71
|
-
rel:
|
|
72
|
-
...
|
|
73
|
-
children: /* @__PURE__ */
|
|
74
|
-
|
|
75
|
-
|
|
89
|
+
...i,
|
|
90
|
+
href: l,
|
|
91
|
+
ref: g,
|
|
92
|
+
isDisabled: u || e,
|
|
93
|
+
className: B,
|
|
94
|
+
target: b ? "_blank" : i.target,
|
|
95
|
+
rel: b && !i.rel ? "noopener noreferrer" : i.rel,
|
|
96
|
+
...N,
|
|
97
|
+
children: /* @__PURE__ */ C("span", { className: "uy:inline-flex uy:gap-50 uy:items-center", children: [
|
|
98
|
+
$(e, x),
|
|
99
|
+
d && d > 0 ? /* @__PURE__ */ s(
|
|
76
100
|
"span",
|
|
77
101
|
{
|
|
78
102
|
style: {
|
|
79
|
-
"--uy-button-label-truncation-length": `${
|
|
103
|
+
"--uy-button-label-truncation-length": `${d}ch`
|
|
80
104
|
},
|
|
81
105
|
className: "uy:truncate uy:min-w-0 uy:w-(--uy-button-label-truncation-length)",
|
|
82
|
-
children:
|
|
106
|
+
children: m
|
|
107
|
+
}
|
|
108
|
+
) : m,
|
|
109
|
+
y && /* @__PURE__ */ s(
|
|
110
|
+
k,
|
|
111
|
+
{
|
|
112
|
+
src: y,
|
|
113
|
+
size: 20,
|
|
114
|
+
color: "inherit",
|
|
115
|
+
role: "presentation",
|
|
116
|
+
"data-unity-icon": "suffix"
|
|
83
117
|
}
|
|
84
|
-
)
|
|
118
|
+
)
|
|
85
119
|
] })
|
|
86
120
|
}
|
|
87
121
|
);
|
|
88
122
|
}
|
|
89
123
|
);
|
|
90
|
-
|
|
124
|
+
v.displayName = "RawLinkButton";
|
|
91
125
|
export {
|
|
92
|
-
|
|
126
|
+
v as RawLinkButton
|
|
93
127
|
};
|
|
@@ -5,9 +5,9 @@ export declare const listViewItem: import('tailwind-variants').TVReturnType<{
|
|
|
5
5
|
[key: string]: import('tailwind-merge').ClassNameValue | {
|
|
6
6
|
content?: import('tailwind-merge').ClassNameValue;
|
|
7
7
|
prefix?: import('tailwind-merge').ClassNameValue;
|
|
8
|
+
suffix?: import('tailwind-merge').ClassNameValue;
|
|
8
9
|
root?: import('tailwind-merge').ClassNameValue;
|
|
9
10
|
wrapper?: import('tailwind-merge').ClassNameValue;
|
|
10
|
-
suffix?: import('tailwind-merge').ClassNameValue;
|
|
11
11
|
};
|
|
12
12
|
};
|
|
13
13
|
} | {
|
|
@@ -15,9 +15,9 @@ export declare const listViewItem: import('tailwind-variants').TVReturnType<{
|
|
|
15
15
|
[x: string]: import('tailwind-merge').ClassNameValue | {
|
|
16
16
|
content?: import('tailwind-merge').ClassNameValue;
|
|
17
17
|
prefix?: import('tailwind-merge').ClassNameValue;
|
|
18
|
+
suffix?: import('tailwind-merge').ClassNameValue;
|
|
18
19
|
root?: import('tailwind-merge').ClassNameValue;
|
|
19
20
|
wrapper?: import('tailwind-merge').ClassNameValue;
|
|
20
|
-
suffix?: import('tailwind-merge').ClassNameValue;
|
|
21
21
|
};
|
|
22
22
|
};
|
|
23
23
|
} | {}, {
|
|
@@ -31,9 +31,9 @@ export declare const listViewItem: import('tailwind-variants').TVReturnType<{
|
|
|
31
31
|
[key: string]: import('tailwind-merge').ClassNameValue | {
|
|
32
32
|
content?: import('tailwind-merge').ClassNameValue;
|
|
33
33
|
prefix?: import('tailwind-merge').ClassNameValue;
|
|
34
|
+
suffix?: import('tailwind-merge').ClassNameValue;
|
|
34
35
|
root?: import('tailwind-merge').ClassNameValue;
|
|
35
36
|
wrapper?: import('tailwind-merge').ClassNameValue;
|
|
36
|
-
suffix?: import('tailwind-merge').ClassNameValue;
|
|
37
37
|
};
|
|
38
38
|
};
|
|
39
39
|
} | {}, {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@payfit/unity-components",
|
|
3
|
-
"version": "2.28.
|
|
3
|
+
"version": "2.28.3",
|
|
4
4
|
"module": "./dist/esm/index.js",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
"@hookform/devtools": "4.4.0",
|
|
43
43
|
"@hookform/resolvers": "5.2.1",
|
|
44
44
|
"@internationalized/date": "3.12.1",
|
|
45
|
-
"@payfit/unity-illustrations": "2.28.
|
|
45
|
+
"@payfit/unity-illustrations": "2.28.3",
|
|
46
46
|
"@radix-ui/react-avatar": "1.1.11",
|
|
47
47
|
"@radix-ui/react-slot": "1.2.4",
|
|
48
48
|
"@react-aria/interactions": "3.28.0",
|
|
@@ -74,8 +74,8 @@
|
|
|
74
74
|
},
|
|
75
75
|
"peerDependencies": {
|
|
76
76
|
"@hookform/devtools": "^4",
|
|
77
|
-
"@payfit/unity-icons": "2.28.
|
|
78
|
-
"@payfit/unity-themes": "2.28.
|
|
77
|
+
"@payfit/unity-icons": "2.28.3",
|
|
78
|
+
"@payfit/unity-themes": "2.28.3",
|
|
79
79
|
"@storybook/react-vite": "^10.3.2",
|
|
80
80
|
"@tanstack/react-query": "^5",
|
|
81
81
|
"@tanstack/react-router": "^1.131",
|
|
@@ -89,9 +89,9 @@
|
|
|
89
89
|
"@figma/code-connect": "1.4.3",
|
|
90
90
|
"@hookform/devtools": "4.4.0",
|
|
91
91
|
"@internationalized/date": "3.12.1",
|
|
92
|
-
"@payfit/unity-icons": "2.28.
|
|
93
|
-
"@payfit/unity-illustrations": "2.28.
|
|
94
|
-
"@payfit/unity-themes": "2.28.
|
|
92
|
+
"@payfit/unity-icons": "2.28.3",
|
|
93
|
+
"@payfit/unity-illustrations": "2.28.3",
|
|
94
|
+
"@payfit/unity-themes": "2.28.3",
|
|
95
95
|
"@storybook/addon-a11y": "10.3.5",
|
|
96
96
|
"@storybook/addon-designs": "11.1.3",
|
|
97
97
|
"@storybook/addon-docs": "10.3.5",
|
|
@@ -130,9 +130,9 @@
|
|
|
130
130
|
"vite-plugin-node-polyfills": "0.24.0",
|
|
131
131
|
"vitest": "4.1.0",
|
|
132
132
|
"@payfit/code-pushup-tools": "0.0.0-use.local",
|
|
133
|
+
"@payfit/hr-app-eslint": "0.0.0-use.local",
|
|
133
134
|
"@payfit/hr-apps-tsconfigs": "0.0.0-use.local",
|
|
134
135
|
"@payfit/storybook-addon-console-errors": "0.0.0-use.local",
|
|
135
|
-
"@payfit/hr-app-eslint": "0.0.0-use.local",
|
|
136
136
|
"@payfit/storybook-config": "0.0.0-use.local",
|
|
137
137
|
"@payfit/vite-configs": "0.0.0-use.local"
|
|
138
138
|
},
|