refactor: Components updates

web/src/refresh-components/inputs/InputSelect.tsx

@@ -14,6 +14,8 @@ import {
 } from "@/refresh-components/inputs/styles";
 import Truncated from "@/refresh-components/texts/Truncated";
 import { SvgChevronDownSmall } from "@opal/icons";
+import Separator, { SeparatorProps } from "@/refresh-components/Separator";
+import { WithoutStyles } from "@/types";
 
 // ============================================================================
 // Context
@@ -304,7 +306,9 @@ const InputSelectContent = React.forwardRef<
       onMouseDown={noProp()}
       {...props}
     >
-      <SelectPrimitive.Viewport>{children}</SelectPrimitive.Viewport>
+      <SelectPrimitive.Viewport className="flex flex-col gap-1">
+        {children}
+      </SelectPrimitive.Viewport>
     </SelectPrimitive.Content>
   </SelectPrimitive.Portal>
 ));
@@ -336,7 +340,6 @@ interface InputSelectItemProps extends Omit<LineItemProps, "heavyForced"> {
   /** Optional callback when item is selected */
   onClick?: (event: React.SyntheticEvent) => void;
 }
-
 const InputSelectItem = React.forwardRef<
   React.ComponentRef<typeof SelectPrimitive.Item>,
   InputSelectItemProps
@@ -408,7 +411,6 @@ InputSelectItem.displayName = "InputSelectItem";
  */
 interface InputSelectGroupProps
   extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Group> {}
-
 const InputSelectGroup = React.forwardRef<
   React.ComponentRef<typeof SelectPrimitive.Group>,
   InputSelectGroupProps
@@ -435,7 +437,6 @@ InputSelectGroup.displayName = "InputSelectGroup";
  */
 interface InputSelectLabelProps
   extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label> {}
-
 const InputSelectLabel = React.forwardRef<
   React.ComponentRef<typeof SelectPrimitive.Label>,
   InputSelectLabelProps
@@ -453,6 +454,34 @@ const InputSelectLabel = React.forwardRef<
 ));
 InputSelectLabel.displayName = "InputSelectLabel";
 
+// ============================================================================
+// InputSelect Separator
+// ============================================================================
+
+/**
+ * InputSelect Separator Component
+ *
+ * A visual divider between items in the dropdown.
+ * Uses the app's standard Separator component with appropriate defaults for dropdown menus.
+ *
+ * @example
+ * ```tsx
+ * <InputSelect.Content>
+ *   <InputSelect.Item value="1">Option 1</InputSelect.Item>
+ *   <InputSelect.Separator />
+ *   <InputSelect.Item value="2">Option 2</InputSelect.Item>
+ * </InputSelect.Content>
+ * ```
+ */
+type InputSelectSeparatorProps = WithoutStyles<SeparatorProps>;
+const InputSelectSeparator = React.forwardRef<
+  React.ComponentRef<typeof Separator>,
+  InputSelectSeparatorProps
+>(({ noPadding = true, ...props }, ref) => (
+  <Separator ref={ref} noPadding={noPadding} className="px-2 py-1" {...props} />
+));
+InputSelectSeparator.displayName = "InputSelectSeparator";
+
 // ============================================================================
 // Exports
 // ============================================================================
@@ -496,6 +525,7 @@ export default Object.assign(InputSelectRoot, {
   Item: InputSelectItem,
   Group: InputSelectGroup,
   Label: InputSelectLabel,
+  Separator: InputSelectSeparator,
 });
 
 export {
@@ -505,4 +535,5 @@ export {
   type InputSelectItemProps,
   type InputSelectGroupProps,
   type InputSelectLabelProps,
+  type InputSelectSeparatorProps,
 };