@lotics/ui 5.8.0 → 5.10.0

package/src/tag_input.tsx

@@ -1,203 +0,0 @@
-import { useMemo, useRef, useState } from "react";
-import { Pressable, ScrollView, StyleSheet, View, type StyleProp, type ViewStyle } from "react-native";
-import { colors } from "./colors";
-import { CONTROL_RADIUS } from "./control_surface";
-import { Text } from "./text";
-import { Icon } from "./icon";
-import { TextInputField } from "./text_input_field";
-import { MenuButton } from "./menu_button";
-import { Popover, PopoverContent } from "./popover";
-
-export interface TagOption {
-  value: string;
-  label: string;
-}
-
-export interface TagInputProps {
-  /** Selected tags. */
-  value: TagOption[];
-  /** The suggestible set. */
-  options: TagOption[];
-  onChange: (next: TagOption[]) => void;
-  /** Offer a "Create …" row when the query matches no option. Default false. */
-  allowCreate?: boolean;
-  placeholder?: string;
-  accessibilityLabel?: string;
-  style?: StyleProp<ViewStyle>;
-}
-
-/**
- * Multi-select tag field. The CONTROL is a bordered box of removable chips plus
- * an Add affordance; the typing/searching/creating happens in a POPOVER (a
- * searchable, checkable list + an optional create row) — never an inline token
- * input squeezed among the chips. So the field always reads as a clean container
- * that matches its border, instead of a text box fighting the chips. Distinct
- * from `Combobox multi` (a search field whose selection renders as in-input chips):
- * reach for `TagInput` when the field's resting state should be a tidy chip box.
- */
-export function TagInput(props: TagInputProps) {
-  const { value, options, onChange, allowCreate = false, placeholder = "Add tags", accessibilityLabel, style } = props;
-  const [open, setOpen] = useState(false);
-  const [query, setQuery] = useState("");
-  const anchorRef = useRef<View>(null);
-
-  const selected = useMemo(() => new Set(value.map((t) => t.value)), [value]);
-
-  const filtered = useMemo(() => {
-    const q = query.trim().toLowerCase();
-    return q ? options.filter((o) => o.label.toLowerCase().includes(q)) : options;
-  }, [options, query]);
-
-  const exact = useMemo(() => {
-    const q = query.trim().toLowerCase();
-    return q.length > 0 && [...options, ...value].some((o) => o.label.toLowerCase() === q);
-  }, [options, value, query]);
-
-  const showCreate = allowCreate && query.trim().length > 0 && !exact;
-
-  const toggle = (o: TagOption) =>
-    onChange(selected.has(o.value) ? value.filter((t) => t.value !== o.value) : [...value, o]);
-
-  const create = () => {
-    const label = query.trim();
-    if (!label) return;
-    const v = label.toLowerCase().replaceAll(" ", "_");
-    if (!selected.has(v)) onChange([...value, { value: v, label }]);
-    setQuery("");
-  };
-
-  return (
-    <>
-      <View ref={anchorRef} style={[styles.box, style]} accessibilityLabel={accessibilityLabel}>
-        {value.map((t) => (
-          <View key={t.value} style={styles.chip}>
-            <Text size="sm">{t.label}</Text>
-            <Pressable
-              onPress={() => onChange(value.filter((x) => x.value !== t.value))}
-              accessibilityRole="button"
-              accessibilityLabel={`Remove ${t.label}`}
-              style={styles.chipRemove}
-              hitSlop={6}
-            >
-              <Icon name="x" size={12} color={colors.zinc[500]} />
-            </Pressable>
-          </View>
-        ))}
-        <Pressable
-          onPress={() => setOpen(true)}
-          accessibilityRole="button"
-          accessibilityLabel={accessibilityLabel ?? "Add tag"}
-          style={styles.add}
-        >
-          <Icon name="plus" size={14} color={colors.zinc[500]} />
-          <Text size="sm" color="muted">
-            {value.length === 0 ? placeholder : "Add"}
-          </Text>
-        </Pressable>
-      </View>
-
-      <Popover
-        open={open}
-        onOpenChange={(o) => {
-          setOpen(o);
-          if (!o) setQuery("");
-        }}
-        triggerRef={anchorRef}
-        side="bottom"
-        align="start"
-        offset={4}
-        inheritTriggerWidth
-      >
-        <PopoverContent>
-          <View style={styles.menu}>
-            <TextInputField
-              value={query}
-              onChangeText={setQuery}
-              icon="search"
-              placeholder={allowCreate ? "Search or create…" : "Search…"}
-              autoFocus
-              autoCapitalize="none"
-              autoCorrect={false}
-              onKeyPress={(e: { nativeEvent: { key: string }; preventDefault: () => void }) => {
-                if (e.nativeEvent.key === "Enter") {
-                  e.preventDefault();
-                  if (showCreate) create();
-                  else if (filtered.length === 1) toggle(filtered[0]);
-                }
-              }}
-            />
-            <ScrollView style={styles.list} keyboardShouldPersistTaps="handled">
-              {filtered.map((o) => (
-                <MenuButton
-                  key={o.value}
-                  title={o.label}
-                  right={selected.has(o.value) ? <Icon name="check" size={16} color={colors.zinc[900]} /> : undefined}
-                  onPress={() => toggle(o)}
-                />
-              ))}
-              {showCreate ? <MenuButton title={`Create “${query.trim()}”`} icon="plus" onPress={create} /> : null}
-              {filtered.length === 0 && !showCreate ? (
-                <View style={styles.empty}>
-                  <Text size="sm" color="muted">
-                    No tags found
-                  </Text>
-                </View>
-              ) : null}
-            </ScrollView>
-          </View>
-        </PopoverContent>
-      </Popover>
-    </>
-  );
-}
-
-const styles = StyleSheet.create({
-  box: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    alignItems: "center",
-    gap: 6,
-    minHeight: 40,
-    paddingHorizontal: 6,
-    paddingVertical: 5,
-    borderWidth: 1,
-    borderColor: colors.border,
-    borderRadius: CONTROL_RADIUS,
-    backgroundColor: colors.background,
-  },
-  chip: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4,
-    paddingLeft: 8,
-    paddingRight: 4,
-    paddingVertical: 3,
-    borderRadius: 6,
-    backgroundColor: colors.zinc[100],
-  },
-  chipRemove: {
-    padding: 2,
-    borderRadius: 4,
-    cursor: "pointer",
-  },
-  add: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4,
-    paddingHorizontal: 6,
-    paddingVertical: 4,
-    cursor: "pointer",
-  },
-  menu: {
-    gap: 6,
-    padding: 6,
-    minWidth: 240,
-  },
-  list: {
-    maxHeight: 240,
-  },
-  empty: {
-    paddingVertical: 12,
-    alignItems: "center",
-  },
-});

package/src/time_field.tsx

@@ -1,297 +0,0 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Pressable, ScrollView, StyleSheet, View } from "react-native";
-import { colors } from "./colors";
-import { CONTROL_RADIUS } from "./control_surface";
-import { Text } from "./text";
-import { Icon } from "./icon";
-import { Popover, PopoverContent } from "./popover";
-import { pad } from "./date_picker_value";
-import {
-  SegmentLabels,
-  fieldOrder,
-  from12h,
-  getTimeLayout,
-  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: 78 },
-    minute: { options: minuteOptions, onSelect: setMinute, label: segmentLabels.minute, width: 78 },
-    dayPeriod: {
-      options: periodOptions,
-      onSelect: setPeriod,
-      label: segmentLabels.dayPeriod,
-      width: 78,
-    },
-  };
-
-  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={c.label}
-            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: CONTROL_RADIUS,
-    borderWidth: 1,
-    borderColor: colors.border,
-    backgroundColor: colors.background,
-  },
-  triggerOpen: {
-    borderColor: colors.zinc["900"],
-  },
-  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"],
-  },
-});