fix(native-select): add bg and text color to optgroup

Author: sadeghbarati

apps/v4/public/r/styles/new-york-v4/native-select.json

@@ -14,7 +14,7 @@
     },
     {
       "path": "registry/new-york-v4/ui/native-select/NativeSelectOptGroup.vue",
-      "content": "<!-- @fallthroughAttributes true -->\n<!-- @strictTemplates true -->\n\n<script setup lang=\"ts\">\n</script>\n\n<template>\n  <optgroup data-slot=\"native-select-optgroup\">\n    <slot />\n  </optgroup>\n</template>\n",
+      "content": "<!-- @fallthroughAttributes true -->\n<!-- @strictTemplates true -->\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<{ class?: HTMLAttributes[\"class\"] }>()\n</script>\n\n<template>\n  <optgroup data-slot=\"native-select-optgroup\" :class=\"cn('bg-popover text-popover-foreground', props.class)\">\n    <slot />\n  </optgroup>\n</template>\n",
       "type": "registry:ui"
     },
     {

apps/v4/registry/new-york-v4/ui/native-select/NativeSelectOptGroup.vue

@@ -2,10 +2,14 @@
 <!-- @strictTemplates true -->
 
 <script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>()
 </script>
 
 <template>
-  <optgroup data-slot="native-select-optgroup">
+  <optgroup data-slot="native-select-optgroup" :class="cn('bg-popover text-popover-foreground', props.class)">
     <slot />
   </optgroup>
 </template>