@payfit/unity-components 2.28.1 → 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.
Files changed (24) hide show
  1. package/dist/esm/components/alert/figma/Alert.figma.d.ts +6 -6
  2. package/dist/esm/components/badge/figma/Badge.figma.d.ts +9 -8
  3. package/dist/esm/components/breadcrumbs/figma/Breadcrumbs.figma.d.ts +6 -6
  4. package/dist/esm/components/button/Button.d.ts +16 -5
  5. package/dist/esm/components/button/Button.js +78 -49
  6. package/dist/esm/components/button/Button.variants.d.ts +3 -1
  7. package/dist/esm/components/button/Button.variants.js +57 -39
  8. package/dist/esm/components/button/figma/Button.figma.d.ts +6 -6
  9. package/dist/esm/components/card/figma/Card.figma.d.ts +6 -6
  10. package/dist/esm/components/floating-action-bar/figma/FloatingActionBar.figma.d.ts +6 -6
  11. package/dist/esm/components/icon-button/figma/CircularIconButton.figma.d.ts +6 -6
  12. package/dist/esm/components/icon-button/figma/IconButton.figma.d.ts +6 -6
  13. package/dist/esm/components/link/figma/Link.figma.d.ts +6 -6
  14. package/dist/esm/components/link-button/RawLinkButton.d.ts +9 -3
  15. package/dist/esm/components/link-button/RawLinkButton.js +96 -62
  16. package/dist/esm/components/list-view/parts/RawListViewItem.d.ts +3 -3
  17. package/dist/esm/components/payfit-brand/figma/PayFitBrand.figma.d.ts +6 -6
  18. package/dist/esm/components/pill/figma/Pill.figma.d.ts +6 -6
  19. package/dist/esm/components/spinner/figma/Spinner.figma.d.ts +6 -6
  20. package/dist/esm/components/tabs/figma/Tabs.figma.d.ts +6 -5
  21. package/dist/esm/components/tooltip/figma/Tooltip.figma.d.ts +6 -6
  22. package/dist/esm/integrations/tanstack-router/components/breadcrumbs/figma/Breadcrumbs.figma.d.ts +6 -6
  23. package/dist/esm/integrations/tanstack-router/components/link/figma/Link.figma.d.ts +6 -6
  24. package/package.json +8 -8
package/dist/esm/components/alert/figma/Alert.figma.d.ts CHANGED
@@ -1,7 +1,7 @@
1
- declare namespace _default {
2
- export { code as example };
3
- export let imports: string[];
4
- export let id: string;
5
- }
1
+ import { default as figma } from 'figma';
2
+ declare const _default: {
3
+ example: figma.TemplateStringResult;
4
+ imports: string[];
5
+ id: string;
6
+ };
6
7
  export default _default;
7
- declare const code: any;
package/dist/esm/components/badge/figma/Badge.figma.d.ts CHANGED
@@ -1,9 +1,10 @@
1
- declare namespace _default {
2
- let example: any;
3
- let imports: string[];
4
- let id: string;
5
- namespace metadata {
6
- let nestable: boolean;
7
- }
8
- }
1
+ import { default as figma } from 'figma';
2
+ declare const _default: {
3
+ example: figma.TemplateStringResult;
4
+ imports: string[];
5
+ id: string;
6
+ metadata: {
7
+ nestable: boolean;
8
+ };
9
+ };
9
10
  export default _default;
package/dist/esm/components/breadcrumbs/figma/Breadcrumbs.figma.d.ts CHANGED
@@ -1,7 +1,7 @@
1
- declare namespace _default {
2
- export { code as example };
3
- export let imports: string[];
4
- export let id: string;
5
- }
1
+ import { default as figma } from 'figma';
2
+ declare const _default: {
3
+ example: figma.TemplateStringResult;
4
+ imports: string[];
5
+ id: string;
6
+ };
6
7
  export default _default;
7
- declare const code: any;
package/dist/esm/components/button/Button.d.ts CHANGED
@@ -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.
package/dist/esm/components/button/Button.js CHANGED
@@ -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
  };
package/dist/esm/components/button/Button.variants.d.ts CHANGED
@@ -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;
package/dist/esm/components/button/Button.variants.js CHANGED
@@ -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
  };
package/dist/esm/components/button/figma/Button.figma.d.ts CHANGED
@@ -1,7 +1,7 @@
1
- declare namespace _default {
2
- export { code as example };
3
- export let imports: string[];
4
- export let id: string;
5
- }
1
+ import { default as figma } from 'figma';
2
+ declare const _default: {
3
+ example: figma.TemplateStringResult;
4
+ imports: string[];
5
+ id: string;
6
+ };
6
7
  export default _default;
7
- declare const code: any;
package/dist/esm/components/card/figma/Card.figma.d.ts CHANGED
@@ -1,7 +1,7 @@
1
- declare namespace _default {
2
- export { code as example };
3
- export let imports: string[];
4
- export let id: string;
5
- }
1
+ import { default as figma } from 'figma';
2
+ declare const _default: {
3
+ example: figma.TemplateStringResult;
4
+ imports: string[];
5
+ id: string;
6
+ };
6
7
  export default _default;
7
- declare const code: any;
package/dist/esm/components/floating-action-bar/figma/FloatingActionBar.figma.d.ts CHANGED
@@ -1,7 +1,7 @@
1
- declare namespace _default {
2
- export { code as example };
3
- export let imports: string[];
4
- export let id: string;
5
- }
1
+ import { default as figma } from 'figma';
2
+ declare const _default: {
3
+ example: figma.TemplateStringResult;
4
+ imports: string[];
5
+ id: string;
6
+ };
6
7
  export default _default;
7
- declare const code: any;
package/dist/esm/components/icon-button/figma/CircularIconButton.figma.d.ts CHANGED
@@ -1,7 +1,7 @@
1
- declare namespace _default {
2
- export { code as example };
3
- export let imports: string[];
4
- export let id: string;
5
- }
1
+ import { default as figma } from 'figma';
2
+ declare const _default: {
3
+ example: figma.TemplateStringResult;
4
+ imports: string[];
5
+ id: string;
6
+ };
6
7
  export default _default;
7
- declare const code: any;
package/dist/esm/components/icon-button/figma/IconButton.figma.d.ts CHANGED
@@ -1,7 +1,7 @@
1
- declare namespace _default {
2
- export { code as example };
3
- export let imports: string[];
4
- export let id: string;
5
- }
1
+ import { default as figma } from 'figma';
2
+ declare const _default: {
3
+ example: figma.TemplateStringResult;
4
+ imports: string[];
5
+ id: string;
6
+ };
6
7
  export default _default;
7
- declare const code: any;
package/dist/esm/components/link/figma/Link.figma.d.ts CHANGED
@@ -1,7 +1,7 @@
1
- declare namespace _default {
2
- export { code as example };
3
- export let imports: string[];
4
- export let id: string;
5
- }
1
+ import { default as figma } from 'figma';
2
+ declare const _default: {
3
+ example: figma.TemplateStringResult;
4
+ imports: string[];
5
+ id: string;
6
+ };
6
7
  export default _default;
7
- declare const code: any;
package/dist/esm/components/link-button/RawLinkButton.d.ts CHANGED
@@ -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.
package/dist/esm/components/link-button/RawLinkButton.js CHANGED
@@ -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
  };
package/dist/esm/components/list-view/parts/RawListViewItem.d.ts CHANGED
@@ -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/dist/esm/components/payfit-brand/figma/PayFitBrand.figma.d.ts CHANGED
@@ -1,7 +1,7 @@
1
- declare namespace _default {
2
- export { code as example };
3
- export let imports: string[];
4
- export let id: string;
5
- }
1
+ import { default as figma } from 'figma';
2
+ declare const _default: {
3
+ example: figma.TemplateStringResult;
4
+ imports: string[];
5
+ id: string;
6
+ };
6
7
  export default _default;
7
- declare const code: any;
package/dist/esm/components/pill/figma/Pill.figma.d.ts CHANGED
@@ -1,7 +1,7 @@
1
- declare namespace _default {
2
- export { code as example };
3
- export let imports: string[];
4
- export let id: string;
5
- }
1
+ import { default as figma } from 'figma';
2
+ declare const _default: {
3
+ example: figma.TemplateStringResult;
4
+ imports: string[];
5
+ id: string;
6
+ };
6
7
  export default _default;
7
- declare const code: any;
package/dist/esm/components/spinner/figma/Spinner.figma.d.ts CHANGED
@@ -1,7 +1,7 @@
1
- declare namespace _default {
2
- export { code as example };
3
- export let imports: string[];
4
- export let id: string;
5
- }
1
+ import { default as figma } from 'figma';
2
+ declare const _default: {
3
+ example: figma.TemplateStringResult;
4
+ imports: string[];
5
+ id: string;
6
+ };
6
7
  export default _default;
7
- declare const code: any;
package/dist/esm/components/tabs/figma/Tabs.figma.d.ts CHANGED
@@ -1,6 +1,7 @@
1
- declare namespace _default {
2
- let example: any;
3
- let imports: string[];
4
- let id: string;
5
- }
1
+ import { default as figma } from 'figma';
2
+ declare const _default: {
3
+ example: figma.TemplateStringResult;
4
+ imports: string[];
5
+ id: string;
6
+ };
6
7
  export default _default;
package/dist/esm/components/tooltip/figma/Tooltip.figma.d.ts CHANGED
@@ -1,7 +1,7 @@
1
- declare namespace _default {
2
- export { code as example };
3
- export let imports: string[];
4
- export let id: string;
5
- }
1
+ import { default as figma } from 'figma';
2
+ declare const _default: {
3
+ example: figma.TemplateStringResult;
4
+ imports: string[];
5
+ id: string;
6
+ };
6
7
  export default _default;
7
- declare const code: any;
package/dist/esm/integrations/tanstack-router/components/breadcrumbs/figma/Breadcrumbs.figma.d.ts CHANGED
@@ -1,7 +1,7 @@
1
- declare namespace _default {
2
- export { code as example };
3
- export let imports: string[];
4
- export let id: string;
5
- }
1
+ import { default as figma } from 'figma';
2
+ declare const _default: {
3
+ example: figma.TemplateStringResult;
4
+ imports: string[];
5
+ id: string;
6
+ };
6
7
  export default _default;
7
- declare const code: any;
package/dist/esm/integrations/tanstack-router/components/link/figma/Link.figma.d.ts CHANGED
@@ -1,7 +1,7 @@
1
- declare namespace _default {
2
- export { code as example };
3
- export let imports: string[];
4
- export let id: string;
5
- }
1
+ import { default as figma } from 'figma';
2
+ declare const _default: {
3
+ example: figma.TemplateStringResult;
4
+ imports: string[];
5
+ id: string;
6
+ };
6
7
  export default _default;
7
- declare const code: any;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@payfit/unity-components",
3
- "version": "2.28.1",
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.1",
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.1",
78
- "@payfit/unity-themes": "2.28.1",
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",
@@ -86,12 +86,12 @@
86
86
  "zod": "^3 || ^4"
87
87
  },
88
88
  "devDependencies": {
89
- "@figma/code-connect": "1.4.1",
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.1",
93
- "@payfit/unity-illustrations": "2.28.1",
94
- "@payfit/unity-themes": "2.28.1",
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",