@studio-piot/native-ui 0.2.0 → 0.2.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,
-  },
 });

package/src/components/Select/SelectCloseButton.tsx

@@ -1,20 +1,28 @@
 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 disc = useThemeColor("text");
-  const cross = useThemeColor("background");
+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
       accessibilityLabel="Close"
       accessibilityRole="button"
       hitSlop={8}
       onPress={onPress}
-      style={[styles.disc, { backgroundColor: disc }]}
+      style={[styles.disc, { backgroundColor }]}
     >
-      <Text style={[styles.discX, { color: cross }]}>×</Text>
+      <Text style={[styles.discX, { color: iconColor }]}>×</Text>
     </Pressable>
   );
 }

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

@@ -3,7 +3,7 @@ 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", () => {
+  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");
@@ -11,6 +11,6 @@ describe("SELECT_THEME_ROLES", () => {
     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");
+    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

@@ -23,9 +23,9 @@ export type SelectProps = {
   sheetTitle?: string;
   /** 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]`. */
+  /** Detent fractions 0–1. Largest value caps sheet height (content-sized up to that max). Default `[0.25, 0.5, 0.75]`. */
   detents?: number[];
-  /** Which detent to open at. Default `0.5`. */
+  /** @deprecated Ignored — sheet opens at content height (capped by `detents`). */
   initialDetent?: number;
   radius?: ButtonRadius;
   editable?: boolean;

package/src/components/Slider/Slider.tsx

@@ -0,0 +1,95 @@
+import { StyleSheet, Text, View } from "react-native";
+import CommunitySlider from "@react-native-community/slider";
+import { useResolvedFieldColor } from "../Field/useResolvedFieldColor";
+import { SLIDER_THEME_ROLES } from "./sliderThemeRoles";
+import type { SliderProps } from "./types";
+
+export function Slider({
+  value,
+  onChange,
+  minimumValue,
+  maximumValue,
+  step,
+  label,
+  formatValue = String,
+  disabled = false,
+  labelColor: labelColorProp,
+  valueColor: valueColorProp,
+  highlightColor: highlightColorProp,
+  trackColor: trackColorProp,
+  style,
+}: SliderProps) {
+  const labelColor = useResolvedFieldColor(
+    labelColorProp,
+    SLIDER_THEME_ROLES.labelColor,
+  );
+  const valueColor = useResolvedFieldColor(
+    valueColorProp,
+    SLIDER_THEME_ROLES.valueColor,
+  );
+  const highlightColor = useResolvedFieldColor(
+    highlightColorProp,
+    SLIDER_THEME_ROLES.highlightColor,
+  );
+  const trackColor = useResolvedFieldColor(
+    trackColorProp,
+    SLIDER_THEME_ROLES.trackColor,
+  );
+
+  const display = formatValue(value);
+  const accessibilityLabel = label ? `${label}. ${display}` : display;
+
+  return (
+    <View style={[styles.column, disabled && styles.blocked, style]}>
+      <View style={styles.header}>
+        {label ? (
+          <Text style={[styles.label, { color: labelColor, flex: 1 }]}>
+            {label}
+          </Text>
+        ) : (
+          <View style={{ flex: 1 }} />
+        )}
+        <Text style={[styles.value, { color: valueColor }]}>{display}</Text>
+      </View>
+      <CommunitySlider
+        accessibilityLabel={accessibilityLabel}
+        disabled={disabled}
+        maximumTrackTintColor={trackColor}
+        maximumValue={maximumValue}
+        minimumTrackTintColor={highlightColor}
+        minimumValue={minimumValue}
+        onValueChange={onChange}
+        step={step}
+        style={styles.track}
+        thumbTintColor={highlightColor}
+        value={value}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  column: {
+    width: "100%",
+    gap: 6,
+  },
+  blocked: {
+    opacity: 0.4,
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+  },
+  label: {
+    fontSize: 13,
+    fontWeight: "600",
+  },
+  value: {
+    fontSize: 17,
+  },
+  track: {
+    width: "100%",
+    height: 40,
+  },
+});

package/src/components/Slider/index.ts

@@ -0,0 +1,6 @@
+export { Slider } from "./Slider";
+export {
+  SLIDER_THEME_ROLES,
+  type SliderThemeColorProp,
+} from "./sliderThemeRoles";
+export type { SliderProps } from "./types";

package/src/components/Slider/sliderThemeRoles.test.ts

@@ -0,0 +1,12 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { SLIDER_THEME_ROLES } from "./sliderThemeRoles.ts";
+
+describe("SLIDER_THEME_ROLES", () => {
+  it("maps colour props to Field roles plus fieldSliderHighlight", () => {
+    assert.equal(SLIDER_THEME_ROLES.labelColor, "fieldLabel");
+    assert.equal(SLIDER_THEME_ROLES.valueColor, "fieldText");
+    assert.equal(SLIDER_THEME_ROLES.highlightColor, "fieldSliderHighlight");
+    assert.equal(SLIDER_THEME_ROLES.trackColor, "fieldBorder");
+  });
+});

package/src/components/Slider/sliderThemeRoles.ts

@@ -0,0 +1,8 @@
+export const SLIDER_THEME_ROLES = {
+  labelColor: "fieldLabel",
+  valueColor: "fieldText",
+  highlightColor: "fieldSliderHighlight",
+  trackColor: "fieldBorder",
+} as const;
+
+export type SliderThemeColorProp = keyof typeof SLIDER_THEME_ROLES;

package/src/components/Slider/types.ts

@@ -0,0 +1,18 @@
+import type { StyleProp, ViewStyle } from "react-native";
+
+export type SliderProps = {
+  value: number;
+  onChange: (value: number) => void;
+  minimumValue: number;
+  maximumValue: number;
+  step?: number;
+  label?: string;
+  /** Defaults to `String(value)`. */
+  formatValue?: (value: number) => string;
+  disabled?: boolean;
+  labelColor?: string;
+  valueColor?: string;
+  highlightColor?: string;
+  trackColor?: string;
+  style?: StyleProp<ViewStyle>;
+};

package/src/components/index.ts

@@ -41,3 +41,16 @@ export {
   type SelectOption,
   type SelectProps,
 } from "./Select";
+export {
+  SegmentedControl,
+  SEGMENTED_THEME_ROLES,
+  type SegmentedThemeColorProp,
+  type SegmentedOption,
+  type SegmentedControlProps,
+} from "./SegmentedControl";
+export {
+  Slider,
+  SLIDER_THEME_ROLES,
+  type SliderThemeColorProp,
+  type SliderProps,
+} from "./Slider";

package/src/index.ts

@@ -1,4 +1,4 @@
-export const version = "0.2.0";
+export const version = "0.2.3";
 
 export * from "./theme";
 export {
@@ -48,4 +48,17 @@ export {
   type SelectOption,
   type SelectProps,
 } from "./components/Select";
+export {
+  SegmentedControl,
+  SEGMENTED_THEME_ROLES,
+  type SegmentedThemeColorProp,
+  type SegmentedOption,
+  type SegmentedControlProps,
+} from "./components/SegmentedControl";
+export {
+  Slider,
+  SLIDER_THEME_ROLES,
+  type SliderThemeColorProp,
+  type SliderProps,
+} from "./components/Slider";
 export * as components from "./components";