Refactor Select Component Variants and Styles for Improved Consistency

- Updated SelectTrigger and SelectItem components to use variant props for error handling, enhancing visual feedback.
- Refactored styles in SelectContent and SelectItem for better alignment and responsiveness.
- Added new variant handling in the SelectTrigger component to streamline class management.
- Updated styleguide.vue to include examples of the Select component with error and disabled states for better documentation.

app/components/ui/select/SelectTrigger.vue

@@ -3,16 +3,22 @@ import { type HTMLAttributes, computed } from 'vue'
 import { SelectTrigger as SelectTriggerPrimitive } from 'reka-ui'
 import { ChevronDown } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
+import { selectTriggerVariants, type SelectTriggerVariants } from '.'
 
 interface SelectTriggerProps {
   disabled?: boolean
+  variant?: SelectTriggerVariants['variant']
+  size?: SelectTriggerVariants['size']
   class?: HTMLAttributes['class']
 }
 
-const props = defineProps<SelectTriggerProps>()
+const props = withDefaults(defineProps<SelectTriggerProps>(), {
+  variant: 'default',
+  size: 'default',
+})
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+  const { class: _, variant: __, size: ___, ...delegated } = props
   return delegated
 })
 </script>
@@ -22,7 +28,7 @@ const delegatedProps = computed(() => {
     v-bind="delegatedProps"
     :class="
       cn(
-        'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        selectTriggerVariants({ variant: props.variant, size: props.size }),
         props.class
       )
     "