@geniusdynamics/ns8-ui-lib 1.0.4 → 1.0.5

package/src/components/ui/drawer/DrawerDescription.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import type { DrawerDescriptionProps } from "vaul-vue"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DrawerDescription } from "vaul-vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DrawerDescriptionProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <DrawerDescription
+    data-slot="drawer-description"
+    v-bind="delegatedProps"
+    :class="cn('tw:text-muted-foreground tw:text-sm', props.class)"
+  >
+    <slot />
+  </DrawerDescription>
+</template>

package/src/components/ui/drawer/DrawerFooter.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="drawer-footer"
+    :class="cn('tw:mt-auto tw:flex tw:flex-col tw:gap-2 tw:p-4', props.class)"
+  >
+    <slot />
+  </div>
+</template>

package/src/components/ui/drawer/DrawerHeader.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="drawer-header"
+    :class="cn('tw:flex tw:flex-col tw:gap-1.5 tw:p-4', props.class)"
+  >
+    <slot />
+  </div>
+</template>

package/src/components/ui/drawer/DrawerOverlay.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type { DialogOverlayProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DrawerOverlay } from "vaul-vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <DrawerOverlay
+    data-slot="drawer-overlay"
+    v-bind="delegatedProps"
+    :class="cn('tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out tw:data-[state=closed]:fade-out-0 tw:data-[state=open]:fade-in-0 tw:fixed tw:inset-0 tw:z-50 tw:bg-black/80', props.class)"
+  />
+</template>

package/src/components/ui/drawer/DrawerTitle.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import type { DrawerTitleProps } from "vaul-vue"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DrawerTitle } from "vaul-vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DrawerTitleProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <DrawerTitle
+    data-slot="drawer-title"
+    v-bind="delegatedProps"
+    :class="cn('tw:text-foreground tw:font-semibold', props.class)"
+  >
+    <slot />
+  </DrawerTitle>
+</template>

package/src/components/ui/drawer/DrawerTrigger.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import type { DrawerTriggerProps } from "vaul-vue"
+import { DrawerTrigger } from "vaul-vue"
+
+const props = defineProps<DrawerTriggerProps>()
+</script>
+
+<template>
+  <DrawerTrigger
+    data-slot="drawer-trigger"
+    v-bind="props"
+  >
+    <slot />
+  </DrawerTrigger>
+</template>

package/src/components/ui/dropdown-menu/DropdownMenu.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { DropdownMenuRootEmits, DropdownMenuRootProps } from "reka-ui"
+import { DropdownMenuRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<DropdownMenuRootProps>()
+const emits = defineEmits<DropdownMenuRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DropdownMenuRoot
+    v-slot="slotProps"
+    data-slot="dropdown-menu"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </DropdownMenuRoot>
+</template>

package/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { DropdownMenuCheckboxItemEmits, DropdownMenuCheckboxItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Check } from "lucide-vue-next"
+import {
+  DropdownMenuCheckboxItem,
+  DropdownMenuItemIndicator,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<DropdownMenuCheckboxItemEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DropdownMenuCheckboxItem
+    data-slot="dropdown-menu-checkbox-item"
+    v-bind="forwarded"
+    :class=" cn(
+      'tw:focus:bg-accent tw:focus:text-accent-foreground tw:relative tw:flex tw:cursor-default tw:items-center tw:gap-2 tw:rounded-sm tw:py-1.5 tw:pr-2 tw:pl-8 tw:text-sm tw:outline-hidden tw:select-none tw:data-[disabled]:pointer-events-none tw:data-[disabled]:opacity-50 tw:[&_svg]:pointer-events-none tw:[&_svg]:shrink-0 tw:[&_svg:not([class*=\'size-\'])]:size-4',
+      props.class,
+    )"
+  >
+    <span class=""tw:pointer-events-none tw:absolute tw:left-2 tw:flex tw:size-3.5 tw:items-center tw:justify-center"">
+      <DropdownMenuItemIndicator>
+        <slot name="indicator-icon">
+          <Check class=""tw:size-4"" />
+        </slot>
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot />
+  </DropdownMenuCheckboxItem>
+</template>

package/src/components/ui/dropdown-menu/DropdownMenuContent.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { DropdownMenuContentEmits, DropdownMenuContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  DropdownMenuContent,
+  DropdownMenuPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes["class"] }>(),
+  {
+    sideOffset: 4,
+  },
+)
+const emits = defineEmits<DropdownMenuContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DropdownMenuPortal>
+    <DropdownMenuContent
+      data-slot="dropdown-menu-content"
+      v-bind="{ ...$attrs, ...forwarded }"
+      :class="cn('tw:bg-popover tw:text-popover-foreground tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out tw:data-[state=closed]:fade-out-0 tw:data-[state=open]:fade-in-0 tw:data-[state=closed]:zoom-out-95 tw:data-[state=open]:zoom-in-95 tw:data-[side=bottom]:slide-in-from-top-2 tw:data-[side=left]:slide-in-from-right-2 tw:data-[side=right]:slide-in-from-left-2 tw:data-[side=top]:slide-in-from-bottom-2 tw:z-50 tw:max-h-(--reka-dropdown-menu-content-available-height) tw:min-w-[8rem] tw:origin-(--reka-dropdown-menu-content-transform-origin) tw:overflow-x-hidden tw:overflow-y-auto tw:rounded-md tw:border tw:p-1 tw:shadow-md', props.class)"
+    >
+      <slot />
+    </DropdownMenuContent>
+  </DropdownMenuPortal>
+</template>

package/src/components/ui/dropdown-menu/DropdownMenuGroup.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DropdownMenuGroupProps } from "reka-ui"
+import { DropdownMenuGroup } from "reka-ui"
+
+const props = defineProps<DropdownMenuGroupProps>()
+</script>
+
+<template>
+  <DropdownMenuGroup
+    data-slot="dropdown-menu-group"
+    v-bind="props"
+  >
+    <slot />
+  </DropdownMenuGroup>
+</template>

package/src/components/ui/dropdown-menu/DropdownMenuItem.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { DropdownMenuItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DropdownMenuItem, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = withDefaults(defineProps<DropdownMenuItemProps & {
+  class?: HTMLAttributes["class"]
+  inset?: boolean
+  variant?: "default" | "destructive"
+}>(), {
+  variant: "default",
+})
+
+const delegatedProps = reactiveOmit(props, "inset", "variant", "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DropdownMenuItem
+    data-slot="dropdown-menu-item"
+    :data-inset="inset ? '' : undefined"
+    :data-variant="variant"
+    v-bind="forwardedProps"
+    :class="cn('tw:focus:bg-accent tw:focus:text-accent-foreground tw:data-[variant=destructive]:text-destructive tw:data-[variant=destructive]:focus:bg-destructive/10 tw:dark:data-[variant=destructive]:focus:bg-destructive/20 tw:data-[variant=destructive]:focus:text-destructive tw:data-[variant=destructive]:*:[svg]:!text-destructive tw:[&_svg:not([class*=\'text-\'])]:text-muted-foreground tw:relative tw:flex tw:cursor-default tw:items-center tw:gap-2 tw:rounded-sm tw:px-2 tw:py-1.5 tw:text-sm tw:outline-hidden tw:select-none tw:data-[disabled]:pointer-events-none tw:data-[disabled]:opacity-50 tw:data-[inset]:pl-8 tw:[&_svg]:pointer-events-none tw:[&_svg]:shrink-0 tw:[&_svg:not([class*=\'size-\'])]:size-4', props.class)"
+  >
+    <slot />
+  </DropdownMenuItem>
+</template>

package/src/components/ui/dropdown-menu/DropdownMenuLabel.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { DropdownMenuLabelProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DropdownMenuLabel, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes["class"], inset?: boolean }>()
+
+const delegatedProps = reactiveOmit(props, "class", "inset")
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DropdownMenuLabel
+    data-slot="dropdown-menu-label"
+    :data-inset="inset ? '' : undefined"
+    v-bind="forwardedProps"
+    :class="cn('tw:px-2 tw:py-1.5 tw:text-sm tw:font-medium tw:data-[inset]:pl-8', props.class)"
+  >
+    <slot />
+  </DropdownMenuLabel>
+</template>

package/src/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { DropdownMenuRadioGroupEmits, DropdownMenuRadioGroupProps } from "reka-ui"
+import {
+  DropdownMenuRadioGroup,
+  useForwardPropsEmits,
+} from "reka-ui"
+
+const props = defineProps<DropdownMenuRadioGroupProps>()
+const emits = defineEmits<DropdownMenuRadioGroupEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DropdownMenuRadioGroup
+    data-slot="dropdown-menu-radio-group"
+    v-bind="forwarded"
+  >
+    <slot />
+  </DropdownMenuRadioGroup>
+</template>

package/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { DropdownMenuRadioItemEmits, DropdownMenuRadioItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Circle } from "lucide-vue-next"
+import {
+  DropdownMenuItemIndicator,
+  DropdownMenuRadioItem,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes["class"] }>()
+
+const emits = defineEmits<DropdownMenuRadioItemEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DropdownMenuRadioItem
+    data-slot="dropdown-menu-radio-item"
+    v-bind="forwarded"
+    :class="cn(
+      'tw:focus:bg-accent tw:focus:text-accent-foreground tw:relative tw:flex tw:cursor-default tw:items-center tw:gap-2 tw:rounded-sm tw:py-1.5 tw:pr-2 tw:pl-8 tw:text-sm tw:outline-hidden tw:select-none tw:data-[disabled]:pointer-events-none tw:data-[disabled]:opacity-50 tw:[&_svg]:pointer-events-none tw:[&_svg]:shrink-0 tw:[&_svg:not([class*=\'size-\'])]:size-4',
+      props.class,
+    )"
+  >
+    <span class=""tw:pointer-events-none tw:absolute tw:left-2 tw:flex tw:size-3.5 tw:items-center tw:justify-center"">
+      <DropdownMenuItemIndicator>
+        <slot name="indicator-icon">
+          <Circle class=""tw:size-2 tw:fill-current"" />
+        </slot>
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot />
+  </DropdownMenuRadioItem>
+</template>

package/src/components/ui/dropdown-menu/DropdownMenuSeparator.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { DropdownMenuSeparatorProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  DropdownMenuSeparator,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DropdownMenuSeparatorProps & {
+  class?: HTMLAttributes["class"]
+}>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <DropdownMenuSeparator
+    data-slot="dropdown-menu-separator"
+    v-bind="delegatedProps"
+    :class="cn('tw:bg-border tw:-mx-1 tw:my-1 tw:h-px', props.class)"
+  />
+</template>

package/src/components/ui/dropdown-menu/DropdownMenuShortcut.vue

@@ -0,0 +1,17 @@
+<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="dropdown-menu-shortcut"
+    :class="cn('tw:text-muted-foreground tw:ml-auto tw:text-xs tw:tracking-widest', props.class)"
+  >
+    <slot />
+  </span>
+</template>

package/src/components/ui/dropdown-menu/DropdownMenuSub.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { DropdownMenuSubEmits, DropdownMenuSubProps } from "reka-ui"
+import {
+  DropdownMenuSub,
+  useForwardPropsEmits,
+} from "reka-ui"
+
+const props = defineProps<DropdownMenuSubProps>()
+const emits = defineEmits<DropdownMenuSubEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DropdownMenuSub v-slot="slotProps" data-slot="dropdown-menu-sub" v-bind="forwarded">
+    <slot v-bind="slotProps" />
+  </DropdownMenuSub>
+</template>

package/src/components/ui/dropdown-menu/DropdownMenuSubContent.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { DropdownMenuSubContentEmits, DropdownMenuSubContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  DropdownMenuSubContent,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<DropdownMenuSubContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DropdownMenuSubContent
+    data-slot="dropdown-menu-sub-content"
+    v-bind="forwarded"
+    :class="cn('tw:bg-popover tw:text-popover-foreground tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out tw:data-[state=closed]:fade-out-0 tw:data-[state=open]:fade-in-0 tw:data-[state=closed]:zoom-out-95 tw:data-[state=open]:zoom-in-95 tw:data-[side=bottom]:slide-in-from-top-2 tw:data-[side=left]:slide-in-from-right-2 tw:data-[side=right]:slide-in-from-left-2 tw:data-[side=top]:slide-in-from-bottom-2 tw:z-50 tw:min-w-[8rem] tw:origin-(--reka-dropdown-menu-content-transform-origin) tw:overflow-hidden tw:rounded-md tw:border tw:p-1 tw:shadow-lg', props.class)"
+  >
+    <slot />
+  </DropdownMenuSubContent>
+</template>

package/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { DropdownMenuSubTriggerProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ChevronRight } from "lucide-vue-next"
+import {
+  DropdownMenuSubTrigger,
+  useForwardProps,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes["class"], inset?: boolean }>()
+
+const delegatedProps = reactiveOmit(props, "class", "inset")
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DropdownMenuSubTrigger
+    data-slot="dropdown-menu-sub-trigger"
+    v-bind="forwardedProps"
+    :data-inset="inset ? '' : undefined"
+    :class="cn(
+      'tw:focus:bg-accent tw:focus:text-accent-foreground tw:data-[state=open]:bg-accent tw:data-[state=open]:text-accent-foreground tw:relative tw:flex tw:cursor-default tw:items-center tw:gap-2 tw:rounded-sm tw:px-2 tw:py-1.5 tw:text-sm tw:outline-hidden tw:select-none tw:data-[inset]:pl-8 tw:[&_svg]:pointer-events-none tw:[&_svg]:shrink-0 tw:[&_svg:not([class*=\'size-\'])]:size-4 tw:data-[variant=destructive]:*:[svg]:!text-destructive tw:[&_svg:not([class*=\'text-\'])]:text-muted-foreground',
+      props.class,
+    )"
+  >
+    <slot />
+    <ChevronRight class=""tw:ml-auto tw:size-4"" />
+  </DropdownMenuSubTrigger>
+</template>

package/src/components/ui/dropdown-menu/DropdownMenuTrigger.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { DropdownMenuTriggerProps } from "reka-ui"
+import { DropdownMenuTrigger, useForwardProps } from "reka-ui"
+
+const props = defineProps<DropdownMenuTriggerProps>()
+
+const forwardedProps = useForwardProps(props)
+</script>
+
+<template>
+  <DropdownMenuTrigger
+    data-slot="dropdown-menu-trigger"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </DropdownMenuTrigger>
+</template>

package/src/components/ui/empty/Empty.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>
+  <div
+    data-slot="empty"
+    :class="cn(
+      'tw:flex tw:min-w-0 tw:flex-1 tw:flex-col tw:items-center tw:justify-center tw:gap-6 tw:text-balance tw:rounded-lg tw:border-dashed tw:p-6 tw:text-center tw:md:p-12',
+      props.class,
+    )"
+  >
+    <slot />
+  </div>
+</template>

package/src/components/ui/empty/EmptyContent.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>
+  <div
+    data-slot="empty-content"
+    :class="cn(
+      'tw:flex tw:w-full tw:min-w-0 tw:max-w-sm tw:flex-col tw:items-center tw:gap-4 tw:text-balance tw:text-sm',
+      props.class,
+    )"
+  >
+    <slot />
+  </div>
+</template>

package/src/components/ui/empty/EmptyDescription.vue

@@ -0,0 +1,20 @@
+<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(
+      'tw:text-muted-foreground tw:[&>a:hover]:text-primary tw:text-sm/relaxed tw:[&>a]:underline tw:[&>a]:underline-offset-4',
+      $attrs.class ?? 'tw:',
+    )"
+  >
+    <slot />
+  </p>
+</template>

package/src/components/ui/empty/EmptyHeader.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>
+  <div
+    data-slot="empty-header"
+    :class="cn(
+      'tw:flex tw:max-w-sm tw:flex-col tw:items-center tw:gap-2 tw:text-center',
+      props.class,
+    )"
+  >
+    <slot />
+  </div>
+</template>

package/src/components/ui/empty/EmptyMedia.vue

@@ -0,0 +1,21 @@
+<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)"
+  >
+    <slot />
+  </div>
+</template>

package/src/components/ui/empty/EmptyTitle.vue

@@ -0,0 +1,17 @@
+<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-title"
+    :class="cn('tw:text-lg tw:font-medium tw:tracking-tight', props.class)"
+  >
+    <slot />
+  </div>
+</template>

package/src/components/ui/field/Field.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import type { FieldVariants } from "."
+import { cn } from "@/lib/utils"
+import { fieldVariants } from "."
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+  orientation?: FieldVariants["orientation"]
+}>()
+</script>
+
+<template>
+  <div
+    role="group"
+    data-slot="field"
+    :data-orientation="orientation"
+    :class="cn(
+      fieldVariants({ orientation }),
+      props.class,
+    )"
+  >
+    <slot />
+  </div>
+</template>