Filter products using select instead of toggles

resources/js/components/ui/tabs/Tabs.vue

@@ -1,23 +1,15 @@
 <script setup lang="ts">
 import type { TabsRootEmits, TabsRootProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
 import { TabsRoot, useForwardPropsEmits } from "reka-ui"
-import { cn } from "@/lib/utils"
 
-const props = defineProps<TabsRootProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<TabsRootProps>()
 const emits = defineEmits<TabsRootEmits>()
 
-const delegatedProps = reactiveOmit(props, "class")
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
-  <TabsRoot
-    data-slot="tabs"
-    v-bind="forwarded"
-    :class="cn('flex flex-col gap-2', props.class)"
-  >
+  <TabsRoot v-bind="forwarded">
     <slot />
   </TabsRoot>
 </template>

resources/js/components/ui/tabs/TabsContent.vue

@@ -12,8 +12,7 @@ const delegatedProps = reactiveOmit(props, "class")
 
 <template>
   <TabsContent
-    data-slot="tabs-content"
-    :class="cn('flex-1 outline-none', props.class)"
+    :class="cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', props.class)"
     v-bind="delegatedProps"
   >
     <slot />

resources/js/components/ui/tabs/TabsList.vue

@@ -12,10 +12,9 @@ const delegatedProps = reactiveOmit(props, "class")
 
 <template>
   <TabsList
-    data-slot="tabs-list"
     v-bind="delegatedProps"
     :class="cn(
-      'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',
+      'inline-flex items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
       props.class,
     )"
   >

resources/js/components/ui/tabs/TabsTrigger.vue

@@ -14,13 +14,14 @@ const forwardedProps = useForwardProps(delegatedProps)
 
 <template>
   <TabsTrigger
-    data-slot="tabs-trigger"
     v-bind="forwardedProps"
     :class="cn(
-      `data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
+      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
       props.class,
     )"
   >
-    <slot />
+    <span class="truncate">
+      <slot />
+    </span>
   </TabsTrigger>
 </template>