@studio-piot/native-ui 0.1.0 → 0.2.2

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

@@ -34,9 +34,16 @@ 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";
+export {
+  Slider,
+  SLIDER_THEME_ROLES,
+  type SliderThemeColorProp,
+  type SliderProps,
+} from "./Slider";

package/src/index.ts

@@ -1,4 +1,4 @@
-export const version = "0.1.0";
+export const version = "0.2.2";
 
 export * from "./theme";
 export {
@@ -41,10 +41,17 @@ 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 {
+  Slider,
+  SLIDER_THEME_ROLES,
+  type SliderThemeColorProp,
+  type SliderProps,
+} from "./components/Slider";
 export * as components from "./components";