refactor: ⬆️ Upgrade to Tailwind v4

components/ui/separator/Separator.vue

@@ -1,35 +1,29 @@
 <script setup lang="ts">
 import { cn } from "@/lib/utils";
+import { reactiveOmit } from "@vueuse/core";
 import { Separator, type SeparatorProps } from "reka-ui";
-import { type HTMLAttributes, computed } from "vue";
+import type { HTMLAttributes } from "vue";
 
-const props = defineProps<
-    SeparatorProps & { class?: HTMLAttributes["class"]; label?: string }
->();
+const props = withDefaults(
+    defineProps<SeparatorProps & { class?: HTMLAttributes["class"] }>(),
+    {
+        orientation: "horizontal",
+        decorative: true,
+    },
+);
 
-const delegatedProps = computed(() => {
-    const { class: _, ...delegated } = props;
-
-    return delegated;
-});
+const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
   <Separator
+    data-slot="separator-root"
     v-bind="delegatedProps"
     :class="
       cn(
-        'shrink-0 bg-border relative',
-        props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',
+        `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,
       )
     "
-  >
-    <span
-      v-if="props.label"
-      :class="cn('text-xs text-muted-foreground bg-background absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex justify-center items-center',
-                 props.orientation === 'vertical' ? 'w-[1px] px-1 py-2' : 'h-[1px] py-1 px-2',
-      )"
-    >{{ props.label }}</span>
-  </Separator>
+  />
 </template>