@indielayer/ui 1.3.0 → 1.4.0

package/docs/components/common/MultiSnippet.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="pt-1">
+    <x-tab-group v-model="selected" class="mb-2">
+      <x-tab v-for="(snippet, index) in snippets" :key="index" :value="index" :label="snippet.label"/>
+    </x-tab-group>
+    <div v-for="(snippet, index) in snippets" :key="index">
+      <code-snippet v-if="selected === index" class="!pl-0" :code="snippet.code" :lang="snippet.lang" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    snippets: {
+      type: Array,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      selected: 0,
+    }
+  },
+}
+</script>

package/docs/components/menu/DocsMenu.vue

@@ -0,0 +1,143 @@
+<script>
+export default {
+  setup() {
+    return {
+      docsMenu: [
+        { to: '/getting-started', label: 'Getting Started', icon: 'book' },
+        { to: '/typography', label: 'Typography', icon: 'type' },
+        { to: '/colors', label: 'Colors', icon: 'palette' },
+        { to: '/icons', label: 'Icons', icon: 'star' },
+      ],
+      components: [
+        {
+          label: 'Form',
+          icon: 'edit',
+          collapseIcon: 'chevron-down',
+          expanded: true,
+          items: [
+            { to: '/component/button', label: 'Button' },
+            { to: '/component/checkbox', label: 'Checkbox' },
+            { to: '/component/form', label: 'Form' },
+            { to: '/component/formGroup', label: 'Form Group' },
+            { to: '/component/input', label: 'Input' },
+            { to: '/component/radio', label: 'Radio' },
+            { to: '/component/select', label: 'Select' },
+            { to: '/component/slider', label: 'Slider' },
+            { to: '/component/textarea', label: 'Textarea' },
+            { to: '/component/toggle', label: 'Toggle' },
+          ],
+        },
+        {
+          label: 'UI',
+          icon: 'cube',
+          collapseIcon: 'chevron-down',
+          expanded: true,
+          items: [
+            { to: '/component/accordion', label: 'Accordion' },
+            { to: '/component/alert', label: 'Alert' },
+            { to: '/component/avatar', label: 'Avatar' },
+            { to: '/component/badge', label: 'Badge' },
+            { to: '/component/breadcrumbs', label: 'Breadcrumbs' },
+            { to: '/component/card', label: 'Card' },
+            { to: '/component/carousel', label: 'Carousel' },
+            { to: '/component/container', label: 'Container' },
+            { to: '/component/divider', label: 'Divider' },
+            { to: '/component/drawer', label: 'Drawer' },
+            { to: '/component/icon', label: 'Icon' },
+            { to: '/component/image', label: 'Image' },
+            { to: '/component/loader', label: 'Loader' },
+            { to: '/component/link', label: 'Link' },
+            { to: '/component/menu', label: 'Menu' },
+            { to: '/component/modal', label: 'Modal' },
+            { to: '/component/notifications', label: 'Notifications' },
+            { to: '/component/pagination', label: 'Pagination' },
+            { to: '/component/popover', label: 'Popover' },
+            { to: '/component/progress', label: 'Progress' },
+            { to: '/component/skeleton', label: 'Skeleton' },
+            { to: '/component/spinner', label: 'Spinner' },
+            { to: '/component/stepper', label: 'Stepper' },
+            { to: '/component/table', label: 'Table' },
+            { to: '/component/tabs', label: 'Tabs' },
+            { to: '/component/tag', label: 'Tag' },
+            { to: '/component/tooltip', label: 'Tooltip' },
+          ],
+        },
+        {
+          label: 'Helpers',
+          icon: 'wrench',
+          collapseIcon: 'chevron-down',
+          expanded: true,
+          items: [
+            { to: '/component/scroll', label: 'Scroll' },
+            { to: '/component/spacer', label: 'Spacer' },
+          ],
+        },
+      ],
+    }
+  },
+}
+</script>
+
+<template>
+  <div style="min-width: 240px;" class="pb-4">
+    <div class="title text-overline text-xs font-light ml-6 mt-6 mb-4">Documentation</div>
+    <x-menu
+      :items="docsMenu"
+      class="m-4"
+      color="primary"
+      filled
+      @item-click="$emit('close')"
+    />
+    <x-divider class="px-4"/>
+    <div class="title text-overline text-xs font-light ml-6 mt-8 mb-4">Components</div>
+    <x-menu
+      :items="components"
+      class="m-4"
+      color="primary"
+      filled
+      @item-click="$emit('close')"
+    />
+  </div>
+</template>
+
+<style lang="postcss" scoped>
+ul {
+  a {
+    display: flex;
+    align-items: center;
+    padding: 6px 21px;
+
+    &:hover {
+      @apply bg-secondary-200;
+    }
+
+    &.router-link-exact-active {
+      @apply bg-secondary-300;
+    }
+  }
+
+  &.inner {
+    a {
+      padding: 8px 32px;
+    }
+  }
+}
+
+.menu :deep(a) {
+  padding: 8px 32px !important;
+}
+
+.dark {
+  ul {
+    a {
+      &:hover {
+        @apply bg-secondary-600;
+      }
+
+      &.router-link-exact-active {
+        @apply bg-secondary-500;
+      }
+    }
+  }
+}
+</style>

package/docs/components/toolbar/PreToolbar.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import ToolbarColorToggle from './ToolbarColorToggle.vue'
+</script>
+
+<template>
+  <div class="bg-gray-900 dark border-b">
+    <x-container fluid>
+      <div class="flex justify-items-center items-center py-2 text-slate-500 dark:text-slate-300 h-10 text-sm">
+        <toolbar-color-toggle />
+        <p class="text-secondary-300 font-semibold ml-2 truncate">
+          Indielayer UI - Vue.js 3 / Nuxt.js 3 UI Library with Tailwind CSS 3. ⚡️ &nbsp;Build and prototype fast web applications.
+        </p>
+        <x-spacer/>
+        <a target="_blank" href="https://github.com/indielayer"><x-icon size="sm" icon="github"/></a>
+      </div>
+    </x-container>
+  </div>
+</template>

package/docs/components/toolbar/Toolbar.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { inject, ref, unref, watch } from 'vue'
+import { version, type UITheme } from '@indielayer/ui'
+
+const selectTheme = inject('selectTheme', {
+  theme: {} as UITheme,
+  themes: [],
+  setTheme(key: string) {},
+})
+
+const selected = ref(unref(selectTheme.theme).name)
+
+const options = selectTheme.themes.map((t: any) => ({
+  value: t.name, label: t.name,
+}))
+
+watch(selected, (val) => {
+  if (val) {
+    selectTheme.setTheme(val)
+  }
+})
+</script>
+
+<template>
+  <div class="bg-white dark:bg-gray-800 border-b px-4">
+    <div class="flex justify-items-center items-center h-[70px]">
+      <a href="/" class="flex items-center md:ml-4">
+        <img src="@/assets/images/logo_mini.svg" width="26" alt="Indielayer"/>
+        <x-divider vertical class="h-[40px] mx-3"/>
+        <img class="logo-dark" src="@/assets/images/logo_word.svg" width="120" alt="Indielayer UI"/>
+        <img class="logo-white" src="@/assets/images/logo_word_dark.svg" width="120" alt="Indielayer UI"/>
+
+        <div class="flex items-center text-xs tracking-widest">
+          <div class="pl-2 font-bold text-primary-500">UI</div>
+        </div>
+      </a>
+
+      <x-spacer/>
+
+      <div class="flex items-center font-semibold text-sm">
+        <x-select v-model="selected" :options="options" hide-footer size="sm"/>
+        <x-divider vertical style="height: 10px;" class="px-2"/>
+        <div class="tracking-wide text-xs">v{{ version }}</div>
+        <x-divider vertical style="height: 10px;" class="px-2 hidden sm:block"/>
+        <x-link href="https://github.com/indielayer/ui" target="_blank" external class="hidden sm:block">Github</x-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="postcss">
+.logo-white {
+  display: none;
+}
+
+html.dark .logo-white {
+  display: block;
+}
+
+html.dark .logo-dark {
+  display: none;
+}
+</style>

package/docs/components/toolbar/ToolbarColorToggle.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const colorMode = ref('light')
+
+try {
+  const storedMode = localStorage.getItem('color-mode')
+
+  if (storedMode) {
+    colorMode.value = storedMode
+  } else {
+    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      colorMode.value = 'dark'
+    }
+  }
+} catch (e) {
+  colorMode.value = 'light'
+}
+
+updateMode()
+
+function toggle() {
+  colorMode.value = (colorMode.value === 'light') ? 'dark' : 'light'
+
+  updateMode()
+
+  try {
+    localStorage.setItem('color-mode', colorMode.value)
+  } catch (e) {
+    colorMode.value = 'light'
+  }
+}
+
+function updateMode() {
+  colorMode.value === 'light'
+    ? document.querySelector('html')?.classList.remove('dark')
+    : document.querySelector('html')?.classList.add('dark')
+}
+</script>
+
+<template>
+  <x-button
+    ghost
+    size="sm"
+    class="-ml-2"
+    :icon-left="colorMode === 'light' ? 'sun' : 'moon'"
+    @click="toggle"
+  />
+</template>

package/docs/icons.ts

@@ -0,0 +1,61 @@
+export default {
+  'cube': '<path d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />',
+  code: '<polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline>',
+  'fullsvg': '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="feather feather-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>',
+  'align-justify': '<line x1="21" y1="10" x2="3" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="21" y1="18" x2="3" y2="18"></line>',
+  'align-left': '<line x1="17" y1="10" x2="3" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="17" y1="18" x2="3" y2="18"></line>',
+  'align-right': '<line x1="21" y1="10" x2="7" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="21" y1="18" x2="7" y2="18"></line>',
+  palette: '<path d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />',
+  smile: '<circle cx="12" cy="12" r="10"></circle><path d="M8 14s1.5 2 4 2 4-2 4-2"></path><line x1="9" y1="9" x2="9.01" y2="9"></line><line x1="15" y1="9" x2="15.01" y2="9"></line>',
+  check: '<polyline points="20 6 9 17 4 12"></polyline>',
+  type: '<path stroke="none" d="M0 0h24v24H0z" fill="none"></path><line x1="4" y1="20" x2="7" y2="20"></line><line x1="14" y1="20" x2="21" y2="20"></line><line x1="6.9" y1="15" x2="13.8" y2="15"></line><line x1="10.2" y1="6.3" x2="16" y2="20"></line><polyline points="5 20 11 4 13 4 20 20"></polyline>',
+  copy: '<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>',
+  book: '<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>',
+  github: '<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>',
+  twitter: '<path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path>',
+  'activity': '<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>',
+  'trending-up': '<polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline><polyline points="17 6 23 6 23 12"></polyline>',
+  mail: '<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline>',
+  'chevron-left': '<polyline points="15 18 9 12 15 6"></polyline>',
+  'chevron-right': '<polyline points="9 18 15 12 9 6"></polyline>',
+  'chevron-up': '<polyline points="18 15 12 9 6 15"></polyline>',
+  'chevron-down': '<path d="M19 9l-7 7-7-7" />',
+  plus: '<line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line>',
+  'check-circle': '<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline>',
+  'x-circle': '<circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line>',
+  x: '<line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line>',
+  sun: '<circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>',
+  moon: '<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>',
+  upload: '<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line>',
+  menu: '<line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line>',
+  bold: '<path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 5h6a3.5 3.5 0 0 1 0 7h-6z" /><path d="M13 12h1a3.5 3.5 0 0 1 0 7h-7v-7" />',
+  italic: '<path stroke="none" d="M0 0h24v24H0z" fill="none"></path><line x1="11" y1="5" x2="17" y2="5"></line><line x1="7" y1="19" x2="13" y2="19"></line><line x1="14" y1="5" x2="10" y2="19"></line>',
+  'edit': '<path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>',
+  'more-horizontal': '<circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle>',
+  'image': '<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline>',
+  'search': '<circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line>',
+
+  // admin
+  'rotate-ccw': '<polyline points="1 4 1 10 7 10"></polyline><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"></path>',
+  shield: '<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>',
+  'x-octagon': '<polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line>',
+  trash: '<polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>',
+  users: '<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path>',
+  'map-pin': '<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle>',
+  list: '<line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"></line><line x1="3" y1="18" x2="3.01" y2="18"></line>',
+  truck: '<rect x="1" y="3" width="15" height="13"></rect><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"></polygon><circle cx="5.5" cy="18.5" r="2.5"></circle><circle cx="18.5" cy="18.5" r="2.5"></circle>',
+  rss: '<path d="M4 11a9 9 0 0 1 9 9"></path><path d="M4 4a16 16 0 0 1 16 16"></path><circle cx="5" cy="19" r="1"></circle>',
+  heart: '<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>',
+  'bar-chart-2': '<line x1="18" y1="20" x2="18" y2="10"></line><line x1="12" y1="20" x2="12" y2="4"></line><line x1="6" y1="20" x2="6" y2="14"></line>',
+  'refresh-cw':'<polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>',
+  'arrow-right': '<line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline>',
+  'arrow-left': '<line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline>',
+  'wrench': '<path d="M21.75 6.75a4.5 4.5 0 01-4.884 4.484c-1.076-.091-2.264.071-2.95.904l-7.152 8.684a2.548 2.548 0 11-3.586-3.586l8.684-7.152c.833-.686.995-1.874.904-2.95a4.5 4.5 0 016.336-4.486l-3.276 3.276a3.004 3.004 0 002.25 2.25l3.276-3.276c.256.565.398 1.192.398 1.852z" /><path d="M4.867 19.125h.008v.008h-.008v-.008z" />',
+
+  /**
+   * TABLER ICONS
+   * https://tabler-icons.io/
+   */
+  star: '<path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" />',
+  'star-half': '<path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253z" />',
+}

package/docs/layouts/default.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import PreToolbar from '../components/toolbar/PreToolbar.vue'
+import Toolbar from '../components/toolbar/Toolbar.vue'
+import DocsMenu from '../components/menu/DocsMenu.vue'
+
+const drawer = ref(false)
+</script>
+
+<template>
+  <pre-toolbar />
+  <toolbar class="border-y z-10" @open-drawer="drawer = true" />
+  <div class="lg:hidden border-b p-2">
+    <x-button
+      icon-left="menu"
+      size="sm"
+      ghost
+      @click="drawer = true"
+    >Menu</x-button>
+  </div>
+  <div class="flex-1 flex overflow-hidden">
+    <x-drawer v-model="drawer" breakpoint="lg" width="260" class="border-r flex">
+      <docs-menu class="flex-1" @close="drawer = false" />
+    </x-drawer>
+    <x-notifications inject-key="notifica">
+      <router-view class="flex-1 overflow-y-scroll" />
+    </x-notifications>
+  </div>
+</template>

package/docs/layouts/simple.vue

@@ -0,0 +1,3 @@
+<template>
+  <router-view />
+</template>

package/docs/main.ts

@@ -0,0 +1,33 @@
+import { createApp } from 'vue'
+import UI, { BaseTheme } from '@indielayer/ui'
+import App from './App.vue'
+import router from './router'
+import icons from './icons'
+
+// global components
+import CopyButton from './components/common/CopyButton.vue'
+import CodeSnippet from './components/common/CodeSnippet.vue'
+import MultiSnippet from './components/common/MultiSnippet.vue'
+import CodePreview from './components/common/CodePreview.vue'
+import DocumentPage from './components/common/DocumentPage.vue'
+
+// css
+import './assets/css/tailwind.css'
+
+const app = createApp(App)
+
+app.use(UI, {
+  prefix: 'X',
+  icons,
+  theme: BaseTheme,
+})
+
+app.use(router)
+
+app.component('CopyButton', CopyButton)
+app.component('CodeSnippet', CodeSnippet)
+app.component('MultiSnippet', MultiSnippet)
+app.component('CodePreview', CodePreview)
+app.component('DocumentPage', DocumentPage)
+
+app.mount('#app')

package/docs/pages/colors.vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useColors, useNotifications, colors as TailwindColors } from '@indielayer/ui'
+
+const notifications = useNotifications('notifica')
+const { getPalette } = useColors()
+
+const color500 = ref('#10B981')
+
+const palette = computed(() => getPalette(color500.value))
+
+function copyPalette(val: any) {
+  const el = document.createElement('textarea')
+
+  el.value = JSON.stringify(val, null, 2)
+  document.body.appendChild(el)
+  el.select()
+  document.execCommand('copy')
+  document.body.removeChild(el)
+
+  notifications.success('Copied to clipboard!')
+}
+</script>
+
+<template>
+  <div>
+    <section class="p-4 lg:p-8 max-w-4xl xl:max-w-7xl mx-auto">
+      <h1 class="text-4xl font-semibold">Colors</h1>
+      <h2 class="text-lg my-2 text-gray-500 dark:text-gray-400">Generate your own palettes, use Tailwind's or use color prop to generate at runtime</h2>
+      <x-divider class="mt-4 mb-8"/>
+
+      <h2 class="text-2xl mb-2">Generate your own palettes</h2>
+      <p class="mb-8 text-gray-500 dark:text-gray-400">Generate your own color palette like Tailwind. With the same properties as Tailwind color palettes.</p>
+      <p class="font-medium"></p>
+      <div class="mt-4">
+        <x-input v-model="color500" label="Change here the middle value (500) to generate a new palette"/>
+      </div>
+      <div class="grid grid-cols-11 my-4 text-sm">
+        <div v-for="shade in Object.keys(palette)" :key="shade" class="h-32 flex items-center justify-center" :style="`background-color: ${palette[shade]}`">{{ shade }}</div>
+      </div>
+
+      <x-button icon-left="copy" :color="color500" block @click="copyPalette(palette)">Copy Palette</x-button>
+
+      <p class="text-gray-500 dark:text-gray-400 mt-4">This is the generated palette when you use the color directly on the color prop like &#x3C;x-button <b>color="#10B981"</b>&#x3E;Hello&#x3C;/x-button&#x3E;</p>
+
+      <x-divider class="mt-4 mb-8"/>
+
+      <h2 class="text-2xl mb-2">Theme colors</h2>
+      <p class="mb-8 text-gray-500 dark:text-gray-400">Default theme color names and how to customize them.</p>
+
+      <p>The default theme color names are
+        <b class="text-sky-500">primary</b>,
+        <b class="text-secondary-500">secondary</b>,
+        <b class="text-success-500">success</b>,
+        <b class="text-warning-500">warning</b> and
+        <b class="text-error-500">error</b>.
+        You can customize them or even add your own.
+      </p>
+
+      <p class="my-4"></p>
+
+      <p class="my-2">Customize the color prop, e.g. <b>color="primary"</b> on the UI initialization.</p>
+      <code-snippet
+        lang="js"
+        :code="`import { createApp } from 'vue'
+import UI, { colors } from '@indielayer/ui'
+
+const app = createApp(App)
+
+app.use(UI, {
+  theme: {
+    colors: {
+      primary: ${JSON.stringify(palette, null, 2)},
+      secondary: colors.slate,
+      success: colors.green,
+      warning: colors.yellow,
+      error: colors.red,
+    },
+  }
+})`"
+      />
+
+      <p class="my-4">Allow you to use the Tailwind classes like <b>text-primary-500</b>, <b>bg-primary-500</b>, etc:</p>
+
+      <div>
+        <code-snippet
+          lang="js"
+          :code="`// tailwind.config.js
+//...
+const colors = require('tailwindcss/colors')
+
+module.exports = {
+  //...
+  theme: {
+    extend: {
+      colors: {
+        primary: colors.emerald,
+        secondary: colors.slate,
+        success: colors.green,
+        warning: colors.yellow,
+        error: colors.red,
+      },
+    },
+  },
+}`"
+        />
+      </div>
+
+      <x-divider class="mt-4 mb-8"/>
+
+      <h2 class="text-2xl mb-2">Tailwind Colors</h2>
+      <p class="mb-8 text-gray-500 dark:text-gray-400">Default tailwind color palettes.</p>
+
+      <div class="grid gap-6 grid-cols-1 md:grid-cols-2 text-xs">
+        <div v-for="(pal, key) in TailwindColors" :key="key">
+          <div class="text-overline mb-2">{{ key }}</div>
+          <div class="grid grid-cols-11">
+            <div v-for="(color, palKey) in pal" :key="palKey" class="h-32 flex items-center justify-center" :style="`background-color: ${color}`">{{ palKey }}</div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+
+</template>

package/docs/pages/component/accordion/index.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { XAccordion, XAccordionItem } from '@indielayer/ui'
+import UsageDemoCode from './usage.vue?raw'
+import UsageDemo from './usage.vue'
+
+const title = 'Accordion'
+const description = 'Accordion'
+const components = [XAccordion, XAccordionItem]
+const demos = [{
+  name: 'Usage',
+  description: '',
+  code: UsageDemoCode,
+  component: UsageDemo,
+}]
+const back = 'toggle'
+const next = 'alert'
+</script>
+
+<template>
+  <document-page
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/Accordion"
+    :title="title"
+    :description="description"
+    :components="components"
+    :demos="demos"
+    :back="back"
+    :next="next"
+  />
+</template>

package/docs/pages/component/accordion/usage.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="space-y-8">
+    <x-accordion>
+      <x-accordion-item>
+        Hey
+        <template #content>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti veritatis unde natus esse minima, quibusdam nesciunt atque id assumenda inventore numquam vel consectetur est illum ratione perferendis optio architecto sapiente fuga et commodi harum ea? Error doloribus illum tempora obcaecati quam voluptatum cumque magnam nemo, perspiciatis quas mollitia. Aliquid nulla corrupti sit mollitia dolor sequi nobis eveniet cumque cupiditate perspiciatis magnam laudantium in ducimus fuga quaerat, ipsam assumenda consequatur obcaecati atque? Sint asperiores labore quidem minima modi odio autem rerum eligendi, quisquam incidunt quae enim eos vitae dolores praesentium debitis, consequatur fuga hic nostrum, dolorem dicta quod ea assumenda. Expedita.
+        </template>
+      </x-accordion-item>
+
+      <x-accordion-item expanded>
+        <template #default="{ collapsed }">
+          This is collapsed: {{ collapsed }} (click me to {{ collapsed ? 'expand' : 'collapse' }})
+        </template>
+        <template #content>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti veritatis unde natus esse minima, quibusdam nesciunt atque id assumenda inventore numquam vel consectetur est illum ratione perferendis optio architecto sapiente fuga et commodi harum ea? Error doloribus illum tempora obcaecati quam voluptatum cumque magnam nemo, perspiciatis quas mollitia. Aliquid nulla corrupti sit mollitia dolor sequi nobis eveniet cumque cupiditate perspiciatis magnam laudantium in ducimus fuga quaerat, ipsam assumenda consequatur obcaecati atque? Sint asperiores labore quidem minima modi odio autem rerum eligendi, quisquam incidunt quae enim eos vitae dolores praesentium debitis, consequatur fuga hic nostrum, dolorem dicta quod ea assumenda. Expedita.
+        </template>
+      </x-accordion-item>
+    </x-accordion>
+
+    <x-accordion icon-align="left">
+      <x-accordion-item>
+        Left side icon
+        <template #content>
+          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est, rem.
+        </template>
+      </x-accordion-item>
+    </x-accordion>
+  </div>
+</template>