@lobehub/ui 5.32.4 → 5.32.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/es/base-ui/Input/style.d.mts +2 -2
  2. package/es/base-ui/Tooltip/style.mjs +104 -20
  3. package/es/base-ui/Tooltip/style.mjs.map +1 -1
  4. package/package.json +1 -1
package/es/base-ui/Input/style.d.mts CHANGED
@@ -23,8 +23,8 @@ declare const styles: {
23
23
  };
24
24
  declare const rootVariants: (props?: ({
25
25
  shadow?: boolean | null | undefined;
26
- size?: "small" | "middle" | "large" | null | undefined;
27
- variant?: "filled" | "outlined" | "borderless" | null | undefined;
26
+ size?: "large" | "middle" | "small" | null | undefined;
27
+ variant?: "filled" | "borderless" | "outlined" | null | undefined;
28
28
  } & import("class-variance-authority/types").ClassProp) | undefined) => string;
29
29
  //#endregion
30
30
  export { rootVariants, styles };
package/es/base-ui/Tooltip/style.mjs CHANGED
@@ -46,6 +46,12 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
46
46
  }
47
47
  `,
48
48
  popup: css`
49
+
50
+ /* Keep the popup on its own compositor layer for its whole lifetime: when the opacity
51
+ transition ends the browser otherwise drops the layer and re-rasterizes with pixel
52
+ snapping — a visible one-frame shift when the measured width is fractional
53
+ (single-line tooltips). */
54
+ will-change: transform, opacity;
49
55
  user-select: none;
50
56
 
51
57
  position: relative;
@@ -65,11 +71,21 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
65
71
  0 1px 6px -1px rgb(0 0 0 / 2%),
66
72
  0 2px 4px 0 rgb(0 0 0 / 2%);
67
73
 
68
- transition-timing-function: var(--lobe-tooltip-animation-ease-out);
69
- transition-duration: var(--lobe-tooltip-animation-duration);
70
- transition-property: opacity;
74
+ /* Opacity gets its own monotonic curve: running it on the overshooting spring makes the
75
+ fade look finished at ~0.96, pause, then visibly step to 1 at the clamp point — reads
76
+ as a dropped frame. The spring stays on transform only. */
77
+ transition-timing-function:
78
+ var(--lobe-tooltip-fade-ease), var(--lobe-tooltip-animation-ease-out);
79
+ transition-duration: var(--lobe-tooltip-fade-duration), var(--lobe-tooltip-animation-duration);
80
+ transition-property: opacity, transform;
71
81
 
72
82
  &[data-layout-animation] {
83
+ transition-timing-function:
84
+ var(--lobe-tooltip-fade-ease), var(--lobe-tooltip-animation-ease-out),
85
+ var(--lobe-tooltip-layout-ease), var(--lobe-tooltip-layout-ease);
86
+ transition-duration:
87
+ var(--lobe-tooltip-fade-duration), var(--lobe-tooltip-animation-duration),
88
+ var(--lobe-tooltip-layout-duration), var(--lobe-tooltip-layout-duration);
73
89
  transition-property: opacity, transform, width, height;
74
90
  }
75
91
 
@@ -90,12 +106,71 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
90
106
  }
91
107
  `,
92
108
  positioner: css`
93
- --lobe-tooltip-animation-duration: 100ms;
94
- --lobe-tooltip-animation-duration-exit: 60ms;
95
- --lobe-tooltip-animation-translate: 2px;
96
- --lobe-tooltip-animation-scale: 0.98;
97
- --lobe-tooltip-animation-ease-in: ease-in;
98
- --lobe-tooltip-animation-ease-out: ${cssVar.motionEaseOut};
109
+ /* Springs baked as linear(): stiffness 700 / damping 38 (enter) and 380 / 28 (glide),
110
+ both zeta ~0.72 with ~4% overshoot. Durations are the springs' settle times —
111
+ change them together with the curves, not independently. */
112
+ --lobe-tooltip-animation-duration: 280ms;
113
+ --lobe-tooltip-fade-duration: 160ms;
114
+ --lobe-tooltip-fade-ease: cubic-bezier(0.33, 1, 0.68, 1);
115
+ --lobe-tooltip-animation-duration-exit: 100ms;
116
+ --lobe-tooltip-animation-translate: 3px;
117
+ --lobe-tooltip-animation-scale: 0.97;
118
+ --lobe-tooltip-animation-ease-in: cubic-bezier(0.4, 0, 1, 1);
119
+ --lobe-tooltip-animation-ease-out: linear(
120
+ 0,
121
+ 0.041,
122
+ 0.14,
123
+ 0.268,
124
+ 0.407,
125
+ 0.541,
126
+ 0.662,
127
+ 0.765,
128
+ 0.849,
129
+ 0.915,
130
+ 0.964,
131
+ 0.998,
132
+ 1.02,
133
+ 1.032,
134
+ 1.038,
135
+ 1.039,
136
+ 1.036,
137
+ 1.032,
138
+ 1.027,
139
+ 1.022,
140
+ 1.016,
141
+ 1.012,
142
+ 1.008,
143
+ 1.005,
144
+ 1.003
145
+ );
146
+ --lobe-tooltip-layout-duration: 380ms;
147
+ --lobe-tooltip-layout-ease: linear(
148
+ 0,
149
+ 0.041,
150
+ 0.14,
151
+ 0.268,
152
+ 0.407,
153
+ 0.541,
154
+ 0.661,
155
+ 0.765,
156
+ 0.849,
157
+ 0.915,
158
+ 0.964,
159
+ 0.998,
160
+ 1.02,
161
+ 1.032,
162
+ 1.038,
163
+ 1.039,
164
+ 1.036,
165
+ 1.032,
166
+ 1.027,
167
+ 1.022,
168
+ 1.016,
169
+ 1.012,
170
+ 1.008,
171
+ 1.005,
172
+ 1.003
173
+ );
99
174
  --lobe-tooltip-translate-x: 0;
100
175
  --lobe-tooltip-translate-y: calc(var(--lobe-tooltip-animation-translate) * -1);
101
176
 
@@ -111,6 +186,8 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
111
186
  transition-property: none;
112
187
 
113
188
  &[data-layout-animation] {
189
+ transition-timing-function: var(--lobe-tooltip-layout-ease);
190
+ transition-duration: var(--lobe-tooltip-layout-duration);
114
191
  transition-property:
115
192
  inset-block-start, inset-inline-start, inset-inline-end, inset-block-end, transform;
116
193
  }
@@ -153,9 +230,17 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
153
230
  --lobe-tooltip-translate-x: calc(var(--lobe-tooltip-animation-translate) * -1);
154
231
  --lobe-tooltip-translate-y: 0;
155
232
  }
233
+
234
+ @media (prefers-reduced-motion: reduce) {
235
+ --lobe-tooltip-animation-duration: 0s;
236
+ --lobe-tooltip-fade-duration: 0s;
237
+ --lobe-tooltip-animation-duration-exit: 0s;
238
+ --lobe-tooltip-layout-duration: 0s;
239
+ }
156
240
  `,
157
241
  viewport: css`
158
242
  --lobe-tooltip-viewport-inline-padding: 8px;
243
+ --lobe-tooltip-content-shift: 40%;
159
244
 
160
245
  position: relative;
161
246
 
@@ -181,9 +266,8 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
181
266
  opacity: 1;
182
267
 
183
268
  transition:
184
- transform var(--lobe-tooltip-animation-duration) var(--lobe-tooltip-animation-ease-out),
185
- opacity calc(var(--lobe-tooltip-animation-duration) / 2)
186
- var(--lobe-tooltip-animation-ease-out);
269
+ transform var(--lobe-tooltip-layout-duration) var(--lobe-tooltip-layout-ease),
270
+ opacity calc(var(--lobe-tooltip-layout-duration) / 2) var(--lobe-tooltip-fade-ease);
187
271
  }
188
272
 
189
273
  [data-previous] {
@@ -193,42 +277,42 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
193
277
  }
194
278
 
195
279
  &[data-activation-direction~='right'] [data-previous][data-ending-style] {
196
- transform: translateX(-50%);
280
+ transform: translateX(calc(var(--lobe-tooltip-content-shift) * -1));
197
281
  opacity: 0;
198
282
  }
199
283
 
200
284
  &[data-activation-direction~='right'] [data-current][data-starting-style] {
201
- transform: translateX(50%);
285
+ transform: translateX(var(--lobe-tooltip-content-shift));
202
286
  opacity: 0;
203
287
  }
204
288
 
205
289
  &[data-activation-direction~='left'] [data-previous][data-ending-style] {
206
- transform: translateX(50%);
290
+ transform: translateX(var(--lobe-tooltip-content-shift));
207
291
  opacity: 0;
208
292
  }
209
293
 
210
294
  &[data-activation-direction~='left'] [data-current][data-starting-style] {
211
- transform: translateX(-50%);
295
+ transform: translateX(calc(var(--lobe-tooltip-content-shift) * -1));
212
296
  opacity: 0;
213
297
  }
214
298
 
215
299
  &[data-activation-direction~='down'] [data-previous][data-ending-style] {
216
- transform: translateY(-50%);
300
+ transform: translateY(calc(var(--lobe-tooltip-content-shift) * -1));
217
301
  opacity: 0;
218
302
  }
219
303
 
220
304
  &[data-activation-direction~='down'] [data-current][data-starting-style] {
221
- transform: translateY(50%);
305
+ transform: translateY(var(--lobe-tooltip-content-shift));
222
306
  opacity: 0;
223
307
  }
224
308
 
225
309
  &[data-activation-direction~='up'] [data-previous][data-ending-style] {
226
- transform: translateY(50%);
310
+ transform: translateY(var(--lobe-tooltip-content-shift));
227
311
  opacity: 0;
228
312
  }
229
313
 
230
314
  &[data-activation-direction~='up'] [data-current][data-starting-style] {
231
- transform: translateY(-50%);
315
+ transform: translateY(calc(var(--lobe-tooltip-content-shift) * -1));
232
316
  opacity: 0;
233
317
  }
234
318
  `
package/es/base-ui/Tooltip/style.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Tooltip/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n arrow: css`\n --lobe-tooltip-arrow-offset-block: 4px;\n --lobe-tooltip-arrow-offset-inline: 6px;\n\n pointer-events: none;\n\n position: absolute;\n transform-origin: center;\n\n display: flex;\n\n width: 8px;\n height: 4px;\n\n & > svg {\n display: block;\n width: 100%;\n height: 100%;\n fill: ${cssVar.colorBgElevated};\n }\n\n & [data-role='stroke'] {\n stroke: ${cssVar.colorBorderSecondary};\n }\n\n &[data-side='top'] {\n inset-block-end: calc(var(--lobe-tooltip-arrow-offset-block) * -1);\n transform: rotate(180deg);\n }\n\n &[data-side='left'] {\n inset-inline-end: calc(var(--lobe-tooltip-arrow-offset-inline) * -1);\n transform: rotate(90deg);\n }\n\n &[data-side='right'] {\n inset-inline-start: calc(var(--lobe-tooltip-arrow-offset-inline) * -1);\n transform: rotate(-90deg);\n }\n\n &[data-side='bottom'] {\n inset-block-start: calc(var(--lobe-tooltip-arrow-offset-block) * -1);\n }\n `,\n\n popup: css`\n user-select: none;\n\n position: relative;\n transform-origin: var(--transform-origin);\n\n max-width: min(320px, var(--available-width));\n border: 1px solid ${cssVar.colorFill};\n border-radius: ${cssVar.borderRadiusSM};\n\n font-size: ${cssVar.fontSizeSM};\n line-height: 1.2;\n color: ${cssVar.colorTextLabel};\n\n background: ${cssVar.colorBgElevated};\n box-shadow:\n 0 1px 2px 0 rgb(0 0 0 / 3%),\n 0 1px 6px -1px rgb(0 0 0 / 2%),\n 0 2px 4px 0 rgb(0 0 0 / 2%);\n\n transition-timing-function: var(--lobe-tooltip-animation-ease-out);\n transition-duration: var(--lobe-tooltip-animation-duration);\n transition-property: opacity;\n\n &[data-layout-animation] {\n transition-property: opacity, transform, width, height;\n }\n\n &[data-starting-style],\n &[data-ending-style] {\n transform: translate3d(var(--lobe-tooltip-translate-x), var(--lobe-tooltip-translate-y), 0)\n scale(var(--lobe-tooltip-animation-scale));\n opacity: 0;\n }\n\n &[data-ending-style] {\n transition-timing-function: var(--lobe-tooltip-animation-ease-in);\n transition-duration: var(--lobe-tooltip-animation-duration-exit);\n }\n\n &[data-instant] {\n transition: none;\n }\n `,\n\n positioner: css`\n --lobe-tooltip-animation-duration: 100ms;\n --lobe-tooltip-animation-duration-exit: 60ms;\n --lobe-tooltip-animation-translate: 2px;\n --lobe-tooltip-animation-scale: 0.98;\n --lobe-tooltip-animation-ease-in: ease-in;\n --lobe-tooltip-animation-ease-out: ${cssVar.motionEaseOut};\n --lobe-tooltip-translate-x: 0;\n --lobe-tooltip-translate-y: calc(var(--lobe-tooltip-animation-translate) * -1);\n\n will-change: transform, opacity;\n\n z-index: 114514;\n\n width: min(var(--positioner-width), 320px, var(--available-width));\n height: var(--positioner-height);\n\n transition-timing-function: var(--lobe-tooltip-animation-ease-out);\n transition-duration: var(--lobe-tooltip-animation-duration);\n transition-property: none;\n\n &[data-layout-animation] {\n transition-property:\n inset-block-start, inset-inline-start, inset-inline-end, inset-block-end, transform;\n }\n\n &[data-instant] {\n transition: none;\n }\n\n /* Fallback: never show a tooltip when the anchor is hidden or the positioner falls back to (0,0). */\n &[data-anchor-hidden],\n &[data-zero-origin='true'] {\n pointer-events: none;\n visibility: hidden;\n }\n\n &[data-placement='top'],\n &[data-placement='topLeft'],\n &[data-placement='topRight'] {\n --lobe-tooltip-translate-x: 0;\n --lobe-tooltip-translate-y: var(--lobe-tooltip-animation-translate);\n }\n\n &[data-placement='bottom'],\n &[data-placement='bottomLeft'],\n &[data-placement='bottomRight'] {\n --lobe-tooltip-translate-x: 0;\n --lobe-tooltip-translate-y: calc(var(--lobe-tooltip-animation-translate) * -1);\n }\n\n &[data-placement='left'],\n &[data-placement='leftTop'],\n &[data-placement='leftBottom'] {\n --lobe-tooltip-translate-x: var(--lobe-tooltip-animation-translate);\n --lobe-tooltip-translate-y: 0;\n }\n\n &[data-placement='right'],\n &[data-placement='rightTop'],\n &[data-placement='rightBottom'] {\n --lobe-tooltip-translate-x: calc(var(--lobe-tooltip-animation-translate) * -1);\n --lobe-tooltip-translate-y: 0;\n }\n `,\n\n viewport: css`\n --lobe-tooltip-viewport-inline-padding: 8px;\n\n position: relative;\n\n overflow: clip;\n display: flex;\n gap: 6px;\n align-items: center;\n\n padding-block: 4px;\n padding-inline: var(--lobe-tooltip-viewport-inline-padding);\n\n overflow-wrap: break-word;\n white-space: normal;\n\n [data-previous],\n [data-current] {\n transform: translateX(0);\n\n display: flex;\n gap: 6px;\n align-items: center;\n\n opacity: 1;\n\n transition:\n transform var(--lobe-tooltip-animation-duration) var(--lobe-tooltip-animation-ease-out),\n opacity calc(var(--lobe-tooltip-animation-duration) / 2)\n var(--lobe-tooltip-animation-ease-out);\n }\n\n [data-previous] {\n position: absolute;\n inset-block-start: 4px;\n inset-inline-start: var(--lobe-tooltip-viewport-inline-padding);\n }\n\n &[data-activation-direction~='right'] [data-previous][data-ending-style] {\n transform: translateX(-50%);\n opacity: 0;\n }\n\n &[data-activation-direction~='right'] [data-current][data-starting-style] {\n transform: translateX(50%);\n opacity: 0;\n }\n\n &[data-activation-direction~='left'] [data-previous][data-ending-style] {\n transform: translateX(50%);\n opacity: 0;\n }\n\n &[data-activation-direction~='left'] [data-current][data-starting-style] {\n transform: translateX(-50%);\n opacity: 0;\n }\n\n &[data-activation-direction~='down'] [data-previous][data-ending-style] {\n transform: translateY(-50%);\n opacity: 0;\n }\n\n &[data-activation-direction~='down'] [data-current][data-starting-style] {\n transform: translateY(50%);\n opacity: 0;\n }\n\n &[data-activation-direction~='up'] [data-previous][data-ending-style] {\n transform: translateY(50%);\n opacity: 0;\n }\n\n &[data-activation-direction~='up'] [data-current][data-starting-style] {\n transform: translateY(-50%);\n opacity: 0;\n }\n `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,OAAO,GAAG;;;;;;;;;;;;;;;;;;cAkBE,OAAO,gBAAgB;;;;gBAIrB,OAAO,qBAAqB;;;;;;;;;;;;;;;;;;;;;;CAuB1C,OAAO,GAAG;;;;;;;wBAOY,OAAO,UAAU;qBACpB,OAAO,eAAe;;iBAE1B,OAAO,WAAW;;aAEtB,OAAO,eAAe;;kBAEjB,OAAO,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BvC,YAAY,GAAG;;;;;;yCAMwB,OAAO,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4D5D,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8Ef,EAAE"}
1
+ {"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Tooltip/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n arrow: css`\n --lobe-tooltip-arrow-offset-block: 4px;\n --lobe-tooltip-arrow-offset-inline: 6px;\n\n pointer-events: none;\n\n position: absolute;\n transform-origin: center;\n\n display: flex;\n\n width: 8px;\n height: 4px;\n\n & > svg {\n display: block;\n width: 100%;\n height: 100%;\n fill: ${cssVar.colorBgElevated};\n }\n\n & [data-role='stroke'] {\n stroke: ${cssVar.colorBorderSecondary};\n }\n\n &[data-side='top'] {\n inset-block-end: calc(var(--lobe-tooltip-arrow-offset-block) * -1);\n transform: rotate(180deg);\n }\n\n &[data-side='left'] {\n inset-inline-end: calc(var(--lobe-tooltip-arrow-offset-inline) * -1);\n transform: rotate(90deg);\n }\n\n &[data-side='right'] {\n inset-inline-start: calc(var(--lobe-tooltip-arrow-offset-inline) * -1);\n transform: rotate(-90deg);\n }\n\n &[data-side='bottom'] {\n inset-block-start: calc(var(--lobe-tooltip-arrow-offset-block) * -1);\n }\n `,\n\n popup: css`\n\n /* Keep the popup on its own compositor layer for its whole lifetime: when the opacity\n transition ends the browser otherwise drops the layer and re-rasterizes with pixel\n snapping — a visible one-frame shift when the measured width is fractional\n (single-line tooltips). */\n will-change: transform, opacity;\n user-select: none;\n\n position: relative;\n transform-origin: var(--transform-origin);\n\n max-width: min(320px, var(--available-width));\n border: 1px solid ${cssVar.colorFill};\n border-radius: ${cssVar.borderRadiusSM};\n\n font-size: ${cssVar.fontSizeSM};\n line-height: 1.2;\n color: ${cssVar.colorTextLabel};\n\n background: ${cssVar.colorBgElevated};\n box-shadow:\n 0 1px 2px 0 rgb(0 0 0 / 3%),\n 0 1px 6px -1px rgb(0 0 0 / 2%),\n 0 2px 4px 0 rgb(0 0 0 / 2%);\n\n /* Opacity gets its own monotonic curve: running it on the overshooting spring makes the\n fade look finished at ~0.96, pause, then visibly step to 1 at the clamp point — reads\n as a dropped frame. The spring stays on transform only. */\n transition-timing-function:\n var(--lobe-tooltip-fade-ease), var(--lobe-tooltip-animation-ease-out);\n transition-duration: var(--lobe-tooltip-fade-duration), var(--lobe-tooltip-animation-duration);\n transition-property: opacity, transform;\n\n &[data-layout-animation] {\n transition-timing-function:\n var(--lobe-tooltip-fade-ease), var(--lobe-tooltip-animation-ease-out),\n var(--lobe-tooltip-layout-ease), var(--lobe-tooltip-layout-ease);\n transition-duration:\n var(--lobe-tooltip-fade-duration), var(--lobe-tooltip-animation-duration),\n var(--lobe-tooltip-layout-duration), var(--lobe-tooltip-layout-duration);\n transition-property: opacity, transform, width, height;\n }\n\n &[data-starting-style],\n &[data-ending-style] {\n transform: translate3d(var(--lobe-tooltip-translate-x), var(--lobe-tooltip-translate-y), 0)\n scale(var(--lobe-tooltip-animation-scale));\n opacity: 0;\n }\n\n &[data-ending-style] {\n transition-timing-function: var(--lobe-tooltip-animation-ease-in);\n transition-duration: var(--lobe-tooltip-animation-duration-exit);\n }\n\n &[data-instant] {\n transition: none;\n }\n `,\n\n positioner: css`\n /* Springs baked as linear(): stiffness 700 / damping 38 (enter) and 380 / 28 (glide),\n both zeta ~0.72 with ~4% overshoot. Durations are the springs' settle times —\n change them together with the curves, not independently. */\n --lobe-tooltip-animation-duration: 280ms;\n --lobe-tooltip-fade-duration: 160ms;\n --lobe-tooltip-fade-ease: cubic-bezier(0.33, 1, 0.68, 1);\n --lobe-tooltip-animation-duration-exit: 100ms;\n --lobe-tooltip-animation-translate: 3px;\n --lobe-tooltip-animation-scale: 0.97;\n --lobe-tooltip-animation-ease-in: cubic-bezier(0.4, 0, 1, 1);\n --lobe-tooltip-animation-ease-out: linear(\n 0,\n 0.041,\n 0.14,\n 0.268,\n 0.407,\n 0.541,\n 0.662,\n 0.765,\n 0.849,\n 0.915,\n 0.964,\n 0.998,\n 1.02,\n 1.032,\n 1.038,\n 1.039,\n 1.036,\n 1.032,\n 1.027,\n 1.022,\n 1.016,\n 1.012,\n 1.008,\n 1.005,\n 1.003\n );\n --lobe-tooltip-layout-duration: 380ms;\n --lobe-tooltip-layout-ease: linear(\n 0,\n 0.041,\n 0.14,\n 0.268,\n 0.407,\n 0.541,\n 0.661,\n 0.765,\n 0.849,\n 0.915,\n 0.964,\n 0.998,\n 1.02,\n 1.032,\n 1.038,\n 1.039,\n 1.036,\n 1.032,\n 1.027,\n 1.022,\n 1.016,\n 1.012,\n 1.008,\n 1.005,\n 1.003\n );\n --lobe-tooltip-translate-x: 0;\n --lobe-tooltip-translate-y: calc(var(--lobe-tooltip-animation-translate) * -1);\n\n will-change: transform, opacity;\n\n z-index: 114514;\n\n width: min(var(--positioner-width), 320px, var(--available-width));\n height: var(--positioner-height);\n\n transition-timing-function: var(--lobe-tooltip-animation-ease-out);\n transition-duration: var(--lobe-tooltip-animation-duration);\n transition-property: none;\n\n &[data-layout-animation] {\n transition-timing-function: var(--lobe-tooltip-layout-ease);\n transition-duration: var(--lobe-tooltip-layout-duration);\n transition-property:\n inset-block-start, inset-inline-start, inset-inline-end, inset-block-end, transform;\n }\n\n &[data-instant] {\n transition: none;\n }\n\n /* Fallback: never show a tooltip when the anchor is hidden or the positioner falls back to (0,0). */\n &[data-anchor-hidden],\n &[data-zero-origin='true'] {\n pointer-events: none;\n visibility: hidden;\n }\n\n &[data-placement='top'],\n &[data-placement='topLeft'],\n &[data-placement='topRight'] {\n --lobe-tooltip-translate-x: 0;\n --lobe-tooltip-translate-y: var(--lobe-tooltip-animation-translate);\n }\n\n &[data-placement='bottom'],\n &[data-placement='bottomLeft'],\n &[data-placement='bottomRight'] {\n --lobe-tooltip-translate-x: 0;\n --lobe-tooltip-translate-y: calc(var(--lobe-tooltip-animation-translate) * -1);\n }\n\n &[data-placement='left'],\n &[data-placement='leftTop'],\n &[data-placement='leftBottom'] {\n --lobe-tooltip-translate-x: var(--lobe-tooltip-animation-translate);\n --lobe-tooltip-translate-y: 0;\n }\n\n &[data-placement='right'],\n &[data-placement='rightTop'],\n &[data-placement='rightBottom'] {\n --lobe-tooltip-translate-x: calc(var(--lobe-tooltip-animation-translate) * -1);\n --lobe-tooltip-translate-y: 0;\n }\n\n @media (prefers-reduced-motion: reduce) {\n --lobe-tooltip-animation-duration: 0s;\n --lobe-tooltip-fade-duration: 0s;\n --lobe-tooltip-animation-duration-exit: 0s;\n --lobe-tooltip-layout-duration: 0s;\n }\n `,\n\n viewport: css`\n --lobe-tooltip-viewport-inline-padding: 8px;\n --lobe-tooltip-content-shift: 40%;\n\n position: relative;\n\n overflow: clip;\n display: flex;\n gap: 6px;\n align-items: center;\n\n padding-block: 4px;\n padding-inline: var(--lobe-tooltip-viewport-inline-padding);\n\n overflow-wrap: break-word;\n white-space: normal;\n\n [data-previous],\n [data-current] {\n transform: translateX(0);\n\n display: flex;\n gap: 6px;\n align-items: center;\n\n opacity: 1;\n\n transition:\n transform var(--lobe-tooltip-layout-duration) var(--lobe-tooltip-layout-ease),\n opacity calc(var(--lobe-tooltip-layout-duration) / 2) var(--lobe-tooltip-fade-ease);\n }\n\n [data-previous] {\n position: absolute;\n inset-block-start: 4px;\n inset-inline-start: var(--lobe-tooltip-viewport-inline-padding);\n }\n\n &[data-activation-direction~='right'] [data-previous][data-ending-style] {\n transform: translateX(calc(var(--lobe-tooltip-content-shift) * -1));\n opacity: 0;\n }\n\n &[data-activation-direction~='right'] [data-current][data-starting-style] {\n transform: translateX(var(--lobe-tooltip-content-shift));\n opacity: 0;\n }\n\n &[data-activation-direction~='left'] [data-previous][data-ending-style] {\n transform: translateX(var(--lobe-tooltip-content-shift));\n opacity: 0;\n }\n\n &[data-activation-direction~='left'] [data-current][data-starting-style] {\n transform: translateX(calc(var(--lobe-tooltip-content-shift) * -1));\n opacity: 0;\n }\n\n &[data-activation-direction~='down'] [data-previous][data-ending-style] {\n transform: translateY(calc(var(--lobe-tooltip-content-shift) * -1));\n opacity: 0;\n }\n\n &[data-activation-direction~='down'] [data-current][data-starting-style] {\n transform: translateY(var(--lobe-tooltip-content-shift));\n opacity: 0;\n }\n\n &[data-activation-direction~='up'] [data-previous][data-ending-style] {\n transform: translateY(var(--lobe-tooltip-content-shift));\n opacity: 0;\n }\n\n &[data-activation-direction~='up'] [data-current][data-starting-style] {\n transform: translateY(calc(var(--lobe-tooltip-content-shift) * -1));\n opacity: 0;\n }\n `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,OAAO,GAAG;;;;;;;;;;;;;;;;;;cAkBE,OAAO,gBAAgB;;;;gBAIrB,OAAO,qBAAqB;;;;;;;;;;;;;;;;;;;;;;CAuB1C,OAAO,GAAG;;;;;;;;;;;;;wBAaY,OAAO,UAAU;qBACpB,OAAO,eAAe;;iBAE1B,OAAO,WAAW;;aAEtB,OAAO,eAAe;;kBAEjB,OAAO,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCvC,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsIf,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8Ef,EAAE"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lobehub/ui",
3
- "version": "5.32.4",
3
+ "version": "5.32.5",
4
4
  "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
5
5
  "keywords": [
6
6
  "lobehub",