@payfit/unity-components 3.4.17 → 3.4.18
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.
- package/dist/esm/core/components/scroll-area/ScrollArea.d.ts +68 -0
- package/dist/esm/core/components/scroll-area/ScrollArea.js +65 -0
- package/dist/esm/core/components/scroll-area/ScrollArea.variants.d.ts +424 -0
- package/dist/esm/core/components/scroll-area/ScrollArea.variants.js +65 -0
- package/dist/esm/core/hooks/use-scroll-edges.d.ts +17 -0
- package/dist/esm/core/hooks/use-scroll-edges.js +36 -0
- package/dist/esm/core/index.d.ts +1 -0
- package/dist/esm/core/index.js +2 -1
- package/dist/esm/core/utils/scroll-edges.d.ts +15 -0
- package/dist/esm/core/utils/scroll-edges.js +48 -0
- package/dist/esm/docs/reference/catalog/catalog.generated.d.ts +18 -0
- package/dist/esm/index.js +15 -14
- package/dist/esm/modules/ai-kit/components/ai-composer/AIComposer.variants.js +23 -21
- package/dist/esm/modules/ai-kit/components/ai-composer/parts/AIComposerAlert.js +3 -3
- package/dist/esm/modules/ai-kit/components/ai-composer/parts/AIComposerAttachmentsGroup.js +26 -27
- package/dist/esm/modules/ai-kit/components/ai-composer/parts/AIComposerTextArea.js +2 -2
- package/package.json +7 -7
- package/src/agent-references/component-catalog.json +23 -0
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
import { ComponentPropsWithoutRef, ReactNode, UIEventHandler } from 'react';
|
|
2
|
+
import { VariantProps } from '@payfit/unity-themes';
|
|
3
|
+
import { ScrollAreaAxis } from '../../utils/scroll-edges.js';
|
|
4
|
+
import { scrollArea } from './ScrollArea.variants.js';
|
|
5
|
+
/**
|
|
6
|
+
* Chooses the logical edges that may show a fade when content remains beyond
|
|
7
|
+
* the viewport.
|
|
8
|
+
*
|
|
9
|
+
* - `none` renders no fades.
|
|
10
|
+
* - `start` renders a fade at the logical start edge.
|
|
11
|
+
* - `end` renders a fade at the logical end edge.
|
|
12
|
+
* - `both` renders fades at both logical edges.
|
|
13
|
+
*/
|
|
14
|
+
export type ScrollAreaFade = 'none' | 'start' | 'end' | 'both';
|
|
15
|
+
/** Configures a native scroll viewport and its optional edge fades. */
|
|
16
|
+
export interface ScrollAreaProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'className' | 'onScroll' | 'style'> {
|
|
17
|
+
/** Renders the semantic content inside the native scroll viewport. */
|
|
18
|
+
children: ReactNode;
|
|
19
|
+
/** Chooses the permitted logical scroll axes. @default 'block' */
|
|
20
|
+
axis?: ScrollAreaAxis;
|
|
21
|
+
/** Selects which logical edge fades may appear. @default 'none' */
|
|
22
|
+
fade?: ScrollAreaFade;
|
|
23
|
+
/**
|
|
24
|
+
* Sets the Unity surface token used as the fade source.
|
|
25
|
+
* @default 'surface.neutral'
|
|
26
|
+
*/
|
|
27
|
+
fadeColor?: VariantProps<typeof scrollArea>['fadeColor'];
|
|
28
|
+
/** Applies layout styling to the positioned ScrollArea root. */
|
|
29
|
+
className?: string;
|
|
30
|
+
/** Receives native scroll events from the viewport. */
|
|
31
|
+
onScroll?: UIEventHandler<HTMLDivElement>;
|
|
32
|
+
}
|
|
33
|
+
/**
|
|
34
|
+
* Keeps clipped content understandable by signalling where people can keep
|
|
35
|
+
* scrolling.
|
|
36
|
+
* The component renders a native viewport and can show token-backed fades at
|
|
37
|
+
* its logical inline or block edges. Set `axis` to the scroll direction, use
|
|
38
|
+
* `fade` to choose the visible edge cues, and match `fadeColor` to the
|
|
39
|
+
* surrounding Unity surface.
|
|
40
|
+
* @param props - Viewport content, scroll-axis, and edge-fade options.
|
|
41
|
+
* @see {@link ScrollAreaProps} for all available props.
|
|
42
|
+
* @example
|
|
43
|
+
* ```tsx
|
|
44
|
+
* import { ScrollArea } from '@payfit/unity-components'
|
|
45
|
+
*
|
|
46
|
+
* export function AttachmentPreview() {
|
|
47
|
+
* return (
|
|
48
|
+
* <ScrollArea
|
|
49
|
+
* axis="inline"
|
|
50
|
+
* fade="both"
|
|
51
|
+
* className="uy:h-500 uy:w-[320px] uy:bg-surface-neutral"
|
|
52
|
+
* >
|
|
53
|
+
* <div className="uy:flex uy:w-max uy:gap-100 uy:p-50">
|
|
54
|
+
* <span>Attachment 1</span>
|
|
55
|
+
* <span>Attachment 2</span>
|
|
56
|
+
* </div>
|
|
57
|
+
* </ScrollArea>
|
|
58
|
+
* )
|
|
59
|
+
* }
|
|
60
|
+
* ```
|
|
61
|
+
* @remarks
|
|
62
|
+
* - The component does not add a role or focusability, so children own their
|
|
63
|
+
* semantics and keyboard behavior.
|
|
64
|
+
* - Fades are decorative and never receive pointer events.
|
|
65
|
+
* - The forwarded ref and `onScroll` target the native viewport rather than
|
|
66
|
+
* the positioned root.
|
|
67
|
+
*/
|
|
68
|
+
export declare const ScrollArea: import('react').ForwardRefExoticComponent<ScrollAreaProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import { useScrollEdges as e } from "../../hooks/use-scroll-edges.js";
|
|
2
|
+
import { scrollArea as t } from "./ScrollArea.variants.js";
|
|
3
|
+
import { forwardRef as n, useCallback as r } from "react";
|
|
4
|
+
import { uyMerge as i } from "@payfit/unity-themes";
|
|
5
|
+
import { jsx as a, jsxs as o } from "react/jsx-runtime";
|
|
6
|
+
//#region src/core/components/scroll-area/ScrollArea.tsx
|
|
7
|
+
function s(e) {
|
|
8
|
+
return e === "inline" || e === "both";
|
|
9
|
+
}
|
|
10
|
+
function c(e) {
|
|
11
|
+
return e === "block" || e === "both";
|
|
12
|
+
}
|
|
13
|
+
function l(e, t) {
|
|
14
|
+
return e === "both" || e === t;
|
|
15
|
+
}
|
|
16
|
+
var u = n(({ axis: n = "block", children: u, className: d, fade: f = "none", fadeColor: p, onScroll: m, ...h }, g) => {
|
|
17
|
+
let { onScroll: _, scrollEdges: v, scrollRef: y } = e({ axis: n }), { blockEndFade: b, blockStartFade: x, inlineEndFade: S, inlineStartFade: C, root: w, viewport: T } = t({
|
|
18
|
+
axis: n,
|
|
19
|
+
fadeColor: p
|
|
20
|
+
}), E = r((e) => {
|
|
21
|
+
y.current = e, typeof g == "function" ? g(e) : g && (g.current = e);
|
|
22
|
+
}, [g, y]), D = r((e) => {
|
|
23
|
+
_(e), m?.(e);
|
|
24
|
+
}, [m, _]);
|
|
25
|
+
return /* @__PURE__ */ o("div", {
|
|
26
|
+
...h,
|
|
27
|
+
className: i(w(), d),
|
|
28
|
+
"data-axis": n,
|
|
29
|
+
"data-overflow-inline": v.hasOverflowInline || void 0,
|
|
30
|
+
"data-overflow-block": v.hasOverflowBlock || void 0,
|
|
31
|
+
"data-scrollable-inline-start": v.canScrollInlineStart || void 0,
|
|
32
|
+
"data-scrollable-inline-end": v.canScrollInlineEnd || void 0,
|
|
33
|
+
"data-scrollable-block-start": v.canScrollBlockStart || void 0,
|
|
34
|
+
"data-scrollable-block-end": v.canScrollBlockEnd || void 0,
|
|
35
|
+
"data-unity-component": "scroll-area",
|
|
36
|
+
children: [
|
|
37
|
+
/* @__PURE__ */ a("div", {
|
|
38
|
+
ref: E,
|
|
39
|
+
className: T(),
|
|
40
|
+
"data-unity-slot": "scroll-area.viewport",
|
|
41
|
+
onScroll: D,
|
|
42
|
+
children: u
|
|
43
|
+
}),
|
|
44
|
+
s(n) && l(f, "start") && /* @__PURE__ */ a("span", {
|
|
45
|
+
"aria-hidden": "true",
|
|
46
|
+
className: C()
|
|
47
|
+
}),
|
|
48
|
+
s(n) && l(f, "end") && /* @__PURE__ */ a("span", {
|
|
49
|
+
"aria-hidden": "true",
|
|
50
|
+
className: S()
|
|
51
|
+
}),
|
|
52
|
+
c(n) && l(f, "start") && /* @__PURE__ */ a("span", {
|
|
53
|
+
"aria-hidden": "true",
|
|
54
|
+
className: x()
|
|
55
|
+
}),
|
|
56
|
+
c(n) && l(f, "end") && /* @__PURE__ */ a("span", {
|
|
57
|
+
"aria-hidden": "true",
|
|
58
|
+
className: b()
|
|
59
|
+
})
|
|
60
|
+
]
|
|
61
|
+
});
|
|
62
|
+
});
|
|
63
|
+
u.displayName = "ScrollArea";
|
|
64
|
+
//#endregion
|
|
65
|
+
export { u as ScrollArea };
|
|
@@ -0,0 +1,424 @@
|
|
|
1
|
+
export declare const scrollArea: import('tailwind-variants').TVReturnType<{
|
|
2
|
+
axis: {
|
|
3
|
+
inline: {
|
|
4
|
+
viewport: string;
|
|
5
|
+
};
|
|
6
|
+
block: {
|
|
7
|
+
viewport: string;
|
|
8
|
+
};
|
|
9
|
+
both: {
|
|
10
|
+
viewport: string;
|
|
11
|
+
};
|
|
12
|
+
};
|
|
13
|
+
fadeColor: {
|
|
14
|
+
'surface.neutral': {
|
|
15
|
+
inlineStartFade: string;
|
|
16
|
+
inlineEndFade: string;
|
|
17
|
+
blockStartFade: string;
|
|
18
|
+
blockEndFade: string;
|
|
19
|
+
};
|
|
20
|
+
'surface.neutral.low': {
|
|
21
|
+
inlineStartFade: string;
|
|
22
|
+
inlineEndFade: string;
|
|
23
|
+
blockStartFade: string;
|
|
24
|
+
blockEndFade: string;
|
|
25
|
+
};
|
|
26
|
+
'surface.neutral.lowest': {
|
|
27
|
+
inlineStartFade: string;
|
|
28
|
+
inlineEndFade: string;
|
|
29
|
+
blockStartFade: string;
|
|
30
|
+
blockEndFade: string;
|
|
31
|
+
};
|
|
32
|
+
'surface.neutral.highest': {
|
|
33
|
+
inlineStartFade: string;
|
|
34
|
+
inlineEndFade: string;
|
|
35
|
+
blockStartFade: string;
|
|
36
|
+
blockEndFade: string;
|
|
37
|
+
};
|
|
38
|
+
'surface.inverted': {
|
|
39
|
+
inlineStartFade: string;
|
|
40
|
+
inlineEndFade: string;
|
|
41
|
+
blockStartFade: string;
|
|
42
|
+
blockEndFade: string;
|
|
43
|
+
};
|
|
44
|
+
'surface.primary': {
|
|
45
|
+
inlineStartFade: string;
|
|
46
|
+
inlineEndFade: string;
|
|
47
|
+
blockStartFade: string;
|
|
48
|
+
blockEndFade: string;
|
|
49
|
+
};
|
|
50
|
+
'surface.primary.lowest': {
|
|
51
|
+
inlineStartFade: string;
|
|
52
|
+
inlineEndFade: string;
|
|
53
|
+
blockStartFade: string;
|
|
54
|
+
blockEndFade: string;
|
|
55
|
+
};
|
|
56
|
+
'surface.success': {
|
|
57
|
+
inlineStartFade: string;
|
|
58
|
+
inlineEndFade: string;
|
|
59
|
+
blockStartFade: string;
|
|
60
|
+
blockEndFade: string;
|
|
61
|
+
};
|
|
62
|
+
'surface.success.lowest': {
|
|
63
|
+
inlineStartFade: string;
|
|
64
|
+
inlineEndFade: string;
|
|
65
|
+
blockStartFade: string;
|
|
66
|
+
blockEndFade: string;
|
|
67
|
+
};
|
|
68
|
+
'surface.info': {
|
|
69
|
+
inlineStartFade: string;
|
|
70
|
+
inlineEndFade: string;
|
|
71
|
+
blockStartFade: string;
|
|
72
|
+
blockEndFade: string;
|
|
73
|
+
};
|
|
74
|
+
'surface.info.lowest': {
|
|
75
|
+
inlineStartFade: string;
|
|
76
|
+
inlineEndFade: string;
|
|
77
|
+
blockStartFade: string;
|
|
78
|
+
blockEndFade: string;
|
|
79
|
+
};
|
|
80
|
+
'surface.warning': {
|
|
81
|
+
inlineStartFade: string;
|
|
82
|
+
inlineEndFade: string;
|
|
83
|
+
blockStartFade: string;
|
|
84
|
+
blockEndFade: string;
|
|
85
|
+
};
|
|
86
|
+
'surface.warning.lowest': {
|
|
87
|
+
inlineStartFade: string;
|
|
88
|
+
inlineEndFade: string;
|
|
89
|
+
blockStartFade: string;
|
|
90
|
+
blockEndFade: string;
|
|
91
|
+
};
|
|
92
|
+
'surface.danger': {
|
|
93
|
+
inlineStartFade: string;
|
|
94
|
+
inlineEndFade: string;
|
|
95
|
+
blockStartFade: string;
|
|
96
|
+
blockEndFade: string;
|
|
97
|
+
};
|
|
98
|
+
'surface.danger.lowest': {
|
|
99
|
+
inlineStartFade: string;
|
|
100
|
+
inlineEndFade: string;
|
|
101
|
+
blockStartFade: string;
|
|
102
|
+
blockEndFade: string;
|
|
103
|
+
};
|
|
104
|
+
'surface.promo': {
|
|
105
|
+
inlineStartFade: string;
|
|
106
|
+
inlineEndFade: string;
|
|
107
|
+
blockStartFade: string;
|
|
108
|
+
blockEndFade: string;
|
|
109
|
+
};
|
|
110
|
+
'surface.decorative-teal': {
|
|
111
|
+
inlineStartFade: string;
|
|
112
|
+
inlineEndFade: string;
|
|
113
|
+
blockStartFade: string;
|
|
114
|
+
blockEndFade: string;
|
|
115
|
+
};
|
|
116
|
+
'surface.decorative-purple': {
|
|
117
|
+
inlineStartFade: string;
|
|
118
|
+
inlineEndFade: string;
|
|
119
|
+
blockStartFade: string;
|
|
120
|
+
blockEndFade: string;
|
|
121
|
+
};
|
|
122
|
+
'surface.decorative-plum': {
|
|
123
|
+
inlineStartFade: string;
|
|
124
|
+
inlineEndFade: string;
|
|
125
|
+
blockStartFade: string;
|
|
126
|
+
blockEndFade: string;
|
|
127
|
+
};
|
|
128
|
+
'surface.decorative-orange': {
|
|
129
|
+
inlineStartFade: string;
|
|
130
|
+
inlineEndFade: string;
|
|
131
|
+
blockStartFade: string;
|
|
132
|
+
blockEndFade: string;
|
|
133
|
+
};
|
|
134
|
+
};
|
|
135
|
+
}, {
|
|
136
|
+
root: string;
|
|
137
|
+
viewport: string;
|
|
138
|
+
inlineStartFade: string[];
|
|
139
|
+
inlineEndFade: string[];
|
|
140
|
+
blockStartFade: string[];
|
|
141
|
+
blockEndFade: string[];
|
|
142
|
+
}, undefined, {
|
|
143
|
+
axis: {
|
|
144
|
+
inline: {
|
|
145
|
+
viewport: string;
|
|
146
|
+
};
|
|
147
|
+
block: {
|
|
148
|
+
viewport: string;
|
|
149
|
+
};
|
|
150
|
+
both: {
|
|
151
|
+
viewport: string;
|
|
152
|
+
};
|
|
153
|
+
};
|
|
154
|
+
fadeColor: {
|
|
155
|
+
'surface.neutral': {
|
|
156
|
+
inlineStartFade: string;
|
|
157
|
+
inlineEndFade: string;
|
|
158
|
+
blockStartFade: string;
|
|
159
|
+
blockEndFade: string;
|
|
160
|
+
};
|
|
161
|
+
'surface.neutral.low': {
|
|
162
|
+
inlineStartFade: string;
|
|
163
|
+
inlineEndFade: string;
|
|
164
|
+
blockStartFade: string;
|
|
165
|
+
blockEndFade: string;
|
|
166
|
+
};
|
|
167
|
+
'surface.neutral.lowest': {
|
|
168
|
+
inlineStartFade: string;
|
|
169
|
+
inlineEndFade: string;
|
|
170
|
+
blockStartFade: string;
|
|
171
|
+
blockEndFade: string;
|
|
172
|
+
};
|
|
173
|
+
'surface.neutral.highest': {
|
|
174
|
+
inlineStartFade: string;
|
|
175
|
+
inlineEndFade: string;
|
|
176
|
+
blockStartFade: string;
|
|
177
|
+
blockEndFade: string;
|
|
178
|
+
};
|
|
179
|
+
'surface.inverted': {
|
|
180
|
+
inlineStartFade: string;
|
|
181
|
+
inlineEndFade: string;
|
|
182
|
+
blockStartFade: string;
|
|
183
|
+
blockEndFade: string;
|
|
184
|
+
};
|
|
185
|
+
'surface.primary': {
|
|
186
|
+
inlineStartFade: string;
|
|
187
|
+
inlineEndFade: string;
|
|
188
|
+
blockStartFade: string;
|
|
189
|
+
blockEndFade: string;
|
|
190
|
+
};
|
|
191
|
+
'surface.primary.lowest': {
|
|
192
|
+
inlineStartFade: string;
|
|
193
|
+
inlineEndFade: string;
|
|
194
|
+
blockStartFade: string;
|
|
195
|
+
blockEndFade: string;
|
|
196
|
+
};
|
|
197
|
+
'surface.success': {
|
|
198
|
+
inlineStartFade: string;
|
|
199
|
+
inlineEndFade: string;
|
|
200
|
+
blockStartFade: string;
|
|
201
|
+
blockEndFade: string;
|
|
202
|
+
};
|
|
203
|
+
'surface.success.lowest': {
|
|
204
|
+
inlineStartFade: string;
|
|
205
|
+
inlineEndFade: string;
|
|
206
|
+
blockStartFade: string;
|
|
207
|
+
blockEndFade: string;
|
|
208
|
+
};
|
|
209
|
+
'surface.info': {
|
|
210
|
+
inlineStartFade: string;
|
|
211
|
+
inlineEndFade: string;
|
|
212
|
+
blockStartFade: string;
|
|
213
|
+
blockEndFade: string;
|
|
214
|
+
};
|
|
215
|
+
'surface.info.lowest': {
|
|
216
|
+
inlineStartFade: string;
|
|
217
|
+
inlineEndFade: string;
|
|
218
|
+
blockStartFade: string;
|
|
219
|
+
blockEndFade: string;
|
|
220
|
+
};
|
|
221
|
+
'surface.warning': {
|
|
222
|
+
inlineStartFade: string;
|
|
223
|
+
inlineEndFade: string;
|
|
224
|
+
blockStartFade: string;
|
|
225
|
+
blockEndFade: string;
|
|
226
|
+
};
|
|
227
|
+
'surface.warning.lowest': {
|
|
228
|
+
inlineStartFade: string;
|
|
229
|
+
inlineEndFade: string;
|
|
230
|
+
blockStartFade: string;
|
|
231
|
+
blockEndFade: string;
|
|
232
|
+
};
|
|
233
|
+
'surface.danger': {
|
|
234
|
+
inlineStartFade: string;
|
|
235
|
+
inlineEndFade: string;
|
|
236
|
+
blockStartFade: string;
|
|
237
|
+
blockEndFade: string;
|
|
238
|
+
};
|
|
239
|
+
'surface.danger.lowest': {
|
|
240
|
+
inlineStartFade: string;
|
|
241
|
+
inlineEndFade: string;
|
|
242
|
+
blockStartFade: string;
|
|
243
|
+
blockEndFade: string;
|
|
244
|
+
};
|
|
245
|
+
'surface.promo': {
|
|
246
|
+
inlineStartFade: string;
|
|
247
|
+
inlineEndFade: string;
|
|
248
|
+
blockStartFade: string;
|
|
249
|
+
blockEndFade: string;
|
|
250
|
+
};
|
|
251
|
+
'surface.decorative-teal': {
|
|
252
|
+
inlineStartFade: string;
|
|
253
|
+
inlineEndFade: string;
|
|
254
|
+
blockStartFade: string;
|
|
255
|
+
blockEndFade: string;
|
|
256
|
+
};
|
|
257
|
+
'surface.decorative-purple': {
|
|
258
|
+
inlineStartFade: string;
|
|
259
|
+
inlineEndFade: string;
|
|
260
|
+
blockStartFade: string;
|
|
261
|
+
blockEndFade: string;
|
|
262
|
+
};
|
|
263
|
+
'surface.decorative-plum': {
|
|
264
|
+
inlineStartFade: string;
|
|
265
|
+
inlineEndFade: string;
|
|
266
|
+
blockStartFade: string;
|
|
267
|
+
blockEndFade: string;
|
|
268
|
+
};
|
|
269
|
+
'surface.decorative-orange': {
|
|
270
|
+
inlineStartFade: string;
|
|
271
|
+
inlineEndFade: string;
|
|
272
|
+
blockStartFade: string;
|
|
273
|
+
blockEndFade: string;
|
|
274
|
+
};
|
|
275
|
+
};
|
|
276
|
+
}, {
|
|
277
|
+
root: string;
|
|
278
|
+
viewport: string;
|
|
279
|
+
inlineStartFade: string[];
|
|
280
|
+
inlineEndFade: string[];
|
|
281
|
+
blockStartFade: string[];
|
|
282
|
+
blockEndFade: string[];
|
|
283
|
+
}, import('tailwind-variants').TVReturnTypeLike<{
|
|
284
|
+
axis: {
|
|
285
|
+
inline: {
|
|
286
|
+
viewport: string;
|
|
287
|
+
};
|
|
288
|
+
block: {
|
|
289
|
+
viewport: string;
|
|
290
|
+
};
|
|
291
|
+
both: {
|
|
292
|
+
viewport: string;
|
|
293
|
+
};
|
|
294
|
+
};
|
|
295
|
+
fadeColor: {
|
|
296
|
+
'surface.neutral': {
|
|
297
|
+
inlineStartFade: string;
|
|
298
|
+
inlineEndFade: string;
|
|
299
|
+
blockStartFade: string;
|
|
300
|
+
blockEndFade: string;
|
|
301
|
+
};
|
|
302
|
+
'surface.neutral.low': {
|
|
303
|
+
inlineStartFade: string;
|
|
304
|
+
inlineEndFade: string;
|
|
305
|
+
blockStartFade: string;
|
|
306
|
+
blockEndFade: string;
|
|
307
|
+
};
|
|
308
|
+
'surface.neutral.lowest': {
|
|
309
|
+
inlineStartFade: string;
|
|
310
|
+
inlineEndFade: string;
|
|
311
|
+
blockStartFade: string;
|
|
312
|
+
blockEndFade: string;
|
|
313
|
+
};
|
|
314
|
+
'surface.neutral.highest': {
|
|
315
|
+
inlineStartFade: string;
|
|
316
|
+
inlineEndFade: string;
|
|
317
|
+
blockStartFade: string;
|
|
318
|
+
blockEndFade: string;
|
|
319
|
+
};
|
|
320
|
+
'surface.inverted': {
|
|
321
|
+
inlineStartFade: string;
|
|
322
|
+
inlineEndFade: string;
|
|
323
|
+
blockStartFade: string;
|
|
324
|
+
blockEndFade: string;
|
|
325
|
+
};
|
|
326
|
+
'surface.primary': {
|
|
327
|
+
inlineStartFade: string;
|
|
328
|
+
inlineEndFade: string;
|
|
329
|
+
blockStartFade: string;
|
|
330
|
+
blockEndFade: string;
|
|
331
|
+
};
|
|
332
|
+
'surface.primary.lowest': {
|
|
333
|
+
inlineStartFade: string;
|
|
334
|
+
inlineEndFade: string;
|
|
335
|
+
blockStartFade: string;
|
|
336
|
+
blockEndFade: string;
|
|
337
|
+
};
|
|
338
|
+
'surface.success': {
|
|
339
|
+
inlineStartFade: string;
|
|
340
|
+
inlineEndFade: string;
|
|
341
|
+
blockStartFade: string;
|
|
342
|
+
blockEndFade: string;
|
|
343
|
+
};
|
|
344
|
+
'surface.success.lowest': {
|
|
345
|
+
inlineStartFade: string;
|
|
346
|
+
inlineEndFade: string;
|
|
347
|
+
blockStartFade: string;
|
|
348
|
+
blockEndFade: string;
|
|
349
|
+
};
|
|
350
|
+
'surface.info': {
|
|
351
|
+
inlineStartFade: string;
|
|
352
|
+
inlineEndFade: string;
|
|
353
|
+
blockStartFade: string;
|
|
354
|
+
blockEndFade: string;
|
|
355
|
+
};
|
|
356
|
+
'surface.info.lowest': {
|
|
357
|
+
inlineStartFade: string;
|
|
358
|
+
inlineEndFade: string;
|
|
359
|
+
blockStartFade: string;
|
|
360
|
+
blockEndFade: string;
|
|
361
|
+
};
|
|
362
|
+
'surface.warning': {
|
|
363
|
+
inlineStartFade: string;
|
|
364
|
+
inlineEndFade: string;
|
|
365
|
+
blockStartFade: string;
|
|
366
|
+
blockEndFade: string;
|
|
367
|
+
};
|
|
368
|
+
'surface.warning.lowest': {
|
|
369
|
+
inlineStartFade: string;
|
|
370
|
+
inlineEndFade: string;
|
|
371
|
+
blockStartFade: string;
|
|
372
|
+
blockEndFade: string;
|
|
373
|
+
};
|
|
374
|
+
'surface.danger': {
|
|
375
|
+
inlineStartFade: string;
|
|
376
|
+
inlineEndFade: string;
|
|
377
|
+
blockStartFade: string;
|
|
378
|
+
blockEndFade: string;
|
|
379
|
+
};
|
|
380
|
+
'surface.danger.lowest': {
|
|
381
|
+
inlineStartFade: string;
|
|
382
|
+
inlineEndFade: string;
|
|
383
|
+
blockStartFade: string;
|
|
384
|
+
blockEndFade: string;
|
|
385
|
+
};
|
|
386
|
+
'surface.promo': {
|
|
387
|
+
inlineStartFade: string;
|
|
388
|
+
inlineEndFade: string;
|
|
389
|
+
blockStartFade: string;
|
|
390
|
+
blockEndFade: string;
|
|
391
|
+
};
|
|
392
|
+
'surface.decorative-teal': {
|
|
393
|
+
inlineStartFade: string;
|
|
394
|
+
inlineEndFade: string;
|
|
395
|
+
blockStartFade: string;
|
|
396
|
+
blockEndFade: string;
|
|
397
|
+
};
|
|
398
|
+
'surface.decorative-purple': {
|
|
399
|
+
inlineStartFade: string;
|
|
400
|
+
inlineEndFade: string;
|
|
401
|
+
blockStartFade: string;
|
|
402
|
+
blockEndFade: string;
|
|
403
|
+
};
|
|
404
|
+
'surface.decorative-plum': {
|
|
405
|
+
inlineStartFade: string;
|
|
406
|
+
inlineEndFade: string;
|
|
407
|
+
blockStartFade: string;
|
|
408
|
+
blockEndFade: string;
|
|
409
|
+
};
|
|
410
|
+
'surface.decorative-orange': {
|
|
411
|
+
inlineStartFade: string;
|
|
412
|
+
inlineEndFade: string;
|
|
413
|
+
blockStartFade: string;
|
|
414
|
+
blockEndFade: string;
|
|
415
|
+
};
|
|
416
|
+
};
|
|
417
|
+
}, {
|
|
418
|
+
root: string;
|
|
419
|
+
viewport: string;
|
|
420
|
+
inlineStartFade: string[];
|
|
421
|
+
inlineEndFade: string[];
|
|
422
|
+
blockStartFade: string[];
|
|
423
|
+
blockEndFade: string[];
|
|
424
|
+
}>>;
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import { uyTv as e } from "@payfit/unity-themes";
|
|
2
|
+
//#region src/core/components/scroll-area/ScrollArea.variants.ts
|
|
3
|
+
var t = (e) => ({
|
|
4
|
+
inlineStartFade: e,
|
|
5
|
+
inlineEndFade: e,
|
|
6
|
+
blockStartFade: e,
|
|
7
|
+
blockEndFade: e
|
|
8
|
+
}), n = e({
|
|
9
|
+
slots: {
|
|
10
|
+
root: "uy:relative uy:group/scroll-area",
|
|
11
|
+
viewport: "uy:size-full uy:min-h-0 uy:min-w-0 uy:scrollbar-thin uy:scrollbar-thumb:rounded-pill uy:scrollbar-thumb:bg-surface-neutral-low",
|
|
12
|
+
inlineStartFade: [
|
|
13
|
+
"uy:pointer-events-none uy:absolute uy:inset-y-0 uy:start-0 uy:z-10 uy:w-300",
|
|
14
|
+
"uy:bg-gradient-to-r uy:to-transparent uy:rtl:bg-gradient-to-l uy:opacity-0",
|
|
15
|
+
"uy:group-data-[scrollable-inline-start=true]/scroll-area:opacity-100"
|
|
16
|
+
],
|
|
17
|
+
inlineEndFade: [
|
|
18
|
+
"uy:pointer-events-none uy:absolute uy:inset-y-0 uy:end-0 uy:z-10 uy:w-300",
|
|
19
|
+
"uy:bg-gradient-to-l uy:to-transparent uy:rtl:bg-gradient-to-r uy:opacity-0",
|
|
20
|
+
"uy:group-data-[scrollable-inline-end=true]/scroll-area:opacity-100"
|
|
21
|
+
],
|
|
22
|
+
blockStartFade: [
|
|
23
|
+
"uy:pointer-events-none uy:absolute uy:inset-x-0 uy:top-0 uy:z-10 uy:h-300",
|
|
24
|
+
"uy:bg-gradient-to-b uy:to-transparent uy:opacity-0",
|
|
25
|
+
"uy:group-data-[scrollable-block-start=true]/scroll-area:opacity-100"
|
|
26
|
+
],
|
|
27
|
+
blockEndFade: [
|
|
28
|
+
"uy:pointer-events-none uy:absolute uy:inset-x-0 uy:bottom-0 uy:z-10 uy:h-300",
|
|
29
|
+
"uy:bg-gradient-to-t uy:to-transparent uy:opacity-0",
|
|
30
|
+
"uy:group-data-[scrollable-block-end=true]/scroll-area:opacity-100"
|
|
31
|
+
]
|
|
32
|
+
},
|
|
33
|
+
variants: {
|
|
34
|
+
axis: {
|
|
35
|
+
inline: { viewport: "uy:overflow-x-auto uy:overflow-y-hidden" },
|
|
36
|
+
block: { viewport: "uy:overflow-x-hidden uy:overflow-y-auto" },
|
|
37
|
+
both: { viewport: "uy:overflow-auto" }
|
|
38
|
+
},
|
|
39
|
+
fadeColor: {
|
|
40
|
+
"surface.neutral": t("uy:from-surface-neutral"),
|
|
41
|
+
"surface.neutral.low": t("uy:from-surface-neutral-low"),
|
|
42
|
+
"surface.neutral.lowest": t("uy:from-surface-neutral-lowest"),
|
|
43
|
+
"surface.neutral.highest": t("uy:from-surface-neutral-highest"),
|
|
44
|
+
"surface.inverted": t("uy:from-surface-inverted"),
|
|
45
|
+
"surface.primary": t("uy:from-surface-primary"),
|
|
46
|
+
"surface.primary.lowest": t("uy:from-surface-primary-lowest"),
|
|
47
|
+
"surface.success": t("uy:from-surface-success"),
|
|
48
|
+
"surface.success.lowest": t("uy:from-surface-success-lowest"),
|
|
49
|
+
"surface.info": t("uy:from-surface-info"),
|
|
50
|
+
"surface.info.lowest": t("uy:from-surface-info-lowest"),
|
|
51
|
+
"surface.warning": t("uy:from-surface-warning"),
|
|
52
|
+
"surface.warning.lowest": t("uy:from-surface-warning-lowest"),
|
|
53
|
+
"surface.danger": t("uy:from-surface-danger"),
|
|
54
|
+
"surface.danger.lowest": t("uy:from-surface-danger-lowest"),
|
|
55
|
+
"surface.promo": t("uy:from-surface-promo"),
|
|
56
|
+
"surface.decorative-teal": t("uy:from-surface-decorative-teal"),
|
|
57
|
+
"surface.decorative-purple": t("uy:from-surface-decorative-purple"),
|
|
58
|
+
"surface.decorative-plum": t("uy:from-surface-decorative-plum"),
|
|
59
|
+
"surface.decorative-orange": t("uy:from-surface-decorative-orange")
|
|
60
|
+
}
|
|
61
|
+
},
|
|
62
|
+
defaultVariants: { fadeColor: "surface.neutral" }
|
|
63
|
+
});
|
|
64
|
+
//#endregion
|
|
65
|
+
export { n as scrollArea };
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { MutableRefObject, UIEventHandler } from 'react';
|
|
2
|
+
import { ScrollAreaAxis, ScrollEdges } from '../utils/scroll-edges.js';
|
|
3
|
+
export interface UseScrollEdgesOptions {
|
|
4
|
+
axis?: ScrollAreaAxis;
|
|
5
|
+
}
|
|
6
|
+
export interface UseScrollEdgesResult<T extends HTMLElement> {
|
|
7
|
+
scrollEdges: ScrollEdges;
|
|
8
|
+
scrollRef: MutableRefObject<T | null>;
|
|
9
|
+
refreshScrollEdges: () => void;
|
|
10
|
+
onScroll: UIEventHandler<T>;
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* Measures a native scroll viewport and reports whether content remains at its
|
|
14
|
+
* logical inline and block edges. It intentionally owns no visual treatment,
|
|
15
|
+
* so native scrollers such as textareas can reuse it.
|
|
16
|
+
*/
|
|
17
|
+
export declare function useScrollEdges<T extends HTMLElement = HTMLDivElement>({ axis, }?: UseScrollEdgesOptions): UseScrollEdgesResult<T>;
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { areScrollEdgesEqual as e, emptyScrollEdges as t, getScrollEdges as n } from "../utils/scroll-edges.js";
|
|
2
|
+
import { useCallback as r, useLayoutEffect as i, useRef as a, useState as o } from "react";
|
|
3
|
+
//#region src/core/hooks/use-scroll-edges.ts
|
|
4
|
+
function s({ axis: s = "both" } = {}) {
|
|
5
|
+
let c = a(null), [l, u] = o(t), d = r(() => {
|
|
6
|
+
let r = c.current, i = r ? n(r, s) : t;
|
|
7
|
+
u((t) => e(t, i) ? t : i);
|
|
8
|
+
}, [s]), f = r(() => {
|
|
9
|
+
d();
|
|
10
|
+
}, [d]);
|
|
11
|
+
return i(() => {
|
|
12
|
+
let e = c.current;
|
|
13
|
+
if (!e) return;
|
|
14
|
+
d();
|
|
15
|
+
let t = requestAnimationFrame(d), n = typeof ResizeObserver > "u" ? void 0 : new ResizeObserver(d), r = typeof MutationObserver > "u" ? void 0 : new MutationObserver(() => {
|
|
16
|
+
i(), d();
|
|
17
|
+
}), i = () => {
|
|
18
|
+
n?.disconnect(), n?.observe(e), e.querySelectorAll("*").forEach((e) => n?.observe(e));
|
|
19
|
+
};
|
|
20
|
+
return i(), r?.observe(e, {
|
|
21
|
+
attributes: !0,
|
|
22
|
+
childList: !0,
|
|
23
|
+
subtree: !0,
|
|
24
|
+
characterData: !0
|
|
25
|
+
}), () => {
|
|
26
|
+
cancelAnimationFrame(t), n?.disconnect(), r?.disconnect();
|
|
27
|
+
};
|
|
28
|
+
}, [d]), {
|
|
29
|
+
scrollEdges: l,
|
|
30
|
+
scrollRef: c,
|
|
31
|
+
refreshScrollEdges: d,
|
|
32
|
+
onScroll: f
|
|
33
|
+
};
|
|
34
|
+
}
|
|
35
|
+
//#endregion
|
|
36
|
+
export { s as useScrollEdges };
|
package/dist/esm/core/index.d.ts
CHANGED
|
@@ -215,3 +215,4 @@ export * from './hooks/use-breakpoint-listener.js';
|
|
|
215
215
|
export * from './hooks/use-container-query-level.js';
|
|
216
216
|
export * from './hooks/use-media-query.js';
|
|
217
217
|
export * from './providers/router/RouterProvider.js';
|
|
218
|
+
export * from './components/scroll-area/ScrollArea.js';
|
package/dist/esm/core/index.js
CHANGED
|
@@ -216,4 +216,5 @@ import { toast as Pi } from "./components/toast/toast.js";
|
|
|
216
216
|
import { ToggleSwitchGroup as Fi, toggleSwitchGroup as Ii } from "./components/toggle-switch-group/ToggleSwitchGroup.js";
|
|
217
217
|
import { ToggleSwitch as Li, toggleSwitch as Ri } from "./components/toggle-switch/ToggleSwitch.js";
|
|
218
218
|
import { useAsyncList as zi } from "./hooks/use-async-list.js";
|
|
219
|
-
|
|
219
|
+
import { ScrollArea as Bi } from "./components/scroll-area/ScrollArea.js";
|
|
220
|
+
export { v as ActionBar, u as ActionBarButton, p as ActionBarIconButton, y as ActionBarRoot, e as Actionable, C as Alert, w as AlertActions, D as AlertContent, O as AlertTitle, k as Anchor, A as AppLayout, F as AppMenu, M as AppMenuContext, N as AppMenuContextProvider, W as AppMenuFooter, J as AppMenuHeader, Y as AppMenuNavContent, U as AppProfileMenuButton, j as AppTopBar, X as Autocomplete, Z as AutocompleteItem, $ as AutocompleteItemGroup, z as Avatar, V as AvatarFallback, oe as AvatarGroup, ae as AvatarGroupCount, re as AvatarIcon, H as AvatarImage, ie as AvatarPair, te as AvatarWithTooltip, G as BRAND_ASSETS, Ce as BREADCRUMB_ITEM_MAX_WIDTH, R as Badge, se as BadgeDot, ce as BottomSheet, ue as BottomSheetContent, fe as BottomSheetFooter, me as BottomSheetHeader, _e as Breadcrumb, ge as Breadcrumbs, l as Button, Fe as Card, Re as CardContent, Le as CardTitle, De as Carousel, je as CarouselContent, ke as CarouselHeader, Te as CarouselNav, Ne as CarouselSlide, He as Checkbox, Be as CheckboxGroup, Ue as CheckboxStandalone, x as CircularIconButton, We as Collapsible, Ge as CollapsibleContent, qe as CollapsibleGroup, Ke as CollapsibleTitle, n as DESKTOP_BREAKPOINTS, Je as DateCalendar, Ye as DatePicker, Xe as DateRangeCalendar, Ze as DateRangePicker, $e as DefinitionItem, Qe as DefinitionList, et as DefinitionTooltip, nt as Dialog, at as DialogActions, tt as DialogButton, ot as DialogContent, st as DialogTitle, rt as DialogTrigger, ht as EmptyState, vt as EmptyStateActions, _t as EmptyStateContent, yt as EmptyStateGetStarted, xt as EmptyStateGoodJob, gt as EmptyStateIcon, Ct as EmptyStateNoSearchResults, St as EmptyStateUpgradeRequired, wt as EmptyStateUseDesktop, bt as EmptyStateWaitingForData, Et as ErrorState, At as FieldGroup, Ot as Fieldset, jt as Filter, Mt as FilterControls, Nt as FilterLabels, Rt as FilterToolbar, Ht as Flex, Wt as FlexItem, It as FloatingActionBar, Kt as FullPageLoader, cn as FunnelBackButton, Qt as FunnelBody, Xt as FunnelLayout, en as FunnelPage, nn as FunnelPageAction, rn as FunnelPageActions, on as FunnelPageContent, ln as FunnelPageFooter, dn as FunnelPageHeader, pn as FunnelSidebar, hn as FunnelTopBar, yn as Grid, bn as GridItem, s as Icon, f as IconButton, xn as Input, ne as InteractiveAvatar, ze as Label, Cn as ListView, On as ListViewItemLabel, kn as ListViewItemText, En as ListViewSection, r as MOBILE_BREAKPOINTS, m as Menu, h as MenuContent, L as MenuHeader, An as MenuSection, I as MenuSeparator, g as MenuTrigger, Nn as MultiSelect, Pn as MultiSelectOptGroup, Fn as MultiSelectOption, In as Nav, zn as NavGroup, Wn as NavigationCardDescription, Vn as NavigationCardGroup, Un as NavigationCardLabel, ve as NoopRouterProvider, Gn as NumberInput, qn as Page, Yn as PageHeader, Zn as PageHeading, Qn as Pagination, er as PaginationContent, sr as PaginationEllipsis, nr as PaginationItem, K as PayFitBrand, q as PayFitBrandPreprod, ur as PhoneNumberInput, dr as Pill, fr as Popover, pr as PopoverTrigger, mr as ProgressBar, dt as PromoDialog, ct as PromoDialogActions, mt as PromoDialogContent, lt as PromoDialogHero, pt as PromoDialogSubtitle, ut as PromoDialogTitle, vr as RadioButton, hr as RadioButtonGroup, gr as RadioButtonHelper, _r as RadioIndicator, we as RawBreadcrumbLink, xe as RawLink, Sn as RawLinkButton, wn as RawListViewItem, _ as RawMenuItem, Ln as RawNavItem, Bn as RawNavigationCard, rr as RawPaginationLink, or as RawPaginationNext, ar as RawPaginationPrevious, xi as RawSubTask, hi as RawTab, Ci as RawTask, ye as RouterProvider, Bi as ScrollArea, jn as Search, xr as SegmentedButtonGroup, Mr as Select, jr as SelectButton, Nr as SelectOption, Pr as SelectOptionGroup, Fr as SelectOptionHelper, Tr as SelectableButton, Cr as SelectableButtonGroup, Or as SelectableCardCheckbox, Dr as SelectableCardCheckboxGroup, Ar as SelectableCardRadio, kr as SelectableCardRadioGroup, Ir as SidePanel, Rr as SidePanelContent, Br as SidePanelFooter, Hr as SidePanelHeader, br as Skeleton, Jt as SkipLink, Yt as SkipLinks, c as Spinner, Ut as Stack, Gt as StackItem, Gr as Step, Wr as Stepper, Mi as TOAST_CONFIG, gi as TabList, _i as TabPanel, vi as TabPanels, qr as Table, Yr as TableBody, Zr as TableCell, $r as TableColumnHeader, ti as TableEmptyState, ni as TableEmptyStateError, ri as TableEmptyStateLoading, ii as TableEmptyStateNoData, ai as TableEmptyStateText, ci as TableHeader, oi as TableNoSearchResults, ui as TablePagination, Jr as TableRoot, fi as TableRow, mi as Tabs, Ti as TaskGroup, yi as TaskMenu, E as Text, Ei as TextArea, Oi as Timeline, ki as TimelineStep, ji as TimelineStepDescription, Ai as TimelineStepHeader, Ni as ToastManager, Sr as ToggleButton, Li as ToggleSwitch, Fi as ToggleSwitchGroup, d as Tooltip, b as actionBarRoot, Q as autocompleteItem, ee as autocompleteItemGroup, le as bottomSheet, de as bottomSheetContent, pe as bottomSheetFooter, he as bottomSheetHeader, Ie as card, Oe as carousel, Me as carouselContent, Ae as carouselHeader, Ee as carouselNav, Pe as carouselSlide, Ve as checkboxGroup, S as circularIconButton, it as dialog, Dt as errorState, kt as fieldset, Pt as filterContainer, Ft as filterDismissButton, zt as filterToolbar, Bt as flex, Vt as flexItem, Lt as floatingActionBar, qt as fullPageLoader, $t as funnelBody, Zt as funnelLayout, tn as funnelPage, an as funnelPageActions, sn as funnelPageContent, un as funnelPageFooter, fn as funnelPageHeader, mn as funnelSidebar, gn as funnelTopBar, B as getInitials, _n as grid, vn as gridItem, i as isDesktopBreakpoint, a as isMobileBreakpoint, Se as link, Tn as listViewItem, Dn as listViewSection, Rn as navItemBase, Hn as navigationCardGroup, Kn as numberInput, Jn as page, Xn as pageHeader, $n as pagination, tr as paginationContent, ir as paginationLink, ft as promoDialog, yr as radioButton, Si as rawSubTask, wi as rawTask, Mn as search, Er as selectableButton, wr as selectableButtonGroup, Lr as sidePanel, zr as sidePanelContent, Vr as sidePanelFooter, Ur as sidePanelHeader, Xr as tableBody, Qr as tableCell, ei as tableColumnHeader, si as tableEmptyState, li as tableHeader, di as tablePagination, pi as tableRow, bi as taskMenu, T as text, Di as textArea, Pi as toast, Ri as toggleSwitch, Ii as toggleSwitchGroup, P as useAppMenuContext, zi as useAsyncList, o as useBreakpointListener, Tt as useContainerQueryLevel, t as useMediaQuery, lr as usePaginationState, cr as usePaginationWindow, be as useRouter, Kr as useStepper };
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export type ScrollAreaAxis = 'inline' | 'block' | 'both';
|
|
2
|
+
export type RtlScrollOffsetType = 'default' | 'negative' | 'reverse';
|
|
3
|
+
export interface ScrollEdges {
|
|
4
|
+
hasOverflowInline: boolean;
|
|
5
|
+
hasOverflowBlock: boolean;
|
|
6
|
+
canScrollInlineStart: boolean;
|
|
7
|
+
canScrollInlineEnd: boolean;
|
|
8
|
+
canScrollBlockStart: boolean;
|
|
9
|
+
canScrollBlockEnd: boolean;
|
|
10
|
+
}
|
|
11
|
+
export declare const SCROLL_EDGE_TOLERANCE = 1;
|
|
12
|
+
export declare const emptyScrollEdges: ScrollEdges;
|
|
13
|
+
export declare function getLogicalInlineScrollOffset(element: Pick<HTMLElement, 'clientWidth' | 'scrollLeft' | 'scrollWidth'>, direction: 'ltr' | 'rtl', rtlOffsetType?: RtlScrollOffsetType): number;
|
|
14
|
+
export declare function getScrollEdges(element: HTMLElement, axis?: ScrollAreaAxis): ScrollEdges;
|
|
15
|
+
export declare function areScrollEdgesEqual(current: ScrollEdges, next: ScrollEdges): boolean;
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
var e = {
|
|
2
|
+
hasOverflowInline: !1,
|
|
3
|
+
hasOverflowBlock: !1,
|
|
4
|
+
canScrollInlineStart: !1,
|
|
5
|
+
canScrollInlineEnd: !1,
|
|
6
|
+
canScrollBlockStart: !1,
|
|
7
|
+
canScrollBlockEnd: !1
|
|
8
|
+
}, t;
|
|
9
|
+
function n() {
|
|
10
|
+
if (t) return t;
|
|
11
|
+
if (typeof document > "u") return "negative";
|
|
12
|
+
let e = document.createElement("div"), n = document.createElement("div");
|
|
13
|
+
return e.dir = "rtl", e.style.cssText = "width:4px;height:1px;overflow:scroll;visibility:hidden;position:absolute;top:-9999px;", n.style.width = "8px", e.append(n), document.body.append(e), e.scrollLeft > 0 ? t = "default" : (e.scrollLeft = 1, t = e.scrollLeft === 0 ? "negative" : "reverse"), e.remove(), t;
|
|
14
|
+
}
|
|
15
|
+
function r(e, t) {
|
|
16
|
+
return Math.min(Math.max(e, 0), t);
|
|
17
|
+
}
|
|
18
|
+
function i(e, t, i = n()) {
|
|
19
|
+
let a = Math.max(e.scrollWidth - e.clientWidth, 0);
|
|
20
|
+
if (t === "ltr") return r(e.scrollLeft, a);
|
|
21
|
+
switch (i) {
|
|
22
|
+
case "default": return r(a - e.scrollLeft, a);
|
|
23
|
+
case "negative": return r(-e.scrollLeft, a);
|
|
24
|
+
case "reverse": return r(e.scrollLeft, a);
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
function a(e) {
|
|
28
|
+
return e > 1;
|
|
29
|
+
}
|
|
30
|
+
function o(e, t) {
|
|
31
|
+
return t - e > 1;
|
|
32
|
+
}
|
|
33
|
+
function s(e, t = "both") {
|
|
34
|
+
let n = t === "inline" || t === "both", s = t === "block" || t === "both", c = Math.max(e.scrollWidth - e.clientWidth, 0), l = Math.max(e.scrollHeight - e.clientHeight, 0), u = i(e, getComputedStyle(e).direction === "rtl" ? "rtl" : "ltr"), d = r(e.scrollTop, l), f = n && c > 1, p = s && l > 1;
|
|
35
|
+
return {
|
|
36
|
+
hasOverflowInline: f,
|
|
37
|
+
hasOverflowBlock: p,
|
|
38
|
+
canScrollInlineStart: f && a(u),
|
|
39
|
+
canScrollInlineEnd: f && o(u, c),
|
|
40
|
+
canScrollBlockStart: p && a(d),
|
|
41
|
+
canScrollBlockEnd: p && o(d, l)
|
|
42
|
+
};
|
|
43
|
+
}
|
|
44
|
+
function c(e, t) {
|
|
45
|
+
return e.hasOverflowInline === t.hasOverflowInline && e.hasOverflowBlock === t.hasOverflowBlock && e.canScrollInlineStart === t.canScrollInlineStart && e.canScrollInlineEnd === t.canScrollInlineEnd && e.canScrollBlockStart === t.canScrollBlockStart && e.canScrollBlockEnd === t.canScrollBlockEnd;
|
|
46
|
+
}
|
|
47
|
+
//#endregion
|
|
48
|
+
export { c as areScrollEdgesEqual, e as emptyScrollEdges, i as getLogicalInlineScrollOffset, s as getScrollEdges };
|
|
@@ -646,6 +646,24 @@ export declare const catalogEntries: ({
|
|
|
646
646
|
tags: ("type:component" | "category:inputs" | "behavior:editing" | "behavior:multi-selection" | "behavior:selection")[];
|
|
647
647
|
title: string;
|
|
648
648
|
principal?: undefined;
|
|
649
|
+
} | {
|
|
650
|
+
description: string;
|
|
651
|
+
docsHref: string;
|
|
652
|
+
id: string;
|
|
653
|
+
keywords: string[];
|
|
654
|
+
preview: {
|
|
655
|
+
type: "story";
|
|
656
|
+
story: string;
|
|
657
|
+
storyId: string;
|
|
658
|
+
zoom?: undefined;
|
|
659
|
+
src?: undefined;
|
|
660
|
+
alt?: undefined;
|
|
661
|
+
};
|
|
662
|
+
related: never[];
|
|
663
|
+
section: "components";
|
|
664
|
+
tags: ("type:component" | "category:layout")[];
|
|
665
|
+
title: string;
|
|
666
|
+
principal?: undefined;
|
|
649
667
|
} | {
|
|
650
668
|
description: string;
|
|
651
669
|
docsHref: string;
|
package/dist/esm/index.js
CHANGED
|
@@ -216,17 +216,18 @@ import { toast as Pi } from "./core/components/toast/toast.js";
|
|
|
216
216
|
import { ToggleSwitchGroup as Fi, toggleSwitchGroup as Ii } from "./core/components/toggle-switch-group/ToggleSwitchGroup.js";
|
|
217
217
|
import { ToggleSwitch as Li, toggleSwitch as Ri } from "./core/components/toggle-switch/ToggleSwitch.js";
|
|
218
218
|
import { useAsyncList as zi } from "./core/hooks/use-async-list.js";
|
|
219
|
-
import {
|
|
220
|
-
import {
|
|
221
|
-
import {
|
|
222
|
-
import {
|
|
223
|
-
import {
|
|
224
|
-
import {
|
|
225
|
-
import {
|
|
226
|
-
import {
|
|
227
|
-
import {
|
|
228
|
-
import {
|
|
229
|
-
import {
|
|
230
|
-
import {
|
|
231
|
-
import {
|
|
232
|
-
|
|
219
|
+
import { ScrollArea as Bi } from "./core/components/scroll-area/ScrollArea.js";
|
|
220
|
+
import { useFieldContext as Vi, useFormContext as Hi } from "./modules/tanstack-form/hooks/tanstack-form-context.js";
|
|
221
|
+
import { useTanstackUnityForm as Ui, withFieldGroup as Wi, withForm as Gi } from "./modules/tanstack-form/hooks/use-tanstack-form.js";
|
|
222
|
+
import { tanstackFormDefaultValues as Ki } from "./modules/tanstack-form/hooks/tanstack-form-default-values.js";
|
|
223
|
+
import { useFieldA11yContext as qi } from "./modules/tanstack-form/components/form-field/TanstackFormField.context.js";
|
|
224
|
+
import { fieldRevalidateLogic as Ji } from "./modules/tanstack-form/utils/field-revalidate-logic.js";
|
|
225
|
+
import { StandardSchemaAdapter as Yi } from "./modules/tanstack-form/adapters/standardSchemaAdapter.js";
|
|
226
|
+
import { ZodV3SchemaAdapter as Xi, ZodV4SchemaAdapter as Zi } from "./modules/tanstack-form/adapters/zodAdapter.js";
|
|
227
|
+
import { createSchemaAdapter as Qi } from "./modules/tanstack-form/utils/createSchemaAdapter.js";
|
|
228
|
+
import { ColumnSortHeader as $i, isSortableHeader as ea } from "./modules/tanstack-table/components/data-table/parts/ColumnSortHeader.js";
|
|
229
|
+
import { DataTable as ta } from "./modules/tanstack-table/components/data-table/DataTable.js";
|
|
230
|
+
import { DataTableRoot as na, dataTableRoot as ra } from "./modules/tanstack-table/components/data-table/parts/DataTableRoot.js";
|
|
231
|
+
import { DataTableBulkActions as ia } from "./modules/tanstack-table/components/data-table-bulk-actions/DataTableBulkActions.js";
|
|
232
|
+
import { FilterAdapters as aa } from "./modules/tanstack-table/adapters/filter-adapters.js";
|
|
233
|
+
export { v as ActionBar, u as ActionBarButton, p as ActionBarIconButton, y as ActionBarRoot, e as Actionable, C as Alert, w as AlertActions, D as AlertContent, O as AlertTitle, k as Anchor, A as AppLayout, F as AppMenu, M as AppMenuContext, N as AppMenuContextProvider, W as AppMenuFooter, J as AppMenuHeader, Y as AppMenuNavContent, U as AppProfileMenuButton, j as AppTopBar, X as Autocomplete, Z as AutocompleteItem, $ as AutocompleteItemGroup, z as Avatar, V as AvatarFallback, oe as AvatarGroup, ae as AvatarGroupCount, re as AvatarIcon, H as AvatarImage, ie as AvatarPair, te as AvatarWithTooltip, G as BRAND_ASSETS, Ce as BREADCRUMB_ITEM_MAX_WIDTH, R as Badge, se as BadgeDot, ce as BottomSheet, ue as BottomSheetContent, fe as BottomSheetFooter, me as BottomSheetHeader, _e as Breadcrumb, ge as Breadcrumbs, l as Button, Fe as Card, Re as CardContent, Le as CardTitle, De as Carousel, je as CarouselContent, ke as CarouselHeader, Te as CarouselNav, Ne as CarouselSlide, He as Checkbox, Be as CheckboxGroup, Ue as CheckboxStandalone, x as CircularIconButton, We as Collapsible, Ge as CollapsibleContent, qe as CollapsibleGroup, Ke as CollapsibleTitle, $i as ColumnSortHeader, n as DESKTOP_BREAKPOINTS, ta as DataTable, ia as DataTableBulkActions, na as DataTableRoot, Je as DateCalendar, Ye as DatePicker, Xe as DateRangeCalendar, Ze as DateRangePicker, $e as DefinitionItem, Qe as DefinitionList, et as DefinitionTooltip, nt as Dialog, at as DialogActions, tt as DialogButton, ot as DialogContent, st as DialogTitle, rt as DialogTrigger, ht as EmptyState, vt as EmptyStateActions, _t as EmptyStateContent, yt as EmptyStateGetStarted, xt as EmptyStateGoodJob, gt as EmptyStateIcon, Ct as EmptyStateNoSearchResults, St as EmptyStateUpgradeRequired, wt as EmptyStateUseDesktop, bt as EmptyStateWaitingForData, Et as ErrorState, At as FieldGroup, Ot as Fieldset, jt as Filter, aa as FilterAdapters, Mt as FilterControls, Nt as FilterLabels, Rt as FilterToolbar, Ht as Flex, Wt as FlexItem, It as FloatingActionBar, Kt as FullPageLoader, cn as FunnelBackButton, Qt as FunnelBody, Xt as FunnelLayout, en as FunnelPage, nn as FunnelPageAction, rn as FunnelPageActions, on as FunnelPageContent, ln as FunnelPageFooter, dn as FunnelPageHeader, pn as FunnelSidebar, hn as FunnelTopBar, yn as Grid, bn as GridItem, s as Icon, f as IconButton, xn as Input, ne as InteractiveAvatar, ze as Label, Cn as ListView, On as ListViewItemLabel, kn as ListViewItemText, En as ListViewSection, r as MOBILE_BREAKPOINTS, m as Menu, h as MenuContent, L as MenuHeader, An as MenuSection, I as MenuSeparator, g as MenuTrigger, Nn as MultiSelect, Pn as MultiSelectOptGroup, Fn as MultiSelectOption, In as Nav, zn as NavGroup, Wn as NavigationCardDescription, Vn as NavigationCardGroup, Un as NavigationCardLabel, ve as NoopRouterProvider, Gn as NumberInput, qn as Page, Yn as PageHeader, Zn as PageHeading, Qn as Pagination, er as PaginationContent, sr as PaginationEllipsis, nr as PaginationItem, K as PayFitBrand, q as PayFitBrandPreprod, ur as PhoneNumberInput, dr as Pill, fr as Popover, pr as PopoverTrigger, mr as ProgressBar, dt as PromoDialog, ct as PromoDialogActions, mt as PromoDialogContent, lt as PromoDialogHero, pt as PromoDialogSubtitle, ut as PromoDialogTitle, vr as RadioButton, hr as RadioButtonGroup, gr as RadioButtonHelper, _r as RadioIndicator, we as RawBreadcrumbLink, xe as RawLink, Sn as RawLinkButton, wn as RawListViewItem, _ as RawMenuItem, Ln as RawNavItem, Bn as RawNavigationCard, rr as RawPaginationLink, or as RawPaginationNext, ar as RawPaginationPrevious, xi as RawSubTask, hi as RawTab, Ci as RawTask, ye as RouterProvider, Bi as ScrollArea, jn as Search, xr as SegmentedButtonGroup, Mr as Select, jr as SelectButton, Nr as SelectOption, Pr as SelectOptionGroup, Fr as SelectOptionHelper, Tr as SelectableButton, Cr as SelectableButtonGroup, Or as SelectableCardCheckbox, Dr as SelectableCardCheckboxGroup, Ar as SelectableCardRadio, kr as SelectableCardRadioGroup, Ir as SidePanel, Rr as SidePanelContent, Br as SidePanelFooter, Hr as SidePanelHeader, br as Skeleton, Jt as SkipLink, Yt as SkipLinks, c as Spinner, Ut as Stack, Gt as StackItem, Yi as StandardSchemaAdapter, Gr as Step, Wr as Stepper, Mi as TOAST_CONFIG, gi as TabList, _i as TabPanel, vi as TabPanels, qr as Table, Yr as TableBody, Zr as TableCell, $r as TableColumnHeader, ti as TableEmptyState, ni as TableEmptyStateError, ri as TableEmptyStateLoading, ii as TableEmptyStateNoData, ai as TableEmptyStateText, ci as TableHeader, oi as TableNoSearchResults, ui as TablePagination, Jr as TableRoot, fi as TableRow, mi as Tabs, Ti as TaskGroup, yi as TaskMenu, E as Text, Ei as TextArea, Oi as Timeline, ki as TimelineStep, ji as TimelineStepDescription, Ai as TimelineStepHeader, Ni as ToastManager, Sr as ToggleButton, Li as ToggleSwitch, Fi as ToggleSwitchGroup, d as Tooltip, Xi as ZodV3SchemaAdapter, Zi as ZodV4SchemaAdapter, b as actionBarRoot, Q as autocompleteItem, ee as autocompleteItemGroup, le as bottomSheet, de as bottomSheetContent, pe as bottomSheetFooter, he as bottomSheetHeader, Ie as card, Oe as carousel, Me as carouselContent, Ae as carouselHeader, Ee as carouselNav, Pe as carouselSlide, Ve as checkboxGroup, S as circularIconButton, Qi as createSchemaAdapter, ra as dataTableRoot, it as dialog, Dt as errorState, Ji as fieldRevalidateLogic, kt as fieldset, Pt as filterContainer, Ft as filterDismissButton, zt as filterToolbar, Bt as flex, Vt as flexItem, Lt as floatingActionBar, qt as fullPageLoader, $t as funnelBody, Zt as funnelLayout, tn as funnelPage, an as funnelPageActions, sn as funnelPageContent, un as funnelPageFooter, fn as funnelPageHeader, mn as funnelSidebar, gn as funnelTopBar, B as getInitials, _n as grid, vn as gridItem, i as isDesktopBreakpoint, a as isMobileBreakpoint, ea as isSortableHeader, Se as link, Tn as listViewItem, Dn as listViewSection, Rn as navItemBase, Hn as navigationCardGroup, Kn as numberInput, Jn as page, Xn as pageHeader, $n as pagination, tr as paginationContent, ir as paginationLink, ft as promoDialog, yr as radioButton, Si as rawSubTask, wi as rawTask, Mn as search, Er as selectableButton, wr as selectableButtonGroup, Lr as sidePanel, zr as sidePanelContent, Vr as sidePanelFooter, Ur as sidePanelHeader, Xr as tableBody, Qr as tableCell, ei as tableColumnHeader, si as tableEmptyState, li as tableHeader, di as tablePagination, pi as tableRow, Ki as tanstackFormDefaultValues, bi as taskMenu, T as text, Di as textArea, Pi as toast, Ri as toggleSwitch, Ii as toggleSwitchGroup, P as useAppMenuContext, zi as useAsyncList, o as useBreakpointListener, Tt as useContainerQueryLevel, qi as useFieldA11yContext, Vi as useFieldContext, Hi as useFormContext, t as useMediaQuery, lr as usePaginationState, cr as usePaginationWindow, be as useRouter, Kr as useStepper, Ui as useTanstackUnityForm, Wi as withFieldGroup, Gi as withForm };
|
|
@@ -4,51 +4,53 @@ import { uyTv as n } from "@payfit/unity-themes";
|
|
|
4
4
|
var r = n({
|
|
5
5
|
slots: {
|
|
6
6
|
base: [
|
|
7
|
-
"uy:flex uy:min-h-
|
|
7
|
+
"uy:flex uy:min-h-15 uy:rounded-200 uy:border-1 uy:px-200 uy:py-150 uy:data-[state=\"enabled\"]:shadow-100",
|
|
8
8
|
"uy:bg-surface-neutral",
|
|
9
|
-
"uy:[--uy-ai-gradient-border-width:
|
|
9
|
+
"uy:[--uy-ai-gradient-border-width:1px]",
|
|
10
10
|
"uy:[--uy-ai-gradient-border-opacity:0]",
|
|
11
11
|
"uy:[--uy-ai-gradient-surface-opacity:0]",
|
|
12
12
|
"uy:[--uy-ai-gradient-animation-play-state:paused]",
|
|
13
13
|
"uy:[--uy-ai-gradient-glow-opacity:0%]",
|
|
14
14
|
"uy:data-[state=\"enabled\"]:border-border-neutral",
|
|
15
15
|
"uy:data-[state=\"disabled\"]:cursor-not-allowed uy:data-[state=\"disabled\"]:bg-surface-neutral-disabled uy:data-[state=\"disabled\"]:border-border-neutral-disabled",
|
|
16
|
-
"uy:hover:border-border-neutral-hover",
|
|
17
|
-
"uy:data-[
|
|
18
|
-
"uy:
|
|
19
|
-
"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",
|
|
20
|
-
"uy:data-[focus-within=\"true\"]:[--uy-ai-gradient-border-width:2px]",
|
|
16
|
+
"uy:not-data-[state='disabled']:hover:border-border-neutral-hover uy:not-data-[state='disabled']:hover:shadow-200",
|
|
17
|
+
"uy:has-data-[focus-visible=\"true\"]:outline-2 uy:has-data-[focus-visible=\"true\"]:outline-solid uy:has-data-[focus-visible=\"true\"]:outline-offset-2 uy:has-data-[focus-visible=\"true\"]:outline-utility-focus-ring",
|
|
18
|
+
"uy:data-[focus-within=\"true\"]:[--uy-ai-gradient-border-width:1px]",
|
|
21
19
|
"uy:data-[focus-within=\"true\"]:[--uy-ai-gradient-border-opacity:1]",
|
|
22
20
|
"uy:data-[focus-within=\"true\"]:[--uy-ai-gradient-animation-play-state:paused]",
|
|
23
|
-
"uy:data-[focus-visible=\"true\"]:[--uy-ai-gradient-border-width:
|
|
21
|
+
"uy:data-[focus-visible=\"true\"]:[--uy-ai-gradient-border-width:1px]",
|
|
24
22
|
"uy:data-[focus-visible=\"true\"]:[--uy-ai-gradient-border-opacity:1]",
|
|
25
23
|
"uy:data-[focus-visible=\"true\"]:[--uy-ai-gradient-animation-play-state:paused]",
|
|
26
|
-
"uy:data-[has-value=\"true\"]:[--uy-ai-gradient-border-width:
|
|
24
|
+
"uy:data-[has-value=\"true\"]:[--uy-ai-gradient-border-width:1px]",
|
|
27
25
|
"uy:data-[has-value=\"true\"]:[--uy-ai-gradient-border-opacity:1]",
|
|
28
|
-
"uy:data-[has-value=\"true\"]:data-[focus-within=\"true\"]:[--uy-ai-gradient-border-width:
|
|
26
|
+
"uy:data-[has-value=\"true\"]:data-[focus-within=\"true\"]:[--uy-ai-gradient-border-width:1px]",
|
|
29
27
|
"uy:data-[has-value=\"true\"]:data-[focus-within=\"true\"]:[--uy-ai-gradient-animation-play-state:running]",
|
|
30
|
-
"uy:data-[state=\"
|
|
28
|
+
"uy:not-data-[state=\"disabled\"]:data-[has-value=\"true\"]:shadow-300",
|
|
29
|
+
"uy:data-[state=\"loading\"]:[--uy-ai-gradient-border-width:1px]",
|
|
31
30
|
"uy:data-[state=\"loading\"]:[--uy-ai-gradient-border-opacity:1]",
|
|
32
|
-
"uy:data-[state=\"loading\"]:[--uy-ai-gradient-surface-opacity:0
|
|
31
|
+
"uy:data-[state=\"loading\"]:[--uy-ai-gradient-surface-opacity:0]",
|
|
33
32
|
"uy:data-[state=\"loading\"]:[--uy-ai-gradient-animation-play-state:running]",
|
|
34
|
-
"uy:data-[state=\"loading\"]:[--uy-ai-gradient-glow-opacity:
|
|
33
|
+
"uy:data-[state=\"loading\"]:[--uy-ai-gradient-glow-opacity:5%]",
|
|
35
34
|
"uy:data-[state=\"loading\"]:[--uy-ai-gradient-glow-visibility:1]",
|
|
36
|
-
"uy:data-[state=\"streaming\"]:[--uy-ai-gradient-border-width:
|
|
35
|
+
"uy:data-[state=\"streaming\"]:[--uy-ai-gradient-border-width:1px]",
|
|
37
36
|
"uy:data-[state=\"streaming\"]:[--uy-ai-gradient-border-opacity:1]",
|
|
38
|
-
"uy:data-[state=\"streaming\"]:[--uy-ai-gradient-surface-opacity:0.
|
|
37
|
+
"uy:data-[state=\"streaming\"]:[--uy-ai-gradient-surface-opacity:0.02]",
|
|
39
38
|
"uy:data-[state=\"streaming\"]:[--uy-ai-gradient-animation-play-state:running]",
|
|
40
|
-
"uy:data-[state=\"streaming\"]:[--uy-ai-gradient-glow-opacity:
|
|
39
|
+
"uy:data-[state=\"streaming\"]:[--uy-ai-gradient-glow-opacity:5%]",
|
|
41
40
|
"uy:data-[state=\"streaming\"]:[--uy-ai-gradient-glow-visibility:1]",
|
|
42
|
-
"uy:data-[state=\"loading\"]:data-[focus-within=\"true\"]:[--uy-ai-gradient-border-width:
|
|
43
|
-
"uy:data-[state=\"loading\"]:data-[has-value=\"true\"]:[--uy-ai-gradient-border-width:
|
|
44
|
-
"uy:data-[state=\"
|
|
45
|
-
"uy:data-[state=\"streaming\"]:data-[
|
|
46
|
-
"uy:data-[state=\"
|
|
41
|
+
"uy:data-[state=\"loading\"]:data-[focus-within=\"true\"]:[--uy-ai-gradient-border-width:1px]",
|
|
42
|
+
"uy:data-[state=\"loading\"]:data-[has-value=\"true\"]:[--uy-ai-gradient-border-width:1px]",
|
|
43
|
+
"uy:data-[state=\"loading\"]:shadow-none",
|
|
44
|
+
"uy:data-[state=\"streaming\"]:data-[focus-within=\"true\"]:[--uy-ai-gradient-border-width:1px]",
|
|
45
|
+
"uy:data-[state=\"streaming\"]:data-[has-value=\"true\"]:[--uy-ai-gradient-border-width:1px]",
|
|
46
|
+
"uy:data-[state=\"streaming\"]:shadow-none",
|
|
47
|
+
"uy:data-[state=\"disabled\"]:[--uy-ai-gradient-border-width:1px]",
|
|
47
48
|
"uy:data-[state=\"disabled\"]:[--uy-ai-gradient-border-opacity:0]",
|
|
48
49
|
"uy:data-[state=\"disabled\"]:[--uy-ai-gradient-surface-opacity:0]",
|
|
49
50
|
"uy:data-[state=\"disabled\"]:[--uy-ai-gradient-animation-play-state:paused]",
|
|
50
51
|
"uy:data-[state=\"disabled\"]:[--uy-ai-gradient-glow-opacity:0%]",
|
|
51
52
|
"uy:data-[state=\"disabled\"]:[--uy-ai-gradient-glow-visibility:0]",
|
|
53
|
+
"uy:data-[state=\"disabled\"]:shadow-none",
|
|
52
54
|
e({
|
|
53
55
|
gradient: "linear",
|
|
54
56
|
glow: !0
|
|
@@ -5,11 +5,11 @@ import { jsx as r, jsxs as i } from "react/jsx-runtime";
|
|
|
5
5
|
var a = n({
|
|
6
6
|
slots: {
|
|
7
7
|
base: "uy:flex uy:items-start uy:gap-50",
|
|
8
|
-
alertMessage: "uy:min-w-0 uy:whitespace-pre-wrap"
|
|
8
|
+
alertMessage: "uy:min-w-0 uy:whitespace-pre-wrap uy:typography-body-small-strong"
|
|
9
9
|
},
|
|
10
10
|
variants: { variant: {
|
|
11
|
-
warning: { alertMessage: "uy:
|
|
12
|
-
error: { alertMessage: "uy:
|
|
11
|
+
warning: { alertMessage: "uy:text-content-warning-high" },
|
|
12
|
+
error: { alertMessage: "uy:text-content-danger" }
|
|
13
13
|
} }
|
|
14
14
|
}), o = ({ children: n, variant: o, className: s, ...c }) => {
|
|
15
15
|
let { base: l, alertMessage: u } = a({ variant: o }), d = o === "error" ? "WarningCircleFilled" : "WarningFilled", f = o === "error" ? "content.danger" : "content.warning";
|
|
@@ -1,39 +1,38 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
1
|
+
import { ScrollArea as e } from "../../../../../core/components/scroll-area/ScrollArea.js";
|
|
2
|
+
import { forwardRef as t } from "react";
|
|
3
|
+
import { uyTv as n } from "@payfit/unity-themes";
|
|
4
|
+
import { jsx as r } from "react/jsx-runtime";
|
|
5
|
+
import { useIntl as i } from "react-intl";
|
|
6
|
+
import { TagGroup as a, TagList as o } from "react-aria-components/TagGroup";
|
|
6
7
|
//#region src/modules/ai-kit/components/ai-composer/parts/AIComposerAttachmentsGroup.tsx
|
|
7
|
-
var
|
|
8
|
-
|
|
9
|
-
base: [
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
let f = r(), { base: p, clip: m } = o();
|
|
16
|
-
return /* @__PURE__ */ n(i, {
|
|
17
|
-
ref: d,
|
|
18
|
-
...u,
|
|
8
|
+
var s = n({ slots: {
|
|
9
|
+
scrollArea: "uy:w-full uy:min-w-0 uy:[contain:paint]",
|
|
10
|
+
base: ["uy:flex uy:w-full uy:min-w-0 uy:flex-nowrap uy:items-start uy:gap-50 uy:mb-125 uy:p-50"]
|
|
11
|
+
} }), c = t(({ children: t, items: n, onRemove: c, renderEmptyState: l, "aria-label": u, ...d }, f) => {
|
|
12
|
+
let p = i(), { base: m, scrollArea: h } = s();
|
|
13
|
+
return /* @__PURE__ */ r(a, {
|
|
14
|
+
ref: f,
|
|
15
|
+
...d,
|
|
19
16
|
className: "uy:w-full uy:min-w-0",
|
|
20
17
|
selectionMode: "none",
|
|
21
|
-
onRemove:
|
|
22
|
-
"aria-label":
|
|
18
|
+
onRemove: c,
|
|
19
|
+
"aria-label": u ?? p.formatMessage({
|
|
23
20
|
id: "unity:module:ai-kit:composer:attachment-group",
|
|
24
21
|
defaultMessage: "Attachments"
|
|
25
22
|
}),
|
|
26
|
-
children: /* @__PURE__ */
|
|
27
|
-
|
|
28
|
-
|
|
23
|
+
children: /* @__PURE__ */ r(e, {
|
|
24
|
+
axis: "inline",
|
|
25
|
+
fade: "both",
|
|
26
|
+
className: h(),
|
|
27
|
+
children: /* @__PURE__ */ r(o, {
|
|
29
28
|
"data-unity-slot": "attachments",
|
|
30
|
-
items:
|
|
31
|
-
renderEmptyState:
|
|
32
|
-
className:
|
|
33
|
-
children:
|
|
29
|
+
items: n,
|
|
30
|
+
renderEmptyState: l,
|
|
31
|
+
className: m(),
|
|
32
|
+
children: t
|
|
34
33
|
})
|
|
35
34
|
})
|
|
36
35
|
});
|
|
37
36
|
});
|
|
38
37
|
//#endregion
|
|
39
|
-
export {
|
|
38
|
+
export { c as AIComposerAttachmentsGroup };
|
|
@@ -6,9 +6,9 @@ import { useResizeObserver as l } from "usehooks-ts";
|
|
|
6
6
|
import { TextArea as u } from "react-aria-components/TextArea";
|
|
7
7
|
//#region src/modules/ai-kit/components/ai-composer/parts/AIComposerTextArea.tsx
|
|
8
8
|
var d = o({ slots: {
|
|
9
|
-
wrapper: "uy:relative uy:group/textarea uy:flex uy:min-h-0 uy:flex-1",
|
|
9
|
+
wrapper: "uy:relative uy:group/textarea uy:flex uy:min-h-0 uy:flex-1 uy:min-h-[2lh]",
|
|
10
10
|
base: [
|
|
11
|
-
"uy:field-sizing-content uy:
|
|
11
|
+
"uy:field-sizing-content uy:max-h-30 uy:flex-1 uy:resize-none uy:overflow-y-auto uy:p-0",
|
|
12
12
|
"uy:typography-body uy:text-content-neutral uy:placeholder:text-content-neutral-lowest",
|
|
13
13
|
"uy:disabled:cursor-not-allowed uy:disabled:text-content-neutral-disabled",
|
|
14
14
|
"uy:disabled:placeholder:text-content-neutral-low-disabled",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@payfit/unity-components",
|
|
3
|
-
"version": "3.4.
|
|
3
|
+
"version": "3.4.18",
|
|
4
4
|
"module": "./dist/esm/index.js",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -103,7 +103,7 @@
|
|
|
103
103
|
"@formatjs/intl": "4.1.12",
|
|
104
104
|
"@internationalized/date": "3.12.4",
|
|
105
105
|
"minimatch": "10.2.5",
|
|
106
|
-
"@payfit/unity-illustrations": "3.4.
|
|
106
|
+
"@payfit/unity-illustrations": "3.4.18",
|
|
107
107
|
"@radix-ui/react-avatar": "1.2.6",
|
|
108
108
|
"@radix-ui/react-slot": "1.3.3",
|
|
109
109
|
"@react-aria/interactions": "3.28.1",
|
|
@@ -132,8 +132,8 @@
|
|
|
132
132
|
"zod": "4.6.5"
|
|
133
133
|
},
|
|
134
134
|
"peerDependencies": {
|
|
135
|
-
"@payfit/unity-icons": "3.4.
|
|
136
|
-
"@payfit/unity-themes": "3.4.
|
|
135
|
+
"@payfit/unity-icons": "3.4.18",
|
|
136
|
+
"@payfit/unity-themes": "3.4.18",
|
|
137
137
|
"@storybook/react-vite": "^10",
|
|
138
138
|
"@tanstack/react-query": "^5",
|
|
139
139
|
"@tanstack/form-core": "1.33.5",
|
|
@@ -156,9 +156,9 @@
|
|
|
156
156
|
"@payfit/storybook-addon-console-errors": "0.0.0-use.local",
|
|
157
157
|
"@payfit/storybook-addon-datadog-rum": "0.0.0-use.local",
|
|
158
158
|
"@payfit/storybook-config": "0.0.0-use.local",
|
|
159
|
-
"@payfit/unity-icons": "3.4.
|
|
160
|
-
"@payfit/unity-illustrations": "3.4.
|
|
161
|
-
"@payfit/unity-themes": "3.4.
|
|
159
|
+
"@payfit/unity-icons": "3.4.18",
|
|
160
|
+
"@payfit/unity-illustrations": "3.4.18",
|
|
161
|
+
"@payfit/unity-themes": "3.4.18",
|
|
162
162
|
"@payfit/vite-configs": "0.0.0-use.local",
|
|
163
163
|
"@storybook/addon-a11y": "10.6.0",
|
|
164
164
|
"@storybook/addon-designs": "11.1.4",
|
|
@@ -2656,6 +2656,29 @@
|
|
|
2656
2656
|
],
|
|
2657
2657
|
"title": "RadioButtonInput"
|
|
2658
2658
|
},
|
|
2659
|
+
{
|
|
2660
|
+
"description": "Adds edge cues to a native scroll viewport.",
|
|
2661
|
+
"docsHref": "?path=/docs/component-reference-scrollarea--docs",
|
|
2662
|
+
"id": "component-reference-scrollarea",
|
|
2663
|
+
"keywords": [
|
|
2664
|
+
"scroll",
|
|
2665
|
+
"overflow",
|
|
2666
|
+
"fade",
|
|
2667
|
+
"viewport"
|
|
2668
|
+
],
|
|
2669
|
+
"preview": {
|
|
2670
|
+
"type": "story",
|
|
2671
|
+
"story": "primary",
|
|
2672
|
+
"storyId": "component-reference-scrollarea--primary"
|
|
2673
|
+
},
|
|
2674
|
+
"related": [],
|
|
2675
|
+
"section": "components",
|
|
2676
|
+
"tags": [
|
|
2677
|
+
"category:layout",
|
|
2678
|
+
"type:component"
|
|
2679
|
+
],
|
|
2680
|
+
"title": "ScrollArea"
|
|
2681
|
+
},
|
|
2659
2682
|
{
|
|
2660
2683
|
"description": "Captures query text for search and filtering flows with clear affordances.",
|
|
2661
2684
|
"docsHref": "?path=/docs/component-reference-search--docs",
|