@payfit/unity-components 2.33.0 → 2.35.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 (4) hide show
  1. package/dist/esm/components/selectable-button-group/parts/SelectableButton.js +57 -50
  2. package/dist/esm/components/toast/UnityToast.js +17 -17
  3. package/dist/esm/components/toast/parts/ToastAction.js +7 -5
  4. package/package.json +8 -8
package/dist/esm/components/selectable-button-group/parts/SelectableButton.js CHANGED
@@ -1,26 +1,29 @@
1
- import { jsxs as c, jsx as a, Fragment as v } from "react/jsx-runtime";
2
- import { forwardRef as x, useRef as h, useContext as B, useCallback as N } from "react";
3
- import { uyTv as S } from "@payfit/unity-themes";
4
- import { useToggleButtonGroupItem as I } from "react-aria/useToggleButtonGroup";
5
- import { Icon as w } from "../../icon/Icon.js";
6
- import { Spinner as C } from "../../spinner/Spinner.js";
7
- import { SelectableButtonGroupContext as G } from "../SelectableButtonGroup.context.js";
8
- const j = S({
1
+ import { jsxs as c, jsx as o, Fragment as N } from "react/jsx-runtime";
2
+ import { forwardRef as S, useRef as I, useContext as w, useCallback as P } from "react";
3
+ import { uyTv as F } from "@payfit/unity-themes";
4
+ import { mergeProps as C } from "react-aria/mergeProps";
5
+ import { useFocusRing as G } from "react-aria/useFocusRing";
6
+ import { useHover as j } from "react-aria/useHover";
7
+ import { useToggleButtonGroupItem as z } from "react-aria/useToggleButtonGroup";
8
+ import { Icon as D } from "../../icon/Icon.js";
9
+ import { Spinner as H } from "../../spinner/Spinner.js";
10
+ import { SelectableButtonGroupContext as L } from "../SelectableButtonGroup.context.js";
11
+ const T = F({
9
12
  // add the component styles
10
13
  slots: {
11
14
  base: [
12
15
  "uy:group uy:border uy:border-solid uy:rounded-pill uy:py-125 uy:sm:py-100 uy:flex uy:gap-50 uy:items-center",
13
16
  // default background and border
14
17
  "uy:border-border-form-enabled uy:bg-surface-form-enabled uy:text-content-form-enabled uy:m-[1px]",
15
- // pseudo-states
16
- "uy:hover:bg-surface-form-hover uy:hover:border-border-form-hover",
17
- "uy:active:bg-surface-form-pressed uy:active:border-border-form-pressed",
18
- "uy:focus-visible:bg-surface-form-focus uy:focus-visible:border-border-form-focus",
19
- "uy:focus-visible:outline-2 uy:focus-visible:outline-solid uy:focus-visible:outline-offset-2 uy:focus-visible:outline-utility-focus-ring",
20
- // Pressed
21
- "uy:data-[pressed=true]:bg-surface-form-pressed uy:data-[pressed=true]:border-border-form-pressed uy:data-[pressed=true]:text-content-form-pressed",
18
+ // Hover
19
+ "uy:enabled:data-[hovered=true]:bg-surface-form-hover uy:enabled:data-[hovered=true]:border-border-form-hover",
20
+ // Pressed (mouse or keyboard, surfaced by react-aria)
21
+ "uy:enabled:data-[pressed=true]:bg-surface-form-pressed uy:enabled:data-[pressed=true]:border-border-form-pressed uy:enabled:data-[pressed=true]:text-content-form-pressed",
22
+ // Focus visible
23
+ "uy:enabled:data-[focus-visible=true]:bg-surface-form-focus uy:enabled:data-[focus-visible=true]:border-border-form-focus",
24
+ "uy:enabled:data-[focus-visible=true]:outline-2 uy:enabled:data-[focus-visible=true]:outline-solid uy:enabled:data-[focus-visible=true]:outline-offset-2 uy:enabled:data-[focus-visible=true]:outline-utility-focus-ring",
22
25
  // selected
23
- "uy:data-[selected=true]:bg-surface-form-selected uy:data-[selected=true]:border-border-form-selected uy:data-[selected=true]:text-content-form-selected uy:data-[selected=true]:border-2 uy:data-[selected=true]:m-0",
26
+ "uy:enabled:data-[selected=true]:bg-surface-form-selected uy:enabled:data-[selected=true]:border-border-form-selected uy:enabled:data-[selected=true]:text-content-form-selected uy:enabled:data-[selected=true]:border-2 uy:enabled:data-[selected=true]:m-0",
24
27
  // Disabled
25
28
  "uy:disabled:bg-surface-form-disabled uy:disabled:border-border-form-disabled uy:disabled:text-content-form-disabled uy:disabled:cursor-not-allowed",
26
29
  // Loading
@@ -31,9 +34,9 @@ const j = S({
31
34
  icon: [
32
35
  "uy:p-25 uy:text-content-form-enabled",
33
36
  // Pseudo-states
34
- "uy:group-data-[pressed=true]:text-content-form-pressed",
37
+ "uy:enabled:group-data-[pressed=true]:text-content-form-pressed",
35
38
  // selected
36
- "uy:group-data-[selected=true]:text-content-form-selected",
39
+ "uy:enabled:group-data-[selected=true]:text-content-form-selected",
37
40
  // disabled
38
41
  "uy:group-disabled:text-content-form-disabled",
39
42
  // Loading
@@ -54,63 +57,67 @@ const j = S({
54
57
  defaultVariants: {
55
58
  hasIcon: !1
56
59
  }
57
- }), z = x(
60
+ }), V = S(
58
61
  (t, r) => {
59
- const u = h(null), d = B(G);
60
- if (!d)
62
+ const d = I(null), u = w(L);
63
+ if (!u)
61
64
  throw new Error(
62
65
  "SelectableButton must be used within a SelectableButtonGroup component"
63
66
  );
64
- const { buttonProps: l, isPressed: b, isSelected: i } = I(
67
+ const { buttonProps: l, isPressed: f, isSelected: n } = z(
65
68
  { id: t.value, ...t },
66
- d,
67
- u
68
- ), f = N(
69
+ u,
70
+ d
71
+ ), {
72
+ isDisabled: i = !1,
73
+ isLoading: e = !1,
74
+ prefixIcon: a,
75
+ children: b
76
+ } = t, { hoverProps: m, isHovered: y } = j({
77
+ isDisabled: i || e
78
+ }), { isFocusVisible: p, focusProps: g } = G(), v = P(
69
79
  (s) => {
70
- u.current = s, typeof r == "function" ? r(s) : r && (r.current = s);
80
+ d.current = s, typeof r == "function" ? r(s) : r && (r.current = s);
71
81
  },
72
82
  [r]
73
- ), {
74
- isDisabled: y = !1,
75
- isLoading: e = !1,
76
- prefixIcon: o,
77
- children: n
78
- } = t, { base: m, icon: p, label: g } = j({
79
- hasIcon: !!o && !e
83
+ ), { base: x, icon: h, label: B } = T({
84
+ hasIcon: !!a && !e
80
85
  });
81
86
  return /* @__PURE__ */ c(
82
87
  "button",
83
88
  {
84
89
  "data-dd-privacy": "allow",
85
- ...l,
86
- ref: f,
87
- className: m({ className: t.className }),
88
- disabled: l.disabled || y || e,
90
+ ...C(l, m, g),
91
+ ref: v,
92
+ className: x({ className: t.className }),
93
+ disabled: l.disabled || i || e,
89
94
  "data-loading": e ? !0 : void 0,
90
- "data-pressed": b,
91
- "data-selected": i,
95
+ "data-pressed": f || void 0,
96
+ "data-hovered": y || void 0,
97
+ "data-focus-visible": p || void 0,
98
+ "data-selected": n,
92
99
  "aria-busy": e,
93
100
  children: [
94
- o && !e && /* @__PURE__ */ a(
95
- w,
101
+ a && !e && /* @__PURE__ */ o(
102
+ D,
96
103
  {
97
- src: i ? `${o}Filled` : `${o}Outlined`,
104
+ src: n ? `${a}Filled` : `${a}Outlined`,
98
105
  role: "presentation",
99
- className: p(),
106
+ className: h(),
100
107
  size: 20
101
108
  }
102
109
  ),
103
- e ? /* @__PURE__ */ c(v, { children: [
104
- /* @__PURE__ */ a(C, { label: "Loading", size: "small", color: "inherit" }),
105
- /* @__PURE__ */ a("span", { className: "uy:sr-only", children: n })
106
- ] }) : /* @__PURE__ */ a("span", { className: g(), children: n })
110
+ e ? /* @__PURE__ */ c(N, { children: [
111
+ /* @__PURE__ */ o(H, { label: "Loading", size: "small", color: "inherit" }),
112
+ /* @__PURE__ */ o("span", { className: "uy:sr-only", children: b })
113
+ ] }) : /* @__PURE__ */ o("span", { className: B(), children: b })
107
114
  ]
108
115
  }
109
116
  );
110
117
  }
111
118
  );
112
- z.displayName = "SelectableButton";
119
+ V.displayName = "SelectableButton";
113
120
  export {
114
- z as SelectableButton,
115
- j as selectableButton
121
+ V as SelectableButton,
122
+ T as selectableButton
116
123
  };
package/dist/esm/components/toast/UnityToast.js CHANGED
@@ -1,16 +1,16 @@
1
1
  import { jsx as o, jsxs as n } from "react/jsx-runtime";
2
- import { isValidElement as l, Fragment as d, Children as m } from "react";
2
+ import { isValidElement as l, Fragment as m, Children as d } from "react";
3
3
  import { uyTv as p } from "@payfit/unity-themes";
4
4
  import { useIntl as f } from "react-intl";
5
- import { IconButton as b } from "../icon-button/IconButton.js";
6
- import { Icon as g } from "../icon/Icon.js";
7
- import { ToastTitle as x } from "./parts/ToastTitle.js";
8
- import { ToastProvider as T } from "./Toast.context.js";
9
- const v = p({
5
+ import { IconButton as g } from "../icon-button/IconButton.js";
6
+ import { Icon as h } from "../icon/Icon.js";
7
+ import { ToastTitle as b } from "./parts/ToastTitle.js";
8
+ import { ToastProvider as x } from "./Toast.context.js";
9
+ const T = p({
10
10
  slots: {
11
- base: "uy:sm:w-[416px] uy:border uy:border-solid uy:rounded-150 uy:text-content-neutral uy:bg-surface-neutral uy:shadow-300 uy:p-100 uy:flex uy:gap-125 uy:border-border-neutral",
11
+ base: "uy:sm:w-[416px] uy:border uy:border-solid uy:theme-legacy:rounded-150 uy:theme-rebrand:rounded-125 uy:text-content-neutral uy:bg-surface-neutral uy:shadow-300 uy:p-100 uy:flex uy:gap-125 uy:border-border-neutral",
12
12
  contentWrapper: "uy:flex uy:grow uy:ml-125",
13
- divider: "uy:border-l-[1px] uy:border-solid uy:border-border-neutral uy:self-stretch"
13
+ divider: "uy:theme-legacy:border-l-[1px] uy:theme-legacy:border-solid uy:theme-legacy:border-border-neutral uy:theme-legacy:self-stretch uy:theme-rebrand:hidden"
14
14
  },
15
15
  variants: {
16
16
  variant: {
@@ -26,10 +26,10 @@ const v = p({
26
26
  }
27
27
  }
28
28
  }
29
- }), h = (e) => {
30
- const s = l(e) && e.type === d ? e.props.children : e;
31
- if (m.toArray(s).filter(
32
- (r) => l(r) && r.type === x
29
+ }), v = (e) => {
30
+ const s = l(e) && e.type === m ? e.props.children : e;
31
+ if (d.toArray(s).filter(
32
+ (r) => l(r) && r.type === b
33
33
  ).length !== 1)
34
34
  throw new Error("UnityToast must have one ToastTitle component");
35
35
  }, w = ({
@@ -40,12 +40,12 @@ const v = p({
40
40
  ...i
41
41
  }) => {
42
42
  const a = f();
43
- h(e);
44
- const { base: u, contentWrapper: c, divider: y } = v({
43
+ v(e);
44
+ const { base: u, contentWrapper: c, divider: y } = T({
45
45
  variant: t,
46
46
  isInline: r
47
47
  });
48
- return /* @__PURE__ */ o(T, { inline: r, children: /* @__PURE__ */ n(
48
+ return /* @__PURE__ */ o(x, { inline: r, children: /* @__PURE__ */ n(
49
49
  "div",
50
50
  {
51
51
  "data-dd-privacy": "mask",
@@ -58,7 +58,7 @@ const v = p({
58
58
  children: [
59
59
  /* @__PURE__ */ n("div", { className: "uy:flex uy:flex-row uy:grow", children: [
60
60
  /* @__PURE__ */ o(
61
- g,
61
+ h,
62
62
  {
63
63
  src: t === "success" ? "CheckCircleFilled" : "WarningCircleFilled",
64
64
  color: t === "success" ? "content.success" : "content.danger",
@@ -73,7 +73,7 @@ const v = p({
73
73
  ] }),
74
74
  /* @__PURE__ */ o("div", { role: "presentation", className: y() }),
75
75
  /* @__PURE__ */ o(
76
- b,
76
+ g,
77
77
  {
78
78
  icon: "CloseOutlined",
79
79
  iconRole: "presentation",
package/dist/esm/components/toast/parts/ToastAction.js CHANGED
@@ -1,12 +1,14 @@
1
1
  import { jsx as o } from "react/jsx-runtime";
2
- import { Button as i } from "../../button/Button.js";
3
- function a({
2
+ import { useUnityTheme as e } from "@payfit/unity-themes";
3
+ import { Button as a } from "../../button/Button.js";
4
+ function i({
4
5
  children: t,
5
6
  onPress: r
6
7
  }) {
7
- return /* @__PURE__ */ o("div", { className: "uy:self-end", children: /* @__PURE__ */ o(i, { variant: "ghost", color: "primary", onPress: r, children: t }) });
8
+ const { theme: n } = e();
9
+ return /* @__PURE__ */ o("div", { className: "uy:self-end", children: /* @__PURE__ */ o(a, { variant: n === "rebrand" ? "secondary" : "ghost", color: "primary", onPress: r, children: t }) });
8
10
  }
9
- a.displayName = "ToastAction";
11
+ i.displayName = "ToastAction";
10
12
  export {
11
- a as ToastAction
13
+ i as ToastAction
12
14
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@payfit/unity-components",
3
- "version": "2.33.0",
3
+ "version": "2.35.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.33.0",
45
+ "@payfit/unity-illustrations": "2.35.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.33.0",
78
- "@payfit/unity-themes": "2.33.0",
77
+ "@payfit/unity-icons": "2.35.0",
78
+ "@payfit/unity-themes": "2.35.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.33.0",
93
- "@payfit/unity-illustrations": "2.33.0",
94
- "@payfit/unity-themes": "2.33.0",
92
+ "@payfit/unity-icons": "2.35.0",
93
+ "@payfit/unity-illustrations": "2.35.0",
94
+ "@payfit/unity-themes": "2.35.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",
@@ -132,8 +132,8 @@
132
132
  "@payfit/code-pushup-tools": "0.0.0-use.local",
133
133
  "@payfit/hr-app-eslint": "0.0.0-use.local",
134
134
  "@payfit/hr-apps-tsconfigs": "0.0.0-use.local",
135
- "@payfit/storybook-addon-console-errors": "0.0.0-use.local",
136
135
  "@payfit/storybook-config": "0.0.0-use.local",
136
+ "@payfit/storybook-addon-console-errors": "0.0.0-use.local",
137
137
  "@payfit/vite-configs": "0.0.0-use.local"
138
138
  },
139
139
  "peerDependenciesMeta": {