@lotics/ui 3.6.0 → 4.1.0

package/src/tag_input.tsx

@@ -0,0 +1,202 @@
+import { useMemo, useRef, useState } from "react";
+import { Pressable, ScrollView, StyleSheet, View, type StyleProp, type ViewStyle } from "react-native";
+import { colors } from "./colors";
+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: 8,
+    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/text.tsx

@@ -47,7 +47,7 @@ export interface TextProps {
 
 export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 
-type TextSize = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
+export type TextSize = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
 type TextAlign = "left" | "right" | "center";
 type TextDecorationLine = "underline" | "lineThrough" | "underline lineThrough";
 type TextWeight = "regular" | "medium" | "semibold";

package/src/time_picker.tsx

@@ -1,12 +1,19 @@
+import type { KeyboardEvent } from "react";
 import { colors } from "@lotics/ui/colors";
 import { fontFamilyRegular, inputTextStyleWeb } from "@lotics/ui/text_utils";
 export interface TimePickerProps {
   value?: string;
   onValueChange: (value: string) => void;
+  onBlur?: () => void;
+  /** Web key handler — e.g. an inline editor committing on Enter / reverting on Escape. */
+  onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;
+  autoFocus?: boolean;
+  disabled?: boolean;
+  accessibilityLabel?: string;
 }
 
 export function TimePicker(props: TimePickerProps) {
-  const { value, onValueChange } = props;
+  const { value, onValueChange, onBlur, onKeyDown, autoFocus, disabled, accessibilityLabel } = props;
 
   return (
     <input
@@ -15,10 +22,15 @@ export function TimePicker(props: TimePickerProps) {
         onValueChange(e.target.value);
       }}
       type="time"
+      onBlur={onBlur}
+      onKeyDown={onKeyDown}
+      autoFocus={autoFocus}
+      disabled={disabled}
+      aria-label={accessibilityLabel}
       style={{
         height: 40,
-        paddingLeft: 12,
-        paddingRight: 12,
+        paddingLeft: 8,
+        paddingRight: 8,
         borderRadius: 8,
         borderWidth: 1,
         borderStyle: "solid",

package/src/tooltip.tsx

@@ -189,6 +189,9 @@ export function useTooltip(options?: string | UseTooltipOptions) {
   const text = typeof options === "string" ? options : options?.text;
   const side = typeof options === "string" ? "top" : (options?.side ?? "top");
   const offset = typeof options === "string" ? undefined : options?.offset;
+  // True while THIS instance owns the visible tooltip — so the unmount cleanup
+  // only dismisses a tooltip it actually opened.
+  const shown = useRef(false);
 
   const showFor = useCallback(
     (target: unknown) => {
@@ -200,10 +203,23 @@ export function useTooltip(options?: string | UseTooltipOptions) {
       if (!(target instanceof HTMLElement)) return;
       const rect = target.getBoundingClientRect();
       context.show(text, rect, side, offset);
+      shown.current = true;
     },
     [text, context, side, offset],
   );
 
+  // Dismiss on unmount. An element hovered/focused when it disappears — a button
+  // that commits and re-renders away — never fires mouseLeave/blur, so its
+  // tooltip would otherwise orphan on screen.
+  useEffect(() => {
+    return () => {
+      if (shown.current) {
+        shown.current = false;
+        context?.hide();
+      }
+    };
+  }, [context]);
+
   const onMouseEnter = useCallback(
     (e: { currentTarget: unknown }) => {
       showFor(e.currentTarget);
@@ -213,11 +229,13 @@ export function useTooltip(options?: string | UseTooltipOptions) {
 
   const onMouseLeave = useCallback(() => {
     if (!context) return;
+    shown.current = false;
     context.hide();
   }, [context]);
 
   const onMouseDown = useCallback(() => {
     if (!context) return;
+    shown.current = false;
     context.hide();
   }, [context]);
 
@@ -238,6 +256,7 @@ export function useTooltip(options?: string | UseTooltipOptions) {
 
   const onBlur = useCallback(() => {
     if (!context) return;
+    shown.current = false;
     context.hide();
   }, [context]);