@lotics/ui 1.11.1 → 1.13.0

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-

package/src/time_field.tsx

@@ -0,0 +1,300 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Pressable, ScrollView, StyleSheet, View } from "react-native";
+import { colors } from "./colors";
+import { Text } from "./text";
+import { Icon } from "./icon";
+import { Popover, PopoverContent } from "./popover";
+import { pad } from "./date_picker_value";
+import {
+  SegmentLabels,
+  fieldOrder,
+  from12h,
+  getTimeLayout,
+  placeholderFor,
+  to12h,
+} from "./date_segments";
+
+export interface TimeFieldProps {
+  /** Canonical 24-hour "HH:mm" value, "" when empty. */
+  value: string;
+  onChange: (value: string) => void;
+  segmentLabels: SegmentLabels;
+  /** BCP-47 locale for hour/minute order + 12/24h. Default "en-US". */
+  locale?: string;
+  disabled?: boolean;
+  /** Names the group of selects (e.g. "Start time"). */
+  accessibilityLabel?: string;
+  testID?: string;
+}
+
+interface Option {
+  value: string;
+  label: string;
+}
+
+const ROW_HEIGHT = 32;
+
+/**
+ * A time picker built from independent hour / minute (/ AM-PM) selects, ordered
+ * and 12-vs-24h'd by the locale. Each segment is its own dropdown so any hour and
+ * any minute is one pick — the minute list covers all 60. Canonical value is the
+ * 24-hour "HH:mm"; the AM/PM split is derived for display only.
+ */
+export function TimeField(props: TimeFieldProps) {
+  const {
+    value,
+    onChange,
+    segmentLabels,
+    locale = "en-US",
+    disabled,
+    accessibilityLabel,
+    testID,
+  } = props;
+
+  const layout = useMemo(() => getTimeLayout(locale), [locale]);
+  const order = useMemo(() => fieldOrder(layout), [layout]);
+
+  const parsed = useMemo(() => {
+    const match = /^(\d{1,2}):(\d{2})$/.exec(value.trim());
+    if (!match) return null;
+    const h = Number(match[1]);
+    const mi = Number(match[2]);
+    return h <= 23 && mi <= 59 ? { h, mi } : null;
+  }, [value]);
+
+  const hourOptions = useMemo<Option[]>(() => {
+    const hours = layout.hour12
+      ? [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
+      : Array.from({ length: 24 }, (_, h) => h);
+    return hours.map((h) => ({ value: String(h), label: pad(h) }));
+  }, [layout.hour12]);
+
+  const minuteOptions = useMemo<Option[]>(
+    () => Array.from({ length: 60 }, (_, m) => ({ value: String(m), label: pad(m) })),
+    [],
+  );
+
+  const periodOptions = useMemo<Option[]>(
+    () => [
+      { value: "am", label: layout.amText },
+      { value: "pm", label: layout.pmText },
+    ],
+    [layout.amText, layout.pmText],
+  );
+
+  const emit = useCallback((h: number, mi: number) => onChange(`${pad(h)}:${pad(mi)}`), [onChange]);
+
+  // Each select fills in the others from the current value (defaulting the
+  // untouched halves to 0) so any single pick yields a complete "HH:mm".
+  const setHour = useCallback(
+    (next: string) => {
+      const h = layout.hour12
+        ? from12h(Number(next), parsed ? to12h(parsed.h).pm : false)
+        : Number(next);
+      emit(h, parsed?.mi ?? 0);
+    },
+    [parsed, layout.hour12, emit],
+  );
+
+  const setMinute = useCallback(
+    (next: string) => emit(parsed?.h ?? 0, Number(next)),
+    [parsed, emit],
+  );
+
+  const setPeriod = useCallback(
+    (next: string) => {
+      const h12 = parsed ? to12h(parsed.h).h12 : 12;
+      emit(from12h(h12, next === "pm"), parsed?.mi ?? 0);
+    },
+    [parsed, emit],
+  );
+
+  const selected: Record<"hour" | "minute" | "dayPeriod", string | null> = {
+    hour: parsed ? String(layout.hour12 ? to12h(parsed.h).h12 : parsed.h) : null,
+    minute: parsed ? String(parsed.mi) : null,
+    dayPeriod: parsed ? (to12h(parsed.h).pm ? "pm" : "am") : null,
+  };
+
+  const config: Record<
+    "hour" | "minute" | "dayPeriod",
+    { options: Option[]; onSelect: (v: string) => void; label: string; width: number }
+  > = {
+    hour: { options: hourOptions, onSelect: setHour, label: segmentLabels.hour, width: 58 },
+    minute: { options: minuteOptions, onSelect: setMinute, label: segmentLabels.minute, width: 58 },
+    dayPeriod: {
+      options: periodOptions,
+      onSelect: setPeriod,
+      label: segmentLabels.dayPeriod,
+      width: 66,
+    },
+  };
+
+  return (
+    <View style={styles.row} accessibilityLabel={accessibilityLabel}>
+      {order.map((type) => {
+        if (type !== "hour" && type !== "minute" && type !== "dayPeriod") return null;
+        const c = config[type];
+        return (
+          <TimeSelect
+            key={type}
+            testID={testID ? `${testID}_${type}` : undefined}
+            value={selected[type]}
+            options={c.options}
+            onSelect={c.onSelect}
+            accessibilityLabel={c.label}
+            placeholder={placeholderFor(type)}
+            disabled={disabled}
+            width={c.width}
+          />
+        );
+      })}
+    </View>
+  );
+}
+
+interface TimeSelectProps {
+  value: string | null;
+  options: Option[];
+  onSelect: (value: string) => void;
+  accessibilityLabel: string;
+  placeholder: string;
+  disabled?: boolean;
+  testID?: string;
+  width: number;
+}
+
+/** One borderless-trigger dropdown select; the whole trigger is pressable. */
+function TimeSelect(props: TimeSelectProps) {
+  const { value, options, onSelect, accessibilityLabel, placeholder, disabled, testID, width } =
+    props;
+
+  const [open, setOpen] = useState(false);
+  const triggerRef = useRef<View>(null);
+  const scrollRef = useRef<ScrollView>(null);
+
+  const selectedLabel = options.find((o) => o.value === value)?.label ?? null;
+  const selectedIndex = options.findIndex((o) => o.value === value);
+
+  // Open the list scrolled to the current value (the minute list is 60 long).
+  useEffect(() => {
+    if (!open || selectedIndex < 0) return;
+    const y = Math.max(0, selectedIndex * ROW_HEIGHT - ROW_HEIGHT * 2);
+    const id = setTimeout(() => scrollRef.current?.scrollTo({ y, animated: false }), 0);
+    return () => clearTimeout(id);
+  }, [open, selectedIndex]);
+
+  const openList = useCallback(() => {
+    if (!disabled) setOpen(true);
+  }, [disabled]);
+
+  const trigger = (
+    <View
+      ref={triggerRef}
+      onPointerDown={openList}
+      testID={testID}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
+      style={[
+        styles.trigger,
+        { width },
+        open && !disabled && styles.triggerOpen,
+        disabled && styles.triggerDisabled,
+      ]}
+    >
+      <Text size="sm" color={selectedLabel ? "default" : "muted"}>
+        {selectedLabel ?? placeholder}
+      </Text>
+      <Icon
+        name="chevron-down"
+        size={16}
+        color={disabled ? colors.zinc["300"] : colors.zinc["400"]}
+      />
+    </View>
+  );
+
+  return (
+    <>
+      {trigger}
+      <Popover
+        open={open && !disabled}
+        onOpenChange={setOpen}
+        triggerRef={triggerRef}
+        side="bottom"
+        align="start"
+      >
+        <PopoverContent testID={testID ? `${testID}_list` : undefined} disableBodyScroll>
+          <ScrollView ref={scrollRef} style={styles.list} keyboardShouldPersistTaps="handled">
+            {options.map((option) => {
+          const isSelected = option.value === value;
+          return (
+            <Pressable
+              key={option.value}
+              accessibilityRole="button"
+              accessibilityState={{ selected: isSelected }}
+              onPress={() => {
+                onSelect(option.value);
+                setOpen(false);
+              }}
+              style={({ hovered }) => [
+                styles.optionRow,
+                hovered && !isSelected && styles.optionHovered,
+                isSelected && styles.optionSelected,
+              ]}
+            >
+              <Text size="sm" color={isSelected ? "inverted" : "default"}>
+                {option.label}
+              </Text>
+            </Pressable>
+          );
+        })}
+          </ScrollView>
+        </PopoverContent>
+      </Popover>
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+  },
+  trigger: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    height: 40,
+    paddingHorizontal: 8,
+    gap: 2,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: colors.border,
+    backgroundColor: colors.background,
+  },
+  triggerOpen: {
+    outlineColor: colors.black,
+    outlineWidth: 2,
+    outlineStyle: "solid",
+    outlineOffset: -2,
+  },
+  triggerDisabled: {
+    backgroundColor: colors.zinc["50"],
+  },
+  list: {
+    maxHeight: 220,
+    minWidth: 72,
+  },
+  optionRow: {
+    height: ROW_HEIGHT,
+    justifyContent: "center",
+    paddingHorizontal: 12,
+    borderRadius: 6,
+  },
+  optionHovered: {
+    backgroundColor: colors.zinc["100"],
+  },
+  optionSelected: {
+    backgroundColor: colors.zinc["900"],
+  },
+});

package/src/use_pointer_drag.ts

@@ -0,0 +1,99 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Platform } from "react-native";
+
+const DRAG_THRESHOLD = 4; // px the pointer must travel before a press becomes a drag
+
+/** Live state of an in-progress drag — the pointer delta from where it started. */
+export interface DragLive {
+  id: string;
+  dx: number;
+  dy: number;
+}
+
+export interface PointerDragApi {
+  /** Non-null only while a drag is active (past the threshold). Consumers render
+   *  live feedback (translate / resize) from `dx`/`dy`. */
+  live: DragLive | null;
+  /** Ref for a draggable element — attaches a pointerdown listener tagged with
+   *  `id` and sets the web-only `cursor` + `touch-action: none` on the node (so
+   *  touch-drag doesn't scroll). Stable per id+cursor, so it doesn't thrash
+   *  listeners across renders. */
+  bind: (id: string, cursor?: string) => (node: unknown) => void;
+}
+
+/**
+ * Self-contained pointer-event drag for time-axis primitives (calendar event
+ * chips, gantt bar handles). Mirrors the kanban's proven approach — pointerdown
+ * on the element, a movement threshold to distinguish taps, then window-level
+ * pointermove/up — but with no floating clone and no column/card coupling. On
+ * release, `onDrop` receives the final client pointer position plus the total
+ * delta; the consumer maps that to a date. Web-only (RN has no pointer events);
+ * on native it's an inert no-op so taps/press handlers still work.
+ */
+export function usePointerDrag(
+  onDrop: (id: string, pointer: { x: number; y: number }, delta: { dx: number; dy: number }) => void,
+): PointerDragApi {
+  const [live, setLive] = useState<DragLive | null>(null);
+  const press = useRef<{ id: string; x: number; y: number; active: boolean } | null>(null);
+  const onDropRef = useRef(onDrop);
+  onDropRef.current = onDrop;
+
+  // Per-id DOM node + its pointerdown handler, so we can detach on unmount/rebind.
+  const bound = useRef<Map<string, { el: HTMLElement; handler: (e: PointerEvent) => void }>>(new Map());
+  const refCache = useRef<Map<string, (node: unknown) => void>>(new Map());
+
+  useEffect(() => {
+    if (Platform.OS !== "web") return;
+    const move = (e: PointerEvent) => {
+      const p = press.current;
+      if (!p) return;
+      const dx = e.clientX - p.x;
+      const dy = e.clientY - p.y;
+      if (!p.active && Math.hypot(dx, dy) < DRAG_THRESHOLD) return;
+      p.active = true;
+      e.preventDefault();
+      setLive({ id: p.id, dx, dy });
+    };
+    const up = (e: PointerEvent) => {
+      const p = press.current;
+      press.current = null;
+      setLive(null);
+      if (p?.active) {
+        onDropRef.current(p.id, { x: e.clientX, y: e.clientY }, { dx: e.clientX - p.x, dy: e.clientY - p.y });
+      }
+    };
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", up);
+    return () => {
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", up);
+    };
+  }, []);
+
+  const bind = useCallback((id: string, cursor = "grab") => {
+    const key = `${id}:${cursor}`;
+    const cached = refCache.current.get(key);
+    if (cached) return cached;
+    const cb = (node: unknown) => {
+      const el = node as HTMLElement | null;
+      const prev = bound.current.get(id);
+      if (prev && prev.el !== el) {
+        prev.el.removeEventListener("pointerdown", prev.handler);
+        bound.current.delete(id);
+      }
+      if (!el || Platform.OS !== "web") return;
+      if (bound.current.has(id)) return;
+      el.style.touchAction = "none";
+      el.style.cursor = cursor;
+      const handler = (e: PointerEvent) => {
+        press.current = { id, x: e.clientX, y: e.clientY, active: false };
+      };
+      el.addEventListener("pointerdown", handler);
+      bound.current.set(id, { el, handler });
+    };
+    refCache.current.set(key, cb);
+    return cb;
+  }, []);
+
+  return { live, bind };
+}

package/src/datetime_picker.tsx

@@ -1,44 +0,0 @@
-import { colors } from "@lotics/ui/colors";
-import { fontFamilyRegular, inputTextStyleWeb } from "@lotics/ui/text_utils";
-
-export interface DateTimePickerProps {
-  value?: string | null;
-  onValueChange: (value: string) => void;
-  disabled?: boolean;
-  onBlur?: () => void;
-}
-
-/**
- * A unified datetime picker component that allows selecting both date and time.
- * Value format: ISO 8601 datetime string (e.g., "2025-03-01T14:00")
- */
-export function DateTimePicker(props: DateTimePickerProps) {
-  const { value, onValueChange, disabled, onBlur } = props;
-
-  return (
-    <input
-      type="datetime-local"
-      value={value || ""}
-      onChange={(e) => {
-        onValueChange(e.target.value);
-      }}
-      disabled={disabled}
-      onBlur={onBlur}
-      style={{
-        height: 40,
-        borderRadius: 8,
-        paddingLeft: 8,
-        paddingRight: 8,
-        borderWidth: 1,
-        boxShadow: "none",
-        borderStyle: "solid",
-        boxSizing: "border-box",
-        borderColor: colors.border,
-        backgroundColor: colors.background,
-        fontFamily: fontFamilyRegular,
-        ...inputTextStyleWeb,
-        letterSpacing: -0.4,
-      }}
-    />
-  );
-}