@brumaombra/ui-vintage 0.7.7 → 0.7.9

package/src/components/ui/scroll-area/ScrollArea.vue

@@ -1,33 +1,30 @@
 <script setup lang="ts">
-import type { ScrollAreaRootProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  ScrollAreaCorner,
-  ScrollAreaRoot,
-  ScrollAreaViewport,
-} from "reka-ui"
-import { cn } from "../../../lib/utils"
-import ScrollBar from "./ScrollBar.vue"
+import type { ScrollAreaRootProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { ScrollAreaCorner, ScrollAreaRoot, ScrollAreaViewport } from 'reka-ui';
+import { cn } from '../../../lib/utils';
+import ScrollBar from './ScrollBar.vue';
 
-const props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes["class"] }>()
+// Props
+const props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes['class'] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>
-  <ScrollAreaRoot
-    data-slot="scroll-area"
-    v-bind="delegatedProps"
-    :class="cn('relative', props.class)"
-  >
-    <ScrollAreaViewport
-      data-slot="scroll-area-viewport"
-      class="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+    <ScrollAreaRoot
+        data-slot="scroll-area"
+        v-bind="delegatedProps"
+        :class="cn('relative', props.class)"
     >
-      <slot />
-    </ScrollAreaViewport>
-    <ScrollBar />
-    <ScrollAreaCorner />
-  </ScrollAreaRoot>
-</template>
+        <ScrollAreaViewport
+            data-slot="scroll-area-viewport"
+            class="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+        >
+            <slot />
+        </ScrollAreaViewport>
+        <ScrollBar />
+        <ScrollAreaCorner />
+    </ScrollAreaRoot>
+</template>

package/src/components/ui/scroll-area/ScrollBar.vue

@@ -1,32 +1,28 @@
 <script setup lang="ts">
-import type { ScrollAreaScrollbarProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { ScrollAreaScrollbar, ScrollAreaThumb } from "reka-ui"
-import { cn } from "../../../lib/utils"
+import type { ScrollAreaScrollbarProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { ScrollAreaScrollbar, ScrollAreaThumb } from 'reka-ui';
+import { cn } from '../../../lib/utils';
 
-const props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes["class"] }>(), {
-  orientation: "vertical",
-})
+// Props
+const props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(), {
+    orientation: 'vertical'
+});
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>
-  <ScrollAreaScrollbar
-    data-slot="scroll-area-scrollbar"
-    v-bind="delegatedProps"
-    :class="
-      cn('flex touch-none p-px transition-colors select-none',
-         orientation === 'vertical'
-           && 'h-full w-2.5 border-l border-l-transparent',
-         orientation === 'horizontal'
-           && 'h-2.5 flex-col border-t border-t-transparent',
-         props.class)"
-  >
-    <ScrollAreaThumb
-      data-slot="scroll-area-thumb"
-      class="bg-border relative flex-1 rounded-full"
-    />
-  </ScrollAreaScrollbar>
-</template>
+    <ScrollAreaScrollbar data-slot="scroll-area-scrollbar" v-bind="delegatedProps" :class="cn(
+        'flex touch-none p-px transition-colors select-none',
+        orientation === 'vertical' &&
+        'h-full w-2.5 border-l border-l-transparent',
+        orientation === 'horizontal' &&
+        'h-2.5 flex-col border-t border-t-transparent',
+        props.class
+    )
+        ">
+        <ScrollAreaThumb data-slot="scroll-area-thumb" class="bg-border relative flex-1 rounded-full" />
+    </ScrollAreaScrollbar>
+</template>

package/src/components/ui/scroll-area/index.ts

@@ -1,2 +1,2 @@
-export { default as ScrollArea } from "./ScrollArea.vue"
-export { default as ScrollBar } from "./ScrollBar.vue"
+export { default as ScrollArea } from './ScrollArea.vue';
+export { default as ScrollBar } from './ScrollBar.vue';

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

@@ -1,15 +1,18 @@
 <script setup lang="ts">
-import type { SelectRootEmits, SelectRootProps } from "reka-ui"
-import { SelectRoot, useForwardPropsEmits } from "reka-ui"
+import type { SelectRootEmits, SelectRootProps } from 'reka-ui';
+import { SelectRoot, useForwardPropsEmits } from 'reka-ui';
 
-const props = defineProps<SelectRootProps>()
-const emits = defineEmits<SelectRootEmits>()
+// Props
+const props = defineProps<SelectRootProps>();
 
-const forwarded = useForwardPropsEmits(props, emits)
+// Emits
+const emits = defineEmits<SelectRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-  <SelectRoot v-slot="slotProps" data-slot="select" v-bind="forwarded">
-    <slot v-bind="slotProps" />
-  </SelectRoot>
-</template>
+    <SelectRoot v-slot="slotProps" data-slot="select" v-bind="forwarded">
+        <slot v-bind="slotProps" />
+    </SelectRoot>
+</template>

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

@@ -1,50 +1,49 @@
 <script setup lang="ts">
-import type { SelectContentEmits, SelectContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  SelectContent,
-  SelectPortal,
-  SelectViewport,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "../../../lib/utils"
-import { SelectScrollDownButton, SelectScrollUpButton } from "."
+import type { SelectContentEmits, SelectContentProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { SelectContent, SelectPortal, SelectViewport, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '../../../lib/utils';
+import { SelectScrollDownButton, SelectScrollUpButton } from '.';
 
 defineOptions({
-  inheritAttrs: false,
-})
+    inheritAttrs: false
+});
 
-const props = withDefaults(
-  defineProps<SelectContentProps & { class?: HTMLAttributes["class"] }>(),
-  {
-    align: "start",
-    position: "popper",
+// Props
+const props = withDefaults(defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(), {
+    align: 'start',
+    position: 'popper',
     sideOffset: 4,
-    collisionPadding: 8,
-  },
-)
-const emits = defineEmits<SelectContentEmits>()
+    collisionPadding: 8
+});
 
-const delegatedProps = reactiveOmit(props, "class")
+// Emits
+const emits = defineEmits<SelectContentEmits>();
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const delegatedProps = reactiveOmit(props, 'class');
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-  <SelectPortal>
-    <SelectContent data-slot="select-content" v-bind="{ ...$attrs, ...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 relative z-50 max-h-(--reka-select-content-available-height) min-w-32 overflow-x-hidden overflow-y-auto rounded border border-border transition-colors duration-300 ease-in-out 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>
+    <SelectPortal>
+        <SelectContent data-slot="select-content" v-bind="{ ...$attrs, ...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 relative z-50 max-h-(--reka-select-content-available-height) min-w-32 overflow-x-hidden overflow-y-auto rounded border border-border transition-colors duration-300 ease-in-out 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

@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import type { SelectGroupProps } from "reka-ui"
-import { SelectGroup } from "reka-ui"
+import type { SelectGroupProps } from 'reka-ui';
+import { SelectGroup } from 'reka-ui';
 
-const props = defineProps<SelectGroupProps>()
+// Props
+const props = defineProps<SelectGroupProps>();
 </script>
 
 <template>
-  <SelectGroup data-slot="select-group" v-bind="props">
-    <slot />
-  </SelectGroup>
-</template>
+    <SelectGroup data-slot="select-group" v-bind="props">
+        <slot />
+    </SelectGroup>
+</template>

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

@@ -1,50 +1,45 @@
 <script setup lang="ts">
-import type { SelectItemProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { Tick02Icon } from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/vue"
-import {
-  SelectItem,
-  SelectItemIndicator,
-  SelectItemText,
-  useForwardProps,
-} from "reka-ui"
-import { cn } from "../../../lib/utils"
+import type { SelectItemProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { Tick02Icon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { SelectItem, SelectItemIndicator, SelectItemText, useForwardProps } from 'reka-ui';
+import { cn } from '../../../lib/utils';
 
-const props = defineProps<SelectItemProps & { class?: HTMLAttributes["class"] }>()
+// Props
+const props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwardedProps = useForwardProps(delegatedProps)
+const delegatedProps = reactiveOmit(props, 'class');
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <SelectItem data-slot="select-item" v-bind="forwardedProps" :class="cn(
-    'focus:bg-accent focus:text-accent-foreground [&_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" />
-        </slot>
-      </SelectItemIndicator>
-    </span>
+    <SelectItem data-slot="select-item" v-bind="forwardedProps" :class="cn(
+        'focus:bg-accent focus:text-accent-foreground [&_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" />
+                </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>
-</template>
+        <SelectItemText v-else>
+            <slot />
+        </SelectItemText>
+    </SelectItem>
+</template>

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

@@ -1,20 +1,19 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { HugeiconsIcon } from "@hugeicons/vue"
-import { cn } from "../../../lib/utils"
-
-type HugeiconsIconDefinition = readonly (readonly [string, { readonly [key: string]: string | number }])[]
+import type { HTMLAttributes } from 'vue';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { cn } from '../../../lib/utils';
+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>
@@ -27,12 +26,20 @@ const props = defineProps<{
         <!-- 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)">
+            <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-regular text-[11px] sm:text-xs leading-4 sm:leading-5 text-(--text-secondary-light) dark:text-(--text-secondary-dark)', props.descriptionClass)">
+            <span v-if="props.description" data-slot="select-item-content-description" :class="cn(
+                'font-regular text-[11px] sm:text-xs leading-4 sm:leading-5 text-(--text-secondary-light) dark:text-(--text-secondary-dark)',
+                props.descriptionClass
+            )
+                ">
                 {{ props.description }}
             </span>
         </div>

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

@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import type { SelectItemTextProps } from "reka-ui"
-import { SelectItemText } from "reka-ui"
+import type { SelectItemTextProps } from 'reka-ui';
+import { SelectItemText } from 'reka-ui';
 
-const props = defineProps<SelectItemTextProps>()
+// Props
+const props = defineProps<SelectItemTextProps>();
 </script>
 
 <template>
-  <SelectItemText data-slot="select-item-text" v-bind="props">
-    <slot />
-  </SelectItemText>
-</template>
+    <SelectItemText data-slot="select-item-text" v-bind="props">
+        <slot />
+    </SelectItemText>
+</template>

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

@@ -1,14 +1,15 @@
 <script setup lang="ts">
-import type { SelectLabelProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { SelectLabel } from "reka-ui"
-import { cn } from "../../../lib/utils"
+import type { SelectLabelProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { SelectLabel } from 'reka-ui';
+import { cn } from '../../../lib/utils';
 
-const props = defineProps<SelectLabelProps & { class?: HTMLAttributes["class"] }>()
+// Props
+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>
-</template>
+    <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

@@ -1,23 +1,27 @@
 <script setup lang="ts">
-import type { SelectScrollDownButtonProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { ArrowDown01Icon } from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/vue"
-import { SelectScrollDownButton, useForwardProps } from "reka-ui"
-import { cn } from "../../../lib/utils"
+import type { SelectScrollDownButtonProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { ArrowDown01Icon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { SelectScrollDownButton, useForwardProps } from 'reka-ui';
+import { cn } from '../../../lib/utils';
 
-const props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes["class"] }>()
+// Props
+const props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwardedProps = useForwardProps(delegatedProps)
+const delegatedProps = reactiveOmit(props, 'class');
+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>
-</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>
+</template>

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

@@ -1,23 +1,27 @@
 <script setup lang="ts">
-import type { SelectScrollUpButtonProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { ArrowUp01Icon } from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/vue"
-import { SelectScrollUpButton, useForwardProps } from "reka-ui"
-import { cn } from "../../../lib/utils"
+import type { SelectScrollUpButtonProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { ArrowUp01Icon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { SelectScrollUpButton, useForwardProps } from 'reka-ui';
+import { cn } from '../../../lib/utils';
 
-const props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes["class"] }>()
+// Props
+const props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwardedProps = useForwardProps(delegatedProps)
+const delegatedProps = reactiveOmit(props, 'class');
+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>
-</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>
+</template>

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

@@ -1,15 +1,17 @@
 <script setup lang="ts">
-import type { SelectSeparatorProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { SelectSeparator } from "reka-ui"
-import { cn } from "../../../lib/utils"
+import type { SelectSeparatorProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { SelectSeparator } from 'reka-ui';
+import { cn } from '../../../lib/utils';
 
-const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes["class"] }>()
+// Props
+const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+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)" />
-</template>
+    <SelectSeparator data-slot="select-separator" v-bind="delegatedProps" :class="cn('bg-border pointer-events-none -mx-1 my-1 h-px', props.class)
+        " />
+</template>