@studio-piot/native-ui 0.2.0 → 0.2.2

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,9 @@ export {
   type SelectOption,
   type SelectProps,
 } from "./Select";
+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.2";
 
 export * from "./theme";
 export {
@@ -48,4 +48,10 @@ export {
   type SelectOption,
   type SelectProps,
 } from "./components/Select";
+export {
+  Slider,
+  SLIDER_THEME_ROLES,
+  type SliderThemeColorProp,
+  type SliderProps,
+} from "./components/Slider";
 export * as components from "./components";