@studio-piot/native-ui 0.1.0 → 0.2.0

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

@@ -7,22 +7,24 @@ Apps: Ribe create-activity Type field in the same pass
 
 ## Goal
 
-Ship a presentational **Select**: Field-like trigger that opens a native bottom sheet of options (TrueSheet). Highlight the selected option; choosing one updates value and dismisses the sheet. Drag handle, dimmed backdrop, and snap heights feel like system UI (Strava-style grabber). Ribe wires Type of activity to Select with a glass close control.
+Ship a presentational **Select**: Field-like trigger that opens a Gorhom bottom sheet of options. Highlight the selected option; choosing one updates value and dismisses the sheet. Grabber, dimmed backdrop, and snap heights match the spike UX. Ribe wires Type of activity to Select; default close is a dark disc with white cross (not glass Cancel).
 
 ## Decisions
 
 | Topic | Choice |
 |---|---|
 | API shape | Single `Select`: trigger + internal sheet |
-| Sheet library | `@lodev09/react-native-true-sheet` (native UIKit / Material) |
-| Detents | Default `[0.25, 0.5, 0.75]`; present at `0.5` |
-| Close control | `closeButton` slot; package default plain Cancel; Ribe passes glass |
+| 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) |
+| Close control | `closeButton` slot; package default **DiscClose** (dark disc + white ×); Ribe uses default |
 | Colours | Field `field*` roles + `fieldRadioSelected` 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 |
+| App provider | App must wrap with `GestureHandlerRootView` + `BottomSheetModalProvider` |
 | Icons / search / grids | Out of scope |
-| Optimum migration | Out of scope this pass (CustomPicker remains until a later PR) |
+| TrueSheet | Not used; no TrueSheet peer or native bits |
+| Optimum migration | Out of scope this pass |
 | Brand coupling | None in the package |
 
 ## Architecture
@@ -30,24 +32,25 @@ Ship a presentational **Select**: Field-like trigger that opens a native bottom
 ```
 Select
   ├── trigger (Field-like Pressable)
-  └── TrueSheet
-        ├── grabber (system)
+  └── BottomSheetModal
+        ├── BottomSheetBackdrop (opacity 0.72)
+        ├── handle / grabber
         ├── header (title + closeButton)
-        └── scrollable options
+        └── BottomSheetScrollView options
               └── row (label + check when selected)
 ```
 
-- Public export: `Select` (+ types). Default close control may be a small internal component (plain Cancel), not required to be public.
+- Public export: `Select` (+ types). Default close is `SelectCloseButton` (DiscClose).
 - Controlled only: `value` + `onChange` + `options`.
-- Peer dependency: `@lodev09/react-native-true-sheet` (document in usage docs; matching `devDependency` for types/build).
+- Peer dependencies: `@gorhom/bottom-sheet`, `react-native-reanimated`, `react-native-gesture-handler` (plus existing RN peers).
 
 ## Theme roles
 
 | Usage | Theme role |
 |---|---|
-| Trigger / sheet list ground | `fieldBackground` |
+| Trigger / sheet ground | `fieldBackground` |
 | Trigger value / option label | `fieldText` |
-| Placeholder / chevron | `fieldPlaceholder` |
+| Placeholder / chevron / handle | `fieldPlaceholder` |
 | Label above trigger | `fieldLabel` |
 | Description under trigger | `fieldDescription` |
 | Trigger border / dividers | `fieldBorder` |
@@ -65,6 +68,10 @@ type SelectOption = {
   disabled?: boolean;
 };
 
+type SelectCloseButton =
+  | ReactNode
+  | ((dismiss: () => void) => ReactNode);
+
 type SelectProps = {
   value: string | null;
   onChange: (value: string) => void;
@@ -74,7 +81,7 @@ type SelectProps = {
   description?: string;
   error?: string;
   sheetTitle?: string;
-  closeButton?: ReactNode;
+  closeButton?: SelectCloseButton;
   detents?: number[];
   initialDetent?: number;
   radius?: ButtonRadius;
@@ -88,11 +95,11 @@ type SelectProps = {
 |---|---|
 | `value` | Controlled; `null` / unmatched → show placeholder |
 | `onChange` | Fired with option `value` on row press |
-| `options` | Empty list: trigger still opens an empty sheet (or no-op open — prefer open with empty state text “No options”) |
+| `options` | Empty list: open sheet with “No options” empty state |
 | `sheetTitle` | Header title; default `label` or `"Select"` |
-| `closeButton` | Render prop / node for header trailing close; default plain Cancel that dismisses |
-| `detents` | Default `[0.25, 0.5, 0.75]` |
-| `initialDetent` | Default `0.5` (must be one of `detents`) |
+| `closeButton` | Header trailing close; default DiscClose that dismisses |
+| `detents` | Fractions `0–1`; default `[0.25, 0.5, 0.75]` → Gorhom snap `%` |
+| `initialDetent` | Default `0.5` (must be one of `detents` or falls back to index 0) |
 | `radius` | Trigger radius; default `"xl"` |
 | `editable` | `false` → reduced opacity, no open |
 
@@ -107,58 +114,23 @@ Aligned with Field:
 
 ## Sheet behaviour
 
-- Present TrueSheet on trigger press (when `editable`)
-- System grabber; dimmed / fading backdrop (library default)
-- Header: title + `closeButton` (or default Cancel)
-- Scrollable option list; row min height ~52; selected row uses `fieldRadioSelected` for check (and optional label tint)
+- Present `BottomSheetModal` on trigger press (when `editable`)
+- Backdrop opacity `0.72`, press closes
+- Handle indicator; `enablePanDownToClose`
+- Header: title + `closeButton` (or default DiscClose)
+- Scrollable option list; row min height ~52; selected row uses `fieldRadioSelected` for check (and label tint)
 - Row press: `onChange` + dismiss
-- Dismiss also via grabber drag / backdrop / close control
-- No search field, no category grids, no leading sport icons in this pass
+- Dismiss also via pan-down / backdrop / close control
 
 ## Accessibility
 
-- Trigger: `accessibilityRole="button"`, label from `label` / placeholder; announce current value when set
-- Options: `accessibilityRole="button"` (or `menuitem` if we use a menu pattern — prefer button + `accessibilityState.selected`)
-- Close control: button with accessible name “Cancel” / “Close”
-
-## App work (Ribe)
-
-1. `npx expo install @lodev09/react-native-true-sheet` (or pnpm equivalent)
-2. Create-activity: replace Type `FieldText` with `Select`
-   - Options: Ride, Run, Swim, Walk, Hike (values lowercase slug or same as label — pick stable string values e.g. `ride`, `run`, …)
-   - `error` when empty (same validation copy intent as today)
-   - `closeButton` that dismisses the sheet using glass `FormCloseButton` (needs a dismiss callback from Select — either `closeButton` as render prop `(dismiss) => ReactNode` **or** Select clones/passes dismiss via slot convention)
-
-### Close slot + dismiss
-
-Prefer **render prop** so the app can wire glass Cancel correctly:
-
-```ts
-closeButton?: ReactNode | ((dismiss: () => void) => ReactNode);
-```
-
-If `ReactNode` only, the default Cancel works but glass Cancel cannot call dismiss unless Select exposes an imperative API. **Decision: support function form** `(dismiss) => ReactNode`, and also accept a static `ReactNode` for simple cases (static node cannot dismiss unless it uses an internal context — for static nodes, wrap with Pressable only in default Cancel).
-
-Ribe usage:
-
-```tsx
-closeButton={(dismiss) => <FormCloseButton onPress={dismiss} />}
-```
-
-3. Keep Name / Notes as Field; form submit still gated on name (and optionally require type — keep current “type empty → error” UX).
+- Trigger: `accessibilityRole="button"`, label includes field label + current display, hint that it opens options
+- Option rows: `accessibilityRole="button"`, `accessibilityState.selected`
+- Close: `accessibilityLabel="Close"`
 
 ## Out of scope
 
-- Strava “Top Sports” horizontal chips / search
-- Per-option icons
-- Migrating Optimum `CustomPicker` call sites
-- Multi-select
-- Liquid glass Cancel inside the package
-- New `select*` theme roles
-
-## Success criteria
-
-- Package exports `Select` with usage docs and TrueSheet peer documented
-- Sheet: grabber, fade backdrop, detents ¼ / ½ / ¾, open at ½, scrollable options, select-to-dismiss
-- Ribe create-activity Type uses Select + glass close
-- `npm test` / `npm run build` (package) and Ribe `pnpm typecheck` pass
+- Multi-select, search, icons, section headers
+- TrueSheet / RN Modal sheet implementations
+- Migrating Optimum CustomPicker
+- Publishing / EAS workflow changes beyond peers + Ribe wire

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studio-piot/native-ui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Shared React Native components for Studio Piot apps.",
   "homepage": "https://github.com/Studio-Piot/studio-native-ui#readme",
   "bugs": {
@@ -50,10 +50,12 @@
     "access": "public"
   },
   "peerDependencies": {
-    "@lodev09/react-native-true-sheet": ">=3.7.0",
+    "@gorhom/bottom-sheet": "^5.2.14",
     "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"
   },
   "scripts": {
@@ -65,10 +67,12 @@
     "prepublishOnly": "npm run build"
   },
   "devDependencies": {
-    "@lodev09/react-native-true-sheet": "3.11.15",
+    "@gorhom/bottom-sheet": "^5.2.14",
     "@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",
     "typescript": "^5.9.3"
   }

package/src/components/Select/Select.tsx

@@ -1,17 +1,31 @@
-import { useCallback, useRef, type ReactNode } from "react";
+import {
+  useCallback,
+  useMemo,
+  useRef,
+  type ElementRef,
+  type ReactNode,
+} from "react";
 import { Pressable, StyleSheet, Text, View } from "react-native";
-import { TrueSheet } from "@lodev09/react-native-true-sheet";
+import {
+  BottomSheetBackdrop,
+  BottomSheetModal,
+  BottomSheetScrollView,
+  type BottomSheetBackdropProps,
+} from "@gorhom/bottom-sheet";
 import { buttonRadiusValue } from "../Button/buttonRadius";
 import { useResolvedFieldColor } from "../Field/useResolvedFieldColor";
 import {
   DEFAULT_SELECT_DETENTS,
   DEFAULT_SELECT_INITIAL_DETENT,
+  detentsToSnapPoints,
   resolveSelectDetentIndex,
 } from "./resolveSelectDetentIndex";
 import { SelectCloseButton } from "./SelectCloseButton";
 import { SELECT_THEME_ROLES } from "./selectThemeRoles";
 import type { SelectOption, SelectProps } from "./types";
 
+const BACKDROP_OPACITY = 0.72;
+
 export function Select({
   value,
   onChange,
@@ -36,7 +50,7 @@ export function Select({
   selectedColor: selectedColorProp,
   style,
 }: SelectProps) {
-  const sheetRef = useRef<TrueSheet>(null);
+  const modalRef = useRef<ElementRef<typeof BottomSheetModal>>(null);
 
   const backgroundColor = useResolvedFieldColor(
     backgroundColorProp,
@@ -78,15 +92,29 @@ export function Select({
   const borderRadius = buttonRadiusValue(radius);
   const title = sheetTitle ?? label ?? "Select";
   const presentIndex = resolveSelectDetentIndex(detents, initialDetent);
+  const snapPoints = useMemo(() => detentsToSnapPoints(detents), [detents]);
 
   const dismiss = useCallback(() => {
-    void sheetRef.current?.dismiss();
+    modalRef.current?.dismiss();
   }, []);
 
   const present = useCallback(() => {
     if (!editable) return;
-    void sheetRef.current?.present(presentIndex);
-  }, [editable, presentIndex]);
+    modalRef.current?.present();
+  }, [editable]);
+
+  const renderBackdrop = useCallback(
+    (props: BottomSheetBackdropProps) => (
+      <BottomSheetBackdrop
+        {...props}
+        appearsOnIndex={0}
+        disappearsOnIndex={-1}
+        opacity={BACKDROP_OPACITY}
+        pressBehavior="close"
+      />
+    ),
+    [],
+  );
 
   const resolvedClose: ReactNode =
     typeof closeButton === "function"
@@ -145,68 +173,75 @@ export function Select({
         </Text>
       ) : null}
 
-      <TrueSheet
-        ref={sheetRef}
-        backgroundColor={backgroundColor}
-        cornerRadius={buttonRadiusValue("xl")}
-        detents={detents}
-        grabber
-        scrollable
+      <BottomSheetModal
+        ref={modalRef}
+        backdropComponent={renderBackdrop}
+        backgroundStyle={{ backgroundColor }}
+        enablePanDownToClose
+        handleIndicatorStyle={{
+          backgroundColor: placeholderColor,
+          opacity: 0.9,
+        }}
+        index={presentIndex}
+        snapPoints={snapPoints}
       >
-        <View style={styles.sheetHeader}>
-          <Text
-            accessibilityRole="header"
-            numberOfLines={1}
-            style={[styles.sheetTitle, { color: textColor, flex: 1 }]}
-          >
-            {title}
-          </Text>
-          {resolvedClose}
-        </View>
-        {options.length === 0 ? (
-          <Text style={[styles.empty, { color: placeholderColor }]}>
-            No options
-          </Text>
-        ) : (
-          options.map((item) => {
-            const isSelected = item.value === value;
-            return (
-              <Pressable
-                key={item.value}
-                accessibilityRole="button"
-                accessibilityState={{
-                  selected: isSelected,
-                  disabled: !!item.disabled,
-                }}
-                disabled={item.disabled}
-                onPress={() => onSelect(item)}
-                style={[styles.option, item.disabled && styles.blocked]}
-              >
-                <Text
-                  style={[
-                    styles.optionLabel,
-                    {
-                      color: isSelected ? selectedColor : textColor,
-                      flex: 1,
-                    },
-                  ]}
-                >
-                  {item.label}
-                </Text>
-                {isSelected ? (
-                  <Text
-                    accessibilityElementsHidden
-                    importantForAccessibility="no"
-                    style={[styles.check, { color: selectedColor }]}
+        <BottomSheetScrollView contentContainerStyle={styles.sheetContent}>
+          <View style={styles.header}>
+            <Text style={[styles.sheetTitle, { color: textColor, flex: 1 }]}>
+              {title}
+            </Text>
+            {resolvedClose}
+          </View>
+          {options.length === 0 ? (
+            <Text style={[styles.empty, { color: placeholderColor }]}>
+              No options
+            </Text>
+          ) : (
+            options.map((option, index) => {
+              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)}
+                    style={[
+                      styles.option,
+                      option.disabled && styles.optionBlocked,
+                    ]}
                   >
-                    ✓
-                  </Text>
-                ) : null}
-              </Pressable>
-            );
-          })
-        )}
-      </TrueSheet>
+                    <Text
+                      style={[
+                        styles.optionLabel,
+                        {
+                          color: isSelected ? selectedColor : textColor,
+                          flex: 1,
+                        },
+                      ]}
+                    >
+                      {option.label}
+                    </Text>
+                    {isSelected ? (
+                      <Text style={[styles.check, { color: selectedColor }]}>
+                        ✓
+                      </Text>
+                    ) : null}
+                  </Pressable>
+                </View>
+              );
+            })
+          )}
+        </BottomSheetScrollView>
+      </BottomSheetModal>
     </View>
   );
 }
@@ -225,6 +260,7 @@ const styles = StyleSheet.create({
   },
   trigger: {
     minHeight: 48,
+    width: "100%",
     borderWidth: 1,
     paddingHorizontal: 14,
     paddingVertical: 12,
@@ -239,12 +275,14 @@ const styles = StyleSheet.create({
     fontSize: 22,
     fontWeight: "300",
     lineHeight: 24,
-    transform: [{ rotate: "90deg" }],
   },
   helper: {
     fontSize: 13,
   },
-  sheetHeader: {
+  sheetContent: {
+    paddingBottom: 24,
+  },
+  header: {
     flexDirection: "row",
     alignItems: "center",
     gap: 12,
@@ -257,10 +295,9 @@ const styles = StyleSheet.create({
     fontWeight: "600",
   },
   empty: {
-    fontSize: 17,
+    fontSize: 15,
     paddingHorizontal: 16,
-    paddingVertical: 24,
-    textAlign: "center",
+    paddingVertical: 20,
   },
   option: {
     minHeight: 52,
@@ -269,6 +306,9 @@ const styles = StyleSheet.create({
     alignItems: "center",
     gap: 12,
   },
+  optionBlocked: {
+    opacity: 0.4,
+  },
   optionLabel: {
     fontSize: 17,
   },
@@ -276,4 +316,8 @@ const styles = StyleSheet.create({
     fontSize: 17,
     fontWeight: "600",
   },
+  divider: {
+    height: StyleSheet.hairlineWidth,
+    marginHorizontal: 16,
+  },
 });

package/src/components/Select/SelectCloseButton.tsx

@@ -1,19 +1,36 @@
 import { Pressable, StyleSheet, Text } from "react-native";
 import { useThemeColor } from "../../theme/useThemeColor";
 
+/** Default Select sheet close: filled disc + contrasting cross. */
 export function SelectCloseButton({ onPress }: { onPress: () => void }) {
-  const text = useThemeColor("text");
+  const disc = useThemeColor("text");
+  const cross = useThemeColor("background");
 
   return (
-    <Pressable accessibilityRole="button" hitSlop={8} onPress={onPress}>
-      <Text style={[styles.label, { color: text }]}>Cancel</Text>
+    <Pressable
+      accessibilityLabel="Close"
+      accessibilityRole="button"
+      hitSlop={8}
+      onPress={onPress}
+      style={[styles.disc, { backgroundColor: disc }]}
+    >
+      <Text style={[styles.discX, { color: cross }]}>×</Text>
     </Pressable>
   );
 }
 
 const styles = StyleSheet.create({
-  label: {
-    fontSize: 17,
+  disc: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  discX: {
+    fontSize: 20,
     fontWeight: "600",
+    lineHeight: 22,
+    marginTop: -1,
   },
 });

package/src/components/Select/index.ts

@@ -3,11 +3,15 @@ export { SelectCloseButton } from "./SelectCloseButton";
 export {
   DEFAULT_SELECT_DETENTS,
   DEFAULT_SELECT_INITIAL_DETENT,
+  detentsToSnapPoints,
   resolveSelectDetentIndex,
 } from "./resolveSelectDetentIndex";
-export { SELECT_THEME_ROLES, type SelectThemeColorProp } from "./selectThemeRoles";
+export {
+  SELECT_THEME_ROLES,
+  type SelectThemeColorProp,
+} from "./selectThemeRoles";
 export type {
-  SelectCloseButton as SelectCloseButtonProp,
+  SelectCloseButton as SelectCloseButtonSlot,
   SelectOption,
   SelectProps,
 } from "./types";

package/src/components/Select/resolveSelectDetentIndex.test.ts

@@ -3,13 +3,17 @@ import { describe, it } from "node:test";
 import {
   DEFAULT_SELECT_DETENTS,
   DEFAULT_SELECT_INITIAL_DETENT,
+  detentsToSnapPoints,
   resolveSelectDetentIndex,
 } from "./resolveSelectDetentIndex.ts";
 
 describe("resolveSelectDetentIndex", () => {
   it("returns the index of the initial detent", () => {
     assert.equal(
-      resolveSelectDetentIndex(DEFAULT_SELECT_DETENTS, DEFAULT_SELECT_INITIAL_DETENT),
+      resolveSelectDetentIndex(
+        DEFAULT_SELECT_DETENTS,
+        DEFAULT_SELECT_INITIAL_DETENT,
+      ),
       1,
     );
   });
@@ -18,3 +22,13 @@ describe("resolveSelectDetentIndex", () => {
     assert.equal(resolveSelectDetentIndex([0.25, 0.5, 0.75], 0.9), 0);
   });
 });
+
+describe("detentsToSnapPoints", () => {
+  it("maps fractions to percentage snap points", () => {
+    assert.deepEqual(detentsToSnapPoints(DEFAULT_SELECT_DETENTS), [
+      "25%",
+      "50%",
+      "75%",
+    ]);
+  });
+});

package/src/components/Select/resolveSelectDetentIndex.ts

@@ -14,3 +14,8 @@ export function resolveSelectDetentIndex(
   const index = detents.indexOf(initial);
   return index >= 0 ? index : 0;
 }
+
+/** Convert detent fractions (0–1) to Gorhom snap-point percentage strings. */
+export function detentsToSnapPoints(detents: readonly number[]): string[] {
+  return detents.map((detent) => `${Math.round(detent * 100)}%`);
+}

package/src/components/Select/selectThemeRoles.test.ts

@@ -0,0 +1,16 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { SELECT_THEME_ROLES } from "./selectThemeRoles.ts";
+
+describe("SELECT_THEME_ROLES", () => {
+  it("maps colour props to Field roles plus fieldRadioSelected", () => {
+    assert.equal(SELECT_THEME_ROLES.backgroundColor, "fieldBackground");
+    assert.equal(SELECT_THEME_ROLES.textColor, "fieldText");
+    assert.equal(SELECT_THEME_ROLES.placeholderColor, "fieldPlaceholder");
+    assert.equal(SELECT_THEME_ROLES.labelColor, "fieldLabel");
+    assert.equal(SELECT_THEME_ROLES.descriptionColor, "fieldDescription");
+    assert.equal(SELECT_THEME_ROLES.borderColor, "fieldBorder");
+    assert.equal(SELECT_THEME_ROLES.errorColor, "fieldError");
+    assert.equal(SELECT_THEME_ROLES.selectedColor, "fieldRadioSelected");
+  });
+});

package/src/components/Select/types.ts

@@ -21,9 +21,11 @@ export type SelectProps = {
   description?: string;
   error?: string;
   sheetTitle?: string;
-  /** Plain Cancel by default. Pass `(dismiss) => <Glass onPress={dismiss} />` for app chrome. */
+  /** DiscClose by default. Pass `(dismiss) => <YourClose onPress={dismiss} />` to override. */
   closeButton?: SelectCloseButton;
+  /** Detent fractions 0–1; mapped to Gorhom snap `%`. Default `[0.25, 0.5, 0.75]`. */
   detents?: number[];
+  /** Which detent to open at. Default `0.5`. */
   initialDetent?: number;
   radius?: ButtonRadius;
   editable?: boolean;

package/src/components/index.ts

@@ -34,9 +34,10 @@ export {
   SELECT_THEME_ROLES,
   DEFAULT_SELECT_DETENTS,
   DEFAULT_SELECT_INITIAL_DETENT,
+  detentsToSnapPoints,
   resolveSelectDetentIndex,
   type SelectThemeColorProp,
+  type SelectCloseButtonSlot,
   type SelectOption,
   type SelectProps,
-  type SelectCloseButtonProp,
 } from "./Select";

package/src/index.ts

@@ -1,4 +1,4 @@
-export const version = "0.1.0";
+export const version = "0.2.0";
 
 export * from "./theme";
 export {
@@ -41,10 +41,11 @@ export {
   SELECT_THEME_ROLES,
   DEFAULT_SELECT_DETENTS,
   DEFAULT_SELECT_INITIAL_DETENT,
+  detentsToSnapPoints,
   resolveSelectDetentIndex,
   type SelectThemeColorProp,
+  type SelectCloseButtonSlot,
   type SelectOption,
   type SelectProps,
-  type SelectCloseButtonProp,
 } from "./components/Select";
 export * as components from "./components";