docs(chip): update

docs/app/components/content/examples/accordion/AccordionModelValueExample.vue

@@ -19,7 +19,7 @@ const items = [
 
 const active = ref('0')
 
-// Note: This is for demonstration purposes only.
+// Note: This is for demonstration purposes only. Don't do this at home.
 onMounted(() => {
   setInterval(() => {
     active.value = String((Number(active.value) + 1) % items.length)

docs/app/components/content/examples/chip/ChipShowExample.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+const statuses = ['online', 'offline', 'busy', 'away']
+const status = ref(statuses[0])
+
+const color = computed(() => ({
+  online: 'green',
+  offline: 'gray',
+  busy: 'red',
+  away: 'amber'
+})[status.value] as any)
+const show = computed(() => status.value !== 'offline')
+
+// Note: This is for demonstration purposes only. Don't do this at home.
+onMounted(() => {
+  setInterval(() => {
+    status.value = statuses[Math.floor(Math.random() * statuses.length)]
+  }, 1000)
+})
+</script>
+
+<template>
+  <UChip :color="color" :show="show" inset>
+    <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" />
+  </UChip>
+</template>

docs/app/components/content/examples/tabs/TabsModelValueExample.vue

@@ -10,7 +10,7 @@ const items = [
 
 const active = ref('0')
 
-// Note: This is for demonstration purposes only.
+// Note: This is for demonstration purposes only. Don't do this at home.
 onMounted(() => {
   setInterval(() => {
     active.value = String((Number(active.value) + 1) % items.length)

docs/app/components/content/examples/tooltip/TooltipOpenExample.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 const open = ref(true)
 
-// Note: This is for demonstration purposes only.
+// Note: This is for demonstration purposes only. Don't do this at home.
 onMounted(() => {
   setInterval(() => {
     open.value = !open.value

docs/content/3.components/chip.md

@@ -8,8 +8,133 @@ links:
 
 ## Usage
 
+Wrap any component with a Chip to display an indicator.
+
+::component-code
+---
+prettier: true
+slots:
+  default: |
+
+    <UButton icon="i-heroicons-envelope" color="gray" variant="subtle" />
+---
+:u-button{icon="i-heroicons-envelope" color="gray" variant="subtle"}
+::
+
+### Color
+
+Use the `color` prop to change the color of the Chip.
+
+::component-code
+---
+prettier: true
+props:
+  color: gray
+slots:
+  default: |
+
+    <UButton icon="i-heroicons-envelope" color="gray" variant="subtle" />
+---
+:u-button{icon="i-heroicons-envelope" color="gray" variant="subtle"}
+::
+
+### Size
+
+Use the `size` prop to change the size of the Chip.
+
+::component-code
+---
+prettier: true
+props:
+  size: 3xl
+slots:
+  default: |
+
+    <UButton icon="i-heroicons-envelope" color="gray" variant="subtle" />
+---
+:u-button{icon="i-heroicons-envelope" color="gray" variant="subtle"}
+::
+
+### Text
+
+Use the `text` prop to set the text of the Chip.
+
+::component-code
+---
+prettier: true
+props:
+  text: 5
+  size: 3xl
+slots:
+  default: |
+
+    <UButton icon="i-heroicons-envelope" color="gray" variant="subtle" />
+---
+:u-button{icon="i-heroicons-envelope" color="gray" variant="subtle"}
+::
+
+### Position
+
+Use the `position` prop to change the position of the Chip.
+
+::component-code
+---
+prettier: true
+props:
+  position: 'bottom-left'
+slots:
+  default: |
+
+    <UButton icon="i-heroicons-envelope" color="gray" variant="subtle" />
+---
+:u-button{icon="i-heroicons-envelope" color="gray" variant="subtle"}
+::
+
+### Inset
+
+Use the `inset` prop to display the Chip inside the component. This is useful when dealing with rounded components.
+
+::component-code
+---
+prettier: true
+props:
+  inset: true
+slots:
+  default: |
+
+    <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" />
+---
+:u-avatar{src="https://avatars.githubusercontent.com/u/739984?v=4"}
+::
+
+### Standalone
+
+Use the `standalone` prop alongside the `inset` prop to display the Chip inline.
+
+::component-code
+---
+props:
+  standalone: true
+  inset: true
+---
+::
+
+::note
+It's used this way in the [CommandPalette](/components/command-palette), [InputMenu](/components/input-menu), [Select](/components/select) or [SelectMenu](/components/select-menu) components for example.
+::
+
 ## Examples
 
+### Control visibility
+
+You can control the visibility of the Chip using the `show` prop.
+
+:component-example{name="chip-show-example"}
+
+::note
+In this example, the Chip has a color per status and is only displayed when the status is not `offline`.
+::
+
 ## API
 
 ### Props

docs/nuxt.config.ts

@@ -126,6 +126,7 @@ export default defineNuxtConfig({
         'UButton',
         'UButtonGroup',
         'UCheckbox',
+        'UChip',
         'UIcon',
         'UInput',
         'UKbd',

src/runtime/components/Chip.vue

@@ -44,7 +44,10 @@ import { computed } from 'vue'
 import { Primitive } from 'radix-vue'
 import { useAvatarGroup } from '../composables/useAvatarGroup'
 
-const props = defineProps<ChipProps>()
+const props = withDefaults(defineProps<ChipProps>(), {
+  inset: false,
+  standalone: false
+})
 defineSlots<ChipSlots>()
 
 const show = defineModel<boolean>('show', { default: true })