@orbitkit/components 0.3.0 → 0.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/astro/ambient-image/AmbientFigcaption.astro +15 -0
- package/dist/astro/ambient-image/AmbientImage.astro +70 -0
- package/dist/astro/ambient-image/index.ts +4 -0
- package/dist/astro/button-group/ButtonGroup.astro +21 -0
- package/dist/astro/button-group/buttonGroupVariants.ts +34 -0
- package/dist/astro/button-group/index.ts +3 -0
- package/dist/astro/diff/Diff.astro +55 -0
- package/dist/astro/diff/DiffItem.astro +21 -0
- package/dist/astro/diff/index.ts +4 -0
- package/dist/astro/drawer/drawer.ts +20 -11
- package/dist/astro/dropdown/dropdown.ts +22 -13
- package/dist/astro/loader/Loader.astro +16 -0
- package/dist/astro/loader/index.ts +6 -0
- package/dist/astro/loader/loaders/12-dots-scale-rotate.svg +1 -0
- package/dist/astro/loader/loaders/180-ring-with-bg.svg +1 -0
- package/dist/astro/loader/loaders/180-ring.svg +1 -0
- package/dist/astro/loader/loaders/270-ring-with-bg.svg +1 -0
- package/dist/astro/loader/loaders/270-ring.svg +1 -0
- package/dist/astro/loader/loaders/3-dots-bounce.svg +1 -0
- package/dist/astro/loader/loaders/3-dots-fade.svg +1 -0
- package/dist/astro/loader/loaders/3-dots-move.svg +1 -0
- package/dist/astro/loader/loaders/3-dots-rotate.svg +1 -0
- package/dist/astro/loader/loaders/3-dots-scale-middle.svg +1 -0
- package/dist/astro/loader/loaders/3-dots-scale.svg +1 -0
- package/dist/astro/loader/loaders/6-dots-rotate.svg +1 -0
- package/dist/astro/loader/loaders/6-dots-scale-middle.svg +1 -0
- package/dist/astro/loader/loaders/6-dots-scale.svg +1 -0
- package/dist/astro/loader/loaders/8-dots-rotate.svg +1 -0
- package/dist/astro/loader/loaders/90-ring-with-bg.svg +1 -0
- package/dist/astro/loader/loaders/90-ring.svg +1 -0
- package/dist/astro/loader/loaders/bars-fade.svg +1 -0
- package/dist/astro/loader/loaders/bars-rotate-fade.svg +1 -0
- package/dist/astro/loader/loaders/bars-scale-fade.svg +1 -0
- package/dist/astro/loader/loaders/bars-scale-middle.svg +1 -0
- package/dist/astro/loader/loaders/bars-scale.svg +1 -0
- package/dist/astro/loader/loaders/blocks-scale.svg +1 -0
- package/dist/astro/loader/loaders/blocks-shuffle-2.svg +1 -0
- package/dist/astro/loader/loaders/blocks-shuffle-3.svg +1 -0
- package/dist/astro/loader/loaders/blocks-wave.svg +1 -0
- package/dist/astro/loader/loaders/bouncing-ball.svg +1 -0
- package/dist/astro/loader/loaders/clock.svg +1 -0
- package/dist/astro/loader/loaders/dot-revolve.svg +1 -0
- package/dist/astro/loader/loaders/eclipse-half.svg +1 -0
- package/dist/astro/loader/loaders/eclipse.svg +1 -0
- package/dist/astro/loader/loaders/gooey-balls-1.svg +1 -0
- package/dist/astro/loader/loaders/gooey-balls-2.svg +1 -0
- package/dist/astro/loader/loaders/index.ts +99 -0
- package/dist/astro/loader/loaders/pulse-2.svg +1 -0
- package/dist/astro/loader/loaders/pulse-3.svg +1 -0
- package/dist/astro/loader/loaders/pulse-multiple.svg +1 -0
- package/dist/astro/loader/loaders/pulse-ring.svg +1 -0
- package/dist/astro/loader/loaders/pulse-rings-2.svg +1 -0
- package/dist/astro/loader/loaders/pulse-rings-3.svg +1 -0
- package/dist/astro/loader/loaders/pulse-rings-multiple.svg +1 -0
- package/dist/astro/loader/loaders/pulse.svg +1 -0
- package/dist/astro/loader/loaders/ring-resize.svg +1 -0
- package/dist/astro/loader/loaders/tadpole.svg +1 -0
- package/dist/astro/loader/loaders/wifi-fade.svg +1 -0
- package/dist/astro/loader/loaders/wifi.svg +1 -0
- package/dist/astro/loader/loaders/wind-toy.svg +1 -0
- package/dist/astro/marquee/Marquee.astro +53 -53
- package/dist/astro/marquee/index.ts +3 -3
- package/dist/astro/modal/ModalContent.astro +2 -2
- package/dist/astro/modal/modal.ts +21 -12
- package/dist/astro/popover/popover.ts +19 -11
- package/dist/astro/scroll-progress/ScrollProgress.astro +41 -41
- package/dist/astro/scroll-progress/ScrollProgressBar.astro +19 -19
- package/dist/astro/scroll-progress/index.ts +4 -4
- package/dist/astro/toast/Toast.astro +36 -36
- package/dist/astro/toast/ToastDescription.astro +10 -10
- package/dist/astro/toast/ToastTitle.astro +18 -18
- package/dist/astro/toast/Toaster.astro +78 -78
- package/dist/astro/toast/assets.ts +6 -6
- package/dist/astro/toast/index.ts +30 -30
- package/dist/astro/toast/toast.ts +277 -277
- package/dist/index.js +18 -2
- package/dist/index.js.map +1 -1
- package/package.json +55 -54
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><defs><filter id="SVGp0LL3caJ"><feGaussianBlur in="SourceGraphic" result="y" stdDeviation="1"/><feColorMatrix in="y" result="z" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7"/><feBlend in="SourceGraphic" in2="z"/></filter></defs><g filter="url(#SVGp0LL3caJ)"><circle cx="5" cy="12" r="4" fill="currentColor"><animate attributeName="cx" calcMode="spline" dur="2s" keySplines=".36,.62,.43,.99;.79,0,.58,.57" repeatCount="indefinite" values="5;8;5"/></circle><circle cx="19" cy="12" r="4" fill="currentColor"><animate attributeName="cx" calcMode="spline" dur="2s" keySplines=".36,.62,.43,.99;.79,0,.58,.57" repeatCount="indefinite" values="19;16;19"/></circle><animateTransform attributeName="transform" dur="0.75s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></g></svg>
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
import DotsScaleRotate12 from "./12-dots-scale-rotate.svg";
|
|
2
|
+
import RingWithBg180 from "./180-ring-with-bg.svg";
|
|
3
|
+
import Ring180 from "./180-ring.svg";
|
|
4
|
+
import RingWithBg270 from "./270-ring-with-bg.svg";
|
|
5
|
+
import Ring270 from "./270-ring.svg";
|
|
6
|
+
import DotsBounce3 from "./3-dots-bounce.svg";
|
|
7
|
+
import DotsFade3 from "./3-dots-fade.svg";
|
|
8
|
+
import DotsMove3 from "./3-dots-move.svg";
|
|
9
|
+
import DotsRotate3 from "./3-dots-rotate.svg";
|
|
10
|
+
import DotsScaleMiddle3 from "./3-dots-scale-middle.svg";
|
|
11
|
+
import DotsScale3 from "./3-dots-scale.svg";
|
|
12
|
+
import DotsRotate6 from "./6-dots-rotate.svg";
|
|
13
|
+
import DotsScaleMiddle6 from "./6-dots-scale-middle.svg";
|
|
14
|
+
import DotsScale6 from "./6-dots-scale.svg";
|
|
15
|
+
import DotsRotate8 from "./8-dots-rotate.svg";
|
|
16
|
+
import RingWithBg90 from "./90-ring-with-bg.svg";
|
|
17
|
+
import Ring90 from "./90-ring.svg";
|
|
18
|
+
import BarsFade from "./bars-fade.svg";
|
|
19
|
+
import BarsRotateFade from "./bars-rotate-fade.svg";
|
|
20
|
+
import BarsScaleFade from "./bars-scale-fade.svg";
|
|
21
|
+
import BarsScaleMiddle from "./bars-scale-middle.svg";
|
|
22
|
+
import BarsScale from "./bars-scale.svg";
|
|
23
|
+
import BlocksScale from "./blocks-scale.svg";
|
|
24
|
+
import BlocksShuffle2 from "./blocks-shuffle-2.svg";
|
|
25
|
+
import BlocksShuffle3 from "./blocks-shuffle-3.svg";
|
|
26
|
+
import BlocksWave from "./blocks-wave.svg";
|
|
27
|
+
import BouncingBall from "./bouncing-ball.svg";
|
|
28
|
+
import Clock from "./clock.svg";
|
|
29
|
+
import DotRevolve from "./dot-revolve.svg";
|
|
30
|
+
import EclipseHalf from "./eclipse-half.svg";
|
|
31
|
+
import Eclipse from "./eclipse.svg";
|
|
32
|
+
import GooeyBalls1 from "./gooey-balls-1.svg";
|
|
33
|
+
import GooeyBalls2 from "./gooey-balls-2.svg";
|
|
34
|
+
import Pulse2 from "./pulse-2.svg";
|
|
35
|
+
import Pulse3 from "./pulse-3.svg";
|
|
36
|
+
import PulseMultiple from "./pulse-multiple.svg";
|
|
37
|
+
import PulseRing from "./pulse-ring.svg";
|
|
38
|
+
import PulseRings2 from "./pulse-rings-2.svg";
|
|
39
|
+
import PulseRings3 from "./pulse-rings-3.svg";
|
|
40
|
+
import PulseRingsMultiple from "./pulse-rings-multiple.svg";
|
|
41
|
+
import Pulse from "./pulse.svg";
|
|
42
|
+
import RingResize from "./ring-resize.svg";
|
|
43
|
+
import Tadpole from "./tadpole.svg";
|
|
44
|
+
import WifiFade from "./wifi-fade.svg";
|
|
45
|
+
import Wifi from "./wifi.svg";
|
|
46
|
+
import WindToy from "./wind-toy.svg";
|
|
47
|
+
|
|
48
|
+
const loaders = {
|
|
49
|
+
"12-dots-scale-rotate": DotsScaleRotate12,
|
|
50
|
+
"180-ring-with-bg": RingWithBg180,
|
|
51
|
+
"180-ring": Ring180,
|
|
52
|
+
"270-ring-with-bg": RingWithBg270,
|
|
53
|
+
"270-ring": Ring270,
|
|
54
|
+
"3-dots-bounce": DotsBounce3,
|
|
55
|
+
"3-dots-fade": DotsFade3,
|
|
56
|
+
"3-dots-move": DotsMove3,
|
|
57
|
+
"3-dots-rotate": DotsRotate3,
|
|
58
|
+
"3-dots-scale-middle": DotsScaleMiddle3,
|
|
59
|
+
"3-dots-scale": DotsScale3,
|
|
60
|
+
"6-dots-rotate": DotsRotate6,
|
|
61
|
+
"6-dots-scale-middle": DotsScaleMiddle6,
|
|
62
|
+
"6-dots-scale": DotsScale6,
|
|
63
|
+
"8-dots-rotate": DotsRotate8,
|
|
64
|
+
"90-ring-with-bg": RingWithBg90,
|
|
65
|
+
"90-ring": Ring90,
|
|
66
|
+
"bars-fade": BarsFade,
|
|
67
|
+
"bars-rotate-fade": BarsRotateFade,
|
|
68
|
+
"bars-scale-fade": BarsScaleFade,
|
|
69
|
+
"bars-scale-middle": BarsScaleMiddle,
|
|
70
|
+
"bars-scale": BarsScale,
|
|
71
|
+
"blocks-scale": BlocksScale,
|
|
72
|
+
"blocks-shuffle-2": BlocksShuffle2,
|
|
73
|
+
"blocks-shuffle-3": BlocksShuffle3,
|
|
74
|
+
"blocks-wave": BlocksWave,
|
|
75
|
+
"bouncing-ball": BouncingBall,
|
|
76
|
+
clock: Clock,
|
|
77
|
+
"dot-revolve": DotRevolve,
|
|
78
|
+
"eclipse-half": EclipseHalf,
|
|
79
|
+
eclipse: Eclipse,
|
|
80
|
+
"gooey-balls-1": GooeyBalls1,
|
|
81
|
+
"gooey-balls-2": GooeyBalls2,
|
|
82
|
+
"pulse-2": Pulse2,
|
|
83
|
+
"pulse-3": Pulse3,
|
|
84
|
+
"pulse-multiple": PulseMultiple,
|
|
85
|
+
"pulse-ring": PulseRing,
|
|
86
|
+
"pulse-rings-2": PulseRings2,
|
|
87
|
+
"pulse-rings-3": PulseRings3,
|
|
88
|
+
"pulse-rings-multiple": PulseRingsMultiple,
|
|
89
|
+
pulse: Pulse,
|
|
90
|
+
"ring-resize": RingResize,
|
|
91
|
+
tadpole: Tadpole,
|
|
92
|
+
"wifi-fade": WifiFade,
|
|
93
|
+
wifi: Wifi,
|
|
94
|
+
"wind-toy": WindToy,
|
|
95
|
+
};
|
|
96
|
+
|
|
97
|
+
export { loaders };
|
|
98
|
+
|
|
99
|
+
export type LoaderType = keyof typeof loaders;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="0" fill="currentColor"><animate id="SVG0cdVlcnN" fill="freeze" attributeName="r" begin="0;SVGftllRbIv.begin+0.6s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" values="0;11"/><animate fill="freeze" attributeName="opacity" begin="0;SVGftllRbIv.begin+0.6s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" values="1;0"/></circle><circle cx="12" cy="12" r="0" fill="currentColor"><animate id="SVGftllRbIv" fill="freeze" attributeName="r" begin="SVG0cdVlcnN.begin+0.6s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" values="0;11"/><animate fill="freeze" attributeName="opacity" begin="SVG0cdVlcnN.begin+0.6s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" values="1;0"/></circle></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="0" fill="currentColor"><animate id="SVGHRb9bJhy" fill="freeze" attributeName="r" begin="0;SVGUoIUme6Z.begin+0.4s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" values="0;11"/><animate fill="freeze" attributeName="opacity" begin="0;SVGUoIUme6Z.begin+0.4s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" values="1;0"/></circle><circle cx="12" cy="12" r="0" fill="currentColor"><animate id="SVGaun8abat" fill="freeze" attributeName="r" begin="SVGHRb9bJhy.begin+0.4s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" values="0;11"/><animate fill="freeze" attributeName="opacity" begin="SVGHRb9bJhy.begin+0.4s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" values="1;0"/></circle><circle cx="12" cy="12" r="0" fill="currentColor"><animate id="SVGUoIUme6Z" fill="freeze" attributeName="r" begin="SVGHRb9bJhy.begin+0.8s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" values="0;11"/><animate fill="freeze" attributeName="opacity" begin="SVGHRb9bJhy.begin+0.8s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" values="1;0"/></circle></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="0" fill="currentColor"><animate id="SVGPW9ARccz" fill="freeze" attributeName="r" begin="0;SVGaeu34cWL.end" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" values="0;11"/><animate fill="freeze" attributeName="opacity" begin="0;SVGaeu34cWL.end" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" values="1;0"/></circle><circle cx="12" cy="12" r="0" fill="currentColor"><animate id="SVGODvPjeTJ" fill="freeze" attributeName="r" begin="SVGPW9ARccz.begin+0.2s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" values="0;11"/><animate fill="freeze" attributeName="opacity" begin="SVGPW9ARccz.begin+0.2s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" values="1;0"/></circle><circle cx="12" cy="12" r="0" fill="currentColor"><animate id="SVGaeu34cWL" fill="freeze" attributeName="r" begin="SVGPW9ARccz.begin+0.4s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" values="0;11"/><animate fill="freeze" attributeName="opacity" begin="SVGPW9ARccz.begin+0.4s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" values="1;0"/></circle></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z" transform="matrix(0 0 0 0 12 12)"><animateTransform attributeName="transform" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" repeatCount="indefinite" type="translate" values="12 12;0 0"/><animateTransform additive="sum" attributeName="transform" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" repeatCount="indefinite" type="scale" values="0;1"/><animate attributeName="opacity" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" repeatCount="indefinite" values="1;0"/></path></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z" transform="matrix(0 0 0 0 12 12)"><animateTransform id="SVGk7g6Ie5D" attributeName="transform" begin="0;SVGADuEYsSK.begin+0.6s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" type="translate" values="12 12;0 0"/><animateTransform additive="sum" attributeName="transform" begin="0;SVGADuEYsSK.begin+0.6s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" type="scale" values="0;1"/><animate attributeName="opacity" begin="0;SVGADuEYsSK.begin+0.6s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" values="1;0"/></path><path fill="currentColor" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z" transform="matrix(0 0 0 0 12 12)"><animateTransform id="SVGADuEYsSK" attributeName="transform" begin="SVGk7g6Ie5D.begin+0.6s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" type="translate" values="12 12;0 0"/><animateTransform additive="sum" attributeName="transform" begin="SVGk7g6Ie5D.begin+0.6s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" type="scale" values="0;1"/><animate attributeName="opacity" begin="SVGk7g6Ie5D.begin+0.6s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" values="1;0"/></path></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z" transform="matrix(0 0 0 0 12 12)"><animateTransform id="SVGr0dxBdJO" attributeName="transform" begin="0;SVG7Xy0ecki.begin+0.4s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" type="translate" values="12 12;0 0"/><animateTransform additive="sum" attributeName="transform" begin="0;SVG7Xy0ecki.begin+0.4s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" type="scale" values="0;1"/><animate attributeName="opacity" begin="0;SVG7Xy0ecki.begin+0.4s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" values="1;0"/></path><path fill="currentColor" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z" transform="matrix(0 0 0 0 12 12)"><animateTransform id="SVGp2dhBhxA" attributeName="transform" begin="SVGr0dxBdJO.begin+0.4s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" type="translate" values="12 12;0 0"/><animateTransform additive="sum" attributeName="transform" begin="SVGr0dxBdJO.begin+0.4s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" type="scale" values="0;1"/><animate attributeName="opacity" begin="SVGr0dxBdJO.begin+0.4s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" values="1;0"/></path><path fill="currentColor" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z" transform="matrix(0 0 0 0 12 12)"><animateTransform id="SVG7Xy0ecki" attributeName="transform" begin="SVGr0dxBdJO.begin+0.8s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" type="translate" values="12 12;0 0"/><animateTransform additive="sum" attributeName="transform" begin="SVGr0dxBdJO.begin+0.8s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" type="scale" values="0;1"/><animate attributeName="opacity" begin="SVGr0dxBdJO.begin+0.8s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" values="1;0"/></path></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z" transform="matrix(0 0 0 0 12 12)"><animateTransform id="SVGBGG9rcpE" attributeName="transform" begin="0;SVGryjChH5y.end" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" type="translate" values="12 12;0 0"/><animateTransform additive="sum" attributeName="transform" begin="0;SVGryjChH5y.end" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" type="scale" values="0;1"/><animate attributeName="opacity" begin="0;SVGryjChH5y.end" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" values="1;0"/></path><path fill="currentColor" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z" transform="matrix(0 0 0 0 12 12)"><animateTransform id="SVG0KQtjdtU" attributeName="transform" begin="SVGBGG9rcpE.begin+0.2s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" type="translate" values="12 12;0 0"/><animateTransform additive="sum" attributeName="transform" begin="SVGBGG9rcpE.begin+0.2s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" type="scale" values="0;1"/><animate attributeName="opacity" begin="SVGBGG9rcpE.begin+0.2s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" values="1;0"/></path><path fill="currentColor" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z" transform="matrix(0 0 0 0 12 12)"><animateTransform id="SVGryjChH5y" attributeName="transform" begin="SVGBGG9rcpE.begin+0.4s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" type="translate" values="12 12;0 0"/><animateTransform additive="sum" attributeName="transform" begin="SVGBGG9rcpE.begin+0.4s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" type="scale" values="0;1"/><animate attributeName="opacity" begin="SVGBGG9rcpE.begin+0.4s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" values="1;0"/></path></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="0" fill="currentColor"><animate attributeName="r" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" repeatCount="indefinite" values="0;11"/><animate attributeName="opacity" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" repeatCount="indefinite" values="1;0"/></circle></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g stroke="currentColor" stroke-width="1"><circle cx="12" cy="12" r="9.5" fill="none" stroke-linecap="round" stroke-width="3"><animate attributeName="stroke-dasharray" calcMode="spline" dur="1.5s" keySplines="0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1" keyTimes="0;0.475;0.95;1" repeatCount="indefinite" values="0 150;42 150;42 150;42 150"/><animate attributeName="stroke-dashoffset" calcMode="spline" dur="1.5s" keySplines="0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1" keyTimes="0;0.475;0.95;1" repeatCount="indefinite" values="0;-16;-59;-59"/></circle><animateTransform attributeName="transform" dur="2s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></g></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M12,23a9.63,9.63,0,0,1-8-9.5,9.51,9.51,0,0,1,6.79-9.1A1.66,1.66,0,0,0,12,2.81h0a1.67,1.67,0,0,0-1.94-1.64A11,11,0,0,0,12,23Z"><animateTransform attributeName="transform" dur="0.75s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></path></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M12,21L15.6,16.2C14.6,15.45 13.35,15 12,15C10.65,15 9.4,15.45 8.4,16.2L12,21" opacity="0"><animate id="SVGkbUu7KtW" fill="freeze" attributeName="opacity" begin="0;SVGAiUxzdjl.end+0.2s" dur="0.25s" values="0;1"/><animate id="SVGAiUxzdjl" fill="freeze" attributeName="opacity" begin="SVGV9fG3lbe.end+0.5s" dur="0.1s" values="1;0"/></path><path fill="currentColor" d="M12,9C9.3,9 6.81,9.89 4.8,11.4L6.6,13.8C8.1,12.67 9.97,12 12,12C14.03,12 15.9,12.67 17.4,13.8L19.2,11.4C17.19,9.89 14.7,9 12,9Z" opacity="0"><animate id="SVG2sZSgdIQ" fill="freeze" attributeName="opacity" begin="SVGkbUu7KtW.end" dur="0.25s" values="0;1"/><animate fill="freeze" attributeName="opacity" begin="SVGV9fG3lbe.end+0.5s" dur="0.1s" values="1;0"/></path><path fill="currentColor" d="M12,3C7.95,3 4.21,4.34 1.2,6.6L3,9C5.5,7.12 8.62,6 12,6C15.38,6 18.5,7.12 21,9L22.8,6.6C19.79,4.34 16.05,3 12,3" opacity="0"><animate id="SVGV9fG3lbe" fill="freeze" attributeName="opacity" begin="SVG2sZSgdIQ.end" dur="0.25s" values="0;1"/><animate fill="freeze" attributeName="opacity" begin="SVGV9fG3lbe.end+0.5s" dur="0.1s" values="1;0"/></path></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M12,21L15.6,16.2C14.6,15.45 13.35,15 12,15C10.65,15 9.4,15.45 8.4,16.2L12,21" opacity="0"><animate id="SVGKYQAHd9H" fill="freeze" attributeName="opacity" begin="0;SVGiICzmYiD.end+0.2s" calcMode="discrete" dur="0.25s" values="0;1"/><animate id="SVGiICzmYiD" fill="freeze" attributeName="opacity" begin="SVGqTmLtDFc.end+0.5s" dur="0.001s" values="1;0"/></path><path fill="currentColor" d="M12,9C9.3,9 6.81,9.89 4.8,11.4L6.6,13.8C8.1,12.67 9.97,12 12,12C14.03,12 15.9,12.67 17.4,13.8L19.2,11.4C17.19,9.89 14.7,9 12,9Z" opacity="0"><animate id="SVGPRCC2btp" fill="freeze" attributeName="opacity" begin="SVGKYQAHd9H.end" calcMode="discrete" dur="0.25s" values="0;1"/><animate fill="freeze" attributeName="opacity" begin="SVGqTmLtDFc.end+0.5s" dur="0.001s" values="1;0"/></path><path fill="currentColor" d="M12,3C7.95,3 4.21,4.34 1.2,6.6L3,9C5.5,7.12 8.62,6 12,6C15.38,6 18.5,7.12 21,9L22.8,6.6C19.79,4.34 16.05,3 12,3" opacity="0"><animate id="SVGqTmLtDFc" fill="freeze" attributeName="opacity" begin="SVGPRCC2btp.end" calcMode="discrete" dur="0.25s" values="0;1"/><animate fill="freeze" attributeName="opacity" begin="SVGqTmLtDFc.end+0.5s" dur="0.001s" values="1;0"/></path></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M20.27,4.74a4.93,4.93,0,0,1,1.52,4.61,5.32,5.32,0,0,1-4.1,4.51,5.12,5.12,0,0,1-5.2-1.5,5.53,5.53,0,0,0,6.13-1.48A5.66,5.66,0,0,0,20.27,4.74ZM12.32,11.53a5.49,5.49,0,0,0-1.47-6.2A5.57,5.57,0,0,0,4.71,3.72,5.17,5.17,0,0,1,9.53,2.2,5.52,5.52,0,0,1,13.9,6.45,5.28,5.28,0,0,1,12.32,11.53ZM19.2,20.29a4.92,4.92,0,0,1-4.72,1.49,5.32,5.32,0,0,1-4.34-4.05A5.2,5.2,0,0,1,11.6,12.5a5.6,5.6,0,0,0,1.51,6.13A5.63,5.63,0,0,0,19.2,20.29ZM3.79,19.38A5.18,5.18,0,0,1,2.32,14a5.3,5.3,0,0,1,4.59-4,5,5,0,0,1,4.58,1.61,5.55,5.55,0,0,0-6.32,1.69A5.46,5.46,0,0,0,3.79,19.38ZM12.23,12a5.11,5.11,0,0,0,3.66-5,5.75,5.75,0,0,0-3.18-6,5,5,0,0,1,4.42,2.3,5.21,5.21,0,0,1,.24,5.92A5.4,5.4,0,0,1,12.23,12ZM11.76,12a5.18,5.18,0,0,0-3.68,5.09,5.58,5.58,0,0,0,3.19,5.79c-1,.35-2.9-.46-4-1.68A5.51,5.51,0,0,1,11.76,12ZM23,12.63a5.07,5.07,0,0,1-2.35,4.52,5.23,5.23,0,0,1-5.91.2,5.24,5.24,0,0,1-2.67-4.77,5.51,5.51,0,0,0,5.45,3.33A5.52,5.52,0,0,0,23,12.63ZM1,11.23a5,5,0,0,1,2.49-4.5,5.23,5.23,0,0,1,5.81-.06,5.3,5.3,0,0,1,2.61,4.74A5.56,5.56,0,0,0,6.56,8.06,5.71,5.71,0,0,0,1,11.23Z"><animateTransform attributeName="transform" dur="1.5s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></path></svg>
|
|
@@ -1,53 +1,53 @@
|
|
|
1
|
-
---
|
|
2
|
-
import { cn } from "@/utils/cn";
|
|
3
|
-
|
|
4
|
-
interface Props {
|
|
5
|
-
duration?: number;
|
|
6
|
-
gap?: number;
|
|
7
|
-
repeat?: number;
|
|
8
|
-
pauseOnHover?: boolean;
|
|
9
|
-
vertical?: boolean;
|
|
10
|
-
reverse?: boolean;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
const {
|
|
14
|
-
duration = 10,
|
|
15
|
-
gap = 1,
|
|
16
|
-
repeat = 4,
|
|
17
|
-
pauseOnHover = true,
|
|
18
|
-
vertical = false,
|
|
19
|
-
reverse = false,
|
|
20
|
-
} = Astro.props;
|
|
21
|
-
---
|
|
22
|
-
|
|
23
|
-
<div
|
|
24
|
-
class={cn(
|
|
25
|
-
"group flex overflow-hidden max-w-max p-2 gap-(--gap)",
|
|
26
|
-
vertical ? "flex-col" : "flex-row",
|
|
27
|
-
)}
|
|
28
|
-
style={{
|
|
29
|
-
"--gap": `${gap}rem`,
|
|
30
|
-
"--duration": `${duration}s`,
|
|
31
|
-
}}
|
|
32
|
-
>
|
|
33
|
-
{
|
|
34
|
-
Array(repeat)
|
|
35
|
-
.fill(0)
|
|
36
|
-
.map(() => (
|
|
37
|
-
<div
|
|
38
|
-
class={cn(
|
|
39
|
-
"gap-(--gap) flex shrink-0 justify-around",
|
|
40
|
-
{
|
|
41
|
-
"group-hover:[animation-play-state:paused]": pauseOnHover,
|
|
42
|
-
"[animation-direction:reverse]": reverse,
|
|
43
|
-
},
|
|
44
|
-
vertical
|
|
45
|
-
? "animate-marquee-vertical flex-col"
|
|
46
|
-
: "animate-marquee-horizontal flex-row",
|
|
47
|
-
)}
|
|
48
|
-
>
|
|
49
|
-
<slot />
|
|
50
|
-
</div>
|
|
51
|
-
))
|
|
52
|
-
}
|
|
53
|
-
</div>
|
|
1
|
+
---
|
|
2
|
+
import { cn } from "@/utils/cn";
|
|
3
|
+
|
|
4
|
+
interface Props {
|
|
5
|
+
duration?: number;
|
|
6
|
+
gap?: number;
|
|
7
|
+
repeat?: number;
|
|
8
|
+
pauseOnHover?: boolean;
|
|
9
|
+
vertical?: boolean;
|
|
10
|
+
reverse?: boolean;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
const {
|
|
14
|
+
duration = 10,
|
|
15
|
+
gap = 1,
|
|
16
|
+
repeat = 4,
|
|
17
|
+
pauseOnHover = true,
|
|
18
|
+
vertical = false,
|
|
19
|
+
reverse = false,
|
|
20
|
+
} = Astro.props;
|
|
21
|
+
---
|
|
22
|
+
|
|
23
|
+
<div
|
|
24
|
+
class={cn(
|
|
25
|
+
"group flex overflow-hidden max-w-max p-2 gap-(--gap)",
|
|
26
|
+
vertical ? "flex-col" : "flex-row",
|
|
27
|
+
)}
|
|
28
|
+
style={{
|
|
29
|
+
"--gap": `${gap}rem`,
|
|
30
|
+
"--duration": `${duration}s`,
|
|
31
|
+
}}
|
|
32
|
+
>
|
|
33
|
+
{
|
|
34
|
+
Array(repeat)
|
|
35
|
+
.fill(0)
|
|
36
|
+
.map(() => (
|
|
37
|
+
<div
|
|
38
|
+
class={cn(
|
|
39
|
+
"gap-(--gap) flex shrink-0 justify-around",
|
|
40
|
+
{
|
|
41
|
+
"group-hover:[animation-play-state:paused]": pauseOnHover,
|
|
42
|
+
"[animation-direction:reverse]": reverse,
|
|
43
|
+
},
|
|
44
|
+
vertical
|
|
45
|
+
? "animate-marquee-vertical flex-col"
|
|
46
|
+
: "animate-marquee-horizontal flex-row",
|
|
47
|
+
)}
|
|
48
|
+
>
|
|
49
|
+
<slot />
|
|
50
|
+
</div>
|
|
51
|
+
))
|
|
52
|
+
}
|
|
53
|
+
</div>
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import Marquee from "./Marquee.astro";
|
|
2
|
-
|
|
3
|
-
export { Marquee };
|
|
1
|
+
import Marquee from "./Marquee.astro";
|
|
2
|
+
|
|
3
|
+
export { Marquee };
|
|
@@ -37,7 +37,7 @@ const {
|
|
|
37
37
|
data-allow-outside-click={allowOutsideClick}
|
|
38
38
|
class={cn(
|
|
39
39
|
"hidden fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-50 bg-surface text-foreground border-border border rounded-lg shadow-sm p-6 w-full max-w-[calc(100%-2rem)] sm:max-w-md transform transition-all ease-in data-[state=closed]:opacity-0 data-[state=closed]:scale-95 data-[state=open]:opacity-100 data-[state=open]:scale-100",
|
|
40
|
-
className
|
|
40
|
+
className
|
|
41
41
|
)}
|
|
42
42
|
{...attrs}
|
|
43
43
|
>
|
|
@@ -46,7 +46,7 @@ const {
|
|
|
46
46
|
<button
|
|
47
47
|
class="text-foreground hover:bg-muted absolute right-3 top-3 cursor-pointer rounded-lg p-1 transition-colors duration-150"
|
|
48
48
|
aria-label="close modal"
|
|
49
|
-
data-close
|
|
49
|
+
data-close
|
|
50
50
|
>
|
|
51
51
|
<svg
|
|
52
52
|
xmlns="http://www.w3.org/2000/svg"
|
|
@@ -29,7 +29,7 @@ export class Modal {
|
|
|
29
29
|
|
|
30
30
|
private setupAccessibility() {
|
|
31
31
|
const title = this.modal?.querySelector<HTMLElement>(
|
|
32
|
-
"h1, h2, h3, h4, h5, h6"
|
|
32
|
+
"h1, h2, h3, h4, h5, h6"
|
|
33
33
|
);
|
|
34
34
|
|
|
35
35
|
if (title) {
|
|
@@ -49,12 +49,14 @@ export class Modal {
|
|
|
49
49
|
this.backdrop?.addEventListener("click", () => this.closeModal());
|
|
50
50
|
document.addEventListener("click", (e) => {
|
|
51
51
|
const target = e.target as HTMLElement;
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
)
|
|
57
|
-
|
|
52
|
+
|
|
53
|
+
if (this.modal?.dataset.state !== "open") return;
|
|
54
|
+
|
|
55
|
+
const clickedOutside = !this.modal.contains(target);
|
|
56
|
+
const clickedTrigger = this.trigger?.contains(target);
|
|
57
|
+
|
|
58
|
+
if (clickedOutside && !clickedTrigger) {
|
|
59
|
+
this.closeModal(false);
|
|
58
60
|
}
|
|
59
61
|
});
|
|
60
62
|
}
|
|
@@ -75,8 +77,9 @@ export class Modal {
|
|
|
75
77
|
}, 0);
|
|
76
78
|
}
|
|
77
79
|
|
|
78
|
-
private closeModal() {
|
|
79
|
-
this.setState("closed");
|
|
80
|
+
private closeModal(shouldReturnFocus: boolean = true) {
|
|
81
|
+
this.setState("closed", shouldReturnFocus);
|
|
82
|
+
|
|
80
83
|
setTimeout(() => {
|
|
81
84
|
this.backdrop?.classList.add("hidden");
|
|
82
85
|
this.modal?.classList.add("hidden");
|
|
@@ -84,8 +87,14 @@ export class Modal {
|
|
|
84
87
|
}, 200);
|
|
85
88
|
}
|
|
86
89
|
|
|
87
|
-
private setState(
|
|
88
|
-
|
|
90
|
+
private setState(
|
|
91
|
+
state: "open" | "closed",
|
|
92
|
+
shouldReturnFocus: boolean = true
|
|
93
|
+
) {
|
|
94
|
+
if (state === "closed" && shouldReturnFocus) {
|
|
95
|
+
this.trigger?.focus();
|
|
96
|
+
}
|
|
97
|
+
|
|
89
98
|
this.modal?.setAttribute("aria-hidden", `${state === "closed"}`);
|
|
90
99
|
this.modal?.setAttribute("data-state", state);
|
|
91
100
|
this.backdrop?.setAttribute("aria-hidden", `${state === "closed"}`);
|
|
@@ -93,7 +102,7 @@ export class Modal {
|
|
|
93
102
|
}
|
|
94
103
|
|
|
95
104
|
private handleKeyDown = (event: KeyboardEvent) => {
|
|
96
|
-
if (event.key === "Escape" && this.modal!.dataset.
|
|
105
|
+
if (event.key === "Escape" && this.modal!.dataset.state === "open") {
|
|
97
106
|
this.closeModal();
|
|
98
107
|
event.preventDefault();
|
|
99
108
|
}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
export class Popover {
|
|
2
|
-
// References to tooltip elements
|
|
3
2
|
private dropdownMenu: HTMLElement;
|
|
4
3
|
private trigger: HTMLElement | null;
|
|
5
4
|
private content: HTMLElement | null;
|
|
@@ -52,12 +51,14 @@ export class Popover {
|
|
|
52
51
|
|
|
53
52
|
document.addEventListener("click", (e) => {
|
|
54
53
|
const target = e.target as HTMLElement;
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
)
|
|
60
|
-
|
|
54
|
+
|
|
55
|
+
if (this.content?.dataset.state !== "open") return;
|
|
56
|
+
|
|
57
|
+
const clickedOutside = !this.content.contains(target);
|
|
58
|
+
const clickedTrigger = this.trigger?.contains(target);
|
|
59
|
+
|
|
60
|
+
if (clickedOutside && !clickedTrigger) {
|
|
61
|
+
this.closePopover(false);
|
|
61
62
|
}
|
|
62
63
|
});
|
|
63
64
|
|
|
@@ -91,15 +92,22 @@ export class Popover {
|
|
|
91
92
|
}, 0);
|
|
92
93
|
}
|
|
93
94
|
|
|
94
|
-
private closePopover() {
|
|
95
|
-
this.
|
|
96
|
-
|
|
95
|
+
private closePopover(shouldReturnFocus: boolean = true) {
|
|
96
|
+
this.setState("closed", shouldReturnFocus);
|
|
97
|
+
|
|
97
98
|
window.setTimeout(() => {
|
|
98
99
|
this.content?.classList.add("hidden");
|
|
99
100
|
}, 100);
|
|
100
101
|
}
|
|
101
102
|
|
|
102
|
-
private setState(
|
|
103
|
+
private setState(
|
|
104
|
+
state: "open" | "closed",
|
|
105
|
+
shouldReturnFocus: boolean = true
|
|
106
|
+
) {
|
|
107
|
+
if (state === "closed" && shouldReturnFocus) {
|
|
108
|
+
this.trigger?.focus();
|
|
109
|
+
}
|
|
110
|
+
|
|
103
111
|
this.content?.setAttribute("aria-hidden", `${state === "closed"}`);
|
|
104
112
|
this.content?.setAttribute("data-state", state);
|
|
105
113
|
}
|
|
@@ -1,41 +1,41 @@
|
|
|
1
|
-
---
|
|
2
|
-
import ScrollProgressBar from "./ScrollProgressBar.astro";
|
|
3
|
-
import { cn } from "@/utils/cn";
|
|
4
|
-
import type { HTMLAttributes } from "astro/types";
|
|
5
|
-
|
|
6
|
-
interface Props extends HTMLAttributes<"div"> {}
|
|
7
|
-
|
|
8
|
-
const { class: className, ...attrs } = Astro.props;
|
|
9
|
-
---
|
|
10
|
-
|
|
11
|
-
<div
|
|
12
|
-
class={cn("fixed top-0 left-0 w-full h-[2px] bg-muted z-[1000]", className)}
|
|
13
|
-
{...attrs}
|
|
14
|
-
>
|
|
15
|
-
<slot>
|
|
16
|
-
<ScrollProgressBar />
|
|
17
|
-
</slot>
|
|
18
|
-
</div>
|
|
19
|
-
|
|
20
|
-
<script>
|
|
21
|
-
function initScrollProgress() {
|
|
22
|
-
const bar = document.querySelector<HTMLElement>(
|
|
23
|
-
"[data-scroll-progress-bar]",
|
|
24
|
-
);
|
|
25
|
-
if (!bar) return;
|
|
26
|
-
|
|
27
|
-
function updateBar() {
|
|
28
|
-
const total = document.documentElement.scrollHeight - window.innerHeight;
|
|
29
|
-
const progress = (window.scrollY / total) * 100;
|
|
30
|
-
bar!.style.width = `${progress}%`;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
window.addEventListener("scroll", updateBar);
|
|
34
|
-
updateBar();
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
initScrollProgress();
|
|
38
|
-
document.addEventListener("astro:after-swap", () => {
|
|
39
|
-
initScrollProgress();
|
|
40
|
-
});
|
|
41
|
-
</script>
|
|
1
|
+
---
|
|
2
|
+
import ScrollProgressBar from "./ScrollProgressBar.astro";
|
|
3
|
+
import { cn } from "@/utils/cn";
|
|
4
|
+
import type { HTMLAttributes } from "astro/types";
|
|
5
|
+
|
|
6
|
+
interface Props extends HTMLAttributes<"div"> {}
|
|
7
|
+
|
|
8
|
+
const { class: className, ...attrs } = Astro.props;
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
<div
|
|
12
|
+
class={cn("fixed top-0 left-0 w-full h-[2px] bg-muted z-[1000]", className)}
|
|
13
|
+
{...attrs}
|
|
14
|
+
>
|
|
15
|
+
<slot>
|
|
16
|
+
<ScrollProgressBar />
|
|
17
|
+
</slot>
|
|
18
|
+
</div>
|
|
19
|
+
|
|
20
|
+
<script>
|
|
21
|
+
function initScrollProgress() {
|
|
22
|
+
const bar = document.querySelector<HTMLElement>(
|
|
23
|
+
"[data-scroll-progress-bar]",
|
|
24
|
+
);
|
|
25
|
+
if (!bar) return;
|
|
26
|
+
|
|
27
|
+
function updateBar() {
|
|
28
|
+
const total = document.documentElement.scrollHeight - window.innerHeight;
|
|
29
|
+
const progress = (window.scrollY / total) * 100;
|
|
30
|
+
bar!.style.width = `${progress}%`;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
window.addEventListener("scroll", updateBar);
|
|
34
|
+
updateBar();
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
initScrollProgress();
|
|
38
|
+
document.addEventListener("astro:after-swap", () => {
|
|
39
|
+
initScrollProgress();
|
|
40
|
+
});
|
|
41
|
+
</script>
|
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
---
|
|
2
|
-
import { cn } from "@/utils/cn";
|
|
3
|
-
import type { HTMLAttributes } from "astro/types";
|
|
4
|
-
|
|
5
|
-
interface Props extends HTMLAttributes<"div"> {}
|
|
6
|
-
|
|
7
|
-
const { class: className, ...attrs } = Astro.props;
|
|
8
|
-
---
|
|
9
|
-
|
|
10
|
-
<div
|
|
11
|
-
data-scroll-progress-bar
|
|
12
|
-
class={cn(
|
|
13
|
-
"h-full bg-primary transition-all duration-100 ease-out",
|
|
14
|
-
className,
|
|
15
|
-
)}
|
|
16
|
-
style="width: 0%;"
|
|
17
|
-
{...attrs}
|
|
18
|
-
>
|
|
19
|
-
</div>
|
|
1
|
+
---
|
|
2
|
+
import { cn } from "@/utils/cn";
|
|
3
|
+
import type { HTMLAttributes } from "astro/types";
|
|
4
|
+
|
|
5
|
+
interface Props extends HTMLAttributes<"div"> {}
|
|
6
|
+
|
|
7
|
+
const { class: className, ...attrs } = Astro.props;
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
<div
|
|
11
|
+
data-scroll-progress-bar
|
|
12
|
+
class={cn(
|
|
13
|
+
"h-full bg-primary transition-all duration-100 ease-out",
|
|
14
|
+
className,
|
|
15
|
+
)}
|
|
16
|
+
style="width: 0%;"
|
|
17
|
+
{...attrs}
|
|
18
|
+
>
|
|
19
|
+
</div>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import ScrollProgress from "./ScrollProgress.astro";
|
|
2
|
-
import ScrollProgressBar from "./ScrollProgressBar.astro";
|
|
3
|
-
|
|
4
|
-
export { ScrollProgress, ScrollProgressBar };
|
|
1
|
+
import ScrollProgress from "./ScrollProgress.astro";
|
|
2
|
+
import ScrollProgressBar from "./ScrollProgressBar.astro";
|
|
3
|
+
|
|
4
|
+
export { ScrollProgress, ScrollProgressBar };
|
|
@@ -1,36 +1,36 @@
|
|
|
1
|
-
---
|
|
2
|
-
import { cn } from "@/utils/cn";
|
|
3
|
-
import type { HTMLAttributes } from "astro/types";
|
|
4
|
-
|
|
5
|
-
interface Props extends HTMLAttributes<"div"> {}
|
|
6
|
-
|
|
7
|
-
const { class: className, ...attrs } = Astro.props;
|
|
8
|
-
---
|
|
9
|
-
|
|
10
|
-
<div
|
|
11
|
-
data-toast
|
|
12
|
-
class={cn(
|
|
13
|
-
"fixed z-[1000] p-4 bg-background text-foreground border border-border rounded-lg shadow-lg flex flex-row items-start gap-2 overflow-hidden opacity-0 duration-500 transition-all ease-in-out min-w-xs max-w-md data-[state=showing]:opacity-100 data-[state=hide]:pointer-events-none ",
|
|
14
|
-
className,
|
|
15
|
-
)}
|
|
16
|
-
{...attrs}
|
|
17
|
-
>
|
|
18
|
-
<slot />
|
|
19
|
-
</div>
|
|
20
|
-
|
|
21
|
-
<style>
|
|
22
|
-
@reference "@/styles/global.css";
|
|
23
|
-
|
|
24
|
-
[data-toast][data-toast-type="success"] {
|
|
25
|
-
@apply border-green-500 bg-green-50 text-green-800;
|
|
26
|
-
}
|
|
27
|
-
[data-toast][data-toast-type="error"] {
|
|
28
|
-
@apply border-red-500 bg-red-50 text-red-800;
|
|
29
|
-
}
|
|
30
|
-
[data-toast][data-toast-type="warning"] {
|
|
31
|
-
@apply border-orange-400 bg-orange-50 text-orange-800;
|
|
32
|
-
}
|
|
33
|
-
[data-toast][data-toast-type="info"] {
|
|
34
|
-
@apply border-blue-500 bg-blue-50 text-blue-800;
|
|
35
|
-
}
|
|
36
|
-
</style>
|
|
1
|
+
---
|
|
2
|
+
import { cn } from "@/utils/cn";
|
|
3
|
+
import type { HTMLAttributes } from "astro/types";
|
|
4
|
+
|
|
5
|
+
interface Props extends HTMLAttributes<"div"> {}
|
|
6
|
+
|
|
7
|
+
const { class: className, ...attrs } = Astro.props;
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
<div
|
|
11
|
+
data-toast
|
|
12
|
+
class={cn(
|
|
13
|
+
"fixed z-[1000] p-4 bg-background text-foreground border border-border rounded-lg shadow-lg flex flex-row items-start gap-2 overflow-hidden opacity-0 duration-500 transition-all ease-in-out min-w-xs max-w-md data-[state=showing]:opacity-100 data-[state=hide]:pointer-events-none ",
|
|
14
|
+
className,
|
|
15
|
+
)}
|
|
16
|
+
{...attrs}
|
|
17
|
+
>
|
|
18
|
+
<slot />
|
|
19
|
+
</div>
|
|
20
|
+
|
|
21
|
+
<style>
|
|
22
|
+
@reference "@/styles/global.css";
|
|
23
|
+
|
|
24
|
+
[data-toast][data-toast-type="success"] {
|
|
25
|
+
@apply border-green-500 bg-green-50 text-green-800;
|
|
26
|
+
}
|
|
27
|
+
[data-toast][data-toast-type="error"] {
|
|
28
|
+
@apply border-red-500 bg-red-50 text-red-800;
|
|
29
|
+
}
|
|
30
|
+
[data-toast][data-toast-type="warning"] {
|
|
31
|
+
@apply border-orange-400 bg-orange-50 text-orange-800;
|
|
32
|
+
}
|
|
33
|
+
[data-toast][data-toast-type="info"] {
|
|
34
|
+
@apply border-blue-500 bg-blue-50 text-blue-800;
|
|
35
|
+
}
|
|
36
|
+
</style>
|