@dynect/base 0.1.0 → 0.2.0

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

@@ -0,0 +1,15 @@
+<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('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80', props.class)" />
+</template>

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

@@ -0,0 +1,17 @@
+<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('text-foreground font-semibold', props.class)">
+		<slot />
+	</DrawerTitle>
+</template>

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

@@ -0,0 +1,12 @@
+<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/runtime/components/ui/drawer/index.ts

@@ -0,0 +1,9 @@
+export { default as Drawer } from './Drawer.vue';
+export { default as DrawerClose } from './DrawerClose.vue';
+export { default as DrawerContent } from './DrawerContent.vue';
+export { default as DrawerDescription } from './DrawerDescription.vue';
+export { default as DrawerFooter } from './DrawerFooter.vue';
+export { default as DrawerHeader } from './DrawerHeader.vue';
+export { default as DrawerOverlay } from './DrawerOverlay.vue';
+export { default as DrawerTitle } from './DrawerTitle.vue';
+export { default as DrawerTrigger } from './DrawerTrigger.vue';

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

@@ -0,0 +1,15 @@
+<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/runtime/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue

@@ -0,0 +1,37 @@
+<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(
+				'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 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
+			)
+		"
+	>
+		<span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+			<DropdownMenuItemIndicator>
+				<slot name="indicator-icon">
+					<Check class="size-4" />
+				</slot>
+			</DropdownMenuItemIndicator>
+		</span>
+		<slot />
+	</DropdownMenuCheckboxItem>
+</template>

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

@@ -0,0 +1,37 @@
+<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(
+					'bg-bg-primary-medium dark:bg-bg-primary-medium text-text-body dark:text-text-body data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border-border-base z-50 max-h-(--reka-dropdown-menu-content-available-height) min-w-32 origin-(--reka-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-xl border p-2',
+					props.class
+				)
+			"
+		>
+			<slot />
+		</DropdownMenuContent>
+	</DropdownMenuPortal>
+</template>

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

@@ -0,0 +1,12 @@
+<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/runtime/components/ui/dropdown-menu/DropdownMenuItem.vue

@@ -0,0 +1,41 @@
+<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(
+				'focus:bg-bg-tertiary-medium dark:focus:bg-bg-tertiary-medium focus:text-text-heading dark:focus:text-text-heading [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-lg px-2 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+				props.class
+			)
+		"
+	>
+		<slot />
+	</DropdownMenuItem>
+</template>

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

@@ -0,0 +1,18 @@
+<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('px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', props.class)">
+		<slot />
+	</DropdownMenuLabel>
+</template>

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

@@ -0,0 +1,15 @@
+<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/runtime/components/ui/dropdown-menu/DropdownMenuRadioItem.vue

@@ -0,0 +1,38 @@
+<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(
+				'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 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
+			)
+		"
+	>
+		<span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+			<DropdownMenuItemIndicator>
+				<slot name="indicator-icon">
+					<Circle class="size-2 fill-current" />
+				</slot>
+			</DropdownMenuItemIndicator>
+		</span>
+		<slot />
+	</DropdownMenuRadioItem>
+</template>

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

@@ -0,0 +1,19 @@
+<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('bg-border -mx-1 my-1 h-px', props.class)" />
+</template>

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

@@ -0,0 +1,14 @@
+<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('text-muted-foreground ml-auto text-xs tracking-widest', props.class)">
+		<slot />
+	</span>
+</template>

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

@@ -0,0 +1,15 @@
+<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/runtime/components/ui/dropdown-menu/DropdownMenuSubContent.vue

@@ -0,0 +1,29 @@
+<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(
+				'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
+				props.class
+			)
+		"
+	>
+		<slot />
+	</DropdownMenuSubContent>
+</template>

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

@@ -0,0 +1,30 @@
+<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(
+				'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground data-[variant=destructive]:*:[svg]:!text-destructive [&_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-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+				props.class
+			)
+		"
+	>
+		<slot />
+		<ChevronRight class="ml-auto size-4" />
+	</DropdownMenuSubTrigger>
+</template>

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

@@ -0,0 +1,14 @@
+<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/runtime/components/ui/dropdown-menu/index.ts

@@ -0,0 +1,16 @@
+export { default as DropdownMenu } from './DropdownMenu.vue';
+
+export { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue';
+export { default as DropdownMenuContent } from './DropdownMenuContent.vue';
+export { default as DropdownMenuGroup } from './DropdownMenuGroup.vue';
+export { default as DropdownMenuItem } from './DropdownMenuItem.vue';
+export { default as DropdownMenuLabel } from './DropdownMenuLabel.vue';
+export { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue';
+export { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue';
+export { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue';
+export { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue';
+export { default as DropdownMenuSub } from './DropdownMenuSub.vue';
+export { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue';
+export { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue';
+export { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue';
+export { DropdownMenuPortal } from 'reka-ui';

package/src/runtime/components/ui/empty/Empty.vue

@@ -0,0 +1,14 @@
+<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 rounded-lg border-dashed p-6 text-center text-balance md:p-12', props.class)">
+		<slot />
+	</div>
+</template>

package/src/runtime/components/ui/empty/EmptyContent.vue

@@ -0,0 +1,14 @@
+<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 max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance', props.class)">
+		<slot />
+	</div>
+</template>

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

@@ -0,0 +1,14 @@
+<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 ?? '')">
+		<slot />
+	</p>
+</template>

package/src/runtime/components/ui/empty/EmptyHeader.vue

@@ -0,0 +1,14 @@
+<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('flex max-w-sm flex-col items-center gap-2 text-center', props.class)">
+		<slot />
+	</div>
+</template>

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

@@ -0,0 +1,17 @@
+<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/runtime/components/ui/empty/EmptyTitle.vue

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

package/src/runtime/components/ui/empty/index.ts

@@ -0,0 +1,23 @@
+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>;

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

@@ -0,0 +1,17 @@
+<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>

package/src/runtime/components/ui/field/FieldContent.vue

@@ -0,0 +1,14 @@
+<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="field-content" :class="cn('group/field-content flex flex-1 flex-col gap-1.5 leading-snug', props.class)">
+		<slot />
+	</div>
+</template>

package/src/runtime/components/ui/field/FieldDescription.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>
+	<p
+		data-slot="field-description"
+		:class="cn('text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance', 'last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5', '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4', props.class)"
+	>
+		<slot />
+	</p>
+</template>

package/src/runtime/components/ui/field/FieldError.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { computed } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+	class?: HTMLAttributes['class'];
+	errors?: Array<string | { message: string | undefined } | undefined>;
+}>();
+
+const content = computed(() => {
+	if (!props.errors || props.errors.length === 0) return null;
+
+	const uniqueErrors = [
+		...new Map(
+			props.errors.filter(Boolean).map((error) => {
+				const message = typeof error === 'string' ? error : error?.message;
+				return [message, error];
+			})
+		).values(),
+	];
+
+	if (uniqueErrors.length === 1 && uniqueErrors[0]) {
+		return typeof uniqueErrors[0] === 'string' ? uniqueErrors[0] : uniqueErrors[0].message;
+	}
+
+	return uniqueErrors.map((error) => (typeof error === 'string' ? error : error?.message));
+});
+</script>
+
+<template>
+	<div v-if="$slots.default || content" role="alert" data-slot="field-error" :class="cn('text-destructive text-sm font-normal', props.class)">
+		<slot v-if="$slots.default" />
+
+		<template v-else-if="typeof content === 'string'">
+			{{ content }}
+		</template>
+
+		<ul v-else-if="Array.isArray(content)" class="ml-4 flex list-disc flex-col gap-1">
+			<li v-for="(error, index) in content" :key="index">
+				{{ error }}
+			</li>
+		</ul>
+	</div>
+</template>