monadical/opencode
14
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

refactor Select component to use settings variant for settings modal styling

Browse Source
This commit is contained in:
David Hill
2026-01-20 21:52:50 +00:00
parent 575cc59b37
commit 7be6671e6e
5 changed files with 92 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/ui/src/components/select.tsx
View File

@@ -17,7 +17,7 @@ export type SelectProps<T> = Omit<ComponentProps<typeof Kobalte<T>>, "value" | "
classList?: ComponentProps<"div">["classList"]
children?: (item: T | undefined) => JSX.Element
triggerStyle?: JSX.CSSProperties
triggerVariant?: "default" | "button"
triggerVariant?: "settings"
}
export function Select<T>(props: SelectProps<T> & Omit<ButtonProps, "children">) {
@@ -84,7 +84,7 @@ export function Select<T>(props: SelectProps<T> & Omit<ButtonProps, "children">)
{...others}
data-component="select"
data-trigger-style={local.triggerVariant}
placement="bottom-end"
placement={local.triggerVariant === "settings" ? "bottom-end" : "bottom-start"}
gutter={4}
value={local.current}
options={grouped()}
@@ -148,7 +148,7 @@ export function Select<T>(props: SelectProps<T> & Omit<ButtonProps, "children">)
}}
</Kobalte.Value>
<Kobalte.Icon data-slot="select-select-trigger-icon">
<Icon name={local.triggerVariant === "button" ? "chevron-down" : "selector"} size="small" />
<Icon name={local.triggerVariant === "settings" ? "selector" : "chevron-down"} size="small" />
</Kobalte.Icon>
</Kobalte.Trigger>
<Kobalte.Portal>
@@ -158,6 +158,7 @@ export function Select<T>(props: SelectProps<T> & Omit<ButtonProps, "children">)
[local.class ?? ""]: !!local.class,
}}
data-component="select-content"
data-trigger-style={local.triggerVariant}
>
<Kobalte.Listbox data-slot="select-select-content-list" />
</Kobalte.Content>