add triggerStyle prop to Select and use it for font selector

2 files changed, 4 insertions, 0 deletions

diff --git a/packages/app/src/components/settings-general.tsx b/packages/app/src/components/settings-general.tsx
index 2a8e1d720..c4efdb696 100644
--- a/packages/app/src/components/settings-general.tsx
+++ b/packages/app/src/components/settings-general.tsx
@@ -100,6 +100,7 @@ export const SettingsGeneral: Component = () => {
                 onSelect={(option) => option && settings.appearance.setFont(option.value)}
                 variant="secondary"
                 size="small"
+                triggerStyle={{ "font-family": monoFontFamily(settings.appearance.font()) }}
               >
                 {(option) => <span style={{ "font-family": monoFontFamily(option?.value) }}>{option?.label}</span>}
               </Select>
diff --git a/packages/ui/src/components/select.tsx b/packages/ui/src/components/select.tsx
index 1a1de0bef..9d6c45609 100644
--- a/packages/ui/src/components/select.tsx
+++ b/packages/ui/src/components/select.tsx
@@ -16,6 +16,7 @@ export type SelectProps<T> = Omit<ComponentProps<typeof Kobalte<T>>, "value" | "
   class?: ComponentProps<"div">["class"]
   classList?: ComponentProps<"div">["classList"]
   children?: (item: T | undefined) => JSX.Element
+  triggerStyle?: JSX.CSSProperties
 }
 
 export function Select<T>(props: SelectProps<T> & ButtonProps) {
@@ -32,6 +33,7 @@ export function Select<T>(props: SelectProps<T> & ButtonProps) {
     "onHighlight",
     "onOpenChange",
     "children",
+    "triggerStyle",
   ])
 
   const state = {
@@ -127,6 +129,7 @@ export function Select<T>(props: SelectProps<T> & ButtonProps) {
         as={Button}
         size={props.size}
         variant={props.variant}
+        style={local.triggerStyle}
         classList={{
           ...(local.classList ?? {}),
           [local.class ?? ""]: !!local.class,