@brumaombra/ui-vintage 0.9.0 → 0.9.2

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

@@ -2,7 +2,7 @@
 import type { SelectScrollDownButtonProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
-import { ArrowDown01Icon } from '@hugeicons/core-free-icons';
+import ArrowDown01Icon from '@hugeicons/core-free-icons/ArrowDown01Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { SelectScrollDownButton, useForwardProps } from 'reka-ui';
 import { cn } from '../../../lib/utils';
@@ -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

@@ -2,7 +2,7 @@
 import type { SelectScrollUpButtonProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
-import { ArrowUp01Icon } from '@hugeicons/core-free-icons';
+import ArrowUp01Icon from '@hugeicons/core-free-icons/ArrowUp01Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { SelectScrollUpButton, useForwardProps } from 'reka-ui';
 import { cn } from '../../../lib/utils';
@@ -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

@@ -2,7 +2,7 @@
 import type { SelectTriggerProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
-import { ArrowDown01Icon } from '@hugeicons/core-free-icons';
+import ArrowDown01Icon from '@hugeicons/core-free-icons/ArrowDown01Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { SelectIcon, SelectTrigger, useForwardProps } from 'reka-ui';
 import { cn } from '../../../lib/utils';
@@ -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>

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

@@ -7,7 +7,7 @@ const props = defineProps<DialogTriggerProps>();
 </script>
 
 <template>
-    <DialogTrigger data-slot="sheet-trigger" v-bind="props">
-        <slot />
-    </DialogTrigger>
+	<DialogTrigger data-slot="sheet-trigger" v-bind="props">
+		<slot />
+	</DialogTrigger>
 </template>