@espressif/dashboard-ui-components 1.3.0 → 1.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/CHANGELOG.md +120 -0
- package/dist/{chunk-TSNA6BHK.js → chunk-45DCL46L.js} +1 -1
- package/dist/{chunk-RCRU3JW2.js → chunk-6RJAKSPV.js} +3 -3
- package/dist/{chunk-KCMVLNM5.js → chunk-ABBHGIFI.js} +1 -1
- package/dist/{chunk-7BO76CNB.js → chunk-OKB2WTX7.js} +8 -7
- package/dist/{chunk-RKAFXJRD.js → chunk-WR54R7J6.js} +3 -3
- package/dist/{chunk-O5BFYRPY.js → chunk-X7LDLZBT.js} +429 -110
- package/dist/{chunk-UHRNPXO5.js → chunk-ZEQNTNMW.js} +31 -9
- package/dist/common/index.js +6 -6
- package/dist/components/index.d.ts +142 -6
- package/dist/components/index.js +4 -4
- package/dist/core/index.d.ts +1 -1
- package/dist/core/index.js +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +7 -7
- package/dist/layouts/index.js +4 -4
- package/dist/use-controlled-state-BL9NoHu8.d.ts +19 -0
- package/package.json +1 -1
- package/src/assets/illustrations/rm-data-download.svg +192 -52
- package/dist/use-controlled-state-Demn-VNO.d.ts +0 -9
|
@@ -1,68 +1,208 @@
|
|
|
1
1
|
<?xml version="1.0" encoding="UTF-8"?>
|
|
2
2
|
<svg id="rm-data-download" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 845.67 533.92">
|
|
3
|
+
<!--
|
|
4
|
+
RainMaker cloud (taken from the product logo) raining data into a laptop.
|
|
5
|
+
|
|
6
|
+
One source, two variants (see illustration-variants.ts):
|
|
7
|
+
- static: every SMIL element is stripped and `data-variant="animated"`
|
|
8
|
+
groups are dropped, so the base attribute values below ARE the resting
|
|
9
|
+
frame (rows visible, progress two thirds full, two records in flight).
|
|
10
|
+
- animated: `data-variant="static"` groups are dropped; `<set>` elements
|
|
11
|
+
hide what the animations then bring in, so nothing flashes before its
|
|
12
|
+
first `begin`.
|
|
13
|
+
Variant groups must not contain nested <g> elements: the selector is a
|
|
14
|
+
non-greedy regex up to the first closing tag.
|
|
15
|
+
|
|
16
|
+
Theme colours come from the design tokens; the cloud keeps the logo's own
|
|
17
|
+
reds on purpose. Ids are prefixed "rmdd-" because the markup is inlined.
|
|
18
|
+
-->
|
|
3
19
|
<defs>
|
|
4
20
|
<style>
|
|
5
|
-
.
|
|
6
|
-
|
|
7
|
-
}
|
|
21
|
+
.rmdd-card { fill: var(--color-card); }
|
|
22
|
+
.rmdd-muted { fill: var(--color-muted); }
|
|
23
|
+
.rmdd-muted-fg { fill: var(--color-muted-foreground); }
|
|
24
|
+
.rmdd-gray { fill: var(--color-gray); }
|
|
25
|
+
.rmdd-primary { fill: var(--color-primary); }
|
|
26
|
+
.rmdd-primary-light { fill: var(--color-primary-light); }
|
|
27
|
+
.rmdd-flow { fill: none; stroke: var(--color-primary); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 9 9; opacity: .55; }
|
|
28
|
+
.rmdd-pkt-frame { fill: var(--color-card); stroke: var(--color-primary); stroke-width: 2.5; }
|
|
29
|
+
</style>
|
|
8
30
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
31
|
+
<linearGradient id="rmdd-cloud" x1=".83" y1="92.99" x2="512.02" y2="92.99" gradientTransform="translate(0 114.01)" gradientUnits="userSpaceOnUse">
|
|
32
|
+
<stop offset="0" stop-color="#fc4c3b"/>
|
|
33
|
+
<stop offset=".5" stop-color="#d43129"/>
|
|
34
|
+
<stop offset="1" stop-color="#f94939"/>
|
|
35
|
+
</linearGradient>
|
|
36
|
+
<linearGradient id="rmdd-cloud-top" x1="340.71" y1="86.7" x2="166.21" y2="-87.76" gradientTransform="translate(0 114.01)" gradientUnits="userSpaceOnUse">
|
|
37
|
+
<stop offset="0" stop-color="#d43129"/>
|
|
38
|
+
<stop offset="1" stop-color="#f94939"/>
|
|
39
|
+
</linearGradient>
|
|
40
|
+
<linearGradient id="rmdd-cloud-band" x1="43.64" y1="194.71" x2="364.07" y2="194.71" gradientTransform="translate(0 114.01)" gradientUnits="userSpaceOnUse">
|
|
41
|
+
<stop offset="0" stop-color="#d43129"/>
|
|
42
|
+
<stop offset="1" stop-color="#f94939"/>
|
|
43
|
+
</linearGradient>
|
|
44
|
+
<linearGradient id="rmdd-cloud-sweep" x1="377.59" y1="200.5" x2="479.34" y2="200.5" gradientTransform="translate(0 114.01)" gradientUnits="userSpaceOnUse">
|
|
45
|
+
<stop offset="0" stop-color="#f94939"/>
|
|
46
|
+
<stop offset="1" stop-color="#d43129"/>
|
|
47
|
+
</linearGradient>
|
|
48
|
+
<linearGradient id="rmdd-dot" x1="130.74" y1="157.26" x2="95.26" y2="121.82" gradientTransform="translate(0 114.01)" gradientUnits="userSpaceOnUse">
|
|
49
|
+
<stop offset="0" stop-color="#d43129"/>
|
|
50
|
+
<stop offset=".17" stop-color="#dd372d"/>
|
|
51
|
+
<stop offset=".67" stop-color="#f14436"/>
|
|
52
|
+
<stop offset="1" stop-color="#f94939"/>
|
|
53
|
+
</linearGradient>
|
|
54
|
+
<linearGradient id="rmdd-drop" x1="0" y1="0" x2="1" y2="0">
|
|
55
|
+
<stop offset="0" stop-color="#fc4c3b"/>
|
|
56
|
+
<stop offset=".57" stop-color="#eb3b30"/>
|
|
57
|
+
<stop offset="1" stop-color="#e5352c"/>
|
|
58
|
+
</linearGradient>
|
|
12
59
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
60
|
+
<!-- The three rain dashes of the logo, reused for the static logo and the falling copies. -->
|
|
61
|
+
<g id="rmdd-rain">
|
|
62
|
+
<path fill="url(#rmdd-drop)" d="M295.41,420.01c-12.31,0-22.29-9.99-22.29-22.31,0-5.3,1.89-10.43,5.34-14.46l46.37-54.33c7.99-9.37,22.07-10.49,31.44-2.5s10.49,22.07,2.5,31.44h0l-46.37,54.33c-4.24,4.97-10.46,7.83-16.99,7.82h0Z"/>
|
|
63
|
+
<path fill="url(#rmdd-drop)" d="M195.75,420.01c-5.3,0-10.42-1.89-14.43-5.35-9.37-7.95-10.52-21.99-2.57-31.36.02-.02.03-.04.05-.06l46.42-54.33c7.75-9.57,21.79-11.05,31.36-3.3s11.05,21.79,3.3,31.36c-.24.3-.5.6-.76.89l-46.37,54.33c-4.24,4.97-10.46,7.83-16.99,7.82h0Z"/>
|
|
64
|
+
<path fill="url(#rmdd-drop)" d="M96.14,420.01c-12.31,0-22.29-9.99-22.29-22.31,0-5.3,1.89-10.43,5.34-14.46l46.37-54.33c7.75-9.57,21.79-11.05,31.36-3.3s11.05,21.79,3.3,31.36c-.24.3-.5.6-.76.89l-46.37,54.33c-4.22,4.98-10.42,7.84-16.95,7.82h0Z"/>
|
|
65
|
+
</g>
|
|
66
|
+
|
|
67
|
+
<!-- One exported record travelling from the cloud to the laptop. -->
|
|
68
|
+
<g id="rmdd-packet">
|
|
69
|
+
<rect class="rmdd-pkt-frame" x="-31" y="-13" width="62" height="26" rx="7"/>
|
|
70
|
+
<rect class="rmdd-primary" x="-22" y="-5" width="12" height="5" rx="2.5"/>
|
|
71
|
+
<rect class="rmdd-muted-fg" x="-6" y="-5" width="27" height="5" rx="2.5"/>
|
|
72
|
+
<rect class="rmdd-muted-fg" x="-22" y="3" width="17" height="4" rx="2" opacity=".6"/>
|
|
73
|
+
<rect class="rmdd-muted-fg" x="0" y="3" width="15" height="4" rx="2" opacity=".6"/>
|
|
74
|
+
</g>
|
|
16
75
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
}
|
|
76
|
+
<path id="rmdd-flow-path" d="M338 178 C 440 178, 462 402, 560 402"/>
|
|
77
|
+
</defs>
|
|
20
78
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
}
|
|
79
|
+
<!-- Ground -->
|
|
80
|
+
<ellipse class="rmdd-muted" cx="440" cy="526" rx="380" ry="7.5"/>
|
|
24
81
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
82
|
+
<!-- RainMaker cloud, straight from the logo (viewBox 512 x 420), scaled down. -->
|
|
83
|
+
<g transform="translate(48 30) scale(0.58)">
|
|
84
|
+
<!-- Falling copies of the logo's rain, emitted continuously. -->
|
|
85
|
+
<g data-variant="animated" opacity=".55">
|
|
86
|
+
<use href="#rmdd-rain">
|
|
87
|
+
<animateTransform attributeName="transform" type="translate" values="0 0; 0 160" dur="2.4s" begin="0s" repeatCount="indefinite"/>
|
|
88
|
+
<animate attributeName="opacity" values="0;1;1;0" keyTimes="0;.12;.5;1" dur="2.4s" begin="0s" repeatCount="indefinite"/>
|
|
89
|
+
</use>
|
|
90
|
+
<use href="#rmdd-rain">
|
|
91
|
+
<animateTransform attributeName="transform" type="translate" values="0 0; 0 160" dur="2.4s" begin="1.2s" repeatCount="indefinite"/>
|
|
92
|
+
<animate attributeName="opacity" values="0;1;1;0" keyTimes="0;.12;.5;1" dur="2.4s" begin="1.2s" repeatCount="indefinite"/>
|
|
93
|
+
</use>
|
|
94
|
+
</g>
|
|
28
95
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
</
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
<
|
|
36
|
-
<path
|
|
37
|
-
<path class="st1" d="M241.83,422.44l.39-178.97c-3.35.02-6.71.03-10.06.03-1.91,0-3.82-.02-5.72-.02l-.4,179.56c5.35-.24,10.79-.46,15.78-.6Z"/>
|
|
38
|
-
<path class="st1" d="M277.03,361.96l.39-121.75c-3.35.01-6.71.02-10.06.02-1.91,0-3.82-.01-5.72-.02l-.4,122.15c5.35-.16,10.79-.31,15.78-.41Z"/>
|
|
39
|
-
<path class="st1" d="M547.53,361.77l-286.28-.39c.03,3.35.05,6.71.05,10.06,0,1.91-.03,3.82-.04,5.72l287.22.4c-.38-5.35-.74-10.79-.96-15.78Z"/>
|
|
40
|
-
<path class="st1" d="M547.41,422.43l-321.36-.39c.04,3.35.06,6.71.06,10.06,0,1.91-.03,3.82-.04,5.72l322.42.4c-.43-5.35-.83-10.79-1.08-15.78Z"/>
|
|
41
|
-
<path class="st1" d="M547.29,482.55l-356.63-.39c.04,3.35.07,6.71.07,10.06,0,1.91-.03,3.82-.04,5.72l357.81.4c-.48-5.35-.92-10.79-1.2-15.78Z"/>
|
|
42
|
-
<path class="st0" d="M1.45,3c1.93,0,1.93-3,0-3S-.48,3,1.45,3h0Z"/>
|
|
43
|
-
<path class="st0" d="M298.29,165.07h0c-.87-28.76-24.91-51.37-53.67-50.49-27.38.84-49.44,22.73-50.48,50.11h0c-21.89,1.16-38.69,19.85-37.53,41.74,1.13,21.33,18.94,37.93,40.3,37.58h71.35c3.73-.3,7.11,2.19,7.94,5.85h0l7.35-8.63h0c1.26-1.48,1.93-3.37,1.88-5.31-.17-4.31-3.73-7.72-8.05-7.69h-80.57c-13.21.4-24.24-9.97-24.64-23.18-.4-13.21,9.97-24.24,23.18-24.64.39-.01.79-.01,1.18,0,1.44,0,2.87.13,4.29.39,2.07.38,4.22-.09,5.94-1.31,2.55-1.68,3.9-4.67,3.48-7.69-.24-1.7-.37-3.41-.37-5.12,0-20.06,16.26-36.32,36.32-36.32s36.32,16.26,36.32,36.32v1.54h0c-14.54,6.23-24.01,20.5-24.09,36.32-.04,4.39,3.47,7.99,7.86,8.06,4.36.02,7.9-3.5,7.92-7.86v-.03c-.05-13.21,10.62-23.96,23.83-24.02,13.21-.05,23.96,10.62,24.02,23.83.02,6.03-2.23,11.84-6.31,16.28l-.11.14-23.49,27.09c-2.86,3.29-2.52,8.28.77,11.14s8.28,2.52,11.14-.77h0l23.46-26.95c14.71-16.26,13.47-41.37-2.79-56.08-7.25-6.56-16.66-10.22-26.44-10.27h0s0-.01,0-.01Z"/>
|
|
96
|
+
<use href="#rmdd-rain"/>
|
|
97
|
+
<circle fill="url(#rmdd-dot)" cx="113" cy="253.55" r="25.08">
|
|
98
|
+
<animate attributeName="r" values="25.08;27.5;25.08" dur="2.4s" repeatCount="indefinite"/>
|
|
99
|
+
</circle>
|
|
100
|
+
<path fill="url(#rmdd-cloud)" d="M400.41,142.72h0C397.94,61.46,330.05-2.41,248.79.07,171.43,2.43,109.11,64.29,106.18,141.63h0C44.34,144.92-3.13,197.72.16,259.56c3.2,60.25,53.51,107.16,113.84,106.16h201.58c10.54-.84,20.1,6.2,22.43,16.52h0l20.77-24.38h0c3.57-4.17,5.45-9.51,5.3-14.99-.47-12.19-10.53-21.81-22.73-21.73H113.74c-37.31,1.14-68.47-28.18-69.61-65.49s28.18-68.47,65.49-69.61c1.11-.03,2.23-.04,3.34-.02,4.07,0,8.12.37,12.13,1.09,5.86,1.08,11.91-.25,16.78-3.69,7.2-4.74,11.02-13.2,9.82-21.73-.69-4.79-1.04-9.63-1.04-14.47,0-56.67,45.94-102.61,102.61-102.61s102.61,45.94,102.61,102.61v4.35h0c-41.09,17.61-67.82,57.91-68.06,102.61-.1,12.4,9.81,22.56,22.21,22.77,12.31.05,22.33-9.9,22.38-22.21v-.09c-.15-37.32,29.99-67.7,67.32-67.85,37.32-.15,67.7,29.99,67.85,67.32.07,17.03-6.3,33.45-17.82,45.99l-.3.39-66.37,76.54c-8.09,9.29-7.12,23.38,2.17,31.47s23.38,7.12,31.47-2.17h0l66.28-76.14c41.57-45.93,38.04-116.87-7.89-158.44-20.48-18.53-47.07-28.86-74.69-29.01h0v-.03Z"/>
|
|
101
|
+
<path fill="url(#rmdd-cloud-top)" d="M253.21,20.42c71.54-.01,133.13,50.5,147.12,120.65C396.84,59.85,328.17-3.17,246.95.31c-76.06,3.26-137.08,63.98-140.73,140.02,14.27-69.82,75.72-119.95,146.99-119.91Z"/>
|
|
102
|
+
<path fill="url(#rmdd-cloud-band)" d="M358.78,357.9h0c7.97-9.42,6.79-23.51-2.62-31.48-4.02-3.4-9.11-5.27-14.37-5.29H113c-37.3-.02-67.53-30.24-67.58-67.54,0-6.2.86-12.37,2.52-18.34,0,0-43.46,130.38,145.86,130.38h121.69c10.56-.84,20.12,6.22,22.43,16.56l20.86-24.3h0Z"/>
|
|
103
|
+
<path fill="url(#rmdd-cloud-sweep)" d="M454.44,215.04c18.93,25.91,17,61.56-4.61,85.27l-.3.39-66.45,76.32c-8.09,9.29-7.12,23.38,2.17,31.47s23.38,7.12,31.47-2.17h0l17.38-19.99h0c88.14-101.83,20.34-171.28,20.34-171.28h0Z"/>
|
|
44
104
|
</g>
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
105
|
+
|
|
106
|
+
<!-- Connector: dashes flow from the cloud towards the laptop. -->
|
|
107
|
+
<use href="#rmdd-flow-path" class="rmdd-flow">
|
|
108
|
+
<animate attributeName="stroke-dashoffset" from="0" to="-18" dur="0.9s" repeatCount="indefinite"/>
|
|
109
|
+
</use>
|
|
110
|
+
|
|
111
|
+
<!-- Laptop -->
|
|
112
|
+
<g id="rmdd-laptop">
|
|
113
|
+
<rect class="rmdd-muted-fg" x="526.77" y="310.15" width="296.41" height="203.65" rx="29.36"/>
|
|
114
|
+
<path class="rmdd-gray" d="M504.29,513.81h341.38c0,11.1-9.01,20.11-20.11,20.11h-301.15c-11.1,0-20.11-9.01-20.11-20.11h0Z"/>
|
|
115
|
+
<path class="rmdd-muted" d="M649.88,513.81h50.2v.15c0,2.95-2.4,5.35-5.35,5.35h-39.51c-2.95,0-5.35-2.4-5.35-5.35v-.15h0Z"/>
|
|
116
|
+
<circle class="rmdd-card" cx="674.98" cy="318.61" r="3.7"/>
|
|
117
|
+
|
|
118
|
+
<rect class="rmdd-card" x="539.84" y="327.23" width="270.27" height="169.5"/>
|
|
119
|
+
<rect class="rmdd-primary" x="539.84" y="327.23" width="270.27" height="17.44"/>
|
|
120
|
+
<circle class="rmdd-card" cx="551" cy="335.95" r="2.6" opacity=".85"/>
|
|
121
|
+
<circle class="rmdd-card" cx="560" cy="335.95" r="2.6" opacity=".85"/>
|
|
122
|
+
<circle class="rmdd-card" cx="569" cy="335.95" r="2.6" opacity=".85"/>
|
|
123
|
+
|
|
124
|
+
<!-- Table header -->
|
|
125
|
+
<rect class="rmdd-muted" x="551" y="355" width="248" height="16" rx="3"/>
|
|
126
|
+
<rect class="rmdd-muted-fg" x="558" y="361" width="34" height="4" rx="2"/>
|
|
127
|
+
<rect class="rmdd-muted-fg" x="606" y="361" width="58" height="4" rx="2"/>
|
|
128
|
+
<rect class="rmdd-muted-fg" x="682" y="361" width="42" height="4" rx="2"/>
|
|
129
|
+
<rect class="rmdd-muted-fg" x="746" y="361" width="30" height="4" rx="2"/>
|
|
130
|
+
|
|
131
|
+
<!--
|
|
132
|
+
Rows: visible in the static frame. When animated, `set` hides them from
|
|
133
|
+
t=0 and each lights up as a packet arrives (packet k lands at 3s + 1.5s * k).
|
|
134
|
+
-->
|
|
135
|
+
<g>
|
|
136
|
+
<rect class="rmdd-primary-light" x="551" y="378" width="248" height="16" rx="3" opacity=".45"/>
|
|
137
|
+
<rect class="rmdd-primary" x="558" y="384" width="34" height="4" rx="2"/>
|
|
138
|
+
<rect class="rmdd-muted-fg" x="606" y="384" width="50" height="4" rx="2"/>
|
|
139
|
+
<rect class="rmdd-muted-fg" x="682" y="384" width="36" height="4" rx="2"/>
|
|
140
|
+
<rect class="rmdd-muted-fg" x="746" y="384" width="24" height="4" rx="2"/>
|
|
141
|
+
<set attributeName="opacity" to="0" begin="0s" dur="indefinite"/>
|
|
142
|
+
<animate attributeName="opacity" values="0;1;1;0" keyTimes="0;.06;.82;1" dur="4.5s" begin="3s" repeatCount="indefinite"/>
|
|
50
143
|
</g>
|
|
51
|
-
<g
|
|
52
|
-
<
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
144
|
+
<g>
|
|
145
|
+
<rect class="rmdd-primary-light" x="551" y="400" width="248" height="16" rx="3" opacity=".45"/>
|
|
146
|
+
<rect class="rmdd-primary" x="558" y="406" width="34" height="4" rx="2"/>
|
|
147
|
+
<rect class="rmdd-muted-fg" x="606" y="406" width="44" height="4" rx="2"/>
|
|
148
|
+
<rect class="rmdd-muted-fg" x="682" y="406" width="40" height="4" rx="2"/>
|
|
149
|
+
<rect class="rmdd-muted-fg" x="746" y="406" width="18" height="4" rx="2"/>
|
|
150
|
+
<set attributeName="opacity" to="0" begin="0s" dur="indefinite"/>
|
|
151
|
+
<animate attributeName="opacity" values="0;1;1;0" keyTimes="0;.06;.82;1" dur="4.5s" begin="4.5s" repeatCount="indefinite"/>
|
|
152
|
+
</g>
|
|
153
|
+
<g>
|
|
154
|
+
<rect class="rmdd-primary-light" x="551" y="422" width="248" height="16" rx="3" opacity=".45"/>
|
|
155
|
+
<rect class="rmdd-primary" x="558" y="428" width="34" height="4" rx="2"/>
|
|
156
|
+
<rect class="rmdd-muted-fg" x="606" y="428" width="56" height="4" rx="2"/>
|
|
157
|
+
<rect class="rmdd-muted-fg" x="682" y="428" width="30" height="4" rx="2"/>
|
|
158
|
+
<rect class="rmdd-muted-fg" x="746" y="428" width="28" height="4" rx="2"/>
|
|
159
|
+
<set attributeName="opacity" to="0" begin="0s" dur="indefinite"/>
|
|
160
|
+
<animate attributeName="opacity" values="0;1;1;0" keyTimes="0;.06;.82;1" dur="4.5s" begin="6s" repeatCount="indefinite"/>
|
|
161
|
+
</g>
|
|
162
|
+
|
|
163
|
+
<!-- Download progress: two thirds full at rest, filling over the cycle when animated. -->
|
|
164
|
+
<rect class="rmdd-muted" x="551" y="470" width="248" height="8" rx="4"/>
|
|
165
|
+
<rect class="rmdd-primary" x="551" y="470" width="168" height="8" rx="4">
|
|
166
|
+
<animate attributeName="width" values="0;248;248" keyTimes="0;.92;1" dur="4.5s" repeatCount="indefinite"/>
|
|
167
|
+
</rect>
|
|
168
|
+
|
|
169
|
+
<!-- Download badge -->
|
|
170
|
+
<g transform="translate(786 452)">
|
|
171
|
+
<circle class="rmdd-primary" r="11"/>
|
|
172
|
+
<g fill="none" stroke="var(--color-primary-foreground)" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
|
|
173
|
+
<path d="M0 -5.5 V3.5"/>
|
|
174
|
+
<path d="M-3.8 0 L0 3.8 L3.8 0"/>
|
|
175
|
+
<path d="M-5 6.5 H5"/>
|
|
176
|
+
<animateTransform attributeName="transform" type="translate" values="0 -1.2; 0 1.2; 0 -1.2" dur="1.2s" repeatCount="indefinite"/>
|
|
64
177
|
</g>
|
|
65
|
-
<circle id="cam" class="st4" cx="674.98" cy="318.61" r="3.7"/>
|
|
66
178
|
</g>
|
|
67
179
|
</g>
|
|
180
|
+
|
|
181
|
+
<!-- Static frame: two records frozen part-way along the connector. -->
|
|
182
|
+
<g data-variant="static">
|
|
183
|
+
<use href="#rmdd-packet" x="422" y="241"/>
|
|
184
|
+
<use href="#rmdd-packet" x="492" y="359"/>
|
|
185
|
+
</g>
|
|
186
|
+
|
|
187
|
+
<!-- Animated: three records in flight, arriving 1.5s apart. -->
|
|
188
|
+
<g data-variant="animated">
|
|
189
|
+
<use href="#rmdd-packet" opacity="0">
|
|
190
|
+
<animateMotion dur="4.5s" begin="0s" repeatCount="indefinite" keyPoints="0;1;1" keyTimes="0;.667;1" calcMode="linear">
|
|
191
|
+
<mpath href="#rmdd-flow-path"/>
|
|
192
|
+
</animateMotion>
|
|
193
|
+
<animate attributeName="opacity" values="0;1;1;0;0" keyTimes="0;.06;.6;.667;1" dur="4.5s" begin="0s" repeatCount="indefinite"/>
|
|
194
|
+
</use>
|
|
195
|
+
<use href="#rmdd-packet" opacity="0">
|
|
196
|
+
<animateMotion dur="4.5s" begin="1.5s" repeatCount="indefinite" keyPoints="0;1;1" keyTimes="0;.667;1" calcMode="linear">
|
|
197
|
+
<mpath href="#rmdd-flow-path"/>
|
|
198
|
+
</animateMotion>
|
|
199
|
+
<animate attributeName="opacity" values="0;1;1;0;0" keyTimes="0;.06;.6;.667;1" dur="4.5s" begin="1.5s" repeatCount="indefinite"/>
|
|
200
|
+
</use>
|
|
201
|
+
<use href="#rmdd-packet" opacity="0">
|
|
202
|
+
<animateMotion dur="4.5s" begin="3s" repeatCount="indefinite" keyPoints="0;1;1" keyTimes="0;.667;1" calcMode="linear">
|
|
203
|
+
<mpath href="#rmdd-flow-path"/>
|
|
204
|
+
</animateMotion>
|
|
205
|
+
<animate attributeName="opacity" values="0;1;1;0;0" keyTimes="0;.06;.6;.667;1" dur="4.5s" begin="3s" repeatCount="indefinite"/>
|
|
206
|
+
</use>
|
|
207
|
+
</g>
|
|
68
208
|
</svg>
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
interface CommonControlledStateProps<T> {
|
|
2
|
-
value?: T;
|
|
3
|
-
defaultValue?: T;
|
|
4
|
-
}
|
|
5
|
-
declare function useControlledState<T, Rest extends any[] = []>(props: CommonControlledStateProps<T> & {
|
|
6
|
-
onChange?: (value: T, ...args: Rest) => void;
|
|
7
|
-
}): readonly [T, (next: T, ...args: Rest) => void];
|
|
8
|
-
|
|
9
|
-
export { useControlledState as u };
|