@tower_74/cms-app 0.1.0

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

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import { Circle } from 'lucide-vue-next';
+import {
+    DropdownMenuItemIndicator,
+    DropdownMenuRadioItem,
+    useForwardPropsEmits,
+    type DropdownMenuRadioItemEmits,
+    type DropdownMenuRadioItemProps,
+} from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>();
+
+const emits = defineEmits<DropdownMenuRadioItemEmits>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+    <DropdownMenuRadioItem
+        v-bind="forwarded"
+        :class="
+            cn(
+                'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+                props.class,
+            )
+        "
+    >
+        <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+            <DropdownMenuItemIndicator>
+                <Circle class="h-2 w-2 fill-current" />
+            </DropdownMenuItemIndicator>
+        </span>
+        <slot />
+    </DropdownMenuRadioItem>
+</template>

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

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import { DropdownMenuSeparator, type DropdownMenuSeparatorProps } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = defineProps<
+    DropdownMenuSeparatorProps & {
+        class?: HTMLAttributes['class'];
+    }
+>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+</script>
+
+<template>
+    <DropdownMenuSeparator v-bind="delegatedProps" :class="cn('-mx-1 my-1 h-px bg-accent', props.class)" />
+</template>

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

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import type { HTMLAttributes } from 'vue';
+
+const props = defineProps<{
+    class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+    <span :class="cn('ml-auto text-xs tracking-widest opacity-60', props.class)">
+        <slot />
+    </span>
+</template>

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

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { DropdownMenuSub, useForwardPropsEmits, type DropdownMenuSubEmits, type DropdownMenuSubProps } from 'radix-vue';
+
+const props = defineProps<DropdownMenuSubProps>();
+const emits = defineEmits<DropdownMenuSubEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+    <DropdownMenuSub v-bind="forwarded">
+        <slot />
+    </DropdownMenuSub>
+</template>

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

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import { DropdownMenuSubContent, useForwardPropsEmits, type DropdownMenuSubContentEmits, type DropdownMenuSubContentProps } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>();
+const emits = defineEmits<DropdownMenuSubContentEmits>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+    <DropdownMenuSubContent
+        v-bind="forwarded"
+        :class="
+            cn(
+                'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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',
+                props.class,
+            )
+        "
+    >
+        <slot />
+    </DropdownMenuSubContent>
+</template>

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

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import { ChevronRight } from 'lucide-vue-next';
+import { DropdownMenuSubTrigger, useForwardProps, type DropdownMenuSubTriggerProps } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <DropdownMenuSubTrigger
+        v-bind="forwardedProps"
+        :class="
+            cn(
+                'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
+                props.class,
+            )
+        "
+    >
+        <slot />
+        <ChevronRight class="ml-auto h-4 w-4" />
+    </DropdownMenuSubTrigger>
+</template>

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

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { DropdownMenuTrigger, useForwardProps, type DropdownMenuTriggerProps } from 'radix-vue';
+
+const props = defineProps<DropdownMenuTriggerProps>();
+
+const forwardedProps = useForwardProps(props);
+</script>
+
+<template>
+    <DropdownMenuTrigger class="outline-none" v-bind="forwardedProps">
+        <slot />
+    </DropdownMenuTrigger>
+</template>

package/src/components/ui/dropdown-menu/index.ts

@@ -0,0 +1,16 @@
+export { default as DropdownMenu } from './DropdownMenu.vue';
+
+export { DropdownMenuPortal } from 'radix-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';

package/src/components/ui/input/Input.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import { useVModel } from '@vueuse/core';
+import type { HTMLAttributes } from 'vue';
+
+const props = defineProps<{
+    defaultValue?: string | number;
+    modelValue?: string | number;
+    class?: HTMLAttributes['class'];
+}>();
+
+const emits = defineEmits<{
+    (e: 'update:modelValue', payload: string | number): void;
+}>();
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+    passive: true,
+    defaultValue: props.defaultValue,
+});
+</script>
+
+<template>
+    <input
+        v-model="modelValue"
+        :class="
+            cn(
+                'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+                props.class,
+            )
+        "
+    />
+</template>

package/src/components/ui/input/index.ts

@@ -0,0 +1 @@
+export { default as Input } from './Input.vue';

package/src/components/ui/label/Label.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import { Label, type LabelProps } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+</script>
+
+<template>
+    <Label
+        v-bind="delegatedProps"
+        :class="cn('text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70', props.class)"
+    >
+        <slot />
+    </Label>
+</template>

package/src/components/ui/label/index.ts

@@ -0,0 +1 @@
+export { default as Label } from './Label.vue';

package/src/components/ui/navigation-menu/NavigationMenu.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import { NavigationMenuRoot, type NavigationMenuRootEmits, type NavigationMenuRootProps, useForwardPropsEmits } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+import NavigationMenuViewport from './NavigationMenuViewport.vue';
+
+const props = defineProps<NavigationMenuRootProps & { class?: HTMLAttributes['class'] }>();
+
+const emits = defineEmits<NavigationMenuRootEmits>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+    <NavigationMenuRoot v-bind="forwarded" :class="cn('relative z-10 flex max-w-max flex-1 items-center justify-center', props.class)">
+        <slot />
+        <NavigationMenuViewport />
+    </NavigationMenuRoot>
+</template>

package/src/components/ui/navigation-menu/NavigationMenuContent.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import { NavigationMenuContent, type NavigationMenuContentEmits, type NavigationMenuContentProps, useForwardPropsEmits } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = defineProps<NavigationMenuContentProps & { class?: HTMLAttributes['class'] }>();
+
+const emits = defineEmits<NavigationMenuContentEmits>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+    <NavigationMenuContent
+        v-bind="forwarded"
+        :class="
+            cn(
+                'left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto',
+                props.class,
+            )
+        "
+    >
+        <slot />
+    </NavigationMenuContent>
+</template>

package/src/components/ui/navigation-menu/NavigationMenuIndicator.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import { NavigationMenuIndicator, type NavigationMenuIndicatorProps, useForwardProps } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = defineProps<NavigationMenuIndicatorProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <NavigationMenuIndicator
+        v-bind="forwardedProps"
+        :class="
+            cn(
+                'top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in',
+                props.class,
+            )
+        "
+    >
+        <div class="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+    </NavigationMenuIndicator>
+</template>

package/src/components/ui/navigation-menu/NavigationMenuItem.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { NavigationMenuItem, type NavigationMenuItemProps } from 'radix-vue';
+
+const props = defineProps<NavigationMenuItemProps>();
+</script>
+
+<template>
+    <NavigationMenuItem v-bind="props">
+        <slot />
+    </NavigationMenuItem>
+</template>

package/src/components/ui/navigation-menu/NavigationMenuLink.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { NavigationMenuLink, type NavigationMenuLinkEmits, type NavigationMenuLinkProps, useForwardPropsEmits } from 'radix-vue';
+
+const props = defineProps<NavigationMenuLinkProps>();
+const emits = defineEmits<NavigationMenuLinkEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+    <NavigationMenuLink v-bind="forwarded">
+        <slot />
+    </NavigationMenuLink>
+</template>

package/src/components/ui/navigation-menu/NavigationMenuList.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import { NavigationMenuList, type NavigationMenuListProps, useForwardProps } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = defineProps<NavigationMenuListProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <NavigationMenuList v-bind="forwardedProps" :class="cn('group flex flex-1 list-none items-center justify-center gap-x-1', props.class)">
+        <slot />
+    </NavigationMenuList>
+</template>

package/src/components/ui/navigation-menu/NavigationMenuTrigger.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import { ChevronDown } from 'lucide-vue-next';
+import { NavigationMenuTrigger, type NavigationMenuTriggerProps, useForwardProps } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+import { navigationMenuTriggerStyle } from '.';
+
+const props = defineProps<NavigationMenuTriggerProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <NavigationMenuTrigger v-bind="forwardedProps" :class="cn(navigationMenuTriggerStyle(), 'group', props.class)">
+        <slot />
+        <ChevronDown class="relative top-px ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180" aria-hidden="true" />
+    </NavigationMenuTrigger>
+</template>

package/src/components/ui/navigation-menu/NavigationMenuViewport.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import { NavigationMenuViewport, type NavigationMenuViewportProps, useForwardProps } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <div class="absolute left-0 top-full flex justify-center">
+        <NavigationMenuViewport
+            v-bind="forwardedProps"
+            :class="
+                cn(
+                    'origin-top-center relative mt-1.5 h-[--radix-navigation-menu-viewport-height] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[--radix-navigation-menu-viewport-width]',
+                    props.class,
+                )
+            "
+        />
+    </div>
+</template>

package/src/components/ui/navigation-menu/index.ts

@@ -0,0 +1,14 @@
+import { cva } from 'class-variance-authority';
+
+export { default as NavigationMenu } from './NavigationMenu.vue';
+export { default as NavigationMenuContent } from './NavigationMenuContent.vue';
+export { default as NavigationMenuIndicator } from './NavigationMenuIndicator.vue';
+export { default as NavigationMenuItem } from './NavigationMenuItem.vue';
+export { default as NavigationMenuLink } from './NavigationMenuLink.vue';
+export { default as NavigationMenuList } from './NavigationMenuList.vue';
+export { default as NavigationMenuTrigger } from './NavigationMenuTrigger.vue';
+export { default as NavigationMenuViewport } from './NavigationMenuViewport.vue';
+
+export const navigationMenuTriggerStyle = cva(
+    'group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50',
+);

package/src/components/ui/separator/Separator.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import { Separator, type SeparatorProps } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = defineProps<SeparatorProps & { class?: HTMLAttributes['class']; label?: string }>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+</script>
+
+<template>
+    <Separator
+        v-bind="delegatedProps"
+        :class="cn('relative shrink-0 bg-border', props.orientation === 'vertical' ? 'h-full w-px' : 'h-px w-full', props.class)"
+    >
+        <span
+            v-if="props.label"
+            :class="
+                cn(
+                    'absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center bg-background text-xs text-muted-foreground',
+                    props.orientation === 'vertical' ? 'w-[1px] px-1 py-2' : 'h-[1px] px-2 py-1',
+                )
+            "
+            >{{ props.label }}</span
+        >
+    </Separator>
+</template>

package/src/components/ui/separator/index.ts

@@ -0,0 +1 @@
+export { default as Separator } from './Separator.vue';

package/src/components/ui/sheet/Sheet.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { DialogRoot, useForwardPropsEmits, type DialogRootEmits, type DialogRootProps } from 'radix-vue';
+
+const props = defineProps<DialogRootProps>();
+const emits = defineEmits<DialogRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+    <DialogRoot v-bind="forwarded">
+        <slot />
+    </DialogRoot>
+</template>

package/src/components/ui/sheet/SheetClose.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { DialogClose, type DialogCloseProps } from 'radix-vue';
+
+const props = defineProps<DialogCloseProps>();
+</script>
+
+<template>
+    <DialogClose v-bind="props">
+        <slot />
+    </DialogClose>
+</template>

package/src/components/ui/sheet/SheetContent.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import { X } from 'lucide-vue-next';
+import {
+    DialogClose,
+    DialogContent,
+    DialogOverlay,
+    DialogPortal,
+    useForwardPropsEmits,
+    type DialogContentEmits,
+    type DialogContentProps,
+} from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+import { sheetVariants, type SheetVariants } from '.';
+
+interface SheetContentProps extends DialogContentProps {
+    class?: HTMLAttributes['class'];
+    side?: SheetVariants['side'];
+}
+
+defineOptions({
+    inheritAttrs: false,
+});
+
+const props = defineProps<SheetContentProps>();
+
+const emits = defineEmits<DialogContentEmits>();
+
+const delegatedProps = computed(() => {
+    const { class: _, side, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+    <DialogPortal>
+        <DialogOverlay
+            class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+        />
+        <DialogContent :class="cn(sheetVariants({ side }), props.class)" v-bind="{ ...forwarded, ...$attrs }">
+            <slot />
+
+            <DialogClose
+                class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"
+            >
+                <X class="h-4 w-4 text-muted-foreground" />
+            </DialogClose>
+        </DialogContent>
+    </DialogPortal>
+</template>

package/src/components/ui/sheet/SheetDescription.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import { DialogDescription, type DialogDescriptionProps } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+</script>
+
+<template>
+    <DialogDescription :class="cn('text-sm text-muted-foreground', props.class)" v-bind="delegatedProps">
+        <slot />
+    </DialogDescription>
+</template>

package/src/components/ui/sheet/SheetFooter.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import type { HTMLAttributes } from 'vue';
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>();
+</script>
+
+<template>
+    <div :class="cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2', props.class)">
+        <slot />
+    </div>
+</template>

package/src/components/ui/sheet/SheetHeader.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import type { HTMLAttributes } from 'vue';
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>();
+</script>
+
+<template>
+    <div :class="cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)">
+        <slot />
+    </div>
+</template>

package/src/components/ui/sheet/SheetTitle.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import { DialogTitle, type DialogTitleProps } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+</script>
+
+<template>
+    <DialogTitle :class="cn('text-lg font-semibold text-foreground', props.class)" v-bind="delegatedProps">
+        <slot />
+    </DialogTitle>
+</template>