@indielayer/ui 1.2.0 → 1.4.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 - Indielayer
+Copyright (c) 2024 - Indielayer
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -31,13 +31,13 @@ npm init @indielayer/ui
 
 ### Documentation
 
-The documentation is located inside [/packages/docs](./packages/docs)
+The documentation is located inside [/packages/ui/docs](./packages/ui/docs)
 
-- Run `pnpm build` once from project root to build the UI library
-- Run `pnpm run docs` from project root to enter docs dev mode
+- Run `pnpm dev` for development
+- Run `pnpm build:docs` from project root to build the documentation
 
 ## License
 
 [MIT](./LICENSE)
 
-Copyright (c) 2023, Indielayer
+Copyright (c) 2024, Indielayer

package/docs/App.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { provide, ref } from 'vue'
+import { RouterView } from 'vue-router'
+import { BaseTheme, CarbonTheme } from '@indielayer/ui'
+
+const lastTheme = localStorage.getItem('THEME') || ''
+
+const themes = [BaseTheme, CarbonTheme]
+const theme = ref(themes.find((t) => t.name === lastTheme) || BaseTheme)
+
+provide('selectTheme', {
+  theme,
+  themes,
+  setTheme(key: string) {
+    theme.value = themes.find((t) => t.name === key) || BaseTheme
+    localStorage.setItem('THEME', theme.value.name)
+  },
+})
+</script>
+
+<template>
+  <x-theme-provider :theme="theme">
+    <router-view />
+  </x-theme-provider>
+</template>

package/docs/assets/css/hljs.css

@@ -0,0 +1,302 @@
+/* stylelint-disable */
+.hljs {
+  display: block;
+  overflow-x: auto;
+  background: #1e2a3b;
+  border-radius: 8px;
+  line-height: 1.5;
+  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+  font-size: 0.875rem;
+}
+
+.hljs,
+.hljs-subst {
+  color: #c2c6cd;
+}
+
+.hljs-selector-tag {
+  color: #e06c75;
+}
+
+.hljs-selector-id {
+  color: #6ed08c;
+  font-weight: bold;
+}
+
+.hljs-selector-class {
+  color: #6ed08c;
+}
+
+.hljs-selector-attr {
+  color: #6ed08c;
+}
+
+.hljs-selector-pseudo {
+  color: #88c0d0;
+}
+
+.hljs-addition {
+  background-color: rgb(163 190 140 / 50%);
+}
+
+.hljs-deletion {
+  background-color: rgb(191 97 106 / 50%);
+}
+
+.hljs-built_in,
+.hljs-type {
+  color: #44b0f5;
+}
+
+.hljs-class {
+  color: #6ed08c;
+}
+
+.hljs-function {
+  color: #88c0d0;
+}
+
+.hljs-function > .hljs-title {
+  color: #88c0d0;
+}
+
+.hljs-keyword,
+.hljs-literal,
+.hljs-symbol {
+  color: #e06c75;
+}
+
+.hljs-number {
+  color: #d278c7;
+}
+
+.hljs-regexp {
+  color: #ebcb8b;
+}
+
+.hljs-string {
+  color: #ecbf70;
+}
+
+.hljs-title {
+  color: #6ed08c;
+}
+
+.hljs-params {
+  color: #c2c6cd;
+}
+
+.hljs-bullet {
+  color: #e06c75;
+}
+
+.hljs-code {
+  color: #6ed08c;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-formula {
+  color: #6ed08c;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-link:hover {
+  text-decoration: underline;
+}
+
+.hljs-quote {
+  color: #4c566a;
+}
+
+.hljs-comment {
+  color: #8a909c;
+  font-weight: 400;
+}
+
+.hljs-doctag {
+  color: #6ed08c;
+}
+
+.hljs-meta,
+.hljs-meta-keyword {
+  color: #5e81ac;
+}
+
+.hljs-meta-string {
+  color: #ecbf70;
+}
+
+.hljs-attr {
+  color: #6ed08c;
+}
+
+.hljs-attribute {
+  color: #c2c6cd;
+}
+
+.hljs-builtin-name {
+  color: #e06c75;
+}
+
+.hljs-name {
+  color: #e06c75;
+}
+
+.hljs-section {
+  color: #88c0d0;
+}
+
+.hljs-tag {
+  color: #e06c75;
+}
+
+.hljs-variable {
+  color: #c2c6cd;
+}
+
+.hljs-template-variable {
+  color: #c2c6cd;
+}
+
+.hljs-template-tag {
+  color: #5e81ac;
+}
+
+.abnf .hljs-attribute {
+  color: #88c0d0;
+}
+
+.abnf .hljs-symbol {
+  color: #ebcb8b;
+}
+
+.apache .hljs-attribute {
+  color: #88c0d0;
+}
+
+.apache .hljs-section {
+  color: #e06c75;
+}
+
+.arduino .hljs-built_in {
+  color: #88c0d0;
+}
+
+.aspectj .hljs-meta {
+  color: #d08770;
+}
+
+.aspectj > .hljs-title {
+  color: #88c0d0;
+}
+
+.bnf .hljs-attribute {
+  color: #6ed08c;
+}
+
+.clojure .hljs-name {
+  color: #88c0d0;
+}
+
+.clojure .hljs-symbol {
+  color: #ebcb8b;
+}
+
+.coq .hljs-built_in {
+  color: #88c0d0;
+}
+
+.cpp .hljs-meta-string {
+  color: #6ed08c;
+}
+
+.css .hljs-built_in {
+  color: #88c0d0;
+}
+
+.css .hljs-keyword {
+  color: #d08770;
+}
+
+.diff .hljs-meta {
+  color: #6ed08c;
+}
+
+.ebnf .hljs-attribute {
+  color: #6ed08c;
+}
+
+.glsl .hljs-built_in {
+  color: #88c0d0;
+}
+
+.groovy .hljs-meta:not(:first-child) {
+  color: #d08770;
+}
+
+.haxe .hljs-meta {
+  color: #d08770;
+}
+
+.java .hljs-meta {
+  color: #d08770;
+}
+
+.ldif .hljs-attribute {
+  color: #6ed08c;
+}
+
+.lisp .hljs-name {
+  color: #88c0d0;
+}
+
+.lua .hljs-built_in {
+  color: #88c0d0;
+}
+
+.moonscript .hljs-built_in {
+  color: #88c0d0;
+}
+
+.nginx .hljs-attribute {
+  color: #88c0d0;
+}
+
+.nginx .hljs-section {
+  color: #5e81ac;
+}
+
+.pf .hljs-built_in {
+  color: #88c0d0;
+}
+
+.processing .hljs-built_in {
+  color: #88c0d0;
+}
+
+.scss .hljs-keyword {
+  color: #e06c75;
+}
+
+.stylus .hljs-keyword {
+  color: #e06c75;
+}
+
+.swift .hljs-meta {
+  color: #d08770;
+}
+
+.vim .hljs-built_in {
+  color: #88c0d0;
+  font-style: italic;
+}
+
+.yaml .hljs-meta {
+  color: #d08770;
+}

package/docs/assets/css/tailwind.css

@@ -0,0 +1,46 @@
+@import url("https://cdn.jsdelivr.net/npm/firacode@6.2.0/distr/fira_code.css");
+@import url("https://1.www.s81c.com/common/carbon/plex/sans.css");
+@import url("https://1.www.s81c.com/common/carbon/plex/mono.css");
+
+html,
+body {
+  height: 100%;
+}
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  .text-2xs {
+    font-size: 0.625rem;
+    line-height: 1rem;
+  }
+
+  .text-h1 {
+    @apply text-5xl font-black;
+  }
+
+  .text-h2 {
+    @apply text-4xl font-black;
+  }
+
+  .text-h3 {
+    @apply text-2xl font-black;
+  }
+
+  .text-h4 {
+    @apply text-xl font-black;
+  }
+
+  .text-overline {
+    @apply tracking-widest uppercase text-2xs;
+  }
+}
+
+.inset-center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}

package/docs/assets/images/error.svg

@@ -0,0 +1 @@
+<svg id="a706cf1c-1654-439b-8fcf-310eb7aa0e00" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="1120.59226" height="777.91584" viewBox="0 0 1120.59226 777.91584"><title>not found</title><circle cx="212.59226" cy="103" r="64" fill="#ff6584"/><path d="M563.68016,404.16381c0,151.01141-89.77389,203.73895-200.51559,203.73895S162.649,555.17522,162.649,404.16381,363.16457,61.04208,363.16457,61.04208,563.68016,253.1524,563.68016,404.16381Z" transform="translate(-39.70387 -61.04208)" fill="#f2f2f2"/><polygon points="316.156 523.761 318.21 397.378 403.674 241.024 318.532 377.552 319.455 320.725 378.357 207.605 319.699 305.687 319.699 305.687 321.359 203.481 384.433 113.423 321.621 187.409 322.658 0 316.138 248.096 316.674 237.861 252.547 139.704 315.646 257.508 309.671 371.654 309.493 368.625 235.565 265.329 309.269 379.328 308.522 393.603 308.388 393.818 308.449 394.99 293.29 684.589 313.544 684.589 315.974 535.005 389.496 421.285 316.156 523.761" fill="#3f3d56"/><path d="M1160.29613,466.01367c0,123.61-73.4842,166.77-164.13156,166.77s-164.13156-43.16-164.13156-166.77S996.16457,185.15218,996.16457,185.15218,1160.29613,342.40364,1160.29613,466.01367Z" transform="translate(-39.70387 -61.04208)" fill="#f2f2f2"/><polygon points="950.482 552.833 952.162 449.383 1022.119 321.4 952.426 433.154 953.182 386.639 1001.396 294.044 953.382 374.329 953.382 374.329 954.741 290.669 1006.369 216.952 954.954 277.514 955.804 124.11 950.467 327.188 950.906 318.811 898.414 238.464 950.064 334.893 945.173 428.327 945.027 425.847 884.514 341.294 944.844 434.608 944.232 446.293 944.123 446.469 944.173 447.428 931.764 684.478 948.343 684.478 950.332 562.037 1010.514 468.952 950.482 552.833" fill="#3f3d56"/><ellipse cx="554.59226" cy="680.47903" rx="554.59226" ry="28.03433" fill="#3f3d56"/><ellipse cx="892.44491" cy="726.79663" rx="94.98858" ry="4.80162" fill="#3f3d56"/><ellipse cx="548.71959" cy="773.11422" rx="94.98858" ry="4.80162" fill="#3f3d56"/><ellipse cx="287.94432" cy="734.27887" rx="217.01436" ry="10.96996" fill="#3f3d56"/><circle cx="97.08375" cy="566.26982" r="79" fill="#2f2e41"/><rect x="99.80546" y="689.02332" width="24" height="43" transform="translate(-31.32451 -62.31008) rotate(0.67509)" fill="#2f2e41"/><rect x="147.80213" y="689.58887" width="24" height="43" transform="translate(-31.31452 -62.87555) rotate(0.67509)" fill="#2f2e41"/><ellipse cx="119.54569" cy="732.61606" rx="7.5" ry="20" transform="translate(-654.1319 782.47948) rotate(-89.32491)" fill="#2f2e41"/><ellipse cx="167.55414" cy="732.18168" rx="7.5" ry="20" transform="translate(-606.25475 830.05533) rotate(-89.32491)" fill="#2f2e41"/><circle cx="99.31925" cy="546.29477" r="27" fill="#fff"/><circle cx="99.31925" cy="546.29477" r="9" fill="#3f3d56"/><path d="M61.02588,552.94636c-6.04185-28.64075,14.68758-57.26483,46.30049-63.93367s62.13813,11.14292,68.18,39.78367-14.97834,38.93-46.59124,45.59886S67.06774,581.58712,61.02588,552.94636Z" transform="translate(-39.70387 -61.04208)" fill="#6c63ff"/><path d="M257.29613,671.38411c0,55.07585-32.73985,74.3063-73.13,74.3063q-1.40351,0-2.80255-.0312c-1.87139-.04011-3.72494-.1292-5.55619-.254-36.45135-2.57979-64.77127-22.79937-64.77127-74.02113,0-53.00843,67.73872-119.89612,72.827-124.84633l.00892-.00889c.19608-.19159.29409-.28516.29409-.28516S257.29613,616.30827,257.29613,671.38411Z" transform="translate(-39.70387 -61.04208)" fill="#6c63ff"/><path d="M181.50168,737.26482l26.747-37.37367-26.81386,41.4773-.07125,4.29076c-1.87139-.04011-3.72494-.1292-5.55619-.254l2.88282-55.10258-.0223-.42775.049-.0802.27179-5.20415-26.88076-41.5798,26.96539,37.67668.06244,1.105,2.17874-41.63324-23.0132-42.96551,23.29391,35.6583,2.26789-86.31419.00892-.294v.28516l-.37871,68.064,22.91079-26.98321-23.00435,32.84678-.60595,37.27566L204.18523,621.958l-21.4805,41.259-.33863,20.723,31.05561-49.79149-31.17146,57.023Z" transform="translate(-39.70387 -61.04208)" fill="#3f3d56"/><circle cx="712.48505" cy="565.41532" r="79" fill="#2f2e41"/><rect x="741.77716" y="691.82355" width="24" height="43" transform="translate(-215.99457 191.86399) rotate(-17.08345)" fill="#2f2e41"/><rect x="787.6593" y="677.72286" width="24" height="43" transform="matrix(0.95588, -0.29376, 0.29376, 0.95588, -209.82788, 204.72037)" fill="#2f2e41"/><ellipse cx="767.887" cy="732.00275" rx="20" ry="7.5" transform="translate(-220.8593 196.83312) rotate(-17.08345)" fill="#2f2e41"/><ellipse cx="813.47537" cy="716.94619" rx="20" ry="7.5" transform="translate(-214.42477 209.56103) rotate(-17.08345)" fill="#2f2e41"/><circle cx="708.52153" cy="545.71023" r="27" fill="#fff"/><circle cx="708.52153" cy="545.71023" r="9" fill="#3f3d56"/><path d="M657.35526,578.74316c-14.48957-25.43323-3.47841-59.016,24.59412-75.0092s62.57592-8.34055,77.06549,17.09268-2.39072,41.6435-30.46325,57.63671S671.84483,604.17639,657.35526,578.74316Z" transform="translate(-39.70387 -61.04208)" fill="#6c63ff"/><path d="M611.29613,661.29875c0,50.55711-30.05368,68.20979-67.13,68.20979q-1.28835,0-2.57261-.02864c-1.71785-.03682-3.41933-.1186-5.10033-.23313-33.46068-2.36813-59.45707-20.92878-59.45707-67.948,0-48.65932,62.18106-110.05916,66.85186-114.60322l.00819-.00817c.18-.17587.27-.26177.27-.26177S611.29613,610.74164,611.29613,661.29875Z" transform="translate(-39.70387 -61.04208)" fill="#6c63ff"/><path d="M541.72029,721.77424l24.55253-34.30732-24.6139,38.07426-.0654,3.93872c-1.71785-.03682-3.41933-.1186-5.10033-.23313l2.6463-50.58165-.02047-.39266.045-.07361.24949-4.77718-24.67531-38.16836,24.753,34.58547.05731,1.01433,2-38.21741-21.12507-39.44039L541.80616,625.928l2.08182-79.23247.00819-.26994v.26177l-.34764,62.47962,21.031-24.76934-21.11693,30.15184-.55624,34.21735,19.63634-32.839-19.71812,37.87389-.31085,19.0228,28.50763-45.70631-28.614,52.34448Z" transform="translate(-39.70387 -61.04208)" fill="#3f3d56"/><path d="M875.29613,682.38411c0,55.07585-32.73985,74.3063-73.13,74.3063q-1.4035,0-2.80255-.0312c-1.87139-.04011-3.72494-.1292-5.55619-.254-36.45135-2.57979-64.77127-22.79937-64.77127-74.02113,0-53.00843,67.73872-119.89612,72.827-124.84633l.00892-.00889c.19608-.19159.29409-.28516.29409-.28516S875.29613,627.30827,875.29613,682.38411Z" transform="translate(-39.70387 -61.04208)" fill="#6c63ff"/><path d="M799.50168,748.26482l26.747-37.37367-26.81386,41.4773-.07125,4.29076c-1.87139-.04011-3.72494-.1292-5.55619-.254l2.88282-55.10258-.0223-.42775.049-.0802.27179-5.20415L770.108,654.01076l26.96539,37.67668.06244,1.105,2.17874-41.63324-23.0132-42.96551,23.29391,35.6583,2.26789-86.31419.00892-.294v.28516l-.37871,68.064,22.91079-26.98321-23.00435,32.84678-.606,37.27566L822.18523,632.958l-21.4805,41.259-.33863,20.723,31.05561-49.79149-31.17146,57.023Z" transform="translate(-39.70387 -61.04208)" fill="#3f3d56"/><ellipse cx="721.51694" cy="656.82212" rx="12.40027" ry="39.5" transform="translate(-220.83517 966.22323) rotate(-64.62574)" fill="#2f2e41"/><ellipse cx="112.51694" cy="651.82212" rx="12.40027" ry="39.5" transform="translate(-574.07936 452.71367) rotate(-68.15829)" fill="#2f2e41"/></svg>

package/docs/assets/images/logo_mini.svg

@@ -0,0 +1,10 @@
+<svg width="162" height="154" viewBox="0 0 162 154" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 95.1028L80.7355 153.82L161.471 95.1028L80.7353 35.7745L0 95.1028ZM16.9443 95.061L80.7355 141.455L144.527 95.061L80.7353 48.1842L16.9443 95.061Z" fill="url(#paint0_linear_0_1)"/>
+<path d="M0 59.6282L80.7353 0.299805L161.471 59.6282L80.7355 118.345L0 59.6282Z" fill="#10B981"/>
+<defs>
+<linearGradient id="paint0_linear_0_1" x1="80.7354" y1="39.9999" x2="80.7354" y2="113.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#065F46"/>
+<stop offset="1" stop-color="#10B981"/>
+</linearGradient>
+</defs>
+</svg>

package/docs/assets/images/logo_word.svg

@@ -0,0 +1,12 @@
+<svg width="870" height="190" viewBox="0 0 870 190" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M31.3767 7.16549V140.975H0V7.16549H31.3767Z" fill="#1E293B"/>
+<path d="M104.881 37.4871C116.869 37.4871 126.41 41.4015 133.505 49.2304C140.722 56.937 144.331 67.5794 144.331 81.1576V140.975H113.138V85.3779C113.138 78.5276 111.364 73.2064 107.816 69.4143C104.269 65.6221 99.4982 63.7261 93.5042 63.7261C87.5102 63.7261 82.7395 65.6221 79.192 69.4143C75.6446 73.2064 73.8709 78.5276 73.8709 85.3779V140.975H42.4941V38.588H73.8709V52.1662C77.0513 47.6402 81.3328 44.0927 86.7151 41.5238C92.0975 38.8327 98.1526 37.4871 104.881 37.4871Z" fill="#1E293B"/>
+<path d="M150.721 89.5981C150.721 79.0781 152.679 69.8424 156.593 61.8912C160.63 53.94 166.073 47.8237 172.924 43.5422C179.774 39.2608 187.419 37.1201 195.86 37.1201C202.588 37.1201 208.704 38.5268 214.209 41.3403C219.836 44.1539 224.24 47.946 227.42 52.7167V0.19288H258.797V140.975H227.42V126.296C224.484 131.189 220.264 135.104 214.759 138.039C209.377 140.975 203.077 142.443 195.86 142.443C187.419 142.443 179.774 140.302 172.924 136.021C166.073 131.617 160.63 125.44 156.593 117.489C152.679 109.415 150.721 100.118 150.721 89.5981ZM227.42 89.7816C227.42 81.9527 225.218 75.7752 220.815 71.2492C216.533 66.7231 211.273 64.46 205.034 64.46C198.796 64.46 193.475 66.7231 189.071 71.2492C184.789 75.6529 182.649 81.7692 182.649 89.5981C182.649 97.427 184.789 103.666 189.071 108.314C193.475 112.84 198.796 115.103 205.034 115.103C211.273 115.103 216.533 112.84 220.815 108.314C225.218 103.788 227.42 97.6105 227.42 89.7816Z" fill="#1E293B"/>
+<path d="M285.656 33.9456C280.151 33.9456 275.625 32.3554 272.077 29.1749C268.652 25.8721 266.94 21.8353 266.94 17.0646C266.94 12.1715 268.652 8.13471 272.077 4.95422C275.625 1.65141 280.151 0 285.656 0C291.038 0 295.442 1.65141 298.867 4.95422C302.414 8.13471 304.188 12.1715 304.188 17.0646C304.188 21.8353 302.414 25.8721 298.867 29.1749C295.442 32.3554 291.038 33.9456 285.656 33.9456ZM301.252 42.588V140.975H269.876V42.588H301.252Z" fill="#1E293B"/>
+<path d="M410.109 88.1302C410.109 91.066 409.925 94.1242 409.558 97.3047H338.548C339.037 103.666 341.055 108.559 344.603 111.984C348.273 115.287 352.737 116.938 357.997 116.938C365.826 116.938 371.27 113.635 374.328 107.03H407.723C406.011 113.758 402.891 119.813 398.365 125.195C393.961 130.577 388.396 134.798 381.668 137.856C374.94 140.914 367.417 142.443 359.098 142.443C349.068 142.443 340.138 140.302 332.309 136.021C324.48 131.74 318.364 125.623 313.96 117.672C309.556 109.721 307.354 100.424 307.354 89.7816C307.354 79.1392 309.495 69.8424 313.776 61.8912C318.18 53.94 324.297 47.8237 332.125 43.5422C339.954 39.2608 348.945 37.1201 359.098 37.1201C369.007 37.1201 377.814 39.1996 385.521 43.3587C393.228 47.5178 399.221 53.4507 403.503 61.1572C407.907 68.8638 410.109 77.8548 410.109 88.1302ZM377.998 79.8732C377.998 74.4908 376.163 70.2094 372.493 67.0289C368.823 63.8484 364.236 62.2582 358.731 62.2582C353.471 62.2582 349.006 63.7873 345.337 66.8454C341.789 69.9036 339.587 74.2462 338.731 79.8732H377.998Z" fill="#1E293B"/>
+<path d="M447.64 116.755H488.742V140.975H416.264V7.16549H447.64V116.755Z" fill="#1E293B"/>
+<path d="M561.201 126.663C558.51 131.434 554.045 135.348 547.807 138.406C541.568 141.465 534.901 142.994 527.806 142.994C521.568 142.994 515.879 141.77 510.742 139.324C505.726 136.755 501.751 133.208 498.815 128.681C495.879 124.155 494.411 118.895 494.411 112.901C494.411 103.482 498.081 95.8368 505.42 89.9651C512.76 83.9711 523.708 80.9741 538.265 80.9741H561.201C560.957 75.3471 559.366 70.9433 556.431 67.7629C553.617 64.46 549.703 62.8086 544.687 62.8086C540.161 62.8086 536.43 63.9707 533.494 66.2949C530.559 68.6191 528.601 71.7996 527.623 75.8364H496.246C497.714 68.3745 500.65 61.7077 505.053 55.836C509.457 49.9644 515.084 45.3771 521.935 42.0743C528.907 38.6492 536.675 36.9366 545.238 36.9366C554.412 36.9366 562.608 38.7103 569.825 42.2578C577.043 45.8053 582.67 50.943 586.706 57.6709C590.743 64.2766 592.762 71.9831 592.762 80.7906V140.975H561.201V126.663ZM538.816 119.323C542.485 119.323 546.033 118.528 549.458 116.938C552.883 115.226 555.635 112.84 557.715 109.782C559.917 106.602 561.018 102.993 561.018 98.9561V97.6717H541.568C536.43 97.6717 532.577 98.7115 530.008 100.791C527.562 102.748 526.338 105.378 526.338 108.681C526.338 111.984 527.439 114.614 529.641 116.571C531.843 118.406 534.901 119.323 538.816 119.323Z" fill="#1E293B"/>
+<path d="M703.585 38.588L639.364 189.6H605.602L629.088 137.489L587.436 38.588H622.483L646.153 102.626L669.639 38.588H703.585Z" fill="#1E293B"/>
+<path d="M798.603 88.1302C798.603 91.066 798.419 94.1242 798.052 97.3047H727.042C727.531 103.666 729.549 108.559 733.097 111.984C736.767 115.287 741.231 116.938 746.491 116.938C754.32 116.938 759.764 113.635 762.822 107.03H796.217C794.505 113.758 791.385 119.813 786.859 125.195C782.456 130.577 776.89 134.798 770.162 137.856C763.434 140.914 755.911 142.443 747.592 142.443C737.562 142.443 728.632 140.302 720.803 136.021C712.974 131.74 706.858 125.623 702.454 117.672C698.05 109.721 695.848 100.424 695.848 89.7816C695.848 79.1392 697.989 69.8424 702.271 61.8912C706.674 53.94 712.791 47.8237 720.619 43.5422C728.448 39.2608 737.439 37.1201 747.592 37.1201C757.501 37.1201 766.308 39.1996 774.015 43.3587C781.721 47.5178 787.715 53.4507 791.997 61.1572C796.401 68.8638 798.603 77.8548 798.603 88.1302ZM766.492 79.8732C766.492 74.4908 764.657 70.2094 760.987 67.0289C757.317 63.8484 752.73 62.2582 747.225 62.2582C741.965 62.2582 737.5 63.7873 733.831 66.8454C730.283 69.9036 728.081 74.2462 727.225 79.8732H766.492Z" fill="#1E293B"/>
+<path d="M837.358 55.6525C841.027 50.0255 845.615 45.6218 851.119 42.4413C856.624 39.1385 862.74 37.4871 869.468 37.4871V70.6987H860.844C853.015 70.6987 847.144 72.4113 843.229 75.8364C839.315 79.1392 837.358 85.0109 837.358 93.4514V140.975H805.981V38.588H837.358V55.6525Z" fill="#1E293B"/>
+</svg>

package/docs/assets/images/logo_word_dark.svg

@@ -0,0 +1,12 @@
+<svg width="871" height="190" viewBox="0 0 871 190" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M32.1453 7.16549V140.975H0.768555V7.16549H32.1453Z" fill="white"/>
+<path d="M105.649 37.4871C117.637 37.4871 127.179 41.4015 134.274 49.2304C141.491 56.937 145.099 67.5794 145.099 81.1576V140.975H113.906V85.3779C113.906 78.5276 112.132 73.2064 108.585 69.4143C105.038 65.6221 100.267 63.7261 94.2728 63.7261C88.2788 63.7261 83.5081 65.6221 79.9606 69.4143C76.4131 73.2064 74.6394 78.5276 74.6394 85.3779V140.975H43.2627V38.588H74.6394V52.1662C77.8199 47.6402 82.1013 44.0927 87.4837 41.5238C92.866 38.8327 98.9212 37.4871 105.649 37.4871Z" fill="white"/>
+<path d="M151.49 89.5981C151.49 79.0781 153.447 69.8424 157.362 61.8912C161.398 53.94 166.842 47.8237 173.692 43.5422C180.543 39.2608 188.188 37.1201 196.629 37.1201C203.356 37.1201 209.473 38.5268 214.977 41.3403C220.604 44.1539 225.008 47.946 228.189 52.7167V0.19288H259.565V140.975H228.189V126.296C225.253 131.189 221.033 135.104 215.528 138.039C210.146 140.975 203.846 142.443 196.629 142.443C188.188 142.443 180.543 140.302 173.692 136.021C166.842 131.617 161.398 125.44 157.362 117.489C153.447 109.415 151.49 100.118 151.49 89.5981ZM228.189 89.7816C228.189 81.9527 225.987 75.7752 221.583 71.2492C217.302 66.7231 212.042 64.46 205.803 64.46C199.564 64.46 194.243 66.7231 189.839 71.2492C185.558 75.6529 183.417 81.7692 183.417 89.5981C183.417 97.427 185.558 103.666 189.839 108.314C194.243 112.84 199.564 115.103 205.803 115.103C212.042 115.103 217.302 112.84 221.583 108.314C225.987 103.788 228.189 97.6105 228.189 89.7816Z" fill="white"/>
+<path d="M286.424 33.9456C280.92 33.9456 276.393 32.3554 272.846 29.1749C269.421 25.8721 267.708 21.8353 267.708 17.0646C267.708 12.1715 269.421 8.13471 272.846 4.95422C276.393 1.65141 280.92 0 286.424 0C291.807 0 296.21 1.65141 299.635 4.95422C303.183 8.13471 304.957 12.1715 304.957 17.0646C304.957 21.8353 303.183 25.8721 299.635 29.1749C296.21 32.3554 291.807 33.9456 286.424 33.9456ZM302.021 42.588V140.975H270.644V42.588H302.021Z" fill="white"/>
+<path d="M410.877 88.1302C410.877 91.066 410.694 94.1242 410.327 97.3047H339.316C339.805 103.666 341.824 108.559 345.371 111.984C349.041 115.287 353.506 116.938 358.766 116.938C366.595 116.938 372.038 113.635 375.097 107.03H408.492C406.779 113.758 403.66 119.813 399.134 125.195C394.73 130.577 389.164 134.798 382.436 137.856C375.708 140.914 368.185 142.443 359.867 142.443C349.836 142.443 340.906 140.302 333.077 136.021C325.249 131.74 319.132 125.623 314.729 117.672C310.325 109.721 308.123 100.424 308.123 89.7816C308.123 79.1392 310.264 69.8424 314.545 61.8912C318.949 53.94 325.065 47.8237 332.894 43.5422C340.723 39.2608 349.714 37.1201 359.867 37.1201C369.775 37.1201 378.583 39.1996 386.289 43.3587C393.996 47.5178 399.99 53.4507 404.271 61.1572C408.675 68.8638 410.877 77.8548 410.877 88.1302ZM378.766 79.8732C378.766 74.4908 376.932 70.2094 373.262 67.0289C369.592 63.8484 365.005 62.2582 359.5 62.2582C354.24 62.2582 349.775 63.7873 346.105 66.8454C342.558 69.9036 340.356 74.2462 339.5 79.8732H378.766Z" fill="white"/>
+<path d="M448.409 116.755H489.511V140.975H417.032V7.16549H448.409V116.755Z" fill="white"/>
+<path d="M561.97 126.663C559.279 131.434 554.814 135.348 548.575 138.406C542.336 141.465 535.67 142.994 528.575 142.994C522.336 142.994 516.648 141.77 511.51 139.324C506.495 136.755 502.519 133.208 499.583 128.681C496.648 124.155 495.18 118.895 495.18 112.901C495.18 103.482 498.849 95.8368 506.189 89.9651C513.529 83.9711 524.477 80.9741 539.034 80.9741H561.97C561.725 75.3471 560.135 70.9433 557.199 67.7629C554.386 64.46 550.471 62.8086 545.456 62.8086C540.93 62.8086 537.199 63.9707 534.263 66.2949C531.327 68.6191 529.37 71.7996 528.391 75.8364H497.015C498.482 68.3745 501.418 61.7077 505.822 55.836C510.226 49.9644 515.853 45.3771 522.703 42.0743C529.676 38.6492 537.443 36.9366 546.006 36.9366C555.181 36.9366 563.377 38.7103 570.594 42.2578C577.811 45.8053 583.438 50.943 587.475 57.6709C591.512 64.2766 593.53 71.9831 593.53 80.7906V140.975H561.97V126.663ZM539.584 119.323C543.254 119.323 546.801 118.528 550.227 116.938C553.652 115.226 556.404 112.84 558.484 109.782C560.685 106.602 561.786 102.993 561.786 98.9561V97.6717H542.336C537.199 97.6717 533.345 98.7115 530.777 100.791C528.33 102.748 527.107 105.378 527.107 108.681C527.107 111.984 528.208 114.614 530.41 116.571C532.612 118.406 535.67 119.323 539.584 119.323Z" fill="white"/>
+<path d="M704.354 38.588L640.132 189.6H606.37L629.857 137.489L588.205 38.588H623.251L646.921 102.626L670.408 38.588H704.354Z" fill="white"/>
+<path d="M799.371 88.1302C799.371 91.066 799.188 94.1242 798.821 97.3047H727.81C728.299 103.666 730.318 108.559 733.865 111.984C737.535 115.287 742 116.938 747.26 116.938C755.089 116.938 760.532 113.635 763.591 107.03H796.986C795.273 113.758 792.154 119.813 787.628 125.195C783.224 130.577 777.658 134.798 770.93 137.856C764.202 140.914 756.679 142.443 748.361 142.443C738.33 142.443 729.4 140.302 721.571 136.021C713.743 131.74 707.626 125.623 703.222 117.672C698.819 109.721 696.617 100.424 696.617 89.7816C696.617 79.1392 698.758 69.8424 703.039 61.8912C707.443 53.94 713.559 47.8237 721.388 43.5422C729.217 39.2608 738.208 37.1201 748.361 37.1201C758.269 37.1201 767.077 39.1996 774.783 43.3587C782.49 47.5178 788.484 53.4507 792.765 61.1572C797.169 68.8638 799.371 77.8548 799.371 88.1302ZM767.26 79.8732C767.26 74.4908 765.426 70.2094 761.756 67.0289C758.086 63.8484 753.499 62.2582 747.994 62.2582C742.734 62.2582 738.269 63.7873 734.599 66.8454C731.052 69.9036 728.85 74.2462 727.994 79.8732H767.26Z" fill="white"/>
+<path d="M838.126 55.6525C841.796 50.0255 846.383 45.6218 851.888 42.4413C857.393 39.1385 863.509 37.4871 870.237 37.4871V70.6987H861.613C853.784 70.6987 847.912 72.4113 843.998 75.8364C840.083 79.1392 838.126 85.0109 838.126 93.4514V140.975H806.749V38.588H838.126V55.6525Z" fill="white"/>
+</svg>

package/docs/components/Cookies.vue

@@ -0,0 +1,42 @@
+<template>
+  <div v-if="show" class="w-full fixed bottom-0 left-0 mt-8 z-40 bg-white dark:bg-gray-800">
+    <div role="dialog" class="flex justify-center items-center border-t dark:border-gray-700 flex-col pt-2 px-2 md:pt-0 md:px-0 md:flex-row text-center">
+      <p>
+        We use Cookies for user analysis and on-page improvements!
+        <a href="https://www.cookiesandyou.com/" class="underline" target="_blank">
+          Learn about cookies
+        </a>
+      </p>
+      <x-button color="gray" class="m-2" @click="gotit">
+        Got it
+      </x-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Cookies',
+  data() {
+    return {
+      show: false,
+    }
+  },
+  created() {
+    try {
+      if (!localStorage.getItem('cookie-gotit')) this.show = true
+    } catch (e) {
+      this.show = true
+    }
+  },
+  methods: {
+    gotit() {
+      try {
+        localStorage.setItem('cookie-gotit', true)
+      } catch (e) { console.log(e) }
+
+      this.show = false
+    },
+  },
+}
+</script>

package/docs/components/common/CodePreview.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { useNotifications } from '@indielayer/ui'
+import { ref } from 'vue'
+
+const props = defineProps({
+  title: String,
+  description: String,
+  code: String,
+  github: String,
+  lang: {
+    type: String,
+    default: 'vue',
+  },
+  expanded: Boolean,
+})
+
+const notifications = useNotifications('notifica')
+
+const codeRef = ref()
+const expandedSync = ref(props.expanded)
+
+function toggleCode() {
+  codeRef.value.toggle()
+  expandedSync.value = !expandedSync.value
+}
+
+function copy(text?: string) {
+  if (!text) return
+
+  const el = document.createElement('textarea')
+
+  el.value = text
+  document.body.appendChild(el)
+  el.select()
+  document.execCommand('copy')
+  document.body.removeChild(el)
+  notifications?.success('Copied to clipboard!')
+}
+</script>
+
+<template>
+  <div>
+    <h2 :id="title?.toLowerCase()" class="flex border-b pb-1 items-center">
+      <a class="anchor" :href="`#${title?.toLowerCase()}`">#</a>
+      <div class="mr-2 cursor-pointer" @click="toggleCode">{{ title }}</div>
+      <x-spacer/>
+      <x-tooltip position="top">
+        <x-button
+          icon="edit"
+          ghost
+          size="sm"
+          :href="`${github}/${title?.toLowerCase()}.vue`"
+          target="blank"
+        />
+        <template #tooltip>
+          Edit on <span class="text-gray-300">GitHub</span>
+        </template>
+      </x-tooltip>
+
+      <x-tooltip position="top">
+        <x-button icon="copy" ghost size="sm" @click="copy(code)"/>
+        <template #tooltip>Copy</template>
+      </x-tooltip>
+
+      <x-tooltip position="top">
+        <x-button icon="code" ghost size="sm" @click="toggleCode"/>
+        <template #tooltip>{{ expandedSync ? 'Hide' : 'Show' }} code</template>
+      </x-tooltip>
+    </h2>
+    <p>{{ description }}</p>
+    <slot></slot>
+    <x-accordion-item ref="codeRef" :expanded="expanded" :show-icon="false">
+      <template #content>
+        <div class="mt-4">
+          <code-snippet :code="code" :lang="lang" :show-copy-button="false"/>
+        </div>
+      </template>
+    </x-accordion-item>
+  </div>
+</template>

package/docs/components/common/CodeSnippet.vue

@@ -0,0 +1,49 @@
+<script lang="ts">
+import { getHighlighter } from 'shiki'
+
+const highlighter = getHighlighter({
+  themes: ['github-dark'],
+  langs: ['js', 'ts', 'vue-html', 'bash', 'vue'],
+})
+</script>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+
+const props = defineProps({
+  code: String,
+  lang: {
+    type: String,
+    default: 'vue',
+  },
+  showCopyButton: {
+    type: Boolean,
+    default: true,
+  },
+})
+
+const highlighted = ref('')
+
+onMounted(async () => {
+  highlighted.value = (await highlighter).codeToHtml(props.code, { lang: props.lang, theme: 'github-dark' })
+})
+</script>
+
+<template>
+  <div class="relative">
+    <div v-html="highlighted"></div>
+    <copy-button v-if="showCopyButton" class="!absolute top-2 right-2" :text="code"/>
+  </div>
+</template>
+
+<style lang="postcss">
+.shiki {
+  @apply rounded-md overflow-x-auto p-4 text-sm;
+
+  code { font-family: "Fira Code", monospace; }
+
+  @supports (font-variation-settings: normal) {
+    code { font-family: "Fira Code VF", monospace; }
+  }
+}
+</style>