@botiverse/raft-ui 0.56.1 → 0.57.1
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/CHANGELOG.md +59 -0
- package/codemods/token-names.mjs +2 -2
- package/dist/cn.mjs +7 -22
- package/dist/components/icons/action-icons.d.mts +0 -2
- package/dist/components/icons/action-icons.mjs +1 -32
- package/dist/components/icons/index.d.mts +2 -2
- package/dist/components/lightbox/lightbox.mjs +1 -1
- package/dist/components/message-item/index.d.mts +1 -2
- package/dist/components/message-item/message-reaction.mjs +1 -1
- package/dist/components/meter/meter.d.mts +1 -7
- package/dist/components/meter/meter.mjs +2 -2
- package/dist/components/notification-center/notification-center.mjs +1 -1
- package/dist/components/pull-to-refresh/pull-to-refresh-indicator.mjs +1 -1
- package/dist/components/sidebar/index.d.mts +2 -2
- package/dist/components/sidebar/sidebar-section.recipe.mjs +4 -17
- package/dist/components/sidebar/sidebar.d.mts +0 -2
- package/dist/components/sidebar/sidebar.mjs +1 -14
- package/dist/components/sidebar/sidebar.recipe.mjs +2 -5
- package/dist/components/status/status.mjs +1 -1
- package/dist/foundation.css +0 -174
- package/dist/index.d.mts +3 -11
- package/dist/index.mjs +4 -8
- package/dist/lib/head-edges.mjs +1 -1
- package/dist/styles.css +1 -97
- package/dist/tokens.json +0 -1231
- package/package.json +1 -1
- package/dist/components/float-button/float-button.css +0 -326
- package/dist/components/float-button/float-button.d.mts +0 -36
- package/dist/components/float-button/float-button.mjs +0 -116
- package/dist/components/float-button/float-button.position.d.mts +0 -6
- package/dist/components/float-button/float-button.position.mjs +0 -41
- package/dist/components/float-button/index.d.mts +0 -3
- package/dist/components/legacy-task-panel/index.d.mts +0 -2
- package/dist/components/legacy-task-panel/legacy-task-panel.d.mts +0 -57
- package/dist/components/legacy-task-panel/legacy-task-panel.mjs +0 -234
- package/dist/components/legacy-task-panel/legacy-task-panel.recipe.mjs +0 -30
- package/dist/components/live-agent-activity-bar/index.d.mts +0 -2
- package/dist/components/live-agent-activity-bar/live-agent-activity-bar.d.mts +0 -25
- package/dist/components/live-agent-activity-bar/live-agent-activity-bar.mjs +0 -107
- package/dist/components/message-item/message-text-selection-toolbar.d.mts +0 -24
- package/dist/components/message-item/message-text-selection-toolbar.mjs +0 -13
package/package.json
CHANGED
|
@@ -1,326 +0,0 @@
|
|
|
1
|
-
/* FloatButton pure CSS styling following pattern/Button.css architecture
|
|
2
|
-
- Local CSS variables (--r-float-button-*) declared on component root
|
|
3
|
-
- Modifier classes rebind local variables
|
|
4
|
-
- Component styles strictly consume local variables
|
|
5
|
-
- An icon button: surface + 1.5px ink edge, control radius on every shape,
|
|
6
|
-
no shadow, press overlay, focus ring.
|
|
7
|
-
*/
|
|
8
|
-
|
|
9
|
-
/* ─────────────────────────────────────────────────────────────────────────
|
|
10
|
-
1. Local Variable Definitions & Modifier Overrides
|
|
11
|
-
───────────────────────────────────────────────────────────────────────── */
|
|
12
|
-
|
|
13
|
-
.r-float-button {
|
|
14
|
-
--r-float-button-size: 32px;
|
|
15
|
-
--r-float-button-width: var(--r-float-button-size);
|
|
16
|
-
--r-float-button-padding-x: 0px;
|
|
17
|
-
--r-float-button-border-radius: 8px;
|
|
18
|
-
--r-float-button-border-width: 1.5px;
|
|
19
|
-
--r-float-button-border-style: solid;
|
|
20
|
-
--r-float-button-border-color: var(--line-strong);
|
|
21
|
-
--r-float-button-bg: var(--layer-card);
|
|
22
|
-
--r-float-button-bg-hover: var(--layer-card);
|
|
23
|
-
--r-float-button-press: var(--fill-medium);
|
|
24
|
-
--r-float-button-text-color: var(--foreground);
|
|
25
|
-
--r-float-button-text-hover-color: var(--foreground);
|
|
26
|
-
--r-float-button-text-disabled-color: var(--foreground-disabled);
|
|
27
|
-
--r-float-button-box-shadow: none;
|
|
28
|
-
--r-float-button-shadow-hover: none;
|
|
29
|
-
--r-float-button-shadow-active: none;
|
|
30
|
-
--r-float-button-transform-hover: none;
|
|
31
|
-
--r-float-button-transform-active: none;
|
|
32
|
-
--r-float-button-outline: 2px solid var(--line-strong);
|
|
33
|
-
--r-float-button-outline-offset: 2px;
|
|
34
|
-
--r-float-button-font-size: 12px;
|
|
35
|
-
--r-float-button-font-weight: 700;
|
|
36
|
-
--r-float-button-desc-font-size: 10px;
|
|
37
|
-
--r-float-button-icon-size: 16px;
|
|
38
|
-
--r-float-button-opacity-disabled: 1;
|
|
39
|
-
|
|
40
|
-
/* Sizes: xs (24px), sm (28px), md (32px), lg (36px) */
|
|
41
|
-
&.r-float-button--xs {
|
|
42
|
-
--r-float-button-size: 24px;
|
|
43
|
-
--r-float-button-icon-size: 12px;
|
|
44
|
-
--r-float-button-font-size: 11px;
|
|
45
|
-
--r-float-button-desc-font-size: 8px;
|
|
46
|
-
--r-float-button-padding-x: 8px;
|
|
47
|
-
}
|
|
48
|
-
&.r-float-button--sm {
|
|
49
|
-
--r-float-button-size: 28px;
|
|
50
|
-
--r-float-button-icon-size: 14px;
|
|
51
|
-
--r-float-button-font-size: 12px;
|
|
52
|
-
--r-float-button-desc-font-size: 9px;
|
|
53
|
-
--r-float-button-padding-x: 10px;
|
|
54
|
-
}
|
|
55
|
-
&.r-float-button--md {
|
|
56
|
-
--r-float-button-size: 32px;
|
|
57
|
-
--r-float-button-icon-size: 16px;
|
|
58
|
-
--r-float-button-font-size: 12px;
|
|
59
|
-
--r-float-button-desc-font-size: 10px;
|
|
60
|
-
--r-float-button-padding-x: 12px;
|
|
61
|
-
}
|
|
62
|
-
&.r-float-button--lg {
|
|
63
|
-
--r-float-button-size: 36px;
|
|
64
|
-
--r-float-button-icon-size: 18px;
|
|
65
|
-
--r-float-button-font-size: 14px;
|
|
66
|
-
--r-float-button-desc-font-size: 11px;
|
|
67
|
-
--r-float-button-padding-x: 14px;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
/* Extended with text (adaptive width & horizontal padding) */
|
|
71
|
-
&.r-float-button--with-text {
|
|
72
|
-
--r-float-button-width: auto;
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
/* Shapes: every shape takes the control radius; a pill sizes to its text. */
|
|
76
|
-
&.r-float-button--pill {
|
|
77
|
-
--r-float-button-width: auto;
|
|
78
|
-
padding-left: var(--r-float-button-padding-x);
|
|
79
|
-
padding-right: var(--r-float-button-padding-x);
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
/* Variants: default and outline are the base surface. Filled variants are
|
|
83
|
-
stickers: ink edge and ink text on the fill, pressed with the sticker
|
|
84
|
-
overlay. */
|
|
85
|
-
&.r-float-button--primary,
|
|
86
|
-
&.r-float-button--accent {
|
|
87
|
-
--r-float-button-border-color: var(--sticker-ink);
|
|
88
|
-
--r-float-button-bg: var(--attention-400);
|
|
89
|
-
--r-float-button-bg-hover: var(--attention-400);
|
|
90
|
-
--r-float-button-press: var(--sticker-medium);
|
|
91
|
-
--r-float-button-text-color: var(--sticker-ink);
|
|
92
|
-
--r-float-button-text-hover-color: var(--sticker-ink);
|
|
93
|
-
}
|
|
94
|
-
&.r-float-button--warning {
|
|
95
|
-
--r-float-button-border-color: var(--sticker-ink);
|
|
96
|
-
--r-float-button-bg: var(--warning);
|
|
97
|
-
--r-float-button-bg-hover: var(--warning);
|
|
98
|
-
--r-float-button-press: var(--sticker-medium);
|
|
99
|
-
--r-float-button-text-color: var(--sticker-ink);
|
|
100
|
-
--r-float-button-text-hover-color: var(--sticker-ink);
|
|
101
|
-
}
|
|
102
|
-
&.r-float-button--danger {
|
|
103
|
-
--r-float-button-border-color: var(--sticker-ink);
|
|
104
|
-
--r-float-button-bg: var(--danger);
|
|
105
|
-
--r-float-button-bg-hover: var(--danger);
|
|
106
|
-
--r-float-button-press: var(--sticker-medium);
|
|
107
|
-
--r-float-button-text-color: var(--sticker-ink);
|
|
108
|
-
--r-float-button-text-hover-color: var(--sticker-ink);
|
|
109
|
-
}
|
|
110
|
-
&.r-float-button--ghost {
|
|
111
|
-
--r-float-button-border-color: transparent;
|
|
112
|
-
--r-float-button-bg: transparent;
|
|
113
|
-
--r-float-button-bg-hover: transparent;
|
|
114
|
-
--r-float-button-press: var(--fill-medium);
|
|
115
|
-
}
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
/* ─────────────────────────────────────────────────────────────────────────
|
|
119
|
-
2. Base Element Rules Consuming Local Variables
|
|
120
|
-
───────────────────────────────────────────────────────────────────────── */
|
|
121
|
-
|
|
122
|
-
.r-float-button {
|
|
123
|
-
position: relative;
|
|
124
|
-
display: inline-flex;
|
|
125
|
-
flex-shrink: 0;
|
|
126
|
-
align-items: center;
|
|
127
|
-
justify-content: center;
|
|
128
|
-
user-select: none;
|
|
129
|
-
cursor: pointer;
|
|
130
|
-
box-sizing: border-box;
|
|
131
|
-
padding: 0;
|
|
132
|
-
width: var(--r-float-button-width, var(--r-float-button-size));
|
|
133
|
-
min-width: var(--r-float-button-size);
|
|
134
|
-
height: var(--r-float-button-size);
|
|
135
|
-
border-radius: var(--r-float-button-border-radius);
|
|
136
|
-
border-width: var(--r-float-button-border-width);
|
|
137
|
-
border-style: var(--r-float-button-border-style);
|
|
138
|
-
border-color: var(--r-float-button-border-color);
|
|
139
|
-
background-color: var(--r-float-button-bg);
|
|
140
|
-
color: var(--r-float-button-text-color);
|
|
141
|
-
box-shadow: var(--r-float-button-box-shadow);
|
|
142
|
-
font-size: var(--r-float-button-font-size);
|
|
143
|
-
font-weight: var(--r-float-button-font-weight);
|
|
144
|
-
outline: none;
|
|
145
|
-
transition:
|
|
146
|
-
transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
|
|
147
|
-
box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1),
|
|
148
|
-
background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
|
|
149
|
-
border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
|
|
150
|
-
color 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
151
|
-
|
|
152
|
-
@media (prefers-reduced-motion: reduce) {
|
|
153
|
-
transition: none;
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
&.r-float-button--with-text,
|
|
157
|
-
&.r-float-button--pill {
|
|
158
|
-
padding-left: var(--r-float-button-padding-x);
|
|
159
|
-
padding-right: var(--r-float-button-padding-x);
|
|
160
|
-
}
|
|
161
|
-
|
|
162
|
-
/* Hover only where there is a pointer that hovers: on a touch screen a
|
|
163
|
-
:hover would stay on the button after the tap. */
|
|
164
|
-
@media (hover: hover) {
|
|
165
|
-
&:hover:not(:disabled) {
|
|
166
|
-
background-color: var(--r-float-button-bg-hover);
|
|
167
|
-
color: var(--r-float-button-text-hover-color);
|
|
168
|
-
box-shadow: var(--r-float-button-shadow-hover);
|
|
169
|
-
transform: var(--r-float-button-transform-hover);
|
|
170
|
-
}
|
|
171
|
-
}
|
|
172
|
-
|
|
173
|
-
&:active:not(:disabled) {
|
|
174
|
-
box-shadow: var(--r-float-button-shadow-active);
|
|
175
|
-
transform: var(--r-float-button-transform-active);
|
|
176
|
-
}
|
|
177
|
-
|
|
178
|
-
/* Keyboard focus only: no ring after a click or a tap (styles.css). */
|
|
179
|
-
&:focus-visible:not(:where(:root[data-input-modality="pointer"] *)) {
|
|
180
|
-
outline: var(--r-float-button-outline);
|
|
181
|
-
outline-offset: var(--r-float-button-outline-offset);
|
|
182
|
-
}
|
|
183
|
-
|
|
184
|
-
/* Press feedback lays one overlay over the resting fill instead of
|
|
185
|
-
swapping it. */
|
|
186
|
-
@media (hover: hover) {
|
|
187
|
-
&:hover:not(:disabled) {
|
|
188
|
-
background-image: linear-gradient(var(--r-float-button-press), var(--r-float-button-press));
|
|
189
|
-
}
|
|
190
|
-
}
|
|
191
|
-
&:active:not(:disabled) {
|
|
192
|
-
background-image: linear-gradient(var(--r-float-button-press), var(--r-float-button-press));
|
|
193
|
-
}
|
|
194
|
-
|
|
195
|
-
/* Disabled is the sunken surface, not an opacity fade. */
|
|
196
|
-
&:disabled {
|
|
197
|
-
pointer-events: none;
|
|
198
|
-
opacity: var(--r-float-button-opacity-disabled);
|
|
199
|
-
cursor: not-allowed;
|
|
200
|
-
border-color: var(--line-hairline);
|
|
201
|
-
background-color: var(--fill-muted);
|
|
202
|
-
background-image: none;
|
|
203
|
-
color: var(--r-float-button-text-disabled-color);
|
|
204
|
-
}
|
|
205
|
-
|
|
206
|
-
&.r-float-button--ghost:disabled {
|
|
207
|
-
border-color: transparent;
|
|
208
|
-
background-color: transparent;
|
|
209
|
-
}
|
|
210
|
-
|
|
211
|
-
& svg {
|
|
212
|
-
pointer-events: none;
|
|
213
|
-
flex-shrink: 0;
|
|
214
|
-
width: var(--r-float-button-icon-size);
|
|
215
|
-
height: var(--r-float-button-icon-size);
|
|
216
|
-
}
|
|
217
|
-
|
|
218
|
-
& > .r-float-button__content {
|
|
219
|
-
display: inline-flex;
|
|
220
|
-
align-items: center;
|
|
221
|
-
justify-content: center;
|
|
222
|
-
gap: 6px;
|
|
223
|
-
white-space: nowrap;
|
|
224
|
-
|
|
225
|
-
&.r-float-button__content--with-desc {
|
|
226
|
-
flex-direction: column;
|
|
227
|
-
gap: 2px;
|
|
228
|
-
}
|
|
229
|
-
}
|
|
230
|
-
|
|
231
|
-
&.r-float-button--square.r-float-button--with-desc {
|
|
232
|
-
padding-top: 2px;
|
|
233
|
-
padding-bottom: 2px;
|
|
234
|
-
}
|
|
235
|
-
|
|
236
|
-
& .r-float-button__text {
|
|
237
|
-
display: inline-flex;
|
|
238
|
-
align-items: center;
|
|
239
|
-
line-height: 1;
|
|
240
|
-
white-space: nowrap;
|
|
241
|
-
}
|
|
242
|
-
|
|
243
|
-
& .r-float-button__desc {
|
|
244
|
-
font-size: var(--r-float-button-desc-font-size);
|
|
245
|
-
text-align: center;
|
|
246
|
-
line-height: 1.25;
|
|
247
|
-
overflow: hidden;
|
|
248
|
-
text-overflow: ellipsis;
|
|
249
|
-
white-space: nowrap;
|
|
250
|
-
}
|
|
251
|
-
}
|
|
252
|
-
|
|
253
|
-
/* ─────────────────────────────────────────────────────────────────────────
|
|
254
|
-
3. FloatButtonGroup
|
|
255
|
-
───────────────────────────────────────────────────────────────────────── */
|
|
256
|
-
|
|
257
|
-
.r-float-button-group {
|
|
258
|
-
--r-float-button-group-gap: 10px;
|
|
259
|
-
|
|
260
|
-
display: inline-flex;
|
|
261
|
-
align-items: center;
|
|
262
|
-
user-select: none;
|
|
263
|
-
box-sizing: border-box;
|
|
264
|
-
gap: var(--r-float-button-group-gap);
|
|
265
|
-
|
|
266
|
-
&.r-float-button-group--vertical {
|
|
267
|
-
flex-direction: column;
|
|
268
|
-
}
|
|
269
|
-
|
|
270
|
-
&.r-float-button-group--horizontal {
|
|
271
|
-
flex-direction: row;
|
|
272
|
-
}
|
|
273
|
-
|
|
274
|
-
&.r-float-button-group--attached {
|
|
275
|
-
--r-float-button-group-gap: 0px;
|
|
276
|
-
gap: 0;
|
|
277
|
-
}
|
|
278
|
-
|
|
279
|
-
/* Attached: seamless borders */
|
|
280
|
-
&.r-float-button-group--attached.r-float-button-group--vertical
|
|
281
|
-
> .r-float-button:not(:last-child) {
|
|
282
|
-
border-bottom-width: 0;
|
|
283
|
-
}
|
|
284
|
-
|
|
285
|
-
&.r-float-button-group--attached.r-float-button-group--vertical
|
|
286
|
-
> .r-float-button:not(:first-child):not(:last-child) {
|
|
287
|
-
border-radius: 0;
|
|
288
|
-
}
|
|
289
|
-
|
|
290
|
-
&.r-float-button-group--attached.r-float-button-group--horizontal
|
|
291
|
-
> .r-float-button:not(:last-child) {
|
|
292
|
-
border-right-width: 0;
|
|
293
|
-
}
|
|
294
|
-
|
|
295
|
-
&.r-float-button-group--attached.r-float-button-group--horizontal
|
|
296
|
-
> .r-float-button:not(:first-child):not(:last-child) {
|
|
297
|
-
border-radius: 0;
|
|
298
|
-
}
|
|
299
|
-
|
|
300
|
-
/* Attached square: square corners on every button; the outer-corner rules
|
|
301
|
-
below round the ends of a run of two or more. */
|
|
302
|
-
&.r-float-button-group--attached.r-float-button-group--square > .r-float-button {
|
|
303
|
-
border-radius: 0;
|
|
304
|
-
}
|
|
305
|
-
|
|
306
|
-
/* Attached: control radius on the outer corners, whatever the shape */
|
|
307
|
-
&.r-float-button-group--attached.r-float-button-group--vertical
|
|
308
|
-
> .r-float-button:first-child:not(:last-child) {
|
|
309
|
-
border-radius: 8px 8px 0 0;
|
|
310
|
-
}
|
|
311
|
-
|
|
312
|
-
&.r-float-button-group--attached.r-float-button-group--vertical
|
|
313
|
-
> .r-float-button:last-child:not(:first-child) {
|
|
314
|
-
border-radius: 0 0 8px 8px;
|
|
315
|
-
}
|
|
316
|
-
|
|
317
|
-
&.r-float-button-group--attached.r-float-button-group--horizontal
|
|
318
|
-
> .r-float-button:first-child:not(:last-child) {
|
|
319
|
-
border-radius: 8px 0 0 8px;
|
|
320
|
-
}
|
|
321
|
-
|
|
322
|
-
&.r-float-button-group--attached.r-float-button-group--horizontal
|
|
323
|
-
> .r-float-button:last-child:not(:first-child) {
|
|
324
|
-
border-radius: 0 8px 8px 0;
|
|
325
|
-
}
|
|
326
|
-
}
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
import { StyledProps } from "../../lib/styled-props.mjs";
|
|
2
|
-
import { FloatButtonOffset, FloatButtonPosition, FloatButtonSide } from "./float-button.position.mjs";
|
|
3
|
-
import { ReactNode } from "react";
|
|
4
|
-
import { Button } from "@base-ui/react/button";
|
|
5
|
-
import { useRender } from "@base-ui/react/use-render";
|
|
6
|
-
//#region src/components/float-button/float-button.d.ts
|
|
7
|
-
export type FloatButtonVariant = "default" | "primary" | "accent" | "outline" | "ghost" | "warning" | "danger";
|
|
8
|
-
export type FloatButtonShape = "circle" | "square" | "pill";
|
|
9
|
-
export type FloatButtonSize = "xs" | "sm" | "md" | "lg";
|
|
10
|
-
export type FloatButtonGroupDirection = "vertical" | "horizontal";
|
|
11
|
-
export interface FloatButtonProps extends StyledProps<Button.Props> {
|
|
12
|
-
variant?: FloatButtonVariant;
|
|
13
|
-
shape?: FloatButtonShape;
|
|
14
|
-
size?: FloatButtonSize;
|
|
15
|
-
icon?: ReactNode;
|
|
16
|
-
description?: ReactNode;
|
|
17
|
-
tooltip?: ReactNode;
|
|
18
|
-
position?: FloatButtonPosition;
|
|
19
|
-
side?: FloatButtonSide;
|
|
20
|
-
offset?: FloatButtonOffset;
|
|
21
|
-
}
|
|
22
|
-
/** @deprecated Not part of the Raft Design System; place actions in the page's header or toolbar. Removed in raft-ui 1.0. */
|
|
23
|
-
export declare function FloatButton({ icon, description, tooltip, variant, shape: shapeProp, size: sizeProp, position, side, offset, className, style, children, nativeButton: nativeButtonProp, render, ...props }: FloatButtonProps): import("react").JSX.Element;
|
|
24
|
-
export type FloatButtonGroupProps = useRender.ComponentProps<"div"> & {
|
|
25
|
-
direction?: FloatButtonGroupDirection;
|
|
26
|
-
attached?: boolean;
|
|
27
|
-
shape?: FloatButtonShape;
|
|
28
|
-
size?: FloatButtonSize;
|
|
29
|
-
position?: FloatButtonPosition;
|
|
30
|
-
side?: FloatButtonSide;
|
|
31
|
-
offset?: FloatButtonOffset;
|
|
32
|
-
gap?: number | string;
|
|
33
|
-
};
|
|
34
|
-
/** @deprecated Not part of the Raft Design System; place actions in the page's header or toolbar. Removed in raft-ui 1.0. */
|
|
35
|
-
export declare function FloatButtonGroup({ direction, attached, shape, size, position, side, offset, gap, className, style, render, children, ...props }: FloatButtonGroupProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
|
|
36
|
-
//#endregion
|
|
@@ -1,116 +0,0 @@
|
|
|
1
|
-
import { defaultNativeButton } from "../../lib/default-native-button.mjs";
|
|
2
|
-
import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip/tooltip.mjs";
|
|
3
|
-
import { resolvePositionStyles } from "./float-button.position.mjs";
|
|
4
|
-
import { createContext, useContext, useMemo } from "react";
|
|
5
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
|
-
import { Button } from "@base-ui/react/button";
|
|
7
|
-
import { mergeProps } from "@base-ui/react/merge-props";
|
|
8
|
-
import { useRender } from "@base-ui/react/use-render";
|
|
9
|
-
//#region src/components/float-button/float-button.tsx
|
|
10
|
-
const FloatButtonGroupContext = createContext(null);
|
|
11
|
-
/** @deprecated Not part of the Raft Design System; place actions in the page's header or toolbar. Removed in raft-ui 1.0. */
|
|
12
|
-
function FloatButton({ icon, description, tooltip, variant = "default", shape: shapeProp, size: sizeProp, position, side, offset, className, style, children, nativeButton: nativeButtonProp, render, ...props }) {
|
|
13
|
-
const groupContext = useContext(FloatButtonGroupContext);
|
|
14
|
-
const hasText = Boolean(children);
|
|
15
|
-
const shape = shapeProp ?? groupContext?.shape ?? "circle";
|
|
16
|
-
const size = sizeProp ?? groupContext?.size ?? "md";
|
|
17
|
-
const positionStyles = resolvePositionStyles({
|
|
18
|
-
position,
|
|
19
|
-
side,
|
|
20
|
-
offset,
|
|
21
|
-
style
|
|
22
|
-
});
|
|
23
|
-
const nativeButton = nativeButtonProp ?? defaultNativeButton(render) ?? true;
|
|
24
|
-
const rootClasses = [
|
|
25
|
-
"r-float-button",
|
|
26
|
-
`r-float-button--${size}`,
|
|
27
|
-
`r-float-button--${shape}`,
|
|
28
|
-
`r-float-button--${variant}`,
|
|
29
|
-
hasText && "r-float-button--with-text",
|
|
30
|
-
description && "r-float-button--with-desc",
|
|
31
|
-
className
|
|
32
|
-
].filter(Boolean).join(" ");
|
|
33
|
-
const contentClasses = ["r-float-button__content", description && "r-float-button__content--with-desc"].filter(Boolean).join(" ");
|
|
34
|
-
const renderedButton = /* @__PURE__ */ jsx(Button, {
|
|
35
|
-
...mergeProps({
|
|
36
|
-
type: nativeButton ? "button" : void 0,
|
|
37
|
-
"data-slot": "float-button",
|
|
38
|
-
"data-shape": shape,
|
|
39
|
-
"data-size": size,
|
|
40
|
-
"data-variant": variant,
|
|
41
|
-
"data-with-text": hasText ? "true" : void 0,
|
|
42
|
-
className: rootClasses,
|
|
43
|
-
style: positionStyles
|
|
44
|
-
}, props),
|
|
45
|
-
render,
|
|
46
|
-
children: /* @__PURE__ */ jsxs("span", {
|
|
47
|
-
"data-slot": "float-button-content",
|
|
48
|
-
className: contentClasses,
|
|
49
|
-
children: [
|
|
50
|
-
icon,
|
|
51
|
-
children ? /* @__PURE__ */ jsx("span", {
|
|
52
|
-
"data-slot": "float-button-text",
|
|
53
|
-
className: "r-float-button__text",
|
|
54
|
-
children
|
|
55
|
-
}) : null,
|
|
56
|
-
description ? /* @__PURE__ */ jsx("span", {
|
|
57
|
-
"data-slot": "float-button-description",
|
|
58
|
-
className: "r-float-button__desc",
|
|
59
|
-
children: description
|
|
60
|
-
}) : null
|
|
61
|
-
]
|
|
62
|
-
})
|
|
63
|
-
});
|
|
64
|
-
if (tooltip) return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: renderedButton }), /* @__PURE__ */ jsx(TooltipContent, { children: tooltip })] });
|
|
65
|
-
return renderedButton;
|
|
66
|
-
}
|
|
67
|
-
/** @deprecated Not part of the Raft Design System; place actions in the page's header or toolbar. Removed in raft-ui 1.0. */
|
|
68
|
-
function FloatButtonGroup({ direction = "vertical", attached = false, shape = "circle", size, position, side, offset, gap, className, style, render, children, ...props }) {
|
|
69
|
-
const combinedStyle = {
|
|
70
|
-
...resolvePositionStyles({
|
|
71
|
-
position,
|
|
72
|
-
side,
|
|
73
|
-
offset,
|
|
74
|
-
style
|
|
75
|
-
}),
|
|
76
|
-
...gap !== void 0 && !attached ? {
|
|
77
|
-
"--dsl-float-button-group-gap": typeof gap === "number" ? `${gap}px` : gap,
|
|
78
|
-
gap: typeof gap === "number" ? `${gap}px` : gap
|
|
79
|
-
} : {},
|
|
80
|
-
...style
|
|
81
|
-
};
|
|
82
|
-
const rootClasses = [
|
|
83
|
-
"r-float-button-group",
|
|
84
|
-
`r-float-button-group--${direction}`,
|
|
85
|
-
attached && "r-float-button-group--attached",
|
|
86
|
-
`r-float-button-group--${shape}`,
|
|
87
|
-
className
|
|
88
|
-
].filter(Boolean).join(" ");
|
|
89
|
-
const defaultProps = {
|
|
90
|
-
role: "group",
|
|
91
|
-
"data-slot": "float-button-group",
|
|
92
|
-
"data-direction": direction,
|
|
93
|
-
"data-attached": attached ? "true" : void 0,
|
|
94
|
-
"data-shape": shape,
|
|
95
|
-
className: rootClasses,
|
|
96
|
-
style: combinedStyle
|
|
97
|
-
};
|
|
98
|
-
const contextValue = useMemo(() => ({
|
|
99
|
-
shape,
|
|
100
|
-
size
|
|
101
|
-
}), [shape, size]);
|
|
102
|
-
const groupContent = /* @__PURE__ */ jsx(FloatButtonGroupContext.Provider, {
|
|
103
|
-
value: contextValue,
|
|
104
|
-
children
|
|
105
|
-
});
|
|
106
|
-
return useRender({
|
|
107
|
-
defaultTagName: "div",
|
|
108
|
-
render,
|
|
109
|
-
props: mergeProps(defaultProps, {
|
|
110
|
-
...props,
|
|
111
|
-
children: groupContent
|
|
112
|
-
})
|
|
113
|
-
});
|
|
114
|
-
}
|
|
115
|
-
//#endregion
|
|
116
|
-
export { FloatButton, FloatButtonGroup };
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import { CSSProperties } from "react";
|
|
2
|
-
//#region src/components/float-button/float-button.position.d.ts
|
|
3
|
-
export type FloatButtonPosition = "fixed" | "absolute" | "relative";
|
|
4
|
-
export type FloatButtonSide = "bottom-right" | "bottom-left" | "top-right" | "top-left";
|
|
5
|
-
export type FloatButtonOffset = number | string | [number | string, number | string];
|
|
6
|
-
//#endregion
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
//#region src/components/float-button/float-button.position.ts
|
|
2
|
-
function resolvePositionStyles(options) {
|
|
3
|
-
const { position, side, offset, style } = options;
|
|
4
|
-
if (!position && !side && offset === void 0) return style ?? {};
|
|
5
|
-
const resolvedPosition = position ?? "fixed";
|
|
6
|
-
if (resolvedPosition === "relative") return {
|
|
7
|
-
position: "relative",
|
|
8
|
-
...style
|
|
9
|
-
};
|
|
10
|
-
const resolvedSide = side ?? "bottom-right";
|
|
11
|
-
const [offsetX, offsetY] = normalizeOffset(offset ?? 16);
|
|
12
|
-
const posStyles = { position: resolvedPosition };
|
|
13
|
-
if (resolvedSide === "bottom-right") {
|
|
14
|
-
posStyles.bottom = offsetY;
|
|
15
|
-
posStyles.right = offsetX;
|
|
16
|
-
} else if (resolvedSide === "bottom-left") {
|
|
17
|
-
posStyles.bottom = offsetY;
|
|
18
|
-
posStyles.left = offsetX;
|
|
19
|
-
} else if (resolvedSide === "top-right") {
|
|
20
|
-
posStyles.top = offsetY;
|
|
21
|
-
posStyles.right = offsetX;
|
|
22
|
-
} else if (resolvedSide === "top-left") {
|
|
23
|
-
posStyles.top = offsetY;
|
|
24
|
-
posStyles.left = offsetX;
|
|
25
|
-
}
|
|
26
|
-
return {
|
|
27
|
-
...posStyles,
|
|
28
|
-
...style
|
|
29
|
-
};
|
|
30
|
-
}
|
|
31
|
-
function normalizeOffset(offset) {
|
|
32
|
-
if (Array.isArray(offset)) return [formatLength(offset[0]), formatLength(offset[1])];
|
|
33
|
-
const formatted = formatLength(offset);
|
|
34
|
-
return [formatted, formatted];
|
|
35
|
-
}
|
|
36
|
-
function formatLength(val) {
|
|
37
|
-
if (typeof val === "number") return `${val}px`;
|
|
38
|
-
return val;
|
|
39
|
-
}
|
|
40
|
-
//#endregion
|
|
41
|
-
export { resolvePositionStyles };
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
import { FloatButtonOffset, FloatButtonPosition, FloatButtonSide } from "./float-button.position.mjs";
|
|
2
|
-
import { FloatButton, FloatButtonGroup, FloatButtonGroupDirection, FloatButtonGroupProps, FloatButtonProps, FloatButtonShape, FloatButtonSize, FloatButtonVariant } from "./float-button.mjs";
|
|
3
|
-
export { FloatButton, FloatButtonGroup, type FloatButtonGroupDirection, type FloatButtonGroupProps, type FloatButtonOffset, type FloatButtonPosition, type FloatButtonProps, type FloatButtonShape, type FloatButtonSide, type FloatButtonSize, type FloatButtonVariant };
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import { LegacyTaskPanelActions, LegacyTaskPanelActionsProps, LegacyTaskPanelBody, LegacyTaskPanelBodyProps, LegacyTaskPanelField, LegacyTaskPanelFieldLabel, LegacyTaskPanelFieldLabelProps, LegacyTaskPanelFieldProps, LegacyTaskPanelFieldText, LegacyTaskPanelFieldTextProps, LegacyTaskPanelFieldTitle, LegacyTaskPanelFieldTitleProps, LegacyTaskPanelHeader, LegacyTaskPanelHeaderProps, LegacyTaskPanelIcon, LegacyTaskPanelIconProps, LegacyTaskPanelMeta, LegacyTaskPanelMetaLabel, LegacyTaskPanelMetaLabelProps, LegacyTaskPanelMetaProps, LegacyTaskPanelMetaRow, LegacyTaskPanelMetaRowProps, LegacyTaskPanelMetaValue, LegacyTaskPanelMetaValueProps, LegacyTaskPanelRoot, LegacyTaskPanelRootProps, LegacyTaskPanelSection, LegacyTaskPanelSectionProps, LegacyTaskPanelStatus, LegacyTaskPanelStatusProps, LegacyTaskPanelTitle, LegacyTaskPanelTitleMeta, LegacyTaskPanelTitleMetaProps, LegacyTaskPanelTitleProps } from "./legacy-task-panel.mjs";
|
|
2
|
-
export { LegacyTaskPanelActions, type LegacyTaskPanelActionsProps, LegacyTaskPanelBody, type LegacyTaskPanelBodyProps, LegacyTaskPanelField, LegacyTaskPanelFieldLabel, type LegacyTaskPanelFieldLabelProps, type LegacyTaskPanelFieldProps, LegacyTaskPanelFieldText, type LegacyTaskPanelFieldTextProps, LegacyTaskPanelFieldTitle, type LegacyTaskPanelFieldTitleProps, LegacyTaskPanelHeader, type LegacyTaskPanelHeaderProps, LegacyTaskPanelIcon, type LegacyTaskPanelIconProps, LegacyTaskPanelMeta, LegacyTaskPanelMetaLabel, type LegacyTaskPanelMetaLabelProps, type LegacyTaskPanelMetaProps, LegacyTaskPanelMetaRow, type LegacyTaskPanelMetaRowProps, LegacyTaskPanelMetaValue, type LegacyTaskPanelMetaValueProps, LegacyTaskPanelRoot, type LegacyTaskPanelRootProps, LegacyTaskPanelSection, type LegacyTaskPanelSectionProps, LegacyTaskPanelStatus, type LegacyTaskPanelStatusProps, LegacyTaskPanelTitle, LegacyTaskPanelTitleMeta, type LegacyTaskPanelTitleMetaProps, type LegacyTaskPanelTitleProps };
|
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
import { useRender } from "@base-ui/react/use-render";
|
|
2
|
-
//#region src/components/legacy-task-panel/legacy-task-panel.d.ts
|
|
3
|
-
export type LegacyTaskPanelRootProps = useRender.ComponentProps<"div"> & {
|
|
4
|
-
/** Docs preview chrome. A host shell that draws its own frame leaves this off. */
|
|
5
|
-
framed?: boolean;
|
|
6
|
-
};
|
|
7
|
-
/** @deprecated No consumer uses it; compose read-only task details from Dialog and DescriptionList. Removed in raft-ui 1.0. */
|
|
8
|
-
export declare function LegacyTaskPanelRoot({ className, framed, render, children, ...props }: LegacyTaskPanelRootProps): import("react").JSX.Element;
|
|
9
|
-
export type LegacyTaskPanelHeaderProps = useRender.ComponentProps<"div">;
|
|
10
|
-
/** @deprecated No consumer uses it; compose read-only task details from Dialog and DescriptionList. Removed in raft-ui 1.0. */
|
|
11
|
-
export declare function LegacyTaskPanelHeader({ className, ...props }: LegacyTaskPanelHeaderProps): import("react").JSX.Element;
|
|
12
|
-
export type LegacyTaskPanelIconProps = useRender.ComponentProps<"div">;
|
|
13
|
-
/** @deprecated No consumer uses it; compose read-only task details from Dialog and DescriptionList. Removed in raft-ui 1.0. */
|
|
14
|
-
export declare function LegacyTaskPanelIcon({ className, render, children, ...props }: LegacyTaskPanelIconProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
|
|
15
|
-
export type LegacyTaskPanelTitleProps = useRender.ComponentProps<"h2">;
|
|
16
|
-
/** @deprecated No consumer uses it; compose read-only task details from Dialog and DescriptionList. Removed in raft-ui 1.0. */
|
|
17
|
-
export declare function LegacyTaskPanelTitle({ className, ...props }: LegacyTaskPanelTitleProps): import("react").JSX.Element;
|
|
18
|
-
export type LegacyTaskPanelTitleMetaProps = useRender.ComponentProps<"span">;
|
|
19
|
-
/** @deprecated No consumer uses it; compose read-only task details from Dialog and DescriptionList. Removed in raft-ui 1.0. */
|
|
20
|
-
export declare function LegacyTaskPanelTitleMeta({ className, ...props }: LegacyTaskPanelTitleMetaProps): import("react").JSX.Element;
|
|
21
|
-
export type LegacyTaskPanelActionsProps = useRender.ComponentProps<"div">;
|
|
22
|
-
/** @deprecated No consumer uses it; compose read-only task details from Dialog and DescriptionList. Removed in raft-ui 1.0. */
|
|
23
|
-
export declare function LegacyTaskPanelActions({ className, ...props }: LegacyTaskPanelActionsProps): import("react").JSX.Element;
|
|
24
|
-
export type LegacyTaskPanelBodyProps = useRender.ComponentProps<"div">;
|
|
25
|
-
/** @deprecated No consumer uses it; compose read-only task details from Dialog and DescriptionList. Removed in raft-ui 1.0. */
|
|
26
|
-
export declare function LegacyTaskPanelBody({ className, children, ...props }: LegacyTaskPanelBodyProps): import("react").JSX.Element;
|
|
27
|
-
export type LegacyTaskPanelStatusProps = useRender.ComponentProps<"div">;
|
|
28
|
-
/** @deprecated No consumer uses it; compose read-only task details from Dialog and DescriptionList. Removed in raft-ui 1.0. */
|
|
29
|
-
export declare function LegacyTaskPanelStatus({ className, render, ...props }: LegacyTaskPanelStatusProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
|
|
30
|
-
export type LegacyTaskPanelSectionProps = useRender.ComponentProps<"section">;
|
|
31
|
-
/** @deprecated No consumer uses it; compose read-only task details from Dialog and DescriptionList. Removed in raft-ui 1.0. */
|
|
32
|
-
export declare function LegacyTaskPanelSection({ className, render, ...props }: LegacyTaskPanelSectionProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
|
|
33
|
-
export type LegacyTaskPanelFieldProps = useRender.ComponentProps<"div">;
|
|
34
|
-
/** @deprecated No consumer uses it; compose read-only task details from Dialog and DescriptionList. Removed in raft-ui 1.0. */
|
|
35
|
-
export declare function LegacyTaskPanelField({ className, render, ...props }: LegacyTaskPanelFieldProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
|
|
36
|
-
export type LegacyTaskPanelFieldLabelProps = useRender.ComponentProps<"p">;
|
|
37
|
-
/** @deprecated No consumer uses it; compose read-only task details from Dialog and DescriptionList. Removed in raft-ui 1.0. */
|
|
38
|
-
export declare function LegacyTaskPanelFieldLabel({ className, render, ...props }: LegacyTaskPanelFieldLabelProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
|
|
39
|
-
export type LegacyTaskPanelFieldTitleProps = useRender.ComponentProps<"h3">;
|
|
40
|
-
/** @deprecated No consumer uses it; compose read-only task details from Dialog and DescriptionList. Removed in raft-ui 1.0. */
|
|
41
|
-
export declare function LegacyTaskPanelFieldTitle({ className, render, ...props }: LegacyTaskPanelFieldTitleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
|
|
42
|
-
export type LegacyTaskPanelFieldTextProps = useRender.ComponentProps<"p">;
|
|
43
|
-
/** @deprecated No consumer uses it; compose read-only task details from Dialog and DescriptionList. Removed in raft-ui 1.0. */
|
|
44
|
-
export declare function LegacyTaskPanelFieldText({ className, render, ...props }: LegacyTaskPanelFieldTextProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
|
|
45
|
-
export type LegacyTaskPanelMetaProps = useRender.ComponentProps<"section">;
|
|
46
|
-
/** @deprecated No consumer uses it; compose read-only task details from Dialog and DescriptionList. Removed in raft-ui 1.0. */
|
|
47
|
-
export declare function LegacyTaskPanelMeta({ className, render, ...props }: LegacyTaskPanelMetaProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
|
|
48
|
-
export type LegacyTaskPanelMetaRowProps = useRender.ComponentProps<"div">;
|
|
49
|
-
/** @deprecated No consumer uses it; compose read-only task details from Dialog and DescriptionList. Removed in raft-ui 1.0. */
|
|
50
|
-
export declare function LegacyTaskPanelMetaRow({ className, render, ...props }: LegacyTaskPanelMetaRowProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
|
|
51
|
-
export type LegacyTaskPanelMetaLabelProps = useRender.ComponentProps<"span">;
|
|
52
|
-
/** @deprecated No consumer uses it; compose read-only task details from Dialog and DescriptionList. Removed in raft-ui 1.0. */
|
|
53
|
-
export declare function LegacyTaskPanelMetaLabel({ className, render, ...props }: LegacyTaskPanelMetaLabelProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
|
|
54
|
-
export type LegacyTaskPanelMetaValueProps = useRender.ComponentProps<"span">;
|
|
55
|
-
/** @deprecated No consumer uses it; compose read-only task details from Dialog and DescriptionList. Removed in raft-ui 1.0. */
|
|
56
|
-
export declare function LegacyTaskPanelMetaValue({ className, render, ...props }: LegacyTaskPanelMetaValueProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
|
|
57
|
-
//#endregion
|