@studio-piot/native-ui 0.2.0 → 0.2.3

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.3",
   "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/SegmentedControl/SegmentedControl.tsx

@@ -0,0 +1,234 @@
+import { useEffect, useRef } from "react";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
+import { buttonRadiusValue } from "../Button/buttonRadius";
+import { useResolvedFieldColor } from "../Field/useResolvedFieldColor";
+import {
+  resolveSegmentIndex,
+  SEGMENT_INSET,
+  segmentIndicatorFrame,
+} from "./segmentIndicatorFrame";
+import { SEGMENTED_THEME_ROLES } from "./segmentThemeRoles";
+import type { SegmentedControlProps } from "./types";
+
+const SLIDE_MS = 220;
+
+export function SegmentedControl<T extends string = string>({
+  value,
+  onChange,
+  options,
+  label,
+  radius = "lg",
+  disabled = false,
+  backgroundColor: backgroundColorProp,
+  borderColor: borderColorProp,
+  selectedBackgroundColor: selectedBackgroundColorProp,
+  labelColor: labelColorProp,
+  selectedLabelColor: selectedLabelColorProp,
+  titleColor: titleColorProp,
+  style,
+}: SegmentedControlProps<T>) {
+  const backgroundColor = useResolvedFieldColor(
+    backgroundColorProp,
+    SEGMENTED_THEME_ROLES.backgroundColor,
+  );
+  const borderColor = useResolvedFieldColor(
+    borderColorProp,
+    SEGMENTED_THEME_ROLES.borderColor,
+  );
+  const selectedBackgroundColor = useResolvedFieldColor(
+    selectedBackgroundColorProp,
+    SEGMENTED_THEME_ROLES.selectedBackgroundColor,
+  );
+  const labelColor = useResolvedFieldColor(
+    labelColorProp,
+    SEGMENTED_THEME_ROLES.labelColor,
+  );
+  const selectedLabelColor = useResolvedFieldColor(
+    selectedLabelColorProp,
+    SEGMENTED_THEME_ROLES.selectedLabelColor,
+  );
+  const titleColor = useResolvedFieldColor(
+    titleColorProp,
+    SEGMENTED_THEME_ROLES.titleColor,
+  );
+
+  const index = resolveSegmentIndex(value, options);
+  const trackWidth = useRef(0);
+  const laidOut = useRef(false);
+  const indexSV = useSharedValue(0);
+  const widthSV = useSharedValue(0);
+  const opacitySV = useSharedValue(0);
+
+  const borderRadius = buttonRadiusValue(radius);
+  const pillRadius = Math.max(0, borderRadius - SEGMENT_INSET);
+
+  const applyTrackWidth = (nextWidth: number, count: number) => {
+    trackWidth.current = nextWidth;
+    const frame = segmentIndicatorFrame(0, count, nextWidth, SEGMENT_INSET);
+    widthSV.value = frame?.width ?? 0;
+  };
+
+  useEffect(() => {
+    if (trackWidth.current > 0) {
+      applyTrackWidth(trackWidth.current, options.length);
+    }
+  }, [options.length, widthSV]);
+
+  useEffect(() => {
+    if (!laidOut.current) {
+      return;
+    }
+    if (index < 0) {
+      opacitySV.value = withTiming(0, { duration: 160 });
+      return;
+    }
+    opacitySV.value = withTiming(1, { duration: 160 });
+    indexSV.value = withTiming(index, {
+      duration: SLIDE_MS,
+      easing: Easing.out(Easing.cubic),
+    });
+  }, [index, indexSV, opacitySV]);
+
+  const indicatorStyle = useAnimatedStyle(() => ({
+    width: widthSV.value,
+    opacity: opacitySV.value,
+    transform: [{ translateX: SEGMENT_INSET + indexSV.value * widthSV.value }],
+  }));
+
+  if (options.length === 0) {
+    return null;
+  }
+
+  return (
+    <View style={[styles.group, disabled && styles.blocked, style]}>
+      {label ? (
+        <Text style={[styles.title, { color: titleColor }]}>{label}</Text>
+      ) : null}
+      <View
+        accessibilityLabel={label}
+        accessibilityRole="radiogroup"
+        style={[
+          styles.track,
+          { backgroundColor, borderColor, borderRadius },
+        ]}
+      >
+        <Animated.View
+          pointerEvents="none"
+          style={[
+            styles.indicator,
+            indicatorStyle,
+            {
+              backgroundColor: selectedBackgroundColor,
+              borderRadius: pillRadius,
+            },
+          ]}
+        />
+        <View
+          onLayout={(event) => {
+            const nextWidth = event.nativeEvent.layout.width;
+            if (nextWidth <= 0) {
+              return;
+            }
+            applyTrackWidth(nextWidth, options.length);
+            if (!laidOut.current) {
+              indexSV.value = index < 0 ? 0 : index;
+              opacitySV.value = index < 0 ? 0 : 1;
+              laidOut.current = true;
+            }
+          }}
+          style={styles.row}
+        >
+          {options.map((option) => {
+            const selected = value === option.value;
+            const blocked = disabled || !!option.disabled;
+            return (
+              <Pressable
+                key={option.value}
+                accessibilityLabel={option.label}
+                accessibilityRole="radio"
+                accessibilityState={{
+                  selected,
+                  checked: selected,
+                  disabled: blocked,
+                }}
+                disabled={blocked}
+                onPress={() => onChange(option.value)}
+                style={({ pressed }) => [
+                  styles.segment,
+                  pressed && !blocked && styles.pressed,
+                  option.disabled && styles.segmentBlocked,
+                ]}
+              >
+                <Text
+                  style={[
+                    styles.label,
+                    {
+                      color: selected ? selectedLabelColor : labelColor,
+                      fontWeight: selected ? "600" : "500",
+                    },
+                  ]}
+                >
+                  {option.label}
+                </Text>
+              </Pressable>
+            );
+          })}
+        </View>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  group: {
+    width: "100%",
+    gap: 8,
+  },
+  blocked: {
+    opacity: 0.4,
+  },
+  title: {
+    fontSize: 13,
+    fontWeight: "600",
+    paddingHorizontal: 4,
+  },
+  track: {
+    width: "100%",
+    borderWidth: 1,
+    padding: SEGMENT_INSET,
+    overflow: "hidden",
+  },
+  indicator: {
+    position: "absolute",
+    top: SEGMENT_INSET,
+    bottom: SEGMENT_INSET,
+    left: 0,
+  },
+  row: {
+    flexDirection: "row",
+  },
+  segment: {
+    flex: 1,
+    minHeight: 36,
+    paddingVertical: 8,
+    paddingHorizontal: 8,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  pressed: {
+    opacity: 0.65,
+  },
+  segmentBlocked: {
+    opacity: 0.4,
+  },
+  label: {
+    fontSize: 15,
+    textAlign: "center",
+  },
+});

package/src/components/SegmentedControl/index.ts

@@ -0,0 +1,6 @@
+export { SegmentedControl } from "./SegmentedControl";
+export {
+  SEGMENTED_THEME_ROLES,
+  type SegmentedThemeColorProp,
+} from "./segmentThemeRoles";
+export type { SegmentedOption, SegmentedControlProps } from "./types";

package/src/components/SegmentedControl/segmentIndicatorFrame.test.ts

@@ -0,0 +1,39 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import {
+  resolveSegmentIndex,
+  segmentIndicatorFrame,
+  SEGMENT_INSET,
+} from "./segmentIndicatorFrame.ts";
+
+describe("resolveSegmentIndex", () => {
+  const options = [{ value: "on" }, { value: "off" }, { value: "auto" }];
+
+  it("returns the matching option index", () => {
+    assert.equal(resolveSegmentIndex("off", options), 1);
+  });
+
+  it("returns -1 when nothing is selected", () => {
+    assert.equal(resolveSegmentIndex(null, options), -1);
+    assert.equal(resolveSegmentIndex("missing", options), -1);
+  });
+});
+
+describe("segmentIndicatorFrame", () => {
+  it("keeps the same inset before the first segment and after the last", () => {
+    const rowWidth = 300;
+    const first = segmentIndicatorFrame(0, 3, rowWidth, SEGMENT_INSET);
+    const last = segmentIndicatorFrame(2, 3, rowWidth, SEGMENT_INSET);
+    assert.deepEqual(first, { x: SEGMENT_INSET, width: 100 });
+    assert.deepEqual(last, { x: 203, width: 100 });
+    assert.ok(last);
+    const trackInnerWidth = rowWidth + SEGMENT_INSET * 2;
+    assert.equal(trackInnerWidth - (last.x + last.width), SEGMENT_INSET);
+  });
+
+  it("returns null when there is no segment to highlight", () => {
+    assert.equal(segmentIndicatorFrame(-1, 3, 300), null);
+    assert.equal(segmentIndicatorFrame(0, 0, 300), null);
+    assert.equal(segmentIndicatorFrame(0, 2, 0), null);
+  });
+});

package/src/components/SegmentedControl/segmentIndicatorFrame.ts

@@ -0,0 +1,31 @@
+/** Gap between the track edge and the sliding selection fill. */
+export const SEGMENT_INSET = 3;
+
+export function resolveSegmentIndex<T extends string>(
+  value: T | null,
+  options: readonly { value: T }[],
+): number {
+  if (value == null) {
+    return -1;
+  }
+  return options.findIndex((option) => option.value === value);
+}
+
+/**
+ * Equal-width selection fill for a segment row.
+ * `segmentRowWidth` is the row already inset from the track edge.
+ * `inset` is that same gap, applied on the leading side (and, by symmetry, the trailing side).
+ * `index` 0 is the leading segment. Returns null when there is nothing to draw.
+ */
+export function segmentIndicatorFrame(
+  index: number,
+  count: number,
+  segmentRowWidth: number,
+  inset: number = SEGMENT_INSET,
+): { x: number; width: number } | null {
+  if (index < 0 || count < 1 || segmentRowWidth <= 0) {
+    return null;
+  }
+  const width = segmentRowWidth / count;
+  return { x: inset + index * width, width };
+}

package/src/components/SegmentedControl/segmentThemeRoles.test.ts

@@ -0,0 +1,17 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { SEGMENTED_THEME_ROLES } from "./segmentThemeRoles.ts";
+
+describe("SEGMENTED_THEME_ROLES", () => {
+  it("maps colour props onto existing Field and radio roles", () => {
+    assert.equal(SEGMENTED_THEME_ROLES.backgroundColor, "fieldBackground");
+    assert.equal(SEGMENTED_THEME_ROLES.borderColor, "fieldBorder");
+    assert.equal(
+      SEGMENTED_THEME_ROLES.selectedBackgroundColor,
+      "fieldRadioSelected",
+    );
+    assert.equal(SEGMENTED_THEME_ROLES.labelColor, "fieldText");
+    assert.equal(SEGMENTED_THEME_ROLES.selectedLabelColor, "fieldBackground");
+    assert.equal(SEGMENTED_THEME_ROLES.titleColor, "fieldLabel");
+  });
+});

package/src/components/SegmentedControl/segmentThemeRoles.ts

@@ -0,0 +1,10 @@
+export const SEGMENTED_THEME_ROLES = {
+  backgroundColor: "fieldBackground",
+  borderColor: "fieldBorder",
+  selectedBackgroundColor: "fieldRadioSelected",
+  labelColor: "fieldText",
+  selectedLabelColor: "fieldBackground",
+  titleColor: "fieldLabel",
+} as const;
+
+export type SegmentedThemeColorProp = keyof typeof SEGMENTED_THEME_ROLES;

package/src/components/SegmentedControl/types.ts

@@ -0,0 +1,24 @@
+import type { StyleProp, ViewStyle } from "react-native";
+import type { ButtonRadius } from "../Button/buttonRadius";
+
+export type SegmentedOption<T extends string = string> = {
+  value: T;
+  label: string;
+  disabled?: boolean;
+};
+
+export type SegmentedControlProps<T extends string = string> = {
+  value: T | null;
+  onChange: (value: T) => void;
+  options: SegmentedOption<T>[];
+  label?: string;
+  radius?: ButtonRadius;
+  disabled?: boolean;
+  backgroundColor?: string;
+  borderColor?: string;
+  selectedBackgroundColor?: string;
+  labelColor?: string;
+  selectedLabelColor?: string;
+  titleColor?: string;
+  style?: StyleProp<ViewStyle>;
+};