@lotics/ui 1.26.0 → 2.0.0

package/src/picker.tsx

@@ -39,14 +39,11 @@ export interface PickerProps<T extends string = string, MULTI extends boolean =
   disabled?: boolean;
   autoFocus?: boolean;
   enableSelectAll?: boolean;
-  enableSearch?: boolean;
   multi?: MULTI;
   includeEmptyOption?: boolean;
   value?: PickerValue<T, MULTI> | null;
   onValueChange?: PickerOnValueChange<T, MULTI>;
   onClose?: PickerOnClose<T, MULTI>;
-  /** Placeholder for the search input. Pass a translated string. Default: "Search..." */
-  searchPlaceholder?: string;
   /** Label for the "select all" link in multi-select mode. Default: "Select all" */
   selectAllLabel?: string;
   /** Label for the "deselect all" link in multi-select mode. Default: "Deselect all" */
@@ -59,7 +56,7 @@ export interface PickerProps<T extends string = string, MULTI extends boolean =
 export function Picker<T extends string, MULTI extends boolean = false>(
   props: PickerProps<T, MULTI>,
 ) {
-  if (props.multi || props.enableSearch || props.renderOptionContent) {
+  if (props.multi || props.renderOptionContent) {
     return <CustomPicker {...props} />;
   }
   return <StandardPicker {...(props as PickerProps<T, false>)} />;
@@ -154,10 +151,8 @@ function CustomPicker<T extends string, MULTI extends boolean = false>(
     disabled = false,
     autoFocus = false,
     enableSelectAll = false,
-    enableSearch = false,
     onValueChange,
     onClose,
-    searchPlaceholder,
     selectAllLabel,
     deselectAllLabel,
   } = props;
@@ -189,7 +184,6 @@ function CustomPicker<T extends string, MULTI extends boolean = false>(
           testID={testID}
           open={open}
           style={style}
-          enableSearch={enableSearch}
           onPress={handleToggle}
           renderOptionContent={renderOptionContent}
           selectedItems={selectedItems}
@@ -207,9 +201,7 @@ function CustomPicker<T extends string, MULTI extends boolean = false>(
           onRequestClose={handleClose}
           renderOptionContent={renderOptionContent}
           enableSelectAll={enableSelectAll}
-          enableSearch={enableSearch}
           includeEmptyOption={includeEmptyOption}
-          searchPlaceholder={searchPlaceholder}
           selectAllLabel={selectAllLabel}
           deselectAllLabel={deselectAllLabel}
         />
@@ -250,7 +242,6 @@ function PickerTrigger<T extends string>({
   style,
   onPress,
   renderOptionContent,
-  enableSearch,
   selectedItems,
   placeholder,
   disabled = false,
@@ -261,7 +252,6 @@ function PickerTrigger<T extends string>({
   style?: StyleProp<ViewStyle>;
   onPress: () => void;
   renderOptionContent?: (option: PickerOption<T>) => React.ReactNode;
-  enableSearch?: boolean;
   selectedItems: PickerOption<T>[];
   placeholder?: string;
   disabled?: boolean;
@@ -279,12 +269,7 @@ function PickerTrigger<T extends string>({
       // comes from the visible selection/placeholder text below.
       accessibilityRole="button"
       accessibilityState={{ expanded: open, disabled }}
-      style={[
-        styles.pressable,
-        open && !enableSearch && styles.opened,
-        disabled && styles.disabled,
-        style,
-      ]}
+      style={[styles.pressable, open && styles.opened, disabled && styles.disabled, style]}
       onPress={!disabled ? onPress : undefined}
       disabled={disabled}
     >

package/src/picker_menu.tsx

@@ -1,16 +1,14 @@
-import { StyleSheet, View, ScrollView, Pressable } from "react-native";
+import { StyleSheet, View, ScrollView, Pressable, TextInput } from "react-native";
 import { useState, useCallback, useMemo, useRef } from "react";
 import { colors } from "./colors";
 import { Text } from "./text";
 import { Icon } from "./icon";
 import { Checkbox } from "./checkbox";
 import { Spacer } from "./spacer";
-import { TextInputField } from "./text_input_field";
 import { MenuButton } from "./menu_button";
 import { ActivityIndicator } from "./activity_indicator";
 import { PickerOption, PickerValue, PickerOnValueChange, PickerOnClose } from "./picker";
 import { useScreenSize } from "./use_screen_size";
-import { customOptionFor } from "./custom_option";
 
 export interface PickerMenuProps<T extends string = string, MULTI extends boolean = false> {
   testID?: string;
@@ -21,31 +19,13 @@ export interface PickerMenuProps<T extends string = string, MULTI extends boolea
   onClose?: PickerOnClose<T, MULTI>;
   onRequestClose?: () => void;
   renderOptionContent?: (option: PickerOption<T>) => React.ReactNode;
-  /** Enable search input to filter options */
-  enableSearch?: boolean;
-  /** Single-select + search only: when the typed query matches no option, append
-   *  a trailing row that selects the raw query as a custom value (free entry).
-   *  `onValueChange` then receives the typed string. */
-  allowCustom?: boolean;
-  /** Label for the free-entry row (default: the raw query). Return `null` to
-   *  suppress the row for a given query — e.g. while it is still incomplete or
-   *  invalid — so "add" only appears when it is a meaningful thing to add. */
-  customOptionLabel?: (query: string) => string | null;
   enableSelectAll?: boolean;
   includeEmptyOption?: boolean;
-  /** Called whenever the search text changes. Provide it to drive server-side
-   *  search — the consumer refreshes `options` in response. Omit for the default
-   *  local filtering of `options`. */
-  onSearchChange?: (query: string) => void;
-  /** When true, `options` are treated as already filtered (server-side), so the
-   *  local label filter is skipped and the full result set shows. */
-  serverFiltered?: boolean;
-  /** Show a loading indicator (e.g. while async results are in flight). */
+  /** Show a loading indicator (e.g. while async results are in flight — the
+   *  parent owns fetching and passes the resulting `options`). */
   loading?: boolean;
   /** Shown when there are no options and not loading. Default: "No results". */
   emptyText?: string;
-  /** Placeholder for the search input. Pass a translated string. Default: "Search..." */
-  searchPlaceholder?: string;
   /** Label for the "select all" link in multi-select mode. Default: "Select all" */
   selectAllLabel?: string;
   /** Label for the "deselect all" link in multi-select mode. Default: "Deselect all" */
@@ -53,8 +33,11 @@ export interface PickerMenuProps<T extends string = string, MULTI extends boolea
 }
 
 /**
- * The dropdown menu component for the custom picker.
- * Can be used standalone (inside a Popover) or as part of the Picker component.
+ * The option list for a Picker — a keyboard-navigable list with native-`<select>`
+ * typeahead (type to jump focus). It has NO search box: filtering a long/async
+ * list is the job of `Combobox`, whose input drives the search and passes the
+ * already-filtered `options` to render. Use standalone inside a Popover, or via
+ * the `Picker` component.
  */
 export function PickerMenu<T extends string, MULTI extends boolean = false>(
   props: PickerMenuProps<T, MULTI>,
@@ -69,15 +52,9 @@ export function PickerMenu<T extends string, MULTI extends boolean = false>(
     onClose,
     onRequestClose,
     enableSelectAll,
-    enableSearch,
-    allowCustom,
-    customOptionLabel,
     includeEmptyOption,
-    onSearchChange,
-    serverFiltered,
     loading,
     emptyText = "No results",
-    searchPlaceholder = "Search...",
     selectAllLabel = "Select all",
     deselectAllLabel = "Deselect all",
   } = props;
@@ -101,38 +78,16 @@ export function PickerMenu<T extends string, MULTI extends boolean = false>(
     };
   }, [multi, value]);
 
-  const [searchQuery, setSearchQuery] = useState("");
-
-  // Free entry: a trailing selectable row carrying the raw query as its value
-  // (recognised below for distinct styling). See `customOptionFor` for the rules.
-  const customOpt = useMemo(
-    () => customOptionFor({ allowCustom, multi, query: searchQuery, options, customOptionLabel }),
-    [allowCustom, multi, searchQuery, options, customOptionLabel],
-  );
-
-  const filteredOptions = useMemo(() => {
-    let result = options;
-    // Skip the local filter in server-driven mode — `options` already reflect
-    // the query for `searchQuery`.
-    if (enableSearch && searchQuery && !serverFiltered) {
-      const query = searchQuery.toLowerCase();
-      result = options.filter((opt) => opt && opt.label?.toLowerCase().includes(query));
-    }
-    if (includeEmptyOption && (!enableSearch || !searchQuery)) {
-      const emptyOption: PickerOption<T> = {
-        label: "",
-        value: "" as T,
-      };
-      result = [emptyOption, ...result];
-    }
-    if (customOpt) {
-      result = [...result, customOpt];
+  const displayOptions = useMemo(() => {
+    if (includeEmptyOption) {
+      const emptyOption: PickerOption<T> = { label: "", value: "" as T };
+      return [emptyOption, ...options];
     }
-    return result;
-  }, [options, enableSearch, searchQuery, includeEmptyOption, serverFiltered, customOpt]);
+    return options;
+  }, [options, includeEmptyOption]);
 
   const [focusedIndex, setFocusedIndex] = useState<number>(() => {
-    const selectedIndex = filteredOptions.findIndex((opt) => {
+    const selectedIndex = displayOptions.findIndex((opt) => {
       if (!opt || opt.disabled) return false;
       if (multi && Array.isArray(multiValue)) {
         return multiValue.includes(opt.value);
@@ -140,19 +95,10 @@ export function PickerMenu<T extends string, MULTI extends boolean = false>(
       return opt.value === singleValue;
     });
     if (selectedIndex >= 0) return selectedIndex;
-    const firstValid = filteredOptions.findIndex((opt) => opt && !opt.disabled);
+    const firstValid = displayOptions.findIndex((opt) => opt && !opt.disabled);
     return firstValid >= 0 ? firstValid : 0;
   });
 
-  const handleSearchChange = useCallback(
-    (text: string) => {
-      setSearchQuery(text);
-      setFocusedIndex(0);
-      onSearchChange?.(text);
-    },
-    [onSearchChange],
-  );
-
   const handleClose = useCallback(() => {
     onRequestClose?.();
     if (onClose) {
@@ -168,13 +114,9 @@ export function PickerMenu<T extends string, MULTI extends boolean = false>(
     (itemValue: T) => {
       if (!multi || !onValueChange) return;
       const currentValues = multiValue ?? [];
-      let newValue: T[];
-      if (currentValues.includes(itemValue)) {
-        newValue = currentValues.filter((v) => v !== itemValue);
-      } else {
-        newValue = [...currentValues, itemValue];
-      }
-
+      const newValue = currentValues.includes(itemValue)
+        ? currentValues.filter((v) => v !== itemValue)
+        : [...currentValues, itemValue];
       (onValueChange as (value: T[]) => void)(newValue);
     },
     [multi, multiValue, onValueChange],
@@ -216,8 +158,8 @@ export function PickerMenu<T extends string, MULTI extends boolean = false>(
       switch (key) {
         case "ArrowDown": {
           let next = focusedIndex + 1;
-          while (next < filteredOptions.length) {
-            const opt = filteredOptions[next];
+          while (next < displayOptions.length) {
+            const opt = displayOptions[next];
             if (opt && !opt.disabled) {
               setFocusedIndex(next);
               scrollToIndex(next);
@@ -230,7 +172,7 @@ export function PickerMenu<T extends string, MULTI extends boolean = false>(
         case "ArrowUp": {
           let next = focusedIndex - 1;
           while (next >= 0) {
-            const opt = filteredOptions[next];
+            const opt = displayOptions[next];
             if (opt && !opt.disabled) {
               setFocusedIndex(next);
               scrollToIndex(next);
@@ -241,14 +183,11 @@ export function PickerMenu<T extends string, MULTI extends boolean = false>(
           return true;
         }
         case "Enter":
-          if (focusedIndex >= 0 && focusedIndex < filteredOptions.length) {
-            const focusedOption = filteredOptions[focusedIndex];
+          if (focusedIndex >= 0 && focusedIndex < displayOptions.length) {
+            const focusedOption = displayOptions[focusedIndex];
             if (focusedOption && !focusedOption.disabled) {
-              if (multi) {
-                handleMultiSelect(focusedOption.value);
-              } else {
-                handleSingleSelect(focusedOption.value);
-              }
+              if (multi) handleMultiSelect(focusedOption.value);
+              else handleSingleSelect(focusedOption.value);
             }
           }
           return true;
@@ -262,90 +201,108 @@ export function PickerMenu<T extends string, MULTI extends boolean = false>(
           return false;
       }
     },
-    [focusedIndex, filteredOptions, multi, handleMultiSelect, handleSingleSelect, handleClose, scrollToIndex],
+    [focusedIndex, displayOptions, multi, handleMultiSelect, handleSingleSelect, handleClose, scrollToIndex],
   );
 
-  const hasOptions = filteredOptions.some((opt) => opt && !opt.disabled);
-  const hasSelectedOptions = multi && Array.isArray(multiValue) && multiValue.length > 0;
-  const showSelectAllLink = multi && hasOptions && enableSelectAll;
-  const showDeselectAllLink = multi && hasOptions && hasSelectedOptions && enableSelectAll;
-  const showLinks = showSelectAllLink || showDeselectAllLink;
+  // Native-select typeahead: accumulate printable keys into a short-lived buffer
+  // and jump focus to the first option whose label starts with it.
+  const typeaheadBufferRef = useRef("");
+  const typeaheadTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
-  const handleSearchKeyPress = useCallback(
+  const handleTypeahead = useCallback(
+    (char: string) => {
+      if (typeaheadTimerRef.current) clearTimeout(typeaheadTimerRef.current);
+      typeaheadBufferRef.current += char.toLowerCase();
+      const buffer = typeaheadBufferRef.current;
+      const match = displayOptions.findIndex(
+        (opt) => opt && !opt.disabled && (opt.label ?? "").toLowerCase().startsWith(buffer),
+      );
+      if (match >= 0) {
+        setFocusedIndex(match);
+        scrollToIndex(match);
+      }
+      typeaheadTimerRef.current = setTimeout(() => {
+        typeaheadBufferRef.current = "";
+      }, 600);
+    },
+    [displayOptions, scrollToIndex],
+  );
+
+  const handleKeyPress = useCallback(
     (e: { nativeEvent: { key: string }; preventDefault: () => void }) => {
-      if (handleKeyNavigation(e.nativeEvent.key)) {
+      const key = e.nativeEvent.key;
+      if (handleKeyNavigation(key)) {
         e.preventDefault();
+        return;
       }
+      if (key.length === 1) handleTypeahead(key);
     },
-    [handleKeyNavigation],
+    [handleKeyNavigation, handleTypeahead],
   );
 
+  const hasOptions = displayOptions.some((opt) => opt && !opt.disabled);
+  const hasSelectedOptions = multi && Array.isArray(multiValue) && multiValue.length > 0;
+  const showSelectAllLink = multi && hasOptions && enableSelectAll;
+  const showDeselectAllLink = multi && hasOptions && hasSelectedOptions && enableSelectAll;
+  const showLinks = showSelectAllLink || showDeselectAllLink;
+
   return (
     <View
       testID={testID}
       style={[styles.container, screenSize.small ? { flex: 1 } : { maxHeight: 480 }]}
     >
-      {enableSearch && (
-        <TextInputField
-          autoFocus={!screenSize.small}
-          icon="search"
-          value={searchQuery}
-          onChangeText={handleSearchChange}
-          placeholder={searchPlaceholder}
-          placeholderTextColor={colors.zinc["400"]}
-          autoCapitalize="none"
-          autoCorrect={false}
-          onKeyPress={handleSearchKeyPress}
-        />
-      )}
+      {/* Visually hidden but focusable: captures typeahead + arrow/enter keys
+          while the popover is open, giving native-<select> behavior. */}
+      <TextInput
+        autoFocus={!screenSize.small}
+        value=""
+        onChangeText={() => {}}
+        onKeyPress={handleKeyPress}
+        style={styles.typeaheadCapture}
+      />
       <ScrollView ref={scrollViewRef} style={styles.optionsList}>
         {loading && (
           <View style={styles.statusRow}>
             <ActivityIndicator />
           </View>
         )}
-        {!loading && filteredOptions.length === 0 && (
+        {!loading && displayOptions.length === 0 && (
           <View style={styles.statusRow}>
             <Text color="zinc-500" size="sm">
               {emptyText}
             </Text>
           </View>
         )}
-        {filteredOptions.map((item, index) => {
+        {displayOptions.map((item, index) => {
           if (!item) return null;
 
           const isSelected = multi
             ? Array.isArray(multiValue) && multiValue.includes(item.value)
             : item.value === singleValue;
           const isFocused = index === focusedIndex;
-          const isCustom = !!customOpt && item.value === customOpt.value;
 
           return (
             <MenuButton
               key={item.value}
-              testID={isCustom ? "picker-custom-option" : item.testID || `picker-option-${item.value}`}
+              testID={item.testID || `picker-option-${item.value}`}
               icon={multi ? <Checkbox checked={isSelected} /> : undefined}
               title={
-                renderOptionContent && !isCustom ? (
+                renderOptionContent ? (
                   renderOptionContent(item)
                 ) : (
-                  <Text userSelect="none" numberOfLines={1} color={isCustom ? "zinc-500" : undefined}>
+                  <Text userSelect="none" numberOfLines={1}>
                     {item.label}
                   </Text>
                 )
               }
               right={
-                isCustom ? (
-                  <Icon name="plus" size={16} color={colors.zinc["400"]} />
-                ) : !multi && isSelected ? (
+                !multi && isSelected ? (
                   <Icon name="check" size={18} color={colors.zinc["950"]} />
                 ) : undefined
               }
               focused={isFocused}
               disabled={item.disabled}
-              onPress={() =>
-                multi ? handleMultiSelect(item.value) : handleSingleSelect(item.value)
-              }
+              onPress={() => (multi ? handleMultiSelect(item.value) : handleSingleSelect(item.value))}
               onHoverIn={() => setFocusedIndex(index)}
               style={styles.option}
             />
@@ -397,4 +354,10 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     paddingVertical: 16,
   },
+  typeaheadCapture: {
+    position: "absolute",
+    width: 1,
+    height: 1,
+    opacity: 0,
+  },
 });

package/src/switcher.tsx

@@ -1,7 +1,8 @@
 import React, { useCallback, useState } from "react";
-import { Pressable, StyleSheet } from "react-native";
+import { StyleSheet } from "react-native";
 import { Icon } from "./icon";
 import { MenuButton } from "./menu_button";
+import { PressableHighlight } from "./pressable_highlight";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover";
 import { Stack } from "./stack";
 import { Text } from "./text";
@@ -67,12 +68,12 @@ export function Switcher(props: SwitcherProps) {
   return (
     <Popover open={open} onOpenChange={setOpen} side={side} align={align}>
       <PopoverTrigger>
-        <Pressable style={[styles.trigger, { maxWidth: maxTriggerWidth }]}>
+        <PressableHighlight style={[styles.trigger, { maxWidth: maxTriggerWidth }]}>
           <Text size="sm" weight="medium" color="zinc-700" numberOfLines={1}>
             {label}
           </Text>
           <Icon name="chevrons-up-down" size={14} color={colors.zinc["500"]} />
-        </Pressable>
+        </PressableHighlight>
       </PopoverTrigger>
       <PopoverContent>
         <Stack style={styles.popoverBody}>

package/src/chart_area.tsx

@@ -1,105 +0,0 @@
-import { useId } from "react";
-import { View } from "react-native";
-import {
-  Area,
-  AreaChart,
-  CartesianGrid,
-  ResponsiveContainer,
-  Tooltip,
-  XAxis,
-  YAxis,
-} from "recharts";
-import { colors } from "./colors";
-import { useLoticsTheme } from "./theme";
-import { chartAxisTickStyle, chartTooltipLabelStyle, chartTooltipStyle } from "./chart_internals";
-
-interface ChartAreaProps<T> {
-  data: T[];
-  /** Property to use as the X-axis category (e.g. month label). */
-  xKey: keyof T & string;
-  /** Property to use as the Y-axis value. */
-  yKey: keyof T & string;
-  /** Pixel height. Default 200. Charts shorter than ~120 lose readability;
-   * taller than ~280 dominate the card. */
-  height?: number;
-  /** Override the theme accent for this chart instance. */
-  color?: string;
-  /** Format the Y value in tooltips. Defaults to `Intl.NumberFormat` for
-   * numbers, identity for strings. */
-  formatValue?: (value: number) => string;
-  /** Label shown next to the value in the tooltip. Default `Value`. */
-  valueLabel?: string;
-}
-
-/**
- * Shadcn-style area chart — gradient fill, dashed horizontal-only
- * gridlines, clean axes (no axisLine, no tickLine), tooltip with the
- * standard chart tooltip chrome.
- *
- * Defaults pulled from the `useLoticsTheme()` accent so consumers don't
- * need to think about color choice. Override via the `color` prop for
- * one-off charts that need a different hue.
- *
- * Why a wrapper instead of just exposing Recharts to consumers: the
- * "shadcn pattern" is a dozen non-obvious Recharts props (axisLine={false},
- * tickLine={false}, monotone interpolation, gradient stops at 5% and 95%,
- * stroke-dasharray "3 3" on grid, …). Without the wrapper, every
- * consumer has to remember the full recipe; with it, they pass data and
- * get the polish.
- */
-export function ChartArea<T extends Record<string, unknown>>(props: ChartAreaProps<T>) {
-  const { data, xKey, yKey, height = 200, color, formatValue, valueLabel = "Value" } = props;
-  const theme = useLoticsTheme();
-  const fill = color ?? theme.accent;
-  // `useId` guarantees the gradient `id` is unique even when multiple
-  // ChartArea instances render on the same page — without it, two charts
-  // would share the same `url(#revenueFill)` and the second would lose
-  // its gradient.
-  const gradientId = `chartArea-${useId()}`;
-  return (
-    <View style={{ height }}>
-      <ResponsiveContainer width="100%" height="100%">
-        <AreaChart data={data} margin={{ top: 12, right: 8, left: 8, bottom: 0 }}>
-          <defs>
-            {/* 3-stop gradient: deeper top (55%), accelerated mid-fade,
-                clean bottom. Single 5%→95% linear stop reads as "tinted",
-                3-stop with the middle inflection at 50%/18% reads as
-                "designed". Stripe / Mercury use the multi-stop shape; the
-                eye picks up the non-linear falloff as intentional. */}
-            <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
-              <stop offset="0%" stopColor={fill} stopOpacity={0.55} />
-              <stop offset="50%" stopColor={fill} stopOpacity={0.18} />
-              <stop offset="100%" stopColor={fill} stopOpacity={0} />
-            </linearGradient>
-          </defs>
-          <CartesianGrid vertical={false} stroke={colors.zinc[200]} strokeDasharray="3 3" />
-          <XAxis
-            dataKey={xKey as string}
-            axisLine={false}
-            tickLine={false}
-            tickMargin={10}
-            tick={chartAxisTickStyle}
-          />
-          <YAxis hide />
-          <Tooltip
-            cursor={{ stroke: colors.zinc[300], strokeDasharray: "3 3" }}
-            contentStyle={chartTooltipStyle}
-            labelStyle={chartTooltipLabelStyle}
-            formatter={(val: unknown) => {
-              if (typeof val !== "number") return [String(val), valueLabel];
-              return [formatValue ? formatValue(val) : val.toLocaleString(), valueLabel];
-            }}
-          />
-          <Area
-            type="monotone"
-            dataKey={yKey as string}
-            stroke={fill}
-            strokeWidth={2.5}
-            fill={`url(#${gradientId})`}
-            animationDuration={600}
-          />
-        </AreaChart>
-      </ResponsiveContainer>
-    </View>
-  );
-}