feat: add artifact component and its sub components

Author: zhouLion

packages/elements/src/artifact/Artifact.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { ArtifactProps } from './props'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { computed } from 'vue'
+
+const props = defineProps<ArtifactProps>()
+
+const classes = computed(() => cn(
+  'flex flex-col overflow-hidden rounded-lg border bg-background shadow-sm',
+  props.class,
+))
+</script>
+
+<template>
+  <div
+    v-bind="{
+      ...props,
+      class: classes,
+    }"
+  >
+    <slot />
+  </div>
+</template>

packages/elements/src/artifact/ArtifactAction.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import type { ArtifactActionProps } from './props'
+import { Button } from '@repo/shadcn-vue/components/ui/button'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@repo/shadcn-vue/components/ui/tooltip'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<ArtifactActionProps>(), {
+  variant: 'ghost',
+  size: 'sm',
+})
+
+const classes = computed(() => cn(
+  'size-8 p-0 text-muted-foreground hover:text-foreground',
+  props.class,
+))
+</script>
+
+<template>
+  <TooltipProvider v-if="props.tooltip">
+    <Tooltip>
+      <TooltipTrigger as-child>
+        <Button
+          type="button"
+          v-bind="{
+            ...props,
+            class: classes,
+          }"
+        >
+          <component
+            :is="props.icon"
+            v-if="props.icon"
+            class="size-4"
+          />
+          <slot v-else />
+          <span class="sr-only">{{ props.label || props.tooltip }}</span>
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>{{ props.tooltip }}</p>
+      </TooltipContent>
+    </Tooltip>
+  </TooltipProvider>
+
+  <Button
+    v-else
+    type="button"
+    v-bind="{
+      ...props,
+      class: classes,
+    }"
+  >
+    <component
+      :is="props.icon"
+      v-if="props.icon"
+      class="size-4"
+    />
+    <slot v-else />
+    <span class="sr-only">{{ props.label || props.tooltip }}</span>
+  </Button>
+</template>

packages/elements/src/artifact/ArtifactActions.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { ArtifactActionsProps } from './props'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { computed } from 'vue'
+
+const props = defineProps<ArtifactActionsProps>()
+
+const classes = computed(() => cn('flex items-center gap-1', props.class))
+</script>
+
+<template>
+  <div
+    v-bind="{
+      ...props,
+      class: classes,
+    }"
+  >
+    <slot />
+  </div>
+</template>

packages/elements/src/artifact/ArtifactClose.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { ArtifactCloseProps } from './props'
+import { Button } from '@repo/shadcn-vue/components/ui/button'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { X } from 'lucide-vue-next'
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<ArtifactCloseProps>(), {
+  variant: 'ghost',
+  size: 'sm',
+})
+
+const classes = computed(() => cn(
+  'size-8 p-0 text-muted-foreground hover:text-foreground',
+  props.class,
+))
+</script>
+
+<template>
+  <Button
+    type="button"
+    v-bind="{
+      ...props,
+      class: classes,
+    }"
+  >
+    <slot>
+      <X class="size-4" />
+    </slot>
+    <span class="sr-only">Close</span>
+  </Button>
+</template>

packages/elements/src/artifact/ArtifactContent.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { computed, useAttrs } from 'vue'
+
+interface Props {
+  class?: string
+}
+
+const props = defineProps<Props>()
+const attrs = useAttrs()
+
+const classes = computed(() => cn('flex-1 overflow-auto p-4', props.class))
+</script>
+
+<template>
+  <div
+    :class="classes"
+    v-bind="attrs"
+  >
+    <slot />
+  </div>
+</template>

packages/elements/src/artifact/ArtifactDescription.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { ArtifactDescriptionProps } from './props'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { computed } from 'vue'
+
+const props = defineProps<ArtifactDescriptionProps>()
+
+const classes = computed(() => cn('text-muted-foreground text-sm', props.class))
+</script>
+
+<template>
+  <p
+    v-bind="{
+      ...props,
+      class: classes,
+    }"
+  >
+    <slot />
+  </p>
+</template>

packages/elements/src/artifact/ArtifactHeader.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { ArtifactHeaderProps } from './props'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { computed } from 'vue'
+
+const props = defineProps<ArtifactHeaderProps>()
+
+const classes = computed(() => cn(
+  'flex items-center justify-between border-b bg-muted/50 px-4 py-3',
+  props.class,
+))
+</script>
+
+<template>
+  <div
+    :class="classes"
+    v-bind="{
+      ...props,
+      class: classes,
+    }"
+  >
+    <slot />
+  </div>
+</template>

packages/elements/src/artifact/ArtifactTitle.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { ArtifactTitleProps } from './props'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { computed } from 'vue'
+
+const props = defineProps<ArtifactTitleProps>()
+
+const classes = computed(() => cn('font-medium text-foreground text-sm', props.class))
+</script>
+
+<template>
+  <p
+    v-bind="{
+      ...props,
+      class: classes,
+    }"
+  >
+    <slot />
+  </p>
+</template>

packages/elements/src/artifact/index.tsx

@@ -0,0 +1,19 @@
+export { default as Artifact } from './Artifact.vue'
+export { default as ArtifactAction } from './ArtifactAction.vue'
+export { default as ArtifactActions } from './ArtifactActions.vue'
+export { default as ArtifactClose } from './ArtifactClose.vue'
+export { default as ArtifactContent } from './ArtifactContent.vue'
+export { default as ArtifactDescription } from './ArtifactDescription.vue'
+export { default as ArtifactHeader } from './ArtifactHeader.vue'
+export { default as ArtifactTitle } from './ArtifactTitle.vue'
+
+export type {
+  ArtifactActionProps,
+  ArtifactActionsProps,
+  ArtifactCloseProps,
+  ArtifactContentProps,
+  ArtifactDescriptionProps,
+  ArtifactHeaderProps,
+  ArtifactProps,
+  ArtifactTitleProps,
+} from './props'

packages/elements/src/artifact/props.ts

@@ -0,0 +1,17 @@
+import type Button from '@repo/shadcn-vue/components/ui/button/Button.vue'
+import type { LucideIcon } from 'lucide-vue-next'
+import type { HTMLAttributes } from 'vue'
+
+export type ArtifactProps = HTMLAttributes
+export type ArtifactHeaderProps = HTMLAttributes
+export type ArtifactCloseProps = InstanceType<typeof Button>
+export type ArtifactTitleProps = HTMLAttributes
+export type ArtifactDescriptionProps = HTMLAttributes
+export type ArtifactActionsProps = HTMLAttributes
+export type ArtifactActionProps = InstanceType<typeof Button> & {
+  tooltip?: string
+  label?: string
+  icon?: LucideIcon
+}
+
+export type ArtifactContentProps = HTMLAttributes