@payfit/unity-components 2.28.2 → 2.28.4

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.
@@ -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 loading state of the button.
27
- * @default false
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 s, jsxs as h } from "react/jsx-runtime";
2
- import { forwardRef as b, useMemo as w } from "react";
3
- import { uyMerge as m } from "@payfit/unity-themes";
4
- import { Button as x } from "react-aria-components/Button";
5
- import { Icon as B } from "../icon/Icon.js";
6
- import { Spinner as N } from "../spinner/Spinner.js";
7
- import { buttonGhost as v, buttonOutlined as j, buttonFilled as I } from "./Button.variants.js";
8
- const M = (e, r) => e ? /* @__PURE__ */ s(N, { size: "small", color: "inherit", label: "Loading..." }) : r ? /* @__PURE__ */ s(B, { src: r, size: 20, color: "inherit", role: "presentation" }) : null, $ = b(
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: e,
19
+ variant: s,
11
20
  children: r,
12
- color: o = "primary",
13
- size: c = "default",
14
- isDisabled: a = !1,
21
+ color: e = "primary",
22
+ size: m = "default",
23
+ isDisabled: i = !1,
15
24
  isLoading: t = !1,
16
- prefixIcon: i,
17
- truncateLabelLength: u,
18
- ...p
19
- }, y) => {
20
- const f = w(() => {
21
- const l = { size: c, isDisabled: a, isLoading: t };
22
- switch (e) {
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 n = {
25
- ...l,
26
- color: o
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 m(j(n));
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 n = {
39
- ...l,
40
- color: o
50
+ const u = {
51
+ ...n,
52
+ color: e
41
53
  };
42
- return m(v(n));
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, o, c, a, t]), d = {
64
+ }, [s, e, m, i, t, p]), v = {
46
65
  ...t && { "data-loading": t }
47
66
  };
48
- return /* @__PURE__ */ s(
49
- x,
67
+ return /* @__PURE__ */ a(
68
+ C,
50
69
  {
51
70
  "data-dd-privacy": "allow",
52
- ...p,
53
- ref: y,
54
- isDisabled: a || t,
71
+ ...b,
72
+ ref: w,
73
+ isDisabled: i || t,
55
74
  isPending: t,
56
- className: f,
57
- ...d,
58
- children: /* @__PURE__ */ h("span", { className: "uy:inline-flex uy:gap-50 uy:items-center", children: [
59
- M(t, i),
60
- u && u > 0 ? /* @__PURE__ */ s(
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": `${u}ch`
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
- $.displayName = "Button";
104
+ F.displayName = "Button";
76
105
  export {
77
- $ as Button
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:px-200 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:data-[focus-visible]:outline-2 uy:data-[focus-visible]:outline-solid uy:data-[focus-visible]:outline-offset-2 uy:data-[focus-visible]:outline-utility-focus-ring"
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
- }), n = e({
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:bg-transparent uy:text-content-neutral-enabled uy:border-border-neutral-high-enabled",
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
- "uy:active:text-content-neutral-active uy:active:border-border-neutral-high-pressed",
75
- "uy:data-[pressed]:text-content-neutral-pressed uy:data-[pressed]:border-border-neutral-high-pressed",
76
- "uy:data-[focus-visible]:border-border-neutral-high-focus uy:data-[focus-visible]:text-content-neutral-focus"
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:bg-transparent uy:text-content-inverted uy:border-border-inverted-enabled",
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
- }), u = e({
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
- "uy:enabled:hover:bg-surface-primary-lowest-hover uy:enabled:hover:text-content-primary-hover",
98
- "uy:enabled:active:bg-surface-primary-lowest-active uy:enabled:active:text-content-primary-active",
99
- "uy:enabled:data-[pressed=true]:bg-surface-primary-lowest-pressed uy:enabled:data-[pressed=true]:text-content-primary-pressed",
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
- "uy:enabled:hover:bg-surface-warning-lowest-hover uy:enabled:hover:text-content-warning-hover",
105
- "uy:enabled:active:bg-surface-warning-lowest-active uy:enabled:active:text-content-warning-active",
106
- "uy:enabled:data-[pressed=true]:bg-surface-warning-lowest-pressed uy:enabled:data-[pressed=true]:text-content-warning-pressed",
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
- "uy:enabled:hover:bg-surface-danger-lowest-hover uy:enabled:hover:text-content-danger-hover",
112
- "uy:enabled:active:bg-surface-danger-lowest-active uy:enabled:active:text-content-danger-active",
113
- "uy:enabled:data-[pressed=true]:bg-surface-danger-lowest-pressed uy:enabled:data-[pressed=true]:text-content-danger-pressed",
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
- "uy:enabled:hover:bg-surface-neutral-hover uy:enabled:hover:text-content-neutral-hover",
119
- "uy:enabled:active:bg-surface-neutral-active uy:enabled:active:text-content-neutral-active",
120
- "uy:enabled:data-[pressed=true]:bg-surface-neutral-pressed uy:enabled:data-[pressed=true]:text-content-neutral-pressed",
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
- "uy:enabled:hover:bg-surface-neutral-lowest-hover uy:enabled:hover:text-content-neutral-hover",
126
- "uy:enabled:active:bg-surface-neutral-lowest-active uy:enabled:active:text-content-neutral-active",
127
- "uy:enabled:data-[pressed=true]:bg-surface-neutral-lowest-pressed uy:enabled:data-[pressed=true]:text-content-neutral-pressed",
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
- "uy:enabled:hover:bg-surface-inverted-hover uy:enabled:hover:text-content-inverted-hover",
133
- "uy:enabled:active:bg-surface-inverted-active uy:enabled:active:text-content-inverted-active",
134
- "uy:enabled:data-[pressed=true]:bg-surface-inverted-pressed uy:enabled:data-[pressed=true]:text-content-inverted-pressed",
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
- u as buttonGhost,
163
- n as buttonOutlined
180
+ n as buttonGhost,
181
+ u as buttonOutlined
164
182
  };
@@ -28,10 +28,10 @@ export declare const link: import('tailwind-variants').TVReturnType<{
28
28
  };
29
29
  color: {
30
30
  primary: {
31
- base: string;
31
+ base: string[];
32
32
  };
33
33
  secondary: {
34
- base: string;
34
+ base: string[];
35
35
  };
36
36
  inherit: {
37
37
  base: string;
@@ -83,10 +83,10 @@ export declare const link: import('tailwind-variants').TVReturnType<{
83
83
  };
84
84
  color: {
85
85
  primary: {
86
- base: string;
86
+ base: string[];
87
87
  };
88
88
  secondary: {
89
- base: string;
89
+ base: string[];
90
90
  };
91
91
  inherit: {
92
92
  base: string;
@@ -138,10 +138,10 @@ export declare const link: import('tailwind-variants').TVReturnType<{
138
138
  };
139
139
  color: {
140
140
  primary: {
141
- base: string;
141
+ base: string[];
142
142
  };
143
143
  secondary: {
144
- base: string;
144
+ base: string[];
145
145
  };
146
146
  inherit: {
147
147
  base: string;
@@ -1,4 +1,4 @@
1
- import { jsxs as h, jsx as w } from "react/jsx-runtime";
1
+ import { jsxs as g, jsx as w } from "react/jsx-runtime";
2
2
  import { forwardRef as k } from "react";
3
3
  import { IconSprite as D } from "@payfit/unity-icons";
4
4
  import { uyTv as z } from "@payfit/unity-themes";
@@ -33,10 +33,20 @@ const N = z({
33
33
  },
34
34
  color: {
35
35
  primary: {
36
- base: "uy:text-content-primary-enabled uy:hover:text-content-primary-hover uy:active:text-content-primary-active uy:data-[pressed]:text-content-primary-active uy:data-[current]:text-content-primary-active uy:aria-[current]:text-content-primary-active"
36
+ base: [
37
+ //legacy theme
38
+ "uy:text-content-primary-enabled uy:hover:text-content-primary-hover uy:active:text-content-primary-active uy:data-[pressed]:text-content-primary-active uy:data-[current]:text-content-primary-active uy:aria-[current]:text-content-primary-active",
39
+ //rebrand theme
40
+ "uy:theme-rebrand:text-content-neutral-enabled uy:theme-rebrand:hover:text-content-neutral-hover uy:theme-rebrand:active:text-content-neutral-active uy:theme-rebrand:data-[pressed]:text-content-neutral-pressed uy:theme-rebrand:data-[current]:text-content-neutral-active uy:theme-rebrand:aria-[current]:text-content-neutral-active"
41
+ ]
37
42
  },
38
43
  secondary: {
39
- base: "uy:text-content-neutral-enabled uy:hover:text-content-neutral-hover uy:active:text-content-neutral-active uy:data-[pressed]:text-content-neutral-pressed uy:data-[current]:text-content-neutral-active uy:aria-[current]:text-content-neutral-active"
44
+ base: [
45
+ //legacy
46
+ "uy:text-content-neutral-enabled uy:hover:text-content-neutral-hover uy:active:text-content-neutral-active uy:data-[pressed]:text-content-neutral-pressed uy:data-[current]:text-content-neutral-active uy:aria-[current]:text-content-neutral-active",
47
+ //rebrand
48
+ "uy:theme-rebrand:text-content-neutral-lowest-enabled uy:theme-rebrand:hover:text-content-neutral-lowest-hover uy:theme-rebrand:active:text-content-neutral-lowest-active uy:theme-rebrand:data-[pressed]:text-content-neutral-lowest-pressed uy:theme-rebrand:data-[current]:text-content-neutral-lowest-active uy:theme-rebrand:aria-[current]:text-content-neutral-lowest-active"
49
+ ]
40
50
  },
41
51
  inherit: { base: "uy:text-(color:inherit)" }
42
52
  },
@@ -53,7 +63,14 @@ const N = z({
53
63
  {
54
64
  color: "primary",
55
65
  isDisabled: !0,
56
- class: { base: "uy:data-[disabled]:text-content-primary-disabled" }
66
+ class: {
67
+ base: [
68
+ // legacy
69
+ "uy:data-[disabled]:text-content-primary-disabled",
70
+ // rebrand
71
+ "uy:theme-rebrand:data-[disabled]:text-content-neutral-disabled"
72
+ ]
73
+ }
57
74
  },
58
75
  {
59
76
  color: "secondary",
@@ -85,49 +102,49 @@ const N = z({
85
102
  }
86
103
  }), R = k(
87
104
  ({
88
- href: r,
89
- children: u,
90
- variant: y = "inline",
91
- color: c = "primary",
105
+ href: a,
106
+ children: l,
107
+ variant: c = "inline",
108
+ color: y = "primary",
92
109
  isDisabled: s = !1,
93
110
  isExact: d = !1,
94
- isCurrent: p,
95
- isExternal: b,
96
- maxCharactersTruncation: i,
111
+ isCurrent: b,
112
+ isExternal: m,
113
+ maxCharactersTruncation: n,
97
114
  maxWidthTruncation: e,
98
- size: m = "inherit",
115
+ size: p = "inherit",
99
116
  ...t
100
117
  }, v) => {
101
- const n = E(), a = b ?? L(r), o = !a && n ? n.isActive(r.toString(), d) : p, { base: f, icon: x } = N({
102
- variant: y,
103
- color: c,
118
+ const i = E(), r = m ?? L(a), o = !r && i ? i.isActive(a.toString(), d) : b, { base: x, icon: h } = N({
119
+ variant: c,
120
+ color: y,
104
121
  isDisabled: s,
105
- size: m,
106
- isTruncated: !!i || !!e
107
- }), l = i !== void 0 ? `${i}ch` : e !== void 0 ? typeof e == "number" ? `${e}px` : e : void 0, g = n && {
122
+ size: p,
123
+ isTruncated: !!n || !!e
124
+ }), u = n !== void 0 ? `${n}ch` : e !== void 0 ? typeof e == "number" ? `${e}px` : e : void 0, f = i && {
108
125
  ...o !== void 0 && {
109
126
  "data-current": o,
110
127
  "aria-current": o ? "page" : void 0
111
128
  }
112
129
  };
113
- return /* @__PURE__ */ h(
130
+ return /* @__PURE__ */ g(
114
131
  A,
115
132
  {
116
133
  "data-dd-privacy": "allow",
117
134
  ...t,
118
- href: r,
135
+ href: a,
119
136
  ref: v,
120
- style: l ? {
121
- "--uy-link-max-w": l
137
+ style: u ? {
138
+ "--uy-link-max-w": u
122
139
  } : {},
123
- className: f(),
140
+ className: x(),
124
141
  isDisabled: s,
125
- target: a ? "_blank" : t.target,
126
- rel: a && !t.rel ? "noopener noreferrer" : t.rel,
127
- ...g,
142
+ target: r ? "_blank" : t.target,
143
+ rel: r && !t.rel ? "noopener noreferrer" : t.rel,
144
+ ...f,
128
145
  children: [
129
- u,
130
- a && /* @__PURE__ */ w(
146
+ l,
147
+ r && /* @__PURE__ */ w(
131
148
  D,
132
149
  {
133
150
  src: "ArrowSquareOutOutlined",
@@ -135,7 +152,7 @@ const N = z({
135
152
  width: "1.25em",
136
153
  height: "1.25em",
137
154
  role: "presentation",
138
- className: x()
155
+ className: h()
139
156
  }
140
157
  )
141
158
  ]
@@ -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 u, jsxs as h } from "react/jsx-runtime";
2
- import { forwardRef as v, useMemo as N } from "react";
3
- import { uyMerge as m, cn as E } from "@payfit/unity-themes";
4
- import { Link as R } from "react-aria-components/Link";
5
- import { buttonGhost as g, buttonOutlined as j, buttonFilled as B } from "../button/Button.variants.js";
6
- import { Icon as I } from "../icon/Icon.js";
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 z } from "../spinner/Spinner.js";
9
- const A = (a, r) => a ? /* @__PURE__ */ u(z, { size: "small", color: "inherit", label: "Loading..." }) : r ? /* @__PURE__ */ u(I, { src: r, size: 20, color: "inherit", role: "presentation" }) : null, C = v(
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: a,
12
- href: r,
13
- children: d,
14
- color: n = "primary",
20
+ variant: r,
21
+ href: l,
22
+ children: m,
23
+ color: t = "primary",
15
24
  size: p = "default",
16
- isDisabled: l = !1,
17
- isLoading: t = !1,
18
- prefixIcon: b,
19
- truncateLabelLength: i,
20
- isExternal: f,
21
- ...o
22
- }, x) => {
23
- const y = f ?? M(r), w = N(() => {
24
- const c = { size: p, isDisabled: l, isLoading: t };
25
- let s;
26
- switch (a) {
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
- const e = {
29
- ...c,
30
- color: n
31
- };
32
- s = m(B(e));
38
+ a = n(
39
+ h({
40
+ ...o,
41
+ color: t
42
+ })
43
+ );
33
44
  break;
34
45
  }
35
46
  case "secondary": {
36
- const e = {
37
- ...c,
38
- color: n
39
- };
40
- s = m(j(e));
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
- const e = {
45
- ...c,
46
- color: n
47
- };
48
- s = m(g(e));
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 E(
53
- s,
76
+ return n(
77
+ a,
54
78
  "uy:no-underline",
55
- l || t ? "uy:data-[disabled]:bg-surface-neutral-disabled uy:data-[disabled]:text-content-neutral-disabled uy:data-[disabled]:cursor-not-allowed" : "",
56
- t ? "uy:data-[disabled]:cursor-progress" : ""
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
- }, [a, n, p, l, t]), k = {
59
- ...t && { "data-loading": t }
82
+ }, [r, t, p, u, e, c]), N = {
83
+ ...e && { "data-loading": e }
60
84
  };
61
- return /* @__PURE__ */ u(
62
- R,
85
+ return /* @__PURE__ */ s(
86
+ j,
63
87
  {
64
88
  "data-dd-privacy": "allow",
65
- ...o,
66
- href: r,
67
- ref: x,
68
- isDisabled: l || t,
69
- className: w,
70
- target: y ? "_blank" : o.target,
71
- rel: y && !o.rel ? "noopener noreferrer" : o.rel,
72
- ...k,
73
- children: /* @__PURE__ */ h("span", { className: "uy:inline-flex uy:gap-50 uy:items-center", children: [
74
- A(t, b),
75
- i && i > 0 ? /* @__PURE__ */ u(
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": `${i}ch`
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: d
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
- ) : d
118
+ )
85
119
  ] })
86
120
  }
87
121
  );
88
122
  }
89
123
  );
90
- C.displayName = "RawLinkButton";
124
+ v.displayName = "RawLinkButton";
91
125
  export {
92
- C as RawLinkButton
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.2",
3
+ "version": "2.28.4",
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.2",
45
+ "@payfit/unity-illustrations": "2.28.4",
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.2",
78
- "@payfit/unity-themes": "2.28.2",
77
+ "@payfit/unity-icons": "2.28.4",
78
+ "@payfit/unity-themes": "2.28.4",
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.2",
93
- "@payfit/unity-illustrations": "2.28.2",
94
- "@payfit/unity-themes": "2.28.2",
92
+ "@payfit/unity-icons": "2.28.4",
93
+ "@payfit/unity-illustrations": "2.28.4",
94
+ "@payfit/unity-themes": "2.28.4",
95
95
  "@storybook/addon-a11y": "10.3.5",
96
96
  "@storybook/addon-designs": "11.1.3",
97
97
  "@storybook/addon-docs": "10.3.5",
@@ -131,10 +131,10 @@
131
131
  "vitest": "4.1.0",
132
132
  "@payfit/code-pushup-tools": "0.0.0-use.local",
133
133
  "@payfit/hr-apps-tsconfigs": "0.0.0-use.local",
134
- "@payfit/storybook-addon-console-errors": "0.0.0-use.local",
135
134
  "@payfit/hr-app-eslint": "0.0.0-use.local",
136
135
  "@payfit/storybook-config": "0.0.0-use.local",
137
- "@payfit/vite-configs": "0.0.0-use.local"
136
+ "@payfit/vite-configs": "0.0.0-use.local",
137
+ "@payfit/storybook-addon-console-errors": "0.0.0-use.local"
138
138
  },
139
139
  "peerDependenciesMeta": {
140
140
  "@hookform/devtools": {