@lotics/ui 1.26.0 → 2.0.0

package/src/chart_bar.tsx

@@ -1,154 +0,0 @@
-import { View } from "react-native";
-import {
-  Bar,
-  BarChart,
-  CartesianGrid,
-  Cell,
-  ResponsiveContainer,
-  Tooltip,
-  XAxis,
-  YAxis,
-} from "recharts";
-import { colors } from "./colors";
-import { useLoticsTheme } from "./theme";
-import {
-  chartAxisTickStyle,
-  chartTooltipLabelStyle,
-  chartTooltipStyle,
-  chartYAxisCategoryTickStyle,
-} from "./chart_internals";
-
-interface ChartBarProps<T> {
-  data: T[];
-  /** Property to use as the category axis. */
-  categoryKey: keyof T & string;
-  /** Property to use as the value axis. */
-  valueKey: keyof T & string;
-  /** Per-row fill color. Optional — when omitted, all bars use the theme
-   * accent. Set this when each category needs its own color (funnel
-   * stages, status breakdowns, etc.). */
-  fillKey?: keyof T & string;
-  /** Orientation. Default `vertical` (category on X, value on Y). Use
-   * `horizontal` for "rank by value" lists where category names are
-   * long (member names, account labels). */
-  orientation?: "vertical" | "horizontal";
-  /** Pixel height. Default 220 vertical / row-count × 56 horizontal.
-   * Pass explicit value for fixed-height layouts. */
-  height?: number;
-  /** Override the theme accent for this chart instance. */
-  color?: string;
-  /** Format the value in tooltips + value labels. */
-  formatValue?: (value: number) => string;
-  /** Label shown next to the value in the tooltip. Default `Value`. */
-  valueLabel?: string;
-}
-
-/**
- * Shadcn-style bar chart. Vertical (categories on X axis) is the default;
- * pass `orientation="horizontal"` for rank-by-value lists where labels are
- * long.
- *
- * Vertical: rounded TOP corners only (radius 6) — the shadcn pattern.
- * Horizontal: rounded RIGHT corners only.
- *
- * Per-bar colors via `fillKey`: each data row carries its own color. Use
- * for funnel/category breakdowns. Omit for single-hue bar charts (the
- * theme accent fills every bar).
- */
-export function ChartBar<T extends Record<string, unknown>>(props: ChartBarProps<T>) {
-  const {
-    data,
-    categoryKey,
-    valueKey,
-    fillKey,
-    orientation = "vertical",
-    height,
-    color,
-    formatValue,
-    valueLabel = "Value",
-  } = props;
-  const theme = useLoticsTheme();
-  const fill = color ?? theme.accent;
-  const isHorizontal = orientation === "horizontal";
-  const resolvedHeight = height ?? (isHorizontal ? Math.max(120, data.length * 56) : 220);
-  return (
-    <View style={{ height: resolvedHeight }}>
-      <ResponsiveContainer width="100%" height="100%">
-        <BarChart
-          data={data}
-          layout={isHorizontal ? "vertical" : "horizontal"}
-          margin={
-            isHorizontal
-              ? { top: 4, right: 40, left: 4, bottom: 4 }
-              : { top: 8, right: 0, left: 0, bottom: 0 }
-          }
-          barCategoryGap={isHorizontal ? "35%" : undefined}
-        >
-          <CartesianGrid
-            vertical={isHorizontal ? false : false}
-            horizontal={isHorizontal ? false : true}
-            stroke={colors.zinc[200]}
-            strokeDasharray="3 3"
-          />
-          {isHorizontal ? (
-            <>
-              <XAxis type="number" hide />
-              <YAxis
-                type="category"
-                dataKey={categoryKey as string}
-                axisLine={false}
-                tickLine={false}
-                width={160}
-                tick={chartYAxisCategoryTickStyle}
-              />
-            </>
-          ) : (
-            <>
-              {/* Recharts v3's dataKey expects a TypedDataKey resolved from the
-                  generic; our wrapper is generic over T so we pass the raw
-                  string key. Cast at the boundary — consumers' data shape is
-                  validated via the categoryKey: keyof T constraint. */}
-              <XAxis
-                dataKey={categoryKey as string}
-                axisLine={false}
-                tickLine={false}
-                tickMargin={8}
-                tick={chartAxisTickStyle}
-              />
-              <YAxis hide />
-            </>
-          )}
-          <Tooltip
-            cursor={{ fill: colors.zinc[100] }}
-            contentStyle={chartTooltipStyle}
-            labelStyle={chartTooltipLabelStyle}
-            formatter={(val: unknown) => {
-              if (typeof val !== "number") return [String(val), valueLabel];
-              return [formatValue ? formatValue(val) : val.toLocaleString(), valueLabel];
-            }}
-          />
-          <Bar
-            dataKey={valueKey as string}
-            fill={fill}
-            radius={isHorizontal ? [0, 4, 4, 0] : [6, 6, 0, 0]}
-            label={
-              isHorizontal
-                ? {
-                    position: "right",
-                    fill: colors.zinc[700],
-                    fontSize: 13,
-                    fontWeight: 500,
-                  }
-                : undefined
-            }
-          >
-            {fillKey &&
-              data.map((row, i) => (
-                <Cell key={i} fill={String(row[fillKey] ?? fill)} />
-              ))}
-          </Bar>
-        </BarChart>
-      </ResponsiveContainer>
-    </View>
-  );
-}

package/src/chart_internals.tsx

@@ -1,43 +0,0 @@
-import { colors } from "./colors";
-
-/**
- * Shared chart styling helpers + the shadcn-style tooltip box style.
- * Centralized so every @lotics/ui chart wrapper looks identical without
- * duplicating the magic numbers across files.
- *
- * Pure constants + a type — no JSX, no peer dep impact. The chart wrappers
- * that import this also import Recharts directly; this file is safe to
- * import from anywhere.
- */
-
-/** Tooltip popover box. Matches shadcn's `<ChartTooltipContent />` chrome:
- * white card, hairline border, soft warm-neutral shadow, tight padding. */
-export const chartTooltipStyle = {
-  backgroundColor: colors.white,
-  border: `1px solid ${colors.zinc[200]}`,
-  borderRadius: 10,
-  // Two-layer shadow: tight first stop for definition, soft second stop
-  // for atmosphere. Stripe / Linear pattern — single-shadow tooltips read
-  // as "default Recharts", layered shadow reads as "designed".
-  boxShadow: "0 1px 2px rgba(38,38,38,0.04), 0 8px 20px -4px rgba(38,38,38,0.08)",
-  fontSize: 13,
-  padding: "10px 14px",
-} as const;
-
-export const chartTooltipLabelStyle = {
-  color: colors.zinc[600],
-  fontWeight: 500,
-} as const;
-
-/** Axis tick text — small, muted, no rotation. */
-export const chartAxisTickStyle = {
-  fontSize: 12,
-  fill: colors.zinc[500],
-} as const;
-
-/** Y-axis label text on horizontal bar charts — slightly heavier than X
- * because it's reading a name, not a number. */
-export const chartYAxisCategoryTickStyle = {
-  fontSize: 13,
-  fill: colors.zinc[700],
-} as const;

package/src/custom_option.test.ts

@@ -1,50 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { customOptionFor } from "./custom_option";
-
-const opts = [
-  { value: "BX1N", label: "BX1N" },
-  { value: "UX1N", label: "UX1N" },
-];
-
-describe("customOptionFor", () => {
-  it("offers the trimmed query when nothing matches", () => {
-    expect(customOptionFor({ allowCustom: true, multi: false, query: "  ABCD ", options: opts }))
-      .toEqual({ value: "ABCD", label: "ABCD" });
-  });
-
-  it("suppressed when free entry is off", () => {
-    expect(customOptionFor({ allowCustom: false, multi: false, query: "ABCD", options: opts })).toBeNull();
-    expect(customOptionFor({ allowCustom: undefined, multi: false, query: "ABCD", options: opts })).toBeNull();
-  });
-
-  it("suppressed for multi-select", () => {
-    expect(customOptionFor({ allowCustom: true, multi: true, query: "ABCD", options: opts })).toBeNull();
-  });
-
-  it("suppressed for an empty / whitespace query", () => {
-    expect(customOptionFor({ allowCustom: true, multi: false, query: "   ", options: opts })).toBeNull();
-  });
-
-  it("suppressed when the query matches an option value (case-insensitive)", () => {
-    expect(customOptionFor({ allowCustom: true, multi: false, query: "bx1n", options: opts })).toBeNull();
-  });
-
-  it("uses customOptionLabel for the row label but keeps the raw value", () => {
-    expect(customOptionFor({
-      allowCustom: true, multi: false, query: "ABCD", options: opts,
-      customOptionLabel: (q) => `Add "${q}"`,
-    })).toEqual({ value: "ABCD", label: 'Add "ABCD"' });
-  });
-
-  it("suppressed when customOptionLabel returns null", () => {
-    expect(customOptionFor({
-      allowCustom: true, multi: false, query: "AB", options: opts,
-      customOptionLabel: () => null,
-    })).toBeNull();
-  });
-
-  it("ignores undefined / false holes in the options list", () => {
-    expect(customOptionFor({ allowCustom: true, multi: false, query: "ABCD", options: [undefined, false, ...opts] }))
-      .toEqual({ value: "ABCD", label: "ABCD" });
-  });
-});

package/src/custom_option.ts

@@ -1,30 +0,0 @@
-import type { PickerOption } from "./picker";
-
-/**
- * Resolve the free-entry ("custom") option a search picker should offer for the
- * current query — or `null` when it should not be offered. The option's `value`
- * stays the raw trimmed query; consumers decide what an unknown value means.
- *
- * Suppressed when: free entry is disabled, the picker is multi-select, the query
- * is empty, the query already matches an existing option's value
- * (case-insensitive), or `customOptionLabel` returns `null` for it.
- *
- * Pure and RN-free so it is unit-testable in isolation from `PickerMenu`.
- */
-export function customOptionFor<T extends string>(args: {
-  allowCustom: boolean | undefined;
-  multi: boolean;
-  query: string;
-  options: (PickerOption<T> | undefined | false)[];
-  customOptionLabel?: (query: string) => string | null;
-}): PickerOption<T> | null {
-  const { allowCustom, multi, query, options, customOptionLabel } = args;
-  if (!allowCustom || multi) return null;
-  const q = query.trim();
-  if (!q || options.some((o) => o && String(o.value).toLowerCase() === q.toLowerCase())) {
-    return null;
-  }
-  const label = customOptionLabel ? customOptionLabel(q) : q;
-  if (label == null) return null;
-  return { value: q as T, label };
-}

package/src/search_select.tsx

@@ -1,348 +0,0 @@
-import {
-  View,
-  ScrollView,
-  StyleSheet,
-  type StyleProp,
-  type ViewStyle,
-  type TextInput as RNTextInput,
-} from "react-native";
-import { useCallback, useEffect, useId, useRef, useState, type ReactNode } from "react";
-import { colors } from "./colors";
-import { Text } from "./text";
-import { TextInputField } from "./text_input_field";
-import { MenuListItem } from "./menu_list_item";
-import { ActivityIndicator } from "./activity_indicator";
-import { Popover, PopoverContent } from "./popover";
-import type { PickerOption } from "./picker";
-import type { TextColor } from "./text_utils";
-import { useDebouncedCallback } from "./use_debounced_callback";
-import { useListKeyboardNav } from "./use_list_keyboard_nav";
-
-/** A pinned action row in the dropdown — not a search result, an action. */
-export interface SearchSelectAction {
-  key: string;
-  label: string;
-  icon?: ReactNode;
-  /** Tints the label so it reads as an action (match it to the icon's color). */
-  color?: TextColor;
-  onPress: () => void;
-}
-
-export interface SearchSelectProps<T extends string = string, D = unknown> {
-  /** Result options for the current query. The consumer refreshes these in
-   *  response to `onSearchChange` — search runs server-side, so the whole table
-   *  is never shipped to the client. */
-  options: PickerOption<T, D>[];
-  /** Pinned action rows shown at the very top of the dropdown (above results and
-   *  recents), always available while open and keyboard-navigable alongside the
-   *  options — e.g. a "Browse all" that opens a full picker. */
-  leadingActions?: SearchSelectAction[];
-  /** Debounced; fires as the user types. Drive a server re-query from it. */
-  onSearchChange: (query: string) => void;
-  /** Fires when the user picks a result or a recent. */
-  onValueChange: (option: PickerOption<T, D>) => void;
-  /** Shown — under a heading — when the box is focused but empty (e.g. the
-   *  output of `useRecents`). Omit for no recents. */
-  recentOptions?: PickerOption<T, D>[];
-  /** Row subtitle, read from the option's `data` payload. The row's structure
-   *  and height are owned by the component (a MenuListItem) so every result
-   *  reads consistently — consumers supply data, not markup. */
-  getOptionDescription?: (option: PickerOption<T, D>) => string | undefined;
-  /** Leading accessory (e.g. a status dot / avatar). */
-  renderOptionIcon?: (option: PickerOption<T, D>) => ReactNode;
-  /** Trailing accessory (e.g. a `Badge`). */
-  renderOptionRight?: (option: PickerOption<T, D>) => ReactNode;
-  /** Marks the matching row as the current selection (a highlight). The box
-   *  itself stays a search affordance — the selection is shown by the host. */
-  selectedValue?: T | null;
-  /** True only on the initial load (no results yet) — show a spinner. During
-   *  revalidation / typing, pass the query's (SWR-style) `loading`, which stays
-   *  false while previous rows are kept, so the list never blanks. */
-  loading?: boolean;
-  /** Debounce for `onSearchChange`, in ms. Default 200. */
-  searchDebounceMs?: number;
-  placeholder?: string;
-  /** Heading above the recents list. Default "Recent". Pass a translated string. */
-  recentsLabel?: string;
-  /** No-results-for-query text. Default "No results". Pass a translated string. */
-  emptyText?: string;
-  /** Accessible name for the results listbox. Default "Results". */
-  accessibilityLabel?: string;
-  disabled?: boolean;
-  autoFocus?: boolean;
-  testID?: string;
-  style?: StyleProp<ViewStyle>;
-}
-
-// Approximate row height (MenuListItem: title + description) for scroll-into-view.
-const OPTION_HEIGHT = 52;
-
-/**
- * Search-first combobox: an always-visible white search panel whose typing
- * drives a debounced, server-side search; results drop into a Popover listbox
- * of MenuListItem rows below. Focused while empty, it offers `recentOptions`.
- * Picking a row fires `onValueChange` and clears the box for the next search —
- * the selection itself is rendered by the host (a summary above, details below).
- *
- * Focus stays on the input the whole time (Popover `manageFocus={false}`); the
- * input owns the keyboard (↑/↓ move the active row via `aria-activedescendant`,
- * Enter selects, Esc closes) — the ARIA combobox pattern, not a button trigger.
- */
-export function SearchSelect<T extends string = string, D = unknown>(
-  props: SearchSelectProps<T, D>,
-) {
-  const {
-    options,
-    leadingActions = [],
-    onSearchChange,
-    onValueChange,
-    recentOptions,
-    getOptionDescription,
-    renderOptionIcon,
-    renderOptionRight,
-    selectedValue = null,
-    loading = false,
-    searchDebounceMs = 200,
-    placeholder,
-    recentsLabel = "Recent",
-    emptyText = "No results",
-    accessibilityLabel = "Results",
-    disabled = false,
-    autoFocus = false,
-    testID,
-    style,
-  } = props;
-
-  const [query, setQuery] = useState("");
-  const [open, setOpen] = useState(autoFocus);
-  const triggerRef = useRef<View>(null);
-  const inputRef = useRef<RNTextInput>(null);
-  const scrollRef = useRef<ScrollView>(null);
-  const baseId = useId();
-  const listboxId = `${baseId}-listbox`;
-  const optionId = (i: number) => `${baseId}-option-${i}`;
-
-  const searching = query.trim().length > 0;
-  const list = searching ? options : (recentOptions ?? []);
-  // The navigable set is the leading actions followed by the option list, so
-  // arrow keys + aria-activedescendant span both. `nLead` is the boundary.
-  const nLead = leadingActions.length;
-
-  const debouncedSearch = useDebouncedCallback(onSearchChange, searchDebounceMs);
-
-  // Only the option list scrolls (actions are pinned above it), so map the
-  // combined index back into the list before scrolling.
-  const scrollToIndex = useCallback(
-    (index: number) => {
-      if (index < nLead) return;
-      scrollRef.current?.scrollTo({ y: Math.max(0, (index - nLead) * OPTION_HEIGHT - 80), animated: false });
-    },
-    [nLead],
-  );
-
-  const handleSelect = useCallback(
-    (index: number) => {
-      if (index < nLead) {
-        leadingActions[index].onPress();
-        setOpen(false);
-        return;
-      }
-      const opt = list[index - nLead];
-      if (!opt || opt.disabled) return;
-      onValueChange(opt);
-      // The trailing search is irrelevant once a pick is made. Cancel it and
-      // tell the consumer the term is now empty (the box clears) so its query
-      // state matches and any search-driven fetch goes idle.
-      debouncedSearch.cancel();
-      setQuery("");
-      onSearchChange("");
-      setOpen(false);
-      // A click on a row blurs the input; keep it focused so the user can
-      // search again without re-clicking.
-      inputRef.current?.focus();
-    },
-    [list, leadingActions, nLead, onValueChange, onSearchChange, debouncedSearch],
-  );
-
-  const { activeIndex, setActiveIndex, handleKey } = useListKeyboardNav({
-    count: nLead + list.length,
-    isDisabled: (i) => (i >= nLead ? (list[i - nLead]?.disabled ?? false) : false),
-    onSelect: handleSelect,
-    onClose: () => setOpen(false),
-    onActiveChange: scrollToIndex,
-  });
-
-  // Reset the active row when the visible list changes (new results, or toggling
-  // between results and recents). Keyed on primitives so a consumer re-render
-  // with an equal-but-new array doesn't reset mid-navigation.
-  const firstValue = list[0]?.value;
-  useEffect(() => {
-    setActiveIndex(0);
-  }, [searching, list.length, firstValue, setActiveIndex]);
-
-  const handleChangeText = useCallback(
-    (text: string) => {
-      setQuery(text);
-      if (!disabled) setOpen(true);
-      debouncedSearch(text);
-    },
-    [disabled, debouncedSearch],
-  );
-
-  const handleKeyPress = useCallback(
-    (e: { nativeEvent: { key: string }; preventDefault: () => void }) => {
-      const key = e.nativeEvent.key;
-      if (!open && (key === "ArrowDown" || key === "ArrowUp")) setOpen(true);
-      if (handleKey(key)) e.preventDefault();
-    },
-    [open, handleKey],
-  );
-
-  // Nothing to show ⇒ don't open an empty popover. Leading actions (e.g.
-  // "Browse all") always give the popover something to show on focus.
-  const showList = open && !disabled && (nLead > 0 || searching || list.length > 0);
-  const activeOptionId =
-    activeIndex >= 0 && activeIndex < nLead + list.length ? optionId(activeIndex) : undefined;
-  const listLabel = searching ? accessibilityLabel : recentsLabel;
-
-  return (
-    <View style={style}>
-      <View ref={triggerRef}>
-        <TextInputField
-          ref={inputRef}
-          testID={testID}
-          icon="search"
-          clearable
-          value={query}
-          onChangeText={handleChangeText}
-          onFocus={() => {
-            if (!disabled) setOpen(true);
-          }}
-          onKeyPress={handleKeyPress}
-          placeholder={placeholder}
-          placeholderTextColor={colors.zinc["400"]}
-          editable={!disabled}
-          autoFocus={autoFocus}
-          autoCapitalize="none"
-          autoCorrect={false}
-          style={styles.input}
-          role="combobox"
-          aria-expanded={showList}
-          aria-controls={listboxId}
-          aria-activedescendant={activeOptionId}
-          aria-autocomplete="list"
-        />
-      </View>
-      <Popover
-        open={showList}
-        onOpenChange={setOpen}
-        triggerRef={triggerRef}
-        side="bottom"
-        align="start"
-        offset={4}
-        inheritTriggerWidth
-      >
-        <PopoverContent
-          manageFocus={false}
-          disableBodyScroll
-          testID={testID ? `${testID}-popover` : undefined}
-        >
-          <View style={styles.menu}>
-            {nLead > 0
-              ? leadingActions.map((action, i) => (
-                  <MenuListItem
-                    key={action.key}
-                    nativeID={optionId(i)}
-                    testID={`search-action-${action.key}`}
-                    role="option"
-                    icon={action.icon}
-                    title={action.label}
-                    titleColor={action.color}
-                    focused={i === activeIndex}
-                    onPress={() => handleSelect(i)}
-                    onHoverIn={() => setActiveIndex(i)}
-                  />
-                ))
-              : null}
-            {!searching && list.length > 0 ? (
-              <View style={styles.sectionHeader}>
-                <Text size="xs" weight="medium" color="zinc-500">
-                  {recentsLabel}
-                </Text>
-              </View>
-            ) : null}
-            <ScrollView
-              ref={scrollRef}
-              style={styles.scroll}
-              nativeID={listboxId}
-              accessibilityLabel={listLabel}
-              keyboardShouldPersistTaps="handled"
-              // `listbox` is valid ARIA but absent from React Native's Role enum;
-              // react-native-web forwards it verbatim for assistive tech.
-              role={"listbox" as "list"}
-            >
-              {loading ? (
-                <View style={styles.statusRow}>
-                  <ActivityIndicator />
-                </View>
-              ) : list.length === 0 ? (
-                // Only "no results" while searching — an empty recents list (no
-                // query) just shows the leading actions above, nothing more.
-                searching ? (
-                  <View style={styles.statusRow}>
-                    <Text size="sm" color="zinc-500">
-                      {emptyText}
-                    </Text>
-                  </View>
-                ) : null
-              ) : (
-                list.map((opt, i) => (
-                  <MenuListItem
-                    key={opt.value}
-                    nativeID={optionId(nLead + i)}
-                    testID={`search-option-${opt.value}`}
-                    role="option"
-                    icon={renderOptionIcon?.(opt)}
-                    title={opt.label ?? opt.value}
-                    description={getOptionDescription?.(opt)}
-                    right={renderOptionRight?.(opt)}
-                    focused={nLead + i === activeIndex}
-                    selected={opt.value === selectedValue}
-                    disabled={opt.disabled}
-                    onPress={() => handleSelect(nLead + i)}
-                    onHoverIn={() => setActiveIndex(nLead + i)}
-                  />
-                ))
-              )}
-            </ScrollView>
-          </View>
-        </PopoverContent>
-      </Popover>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  input: {
-    backgroundColor: colors.background,
-    boxShadow: colors.border_shadow,
-    // A pill, matching the search input inside the picker dialog.
-    borderRadius: 999,
-  },
-  menu: {
-    gap: 2,
-  },
-  sectionHeader: {
-    paddingHorizontal: 8,
-    paddingTop: 4,
-    paddingBottom: 2,
-  },
-  scroll: {
-    maxHeight: 320,
-  },
-  statusRow: {
-    alignItems: "center",
-    justifyContent: "center",
-    paddingVertical: 16,
-  },
-});

package/src/select_item.tsx

@@ -1,55 +0,0 @@
-import { Pressable, StyleProp, StyleSheet, View, ViewStyle } from "react-native";
-import { colors } from "./colors";
-
-interface SelectItemProps {
-  children: React.ReactNode;
-  testID?: string;
-  onPress?: () => void;
-  style?: StyleProp<ViewStyle>;
-}
-
-/**
- * A bordered, optionally-pressable container — the selectable-row look used on
- * auth screens (organization picker, login choices). Frozen at the original
- * Card styling (white, 1px border, radius 8, padding 16) so those screens stay
- * visually stable while Card itself evolves toward a flatter dashboard look.
- */
-export function SelectItem(props: SelectItemProps) {
-  const { children, testID, onPress, style } = props;
-
-  if (onPress) {
-    return (
-      <Pressable
-        testID={testID}
-        onPress={() => {
-          onPress();
-        }}
-        style={(state) => {
-          const hovered = (state as { hovered?: boolean }).hovered;
-          return [styles.container, hovered && styles.hovered, style];
-        }}
-      >
-        {children}
-      </Pressable>
-    );
-  }
-
-  return (
-    <View testID={testID} style={[styles.container, style]}>
-      {children}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    padding: 16,
-    borderRadius: 8,
-    backgroundColor: colors.background,
-    borderColor: colors.border,
-    borderWidth: 1,
-  },
-  hovered: {
-    borderColor: colors.zinc["900"],
-  },
-});