ui-svelte 0.1.0

package/dist/display/Empty.svelte

@@ -0,0 +1,462 @@
+<script lang="ts">
+	type Props = {
+		type?: 'playlist' | 'result' | 'data' | 'template';
+		class?: string;
+		title?: string;
+		description?: string;
+		href?: string;
+		onclick?: () => void;
+	};
+	let { type = 'template', class: className }: Props = $props();
+</script>
+
+<div class="empty">
+	{#if type === 'playlist'}
+		<svg class="empty-icon" viewBox="0 0 119 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+			<path
+				d="M79.5462 31.38C71.1662 31.38 62.6362 31.04 54.6562 28.82C46.8262 26.64 39.6562 22.43 33.2262 17.56C29.0362 14.38 25.2262 11.85 19.7662 12.24C14.4402 12.5231 9.34626 14.5109 5.23621 17.91C-1.69379 23.98 -0.643786 35.2 2.11621 43.09C6.28621 54.98 18.9662 63.23 29.7362 68.61C42.1862 74.83 55.8562 78.44 69.5662 80.52C81.5662 82.34 97.0162 83.67 107.426 75.82C116.996 68.61 119.616 52.15 117.276 41.04C116.703 37.7577 114.954 34.7966 112.356 32.71C105.636 27.8 95.6162 31.08 88.0662 31.25C85.2562 31.3 82.4162 31.37 79.5462 31.38Z"
+				fill="var(--color-muted)"
+			/>
+			<path
+				d="M30.4862 74.16V78.47"
+				stroke="var(--color-on-muted)"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+			<path
+				d="M28.3262 76.32H32.6362"
+				stroke="var(--color-on-muted)"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+			<path
+				d="M102.506 21.13V25.44"
+				stroke="var(--color-on-muted)"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+			<path
+				d="M100.346 23.29H104.656"
+				stroke="var(--color-on-muted)"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+			<path
+				d="M56.7262 1.96C57.2675 1.96 57.7062 1.52124 57.7062 0.98C57.7062 0.43876 57.2675 0 56.7262 0C56.185 0 55.7462 0.43876 55.7462 0.98C55.7462 1.52124 56.185 1.96 56.7262 1.96Z"
+				fill="var(--color-on-muted)"
+			/>
+			<path
+				d="M59.4462 99.99C79.7481 99.99 96.2062 98.9647 96.2062 97.7C96.2062 96.4353 79.7481 95.41 59.4462 95.41C39.1442 95.41 22.6862 96.4353 22.6862 97.7C22.6862 98.9647 39.1442 99.99 59.4462 99.99Z"
+				fill="var(--color-muted)"
+			/>
+			<path
+				d="M28.2762 52.44C28.1965 47.652 29.0707 42.8961 30.8479 38.4494C32.625 34.0027 35.2696 29.9543 38.6273 26.5402C41.9851 23.126 45.9889 20.4145 50.4054 18.5635C54.8219 16.7126 59.5626 15.7594 64.3512 15.7594C69.1399 15.7594 73.8806 16.7126 78.2971 18.5635C82.7135 20.4145 86.7174 23.126 90.0751 26.5402C93.4329 29.9543 96.0775 34.0027 97.8546 38.4494C99.6318 42.8961 100.506 47.652 100.426 52.44"
+				stroke="var(--color-on-muted)"
+				stroke-miterlimit="10"
+			/>
+			<path
+				d="M96.4262 66.85H89.3062V38.4H96.4262C98.1713 38.4 99.845 39.0933 101.079 40.3272C102.313 41.5612 103.006 43.2349 103.006 44.98V60.27C103.006 62.0151 102.313 63.6888 101.079 64.9228C99.845 66.1567 98.1713 66.85 96.4262 66.85Z"
+				fill="var(--color-on-muted)"
+			/>
+			<path
+				d="M31.9863 38.4H39.1063V66.85H31.9863C30.2411 66.85 28.5675 66.1567 27.3335 64.9228C26.0995 63.6888 25.4062 62.0151 25.4062 60.27V44.98C25.4062 43.2349 26.0995 41.5612 27.3335 40.3272C28.5675 39.0933 30.2411 38.4 31.9863 38.4Z"
+				fill="var(--color-on-muted)"
+			/>
+			<path
+				d="M64.3461 82.61C81.0086 82.61 94.5161 69.1024 94.5161 52.44C94.5161 35.7776 81.0086 22.27 64.3461 22.27C47.6837 22.27 34.1761 35.7776 34.1761 52.44C34.1761 69.1024 47.6837 82.61 64.3461 82.61Z"
+				fill="var(--color-muted)"
+				stroke="var(--color-on-muted)"
+				stroke-miterlimit="10"
+			/>
+			<path
+				d="M54.9261 64.48C55.394 62.3268 56.5846 60.3985 58.3001 59.0157C60.0156 57.6329 62.1527 56.8788 64.3561 56.8788C66.5596 56.8788 68.6967 57.6329 70.4122 59.0157C72.1277 60.3985 73.3183 62.3268 73.7861 64.48"
+				fill="var(--color-muted)"
+			/>
+			<path
+				d="M54.9261 64.48C55.394 62.3268 56.5846 60.3985 58.3001 59.0157C60.0156 57.6329 62.1527 56.8788 64.3561 56.8788C66.5596 56.8788 68.6967 57.6329 70.4122 59.0157C72.1277 60.3985 73.3183 62.3268 73.7861 64.48"
+				stroke="var(--color-on-muted)"
+				stroke-miterlimit="10"
+			/>
+			<path
+				d="M74.9963 53.23C75.7363 53.23 76.3363 52.6301 76.3363 51.89C76.3363 51.1499 75.7363 50.55 74.9963 50.55C74.2562 50.55 73.6562 51.1499 73.6562 51.89C73.6562 52.6301 74.2562 53.23 74.9963 53.23Z"
+				fill="var(--color-on-muted)"
+			/>
+			<path
+				d="M53.7062 53.23C54.4463 53.23 55.0462 52.6301 55.0462 51.89C55.0462 51.1499 54.4463 50.55 53.7062 50.55C52.9662 50.55 52.3662 51.1499 52.3662 51.89C52.3662 52.6301 52.9662 53.23 53.7062 53.23Z"
+				fill="var(--color-on-muted)"
+			/>
+			<path
+				d="M35.1562 21.64L37.2662 7.3C37.16 7.28571 37.0524 7.28571 36.9462 7.3L26.7362 8.79C25.1862 9.02 23.6462 9.25 22.1062 9.45C21.6862 9.51 21.4962 9.65 21.4362 10.1C20.6062 15.71 19.7362 21.2 18.9862 26.76C18.9319 27.5949 18.5939 28.3862 18.0283 29.0028C17.4627 29.6193 16.7034 30.0241 15.8762 30.15C14.8926 30.4065 13.86 30.409 12.8752 30.1571C11.8904 29.9052 10.9858 29.4073 10.2462 28.71C9.75686 28.3241 9.40435 27.7913 9.24053 27.19C9.07671 26.5888 9.11024 25.9508 9.33619 25.37C9.53716 24.8822 9.84859 24.4477 10.2459 24.1007C10.6433 23.7536 11.1158 23.5035 11.6262 23.37C12.5147 23.075 13.4579 22.9821 14.3869 23.098C15.3159 23.2139 16.2074 23.5357 16.9962 24.04L17.2862 24.21H17.4162C17.4162 24.05 17.5062 23.89 17.5362 23.72C18.5362 17.23 19.4562 10.72 20.3962 4.23C20.4562 3.78 20.5962 3.59 21.0862 3.52C24.9562 2.99 28.8162 2.42 32.6862 1.85L39.8062 0.849998H40.1462C40.1566 1.00315 40.1566 1.15684 40.1462 1.31C38.9929 9.15 37.8362 16.9967 36.6762 24.85C36.5963 25.3647 36.3888 25.8513 36.0727 26.2652C35.7565 26.6792 35.3417 27.0074 34.8662 27.22C33.7793 27.7291 32.5698 27.9177 31.3795 27.7636C30.1892 27.6095 29.0676 27.1191 28.1462 26.35C26.1462 24.49 26.6162 21.91 29.2162 20.96C30.1164 20.615 31.0853 20.4868 32.0443 20.5858C33.0033 20.6848 33.9254 21.0083 34.7362 21.53L35.0262 21.7L35.1562 21.64Z"
+				fill="var(--color-on-muted)"
+			/>
+		</svg>
+	{/if}
+
+	{#if type === 'result'}
+		<svg class="empty-icon" viewBox="0 0 118 104" fill="none" xmlns="http://www.w3.org/2000/svg">
+			<path
+				d="M58.9662 81.6C59.5074 81.6 59.9462 81.1612 59.9462 80.62C59.9462 80.0788 59.5074 79.64 58.9662 79.64C58.425 79.64 57.9862 80.0788 57.9862 80.62C57.9862 81.1612 58.425 81.6 58.9662 81.6Z"
+				fill="var(--color-on-muted)"
+			/>
+			<path
+				d="M30.4962 7.82V12.12"
+				stroke="var(--color-on-muted)"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+			<path
+				d="M28.3462 9.97H32.6562"
+				stroke="var(--color-on-muted)"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+			<path
+				d="M79.4562 34.96C71.0762 34.96 62.5662 34.62 54.5962 32.4C46.6262 30.18 39.5962 26.02 33.1962 21.15C28.9962 17.98 25.1962 15.45 19.7462 15.83C14.427 16.1166 9.34049 18.1042 5.23621 21.5C-1.69379 27.56 -0.643786 38.77 2.11621 46.65C6.28621 58.5 18.9562 66.75 29.7062 72.12C42.1362 78.33 55.7862 81.94 69.4862 84.01C81.4862 85.84 96.8962 87.16 107.296 79.32C116.856 72.12 119.476 55.68 117.136 44.58C116.565 41.2997 114.815 38.341 112.216 36.26C105.506 31.35 95.4962 34.63 87.9562 34.79C85.1562 34.85 82.3162 34.96 79.4562 34.96Z"
+				fill="var(--color-muted)"
+			/>
+			<path
+				d="M65.9061 1.96C66.4474 1.96 66.8861 1.52124 66.8861 0.98C66.8861 0.43876 66.4474 0 65.9061 0C65.3649 0 64.9261 0.43876 64.9261 0.98C64.9261 1.52124 65.3649 1.96 65.9061 1.96Z"
+				fill="var(--color-on-muted)"
+			/>
+			<path
+				d="M14.9962 78.27V82.57"
+				stroke="var(--color-on-muted)"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+			<path
+				d="M12.8362 80.42H17.1462"
+				stroke="var(--color-on-muted)"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+			<path
+				d="M59.3761 103.47C79.6505 103.47 96.0861 102.445 96.0861 101.18C96.0861 99.9153 79.6505 98.89 59.3761 98.89C39.1018 98.89 22.6661 99.9153 22.6661 101.18C22.6661 102.445 39.1018 103.47 59.3761 103.47Z"
+				fill="var(--color-muted)"
+			/>
+			<path
+				d="M88.8762 76.65H25.4762C25.0518 76.6497 24.6326 76.5572 24.2475 76.379C23.8624 76.2007 23.5206 75.9409 23.2457 75.6176C22.9709 75.2943 22.7696 74.9151 22.6557 74.5063C22.5418 74.0975 22.5181 73.6689 22.5862 73.25L30.6862 24.07C30.7998 23.3856 31.1527 22.7637 31.6819 22.315C32.2111 21.8664 32.8824 21.6201 33.5762 21.62H96.9562C97.3805 21.6203 97.7997 21.7128 98.1849 21.891C98.57 22.0693 98.9117 22.3291 99.1866 22.6524C99.4614 22.9757 99.6627 23.3549 99.7766 23.7637C99.8905 24.1725 99.9142 24.6011 99.8462 25.02L91.7462 74.2C91.635 74.8819 91.2856 75.5023 90.7601 75.9509C90.2346 76.3995 89.5671 76.6472 88.8762 76.65Z"
+				fill="var(--color-muted)"
+				stroke="var(--color-on-muted)"
+				stroke-miterlimit="10"
+			/>
+			<path
+				d="M89.6497 20.3311L52.0109 3.52595C50.9015 3.03059 49.6005 3.52842 49.1052 4.63789L37.176 31.3558C36.6807 32.4652 37.1785 33.7662 38.288 34.2615L75.9268 51.0666C77.0362 51.562 78.3372 51.0642 78.8325 49.9547L90.7616 23.2368C91.257 22.1274 90.7592 20.8264 89.6497 20.3311Z"
+				fill="var(--color-muted)"
+				stroke="var(--color-on-muted)"
+				stroke-miterlimit="10"
+			/>
+			<path
+				d="M57.5361 25.51C58.539 24.1499 59.9767 23.1735 61.6106 22.7427C63.2446 22.3118 64.9768 22.4524 66.5199 23.1411C68.0631 23.8298 69.3244 25.0252 70.0949 26.5292C70.8654 28.0331 71.0987 29.7553 70.7561 31.41"
+				stroke="var(--color-on-muted)"
+				stroke-width="0.68"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+			<path
+				d="M75.5462 24C76.1151 24 76.5762 23.5389 76.5762 22.97C76.5762 22.4011 76.1151 21.94 75.5462 21.94C74.9774 21.94 74.5162 22.4011 74.5162 22.97C74.5162 23.5389 74.9774 24 75.5462 24Z"
+				fill="var(--color-on-muted)"
+			/>
+			<path
+				d="M60.6262 17.34C61.195 17.34 61.6562 16.8789 61.6562 16.31C61.6562 15.7411 61.195 15.28 60.6262 15.28C60.0573 15.28 59.5962 15.7411 59.5962 16.31C59.5962 16.8789 60.0573 17.34 60.6262 17.34Z"
+				fill="var(--color-on-muted)"
+			/>
+			<path
+				d="M88.5962 76.63H24.8862C24.5011 76.6313 24.1194 76.5564 23.7634 76.4097C23.4073 76.2629 23.0838 76.0471 22.8114 75.7748C22.5391 75.5024 22.3233 75.1789 22.1765 74.8228C22.0298 74.4667 21.9549 74.0851 21.9562 73.7V28.7C21.9549 28.3157 22.0294 27.9349 22.1756 27.5795C22.3217 27.2241 22.5366 26.901 22.8079 26.6288C23.0792 26.3566 23.4015 26.1406 23.7564 25.9932C24.1114 25.8459 24.4919 25.77 24.8762 25.77H48.0762C48.6165 25.7701 49.1462 25.9197 49.6068 26.202C50.0674 26.4844 50.441 26.8886 50.6862 27.37L53.9962 33.85C54.2398 34.3306 54.6116 34.7345 55.0704 35.0168C55.5293 35.2992 56.0574 35.4491 56.5962 35.45H88.5962C89.3715 35.45 90.1153 35.7573 90.6645 36.3046C91.2137 36.852 91.5235 37.5947 91.5262 38.37V73.7C91.5262 74.0848 91.4504 74.4658 91.3032 74.8213C91.1559 75.1767 90.9401 75.4997 90.668 75.7718C90.3959 76.0439 90.0729 76.2597 89.7175 76.407C89.362 76.5542 88.981 76.63 88.5962 76.63Z"
+				fill="var(--color-muted)"
+				stroke="var(--color-on-muted)"
+				stroke-miterlimit="10"
+			/>
+			<path
+				d="M78.8162 36.96C75.1355 36.96 71.5374 38.0515 68.477 40.0964C65.4166 42.1412 63.0313 45.0477 61.6228 48.4483C60.2142 51.8488 59.8457 55.5906 60.5638 59.2006C61.2818 62.8106 63.0543 66.1266 65.6569 68.7293C68.2596 71.3319 71.5756 73.1043 75.1856 73.8224C78.7955 74.5405 82.5374 74.1719 85.9379 72.7634C89.3385 71.3549 92.2449 68.9696 94.2898 65.9092C96.3347 62.8488 97.4262 59.2507 97.4262 55.57C97.4275 53.1257 96.947 50.7052 96.0123 48.4467C95.0775 46.1882 93.7067 44.1362 91.9784 42.4078C90.25 40.6795 88.1979 39.3087 85.9395 38.3739C83.681 37.4391 81.2605 36.9587 78.8162 36.96Z"
+				fill="var(--color-muted)"
+				stroke="var(--color-on-muted)"
+				stroke-miterlimit="10"
+			/>
+			<path
+				d="M92.0361 69.09L96.9961 74.05"
+				stroke="var(--color-on-muted)"
+				stroke-width="0.68"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+			<path
+				d="M96.4308 71.6517L94.8899 73.2637C94.1991 73.9862 94.2249 75.132 94.9475 75.8228L108.32 88.6064C109.043 89.2972 110.189 89.2714 110.879 88.5488L112.42 86.9368C113.111 86.2142 113.085 85.0685 112.363 84.3778L98.9899 71.5941C98.2673 70.9033 97.1216 70.9291 96.4308 71.6517Z"
+				fill="var(--color-on-muted)"
+			/>
+			<path
+				d="M106.326 0.98V5.29"
+				stroke="var(--color-on-muted)"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+			<path
+				d="M104.176 3.14H108.486"
+				stroke="var(--color-on-muted)"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+		</svg>
+	{/if}
+
+	{#if type === 'data'}
+		<svg class="empty-icon" viewBox="0 0 136 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+			<path
+				d="M79.4271 39.31C71.0471 39.36 62.5371 38.98 54.5771 36.76C46.6171 34.54 39.5771 30.38 33.1771 25.51C28.9871 22.34 25.1771 19.82 19.7371 20.2C14.4173 20.4838 9.32991 22.4718 5.22709 25.87C-1.69291 31.87 -0.642905 43.12 2.11709 51.01C6.27709 62.87 18.9371 71.12 29.6871 76.49C42.1171 82.69 55.7671 86.3 69.4571 88.37C81.4571 90.2 96.8571 91.52 107.257 83.69C116.807 76.49 119.427 60.05 117.087 48.96C116.52 45.6779 114.774 42.7158 112.177 40.63C105.467 35.73 95.4671 39.01 87.9271 39.17C85.1271 39.23 82.2871 39.3 79.4271 39.31Z"
+				fill="var(--color-muted)"
+			/>
+			<path
+				d="M38.567 0.5V4.81"
+				stroke="var(--color-on-muted)"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+			<path
+				d="M36.4171 2.65H40.7171"
+				stroke="var(--color-on-muted)"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+			<path
+				d="M120.147 86.21V90.51"
+				stroke="var(--color-on-muted)"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+			<path
+				d="M117.997 88.36H122.297"
+				stroke="var(--color-on-muted)"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+			<path
+				d="M6.07705 67.64C6.61828 67.64 7.05704 67.2012 7.05704 66.66C7.05704 66.1188 6.61828 65.68 6.07705 65.68C5.53581 65.68 5.09705 66.1188 5.09705 66.66C5.09705 67.2012 5.53581 67.64 6.07705 67.64Z"
+				fill="var(--color-on-muted)"
+			/>
+			<path
+				d="M89.5171 4.95C90.0583 4.95 90.4971 4.51124 90.4971 3.97C90.4971 3.42876 90.0583 2.99 89.5171 2.99C88.9759 2.99 88.5371 3.42876 88.5371 3.97C88.5371 4.51124 88.9759 4.95 89.5171 4.95Z"
+				fill="var(--color-on-muted)"
+			/>
+			<path
+				d="M62.3571 107.81C82.626 107.81 99.0571 106.789 99.0571 105.53C99.0571 104.271 82.626 103.25 62.3571 103.25C42.0883 103.25 25.6571 104.271 25.6571 105.53C25.6571 106.789 42.0883 107.81 62.3571 107.81Z"
+				fill="var(--color-muted)"
+			/>
+			<path
+				d="M34.0871 12.18H87.3871C88.7132 12.18 89.9849 12.7068 90.9226 13.6445C91.8603 14.5822 92.3871 15.8539 92.3871 17.18V80.59C92.3871 81.9161 91.8603 83.1879 90.9226 84.1255C89.9849 85.0632 88.7132 85.59 87.3871 85.59H27.2571C25.931 85.59 24.6592 85.0632 23.7215 84.1255C22.7839 83.1879 22.2571 81.9161 22.2571 80.59V24.13L34.0871 12.18Z"
+				fill="var(--color-on-muted)"
+				stroke="var(--color-on-muted)"
+				stroke-miterlimit="10"
+			/>
+			<path
+				d="M92.147 43.09H37.187V86.21H92.147V43.09Z"
+				fill="var(--color-muted)"
+				stroke="var(--color-on-muted)"
+				stroke-miterlimit="10"
+			/>
+			<path
+				d="M22.2571 24.13H31.9471C32.229 24.13 32.5081 24.0743 32.7683 23.9662C33.0286 23.858 33.265 23.6995 33.4638 23.4997C33.6627 23.2999 33.8201 23.0628 33.9271 22.802C34.034 22.5412 34.0884 22.2619 34.0871 21.98V12.18L22.2571 24.13Z"
+				fill="var(--color-on-muted)"
+				stroke="var(--color-muted)"
+				stroke-miterlimit="10"
+			/>
+			<path
+				d="M91.877 29.31H37.517C35.4018 29.31 33.687 31.0248 33.687 33.14V44.77C33.687 46.8853 35.4018 48.6 37.517 48.6H91.877C93.9923 48.6 95.707 46.8853 95.707 44.77V33.14C95.707 31.0248 93.9923 29.31 91.877 29.31Z"
+				fill="var(--color-muted)"
+				stroke="var(--color-on-muted)"
+				stroke-miterlimit="10"
+			/>
+			<path
+				d="M44.2471 42.32C46.0917 42.32 47.5871 40.8246 47.5871 38.98C47.5871 37.1354 46.0917 35.64 44.2471 35.64C42.4025 35.64 40.9071 37.1354 40.9071 38.98C40.9071 40.8246 42.4025 42.32 44.2471 42.32Z"
+				fill="var(--color-muted)"
+				stroke="var(--color-on-muted)"
+				stroke-miterlimit="10"
+			/>
+			<path
+				d="M54.7471 42.32C56.5917 42.32 58.0871 40.8246 58.0871 38.98C58.0871 37.1354 56.5917 35.64 54.7471 35.64C52.9025 35.64 51.4071 37.1354 51.4071 38.98C51.4071 40.8246 52.9025 42.32 54.7471 42.32Z"
+				fill="var(--color-muted)"
+				stroke="var(--color-on-muted)"
+				stroke-miterlimit="10"
+			/>
+			<path
+				d="M65.2371 42.32C67.0817 42.32 68.5771 40.8246 68.5771 38.98C68.5771 37.1354 67.0817 35.64 65.2371 35.64C63.3925 35.64 61.8971 37.1354 61.8971 38.98C61.8971 40.8246 63.3925 42.32 65.2371 42.32Z"
+				fill="var(--color-muted)"
+				stroke="var(--color-on-muted)"
+				stroke-miterlimit="10"
+			/>
+			<path
+				d="M91.877 50.7H37.517C35.4018 50.7 33.687 52.4147 33.687 54.53V66.16C33.687 68.2753 35.4018 69.99 37.517 69.99H91.877C93.9923 69.99 95.707 68.2753 95.707 66.16V54.53C95.707 52.4147 93.9923 50.7 91.877 50.7Z"
+				fill="var(--color-muted)"
+				stroke="var(--color-on-muted)"
+				stroke-miterlimit="10"
+			/>
+			<path
+				d="M44.2471 63.71C46.0917 63.71 47.5871 62.2146 47.5871 60.37C47.5871 58.5254 46.0917 57.03 44.2471 57.03C42.4025 57.03 40.9071 58.5254 40.9071 60.37C40.9071 62.2146 42.4025 63.71 44.2471 63.71Z"
+				fill="var(--color-muted)"
+				stroke="var(--color-on-muted)"
+				stroke-miterlimit="10"
+			/>
+			<path
+				d="M54.7471 63.71C56.5917 63.71 58.0871 62.2146 58.0871 60.37C58.0871 58.5254 56.5917 57.03 54.7471 57.03C52.9025 57.03 51.4071 58.5254 51.4071 60.37C51.4071 62.2146 52.9025 63.71 54.7471 63.71Z"
+				fill="var(--color-muted)"
+				stroke="var(--color-on-muted)"
+				stroke-miterlimit="10"
+			/>
+			<path
+				d="M65.2371 63.71C67.0817 63.71 68.5771 62.2146 68.5771 60.37C68.5771 58.5254 67.0817 57.03 65.2371 57.03C63.3925 57.03 61.8971 58.5254 61.8971 60.37C61.8971 62.2146 63.3925 63.71 65.2371 63.71Z"
+				fill="var(--color-muted)"
+				stroke="var(--color-on-muted)"
+				stroke-miterlimit="10"
+			/>
+			<path
+				d="M91.877 72.08H37.517C35.4018 72.08 33.687 73.7948 33.687 75.91V87.54C33.687 89.6553 35.4018 91.37 37.517 91.37H91.877C93.9923 91.37 95.707 89.6553 95.707 87.54V75.91C95.707 73.7948 93.9923 72.08 91.877 72.08Z"
+				fill="var(--color-muted)"
+				stroke="var(--color-on-muted)"
+				stroke-miterlimit="10"
+			/>
+			<path
+				d="M44.2471 85.09C46.0917 85.09 47.5871 83.5946 47.5871 81.75C47.5871 79.9054 46.0917 78.41 44.2471 78.41C42.4025 78.41 40.9071 79.9054 40.9071 81.75C40.9071 83.5946 42.4025 85.09 44.2471 85.09Z"
+				fill="var(--color-muted)"
+				stroke="var(--color-on-muted)"
+				stroke-miterlimit="10"
+			/>
+			<path
+				d="M54.7471 85.09C56.5917 85.09 58.0871 83.5946 58.0871 81.75C58.0871 79.9054 56.5917 78.41 54.7471 78.41C52.9025 78.41 51.4071 79.9054 51.4071 81.75C51.4071 83.5946 52.9025 85.09 54.7471 85.09Z"
+				fill="var(--color-muted)"
+				stroke="var(--color-on-muted)"
+				stroke-miterlimit="10"
+			/>
+			<path
+				d="M65.2371 85.09C67.0817 85.09 68.5771 83.5946 68.5771 81.75C68.5771 79.9054 67.0817 78.41 65.2371 78.41C63.3925 78.41 61.8971 79.9054 61.8971 81.75C61.8971 83.5946 63.3925 85.09 65.2371 85.09Z"
+				fill="var(--color-muted)"
+				stroke="var(--color-on-muted)"
+				stroke-miterlimit="10"
+			/>
+			<path
+				d="M96.797 53.67C108.246 53.67 117.527 44.3889 117.527 32.94C117.527 21.4911 108.246 12.21 96.797 12.21C85.3482 12.21 76.067 21.4911 76.067 32.94C76.067 44.3889 85.3482 53.67 96.797 53.67Z"
+				fill="var(--color-muted)"
+				stroke="var(--color-on-muted)"
+				stroke-miterlimit="10"
+			/>
+			<path
+				d="M111.517 47.98L117.037 53.51"
+				stroke="var(--color-on-muted)"
+				stroke-miterlimit="10"
+			/>
+			<path
+				d="M116.411 50.83L114.697 52.6226C113.926 53.429 113.955 54.7077 114.762 55.4786L129.652 69.7134C130.459 70.4843 131.737 70.4555 132.508 69.6491L134.222 67.8564C134.993 67.05 134.964 65.7713 134.158 65.0004L119.267 50.7656C118.461 49.9947 117.182 50.0235 116.411 50.83Z"
+				fill="var(--color-muted)"
+				stroke="var(--color-on-muted)"
+				stroke-miterlimit="10"
+			/>
+		</svg>
+	{/if}
+	{#if type === 'template'}
+		<svg class="empty-icon" viewBox="0 0 118 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+			<path
+				d="M102.734 26.66V30.97"
+				stroke="var(--color-on-muted)"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+			<path
+				d="M100.584 28.82H104.884"
+				stroke="var(--color-on-muted)"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+			<path
+				d="M14.5745 10.03V14.34"
+				stroke="var(--color-on-muted)"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+			<path
+				d="M12.4146 12.18H16.7246"
+				stroke="var(--color-on-muted)"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+			<path
+				d="M48.0344 1.96C48.5757 1.96 49.0144 1.52124 49.0144 0.98C49.0144 0.43876 48.5757 0 48.0344 0C47.4932 0 47.0544 0.43876 47.0544 0.98C47.0544 1.52124 47.4932 1.96 48.0344 1.96Z"
+				fill="var(--color-on-muted)"
+			/>
+			<path
+				d="M79.4545 40.92C71.0745 40.92 62.5645 40.59 54.5945 38.37C46.7745 36.17 39.6345 31.99 33.1945 27.17C28.9945 23.99 25.1945 21.47 19.7445 21.85C14.4314 22.1238 9.3459 24.0935 5.2345 27.47C-1.6955 33.53 -0.645498 44.74 2.1245 52.62C6.2845 64.49 18.9845 72.74 29.7045 78.11C42.1345 84.32 55.7845 87.93 69.4845 90C81.4845 91.83 96.8945 93.15 107.295 85.31C116.855 78.11 119.474 61.67 117.134 50.57C116.566 47.2887 114.816 44.3292 112.215 42.25C105.505 37.34 95.5045 40.62 87.9645 40.78C85.1645 40.84 82.3145 40.91 79.4545 40.92Z"
+				fill="var(--color-muted)"
+			/>
+			<path
+				d="M58.9645 109.46C79.2389 109.46 95.6745 108.435 95.6745 107.17C95.6745 105.905 79.2389 104.88 58.9645 104.88C38.6901 104.88 22.2545 105.905 22.2545 107.17C22.2545 108.435 38.6901 109.46 58.9645 109.46Z"
+				fill="var(--color-muted)"
+			/>
+			<path
+				d="M74.5591 3.32266L25.6838 9.93086C24.1185 10.1425 23.0212 11.583 23.2328 13.1483L32.711 83.2504C32.9226 84.8157 34.3631 85.9131 35.9284 85.7014L84.8037 79.0932C86.369 78.8816 87.4663 77.4411 87.2547 75.8758L77.7765 5.77367C77.5649 4.20838 76.1244 3.11102 74.5591 3.32266Z"
+				fill="var(--color-on-muted)"
+			/>
+			<path
+				d="M90.8045 13.62H41.4845C39.905 13.62 38.6245 14.9005 38.6245 16.48V87.22C38.6245 88.7995 39.905 90.08 41.4845 90.08H90.8045C92.384 90.08 93.6645 88.7995 93.6645 87.22V16.48C93.6645 14.9005 92.384 13.62 90.8045 13.62Z"
+				fill="var(--color-muted)"
+				stroke="var(--color-on-muted)"
+				stroke-miterlimit="10"
+			/>
+			<path
+				d="M77.9944 68.53H54.2844C53.3953 68.53 52.6744 69.2508 52.6744 70.14V70.15C52.6744 71.0392 53.3953 71.76 54.2844 71.76H77.9944C78.8836 71.76 79.6044 71.0392 79.6044 70.15V70.14C79.6044 69.2508 78.8836 68.53 77.9944 68.53Z"
+				fill="var(--color-on-muted)"
+			/>
+			<path
+				d="M77.1445 81.73H54.3945C54.1239 81.73 53.9045 81.9494 53.9045 82.22V82.37C53.9045 82.6406 54.1239 82.86 54.3945 82.86H77.1445C77.4152 82.86 77.6345 82.6406 77.6345 82.37V82.22C77.6345 81.9494 77.4152 81.73 77.1445 81.73Z"
+				fill="var(--color-on-muted)"
+			/>
+			<path
+				d="M82.9445 76.44H49.4345C49.0756 76.44 48.7845 76.731 48.7845 77.09C48.7845 77.449 49.0756 77.74 49.4345 77.74H82.9445C83.3035 77.74 83.5945 77.449 83.5945 77.09C83.5945 76.731 83.3035 76.44 82.9445 76.44Z"
+				fill="var(--color-on-muted)"
+			/>
+			<path
+				d="M89.0745 15.94H43.2145C42.0768 15.94 41.1545 16.8623 41.1545 18V57.77C41.1545 58.9077 42.0768 59.83 43.2145 59.83H89.0745C90.2122 59.83 91.1345 58.9077 91.1345 57.77V18C91.1345 16.8623 90.2122 15.94 89.0745 15.94Z"
+				fill="var(--color-muted)"
+				stroke="var(--color-on-muted)"
+				stroke-miterlimit="10"
+			/>
+			<path
+				d="M72.2645 47.51C72.5938 47.5077 72.9144 47.4039 73.1825 47.2126C73.4506 47.0214 73.6532 46.7521 73.7626 46.4414C73.872 46.1308 73.8828 45.794 73.7937 45.477C73.7045 45.1599 73.5197 44.8781 73.2645 44.67C71.1761 42.9479 68.5476 42.017 65.8408 42.0408C63.1341 42.0645 60.5223 43.0415 58.4645 44.8C58.2148 45.015 58.0371 45.3014 57.9554 45.6205C57.8736 45.9397 57.8918 46.2762 58.0073 46.5848C58.1229 46.8933 58.3303 47.1589 58.6016 47.3458C58.8729 47.5328 59.195 47.6319 59.5245 47.63L72.2645 47.51Z"
+				stroke="var(--color-on-muted)"
+				stroke-width="0.71"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+			<path
+				d="M80.4345 37.49L74.6045 34.13L80.4345 30.77"
+				stroke="var(--color-on-muted)"
+				stroke-width="0.71"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+			<path
+				d="M51.3745 37.49L57.1945 34.13L51.3745 30.77"
+				stroke="var(--color-on-muted)"
+				stroke-width="0.71"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+			<path
+				d="M19.4045 58.83V63.13"
+				stroke="var(--color-on-muted)"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+			<path
+				d="M17.2545 60.98H21.5545"
+				stroke="var(--color-on-muted)"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+			<path
+				d="M100.904 61.87C101.446 61.87 101.884 61.4312 101.884 60.89C101.884 60.3488 101.446 59.91 100.904 59.91C100.363 59.91 99.9244 60.3488 99.9244 60.89C99.9244 61.4312 100.363 61.87 100.904 61.87Z"
+				fill="var(--color-on-muted)"
+			/>
+		</svg>
+	{/if}
+	<div>
+		<h6>Title</h6>
+		<p>Description Error</p>
+	</div>
+</div>

package/dist/display/Empty.svelte.d.ts

@@ -0,0 +1,11 @@
+type Props = {
+    type?: 'playlist' | 'result' | 'data' | 'template';
+    class?: string;
+    title?: string;
+    description?: string;
+    href?: string;
+    onclick?: () => void;
+};
+declare const Empty: import("svelte").Component<Props, {}, "">;
+type Empty = ReturnType<typeof Empty>;
+export default Empty;

package/dist/display/Icon.svelte

@@ -0,0 +1,20 @@
+<script lang="ts" module>
+	export type IconData = {
+		body: string;
+		viewbox: string;
+	};
+</script>
+
+<script lang="ts">
+	import { cn } from '../utils/class-names.js';
+
+	type Props = {
+		icon: IconData;
+		class?: string;
+	};
+	const { icon, class: className }: Props = $props();
+</script>
+
+<svg viewBox={icon.viewbox} class={cn('icon', className)} xmlns="http://www.w3.org/2000/svg">
+	{@html icon.body}
+</svg>

package/dist/display/Icon.svelte.d.ts

@@ -0,0 +1,11 @@
+export type IconData = {
+    body: string;
+    viewbox: string;
+};
+type Props = {
+    icon: IconData;
+    class?: string;
+};
+declare const Icon: import("svelte").Component<Props, {}, "">;
+type Icon = ReturnType<typeof Icon>;
+export default Icon;

package/dist/display/Item.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+	import { Avatar } from '../index.js';
+	import { cn } from '../utils/class-names.js';
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		id?: string | number;
+		label?: string;
+		description?: string;
+		src?: string;
+		variant?: 'ghost' | 'outlined' | 'surface' | 'primary' | 'secondary' | 'muted';
+		size?: 'sm' | 'md' | 'lg';
+		status?: 'online' | 'offline' | 'busy' | 'away';
+		href?: string;
+		isDisabled?: boolean;
+		isActive?: boolean;
+		isFocused?: boolean;
+		isCompact?: boolean;
+		hasDivider?: boolean;
+		hasShadow?: boolean;
+		onclick?: (id: string | number) => void;
+		actions?: Snippet;
+		isSolid?: boolean;
+		class?: string;
+	};
+
+	let {
+		id,
+		label,
+		description,
+		src,
+		variant = 'ghost',
+		size = 'md',
+		status,
+		href,
+		isDisabled,
+		isActive,
+		isFocused,
+		isCompact,
+		hasDivider,
+		hasShadow,
+		onclick,
+		actions,
+		isSolid,
+		class: className
+	}: Props = $props();
+
+	const variantClasses = {
+		ghost: 'is-ghost',
+		outlined: 'is-outlined',
+		surface: 'is-surface',
+		primary: 'is-primary',
+		secondary: 'is-secondary',
+		muted: 'is-muted'
+	};
+
+	const sizeClasses = {
+		sm: 'is-sm',
+		md: 'is-md',
+		lg: 'is-lg'
+	};
+
+	const avatarSizes: Record<string, 'sm' | 'md' | 'lg' | 'xl'> = {
+		sm: 'md',
+		md: 'lg',
+		lg: 'xl'
+	};
+
+	const isInteractive = $derived(!!href || !!onclick);
+
+	let itemClasses = $derived(
+		cn(
+			'item',
+			variantClasses[variant],
+			sizeClasses[size],
+			isInteractive && !isDisabled && 'is-interactive',
+			isActive && 'is-active',
+			isFocused && 'is-focused',
+			isDisabled && 'is-disabled',
+			isCompact && 'is-compact',
+			isSolid && 'is-solid',
+			hasDivider && 'has-divider',
+			hasShadow && 'has-shadow',
+			!!src && !label && !description && 'has-icon-only',
+			className
+		)
+	);
+</script>
+
+{#snippet itemContent()}
+	{#if src}
+		<Avatar {src} {status} size={avatarSizes[size]} variant="transparent" />
+	{/if}
+	<div class="item-body">
+		<div class="item-label">{label}</div>
+		{#if description}
+			<div class="item-description">{description}</div>
+		{/if}
+	</div>
+	{#if actions}
+		<div class="item-actions">
+			{@render actions()}
+		</div>
+	{/if}
+{/snippet}
+
+{#if href && !isDisabled}
+	<a {href} class={itemClasses} aria-disabled={isDisabled}>
+		{@render itemContent()}
+	</a>
+{:else if onclick && id && !isDisabled}
+	<button type="button" class={itemClasses} onclick={() => onclick(id)} disabled={isDisabled}>
+		{@render itemContent()}
+	</button>
+{:else}
+	<div class={itemClasses} aria-disabled={isDisabled} aria-selected={isActive}>
+		{@render itemContent()}
+	</div>
+{/if}

package/dist/display/Item.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    id?: string | number;
+    label?: string;
+    description?: string;
+    src?: string;
+    variant?: 'ghost' | 'outlined' | 'surface' | 'primary' | 'secondary' | 'muted';
+    size?: 'sm' | 'md' | 'lg';
+    status?: 'online' | 'offline' | 'busy' | 'away';
+    href?: string;
+    isDisabled?: boolean;
+    isActive?: boolean;
+    isFocused?: boolean;
+    isCompact?: boolean;
+    hasDivider?: boolean;
+    hasShadow?: boolean;
+    onclick?: (id: string | number) => void;
+    actions?: Snippet;
+    isSolid?: boolean;
+    class?: string;
+};
+declare const Item: import("svelte").Component<Props, {}, "">;
+type Item = ReturnType<typeof Item>;
+export default Item;

package/dist/display/Loading.svelte

@@ -0,0 +1,8 @@
+<script>
+	import { DotsMoveIcon } from '../icons/index.js';
+	import { Icon } from '../index.js';
+</script>
+
+<span class="btn-loading">
+	<Icon icon={DotsMoveIcon} class="loading-icon" />
+</span>