feat: demowrapper

packages/docs/.vitepress/theme/components/DemoWrapper.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import { Switch } from 'tailv'
+import { CodeBracketIcon } from '@heroicons/vue/24/outline'
+
 defineOptions({ name: 'DemoWrapper' })
 const emit = defineEmits<{ click: [any] }>()
 const slots = defineSlots<{ default?(_: {}): any; code?(_: {}): any }>()
@@ -20,24 +22,41 @@ const meta = computed(() =>
     {} as Record<string, any>
   )
 )
-
 const showCode = ref(false)
-console.log(meta.value)
 </script>
 <template>
-  <div class="vp-preview flex flex-col divide-y divide-slate-200 rounded ring-1 ring-slate-200 [&+.vp-preview]:mt-8">
-    <div class="flex justify-end rounded-t bg-slate-100 p-2">
+  <div
+    class="demo-wrapper flex flex-col divide-y divide-slate-200 rounded ring-1 ring-slate-200 [&+.demo-wrapper]:mt-8 [&>:first-child]:rounded-t [&>:last-child]:rounded-b"
+    :style="{
+      '--tw-prose-pre-bg': 'transparent',
+    }"
+  >
+    <div class="flex justify-end bg-slate-100 p-2">
       <div class="flex-1 px-2 font-medium">
         {{ meta.title }}
       </div>
-      <Switch v-model:checked="showCode"></Switch>
+      <Switch v-model:checked="showCode">
+        <template #open><CodeBracketIcon /></template>
+        <template #close><CodeBracketIcon /></template>
+      </Switch>
     </div>
-    <div class="not-prose vp-preview-demo p-4">
+    <div class="not-prose p-4">
       <slot />
     </div>
-    <div v-if="showCode" class="rounded-b">
+    <div v-if="showCode" class="demo-wrapper-svg-bg bg-white dark:bg-slate-900">
       <slot name="code" />
     </div>
   </div>
 </template>
-<style></style>
+<style>
+.demo-wrapper-svg-bg {
+  background-position: 8px 8px;
+  background-size: 16px 16px;
+  /* slate-100 */
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='%23f1f5f9'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e");
+}
+.dark .demo-wrapper-svg-bg {
+  /* slate-100 */
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='%231e293b'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e");
+}
+</style>

packages/docs/.vitepress/theme/styles/prose.css

@@ -39,7 +39,7 @@
   --vp-code-padding-x: 0.875rem;
   --vp-code-padding-y: 0.875rem;
   --vp-code-copy-color: var(--color-slate-500);
-  --vp-code-copy-code-bg: var(--color-slate-50);
+  --vp-code-copy-code-bg: var(--color-white);
   --vp-code-copy-code-border-color: var(--color-slate-200);
   --vp-icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='rgb(100, 116, 139)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3C/svg%3E");
   --vp-icon-copied: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='rgb(100, 116, 139)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='m9 14 2 2 4-4'/%3E%3C/svg%3E");

packages/vue/src/Anchor/Anchor.vue

@@ -26,7 +26,7 @@ const onSelect = (item: AnchorItem) => {
       <div class="py-1">
         <slot name="item" v-bind="item" :deep="deep" :isActive="current === item.key">
           <a
-            class="group flex cursor-pointer items-start border-l no-underline"
+            class="group flex cursor-pointer items-start border-l-2 no-underline"
             :class="[
               current === item.key
                 ? 'border-primary-400 text-primary-500 font-semibold'

packages/vue/src/Switch/Switch.vue

@@ -25,7 +25,7 @@ const clickHandler = () => {
 <template>
   <button
     type="button"
-    class="peer flex-shrink-0 focus-visible:ring-offset-background data-[state=checked]:bg-primary-500 relative inline-flex h-6 w-11 cursor-pointer appearance-none items-center rounded-full border-2 border-transparent align-middle transition-colors duration-200 ease-in-out select-none focus:ring-indigo-600 focus:ring-offset-2 focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[state=unchecked]:bg-slate-200"
+    class="peer flex-shrink-0 focus-visible:ring-offset-background data-[state=checked]:bg-primary-500 relative inline-flex h-6 w-11 cursor-pointer appearance-none items-center rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out select-none focus:ring-indigo-600 focus:ring-offset-2 focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[state=unchecked]:bg-slate-200"
     :data-state="checked ? 'checked' : 'unchecked'"
     :disabled="disabled"
     :name="name"
@@ -43,12 +43,16 @@ const clickHandler = () => {
         :duration="{ enter: 200, leave: 100 }"
       >
         <template v-if="checked && slots.open">
-          <span class="absolute inset-0 flex h-full w-full items-center justify-center transition-opacity">
+          <span
+            class="absolute inset-0 flex h-full w-full items-center justify-center transition-opacity [:where(&>svg)]:h-3 [:where(&>svg)]:w-3"
+          >
             <slot name="open" />
           </span>
         </template>
         <template v-else-if="!checked && slots.close">
-          <span class="absolute inset-0 flex h-full w-full items-center justify-center transition-opacity">
+          <span
+            class="absolute inset-0 flex h-full w-full items-center justify-center transition-opacity [:where(&>svg)]:h-3 [:where(&>svg)]:w-3"
+          >
             <slot name="close" />
           </span>
         </template>