@payfit/unity-components 2.28.3 → 2.29.0

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 (6) hide show
  1. package/dist/esm/components/avatar/Avatar.variants.js +1 -1
  2. package/dist/esm/components/avatar/parts/AvatarFallback.d.ts +3 -3
  3. package/dist/esm/components/avatar/parts/AvatarFallback.js +25 -25
  4. package/dist/esm/components/link/RawLink.d.ts +6 -6
  5. package/dist/esm/components/link/RawLink.js +46 -29
  6. package/package.json +7 -7
package/dist/esm/components/avatar/Avatar.variants.js CHANGED
@@ -6,7 +6,7 @@ const t = e({
6
6
  sm: "uy:size-300",
7
7
  md: "uy:size-400",
8
8
  lg: "uy:size-500",
9
- xl: "uy:size-1000"
9
+ xl: "uy:size-[56px]"
10
10
  },
11
11
  variant: {
12
12
  circle: "uy:rounded-circle",
package/dist/esm/components/avatar/parts/AvatarFallback.d.ts CHANGED
@@ -7,11 +7,11 @@ declare const avatarPlaceholder: import('tailwind-variants').TVReturnType<{
7
7
  background: string;
8
8
  foreground: string;
9
9
  };
10
- sunglow: {
10
+ yellow: {
11
11
  background: string;
12
12
  foreground: string;
13
13
  };
14
- peach: {
14
+ purple: {
15
15
  background: string;
16
16
  foreground: string;
17
17
  };
@@ -133,7 +133,7 @@ type AvatarFallbackPlaceholderProps = AvatarFallbackBaseProps & {
133
133
  /** The variant of the fallback, should be 'placeholder' */
134
134
  variant: 'placeholder';
135
135
  /**
136
- * The color variant for the placeholder. Can be one of: `blue`, `peach`, `sunglow`. Only available when variant is set to `placeholder`
136
+ * The color variant for the placeholder. Can be one of: `blue`, `purple`, `yellow`. Only available when variant is set to `placeholder`
137
137
  * @default 'blue'
138
138
  */
139
139
  color?: VariantProps<typeof avatarPlaceholder>['color'];
package/dist/esm/components/avatar/parts/AvatarFallback.js CHANGED
@@ -3,10 +3,10 @@ import * as m from "react";
3
3
  import { uyTv as n, uyMerge as b } from "@payfit/unity-themes";
4
4
  import * as e from "@radix-ui/react-avatar";
5
5
  import { useAvatarContext as f } from "../Avatar.context.js";
6
- import { avatarBase as s } from "../Avatar.variants.js";
7
- import { getInitials as h } from "../utils.js";
8
- const v = n({
9
- extend: s,
6
+ import { avatarBase as u } from "../Avatar.variants.js";
7
+ import { getInitials as v } from "../utils.js";
8
+ const h = n({
9
+ extend: u,
10
10
  slots: {
11
11
  base: "uy:absolute uy:overflow-hidden",
12
12
  background: "",
@@ -15,21 +15,21 @@ const v = n({
15
15
  variants: {
16
16
  color: {
17
17
  blue: {
18
- background: "uy:bg-blue-l7",
19
- foreground: "uy:fill-blue-l5"
18
+ background: "uy:bg-blue-l4",
19
+ foreground: "uy:fill-blue-l3"
20
20
  },
21
- sunglow: {
22
- background: "uy:bg-sunglow-l3",
23
- foreground: "uy:fill-sunglow-l2"
21
+ yellow: {
22
+ background: "uy:bg-yellow-l4",
23
+ foreground: "uy:fill-yellow-l3"
24
24
  },
25
- peach: {
26
- background: "uy:bg-peach-l3",
27
- foreground: "uy:fill-peach-l2"
25
+ purple: {
26
+ background: "uy:bg-purple-l4",
27
+ foreground: "uy:fill-purple-l3"
28
28
  }
29
29
  }
30
30
  }
31
31
  }), w = n({
32
- extend: s,
32
+ extend: u,
33
33
  base: "uy:absolute uy:flex uy:h-full uy:w-full uy:items-center uy:justify-center uy:text-content-neutral uy:bg-surface-neutral-lowest",
34
34
  variants: {
35
35
  size: {
@@ -40,26 +40,26 @@ const v = n({
40
40
  xl: "uy:typography-h2"
41
41
  }
42
42
  }
43
- }), x = m.forwardRef(({ variant: u, color: i, children: y, ...r }, o) => {
44
- const c = f(), { size: t, variant: l } = c;
45
- if (u === "placeholder") {
46
- const { base: d, background: g, foreground: p } = v({
43
+ }), x = m.forwardRef(({ variant: s, color: i, children: y, ...r }, l) => {
44
+ const d = f(), { size: o, variant: t } = d;
45
+ if (s === "placeholder") {
46
+ const { base: c, background: p, foreground: g } = h({
47
47
  color: i,
48
- size: t,
49
- variant: l
48
+ size: o,
49
+ variant: t
50
50
  });
51
- return /* @__PURE__ */ a(e.Fallback, { ref: o, role: "presentation", ...r, children: /* @__PURE__ */ a(
51
+ return /* @__PURE__ */ a(e.Fallback, { ref: l, role: "presentation", ...r, children: /* @__PURE__ */ a(
52
52
  "svg",
53
53
  {
54
54
  role: "img",
55
55
  "aria-hidden": !0,
56
56
  xmlns: "http://www.w3.org/2000/svg",
57
57
  viewBox: "0 0 16 16",
58
- className: b(d(), g()),
58
+ className: b(c(), p()),
59
59
  children: /* @__PURE__ */ a(
60
60
  "path",
61
61
  {
62
- className: p(),
62
+ className: g(),
63
63
  fillRule: "evenodd",
64
64
  d: "M0 8.322c.245.06.49.117.732.17 2.113.455 3.727.487 4.79.12.478-.166.824-.405 1.09-.732.276-.336.567-.888.737-1.82.4-2.19.02-3.485-.47-4.283C6.407 1.012 5.665.432 4.732 0h6.861c.904 1.906 1.173 4.227.674 6.959-.29 1.587-.871 2.97-1.784 4.086-.921 1.126-2.08 1.86-3.328 2.292-2.283.789-4.872.574-7.156.11V8.322Z",
65
65
  clipRule: "evenodd"
@@ -71,11 +71,11 @@ const v = n({
71
71
  return /* @__PURE__ */ a(
72
72
  e.Fallback,
73
73
  {
74
- ref: o,
74
+ ref: l,
75
75
  role: "presentation",
76
- className: w({ size: t, variant: l }),
76
+ className: w({ size: o, variant: t }),
77
77
  ...r,
78
- children: h(y)
78
+ children: v(y)
79
79
  }
80
80
  );
81
81
  });
package/dist/esm/components/link/RawLink.d.ts CHANGED
@@ -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;
package/dist/esm/components/link/RawLink.js CHANGED
@@ -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
  ]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@payfit/unity-components",
3
- "version": "2.28.3",
3
+ "version": "2.29.0",
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.3",
45
+ "@payfit/unity-illustrations": "2.29.0",
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.3",
78
- "@payfit/unity-themes": "2.28.3",
77
+ "@payfit/unity-icons": "2.29.0",
78
+ "@payfit/unity-themes": "2.29.0",
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.3",
93
- "@payfit/unity-illustrations": "2.28.3",
94
- "@payfit/unity-themes": "2.28.3",
92
+ "@payfit/unity-icons": "2.29.0",
93
+ "@payfit/unity-illustrations": "2.29.0",
94
+ "@payfit/unity-themes": "2.29.0",
95
95
  "@storybook/addon-a11y": "10.3.5",
96
96
  "@storybook/addon-designs": "11.1.3",
97
97
  "@storybook/addon-docs": "10.3.5",