chore: import upstream snapshot with attribution
This commit is contained in:
wehub-resource-sync
Vendored
+3
@@ -0,0 +1,3 @@
|
||||
declare module '*.css'
|
||||
declare module '*.scss'
|
||||
declare module '*.sass'
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,31 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Aurora</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/main.tsx"></script>
|
||||
</body>
|
||||
<style>
|
||||
body {
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
margin: 32px 0;
|
||||
font-family: var(--a-font-family);
|
||||
}
|
||||
|
||||
#root {
|
||||
width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 24px 0;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
</html>
|
||||
@@ -0,0 +1,24 @@
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
|
||||
import '@fontsource/source-sans-pro/200.css'
|
||||
import '@fontsource/source-sans-pro/300.css'
|
||||
import '@fontsource/source-sans-pro/400.css'
|
||||
import '@fontsource/source-sans-pro/600.css'
|
||||
import '@fontsource/source-sans-pro/700.css'
|
||||
import '@fontsource/source-sans-pro/900.css'
|
||||
import 'remixicon/fonts/remixicon.css'
|
||||
import '../src/styles/main.sass'
|
||||
import { App } from './App.tsx'
|
||||
|
||||
const rootElement = document.getElementById('root')
|
||||
|
||||
if (rootElement != null) {
|
||||
ReactDOM.createRoot(rootElement).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
)
|
||||
} else {
|
||||
console.error('Error: Root element not found!')
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
<svg width="800" height="192" viewBox="0 0 800 192" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M126.205 101.717C125.951 86.239 132.637 74.1902 146.246 65.5659C138.571 54.4049 127.251 48.1317 112.283 46.7293C106.959 46.2293 100.151 47.4878 91.8707 50.5366C82.9634 53.839 77.9488 55.4805 76.8366 55.4805C74.4854 55.4805 69.9707 54.0927 63.2805 51.2951C56.6049 48.5049 50.9098 47.1098 46.2073 47.1098C38.2902 47.239 30.9244 49.4268 24.122 53.6732C17.3171 57.9244 11.8756 63.7317 7.79512 71.0805C2.59268 80.2171 0 91.1268 0 103.807C0 115.222 1.91219 126.634 5.74634 138.056C9.33415 148.966 13.9195 158.541 19.4805 166.778C24.4244 174.263 28.7707 179.717 32.4707 183.146C37.7976 188.471 43.2341 191.012 48.8098 190.754C52.3951 190.622 57.0927 189.293 62.9098 186.749C68.3488 184.351 73.7976 183.144 79.2439 183.144C84.3146 183.144 89.5683 184.344 95.0195 186.749C101.078 189.293 106.032 190.559 109.866 190.559C115.559 190.31 120.876 187.834 125.832 183.146C127.556 181.617 129.446 179.527 131.485 176.863C133.839 173.761 136.1 170.589 138.263 167.351C140.066 164.559 141.769 161.704 143.368 158.79C145.084 155.653 146.602 152.412 147.915 149.085C148.527 147.69 149.083 146.266 149.583 144.807C150.076 143.349 150.571 141.863 151.066 140.339C146.488 138.315 142.341 135.449 138.632 131.768C130.476 123.663 126.329 113.639 126.205 101.717ZM260.783 135.634H259.883L222.193 49.5024H192.595V188.471H218.39V98.4683H219.588L251.085 169.937H269.176L300.573 98.4683H301.776V188.471H327.868V49.5024H298.473L260.783 135.634ZM102.815 31.322C109.376 23.0756 112.656 14.1976 112.656 4.68293V2.78293C112.656 2.14391 112.593 1.5122 112.471 0.878052C107.89 1.13171 103.037 2.59269 97.8976 5.25122C92.7659 7.91952 88.5293 11.2854 85.1829 15.3366C78.5049 23.3341 75.161 31.8902 75.161 41.0244V42.8268C75.161 43.4024 75.2244 44.0024 75.3463 44.6415C85.6195 45.6537 94.7756 41.2122 102.815 31.322ZM629.351 49.5024H658.344V188.473H629.351V49.5024ZM745.91 71.5927C763.105 71.5927 772.198 84.8293 772.198 99.0829H800V96.1293C800 69.2537 779.502 46.8585 745.707 46.8585C709.512 46.8585 687.92 70.6805 687.92 111.305V126.985C687.92 167.598 709.312 191.124 745.605 191.124C780.3 191.124 800 168.412 800 143.168V140.115H772.2C772.2 154.476 763.305 166.385 746.115 166.385C728.512 166.385 717.312 153.861 717.312 127.08V111.412C717.312 84.7244 728.615 71.5927 745.91 71.5927ZM438.756 137.259C438.756 155.895 427.859 166.173 411.863 166.173C395.766 166.173 384.871 155.993 384.871 137.259V49.5024H356.073V141.332C356.073 170.966 377.066 191.122 411.859 191.122C446.554 191.122 467.646 170.966 467.646 141.332V49.5024H438.756V137.259ZM563.571 107.534L542.878 102.856C530.683 100.302 524.283 94.9098 524.283 86.8634C524.283 76.1781 532.978 69.4561 546.983 69.4561C562.778 69.4561 570.676 78.5171 571.373 88.2927H598.368C598.068 63.7537 577.576 46.6512 547.078 46.6512C518.188 46.6512 495.39 61.8244 495.39 89.1073C495.39 112.727 511.39 123.715 530.585 127.9L551.078 132.68C564.876 135.837 571.873 140.422 571.873 149.883C571.873 160.683 563.273 168.015 547.18 168.015C529.883 168.015 520.783 158.849 519.988 148.563H492.19C492.598 168.215 505.593 191.122 545.785 191.122C579.576 191.122 600.476 174.324 600.476 147.029C600.466 121.78 583.568 111.905 563.571 107.534Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
@@ -0,0 +1,64 @@
|
||||
<svg width="103" height="21" viewBox="0 0 103 21" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_22_189)">
|
||||
<path d="M20.4846 6.48553H16.075V9.05876H20.4846V6.48553Z" fill="#29AB70"/>
|
||||
<path d="M20.4846 10.0692H16.075V12.6424H20.4846V10.0692Z" fill="url(#paint0_linear_22_189)"/>
|
||||
<path d="M20.4846 13.6511H16.075V16.2243H20.4846V13.6511Z" fill="url(#paint1_linear_22_189)"/>
|
||||
<path d="M4.5 17.2348H0.0905304V19.808H4.5V17.2348Z" fill="url(#paint2_linear_22_189)"/>
|
||||
<path d="M9.82757 17.2348H5.41811V19.808H9.82757V17.2348Z" fill="url(#paint3_linear_22_189)"/>
|
||||
<path d="M15.1569 17.2348H10.7474V19.808H15.1569V17.2348Z" fill="url(#paint4_linear_22_189)"/>
|
||||
<path d="M20.4846 17.2348H16.075V19.808H20.4846V17.2348Z" fill="url(#paint5_linear_22_189)"/>
|
||||
<path d="M15.1569 13.6511H10.7474V16.2243H15.1569V13.6511Z" fill="url(#paint6_linear_22_189)"/>
|
||||
<path d="M9.82757 13.6511H5.41811V16.2243H9.82757V13.6511Z" fill="url(#paint7_linear_22_189)"/>
|
||||
<path d="M9.82757 10.0692H5.41811V12.6424H9.82757V10.0692Z" fill="url(#paint8_linear_22_189)"/>
|
||||
<path d="M59.5733 17.011C57.6607 17.011 56.0872 15.8585 56.0588 13.834H65.1157C65.2344 13.2988 65.294 12.7521 65.2933 12.2038C65.2933 8.54729 62.7911 6.21381 59.108 6.21381C55.1709 6.21381 52.4716 9.27894 52.4716 13.074C52.4716 17.2916 55.3964 20.1046 59.5289 20.1046C62.6508 20.1046 64.8156 18.5294 65.7444 15.942L62.6668 14.7397C62.2442 16.2528 61.2035 17.011 59.5733 17.011ZM59.0956 9.11024C60.6938 9.11024 61.7949 9.98218 61.7949 11.3318L61.7664 11.4437H56.0588C56.3962 9.98219 57.634 9.11024 59.0956 9.11024Z" fill="white"/>
|
||||
<path d="M77.7348 9.44758V6.49432H66.1224V9.58788H73.2081L65.8969 16.7304V19.8222H77.9319V16.5883H70.3952L77.7348 9.44758Z" fill="white"/>
|
||||
<path d="M99.4234 10.7973C99.4245 11.0212 99.4096 11.245 99.379 11.4668H102.79C102.873 11.0331 102.913 10.5924 102.909 10.1509C102.909 7.87246 101.476 6.21381 99.086 6.21381C97.5392 6.21381 96.4435 6.97387 95.8806 8.20987V6.49617H92.2827V19.8151H95.8806V11.2466C95.8806 9.89694 96.6122 9.13865 97.7363 9.13865C98.7486 9.13865 99.4234 9.81348 99.4234 10.7973Z" fill="white"/>
|
||||
<path d="M34.6291 8.49219C33.8122 7.11412 32.2939 6.21376 30.4115 6.21376C26.755 6.21376 24.0841 9.02673 24.0841 13.216C24.0841 17.3484 26.7283 20.1046 30.4949 20.1046C32.3791 20.1046 33.8975 19.2877 34.7694 17.9114V19.8222H38.227V0.14032H34.6291V8.49219ZM31.2248 17.0483C29.2287 17.0483 27.6731 15.5868 27.6731 13.2249C27.6731 10.8346 29.2199 9.31797 31.2248 9.31797C33.1641 9.31797 34.7677 10.8363 34.7677 13.2249C34.7677 15.5779 33.1641 17.0483 31.2248 17.0483Z" fill="white"/>
|
||||
<path d="M85.2076 17.011C83.295 17.011 81.7216 15.8585 81.6932 13.834H90.7501C90.8689 13.2988 90.9284 12.7521 90.9277 12.2038C90.9277 8.54729 88.4255 6.21381 84.7424 6.21381C80.8053 6.21381 78.106 9.27894 78.106 13.074C78.106 17.2916 81.0308 20.1046 85.1632 20.1046C88.2852 20.1046 90.45 18.5294 91.3788 15.942L88.2994 14.7397C87.8785 16.2528 86.8397 17.011 85.2076 17.011ZM84.7299 9.11024C86.3282 9.11024 87.4292 9.98218 87.4292 11.3318L87.4008 11.4437H81.6897C82.0306 9.98219 83.2666 9.11024 84.7299 9.11024Z" fill="white"/>
|
||||
<path d="M46.2843 17.011C44.3717 17.011 42.7983 15.8585 42.7699 13.834H51.8268C51.9434 13.2986 51.9999 12.7518 51.9955 12.2038C51.9955 8.54729 49.4933 6.21381 45.8101 6.21381C41.873 6.21381 39.1737 9.27894 39.1737 13.074C39.1737 17.2916 42.0986 20.1046 46.231 20.1046C49.353 20.1046 51.5178 18.5294 52.4465 15.942L49.3778 14.7397C48.9552 16.2528 47.9145 17.011 46.2843 17.011ZM45.8066 9.11024C47.4049 9.11024 48.5059 9.98218 48.5059 11.3318L48.4775 11.4437H42.7699C43.1073 9.98219 44.345 9.11024 45.8066 9.11024Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_22_189" x1="18.5666" y1="12.9798" x2="17.993" y2="9.72996" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#2C8C9D"/>
|
||||
<stop offset="0.04" stop-color="#298E9A"/>
|
||||
<stop offset="0.39" stop-color="#129C83"/>
|
||||
<stop offset="0.72" stop-color="#05A475"/>
|
||||
<stop offset="1" stop-color="#00A770"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_22_189" x1="16.0093" y1="16.0946" x2="20.5503" y2="13.7807" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#2839BA"/>
|
||||
<stop offset="1" stop-color="#148CB3"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear_22_189" x1="0.0905304" y1="18.5205" x2="4.5" y2="18.5205" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#F6A500"/>
|
||||
<stop offset="1" stop-color="#F29100"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint3_linear_22_189" x1="5.41811" y1="18.5205" x2="9.82757" y2="18.5205" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#F29100"/>
|
||||
<stop offset="1" stop-color="#D12F5F"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint4_linear_22_189" x1="10.7474" y1="18.5205" x2="15.1569" y2="18.5205" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#B4197C"/>
|
||||
<stop offset="1" stop-color="#472EAD"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint5_linear_22_189" x1="16.075" y1="18.5205" x2="20.4846" y2="18.5205" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#2839BA"/>
|
||||
<stop offset="1" stop-color="#3072B7"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint6_linear_22_189" x1="10.5734" y1="15.6329" x2="15.3291" y2="14.2424" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#B4197C"/>
|
||||
<stop offset="1" stop-color="#373AAC"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint7_linear_22_189" x1="5.26361" y1="14.079" x2="9.98385" y2="15.7963" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FFCB00"/>
|
||||
<stop offset="1" stop-color="#D12F5F"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint8_linear_22_189" x1="5.79104" y1="9.66424" x2="9.45464" y2="13.0455" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FFCF00"/>
|
||||
<stop offset="1" stop-color="#ED743B"/>
|
||||
</linearGradient>
|
||||
<clipPath id="clip0_22_189">
|
||||
<rect width="103" height="20.2448" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 109 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 111 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
@@ -0,0 +1,11 @@
|
||||
<svg width="102" height="31" viewBox="0 0 102 31" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M24.7443 13.5867C19.8876 10.7025 11.8767 10.4373 7.24037 11.8444C6.49582 12.0702 5.70854 11.6499 5.48295 10.9054C5.25735 10.1606 5.6772 9.37381 6.42224 9.14747C11.7444 7.53182 20.5916 7.84398 26.1827 11.1629C26.8525 11.5603 27.0722 12.4252 26.6751 13.0939C26.2779 13.7635 25.4123 13.9842 24.7443 13.5867ZM24.5852 17.8586C24.2446 18.4116 23.5217 18.5848 22.9696 18.2455C18.9205 15.7566 12.7463 15.0356 7.95602 16.4896C7.33483 16.6773 6.67869 16.3271 6.49006 15.7071C6.30283 15.0859 6.65325 14.4309 7.27333 14.242C12.7456 12.5815 19.5483 13.3858 24.1987 16.2437C24.7509 16.5837 24.9247 17.3071 24.5852 17.8586ZM22.7416 21.9613C22.471 22.4051 21.8928 22.5444 21.4505 22.2738C17.9124 20.1114 13.4591 19.6229 8.21451 20.821C7.70905 20.9369 7.20543 20.62 7.0901 20.1148C6.97436 19.6094 7.28985 19.1059 7.79642 18.9905C13.5357 17.6785 18.4589 18.2432 22.4302 20.6699C22.8729 20.9402 23.0124 21.5187 22.7416 21.9613ZM15.8319 0.229734C7.51087 0.229734 0.76506 6.97516 0.76506 15.2962C0.76506 23.618 7.51087 30.3632 15.8319 30.3632C24.1532 30.3632 30.8987 23.618 30.8987 15.2962C30.8987 6.97516 24.1532 0.229734 15.8319 0.229734Z" fill="#1ED760"/>
|
||||
<path d="M41.7566 14.1389C39.1552 13.5186 38.6919 13.0831 38.6919 12.1685C38.6919 11.304 39.5059 10.7225 40.716 10.7225C41.889 10.7225 43.052 11.1642 44.2717 12.0735C44.3086 12.101 44.3548 12.112 44.4003 12.1048C44.4458 12.0979 44.486 12.0731 44.5128 12.0353L45.783 10.2448C45.8351 10.1712 45.8209 10.0694 45.7506 10.0131C44.2992 8.84846 42.6648 8.28227 40.7545 8.28227C37.9456 8.28227 35.9836 9.96772 35.9836 12.3797C35.9836 14.9661 37.6761 15.8817 40.6008 16.5886C43.0902 17.162 43.5103 17.6423 43.5103 18.5012C43.5103 19.4527 42.6607 20.0443 41.2935 20.0443C39.7752 20.0443 38.5365 19.5328 37.1509 18.3329C37.1166 18.3034 37.0694 18.2898 37.0259 18.2923C36.9802 18.2961 36.9383 18.3173 36.9091 18.3523L35.4849 20.0473C35.4252 20.1177 35.4327 20.2228 35.5016 20.2836C37.1139 21.7227 39.0964 22.483 41.2359 22.483C44.2627 22.483 46.2185 20.8291 46.2185 18.2694C46.2185 16.1061 44.926 14.9098 41.7566 14.1389Z" fill="#1ED760"/>
|
||||
<path d="M55.2635 17.0382C55.2635 18.8649 54.1383 20.1396 52.5271 20.1396C50.9343 20.1396 49.7328 18.807 49.7328 17.0382C49.7328 15.2697 50.9343 13.9369 52.5271 13.9369C54.1124 13.9369 55.2635 15.2409 55.2635 17.0382ZM53.0663 11.5732C51.7544 11.5732 50.6783 12.09 49.791 13.1488V11.957C49.791 11.8629 49.7147 11.7863 49.6206 11.7863H47.2914C47.1973 11.7863 47.1212 11.8629 47.1212 11.957V25.1992C47.1212 25.2933 47.1973 25.3699 47.2914 25.3699H49.6206C49.7147 25.3699 49.791 25.2933 49.791 25.1992V21.0194C50.6785 22.0154 51.7548 22.5019 53.0663 22.5019C55.504 22.5019 57.9718 20.6253 57.9718 17.0382C57.9718 13.4503 55.504 11.5732 53.0663 11.5732Z" fill="#1ED760"/>
|
||||
<path d="M64.2972 20.1587C62.6274 20.1587 61.3686 18.817 61.3686 17.0382C61.3686 15.2519 62.5839 13.9556 64.2587 13.9556C65.9393 13.9556 67.2067 15.2972 67.2067 17.0772C67.2067 18.8633 65.9831 20.1587 64.2972 20.1587ZM64.2972 11.5733C61.1579 11.5733 58.6984 13.9907 58.6984 17.0772C58.6984 20.1302 61.141 22.5223 64.2587 22.5223C67.4093 22.5223 69.8763 20.113 69.8763 17.0382C69.8763 13.9737 67.4262 11.5733 64.2972 11.5733Z" fill="#1ED760"/>
|
||||
<path d="M76.5803 11.7863H74.0171V9.16561C74.0171 9.07152 73.9411 8.99505 73.847 8.99505H71.518C71.4237 8.99505 71.3471 9.07152 71.3471 9.16561V11.7863H70.2271C70.1332 11.7863 70.0574 11.8629 70.0574 11.957V13.9589C70.0574 14.0529 70.1332 14.1295 70.2271 14.1295H71.3471V19.3096C71.3471 21.403 72.389 22.4643 74.4438 22.4643C75.2793 22.4643 75.9726 22.2918 76.6258 21.9213C76.6789 21.8917 76.712 21.8344 76.712 21.7736V19.8673C76.712 19.8084 76.6812 19.753 76.6311 19.722C76.5803 19.6902 76.5172 19.6886 76.4652 19.7143C76.0165 19.94 75.5827 20.0443 75.0978 20.0443C74.3506 20.0443 74.0171 19.7051 74.0171 18.9446V14.1295H76.5803C76.6744 14.1295 76.7502 14.0529 76.7502 13.9589V11.957C76.7502 11.8629 76.6744 11.7863 76.5803 11.7863Z" fill="#1ED760"/>
|
||||
<path d="M85.5108 11.7966V11.4747C85.5108 10.5278 85.8739 10.1055 86.6882 10.1055C87.1738 10.1055 87.5639 10.202 88.0007 10.3477C88.0545 10.3646 88.1106 10.3561 88.1543 10.3239C88.1993 10.2917 88.2247 10.2401 88.2247 10.1854V8.22252C88.2247 8.14749 88.1765 8.0811 88.1043 8.05915C87.6428 7.92188 87.0524 7.78082 86.1682 7.78082C84.0166 7.78082 82.8796 8.99238 82.8796 11.2833V11.7762H81.7605C81.6666 11.7762 81.5895 11.8527 81.5895 11.9468V13.9589C81.5895 14.053 81.6666 14.1295 81.7605 14.1295H82.8796V22.1196C82.8796 22.2137 82.9555 22.2902 83.0494 22.2902H85.3786C85.4727 22.2902 85.5493 22.2137 85.5493 22.1196V14.1295H87.7242L91.0557 22.1175C90.6775 22.9568 90.3056 23.1238 89.7979 23.1238C89.3875 23.1238 88.9553 23.0012 88.5135 22.7594C88.4719 22.7365 88.4228 22.7328 88.3778 22.7466C88.3334 22.7625 88.2959 22.7954 88.277 22.8388L87.4876 24.5708C87.45 24.6526 87.482 24.7488 87.5608 24.7912C88.385 25.2376 89.1291 25.4281 90.0485 25.4281C91.7685 25.4281 92.7192 24.6268 93.5574 22.4714L97.5985 12.029C97.6187 11.9765 97.6127 11.9173 97.5805 11.8705C97.5485 11.8244 97.4969 11.7966 97.4404 11.7966H95.0154C94.9429 11.7966 94.8778 11.8426 94.8541 11.9108L92.37 19.0063L89.6491 11.9061C89.6243 11.8401 89.5607 11.7966 89.49 11.7966H85.5108Z" fill="#1ED760"/>
|
||||
<path d="M80.3336 11.7863H78.0042C77.9101 11.7863 77.8336 11.8629 77.8336 11.957V22.1196C77.8336 22.2137 77.9101 22.2902 78.0042 22.2902H80.3336C80.4275 22.2902 80.5041 22.2137 80.5041 22.1196V11.957C80.5041 11.8629 80.4275 11.7863 80.3336 11.7863Z" fill="#1ED760"/>
|
||||
<path d="M79.1806 7.15901C78.258 7.15901 77.509 7.90621 77.509 8.82882C77.509 9.75215 78.258 10.5001 79.1806 10.5001C80.1031 10.5001 80.8512 9.75215 80.8512 8.82882C80.8512 7.90621 80.1031 7.15901 79.1806 7.15901Z" fill="#1ED760"/>
|
||||
<path d="M99.6825 12.7972H99.2557V13.3415H99.6825C99.8955 13.3415 100.023 13.2372 100.023 13.0692C100.023 12.8922 99.8955 12.7972 99.6825 12.7972ZM99.9592 13.5736L100.423 14.2228H100.032L99.6145 13.6274H99.2557V14.2228H98.9285V12.502H99.6958C100.095 12.502 100.358 12.7066 100.358 13.0509C100.358 13.333 100.195 13.5054 99.9592 13.5736ZM99.5958 11.9295C98.7561 11.9295 98.1206 12.5969 98.1206 13.4143C98.1206 14.2313 98.7516 14.8898 99.5871 14.8898C100.427 14.8898 101.063 14.2228 101.063 13.405C101.063 12.588 100.431 11.9295 99.5958 11.9295ZM99.5871 15.0538C98.6652 15.0538 97.9479 14.3134 97.9479 13.4143C97.9479 12.5152 98.6746 11.7664 99.5958 11.7664C100.517 11.7664 101.235 12.5067 101.235 13.405C101.235 14.3042 100.509 15.0538 99.5871 15.0538Z" fill="#1ED760"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
@@ -0,0 +1,25 @@
|
||||
<svg width="130" height="25" viewBox="0 0 130 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_22_225)">
|
||||
<path d="M94.1544 10.5232C93.6569 13.0503 93.2788 16.1346 93.0799 17.408H92.9405C92.7813 16.0948 92.4033 13.0303 91.8859 10.543L90.6125 4.35469H86.7323V21.0494H89.14V7.28786L89.3786 8.57318L91.8262 21.0494H94.2341L96.6416 8.57318L96.8999 7.28043V15.5532L96.9001 21.0494H99.3078V4.35469H95.388L94.1544 10.5232Z" fill="white"/>
|
||||
<path d="M105.815 18.5423C105.596 18.9999 105.119 19.3181 104.641 19.3181C104.084 19.3181 103.865 18.8805 103.865 17.8059V8.85182H101.119V17.9652C101.119 20.2136 101.855 21.2483 103.487 21.2483C104.601 21.2483 105.497 20.7508 106.114 19.557H106.173L106.412 21.0494H108.561V8.85182H105.815V18.5423Z" fill="white"/>
|
||||
<path d="M113.874 13.6672C112.978 13.0106 112.421 12.5728 112.421 11.6176C112.421 10.9411 112.74 10.563 113.496 10.563C114.272 10.563 114.531 11.1003 114.551 12.9309L116.859 12.8314C117.038 9.86658 116.063 8.6328 113.536 8.6328C111.188 8.6328 110.033 9.68756 110.033 11.8564C110.033 13.8263 110.989 14.7218 112.541 15.8958C113.874 16.9305 114.65 17.5076 114.65 18.3432C114.65 18.98 114.252 19.4177 113.555 19.4177C112.74 19.4177 112.262 18.6418 112.382 17.2888L110.054 17.3284C109.695 19.8555 110.71 21.3279 113.416 21.3279C115.784 21.3279 117.018 20.2337 117.018 18.0448C117.018 16.055 116.023 15.2591 113.874 13.6672Z" fill="white"/>
|
||||
<path d="M118.53 21.0494H121.157V8.8518H118.53V21.0494Z" fill="white"/>
|
||||
<path d="M119.863 4.03635C118.849 4.03635 118.372 4.41446 118.372 5.72779C118.372 7.08092 118.849 7.41913 119.863 7.41913C120.898 7.41913 121.356 7.08092 121.356 5.72779C121.356 4.47414 120.898 4.03635 119.863 4.03635Z" fill="white"/>
|
||||
<path d="M129.992 16.652L127.584 16.5325C127.584 18.6816 127.345 19.3779 126.53 19.3779C125.714 19.3779 125.574 18.602 125.574 16.0749V13.707C125.574 11.2594 125.734 10.4834 126.549 10.4834C127.306 10.4834 127.505 11.2196 127.505 13.4881L129.892 13.3289C130.052 11.4385 129.813 10.1451 129.077 9.40885C128.539 8.87158 127.724 8.61302 126.589 8.61302C123.923 8.61302 122.828 10.0457 122.828 14.0651V15.7763C122.828 19.9154 123.764 21.2483 126.49 21.2483C127.644 21.2483 128.44 21.0096 128.977 20.4923C129.753 19.7758 130.052 18.5423 129.992 16.652Z" fill="white"/>
|
||||
<path d="M39.3351 18.7816C39.4874 18.3835 39.5639 17.7337 39.5639 16.8312V13.03C39.5639 12.1543 39.4874 11.5144 39.3351 11.1095C39.1823 10.7048 38.9137 10.5024 38.5291 10.5024C38.1574 10.5024 37.8953 10.7048 37.743 11.1095C37.5903 11.5144 37.5142 12.1543 37.5142 13.03V16.8312C37.5142 17.7337 37.5868 18.3835 37.7329 18.7816C37.8788 19.1795 38.1441 19.3786 38.5291 19.3786C38.9137 19.3786 39.1823 19.1795 39.3351 18.7816ZM36.2504 20.692C35.6995 20.321 35.3081 19.7436 35.0763 18.9608C34.8438 18.1779 34.7279 17.1365 34.7279 15.836V14.0649C34.7279 12.7514 34.8603 11.6965 35.1258 10.9004C35.3912 10.1045 35.8056 9.52419 36.3697 9.15917C36.9334 8.79449 37.6732 8.61196 38.5886 8.61196C39.4908 8.61196 40.2139 8.79778 40.7581 9.16909C41.3019 9.54066 41.6997 10.1212 41.9521 10.9104C42.2041 11.6999 42.3303 12.7514 42.3303 14.0649V15.836C42.3303 17.1365 42.2075 18.1815 41.962 18.9706C41.7165 19.7602 41.3184 20.3373 40.768 20.7021C40.2171 21.0669 39.4709 21.2494 38.5291 21.2494C37.5605 21.2494 36.8007 21.0636 36.2504 20.692Z" fill="white"/>
|
||||
<path d="M78.8683 10.7304C78.7291 10.903 78.6361 11.1849 78.5898 11.5763C78.5431 11.9678 78.5202 12.5613 78.5202 13.3575V14.2332H80.5303V13.3575C80.5303 12.5748 80.5035 11.9811 80.4508 11.5763C80.3976 11.1717 80.3017 10.8865 80.162 10.7205C80.0227 10.5547 79.8069 10.4717 79.5151 10.4717C79.2233 10.4717 79.0078 10.5582 78.8683 10.7304ZM78.5202 15.8651V16.482C78.5202 17.2651 78.5431 17.8522 78.5898 18.2435C78.6361 18.6349 78.7321 18.92 78.8786 19.0993C79.0243 19.2784 79.2497 19.3678 79.555 19.3678C79.9661 19.3678 80.2481 19.2086 80.4009 18.8903C80.5532 18.5718 80.6363 18.0413 80.6496 17.2979L83.0179 17.4373C83.0312 17.5438 83.0378 17.6897 83.0378 17.8753C83.0378 19.0031 82.7293 19.8454 82.1125 20.4028C81.4954 20.9599 80.623 21.2386 79.4952 21.2386C78.142 21.2386 77.1931 20.8141 76.6491 19.9649C76.1052 19.116 75.8333 17.8026 75.8333 16.0244V13.8948C75.8333 12.0639 76.1152 10.7273 76.6791 9.88457C77.243 9.04213 78.2085 8.62074 79.5749 8.62074C80.517 8.62074 81.2398 8.79341 81.7442 9.1383C82.2483 9.48349 82.6031 10.0208 82.809 10.7502C83.0145 11.4801 83.1178 12.4887 83.1178 13.7754V15.8651H78.5202Z" fill="white"/>
|
||||
<path d="M29.5625 15.6366L26.4379 4.35238H29.1644L30.259 9.4671C30.5378 10.7277 30.7432 11.8024 30.8761 12.6912H30.9556C31.0483 12.0543 31.254 10.9865 31.5726 9.48705L32.7071 4.35238H35.4336L32.2691 15.6366V21.0503H29.5625V15.6366Z" fill="white"/>
|
||||
<path d="M51.1979 8.85064V21.0502H49.0483L48.8095 19.5576H48.7501C48.1658 20.6856 47.2902 21.2493 46.1228 21.2493C45.3136 21.2493 44.7162 20.984 44.3319 20.4532C43.9469 19.9226 43.7545 19.0935 43.7545 17.9655V8.85064H46.5009V17.8065C46.5009 18.3505 46.5607 18.7385 46.6803 18.9707C46.7996 19.2028 46.9984 19.319 47.2772 19.319C47.5161 19.319 47.7449 19.246 47.9638 19.0999C48.1828 18.9541 48.345 18.7685 48.4515 18.5425V8.85064H51.1979Z" fill="white"/>
|
||||
<path d="M65.2854 8.85064V21.0502H63.1358L62.8969 19.5576H62.8376C62.2533 20.6856 61.3777 21.2493 60.2103 21.2493C59.4011 21.2493 58.8037 20.984 58.4194 20.4532C58.0344 19.9226 57.842 19.0935 57.842 17.9655V8.85064H60.5884V17.8065C60.5884 18.3505 60.6482 18.7385 60.7675 18.9707C60.8871 19.2028 61.0859 19.319 61.3646 19.319C61.6035 19.319 61.8323 19.246 62.0513 19.0999C62.2703 18.9541 62.4324 18.7685 62.5389 18.5425V8.85064H65.2854Z" fill="white"/>
|
||||
<path d="M58.6608 6.56181H55.9343V21.0501H53.2476V6.56181H50.5211V4.35272H58.6608V6.56181Z" fill="white"/>
|
||||
<path d="M71.8573 15.7769C71.8573 16.6661 71.8207 17.3626 71.7478 17.8665C71.675 18.371 71.552 18.7293 71.3795 18.9413C71.2073 19.1538 70.9748 19.2598 70.683 19.2598C70.4574 19.2598 70.2485 19.2068 70.0564 19.1006C69.8637 18.9943 69.7082 18.8353 69.5887 18.6228V11.697C69.6812 11.3656 69.8406 11.0935 70.0662 10.8811C70.2916 10.669 70.5371 10.5627 70.8026 10.5627C71.0813 10.5627 71.2966 10.6722 71.4494 10.891C71.6017 11.1098 71.708 11.4782 71.7678 11.9956C71.8275 12.513 71.8573 13.2494 71.8573 14.2047V15.7769ZM74.3752 10.8006C74.2089 10.0315 73.9402 9.47416 73.569 9.12899C73.1974 8.7841 72.6865 8.61159 72.0367 8.61159C71.5321 8.61159 71.0614 8.7543 70.6235 9.03944C70.1858 9.32485 69.8472 9.69963 69.6086 10.164H69.5882L69.5887 3.73559H66.9416V21.0501H69.2105L69.4892 19.8957H69.5488C69.7609 20.3073 70.0793 20.632 70.5039 20.8709C70.9285 21.1098 71.3995 21.2292 71.9171 21.2292C72.8456 21.2292 73.5291 20.8014 73.9668 19.9456C74.4047 19.0899 74.6239 17.7533 74.6239 15.9353V14.0049C74.6239 12.6386 74.5406 11.5705 74.3752 10.8006Z" fill="white"/>
|
||||
<path d="M12.0901 24.6219C18.7674 24.6219 24.1803 19.209 24.1803 12.5318C24.1803 5.85459 18.7674 0.441692 12.0901 0.441692C5.41292 0.441692 0 5.85459 0 12.5318C0 19.209 5.41292 24.6219 12.0901 24.6219Z" fill="#ED1D24"/>
|
||||
<path d="M12.0901 5.18941C8.03538 5.18941 4.74754 8.47706 4.74754 12.5318C4.74754 16.5865 8.03538 19.8743 12.0901 19.8743C16.1448 19.8743 19.4326 16.5865 19.4326 12.5318C19.4326 8.47706 16.1448 5.18941 12.0901 5.18941ZM12.0901 6.16527C15.6009 6.16527 18.4567 9.02104 18.4567 12.5318C18.4567 16.0425 15.6009 18.8984 12.0901 18.8984C8.57936 18.8984 5.72349 16.0425 5.72349 12.5318C5.72349 9.02104 8.57936 6.16527 12.0901 6.16527Z" fill="white"/>
|
||||
<path d="M9.75453 16.1039L15.9369 12.5318L9.75453 8.95969V16.1039Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_22_225">
|
||||
<rect width="130" height="24.18" fill="white" transform="translate(0 0.442017)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 7.5 KiB |
@@ -0,0 +1,36 @@
|
||||
.aurora-preview-page {
|
||||
min-height: 100vh;
|
||||
padding: 32px;
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(28, 117, 219, 0.16), transparent 30%),
|
||||
radial-gradient(circle at top right, rgba(237, 41, 122, 0.14), transparent 30%),
|
||||
var(--black-color);
|
||||
color: var(--white-color);
|
||||
}
|
||||
|
||||
.aurora-preview-shell {
|
||||
width: min(1_440px, 100%);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.aurora-preview-header {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.aurora-preview-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.aurora-preview-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.aurora-preview-widget {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
import { fileURLToPath } from 'node:url'
|
||||
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
const AURORA_PREVIEW_DEV_SERVER_PORT = 5_175
|
||||
|
||||
export default defineConfig({
|
||||
root: fileURLToPath(new URL('.', import.meta.url)),
|
||||
resolve: {
|
||||
alias: [
|
||||
{
|
||||
find: '@aurora/style.css',
|
||||
replacement: fileURLToPath(new URL('../style.css', import.meta.url))
|
||||
},
|
||||
{
|
||||
find: '@aurora',
|
||||
replacement: fileURLToPath(new URL('../src/index.ts', import.meta.url))
|
||||
}
|
||||
]
|
||||
},
|
||||
server: {
|
||||
port: AURORA_PREVIEW_DEV_SERVER_PORT
|
||||
},
|
||||
plugins: [react()]
|
||||
})
|
||||
@@ -0,0 +1,61 @@
|
||||
@use '../../styles/main.sass' as *
|
||||
|
||||
.aurora-button
|
||||
position: relative
|
||||
display: inline-block
|
||||
font-size: var(--a-font-size-md)
|
||||
line-height: var(--a-line-height-md)
|
||||
font-weight: var(--a-font-weight-semi-bold)
|
||||
border-radius: var(--a-border-radius-md)
|
||||
height: var(--a-button-size-md)
|
||||
border: none
|
||||
cursor: pointer
|
||||
padding: 0 var(--a-space-lg)
|
||||
box-shadow: 0 0 10px 2px transparent
|
||||
transition: opacity var(--a-transition-duration-main) var(--a-transition-timing-main), transform var(--a-transition-duration-main), background-color var(--a-transition-duration-main) var(--a-transition-timing-main), border-color var(--a-transition-duration-main) var(--a-transition-timing-main), color var(--a-transition-duration-main) var(--a-transition-timing-main), box-shadow var(--a-transition-duration-main) var(--a-transition-timing-main)
|
||||
&:hover:not(&--disabled, &--loading)
|
||||
transform: scale3d(1.01, 1.01, 1.01)
|
||||
&:active:not(&--disabled, &--loading)
|
||||
transform: scale3d(.96, .96, .96)
|
||||
|
||||
&--primary
|
||||
color: var(--a-color-text)
|
||||
background-color: var(--a-color-accent)
|
||||
&:hover:not(.aurora-button--disabled, .aurora-button--loading)
|
||||
background-color: var(--a-color-accent-hover)
|
||||
|
||||
&--secondary
|
||||
background-color: transparent
|
||||
color: var(--a-color-accent)
|
||||
border: 1px solid var(--a-color-accent)
|
||||
&:hover:not(.aurora-button--disabled, .aurora-button--loading), &:hover:not(.aurora-button--disabled, .aurora-button--loading) .aurora-icon
|
||||
border-color: var(--a-color-accent-hover)
|
||||
color: var(--a-color-accent-hover)
|
||||
.aurora-icon
|
||||
color: var(--a-color-accent)
|
||||
|
||||
&--danger
|
||||
background-color: var(--a-color-background-danger)
|
||||
color: var(--a-color-text-danger)
|
||||
&:hover:not(.aurora-button--disabled, .aurora-button--loading)
|
||||
background-color: var(--a-color-danger-hover)
|
||||
|
||||
&--light
|
||||
background-color: transparent
|
||||
color: var(--a-color-accent)
|
||||
&:hover:not(.aurora-button--disabled, .aurora-button--loading), &:hover:not(.aurora-button--disabled, .aurora-button--loading) .aurora-icon
|
||||
color: var(--a-color-accent-hover)
|
||||
.aurora-icon
|
||||
color: var(--a-color-accent)
|
||||
|
||||
&--disabled
|
||||
opacity: var(--a-opacity-disabled)
|
||||
cursor: not-allowed
|
||||
|
||||
&--loading
|
||||
opacity: var(--a-opacity-disabled)
|
||||
cursor: wait
|
||||
|
||||
.aurora-loader
|
||||
&::before, &::after
|
||||
background-color: var(--a-color-white)
|
||||
@@ -0,0 +1,114 @@
|
||||
import classNames from 'clsx'
|
||||
|
||||
import { generateKeyId } from '../../lib/utils'
|
||||
import { Flexbox, Icon, Loader } from '../..'
|
||||
|
||||
import './button.sass'
|
||||
|
||||
interface ButtonOnClickData {
|
||||
name: string | undefined
|
||||
value: string | number | undefined
|
||||
}
|
||||
|
||||
export interface ButtonProps {
|
||||
/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
|
||||
children?: any
|
||||
// children?: React.ReactNode
|
||||
type?: 'button' | 'submit'
|
||||
iconName?: string
|
||||
iconPosition?: 'left' | 'right'
|
||||
secondary?: boolean
|
||||
danger?: boolean
|
||||
light?: boolean
|
||||
disabled?: boolean
|
||||
loading?: boolean
|
||||
name?: string
|
||||
value?: string | number | undefined
|
||||
onClick?: (data: ButtonOnClickData) => void
|
||||
}
|
||||
|
||||
export function Button({
|
||||
children,
|
||||
type = 'button',
|
||||
iconName,
|
||||
iconPosition = 'left',
|
||||
secondary,
|
||||
danger,
|
||||
light,
|
||||
disabled,
|
||||
loading,
|
||||
name,
|
||||
value,
|
||||
onClick
|
||||
}: ButtonProps) {
|
||||
let variant = 'primary'
|
||||
|
||||
if (secondary) {
|
||||
variant = 'secondary'
|
||||
} else if (danger) {
|
||||
variant = 'danger'
|
||||
} else if (light) {
|
||||
variant = 'light'
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
key={`aurora-button_${generateKeyId()}`}
|
||||
type={type}
|
||||
name={name}
|
||||
value={value}
|
||||
className={classNames('aurora-button', {
|
||||
'aurora-button--disabled': disabled,
|
||||
'aurora-button--loading': loading,
|
||||
[`aurora-button--${variant}`]: variant
|
||||
})}
|
||||
disabled={disabled || loading}
|
||||
onClick={(event) => {
|
||||
if (type !== 'button') {
|
||||
return
|
||||
}
|
||||
|
||||
event.preventDefault()
|
||||
|
||||
const data = {
|
||||
name,
|
||||
value
|
||||
}
|
||||
|
||||
if (onClick) {
|
||||
onClick(data)
|
||||
}
|
||||
}}
|
||||
>
|
||||
{loading ? (
|
||||
<Loader />
|
||||
) : (
|
||||
<>
|
||||
{iconName && iconPosition === 'left' && (
|
||||
<Flexbox
|
||||
flexDirection="row"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
gap="xs"
|
||||
>
|
||||
<Icon iconName={iconName} type="line" />
|
||||
{children}
|
||||
</Flexbox>
|
||||
)}
|
||||
{iconName && iconPosition === 'right' && (
|
||||
<Flexbox
|
||||
flexDirection="row"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
gap="xs"
|
||||
>
|
||||
{children}
|
||||
<Icon iconName={iconName} type="line" />
|
||||
</Flexbox>
|
||||
)}
|
||||
{!iconName && children}
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export * from './button'
|
||||
@@ -0,0 +1,12 @@
|
||||
@use '../../styles/main.sass' as *
|
||||
|
||||
.aurora-card
|
||||
position: relative
|
||||
display: inline-block
|
||||
width: auto
|
||||
padding: var(--a-space-md)
|
||||
background-color: var(--a-color-background-surface-secondary)
|
||||
border-radius: var(--a-border-radius-md)
|
||||
|
||||
&--full-width
|
||||
width: 100%
|
||||
@@ -0,0 +1,25 @@
|
||||
import classNames from 'clsx'
|
||||
|
||||
import { generateKeyId } from '../../lib/utils'
|
||||
|
||||
import './card.sass'
|
||||
|
||||
export interface CardProps {
|
||||
/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
|
||||
children: any
|
||||
// children: React.ReactNode
|
||||
fullWidth?: boolean
|
||||
}
|
||||
|
||||
export function Card({ children, fullWidth }: CardProps) {
|
||||
return (
|
||||
<div
|
||||
key={`aurora-card_${generateKeyId()}`}
|
||||
className={classNames('aurora-card', {
|
||||
'aurora-card--full-width': fullWidth
|
||||
})}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export * from './card'
|
||||
@@ -0,0 +1,39 @@
|
||||
@use '../../styles/main.sass' as *
|
||||
|
||||
.aurora-checkbox
|
||||
display: flex
|
||||
align-items: center
|
||||
gap: var(--a-space-sm)
|
||||
cursor: pointer
|
||||
&[data-disabled]
|
||||
cursor: not-allowed
|
||||
|
||||
.aurora-checkbox-placeholder
|
||||
width: var(--a-checkbox-radio-size)
|
||||
height: var(--a-checkbox-radio-size)
|
||||
|
||||
.aurora-checkbox-control
|
||||
display: flex
|
||||
justify-content: center
|
||||
align-items: center
|
||||
width: var(--a-checkbox-radio-size)
|
||||
height: var(--a-checkbox-radio-size)
|
||||
border-radius: var(--a-border-radius-xs)
|
||||
border: 1px solid var(--a-color-input-border)
|
||||
background-color: var(--a-color-input-background)
|
||||
transition: background-color var(--a-transition-duration-main) var(--a-transition-timing-main), border-color var(--a-transition-duration-main) var(--a-transition-timing-main)
|
||||
|
||||
&[data-hover]:not([data-state="checked"])
|
||||
border-color: var(--a-color-input-border-hover)
|
||||
background-color: var(--a-color-input-background-hover)
|
||||
&[data-state="checked"]
|
||||
border-color: transparent
|
||||
background-color: var(--a-color-input-border-focus)
|
||||
&[data-disabled]
|
||||
opacity: var(--a-opacity-disabled)
|
||||
|
||||
.aurora-checkbox-label
|
||||
color: var(--a-color-text)
|
||||
font-size: var(--a-font-size-md)
|
||||
&[data-disabled]
|
||||
opacity: var(--a-opacity-disabled)
|
||||
@@ -0,0 +1,74 @@
|
||||
import { useState } from 'react'
|
||||
import {
|
||||
Checkbox as ArkCheckbox,
|
||||
type CheckboxCheckedChangeDetails,
|
||||
type CheckboxRootProps as ArkCheckboxProps
|
||||
} from '@ark-ui/react/checkbox'
|
||||
|
||||
import { Icon } from '../icon'
|
||||
|
||||
import './checkbox.sass'
|
||||
|
||||
interface CheckboxOnChangeData {
|
||||
name: string
|
||||
value: string | undefined
|
||||
isChecked: boolean
|
||||
}
|
||||
|
||||
export interface CheckboxProps
|
||||
extends Pick<
|
||||
ArkCheckboxProps,
|
||||
'value' | 'checked' | 'disabled' | 'required'
|
||||
> {
|
||||
name: string
|
||||
label?: string
|
||||
onChange?: (data: CheckboxOnChangeData) => void
|
||||
}
|
||||
|
||||
export function Checkbox({
|
||||
name,
|
||||
label,
|
||||
checked,
|
||||
value,
|
||||
disabled,
|
||||
required,
|
||||
onChange
|
||||
}: CheckboxProps) {
|
||||
const [isChecked, setIsChecked] = useState(checked)
|
||||
|
||||
return (
|
||||
<ArkCheckbox.Root
|
||||
className="aurora-checkbox"
|
||||
name={name}
|
||||
value={value}
|
||||
checked={isChecked}
|
||||
disabled={disabled}
|
||||
required={required}
|
||||
onCheckedChange={(event: CheckboxCheckedChangeDetails) => {
|
||||
setIsChecked(event.checked as boolean)
|
||||
|
||||
const data = {
|
||||
name,
|
||||
value,
|
||||
isChecked: !!event.checked
|
||||
}
|
||||
|
||||
if (onChange) {
|
||||
onChange(data)
|
||||
}
|
||||
}}
|
||||
>
|
||||
<ArkCheckbox.HiddenInput />
|
||||
<ArkCheckbox.Control className="aurora-checkbox-control">
|
||||
{isChecked ? (
|
||||
<Icon iconName="check" size="sm" animated />
|
||||
) : (
|
||||
<div className="aurora-checkbox-placeholder" />
|
||||
)}
|
||||
</ArkCheckbox.Control>
|
||||
<ArkCheckbox.Label className="aurora-checkbox-label">
|
||||
{label}
|
||||
</ArkCheckbox.Label>
|
||||
</ArkCheckbox.Root>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export * from './checkbox'
|
||||
@@ -0,0 +1,28 @@
|
||||
.aurora-circular-progress
|
||||
position: relative
|
||||
|
||||
&--sm
|
||||
width: 64px
|
||||
height: 64px
|
||||
&--md
|
||||
width: 128px
|
||||
height: 128px
|
||||
&--lg
|
||||
width: 256px
|
||||
height: 256px
|
||||
|
||||
path
|
||||
transition: stroke-dashoffset var(--a-transition-duration-main) var(--a-transition-timing-main)
|
||||
&:nth-child(1)
|
||||
stroke: var(--a-color-background-surface-secondary)
|
||||
stroke-width: 32px
|
||||
&:nth-child(2)
|
||||
stroke: var(--a-color-accent)
|
||||
stroke-width: 12px
|
||||
stroke-linecap: round
|
||||
|
||||
.aurora-circular-progress-content
|
||||
position: absolute
|
||||
top: 50%
|
||||
left: 50%
|
||||
transform: translate(-50%, -50%)
|
||||
@@ -0,0 +1,41 @@
|
||||
import classNames from 'clsx'
|
||||
|
||||
import { generateKeyId } from '../../lib/utils'
|
||||
|
||||
import './circular-progress.sass'
|
||||
|
||||
export interface CircularProgressProps {
|
||||
value: number
|
||||
/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
|
||||
children?: any
|
||||
// children?: React.ReactNode
|
||||
size?: 'sm' | 'md' | 'lg'
|
||||
}
|
||||
|
||||
export function CircularProgress({
|
||||
value,
|
||||
children,
|
||||
size = 'md'
|
||||
}: CircularProgressProps) {
|
||||
const total = 100
|
||||
|
||||
return (
|
||||
<div
|
||||
key={`aurora-circular-progress_${generateKeyId()}`}
|
||||
className={classNames('aurora-circular-progress', {
|
||||
[`aurora-circular-progress--${size}`]: size
|
||||
})}
|
||||
>
|
||||
<svg viewBox="0 0 276 276" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M138 16C154.021 16 169.886 19.1556 184.687 25.2867C199.489 31.4178 212.938 40.4042 224.267 51.733C235.596 63.0617 244.582 76.5109 250.713 91.3126C256.844 106.114 260 121.979 260 138C260 154.021 256.844 169.886 250.713 184.687C244.582 199.489 235.596 212.938 224.267 224.267C212.938 235.596 199.489 244.582 184.687 250.713C169.886 256.844 154.021 260 138 260C121.979 260 106.114 256.844 91.3126 250.713C76.5109 244.582 63.0617 235.596 51.7329 224.267C40.4042 212.938 31.4177 199.489 25.2867 184.687C19.1556 169.886 16 154.021 16 138C16 121.979 19.1556 106.114 25.2867 91.3126C31.4178 76.5108 40.4043 63.0617 51.733 51.7329C63.0618 40.4042 76.511 31.4177 91.3127 25.2867C106.114 19.1556 121.979 16 138 16L138 16Z" />
|
||||
<path
|
||||
pathLength={total}
|
||||
strokeDasharray={total}
|
||||
strokeDashoffset={total - value}
|
||||
d="M138 16C154.021 16 169.886 19.1556 184.687 25.2867C199.489 31.4178 212.938 40.4042 224.267 51.733C235.596 63.0617 244.582 76.5109 250.713 91.3126C256.844 106.114 260 121.979 260 138C260 154.021 256.844 169.886 250.713 184.687C244.582 199.489 235.596 212.938 224.267 224.267C212.938 235.596 199.489 244.582 184.687 250.713C169.886 256.844 154.021 260 138 260C121.979 260 106.114 256.844 91.3126 250.713C76.5109 244.582 63.0617 235.596 51.7329 224.267C40.4042 212.938 31.4177 199.489 25.2867 184.687C19.1556 169.886 16 154.021 16 138C16 121.979 19.1556 106.114 25.2867 91.3126C31.4178 76.5108 40.4043 63.0617 51.733 51.7329C63.0618 40.4042 76.511 31.4177 91.3127 25.2867C106.114 19.1556 121.979 16 138 16L138 16Z"
|
||||
/>
|
||||
</svg>
|
||||
<div className="aurora-circular-progress-content">{children}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export * from './circular-progress'
|
||||
@@ -0,0 +1,92 @@
|
||||
@use '../../styles/main.sass' as *
|
||||
|
||||
.aurora-flexbox
|
||||
position: relative
|
||||
display: flex
|
||||
flex-direction: column
|
||||
height: 100%
|
||||
|
||||
&--padding
|
||||
padding: var(--a-space-xl) var(--a-space-md)
|
||||
&--padding-x
|
||||
padding-left: var(--a-space-md)
|
||||
padding-right: var(--a-space-md)
|
||||
&--padding-y
|
||||
padding-top: var(--a-space-xl)
|
||||
padding-bottom: var(--a-space-xl)
|
||||
|
||||
&--full-width
|
||||
width: 100%
|
||||
|
||||
&--flex
|
||||
display: flex
|
||||
&--inline-flex
|
||||
display: inline-flex
|
||||
|
||||
&--row
|
||||
flex-direction: row
|
||||
&--row-reverse
|
||||
flex-direction: row-reverse
|
||||
&--column
|
||||
flex-direction: column
|
||||
&--column-reverse
|
||||
flex-direction: column-reverse
|
||||
|
||||
&--align-flex-start
|
||||
align-items: flex-start
|
||||
&--align-center
|
||||
align-items: center
|
||||
&--align-flex-end
|
||||
align-items: flex-end
|
||||
&--align-stretch
|
||||
align-items: stretch
|
||||
&--align-baseline
|
||||
align-items: baseline
|
||||
|
||||
&--justify-flex-start
|
||||
justify-content: flex-start
|
||||
&--justify-center
|
||||
justify-content: center
|
||||
&--justify-flex-end
|
||||
justify-content: flex-end
|
||||
&--justify-space-between
|
||||
justify-content: space-between
|
||||
&--justify-space-around
|
||||
justify-content: space-around
|
||||
&--justify-space-evenly
|
||||
justify-content: space-evenly
|
||||
&--justify-stretch
|
||||
justify-content: stretch
|
||||
|
||||
&--gap-xs
|
||||
gap: var(--a-space-xs)
|
||||
&--gap-sm
|
||||
gap: var(--a-space-sm)
|
||||
&--gap-md
|
||||
gap: var(--a-space-md)
|
||||
&--gap-lg
|
||||
gap: var(--a-space-lg)
|
||||
&--gap-xl
|
||||
gap: var(--a-space-xl)
|
||||
|
||||
&--row-gap-xs
|
||||
row-gap: var(--a-space-xs)
|
||||
&--row-gap-sm
|
||||
row-gap: var(--a-space-sm)
|
||||
&--row-gap-md
|
||||
row-gap: var(--a-space-md)
|
||||
&--row-gap-lg
|
||||
row-gap: var(--a-space-lg)
|
||||
&--row-gap-xl
|
||||
row-gap: var(--a-space-xl)
|
||||
|
||||
&--column-gap-xs
|
||||
column-gap: var(--a-space-xs)
|
||||
&--column-gap-sm
|
||||
column-gap: var(--a-space-sm)
|
||||
&--column-gap-md
|
||||
column-gap: var(--a-space-md)
|
||||
&--column-gap-lg
|
||||
column-gap: var(--a-space-lg)
|
||||
&--column-gap-xl
|
||||
column-gap: var(--a-space-xl)
|
||||
@@ -0,0 +1,66 @@
|
||||
import classNames from 'clsx'
|
||||
|
||||
import { type Size } from '../../lib/types'
|
||||
import { generateKeyId } from '../../lib/utils'
|
||||
|
||||
import './flexbox.sass'
|
||||
|
||||
export interface FlexboxProps {
|
||||
/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
|
||||
children: any
|
||||
// children: React.ReactNode
|
||||
fullWidth?: boolean
|
||||
display?: 'flex' | 'inline-flex'
|
||||
alignItems?: 'center' | 'flex-start' | 'flex-end' | 'baseline' | 'stretch'
|
||||
justifyContent?:
|
||||
| 'center'
|
||||
| 'flex-start'
|
||||
| 'flex-end'
|
||||
| 'space-between'
|
||||
| 'space-around'
|
||||
| 'space-evenly'
|
||||
| 'stretch'
|
||||
flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse'
|
||||
gap?: Size
|
||||
rowGap?: Size
|
||||
columnGap?: Size
|
||||
padding?: boolean
|
||||
paddingX?: boolean
|
||||
paddingY?: boolean
|
||||
}
|
||||
|
||||
export function Flexbox({
|
||||
children,
|
||||
fullWidth,
|
||||
display,
|
||||
alignItems,
|
||||
justifyContent,
|
||||
flexDirection,
|
||||
gap,
|
||||
rowGap,
|
||||
columnGap,
|
||||
padding,
|
||||
paddingX,
|
||||
paddingY
|
||||
}: FlexboxProps) {
|
||||
return (
|
||||
<div
|
||||
key={`aurora-flexbox_${generateKeyId()}`}
|
||||
className={classNames('aurora-flexbox', {
|
||||
'aurora-flexbox--full-width': fullWidth,
|
||||
'aurora-flexbox--padding': padding,
|
||||
'aurora-flexbox--padding-x': paddingX,
|
||||
'aurora-flexbox--padding-y': paddingY,
|
||||
[`aurora-flexbox--${display}`]: display,
|
||||
[`aurora-flexbox--align-${alignItems}`]: alignItems,
|
||||
[`aurora-flexbox--justify-${justifyContent}`]: justifyContent,
|
||||
[`aurora-flexbox--${flexDirection}`]: flexDirection,
|
||||
[`aurora-flexbox--gap-${gap}`]: gap,
|
||||
[`aurora-flexbox--row-gap-${rowGap}`]: rowGap,
|
||||
[`aurora-flexbox--column-gap-${columnGap}`]: columnGap
|
||||
})}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export * from './flexbox'
|
||||
@@ -0,0 +1,4 @@
|
||||
@use '../../styles/main.sass' as *
|
||||
|
||||
.aurora-form
|
||||
position: relative
|
||||
@@ -0,0 +1,51 @@
|
||||
import { generateKeyId } from '../../lib/utils'
|
||||
|
||||
import './form.sass'
|
||||
|
||||
export interface FormProps {
|
||||
/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
|
||||
children?: any
|
||||
// children?: React.ReactNode
|
||||
onSubmit: (data: Record<string, unknown>) => void
|
||||
}
|
||||
|
||||
export function Form({ children, onSubmit }: FormProps) {
|
||||
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault()
|
||||
|
||||
const form = event.currentTarget
|
||||
const formData = new FormData(form)
|
||||
const data: Record<string, unknown> = {}
|
||||
|
||||
for (const [key, value] of formData.entries()) {
|
||||
if (data[key] && key.endsWith('[]')) {
|
||||
if (Array.isArray(data[key])) {
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-expect-error
|
||||
;(data[key] as []).push(value)
|
||||
} else {
|
||||
data[key] = [data[key], value]
|
||||
}
|
||||
} else {
|
||||
if (key.endsWith('[]')) {
|
||||
data[key] = [value]
|
||||
} else {
|
||||
data[key] = value
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onSubmit(data)
|
||||
}
|
||||
|
||||
return (
|
||||
<form
|
||||
autoComplete="off"
|
||||
className="aurora-form"
|
||||
onSubmit={handleSubmit}
|
||||
key={`aurora-form_${generateKeyId()}`}
|
||||
>
|
||||
{children}
|
||||
</form>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export * from './form'
|
||||
@@ -0,0 +1,70 @@
|
||||
@use '../../styles/main.sass' as *
|
||||
|
||||
.aurora-icon-button
|
||||
position: relative
|
||||
width: var(--a-button-size-md)
|
||||
height: var(--a-button-size-md)
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: center
|
||||
padding: 0
|
||||
text-align: center
|
||||
&.aurora-button:hover:not(.aurora-button--disabled, .aurora-button--loading)
|
||||
transform: scale3d(1.03, 1.03, 1.03)
|
||||
&.aurora-button:active:not(.aurora-button--disabled, .aurora-button--loading)
|
||||
transform: scale3d(.96, .96, .96)
|
||||
&.aurora-button.aurora-button--light:hover:not(.aurora-button--disabled, .aurora-button--loading)
|
||||
transform: scale3d(1.06, 1.06, 1.06)
|
||||
&.aurora-button.aurora-button--light:active:not(.aurora-button--disabled, .aurora-button--loading)
|
||||
transform: scale3d(.96, .96, .96)
|
||||
|
||||
&--square
|
||||
width: var(--a-button-size-md)
|
||||
height: var(--a-button-size-md)
|
||||
border-radius: var(--a-border-radius-md)
|
||||
&--circle
|
||||
width: var(--a-button-size-md)
|
||||
height: var(--a-button-size-md)
|
||||
border-radius: 50%
|
||||
|
||||
&--xs
|
||||
width: 22px
|
||||
height: 22px
|
||||
&--sm
|
||||
width: 30px
|
||||
height: 30px
|
||||
&--md
|
||||
width: var(--a-button-size-md)
|
||||
height: var(--a-button-size-md)
|
||||
&--lg
|
||||
width: 56px
|
||||
height: 56px
|
||||
&--xl
|
||||
width: 96px
|
||||
height: 96px
|
||||
&--xxl
|
||||
width: 164px
|
||||
height: 164px
|
||||
|
||||
&.aurora-button--light .aurora-icon
|
||||
color: var(--a-color-text)
|
||||
|
||||
&.aurora-button--secondary:hover, &.aurora-button--light:hover
|
||||
background-color: transparent
|
||||
|
||||
|
||||
&.aurora-button--light:hover .aurora-icon
|
||||
color: var(--a-color-text)
|
||||
|
||||
&.aurora-button--light.aurora-button--secondary
|
||||
background-color: transparent
|
||||
border: none
|
||||
.aurora-icon
|
||||
color: var(--a-color-white-secondary)
|
||||
&:hover:not(.aurora-button--disabled, .aurora-button--loading) .aurora-icon
|
||||
color: var(--a-color-text)
|
||||
&:hover.aurora-icon-button--activated .aurora-icon
|
||||
color: var(--a-color-accent)
|
||||
|
||||
&.aurora-button--light.aurora-icon-button--activated .aurora-icon
|
||||
color: var(--a-color-accent)
|
||||
@@ -0,0 +1,113 @@
|
||||
import { useState } from 'react'
|
||||
import classNames from 'clsx'
|
||||
|
||||
import { Icon, Loader } from '../..'
|
||||
import { type IconProps } from '../icon'
|
||||
import { generateKeyId } from '../../lib/utils'
|
||||
|
||||
import './icon-button.sass'
|
||||
|
||||
interface IconButtonOnClickData {
|
||||
name: string | undefined
|
||||
value: string | number | undefined
|
||||
isActivated: boolean
|
||||
}
|
||||
|
||||
export interface IconButtonProps {
|
||||
iconName: string
|
||||
name?: string
|
||||
value?: string | number | undefined
|
||||
type?: 'button' | 'submit'
|
||||
iconType?: IconProps['type']
|
||||
size?: IconProps['size']
|
||||
shape?: IconProps['bgShape']
|
||||
activated?: boolean
|
||||
secondary?: boolean
|
||||
danger?: boolean
|
||||
light?: boolean
|
||||
disabled?: boolean
|
||||
loading?: boolean
|
||||
onClick?: (data: IconButtonOnClickData) => void
|
||||
}
|
||||
|
||||
export function IconButton({
|
||||
iconName,
|
||||
name,
|
||||
value,
|
||||
type = 'button',
|
||||
iconType = 'line',
|
||||
size,
|
||||
shape,
|
||||
activated,
|
||||
secondary,
|
||||
danger,
|
||||
light,
|
||||
disabled,
|
||||
loading,
|
||||
onClick
|
||||
}: IconButtonProps) {
|
||||
const [isActivated, setIsActivated] = useState(activated || false)
|
||||
|
||||
let variant = 'primary'
|
||||
|
||||
if (danger) {
|
||||
variant = 'danger'
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
key={`aurora-icon-button_${generateKeyId()}`}
|
||||
type={type}
|
||||
name={name}
|
||||
value={value}
|
||||
className={classNames('aurora-icon-button aurora-button', {
|
||||
'aurora-button--secondary': secondary,
|
||||
'aurora-button--light': light,
|
||||
'aurora-button--disabled': disabled,
|
||||
'aurora-button--loading': loading,
|
||||
'aurora-icon-button--activated': isActivated,
|
||||
[`aurora-button--${variant}`]: variant,
|
||||
[`aurora-icon-button--${size}`]: size,
|
||||
[`aurora-icon-button--${shape}`]: shape
|
||||
})}
|
||||
disabled={disabled || loading}
|
||||
onClick={(event) => {
|
||||
if (type !== 'button') {
|
||||
return
|
||||
}
|
||||
|
||||
event.preventDefault()
|
||||
|
||||
if (onClick) {
|
||||
const data = {
|
||||
name,
|
||||
value
|
||||
}
|
||||
|
||||
if (typeof activated === 'undefined') {
|
||||
onClick({
|
||||
...data,
|
||||
isActivated: false
|
||||
})
|
||||
} else {
|
||||
const newActivatedState = !isActivated
|
||||
|
||||
setIsActivated(newActivatedState)
|
||||
onClick({
|
||||
...data,
|
||||
isActivated: newActivatedState
|
||||
})
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
{loading ? (
|
||||
<Loader />
|
||||
) : (
|
||||
<>
|
||||
<Icon type={iconType} iconName={iconName} size={size} />
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export * from './icon-button'
|
||||
@@ -0,0 +1,115 @@
|
||||
@use '../../styles/main.sass' as *
|
||||
|
||||
.aurora-icon
|
||||
position: relative
|
||||
display: inline-flex
|
||||
align-items: center
|
||||
justify-content: center
|
||||
border-radius: var(--a-border-radius-xs)
|
||||
color: var(--a-color-white)
|
||||
font-size: var(--a-font-size-md)
|
||||
background-color: transparent
|
||||
padding: var(--a-space-xs)
|
||||
transition: opacity var(--a-transition-duration-main) var(--a-transition-timing-main), color var(--a-transition-duration-main) var(--a-transition-timing-main), background-color var(--a-transition-duration-main) var(--a-transition-timing-main), transform var(--a-transition-duration-main) var(--a-transition-timing-main)
|
||||
|
||||
&--animated
|
||||
opacity: 0
|
||||
animation: aurora-animation-fade-in var(--a-transition-duration-main) var(--a-transition-timing-main) var(--a-transition-duration-main) forwards
|
||||
|
||||
&--xs
|
||||
width: 12px
|
||||
height: 12px
|
||||
font-size: var(--a-font-size-xs)
|
||||
border-radius: var(--a-border-radius-xs)
|
||||
&--sm
|
||||
width: 20px
|
||||
height: 20px
|
||||
font-size: var(--a-font-size-sm)
|
||||
border-radius: var(--a-border-radius-xs)
|
||||
&--md
|
||||
width: 28px
|
||||
height: 28px
|
||||
font-size: var(--a-font-size-md)
|
||||
border-radius: var(--a-border-radius-xs)
|
||||
&--lg
|
||||
width: 56px
|
||||
height: 56px
|
||||
font-size: var(--a-font-size-lg)
|
||||
border-radius: var(--a-border-radius-md)
|
||||
&--xl
|
||||
width: 96px
|
||||
height: 96px
|
||||
font-size: var(--a-font-size-xl)
|
||||
border-radius: var(--a-border-radius-md)
|
||||
&--xxl
|
||||
width: 128px
|
||||
height: 128px
|
||||
font-size: var(--a-font-size-xxl)
|
||||
border-radius: var(--a-border-radius-md)
|
||||
|
||||
&--square
|
||||
border-radius: var(--a-border-radius-xs)
|
||||
&--circle
|
||||
border-radius: var(--a-border-radius-circle)
|
||||
|
||||
&--white
|
||||
color: var(--a-color-white)
|
||||
&--transparent-white
|
||||
color: var(--a-color-transparent-white)
|
||||
&--black
|
||||
color: var(--a-color-black)
|
||||
&--blue
|
||||
color: var(--a-color-blue)
|
||||
&--secondary-blue
|
||||
color: var(--a-color-secondary-blue)
|
||||
&--transparent-blue
|
||||
color: var(--a-color-transparent-blue)
|
||||
&--red
|
||||
color: var(--a-color-red)
|
||||
&--secondary-red
|
||||
color: var(--a-color-secondary-red)
|
||||
&--transparent-red
|
||||
color: var(--a-color-transparent-red)
|
||||
&--green
|
||||
color: var(--a-color-green)
|
||||
&--secondary-green
|
||||
color: var(--a-color-secondary-green)
|
||||
&--transparent-green
|
||||
color: var(--a-color-transparent-green)
|
||||
&--yellow
|
||||
color: var(--a-color-yellow)
|
||||
&--secondary-yellow
|
||||
color: var(--a-color-secondary-yellow)
|
||||
&--transparent-yellow
|
||||
color: var(--a-color-transparent-yellow)
|
||||
|
||||
&--bg-white
|
||||
background-color: var(--a-color-white)
|
||||
&--bg-transparent-white
|
||||
background-color: var(--a-color-transparent-white)
|
||||
&--bg-black
|
||||
background-color: var(--a-color-black)
|
||||
&--bg-blue
|
||||
background-color: var(--a-color-blue)
|
||||
&--bg-secondary-blue
|
||||
background-color: var(--a-color-secondary-blue)
|
||||
&--bg-transparent-blue
|
||||
background-color: var(--a-color-transparent-blue)
|
||||
&--bg-red
|
||||
background-color: var(--a-color-red)
|
||||
&--bg-secondary-red
|
||||
background-color: var(--a-color-secondary-red)
|
||||
&--bg-transparent-red
|
||||
background-color: var(--a-color-transparent-red)
|
||||
&--bg-green
|
||||
background-color: var(--a-color-green)
|
||||
&--bg-secondary-green
|
||||
background-color: var(--a-color-secondary-green)
|
||||
&--bg-transparent-green
|
||||
background-color: var(--a-color-transparent-green)
|
||||
&--bg-yellow
|
||||
background-color: var(--a-color-yellow)
|
||||
&--bg-secondary-yellow
|
||||
background-color: var(--a-color-secondary-yellow)
|
||||
&--bg-transparent-yellow
|
||||
background-color: var(--a-color-transparent-yellow)
|
||||
@@ -0,0 +1,75 @@
|
||||
import classNames from 'clsx'
|
||||
|
||||
import type { Color, Size, IconType } from '../../lib/types'
|
||||
import { generateKeyId } from '../../lib/utils'
|
||||
|
||||
import './icon.sass'
|
||||
|
||||
export interface IconProps {
|
||||
iconName?: string
|
||||
/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
|
||||
svg?: any
|
||||
// svg?: React.ReactNode
|
||||
type?: IconType
|
||||
color?: Color
|
||||
size?: Size | 'xxl'
|
||||
bgShape?: 'square' | 'circle'
|
||||
bgColor?: Color
|
||||
animated?: boolean
|
||||
}
|
||||
|
||||
const REMIX_SIZE_MAPPING = {
|
||||
xs: 'xs',
|
||||
sm: 'sm',
|
||||
md: '1x',
|
||||
lg: 'lg',
|
||||
xl: 'xl',
|
||||
xxl: '2x'
|
||||
}
|
||||
const REMIX_ICON_TYPE_SUFFIXES = ['-line', '-fill']
|
||||
|
||||
/**
|
||||
* @see https://remixicon.com/
|
||||
*/
|
||||
export function Icon({
|
||||
iconName,
|
||||
svg,
|
||||
type = 'line',
|
||||
color,
|
||||
size = 'md',
|
||||
bgShape,
|
||||
bgColor,
|
||||
animated
|
||||
}: IconProps) {
|
||||
let iconClassName = `ri-${iconName}`
|
||||
const hasExplicitTypeSuffix = REMIX_ICON_TYPE_SUFFIXES.some((suffix) =>
|
||||
iconName?.endsWith(suffix)
|
||||
)
|
||||
|
||||
if (type && type !== 'notype' && !hasExplicitTypeSuffix) {
|
||||
iconClassName = `${iconClassName}-${type}`
|
||||
}
|
||||
|
||||
return (
|
||||
<span
|
||||
key={`aurora-icon_${generateKeyId()}`}
|
||||
className={classNames('aurora-icon', {
|
||||
[`aurora-icon--${size}`]: size,
|
||||
[`aurora-icon--${bgShape}`]: bgShape,
|
||||
[`aurora-icon--bg-${bgColor}`]: bgColor,
|
||||
[`aurora-icon--${color}`]: color,
|
||||
'aurora-icon--animated': animated
|
||||
})}
|
||||
>
|
||||
{svg ? (
|
||||
svg
|
||||
) : (
|
||||
<i
|
||||
className={classNames(iconClassName, {
|
||||
[`ri-${REMIX_SIZE_MAPPING[size]}`]: size
|
||||
})}
|
||||
/>
|
||||
)}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export * from './icon'
|
||||
@@ -0,0 +1,76 @@
|
||||
@use '../../styles/main.sass' as *
|
||||
|
||||
.aurora-image
|
||||
position: relative
|
||||
border-radius: var(--a-border-radius-md)
|
||||
background-repeat: no-repeat
|
||||
background-size: cover
|
||||
background-position: center center
|
||||
|
||||
&--overlay
|
||||
&::before
|
||||
content: ''
|
||||
position: absolute
|
||||
width: 100%
|
||||
height: 100%
|
||||
background-color: rgba(0, 0, 0, .2)
|
||||
transition: background-color var(--a-transition-duration-main) var(--a-transition-timing-main)
|
||||
&:hover
|
||||
&::before
|
||||
background-color: rgba(0, 0, 0, 0)
|
||||
|
||||
&--gradient
|
||||
&::after
|
||||
content: ''
|
||||
position: absolute
|
||||
top: auto
|
||||
bottom: 0
|
||||
width: 100%
|
||||
height: 64px
|
||||
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--a-color-background-surface))
|
||||
&--gradient-top
|
||||
&::after
|
||||
top: 0
|
||||
bottom: auto
|
||||
background-image: linear-gradient(to top, rgba(0, 0, 0, 0), var(--a-color-background-surface))
|
||||
&--gradient-bottom
|
||||
&::after
|
||||
top: auto
|
||||
bottom: 0
|
||||
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--a-color-background-surface))
|
||||
&--gradient-left
|
||||
&::after
|
||||
left: 0
|
||||
top: 0
|
||||
bottom: 0
|
||||
width: 64px
|
||||
height: 100%
|
||||
background-image: linear-gradient(to left, rgba(0, 0, 0, 0), var(--a-color-background-surface))
|
||||
&--gradient-right
|
||||
&::after
|
||||
right: 0
|
||||
top: 0
|
||||
bottom: 0
|
||||
width: 64px
|
||||
height: 100%
|
||||
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), var(--a-color-background-surface))
|
||||
|
||||
&--cover
|
||||
background-size: cover
|
||||
&--contain
|
||||
background-size: contain
|
||||
|
||||
&--square
|
||||
border-radius: var(--a-border-radius-md)
|
||||
&--circle
|
||||
border-radius: var(--a-border-radius-circle)
|
||||
|
||||
&--blue-border
|
||||
border: 1px solid var(--a-color-blue)
|
||||
&--white-border
|
||||
border: 1px solid var(--a-color-white)
|
||||
|
||||
&--radius-top
|
||||
border-radius: var(--a-border-radius-md) var(--a-border-radius-md) 0 0
|
||||
&--radius-bottom
|
||||
border-radius: 0 0 var(--a-border-radius-md) var(--a-border-radius-md)
|
||||
@@ -0,0 +1,54 @@
|
||||
import classNames from 'clsx'
|
||||
|
||||
import { generateKeyId } from '../../lib/utils'
|
||||
|
||||
import './image.sass'
|
||||
|
||||
export interface ImageProps {
|
||||
src: string
|
||||
width?: number | string
|
||||
height?: number | string
|
||||
shape?: 'circle' | 'square'
|
||||
borderColor?: 'white' | 'blue'
|
||||
backgroundSize?: 'cover' | 'contain'
|
||||
radiusTop?: boolean
|
||||
radiusBottom?: boolean
|
||||
overlay?: boolean
|
||||
gradient?: boolean
|
||||
gradientPosition?: 'top' | 'bottom' | 'left' | 'right'
|
||||
}
|
||||
|
||||
export function Image({
|
||||
src,
|
||||
width,
|
||||
height,
|
||||
shape,
|
||||
borderColor,
|
||||
backgroundSize,
|
||||
radiusTop,
|
||||
radiusBottom,
|
||||
overlay,
|
||||
gradient,
|
||||
gradientPosition
|
||||
}: ImageProps) {
|
||||
return (
|
||||
<div
|
||||
key={`aurora-image_${generateKeyId()}`}
|
||||
className={classNames('aurora-image', {
|
||||
[`aurora-image--${shape}`]: shape,
|
||||
[`aurora-image--${borderColor}-border`]: borderColor,
|
||||
[`aurora-image--${backgroundSize}`]: backgroundSize,
|
||||
[`aurora-image--gradient-${gradientPosition}`]: gradientPosition,
|
||||
'aurora-image--radius-top': radiusTop,
|
||||
'aurora-image--radius-bottom': radiusBottom,
|
||||
'aurora-image--overlay': overlay,
|
||||
'aurora-image--gradient': gradient
|
||||
})}
|
||||
style={{
|
||||
width,
|
||||
height,
|
||||
backgroundImage: `url(${src})`
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export * from './image'
|
||||
@@ -0,0 +1 @@
|
||||
export * from './input'
|
||||
@@ -0,0 +1,87 @@
|
||||
@use '../../styles/main.sass' as *
|
||||
|
||||
.aurora-input-container
|
||||
--a-icon-container-width: calc(var(--a-input-size-md) + var(--a-space-sm))
|
||||
|
||||
position: relative
|
||||
display: flex
|
||||
flex-direction: column
|
||||
|
||||
.aurora-input
|
||||
position: relative
|
||||
display: inline-block
|
||||
color: var(--a-color-text)
|
||||
background-color: var(--a-color-input-background)
|
||||
font-size: var(--a-font-size-md)
|
||||
border: 1px solid var(--a-color-input-border)
|
||||
border-radius: var(--a-border-radius-md)
|
||||
height: var(--a-input-size-md)
|
||||
padding: 0 var(--a-space-md)
|
||||
width: 100%
|
||||
outline: none
|
||||
transition: background-color var(--a-transition-duration-main) var(--a-transition-timing-main), border-color var(--a-transition-duration-main) var(--a-transition-timing-main)
|
||||
&::-webkit-calendar-picker-indicator
|
||||
cursor: pointer
|
||||
background-color: var(--a-color-grey-blue-dark)
|
||||
border-radius: var(--a-border-radius-xs)
|
||||
&:hover
|
||||
border-color: var(--a-color-input-border-hover)
|
||||
background-color: var(--a-color-input-background-hover)
|
||||
&:hover:not([disabled]) ~ .aurora-input-icon-container
|
||||
border-color: var(--a-color-input-border-hover)
|
||||
&:focus
|
||||
border-color: var(--a-color-input-border-focus)
|
||||
background-color: var(--a-color-input-background-hover)
|
||||
&:focus:not([disabled])
|
||||
&~ .aurora-input-icon-container
|
||||
border-color: var(--a-color-input-border-focus)
|
||||
i
|
||||
color: var(--a-color-accent)
|
||||
&:placeholder-shown ~ .aurora-input-icon-container i
|
||||
color: var(--color-secondary-white)
|
||||
|
||||
&--multiline
|
||||
height: calc(var(--a-input-size-md) * 2)
|
||||
padding: var(--a-space-sm) var(--a-space-md)
|
||||
resize: vertical
|
||||
min-height: calc(var(--a-input-size-md) * 2)
|
||||
max-height: 512px
|
||||
&~ .aurora-input-icon-container
|
||||
height: 100%
|
||||
|
||||
&--disabled, &--disabled:hover
|
||||
opacity: var(--a-opacity-disabled)
|
||||
color: inherit
|
||||
background-color: var(--a-color-input-background)
|
||||
border-color: var(--a-color-input-border)
|
||||
cursor: not-allowed
|
||||
&--disabled ~ .aurora-input-icon-container
|
||||
opacity: var(--a-opacity-disabled)
|
||||
i
|
||||
color: inherit
|
||||
opacity: var(--a-opacity-disabled)
|
||||
|
||||
&--with-icon
|
||||
padding-left: calc(var(--a-icon-container-width) + var(--a-space-md))
|
||||
|
||||
.aurora-input-icon-container
|
||||
position: absolute
|
||||
left: 0
|
||||
top: 0
|
||||
bottom: 0
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: center
|
||||
color: var(--a-color-text)
|
||||
pointer-events: none
|
||||
border-right: 1px solid var(--a-color-input-border)
|
||||
width: var(--a-icon-container-width)
|
||||
height: var(--a-input-size-md)
|
||||
transition: background-color var(--a-transition-duration-main) var(--a-transition-timing-main), border-color var(--a-transition-duration-main) var(--a-transition-timing-main)
|
||||
i
|
||||
color: var(--a-color-text)
|
||||
transition: color var(--a-transition-duration-main) var(--a-transition-timing-main)
|
||||
|
||||
.aurora-input-hint-container
|
||||
padding-left: var(--a-space-md)
|
||||
margin-top: var(--a-space-xs)
|
||||
@@ -0,0 +1,167 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import classNames from 'clsx'
|
||||
|
||||
import { Text, Icon } from '../..'
|
||||
import type { IconProps } from '../icon'
|
||||
|
||||
import './input.sass'
|
||||
|
||||
export interface InputProps {
|
||||
name: string
|
||||
placeholder: string
|
||||
required?: boolean
|
||||
value?: string
|
||||
type?:
|
||||
| 'text'
|
||||
| 'password'
|
||||
| 'email'
|
||||
| 'tel'
|
||||
| 'url'
|
||||
| 'number'
|
||||
| 'date'
|
||||
| 'time'
|
||||
| 'datetime-local'
|
||||
| 'month'
|
||||
| 'week'
|
||||
| 'color'
|
||||
iconName?: string
|
||||
iconSVG?: IconProps['svg']
|
||||
iconType?: IconProps['type']
|
||||
iconSize?: IconProps['size']
|
||||
hint?: string
|
||||
disabled?: boolean
|
||||
height?: number | 'auto'
|
||||
minLength?: number
|
||||
maxLength?: number
|
||||
min?: number
|
||||
max?: number
|
||||
step?: number
|
||||
pattern?: string
|
||||
multiline?: boolean
|
||||
autofocus?: boolean
|
||||
onFocus?: () => void
|
||||
onBlur?: () => void
|
||||
onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void
|
||||
inputRef?: React.Ref<HTMLInputElement | HTMLTextAreaElement>
|
||||
onChange?: (value: string) => void
|
||||
}
|
||||
|
||||
export function Input({
|
||||
name,
|
||||
placeholder,
|
||||
required = false,
|
||||
type = 'text',
|
||||
iconName,
|
||||
iconSVG,
|
||||
iconType = 'fill',
|
||||
iconSize = 'md',
|
||||
hint,
|
||||
value,
|
||||
disabled,
|
||||
height = 'auto',
|
||||
minLength,
|
||||
maxLength,
|
||||
pattern,
|
||||
multiline,
|
||||
autofocus,
|
||||
onFocus,
|
||||
onBlur,
|
||||
onKeyDown,
|
||||
inputRef,
|
||||
onChange
|
||||
}: InputProps) {
|
||||
const [inputValue, setInputValue] = useState(value || '')
|
||||
|
||||
useEffect(() => {
|
||||
setInputValue(value || '')
|
||||
}, [value])
|
||||
|
||||
if (!multiline) {
|
||||
if (!maxLength) {
|
||||
maxLength = 64
|
||||
}
|
||||
|
||||
if (height !== 'auto') {
|
||||
height = 'auto'
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="aurora-input-container">
|
||||
{multiline ? (
|
||||
<textarea
|
||||
name={name}
|
||||
placeholder={placeholder}
|
||||
required={required}
|
||||
value={inputValue}
|
||||
disabled={disabled}
|
||||
autoFocus={autofocus}
|
||||
minLength={minLength}
|
||||
maxLength={maxLength}
|
||||
onFocus={onFocus}
|
||||
onBlur={onBlur}
|
||||
onKeyDown={onKeyDown}
|
||||
ref={inputRef as React.Ref<HTMLTextAreaElement>}
|
||||
onChange={(e) => {
|
||||
setInputValue(e.target.value)
|
||||
|
||||
if (onChange) {
|
||||
onChange(e.target.value)
|
||||
}
|
||||
}}
|
||||
style={{ height }}
|
||||
className={classNames('aurora-input', {
|
||||
'aurora-input--multiline': true,
|
||||
'aurora-input--disabled': disabled,
|
||||
'aurora-input--with-icon': !!iconName || !!iconSVG
|
||||
})}
|
||||
/>
|
||||
) : (
|
||||
<input
|
||||
type={type}
|
||||
name={name}
|
||||
placeholder={placeholder}
|
||||
required={required}
|
||||
value={inputValue}
|
||||
disabled={disabled}
|
||||
autoFocus={autofocus}
|
||||
minLength={minLength}
|
||||
maxLength={maxLength}
|
||||
pattern={pattern}
|
||||
onFocus={onFocus}
|
||||
onBlur={onBlur}
|
||||
onKeyDown={onKeyDown}
|
||||
ref={inputRef as React.Ref<HTMLInputElement>}
|
||||
onChange={(e) => {
|
||||
setInputValue(e.target.value)
|
||||
|
||||
if (onChange) {
|
||||
onChange(e.target.value)
|
||||
}
|
||||
}}
|
||||
className={classNames('aurora-input', {
|
||||
'aurora-input--disabled': disabled,
|
||||
'aurora-input--with-icon': !!iconName || !!iconSVG
|
||||
})}
|
||||
/>
|
||||
)}
|
||||
{(iconName || iconSVG) && (
|
||||
<div className="aurora-input-icon-container">
|
||||
<Icon
|
||||
iconName={iconName}
|
||||
svg={iconSVG}
|
||||
type={iconType}
|
||||
size={iconSize}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{hint && (
|
||||
<div className="aurora-input-hint-container">
|
||||
<Text fontSize="xs" tertiary>
|
||||
{hint}
|
||||
</Text>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export * from './link'
|
||||
@@ -0,0 +1,14 @@
|
||||
@use '../../styles/main.sass' as *
|
||||
|
||||
.aurora-link
|
||||
display: inline-block
|
||||
position: relative
|
||||
text-decoration: none
|
||||
transition: color var(--a-transition-duration-main) var(--a-transition-timing-main)
|
||||
&:hover
|
||||
text-decoration: 1px underline var(--a-color-accent)
|
||||
.aurora-text, .aurora-icon
|
||||
color: var(--a-color-accent-hover)
|
||||
|
||||
.aurora-text, .aurora-icon
|
||||
color: var(--a-color-accent)
|
||||
@@ -0,0 +1,28 @@
|
||||
import classNames from 'clsx'
|
||||
|
||||
import { Text } from '../..'
|
||||
import { type Size } from '../../lib/types'
|
||||
import { generateKeyId } from '../../lib/utils'
|
||||
|
||||
import './link.sass'
|
||||
|
||||
export interface LinkProps {
|
||||
href: string
|
||||
/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
|
||||
children: any
|
||||
// children: React.ReactNode
|
||||
fontSize?: Size
|
||||
}
|
||||
|
||||
export function Link({ href, children, fontSize }: LinkProps) {
|
||||
return (
|
||||
<a
|
||||
className={classNames('aurora-link')}
|
||||
href={href}
|
||||
target="_blank"
|
||||
key={`aurora-link_${generateKeyId()}`}
|
||||
>
|
||||
<Text fontSize={fontSize}>{children}</Text>
|
||||
</a>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
export * from './list'
|
||||
export * from './list-header'
|
||||
export * from './list-item'
|
||||
@@ -0,0 +1 @@
|
||||
export * from './list-header'
|
||||
@@ -0,0 +1,24 @@
|
||||
import classNames from 'clsx'
|
||||
|
||||
import { Text } from '../../..'
|
||||
import { generateKeyId } from '../../../lib/utils'
|
||||
|
||||
export interface ListHeaderProps {
|
||||
/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
|
||||
children: any
|
||||
// children: React.ReactNode
|
||||
align?: 'left' | 'center'
|
||||
}
|
||||
|
||||
export function ListHeader({ children, align }: ListHeaderProps) {
|
||||
return (
|
||||
<div
|
||||
key={`aurora-list-header_${generateKeyId()}`}
|
||||
className={classNames('aurora-list-header', {
|
||||
[`aurora-list-header--${align}`]: align
|
||||
})}
|
||||
>
|
||||
<Text fontWeight="semi-bold">{children}</Text>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export * from './list-item'
|
||||
@@ -0,0 +1,75 @@
|
||||
import classNames from 'clsx'
|
||||
|
||||
import { generateKeyId } from '../../../lib/utils'
|
||||
import { Icon } from '../../..'
|
||||
|
||||
interface ListItemOnClickData {
|
||||
name: string | undefined
|
||||
value: string | number | undefined
|
||||
}
|
||||
|
||||
export interface ListItemProps {
|
||||
/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
|
||||
children: any
|
||||
// children: React.ReactNode
|
||||
align?: 'left' | 'center'
|
||||
name?: string
|
||||
value?: string | number | undefined
|
||||
selected?: boolean
|
||||
onClick?: (data: ListItemOnClickData) => void
|
||||
}
|
||||
|
||||
export function ListItem({
|
||||
children,
|
||||
align,
|
||||
name,
|
||||
value,
|
||||
selected,
|
||||
onClick
|
||||
}: ListItemProps) {
|
||||
let isClickable = false
|
||||
|
||||
if (onClick) {
|
||||
isClickable = true
|
||||
}
|
||||
|
||||
return (
|
||||
<li
|
||||
key={`aurora-list-item_${generateKeyId()}`}
|
||||
data-aurora-name={name}
|
||||
value={value}
|
||||
className={classNames('aurora-list-item', {
|
||||
'aurora-list-item--clickable': isClickable,
|
||||
'aurora-list-item--selected': selected,
|
||||
[`aurora-list-item--${align}`]: align
|
||||
})}
|
||||
onClick={(event) => {
|
||||
if (!isClickable) {
|
||||
return
|
||||
}
|
||||
|
||||
event.preventDefault()
|
||||
|
||||
const data = {
|
||||
name,
|
||||
value
|
||||
}
|
||||
|
||||
if (onClick) {
|
||||
onClick(data)
|
||||
}
|
||||
}}
|
||||
>
|
||||
{isClickable ? (
|
||||
<>
|
||||
{children}
|
||||
<div className="aurora-list-item-clickable-icon">
|
||||
<Icon iconName="arrow-right-double" />
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
children
|
||||
)}
|
||||
</li>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export * from './list'
|
||||
@@ -0,0 +1,57 @@
|
||||
@use '../../../styles/main.sass' as *
|
||||
|
||||
.aurora-list
|
||||
position: relative
|
||||
display: flex
|
||||
flex-direction: column
|
||||
.aurora-list-item:last-child
|
||||
border-bottom: none
|
||||
|
||||
.aurora-list-header
|
||||
position: relative
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: flex-start
|
||||
width: 100%
|
||||
text-align: left
|
||||
padding: var(--a-space-lg) var(--a-space-md)
|
||||
border-bottom: 1px solid var(--a-color-separator)
|
||||
|
||||
&--left
|
||||
justify-content: flex-start
|
||||
&--center
|
||||
justify-content: center
|
||||
|
||||
.aurora-list-item
|
||||
position: relative
|
||||
display: flex
|
||||
font-size: var(--a-font-size-md)
|
||||
justify-content: flex-start
|
||||
padding: var(--a-space-md)
|
||||
border-bottom: 1px solid var(--a-color-separator)
|
||||
background-color: transparent
|
||||
transition: background-color var(--a-transition-duration-main) var(--a-transition-timing-main)
|
||||
&:hover
|
||||
background-color: var(--a-color-black)
|
||||
|
||||
&--selected
|
||||
background-color: var(--a-color-black)
|
||||
|
||||
&--left
|
||||
justify-content: flex-start
|
||||
&--center
|
||||
justify-content: center
|
||||
|
||||
&--clickable
|
||||
cursor: pointer
|
||||
&:hover .aurora-list-item-clickable-icon .aurora-icon
|
||||
color: var(--a-color-accent)
|
||||
|
||||
.aurora-list-item-clickable-icon
|
||||
align-self: center
|
||||
position: absolute
|
||||
right: var(--a-space-md)
|
||||
cursor: pointer
|
||||
z-index: 1
|
||||
.aurora-icon
|
||||
color: var(--a-color-grey-blue)
|
||||
@@ -0,0 +1,17 @@
|
||||
import { generateKeyId } from '../../../lib/utils'
|
||||
|
||||
import './list.sass'
|
||||
|
||||
export interface ListProps {
|
||||
/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
|
||||
children: any
|
||||
// children: React.ReactNode
|
||||
}
|
||||
|
||||
export function List({ children }: ListProps) {
|
||||
return (
|
||||
<ul className="aurora-list" key={`aurora-list_${generateKeyId()}`}>
|
||||
{children}
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export * from './loader'
|
||||
@@ -0,0 +1,29 @@
|
||||
@use '../../styles/main.sass' as *
|
||||
|
||||
.aurora-loader
|
||||
width: var(--a-loader-size-md)
|
||||
height: var(--a-loader-size-md)
|
||||
display: inline-block
|
||||
position: relative
|
||||
&::before, &::after
|
||||
content: ''
|
||||
box-sizing: border-box
|
||||
width: var(--a-loader-size-md)
|
||||
height: var(--a-loader-size-md)
|
||||
border-radius: 50%
|
||||
background-color: var(--a-color-accent)
|
||||
position: absolute
|
||||
left: 0
|
||||
top: 0
|
||||
animation: aurora-animation-loader 1s linear infinite
|
||||
&::after
|
||||
opacity: 0
|
||||
animation-delay: .4s
|
||||
|
||||
@keyframes aurora-animation-loader
|
||||
0%
|
||||
transform: scale(0)
|
||||
opacity: 1
|
||||
100%
|
||||
transform: scale(1)
|
||||
opacity: 0
|
||||
@@ -0,0 +1,20 @@
|
||||
import { generateKeyId } from '../../lib/utils'
|
||||
|
||||
import './loader.sass'
|
||||
|
||||
// interface Props {
|
||||
// size?: 'sm' | 'md'
|
||||
// }
|
||||
|
||||
export type LoaderProps = Record<string, never>
|
||||
|
||||
export function Loader(): React.JSX.Element {
|
||||
return (
|
||||
<span className="aurora-loader" key={`aurora-loader_${generateKeyId()}`} />
|
||||
/*<span
|
||||
className={classNames('aurora-loader', {
|
||||
[`aurora-loader--${size}`]: size
|
||||
})}
|
||||
/>*/
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export * from './progress'
|
||||
@@ -0,0 +1,34 @@
|
||||
@use '../../styles/main.sass' as *
|
||||
|
||||
.aurora-progress
|
||||
position: relative
|
||||
display: flex
|
||||
align-items: flex-end
|
||||
border-radius: var(--a-border-radius-pill)
|
||||
background-color: var(--a-color-background-surface-secondary)
|
||||
|
||||
&--horizontal
|
||||
width: 100%
|
||||
&.aurora-progress--sm
|
||||
height: 9px
|
||||
&.aurora-progress--md
|
||||
height: 18px
|
||||
&.aurora-progress--lg
|
||||
height: 24px
|
||||
.aurora-progress-value
|
||||
height: 100%
|
||||
|
||||
&--vertical
|
||||
height: 100%
|
||||
&.aurora-progress--sm
|
||||
width: 9px
|
||||
&.aurora-progress--md
|
||||
width: 18px
|
||||
&.aurora-progress--lg
|
||||
width: 24px
|
||||
.aurora-progress-value
|
||||
width: 100%
|
||||
|
||||
.aurora-progress-value
|
||||
border-radius: var(--a-border-radius-pill)
|
||||
background-color: var(--a-color-accent)
|
||||
@@ -0,0 +1,34 @@
|
||||
import classNames from 'clsx'
|
||||
|
||||
import { generateKeyId } from '../../lib/utils'
|
||||
|
||||
import './progress.sass'
|
||||
|
||||
export interface ProgressProps {
|
||||
value: number
|
||||
orientation?: 'horizontal' | 'vertical'
|
||||
size?: 'sm' | 'md' | 'lg'
|
||||
}
|
||||
|
||||
export function Progress({
|
||||
value,
|
||||
orientation = 'horizontal',
|
||||
size = 'md'
|
||||
}: ProgressProps) {
|
||||
return (
|
||||
<div
|
||||
key={`aurora-progress_${generateKeyId()}`}
|
||||
className={classNames('aurora-progress', {
|
||||
[`aurora-progress--${orientation}`]: orientation,
|
||||
[`aurora-progress--${size}`]: size
|
||||
})}
|
||||
>
|
||||
<div
|
||||
className="aurora-progress-value"
|
||||
style={{
|
||||
[orientation === 'horizontal' ? 'width' : 'height']: `${value}%`
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
export * from './radio'
|
||||
export * from './radio-group'
|
||||
@@ -0,0 +1 @@
|
||||
export * from './radio-group'
|
||||
@@ -0,0 +1,50 @@
|
||||
@use '../../../styles/main.sass' as *
|
||||
|
||||
.aurora-radio-group
|
||||
&[data-disabled]
|
||||
cursor: not-allowed
|
||||
|
||||
.aurora-radio
|
||||
display: flex
|
||||
align-items: center
|
||||
gap: var(--a-space-sm)
|
||||
cursor: pointer
|
||||
&[data-disabled]
|
||||
cursor: not-allowed
|
||||
|
||||
.aurora-radio-control
|
||||
display: flex
|
||||
justify-content: center
|
||||
align-items: center
|
||||
width: var(--a-checkbox-radio-size)
|
||||
height: var(--a-checkbox-radio-size)
|
||||
border-radius: var(--a-border-radius-circle)
|
||||
border: 1px solid var(--a-color-input-border)
|
||||
background-color: var(--a-color-input-background)
|
||||
transition: background-color var(--a-transition-duration-main) var(--a-transition-timing-main), border-color var(--a-transition-duration-main) var(--a-transition-timing-main)
|
||||
&[data-hover]:not([data-state="checked"])
|
||||
border-color: var(--a-color-input-border-hover)
|
||||
background-color: var(--a-color-input-background-hover)
|
||||
&[data-state="checked"]
|
||||
border-color: transparent
|
||||
background-color: var(--a-color-input-border-focus)
|
||||
&::after
|
||||
opacity: 1
|
||||
transform: scale3d(.5, .5, .5)
|
||||
&::after
|
||||
content: ''
|
||||
width: 16px
|
||||
height: 16px
|
||||
border-radius: var(--a-border-radius-circle)
|
||||
background-color: var(--a-color-white)
|
||||
opacity: 0
|
||||
transition: opacity .3s var(--a-transition-timing-main), transform .3s var(--a-transition-timing-main)
|
||||
&[data-disabled]
|
||||
opacity: var(--a-opacity-disabled)
|
||||
|
||||
.aurora-radio-label
|
||||
color: var(--a-color-text)
|
||||
font-size: var(--a-font-size-md)
|
||||
&[data-disabled]
|
||||
opacity: var(--a-opacity-disabled)
|
||||
color: inherit
|
||||
@@ -0,0 +1,53 @@
|
||||
import {
|
||||
RadioGroup as ArkRadioGroup,
|
||||
type RadioGroupRootProps as ArkRadioGroupProps,
|
||||
type RadioGroupValueChangeDetails
|
||||
} from '@ark-ui/react/radio-group'
|
||||
|
||||
import './radio-group.sass'
|
||||
|
||||
interface RadioGroupOnChangeData {
|
||||
name: string
|
||||
value: string | number | undefined
|
||||
}
|
||||
|
||||
export interface RadioGroupProps
|
||||
extends Pick<
|
||||
ArkRadioGroupProps,
|
||||
'value' | 'children' | 'defaultValue' | 'disabled'
|
||||
> {
|
||||
name: string
|
||||
onChange?: (data: RadioGroupOnChangeData) => void
|
||||
}
|
||||
|
||||
export function RadioGroup({
|
||||
name,
|
||||
value,
|
||||
children,
|
||||
defaultValue,
|
||||
disabled,
|
||||
onChange
|
||||
}: RadioGroupProps) {
|
||||
return (
|
||||
<ArkRadioGroup.Root
|
||||
className="aurora-radio-group"
|
||||
name={name}
|
||||
defaultValue={defaultValue}
|
||||
value={value}
|
||||
disabled={disabled}
|
||||
onValueChange={(event: RadioGroupValueChangeDetails) => {
|
||||
const data = {
|
||||
name,
|
||||
value: event.value
|
||||
}
|
||||
|
||||
if (onChange) {
|
||||
onChange(data)
|
||||
}
|
||||
}}
|
||||
orientation="horizontal"
|
||||
>
|
||||
{children}
|
||||
</ArkRadioGroup.Root>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export * from './radio'
|
||||
@@ -0,0 +1,24 @@
|
||||
import {
|
||||
RadioGroup,
|
||||
type RadioGroupItemProps as ArkRadioProps
|
||||
} from '@ark-ui/react/radio-group'
|
||||
|
||||
export interface RadioProps extends Pick<ArkRadioProps, 'value' | 'disabled'> {
|
||||
label: string
|
||||
}
|
||||
|
||||
export function Radio({ label, value, disabled }: RadioProps) {
|
||||
return (
|
||||
<RadioGroup.Item
|
||||
className="aurora-radio"
|
||||
value={value}
|
||||
disabled={disabled}
|
||||
>
|
||||
<RadioGroup.ItemHiddenInput />
|
||||
<RadioGroup.ItemControl className="aurora-radio-control" />
|
||||
<RadioGroup.ItemText className="aurora-radio-label">
|
||||
{label}
|
||||
</RadioGroup.ItemText>
|
||||
</RadioGroup.Item>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export * from './range-slider'
|
||||
@@ -0,0 +1,70 @@
|
||||
@use '../../styles/main.sass' as *
|
||||
|
||||
.aurora-range-slider
|
||||
--a-track-height: 10px
|
||||
|
||||
.aurora-range-slider-control
|
||||
display: flex
|
||||
align-items: center
|
||||
cursor: pointer
|
||||
width: 100%
|
||||
&[data-disabled]
|
||||
cursor: not-allowed
|
||||
opacity: var(--a-opacity-disabled)
|
||||
&:hover:not([data-disabled])
|
||||
.aurora-range-slider-thumb
|
||||
width: calc(var(--a-track-height) * 2.3)
|
||||
height: calc(var(--a-track-height) * 2.3)
|
||||
.aurora-range-slider-track
|
||||
background-color: var(--a-color-background-surface-secondary-hover)
|
||||
|
||||
.aurora-range-slider-track
|
||||
background-color: var(--a-color-background-surface-secondary)
|
||||
border-radius: var(--a-border-radius-pill)
|
||||
transition: background-color var(--a-transition-duration-main) var(--a-transition-timing-main)
|
||||
|
||||
.aurora-range-slider-range
|
||||
background-color: var(--a-color-accent)
|
||||
border-radius: var(--a-border-radius-pill)
|
||||
|
||||
.aurora-range-slider-thumb
|
||||
position: relative
|
||||
outline: none
|
||||
width: calc(var(--a-track-height) * 2)
|
||||
height: calc(var(--a-track-height) * 2)
|
||||
border-radius: var(--a-border-radius-circle)
|
||||
background-color: var(--a-color-accent)
|
||||
transition: width var(--a-transition-duration-main) var(--a-transition-timing-main), height var(--a-transition-duration-main) var(--a-transition-timing-main)
|
||||
|
||||
&--hidden-thumb
|
||||
&:hover .aurora-range-slider-thumb
|
||||
opacity: 1
|
||||
.aurora-range-slider-thumb
|
||||
opacity: 0
|
||||
|
||||
&[data-orientation="horizontal"]
|
||||
.aurora-range-slider-control
|
||||
flex-direction: row
|
||||
width: 100%
|
||||
height: var(--a-track-height)
|
||||
.aurora-range-slider-range
|
||||
height: var(--a-track-height)
|
||||
.aurora-range-slider-track
|
||||
width: 100%
|
||||
height: var(--a-track-height)
|
||||
.aurora-range-slider-thumb
|
||||
margin-top: 1px
|
||||
|
||||
&[data-orientation="vertical"]
|
||||
height: 100%
|
||||
.aurora-range-slider-control
|
||||
flex-direction: column
|
||||
width: var(--a-track-height)
|
||||
height: 100%
|
||||
.aurora-range-slider-range
|
||||
width: var(--a-track-height)
|
||||
.aurora-range-slider-track
|
||||
width: var(--a-track-height)
|
||||
height: 100%
|
||||
.aurora-range-slider-thumb
|
||||
margin-left: 1px
|
||||
@@ -0,0 +1,114 @@
|
||||
import { useState } from 'react'
|
||||
import classNames from 'clsx'
|
||||
import {
|
||||
Slider,
|
||||
type SliderRootProps as ArkSliderProps,
|
||||
type SliderValueChangeDetails
|
||||
} from '@ark-ui/react/slider'
|
||||
|
||||
import './range-slider.sass'
|
||||
|
||||
interface RangeSliderOnChangeData {
|
||||
name: string
|
||||
value: string | number | undefined
|
||||
}
|
||||
|
||||
export interface RangeSliderProps
|
||||
extends Pick<
|
||||
ArkSliderProps,
|
||||
| 'max'
|
||||
| 'min'
|
||||
| 'step'
|
||||
| 'disabled'
|
||||
| 'orientation'
|
||||
> {
|
||||
name: string
|
||||
value?: number | number[]
|
||||
defaultValue?: number | number[]
|
||||
width?: number | string
|
||||
height?: number | string
|
||||
hiddenThumb?: boolean
|
||||
onChange?: (data: RangeSliderOnChangeData) => void
|
||||
}
|
||||
|
||||
function normalizeValue(value?: number | number[]): number[] | undefined {
|
||||
if (typeof value === 'undefined') {
|
||||
return undefined
|
||||
}
|
||||
|
||||
return Array.isArray(value) ? value : [value]
|
||||
}
|
||||
|
||||
export function RangeSlider({
|
||||
name,
|
||||
width,
|
||||
height,
|
||||
value,
|
||||
defaultValue,
|
||||
max = 100,
|
||||
min = 0,
|
||||
step = 1,
|
||||
disabled,
|
||||
orientation = 'horizontal',
|
||||
hiddenThumb,
|
||||
onChange
|
||||
}: RangeSliderProps) {
|
||||
const [newValue, setNewValue] = useState(normalizeValue(value ?? defaultValue))
|
||||
const normalizedValue = normalizeValue(value)
|
||||
const normalizedDefaultValue = normalizeValue(defaultValue)
|
||||
const currentValue = normalizedValue ?? newValue ?? normalizedDefaultValue
|
||||
const currentScalarValue = currentValue?.[0] ?? min
|
||||
const valueInPercent =
|
||||
Number((((currentScalarValue - min) / (max - min)) * 100).toFixed(2))
|
||||
|
||||
return (
|
||||
<div
|
||||
className="aurora-range-slider-container"
|
||||
style={{
|
||||
width,
|
||||
height
|
||||
}}
|
||||
>
|
||||
<Slider.Root
|
||||
className={classNames('aurora-range-slider', {
|
||||
'aurora-range-slider--hidden-thumb': hiddenThumb
|
||||
})}
|
||||
name={name}
|
||||
value={normalizedValue}
|
||||
defaultValue={normalizedDefaultValue}
|
||||
max={max}
|
||||
min={min}
|
||||
step={step}
|
||||
disabled={disabled}
|
||||
orientation={orientation}
|
||||
onValueChange={(event: SliderValueChangeDetails) => {
|
||||
setNewValue(event.value)
|
||||
|
||||
const data = {
|
||||
name,
|
||||
value: event.value[0]
|
||||
}
|
||||
|
||||
if (onChange) {
|
||||
onChange(data)
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Slider.Control className="aurora-range-slider-control">
|
||||
<Slider.Track className="aurora-range-slider-track">
|
||||
<Slider.Range
|
||||
className="aurora-range-slider-range"
|
||||
style={{
|
||||
[orientation === 'horizontal' ? 'width' : 'height']:
|
||||
`${valueInPercent}%`
|
||||
}}
|
||||
/>
|
||||
</Slider.Track>
|
||||
<Slider.Thumb className="aurora-range-slider-thumb" index={0}>
|
||||
<Slider.HiddenInput />
|
||||
</Slider.Thumb>
|
||||
</Slider.Control>
|
||||
</Slider.Root>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export * from './scroll-container'
|
||||
@@ -0,0 +1,31 @@
|
||||
@use '../../styles/main.sass' as *
|
||||
|
||||
.aurora-scroll-container
|
||||
position: relative
|
||||
width: 100%
|
||||
padding: var(--a-space-sm) 0
|
||||
|
||||
.aurora-scroll-container-mask
|
||||
position: absolute
|
||||
pointer-events: none
|
||||
|
||||
&--horizontal .aurora-scroll-container-mask
|
||||
top: 0
|
||||
right: 0
|
||||
width: 50px
|
||||
height: 100%
|
||||
background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .3), var(--a-color-background-surface))
|
||||
&--vertical .aurora-scroll-container-mask
|
||||
position: absolute
|
||||
content: ''
|
||||
bottom: 0
|
||||
left: 0
|
||||
right: 0
|
||||
width: 100%
|
||||
height: 50px
|
||||
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .3), var(--a-color-background-surface))
|
||||
|
||||
.aurora-scroll-container-scrollview
|
||||
height: 100%
|
||||
overflow-y: auto
|
||||
overflow-x: auto
|
||||
@@ -0,0 +1,34 @@
|
||||
import classNames from 'clsx'
|
||||
|
||||
import './scroll-container.sass'
|
||||
|
||||
export interface ScrollContainerProps {
|
||||
/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
|
||||
children: any
|
||||
orientation?: 'vertical' | 'horizontal'
|
||||
width?: number | string
|
||||
height?: number | string
|
||||
}
|
||||
|
||||
export function ScrollContainer({
|
||||
children,
|
||||
orientation = 'horizontal',
|
||||
width,
|
||||
height
|
||||
}: ScrollContainerProps) {
|
||||
return (
|
||||
<div
|
||||
className={classNames(
|
||||
'aurora-scroll-container',
|
||||
`aurora-scroll-container--${orientation}`
|
||||
)}
|
||||
style={{
|
||||
width,
|
||||
height
|
||||
}}
|
||||
>
|
||||
<div className="aurora-scroll-container-scrollview">{children}</div>
|
||||
<div className="aurora-scroll-container-mask" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
export * from './select'
|
||||
export * from './select-option'
|
||||
@@ -0,0 +1 @@
|
||||
export * from './select-option'
|
||||
@@ -0,0 +1,28 @@
|
||||
import {
|
||||
Select as ArkSelect
|
||||
} from '@ark-ui/react/select'
|
||||
|
||||
export interface SelectOptionProps {
|
||||
disabled?: boolean
|
||||
label: string
|
||||
value: string
|
||||
}
|
||||
|
||||
export function SelectOption({
|
||||
label,
|
||||
value,
|
||||
disabled = false
|
||||
}: SelectOptionProps) {
|
||||
return (
|
||||
<ArkSelect.Item
|
||||
className="aurora-select-option"
|
||||
item={{
|
||||
label,
|
||||
value,
|
||||
disabled
|
||||
}}
|
||||
>
|
||||
<ArkSelect.ItemText>{label}</ArkSelect.ItemText>
|
||||
</ArkSelect.Item>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export * from './select'
|
||||
@@ -0,0 +1,77 @@
|
||||
@use '../../../styles/main.sass' as *
|
||||
|
||||
.aurora-select-trigger
|
||||
position: relative
|
||||
display: inline-block
|
||||
cursor: pointer
|
||||
color: var(--a-color-text-placeholder)
|
||||
text-align: left
|
||||
background-color: var(--a-color-input-background)
|
||||
font-size: var(--a-font-size-md)
|
||||
border: 1px solid var(--a-color-input-border)
|
||||
border-radius: var(--a-border-radius-md)
|
||||
height: var(--a-input-size-md)
|
||||
padding: 0 var(--a-space-md)
|
||||
padding-right: 0
|
||||
width: 100%
|
||||
outline: none
|
||||
transition: background-color var(--a-transition-duration-main) var(--a-transition-timing-main), border-color var(--a-transition-duration-main) var(--a-transition-timing-main)
|
||||
&:hover
|
||||
border-color: var(--a-color-input-border-hover)
|
||||
background-color: var(--a-color-input-background-hover)
|
||||
&--selected
|
||||
color: var(--a-color-text)
|
||||
&[data-expanded]
|
||||
border-color: var(--a-color-input-border-focus)
|
||||
background-color: var(--a-color-input-background-hover)
|
||||
&:not([disabled])
|
||||
.aurora-icon
|
||||
color: var(--a-color-accent)
|
||||
transform: rotate(-180deg)
|
||||
&[disabled], &[disabled]:hover
|
||||
border-color: inherit
|
||||
background-color: inherit
|
||||
opacity: var(--a-opacity-disabled)
|
||||
cursor: not-allowed
|
||||
&-placeholder-container
|
||||
position: relative
|
||||
overflow: hidden
|
||||
white-space: nowrap
|
||||
text-overflow: ellipsis
|
||||
width: 100%
|
||||
&-icon-container
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: center
|
||||
width: 50px
|
||||
|
||||
.aurora-icon
|
||||
color: var(--color-secondary-white)
|
||||
|
||||
.aurora-select-content
|
||||
position: relative
|
||||
width: var(--reference-width)
|
||||
background-color: var(--a-color-background-surface)
|
||||
border: 1px solid var(--a-color-separator)
|
||||
border-radius: var(--a-border-radius-md)
|
||||
cursor: pointer
|
||||
|
||||
.aurora-select-option
|
||||
font-size: var(--a-font-size-md)
|
||||
line-height: var(--a-line-height-md)
|
||||
color: var(--a-color-text-secondary)
|
||||
padding: var(--a-space-md)
|
||||
border-bottom: 1px solid var(--a-color-separator)
|
||||
background-color: transparent
|
||||
transition: background-color var(--a-transition-duration-main) var(--a-transition-timing-main)
|
||||
&:hover
|
||||
background-color: var(--a-color-black)
|
||||
&[data-disabled]
|
||||
color: rgba(245, 245, 247, var(--a-opacity-disabled))
|
||||
cursor: not-allowed
|
||||
&:hover
|
||||
background-color: inherit
|
||||
&[data-selected]
|
||||
color: var(--a-color-text)
|
||||
&:last-child
|
||||
border-bottom: none
|
||||
@@ -0,0 +1,124 @@
|
||||
import { Children, isValidElement, useState, type ReactNode } from 'react'
|
||||
import { Portal } from '@ark-ui/react/portal'
|
||||
import {
|
||||
Select as ArkSelect,
|
||||
createListCollection
|
||||
} from '@ark-ui/react/select'
|
||||
import classNames from 'clsx'
|
||||
|
||||
import { Flexbox, Icon } from '../../..'
|
||||
import { type SelectOptionProps } from '../select-option'
|
||||
|
||||
import './select.sass'
|
||||
|
||||
interface Option {
|
||||
label: string
|
||||
value: string
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
interface SelectOnChangeData {
|
||||
name: string
|
||||
value: string | number | undefined
|
||||
label?: string
|
||||
}
|
||||
|
||||
export interface SelectProps {
|
||||
name: string
|
||||
selectedOption?: Option
|
||||
defaultValue?: string
|
||||
disabled?: boolean
|
||||
placeholder: string
|
||||
children: ReactNode
|
||||
onChange?: (data: SelectOnChangeData) => void
|
||||
}
|
||||
|
||||
export function Select({
|
||||
name,
|
||||
placeholder,
|
||||
children,
|
||||
selectedOption,
|
||||
defaultValue,
|
||||
disabled,
|
||||
onChange
|
||||
}: SelectProps) {
|
||||
const [currentValue, setCurrentValue] = useState(
|
||||
selectedOption?.value ?? defaultValue
|
||||
)
|
||||
const options = Children.toArray(children).flatMap((child) => {
|
||||
if (!isValidElement<SelectOptionProps>(child)) {
|
||||
return []
|
||||
}
|
||||
|
||||
const { label, value, disabled } = child.props
|
||||
|
||||
return [
|
||||
{
|
||||
label,
|
||||
value,
|
||||
disabled
|
||||
}
|
||||
]
|
||||
})
|
||||
const collection = createListCollection<Option>({
|
||||
items: options,
|
||||
itemToString: (item) => item.label,
|
||||
itemToValue: (item) => item.value,
|
||||
isItemDisabled: (item) => !!item.disabled
|
||||
})
|
||||
const selectedValue = selectedOption?.value
|
||||
const hasSelectedValue = Boolean(selectedValue ?? currentValue)
|
||||
|
||||
return (
|
||||
<ArkSelect.Root
|
||||
collection={collection}
|
||||
closeOnSelect
|
||||
value={selectedValue ? [selectedValue] : undefined}
|
||||
defaultValue={defaultValue ? [defaultValue] : undefined}
|
||||
disabled={disabled}
|
||||
name={name}
|
||||
onValueChange={(event) => {
|
||||
const nextSelectedOption = event.items[0]
|
||||
|
||||
setCurrentValue(nextSelectedOption?.value)
|
||||
|
||||
const data = {
|
||||
name,
|
||||
label: nextSelectedOption?.label,
|
||||
value: nextSelectedOption?.value
|
||||
}
|
||||
|
||||
if (onChange) {
|
||||
onChange(data)
|
||||
}
|
||||
}}
|
||||
>
|
||||
<ArkSelect.HiddenSelect />
|
||||
<ArkSelect.Trigger
|
||||
className={classNames('aurora-select-trigger', {
|
||||
'aurora-select-trigger--selected': hasSelectedValue
|
||||
})}
|
||||
>
|
||||
<Flexbox
|
||||
flexDirection="row"
|
||||
alignItems="center"
|
||||
justifyContent="space-between"
|
||||
>
|
||||
<div className="aurora-select-trigger-placeholder-container">
|
||||
<ArkSelect.ValueText placeholder={placeholder} />
|
||||
</div>
|
||||
<div className="aurora-select-trigger-icon-container">
|
||||
<Icon iconName="arrow-down-s" />
|
||||
</div>
|
||||
</Flexbox>
|
||||
</ArkSelect.Trigger>
|
||||
<Portal>
|
||||
<ArkSelect.Positioner>
|
||||
<ArkSelect.Content className="aurora-select-content">
|
||||
{children}
|
||||
</ArkSelect.Content>
|
||||
</ArkSelect.Positioner>
|
||||
</Portal>
|
||||
</ArkSelect.Root>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export * from './status'
|
||||
@@ -0,0 +1,63 @@
|
||||
@use '../../styles/main.sass' as *
|
||||
|
||||
.aurora-status
|
||||
position: relative
|
||||
display: inline-block
|
||||
border-radius: var(--a-border-radius-pill)
|
||||
font-size: var(--a-font-size-xs)
|
||||
padding: var(--a-space-xs) var(--a-space-sm)
|
||||
cursor: default
|
||||
color: var(--a-color-text)
|
||||
background-color: var(--a-color-transparent-white)
|
||||
border: 1px solid var(--a-color-transparent-white)
|
||||
transition: background-color var(--a-transition-duration-main) var(--a-transition-timing-main), border-color var(--a-transition-duration-main) var(--a-transition-timing-main)
|
||||
&:hover
|
||||
background-color: var(--a-color-transparent-white-hover)
|
||||
border-color: var(--a-color-transparent-white-hover)
|
||||
i
|
||||
font-style: normal
|
||||
|
||||
*
|
||||
cursor: default
|
||||
|
||||
.aurora-icon
|
||||
width: auto
|
||||
height: auto
|
||||
padding: 0
|
||||
|
||||
&--blue
|
||||
color: var(--a-color-blue)
|
||||
background-color: var(--a-color-transparent-blue)
|
||||
border-color: var(--a-color-transparent-blue)
|
||||
&:hover
|
||||
background-color: var(--a-color-transparent-blue-hover)
|
||||
border-color: var(--a-color-transparent-blue-hover)
|
||||
.aurora-icon
|
||||
color: var(--a-color-blue)
|
||||
&--green
|
||||
color: var(--a-color-green)
|
||||
background-color: var(--a-color-transparent-green)
|
||||
border-color: var(--a-color-transparent-green)
|
||||
&:hover
|
||||
background-color: var(--a-color-transparent-green-hover)
|
||||
border-color: var(--a-color-transparent-green-hover)
|
||||
.aurora-icon
|
||||
color: var(--a-color-green)
|
||||
&--yellow
|
||||
color: var(--a-color-yellow)
|
||||
background-color: var(--a-color-transparent-yellow)
|
||||
border-color: var(--a-color-transparent-yellow)
|
||||
&:hover
|
||||
background-color: var(--a-color-transparent-yellow-hover)
|
||||
border-color: var(--a-color-transparent-yellow-hover)
|
||||
.aurora-icon
|
||||
color: var(--a-color-yellow)
|
||||
&--red
|
||||
color: var(--a-color-red)
|
||||
background-color: var(--a-color-transparent-red)
|
||||
border-color: var(--a-color-transparent-red)
|
||||
&:hover
|
||||
background-color: var(--a-color-transparent-red-hover)
|
||||
border-color: var(--a-color-transparent-red-hover)
|
||||
.aurora-icon
|
||||
color: var(--a-color-red)
|
||||
@@ -0,0 +1,45 @@
|
||||
import classNames from 'clsx'
|
||||
|
||||
import type { IconType } from '../../lib/types'
|
||||
import { Icon, Flexbox } from '../..'
|
||||
import { generateKeyId } from '../../lib/utils'
|
||||
|
||||
import './status.sass'
|
||||
|
||||
export interface StatusProps {
|
||||
/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
|
||||
children: any
|
||||
color?: 'blue' | 'green' | 'red' | 'yellow'
|
||||
iconName?: string
|
||||
iconType?: IconType
|
||||
}
|
||||
|
||||
export function Status({
|
||||
children,
|
||||
color,
|
||||
iconName,
|
||||
iconType = 'line'
|
||||
}: StatusProps) {
|
||||
return (
|
||||
<div
|
||||
key={`aurora-status_${generateKeyId()}`}
|
||||
className={classNames('aurora-status', {
|
||||
[`aurora-status--${color}`]: color
|
||||
})}
|
||||
>
|
||||
{iconName ? (
|
||||
<Flexbox
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
flexDirection="row"
|
||||
gap="xs"
|
||||
>
|
||||
<Icon iconName={iconName} type={iconType} size="sm" />
|
||||
<i>{children}</i>
|
||||
</Flexbox>
|
||||
) : (
|
||||
children
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export * from './switch'
|
||||
@@ -0,0 +1,48 @@
|
||||
@use '../../styles/main.sass' as *
|
||||
|
||||
.aurora-switch
|
||||
--a-switch-width: 44px
|
||||
--a-thumb-size: 20px
|
||||
|
||||
position: relative
|
||||
display: flex
|
||||
align-items: center
|
||||
gap: var(--a-space-sm)
|
||||
cursor: pointer
|
||||
&[data-disabled]
|
||||
cursor: not-allowed
|
||||
opacity: var(--a-opacity-disabled)
|
||||
&:hover:not([data-state="checked"], [data-disabled]) .aurora-switch-control
|
||||
background-color: var(--a-color-background-surface-secondary-hover)
|
||||
|
||||
.aurora-switch-control
|
||||
position: relative
|
||||
display: flex
|
||||
align-items: center
|
||||
border-radius: var(--a-border-radius-pill)
|
||||
background-color: var(--a-color-background-surface-secondary)
|
||||
width: var(--a-switch-width)
|
||||
height: 22px
|
||||
transition: background-color var(--a-transition-duration-main) var(--a-transition-timing-main)
|
||||
&[data-state="checked"]
|
||||
background-color: var(--a-color-accent)
|
||||
|
||||
.aurora-switch-thumb
|
||||
display: block
|
||||
position: relative
|
||||
left: 2px
|
||||
width: var(--a-thumb-size)
|
||||
height: var(--a-thumb-size)
|
||||
border-radius: var(--a-border-radius-circle)
|
||||
border: 1px solid var(--a-color-input-border)
|
||||
background-color: var(--a-color-background-surface)
|
||||
transition: transform var(--a-transition-duration-main) var(--a-transition-timing-main), border-color var(--a-transition-duration-main) var(--a-transition-timing-main)
|
||||
&[data-state="checked"]
|
||||
border-color: transparent
|
||||
transform: translateX(calc(var(--a-switch-width) - var(--a-thumb-size) - 4px))
|
||||
|
||||
.aurora-switch-label
|
||||
color: var(--a-color-text)
|
||||
font-size: var(--a-font-size-md)
|
||||
&[data-disabled]
|
||||
color: inherit
|
||||
@@ -0,0 +1,63 @@
|
||||
import { useState } from 'react'
|
||||
import {
|
||||
Switch as ArkSwitch,
|
||||
type SwitchCheckedChangeDetails,
|
||||
type SwitchRootProps as ArkSwitchProps
|
||||
} from '@ark-ui/react/switch'
|
||||
|
||||
import './switch.sass'
|
||||
|
||||
interface SwitchOnChangeData {
|
||||
name: string
|
||||
value: string | number | undefined
|
||||
isSwitched: boolean
|
||||
}
|
||||
|
||||
export interface SwitchProps
|
||||
extends Pick<ArkSwitchProps, 'value' | 'checked' | 'disabled' | 'required'> {
|
||||
name: string
|
||||
label?: string
|
||||
onChange?: (data: SwitchOnChangeData) => void
|
||||
}
|
||||
|
||||
export function Switch({
|
||||
name,
|
||||
label,
|
||||
checked,
|
||||
value,
|
||||
disabled,
|
||||
required,
|
||||
onChange
|
||||
}: SwitchProps) {
|
||||
const [isChecked, setIsChecked] = useState(checked)
|
||||
|
||||
return (
|
||||
<ArkSwitch.Root
|
||||
className="aurora-switch"
|
||||
name={name}
|
||||
value={value}
|
||||
checked={isChecked}
|
||||
disabled={disabled}
|
||||
required={required}
|
||||
onCheckedChange={(event: SwitchCheckedChangeDetails) => {
|
||||
setIsChecked(event.checked)
|
||||
|
||||
const data = {
|
||||
name,
|
||||
value,
|
||||
isSwitched: event.checked
|
||||
}
|
||||
|
||||
if (onChange) {
|
||||
onChange(data)
|
||||
}
|
||||
}}
|
||||
>
|
||||
<ArkSwitch.HiddenInput />
|
||||
<ArkSwitch.Control className="aurora-switch-control">
|
||||
<ArkSwitch.Thumb className="aurora-switch-thumb" />
|
||||
</ArkSwitch.Control>
|
||||
<ArkSwitch.Label className="aurora-switch-label">{label}</ArkSwitch.Label>
|
||||
</ArkSwitch.Root>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
export * from './tab'
|
||||
export * from './tab-content'
|
||||
export * from './tab-group'
|
||||
export * from './tab-list'
|
||||
@@ -0,0 +1 @@
|
||||
export * from './tab-content'
|
||||
@@ -0,0 +1,23 @@
|
||||
import {
|
||||
Tabs,
|
||||
type TabContentProps as ArkTabContentProps
|
||||
} from '@ark-ui/react/tabs'
|
||||
|
||||
import { generateKeyId } from '../../../lib/utils'
|
||||
|
||||
export type TabContentProps = Pick<ArkTabContentProps, 'children' | 'value'>
|
||||
|
||||
export function TabContent({
|
||||
children,
|
||||
value
|
||||
}: TabContentProps): React.JSX.Element {
|
||||
return (
|
||||
<Tabs.Content
|
||||
key={`aurora-tab-content_${generateKeyId()}`}
|
||||
className="aurora-tab-content"
|
||||
value={value}
|
||||
>
|
||||
{children}
|
||||
</Tabs.Content>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export * from './tab-group'
|
||||
@@ -0,0 +1,38 @@
|
||||
@use '../../../styles/main.sass' as *
|
||||
|
||||
.aurora-tab-group
|
||||
.aurora-tab
|
||||
color: var(--a-color-text)
|
||||
font-size: var(--a-font-size-md)
|
||||
cursor: pointer
|
||||
background-color: transparent
|
||||
border: none
|
||||
margin-right: var(--a-space-md)
|
||||
padding: 0
|
||||
padding-bottom: var(--a-space-xs)
|
||||
transition: color var(--a-transition-duration-main) var(--a-transition-timing-main)
|
||||
&:hover, &[data-selected]
|
||||
color: var(--a-color-accent)
|
||||
&[disabled]
|
||||
opacity: var(--a-opacity-disabled)
|
||||
cursor: not-allowed
|
||||
color: inherit
|
||||
&--sm .aurora-tab
|
||||
font-size: var(--a-font-size-sm)
|
||||
&--md .aurora-tab
|
||||
font-size: var(--a-font-size-md)
|
||||
&--lg .aurora-tab
|
||||
font-size: var(--a-font-size-lg)
|
||||
|
||||
.aurora-tab-indicator-container
|
||||
display: grid
|
||||
|
||||
.aurora-tab-indicator
|
||||
justify-self: center
|
||||
width: 6px
|
||||
height: 6px
|
||||
border-radius: var(--a-border-radius-circle)
|
||||
background-color: var(--a-color-accent)
|
||||
|
||||
.aurora-tab-content
|
||||
margin-top: var(--a-space-md)
|
||||
@@ -0,0 +1,37 @@
|
||||
import classNames from 'clsx'
|
||||
import {
|
||||
Tabs,
|
||||
type TabsRootProps as ArkTabsProps,
|
||||
type TabsValueChangeDetails
|
||||
} from '@ark-ui/react/tabs'
|
||||
|
||||
import { generateKeyId } from '../../../lib/utils'
|
||||
|
||||
import './tab-group.sass'
|
||||
|
||||
export interface TabGroupProps
|
||||
extends Pick<ArkTabsProps, 'children' | 'defaultValue'> {
|
||||
size?: 'sm' | 'md' | 'lg'
|
||||
onChange?: (details: TabsValueChangeDetails) => void
|
||||
}
|
||||
|
||||
export function TabGroup({
|
||||
children,
|
||||
defaultValue,
|
||||
onChange,
|
||||
size
|
||||
}: TabGroupProps) {
|
||||
return (
|
||||
<Tabs.Root
|
||||
key={`aurora-tab-group_${generateKeyId()}`}
|
||||
className={classNames('aurora-tab-group', {
|
||||
[`aurora-tab-group--${size}`]: size
|
||||
})}
|
||||
defaultValue={defaultValue}
|
||||
onValueChange={onChange}
|
||||
orientation="horizontal"
|
||||
>
|
||||
{children}
|
||||
</Tabs.Root>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export * from './tab-list'
|
||||
@@ -0,0 +1,22 @@
|
||||
import {
|
||||
Tabs,
|
||||
type TabListProps as ArkTabListProps
|
||||
} from '@ark-ui/react/tabs'
|
||||
|
||||
import { generateKeyId } from '../../../lib/utils'
|
||||
|
||||
export type TabListProps = Pick<ArkTabListProps, 'children'>
|
||||
|
||||
export function TabList({ children }: TabListProps): React.JSX.Element {
|
||||
return (
|
||||
<Tabs.List
|
||||
key={`aurora-tab-list_${generateKeyId()}`}
|
||||
className="aurora-tab-list"
|
||||
>
|
||||
{children}
|
||||
<Tabs.Indicator className="aurora-tab-indicator-container">
|
||||
<div className="aurora-tab-indicator" />
|
||||
</Tabs.Indicator>
|
||||
</Tabs.List>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export * from './tab'
|
||||
@@ -0,0 +1,28 @@
|
||||
import {
|
||||
Tabs,
|
||||
type TabTriggerProps as ArkTabTriggerProps
|
||||
} from '@ark-ui/react/tabs'
|
||||
|
||||
import { generateKeyId } from '../../../lib/utils'
|
||||
|
||||
export type TabProps = Pick<
|
||||
ArkTabTriggerProps,
|
||||
'children' | 'value' | 'disabled'
|
||||
>
|
||||
|
||||
export function Tab({
|
||||
children,
|
||||
value,
|
||||
disabled
|
||||
}: TabProps): React.JSX.Element {
|
||||
return (
|
||||
<Tabs.Trigger
|
||||
key={`aurora-tab_${generateKeyId()}`}
|
||||
className="aurora-tab"
|
||||
value={value}
|
||||
disabled={disabled}
|
||||
>
|
||||
{children}
|
||||
</Tabs.Trigger>
|
||||
)
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user