chore: add images, docs item

apps/www/.vitepress/theme/config/docs.ts

@@ -128,12 +128,10 @@ export const docsConfig: DocsConfig = {
           title: 'Auto Form',
           href: '/docs/components/auto-form',
           items: [],
-          label: 'New',
         },
         {
           title: 'Charts',
           href: '/docs/charts',
-          label: 'New Alpha',
           items: [],
         },
       ],
@@ -141,6 +139,11 @@ export const docsConfig: DocsConfig = {
     {
       title: 'Components',
       items: [
+        {
+          title: 'Sidebar',
+          href: '/docs/components/sidebar',
+          label: 'New',
+        },
         {
           title: 'Accordion',
           href: '/docs/components/accordion',
@@ -178,7 +181,6 @@ export const docsConfig: DocsConfig = {
           title: 'Calendar',
           href: '/docs/components/calendar',
           items: [],
-          label: 'Updated',
         },
         {
           title: 'Card',
@@ -217,7 +219,6 @@ export const docsConfig: DocsConfig = {
           title: 'Date Picker',
           href: '/docs/components/date-picker',
           items: [],
-          label: 'Updated',
         },
         {
           title: 'Dialog',
@@ -259,7 +260,6 @@ export const docsConfig: DocsConfig = {
         {
           title: 'Number Field',
           href: '/docs/components/number-field',
-          label: 'New Alpha',
         },
         {
           title: 'Pagination',
@@ -324,7 +324,6 @@ export const docsConfig: DocsConfig = {
         {
           title: 'Stepper',
           href: '/docs/components/stepper',
-          label: 'New',
         },
         {
           title: 'Switch',

apps/www/src/content/docs/components/sidebar.md

@@ -0,0 +1,73 @@
+---
+title: Sheet
+description: Extends the Dialog component to display content that complements the main content of the screen.
+source: apps/www/src/lib/registry/default/ui/sheet
+primitive: https://www.radix-vue.com/components/dialog.html
+---
+
+<ComponentPreview name="SheetDemo" />
+
+## Installation
+
+```bash
+npx shadcn-vue@latest add sheet
+```
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@/components/ui/sheet'
+</script>
+
+<template>
+  <Sheet>
+    <SheetTrigger>Open</SheetTrigger>
+    <SheetContent>
+      <SheetHeader>
+        <SheetTitle>Are you absolutely sure?</SheetTitle>
+        <SheetDescription>
+          This action cannot be undone. This will permanently delete your account
+          and remove your data from our servers.
+        </SheetDescription>
+      </SheetHeader>
+    </SheetContent>
+  </Sheet>
+</template>
+```
+
+## Examples
+
+### Side
+
+Use the `side` property to `<SheetContent />` to indicate the edge of the screen where the component will appear. The values can be `top`, `right`, `bottom` or `left`.
+
+<ComponentPreview name="SheetSideDemo" />
+
+### Size
+
+You can adjust the size of the sheet using CSS classes:
+
+```vue:line-numbers {4}
+<template>
+  <Sheet>
+    <SheetTrigger>Open</SheetTrigger>
+    <SheetContent class="w-[400px] sm:w-[540px]">
+      <SheetHeader>
+        <SheetTitle>Are you absolutely sure?</SheetTitle>
+        <SheetDescription>
+          This action cannot be undone. This will permanently delete your account
+          and remove your data from our servers.
+        </SheetDescription>
+      </SheetHeader>
+    </SheetContent>
+  </Sheet>
+</template>
+```

apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbSeparator.vue

@@ -12,7 +12,7 @@ const props = defineProps<{
   <li
     role="presentation"
     aria-hidden="true"
-    :class="cn('[&>svg]:size-3.5', props.class)"
+    :class="cn('[&>svg]:w-3.5 [&>svg]:h-3.5', props.class)"
   >
     <slot>
       <ChevronRight />