sileo 0.0.7 → 0.0.8
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/{cc-2Yt7NqMX.mjs → cc-B6peeNak.mjs} +13 -1
- package/dist/{cc-DGff5sSY.js → cc-CaBHsjUt.js} +13 -0
- package/dist/index.js +74 -123
- package/dist/index.mjs +74 -123
- package/dist/styles.css +25 -18
- package/package.json +1 -1
|
@@ -18,4 +18,16 @@ function _extends() {
|
|
|
18
18
|
return _extends.apply(this, arguments);
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
function _object_without_properties_loose(source, excluded) {
|
|
22
|
+
if (source == null) return {};
|
|
23
|
+
var target = {}, sourceKeys = Object.getOwnPropertyNames(source), key, i;
|
|
24
|
+
for(i = 0; i < sourceKeys.length; i++){
|
|
25
|
+
key = sourceKeys[i];
|
|
26
|
+
if (excluded.indexOf(key) >= 0) continue;
|
|
27
|
+
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
|
|
28
|
+
target[key] = source[key];
|
|
29
|
+
}
|
|
30
|
+
return target;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
export { _extends as _, _object_without_properties_loose as a };
|
|
@@ -18,4 +18,17 @@ function _extends() {
|
|
|
18
18
|
return _extends.apply(this, arguments);
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
+
function _object_without_properties_loose(source, excluded) {
|
|
22
|
+
if (source == null) return {};
|
|
23
|
+
var target = {}, sourceKeys = Object.getOwnPropertyNames(source), key, i;
|
|
24
|
+
for(i = 0; i < sourceKeys.length; i++){
|
|
25
|
+
key = sourceKeys[i];
|
|
26
|
+
if (excluded.indexOf(key) >= 0) continue;
|
|
27
|
+
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
|
|
28
|
+
target[key] = source[key];
|
|
29
|
+
}
|
|
30
|
+
return target;
|
|
31
|
+
}
|
|
32
|
+
|
|
21
33
|
exports._extends = _extends;
|
|
34
|
+
exports._object_without_properties_loose = _object_without_properties_loose;
|
package/dist/index.js
CHANGED
|
@@ -10,13 +10,18 @@ function __insertCSS(code) {
|
|
|
10
10
|
|
|
11
11
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
12
12
|
|
|
13
|
-
var cc = require('./cc-
|
|
13
|
+
var cc = require('./cc-CaBHsjUt.js');
|
|
14
14
|
var jsxRuntime = require('react/jsx-runtime');
|
|
15
15
|
var react = require('react');
|
|
16
16
|
|
|
17
|
-
__insertCSS(":root{--sileo-spring-easing:linear(\n\t\t0,\n\t\t0.002 0.6%,\n\t\t0.007 1.2%,\n\t\t0.015 1.8%,\n\t\t0.025 2.4%,\n\t\t0.057 3.7%,\n\t\t0.104 5.2%,\n\t\t0.151 6.5%,\n\t\t0.208 7.9%,\n\t\t0.455 13.6%,\n\t\t0.566 16.3%,\n\t\t0.619 17.7%,\n\t\t0.669 19.1%,\n\t\t0.715 20.5%,\n\t\t0.755 21.8%,\n\t\t0.794 23.2%,\n\t\t0.829 24.6%,\n\t\t0.861 26%,\n\t\t0.889 27.4%,\n\t\t0.914 28.8%,\n\t\t0.937 30.3%,\n\t\t0.956 31.8%,\n\t\t0.974 33.4%,\n\t\t0.987 34.8%,\n\t\t0.997 36.2%,\n\t\t1.014 39.2%,\n\t\t1.024 42.5%,\n\t\t1.028 46.3%,\n\t\t1.026 51.9%,\n\t\t1.01 66.1%,\n\t\t1.003 74.9%,\n\t\t1 85.2%,\n\t\t1\n\t);--sileo-duration:600ms;--sileo-height:40px;--sileo-width:350px;--sileo-state-success:oklch(0.723 0.219 142.136);--sileo-state-loading:oklch(0.556 0 0);--sileo-state-error:oklch(0.637 0.237 25.331);--sileo-state-warning:oklch(0.795 0.184 86.047);--sileo-state-info:oklch(0.685 0.169 237.323);--sileo-state-action:oklch(0.623 0.214 259.815)}[data-sileo-toast]{position:relative;cursor:pointer;pointer-events:auto;touch-action:none;border:0;background:0 0;padding:0;width:var(--sileo-width);height:var(--
|
|
17
|
+
__insertCSS(":root{--sileo-spring-easing:linear(\n\t\t0,\n\t\t0.002 0.6%,\n\t\t0.007 1.2%,\n\t\t0.015 1.8%,\n\t\t0.025 2.4%,\n\t\t0.057 3.7%,\n\t\t0.104 5.2%,\n\t\t0.151 6.5%,\n\t\t0.208 7.9%,\n\t\t0.455 13.6%,\n\t\t0.566 16.3%,\n\t\t0.619 17.7%,\n\t\t0.669 19.1%,\n\t\t0.715 20.5%,\n\t\t0.755 21.8%,\n\t\t0.794 23.2%,\n\t\t0.829 24.6%,\n\t\t0.861 26%,\n\t\t0.889 27.4%,\n\t\t0.914 28.8%,\n\t\t0.937 30.3%,\n\t\t0.956 31.8%,\n\t\t0.974 33.4%,\n\t\t0.987 34.8%,\n\t\t0.997 36.2%,\n\t\t1.014 39.2%,\n\t\t1.024 42.5%,\n\t\t1.028 46.3%,\n\t\t1.026 51.9%,\n\t\t1.01 66.1%,\n\t\t1.003 74.9%,\n\t\t1 85.2%,\n\t\t1\n\t);--sileo-duration:600ms;--sileo-height:40px;--sileo-width:350px;--sileo-state-success:oklch(0.723 0.219 142.136);--sileo-state-loading:oklch(0.556 0 0);--sileo-state-error:oklch(0.637 0.237 25.331);--sileo-state-warning:oklch(0.795 0.184 86.047);--sileo-state-info:oklch(0.685 0.169 237.323);--sileo-state-action:oklch(0.623 0.214 259.815)}[data-sileo-toast]{position:relative;cursor:pointer;pointer-events:auto;touch-action:none;border:0;background:0 0;padding:0;width:var(--sileo-width);height:var(--_h,var(--sileo-height));opacity:0;transform:translateZ(0) scale(.95);transform-origin:center;contain:layout style;overflow:visible}[data-sileo-toast][data-state=loading]{cursor:default}[data-sileo-toast][data-ready=true]{opacity:1;transform:translateZ(0) scale(1);transition:transform calc(var(--sileo-duration) * .66) var(--sileo-spring-easing),opacity calc(var(--sileo-duration) * .66) var(--sileo-spring-easing),margin-bottom calc(var(--sileo-duration) * .66) var(--sileo-spring-easing),margin-top calc(var(--sileo-duration) * .66) var(--sileo-spring-easing),height var(--sileo-duration) var(--sileo-spring-easing)}[data-sileo-viewport][data-position^=top] [data-sileo-toast]:not([data-ready=true]){transform:translateY(-6px) scale(.95)}[data-sileo-viewport][data-position^=bottom] [data-sileo-toast]:not([data-ready=true]){transform:translateY(6px) scale(.95)}[data-sileo-toast][data-ready=true][data-exiting=true]{opacity:0;pointer-events:none}[data-sileo-viewport][data-position^=top] [data-sileo-toast][data-ready=true][data-exiting=true]{transform:translateY(-6px) scale(.95)}[data-sileo-viewport][data-position^=bottom] [data-sileo-toast][data-ready=true][data-exiting=true]{transform:translateY(6px) scale(.95)}[data-sileo-canvas]{position:absolute;left:0;right:0;pointer-events:none;transform:translateZ(0);contain:layout style;overflow:visible}[data-sileo-canvas][data-edge=top]{bottom:0;transform:scaleY(-1) translateZ(0)}[data-sileo-canvas][data-edge=bottom]{top:0}[data-sileo-svg]{overflow:visible}[data-sileo-body],[data-sileo-pill]{transform-box:fill-box;transform-origin:50% 0%}[data-sileo-pill]{transform:scaleY(var(--_sy,1));width:var(--_pw);height:var(--_ph)}[data-sileo-body]{transform:scaleY(var(--_by,0));opacity:var(--_by, 0)}[data-sileo-toast][data-ready=true] [data-sileo-pill]{transition:transform var(--sileo-duration) var(--sileo-spring-easing),width var(--sileo-duration) var(--sileo-spring-easing),height var(--sileo-duration) var(--sileo-spring-easing),x var(--sileo-duration) var(--sileo-spring-easing),fill var(--sileo-duration) var(--sileo-spring-easing)}[data-sileo-toast][data-ready=true][data-expanded=true] [data-sileo-pill]{transition-delay:calc(var(--sileo-duration) * 0.08)}[data-sileo-toast][data-ready=true] [data-sileo-body]{transition:transform var(--sileo-duration) var(--sileo-spring-easing),opacity var(--sileo-duration) var(--sileo-spring-easing),fill var(--sileo-duration) var(--sileo-spring-easing)}[data-sileo-header]{position:absolute;z-index:20;display:flex;align-items:center;padding:.5rem;height:var(--sileo-height);overflow:hidden;left:var(--_px,0);transform:var(--_ht);max-width:var(--_pw)}[data-sileo-toast][data-ready=true] [data-sileo-header]{transition:transform var(--sileo-duration) var(--sileo-spring-easing),left var(--sileo-duration) var(--sileo-spring-easing),max-width var(--sileo-duration) var(--sileo-spring-easing)}[data-sileo-header][data-edge=top]{bottom:0}[data-sileo-header][data-edge=bottom]{top:0}[data-sileo-header-stack]{position:relative;display:inline-flex;align-items:center;height:100%}[data-sileo-header-inner]{display:flex;align-items:center;gap:.5rem;white-space:nowrap;opacity:1;filter:blur(0px);will-change:opacity,filter}[data-sileo-header-inner][data-layer=current]{animation:sileo-header-enter var(--sileo-duration) var(--sileo-spring-easing) both}[data-sileo-header-inner][data-layer=prev]{position:absolute;left:0;top:0;pointer-events:none}[data-sileo-header-inner][data-exiting=true]{animation:sileo-header-exit 150ms ease forwards}[data-sileo-badge]{display:flex;height:24px;width:24px;flex-shrink:0;align-items:center;justify-content:center;padding:2px;box-sizing:border-box;border-radius:9999px;color:var(--sileo-tone,currentColor);background-color:var(--sileo-tone-bg,transparent)}[data-sileo-title]{font-size:.825rem;line-height:1rem;font-weight:500;text-transform:capitalize;color:var(--sileo-tone,currentColor)}:is([data-sileo-badge],[data-sileo-title])[data-state]{--_c:var(--sileo-state-success);--sileo-tone:var(--_c);--sileo-tone-bg:color-mix(in oklch, var(--_c) 20%, transparent)}:is([data-sileo-badge],[data-sileo-title])[data-state=loading]{--_c:var(--sileo-state-loading)}:is([data-sileo-badge],[data-sileo-title])[data-state=error]{--_c:var(--sileo-state-error)}:is([data-sileo-badge],[data-sileo-title])[data-state=warning]{--_c:var(--sileo-state-warning)}:is([data-sileo-badge],[data-sileo-title])[data-state=info]{--_c:var(--sileo-state-info)}:is([data-sileo-badge],[data-sileo-title])[data-state=action]{--_c:var(--sileo-state-action)}[data-sileo-content]{position:absolute;left:0;z-index:10;width:100%;pointer-events:none;opacity:var(--_co, 0)}[data-sileo-content]:not([data-visible=true]){content-visibility:hidden}[data-sileo-toast][data-ready=true] [data-sileo-content]{transition:opacity calc(var(--sileo-duration) * .08) var(--sileo-spring-easing) calc(var(--sileo-duration) * .04)}[data-sileo-content][data-edge=top]{top:0}[data-sileo-content][data-edge=bottom]{top:var(--sileo-height)}[data-sileo-content][data-visible=true]{pointer-events:auto}[data-sileo-toast][data-ready=true] [data-sileo-content][data-visible=true]{transition:opacity var(--sileo-duration) var(--sileo-spring-easing) calc(var(--sileo-duration) * .25)}[data-sileo-description]{width:100%;text-align:left;padding:1rem;font-size:.875rem;line-height:1.25rem;contain:layout style;content-visibility:auto}[data-sileo-button]{display:flex;align-items:center;justify-content:center;height:1.75rem;padding:0 .625rem;margin-top:.75rem;border-radius:9999px;border:0;font-size:.75rem;font-weight:500;cursor:pointer;color:var(--sileo-btn-color,currentColor);background-color:var(--sileo-btn-bg,transparent);transition:background-color 150ms ease}[data-sileo-button]:hover{background-color:var(--sileo-btn-bg-hover,transparent)}[data-sileo-button][data-state]{--_c:var(--sileo-state-success);--sileo-btn-color:var(--_c);--sileo-btn-bg:color-mix(in oklch, var(--_c) 15%, transparent);--sileo-btn-bg-hover:color-mix(in oklch, var(--_c) 25%, transparent)}[data-sileo-button][data-state=loading]{--_c:var(--sileo-state-loading)}[data-sileo-button][data-state=error]{--_c:var(--sileo-state-error)}[data-sileo-button][data-state=warning]{--_c:var(--sileo-state-warning)}[data-sileo-button][data-state=info]{--_c:var(--sileo-state-info)}[data-sileo-button][data-state=action]{--_c:var(--sileo-state-action)}[data-sileo-icon=spin]{animation:sileo-spin 1s linear infinite}@keyframes sileo-spin{to{rotate:360deg}}@keyframes sileo-header-enter{from{opacity:0;filter:blur(6px)}to{opacity:1;filter:blur(0px)}}@keyframes sileo-header-exit{from{opacity:1;filter:blur(0px)}to{opacity:0;filter:blur(6px)}}[data-sileo-viewport]{position:fixed;z-index:50;display:flex;gap:.75rem;padding:.75rem;pointer-events:none;max-width:calc(100vw - 1.5rem);contain:layout style}[data-sileo-viewport][data-position^=top] [data-sileo-toast]:not([data-ready=true]){margin-bottom:calc(-1 * (var(--sileo-height) + .75rem))}[data-sileo-viewport][data-position^=bottom] [data-sileo-toast]:not([data-ready=true]){margin-top:calc(-1 * (var(--sileo-height) + .75rem))}[data-sileo-viewport][data-position^=top]{top:0;flex-direction:column-reverse}[data-sileo-viewport][data-position^=bottom]{bottom:0;flex-direction:column}[data-sileo-viewport][data-position$=left]{left:0;align-items:flex-start}[data-sileo-viewport][data-position$=right]{right:0;align-items:flex-end}[data-sileo-viewport][data-position$=center]{left:50%;transform:translateX(-50%);align-items:center}@media (prefers-reduced-motion:no-preference){[data-sileo-toast][data-ready=true]:hover,[data-sileo-toast][data-ready=true][data-exiting=true]{will-change:transform,opacity,height}}@media (prefers-reduced-motion:reduce){*,::after,::before{animation-duration:0s;animation-iteration-count:1;transition-duration:0s}}");
|
|
18
18
|
|
|
19
|
-
const
|
|
19
|
+
const Icon = (_0)=>{
|
|
20
|
+
let { title, children } = _0, props = cc._object_without_properties_loose(_0, [
|
|
21
|
+
"title",
|
|
22
|
+
"children"
|
|
23
|
+
]);
|
|
24
|
+
return /*#__PURE__*/ jsxRuntime.jsxs("svg", cc._extends({}, props, {
|
|
20
25
|
xmlns: "http://www.w3.org/2000/svg",
|
|
21
26
|
width: "16",
|
|
22
27
|
height: "16",
|
|
@@ -28,8 +33,15 @@ const ArrowRight = ()=>/*#__PURE__*/ jsxRuntime.jsxs("svg", {
|
|
|
28
33
|
strokeLinejoin: "round",
|
|
29
34
|
children: [
|
|
30
35
|
/*#__PURE__*/ jsxRuntime.jsx("title", {
|
|
31
|
-
children:
|
|
36
|
+
children: title
|
|
32
37
|
}),
|
|
38
|
+
children
|
|
39
|
+
]
|
|
40
|
+
}));
|
|
41
|
+
};
|
|
42
|
+
const ArrowRight = ()=>/*#__PURE__*/ jsxRuntime.jsxs(Icon, {
|
|
43
|
+
title: "Arrow Right",
|
|
44
|
+
children: [
|
|
33
45
|
/*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
34
46
|
d: "M5 12h14"
|
|
35
47
|
}),
|
|
@@ -38,20 +50,9 @@ const ArrowRight = ()=>/*#__PURE__*/ jsxRuntime.jsxs("svg", {
|
|
|
38
50
|
})
|
|
39
51
|
]
|
|
40
52
|
});
|
|
41
|
-
const LifeBuoy = ()=>/*#__PURE__*/ jsxRuntime.jsxs(
|
|
42
|
-
|
|
43
|
-
width: "16",
|
|
44
|
-
height: "16",
|
|
45
|
-
viewBox: "0 0 24 24",
|
|
46
|
-
fill: "none",
|
|
47
|
-
stroke: "currentColor",
|
|
48
|
-
strokeWidth: "2",
|
|
49
|
-
strokeLinecap: "round",
|
|
50
|
-
strokeLinejoin: "round",
|
|
53
|
+
const LifeBuoy = ()=>/*#__PURE__*/ jsxRuntime.jsxs(Icon, {
|
|
54
|
+
title: "Life Buoy",
|
|
51
55
|
children: [
|
|
52
|
-
/*#__PURE__*/ jsxRuntime.jsx("title", {
|
|
53
|
-
children: "Life Buoy"
|
|
54
|
-
}),
|
|
55
56
|
/*#__PURE__*/ jsxRuntime.jsx("circle", {
|
|
56
57
|
cx: "12",
|
|
57
58
|
cy: "12",
|
|
@@ -76,39 +77,16 @@ const LifeBuoy = ()=>/*#__PURE__*/ jsxRuntime.jsxs("svg", {
|
|
|
76
77
|
})
|
|
77
78
|
]
|
|
78
79
|
});
|
|
79
|
-
const LoaderCircle = (props)=>/*#__PURE__*/ jsxRuntime.
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
stroke: "currentColor",
|
|
86
|
-
strokeWidth: "2",
|
|
87
|
-
strokeLinecap: "round",
|
|
88
|
-
strokeLinejoin: "round",
|
|
89
|
-
children: [
|
|
90
|
-
/*#__PURE__*/ jsxRuntime.jsx("title", {
|
|
91
|
-
children: "Loader Circle"
|
|
92
|
-
}),
|
|
93
|
-
/*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
94
|
-
d: "M21 12a9 9 0 1 1-6.219-8.56"
|
|
95
|
-
})
|
|
96
|
-
]
|
|
80
|
+
const LoaderCircle = (props)=>/*#__PURE__*/ jsxRuntime.jsx(Icon, cc._extends({
|
|
81
|
+
title: "Loader Circle"
|
|
82
|
+
}, props, {
|
|
83
|
+
children: /*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
84
|
+
d: "M21 12a9 9 0 1 1-6.219-8.56"
|
|
85
|
+
})
|
|
97
86
|
}));
|
|
98
|
-
const X = ()=>/*#__PURE__*/ jsxRuntime.jsxs(
|
|
99
|
-
|
|
100
|
-
width: "16",
|
|
101
|
-
height: "16",
|
|
102
|
-
viewBox: "0 0 24 24",
|
|
103
|
-
fill: "none",
|
|
104
|
-
stroke: "currentColor",
|
|
105
|
-
strokeWidth: "2",
|
|
106
|
-
strokeLinecap: "round",
|
|
107
|
-
strokeLinejoin: "round",
|
|
87
|
+
const X = ()=>/*#__PURE__*/ jsxRuntime.jsxs(Icon, {
|
|
88
|
+
title: "X",
|
|
108
89
|
children: [
|
|
109
|
-
/*#__PURE__*/ jsxRuntime.jsx("title", {
|
|
110
|
-
children: "X"
|
|
111
|
-
}),
|
|
112
90
|
/*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
113
91
|
d: "M18 6 6 18"
|
|
114
92
|
}),
|
|
@@ -117,20 +95,9 @@ const X = ()=>/*#__PURE__*/ jsxRuntime.jsxs("svg", {
|
|
|
117
95
|
})
|
|
118
96
|
]
|
|
119
97
|
});
|
|
120
|
-
const CircleAlert = ()=>/*#__PURE__*/ jsxRuntime.jsxs(
|
|
121
|
-
|
|
122
|
-
width: "16",
|
|
123
|
-
height: "16",
|
|
124
|
-
viewBox: "0 0 24 24",
|
|
125
|
-
fill: "none",
|
|
126
|
-
stroke: "currentColor",
|
|
127
|
-
strokeWidth: "2",
|
|
128
|
-
strokeLinecap: "round",
|
|
129
|
-
strokeLinejoin: "round",
|
|
98
|
+
const CircleAlert = ()=>/*#__PURE__*/ jsxRuntime.jsxs(Icon, {
|
|
99
|
+
title: "Circle Alert",
|
|
130
100
|
children: [
|
|
131
|
-
/*#__PURE__*/ jsxRuntime.jsx("title", {
|
|
132
|
-
children: "Circle Alert"
|
|
133
|
-
}),
|
|
134
101
|
/*#__PURE__*/ jsxRuntime.jsx("circle", {
|
|
135
102
|
cx: "12",
|
|
136
103
|
cy: "12",
|
|
@@ -150,24 +117,11 @@ const CircleAlert = ()=>/*#__PURE__*/ jsxRuntime.jsxs("svg", {
|
|
|
150
117
|
})
|
|
151
118
|
]
|
|
152
119
|
});
|
|
153
|
-
const Check = ()=>/*#__PURE__*/ jsxRuntime.
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
fill: "none",
|
|
159
|
-
stroke: "currentColor",
|
|
160
|
-
strokeWidth: "2",
|
|
161
|
-
strokeLinecap: "round",
|
|
162
|
-
strokeLinejoin: "round",
|
|
163
|
-
children: [
|
|
164
|
-
/*#__PURE__*/ jsxRuntime.jsx("title", {
|
|
165
|
-
children: "Check"
|
|
166
|
-
}),
|
|
167
|
-
/*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
168
|
-
d: "M20 6 9 17l-5-5"
|
|
169
|
-
})
|
|
170
|
-
]
|
|
120
|
+
const Check = ()=>/*#__PURE__*/ jsxRuntime.jsx(Icon, {
|
|
121
|
+
title: "Check",
|
|
122
|
+
children: /*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
123
|
+
d: "M20 6 9 17l-5-5"
|
|
124
|
+
})
|
|
171
125
|
});
|
|
172
126
|
|
|
173
127
|
/* --------------------------------- Config --------------------------------- */ const HEIGHT = 40;
|
|
@@ -287,9 +241,16 @@ const HEADER_EXIT_MS = 150;
|
|
|
287
241
|
}
|
|
288
242
|
};
|
|
289
243
|
measure();
|
|
290
|
-
|
|
244
|
+
let rafId = 0;
|
|
245
|
+
const ro = new ResizeObserver(()=>{
|
|
246
|
+
cancelAnimationFrame(rafId);
|
|
247
|
+
rafId = requestAnimationFrame(measure);
|
|
248
|
+
});
|
|
291
249
|
ro.observe(el);
|
|
292
|
-
return ()=>
|
|
250
|
+
return ()=>{
|
|
251
|
+
cancelAnimationFrame(rafId);
|
|
252
|
+
ro.disconnect();
|
|
253
|
+
};
|
|
293
254
|
}, [
|
|
294
255
|
headerLayer.current.key
|
|
295
256
|
]);
|
|
@@ -305,9 +266,16 @@ const HEADER_EXIT_MS = 150;
|
|
|
305
266
|
setContentHeight((prev)=>prev === h ? prev : h);
|
|
306
267
|
};
|
|
307
268
|
measure();
|
|
308
|
-
|
|
269
|
+
let rafId = 0;
|
|
270
|
+
const ro = new ResizeObserver(()=>{
|
|
271
|
+
cancelAnimationFrame(rafId);
|
|
272
|
+
rafId = requestAnimationFrame(measure);
|
|
273
|
+
});
|
|
309
274
|
ro.observe(el);
|
|
310
|
-
return ()=>
|
|
275
|
+
return ()=>{
|
|
276
|
+
cancelAnimationFrame(rafId);
|
|
277
|
+
ro.disconnect();
|
|
278
|
+
};
|
|
311
279
|
}, [
|
|
312
280
|
hasDesc
|
|
313
281
|
]);
|
|
@@ -439,41 +407,21 @@ const HEADER_EXIT_MS = 150;
|
|
|
439
407
|
const expandedContent = Math.max(0, expanded - HEIGHT);
|
|
440
408
|
const resolvedPillWidth = Math.max(pillWidth || HEIGHT, HEIGHT);
|
|
441
409
|
const pillX = position === "right" ? WIDTH - resolvedPillWidth : position === "center" ? (WIDTH - resolvedPillWidth) / 2 : 0;
|
|
442
|
-
/* ------------------------------- Inline styles ---------------------------- */ const
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
height: open ? expanded - 5 : expanded
|
|
410
|
+
/* ------------------------------- Inline styles ---------------------------- */ const rootStyle = react.useMemo(()=>({
|
|
411
|
+
"--_h": `${open ? expanded : HEIGHT}px`,
|
|
412
|
+
"--_pw": `${resolvedPillWidth}px`,
|
|
413
|
+
"--_px": `${pillX}px`,
|
|
414
|
+
"--_sy": `${open ? 1 : HEIGHT / expanded}`,
|
|
415
|
+
"--_ph": `${open ? expanded - 5 : expanded}px`,
|
|
416
|
+
"--_by": `${open ? 1 : 0}`,
|
|
417
|
+
"--_ht": `translateY(${open ? expand === "bottom" ? 3 : -3 : 0}px) scale(${open ? 0.9 : 1})`,
|
|
418
|
+
"--_co": `${open ? 1 : 0}`
|
|
452
419
|
}), [
|
|
453
420
|
open,
|
|
454
421
|
expanded,
|
|
455
|
-
resolvedPillWidth
|
|
456
|
-
]);
|
|
457
|
-
const body = react.useMemo(()=>({
|
|
458
|
-
transform: `scaleY(${open ? 1 : 0})`,
|
|
459
|
-
opacity: open ? 1 : 0
|
|
460
|
-
}), [
|
|
461
|
-
open
|
|
462
|
-
]);
|
|
463
|
-
const header = react.useMemo(()=>({
|
|
464
|
-
left: pillX,
|
|
465
|
-
transform: `translateY(${open ? expand === "bottom" ? 3 : -3 : 0}px) scale(${open ? 0.9 : 1})`,
|
|
466
|
-
"--sileo-pill-width": `${resolvedPillWidth}px`
|
|
467
|
-
}), [
|
|
422
|
+
resolvedPillWidth,
|
|
468
423
|
pillX,
|
|
469
|
-
|
|
470
|
-
expand,
|
|
471
|
-
resolvedPillWidth
|
|
472
|
-
]);
|
|
473
|
-
const contentStyle = react.useMemo(()=>({
|
|
474
|
-
opacity: open ? 1 : 0
|
|
475
|
-
}), [
|
|
476
|
-
open
|
|
424
|
+
expand
|
|
477
425
|
]);
|
|
478
426
|
/* -------------------------------- Handlers -------------------------------- */ const handleEnter = react.useCallback((e)=>{
|
|
479
427
|
onMouseEnter == null ? void 0 : onMouseEnter(e);
|
|
@@ -528,8 +476,12 @@ const HEADER_EXIT_MS = 150;
|
|
|
528
476
|
onDismissRef.current == null ? void 0 : onDismissRef.current.call(onDismissRef);
|
|
529
477
|
}
|
|
530
478
|
};
|
|
531
|
-
el.addEventListener("pointermove", onMove
|
|
532
|
-
|
|
479
|
+
el.addEventListener("pointermove", onMove, {
|
|
480
|
+
passive: true
|
|
481
|
+
});
|
|
482
|
+
el.addEventListener("pointerup", onUp, {
|
|
483
|
+
passive: true
|
|
484
|
+
});
|
|
533
485
|
return ()=>{
|
|
534
486
|
el.removeEventListener("pointermove", onMove);
|
|
535
487
|
el.removeEventListener("pointerup", onUp);
|
|
@@ -537,6 +489,8 @@ const HEADER_EXIT_MS = 150;
|
|
|
537
489
|
}, []);
|
|
538
490
|
const handlePointerDown = react.useCallback((e)=>{
|
|
539
491
|
if (exiting || !onDismiss) return;
|
|
492
|
+
const target = e.target;
|
|
493
|
+
if (target.closest("[data-sileo-button]")) return;
|
|
540
494
|
pointerStartRef.current = e.clientY;
|
|
541
495
|
e.currentTarget.setPointerCapture(e.pointerId);
|
|
542
496
|
}, [
|
|
@@ -554,7 +508,7 @@ const HEADER_EXIT_MS = 150;
|
|
|
554
508
|
"data-position": position,
|
|
555
509
|
"data-state": view.state,
|
|
556
510
|
className: className,
|
|
557
|
-
style:
|
|
511
|
+
style: rootStyle,
|
|
558
512
|
onMouseEnter: handleEnter,
|
|
559
513
|
onMouseLeave: handleLeave,
|
|
560
514
|
onTransitionEnd: handleTransitionEnd,
|
|
@@ -584,8 +538,7 @@ const HEADER_EXIT_MS = 150;
|
|
|
584
538
|
x: pillX,
|
|
585
539
|
rx: resolvedRoundness,
|
|
586
540
|
ry: resolvedRoundness,
|
|
587
|
-
fill: view.fill
|
|
588
|
-
style: pill
|
|
541
|
+
fill: view.fill
|
|
589
542
|
}),
|
|
590
543
|
/*#__PURE__*/ jsxRuntime.jsx("rect", {
|
|
591
544
|
"data-sileo-body": true,
|
|
@@ -594,8 +547,7 @@ const HEADER_EXIT_MS = 150;
|
|
|
594
547
|
height: expandedContent,
|
|
595
548
|
rx: resolvedRoundness,
|
|
596
549
|
ry: resolvedRoundness,
|
|
597
|
-
fill: view.fill
|
|
598
|
-
style: body
|
|
550
|
+
fill: view.fill
|
|
599
551
|
})
|
|
600
552
|
]
|
|
601
553
|
})
|
|
@@ -606,7 +558,6 @@ const HEADER_EXIT_MS = 150;
|
|
|
606
558
|
ref: headerRef,
|
|
607
559
|
"data-sileo-header": true,
|
|
608
560
|
"data-edge": expand,
|
|
609
|
-
style: header,
|
|
610
561
|
children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
|
|
611
562
|
"data-sileo-header-stack": true,
|
|
612
563
|
children: [
|
|
@@ -655,7 +606,6 @@ const HEADER_EXIT_MS = 150;
|
|
|
655
606
|
"data-sileo-content": true,
|
|
656
607
|
"data-edge": expand,
|
|
657
608
|
"data-visible": open,
|
|
658
|
-
style: contentStyle,
|
|
659
609
|
children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
|
|
660
610
|
ref: contentRef,
|
|
661
611
|
"data-sileo-description": true,
|
|
@@ -665,6 +615,7 @@ const HEADER_EXIT_MS = 150;
|
|
|
665
615
|
view.button && // biome-ignore lint/a11y/useValidAnchor: cannot use button inside a button
|
|
666
616
|
/*#__PURE__*/ jsxRuntime.jsx("a", {
|
|
667
617
|
href: "#",
|
|
618
|
+
type: "button",
|
|
668
619
|
"data-sileo-button": true,
|
|
669
620
|
"data-state": view.state,
|
|
670
621
|
className: (_view_styles1 = view.styles) == null ? void 0 : _view_styles1.button,
|
package/dist/index.mjs
CHANGED
|
@@ -8,13 +8,18 @@ function __insertCSS(code) {
|
|
|
8
8
|
;style.styleSheet ? (style.styleSheet.cssText = code) : style.appendChild(document.createTextNode(code))
|
|
9
9
|
}
|
|
10
10
|
|
|
11
|
-
import { _ as _extends } from './cc-
|
|
11
|
+
import { _ as _extends, a as _object_without_properties_loose } from './cc-B6peeNak.mjs';
|
|
12
12
|
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
13
13
|
import { memo, useMemo, useState, useRef, useLayoutEffect, useEffect, useCallback } from 'react';
|
|
14
14
|
|
|
15
|
-
__insertCSS(":root{--sileo-spring-easing:linear(\n\t\t0,\n\t\t0.002 0.6%,\n\t\t0.007 1.2%,\n\t\t0.015 1.8%,\n\t\t0.025 2.4%,\n\t\t0.057 3.7%,\n\t\t0.104 5.2%,\n\t\t0.151 6.5%,\n\t\t0.208 7.9%,\n\t\t0.455 13.6%,\n\t\t0.566 16.3%,\n\t\t0.619 17.7%,\n\t\t0.669 19.1%,\n\t\t0.715 20.5%,\n\t\t0.755 21.8%,\n\t\t0.794 23.2%,\n\t\t0.829 24.6%,\n\t\t0.861 26%,\n\t\t0.889 27.4%,\n\t\t0.914 28.8%,\n\t\t0.937 30.3%,\n\t\t0.956 31.8%,\n\t\t0.974 33.4%,\n\t\t0.987 34.8%,\n\t\t0.997 36.2%,\n\t\t1.014 39.2%,\n\t\t1.024 42.5%,\n\t\t1.028 46.3%,\n\t\t1.026 51.9%,\n\t\t1.01 66.1%,\n\t\t1.003 74.9%,\n\t\t1 85.2%,\n\t\t1\n\t);--sileo-duration:600ms;--sileo-height:40px;--sileo-width:350px;--sileo-state-success:oklch(0.723 0.219 142.136);--sileo-state-loading:oklch(0.556 0 0);--sileo-state-error:oklch(0.637 0.237 25.331);--sileo-state-warning:oklch(0.795 0.184 86.047);--sileo-state-info:oklch(0.685 0.169 237.323);--sileo-state-action:oklch(0.623 0.214 259.815)}[data-sileo-toast]{position:relative;cursor:pointer;pointer-events:auto;touch-action:none;border:0;background:0 0;padding:0;width:var(--sileo-width);height:var(--
|
|
15
|
+
__insertCSS(":root{--sileo-spring-easing:linear(\n\t\t0,\n\t\t0.002 0.6%,\n\t\t0.007 1.2%,\n\t\t0.015 1.8%,\n\t\t0.025 2.4%,\n\t\t0.057 3.7%,\n\t\t0.104 5.2%,\n\t\t0.151 6.5%,\n\t\t0.208 7.9%,\n\t\t0.455 13.6%,\n\t\t0.566 16.3%,\n\t\t0.619 17.7%,\n\t\t0.669 19.1%,\n\t\t0.715 20.5%,\n\t\t0.755 21.8%,\n\t\t0.794 23.2%,\n\t\t0.829 24.6%,\n\t\t0.861 26%,\n\t\t0.889 27.4%,\n\t\t0.914 28.8%,\n\t\t0.937 30.3%,\n\t\t0.956 31.8%,\n\t\t0.974 33.4%,\n\t\t0.987 34.8%,\n\t\t0.997 36.2%,\n\t\t1.014 39.2%,\n\t\t1.024 42.5%,\n\t\t1.028 46.3%,\n\t\t1.026 51.9%,\n\t\t1.01 66.1%,\n\t\t1.003 74.9%,\n\t\t1 85.2%,\n\t\t1\n\t);--sileo-duration:600ms;--sileo-height:40px;--sileo-width:350px;--sileo-state-success:oklch(0.723 0.219 142.136);--sileo-state-loading:oklch(0.556 0 0);--sileo-state-error:oklch(0.637 0.237 25.331);--sileo-state-warning:oklch(0.795 0.184 86.047);--sileo-state-info:oklch(0.685 0.169 237.323);--sileo-state-action:oklch(0.623 0.214 259.815)}[data-sileo-toast]{position:relative;cursor:pointer;pointer-events:auto;touch-action:none;border:0;background:0 0;padding:0;width:var(--sileo-width);height:var(--_h,var(--sileo-height));opacity:0;transform:translateZ(0) scale(.95);transform-origin:center;contain:layout style;overflow:visible}[data-sileo-toast][data-state=loading]{cursor:default}[data-sileo-toast][data-ready=true]{opacity:1;transform:translateZ(0) scale(1);transition:transform calc(var(--sileo-duration) * .66) var(--sileo-spring-easing),opacity calc(var(--sileo-duration) * .66) var(--sileo-spring-easing),margin-bottom calc(var(--sileo-duration) * .66) var(--sileo-spring-easing),margin-top calc(var(--sileo-duration) * .66) var(--sileo-spring-easing),height var(--sileo-duration) var(--sileo-spring-easing)}[data-sileo-viewport][data-position^=top] [data-sileo-toast]:not([data-ready=true]){transform:translateY(-6px) scale(.95)}[data-sileo-viewport][data-position^=bottom] [data-sileo-toast]:not([data-ready=true]){transform:translateY(6px) scale(.95)}[data-sileo-toast][data-ready=true][data-exiting=true]{opacity:0;pointer-events:none}[data-sileo-viewport][data-position^=top] [data-sileo-toast][data-ready=true][data-exiting=true]{transform:translateY(-6px) scale(.95)}[data-sileo-viewport][data-position^=bottom] [data-sileo-toast][data-ready=true][data-exiting=true]{transform:translateY(6px) scale(.95)}[data-sileo-canvas]{position:absolute;left:0;right:0;pointer-events:none;transform:translateZ(0);contain:layout style;overflow:visible}[data-sileo-canvas][data-edge=top]{bottom:0;transform:scaleY(-1) translateZ(0)}[data-sileo-canvas][data-edge=bottom]{top:0}[data-sileo-svg]{overflow:visible}[data-sileo-body],[data-sileo-pill]{transform-box:fill-box;transform-origin:50% 0%}[data-sileo-pill]{transform:scaleY(var(--_sy,1));width:var(--_pw);height:var(--_ph)}[data-sileo-body]{transform:scaleY(var(--_by,0));opacity:var(--_by, 0)}[data-sileo-toast][data-ready=true] [data-sileo-pill]{transition:transform var(--sileo-duration) var(--sileo-spring-easing),width var(--sileo-duration) var(--sileo-spring-easing),height var(--sileo-duration) var(--sileo-spring-easing),x var(--sileo-duration) var(--sileo-spring-easing),fill var(--sileo-duration) var(--sileo-spring-easing)}[data-sileo-toast][data-ready=true][data-expanded=true] [data-sileo-pill]{transition-delay:calc(var(--sileo-duration) * 0.08)}[data-sileo-toast][data-ready=true] [data-sileo-body]{transition:transform var(--sileo-duration) var(--sileo-spring-easing),opacity var(--sileo-duration) var(--sileo-spring-easing),fill var(--sileo-duration) var(--sileo-spring-easing)}[data-sileo-header]{position:absolute;z-index:20;display:flex;align-items:center;padding:.5rem;height:var(--sileo-height);overflow:hidden;left:var(--_px,0);transform:var(--_ht);max-width:var(--_pw)}[data-sileo-toast][data-ready=true] [data-sileo-header]{transition:transform var(--sileo-duration) var(--sileo-spring-easing),left var(--sileo-duration) var(--sileo-spring-easing),max-width var(--sileo-duration) var(--sileo-spring-easing)}[data-sileo-header][data-edge=top]{bottom:0}[data-sileo-header][data-edge=bottom]{top:0}[data-sileo-header-stack]{position:relative;display:inline-flex;align-items:center;height:100%}[data-sileo-header-inner]{display:flex;align-items:center;gap:.5rem;white-space:nowrap;opacity:1;filter:blur(0px);will-change:opacity,filter}[data-sileo-header-inner][data-layer=current]{animation:sileo-header-enter var(--sileo-duration) var(--sileo-spring-easing) both}[data-sileo-header-inner][data-layer=prev]{position:absolute;left:0;top:0;pointer-events:none}[data-sileo-header-inner][data-exiting=true]{animation:sileo-header-exit 150ms ease forwards}[data-sileo-badge]{display:flex;height:24px;width:24px;flex-shrink:0;align-items:center;justify-content:center;padding:2px;box-sizing:border-box;border-radius:9999px;color:var(--sileo-tone,currentColor);background-color:var(--sileo-tone-bg,transparent)}[data-sileo-title]{font-size:.825rem;line-height:1rem;font-weight:500;text-transform:capitalize;color:var(--sileo-tone,currentColor)}:is([data-sileo-badge],[data-sileo-title])[data-state]{--_c:var(--sileo-state-success);--sileo-tone:var(--_c);--sileo-tone-bg:color-mix(in oklch, var(--_c) 20%, transparent)}:is([data-sileo-badge],[data-sileo-title])[data-state=loading]{--_c:var(--sileo-state-loading)}:is([data-sileo-badge],[data-sileo-title])[data-state=error]{--_c:var(--sileo-state-error)}:is([data-sileo-badge],[data-sileo-title])[data-state=warning]{--_c:var(--sileo-state-warning)}:is([data-sileo-badge],[data-sileo-title])[data-state=info]{--_c:var(--sileo-state-info)}:is([data-sileo-badge],[data-sileo-title])[data-state=action]{--_c:var(--sileo-state-action)}[data-sileo-content]{position:absolute;left:0;z-index:10;width:100%;pointer-events:none;opacity:var(--_co, 0)}[data-sileo-content]:not([data-visible=true]){content-visibility:hidden}[data-sileo-toast][data-ready=true] [data-sileo-content]{transition:opacity calc(var(--sileo-duration) * .08) var(--sileo-spring-easing) calc(var(--sileo-duration) * .04)}[data-sileo-content][data-edge=top]{top:0}[data-sileo-content][data-edge=bottom]{top:var(--sileo-height)}[data-sileo-content][data-visible=true]{pointer-events:auto}[data-sileo-toast][data-ready=true] [data-sileo-content][data-visible=true]{transition:opacity var(--sileo-duration) var(--sileo-spring-easing) calc(var(--sileo-duration) * .25)}[data-sileo-description]{width:100%;text-align:left;padding:1rem;font-size:.875rem;line-height:1.25rem;contain:layout style;content-visibility:auto}[data-sileo-button]{display:flex;align-items:center;justify-content:center;height:1.75rem;padding:0 .625rem;margin-top:.75rem;border-radius:9999px;border:0;font-size:.75rem;font-weight:500;cursor:pointer;color:var(--sileo-btn-color,currentColor);background-color:var(--sileo-btn-bg,transparent);transition:background-color 150ms ease}[data-sileo-button]:hover{background-color:var(--sileo-btn-bg-hover,transparent)}[data-sileo-button][data-state]{--_c:var(--sileo-state-success);--sileo-btn-color:var(--_c);--sileo-btn-bg:color-mix(in oklch, var(--_c) 15%, transparent);--sileo-btn-bg-hover:color-mix(in oklch, var(--_c) 25%, transparent)}[data-sileo-button][data-state=loading]{--_c:var(--sileo-state-loading)}[data-sileo-button][data-state=error]{--_c:var(--sileo-state-error)}[data-sileo-button][data-state=warning]{--_c:var(--sileo-state-warning)}[data-sileo-button][data-state=info]{--_c:var(--sileo-state-info)}[data-sileo-button][data-state=action]{--_c:var(--sileo-state-action)}[data-sileo-icon=spin]{animation:sileo-spin 1s linear infinite}@keyframes sileo-spin{to{rotate:360deg}}@keyframes sileo-header-enter{from{opacity:0;filter:blur(6px)}to{opacity:1;filter:blur(0px)}}@keyframes sileo-header-exit{from{opacity:1;filter:blur(0px)}to{opacity:0;filter:blur(6px)}}[data-sileo-viewport]{position:fixed;z-index:50;display:flex;gap:.75rem;padding:.75rem;pointer-events:none;max-width:calc(100vw - 1.5rem);contain:layout style}[data-sileo-viewport][data-position^=top] [data-sileo-toast]:not([data-ready=true]){margin-bottom:calc(-1 * (var(--sileo-height) + .75rem))}[data-sileo-viewport][data-position^=bottom] [data-sileo-toast]:not([data-ready=true]){margin-top:calc(-1 * (var(--sileo-height) + .75rem))}[data-sileo-viewport][data-position^=top]{top:0;flex-direction:column-reverse}[data-sileo-viewport][data-position^=bottom]{bottom:0;flex-direction:column}[data-sileo-viewport][data-position$=left]{left:0;align-items:flex-start}[data-sileo-viewport][data-position$=right]{right:0;align-items:flex-end}[data-sileo-viewport][data-position$=center]{left:50%;transform:translateX(-50%);align-items:center}@media (prefers-reduced-motion:no-preference){[data-sileo-toast][data-ready=true]:hover,[data-sileo-toast][data-ready=true][data-exiting=true]{will-change:transform,opacity,height}}@media (prefers-reduced-motion:reduce){*,::after,::before{animation-duration:0s;animation-iteration-count:1;transition-duration:0s}}");
|
|
16
16
|
|
|
17
|
-
const
|
|
17
|
+
const Icon = (_0)=>{
|
|
18
|
+
let { title, children } = _0, props = _object_without_properties_loose(_0, [
|
|
19
|
+
"title",
|
|
20
|
+
"children"
|
|
21
|
+
]);
|
|
22
|
+
return /*#__PURE__*/ jsxs("svg", _extends({}, props, {
|
|
18
23
|
xmlns: "http://www.w3.org/2000/svg",
|
|
19
24
|
width: "16",
|
|
20
25
|
height: "16",
|
|
@@ -26,8 +31,15 @@ const ArrowRight = ()=>/*#__PURE__*/ jsxs("svg", {
|
|
|
26
31
|
strokeLinejoin: "round",
|
|
27
32
|
children: [
|
|
28
33
|
/*#__PURE__*/ jsx("title", {
|
|
29
|
-
children:
|
|
34
|
+
children: title
|
|
30
35
|
}),
|
|
36
|
+
children
|
|
37
|
+
]
|
|
38
|
+
}));
|
|
39
|
+
};
|
|
40
|
+
const ArrowRight = ()=>/*#__PURE__*/ jsxs(Icon, {
|
|
41
|
+
title: "Arrow Right",
|
|
42
|
+
children: [
|
|
31
43
|
/*#__PURE__*/ jsx("path", {
|
|
32
44
|
d: "M5 12h14"
|
|
33
45
|
}),
|
|
@@ -36,20 +48,9 @@ const ArrowRight = ()=>/*#__PURE__*/ jsxs("svg", {
|
|
|
36
48
|
})
|
|
37
49
|
]
|
|
38
50
|
});
|
|
39
|
-
const LifeBuoy = ()=>/*#__PURE__*/ jsxs(
|
|
40
|
-
|
|
41
|
-
width: "16",
|
|
42
|
-
height: "16",
|
|
43
|
-
viewBox: "0 0 24 24",
|
|
44
|
-
fill: "none",
|
|
45
|
-
stroke: "currentColor",
|
|
46
|
-
strokeWidth: "2",
|
|
47
|
-
strokeLinecap: "round",
|
|
48
|
-
strokeLinejoin: "round",
|
|
51
|
+
const LifeBuoy = ()=>/*#__PURE__*/ jsxs(Icon, {
|
|
52
|
+
title: "Life Buoy",
|
|
49
53
|
children: [
|
|
50
|
-
/*#__PURE__*/ jsx("title", {
|
|
51
|
-
children: "Life Buoy"
|
|
52
|
-
}),
|
|
53
54
|
/*#__PURE__*/ jsx("circle", {
|
|
54
55
|
cx: "12",
|
|
55
56
|
cy: "12",
|
|
@@ -74,39 +75,16 @@ const LifeBuoy = ()=>/*#__PURE__*/ jsxs("svg", {
|
|
|
74
75
|
})
|
|
75
76
|
]
|
|
76
77
|
});
|
|
77
|
-
const LoaderCircle = (props)=>/*#__PURE__*/
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
stroke: "currentColor",
|
|
84
|
-
strokeWidth: "2",
|
|
85
|
-
strokeLinecap: "round",
|
|
86
|
-
strokeLinejoin: "round",
|
|
87
|
-
children: [
|
|
88
|
-
/*#__PURE__*/ jsx("title", {
|
|
89
|
-
children: "Loader Circle"
|
|
90
|
-
}),
|
|
91
|
-
/*#__PURE__*/ jsx("path", {
|
|
92
|
-
d: "M21 12a9 9 0 1 1-6.219-8.56"
|
|
93
|
-
})
|
|
94
|
-
]
|
|
78
|
+
const LoaderCircle = (props)=>/*#__PURE__*/ jsx(Icon, _extends({
|
|
79
|
+
title: "Loader Circle"
|
|
80
|
+
}, props, {
|
|
81
|
+
children: /*#__PURE__*/ jsx("path", {
|
|
82
|
+
d: "M21 12a9 9 0 1 1-6.219-8.56"
|
|
83
|
+
})
|
|
95
84
|
}));
|
|
96
|
-
const X = ()=>/*#__PURE__*/ jsxs(
|
|
97
|
-
|
|
98
|
-
width: "16",
|
|
99
|
-
height: "16",
|
|
100
|
-
viewBox: "0 0 24 24",
|
|
101
|
-
fill: "none",
|
|
102
|
-
stroke: "currentColor",
|
|
103
|
-
strokeWidth: "2",
|
|
104
|
-
strokeLinecap: "round",
|
|
105
|
-
strokeLinejoin: "round",
|
|
85
|
+
const X = ()=>/*#__PURE__*/ jsxs(Icon, {
|
|
86
|
+
title: "X",
|
|
106
87
|
children: [
|
|
107
|
-
/*#__PURE__*/ jsx("title", {
|
|
108
|
-
children: "X"
|
|
109
|
-
}),
|
|
110
88
|
/*#__PURE__*/ jsx("path", {
|
|
111
89
|
d: "M18 6 6 18"
|
|
112
90
|
}),
|
|
@@ -115,20 +93,9 @@ const X = ()=>/*#__PURE__*/ jsxs("svg", {
|
|
|
115
93
|
})
|
|
116
94
|
]
|
|
117
95
|
});
|
|
118
|
-
const CircleAlert = ()=>/*#__PURE__*/ jsxs(
|
|
119
|
-
|
|
120
|
-
width: "16",
|
|
121
|
-
height: "16",
|
|
122
|
-
viewBox: "0 0 24 24",
|
|
123
|
-
fill: "none",
|
|
124
|
-
stroke: "currentColor",
|
|
125
|
-
strokeWidth: "2",
|
|
126
|
-
strokeLinecap: "round",
|
|
127
|
-
strokeLinejoin: "round",
|
|
96
|
+
const CircleAlert = ()=>/*#__PURE__*/ jsxs(Icon, {
|
|
97
|
+
title: "Circle Alert",
|
|
128
98
|
children: [
|
|
129
|
-
/*#__PURE__*/ jsx("title", {
|
|
130
|
-
children: "Circle Alert"
|
|
131
|
-
}),
|
|
132
99
|
/*#__PURE__*/ jsx("circle", {
|
|
133
100
|
cx: "12",
|
|
134
101
|
cy: "12",
|
|
@@ -148,24 +115,11 @@ const CircleAlert = ()=>/*#__PURE__*/ jsxs("svg", {
|
|
|
148
115
|
})
|
|
149
116
|
]
|
|
150
117
|
});
|
|
151
|
-
const Check = ()=>/*#__PURE__*/
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
fill: "none",
|
|
157
|
-
stroke: "currentColor",
|
|
158
|
-
strokeWidth: "2",
|
|
159
|
-
strokeLinecap: "round",
|
|
160
|
-
strokeLinejoin: "round",
|
|
161
|
-
children: [
|
|
162
|
-
/*#__PURE__*/ jsx("title", {
|
|
163
|
-
children: "Check"
|
|
164
|
-
}),
|
|
165
|
-
/*#__PURE__*/ jsx("path", {
|
|
166
|
-
d: "M20 6 9 17l-5-5"
|
|
167
|
-
})
|
|
168
|
-
]
|
|
118
|
+
const Check = ()=>/*#__PURE__*/ jsx(Icon, {
|
|
119
|
+
title: "Check",
|
|
120
|
+
children: /*#__PURE__*/ jsx("path", {
|
|
121
|
+
d: "M20 6 9 17l-5-5"
|
|
122
|
+
})
|
|
169
123
|
});
|
|
170
124
|
|
|
171
125
|
/* --------------------------------- Config --------------------------------- */ const HEIGHT = 40;
|
|
@@ -285,9 +239,16 @@ const HEADER_EXIT_MS = 150;
|
|
|
285
239
|
}
|
|
286
240
|
};
|
|
287
241
|
measure();
|
|
288
|
-
|
|
242
|
+
let rafId = 0;
|
|
243
|
+
const ro = new ResizeObserver(()=>{
|
|
244
|
+
cancelAnimationFrame(rafId);
|
|
245
|
+
rafId = requestAnimationFrame(measure);
|
|
246
|
+
});
|
|
289
247
|
ro.observe(el);
|
|
290
|
-
return ()=>
|
|
248
|
+
return ()=>{
|
|
249
|
+
cancelAnimationFrame(rafId);
|
|
250
|
+
ro.disconnect();
|
|
251
|
+
};
|
|
291
252
|
}, [
|
|
292
253
|
headerLayer.current.key
|
|
293
254
|
]);
|
|
@@ -303,9 +264,16 @@ const HEADER_EXIT_MS = 150;
|
|
|
303
264
|
setContentHeight((prev)=>prev === h ? prev : h);
|
|
304
265
|
};
|
|
305
266
|
measure();
|
|
306
|
-
|
|
267
|
+
let rafId = 0;
|
|
268
|
+
const ro = new ResizeObserver(()=>{
|
|
269
|
+
cancelAnimationFrame(rafId);
|
|
270
|
+
rafId = requestAnimationFrame(measure);
|
|
271
|
+
});
|
|
307
272
|
ro.observe(el);
|
|
308
|
-
return ()=>
|
|
273
|
+
return ()=>{
|
|
274
|
+
cancelAnimationFrame(rafId);
|
|
275
|
+
ro.disconnect();
|
|
276
|
+
};
|
|
309
277
|
}, [
|
|
310
278
|
hasDesc
|
|
311
279
|
]);
|
|
@@ -437,41 +405,21 @@ const HEADER_EXIT_MS = 150;
|
|
|
437
405
|
const expandedContent = Math.max(0, expanded - HEIGHT);
|
|
438
406
|
const resolvedPillWidth = Math.max(pillWidth || HEIGHT, HEIGHT);
|
|
439
407
|
const pillX = position === "right" ? WIDTH - resolvedPillWidth : position === "center" ? (WIDTH - resolvedPillWidth) / 2 : 0;
|
|
440
|
-
/* ------------------------------- Inline styles ---------------------------- */ const
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
height: open ? expanded - 5 : expanded
|
|
408
|
+
/* ------------------------------- Inline styles ---------------------------- */ const rootStyle = useMemo(()=>({
|
|
409
|
+
"--_h": `${open ? expanded : HEIGHT}px`,
|
|
410
|
+
"--_pw": `${resolvedPillWidth}px`,
|
|
411
|
+
"--_px": `${pillX}px`,
|
|
412
|
+
"--_sy": `${open ? 1 : HEIGHT / expanded}`,
|
|
413
|
+
"--_ph": `${open ? expanded - 5 : expanded}px`,
|
|
414
|
+
"--_by": `${open ? 1 : 0}`,
|
|
415
|
+
"--_ht": `translateY(${open ? expand === "bottom" ? 3 : -3 : 0}px) scale(${open ? 0.9 : 1})`,
|
|
416
|
+
"--_co": `${open ? 1 : 0}`
|
|
450
417
|
}), [
|
|
451
418
|
open,
|
|
452
419
|
expanded,
|
|
453
|
-
resolvedPillWidth
|
|
454
|
-
]);
|
|
455
|
-
const body = useMemo(()=>({
|
|
456
|
-
transform: `scaleY(${open ? 1 : 0})`,
|
|
457
|
-
opacity: open ? 1 : 0
|
|
458
|
-
}), [
|
|
459
|
-
open
|
|
460
|
-
]);
|
|
461
|
-
const header = useMemo(()=>({
|
|
462
|
-
left: pillX,
|
|
463
|
-
transform: `translateY(${open ? expand === "bottom" ? 3 : -3 : 0}px) scale(${open ? 0.9 : 1})`,
|
|
464
|
-
"--sileo-pill-width": `${resolvedPillWidth}px`
|
|
465
|
-
}), [
|
|
420
|
+
resolvedPillWidth,
|
|
466
421
|
pillX,
|
|
467
|
-
|
|
468
|
-
expand,
|
|
469
|
-
resolvedPillWidth
|
|
470
|
-
]);
|
|
471
|
-
const contentStyle = useMemo(()=>({
|
|
472
|
-
opacity: open ? 1 : 0
|
|
473
|
-
}), [
|
|
474
|
-
open
|
|
422
|
+
expand
|
|
475
423
|
]);
|
|
476
424
|
/* -------------------------------- Handlers -------------------------------- */ const handleEnter = useCallback((e)=>{
|
|
477
425
|
onMouseEnter == null ? void 0 : onMouseEnter(e);
|
|
@@ -526,8 +474,12 @@ const HEADER_EXIT_MS = 150;
|
|
|
526
474
|
onDismissRef.current == null ? void 0 : onDismissRef.current.call(onDismissRef);
|
|
527
475
|
}
|
|
528
476
|
};
|
|
529
|
-
el.addEventListener("pointermove", onMove
|
|
530
|
-
|
|
477
|
+
el.addEventListener("pointermove", onMove, {
|
|
478
|
+
passive: true
|
|
479
|
+
});
|
|
480
|
+
el.addEventListener("pointerup", onUp, {
|
|
481
|
+
passive: true
|
|
482
|
+
});
|
|
531
483
|
return ()=>{
|
|
532
484
|
el.removeEventListener("pointermove", onMove);
|
|
533
485
|
el.removeEventListener("pointerup", onUp);
|
|
@@ -535,6 +487,8 @@ const HEADER_EXIT_MS = 150;
|
|
|
535
487
|
}, []);
|
|
536
488
|
const handlePointerDown = useCallback((e)=>{
|
|
537
489
|
if (exiting || !onDismiss) return;
|
|
490
|
+
const target = e.target;
|
|
491
|
+
if (target.closest("[data-sileo-button]")) return;
|
|
538
492
|
pointerStartRef.current = e.clientY;
|
|
539
493
|
e.currentTarget.setPointerCapture(e.pointerId);
|
|
540
494
|
}, [
|
|
@@ -552,7 +506,7 @@ const HEADER_EXIT_MS = 150;
|
|
|
552
506
|
"data-position": position,
|
|
553
507
|
"data-state": view.state,
|
|
554
508
|
className: className,
|
|
555
|
-
style:
|
|
509
|
+
style: rootStyle,
|
|
556
510
|
onMouseEnter: handleEnter,
|
|
557
511
|
onMouseLeave: handleLeave,
|
|
558
512
|
onTransitionEnd: handleTransitionEnd,
|
|
@@ -582,8 +536,7 @@ const HEADER_EXIT_MS = 150;
|
|
|
582
536
|
x: pillX,
|
|
583
537
|
rx: resolvedRoundness,
|
|
584
538
|
ry: resolvedRoundness,
|
|
585
|
-
fill: view.fill
|
|
586
|
-
style: pill
|
|
539
|
+
fill: view.fill
|
|
587
540
|
}),
|
|
588
541
|
/*#__PURE__*/ jsx("rect", {
|
|
589
542
|
"data-sileo-body": true,
|
|
@@ -592,8 +545,7 @@ const HEADER_EXIT_MS = 150;
|
|
|
592
545
|
height: expandedContent,
|
|
593
546
|
rx: resolvedRoundness,
|
|
594
547
|
ry: resolvedRoundness,
|
|
595
|
-
fill: view.fill
|
|
596
|
-
style: body
|
|
548
|
+
fill: view.fill
|
|
597
549
|
})
|
|
598
550
|
]
|
|
599
551
|
})
|
|
@@ -604,7 +556,6 @@ const HEADER_EXIT_MS = 150;
|
|
|
604
556
|
ref: headerRef,
|
|
605
557
|
"data-sileo-header": true,
|
|
606
558
|
"data-edge": expand,
|
|
607
|
-
style: header,
|
|
608
559
|
children: /*#__PURE__*/ jsxs("div", {
|
|
609
560
|
"data-sileo-header-stack": true,
|
|
610
561
|
children: [
|
|
@@ -653,7 +604,6 @@ const HEADER_EXIT_MS = 150;
|
|
|
653
604
|
"data-sileo-content": true,
|
|
654
605
|
"data-edge": expand,
|
|
655
606
|
"data-visible": open,
|
|
656
|
-
style: contentStyle,
|
|
657
607
|
children: /*#__PURE__*/ jsxs("div", {
|
|
658
608
|
ref: contentRef,
|
|
659
609
|
"data-sileo-description": true,
|
|
@@ -663,6 +613,7 @@ const HEADER_EXIT_MS = 150;
|
|
|
663
613
|
view.button && // biome-ignore lint/a11y/useValidAnchor: cannot use button inside a button
|
|
664
614
|
/*#__PURE__*/ jsx("a", {
|
|
665
615
|
href: "#",
|
|
616
|
+
type: "button",
|
|
666
617
|
"data-sileo-button": true,
|
|
667
618
|
"data-state": view.state,
|
|
668
619
|
className: (_view_styles1 = view.styles) == null ? void 0 : _view_styles1.button,
|
package/dist/styles.css
CHANGED
|
@@ -60,11 +60,10 @@
|
|
|
60
60
|
background: transparent;
|
|
61
61
|
padding: 0;
|
|
62
62
|
width: var(--sileo-width);
|
|
63
|
-
height: var(--
|
|
63
|
+
height: var(--_h, var(--sileo-height));
|
|
64
64
|
opacity: 0;
|
|
65
65
|
transform: translateZ(0) scale(0.95);
|
|
66
66
|
transform-origin: center;
|
|
67
|
-
filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.05));
|
|
68
67
|
contain: layout style;
|
|
69
68
|
overflow: visible;
|
|
70
69
|
}
|
|
@@ -144,6 +143,17 @@
|
|
|
144
143
|
transform-origin: 50% 0%;
|
|
145
144
|
}
|
|
146
145
|
|
|
146
|
+
[data-sileo-pill] {
|
|
147
|
+
transform: scaleY(var(--_sy, 1));
|
|
148
|
+
width: var(--_pw);
|
|
149
|
+
height: var(--_ph);
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
[data-sileo-body] {
|
|
153
|
+
transform: scaleY(var(--_by, 0));
|
|
154
|
+
opacity: var(--_by, 0);
|
|
155
|
+
}
|
|
156
|
+
|
|
147
157
|
[data-sileo-toast][data-ready="true"] [data-sileo-pill] {
|
|
148
158
|
transition:
|
|
149
159
|
transform var(--sileo-duration) var(--sileo-spring-easing),
|
|
@@ -174,10 +184,12 @@
|
|
|
174
184
|
padding: 0.5rem;
|
|
175
185
|
height: var(--sileo-height);
|
|
176
186
|
overflow: hidden;
|
|
187
|
+
left: var(--_px, 0px);
|
|
188
|
+
transform: var(--_ht);
|
|
189
|
+
max-width: var(--_pw);
|
|
177
190
|
}
|
|
178
191
|
|
|
179
192
|
[data-sileo-toast][data-ready="true"] [data-sileo-header] {
|
|
180
|
-
max-width: var(--sileo-pill-width);
|
|
181
193
|
transition:
|
|
182
194
|
transform var(--sileo-duration) var(--sileo-spring-easing),
|
|
183
195
|
left var(--sileo-duration) var(--sileo-spring-easing),
|
|
@@ -207,10 +219,12 @@
|
|
|
207
219
|
white-space: nowrap;
|
|
208
220
|
opacity: 1;
|
|
209
221
|
filter: blur(0px);
|
|
222
|
+
will-change: opacity, filter;
|
|
210
223
|
}
|
|
211
224
|
|
|
212
225
|
[data-sileo-header-inner][data-layer="current"] {
|
|
213
|
-
animation: sileo-header-enter
|
|
226
|
+
animation: sileo-header-enter var(--sileo-duration) var(--sileo-spring-easing)
|
|
227
|
+
both;
|
|
214
228
|
}
|
|
215
229
|
|
|
216
230
|
[data-sileo-header-inner][data-layer="prev"] {
|
|
@@ -286,6 +300,11 @@
|
|
|
286
300
|
z-index: 10;
|
|
287
301
|
width: 100%;
|
|
288
302
|
pointer-events: none;
|
|
303
|
+
opacity: var(--_co, 0);
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
[data-sileo-content]:not([data-visible="true"]) {
|
|
307
|
+
content-visibility: hidden;
|
|
289
308
|
}
|
|
290
309
|
|
|
291
310
|
[data-sileo-toast][data-ready="true"] [data-sileo-content] {
|
|
@@ -457,22 +476,10 @@
|
|
|
457
476
|
}
|
|
458
477
|
|
|
459
478
|
@media (prefers-reduced-motion: no-preference) {
|
|
460
|
-
[data-sileo-toast][data-ready="true"]
|
|
461
|
-
|
|
462
|
-
}
|
|
463
|
-
|
|
464
|
-
[data-sileo-toast][data-ready="true"][data-expanded="true"] {
|
|
479
|
+
[data-sileo-toast][data-ready="true"]:hover,
|
|
480
|
+
[data-sileo-toast][data-ready="true"][data-exiting="true"] {
|
|
465
481
|
will-change: transform, opacity, height;
|
|
466
482
|
}
|
|
467
|
-
|
|
468
|
-
[data-sileo-pill],
|
|
469
|
-
[data-sileo-body] {
|
|
470
|
-
will-change: transform;
|
|
471
|
-
}
|
|
472
|
-
|
|
473
|
-
[data-sileo-canvas] {
|
|
474
|
-
will-change: filter;
|
|
475
|
-
}
|
|
476
483
|
}
|
|
477
484
|
|
|
478
485
|
@media (prefers-reduced-motion: reduce) {
|