@syscore/ui-library 1.5.3 → 1.6.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/client/components/icons/AlphaIcon.tsx +81 -0
- package/client/components/icons/StandardLogo.tsx +8 -2
- package/client/components/ui/navigation.tsx +617 -967
- package/client/global.css +326 -3
- package/client/ui/Navigation.stories.tsx +515 -38
- package/dist/index.cjs.js +1 -1
- package/dist/index.d.ts +30 -3
- package/dist/index.es.js +1964 -2236
- package/package.json +1 -1
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
import { motion } from "motion/react";
|
|
2
|
+
|
|
3
|
+
const ALPHA_PATH =
|
|
4
|
+
"M5.3387 0.0229882C5.37971 0.0229882 5.45295 0.0199228 5.5584 0.0137925C5.66386 0.00459714 5.74442 0 5.80007 0C6.72867 0 7.49908 0.269732 8.11131 0.809196C8.72354 1.34559 9.14097 2.09195 9.3636 3.04828C9.44855 3.47433 9.49835 3.96628 9.513 4.52414V5.16782C10.2014 4.07663 10.7287 2.85517 11.0948 1.50345C11.1505 1.29808 11.1959 1.17701 11.2311 1.14023C11.2662 1.10345 11.3761 1.08506 11.5606 1.08506C11.8535 1.08506 12 1.13563 12 1.23678C12 1.25211 11.9722 1.37778 11.9165 1.61379C11.5093 3.24751 10.7931 4.77701 9.76785 6.2023L9.53497 6.51034L9.55694 7.04368C9.59795 8.23295 9.72391 8.9318 9.93482 9.14023C9.97583 9.16782 10.0388 9.18161 10.1238 9.18161C10.32 9.15402 10.5031 9.06973 10.673 8.92874C10.8429 8.78774 10.963 8.62222 11.0333 8.43218C11.0597 8.32797 11.0948 8.26513 11.1388 8.24368C11.1798 8.22222 11.2852 8.21149 11.4551 8.21149C11.7364 8.21149 11.877 8.27739 11.877 8.40919C11.877 8.49808 11.8345 8.63142 11.7495 8.8092C11.5943 9.13103 11.3687 9.4069 11.0729 9.63678C10.777 9.8636 10.4475 9.97701 10.0842 9.97701H9.93482C8.97986 9.97701 8.3398 9.44674 8.01465 8.38621L7.95313 8.23448C7.20615 8.74942 6.79165 9.02835 6.70963 9.07126C5.66679 9.69042 4.61809 10 3.56353 10C2.56756 10 1.76346 9.70575 1.15123 9.11724C0.538997 8.52874 0.162578 7.75632 0.02197 6.8C0.0073233 6.71111 0 6.54866 0 6.31264C0 5.9295 0.02197 5.62146 0.0659099 5.38851C0.276822 4.06437 0.887587 2.8751 1.89821 1.82069C2.91175 0.769348 4.05859 0.170115 5.3387 0.0229882ZM1.83669 7.10805C1.83669 7.73946 1.9978 8.24368 2.32003 8.62069C2.64518 8.99464 3.09484 9.18161 3.66899 9.18161C4.03515 9.18161 4.44379 9.12337 4.89491 9.0069C5.6829 8.80153 6.44892 8.4046 7.19297 7.81609C7.29257 7.74253 7.38777 7.66437 7.47858 7.58161C7.56939 7.50192 7.64262 7.43295 7.69828 7.37471L7.78176 7.28276L7.76419 7.08506C7.76419 6.95326 7.75979 6.75862 7.75101 6.50115C7.74515 6.24368 7.74222 5.98927 7.74222 5.73793C7.72757 5.18008 7.71732 4.74636 7.71146 4.43678C7.70267 4.1272 7.67338 3.74866 7.62358 3.30115C7.57671 2.85364 7.5108 2.50728 7.42585 2.26207C7.3409 2.01992 7.22519 1.77471 7.07873 1.52644C6.92933 1.2751 6.73892 1.09425 6.50751 0.983908C6.27609 0.873563 6.00513 0.81839 5.69462 0.81839C4.72501 0.81839 3.87404 1.35479 3.14171 2.42759C2.79019 2.97318 2.49579 3.71647 2.25851 4.65747C1.9773 5.73333 1.83669 6.55019 1.83669 7.10805Z";
|
|
5
|
+
|
|
6
|
+
const PATH_LENGTH = 60;
|
|
7
|
+
|
|
8
|
+
export function AlphaIcon({ dark = false }: { dark?: boolean }) {
|
|
9
|
+
if (dark) {
|
|
10
|
+
return (
|
|
11
|
+
<svg
|
|
12
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
13
|
+
width="12"
|
|
14
|
+
height="10"
|
|
15
|
+
viewBox="0 0 12 10"
|
|
16
|
+
fill="none"
|
|
17
|
+
className="mt-1.5"
|
|
18
|
+
style={{ overflow: "visible" }}
|
|
19
|
+
>
|
|
20
|
+
<path d={ALPHA_PATH} fill="currentColor" />
|
|
21
|
+
</svg>
|
|
22
|
+
);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
return (
|
|
26
|
+
<svg
|
|
27
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
28
|
+
width="12"
|
|
29
|
+
height="10"
|
|
30
|
+
viewBox="0 0 12 10"
|
|
31
|
+
fill="none"
|
|
32
|
+
className="mt-1.5"
|
|
33
|
+
style={{ overflow: "visible" }}
|
|
34
|
+
>
|
|
35
|
+
<path d={ALPHA_PATH} fill="url(#paint0_linear_nav)" opacity="0.4" />
|
|
36
|
+
<motion.path
|
|
37
|
+
d={ALPHA_PATH}
|
|
38
|
+
fill="none"
|
|
39
|
+
stroke="url(#stroke_gradient_nav)"
|
|
40
|
+
strokeWidth="0.4"
|
|
41
|
+
strokeLinecap="round"
|
|
42
|
+
strokeLinejoin="round"
|
|
43
|
+
initial={{ strokeDashoffset: PATH_LENGTH }}
|
|
44
|
+
animate={{ strokeDashoffset: -PATH_LENGTH }}
|
|
45
|
+
style={{ strokeDasharray: `8 ${PATH_LENGTH - 8}` }}
|
|
46
|
+
transition={{
|
|
47
|
+
duration: 2,
|
|
48
|
+
repeat: Infinity,
|
|
49
|
+
repeatDelay: 8,
|
|
50
|
+
ease: "linear",
|
|
51
|
+
}}
|
|
52
|
+
/>
|
|
53
|
+
<defs>
|
|
54
|
+
<linearGradient
|
|
55
|
+
id="paint0_linear_nav"
|
|
56
|
+
x1="-3.27254"
|
|
57
|
+
y1="4.99923"
|
|
58
|
+
x2="6.36738"
|
|
59
|
+
y2="-2.36962"
|
|
60
|
+
gradientUnits="userSpaceOnUse"
|
|
61
|
+
>
|
|
62
|
+
<stop stopColor="#8AEFDB" />
|
|
63
|
+
<stop offset="0.5" stopColor="#D4BACE" />
|
|
64
|
+
<stop offset="1" stopColor="#CBE0F1" />
|
|
65
|
+
</linearGradient>
|
|
66
|
+
<linearGradient
|
|
67
|
+
id="stroke_gradient_nav"
|
|
68
|
+
x1="0"
|
|
69
|
+
y1="0"
|
|
70
|
+
x2="12"
|
|
71
|
+
y2="10"
|
|
72
|
+
gradientUnits="userSpaceOnUse"
|
|
73
|
+
>
|
|
74
|
+
<stop stopColor="#8AEFDB" />
|
|
75
|
+
<stop offset="0.5" stopColor="#D4BACE" />
|
|
76
|
+
<stop offset="1" stopColor="#CBE0F1" />
|
|
77
|
+
</linearGradient>
|
|
78
|
+
</defs>
|
|
79
|
+
</svg>
|
|
80
|
+
);
|
|
81
|
+
}
|
|
@@ -1,6 +1,12 @@
|
|
|
1
1
|
import { cn } from "@/lib/utils";
|
|
2
2
|
|
|
3
|
-
export const StandardLogo = ({
|
|
3
|
+
export const StandardLogo = ({
|
|
4
|
+
className = "",
|
|
5
|
+
dark = false,
|
|
6
|
+
}: {
|
|
7
|
+
className?: string;
|
|
8
|
+
dark?: boolean;
|
|
9
|
+
}) => {
|
|
4
10
|
return (
|
|
5
11
|
<svg
|
|
6
12
|
width="93"
|
|
@@ -8,7 +14,7 @@ export const StandardLogo = ({ className = "" }: { className?: string }) => {
|
|
|
8
14
|
viewBox="0 0 93 18"
|
|
9
15
|
fill="none"
|
|
10
16
|
xmlns="http://www.w3.org/2000/svg"
|
|
11
|
-
className={cn("text-gray-700", className)}
|
|
17
|
+
className={cn(dark ? "text-gray-700" : "text-white", className)}
|
|
12
18
|
>
|
|
13
19
|
<path
|
|
14
20
|
d="M87.4833 17.1541C84.5265 17.1541 82.2737 14.8309 82.2737 11.7333C82.2737 8.63573 84.5265 6.31253 87.4833 6.31253C89.4779 6.31253 91.1675 7.36853 92.0358 9.0112V0.281599C92.0358 0.117333 92.1531 0 92.3174 0H92.599C92.7633 0 92.8806 0.117333 92.8806 0.281599V16.7317C92.8806 16.896 92.7633 17.0133 92.599 17.0133H92.3174C92.1531 17.0133 92.0358 16.896 92.0358 16.7317V14.4555C91.1675 16.0981 89.4779 17.1541 87.4833 17.1541ZM87.5771 7.1808C85.0662 7.1808 83.1419 9.12853 83.1419 11.7333C83.1419 14.3381 85.0662 16.3093 87.5771 16.3093C90.0881 16.3093 91.9889 14.3381 91.9889 11.7333C91.9889 9.12853 90.0881 7.1808 87.5771 7.1808Z"
|