fix: Select set align default to bottom-start

apps/www/src/content/docs/components/select/props.ts

@@ -57,10 +57,22 @@ export interface SelectContentProps {
   searchPlaceholder?: string;
 
   /**
-   * Position of the content
-   * @default "popper"
+   * Which side of the trigger to render the content on.
+   * @default "bottom"
    */
-  position?: 'item-aligned' | 'popper';
+  side?: 'top' | 'bottom' | 'left' | 'right' | 'inline-start' | 'inline-end';
+
+  /**
+   * Alignment of the content relative to the trigger along the chosen side.
+   * @default "start"
+   */
+  align?: 'start' | 'center' | 'end';
+
+  /**
+   * Distance in pixels between the trigger and the content.
+   * @default 4
+   */
+  sideOffset?: number;
 
   /** Additional CSS class names. */
   className?: string;

docs/V1-migration.md

@@ -1388,6 +1388,16 @@ Summary of renames:
 
 3. **`SelectItem` uses `render` prop** instead of `asChild`.
 
+4. **Default alignment changed: bottom-center -> bottom-start (bottom-left).** `Select.Content` now opens flush to the trigger's start edge instead of horizontally centered. Pass `align="center"` to mimic the previous behavior.
+
+```tsx
+// v1 default (bottom-left)
+<Select.Content>...</Select.Content>
+
+// Opt back into v0 behavior
+<Select.Content align="center">...</Select.Content>
+```
+
 #### New Features
 
 - `items` prop for external filtering

packages/raystack/components/select/select-content.tsx

@@ -22,6 +22,8 @@ export function SelectContent({
   children,
   searchPlaceholder = 'Search...',
   sideOffset = 4,
+  side = 'bottom',
+  align = 'start',
   ...props
 }: SelectContentProps) {
   const { autocomplete, multiple } = useSelectContext();
@@ -31,6 +33,8 @@ export function SelectContent({
       <ComboboxPrimitive.Portal>
         <ComboboxPrimitive.Positioner
           sideOffset={sideOffset}
+          side={side}
+          align={align}
           className={styles.positioner}
         >
           <ComboboxPrimitive.Popup
@@ -41,6 +45,7 @@ export function SelectContent({
             <ComboboxPrimitive.Input
               placeholder={searchPlaceholder}
               className={styles.comboboxInput}
+              size={12}
             />
             <ComboboxPrimitive.List
               className={styles.comboboxContent}
@@ -57,6 +62,8 @@ export function SelectContent({
   return (
     <SelectPrimitive.Positioner
       sideOffset={sideOffset}
+      side={side}
+      align={align}
       className={styles.positioner}
       alignItemWithTrigger={false}
     >