feat(Chip): new component

src/runtime/components/Chip.vue

@@ -0,0 +1,58 @@
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { PrimitiveProps } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/chip'
+
+const appConfig = _appConfig as AppConfig & { ui: { chip: Partial<typeof theme> } }
+
+const chip = tv({ extend: tv(theme), ...(appConfig.ui?.chip || {}) })
+
+type ChipVariants = VariantProps<typeof chip>
+
+export interface ChipProps extends Omit<PrimitiveProps, 'asChild'> {
+  text?: string | number
+  inset?: boolean
+  color?: ChipVariants['color']
+  size?: ChipVariants['size']
+  position?: ChipVariants['position']
+  class?: any
+  ui?: Partial<typeof theme.slots>
+}
+
+export interface ChipSlots {
+  default(): any
+  content(): any
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Primitive } from 'radix-vue'
+
+const show = defineModel<boolean>('show', { default: true })
+const props = withDefaults(defineProps<ChipProps>(), { as: 'div' })
+defineSlots<ChipSlots>()
+
+// FIXME: Cannot extend multiple times: https://github.com/nextui-org/tailwind-variants/issues/168
+// const ui = computed(() => tv({ extend: chip, slots: props.ui })({
+const ui = computed(() => chip({
+  color: props.color,
+  size: props.size,
+  position: props.position,
+  inset: props.inset
+}))
+</script>
+
+<template>
+  <Primitive :as="as" :class="ui.root({ class: props.class })">
+    <slot />
+
+    <span v-if="show" :class="ui.base()">
+      <slot name="content">
+        {{ text }}
+      </slot>
+    </span>
+  </Primitive>
+</template>

src/theme/chip.ts

@@ -0,0 +1,56 @@
+export default (config: { colors: string[] }) => ({
+  slots: {
+    root: 'relative inline-flex items-center justify-center shrink-0',
+    base: 'absolute rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap'
+  },
+  variants: {
+    color: {
+      ...Object.fromEntries(config.colors.map((color: string) => [color, `bg-${color}-500 dark:bg-${color}-400`])),
+      gray: 'bg-gray-500 dark:bg-gray-400',
+      white: 'bg-white dark:bg-gray-900',
+      black: 'bg-gray-900 dark:bg-white'
+    },
+    size: {
+      '3xs': 'h-[4px] min-w-[4px] text-[4px] p-px',
+      '2xs': 'h-[5px] min-w-[5px] text-[5px] p-px',
+      xs: 'h-1.5 min-w-[0.375rem] text-[6px] p-px',
+      sm: 'h-2 min-w-[0.5rem] text-[7px] p-0.5',
+      md: 'h-2.5 min-w-[0.625rem] text-[8px] p-0.5',
+      lg: 'h-3 min-w-[0.75rem] text-[10px] p-0.5',
+      xl: 'h-3.5 min-w-[0.875rem] text-[11px] p-1',
+      '2xl': 'h-4 min-w-[1rem] text-[12px] p-1',
+      '3xl': 'h-5 min-w-[1.25rem] text-[14px] p-1'
+    },
+    position: {
+      'top-right': 'top-0 right-0',
+      'bottom-right': 'bottom-0 right-0',
+      'top-left': 'top-0 left-0',
+      'bottom-left': 'bottom-0 left-0'
+    },
+    inset: {
+      false: ''
+    }
+  },
+  compoundVariants: [{
+    position: 'top-right',
+    inset: false,
+    class: '-translate-y-1/2 translate-x-1/2 transform'
+  }, {
+    position: 'bottom-right',
+    inset: false,
+    class: 'translate-y-1/2 translate-x-1/2 transform'
+  }, {
+    position: 'top-left',
+    inset: false,
+    class: '-translate-y-1/2 -translate-x-1/2 transform'
+  }, {
+    position: 'bottom-left',
+    inset: false,
+    class: 'translate-y-1/2 -translate-x-1/2 transform'
+  }],
+  defaultVariants: {
+    size: 'sm',
+    color: 'primary',
+    position: 'top-right'
+  }
+})

src/theme/index.ts

@@ -2,6 +2,7 @@ export { default as avatar } from './avatar'
 export { default as badge } from './badge'
 export { default as button } from './button'
 export { default as card } from './card'
+export { default as chip } from './chip'
 export { default as collapsible } from './collapsible'
 export { default as container } from './container'
 export { default as icons } from './icons'