@lotics/ui 3.0.0 → 3.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",
@@ -127,6 +127,7 @@
     "./stepper": "./src/stepper.tsx",
     "./step_progress": "./src/step_progress.tsx",
     "./tabs": "./src/tabs.tsx",
+    "./segmented_control": "./src/segmented_control.tsx",
     "./auto_sizer": "./src/auto_sizer.tsx",
     "./animation_horizontal_slide": "./src/animation_horizontal_slide.tsx",
     "./group_avatar": "./src/group_avatar.tsx",

package/src/segmented_control.tsx

@@ -0,0 +1,201 @@
+import { useCallback, useRef } from "react";
+import { StyleSheet, View, type StyleProp, type ViewStyle } from "react-native";
+import { PressableHighlight } from "./pressable_highlight";
+import { Text } from "./text";
+import { colors, withAlpha } from "./colors";
+
+export interface SegmentOption<T extends string> {
+  label: string;
+  value: T;
+  testID?: string;
+}
+
+interface SegmentedControlProps<T extends string> {
+  /** Accessible name of the group (it renders no visible label of its own). */
+  accessibilityLabel: string;
+  /** 2–4 mutually-exclusive peers. Above ~4, use Picker — segments stop fitting. */
+  options: SegmentOption<T>[];
+  value: T;
+  onValueChange: (value: T) => void;
+  /** Disables the whole control (e.g. while a mode-specific action runs). */
+  disabled?: boolean;
+  /** The track hugs its content by default (`alignSelf: flex-start`); pass
+   *  `{ alignSelf: "stretch" }` to fill the parent's width. */
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * A segmented control: 2–4 visible peer segments in an inset track, the
+ * selected one raised as a white card. Semantically a **radiogroup** — a
+ * single choice among peers, all visible — NOT a tablist (no panels) and not
+ * a Switch (not on/off). Reach for it on a binary/few-way *mode* switch where
+ * both options should be one-tap and on screen (a generator mode, a list/grid
+ * view, a day/week/month range). Above ~4 options, use `Picker`.
+ *
+ * Keyboard follows the WAI-ARIA radio pattern: roving tabindex (only the
+ * selected segment is a tab stop), arrows move focus AND select (wrapping),
+ * Space/Enter select the focused segment.
+ */
+export function SegmentedControl<T extends string>(props: SegmentedControlProps<T>) {
+  const { accessibilityLabel, options, value, onValueChange, disabled = false, style } = props;
+  const segmentRefs = useRef<Array<View | null>>([]);
+
+  const select = useCallback(
+    (index: number) => {
+      const option = options[index];
+      if (!option || option.value === value) return;
+      onValueChange(option.value);
+    },
+    [options, value, onValueChange],
+  );
+
+  // Arrows wrap and select per the radio pattern; Space/Enter select the
+  // focused segment. Focus follows selection so the new segment stays reachable.
+  const handleKeyDown = useCallback(
+    (event: { key: string; preventDefault?: () => void }, index: number) => {
+      if (disabled) return;
+      const last = options.length - 1;
+      let next = index;
+      switch (event.key) {
+        case "ArrowRight":
+        case "ArrowDown":
+          next = index === last ? 0 : index + 1;
+          break;
+        case "ArrowLeft":
+        case "ArrowUp":
+          next = index === 0 ? last : index - 1;
+          break;
+        case "Enter":
+        case " ":
+          event.preventDefault?.();
+          select(index);
+          return;
+        default:
+          return;
+      }
+      event.preventDefault?.();
+      onValueChange(options[next].value);
+      segmentRefs.current[next]?.focus();
+    },
+    [disabled, options, onValueChange, select],
+  );
+
+  // Roving tabindex: the selected segment is the tab stop. When `value` matches
+  // no option, the first segment is the fallback so the group stays reachable.
+  const selectedIndex = options.findIndex((option) => option.value === value);
+  const tabStopIndex = selectedIndex === -1 ? 0 : selectedIndex;
+
+  return (
+    <View
+      style={[styles.track, disabled && styles.trackDisabled, style]}
+      accessibilityRole="radiogroup"
+      aria-label={accessibilityLabel}
+      aria-disabled={disabled}
+    >
+      {options.map((option, index) => (
+        <Segment
+          ref={(node: View | null) => {
+            segmentRefs.current[index] = node;
+          }}
+          key={option.value}
+          option={option}
+          selected={option.value === value}
+          isTabStop={index === tabStopIndex}
+          disabled={disabled}
+          onPress={() => select(index)}
+          onKeyDown={(event) => handleKeyDown(event, index)}
+        />
+      ))}
+    </View>
+  );
+}
+
+interface SegmentProps<T extends string> {
+  ref: (node: View | null) => void;
+  option: SegmentOption<T>;
+  selected: boolean;
+  isTabStop: boolean;
+  disabled: boolean;
+  onPress: () => void;
+  onKeyDown: (event: { key: string; preventDefault?: () => void }) => void;
+}
+
+function Segment<T extends string>(props: SegmentProps<T>) {
+  const { ref, option, selected, isTabStop, disabled, onPress, onKeyDown } = props;
+
+  return (
+    <PressableHighlight
+      ref={ref}
+      // Own the per-state background: the track is zinc-100, so an unselected
+      // segment hovering must lift TOWARD the selected white (a half-white wash),
+      // not to PressableHighlight's default zinc-100 (invisible on the track).
+      style={(state) => {
+        const hovered = (state as { hovered?: boolean }).hovered;
+        return [
+          styles.segment,
+          selected
+            ? styles.segmentSelected
+            : {
+                backgroundColor: state.pressed
+                  ? colors.white
+                  : hovered
+                    ? withAlpha(colors.white, 0.5)
+                    : "transparent",
+              },
+        ];
+      }}
+      onPress={disabled ? undefined : onPress}
+      onKeyDown={onKeyDown}
+      testID={option.testID}
+      accessibilityRole="radio"
+      accessibilityLabel={option.label}
+      aria-checked={selected}
+      aria-disabled={disabled}
+      // Roving tabindex: only the selected segment (or the fallback) is a tab
+      // stop; the rest are reached with arrow keys.
+      focusable={isTabStop && !disabled}
+    >
+      {(state) => {
+        const hovered = (state as { hovered?: boolean }).hovered;
+        return (
+          <Text
+            size="sm"
+            weight={selected ? "medium" : "regular"}
+            color={selected || hovered ? "zinc-900" : "zinc-700"}
+            numberOfLines={1}
+            userSelect="none"
+          >
+            {option.label}
+          </Text>
+        );
+      }}
+    </PressableHighlight>
+  );
+}
+
+const styles = StyleSheet.create({
+  track: {
+    flexDirection: "row",
+    alignSelf: "flex-start",
+    gap: 2,
+    padding: 3,
+    borderRadius: 10,
+    backgroundColor: colors.zinc["100"],
+  },
+  trackDisabled: {
+    opacity: 0.55,
+  },
+  segment: {
+    flex: 1,
+    minHeight: 30,
+    paddingVertical: 6,
+    paddingHorizontal: 14,
+    borderRadius: 7,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  segmentSelected: {
+    backgroundColor: colors.white,
+    boxShadow: colors.border_shadow,
+  },
+});