@brumaombra/ui-vintage 0.9.1 → 0.9.2

package/src/components/ui/select/SelectContent.vue

@@ -7,15 +7,15 @@ import { cn } from '../../../lib/utils';
 import { SelectScrollDownButton, SelectScrollUpButton } from '.';
 
 defineOptions({
-    inheritAttrs: false
+	inheritAttrs: false
 });
 
 // Props
 const props = withDefaults(defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(), {
-    align: 'start',
-    position: 'popper',
-    sideOffset: 4,
-    collisionPadding: 8
+	align: 'start',
+	position: 'popper',
+	sideOffset: 4,
+	collisionPadding: 8
 });
 
 // Emits
@@ -26,24 +26,24 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-    <SelectPortal>
-        <SelectContent data-slot="select-content" v-bind="{ ...$attrs, ...forwarded }" :class="cn(
-            'uv-floating-motion bg-popover text-popover-foreground relative z-50 max-h-(--reka-select-content-available-height) min-w-32 overflow-x-hidden overflow-y-auto rounded border border-border shadow-elevated-lg max-sm:w-(--reka-select-trigger-width) max-sm:min-w-(--reka-select-trigger-width)',
-            position === 'popper' &&
-            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
-            props.class
-        )
-            ">
-            <SelectScrollUpButton />
-            <SelectViewport :class="cn(
-                'p-1',
-                position === 'popper' &&
-                'h-(--reka-select-trigger-height) w-full min-w-(--reka-select-trigger-width) scroll-my-1'
-            )
-                ">
-                <slot />
-            </SelectViewport>
-            <SelectScrollDownButton />
-        </SelectContent>
-    </SelectPortal>
+	<SelectPortal>
+		<SelectContent data-slot="select-content" v-bind="{ ...$attrs, ...forwarded }" :class="cn(
+			'uv-floating-motion bg-popover text-popover-foreground relative z-50 max-h-(--reka-select-content-available-height) min-w-32 overflow-x-hidden overflow-y-auto rounded border border-border shadow-elevated-lg max-sm:w-(--reka-select-trigger-width) max-sm:min-w-(--reka-select-trigger-width)',
+			position === 'popper' &&
+			'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+			props.class
+		)
+			">
+			<SelectScrollUpButton />
+			<SelectViewport :class="cn(
+				'p-1',
+				position === 'popper' &&
+				'h-(--reka-select-trigger-height) w-full min-w-(--reka-select-trigger-width) scroll-my-1'
+			)
+				">
+				<slot />
+			</SelectViewport>
+			<SelectScrollDownButton />
+		</SelectContent>
+	</SelectPortal>
 </template>

package/src/components/ui/select/SelectGroup.vue

@@ -7,7 +7,7 @@ const props = defineProps<SelectGroupProps>();
 </script>
 
 <template>
-    <SelectGroup data-slot="select-group" v-bind="props">
-        <slot />
-    </SelectGroup>
+	<SelectGroup data-slot="select-group" v-bind="props">
+		<slot />
+	</SelectGroup>
 </template>

package/src/components/ui/select/SelectItem.vue

@@ -15,31 +15,31 @@ const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-    <SelectItem data-slot="select-item" v-bind="forwardedProps" :class="cn(
-        'focus:bg-accent focus:text-accent-foreground data-[state=checked]:text-foreground transition-colors duration-150 [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex w-full cursor-pointer items-center gap-2 rounded-sm py-2.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2',
-        props.class
-    )
-        ">
-        <span class="absolute right-2 flex size-3.5 items-center justify-center">
-            <SelectItemIndicator>
-                <slot name="indicator-icon">
-                    <HugeiconsIcon :icon="Tick02Icon" class="size-4 animate-uv-pop text-primary" />
-                </slot>
-            </SelectItemIndicator>
-        </span>
+	<SelectItem data-slot="select-item" v-bind="forwardedProps" :class="cn(
+		'focus:bg-accent focus:text-accent-foreground data-[state=checked]:text-foreground transition-colors duration-150 [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex w-full cursor-pointer items-center gap-2 rounded-sm py-2.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2',
+		props.class
+	)
+		">
+		<span class="absolute right-2 flex size-3.5 items-center justify-center">
+			<SelectItemIndicator>
+				<slot name="indicator-icon">
+					<HugeiconsIcon :icon="Tick02Icon" class="size-4 animate-uv-pop text-primary" />
+				</slot>
+			</SelectItemIndicator>
+		</span>
 
-        <template v-if="props.textValue">
-            <SelectItemText>
-                <span class="sr-only">{{ props.textValue }}</span>
-            </SelectItemText>
+		<template v-if="props.textValue">
+			<SelectItemText>
+				<span class="sr-only">{{ props.textValue }}</span>
+			</SelectItemText>
 
-            <div class="flex min-w-0 flex-1 flex-col">
-                <slot />
-            </div>
-        </template>
+			<div class="flex min-w-0 flex-1 flex-col">
+				<slot />
+			</div>
+		</template>
 
-        <SelectItemText v-else>
-            <slot />
-        </SelectItemText>
-    </SelectItem>
+		<SelectItemText v-else>
+			<slot />
+		</SelectItemText>
+	</SelectItem>
 </template>

package/src/components/ui/select/SelectItemContent.vue

@@ -6,42 +6,42 @@ import type { HugeiconsIconDefinition } from '../../../lib/common-types';
 
 // Props
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
-    icon?: HugeiconsIconDefinition | null;
-    label?: string | number | null;
-    description?: string | number | null;
-    iconClass?: HTMLAttributes['class'];
-    textClass?: HTMLAttributes['class'];
-    descriptionClass?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
+	icon?: HugeiconsIconDefinition | null;
+	label?: string | number | null;
+	description?: string | number | null;
+	iconClass?: HTMLAttributes['class'];
+	textClass?: HTMLAttributes['class'];
+	descriptionClass?: HTMLAttributes['class'];
 }>();
 </script>
 
 <template>
-    <div data-slot="select-item-content" :class="cn('flex min-w-0 flex-1 items-center gap-2', props.class)">
-        <!-- Icon -->
-        <div v-if="props.icon" data-slot="select-item-content-icon" :class="cn('shrink-0 self-center', props.iconClass)">
-            <HugeiconsIcon :icon="props.icon" class="block size-3 sm:size-4" />
-        </div>
+	<div data-slot="select-item-content" :class="cn('flex min-w-0 flex-1 items-center gap-2', props.class)">
+		<!-- Icon -->
+		<div v-if="props.icon" data-slot="select-item-content-icon" :class="cn('shrink-0 self-center', props.iconClass)">
+			<HugeiconsIcon :icon="props.icon" class="block size-3 sm:size-4" />
+		</div>
 
-        <!-- Text and description -->
-        <div class="flex min-w-0 flex-1 flex-col gap-0.5">
-            <!-- Text -->
-            <span data-slot="select-item-content-text" :class="cn(
-                'min-w-0 truncate font-semibold text-xs sm:text-sm leading-5',
-                props.textClass
-            )
-                ">
-                {{ props.label }}
-            </span>
+		<!-- Text and description -->
+		<div class="flex min-w-0 flex-1 flex-col gap-0.5">
+			<!-- Text -->
+			<span data-slot="select-item-content-text" :class="cn(
+				'min-w-0 truncate font-semibold text-xs sm:text-sm leading-5',
+				props.textClass
+			)
+				">
+				{{ props.label }}
+			</span>
 
-            <!-- Description -->
-            <span v-if="props.description" data-slot="select-item-content-description" :class="cn(
-                'font-normal text-[11px] sm:text-xs leading-4 sm:leading-5 text-muted-foreground',
-                props.descriptionClass
-            )
-                ">
-                {{ props.description }}
-            </span>
-        </div>
-    </div>
+			<!-- Description -->
+			<span v-if="props.description" data-slot="select-item-content-description" :class="cn(
+				'font-normal text-[11px] sm:text-xs leading-4 sm:leading-5 text-muted-foreground',
+				props.descriptionClass
+			)
+				">
+				{{ props.description }}
+			</span>
+		</div>
+	</div>
 </template>

package/src/components/ui/select/SelectItemText.vue

@@ -7,7 +7,7 @@ const props = defineProps<SelectItemTextProps>();
 </script>
 
 <template>
-    <SelectItemText data-slot="select-item-text" v-bind="props">
-        <slot />
-    </SelectItemText>
+	<SelectItemText data-slot="select-item-text" v-bind="props">
+		<slot />
+	</SelectItemText>
 </template>

package/src/components/ui/select/SelectLabel.vue

@@ -9,7 +9,7 @@ const props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }
 </script>
 
 <template>
-    <SelectLabel data-slot="select-label" :class="cn('text-muted-foreground px-2 py-1.5 text-xs', props.class)">
-        <slot />
-    </SelectLabel>
+	<SelectLabel data-slot="select-label" :class="cn('text-muted-foreground px-2 py-1.5 text-xs', props.class)">
+		<slot />
+	</SelectLabel>
 </template>

package/src/components/ui/select/SelectScrollDownButton.vue

@@ -15,13 +15,13 @@ const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-    <SelectScrollDownButton data-slot="select-scroll-down-button" v-bind="forwardedProps" :class="cn(
-        'flex cursor-default items-center justify-center py-1',
-        props.class
-    )
-        ">
-        <slot>
-            <HugeiconsIcon :icon="ArrowDown01Icon" class="size-4" />
-        </slot>
-    </SelectScrollDownButton>
+	<SelectScrollDownButton data-slot="select-scroll-down-button" v-bind="forwardedProps" :class="cn(
+		'flex cursor-default items-center justify-center py-1',
+		props.class
+	)
+		">
+		<slot>
+			<HugeiconsIcon :icon="ArrowDown01Icon" class="size-4" />
+		</slot>
+	</SelectScrollDownButton>
 </template>

package/src/components/ui/select/SelectScrollUpButton.vue

@@ -15,13 +15,13 @@ const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-    <SelectScrollUpButton data-slot="select-scroll-up-button" v-bind="forwardedProps" :class="cn(
-        'flex cursor-default items-center justify-center py-1',
-        props.class
-    )
-        ">
-        <slot>
-            <HugeiconsIcon :icon="ArrowUp01Icon" class="size-4" />
-        </slot>
-    </SelectScrollUpButton>
+	<SelectScrollUpButton data-slot="select-scroll-up-button" v-bind="forwardedProps" :class="cn(
+		'flex cursor-default items-center justify-center py-1',
+		props.class
+	)
+		">
+		<slot>
+			<HugeiconsIcon :icon="ArrowUp01Icon" class="size-4" />
+		</slot>
+	</SelectScrollUpButton>
 </template>

package/src/components/ui/select/SelectSeparator.vue

@@ -12,6 +12,6 @@ const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>
-    <SelectSeparator data-slot="select-separator" v-bind="delegatedProps" :class="cn('bg-border pointer-events-none -mx-1 my-1 h-px', props.class)
-        " />
+	<SelectSeparator data-slot="select-separator" v-bind="delegatedProps" :class="cn('bg-border pointer-events-none -mx-1 my-1 h-px', props.class)
+		" />
 </template>

package/src/components/ui/select/SelectTrigger.vue

@@ -10,8 +10,8 @@ import { useFieldControlId } from '../field/field-context';
 
 // Props
 const props = withDefaults(defineProps<SelectTriggerProps & {
-    class?: HTMLAttributes['class'];
-    size?: 'sm' | 'default';
+	class?: HTMLAttributes['class'];
+	size?: 'sm' | 'default';
 }>(), { size: 'default' });
 
 const delegatedProps = reactiveOmit(props, 'class', 'size');
@@ -22,16 +22,16 @@ const fieldControlId = useFieldControlId();
 </script>
 
 <template>
-    <SelectTrigger :id="fieldControlId" data-slot="select-trigger" :data-size="size" v-bind="forwardedProps" :class="cn(
-        'group/select-trigger uv-field flex w-fit cursor-pointer items-center justify-between gap-2 rounded border border-input bg-secondary px-4 py-3 text-xs font-semibold whitespace-nowrap text-foreground shadow-elevated-sm outline-none data-placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-60 data-[size=default]:h-13 data-[size=sm]:h-10 sm:text-sm',
-        '*:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2',
-        '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 [&_svg:not([class*=\'text-\'])]:text-muted-foreground',
-        'aria-invalid:animate-uv-shake',
-        props.class
-    )">
-        <slot />
-        <SelectIcon as-child>
-            <HugeiconsIcon :icon="ArrowDown01Icon" class="size-4 opacity-60 transition-transform duration-300 ease-spring group-data-[state=open]/select-trigger:rotate-180" />
-        </SelectIcon>
-    </SelectTrigger>
+	<SelectTrigger :id="fieldControlId" data-slot="select-trigger" :data-size="size" v-bind="forwardedProps" :class="cn(
+		'group/select-trigger uv-field flex w-fit cursor-pointer items-center justify-between gap-2 rounded border border-input bg-secondary px-4 py-3 text-xs font-semibold whitespace-nowrap text-foreground shadow-elevated-sm outline-none data-placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-60 data-[size=default]:h-13 data-[size=sm]:h-10 sm:text-sm',
+		'*:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2',
+		'[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 [&_svg:not([class*=\'text-\'])]:text-muted-foreground',
+		'aria-invalid:animate-uv-shake',
+		props.class
+	)">
+		<slot />
+		<SelectIcon as-child>
+			<HugeiconsIcon :icon="ArrowDown01Icon" class="size-4 opacity-60 transition-transform duration-300 ease-spring group-data-[state=open]/select-trigger:rotate-180" />
+		</SelectIcon>
+	</SelectTrigger>
 </template>

package/src/components/ui/select/SelectValue.vue

@@ -7,7 +7,7 @@ const props = defineProps<SelectValueProps>();
 </script>
 
 <template>
-    <SelectValue data-slot="select-value" v-bind="props">
-        <slot />
-    </SelectValue>
+	<SelectValue data-slot="select-value" v-bind="props">
+		<slot />
+	</SelectValue>
 </template>

package/src/components/ui/select/SelectValueContent.vue

@@ -8,49 +8,49 @@ import type { HugeiconsIconDefinition } from '../../../lib/common-types';
 
 // Props
 const props = defineProps<SelectValueProps & {
-    class?: HTMLAttributes['class'];
-    icon?: HugeiconsIconDefinition | null;
-    label?: string | number | null;
-    description?: string | number | null;
-    iconClass?: HTMLAttributes['class'];
-    textClass?: HTMLAttributes['class'];
-    descriptionClass?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
+	icon?: HugeiconsIconDefinition | null;
+	label?: string | number | null;
+	description?: string | number | null;
+	iconClass?: HTMLAttributes['class'];
+	textClass?: HTMLAttributes['class'];
+	descriptionClass?: HTMLAttributes['class'];
 }>();
 </script>
 
 <template>
-    <SelectValue data-slot="select-value-content" :placeholder="props.placeholder" :class="cn(
-        'flex min-w-0 flex-1 gap-1.5 text-left sm:gap-2',
-        props.description ? 'items-start' : 'items-center',
-        props.class
-    )
-        ">
-        <template v-if="props.label != null || props.description != null">
-            <!-- Icon -->
-            <div v-if="props.icon" data-slot="select-value-content-icon" :class="cn('shrink-0', props.iconClass)">
-                <HugeiconsIcon :icon="props.icon" />
-            </div>
+	<SelectValue data-slot="select-value-content" :placeholder="props.placeholder" :class="cn(
+		'flex min-w-0 flex-1 gap-1.5 text-left sm:gap-2',
+		props.description ? 'items-start' : 'items-center',
+		props.class
+	)
+		">
+		<template v-if="props.label != null || props.description != null">
+			<!-- Icon -->
+			<div v-if="props.icon" data-slot="select-value-content-icon" :class="cn('shrink-0', props.iconClass)">
+				<HugeiconsIcon :icon="props.icon" />
+			</div>
 
-            <!-- Text and description -->
-            <div class="flex min-w-0 flex-1 flex-col gap-0.5">
-                <!-- Text -->
-                <span data-slot="select-value-content-text" :class="cn(
-                    'min-w-0 whitespace-normal wrap-break-word text-xs leading-5 sm:truncate sm:text-sm max-sm:[display:-webkit-box] max-sm:overflow-hidden max-sm:[-webkit-box-orient:vertical] max-sm:[-webkit-line-clamp:2]',
-                    props.textClass
-                )
-                    ">
-                    {{ props.label }}
-                </span>
+			<!-- Text and description -->
+			<div class="flex min-w-0 flex-1 flex-col gap-0.5">
+				<!-- Text -->
+				<span data-slot="select-value-content-text" :class="cn(
+					'min-w-0 whitespace-normal wrap-break-word text-xs leading-5 sm:truncate sm:text-sm max-sm:[display:-webkit-box] max-sm:overflow-hidden max-sm:[-webkit-box-orient:vertical] max-sm:[-webkit-line-clamp:2]',
+					props.textClass
+				)
+					">
+					{{ props.label }}
+				</span>
 
-                <!-- Description -->
-                <span v-if="props.description" data-slot="select-value-content-description" :class="cn(
-                    'min-w-0 whitespace-normal wrap-break-word text-[11px] leading-4 text-muted-foreground sm:text-xs sm:leading-5 max-sm:[display:-webkit-box] max-sm:overflow-hidden max-sm:[-webkit-box-orient:vertical] max-sm:[-webkit-line-clamp:3]',
-                    props.descriptionClass
-                )
-                    ">
-                    {{ props.description }}
-                </span>
-            </div>
-        </template>
-    </SelectValue>
+				<!-- Description -->
+				<span v-if="props.description" data-slot="select-value-content-description" :class="cn(
+					'min-w-0 whitespace-normal wrap-break-word text-[11px] leading-4 text-muted-foreground sm:text-xs sm:leading-5 max-sm:[display:-webkit-box] max-sm:overflow-hidden max-sm:[-webkit-box-orient:vertical] max-sm:[-webkit-line-clamp:3]',
+					props.descriptionClass
+				)
+					">
+					{{ props.description }}
+				</span>
+			</div>
+		</template>
+	</SelectValue>
 </template>

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

@@ -7,17 +7,17 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = withDefaults(defineProps<SeparatorProps & { class?: HTMLAttributes['class'] }>(), {
-    orientation: 'horizontal',
-    decorative: true
+	orientation: 'horizontal',
+	decorative: true
 });
 
 const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>
-    <Separator data-slot="separator" v-bind="delegatedProps" :class="cn(
-        'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
-        props.class
-    )
-        " />
+	<Separator data-slot="separator" v-bind="delegatedProps" :class="cn(
+		'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
+		props.class
+	)
+		" />
 </template>

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

@@ -12,7 +12,7 @@ const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-    <DialogRoot v-slot="slotProps" data-slot="sheet" v-bind="forwarded">
-        <slot v-bind="slotProps" />
-    </DialogRoot>
+	<DialogRoot v-slot="slotProps" data-slot="sheet" v-bind="forwarded">
+		<slot v-bind="slotProps" />
+	</DialogRoot>
 </template>

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

@@ -7,7 +7,7 @@ const props = defineProps<DialogCloseProps>();
 </script>
 
 <template>
-    <DialogClose data-slot="sheet-close" v-bind="props">
-        <slot />
-    </DialogClose>
+	<DialogClose data-slot="sheet-close" v-bind="props">
+		<slot />
+	</DialogClose>
 </template>

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

@@ -7,17 +7,17 @@ import { cn } from '../../../lib/utils';
 import SheetOverlay from './SheetOverlay.vue';
 
 interface SheetContentProps extends DialogContentProps {
-    class?: HTMLAttributes['class'];
-    side?: 'top' | 'right' | 'bottom' | 'left';
+	class?: HTMLAttributes['class'];
+	side?: 'top' | 'right' | 'bottom' | 'left';
 }
 
 defineOptions({
-    inheritAttrs: false
+	inheritAttrs: false
 });
 
 // Props
 const props = withDefaults(defineProps<SheetContentProps>(), {
-    side: 'right'
+	side: 'right'
 });
 // Emits
 const emits = defineEmits<DialogContentEmits>();
@@ -27,22 +27,22 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-    <DialogPortal>
-        <SheetOverlay />
-        <DialogContent data-slot="sheet-content" :class="cn(
-            'bg-background fixed z-50 flex flex-col gap-4 shadow-elevated-xl outline-none [animation-fill-mode:both] data-[state=open]:[animation-duration:480ms] data-[state=open]:[animation-timing-function:var(--ease-spring)] data-[state=closed]:[animation-duration:200ms] data-[state=closed]:[animation-timing-function:var(--ease-snappy)]',
-            side === 'right' &&
-            'data-[state=open]:[animation-name:uv-sheet-in-right] data-[state=closed]:[animation-name:uv-sheet-out-right] inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
-            side === 'left' &&
-            'data-[state=open]:[animation-name:uv-sheet-in-left] data-[state=closed]:[animation-name:uv-sheet-out-left] inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
-            side === 'top' &&
-            'data-[state=open]:[animation-name:uv-sheet-in-top] data-[state=closed]:[animation-name:uv-sheet-out-top] inset-x-0 top-0 h-auto border-b',
-            side === 'bottom' &&
-            'data-[state=open]:[animation-name:uv-sheet-in-bottom] data-[state=closed]:[animation-name:uv-sheet-out-bottom] inset-x-0 bottom-0 h-auto border-t',
-            props.class
-        )
-            " v-bind="{ ...$attrs, ...forwarded }">
-            <slot />
-        </DialogContent>
-    </DialogPortal>
+	<DialogPortal>
+		<SheetOverlay />
+		<DialogContent data-slot="sheet-content" :class="cn(
+			'bg-background fixed z-50 flex flex-col gap-4 shadow-elevated-xl outline-none [animation-fill-mode:both] data-[state=open]:[animation-duration:480ms] data-[state=open]:[animation-timing-function:var(--ease-spring)] data-[state=closed]:[animation-duration:200ms] data-[state=closed]:[animation-timing-function:var(--ease-snappy)]',
+			side === 'right' &&
+			'data-[state=open]:[animation-name:uv-sheet-in-right] data-[state=closed]:[animation-name:uv-sheet-out-right] inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
+			side === 'left' &&
+			'data-[state=open]:[animation-name:uv-sheet-in-left] data-[state=closed]:[animation-name:uv-sheet-out-left] inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
+			side === 'top' &&
+			'data-[state=open]:[animation-name:uv-sheet-in-top] data-[state=closed]:[animation-name:uv-sheet-out-top] inset-x-0 top-0 h-auto border-b',
+			side === 'bottom' &&
+			'data-[state=open]:[animation-name:uv-sheet-in-bottom] data-[state=closed]:[animation-name:uv-sheet-out-bottom] inset-x-0 bottom-0 h-auto border-t',
+			props.class
+		)
+			" v-bind="{ ...$attrs, ...forwarded }">
+			<slot />
+		</DialogContent>
+	</DialogPortal>
 </template>

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

@@ -12,7 +12,7 @@ const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>
-    <DialogDescription data-slot="sheet-description" :class="cn('text-muted-foreground text-sm', props.class)" v-bind="delegatedProps">
-        <slot />
-    </DialogDescription>
+	<DialogDescription data-slot="sheet-description" :class="cn('text-muted-foreground text-sm', props.class)" v-bind="delegatedProps">
+		<slot />
+	</DialogDescription>
 </template>

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

@@ -7,7 +7,7 @@ const props = defineProps<{ class?: HTMLAttributes['class'] }>();
 </script>
 
 <template>
-    <div data-slot="sheet-footer" :class="cn('mt-auto flex flex-col gap-2 p-4', props.class)">
-        <slot />
-    </div>
+	<div data-slot="sheet-footer" :class="cn('mt-auto flex flex-col gap-2 p-4', props.class)">
+		<slot />
+	</div>
 </template>

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

@@ -7,7 +7,7 @@ const props = defineProps<{ class?: HTMLAttributes['class'] }>();
 </script>
 
 <template>
-    <div data-slot="sheet-header" :class="cn('flex flex-col gap-1.5 p-4', props.class)">
-        <slot />
-    </div>
+	<div data-slot="sheet-header" :class="cn('flex flex-col gap-1.5 p-4', props.class)">
+		<slot />
+	</div>
 </template>

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

@@ -12,11 +12,11 @@ const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>
-    <DialogOverlay data-slot="sheet-overlay" :class="cn(
-        'uv-overlay-motion fixed inset-0 z-50 bg-black/40 backdrop-blur-[3px] dark:bg-black/60',
-        props.class
-    )
-        " v-bind="delegatedProps">
-        <slot />
-    </DialogOverlay>
+	<DialogOverlay data-slot="sheet-overlay" :class="cn(
+		'uv-overlay-motion fixed inset-0 z-50 bg-black/40 backdrop-blur-[3px] dark:bg-black/60',
+		props.class
+	)
+		" v-bind="delegatedProps">
+		<slot />
+	</DialogOverlay>
 </template>

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

@@ -12,7 +12,7 @@ const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>
-    <DialogTitle data-slot="sheet-title" :class="cn('text-foreground font-semibold', props.class)" v-bind="delegatedProps">
-        <slot />
-    </DialogTitle>
+	<DialogTitle data-slot="sheet-title" :class="cn('text-foreground font-semibold', props.class)" v-bind="delegatedProps">
+		<slot />
+	</DialogTitle>
 </template>