@payfit/unity-components 2.33.0 → 2.34.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 (2) hide show
  1. package/dist/esm/components/selectable-button-group/parts/SelectableButton.js +57 -50
  2. package/package.json +7 -7
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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@payfit/unity-components",
3
- "version": "2.33.0",
3
+ "version": "2.34.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.34.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.34.0",
78
+ "@payfit/unity-themes": "2.34.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.34.0",
93
+ "@payfit/unity-illustrations": "2.34.0",
94
+ "@payfit/unity-themes": "2.34.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",