feat: Empty component (#1438)

* feat: implement empty component

* chore: add spinner demo to v4 playground index

* docs: add empty component with demos

Author: ace-of-aces

apps/v4/components/EmptyDemo.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { ArrowUpRightIcon, FolderCode } from 'lucide-vue-next'
+import { Button } from '@/registry/new-york-v4/ui/button'
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from '@/registry/new-york-v4/ui/empty'
+</script>
+
+<template>
+  <Empty>
+    <EmptyHeader>
+      <EmptyMedia variant="icon">
+        <FolderCode />
+      </EmptyMedia>
+      <EmptyTitle>No Projects Yet</EmptyTitle>
+      <EmptyDescription>
+        You haven't created any projects yet. Get started by creating your first
+        project.
+      </EmptyDescription>
+    </EmptyHeader>
+    <EmptyContent>
+      <div class="flex gap-2">
+        <Button>Create Project</Button>
+        <Button variant="outline">
+          Import Project
+        </Button>
+      </div>
+    </EmptyContent>
+    <Button variant="link" as-child class="text-muted-foreground" size="sm">
+      <a href="#">
+        Learn More <ArrowUpRightIcon />
+      </a>
+    </Button>
+  </Empty>
+</template>

apps/v4/pages/index.vue

@@ -66,6 +66,9 @@
     <ComponentWrapper name="DropdownMenu">
       <LazyDropdownMenuDemo />
     </ComponentWrapper>
+    <ComponentWrapper name="Empty">
+      <LazyEmptyDemo />
+    </ComponentWrapper>
     <ComponentWrapper name="Form">
       <LazyFormDemo />
     </ComponentWrapper>
@@ -120,6 +123,9 @@
     <ComponentWrapper name="Sheet">
       <LazySheetDemo />
     </ComponentWrapper>
+    <ComponentWrapper name="Spinner">
+      <LazySpinnerDemo />
+    </ComponentWrapper>
     <ComponentWrapper name="Skeleton">
       <LazySkeletonDemo />
     </ComponentWrapper>

apps/v4/registry/new-york-v4/ui/empty/Empty.vue

@@ -0,0 +1,21 @@
+<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="empty"
+    :class="cn(
+      'flex min-w-0 flex-1 flex-col items-center justify-center gap-6 text-balance rounded-lg border-dashed p-6 text-center md:p-12',
+      props.class,
+    )"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+</template>

apps/v4/registry/new-york-v4/ui/empty/EmptyContent.vue

@@ -0,0 +1,21 @@
+<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="empty-content"
+    :class="cn(
+      'flex w-full min-w-0 max-w-sm flex-col items-center gap-4 text-balance text-sm',
+      props.class,
+    )"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+</template>

apps/v4/registry/new-york-v4/ui/empty/EmptyDescription.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <p
+    data-slot="empty-description"
+    :class="cn(
+      'text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4',
+      $attrs.class ?? '',
+    )"
+    v-bind="$attrs"
+  >
+    <slot />
+  </p>
+</template>

apps/v4/registry/new-york-v4/ui/empty/EmptyHeader.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="empty-header"
+    :class="cn(
+      'flex max-w-sm flex-col items-center gap-2 text-center',
+      $attrs.class ?? '',
+    )"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+</template>

apps/v4/registry/new-york-v4/ui/empty/EmptyMedia.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import type { EmptyMediaVariants } from "."
+import { cn } from "@/lib/utils"
+import { emptyMediaVariants } from "."
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+  variant?: EmptyMediaVariants["variant"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="empty-icon"
+    :data-variant="variant"
+    :class="cn(emptyMediaVariants({ variant }), props.class)"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+</template>

apps/v4/registry/new-york-v4/ui/empty/EmptyTitle.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import type { EmptyMediaVariants } from "."
+import { cn } from "@/lib/utils"
+import { emptyMediaVariants } from "."
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+  variant?: EmptyMediaVariants["variant"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="empty-icon"
+    :data-variant="variant"
+    :class="cn(emptyMediaVariants({ variant }), props.class)"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+</template>

apps/v4/registry/new-york-v4/ui/empty/index.ts

@@ -0,0 +1,26 @@
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+
+export { default as Empty } from "./Empty.vue"
+export { default as EmptyContent } from "./EmptyContent.vue"
+export { default as EmptyDescription } from "./EmptyDescription.vue"
+export { default as EmptyHeader } from "./EmptyHeader.vue"
+export { default as EmptyMedia } from "./EmptyMedia.vue"
+export { default as EmptyTitle } from "./EmptyTitle.vue"
+
+export const emptyMediaVariants = cva(
+  "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+)
+
+export type EmptyMediaVariants = VariantProps<typeof emptyMediaVariants>

apps/www/.vitepress/theme/config/docs.ts

@@ -266,6 +266,10 @@ export const docsConfig: DocsConfig = {
           href: '/docs/components/drawer',
           items: [],
         },
+        {
+          title: 'Empty',
+          href: '/docs/components/empty',
+        },
         {
           title: 'Dropdown Menu',
           href: '/docs/components/dropdown-menu',