feat: dark mode

docs/app/components/AllComponents.vue

@@ -1,5 +1,25 @@
 <template>
   <div class="flex gap-4 flex-wrap mx-4">
+    <ShowComponent is-new>
+      <template #component>
+        <div class="flex w-48 relative">
+          <div class="flex gap-4 flex-wrap mx-4 w-full h-24">
+            <PUCompare with-dark-mode>
+              <PUButton
+                flavor="normal"
+                shape="rounded"
+              >
+                Click me!
+              </PUButton>
+            </PUCompare>
+          </div>
+        </div>
+      </template>
+      <template #component-name>
+        <a href="/docs/components/pu-compare">PUCompare</a>
+      </template>
+    </ShowComponent>
+
     <ShowComponent is-new>
       <template #component>
         <div class="flex w-48 relative">

docs/app/components/AsideMenu.vue

@@ -27,10 +27,24 @@ const items: Items[] = [
     links: [
       { name: 'PUAccordion', link: '/docs/components/pu-accordion' },
       { name: 'PUAvatar', link: '/docs/components/pu-avatar', new: true },
+      { name: 'PUAudio', link: '/docs/components/pu-audio', new: true },
+      // { name: 'PUChip', link: '/docs/components/pu-chip' },
+      // { name: 'PUCollapsible', link: '/docs/components/pu-collapsible' },
+      // { name: 'PUDataTable', link: '/docs/components/pu-data-table', new: true },
+      // { name: 'PUDropdown', link: '/docs/components/pu-dropdown' },
+      // { name: 'PUInputNumber', link: '/docs/components/pu-input-number' },
+      // { name: 'PUList', link: '/docs/components/pu-list' },
+      // { name: 'PUMenu', link: '/docs/components/pu-menu' },
+      // { name: 'PUPagination', link: '/docs/components/pu-pagination' },
+      // { name: 'PURating', link: '/docs/components/pu-rating' },
+      // { name: 'PUSearch', link: '/docs/components/pu-search' },
+      // { name: 'PUSelectGroup', link: '/docs/components/pu-select-group' },
+
       { name: 'PUBadge', link: '/docs/components/pu-badge' },
       { name: 'PUButtonIcon', link: '/docs/components/pu-button-icon' },
       { name: 'PUButton', link: '/docs/components/pu-button' },
       { name: 'PUCheckbox', link: '/docs/components/pu-checkbox' },
+      { name: 'PUCompare', link: '/docs/components/pu-compare', new: true },
       { name: 'PUDatePicker', link: '/docs/components/pu-datepicker', new: true },
       { name: 'PUInput', link: '/docs/components/pu-input' },
       { name: 'PUModal', link: '/docs/components/pu-modal' },

docs/app/components/CodeBlock.vue

@@ -15,12 +15,23 @@
         {{ tab.label }}
       </PUButton>
     </div>
-    <div class="p-6 bg-gradient-to-b from-white to-gray-50 rounded-xl shadow-lg h-auto">
+    <div class="p-6  rounded-xl shadow-lg h-auto">
       <div
         v-if="activeTab === 'Preview'"
-        class="w-full h-full flex justify-center items-center gap-2"
+        class="w-full h-full flex justify-center flex-wrap items-center gap-2 p-4 "
       >
         <slot name="preview" />
+        <div
+          v-if="compare"
+          class="flex gap-4 flex-wrap justify-between mx-4 min-h-[200px] w-full lg:w-1/2"
+        >
+          <PUCompare
+            with-dark-mode
+            with-icon
+          >
+            <slot name="preview" />
+          </PUCompare>
+        </div>
       </div>
       <div v-else>
         <CodeBox
@@ -37,6 +48,14 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 
+defineProps(
+  {
+    compare: {
+      type: Boolean,
+      default: true,
+    },
+  },
+)
 const tabs = [
   { label: 'Preview' },
   { label: 'Code' },

docs/app/components/HeaderUi.vue

@@ -18,8 +18,18 @@
         id="nav-mobile"
         class="right hide-on-med-and-down flex gap-4 mt-4"
       >
-        <li><a href="/docs"><PUButton flavor="outlined">Docs</PUButton></a></li>
-        <li><a href="https://github.com/paper-kit/nuxt"><PUButton flavor="outlined">Github</PUButton></a></li>
+        <li>
+          <a href="/docs"><PUButton
+            flavor="outlined"
+            icon-right="file-alt"
+          >docs</PUButton></a>
+        </li>
+        <li>
+          <a href="https://github.com/paper-kit/nuxt"><PUButton
+            flavor="outlined"
+            icon-right="github-alt"
+          >github</PUButton></a>
+        </li>
       </ul>
     </div>
   </div>

docs/app/components/ShowComponent.vue

@@ -1,15 +1,17 @@
 <template>
-  <div class="border-2 border-primary-light-500 rounded-lg w-72 h-48 hover:scale-110 transition-all duration-300 relative">
-    <div class="absolute top-2 right-2">
+  <div
+    class="border-2 border-primary-light-500 rounded-lg w-72 h-48 hover:scale-110 transition-all duration-300 relative"
+  >
+    <div class="absolute top-2 right-2 cursor-pointer dark:text-primary-light-50">
       <PUIcon
         v-if="isNew"
-        name="star"
+        name="star-solid"
       />
     </div>
-    <div class="component-example p-4 flex justify-center items-center h-36 ">
+    <div class="component-example p-4 flex justify-center items-center h-36 dark:bg-primary-light-500">
       <slot name="component" />
     </div>
-    <div class="component-name text-lg font-bold flex h-12 justify-center items-center w-full border-t-2 border-primary-light-500">
+    <div class="component-name text-lg font-bold flex h-12 gap-4 justify-center items-center w-full border-t-2 border-primary-light-500">
       <slot name="component-name" />
     </div>
   </div>

docs/app/components/paper/ShowAccordion.vue

@@ -20,7 +20,7 @@
         <div class="w-72">
           <PUAccordion :items="demoItems">
             <template #content>
-              <div class="p-4 bg-gray-50 rounded">
+              <div class="p-4 bg-gray-50 rounded dark:text-primary-light-500">
                 Custom content area with additional styling
               </div>
             </template>
@@ -39,7 +39,7 @@
             class="w-full"
           >
             <template #header="{ item, isOpen }">
-              <h3 :class="{ 'text-[#E12B56]': isOpen, 'text-gray-800': !isOpen }">
+              <h3 :class="{ 'text-[#E12B56]': isOpen, 'text-gray-800 dark:text-white': !isOpen }">
                 {{ item.title }}
               </h3>
             </template>

docs/app/components/paper/ShowCompare.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="compare-demo">
+    <CodeBlock
+      v-if="type === 'default'"
+      :compare="false"
+    >
+      <template #preview>
+        <PUCompare
+          class="h-36"
+          :with-dark-mode="false"
+        >
+          <template #left>
+            Before
+          </template>
+          <template #right>
+            After
+          </template>
+        </PUCompare>
+      </template>
+      <template #code>
+        <slot name="code" />
+      </template>
+    </CodeBlock>
+
+    <CodeBlock
+      v-if="type === 'dark-mode'"
+      :compare="false"
+    >
+      <template #preview>
+        <PUCompare
+          with-dark-mode
+          class="h-36"
+        >
+          <span class="text-xl text-primary-light-500 dark:text-white">
+            Light/Dark Comparison
+          </span>
+        </PUCompare>
+      </template>
+      <template #code>
+        <slot name="code" />
+      </template>
+    </CodeBlock>
+
+    <CodeBlock
+      v-if="type === 'with-icon'"
+      :compare="false"
+    >
+      <template #preview>
+        <PUCompare
+          with-icon
+          class="h-36"
+          with-dark-mode
+        >
+          <span class="text-xl text-primary-light-500 dark:text-white mt-10">
+            Light/Dark Comparison
+          </span>
+        </PUCompare>
+      </template>
+      <template #code>
+        <slot name="code" />
+      </template>
+    </CodeBlock>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  type: 'default' | 'dark-mode' | 'with-icon'
+}>()
+</script>

docs/app/components/paper/ShowDatepicker.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="datepicker-demo">
-    <CodeBlock v-if="type === 'default'">
+    <CodeBlock
+      v-if="type === 'default'"
+    >
       <template #preview>
         <PUDatePicker v-model="selectedDate" />
       </template>
@@ -9,7 +11,9 @@
       </template>
     </CodeBlock>
 
-    <CodeBlock v-if="type === 'always-open'">
+    <CodeBlock
+      v-if="type === 'always-open'"
+    >
       <template #preview>
         <PUDatePicker
           v-model="selectedDate"
@@ -21,7 +25,10 @@
       </template>
     </CodeBlock>
 
-    <CodeBlock v-if="type === 'disabled-dates'">
+    <CodeBlock
+      v-if="type === 'disabled-dates'"
+      :compare="false"
+    >
       <template #preview>
         <PUDatePicker
           v-model="selectedDate"
@@ -33,7 +40,10 @@
       </template>
     </CodeBlock>
 
-    <CodeBlock v-if="type === 'disabled-range'">
+    <CodeBlock
+      v-if="type === 'disabled-range'"
+      :compare="false"
+    >
       <template #preview>
         <PUDatePicker
           v-model="selectedDate"

docs/app/components/paper/ShowInput.vue

@@ -17,7 +17,7 @@
         <PUInput
           v-model="searchValue"
           icon-left="search"
-          icon-right="cancel"
+          icon-right="close-x-exit"
           placeholder="Search..."
         />
       </template>

docs/app/components/paper/ShowModal.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="modal-demo">
-    <CodeBlock v-if="type === 'default'">
+    <CodeBlock
+      v-if="type === 'default'"
+      :compare="false"
+    >
       <template #preview>
         <PUButton @click="show">
           show
@@ -27,7 +30,10 @@
         <slot name="code" />
       </template>
     </CodeBlock>
-    <CodeBlock v-else>
+    <CodeBlock
+      v-else
+      :compare="false"
+    >
       <template #preview>
         <PUButton @click="show">
           show

docs/app/components/paper/ShowSelect.vue

@@ -27,7 +27,7 @@
 
     <CodeBlock v-if="type === 'sizes'">
       <template #preview>
-        <div class="flex gap-2">
+        <div class="flex gap-2 w-1/2">
           <PUSelect
             v-model="smallValue"
             size="small"
@@ -59,7 +59,7 @@
     </CodeBlock>
     <CodeBlock v-if="type === 'with-label'">
       <template #preview>
-        <div class="flex flex-col">
+        <div class="flex flex-col w-1/3">
           <PULabel id="label">
             with label
           </PULabel>

docs/content/docs/components/pu-accordion.md

@@ -58,7 +58,7 @@ Basic Usage
 <template>
   <PUAccordion :items="items">
     <template #content="{ item }">
-      <div class="custom-content">
+      <div class="p-4 bg-gray-50 rounded dark:text-primary-light-500">
         <PUIcon name="info" />
         {{ item.content }}
       </div>