feat: add select component recipe with semantic color variants

src/index.ts

@@ -14,6 +14,7 @@ import alertRecipe from './recipes/alert.js'
 import chipRecipe from './recipes/chip.js'
 import iconButtonRecipe from './recipes/iconButton.js'
 import markRecipe from './recipes/mark.js'
+import selectRecipe from './recipes/select.js'
 
 export type ThemeConfig = {
   neutral?: NeutralColor
@@ -48,7 +49,8 @@ const srJuggernautPandaPreset = (config?: ThemeConfig) => {
         details: detailsRecipe({ semanticColorNames: semanticColorKeysArray }),
         mark: markRecipe({ semanticColorNames: semanticColorKeysArray }),
         input: inputRecipe({ semanticColorNames: semanticColorKeysArray }),
-        iconButton: iconButtonRecipe({ semanticColorNames: semanticColorKeysArray })
+        iconButton: iconButtonRecipe({ semanticColorNames: semanticColorKeysArray }),
+        select: selectRecipe({ semanticColorNames: semanticColorKeysArray })
       },
       tokens: {
         animations: {},
@@ -186,6 +188,11 @@ const srJuggernautPandaPreset = (config?: ThemeConfig) => {
         }
       }
     },
+    conditions: {
+      extend: {
+        active: '&[data-state="open"]'
+      }
+    },
     globalCss: {
       '*, *:before, *:after': {
         boxSizing: 'border-box',