@studio-piot/native-ui 0.1.0 → 0.2.2

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.1.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": {
@@ -50,11 +50,15 @@
     "access": "public"
   },
   "peerDependencies": {
-    "@lodev09/react-native-true-sheet": ">=3.7.0",
+    "@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-safe-area-context": ">=4.0.0"
+    "react-native-reanimated": "^4.5.1",
+    "react-native-safe-area-context": ">=4.0.0",
+    "react-native-screens": ">=4.0.0"
   },
   "scripts": {
     "test": "node --experimental-strip-types --test 'src/**/*.test.ts'",
@@ -65,11 +69,15 @@
     "prepublishOnly": "npm run build"
   },
   "devDependencies": {
-    "@lodev09/react-native-true-sheet": "3.11.15",
+    "@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

@@ -1,17 +1,46 @@
-import { useCallback, useRef, type ReactNode } from "react";
-import { Pressable, StyleSheet, Text, View } from "react-native";
-import { TrueSheet } from "@lodev09/react-native-true-sheet";
+import {
+  useCallback,
+  useMemo,
+  useRef,
+  type ElementRef,
+  type ReactNode,
+} from "react";
+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,
-  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,
   onChange,
@@ -22,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,
@@ -36,7 +66,8 @@ export function Select({
   selectedColor: selectedColorProp,
   style,
 }: SelectProps) {
-  const sheetRef = useRef<TrueSheet>(null);
+  const modalRef = useRef<ElementRef<typeof BottomSheetModal>>(null);
+  const { height: windowHeight } = useWindowDimensions();
 
   const backgroundColor = useResolvedFieldColor(
     backgroundColorProp,
@@ -70,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);
@@ -77,21 +111,83 @@ export function Select({
   const isPlaceholder = selected == null;
   const borderRadius = buttonRadiusValue(radius);
   const title = sheetTitle ?? label ?? "Select";
-  const presentIndex = resolveSelectDetentIndex(detents, initialDetent);
+
+  const maxDynamicContentSize = useMemo(() => {
+    const maxDetent = Math.max(...detents, 0.75);
+    return Math.round(windowHeight * maxDetent);
+  }, [detents, windowHeight]);
 
   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"
       ? 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;
@@ -145,68 +241,70 @@ export function Select({
         </Text>
       ) : null}
 
-      <TrueSheet
-        ref={sheetRef}
-        backgroundColor={backgroundColor}
-        cornerRadius={buttonRadiusValue("xl")}
-        detents={detents}
-        grabber
-        scrollable
+      <BottomSheetModal
+        ref={modalRef}
+        backdropComponent={renderBackdrop}
+        backgroundStyle={{
+          backgroundColor,
+          borderTopLeftRadius: SHEET_TOP_RADIUS,
+          borderTopRightRadius: SHEET_TOP_RADIUS,
+        }}
+        containerComponent={SheetContainer}
+        enableDynamicSizing
+        enablePanDownToClose
+        handleComponent={renderHandle}
+        handleStyle={styles.handleShell}
+        maxDynamicContentSize={maxDynamicContentSize}
+        stackBehavior="push"
       >
-        <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
+        <BottomSheetScrollView
+          contentContainerStyle={styles.sheetContent}
+          enableFooterMarginAdjustment={false}
+        >
+          {options.length === 0 ? (
+            <Text style={[styles.empty, { color: placeholderColor }]}>
+              No options
+            </Text>
+          ) : (
+            options.map((option) => {
+              const isSelected = option.value === value;
+              return (
+                <Pressable
+                  key={option.value}
+                  accessibilityRole="button"
+                  accessibilityState={{
+                    selected: isSelected,
+                    disabled: !!option.disabled,
+                  }}
+                  disabled={option.disabled}
+                  onPress={() => onSelect(option)}
                   style={[
-                    styles.optionLabel,
-                    {
-                      color: isSelected ? selectedColor : textColor,
-                      flex: 1,
-                    },
+                    styles.option,
+                    option.disabled && styles.optionBlocked,
                   ]}
                 >
-                  {item.label}
-                </Text>
-                {isSelected ? (
                   <Text
-                    accessibilityElementsHidden
-                    importantForAccessibility="no"
-                    style={[styles.check, { color: selectedColor }]}
+                    style={[
+                      styles.optionLabel,
+                      {
+                        color: isSelected ? selectedColor : textColor,
+                        flex: 1,
+                      },
+                    ]}
                   >
-                    ✓
+                    {option.label}
                   </Text>
-                ) : null}
-              </Pressable>
-            );
-          })
-        )}
-      </TrueSheet>
+                  {isSelected ? (
+                    <Text style={[styles.check, { color: selectedColor }]}>
+                      ✓
+                    </Text>
+                  ) : null}
+                </Pressable>
+              );
+            })
+          )}
+        </BottomSheetScrollView>
+      </BottomSheetModal>
     </View>
   );
 }
@@ -225,6 +323,7 @@ const styles = StyleSheet.create({
   },
   trigger: {
     minHeight: 48,
+    width: "100%",
     borderWidth: 1,
     paddingHorizontal: 14,
     paddingVertical: 12,
@@ -244,23 +343,34 @@ const styles = StyleSheet.create({
   helper: {
     fontSize: 13,
   },
-  sheetHeader: {
+  handleShell: {
+    paddingBottom: 0,
+  },
+  handleRoot: {
+    overflow: "hidden",
+  },
+  sheetContent: {
+    paddingBottom: 24,
+  },
+  header: {
     flexDirection: "row",
     alignItems: "center",
     gap: 12,
     paddingHorizontal: 16,
-    paddingTop: 8,
+    paddingTop: 4,
     paddingBottom: 12,
   },
+  headerDivider: {
+    height: StyleSheet.hairlineWidth,
+  },
   sheetTitle: {
     fontSize: 17,
     fontWeight: "600",
   },
   empty: {
-    fontSize: 17,
+    fontSize: 15,
     paddingHorizontal: 16,
-    paddingVertical: 24,
-    textAlign: "center",
+    paddingVertical: 20,
   },
   option: {
     minHeight: 52,
@@ -269,6 +379,9 @@ const styles = StyleSheet.create({
     alignItems: "center",
     gap: 12,
   },
+  optionBlocked: {
+    opacity: 0.4,
+  },
   optionLabel: {
     fontSize: 17,
   },

package/src/components/Select/SelectCloseButton.tsx

@@ -1,19 +1,44 @@
 import { Pressable, StyleSheet, Text } from "react-native";
-import { useThemeColor } from "../../theme/useThemeColor";
 
-export function SelectCloseButton({ onPress }: { onPress: () => void }) {
-  const text = useThemeColor("text");
+type SelectCloseButtonProps = {
+  onPress: () => void;
+  /** Disc fill. Select passes theme colours so this stays portal-safe. */
+  backgroundColor?: string;
+  /** Cross colour. */
+  iconColor?: string;
+};
 
+/** Default Select sheet close: filled disc + contrasting cross. */
+export function SelectCloseButton({
+  onPress,
+  backgroundColor = "#111111",
+  iconColor = "#FFFFFF",
+}: SelectCloseButtonProps) {
   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 }]}
+    >
+      <Text style={[styles.discX, { color: iconColor }]}>×</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 fieldSelectSelected", () => {
+    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, "fieldSelectSelected");
+  });
+});

package/src/components/Select/selectThemeRoles.ts

@@ -6,7 +6,7 @@ export const SELECT_THEME_ROLES = {
   descriptionColor: "fieldDescription",
   borderColor: "fieldBorder",
   errorColor: "fieldError",
-  selectedColor: "fieldRadioSelected",
+  selectedColor: "fieldSelectSelected",
 } as const;
 
 export type SelectThemeColorProp = keyof typeof SELECT_THEME_ROLES;

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. Largest value caps sheet height (content-sized up to that max). Default `[0.25, 0.5, 0.75]`. */
   detents?: number[];
+  /** @deprecated Ignored — sheet opens at content height (capped by `detents`). */
   initialDetent?: number;
   radius?: ButtonRadius;
   editable?: boolean;