@aleph-alpha/ui-library 1.11.0 → 1.12.0

package/src/primitives/shadcn/calendar/CalendarPrevButton.vue

@@ -2,7 +2,7 @@
   import type { CalendarPrevProps } from 'reka-ui';
   import type { HTMLAttributes } from 'vue';
   import { reactiveOmit } from '@vueuse/core';
-  import { Icon } from '@/primitives/shadcn/icon';
+  import { UiIcon } from '@/primitives/UiIcon';
   import { CalendarPrev, useForwardProps } from 'reka-ui';
   import { cn } from '@/lib/utils';
   import { buttonVariants } from '@/primitives/shadcn/button';
@@ -27,7 +27,7 @@
     v-bind="forwardedProps"
   >
     <slot>
-      <Icon icon="i-material-symbols-keyboard-arrow-left" class="text-base" />
+      <UiIcon name="chevron-left" :size="16" />
     </slot>
   </CalendarPrev>
 </template>

package/src/primitives/shadcn/checkbox/Checkbox.vue

@@ -2,7 +2,7 @@
   import type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui';
   import type { HTMLAttributes } from 'vue';
   import { reactiveOmit } from '@vueuse/core';
-  import { Icon } from '@/primitives/shadcn/icon';
+  import { UiIcon } from '@/primitives/UiIcon';
   import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui';
   import { cn } from '@/lib/utils';
 
@@ -31,7 +31,7 @@
       class="grid place-content-center text-current transition-none"
     >
       <slot v-bind="slotProps">
-        <Icon icon="i-material-symbols-check" class="text-xs" />
+        <UiIcon name="check" :size="12" />
       </slot>
     </CheckboxIndicator>
   </CheckboxRoot>

package/src/primitives/shadcn/dropdown-menu/DropdownMenuCheckboxItem.vue

@@ -2,7 +2,7 @@
   import type { DropdownMenuCheckboxItemEmits, DropdownMenuCheckboxItemProps } from 'reka-ui';
   import type { HTMLAttributes } from 'vue';
   import { reactiveOmit } from '@vueuse/core';
-  import { Icon } from '@/primitives/shadcn/icon';
+  import { UiIcon } from '@/primitives/UiIcon';
   import {
     DropdownMenuCheckboxItem,
     DropdownMenuItemIndicator,
@@ -32,7 +32,7 @@
     <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
       <DropdownMenuItemIndicator class="flex items-center justify-center">
         <slot name="indicator-icon">
-          <Icon icon="i-material-symbols-check" class="size-4" />
+          <UiIcon name="check" :size="16" />
         </slot>
       </DropdownMenuItemIndicator>
     </span>

package/src/primitives/shadcn/dropdown-menu/DropdownMenuSubTrigger.vue

@@ -2,7 +2,7 @@
   import type { DropdownMenuSubTriggerProps } from 'reka-ui';
   import type { HTMLAttributes } from 'vue';
   import { reactiveOmit } from '@vueuse/core';
-  import { Icon } from '@/primitives/shadcn/icon';
+  import { UiIcon } from '@/primitives/UiIcon';
   import { DropdownMenuSubTrigger, useForwardProps } from 'reka-ui';
   import { cn } from '@/lib/utils';
 
@@ -26,6 +26,6 @@
     "
   >
     <slot />
-    <Icon icon="i-material-symbols-keyboard-arrow-right" class="ml-auto text-base" />
+    <UiIcon name="chevron-right" :size="16" class="ml-auto" />
   </DropdownMenuSubTrigger>
 </template>

package/src/primitives/shadcn/kbd/Kbd.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+  import type { HTMLAttributes } from 'vue';
+  import { cn } from '@/lib/utils';
+
+  const props = defineProps<{ class?: HTMLAttributes['class'] }>();
+</script>
+
+<template>
+  <kbd
+    data-slot="kbd"
+    :class="
+      cn(
+        'pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </kbd>
+</template>

package/src/primitives/shadcn/kbd/KbdGroup.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+  import type { HTMLAttributes } from 'vue';
+  import { cn } from '@/lib/utils';
+
+  const props = defineProps<{ class?: HTMLAttributes['class'] }>();
+</script>
+
+<template>
+  <span data-slot="kbd-group" :class="cn('inline-flex items-center gap-1', props.class)">
+    <slot />
+  </span>
+</template>

package/src/primitives/shadcn/kbd/index.ts

@@ -0,0 +1,2 @@
+export { default as Kbd } from './Kbd.vue';
+export { default as KbdGroup } from './KbdGroup.vue';

package/src/primitives/shadcn/listbox/Listbox.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+  import type { ListboxRootEmits, ListboxRootProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { ListboxRoot, useForwardPropsEmits } from 'reka-ui';
+  import { computed } from 'vue';
+  import { cn } from '@/lib/utils';
+
+  const props = defineProps<ListboxRootProps & { class?: HTMLAttributes['class'] }>();
+  const emits = defineEmits<ListboxRootEmits>();
+
+  const delegatedProps = computed(() => {
+    const { class: _class, ...delegated } = props;
+    return delegated;
+  });
+
+  const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <ListboxRoot data-slot="listbox" :class="cn('flex flex-col', props.class)" v-bind="forwarded">
+    <slot />
+  </ListboxRoot>
+</template>

package/src/primitives/shadcn/listbox/ListboxContent.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+  import type { ListboxContentProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { ListboxContent, useForwardProps } from 'reka-ui';
+  import { computed } from 'vue';
+  import { cn } from '@/lib/utils';
+
+  const props = defineProps<ListboxContentProps & { class?: HTMLAttributes['class'] }>();
+
+  const delegatedProps = computed(() => {
+    const { class: _class, ...delegated } = props;
+    return delegated;
+  });
+
+  const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <ListboxContent
+    data-slot="listbox-content"
+    :class="cn('max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </ListboxContent>
+</template>

package/src/primitives/shadcn/listbox/ListboxFilter.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+  import type { ListboxFilterEmits, ListboxFilterProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { ListboxFilter, useForwardPropsEmits } from 'reka-ui';
+  import { computed } from 'vue';
+  import { cn } from '@/lib/utils';
+
+  const props = defineProps<ListboxFilterProps & { class?: HTMLAttributes['class'] }>();
+  const emits = defineEmits<ListboxFilterEmits>();
+
+  const delegatedProps = computed(() => {
+    const { class: _class, ...delegated } = props;
+    return delegated;
+  });
+
+  const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <ListboxFilter
+    data-slot="listbox-filter"
+    :class="
+      cn(
+        'placeholder:text-muted-foreground flex h-9 w-full rounded-md bg-transparent px-3 py-2 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50',
+        props.class,
+      )
+    "
+    v-bind="forwarded"
+  />
+</template>

package/src/primitives/shadcn/listbox/ListboxGroup.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+  import type { ListboxGroupProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { ListboxGroup, useForwardProps } from 'reka-ui';
+  import { computed } from 'vue';
+  import { cn } from '@/lib/utils';
+
+  const props = defineProps<ListboxGroupProps & { class?: HTMLAttributes['class'] }>();
+
+  const delegatedProps = computed(() => {
+    const { class: _class, ...delegated } = props;
+    return delegated;
+  });
+
+  const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <ListboxGroup
+    data-slot="listbox-group"
+    :class="cn('overflow-hidden', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </ListboxGroup>
+</template>

package/src/primitives/shadcn/listbox/ListboxGroupLabel.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+  import type { ListboxGroupLabelProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { ListboxGroupLabel, useForwardProps } from 'reka-ui';
+  import { computed } from 'vue';
+  import { cn } from '@/lib/utils';
+
+  const props = defineProps<ListboxGroupLabelProps & { class?: HTMLAttributes['class'] }>();
+
+  const delegatedProps = computed(() => {
+    const { class: _class, ...delegated } = props;
+    return delegated;
+  });
+
+  const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <ListboxGroupLabel
+    data-slot="listbox-group-label"
+    :class="cn('text-muted-foreground px-2 py-1.5 text-xs font-medium', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </ListboxGroupLabel>
+</template>

package/src/primitives/shadcn/listbox/ListboxItem.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+  import type { ListboxItemEmits, ListboxItemProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { ListboxItem, useForwardPropsEmits } from 'reka-ui';
+  import { computed } from 'vue';
+  import { cn } from '@/lib/utils';
+
+  const props = defineProps<ListboxItemProps & { class?: HTMLAttributes['class'] }>();
+  const emits = defineEmits<ListboxItemEmits>();
+
+  const delegatedProps = computed(() => {
+    const { class: _class, ...delegated } = props;
+    return delegated;
+  });
+
+  const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <ListboxItem
+    data-slot="listbox-item"
+    :class="
+      cn(
+        'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+        props.class,
+      )
+    "
+    v-bind="forwarded"
+  >
+    <slot />
+  </ListboxItem>
+</template>

package/src/primitives/shadcn/listbox/ListboxItemIndicator.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+  import type { ListboxItemIndicatorProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { ListboxItemIndicator, useForwardProps } from 'reka-ui';
+  import { computed } from 'vue';
+  import { cn } from '@/lib/utils';
+
+  const props = defineProps<ListboxItemIndicatorProps & { class?: HTMLAttributes['class'] }>();
+
+  const delegatedProps = computed(() => {
+    const { class: _class, ...delegated } = props;
+    return delegated;
+  });
+
+  const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <ListboxItemIndicator
+    data-slot="listbox-item-indicator"
+    :class="cn('ml-auto inline-flex items-center justify-center', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="M20 6 9 17l-5-5" />
+      </svg>
+    </slot>
+  </ListboxItemIndicator>
+</template>

package/src/primitives/shadcn/listbox/index.ts

@@ -0,0 +1,7 @@
+export { default as Listbox } from './Listbox.vue';
+export { default as ListboxContent } from './ListboxContent.vue';
+export { default as ListboxFilter } from './ListboxFilter.vue';
+export { default as ListboxItem } from './ListboxItem.vue';
+export { default as ListboxItemIndicator } from './ListboxItemIndicator.vue';
+export { default as ListboxGroup } from './ListboxGroup.vue';
+export { default as ListboxGroupLabel } from './ListboxGroupLabel.vue';

package/src/primitives/shadcn/native-select/NativeSelect.vue

@@ -2,7 +2,7 @@
   import type { AcceptableValue } from 'reka-ui';
   import type { HTMLAttributes } from 'vue';
   import { reactiveOmit, useVModel } from '@vueuse/core';
-  import { Icon } from '@/primitives/shadcn/icon';
+  import { UiIcon } from '@/primitives/UiIcon';
   import { cn } from '@/lib/utils';
 
   defineOptions({
@@ -46,9 +46,10 @@
     >
       <slot />
     </select>
-    <Icon
-      icon="i-material-symbols-keyboard-arrow-down"
-      class="text-muted-foreground pointer-events-none absolute top-1/2 right-3.5 -translate-y-1/2 text-base opacity-50 select-none"
+    <UiIcon
+      name="chevron-down"
+      :size="16"
+      class="text-muted-foreground pointer-events-none absolute top-1/2 right-3.5 -translate-y-1/2 opacity-50 select-none"
       aria-hidden="true"
       data-slot="native-select-icon"
     />

package/src/primitives/shadcn/range-calendar/RangeCalendarNextButton.vue

@@ -2,7 +2,7 @@
   import type { RangeCalendarNextProps } from 'reka-ui';
   import type { HTMLAttributes } from 'vue';
   import { reactiveOmit } from '@vueuse/core';
-  import { Icon } from '@/primitives/shadcn/icon';
+  import { UiIcon } from '@/primitives/UiIcon';
   import { RangeCalendarNext, useForwardProps } from 'reka-ui';
   import { cn } from '@/lib/utils';
   import { buttonVariants } from '@/primitives/shadcn/button';
@@ -28,7 +28,7 @@
     v-bind="forwardedProps"
   >
     <slot>
-      <Icon icon="i-material-symbols-keyboard-arrow-right" class="text-base" />
+      <UiIcon name="chevron-right" :size="16" />
     </slot>
   </RangeCalendarNext>
 </template>

package/src/primitives/shadcn/range-calendar/RangeCalendarPrevButton.vue

@@ -2,7 +2,7 @@
   import type { RangeCalendarPrevProps } from 'reka-ui';
   import type { HTMLAttributes } from 'vue';
   import { reactiveOmit } from '@vueuse/core';
-  import { Icon } from '@/primitives/shadcn/icon';
+  import { UiIcon } from '@/primitives/UiIcon';
   import { RangeCalendarPrev, useForwardProps } from 'reka-ui';
   import { cn } from '@/lib/utils';
   import { buttonVariants } from '@/primitives/shadcn/button';
@@ -28,7 +28,7 @@
     v-bind="forwardedProps"
   >
     <slot>
-      <Icon icon="i-material-symbols-keyboard-arrow-left" class="text-base" />
+      <UiIcon name="chevron-left" :size="16" />
     </slot>
   </RangeCalendarPrev>
 </template>

package/src/primitives/shadcn/select/SelectItem.vue

@@ -2,7 +2,7 @@
   import type { SelectItemProps } from 'reka-ui';
   import type { HTMLAttributes } from 'vue';
   import { reactiveOmit } from '@vueuse/core';
-  import { Icon } from '@/primitives/shadcn/icon';
+  import { UiIcon } from '@/primitives/UiIcon';
   import { SelectItem, SelectItemIndicator, SelectItemText, useForwardProps } from 'reka-ui';
   import { cn } from '@/lib/utils';
 
@@ -27,7 +27,7 @@
     <span class="absolute right-2 flex size-3.5 items-center justify-center">
       <SelectItemIndicator>
         <slot name="indicator-icon">
-          <Icon icon="i-material-symbols-check" class="text-base" />
+          <UiIcon name="check" :size="16" />
         </slot>
       </SelectItemIndicator>
     </span>

package/src/primitives/shadcn/select/SelectScrollDownButton.vue

@@ -2,7 +2,7 @@
   import type { SelectScrollDownButtonProps } from 'reka-ui';
   import type { HTMLAttributes } from 'vue';
   import { reactiveOmit } from '@vueuse/core';
-  import { Icon } from '@/primitives/shadcn/icon';
+  import { UiIcon } from '@/primitives/UiIcon';
   import { SelectScrollDownButton, useForwardProps } from 'reka-ui';
   import { cn } from '@/lib/utils';
 
@@ -20,7 +20,7 @@
     :class="cn('flex cursor-default items-center justify-center py-1', props.class)"
   >
     <slot>
-      <Icon icon="i-material-symbols-keyboard-arrow-down" class="text-base" />
+      <UiIcon name="chevron-down" :size="16" />
     </slot>
   </SelectScrollDownButton>
 </template>

package/src/primitives/shadcn/select/SelectScrollUpButton.vue

@@ -2,7 +2,7 @@
   import type { SelectScrollUpButtonProps } from 'reka-ui';
   import type { HTMLAttributes } from 'vue';
   import { reactiveOmit } from '@vueuse/core';
-  import { Icon } from '@/primitives/shadcn/icon';
+  import { UiIcon } from '@/primitives/UiIcon';
   import { SelectScrollUpButton, useForwardProps } from 'reka-ui';
   import { cn } from '@/lib/utils';
 
@@ -20,7 +20,7 @@
     :class="cn('flex cursor-default items-center justify-center py-1', props.class)"
   >
     <slot>
-      <Icon icon="i-material-symbols-keyboard-arrow-up" class="text-base" />
+      <UiIcon name="chevron-up" :size="16" />
     </slot>
   </SelectScrollUpButton>
 </template>

package/src/primitives/shadcn/select/SelectTrigger.vue

@@ -2,7 +2,7 @@
   import type { SelectTriggerProps } from 'reka-ui';
   import type { HTMLAttributes } from 'vue';
   import { reactiveOmit } from '@vueuse/core';
-  import { Icon } from '@/primitives/shadcn/icon';
+  import { UiIcon } from '@/primitives/UiIcon';
   import { SelectIcon, SelectTrigger, useForwardProps } from 'reka-ui';
   import { cn } from '@/lib/utils';
 
@@ -31,7 +31,7 @@
   >
     <slot />
     <SelectIcon as-child>
-      <Icon icon="i-material-symbols-keyboard-arrow-down" class="text-base opacity-50" />
+      <UiIcon name="chevron-down" :size="16" class="opacity-50" />
     </SelectIcon>
   </SelectTrigger>
 </template>

package/src/primitives/shadcn/skeleton/Skeleton.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+  import type { HTMLAttributes } from 'vue';
+  import { cn } from '@/lib/utils';
+
+  const props = defineProps<{ class?: HTMLAttributes['class'] }>();
+</script>
+
+<template>
+  <div data-slot="skeleton" :class="cn('bg-muted animate-pulse rounded-md', props.class)" />
+</template>

package/src/primitives/shadcn/skeleton/index.ts

@@ -0,0 +1 @@
+export { default as Skeleton } from './Skeleton.vue';

package/src/primitives/shadcn/spinner/Spinner.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
   import type { HTMLAttributes } from 'vue';
-  import { Icon } from '@/primitives/shadcn/icon';
+  import { UiIcon } from '@/primitives/UiIcon';
   import { cn } from '@/lib/utils';
 
   const props = defineProps<{
@@ -9,10 +9,11 @@
 </script>
 
 <template>
-  <Icon
-    icon="i-material-symbols-progress-activity"
+  <UiIcon
+    name="loader-circle"
+    :size="16"
     role="status"
     aria-label="Loading"
-    :class="cn('text-base animate-spin', props.class)"
+    :class="cn('animate-spin', props.class)"
   />
 </template>

package/src/primitives/shadcn/tags-input/TagsInput.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+  import type { TagsInputRootEmits, TagsInputRootProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { TagsInputRoot, useForwardPropsEmits } from 'reka-ui';
+  import { computed } from 'vue';
+  import { cn } from '@/lib/utils';
+
+  const props = defineProps<TagsInputRootProps & { class?: HTMLAttributes['class'] }>();
+  const emits = defineEmits<TagsInputRootEmits>();
+
+  const delegatedProps = computed(() => {
+    const { class: _class, ...delegated } = props;
+    return delegated;
+  });
+
+  const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <TagsInputRoot
+    data-slot="tags-input"
+    :class="
+      cn(
+        'border-input focus-within:border-ring focus-within:ring-ring/50 flex min-h-9 w-full flex-wrap items-center gap-1.5 rounded-md border bg-transparent px-3 py-1 text-sm shadow-xs transition-[color,box-shadow] focus-within:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        props.class,
+      )
+    "
+    v-bind="forwarded"
+    v-slot="slotProps"
+  >
+    <slot v-bind="slotProps" />
+  </TagsInputRoot>
+</template>

package/src/primitives/shadcn/tags-input/TagsInputInput.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+  import type { TagsInputInputProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { TagsInputInput, useForwardProps } from 'reka-ui';
+  import { computed } from 'vue';
+  import { cn } from '@/lib/utils';
+
+  const props = defineProps<TagsInputInputProps & { class?: HTMLAttributes['class'] }>();
+
+  const delegatedProps = computed(() => {
+    const { class: _class, ...delegated } = props;
+    return delegated;
+  });
+
+  const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <TagsInputInput
+    data-slot="tags-input-input"
+    :class="cn('placeholder:text-muted-foreground flex-1 bg-transparent outline-none', props.class)"
+    v-bind="forwardedProps"
+  />
+</template>

package/src/primitives/shadcn/tags-input/TagsInputItem.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+  import type { TagsInputItemProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { TagsInputItem, useForwardProps } from 'reka-ui';
+  import { computed } from 'vue';
+  import { cn } from '@/lib/utils';
+
+  const props = defineProps<TagsInputItemProps & { class?: HTMLAttributes['class'] }>();
+
+  const delegatedProps = computed(() => {
+    const { class: _class, ...delegated } = props;
+    return delegated;
+  });
+
+  const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <TagsInputItem
+    data-slot="tags-input-item"
+    :class="
+      cn(
+        'bg-secondary text-secondary-foreground data-[state=active]:border-ring data-[state=active]:ring-ring/50 inline-flex h-6 shrink-0 items-center gap-1 rounded-sm border px-1 text-xs font-medium transition-[color,box-shadow] data-[state=active]:ring-[3px] [&[data-disabled]]:opacity-50 [&>button]:shrink-0',
+        props.class,
+      )
+    "
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </TagsInputItem>
+</template>

package/src/primitives/shadcn/tags-input/TagsInputItemDelete.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+  import type { TagsInputItemDeleteProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { TagsInputItemDelete, useForwardProps } from 'reka-ui';
+  import { computed } from 'vue';
+  import { cn } from '@/lib/utils';
+
+  const props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes['class'] }>();
+
+  const delegatedProps = computed(() => {
+    const { class: _class, ...delegated } = props;
+    return delegated;
+  });
+
+  const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <TagsInputItemDelete
+    data-slot="tags-input-item-delete"
+    :class="
+      cn(
+        'hover:bg-secondary-foreground/20 focus-visible:border-ring focus-visible:ring-ring/50 -mr-0.5 flex size-4 items-center justify-center rounded-sm transition-[color,box-shadow] outline-none focus-visible:ring-[3px]',
+        props.class,
+      )
+    "
+    v-bind="forwardedProps"
+  >
+    <slot>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="14"
+        height="14"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="M18 6 6 18" />
+        <path d="m6 6 12 12" />
+      </svg>
+    </slot>
+  </TagsInputItemDelete>
+</template>