@lotics/ui 1.12.0 → 1.13.0

package/src/date_segments_field.tsx

@@ -0,0 +1,418 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  NativeSyntheticEvent,
+  Platform,
+  StyleProp,
+  StyleSheet,
+  TextInput as RNTextInput,
+  TextInputKeyPressEventData,
+  View,
+  ViewStyle,
+} from "react-native";
+import { colors } from "./colors";
+import { Text } from "./text";
+import { fontFamilyRegular, getInputTextStyle } from "./text_utils";
+import {
+  SegmentBuffer,
+  SegmentLabels,
+  SegmentType,
+  SegmentsConfig,
+  displayValue,
+  fieldOrder,
+  incrementSegment,
+  placeholderFor,
+  setHourField,
+  to12h,
+  typeDigit,
+  withDayPeriod,
+} from "./date_segments";
+
+export interface DateSegmentsProps {
+  /** Canonical value (`YYYY-MM-DD` / `YYYY-MM-DDTHH:mm`), `""` when empty. */
+  value: string;
+  onChange: (value: string) => void;
+  /** Layout + value↔buffer mapping; see `dateSegmentsConfig`. */
+  config: SegmentsConfig;
+  /** Accessible names per segment. */
+  segmentLabels: SegmentLabels;
+  disabled?: boolean;
+  autoFocus?: boolean;
+  testID?: string;
+  /** Accessible name for the segment group (e.g. "Start date"). */
+  accessibilityLabel?: string;
+  /** Fires when a segment in this group gains focus. */
+  onFocus?: () => void;
+  /** Fires when a segment in this group loses focus. */
+  onBlur?: () => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+// --- buffer transforms (pure) -----------------------------------------------
+
+function applyField(
+  buffer: SegmentBuffer,
+  type: SegmentType,
+  value: number,
+  hour12: boolean,
+): SegmentBuffer {
+  switch (type) {
+    case "year":
+      return { ...buffer, year: value };
+    case "month":
+      return { ...buffer, month: value };
+    case "day":
+      return { ...buffer, day: value };
+    case "minute":
+      return { ...buffer, minute: value };
+    case "hour":
+      return { ...buffer, hour: setHourField(buffer, value, hour12) };
+    case "dayPeriod":
+      return buffer;
+  }
+}
+
+function clearField(buffer: SegmentBuffer, type: SegmentType): SegmentBuffer {
+  switch (type) {
+    case "year":
+      return { ...buffer, year: null };
+    case "month":
+      return { ...buffer, month: null };
+    case "day":
+      return { ...buffer, day: null };
+    case "minute":
+      return { ...buffer, minute: null };
+    case "hour":
+      return { ...buffer, hour: null };
+    case "dayPeriod":
+      return buffer;
+  }
+}
+
+function fieldNumeric(type: SegmentType, buffer: SegmentBuffer, hour12: boolean): number | null {
+  switch (type) {
+    case "year":
+      return buffer.year;
+    case "month":
+      return buffer.month;
+    case "day":
+      return buffer.day;
+    case "minute":
+      return buffer.minute;
+    case "hour":
+      return buffer.hour == null ? null : hour12 ? to12h(buffer.hour).h12 : buffer.hour;
+    case "dayPeriod":
+      return null;
+  }
+}
+
+/**
+ * Borderless segmented date / datetime editor — one editable segment per locale
+ * field (in locale order, 12/24h derived) plus literal separators. Emits a canonical
+ * ISO value only once the segments form a complete, valid date. The bordered frame,
+ * focus ring, and calendar button live in {@link DateField}, which composes one (or
+ * two, for a range) of these.
+ *
+ * Segment editing (digits, arrows, AM/PM) is keyboard-driven on web. On native the
+ * segments are plain numeric inputs — the calendar/sheet is the primary path there.
+ */
+export function DateSegments(props: DateSegmentsProps) {
+  const {
+    value,
+    onChange,
+    config,
+    segmentLabels,
+    disabled,
+    autoFocus,
+    testID,
+    accessibilityLabel,
+    onFocus,
+    onBlur,
+    style,
+  } = props;
+
+  const layout = config.layout;
+  const order = useMemo(() => fieldOrder(layout), [layout]);
+  const firstFieldIndex = useMemo(
+    () => layout.segments.findIndex((s) => s.kind === "field"),
+    [layout],
+  );
+
+  // The field owns an editing buffer (the resolved value is its output). It is
+  // resynced when `value` changes from outside (calendar pick, parent reset) but
+  // not while the user types a still-incomplete value — same controlled-with-buffer
+  // shape as TimePicker's draft.
+  const [buffer, setBuffer] = useState<SegmentBuffer>(() => config.toBuffer(value));
+  const [activeType, setActiveType] = useState<SegmentType | null>(null);
+  const [activeText, setActiveText] = useState("");
+
+  const lastEmitted = useRef<string>(value);
+  const fieldRefs = useRef<Partial<Record<SegmentType, RNTextInput | null>>>({});
+
+  useEffect(() => {
+    if (value !== lastEmitted.current) {
+      lastEmitted.current = value;
+      setBuffer(config.toBuffer(value));
+      setActiveText("");
+    }
+  }, [value, config]);
+
+  const commit = useCallback(
+    (next: SegmentBuffer) => {
+      const out = config.toValue(next);
+      if (out !== null) {
+        lastEmitted.current = out;
+        onChange(out);
+      } else if (config.isEmpty(next)) {
+        lastEmitted.current = "";
+        onChange("");
+      }
+    },
+    [config, onChange],
+  );
+
+  const focusField = useCallback((type: SegmentType | undefined) => {
+    if (type) fieldRefs.current[type]?.focus();
+  }, []);
+
+  const focusNext = useCallback(
+    (type: SegmentType) => focusField(order[order.indexOf(type) + 1]),
+    [order, focusField],
+  );
+
+  const focusPrev = useCallback(
+    (type: SegmentType) => {
+      const i = order.indexOf(type);
+      if (i > 0) focusField(order[i - 1]);
+    },
+    [order, focusField],
+  );
+
+  const handleDigit = useCallback(
+    (type: SegmentType, digit: string) => {
+      if (type === "dayPeriod") return;
+      const currentText = activeType === type ? activeText : "";
+      const { text, value: v, complete } = typeDigit(type, currentText, digit, layout.hour12);
+      const next = applyField(buffer, type, v, layout.hour12);
+      setBuffer(next);
+      commit(next);
+      setActiveType(type);
+      if (complete) {
+        setActiveText("");
+        focusNext(type);
+      } else {
+        setActiveText(text);
+      }
+    },
+    [activeType, activeText, buffer, layout.hour12, commit, focusNext],
+  );
+
+  const handleStep = useCallback(
+    (type: SegmentType, delta: number) => {
+      let next: SegmentBuffer;
+      if (type === "dayPeriod") {
+        const pm = buffer.hour == null ? false : to12h(buffer.hour).pm;
+        next = { ...buffer, hour: withDayPeriod(buffer, !pm) };
+      } else {
+        const value = incrementSegment(
+          type,
+          fieldNumeric(type, buffer, layout.hour12),
+          delta,
+          layout.hour12,
+        );
+        next = applyField(buffer, type, value, layout.hour12);
+      }
+      setBuffer(next);
+      commit(next);
+      setActiveType(type);
+      setActiveText("");
+    },
+    [buffer, layout.hour12, commit],
+  );
+
+  const handleBackspace = useCallback(
+    (type: SegmentType) => {
+      if (activeType === type && activeText !== "") {
+        const text = activeText.slice(0, -1);
+        setActiveText(text);
+        const next =
+          text === ""
+            ? clearField(buffer, type)
+            : applyField(buffer, type, Number(text), layout.hour12);
+        setBuffer(next);
+        commit(next);
+        return;
+      }
+      if (fieldNumeric(type, buffer, layout.hour12) == null) {
+        focusPrev(type);
+        return;
+      }
+      const next = clearField(buffer, type);
+      setBuffer(next);
+      commit(next);
+      setActiveType(type);
+      setActiveText("");
+    },
+    [activeType, activeText, buffer, layout.hour12, commit, focusPrev],
+  );
+
+  const setHalfDay = useCallback(
+    (pm: boolean) => {
+      const next = { ...buffer, hour: withDayPeriod(buffer, pm) };
+      setBuffer(next);
+      commit(next);
+      setActiveText("");
+    },
+    [buffer, commit],
+  );
+
+  const handleKeyPress = useCallback(
+    (type: SegmentType, e: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
+      const key = e.nativeEvent.key;
+      if (/^[0-9]$/.test(key)) {
+        e.preventDefault();
+        handleDigit(type, key);
+        return;
+      }
+      switch (key) {
+        case "ArrowUp":
+          e.preventDefault();
+          handleStep(type, 1);
+          break;
+        case "ArrowDown":
+          e.preventDefault();
+          handleStep(type, -1);
+          break;
+        case "ArrowLeft":
+          e.preventDefault();
+          focusPrev(type);
+          break;
+        case "ArrowRight":
+          e.preventDefault();
+          focusNext(type);
+          break;
+        case "Backspace":
+          e.preventDefault();
+          handleBackspace(type);
+          break;
+        default:
+          if (type === "dayPeriod") {
+            const k = key.toLowerCase();
+            if (k === "a") {
+              e.preventDefault();
+              setHalfDay(false);
+            } else if (k === "p") {
+              e.preventDefault();
+              setHalfDay(true);
+            }
+          }
+      }
+    },
+    [handleDigit, handleStep, handleBackspace, focusPrev, focusNext, setHalfDay],
+  );
+
+  const handleChangeText = useCallback(
+    (type: SegmentType, txt: string) => {
+      // Web digit/arrow keys are handled (and prevented) in onKeyPress, so this fires
+      // only for a paste or for native typing.
+      if (txt.length > 1 || /[^0-9]/.test(txt)) {
+        const parsed = config.parse(txt);
+        if (parsed) {
+          const next = config.toBuffer(parsed);
+          setBuffer(next);
+          commit(next);
+          setActiveText("");
+        }
+        return;
+      }
+      if (Platform.OS !== "web" && txt) handleDigit(type, txt);
+    },
+    [config, commit, handleDigit],
+  );
+
+  const handleFocus = useCallback(
+    (type: SegmentType) => {
+      setActiveType(type);
+      setActiveText("");
+      onFocus?.();
+    },
+    [onFocus],
+  );
+
+  const handleBlur = useCallback(() => {
+    setActiveType(null);
+    setActiveText("");
+    onBlur?.();
+  }, [onBlur]);
+
+  return (
+    <View style={[styles.segments, style]} testID={testID} accessibilityLabel={accessibilityLabel}>
+      {layout.segments.map((seg, i) => {
+        if (seg.kind === "literal") {
+          return (
+            <Text key={i} size="sm" color="muted">
+              {seg.value}
+            </Text>
+          );
+        }
+        const type = seg.type;
+        const committed = displayValue(type, buffer, layout);
+        const isActive = activeType === type && activeText !== "";
+        const text = isActive ? activeText : (committed ?? "");
+        return (
+          <RNTextInput
+            key={i}
+            ref={(node) => {
+              fieldRefs.current[type] = node;
+            }}
+            value={text}
+            placeholder={placeholderFor(type)}
+            placeholderTextColor={colors.zinc["400"]}
+            editable={!disabled}
+            inputMode={type === "dayPeriod" ? "text" : "numeric"}
+            autoFocus={autoFocus && i === firstFieldIndex}
+            role={Platform.OS === "web" ? "spinbutton" : undefined}
+            aria-label={segmentLabels[type]}
+            onKeyPress={(e) => handleKeyPress(type, e)}
+            onChangeText={(t) => handleChangeText(type, t)}
+            onFocus={() => handleFocus(type)}
+            onBlur={handleBlur}
+            style={[
+              styles.segment,
+              type === "year" ? styles.year : type === "dayPeriod" ? styles.ampm : styles.twoDigit,
+              disabled && styles.segmentDisabled,
+            ]}
+          />
+        );
+      })}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  segments: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  segment: {
+    ...getInputTextStyle(),
+    fontFamily: fontFamilyRegular,
+    letterSpacing: -0.4,
+    color: colors.zinc["900"],
+    textAlign: "center",
+    paddingVertical: 0,
+    paddingHorizontal: 0,
+    outlineStyle: "none" as unknown as "solid",
+  },
+  segmentDisabled: {
+    color: colors.zinc["400"],
+  },
+  twoDigit: {
+    width: 26,
+  },
+  year: {
+    width: 38,
+  },
+  ampm: {
+    width: 28,
+  },
+});

package/src/icon.tsx

@@ -31,6 +31,7 @@ import Ban from "lucide-react-native/dist/esm/icons/ban";
 import Bell from "lucide-react-native/dist/esm/icons/bell";
 import Bolt from "lucide-react-native/dist/esm/icons/bolt";
 import Brain from "lucide-react-native/dist/esm/icons/brain";
+import Building2 from "lucide-react-native/dist/esm/icons/building-2";
 import BookMarked from "lucide-react-native/dist/esm/icons/book-marked";
 import BookOpen from "lucide-react-native/dist/esm/icons/book-open";
 import BookText from "lucide-react-native/dist/esm/icons/book-text";
@@ -218,6 +219,7 @@ const iconComponents = {
   bell: Bell,
   bold: Bold,
   bolt: Bolt,
+  "building-2": Building2,
   "book-marked": BookMarked,
   "book-open": BookOpen,
   "book-text": BookText,

package/src/menu_button.tsx

@@ -105,7 +105,7 @@ export function MenuButton(props: MenuButtonProps) {
         style={containerStyle}
         role={role}
         accessibilityLabel={resolvedLabel}
-        accessibilityState={{ selected: !!selected, disabled: !!disabled }}
+        aria-selected={!!selected} aria-disabled={disabled || undefined}
       >
         {inner}
       </PressableHighlight>

package/src/menu_list_item.tsx

@@ -51,7 +51,7 @@ export function MenuListItem(props: MenuListItemProps) {
         style={containerStyle}
         accessibilityRole="button"
         accessibilityLabel={description ? `${title}, ${description}` : title}
-        accessibilityState={{ disabled: !!disabled }}
+        aria-disabled={disabled || undefined}
       >
         {inner}
       </PressableHighlight>

package/src/radio_picker.tsx

@@ -115,7 +115,7 @@ function RadioOption<T extends string | number | symbol>(
       onPress={handlePress}
       accessibilityRole="radio"
       accessibilityLabel={description ? `${label}, ${description}` : label}
-      accessibilityState={{ checked: selected }}
+      aria-checked={selected}
       // Roving tabindex: exactly one radio is the tab-stop. Arrow keys cycle.
       focusable={isTabStop}
       onKeyDown={onKeyDown}

package/src/stepper.tsx

@@ -0,0 +1,83 @@
+import { View } from "react-native";
+import { colors } from "./colors";
+import { Icon } from "./icon";
+import { Text } from "./text";
+
+export type StepStatus = "done" | "current" | "upcoming";
+
+export interface StepperProps {
+  /** Ordered step labels, left → right. */
+  steps: string[];
+  /** Index of the in-progress step; lower indices render complete. */
+  current: number;
+  /** Accent for the completed track, current ring, and current label.
+   *  Defaults to the neutral ink — pass a brand color to theme it. */
+  color?: string;
+  accessibilityLabel?: string;
+}
+
+function statusOf(index: number, current: number): StepStatus {
+  if (index < current) return "done";
+  if (index === current) return "current";
+  return "upcoming";
+}
+
+/**
+ * Horizontal step / status tracker — a row of milestones with completed,
+ * current, and upcoming states and a connecting track. For a vertical event
+ * log use `Timeline` instead.
+ */
+export function Stepper(props: StepperProps) {
+  const { steps, current, color = colors.zinc[900], accessibilityLabel } = props;
+  const last = steps.length - 1;
+  const safe = Math.max(0, Math.min(current, last));
+  return (
+    <View
+      accessibilityRole="progressbar"
+      accessibilityLabel={accessibilityLabel ?? `Step ${safe + 1} of ${steps.length}: ${steps[safe] ?? ""}`}
+      style={{ flexDirection: "row" }}
+    >
+      {steps.map((label, i) => {
+        const status = statusOf(i, current);
+        const leftFilled = i <= current && i > 0;
+        const rightFilled = i < current && i < last;
+        const isCurrent = status === "current";
+        return (
+          <View key={label} style={{ flex: 1, alignItems: "center", gap: 8 }}>
+            <View style={{ flexDirection: "row", alignItems: "center", width: "100%" }}>
+              <View style={{ flex: 1, height: 2, backgroundColor: leftFilled ? color : colors.zinc[200] }} />
+              <StepDot status={status} color={color} />
+              <View style={{ flex: 1, height: 2, backgroundColor: rightFilled ? color : colors.zinc[200] }} />
+            </View>
+            <Text
+              size="xs"
+              color={isCurrent ? "default" : "muted"}
+              weight={isCurrent ? "semibold" : "regular"}
+              style={isCurrent ? { color } : undefined}
+            >
+              {label}
+            </Text>
+          </View>
+        );
+      })}
+    </View>
+  );
+}
+
+function StepDot({ status, color }: { status: StepStatus; color: string }) {
+  if (status === "done") {
+    return <Icon name="circle-check" size={16} color={color} />;
+  }
+  return (
+    <View
+      style={{
+        width: 16,
+        height: 16,
+        borderRadius: 8,
+        backgroundColor: colors.white,
+        borderWidth: status === "current" ? 3 : 1.5,
+        borderColor: status === "current" ? color : colors.zinc[300],
+      }}
+    />
+  );
+}

package/src/switch.tsx

@@ -76,7 +76,7 @@ export function Switch(props: SwitchProps) {
       disabled={disabled}
       accessibilityRole="switch"
       accessibilityLabel={accessibilityLabel}
-      accessibilityState={{ checked: !!value, disabled: !!disabled }}
+      aria-checked={!!value} aria-disabled={disabled || undefined}
     >
       {content}
     </Pressable>

package/src/switch_button.tsx

@@ -28,7 +28,7 @@ export function SwitchButton(props: SwitchButtonProps) {
       tooltip={tooltip}
       accessibilityRole="switch"
       accessibilityLabel={title}
-      accessibilityState={{ checked: !!value }}
+      aria-checked={!!value}
     >
       <View style={{ flexDirection: "row", gap: 8, alignItems: "center", flex: 1 }}>
         {!!icon && <Icon name={icon} size={20} />}

package/src/tabs.tsx

@@ -121,7 +121,7 @@ function TabButton<T extends string>(props: TabButtonProps<T>) {
       testID={option.testID}
       accessibilityRole="tab"
       accessibilityLabel={option.label}
-      accessibilityState={{ selected }}
+      aria-selected={selected}
       // Roving tabindex: the selected tab is the tab-stop, others are reachable
       // via arrow keys. When no tab matches the current selection (props.value
       // is stale), the first tab is the fallback so the group stays keyboard-