docs(v4): add Item to docs, cleanup

apps/v4/components/demo/ItemAvatarDemo.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { Plus } from 'lucide-vue-next'
+import { Avatar, AvatarFallback, AvatarImage } from '@/registry/new-york-v4/ui/avatar'
+import { Button } from '@/registry/new-york-v4/ui/button'
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemMedia,
+  ItemTitle,
+} from '@/registry/new-york-v4/ui/item'
+</script>
+
+<template>
+  <div class="flex w-full max-w-lg flex-col gap-6">
+    <Item variant="outline">
+      <ItemMedia>
+        <Avatar class="size-10">
+          <AvatarImage src="https://github.com/evilrabbit.png" />
+          <AvatarFallback>ER</AvatarFallback>
+        </Avatar>
+      </ItemMedia>
+      <ItemContent>
+        <ItemTitle>Evil Rabbit</ItemTitle>
+        <ItemDescription>Last seen 5 months ago</ItemDescription>
+      </ItemContent>
+      <ItemActions>
+        <Button
+          size="icon-sm"
+          variant="outline"
+          class="rounded-full"
+          aria-label="Invite"
+        >
+          <Plus />
+        </Button>
+      </ItemActions>
+    </Item>
+    <Item variant="outline">
+      <ItemMedia>
+        <div class="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale">
+          <Avatar class="hidden sm:flex">
+            <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+            <AvatarFallback>CN</AvatarFallback>
+          </Avatar>
+          <Avatar class="hidden sm:flex">
+            <AvatarImage
+              src="https://github.com/maxleiter.png"
+              alt="@maxleiter"
+            />
+            <AvatarFallback>LR</AvatarFallback>
+          </Avatar>
+          <Avatar>
+            <AvatarImage
+              src="https://github.com/evilrabbit.png"
+              alt="@evilrabbit"
+            />
+            <AvatarFallback>ER</AvatarFallback>
+          </Avatar>
+        </div>
+      </ItemMedia>
+      <ItemContent>
+        <ItemTitle>No Team Members</ItemTitle>
+        <ItemDescription>
+          Invite your team to collaborate on this project.
+        </ItemDescription>
+      </ItemContent>
+      <ItemActions>
+        <Button size="sm" variant="outline">
+          Invite
+        </Button>
+      </ItemActions>
+    </Item>
+  </div>
+</template>

apps/v4/components/demo/ItemDemo.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { BadgeCheckIcon, ChevronRightIcon } from 'lucide-vue-next'
+import { Button } from '@/registry/new-york-v4/ui/button'
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemMedia,
+  ItemTitle,
+} from '@/registry/new-york-v4/ui/item'
+</script>
+
+<template>
+  <div class="flex w-full max-w-md flex-col gap-6">
+    <Item variant="outline">
+      <ItemContent>
+        <ItemTitle>Basic Item</ItemTitle>
+        <ItemDescription>
+          A simple item with title and description.
+        </ItemDescription>
+      </ItemContent>
+      <ItemActions>
+        <Button variant="outline" size="sm">
+          Action
+        </Button>
+      </ItemActions>
+    </Item>
+    <Item variant="outline" size="sm" as-child>
+      <a href="#">
+        <ItemMedia>
+          <BadgeCheckIcon class="size-5" />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Your profile has been verified.</ItemTitle>
+        </ItemContent>
+        <ItemActions>
+          <ChevronRightIcon class="size-4" />
+        </ItemActions>
+      </a>
+    </Item>
+  </div>
+</template>

apps/v4/components/demo/ItemDropdownDemo.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { ChevronDownIcon } from 'lucide-vue-next'
+import { Avatar, AvatarFallback, AvatarImage } from '@/registry/new-york-v4/ui/avatar'
+import { Button } from '@/registry/new-york-v4/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/registry/new-york-v4/ui/dropdown-menu'
+import {
+  Item,
+  ItemContent,
+  ItemDescription,
+  ItemMedia,
+  ItemTitle,
+} from '@/registry/new-york-v4/ui/item'
+
+const people = [
+  {
+    username: 'shadcn',
+    avatar: 'https://github.com/shadcn.png',
+    email: 'shadcn@vercel.com',
+  },
+  {
+    username: 'maxleiter',
+    avatar: 'https://github.com/maxleiter.png',
+    email: 'maxleiter@vercel.com',
+  },
+  {
+    username: 'evilrabbit',
+    avatar: 'https://github.com/evilrabbit.png',
+    email: 'evilrabbit@vercel.com',
+  },
+]
+</script>
+
+<template>
+  <div class="flex min-h-64 w-full max-w-md flex-col items-center gap-6">
+    <DropdownMenu>
+      <DropdownMenuTrigger as-child>
+        <Button variant="outline" size="sm" class="w-fit">
+          Select <ChevronDownIcon />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent class="w-72 [--radius:0.65rem]" align="end">
+        <DropdownMenuItem v-for="person in people" :key="person.username" class="p-0">
+          <Item size="sm" class="w-full p-2">
+            <ItemMedia>
+              <Avatar class="size-8">
+                <AvatarImage :src="person.avatar" class="grayscale" />
+                <AvatarFallback>{{ person.username.charAt(0) }}</AvatarFallback>
+              </Avatar>
+            </ItemMedia>
+            <ItemContent class="gap-0.5">
+              <ItemTitle>{{ person.username }}</ItemTitle>
+              <ItemDescription>{{ person.email }}</ItemDescription>
+            </ItemContent>
+          </Item>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </div>
+</template>