@studio-piot/native-ui 0.2.0 → 0.2.2

package/dist/index.js

@@ -36,8 +36,8 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.components = exports.resolveSelectDetentIndex = exports.detentsToSnapPoints = exports.DEFAULT_SELECT_INITIAL_DETENT = exports.DEFAULT_SELECT_DETENTS = exports.SELECT_THEME_ROLES = exports.SelectCloseButton = exports.Select = exports.RADIO_THEME_ROLES = exports.RadioField = exports.FormCloseButton = exports.Form = exports.FIELD_THEME_ROLES = exports.FieldTextarea = exports.FieldText = exports.filterLinkBlockGroups = exports.LinkBlocks = exports.buttonRadiusValue = exports.Button = exports.version = void 0;
-exports.version = "0.2.0";
+exports.components = exports.SLIDER_THEME_ROLES = exports.Slider = exports.resolveSelectDetentIndex = exports.detentsToSnapPoints = exports.DEFAULT_SELECT_INITIAL_DETENT = exports.DEFAULT_SELECT_DETENTS = exports.SELECT_THEME_ROLES = exports.SelectCloseButton = exports.Select = exports.RADIO_THEME_ROLES = exports.RadioField = exports.FormCloseButton = exports.Form = exports.FIELD_THEME_ROLES = exports.FieldTextarea = exports.FieldText = exports.filterLinkBlockGroups = exports.LinkBlocks = exports.buttonRadiusValue = exports.Button = exports.version = void 0;
+exports.version = "0.2.2";
 __exportStar(require("./theme"), exports);
 var Button_1 = require("./components/Button");
 Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return Button_1.Button; } });
@@ -63,5 +63,8 @@ Object.defineProperty(exports, "DEFAULT_SELECT_DETENTS", { enumerable: true, get
 Object.defineProperty(exports, "DEFAULT_SELECT_INITIAL_DETENT", { enumerable: true, get: function () { return Select_1.DEFAULT_SELECT_INITIAL_DETENT; } });
 Object.defineProperty(exports, "detentsToSnapPoints", { enumerable: true, get: function () { return Select_1.detentsToSnapPoints; } });
 Object.defineProperty(exports, "resolveSelectDetentIndex", { enumerable: true, get: function () { return Select_1.resolveSelectDetentIndex; } });
+var Slider_1 = require("./components/Slider");
+Object.defineProperty(exports, "Slider", { enumerable: true, get: function () { return Slider_1.Slider; } });
+Object.defineProperty(exports, "SLIDER_THEME_ROLES", { enumerable: true, get: function () { return Slider_1.SLIDER_THEME_ROLES; } });
 exports.components = __importStar(require("./components"));
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAa,QAAA,OAAO,GAAG,OAAO,CAAC;AAE/B,0CAAwB;AACxB,8CAK6B;AAJ3B,gGAAA,MAAM,OAAA;AAEN,2GAAA,iBAAiB,OAAA;AAGnB,sDAMiC;AAL/B,wGAAA,UAAU,OAAA;AACV,mHAAA,qBAAqB,OAAA;AAKvB,4CAQ4B;AAP1B,kGAAA,SAAS,OAAA;AACT,sGAAA,aAAa,OAAA;AACb,0GAAA,iBAAiB,OAAA;AAMnB,0CAI2B;AAHzB,4FAAA,IAAI,OAAA;AACJ,uGAAA,eAAe,OAAA;AAGjB,sDAMiC;AAL/B,wGAAA,UAAU,OAAA;AACV,+GAAA,iBAAiB,OAAA;AAKnB,8CAY6B;AAX3B,gGAAA,MAAM,OAAA;AACN,2GAAA,iBAAiB,OAAA;AACjB,4GAAA,kBAAkB,OAAA;AAClB,gHAAA,sBAAsB,OAAA;AACtB,uHAAA,6BAA6B,OAAA;AAC7B,6GAAA,mBAAmB,OAAA;AACnB,kHAAA,wBAAwB,OAAA;AAM1B,2DAA2C"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAa,QAAA,OAAO,GAAG,OAAO,CAAC;AAE/B,0CAAwB;AACxB,8CAK6B;AAJ3B,gGAAA,MAAM,OAAA;AAEN,2GAAA,iBAAiB,OAAA;AAGnB,sDAMiC;AAL/B,wGAAA,UAAU,OAAA;AACV,mHAAA,qBAAqB,OAAA;AAKvB,4CAQ4B;AAP1B,kGAAA,SAAS,OAAA;AACT,sGAAA,aAAa,OAAA;AACb,0GAAA,iBAAiB,OAAA;AAMnB,0CAI2B;AAHzB,4FAAA,IAAI,OAAA;AACJ,uGAAA,eAAe,OAAA;AAGjB,sDAMiC;AAL/B,wGAAA,UAAU,OAAA;AACV,+GAAA,iBAAiB,OAAA;AAKnB,8CAY6B;AAX3B,gGAAA,MAAM,OAAA;AACN,2GAAA,iBAAiB,OAAA;AACjB,4GAAA,kBAAkB,OAAA;AAClB,gHAAA,sBAAsB,OAAA;AACtB,uHAAA,6BAA6B,OAAA;AAC7B,6GAAA,mBAAmB,OAAA;AACnB,kHAAA,wBAAwB,OAAA;AAM1B,8CAK6B;AAJ3B,gGAAA,MAAM,OAAA;AACN,4GAAA,kBAAkB,OAAA;AAIpB,2DAA2C"}

package/docs/components/select.md

@@ -9,19 +9,24 @@ For `ThemeProvider`, see [theme provider and Button usage](./button.md). Design:
 Install in the app (Expo example):
 
 ```bash
-npx expo install @gorhom/bottom-sheet react-native-reanimated react-native-gesture-handler
+npx expo install @gorhom/bottom-sheet react-native-reanimated react-native-gesture-handler react-native-screens
 ```
 
-Wrap the app root with `GestureHandlerRootView` and `BottomSheetModalProvider`:
+On iOS, Select uses `FullWindowOverlay` so the sheet appears above React Navigation `fullScreenModal` screens.
+
+Wrap the app root with `GestureHandlerRootView` and `BottomSheetModalProvider`. Put **`BottomSheetModalProvider` inside `ThemeProvider`** so sheet content (portaled) still resolves theme colours:
 
 ```tsx
 import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
+import { ThemeProvider } from "@studio-piot/native-ui";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 
 export default function RootLayout() {
   return (
     <GestureHandlerRootView style={{ flex: 1 }}>
-      <BottomSheetModalProvider>{/* … */}</BottomSheetModalProvider>
+      <ThemeProvider colors={Colors}>
+        <BottomSheetModalProvider>{/* … */}</BottomSheetModalProvider>
+      </ThemeProvider>
     </GestureHandlerRootView>
   );
 }
@@ -31,7 +36,7 @@ Import `react-native-gesture-handler` at the top of the entry layout (before oth
 
 ## Theme roles
 
-Uses Field roles: `fieldBackground`, `fieldText`, `fieldPlaceholder`, `fieldLabel`, `fieldDescription`, `fieldBorder`, `fieldError`, plus `fieldRadioSelected` for the selected check / emphasis.
+Uses Field roles: `fieldBackground`, `fieldText`, `fieldPlaceholder`, `fieldLabel`, `fieldDescription`, `fieldBorder`, `fieldError`, plus **`fieldSelectSelected`** for the selected option check / label tint.
 
 ## Basic usage
 
@@ -59,9 +64,9 @@ Default is a dark disc with a white × (`SelectCloseButton`). Override:
 closeButton={(dismiss) => <YourClose onPress={dismiss} />}
 ```
 
-## Detents / snap points
+## Detents / height
 
-Default `detents={[0.25, 0.5, 0.75]}` (Gorhom snap `25%` / `50%` / `75%`), opens at `initialDetent={0.5}`.
+Sheet height follows content (`enableDynamicSizing`), capped by the largest `detents` fraction (default `0.75` of the window). Dragging cannot expand past content (or that cap when the list is long).
 
 ## Imports
 

package/docs/components/slider.md

@@ -0,0 +1,65 @@
+# Slider — usage
+
+Controlled slider with label on the left and a live formatted value on the top right. Track uses `@react-native-community/slider`. Your app owns form state.
+
+Design: [Slider design](../superpowers/specs/2026-09-25-slider-design.md).
+
+## Peer dependency
+
+```bash
+npx expo install @react-native-community/slider
+```
+
+## Theme roles
+
+| Usage | Role |
+|---|---|
+| Label | `fieldLabel` |
+| Value | `fieldText` |
+| Filled track + thumb | **`fieldSliderHighlight`** (apps must add) |
+| Unfilled track | `fieldBorder` |
+
+## Basic usage
+
+```tsx
+import { Slider } from "@studio-piot/native-ui";
+import { useState } from "react";
+
+export function EffortSlider() {
+  const [effort, setEffort] = useState(5);
+
+  return (
+    <Slider
+      label="Effort"
+      value={effort}
+      onChange={setEffort}
+      minimumValue={1}
+      maximumValue={10}
+      step={1}
+    />
+  );
+}
+```
+
+### Optional colour overrides
+
+| Prop | Default theme role |
+|---|---|
+| `labelColor` | `fieldLabel` |
+| `valueColor` | `fieldText` |
+| `highlightColor` | `fieldSliderHighlight` |
+| `trackColor` | `fieldBorder` |
+
+### Props
+
+| Prop | Type | Default | Notes |
+|---|---|---|---|
+| `value` | `number` | — | Required |
+| `onChange` | `(value: number) => void` | — | Required |
+| `minimumValue` | `number` | — | Required |
+| `maximumValue` | `number` | — | Required |
+| `step` | `number` | — | Optional; omit for continuous |
+| `label` | `string` | — | Optional |
+| `formatValue` | `(value: number) => string` | `String` | Value display |
+| `disabled` | `boolean` | `false` | |
+| `style` | view style | — | Outer column |

package/docs/superpowers/plans/2026-09-25-slider.md

@@ -0,0 +1,35 @@
+# Slider Implementation Plan
+
+> **For agentic workers:** Inline execution in session; checkboxes track progress.
+
+**Goal:** Ship controlled `Slider` (label left, formatted value top-right, community track) with `fieldSliderHighlight`, and wire Ribe create-activity Effort (1–10).
+
+**Architecture:** Presentational wrapper around `@react-native-community/slider`. Theme colours resolve like Field via `useResolvedFieldColor`. New role `fieldSliderHighlight` for filled track + thumb; unfilled track uses `fieldBorder`.
+
+**Tech Stack:** TypeScript, RN, `@react-native-community/slider` peer, Expo Ribe.
+
+## Global Constraints
+
+- Spec: `docs/superpowers/specs/2026-09-25-slider-design.md`
+- Peer `@react-native-community/slider`
+- No brand in package; no custom-drawn track; no Optimum migration
+- Commit only when the user asks
+
+## File map
+
+| File | Responsibility |
+|---|---|
+| `src/components/Slider/sliderThemeRoles.ts` | Role map |
+| `src/components/Slider/sliderThemeRoles.test.ts` | Role assertions |
+| `src/components/Slider/types.ts` | `SliderProps` |
+| `src/components/Slider/Slider.tsx` | Header + community Slider |
+| `src/components/Slider/index.ts` | Barrel |
+| Exports / README / `docs/components/slider.md` | Public surface |
+| Ribe `colors.ts` (+ test) | `fieldSliderHighlight` |
+| Ribe create-activity | Effort Slider |
+| Ribe `package.json` | Install community slider |
+
+## Tasks
+
+- [x] Package Slider + peer + docs + exports + unit test
+- [x] Ribe: theme role + Effort on create-activity + install peer

package/docs/superpowers/specs/2026-09-25-select-design.md

@@ -15,9 +15,9 @@ Ship a presentational **Select**: Field-like trigger that opens a Gorhom bottom
 |---|---|
 | API shape | Single `Select`: trigger + internal sheet |
 | Sheet library | `@gorhom/bottom-sheet` (`BottomSheetModal`) |
-| Snap points | Default `["25%", "50%", "75%"]` (from detents `[0.25, 0.5, 0.75]`); present at mid (`0.5` / index 1) |
+| Sheet height | Content-sized (`enableDynamicSizing`); max = largest detent (default 75% of window) |
 | Close control | `closeButton` slot; package default **DiscClose** (dark disc + white ×); Ribe uses default |
-| Colours | Field `field*` roles + `fieldRadioSelected` for selected check / emphasis |
+| Colours | Field `field*` roles + `fieldSelectSelected` for selected check / emphasis |
 | Trigger | Field-like chrome (label, description, error, chevron, radius) |
 | Options | `{ value, label, disabled? }[]`; scrollable when long |
 | Select behaviour | Tap option → `onChange(value)` + dismiss |
@@ -55,7 +55,7 @@ Select
 | Description under trigger | `fieldDescription` |
 | Trigger border / dividers | `fieldBorder` |
 | Error border + message | `fieldError` |
-| Selected option emphasis / check | `fieldRadioSelected` |
+| Selected option emphasis / check | `fieldSelectSelected` |
 
 Optional colour override props follow the Field pattern (explicit prop wins over theme role).
 

package/docs/superpowers/specs/2026-09-25-slider-design.md

@@ -0,0 +1,117 @@
+# Slider — design
+
+Date: 2026-09-25  
+Package: `@studio-piot/native-ui`  
+Status: approved  
+Apps: Ribe create-activity Effort field in the same pass
+
+## Goal
+
+Ship a presentational **Slider**: label on the left, live numeric value on the top right, community slider track below. Highlight (filled track + thumb) uses a dedicated theme role. Ribe adds an Effort control (1–10) on create-activity.
+
+## Decisions
+
+| Topic | Choice |
+|---|---|
+| API shape | Controlled: `value` + `onChange` + `minimumValue` / `maximumValue` |
+| Track library | `@react-native-community/slider` (peer) |
+| Step | Optional `step`; omit = continuous |
+| Value display | `formatValue?: (value: number) => string`; default `String(value)` |
+| Layout | Header row (label left, value right); track full width below |
+| Min/max UI | Props only — no captions under the track |
+| Highlight colour | New theme role `fieldSliderHighlight` |
+| Unfilled track | `fieldBorder` |
+| Label / value text | `fieldLabel` / `fieldText` |
+| Disabled | Optional `disabled` → reduced opacity, non-interactive |
+| Brand coupling | None in the package |
+| Optimum LogForm | Out of scope this pass |
+
+## Architecture
+
+```
+Slider
+  ├── header row
+  │     ├── label (optional)
+  │     └── formatValue(value)
+  └── @react-native-community/slider
+        ├── minimumTrackTintColor / thumb → fieldSliderHighlight
+        └── maximumTrackTintColor → fieldBorder
+```
+
+- Public export: `Slider` (+ types, `SLIDER_THEME_ROLES`).
+- Controlled only.
+- Peer: `@react-native-community/slider` (document in usage docs; matching `devDependency` for types/build).
+
+## Theme roles
+
+| Usage | Theme role |
+|---|---|
+| Label | `fieldLabel` |
+| Value | `fieldText` |
+| Filled track + thumb | `fieldSliderHighlight` (**new**) |
+| Unfilled track | `fieldBorder` |
+
+Apps must add `fieldSliderHighlight` to light and dark maps. Ribe uses flare for both schemes.
+
+### Optional colour overrides
+
+| Prop | Default role |
+|---|---|
+| `labelColor` | `fieldLabel` |
+| `valueColor` | `fieldText` |
+| `highlightColor` | `fieldSliderHighlight` |
+| `trackColor` | `fieldBorder` |
+
+## Props
+
+```ts
+type SliderProps = {
+  value: number;
+  onChange: (value: number) => void;
+  minimumValue: number;
+  maximumValue: number;
+  step?: number;
+  label?: string;
+  formatValue?: (value: number) => string;
+  disabled?: boolean;
+  labelColor?: string;
+  valueColor?: string;
+  highlightColor?: string;
+  trackColor?: string;
+  style?: StyleProp<ViewStyle>;
+};
+```
+
+| Prop | Notes |
+|---|---|
+| `value` / `onChange` | Required. Controlled |
+| `minimumValue` / `maximumValue` | Required. Passed through to community Slider |
+| `step` | Optional; omit for continuous |
+| `label` | Optional; omitted → value still shows top-right |
+| `formatValue` | Default `String(value)` |
+| `disabled` | Opacity ~0.4; slider not interactive |
+
+## Layout
+
+- Full width of the parent
+- Header: `flexDirection: "row"`, label `flex: 1`, value right-aligned; font sizes aligned with Field (label 13 / semibold, value 17)
+- Gap ~6 between header and track (Field-like)
+- Track height from community Slider default (~40pt hit area)
+
+## Accessibility
+
+- Community Slider exposes the native control
+- When `label` is set, pass it as `accessibilityLabel` on the slider (or combine label + formatted value)
+- `accessibilityState.disabled` when `disabled`
+
+## Ribe migration
+
+- `Colors` light/dark: `fieldSliderHighlight: flare`
+- create-activity: **Effort** between Type and Notes — `minimumValue={1}`, `maximumValue={10}`, `step={1}`, default value `5`, `formatValue={(n) => String(n)}`
+- Install peer `@react-native-community/slider` (Expo-compatible version)
+
+## Out of scope
+
+- Custom-drawn track / dual thumbs / marks
+- Migrating Optimum LogForm sliders
+- Error / description helpers (can follow Field later if needed)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studio-piot/native-ui",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Shared React Native components for Studio Piot apps.",
   "homepage": "https://github.com/Studio-Piot/studio-native-ui#readme",
   "bugs": {
@@ -51,12 +51,14 @@
   },
   "peerDependencies": {
     "@gorhom/bottom-sheet": "^5.2.14",
+    "@react-native-community/slider": "^5.2.0",
     "react": ">=19.0.0",
     "react-native": ">=0.76.0",
     "react-native-gesture-handler": "^2.32.0",
     "react-native-keyboard-controller": ">=1.14.0",
     "react-native-reanimated": "^4.5.1",
-    "react-native-safe-area-context": ">=4.0.0"
+    "react-native-safe-area-context": ">=4.0.0",
+    "react-native-screens": ">=4.0.0"
   },
   "scripts": {
     "test": "node --experimental-strip-types --test 'src/**/*.test.ts'",
@@ -68,12 +70,14 @@
   },
   "devDependencies": {
     "@gorhom/bottom-sheet": "^5.2.14",
+    "@react-native-community/slider": "^5.2.0",
     "@types/react": "^19.2.2",
     "react-native": "^0.86.3",
     "react-native-gesture-handler": "^2.32.0",
     "react-native-keyboard-controller": "1.21.9",
     "react-native-reanimated": "^4.5.1",
     "react-native-safe-area-context": "~5.7.0",
+    "react-native-screens": "~4.26.0",
     "typescript": "^5.9.3"
   }
 }

package/src/components/Select/Select.tsx

@@ -5,26 +5,41 @@ import {
   type ElementRef,
   type ReactNode,
 } from "react";
-import { Pressable, StyleSheet, Text, View } from "react-native";
+import {
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  useWindowDimensions,
+  View,
+} from "react-native";
 import {
   BottomSheetBackdrop,
+  BottomSheetHandle,
   BottomSheetModal,
   BottomSheetScrollView,
   type BottomSheetBackdropProps,
+  type BottomSheetHandleProps,
 } from "@gorhom/bottom-sheet";
+import { FullWindowOverlay } from "react-native-screens";
 import { buttonRadiusValue } from "../Button/buttonRadius";
 import { useResolvedFieldColor } from "../Field/useResolvedFieldColor";
-import {
-  DEFAULT_SELECT_DETENTS,
-  DEFAULT_SELECT_INITIAL_DETENT,
-  detentsToSnapPoints,
-  resolveSelectDetentIndex,
-} from "./resolveSelectDetentIndex";
+import { useThemeColor } from "../../theme/useThemeColor";
+import { DEFAULT_SELECT_DETENTS } from "./resolveSelectDetentIndex";
 import { SelectCloseButton } from "./SelectCloseButton";
 import { SELECT_THEME_ROLES } from "./selectThemeRoles";
 import type { SelectOption, SelectProps } from "./types";
 
 const BACKDROP_OPACITY = 0.72;
+const SHEET_TOP_RADIUS = 20;
+
+/** Renders the sheet above React Navigation native modals (iOS). */
+function SheetContainer({ children }: { children?: ReactNode }) {
+  if (Platform.OS === "ios") {
+    return <FullWindowOverlay>{children}</FullWindowOverlay>;
+  }
+  return <>{children}</>;
+}
 
 export function Select({
   value,
@@ -36,8 +51,9 @@ export function Select({
   error,
   sheetTitle,
   closeButton,
+  /** Max sheet height as a fraction of the window (largest value wins). Default `[0.25, 0.5, 0.75]` → 75%. */
   detents = [...DEFAULT_SELECT_DETENTS],
-  initialDetent = DEFAULT_SELECT_INITIAL_DETENT,
+  initialDetent: _initialDetent,
   radius = "xl",
   editable = true,
   backgroundColor: backgroundColorProp,
@@ -51,6 +67,7 @@ export function Select({
   style,
 }: SelectProps) {
   const modalRef = useRef<ElementRef<typeof BottomSheetModal>>(null);
+  const { height: windowHeight } = useWindowDimensions();
 
   const backgroundColor = useResolvedFieldColor(
     backgroundColorProp,
@@ -84,6 +101,9 @@ export function Select({
     selectedColorProp,
     SELECT_THEME_ROLES.selectedColor,
   );
+  // Resolved on the trigger tree (has ThemeProvider), then passed into the portal.
+  const closeDiscColor = useThemeColor("text");
+  const closeIconColor = useThemeColor("background");
 
   const hasError = Boolean(error);
   const selected = options.find((option) => option.value === value);
@@ -91,8 +111,11 @@ export function Select({
   const isPlaceholder = selected == null;
   const borderRadius = buttonRadiusValue(radius);
   const title = sheetTitle ?? label ?? "Select";
-  const presentIndex = resolveSelectDetentIndex(detents, initialDetent);
-  const snapPoints = useMemo(() => detentsToSnapPoints(detents), [detents]);
+
+  const maxDynamicContentSize = useMemo(() => {
+    const maxDetent = Math.max(...detents, 0.75);
+    return Math.round(windowHeight * maxDetent);
+  }, [detents, windowHeight]);
 
   const dismiss = useCallback(() => {
     modalRef.current?.dismiss();
@@ -119,7 +142,52 @@ export function Select({
   const resolvedClose: ReactNode =
     typeof closeButton === "function"
       ? closeButton(dismiss)
-      : (closeButton ?? <SelectCloseButton onPress={dismiss} />);
+      : (closeButton ?? (
+          <SelectCloseButton
+            backgroundColor={closeDiscColor}
+            iconColor={closeIconColor}
+            onPress={dismiss}
+          />
+        ));
+
+  // Header lives in the handle so it stays fixed; only options scroll.
+  const renderHandle = useCallback(
+    (props: BottomSheetHandleProps) => (
+      <View
+        style={[
+          styles.handleRoot,
+          {
+            backgroundColor,
+            borderTopLeftRadius: SHEET_TOP_RADIUS,
+            borderTopRightRadius: SHEET_TOP_RADIUS,
+          },
+        ]}
+      >
+        <BottomSheetHandle
+          {...props}
+          indicatorStyle={{
+            backgroundColor: placeholderColor,
+            opacity: 0.9,
+          }}
+        />
+        <View style={styles.header}>
+          <Text style={[styles.sheetTitle, { color: textColor, flex: 1 }]}>
+            {title}
+          </Text>
+          {resolvedClose}
+        </View>
+        <View style={[styles.headerDivider, { backgroundColor: borderColor }]} />
+      </View>
+    ),
+    [
+      backgroundColor,
+      borderColor,
+      placeholderColor,
+      resolvedClose,
+      textColor,
+      title,
+    ],
+  );
 
   const onSelect = (option: SelectOption) => {
     if (option.disabled) return;
@@ -176,67 +244,62 @@ export function Select({
       <BottomSheetModal
         ref={modalRef}
         backdropComponent={renderBackdrop}
-        backgroundStyle={{ backgroundColor }}
-        enablePanDownToClose
-        handleIndicatorStyle={{
-          backgroundColor: placeholderColor,
-          opacity: 0.9,
+        backgroundStyle={{
+          backgroundColor,
+          borderTopLeftRadius: SHEET_TOP_RADIUS,
+          borderTopRightRadius: SHEET_TOP_RADIUS,
         }}
-        index={presentIndex}
-        snapPoints={snapPoints}
+        containerComponent={SheetContainer}
+        enableDynamicSizing
+        enablePanDownToClose
+        handleComponent={renderHandle}
+        handleStyle={styles.handleShell}
+        maxDynamicContentSize={maxDynamicContentSize}
+        stackBehavior="push"
       >
-        <BottomSheetScrollView contentContainerStyle={styles.sheetContent}>
-          <View style={styles.header}>
-            <Text style={[styles.sheetTitle, { color: textColor, flex: 1 }]}>
-              {title}
-            </Text>
-            {resolvedClose}
-          </View>
+        <BottomSheetScrollView
+          contentContainerStyle={styles.sheetContent}
+          enableFooterMarginAdjustment={false}
+        >
           {options.length === 0 ? (
             <Text style={[styles.empty, { color: placeholderColor }]}>
               No options
             </Text>
           ) : (
-            options.map((option, index) => {
+            options.map((option) => {
               const isSelected = option.value === value;
               return (
-                <View key={option.value}>
-                  {index > 0 ? (
-                    <View
-                      style={[styles.divider, { backgroundColor: borderColor }]}
-                    />
-                  ) : null}
-                  <Pressable
-                    accessibilityRole="button"
-                    accessibilityState={{
-                      selected: isSelected,
-                      disabled: !!option.disabled,
-                    }}
-                    disabled={option.disabled}
-                    onPress={() => onSelect(option)}
+                <Pressable
+                  key={option.value}
+                  accessibilityRole="button"
+                  accessibilityState={{
+                    selected: isSelected,
+                    disabled: !!option.disabled,
+                  }}
+                  disabled={option.disabled}
+                  onPress={() => onSelect(option)}
+                  style={[
+                    styles.option,
+                    option.disabled && styles.optionBlocked,
+                  ]}
+                >
+                  <Text
                     style={[
-                      styles.option,
-                      option.disabled && styles.optionBlocked,
+                      styles.optionLabel,
+                      {
+                        color: isSelected ? selectedColor : textColor,
+                        flex: 1,
+                      },
                     ]}
                   >
-                    <Text
-                      style={[
-                        styles.optionLabel,
-                        {
-                          color: isSelected ? selectedColor : textColor,
-                          flex: 1,
-                        },
-                      ]}
-                    >
-                      {option.label}
+                    {option.label}
+                  </Text>
+                  {isSelected ? (
+                    <Text style={[styles.check, { color: selectedColor }]}>
+                      ✓
                     </Text>
-                    {isSelected ? (
-                      <Text style={[styles.check, { color: selectedColor }]}>
-                        ✓
-                      </Text>
-                    ) : null}
-                  </Pressable>
-                </View>
+                  ) : null}
+                </Pressable>
               );
             })
           )}
@@ -275,10 +338,17 @@ const styles = StyleSheet.create({
     fontSize: 22,
     fontWeight: "300",
     lineHeight: 24,
+    transform: [{ rotate: "90deg" }],
   },
   helper: {
     fontSize: 13,
   },
+  handleShell: {
+    paddingBottom: 0,
+  },
+  handleRoot: {
+    overflow: "hidden",
+  },
   sheetContent: {
     paddingBottom: 24,
   },
@@ -287,9 +357,12 @@ const styles = StyleSheet.create({
     alignItems: "center",
     gap: 12,
     paddingHorizontal: 16,
-    paddingTop: 8,
+    paddingTop: 4,
     paddingBottom: 12,
   },
+  headerDivider: {
+    height: StyleSheet.hairlineWidth,
+  },
   sheetTitle: {
     fontSize: 17,
     fontWeight: "600",
@@ -316,8 +389,4 @@ const styles = StyleSheet.create({
     fontSize: 17,
     fontWeight: "600",
   },
-  divider: {
-    height: StyleSheet.hairlineWidth,
-    marginHorizontal: 16,
-  },
 });