feat: create mcp

packages/ui/src/components/tags-input/TagsInput.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { TagsInputRootEmits, TagsInputRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { TagsInputRoot, useForwardPropsEmits } from "reka-ui"
+import { cn } from '#/lib/utils'
+
+const props = defineProps<TagsInputRootProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<TagsInputRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <TagsInputRoot
+    v-slot="slotProps" v-bind="forwarded" :class="cn(
+      'flex flex-wrap gap-2 items-center rounded-md border border-input bg-background px-2 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none',
+      'focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]',
+      'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+      props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </TagsInputRoot>
+</template>

packages/ui/src/components/tags-input/TagsInputInput.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { TagsInputInputProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { TagsInputInput, useForwardProps } from "reka-ui"
+import { cn } from '#/lib/utils'
+
+const props = defineProps<TagsInputInputProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputInput v-bind="forwardedProps" :class="cn('text-sm min-h-5 focus:outline-none flex-1 bg-transparent px-1', props.class)" />
+</template>

packages/ui/src/components/tags-input/TagsInputItem.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { TagsInputItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+
+import { reactiveOmit } from "@vueuse/core"
+import { TagsInputItem, useForwardProps } from "reka-ui"
+import { cn } from '#/lib/utils'
+
+const props = defineProps<TagsInputItemProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputItem v-bind="forwardedProps" :class="cn('flex h-5 items-center rounded-md bg-secondary data-[state=active]:ring-ring data-[state=active]:ring-2 data-[state=active]:ring-offset-2 ring-offset-background', props.class)">
+    <slot />
+  </TagsInputItem>
+</template>

packages/ui/src/components/tags-input/TagsInputItemDelete.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { TagsInputItemDeleteProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { X } from "lucide-vue-next"
+import { TagsInputItemDelete, useForwardProps } from "reka-ui"
+import { cn } from '#/lib/utils'
+
+const props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputItemDelete v-bind="forwardedProps" :class="cn('flex rounded bg-transparent mr-1', props.class)">
+    <slot>
+      <X class="w-4 h-4" />
+    </slot>
+  </TagsInputItemDelete>
+</template>

packages/ui/src/components/tags-input/TagsInputItemText.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { TagsInputItemTextProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { TagsInputItemText, useForwardProps } from "reka-ui"
+import { cn } from '#/lib/utils'
+
+const props = defineProps<TagsInputItemTextProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputItemText v-bind="forwardedProps" :class="cn('py-0.5 px-2 text-sm rounded bg-transparent', props.class)" />
+</template>

packages/ui/src/components/tags-input/index.ts

@@ -0,0 +1,5 @@
+export { default as TagsInput } from "./TagsInput.vue"
+export { default as TagsInputInput } from "./TagsInputInput.vue"
+export { default as TagsInputItem } from "./TagsInputItem.vue"
+export { default as TagsInputItemDelete } from "./TagsInputItemDelete.vue"
+export { default as TagsInputItemText } from "./TagsInputItemText.vue"

packages/ui/src/index.ts

@@ -31,5 +31,6 @@ export * from './components/spinner/index'
 export * from './components/switch/index'
 export * from './components/table/index'
 export * from './components/tabs/index'
+export * from './components/tags-input/index'
 export * from './components/textarea/index'
 export * from './components/tooltip/index'