feat(ui): introduce SelectButton for a select-like appearance in ComboboxTrigger, MenuTrigger, etc

Author: pasqualevitiello

apps/examples/calcom/app/(settings)/settings/my-account/general/page.tsx

@@ -25,6 +25,7 @@ import { Fieldset, FieldsetLegend } from "@coss/ui/components/fieldset";
 import { Label } from "@coss/ui/components/label";
 import {
   Select,
+  SelectButton,
   SelectItem,
   SelectPopup,
   SelectTrigger,
@@ -134,17 +135,8 @@ export default function GeneralSettingsPage() {
                         defaultValue={defaultTimezone}
                         items={formattedTimezones}
                       >
-                        <ComboboxTrigger
-                          className="flex-1"
-                          render={
-                            <Button
-                              className="w-full justify-between font-normal"
-                              variant="outline"
-                            />
-                          }
-                        >
+                        <ComboboxTrigger render={<SelectButton />}>
                           <ComboboxValue />
-                          <ChevronsUpDownIcon className="-me-1!" />
                         </ComboboxTrigger>
                         <ComboboxPopup aria-label="Select timezone">
                           <div className="border-b p-2">

apps/examples/calcom/components/app/bookings-saved-filters.tsx

@@ -311,6 +311,12 @@ Use the `startAddon` prop on `ComboboxChips` to display an icon at the start whe
 
 <ComponentPreview name="p-combobox-10" />
 
+### With Select-like Button
+
+Use `SelectButton` as a `render` prop on `ComboboxTrigger` to make the combobox trigger look like a select.
+
+<ComponentPreview name="p-combobox-18" />
+
 ### Form Integration
 
 <ComponentPreview name="p-combobox-11" />

apps/ui/content/docs/components/combobox.mdx

@@ -123,6 +123,24 @@ Label for a select group. Styled wrapper for `Select.GroupLabel` from Base UI.
 
 Visual separator between items. Styled wrapper for `Select.Separator` from Base UI.
 
+### SelectButton
+
+A standalone button styled like a `SelectTrigger`. Use it as a `render` prop on other trigger components (e.g., `ComboboxTrigger`, `MenuTrigger`) to give them select-like appearance.
+
+| Prop   | Type                        | Default     | Description                                      |
+| ------ | --------------------------- | ----------- | ------------------------------------------------ |
+| `size` | `"sm" \| "default" \| "lg"` | `"default"` | Controls the size of the button                 |
+
+```tsx
+import { SelectButton } from "@/components/ui/select"
+```
+
+```tsx
+<ComboboxTrigger render={<SelectButton />}>
+  <ComboboxValue placeholder="Select a fruit" />
+</ComboboxTrigger>
+```
+
 ## Examples
 
 For accessible labelling and validation, prefer using the `Field` component to wrap selects. See the related example: [Select field](/ui/docs/components/field#select-field).
@@ -163,6 +181,13 @@ For accessible labelling and validation, prefer using the `Field` component to w
 
 <ComponentPreview name="p-select-10" />
 
+### SelectButton with Combobox
+
+Use `SelectButton` as a `render` prop on `ComboboxTrigger` to create a combobox that looks like a select.
+
+<ComponentPreview name="p-combobox-18" />
+
 ### Form Integration
 
 <ComponentPreview name="p-select-11" />
+

apps/ui/content/docs/components/select.mdx

@@ -1,6 +1,6 @@
 {
   "dependencies": {
-    "@base-ui/react": "^1.0.0",
+    "@base-ui/react": "^1.1.0",
     "@coss/ui": "workspace:*",
     "@hugeicons/core-free-icons": "^2.0.0",
     "@hugeicons/react": "^1.1.1",