feat(Chip): new component (#886)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

docs/components/content/examples/ChipExampleContentSlot.vue

@@ -0,0 +1,19 @@
+<template>
+  <UChip size="md" position="bottom-right" inset :ui="{ base: '-mx-2 rounded-none ring-0', background: '' }">
+    <UAvatar
+      src="https://avatars.githubusercontent.com/u/739984?v=4"
+      alt="Avatar"
+      size="lg"
+    />
+
+    <template #content>
+      <UAvatar
+        src="https://avatars.githubusercontent.com/in/80442?v=4"
+        alt="Avatar"
+        size="xs"
+        :ui="{ rounded: 'rounded-md' }"
+        class="shadow-md"
+      />
+    </template>
+  </UChip>
+</template>

docs/components/content/examples/ChipExampleShow.vue

@@ -0,0 +1,19 @@
+<script setup>
+const items = [{
+  name: 'messages',
+  icon: 'i-heroicons-chat-bubble-oval-left',
+  count: 3
+}, {
+  name: 'notifications',
+  icon: 'i-heroicons-bell',
+  count: 0
+}]
+</script>
+
+<template>
+  <div class="flex gap-3">
+    <UChip v-for="{ name, icon, count } in items" :key="name" :show="count > 0">
+      <UButton :icon="icon" color="gray" />
+    </UChip>
+  </div>
+</template>

docs/content/2.elements/12.chip.md

@@ -0,0 +1,134 @@
+---
+description: Display a chip indicator on any component.
+navigation:
+  badge: New
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Chip.vue
+---
+
+## Usage
+
+Wrap any component with the `Chip` component to display a chip indicator.
+
+::component-card
+---
+code: >-
+
+  <UButton icon="i-heroicons-inbox" color="gray" />
+---
+
+#default
+:u-button{icon="i-heroicons-inbox" color="gray"}
+::
+
+### Size
+
+Use the `size` prop to change the size of the chip.
+
+::component-card
+---
+props:
+  size: '2xl'
+code: >-
+
+    <UButton icon="i-heroicons-inbox" color="gray" />
+---
+
+#default
+:u-button{icon="i-heroicons-inbox" color="gray"}
+::
+
+### Color
+
+Use the `color` prop to change the color of the chip.
+
+::component-card
+---
+props:
+  color: 'red'
+code: >-
+
+    <UButton icon="i-heroicons-inbox" color="gray" />
+---
+
+#default
+:u-button{icon="i-heroicons-inbox" color="gray"}
+::
+
+### Position
+
+Use the `position` prop to change the position of the chip.
+
+::component-card
+---
+props:
+  position: 'bottom-right'
+code: >-
+
+    <UButton icon="i-heroicons-inbox" color="gray" />
+---
+
+#default
+:u-button{icon="i-heroicons-inbox" color="gray"}
+::
+
+### Text
+
+Use the `text` prop to display text in the chip.
+
+::component-card
+---
+props:
+  text: '3'
+  size: '2xl'
+excludedProps:
+  - size
+code: >-
+
+    <UButton icon="i-heroicons-inbox" color="gray" />
+---
+
+#default
+:u-button{icon="i-heroicons-inbox" color="gray"}
+::
+
+### Show
+
+Use the `show` prop to conditionally display the chip.
+
+:component-example{component="chip-example-show"}
+
+### Inset
+
+Use the `inset` prop to display the chip inside the component. This is useful when dealing with rounded components.
+
+::component-card
+---
+props:
+  inset: true
+code: >-
+
+  <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Avatar" />
+---
+
+#default
+:u-avatar{src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Avatar"}
+::
+
+## Slots
+
+### `content`
+
+Use the `#content` slot to fully customize the chip.
+
+:component-example{component="chip-example-content-slot"}
+
+## Props
+
+:component-props
+
+## Config
+
+:component-preset